/* ============================================================================================================
   v13 · MARCA — logo, encabezado, tipografía, sistema compartido (cápsulas, módulos, eyebrow, botones) y animación global.
   Ronda v13 (29 oct 2026). Va al final de la cascada (después de css/sistema.css y de las capas viejas): aquí manda lo nuevo.

   REGLAS FIRMES: fondo morado noche (#120C2B y sus tonos) · logo original verde y oro, sin placa, sin halo, sin filtro ·
   nada de bloom, neón ni resplandores · rosa, naranja y coral solo como acentos, con moderación; el oro del logo sigue.

   CONTRATO PARA LAS DEMÁS ÁREAS (úsalo tal cual; no pongas familias tipográficas a mano):
     Tipografía   var(--f-display)  títulos (Noto Serif Display: la serif de alto contraste de «CUADRA»; 400 títulos, 500 subtítulos)
                  var(--f-rotulo)   rótulos en versales espaciadas (Josefin Sans: las de «ATRACCIONES»); la usan eyebrow y cápsula
                  var(--f-texto)    texto (Onest) · var(--f-mono) cifras y rótulos técnicos (Martian Mono)
                  tamaños: var(--t-portada) · var(--t-1) h2 · var(--t-2) · var(--t-3) h3 · var(--t-lead)
     Acentos      var(--coral) · var(--naranja) · var(--rosa) (y sus "hondos" para fondos con texto blanco) · var(--oro-logo)
     Animación    var(--dur-entrada) .9 s · var(--curva-entrada) desaceleración natural sin rebote · var(--paso-entrada) 80 ms
                  Entradas: usa .split (títulos por palabra), .entrada, .entrada-hijos y .entrada--mascara (js/scroll.js).
     Cápsula      <span class="capsula"><i class="capsula-punto" aria-hidden="true"></i>Texto</span>
                  dos partes: …Juego mecánico<span class="capsula-sep" aria-hidden="true"></span><b>Vista 3D</b></span>
                  .capsula--sutil (discreta) · fila: <div class="capsulas">…</div>
     Módulos      <div class="modulos"><div class="modulo"><span class="modulo-ico" aria-hidden="true">(svg 16 px)</span>
                  <small>Huella aprox.</small><b>18 × 11 m</b></div>…</div>   (solo datos reales de js/datos.js)
     Eyebrow      <p class="eyebrow">…</p>: línea corta rosa → naranja + versales espaciadas en coral
     Botones      .btn.p = cotizar (rosa → coral, texto blanco ≥ 4.7:1, sin brillo) · .btn = secundario de borde fino
   ============================================================================================================ */

/* ---------- 1. tokens ---------- */
:root{
  /* acentos de la referencia, ajustados al morado y al oro: sobre --noche el coral da 6.7:1, el naranja 7.8:1 y el rosa 5.1:1
     (sirven para rótulos chicos). Los "hondos" son para fondos con texto blanco encima (≥ 4.7:1) */
  --rosa:#F23A86;
  --naranja:#F68B2C;
  --coral:#FF6B5E;
  --rosa-hondo:#D61F6B;
  --coral-hondo:#CB3F35;
  --grad-acento:linear-gradient(90deg,var(--rosa),var(--naranja));

  /* tipografía (ver sistema.css §1: ahí viven también los tamaños --t-*) */
  --f-display:"Noto Serif Display","Didot","Bodoni 72",Georgia,serif;
  --f-rotulo:"Josefin Sans","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --f-sans:var(--f-texto);
  --f-acento:var(--f-display);

  /* animación: entradas de texto de .9 s (1 s el desplazamiento), curva que arranca suave y frena largo (sin rebote) y escalón
     uniforme de 80 ms. Desplazamientos cortos: 16-22 px */
  --dur-entrada:.9s;
  --curva-entrada:cubic-bezier(.3,.5,.2,1);
  --paso-entrada:80ms;
  --dur-hover:.45s;
}

/* ---------- 2. títulos ----------
   Noto Serif Display 400 en MAYÚSCULAS con tracking corto (.025 em); el acento (<em>) en la misma serif itálica y el oro del logo.
   Interlineado apretado para los grandes; los h3 en 500 (subtítulos) con más aire entre letras. */
