/* COPIA DE Mockups/presupuesto-vivo/_base.css · sin las @font-face: la web ya sirve
   Bricolage Grotesque Variable e Inter Variable desde resources/css/fuentes.css.
   Para sincronizar: copiar el original y volver a quitar ese bloque. */
/* ═══════════════════════════════════════════════════════════════════════════
   PRESUPUESTO VIVO · LOS CIMIENTOS DE LA CASA

   Fuentes locales, tokens (copiados de site/resources/css/app.css y del
   _base.css de eventos-profesionales), reset, la mota y el fondo de la casa.
   Ninguna pieza vive aqui: las piezas estan en _casa.css.

   ⚠️ Sin body{overflow-x:clip}: deja la ventana sin scroll vertical. Quien se
   sale recorta en SU seccion con overflow:clip (nunca hidden: rompe sticky).
   Fichero compartido: de solo lectura mientras se construyen las versiones.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --font-display:'Bricolage Grotesque Variable',ui-sans-serif,system-ui,sans-serif;
  --font-sans:'Inter Variable',ui-sans-serif,system-ui,sans-serif;

  /* ── Color · el chicle no ocupa superficie ── */
  --color-crema:oklch(0.977 0.019 73);          /* #FFF6EA · el papel */
  --color-nata:oklch(0.9876 0.0085 67.73);      /* #FFFAF5 · la ficha */
  --color-nube:oklch(0.962 0.03 6);             /* #FFEBEF */
  --color-niebla:oklch(0.94 0.048 8);           /* #FFDFE5 */
  --color-lila:oklch(0.887 0.044 306);          /* #E8D5F5 · solo fondo */
  --color-chicle:oklch(0.7075 0.2041 358.93);   /* #FF5D9E · el rosa de la marca */
  --color-brillo:oklch(0.7821 0.1469 353.08);   /* #FF8EC0 · halos y motas */
  --color-ambar:oklch(0.7671 0.1489 70);        /* #F0A02C · avisos, y solo avisos */
  --color-tinta:oklch(0.1804 0.0908 310.82);    /* #1E002E */
  --color-tinta-suave:oklch(0.5 0.039 5);       /* #775A60 */
  --color-agua:oklch(0.7171 0.1137 203.79);
  --color-noche:oklch(0.22 0.018 300);
  /* La casa no tiene rosa oscuro: el «chicle tinta» ES el chicle (regla dura). */
  --color-chicle-tinta:var(--color-chicle);

  /* ── Territorios de familia: solo discos, filetes y luces; el texto, en tinta ── */
  --terr-noche:oklch(0.6599 0.1411 300);
  --terr-oro:oklch(0.78 0.13 85);
  --terr-chicle:var(--color-chicle);
  --terr-mandarina:oklch(0.7887 0.1298 58);
  --terr-amapola:oklch(0.6594 0.2001 28);
  --terr-menta:oklch(0.8347 0.095 158);
  --terr-agua:var(--color-agua);
  --terr-cielo:oklch(0.8152 0.0851 235);

  /* ── Tipografia · los pasos ── */
  --text-display:clamp(3.84rem,2.52rem + 6.72vw,7.65rem);
  --text-titulo:clamp(3.04rem,2.16rem + 3.84vw,5.84rem);
  --text-titulo-corto:clamp(1.35rem,1.18rem + 1vw,2.14rem);
  --text-cifra:clamp(1.8rem,1.2375rem + 1.6vw,2.925rem);
  --text-rotulo:clamp(1.25rem,1.15rem + .5vw,1.5rem);
  --text-lead:clamp(1.125rem,1.05rem + .35vw,1.25rem);
  --text-cuerpo:clamp(1rem,.97rem + .15vw,1.0625rem);
  --text-corto:.9375rem; --text-micro:.8125rem; --text-nano:.75rem;
  --text-boton:1rem; --text-boton-sm:.9375rem;
  --espacio-titulo-bajada:.4em;
  --espacio-cabecera-contenido:clamp(1.75rem,3vw,2.75rem);

  /* ── Espaciado · siete pasos ── */
  --spacing-hilo:.25rem; --spacing-dedo:.5rem; --spacing-pieza:.75rem; --spacing-caja:1rem;
  --spacing-bloque:1.5rem; --spacing-grupo:2.5rem; --spacing-parada:4rem;

  /* ── Radios ── */
  --radio-chip:.5rem; --radio-control:.75rem; --radio-campo:1rem; --radio-pieza:1.25rem;
  --radio-tarjeta:1.75rem; --radio-entero:999px; --radio-panel:2.5rem; --radius-hoja:2.25rem;
  --radius-sm:.75rem;

  /* ── Movimiento (app.css) ── */
  --dur-toque:90ms; --dur-corto:200ms; --dur-normal:320ms; --dur-pausado:450ms; --dur-escena:600ms; --dur-vaciado:960ms; --dur-aro:750ms;
  --ease-curva:cubic-bezier(.16,1,.3,1);
  --ease-salida:cubic-bezier(.55,0,1,.45);
  --ease-marcha:cubic-bezier(.12,0,.39,0);
  --ease-muelle:cubic-bezier(.34,1.28,.64,1);
  --ease-suave:cubic-bezier(.33,1,.68,1);
  --ease-nivel:cubic-bezier(.45,.05,.35,1);
  --via-roce:2px; --via-paso:6px; --via-salto:12px; --via-viaje:28px;
  --esc-pulsa:.97; --esc-hover:1.08; --esc-zoom:1.05; --esc-nace:.94; --esc-brota:.86; --esc-surge:.6;
  --desenf-entrada:6px; --desenf-roce:3px;
  --turno-arranque:60ms; --turno-rapido:45ms; --turno-normal:80ms; --turno-lento:120ms;

  /* ── Sombras, cristal, pildora ── */
  --sombra:0 22px 60px -18px rgb(28 28 30 / .16);
  --sombra-corta:0 8px 22px -10px rgb(28 28 30 / .14);
  --sombra-muesca:drop-shadow(0 2px 4px rgb(28 28 30 / .1)) drop-shadow(0 10px 18px rgb(28 28 30 / .12));
  --difuso:rgb(255 255 255 / .42); --difuso-fuerte:rgb(255 255 255 / .55); --difuso-blur:16px;
  --difuso-hoja:rgb(255 255 255 / .92);
  --pildora-relleno:linear-gradient(180deg,#ffa6ce 0%,#f75899 100%);
  --pildora-letra:#fff;
  --pildora-letra-sombra:.037em .037em .024em rgb(175 175 175 / .68);
  --pildora-canto:inset 0 1px 0 rgb(255 255 255 / .55),0 8px 20px -8px rgb(247 88 153 / .75);
  --halo-elegido:0 0 24px rgb(255 255 255 / .55),0 4px 20px color-mix(in oklab,var(--color-chicle) 40%,transparent);
  --malla:linear-gradient(160deg,#fffcf7 0%,#fff8f0 35%,#fffbf3 70%,#fffcf7 100%);
  --velo-hoja:color-mix(in oklab,var(--color-tinta) 45%,transparent);
  --hoja-fondo:var(--color-crema);
  --aviso-fondo:color-mix(in oklab,var(--color-ambar) 14%,white);
  --aviso-filete:color-mix(in oklab,var(--color-ambar) 42%,transparent);
  --aviso-anillo:0 0 0 3px color-mix(in oklab,var(--color-ambar) 32%,transparent);
  --foco-anillo:0 0 0 3px color-mix(in oklab,var(--color-chicle) 22%,transparent);
}
@media (width < 40rem), (width < 64rem) and (height < 30rem){:root{--radio-panel:1.75rem}}
@media (width < 768px){:root{--difuso-blur:12px}}
/* En movil el movimiento se acorta, no se apaga (app.css) */
@media (width < 768px) and (prefers-reduced-motion:no-preference){
  :root{--via-viaje:12px;--via-salto:6px;--turno-normal:45ms;--turno-lento:80ms;--desenf-entrada:0px;--desenf-roce:0px}
}
/* Gama baja (deviceMemory <= 4 o saveData): lo pone Casa.gama() en <html> */
html.gama-baja{--difuso-blur:10px}

/* ═══════════════════════ BASE ═══════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--color-crema);scrollbar-gutter:stable}
body{margin:0;font-family:var(--font-sans);font-weight:350;font-size:var(--text-cuerpo);line-height:1.5;color:var(--color-tinta);background:var(--malla);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;margin:0;padding:0;cursor:pointer;text-align:inherit}
a{color:inherit}
p,h1,h2,h3,h4,ul,ol,figure,dl,dd,fieldset,legend{margin:0}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
ul,ol{padding:0;list-style:none}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
time,[data-numeric]{font-variant-numeric:tabular-nums}
/* Sin border-radius aqui: el anillo sigue el radio de cada pieza (una pildora no se vuelve cuadrada al enfocarla). */
:focus-visible{outline:2px solid var(--color-chicle);outline-offset:3px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ═══════════════════════ EL FONDO DE LA CASA ═══════════════════════
 * Crema con la malla, las cinco manchas de Blobs.vue con sus derivas y el velo.
 * Marcado: <div class="fondo-casa" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><b></b></div>
 * (Casa.fondo(el) lo escribe). Absoluto dentro de su pieza; --fijo para la ventana.
 * --velo: 0.32 por defecto; un formulario pide 0.5 (Presupuesto.vue). */
.fondo-casa{position:absolute;inset:0;z-index:0;overflow:clip;pointer-events:none;background:var(--malla);--velo:.32}
.fondo-casa--fijo{position:fixed}
.fondo-casa--formulario{--velo:.5}
.fondo-casa > i{position:absolute;display:block;aspect-ratio:1;border-radius:var(--radio-entero);background:radial-gradient(circle,var(--m) 0%,var(--m) 30%,transparent 70%);animation:var(--deriva) var(--ciclo) ease-in-out var(--retardo) infinite;will-change:transform}
.fondo-casa > i:nth-child(1){--m:var(--color-brillo);top:-12%;left:-16%;width:72vw;max-width:46rem;opacity:.5;--ciclo:23s;--retardo:0s;--deriva:deriva-a}
.fondo-casa > i:nth-child(2){--m:var(--color-chicle);top:24%;right:-16%;width:66vw;max-width:39rem;opacity:.36;--ciclo:29s;--retardo:-6s;--deriva:deriva-b}
.fondo-casa > i:nth-child(3){--m:var(--color-niebla);bottom:-16%;left:11%;width:72vw;max-width:42rem;opacity:.7;--ciclo:31s;--retardo:-14s;--deriva:deriva-c}
.fondo-casa > i:nth-child(4){--m:var(--color-lila);top:-12%;right:11%;width:58vw;max-width:31.5rem;opacity:.5;--ciclo:26s;--retardo:-9s;--deriva:deriva-b}
.fondo-casa > i:nth-child(5){--m:var(--color-nube);bottom:5%;right:19%;width:60vw;max-width:34.5rem;opacity:.55;--ciclo:37s;--retardo:-21s;--deriva:deriva-a}
.fondo-casa > b{position:absolute;inset:0;display:block;background-color:color-mix(in oklab,var(--hoja-fondo) calc(var(--velo) * 100%),transparent)}
/* Gama baja: blobs mas quietos (el doble de lentos y sin el quinto). */
html.gama-baja .fondo-casa > i{animation-duration:calc(var(--ciclo) * 2);will-change:auto}
html.gama-baja .fondo-casa > i:nth-child(5){display:none}
@keyframes deriva-a{0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}33%{transform:translate3d(6vw,-4vh,0) scale(1.14) rotate(8deg)}66%{transform:translate3d(-4vw,5vh,0) scale(.9) rotate(-6deg)}}
@keyframes deriva-b{0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}40%{transform:translate3d(-7vw,6vh,0) scale(.86) rotate(-12deg)}75%{transform:translate3d(3vw,-6vh,0) scale(1.2) rotate(5deg)}}
@keyframes deriva-c{0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}30%{transform:translate3d(5vw,4vh,0) scale(1.08) rotate(10deg)}70%{transform:translate3d(-6vw,-3vh,0) scale(.94) rotate(-9deg)}}

