/* Zentinel: una forma, el lente de Torreta (circulo con aro), a muchas escalas: el hero, el boton, la vineta, la mascara del video y el precio. */
@font-face{ font-family:"Archivo"; font-weight:900; font-display:swap; src:url("fonts/archivo-latin-900-normal.woff2") format("woff2"); }
@font-face{ font-family:"Archivo"; font-weight:800; font-display:swap; src:url("fonts/archivo-latin-800-normal.woff2") format("woff2"); }
@font-face{ font-family:"Plex"; font-weight:400; font-display:swap; src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Plex"; font-weight:600; font-display:swap; src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

:root{
  --carbon:#17181b; --lima:#b4f03c; --papel:#f3f4ee; --papel2:#e4e8d8; --oliva:#35470f; --lima2:#d6f58a; --rojo:#c93a36; --verde:#2c7a3c; --ambar:#c58a14;
  --tinta:#17181b; --tinta2:#3d4439;                 /* texto secundario: 9:1 sobre papel */
  --r:28px;                                          /* un solo radio; el boton es redondo del todo */
  --m:clamp(20px, 4vw, 64px);                        /* un solo margen de pagina */
  /* cinco pasos de texto */
  --t1:clamp(38px, 6.2vw, 108px);
  --t2:clamp(32px, 4.4vw, 62px);
  --t3:clamp(24px, 2vw, 28px);
  --t4:18px;
  --t5:15px;
  --fig:clamp(84px, 11vw, 176px);                    /* una sola medida para todas las cifras grandes */
  --lead:clamp(18px, 1.5vw, 22px);
}
*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:24px; overflow-x:clip }
body{ font-family:"Plex",system-ui,sans-serif; font-size:var(--t4); line-height:1.55; color:var(--tinta); background:var(--papel); -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; overflow-x:hidden }
img,video{ display:block; max-width:100% }
a{ color:inherit }
code{ font-family:ui-monospace,Consolas,monospace; font-size:.9em }
::selection{ background:var(--lima); color:var(--carbon) }
:focus-visible{ outline:3px solid var(--carbon); outline-offset:3px; border-radius:6px }
.campo-carbon :focus-visible, .plan-b :focus-visible, .tile.carbon :focus-visible{ outline-color:var(--lima) }
.saltar{ position:absolute; left:var(--m); top:-80px; background:var(--carbon); color:var(--papel); padding:12px 20px; border-radius:999px; z-index:50 }
.saltar:focus{ top:12px }

h1,h2,h3{ font-family:"Archivo",sans-serif; letter-spacing:-.03em; text-wrap:balance }
h1{ font-weight:900; font-size:var(--t1); line-height:.96 }
.t2{ font-weight:900; font-size:var(--t2); line-height:1; max-width:18ch }
.t3{ font-weight:900; font-size:var(--t3); line-height:1.05 }
.lead{ max-width:46ch; font-size:var(--lead) }
.intro{ max-width:60ch; color:var(--tinta2) }
.nota{ font-size:var(--t5); color:var(--tinta2); max-width:60ch }

/* barra: marca, tres a seis enlaces, una accion */
.barra{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px var(--m) }
.marca img{ height:36px; width:auto; mix-blend-mode:multiply }
.enlaces{ display:flex; gap:clamp(14px,2.2vw,32px); font-size:var(--t5) }
.enlaces a{ text-decoration:none; padding:8px 2px; min-height:24px }
.enlaces a:hover{ text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px }

/* boton: redondo del todo, plano, un solo relleno */
.boton{ display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 30px; border-radius:999px; background:var(--carbon); color:var(--papel); font:600 var(--t4)/1 "Plex",sans-serif; text-decoration:none; transition:transform .16s cubic-bezier(.16,1,.3,1), background-color .16s }
.boton:hover{ transform:translateY(-2px) scale(1.02) }
.boton:active{ transform:scale(.97) }
.boton-chico{ min-height:44px; padding:0 20px; font-size:var(--t5) }
.boton-carbon{ background:var(--carbon); color:var(--lima) }

