/* wodelix.com v7 · el sitio completo · 8-oct
   Por el patio se mueven dos cosas, el material y el dinero, y el color dice cuál es cuál.
   Cada flujo lleva su color, su forma y su palabra: el color nunca va solo.
   material = ladrillo · marcador cuadrado · riel continuo
   dinero   = marino   · marcador redondo  · riel doble (marino es también la marca y la acción) */
:root{
  /* neutros */
  --papel:#FAF7ED; --superficie:#FFFDF7; --tinta:#141C26; --tinta-2:#3A4A57;
  --regla:#737E88; --regla-suave:rgba(20,28,38,.12);
  /* los dos flujos */
  --dinero:#1F4863; --dinero-hondo:#17384E; --dinero-tinte:#E8EEF3;
  --material:#8F3412; --material-tinte:#F8EADF;
  /* sobre las bandas marino */
  --sobre-banda:#FAF7ED; --sobre-banda-2:#E4EAEF;
  /* lo que va encima de un botón marino */
  --sobre-accion:#FFFFFF;
  /* sólo dentro de las pantallas de la app */
  --app-fondo:#FAF7ED; --app-superficie:#FFFDF7; --app-linea:#737E88; --bien:#00564A; --bien-tinte:#E2EFEB; --alerta:#5A4100;
  /* letra */
  --f-sitio:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-app:"Outfit","Inter",system-ui,sans-serif;
  --f-dato:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --t-h1:clamp(32px,2.9vw + 22px,64px);
  --t-h2:clamp(28px,1.25vw + 22px,40px);
  --t-h3:22px; --t-bajada:20px; --t-cuerpo:18px; --t-nota:15px; --t-rotulo:13px; --t-dato:13px;
  /* espacio: múltiplos de 8 */
  --e1:8px; --e2:16px; --e3:24px; --e4:32px; --e5:48px; --e6:64px; --e7:96px; --e8:128px;
  --bloque:var(--e8);
  /* detalle */
  --radio:12px; --radio-app:20px;
  --sombra-app:0 24px 48px -16px rgba(20,28,38,.24);
  --ancho:1200px; --gutter:clamp(16px,4vw,48px);
  color-scheme:light;
}
@media (max-width:1199px){:root{--bloque:var(--e7)}}
@media (max-width:640px){:root{--bloque:var(--e6);--t-h3:20px;--t-bajada:18px;--t-cuerpo:17px}}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url("/v7/fuentes/inter.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-display:swap;font-weight:100 900;src:url("/v7/fuentes/outfit.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:100 800;src:url("/v7/fuentes/jetbrains-mono.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--f-sitio);font-size:var(--t-cuerpo);line-height:1.6;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
:focus-visible{outline:2px solid var(--dinero);outline-offset:3px;border-radius:4px}
.banda :focus-visible{outline-color:var(--sobre-banda)}
.salto{position:absolute;left:16px;top:12px;z-index:50;background:var(--dinero);color:var(--sobre-accion);padding:8px 16px;border-radius:var(--radio);
  font-size:15px;text-decoration:none;transform:translateY(-200%)}
.salto:focus{transform:none}
.marco{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)}
.est{width:1em;height:1em;color:var(--dinero);flex:none}

/* ── tipografía ───────────────────────────────────────────── */
h1,h2,h3{text-wrap:balance;margin:0;font-weight:600}
h1{font-size:var(--t-h1);line-height:1.06;letter-spacing:-.032em}
h2{font-size:var(--t-h2);line-height:1.15;letter-spacing:-.024em}
h3{font-size:var(--t-h3);line-height:1.35;letter-spacing:-.012em}
p{margin:0}
.antetitulo{font-size:var(--t-rotulo);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dinero)}
.bajada{font-size:var(--t-bajada);line-height:1.6;color:var(--tinta-2);max-width:36em}
.texto-corrido{max-width:30em;color:var(--tinta-2)}
.nota{font-size:var(--t-nota);line-height:1.55;color:var(--tinta-2)}
.dato{font-family:var(--f-dato);font-size:.9em;letter-spacing:0}

/* ── la acción: marino ──────────────────────────────────── */
.boton{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:0 24px;border-radius:var(--radio);
  background:var(--dinero);color:var(--sobre-accion);font-weight:600;font-size:16px;text-decoration:none;transition:background .15s}
.boton:hover{background:var(--dinero-hondo)}
.banda .boton{background:var(--sobre-banda);color:var(--dinero)}
.banda .boton:hover{background:var(--superficie)}
.enlace{font-weight:600;color:var(--dinero);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;position:relative}
.enlace::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.enlace:hover{border-bottom-width:2px}

/* ── los flujos: forma + color + palabra ─────────────────── */
.mk{display:inline-block;width:10px;height:10px;flex:none}
.mk.m{background:var(--material)}
.mk.d{background:var(--dinero);border-radius:50%}
.etq{display:inline-flex;align-items:center;gap:8px;height:24px;padding:0 10px;border-radius:var(--radio);font-family:var(--f-dato);
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta)}
.etq.m{background:var(--material-tinte)}
.etq.d{background:var(--dinero-tinte)}
.etiquetas{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ── barra ──────────────────────────────────────────────── */
.barra{position:relative;border-bottom:1px solid var(--regla-suave)}
.barra .marco{display:flex;align-items:center;gap:24px;min-height:72px}
.logo{display:block;color:var(--dinero);line-height:0}
.logo svg{height:24px;width:auto}
.menu{display:flex;gap:24px;margin-left:auto;font-size:15px;font-weight:500;white-space:nowrap}
.menu a{text-decoration:none;color:var(--tinta)}
.menu a:hover{color:var(--dinero)}
.menu a[aria-current],.cajon a[aria-current]{color:var(--dinero);font-weight:600}
.barra .boton{min-height:40px;padding:0 16px;font-size:15px;white-space:nowrap}
.barra details{display:none;margin-left:auto}
.barra summary{list-style:none;cursor:pointer;display:flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--regla);border-radius:var(--radio);font-size:15px;font-weight:500;color:var(--tinta);white-space:nowrap}
.barra summary:focus-visible{border-radius:var(--radio)}
.barra summary::-webkit-details-marker{display:none}
.barra details[open] .cajon{position:absolute;left:0;right:0;top:72px;background:var(--papel);border-bottom:1px solid var(--regla-suave);
  padding:8px var(--gutter) 16px;display:grid;z-index:20}
