*{box-sizing:border-box}html{scroll-behavior:smooth}:root{--navy:#102f50;--teal:#08a5a5;--teal-dark:#087f82;--sky:#edf8f8;--soft:#f4f7f9;--text:#263b4d;--muted:#617282;--line:#dfe7ec;--white:#fff;--max:1180px;--radius:20px;--shadow:0 12px 34px rgba(16,47,80,.10)}body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--text);background:#fff;line-height:1.65}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(92%,var(--max));margin:auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.nav{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:inline-flex;flex-direction:column;line-height:1}.brand-main{font-size:1.25rem;font-weight:850;letter-spacing:-.04em;color:var(--navy)}.brand-main em{font-family:Georgia,serif;font-weight:400;color:var(--teal);font-size:1.18em}.brand-sub{font-size:.63rem;letter-spacing:.28em;color:var(--muted);margin-top:5px}.nav-links{display:flex;align-items:center;gap:24px;font-weight:700;font-size:.92rem}.nav-links a{padding:29px 0 25px;border-bottom:3px solid transparent}.nav-links a:hover,.nav-links a.active{color:var(--teal-dark);border-color:var(--teal)}.menu-toggle{display:none;border:0;background:transparent;font-size:1.5rem;color:var(--navy)}h1,h2,h3{color:var(--navy);line-height:1.12;margin-top:0}h1{font-size:clamp(2.5rem,5vw,4.8rem);letter-spacing:-.055em;margin-bottom:22px}h2{font-size:clamp(1.9rem,3vw,3rem);letter-spacing:-.04em;margin-bottom:18px}h3{font-size:1.18rem}.hero,.page-hero{background:linear-gradient(120deg,#eefafa 0%,#fff 60%,#eef4f8 100%);padding:84px 0}.page-hero.compact{padding:64px 0}.hero-grid,.two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}.hero-copy p,.page-hero p{font-size:1.16rem;color:var(--muted);max-width:690px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 21px;border-radius:999px;background:var(--navy);color:#fff;font-weight:800;border:0;cursor:pointer}.btn:hover{transform:translateY(-1px)}.btn.secondary{background:#fff;color:var(--navy);border:1px solid var(--line)}.btn.teal{background:var(--teal)}.hero-visual{position:relative}.hero-visual img,.detail-image{border-radius:28px;box-shadow:var(--shadow);width:100%;aspect-ratio:4/3;object-fit:cover}.hero-note{position:absolute;left:-28px;bottom:28px;background:#fff;padding:18px 22px;border-radius:17px;box-shadow:var(--shadow);font-weight:800;color:var(--navy)}.section{padding:78px 0}.section.soft{background:var(--soft)}.section-head{max-width:770px;margin-bottom:34px}.section-head p{color:var(--muted);font-size:1.07rem}.eyebrow{display:inline-block;color:var(--teal-dark);font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;font-weight:850;margin-bottom:9px}.feature-panel,.areas-panel{background:#fff;border:1px solid var(--line);border-radius:27px;padding:28px;box-shadow:0 7px 24px rgba(16,47,80,.05)}.feature-grid,.areas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.feature-card,.area-card{background:var(--sky);border-radius:18px;padding:26px;min-height:230px}.feature-card{background:#fff;border:1px solid var(--line)}.line-icon{width:48px;height:48px;object-fit:contain;margin-bottom:20px}.feature-card p,.area-card p,.course-card p,.resource-card p{color:var(--muted)}.featured-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}.text-link{font-weight:800;color:var(--teal-dark)}.carousel{position:relative}.carousel-window{overflow:hidden;padding:4px}.carousel-track{display:flex;gap:22px;transition:transform .38s ease}.course-card{flex:0 0 calc((100% - 44px)/3);background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 8px 25px rgba(16,47,80,.06)}.course-image{width:100%;aspect-ratio:16/10;object-fit:cover}.course-body{padding:24px}.course-body h3{font-size:1.15rem;min-height:2.55em}.carousel-controls{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.circle-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:1.4rem;cursor:pointer}.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.cards-grid .course-card{flex:auto}.content-box,.resource-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:0 8px 25px rgba(16,47,80,.05)}.detail-grid{display:grid;grid-template-columns:1fr .8fr;gap:45px;align-items:start}.detail-grid h2{font-size:1.55rem;margin-top:30px}.detail-grid h2:first-child{margin-top:0}.check-list{padding:0;margin:0;list-style:none}.check-list li{position:relative;padding:9px 0 9px 28px;border-bottom:1px solid #edf1f3}.check-list li:before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:900}.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.cta-strip{background:var(--navy);color:#fff;padding:48px 0}.cta-row{display:flex;align-items:center;justify-content:space-between;gap:30px}.cta-row h2,.cta-row h3{color:#fff;margin-bottom:8px}.cta-row p{color:#c9d7e4;margin:0}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:42px;align-items:start}.contact-card{background:var(--soft);border-radius:22px;padding:28px}.contact-card strong{display:block;color:var(--navy);margin-top:15px}.notice{padding:15px 18px;border-radius:14px;background:#fff8e7;border:1px solid #f0db9d;color:#765b17;font-size:.92rem}.site-footer{background:#0c2947;color:#c8d5e1;padding:58px 0 22px}.site-footer .brand-main{color:#fff}.site-footer .brand-sub{color:#98afc1}.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:40px}.footer-title{font-weight:850;color:#fff;margin-bottom:13px}.footer-links{display:flex;flex-direction:column;gap:8px}.footer-links a:hover{color:#fff}.footer-bottom{margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;font-size:.85rem}.prose{max-width:830px}.prose p{font-size:1.06rem;color:var(--muted)}.stack{display:grid;gap:22px}.info-block{padding:28px;border:1px solid var(--line);border-radius:20px;background:#fff}.info-block p{margin-bottom:0;color:var(--muted)}@media(max-width:900px){.nav-links{display:none;position:absolute;top:82px;left:0;right:0;background:#fff;padding:12px 4%;flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line)}.nav-links.open{display:flex}.nav-links a{padding:12px 0;border:0}.menu-toggle{display:block}.hero-grid,.two-col,.detail-grid,.contact-grid{grid-template-columns:1fr}.hero-note{left:16px}.feature-grid,.areas-grid,.cards-grid,.resource-grid{grid-template-columns:1fr 1fr}.course-card{flex-basis:calc((100% - 22px)/2)}.footer-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.hero,.page-hero{padding:56px 0}.section{padding:56px 0}.feature-grid,.areas-grid,.cards-grid,.resource-grid,.footer-grid{grid-template-columns:1fr}.course-card{flex-basis:100%}.cta-row,.featured-head,.footer-bottom{align-items:flex-start;flex-direction:column}.hero-note{position:static;margin-top:12px}.feature-panel,.areas-panel{padding:16px}h1{font-size:2.65rem}}
/* =========================================================
   NUEVA CABECERA / HERO - FUNDACIÓN SABER Y EDUCAR
   ========================================================= */

.hero-nuevo{
  position:relative;
  overflow:hidden;
  background:#f7faf9;
  padding:0;
}

.hero-nuevo .hero-grid{
  min-height:650px;
  display:grid;
  grid-template-columns:48% 52%;
  gap:0;
  align-items:stretch;
}

/* Texto lado izquierdo */
.hero-nuevo .hero-copy{
  position:relative;
  z-index:2;
  padding:95px 52px 95px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero-nuevo .hero-copy .eyebrow{
  margin-bottom:14px;
}

.hero-nuevo .hero-copy h1{
  max-width:680px;
  margin:0 0 24px;
  font-size:clamp(3rem,5vw,5rem);
  line-height:.98;
  letter-spacing:-.055em;
  color:var(--navy);
}

.hero-nuevo .hero-copy p{
  max-width:650px;
  margin:0;
  font-size:1.15rem;
  line-height:1.65;
  color:var(--muted);
}

/* Botones */
.hero-nuevo .hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:30px;
}

.hero-nuevo .btn.secondary{
  background:#fff;
  color:var(--navy);
  border:1.5px solid var(--navy);
}

.hero-nuevo .btn.secondary:hover{
  background:var(--navy);
  color:#fff;
}

/* Botón de WhatsApp destacado */
.hero-nuevo .whatsapp-btn{
  background:var(--teal);
  border:1.5px solid var(--teal);
  color:#fff;
  box-shadow:0 8px 20px rgba(8,165,165,.18);
}

.hero-nuevo .whatsapp-btn:hover{
  background:var(--teal-dark);
  border-color:var(--teal-dark);
  color:#fff;
  transform:translateY(-2px);
}

/* Fotografía lado derecho */
.hero-nuevo .hero-foto{
  position:relative;
  min-height:650px;
  overflow:hidden;
}

.hero-nuevo .hero-foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Fusión suave entre texto e imagen */
.hero-nuevo .hero-foto::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    #f7faf9 0%,
    rgba(247,250,249,.86) 8%,
    rgba(247,250,249,.35) 17%,
    rgba(247,250,249,0) 31%
  );
}

