/* ═══════════════════════════════════════════════════════════════════════════
   PRESUPUESTO VIVO · EL KIT DE LA CASA PARA FORMULARIOS VIVOS

   La piel compartida por las tres versiones (A invitacion, B mazo, C Cuca).
   Cada pieza dice de donde sale. Los numeros son tokens de _base.css; los que
   no lo son estan declarados (y copiados de su pieza de origen).

   Indice
     01 tipo · titular con degradado que viaja · pregunta · versalita
     02 botones · .boton (primario) · --suave · --claro · .enlace-casa · .atras · .pie-flujo
     03 opciones · .pildora · .chip (tick dibujado) · .carta-opcion · .numero
     04 aviso ambar · .con-aviso · .aviso-pastilla
     05 barra viva (BarraProgreso de reserva)
     06 muesca (site/resources/css/muesca.css, al pie de la letra)
     07 cristal · hoja inferior
     08 cabecera cerrada · ¿Hablamos?
     09 campo-objeto · etiqueta «Hola, soy» · pantallita
     10 Cuca · bocadillo · guia
     11 esencia (Esencia.vue)
     12 vuelo · paso (empujon) · escalonado · capa de motas

   Fichero compartido: de solo lectura mientras se construyen las versiones.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════ 01 · TIPO ═══════════════════════ */
.titular{font-family:var(--font-display);font-size:var(--text-titulo);line-height:1.05;letter-spacing:-.03em;text-wrap:balance;font-optical-sizing:auto}
.titular:not(:last-child){margin-bottom:var(--espacio-titulo-bajada)}
/* Primera linea: versalita falsificada (Bricolage no trae smcp) · app.css 2818 */
.titular__uno{display:block;font-weight:300;color:var(--color-tinta);font-size:.42em;line-height:.9;font-kerning:normal;font-feature-settings:'case' 1;--versalita-cuerpo:.72em;--versalita-peso:370;--versalita-track:clamp(.9px,.06em,3px);--versalita-palabra:.015em}
.titular__dos{display:block;font-weight:800;letter-spacing:-.034em;color:var(--color-chicle-tinta);padding-inline-end:.034em}
/* El degradado que viaja en la segunda linea: cinco paradas, el chicle manda, 9 s lineal.
   Solo corre con .titular--vivo (lo pone Casa.titulares con IntersectionObserver). */
@supports (background-clip:text) or (-webkit-background-clip:text){
  .titular--gradiente .titular__dos{background-image:linear-gradient(100deg,var(--color-chicle) 0%,var(--color-chicle) 22%,var(--color-brillo) 38%,var(--color-chicle) 54%,var(--color-chicle) 74%,var(--color-brillo) 88%,var(--color-chicle) 100%);background-size:260% 100%;background-position:0% 50%;background-clip:text;-webkit-background-clip:text;color:transparent}
  .titular--gradiente.titular--vivo .titular__dos{animation:titular-rosa 9s linear infinite}
}
@keyframes titular-rosa{to{background-position:260% 50%}}
.titular--medio{font-size:clamp(2.2rem,1.6rem + 2.4vw,3.6rem)}
/* El de pregunta: cabe en una pieza sin scroll de pagina */
.titular--pregunta{font-size:clamp(1.9rem,1.45rem + 1.7vw,3rem);line-height:1.04}
.titular--pregunta .titular__uno{font-size:.46em;line-height:1}
.titular--centro{text-align:center}
.versalita{text-transform:uppercase;font-size:var(--versalita-cuerpo,.775em);font-weight:var(--versalita-peso,600);letter-spacing:var(--versalita-track,.052em);word-spacing:var(--versalita-palabra,.015em);margin-inline-end:calc(-1 * var(--versalita-track,.052em))}
/* La pregunta ligera de formulario (formulario.css · .formulario__titulo) */
.pregunta{font-family:var(--font-display);font-size:var(--text-titulo-corto);line-height:1.15;font-weight:300;letter-spacing:-.02em;text-wrap:balance}
.pregunta b,.pregunta strong{font-weight:700}
.lead{font-size:var(--text-lead);line-height:1.45;letter-spacing:-.011em;font-weight:350;text-wrap:pretty}
.cuerpo{font-size:var(--text-cuerpo);line-height:1.5;letter-spacing:-.006em;text-wrap:pretty}
.corto{font-size:var(--text-corto);line-height:1.55;font-weight:400;text-wrap:pretty}
.micro{font-size:var(--text-micro);line-height:1.4;font-weight:400}
.nano{font-size:var(--text-nano);line-height:1.35;letter-spacing:.005em;font-weight:500}
.rotulo{font-family:var(--font-display);font-size:var(--text-rotulo);line-height:1.2;letter-spacing:-.018em;font-weight:600}
.cifra{font-family:var(--font-display);font-size:var(--text-cifra);line-height:1;letter-spacing:-.03em;font-weight:800;font-variant-numeric:tabular-nums}
.texto-suave{color:var(--color-tinta-suave)}
.texto-acento{color:var(--color-chicle-tinta)}
.dibujo{display:inline-block;width:1em;height:1em;flex:none;background-color:currentColor;mask:var(--dibujo) center/contain no-repeat;-webkit-mask:var(--dibujo) center/contain no-repeat}

/* ═══════════════════════ 02 · BOTONES ═══════════════════════
 * .boton ES el primario de la casa (Boton.vue + app.css): claro arriba y
 * saturado abajo —Canva lo declara «180°, #F75899, #FFA6CE» y en CSS las
 * paradas van al reves, comprobado contra el render en Boton.vue—. Sin borde:
 * el canto blanco es la parada clara y el filo interior de 1 px. Letra blanca
 * con su sombra. El contraste es decision de cliente. NUNCA disabled: si falta
 * algo, sigue en rosa y al pulsar sale el aviso ambar; si no puede cumplir,
 * cambia de promesa (texto). Trabajo en curso: aria-busy="true". */
