/* ═══════════════════════════════════════════════════════════════════════════
   PRESUPUESTO VIVO · VERSION C · «CUCA TE LO PREPARA» · ronda del 15-09-2026

   Solo lo de C. Tokens y piezas vienen de _base.css y _casa.css; el calendario
   y la nota de voz traen su hoja (_calendario.css, _voz.css).
   Indice
     01 la pieza (alto de ventana, rejilla por modo)
     02 la escena: luz, Cuca y el bocadillo
     03 el panel de cristal: cuerpo que rueda, aviso, pie
     04 el pase: la pila de pegatinas en una fila y su capa (D1)
     05 opciones comunes y doodles
     06 pantallas: celebracion, estrella, incluye, personajes, fecha, lugar, cuentanos, contacto, hecho
     07 cajon de andamio (?panel) · afinidad, ficha y Señas
     08 escritorio bajo, tableta y movil
     09 movimiento reducido y quieto
   Ronda 3 (CAMBIOS-C-RONDA3.md): R4 el panel y la hoja miden lo que su contenido (techo: el alto
   disponible) y el alto viaja con Casa.morfea / Casa.ajusta; R5 el canto de la hoja, limpio (movil);
   R3 el post sin boton («se guarda solo»).
   ⚠️ Sin filter ni mix-blend-mode en antepasados del cristal (el panel, la ficha y las capas).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════ 01 · LA PIEZA ═══════════════════════ */
html,body{height:100%}
/* Sin scroll de pagina: el hueco reservado para la barra (base) sobra y dejaba una franja a la derecha */
html{scrollbar-gutter:auto}
body{overflow:hidden;background:var(--color-crema)}
.c{
  --c-margen:clamp(1.25rem,.35rem + 2.3vw,3rem);
  --c-hueco:clamp(1.25rem,.25rem + 2.4vw,3.25rem);
  --c-marco:.75rem;
  --c-relleno:var(--radio-panel);
  --cuca-alto:min(60dvh,37rem);
  --cuca-mini:6.25rem;
  position:relative;isolation:isolate;height:var(--c-alto,100dvh);overflow:clip;
}
.c > .fondo-casa{z-index:0}
.c-arriba,.c-escena,.c-panel{position:relative;z-index:1}
[hidden]{display:none!important}

@media (width >= 64rem){
  .c{--c-techo:calc(var(--alto-cabecera) + .25rem);--c-suelo:var(--c-margen);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:minmax(0,1fr);column-gap:var(--c-hueco);padding-inline:var(--c-margen)}
  .c-arriba{display:none}
  .c-escena{grid-column:1;grid-row:1;min-height:0}
  /* R4 · el panel mide lo que su contenido (pase + cuerpo + pie), con el techo alineado con el
     bocadillo y, como mucho, el alto que queda: solo entonces rueda el cuerpo */
  .c-panel{grid-column:2;grid-row:1;align-self:start;margin-block:var(--c-techo) var(--c-suelo);min-height:0;max-height:calc(100% - var(--c-techo) - var(--c-suelo))}
}

/* ═══════════════════════ 02 · LA ESCENA ═══════════════════════ */
/* La luz: un halo blanco detras del pecho y una poza de brillo en el suelo (luz fisica, sin manchas) */
.c-escena__luz{position:absolute;inset:auto -12% 0;height:88%;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 38% at 50% 58%,rgb(255 255 255 / .72) 0%,rgb(255 255 255 / .28) 55%,transparent 78%),
    radial-gradient(58% 26% at 50% 100%,color-mix(in oklab,var(--color-brillo) 30%,transparent) 0%,color-mix(in oklab,var(--color-nube) 40%,transparent) 50%,transparent 80%)}

