/* ============================================================
   TEMA EDITORIAL v2 — rediseño "charter de lujo" (muestra: solo el home)
   Composición nueva: hero full-bleed, lista de servicios editorial,
   franja de datos, foto sangrada, logos fantasma.
   ============================================================ */

:root{
  --display:"Fraunces","Georgia",serif;
  --mono:"Poppins",-apple-system,"Segoe UI",sans-serif;
  --hair:rgba(139,153,168,.22);
}

/* ===== TIPOGRAFÍA BASE DEL TEMA ===== */
h1, h2, .display{ font-weight:600; letter-spacing:.015em; line-height:1.06; }
h2{ font-size:clamp(30px, 3.8vw, 50px); }
h3{ font-weight:600; letter-spacing:.02em; }
h1 .tt, h2 .tt{ color:var(--niebla); }

.eyebrow{
  font-family:var(--body); font-weight:600; font-size:11px;
  letter-spacing:.24em; text-indent:0; color:var(--niebla);
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:""; width:36px; height:10px; flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 12'%3E%3Crect y='4.8' width='72' height='2.4' rx='1.2' fill='%238B99A8' opacity='.45'/%3E%3Crect y='4.8' width='11' height='2.4' fill='%2335B6DA'/%3E%3Ccircle cx='36' cy='6' r='4' fill='%2335B6DA'/%3E%3C/svg%3E") center/contain no-repeat;
}
.manifiesto .eyebrow, .outro .eyebrow, .section-head--center .eyebrow{ justify-content:center; }

.announce{ font-weight:600; letter-spacing:.3em; font-size:10px; }
.markers{ font-weight:500; letter-spacing:.16em; font-size:11px; }
.hero-caption{ font-weight:500; letter-spacing:.16em; font-size:10.5px; }
.breadcrumb{ font-weight:500; letter-spacing:.2em; }
.nav-tel{ font-weight:500; letter-spacing:.05em; }
.dropdown a .d-tag{ font-weight:500; letter-spacing:.14em; }
.dropdown .d-all{ font-weight:600; letter-spacing:.18em; }
.foot-grid h4{ font-weight:600; letter-spacing:.24em; }
.foot-legal .wrap{ font-weight:500; letter-spacing:.16em; font-size:10px; }
.ficha-head{ font-weight:600; letter-spacing:.2em; }
.ficha dt{ font-family:var(--body); font-weight:600; letter-spacing:.18em; font-size:9.5px; }
.ficha dd{ font-family:var(--display); font-weight:600; letter-spacing:.01em; font-size:21px; text-transform:none; }

/* ============================================================
   HERO FULL-BLEED — el cine de operaciones ocupa toda la pantalla
   ============================================================ */
.hero-full{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; background:var(--noche);
  padding-top:calc(var(--bar-h) + var(--nav-h));
}
.hero-full .hero-cine{
  position:absolute; inset:0; z-index:0;
  border:0; border-radius:0; background:var(--noche);
}
.hero-full .hero-cine .cine-slide{
  filter:saturate(.82) contrast(1.05);
}
.hero-full::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(10,14,20,.78) 0%, rgba(10,14,20,.35) 46%, rgba(10,14,20,.12) 100%),
    linear-gradient(180deg, rgba(10,14,20,.5) 0%, rgba(10,14,20,.06) 34%, rgba(10,14,20,.62) 78%, rgba(10,14,20,.94) 100%);
}
.hero-full .wrap{ position:relative; z-index:2; width:100%; }
.hero-full .cine-bar{ z-index:2; height:2px; }

.h-mega{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(48px, 8.4vw, 122px); line-height:.99; letter-spacing:.005em;
  color:var(--papel); max-width:none;
}
.h-mega .tt{ color:var(--niebla); }
.hero-full .lead{ margin-top:26px; max-width:52ch; font-size:clamp(15.5px,1.25vw,17.5px); }
.hero-full .hero-ctas{ margin-top:34px; margin-bottom:52px; }

/* caption del cine: esquina inferior derecha, sobre la imagen */
.cap-corner{
  position:absolute; right:28px; bottom:96px; z-index:2; text-align:right;
  font-family:var(--body); font-weight:500; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--plata);
  text-shadow:0 1px 12px rgba(10,14,20,.8);
}
.cap-corner em{ font-style:normal; color:var(--cian); }
.cap-corner span{ display:block; }
.cap-corner span + span{ margin-top:4px; color:var(--niebla); }