/* Suave degradado inferior */
.hero-nuevo::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:90px;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,.6)
  );
}

/* TABLET */
@media(max-width:900px){

  .hero-nuevo .hero-grid{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .hero-nuevo .hero-copy{
    padding:65px 0 42px;
  }

  .hero-nuevo .hero-copy h1{
    max-width:760px;
    font-size:clamp(2.8rem,8vw,4rem);
  }

  .hero-nuevo .hero-foto{
    min-height:460px;
  }

  .hero-nuevo .hero-foto::before{
    background:linear-gradient(
      180deg,
      #f7faf9 0%,
      rgba(247,250,249,.55) 12%,
      rgba(247,250,249,0) 32%
    );
  }
}

/* CELULAR */
@media(max-width:620px){

  .hero-nuevo .hero-copy{
    padding:48px 0 30px;
  }

  .hero-nuevo .hero-copy h1{
    font-size:2.7rem;
    line-height:1.02;
  }

  .hero-nuevo .hero-copy p{
    font-size:1rem;
  }

  .hero-nuevo .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-nuevo .hero-actions .btn{
    width:100%;
  }

  .hero-nuevo .hero-foto{
    min-height:360px;
  }
}
/* ==========================================
   AJUSTE FINAL HERO PORTADA
   ========================================== */

.hero-nuevo .hero-grid{
  min-height:560px;
  grid-template-columns:40% 60%;
  gap:0;
  align-items:stretch;
}

/* Texto */
.hero-nuevo .hero-copy{
  padding:70px 38px 70px 0;
}

.hero-nuevo .hero-copy h1{
  font-size:clamp(2.8rem,4.35vw,4.6rem);
  line-height:1;
}

/* Fotografía: más ancha y menos recortada */
.hero-nuevo .hero-foto{
  min-height:560px;
}

.hero-nuevo .hero-foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

/* Difuminado mucho más transparente */
.hero-nuevo .hero-foto::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:linear-gradient(
    90deg,
    #f7faf9 0%,
    rgba(247,250,249,.48) 5%,
    rgba(247,250,249,.18) 11%,
    rgba(247,250,249,.04) 17%,
    rgba(247,250,249,0) 22%
  );
}

