/* css/presupuesto.css — formulario de presupuesto.
   Hereda estética de las fichas de modelo: cards visuales por color,
   tipografía mono para eyebrows/labels-utilitarios, generous whitespace.
*/

/* ============================================================
   PAGE LAYOUT
   ============================================================ */

main.presupuesto-page {
  background: var(--bg-primary);
  color: var(--fg-primary);
}

/* === HERO compacto === */

.presupuesto-hero {
  padding: calc(var(--topbar-height, 72px) + clamp(32px, 5vw, 72px)) 0 clamp(40px, 7vw, 64px);
  /* Sin fondo sólido (hereda transparente de main) para que los polígonos
     el hero herede el fondo de la página. */
  background: transparent;
}
@media (max-width: 768px) {
  .presupuesto-hero {
    padding: calc(var(--topbar-height, 64px) + var(--space-6)) 0 var(--space-8);
  }
}

.presupuesto-hero-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-blue);
  margin-bottom: var(--space-4);
}

.presupuesto-hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  color: var(--fg-primary);
  max-width: 18ch;
}

.presupuesto-hero-subtitle {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 60ch;
  margin: 0;
}

/* ============================================================
   LAYOUT 60/40
   ============================================================ */

.presupuesto-body {
  padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 9vw, 120px);
}

.presupuesto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 64px);
}

@media (min-width: 1024px) {
  .presupuesto-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(48px, 5vw, 80px);
  }
}

/* PASOS EN MÓVIL — tira condensada encima del formulario.
   Solo por debajo de 1024px, que es justo donde la columna de confianza
   deja de ir al lado y cae debajo del botón de enviar. Por encima se oculta
   (la tarjeta completa de la derecha ya cumple) y, para no repetir, ahí abajo
   se oculta la PRIMERA tarjeta del sidebar —la de los mismos tres pasos—. */
.presupuesto-pasos-movil {
  list-style: none;
  margin: 0 0 clamp(28px, 4vw, 40px);
  padding: 18px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 12px;
}
.presupuesto-pasos-movil li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--fg-primary);
}
.presupuesto-pasos-movil-num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-blue);
  min-width: 1.4em;
}
@media (min-width: 1024px) {
  .presupuesto-pasos-movil { display: none; }
}
@media (max-width: 1023px) {
  .presupuesto-sidebar .presupuesto-sidebar-card:first-child { display: none; }
}

/* ============================================================
   FORMULARIO (col izquierda)
   ============================================================ */

.presupuesto-form {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 56px);
  /* Card opaca para que los polígonos flotantes de fondo NO atraviesen
     el formulario (legibilidad de inputs y labels). El aside derecho
     SÍ deja ver los polígonos. */
  background: var(--bg-primary);
  padding: clamp(24px, 3.5vw, 44px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 18px 48px -24px rgba(10, 10, 10, 0.10);
}

.presupuesto-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.presupuesto-fieldset-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.presupuesto-fieldset-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--fg-primary);
}

.presupuesto-fieldset-subtitle {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  color: var(--fg-muted);
}

/* === Campos === */

.presupuesto-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .presupuesto-row.is-2col {
    grid-template-columns: 1fr 1fr;
  }
  .presupuesto-row.is-3col {
    grid-template-columns: repeat(3, 1fr);
  }
}

.presupuesto-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.presupuesto-label {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-primary);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.presupuesto-label .req {
  color: var(--brand-blue);
}

.presupuesto-help {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-muted);
  margin-top: -2px;
  line-height: 1.45;
}

.presupuesto-input,
.presupuesto-select,
.presupuesto-textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 16px;
  background: var(--bg-primary);
  color: var(--fg-primary);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}

.presupuesto-input::placeholder,
.presupuesto-textarea::placeholder {
  color: var(--fg-subtle);
}

.presupuesto-input:hover,
.presupuesto-select:hover,
.presupuesto-textarea:hover {
  border-color: var(--fg-subtle);
}

.presupuesto-input:focus,
.presupuesto-select:focus,
.presupuesto-textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 18%, transparent);
}

.presupuesto-textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.55;
}

/* Estado de error */
.presupuesto-field.has-error .presupuesto-input,
.presupuesto-field.has-error .presupuesto-select,
.presupuesto-field.has-error .presupuesto-textarea {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent);
}

.presupuesto-field-error {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--danger);
  margin: 0;
  display: none;
}

.presupuesto-field.has-error .presupuesto-field-error {
  display: block;
}

/* ============================================================
   MODELO PICKER — cards visuales
   ============================================================ */

.modelo-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
/* Son cinco opciones en una rejilla de dos: la quinta se quedaba sola en
   su fila, estrecha, con "No estoy seguro / ayúdame a elegir" partido en
   cuatro líneas. Ocupando el ancho entero se lee de un vistazo y además
   se distingue de las cuatro que sí son un nivel. */