/* cinta de certificaciones al pie del hero */
.hero-strip{
  position:relative; z-index:2; border-top:1px solid var(--hair);
  background:rgba(10,14,20,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.hero-strip ul{
  list-style:none; display:flex; flex-wrap:wrap;
  max-width:var(--maxw); margin:0 auto; padding:0 28px;
}
.hero-strip li{
  flex:1 1 auto; display:flex; flex-direction:column; gap:2px;
  padding:18px 26px 18px 0; margin-right:26px;
  border-right:1px solid var(--hair);
}
.hero-strip li:last-child{ border-right:0; margin-right:0; }
.hero-strip .hs-dato{
  font-family:var(--display); font-weight:600; font-size:19px; color:var(--papel);
  text-transform:uppercase; letter-spacing:.02em;
}
.hero-strip .hs-label{
  font-family:var(--body); font-weight:500; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--niebla);
}

/* ============================================================
   FRANJA DE DATOS — números enormes sin cajas
   ============================================================ */
.stats-strip{
  display:grid; grid-template-columns:repeat(3,1fr);
}
.stats-strip .st{
  padding:10px 44px 10px 0; margin-right:44px;
  border-right:1px solid var(--hair);
}
.stats-strip .st:last-child{ border-right:0; margin-right:0; padding-right:0; }
.stats-strip .st-num{
  font-family:var(--display); font-weight:600; line-height:1;
  font-size:clamp(54px, 6vw, 84px); color:var(--blanco); letter-spacing:0;
}
.stats-strip .st-num small{ font-size:.4em; color:var(--cian); font-weight:600; letter-spacing:.04em; }
.stats-strip .st-title{
  font-family:var(--body); font-weight:600; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--papel); margin-top:16px;
}
.stats-strip .st-desc{ margin-top:10px; color:var(--niebla); font-size:14px; line-height:1.7; max-width:34ch; }

/* ============================================================
   SERVICIOS — lista editorial con imagen al hover
   ============================================================ */
.svc-editorial{ display:grid; grid-template-columns:1.25fr .75fr; gap:60px; align-items:start; }
.svc-list{ border-top:1px solid var(--hair); }
.svc-row{
  display:block; padding:34px 4px 32px; border-bottom:1px solid var(--hair);
  text-decoration:none; color:var(--papel); position:relative;
  transition:padding-left .35s cubic-bezier(.22,.61,.36,1), border-color .35s ease;
}
/* filo cian que crece bajo la fila: sustituye a la flecha */
.svc-row::after{
  content:""; position:absolute; left:0; right:100%; bottom:-1px; height:1px;
  background:var(--cian); transition:right .5s cubic-bezier(.22,.61,.36,1);
}
.svc-row:hover{ padding-left:14px; }
.svc-row:hover::after{ right:0; }
.svc-row:focus-visible{ outline:1px solid var(--cian); outline-offset:6px; }
.r-main{ display:flex; flex-direction:column; gap:11px; }
.r-title{
  font-family:var(--display); font-weight:500; text-transform:uppercase;
  font-size:clamp(19px, 2.05vw, 28px); line-height:1.12; letter-spacing:.06em;
  color:var(--papel); transition:color .3s ease;
}
.svc-row:hover .r-title{ color:var(--cian); }
.r-tag{
  font-family:var(--body); font-weight:400; font-size:10px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--niebla);
  transition:color .3s ease;
}
.svc-row:hover .r-tag{ color:var(--plata); }

/* panel de previsualización (desktop): la foto de la fila activa */
.svc-preview{
  position:sticky; top:calc(var(--bar-h) + var(--nav-h) + 32px);
  aspect-ratio:4/4.7; border-radius:0; overflow:hidden;
  border:0; background:var(--hangar);
}
.svc-preview img, .svc-preview video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.05); transition:opacity .5s ease, transform .9s ease;
}
.svc-preview img.on, .svc-preview video.on{ opacity:1; transform:scale(1); }
.svc-preview .sp-cap{
  position:absolute; left:18px; bottom:16px; z-index:2;
  font-family:var(--body); font-weight:600; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--plata); text-shadow:0 1px 10px rgba(10,14,20,.9);
}
.svc-preview::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(185deg, rgba(10,14,20,0) 55%, rgba(10,14,20,.65) 100%);
}

/* ============================================================
   CITA / MANIFIESTO
   ============================================================ */
.quote-mega{
  font-family:var(--display); font-weight:500; font-style:italic;
  font-size:clamp(26px, 3.4vw, 46px); line-height:1.2; letter-spacing:0;
  color:var(--papel); text-transform:none; max-width:26ch; margin:0 auto;
}
.quote-mega strong{ font-style:normal; font-weight:600; color:var(--cian); }
.quote-firma{
  margin-top:26px; font-family:var(--body); font-weight:600; font-size:10.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--niebla);
}

/* ============================================================
   FLOTA — composición asimétrica con foto sangrada al borde
   ============================================================ */
.flota-off{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:center; }
.flota-off .fo-texto{ padding-right:64px; }
.flota-off .fo-foto{
  position:relative; height:100%; min-height:520px;
  margin-right:calc((100vw - min(var(--maxw), 100vw - 56px)) / -2 - 28px);
  overflow:hidden;
}
.flota-off .fo-foto img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.85);
}
.flota-off .fo-foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--noche) 0%, rgba(10,14,20,.12) 30%, rgba(10,14,20,0) 60%);
}
.flota-off .ficha{ margin-top:30px; background:rgba(10,14,20,.4); }

/* ============================================================
   CLIENTES — logos fantasma sin cajas
   ============================================================ */
.logos-fila{
  display:flex; flex-wrap:wrap; gap:20px 56px; align-items:center; justify-content:center;
}
.logo-ghost{
  height:58px; width:auto;
  filter:grayscale(1) invert(.9) brightness(1.9) contrast(1.05);
  mix-blend-mode:screen; opacity:.62;
  transition:opacity .25s ease, filter .25s ease;
}
.logo-ghost:hover{ opacity:1; }

