/* =========================================================================
   Registro · Commercial Summit International 2026
   Hereda tokens y tipografía de summit.css. Paleta oficial del manual:
   Asphalt Black #272623 · International Orange #FF7144 · grises INTL.
   El naranja se usa SOLO como acento (filete, foco, botón), nunca como fondo
   de superficies grandes: es lo que pide la guía de marca.
   ========================================================================= */

.reg-body { background: var(--white); color: var(--ink); }
.reg-wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Barra superior ---------- */
.reg-top { position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--ink); color: var(--white); }
.reg-top__in { display: flex; align-items: center; gap: var(--sp-6);
  max-width: 1080px; margin-inline: auto; padding: var(--sp-4) var(--gutter); }
/* Espacio seguro del manual (p.8): margen = altura del símbolo = ancho × .10279 */
.reg-top__logo { display: block; --logo-w: clamp(150px, 20vw, 210px); width: var(--logo-w);
  flex: none; margin-block: calc(var(--logo-w) * .10279); }
/* `.logo` fija `color: var(--fg)`, que aquí es el negro de marca: sobre la
   barra oscura el logotipo quedaba negro sobre negro. Se fuerza el blanco. */
.reg-top__logo .logo { color: var(--white); }
.reg-top__logo svg { width: 100%; height: auto; }
.reg-top__ev { margin-inline-start: auto; text-align: right; font-size: var(--fs-caption);
  line-height: 1.35; color: var(--white); }
.reg-top__ev span { display: block; color: var(--steel-2); }
@media (max-width: 599px) {
  .reg-top__in { flex-wrap: wrap; gap: var(--sp-2); }
  .reg-top__ev { margin-inline-start: 0; text-align: left; }
}

/* ---------- Portada ---------- */
.reg-hero { padding-block: clamp(2.5rem, 7vh, 5rem) clamp(1.5rem, 4vh, 2.5rem); }
.reg-h1 { font-family: var(--ff-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 4.25rem); line-height: 1.02; letter-spacing: .005em;
  margin-block: var(--sp-3) var(--sp-5); }
.reg-lead { max-width: 62ch; font-size: var(--fs-body-lg); color: var(--fg-muted); }
/* Gray 500 (#82817D) da 3.90:1 sobre blanco: reprueba AA en texto chico.
   Para copy de apoyo se usa Gray 700, que es el que sí cumple. */
.reg-nota { margin-block-start: var(--sp-4); font-size: var(--fs-caption); color: var(--fg-muted); }

/* Salida para quien ya está inscrito. Se separa de las notas legales a
   propósito: ahí abajo, en gris y en cuerpo chico, no la veía nadie y volvían
   a llenar el formulario entero. */
.reg-yaestas {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  margin-block-start: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper);
  border-inline-start: 4px solid var(--orange);
}
.reg-yaestas p { margin: 0; flex: 1 1 22ch; font-size: var(--fs-body-sm); color: var(--fg-muted); }
.reg-yaestas strong { color: var(--ink); }
.reg-yaestas .btn { flex: 0 0 auto; }

/* Aviso que aparece al salir del campo de correo si ya existe la cuenta.
   No es un error —el dato del usuario es correcto— así que no toma el rojo
   de .reg-err ni marca el campo. */
.reg-yatienes {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  border-inline-start: 3px solid var(--orange);
  padding-inline-start: var(--sp-3);
}
.reg-yatienes a { color: var(--orange-deep); font-weight: 700; }
.reg-nota abbr, .reg-lbl abbr { color: var(--orange-deep); text-decoration: none; font-weight: 700; }

/* Aviso de cabecera del formulario. Va en oscuro y no en .paper como el resto
   de las cajas: es la única advertencia que tiene que leerse ANTES de empezar
   a capturar, y en gris claro se confundía con las notas legales. */
.reg-aviso { margin-block-end: clamp(2rem, 5vh, 3.5rem);
  padding: var(--sp-5) var(--sp-6);
  background: var(--ink); color: var(--white);
  border-inline-start: 4px solid var(--orange); }
