/* ==========================================================================
   EVENTOS KM — Sistema de diseño
   Interpretación simultánea y producción técnica · Desde 1987
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Tinta: la noche de un salón antes de que entre el público */
  --tinta:      #090E1A;
  --tinta-2:    #0F1728;
  --tinta-3:    #16203A;
  --tinta-4:    #1E2B49;

  /* Marfil: el papel del programa oficial */
  --marfil:     #F8F6F1;
  --marfil-2:   #EFEBE2;
  --marfil-3:   #DFD9CC;

  /* Oro institucional: la placa, el sello, el podio */
  --oro:        #C9A961;
  --oro-alto:   #E4D0A0;
  --oro-bajo:   #8E7538;

  /* Señal: el canal en vivo */
  --senal:      #4FB3A8;
  --senal-alto: #7FD6CC;

  --texto:      #F8F6F1;
  --texto-sec:  #A0AABF;
  --texto-ter:  #6C7690;

  --linea:      rgba(201,169,97,.20);
  --linea-sutil:rgba(160,170,191,.14);

  --ancho:      1240px;
  --ancho-txt:  62ch;
  --r:          4px;
  --r-lg:       10px;

  --fd: 'Archivo', system-ui, sans-serif;               /* Display institucional */
  --fg: 'Inter', system-ui, -apple-system, sans-serif;  /* Interfaz y lectura */
  --fm: 'IBM Plex Mono', ui-monospace, monospace;       /* Datos y técnica  */

  --nav-h: 74px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}
body{
  font-family:var(--fg);
  background:var(--tinta);
  color:var(--texto);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  overflow-wrap:break-word;
}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--oro);color:var(--tinta)}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- 3. TIPOGRAFÍA ---------- */
.display{
  font-family:var(--fd);
  font-weight:500;
  line-height:1.14;
  letter-spacing:-.022em;
  text-wrap:balance;
}
.d-xxl{font-size:clamp(1.9rem, 4.6vw, 3.6rem)}
.d-xl {font-size:clamp(1.8rem, 3.6vw, 2.75rem)}
.d-lg {font-size:clamp(1.6rem, 2.9vw, 2.25rem)}
.d-md {font-size:clamp(1.35rem, 2.1vw, 1.7rem)}
/* El acento va en oro, sin cursiva: en una grotesca la itálica pierde fuerza */
.display em{font-style:normal;color:var(--oro-alto)}

.rotulo{
  font-family:var(--fm);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--oro);
  display:flex;
  align-items:center;
  gap:.85em;
}
.rotulo::before{
  content:"";
  width:26px;height:1px;
  background:var(--oro);
  flex:none;
}
.rotulo.centro{justify-content:center}
.rotulo.limpio::before{display:none}

.bajada{
  font-size:clamp(1.02rem,1.35vw,1.18rem);
  color:var(--texto-sec);
  line-height:1.72;
  max-width:var(--ancho-txt);
  text-wrap:pretty;
}
.bajada strong{color:var(--marfil);font-weight:500}

.cuerpo p + p{margin-top:1.1em}
.cuerpo{color:var(--texto-sec);max-width:var(--ancho-txt);text-wrap:pretty}
.cuerpo strong{color:var(--marfil);font-weight:500}

.mono{font-family:var(--fm);font-size:.78rem;letter-spacing:.06em;color:var(--texto-ter)}

/* En pantallas chicas los saltos de línea manuales desbordan la caja:
   dejamos que el texto fluya solo y los reactivamos en escritorio. */
@media(max-width:719px){
  .display br,
  .servicio-txt h2 br,
  .cita blockquote br,
  .liderazgo-txt h2 br,
  .bajada br{display:none}
}

/* ---------- 4. ESTRUCTURA ---------- */
.env{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:clamp(20px,5vw,44px)}
.env-angosto{max-width:900px}
section{position:relative}
.bloque{padding-block:clamp(72px,10vw,140px)}
.bloque-corto{padding-block:clamp(52px,6vw,84px)}
.claro{background:var(--marfil);color:var(--tinta)}
.claro .bajada,.claro .cuerpo{color:#4A5468}
.claro .bajada strong,.claro .cuerpo strong{color:var(--tinta)}
.claro .rotulo{color:var(--oro-bajo)}
.claro .rotulo::before{background:var(--oro-bajo)}
.claro .mono{color:#7A8496}
.claro .display em{color:var(--oro-bajo)}
.velo{background:var(--tinta-2)}

.regla{height:1px;background:var(--linea-sutil);border:0}
.claro .regla{background:rgba(9,14,26,.12)}

/* Encabezado de sección reutilizable */
.enc{display:flex;flex-direction:column;gap:20px;margin-bottom:clamp(40px,5vw,64px)}
.enc.centro{align-items:center;text-align:center}
.enc.centro .bajada{margin-inline:auto}
.enc-fila{display:grid;grid-template-columns:1fr;gap:24px;align-items:end}
@media(min-width:900px){
  .enc-fila{grid-template-columns:1.15fr .85fr;gap:56px}
}

/* ---------- 5. MOTIVO: CANALES DE AUDIO ---------- */
/* Barras verticales que evocan los canales de idioma de una consola */
.canales{display:flex;align-items:flex-end;gap:3px;height:22px}
.canales span{
  width:3px;background:var(--oro);border-radius:2px;
  animation:canal 1.5s ease-in-out infinite;
  transform-origin:bottom;
}
.canales span:nth-child(1){height:40%;animation-delay:0s}
.canales span:nth-child(2){height:80%;animation-delay:.18s;background:var(--senal)}
.canales span:nth-child(3){height:55%;animation-delay:.36s}
.canales span:nth-child(4){height:100%;animation-delay:.12s;background:var(--senal)}
.canales span:nth-child(5){height:65%;animation-delay:.42s}
@keyframes canal{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

.envivo{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--fm);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--senal-alto);
  padding:6px 13px;border-radius:99px;
  background:rgba(79,179,168,.10);
  border:1px solid rgba(79,179,168,.28);
}
.envivo::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--senal);box-shadow:0 0 10px var(--senal);
  animation:latido 1.6s ease-in-out infinite;
}
@keyframes latido{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}

