/* ==========================================================================
   MOMENTO KAIROS SRL — Seguridad Justo a Tiempo
   Arquetipo: editorial institucional · azul marino + oro · mucho aire
   ========================================================================== */

:root{
  /* --- paleta --- */
  --azul:#0A2463;
  --azul-noche:#0B1F3A;
  --azul-profundo:#071528;
  --azul-tinta:#16233D;
  --oro:#E8A838;
  --oro-suave:#F2C77A;
  --oro-tenue:rgba(232,168,56,.14);
  --blanco:#FFFFFF;
  --hueso:#F6F8FC;
  --texto:#16233D;
  --texto-suave:#5B6884;
  --linea:rgba(10,36,99,.13);
  --linea-osc:rgba(255,255,255,.14);
  --wa:#25D366;

  /* --- tipografía --- */
  --titulos:"Montserrat", "Helvetica Neue", Arial, sans-serif;
  --cuerpo:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- ritmo --- */
  --pad-seccion:clamp(4.5rem, 9vw, 9rem);
  --ancho:1240px;
  --radio:4px;
  --alto-cabecera:82px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--alto-cabecera);
}

body{
  margin:0;
  background:var(--blanco);
  color:var(--texto);
  font-family:var(--cuerpo);
  font-size:clamp(15.5px, 0.93rem + 0.2vw, 17px);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--titulos);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0;
}

.contenedor{ width:min(100% - 2.75rem, var(--ancho)); margin-inline:auto; }

/* Los hijos de las grillas deben poder encogerse: sin esto, un texto largo
   dentro de una tarjeta o de un botón ensancha la página entera. */
.nosotros > *, .inscripcion > *, .contacto__grid > *, .cardio__cuerpo > *,
.formulario > *, .fundador > *, .marco-normativo > *, .pie__grid > *{
  min-width:0;
}

.saltar{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--oro); color:var(--azul-profundo);
  padding:.7rem 1.2rem; font-weight:700;
}
.saltar:focus{ left:0; }

:focus-visible{
  outline:2px solid var(--oro);
  outline-offset:3px;
}

::selection{ background:var(--oro); color:var(--azul-profundo); }

/* ============================ barra de progreso ============================ */
.progreso{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:120;
  background:transparent; pointer-events:none;
}
.progreso__barra{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--oro), var(--oro-suave));
}

/* ============================ botones ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  font-family:var(--titulos);
  font-size:.83rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  padding:.95rem 1.6rem;
  border:1px solid transparent;
  border-radius:var(--radio);
  cursor:pointer;
  position:relative; overflow:hidden;
  transition:color .3s ease, background .3s ease, border-color .3s ease, transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.btn--grande{ padding:1.1rem 2.1rem; font-size:.86rem; }
.btn--ancho{ width:100%; }

.btn--dorado{
  background:var(--oro); color:var(--azul-profundo);
  box-shadow:0 12px 26px -14px rgba(232,168,56,.9);
}
.btn--dorado:hover{
  background:var(--oro-suave);
  transform:translateY(-2px);
  box-shadow:0 18px 34px -14px rgba(232,168,56,1);
}

.btn--linea{
  border-color:rgba(255,255,255,.4); color:var(--blanco);
  background:rgba(255,255,255,.04);
}
.btn--linea:hover{
  border-color:var(--oro); color:var(--oro);
  transform:translateY(-2px);
}

.btn--linea-azul{
  border-color:var(--linea); color:var(--azul);
  background:transparent;
}
.btn--linea-azul:hover{
  background:var(--azul); color:var(--blanco); border-color:var(--azul);
}

/* ============================ cabecera ============================ */
.cabecera{
  position:fixed; top:0; left:0; right:0; z-index:110;
  transition:background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}
.cabecera.esta-fija{
  background:rgba(7,21,40,.92);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.09), 0 18px 40px -30px rgba(0,0,0,.9);
}
.cabecera__fila{
  display:flex; align-items:center; gap:1.5rem;
  min-height:var(--alto-cabecera);
  transition:min-height .4s ease;
}
.cabecera.esta-fija .cabecera__fila{ min-height:70px; }

.logo{ display:block; flex:0 0 auto; }
.logo__img{
  width:auto; height:44px;
  transition:height .4s ease;
}
.cabecera.esta-fija .logo__img{ height:38px; }

.menu{
  margin-left:auto;
  display:flex; align-items:center; gap:1.9rem;
}
.menu > a{
  font-family:var(--titulos);
  font-size:.78rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
  text-decoration:none;
  position:relative;
  padding-block:.35rem;
  transition:color .25s ease;
}
.menu > a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--oro);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.menu > a:hover{ color:var(--blanco); }
.menu > a:hover::after{ transform:scaleX(1); }
.menu > a.esta-viendo{ color:var(--oro); }
.menu > a.esta-viendo::after{ transform:scaleX(1); }

.menu__redes{ display:flex; gap:.5rem; }
.menu__redes a{
  width:32px; height:32px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  color:rgba(255,255,255,.75);
  transition:color .25s ease, border-color .25s ease, transform .25s ease;
}
.menu__redes a:hover{ color:var(--oro); border-color:var(--oro); transform:translateY(-2px); }
.menu__redes svg, .pie__redes svg{
  width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.menu__redes svg .lleno, .pie__redes svg .lleno{ fill:currentColor; stroke:none; }

.hamburguesa{
  display:none;
  margin-left:auto;
  width:46px; height:40px;
  background:transparent; border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radio);
  cursor:pointer;
  padding:0;
  position:relative;
}
.hamburguesa span{
  position:absolute; left:12px; right:12px; height:1.6px;
  background:var(--blanco);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), opacity .25s ease;
}
.hamburguesa span:nth-child(1){ top:13px; }
.hamburguesa span:nth-child(2){ top:19px; }
.hamburguesa span:nth-child(3){ top:25px; }
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ============================ 1. HERO ============================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding-top:calc(var(--alto-cabecera) + 2rem);
  padding-bottom:5rem;
  overflow:hidden;
  color:var(--blanco);
  background:var(--azul-profundo);
}
@supports (min-height:100svh){ .hero{ min-height:100svh; } }

.hero__fondo{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(70rem 45rem at 78% 12%, rgba(10,36,99,.95), transparent 62%),
    linear-gradient(160deg, #0A2463 0%, #08203f 46%, #050f1f 100%);
}
.hero__trama{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 88px);
  mask-image:radial-gradient(70% 70% at 50% 40%, #000 35%, transparent 100%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%, #000 35%, transparent 100%);
}
.hero__halo{
  position:absolute; top:-12%; right:-6%;
  width:48rem; height:48rem;
  background:radial-gradient(circle, rgba(232,168,56,.20), transparent 62%);
  will-change:transform;
}
.hero__marca{
  position:absolute; right:-4rem; bottom:-6rem;
  width:min(44vw, 34rem); height:auto;
  opacity:.05;
  will-change:transform;
}

/* etiqueta de placeholder de fondo */
.etiqueta-ph{
  position:absolute; z-index:2;
  display:inline-flex; align-items:center; gap:.55rem;
  margin:0;
  font-family:var(--titulos);
  font-size:.66rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
  background:rgba(7,21,40,.55);
  border:1px dashed rgba(232,168,56,.5);
  border-radius:var(--radio);
  padding:.5rem .8rem;
  max-width:min(90vw, 30rem);
  line-height:1.4;
}
.etiqueta-ph--hero{ left:1.5rem; bottom:1.5rem; }
.etiqueta-ph__punto{
  width:6px; height:6px; border-radius:50%;
  background:var(--oro); flex:0 0 auto;
}

.hero__contenido{ position:relative; z-index:3; }

.hero__eyebrow{
  margin:0 0 1.6rem;
  font-family:var(--titulos);
  font-size:.74rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--oro);
  display:flex; align-items:center; gap:.9rem;
}
.hero__eyebrow::before{
  content:""; width:clamp(1.5rem,5vw,3.5rem); height:1px; background:var(--oro); flex:0 0 auto;
}

.hero__titulo{
  margin:0 0 1.9rem;
  font-size:clamp(2.7rem, 9.2vw, 7.4rem);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.035em;
  text-transform:uppercase;
  max-width:15ch;
}
.hero__titulo .palabra{ display:inline-block; }
.palabra--oro{ color:var(--oro); }

.hero__bajada{
  margin:0 0 2.6rem;
  max-width:46ch;
  font-size:clamp(1.02rem, .95rem + .45vw, 1.28rem);
  color:rgba(255,255,255,.8);
  line-height:1.62;
}

.hero__acciones{ display:flex; flex-wrap:wrap; gap:.9rem; }

.hero__scroll{
  position:absolute; left:50%; bottom:2.2rem; z-index:3;
  transform:translateX(-50%);
  width:1px; height:3.6rem;
  display:block;
}
.hero__scroll-linea{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.5));
  overflow:hidden;
}
.hero__scroll-linea::after{
  content:""; position:absolute; left:0; right:0; top:-100%;
  height:100%; background:var(--oro);
  animation:bajar 2.4s cubic-bezier(.6,.05,.3,.95) infinite;
}
@keyframes bajar{
  0%{ transform:translateY(0); } 100%{ transform:translateY(200%); }
}

/* ---------- franja de atributos ---------- */
.atributos{
  background:var(--azul);
  border-top:1px solid rgba(255,255,255,.09);
  padding:1.6rem 0;
  position:relative; z-index:4;
}
.atributos__fila{
  display:flex; flex-wrap:wrap;
  justify-content:center;
  gap:.6rem 2.2rem;
}
.atributos__fila span{
  font-family:var(--titulos);
  font-size:.72rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.86);
  display:flex; align-items:center; gap:.75rem;
}
.atributos__fila span::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--oro); flex:0 0 auto;
}

/* ============================ secciones ============================ */
.seccion{ padding:var(--pad-seccion) 0; position:relative; }
.seccion--clara{ background:var(--blanco); }
.seccion--clara + .seccion--clara{ padding-top:0; }
.seccion--oscura{
  background:var(--azul-noche);
  color:rgba(255,255,255,.84);
}
.seccion--oscura h2,.seccion--oscura h3{ color:var(--blanco); }

.titulo-bloque{ margin-bottom:clamp(2.75rem, 5vw, 4.5rem); max-width:64rem; }
.titulo-bloque--centro{ margin-inline:auto; text-align:center; }
.titulo-bloque--centro .titulo-bloque__indice{ justify-content:center; }
.titulo-bloque--centro .titulo-bloque__p{ margin-inline:auto; }

