/*
  Componentes reutilizables para las tres páginas.
  Sin blur ni sombras. Ninguno tiene borde de color tipo tarjeta.
  El degradado del 10 aparece solo en .btn y en .shape--grad (usar con medida).
*/

/* ---------- Marca: el 10 + ANIVERSARIO (como portada2/portada3) ---------- */
.mark {
  --mark-w: clamp(7.5rem, 5rem + 12vw, 13rem);
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: var(--mark-w);
  gap: calc(var(--mark-w) * 0.07);
  text-decoration: none;
}

.mark__ten {
  width: 100%;
  aspect-ratio: 840 / 535;
}

.mark__word {
  display: block;
  font-size: calc(var(--mark-w) * 0.098);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.245em;
  margin-right: -0.245em; /* compensa el espaciado de la última letra */
  line-height: 1;
  white-space: nowrap;
}

/* ---------- Separador de sección: línea, 10, ANIVERSARIO, línea ---------- */
.divider-mark {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 0.5rem + 2vw, 2rem);
  width: 100%;
}

.divider-mark::before,
.divider-mark::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgb(255 255 255 / 0.22);
}

.divider-mark__ten {
  height: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  width: auto;
}

.divider-mark__word {
  font-size: clamp(0.875rem, 0.7rem + 0.8vw, 1.3rem);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.245em;
  margin-right: -0.245em; /* compensa el espaciado de la última letra */
  line-height: 1;
  white-space: nowrap;
}

/* ---------- Nombre de reconocimiento (como portada1) ---------- */
.award {
  display: grid;
  gap: 0.35em;
}

.award__name {
  display: block;
  font-size: var(--fs-xl);
  font-weight: var(--w-extra);
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.005em;
}

.award__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--fs-md);
  font-weight: var(--w-light);
  text-transform: uppercase;
  line-height: 1;
}

.award__tag img {
  height: 0.7em;
  width: auto;
}

/* ---------- Texto partido en líneas fijas desde tableta ---------- */
@media (min-width: 768px) {
  .lines {
    max-width: none;
  }

  .lines .line {
    display: block;
    white-space: nowrap;
  }
}

/* ---------- Formas geométricas planas ---------- */
/*
  Las formas pueden cruzar de una sección a otra (como en las portadas);
  el recorte lo hace .page en los bordes de la página.
*/
.shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.shape {
  position: absolute;
  display: block;
}

.shape--pill { border-radius: var(--r-pill); }
.shape--disc { border-radius: 50%; }

.shape--indigo { background: var(--c-indigo); }
.shape--violet { background: var(--c-violet); }
.shape--magenta { background: var(--c-magenta); }
.shape--coral { background: var(--c-coral); }
.shape--amber { background: var(--c-amber); }
.shape--yellow { background: var(--c-yellow); }
.shape--deep { background: var(--c-night-3); }

/*
  Degradado del 10: solo para pocas formas protagonistas (una por zona, como mucho).
  --grad-angle orienta el degradado; si la forma está rotada, compensar el ángulo
  para que el amarillo quede siempre arriba a la derecha.
*/
.shape--grad { background: linear-gradient(var(--grad-angle, 45deg), var(--grad-10-stops)); }
.shape--night { background: var(--c-night); }

/* El contenido siempre por encima de las formas */
.above {
  position: relative;
  z-index: 1;
}

/* ---------- Botón ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3.5rem;
  padding: 0.95rem 2rem;
  border: 0;
  border-radius: var(--r-ctrl);
  background-color: var(--c-magenta);
  background-image: var(--grad-btn);
  background-size: 180% 100%;
  background-position: 0% 50%;
  color: var(--c-text);
  font-size: 1.1875rem;
  font-weight: var(--w-bold);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-position 0.5s var(--ease), transform 0.25s var(--ease);
}

/* Al pasar el mouse el degradado se corre hacia el coral */
.btn:hover {
  background-position: 100% 50%;
}

.btn:active {
  transform: scale(0.98);
}

.btn[disabled],
.btn[aria-busy="true"] {
  cursor: progress;
  background: #5e0f6e;
}

.btn--light {
  background: var(--c-text);
  color: var(--c-night);
}