/* ---------- 6. BOTONES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;
  font-size:.9rem;font-weight:600;letter-spacing:.01em;
  border-radius:var(--r);
  transition:all .3s var(--ease);
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}
.btn svg{flex:none;transition:transform .3s var(--ease)}
.btn-oro{background:var(--oro);color:var(--tinta);font-weight:650}
.btn-oro:hover{background:var(--oro-alto);transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(201,169,97,.5)}
.btn-linea{border:1px solid var(--linea);color:var(--texto)}
.btn-linea:hover{border-color:var(--oro);background:rgba(201,169,97,.07);transform:translateY(-2px)}
.claro .btn-linea{border-color:rgba(9,14,26,.2);color:var(--tinta)}
.claro .btn-linea:hover{border-color:var(--oro-bajo);background:rgba(201,169,97,.09)}
.btn-tinta{background:var(--tinta);color:var(--marfil)}
.btn-tinta:hover{background:var(--tinta-3);transform:translateY(-2px)}
.btn:hover svg{transform:translateX(3px)}
.btn-wa{background:#25D366;color:#062E14;font-weight:650}
.btn-wa:hover{background:#3ee27a;transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(37,211,102,.45)}

.enlace{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--fm);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oro);
  padding-bottom:4px;
  border-bottom:1px solid rgba(201,169,97,.32);
  transition:all .3s var(--ease);
}
.enlace:hover{border-color:var(--oro);gap:13px}
.claro .enlace{color:var(--oro-bajo);border-color:rgba(142,117,56,.35)}

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

/* ---------- 7. NAVEGACIÓN ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.fija{
  background:rgba(9,14,26,.86);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--linea-sutil);
}
.nav .env{display:flex;align-items:center;justify-content:space-between;gap:28px;width:100%}

.marca{display:flex;align-items:center;gap:12px;flex:none}
.marca-mono{
  width:54px;height:45px;flex:none;
  color:var(--oro);
  transition:color .35s var(--ease),transform .5s var(--ease);
}
.marca-mono svg{width:100%;height:100%}
.marca:hover .marca-mono{color:var(--oro-alto);transform:rotate(-4deg)}
.claro .marca-mono{color:var(--oro-bajo)}
.marca-txt{display:flex;flex-direction:column;line-height:1.1}
.marca-txt b{font-family:var(--fd);font-weight:600;font-size:1.06rem;letter-spacing:.005em}
.marca-txt small{font-family:var(--fm);font-size:.55rem;letter-spacing:.26em;text-transform:uppercase;color:var(--texto-ter)}

.menu{display:none;align-items:center;gap:26px}
@media(min-width:1160px){.menu{display:flex}}
.menu a{
  font-size:.86rem;font-weight:450;color:var(--texto-sec);
  position:relative;padding-block:6px;
  transition:color .25s var(--ease);
}
.menu a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--oro);transition:width .3s var(--ease);
}
.menu a:hover,.menu a[aria-current="page"]{color:var(--marfil)}
.menu a:hover::after,.menu a[aria-current="page"]::after{width:100%}

.nav-cta{display:none}
@media(min-width:1160px){.nav-cta{display:inline-flex;padding:11px 20px;font-size:.82rem}}

.hamburguesa{display:grid;place-items:center;width:42px;height:42px;flex:none;border:1px solid var(--linea-sutil);border-radius:var(--r)}
@media(min-width:1160px){.hamburguesa{display:none}}
.hamburguesa span{display:block;width:18px;height:1.5px;background:var(--marfil);transition:transform .3s var(--ease),opacity .2s}
.hamburguesa span+span{margin-top:5px}
body.menu-abierto .hamburguesa span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-abierto .hamburguesa span:nth-child(2){opacity:0}
body.menu-abierto .hamburguesa span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.panel{
  position:fixed;inset:var(--nav-h) 0 0;z-index:99;
  background:var(--tinta);
  padding:36px clamp(20px,5vw,44px) 44px;
  display:flex;flex-direction:column;gap:4px;
  transform:translateY(-12px);opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  overflow-y:auto;
}
body.menu-abierto .panel{opacity:1;transform:none;pointer-events:auto;visibility:visible}
body.menu-abierto{overflow:hidden}
.panel a{
  font-family:var(--fd);font-weight:500;font-size:1.5rem;letter-spacing:-.02em;
  padding:14px 0;border-bottom:1px solid var(--linea-sutil);
  display:flex;align-items:baseline;gap:16px;
  transition:color .25s,padding-left .25s var(--ease);
}
.panel a:hover{color:var(--oro);padding-left:8px}
.panel a i{font-family:var(--fm);font-size:.62rem;font-style:normal;color:var(--oro);letter-spacing:.1em}
.panel .btn{margin-top:28px;align-self:flex-start}

/* ---------- 8. PORTADA ---------- */
.portada{
  position:relative;
  min-height:min(100svh,880px);
  display:flex;align-items:flex-end;
  padding-top:calc(var(--nav-h) + 60px);
  padding-bottom:clamp(40px,6vw,72px);
  overflow:hidden;
}
.portada-fondo{position:absolute;inset:0;z-index:0;overflow:hidden}
.portada-fondo picture{display:block;width:100%;height:100%}
.portada-fondo img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
@media(max-width:719px){.portada-fondo img{object-position:center 30%}}
.portada-fondo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(9,14,26,.82) 0%, rgba(9,14,26,.55) 32%, rgba(9,14,26,.90) 78%, var(--tinta) 100%),
    linear-gradient(90deg, rgba(9,14,26,.88) 0%, rgba(9,14,26,.30) 62%, rgba(9,14,26,.60) 100%);
}
.portada .env{position:relative;z-index:2;width:100%}
.portada-txt{max-width:960px;display:flex;flex-direction:column;gap:clamp(20px,2.6vw,30px)}
.portada h1{margin-block:4px}
.portada .bajada{max-width:56ch}

.portada-pie{
  position:relative;z-index:2;
  border-top:1px solid var(--linea);
  margin-top:clamp(36px,5vw,56px);
  padding-top:26px;
  display:grid;gap:26px;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:820px){.portada-pie{grid-template-columns:repeat(4,1fr);gap:32px}}
.dato b{
  display:block;
  font-family:var(--fd);font-weight:600;
  font-size:clamp(1.7rem,2.8vw,2.3rem);
  line-height:1;color:var(--oro-alto);
  letter-spacing:-.022em;
}
.dato span{
  display:block;margin-top:8px;
  font-family:var(--fm);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto-ter);line-height:1.5;
}