.cajon a{padding:12px 0;text-decoration:none;font-weight:500;border-bottom:1px solid var(--regla-suave)}
@media (max-width:781px){.menu{display:none}.barra details{display:block}.barra .marco{gap:12px}.barra .boton{margin-left:auto;min-height:44px;padding:0 12px;font-size:14px}.barra details{margin-left:0}.barra summary{padding:0 10px}}
@media (max-width:400px){.barra .marco{gap:8px}.barra .logo svg{height:21px}.barra .boton{padding:0 10px;font-size:13.5px}.barra summary{font-size:14px;padding:0 10px}}
@media (max-width:359px){.barra .marco{gap:5px}.barra .logo svg{height:18px}.barra .boton{font-size:12.5px;padding:0 8px}.barra summary{font-size:13.5px;padding:0 8px}}

/* ── bloques ────────────────────────────────────────────── */
.bloque{padding-block:var(--bloque)}
.bloque + .bloque:not(.banda){border-top:1px solid var(--regla-suave)}
.banda{background:var(--dinero);color:var(--sobre-banda)}
.banda .tinta-2,.banda .nota{color:var(--sobre-banda-2)}
.cabeza{display:grid;gap:var(--e3);max-width:46em}

/* 1 · portada */
.portada{padding-block:var(--e6) var(--bloque)}
.portada .marco{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"titular titular" "texto pantalla";gap:var(--e5) var(--e6);align-items:start}
.titular{grid-area:titular;display:grid;gap:var(--e3)}
.titular h1{max-width:15.5em}
.portada .texto{grid-area:texto;display:grid;gap:var(--e3);padding-top:var(--e1)}
.portada .pantalla-marco{grid-area:pantalla}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:var(--e1)}
@media (max-width:960px){.portada{padding-block:var(--e5) var(--bloque)}.portada .marco{grid-template-columns:minmax(0,1fr);grid-template-areas:"titular" "texto" "pantalla";gap:var(--e4)}}

/* 2 · seis trabajos */
.trabajos .marco{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--e6)}
.trabajos .cabeza{align-content:start}
.cierre-trabajos{font-size:var(--t-bajada);line-height:1.5;color:var(--tinta-2);max-width:22em}
.lista-trabajos{list-style:none;margin:0;padding:0;border-top:2px solid var(--tinta)}
.lista-trabajos li{border-bottom:1px solid var(--regla-suave)}
.lista-trabajos a{display:grid;grid-template-columns:9em minmax(0,1fr) auto;gap:8px 24px;padding:24px 0;text-decoration:none;align-items:baseline}
.area{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-dato);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2);white-space:nowrap}
.area .mk + .mk{margin-left:-4px}
.lista-trabajos strong{display:block;color:var(--tinta);font-size:20px;font-weight:600;line-height:1.35;margin-bottom:8px;letter-spacing:-.01em}
.lista-trabajos span.texto{color:var(--tinta-2);font-size:17px;line-height:1.55}
.lista-trabajos .flecha{color:var(--dinero);font-weight:600;transition:transform .15s}
.lista-trabajos a:hover .flecha{transform:translateX(4px)}
.lista-trabajos a:hover strong{color:var(--dinero)}
@media (max-width:960px){.trabajos .marco{grid-template-columns:minmax(0,1fr);gap:var(--e5)}}
@media (max-width:560px){.lista-trabajos a{grid-template-columns:minmax(0,1fr) auto}.area{grid-column:1/-1}}

/* 3 · banda: cómo se usa */
.uso .marco{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--e6);align-items:center}
.uso .texto{display:grid;gap:var(--e4)}
.pasos-uso{display:grid;gap:var(--e3);margin:0;padding:0;list-style:none;max-width:30em}
.pasos-uso li{color:var(--sobre-banda-2);padding-left:24px;position:relative}
.pasos-uso li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--sobre-banda)}
.pasos-uso strong{color:var(--sobre-banda);font-weight:600}
.regla-uso{border-top:1px solid var(--sobre-banda-2);padding-top:var(--e3);font-size:var(--t-bajada);line-height:1.5;color:var(--sobre-banda);font-weight:500;max-width:28em}
@media (max-width:960px){.uso .marco{grid-template-columns:minmax(0,1fr);gap:var(--e5)}}

/* 4 · Publicaciones: cifras neutras salvo la del material */
.cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--e5);border-top:2px solid var(--tinta)}
.cifra{padding:var(--e3) var(--e4) 0 0;display:grid;gap:var(--e2);align-content:start}
.cifra + .cifra{padding-left:var(--e4);border-left:1px solid var(--regla-suave)}
.cifra b{font-size:clamp(56px,4.4vw + 16px,96px);line-height:1;font-weight:600;letter-spacing:-.045em;color:var(--tinta)}
.cifra.m b{color:var(--material)}
.cifra .etiquetas{min-height:24px}
.cifra p:not(.etiquetas){max-width:19em;color:var(--tinta-2)}
.fuente{margin-top:var(--e5);display:flex;flex-wrap:wrap;gap:16px 32px;align-items:baseline;justify-content:space-between}
.fuente .nota{max-width:30em}
@media (max-width:760px){.cifras{grid-template-columns:minmax(0,1fr)}.cifra{padding:var(--e3) 0}.cifra + .cifra{padding-left:0;border-left:0;border-top:1px solid var(--regla-suave)}.cifra .etiquetas:empty{display:none}}

