/* ============================================================
   estilos.css — landing de sorteo "España 2026"
   Lectura del encargo: landing de sorteo para público general en España,
   tono de confianza con energía. Aplica las tendencias 2026 detectadas en
   agencias españolas: minimalismo funcional, jerarquía tipográfica
   exagerada, tipografía variable autoalojada, color "dopamina" solo en
   detalles sobre una base hueso, un bloque verde bosque (naturaleza
   destilada), rejilla bento, cristal esmerilado solo en la cabecera,
   microinteracciones útiles, móvil primero y contraste AA.
   Diales: variación 6, movimiento 4, densidad 4.

   Reglas de forma: botones en píldora, tarjetas y paneles a 20 px,
   campos a 10 px. Reglas de color: un solo acento (--coral); el verde es
   fondo, no acento. Cambiar de marca = cambiar :root.
   ============================================================ */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fuentes/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fuentes/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --hueso: #f4f2ec;          /* fondo de página */
  --papel: #ffffff;          /* tarjetas y formulario */
  --arena: #e9e5da;          /* fondos secundarios */
  --tinta: #17201c;          /* texto principal */
  --tinta-2: #4f5a54;        /* texto secundario (7,6:1 sobre hueso) */
  --linea: #dcd8cc;
  --bosque: #1e3a2f;         /* bloque "Cómo funciona" y pie */
  --bosque-2: #26483a;
  --bosque-texto: #e8efe9;
  --bosque-texto-2: #b5c6ba;
  --coral: #ff5a36;          /* único acento: rellenos, con texto oscuro encima */
  --coral-texto: #c1341a;    /* acento como texto sobre claro (4,9:1) */
  --coral-suave: #ffe9e2;
  --exito: #1f7a45;
  --exito-suave: #e3f3e8;
  --error: #b3261e;
  --error-suave: #fbe9e7;
  --foco: rgba(255, 90, 54, .45);
  --sombra: 0 1px 2px rgba(23, 32, 28, .06), 0 8px 24px rgba(23, 32, 28, .08);
  --sombra-alta: 0 2px 4px rgba(23, 32, 28, .08), 0 20px 48px rgba(23, 32, 28, .14);
  --radio: 20px;
  --radio-campo: 10px;
  --radio-pildora: 999px;
  --trans: .2s ease;
  --ancho: 1160px;
  --fuente: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--fuente); font-size: 17px; line-height: 1.6; font-weight: 400;
  color: var(--tinta); background: var(--hueso); -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
a { color: var(--coral-texto); }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.05; letter-spacing: -.03em; font-weight: 800; text-wrap: balance; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.icono { width: 1em; height: 1em; flex-shrink: 0; }

.saltar {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--tinta); color: var(--hueso); padding: 8px 14px; border-radius: var(--radio-pildora); text-decoration: none; font-weight: 600;
}
.saltar:focus { left: 8px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 26px; border-radius: var(--radio-pildora); border: 0;
  font: inherit; font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer;
  background: var(--coral); color: var(--tinta);
  transition: transform var(--trans), box-shadow var(--trans), background var(--trans);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255, 90, 54, .28); color: var(--tinta); }
.btn:active { transform: scale(.98); box-shadow: none; }
.btn:disabled { opacity: .6; cursor: wait; transform: none; box-shadow: none; }
.btn-grande { min-height: 56px; padding: 14px 34px; font-size: 18px; }
.btn-peq { min-height: 40px; padding: 8px 18px; font-size: 15px; }
.btn-bloque { width: 100%; }
.btn-secundario { background: transparent; color: var(--tinta); border: 1.5px solid var(--tinta); }
.btn-secundario:hover { background: var(--tinta); color: var(--hueso); box-shadow: none; }
.btn-oscuro { background: var(--tinta); color: var(--hueso); }
.btn-oscuro:hover { color: var(--hueso); box-shadow: 0 10px 24px rgba(23, 32, 28, .25); }