/* Cuca, recortada contra el suelo. La figura se mide por alto y se centra por la cara. */
.c-cuca{position:absolute;inset:auto 0 0 0;z-index:1;display:flex;justify-content:center;align-items:flex-end;pointer-events:none}
.c-cuca__escala{--c-cuca-ancho:calc(var(--cuca-alto) * var(--c-f,1) * var(--c-prop,1));display:flex;justify-content:center;align-items:flex-end;transform:scale(var(--cuca-escala,1));transform-origin:50% 100%;transition:transform var(--dur-escena) var(--ease-curva)}
.c-cuca .cuca{translate:calc((.5 - var(--c-cx,.5)) * var(--cuca-ancho)) 0}
/* Los cantos de la foto se funden: los hombros no acaban en una raya */
.c-cuca .cuca__cuerpo img{-webkit-mask-image:radial-gradient(125% 100% at 50% 18%,#000 62%,transparent 92%);mask-image:radial-gradient(125% 100% at 50% 18%,#000 62%,transparent 92%);filter:none}
/* La sombra, en el envoltorio y no en la foto (05-10-2026): la mascara de aqui arriba recortaba el drop-shadow de la foto contra su caja, y sobre el fondo rosa de P-13 se veia un recuadro gris detras de Cuca. Primero se recorta la silueta y despues se proyecta. */
.c-cuca .cuca__cuerpo{filter:drop-shadow(0 16px 22px rgb(28 28 30 / .12))}

/* LOS BOCADILLOS (R10) · el grande solo con la pregunta y, debajo, el pequeño con la reaccion de Cuca.
   Los dos se estiran (Casa.bocadillo). El pequeño arranca en el mismo eje de texto que el grande:
   su relleno es su radio y se mete hacia dentro lo que le falta hasta el relleno del grande. */
.c-bocas{--bocadillo-max:34rem;--boca-relleno:var(--radio-tarjeta);--mini-radio:var(--radio-pieza);--mini-respiro:.375rem;position:absolute;z-index:3;top:calc(var(--alto-cabecera) + .75rem);left:0;right:0;display:flex;flex-direction:column;align-items:flex-start;width:max-content;max-width:min(100%,var(--bocadillo-max));margin-inline:auto}
.c-boca{position:relative;max-width:100%;filter:drop-shadow(0 16px 30px rgb(28 28 30 / .12)) drop-shadow(0 2px 4px rgb(28 28 30 / .05))}
.c-boca .bocadillo__caja{max-width:min(100%,var(--bocadillo-max));padding:var(--spacing-bloque) var(--boca-relleno) calc(var(--spacing-bloque) + 2px);gap:var(--spacing-dedo)}
.c-boca .bocadillo__cola{color:var(--color-nata);transition:opacity var(--dur-normal) var(--ease-curva),scale var(--dur-normal) var(--ease-curva)}
.c-cola--lado{display:none}
.c-cola--abajo{display:block;top:calc(100% - 1px);left:var(--cola-x,6rem);width:2.375rem;height:1.75rem;transform-origin:0 0}
/* La cola, como en un chat: solo en el ultimo bocadillo (el mas cerca de Cuca). El paso se anima. */
/* P-16 (05-10-2026): el pequeño va ENCIMA, asi que el ultimo es siempre el grande y la cola es suya */
.c-bocas #boca-mini .c-cola{opacity:0;scale:.4;transition-timing-function:var(--ease-salida);transition-duration:var(--dur-corto)}
/* El hueco del pequeño se abre de 0 a su alto y se recoge al quitarlo (sin saltos) */
/* P-16: el pequeño va encima, así que el respiro es por debajo de él */
.c-mini-hueco{display:grid;grid-template-rows:0fr;margin-bottom:0;opacity:0;pointer-events:none;transition:grid-template-rows var(--dur-normal) var(--ease-salida),margin-bottom var(--dur-normal) var(--ease-salida),opacity var(--dur-corto) var(--ease-salida)}
.c-mini-hueco--puesto{grid-template-rows:1fr;margin-bottom:var(--mini-respiro);opacity:1;pointer-events:auto;transition:grid-template-rows var(--dur-escena) var(--ease-curva),margin-bottom var(--dur-escena) var(--ease-curva),opacity var(--dur-normal) var(--ease-curva)}
/* El margen de recorte cubre la sombra del bocadillo (16 px + 30 de difuso): sin el, se veia su canto */
.c-mini-hueco__recorte{min-height:0;overflow:clip;overflow-clip-margin:5rem}
.c-boca--mini{margin-inline-start:calc(var(--boca-relleno) - var(--mini-radio))}
/* integracion R1/R2 (15-09-2026): el pequeño nunca pasa del ancho de su columna (en movil, una reaccion larga como «¡Dos estrellas! Lo ajustamos a sus edades.» se salia de la pantalla): la columna del hueco es minmax(0,1fr) y el bocadillo parte en dos lineas */
.c-mini-hueco{grid-template-columns:minmax(0,1fr);max-width:100%}
.c-mini-hueco__recorte{min-width:0}
.c-boca--mini{max-width:calc(100% - (var(--boca-relleno) - var(--mini-radio)))}
.c-bocas .c-boca--mini .bocadillo__caja{max-width:min(100%,26rem);padding:.5625rem var(--mini-radio) .625rem;border-radius:var(--mini-radio);gap:0}
.c-bocas .c-boca--mini .c-boca__uno{font-size:var(--text-corto);line-height:1.35}
.c-boca--mini .c-cola--abajo{width:1.75rem;height:1.25rem}
.c-boca__uno{font-family:var(--font-display);font-size:var(--text-lead);line-height:1.3;letter-spacing:-.012em;font-weight:500;color:var(--color-tinta);text-wrap:pretty}
.c-boca__titular{margin:0}
.c-boca .titular--pregunta{font-size:clamp(1.75rem,1.15rem + 1.35vw,2.625rem);line-height:1.06}
.c-boca .titular__dos{padding-bottom:.06em}
.c-boca__titular:focus,.c-boca__titular:focus-visible{outline:none}
.c-boca__bajada{font-size:var(--text-corto);line-height:1.5;color:var(--color-tinta-suave);text-wrap:pretty}
/* La guia en el mismo bocadillo: «¿Te ayudo?» */
.c-boca--guia .bocadillo__caja{padding-inline-end:3.5rem}
.c-boca__uno--guia{display:flex;align-items:center;gap:.375rem;font-family:var(--font-sans);font-size:var(--text-micro);font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--color-chicle)}
.c-boca__chispa svg{width:.95rem;height:.95rem;fill:currentColor;stroke:none}
.c-boca__guia-titulo{font-family:var(--font-display);font-size:var(--text-rotulo);line-height:1.2;letter-spacing:-.018em;font-weight:700;color:var(--color-tinta);text-wrap:balance}
.c-boca__dice{font-size:var(--text-corto);line-height:1.5;color:var(--color-tinta-suave);text-wrap:pretty}
.c-boca__acciones{display:flex;flex-wrap:wrap;gap:var(--spacing-dedo);margin-top:var(--spacing-hilo)}
.c-boca__acciones .boton{min-height:2.75rem}
.c-ico-boton svg{width:1.05em;height:1.05em}
.c-boca__cerrar{position:absolute;top:.375rem;right:.375rem;z-index:2;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:var(--radio-entero);color:var(--color-tinta-suave);transition:background-color var(--dur-corto) var(--ease-salida),color var(--dur-corto) var(--ease-salida)}
.c-boca__cerrar svg{width:1.1rem;height:1.1rem}
@media (hover:hover){.c-boca__cerrar:hover{background-color:color-mix(in oklab,var(--color-tinta) 7%,transparent);color:var(--color-tinta)}}

/* ═══════════════════════ 03 · EL PANEL DE CRISTAL ═══════════════════════ */
.c-panel{display:flex;flex-direction:column;contain:layout paint;border-radius:var(--radio-panel);background-color:rgb(255 255 255 / .5);-webkit-backdrop-filter:blur(var(--difuso-blur));backdrop-filter:blur(var(--difuso-blur));box-shadow:inset 0 0 0 1px rgb(255 255 255 / .62),0 30px 70px -34px rgb(28 28 30 / .22)}
/* El pase flota por encima del cuerpo: su capa de pegatinas se abre sobre las respuestas sin empujarlas */
.c-panel__pase{position:relative;z-index:8;flex:none;padding:var(--c-marco) var(--c-marco) 0}
.c-cuerpo{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;container-type:inline-size;scrollbar-width:none;padding:var(--spacing-bloque) var(--c-relleno) var(--spacing-caja)}
.c-cuerpo::-webkit-scrollbar{display:none}
/* Cuando rueda, el canto se funde (nada queda cortado en seco). PRE-007 (19-10-2026): el fundido
   se queda en un 35 % y no a transparente, y mide 3,5 rem: la píldora cortada se ve a medias, que es
   la señal de «hay más»; a transparente borraba la última justo por su canto y se leía como fin */
.c-cuerpo--rueda{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 3.5rem),color-mix(in srgb,#000 35%,transparent));mask-image:linear-gradient(to bottom,#000 calc(100% - 3.5rem),color-mix(in srgb,#000 35%,transparent))}
.c-cuerpo--arriba{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 1.5rem,#000 calc(100% - 3.5rem),color-mix(in srgb,#000 35%,transparent));mask-image:linear-gradient(to bottom,transparent,#000 1.5rem,#000 calc(100% - 3.5rem),color-mix(in srgb,#000 35%,transparent))}
.c-cuerpo--arriba:not(.c-cuerpo--rueda){-webkit-mask-image:linear-gradient(to bottom,transparent,#000 1.5rem);mask-image:linear-gradient(to bottom,transparent,#000 1.5rem)}
/* ANCLA OPTICA FIJA: las respuestas arrancan siempre a la misma distancia bajo el pase.
   R4: sin min-height (la pantalla mide lo suyo y el panel la sigue) */
.c-pantalla{display:flex;flex-direction:column;justify-content:flex-start;gap:var(--spacing-bloque)}
/* Mientras el panel viaja, el cuerpo recorta sin fundido (el contenido cuelga de arriba y se descubre) */
.c-panel.morfeando .c-cuerpo{overflow:hidden}
/* Lo nuevo brota con el muelle, escalonado y empujado en el sentido del paso (R4 · 5) */
.c-nace{animation:c-nace var(--dur-normal) var(--ease-muelle) calc(var(--turno-arranque) + var(--turno,0) * var(--turno-normal)) both}
.c-nace--atras{--c-empuje:calc(-1 * var(--via-salto))}
@keyframes c-nace{from{opacity:0;translate:0 var(--c-empuje,var(--via-salto));scale:var(--esc-nace)}}
.c-funde{animation:c-funde var(--dur-corto) var(--ease-salida) both}
@keyframes c-funde{from{opacity:0}}
/* R4: el aviso ambar ocupa su sitio (entre el cuerpo y el pie) y el panel se estira para dejarle hueco */
.c-aviso{position:relative;z-index:5;display:flex;justify-content:flex-end;flex:none;padding:0 var(--c-relleno) var(--spacing-dedo);pointer-events:none}
.c-aviso:empty{display:none}
.c-pie .c-aviso{padding:0}
.c-aviso .aviso-pastilla{box-shadow:inset 0 0 0 1px var(--aviso-filete),0 8px 20px -10px rgb(28 28 30 / .25)}
.c-pie{flex:none;align-items:center;padding:var(--spacing-caja) var(--c-relleno) calc(var(--spacing-bloque) + env(safe-area-inset-bottom));border-top:1px solid color-mix(in oklab,var(--color-tinta) 6%,transparent)}
.c-pie .atras{margin-inline-start:calc(-1 * var(--spacing-pieza))}
.c-atras--oculto{visibility:hidden}
.c-pie .boton svg.ico--adelante{width:1.05em;height:1.05em}
#siguiente[aria-busy="true"]{cursor:progress}
/* PRE-007 (19-10-2026) · LA BOLA DE «HAY MÁS» (.boton.boton--suave.boton--icono.c-mas, la crea _c.js
   detrás del cuerpo). Dice lo que hay: sale mientras el cuerpo rueda y no se está al final. La forma y
   el vestido son de la casa (nata con filo de tinta, nunca chicle, que la bola chicle es «Siguiente»);
   aquí solo va dónde se pone y cómo aparece. En el flujo del panel con alto neto cero (el margen de
   arriba la sube su alto más un dedo sobre el cuerpo, el de abajo devuelve el dedo): su canto inferior
   queda a un dedo del pie sin medir nada en JS. A LA DERECHA, al canto del contenido (cliente, 19-10:
   «la flecha solapa la opción»): centrada tapaba el texto de la píldora cortada; a la derecha cae
   sobre su extremo vacío, donde la de empresa lleva su flecha */
.c-mas{z-index:6;flex:none;align-self:flex-end;margin-block:calc(-2.75rem - var(--spacing-dedo)) var(--spacing-dedo);margin-inline-end:var(--c-relleno);opacity:0;translate:0 var(--spacing-dedo);pointer-events:none;transition:opacity var(--dur-corto) var(--ease-salida),translate var(--dur-corto) var(--ease-salida)}
.c-mas svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.c-mas--visible{opacity:1;translate:0 0;pointer-events:auto}
/* Con el teclado fuera taparía el campo; en escritorio el cuerpo rueda con la rueda y su barra */
.c--teclado .c-mas{opacity:0;pointer-events:none}
/* PRE-006 (19-10-2026): con el teclado fuera, la cabecera SEO (`PresupuestoVivo.vue`) se va siempre,
   se vea o no sin él; fuera del bloque del teléfono para que valga en cualquier ancho */
.c--teclado .c-intro,.c--teclado-intro .c-intro{display:none}
@media (width >= 64rem){.c-mas{display:none}}
#siguiente[aria-busy="true"] > svg{display:none}
#siguiente-texto{display:inline-flex;align-items:center;gap:.5rem}
.c-siguiente--web > svg{display:none}
.c-solo-estrecho{display:none}
/* Solo del movil (04-10-2026): la etiqueta dentro del campo y el enlace de la leyenda (bloque 08) */
.c-campo__etiqueta,.c-leyenda-enlace{display:none}
@media (width < 40rem), (width < 64rem) and (height < 30rem){.c-solo-ancho{display:none}.c-solo-estrecho{display:inline}}

/* ═══════════════════════ 04 · EL PASE ═══════════════════════
 * Papel nata con su talon a la derecha (perforado, con la ranura del cordon, las
 * estrellas de capitulo y el tiempo que queda). D1: las pegatinas, en UNA fila
 * de alto fijo, solapadas como una pila. El pase mide lo mismo de principio a fin. */
.c-pase{--talon:6.5rem;position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--talon);border-radius:var(--radio-tarjeta);background-color:var(--color-nata);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 6%,transparent),0 1px 2px rgb(28 28 30 / .05),0 16px 32px -20px rgb(28 28 30 / .3)}
.c-pase__papel{position:relative;min-width:0;padding:1rem 1.25rem 1.125rem var(--radio-tarjeta)}
.c-pase__titulo{font-family:var(--font-display);font-size:clamp(1.25rem,.85rem + .9vw,1.625rem);font-weight:650;letter-spacing:-.022em;line-height:1.12;color:var(--color-tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-pase__nombre{font-weight:800;background-image:linear-gradient(100deg,var(--color-chicle),var(--color-brillo) 60%,var(--color-chicle));-webkit-background-clip:text;background-clip:text;color:transparent;padding-inline-end:.04em}
.c-pase__barra{margin-top:.75rem}
/* La punta late con una animacion que pisa su opacidad: al vaciarse, se para */
.c-pase__barra.barra-viva--vaciada .barra-viva__punta{animation:none;opacity:0}

/* LA FILA: pila de discos + lo ultimo pegado + cuenta. Todo es un boton (44 px de toque). */
.c-pase__fila{--disco:1.875rem;position:relative;display:flex;align-items:center;gap:.625rem;width:calc(100% + .75rem);height:2.75rem;margin:.375rem 0 0 -.375rem;padding:0 .625rem 0 .375rem;border-radius:var(--radio-entero);color:var(--color-tinta);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-corto) var(--ease-salida)}
@media (hover:hover){.c-pase__fila:hover{background-color:rgb(255 255 255 / .9);transition-timing-function:var(--ease-curva)}.c-pase__fila:hover .c-pila__disco:not(.c-pila__disco--hueco){rotate:0deg}}
.c-pase__fila:focus-visible{outline:2px solid var(--color-chicle);outline-offset:2px}
.c-pase--abierto .c-pase__fila{background-color:#fff;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-chicle) 30%,transparent)}
.c-pila{display:inline-flex;align-items:center;flex:none;padding-inline-start:.125rem}
.c-pila__disco{position:relative;z-index:calc(20 - var(--i,0));display:grid;place-items:center;flex:none;width:var(--disco);height:var(--disco);margin-inline-start:calc(var(--disco) * -.34);border-radius:var(--radio-entero);background-color:var(--terr,var(--color-brillo));box-shadow:0 0 0 2px #fff,0 0 0 2.75px color-mix(in oklab,var(--color-tinta) 6%,transparent),0 4px 8px -4px rgb(28 28 30 / .35);rotate:var(--giro,0deg);transition:rotate var(--dur-normal) var(--ease-curva),background-color var(--dur-pausado) var(--ease-nivel)}
.c-pila__disco:first-child{margin-inline-start:0}
.c-pila__disco::after{content:'';width:58%;height:58%;background-color:#fff;-webkit-mask:var(--dibujo) center/contain no-repeat;mask:var(--dibujo) center/contain no-repeat}
/* Lo que falta: puntos en fila detras de la pila (la pila crece, la fila no) */
.c-pila__disco--hueco{width:.5rem;height:.5rem;margin-inline-start:.375rem;background-color:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--color-tinta) 24%,transparent);rotate:0deg}
.c-pila__disco:not(.c-pila__disco--hueco) + .c-pila__disco--hueco{margin-inline-start:.75rem}
.c-pila__disco--hueco:first-child{margin-inline-start:.25rem}
.c-pila__disco--hueco::after{display:none}
/* El hueco que espera: se aviva despacio (reloj del menu) */
.c-pila__disco--actual{width:.8125rem;height:.8125rem;box-shadow:inset 0 0 0 2px var(--color-chicle),0 0 0 3px color-mix(in oklab,var(--color-brillo) 22%,transparent)}
.c-pila__disco--actual::before{content:'';position:absolute;inset:-5px;border-radius:inherit;box-shadow:0 0 0 1.5px color-mix(in oklab,var(--color-brillo) 50%,transparent);opacity:0;animation:c-espera calc(var(--dur-escena) * 4) var(--ease-nivel) infinite}
@keyframes c-espera{0%,100%{opacity:0;scale:.9}50%{opacity:1;scale:1}}
.c-pila__disco.aterriza{animation:c-pega var(--dur-pausado) var(--ease-muelle) both}
@keyframes c-pega{0%{scale:1.45;rotate:calc(var(--giro,0deg) - 14deg)}55%{scale:.92}100%{scale:1;rotate:var(--giro,0deg)}}
.c-pila__ultima{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--text-micro);font-weight:650;letter-spacing:-.005em;color:var(--color-tinta)}
.c-pila__ultima--vacia{font-weight:500;color:var(--color-tinta-suave)}
.c-pila__flecha{flex:none;margin-inline-start:auto;width:1rem;height:1rem;fill:none;stroke:var(--color-tinta-suave);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:rotate var(--dur-normal) var(--ease-curva)}
.c-pase--abierto .c-pila__flecha{rotate:180deg}

/* LA CAPA: cristal del desplegable de la casa, sobre el contenido, sin empujarlo */
.c-pase__capa{position:absolute;top:calc(100% + .5rem);left:0;right:calc(-1 * var(--talon));z-index:30;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem .5rem;margin:0;padding:.625rem;border-radius:var(--radio-pieza);background-color:rgb(255 255 255 / .9);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .8),var(--sombra);list-style:none;transform-origin:1.5rem 0}
.c-pase__capa::before{content:'';position:absolute;top:-.34rem;left:2.25rem;width:.85rem;height:.85rem;rotate:45deg;border-radius:.14rem;background-color:rgb(255 255 255 / .9)}
.c-pase__capa--entra{animation:c-capa var(--dur-normal) var(--ease-curva) both}
@keyframes c-capa{from{opacity:0;scale:var(--esc-nace);translate:0 calc(-1 * var(--via-paso))}}
.c-pase__capa > li{display:block;min-width:0}
.c-pegatina{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:.625rem;width:100%;min-height:3rem;padding:.3125rem 1rem .3125rem .3125rem;border-radius:var(--radio-entero);color:var(--color-tinta);text-align:left;cursor:pointer;transition:background-color var(--dur-corto) var(--ease-salida),box-shadow var(--dur-corto) var(--ease-salida)}
@media (hover:hover){.c-pegatina:not(.c-pegatina--quieta):hover{background-color:#fff;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-chicle) 40%,transparent)}.c-pegatina:not(.c-pegatina--quieta):hover .c-pegatina__disco{rotate:0deg}}
.c-pegatina:focus-visible{outline:2px solid var(--color-chicle);outline-offset:2px}
.c-pegatina--quieta{cursor:default}
.c-pegatina__disco{position:relative;display:grid;place-items:center;width:2.375rem;height:2.375rem;border-radius:var(--radio-entero);background-color:var(--terr,var(--color-brillo));box-shadow:0 0 0 2px #fff,0 5px 10px -6px rgb(28 28 30 / .35);rotate:var(--giro,0deg);transition:rotate var(--dur-normal) var(--ease-curva)}
.c-pegatina__disco::after{content:'';width:56%;height:56%;background-color:#fff;-webkit-mask:var(--dibujo) center/contain no-repeat;mask:var(--dibujo) center/contain no-repeat}
.c-pegatina__letras{display:grid;min-width:0;gap:1px}
.c-pegatina__rotulo{font-size:.6875rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--color-tinta-suave);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-pegatina__texto{font-size:var(--text-corto);font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-pegatina--hueco .c-pegatina__disco{background-color:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--color-tinta) 14%,transparent);rotate:0deg}
.c-pegatina--hueco .c-pegatina__disco::after{background-color:color-mix(in oklab,var(--color-tinta) 22%,transparent)}
.c-pegatina--hueco .c-pegatina__texto{font-weight:500;color:var(--color-tinta-suave)}
.c-pegatina--actual{background-color:rgb(255 255 255 / .7);box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--color-chicle) 45%,transparent)}
.c-pegatina--actual.c-pegatina--hueco .c-pegatina__disco{box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--color-chicle) 60%,transparent)}
.c-pegatina--actual.c-pegatina--hueco .c-pegatina__disco::after{background-color:var(--color-chicle)}

/* El talon */
.c-pase__talon{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.625rem;padding:.875rem .625rem;border-radius:0 var(--radio-tarjeta) var(--radio-tarjeta) 0;background-image:linear-gradient(165deg,var(--color-nube),color-mix(in oklab,var(--color-niebla) 70%,var(--color-nube)));border-left:1.5px dashed color-mix(in oklab,var(--color-tinta) 14%,transparent)}
.c-pase__ranura{width:2.25rem;height:.5rem;border-radius:var(--radio-entero);background-color:var(--color-crema);box-shadow:inset 0 1px 2px rgb(28 28 30 / .22),0 1px 0 rgb(255 255 255 / .8)}
/* R7 · el tiempo que queda, minimalista: texto quieto en el talon, sin icono ni cifra grande */
.c-pase__tiempo{margin:0;max-width:100%;font-size:.75rem;font-weight:650;letter-spacing:-.005em;line-height:1.15;text-align:center;color:var(--color-tinta-suave)}
/* El brillo que recorre el pase al cerrar un capitulo */
.c-pase__luz{position:absolute;inset:0;z-index:1;border-radius:inherit;overflow:hidden;pointer-events:none}
.c-pase__luz::after{content:'';position:absolute;inset:0 auto 0 0;width:45%;background:linear-gradient(105deg,transparent 0%,rgb(255 255 255 / .8) 50%,transparent 100%);opacity:0;translate:-110% 0}
.c-pase--brilla .c-pase__luz::after{animation:c-pase-brilla var(--dur-vaciado) var(--ease-nivel) both}
@keyframes c-pase-brilla{0%{opacity:0;translate:-110% 0}20%{opacity:1}100%{opacity:0;translate:250% 0}}
/* El sello del final (matasellos de la casa) */
.c-pase--hecho .c-pase__tiempo{visibility:hidden}
.c-pase__sello{position:absolute;right:calc(var(--talon) / 2 + .875rem);top:50%;translate:50% -50%;z-index:2;display:grid;justify-items:center;gap:1px;padding:.3125rem .5625rem .25rem;border:2px solid var(--color-chicle);border-radius:var(--radio-control);color:var(--color-chicle-tinta);background:rgb(255 250 245 / .78);rotate:-11deg;pointer-events:none;box-shadow:inset 0 0 0 2px rgb(255 255 255 / .6)}
.c-pase__sello b{font-family:var(--font-display);font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1}
.c-pase__sello small{font-size:.5625rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.c-pase__sello--pon{animation:c-sello var(--dur-pausado) var(--ease-muelle) both}
@keyframes c-sello{0%{opacity:0;scale:1.6}60%{opacity:1}100%{opacity:1;scale:1}}

/* ═══════════════════════ 05 · OPCIONES COMUNES Y DOODLES ═══════════════════════ */
/* Los doodles del pack de la casa son de relleno: se pintan como mascara con el color que toque */
.c-doodle{display:block;width:100%;height:100%;background-color:var(--doodle,currentColor);-webkit-mask:var(--dibujo) center/contain no-repeat;mask:var(--dibujo) center/contain no-repeat}
.c-v{display:flex;flex-direction:column;gap:var(--spacing-bloque)}
.c-grupo{display:flex;flex-direction:column;gap:var(--spacing-pieza);min-width:0}
.c-rotulo{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:.625rem;font-family:var(--font-display);font-size:var(--text-lead);font-weight:600;letter-spacing:-.014em;line-height:1.2;color:var(--color-tinta)}
.c-rotulo__nota{font-family:var(--font-sans);font-size:var(--text-micro);font-weight:500;letter-spacing:0;color:var(--color-tinta-suave)}
.c-nota{font-size:var(--text-micro);line-height:1.45;color:var(--color-tinta-suave);text-wrap:pretty}
.c-cuenta{font-size:var(--text-corto);font-weight:500;color:var(--color-tinta-suave);min-height:1.5em;text-wrap:pretty}
.c-opciones{display:grid;gap:var(--spacing-pieza)}
.c-v .pildora--grande{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;font-size:var(--text-cuerpo)}
.c-v .pildora{text-wrap:balance}
.c-op__nota{font-family:var(--font-sans);font-size:var(--text-nano);font-weight:500;letter-spacing:0;color:var(--color-tinta-suave)}
.pildora[aria-pressed="true"] .c-op__nota{color:rgb(255 255 255 / .9)}
.c-opciones--suelta{display:flex;flex-wrap:wrap;gap:var(--spacing-dedo)}
.c-grupo--escape{align-items:flex-start}

.c-opciones--rango{grid-template-columns:repeat(3,minmax(0,1fr))}
.c-opciones--rango .pildora{--alto:3.5rem}
/* La cifra manda: Bricolage grande; «Hasta» y «Más de» la acompañan en voz baja */
.c-rango__texto{display:inline-flex;align-items:baseline;justify-content:center;flex-wrap:wrap;column-gap:.375rem}
.c-rango__pre{font-family:var(--font-sans);font-size:var(--text-corto);font-weight:500;letter-spacing:0;color:var(--color-tinta-suave)}
.c-rango__cifra{font-family:var(--font-display);font-size:1.375rem;font-weight:700;letter-spacing:-.028em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.pildora[aria-pressed="true"] .c-rango__pre{color:rgb(255 255 255 / .92)}
@media (width >= 64rem){
  .c-opciones--rango .pildora{--alto:4.5rem}
  .c-opciones--rango .c-rango__cifra{font-size:1.625rem}
  .c-opciones--rango .c-rango__pre{font-size:var(--text-cuerpo)}
}

/* LOS ESCAPES · el estilo tranquilo de la casa: sin relleno, filete fino en tinta muy suave, texto
 * tinta-suave, mismo alto tactil. Separados del grupo por un respiro. Elegidos, se ven elegidos. */
.c-v .pildora.c-escape{font-family:var(--font-sans);font-size:var(--text-corto);font-weight:500;letter-spacing:0}
.pildora.c-escape:not([aria-pressed="true"]){background-color:transparent;color:var(--color-tinta-suave);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 14%,transparent)}
@media (hover:hover){.pildora.c-escape:not([aria-pressed="true"]):hover{background-color:rgb(255 255 255 / .55);color:var(--color-tinta);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-chicle) 45%,transparent)}}
.c-v .pildora.c-escape[aria-pressed="true"]{font-weight:600}
.c-opciones--rango .c-escape,.c-opciones--espacio .c-escape{grid-column:1 / -1;justify-self:start;margin-top:var(--spacing-dedo)}
.con-aviso .pildora.c-escape:not([aria-pressed="true"]){box-shadow:inset 0 0 0 1.5px var(--color-ambar)}
.c-opciones--chips{display:flex;flex-wrap:wrap;gap:var(--spacing-dedo)}
.c-opciones--evento .chip{--alto:3rem;font-size:var(--text-cuerpo)}

/* ═══════════════════════ 06 · PANTALLAS ═══════════════════════ */
/* ─── P1 · Qué celebramos: dos columnas y la puerta de empresa a lo ancho, del doble de alto ─── */
.c-v--celebracion{--celebra-alto:4.5rem;gap:var(--spacing-pieza)}
.c-opciones--celebra,.c-opciones--organiza{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-pieza)}
/* 15-09-2026 (cliente: «pon la 3 al mismo tamaño»): cumpleaños, otra fiesta y empresa miden lo mismo.
   A media columna el texto de empresa no cabe en ese alto, así que las tres van una por fila. */