h1,h2,h3{font-family:var(--f-display);font-optical-sizing:auto;font-kerning:normal}
h2{line-height:1.04}
h3{font-weight:var(--w-titulo);letter-spacing:var(--tr-titulo)}
@media(max-width:900px){h2{line-height:1.07}}

/* ---------- 3. eyebrow (rótulo de sección): línea corta rosa → naranja y versales espaciadas en coral ---------- */
.eyebrow{font-family:var(--f-rotulo);font-weight:600;font-size:12px;line-height:1.3;letter-spacing:.24em;text-transform:uppercase;color:var(--coral);
  display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";flex:none;width:30px;height:1.5px;border-radius:1px;background:var(--grad-acento)}
.eyebrow .fx-num{font-weight:600;color:var(--naranja);margin-right:.35em}
@media(max-width:900px){.eyebrow{font-size:11.5px;letter-spacing:.2em;gap:12px}.eyebrow::before{width:24px}}

/* ---------- 4. cápsula (sticker premium) ----------
   Píldora fina de vidrio oscuro, punto naranja, versales espaciadas; segunda parte (tras .capsula-sep) en naranja. Sin brillo. */
.capsulas{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.capsula{display:inline-flex;align-items:center;gap:10px;max-width:100%;min-height:34px;padding:1px 15px 0 13px;border-radius:999px;
  border:1px solid rgba(243,238,227,.14);background:rgba(24,16,54,.74);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  font-family:var(--f-rotulo);font-weight:600;font-size:11px;line-height:1;letter-spacing:.18em;text-transform:uppercase;color:var(--marfil);
  white-space:nowrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.capsula > b,.capsula > strong{font-weight:600;color:var(--naranja)}
.capsula-punto{flex:none;width:6px;height:6px;margin-top:-1px;border-radius:50%;background:var(--naranja)}
.capsula-sep{flex:none;align-self:center;width:1px;height:14px;margin-top:-1px;background:rgba(243,238,227,.22)}
.capsula--sutil{background:transparent;box-shadow:none;border-color:rgba(243,238,227,.12);color:var(--tinta-2);-webkit-backdrop-filter:none;backdrop-filter:none}
.capsula--sutil .capsula-punto{background:var(--coral)}
/* texto largo en celular: la cápsula se corta con puntos suspensivos en vez de desbordar */
.capsula{overflow:hidden;text-overflow:ellipsis}
@media(max-width:600px){.capsula{min-height:32px;padding:1px 13px 0 11px;gap:8px;font-size:10.5px;letter-spacing:.15em}}
/* pantalla táctil: sin desenfoque detrás (sobre el 3D cuesta cuadros); el fondo casi opaco basta */
@media(pointer:coarse){.capsula{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(22,15,50,.9)}}

/* ---------- 5. módulos compactos de información (solo datos reales) ---------- */
.modulos{display:flex;flex-wrap:wrap;gap:8px;width:fit-content;max-width:100%;padding:6px;border-radius:18px;
  border:1px solid rgba(243,238,227,.08);background:rgba(14,9,34,.42)}
.modulo{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico t" "ico v";align-items:center;column-gap:10px;row-gap:4px;
  min-width:0;flex:1 1 auto;padding:10px 16px 10px 12px;border-radius:13px;border:1px solid rgba(243,238,227,.1);
  background:linear-gradient(180deg,rgba(40,29,82,.66),rgba(26,18,58,.66));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.modulo:not(:has(> .modulo-ico)){grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "v";padding-left:16px}
.modulo-ico{grid-area:ico;display:grid;place-items:center;width:18px;height:18px;color:var(--naranja)}
.modulo:nth-child(3n+2) .modulo-ico{color:var(--rosa)}
.modulo-ico svg{width:16px;height:16px}
.modulo small{grid-area:t;display:block;font-family:var(--f-rotulo);font-weight:600;font-size:10.5px;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3);white-space:nowrap}
.modulo b{grid-area:v;display:block;font-family:var(--f-texto);font-weight:600;font-size:15px;line-height:1.15;letter-spacing:.01em;color:var(--marfil);
  font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
@media(max-width:600px){
  .modulos{width:100%;padding:5px;gap:6px;border-radius:16px}
  .modulo{padding:9px 12px 9px 10px;column-gap:8px}
  .modulo small{font-size:10px;letter-spacing:.12em}
  .modulo b{font-size:14px}
}

/* ---------- 6. botones ----------
   Cotizar (.btn.p y el envío del formulario): rosa → coral en un solo degradado (tonos hondos: blanco encima 4.7-4.9:1), filo de
   luz arriba y sombra neutra corta. Sin brillo de color, sin destellos. Hover: sube 1 px y el degradado se corre hacia el coral.
   Secundario (.btn): borde fino marfil sobre vidrio oscuro. Esquinas de 12 px (las cápsulas y chips siguen en píldora). */
.btn{border-radius:12px;font-family:var(--f-texto);font-weight:600;font-size:14px;letter-spacing:.015em;
  border:1px solid rgba(243,238,227,.2);background:rgba(18,12,43,.5);color:var(--marfil);box-shadow:none;
  transition:transform var(--dur-hover) var(--curva-entrada),background-color var(--dur-hover) var(--curva-entrada),border-color var(--dur-hover) var(--curva-entrada),background-position .7s var(--curva-entrada),color var(--dur-hover) var(--curva-entrada)}
.btn.sm{font-size:13px}
@media(hover:hover){
  .btn:not(.p):hover{border-color:rgba(243,238,227,.46);background-color:rgba(243,238,227,.06);box-shadow:none;transform:translateY(-1px)}
}
.btn.p,form.cot .btn.w,.nav ul a.btn.p{
  border:1px solid rgba(255,255,255,.08);color:#fff;
  background:linear-gradient(100deg,var(--rosa-hondo) 0%,#D3305A 45%,var(--coral-hondo) 100%) 0 0/160% 100% no-repeat,var(--rosa-hondo);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 26px -18px rgba(0,0,0,.9);
  text-shadow:0 1px 0 rgba(90,10,40,.25);
  transition:transform var(--dur-hover) var(--curva-entrada),background-position .7s var(--curva-entrada),box-shadow var(--dur-hover) var(--curva-entrada)}
.btn.p svg,form.cot .btn.w svg,.nav ul a.btn.p svg{color:#fff}
@media(hover:hover){
  .btn.p:hover,form.cot .btn.w:hover,.nav ul a.btn.p:hover{background-position:100% 0;filter:none;transform:translateY(-1px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 16px 28px -18px rgba(0,0,0,.95)}
}
.btn.p:active,form.cot .btn.w:active{transform:translateY(1px);transition-duration:.08s}
.btn.p::after,form.cot .btn.w::after{content:none}
/* WhatsApp como secundario: el verde solo en el ícono */
.btn.w:not(.p) svg{color:var(--wa,#25D366)}
.btn.agregado{border-color:var(--rosa);color:#FF8DB9;background:rgba(242,58,134,.1)}
@media(prefers-reduced-motion:reduce){.btn,.btn:hover,.btn.p:hover{transition:none;transform:none!important}}

/* ---------- 7. encabezado: logo + logotipo de texto ----------
   Logo original de 97 × 65 (barra de 76) y 78 × 52 en celular (barra de 60), alineado al centro con el menú. Sin filtro ni halo.
   Junto a él, «ATRACCIONES CUADRA» con la estética del logotipo: «ATRACCIONES» en versales romanas espaciadas (Josefin Sans, en el
   oro del logo) sobre «CUADRA» en la serif de alto contraste (Noto Serif Display, marfil). Mismo ancho los dos renglones.
   Hover muy discreto: el logo sube 1 px y crece 2.5 %; «ATRACCIONES» pasa al oro brillante. Nada cambia de tamaño en el texto. */
.nav{align-items:center}
.nav .logo{gap:12px;align-items:center;color:var(--marfil)}
html .nav .logo .logo-placa{display:inline-flex;align-items:center;line-height:0;filter:none;-webkit-filter:none}
html .nav .logo .logo-placa img{height:65px;width:auto;transform:translateZ(0);transition:transform .7s var(--curva-entrada)}
.logotipo{display:inline-grid;justify-items:start;gap:5px;line-height:1;text-transform:uppercase;white-space:nowrap}
.logotipo small{display:block;margin:0;font-family:var(--f-rotulo);font-weight:400;font-size:10.5px;line-height:1;letter-spacing:.35em;color:var(--oro-logo);
  padding-left:.1em;margin-right:-.35em;transition:color var(--dur-hover) var(--curva-entrada)}
.logotipo b{display:block;font-family:var(--f-display);font-weight:500;font-size:24px;line-height:.9;letter-spacing:.11em;color:var(--marfil);margin-right:-.11em}
@media(hover:hover){
  .nav .logo:hover .logo-placa img{transform:translate3d(0,-1px,0) scale(1.025)}
  .nav .logo:hover .logotipo small{color:var(--oro-brillo)}
}
.nav .logo:focus-visible{outline-offset:6px;border-radius:6px}
@media(max-width:900px){
  html .nav .logo .logo-placa img{height:54px}
  .nav .logo{gap:10px}
  .logotipo{gap:4px}
  .logotipo small{font-size:9.5px;letter-spacing:.26em;margin-right:-.26em}
  .logotipo b{font-size:19.5px;letter-spacing:.105em;margin-right:-.105em}
}
/* barra compacta: en celular o pantalla táctil no hay desenfoque detrás (fx.css), así que el fondo va casi opaco (.94): con .62
   (sistema.css ganaba a fx.css) las cintas «ATRACCIONES CUADRA» se leían a través de la barra, encima del logotipo */
@media(pointer:coarse),(max-width:900px){html .nav.solida::before{background:rgb(14,9,34)}}
@media(min-width:901px) and (pointer:fine){html .nav.solida::before{background:rgba(14,9,34,.74)}}
/* celular muy angosto: el logotipo de texto nunca se oculta (es lo que hace legible el nombre); solo se aprieta */
@media(max-width:360px){.nav .logo{gap:7px}.logotipo small{font-size:8.6px;letter-spacing:.24em;margin-right:-.24em}.logotipo b{font-size:17px}}
/* menú: enlaces en Onest 14 px; el submenú y el menú del celular en la serif nueva */
.nav>ul{font-family:var(--f-texto)}
@media(max-width:1100px){.nav>ul>li>a{font-family:var(--f-display);font-weight:500;letter-spacing:.01em}}

/* tapa de carga: logo de 140 × 94 y el logotipo de texto centrado debajo */
.logotipo--carga{justify-items:center;gap:7px}
.logotipo--carga small{font-size:11px;letter-spacing:.5em;margin-right:-.5em}
.logotipo--carga b{font-size:30px;letter-spacing:.12em;margin-right:-.12em}
html #carga .logo-placa{display:block;line-height:0;filter:none}

/* pie: logo de 146 × 98 (antes 124 × 83), sin placa */
html footer .marca .logo-placa{display:inline-block;line-height:0;padding:0;background:none;border:0;box-shadow:none;filter:none;align-self:flex-start}

/* ---------- 8. portada: los 6 stickers (.accesos) como tarjetas compactas premium ----------
   Seis tarjetas IGUALES (rejilla de 2 × 3, todas las filas del alto de la más alta): ícono en un cuadro fino, nombre en Onest 600 y
   un dato real en versales espaciadas (tipo de servicio). El h1 «Renta de juegos mecánicos» es la primera (filete y ícono en oro).
   Íconos en naranja (un solo acento); al pasar: filete naranja, sube 2 px y aparece la flecha. Mismos tiempos de entrada que toda
   la página (.entrada-hijos). No toca .hero, .hero .wrap, #stage-hero, .pantalla ni .hero-copy (área portada). */
html .hero .accesos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:10px;width:100%;max-width:600px}
html .hero .acceso-h1{display:flex;min-width:0;margin:0;padding:0;font:inherit;text-transform:none;letter-spacing:0}
html .hero .accesos > .acceso,html .hero .acceso-h1 .acceso{
  --d-h:calc(var(--retraso,0s) + min(var(--i,0),10) * var(--paso-entrada));
  position:relative;display:flex;align-items:center;gap:12px;width:100%;min-width:0;min-height:64px;padding:10px 14px 10px 10px;
  border-radius:14px;border:1px solid rgba(243,238,227,.13);
  background:linear-gradient(180deg,rgba(36,26,76,.84),rgba(20,13,46,.88));background-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 30px -26px rgba(0,0,0,.95);
  font-family:var(--f-texto);font-weight:600;font-size:14.5px;line-height:1.2;letter-spacing:.005em;color:var(--tinta);text-decoration:none;white-space:normal;
  transition:border-color var(--dur-hover) var(--curva-entrada) 0s,background-color var(--dur-hover) var(--curva-entrada) 0s,
    opacity var(--dur-entrada) var(--curva-entrada) var(--d-h),transform calc(var(--dur-entrada) + .1s) var(--curva-entrada) var(--d-h),filter var(--dur-entrada) var(--curva-entrada) var(--d-h)}
html .hero .acceso-ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  border:1px solid rgba(243,238,227,.1);background:rgba(243,238,227,.035);color:var(--naranja)}
html .hero .acceso-ico svg{width:18px;height:18px;stroke-width:1.6}
html .hero .acceso-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px;line-height:1.2}
.acceso-nombre{display:block}
.acceso-dato{display:block;font-family:var(--f-rotulo);font-weight:600;font-size:10.5px;line-height:1.15;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3)}
html .hero .acceso-flecha{flex:none;width:0;margin-left:-12px;opacity:0;overflow:hidden;color:var(--naranja);font-family:var(--f-texto);font-weight:500;
  transition:width var(--dur-hover) var(--curva-entrada),margin var(--dur-hover) var(--curva-entrada),opacity var(--dur-hover) var(--curva-entrada)}
/* la primera (h1): filete y ícono en el oro del logo, el dato en coral */
html .hero .acceso--titulo{border-color:rgba(201,162,78,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 30px -26px rgba(0,0,0,.95)}
html .hero .acceso--titulo .acceso-ico{color:var(--oro-brillo);border-color:rgba(201,162,78,.3)}
html .hero .acceso--titulo .acceso-dato{color:var(--coral)}
html .hero .acceso--titulo .acceso-flecha{color:var(--oro-brillo)}
@media(hover:hover){
  html .hero .accesos > .acceso:hover,html .hero .acceso--titulo:hover{border-color:rgba(246,139,44,.5);background-color:rgba(246,139,44,.05);background-image:linear-gradient(180deg,rgba(40,29,82,.88),rgba(22,15,50,.9));transform:translate3d(0,-2px,0);transition-delay:0s}
  html .hero .acceso--titulo:hover{border-color:rgba(201,162,78,.85)}
  html .hero .acceso:hover .acceso-flecha{width:14px;margin-left:0;opacity:1}
}
html .hero .accesos > .acceso:active,html .hero .acceso--titulo:active{transform:scale(.985);transition-duration:.08s;transition-delay:0s}
/* computadora angosta (901-1180 px): la columna de los accesos se encoge; el dato aprieta su tracking para caber en un renglón */
@media(min-width:901px) and (max-width:1180px){.acceso-dato{font-size:10px;letter-spacing:.1em}html .hero .acceso-ico{width:34px;height:34px}}
@media(max-width:900px){
  html .hero .accesos{gap:8px;max-width:none}
  html .hero .accesos > .acceso,html .hero .acceso-h1 .acceso{min-height:60px;padding:8px 10px 8px 8px;gap:9px;font-size:13.5px;border-radius:13px}
  html .hero .acceso-ico{width:32px;height:32px;border-radius:9px}
  html .hero .acceso-ico svg{width:16px;height:16px}
  html .hero .acceso-txt{gap:4px}
  .acceso-dato{font-size:10px;letter-spacing:.12em}
}
@media(prefers-reduced-motion:reduce){html .hero .accesos > .acceso,html .hero .acceso-h1 .acceso,html .hero .acceso-flecha{transition:none}}

/* ---------- 9. movimiento global (con sistema.css §10, css/fx.css, css/scroll.css y js/scroll.js) ----------
   Telón al cruzar una cinta: la sección que sigue se asienta 12 px en 1 s (antes 24 px + desenfoque de 8 px en .7 s, sobre toda la
   sección). Sin filtro sobre secciones enteras. */
html.anim .llega{animation:llega13 1s var(--curva-entrada) both}
@keyframes llega13{from{transform:translate3d(0,12px,0)}to{transform:none}}
@media(prefers-reduced-motion:reduce){html.anim .llega{animation:none}}

/* ---------- 10. fondo (shader de _fuentes/shader-referencia.html): evaluado y NO usado ----------
   Se probó adaptado (ruido lento en morado noche, filete de oro, sin cian ni neón ni mouse, a 1/4 y 1/2 de resolución, 20 cps,
   pausado fuera de vista) detrás de #contacto. A 1/4 el oro escalado se veía como manchas difusas (un halo, justo lo que el cliente
   no quiere); nítido, las curvas de nivel parecían un mapa topográfico que competía con los campos del formulario. Además sumaba
   un segundo contexto WebGL junto al del 3D. El morado liso queda más elegante: el cliente lo dejó como opcional. */


/* ---------- 11. ronda de corrección v13 ---------- */
/* tableta acostada (901-1100 px): con el menú colapsado, Cotizar queda a la vista junto a la hamburguesa */
.nav-cot-tableta{display:none}
@media(min-width:901px) and (max-width:1100px){
  .nav .nav-cot-tableta{display:inline-flex;margin-left:auto;margin-right:12px}
  .nav .nav-cot-menu{display:none}
}
/* el menú del celular cerrado no parpadea al girar el dispositivo: solo se desvanece al abrirse */
@media(max-width:1100px){body:not(.menu-abierto) .nav>ul{transition:none}}
/* acento único cálido: el cian de la paleta anterior se leía neón (anillo de foco y puntos pasan a oro y naranja) */
:root{--cian:#E9C37A}
[data-tono="cian"]{--tono:#F68B2C;--tono-claro:#FFC48E;--tono-suave:rgba(246,139,44,.08);--tono-filete:rgba(246,139,44,.45)}
.hero-pie::before{background:var(--naranja);box-shadow:none}
/* títulos: el acento (<em>) lleva el oro del logo con un paso discreto a coral, palabra por palabra (sobrevive a las entradas) */
h1 em,h2 em{color:var(--oro-brillo)}
@supports(-webkit-background-clip:text){
  h2 em{background:linear-gradient(95deg,var(--oro-brillo) 0%,#EFA65E 60%,#F58A6C 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.1em;margin-right:-.1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
}
/* los seis accesos usan la serif de marca (el primero es el h1); mismo tamaño para los seis */
html .hero .acceso-nombre{font-family:var(--f-display);font-weight:500;font-size:15.5px;letter-spacing:.012em;line-height:1.15}
@media(max-width:900px){html .hero .acceso-nombre{font-size:14.5px}}
@media(max-width:380px){.acceso-dato{letter-spacing:.08em}}

/* diálogo de AR en celular: la cápsula se parte en dos renglones en vez de cortarse */
@media(max-width:480px){#ar-dialogo .capsula{flex-wrap:wrap;white-space:normal;height:auto;padding-block:7px;row-gap:5px;line-height:1.25;overflow:visible}#ar-dialogo .capsula-sep{display:none}}
/* interludio Planea: el rótulo se lee aunque pasen los rayos de la rueda del video */
#interludio-planea .capitulo-cab{width:fit-content;padding:7px 14px;border-radius:999px;background:rgba(14,9,34,.66);border:1px solid rgba(243,238,227,.14)}
@media(min-width:901px) and (max-width:1100px){.nav .nav-cot-tableta{order:2}.nav .menu-btn{order:3}}
/* sin brillos de color en secciones de texto: los radiales esmeralda de la paleta anterior salen */
section[data-tono="esmeralda"]::before{content:none}