/* ==========================================================================
   Korvian Digital — /presupuesto
   Sólo lo que styles.css no trae: los bloques numerados del formulario y las
   tarjetas de opción. Todo lo demás (campos, botones, panel, pie) sale de
   styles.css, para que la página se lea como una más del sitio.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bloques numerados — el formulario se lee como los tres pasos de la home
   -------------------------------------------------------------------------- */
.bloque { margin-bottom: 34px; }
.bloque:last-of-type { margin-bottom: 26px; }

.bloque-cab {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.bloque-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--accent-soft);
}
.bloque-cab h2 {
  margin: 0;
  font-size: clamp(1.05rem, 1.9vw, 1.24rem);
  letter-spacing: -0.01em;
}
.bloque-pie {
  margin: 0 0 16px;
  font-size: 0.85rem;
  color: var(--muted);
}

.bloque + .bloque { padding-top: 30px; border-top: 1px solid var(--border); }

/* --------------------------------------------------------------------------
   Tarjetas de opción
   Son <input type="checkbox"> reales dentro de la <label>: así funcionan el
   teclado, el lector de pantalla y el formulario nativo sin una línea de JS.
   La casilla se oculta con `opacity: 0` y NO con `display: none`, que la
   sacaría del orden de tabulación y la dejaría inalcanzable con el teclado.
   -------------------------------------------------------------------------- */
.opciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}
/* En móvil NO se pasa a una columna: cinco tarjetas apiladas con descripción
   ocupaban 626px, casi una pantalla entera sólo para elegir. Se quedan en dos
   columnas, con el icono encima del título y sin descripción (ver el bloque
   de móvil del final del fichero). */

.opcion {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 0;
  padding: 15px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background-color: var(--bg);
  cursor: pointer;
  font-weight: 400;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease),
    transform 0.18s var(--ease-out);
}
.opcion:hover { border-color: rgba(255, 255, 255, 0.28); background-color: var(--surface-2); }
.opcion:active { transform: scale(0.99); }

.opcion-icono {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-soft);
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease),
    background 0.18s var(--ease);
}
/* Hueco a la derecha para la marca de seleccionado, que va en absoluto y si
   no se le reserva sitio se come la última palabra del título. */
.opcion-texto { min-width: 0; padding-right: 20px; }
.opcion-texto b {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.opcion-texto > span {
  display: block;
  margin-top: 3px;
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--muted);
}

/* La marca de seleccionado. Aparece en la esquina y no desplaza nada. */
.opcion-tick {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: transparent;
  transition: all 0.18s var(--ease);
}

.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.opcion:has(input:checked) {
  border-color: var(--accent);
  background-color: rgba(129, 140, 248, 0.14);
}
.opcion:has(input:checked) .opcion-icono {
  border-color: rgba(129, 140, 248, 0.45);
  background: rgba(129, 140, 248, 0.16);
  color: var(--accent-soft);
}
.opcion:has(input:checked) .opcion-tick {
  border-color: var(--accent);
  background: var(--accent);
  color: #0e1014;
}
/* El foco del teclado tiene que verse: la casilla real está oculta. */
.opcion:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Reserva para navegadores sin `:has()` (Firefox < 121, iOS < 15.4). Sin
   esto la tarjeta no cambiaría de aspecto al marcarla y parecería rota, así
   que presupuesto.js pone también la clase `is-on` a mano. */