/* 5 · el recorrido: dos rieles que se cruzan donde se mueven los dos */
.recorrido .cabeza{max-width:44em}
.leyenda{list-style:none;margin:var(--e4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:16px 40px;font-size:15px;color:var(--tinta-2)}
.leyenda li{display:inline-flex;align-items:center;gap:12px}
.leyenda svg{width:40px;height:14px;flex:none}
.leyenda b{color:var(--tinta);font-weight:600}
.leyenda.corta{gap:8px 24px;margin-top:0}
.leyenda.corta svg{width:14px}
.leyenda.corta .riel-muestra,.leyenda.corta .desc{display:none}
.flujo-m{color:var(--material)}
.flujo-d{color:var(--dinero)}
.leyenda li > span{color:var(--tinta-2)}
.ruta{list-style:none;margin:var(--e6) 0 0;padding:0}
.parada{display:grid;grid-template-columns:11em 44px minmax(0,1fr) minmax(0,420px);grid-template-areas:"puertas rieles que que";column-gap:var(--e3)}
.parada.cierre{grid-template-areas:"puertas rieles que pantalla"}
.puertas{grid-area:puertas;display:grid;gap:var(--e2);align-content:start;text-align:right;padding-top:2px}
.puertas p{display:grid;line-height:1.35}
.puertas b{font-size:15px;font-weight:600}
.puertas span{font-size:14px;color:var(--tinta-2)}
.rieles{grid-area:rieles;position:relative}
.riel{position:absolute;top:0;bottom:0}
.riel.m{width:2px;background:var(--material)}
.riel.d{width:6px;border-inline:1px solid var(--dinero)}
.riel.m.izq{left:10px}.riel.m.der{left:34px}
.riel.d.izq{left:8px}.riel.d.der{left:32px}
.parada:first-child .riel{top:12px}
.parada:last-child .riel{bottom:auto;height:12px}
.riel.arriba{bottom:auto;height:24px}
.riel.abajo{top:64px}
.cruce{position:absolute;left:0;top:24px;width:44px;height:40px}
.rieles .mk{position:absolute;top:5px;width:14px;height:14px;box-shadow:0 0 0 3px var(--papel)}
.rieles .mk.izq{left:4px}.rieles .mk.der{left:28px}
.que{grid-area:que;display:grid;gap:var(--e1);align-content:start;padding-bottom:var(--e6);max-width:36em}
.que .etiquetas{margin-bottom:var(--e1)}
.que .cierra{font-family:var(--f-dato);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2);margin-left:8px}
.que p:not(.etiquetas){color:var(--tinta-2);max-width:30em}
.que .enlace{justify-self:start;margin-top:var(--e1)}
.ruta .pantalla-marco{grid-area:pantalla;padding-bottom:var(--e6)}
.pie-ruta{padding-top:var(--e4);border-top:2px solid var(--tinta);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 48px;align-items:baseline}
.pie-ruta p{max-width:30em;color:var(--tinta-2)}
@media (max-width:1000px){.pie-ruta{grid-template-columns:minmax(0,1fr)}.pie-ruta .enlace{justify-self:start}}
@media (max-width:960px){
  .parada,.parada.cierre{grid-template-columns:32px minmax(0,1fr);grid-template-areas:"rieles puertas" "rieles que" "rieles pantalla";column-gap:12px}
  .rieles{grid-row:1 / -1}
  .riel.m.izq{left:7px}.riel.m.der{left:24px}
  .riel.d{width:5px}.riel.d.izq{left:6px}.riel.d.der{left:23px}
  .rieles .mk.izq{left:1px}.rieles .mk.der{left:18px}
  .cruce{width:32px}
  .puertas{text-align:left;display:flex;flex-wrap:wrap;gap:4px 16px;padding-bottom:var(--e2)}
  .puertas p{display:block}
  .puertas span::before{content:" · "}
  .que{padding-bottom:var(--e5)}
  .ruta .pantalla-marco{padding-bottom:var(--e5)}
  .ruta .demo{left:12px}
}

/* 4 · Trabajo: el bloque va en neutros; la pantalla, con los colores de la app */
.bloque-trabajo .marco{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--e6);align-items:center}
.bloque-trabajo .texto{display:grid;gap:var(--e3)}
.bloque-trabajo .texto p{color:var(--tinta-2);max-width:30em}
.bloque-trabajo .enlace{justify-self:start}
@media (max-width:960px){.bloque-trabajo .marco{grid-template-columns:minmax(0,1fr);gap:var(--e5)}}

/* 6 · lo que nunca hace */
.nunca .marco{display:grid;gap:var(--e5)}
.lista-nunca{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--e5);border-top:2px solid var(--tinta)}
.lista-nunca li{padding-top:var(--e3);font-size:clamp(20px,.5vw + 17px,24px);line-height:1.35;font-weight:600;letter-spacing:-.012em}
@media (max-width:820px){.lista-nunca{grid-template-columns:minmax(0,1fr)}.lista-nunca li{padding:var(--e3) 0;border-bottom:1px solid var(--regla-suave)}}

/* 7 · el precio */
.precio{border:1px solid var(--regla);border-radius:var(--radio);padding:var(--e5);background:var(--superficie);
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e3) var(--e5);align-items:center}
.precio .rotulo{letter-spacing:.12em;font-size:var(--t-rotulo);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:var(--e2)}
.precio .monto{font-size:clamp(40px,2.4vw + 22px,56px);font-weight:600;letter-spacing:-.035em;line-height:1}
.precio .monto small{font-size:17px;font-weight:500;letter-spacing:0;color:var(--tinta-2);margin-left:calc(8px - .269em)}
.precio .nota{margin-top:var(--e2)}
@media (max-width:820px){.precio{padding:var(--e4) var(--e3)}}

/* 9 · cierre */
.cierre-final .marco{display:grid;justify-items:center;text-align:center;gap:var(--e3)}
.cierre-final h2{max-width:18em}