/* ---------- 9. CINTA DE IDIOMAS ---------- */
.cinta{
  border-block:1px solid var(--linea-sutil);
  padding-block:20px;
  overflow:hidden;
  background:var(--tinta-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.cinta-pista{display:flex;width:max-content;animation:desplazar 46s linear infinite}
.cinta:hover .cinta-pista{animation-play-state:paused}
.cinta-grupo{display:flex;align-items:center;flex:none}
.cinta-grupo span{
  font-family:var(--fd);font-size:1.32rem;
  color:var(--texto-ter);
  padding-inline:26px;
  white-space:nowrap;
  transition:color .3s;
}
.cinta-grupo span:hover{color:var(--oro-alto)}
.cinta-grupo i{color:var(--oro);opacity:.5;font-style:normal;font-size:.6rem}
@keyframes desplazar{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 10. REJILLAS ---------- */
.rejilla{display:grid;gap:clamp(20px,2.4vw,30px)}
.r2{grid-template-columns:1fr}
.r3{grid-template-columns:1fr}
.r4{grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.r2{grid-template-columns:repeat(2,1fr)}.r3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.r3{grid-template-columns:repeat(3,1fr)}.r4{grid-template-columns:repeat(4,1fr)}}

/* ---------- 11. TARJETAS ---------- */
.ficha{
  background:var(--tinta-2);
  border:1px solid var(--linea-sutil);
  border-radius:var(--r-lg);
  padding:clamp(26px,3vw,34px);
  display:flex;flex-direction:column;gap:15px;
  position:relative;overflow:hidden;
  transition:border-color .4s var(--ease),transform .4s var(--ease),background .4s;
}
.ficha::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--oro),transparent);
  opacity:0;transition:opacity .45s var(--ease);
}
.ficha:hover{border-color:var(--linea);transform:translateY(-4px);background:var(--tinta-3)}
.ficha:hover::before{opacity:1}
.ficha-num{
  font-family:var(--fm);font-size:.68rem;letter-spacing:.2em;
  color:var(--oro);
}
.ficha h3{font-family:var(--fd);font-weight:600;font-size:1.15rem;line-height:1.32;letter-spacing:-.012em}
.ficha p{color:var(--texto-sec);font-size:.94rem;line-height:1.68;text-wrap:pretty}
.ficha .icono{color:var(--oro);margin-bottom:2px}
.claro .ficha{background:#fff;border-color:rgba(9,14,26,.10)}
.claro .ficha:hover{background:#fff;border-color:rgba(201,169,97,.5);box-shadow:0 20px 50px -28px rgba(9,14,26,.34)}
.claro .ficha p{color:#4A5468}
.claro .ficha-num,.claro .ficha .icono{color:var(--oro-bajo)}

/* Tarjeta clara dentro de una sección oscura (y viceversa) */
.ficha-clara{background:var(--marfil)!important;border-color:rgba(9,14,26,.12)}
.ficha-clara h3,.ficha-clara b{color:var(--tinta)}
.ficha-clara p{color:#4A5468}
.ficha-clara .ficha-num{color:var(--oro-bajo)}
.ficha-clara:hover{background:#fff!important}

/* ---------- SERVICIO: bloques alternados texto / imagen ---------- */
.servicio{
  display:grid;gap:clamp(28px,4vw,60px);align-items:center;
  padding-block:clamp(44px,6vw,80px);
  border-top:1px solid var(--linea-sutil);
}
.servicio:first-of-type{border-top:0}
@media(min-width:900px){
  .servicio{grid-template-columns:1fr 1fr}
  .servicio.invertido .servicio-media{order:-1}
}
.servicio-txt{display:flex;flex-direction:column;gap:18px}
.servicio-txt h2{font-family:var(--fd);font-weight:500;line-height:1.16;letter-spacing:-.022em;font-size:clamp(1.6rem,2.7vw,2.1rem)}
.servicio-txt h2 em{font-style:normal;color:var(--oro-alto)}
.claro .servicio-txt h2 em{color:var(--oro-bajo)}
.claro .servicio{border-top-color:rgba(9,14,26,.12)}

/* ---------- PROCESO: pasos numerados ---------- */
.pasos{display:grid;gap:1px;background:var(--linea-sutil);border:1px solid var(--linea-sutil);border-radius:var(--r-lg);overflow:hidden}
@media(min-width:720px){.pasos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.pasos{grid-template-columns:repeat(4,1fr)}}
.paso{background:var(--tinta-2);padding:30px 26px;display:flex;flex-direction:column;gap:12px;transition:background .35s var(--ease)}
.paso:hover{background:var(--tinta-3)}
.paso b{font-family:var(--fm);font-size:.68rem;letter-spacing:.2em;color:var(--oro)}
.paso h3{font-family:var(--fd);font-weight:600;font-size:1.06rem;line-height:1.34;letter-spacing:-.012em}
.paso p{color:var(--texto-sec);font-size:.9rem;line-height:1.65}
.claro .pasos{background:rgba(9,14,26,.1);border-color:rgba(9,14,26,.1)}
.claro .paso{background:#fff}
.claro .paso:hover{background:var(--marfil-2)}
.claro .paso p{color:#4A5468}
.claro .paso b{color:var(--oro-bajo)}

.lista-check{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.lista-check li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:.9rem;color:var(--texto-sec);line-height:1.55;
}
.lista-check li::before{
  content:"";flex:none;margin-top:.55em;
  width:5px;height:5px;border-radius:50%;
  background:var(--oro);
}
.claro .lista-check li{color:#4A5468}
.claro .lista-check li::before{background:var(--oro-bajo)}

/* ---------- MAQUETA DE TELÉFONO (Eventic) ---------- */
.telefono{
  width:min(310px,100%);margin-inline:auto;
  aspect-ratio:9/19.5;
  background:linear-gradient(155deg,#38445F,#1A2540 32%,#0A1120);
  border-radius:44px;padding:10px;
  box-shadow:
    0 50px 100px -34px rgba(0,0,0,.9),
    0 0 0 1px rgba(201,169,97,.20),
    inset 0 1px 1px rgba(255,255,255,.14);
  position:relative;
}
/* Botones laterales */
.telefono::after{
  content:"";position:absolute;right:-2px;top:26%;width:2px;height:56px;
  border-radius:2px;background:rgba(255,255,255,.16);
}
.pantalla{
  width:100%;height:100%;border-radius:35px;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%, #131D33 0%, var(--tinta) 60%);
  display:flex;flex-direction:column;
  padding:8px 13px 12px;gap:9px;
  font-size:.76rem;position:relative;
}
/* Barra de estado del sistema */
.p-estado{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 8px 2px;
  font-family:var(--fm);font-size:.58rem;color:var(--texto-sec);letter-spacing:.04em;
}
.p-estado-iconos{display:flex;align-items:center;gap:4px;opacity:.75}
.p-estado-iconos i{display:block;width:3px;background:currentColor;border-radius:1px}
.p-estado-iconos i:nth-child(1){height:4px}
.p-estado-iconos i:nth-child(2){height:6px}
.p-estado-iconos i:nth-child(3){height:8px}
.p-estado-iconos b{
  width:16px;height:8px;border:1px solid currentColor;border-radius:2px;
  position:relative;margin-left:3px;
}
.p-estado-iconos b::before{content:"";position:absolute;inset:1.5px;right:5px;background:currentColor;border-radius:1px}

.pantalla-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 0}
.pantalla-top b{font-family:var(--fd);font-weight:600;font-size:.95rem;letter-spacing:-.005em}
.pantalla-top .envivo{font-size:.55rem;padding:4px 9px;gap:6px}
.pantalla-top .envivo::before{width:5px;height:5px}

.p-scroll{display:flex;flex-direction:column;gap:9px;overflow:hidden;flex:1}
.p-card{
  background:linear-gradient(165deg,var(--tinta-2),rgba(24,34,56,.7));
  border:1px solid var(--linea-sutil);
  border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:7px;
}
.p-card h5{font-size:.78rem;font-weight:600;line-height:1.3}
.p-card p{color:var(--texto-ter);font-size:.66rem;line-height:1.5}
.p-rot{
  font-family:var(--fm);font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oro);
}
.p-canal{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:10px;
  background:rgba(255,255,255,.035);border:1px solid var(--linea-sutil);
  font-family:var(--fm);font-size:.58rem;letter-spacing:.06em;
  color:var(--texto-sec);
}
.p-canal .p-via{
  margin-left:auto;font-size:.48rem;letter-spacing:.1em;
  padding:2px 6px;border-radius:99px;
  background:rgba(201,169,97,.14);color:var(--oro);
}
.p-canal.ia .p-via{background:rgba(79,179,168,.14);color:var(--senal-alto)}
.p-canal.activo{
  background:rgba(79,179,168,.13);border-color:rgba(79,179,168,.4);color:var(--senal-alto);
}
.p-canal .canales{height:11px;gap:2px;margin-left:auto}
.p-canal.activo .canales{margin-left:0}
.p-canal .canales span{width:2px}

/* Destinos de la transmisión dentro de la maqueta */
.p-destinos{display:flex;gap:5px;flex-wrap:wrap}
.p-dest{
  font-family:var(--fm);font-size:.5rem;letter-spacing:.08em;
  padding:4px 8px;border-radius:99px;
  background:rgba(255,255,255,.05);border:1px solid var(--linea-sutil);
  color:var(--texto-sec);display:inline-flex;align-items:center;gap:5px;
}
.p-dest::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--senal)}

.p-qr{width:74px;margin:3px auto;border-radius:6px;overflow:hidden;background:var(--marfil);padding:3px}
.p-qr img{width:100%;display:block}

.p-barra{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:auto;padding:10px 12px 2px;border-top:1px solid var(--linea-sutil);
  color:var(--texto-ter);
}
.p-barra svg{width:16px;height:16px;opacity:.5;transition:opacity .3s}
.p-barra svg:first-child{opacity:1;color:var(--oro)}
/* Indicador inferior del sistema */
.p-barra::after{display:none}
.pantalla::after{
  content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  width:96px;height:3.5px;border-radius:99px;background:rgba(255,255,255,.2);
}

/* ---------- 12. MEDIA / FIGURAS ---------- */
.figura{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--tinta-3);
}
.figura img,.figura video{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease),filter .6s;
}
.figura:hover img{transform:scale(1.045)}
.f-alto{aspect-ratio:3/4}
.f-ancho{aspect-ratio:16/9}
.f-cuadro{aspect-ratio:1/1}
.f-panoramica{aspect-ratio:21/9}
.figura figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 22px 20px;
  background:linear-gradient(0deg,rgba(9,14,26,.94),rgba(9,14,26,.55) 55%,transparent);
  font-family:var(--fm);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--marfil-2);line-height:1.6;
}
.figura figcaption em{display:block;font-style:normal;color:var(--oro);margin-bottom:4px;font-size:.62rem}

/* ---------- 13. MOSAICO DE GALERÍA ---------- */
.mosaico{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.mosaico{grid-template-columns:repeat(4,1fr);gap:14px}}
@media(min-width:760px){
  .m-grande{grid-column:span 2;grid-row:span 2}
  .m-ancho{grid-column:span 2}
}
.mosaico .figura{aspect-ratio:1/1;height:100%}
@media(min-width:760px){
  .mosaico .m-grande{aspect-ratio:1/1}
  .mosaico .m-ancho{aspect-ratio:2/1}
}

/* ---------- 14. LÍNEA DE TIEMPO ---------- */
.tiempo{position:relative;display:flex;flex-direction:column;gap:0}
.tiempo::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,transparent,var(--linea) 8%,var(--linea) 92%,transparent);
}
@media(min-width:860px){.tiempo::before{left:132px}}
.hito{
  position:relative;
  padding:26px 0 26px 30px;
  display:grid;gap:8px;
  border-bottom:1px solid var(--linea-sutil);
}
@media(min-width:860px){
  .hito{grid-template-columns:132px 1fr;gap:0 56px;padding-left:0;align-items:start}
}
.hito:last-child{border-bottom:0}
.hito::before{
  content:"";position:absolute;left:-4px;top:34px;
  width:9px;height:9px;border-radius:50%;
  background:var(--tinta);border:1px solid var(--oro);
  transition:background .3s;
}
@media(min-width:860px){.hito::before{left:128px}}
.hito:hover::before{background:var(--oro);box-shadow:0 0 0 5px rgba(201,169,97,.14)}
.hito-año{
  font-family:var(--fm);font-size:.8rem;letter-spacing:.16em;
  color:var(--oro);padding-top:2px;
}
.hito-cont h3{font-family:var(--fd);font-weight:600;font-size:1.14rem;line-height:1.34;margin-bottom:9px;letter-spacing:-.012em}
.hito-cont p{color:var(--texto-sec);font-size:.95rem;line-height:1.7;max-width:60ch;text-wrap:pretty}
.claro .hito-cont p{color:#4A5468}
.claro .hito::before{background:var(--marfil)}
.claro .hito-año{color:var(--oro-bajo)}

/* ---------- 15. SECTORES / LOGOS TIPOGRÁFICOS ---------- */
.sectores{
  display:grid;gap:1px;
  background:var(--linea-sutil);
  border:1px solid var(--linea-sutil);
  border-radius:var(--r-lg);overflow:hidden;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:760px){.sectores{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1060px){.sectores{grid-template-columns:repeat(4,1fr)}}
.sector{
  background:var(--tinta-2);
  padding:26px 20px;
  display:flex;flex-direction:column;gap:6px;justify-content:center;
  min-height:118px;
  transition:background .35s var(--ease);
}
.sector:hover{background:var(--tinta-3)}
.sector b{font-family:var(--fd);font-weight:600;font-size:.98rem;line-height:1.32;color:var(--marfil);letter-spacing:-.01em}
.sector span{font-family:var(--fm);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-ter)}
.claro .sectores{background:rgba(9,14,26,.1);border-color:rgba(9,14,26,.1)}
.claro .sector{background:#fff}
.claro .sector:hover{background:var(--marfil-2)}
.claro .sector b{color:var(--tinta)}
.claro .sector span{color:#7A8496}

/* ---------- 16. TABLA DE EQUIPOS ---------- */
.tabla-env{overflow-x:auto;border:1px solid var(--linea-sutil);border-radius:var(--r-lg)}
table.km{width:100%;border-collapse:collapse;min-width:640px;font-size:.9rem}
table.km th,table.km td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--linea-sutil)}
table.km thead th{
  font-family:var(--fm);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oro);background:var(--tinta-2);font-weight:500;
}
table.km tbody tr{transition:background .25s}
table.km tbody tr:hover{background:var(--tinta-2)}
table.km tbody tr:last-child td{border-bottom:0}
table.km td:first-child{color:var(--marfil);font-weight:500}
table.km td{color:var(--texto-sec)}
.claro table.km td{color:#4A5468}
.claro table.km td:first-child{color:var(--tinta)}
.claro table.km thead th{background:var(--marfil-2);color:var(--oro-bajo)}
.claro table.km tbody tr:hover{background:rgba(9,14,26,.03)}
.claro .tabla-env{border-color:rgba(9,14,26,.12)}

/* ---------- 17. ACORDEÓN (FAQ) ---------- */
.faq{border-top:1px solid var(--linea-sutil)}
.faq details{border-bottom:1px solid var(--linea-sutil)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:24px 44px 24px 0;
  position:relative;
  font-size:1.06rem;font-weight:500;line-height:1.5;
  transition:color .25s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--oro)}