/* Botón WhatsApp */
.hero-nuevo .whatsapp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  background:var(--teal);
  border:1.5px solid var(--teal);
  color:#fff;

  padding:13px 22px;
  white-space:nowrap;
}

.hero-nuevo .whatsapp-btn svg{
  width:22px !important;
  height:22px !important;
  min-width:22px;
  display:block;
  color:#fff;
}

.hero-nuevo .whatsapp-btn:hover{
  background:var(--teal-dark);
  border-color:var(--teal-dark);
  color:#fff;
}

/* Ver cursos */
.hero-nuevo .btn.secondary{
  background:#fff;
  border:1.5px solid var(--navy);
  color:var(--navy);
}


/* TABLET */
@media(max-width:900px){

  .hero-nuevo .hero-grid{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .hero-nuevo .hero-copy{
    padding:55px 0 35px;
  }

  .hero-nuevo .hero-foto{
    min-height:430px;
  }
}


/* MÓVIL */
@media(max-width:620px){

  .hero-nuevo .hero-copy h1{
    font-size:2.55rem;
  }

  .hero-nuevo .hero-actions{
    flex-direction:column;
  }

  .hero-nuevo .hero-actions .btn{
    width:100%;
  }

  .hero-nuevo .hero-foto{
    min-height:330px;
  }
}
/* =========================================================
   AJUSTE HERO: FOTO HASTA BORDE + DEGRADADO MÁS SUAVE
   ========================================================= */

/* Hace que la foto escape del container y llegue
   completamente al borde derecho de la pantalla */
.hero-nuevo .hero-foto{
  min-height:560px;

  width:calc(
    100% + max(
      4vw,
      calc((100vw - var(--max)) / 2)
    )
  );

  margin-right:calc(
    -1 * max(
      4vw,
      calc((100vw - var(--max)) / 2)
    )
  );

  overflow:hidden;
}


/* Mantiene la fotografía cubriendo todo el nuevo espacio */
.hero-nuevo .hero-foto img{
  width:100%;
  height:100%;
  object-fit:cover;

  /* pequeños ajustes para conservar mejor a los niños */
  object-position:center center;

  display:block;
}


/* Degradado mucho más largo y progresivo */
.hero-nuevo .hero-foto::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:linear-gradient(
    90deg,

    #f7faf9 0%,

    rgba(247,250,249,.92) 4%,

    rgba(247,250,249,.72) 10%,

    rgba(247,250,249,.48) 18%,

    rgba(247,250,249,.28) 26%,

    rgba(247,250,249,.13) 34%,

    rgba(247,250,249,.05) 41%,

    rgba(247,250,249,0) 48%
  );
}