/* preguntas */
.faq .marco{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--e6)}
.faq details{border-bottom:1px solid var(--regla-suave)}
.faq details:first-child{border-top:2px solid var(--tinta)}
.faq summary{cursor:pointer;list-style:none;padding:24px 40px 24px 0;font-weight:600;position:relative;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:30px;width:10px;height:10px;border-right:2px solid var(--dinero);border-bottom:2px solid var(--dinero);transform:rotate(45deg);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(225deg);top:34px}
.faq details p{padding:0 0 24px;color:var(--tinta-2);max-width:30em}
@media (max-width:960px){.faq .marco{grid-template-columns:minmax(0,1fr);gap:var(--e4)}}

/* pie */
.pie{border-top:2px solid var(--tinta);padding-block:var(--e6) var(--e5);font-size:15px}
.pie .marco{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--e4)}
.pie .logo svg{height:22px}
.pie nav{display:grid;gap:var(--e2)}
.pie nav div{display:flex;flex-wrap:wrap;gap:8px 24px}
.pie a{text-decoration:none}
.pie a:hover{color:var(--dinero);text-decoration:underline}
@media (max-width:760px){.pie .marco{grid-template-columns:minmax(0,1fr)}}

/* ── LAS PANTALLAS DE LA APP · un solo marco, una sola luz ──
   Clases de app-client: tarjeta rounded-xl border-paper-divider bg-paper-surface p-3; botones rounded-lg;
   la burbuja del dueño rounded-2xl rounded-br bg-emerald (que es marino); renglones border-l-2 pl-2 text-[13px]. */
.pantalla-marco{position:relative;padding-top:28px;display:grid;justify-items:end}
.ruta .pantalla-marco{justify-items:start}
@media (max-width:960px){.pantalla-marco{justify-items:start}}
.demo{position:absolute;top:0;right:20px;font-family:var(--f-dato);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2);
  background:var(--papel);padding:4px 8px;border:1px solid var(--regla);border-bottom:0;border-radius:4px 4px 0 0}
.ruta .demo{right:auto;left:20px}
.banda .demo{background:var(--dinero);color:var(--sobre-banda-2);border-color:var(--sobre-banda-2)}
.pantalla{margin:0;width:100%;max-width:440px;font-family:var(--f-app);font-size:15px;color:var(--tinta);background:var(--app-fondo);
  border:1px solid var(--regla-suave);border-radius:var(--radio-app);box-shadow:var(--sombra-app);overflow:hidden}
.banda .pantalla{border-color:transparent}
.p-cab{display:flex;align-items:center;gap:8px;height:48px;padding:0 16px;border-bottom:1px solid var(--regla-suave);background:var(--app-superficie)}
.p-cab .est{font-size:18px}
.p-cab b{font-weight:600;font-size:15px}
.p-cab .hora{margin-left:auto;font-family:var(--f-dato);font-size:12px;color:var(--tinta-2)}
.hilo{display:grid;gap:16px;padding:20px 16px 24px}
.dueno{justify-self:end;max-width:82%;background:var(--dinero);color:var(--sobre-accion);border-radius:16px 16px 4px 16px;padding:12px 16px;font-size:14px;line-height:1.6}
.wdx{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start}
.wdx > .est{font-size:20px;margin-top:2px}
.dice{font-size:14.5px;line-height:1.55;display:grid;gap:12px}
.tarjeta{border:1px solid var(--app-linea);background:var(--app-superficie);border-radius:12px;padding:12px}
.tarjeta .et{font-weight:600;font-size:14px;margin-bottom:8px}
.renglones{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.renglones li{display:grid;grid-template-columns:minmax(0,1fr) auto 5.4em;gap:12px;align-items:baseline;border-left:2px solid var(--app-linea);padding-left:8px;font-size:13px;color:var(--tinta-2)}
.renglones li > span:first-child{color:var(--tinta)}
.renglones .m{font-family:var(--f-dato);font-size:12.5px;color:var(--tinta)}
.renglones .d{font-size:12.5px;font-weight:500;text-align:right}
.renglones .d.alerta{color:var(--alerta)}
.renglones .d.bien{color:var(--bien)}
.detalle{font-size:13px;color:var(--tinta-2);margin-bottom:12px}
.detalle .m{font-family:var(--f-dato);color:var(--tinta)}
.botones{display:flex;flex-wrap:wrap;gap:8px}
.b-app{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:6px 16px;font-size:14px;font-weight:500}
.b-app.si{background:var(--dinero);color:var(--sobre-accion)}
.b-app.no{background:var(--app-superficie);color:var(--tinta-2)}
.b-app svg{width:14px;height:14px}
.listo{display:flex;align-items:center;gap:8px}
.listo .ok{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--bien-tinte);color:var(--bien)}
.listo .ok svg{width:11px;height:11px}
.deshacer{display:inline-flex;align-items:center;gap:6px;height:28px;border:1px solid var(--regla-suave);border-radius:8px;padding:0 10px;font-size:12.5px;color:var(--tinta-2);background:var(--app-superficie);width:max-content}
.deshacer .m{font-family:var(--f-dato);font-size:12px}
.deshacer svg{width:12px;height:12px}
.compositor{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--regla-suave);background:var(--app-superficie)}
.compositor .campo{flex:1;min-width:0;border:1px solid var(--regla-suave);border-radius:999px;padding:8px 16px;font-size:14px;color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compositor .ic{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--tinta-2);flex:none}
.compositor .ic.mic{background:var(--dinero);color:var(--sobre-accion)}
.compositor svg{width:18px;height:18px}
.icono *{vector-effect:non-scaling-stroke}
@media (max-width:400px){.hilo{padding:16px 12px 20px}.wdx{gap:8px}.renglones li{gap:2px 8px;grid-template-columns:minmax(0,1fr) auto}.renglones .d{grid-column:1/-1;text-align:left}.renglones .d:empty{display:none}}