.faq summary::after{
  content:"";position:absolute;right:8px;top:32px;
  width:11px;height:11px;
  border-right:1.5px solid var(--oro);border-bottom:1.5px solid var(--oro);
  transform:rotate(45deg);transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:36px}
.faq details p{padding:0 44px 26px 0;color:var(--texto-sec);line-height:1.75;max-width:70ch;text-wrap:pretty}
.claro .faq details p{color:#4A5468}

/* ---------- 18. CITA ---------- */
.cita{
  display:flex;flex-direction:column;gap:26px;
  max-width:920px;margin-inline:auto;text-align:center;align-items:center;
}
.cita blockquote{
  font-family:var(--fd);font-weight:500;
  font-size:clamp(1.25rem,2.2vw,1.75rem);
  line-height:1.4;letter-spacing:-.018em;
  text-wrap:balance;
}
.cita blockquote em{font-style:normal;color:var(--oro-alto)}
.cita footer{
  font-family:var(--fm);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--texto-ter);
}

/* ---------- 19. FRANJA CTA ---------- */
.franja{
  position:relative;overflow:hidden;
  background:linear-gradient(140deg,var(--tinta-3),var(--tinta-2) 55%,var(--tinta));
  border-block:1px solid var(--linea);
}
.franja::before{
  content:"";position:absolute;top:-40%;right:-10%;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,169,97,.16),transparent 68%);
  pointer-events:none;
}
.franja .env{position:relative;z-index:1}
.franja-cont{display:grid;gap:34px;align-items:center}
@media(min-width:940px){.franja-cont{grid-template-columns:1.35fr .65fr;gap:60px}}