.btn--light:hover {
  background: var(--c-text-2);
}

/* ---------- Campos ---------- */
.field {
  display: grid;
  gap: 0.5rem;
}

.field__label,
.field-group__legend {
  font-size: var(--fs-sm);
  font-weight: var(--w-semi);
  color: var(--c-text);
  letter-spacing: 0.01em;
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  margin-top: -0.25rem;
}

.field__control {
  width: 100%;
  min-height: 3.5rem;
  padding: 1rem 1.4rem;
  border: 0;
  border-radius: var(--r-ctrl);
  outline: 2px solid transparent;
  outline-offset: -2px;
  background: var(--c-night-2);
  color: var(--c-text);
  font-size: var(--fs-base);
  line-height: 1.4;
  transition: outline-color 0.2s var(--ease), background-color 0.2s var(--ease);
  appearance: none;
}

textarea.field__control {
  min-height: 9.5rem;
  padding-top: 1.1rem;
  resize: vertical;
}

.field__control::placeholder {
  color: var(--c-text-3);
  opacity: 1;
}

.field__control:hover {
  background: #1a1860;
}

.field__control:focus,
.field__control:focus-visible {
  outline-color: var(--c-magenta);
  background: #1a1860;
}

.field__control[aria-invalid="true"] {
  outline-color: var(--c-error);
}

.field__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  min-height: 1.25rem;
}

.field__error {
  color: var(--c-error);
  font-size: var(--fs-sm);
  font-weight: var(--w-semi);
  line-height: 1.35;
}

.field__error:empty {
  display: none;
}

.field__count {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.field__count.is-near {
  color: var(--c-yellow);
}

/* ---------- Grupo de opciones (categorías) ---------- */
.field-group {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: grid;
  gap: 0.75rem;
}

.field-group__legend {
  padding: 0;
  margin-bottom: 0.75rem;
}

.choice {
  position: relative;
  display: block;
  cursor: pointer;
}

.choice__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.choice__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem 1.1rem 1.75rem;
  border-radius: var(--r-ctrl);
  background: var(--c-night-2);
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.choice__body .award__name {
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
}

.choice__body .award__tag {
  font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1.0625rem);
}

.choice__dot {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 2px solid var(--c-text-2);
  display: grid;
  place-items: center;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.choice__dot::after {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--c-magenta);
  transform: scale(0);
  transition: transform 0.3s var(--ease);
}

.choice:hover .choice__body {
  background: #1d1b63;
}

.choice__input:checked + .choice__body {
  background: var(--c-magenta);
}

.choice__input:checked + .choice__body .choice__dot {
  border-color: var(--c-text);
  background: var(--c-text);
}

.choice__input:checked + .choice__body .choice__dot::after {
  transform: scale(1);
}

.choice__input:focus-visible + .choice__body {
  outline: 3px solid var(--c-yellow);
  outline-offset: 3px;
}

.choice:active .choice__body {
  transform: scale(0.99);
}

.field-group[aria-invalid="true"] .choice__body {
  background: #241a4d;
}

/* Aclaración liviana junto a la pregunta ("Una o varias", "Hasta 3") */
.field-group__note {
  font-weight: var(--w-light);
  color: var(--c-text-2);
  font-variant-numeric: tabular-nums;
}

/* Descripción de la opción elegida, debajo de las pastillas (por ejemplo, Estadio) */
.field-group__desc {
  font-size: var(--fs-sm);
  font-weight: var(--w-light);
  line-height: 1.45;
  color: var(--c-text-2);
}

.field-group__desc:empty {
  display: none;
}

