/* Secciones v4 (oct. 2026): menú, portada, capítulos, fotos enmarcadas y las secciones de servicios.
   Se carga después del <style> de index.html y de fx.css, y ANTES de css/sistema.css (los tokens --s-*, --tinta*, --filete-*,
   --tono*, --e-*, --r-* vienen de ahí). Entradas: .split / .entrada / .entrada--mascara / .entrada-hijos (sistema.css §10);
   nada queda invisible sin JS ni con "reducir movimiento". Una foto principal por sección; el resto va a la galería. */

/* ---------- menú: "Juegos", "Para tu evento" y "Planea tu feria" con submenú ---------- */
.nav .sub-l{list-style:none;margin:0;padding:0}
/* viñeta en rombo con el color de cada sección (sin resplandor) */
.nav .sub-l i{flex:none;width:6px;height:6px;border-radius:1px;transform:rotate(45deg);background:var(--c,var(--cobre));opacity:.9}
.nav .chev{display:inline-block;width:9px;height:9px;margin-left:6px;vertical-align:1px;opacity:.6;transition:transform .3s var(--ease-salida)}
@media(min-width:1101px){
  .nav .solo-movil{display:none}
  .nav .sub{position:relative}
  /* puente invisible para que el cursor llegue al submenú sin cerrarlo */
  .nav .sub::before{content:"";position:absolute;left:-14px;right:-14px;top:100%;height:24px}
  .nav .sub-l{position:absolute;z-index:2;top:calc(100% + 18px);left:-18px;min-width:236px;display:grid;gap:2px;padding:8px;border-radius:var(--r-tarjeta);border:1px solid var(--filete-2);background:rgba(14,9,34,.96);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 30px 60px -24px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.04);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s var(--ease-salida),transform .3s var(--ease-salida),visibility 0s .3s}
  .nav .sub:focus-within>.sub-l{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .nav .sub:focus-within .chev{transform:rotate(180deg)}
  /* al elegir una opción el submenú se cierra (app.js pone .sub-cerrado hasta que el cursor sale) */
  .nav .sub.sub-cerrado>.sub-l{opacity:0!important;visibility:hidden!important;transition-delay:0s!important}
  .nav .sub.sub-cerrado .chev{transform:none!important}
  .nav .sub-l a{display:flex;align-items:center;gap:12px;min-height:44px;padding:9px 12px;border-radius:calc(var(--r-tarjeta) - 8px);font-size:14px;font-weight:500;white-space:nowrap;color:rgba(243,238,227,.86);transition:background .2s,color .2s}
  .nav .sub-l a::after{display:none}
  .nav .sub-l a:focus-visible{background:rgba(243,238,227,.06);color:var(--marfil)}
  .nav .sub-l a[aria-current]{background:rgba(243,238,227,.08);color:var(--marfil)}
  .nav .sub:has(.sub-l [aria-current])>a{color:var(--marfil)}
  .nav .sub:has(.sub-l [aria-current])>a::after{transform:scaleX(1)}
}
@media(min-width:1101px) and (hover:hover){
  .nav .sub:hover>.sub-l{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .nav .sub:hover .chev{transform:rotate(180deg)}
  .nav .sub-l a:hover{background:rgba(243,238,227,.06);color:var(--marfil)}
}
@media(max-width:1100px){
  .nav .chev{display:none}
  .nav .sub-l{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0 14px}
  .nav .sub-l a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 15px;border-radius:var(--r-pill);border:1px solid var(--filete-2);background:rgba(243,238,227,.03);font-family:var(--f-texto);font-size:15px;font-weight:500;letter-spacing:0;color:rgba(243,238,227,.9)}
  .nav .sub-l a::after{display:none}
  .nav .sub-l a:active{background:rgba(243,238,227,.08)}
}
/* barra: el subrayado de la sección activa es un filete fino, sin brillo */
.nav ul a:not(.btn)::after{height:1px;bottom:-9px;box-shadow:none}
.nav>ul{gap:34px}
@media(max-width:1240px) and (min-width:1101px){.nav>ul{gap:22px}}

/* ---------- portada: 6 stickers del mismo tamaño (.acceso); el h1 "Renta de juegos mecánicos" es el primero (.acceso--titulo) ----------
   REGLA DE FAMILIA (sistema.css §4; aquí gana por especificidad .hero):
   · misma materia: panel oscuro rgba(14,9,34,.74) (sin desenfoque) + filete rgba(243,238,227,.24) + brillo interior de 1 px;
     .74 y no .46: los de la derecha quedan sobre los radios blancos de la rueda y el texto debe dar ≥ 4.5:1 (con blanco detrás, 6.4:1);
   · misma estructura: ícono del tono + texto + flecha; un solo tamaño (píldora de 44 px). Sin rotación ni brillo (lujo discreto). */