.modelo-pick.modelo-pick-unsure { grid-column: 1 / -1; }

@media (min-width: 720px) {
  .modelo-picker {
    grid-template-columns: repeat(4, 1fr);
  }
  .modelo-picker .modelo-pick-unsure {
    grid-column: 1 / -1;
  }
}

.modelo-pick {
  position: relative;
  cursor: pointer;
  display: block;
}

.modelo-pick input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.modelo-pick-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-4);
  border-radius: 2px;
  background: var(--bg-soft);
  border: 2px solid transparent;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
  min-height: 100px;
}

.modelo-pick-card .code {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
}

.modelo-pick-card .name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--fg-primary);
}

.modelo-pick-card .desc {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg-muted);
  margin-top: var(--space-1);
}

.modelo-pick:hover .modelo-pick-card {
  background: #FFFFFF;
  border-color: var(--border);
}

/* Selected — pintamos con el color del modelo */
.modelo-pick input[type="radio"]:checked + .modelo-pick-card {
  background: var(--pick-color, var(--brand-blue));
  border-color: var(--pick-color-strong, var(--brand-blue));
  color: #FFFFFF;
}

.modelo-pick input[type="radio"]:checked + .modelo-pick-card .code,
.modelo-pick input[type="radio"]:checked + .modelo-pick-card .name,
.modelo-pick input[type="radio"]:checked + .modelo-pick-card .desc {
  color: #FFFFFF;
}

/* A6 (yellow) → texto oscuro al estar seleccionado */
.modelo-pick.is-raid input[type="radio"]:checked + .modelo-pick-card,
.modelo-pick.is-raid input[type="radio"]:checked + .modelo-pick-card .code,
.modelo-pick.is-raid input[type="radio"]:checked + .modelo-pick-card .name,
.modelo-pick.is-raid input[type="radio"]:checked + .modelo-pick-card .desc {
  color: var(--fg-primary);
}

/* Focus visible */
.modelo-pick input[type="radio"]:focus-visible + .modelo-pick-card {
  outline: 2px solid var(--fg-primary);
  outline-offset: 2px;
}

/* Asignación de color a cada card */
.modelo-pick.is-ruta { --pick-color: var(--prep-ruta); --pick-color-strong: var(--prep-ruta-strong); }
.modelo-pick.is-travesia { --pick-color: var(--prep-travesia); --pick-color-strong: var(--prep-travesia-strong); }
.modelo-pick.is-raid { --pick-color: var(--prep-raid); --pick-color-strong: var(--prep-raid-strong); }
.modelo-pick.is-uso-diario { --pick-color: var(--prep-uso-diario); --pick-color-strong: var(--prep-uso-diario-strong); }

.modelo-pick.modelo-pick-unsure .modelo-pick-card {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--fg-muted);
  font-family: var(--font-sans);
  font-size: 14px;
  min-height: auto;
  padding: var(--space-4) var(--space-5);
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.modelo-pick.modelo-pick-unsure input[type="radio"]:checked + .modelo-pick-card {
  background: var(--fg-primary);
  border: 2px solid var(--fg-primary);
  border-style: solid;
  color: var(--bg-primary);
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(10,10,10,0.22);
}

/* ============================================================
   DIMENSIONES — split largo + ancho con unidad cm
   ============================================================ */

.presupuesto-dim-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
@media (max-width: 520px) {
  .presupuesto-dim-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .presupuesto-dim-sep { display: none; }
}
.presupuesto-dim-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.presupuesto-dim-sublabel {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: 600;
}
.presupuesto-dim-input {
  position: relative;
  display: flex;
  align-items: center;
}
.presupuesto-dim-input .presupuesto-input {
  padding-right: 44px;
  width: 100%;
  font-feature-settings: 'tnum' on;
}
.presupuesto-dim-unit {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  font-weight: 600;
  pointer-events: none;
}
.presupuesto-dim-range {
  font-size: 11px;
  color: var(--fg-subtle);
  margin: 0;
  font-feature-settings: 'tnum' on;
}
.presupuesto-dim-sep {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--fg-subtle);
  align-self: center;
  padding-bottom: 10px;
  user-select: none;
}

/* ============================================================
   FILE UPLOAD — drop zone
   ============================================================ */

.presupuesto-dropzone {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: 2px;
  padding: clamp(24px, 4vw, 36px);
  text-align: center;
  background: var(--bg-soft);
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.presupuesto-dropzone.is-dragover {
  border-color: var(--brand-blue);
  background: color-mix(in srgb, var(--brand-blue) 6%, var(--bg-soft));
}

.presupuesto-dropzone-icon {
  width: 32px;
  height: 32px;
  color: var(--fg-subtle);
  margin: 0 auto var(--space-3);
  display: block;
}

.presupuesto-dropzone-text {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--fg-muted);
  margin: 0 0 var(--space-1);
}