.titulo-bloque__indice{
  display:flex; align-items:center; gap:.9rem;
  margin:0 0 1.15rem;
  font-family:var(--titulos);
  font-size:.74rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--texto-suave);
}
.seccion--oscura .titulo-bloque__indice,
.cardio .titulo-bloque__indice{ color:rgba(255,255,255,.6); }
.titulo-bloque__indice span{
  font-weight:800; color:var(--oro);
  letter-spacing:.06em;
}
.titulo-bloque__indice::after{
  content:""; height:1px; flex:1 1 auto; max-width:5rem;
  background:var(--linea);
}
.seccion--oscura .titulo-bloque__indice::after,
.cardio .titulo-bloque__indice::after{ background:var(--linea-osc); }

.titulo-bloque__h{
  /* Escala ajustada para que los títulos largos con saltos de línea propios
     entren en el renglón que Abel decidió, sin que la web los reparta sola. */
  font-size:clamp(1.7rem, 0.2rem + 3.6vw, 3.1rem);
  color:var(--azul);
  max-width:26ch;
}
.titulo-bloque--centro .titulo-bloque__h{ margin-inline:auto; }
/* El mínimo del título grande también se achica en pantallas muy angostas.
   Así una palabra larga como CARDIOASISTENCIA entra entera y nunca se parte
   al medio: el corte por letra sólo aparecería si no hubiera lugar ni así. */
.titulo-bloque__h--xl{ font-size:clamp(min(1.8rem, 9.6vw - 4px), 0.35rem + 4.1vw, 4.4rem); max-width:22ch; }

.titulo-bloque__p{
  margin:1.4rem 0 0;
  max-width:56ch;
  font-size:clamp(1rem, .95rem + .25vw, 1.14rem);
  color:var(--texto-suave);
}
.seccion--oscura .titulo-bloque__p,
.cardio .titulo-bloque__p{ color:rgba(255,255,255,.72); }
.seccion--oscura strong,.cardio strong{ color:var(--blanco); }

/* ============================ placeholders de imagen ============================ */
.ph{
  margin:0;
  position:relative;
  border:1.5px dashed rgba(10,36,99,.32);
  border-radius:var(--radio);
  background:
    linear-gradient(135deg, rgba(10,36,99,.05), rgba(232,168,56,.05)),
    repeating-linear-gradient(45deg, rgba(10,36,99,.028) 0 10px, transparent 10px 20px);
  overflow:hidden;
}
.ph--oscura, .seccion--oscura .ph, .cardio .ph{
  border-color:rgba(232,168,56,.42);
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(232,168,56,.06)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px);
}
.ph__interior{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.55rem; padding:1.25rem; text-align:center;
}
.ph__icono{
  width:34px; height:34px; flex:0 0 auto;
  fill:none; stroke:var(--azul); stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.5;
}
.ph--oscura .ph__icono, .seccion--oscura .ph__icono, .cardio .ph__icono{ stroke:var(--oro); opacity:.75; }
.ph__nombre{
  margin:0;
  font-family:var(--titulos);
  font-size:.8rem; font-weight:700;
  color:var(--azul);
  line-height:1.35;
}
.ph--oscura .ph__nombre, .seccion--oscura .ph__nombre, .cardio .ph__nombre{ color:var(--blanco); }
.ph__medida{
  margin:0;
  font-family:var(--titulos);
  font-size:.64rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--texto-suave);
}
.ph--oscura .ph__medida, .seccion--oscura .ph__medida, .cardio .ph__medida{ color:rgba(255,255,255,.6); }

.ph--16x9{ aspect-ratio:16/9; }
.ph--4x3{ aspect-ratio:4/3; }
.ph--3x4{ aspect-ratio:3/4; }
.ph--1x1{ aspect-ratio:1/1; }
.ph--logo{ aspect-ratio:200/80; width:88px; flex:0 0 auto; }
.ph--logo .ph__medida{ font-size:.55rem; letter-spacing:.06em; }

/* ============================ 2. NOSOTROS ============================ */
.nosotros{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:1fr;
  align-items:start;
}

.parrafo-guia{
  margin:0 0 2.2rem;
  font-size:clamp(1.06rem, 1rem + .4vw, 1.28rem);
  line-height:1.72;
  color:var(--texto);
}

.cita{
  margin:0 0 2.2rem;
  padding:1.6rem 0 1.6rem 1.9rem;
  border-left:2px solid var(--oro);
}
.cita p{
  margin:0;
  font-family:var(--titulos);
  font-size:clamp(1.1rem, 1rem + .6vw, 1.5rem);
  font-weight:500;
  line-height:1.45;
  letter-spacing:-.015em;
  color:var(--azul);
}
.cita strong{ font-weight:700; color:var(--azul); }
.seccion--oscura .cita p{ color:var(--blanco); }

.lista-marcas{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.lista-marcas li{
  font-family:var(--titulos);
  font-size:.7rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--azul);
  border:1px solid var(--linea);
  border-radius:999px;
  padding:.45rem 1rem;
}

/* ---------- cifras ---------- */
.cifras{
  margin-top:clamp(3rem,6vw,5rem);
  display:grid; gap:1px;
  grid-template-columns:1fr;
  background:var(--linea);
  border:1px solid var(--linea);
}
.cifra{
  background:var(--blanco);
  padding:2rem 1.6rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.cifra__n{
  font-family:var(--titulos);
  font-size:clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem);
  font-weight:800; line-height:1;
  letter-spacing:-.04em;
  color:var(--azul);
}
.cifra__n span{ color:var(--azul); }
.cifra__t{
  font-size:.88rem; color:var(--texto-suave);
  line-height:1.5;
  max-width:26ch;
}

/* ============================ conducción ============================ */
.conduccion{ background:var(--azul-noche); }

.fundadores{
  display:grid; gap:clamp(1.5rem,3vw,2.25rem);
  grid-template-columns:1fr;
}
.fundador{
  display:grid; gap:1.5rem;
  /* minmax(0,1fr) y no 1fr: con `1fr` la columna toma como mínimo el ancho
     fijo de la placa cromada y, en pantallas muy angostas, empuja la página. */
  grid-template-columns:minmax(0,1fr);
  padding:clamp(1.5rem,3vw,2.2rem);
  border:1px solid var(--linea-osc);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  transition:border-color .35s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.fundador:hover{ border-color:rgba(232,168,56,.45); transform:translateY(-4px); }
.fundador .ph--retrato,
.fundador .retrato{ max-width:220px; }

/* ---------- retratos de la conducción ---------- */
.retrato{
  margin:0;
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  border:1px solid var(--linea-osc);
  border-radius:var(--radio);
  background:
    radial-gradient(115% 85% at 50% 6%, rgba(232,168,56,.20), transparent 62%),
    linear-gradient(180deg, #17305C 0%, #0A2463 60%, #081D4A 100%);
}
.retrato::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, var(--oro), rgba(232,168,56,0));
}
.retrato img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:bottom center;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.fundador:hover .retrato img{ transform:scale(1.04); }

.fundador__datos h3{
  font-size:clamp(1.2rem,1.05rem + .6vw,1.55rem);
  margin-bottom:.35rem;
}
.fundador__rol{
  margin:0 0 .8rem;
  font-family:var(--titulos);
  font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--oro);
}
.fundador__mat{
  margin:0 0 1.1rem;
  padding-bottom:1.1rem;
  border-bottom:1px solid var(--linea-osc);
  font-size:.9rem;
  color:rgba(255,255,255,.72);
}
.fundador__lista{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.5rem;
}
.fundador__lista li{
  position:relative; padding-left:1.15rem;
  font-size:.93rem;
  color:rgba(255,255,255,.78);
}
.fundador__lista li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%;
  background:var(--oro);
}

/* ---------- doble mirada ---------- */
.doble{
  margin-top:clamp(3rem,6vw,4.5rem);
  display:grid; gap:1.5rem;
  grid-template-columns:1fr;
  align-items:center;
  border-top:1px solid var(--linea-osc);
  border-bottom:1px solid var(--linea-osc);
  padding:clamp(2rem,4vw,3rem) 0;
}
.doble__lado{ text-align:center; }
.doble__label{
  margin:0 0 .5rem;
  font-family:var(--titulos);
  font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);
  font-weight:700;
  color:var(--blanco);
  letter-spacing:-.01em;
}
.doble__txt{ margin:0; font-size:.93rem; color:rgba(255,255,255,.7); }
.doble__nexo{ display:grid; place-items:center; }
.doble__nexo span{
  width:14px; height:14px;
  background:var(--oro);
  transform:rotate(45deg);
  display:block;
  box-shadow:0 0 0 8px var(--oro-tenue);
}
.doble__cierre{
  margin:clamp(2rem,4vw,2.75rem) auto 0;
  max-width:62ch; text-align:center;
  font-size:clamp(1rem,.95rem + .3vw,1.16rem);
  color:rgba(255,255,255,.82);
}