/* el bloque de texto se apoya en la base del marco de la rueda (lusion): el título arranca en el tercio medio de la ventana */
/* abajo deja libre la franja de .hero-pie (28 px + chip de 44 px + 16 px de aire): los stickers no quedan bajo "3D en vivo" */
.hero .wrap{align-items:end;padding-bottom:calc(max(28px,env(safe-area-inset-bottom,0px)) + 60px)}
.hero-copy{gap:clamp(18px,2vw,26px)}
.hero-accesos{display:flex;flex-direction:column;margin-top:clamp(4px,1vw,14px)}
.hero .acceso{border-color:rgba(201,162,78,.34);border-radius:var(--r-pill);background-color:rgba(14,9,34,.74);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
/* al pasar, el tono del servicio va como capa encima del panel: el fondo no se vuelve transparente sobre la rueda */
@media(hover:hover){.hero .accesos > .acceso:hover,.hero .acceso--titulo:hover{background-color:rgba(14,9,34,.74);background-image:linear-gradient(var(--tono-suave),var(--tono-suave))}}
/* tiempos: entrar rápido (.18 s), salir lento (.45 s). Los accesos son hijos de .entrada-hijos (sistema.css §10), cuya transición
   de entrada (opacity/transform con escalón) sustituía a la del hover: aquí van las dos, el escalón solo en la entrada */
/* .acceso--titulo va anidado en el h1 (no es hijo directo de .accesos): se nombra aparte para que lleve los mismos tiempos */
.hero .accesos > .acceso,.hero .acceso--titulo{--d-h:calc(var(--retraso,0s) + min(var(--i,0),10) * 55ms);
  transition:border-color .45s var(--ease-salida) 0s,background-color .45s var(--ease-salida) 0s,opacity .65s var(--ease-salida) var(--d-h),transform .85s var(--ease-salida) var(--d-h)}
.hero .acceso .acceso-flecha{transition-duration:.45s,.45s,.18s}
@media(hover:hover){
  .hero .accesos > .acceso:hover,.hero .acceso--titulo:hover,.hero .acceso:hover .acceso-flecha{transition-duration:.18s}
}
.hero .accesos > .acceso:active,.hero .acceso--titulo:active{transition-duration:.08s;transition-delay:0s}
/* la rueda no se corta con línea dura al bajar: el borde inferior de la portada se funde con el fondo. Corto (≤ 32 px): la base
   de la rueda completa queda a 36 px (4 %) del borde y con 64-104 px el degradado la apagaba */
.hero::after{height:clamp(24px,3.5vh,32px);background:linear-gradient(180deg,rgba(18,12,43,0),rgba(18,12,43,.55) 55%,var(--noche) 100%)}
/* 27 oct: la portada no deja espacio muerto abajo (antes 60 px extra bajo los stickers + 104 px del <style>): el aire se reparte */
@media(min-width:901px){.hero .wrap{padding-bottom:calc(max(24px,env(safe-area-inset-bottom,0px)) + 44px)}}
@media(max-width:900px){
  .hero-copy{gap:18px}
}

/* ---------- capítulos: numeral en serif itálica, rótulo mono y un filete corto con el degradado del logo ---------- */
.capitulo-cab{display:flex;align-items:center;gap:14px;margin:0}
.capitulo-cab .capitulo-num{font-size:clamp(28px,2.4vw,38px)}
.capitulo-cab .mini{color:var(--tinta-2)}
.capitulo-cab::after{content:"";flex:0 0 clamp(48px,6vw,88px);height:1px;background:var(--grad-fino)}

/* ---------- fotos enmarcadas (sistema.css §5): la foto se ve completa, a su proporción ---------- */
figure.marco{margin:0}
.marco--paspartu img{display:block;width:100%;height:auto}
.foto-pie{margin:0;padding:11px 2px 3px;color:var(--tinta-3)}
/* rótulo de imagen de referencia o video ilustrativo (sobre la foto, discreto) */
.ref-tag{border-radius:var(--r-pill);padding:5px 10px;background:rgba(10,7,26,.66);border-color:var(--filete-2);letter-spacing:.14em}

/* ---------- piezas comunes de las secciones ---------- */
/* 27 oct: el filete de oro del encabezado (sistema.css .cab) se queda; en las secciones con el título de capítulo arriba no hace
   falta otro (ya lo lleva .capitulo-cab) */
.galeria-cab{padding-bottom:0;border-bottom:0}
/* compás editorial: título ancho a la izquierda (≤ 2 líneas a 1440) y texto corto a la derecha, los dos apoyados abajo (antes el texto
   flotaba a alturas distintas porque .cab alineaba arriba y lo justificaba a la derecha) */
section .cab{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);align-items:end}
section .cab .lead{justify-self:start;max-width:38ch;margin-bottom:.4em}
section .cab.cab-una{grid-template-columns:minmax(0,1fr)}
/* 28 oct: sin el párrafo de la derecha el título se quedaba con todo el ancho y en una sola línea (en #armador llegaba a la esquina
   donde se coloca el botón "Pausar 3D"); 28ch ≈ la medida que antes le daba la columna de 1.4fr */
section .cab.cab-una h2{max-width:28ch}
@media(max-width:900px){section .cab{grid-template-columns:minmax(0,1fr)}section .cab .lead{margin-bottom:0}}
h2{text-wrap:balance}
.oferta .cab{margin-bottom:clamp(36px,4.4vw,64px)}
/* un solo ritmo vertical (27 oct): --sec-y de sistema.css, medido para que entre secciones no quede más de 12 vh vacíos */
.oferta{padding-block:var(--sec-y)}
/* 27 oct: el mismo ritmo en todas, el --sec-y de sistema.css (antes 72-112 px en #sillas-hero, #galeria y #contacto: dejaban huecos
   de 20-24 vh; con 48 px en celular #ar → #galeria aún medía 104 px, más de 12 vh) */