/* ---------- 20. FORMULARIO ---------- */
.form{display:grid;gap:20px}
.campo{display:flex;flex-direction:column;gap:8px}
.campo label{
  font-family:var(--fm);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto-ter);
}
.campo input,.campo select,.campo textarea{
  background:var(--tinta-2);
  border:1px solid var(--linea-sutil);
  border-radius:var(--r);
  padding:14px 16px;
  font-size:.94rem;
  transition:border-color .3s,background .3s;
  width:100%;
}
.campo textarea{resize:vertical;min-height:130px;line-height:1.65}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--oro);background:var(--tinta-3);
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--texto-ter)}
.campo select option{background:var(--tinta-2);color:var(--marfil)}
.form-fila{display:grid;gap:20px}
@media(min-width:660px){.form-fila{grid-template-columns:1fr 1fr}}
.claro .campo input,.claro .campo select,.claro .campo textarea{background:#fff;border-color:rgba(9,14,26,.16);color:var(--tinta)}
.claro .campo input:focus,.claro .campo select:focus,.claro .campo textarea:focus{border-color:var(--oro-bajo);background:#fff}
.claro .campo label{color:#7A8496}
/* Grupo de casillas de servicios */
.opciones{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:560px){.opciones{grid-template-columns:1fr 1fr}}
.opcion{
  display:flex;align-items:center;gap:11px;
  padding:12px 14px;border-radius:var(--r);
  background:var(--tinta-2);border:1px solid var(--linea-sutil);
  font-size:.88rem;cursor:pointer;
  transition:border-color .25s,background .25s;
}
.opcion:hover{border-color:var(--linea)}
.opcion input{
  appearance:none;-webkit-appearance:none;
  width:17px;height:17px;flex:none;border-radius:3px;
  border:1.5px solid var(--texto-ter);
  display:grid;place-content:center;
  transition:all .2s;
}
.opcion input::before{
  content:"";width:9px;height:9px;transform:scale(0);
  background:var(--tinta);clip-path:polygon(14% 44%,0 60%,40% 100%,100% 18%,84% 4%,38% 68%);
  transition:transform .15s var(--ease);
}
.opcion input:checked{background:var(--oro);border-color:var(--oro)}
.opcion input:checked::before{transform:scale(1)}
.opcion:has(input:checked){border-color:var(--oro);background:rgba(201,169,97,.08)}
.claro .opcion{background:#fff;border-color:rgba(9,14,26,.14)}
.claro .opcion:has(input:checked){background:rgba(201,169,97,.1);border-color:var(--oro-bajo)}

/* Aviso posterior al envío */
.aviso{
  border:1px solid rgba(79,179,168,.35);
  background:rgba(79,179,168,.09);
  border-radius:var(--r-lg);
  padding:18px 20px;
  font-size:.9rem;line-height:1.65;
  color:var(--senal-alto);
}
.aviso b{display:block;margin-bottom:4px;color:var(--marfil)}

.nota{font-size:.8rem;color:var(--texto-ter);line-height:1.6}
.claro .nota{color:#7A8496}

/* ---------- 21. CONTACTO ---------- */
.contacto-item{
  display:flex;gap:16px;align-items:flex-start;
  padding:22px 0;border-bottom:1px solid var(--linea-sutil);
}
.contacto-item .icono{color:var(--oro);flex:none;margin-top:3px}
.contacto-item b{display:block;font-size:.95rem;font-weight:600;margin-bottom:3px}
.contacto-item span,.contacto-item a{display:block;color:var(--texto-sec);font-size:.92rem;line-height:1.6}
.contacto-item a:hover{color:var(--oro)}
.claro .contacto-item span,.claro .contacto-item a{color:#4A5468}
.claro .contacto-item .icono{color:var(--oro-bajo)}

/* ---------- 22. PIE ---------- */
.pie{background:var(--tinta);border-top:1px solid var(--linea-sutil);padding-block:clamp(56px,7vw,84px) 34px}
.pie-rejilla{display:grid;gap:44px;margin-bottom:52px}
@media(min-width:800px){.pie-rejilla{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px}}
.pie h4{
  font-family:var(--fm);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oro);margin-bottom:18px;
}
.pie ul{display:flex;flex-direction:column;gap:11px}
.pie ul a,.pie ul li{color:var(--texto-sec);font-size:.9rem;transition:color .25s}
.pie ul a:hover{color:var(--oro)}
.pie-marca .cuerpo{font-size:.9rem;margin-top:18px;max-width:38ch}
.pie-base{
  border-top:1px solid var(--linea-sutil);padding-top:26px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
}
.pie-base p{font-size:.78rem;color:var(--texto-ter)}
.pie-base a:hover{color:var(--oro)}

/* ---------- 23. BOTÓN FLOTANTE WHATSAPP ---------- */
.flotante{
  position:fixed;z-index:90;
  right:clamp(14px,3vw,26px);
  bottom:calc(clamp(14px,3vw,26px) + env(safe-area-inset-bottom, 0px));
  width:54px;height:54px;border-radius:50%;
  background:#25D366;color:#062E14;
  display:grid;place-items:center;
  box-shadow:0 10px 34px -8px rgba(37,211,102,.55);
  transition:transform .3s var(--ease),box-shadow .3s;
}
.flotante:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 16px 40px -8px rgba(37,211,102,.7)}
.flotante::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid #25D366;
  animation:pulso 2.6s ease-out infinite;
}
@keyframes pulso{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}

/* ---------- 24. ANIMACIÓN DE ENTRADA ---------- */
.rev{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rev.visible{opacity:1;transform:none}
.rev-d1{transition-delay:.09s}
.rev-d2{transition-delay:.18s}
.rev-d3{transition-delay:.27s}
.rev-d4{transition-delay:.36s}

/* ---------- 25. CABECERA DE PÁGINA INTERIOR ---------- */
.cabecera{
  position:relative;overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(56px,8vw,104px));
  padding-bottom:clamp(52px,7vw,92px);
  border-bottom:1px solid var(--linea-sutil);
  background:linear-gradient(165deg,var(--tinta-3) 0%,var(--tinta-2) 40%,var(--tinta) 100%);
}
.cabecera::before{
  content:"";position:absolute;top:-30%;left:60%;
  width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,169,97,.13),transparent 70%);
  pointer-events:none;
}
.cabecera .env{position:relative;z-index:1}
.miga{
  display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  font-family:var(--fm);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-ter);margin-bottom:22px;
}
.miga a:hover{color:var(--oro)}
.miga span{opacity:.45}

/* ==========================================================================
   27. CAPA TÉCNICA — trama, sello, flujo de señal y plataformas
   El acento "clásico" lo dan el sello y el oro; el "tecnológico", la trama
   de plano, la tipografía mono y el diagrama de señal.
   ========================================================================== */

/* ---------- Trama de plano técnico ---------- */
.trama{position:relative;isolation:isolate}
.trama::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(201,169,97,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,169,97,.055) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 42%, #000 20%, transparent 78%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 42%, #000 20%, transparent 78%);
}
.claro.trama::before{
  background-image:
    linear-gradient(rgba(9,14,26,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9,14,26,.05) 1px, transparent 1px);
}

/* ---------- Sello de fundación ---------- */
.sello{
  width:clamp(128px,13vw,164px);aspect-ratio:1;flex:none;
  color:var(--oro);
}
.sello svg{width:100%;height:100%}
.sello .gira{transform-origin:50% 50%;animation:rotar 46s linear infinite}
@keyframes rotar{to{transform:rotate(360deg)}}
.claro .sello{color:var(--oro-bajo)}

/* ---------- Bloque de liderazgo ---------- */
.liderazgo{
  display:grid;gap:clamp(26px,4vw,52px);align-items:center;
  grid-template-columns:1fr;
}
@media(min-width:860px){.liderazgo{grid-template-columns:auto 1fr}}
.liderazgo-txt{display:flex;flex-direction:column;gap:20px}

/* ---------- Diagrama de flujo de señal ---------- */
.flujo{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){
  .flujo{grid-template-columns:repeat(3,1fr);gap:0}
}
.etapa{
  position:relative;
  background:var(--tinta-2);
  border:1px solid var(--linea-sutil);
  border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,32px);
  display:flex;flex-direction:column;gap:14px;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.etapa:hover{border-color:var(--linea);background:var(--tinta-3)}
@media(min-width:900px){
  .flujo .etapa{border-radius:0;border-right-width:0}
  .flujo .etapa:first-child{border-radius:var(--r-lg) 0 0 var(--r-lg)}
  .flujo .etapa:last-child{border-radius:0 var(--r-lg) var(--r-lg) 0;border-right-width:1px}
  /* Conector: el punto por donde pasa la señal de una etapa a la siguiente */
  .flujo .etapa:not(:last-child)::after{
    content:"";position:absolute;top:50%;right:-6px;z-index:2;
    width:11px;height:11px;border-radius:50%;
    background:var(--tinta);border:1px solid var(--oro);
    transform:translateY(-50%);
  }
}
.etapa-cab{display:flex;align-items:center;gap:12px}
.etapa-num{
  font-family:var(--fm);font-size:.66rem;letter-spacing:.2em;color:var(--oro);
  border:1px solid var(--linea);border-radius:99px;padding:4px 10px;
}
.etapa h3{font-family:var(--fd);font-weight:600;font-size:1.12rem;line-height:1.32;letter-spacing:-.012em}
.etapa p{color:var(--texto-sec);font-size:.92rem;line-height:1.66}

/* Especificaciones técnicas tipo ficha de datos */
.espec{display:flex;flex-direction:column;gap:0;margin-top:4px}
.espec li{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:9px 0;border-bottom:1px dashed var(--linea-sutil);
  font-size:.82rem;
}
.espec li:last-child{border-bottom:0}
.espec b{font-family:var(--fm);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-ter);font-weight:500;flex:none}
.espec span{color:var(--marfil);text-align:right}
.claro .espec span{color:var(--tinta)}