.t-cuerpo{display:grid;gap:16px;padding:20px 16px 24px}
.t-rot{font-size:12.5px;font-weight:600;color:var(--tinta-2)}
.t-cabecera{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:end;padding-bottom:16px;border-bottom:1px solid var(--regla-suave)}
.t-cifra{display:grid;gap:2px}
.t-alta{text-align:right}
.t-alta .t-total{font-size:22px}
.t-cabecera .t-sub{grid-column:1/-1}
.t-semana{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:-8px}
.t-subtotal{font-family:var(--f-dato);font-size:13px;font-weight:500;color:var(--tinta)}
.t-total{font-size:36px;font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--tinta)}
.t-sub{font-size:13px;color:var(--tinta-2)}
.t-sub .m{font-family:var(--f-dato);font-size:12.5px;color:var(--tinta)}
.t-pesos{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.t-pesos li{display:grid;grid-template-columns:4.6rem minmax(0,1fr);grid-template-areas:"monto texto" "monto prueba";gap:4px 12px;padding:12px;border:1px solid var(--app-linea);border-radius:12px;background:var(--app-superficie)}
.t-monto{grid-area:monto;font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--tinta)}
.t-pesos p{grid-area:texto;font-size:13.5px;line-height:1.5;color:var(--tinta)}
.t-prueba{grid-area:prueba;justify-self:start;font-size:13px;font-weight:500;color:var(--dinero);text-decoration:underline;text-underline-offset:3px}
.t-conteos{list-style:none;margin:0;padding:0 4px;display:grid;gap:6px;font-size:13px;color:var(--tinta-2)}
.t-conteos b{font-family:var(--f-dato);font-weight:500;color:var(--tinta);margin-right:calc(6px - .208em)}
.t-siguiente{display:grid;gap:8px;padding-top:16px;border-top:1px solid var(--regla-suave)}
.t-siguiente p:not(.t-rot){font-size:14px;line-height:1.5;color:var(--tinta)}
.t-siguiente .b-app{justify-self:start}

/* lo que Wodelix escribe, se escribe una vez */
@media (prefers-reduced-motion:no-preference){
  .entra{animation:entra .5s cubic-bezier(.32,.72,0,1) both}
  .entra.d1{animation-delay:.35s}.entra.d2{animation-delay:.75s}
  @keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}


/* Δ153 · la retícula entre 961 y 1199 px */
@media (min-width:961px) and (max-width:1199px){
  .parada.cierre{grid-template-columns:11em 44px minmax(0,1fr);grid-template-areas:"puertas rieles que" ". rieles pantalla"}
  .parada.cierre .que{padding-bottom:var(--e4)}
}

/* el logo de la barra y del pie: el área tocable mide 44 px sin mover el dibujo */
.logo{position:relative}
.logo::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}

/* Inicio · lo que sí hace con tus datos (resumenSeguridad): una línea de 1 px lo separa de las reglas */
.resumen{display:grid;gap:var(--e2);padding-top:var(--e4);border-top:1px solid var(--regla-suave)}
.lista-resumen{list-style:none;margin:0;padding:0;display:grid;gap:var(--e1)}
@media (max-width:820px){.lista-nunca li:last-child{border-bottom:0}}
/* Inicio · hasta 640 px, «al mes, IVA incluido» va en su propio renglón, debajo del monto */
@media (max-width:640px){.precio .monto small{display:block;margin:var(--e1) 0 0;line-height:1.4}}

/* el pie hasta 640 px: cada enlace mide 44 px; el menú y las legales en dos columnas */
@media (max-width:640px){
  .pie nav .pie-enlaces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
  .pie nav .pie-contacto{display:grid;gap:0}
  .pie nav .pie-enlaces a,.pie nav .pie-contacto a{display:flex;align-items:center;min-height:44px}
}

/* ── páginas interiores ─────────────────────────────────── */
.cabeza-pagina{padding-block:var(--e6) var(--e4)}
.cabeza-pagina .marco{display:grid;gap:var(--e3)}
.cabeza-pagina h1{max-width:17em}
.cabeza-pagina .leyenda.corta{margin-top:var(--e1)}
.cabeza-pagina .cifras{margin-top:var(--e3)}
.cabeza-pagina .lista-trabajos strong{margin-bottom:0}
@media (max-width:640px){.cabeza-pagina{padding-block:var(--e5) var(--e3)}}
/* la primera sección de las legales y del historial arranca a la altura de las demás páginas */
main > .bloque.doc:first-child{padding-top:var(--e6)}
@media (max-width:640px){main > .bloque.doc:first-child{padding-top:var(--e5)}}
.rotulo{font-size:var(--t-rotulo);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2)}

/* un área en dos columnas: a la izquierda qué es, lo que le dice y su pantalla; a la derecha lo que hace.
   En el celular, el mismo orden. */
.area-sec{scroll-margin-top:16px}
.area-sec .marco{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--e5) var(--e6);align-items:start}
.area-sec .lado{display:grid;gap:var(--e3);align-content:start;min-width:0}
.area-sec .lado h2{max-width:14em}
.area-sec .te-dice{color:var(--tinta-2);max-width:26em}
.area-sec .cuerpo{display:grid;gap:var(--e4);min-width:0}
.etiqueta-campo{font-weight:600;color:var(--tinta)}
.lista-hace{list-style:none;margin:0;padding:0;border-top:2px solid var(--tinta);max-width:30em}
.area-sec .cuerpo p + .lista-hace{margin-top:calc(var(--e2) * -1)}
.lista-hace li{padding:var(--e2) 0;border-bottom:1px solid var(--regla-suave);color:var(--tinta-2)}
.area-sec .sirve{color:var(--tinta-2);max-width:30em}
.area-sec .pieza{min-width:0;margin-top:var(--e1)}
.area-sec .pantalla-marco{justify-items:start}
.area-sec .demo{right:auto;left:20px}
@media (max-width:960px){.area-sec .marco{grid-template-columns:minmax(0,1fr);gap:var(--e4)}}