/* ============================ 3. SERVICIOS ============================ */
.servicios{
  display:grid; gap:1px;
  grid-template-columns:1fr;
  background:var(--linea);
  border:1px solid var(--linea);
}
.servicio{
  background:var(--blanco);
  padding:clamp(1.75rem,3vw,2.5rem);
  position:relative;
  transition:background .35s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.servicio:hover{ background:var(--hueso); }
.servicio__icono{
  width:52px; height:52px; margin-bottom:1.4rem;
  display:grid; place-items:center;
  border:1px solid var(--linea);
  border-radius:var(--radio);
  color:var(--azul);
  transition:color .35s ease, border-color .35s ease, background .35s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.servicio__icono svg{
  width:24px; height:24px; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.servicio:hover .servicio__icono{
  background:var(--azul); color:var(--oro); border-color:var(--azul);
  transform:translateY(-3px);
}
.servicio h3{
  font-size:clamp(1.06rem,1rem + .35vw,1.25rem);
  color:var(--azul);
  margin-bottom:.7rem;
  max-width:22ch;
}
.servicio p{ margin:0; font-size:.95rem; color:var(--texto-suave); }
.servicio__linea{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--oro);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.servicio:hover .servicio__linea{ transform:scaleX(1); }

/* ============================ 4. CARDIOPROTECCIÓN ============================ */
.cardio{
  position:relative;
  padding:calc(var(--pad-seccion) + 1rem) 0;
  background:linear-gradient(165deg, #0A2463 0%, #071528 58%, #050e1c 100%);
  color:rgba(255,255,255,.84);
  overflow:hidden;
}
.cardio__fondo{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(48rem 34rem at 88% 8%, rgba(232,168,56,.16), transparent 60%),
    radial-gradient(40rem 30rem at 8% 92%, rgba(232,168,56,.09), transparent 62%);
}
.cardio__pulso{
  position:absolute; left:50%; top:50%;
  width:min(120vw, 90rem); height:1px;
  transform:translate(-50%,-50%);
  background:
    linear-gradient(90deg, transparent, rgba(232,168,56,.28) 18%, rgba(232,168,56,.28) 82%, transparent);
  opacity:.5;
}
.cardio__pulso::after{
  content:""; position:absolute; top:-4px; left:0;
  width:9px; height:9px; border-radius:50%;
  background:var(--oro);
  box-shadow:0 0 18px 5px rgba(232,168,56,.65);
  animation:recorrer 6.5s linear infinite;
}
@keyframes recorrer{
  0%{ left:8%; opacity:0; } 8%{ opacity:1; }
  92%{ opacity:1; } 100%{ left:92%; opacity:0; }
}
.cardio .contenedor{ position:relative; z-index:2; }
.cardio__cabecera .titulo-bloque__h{ color:var(--blanco); }

.cardio__cuerpo{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:1fr;
  align-items:start;
}

.cardio__pilares{ display:grid; gap:1.5rem; }
.pilar{
  position:relative;
  padding:1.5rem 0 1.5rem 4.2rem;
  border-bottom:1px solid var(--linea-osc);
  transition:padding-left .4s cubic-bezier(.22,.61,.36,1);
}
.pilar:last-child{ border-bottom:0; }
.pilar:hover{ padding-left:4.7rem; }
.pilar__n{
  position:absolute; left:0; top:1.55rem;
  font-family:var(--titulos);
  font-size:1.5rem; font-weight:800;
  color:transparent;
  -webkit-text-stroke:1px rgba(232,168,56,.75);
  letter-spacing:-.02em;
}
.pilar h3{
  font-size:clamp(1.08rem,1rem + .4vw,1.3rem);
  margin-bottom:.5rem;
}
.pilar p{ margin:0; font-size:.95rem; color:rgba(255,255,255,.72); }

.cardio__lateral{ display:grid; gap:1.5rem; }

.cardio__marcas{
  border:1px solid var(--linea-osc);
  padding:1.4rem 1.5rem;
}
.cardio__marcas-t{
  margin:0 0 .9rem;
  font-family:var(--titulos);
  font-size:.68rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--oro);
}
.cardio__marcas ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem .5rem;
}
.cardio__marcas li{
  font-family:var(--titulos);
  font-size:.78rem; font-weight:600;
  letter-spacing:.04em;
  color:var(--blanco);
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  padding:.35rem .85rem;
}

.cardio__dato{
  border-left:2px solid var(--oro);
  padding-left:1.4rem;
}
.cardio__dato-n{
  margin:0 0 .5rem;
  font-family:var(--titulos);
  font-size:1.1rem; font-weight:700;
  color:var(--oro);
  letter-spacing:-.01em;
}
.cardio__dato-t{ margin:0; font-size:.93rem; color:rgba(255,255,255,.75); }

/* ============================ 5. EQUIPAMIENTO ============================ */
.filtros{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:2.5rem;
}
.filtro{
  font-family:var(--titulos);
  font-size:.72rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--texto-suave);
  background:transparent;
  border:1px solid var(--linea);
  border-radius:999px;
  padding:.55rem 1.1rem;
  cursor:pointer;
  transition:color .25s ease, background .25s ease, border-color .25s ease;
}
.filtro:hover{ color:var(--azul); border-color:var(--azul); }
.filtro.esta-activo{ background:var(--azul); border-color:var(--azul); color:var(--blanco); }

.productos{
  display:grid; gap:1.5rem;
  grid-template-columns:1fr;
}
.producto{
  display:flex; flex-direction:column;
  border:1px solid var(--linea);
  padding:1.1rem;
  transition:border-color .35s ease, transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.producto:hover{
  border-color:rgba(10,36,99,.35);
  transform:translateY(-5px);
  box-shadow:0 24px 50px -34px rgba(10,36,99,.55);
}
.producto .ph--producto{ margin-bottom:1.1rem; }
.producto h3{
  font-size:1rem; color:var(--azul);
  margin-bottom:.5rem;
}
.producto p{
  margin:0 0 1.2rem;
  font-size:.88rem; color:var(--texto-suave);
  flex:1 1 auto;
}
.producto.esta-oculto{ display:none; }
.btn--consultar{ width:100%; padding:.8rem 1rem; font-size:.75rem; }

.productos__nota{
  margin:2.5rem 0 0;
  font-size:.95rem; color:var(--texto-suave);
}
.productos__nota a{ color:var(--azul); font-weight:600; text-decoration:none; border-bottom:1px solid var(--oro); }
.productos__nota a:hover{ color:var(--oro); }

/* ============================ 6. CAPACITACIONES ============================ */
.cursos{
  display:grid; gap:1.25rem;
  grid-template-columns:1fr;
}
.curso{
  display:flex; flex-direction:column;
  padding:1.6rem;
  border:1px solid var(--linea-osc);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
  transition:border-color .35s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.curso:hover{ border-color:rgba(232,168,56,.5); transform:translateY(-4px); }
.curso h3{ font-size:1.06rem; margin-bottom:.6rem; max-width:24ch; }
.curso p{ margin:0 0 1rem; font-size:.92rem; color:rgba(255,255,255,.72); flex:1 1 auto; }
.curso__meta{
  margin:0 0 1.1rem !important;
  font-family:var(--titulos);
  font-size:.67rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--oro) !important;
  flex:0 0 auto !important;
}
.curso__cta{
  align-self:flex-start;
  background:transparent; border:0;
  padding:0; cursor:pointer;
  font-family:var(--titulos);
  font-size:.76rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--blanco);
  position:relative;
  padding-bottom:.3rem;
}
.curso__cta::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--oro);
  transform-origin:left;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.curso__cta:hover{ color:var(--oro); }
.curso__cta:hover::after{ transform:scaleX(.4); }

.marco-normativo{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  display:grid; gap:2rem;
  grid-template-columns:1fr;
  padding:clamp(1.75rem,3vw,2.5rem);
  border:1px solid var(--linea-osc);
  background:rgba(232,168,56,.05);
}
.marco-normativo p{ margin:0; font-size:.94rem; color:rgba(255,255,255,.76); }
.marco-normativo__t{
  font-family:var(--titulos);
  font-size:.7rem !important; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--oro) !important;
  margin-bottom:.7rem !important;
}

/* ---------- formulario de inscripción ---------- */
.inscripcion{
  margin-top:clamp(3rem,6vw,5rem);
  display:grid; gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1fr;
  align-items:start;
}
.inscripcion__intro h3{
  font-size:clamp(1.4rem,1.15rem + 1vw,2rem);
  margin-bottom:.9rem;
}
.inscripcion__intro > p{
  margin:0 0 1.75rem;
  color:rgba(255,255,255,.76);
}

/* ============================ formularios ============================ */
.formulario{
  display:grid; gap:1.1rem;
  grid-template-columns:1fr;
  padding:clamp(1.5rem,3vw,2.25rem);
  border:1px solid var(--linea-osc);
  background:rgba(255,255,255,.035);
}
.campo{ display:flex; flex-direction:column; gap:.45rem; }
.campo label{
  font-family:var(--titulos);
  font-size:.7rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  color:rgba(255,255,255,.8);
}
.campo label span[aria-hidden]{ color:var(--oro); }
.opcional{
  font-weight:500; letter-spacing:.04em; text-transform:none;
  color:rgba(255,255,255,.5);
}
.campo input, .campo select, .campo textarea{
  font-family:var(--cuerpo);
  font-size:.97rem;
  color:var(--blanco);
  background:rgba(255,255,255,.06);
  border:1px solid var(--linea-osc);
  border-radius:var(--radio);
  padding:.8rem .95rem;
  width:100%;
  transition:border-color .25s ease, background .25s ease;
  -webkit-appearance:none; appearance:none;
}
.campo select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E8A838' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .95rem center;
  background-size:11px;
  padding-right:2.4rem;
}
.campo select option{ color:#16233D; background:#fff; }
.campo textarea{ resize:vertical; min-height:5.5rem; }
.campo input::placeholder, .campo textarea::placeholder{ color:rgba(255,255,255,.38); }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  border-color:var(--oro);
  background:rgba(255,255,255,.09);
  outline:none;
}
.campo.tiene-error input, .campo.tiene-error select, .campo.tiene-error textarea{
  border-color:#FF8B7B;
}

.formulario__error{
  margin:0;
  font-size:.88rem; font-weight:600;
  color:#FFB3A7;
  border-left:2px solid #FF8B7B;
  padding-left:.8rem;
}
.formulario__acciones{
  display:flex; flex-wrap:wrap; gap:.8rem;
  margin-top:.4rem;
}
.formulario__nota{
  margin:0;
  font-size:.8rem;
  color:rgba(255,255,255,.55);
}