/* En tablet y móvil cancelamos la salida al borde,
   porque ahí la fotografía queda debajo del texto */
@media(max-width:900px){

  .hero-nuevo .hero-foto{
    width:100%;
    margin-right:0;
  }

  .hero-nuevo .hero-foto::before{
    background:linear-gradient(
      180deg,
      #f7faf9 0%,
      rgba(247,250,249,.65) 10%,
      rgba(247,250,249,.25) 20%,
      rgba(247,250,249,0) 35%
    );
  }

}
/* =========================================================
   PÁGINA CONTACTO
   FUNDACIÓN SABER Y EDUCAR
   ========================================================= */

.contact-section{
  background:#fff;
}

.contact-grid-new{
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:start;
}


/* COLUMNA INFORMATIVA */

.contact-info h2{
  max-width:520px;
}

.contact-intro{
  max-width:570px;
  color:var(--muted);
  font-size:1.06rem;
  margin-bottom:28px;
}

.contact-check-list{
  max-width:570px;
}


/* CONTACTO DIRECTO */

.direct-contact{
  margin-top:45px;
  padding:30px;
  border-radius:22px;
  background:var(--sky);
}

.direct-contact h3{
  font-size:1.35rem;
  margin-bottom:8px;
}

.direct-contact > p{
  margin-top:0;
  color:var(--muted);
}

.direct-contact-buttons{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}


/* WHATSAPP */

.direct-contact .whatsapp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  background:var(--teal);
  color:#fff;
  border:1px solid var(--teal);
}

.direct-contact .whatsapp-btn svg{
  width:21px !important;
  height:21px !important;
  min-width:21px;
  color:#fff;
}

.direct-contact .whatsapp-btn:hover{
  background:var(--teal-dark);
  border-color:var(--teal-dark);
}


/* DATOS */

.contact-data{
  margin-top:28px;
  padding-top:23px;

  border-top:1px solid rgba(16,47,80,.12);

  display:grid;
  gap:17px;
}

.contact-data strong{
  display:block;
  color:var(--navy);
  margin-bottom:2px;
}

.contact-data a{
  color:var(--teal-dark);
  font-weight:700;
}

.contact-data a:hover{
  text-decoration:underline;
}


/* TARJETA FORMULARIO */

.contact-form-card{
  background:#f7fafb;

  border:1px solid var(--line);
  border-radius:28px;

  padding:42px;

  box-shadow:
    0 15px 45px rgba(16,47,80,.08);
}

.contact-form-card h2{
  margin-bottom:10px;
}

.form-intro{
  margin-top:0;
  margin-bottom:30px;

  color:var(--muted);
}


/* FORMULARIO */

.contact-form{
  width:100%;
}