/* la línea que lleva a otra página */
.liga-pagina{justify-self:start}

/* el cierre de una página interior */
.cierre-pagina .marco{display:grid;justify-items:center;text-align:center;gap:var(--e3)}
.cierre-pagina h2{max-width:18em}

/* la ficha de una publicación: el marco de la caja del precio, y toda la ficha es un solo enlace */
.fichas{list-style:none;margin:0;padding:0;display:grid;gap:var(--e4)}
.ficha{display:grid;gap:var(--e3);border:1px solid var(--regla);border-radius:var(--radio);padding:var(--e5);background:var(--superficie);
  color:var(--tinta);text-decoration:none}
.ficha .fecha{font-family:var(--f-dato);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}
.ficha .entrada{color:var(--tinta-2);max-width:30em}
.ficha .cifras{margin-top:var(--e2)}
.ficha .enlace{justify-self:start}
.ficha:hover h2{color:var(--dinero)}
.ficha:hover .enlace{border-bottom-width:2px}
.ficha:focus-visible{border-radius:var(--radio)}
@media (max-width:820px){.ficha{padding:var(--e4) var(--e3)}}

/* el estudio: el texto a 27em, unos 60 caracteres */
.estudio-sec .marco{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--e5) var(--e6);align-items:start}
.estudio-sec .cuerpo{display:grid;gap:var(--e3);min-width:0;color:var(--tinta-2)}
.estudio-sec .cuerpo p{max-width:27em}
.estudio-sec .cuerpo strong{color:var(--tinta);font-weight:600}
@media (max-width:960px){.estudio-sec .marco{grid-template-columns:minmax(0,1fr);gap:var(--e4)}}
.cifras.cuatro{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}
@media (max-width:1080px){.cifras.cuatro{grid-template-columns:repeat(2,minmax(0,1fr))}.cifras.cuatro .cifra:nth-child(3){padding-left:0;border-left:0}.cifras.cuatro .cifra:nth-child(n+3){border-top:1px solid var(--regla-suave);margin-top:var(--e3)}}
@media (max-width:560px){.cifras.cuatro{grid-template-columns:minmax(0,1fr)}.cifras.cuatro .cifra{padding:var(--e3) 0;margin-top:0}.cifras.cuatro .cifra + .cifra{padding-left:0;border-left:0;border-top:1px solid var(--regla-suave)}}
.cifras.cuatro .cifra b{font-size:40px}
.lecturas,.practicas{margin:0;padding-left:1.4em;display:grid;gap:var(--e3);max-width:27em}
.lecturas li::marker,.practicas li::marker{font-weight:600;color:var(--tinta)}
/* «Lo que se rompe» en barras: sin radio, largo proporcional a las reseñas (221 es el 100 %),
   en regla; las dos de entrega, en ladrillo con su etiqueta. En el celular, el nombre arriba y la barra a todo el ancho. */
.barras{list-style:none;margin:0;padding:var(--e3) 0 0;display:grid;gap:var(--e3);border-top:2px solid var(--tinta)}
.barra-fila{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:var(--e1) var(--e3);align-items:center}
.barra-nombre{display:grid;gap:4px}
.barra-nombre p:first-child{color:var(--tinta)}
.barra-valor{display:flex;align-items:center;gap:12px;min-width:0}
.barra-relleno{display:block;flex:none;height:16px;width:calc((100% - 52px) * var(--f));background:var(--regla)}
.barra-fila.m .barra-relleno{background:var(--material)}
.barra-num{font-family:var(--f-dato);font-size:15px;color:var(--tinta)}
@media (max-width:640px){.barra-fila{grid-template-columns:minmax(0,1fr)}}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* las legales: el índice abierto, como lista; desde 961 px, fijo al costado con su propio scroll */
.doc .marco{display:grid;gap:var(--e4)}
.cabeza-doc{display:grid;gap:var(--e4)}
.doc .actualizacion{color:var(--tinta-2);font-size:var(--t-nota)}
.indice{display:grid;gap:var(--e1);align-self:start;min-width:0}
.indice ol{list-style:none;margin:0;padding:var(--e1) 0 0;border-top:2px solid var(--tinta);font-size:16px}
.indice li[data-nivel="3"]{padding-left:1.2em}
.indice a{display:flex;align-items:center;min-height:32px;padding:4px 0;line-height:1.4;color:var(--tinta-2);text-decoration:none}
.indice a:hover{color:var(--dinero);text-decoration:underline}
@media (min-width:961px){
  .doc.con-indice .marco{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--e6);align-items:start}
  .doc.con-indice .cabeza-doc{grid-column:1 / -1}
  .doc.con-indice .indice{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow:auto;padding:0 8px 8px;margin-inline:-8px}
  .doc.con-indice .cuerpo-legal > :first-child{margin-top:0}
}
.cuerpo-legal{display:grid;gap:var(--e2);max-width:32em;min-width:0;color:var(--tinta-2);overflow-wrap:anywhere}
.tabla-envoltura{overflow-x:auto;min-width:0}
.tabla{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.tabla th{font-size:var(--t-rotulo);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2);text-align:left;padding:12px 16px 12px 0;border-bottom:2px solid var(--tinta)}
.tabla td{padding:14px 16px 14px 0;border-bottom:1px solid var(--regla-suave);color:var(--tinta);vertical-align:top}
.cuerpo-legal h2,.cuerpo-legal h3{color:var(--tinta);font-size:var(--t-h3);line-height:1.35;letter-spacing:-.012em;margin-top:var(--e4);scroll-margin-top:16px}
.cuerpo-legal h4{color:var(--tinta);font-size:18px;margin-top:var(--e3)}
.cuerpo-legal strong{color:var(--tinta);font-weight:600}
.cuerpo-legal ul{margin:0;padding-left:1.3em;display:grid;gap:var(--e1)}
.cuerpo-legal a{color:var(--dinero)}
.cuerpo-legal code,.historial code{font-family:var(--f-dato);font-size:.9em;color:var(--tinta)}
.cuerpo-legal ol{margin:0;padding-left:1.3em;display:grid;gap:var(--e1)}
/* un marcador que quedó sin llenar en una versión anterior: se ve, como en el sitio de hoy */
.legal-todo{background:var(--material-tinte);color:var(--tinta);outline:1px solid var(--material);padding:0 .2em;border-radius:2px}
/* la franja que dice qué versión es */
.aviso-version{background:var(--dinero-tinte);color:var(--tinta);border-radius:var(--radio);padding:12px 16px;font-size:var(--t-nota);line-height:1.5;max-width:32em}
.aviso-version a{color:var(--dinero-hondo)}
.historial section{display:grid;gap:var(--e2)}
.historial h2{margin-top:var(--e4)}
.historial ol{list-style:none;padding:0;border-top:2px solid var(--tinta)}
.historial li{padding:var(--e2) 0;border-bottom:1px solid var(--regla-suave)}