/* ============================ 7. TESTIMONIOS ============================ */
.carrusel{ position:relative; overflow:hidden; padding-bottom:2px; }
.carrusel__pista{
  display:flex;
  gap:1.5rem;
  transition:transform .65s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.testimonio{
  flex:0 0 100%;
  display:flex; flex-direction:column;
  padding:clamp(1.75rem,3vw,2.5rem);
  border:1px solid var(--linea);
  background:var(--hueso);
  position:relative;
}
.testimonio::before{
  content:"”";
  position:absolute; top:.25rem; right:1.5rem;
  font-family:var(--titulos);
  font-size:6rem; font-weight:800; line-height:1;
  color:var(--oro); opacity:.22;
}
.testimonio__txt{
  margin:0 0 1.9rem;
  font-family:var(--titulos);
  font-size:clamp(1.02rem,.95rem + .5vw,1.3rem);
  font-weight:500; line-height:1.55;
  letter-spacing:-.012em;
  color:var(--azul);
  flex:1 1 auto;
  position:relative; z-index:1;
}
.testimonio__pie{
  display:flex; align-items:center; gap:1rem;
  padding-top:1.25rem;
  border-top:1px solid var(--linea);
}
.testimonio__quien{
  margin:0;
  font-family:var(--titulos);
  font-size:.92rem; font-weight:700;
  color:var(--azul);
}
.testimonio__rol{
  margin:0;
  font-size:.82rem; color:var(--texto-suave);
}

.carrusel__controles{
  display:flex; align-items:center; justify-content:center; gap:1.25rem;
  margin-top:2rem;
}
.carrusel__flecha{
  width:46px; height:46px; flex:0 0 auto;
  display:grid; place-items:center;
  background:transparent;
  border:1px solid var(--linea);
  border-radius:50%;
  color:var(--azul);
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.carrusel__flecha svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.carrusel__flecha:hover{ background:var(--azul); color:var(--oro); border-color:var(--azul); }

.carrusel__puntos{ display:flex; gap:.5rem; }
.carrusel__puntos button{
  width:9px; height:9px; padding:0;
  border:1px solid var(--azul);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.carrusel__puntos button[aria-selected="true"]{
  background:var(--oro); border-color:var(--oro);
  transform:scale(1.35);
}

/* ============================ 8. CONTACTO ============================ */
.contacto__grid{
  display:grid; gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1fr;
  align-items:start;
}
.datos-inst{
  border:1px solid var(--linea-osc);
  padding:clamp(1.5rem,3vw,2.25rem);
  background:rgba(255,255,255,.03);
}
.datos-inst__logo{ width:auto; height:46px; margin-bottom:1.75rem; }
.datos-inst__lista{
  list-style:none; margin:0 0 1.75rem; padding:0;
  display:grid; gap:1rem;
}
.datos-inst__lista li{
  display:flex; flex-direction:column; gap:.2rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--linea-osc);
  font-size:.95rem;
  color:var(--blanco);
}
.datos-inst__lista li:last-child{ border-bottom:0; padding-bottom:0; }
.datos-inst__lista a{ text-decoration:none; border-bottom:1px solid rgba(232,168,56,.5); }
.datos-inst__lista a:hover{ color:var(--oro); }
.datos-inst__et{
  font-family:var(--titulos);
  font-size:.64rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--oro);
}

.btn-wa{
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  padding:1rem 1.4rem;
  background:var(--wa); color:#04321a;
  font-family:var(--titulos);
  font-size:.8rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  text-decoration:none;
  border-radius:var(--radio);
  transition:transform .25s ease, box-shadow .3s ease, filter .25s ease;
}
.btn-wa svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.btn-wa svg .lleno{ fill:currentColor; stroke:none; }
.btn-wa:hover{ transform:translateY(-2px); filter:brightness(1.07); box-shadow:0 16px 30px -16px rgba(37,211,102,.9); }

/* ============================ pie ============================ */
.pie{
  background:var(--azul-profundo);
  color:rgba(255,255,255,.72);
  padding:clamp(3rem,6vw,4.5rem) 0 0;
  border-top:1px solid rgba(232,168,56,.28);
}
.pie__grid{
  display:grid; gap:2.5rem;
  grid-template-columns:1fr;
  padding-bottom:clamp(2.5rem,5vw,3.5rem);
}
.pie__marca img{ width:auto; height:52px; margin-bottom:1.25rem; }
.pie__slogan{
  margin:0 0 .9rem;
  font-family:var(--titulos);
  font-size:.78rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--oro);
}
.pie__desc{ margin:0; font-size:.9rem; max-width:34ch; }

.pie__t{
  margin:0 0 1rem;
  font-family:var(--titulos);
  font-size:.7rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--blanco);
}
.pie__t--sep{ margin-top:1.75rem; }
.pie__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.pie__col li{ font-size:.92rem; }
.pie__col a{ text-decoration:none; transition:color .25s ease; }
.pie__col a:hover{ color:var(--oro); }

.pie__redes{ display:flex; gap:.6rem; }
.pie__redes a{
  width:36px; height:36px;
  display:grid; place-items:center;
  border:1px solid var(--linea-osc);
  border-radius:50%;
  color:rgba(255,255,255,.75);
  transition:color .25s ease, border-color .25s ease, transform .25s ease;
}
.pie__redes a:hover{ color:var(--oro); border-color:var(--oro); transform:translateY(-2px); }

.pie__legal{
  border-top:1px solid rgba(255,255,255,.09);
  padding:1.5rem 0;
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  justify-content:space-between;
}
.pie__legal p{ margin:0; font-size:.82rem; color:rgba(255,255,255,.55); }

