/* =====================================================
   CHETOWEB - PORTAL PRINCIPAL
   Diseño responsive y ligero para Strato
   ===================================================== */

:root{
  --navy:#051b2d;
  --navy-2:#092a43;
  --cyan:#22b8f4;
  --cyan-2:#0ba9d8;
  --teal:#0aa1a7;
  --coral:#ff6b40;
  --coral-2:#ff8751;
  --white:#fff;
  --ink:#08192c;
  --muted:#637287;
  --page:#f4f8fb;
  --line:#dfe8ee;
  --shadow:0 24px 70px rgba(4,29,49,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--page);
}

a{color:inherit}
img{display:block;max-width:100%}
.container{width:min(1500px,calc(100% - 56px));margin-inline:auto}

/* ==============================
   HEADER
   ============================== */

.site-header{
  position:absolute;
  z-index:30;
  top:0;
  left:0;
  right:0;
  padding:20px 0;
}

.nav{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:34px;
}

.brand{
  display:flex;
  align-items:center;
  gap:13px;
  color:#fff;
  user-select:none;
}

.brand-cap{
  width:62px;
  height:48px;
  object-fit:contain;
}

.brand-word{
  font-size:clamp(1.5rem,2vw,2.25rem);
  font-weight:950;
  letter-spacing:-.055em;
  line-height:1;
}

.brand-word span{color:var(--cyan)}

.main-nav{
  justify-self:center;
  display:flex;
  gap:45px;
  align-items:center;
}

.main-nav a{
  position:relative;
  padding:11px 0;
  color:rgba(255,255,255,.88);
  text-decoration:none;
  font-size:.96rem;
  font-weight:600;
}

.main-nav a::after{
  content:"";
  position:absolute;
  left:50%;
  right:50%;
  bottom:0;
  height:3px;
  border-radius:99px;
  background:var(--cyan);
  transition:.2s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after{
  left:0;
  right:0;
}

.main-nav a.active{color:var(--cyan)}

.online-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 19px;
  border-radius:999px;
  background:rgba(10,60,88,.88);
  border:1px solid rgba(255,255,255,.09);
  color:#fff;
  font-weight:760;
}

.online-pill img{
  width:27px;
  height:24px;
  object-fit:contain;
}

/* ==============================
   HERO
   ============================== */

.hero{
  position:relative;
  overflow:hidden;
  min-height:430px;
  color:white;
  background:
    radial-gradient(circle at 10% 28%,rgba(34,184,244,.13),transparent 34rem),
    linear-gradient(110deg,#041729 0%,#082943 56%,#153850 100%);
}

.hero-photo{
  position:absolute;
  inset:0 0 0 auto;
  width:60%;
  height:100%;
  background:url("assets/hero.webp") center/cover no-repeat;
}

.hero-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,#041729 0%,rgba(4,23,41,.97) 32%,rgba(4,23,41,.68) 53%,rgba(4,23,41,.06) 77%),
    linear-gradient(180deg,rgba(0,0,0,.12),transparent 30%);
}

.hero-content{
  position:relative;
  z-index:4;
  min-height:430px;
  display:flex;
  align-items:center;
  padding-top:82px;
  padding-bottom:55px;
}

.hero-copy{
  width:min(760px,58%);
}

.eyebrow{
  margin:0 0 14px;
  color:#b2cfe1;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.31em;
}

.hero h1{
  margin:0;
  font-size:clamp(3.1rem,5.2vw,5.9rem);
  line-height:.95;
  letter-spacing:-.06em;
}

.hero h1 span{
  color:var(--cyan);
  white-space:nowrap;
}

.hero-lead{
  max-width:690px;
  margin:24px 0 0;
  color:#c8d8e3;
  font-size:clamp(1.03rem,1.45vw,1.28rem);
  line-height:1.5;
}

.benefits{
  display:flex;
  gap:56px;
  margin-top:31px;
}

.benefit{
  display:flex;
  align-items:center;
  gap:14px;
}

.benefit img{
  width:45px;
  height:45px;
  object-fit:contain;
}

.benefit div{
  display:grid;
  line-height:1.28;
  color:#e9f3f8;
  font-size:.9rem;
}

.benefit strong{font-weight:600}
.benefit span{font-weight:400}

.hero-curve{
  position:absolute;
  z-index:6;
  left:-4%;
  right:-4%;
  bottom:-65px;
  height:92px;
  border-radius:50% 50% 0 0/90% 90% 0 0;
  background:var(--page);
  transform:rotate(-.8deg);
}

/* ==============================
   CURSOS
   ============================== */

.courses{
  padding:28px 0 34px;
  background:
    radial-gradient(circle at 8% 30%,rgba(11,169,216,.1),transparent 25rem),
    radial-gradient(circle at 93% 34%,rgba(255,107,64,.09),transparent 27rem),
    var(--page);
}

.course-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.course-card{
  display:grid;
  grid-template-columns:43% 57%;
  overflow:hidden;
  min-height:405px;
  background:#fff;
  border-radius:24px;
  box-shadow:var(--shadow);
}

