/* v13 · juegos — capa de la ronda v13 (29 oct 2026). Va al final de la cascada: aquí manda lo nuevo de esta área.
   Área «fichas»: presentación de cada atracción (pedido v13, punto 13; referencia de diseño: la captura de las sillas). Cubre
   el catálogo (#juegos, js/app.js §3 initFichas), el hero de las sillas (#sillas-hero) y su tramo 3D (#sillas), el carrusel
   (#carrusel-pin) y la tira de barco y chocones (#minis-juegos). Componentes compartidos de css/v13-marca.css: .capsula,
   .modulos/.modulo, .eyebrow y .btn.p; aquí solo su lugar en cada sección y el tono de cada juego (data-tono: el punto de la
   cápsula, el filete entre el modelo y el texto y los íconos de los módulos). Sin halos, sin brillos: bordes finos. */

/* «Vista 3D» va dentro de su envoltura .capsula-3d.solo3d (sin 3D se esconde con su separador); con 3D la envoltura no pinta
   caja: el separador y el texto siguen siendo piezas de la cápsula. */
.capsula .capsula-3d{display:contents}
/* ninguna cápsula se sale de su columna en celular: si no cabe, parte en dos renglones */
:is(.ficha,.sillas-hero,.sillas,.carrusel-pin,.mini-juego) .capsulas{max-width:100%;min-width:0}
:is(.ficha,.sillas-hero,.sillas,.carrusel-pin,.mini-juego) .capsula{max-width:100%}
@media(max-width:600px){:is(.ficha,.sillas-hero,.sillas,.carrusel-pin,.mini-juego) .capsula{white-space:normal;flex-wrap:wrap;row-gap:4px}}
/* tono del juego en sus piezas chicas */
:is(.ficha,.sillas-hero,.sillas,.carrusel-pin,.mini-juego) .capsula-punto{background:var(--tono)}
:is(.ficha,.sillas-hero,.sillas,.carrusel-pin,.mini-juego) .modulo:nth-child(n) .modulo-ico{color:var(--tono-claro)}

/* ---------- 1. «Ver en tu terreno»: acción secundaria discreta (abre la AR de ese juego: data-ar-abrir, js/explora.js) ---------- */
.btn.ver-terreno{gap:8px}
.btn.ver-terreno svg{width:16px;height:16px;flex:none;color:var(--tono-claro,var(--oro-logo))}
.btn.ver-terreno:focus-visible{outline:2px solid var(--tono-claro,var(--oro-logo));outline-offset:2px}

/* ---------- 2. catálogo (#juegos): una tarjeta por atracción ----------
   Arriba el modelo 3D (o su foto), abajo el texto: cápsula, nombre grande, módulos y acciones. Un filete fino separa las dos
   partes y lleva, a la izquierda, un trazo corto del tono del juego. */
.fichas .cab .eyebrow{margin:0 0 14px}
.ficha .texto{position:relative;padding:22px 24px 24px;gap:16px;border-top:0}
.ficha .media + .texto{border-top:1px solid rgba(243,238,227,.08)}
.ficha .texto::before{content:"";position:absolute;left:24px;top:-1px;width:56px;height:2px;border-radius:0 0 2px 2px;background:var(--tono);pointer-events:none}
.ficha .texto .capsulas{margin:0}
.ficha .texto .fila{display:block}
.ficha .texto h3.ficha-t{margin:0;font-size:clamp(24px,2vw,30px);line-height:1.04;text-wrap:balance;overflow-wrap:break-word}
.ficha .texto .modulos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,138px),1fr));gap:8px;width:auto}
.ficha .texto .modulo{min-width:0}
.ficha .texto .modulo b{white-space:normal}
/* acciones: Cotizar (crece) · Ver en tu terreno · «+» (prepararFichas lo pone en .acciones) */
.ficha .ficha-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto}
.ficha .ficha-cta .ficha-cotizar{flex:1 1 auto}
.ficha .ficha-cta .ver-terreno{flex:1 1 auto}
.ficha .ficha-cta .acciones{display:flex;flex:none;gap:0;margin:0}
.ficha .ficha-cta .acciones:empty{display:none}
@media(max-width:699px){
  .ficha .texto{padding:20px 18px 20px;gap:14px}
  .ficha .texto::before{left:18px}
  /* celular: Cotizar y el «+» arriba, «Ver en tu terreno» abajo a todo lo ancho; nada se corta y todo mide 44 px */
  .ficha .ficha-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .ficha .ficha-cta .ver-terreno{grid-column:1/-1;grid-row:2}
  .ficha .ficha-cta:not(:has(.acciones:not(:empty))) .ficha-cotizar{grid-column:1/-1}
}

/* ---------- 3. sillas voladoras: hero (#sillas-hero) ----------
   Izquierda: capítulo, cápsulas y el nombre grande. Derecha, abajo: las dos medidas del cliente en módulos y las acciones. */
/* el título nunca se encoge por debajo de su palabra más larga («VOLADORAS»): la columna de la derecha cede y sus piezas
   pasan de renglón (en 1024 px se encimaban) */