.presupuesto-dropzone-btn {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.presupuesto-dropzone-btn:hover {
  color: #c81857;
}

.presupuesto-dropzone-formats {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-subtle);
  margin: var(--space-3) 0 0;
}

.presupuesto-dropzone input[type="file"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  inset: 0;
}

/* File preview cuando hay archivo */
.presupuesto-file-preview {
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.presupuesto-file-preview.is-shown {
  display: flex;
}

.presupuesto-file-preview-icon {
  width: 28px;
  height: 28px;
  color: var(--brand-blue);
  flex-shrink: 0;
}

.presupuesto-file-preview-info {
  flex: 1;
  min-width: 0;
}

.presupuesto-file-preview-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-primary);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presupuesto-file-preview-size {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  margin: 2px 0 0;
}

.presupuesto-file-preview-remove {
  background: none;
  border: 0;
  padding: var(--space-2);
  cursor: pointer;
  color: var(--fg-muted);
  border-radius: 2px;
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.presupuesto-file-preview-remove:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

/* Cuando está mostrado el preview, ocultamos el dropzone */
.presupuesto-dropzone-wrapper.has-file .presupuesto-dropzone {
  display: none;
}

/* ============================================================
   TEXTAREA + COUNTER
   ============================================================ */

.presupuesto-counter {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
  align-self: flex-end;
}

.presupuesto-counter.is-warning {
  color: var(--warning);
}

.presupuesto-counter.is-danger {
  color: var(--danger);
}

/* ============================================================
   RGPD + SUBMIT
   ============================================================ */

.presupuesto-rgpd {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}

.presupuesto-rgpd input[type="checkbox"] {
  width: 24px;
  height: 24px;
  accent-color: var(--brand-blue);
  margin-top: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.presupuesto-rgpd-label {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-muted);
  cursor: pointer;
}

.presupuesto-rgpd-label a {
  color: var(--fg-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.presupuesto-rgpd.has-error .presupuesto-rgpd-label {
  color: var(--danger);
}

.presupuesto-submit-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.presupuesto-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 16px 32px;
  border-radius: 2px;
  border: 0;
  background: var(--brand-blue);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(29, 101, 174, 0.32);
  transition:
    transform var(--transition-base),
    background var(--transition-base),
    box-shadow var(--transition-base);
}

.presupuesto-submit:hover {
  background: #c81857;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(29, 101, 174, 0.42);
}

.presupuesto-submit:disabled,
.presupuesto-submit.is-loading {
  background: var(--fg-subtle);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.presupuesto-submit-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: none;
}

.presupuesto-submit.is-loading .presupuesto-submit-spinner {
  display: inline-block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .presupuesto-submit-spinner {
    animation: none;
  }
  .presupuesto-submit:hover {
    transform: none;
  }
}

/* ============================================================
   ESTADOS — SUCCESS / ERROR
   ============================================================ */

.presupuesto-state {
  display: none;
  padding: clamp(32px, 4vw, 48px);
  border-radius: 2px;
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
}

.presupuesto-state.is-shown {
  display: block;
}

.presupuesto-state.is-success {
  background: color-mix(in srgb, var(--success) 8%, var(--bg-soft));
  border-color: color-mix(in srgb, var(--success) 30%, var(--border-subtle));
}

.presupuesto-state.is-error {
  background: color-mix(in srgb, var(--danger) 6%, var(--bg-soft));
  border-color: color-mix(in srgb, var(--danger) 30%, var(--border-subtle));
}

.presupuesto-state-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-4);
}

.presupuesto-state.is-success .presupuesto-state-icon { color: var(--success); }
.presupuesto-state.is-error   .presupuesto-state-icon { color: var(--danger); }

.presupuesto-state-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--space-3);
  color: var(--fg-primary);
}

.presupuesto-state-msg {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0 0 var(--space-5);
  max-width: 50ch;
}

.presupuesto-state-ref {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-primary);
  background: #FFFFFF;
  padding: 8px 14px;
  border-radius: 2px;
  border: 1px solid var(--border);
  margin-bottom: var(--space-5);
}

.presupuesto-state-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ============================================================
   SIDEBAR (col derecha)
   ============================================================ */

.presupuesto-sidebar {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 32px);
}

/* La aside no es sticky: scroll natural con el resto de la página. */

.presupuesto-sidebar-card {
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  padding: clamp(20px, 2.5vw, 28px);
}

.presupuesto-sidebar-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 var(--space-4);
  color: var(--fg-primary);
}

/* === Proceso steps === */

.proceso-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.proceso-step {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.proceso-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}