.reg-aviso strong { display: block; font-family: var(--ff-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.15;
  font-size: clamp(1rem, 2.4vw, 1.35rem); }
.reg-aviso p { margin: var(--sp-2) 0 0; font-size: var(--fs-body-sm);
  line-height: 1.5; color: var(--steel-2); }

/* ---------- Secciones ---------- */
.reg-form { padding-block-end: clamp(3rem, 8vh, 6rem); }
.reg-sec { border: 0; padding: 0; margin: 0 0 clamp(2rem, 5vh, 3.5rem);
  border-top: var(--border-w) solid var(--line); padding-block-start: var(--sp-6); }
.reg-sec[hidden] { display: none; }
.reg-sec > legend { font-family: var(--ff-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem); letter-spacing: .04em;
  display: flex; align-items: baseline; gap: var(--sp-3); padding: 0; margin-block-end: var(--sp-2); }
.reg-sec__n { color: var(--orange); font-size: .8em; }
.reg-sec__ayuda { color: var(--fg-muted); font-size: var(--fs-body-sm); margin-block-end: var(--sp-5); max-width: 62ch; }
.reg-sub { margin-block-start: var(--sp-6); }
.reg-sub[hidden] { display: none; }
.reg-sub h3 { font-family: var(--ff-display); text-transform: uppercase; font-size: var(--fs-h4);
  letter-spacing: .06em; font-weight: 500; color: var(--fg-muted); margin-block-end: var(--sp-4); }

/* ---------- Rejilla y campos ---------- */
.reg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--grid-gap); }
@media (max-width: 700px) { .reg-grid { grid-template-columns: 1fr; } }
.reg-f { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.reg-f--full { grid-column: 1 / -1; }
.reg-f[hidden] { display: none; }

.reg-lbl { font-size: var(--fs-body-sm); font-weight: 500; line-height: 1.35; }
.reg-ayuda { font-size: var(--fs-caption); color: var(--fg-muted); margin: 0; }

/* `password` faltaba en esta lista: esos dos campos se pintaban con el estilo
   por defecto del navegador, distintos a todos los demás del formulario.
   Al pulsar el ojo el input pasa a `text` y sigue cayendo en la misma regla. */
.reg-f input[type=text], .reg-f input[type=email], .reg-f input[type=tel],
.reg-f input[type=password],
.reg-f input[type=date], .reg-f input[type=time], .reg-f select, .reg-f textarea {
  font: inherit; font-family: var(--ff-text); font-size: var(--fs-body-sm);
  width: 100%; padding: .7rem .85rem; color: var(--ink); background: var(--white);
  border: var(--border-w) solid var(--steel-2); border-radius: var(--r-xs);
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.reg-f textarea { resize: vertical; min-height: 5.5rem; }

/* ---------- Contraseña con ojo ---------- */
.reg-pass { position: relative; display: flex; }
/* Hueco para el botón: sin esto el texto pasa por debajo del icono. */
.reg-pass input { padding-inline-end: 3rem; }
.reg-ojo {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: 3rem; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--steel);
  transition: color var(--d-fast) var(--e-out);
}
.reg-ojo svg { width: 1.25rem; height: 1.25rem; }
.reg-ojo:hover { color: var(--orange-deep); }
.reg-ojo:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
/* La tacha se ve cuando la contraseña está OCULTA —el botón la mostraría— y
   desaparece cuando ya está a la vista. */
.reg-ojo[aria-pressed="true"] { color: var(--orange-deep); }
.reg-ojo[aria-pressed="true"] .reg-ojo__tacha { display: none; }
.reg-f select { appearance: none; padding-inline-end: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%;
  background-size: .35rem .35rem, .35rem .35rem; background-repeat: no-repeat; }
.reg-f input:hover, .reg-f select:hover, .reg-f textarea:hover { border-color: var(--steel); }
.reg-f input:focus-visible, .reg-f select:focus-visible, .reg-f textarea:focus-visible {
  outline: 3px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.reg-f input[type=file] { font-size: var(--fs-caption); padding: .6rem 0; }

/* ---------- Radios y checks ---------- */
.reg-radios { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.reg-radio, .reg-check { display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-body-sm); line-height: 1.45; cursor: pointer; }
.reg-radio input, .reg-check input { flex: none; width: 1.15rem; height: 1.15rem;
  margin-block-start: .12rem; accent-color: var(--orange); }
.reg-check { padding: var(--sp-3) 0; border-bottom: var(--border-w) solid var(--line); }

/* ---------- Tarjetas de modalidad ---------- */
.reg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-4); }
.reg-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-5); cursor: pointer; background: var(--white);
  border: var(--border-w) solid var(--steel-2); border-radius: var(--r-xs);
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out); }
.reg-card:hover { border-color: var(--ink); }
.reg-card input { position: absolute; inset-block-start: var(--sp-4); inset-inline-end: var(--sp-4);
  accent-color: var(--orange); }
.reg-card__t { font-family: var(--ff-display); text-transform: uppercase; font-weight: 700;
  font-size: var(--fs-body); letter-spacing: .03em; padding-inline-end: 1.6rem; }
.reg-card__d { font-size: var(--fs-caption); color: var(--fg-muted); }
.reg-card:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.reg-card:has(input:checked) .reg-card__t { color: var(--ink); }
.reg-card:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---------- Errores ---------- */
.reg-err { margin: 0; font-size: var(--fs-caption); color: var(--orange-deep); font-weight: 500; }
.reg-err:empty { display: none; }
.is-error input, .is-error select, .is-error textarea { border-color: var(--orange-deep); }
.is-error .reg-lbl { color: var(--orange-deep); }
.reg-err--global { padding: var(--sp-4) var(--sp-5); border-inline-start: 4px solid var(--orange);
  background: var(--paper); font-size: var(--fs-body-sm); }