@media(min-width:901px){.sillas-hero-cab{grid-template-columns:minmax(min-content,1fr) minmax(0,560px)}}
.sillas-hero .sillas-txt{display:grid;gap:16px;justify-items:start;min-width:0}
.sillas-hero .sillas-txt .capsulas{margin-top:4px}
.sillas-hero-info{display:grid;gap:18px;justify-items:start;max-width:560px;min-width:0;padding-bottom:.45em}
.sillas-hero-info .modulo{min-width:150px}
.sillas-hero-cab .sillas-hero-info .cta-fila{margin:0;gap:12px 22px}
@media(max-width:900px){
  .sillas-hero .sillas-txt{gap:12px}
  .sillas-hero-info{max-width:none;gap:16px;padding-bottom:0;justify-items:stretch}
  .sillas-hero-info .modulos{width:100%}
  .sillas-hero-info .modulo{flex:1 1 140px;min-width:0}
  .sillas-hero-cab .sillas-hero-info .cta-fila{gap:10px 18px}
  .sillas-hero-info .cta-fila .btn.p{flex:1 1 100%}
}

/* ---------- 4. sillas voladoras: tramo 3D (#sillas) ----------
   La medida del cliente en una cápsula; los indicadores de la simulación (app.js los escribe) en tres módulos iguales, sin
   ícono (como la fila de cifras de la referencia): etiqueta arriba, valor abajo y en dos renglones la etiqueta si no cabe. */
.sillas .pin-copy .sillas-medida{margin:0;letter-spacing:normal;color:inherit}
.sillas .medidor-sim{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;margin:2px 0 0}
.sillas .medidor-sim .modulo{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "v";align-content:space-between;padding:10px 14px;column-gap:0}
.sillas .medidor-sim .modulo-ico{display:none}
.sillas .medidor-sim .modulo small{white-space:normal}
.sillas .medidor-sim .modulo b{font-size:18px;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.sillas .medidor-nota{margin:0}
.sillas .sillas-acciones{gap:10px 12px;align-items:center}
@media(max-width:600px){
  .sillas .medidor-sim .modulo{padding:9px 10px}
  .sillas .medidor-sim .modulo b{font-size:16px}
  .sillas .sillas-acciones .btn{flex:1 1 auto}
}

/* ---------- 5. carrusel (#carrusel-pin) ---------- */
.carrusel-pin .pin-copy .carrusel-medida{margin:0;letter-spacing:normal;color:inherit}
.carrusel-pin .carrusel-acciones{gap:10px 16px}
@media(max-width:900px){
  /* en celular el texto va sobre la parte baja del 3D: la cápsula «Cotización por WhatsApp» sobra junto al botón de cotizar */
  .carrusel-pin .capsula--sutil{display:none}
  .carrusel-pin .carrusel-acciones .btn.p{flex:1 1 100%}
  .carrusel-pin .carrusel-acciones .ver-terreno{flex:1 1 auto}
}

/* ---------- 6. barco pirata y carros chocones (#minis-juegos) ---------- */
.mini-texto{gap:14px}
.mini-texto .capsulas{margin:0}
.mini-texto h3{margin:0}
.mini-texto .modulo{min-width:150px}
.mini-acciones{gap:10px 16px;margin-top:2px}
@media(max-width:900px){
  .mini-texto .modulo{flex:1 1 140px;min-width:0}
  .mini-acciones .btn.p{flex:1 1 100%}
  .mini-acciones .ver-terreno{flex:1 1 auto}
}

/* control Foto | 3D de la cabecera del catálogo: 44 px de alto también con mouse (antes 38) */
.fichas .cab .seg button{height:44px}
/* el «×» de las medidas en una cápsula: la letra de rótulos lo dibuja diminuto; va en la del texto */
.capsula .por{font-family:var(--f-texto);font-weight:500;letter-spacing:0}

/* minivistas en celular: el rótulo sube a la esquina de arriba, lejos de la base del juego */
@media(max-width:600px){.mini-tag{top:10px;bottom:auto;left:10px}}
/* un juego solo en su fila: tarjeta a lo ancho (modelo a la izquierda, texto a la derecha) en vez de dos huecos vacíos */
@media(min-width:900px){
  .fichas .grid > .ficha.ficha--ancha{grid-column:1/-1!important;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:stretch}
  .fichas .grid .ficha.ficha--ancha .media{aspect-ratio:auto;min-height:440px;height:100%}
  .fichas .grid .ficha.ficha--ancha .texto{align-self:center}
}
/* carrusel: velo oscuro bajo la columna de texto mientras la cámara pasa entre los caballos */
@media(min-width:901px){
  html.con3d .carrusel-pin .pin-escena > .pin-copy::before{content:"";position:absolute;z-index:-1;inset:-48px -90px -48px calc(-1 * var(--gutter) - 20px);pointer-events:none;
    background:linear-gradient(90deg,rgba(12,8,32,.94) 0%,rgba(12,8,32,.86) 62%,rgba(12,8,32,0) 100%)}
}