/* ---------- Salidas simultáneas ---------- */
.salidas{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.salidas{grid-template-columns:repeat(3,1fr)}}
.salida{
  background:linear-gradient(160deg,var(--tinta-3),var(--tinta-2));
  border:1px solid var(--linea-sutil);border-radius:var(--r-lg);
  padding:26px 24px;display:flex;flex-direction:column;gap:12px;
  position:relative;overflow:hidden;
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.salida:hover{border-color:var(--oro);transform:translateY(-3px)}
.salida::before{
  content:"";position:absolute;top:0;left:24px;right:24px;height:1px;
  background:linear-gradient(90deg,transparent,var(--oro),transparent);
}
.salida h4{font-family:var(--fd);font-weight:600;font-size:1.04rem;line-height:1.34;letter-spacing:-.012em}
.salida p{color:var(--texto-sec);font-size:.88rem;line-height:1.62}
.salida .icono{color:var(--oro)}

/* ---------- Evolución de la señal: eras tecnológicas ---------- */
.eras{
  display:grid;gap:14px;grid-template-columns:1fr;
  counter-reset:era;
}
@media(min-width:760px){.eras{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1160px){.eras{grid-template-columns:repeat(5,1fr);gap:0}}
.era{
  position:relative;
  background:var(--tinta-2);
  border:1px solid var(--linea-sutil);
  border-radius:var(--r-lg);
  padding:clamp(22px,2.2vw,28px);
  display:flex;flex-direction:column;gap:12px;
  transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease);
}
@media(min-width:1160px){
  .eras .era{border-radius:0;border-right-width:0}
  .eras .era:first-child{border-radius:var(--r-lg) 0 0 var(--r-lg)}
  .eras .era:last-child{border-radius:0 var(--r-lg) var(--r-lg) 0;border-right-width:1px}
}
.era:hover{background:var(--tinta-3);border-color:var(--linea);z-index:2}
.era-año{
  font-family:var(--fm);font-size:.68rem;letter-spacing:.16em;color:var(--oro);
}
.era h3{font-family:var(--fd);font-weight:600;font-size:1.02rem;line-height:1.34;letter-spacing:-.012em}
.era p{color:var(--texto-sec);font-size:.85rem;line-height:1.62}
.era-nota{
  margin-top:auto;padding-top:12px;border-top:1px dashed var(--linea-sutil);
  font-family:var(--fm);font-size:.62rem;letter-spacing:.08em;
  color:var(--texto-ter);line-height:1.5;
}
/* La última era es el presente: se destaca */
.era.presente{
  background:linear-gradient(165deg,rgba(201,169,97,.12),var(--tinta-3));
  border-color:rgba(201,169,97,.42);
}
.era.presente .era-año{color:var(--oro-alto)}
.era.presente h3{color:var(--marfil)}

/* Barra de progreso de la evolución */
.evo-barra{
  height:2px;margin-block:clamp(24px,3vw,36px) 0;
  background:linear-gradient(90deg,
    rgba(160,170,191,.22) 0%,
    rgba(160,170,191,.3) 42%,
    var(--oro) 82%,
    var(--oro-alto) 100%);
  border-radius:2px;position:relative;
}
.evo-barra::after{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--oro-alto);
  box-shadow:0 0 14px var(--oro);
}

/* ---------- Vías de traducción: humano + IA ---------- */
.vias{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:820px){.vias{grid-template-columns:1fr 1fr}}
.via{
  border-radius:var(--r-lg);padding:clamp(24px,2.6vw,32px);
  display:flex;flex-direction:column;gap:14px;
  border:1px solid var(--linea-sutil);background:var(--tinta-2);
  position:relative;
}
.via-humana{border-color:rgba(201,169,97,.34);background:linear-gradient(160deg,rgba(201,169,97,.09),var(--tinta-2))}
.via-ia{border-color:rgba(79,179,168,.32);background:linear-gradient(160deg,rgba(79,179,168,.08),var(--tinta-2))}
.via h3{font-family:var(--fd);font-weight:600;font-size:1.15rem;line-height:1.32;letter-spacing:-.012em}
.via p{color:var(--texto-sec);font-size:.92rem;line-height:1.66}
.via-tag{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-family:var(--fm);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;
  padding:5px 12px;border-radius:99px;
}
.via-humana .via-tag{background:rgba(201,169,97,.16);color:var(--oro-alto)}
.via-ia .via-tag{background:rgba(79,179,168,.14);color:var(--senal-alto)}
.via-humana .lista-check li::before{background:var(--oro)}
.via-ia .lista-check li::before{background:var(--senal)}

/* ---------- Chips de plataformas compatibles ---------- */
.plataformas{display:flex;flex-wrap:wrap;gap:10px}
.chip-plat{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 16px;border-radius:99px;
  background:var(--tinta-2);border:1px solid var(--linea-sutil);
  font-size:.85rem;font-weight:500;
  transition:border-color .3s var(--ease),background .3s,transform .3s var(--ease);
}
.chip-plat:hover{border-color:var(--oro);background:var(--tinta-3);transform:translateY(-2px)}
.chip-plat i{
  width:7px;height:7px;border-radius:50%;background:var(--senal);flex:none;
  box-shadow:0 0 8px rgba(79,179,168,.7);
}
.claro .chip-plat{background:#fff;border-color:rgba(9,14,26,.13)}
.claro .chip-plat:hover{background:var(--marfil-2);border-color:var(--oro-bajo)}

/* ---------- Barra de marcas de equipamiento ---------- */
.marcas{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,4vw,52px);
  padding:24px 0;
  border-block:1px solid var(--linea-sutil);
}
.marcas-rot{
  font-family:var(--fm);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--texto-ter);flex:none;
}
.marca-eq{
  font-family:var(--fd);font-size:clamp(1.5rem,2.4vw,2rem);
  color:var(--marfil);letter-spacing:.02em;
  opacity:.72;transition:opacity .3s,color .3s;
}
.marca-eq:hover{opacity:1;color:var(--oro-alto)}
.marca-eq small{
  display:block;font-family:var(--fm);font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--texto-ter);margin-top:2px;
}
.claro .marca-eq{color:var(--tinta)}

/* ==========================================================================
   28. CONSOLA DE DEMOSTRACIÓN
   Réplica en pantalla de un pupitre de interpretación: fuente a la izquierda,
   canales de idioma a la derecha, cada uno con su indicador de señal.
   ========================================================================== */
.consola{
  border:1px solid var(--linea);
  border-radius:var(--r-lg);
  background:linear-gradient(170deg,var(--tinta-3),var(--tinta-2) 45%,var(--tinta));
  overflow:hidden;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.consola-cab{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding:16px 22px;
  border-bottom:1px solid var(--linea-sutil);
  background:rgba(255,255,255,.022);
}
.consola-cab .rotulo{margin-right:auto}
.consola-cuerpo{display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:960px){.consola-cuerpo{grid-template-columns:0.92fr 1.08fr}}
.consola-lado{padding:clamp(20px,2.4vw,28px)}
.consola-lado+.consola-lado{border-top:1px solid var(--linea-sutil)}
@media(min-width:960px){
  .consola-lado+.consola-lado{border-top:0;border-left:1px solid var(--linea-sutil)}
}

/* Selector de modo */
.modos{display:inline-flex;padding:3px;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid var(--linea-sutil)}
.modos button{
  padding:8px 18px;border-radius:99px;
  font-family:var(--fm);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-ter);transition:all .3s var(--ease);
}
.modos button[aria-pressed="true"]{background:var(--oro);color:var(--tinta);font-weight:600}

/* Zona de dictado */
.dictado{
  min-height:132px;
  border:1px solid var(--linea-sutil);border-radius:var(--r);
  background:var(--tinta);padding:15px 16px;
  font-size:.96rem;line-height:1.62;color:var(--marfil);
  width:100%;resize:vertical;
}
.dictado:focus{outline:none;border-color:var(--oro)}
.dictado::placeholder{color:var(--texto-ter)}

.mic{
  display:flex;align-items:center;justify-content:center;gap:11px;
  width:100%;padding:16px;border-radius:var(--r);
  border:1px solid var(--linea);background:rgba(201,169,97,.07);
  color:var(--oro);font-weight:600;font-size:.92rem;
  transition:all .3s var(--ease);
}
.mic:hover{background:rgba(201,169,97,.13)}
.mic.grabando{
  background:rgba(79,179,168,.14);border-color:rgba(79,179,168,.5);color:var(--senal-alto);
}
.mic.grabando .mic-punto{background:var(--senal);animation:latido 1.2s ease-in-out infinite}
.mic-punto{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}

