/* ==========================================================================
   KORVIAN · CAPA METÁLICA DE /presupuesto
   Se carga DESPUÉS de presupuesto.css y sólo desde presupuesto.html. Cuelga
   entera de `body.pg-presupuesto`, igual que la de la portada cuelga de
   `body.skin-rs`: así no puede escaparse a las otras ocho páginas.

   Las recetas son LAS MISMAS que ya están aprobadas en `home-resend.css` y
   `home-metal.css`. No se reinventa nada: se traen al formulario para que
   quien llegue desde la portada no note el escalón. Se copian y no se
   reutilizan aquellas hojas porque cuelgan de `.skin-rs`, que arrastra
   además la paleta negra y la tipografía de titulares de Resend, y esta
   página tiene que seguir pareciéndose a `/servicios` y `/contacto`.

   LAS CUATRO REGLAS QUE VALEN PARA TODO EL FICHERO
   ------------------------------------------------
   1. **El bisel va en `box-shadow: inset`** —una línea clara arriba y una
      oscura abajo—, no en pseudo-elementos. Es lo que separa una pieza
      torneada de un rectángulo pintado.
   2. **La chapa va en `background-image`.** ⚠️ En `.form-card` y `.panel`,
      `background-color` y NUNCA el atajo `background`: `main.js` les pone
      `data-spot` y el atajo metería `background-image: none`, borrando la
      chapa. Lo mismo en `.opcion`, que lleva el filo que la recorre.
   3. 🔴 **NINGÚN HORIZONTE EN UNA PIEZA CON MÁS DE UNA LÍNEA DE TEXTO.**
      Ni siquiera arriba. Costó tres avisos del cliente en la portada: en una
      pieza de 80px, un corte al 15% cae justo bajo el canto redondeado y se
      lee como «una raya en medio, como si fuera a relucir pero sin relucir».
      El grosor lo dan el bisel y el reflejo que RECORRE la pieza. El corte
      seco sólo sobrevive en `--met-chapa-clara` (botón) y en `.bloque-num`,
      que son textos de UNA línea.
   4. **Nada atado a `:hover`.** Esta página se abre desde el móvil: lo que
      tenga que verse vivo va en animación continua. Un brillo de hover en
      táctil no se dispara nunca y la pieza se queda quieta y con la raya
      puesta, que es justo la queja de la portada.
   ========================================================================== */

body.pg-presupuesto {
  /* Bisel: la pareja de líneas que da grosor. */
  --met-alto: rgba(255, 255, 255, 0.20);
  --met-bajo: rgba(0, 0, 0, 0.55);

  /* Chapa lisa, sin corte, para piezas con texto (tarjetas de opción). */
  --met-chapa: linear-gradient(180deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.07) 26%,
    rgba(255, 255, 255, 0.028) 58%,
    rgba(255, 255, 255, 0.012) 80%,
    rgba(0, 0, 0, 0.10) 100%);

  /* Chapa de piezas bajas: botones, pastillas y campos. También lisa: en
     móvil un botón pasa a 342px de ancho y cualquier corte cruza la pantalla
     entera. */
  --met-chapa-baja: linear-gradient(180deg,
    rgba(255, 255, 255, 0.11) 0%,
    rgba(255, 255, 255, 0.05) 38%,
    rgba(255, 255, 255, 0.015) 70%,
    rgba(0, 0, 0, 0.10) 100%);

  /* Chapa clara del botón principal. El cuerpo es PLATA, no blanco puro:
     sobre blanco no se puede dibujar un reflejo porque no hay nada más
     claro que el fondo. Sobre plata, la banda blanca sí se ve pasar. */
  --met-chapa-clara: linear-gradient(180deg,
    #ffffff 0%,
    #eff3f5 34%,
    #dbe2e7 62%,
    #c6ced4 100%);

  /* Chapa base opaca. El metal NO puede ser translúcido: el campo de puntos
     de la cabecera se veía a través de los botones y salía moteado. */
  --met-cuerpo: #16181d;
  --met-cuerpo-alto: #1d2027;

  /* La banda de luz que cruza. Se reutiliza en botones y campos. */
  --met-brillo: linear-gradient(102deg,
    transparent 36%,
    rgba(255, 255, 255, 0.28) 46%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0.28) 54%,
    transparent 64%);
}