/* ---------- Cabecera (cristal, 64 px) ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 242, 236, .78);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(23, 32, 28, .08);
}
.cabecera-int { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -.03em; color: var(--tinta); text-decoration: none; }
.marca-icono { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--coral); color: var(--tinta); }
.marca-icono svg { width: 18px; height: 18px; }
.cabecera nav { display: flex; align-items: center; gap: 26px; }
.cabecera nav a:not(.btn) { color: var(--tinta-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.cabecera nav a:not(.btn):hover { color: var(--tinta); }

/* ---------- Hero partido (texto a la izquierda, premio a la derecha) ---------- */
.hero { padding: 72px 24px 56px; }
.hero-int { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.hero-etiqueta {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: var(--radio-pildora);
  background: var(--papel); border: 1px solid var(--linea); color: var(--tinta); font-size: 14px; font-weight: 600; margin-bottom: 22px;
}
/* El punto indica un estado real (plazo abierto) y desaparece al cerrarse */
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--exito); animation: latido 1.8s infinite; }
.hero-etiqueta.cerrado .punto { display: none; }
.hero-etiqueta.cerrado { color: var(--tinta-2); }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(31, 122, 69, .5); } 70% { box-shadow: 0 0 0 9px rgba(31, 122, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 122, 69, 0); } }
.hero h1 { font-size: clamp(44px, 7.2vw, 92px); font-weight: 800; letter-spacing: -.045em; line-height: .98; margin-bottom: 20px; font-variation-settings: "opsz" 96; }
.hero h1 .acento { color: var(--coral-texto); }
.hero-sub { font-size: clamp(18px, 2vw, 22px); color: var(--tinta-2); max-width: 30ch; margin: 0 0 28px; font-weight: 400; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-bottom: 26px; }
.hero-rasgos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--tinta-2); font-size: 15px; font-weight: 500; }
.hero-rasgos li { display: inline-flex; align-items: center; gap: 7px; }
.hero-rasgos .icono { color: var(--exito); }
.hero-visual { position: relative; }
.hero-marco { border-radius: var(--radio); overflow: hidden; background: var(--arena); aspect-ratio: 4 / 5; box-shadow: var(--sombra-alta); transform: rotate(1.5deg); }
.hero-marco img { width: 100%; height: 100%; object-fit: cover; }
.hero-chip {
  position: absolute; left: -18px; bottom: 28px; display: inline-flex; align-items: center; gap: 10px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-pildora); padding: 10px 16px 10px 12px;
  font-size: 15px; font-weight: 600; box-shadow: var(--sombra);
}
.hero-chip .icono { color: var(--coral-texto); width: 20px; height: 20px; }
.hero-chip small { display: block; font-weight: 400; color: var(--tinta-2); font-size: 13px; }

/* ---------- Secciones ---------- */
.seccion { padding: 80px 24px; }
.seccion-int { max-width: var(--ancho); margin: 0 auto; }
.seccion-cab { margin-bottom: 36px; max-width: 640px; }
.seccion h2 { font-size: clamp(32px, 4.5vw, 52px); font-variation-settings: "opsz" 72; }
.seccion-desc { color: var(--tinta-2); font-size: 18px; margin: 0; }