/* ═══════════════════════ LA MOTA · el vestuario (app.css) ═══════════════════════
 * Quien siembra decide DONDE (left/top en % o --x/--y en px, nunca % en translate),
 * cuantas y con que reloj. mota-vida: nace, brilla y se apaga. mota-flota (con
 * .mota--poso): purpurina que ya esta en el aire y se queda mientras Cuca este. */
.mota{position:absolute;top:0;left:0;width:var(--tam,3px);height:var(--tam,3px);border-radius:var(--radio-entero);background-color:var(--tono,var(--color-brillo));opacity:0;pointer-events:none;translate:calc(var(--x,0px) - var(--tam,3px) / 2) calc(var(--y,0px) - var(--tam,3px) / 2);rotate:var(--giro,0deg);filter:blur(var(--velo-mota,0px));animation:mota-vida var(--vida,700ms) var(--ease-nivel) var(--retardo,0ms) both,mota-titileo var(--titileo,350ms) var(--ease-suave) var(--retardo,0ms) var(--pulsos,1) both}
.mota--estrella{border-radius:0;clip-path:polygon(50% 0%,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0% 50%,39% 39%)}
.mota--poso{animation:mota-flota var(--flota,8000ms) var(--ease-nivel) var(--fase,0ms) infinite both,mota-titileo var(--titila,2600ms) var(--ease-suave) var(--fase,0ms) infinite both}
.motas-parada .mota{animation-play-state:paused}
@keyframes mota-vida{0%{opacity:0;transform:translate(0,0)}14%{opacity:1}52%{opacity:.82}100%{opacity:0;transform:translate(var(--dx,0px),var(--dy,-5px))}}
@keyframes mota-titileo{0%,100%{scale:.45}50%{scale:1.15}}
@keyframes mota-flota{0%{opacity:0;transform:translate(0,0)}18%{opacity:var(--pico,.5)}46%{transform:translate(calc(var(--dx,0px) * -.4),calc(var(--dy,-16px) * .5))}74%{opacity:var(--pico,.5)}100%{opacity:0;transform:translate(var(--dx,0px),var(--dy,-16px))}}