.form-group{
  margin-bottom:20px;
}

.form-group label{
  display:block;

  margin-bottom:7px;

  color:var(--navy);
  font-size:.92rem;
  font-weight:750;
}


/* DOS COLUMNAS */

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}


/* CAMPOS */

.contact-form input,
.contact-form select,
.contact-form textarea{

  width:100%;

  padding:14px 15px;

  border:1px solid #d6e0e5;
  border-radius:12px;

  background:#fff;

  color:var(--text);

  font-family:inherit;
  font-size:.97rem;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}


/* PLACEHOLDER */

.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:#9aabb7;
}


/* FOCUS */

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

  outline:none;

  border-color:var(--teal);

  box-shadow:
    0 0 0 4px rgba(8,165,165,.10);
}


/* TEXTAREA */

.contact-form textarea{
  resize:vertical;
  min-height:150px;
}


/* SELECT */

.contact-form select{
  cursor:pointer;
}


/* BOTÓN ENVIAR */

.form-submit{
  min-width:190px;

  padding:14px 25px;

  background:var(--teal);

  font-size:1rem;

  box-shadow:
    0 8px 20px rgba(8,165,165,.17);
}

.form-submit:hover{
  background:var(--teal-dark);
  transform:translateY(-2px);
}


/* NOTA INFERIOR */

.form-note{
  margin:16px 0 0;

  color:var(--muted);

  font-size:.82rem;
  line-height:1.5;
}


/* TABLET */

@media(max-width:900px){

  .contact-grid-new{
    grid-template-columns:1fr;
    gap:45px;
  }

}


/* CELULAR */

@media(max-width:620px){

  .contact-form-card{
    padding:27px 20px;
    border-radius:20px;
  }

  .form-row{
    grid-template-columns:1fr;
    gap:0;
  }

  .direct-contact{
    padding:24px 20px;
  }

  .direct-contact-buttons{
    flex-direction:column;
    align-items:stretch;
  }

  .direct-contact-buttons .btn{
    width:100%;
  }

  .form-submit{
    width:100%;
  }

}
/* =========================================
   CONTACTO - CABECERA MÁS COMPACTA
   ========================================= */

body[data-page="contacto"] .page-hero.compact{
  padding:48px 0 34px;
}

body[data-page="contacto"] .page-hero .prose{
  max-width:900px;
}

body[data-page="contacto"] .page-hero h1{
  font-size:clamp(2.8rem,4.6vw,4.4rem);
  max-width:900px;
  margin-bottom:18px;
}

body[data-page="contacto"] .page-hero p{
  max-width:820px;
  margin-bottom:0;
}
/* Acerca el formulario a la cabecera */

body[data-page="contacto"] .contact-section{
  padding-top:36px;
}

body[data-page="contacto"] .contact-grid-new{
  align-items:start;
}

body[data-page="contacto"] .contact-form-card{
  margin-top:-18px;
}
/* =========================================================
   CONTACTO - ESTRUCTURA CORREGIDA
   ========================================================= */

body[data-page="contacto"] .contact-section{
  padding-top:48px;
}

body[data-page="contacto"] .contact-grid-new{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:55px;
  align-items:start;
}

/* Ambas tarjetas comienzan exactamente a la misma altura */

body[data-page="contacto"] .direct-contact,
body[data-page="contacto"] .contact-form-card{
  margin-top:0;
}


/* CONTACTO DIRECTO */

body[data-page="contacto"] .direct-contact{
  padding:34px;
  border-radius:26px;
  background:var(--sky);
}

body[data-page="contacto"] .direct-contact h2{
  font-size:1.65rem;
  margin-bottom:10px;
}


/* FORMULARIO */

body[data-page="contacto"] .contact-form-card{
  padding:40px;
}


/* TABLET */

@media(max-width:900px){

  body[data-page="contacto"] .contact-grid-new{
    grid-template-columns:1fr;
    gap:30px;
  }

}


/* CELULAR */

@media(max-width:620px){

  body[data-page="contacto"] .contact-section{
    padding-top:30px;
  }

  body[data-page="contacto"] .direct-contact,
  body[data-page="contacto"] .contact-form-card{
    padding:24px 20px;
  }

}