/* ---------- Tarjetas de sorteo (rejilla bento) ---------- */
.sorteos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.sorteos-grid.una { grid-template-columns: minmax(300px, 520px); }
.sorteos-grid.bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sorteos-grid.bento .tarjeta.destacada { grid-column: span 2; }
.sorteos-grid.bento .tarjeta.destacada .tarjeta-imagen { aspect-ratio: 16 / 7; }
.sorteos-grid.bento .tarjeta.destacada h3 { font-size: 30px; }
.tarjeta {
  display: flex; flex-direction: column; position: relative;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color var(--trans);
  animation: aparecer .4s ease-out both; animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes aparecer { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.tarjeta.estado-activo { cursor: pointer; }
.tarjeta.estado-activo:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.tarjeta.seleccionada { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-suave), var(--sombra-alta); }
.tarjeta.estado-finalizado, .tarjeta.estado-proximo { background: var(--arena); }
.tarjeta-imagen { position: relative; aspect-ratio: 16 / 10; background: var(--arena); }
.tarjeta-imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tarjeta.estado-activo:hover .tarjeta-imagen img { transform: scale(1.03); }
.tarjeta-estado {
  position: absolute; top: 14px; left: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: var(--radio-pildora);
  background: var(--papel); color: var(--tinta); border: 1px solid var(--linea);
}
.estado-finalizado .tarjeta-estado, .estado-proximo .tarjeta-estado { color: var(--tinta-2); }
.estado-resuelto .tarjeta-estado { color: var(--exito); }
.tarjeta-cuerpo { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.tarjeta h3 { font-size: 24px; margin: 0; }
.premio { color: var(--coral-texto); font-weight: 700; margin: 0; font-size: 18px; }
.valor { color: var(--tinta-2); font-size: 15px; margin: -6px 0 0; }
.fechas { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px 12px; margin: 0; padding: 12px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); font-size: 14px; }
.fechas dt { color: var(--tinta-2); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.fechas dd { margin: 0; font-weight: 600; }
.cuenta { display: flex; align-items: stretch; gap: 6px; font-variant-numeric: tabular-nums; }
.unidad { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; max-width: 80px; padding: 10px 4px; background: var(--hueso); border-radius: var(--radio-campo); }
.unidad b { font-size: 26px; line-height: 1; font-weight: 800; letter-spacing: -.03em; }
.unidad small { font-size: 12px; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .06em; margin-top: 5px; }
.sep { align-self: center; color: var(--linea); font-size: 20px; font-weight: 700; }
.progreso-cab { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--tinta-2); margin-bottom: 8px; }
.participantes { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; color: var(--tinta); }
.participantes .icono { width: 16px; height: 16px; color: var(--tinta-2); }
.participantes b { font-size: 16px; }
.progreso-pct { font-weight: 700; color: var(--coral-texto); }
.progreso-pista { height: 10px; border-radius: var(--radio-pildora); background: var(--arena); overflow: hidden; }
.progreso-relleno { height: 100%; min-width: 3px; background: var(--coral); border-radius: var(--radio-pildora); transition: width .8s cubic-bezier(.4, 0, .2, 1); }
.progreso.completo .progreso-relleno { background: var(--exito); }
.progreso.completo .progreso-pct { color: var(--exito); }
.resultado { margin: 0; padding: 12px 14px; border-radius: var(--radio-campo); background: var(--exito-suave); color: var(--exito); font-weight: 700; font-size: 15px; }
.tarjeta-pie { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.tarjeta-bases { font-size: 14px; color: var(--tinta-2); text-align: center; }
.tarjeta-bases:hover { color: var(--coral-texto); }
.sin-sorteos { text-align: center; color: var(--tinta-2); padding: 34px; border: 1.5px dashed var(--linea); border-radius: var(--radio); }

/* ---------- Cómo funciona (bloque verde bosque, tres pasos en fila) ---------- */
.pasos { background: var(--bosque); color: var(--bosque-texto); }
.pasos .seccion-cab { max-width: 720px; }
.pasos h2 { color: #fff; }
.pasos .seccion-desc { color: var(--bosque-texto-2); }
.pasos-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.paso { padding: 28px 28px 8px 0; border-right: 1px solid rgba(255, 255, 255, .14); }
.paso + .paso { padding-left: 28px; }
.paso:last-child { border-right: 0; }
.paso-num { font-size: 64px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--coral); font-variant-numeric: tabular-nums; margin-bottom: 18px; }
.paso h3 { font-size: 22px; color: #fff; margin-bottom: 8px; }
.paso p { color: var(--bosque-texto-2); margin: 0; font-size: 16px; max-width: 32ch; }

/* ---------- Ganadores anteriores ---------- */
.ganadores { background: var(--arena); }
.ganadores-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ganador { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: baseline; background: var(--papel); border-radius: var(--radio); padding: 22px 24px; }
.ganador h3 { font-size: 20px; margin: 0; }
.ganador-premio { color: var(--tinta-2); font-size: 15px; margin: 0; grid-column: 1 / -1; }
.ganador-nombre { grid-column: 1 / -1; margin: 6px 0 0; color: var(--exito); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.ganador-fecha { font-size: 13px; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.ganadores-nota { margin: 22px 0 0; font-size: 15px; color: var(--tinta-2); max-width: 70ch; }

/* ---------- Formulario (confianza a la izquierda, tarjeta a la derecha) ---------- */
.form-int { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.form-texto { position: sticky; top: 88px; }
.form-texto h2 { font-size: clamp(32px, 4vw, 48px); }
.form-texto p { color: var(--tinta-2); font-size: 17px; max-width: 42ch; }
.form-puntos { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 14px; }
.form-puntos li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 15px; color: var(--tinta-2); }
.form-puntos .icono { width: 22px; height: 22px; color: var(--exito); }
.form-puntos b { color: var(--tinta); display: block; }
.form-tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 32px; box-shadow: var(--sombra); }
.form-cab { margin-bottom: 20px; }
.form-cab h3 { font-size: 24px; margin-bottom: 4px; }
.form-elegido { color: var(--tinta-2); margin: 0; }
.form-elegido strong { color: var(--coral-texto); }
.form-bloqueado { text-align: center; padding: 8px 0 4px; }
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radio-campo); font-size: 15px; margin-bottom: 18px; }
.aviso .icono { margin-top: 3px; }
.aviso-info { background: var(--hueso); color: var(--tinta); border: 1px solid var(--linea); }
.aviso-error { background: var(--error-suave); color: var(--error); border: 1px solid #f1c5c1; }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.campo { margin-bottom: 16px; }
.campo label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.campo input {
  width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--tinta);
  background: var(--papel); border: 1.5px solid var(--linea); border-radius: var(--radio-campo);
  transition: border-color var(--trans), box-shadow var(--trans);
}
.campo input::placeholder { color: #8a9089; }
.campo input:focus { outline: 0; border-color: var(--tinta); box-shadow: 0 0 0 3px var(--foco); }
.campo input[aria-invalid="true"] { border-color: var(--error); }
.campo-ayuda { font-size: 13px; color: var(--tinta-2); margin: 6px 0 0; }
.campo-error { color: var(--error); font-size: 14px; margin: 6px 0 0; }
.campo-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.casillas { margin: 20px 0 8px; }
.casilla-fila { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radio-campo); background: var(--hueso); border: 1.5px solid var(--linea); }
.casilla-fila input { width: 20px; height: 20px; margin: 3px 0 0; flex-shrink: 0; accent-color: var(--tinta); cursor: pointer; }
.casilla-fila label { font-size: 15px; line-height: 1.5; color: var(--tinta-2); cursor: pointer; }
.casilla-fila label a { text-decoration: underline; text-underline-offset: 3px; }
.obligatorio { color: var(--coral-texto); }
.casilla-opcional { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea); }
.casilla-opcional .casilla-fila { background: var(--papel); }
.etiqueta-opcional { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); background: var(--arena); padding: 3px 9px; border-radius: var(--radio-pildora); margin-bottom: 8px; }
.form-nota { font-size: 13px; color: var(--tinta-2); text-align: center; margin: 14px 0 0; }
#btn-enviar { margin-top: 18px; }

