/* ============================================================
   ALTARA BRIDAL SUITE — cotizador de la landing (#cotizador)
   «Consulta tu fecha y conoce tu precio» (DD1–DD14, DESIGN.md).

   - Sin tarjetas: la sección se separa con línea fina y aire.
   - Botón principal café con texto blanco; texto secundario
     var(--muted) (#6E6155); dorado, grey y velvet nunca como texto.
   - Cifras en Montserrat tabular, nunca en Clasima.
   - Una columna; en 375 px el botón ocupa todo el ancho. Todo lo que
     se toca mide 44 px o más.
   - Nada depende de data-reveal: resultados y errores se ven siempre.
   Usa los tokens de styles.css (:root); no define colores nuevos.
   ============================================================ */
.cotizador {
  padding: clamp(3rem, 8vw, 6rem) clamp(1.2rem, 4vw, 3.2rem);
  background: var(--bg);
  border-top: 1px solid var(--line);
  scroll-margin-top: 5rem;
}
.cotizador__inner { max-width: 560px; margin: 0 auto; }
.cotizador__titulo {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; color: var(--ink);
}
.cotizador__linea { color: var(--muted); margin: 1rem 0 2rem; max-width: 46ch; }

/* ---------- Formulario ---------- */
.cotizador__form { display: grid; gap: 1.25rem; }
.cotizador__campo { display: grid; gap: .45rem; }
.cotizador__campo label {
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); font-weight: 500;
}
.cotizador__campo input {
  width: 100%; min-width: 0; min-height: 48px;
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
  background: #fff; border: 1px solid var(--campo-borde); border-radius: 4px;
  padding: .75rem .9rem;
}
.cotizador__campo input[aria-invalid="true"],
.cotizador__privacidad input[aria-invalid="true"] { border-color: var(--error); outline: 1px solid var(--error); }
.cotizador__ayuda { font-size: .85rem; color: var(--muted); }

/* ---------- Preguntas de un toque (¿Qué celebras?, ¿Ya tienes vestido?) ----------
   Radios nativos vestidos de botón de opción: el radio queda fuera de la vista
   pero enfocable (las flechas lo mueven) y la etiqueta es lo que se toca.
   Marcado: café con texto blanco (5.8:1), como el botón principal. */