.boton{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-dedo);min-height:2.75rem;padding-inline:1.25rem;border:0;border-radius:var(--radio-entero);background-image:var(--pildora-relleno);color:var(--pildora-letra);text-shadow:var(--pildora-letra-sombra);box-shadow:var(--pildora-canto);font-family:var(--font-sans);font-size:var(--text-boton-sm);font-weight:600;letter-spacing:.005em;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform var(--dur-corto) var(--ease-salida),box-shadow var(--dur-corto) var(--ease-salida),filter var(--dur-corto) var(--ease-salida)}
.boton:hover,.boton:focus-visible{transition-timing-function:var(--ease-curva)}
@media (hover:hover){.boton:hover{transform:translateY(calc(-1 * var(--via-roce)));filter:brightness(1.04);box-shadow:inset 0 1px 0 rgb(255 255 255 / .55),0 12px 26px -8px rgb(247 88 153 / .85)}}
.boton:active{transform:translateY(var(--via-roce)) scale(var(--esc-pulsa));box-shadow:inset 0 1px 0 rgb(255 255 255 / .55),0 2px 4px -2px rgb(247 88 153 / .5);transition-duration:var(--dur-toque);transition-timing-function:var(--ease-suave)}
.boton:focus-visible{outline:2px solid var(--color-chicle);outline-offset:3px}
.boton svg{width:1.05em;height:1.05em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:translate var(--dur-normal) var(--ease-salida)}
/* La flecha se adelanta al pasar (elige · Presupuesto.vue) */
@media (hover:hover){.boton:hover svg.ico--adelante{translate:var(--via-roce) 0}}
.boton--grande{min-height:3.25rem;padding-inline:1.625rem;font-size:var(--text-boton)}
.boton--icono{width:2.75rem;padding:0}
.boton--ancho{width:100%}
/* Suave: nata con filete. Para la segunda accion (la de la guia, «Me quedo»). */
.boton--suave{background-image:none;background-color:var(--color-nata);color:var(--color-tinta);text-shadow:none;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 14%,transparent),0 6px 16px -10px rgb(28 28 30 / .18)}
@media (hover:hover){.boton--suave:hover{filter:none;background-color:#fff;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-chicle) 45%,transparent),0 10px 22px -12px rgb(28 28 30 / .22)}}
.boton--suave:active{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-chicle) 45%,transparent),0 2px 4px -2px rgb(28 28 30 / .16)}
/* Claro / hecho (Boton.vue): blanco lavado con filete rosa claro */
.boton--claro{background-image:linear-gradient(180deg,#fff 0%,#fff2f7 100%);color:#2f0040;border:2px solid #fbb6d2;box-shadow:0 8px 20px -10px rgb(247 88 153 / .45)}
@media (hover:hover){.boton--claro:hover{filter:brightness(1.02);box-shadow:0 12px 24px -10px rgb(247 88 153 / .55)}}
/* Trabajo visible (900-1200 ms): tres puntos que laten; el boton sigue vivo */
.boton__puntos{display:inline-flex;gap:3px}
.boton__puntos i{width:5px;height:5px;border-radius:var(--radio-entero);background:currentColor;animation:puntos-late 900ms var(--ease-nivel) calc(var(--i,0) * 150ms) infinite both}
.boton__puntos i:nth-child(2){--i:1}.boton__puntos i:nth-child(3){--i:2}
@keyframes puntos-late{0%,100%{opacity:.35;scale:.7}50%{opacity:1;scale:1}}

/* El enlace de la casa (.enlace + .enlace-toque de app.css): versalita, flecha
 * diagonal y un relleno chicle que sube como un vaso (960 ms al irse, 600 al llegar).
 * Marcado minimo: <a class="enlace-casa" href="…">Texto</a> · Casa.enlaces() lo arma. */
.enlace-casa{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--color-chicle-tinta);font-size:var(--text-corto);font-weight:500;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.enlace-casa:focus-visible{outline:none}
.enlace-casa__tinta{position:relative;display:inline-flex;align-items:center;isolation:isolate;max-width:calc(100% + .8em);padding:.12em .4em;margin:0 -.4em;white-space:nowrap}
/* Un enlace largo parte en dos lineas en vez de salirse (el relleno lo sigue: es la misma caja) */
.enlace-casa--largo .enlace-casa__tinta{white-space:normal}
.enlace-casa--largo .enlace-casa__cap{text-wrap:balance}
.enlace-casa__cap{display:inline-block;text-transform:uppercase;font-size:.775em;font-weight:600;letter-spacing:.052em;word-spacing:.015em;margin-inline-end:-.052em;transform:scaleX(.97);transform-origin:center}
.enlace-casa__flecha{width:.72em;height:.72em;margin-left:.2em;flex:none}
.enlace-casa__relleno{position:absolute;inset:0;display:flex;align-items:center;padding:.12em .4em;border-radius:var(--radius-sm);background:var(--color-chicle);color:var(--color-nata);opacity:0;clip-path:ellipse(140% 280% at 50% 390%);pointer-events:none;transition:clip-path var(--dur-vaciado) var(--ease-nivel),opacity var(--dur-vaciado) var(--ease-nivel)}
.enlace-casa:focus-visible .enlace-casa__relleno,.enlace-casa.es-foco .enlace-casa__relleno{clip-path:ellipse(140% 280% at 50% 240%);opacity:1;transition:clip-path var(--dur-escena) var(--ease-suave),opacity var(--dur-escena) var(--ease-suave)}
@media (hover:hover){.enlace-casa:hover .enlace-casa__relleno{clip-path:ellipse(140% 280% at 50% 240%);opacity:1;transition:clip-path var(--dur-escena) var(--ease-suave),opacity var(--dur-escena) var(--ease-suave)}}
.enlace-casa--tinta{color:var(--color-tinta)}
.enlace-casa--suave{color:var(--color-tinta-suave)}
.enlace-casa--suave .enlace-casa__relleno,.enlace-casa--tinta .enlace-casa__relleno{background:var(--color-tinta)}

/* Atras (formulario.css): texto suave y nada mas; 44 px de toque. */
.atras{display:inline-flex;flex:none;align-items:center;gap:var(--spacing-hilo);min-height:2.75rem;padding-inline:var(--spacing-pieza);margin-inline-start:calc(-1 * var(--spacing-pieza));border-radius:var(--radio-entero);font-size:var(--text-corto);font-weight:600;color:var(--color-tinta-suave);transition:color var(--dur-corto) var(--ease-salida)}
.atras svg{flex:none;width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:translate var(--dur-normal) var(--ease-salida)}
@media (hover:hover){.atras:hover{color:var(--color-tinta);transition-timing-function:var(--ease-curva)}.atras:hover svg{translate:calc(-1 * var(--via-roce)) 0}}
/* El pie del flujo: Atras abajo a la izquierda, Siguiente abajo a la derecha, igual en movil y escritorio. */
.pie-flujo{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--spacing-caja);min-height:2.75rem}
.pie-flujo__salida{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--spacing-dedo);margin-inline-start:auto;min-width:0}

/* ═══════════════════════ 03 · OPCIONES ═══════════════════════
 * Todo lo que se elige es un <button> con aria-pressed (o aria-checked en un
 * radiogroup). 44 px de toque. Foco: anillo chicle. Elegido: el halo blanco de la
 * casa (Contacto.vue, «quiero lo mismo que elige») sobre el degradado brillo→chicle
 * en la eleccion unica; nube con aro y tick dibujado en la multiple. */
.opciones{display:flex;flex-wrap:wrap;gap:var(--spacing-dedo)}
.opciones--centro{justify-content:center}
.opciones--rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,10rem),1fr));gap:var(--spacing-pieza)}
.opciones--numeros{display:grid;grid-template-columns:repeat(auto-fill,minmax(3.5rem,1fr));gap:var(--spacing-dedo)}
.opciones--columna{display:grid;gap:var(--spacing-dedo)}

/* LA PILDORA · alineacion optica: relleno lateral = mitad del alto */
.pildora{--alto:2.75rem;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-dedo);min-height:var(--alto);padding-block:var(--spacing-hilo);padding-inline:calc(var(--alto) / 2);border-radius:var(--radio-entero);background-color:rgb(255 255 255 / .8);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 11%,transparent),0 6px 16px -12px rgb(28 28 30 / .2);color:var(--color-tinta);font-size:var(--text-corto);font-weight:500;line-height:1.2;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform var(--dur-corto) var(--ease-salida),box-shadow var(--dur-corto) var(--ease-salida),background-color var(--dur-corto) var(--ease-salida),color var(--dur-corto) var(--ease-salida)}
.pildora--grande{--alto:3.5rem;font-size:var(--text-cuerpo)}
.pildora--ancha{width:100%;justify-content:flex-start;text-align:left}
.pildora__dibujo{width:1.15em;height:1.15em;flex:none;background-color:currentColor;mask:var(--dibujo) center/contain no-repeat;-webkit-mask:var(--dibujo) center/contain no-repeat;opacity:.8}
/* Con dibujo delante: el disco se centra en la tapa de la pildora (tangencia concentrica) */
.pildora--con-dibujo{padding-inline-start:calc((var(--alto) - 1.15em) / 2)}
@media (hover:hover){.pildora: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)}}
.pildora:active{transform:translateY(var(--via-roce)) scale(var(--esc-pulsa));transition-duration:var(--dur-toque);transition-timing-function:var(--ease-suave)}
.pildora:focus-visible,.pildora.es-foco{outline:2px solid var(--color-chicle);outline-offset:3px}
.pildora[aria-pressed="true"],.pildora[aria-checked="true"]{background-color:transparent;background-image:linear-gradient(135deg,var(--color-brillo),var(--color-chicle));color:#fff;text-shadow:var(--pildora-letra-sombra);font-weight:600;box-shadow:var(--halo-elegido),inset 0 1px 0 rgb(255 255 255 / .45);animation:elige-pop var(--dur-pausado) var(--ease-muelle) both}
.pildora[aria-pressed="true"] .pildora__dibujo,.pildora[aria-checked="true"] .pildora__dibujo{opacity:1}
@keyframes elige-pop{from{scale:var(--esc-brota)}}

/* EL CHIP ELEGIBLE · varios a la vez; el tick se DIBUJA (stroke-dashoffset, --dur-normal) */
.chip{--alto:2.75rem;--disco:1.5rem;position:relative;display:inline-flex;align-items:center;gap:var(--spacing-dedo);min-height:var(--alto);padding-block:var(--spacing-hilo);padding-inline:calc((var(--alto) - var(--disco)) / 2) calc(var(--alto) / 2);border-radius:var(--radio-entero);background-color:rgb(255 255 255 / .8);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 11%,transparent),0 6px 16px -12px rgb(28 28 30 / .2);color:var(--color-tinta);font-size:var(--text-corto);font-weight:500;line-height:1.2;text-align:left;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform var(--dur-corto) var(--ease-salida),box-shadow var(--dur-corto) var(--ease-salida),background-color var(--dur-corto) var(--ease-salida)}
.chip__tick{position:relative;display:grid;place-items:center;width:var(--disco);height:var(--disco);flex:none;border-radius:var(--radio-entero);background-color:#fff;box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--color-tinta) 18%,transparent);transition:background-color var(--dur-corto) var(--ease-salida),box-shadow var(--dur-corto) var(--ease-salida)}
.chip__tick svg{width:.9rem;height:.9rem;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)}
.chip__foto{width:var(--disco);height:var(--disco);flex:none;border-radius:.45rem;object-fit:cover}
.chip__dibujo{width:1.1rem;height:1.1rem;flex:none;background-color:currentColor;mask:var(--dibujo) center/contain no-repeat;-webkit-mask:var(--dibujo) center/contain no-repeat;opacity:.75}
@media (hover:hover){.chip: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)}}
.chip:active{transform:translateY(var(--via-roce)) scale(var(--esc-pulsa));transition-duration:var(--dur-toque);transition-timing-function:var(--ease-suave)}
.chip:focus-visible,.chip.es-foco{outline:2px solid var(--color-chicle);outline-offset:3px}
.chip[aria-pressed="true"],.chip[aria-checked="true"]{background-color:var(--color-nube);font-weight:600;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)}
.chip[aria-pressed="true"] .chip__tick,.chip[aria-checked="true"] .chip__tick{background-color:var(--color-chicle);box-shadow:0 2px 6px color-mix(in oklab,var(--color-chicle) 45%,transparent);animation:elige-pop var(--dur-pausado) var(--ease-muelle) both}
.chip[aria-pressed="true"] .chip__tick svg,.chip[aria-checked="true"] .chip__tick svg{stroke-dashoffset:0;transition:stroke-dashoffset var(--dur-normal) var(--ease-curva)}