/* ---------- Pie ---------- */
.pie { background: var(--bosque); color: var(--bosque-texto-2); padding: 48px 24px; }
.pie-int { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 20px 40px; align-items: start; }
.pie-marca { font-weight: 800; font-size: 22px; color: #fff; text-decoration: none; letter-spacing: -.03em; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; justify-content: flex-end; }
.pie-enlaces a { color: var(--bosque-texto-2); text-decoration: none; }
.pie-enlaces a:hover { color: #fff; }
.pie-copy { grid-column: 1 / -1; font-size: 13px; margin: 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); }

/* ---------- Página de gracias ---------- */
.gracias { min-height: 70vh; display: grid; place-items: center; padding: 60px 24px; }
.gracias-tarjeta { max-width: 560px; width: 100%; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 44px 36px; box-shadow: var(--sombra); }
.gracias-icono { width: 60px; height: 60px; border-radius: 50%; margin-bottom: 20px; display: grid; place-items: center; background: var(--exito); color: #fff; }
.gracias-icono svg { width: 30px; height: 30px; }
.gracias-tarjeta h1 { font-size: 36px; }
.gracias-tarjeta p { color: var(--tinta-2); }
.gracias-ref { display: inline-block; font-family: ui-monospace, Consolas, monospace; font-size: 14px; color: var(--tinta); background: var(--hueso); padding: 8px 12px; border-radius: var(--radio-campo); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-int { grid-template-columns: 1fr; gap: 36px; }
  .hero-visual { max-width: 420px; }
  .hero-chip { left: 12px; }
  .sorteos-grid.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-int { grid-template-columns: 1fr; gap: 28px; }
  .form-texto { position: static; }
  .pasos-lista { grid-template-columns: 1fr; border-top: 0; }
  .paso { border-right: 0; border-top: 1px solid rgba(255, 255, 255, .14); padding: 22px 0 18px; }
  .paso + .paso { padding-left: 0; }
  .paso-num { font-size: 44px; margin-bottom: 10px; }
}
@media (max-width: 640px) {
  .cabecera nav a:not(.btn) { display: none; }
  .hero { padding: 40px 18px 40px; }
  .hero-marco { transform: none; aspect-ratio: 4 / 3; }
  .seccion { padding: 56px 18px; }
  .sorteos-grid.bento { grid-template-columns: 1fr; }
  .sorteos-grid.bento .tarjeta.destacada { grid-column: auto; }
  .sorteos-grid.bento .tarjeta.destacada .tarjeta-imagen { aspect-ratio: 16 / 10; }
  .sorteos-grid.bento .tarjeta.destacada h3 { font-size: 24px; }
  .campos-2 { grid-template-columns: 1fr; }
  .form-tarjeta { padding: 22px 18px; }
  .pie-int { grid-template-columns: 1fr; }
  .pie-enlaces { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .punto, .tarjeta { animation: none; }
  .btn, .tarjeta, .tarjeta-imagen img, .progreso-relleno { transition: none; }
  .btn:hover, .tarjeta.estado-activo:hover, .tarjeta.estado-activo:hover .tarjeta-imagen img { transform: none; }
}

/* Aviso del enlace único del panel (/?c=token): app.js lo antepone al formulario con los datos precargados. */
.aviso-enlace { background: var(--coral-suave); color: var(--tinta); padding: 12px 16px; border-radius: var(--radio-campo); margin: 0 0 18px; font-weight: 500; }