.c-opciones--celebra{grid-template-columns:minmax(0,1fr)}
.c-celebra.pildora{--alto:var(--celebra-alto,4.5rem);--disco:calc(var(--alto) - 1rem);justify-content:flex-start;gap:.875rem;padding-inline:calc((var(--alto) - var(--disco)) / 2) calc(var(--alto) / 2);font-size:var(--text-lead);line-height:1.15;text-align:left}
.c-op__disco{position:relative;display:grid;place-items:center;flex:none;width:var(--disco,2rem);height:var(--disco,2rem);border-radius:var(--radio-entero);background-color:var(--color-nube);color:var(--color-tinta);transition:background-color var(--dur-corto) var(--ease-salida)}
.c-op__disco .c-doodle{width:54%;height:54%;opacity:.86}
.pildora[aria-pressed="true"] .c-op__disco{background-color:rgb(255 255 255 / .28);color:#fff}
.pildora[aria-pressed="true"] .c-op__disco .c-doodle{opacity:1}
/* La puerta de empresa: toda la fila, el doble de alto que las opciones, en el estilo tranquilo de cristal */
.c-empresa{--alto:var(--celebra-alto,4.5rem);--disco:calc(var(--alto) - 1rem);--flecha:2.25rem;position:relative;display:flex;align-items:center;gap:.875rem;width:100%;min-height:var(--alto);padding-block:0;padding-inline:calc((var(--alto) - var(--disco)) / 2) calc((var(--alto) - var(--flecha)) / 2);border-radius:var(--radio-entero);background-color:rgb(255 255 255 / .58);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 10%,transparent),0 10px 26px -18px rgb(28 28 30 / .28);color:var(--color-tinta);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-corto) var(--ease-salida),box-shadow var(--dur-corto) var(--ease-salida),transform var(--dur-corto) var(--ease-salida)}
@media (hover:hover){.c-empresa:hover{background-color:#fff;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-chicle) 45%,transparent),0 16px 32px -18px rgb(28 28 30 / .3);transition-timing-function:var(--ease-curva)}.c-empresa:hover .c-empresa__flecha{translate:var(--via-roce) 0;background-color:var(--color-nube)}}
.c-empresa:active{transform:translateY(var(--via-roce)) scale(var(--esc-pulsa));transition-duration:var(--dur-toque);transition-timing-function:var(--ease-suave)}
.c-empresa:focus-visible{outline:2px solid var(--color-chicle);outline-offset:3px}
.c-empresa__disco{display:grid;place-items:center;flex:none;width:var(--disco);height:var(--disco);border-radius:var(--radio-entero);background-image:linear-gradient(150deg,var(--color-nube),var(--color-niebla));box-shadow:inset 0 0 0 1px rgb(255 255 255 / .7)}
.c-empresa__disco .c-doodle{width:53.6%;height:53.6%;opacity:.86}
.c-empresa__texto{display:grid;gap:.125rem;flex:1 1 auto;min-width:0}
.c-empresa__uno{font-size:var(--text-corto);font-weight:500;line-height:1.2;color:var(--color-tinta-suave)}
.c-empresa__dos{font-family:var(--font-display);font-size:var(--text-lead);font-weight:650;letter-spacing:-.016em;line-height:1.2;text-wrap:pretty}
.c-empresa__flecha{display:grid;place-items:center;flex:none;width:var(--flecha);height:var(--flecha);border-radius:var(--radio-entero);background-color:var(--color-nata);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 9%,transparent);transition:translate var(--dur-normal) var(--ease-curva),background-color var(--dur-corto) var(--ease-salida)}
.c-empresa__flecha svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.c-otra-rama{display:flex;justify-content:center;margin-top:calc(-1 * var(--spacing-dedo))}
.c-otra-rama .enlace-casa{text-align:center}
.c-opciones--organiza .c-celebra.pildora{--alto:4rem;font-size:var(--text-cuerpo)}
/* R7: seis pildoras iguales; una impar se queda de su tamaño (ya no se estira) */
.c-opciones--organiza{grid-auto-rows:1fr}

/* ─── P2 · La estrella (R1): el campo de «Tu nombre», de 1 a 6 estrellas y las baldosas de edad ───
   Con una, limpia: el campo, «Añadir otra estrella» tranquilo y las baldosas. Con varias, filas
   [campo] [ficha de edad] [quitar]; la activa con el foco chicle en su campo y en su ficha. */
.c-v--estrella{gap:var(--spacing-bloque)}
.c-grupo--estrellas{gap:var(--spacing-pieza)}
.c-estrellas{display:grid;gap:var(--spacing-dedo);margin:0;padding:0;list-style:none}
.c-estrella{--fila:3.25rem;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;column-gap:var(--spacing-dedo);min-width:0}
.c-estrellas--varias .c-estrella{grid-template-columns:minmax(0,1fr) auto auto}
.c-estrella__campo.c-campo{width:min(24rem,100%);min-height:var(--fila);padding-block:max(0px,calc((var(--fila) - 2.25rem) / 2))}
.c-estrellas--varias .c-estrella__campo.c-campo{width:100%}
.c-estrella--activa .c-estrella__campo.c-campo{box-shadow:inset 0 0 0 1.5px var(--color-chicle),0 0 0 4px color-mix(in oklab,var(--color-brillo) 24%,transparent),0 0 26px color-mix(in oklab,var(--color-brillo) 32%,transparent),0 10px 22px -14px rgb(28 28 30 / .3)}
/* La ficha de edad: «Edad» en el estilo tranquilo; «6 años» como objeto nitido; la activa, nube con canto chicle */
.c-estrella__edad{display:inline-grid;place-items:center;min-width:6.25rem;height:var(--fila);padding-inline:calc(var(--fila) / 2 - .25rem);border-radius:var(--radio-entero);background-color:transparent;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 14%,transparent);font-family:var(--font-sans);font-size:var(--text-corto);font-weight:500;line-height:1;color:var(--color-tinta-suave);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-corto) var(--ease-salida),box-shadow var(--dur-corto) var(--ease-salida),color var(--dur-corto) var(--ease-salida),transform var(--dur-corto) var(--ease-salida)}
.c-estrella__edad--puesta{background-color:#fff;color:var(--color-tinta);font-family:var(--font-display);font-size:var(--text-cuerpo);font-weight:650;letter-spacing:-.01em;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-brillo) 38%,transparent),0 1px 2px rgb(28 28 30 / .05),0 10px 22px -14px rgb(28 28 30 / .3)}
.c-estrella--activa .c-estrella__edad{background-color:var(--color-nube);color:var(--color-tinta);box-shadow:inset 0 0 0 1.5px var(--color-chicle),0 0 0 4px color-mix(in oklab,var(--color-brillo) 24%,transparent)}
@media (hover:hover){.c-estrella:not(.c-estrella--activa) .c-estrella__edad:hover{background-color:rgb(255 255 255 / .75);color:var(--color-tinta);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-chicle) 45%,transparent)}}
.c-estrella__edad:active{transform:translateY(var(--via-roce)) scale(var(--esc-pulsa));transition-duration:var(--dur-toque);transition-timing-function:var(--ease-suave)}
.c-estrella__quitar{position:relative;display:grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;border-radius:var(--radio-entero);color:var(--color-tinta-suave);transition:background-color var(--dur-corto) var(--ease-salida),color var(--dur-corto) var(--ease-salida)}
.c-estrella__quitar svg{width:1.125rem;height:1.125rem;stroke-width:2.2}
@media (hover:hover){.c-estrella__quitar:hover{background-color:rgb(255 255 255 / .75);color:var(--color-tinta)}}
.c-estrella__edad:focus-visible,.c-estrella__quitar:focus-visible{outline:2px solid var(--color-chicle);outline-offset:2px}
.c-estrella--sale{grid-template-columns:minmax(0,1fr) auto auto;animation:c-estrella-sale var(--dur-corto) var(--ease-salida) both;pointer-events:none}
@keyframes c-estrella-sale{to{opacity:0;scale:var(--esc-nace);translate:calc(-1 * var(--via-paso)) 0}}
/* «Añadir otra estrella»: pildora tranquila (filete fino, sin relleno) con su «+» en un disco nube;
   relleno lateral: disco a (alto − disco) / 2 del canto y texto a medio alto del otro */
.c-estrella-pie{display:flex;align-items:center;min-height:2.75rem}
.c-estrella-mas{--alto:2.75rem;--disco:2rem;display:inline-flex;align-items:center;gap:.625rem;min-height:var(--alto);padding-block:.25rem;padding-inline:calc((var(--alto) - var(--disco)) / 2) calc(var(--alto) / 2);border-radius:var(--radio-entero);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 12%,transparent);color:var(--color-tinta);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-corto) var(--ease-salida),box-shadow var(--dur-corto) var(--ease-salida),transform var(--dur-corto) var(--ease-salida)}
.c-estrella-mas__mas{display:grid;place-items:center;flex:none;width:var(--disco);height:var(--disco);border-radius:var(--radio-entero);background-color:var(--color-nube);color:var(--color-tinta);transition:background-color var(--dur-corto) var(--ease-salida),color var(--dur-corto) var(--ease-salida)}
.c-estrella-mas__mas svg{width:1rem;height:1rem;stroke-width:2.4}
.c-estrella-mas__textos{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:.5rem;min-width:0}
.c-estrella-mas__texto{font-size:var(--text-corto);font-weight:600;line-height:1.25}
.c-estrella-mas__apoyo{font-size:var(--text-micro);font-weight:500;line-height:1.25;color:var(--color-tinta-suave)}
@media (hover:hover){.c-estrella-mas:hover{background-color:rgb(255 255 255 / .6);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-chicle) 45%,transparent);transition-timing-function:var(--ease-curva)}.c-estrella-mas:hover .c-estrella-mas__mas{background-color:var(--color-chicle);color:#fff}}
.c-estrella-mas:active{transform:translateY(var(--via-roce)) scale(var(--esc-pulsa));transition-duration:var(--dur-toque);transition-timing-function:var(--ease-suave)}
.c-estrella-mas:focus-visible{outline:2px solid var(--color-chicle);outline-offset:3px}
.c-estrella-tope{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;font-size:var(--text-corto);font-weight:500;color:var(--color-tinta);text-wrap:pretty}
.c-estrella-tope .c-tranquilo__ico svg{width:.75rem;height:.75rem;stroke-width:2.4}
.c-edades{grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--spacing-dedo)}
.c-edades .numero{--lado:3.25rem;min-width:0}
.c-edades .numero--ancho{grid-column:span 2;font-size:var(--text-corto)}

/* ─── P3 · Qué incluimos: baldosas con su doodle ─── */
.c-v--incluye{gap:var(--spacing-caja)}
/* R9 · cuatro familias con el rotulo al margen, en dos lineas y a la izquierda (la «A» de la junta);
   en movil el rotulo sube encima y las baldosas pasan a fichas en fila, de dos en dos (la «B»).
   Cada familia tiene su color: shows oro · colores y chill rosa brillo · personajes cielo · extras menta. */