/* ============================================================
   OUTRO — cierre con imagen full-bleed
   ============================================================ */
.outro-full{
  position:relative; text-align:center; padding:150px 0 130px; overflow:hidden;
}
.outro-full > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.8);
}
.outro-full::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 480px at 50% 20%, rgba(27,110,158,.14), transparent 70%),
    linear-gradient(180deg, var(--noche) 0%, rgba(10,14,20,.72) 30%, rgba(10,14,20,.78) 70%, var(--noche) 100%);
}
.outro-full .wrap{ position:relative; z-index:2; }
.outro-full h2{ font-size:clamp(38px, 5.6vw, 72px); line-height:1.02; max-width:17ch; margin:0 auto; }
.outro-full p{ margin:24px auto 0; max-width:52ch; color:var(--plata); }
.outro-full .hero-ctas{ justify-content:center; margin-top:38px; }
.outro-full .eyebrow{ justify-content:center; }
.outro-full .markers{ margin-top:36px; }

/* ============================================================
   RESPONSIVE DEL TEMA
   ============================================================ */
@media (max-width:1020px){
  .svc-editorial{ grid-template-columns:1fr; }
  .svc-preview{ display:none; }
  .stats-strip{ grid-template-columns:1fr; gap:0; }
  .stats-strip .st{
    border-right:0; margin-right:0; padding:26px 0;
    border-bottom:1px solid var(--hair);
  }
  .stats-strip .st:last-child{ border-bottom:0; }
  .flota-off{ grid-template-columns:1fr; }
  .flota-off .fo-texto{ padding-right:0; }
  .flota-off .fo-foto{ margin:44px -28px 0; min-height:340px; }
  .cap-corner{ bottom:120px; right:20px; }
}
@media (max-width:600px){
  .h-mega{ font-size:clamp(40px, 11.5vw, 56px); }
  .hero-strip li{ flex:1 1 40%; border-right:0; padding:12px 0; margin-right:0; }
  .r-title{ font-size:20px; }
  .svc-row{ grid-template-columns:34px 1fr auto; padding:20px 2px; }
  .logo-ghost{ height:44px; }
}

/* ============================================================
   HERO TIPOGRÁFICO — sin foto (referencia: openers type-only de SEED)
   La página se abre con la afirmación, no con una imagen.
   ============================================================ */
.hero-tipo{
  position:relative; background:var(--noche); overflow:hidden;
  padding:calc(var(--bar-h) + var(--nav-h) + 92px) 0 0;
  min-height:88svh; display:flex; flex-direction:column; justify-content:space-between;
}
/* halo frío muy sutil: da profundidad sin introducir una foto */
.hero-tipo::before{
  content:""; position:absolute; top:-30%; left:50%; transform:translateX(-50%);
  width:120%; aspect-ratio:2/1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(53,182,218,.10), rgba(10,14,20,0) 62%);
}
.hero-tipo .wrap{ position:relative; z-index:1; width:100%; }
.ht-grid{ display:grid; grid-template-columns:1.4fr .6fr; gap:64px; align-items:end; }
.h-tipo{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(42px, 7.4vw, 104px); line-height:.97; letter-spacing:.005em;
  color:var(--papel);
}
.h-tipo .tt{ color:var(--niebla); }
.ht-side p{ color:var(--niebla); font-size:16px; line-height:1.85; }
.ht-side .hero-ctas{ margin-top:28px; }

/* pie del hero: datos separados por líneas finas, sin cajas */
.ht-hair{ border-top:1px solid var(--hair); margin-top:76px; }
.ht-hair ul{
  list-style:none; display:grid; grid-template-columns:repeat(4,1fr);
  max-width:var(--maxw); margin:0 auto; padding:0 28px;
}
.ht-hair li{ padding:24px 26px 30px 0; border-right:1px solid var(--hair); }
.ht-hair li:last-child{ border-right:0; padding-right:0; }
.ht-dato{
  display:block; font-family:var(--display); font-weight:600; font-size:clamp(22px,2.4vw,30px);
  line-height:1.05; color:var(--papel); letter-spacing:.015em;
}
.ht-label{
  display:block; font-family:var(--body); font-weight:500; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--niebla); margin-top:8px;
}
@media (max-width:900px){
  .ht-grid{ grid-template-columns:1fr; gap:32px; align-items:start; }
  .ht-hair ul{ grid-template-columns:repeat(2,1fr); }
  .ht-hair li{ padding:20px 20px 24px 0; }
  .ht-hair li:nth-child(2n){ border-right:0; padding-right:0; }
  .ht-hair li:nth-child(-n+2){ border-bottom:1px solid var(--hair); }
}
@media (max-width:560px){
  .hero-tipo{ min-height:auto; padding-top:calc(var(--bar-h) + var(--nav-h) + 56px); }
  .ht-hair ul{ grid-template-columns:1fr; }
  .ht-hair li{ border-right:0; padding-right:0; border-bottom:1px solid var(--hair); }
  .ht-hair li:last-child{ border-bottom:0; }
}

/* ============================================================
   HERO SPLIT ASIMÉTRICO — para las 5 verticales de servicio
   Texto a la izquierda, foto sangrada al borde derecho de la ventana.
   (referencia: hero de SEED · sección biohacking de MELØ)
   ============================================================ */
.hero-split{
  position:relative; background:var(--noche); overflow:hidden;
  padding-top:calc(var(--bar-h) + var(--nav-h));
}
.hs-grid{ display:grid; grid-template-columns:1.04fr .96fr; gap:0; align-items:stretch; }
.hs-texto{
  display:flex; flex-direction:column; justify-content:center;
  padding:84px 62px 84px 0; min-height:80svh;
}
.hs-texto .breadcrumb{ margin-bottom:26px; }
.h-split{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(34px, 5vw, 70px); line-height:1.0; letter-spacing:.008em; color:var(--papel);
}
.h-split .tt{ color:var(--niebla); }
.hs-texto .lead{ margin-top:24px; max-width:46ch; }
.hs-texto .hero-ctas{ margin-top:34px; }

/* datos de la operación: hairlines, nunca cajas */
.hs-datos{ display:flex; flex-wrap:wrap; margin-top:48px; padding-top:26px; border-top:1px solid var(--hair); }
.hs-datos > div{ padding:0 30px 0 0; margin-right:30px; border-right:1px solid var(--hair); }
.hs-datos > div:last-child{ border-right:0; margin-right:0; padding-right:0; }
.hs-dato{
  display:block; font-family:var(--display); font-weight:600;
  font-size:clamp(20px,2.1vw,27px); line-height:1.05; color:var(--papel); letter-spacing:.015em;
}
.hs-label{
  display:block; font-family:var(--body); font-weight:500; font-size:9.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--niebla); margin-top:7px;
}

/* la foto se escapa del contenedor y muere en el borde de la ventana */
.hs-foto{
  position:relative; overflow:hidden; min-height:80svh;
  margin-right:calc((100vw - min(var(--maxw), 100vw - 56px)) / -2 - 28px);
}
.hs-foto img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.85) contrast(1.04);
}
.hs-foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--noche) 0%, rgba(10,14,20,.20) 32%, rgba(10,14,20,0) 62%);
}
.hs-cap{
  position:absolute; right:28px; bottom:26px; z-index:2; text-align:right;
  font-family:var(--body); font-weight:500; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--plata); text-shadow:0 1px 12px rgba(10,14,20,.9);
}
.hs-cap em{ font-style:normal; color:var(--cian); }
.hs-cap span{ display:block; }
.hs-cap span + span{ margin-top:4px; color:var(--niebla); }

@media (max-width:900px){
  .hs-grid{ grid-template-columns:1fr; }
  .hs-texto{ padding:56px 0 44px; min-height:0; }
  .hs-foto{
    min-height:56svh; margin-right:calc((100vw - min(var(--maxw), 100vw - 56px)) / -2 - 28px);
    margin-left:calc((100vw - min(var(--maxw), 100vw - 56px)) / -2 - 28px);
  }
  .hs-foto::after{ background:linear-gradient(0deg, rgba(10,14,20,.5) 0%, rgba(10,14,20,0) 45%); }
}
@media (max-width:600px){
  .hs-datos > div{ padding-right:20px; margin-right:20px; }
  .hs-dato{ font-size:19px; }
}

/* ============================================================
   CINTA DEL HERO — texto descendente
   Los cuatro datos bajan en escalera de izquierda a derecha.
   Las reglas verticales se mantienen a la misma altura (flex las
   estira), así que lo que cae es el TEXTO, no la retícula.
   ============================================================ */
.hero-strip ul{ align-items:stretch; }
.hero-strip li{ padding-bottom:24px; }
.hero-strip li:nth-child(1){ padding-top:16px; }
.hero-strip li:nth-child(2){ padding-top:40px; }
.hero-strip li:nth-child(3){ padding-top:64px; }
.hero-strip li:nth-child(4){ padding-top:88px; }

/* el dato también se afina a medida que desciende: la escalera se lee
   como jerarquía, no como error de alineación */
.hero-strip li:nth-child(2) .hs-dato{ font-size:18px; }
.hero-strip li:nth-child(3) .hs-dato{ font-size:17px; color:var(--papel); }
.hero-strip li:nth-child(4) .hs-dato{ font-size:16px; color:var(--papel); }

@media (prefers-reduced-motion:no-preference){
  .hero-strip li{ animation:cintaCae .7s cubic-bezier(.22,.61,.36,1) both; }
  .hero-strip li:nth-child(1){ animation-delay:.15s; }
  .hero-strip li:nth-child(2){ animation-delay:.27s; }
  .hero-strip li:nth-child(3){ animation-delay:.39s; }
  .hero-strip li:nth-child(4){ animation-delay:.51s; }
  @keyframes cintaCae{ from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:none; } }
}

/* en pantallas angostas la escalera no cabe: vuelve a la lectura plana */
@media (max-width:900px){
  .hero-strip li:nth-child(n){ padding-top:16px; padding-bottom:16px; }
  .hero-strip li:nth-child(n) .hs-dato{ font-size:17px; color:var(--papel); }
}

/* ============================================================
   CINTA DEL HERO v2 — sin divisiones
   Se quitan las reglas verticales: la escalera y el aire hacen
   todo el trabajo de separación. El descenso se amplía y el dato
   se apaga a medida que cae, para que la diagonal se lea sola.
   ============================================================ */
.hero-strip{
  border-top:0;
  background:linear-gradient(180deg, rgba(10,14,20,0) 0%, rgba(10,14,20,.55) 42%, rgba(10,14,20,.86) 100%);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.hero-strip ul{
  gap:clamp(22px, 4.6vw, 78px);
  padding-bottom:10px;
}
.hero-strip li{
  flex:0 1 auto;
  border-right:0; margin-right:0; padding-right:0;
  gap:7px;
}

/* la caída, más larga */
.hero-strip li:nth-child(1){ padding-top:0;    padding-bottom:26px; }
.hero-strip li:nth-child(2){ padding-top:34px; padding-bottom:26px; }
.hero-strip li:nth-child(3){ padding-top:68px; padding-bottom:26px; }
.hero-strip li:nth-child(4){ padding-top:102px; padding-bottom:26px; }

/* el dato se encoge y se apaga conforme desciende */
.hero-strip li:nth-child(1) .hs-dato{ font-size:clamp(21px,2.4vw,31px); color:var(--papel); }
.hero-strip li:nth-child(2) .hs-dato{ font-size:clamp(19px,2.1vw,27px); color:var(--papel); }
.hero-strip li:nth-child(3) .hs-dato{ font-size:clamp(18px,1.9vw,23px); color:var(--plata); }
.hero-strip li:nth-child(4) .hs-dato{ font-size:clamp(16px,1.7vw,20px); color:var(--plata); }
/* la cascada desciende en tamano, nunca en legibilidad */

@media (max-width:900px){
  .hero-strip{ background:rgba(10,14,20,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  .hero-strip ul{ gap:0; }
  .hero-strip li:nth-child(n){ padding-top:14px; padding-bottom:14px; }
  .hero-strip li:nth-child(n) .hs-dato{ font-size:17px; color:var(--papel); }
  .hero-strip li:nth-child(n) .hs-label{ color:var(--niebla); }
}

/* ============================================================
   FICHA EN PROSA — los datos viven dentro de la frase
   Reemplaza a la tabla .ficha en la sección de flota de la home.
   ============================================================ */
.ficha-prosa{
  font-family:var(--display); font-weight:500; text-transform:none;
  font-size:clamp(20px, 2.2vw, 31px); line-height:1.55; letter-spacing:.01em;
  color:var(--niebla); max-width:24ch; margin-top:34px;
}
.ficha-prosa b{ font-weight:600; color:var(--papel); }
.ficha-prosa i{ font-style:normal; color:var(--cian); font-size:.6em; margin-left:2px; }
@media (max-width:600px){ .ficha-prosa{ max-width:none; } }


/* ============================================================
   PROGRAMA DE MANTENIMIENTO — escala de intervalos
   La distancia entre marcas es proporcional al logaritmo de las
   horas de vuelo: el vacío entre una parada y la siguiente ES el dato.
   ============================================================ */
/* ============================================================
   Programa de mantenimiento — el programa como escala de intervalos
   El eje es una sola hairline; la DISTANCIA entre marcas es el dato:
   cada tramo mide el Δlog10 de las horas de vuelo entre una marca y
   la siguiente. Quitar el eje deja el bloque sin significado.
   ============================================================ */
.prog-programa{
  /* escala del eje: rem por década (x10) de horas de vuelo */
  --prog-dec:6.2rem;
  --prog-col:8.5rem;   /* columna de coordenadas */
  --prog-gut:2.6rem;   /* canal por donde corre el eje */
  --prog-lh:1.45rem;   /* interlínea de la coordenada */
  --prog-ojo:.62rem;   /* altura de la marca dentro de la línea */
  --prog-tw:.95rem;    /* largo del travesaño de la marca */
  /* tramos reales: Δlog10 entre marcas (1 h a 4 h, 4 h a 100 h,
     100 a 300, 300 a 1.200) */
  --prog-t1:calc(var(--prog-dec) * .60);
  --prog-t2:calc(var(--prog-dec) * 1.40);
  --prog-t3:calc(var(--prog-dec) * .48);
  --prog-t4:calc(var(--prog-dec) * .60);
  /* el bloque mide lo que mide su composición: el encabezado cierra
     justo donde termina la columna de texto */
  max-width:calc(var(--prog-col) + var(--prog-gut) + 27rem);
  font-family:var(--body,"Poppins",sans-serif);
  color:var(--plata,#C9D2DB);
}

/* rótulo y emisores comparten línea de base: nada apilado encima de nada */
.prog-encabezado{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:.4rem 1.6rem;
  margin:0 0 3.2rem;
}
.prog-rotulo{
  margin:0; font-family:var(--display,"Fraunces",Georgia,serif); font-weight:500;
  font-size:1.02rem; line-height:1.35; letter-spacing:.01em;
  text-transform:none;   /* si no se declara, hereda el uppercase de la regla global h3 */
  color:var(--plata,#C9D2DB);
}
.prog-modelo{ color:var(--plata,#C9D2DB); }
.prog-punto{ color:var(--cian,#35B6DA); padding:0 .45em; }
.prog-emisores{
  margin:0; font-family:var(--display,"Fraunces",Georgia,serif); font-weight:500;
  text-transform:none; font-size:.8rem; letter-spacing:.012em; white-space:nowrap;
  color:var(--niebla,#8B99A8);
}
.prog-emisores .prog-punto{ padding:0 .3em; }

/* ---- el eje ---- */
.prog-escala{
  list-style:none; margin:0; padding:0 0 2.9rem; position:relative;
}
.prog-escala::before{
  content:""; position:absolute; top:0; bottom:0; width:1px;
  left:calc(var(--prog-col) + var(--prog-gut) / 2);
  background:linear-gradient(180deg,
    transparent 0,
    var(--hair,rgba(139,153,168,.22)) .45rem,
    var(--hair,rgba(139,153,168,.22)) calc(100% - 2.9rem),
    transparent 100%);
}
.prog-parada{ display:flex; align-items:flex-start; }

/* la altura de cada tramo ES el intervalo */
.prog-p1{ min-height:var(--prog-t1); }
.prog-p2{ min-height:var(--prog-t2); }

.prog-coord,
.prog-coords{ flex:0 0 var(--prog-col); }
.prog-coord{
  position:relative; margin:0; text-align:right;
  font-family:var(--display,"Fraunces",Georgia,serif); font-weight:500;
  font-size:.95rem; line-height:var(--prog-lh);
  font-variant-numeric:tabular-nums; color:var(--plata,#C9D2DB);
}
/* travesaño de la marca: llega hasta el eje */
.prog-coord::before{
  content:""; position:absolute; height:1px; width:var(--prog-tw);
  top:var(--prog-ojo); right:calc(-1 * var(--prog-gut) / 2);
  background:var(--hair,rgba(139,153,168,.22));
}
/* ojo de la marca: 3px centrados sobre la línea del eje */
.prog-coord::after{
  content:""; position:absolute; width:3px; height:3px;
  top:calc(var(--prog-ojo) - 1px);
  right:calc(-1 * var(--prog-gut) / 2 - 2px);
  background:var(--cian,#35B6DA);
}
/* line-height:1 para que la unidad no engorde la caja de línea:
   si la engorda, las distancias del eje dejan de ser exactas */
.prog-u{
  color:var(--cian,#35B6DA); font-size:.6em; line-height:1;
  letter-spacing:.1em; padding-left:.2em;
}

/* las tres marcas de las inspecciones programadas, cosidas por
   un tramo de eje encendido que cae exactamente sobre la hairline */
.prog-coords{ position:relative; }
.prog-coords::before{
  content:""; position:absolute; width:1px;
  top:var(--prog-ojo);
  bottom:calc(var(--prog-lh) - var(--prog-ojo));
  right:calc(-1 * var(--prog-gut) / 2 - 1px);
  background:var(--cian,#35B6DA); opacity:.55;
}
.prog-c2{ margin-top:calc(var(--prog-t3) - var(--prog-lh)); }
.prog-c3{ margin-top:calc(var(--prog-t4) - var(--prog-lh)); }

/* ---- lo que dice cada marca: el nombre entra EN la línea, no encima ---- */
.prog-carga{
  flex:1 1 auto; max-width:27rem;
  margin-left:var(--prog-gut);
  font-size:.87rem; line-height:1.62;
}
.prog-nombre{
  display:inline; margin:0 .5em 0 0;
  font-family:var(--display,"Fraunces",Georgia,serif); font-weight:600;
  font-size:.97rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--papel,#F4F7FA);
}
.prog-nota{
  display:inline; margin:0; font-weight:400; color:var(--niebla,#8B99A8);
}

/* ---- lo que no cabe en el eje ---- */
.prog-corte{
  height:1px; width:2.75rem; background:var(--hair,rgba(139,153,168,.22));
  margin:.4rem 0 1.5rem calc(var(--prog-col) + var(--prog-gut));
}
.prog-constantes{
  margin:0 0 0 calc(var(--prog-col) + var(--prog-gut));
  max-width:36rem; font-size:.9rem; font-weight:400; line-height:1.78;
  color:var(--niebla,#8B99A8);
}
.prog-term{
  font-family:var(--display,"Fraunces",Georgia,serif); font-weight:600; font-size:.88em;
  text-transform:uppercase; letter-spacing:.07em; color:var(--papel,#F4F7FA);
}
.prog-dato{ color:var(--plata,#C9D2DB); font-weight:500; }

@media (max-width:760px){
  .prog-programa{
    --prog-dec:7rem;
    --prog-col:5.6rem;
    --prog-gut:1.2rem;
    --prog-lh:1.3rem;
    --prog-ojo:.55rem;
    --prog-tw:.5rem;
  }
  /* el encabezado se vuelve una sola línea corrida: el rótulo y los
     emisores siguen en el mismo párrafo, nunca uno debajo del otro */
  .prog-encabezado{ display:block; margin-bottom:2.4rem; }
  .prog-rotulo{ display:inline; font-size:1.1rem; }
  .prog-emisores{ display:inline; font-size:.9rem; }
  .prog-emisores::before{
    content:"·"; color:var(--cian,#35B6DA); padding:0 .45em;
  }
  .prog-escala{ padding-bottom:2.4rem; }
  .prog-coord{ font-size:.8rem; }
  .prog-carga{ font-size:.8rem; line-height:1.55; }
  .prog-nombre{ font-size:.84rem; letter-spacing:.06em; }
  .prog-corte{ margin:.2rem 0 1.3rem 0; }
  .prog-constantes{ margin-left:0; font-size:.85rem; line-height:1.72; }
}
@media (max-width:360px){
  .prog-programa{ --prog-col:5rem; --prog-gut:1rem; }
  .prog-carga{ font-size:.77rem; }
}

/* ============================================================
   CANALES DE CONTACTO — la lista es el hero
   El tipo de canal va en la MISMA línea base que el dato, a la
   derecha y en gris: nunca encima (eso sería un eyebrow).
   ============================================================ */
.hero-canales{
  position:relative; background:var(--noche); overflow:hidden;
  padding:calc(var(--bar-h) + var(--nav-h) + 84px) 0 0;
}
.hero-canales::before{
  content:""; position:absolute; top:-34%; left:50%; transform:translateX(-50%);
  width:120%; aspect-ratio:2/1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(53,182,218,.09), rgba(10,14,20,0) 62%);
}
.hero-canales .wrap{ position:relative; z-index:1; }
.hero-canales .lead{ max-width:52ch; margin-top:22px; }

.canal-lista{ margin-top:64px; border-top:1px solid var(--hair); }
.cl-fila{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px 32px;
  flex-wrap:wrap; padding:30px 4px 28px; border-bottom:1px solid var(--hair);
  text-decoration:none; color:var(--papel); position:relative;
  transition:padding-left .35s cubic-bezier(.22,.61,.36,1);
}
.cl-fila::after{
  content:""; position:absolute; left:0; right:100%; bottom:-1px; height:1px;
  background:var(--cian); transition:right .5s cubic-bezier(.22,.61,.36,1);
}
.cl-fila:hover{ padding-left:14px; }
.cl-fila:hover::after{ right:0; }
.cl-fila:focus-visible{ outline:1px solid var(--cian); outline-offset:6px; }
.cl-valor{
  font-family:var(--display); font-weight:500; font-size:clamp(21px,2.6vw,34px);
  line-height:1.1; letter-spacing:.01em; color:var(--papel); transition:color .3s ease;
}
.cl-fila:hover .cl-valor{ color:var(--cian); }
.cl-glosa{
  font-family:var(--body); font-weight:400; font-size:13.5px; line-height:1.65;
  color:var(--niebla); max-width:44ch; text-align:right; flex:1 1 300px;
}
@media (max-width:700px){
  .cl-fila{ flex-direction:column; align-items:flex-start; gap:9px; padding:24px 2px 22px; }
  .cl-glosa{ text-align:left; flex:none; }
}

/* la cinta del hero pasó a cinco datos: se extiende la escalera y se
   comprime el paso para que la caída total no crezca */
.hero-strip li:nth-child(1){ padding-top:0;    }
.hero-strip li:nth-child(2){ padding-top:26px; }
.hero-strip li:nth-child(3){ padding-top:52px; }
.hero-strip li:nth-child(4){ padding-top:78px; }
.hero-strip li:nth-child(5){ padding-top:104px; padding-bottom:26px; }
.hero-strip li:nth-child(5) .hs-dato{ font-size:clamp(15px,1.6vw,19px); color:var(--plata); }

@media (max-width:900px){
  .hero-strip li:nth-child(n){ padding-top:14px; padding-bottom:14px; }
  .hero-strip li:nth-child(n) .hs-dato{ font-size:17px; color:var(--papel); }
}

/* ============================================================
   HERO SOBRIO — subsecciones de menor jerarquía (cumplimiento).
   Sin foto, sin franja de datos: la página abre en silencio.
   ============================================================ */
.hero-sobrio{
  position:relative; background:var(--noche);
  padding:calc(var(--bar-h) + var(--nav-h) + 96px) 0 0;
}
.hero-sobrio::before{
  content:""; position:absolute; inset:0 auto auto 0; width:100%; height:100%;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(53,182,218,.045), rgba(10,14,20,0) 58%);
}
.hero-sobrio .wrap{ position:relative; z-index:1; }
.h-sobrio{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(33px, 4.9vw, 68px); line-height:1.02; letter-spacing:.012em;
  color:var(--papel); max-width:16ch;
}
.h-sobrio .tt{ color:var(--niebla); }
.hero-sobrio .lead{
  max-width:64ch; margin-top:30px; font-size:16.5px; line-height:1.85; color:var(--plata);
}
.hero-sobrio .hero-ctas{ margin-top:36px; }
.hero-sobrio .cierre{ padding-bottom:40px; }

/* marco normativo: tres renglones separados por filete, sin cajas */
.marco{ margin-top:78px; border-top:1px solid var(--hair); }
.marco .m-fila{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px 40px;
  flex-wrap:wrap; padding:26px 2px 24px; border-bottom:1px solid var(--hair);
}
.marco .m-sigla{
  font-family:var(--display); font-weight:600; text-transform:none;
  font-size:clamp(19px,2.1vw,27px); line-height:1.1; color:var(--papel);
  letter-spacing:.01em; flex:0 0 auto;
}
.marco .m-glosa{
  font-family:var(--body); font-weight:400; font-size:13.5px; line-height:1.7;
  color:var(--niebla); max-width:52ch; text-align:right; flex:1 1 320px;
}
@media (max-width:700px){
  .marco .m-glosa{ text-align:left; flex-basis:100%; }
  .h-sobrio{ max-width:none; }
}

/* desvío al canal correcto cuando el reporte no es de ética */
.desvio{
  margin-top:54px; padding-top:26px; border-top:1px solid var(--hair);
  color:var(--niebla); font-size:14.5px; line-height:1.8; max-width:62ch;
}
.desvio a{ color:var(--cian); text-decoration:none; border-bottom:1px solid rgba(53,182,218,.35); }
.desvio a:hover{ border-bottom-color:var(--cian); }

/* el correo de cumplimiento es largo: que nunca desborde */
#denuncia .cl-valor{ font-size:clamp(17px, 2.1vw, 29px); word-break:break-word; }

/* cierre sin fotografia: el degradado sustituye a la imagen de fondo */
.outro-full:not(:has(> img)){
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(53,182,218,.10), rgba(10,14,20,0) 60%),
    linear-gradient(180deg, var(--hangar), var(--noche));
}
.outro-full:not(:has(> img))::after{ display:none; }

/* ===== VIDEOS DE OPERACIÓN =====
   Grabados con celular (478–576 px de ancho): se muestran a un tamaño que
   respeta esa resolución, en vertical, silenciados y en bucle. */
figure.foto-video{ width:100%; max-width:460px; justify-self:center; background:var(--hangar); }
figure.foto video{
  position:relative; z-index:1; display:block;
  width:100%; height:100%; object-fit:cover; cursor:pointer;
}
/* video a cuadro completo (9:16): cuando lo importante está en el borde inferior */
figure.foto-video--completo{ max-width:380px; }

/* ===== Franja de datos PLANA (Seguridad): sin escalones, una sola fila ===== */
.hero-strip--plana ul{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; align-items:start; }
.hero-strip--plana li:nth-child(n){ padding-top:0; padding-bottom:26px; margin-right:0; }
.hero-strip--plana li:nth-child(n) .hs-dato{ font-size:clamp(16px,1.55vw,22px); color:var(--papel); white-space:nowrap; }
.hero-strip--plana li:nth-child(n) .hs-label{ color:var(--niebla); }
@media (max-width:760px){ .hero-strip--plana ul{ grid-auto-flow:row; grid-template-columns:1fr 1fr; } }

/* ===== Canal de reporte: el titular arriba, alineado con el inicio del formulario ===== */
#reporte .split{ align-items:start; }
/* imagen que llena el hueco junto al formulario: solo existe cuando van lado a lado */
@media (max-width:1020px){ .foto-hueco{ display:none; } }

/* ============================================================
   SECTORES — una foto fija junto a la lista (reemplaza el panel
   que cambiaba de imagen al pasar el mouse). En celular va debajo.
   ============================================================ */
.svc-foto{ margin:0; position:sticky; top:calc(var(--bar-h) + var(--nav-h) + 32px); aspect-ratio:4/4.7; overflow:hidden; background:var(--hangar); }
.svc-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:1020px){ .svc-foto{ position:static; margin-top:36px; aspect-ratio:4/3.6; } }

/* ============================================================
   DATOS DE INICIO — cifras en columna junto al video de carga externa
   ============================================================ */
.datos-split{ display:grid; grid-template-columns:1.2fr .8fr; gap:72px; align-items:center; }
.stats-strip--col{ grid-template-columns:1fr; }
.stats-strip--col .st{ border-right:0; margin-right:0; padding:22px 0; border-bottom:1px solid var(--hair); }
.stats-strip--col .st:last-child{ border-bottom:0; }
@media (max-width:900px){ .datos-split{ grid-template-columns:1fr; gap:40px; } }

/* ============================================================
   HERO TIPOGRÁFICO CON FOTO — Quiénes somos (los pilotos en cabina)
   ============================================================ */
.ht-grid--foto{ grid-template-columns:1.2fr .8fr; gap:64px; align-items:end; padding-bottom:72px; }
.ht-grid--foto .h-tipo{ font-size:clamp(40px,5.4vw,82px); }
.ht-grid--foto .ht-side{ margin-top:40px; max-width:540px; }
.ht-foto{ margin:0; aspect-ratio:4/5; overflow:hidden; background:var(--hangar); }
.ht-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:900px){ .ht-grid--foto{ grid-template-columns:1fr; gap:36px; } .ht-foto{ max-width:460px; } }

/* ============================================================
   HERO DE INICIO SIN FOTO — la afirmación sola sobre la noche,
   con el mismo halo frío del hero tipográfico de Quiénes somos
   ============================================================ */
.hero-full--tipo{ min-height:auto; padding-top:calc(var(--bar-h) + var(--nav-h) + 80px); }
.hero-full--tipo::after{ display:none; }
.hero-full--tipo::before{
  content:""; position:absolute; top:-30%; left:50%; transform:translateX(-50%);
  width:120%; aspect-ratio:2/1; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(53,182,218,.10), rgba(10,14,20,0) 62%);
}