.proceso-step-content { min-width: 0; }

.proceso-step-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--fg-primary);
}

.proceso-step-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-muted);
  margin: 0;
}

/* === Why list === */

.why-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.why-list li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-muted);
}

.why-list svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--brand-blue);
  margin-top: 2px;
}

/* === Contact === */

.sidebar-contact-intro {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-muted);
  margin: 0 0 var(--space-4);
}

.sidebar-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-contact-item { display: block; }

.sidebar-contact-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 2px;
  text-decoration: none;
  color: var(--fg-primary);
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast);
}
.sidebar-contact-link:hover,
.sidebar-contact-link:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--brand-blue) 6%, var(--bg-soft));
  border-color: color-mix(in srgb, var(--brand-blue) 28%, transparent);
  transform: translateX(2px);
}

.sidebar-contact-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  color: var(--brand-blue);
  border: 1px solid var(--border-subtle);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-contact-link:hover .sidebar-contact-icon {
  background: var(--brand-blue);
  color: #FFFFFF;
  border-color: var(--brand-blue);
}
.sidebar-contact-icon svg { width: 18px; height: 18px; }

.sidebar-contact-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.sidebar-contact-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-subtle);
}

.sidebar-contact-value {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-contact-langs {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-subtle);
  margin: var(--space-4) 0 0;
}

/* Las pantallas de estado (enviado / error) tenían el texto en blanco
   porque el panel era oscuro. */
.presupuesto-state-title { color: var(--fg-primary); }
.presupuesto-state .btn-secondary-light,
.presupuesto-state .btn-white {
  color: var(--fg-primary);
  border-color: var(--border-strong);
  background: transparent;
}

/* ==================================================================
   HERO DEL PRESUPUESTO — fotografía a sangre
   ------------------------------------------------------------------
   Era texto sobre blanco: 405px de hero con la mitad derecha vacía y,
   debajo, 145px de hueco muerto antes del formulario. En la página en
   la que el visitante ya ha decidido escribirnos, eso es medio scroll
   de nada antes del primer campo.

   Se unifica con las páginas de servicio: misma altura, mismo velo,
   mismas migas. Y se recorta el hueco de abajo, porque lo que hay que
   ver cuanto antes es el formulario.
   ================================================================== */
.presupuesto-hero {
  position: relative;
  margin-top: var(--topbar-height);
  min-height: clamp(300px, 46vh, 420px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0;
  background: var(--bg-dark);
}
@media (max-width: 768px) {
  .presupuesto-hero { min-height: clamp(260px, 40vh, 340px); padding: 0; }
}

.presupuesto-hero-media { position: absolute; inset: 0; z-index: 0; }
.presupuesto-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  display: block;
}
/* Mismo velo de tres capas que el hero de la portada y el de servicios, y
   por la misma razón: al entrar las fotos reales del taller —de día, con
   chapa clara— el degradado de solo abajo arriba dejaba la miga en 2,11:1
   y el titular en 2,63:1 a 390px. Ver el comentario largo en home.css. */
.presupuesto-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* 0,44 y no 0,34: al cambiar el hero por el Ford Ranger (foto más clara
       que la de banco anterior) el eyebrow "Presupuesto" —que cae arriba,
       donde solo llega esta base— se quedó en 3,79:1 a 320px, contra 4,5 AA.
       Lo cazó la auditoría de navegador. */
    linear-gradient(rgba(10, 12, 14, 0.44), rgba(10, 12, 14, 0.44)),
    linear-gradient(
      to right,
      rgba(10, 12, 14, 0.60)  0%,
      rgba(10, 12, 14, 0.50) 30%,
      rgba(10, 12, 14, 0.28) 55%,
      rgba(10, 12, 14, 0.06) 80%,
      rgba(10, 12, 14, 0.00) 95%),
    linear-gradient(
      to top,
      rgba(10, 12, 14, 0.78)  0%,
      rgba(10, 12, 14, 0.60) 30%,
      rgba(10, 12, 14, 0.36) 62%,
      rgba(10, 12, 14, 0.14) 88%,
      rgba(10, 12, 14, 0.06) 100%);
}

.presupuesto-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5) clamp(30px, 4vw, 52px);
}

/* Sobre la foto, el eyebrow azul de marca no llega a contraste. */
.presupuesto-hero .presupuesto-hero-eyebrow {
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: var(--space-4);
}
.presupuesto-hero .presupuesto-hero-title {
  color: #FFFFFF;
  max-width: 18ch;
}
.presupuesto-hero .presupuesto-hero-subtitle {
  color: rgba(255, 255, 255, 0.85);
  max-width: 58ch;
}

/* El formulario empieza antes: era el hueco más grande de la página. */
.presupuesto-body { padding-top: clamp(36px, 5vw, 64px); }