.cotizador__opciones { border: 0; margin: 0; padding: 0; min-width: 0; }
.cotizador__opciones legend {
  padding: 0; margin-bottom: .45rem;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); font-weight: 500;
}
.cotizador__chips { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; }
.cotizador__opciones input {
  position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0;
  opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none;
}
/* Mismo peso que «.cotizador__campo label» y después: le quita las versalitas. */
.cotizador__opciones label {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .7rem 1.1rem; text-align: center; cursor: pointer;
  font-family: var(--sans); font-size: .95rem; font-weight: 400; line-height: 1.3;
  letter-spacing: normal; text-transform: none; color: var(--ink);
  background: #fff; border: 1px solid var(--campo-borde); border-radius: 4px;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
.cotizador__opciones label:hover { border-color: var(--primary); }
.cotizador__opciones input[aria-invalid="true"] + label { border-color: var(--error); }
.cotizador__opciones input:checked + label {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.cotizador__opciones input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 3px; }
@media (max-width: 480px) {
  .cotizador__chips--apiladas { flex-direction: column; }
}
.cotizador__error { font-size: .88rem; color: var(--error); font-weight: 500; }

.cotizador__privacidad {
  display: grid; grid-template-columns: 44px 1fr; gap: .3rem .5rem; align-items: start;
  font-size: .92rem; line-height: 1.55; color: var(--ink);
}
/* La casilla visible mide 22 px, pero su celda (y la etiqueta) dan 44 px para el dedo. */
.cotizador__privacidad input {
  width: 22px; height: 22px; margin: .6rem 11px; accent-color: var(--primary);
}
.cotizador__privacidad label { padding: .55rem 0; cursor: pointer; }
.cotizador__privacidad .cotizador__nota-privacidad,
.cotizador__privacidad .cotizador__error { grid-column: 2; }
.cotizador__nota-privacidad { font-size: .85rem; color: var(--muted); }
.cotizador__nota-privacidad a,
.cotizador__liga { color: var(--primary); text-decoration: underline; text-underline-offset: .2em; }

/* País del teléfono y los 10 dígitos en un renglón (la lada la pone el sistema). */
.cotizador__telefono { display: grid; grid-template-columns: minmax(9.5rem, auto) 1fr; gap: .5rem; }

/* ---------- «Todavía no tengo fecha» ----------
   Casilla bajo la fecha (44 px para el dedo, como la del aviso) y, al marcarla,
   mes y año tentativos en dos listas en lugar del día. */
.cotizador__campo select {
  width: 100%; min-width: 0; min-height: 48px;
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid var(--campo-borde); border-radius: 4px;
  padding: .75rem .9rem;
}
.cotizador__campo select[aria-invalid="true"] { border-color: var(--error); outline: 1px solid var(--error); }
.cotizador__casilla {
  display: grid; grid-template-columns: 44px 1fr; align-items: center;
  font-size: .95rem; color: var(--ink);
}
/* Mismo peso que «.cotizador__campo input/label» y después: casilla normal, sin versalitas. */
.cotizador__casilla input {
  width: 22px; height: 22px; min-height: 0; margin: 0 11px; padding: 0; accent-color: var(--primary);
}
.cotizador__casilla label {
  padding: .6rem 0; cursor: pointer;
  font-size: .95rem; font-weight: 400; letter-spacing: normal; text-transform: none;
}
.cotizador__tentativa { border: 0; margin: 0; padding: 0; min-width: 0; }
.cotizador__tentativa legend {
  padding: 0; margin-bottom: .45rem;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); font-weight: 500;
}
.cotizador__selects { display: grid; grid-template-columns: 3fr 2fr; gap: .5rem; }

/*
 * Sin fecha: mes y año sólo con la casilla marcada (:has, sin JavaScript) o
 * cuando el servidor ya sabe que no tiene fecha (--sin-fecha); el día se
 * esconde. Desmarcar la casilla lo regresa aunque el servidor pintara --sin-fecha.
 */