/* 404 */
.no-existe{padding-block:var(--e8)}
.no-existe .marco{display:grid;gap:var(--e3);justify-items:start}

/* ── segunda vuelta del 8-oct ─────────────────────────────── */
/* ◆16 · la entrada de cada renglón de las áreas: negrita y en tinta, como los pasos de «Cómo se usa» */
.lista-hace strong{color:var(--tinta);font-weight:600}
/* ◆18 · la caja del precio mide lo que su contenido, con el mismo marco y el mismo tipo; en el celular, todo el ancho */
.precio{width:fit-content;max-width:100%}
@media (max-width:640px){.precio{width:auto}}
/* ◆17 · la oración debajo de las cuatro cifras, al ancho de la fuente de Inicio */
.nota-cifras{max-width:30em}

/* ── tercera vuelta del 8-oct y cierre de la v7: Áreas y Para su contador, de la propuesta republicada ─── */
.num{font-family:var(--f-dato);font-size:13px;letter-spacing:.06em;color:var(--tinta-2)}
.mapa-areas{list-style:none;margin:var(--e2) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e2)}
.mapa-areas > li{display:flex}
.mapa-areas .ficha-area{flex:1;display:grid;grid-template-rows:auto 1fr auto;gap:var(--e2);padding:var(--e3);border:1px solid var(--regla);border-radius:var(--radio); background:var(--superficie);color:var(--tinta);text-decoration:none;transition:border-color .15s}
.mapa-areas .ficha-area strong{font-size:20px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.mapa-areas .ficha-area .flecha{justify-self:end;color:var(--dinero);font-weight:600;transition:transform .15s}
.mapa-areas .ficha-area:hover{border-color:var(--dinero)}
.mapa-areas .ficha-area:hover strong{color:var(--dinero)}
.mapa-areas .ficha-area:hover .flecha{transform:translateX(4px)}
.mapa-areas .trabajo .ficha-area{background:var(--dinero-tinte);border-color:transparent}
.mapa-areas .trabajo .ficha-area:hover{border-color:var(--dinero)}
@media (max-width:960px){.mapa-areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){ .mapa-areas{grid-template-columns:minmax(0,1fr);gap:12px} .mapa-areas .ficha-area{padding:var(--e2) var(--e3);gap:12px} .mapa-areas .ficha-area strong{font-size:18px} }
.nav-areas{position:sticky;top:0;z-index:30;background:var(--papel);border-bottom:1px solid var(--regla-suave)}
.nav-areas .marco{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.nav-areas .marco::-webkit-scrollbar{display:none}
.nav-areas a{display:flex;align-items:center;flex:none;min-height:48px;padding:0 12px;white-space:nowrap;font-size:15px;font-weight:500;color:var(--tinta-2);text-decoration:none;box-shadow:inset 0 -2px 0 transparent}
.nav-areas a:first-child{margin-left:-12px}
.nav-areas a:hover{color:var(--dinero)}
.nav-areas a[aria-current]{color:var(--dinero);font-weight:600;box-shadow:inset 0 -2px 0 var(--dinero)}
.area-sec,.area-sec .grupo[id]{scroll-margin-top:56px}
.area-sec .marco{grid-template-areas:"cab cuerpo" "pieza cuerpo";grid-template-rows:auto 1fr}
.area-sec .cab{grid-area:cab;display:grid;gap:var(--e3);align-content:start;min-width:0}
.area-sec .cab h2{max-width:14em}
.area-sec .cab .area{gap:8px}
.area-sec .cuerpo{grid-area:cuerpo;gap:var(--e5)}
.area-sec .pieza{grid-area:pieza;margin-top:0}
@media (max-width:960px){.area-sec .marco{grid-template-areas:"cab" "cuerpo" "pieza";grid-template-rows:auto}}
.lo-que-dice{display:grid;gap:6px;max-width:26em;padding:var(--e2) var(--e3);border-left:4px solid var(--tinta);border-radius:0 var(--radio) var(--radio) 0;background:var(--superficie)}
.lo-que-dice.m{border-left-color:var(--material);background:var(--material-tinte)}
.lo-que-dice.d{border-left-color:var(--dinero);background:var(--dinero-tinte)}
.lo-que-dice .rotulo{color:var(--tinta-2)}
.lo-que-dice p:last-child{font-size:var(--t-bajada);line-height:1.45;font-weight:500;color:var(--tinta)}
.area-sec{--flujo:var(--tinta)}
.area-sec.f-m{--flujo:var(--material)}
.area-sec.f-d{--flujo:var(--dinero)}
.grupos{display:grid;gap:var(--e4)}
.grupo{display:grid;gap:14px;max-width:27em}
.grupo-titulo{display:flex;align-items:center;gap:10px;margin:0;font-size:18px;line-height:1.35;font-weight:600;letter-spacing:-.01em;color:var(--tinta)}
.grupo-titulo::before{content:"";flex:none;width:10px;height:10px;background:var(--flujo)}
.grupo-titulo::after{content:"";flex:1;height:1px;background:var(--regla-suave)}
.f-d .grupo-titulo::before{border-radius:50%}
.grupo .lista-hace{display:grid;gap:20px;max-width:none;border-top:0}
.grupo .lista-hace li{position:relative;padding:0 0 0 22px;border:0}
.grupo .lista-hace li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;background:var(--flujo)}
.f-d .grupo .lista-hace li::before{border-radius:50%}
.grupo .lista-hace .t{font-size:17px;line-height:1.4;font-weight:600;color:var(--tinta)}
.grupo .lista-hace .d{margin-top:2px;font-size:16px;line-height:1.55;color:var(--tinta-2)}
.grupo > p{color:var(--tinta-2)}
.area-sec .cita{max-width:30em;padding:4px 0 4px var(--e3);border-left:3px solid var(--tinta);color:var(--tinta);font-size:var(--t-bajada);line-height:1.5}
.area-sec .cita.m{border-left-color:var(--material)}
.area-sec .cita.d{border-left-color:var(--dinero)}
.area-sec .cita .rotulo{display:block;margin-bottom:6px}
.opciones{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opciones li{display:grid;gap:8px;align-content:start;padding:var(--e3);border:1px solid var(--regla);border-radius:var(--radio);background:var(--superficie);color:var(--tinta)}
@media (max-width:640px){.opciones{grid-template-columns:minmax(0,1fr)}}
.puente{display:grid;gap:12px;justify-items:start;padding:var(--e3);border-radius:var(--radio);background:var(--dinero-tinte);color:var(--tinta)}
.area-sec.banda .area,.area-sec.banda .num{color:var(--sobre-banda-2)}
.area-sec.banda .cuerpo p{color:var(--sobre-banda-2);max-width:30em}
.area-sec.banda .cuerpo p strong{color:var(--sobre-banda);font-weight:600}
.area-sec.banda .liga-pagina{color:var(--sobre-banda)}
.tarjetas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tarjetas li{display:grid;gap:8px;align-content:start;padding:var(--e3);border:1px solid var(--regla);border-radius:var(--radio);background:var(--superficie);color:var(--tinta)}
@media (max-width:640px){.tarjetas{grid-template-columns:minmax(0,1fr)}}
.cabeza-contador .marco{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;gap:var(--e4) var(--e6)}
.cabeza-contador .texto{display:grid;gap:var(--e3)}
.cabeza-contador .pantalla-marco{justify-items:end}
@media (max-width:960px){.cabeza-contador .marco{grid-template-columns:minmax(0,1fr)}.cabeza-contador .pantalla-marco{justify-items:start}}
.recibe .marco{display:grid;gap:var(--e5)}
.fichas-contador{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e3)}
.fichas-contador > li{display:grid;gap:var(--e2);align-content:start;padding:var(--e4);border:1px solid var(--regla);border-radius:var(--radio);background:var(--superficie)}
.fichas-contador .lista-hace{max-width:none}
@media (max-width:760px){.fichas-contador{grid-template-columns:minmax(0,1fr);gap:12px}.fichas-contador > li{padding:var(--e3)}}
.archivos{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.archivos li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;border-left:2px solid var(--app-linea);padding-left:8px;font-size:13px;color:var(--tinta)}
.archivos .tipo{font-family:var(--f-dato);font-size:12px;letter-spacing:.04em;padding:2px 8px;border-radius:6px;background:var(--dinero-tinte);color:var(--dinero-hondo)}
.area-sec.bloque{padding-block:var(--e7)}
@media (max-width:1199px){.area-sec.bloque{padding-block:var(--e6)}}
@media (max-width:640px){.area-sec.bloque{padding-block:var(--e5)}}
.area-sec.banda .cuerpo{gap:var(--e3)}
@media (min-width:961px) and (min-height:760px){.area-sec .pieza{position:sticky;top:72px;align-self:start}}
@media (max-width:560px){ .mapa-areas .ficha-area{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:end;gap:8px 16px} .mapa-areas .ficha-area .area{grid-column:1/-1} }
.fichas-contador .lista-hace li:last-child{border-bottom:0;padding-bottom:0}
.area-sec:not(.banda) .cuerpo{max-width:27em}
.grupo > p{font-size:16px}
.opciones li{font-size:16px;line-height:1.5}
.area-sec.primer-dia .cuerpo{max-width:none}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Δ209 · el foco del menú de las áreas: la fila tiene su propio scroll y recortaba el contorno arriba y abajo */
.nav-areas a:focus-visible{outline-offset:-2px}
/* Δ210 · con el menú pegado arriba, lo enfocable que viene después guarda su alto al recibir el foco (Shift+Tab) */
.nav-areas ~ section a{scroll-margin-top:64px}
/* Δ216 · cierre de la v7, punto 12: la segunda nota de la caja del precio va pegada a la primera, y ninguna nota
   estira la caja más allá de 36em; la caja sigue midiendo lo que su contenido (◆18, Δ202) */
.precio .nota{max-width:36em}
.precio .nota + .nota{margin-top:var(--e1)}
/* ── Wodelix Go en el Inicio (nota del director A, 17-oct) ────────
   Como Trabajo: el bloque va en neutros y la pantalla, con los colores de la app. */
.go .marco{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--e6);align-items:center}
.go .texto{display:grid;gap:var(--e3)}
.go .renglones li{grid-template-columns:minmax(0,1fr) auto}
.dueno .compartido{display:block;margin-bottom:4px;font-size:12px;line-height:1.4;color:var(--sobre-banda-2)}
@media (max-width:960px){.go .marco{grid-template-columns:minmax(0,1fr);gap:var(--e5)}}