/* --------------------------------------------------------------------------
   P1. Cabecera y pie — el chasis que enmarca la página
   `.site-header` tiene los dos pseudo-elementos pillados (el fondo
   desenfocado y la barra de progreso de lectura): todo en `box-shadow`.
   -------------------------------------------------------------------------- */
body.pg-presupuesto .site-header {
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.09);
}
body.pg-presupuesto .site-header.is-scrolled {
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.16),
    0 10px 30px rgba(0, 0, 0, 0.55);
}
body.pg-presupuesto .site-footer {
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
/* Raya de luz centrada sobre el canto del pie. Con desvanecido SIMÉTRICO:
   apagada por un solo lado, en una fila ancha se lee como una raya cortada a
   media pantalla y no como un filo. */
body.pg-presupuesto .site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232, 232, 232, 0.20) 30%,
    rgba(143, 143, 143, 0.67) 50%,
    rgba(232, 232, 232, 0.20) 70%,
    transparent 100%);
}

/* --------------------------------------------------------------------------
   P2. Botones, con el reflejo que los recorre
   El barrido cruza en ~1,3s y descansa el resto del ciclo: un reflejo que va
   y viene sin parar marea y parece un banner. Los dos van desfasados para
   que la luz recorra la pareja en vez de destellar a la vez.
   -------------------------------------------------------------------------- */
@keyframes pr-reflejo {
  0%, 4%    { transform: translateX(-130%); }
  22%, 100% { transform: translateX(130%); }
}

body.pg-presupuesto .btn--primary,
body.pg-presupuesto .btn--primary:hover {
  background-color: #fafafa;
  background-image: var(--met-chapa-clara);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #07090a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 6px 18px rgba(0, 0, 0, 0.5);
}
body.pg-presupuesto .btn--primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.34),
    0 8px 26px rgba(0, 0, 0, 0.6),
    0 0 26px rgba(226, 240, 246, 0.30);
}

body.pg-presupuesto .btn--ghost {
  background-color: var(--met-cuerpo);
  background-image: var(--met-chapa-baja);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 var(--met-alto),
    inset 0 -1px 0 var(--met-bajo);
}
body.pg-presupuesto .btn--ghost:hover {
  background-color: var(--met-cuerpo-alto);
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 var(--met-bajo),
    0 0 22px rgba(226, 240, 246, 0.14);
}

/* ⚠️ El reflejo pasa POR DEBAJO de las letras. Con la banda por delante, al
   cruzar el botón principal blanquea el texto negro y «Pedir presupuesto»
   queda ilegible durante el barrido: es un problema de contraste real, no un
   matiz. `isolation: isolate` crea el contexto y el `z-index: -1` deja la
   banda entre la chapa y el texto. */
body.pg-presupuesto .btn--primary,
body.pg-presupuesto .btn--ghost { isolation: isolate; }

/* `.btn` ya trae `position: relative` y `overflow: hidden`, así que la banda
   se recorta sola contra el radio del botón. */
body.pg-presupuesto .btn--ghost::before {
  z-index: -1;
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--met-brillo);
  transform: translateX(-130%);
  transition: none;
  animation: pr-reflejo 6s ease-in-out infinite 1.2s;
}
/* El destello del principal ya existía en `styles.css` atado al hover: se le
   quita la transición y pasa al mismo ciclo continuo. */
body.pg-presupuesto .btn--primary::after {
  z-index: -1;
  background: linear-gradient(102deg,
    transparent 34%,
    rgba(255, 255, 255, 0.55) 44%,
    rgba(255, 255, 255, 0.98) 50%,
    rgba(255, 255, 255, 0.55) 56%,
    transparent 66%);
  transform: translateX(-130%);
  transition: none;
  animation: pr-reflejo 6s ease-in-out infinite;
}
/* El botón de enviar es el que importa: reluce algo más a menudo y con la
   luz llegando más lejos, para que la vista vuelva a él. */