.cotizador__solo-sin-fecha { display: none; }
.cotizador__form--sin-fecha .cotizador__solo-sin-fecha,
.cotizador__form:has(#cz-sin-fecha:checked) .cotizador__solo-sin-fecha { display: grid; }
.cotizador__form--sin-fecha .cotizador__con-fecha,
.cotizador__form--sin-fecha #cz-error-fecha,
.cotizador__form:has(#cz-sin-fecha:checked) .cotizador__con-fecha,
.cotizador__form:has(#cz-sin-fecha:checked) #cz-error-fecha { display: none; }
.cotizador__form:has(#cz-sin-fecha:not(:checked)) .cotizador__solo-sin-fecha { display: none; }
.cotizador__form:has(#cz-sin-fecha:not(:checked)) label.cotizador__con-fecha,
.cotizador__form:has(#cz-sin-fecha:not(:checked)) input.cotizador__con-fecha { display: block; }

/*
 * XV: la quinceañera y las etiquetas «de contacto» sólo con «XV años» marcado
 * (:has, sin JavaScript) o cuando el servidor ya sabe que es XV (--xv). Marcar
 * «Mi boda» las esconde aunque el servidor haya pintado --xv.
 */
.cotizador__solo-xv { display: none; }
.cotizador__form--xv div.cotizador__solo-xv,
.cotizador__form:has(#cz-tipo-xv:checked) div.cotizador__solo-xv { display: grid; }
.cotizador__form--xv span.cotizador__solo-xv,
.cotizador__form--xv p.cotizador__solo-xv,
.cotizador__form:has(#cz-tipo-xv:checked) span.cotizador__solo-xv,
.cotizador__form:has(#cz-tipo-xv:checked) p.cotizador__solo-xv { display: block; }
.cotizador__form--xv .cotizador__sin-xv,
.cotizador__form:has(#cz-tipo-xv:checked) .cotizador__sin-xv { display: none; }
.cotizador__form:has(#cz-tipo-boda:checked) .cotizador__solo-xv { display: none; }
.cotizador__form:has(#cz-tipo-boda:checked) .cotizador__sin-xv { display: inline; }

/* Campo trampa: fuera de la vista y del lector de pantalla, pero en el HTML. */
.cotizador__trampa {
  position: absolute !important; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Botones (principal café, sin píldora) ---------- */
.cotizador .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; border: 0; border-radius: 4px; text-align: center;
  font-size: .8rem; letter-spacing: .14em; padding: .9em 1.6em;
}
.cotizador .btn--solid:hover { transform: none; }
.cotizador .btn:disabled { opacity: .55; cursor: progress; }
.cotizador__enviar { width: 100%; margin-top: .4rem; }

.cotizador a:focus-visible,
.cotizador button:focus-visible,
.cotizador input:focus-visible,
.cotizador [tabindex="-1"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Ligas que se tocan: 44 px de alto aunque se vean como texto. */
.cotizador__liga {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .95rem; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans);
}

/* ---------- Mensajes (fondo tinte + texto; sin borde de color a un lado) ---------- */
.cotizador__alerta {
  margin: 0 0 1.6rem; padding: 1rem 1.1rem; border-radius: 4px;
  background: var(--error-bg); color: var(--error);
}
.cotizador__alerta p { font-size: .95rem; color: var(--error); }
.cotizador__alerta .cotizador__liga { color: var(--error); font-weight: 500; }

/* ---------- Resultado: fecha → estado + nota → precio → Cómo pagas → contacto → WhatsApp ---------- */
.cotizador__resultado { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.cotizador__fecha {
  font-family: var(--sans); font-weight: 500; font-size: .85rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cotizador__estado {
  margin-top: .9rem; font-family: var(--serif); font-size: clamp(1.6rem, 4.5vw, 2.1rem);
  line-height: 1.15; color: var(--ink);
}
.cotizador__resultado--libre .cotizador__estado { color: var(--primary); }
.cotizador__nota { margin-top: .4rem; color: var(--muted); font-size: .95rem; }
.cotizador__aviso {
  margin-top: 1rem; padding: .8rem 1rem; border-radius: 4px;
  background: var(--warning-bg); color: var(--warning); font-size: .92rem; font-weight: 500;
}
.cotizador__precio {
  margin-top: 1.6rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-family: var(--sans); color: var(--ink);
}
.cotizador__cifra {
  font-weight: 500; font-size: clamp(2.6rem, 9vw, 3.6rem); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.cotizador__moneda { font-size: .8rem; letter-spacing: .18em; color: var(--muted); font-weight: 500; }
.cotizador__precio-etiqueta { margin-top: .3rem; color: var(--muted); font-size: .9rem; }

.cotizador__subtitulo {
  margin-top: 1.8rem; font-family: var(--sans); font-weight: 500;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.cotizador__pagos {
  list-style: none; margin-top: .5rem;
  font-variant-numeric: tabular-nums;
}
.cotizador__pagos li { padding: .65rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.cotizador__pagos li:last-child { border-bottom: 0; }
.cotizador__bata { margin-top: 1rem; font-size: .95rem; color: var(--ink); }

.cotizador__contacto { margin-top: 1.6rem; color: var(--ink); font-size: .98rem; }
.cotizador__acciones {
  margin-top: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem;
}
.cotizador__acciones form { display: contents; }

@media (max-width: 600px) {
  .cotizador__acciones { flex-direction: column; align-items: stretch; }
  .cotizador__boton { width: 100%; }
  .cotizador__acciones .cotizador__liga { justify-content: center; }
}

/* ---------- Desglose del descuento de un QR (D7, entrega 3) ---------- */
.cotizador__desglose { margin: 1.4rem 0 0; display: grid; gap: .35rem; max-width: 26rem; }
.cotizador__desglose div { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); }
.cotizador__desglose dt { font-weight: 400; }
.cotizador__desglose dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }