/* =============================
  styles.css — Futuro en Movimiento (tema de la plantilla)
============================= */
/* =========================================================
   🔧 VARIABLES Y BASE
   ========================================================= */
:root{
  --ink:#111827;
  --muted:#6b7280;
  --paper:#f5f7fb;
  --g1:#0b1222;
  --g2:#131a2f;
  --blue:#5b89a7;
  --blue-700:#3b6b88;
  --brown:#a98263;
  --radius:18px;
  --gap:28px;

  /* Hero */
  --media-max-h: clamp(360px, 58vh, 520px);
}

/* Reset mínimo + suavizado scrolling */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}

/* =========================================================
   🎨 FONDO, TIPOGRAFÍA Y TEXTO
   ========================================================= */
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background: linear-gradient(-45deg, #f5f7fb, #ffffff, #f5f7fb, #ffffff);
  background-size: 400% 400%;
  animation: bgMove 20s ease infinite;
  line-height:1.6;
}

/* Animación del fondo (desactivada si reduce motion) */
@keyframes bgMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

h1,h2,h3{margin:0 0 10px}
p{margin:0 0 12px}

/* Contenedor centrado con ancho fluido */
.container{width:min(1150px,92%); margin-inline:auto}

/* =========================================================
   🅰️ TÍTULOS (Jerarquía tipográfica)
   ========================================================= */
h1{
  font-family:Oswald,Inter,sans-serif;
  font-weight:700; letter-spacing:.4px;
  font-size:clamp(2rem,1.2rem + 3vw,3.4rem);
}
h2{
  font-family:Oswald,Inter,sans-serif;
  font-weight:700; letter-spacing:.2px;
  font-size:clamp(1.4rem,1rem + 1.6vw,2.2rem);
}
h3{font-weight:700; font-size:1.15rem}

/* =========================================================
   🧭 HEADER / NAVBAR
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.85));
  backdrop-filter:saturate(150%) blur(6px);
  border-bottom:1px solid #e5e7eb;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; min-height:68px;
}
.brand{
  display:flex; gap:12px; align-items:center; color:inherit; text-decoration:none;
}
.brand-text small{display:block; color:var(--muted); font-size:12px}
.logo{font-weight:700; color:#0f244c; text-decoration:none}

/* Logo circular pequeño (opcional con vídeo) */
.brand-logo{
  height:64px; width:64px; border-radius:50%; overflow:hidden; flex-shrink:0;
  box-shadow:0 2px 6px rgba(0,0,0,.2); background:#000;
}
.logo-video{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width:560px){ .brand-logo{height:52px; width:52px} }