/* ═══════════════════════ QUIETO · para capturar ═══════════════════════
 * ?quieto pone html.quieto (lo hace _casa.js). Congela: nada anima ni transiciona,
 * y todo se pinta en su estado final. NO oculta capas: las motas se quedan
 * visibles en su sitio, a media deriva, para que la foto enseñe la purpurina.
 * Por eso ninguna pieza de la casa guarda su estado inicial fuera de sus fotogramas. */
html.quieto *,html.quieto *::before,html.quieto *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.quieto .mota{opacity:var(--pico,.85);scale:1;transform:translate(calc(var(--dx,0px) * .35),calc(var(--dy,0px) * .35))}

/* ═══════════════════════ MOVIMIENTO REDUCIDO (app.css) ═══════════════════════
 * Se redefinen los tokens: fundidos cortos, sin desplazamiento, sin escalas de
 * entrada, sin turnos. El pulsado (--dur-toque, --esc-pulsa) no se toca. Sin motas. */
@media (prefers-reduced-motion:reduce){
  :root{--dur-normal:var(--dur-corto);--dur-pausado:var(--dur-corto);--dur-escena:var(--dur-corto);--dur-vaciado:var(--dur-corto);--dur-aro:var(--dur-corto);
    --via-roce:0px;--via-paso:0px;--via-salto:0px;--via-viaje:0px;--esc-hover:1;--esc-zoom:1;--esc-nace:1;--esc-brota:1;--esc-surge:1;--desenf-entrada:0px;--desenf-roce:0px;
    --turno-arranque:0ms;--turno-rapido:0ms;--turno-normal:0ms;--turno-lento:0ms}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}
  .mota{display:none}
}