/* =========================================================
   AGAR · páginas internas: formulario (/contacto) y privacidad
   Se carga después de styles.css y usa sus tokens de tono.
   Las clases llevan prefijo propio (f-, fstep, pk...) para no
   chocar con las de la home (.steps, .step, .pack).
   ========================================================= */

.pagina {
  --papel: #FFFFFF; --texto: #2C4436; --suave-f: #5A6E62; --linea-f: #D9D3C4; --error: #A3242C;
  --rebote: cubic-bezier(.3, 1.5, .5, 1);
  background-image: radial-gradient(circle, #DCD5C4 .9px, transparent 1.1px);
  background-size: 16px 16px;
}
.pagina [hidden] { display: none !important; }
.pagina .nav { background: color-mix(in srgb, var(--crema) 92%, transparent); }
.pagina .nav__back { font-family: var(--sans); font-weight: 600; font-size: .95rem; }

.wrap-f {
  max-width: 1180px; margin-inline: auto;
  padding: 112px max(16px, env(safe-area-inset-right, 0px)) 96px max(16px, env(safe-area-inset-left, 0px));
}

/* Cinta de rótulo */
.tape {
  display: inline-block; white-space: nowrap;
  font-family: var(--sans); font-stretch: 75%; font-weight: 600; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 16px; background: var(--lima); color: var(--noche); rotate: -2.5deg;
  clip-path: polygon(0 0, 100% 0, 98% 30%, 100% 60%, 98% 100%, 0 100%, 2% 70%, 0 35%);
}
.f-top { margin-bottom: clamp(28px, 5vw, 52px); }

/* ---------- Formulario: la placa a la izquierda, los pasos a la derecha ---------- */
.f-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .f-grid { grid-template-columns: 1fr; } }

.f-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 900px) { .f-side { position: static; flex-direction: row; align-items: center; gap: 18px; } }
.f-plate { width: 100%; max-width: 420px; aspect-ratio: 1; }
@media (max-width: 900px) { .f-plate { width: 132px; flex: none; } }
.f-plate .col { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s var(--rebote); }
.f-plate .col.on { transform: scale(1); }
.f-plate text { font-family: var(--sans); font-weight: 600; font-size: 12.5px; letter-spacing: 3px; font-stretch: 75%; fill: var(--antocianina); }
.f-side h1 { font-size: clamp(32px, 4.2vw, 52px); margin-top: 10px; }
.f-lede { font-style: italic; color: var(--texto); font-size: 19px; max-width: 34ch; margin-top: 10px; }
.f-count { font-family: var(--sans); font-stretch: 75%; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--antocianina); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .f-lede { display: none; } .f-side h1 { font-size: 30px; } }

.f-card { background: var(--papel); border: 1.5px solid var(--noche); padding: clamp(22px, 3.4vw, 40px); color: var(--noche); }
.fsteps {
  padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1.5px solid var(--noche);
  margin: calc(-1 * clamp(22px, 3.4vw, 40px)); margin-bottom: clamp(24px, 3.4vw, 36px);
}
.fsteps li { padding: 12px 14px; border-left: 1.5px solid var(--noche); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fsteps li:first-child { border-left: 0; }
.fsteps .n { font-family: var(--sans); font-stretch: 75%; font-weight: 600; font-size: 11.5px; letter-spacing: .14em; color: var(--suave-f); text-transform: uppercase; }
.fsteps .t { font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--suave-f); }
.fsteps li[aria-current="step"] { background: var(--lima); }
.fsteps li[aria-current="step"] .n, .fsteps li[aria-current="step"] .t, .fsteps li.done .t { color: var(--noche); }
.fsteps li.done .n { color: var(--clorofila); }

.fstep { display: flex; flex-direction: column; gap: 26px; }
.fstep h2 { font-size: clamp(26px, 3vw, 34px); }
.fstep .sub { font-style: italic; color: var(--suave-f); margin-top: 6px; }
.pagina fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pagina legend { padding: 0; }

.f { display: flex; flex-direction: column; gap: 8px; }
.f > label, .f legend { font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--noche); }
.f .opt { font-weight: 400; color: var(--suave-f); font-family: var(--serif); font-style: italic; font-size: 15px; }
.f .hint { font-size: 15px; color: var(--suave-f); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 620px) { .two { grid-template-columns: 1fr; } }

.pagina input[type=text], .pagina input[type=email], .pagina input[type=tel], .pagina input[type=url], .pagina input[type=month], .pagina textarea {
  font: inherit; font-size: 17px; color: var(--noche); background: var(--crema);
  border: 1.5px solid var(--linea-f); border-radius: 10px; padding: 12px 14px; width: 100%;
  transition: border-color .2s, background .2s;
}
.pagina input:hover, .pagina textarea:hover { border-color: #B9B19E; }
.pagina input:focus, .pagina textarea:focus { outline: none; border-color: var(--clorofila); background: var(--papel); }
.pagina textarea { resize: vertical; min-height: 96px; }
.pagina ::placeholder { color: #93A096; font-style: italic; }
.counter { font-family: var(--sans); font-size: 13px; color: var(--suave-f); font-variant-numeric: tabular-nums; align-self: flex-end; }
.counter.warn { color: var(--antocianina); }

/* Pastillas (radios y checkboxes) */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill span {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 15.5px; font-weight: 500;
  padding: 9px 16px; border: 1.5px solid var(--linea-f); border-radius: 999px; background: var(--crema);
  transition: background .2s, border-color .2s; user-select: none;
}
.pill span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; transition: background .2s; }
.pill input:checked + span { background: var(--noche); border-color: var(--noche); color: var(--crema); }
.pill input:checked + span::before { background: var(--lima); border-color: var(--lima); }
.pill input:hover + span { border-color: var(--clorofila); }
.pill input:focus-visible + span { outline: 3px solid var(--antocianina); outline-offset: 2px; }

/* Packs */
.pks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 620px) { .pks { grid-template-columns: 1fr; } }
.pk { position: relative; }
.pk input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pk span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 14px 16px; border: 1.5px solid var(--linea-f); border-radius: 12px; background: var(--crema); transition: background .2s, border-color .2s; }
.pk b { font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: .14em; }
.pk small { font-size: 15px; color: var(--suave-f); }
.pk input:checked + span { border-color: var(--noche); background: var(--noche); color: var(--crema); }
.pk input:checked + span small { color: var(--lavanda); }
.pk input:focus-visible + span { outline: 3px solid var(--antocianina); outline-offset: 2px; }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; color: var(--texto); font-family: var(--serif); font-weight: 400; }
.consent input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--clorofila); flex: none; }
.consent a { color: var(--antocianina); }

.err { color: var(--error); font-family: var(--sans); font-size: 14px; font-weight: 500; }
.f.bad input, .f.bad textarea { border-color: var(--error); }
.f.bad .pill span, .f.bad .pk span { border-color: var(--error); }

/* Campo trampa para bots: fuera de pantalla, invisible para personas */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.f-turnstile { min-height: 65px; }

.f-alert { border: 1.5px solid var(--error); background: #FBF0EF; padding: 14px 16px; border-radius: 10px; color: var(--noche); font-size: 16.5px; }
.f-alert a { color: var(--antocianina); font-weight: 600; }

.f-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1.5px solid var(--linea-f); padding-top: 22px; margin-top: 26px; }
.pagina .btn { border: 2px solid var(--btn-bg); cursor: pointer; }
.pagina .btn[disabled] { opacity: .6; cursor: progress; }
.btn--ghost { background: transparent; color: var(--noche); border-color: var(--noche) !important; }
.btn--lima { --btn-bg: var(--lima); --btn-fg: var(--noche); }
.f-time { font-family: var(--sans); font-stretch: 75%; font-weight: 600; font-size: 12.5px; letter-spacing: .14em; color: var(--suave-f); text-transform: uppercase; }

/* Pantalla final */
.f-done { display: flex; flex-direction: column; gap: 22px; }
.f-done h2 { font-size: clamp(32px, 4vw, 46px); }
.f-done:focus { outline: none; }
.f-sum { border: 1.5px solid var(--noche); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f-sum div { padding: 12px 14px; border-top: 1.5px solid var(--noche); min-width: 0; }
.f-sum div:nth-child(-n+2) { border-top: 0; }
.f-sum div:nth-child(even) { border-left: 1.5px solid var(--noche); }
.f-sum small { display: block; font-family: var(--sans); font-stretch: 75%; font-weight: 600; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--suave-f); }
.f-sum p { font-family: var(--sans); font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
.f-note { font-size: 15px; color: var(--suave-f); font-style: italic; }
.ph { background: var(--lavanda); padding: 0 4px; border-radius: 3px; font-style: normal; }

/* ---------- Política de privacidad ---------- */
.policy { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 72px); }
@media (max-width: 900px) { .policy { grid-template-columns: 1fr; } }
.policy h1 { font-size: clamp(36px, 4.6vw, 60px); }
.policy .meta { margin-top: 14px; font-size: 15px; color: var(--suave-f); }
.policy .body { display: flex; flex-direction: column; gap: 26px; max-width: 66ch; }
.policy h2 { font-size: 21px; margin-bottom: 6px; letter-spacing: -.015em; }
.policy p, .policy li { color: var(--texto); font-size: 17.5px; }
.policy ul { padding-left: 20px; margin: 0 0 8px; display: flex; flex-direction: column; gap: 4px; }
.policy .legal { background: var(--papel); border: 1.5px solid var(--linea-f); padding: 14px 16px; font-size: 15.5px; margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .f-plate .col, .pill span, .pk span { transition: none; }
}

.f-done__p { color: var(--texto); }