/* HERO */
.hero{ position:relative; min-height:calc(100svh - 70px); display:grid; grid-template-columns:minmax(0,1fr); align-items:center; padding:clamp(24px,5vh,64px) var(--m) clamp(40px,7vh,88px); overflow:hidden }
.hero-texto{ position:relative; z-index:2; max-width:none }
.hero h1 .l{ display:block; white-space:nowrap }
.hero h1{ margin-bottom:clamp(18px,3vh,32px) }
.hero .lead{ margin-bottom:clamp(22px,3.4vh,36px) }
.hero .nota{ margin-top:18px }
.lente{ position:absolute; z-index:1; right:-12vh; top:50%; width:max(108vh,640px); aspect-ratio:1; transform:translateY(-50%); border-radius:50%; background:var(--lima); overflow:hidden }
.lente video{ width:100%; height:100%; object-fit:cover }
.pausa{ position:absolute; left:18%; bottom:9%; z-index:3; min-height:44px; padding:0 18px; border:0; border-radius:999px; background:var(--carbon); color:var(--papel); font:600 var(--t5)/1 "Plex",sans-serif; cursor:pointer }
.pausa:hover{ transform:scale(1.03) }
.pausa:active{ transform:scale(.97) }

/* secciones */
.seccion{ padding:clamp(72px,11vw,168px) var(--m) 0 }
.seccion > .intro{ margin-top:22px }
.dos-col{ display:grid; grid-template-columns:5fr 6fr; gap:clamp(24px,5vw,80px); align-items:end }
.dos-col .t2{ grid-column:1 }
.dos-col .intro{ margin:0 }