body.pg-presupuesto #pr-enviar::after { animation-duration: 4.6s; }

/* --------------------------------------------------------------------------
   P3. Los números de bloque, en cromo
   Son «01», «02» y «03»: UNA línea. Éste es el único sitio de la página
   donde el horizonte a media altura está permitido, y es justo donde luce.
   `background-clip: text` en un titular de tres líneas dejaría el corte
   dentro de una sola y las otras planas; en dos cifras, no.
   -------------------------------------------------------------------------- */
body.pg-presupuesto .bloque-num {
  /* 🔴 Paleta ALTA a propósito. La primera versión bajaba a #6f787f en el
     tramo del suelo y, a 11px sobre fondo casi negro, la mitad de abajo de
     cada cifra desaparecía: se leía «01» a medias. Es el mismo límite que
     apareció con el logo cromado en la cabecera, donde tampoco se puede
     bajar de #4c5459 a 30px. El horizonte se conserva —es lo que lee como
     metal— pero entre plata y plata, no entre plata y gris oscuro. */
  background-image: linear-gradient(180deg,
    #ffffff 0%,
    #eef3f6 44%,
    #a8b3ba 50%,
    #e2e9ed 76%,
    #b6c0c7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  /* `-webkit-text-fill-color` además de `color`: sin él, Safari pinta el
     texto con el color heredado y el degradado no se ve. */
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
  /* Un punto más grande que en la hoja base: a 0,72rem el corte del
     horizonte cae entre dos filas de píxeles y no se aprecia. */
  font-size: 0.78rem;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.75));
}

/* --------------------------------------------------------------------------
   P4. Las tarjetas de opción: el filo que las recorre
   Mismo recurso que los cajones de la portada. La raya NO puede ir en
   `::before`/`::after` allí porque `data-spot` los ocupa; aquí `.opcion` sí
   los tiene libres, pero se mantiene la técnica de capas de fondo para que
   el efecto sea idéntico al de la portada y para dejar los pseudo-elementos
   disponibles.

   ⚠️ LOS PORCENTAJES DE `background-position` NO SON UNA TRASLACIÓN.
   Alinean proporcionalmente: `pos = (anchoCaja − anchoImagen) · P / 100`.
   Con `background-size: 62%` el recorrido útil es sólo el 38% del ancho, así
   que para que la raya SALGA de verdad por los dos lados hace falta
     · por la derecha    P >= 100 / (1 − S)      → con 62%: 263%
     · por la izquierda  P <= −S / (1 − S) · 100 → con 62%: −163%
   De ahí −180% y 280%. Si algún día se cambia el 62%, hay que recalcular los
   dos extremos o la raya se queda clavada dentro de la caja —el fallo que
   estuvo días en producción en la portada—.
   -------------------------------------------------------------------------- */
body.pg-presupuesto .opcion {
  background-repeat: no-repeat;
  background-image:
    /* halo */
    radial-gradient(closest-side, rgba(226, 240, 246, 0.42), transparent),
    /* raya */
    linear-gradient(90deg,
      transparent 0%,
      rgba(232, 232, 232, 0.22) 26%,
      rgba(255, 255, 255, 0.95) 50%,
      rgba(180, 180, 180, 0.65) 70%,
      transparent 100%),
    /* chapa */
    var(--met-chapa);
  background-size: 62% 14px, 62% 1px, 100% 100%;
  background-position: -180% -6px, -180% 0, 0 0;
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 1px 0 var(--met-alto),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
  animation: pr-filo 9s ease-in-out infinite;
}
@keyframes pr-filo {
  0%        { background-position: -180% -6px, -180% 0, 0 0; }
  55%, 100% { background-position: 280% -6px, 280% 0, 0 0; }
}

/* Escalonado: si las cinco relucen a la vez parece un parpadeo de la
   pantalla; escalonadas, parece una luz recorriendo la página. */