/* ============================ whatsapp flotante ============================ */
.wa-flotante{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:115;
  display:flex; align-items:center; gap:.6rem;
  padding:.85rem 1.1rem;
  background:var(--wa); color:#04321a;
  border-radius:999px;
  text-decoration:none;
  font-family:var(--titulos);
  font-size:.8rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 16px 34px -14px rgba(0,0,0,.6);
  transition:transform .25s cubic-bezier(.22,.61,.36,1), filter .25s ease;
}
.wa-flotante:hover{ transform:translateY(-3px) scale(1.03); filter:brightness(1.07); }
.wa-flotante svg{
  width:26px; height:26px; flex:0 0 auto;
  fill:currentColor; stroke:none;
}
.wa-flotante__auricular{ fill:var(--wa); }
.wa-flotante__aro{
  position:absolute; inset:0; border-radius:999px;
  border:2px solid var(--wa);
  animation:latir 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes latir{
  0%{ transform:scale(1); opacity:.7; }
  70%{ transform:scale(1.18); opacity:0; }
  100%{ transform:scale(1.18); opacity:0; }
}

/* ============================ revelado ============================ */
.js .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.js .reveal.visible{ opacity:1; transform:none; }

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

/* --- tablet --- */
@media (min-width:640px){
  .cifras{ grid-template-columns:repeat(2,1fr); }
  .productos{ grid-template-columns:repeat(2,1fr); }
  .cursos{ grid-template-columns:repeat(2,1fr); }
  .formulario{ grid-template-columns:repeat(2,1fr); }
  .campo{ grid-column:1 / -1; }
  .campo--mitad{ grid-column:auto; }
  .formulario__error,.formulario__acciones,.formulario__nota{ grid-column:1 / -1; }
  .fundador .ph--retrato,
  .fundador .retrato{ max-width:none; }
  .marco-normativo{ grid-template-columns:repeat(2,1fr); }
  .pie__grid{ grid-template-columns:1fr 1fr; }
  .ph--logo{ width:104px; }
}

/* --- desktop chico --- */
@media (min-width:900px){
  .nosotros{ grid-template-columns:1.35fr .65fr; }
  .servicios{ grid-template-columns:repeat(2,1fr); }
  .cifras{ grid-template-columns:repeat(4,1fr); }
  .fundador .ph--retrato,
  .fundador .retrato{ max-width:none; }
  .doble{ grid-template-columns:1fr auto 1fr; gap:2.5rem; }
  .cardio__cuerpo{ grid-template-columns:1.1fr .9fr; }
  .productos{ grid-template-columns:repeat(3,1fr); }
  .cursos{ grid-template-columns:repeat(3,1fr); }
  .inscripcion{ grid-template-columns:.9fr 1.1fr; }
  .contacto__grid{ grid-template-columns:1.15fr .85fr; }
  .pie__grid{ grid-template-columns:1.6fr 1fr 1.2fr; }
  .testimonio{ flex:0 0 calc((100% - 1.5rem) / 2); }
}

/* --- desktop grande --- */
@media (min-width:1150px){
  .servicios{ grid-template-columns:repeat(3,1fr); }
  .productos{ grid-template-columns:repeat(4,1fr); }
  .testimonio{ flex:0 0 calc((100% - 3rem) / 3); }
}

/* --- en escritorio la cabecera lleva solo navegación y botón ---
   Las redes viven en el pie y en el menú desplegable del teléfono: en la
   barra superior no entran sin apretujar los enlaces. --- */
@media (min-width:1150px){
  .menu__redes{ display:none; }
}
@media (max-width:1399px) and (min-width:1150px){
  .menu{ gap:1.35rem; }
  .menu > a{ font-size:.74rem; letter-spacing:.04em; }
  .menu__cta{ padding:.8rem 1.1rem; font-size:.74rem; }
}

/* --- menú móvil --- */
@media (max-width:1149px){
  .hamburguesa{ display:block; }
  .menu{
    position:fixed; inset:0;
    margin:0;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1.35rem;
    padding:6rem 2rem 3rem;
    background:rgba(7,21,40,.985);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    overflow-y:auto;
    opacity:0; visibility:hidden;
    transform:translateY(-1.5rem);
    transition:opacity .35s ease, transform .4s cubic-bezier(.22,.61,.36,1), visibility .35s;
  }
  .menu.esta-abierto{ opacity:1; visibility:visible; transform:none; }
  .menu > a{
    font-size:1.28rem; letter-spacing:.02em; text-transform:none;
    font-weight:600;
  }
  .menu__redes{ margin-top:.75rem; }
  .menu__cta{ width:100%; margin-top:.5rem; }
}

/* --- móvil --- */
@media (max-width:639px){
  :root{ --alto-cabecera:70px; }
  .logo__img{ height:38px; }
  .cabecera.esta-fija .logo__img{ height:34px; }

  .atributos{ padding:1.25rem 0; }
  .atributos__fila{ justify-content:flex-start; gap:.55rem 1.35rem; }
  .atributos__fila span{ font-size:.66rem; letter-spacing:.09em; }

  .hero{ padding-bottom:6.5rem; }
  .etiqueta-ph--hero{ left:1rem; right:1rem; bottom:4.6rem; font-size:.6rem; }
  .hero__scroll{ display:none; }

  /* Los cortes de línea de los títulos se respetan también en el celular.
     Antes se ocultaban con display:none y eso pegaba las palabras de los
     dos renglones ("Integral" + "de" = "Integralde"). El tamaño del título
     ahora se achica solo, así que el corte entra sin desbordar. */

  .cita{ padding-left:1.25rem; }
  .pilar{ padding-left:3.4rem; }
  .pilar:hover{ padding-left:3.4rem; }

  .wa-flotante{ right:.85rem; bottom:.85rem; padding:.8rem .9rem; }
  .wa-flotante__texto{ display:none; }

  .carrusel__controles{ gap:.9rem; }
  .testimonio::before{ font-size:4.5rem; right:1rem; }

  /* En pantallas chicas los botones largos parten el texto en vez de
     ensanchar la página. */
  .btn{ white-space:normal; text-align:center; }
  .formulario__acciones{ flex-direction:column; align-items:stretch; }
  .formulario__acciones .btn{ width:100%; }

  .pie__legal{ justify-content:flex-start; }
}

/* --- pantallas muy angostas --- */
@media (max-width:359px){
  .hero__titulo{ font-size:2.35rem; }
  .btn{ padding:.85rem 1.15rem; font-size:.76rem; }
  .btn--grande{ padding:.95rem 1.25rem; font-size:.78rem; }
  .hero__acciones{ flex-direction:column; align-items:stretch; }
  .hero__acciones .btn{ width:100%; }
}

/* ============================ movimiento reducido ============================
   Solo se apaga lo intrusivo: recorridos automáticos, parallax y latidos.
   Los desvanecidos, los hover y las transiciones se mantienen: si los apagáramos
   la web quedaría muerta en los equipos que traen esta opción activada de fábrica.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero__scroll-linea::after,
  .cardio__pulso::after,
  .wa-flotante__aro{ animation:none; }
  .wa-flotante__aro{ opacity:0; }
  .hero__halo,.hero__marca{ transform:none !important; }
  .carrusel__pista{ transition-duration:.25s; }
}

/* ============================ impresión ============================ */
@media print{
  .cabecera,.wa-flotante,.progreso,.hero__scroll,.filtros,.carrusel__controles{ display:none !important; }
  body{ background:#fff; color:#000; }
  .seccion--oscura,.cardio,.hero,.pie{ background:#fff !important; color:#000 !important; }
  .js .reveal{ opacity:1 !important; transform:none !important; }
}

/* ==========================================================================
   IMÁGENES REALES — marco común para las fotos de la web
   Mismo lenguaje que los retratos de la conducción: filete dorado abajo,
   leve acercamiento al pasar el mouse y encuadre fijo para que la grilla
   no se mueva mientras la foto carga.
   ========================================================================== */
.figura{
  margin:0;
  position:relative;
  overflow:hidden;
  border:1px solid var(--linea);
  border-radius:var(--radio);
  background:linear-gradient(180deg, #12294f, #0A2463);
}
.seccion--oscura .figura,
.cardio .figura{ border-color:var(--linea-osc); }

.figura::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, var(--oro), rgba(232,168,56,0));
  z-index:2;
}
.figura img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.figura--3x4{ aspect-ratio:3/4; }
.figura--4x3{ aspect-ratio:4/3; }
.figura--16x9{ aspect-ratio:16/9; }
.figura--1x1{ aspect-ratio:1/1; }

.figura--3x4:hover img,
.figura--4x3:hover img,
.figura--16x9:hover img{ transform:scale(1.05); }

/* Producto: fondo claro, la foto respira dentro de la tarjeta */
.figura--producto{
  aspect-ratio:1/1;
  background:linear-gradient(180deg, #FFFFFF, var(--hueso));
  border-color:var(--linea);
}
.figura--producto img{ object-fit:contain; padding:6%; }
.figura--producto::after{ opacity:.55; }
.producto:hover .figura--producto img{ transform:scale(1.06); }

/* ==========================================================================
   PORTADA CON FOTO REAL
   La foto va de fondo con un velo azul encima: sin ese velo el titular
   blanco no se leería sobre las zonas claras de la imagen.
   ========================================================================== */
.hero__foto{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:65% center;
  z-index:0;
}
.hero__velo{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(5,15,31,.94) 0%, rgba(7,21,40,.82) 42%, rgba(7,21,40,.42) 72%, rgba(7,21,40,.30) 100%),
    linear-gradient(180deg, rgba(7,21,40,.75) 0%, transparent 28%, transparent 62%, rgba(5,14,28,.9) 100%);
}
.hero--con-foto .hero__trama{ opacity:.35; }
.hero--con-foto .hero__marca{ opacity:.035; }

@media (max-width:899px){
  /* En vertical la foto se ve de costado: se oscurece más para que el texto mande */
  .hero__foto{ object-position:72% center; }
  .hero__velo{
    background:
      linear-gradient(180deg, rgba(7,21,40,.88) 0%, rgba(7,21,40,.72) 45%, rgba(5,14,28,.94) 100%);
  }
}

/* ==========================================================================
   PORTADA CENTRADA  (punto 14)
   ========================================================================== */
.hero__contenido{ text-align:center; position:relative; }
/* Sombra suave detrás del texto: deja ver la foto y sostiene el contraste
   del titular blanco aunque la imagen tenga zonas claras. */
.hero__contenido::before{
  content:""; position:absolute; z-index:-1;
  inset:-12% -6%;
  background:radial-gradient(60% 55% at 50% 48%, rgba(5,14,28,.55), transparent 72%);
  pointer-events:none;
}

.hero__eyebrow{ justify-content:center; }
.hero__eyebrow::after{
  content:""; width:clamp(1.5rem,5vw,3.5rem); height:1px; background:var(--oro); flex:0 0 auto;
}

.hero__titulo{
  max-width:18ch; margin-inline:auto;
  margin-bottom:1.1rem;
}

.hero__disciplina{
  margin:0 0 1.9rem;
  font-family:var(--titulos);
  font-size:clamp(.82rem, .76rem + .3vw, 1rem);
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

.hero__bajada{ margin-inline:auto; max-width:52ch; }
.hero__acciones{ justify-content:center; }

/* con el texto centrado, el velo pasa a ser parejo en vez de cargado a la izquierda */
.hero--con-foto .hero__velo{
  background:
    radial-gradient(115% 75% at 50% 44%, rgba(5,15,31,.70) 0%, rgba(7,21,40,.48) 46%, rgba(7,21,40,.20) 100%),
    linear-gradient(180deg, rgba(7,21,40,.66) 0%, transparent 24%, transparent 62%, rgba(5,14,28,.90) 100%);
}
/* El encuadre se corre a la derecha: la mitad izquierda de la foto es la zona
   oscura pensada para que el titular respire, pero centrada se veía vacía. */
.hero--con-foto .hero__foto{ object-position:68% center; }

@media (max-width:899px){
  .hero--con-foto .hero__foto{ object-position:66% center; }
  .hero--con-foto .hero__velo{
    background:linear-gradient(180deg, rgba(7,21,40,.86) 0%, rgba(7,21,40,.68) 45%, rgba(5,14,28,.93) 100%);
  }
}

/* ==========================================================================
   CONDUCCIÓN — datos nuevos  (puntos 4, 5, 6)
   ========================================================================== */
.fundador__bio{
  margin:0 0 1.1rem;
  font-size:.93rem;
  color:rgba(255,255,255,.78);
}
/* El correo va pegado a la placa, sin filete: la placa ya separa lo bastante.
   El filete pasó a la reseña, que es lo que empieza un bloque nuevo. */
.fundador__mail{
  margin:.55rem 0 0;
  font-size:.85rem;
}
.fundador__mail a{
  color:var(--oro);
  text-decoration:none;
  border-bottom:1px solid rgba(232,168,56,.4);
  word-break:break-word;
}
.fundador__mail a:hover{ border-bottom-color:var(--oro); }

/* ==========================================================================
   ALINEACIÓN DE TEXTOS  (punto 7)
   Justificado en los párrafos anchos, que es donde el bloque queda prolijo.
   Centrado donde el bloque ya es central. Los textos angostos de tarjeta
   quedan justificados con partición de palabras: sin partición, en columnas
   angostas el justificado abre huecos enormes entre palabras.
   ========================================================================== */


.parrafo-guia,
.titulo-bloque__p,
.fundador__bio,
.pilar p,
.marco-normativo p,
.cardio__dato-t,
.inscripcion__intro > p,
.pie__desc,
.productos__nota{
  text-align:justify;
  text-justify:inter-word;
}

.servicio p,
.producto p,
.curso p{
  text-align:justify;
  text-justify:inter-word;
}

/* Bloques que ya son centrados: el justificado ahí quedaría raro */
.titulo-bloque--centro .titulo-bloque__p,
.doble__cierre,
.cierre p,
.hero__bajada,
.testimonio__txt{
  text-align:center;
}



/* ==========================================================================
   TRAMADO DE MARCA SOBRE LOS FONDOS BLANCOS  (punto 9)
   El isologo repetido, muy tenue, desplazándose despacio. Va dentro de cada
   sección clara —no como capa fija— para que nunca invada los fondos azules.
   ========================================================================== */
.seccion--clara{ position:relative; isolation:isolate; }
.seccion--clara::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background-image:url("assets/img/trama-kairos.webp?v=20260907");
  background-repeat:repeat;
  background-size:200px 200px;
  opacity:.055;
  animation:derivar-trama 90s linear infinite;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  pointer-events:none;
}
@keyframes derivar-trama{
  from{ background-position:0 0; }
  to  { background-position:200px 400px; }
}
/* un brillo dorado muy suave que recorre la trama, para que "respire" */
.seccion--clara::after{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(38rem 26rem at var(--brillo-trama-x,30%) var(--brillo-trama-y,20%),
             rgba(232,168,56,.07), transparent 68%);
  transition:opacity .8s ease;
}

/* ==========================================================================
   DESCARGAS DE FICHAS Y MATERIAL  (puntos 1 y 13)
   ========================================================================== */
.descargas{ list-style:none; margin:0 0 1.1rem; padding:0; display:grid; gap:.35rem; }
.descargas a{
  display:flex; align-items:center; gap:.5rem;
  font-size:.83rem; font-weight:600; color:var(--azul);
  text-decoration:none;
  border:1px solid var(--linea); border-radius:var(--radio);
  padding:.45rem .7rem;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.descargas a:hover{ background:var(--azul); color:var(--blanco); border-color:var(--azul); }
.descargas svg{ width:15px; height:15px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.descargas--oscuro a{ border-color:var(--linea-osc); color:var(--blanco); }
.descargas--oscuro a:hover{ background:var(--oro); color:var(--azul-profundo); border-color:var(--oro); }

/* ==========================================================================
   CAPACITACIONES con foto y fecha  (punto 13)
   ========================================================================== */
.curso__foto{ margin-bottom:1.1rem; }
.curso__fecha{
  margin:0 0 .7rem !important;
  font-family:var(--titulos);
  font-size:.75rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--blanco) !important;
  flex:0 0 auto !important;
}
.curso__fecha::before{ content:"◆ "; color:var(--oro); }

/* ==========================================================================
   TESTIMONIOS con foto y logo enlazado  (punto 11)
   ========================================================================== */
.testimonio__foto{
  width:56px; height:56px; flex:0 0 auto;
  border-radius:50%; object-fit:cover;
  border:2px solid rgba(232,168,56,.5);
}
.testimonio__quienes{ min-width:0; }
.testimonio__enlace{ margin-left:auto; display:block; }
.testimonio__logo{
  max-width:104px; max-height:44px; width:auto; height:auto;
  object-fit:contain; margin-left:auto;
  filter:grayscale(1); opacity:.65;
  transition:filter .3s ease, opacity .3s ease, transform .3s ease;
}
.testimonio__enlace:hover .testimonio__logo{ filter:none; opacity:1; transform:translateY(-2px); }

/* ==========================================================================
   CINTA DE EMPRESAS QUE CONFÍAN  (punto 12)
   Dos filas idénticas puestas una detrás de otra: cuando la primera termina de
   pasar, la segunda ya está en su lugar, así el giro no tiene costura.
   ========================================================================== */
.confian{
  background:var(--blanco);
  padding:clamp(2.5rem,5vw,4rem) 0;
  border-top:1px solid var(--linea);
  overflow:hidden;
}
.confian__titulo{
  margin:0 0 2rem; text-align:center;
  font-family:var(--titulos);
  font-size:.74rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--texto-suave);
}
.cinta{
  display:flex; width:max-content;
  animation:rodar-cinta 42s linear infinite;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cinta:hover{ animation-play-state:paused; }
.cinta__fila{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:clamp(2.5rem,6vw,5rem);
  padding-right:clamp(2.5rem,6vw,5rem);
}
.cinta__fila li{ flex:0 0 auto; }
.cinta img{
  max-height:52px; max-width:170px; width:auto; height:auto;
  object-fit:contain;
  filter:grayscale(1); opacity:.55;
  transition:filter .35s ease, opacity .35s ease, transform .35s ease;
}
.cinta a:hover img, .cinta li:hover img{ filter:none; opacity:1; transform:scale(1.06); }
@keyframes rodar-cinta{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

/* ==========================================================================
   ASISTENTE DE SOPORTE  (punto 2)
   ========================================================================== */
.chat-abrir{
  position:fixed; right:1.1rem; bottom:5.1rem; z-index:116;
  display:flex; align-items:center; gap:.55rem;
  padding:.8rem 1.05rem;
  background:var(--azul); color:var(--blanco);
  border:1px solid rgba(232,168,56,.55);
  border-radius:999px; cursor:pointer;
  font-family:var(--titulos);
  font-size:.78rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 16px 34px -16px rgba(0,0,0,.75);
  transition:transform .25s cubic-bezier(.22,.61,.36,1), background .25s ease, border-color .25s ease;
}
.chat-abrir:hover{ transform:translateY(-3px); background:#0d2d78; border-color:var(--oro); }
.chat-abrir svg{ width:20px; height:20px; fill:none; stroke:var(--oro); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.chat-abrir[aria-expanded="true"]{ opacity:0; pointer-events:none; }

.chat[hidden]{ display:none; }
.chat{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:118;
  width:min(calc(100vw - 2.2rem), 392px);
  max-height:min(76vh, 620px);
  display:flex; flex-direction:column;
  background:var(--azul-noche);
  border:1px solid rgba(232,168,56,.3);
  border-radius:14px; overflow:hidden;
  box-shadow:0 40px 80px -32px rgba(0,0,0,.85);
  animation:chat-entra .32s cubic-bezier(.22,.61,.36,1);
}
@keyframes chat-entra{ from{ opacity:0; transform:translateY(18px) scale(.98); } to{ opacity:1; transform:none; } }

.chat__barra{
  display:flex; align-items:center; gap:.75rem;
  padding:.9rem 1rem;
  background:linear-gradient(120deg, var(--azul), #071528);
  border-bottom:1px solid rgba(232,168,56,.28);
}
.chat__marca{ width:26px; height:auto; flex:0 0 auto; }
.chat__titulo{ margin:0; font-family:var(--titulos); font-size:.92rem; font-weight:700; color:var(--blanco); }
.chat__estado{ margin:0; font-size:.72rem; color:rgba(255,255,255,.6); }
.chat__cerrar{
  margin-left:auto; width:32px; height:32px; flex:0 0 auto;
  display:grid; place-items:center;
  background:transparent; border:1px solid var(--linea-osc); border-radius:50%;
  color:rgba(255,255,255,.75); cursor:pointer;
}
.chat__cerrar:hover{ color:var(--oro); border-color:var(--oro); }
.chat__cerrar svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; }

.chat__mensajes{
  flex:1 1 auto; overflow-y:auto;
  padding:1rem; display:flex; flex-direction:column; gap:.7rem;
  scrollbar-width:thin;
}
.chat__msj{
  max-width:88%; padding:.7rem .9rem;
  border-radius:12px; font-size:.9rem; line-height:1.55;
}
.chat__msj p{ margin:0 0 .5rem; }
.chat__msj p:last-child{ margin-bottom:0; }
.chat__msj a{ color:var(--oro); }
.chat__msj--bot{
  align-self:flex-start;
  background:rgba(255,255,255,.06);
  border:1px solid var(--linea-osc);
  color:rgba(255,255,255,.88);
  border-bottom-left-radius:4px;
}
.chat__msj--yo{
  align-self:flex-end;
  background:var(--oro); color:var(--azul-profundo);
  font-weight:500;
  border-bottom-right-radius:4px;
}
.chat__msj--error{ background:rgba(255,139,123,.12); border-color:rgba(255,139,123,.5); color:#FFC9C0; }

.chat__puntitos{ display:inline-flex; gap:4px; padding:.25rem 0; }
.chat__puntitos span{
  width:6px; height:6px; border-radius:50%; background:var(--oro);
  animation:latido-punto 1.1s ease-in-out infinite;
}
.chat__puntitos span:nth-child(2){ animation-delay:.16s; }
.chat__puntitos span:nth-child(3){ animation-delay:.32s; }
@keyframes latido-punto{ 0%,100%{ opacity:.25; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } }

.chat__sugerencias{
  display:flex; flex-wrap:wrap; gap:.4rem;
  padding:0 1rem .8rem;
}
.chat__sugerencias button{
  font-size:.76rem; font-weight:600;
  color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.05);
  border:1px solid var(--linea-osc); border-radius:999px;
  padding:.4rem .8rem; cursor:pointer;
  transition:border-color .25s ease, color .25s ease;
}
.chat__sugerencias button:hover{ border-color:var(--oro); color:var(--oro); }
.chat__sugerencias:empty{ display:none; }

.chat__pie{
  display:flex; align-items:flex-end; gap:.5rem;
  padding:.75rem 1rem .5rem;
  border-top:1px solid var(--linea-osc);
}
.chat__pie textarea{
  flex:1 1 auto; resize:none; max-height:110px;
  font-family:var(--cuerpo); font-size:.9rem; line-height:1.45;
  color:var(--blanco); background:rgba(255,255,255,.06);
  border:1px solid var(--linea-osc); border-radius:10px;
  padding:.6rem .8rem;
}
.chat__pie textarea:focus{ outline:none; border-color:var(--oro); }
.chat__pie textarea::placeholder{ color:rgba(255,255,255,.38); }
.chat__enviar{
  width:42px; height:42px; flex:0 0 auto;
  display:grid; place-items:center;
  background:var(--oro); color:var(--azul-profundo);
  border:0; border-radius:10px; cursor:pointer;
  transition:filter .25s ease, transform .2s ease;
}
.chat__enviar:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.chat__enviar:disabled{ opacity:.45; cursor:default; transform:none; }
.chat__enviar svg{ width:19px; height:19px; fill:currentColor; stroke:none; }
.chat__nota{
  margin:0; padding:0 1rem .8rem;
  font-size:.68rem; color:rgba(255,255,255,.42); text-align:center;
}
.chat__oculto{ position:absolute; left:-9999px; }

@media (max-width:520px){
  .chat{ right:.6rem; left:.6rem; bottom:.6rem; width:auto; max-height:82vh; }
  .chat-abrir{ right:.85rem; bottom:4.6rem; padding:.7rem .85rem; }
  .chat-abrir__texto{ display:none; }
}

/* ==========================================================================
   CURSOR RELOJ DE ARENA  (punto 10)
   Sólo en equipos con mouse. En pantallas táctiles no existe y no molesta.
   ========================================================================== */
.cursor-kairos{
  position:fixed; top:0; left:0; z-index:9999;
  width:72px; height:72px;
  pointer-events:none;
  display:none;
  will-change:transform;
}
html.cursor-propio .cursor-kairos{ display:block; }
html.cursor-propio,
html.cursor-propio body,
html.cursor-propio a,
html.cursor-propio button,
html.cursor-propio .filtro,
html.cursor-propio .curso__cta,
html.cursor-propio summary{ cursor:none; }
/* donde se escribe, el cursor del sistema sigue siendo el útil */
html.cursor-propio input,
html.cursor-propio textarea,
html.cursor-propio select{ cursor:auto; }

/* listas dentro de las respuestas del asistente */
.chat__msj ul{ margin:.15rem 0 .5rem; padding-left:1.05rem; }
.chat__msj li{ margin-bottom:.2rem; }
.chat__msj strong{ color:var(--oro); font-weight:700; }
.chat__msj--yo strong{ color:inherit; }

/* ==========================================================================
   PALABRAS ENTERAS, SIEMPRE
   Regla de la casa: los párrafos van justificados y ninguna palabra se parte
   al final del renglón, en ningún tamaño de pantalla. Si una palabra no entra,
   pasa entera al renglón siguiente.
   ========================================================================== */
html, body, p, li, h1, h2, h3, h4, span, a, blockquote, figcaption, label, td, th{
  hyphens:none;
  -webkit-hyphens:none;
  -moz-hyphens:none;
  -ms-hyphens:none;
  word-break:normal;
  /* Las palabras siguen pasando enteras al renglón siguiente. `break-word`
     sólo actúa cuando una palabra es más ancha que la pantalla entera: en ese
     caso, partirla es mejor que dejar que se salga del margen y se corte. */
  overflow-wrap:break-word;
  word-wrap:break-word;
  text-wrap:pretty;
}

/* Únicas excepciones: correos y direcciones web larguísimas, que si no se
   cortan se salen de la caja. */
.fundador__mail a, .datos-inst__lista a, .chat__msj a{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ==========================================================================
   ENCABEZADO A TODO EL ANCHO
   Para títulos largos que tienen que respirar de lado a lado en vez de
   quedar encajonados en una columna angosta.
   ========================================================================== */
.titulo-bloque--ancho{ max-width:none; }
.titulo-bloque--ancho .titulo-bloque__h{
  max-width:none;
  margin-inline:auto;
  text-wrap:balance;          /* reparte las líneas de forma pareja */
}
.titulo-bloque--ancho .titulo-bloque__p{ max-width:64ch; }

/* ==========================================================================
   1 · MARCA DE AGUA EN LOS FONDOS LISOS
   Los fondos blancos ya llevaban el isologo repetido. Ahora los azules
   también, con el isologo en blanco: sobre azul marino es lo que mejor lee
   como filigrana institucional — el dorado ahí compite con los acentos.
   ========================================================================== */
.seccion--oscura, .conduccion, .cardio, .pie, .atributos{
  position:relative; isolation:isolate;
}
.seccion--oscura::before, .cardio::before, .pie::before, .atributos::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background-image:url("assets/img/trama-kairos-blanca.webp?v=20260907");
  background-repeat:repeat;
  background-size:200px 200px;
  opacity:.045;
  animation:derivar-trama 90s linear infinite;
  pointer-events:none;
}
/* en la franja de atributos, que es angosta, la trama va más discreta */
.atributos::before{ opacity:.06; background-size:150px 150px; }
/* la cinta de logos es blanca: usa la trama azul */
.confian{ position:relative; isolation:isolate; }
.confian::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:url("assets/img/trama-kairos.webp?v=20260907") repeat;
  background-size:200px 200px; opacity:.05;
  animation:derivar-trama 90s linear infinite;
  pointer-events:none;
}
/* la cardio ya tenía su propio fondo con degradados: la trama va encima de él */
.cardio::before{ opacity:.05; }

/* ==========================================================================
   2 · ISOLOGO GRANDE DE FONDO EN LAS TARJETAS DE SERVICIO
   Va en azul, muy tenue, asomando por el ángulo inferior derecho, y se
   despierta un poco al pasar el mouse.
   ========================================================================== */
.servicio{ position:relative; overflow:hidden; }
.servicio::before{
  content:"";
  position:absolute; right:-14%; bottom:-16%;
  width:62%; aspect-ratio:420/427;
  background:url("assets/img/marca-agua-azul.webp?v=20260907") center/contain no-repeat;
  opacity:.075;
  transform:rotate(-6deg);
  transition:opacity .45s ease, transform .6s cubic-bezier(.22,.61,.36,1);
  pointer-events:none; z-index:0;
}
.servicio:hover::before{ opacity:.13; transform:rotate(-6deg) scale(1.06); }
.servicio > *{ position:relative; z-index:1; }

/* ==========================================================================
   4 · PLACA METÁLICA DE LA CONDUCCIÓN
   Nombre y cargo sobre una chapa con relieve, y el isologo calado dejando
   pasar una luz dorada desde atrás.
   ========================================================================== */
/* ---------- placa pequeña sobre tabla de madera ----------
   La placa dejó de ser protagonista: es sólo el detalle que comunica el rol.
   `.placa` es la tabla de madera —un borde sutil, de unos pocos píxeles— y
   `.placa__chapa` es la chapa metálica atornillada encima.

   Dos motivos, que se eligen con una clase en el <article>:
     .placa            chapa dorada  (por defecto)
     .placa--cromo     chapa de metal cromado
   ---------------------------------------------------------------------- */
.placa{
  --madera-a:#4A2F1B;          /* nogal, tono base   */
  --madera-b:#6B462A;          /* veta clara         */
  --madera-c:#33200F;          /* veta oscura        */
  position:relative;
  display:inline-block;
  margin:0 0 1rem;
  padding:5px;                 /* esto es todo el ancho de madera que se ve */
  border-radius:4px;
  background:
    /* veta fina, apenas perceptible */
    repeating-linear-gradient(92deg,
      rgba(255,225,190,.05) 0 1px,
      transparent 1px 3px,
      rgba(0,0,0,.05) 3px 4px,
      transparent 4px 7px),
    linear-gradient(160deg, var(--madera-b) 0%, var(--madera-a) 38%,
                            var(--madera-c) 72%, var(--madera-a) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,222,180,.28),      /* canto superior lustrado */
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 6px 14px -8px rgba(0,0,0,.75);
  isolation:isolate;
}

/* la chapa metálica */
.placa__chapa{
  position:relative;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.32rem .62rem;
  border-radius:2px;
  background:
    linear-gradient(157deg,
      #7A5E17 0%, #C0A044 14%, #EBDCAB 29%, #CDB05C 41%,
      #9B7B2C 55%, #DEC988 69%, #B79836 81%, #7F6218 93%, #664D11 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,252,232,.85),
    inset 0 -1px 2px rgba(60,40,0,.5),
    0 1px 2px rgba(0,0,0,.35);
}
/* brillo fijo y suave: da el metal sin llamar la atención */
.placa__chapa::after{
  content:"";
  position:absolute; inset:0;
  border-radius:2px;
  background:linear-gradient(112deg, transparent 30%, rgba(255,255,255,.34) 47%, transparent 62%);
  mix-blend-mode:screen;
  pointer-events:none;
}

/* el isologo, grabado en la chapa */
.placa__calado{
  flex:0 0 auto;
  width:15px; height:16px;
  background:linear-gradient(160deg, #6B4E0E, #3A2905 55%, #5C430B);
  -webkit-mask:url("assets/img/isotipo-kairos-blanco.webp") center/contain no-repeat;
  mask:url("assets/img/isotipo-kairos-blanco.webp") center/contain no-repeat;
  filter:drop-shadow(0 1px 0 rgba(255,250,220,.55));
}

/* Las dos placas miden lo mismo: el bloque de texto tiene un ancho mínimo
   calculado sobre el nombre más largo de los dos. Si algún día se carga uno
   todavía más largo desde el panel, la placa crece en vez de recortarlo. */
.placa__textos{ position:relative; z-index:2; text-align:left; min-width:11.8rem; }

/* letras hundidas: luz abajo, sombra arriba */
.placa__nombre{
  margin:0;
  font-family:"Cinzel", "Iowan Old Style", Georgia, serif;
  font-weight:600;
  font-size:.74rem;
  line-height:1.15;
  letter-spacing:.02em;
  color:#33240A;
  text-shadow:0 1px 0 rgba(255,250,220,.6), 0 -1px 1px rgba(40,26,0,.4);
}
.placa__rol{
  margin:.1rem 0 0;
  font-family:"Cinzel", "Iowan Old Style", Georgia, serif;
  font-weight:400;
  font-size:.53rem;
  line-height:1.2;
  /* .12em y no .16: con más espaciado, "Fundadora · Directora Médica" no
     entra en el ancho de la placa y se recortaba la última palabra */
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#4A360E;
  text-shadow:0 1px 0 rgba(255,250,220,.5);
}

/* ---------- motivo 2: chapa de metal cromado ---------- */
/* La madera se enfría un poco para que acompañe al cromo en vez de pelearle. */
.placa--cromo{
  --madera-a:#4A3524;
  --madera-b:#68503A;
  --madera-c:#2F2114;
}
.placa--cromo .placa__chapa{
  background:
    linear-gradient(157deg,
      #97A0A9 0%, #D6DCE2 13%, #F6F8FA 27%, #C3CAD2 40%,
      #8C959E 54%, #E4E9EE 68%, #AEB7C0 80%, #7E878F 92%, #6B747C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 2px rgba(20,28,36,.45),
    0 1px 2px rgba(0,0,0,.35);
}
.placa--cromo .placa__calado{
  background:linear-gradient(160deg, #47515B, #212932 55%, #3C464F);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.7));
}
/* En el motivo cromado el contenido va centrado. Para que el nombre quede
   centrado DE VERDAD y no corrido, el isologo sale del flujo y se ancla a la
   izquierda: así no le roba espacio al centrado del texto. */
.placa--cromo .placa__chapa{ justify-content:center; padding-left:1.2rem; padding-right:1.2rem; }
.placa--cromo .placa__calado{
  position:absolute; left:.6rem; top:50%; transform:translateY(-50%);
}
.placa--cromo .placa__textos{ text-align:center; }
.placa--cromo .placa__nombre{
  color:#232A32;
  text-shadow:0 1px 0 rgba(255,255,255,.75), 0 -1px 1px rgba(20,28,36,.35);
}
.placa--cromo .placa__rol{
  color:#3A434D;
  text-shadow:0 1px 0 rgba(255,255,255,.65);
}

@media (prefers-reduced-motion: reduce){
  .placa::after{ animation:none; }
  .seccion--oscura::before, .cardio::before, .pie::before,
  .atributos::before, .confian::before{ animation:none; }
}

/* ==========================================================================
   3 · CARDIOPROTECCIÓN — EL CICLO DEL CORAZÓN
   La foto recortada en corazón, retroiluminada en dorado con el pulso de un
   latido real (lub-dub, 60 por minuto), y los seis pasos girando a su
   alrededor en sentido horario: mantener un espacio cardioprotegido no
   termina nunca, vuelve a empezar.
   ========================================================================== */
.ciclo{
  position:relative;
  width:min(100%, 1120px);
  margin:clamp(1rem,3vw,2.5rem) auto 0;
  aspect-ratio:1;
}
.ciclo__def{ position:absolute; width:0; height:0; }

/* ---------- anillo punteado + destello que lo recorre ---------- */
.ciclo__anillo{
  position:absolute; inset:12%;
  border-radius:50%;
  border:1px dashed rgba(232,168,56,.26);
  pointer-events:none;
}
.ciclo__flujo{
  position:absolute; inset:12%;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0 62%, rgba(232,168,56,.10) 74%, rgba(232,168,56,.55) 88%,
    rgba(255,233,168,.85) 95%, transparent 100%);
  -webkit-mask:radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask:radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation:rodar-ciclo 16s linear infinite;
  pointer-events:none;
}
@keyframes rodar-ciclo{ to{ transform:rotate(360deg); } }

.ciclo__leyenda{
  position:absolute; left:50%; top:75.5%;
  transform:translate(-50%,-50%);
  margin:0; z-index:3;
  font-family:var(--titulos);
  font-size:.64rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(232,168,56,.85);
  white-space:nowrap;
  text-shadow:0 2px 12px rgba(5,14,28,.9);
  pointer-events:none;
}

/* ---------- el corazón ---------- */
.corazon{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:34%; aspect-ratio:1;
  z-index:2;
}
/* halo suelto que abre y cierra con el latido */
.corazon__resplandor{
  position:absolute; inset:-22%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(232,168,56,.45) 0%, rgba(232,168,56,.14) 42%, transparent 68%);
  animation:latido-halo 1s ease-out infinite;
  pointer-events:none;
}
/* la luz que sale por el borde del corazón, como un cartel retroiluminado */
.corazon__luz{
  position:absolute; inset:0;
  clip-path:url(#recorte-corazon);
  background:linear-gradient(160deg, #FFF3CE 0%, #FFD98A 34%, #E8A838 68%, #B87A18 100%);
  transform:scale(1.055);
  filter:blur(9px);
  animation:latido-luz 1s ease-out infinite;
  pointer-events:none;
}
.corazon__foto{
  position:absolute; inset:0;
  margin:0;
  clip-path:url(#recorte-corazon);
  animation:latido-foto 1s ease-out infinite;
}
.corazon__foto img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;
  /* La señal y el gabinete quedan en la mitad baja de la foto; se sube un poco
     el encuadre para que caigan en la parte ancha del corazón y no en la punta. */
  transform:scale(1.02);
  transform-origin:center center;
}

/* Latido real: una sístole fuerte (lub), una segunda más corta (dub) y reposo.
   Un ciclo entero dura 1 segundo = 60 latidos por minuto. */
@keyframes latido-luz{
  0%   { transform:scale(1.03); opacity:.55; filter:blur(9px); }
  7%   { transform:scale(1.085); opacity:1;  filter:blur(13px); }
  15%  { transform:scale(1.04); opacity:.62; filter:blur(9px); }
  24%  { transform:scale(1.068); opacity:.88; filter:blur(11px); }
  34%  { transform:scale(1.03); opacity:.55; filter:blur(9px); }
  100% { transform:scale(1.03); opacity:.55; filter:blur(9px); }
}
@keyframes latido-halo{
  0%   { transform:scale(.97); opacity:.45; }
  7%   { transform:scale(1.06); opacity:.95; }
  15%  { transform:scale(1); opacity:.5; }
  24%  { transform:scale(1.035); opacity:.75; }
  34%  { transform:scale(.97); opacity:.45; }
  100% { transform:scale(.97); opacity:.45; }
}
@keyframes latido-foto{
  0%,100%{ transform:scale(1); }
  7%     { transform:scale(1.012); }
  15%    { transform:scale(1.004); }
  24%    { transform:scale(1.009); }
  34%    { transform:scale(1); }
}

/* ---------- los seis pasos alrededor ---------- */
.ciclo__pasos{
  list-style:none; margin:0; padding:0;
  position:absolute; inset:0;
}
.paso{
  position:absolute;
  width:25%;
  transform:translate(-50%,-50%);
  padding:.9rem 1rem;
  border:1px solid var(--linea-osc);
  border-radius:10px;
  background:linear-gradient(160deg, rgba(12,32,60,.92), rgba(7,21,40,.88));
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  transition:border-color .35s ease, transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.paso:hover{
  border-color:rgba(232,168,56,.55);
  box-shadow:0 16px 34px -20px rgba(0,0,0,.9);
}
/* posiciones sobre la circunferencia, en sentido horario desde arriba */
.paso--1{ left:50%;    top:11.5%; }
.paso--2{ left:83.4%;  top:30.7%; }
.paso--3{ left:83.4%;  top:69.3%; }
.paso--4{ left:50%;    top:88.5%; }
.paso--5{ left:16.6%;  top:69.3%; }
.paso--6{ left:16.6%;  top:30.7%; }
.paso--1:hover,.paso--4:hover{ transform:translate(-50%,-50%) scale(1.04); }
.paso--2:hover,.paso--3:hover{ transform:translate(-50%,-50%) scale(1.04); }
.paso--5:hover,.paso--6:hover{ transform:translate(-50%,-50%) scale(1.04); }

.paso__n{
  display:block; margin-bottom:.25rem;
  font-family:var(--titulos);
  font-size:1.1rem; font-weight:800;
  color:transparent;
  -webkit-text-stroke:1px rgba(232,168,56,.8);
  letter-spacing:-.02em;
  text-align:center;
}
.paso h3{
  margin:0 0 .45rem;
  font-size:.92rem; line-height:1.25;
  color:var(--blanco);
  text-align:center;
  max-width:none;
}
.paso p{
  margin:0;
  font-size:.78rem; line-height:1.45;
  color:rgba(255,255,255,.72);
  text-align:justify;
  text-justify:inter-word;
}

/* ---------- pie de la sección ---------- */
.cardio__pie{
  display:grid; gap:1.25rem;
  grid-template-columns:1fr;
  align-items:start;
  margin-top:clamp(2rem,4vw,3rem);
}
@media (min-width:900px){
  .cardio__pie{ grid-template-columns:auto 1fr auto; gap:2rem; align-items:center; }
  .cardio__pie .btn{ white-space:normal; text-align:center; }
}

/* ---------- en pantallas chicas, el círculo no entra: lista de siempre ---------- */
@media (max-width:899px){
  .ciclo{ aspect-ratio:auto; }
  .ciclo__anillo,.ciclo__flujo,.ciclo__leyenda{ display:none; }
  .corazon{
    position:relative; left:auto; top:auto; transform:none;
    width:min(76%, 320px); margin:0 auto clamp(1.5rem,5vw,2.5rem);
  }
  .ciclo__pasos{ position:static; display:grid; gap:1rem; }
  .paso{
    position:static; width:auto; transform:none;
    padding:1.1rem 1.2rem;
  }
  .paso:hover{ transform:none; }
  .paso h3{ font-size:1.02rem; }
  .paso p{ font-size:.88rem; }
}
@media (min-width:640px) and (max-width:899px){
  .ciclo__pasos{ grid-template-columns:repeat(2,1fr); }
}

@media (prefers-reduced-motion: reduce){
  .corazon__luz,.corazon__resplandor,.corazon__foto,.ciclo__flujo{ animation:none; }
  .corazon__luz{ opacity:.7; }
}

/* ==========================================================================
   FICHA DE CONDUCCIÓN — las dos fichas van una al lado de la otra.
   Dentro de cada una: la foto arriba, la placa justo debajo, el correo al pie
   de la placa y la reseña a lo ancho de la tarjeta, justificada.
   ========================================================================== */
.fundador{ align-items:start; }
.fundador__resto{
  /* reseña justificada, a lo ancho de la tarjeta */
  text-align:justify;
  text-justify:inter-word;
  /* tope de medida: cuando las fichas se apilan, la tarjeta es muy ancha y
     el renglón se iría a 78 caracteres, que cansa de leer */
  max-width:70ch;
  margin-top:1.15rem;
  padding-top:1.15rem;
  border-top:1px solid var(--linea-osc);
}
.fundador__resto .fundador__mat{ text-align:justify; }

/* El ancho de la foto vive en una variable, porque la placa cromada tiene que
   medir exactamente lo mismo. Cambiando `--foto` se mueven las dos juntas. */
.fundador{ --foto:270px; }
.fundador .ph--retrato,
.fundador .retrato{ max-width:var(--foto); }

/* la placa dorada mide lo que mide su contenido: no se estira aunque sea un
   elemento de la grilla */
.fundador .placa{ justify-self:start; }

/* la cromada, en cambio, va al ancho de la foto.
   `min-width:0` es imprescindible: sin eso, un elemento de grilla no deja
   que su columna se achique por debajo de su ancho fijo y, en pantallas muy
   angostas, la placa empujaba la página 22 px hacia afuera. */
.fundador .placa--cromo{ width:var(--foto); max-width:100%; min-width:0; }
.placa--cromo .placa__textos{ min-width:0; }

/* Las dos fichas van una al lado de la otra (regla de la media query de 900).
   Dentro de cada una, todo se apila en el orden natural: foto, placa, correo
   y por último la reseña, que ocupa el ancho completo de la tarjeta.

   Se probó poner la reseña al costado de la foto, pero con las fichas de a
   dos la columna de texto queda en 270 px —unos 23 caracteres por renglón— y
   justificada se abre en huecos. A lo ancho llega a 46 caracteres, que es una
   medida cómoda de leer. */
/* Las fichas se ponen una al lado de la otra recién a partir de 1100 px.
   Por debajo se apilan: con dos por fila la reseña justificada quedaría en
   unos 31 caracteres por renglón y se abre en huecos. */
@media (min-width:1100px){
  .fundadores{ grid-template-columns:repeat(2,1fr); }
}

@media (min-width:900px){
  .fundador{ --foto:236px; }
  .fundador .retrato{ max-width:var(--foto); }
  .fundador .placa{ margin:0; }
}

/* nombre y cargo, cada uno en un solo renglón */
.placa__nombre, .placa__rol{ white-space:nowrap; }

/* ==========================================================================
   MARCO LEGAL — la ley nacional que respalda la cardioprotección
   Una placa sobria: filete dorado al costado, sello grabado y la ley citada
   con la misma letra de inscripción de las placas de conducción.
   ========================================================================== */
.ley{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:1.1rem;
  margin:clamp(2.5rem,5vw,3.5rem) auto 0;
  max-width:1120px;
  padding:clamp(1.4rem,3vw,2rem) clamp(1.4rem,3vw,2.2rem);
  border:1px solid rgba(232,168,56,.30);
  border-radius:12px;
  background:
    radial-gradient(60rem 22rem at 12% 0%, rgba(232,168,56,.10), transparent 62%),
    linear-gradient(150deg, rgba(12,32,60,.92), rgba(7,21,40,.86));
  text-decoration:none;
  overflow:hidden;
  transition:border-color .4s ease, transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.ley::before{                       /* filete dorado del costado */
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--oro), rgba(232,168,56,.15));
}
.ley::after{                        /* brillo que cruza al pasar el mouse */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.06) 50%, transparent 62%);
  opacity:0; transition:opacity .5s ease;
  pointer-events:none;
}
.ley:hover{
  border-color:rgba(232,168,56,.65);
  transform:translateY(-3px);
  box-shadow:0 26px 48px -30px rgba(0,0,0,.9);
}
.ley:hover::after{ opacity:1; }

.ley__sello{
  flex:0 0 auto;
  width:58px; height:58px;
  display:grid; place-items:center;
  border:1px solid rgba(232,168,56,.42);
  border-radius:50%;
  background:radial-gradient(circle at 40% 32%, rgba(232,168,56,.20), transparent 70%);
}
.ley__sello svg{
  width:27px; height:27px;
  fill:none; stroke:var(--oro); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}

.ley__cuerpo{ display:block; min-width:0; }
.ley__rotulo{
  display:block; margin-bottom:.5rem;
  font-family:var(--titulos);
  font-size:.66rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.ley__numero{
  display:block;
  font-family:"Cinzel","Iowan Old Style",Georgia,serif;
  font-size:clamp(1.15rem,.95rem + .8vw,1.6rem);
  font-weight:600; letter-spacing:.02em;
  color:var(--oro);
  line-height:1.15;
}
.ley__titulo{
  display:block; margin:.15rem 0 .7rem;
  padding-bottom:.7rem;
  border-bottom:1px solid rgba(232,168,56,.22);
  font-family:var(--titulos);
  font-size:clamp(.92rem,.85rem + .3vw,1.08rem);
  font-weight:600; letter-spacing:-.01em;
  color:var(--blanco);
}
.ley__texto{
  display:block;
  font-size:.9rem; line-height:1.6;
  color:rgba(255,255,255,.76);
  text-align:justify; text-justify:inter-word;
}
.ley__texto strong{ color:var(--blanco); font-weight:600; }

.ley__ir{
  display:inline-flex; align-items:center; gap:.5rem;
  align-self:start;
  padding:.72rem 1.15rem;
  border:1px solid rgba(232,168,56,.5);
  border-radius:8px;
  font-family:var(--titulos);
  font-size:.75rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--oro);
  white-space:nowrap;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.ley__ir svg{
  width:15px; height:15px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.ley:hover .ley__ir{ background:var(--oro); color:var(--azul-profundo); border-color:var(--oro); }
.ley:hover .ley__ir svg{ transform:translate(2px,-2px); }

@media (min-width:820px){
  .ley{
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:1.6rem;
  }
  .ley__ir{ align-self:center; }
}
@media (prefers-reduced-motion: reduce){
  .ley:hover{ transform:none; }
  .ley:hover .ley__ir svg{ transform:none; }
}