/* tablero de close-ups */
.tablero{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:104px; gap:8px; margin-top:clamp(32px,5vw,64px) }
.tile{ position:relative; overflow:hidden; border-radius:var(--r); padding:clamp(18px,2vw,28px); display:flex; flex-direction:column; justify-content:space-between }
.tile.lima{ background:var(--lima) } .tile.lima2{ background:var(--lima2) } .tile.carbon{ background:var(--carbon); color:var(--papel) }
.tile.papel2{ background:var(--papel2) } .tile.oliva{ background:var(--oliva); color:var(--papel) }
/* filas explícitas: con auto-colocación las columnas de la derecha arrancaban una fila más abajo y dejaban un hueco */
.c1{ grid-column:1 / span 6; grid-row:1 / span 4 } .c2{ grid-column:1 / span 6; grid-row:5 / span 2 }
.c3{ grid-column:7 / span 3; grid-row:1 / span 4 } .c4{ grid-column:7 / span 3; grid-row:5 / span 2 }
.c5{ grid-column:10 / span 3; grid-row:1 / span 4 } .c6{ grid-column:10 / span 3; grid-row:5 / span 2 }
.c7{ grid-column:1 / span 6; grid-row:7 / span 2 } .c8{ grid-column:7 / span 6; grid-row:7 / span 2 }
.tile .gran{ font-family:"Archivo",sans-serif; font-weight:900; font-size:var(--fig); line-height:.8; letter-spacing:-.05em; margin:-.04em 0 0 -.04em }
.tile .num{ font-family:"Archivo",sans-serif; font-weight:900; font-size:var(--fig); line-height:.85; letter-spacing:-.04em }
.tile .estado{ font-family:"Archivo",sans-serif; font-weight:900; font-size:var(--t3); line-height:1.08; letter-spacing:-.02em; display:flex; align-items:center; gap:.4em }
.tile .pie-tile{ font-size:var(--t5); line-height:1.4; max-width:34ch }
.tile .estado{ overflow-wrap:anywhere }
.tile.carbon .pie-tile, .tile.oliva .pie-tile{ color:#d3d8c8 }
.punto{ display:inline-block; width:.62em; height:.62em; border-radius:50%; flex:none }
.punto.rojo{ background:var(--rojo) } .punto.verde{ background:var(--verde) } .punto.ambar{ background:var(--ambar) }
.ojo{ position:absolute; right:7%; top:6%; width:36%; aspect-ratio:1; border-radius:50%; background:var(--lima); border:clamp(8px,1.2vw,16px) solid var(--carbon) }   /* arriba y dentro del bloque: nunca baja hasta la cifra */
.ojo::after{ content:""; position:absolute; left:50%; top:50%; width:30%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:var(--carbon) }
.c3 .num, .c3 .pie-tile{ position:relative; z-index:1 } .c3 .num{ margin-top:auto }
.c4 .num{ font-size:calc(var(--fig)*.7) }   /* el bloque c4 mide dos filas: con la cifra entera el pie se recortaba */
.fuentes{ font-family:"Archivo",sans-serif; font-weight:900; font-size:var(--t3); line-height:1.08; letter-spacing:-.02em }
.barra-cob{ height:20px; background:var(--carbon); border-radius:999px; overflow:hidden }
.barra-cob span{ display:block; height:100%; width:40%; background:var(--lima); border-radius:999px }
.mascota-tile{ position:absolute; right:3%; bottom:-6%; height:128%; width:auto; max-width:none }
.c8 .pie-tile{ position:relative; z-index:1; max-width:26ch }

/* como funciona: acordeon de paneles, de oscuro a claro */
.etapas{ display:flex; height:min(520px,70vh); margin-top:clamp(32px,5vw,64px); border-radius:var(--r); overflow:hidden }
.etapa{ flex:1 1 0; min-width:0; display:flex; transition:flex-grow .45s cubic-bezier(.16,1,.3,1) }
.etapa.abierta{ flex-grow:5.2 }
.etapa button{ flex:none; width:clamp(64px,8vw,104px); height:100%; border:0; cursor:pointer; background:transparent; color:inherit; font:800 var(--t4)/1 "Archivo",sans-serif; letter-spacing:-.01em; writing-mode:vertical-rl; transform:rotate(180deg); padding:28px 0; text-align:left }
.etapa .panel{ opacity:0; padding:clamp(20px,3vw,40px); max-width:42ch; font-size:var(--t4); transition:opacity .3s }
.etapa.abierta .panel{ opacity:1; transition-delay:.18s }
.e1{ background:#17181b; color:#f3f4ee } .e2{ background:#35470f; color:#f3f4ee } .e3{ background:#7fa51f; color:#17181b } .e4{ background:#b4f03c; color:#17181b }

/* planes */
.par-planes{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:clamp(32px,5vw,64px) }
.plan{ border-radius:var(--r); padding:clamp(24px,3vw,44px); display:flex; flex-direction:column; gap:16px; min-height:480px }
.plan h3{ font-size:var(--t2); line-height:.95 } .plan .nombre{ font:800 var(--t3)/1.1 "Archivo",sans-serif }
.plan-a{ background:var(--lima) } .plan-b{ background:var(--carbon); color:var(--papel) }
.plan .precios-plan{ font-weight:600 }
.plan .pregunta{ margin-top:auto; font:800 var(--lead)/1.25 "Archivo",sans-serif; letter-spacing:-.015em }

/* tres pasos, consultoria y planes de vigilancia (2026-11-10: antes "Plan A" y "Plan B", que no decian nada) */
.pasos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:clamp(32px,5vw,64px) }
.paso{ min-height:0; gap:12px }
.paso .pregunta{ padding-top:14px }
.paso h3, .plan-nuevo h3{ font-size:clamp(26px,2.5vw,40px); line-height:1 }
.paso .nombre, .plan-nuevo .nombre{ font:800 var(--t4)/1.2 "Archivo",sans-serif }
.precio-paso{ font:800 var(--t3)/1.15 "Archivo",sans-serif; letter-spacing:-.02em }
.paso-1{ background:var(--papel2) } .paso-2{ background:var(--carbon); color:var(--papel) } .paso-3{ background:var(--lima) }
.plan-nuevo{ margin-top:12px; background:var(--oliva); color:var(--papel); min-height:0; flex-direction:row; justify-content:space-between; align-items:flex-end; gap:clamp(20px,4vw,64px) }
.plan-nuevo p{ max-width:60ch } .plan-nuevo .precio-paso{ flex:none; max-width:24ch }
.precios-nota{ margin-top:16px }
.vig-titulo{ margin-top:clamp(48px,6vw,88px) }
.vig-titulo + .intro{ margin-top:12px }
.vigilancias{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:24px }
.vig{ border-radius:var(--r); padding:clamp(20px,2.4vw,32px); background:var(--papel2) } .vig-plus{ background:var(--lima) }
.vig h4{ font:900 var(--t3)/1.05 "Archivo",sans-serif; letter-spacing:-.02em }
.precio-vig{ margin-top:10px; font:900 clamp(30px,3vw,46px)/1 "Archivo",sans-serif; letter-spacing:-.03em }
.precio-vig span{ font:600 var(--t5)/1 "Plex",sans-serif; letter-spacing:0 }
.vig ul{ margin-top:16px; list-style:none; display:grid; gap:8px }
.vig li{ position:relative; padding-left:20px; font-size:var(--t5); line-height:1.4 }
.vig li::before{ content:""; position:absolute; left:0; top:.5em; width:8px; height:8px; border-radius:50%; background:var(--carbon) }
.ejemplo{ margin-top:12px; font-size:var(--t5); color:var(--tinta2); max-width:44ch }

/* ejemplos: indice con vista previa */
.indice{ display:grid; grid-template-columns:5fr 6fr; gap:clamp(24px,5vw,80px); margin-top:clamp(32px,5vw,64px); align-items:start }
.filas{ list-style:none; display:grid; gap:8px }
.fila{ width:100%; text-align:left; border:0; border-radius:var(--r); padding:22px 28px; background:var(--papel2); color:var(--tinta); font:800 var(--t3)/1.15 "Archivo",sans-serif; letter-spacing:-.02em; cursor:pointer; transition:background-color .24s, opacity .24s, transform .16s }
.filas:hover .fila:not(:hover):not(:focus-visible){ opacity:.5 }
.fila:hover, .fila.activa{ background:var(--lima) }
.fila:active{ transform:scale(.985) }
.vista{ position:sticky; top:24px; min-height:440px; border-radius:var(--r); background:var(--lima); padding:clamp(16px,2.4vw,32px); display:grid }
.frag{ grid-area:1/1; background:var(--papel); border-radius:var(--r); overflow:hidden; opacity:0; visibility:hidden; transition:opacity .24s, visibility .24s; font-size:var(--t5) }
.frag.activo{ opacity:1; visibility:visible }
.frag-barra{ background:var(--carbon); color:var(--papel); padding:12px 20px; font-weight:600; font-size:var(--t5) }
.frag-barra.rojo-b{ background:var(--rojo) }
.frag-cuerpo{ padding:20px 22px 24px; display:grid; gap:10px; font-size:var(--t5); line-height:1.5 }
.frag-t{ font:800 var(--t4)/1.2 "Archivo",sans-serif; letter-spacing:-.01em; display:flex; align-items:center; gap:.5em }
.ruta, .nota-frag{ color:var(--tinta2); font-size:var(--t5) }

/* calculadora (campo oscuro) */
.campo-carbon{ margin-top:clamp(72px,11vw,168px); background:var(--carbon); color:var(--papel); min-height:88svh; display:flex }
.interior{ display:flex; flex-direction:column; gap:28px; width:100%; padding-bottom:clamp(40px,6vw,80px) }
.campo-carbon .t2{ color:var(--papel) }
.control{ width:min(420px,100%); display:grid; gap:18px; font-size:var(--t5) }
.control label{ font-weight:600 }
.control output{ color:var(--lima); font-weight:600 }
.control input[type=range]{ width:100%; height:44px; accent-color:var(--lima); cursor:pointer }
.repos{ border:0; display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.repos legend{ float:left; margin-right:12px; font-weight:600 }
.repos label{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border-radius:999px; background:#2a2c31; cursor:pointer }
.repos input{ accent-color:var(--lima); width:18px; height:18px }
.resultado{ margin-top:auto }
.cifra{ font-family:"Archivo",sans-serif; font-weight:900; font-size:min(var(--fig),17vw); line-height:.82; letter-spacing:-.05em; color:var(--lima) }
.cifra .unidad{ font-size:.2em; letter-spacing:-.01em; font-weight:800; color:var(--papel) }
.resultado .intro{ margin-top:18px; color:#d3d8c8 }
.campo-carbon .nota{ color:#b9bfae }

/* precio de la revision */
.split{ display:grid; grid-template-columns:5fr 6fr; gap:clamp(24px,5vw,80px); align-items:start }
.split .t2{ margin-bottom:22px; max-width:none }
.precio-grande{ position:relative; padding-top:calc(clamp(90px,13vw,200px) + 16px); min-width:0; container-type:inline-size }
.lente-forma{ position:absolute; right:2%; top:0; width:clamp(90px,13vw,200px); aspect-ratio:1; border-radius:50%; background:var(--lima); border:clamp(8px,1.2vw,16px) solid var(--carbon); z-index:0 }
.monto{ position:relative; z-index:1; font-family:"Archivo",sans-serif; font-weight:900; font-size:min(var(--fig),11vw); font-size:min(var(--fig),17.5cqw); line-height:.85; letter-spacing:-.05em; white-space:nowrap }   /* 17,5 % del ancho de su columna: "$2.400.000" mide 5,2 em y debe caber siempre */
.monto .signo{ font-size:.5em; vertical-align:top; margin-right:.06em }
.periodo{ margin-top:18px; max-width:44ch; font-weight:600 }
.precio-grande .nota{ margin-top:14px } .precio-grande .accion{ margin-top:26px }

/* preguntas */
.faq-fila{ display:grid; grid-template-columns:4fr 8fr; gap:clamp(24px,5vw,80px); align-items:start }
.faq-fila .t2{ position:sticky; top:24px }
.faq{ display:grid; gap:8px }
.faq details{ background:var(--papel2); border-radius:var(--r) }
.faq summary{ list-style:none; cursor:pointer; min-height:72px; padding:20px 72px 20px 24px; position:relative; font:600 var(--lead)/1.3 "Plex",sans-serif; display:flex; align-items:center }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::before, .faq summary::after{ content:""; position:absolute; right:24px; top:50%; width:16px; height:3px; margin-top:-1.5px; background:currentColor; transition:transform .24s cubic-bezier(.16,1,.3,1) }
.faq summary::after{ transform:rotate(90deg) }
.faq details[open]{ background:var(--lima) }
.faq details[open] summary::after{ transform:rotate(0) }
.faq details p{ padding:0 24px 24px; max-width:62ch }

/* llamado final */
.cierre{ padding:clamp(72px,11vw,168px) 0 0; overflow:hidden }
.fila-cta{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,8fr) minmax(0,1.3fr); gap:12px; min-height:380px }
.tile-cta{ background:var(--lima); border-radius:var(--r); padding:clamp(24px,4vw,56px); display:flex; flex-direction:column; justify-content:center; gap:16px }
.tile-cta p{ max-width:52ch } .tile-cta h2{ font-size:clamp(30px,3.2vw,46px); line-height:1.02; max-width:none }
.tile-lat{ position:relative; overflow:hidden; background:var(--carbon) }
.tile-lat.izq{ border-radius:0 var(--r) var(--r) 0 } .tile-lat.der{ border-radius:var(--r) 0 0 var(--r); background:var(--oliva) }
.tile-lat img{ position:absolute; bottom:-8%; height:112%; width:auto; max-width:none }
.tile-lat.izq img{ left:-30% } .tile-lat.der img{ right:-30% }

/* pie: la marca construida con bloques */
.pie{ margin-top:clamp(72px,11vw,168px); background:var(--carbon); color:var(--papel); padding:clamp(40px,6vw,80px) var(--m) 32px }
.marca-grande{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; align-items:end; height:clamp(150px,34svh,330px) }
.b{ display:flex; align-items:flex-end; padding:0 0 0 clamp(6px,1.2vw,18px); font:900 clamp(60px,12.5vw,220px)/.78 "Archivo",sans-serif; letter-spacing:-.04em; border-radius:var(--r) var(--r) 0 0; overflow:hidden }
.b1{ height:100%; background:var(--lima); color:var(--carbon) } .b2{ height:78%; background:var(--papel); color:var(--carbon) } .b3{ height:94%; background:var(--oliva); color:var(--papel) }
.b4{ height:66%; background:var(--lima2); color:var(--carbon) } .b5{ height:86%; background:var(--lima); color:var(--carbon) } .b6{ height:100%; background:var(--papel2); color:var(--carbon) }
.b7{ height:72%; background:var(--lima); color:var(--carbon) } .b8{ height:90%; background:var(--papel); color:var(--carbon) }
.pie-col{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:56px; font-size:var(--t5) }
.pie-col nav, .pie-col div{ display:flex; flex-direction:column; align-items:flex-start; gap:2px }
.pie-col a{ text-decoration:none; min-height:36px; display:inline-flex; align-items:center; color:#d3d8c8 }
.pie-col a:hover{ color:var(--lima); text-decoration:underline; text-underline-offset:5px }
.pie-t{ font:800 var(--t4)/1.2 "Archivo",sans-serif; color:var(--papel); margin-bottom:8px }
.pie-col p:not(.pie-t){ color:#b9bfae }
.legal{ margin-top:48px; font-size:var(--t5); color:#b9bfae; max-width:78ch }

/* entradas: arriba 28 px con aparicion, escalonadas por JS; sin JS todo queda visible */
.js .entra{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); transition-delay:var(--d,0s) }
.js .entra.visto{ opacity:1; transform:none }

@media (max-width:1000px){
  .enlaces{ display:none }
  .hero{ min-height:0; padding-bottom:0 }
  .hero-texto{ max-width:none }
  .lente{ position:relative; right:auto; top:auto; transform:none; width:112vw; max-width:none; margin:40px 0 0 -6vw }
  .pausa{ left:24%; bottom:6% }
  .dos-col, .indice, .split, .faq-fila{ grid-template-columns:1fr }
  .faq-fila .t2{ position:static }
  .vista{ position:static; min-height:0 }
  .tablero{ grid-template-columns:repeat(2,1fr); grid-auto-rows:28vw; gap:6px }
  .tile.c1{ grid-column:span 2; grid-row:span 3 } .tile.c2{ grid-column:span 2; grid-row:span 2 }
  .tile.c3{ grid-column:span 1; grid-row:span 3 } .tile.c5{ grid-column:span 1; grid-row:span 3 }
  .tile .estado{ font-size:20px } .c8 .mascota-tile{ right:-8%; height:112% } .c8 .pie-tile{ max-width:11ch }
  .tile.c4, .tile.c6{ grid-column:span 1; grid-row:span 2 } .tile.c7{ grid-column:span 2; grid-row:span 2 } .tile.c8{ grid-column:span 2; grid-row:span 3 }
  .etapas{ flex-direction:column; height:auto }
  .etapa{ flex-direction:column; flex:none }
  .etapa button{ writing-mode:horizontal-tb; transform:none; width:100%; height:64px; padding:0 24px; display:flex; align-items:center }
  .etapa .panel{ display:none; opacity:1 } .etapa.abierta .panel{ display:block }
  .par-planes, .pasos, .vigilancias{ grid-template-columns:1fr }
  .plan-nuevo{ flex-direction:column; align-items:flex-start }
  .fila-cta{ grid-template-columns:1fr }
  .tile-lat{ display:none }
  .pie-col{ grid-template-columns:1fr 1fr }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ transition-duration:.001s !important; animation-duration:.001s !important; scroll-behavior:auto !important }
  .js .entra{ opacity:1; transform:none }
}

[data-alto]{ min-height:70vh }

/* Interruptor de precios: <body data-sin-precios> oculta todo lo marcado con data-precio (ver docs/DEPLOY.md) */
body[data-sin-precios] [data-precio]{ display:none }

/* foco visible sobre fondos oscuros (revision independiente: 1,00:1 sobre carbon y 1,74:1 sobre oliva) */
.pie :focus-visible, .e1 :focus-visible, .e2 :focus-visible, .campo-carbon :focus-visible{ outline-color:var(--lima) }
.etapas :focus-visible{ outline-offset:-5px }
.etapa:not(.abierta) .panel{ visibility:hidden }
.tile .estado{ overflow-wrap:normal; hyphens:auto }
@media (max-width:520px){
  .tablero{ grid-template-columns:1fr; grid-auto-rows:auto }
  .tile.c1,.tile.c2,.tile.c3,.tile.c4,.tile.c5,.tile.c6,.tile.c7,.tile.c8{ grid-column:1; grid-row:auto; min-height:190px; gap:24px }
  .ojo{ width:34%; right:6%; top:14% }
  .c3 .num{ margin-top:48px }
  .c8 .pie-tile{ max-width:14ch }
}