body.pg-presupuesto .opciones > .opcion:nth-child(2) { animation-delay: 1.1s; }
body.pg-presupuesto .opciones > .opcion:nth-child(3) { animation-delay: 2.2s; }
body.pg-presupuesto .opciones > .opcion:nth-child(4) { animation-delay: 3.3s; }
body.pg-presupuesto .opciones > .opcion:nth-child(5) { animation-delay: 4.4s; }

/* Marcada: el cuerpo se tiñe de marca pero el filo y el bisel se quedan.
   La especificidad tiene que igualar a la de `presupuesto.css`, que usa
   `.opcion:has(input:checked)`. */
body.pg-presupuesto .opcion:has(input:checked),
body.pg-presupuesto .opcion.is-on {
  background-color: rgba(129, 140, 248, 0.15);
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(129, 140, 248, 0.28),
    0 6px 22px rgba(79, 70, 229, 0.20);
}

/* --------------------------------------------------------------------------
   P5. Las pastillas de icono, en cromado
   Cuatro capas, y las cuatro hacen falta:
     1. Un `conic-gradient` en grises oscuros: el reflejo del entorno dando
        la VUELTA a la pieza. Eso es lo que el ojo lee como metal, no un
        degradado lineal.
     2. Encima, el reflejo del cielo (claro arriba, negro abajo) en `overlay`,
        que deja el cónico asomando.
     3. Dos `inset` de 1px: el bisel. Sin esto la pastilla parece pintada.
     4. Una banda de luz en diagonal (`::before`) en `plus-lighter`, que al
        cruzar enciende TAMBIÉN el dibujo del icono.

   `isolation: isolate` es obligatorio: sin él, el `plus-lighter` se mezcla
   con el fondo de la tarjeta y suelta un fogonazo en todo el cajón.
   -------------------------------------------------------------------------- */
body.pg-presupuesto .opcion-icono,
body.pg-presupuesto .ci-icon,
body.pg-presupuesto .enviado-marca {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.10);
  color: #eef3f5;
  background-color: #2f3438;
  background-image:
    linear-gradient(163deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.02) 42%,
      rgba(0, 0, 0, 0.55) 100%),
    conic-gradient(from 208deg at 34% 24%,
      #3a3f42 0deg, #7e878c 52deg, #2b2f31 104deg, #656d71 152deg,
      #26292b 206deg, #767f84 262deg, #33383a 312deg, #3a3f42 360deg);
  background-blend-mode: overlay, normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 2px 12px rgba(0, 0, 0, 0.5);
  transition:
    border-color 0.3s var(--ease),
    color 0.3s var(--ease),
    box-shadow 0.35s var(--ease),
    transform 0.35s var(--ease-out);
}

/* La banda sobresale por los cuatro lados (`inset: -50%`) porque va
   inclinada: si midiera justo la pastilla, entraría y saldría en pico. */
body.pg-presupuesto .opcion-icono::before,
body.pg-presupuesto .ci-icon::before,
body.pg-presupuesto .enviado-marca::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(102deg,
    transparent 36%,
    rgba(255, 255, 255, 0.30) 46%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.30) 54%,
    transparent 64%);
  mix-blend-mode: plus-lighter;
  transform: translateX(-115%);
  animation: pr-cromo 9s ease-in-out infinite;
}
@keyframes pr-cromo {
  0%, 6%    { transform: translateX(-115%); }
  30%, 100% { transform: translateX(115%); }
}

/* El punto de luz fijo de la esquina: lo que convence al ojo de que la
   superficie es curva y no plana. */
body.pg-presupuesto .opcion-icono::after,
body.pg-presupuesto .ci-icon::after,
body.pg-presupuesto .enviado-marca::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(60% 45% at 26% 8%,
    rgba(255, 255, 255, 0.34), transparent 70%);
}

/* El icono, grabado en la chapa: sombra negra de 1px debajo (el hueco) y un
   halo blanco muy tenue (la luz que rebota en el filo del grabado). */