/* ---------- Envío ---------- */
.reg-enviar { display: flex; flex-direction: column; gap: var(--sp-4);
  align-items: flex-start; border-top: var(--border-w) solid var(--line); padding-block-start: var(--sp-8); }
.btn--lg { padding-block: 1rem; padding-inline: 2.2rem; font-size: var(--fs-body); }
.reg-dim { font-size: var(--fs-caption); color: var(--fg-muted); }

/* ---------- Éxito ---------- */
.reg-ok { padding-block: clamp(3rem, 10vh, 7rem); }
.reg-folio { font-family: var(--ff-display); font-size: clamp(1.1rem, 3vw, 1.75rem);
  text-transform: uppercase; letter-spacing: .06em; margin-block: var(--sp-5);
  padding-inline-start: var(--sp-5); border-inline-start: 4px solid var(--orange); }

/* ---------- Honeypot ---------- */
.reg-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- Pie ---------- */
.reg-pie { background: var(--ink); color: var(--white); padding-block: clamp(2rem, 6vh, 3.5rem); }
.reg-pie .logo { --logo-w: clamp(160px, 22vw, 230px); width: var(--logo-w);
  color: var(--white) !important; margin-block-end: max(var(--sp-5), calc(var(--logo-w) * .10279)); }
.reg-pie p { font-size: var(--fs-body-sm); margin-block-end: var(--sp-2); }
.reg-pie .reg-dim { color: var(--steel-2); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .reg-f input, .reg-f select, .reg-f textarea, .reg-card { transition: none; }
}

/* ---------- Impresión: el equipo imprime registros ---------- */
@media print {
  .reg-top, .reg-pie, .reg-enviar { display: none; }
  .reg-sec { break-inside: avoid; }
}

/* ---------- Aviso de registro completado ---------- */
/* .reg-op y .reg-op--ok se fueron: las emitía la versión anterior de
   mi-registro.php, que se reescribió por completo y ya no las usa. */
.reg-ok-msg { background: #204A32; color: #fff; padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-body-sm); }

/* ---------- Precio dentro de la tarjeta de modalidad ---------- */
.reg-card__p { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-h4);
  font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.reg-card__u { font-size: var(--fs-caption); color: var(--fg-muted); text-transform: uppercase;
  letter-spacing: .06em; }
/* Encabezado de cada lista de la tarjeta. Sin él, "Hospedaje" bajo la lista de
   exclusiones se lee como incluido: el signo por sí solo no basta. */
.reg-card__lst-t { margin-block-start: var(--sp-3); padding-block-start: var(--sp-3);
  border-top: var(--border-w) solid var(--line);
  font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink); }
.reg-card__lst-t--no { color: var(--orange-deep); }
/* Aviso de la modalidad: no es una exclusión más de la lista, es una
   aclaración sobre el paquete. Va aparte y con filete para que se lea. */
.reg-card__aviso { display: block; margin-block-start: var(--sp-3);
  padding-inline-start: var(--sp-3); border-inline-start: 3px solid var(--orange);
  font-size: var(--fs-caption); line-height: 1.45; color: var(--fg-muted); }
.reg-card__inc { display: grid; gap: 3px; margin-block-start: var(--sp-2); }
.reg-card__inc li { position: relative; padding-inline-start: 1.1em;
  font-size: var(--fs-caption); color: var(--fg-muted); line-height: 1.4; }
.reg-card__inc li::before { content: '+'; position: absolute; inset-inline-start: 0;
  color: var(--steel); font-weight: 700; }
.reg-card__inc--no li::before { content: '\00d7'; color: var(--orange-deep); }
/* La nota es idéntica en las tres modalidades: dentro de la tarjeta se leía tres
   veces seguidas, así que va una sola vez bajo el bloque de tarjetas. */
/* Aviso de comisiones de pago. No es una nota al pie: cambia el monto que el
   participante va a pagar, así que va en negritas y con el filete naranja de
   las advertencias, no en el gris del copy de apoyo. */
.reg-aviso-pago {
  margin-block-start: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper);
  border-inline-start: 4px solid var(--orange);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--ink);
  max-width: 74ch;
}
.reg-aviso-pago__t {
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--orange-deep);
}

.reg-notas { margin-block-start: var(--sp-3); padding-block-start: var(--sp-3);
  border-top: var(--border-w) solid var(--line);
  font-size: var(--fs-caption); color: var(--fg-muted); line-height: 1.4; }
/* Aviso de costo total: la doble se cotiza POR PERSONA y se malinterpreta. */
.reg-resumen { margin-block-start: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  background: var(--paper); border-inline-start: 4px solid var(--orange);
  font-size: var(--fs-body-sm); line-height: 1.55; }