.marketing-card{border-top:5px solid #15c3c8}
.opomatica-card{border-top:5px solid var(--coral)}

.course-image{
  min-height:100%;
  background-position:center;
  background-size:cover;
  position:relative;
}

.course-image::after{
  content:"";
  position:absolute;
  inset:auto -2px -1px -2px;
  height:28%;
  background:#fff;
  clip-path:ellipse(78% 42% at 50% 100%);
}

.marketing-image{
  background-image:url("assets/marketing.webp");
}

.opomatica-image{
  background-image:url("assets/opomatica.webp");
}

.course-copy{
  display:flex;
  flex-direction:column;
  padding:34px 30px 23px;
}

.course-label{
  margin:0 0 13px;
  color:#176385;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.22em;
}

.course-copy h2{
  margin:0;
  color:#06162b;
  font-size:clamp(1.8rem,2.25vw,2.7rem);
  line-height:1.02;
  letter-spacing:-.045em;
}

.course-meta{
  margin:10px 0 17px;
  color:#0393a1;
  font-weight:800;
}

.opomatica-card .course-meta{color:var(--coral)}

.course-secondary{
  margin:-8px 0 18px;
  color:#607287;
}

.course-description{
  margin:0 0 22px;
  color:var(--muted);
  line-height:1.5;
}

.course-button{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  margin-top:auto;
  padding:15px 18px;
  border-radius:16px;
  color:#fff;
  text-decoration:none;
  font-weight:850;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}

.course-button:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,.16);
  filter:brightness(1.035);
}

.marketing-card .course-button{
  background:linear-gradient(90deg,#068d98,#13aab2);
}

.opomatica-card .course-button{
  background:linear-gradient(90deg,var(--coral),var(--coral-2));
}

.course-features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:21px;
  padding-top:17px;
  border-top:1px solid var(--line);
}

.course-features span{
  color:#46657a;
  font-size:.7rem;
  text-align:center;
  line-height:1.25;
}

/* ==============================
   CONTACTO Y FOOTER
   ============================== */

.contact-strip{
  color:#fff;
  background:linear-gradient(90deg,#092c46,#0b3a57);
  padding:22px 0;
}

.contact-inner{
  display:grid;
  grid-template-columns:1fr auto;
  gap:35px;
  align-items:center;
}

.quote{
  margin:0;
  text-align:center;
  font-size:clamp(.95rem,1.4vw,1.12rem);
}

.contact-points{
  display:flex;
  gap:26px;
  color:#bbd1de;
  font-size:.77rem;
}

.footer{
  color:#9fb9c8;
  background:#061b2e;
  padding:24px 0 28px;
}

.footer-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:28px;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.footer-brand img{
  width:49px;
}

.footer-brand strong{
  color:white;
  font-size:1.45rem;
  letter-spacing:-.04em;
}

.footer-brand strong span{color:var(--cyan)}

.footer p{
  margin:0;
  font-size:.82rem;
}

.footer small{
  color:#7592a4;
}

/* ==============================
   RESPONSIVE
   ============================== */

@media (max-width:1180px){
  .course-grid{grid-template-columns:1fr}
  .course-card{grid-template-columns:40% 60%}
  .hero-copy{width:68%}
  .main-nav{gap:28px}
  .contact-inner{grid-template-columns:1fr}
  .contact-points{justify-content:center}
}

@media (max-width:780px){
  .container{width:min(100% - 28px,1500px)}

  .site-header{padding:14px 0}
  .nav{grid-template-columns:1fr auto}
  .main-nav{
    grid-column:1/-1;
    grid-row:2;
    justify-self:start;
    gap:25px;
    margin-top:3px;
  }
  .online-pill{
    padding:9px 12px;
    font-size:.72rem;
  }

  .brand-cap{width:47px;height:38px}
  .brand-word{font-size:1.35rem}

  .hero{
    min-height:650px;
  }

  .hero-photo{
    width:100%;
    height:50%;
    background-position:center top;
  }

  .hero-shade{
    background:linear-gradient(180deg,rgba(4,23,41,.45),rgba(4,23,41,.98) 56%);
  }

  .hero-content{
    min-height:650px;
    align-items:flex-end;
    padding-top:190px;
    padding-bottom:94px;
  }

  .hero-copy{
    width:100%;
  }

  .hero h1{
    font-size:clamp(3rem,14vw,5.1rem);
  }

  .hero h1 span{white-space:normal}

  .benefits{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
  }

  .benefit{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .benefit img{
    width:38px;
    height:38px;
  }

  .benefit div{
    font-size:.71rem;
  }

  .courses{padding-top:20px}

  .course-card{
    grid-template-columns:1fr;
  }

  .course-image{
    height:290px;
    min-height:auto;
  }

  .course-copy{
    padding:28px 24px 22px;
  }

  .contact-points{
    flex-wrap:wrap;
    gap:12px 20px;
  }

  .footer-inner{
    grid-template-columns:1fr;
    text-align:center;
  }

  .footer-brand{
    justify-content:center;
  }
}

@media (max-width:470px){
  .online-pill{display:none}
  .nav{grid-template-columns:1fr}
  .main-nav{
    gap:22px;
    font-size:.88rem;
  }
  .hero-content{padding-top:210px}
  .course-image{height:235px}
  .course-copy h2{font-size:1.9rem}
  .course-features{gap:4px}
  .course-features span{font-size:.62rem}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}