body.pg-presupuesto .opcion-icono svg,
body.pg-presupuesto .ci-icon svg,
body.pg-presupuesto .enviado-marca svg {
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.22));
}

/* 🔴 El retardo va en el `::before`, que es quien lleva la animación. Puesto
   en el padre no hace NADA y las cinco pastillas destellan a la vez: se ve
   en las capturas, no en el código. */
body.pg-presupuesto .opciones > .opcion:nth-child(2) .opcion-icono::before { animation-delay: 1.1s; }
body.pg-presupuesto .opciones > .opcion:nth-child(3) .opcion-icono::before { animation-delay: 2.2s; }
body.pg-presupuesto .opciones > .opcion:nth-child(4) .opcion-icono::before { animation-delay: 3.3s; }
body.pg-presupuesto .opciones > .opcion:nth-child(5) .opcion-icono::before { animation-delay: 4.4s; }
body.pg-presupuesto .panel .contact-item:nth-child(3) .ci-icon::before { animation-delay: 1.5s; }
body.pg-presupuesto .panel .contact-item:nth-child(4) .ci-icon::before { animation-delay: 3s; }

/* Marcada: la pastilla se pule y se tiñe de marca, pero sigue siendo metal. */
body.pg-presupuesto .opcion:has(input:checked) .opcion-icono,
body.pg-presupuesto .opcion.is-on .opcion-icono {
  border-color: rgba(165, 180, 252, 0.42);
  color: #eef2ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 4px 18px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(129, 140, 248, 0.34);
}

/* La marca de seleccionado: pieza pequeña, chapa clara y bisel. */
body.pg-presupuesto .opcion:has(input:checked) .opcion-tick,
body.pg-presupuesto .opcion.is-on .opcion-tick {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: #c7cdfb;
  background-image: linear-gradient(180deg, #ffffff 0%, #cdd3fc 52%, #8f9af0 100%);
  color: #14163a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 8px rgba(79, 70, 229, 0.45);
}

/* La pastilla de «enviado» es verde, no plata: es la única pieza de la
   página que confirma algo y el color hace la mitad del trabajo. */
body.pg-presupuesto .enviado-marca {
  background-color: #1c3a2a;
  background-image:
    linear-gradient(163deg,
      rgba(255, 255, 255, 0.26) 0%,
      rgba(255, 255, 255, 0.03) 42%,
      rgba(0, 0, 0, 0.5) 100%),
    conic-gradient(from 208deg at 34% 24%,
      #1f4433 0deg, #56a67c 52deg, #17392a 104deg, #3f8663 152deg,
      #133024 206deg, #4f9d75 262deg, #1c4132 312deg, #1f4433 360deg);
  border-color: rgba(134, 239, 172, 0.35);
  color: #d7fbe6;
}

/* --------------------------------------------------------------------------
   P6. Superficies grandes: tarjeta del formulario, paneles y pasos
   ⚠️ `.form-card` y `.panel` llevan `data-spot`: sus dos pseudo-elementos
   están ocupados por el foco que sigue al dedo. Aquí, sólo `box-shadow` y
   `background-color`.
   -------------------------------------------------------------------------- */
body.pg-presupuesto .form-card,
body.pg-presupuesto .panel {
  background-color: var(--surface);
  border-color: rgba(255, 255, 255, 0.11);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 24px 60px -34px rgba(0, 0, 0, 0.9);
}

/* El foco que sigue al puntero (y al dedo) era violeta; en blanco es
   exactamente el brillo de chapa que se busca. */
body.pg-presupuesto [data-spot]::before {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.09), transparent 62%);
}
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  body.pg-presupuesto [data-spot]::after {
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%),
      rgba(255, 255, 255, 0.65), transparent 60%);
  }
}