.c-incluye{display:grid;gap:var(--spacing-pieza)}
.c-incluye__linea{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}
.c-incluye__linea .c-cuenta{margin:0}
/* La salida de Cuca sube a la linea de arriba: es la alternativa a elegir, no una opcion mas */
.c-sorpresa{position:relative;display:inline-flex;align-items:center;gap:.5rem;height:2.125rem;padding:0 .875rem 0 .3125rem;border-radius:var(--radio-entero);background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--color-brillo),var(--color-chicle)) border-box;border:1.5px solid transparent;color:var(--color-tinta);font-size:var(--text-micro);font-weight:700;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow var(--dur-corto) var(--ease-salida),transform var(--dur-toque) var(--ease-salida)}
.c-sorpresa__disco{display:grid;place-items:center;flex:none;width:1.5rem;height:1.5rem;border-radius:var(--radio-entero);background-color:color-mix(in oklab,var(--color-chicle) 16%,white)}
.c-sorpresa__disco .c-doodle{width:62%;height:62%}
@media (hover:hover){.c-sorpresa:hover{box-shadow:0 8px 18px -12px color-mix(in oklab,var(--color-chicle) 70%,transparent)}}
.c-sorpresa:active{transform:scale(var(--esc-pulsa))}
.c-sorpresa:focus-visible{outline:2px solid var(--color-chicle);outline-offset:3px}
.c-sorpresa[aria-pressed="true"]{background:linear-gradient(135deg,var(--color-brillo),var(--color-chicle));color:#fff;text-shadow:var(--pildora-letra-sombra);box-shadow:var(--halo-elegido)}
.c-sorpresa[aria-pressed="true"] .c-sorpresa__disco{background-color:rgb(255 255 255 / .28)}
/* La familia */
.c-fam{display:grid;grid-template-columns:5.5rem minmax(0,1fr);align-items:start;column-gap:var(--spacing-pieza)}
.c-fam + .c-fam{margin-top:.4375rem;padding-top:.4375rem;border-top:1px solid color-mix(in oklab,var(--color-tinta) 7%,transparent)}
.c-fam__rotulo{margin:.375rem 0 0;font-size:var(--text-nano);font-weight:700;line-height:1.2;color:var(--color-tinta-suave);text-wrap:balance}
.c-fam__punto{display:inline-block;width:.4375rem;height:.4375rem;margin-right:.3125rem;border-radius:var(--radio-entero);background-color:var(--terr,var(--color-brillo));vertical-align:.04em}
.c-fam__lista{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4375rem}
.c-baldosa{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.3125rem;min-height:4.375rem;padding:.4375rem .25rem .375rem;border-radius:var(--radio-pieza);background-color:rgb(255 255 255 / .82);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 10%,transparent),0 6px 16px -12px rgb(28 28 30 / .2);color:var(--color-tinta);font-size:var(--text-micro);font-weight:500;line-height:1.15;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform var(--dur-corto) var(--ease-salida),box-shadow var(--dur-corto) var(--ease-salida),background-color var(--dur-corto) var(--ease-salida)}
.c-baldosa__disco{position:relative;display:grid;place-items:center;flex:none;width:2rem;height:2rem;border-radius:var(--radio-entero);background-color:color-mix(in oklab,var(--terr,var(--color-brillo)) 20%,white);color:var(--color-tinta);transition:background-color var(--dur-pausado) var(--ease-nivel),color var(--dur-pausado) var(--ease-nivel)}
.c-baldosa__disco .c-doodle{width:60%;height:60%;opacity:.85}
.c-baldosa__nombre{display:block;min-width:0;text-wrap:balance;hyphens:manual}
.c-baldosa__corto{display:none}
.c-baldosa__tick{position:absolute;top:.25rem;right:.25rem;display:grid;place-items:center;width:1.125rem;height:1.125rem;border-radius:var(--radio-entero);background-color:var(--color-chicle);box-shadow:0 0 0 2px #fff;opacity:0;scale:var(--esc-surge);transition:opacity var(--dur-toque) var(--ease-salida),scale var(--dur-corto) var(--ease-salida)}
.c-baldosa__tick svg{width:.6875rem;height:.6875rem;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset var(--dur-corto) var(--ease-salida)}
@media (hover:hover){.c-baldosa:hover{transform:translateY(calc(-1 * var(--via-roce)));background-color:#fff;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-chicle) 50%,transparent),0 10px 22px -12px rgb(28 28 30 / .24);transition-timing-function:var(--ease-curva)}}
.c-baldosa:active{transform:translateY(var(--via-roce)) scale(var(--esc-pulsa));transition-duration:var(--dur-toque)}
.c-baldosa:focus-visible{outline:2px solid var(--color-chicle);outline-offset:3px}
.c-baldosa[aria-pressed="true"]{background-color:var(--color-nube);font-weight:650;box-shadow:inset 0 0 0 2px var(--color-chicle),0 0 20px rgb(255 255 255 / .55),0 3px 12px color-mix(in oklab,var(--color-chicle) 30%,transparent)}
.c-baldosa[aria-pressed="true"] .c-baldosa__disco{background-color:var(--terr,var(--color-brillo));color:#fff}
.c-baldosa[aria-pressed="true"] .c-baldosa__disco .c-doodle{opacity:1}
.c-baldosa[aria-pressed="true"] .c-baldosa__tick{opacity:1;scale:1;transition:opacity var(--dur-toque) var(--ease-curva),scale var(--dur-normal) var(--ease-muelle)}
.c-baldosa[aria-pressed="true"] .c-baldosa__tick svg{stroke-dashoffset:0;transition:stroke-dashoffset var(--dur-normal) var(--ease-curva) var(--dur-toque)}
.con-aviso .c-baldosa:not([aria-pressed="true"]){box-shadow:inset 0 0 0 1.5px var(--color-ambar)}

/* ─── P3b · Personajes: un desplegable por grupo; lo elegido como fichas ─── */
.c-v--personajes{gap:var(--spacing-caja)}
.c-desps{display:grid;gap:var(--spacing-pieza)}
.c-desp{display:grid;gap:.375rem;padding:.4375rem;border-radius:var(--radio-tarjeta);background-color:rgb(255 255 255 / .72);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 8%,transparent),0 8px 20px -14px rgb(28 28 30 / .22);transition:box-shadow var(--dur-corto) var(--ease-salida),background-color var(--dur-corto) var(--ease-salida)}
.c-desp--abierto{background-color:#fff;box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--color-chicle) 50%,transparent),0 0 0 4px color-mix(in oklab,var(--color-brillo) 16%,transparent)}
.c-desp__cab{display:flex;align-items:center;gap:.875rem;width:100%;min-height:3.25rem;padding:.25rem .3125rem .25rem .25rem;border-radius:calc(var(--radio-tarjeta) - .4375rem);color:var(--color-tinta);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.c-desp__cab:focus-visible{outline:2px solid var(--color-chicle);outline-offset:2px}
.c-desp__disco{display:grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;border-radius:var(--radio-entero);background-color:var(--color-nube)}
.c-desp__disco .c-doodle{width:56%;height:56%;opacity:.86}
.c-desp__textos{display:grid;gap:1px;flex:1 1 auto;min-width:0}
.c-desp__nombre{font-family:var(--font-display);font-size:var(--text-lead);font-weight:650;letter-spacing:-.014em;line-height:1.15}
.c-desp__resumen{font-size:var(--text-nano);font-weight:500;color:var(--color-tinta-suave)}
.c-desp__abre{display:inline-flex;align-items:center;gap:.25rem;flex:none;min-height:2.75rem;padding-inline:1.125rem .875rem;border-radius:var(--radio-entero);background-color:var(--color-nata);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 11%,transparent);font-size:var(--text-micro);font-weight:650;transition:background-color var(--dur-corto) var(--ease-salida),box-shadow var(--dur-corto) var(--ease-salida)}
.c-desp__abre svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:rotate var(--dur-normal) var(--ease-curva)}
@media (hover:hover){.c-desp__cab:hover .c-desp__abre{background-color:#fff;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-chicle) 45%,transparent)}}
.c-desp--abierto .c-desp__abre svg{rotate:180deg}
.c-desp__fichas{display:flex;flex-wrap:wrap;gap:.375rem;margin:0;padding:0 .5rem .375rem 3.875rem;list-style:none}
.c-ficha{position:relative;display:inline-flex;align-items:center;gap:.375rem;min-height:2.25rem;padding-inline:.875rem .375rem;border-radius:var(--radio-entero);background-color:var(--color-nube);box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--color-chicle) 42%,transparent);color:var(--color-tinta);font-size:var(--text-micro);font-weight:600;cursor:pointer;transition:background-color var(--dur-corto) var(--ease-salida)}
.c-ficha::after{content:'';position:absolute;inset:-.25rem 0}
.c-ficha__x{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:var(--radio-entero);background-color:#fff;color:var(--color-tinta-suave)}
.c-ficha__x svg{width:.75rem;height:.75rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
@media (hover:hover){.c-ficha:hover{background-color:#fff}.c-ficha:hover .c-ficha__x{background-color:var(--color-nube);color:var(--color-tinta)}}
.c-ficha:focus-visible{outline:2px solid var(--color-chicle);outline-offset:2px}
/* La capa: cristal de Desplegable.vue (.72 de blanco y 24 px), con su muesca hacia el disparador */
.c-desp-capa{position:fixed;z-index:70;display:flex;flex-direction:column;min-height:0;padding:var(--spacing-caja);border-radius:var(--radio-pieza);background-color:rgb(255 255 255 / .72);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .8),var(--sombra);color:var(--color-tinta);opacity:0;scale:var(--esc-nace);translate:0 calc(-1 * var(--via-paso));transform-origin:var(--muesca-x,2rem) 0;transition:opacity var(--dur-corto) var(--ease-marcha),scale var(--dur-corto) var(--ease-marcha),translate var(--dur-corto) var(--ease-marcha)}
.c-desp-capa--arriba{translate:0 var(--via-paso);transform-origin:var(--muesca-x,2rem) 100%}
.c-desp-capa--puesta{opacity:1;scale:1;translate:0 0;transition:opacity var(--dur-normal) var(--ease-curva),scale var(--dur-normal) var(--ease-curva),translate var(--dur-normal) var(--ease-curva)}
.c-desp-capa__muesca{position:absolute;top:-.34rem;left:var(--muesca-x,2rem);width:.85rem;height:.85rem;translate:-50% 0;rotate:45deg;border-radius:.14rem;background-color:rgb(255 255 255 / .72)}
.c-desp-capa--arriba .c-desp-capa__muesca{top:auto;bottom:-.34rem}
.c-desp-capa__cab{display:grid;gap:.625rem;flex:none}
.c-desp-capa__titulo{font-size:var(--text-nano);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-tinta-suave)}
.c-desp-capa__busca{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;padding-inline:.875rem 1rem;border-radius:var(--radio-entero);background-color:#fff;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 10%,transparent);cursor:text;transition:box-shadow var(--dur-corto) var(--ease-salida)}
.c-desp-capa__busca:focus-within{box-shadow:inset 0 0 0 1.5px var(--color-chicle),var(--foco-anillo)}
.c-desp-capa__lupa svg{display:block;width:1rem;height:1rem;fill:none;stroke:var(--color-tinta-suave);stroke-width:2.2;stroke-linecap:round}
.c-desp-capa__buscar{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;font:500 1rem/1.2 var(--font-sans);color:var(--color-tinta);caret-color:var(--color-chicle)}
.c-desp-capa__buscar::placeholder{color:color-mix(in oklab,var(--color-tinta-suave) 60%,transparent)}
.c-desp-capa__buscar::-webkit-search-cancel-button{display:none}
.c-desp-capa .c-pestanas{justify-self:start}
.c-desp-capa__cuerpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-inline:-.25rem;padding:.75rem .25rem .5rem;scrollbar-width:thin}
.c-desp-capa__lista{display:flex;flex-wrap:wrap;gap:.4375rem}
.c-desp-capa__lista .chip{--alto:2.5rem;font-size:var(--text-micro)}
.c-desp-capa__pie{display:flex;justify-content:flex-end;flex:none;padding-top:.75rem;border-top:1px solid color-mix(in oklab,var(--color-tinta) 7%,transparent)}
.c-desp-capa--hoja{inset:auto 0 0 0;max-height:min(82dvh,40rem);padding:0 var(--radio-tarjeta) calc(var(--spacing-caja) + env(safe-area-inset-bottom));border-radius:var(--radio-tarjeta) var(--radio-tarjeta) 0 0;scale:1;translate:0 100%;transform-origin:50% 100%}
.c-desp-capa--hoja.c-desp-capa--puesta{translate:0 0}
.c-desp-capa__asa{align-self:center;flex:none;width:2.5rem;height:.3125rem;margin:.625rem 0 .75rem;border-radius:var(--radio-entero);background-color:color-mix(in oklab,var(--color-tinta) 20%,transparent)}
.c-desp-capa--hoja .c-desp-capa__listo{flex:1 1 auto}
/* En la hoja del movil cada personaje es un objetivo de dedo: 44 px (en escritorio, con raton, 40) */
.c-desp-capa--hoja .c-desp-capa__lista .chip{--alto:2.75rem}
/* LAS HOJAS RESPIRAN EN VERTICAL (WEB-002, 12-10-2026). Solo el eje vertical y solo en la hoja del móvil: el hueco
 * entre columnas y la capa de escritorio se quedan como estaban. Título → buscador y fila → fila, una `caja`;
 * cabecera → primera fila, un `bloque`; del botón al canto, un `grupo` más la zona segura. La de prefijos no cambia
 * de alto ni de relleno (lo gobierna el teclado, ver `ajustaAlto`): su aire del final va DENTRO del carril, y entre
 * sus 250 filas —que ya son de 44 con disco de 32— basta un `hilo` para que no obligue a rodar el doble. */
.c-desp-capa--hoja .c-desp-capa__cab{gap:var(--spacing-caja)}
.c-desp-capa--hoja .c-desp-capa__cuerpo{padding-top:var(--spacing-bloque);padding-bottom:var(--spacing-caja)}
.c-desp-capa--hoja .c-desp-capa__lista{row-gap:var(--spacing-caja)}
.c-desp-capa--hoja .c-desp-capa__pie{padding-top:var(--spacing-caja)}
.c-desp-capa--hoja:not(.c-desp-capa--prefijos){padding-bottom:calc(var(--spacing-grupo) + env(safe-area-inset-bottom))}
.c-desp-capa--hoja.c-desp-capa--prefijos .c-desp-capa__cuerpo{padding-bottom:var(--spacing-bloque)}
.c-desp-capa--hoja .c-prefs{gap:var(--spacing-hilo)}
.c-desp-velo{position:fixed;inset:0;z-index:69;background-color:rgb(28 28 30 / .16);opacity:0;pointer-events:none;transition:opacity var(--dur-normal) var(--ease-curva)}
.c-desp-velo--puesto{opacity:1;pointer-events:auto}
.c-pestanas{display:flex;flex-wrap:wrap;gap:.25rem;padding:.25rem;border-radius:var(--radio-entero);background-color:rgb(255 255 255 / .6);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 7%,transparent);width:fit-content;max-width:100%}
.c-pestana{min-height:2.25rem;padding-inline:1rem;border-radius:var(--radio-entero);font-size:var(--text-micro);font-weight:600;color:var(--color-tinta-suave);transition:background-color var(--dur-corto) var(--ease-salida),color var(--dur-corto) var(--ease-salida)}
.c-pestana[aria-selected="true"]{background-color:#fff;color:var(--color-tinta);box-shadow:0 4px 12px -8px rgb(28 28 30 / .3)}

/* ─── P5 / E1 · El día: el calendario de la casa, el escape tranquilo y la franja ─── */
.c-v--fecha{gap:var(--spacing-caja)}
.c-grupo--dias{gap:var(--spacing-pieza)}
.c-cal-hueco{min-width:0}
.c-fecha-escape{display:flex;justify-content:center}
.c-opciones--franja{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--spacing-dedo)}
.c-opciones--franja .pildora{--alto:3.5rem;flex-direction:column;gap:0;padding-inline:.5rem;font-size:var(--text-corto);line-height:1.15}
.c-grupo--franja{padding:var(--spacing-caja) var(--radio-tarjeta);margin-inline:calc(-1 * var(--radio-tarjeta) + .25rem);border-radius:var(--radio-tarjeta);background-color:rgb(255 255 255 / .55);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .7)}
/* Escritorio: el escape comparte fila con la leyenda y la franja va sin caja, para que el dia y la hora quepan sin rodar */
@media (width >= 64rem){
  .c-grupo--dias{position:relative}
  .c-v--fecha .cal{--cal-fila:2.625rem}
  .c-v--fecha .cal__leyenda{justify-content:flex-start;min-height:2.75rem}
  .c-fecha-escape{position:absolute;right:0;bottom:0}
  .c-grupo--franja{gap:var(--spacing-dedo);padding:0;margin:0;background:none;box-shadow:none}
  .c-opciones--franja .pildora{--alto:3.25rem}
}

/* ─── P6 / E2 · El sitio: el codigo al quinto digito y la ficha del municipio ─── */
.c-cp-bloque{display:grid;justify-items:start;gap:var(--spacing-dedo)}
.c-cp-fila{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--spacing-pieza);max-width:100%}
.c-cp,.c-muni{grid-template-columns:auto minmax(0,1fr);column-gap:var(--spacing-pieza);padding:.625rem 2rem .625rem .625rem;border-radius:var(--radio-entero)}
.c-cp__disco,.c-campo__disco,.c-tel__disco{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:var(--radio-entero);background-image:var(--pildora-relleno);box-shadow:var(--pildora-canto);color:#fff}
.c-cp__disco .c-doodle{width:56%;height:56%}
.c-cp__disco svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.c-cp__entrada{width:5.5ch;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.c-muni__entrada{width:12ch;font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem)}
.c-muni__entrada::-webkit-search-cancel-button{display:none}
.c-cp-lado{display:flex;align-items:center;flex:0 1 auto;min-width:0}
.c-sitio{--sitio-alto:2.5rem;--sitio-disco:2rem;display:inline-flex;align-items:center;gap:.5rem;max-width:100%;min-height:var(--sitio-alto);padding:calc((var(--sitio-alto) - var(--sitio-disco)) / 2) calc(var(--sitio-alto) / 2) calc((var(--sitio-alto) - var(--sitio-disco)) / 2) calc((var(--sitio-alto) - var(--sitio-disco)) / 2);border-radius:var(--radio-entero);background-color:#fff;box-shadow:0 0 0 2px #fff,0 0 0 3px color-mix(in oklab,var(--color-tinta) 7%,transparent),0 8px 16px -9px rgb(28 28 30 / .3);color:var(--color-tinta)}
.c-sitio__disco{display:grid;place-items:center;flex:none;width:var(--sitio-disco);height:var(--sitio-disco);border-radius:var(--radio-entero);background-color:var(--terr-agua);color:#fff;rotate:-8deg}
.c-sitio__disco .c-doodle{width:62%;height:62%}
.c-sitio__textos{display:grid;gap:1px;min-width:0}
.c-sitio__textos b{font-family:var(--font-display);font-size:var(--text-corto);font-weight:650;letter-spacing:-.01em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-sitio__textos small{font-size:.6875rem;font-weight:500;color:var(--color-tinta-suave);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-sitio--busca .c-sitio__disco{animation:c-busca calc(var(--dur-escena) * 1.5) var(--ease-nivel) infinite}
@keyframes c-busca{0%,100%{translate:0 0;rotate:-8deg}50%{translate:0 -3px;rotate:4deg}}
.c-sitio__puntos{display:inline-flex;gap:3px;padding-top:3px}
.c-sitio__puntos i{width:4px;height:4px;border-radius:var(--radio-entero);background:currentColor;animation:puntos-late 900ms var(--ease-nivel) calc(var(--i,0) * 150ms) infinite both}
.c-sitio__puntos i:nth-child(2){--i:1}.c-sitio__puntos i:nth-child(3){--i:2}
.c-muni-bloque{display:flex;flex-direction:column;gap:var(--spacing-pieza)}
/* P-19 a: la lista tiene su sitio guardado (tres filas de píldoras) y crece hacia abajo; mientras
   se escribe, nada encima de ella se mueve */
.c-muni__res{display:flex;flex-wrap:wrap;align-content:flex-start;gap:var(--spacing-dedo)}
/* PRE-008 (19-10-2026): la reserva, solo mientras se escribe (dos letras o más, la pone _c.js). Vacía
   dejaba 121 px en blanco bajo la nota y la pregunta siguiente se iba bajo el pie */
.c-muni__res--viva{min-height:calc(3 * 2.75rem + 2 * var(--spacing-dedo))}
/* «Usar mi ubicación» es una píldora de municipio más; mientras busca, su dibujo late como el disco
   del sitio (el mismo gesto, no uno nuevo) */
.c-muni__ubicacion[aria-busy="true"]{cursor:progress}
.c-muni__ubicacion[aria-busy="true"] .c-muni__dib{animation:c-busca calc(var(--dur-escena) * 1.5) var(--ease-nivel) infinite}
.c-muni__op.pildora{gap:.5rem;padding-inline-start:.625rem}
.c-muni__dib{display:block;width:1rem;height:1rem;color:var(--terr-agua)}
.pildora[aria-pressed="true"] .c-muni__dib{color:#fff}
.c-opciones--espacio{grid-template-columns:repeat(3,minmax(0,1fr))}
.c-opciones--espacio .pildora{--alto:3.5rem;font-size:var(--text-corto)}
.c-opciones--planb{grid-template-columns:minmax(0,1fr) auto;column-gap:var(--spacing-bloque)}
.c-opciones--planb .pildora{--alto:3.5rem}
.c-grupo--planb{padding:var(--spacing-caja) var(--radio-tarjeta);margin-inline:calc(-1 * var(--radio-tarjeta));border-radius:var(--radio-tarjeta);background-color:rgb(255 255 255 / .55);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .7)}

/* ─── E4 · Cuéntanos: la nota de voz o por escrito ─── */
.c-v--cuentanos{gap:var(--spacing-caja)}
/* R8: todo el bloque de «cuéntanos» en el mismo eje que la nota de voz */
.c-v--cuentanos .c-grupo--escape{align-items:center}
.c-v--cuentanos .c-opciones--llamada{justify-content:center}
.c-v--cuentanos .c-voz-apuntada{justify-content:center;text-align:center}
.c-voz-hueco{min-width:0;border-radius:var(--radio-tarjeta)}
/* final3: el aviso ambar de la casa es un outline; aqui abraza la nota con esquina blanda en vez de un rectangulo */
.c-voz-hueco.con-aviso{outline:1.5px solid var(--color-ambar);outline-offset:.375rem;box-shadow:0 0 0 .375rem color-mix(in oklab,var(--color-ambar) 8%,transparent)}
.c-voz-apuntada{display:flex;align-items:center;gap:.5rem;font-size:var(--text-corto);font-weight:500}
.c-opciones--llamada .pildora{gap:.625rem;padding-inline-start:.5rem}
.c-opciones--llamada .c-op__disco{--disco:2rem}

/* ─── P8 / E5 · Para ti: el telefono y los campos ─── */
.c-v--contacto{gap:var(--spacing-bloque)}
.c-grupo--tel{gap:var(--spacing-dedo)}
/* Pantallita: alto 72 (disco 52 a 10 del canto). El tick de 28 a 22 del canto derecho (radios concentricos). */
.c-tel{--tel-disco:3.25rem;--tel-tick:1.75rem;grid-template-columns:auto minmax(0,1fr) auto;column-gap:var(--spacing-pieza);width:fit-content;max-width:100%;padding:.625rem calc((var(--tel-disco) + 1.25rem - var(--tel-tick)) / 2) .625rem .625rem;border-radius:var(--radio-entero)}
.c-tel__disco{width:var(--tel-disco);height:var(--tel-disco)}
.c-tel__disco .c-doodle{width:48%;height:48%}
.c-campo__disco .c-doodle{width:52%;height:52%}
.c-tel__numero{display:flex;align-items:center;gap:.625rem;min-width:0}
/* R2 · el prefijo es un boton con flecha pequeña (antes una ficha fija). 44 px de toque por su ::after */
.c-tel__prefijo{position:relative;display:inline-flex;align-items:center;gap:.1875rem;flex:none;height:2rem;padding-inline:.75rem .5rem;border-radius:var(--radio-entero);background-color:var(--color-crema);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 10%,transparent);font-family:var(--font-sans);font-size:var(--text-corto);font-weight:650;letter-spacing:.01em;line-height:1;color:var(--color-tinta);font-variant-numeric:tabular-nums;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-corto) var(--ease-salida),box-shadow var(--dur-corto) var(--ease-salida)}
.c-tel__prefijo::after{content:'';position:absolute;inset:-.375rem -.25rem}
.c-tel__prefijo-flecha{display:grid;place-items:center;width:.875rem;height:.875rem;color:var(--color-tinta-suave)}
.c-tel__prefijo-flecha svg{width:100%;height:100%;stroke-width:2.6;transition:rotate var(--dur-normal) var(--ease-curva)}
@media (hover:hover){.c-tel__prefijo:hover{background-color:var(--color-nube);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-chicle) 45%,transparent)}}
.c-tel__prefijo:focus-visible{outline:2px solid var(--color-chicle);outline-offset:2px}
.c-tel__prefijo--abierto{background-color:var(--color-nube);box-shadow:inset 0 0 0 1.5px var(--color-chicle)}
.c-tel__prefijo--abierto .c-tel__prefijo-flecha svg{rotate:180deg}
/* La lista de prefijos: la capa de cristal del desplegable (escritorio) o su hoja (movil).
   Cada pais: disco con su ISO (sin emojis), nombre, prefijo y el tick del elegido */
.c-desp-capa--prefijos:focus{outline:none}
.c-desp-capa--prefijos .c-desp-capa__cuerpo{padding-top:.375rem}
.c-desp-capa--hoja.c-desp-capa--prefijos{height:min(78dvh,40rem)}
.c-prefs{display:grid;gap:1px}
.c-prefs__rotulo{padding:.75rem .5rem .375rem;font-size:var(--text-nano);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-tinta-suave)}
.c-prefs__rotulo:first-child{padding-top:.25rem}
.c-prefs__vacio{padding:.75rem .5rem}
.c-pref{--alto:2.75rem;--disco:2rem;display:grid;grid-template-columns:auto minmax(0,1fr) auto 1.25rem;align-items:center;column-gap:.625rem;width:100%;min-height:var(--alto);padding-block:.1875rem;padding-inline:calc((var(--alto) - var(--disco)) / 2) .75rem;border-radius:var(--radio-entero);color:var(--color-tinta);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-corto) var(--ease-salida),box-shadow var(--dur-corto) var(--ease-salida)}
.c-pref__iso{display:grid;place-items:center;width:var(--disco);height:var(--disco);border-radius:var(--radio-entero);background-color:var(--color-nube);font-family:var(--font-sans);font-size:.625rem;font-weight:750;letter-spacing:.04em;line-height:1;color:var(--color-tinta)}
.c-pref__nombre{min-width:0;overflow:hidden;font-size:var(--text-corto);font-weight:550;white-space:nowrap;text-overflow:ellipsis}
.c-pref__num{font-size:var(--text-corto);font-weight:600;color:var(--color-tinta-suave);font-variant-numeric:tabular-nums}
.c-pref__tick{display:grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:var(--radio-entero);background-color:var(--color-chicle);box-shadow:0 0 0 2px #fff;opacity:0;scale:var(--esc-surge);transition:opacity var(--dur-toque) var(--ease-salida),scale var(--dur-corto) var(--ease-salida)}
.c-pref__tick svg{width:.75rem;height:.75rem;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.c-pref:hover{background-color:rgb(255 255 255 / .8)}}
.c-pref:focus-visible{outline:2px solid var(--color-chicle);outline-offset:-2px}
.c-pref[aria-pressed="true"]{background-color:#fff;box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--color-chicle) 55%,transparent)}
.c-pref[aria-pressed="true"] .c-pref__iso{background-image:linear-gradient(135deg,var(--color-brillo),var(--color-chicle));color:#fff}
.c-pref[aria-pressed="true"] .c-pref__num{color:var(--color-tinta)}
.c-pref[aria-pressed="true"] .c-pref__tick{opacity:1;scale:1}
.c-tel__tick{position:relative;display:grid;place-items:center;width:var(--tel-tick);height:var(--tel-tick);border-radius:var(--radio-entero);background-color:var(--color-chicle);box-shadow:0 0 0 2px #fff,0 2px 8px color-mix(in oklab,var(--color-chicle) 45%,transparent);opacity:0;scale:var(--esc-surge);transition:opacity var(--dur-toque) var(--ease-salida),scale var(--dur-corto) var(--ease-salida)}
.c-tel__tick svg{width:1rem;height:1rem;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset var(--dur-corto) var(--ease-salida)}
.c-tel.campo-objeto--lista .c-tel__tick{opacity:1;scale:1;transition:opacity var(--dur-toque) var(--ease-curva),scale var(--dur-normal) var(--ease-muelle)}
.c-tel.campo-objeto--lista .c-tel__tick svg{stroke-dashoffset:0;transition:stroke-dashoffset var(--dur-normal) var(--ease-curva) var(--dur-toque)}
/* CAMPOS NITIDOS · objetos, nunca apagados */
.c-tel,.c-campo,.c-cp,.c-muni{background-color:#fff;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-brillo) 38%,transparent),0 1px 2px rgb(28 28 30 / .05),0 10px 22px -14px rgb(28 28 30 / .3)}
.c-tel.campo-objeto--lista,.c-campo.campo-objeto--lista,.c-cp.campo-objeto--lista,.c-muni.campo-objeto--lista{background-color:#fff}
.c-tel:focus-within,.c-campo:focus-within,.c-cp:focus-within,.c-muni:focus-within,.c-tel.es-foco,.c-campo.es-foco,.c-cp.es-foco,.c-muni.es-foco{background-color:#fff;box-shadow:inset 0 0 0 1.5px var(--color-chicle),0 0 0 4px color-mix(in oklab,var(--color-brillo) 24%,transparent),0 0 26px color-mix(in oklab,var(--color-brillo) 32%,transparent),0 10px 22px -14px rgb(28 28 30 / .3)}
:is(.c-tel,.c-campo,.c-cp,.c-muni):is(.con-aviso,[aria-invalid="true"]){box-shadow:inset 0 0 0 1.5px var(--color-ambar),var(--aviso-anillo),0 10px 22px -14px rgb(28 28 30 / .3)}
:is(.c-tel,.c-campo,.c-cp,.c-muni) .campo-objeto__entrada::placeholder{color:color-mix(in oklab,var(--color-tinta-suave) 42%,transparent);opacity:1}
.c-tel .campo-objeto__entrada{width:calc(var(--tel-cifras,11.5) * 1ch);font-variant-numeric:tabular-nums;letter-spacing:.005em}
.c-tranquilo,.c-llamada{display:flex;align-items:center;gap:.5rem;font-size:var(--text-corto);font-weight:500;color:var(--color-tinta);padding-inline-start:1.25rem}
.c-tranquilo__corto{display:none}
.c-tranquilo__ico{display:grid;place-items:center;width:1.375rem;height:1.375rem;flex:none;border-radius:var(--radio-entero);background-color:var(--color-nube);color:var(--color-chicle)}
.c-tranquilo__ico svg{width:.8125rem;height:.8125rem;stroke-width:2.6}
.c-campo{grid-template-columns:auto minmax(0,1fr);column-gap:var(--spacing-pieza);width:min(24rem,100%);padding:.5rem 1.625rem .5rem .5rem;border-radius:var(--radio-entero)}
.c-campo:not(:has(.c-campo__disco)){grid-template-columns:minmax(0,1fr);padding-inline:1.625rem}
.c-campo .campo-objeto__entrada{font-size:clamp(1.25rem,1.05rem + .7vw,1.625rem);font-weight:650;min-height:2.25rem}
.c-campo--email{width:min(28rem,100%);padding-inline-start:.5rem}
.c-campo--email .c-campo__disco{width:2.25rem;height:2.25rem}
/* P-20 / P-21 (05-10-2026): en los formularios finales, todos los discos como el del correo y el
   rótulo de fuera arranca donde arranca el texto de dentro (relleno .5rem + disco 2.25rem + hueco):
   etiquetas y textos en una sola vertical */
.c-v--contacto .c-campo__disco{width:2.25rem;height:2.25rem}
.c-v--contacto .c-campo{padding-inline-start:.5rem}
.c-v--contacto .c-tel{--tel-disco:2.25rem;padding-inline-start:.5rem}
.c-v--contacto .c-rotulo{padding-inline-start:calc(.5rem + 2.25rem + var(--spacing-pieza))}
/* Lo que acompaña a los campos fuera de ellos (la línea tranquila del WhatsApp, la de «te llama Cuca»
   y el enlace del correo), en la misma vertical que los rótulos y el texto de los campos. Lo legal,
   como en empresa, al canto. */
.c-v--contacto :is(.c-tranquilo,.c-llamada){padding-inline-start:calc(.5rem + 2.25rem + var(--spacing-pieza))}
.c-v--contacto .c-enlace--correo{padding-inline-start:calc(.5rem + 2.25rem + var(--spacing-pieza))}
/* El scaleX(.97) de la letra encoge hacia el centro y la palabra arrancaba 4 px por dentro de la vertical */
.c-enlace--correo .enlace-casa__cap{transform-origin:left center}
.c-grupo--nombre{gap:var(--spacing-dedo)}
.c-grupo--correo{gap:var(--spacing-dedo);align-items:flex-start}
.c-legal{display:flex;flex-wrap:wrap;align-items:center;column-gap:.25rem;font-size:var(--text-micro);color:var(--color-tinta-suave);line-height:1.45}
.c-legal .enlace-casa{min-height:2.75rem;font-size:var(--text-micro)}
.c-v--contacto-pro .c-grupo{gap:var(--spacing-dedo)}
.c-v--contacto-pro{gap:var(--spacing-caja)}
@container (width >= 36rem){.c-v--contacto-pro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--spacing-bloque)}.c-v--contacto-pro .c-grupo--email,.c-v--contacto-pro .c-grupo--tel,.c-v--contacto-pro .c-legal{grid-column:1 / -1}.c-v--contacto-pro .c-campo--nombre{width:100%}}
.c-grupo--tel-pro .c-tel{--tel-disco:2.25rem;--tel-tick:1.5rem}
.c-grupo--tel-pro .c-tel__tick svg{width:.875rem;height:.875rem}
.c-grupo--tel-pro .c-tel .campo-objeto__entrada{font-size:clamp(1.25rem,1.05rem + .7vw,1.625rem)}

/* ─── Hecho ─── */
.c-v--hecho{gap:var(--spacing-bloque)}
.c-cuenta-atras{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:var(--spacing-bloque);row-gap:var(--spacing-dedo)}
.c-cuenta-atras__ante{grid-column:1;font-size:var(--text-micro);font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--color-tinta-suave)}
.c-cuenta-atras__cifra{grid-column:1;grid-row:2;display:flex;align-items:baseline;gap:.25rem;font-family:var(--font-display);line-height:.9;color:var(--color-tinta)}
.c-cuenta-atras__cifra b{font-size:clamp(3rem,2rem + 3vw,4.5rem);font-weight:800;letter-spacing:-.05em;background-image:linear-gradient(100deg,var(--color-chicle),var(--color-brillo) 60%,var(--color-chicle));-webkit-background-clip:text;background-clip:text;color:transparent;padding-inline-end:.05em}
.c-cuenta-atras__cifra span{font-size:var(--text-rotulo);font-weight:650;letter-spacing:-.02em}
.c-cuenta-atras__cifra--texto{font-size:var(--text-rotulo);font-weight:700}
.c-escena-texto{grid-column:2;grid-row:1 / span 2;align-self:center;font-family:var(--font-display);font-size:var(--text-lead);font-weight:500;letter-spacing:-.012em;line-height:1.35;text-wrap:pretty;padding-inline-start:var(--spacing-bloque);border-left:1px solid color-mix(in oklab,var(--color-tinta) 10%,transparent)}
.c-post{display:flex;flex-direction:column;gap:var(--spacing-pieza);padding:var(--spacing-caja) var(--radio-tarjeta) var(--spacing-bloque);border-radius:var(--radio-tarjeta);background-color:rgb(255 255 255 / .6);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .8),0 12px 28px -20px rgb(28 28 30 / .25)}
.c-post__cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-caja);font-size:var(--text-nano);color:var(--color-tinta-suave)}
.c-post__cab .versalita{--versalita-cuerpo:1em;--versalita-peso:650;--versalita-track:.12em;color:var(--color-tinta)}
.c-post__cuenta{font-weight:500}
.c-post__pregunta{display:flex;flex-direction:column;gap:var(--spacing-pieza)}
.c-post__titulo{font-family:var(--font-display);font-size:var(--text-lead);font-weight:650;letter-spacing:-.015em}
.c-opciones--post{display:flex;flex-wrap:wrap;gap:var(--spacing-dedo)}
/* R3: sin boton. Una linea tranquila dice que se guarda solo y un hilo fino cuenta la espera corta */
.c-post__solo{position:relative;display:flex;align-items:center;gap:.5rem;min-height:1.5rem;padding-bottom:.375rem;font-size:var(--text-micro);font-weight:500;color:var(--color-tinta-suave)}
.c-post__solo .c-tranquilo__ico{width:1.125rem;height:1.125rem}
.c-post__solo .c-tranquilo__ico svg{width:.6875rem;height:.6875rem}
.c-post__hilo{position:absolute;left:0;bottom:0;width:min(12rem,100%);height:2px;border-radius:2px;background-color:color-mix(in oklab,var(--color-tinta) 7%,transparent);overflow:hidden;opacity:0;transition:opacity var(--dur-corto) var(--ease-salida)}
.c-post__hilo i{position:absolute;inset:0;border-radius:inherit;background-image:linear-gradient(90deg,var(--color-brillo),var(--color-chicle));transform:scaleX(0);transform-origin:0 50%}
.c-post__solo--cuenta .c-post__hilo{opacity:1;transition:opacity var(--dur-toque) var(--ease-curva)}
.c-post__gracias{display:flex;align-items:center;gap:.625rem;font-family:var(--font-display);font-size:var(--text-lead);font-weight:500;letter-spacing:-.01em;line-height:1.3;text-wrap:pretty}
.c-post__gracias b{font-weight:700}
.c-post__ok{position:relative;flex:none}
.c-campo--nota{width:100%}
.c-campo--nota .campo-objeto__entrada{font-family:var(--font-sans);font-size:1rem;font-weight:500}
.c-apuntado{position:fixed;z-index:97;translate:-50% -120%;padding:.375rem .875rem;border-radius:var(--radio-entero);background-image:linear-gradient(135deg,var(--color-brillo),var(--color-chicle));color:#fff;text-shadow:var(--pildora-letra-sombra);font-size:var(--text-micro);font-weight:700;pointer-events:none;box-shadow:var(--halo-elegido);animation:c-apuntado var(--dur-vaciado) var(--ease-curva) both}
@keyframes c-apuntado{0%{opacity:0;translate:-50% -60%;scale:var(--esc-brota)}25%{opacity:1;translate:-50% -130%;scale:1}75%{opacity:1}100%{opacity:0;translate:-50% -170%}}

/* ═══════════════════════ 07 · CAJON DE ANDAMIO ═══════════════════════ */
.c-andamio{position:fixed;left:.75rem;bottom:.75rem;z-index:60;width:min(28rem,calc(100vw - 1.5rem));max-height:min(84dvh,46rem);display:flex;flex-direction:column;border-radius:var(--radio-tarjeta);background-color:rgb(255 255 255 / .9);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .8),0 20px 50px -20px rgb(28 28 30 / .35);font-size:var(--text-micro);color:var(--color-tinta)}
.c-andamio__asa{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 1.25rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:var(--text-nano)}
.c-andamio__punto{width:.5rem;height:.5rem;border-radius:var(--radio-entero);background-color:var(--color-ambar)}
.c-andamio__pestanas{display:flex;gap:.25rem;margin:0 1rem .5rem;padding:.25rem;border-radius:var(--radio-entero);background-color:var(--color-nata);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 7%,transparent)}
.c-andamio__pestana{flex:1 1 auto;min-height:2.25rem;padding-inline:.75rem;border-radius:var(--radio-entero);font-size:var(--text-nano);font-weight:650;color:var(--color-tinta-suave)}
.c-andamio__pestana[aria-selected="true"]{background-color:#fff;color:var(--color-tinta);box-shadow:0 4px 12px -8px rgb(28 28 30 / .3)}
.c-andamio__dentro{display:flex;flex-direction:column;gap:.5rem;padding:0 1.25rem 1.125rem;overflow-y:auto;overscroll-behavior:contain}
.c-andamio--plegado{width:auto}
.c-andamio--plegado .c-andamio__dentro,.c-andamio--plegado .c-andamio__pestanas{display:none}
.c-andamio__cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.c-andamio__cifras p{display:grid;padding:.5rem .75rem;border-radius:var(--radio-control);background-color:var(--color-nata)}
.c-andamio__cifras b{font-family:var(--font-display);font-size:1.375rem;font-weight:750;line-height:1.1}
.c-andamio__cifras small{font-size:var(--text-nano);color:var(--color-tinta-suave)}
.c-andamio__niveles{position:relative;display:grid;grid-template-columns:41fr 29fr 30fr;gap:3px;height:.5rem}
.c-andamio__niveles i{display:block;border-radius:var(--radio-entero);background-color:var(--color-niebla)}
.c-andamio__niveles i:nth-child(2){background-color:color-mix(in oklab,var(--color-brillo) 55%,white)}
.c-andamio__niveles i:nth-child(3){background-color:var(--color-chicle)}
.c-andamio__niveles span{position:absolute;top:-.25rem;left:calc(var(--p) * 1%);width:.25rem;height:1rem;border-radius:2px;background-color:var(--color-tinta);translate:-50% 0}
.c-andamio__nota{color:var(--color-tinta-suave);line-height:1.4}
.c-andamio__nota b{color:var(--color-tinta)}
.c-andamio__resumen{padding:.5rem .75rem;border-radius:var(--radio-control);background-color:var(--color-nata);font-weight:600;line-height:1.4}
.c-andamio__tabla{width:100%;border-collapse:collapse;font-size:var(--text-nano)}
.c-andamio__tabla th{padding:.25rem;text-align:left;font-weight:650;color:var(--color-tinta-suave);text-transform:uppercase;letter-spacing:.06em;font-size:.625rem}
.c-andamio__tabla td{padding:.3125rem .25rem;border-top:1px solid color-mix(in oklab,var(--color-tinta) 7%,transparent);vertical-align:top;line-height:1.35}
.c-andamio__tabla td:last-child{text-align:right;font-weight:700;white-space:nowrap}
.c-andamio__tabla .c-andamio__grupo td{padding-top:.5rem;font-weight:700;text-align:left;text-transform:uppercase;letter-spacing:.08em;font-size:.625rem;color:var(--color-chicle-tinta)}
.c-andamio__valor{max-width:9rem;overflow-wrap:anywhere;font-family:ui-monospace,Consolas,monospace;font-size:.6875rem}
.c-andamio__capa{display:inline-block;padding:.0625rem .4375rem;border-radius:var(--radio-entero);background-color:var(--color-nube);font-size:var(--text-nano);font-weight:600;white-space:nowrap}
.c-andamio__capa--contexto{background-color:var(--color-lila)}
.c-andamio__rotulo{font-size:var(--text-nano);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-tinta-suave);margin-top:.375rem}
.c-andamio__datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem .75rem;margin:0}
.c-andamio__dato{display:grid;min-width:0}
.c-andamio__dato dt{font-size:.625rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--color-tinta-suave)}
.c-andamio__dato dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.c-andamio__pistas,.c-andamio__fuera,.c-andamio__lineas{display:grid;gap:.25rem;margin:0;padding-inline-start:1.125rem;line-height:1.4}
.c-andamio__fuera{list-style:disc;color:var(--color-tinta-suave)}
.c-andamio__fuera b{color:var(--color-tinta)}
.c-andamio__lineas{padding:.625rem .75rem .625rem 1.75rem;border-radius:var(--radio-control);background-color:var(--color-nata);font-weight:500}
.c-andamio__firma code{padding:.125rem .5rem;border-radius:var(--radio-entero);background-color:var(--color-nube);font-family:ui-monospace,Consolas,monospace;font-weight:700}
.c-andamio__json summary{min-height:2rem;display:flex;align-items:center;font-weight:650;cursor:pointer}
.c-andamio__json pre{max-height:16rem;overflow:auto;margin:0;padding:.625rem;border-radius:var(--radio-control);background-color:var(--color-nata);font-size:.6875rem;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.c-andamio__enlaces{display:flex;flex-wrap:wrap;gap:.375rem}
.c-andamio__enlaces a{display:inline-flex;align-items:center;min-height:2rem;padding:0 .75rem;border-radius:var(--radio-entero);background-color:var(--color-nata);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 8%,transparent);color:var(--color-tinta);text-decoration:none;font-weight:600}
.c-andamio__enlaces a[aria-current="true"]{background-color:var(--color-chicle);color:#fff;box-shadow:none}

/* ═══════════════════════ 08 · ESCRITORIO BAJO, TABLETA Y MOVIL ═══════════════════════ */
/* Portatiles de 720-820 de alto: las piezas se recogen; el pase sigue midiendo lo mismo en todo el recorrido */
@media (width >= 64rem) and (height < 820px){
  .c{--c-relleno:2rem;--cuca-alto:min(62dvh,34rem)}
  .c{--c-techo:calc(var(--alto-cabecera) - .25rem);--c-suelo:1rem}
  .c-bocas{top:calc(var(--alto-cabecera) + .25rem)}
  .c-boca .bocadillo__caja{padding-block:1rem 1.125rem}
  .c-boca .titular--pregunta{font-size:clamp(1.625rem,1rem + 1.2vw,2.25rem)}
  .c-boca__uno{font-size:var(--text-cuerpo)}
  .c-pase__papel{padding-block:.625rem .75rem}
  .c-pase__titulo{font-size:1.25rem}
  .c-pase__fila{--disco:1.625rem;height:2.5rem;margin-top:.125rem}
  .c-pase__barra{margin-top:.5rem}
  .c-pase__talon{gap:.375rem;padding-block:.5rem}
  .c-cuerpo{padding-top:1rem;padding-bottom:.75rem}
  .c-pantalla{gap:var(--spacing-caja)}
  .c-v{gap:var(--spacing-caja)}
  .c-pie{padding-block:.75rem 1rem}
  .c-v--celebracion{--celebra-alto:4rem}
  .c-empresa{--disco:calc(var(--alto) - 1rem)}
  .c-fam + .c-fam{margin-top:.375rem;padding-top:.375rem}
  .c-fam__lista{gap:.375rem}
  .c-baldosa{min-height:4rem;padding-block:.375rem .3125rem;gap:.25rem}
  .c-baldosa__disco{width:1.75rem;height:1.75rem}
  .c-opciones--rango .pildora{--alto:3.5rem}
  .c-opciones--rango .c-rango__cifra{font-size:1.375rem}
  .c-opciones--rango .c-rango__pre{font-size:var(--text-corto)}
  .c-opciones--espacio .pildora{--alto:3rem}
  .c-edades .numero{--lado:2.875rem}
  .c-edades .numero:not(.numero--ancho){font-size:1.375rem}
  .c-estrella{--fila:2.875rem}
  .c-estrellas--varias .c-estrella__campo .campo-objeto__entrada{font-size:1.25rem}
  .c-grupo--planb{padding-block:.75rem}
  /* final3: a 1280x720 el mes, la leyenda y la franja caben sin que el cuerpo ruede y se lleve el nombre del mes */
  .c-v--fecha{gap:var(--spacing-pieza)}
  .c-v--fecha .cal{--cal-fila:2.125rem;--cal-dia:2.125rem;gap:var(--spacing-dedo)}
  .c-v--fecha .cal__titulo{min-height:2.25rem}
  .c-v--fecha .cal__leyenda{min-height:2.25rem}
  .c-v--fecha .c-grupo--franja{gap:var(--spacing-hilo)}
  .c-opciones--franja .pildora{--alto:2.75rem}
  .c-v--fecha .cal__mes{gap:var(--spacing-dedo)}
  .c-desp__cab{min-height:3rem}
}

@media (width < 64rem){
  .c{--c-margen:clamp(.75rem,.2rem + 2.5vw,1.5rem);--c-relleno:var(--radio-tarjeta);display:flex;flex-direction:column;padding-top:calc(max(.75rem,env(safe-area-inset-top)) + clamp(3.5rem,3.1rem + 1.2vw,4.25rem) + .5rem)}
  .c-arriba{flex:none;padding:0 var(--c-margen);z-index:6}
  .c-escena{flex:none;display:flex;align-items:flex-end;gap:var(--spacing-caja);padding:var(--spacing-pieza) var(--c-margen) 0 calc(var(--c-margen) + var(--radio-tarjeta) - .5rem);min-height:0;z-index:2}
  .c-escena__luz{inset:auto auto -1.5rem -2.5rem;width:calc(var(--cuca-mini) * 2.4);height:calc(var(--cuca-mini) * 2);background:radial-gradient(closest-side,rgb(255 255 255 / .8) 0%,rgb(255 255 255 / .5) 55%,transparent 100%)}
  .c-cuca{position:relative;inset:auto;order:0;flex:none;width:calc(var(--cuca-mini) * 1.1);align-self:flex-end;justify-content:center}
  .c-cuca__escala{--c-cuca-ancho:calc(var(--cuca-mini) * var(--c-fm,1))}
  .c-cuca .cuca{translate:calc((.5 - var(--c-cx,.5)) * var(--cuca-ancho) * .6) 0}
  /* R5 (M): la sombra del bocadillo era larga (12 px + 22 de difuso) y caia entera en los 20 px que lo
     separan de la hoja: sobre el rosa de los blobs se leia como una banda rosa-grisacea. Corta y suave. */
  .c-bocas{--bocadillo-max:100%;--boca-relleno:var(--radio-pieza);--mini-radio:var(--radio-campo);position:relative;inset:auto;order:1;flex:1 1 auto;min-width:0;width:auto;max-width:none;margin:0 0 1.25rem}
  .c-boca{filter:drop-shadow(0 3px 8px rgb(28 28 30 / .05)) drop-shadow(0 1px 2px rgb(28 28 30 / .04))}
  .c-boca .bocadillo__caja{padding:var(--spacing-caja) var(--radio-pieza) calc(var(--spacing-caja) + 1px);border-radius:var(--radio-pieza);gap:.375rem}
  .c-cola--abajo{display:none}
  /* P-17 (05-10-2026): la cola lateral, una sola silueta con la caja. Su base medía 80 px (56 en
     el pequeño) y la caja menos: la base asomaba por encima y por debajo de las esquinas redondas
     como un canto recto. Ahora va centrada en el alto de la caja, con la base dentro de su canto
     (el alto menos un radio: medio por arriba y medio por abajo, donde la curva aún no se ha
     separado) y entra 3 px en la caja para que no quede costura. */
  .c-cola--lado{display:block;left:-23px;top:50%;width:26px;height:min(5rem,calc(100% - var(--radio-pieza)));translate:0 -50%;transform-origin:100% 50%}
  .c-boca--mini .c-cola--lado{left:-15px;width:18px;height:min(3.5rem,calc(100% - var(--mini-radio)))}
  .c-bocas .c-boca--mini .bocadillo__caja{padding:.4375rem var(--mini-radio) .5rem}
  .c-boca__uno{font-size:var(--text-corto);line-height:1.35}
  .c-boca .titular--pregunta{font-size:clamp(1.375rem,1.1rem + 1.4vw,2rem);line-height:1.08}
  .c-boca__guia-titulo{font-size:var(--text-lead)}
  .c-boca__acciones .boton{flex:1 1 auto;white-space:normal;text-align:center;line-height:1.2;padding-block:.5rem}
  /* R4 (M): la hoja sigue anclada abajo pero mide lo que su contenido; Cuca y el bocadillo bajan y suben con ella */
  .c-escena{margin-top:auto}
  /* R5 (M): el canto de la hoja se lee con un filo blanco y una sombra muy corta de la casa (antes
     subia 14 px con 40 de difuso y oscurecia lo que hay debajo de Cuca). El relleno, algo mas nata,
     para que el desenfoque del rosa no tiña el canto. */
  .c-panel{flex:0 1 auto;min-height:0;margin:0;border-radius:var(--radio-tarjeta) var(--radio-tarjeta) 0 0;background-color:rgb(255 253 250 / .88);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 1px 0 #fff,0 -1px 0 rgb(255 255 255 / .8),0 -3px 10px -6px rgb(28 28 30 / .07)}
  .c-panel__pase{display:none}
  .c-cuerpo{padding-top:var(--spacing-bloque)}
  .c-pantalla{justify-content:flex-start}
  .c-pie{padding-bottom:calc(var(--spacing-caja) + env(safe-area-inset-bottom))}

  /* El pase como ficha: la misma fila y la misma capa, en pequeño */
  .c-pase{--talon:5.625rem;border-radius:var(--radio-pieza);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 6%,transparent),0 10px 24px -16px rgb(28 28 30 / .3)}
  .c-pase__papel{padding:.5625rem .75rem .875rem var(--radio-pieza)}
  .c-pase__titulo{font-size:1.0625rem}
  .c-pase__fila{--disco:1.375rem;height:2.25rem;margin-top:.0625rem}
  /* 44 px de toque: el ::after estira la zona a la ficha entera */
  .c-pase__fila::after{content:'';position:absolute;inset:-.5rem calc(-1 * var(--talon) + .375rem) -.75rem 0}
  /* La barra y el talon pintan encima de esa zona: son adorno, el toque pasa a la fila (antes la barra se lo quedaba) */
  .c-pase__barra,.c-pase__talon{pointer-events:none}
  .c-pila__ultima{font-size:var(--text-nano)}
  .c-pase__barra{position:absolute;left:var(--radio-pieza);right:.75rem;bottom:.375rem;margin:0}
  .c-pase__barra.barra-viva{height:3px}
  .c-pase__talon{border-radius:0 var(--radio-pieza) var(--radio-pieza) 0;padding:.375rem .5rem;gap:.375rem}
  .c-pase__ranura{display:none}
  .c-pase__tiempo{font-size:.6875rem}
  .c-pase__capa{top:calc(100% + .5rem);padding:.5rem;gap:.125rem .375rem}
  .c-pase__sello{right:calc(var(--talon) / 2 + 1.25rem);padding:.25rem .5rem}
  .c-pase__sello b{font-size:.6875rem}
  .c-pase__sello small{font-size:.5rem}

  /* En tableta manda la misma «A» del escritorio: el rotulo al margen y cuatro baldosas por familia */
}
/* La tableta, solo si además tiene alto (PRE-010: el teléfono girado va con el teléfono, abajo) */
@media (width >= 40rem) and (width < 64rem) and (height >= 30rem){
  .c{--cuca-mini:10.5rem}
  .c-pantalla{justify-content:safe center}
  .c-boca .titular--pregunta{font-size:clamp(1.75rem,1rem + 2vw,2.375rem)}
  .c-boca__uno{font-size:var(--text-lead)}
  .c-arriba,.c-escena{width:min(100%,46rem);margin-inline:auto}
  .c-panel{width:min(calc(100% - 2 * var(--c-margen)),46rem);margin:0 auto auto;border-radius:var(--radio-panel)}
  .c-bocas{margin-bottom:2rem}
  .c-bocas .c-boca--mini .c-boca__uno{font-size:var(--text-corto)}
}
/* EL TELÉFONO, de pie o girado (PRE-010, 19-10-2026: «pantalla baja» = menos de 64 rem de ancho y de
   30 de alto; la misma consulta que `mqMovil` de _c.js) */
@media (width < 40rem), (width < 64rem) and (height < 30rem){
  /* Girado, la isla y los cantos redondos quedan a los lados: el contenido no se mete debajo. De pie
     las dos medidas son 0 y no cambia nada */
  .c{padding-inline:env(safe-area-inset-left) env(safe-area-inset-right)}
  /* PRE-006 (19-10-2026, cliente: «la primera pregunta se ve desenfocada por el header»). Sin la cabecera
     SEO, que ocupaba esta franja, la escena subía hasta el relleno de .c y el bocadillo pequeño quedaba
     dentro de la niebla de la cabecera (.niebla-alta de SiteHeader.vue: lavado y desenfoque hasta
     techo + isotipo en reposo + rampa, 104 px a 390). El techo de la escena es ahora el final de esa
     niebla, con las mismas tres medidas; si cambian allí, cambian aquí. El modo teclado lo pisa (sin
     cabecera, su relleno es el de .c--teclado). */
  .c{padding-top:calc(max(.75rem,env(safe-area-inset-top)) + 4.25rem + 1.5rem)}
  .c-escena{gap:.625rem}
  .c-boca .bocadillo__caja{padding-inline:var(--radio-pieza)}
  .c-boca__uno{font-size:var(--text-micro)}
  .c-bocas .c-boca--mini .c-boca__uno{font-size:var(--text-micro);line-height:1.3}
  .c-boca .titular--pregunta{font-size:1.375rem}
  .c-pila__ultima{display:none}
  .c-pase__capa{grid-template-columns:minmax(0,1fr)}
  .c-pegatina{min-height:2.75rem}
  .c-pegatina__disco{width:2.125rem;height:2.125rem}
  .c-v--celebracion{--celebra-alto:4rem}
  .c-opciones--celebra,.c-opciones--organiza{gap:var(--spacing-dedo)}
  /* 15-09-2026 (orquestador): a media columna «Un cumpleaños» partía en dos líneas;
     en móvil van una por fila, con el texto entero y la puerta de empresa al doble de su alto. */
  .c-opciones--celebra{grid-template-columns:minmax(0,1fr)}
  .c-opciones--celebra .c-celebra.pildora{font-size:var(--text-cuerpo);padding-inline:calc((var(--alto) - var(--disco)) / 2) calc(var(--alto) / 2)}
  .c-celebra.pildora{--disco:2.5rem;gap:.5rem;padding-inline:.625rem 1rem;font-size:var(--text-corto);line-height:1.2}
  .c-empresa{--disco:2.5rem;--flecha:2rem;gap:.75rem;padding-inline:calc((var(--alto) - var(--disco)) / 2) calc((var(--alto) - var(--flecha)) / 2)}
  .c-empresa__disco .c-doodle{width:55%;height:55%}
  .c-empresa__dos{font-size:var(--text-corto);line-height:1.2}
  .c-empresa__uno{font-size:var(--text-micro)}
  .c-opciones--organiza{grid-template-columns:minmax(0,1fr)}
  /* 04-10-2026: seis de 48 (antes 56) para que el organizador quepa sin rodar */
  .c-opciones--organiza .c-celebra.pildora{--alto:3rem;--disco:2.25rem}
  /* Cuántos peques (y cuánta gente): de dos en dos, y en la ultima fila «Más de 30» a su medida con
     «Aún lo estamos viendo» al lado, en letra nano (04-10-2026: antes cada una iba sola en su fila).
     Pildoras de 48: la tangencia queda a 24 y la frase cabe entera a 390. Si no cabe (375 y «Más de
     600»), se parte en dos lineas equilibradas dentro de la misma pildora. */
  .c-opciones--rango{display:flex;flex-wrap:wrap;gap:var(--spacing-dedo)}
  .c-opciones--rango .pildora{--alto:3rem;flex:1 1 calc(50% - var(--spacing-dedo));min-width:0}
  .c-opciones--rango .pildora[data-valor$="+"]{flex:0 0 auto}
  .c-opciones--rango .c-escape{flex:1 1 0;margin-top:0}
  .c-v .c-opciones--rango .pildora.c-escape{font-size:var(--text-nano);line-height:1.15}
  .c-opciones--espacio{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-dedo)}
  .c-opciones--espacio .pildora{--alto:3.25rem;padding-inline:1rem;font-size:var(--text-micro)}
  /* «Aún por decidir» al lado de «Al aire libre», en la letra de sus vecinas; y la empresa (interior,
     exterior, los dos), tres en fila */
  .c-opciones--espacio .c-escape{grid-column:auto;justify-self:stretch;margin-top:0}
  .c-v .c-opciones--espacio .pildora.c-escape{font-size:var(--text-micro)}
  .c-opciones--espacio.c-opciones--tres{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Movil · incluye (04-10-2026): una fila por familia y fichas apiladas —el dibujo encima, el nombre
     corto debajo—. Sustituye a la «B» del 16-09 (fichas de dos en dos), que en las familias de tres
     dejaba una sola en su fila (Magia, Trenzas, Pastel). El rotulo, encima y en versalita. */
  .c-fam{grid-template-columns:minmax(0,1fr);row-gap:.25rem}
  /* Sin filete: aqui ya separan el punto de color y la versalita del rotulo */
  .c-fam + .c-fam{margin-top:.5rem;padding-top:0;border-top:0}
  .c-fam__rotulo{margin:0;font-size:.625rem;letter-spacing:.07em;text-transform:uppercase}
  .c-fam__lista{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.25rem}
  .c-baldosa{gap:.1875rem;min-height:3.25rem;padding:.375rem .125rem .3125rem}
  .c-baldosa__disco{width:1.5rem;height:1.5rem}
  .c-baldosa__nombre{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--text-nano)}
  /* Cuatro en fila (personajes): «Superhéroes» entero tambien a 375 */
  .c-fam__lista:has(> :nth-child(4)) .c-baldosa__nombre{font-size:.6875rem}
  .c-baldosa__largo{display:none}
  .c-baldosa__corto{display:inline}
  .c-baldosa__tick{top:.1875rem;right:.1875rem;width:1rem;height:1rem}
  /* La edad, un punto mas pequeña (04-10-2026): botones de 44 —el dedo— y cifra de 22, la del escritorio bajo */
  .c-edades{grid-template-columns:repeat(5,minmax(0,1fr));gap:.375rem}
  .c-edades .numero{--lado:2.75rem}
  .c-edades .numero:not(.numero--ancho){font-size:1.375rem}
  .c-edades .numero--ancho{grid-column:span 3}
  /* R1 (M): campo + ficha de edad en la misma linea y el quitar con sus 44 px; el apoyo de «Añadir» debajo del texto */
  .c-estrella{--fila:2.875rem;column-gap:.375rem}
  .c-estrellas--varias .c-estrella__campo.c-campo{padding-inline:1.125rem}
  .c-estrellas--varias .c-estrella__campo .campo-objeto__entrada{font-size:1.1875rem}
  .c-estrella__edad{min-width:4.75rem;padding-inline:.875rem}
  .c-estrella__edad--puesta{font-size:var(--text-corto)}
  .c-estrellas--varias .c-estrella__quitar{margin-inline:-.25rem -.5rem}
  .c-estrella-mas__textos{display:grid;row-gap:1px}
  .c-desp__fichas{padding-inline-start:.375rem}
  .c-desp__abre{padding-inline:.875rem .625rem}
  .c-cp-fila{gap:var(--spacing-dedo)}
  .c-sitio{--sitio-alto:2.25rem;--sitio-disco:1.75rem;gap:.375rem}
  /* En móvil el municipio cabe entero: hasta dos líneas y sin provincia (en escritorio, una línea y provincia). */
  .c-sitio__textos b{font-size:var(--text-micro);white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.1}
  .c-sitio__textos small{display:none}
  /* La hora, tres por fila: «Nos adaptamos» ocupa las dos que quedan (04-10-2026: antes iba sola a lo ancho) */
  .c-opciones--franja{grid-template-columns:repeat(3,minmax(0,1fr))}
  .c-opciones--franja .c-franja[data-valor="flexible"]{grid-column:span 2}
  .c-opciones--franja .pildora{--alto:3.25rem;font-size:var(--text-micro)}
  .c-grupo--franja{margin-inline:calc(-1 * var(--radio-pieza));padding-inline:var(--radio-pieza)}
  /* El dia (04-10-2026): el mes y su leyenda caben enteros sin rodar. Filas de 38 (dias de 36), sin
     reservar la sexta semana (si el mes la tiene, el panel viaja) y «Aún no la tenemos» en la franja de
     la leyenda, que pasa a columna a su izquierda: lo mismo que el escritorio */
  .c-v--fecha .cal{--cal-fila:2.375rem;--cal-dia:2.25rem;gap:var(--spacing-dedo)}
  .c-v--fecha .cal__mes{gap:var(--spacing-dedo)}
  .c-v--fecha .cal__semanas{min-height:0}
  .c-grupo--dias{position:relative}
  /* La leyenda no ocupa sitio bajo el mes: «Leyenda» (el enlace de la casa) la abre en la capa de cristal
     (abreLeyenda), en la misma franja que «Aún no la tenemos» */
  .c-v--fecha .cal__leyenda{display:none}
  .c-leyenda-enlace{display:inline-flex;align-self:flex-start}
  .c-fecha-escape{position:absolute;right:0;bottom:0}
  .c-v .c-fecha-escape .pildora.c-escape{font-size:var(--text-micro)}
  /* R2 (M): con el prefijo como boton y numeros de otros paises (hasta «6 12 34 56 78»), la pantallita cabe a 390 y a 375 */
  .c-tel{--tel-disco:2.5rem;--tel-tick:1.5rem;column-gap:.4375rem;padding-inline-start:.5rem}
  .c-tel .campo-objeto__entrada{font-size:1.5rem}
  .c-tel__numero{gap:.5rem}
  .c-tel__prefijo{height:1.75rem;padding-inline:.5rem .3125rem;font-size:var(--text-micro)}
  .c-tel__tick svg{width:.875rem;height:.875rem}
  /* P9 (M): la frase del teléfono cabe en una línea a 390 y a 375 */
  .c-tranquilo{gap:0;padding-inline-start:.25rem;font-size:min(var(--text-micro),3.86cqi);letter-spacing:-.01em;white-space:nowrap}
  .c-tranquilo .c-tranquilo__ico{display:none}
  /* En el teléfono no hay rótulos fuera: lo que acompaña a los campos va al canto, como lo legal
     (lo mismo que hace empresa); la línea tranquila tiene que caber entera en una */
  .c-v--contacto :is(.c-tranquilo,.c-llamada),.c-v--contacto .c-enlace--correo{padding-inline-start:0}
  .c-cuenta-atras{grid-template-columns:minmax(0,1fr)}
  .c-escena-texto{grid-column:1;grid-row:auto;padding-inline-start:0;border-left:0;font-size:var(--text-cuerpo)}
  .c-post{padding-inline:var(--radio-pieza)}
  .c-post__cab{flex-direction:column;gap:.125rem}
  .c-andamio{bottom:auto;top:4.25rem}

  /* ═══ 04-10-2026 · EL PIE NUEVO ═══
     La ficha del pase se va de arriba (79 px) y se reparte por el pie (colocaPase en _c.js): la barra
     rosa en su canto, donde iba la raya gris; la pila de pegatinas en el sitio de «Siguiente»; y la
     capa, hacia arriba. El pie pasa de 85 a 60: 44 de dedo y 8 de aire. */
  .c-arriba{display:none}
  .c-cuerpo{padding-top:var(--spacing-caja);padding-bottom:var(--spacing-pieza);transition:padding-bottom var(--dur-normal) var(--ease-curva)}
  /* Con sitio de sobra por arriba, las opciones se separan del pie lo mismo que de los lados (holgura()) */
  .c-cuerpo--holgado{padding-bottom:var(--c-relleno)}
  .c-escena{padding-top:var(--spacing-dedo)}
  .c-bocas{margin-bottom:.875rem}
  .c-v--contacto{gap:var(--spacing-caja)}
  .c-pie{position:relative;padding:.5rem var(--c-relleno) calc(.5rem + env(safe-area-inset-bottom));border-top:0}
  .c-pie > .c-pase__barra{position:absolute;top:-1.5px;bottom:auto;left:0;right:0;margin:0;border-radius:0}
  .c-pie > .c-pase__barra .barra-viva__punta{top:-3.5px}
  .c-pie .atras{font-size:var(--text-micro)}
  .c-pie .pie-flujo__salida{flex-wrap:nowrap;gap:var(--spacing-dedo)}
  .c-pie .boton:not(.boton--icono){min-height:2.75rem;padding-inline:1.375rem}
  /* La pila, del alto del dedo; su flecha mira arriba, hacia donde se abre la capa */
  .c-pie .c-pase__fila{--disco:1.375rem;width:auto;height:2.75rem;margin:0;padding:0 .75rem 0 .5rem}
  .c-pie .c-pase__fila::after{display:none}
  .c-pie .c-pila__flecha{rotate:180deg}
  .c-pie .c-pase__fila[aria-expanded="true"]{background-color:#fff;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-chicle) 30%,transparent)}
  .c-pie .c-pase__fila[aria-expanded="true"] .c-pila__flecha{rotate:0deg}
  /* La bola de seguir: #siguiente como .boton--icono; el texto se queda para quien no ve */
  .c-siguiente--bola #siguiente-texto{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .c-pie .c-siguiente--bola svg.ico--adelante{width:1.125rem;height:1.125rem}
  /* La capa, colgada de la escena justo encima del pie (colocaCapa) y con la muesca abajo, hacia la pila */
  .c-pase__capa--pie{top:auto;left:var(--c-margen);right:var(--c-margen);transform-origin:calc(100% - var(--muesca-x,2rem)) 100%}
  .c-pase__capa--pie::before{top:auto;bottom:-.34rem;left:auto;right:calc(var(--muesca-x,2rem) - .425rem)}
  .c-pase__capa--pie.c-pase__capa--entra{animation-name:c-capa-sube}
  .c-pase__capa--rueda{overflow-y:auto;overscroll-behavior:contain}
  .c-pase__capa--rueda::before{display:none}
  /* Lo que decia la ficha (el titulo y el tiempo que queda) encabeza la capa; el texto, en la tangencia */
  .c-pase__capa-cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-pieza);min-width:0;padding:.375rem .75rem .5rem}
  .c-pase__capa-titulo{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--font-display);font-size:1.0625rem;font-weight:650;letter-spacing:-.018em;line-height:1.2;color:var(--color-tinta)}
  .c-pase__capa-tiempo{flex:none;font-size:var(--text-nano);font-weight:650;color:var(--color-tinta-suave)}

  /* ═══ 04-10-2026 · EL MODO TECLADO (ponTeclado en _c.js) ═══
     Con el teclado fuera, Cuca y su bocadillo pequeño suben y se van (con su nube de motas); cuando
     han salido, la escena se recoge y la pregunta queda arriba en corto. La cabecera de la web se
     aparta en _web.css. Lo que se escribe queda a la vista. */
  .c--teclado-sube .c-cuca{translate:0 -70%;opacity:0;transition:translate var(--dur-corto) var(--ease-salida),opacity var(--dur-corto) var(--ease-salida)}
  .c--teclado-sube .c-mini-hueco{opacity:0;transition:opacity var(--dur-corto) var(--ease-salida)}
  .c--teclado{padding-top:max(.5rem,env(safe-area-inset-top))}
  .c--teclado .c-cuca,.c--teclado .c-mini-hueco,.c--teclado .c-escena__luz,.c--teclado .c-cola{display:none}
  .c--teclado .c-escena{padding:0 var(--c-margen)}
  .c--teclado .c-bocas{margin-bottom:.5rem}
  .c--teclado .c-boca .bocadillo__caja{padding-block:.625rem .6875rem}
  .c--teclado .c-boca .titular--pregunta{font-size:var(--text-lead);line-height:1.15}
  .c--teclado .c-boca__bajada{display:none}

  /* ═══ 04-10-2026 · REJILLAS CUADRADAS (cuadra() en _c.js) ═══
     Evento y las preguntas de despues: de dos en dos, las largas a lo ancho y ninguna sola con un hueco */
  .c-opciones--cuadra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;gap:var(--spacing-dedo)}
  .c-opciones--cuadra .c-op--ancha{grid-column:1 / -1}
  .c-opciones--cuadra .chip,.c-opciones--cuadra .pildora{font-size:var(--text-micro)}
  .c-opciones--evento .chip{--alto:2.75rem}

  /* ═══ 04-10-2026 · LA ETIQUETA DENTRO DEL CAMPO (contacto de empresa, flota() en _c.js) ═══
     El rotulo de fuera se va y entra en el campo, en la misma celda que el input: vacio hace de
     placeholder; con foco o con algo escrito se encoge y sube. El campo mide lo mismo en los dos estados. */
  .c-v--contacto-pro{gap:var(--spacing-pieza)}
  .c-v--contacto-pro .c-rotulo{display:none}
  /* P-20 / P-21 (05-10-2026): las etiquetas de los dos formularios finales, en una sola vertical. Los
     cuatro campos llevan el mismo disco (el del correo) y el mismo hueco hasta el texto, el teléfono
     también; así etiqueta y texto arrancan a la misma distancia del canto en todos. En la familia el
     rótulo de fuera también entra en el campo. */
  .c-v--contacto .c-grupo--nombre > .c-rotulo{display:none}
  .c-v--contacto .c-campo__disco,.c-v--contacto .c-tel__disco{width:2.25rem;height:2.25rem}
  .c-v--contacto .c-tel.c-campo--flota{--tel-disco:2.25rem;column-gap:var(--spacing-pieza);padding-inline-start:.5rem}
  .c-campo--flota:not(.c-tel){min-height:3.75rem;align-items:end;padding-block:.5rem}
  .c-campo--flota > .c-campo__disco{align-self:center}
  .c-campo--flota > .c-campo__etiqueta,.c-campo--flota > .campo-objeto__entrada{grid-row:1;grid-column:-2 / -1}
  .c-campo--flota .campo-objeto__entrada{font-size:1.125rem;min-height:2rem}
  .c-campo__etiqueta{display:block;align-self:end;min-width:0;margin-bottom:.4rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:1rem;font-weight:500;line-height:1.2;color:color-mix(in oklab,var(--color-tinta-suave) 72%,transparent);pointer-events:none;transform-origin:0 0;transition:translate var(--dur-corto) var(--ease-curva),scale var(--dur-corto) var(--ease-curva),color var(--dur-corto) var(--ease-salida)}
  /* PRE-002 (12-10-2026): en reposo la etiqueta se apoyaba en la linea del valor, que vive 6 px por debajo
     del centro para dejar sitio a la etiqueta subida. Medido: tinta a +5,2…+7,8 px del centro de la pildora
     (Chromium y WebKit). En reposo sube esos 6 px; con foco o con texto mandan las reglas de abajo. */
  .c-campo--flota > .c-campo__etiqueta{translate:0 -.375rem}
  .c-campo--flota:focus-within > .c-campo__etiqueta,.c-campo--flota.c-campo--lleno > .c-campo__etiqueta{translate:0 -1.125rem;scale:.72;font-weight:650;color:var(--color-tinta-suave)}
  /* El autorrelleno no siempre avisa con «input»: en regla aparte (si el navegador no sabe :autofill, solo cae esta) */
  .c-campo--flota:has(:autofill) > .c-campo__etiqueta{translate:0 -1.125rem;scale:.72;font-weight:650;color:var(--color-tinta-suave)}
  .c-campo--flota:not(.c-campo--flota-arriba):not(:focus-within):not(.c-campo--lleno) .campo-objeto__entrada::placeholder,.c-campo--sin-pista .campo-objeto__entrada::placeholder{color:transparent}
  /* El telefono: su etiqueta siempre arriba, en su fila, con el disco y el tick a lo alto de las dos */
  .c-tel.c-campo--flota{width:100%;grid-template-rows:auto auto;row-gap:.0625rem;padding-block:.5rem}
  .c-tel.c-campo--flota > .c-campo__etiqueta{grid-column:2;grid-row:1;margin:0;font-size:.6875rem;font-weight:650;color:var(--color-tinta-suave)}
  .c-tel.c-campo--flota > .c-tel__numero{grid-column:2;grid-row:2}
  .c-tel.c-campo--flota > .c-tel__disco,.c-tel.c-campo--flota > .c-tel__tick{grid-row:1 / span 2}
  .c-tel.c-campo--flota .c-campo__etiqueta{translate:none;scale:none}
}
/* La leyenda en la capa: en columna, con la letra de leer */
.c-desp-capa--leyenda .c-leyenda__lista{flex-direction:column;align-items:flex-start;gap:var(--spacing-caja);padding-top:var(--spacing-bloque);font-size:var(--text-corto);color:var(--color-tinta)}
@keyframes c-capa-sube{from{opacity:0;scale:var(--esc-nace);translate:0 var(--via-paso)}}
/* A 360 y menos, la frase corta */
/* R2 (M): a 375 y menos, el numero un punto mas pequeño para que quepa entero */
@media (width < 24rem){
  .c-tel .campo-objeto__entrada{font-size:1.375rem}
}
@media (width < 23rem){
  .c-tranquilo__largo{display:none}
  .c-tranquilo__corto{display:inline}
}

/* ═══════════════════════ 09 · REDUCIDO Y QUIETO ═══════════════════════ */
@media (prefers-reduced-motion:reduce){
  .c-cuca__escala{transition:none}
  .c-pila__disco--actual::before,.c-pase--brilla .c-pase__luz::after,.c-sitio--busca .c-sitio__disco,.c-muni__ubicacion[aria-busy="true"] .c-muni__dib{animation:none}
  .c-mas{transition:none}
  .c-apuntado{animation-duration:var(--dur-corto)}
  .c-nace{animation:none}
  .c-desp-capa,.c-desp-capa--puesta{transition-duration:var(--dur-corto)}
}
html.quieto .c-pila__disco--actual::before{opacity:.8;scale:1;animation:none}
html.quieto .c-apuntado{display:none}