/* Entretenimientos · landing comercial
   Paño de mesa de club, naipe español y oro. Mobile first. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900; font-display: swap;
}

:root {
  --pano: #0E4536;
  --pano-osc: #0A3329;
  --pano-cla: #175C49;
  --fondo: #F1F4F1;
  --papel: #FFFFFF;
  --tinta: #13201B;
  --tinta-2: #4A5A53;
  --linea: #D4DDD8;
  --oro: #E2A720;
  --oro-osc: #A87A0A;
  --copa: #B8352B;
  --sobre-pano: #F2F6F4;
  --sobre-pano-2: #B7CBC3;

  --f-titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --ancho: 1180px;
  --margen: clamp(16px, 4vw, 40px);
  --sec: clamp(64px, 9vw, 120px);
  --barra-alto: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra-alto) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--f-texto);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-titulo); line-height: 1.08; margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 4px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--oro); color: var(--tinta); padding: 8px 14px; border-radius: 6px; font-weight: 700; }
.saltar:focus { left: 8px; }
.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.4em; border-radius: 999px; border: 2px solid transparent;
  font: 700 1rem/1.15 var(--f-texto); text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.boton:active { transform: translateY(1px); }
.boton-oro { background: var(--oro); color: #1A1405; }
.boton-oro:hover { background: #F0B83A; }
.boton-verde { background: var(--pano); color: #fff; }
.boton-verde:hover { background: var(--pano-cla); }
.boton-claro { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.boton-claro:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.boton-wa { background: #1FAF54; color: #fff; }
.boton-wa:hover { background: #179447; }
.boton-chico { min-height: 40px; padding: .45em 1.05em; font-size: .95rem; }
.boton-ancho { width: 100%; }

/* ---------- Barra superior ---------- */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--barra-alto);
  color: #fff; transition: background-color .25s, box-shadow .25s;
}
.barra.solida, .barra.abierta { background: rgba(10, 51, 41, .97); box-shadow: 0 1px 0 rgba(255,255,255,.08); backdrop-filter: saturate(1.4) blur(8px); }
.barra-fila { height: 100%; display: flex; align-items: center; gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 1.2rem/1 var(--f-titulo); letter-spacing: -0.01em; margin-right: auto; }
.logo img { width: 34px; height: 34px; }
.menu { display: none; }
.menu a { color: var(--sobre-pano); text-decoration: none; font-weight: 600; }
.menu a:hover { color: #fff; }
.barra-acciones { display: flex; align-items: center; gap: 8px; }
.barra-acciones .boton { display: none; }
.boton-admin {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px;
  color: var(--sobre-pano); background: rgba(255,255,255,.08); text-decoration: none; font-weight: 600; font-size: .92rem;
  border: 1px solid rgba(255,255,255,.18);
}
.boton-admin:hover { background: rgba(255,255,255,.16); color: #fff; }
.boton-admin span { display: none; }
.boton-menu { width: 44px; height: 44px; border: 0; background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; border-radius: 8px; }
.hamburguesa, .hamburguesa::before, .hamburguesa::after { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.hamburguesa { position: relative; }
.hamburguesa::before, .hamburguesa::after { content: ""; position: absolute; left: 0; }
.hamburguesa::before { top: -7px; } .hamburguesa::after { top: 7px; }
.barra.abierta .hamburguesa { background: transparent; }
.barra.abierta .hamburguesa::before { transform: translateY(7px) rotate(45deg); }
.barra.abierta .hamburguesa::after { transform: translateY(-7px) rotate(-45deg); }

/* Menú desplegado en celular */
.barra.abierta .menu {
  display: flex; flex-direction: column; position: absolute; top: var(--barra-alto); left: 0; right: 0;
  background: var(--pano-osc); padding: 8px var(--margen) 24px; border-top: 1px solid rgba(255,255,255,.08);
  max-height: calc(100dvh - var(--barra-alto)); overflow-y: auto;
}
.barra.abierta .menu a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 1.1rem; }
.menu-solo-movil { color: var(--oro) !important; }

@media (min-width: 560px) {
  .boton-admin span { display: inline; }
  .barra-acciones .boton { display: inline-flex; }
}
@media (min-width: 1040px) {
  .menu { display: flex; gap: 26px; margin-right: 8px; }
  .menu-solo-movil { display: none; }
  .boton-menu { display: none; }
}

/* ---------- Portada ---------- */
.portada {
  position: relative; color: #fff; background: var(--pano);
  padding: calc(var(--barra-alto) + clamp(32px, 6vw, 72px)) 0 clamp(56px, 8vw, 104px);
  isolation: isolate; overflow: hidden;
}
/* textura de paño */
.portada::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background:
    radial-gradient(120% 80% at 75% 35%, var(--pano-cla) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.portada-grilla { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
.portada-grilla > *, .panel-grilla > *, .solicitud-grilla > *, .beneficios-grilla > *, .preguntas-grilla > *, .juego > * { min-width: 0; }
.portada h1 { font-size: clamp(2.15rem, 6.4vw, 4.1rem); font-weight: 750; max-width: 15ch; letter-spacing: -0.03em; }
.bajada { margin-top: 22px; font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: var(--sobre-pano); max-width: 54ch; }
.portada-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.portada-datos { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 8px; color: var(--sobre-pano-2); font-size: .98rem; }
.portada-datos li { padding-left: 26px; position: relative; }
.portada-datos li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 8px; border-left: 2px solid var(--oro); border-bottom: 2px solid var(--oro); transform: rotate(-45deg); }

@media (max-width: 559px) {
  .portada-acciones .boton { width: 100%; }
}
@media (min-width: 980px) {
  .portada-grilla { grid-template-columns: 1.02fr 1fr; }
}

/* Vitrina: el salón con la marca de quien mira */
.vitrina { --c-pri: #1F6F5C; --c-sec: #E2A720; width: 100%; max-width: 560px; justify-self: center; }
.navegador { background: #fff; border-radius: 14px; overflow: hidden; color: var(--tinta); box-shadow: 0 30px 60px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.08); }
.navegador-barra { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #E9ECEA; }
.navegador-barra > i { width: 10px; height: 10px; border-radius: 50%; background: #C7CDCA; }
.navegador-url { margin-left: 8px; flex: 1; min-width: 0; background: #fff; border-radius: 999px; padding: 4px 12px; font-size: .78rem; color: #5B6762; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navegador-url b { color: var(--tinta); font-weight: 600; }
.salon-barra { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--c-pri); color: #fff; transition: background-color .35s; }
.salon-logo { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--c-sec); color: var(--c-pri); font: 800 .8rem/1 var(--f-titulo); flex: none; transition: background-color .35s, color .35s; }
.salon-nombre { font: 700 1rem/1.1 var(--f-titulo); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salon-ingresar { margin-left: auto; font-size: .78rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--c-sec); color: var(--c-pri); flex: none; transition: background-color .35s, color .35s; }
.salon-cuerpo { padding: 16px 14px 18px; background: color-mix(in srgb, var(--c-pri) 6%, #fff); transition: background-color .35s; }
.salon-hola { font: 700 1.02rem/1.25 var(--f-titulo); margin-bottom: 14px; }
.salon-hola span { color: var(--c-pri); transition: color .35s; }
.salon-juegos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.salon-juego { background: #fff; border-radius: 10px; padding: 10px 10px 12px; border: 1px solid rgba(0,0,0,.07); display: grid; gap: 2px; }
.salon-juego b { font: 700 .95rem/1.2 var(--f-titulo); margin-top: 6px; }
.salon-juego small { font-size: .78rem; color: color-mix(in srgb, var(--c-pri) 75%, #000); }
.mini-cartas { height: 62px; display: flex; justify-content: center; align-items: center; }
.mini-cartas span { width: 36px; display: block; line-height: 0; margin: 0 -5px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.18)); }
.mini-cartas span:nth-child(1) { transform: rotate(-12deg) translateY(3px); }
.mini-cartas span:nth-child(3) { transform: rotate(12deg) translateY(3px); }
.mini-tablero { height: 62px; display: grid; place-items: center; }
.mini-tablero .tablero { width: 58px; border-width: 3px; }

.probador { margin-top: 18px; }
.probador label { display: block; font-weight: 600; font-size: .95rem; color: var(--sobre-pano); margin-bottom: 8px; }
.probador-fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.probador input[type="text"] {
  flex: 1 1 220px; min-width: 0; height: 46px; border-radius: 10px; border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1); color: #fff; padding: 0 14px; font: 500 1rem var(--f-texto);
}
.probador input[type="text"]::placeholder { color: rgba(255,255,255,.55); }
.probador input[type="text"]:focus { outline: none; border-color: var(--oro); background: rgba(255,255,255,.16); }
.muestras { display: flex; gap: 8px; align-items: center; }
.muestras button, .muestra-libre {
  width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer; flex: none;
  border: 2px solid rgba(255,255,255,.35); background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%);
}
.muestras button[aria-checked="true"] { border-color: #fff; box-shadow: 0 0 0 3px var(--oro); }
.muestra-libre { position: relative; overflow: hidden; background: conic-gradient(#e33, #fc3, #3c6, #39f, #93f, #e33); }
.muestra-libre input { position: absolute; inset: -8px; opacity: 0; cursor: pointer; width: 200%; height: 200%; }

/* ---------- Secciones ---------- */
.seccion { padding: var(--sec) 0; }
.seccion-corta { padding: clamp(48px, 6vw, 72px) 0; }
.seccion-clara { background: var(--papel); }
.seccion-pano { background: var(--pano-osc); color: #fff; }
.seccion-cabeza { max-width: 680px; margin-bottom: clamp(36px, 5vw, 56px); }
.seccion-cabeza h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 720; }
.seccion-cabeza p { margin-top: 14px; font-size: 1.12rem; color: var(--tinta-2); max-width: 60ch; }
.panel-texto > p, .solicitud-texto > p { color: var(--sobre-pano-2); }
.titulo-chico { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 22px; }

/* Juegos */
.juegos { display: grid; gap: clamp(20px, 3vw, 28px); }
.juego {
  display: grid; gap: 0; background: var(--papel); border-radius: 18px; overflow: hidden;
  border: 1px solid var(--linea);
}
.juego-arte { min-height: 200px; display: grid; place-items: center; background: var(--pano); padding: 24px; position: relative; }
.juego-damas .juego-arte { background: #2C1F16; }
.juego-chinchon .juego-arte { background: #24345A; }
.juego-jodete .juego-arte { background: #6E2620; }
.juego-texto { padding: clamp(22px, 3vw, 32px); }
.juego h3 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); font-weight: 720; }
.juego-texto > p { margin-top: 10px; color: var(--tinta-2); }
.juego ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.juego li { position: relative; padding-left: 20px; font-weight: 500; }
.juego li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--oro); }
.abanico { display: flex; justify-content: center; align-items: flex-end; height: 150px; }
.abanico span { width: 84px; line-height: 0; margin: 0 -14px; filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); transform-origin: 50% 120%; }
.abanico[data-n="3"] span:nth-child(1) { transform: rotate(-14deg); }
.abanico[data-n="3"] span:nth-child(3) { transform: rotate(14deg); }
.abanico[data-n="4"] span:nth-child(1) { transform: rotate(-21deg); }
.abanico[data-n="4"] span:nth-child(2) { transform: rotate(-7deg); }
.abanico[data-n="4"] span:nth-child(3) { transform: rotate(7deg); }
.abanico[data-n="4"] span:nth-child(4) { transform: rotate(21deg); }
.tablero-grande .tablero { width: min(210px, 62vw); border-width: 7px; transform: rotate(-3deg); box-shadow: 0 16px 30px rgba(0,0,0,.45); }

@media (min-width: 720px) {
  .juegos { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .juego { grid-template-columns: 240px 1fr; }
  .juego-arte { min-height: 100%; padding: 20px 10px; }
  .abanico span { width: 64px; margin: 0 -11px; }
  .tablero-grande .tablero { width: 180px; }
}

/* Tablero de damas (compartido) */
.tablero { --n: 10; display: grid; grid-template-columns: repeat(var(--n), 1fr); aspect-ratio: 1; border: 5px solid #5A3A22; border-radius: 4px; overflow: hidden; }
.tablero span { display: grid; place-items: center; aspect-ratio: 1; }
.tablero .cl { background: #EBD9B4; }
.tablero .os { background: #8B5A36; }
.tablero .ficha { width: 76%; aspect-ratio: 1; border-radius: 50%; display: block; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
.tablero .ficha.blanca { background: radial-gradient(circle at 35% 30%, #fffdf7, #e3d8c2 70%); }
.tablero .ficha.negra { background: radial-gradient(circle at 35% 30%, #4a423d, #1d1916 70%); }

/* Beneficios */
.beneficios-grilla { display: grid; gap: 40px; }
.beneficios { display: grid; gap: 0; margin: 0; }
.beneficios > div { padding: 22px 0; border-top: 1px solid var(--linea); }
.beneficios > div:last-child { border-bottom: 1px solid var(--linea); }
.beneficios dt { font: 700 1.25rem/1.2 var(--f-titulo); }
.beneficios dd { margin: 8px 0 0; color: var(--tinta-2); }
.seccion-cabeza-lado .boton { margin-top: 26px; }
@media (min-width: 760px) {
  .beneficios { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .beneficios > div:nth-last-child(2) { border-bottom: 1px solid var(--linea); }
}
@media (min-width: 1040px) {
  .beneficios-grilla { grid-template-columns: 340px 1fr; gap: 64px; align-items: start; }
  .seccion-cabeza-lado { position: sticky; top: calc(var(--barra-alto) + 32px); margin-bottom: 0; }
}

/* Pasos */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: paso; }
.pasos li { counter-increment: paso; position: relative; padding: 26px 24px 26px 84px; background: var(--papel); border-radius: 14px; border: 1px solid var(--linea); }
.pasos li::before {
  content: counter(paso); position: absolute; left: 22px; top: 22px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--pano); color: var(--oro); font: 800 1.25rem/1 var(--f-titulo);
}
.pasos h3 { font-size: 1.3rem; }
.pasos p { margin-top: 8px; color: var(--tinta-2); }
@media (min-width: 900px) {
  .pasos { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .pasos li { padding: 0 32px 0 0; background: none; border: 0; border-radius: 0; }
  .pasos li + li { padding-left: 32px; border-left: 1px solid var(--linea); }
  .pasos li::before { position: static; margin-bottom: 18px; }
}

/* Panel */
.panel-grilla { display: grid; gap: 44px; align-items: center; }
.panel-texto h2 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); }
.panel-texto > p { margin-top: 16px; font-size: 1.1rem; max-width: 52ch; }
.lista-tilde { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.lista-tilde li { position: relative; padding-left: 30px; }
.lista-tilde li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 14px; height: 8px; border-left: 2.5px solid var(--oro); border-bottom: 2.5px solid var(--oro); transform: rotate(-45deg); }
.seccion-pano .lista-tilde li { color: var(--sobre-pano); }
.tablero-admin { margin: 0; background: #fff; color: var(--tinta); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); font-size: .92rem; }
.ta-barra { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #1F6F5C; color: #fff; font-weight: 700; flex-wrap: wrap; }
.ta-logo { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--oro); color: #1F6F5C; font: 800 .72rem/1 var(--f-titulo); }
.ta-ejemplo { margin-left: auto; font-weight: 600; font-size: .75rem; background: rgba(255,255,255,.18); padding: 2px 10px; border-radius: 999px; }
.ta-datos { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #E5EAE7; }
.ta-datos div { padding: 14px 16px; }
.ta-datos div + div { border-left: 1px solid #E5EAE7; }
.ta-datos small { display: block; color: #66736D; font-size: .78rem; line-height: 1.2; }
.ta-datos b { font: 750 1.55rem/1.2 var(--f-titulo); }
.ta-grafico { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 110px auto; gap: 4px 10px; padding: 16px 16px 10px; align-items: end; }
.ta-grafico i { height: var(--h); background: #1F6F5C; border-radius: 4px 4px 0 0; }
.ta-grafico i:nth-of-type(n+6) { background: var(--oro); }
.ta-grafico span { text-align: center; font-size: .72rem; color: #66736D; }
.ta-tabla { width: 100%; border-collapse: collapse; }
.ta-tabla th { text-align: left; font-size: .75rem; color: #66736D; font-weight: 600; padding: 8px 16px; border-top: 1px solid #E5EAE7; }
.ta-tabla td { padding: 10px 16px; border-top: 1px solid #EEF1EF; white-space: nowrap; }
.ta-tabla td:last-child { text-align: right; color: #66736D; font-size: .82rem; }
.ta-ok, .ta-venc { font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ta-ok { background: #DDF1E6; color: #19643C; }
.ta-venc { background: #FBE1DE; color: #9A271E; }
.ta-boton { display: inline-block; background: #1F6F5C; color: #fff; font-weight: 700; padding: 4px 10px; border-radius: 999px; font-size: .75rem; }
@media (max-width: 420px) {
  .ta-datos b { font-size: 1.25rem; }
  .ta-tabla td:nth-child(2) { display: none; }
  .ta-tabla th:nth-child(2) { display: none; }
}
@media (min-width: 980px) {
  .panel-grilla { grid-template-columns: 1fr 1.05fr; gap: 72px; }
}

/* Planes */
.planes { display: grid; gap: 16px; }
.plan { background: var(--papel); border: 1px solid var(--linea); border-radius: 16px; padding: 28px 26px; }
.plan h3 { font-size: 1.45rem; }
.plan-precio { margin: 10px 0 14px; font: 700 1.1rem/1.2 var(--f-titulo); color: var(--pano); }
.plan > p:last-child { color: var(--tinta-2); }
.plan-destacado { background: var(--pano); color: #fff; border-color: var(--pano); }
.plan-destacado .plan-precio { color: var(--oro); }
.plan-destacado > p:last-child { color: var(--sobre-pano); }
.incluye { margin-top: 28px; padding: clamp(24px, 4vw, 36px); border-radius: 16px; border: 2px dashed var(--linea); display: grid; gap: 4px; }
.incluye h3 { font-size: 1.3rem; }
.incluye .lista-tilde li::before { border-color: var(--pano); }
.incluye .boton { margin-top: 22px; justify-self: start; }
@media (min-width: 820px) {
  .planes { grid-template-columns: repeat(3, 1fr); }
  .incluye .lista-tilde { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}

/* Para quién */
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 9px 16px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--linea); font-weight: 600; font-size: .98rem; }

/* Preguntas */
.preguntas-grilla { display: grid; gap: 8px; }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas details:first-child { border-top: 1px solid var(--linea); }
.preguntas summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font: 700 1.14rem/1.3 var(--f-titulo);
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2.5px solid var(--pano); border-bottom: 2.5px solid var(--pano); transform: rotate(45deg); transition: transform .2s;
}
.preguntas details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.preguntas details p { padding: 0 0 22px; color: var(--tinta-2); max-width: 70ch; }
.preguntas-grilla a { color: var(--pano); font-weight: 700; }
@media (min-width: 1040px) {
  .preguntas-grilla { grid-template-columns: 340px 1fr; gap: 64px; align-items: start; }
}

/* Solicitud */
.seccion-solicitud { background: var(--pano); position: relative; }
.solicitud-grilla { display: grid; gap: 40px; align-items: start; }
.solicitud-texto h2 { font-size: clamp(2rem, 4.6vw, 3rem); }
.solicitud-texto > p { margin-top: 16px; font-size: 1.12rem; max-width: 46ch; }
.contacto-directo { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.contacto-directo p { width: 100%; font-weight: 600; color: #fff; }
.enlace-claro { color: #fff; font-weight: 600; }
.formulario { background: var(--papel); color: var(--tinta); border-radius: 18px; padding: clamp(22px, 4vw, 36px); box-shadow: 0 30px 60px -28px rgba(0,0,0,.55); }
.campos { display: grid; gap: 16px; margin-bottom: 22px; }
.campo label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 6px; }
.opcional { font-weight: 400; color: var(--tinta-2); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; border: 1.5px solid #C5D0CA; border-radius: 10px; background: #FAFBFA;
  padding: 10px 14px; font: 400 1rem/1.4 var(--f-texto); color: var(--tinta); /* 16px evita el zoom en iPhone */
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%), linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--pano); box-shadow: 0 0 0 3px rgba(14,69,54,.18); background: #fff; }
.campo [aria-invalid="true"] { border-color: var(--copa); }
.campo-error { color: var(--copa); font-size: .88rem; margin-top: 4px; font-weight: 600; }
.campo-trampa { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.form-legal { margin-top: 12px; font-size: .88rem; color: var(--tinta-2); text-align: center; }
.form-legal a { color: var(--pano); }
.form-estado:not(:empty) { margin-top: 16px; padding: 14px 16px; border-radius: 10px; font-weight: 600; }
.form-estado.ok { background: #DDF1E6; color: #19643C; }
.form-estado.error { background: #FBE1DE; color: #9A271E; }
.formulario.enviado .campos, .formulario.enviado button, .formulario.enviado .form-legal { display: none; }
.formulario.enviado .form-estado { margin-top: 0; font-size: 1.05rem; }
@media (min-width: 620px) {
  .campos { grid-template-columns: 1fr 1fr; }
  .campo-ancho { grid-column: 1 / -1; }
}
@media (min-width: 980px) {
  .solicitud-grilla { grid-template-columns: 1fr 1.15fr; gap: 64px; }
  .solicitud-texto { position: sticky; top: calc(var(--barra-alto) + 32px); }
}

/* Pie */
.pie { background: var(--pano-osc); color: var(--sobre-pano-2); padding: 56px 0 calc(28px + env(safe-area-inset-bottom)); font-size: .97rem; }
.pie-grilla { display: grid; gap: 32px; }
.pie-marca { font: 700 1.3rem/1 var(--f-titulo); color: #fff; margin-bottom: 10px; }
.pie-texto { max-width: 38ch; }
.pie nav { display: grid; gap: 8px; align-content: start; }
.pie nav a { color: var(--sobre-pano); text-decoration: none; }
.pie nav a:hover { color: #fff; text-decoration: underline; }
.pie-titulo { color: #fff; font-weight: 700; margin-bottom: 4px; }
.pie-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: .88rem; }
@media (min-width: 760px) { .pie-grilla { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

/* Barra fija inferior en celular */
.cta-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(10,51,41,.97);
  box-shadow: 0 -6px 20px rgba(0,0,0,.2); transform: translateY(110%); transition: transform .25s;
}
.cta-movil .boton { flex: 1; min-height: 46px; }
.cta-movil .boton-claro { flex: 0 0 auto; }
.cta-movil.visible { transform: none; }
@media (min-width: 760px) { .cta-movil { display: none; } }

/* Diálogo demo */
.dialogo { border: 0; border-radius: 18px; padding: 30px 26px 26px; width: min(460px, calc(100vw - 32px)); color: var(--tinta); box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.dialogo::backdrop { background: rgba(8, 30, 24, .7); }
.dialogo h2 { font-size: 1.6rem; margin-bottom: 10px; padding-right: 30px; }
.dialogo p { color: var(--tinta-2); }
.dialogo-cerrar { position: absolute; top: 12px; right: 12px; }
.dialogo-cerrar button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--fondo); font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--tinta); }
.demo-cuentas { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 8px; }
.demo-cuentas li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; background: var(--fondo); border-radius: 10px; padding: 10px 14px; font-size: .95rem; }
.demo-cuentas span { color: var(--tinta-2); font-size: .82rem; }
.demo-cuentas code { font: 600 .95rem/1.3 ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }
.dialogo-nota { font-size: .92rem; margin-bottom: 20px; }

/* Página de privacidad */
.legal { padding: calc(var(--barra-alto) + 48px) 0 var(--sec); }
.legal .envoltura { max-width: 760px; }
.legal h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 24px; }
.legal h2 { font-size: 1.35rem; margin: 32px 0 10px; }
.legal p, .legal li { color: var(--tinta-2); }
.legal p + p { margin-top: 12px; }
.pagina-interna .barra { background: rgba(10, 51, 41, .97); }

/* Una sola entrada animada: las cartas de la vitrina se abren al cargar */
@media (prefers-reduced-motion: no-preference) {
  .vitrina .mini-cartas span { animation: abrir .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: .25s; }
  @keyframes abrir { from { transform: none; opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}