/* Frases de ejemplo */
.ejemplos{display:flex;flex-direction:column;gap:8px}
.ejemplo{
  text-align:left;padding:11px 14px;border-radius:var(--r);
  border:1px solid var(--linea-sutil);background:rgba(255,255,255,.025);
  font-size:.85rem;line-height:1.5;color:var(--texto-sec);
  transition:all .25s var(--ease);
}
.ejemplo:hover{border-color:var(--oro);color:var(--marfil);background:rgba(201,169,97,.06)}

/* Canales de salida */
.canal-vivo{
  border:1px solid var(--linea-sutil);border-radius:var(--r);
  padding:14px 16px;display:flex;flex-direction:column;gap:9px;
  background:rgba(255,255,255,.022);
  transition:border-color .35s var(--ease),background .35s;
}
.canal-vivo+.canal-vivo{margin-top:11px}
.canal-vivo.trabajando{border-color:rgba(79,179,168,.42);background:rgba(79,179,168,.05)}
.canal-vivo.listo{border-color:rgba(201,169,97,.36)}
.canal-cab{display:flex;align-items:center;gap:10px}
.canal-idioma{
  font-family:var(--fm);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro);
}
.canal-via{
  font-family:var(--fm);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 9px;border-radius:99px;
  background:rgba(79,179,168,.14);color:var(--senal-alto);
}
.canal-acciones{margin-left:auto;display:flex;align-items:center;gap:8px}
.canal-btn{
  width:34px;height:34px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--linea-sutil);color:var(--texto-sec);
  transition:all .3s var(--ease);
}
.canal-btn:hover:not(:disabled){border-color:var(--oro);color:var(--oro);background:rgba(201,169,97,.08)}
.canal-btn:disabled{opacity:.32;cursor:not-allowed}
.canal-texto{
  font-size:1rem;line-height:1.6;color:var(--marfil);min-height:1.6em;
  text-wrap:pretty;
}
.canal-texto:empty::before{content:"En espera…";color:var(--texto-ter);font-size:.88rem}
.canal-texto.cargando{color:var(--texto-ter)}

/* Puntos de carga */
.puntitos{display:inline-flex;gap:4px;vertical-align:middle}
.puntitos i{width:5px;height:5px;border-radius:50%;background:var(--senal);animation:puntito 1.2s ease-in-out infinite}
.puntitos i:nth-child(2){animation-delay:.18s}
.puntitos i:nth-child(3){animation-delay:.36s}
@keyframes puntito{0%,100%{opacity:.25;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}

/* Selección de idiomas de salida */
.idiomas-sel{display:flex;flex-wrap:wrap;gap:8px}
.idioma-chip{
  padding:8px 14px;border-radius:99px;
  border:1px solid var(--linea-sutil);background:rgba(255,255,255,.03);
  font-size:.82rem;color:var(--texto-sec);
  transition:all .25s var(--ease);
}
.idioma-chip[aria-pressed="true"]{
  border-color:var(--oro);background:rgba(201,169,97,.13);color:var(--oro-alto);font-weight:600;
}

/* Aviso de estado de la consola */
.consola-nota{
  padding:13px 22px;border-top:1px solid var(--linea-sutil);
  font-family:var(--fm);font-size:.63rem;letter-spacing:.07em;
  color:var(--texto-ter);line-height:1.6;
  background:rgba(0,0,0,.2);
}
.consola-nota.error{color:#F3A9A0;background:rgba(220,90,80,.08)}

/* ==========================================================================
   30. DIAGRAMA DEL RECORRIDO DEL AUDIO
   Cómo viaja una voz desde el micrófono hasta cada oído de la sala y del
   mundo. Las líneas llevan un pulso animado: es la señal, moviéndose.
   ========================================================================== */
.flujo-audio{
  display:grid;gap:0;
  grid-template-columns:1fr;
  align-items:stretch;
}
@media(min-width:1000px){
  .flujo-audio{grid-template-columns:1fr 52px 1fr 52px 1.05fr}
}

.fa-col{display:flex;flex-direction:column;gap:12px}
.fa-rot{
  font-family:var(--fm);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oro);margin-bottom:2px;
  display:flex;align-items:center;gap:9px;
}
.fa-rot b{
  font-weight:500;color:var(--tinta);background:var(--oro);
  padding:2px 7px;border-radius:3px;font-size:.58rem;
}

.fa-nodo{
  background:linear-gradient(160deg,var(--tinta-3),var(--tinta-2));
  border:1px solid var(--linea-sutil);
  border-radius:var(--r-lg);
  padding:16px 17px;
  display:flex;gap:13px;align-items:flex-start;
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease);
  position:relative;
}
.fa-nodo:hover{border-color:var(--linea);transform:translateX(3px)}
.fa-nodo .fa-ico{color:var(--oro);flex:none;margin-top:2px}
.fa-nodo h4{font-size:.95rem;font-weight:600;line-height:1.35;margin-bottom:5px;color:var(--marfil)}
.fa-nodo p{font-size:.82rem;line-height:1.62;color:#B4BDCF}
.fa-nodo .fa-tag{
  display:inline-block;margin-top:7px;
  font-family:var(--fm);font-size:.52rem;letter-spacing:.13em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;
  background:rgba(201,169,97,.13);color:var(--oro);
}

/* Las dos vías de traducción.
   Antes se distinguían tiñendo el fondo, pero el degradado aclaraba tanto la
   tarjeta que el texto dejaba de leerse. Ahora el fondo es igual de oscuro en
   todos los nodos y la diferencia la marca una barra de color al costado. */
.fa-nodo.humana,
.fa-nodo.ia{padding-left:24px}
.fa-nodo.humana::before,
.fa-nodo.ia::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:0 3px 3px 0;
}
.fa-nodo.humana{border-color:rgba(201,169,97,.5)}
.fa-nodo.humana::before{background:var(--oro)}
.fa-nodo.humana .fa-ico{color:var(--oro-alto)}

.fa-nodo.ia{border-color:rgba(79,179,168,.45)}
.fa-nodo.ia::before{background:var(--senal)}
.fa-nodo.ia .fa-ico{color:var(--senal-alto)}
.fa-nodo.ia .fa-tag{background:rgba(79,179,168,.16);color:var(--senal-alto)}

/* Cuando la señal pasa por un nodo, se enciende */
.fa-nodo.activo{
  border-color:var(--oro);
  background:linear-gradient(160deg,var(--tinta-4),var(--tinta-3));
  box-shadow:0 0 0 1px rgba(201,169,97,.35), 0 14px 36px -20px rgba(201,169,97,.6);
  transform:translateX(5px);
}
.fa-nodo.ia.activo{
  border-color:var(--senal);
  box-shadow:0 0 0 1px rgba(79,179,168,.35), 0 14px 36px -20px rgba(79,179,168,.6);
}
.fa-nodo.activo .fa-ico{color:var(--oro-alto)}
.fa-nodo.ia.activo .fa-ico{color:var(--senal-alto)}
/* Canales reales que van saliendo, inyectados desde la consola */
.fa-canales{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.fa-canales span{
  font-family:var(--fm);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;
  background:rgba(201,169,97,.14);color:var(--oro);
  animation:aparecer .4s var(--ease) both;
}
.fa-canales span.ia{background:rgba(79,179,168,.14);color:var(--senal-alto)}
@keyframes aparecer{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Botón para volver a ver el recorrido */
.fa-repetir{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:18px;padding:11px 20px;border-radius:99px;
  border:1px solid var(--linea);color:var(--oro-bajo);
  font-family:var(--fm);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  transition:all .3s var(--ease);
}
.fa-repetir:hover{background:rgba(201,169,97,.1);border-color:var(--oro)}
.fa-repetir[disabled]{opacity:.45;cursor:default}

/* El conector: una línea con un pulso que la recorre */
.fa-linea{position:relative;min-height:34px}
.fa-linea::before{
  content:"";position:absolute;
  left:50%;top:0;bottom:0;width:1px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--linea) 18%,var(--linea) 82%,transparent);
}
.fa-linea::after{
  content:"";position:absolute;
  left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;
  background:var(--senal);box-shadow:0 0 12px var(--senal);
  animation:pulsoVert 2.6s linear infinite;
}
@keyframes pulsoVert{0%{top:6%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:94%;opacity:0}}