/* ---------- Opciones en pastilla (elección rápida) ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  position: relative;
  display: block;
  cursor: pointer;
}

.chip__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.chip__body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-ctrl);
  background: var(--c-night-2);
  font-size: var(--fs-sm);
  font-weight: var(--w-semi);
  line-height: 1.2;
  text-align: center;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}

.chip:hover .chip__body {
  background: #1d1b63;
}

.chip__input:checked + .chip__body {
  background: var(--c-magenta);
  color: var(--c-text);
}

.chip__input:focus-visible + .chip__body {
  outline: 3px solid var(--c-yellow);
  outline-offset: 3px;
}

.chip:active .chip__body {
  transform: scale(0.97);
}

/* Tope alcanzado: las que no se eligieron quedan apagadas */
.chip__input:disabled:not(:checked) + .chip__body {
  color: var(--c-text-3);
  background: var(--c-night-2);
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dos opciones que reparten el ancho (como "¿A quién postulás?") */
.chips--split .chip {
  flex: 1 1 12rem;
}

.chips--split .chip__body {
  min-height: 3.5rem;
  font-size: var(--fs-base);
}

.field-group[aria-invalid="true"] .chip__body {
  background: #241a4d;
}

/* ---------- Campo con buscador (localidad) ---------- */
/* La lista va en el flujo de la página: empuja lo de abajo y no queda tapada por el teclado */
.combo__list {
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  border-radius: var(--r-ctrl);
  background: var(--c-night-2);
  max-height: 20rem;
  overflow-y: auto;
}

.combo__option,
.combo__empty {
  padding: 0.75rem 1rem;
  border-radius: calc(var(--r-ctrl) - 0.4rem);
  font-size: var(--fs-sm);
  line-height: 1.3;
}

.combo__option {
  cursor: pointer;
}

.combo__main {
  font-weight: var(--w-semi);
}

.combo__rest {
  font-weight: var(--w-light);
  color: var(--c-text-2);
}

.combo__option:hover {
  background: #1d1b63;
}

.combo__option[aria-selected="true"] {
  background: var(--c-magenta);
}

.combo__option[aria-selected="true"] .combo__rest {
  color: var(--c-text);
}

.combo__empty {
  color: var(--c-text-2);
}

/* Área de texto corta (por ejemplo, un brief de 250 caracteres) */
textarea.field__control--short {
  min-height: 7rem;
}

/* ---------- Botón de texto (acciones secundarias, como Volver) ---------- */
.text-btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: var(--c-text-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--w-semi);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

.text-btn:hover {
  color: var(--c-text);
}

.text-btn:focus-visible {
  outline: 3px solid var(--c-yellow);
  outline-offset: 3px;
  border-radius: 0.5rem;
}

/* ---------- Mensaje general del formulario ---------- */
.form-status {
  font-size: var(--fs-sm);
  font-weight: var(--w-semi);
  color: var(--c-error);
}

.form-status:empty {
  display: none;
}

/* ---------- Pop-up (dialog nativo) ---------- */
.modal {
  position: fixed;
  width: min(100% - 2 * var(--gutter), 34rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  border: 0;
  border-radius: var(--r-ctrl);
  background: var(--c-night-2);
  color: var(--c-text);
  overflow: hidden;
}

/* Fondo plano semitransparente: sin desenfoque */
.modal::backdrop {
  background: rgb(6 6 30 / 0.86);
}

.modal__shape {
  position: absolute;
  pointer-events: none;
}

.modal__body {
  position: relative;
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.modal__title {
  font-size: var(--fs-lg);
  font-weight: var(--w-extra);
  text-transform: uppercase;
  line-height: 1;
}

.modal__text {
  font-size: var(--fs-md);
  font-weight: var(--w-light);
  line-height: 1.45;
  max-width: 26ch;
}

@media (prefers-reduced-motion: no-preference) {
  .modal[open] {
    animation: modal-in 0.55s var(--ease) both;
  }

  .modal[open]::backdrop {
    animation: backdrop-in 0.4s ease both;
  }
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.96);
  }
}

@keyframes backdrop-in {
  from {
    opacity: 0;
  }
}

/* ---------- Pie con logos institucionales ---------- */
.site-footer {
  position: relative;
  padding-block: var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  background: var(--c-night);
}

.site-footer__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__logos img {
  width: auto;
}

.logo-procordoba {
  height: clamp(2.25rem, 1.9rem + 1.2vw, 3rem);
}

/* El archivo trae aire transparente alrededor: se compensa con más alto */
.logo-ie-cordoba {
  height: clamp(3.6rem, 3rem + 2vw, 5rem);
}

@media (min-width: 768px) {
  .site-footer__logos {
    justify-content: flex-start;
  }
}