/* la palabra de acento de cada título va en el oro del logo (Playfair itálica, sistema.css); el tono de la sección queda en lo demás */
section :is(h1,h2) :is(em,.acento){color:var(--oro-logo)}
.puntos{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--filete-2)}
.puntos li{display:flex;gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--filete-1);color:var(--tinta-2);font-size:var(--t-secundario);line-height:1.55}
.puntos li::before{content:"";flex:none;width:6px;height:6px;transform:translateY(-2px) rotate(45deg);background:var(--tono)}
.oferta-acciones{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.oferta-acciones .btn svg{width:18px;height:18px}
@media(max-width:600px){.oferta-acciones .btn{flex:1 1 auto}}
.oferta-panel{display:flex;flex-direction:column;gap:26px;padding:24px;border-radius:var(--r-tarjeta);border:1px solid var(--filete-oro-suave);background:linear-gradient(180deg,#1E1650,var(--s-2) 60%);box-shadow:var(--sombra-1)}
.nota{margin:0;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;line-height:1.6;text-transform:uppercase;color:var(--tinta-3)}
.oferta-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(36px,6vw,104px);align-items:center}
.oferta-txt{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.oferta-txt > *{max-width:100%}
.oferta-txt .puntos{align-self:stretch}
@media(max-width:900px){.oferta-split{grid-template-columns:minmax(0,1fr);gap:32px}.oferta-panel{padding:20px}}

/* ---------- botón redondo de una sola señal ("+" agregar): la segunda acción de una fila o tarjeta, sin texto ---------- */
.btn.ico{position:relative;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;border:1px solid var(--filete-2);background:rgba(14,9,34,.42);display:inline-grid;place-items:center;
  font-family:var(--f-sans);font-weight:500;font-size:20px;line-height:1;flex:none}
.oferta-acciones .btn.ico{width:48px;height:48px;min-height:48px}
@media(hover:hover){.btn.ico:hover{border-color:var(--tono-filete);background:var(--tono-suave)}}
/* agregado = seleccionado: magenta (el cian es solo el foco); #FF5AAE da 6.2:1 sobre --s-2 */
.btn.ico.agregado{border-color:var(--magenta);background:rgba(230,37,143,.1);color:#FF5AAE;box-shadow:none}
/* tooltip real (title no sirve): el nombre de la acción al pasar el cursor (con retraso de .3 s) y al enfocar (sin retraso).
   Usa data-tip si el marcado lo trae; si no, el aria-label. Solo existe mientras se muestra: no ensancha la página. */
.btn.ico:is([data-tip],[aria-label]):focus-visible::after{content:attr(aria-label);position:absolute;bottom:calc(100% + 8px);left:50%;z-index:12;
  transform:translateX(-50%);width:max-content;max-width:min(260px,calc(100vw - 32px));white-space:normal;text-align:center;padding:6px 10px;border-radius:4px;
  background:rgba(12,8,32,.94);border:1px solid var(--filete-2);font:500 13px/1.25 var(--f-texto);letter-spacing:0;text-transform:none;color:var(--tinta);pointer-events:none;
  animation:icoTip .12s ease-out both}
.btn.ico[data-tip]:focus-visible::after{content:attr(data-tip)}
/* en la ficha el "+" va a la orilla derecha: el tooltip crece hacia la izquierda */
.ficha .btn.ico:focus-visible::after{left:auto;right:0;transform:none}
@media(hover:hover){
  .btn.ico:is([data-tip],[aria-label]):hover::after{content:attr(aria-label);position:absolute;bottom:calc(100% + 8px);left:50%;z-index:12;
    transform:translateX(-50%);width:max-content;max-width:min(260px,calc(100vw - 32px));white-space:normal;text-align:center;padding:6px 10px;border-radius:4px;
    background:rgba(12,8,32,.94);border:1px solid var(--filete-2);font:500 13px/1.25 var(--f-texto);letter-spacing:0;text-transform:none;color:var(--tinta);pointer-events:none;
    animation:icoTip .12s ease-out .3s both}
  .btn.ico[data-tip]:hover::after{content:attr(data-tip)}
  .ficha .btn.ico:hover::after{left:auto;right:0;transform:none}
  .btn.ico:focus-visible::after{animation-delay:0s}
}
@keyframes icoTip{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.btn.ico::after{animation:none!important}}
.btn.ico svg{width:16px;height:16px}

/* ---------- catálogo (#juegos): fichas grandes (≥ 400 px en computadora: 3 columnas solo si caben de 400 px, desde ≈ 1372 px;
   antes eran 3 desde 1200 px y medían 348-398 px), 2 en tableta y una debajo de otra, a todo el ancho, en celular ----------
   Foto COMPLETA en caja cuadrada (contain, sin copia borrosa detrás) y una sola acción por ficha: app.js §3 pinta
   <a class="enlace" data-ar>Ver en mi terreno →</a> + <button class="btn ico" data-add>+</button>, la pista "Arrastra para girar"
   como <span class="pista mono"> dentro de .media y la medida en una línea <p class="meta">; el conmutador Foto/3D de la sección
   (<div class="seg"> en #juegos .cab) convive con un control Foto|3D por tarjeta (.seg-ficha en .media, css/fichas.css). */
.fichas .grid{grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:24px}
/* una sola receta de tarjeta: --s-2 con filete de oro suave y --sombra-1; hover = filete de oro y, SOLO en la ficha con foto
   (:not(.en3d)), una inclinación 3D corta: con el 3D vivo el transform crearía un contexto de apilamiento y el control Foto|3D
   quedaría debajo del lienzo #gl (fichas.css) */
.ficha{border-radius:var(--r-tarjeta);border-color:var(--filete-oro-suave);background:linear-gradient(180deg,#1E1650,var(--s-2) 60%);box-shadow:var(--sombra-1);transition:border-color var(--t-medio) var(--ease-salida),transform var(--t-medio) var(--ease-salida),box-shadow var(--t-medio) var(--ease-salida)}
.ficha::before,.ficha::after{content:none}
@media(hover:hover){
  .ficha:hover{border-color:var(--filete-oro)}
  html.scroll-fx .ficha.rev.in:not(.en3d):hover,.ficha:not(.rev):not(.en3d):hover{transform:perspective(1000px) rotateX(1.6deg) translateY(-3px);box-shadow:var(--sombra-2),var(--sombra-oro)}
}
/* media más alta (5:6): los juegos altos (rueda, sillas) caben enteros en 3D */
.ficha .media,.ficha.chica .media{height:auto;min-height:0;aspect-ratio:5/6;overflow:hidden;background:var(--s-0)}
.ficha .media img{position:static;width:100%;height:100%;object-fit:contain;object-position:50% 50%!important;filter:none}
.ficha .texto{padding:24px;gap:12px}
.ficha .texto h3{font-size:19px}
.ficha .texto p{font-size:var(--t-secundario);line-height:1.55}
.ficha .texto p:empty{display:none}
.ficha .acciones{gap:8px 16px;align-items:center;justify-content:space-between}
.ficha .meta{margin:0;font:400 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
.ficha .medidas{letter-spacing:.08em}
.ficha .pista{position:absolute;right:12px;bottom:12px;z-index:7;margin:0;padding:7px 10px;border-radius:var(--r-pill);background:rgba(10,7,26,.66);color:var(--tinta-2);font-size:11px;letter-spacing:.12em;
  opacity:0;transition:opacity .2s;pointer-events:none}
@media(hover:hover){.ficha.en3d:hover .pista{opacity:1}}
/* conmutador Foto / 3D de la sección: control segmentado en el encabezado */
.fichas .cab .seg{grid-column:1/-1;justify-self:start;display:inline-flex;gap:2px;padding:3px;border:1px solid var(--filete-2);border-radius:var(--r-pill);background:rgba(14,9,34,.42)}
.fichas .cab .seg button{height:38px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--tinta-2);font:500 13px/1 var(--f-texto);letter-spacing:.01em;text-transform:none;cursor:pointer;
  transition:background-color .15s ease-out,color .15s ease-out}
@media(pointer:coarse){.fichas .cab .seg button{height:44px}}
@media(hover:hover){.fichas .cab .seg button:hover{color:var(--tinta)}}
.fichas .cab .seg [aria-pressed="true"]{background:var(--tono-suave);color:var(--tinta)}
/* app.js estira la última ficha a todo el ancho cuando el número es impar: con columnas automáticas no hace falta */
.fichas .grid > .ficha{grid-column:auto!important}
@media(max-width:1199px){.fichas .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.ficha .texto{padding:20px}}
/* celular: una ficha debajo de otra, a todo el ancho del contenido. Antes era un carril horizontal: en 3D el deslizar de lado
   giraba el juego en vez de pasar a la siguiente ficha */
@media(max-width:699px){
  .fichas .grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .ficha .media,.ficha.chica .media{aspect-ratio:1/1}
  .ficha .texto{padding:20px}
  .ficha .texto p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}

/* ---------- gran soporte (28 oct): tarjeta de UNA foto grande. El encabezado lleva el título a la izquierda y las acciones
   (Cotizar, "+", a escala en AR) a la derecha; debajo, la foto gran-soporte-3 (1448 × 964) en marco de oro, centrada y con el alto
   limitado a 74 svh para que título y foto quepan en una pantalla. Sin descripción. ---------- */
section .cab.gs-cab{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.gs-acciones{justify-self:end;margin-bottom:.4em}
/* figure.gs-foto: gana a figure.marco{margin:0} (misma especificidad, va después) para centrarse */
figure.gs-foto{width:100%;max-width:min(100%,calc(74svh * 1448 / 964 + 2 * var(--marco-hueco,7px)));margin:0 auto}
.gs-foto picture{display:block}
.gs-foto img{display:block;width:100%;height:auto;aspect-ratio:1448/964;object-fit:cover}
.gs-foto .ref-tag{top:14px;right:14px}
@media(max-width:900px){section .cab.gs-cab{grid-template-columns:minmax(0,1fr)}.gs-acciones{justify-self:start;margin:0}.gs-foto{max-width:100%}}

/* ---------- Roll a Ball (#destreza): el juego de destreza que más vende. Título grande con el video ilustrativo (IA, 16:9, data-auto)
   a su derecha, dos fotos reales (fachada e interior, ronda 6) y UNA acción. Sin ilustración ni vista 3D chica (el modelo sigue en la
   AR y el armador) ---------- */
.rb-cab{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,36vw,520px);align-items:end;gap:clamp(20px,4vw,64px);margin-bottom:clamp(28px,3.5vw,48px)}
.rb-cab .dz-intro{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0}
.rb-cab h2{font-size:var(--t-portada);line-height:1.02;max-width:13ch}
.rb-video{margin:0;min-width:0}
.rb-video .foto-completa{border-radius:1px}
.rb-video video{object-fit:cover;background:var(--s-0)}
.rb-cab .rb-medida{margin:0 0 .6em;color:var(--tinta-3)}
.rb-fotos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,1.8vw,24px);align-items:start}
.rb-fotos figure{margin:0;min-width:0}
.rb-fotos .foto-completa{aspect-ratio:var(--r,1);border-radius:1px}
.rb-fotos figcaption{padding:11px 2px 0}
.rb-acciones{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:clamp(22px,2.6vw,36px)}
@media(max-width:900px){
  .rb-cab{grid-template-columns:minmax(0,1fr);align-items:start;gap:18px}
  .rb-cab .rb-medida{margin:0}
  .rb-fotos{grid-template-columns:minmax(0,1fr);gap:14px}
  .rb-acciones .btn{flex:1 1 auto}
}

/* ---------- circo: dos fotos completas (la carpa sin identificar, horizontal, y la de 40 m, vertical) + comparación a escala 30 / 40 m.
   Tres columnas en computadora; en tableta las fotos van lado a lado y el panel abajo; en celular todo una cosa bajo otra ---------- */
.circo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr) minmax(0,1.1fr);gap:clamp(20px,3vw,40px);align-items:start}
.circo-foto{margin:0;min-width:0}
.circo-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-content:start}
.circo-escala{display:block;width:100%;max-width:320px;height:auto;margin:0 auto;overflow:visible}
.circo-escala .c40,.circo-escala .c30{fill:none;stroke-linecap:round}
.circo-escala text{font-weight:600}
html.anim .circo-panel.entrada .c40{stroke-dasharray:1131;stroke-dashoffset:1131;transition:stroke-dashoffset 1.6s var(--ease-salida) .2s}
html.anim .circo-panel.entrada .c30{stroke-dasharray:848;stroke-dashoffset:848;transition:stroke-dashoffset 1.4s var(--ease-salida) .5s}
html.anim .circo-panel.entrada.entra .c40,html.anim .circo-panel.entrada.entra .c30{stroke-dashoffset:0}
.circo-ops{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.circo-op{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:var(--r-tarjeta);border:1px solid var(--filete-oro-suave);background:linear-gradient(180deg,#1E1650,var(--s-2) 60%);box-shadow:var(--sombra-1)}
.circo-op b{font-family:var(--f-display);font-weight:600;font-size:clamp(36px,3.2vw,48px);line-height:1;letter-spacing:-.01em;color:var(--marfil);font-variant-numeric:lining-nums}
.circo-op b small{font-size:.45em;letter-spacing:0;margin-left:3px;color:var(--oro-logo)}
.circo-op p{margin:0;font-size:var(--t-secundario);line-height:1.55;color:var(--tinta-2)}
.circo-op .oferta-acciones{gap:8px;margin-top:auto}
.circo-op .btn{flex:1 1 auto}
@media(max-width:900px){.circo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.circo-panel{grid-column:1/-1}.circo-escala{max-width:260px}.circo-op{padding:20px}}
@media(max-width:600px){.circo-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){.circo-ops{grid-template-columns:1fr}}

/* ---------- carpas, toldos, vallas, gradas y planta de luz (28 oct): cinco tarjetas iguales, cada una con UNA foto (3:2) en marco de
   oro, el nombre en Playfair y las dos acciones; sin texto. Rejilla de 6 columnas: las dos primeras (carpas y toldos, los nombres
   largos) ocupan 3 (dos por fila, anchas) y las tres últimas 2 (tres por fila): no queda hueco y el nombre cabe junto a los botones.
   En tableta dos por fila (la última a lo ancho) con el pie en columna; en celular una bajo otra. ---------- */
.servicios-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(28px,3.2vw,44px) clamp(16px,2vw,24px)}
.servicio{grid-column:span 3;display:flex;flex-direction:column;min-width:0;scroll-margin-top:calc(var(--nav) + 24px)}
.servicio:nth-child(n+3){grid-column:span 2}
.servicio-media{position:relative;margin:0;background:var(--s-2)}
.servicio-media picture{display:block}
.servicio-media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.servicio-media .ref-tag{top:14px;right:14px}
.servicio-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:16px 2px 0}
.servicio-pie h3{display:flex;align-items:center;gap:11px;min-width:0;font-size:clamp(19px,1.5vw,23px)}
.servicio-pie h3::before{content:"";flex:none;width:6px;height:6px;border-radius:1px;background:var(--tono);transform:rotate(45deg)}
.servicio-acciones{display:flex;align-items:center;gap:10px;flex:none}
@media(hover:hover){.servicio:hover .servicio-media{border-color:var(--filete-oro)}}
@media(max-width:1100px){.servicios-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.servicio,.servicio:nth-child(n+3){grid-column:auto}.servicio:last-child{grid-column:1/-1}
  .servicio-pie{flex-direction:column;align-items:flex-start;gap:12px}}
@media(max-width:600px){.servicios-grid{grid-template-columns:minmax(0,1fr);gap:28px}.servicio:last-child{grid-column:auto}.servicio-pie{padding-top:12px}}

/* ---------- mesas VIP (28 oct): título, chips y botón a la izquierda; a la derecha dos fotos verticales (540 × 720) en marcos de oro,
   la segunda escalonada hacia abajo, y en el escalón que queda arriba de ella la placa marfil "Mesas VIP". Sin descripción. ---------- */
.mv{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.mv-sellos{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0;color:var(--tinta-2)}
.mv-sellos span{display:inline-flex;align-items:center;gap:14px}
.mv-sellos span + span::before{content:"";width:5px;height:5px;background:var(--tono);transform:rotate(45deg)}
.mv .btn svg{width:18px;height:18px;transition:transform .3s var(--ease-salida)}
@media(hover:hover){.mv .btn:hover svg{transform:translateX(3px)}}
.mv-fotos{--escalon:clamp(44px,4.4vw,60px);position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,1.6vw,22px);align-items:start;width:100%;max-width:640px;justify-self:end}
.mv-foto{margin:0;min-width:0}
.mv-foto picture{display:block}
.mv-foto img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.mv-fotos .mv-foto-2{margin-top:var(--escalon)} /* más específico que figure.marco{margin:0} */
/* la placa cabe en el escalón (44-60 px) sin tocar la foto de abajo; z 4: sobre los rombos del marco (z 3) */
.mv-placa{position:absolute;z-index:4;top:4px;right:2px;margin:0;width:max-content;max-width:calc(50% - 8px);padding:8px 16px;font-size:12px;letter-spacing:.2em;white-space:nowrap}
@media(max-width:900px){.mv{grid-template-columns:minmax(0,1fr)}.mv-fotos{order:-1;justify-self:center;max-width:560px}}
@media(max-width:600px){.mv-fotos{--escalon:44px;gap:10px}.mv-placa{padding:7px 12px;font-size:11px;letter-spacing:.16em}}

/* ---------- pines (sobre sistema.css §8, por especificidad): copia más angosta y velo corto que no se come la base del modelo;
   en los destacados data-copy="der" (destacados.js) manda la copia a la derecha para alternar el lado ---------- */
.pin .pin-escena > .pin-copy{max-width:440px}
.pin[data-copy="der"] .pin-escena > .pin-copy{justify-self:end}
.pin .pin-escena > .pin-velo{height:34%;background:linear-gradient(180deg,rgba(12,8,30,0),rgba(12,8,30,.7))}

/* ---------- interludios (sobre sistema.css §9): 27 oct, el video va a pantalla completa desde el primer píxel del tramo (ya no se
   abre desde un recuadro: el cliente pidió videos completos a pantalla) y se mueve un poco con el scroll; el texto entra desde
   --p = .5. Cada interludio recorre su video a su propio paso (--paralaje) ---------- */
#interludio-evento{--paralaje:6%}
#interludio-planea{--paralaje:8%}
.interludio .interludio-video{transform:translate3d(0,calc((.5 - var(--p,.5)) * var(--paralaje,6%)),0) scale(1.12)}
/* los últimos 160 px de la escena vuelven a --s-1 (página): al salir el interludio no queda una línea recta contra la sección
   siguiente; abajo el degradado esmeralda deja leer el título */
.interludio .interludio-velo{background:linear-gradient(180deg,rgba(18,12,43,0) calc(100% - 160px),var(--s-1) 100%),linear-gradient(180deg,rgba(12,8,30,.12) 46%,rgba(22,16,54,.82))}
/* el bloque de texto es opaco en --p = .6, justo cuando scroll.js pone .texto-on y entran las palabras del título */
.interludio .interludio-texto{--pt:clamp(0,calc((var(--p,1) - .5) * 10),1)}
.interludio-texto .capitulo-cab .mini{color:rgba(243,238,227,.86)}
.interludio .marco--escena{z-index:2}

/* ---------- herramientas en .app-full (arma tu feria y realidad aumentada) ---------- */
.app-full{border-radius:var(--r-marco)}
.app-abrir svg{width:16px;height:16px}
.app-barra .app-titulo{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* en celular el botón de la barra queda solo con su ícono (la portada ya invita a abrir) */
@media(max-width:600px){.app-abrir{width:44px;padding:0;flex:none}.app-abrir span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.app-portada-t{font-family:var(--f-sans);font-weight:500;font-size:20px;letter-spacing:-.01em} /* es un botón: sans, sin mayúsculas */
.app-portada .rombo{width:8px;height:8px}
/* js/pantalla.js abre la sección completa: el ícono de su botón sobra en la portada (ya lleva el rombo) */
.app-full .app-portada[data-pantalla-completa]::before{content:none}
.pc-abierta .app-full .tablero{height:auto}
/* armador: la paleta se desplaza dentro de la herramienta y el terreno llena el resto */
.app-full .tablero{height:100%;min-height:0;padding:14px;gap:14px;grid-template-rows:minmax(0,1fr)}
.app-full .paleta{min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin}
.app-full .terreno{height:auto;min-height:0;border-radius:var(--r-marco)}
@media(max-width:900px){
  .app-full .tablero{grid-template-rows:auto minmax(0,1fr);padding:10px;gap:10px}
  .app-full .paleta{overflow-x:auto;overflow-y:hidden;margin:0;padding:0 0 4px}
}

/* ---------- plano (js/plano.js agrega su planificador debajo de esta barra) ---------- */
.plano-barra{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-bottom:clamp(-8px,-1vw,0px)}
@media(max-width:900px){.plano-barra{justify-content:flex-start;margin-bottom:20px}}

/* ---------- galería: encabezado del capítulo IV (los álbumes los arma js/galeria.js en #galeria-app) ---------- */
.galeria-cab{display:grid;gap:var(--e-5);justify-items:start;margin-bottom:clamp(40px,5vw,72px)}
.galeria-cab h2{max-width:20ch}

/* ---------- contacto ---------- */
.contacto-txt{display:flex;flex-direction:column;gap:22px}
.contacto .datos{margin-top:8px}
.contacto .datos a{padding:16px;border-radius:var(--r-tarjeta);border-color:var(--filete-oro-suave);background:var(--s-2)}
@media(hover:hover){.contacto .datos a:hover{border-color:var(--filete-oro)}}
form.cot{padding:24px;border-radius:var(--r-tarjeta);border-color:var(--filete-oro-suave);background:linear-gradient(180deg,#1E1650,var(--s-2) 60%)}
form.cot:focus-within{border-color:var(--filete-oro)}
@media(hover:hover){form.cot:hover{border-color:var(--filete-oro)}}
@media(max-width:900px){form.cot{padding:20px}}
.cot-chip span{border-radius:var(--r-pill)}
.cot-chips{gap:8px}

/* ---------- calendario: doce meses compactos (antes doce tarjetas vacías de 200 px con su botón) ----------
   Toda la tarjeta abre WhatsApp para apartar ese mes; los meses con ferias publicadas ocupan dos columnas. */
.cal-meses{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.cal-mes{position:relative;min-height:0;gap:10px;padding:16px;border-radius:var(--r-tarjeta);border-color:var(--filete-oro-suave);background:var(--s-2)}
@media(hover:hover){.cal-mes:hover{border-color:var(--tono-filete)}}
.cal-mes:has(.cal-eventos:not(:empty)){grid-column:span 2}
.cal-nombre{font-weight:500;letter-spacing:-.02em;font-size:19px}
.cal-vacio{display:none}
.cal-apartar{display:inline-flex;align-items:center;gap:7px;margin-top:auto;font-size:13px;font-weight:500;line-height:1.2;color:var(--tinta-2);text-decoration:none}
.cal-apartar::before{content:"";position:absolute;inset:0;border-radius:inherit}
.cal-apartar::after{content:"→";color:var(--tono-claro);transition:transform var(--t-medio) var(--ease-salida)}
@media(hover:hover){.cal-mes:hover .cal-apartar{color:var(--tinta)}.cal-mes:hover .cal-apartar::after{transform:translateX(4px)}}
.cal-apartar:focus-visible{outline:0!important;box-shadow:none!important}
.cal-mes:has(.cal-apartar:focus-visible){outline:2px solid var(--cian);outline-offset:3px}
.cal-leyenda{display:flex;align-items:center;gap:10px;margin:18px 0 0;color:var(--tinta-3)}
.cal-leyenda::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;border:1px solid var(--tono)}
@media(max-width:1100px){.cal-meses{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){
  .cal-meses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;margin:0;padding:0;scroll-snap-type:none}
  .cal-mes{width:auto;min-height:0;padding:12px;gap:8px}
  .cal-mes:has(.cal-eventos:not(:empty)){grid-column:1/-1}
  .cal-nombre{flex-direction:column;align-items:flex-start;gap:2px;font-size:16px}
  .cal-apartar{font-size:12px}
}

/* sin ferias publicadas (CALENDARIO vacío): una tira de doce chips, uno por mes (antes una línea de tiempo de 550 px para un dato).
   Cada chip abre WhatsApp para apartar ese mes; el mes actual lleva el filete ámbar y el año va en el primero y en enero. */
.calendario{padding-block:clamp(40px,3.6vw,52px)}
.calendario .cab{margin-bottom:var(--e-5)}
.calendario h2{font-size:var(--t-2)}
/* sin ferias: título y texto a la izquierda; a la derecha la tira de meses y, debajo, el aviso (una franja de ≈ 220 px) */
.calendario .wrap:has(.cal-meses.sin-eventos){display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto auto;column-gap:clamp(24px,4vw,64px);row-gap:12px;align-items:center}
.calendario .wrap:has(.cal-meses.sin-eventos) .cab{grid-row:1/3;grid-template-columns:minmax(0,1fr);gap:10px;margin:0}
.calendario .wrap:has(.cal-meses.sin-eventos) .cab h2{margin-top:6px}
.calendario .wrap:has(.cal-meses.sin-eventos) .cab .lead{max-width:40ch;margin:0}
.calendario .wrap:has(.cal-meses.sin-eventos) .cal-leyenda{grid-column:2;margin:0;align-self:start}
.cal-meses.sin-eventos{grid-column:2;align-self:end;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border-top:0}
/* sin ferias, app.js deja a la vista solo el mes actual y los dos siguientes (los demás llevan hidden) */
.cal-mes[hidden]{display:none!important}
.cal-meses.sin-eventos::-webkit-scrollbar{display:none}
.cal-meses.sin-eventos .cal-mes{flex:none;position:relative;display:inline-flex;flex-direction:row;align-items:center;gap:8px;width:auto;min-width:0;min-height:44px;padding:0 16px;border:1px solid var(--filete-2);border-radius:var(--r-pill);
  background:rgba(14,9,34,.42);box-shadow:none!important;transform:none!important;transition:border-color var(--t-rapido),background-color var(--t-rapido)}
.cal-meses.sin-eventos .cal-mes::before,.cal-meses.sin-eventos .cal-mes::after{content:none!important}
.cal-meses.sin-eventos .cal-nombre{display:inline-flex;flex-direction:row;align-items:baseline;gap:6px;margin:0;font:500 13px/1 var(--f-texto);letter-spacing:.01em;text-transform:none;color:var(--tinta-2);transition:color var(--t-rapido)}
.cal-meses.sin-eventos .cal-anio{display:none;font-size:11px;letter-spacing:.12em;color:var(--tinta-3)}
.cal-meses.sin-eventos .con-anio .cal-anio{display:inline}
/* mes en curso: el tono de la sección (esmeralda #2E9C86, 5.6:1 sobre --s-1) */
.cal-meses.sin-eventos .cal-mes.actual{border-color:var(--tono)}
.cal-meses.sin-eventos .cal-mes.actual .cal-nombre{color:var(--tinta)}
@media(hover:hover){.cal-meses.sin-eventos .cal-mes:hover .cal-nombre{color:var(--tinta)}.cal-meses.sin-eventos .cal-mes:hover{border-color:var(--filete-3);background:rgba(243,238,227,.06)}}
/* el enlace cubre todo el chip (::before); su texto queda solo para lectores de pantalla (ancho 0, sin letra de 0 px) */
.cal-meses.sin-eventos .cal-apartar{width:0;margin:0 0 0 -8px;overflow:hidden;white-space:nowrap;font-size:11px;color:transparent}
.cal-meses.sin-eventos .cal-apartar::after{content:none}
.cal-meses.sin-eventos .cal-mes:has(.cal-apartar:focus-visible){outline-offset:2px}
.calendario .cal-leyenda{margin-top:14px}
@media(max-width:900px){
  .calendario .wrap:has(.cal-meses.sin-eventos){grid-template-columns:minmax(0,1fr);grid-template-rows:auto;row-gap:14px}
  .calendario .wrap:has(.cal-meses.sin-eventos) .cab{grid-row:auto}
  .calendario .wrap:has(.cal-meses.sin-eventos) .cal-leyenda,.cal-meses.sin-eventos{grid-column:auto}
  .cal-meses.sin-eventos{display:flex;flex-wrap:nowrap;gap:6px;margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:none;scroll-padding:0 var(--gutter)}
  .cal-meses.sin-eventos .cal-mes{width:auto;min-height:44px;padding:0 14px}
}

/* ---------- pie: marca y contacto, y cuatro columnas de enlaces ---------- */
footer{background:linear-gradient(180deg,var(--s-1),var(--s-0))}
footer::before{background:var(--grad-fino);opacity:1}
footer .wrap{grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:36px}
footer .pie-contacto{margin-top:4px}
@media(max-width:1100px){footer .wrap{grid-template-columns:repeat(4,minmax(0,1fr))}footer .marca{grid-column:1/-1;max-width:560px}}
@media(max-width:900px){footer .wrap{grid-template-columns:1fr 1fr;gap:28px 20px}}

/* ---------- clientes: el mismo relleno de abajo que las demás (index.html le daba 7 vw: 100 px de hueco a 1440) ---------- */
#clientes{padding-bottom:calc(var(--sec-y) - 8px)} /* la marquesina de abajo ya trae 14 px de relleno propio */

/* ---------- cómo trabajamos (28 oct): cada paso es solo su título y la lista de montaje y operación son tres rótulos cortos ---------- */
.paso{padding-bottom:10px}
.paso h3{font-size:clamp(18px,1.4vw,22px)}
#seguridad li{font-family:var(--f-texto);font-weight:500;font-size:var(--t-chico);color:var(--tinta)}

/* ---------- sillas voladoras: hero horizontal (#sillas-hero). Título grande, medida del cliente en mono y, a todo lo ancho,
   un cuadro 16:9 con la torre completa en 3D en vivo (#stage-sillas-hero, app.js) o, sin 3D, el video grabado del propio 3D
   (#sillas-hero-video, que app.js destapa; también el <head> si el 3D falla). Fondo liso: nada de halos detrás ---------- */
.sillas-hero .wrap{display:grid;gap:clamp(28px,3.5vw,48px)}
.sillas-hero-cab{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(20px,4vw,64px)}
.sillas-hero-cab h2{font-size:var(--t-portada);line-height:1.02;max-width:15ch}
.sillas-hero-cab .cta-fila{margin-bottom:.4em}
/* margen arriba: la caja de la itálica de "voladoras" baja ≈ 22 px de su renglón y llegaba a pisar la medida */
.sillas-hero-medida{margin:.8em 0 0;color:var(--tinta-3)}
/* sin isolation: la etiqueta .sillas-hero-pie (z 7) debe quedar SOBRE el lienzo fijo #gl (z 5); con un contexto de apilamiento
   propio todo el cuadro quedaba debajo del 3D y la torre tapaba el rótulo */
.sillas-hero-medio{position:relative;width:min(100%,calc(82svh * 16 / 9));aspect-ratio:16/9;margin:0 auto;background:var(--s-0);
  border:1px solid var(--filete-2);border-radius:var(--r-marco);overflow:hidden}
#stage-sillas-hero{inset:0}
#sillas-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--s-0)}
/* la etiqueta "3D en vivo" abajo a la izquierda del cuadro, solo con 3D */
.sillas-hero-pie{position:absolute;z-index:var(--z-sobre-gl);left:14px;bottom:12px;margin:0;display:flex;align-items:center;gap:10px;color:rgba(213,222,216,.9);pointer-events:none}
.sillas-hero-pie::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cian)}
/* sin 3D, o cuando el hero muestra el video grabado (.sillas-hero--video, app.js), no hay "3D en vivo" que anunciar */
html:not(.con3d) .sillas-hero-pie,.sillas-hero--video .sillas-hero-pie{display:none}
@media(max-width:900px){
  .sillas-hero-cab{grid-template-columns:minmax(0,1fr);align-items:start;gap:14px}
  .sillas-hero-cab .cta-fila{margin:0}
  /* en vertical un 16:9 de 375 px mide 211 px de alto y la torre (vertical) salía chica: el cuadro pasa a 4:3 (sigue horizontal;
     el 3D se encuadra al cuadro real y el video 16:9 se recorta por los lados con object-fit: cover, la torre centrada cabe entera) */
  .sillas-hero-medio{width:auto;max-width:none;margin:0 calc(-1 * var(--gutter));aspect-ratio:4/3;border-radius:0;border-left:0;border-right:0}
  /* la etiqueta se acorta a "3D en vivo": así no cruza la base de la torre, que va centrada */
  .sillas-hero-pie{left:var(--gutter);font-size:11px;letter-spacing:.12em;gap:8px}
  .sillas-hero-pie-n{display:none}
}

/* ---------- sillas: texto según "reducir movimiento" (la escena queda quieta) ---------- */
.sin-mov{display:none}
@media(prefers-reduced-motion:reduce){.con-mov{display:none}.sin-mov{display:inline}}
/* sin 3D la simulación no existe: la sección se va (arriba, en #sillas-hero, queda el video de la torre) */
html:not(.con3d) #sillas{display:none}

/* ---------- armador: la nota de alcance va debajo del marco de la herramienta ---------- */
#armador .app-full + .nota-armador{margin:14px 2px 0;color:var(--tinta-3)}

/* ---------- portada en celular: la rueda completa (con su base) cabe en la primera pantalla ---------- */
@media(max-width:900px){
  .hero .wrap{padding-top:calc(var(--nav) + 8px);padding-bottom:52px;gap:14px}
  .hero-copy{gap:14px}
  .hero .acceso{border-radius:var(--r-pill)}
  .pantalla{height:min(38svh,340px)}
  .hero-pie{bottom:12px}
}
@media(max-width:900px) and (max-height:700px){.pantalla{height:min(33svh,300px)}}

/* ---------- reducir movimiento ---------- */
@media(prefers-reduced-motion:reduce){
  html.anim .circo-panel.entrada .c40,html.anim .circo-panel.entrada .c30{stroke-dashoffset:0;transition:none}
}

/* Portada: los 6 stickers del mismo ancho y alto; el primero es el h1 "Renta de juegos mecánicos" y lleva a los juegos.
   Rejilla de 2 columnas iguales; todas las filas miden lo de la más alta (1fr) y el texto puede ir en dos renglones: nada se
   corta. Alto mínimo 48 px (56 px en celular, donde el título va en dos renglones). */
.hero .accesos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:10px;width:100%;max-width:640px}
.hero .acceso-h1{margin:0;padding:0;font:inherit;font-size:14px;font-weight:500;line-height:1.15;letter-spacing:0;text-transform:none;display:flex;min-width:0} /* sin la mayúscula ni la serif de los h1 (es un sticker más) */
.hero .accesos > .acceso,.hero .acceso-h1 .acceso{display:flex;width:100%;min-width:0;min-height:48px;padding:6px 14px 6px 12px;white-space:normal;line-height:1.15}
/* renglón de 18 px exactos: con 1.15 (16.1 px) el texto medía un píxel más que su caja al redondear */
.hero .acceso-txt{flex:1 1 auto;min-width:0;line-height:18px}
.hero .acceso-ico,.hero .acceso-flecha{flex:none}
.hero .acceso-h1 .acceso{font-family:var(--f-texto);font-size:14px;font-weight:500;letter-spacing:.005em;text-transform:none;color:var(--tinta)}
.hero .acceso--titulo{border-color:rgba(201,162,78,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(201,162,78,.14)}
.hero .acceso--titulo .acceso-flecha,.hero .acceso--titulo .acceso-ico{color:var(--oro-brillo)}
.hero .acceso--titulo .acceso-txt{color:var(--marfil,#F3EEE3)}
@media(max-width:900px){
  .hero .accesos{gap:8px}
  .hero .acceso-h1,.hero .acceso-h1 .acceso{font-size:13.5px}
  .hero .accesos > .acceso,.hero .acceso-h1 .acceso{min-height:56px;padding:6px 12px;gap:7px;border-radius:var(--r-pill)}
  .hero .acceso-ico{width:16px}
}