body.pg-presupuesto .step {
  background-color: var(--surface-2);
  background-image: var(--met-chapa-baja);
  border-color: rgba(255, 255, 255, 0.11);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

body.pg-presupuesto .aviso-contacto {
  background-color: #15171c;
  background-image: var(--met-chapa-baja);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------------------
   P7. Campos: hueco fresado, no rectángulo pintado
   El bisel va al revés que en las piezas salientes —oscuro arriba, claro
   abajo—, que es lo que lee el ojo como hundido.
   -------------------------------------------------------------------------- */
body.pg-presupuesto input[type="text"],
body.pg-presupuesto input[type="email"],
body.pg-presupuesto input[type="tel"],
body.pg-presupuesto input[type="password"],
body.pg-presupuesto select,
body.pg-presupuesto textarea {
  background-color: #0c0d11;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
body.pg-presupuesto input:focus,
body.pg-presupuesto select:focus,
body.pg-presupuesto textarea:focus {
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.6),
    0 0 0 3px var(--accent-dim),
    0 0 18px rgba(129, 140, 248, 0.18);
}

/* --------------------------------------------------------------------------
   P8. Los dos estados que no se ven navegando y hay que dejar bien
   -------------------------------------------------------------------------- */

/* Sin `:hover` no pasa nada: todo lo que reluce va en animación continua.
   Pero en un puntero fino la tarjeta sí se levanta un pelo, que es el gesto
   que ya hace el resto del sitio. */
@media (hover: hover) and (pointer: fine) {
  body.pg-presupuesto .opcion:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.28);
  }
  body.pg-presupuesto .opcion:hover .opcion-icono {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      inset 0 -1px 0 rgba(0, 0, 0, 0.6),
      0 6px 20px rgba(0, 0, 0, 0.55),
      0 0 22px rgba(226, 240, 246, 0.18);
  }
}

/* Ahorro de batería: `pr-filo` anima `background-position`, que NO se puede
   componer en la GPU y obliga a repintar la tarjeta en cada fotograma. Con
   cinco tarjetas girando sin parar durante toda la visita, en un teléfono de
   gama media eso se nota. `presupuesto.js` marca con `esta-lejos` lo que no
   está en pantalla y aquí se para.

   🔴 Al revés NO vale: la pausa la PONE el script, nunca la quita. Si se
   escribiera «pausado por defecto, el script lo arranca», bastaría con que
   el JS no llegara para que la página se quedara con todo congelado. Esto
   es lo mismo que hace la clase `.js` del `<head>` con las animaciones de
   entrada: si no hay script, no se toca nada. */
body.pg-presupuesto .opcion.esta-lejos,
body.pg-presupuesto .esta-lejos .opcion-icono::before,
body.pg-presupuesto .esta-lejos .ci-icon::before,
body.pg-presupuesto .esta-lejos .btn--ghost::before,
body.pg-presupuesto .esta-lejos .btn--primary::after,
body.pg-presupuesto .btn.esta-lejos::before,
body.pg-presupuesto .btn.esta-lejos::after {
  animation-play-state: paused;
}

/* 🔴 Quien pide menos movimiento no pide MENOS CONTENIDO: se paran los
   barridos y se dejan las piezas en su posición de reposo, con el metal
   intacto. Nada puede quedarse invisible ni a medio recorrido. */
@media (prefers-reduced-motion: reduce) {
  body.pg-presupuesto .opcion,
  body.pg-presupuesto .opcion-icono::before,
  body.pg-presupuesto .ci-icon::before,
  body.pg-presupuesto .enviado-marca::before,
  body.pg-presupuesto .btn--ghost::before,
  body.pg-presupuesto .btn--primary::after {
    animation: none;
  }
  /* La raya, fuera de la caja por la izquierda: en reposo no se ve, que es
     justo lo que se quiere. Si se dejara el valor por defecto quedaría
     clavada dentro de la tarjeta y volveríamos a la queja de la portada. */
  body.pg-presupuesto .opcion { background-position: -180% -6px, -180% 0, 0 0; }
  body.pg-presupuesto .opcion-icono::before,
  body.pg-presupuesto .ci-icon::before,
  body.pg-presupuesto .enviado-marca::before { transform: translateX(-115%); }
  body.pg-presupuesto .btn--ghost::before,
  body.pg-presupuesto .btn--primary::after { transform: translateX(-130%); }
}