.opcion.is-on { border-color: var(--accent); background-color: rgba(129, 140, 248, 0.14); }
.opcion.is-on .opcion-icono {
  border-color: rgba(129, 140, 248, 0.45);
  background: rgba(129, 140, 248, 0.16);
  color: var(--accent-soft);
}
.opcion.is-on .opcion-tick { border-color: var(--accent); background: var(--accent); color: #0e1014; }

/* --------------------------------------------------------------------------
   Campo que se despliega al marcar «Otra cosa»
   -------------------------------------------------------------------------- */
.desplegable {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s var(--ease-out), opacity 0.25s var(--ease),
    margin-top 0.3s var(--ease-out);
}
.desplegable.is-open { max-height: 180px; opacity: 1; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .desplegable { transition: none; } }

/* --------------------------------------------------------------------------
   Aviso de «con uno de los dos nos vale»
   -------------------------------------------------------------------------- */
.aviso-contacto {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.aviso-contacto svg { flex-shrink: 0; margin-top: 1px; color: var(--accent-soft); }

/* --------------------------------------------------------------------------
   Pantalla de «enviado»: sustituye al formulario entero
   -------------------------------------------------------------------------- */
.enviado { display: none; text-align: center; padding: 26px 8px 12px; }
.enviado.is-visible { display: block; }
.enviado-marca {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(74, 222, 128, 0.34);
  border-radius: 50%;
  background: rgba(74, 222, 128, 0.09);
  color: #4ade80;
}
.enviado h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 10px; }
.enviado p { color: var(--text-soft); max-width: 44ch; margin: 0 auto 8px; }

/* ==========================================================================
   MÓVIL — recortar el scroll sin quitar nada que haga falta para decidir

   La página medía 4.389px (5,2 pantallas de un iPhone) y el alto salía sobre
   todo de tres sitios: las opciones (626px), el bloque del mensaje (712px) y
   la columna lateral (717px). Aquí se aprieta cada uno.

   Criterio: se esconde lo que REPITE algo que ya está dicho a la vista (la
   pastilla «Presupuesto sin compromiso» ya promete lo mismo que la tercera
   frase del lead), nunca lo que hace falta para rellenar el formulario ni un
   dato de contacto. Todo lo que se oculta lleva la clase `solo-ancho`, así
   que se localiza de un vistazo.
   ========================================================================== */
@media (max-width: 620px) {

  .solo-ancho { display: none; }

  /* --- Portada de la página --------------------------------------------- */
  .pg-presupuesto .page-head { padding-top: 84px; padding-bottom: 26px; }
  .pg-presupuesto .page-head h1 { margin-bottom: 10px; }
  .pg-presupuesto .breadcrumb { margin-bottom: 12px; }

  /* --- Opciones: dos columnas, icono encima y sin descripción ------------
     El texto de apoyo se lee bien en escritorio, pero en una tarjeta de
     165px son cuatro líneas por opción y multiplica el alto por dos. El
     título más el icono ya identifican el servicio. */
  .opciones { gap: 10px; }
  .opcion {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 13px 14px;
  }
  .opcion-texto { padding-right: 18px; }
  .opcion-texto b { font-size: 0.88rem; }
  .opcion-texto > span { display: none; }
  .opcion-tick { top: 9px; right: 9px; }

  /* «Otra cosa» ocupa las dos columnas: ahí sí cabe en una fila. */
  .opcion--ancha { flex-direction: row; align-items: center; }

  /* --- Bloques y campos -------------------------------------------------- */
  .bloque { margin-bottom: 26px; }
  .bloque + .bloque { padding-top: 22px; }
  .bloque-pie { margin-bottom: 13px; font-size: 0.82rem; }
  .field { margin-bottom: 14px; }
  textarea { min-height: 108px; }

  /* Los dos desplegables van en paralelo: apilados costaban 64px de más.
     `styles.css` los pasa a una columna por debajo de 560px, así que hay que
     reponerlo aquí para esta fila concreta.
     El texto se aprieta a propósito: con el tamaño normal, «1.000 € – 3.000 €»
     no cabía en una columna de 165px menos los 38px de la flecha, y el valor
     elegido salía CORTADO. Se recorta el hueco de la flecha y se baja un
     punto la letra; comprobado con el valor más largo de los dos menús. */
  .field-row--siempre-dos { grid-template-columns: 1fr 1fr; gap: 12px; }
  .field-row--siempre-dos label { font-size: 0.8rem; white-space: nowrap; }
  .field-row--siempre-dos select {
    font-size: 0.82rem;
    padding-left: 10px;
    padding-right: 26px;
    background-position: right 7px center;
  }

  .aviso-contacto { margin-bottom: 14px; padding: 10px 12px; font-size: 0.8rem; }

  /* --- Columna lateral ---------------------------------------------------- */
  aside .panel { margin-top: 16px !important; }
  .panel--garantias .contact-item { padding: 12px 0; }
  .panel--garantias .contact-item h3 { font-size: 0.95rem; }
}

/* Por debajo de 390px los dos desplegables NO caben en paralelo y el
   navegador trunca el valor elegido sin previo aviso. Medido con la
   tipografía real del campo: a 360px el hueco útil son 87px y «Más de
   8.000 €» necesita 101. No se ve con `scrollWidth` —un <select> recorta sin
   desbordar— así que sólo aparece midiendo el texto o mirando la captura.
   Ahí se apilan: 64px de scroll de más son mejores que un valor a medias. */
@media (max-width: 389px) {
  .field-row--siempre-dos { grid-template-columns: 1fr; gap: 0; }
  .field-row--siempre-dos select { font-size: 0.92rem; padding-right: 38px; }
}

/* Pantallas muy estrechas (320px): con dos columnas el título de tres
   palabras se parte demasiado, así que ahí sí se vuelve a una columna, pero
   en fila compacta —icono al lado del título— que sigue siendo la mitad de
   alto que la tarjeta completa. */
@media (max-width: 359px) {
  .opciones { grid-template-columns: 1fr; }
  .opcion { flex-direction: row; align-items: center; }
}