/* LA CARTA DE OPCION · foto en cuadrado de esquina blanda; radios concentricos
 * (caja 28 − marco 8 = foto 20) y el texto a un radio del canto. */
.carta-opcion{--carta-radio:var(--radio-tarjeta);--carta-marco:var(--spacing-dedo);position:relative;display:flex;flex-direction:column;gap:var(--spacing-pieza);padding:var(--carta-marco);border-radius:var(--carta-radio);background-color:var(--color-nata);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 7%,transparent),var(--sombra-corta);color:var(--color-tinta);text-align:left;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform var(--dur-corto) var(--ease-salida),box-shadow var(--dur-corto) var(--ease-salida)}
.carta-opcion__foto{position:relative;display:block;aspect-ratio:1;border-radius:calc(var(--carta-radio) - var(--carta-marco));overflow:hidden;background-color:var(--color-nube)}
.carta-opcion__foto img{width:100%;height:100%;object-fit:cover}
.carta-opcion__texto{display:grid;gap:2px;padding:0 calc(var(--carta-radio) - var(--carta-marco)) calc(var(--spacing-pieza) - 2px)}
.carta-opcion__nombre{font-family:var(--font-display);font-size:var(--text-cuerpo);font-weight:700;letter-spacing:-.012em;line-height:1.2;text-wrap:balance}
.carta-opcion__nota{font-size:var(--text-micro);line-height:1.35;color:var(--color-tinta-suave);text-wrap:pretty}
.carta-opcion__tick{position:absolute;top:calc(var(--carta-marco) + .5rem);right:calc(var(--carta-marco) + .5rem);z-index:1;display:grid;place-items:center;width:1.75rem;height:1.75rem;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)}
.carta-opcion__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)}
.carta-opcion--pequena{--carta-radio:var(--radio-pieza);--carta-marco:.375rem}
@media (hover:hover){.carta-opcion:hover{transform:translateY(calc(-1 * var(--via-roce)));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-chicle) 40%,transparent),0 14px 30px -14px rgb(28 28 30 / .26);transition-timing-function:var(--ease-curva)}}
.carta-opcion:active{transform:translateY(var(--via-roce)) scale(var(--esc-pulsa));transition-duration:var(--dur-toque);transition-timing-function:var(--ease-suave)}
.carta-opcion:focus-visible,.carta-opcion.es-foco{outline:2px solid var(--color-chicle);outline-offset:3px}
.carta-opcion[aria-pressed="true"],.carta-opcion[aria-checked="true"]{box-shadow:0 0 0 2px var(--color-chicle),0 0 26px rgb(255 255 255 / .6),0 10px 26px -10px color-mix(in oklab,var(--color-chicle) 45%,transparent)}
.carta-opcion[aria-pressed="true"] .carta-opcion__tick,.carta-opcion[aria-checked="true"] .carta-opcion__tick{opacity:1;scale:1;transition:opacity var(--dur-toque) var(--ease-curva),scale var(--dur-normal) var(--ease-muelle)}
.carta-opcion[aria-pressed="true"] .carta-opcion__tick svg,.carta-opcion[aria-checked="true"] .carta-opcion__tick svg{stroke-dashoffset:0;transition:stroke-dashoffset var(--dur-normal) var(--ease-curva) var(--dur-toque)}

/* LA BALDOSA DE NUMERO · la edad, 1-12 y «13 o mas» */
.numero{--lado:3.5rem;position:relative;display:grid;place-items:center;min-width:var(--lado);height:var(--lado);padding-inline:var(--spacing-dedo);border-radius:var(--radio-pieza);background-color:rgb(255 255 255 / .8);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 11%,transparent),0 6px 16px -12px rgb(28 28 30 / .2);color:var(--color-tinta);font-family:var(--font-display);font-size:1.625rem;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform var(--dur-corto) var(--ease-salida),box-shadow var(--dur-corto) var(--ease-salida),background-color var(--dur-corto) var(--ease-salida),color var(--dur-corto) var(--ease-salida)}
.numero small{display:block;margin-top:2px;font-family:var(--font-sans);font-size:var(--text-nano);font-weight:500;letter-spacing:.01em;color:var(--color-tinta-suave)}
.numero--ancho{grid-column:span 2;padding-inline:var(--radio-pieza);font-size:var(--text-corto);font-weight:650;letter-spacing:-.005em}
@media (hover:hover){.numero: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)}}
.numero:active{transform:translateY(var(--via-roce)) scale(var(--esc-pulsa));transition-duration:var(--dur-toque);transition-timing-function:var(--ease-suave)}
.numero:focus-visible,.numero.es-foco{outline:2px solid var(--color-chicle);outline-offset:3px}
.numero[aria-pressed="true"],.numero[aria-checked="true"]{background-color:transparent;background-image:linear-gradient(135deg,var(--color-brillo),var(--color-chicle));color:#fff;text-shadow:var(--pildora-letra-sombra);box-shadow:var(--halo-elegido),inset 0 1px 0 rgb(255 255 255 / .45);animation:elige-pop var(--dur-pausado) var(--ease-muelle) both}
.numero[aria-pressed="true"] small,.numero[aria-checked="true"] small{color:rgb(255 255 255 / .9)}

/* ═══════════════════════ 04 · EL AVISO AMBAR ═══════════════════════
 * reserva.disparate.show · validatePage(): el campo se enciende en ambar, la
 * pastilla sale junto a Siguiente, la pieza sacude (translate −6·5·−3, 450 ms,
 * ease-curva · lib/sacude.js), haptica [30,50,30] y todo se retira solo a los 5 s
 * o en cuanto se vuelve a tocar. Nunca rojo. El mensaje, en positivo. */
.campo-objeto[aria-invalid="true"],.con-aviso.campo-objeto{box-shadow:var(--aviso-anillo)}
.con-aviso:is(input,textarea,select){box-shadow:var(--aviso-anillo);border-color:var(--color-ambar)}
.con-aviso :is(.pildora,.chip,.numero,.carta-opcion):not([aria-pressed="true"]):not([aria-checked="true"]){box-shadow:inset 0 0 0 1.5px var(--color-ambar),0 0 0 3px color-mix(in oklab,var(--color-ambar) 16%,transparent)}
.con-aviso:not(.campo-objeto):not(:is(input,textarea,select)):not(:has(.pildora,.chip,.numero,.carta-opcion)){outline:2px solid var(--color-ambar);outline-offset:3px}
.aviso-pastilla{display:inline-flex;align-items:center;gap:.4rem;max-width:min(20rem,100%);min-height:2rem;padding:.25rem .75rem .25rem .375rem;border-radius:1rem;background-color:var(--aviso-fondo);box-shadow:inset 0 0 0 1px var(--aviso-filete);color:var(--color-tinta);font-size:var(--text-micro);font-weight:600;line-height:1.3;text-wrap:pretty;animation:aviso-entra var(--dur-normal) var(--ease-curva) both}
.aviso-pastilla__marca{display:grid;place-items:center;width:1.25rem;height:1.25rem;flex:none;border-radius:var(--radio-entero);background-color:var(--color-ambar);color:#fff;font-family:var(--font-display);font-size:.75rem;font-weight:800;line-height:1}
.aviso-pastilla--sale{opacity:0;transition:opacity var(--dur-pausado) var(--ease-salida)}
@keyframes aviso-entra{from{opacity:0;translate:0 -10px}}
/* Aviso fijo en linea (sin pastilla), para una condicion que se dice debajo del campo */
.aviso-linea{display:flex;align-items:baseline;gap:var(--spacing-dedo);font-size:var(--text-micro);line-height:1.45;color:var(--color-tinta)}
.aviso-linea::before{content:'';flex:none;width:.5rem;height:.5rem;translate:0 -.05em;border-radius:var(--radio-entero);background-color:var(--color-ambar)}

/* ═══════════════════════ 05 · LA BARRA VIVA ═══════════════════════
 * BarraProgreso.vue (portada de reserva): relleno con brillo que la recorre (3 s),
 * punta que late (2,4 s), chispas desde la punta 350 ms despues de avanzar y, al
 * llenarse, revienta en particulas que suben. Casa.barra(el) la monta. */
.barra-viva{position:relative;height:4px;border-radius:var(--radio-entero);background:color-mix(in oklab,var(--color-chicle) 16%,transparent);transition:background-color var(--dur-escena) var(--ease-salida)}
.barra-viva--vaciada{background:transparent}
.barra-viva__relleno{position:absolute;inset-block:0;left:0;width:0;border-radius:var(--radio-entero);background:linear-gradient(90deg,transparent 0%,rgb(255 255 255 / .45) 50%,transparent 100%) no-repeat -200% 0 / 60% 100%,linear-gradient(90deg,var(--color-brillo),var(--color-chicle));box-shadow:0 0 8px color-mix(in oklab,var(--color-chicle) 40%,transparent);transition:width var(--dur-pausado) var(--ease-curva);animation:barra-brillo 3s ease-in-out infinite}
.barra-viva__punta{position:absolute;top:-3px;left:-5px;width:10px;height:10px;border-radius:var(--radio-entero);pointer-events:none;background:radial-gradient(circle,var(--color-chicle) 18%,color-mix(in oklab,var(--color-chicle) 45%,transparent) 48%,transparent 70%);transition:left var(--dur-pausado) var(--ease-curva);animation:barra-latido 2.4s ease-in-out infinite}
.barra-viva--vaciada .barra-viva__relleno,.barra-viva--vaciada .barra-viva__punta{opacity:0;transition:opacity var(--dur-corto) var(--ease-salida)}
.barra-viva__mota{position:absolute;border-radius:var(--radio-entero);pointer-events:none}
@keyframes barra-brillo{0%{background-position:-200% 0,0 0}100%{background-position:300% 0,0 0}}
@keyframes barra-latido{0%,100%{scale:1;opacity:.65}50%{scale:1.25;opacity:1}}
/* La cabeza de la barra: capitulo a la izquierda, tiempo que queda a la derecha */
.barra-cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-caja);margin-bottom:var(--spacing-dedo);font-size:var(--text-micro);font-weight:600;color:var(--color-tinta-suave)}
.barra-cab b{color:var(--color-tinta);font-weight:650}