/* Botón hamburguesa */
.hamburger{
  display:inline-flex; flex-direction:column; gap:6px;
  width:40px; height:40px; justify-content:center; align-items:center;
  background:transparent; border:0; cursor:pointer; z-index:1003;
}
.hamburger span{display:block; width:24px; height:2px; background:#1a3d7c}

/* Nav escritorio */
.nav-desktop{display:none; gap:1rem}
.nav-desktop a{
  color:#0f244c; text-decoration:none; padding:6px 10px; border-radius:8px;
  transition:background .2s, color .2s;
}
.nav-desktop a:hover{background:#e8f0ff; color:#0a2b6f}
.nav-desktop a[aria-current="page"]{background:#0f244c; color:#fff}

/* Nav móvil base (pantalla completa) */
.nav-mobile{
  position:fixed; inset:0; padding:24px;
  display:flex; flex-direction:column; gap:16px;
  background:#0f244c; z-index:1001;
}
.nav-mobile a{
  color:#fff; text-decoration:none; font-size:1.1rem;
  padding:10px; border-radius:10px; transition:background .2s;
}
.nav-mobile a:hover{background:rgba(255,255,255,.15)}
.nav-mobile a[aria-current="page"]{background:rgba(255,255,255,.25)}
[hidden]{display:none !important}
.no-scroll{overflow:hidden}

.nav a.active {
  background:#0a1635;
  color:#fff;
  border-radius:8px;
  padding:6px 12px;
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f5f7fb;
  color: #111;
  padding: 15px;
  box-shadow: 0 -2px 6px rgba(0,0,0,.15);
  font-size: 0.9rem;
  z-index: 1000;
}

.cookie-banner p {
  margin: 0 0 10px;
}

.cookie-actions {
  display: flex;
  gap: 10px;
}

/* Mostrar menú de escritorio a partir de 900px */
@media (min-width:900px){
  .hamburger{display:none}
  .nav-desktop{display:flex}
  .nav-mobile{display:none !important}
}

/* =========================================================
   🦸 HERO (Layout split, rotador, subrayado)
   ========================================================= */
/* HERO con aire simétrico arriba y abajo */
.hero {
  background:#000;
  padding-top:30px;     /* 👈 margen negro arriba */
  padding-bottom:0;  /* 👈 margen negro abajo */
  display:flex;               /* 👈 truco: centra el grid dentro */
  align-items:center;         /* 👈 centra verticalmente */
}

/* Asegura que el grid no empuje hacia fuera */
.hero-split {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:32px;
  max-width:1200px;
  margin:0 auto;
  width:100%;
  align-items:center;         /* centra las columnas entre sí */
}
/* Evita márgenes verticales extra en los hijos principales */
.hero-copy,
.hero-photo {
  margin:0;
}


.hero--dark{background:#000}

/* Split A (texto) + B (foto) */
.hero-split{
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:start;
  border-radius:24px; margin-top:16px;
}

/* Columna izquierda (caja degradada) */
.hero-copy{
  background: linear-gradient(180deg, var(--g1), var(--g2));
  color:#fff; border-radius:24px;
  padding:56px 7% 48px;
  display:flex; flex-direction:column; justify-content:center;
}

/* Rotador en escritorio */
.rotator {
  position: relative;
  min-height: 2.6em; /* ajusta a la altura de la frase más alta */
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0 0 20px;
}

/* Rotador en móvil */
@media (max-width: 600px) {
  .rotator {
    min-height: 3.2em; /* un poco más alto para evitar cortes */
  }

  .rotator-item {
    font-size: 1.6rem; /* reduce tamaño en móviles para evitar que salte de línea */
    text-align: center;
    white-space: nowrap; /* opcional: fuerza que no rompa la frase */
  }
}


.rotator-item{
  position:absolute; opacity:0; transform:translateY(8px);
  transition:opacity .5s ease, transform .5s ease;
  font-weight:600; font-size:2.2rem; text-align:center;
  background:linear-gradient(90deg,#89a7ff,#6fdcfe);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rotator-item.in{opacity:1; transform:none}

/* Subrayado animado suave (u-anim) */
.u-anim{
  background:linear-gradient(90deg,#89a7ff,#6fdcfe) bottom/0 3px no-repeat;
  color:#fff; display:inline; animation:uLine 4.5s ease-in-out infinite;
}
@keyframes uLine{
  0%{background-size:0 3px}
  50%{background-size:100% 3px}
  100%{background-size:0 3px}
}

/* Palabras del rotador */
.rotator .word,
.rotator li{
  display:block; height:1.25em; line-height:1.25em; white-space:nowrap;
}

/* ===== LAYOUT ESCRITORIO: dos columnas iguales y misma altura ===== */
.hero-split{
  display:grid;
  grid-template-columns: 1fr 1fr;   /* pon 1.2fr 1fr si quieres la foto más ancha */
  gap:32px;
  align-items:stretch;              /* mismas alturas */
}

/* ===== TEXTO Y CTA (card azul) ===== */
.hero-content{
  /* nada raro aquí para no romper el layout del centro */
  max-width:60ch;
  text-align:center;
  margin-inline:auto;
  margin-top:0;                     /* importante: sin margen superior */
}

.hero-title{ font-size:1.9rem; line-height:1.25; margin:0 0 10px; color:#fff; }
.hero-subtitle{ font-size:1rem; font-weight:500; color:#cfd6df; margin:0 0 14px; }
.hero-actions{ margin-top:20px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.hero-copy .btn{ margin:0; }

/* Card azul que debe igualar la altura de la foto */
.hero-copy{
  background: linear-gradient(180deg, var(--g1), var(--g2));
  color:#fff;
  border-radius:24px;
  padding:56px 7% 48px;
  height:100%;                      /* iguala altura con la foto */
  margin:0;
  overflow:hidden;                   /* evita colapso del primer margen (clave) */
  display:flex;
  flex-direction:column;
  justify-content:center;            /* centra el contenido vertical dentro */
}

/* ===== COLUMNA DERECHA (foto retrato) ===== */
.hero-photo{
  width:auto;
  max-width:550px;
  aspect-ratio:auto;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  position:relative;
  margin:0;
  height:100%;                       /* ocupa toda la celda, alinea arriba/abajo */
  --zoom:1.18;
}

.hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(var(--zoom));
  transform-origin:center;
  transition: transform .3s ease;
  border-radius:18px;
}

.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25));
  mix-blend-mode:multiply; pointer-events:none; border-radius:18px;
}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .hero-split{ grid-template-columns:1fr; }   /* se apila */
  .hero-photo{
    margin-top:24px;
    height:auto; max-height:none; max-width:none; aspect-ratio:auto;
  }
}

@media (max-width:560px){
  .hero-photo img{
    object-fit:contain;   /* que no corte en móvil */
    transform:none;       /* sin zoom en móvil */
  }
}


/* =========================================================
   🧱 BLOQUES SPLIT (50/50)
   ========================================================= */
.split-block{padding:72px 0; background:#fff}
.split-50{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}
.split-50.reverse{direction:rtl}
.split-50.reverse>*{direction:ltr}
.split-img{border-radius:18px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.08)}
.split-img img{display:block; width:100%; height:100%; object-fit:cover}
.kicker{font-size:clamp(1.5rem,1.2rem + 1.6vw,2.4rem); text-transform:uppercase}
.split-text p{color:#394150; max-width:48ch}

/* =========================================================
   🗂️ CARDS BAND (tres columnas)
   ========================================================= */
.cards-band{padding:0; background:#111}
.cards-3{display:grid; grid-template-columns:repeat(3,1fr)}
.band-card{padding:30px; color:#e5e7eb}
.band-card h3{margin-bottom:8px}
.band-card.dark{background:#0d0f14}
.band-card.mid{background:#2a2e38}
.band-card.light{background:#3a3f4c}

/* =========================================================
   🖼️ IMAGE BANNER (texto superpuesto)
   ========================================================= */
.image-banner{background:#fff; padding:0}
.banner-wrap{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0}
.banner-img{grid-column:1 / -1}
.banner-img img{display:block; width:100%; height:420px; object-fit:cover; filter:grayscale(.2)}
.banner-text{
  grid-column:2 / 3; 
  margin-top:-280px; 
  background:#fff; 
  padding:28px;
  border-radius:18px; 
  box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.banner-text p{color:#394150}

/* =========================================================
   ✉️ CONTACTO (banda oscura + formulario)
   ========================================================= */
.contact-band{background:#20242e; color:#e5e7eb; padding:60px 0}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.contact-info h2{color:#fff}
.contact-band a{color:#3d6fd4; text-decoration:none}
.contact-band a:hover{color:#1a3d7c}

/* Redes sociales (UL) */
.socials{display:flex; gap:14px; font-family:"Font Awesome 6 Free",system-ui,sans-serif}
.socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px; background:#111; color:#e5e7eb; text-decoration:none;
}

/* Formulario */
.form{display:grid; gap:14px}
.form label{display:flex; flex-direction:column; gap:6px; font-weight:500}
.form input,.form textarea{
  border:1px solid #3a3f4c; background:#2b2f3a; color:#e5e7eb;
  border-radius:12px; padding:12px; font:inherit;
}
.form input:focus,.form textarea:focus{outline:2px solid var(--blue); border-color:transparent}
.req{color:#aab2bf; font-size:.9rem}

/* =========================================================
   🔘 BOTONES (variantes)
   ========================================================= */
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  background:var(--blue); color:#fff; text-decoration:none; font-weight:700;
  transition:filter .2s, transform .2s;
}
.btn:hover{background:var(--blue-700)}
.btn--sm{padding:9px 14px; font-size:.95rem}
.btn--pill{border-radius:999px}

/* Enfoque accesible */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.hamburger:focus-visible{
  outline:2px solid #6fdcfe; outline-offset:2px;
}

/* =========================================================
   🪪 LOGO FULLWIDTH (franja)
   ========================================================= */
.logo-full{
  width:100%; background:#0e1a2b;
  display:flex; justify-content:center; align-items:center; padding:0;
}
.logo-full-inner{
  width:100%; height:40vw; max-height:400px;
  background:url("img/logo-BN.svg") no-repeat center; background-size:contain;
}

/* =========================================================
   ✨ EFECTOS DE APARICIÓN (audiencias/beneficios)
   ========================================================= */

/* ===== Audiencia (Adolescentes / Adultos) ===== */
.audience-card{
  background:#f8fafc;                 /* base */
  border:1px solid #e5e7eb;
  border-radius:var(--radius);
  padding:18px;
  opacity:0;
  transform:translateY(16px) scale(.98);
  transition:opacity .6s ease, transform .6s ease, box-shadow .3s ease;
  will-change:opacity, transform;
}
.audience-card.in{
  opacity:1;
  transform:none;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}

/* Ajuste de color: un azul un poco más oscuro */
.audience-card{
  background:#E6EEF7;   /* prueba #DFE9F5 si lo quieres un pelín más oscuro */
  border-color:#C7D7EC;
  box-shadow:0 10px 26px rgba(0,0,0,.07);
}

@media (prefers-reduced-motion:reduce){
  .audience-card{opacity:1; transform:none; transition:none}
}

/* Beneficios */
.benefits-box{
  position:relative; background:var(--blue); border-radius:var(--radius);
  padding:36px 28px; box-shadow:0 8px 24px rgba(0,0,0,.14); margin-top:16px; color:#fff; overflow:hidden;
}
.benefits-box::before,.benefits-box::after{
  content:""; position:absolute; top:-20%; width:280px; height:280px; border-radius:50%;
  filter:blur(18px); opacity:.25; animation:floatY 10s ease-in-out infinite;
}
.benefits-box::before{left:-120px; background:radial-gradient(closest-side,#fff,transparent 70%)}
.benefits-box::after{right:-120px; background:radial-gradient(closest-side,var(--blue-700),transparent 70%); animation-delay:-5s}
@keyframes floatY{0%{transform:translateY(-10%)}50%{transform:translateY(10%)}100%{transform:translateY(-10%)}}

.benefits-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:14px; justify-items:center; text-align:center;
}
.benefits-list li{
  color:#fff; font-size:1.08rem; padding-left:0; position:static;
  opacity:0; transform:translateY(12px);
  transition:opacity .6s ease, transform .6s ease; will-change:opacity, transform;
}
.benefits-list li.in{opacity:1; transform:none}
.benefits-list li::before{
  content:"✔"; display:inline-block; margin-right:.55rem;
  font-weight:700; font-size:1.2rem; color:var(--brown); transform:translateY(-1px);
}

/* =========================================================
   🎓 VALORES / FORMACIÓN
   ========================================================= */
.values-box{
  display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center;
  background:#e6e3e3; border-radius:18px; padding:28px; box-shadow:0 6px 16px rgba(0,0,0,.06);
  max-width:1100px; margin:0 auto;
}
.values-box h3{margin-bottom:16px; color:#111827}
.values-box ul{margin:0; padding-left:22px; color:#394150}
.values-box li{margin-bottom:10px}
.values-box img{max-width:100%; border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,.08)}

.training-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:28px; align-items:center}
.training-card{background:#cfdae6; border:1px solid #e5e7eb; border-radius:var(--radius); padding:22px; box-shadow:0 8px 22px rgba(0,0,0,.06)}
.training-list{margin:14px 0; padding-left:18px; color:#394150}
.training-list li{margin-bottom:6px}
.training-badges{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px}
.training-badges span{
  display:inline-block; padding:6px 10px; border-radius:999px; background:#e4ebf5; border:1px solid #e2e8f0; font-size:.9rem; color:#0b1222;
}
.certificate-figure{border-radius:18px; overflow:hidden; background:#f7f7f7; border:1px solid #e5e7eb; box-shadow:0 12px 26px rgba(0,0,0,.08)}
.certificate-figure img{display:block; width:100%; height:100%; max-height:380px; object-fit:cover}
.certificate-figure figcaption{padding:10px 14px; font-size:.95rem; color:#6b7280; border-top:1px solid #e5e7eb}

/* =========================================================
   🔹 DIVIDER & CIERRE
   ========================================================= */
.divider{border:0; height:1px; background:linear-gradient(90deg,transparent,#e5e7eb,transparent); margin:28px 0}
.closing{text-align:center}
.closing-quote{font-size:1.1rem; color:#111827; margin-bottom:12px}
.closing-cta .btn{font-weight:700}

/* =========================================================
   🔐 CONSENTIMIENTO RGPD
   ========================================================= */
.consent{
  display:flex; justify-content:center; align-items:center; gap:8px;
  margin:10px 0 0; font-size:.85rem; max-width:100%;
  background:transparent; padding:6px 0;
}
.contact-form .btn, .contact-form .consent{width:100%; text-align:center}
.consent label{display:inline-flex; align-items:center; gap:6px; margin:0; white-space:nowrap}
.consent a{display:inline; white-space:nowrap; text-decoration:underline; color:inherit}

.contact-form .consent{
  display:flex; justify-content:center; align-items:center; gap:8px;
  margin-top:10px; width:100%; text-align:center; font-size:.9rem;
}
.contact-form .consent label{
  display:inline-flex; flex-direction:row; align-items:center; gap:6px;
  white-space:nowrap; margin:0; padding:0;
}
.contact-form .consent a{display:inline; white-space:nowrap; text-decoration:underline}

/* Bloque redes (versión UL) */
.socials{margin-top:16px}
.social-list{display:flex; gap:16px; list-style:none; padding:0; margin:0}
.social-list li a{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:#1a1f2b; color:#fff; transition:background .3s, transform .2s;
}
.social-list li a:hover{background:#5e86a6; transform:translateY(-3px)}
.social-list svg{width:20px; height:20px; fill:currentColor}

/* Logo en la sección de contacto */
.contact-logo {
  margin-top: 48px;         /* separa del bloque superior */
  display: flex;
  justify-content: center;  /* centra horizontalmente */
}

.contact-logo img {
  max-width: 400px;   /* más grande que antes (ajusta a tu gusto: 180px, 220px…) */
  width: 100%;
  height: auto;
  opacity: 0.95;
}


/* =========================================================
   💬 BOTÓN FLOTANTE WHATSAPP + CHAT
   ========================================================= */
.wa-fab{
  position:fixed; right:20px; bottom:20px;
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:#25D366; box-shadow:0 8px 20px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center; z-index:999;
  transition:transform .2s;
}
.wa-fab:hover{transform:scale(1.08)}

.wa-box{
  position:fixed; right:20px; bottom:90px; width:320px;
  background:#0e1a2b; color:#e8eef6; border-radius:16px;
  box-shadow:0 20px 40px rgba(0,0,0,.35); overflow:hidden; display:none; z-index:1000;
}
.wa-box.is-open{display:block}
.wa-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; background:#13243b; font-weight:600;
}
.wa-close{background:transparent; border:none; color:#cfd6df; font-size:20px; cursor:pointer}
.wa-body{padding:12px 14px}
.wa-body p{margin:0 0 8px; color:#cfd6df}
.wa-body textarea{
  width:100%; background:#0b182a; color:#e8eef6;
  border:1px solid #1f3553; border-radius:10px; padding:10px; resize:vertical;
}
.wa-actions{padding:12px 14px; display:flex; justify-content:flex-end}
.wa-actions .btn{
  background:#5e86a6; color:#fff; border:0; padding:10px 14px; border-radius:999px; cursor:pointer;
}
.wa-actions .btn:hover{filter:brightness(1.1)}

/* =========================================================
   🧱 FOOTER (unificado)
   ========================================================= */

/* ===== Footer (grid, logo a la izquierda) ===== */
/* ===== FOOTER (limpio y unificado) ===== */
.site-footer{
  background:linear-gradient(90deg, var(--g1), var(--g2));
  padding:28px 16px;
  color:#fff;
  text-align:center;
}

/* Cita centrada con degradado animado */
.footer-quote{
  margin:0 0 20px;
  font-style:italic;
  font-weight:700;
  line-height:1.3;
  font-size:clamp(1.2rem, 2vw, 1.7rem); /* 👈 un poco más pequeña */
  background:linear-gradient(90deg,#6fdcfe 0%,#89a7ff 35%,#a98263 70%,#6fdcfe 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
  animation:quoteShine 12s ease-in-out infinite;
}

@keyframes quoteShine{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* Bloque inferior (copyright + enlaces) */
.footer-bottom{margin-top:10px}
.footer-copy{margin:0 0 10px}

.footer-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.footer-links a{color:#cbd5e1; text-decoration:underline}
.footer-links a:hover{color:#fff}

/* Ajuste adicional para pantallas pequeñas si quieres apretar más */
@media (max-width:600px){
  .footer-quote{font-size:clamp(1.3rem, 6vw, 2rem)}
}

/* =========================================================
   🏠 HOME / PRESENTACIÓN
   ========================================================= */
.intro-section{background:#fff; padding:64px 0}
.intro-title{
  font-family:Oswald,Inter,sans-serif;
  font-size:clamp(1.7rem,1.2rem + 2vw,2.4rem);
  color:var(--g1); margin-bottom:10px;
}
.intro-lead{font-size:1.05rem; color:#394150; margin-bottom:10px}
.intro-block p{color:#394150}
.intro-cta{margin-top:16px}

.section-kicker{
  font-family:Oswald,Inter,sans-serif;
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:14px; color:var(--g2);
}
.audience-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.audience-card h4{margin-bottom:6px; font-weight:700; color:#0b1222}
/* =========================================================
   🏠 SOBRE MI — HERO + DINAMISMO (typing)
   ========================================================= */

/* ===== HERO: bloque oscuro ===== */
.about-hero {
  margin: clamp(16px, 3vw, 32px) 0;
  background: linear-gradient(180deg, var(--g1), var(--g2));
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  color: #fff;
}

.about-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 64px);
}

/* ===== HERO TITLE con typing ===== */
.about-hero .hero-title {
  margin: 0 0 12px 0;
  font-size: clamp(2rem, 5vw, 3rem); /* tamaño adaptable */
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

/* El span typing controla la animación sin cortar el h1 */
.about-hero .typing {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid var(--blue);
  width: 0;
  animation:
    typing-desktop 4s steps(40, end) forwards,
    blink 0.7s step-end 6,
    hideCaret 0s linear 4s forwards;
}

@keyframes typing-desktop { to { width: 100%; } }
@keyframes blink { 50% { border-color: transparent; } }
@keyframes hideCaret { to { border-right-color: transparent; } }

/* Subtítulo fijo (solo visible en móvil) */
.about-hero .tagline-mobile {
  display: none;
  margin-top: 8px;
}

/* ===== VERSIÓN MÓVIL ===== */
@media (max-width: 768px) {
  .about-hero__inner { 
    padding: 28px 20px; 
  }

  .about-hero .hero-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem); /* título adaptado al ancho */
    line-height: 1.2;
    margin-bottom: 8px;
  }

  .about-hero .typing {
    border-right: 3px solid var(--blue);
    width: 0;
    animation:
      typing-mobile 3s steps(20, end) forwards,
      blink 0.7s step-end 5,
      hideCaret 0s linear 3s forwards;
  }
  @keyframes typing-mobile { to { width: 100%; } }

  /* Solo se escribe el nombre */
  .about-hero .name { display: inline; }
  .about-hero .sep,
  .about-hero .tagline-inline { display: none; }

  /* Lema fijo debajo del nombre */
  .about-hero .tagline-mobile {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-size: 1.4rem;    /* más grande que párrafo, menor que título */
    font-weight: 600;
    line-height: 1.3;
      /* centrado bajo el nombre */
  }

  /* Párrafos del bloque sobre mí */
  .about-hero .about-copy p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 12px;
    color: #fff;
  }

  /* Imagen responsive */
  .about-photo img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    display: block;
  }

  /* Grid en una sola columna en móvil */
  .about-grid {
    display: grid;
    gap: 20px;
  }
}


/* ===== ANIMACIONES GENERALES ===== */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.about-hero .about-copy p {
  color: #fff;         /* texto blanco dentro del bloque oscuro */
}

.about-hero .about-copy strong {
  color: var(--blue);  /* resaltar palabras en azul */
}

.about-hero .about-copy em {
  color: var(--brown); /* opcional: cursivas en marrón suave */
}


/* =========================================================
   🏠 SERVICIOS-DINAMISMO
   ========================================================= */

   .services-hero h1 {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeSlide 1s ease forwards;
}

@keyframes fadeSlide {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Fondo animado para la sección */
.services-section {
  padding: 80px 0;
  background: linear-gradient(-45deg, #0b1222, #131a2f, #3b6b88, #5b89a7);
  background-size: 400% 400%;
  animation: gradientFlow 20s ease infinite;
  color: #fff;
  text-align: center;
}

@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Títulos */
.services-title {
  font-family: Oswald, sans-serif;
  font-size: clamp(1.8rem, 1rem + 3vw, 2.6rem);
  margin-bottom: 10px;
}
.services-subtitle {
  color: #cfd6df;
  margin-bottom: 40px;
}

/* Grid de servicios */
.services-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Cards con animación */
.service-card {
  background: #e2e6f7;
  color: #111827;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease, box-shadow .3s ease;
}

.service-card.in {
  opacity: 1;
  transform: none;
}

.service-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 14px 28px rgba(0,0,0,.2);
}

/* =========================
   SOBRE MÍ — BLOQUES ALTERNOS
   (HTML dado: .about-split)
========================= */
.about-split{
  /* tonos tierra suaves y consistentes con la web */
  --tone-bg: #f4efe9;            /* arena claro */
  --tone-card:#fff;              /* carta */
  --tone-ink: var(--ink);
  --tone-accent: var(--brown);   /* marrón marca */
  --tone-accent-2:#8a6a53;       /* marrón + oscuro */

  padding: clamp(40px, 6vw, 80px) 0;
  background: linear-gradient(180deg, var(--paper), var(--tone-bg));
}

.about-split .split-block{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(18px, 3.5vw, 36px);
  align-items: center;
  width: min(1100px, 92vw);
  margin: clamp(18px, 3.5vw, 42px) auto;
}

/* Alternancia: img-left (foto a la izquierda), img-right (foto a la derecha) */
.about-split .img-right .split-media{ order: 2; }
.about-split .img-right .split-text{  order: 1; }

/* ============= MEDIA (figure/picture/img) ============= */
.about-split .split-media{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.10));
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 12px 28px rgba(17,24,39,.08);
}

/* Evita “huecos” verticales: fuerza aspecto y cobertura de imagen */
.about-split .split-media img{
  width: 100%;
  height: 100%;
  aspect-ratio: 16/10;           /* cambia a 4/3 o 1/1 si te encaja mejor */
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .5s ease;
}
.about-split .split-media:hover img{ transform: scale(1.02); }

/* Caption solo para lectores de pantalla (ya viene en HTML) */
.about-split .sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============= TEXTO ============= */
.about-split .split-text{
  background: linear-gradient(180deg, var(--tone-card), #faf7f3);
  border: 1px solid rgba(17,24,39,.08);
  border-left: 6px solid var(--tone-accent);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 8px 22px rgba(17,24,39,.06);
  padding: clamp(18px, 3.6vw, 28px);
  color: var(--tone-ink);
}

.about-split .split-text h2{
  margin: 0 0 10px 0;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.25;
  color: var(--tone-accent-2);
  letter-spacing: .2px;
}

.about-split .split-text p{ margin: 0 0 10px 0; color:#2b3138; }
.about-split .split-text p em{ font-style: normal; color: var(--blue); }

/* Bullets */
.about-split .bullets{
  margin: 8px 0 0 0; padding-left: 0; list-style: none;
}
.about-split .bullets li{
  position: relative;
  padding-left: 26px;
  margin: 8px 0;
}
.about-split .bullets li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--tone-accent), var(--tone-accent-2));
  box-shadow: 0 0 0 2px #fff inset;
}

/* Pills (Objetivo · Plan · Acción · Revisión) */
.about-split .pill-row{
  display:flex; flex-wrap:wrap; gap:10px; margin-top: 10px;
}
.about-split .pill{
  padding: 6px 12px; border-radius: 999px;
  font-weight: 600; font-size: .9rem; letter-spacing:.2px;
  background: rgba(169,130,99,.12); /* marrón translúcido */
  border: 1px solid rgba(169,130,99,.35);
  color: var(--tone-accent-2);
  backdrop-filter: saturate(1.2);
}

/* CTA */
.about-split .btn-cta{
  display:inline-block; margin-top: 12px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--brown); color:#fff; text-decoration:none; font-weight:700;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  transition: transform .15s ease, filter .15s ease;
}
.about-split .btn-cta:hover{ filter:brightness(.95); transform: translateY(-1px); }

/* Separador sutil entre artículos (opcional) */
.about-split .split-block + .split-block{
  border-top: 1px solid rgba(17,24,39,.06);
  padding-top: clamp(16px, 3vw, 28px);
}

/* ============= RESPONSIVE ============= */
@media (max-width: 980px){
  .about-split .split-block{
    grid-template-columns: 1fr;
  }
  /* En móvil: primero la foto para ritmo visual */
  .about-split .split-block .split-media{ order: 1 !important; }
  .about-split .split-block .split-text{  order: 2 !important; }
  .about-split .split-media img{ aspect-ratio: 16/11; }
}

@media (max-width: 560px){
  .about-split{ padding: 32px 0; }
  .about-split .split-text{ padding: 16px 14px; border-left-width:5px; }
  .about-split .split-text h2{ font-size: 1.2rem; }
}

/* =========================================================
   🔽 DESPLEGABLES
   ========================================================= */
.more-text{margin-top:12px; font-size:.95rem; color:#e5e7eb; animation:fadeIn .3s ease}
.more-panel{margin-top:10px; animation:fadeIn .25s ease}
.more-toggle,.toggle-more{margin-top:12px; cursor:pointer}
@keyframes fadeIn{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:translateY(0)}}

/* =========================================================
   📱 RESPONSIVE GLOBAL
   ========================================================= */
@media (max-width:980px){
  .about-grid{grid-template-columns:1fr}
  .about-cards{grid-template-columns:1fr 1fr}
  .values-box{grid-template-columns:1fr}
  .training-grid{grid-template-columns:1fr}
  .certificate-figure img{max-height:320px}
}
@media (max-width:860px){
  .audience-grid{grid-template-columns:1fr}
  .hero-split,.split-50,.contact-grid,.banner-wrap{grid-template-columns:1fr}
  .banner-text{margin:0; border-radius:0; box-shadow:none}
  .cards-3{grid-template-columns:1fr}
}
@media (max-width:720px){
  .footer-flex{flex-direction:column; text-align:center; gap:10px}
}
@media (max-width:560px){
  .btn{width:100%; text-align:center}
}

/* =========================================================
   🍔 NAV MÓVIL DROPDOWN BAJO LA HAMBURGUESA
   ========================================================= */
@media (max-width:899px){
  :root{--headerH:68px}
  .site-header .header-inner{position:relative}

  .site-header .header-inner > .nav-mobile{
    position:absolute !important;
    inset:auto !important; left:auto !important; right:0 !important; top:100% !important;

    width:min(92vw,340px);
    max-height:calc(100vh - var(--headerH));
    overflow-y:auto; -webkit-overflow-scrolling:touch;

    background:#fff !important;
    padding:10px 12px !important;
    border:1px solid #e8edf5 !important; border-top:none !important;
    border-radius:0 0 12px 12px !important;
    box-shadow:0 16px 30px rgba(0,0,0,.12) !important;

    display:none; flex-direction:column; gap:6px; z-index:2000;
  }
  .site-header .header-inner > .nav-mobile:not([hidden]){display:flex}
  .site-header .header-inner > .nav-mobile a{
    display:block; color:#0f244c !important;
    padding:10px 12px !important; border-radius:8px !important; text-decoration:none !important;
  }
  .site-header .header-inner > .nav-mobile a:hover{background:#f3f6ff !important}
  .site-header .header-inner > .nav-mobile a[aria-current="page"]{background:#e8f0ff !important}

  .nav-desktop{display:none !important}
  .hamburger{display:inline-flex !important}
}

/* =========================================================
   ✅ CONSENT RESPONSIVE
   ========================================================= */
@media (max-width:560px){
  .contact-form .consent{justify-content:flex-start; text-align:left}
  .contact-form .consent label{white-space:normal}
  .consent{justify-content:flex-start}
  .consent label{white-space:normal}
}

/* =========================================================
   ⏳ PRELOADER (pantalla de carga)
   ========================================================= */
.preloader{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background:#0f244c; transition:opacity .45s ease, visibility .45s ease;
}
.preloader.hidden{opacity:0; visibility:hidden}
.preloader-inner{position:relative; display:grid; place-items:center; gap:16px}
.preloader-logo{
  width:clamp(84px,14vw,140px); height:auto; display:block;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.35)); animation:pl-fadein .6s ease both;
}
.preloader-ring{
  position:absolute;
  width:calc(clamp(84px,14vw,140px) + 38px);
  height:calc(clamp(84px,14vw,140px) + 38px);
  border-radius:999px; border:3px solid rgba(255,255,255,.15);
  border-top-color:#6fdcfe; border-right-color:#89a7ff;
  animation:pl-rotate 1.1s linear infinite, pl-pulse 1.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes pl-rotate{to{transform:rotate(360deg)}}
@keyframes pl-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)} 50%{box-shadow:0 0 0 6px rgba(255,255,255,.08)}}
@keyframes pl-fadein{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .preloader-ring{animation:none}
  .preloader-logo{animation:none}
  .u-anim{animation:none}
  .benefits-box::before,.benefits-box::after{animation:none}
  body{animation:none}
}
body.preloading{overflow:hidden}

/* ===== TEST DE MOTIVACIÓN ===== */
#test-motivacion .quiz-form label{
  display:block;
  margin:14px 0;
  font-weight:600;
  color:var(--ink,#111827);
}
#test-motivacion .quiz-form select{
  display:block;
  width:100%;
  margin-top:6px;
  padding:10px 12px;
  font-size:1rem;
  line-height:1.4;
  color:var(--ink,#111827);
  background:#fff;
  border:1px solid #d1d5db;
  border-radius:12px;
  cursor:pointer;
}
#test-motivacion .quiz-form option{
  color:var(--ink,#111827);
  background:#fff;
}

/* ===== BANNER DEL TEST (fondo gris + borde azul) ===== */
.lead-banner{
  margin:42px auto;
  padding:18px 22px;
  border-radius:var(--radius,18px);
  background:#f5f7fb;
  border:2px solid var(--blue,#5b89a7);
  color:var(--ink,#111827);
  box-shadow:0 4px 16px rgba(0,0,0,.05);
}
.lead-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.lead-text h3{
  margin:0 0 4px;
  font-size:1.35rem;
  color:var(--blue-700,#3b6b88);
}
.lead-text p{ margin:0; color:var(--muted,#6b7280); }

.btn-pill{
  padding:12px 18px;
  border:0;
  border-radius:999px;
  background:var(--blue,#5b89a7);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:background .25s ease;
}
.btn-pill:hover{ background:var(--blue-700,#3b6b88); }

/* Form del test dentro del bloque */
#test-motivacion .quiz-form{
  display:grid;
  gap:14px;
  background:#fff;
  color:var(--ink,#111827);
  border-radius:14px;
  padding:18px;
}
#test-motivacion .quiz-form label{ font-weight:600; }
#test-motivacion .quiz-form select{
  width:100%;
  margin-top:6px;
  padding:10px 12px;
  font-size:1rem;
  color:var(--ink,#111827);
  background:#fff;
  border:1px solid #d1d5db;
  border-radius:12px;
}
#test-motivacion .btn-primary{
  margin-top:8px;
  padding:12px 22px;
  border:0;
  border-radius:18px;
  cursor:pointer;
  background:var(--blue,#5b89a7);
  color:#fff;
  font-weight:700;
}
#test-motivacion .resultado{
  text-align:center;
  color:var(--blue-700,#3b6b88);
  font-weight:700;
  margin:14px 0;
}
#test-motivacion .lead-downloads{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:8px;
}
#test-motivacion .pill{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  background:#fff;
  color:var(--ink,#111827);
  text-decoration:none;
  border:1px solid #e5e7eb;
}
@media (max-width:768px){
  .lead-row{ flex-direction:column; align-items:flex-start; }
  .btn-pill{ align-self:stretch; text-align:center; }
}

/* ===== RECURSOS GRATUITOS ===== */
.recursos{
  margin:60px auto;
  text-align:center;
}
.recursos h2{
  font-size:1.8rem;
  margin-bottom:8px;
  color:var(--ink,#111827);
}
.recursos .intro{
  color:var(--muted,#6b7280);
  margin-bottom:28px;
}
.recursos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:24px;
}
.recurso-card{
  background:#fff;
  border-radius:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.recurso-card img{
  width:100%;
  height:220px;       /* unifica altura */
  object-fit:contain; /* mantiene proporción sin recortar */
  background:#f8fafc; /* lienzo neutro */
  border-radius:12px;
  display:block;
  margin:0 0 14px 0;
}
.recurso-card h3{
  font-size:1.1rem;
  margin-bottom:12px;
  color:var(--ink,#111827);
}
.recurso-card .btn-primary{
  padding:10px 18px;
  border-radius:var(--radius,18px);
  background:var(--blue,#5b89a7);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  transition:background .25s ease;
}
.recurso-card .btn-primary:hover{
  background:var(--blue-700,#3b6b88);
}
@media (max-width:480px){
  .recurso-card img{ height:200px; }
}

/* ===== Test de motivación — FIX layout & styles ===== */

/* Contenedor del test en 1 columna (claro y legible) */
.lead-banner .quiz-form,
.lead-banner form#test-motivacion,
#test-motivacion .quiz-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 900px;
  margin-inline: auto;
}

/* Fallback: si el bloque usa "Columns" de Gutenberg, forzamos 1 columna */
#test-motivacion .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
#test-motivacion .wp-block-columns > .wp-block-column {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Fallback extra: si usara clases de grid genéricas, también 1 columna */
#test-motivacion .quiz-grid,
#test-motivacion .questions,
#test-motivacion [class*="grid-"],
#test-motivacion [class*="cols"] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

/* Pregunta: texto arriba, select debajo */
.lead-banner label,
#test-motivacion .quiz-form label {
  display: block;
  font-weight: 600;   /* seminegrita para la pregunta */
  margin: 0;
}

/* Selects: ancho completo, peso normal */
.lead-banner label select,
#test-motivacion .quiz-form label select,
#test-motivacion select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  font: inherit;
  font-weight: 400;                 /* normal */
  color: var(--ink, #111827);
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 12px;
}
#test-motivacion .quiz-form option,
.lead-banner .quiz-form option {
  font-weight: 400 !important;      /* normal en las opciones */
}

/* Botón “Ver resultado” con el estilo del tema */
.lead-banner .quiz-form button,
#test-motivacion .quiz-form button,
#test-motivacion .btn-primary {
  width: fit-content;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  background: var(--blue, #5b89a7);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  cursor: pointer;
  justify-self: center;             /* centrado dentro del grid */
}
.lead-banner .quiz-form button:hover,
#test-motivacion .quiz-form button:hover,
#test-motivacion .btn-primary:hover {
  background: var(--blue-700, #3b6b88);
}

/* Resultado centrado y con aire */
.lead-banner .resultado,
#test-motivacion .resultado,
.lead-banner .quiz-form .resultado,
#test-motivacion .quiz-form .resultado {
  display: block;
  text-align: center;
  max-width: 820px;
  margin: 10px auto 0;
  line-height: 1.5;
}
#test-motivacion .resultado strong,
.lead-banner .resultado strong {
  font-weight: 800;
}
.lead-banner .resultado a,
#test-motivacion .resultado a {
  text-decoration: underline;
}

/* ===== Frase de cierre: estilo limpio y sutil ===== */
.closing{ text-align:center; }

.closing .cta-text{
  max-width: 60ch;
  margin: 0 auto 14px;
  font-size: clamp(1.15rem, .8rem + 1.4vw, 1.8rem);
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink,#111827);
}

/* subrayado suave tipo marcador para “paso a paso” */
.closing .cta-text .cta-underline{
  background: linear-gradient(0deg, rgba(91,137,167,.22), rgba(91,137,167,.22)) no-repeat;
  background-size: 100% 0.22em;
  background-position: 0 90%;
  border-radius: 2px;
}

/* “Hoy puede ser tu momento” sin píldora: acento sutil */
.closing .cta-text .cta-pill{
  padding: 0;                 /* sin chip */
  background: none;           /* quita el fondo azul */
  color: var(--blue-700,#3b6b88);
  font-weight: 700;
  box-shadow: inset 0 -0.25em 0 rgba(91,137,167,.18); /* subrayado suave */
  border-radius: 3px;
}

/* un poco menos de aire antes del botón */
.closing .closing-cta{ margin-top: 10px; }


/* Foto más grande en la sección SOBRE MÍ */
.about-photo img {
  max-width: 720px;   /* ajusta el valor según quieras */
  margin: 0 auto;     /* centra la foto */
  display: block;
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}

/* En móvil: ocupa todo el ancho, sin límite */
@media (max-width: 768px) {
  .about-photo img {
    max-width: 100%;
  }
}

/* ===== Foto más grande SOLO en SOBRE MÍ ===== */
.about-hero .about-photo{
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  max-width: 640px !important;   /* ajusta 560–720px a tu gusto */
  margin-left: auto;              /* la mantiene a la derecha si el grid no está activo */
}

.about-hero .about-photo img{
  display:block;
  width:100%;
  height:auto;
  transform: scale(1.18) !important;  /* “zoom” dentro del mismo cuadro */
  transform-origin: center;
}

/* En móvil: sin zoom y ancho completo */
@media (max-width: 768px){
  .about-hero .about-photo{ max-width: 100% !important; }
  .about-hero .about-photo img{ transform: none !important; }
}


/* INDEX — Mostrar la foto completa sin recorte */
.hero-photo img {
  width: 100% !important;
  height: auto !important;         /* deja que crezca libremente */
  object-fit: contain !important;  /* encaja todo sin cortar */
  object-position: center !important;
  background: #0e1626;             /* color de fondo detrás si sobra espacio */
}

/* ===== INDEX — foto sin recorte ===== */
.hero .hero-photo{
  --zoom: 1 !important;          /* cancela el zoom global */
  max-height: none !important;
  aspect-ratio: auto !important;
}

.hero .hero-photo > img{
  transform: none !important;     /* quita el scale */
  width: 100% !important;
  height: auto !important;        /* deja crecer en altura */
  object-fit: contain !important; /* no recorta */
  object-position: center !important;
  display: block;
  background: #0e1626;            /* bandas de fondo si sobran */
}
/* === Ajuste compacto para las fotos de SOBRE MÍ === */
.about-split{ 
  max-width: 1100px;           /* límite de ancho para que nada se vea gigante */
  margin-inline: auto;
}

.split-block{
  grid-template-columns: 0.95fr 1.05fr;   /* menos ancho para la imagen */
  gap: clamp(12px, 2.5vw, 22px);
  padding: clamp(12px, 2.5vw, 22px);
}

/* Tamaño controlado de la imagen */
.split-media{
  height: clamp(200px, 26vw, 320px);  /* ↓ altura máxima en desktop */
  border-radius: 14px;
}
.split-media img{
  width: 100%; 
  height: 100%; 
  object-fit: cover;
  object-position: center;            /* prueba 'top center' si te corta la cabeza */
}

/* Móvil: aún más compactas */
@media (max-width: 920px){
  .split-media{ 
    height: clamp(180px, 45vw, 260px);
  }
}

/* === Mejora visual about-split (override) === */
.about-split{
  background: linear-gradient(180deg, #f6f3ef, #f1ece6);
}

/* Bloques: un poco menos de “caja” y más aire */
.about-split .split-block{
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 28px);
  padding: 0;                    /* sin padding interno de bloque */
}

/* Imagen: más grande, 4:3, foco a la cara; fondo limpio (sin degradado gris) */
.about-split .split-media{
  background: none;
  border: 1px solid rgba(17,24,39,.06);
  box-shadow: 0 8px 20px rgba(17,24,39,.06);
  border-radius: 16px;
  overflow: hidden;
}
.about-split .split-media img{
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center top;     /* evita cortar cabeza */
}

/* Carta de texto: look más editorial (borde lateral en marrón) */
.about-split .split-text{
  background: #fff;
  border: 1px solid rgba(17,24,39,.08);
  border-left: 5px solid var(--brown);
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  border-radius: 14px;
  padding: clamp(18px, 3vw, 26px);
}
.about-split .split-text h2{
  color: #7a5f4c;                 /* marrón más sobrio */
  margin-bottom: 8px;
}
.about-split .split-text p{
  color: #2b2f36;
  line-height: 1.65;              /* más legible */
}

/* Bullets: icono más pequeño y alineado */
.about-split .bullets li{
  margin: 6px 0;
  padding-left: 22px;
}
.about-split .bullets li::before{
  width:10px; height:10px; top:.55em;
  background: radial-gradient(circle at 35% 35%, var(--brown), #7a5f4c);
  box-shadow: none;
}

/* Pills más ligeras (no robar foco) */
.about-split .pill{
  background: rgba(169,130,99,.10);
  border-color: rgba(169,130,99,.28);
  font-weight: 600;
  font-size: .88rem;
}

/* CTA con sombra más baja */
.about-split .btn-cta{
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

/* Separador sutil entre artículos (línea arena) */
.about-split .split-block + .split-block{
  border-top: 1px solid rgba(122,95,76,.12);
  padding-top: clamp(14px, 2.4vw, 24px);
}

/* Alternancia sigue igual */
.about-split .img-right .split-media{ order:2; }
.about-split .img-right .split-text{  order:1; }

/* Responsive: foto primero en móvil, altura cómoda */
@media (max-width: 980px){
  .about-split .split-block{ grid-template-columns: 1fr; }
  .about-split .split-block .split-media{ order:1 !important; }
  .about-split .split-block .split-text{  order:2 !important; }
  .about-split .split-media img{ aspect-ratio: 4/3; }
}
@media (max-width: 560px){
  .about-split .split-text{ padding: 14px; border-left-width:4px; }
  .about-split .split-text h2{ font-size: 1.15rem; }
}
/* === Ajuste márgenes en bloques ABOUT SPLIT === */
.about-split {
  padding: clamp(24px, 4vw, 40px) 0;   /* antes 40–80px → ahora más compacto */
  background: linear-gradient(180deg, var(--paper), #eae4dd);
}

/* Bloques internos: sin padding extra, solo gap */
.about-split .split-block {
  padding: 0; 
  margin: clamp(14px, 2vw, 24px) auto; /* en lugar de 40px+ */
}

/* Separador más fino y elegante entre bloques */
.about-split .split-block + .split-block {
  border-top: 1px solid rgba(122,95,76,.15);
  padding-top: clamp(12px, 2vw, 20px);
}

/* En móvil aún más apretado */
@media (max-width: 768px){
  .about-split { padding: 20px 0; }
  .about-split .split-block { margin: 12px auto; }
}
/* === Marco unificado para SOBRE MÍ === */
.about-split{
  /* fondo marrón claro de toda la franja */
  background: #e1d9ce; /* arena claro */
  padding: clamp(28px, 4.5vw, 56px) 0;
}

/* Tarjeta grande con marco marrón oscuro */
.about-split__frame{
  width: min(1100px, 92vw);
  margin: 0 auto;
  background: #f6f3ef;                         /* interior limpio */
  border: 4px solid #7a5f4c;                /* marrón oscuro del marco */
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(17,24,39,.10);
  padding: clamp(18px, 3.2vw, 28px);        /* aire interior del marco */
}

/* Dentro del marco: compacidad y ritmo */
.about-split__frame .split-block{
  margin: clamp(12px, 2.2vw, 22px) 0;
}

/* Separador fino entre filas (opcional) */
.about-split__frame .split-block + .split-block{
  border-top: 1px solid rgba(122,95,76,.15); /* línea arena */
  padding-top: clamp(12px, 2vw, 20px);
}

/* Integra mejor las tarjetas internas con el marco */
.about-split__frame .split-text{
  border-radius: 14px;
  border-left-width: 5px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);   /* más sutil */
}
.about-split__frame .split-media{
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

/* Ajuste de las imágenes: 4:3 cómodo y foco en caras */
.about-split__frame .split-media img{
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center top;
}

/* Responsive: foto primero en móvil y aire del marco */
@media (max-width: 980px){
  .about-split__frame{ padding: 16px; }
  .about-split__frame .split-block{ margin: 10px 0; }
}
@media (max-width: 560px){
  .about-split{ padding: 22px 0; }
  .about-split__frame{ padding: 14px; border-width: 3px; }
  .about-split__frame .split-text{ padding: 14px; border-left-width: 4px; }
}

/* === Ajustes SOBRE MÍ === */

/* Mini margen con la sección siguiente */
.about-split {
  margin-bottom: clamp(24px, 4vw, 48px);
}

/* Marco: que recorte desbordes y dé aire dentro */
.about-split__frame {
  overflow: hidden;       /* recorta sombras que se salgan */
  box-sizing: border-box;
  padding: clamp(18px, 3vw, 28px); /* respiro lateral dentro del marco */
}

/* Bloques internos: respetan el marco */
.about-split__frame .split-block {
  margin: clamp(12px, 2vw, 20px) 0;
  padding: 0;
}

/* Asegura que nada sobresalga */
.about-split__frame .split-text,
.about-split__frame .split-media {
  max-width: 100%;
  box-sizing: border-box;
}
/* === Ajuste de padding interno en el marco Sobre mí === */
.about-split__frame {
  padding: clamp(24px, 4vw, 40px);   /* aire uniforme en todos los lados */
}

/* Cada bloque respeta ese padding, sin pegarse al borde */
.about-split__frame .split-block {
  margin: clamp(20px, 3vw, 32px) 0;  /* solo margen vertical entre filas */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* === Recuadros de texto en color arena === */
.about-split__frame .split-text {
  background: #f9f6f1;   /* arena claro */
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06); /* más suave que el blanco */
}
/* === Unificar márgenes de los bloques SOBRE MÍ === */
.about-split__frame .split-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 40px); /* mismo espacio entre foto y texto */
  margin: clamp(32px, 5vw, 48px) 0; /* mismo margen arriba y abajo */
}

/* Para que el texto no se despegue más que las fotos */
.about-split__frame .split-text,
.about-split__frame .split-media {
  margin: 0;
}

/* En móvil: una sola columna con el mismo gap */
@media (max-width: 768px) {
  .about-split__frame .split-block {
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 32px 0;
  }
}
/* Centrar foto en móvil dentro de about-grid */
@media (max-width: 980px) {
  .about-photo {
    margin: 0 auto;           /* centra el bloque */
    max-width: 90%;           /* que no se coma todo el ancho */
    display: flex; 
    justify-content: center;  /* centra el contenido dentro */
  }

  .about-photo img {
    max-height: 360px;        /* opcional: más pequeña en móvil */
    object-fit: cover;
  }
}
/* Asegura que el FAB y la caja están por encima de todo */
.wa-fab { z-index: 2147483647 !important; }  /* tope */
.wa-box { z-index: 2147483646 !important; }

/* === SOBRE MÍ – NORMALIZA MÁRGENES EN ESCRITORIO === */

/* 1) El marco define el aire global */
.about-split__frame{
  padding: clamp(18px, 2.5vw, 28px);
}

/* 2) Cada bloque: sin padding interno, solo separación vertical uniforme */
.about-split .split-block{
  padding: 0;                         /* quitamos el padding que hacía de “doble margen” */
  margin: 0 0 clamp(18px, 2.4vw, 26px);
  display: grid;
  grid-template-columns: 1.05fr 1fr;  /* tus columnas */
  gap: clamp(18px, 2.2vw, 32px);      /* separación entre columnas estable */
  align-items: center;
}

/* último bloque sin extra */
.about-split .split-block:last-child{ margin-bottom: 0; }

/* 3) Asegura que los hijos no añaden márgenes raros */
.about-split .split-media,
.about-split .split-text{ margin: 0; }

/* 4) Si tenías un separador entre artículos, lo desactivamos para no “descuadrar” las filas en desktop */
.about-split .split-block + .split-block{
  border-top: none;
  padding-top: 0;
}

/* 5) En móvil mantenemos tu comportamiento actual (se apilan) */
@media (max-width: 980px){
  .about-split .split-block{
    grid-template-columns: 1fr;
    margin: 0 0 18px;
  }
}

/* ==== FULL-BLEED + ALTURA DECENTE PARA LAS 3 FOTOS EN MÓVIL ==== */
@media (max-width: 640px) {
  /* Fuerza 1 columna en esas filas (por si siguen en 2) */
  .split-block,
  .feature-row,
  .cta-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--gap, 24px) !important;
  }

  /* Haz que el contenedor de la imagen rompa el padding del .container (full-bleed) */
  .split-block .media,
  .feature-row .media,
  .cta-grid .media,
  .about-hero .hero-photo,      /* por si alguna es figure */
  section figure.hero-photo {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;  /* si quieres esquinas, quita esta línea */
  }

  /* Imagen a ancho completo + altura suficiente para que no “se vea pequeña” */
  .split-block .media img,
  .feature-row .media img,
  .cta-grid .media img,
  .about-hero .hero-photo img,
  section figure.hero-photo img {
    display: block !important;
    width: 100% !important;
    height: clamp(240px, 45vw, 420px) !important; /* <- DA CUERPO A LA FOTO */
    object-fit: cover !important;
  }

  /* Por si el padre tenía un ancho fijo (flex-basis / max-width) */
  .split-block .media,
  .feature-row .media,
  .cta-grid .media {
    flex: 1 1 100% !important;
    max-width: none !important;
  }

  /* Que la imagen salga arriba del texto en móvil (opcional) */
  .split-block .media { order: -1; }
}

/* --- OPCIONAL: debug rápido para comprobar que el selector aplica
@media (max-width:640px){
  .split-block .media, .feature-row .media, .cta-grid .media { outline: 2px dashed magenta; }
}
*/