@media(min-width:1000px){
  .fa-linea::before{
    left:0;right:0;top:50%;bottom:auto;width:auto;height:1px;
    transform:translateY(-50%);
    background:linear-gradient(90deg,transparent,var(--linea) 18%,var(--linea) 82%,transparent);
  }
  .fa-linea::after{
    top:50%;left:auto;transform:translateY(-50%);
    animation:pulsoHoriz 2.6s linear infinite;
  }
  @keyframes pulsoHoriz{0%{left:4%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:96%;opacity:0}}
}
/* Los pulsos entran desfasados: la señal avanza, no parpadea a la vez */
.fa-linea:nth-of-type(4)::after{animation-delay:1.3s}

/* ---------- El esquema completo, como lámina ---------- */
.esquema{
  border:1px solid var(--linea);border-radius:var(--r-lg);
  overflow:hidden;background:var(--tinta);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.esquema-lienzo{overflow-x:auto;-webkit-overflow-scrolling:touch}
.esquema-lienzo img{display:block;min-width:860px;width:100%}
.esquema-pie{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  padding:14px 20px;border-top:1px solid var(--linea-sutil);
  background:rgba(255,255,255,.022);
  font-family:var(--fm);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-ter);
}
.esquema-pie a{margin-left:auto;color:var(--oro);display:inline-flex;align-items:center;gap:8px}
.esquema-pie a:hover{color:var(--oro-alto)}
@media(max-width:719px){.esquema-pie a{margin-left:0}}

/* ---------- Escenario: por qué un idioma va con intérprete y otro con IA ---- */
.escenarios{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.escenario-btn{
  padding:10px 16px;border-radius:99px;
  border:1px solid var(--linea-sutil);background:rgba(255,255,255,.03);
  font-size:.82rem;color:var(--texto-sec);
  transition:all .28s var(--ease);
}
.escenario-btn[aria-pressed="true"]{
  border-color:var(--oro);background:rgba(201,169,97,.13);
  color:var(--oro-alto);font-weight:600;
}
.escenario-btn:hover{border-color:var(--linea)}

.sala{
  border:1px solid var(--linea-sutil);border-radius:var(--r-lg);
  overflow:hidden;background:var(--tinta-2);
}
.sala-cab{
  padding:16px 20px;border-bottom:1px solid var(--linea-sutil);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  background:rgba(255,255,255,.022);
}
.sala-cab h4{font-family:var(--fd);font-weight:600;font-size:1.05rem;letter-spacing:-.012em}
.sala-cab span{font-family:var(--fm);font-size:.62rem;letter-spacing:.14em;color:var(--texto-ter);margin-left:auto}

.idioma-fila{
  display:grid;gap:10px 14px;
  grid-template-columns:1fr auto;
  align-items:center;
  padding:14px 20px;
  border-bottom:1px solid var(--linea-sutil);
}
.idioma-fila:last-child{border-bottom:0}
.idioma-nom{font-size:.94rem;font-weight:500}
.idioma-nom small{
  display:block;font-family:var(--fm);font-size:.6rem;letter-spacing:.1em;
  color:var(--texto-ter);font-weight:400;margin-top:2px;
}
/* La barra de afluencia: se ve de un vistazo cuánta gente habla cada idioma */
.idioma-barra{
  grid-column:1 / -1;height:5px;border-radius:99px;
  background:rgba(255,255,255,.06);overflow:hidden;
}
.idioma-barra i{
  display:block;height:100%;border-radius:99px;
  transition:width .7s var(--ease);
}
.modo{
  font-family:var(--fm);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 11px;border-radius:99px;white-space:nowrap;
}
.modo.original{background:rgba(160,170,191,.14);color:var(--texto-sec)}
.modo.interprete{background:rgba(201,169,97,.16);color:var(--oro-alto)}
.modo.ia{background:rgba(79,179,168,.15);color:var(--senal-alto)}
.idioma-fila.es .idioma-barra i{background:var(--texto-ter)}
.idioma-fila.interprete .idioma-barra i{background:var(--oro)}
.idioma-fila.ia .idioma-barra i{background:var(--senal)}

.sala-pie{
  padding:15px 20px;border-top:1px solid var(--linea-sutil);
  background:rgba(0,0,0,.18);
  font-size:.84rem;line-height:1.6;color:var(--texto-sec);
}
.sala-pie strong{color:var(--marfil);font-weight:500}

/* ==========================================================================
   29. AJUSTES DE MÓVIL
   Todo lo que en escritorio respira, en 360px hay que apretarlo.
   ========================================================================== */
@media(max-width:719px){
  /* La primera pantalla tiene que mostrar titular, bajada y los dos botones.
     Cada píxel de aire está calculado para que entren sin cortar nada. */
  .portada{
    min-height:100svh;
    padding-top:calc(var(--nav-h) + 18px);
    padding-bottom:16px;
  }
  .portada-txt{gap:13px}
  .portada .d-xxl{font-size:1.72rem;line-height:1.17}
  .portada .rotulo{margin-bottom:-2px}
  .portada .bajada{font-size:.88rem;line-height:1.55}
  /* La parte larga de la bajada sólo aporta en pantallas grandes */
  .solo-ancho{display:none}

  /* Tres cifras en una sola línea: la cuarta se guarda para escritorio, así la
     primera pantalla cierra completa en vez de cortarse a la mitad. */
  .portada-pie{
    grid-template-columns:repeat(3,1fr);
    margin-top:18px;padding-top:14px;gap:10px;
  }
  .portada-pie .dato:nth-child(4){display:none}
  .dato b{font-size:1.3rem}
  .dato span{font-size:.48rem;letter-spacing:.08em;margin-top:4px;line-height:1.4}
  .dato span br{display:none}

  /* Los botones ocupan el ancho: dedos, no punteros */
  .acciones{gap:9px}
  .acciones .btn{width:100%;padding:13px 20px;font-size:.86rem}
  .portada .acciones .btn{width:100%}

  /* Rótulos largos: la línea decorativa se come el espacio */
  .rotulo{font-size:.62rem;letter-spacing:.18em;gap:.6em}
  .rotulo::before{width:16px}

  /* Secciones menos altas para que el recorrido no se haga eterno */
  .bloque{padding-block:56px}
  .bloque-corto{padding-block:42px}
  .enc{margin-bottom:30px}

  /* El sello, centrado y más chico */
  .liderazgo{justify-items:center;text-align:left}
  .sello{width:104px}

  /* Tarjetas y fichas más compactas */
  .ficha{padding:22px}
  .cita blockquote{font-size:1.2rem;line-height:1.45}

  /* Tablas: aviso de que se desplazan */
  .tabla-env{position:relative}
  .tabla-env::after{
    content:"Deslice para ver la tabla completa →";
    display:block;padding:10px 14px;
    border-top:1px solid var(--linea-sutil);
    font-family:var(--fm);font-size:.58rem;letter-spacing:.1em;
    color:var(--texto-ter);text-align:center;
  }
  .claro .tabla-env::after{color:#7A8496;border-top-color:rgba(9,14,26,.12)}

  /* Menú desplegado: que quepan los seis ítems sin scroll */
  .panel{padding-top:22px}
  .panel a{font-size:1.24rem;padding:11px 0}
  .panel .btn{margin-top:18px;width:100%}
}

/* Teléfonos muy angostos */
@media(max-width:380px){
  .marca-txt b{font-size:.95rem}
  .marca-mono{width:44px;height:37px}
  .portada-pie{grid-template-columns:1fr 1fr;gap:14px}
}

/* ---------- 26. UTILIDADES ---------- */
.centro{text-align:center}
.mt-s{margin-top:16px}.mt-m{margin-top:28px}.mt-l{margin-top:44px}.mt-xl{margin-top:clamp(44px,6vw,72px)}
.oro{color:var(--oro)}
.oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{
  position:absolute;top:-60px;left:16px;z-index:200;
  background:var(--oro);color:var(--tinta);
  padding:12px 20px;border-radius:var(--r);font-weight:600;font-size:.85rem;
  transition:top .2s;
}
.saltar:focus{top:12px}