/* ═══════════════════════ 06 · LA MUESCA Y SU BOTON ═══════════════════════
 * Copia fiel de site/resources/css/muesca.css (14-09-2026). La receta, las medidas
 * y sus porques estan alli. La lente se dibuja CON SU PROPORCION (sin
 * preserveAspectRatio="none"). El boton es HERMANO de la caja. Casa.muesca() pone
 * las clases (port de lib/muesca.js). */
.muesca-g{--muesca-pisa:8px;--muesca-radio:var(--radio-tarjeta);--muesca-esquina:calc(var(--muesca-radio) + 8px);--m-d:var(--mb-d);--m-lente:var(--mb-lente);--m-lente-tam:var(--mb-lente-tam);--m-lente-pos:var(--mb-lente-pos);--m-b-top:var(--mb-b-top);--m-b-right:var(--mb-b-right);--m-b-bottom:var(--mb-b-bottom);--m-b-left:var(--mb-b-left);--muesca-cuelga:calc(var(--m-d) - var(--muesca-pisa))}
.muesca-g--tactil{--mb-d:2.75rem;--mb-largo:5.5rem;--mb-lente-fondo:15px;--mb-vuelo:1px}
.muesca-g--normal{--mb-d:2.5rem;--mb-largo:4.5rem;--mb-lente-fondo:17px;--mb-vuelo:3px}
.muesca-g--ancho-tactil{--ma-d:2.75rem;--ma-largo:5.5rem;--ma-lente-fondo:15px;--ma-vuelo:1px}
.muesca-g--ancho-normal{--ma-d:2.5rem;--ma-largo:4.5rem;--ma-lente-fondo:17px;--ma-vuelo:3px}
.muesca-g--en-inicio{--mb-a-lente:var(--muesca-esquina);--mb-a-boton:calc(var(--muesca-esquina) + var(--mb-largo) / 2 - var(--mb-d) / 2)}
.muesca-g--en-centro{--mb-a-lente:50%;--mb-a-boton:calc(50% - var(--mb-d) / 2)}
.muesca-g--en-fin{--mb-a-lente:calc(100% - var(--muesca-esquina));--mb-a-boton:calc(100% - var(--muesca-esquina) - var(--mb-largo) / 2 - var(--mb-d) / 2)}
.muesca-g--en-fraccion{--mb-a-lente:calc(var(--muesca-f) * 100% + var(--muesca-f) * var(--mb-largo) - var(--mb-largo) / 2);--mb-a-boton:calc(var(--muesca-f) * 100% - var(--mb-d) / 2)}
.muesca-g--en-distancia{--mb-a-lente:calc(var(--muesca-d) - var(--mb-largo) / 2);--mb-a-boton:calc(var(--muesca-d) - var(--mb-d) / 2)}
.muesca-g--ancho-en-inicio{--ma-a-lente:var(--muesca-esquina);--ma-a-boton:calc(var(--muesca-esquina) + var(--ma-largo) / 2 - var(--ma-d) / 2)}
.muesca-g--ancho-en-centro{--ma-a-lente:50%;--ma-a-boton:calc(50% - var(--ma-d) / 2)}
.muesca-g--ancho-en-fin{--ma-a-lente:calc(100% - var(--muesca-esquina));--ma-a-boton:calc(100% - var(--muesca-esquina) - var(--ma-largo) / 2 - var(--ma-d) / 2)}
.muesca-g--ancho-en-fraccion{--ma-a-lente:calc(var(--muesca-f-ancho) * 100% + var(--muesca-f-ancho) * var(--ma-largo) - var(--ma-largo) / 2);--ma-a-boton:calc(var(--muesca-f-ancho) * 100% - var(--ma-d) / 2)}
.muesca-g--ancho-en-distancia{--ma-a-lente:calc(var(--muesca-d-ancho) - var(--ma-largo) / 2);--ma-a-boton:calc(var(--muesca-d-ancho) - var(--ma-d) / 2)}
.muesca-g--derecha{--mb-lente:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 88'%3E%3Cpath d='M14,88 C14,66 0,66 0,44 C0,22 14,22 14,0 Z'/%3E%3C/svg%3E");--mb-lente-tam:var(--mb-lente-fondo) var(--mb-largo);--mb-lente-pos:right calc(-1 * var(--mb-vuelo)) top var(--mb-a-lente);--mb-b-top:var(--mb-a-boton);--mb-b-right:calc(var(--muesca-pisa) - var(--mb-d));--mb-b-bottom:auto;--mb-b-left:auto}
.muesca-g--izquierda{--mb-lente:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 88'%3E%3Cpath d='M0,88 C0,66 14,66 14,44 C14,22 0,22 0,0 Z'/%3E%3C/svg%3E");--mb-lente-tam:var(--mb-lente-fondo) var(--mb-largo);--mb-lente-pos:left calc(-1 * var(--mb-vuelo)) top var(--mb-a-lente);--mb-b-top:var(--mb-a-boton);--mb-b-right:auto;--mb-b-bottom:auto;--mb-b-left:calc(var(--muesca-pisa) - var(--mb-d))}
.muesca-g--abajo{--mb-lente:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 14'%3E%3Cpath d='M88,14 C66,14 66,0 44,0 C22,0 22,14 0,14 Z'/%3E%3C/svg%3E");--mb-lente-tam:var(--mb-largo) var(--mb-lente-fondo);--mb-lente-pos:left var(--mb-a-lente) bottom calc(-1 * var(--mb-vuelo));--mb-b-top:auto;--mb-b-right:auto;--mb-b-bottom:calc(var(--muesca-pisa) - var(--mb-d));--mb-b-left:var(--mb-a-boton)}
.muesca-g--arriba{--mb-lente:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 14'%3E%3Cpath d='M88,0 C66,0 66,14 44,14 C22,14 22,0 0,0 Z'/%3E%3C/svg%3E");--mb-lente-tam:var(--mb-largo) var(--mb-lente-fondo);--mb-lente-pos:left var(--mb-a-lente) top calc(-1 * var(--mb-vuelo));--mb-b-top:calc(var(--muesca-pisa) - var(--mb-d));--mb-b-right:auto;--mb-b-bottom:auto;--mb-b-left:var(--mb-a-boton)}
.muesca-g--ancho-derecha{--ma-lente:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 88'%3E%3Cpath d='M14,88 C14,66 0,66 0,44 C0,22 14,22 14,0 Z'/%3E%3C/svg%3E");--ma-lente-tam:var(--ma-lente-fondo) var(--ma-largo);--ma-lente-pos:right calc(-1 * var(--ma-vuelo)) top var(--ma-a-lente);--ma-b-top:var(--ma-a-boton);--ma-b-right:calc(var(--muesca-pisa) - var(--ma-d));--ma-b-bottom:auto;--ma-b-left:auto}
.muesca-g--ancho-izquierda{--ma-lente:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 88'%3E%3Cpath d='M0,88 C0,66 14,66 14,44 C14,22 0,22 0,0 Z'/%3E%3C/svg%3E");--ma-lente-tam:var(--ma-lente-fondo) var(--ma-largo);--ma-lente-pos:left calc(-1 * var(--ma-vuelo)) top var(--ma-a-lente);--ma-b-top:var(--ma-a-boton);--ma-b-right:auto;--ma-b-bottom:auto;--ma-b-left:calc(var(--muesca-pisa) - var(--ma-d))}
.muesca-g--ancho-abajo{--ma-lente:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 14'%3E%3Cpath d='M88,14 C66,14 66,0 44,0 C22,0 22,14 0,14 Z'/%3E%3C/svg%3E");--ma-lente-tam:var(--ma-largo) var(--ma-lente-fondo);--ma-lente-pos:left var(--ma-a-lente) bottom calc(-1 * var(--ma-vuelo));--ma-b-top:auto;--ma-b-right:auto;--ma-b-bottom:calc(var(--muesca-pisa) - var(--ma-d));--ma-b-left:var(--ma-a-boton)}
.muesca-g--ancho-arriba{--ma-lente:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 14'%3E%3Cpath d='M88,0 C66,0 66,14 44,14 C22,14 22,0 0,0 Z'/%3E%3C/svg%3E");--ma-lente-tam:var(--ma-largo) var(--ma-lente-fondo);--ma-lente-pos:left var(--ma-a-lente) top calc(-1 * var(--ma-vuelo));--ma-b-top:calc(var(--muesca-pisa) - var(--ma-d));--ma-b-right:auto;--ma-b-bottom:auto;--ma-b-left:var(--ma-a-boton)}
@media (width >= 40rem){.muesca-g--desde-40{--m-d:var(--ma-d);--m-lente:var(--ma-lente);--m-lente-tam:var(--ma-lente-tam);--m-lente-pos:var(--ma-lente-pos);--m-b-top:var(--ma-b-top);--m-b-right:var(--ma-b-right);--m-b-bottom:var(--ma-b-bottom);--m-b-left:var(--ma-b-left)}}
@media (width >= 60rem){.muesca-g--desde-60{--m-d:var(--ma-d);--m-lente:var(--ma-lente);--m-lente-tam:var(--ma-lente-tam);--m-lente-pos:var(--ma-lente-pos);--m-b-top:var(--ma-b-top);--m-b-right:var(--ma-b-right);--m-b-bottom:var(--ma-b-bottom);--m-b-left:var(--ma-b-left)}}
@media (width >= 64rem){.muesca-g--desde-64{--m-d:var(--ma-d);--m-lente:var(--ma-lente);--m-lente-tam:var(--ma-lente-tam);--m-lente-pos:var(--ma-lente-pos);--m-b-top:var(--ma-b-top);--m-b-right:var(--ma-b-right);--m-b-bottom:var(--ma-b-bottom);--m-b-left:var(--ma-b-left)}}
.muesca{position:relative;isolation:isolate;filter:drop-shadow(0 2px 4px rgb(28 28 30 / .1)) drop-shadow(0 10px 18px rgb(28 28 30 / .12));transition:transform var(--dur-normal) var(--ease-curva),filter var(--dur-normal) var(--ease-curva)}
.muesca--sin-sombra{filter:none}
@media (hover:hover){.muesca--alza:hover{transform:translateY(calc(-1 * var(--via-roce)));filter:drop-shadow(0 4px 8px rgb(28 28 30 / .12)) drop-shadow(0 16px 28px rgb(28 28 30 / .16))}}
.muesca--llena,.muesca--llena > .muesca__caja{height:100%}
.muesca__caja{position:relative;border-radius:var(--muesca-radio);background-color:var(--muesca-fondo,var(--color-nata))}
.muesca__caja,.muesca--puesta::before{-webkit-mask-image:var(--m-lente),linear-gradient(#000,#000);mask-image:var(--m-lente),linear-gradient(#000,#000);-webkit-mask-position:var(--m-lente-pos),left top;mask-position:var(--m-lente-pos),left top;-webkit-mask-size:var(--m-lente-tam),100% 100%;mask-size:var(--m-lente-tam),100% 100%;-webkit-mask-repeat:no-repeat,repeat;mask-repeat:no-repeat,repeat;-webkit-mask-composite:xor;mask-composite:exclude}
.muesca--puesta::before{content:'';position:absolute;inset:calc(-1 * var(--spacing-hilo) / 2);z-index:-1;border-radius:calc(var(--muesca-radio) + var(--spacing-hilo) / 2);background-color:var(--color-chicle);pointer-events:none}
.muesca__boton{position:absolute;top:var(--m-b-top);right:var(--m-b-right);bottom:var(--m-b-bottom);left:var(--m-b-left);z-index:1;display:grid;place-items:center;width:var(--m-d);height:var(--m-d);padding:0;border:0;border-radius:var(--radio-entero);background-image:var(--pildora-relleno);box-shadow:var(--pildora-canto);color:var(--pildora-letra);cursor:pointer;transition:transform var(--dur-corto) var(--ease-salida),box-shadow var(--dur-corto) var(--ease-salida)}
@media (hover:hover){.muesca__boton:hover{transform:scale(var(--esc-hover));transition-timing-function:var(--ease-curva)}}
.muesca__boton:active{transform:scale(var(--esc-pulsa))}
.muesca__boton:focus-visible{outline:2px solid var(--color-chicle);outline-offset:3px}
.muesca__boton[aria-pressed="true"]{background-image:linear-gradient(180deg,#fff 0%,#fff2f7 100%);border:2px solid var(--color-chicle);box-shadow:0 8px 20px -10px rgb(247 88 153 / .45);color:#2f0040}
.muesca__boton svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ═══════════════════════ 07 · CRISTAL Y HOJA INFERIOR ═══════════════════════
 * El cristal de la casa: backdrop-filter blur sencillo con relleno translucido
 * plano. Sin filos especulares ni saturacion. ⚠️ Un filter o un mix-blend-mode en
 * un antepasado lo mata; clip-path no lo recorta en el Chrome del cliente: usa
 * border-radius. */
.cristal{background-color:var(--difuso-fuerte);-webkit-backdrop-filter:blur(var(--difuso-blur));backdrop-filter:blur(var(--difuso-blur));box-shadow:inset 0 0 0 1px rgb(255 255 255 / .55),var(--sombra-corta)}
.cristal--denso{background-color:rgb(255 255 255 / .76)}
.cristal--hoja{background-color:var(--difuso-hoja)}
.cristal--sin-sombra{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .55)}
/* La hoja que sube desde abajo (MobileNav · hoja-menu): cristal, asa y pie al alcance del pulgar.
 * Casa.hoja(el) la sube con visualViewport cuando sale el teclado (--teclado). */
.hoja-inferior{--hoja-peek:4.75rem;position:fixed;inset:auto 0 0 0;z-index:50;display:flex;flex-direction:column;max-height:min(88dvh,46rem);padding:0 var(--spacing-bloque) calc(var(--spacing-caja) + env(safe-area-inset-bottom));border-radius:var(--radio-tarjeta) var(--radio-tarjeta) 0 0;background-color:rgb(255 255 255 / .8);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 -14px 40px -20px rgb(28 28 30 / .24),inset 0 1px 0 rgb(255 255 255 / .75);color:var(--color-tinta);transform:translateY(var(--teclado,0px));transition:transform var(--dur-normal) var(--ease-curva)}
.hoja-inferior--dentro{position:absolute}
.hoja-inferior[data-estado="cerrada"]{transform:translateY(calc(100% - var(--hoja-peek) + var(--teclado,0px)));transition-duration:var(--dur-corto);transition-timing-function:var(--ease-salida)}
.hoja-inferior--entra{animation:hoja-sube var(--dur-normal) var(--ease-curva) both}
@keyframes hoja-sube{from{transform:translateY(100%)}}
.hoja-inferior__asa{flex:none;display:grid;place-items:center;align-self:center;width:4rem;height:1.5rem;margin-bottom:var(--spacing-hilo);border-radius:var(--radio-entero);cursor:grab}
.hoja-inferior__asa::before{content:'';display:block;width:2.5rem;height:.3125rem;border-radius:var(--radio-entero);background:color-mix(in oklab,var(--color-tinta) 20%,transparent);transition:background-color var(--dur-corto) var(--ease-salida)}
@media (hover:hover){.hoja-inferior__asa:hover::before{background:color-mix(in oklab,var(--color-tinta) 34%,transparent)}}
.hoja-inferior__cab{flex:none;padding-bottom:var(--spacing-pieza)}
.hoja-inferior__cuerpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-inline:calc(-1 * var(--spacing-bloque));padding:var(--spacing-hilo) var(--spacing-bloque) var(--spacing-caja);scrollbar-width:none}
.hoja-inferior__cuerpo::-webkit-scrollbar{display:none}
.hoja-inferior__pie{flex:none;padding-top:var(--spacing-pieza);border-top:1px solid color-mix(in oklab,var(--color-tinta) 7%,transparent)}
.velo-casa{position:fixed;inset:0;z-index:45;background-color:color-mix(in oklab,var(--color-tinta) 30%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:velo-entra var(--dur-normal) var(--ease-suave) both}
@keyframes velo-entra{from{opacity:0}}

/* ═══════════════════════ 08 · CABECERA CERRADA ═══════════════════════
 * Sin menu (no se sale del flujo): el isotipo de la casa a la izquierda (SiteHeader,
 * movil: suelto, con su doble sombra) y la pildora «¿Hablamos?» a la derecha, de
 * cristal como la pildora del menu, con la luz de brillo que se aviva 450 ms. */
.cabecera-cerrada{position:fixed;inset:max(.75rem,env(safe-area-inset-top)) 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-caja);padding-inline:clamp(1rem,.5rem + 2vw,2rem);pointer-events:none}
.cabecera-cerrada > *{pointer-events:auto}
.cabecera-cerrada--en-flujo{position:relative;inset:auto}
.cabecera-cerrada__marca{display:grid;place-items:center;width:clamp(3.5rem,3.1rem + 1.2vw,4.25rem);border-radius:var(--radio-entero);transition:transform var(--dur-corto) var(--ease-salida)}
.cabecera-cerrada__marca img{width:100%;height:auto;filter:drop-shadow(0 1px 2px rgb(28 28 30 / .28)) drop-shadow(0 6px 14px rgb(28 28 30 / .16))}
@media (hover:hover){.cabecera-cerrada__marca:hover{transform:scale(var(--esc-hover));transition-timing-function:var(--ease-curva)}}
.hablamos{position:relative;display:inline-flex;align-items:center;gap:.625rem;height:2.75rem;padding-inline:.3125rem 1.375rem;border-radius:var(--radio-entero);background-color:var(--difuso-fuerte);-webkit-backdrop-filter:blur(var(--difuso-blur));backdrop-filter:blur(var(--difuso-blur));box-shadow:inset 0 0 0 1px rgb(255 255 255 / .5),var(--sombra-corta);color:oklch(.23 .108 310.82);font-size:var(--text-boton-sm);text-decoration:none;white-space:nowrap;transition:transform var(--dur-corto) var(--ease-salida),box-shadow var(--dur-corto) var(--ease-salida)}
.hablamos__luz{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.hablamos__luz::before{content:'';position:absolute;top:50%;left:62%;width:9rem;height:4.25rem;translate:-50% -50%;background-image:radial-gradient(closest-side,color-mix(in oklab,var(--color-brillo) 40%,transparent) 0%,color-mix(in oklab,var(--color-brillo) 25%,transparent) 40%,color-mix(in oklab,var(--color-brillo) 6.5%,transparent) 80%,transparent 100%);opacity:0;scale:.72;transition:opacity var(--dur-pausado) var(--ease-nivel),scale var(--dur-pausado) var(--ease-nivel)}
.hablamos__polvo{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.hablamos__disco{position:relative;display:grid;place-items:center;width:2.125rem;height:2.125rem;flex:none;border-radius:var(--radio-entero);background-image:var(--pildora-relleno);box-shadow:var(--pildora-canto);color:#fff}
.hablamos__disco svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hablamos__texto{position:relative;text-transform:uppercase;font-size:.8em;font-weight:560;letter-spacing:.058em;word-spacing:.015em;margin-inline-end:-.058em}
@media (hover:hover){.hablamos:hover{transform:translateY(calc(-1 * var(--via-roce)));transition-timing-function:var(--ease-curva)}.hablamos:hover .hablamos__luz::before{opacity:1;scale:1}}
.hablamos:focus-visible .hablamos__luz::before{opacity:1;scale:1}
.hablamos:active{transform:translateY(var(--via-roce)) scale(var(--esc-pulsa));transition-duration:var(--dur-toque)}

/* ═══════════════════════ 09 · CAMPO-OBJETO ═══════════════════════
 * Se escribe DENTRO de un objeto de la marca, en grande: nada de caja con etiqueta.
 * La pantallita sale de Mockups/contacto (aprobada por el cliente): el objeto mide lo
 * que mide lo escrito, se aclara al enfocar y se tiñe de chicle cuando esta completo.
 * Input a >= 16 px (iOS no hace zoom). */
.campo-objeto{position:relative;display:inline-grid;align-items:center;max-width:100%;padding:var(--spacing-pieza) var(--spacing-caja);border-radius:var(--radio-pieza);background-color:var(--color-nube);cursor:text;transition:box-shadow var(--dur-corto) var(--ease-salida),background-color var(--dur-corto) var(--ease-salida),transform var(--dur-normal) var(--ease-curva)}
.campo-objeto:focus-within,.campo-objeto.es-foco{background-color:#fff;box-shadow:var(--foco-anillo);transition-timing-function:var(--ease-curva)}
.campo-objeto--lista{background-color:color-mix(in oklab,var(--color-chicle) 14%,var(--color-nube))}
.campo-objeto__entrada{display:block;width:100%;min-width:3ch;field-sizing:content;margin:0;padding:0;border:0;outline:0;background:transparent;font-family:var(--font-display);font-size:clamp(1.75rem,1.35rem + 1.6vw,2.6rem);font-weight:700;letter-spacing:-.01em;line-height:1.15;color:var(--color-tinta);caret-color:var(--color-chicle);text-overflow:ellipsis}
.campo-objeto__entrada::placeholder{color:color-mix(in oklab,var(--color-tinta) 22%,transparent);opacity:1}
.campo-objeto__entrada:focus-visible{outline:none}
/* La pantallita del telefono: prefijo quieto y el numero en cifras tabulares */
.campo-objeto--pantallita{grid-template-columns:auto minmax(0,1fr);column-gap:var(--spacing-dedo)}
.campo-objeto--pantallita .campo-objeto__entrada{font-variant-numeric:tabular-nums;letter-spacing:.005em}
.campo-objeto__prefijo{font-family:var(--font-display);font-size:clamp(1.1rem,.95rem + .6vw,1.45rem);font-weight:600;color:var(--color-tinta-suave);font-variant-numeric:tabular-nums}
/* La etiqueta «Hola, soy»: la pegatina con nombre de toda la vida. La banda es brillo→chicle
 * (el del elegido) y el hueco, nata; se endereza al enfocarla. */
.campo-objeto--etiqueta{display:inline-grid;grid-template-rows:auto auto;min-width:min(19rem,100%);padding:0;overflow:hidden;border-radius:var(--radio-tarjeta);background-color:var(--color-nata);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-tinta) 7%,transparent),0 18px 36px -18px rgb(28 28 30 / .28);rotate:-1.5deg;transition:rotate var(--dur-normal) var(--ease-curva),box-shadow var(--dur-corto) var(--ease-salida)}
.campo-objeto--etiqueta:focus-within,.campo-objeto--etiqueta.es-foco{rotate:0deg;background-color:var(--color-nata);box-shadow:var(--foco-anillo),0 22px 40px -18px rgb(28 28 30 / .3)}
.campo-objeto--etiqueta[aria-invalid="true"]{box-shadow:var(--aviso-anillo),0 18px 36px -18px rgb(28 28 30 / .28)}
.campo-objeto__banda{display:grid;justify-items:center;gap:1px;padding:.7rem var(--radio-tarjeta) .6rem;background-image:linear-gradient(135deg,var(--color-brillo),var(--color-chicle));color:#fff;text-shadow:var(--pildora-letra-sombra);text-align:center}
.campo-objeto__banda b{font-family:var(--font-display);font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.campo-objeto__banda small{font-size:var(--text-nano);font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.92}
.campo-objeto__hueco{position:relative;display:grid;place-items:center;padding:var(--spacing-caja) var(--radio-tarjeta) var(--spacing-bloque)}
.campo-objeto__hueco::after{content:'';position:absolute;left:var(--radio-tarjeta);right:var(--radio-tarjeta);bottom:calc(var(--spacing-bloque) - .35rem);height:2px;border-radius:2px;background-image:linear-gradient(90deg,color-mix(in oklab,var(--color-tinta) 14%,transparent) 50%,transparent 50%);background-size:8px 2px}
.campo-objeto--etiqueta .campo-objeto__entrada{text-align:center;width:100%;field-sizing:fixed}
.campo-objeto--etiqueta.campo-objeto--lista{background-color:var(--color-nata)}

/* ═══════════════════════ 10 · CUCA · BOCADILLO · GUIA ═══════════════════════
 * Cuca nunca entra sin purpurina (Casa.cuca siembra siempre). Asoma: sube del
 * pozo 950 ms ease-nivel (CucaAsoma). Pop: surge→hover→1 en --dur-normal (CucaPop).
 * La figura se recorta por abajo (el pozo) y la sombra va en la imagen. */
.cuca{position:relative;display:block;width:var(--cuca-ancho,11rem);aspect-ratio:var(--cuca-proporcion,1);flex:none}
.cuca__pozo{position:absolute;inset:0;clip-path:inset(-300% -300% 0 -300%)}
.cuca--suelta .cuca__pozo{clip-path:none}
.cuca__cuerpo{position:absolute;inset:0;transform-origin:50% 100%}
.cuca__cuerpo img{width:100%;height:100%;max-width:none;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 16px 22px rgb(28 28 30 / .12))}
.cuca__motas,.cuca__poso{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:visible}
.cuca--asoma .cuca__cuerpo{animation:cuca-asoma 950ms var(--ease-nivel) both,cuca-enciende var(--dur-normal) var(--ease-suave) both}
.cuca--pop .cuca__cuerpo{animation:cuca-llega var(--dur-normal) var(--ease-curva) var(--dur-normal) both}
.cuca--se-va .cuca__cuerpo{animation:cuca-uf var(--dur-normal) var(--ease-salida) both}
@keyframes cuca-asoma{0%{transform:translate3d(0,100%,0)}78%{transform:translate3d(0,-7px,0)}91%{transform:translate3d(0,2px,0)}100%{transform:translate3d(0,0,0)}}
@keyframes cuca-enciende{from{opacity:0}}
@keyframes cuca-llega{0%{scale:var(--esc-surge);opacity:0}58%{scale:var(--esc-hover);opacity:1}100%{scale:1;opacity:1}}
@keyframes cuca-uf{0%{scale:1;opacity:1}36%{scale:var(--esc-hover);opacity:1}100%{scale:var(--esc-surge);opacity:0}}
html.quieto .cuca--se-va .cuca__cuerpo{opacity:0}
/* Fundida: el corte de la foto se desvanece hacia abajo (cuando no hay suelo donde apoyarla) */
.cuca--fundida .cuca__cuerpo img{-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 98%);mask-image:linear-gradient(to bottom,#000 70%,transparent 98%)}
/* Mini-Cuca en disco (CucaComenta): la cara sobre niebla, 100 px, 9 motas */
.cuca--disco .cuca__pozo{clip-path:none}
.cuca--disco .cuca__cuerpo{border-radius:var(--radio-entero);overflow:hidden;background:radial-gradient(closest-side,var(--color-niebla) 45%,color-mix(in oklab,var(--color-chicle) 18%,white) 100%);box-shadow:0 0 0 3px #fff,var(--sombra-corta)}
.cuca--disco .cuca__cuerpo img{object-fit:cover;object-position:50% 20%;filter:none}

/* EL BOCADILLO QUE SE ESTIRA (Mockups/contacto · morfea): la sombra la pone el
 * envoltorio sobre la silueta unida caja+cola; la caja se estira de su tamaño al
 * nuevo y lo nuevo brota con --ease-muelle. */
.bocadillo{position:relative;width:fit-content;max-width:100%;filter:drop-shadow(0 14px 26px rgb(28 28 30 / .13))}
.bocadillo__caja{position:relative;display:grid;align-content:start;gap:var(--spacing-dedo);width:max-content;max-width:min(var(--bocadillo-max,26rem),calc(100vw - 3rem));padding:var(--spacing-caja) var(--spacing-bloque) calc(var(--spacing-caja) + 2px);border-radius:var(--radio-tarjeta);background-color:var(--color-nata);color:var(--color-tinta);box-sizing:border-box}
.bocadillo--estirando .bocadillo__caja{overflow:hidden;will-change:width,height}
.bocadillo__cola{position:absolute;z-index:1;display:block;color:var(--color-nata);fill:currentColor;pointer-events:none}
.bocadillo--cola-izquierda .bocadillo__cola{left:-25px;top:var(--cola-y,2.25rem);width:26px;height:80px;translate:0 -50%}
.bocadillo--cola-derecha .bocadillo__cola{right:-25px;top:var(--cola-y,2.25rem);width:26px;height:80px;translate:0 -50%;scale:-1 1}
.bocadillo--cola-abajo .bocadillo__cola{top:calc(100% - 1px);left:var(--cola-x,2.25rem);width:2.125rem;height:1.75rem}
.bocadillo--cola-abajo-derecha .bocadillo__cola{top:calc(100% - 1px);right:var(--cola-x,2.25rem);width:2.125rem;height:1.75rem;scale:-1 1}
.bocadillo--cola-arriba .bocadillo__cola{bottom:calc(100% - 1px);left:calc(50% - 1.0625rem);width:2.125rem;height:1.75rem;scale:1 -1}
.bocadillo__quien{font-family:var(--font-display);font-size:var(--text-corto);line-height:1.25;letter-spacing:-.01em;font-weight:700;color:var(--color-chicle-tinta)}
.bocadillo__titulo{font-family:var(--font-display);font-size:var(--text-lead);line-height:1.2;letter-spacing:-.015em;font-weight:700;color:var(--color-tinta);text-wrap:balance}
.bocadillo__dice{font-size:var(--text-corto);line-height:1.5;text-wrap:pretty}
.bocadillo--grande .bocadillo__caja{padding:var(--spacing-bloque) var(--radio-tarjeta)}
.bocadillo--grande .bocadillo__dice{font-family:var(--font-display);font-size:var(--text-rotulo);font-weight:500;letter-spacing:-.018em;line-height:1.25}
.brota{animation:brota var(--dur-normal) var(--ease-muelle) calc(var(--turno-arranque) + var(--turno,0) * var(--turno-rapido)) both;transform-origin:0 50%}
@keyframes brota{from{opacity:0;scale:var(--esc-brota)}}

/* LA GUIA: Cuca asoma por el canto con un bocadillo y una o dos acciones. No es
 * un modal: no hay velo ni bloquea; Esc o tocar fuera la cierran; 9 s y se va. */
.guia{--guia-cuca:clamp(7rem,5.5rem + 5vw,10rem);position:absolute;right:0;bottom:0;z-index:30;display:flex;align-items:flex-end;justify-content:flex-end;gap:calc(var(--spacing-caja) + 10px);width:min(100%,36rem);pointer-events:none}
.guia > *{pointer-events:auto}
.guia__bocadillo{margin-bottom:calc(var(--guia-cuca) * .42);--bocadillo-max:23.5rem;--cola-y:calc(100% - 2.25rem)}
.guia__bocadillo .bocadillo__caja{padding-inline-end:3.25rem}
.guia__cuca{flex:none}
.guia .bocadillo__cola--movil{display:none}
.guia__acciones{display:flex;flex-wrap:wrap;gap:var(--spacing-dedo);margin-top:var(--spacing-dedo)}
.guia__cerrar{position:absolute;top:.375rem;right:.375rem;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)}
.guia__cerrar svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (hover:hover){.guia__cerrar:hover{background-color:color-mix(in oklab,var(--color-tinta) 7%,transparent);color:var(--color-tinta)}}
.guia--sale{opacity:0;translate:0 var(--via-paso);transition:opacity var(--dur-corto) var(--ease-salida),translate var(--dur-corto) var(--ease-salida)}
@media (width < 40rem), (width < 64rem) and (height < 30rem){
  .guia{--guia-cuca:6.25rem;flex-direction:column;align-items:flex-end;gap:calc(1.75rem - 2px);width:100%;padding-inline:var(--spacing-dedo)}
  .guia__bocadillo{align-self:stretch;width:auto;margin-bottom:0}
  .guia__bocadillo .bocadillo__caja{width:auto;max-width:none;padding:var(--spacing-caja) 3rem var(--spacing-caja) var(--spacing-caja)}
  .guia .bocadillo__cola:not(.bocadillo__cola--movil){display:none}
  .guia .bocadillo__cola--movil{display:block;top:calc(100% - 1px);right:calc(var(--guia-cuca) * .5);width:2.125rem;height:1.75rem;scale:-1 1}
  .guia__cuca{margin-right:var(--spacing-caja)}
  .guia__acciones .boton{flex:1 1 auto;white-space:normal;text-align:center;line-height:1.2;padding-block:.5rem}
}

/* ═══════════════════════ 11 · LA ESENCIA (Esencia.vue) ═══════════════════════
 * Aros, no barras. Solo sobre claros: su cristal blanco no se quita. El trazo se
 * escribe con brasa y chispas (1300 ms, escalon 220); la luz (halo) se aviva con
 * el reloj del menu: 450 ms, ease-nivel. .esencia--encendida la enciende entera. */
.esencia{display:inline-block;padding:var(--spacing-dedo) var(--spacing-hilo);border-radius:var(--radio-control);background:rgb(255 255 255 / .55);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);--relleno-dur:1300ms;--relleno-ease:var(--ease-nivel);--destello-dur:1100ms;--destello-fuerza:.35;--halo-reposo:.3;--halo-roce:.35}
.esencia--blanca{background:rgb(255 255 255 / .72)}
.anillos{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-hilo);max-width:24rem}
.anillo{display:flex;flex-direction:column;align-items:center;gap:.125rem;min-width:0;padding-inline:.125rem;border-radius:var(--radio-control);-webkit-tap-highlight-color:transparent;transition:transform var(--dur-corto) var(--ease-salida)}
.anillo__disco{position:relative;display:grid;place-items:center;width:var(--anillo,2.75rem);height:var(--anillo,2.75rem);flex:none}
.anillo__aro{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.anillo__pista{fill:none;stroke:var(--pista);stroke-width:3}
.anillo__arco{fill:none;stroke:var(--tono);stroke-width:5;stroke-linecap:round;transition:stroke-dasharray var(--relleno-dur) var(--relleno-ease),opacity 0ms linear}
.anillo--fiel .anillo__arco,.anillo--fiel .anillo__halo{stroke-linecap:butt}
.anillo__halo{fill:none;stroke:var(--tono);stroke-width:7;stroke-linecap:round;filter:blur(2.2px);transform-box:fill-box;transform-origin:center;opacity:0;scale:var(--esc-brota,.86);transition:opacity var(--dur-pausado) var(--ease-nivel),scale var(--dur-pausado) var(--ease-nivel)}
.anillo--posado .anillo__halo{opacity:var(--halo-reposo);scale:1}
@media (hover:hover){.anillo--posado:hover .anillo__halo{opacity:var(--halo-roce);scale:1.16}}
.anillo--posado.anillo--abierto .anillo__halo,.esencia--encendida .anillo--posado .anillo__halo{opacity:var(--halo-roce);scale:1.16}
.esencia--encendida{--halo-roce:.6}
.anillo__luz{fill:none;stroke:#fff;stroke-linecap:round;stroke-width:4.4;stroke-dasharray:7 1000;stroke-dashoffset:7px;opacity:0}
.anillo__luz--ancha{stroke-width:6.4;stroke-dasharray:14 1000;stroke-dashoffset:14px;filter:blur(1px)}
.anillo--destella .anillo__luz{opacity:var(--destello-fuerza);animation:esencia-destello var(--destello-dur) var(--ease-nivel) both}
.anillo--destella .anillo__luz--ancha{opacity:calc(var(--destello-fuerza) * .32);animation:esencia-destello-ancha var(--destello-dur) var(--ease-nivel) both}
@keyframes esencia-destello{from{stroke-dashoffset:7px}to{stroke-dashoffset:calc(-1px * (var(--p) + 2))}}
@keyframes esencia-destello-ancha{from{stroke-dashoffset:14px}to{stroke-dashoffset:calc(-1px * (var(--p) + 3.5))}}
html.quieto .anillo__luz{opacity:0}
.anillo__brasa{position:absolute;top:0;left:0;width:var(--brasa,5px);height:var(--brasa,5px);margin:calc(var(--brasa,5px) / -2);border-radius:var(--radio-entero);background:#fff;box-shadow:0 0 3px 1px color-mix(in oklab,var(--tono) 55%,white),0 0 8px 2px var(--tono);opacity:0;translate:var(--bx,0px) var(--by,0px);pointer-events:none;transition:opacity var(--dur-corto) var(--ease-salida)}
.anillo__brasa--viva{opacity:1;transition:opacity var(--dur-toque) var(--ease-suave)}
.anillo__motas{position:absolute;inset:0;overflow:visible;pointer-events:none}
.anillo__dibujo{position:relative;width:calc(var(--anillo,2.75rem) * .43);height:calc(var(--anillo,2.75rem) * .43);color:var(--tono);filter:brightness(.78) saturate(1.2)}
.anillo--fiel .anillo__dibujo{color:var(--color-tinta-suave);filter:none}
.anillo__palabra{max-width:100%;font-size:var(--anillo-palabra,10px);text-align:center;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:var(--color-tinta-suave);white-space:nowrap}
.anillo--abierto .anillo__palabra,.esencia--encendida .anillo__palabra{color:var(--color-tinta)}
.anillo--abierto{transform:scale(var(--esc-hover,1.08))}
@media (hover:hover){.anillo:hover{transform:scale(var(--esc-hover,1.08))}}

/* ═══════════════════════ 12 · VUELO · PASO · MOTAS ═══════════════════════ */
/* El proyectil de Casa.vuela (useVuelo): X con curva de salida, Y con la de marcha */
.vuelo-casa{position:fixed;top:0;left:0;z-index:95;pointer-events:none}
.vuelo-casa__y{position:absolute;top:0;left:0}
.vuelo-casa__cuerpo{position:absolute;top:0;left:0;translate:-50% -50%;margin:0!important}
.aterriza{animation:aterriza var(--dur-pausado) var(--ease-muelle) both}
@keyframes aterriza{0%{scale:.92}45%{scale:1.06}100%{scale:1}}
/* La capa fija donde estalla la purpurina (Casa.estallido, Casa.vuela) */
.capa-motas{position:fixed;inset:0;z-index:96;pointer-events:none;overflow:visible}
.motas-capa{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:visible}
/* EL EMPUJON de reserva (Presupuesto.vue): la pregunta vieja se va por arriba y la nueva sube. */
.paso-entra{animation:paso-entra var(--dur-normal) var(--ease-curva) both}
.paso-entra--atras{animation-name:paso-entra-atras}
.paso-sale{animation:paso-sale var(--dur-corto) var(--ease-salida) both;pointer-events:none}
.paso-sale--atras{animation-name:paso-sale-atras}
@keyframes paso-entra{from{opacity:0;translate:0 6%}}
@keyframes paso-entra-atras{from{opacity:0;translate:0 -6%}}
@keyframes paso-sale{to{opacity:0;translate:0 -6%}}
@keyframes paso-sale-atras{to{opacity:0;translate:0 6%}}
/* La entrada escalonada (.stg de elige): 50 · 130 · 210 · 290 ms; el estado inicial vive solo en los fotogramas */
.stg{animation:escalonada var(--dur-normal) var(--ease-curva) both}
.stg-1{animation-delay:50ms}.stg-2{animation-delay:130ms}.stg-3{animation-delay:210ms}.stg-4{animation-delay:290ms}
@keyframes escalonada{from{opacity:0;translate:0 6px}}

@media (prefers-reduced-motion:reduce){
  .stg,.brota,.paso-entra,.paso-sale,.aterriza,.cuca__cuerpo{animation:none!important}
  .barra-viva__relleno,.barra-viva__punta{animation:none}
  .campo-objeto--etiqueta{rotate:0deg}
}