/* IAA · Hoja de la portada provisional de iaa.org.mx.
   Se importa despues de iaa-tokens.css y nunca antes.

   La portada es una pagina independiente del sitio que se revisa en /dev: no
   carga ninguna hoja suya. Esta hoja repite, para las piezas que la portada
   usa, las mismas reglas de public/assets/css/iaa-base.css. Son dos archivos
   separados a proposito, para que tocar el sitio no mueva esta pagina.

   Regla del manual (secciones 9 y 12): aqui no se escribe ningun valor
   cromatico ni tipografico literal. Todo sale de var(--iaa-*).
   Sistema plano: sin degradados, radios de 2 a 8 px, sin sombras. */

/* --- Base --- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--iaa-crema);
  color: var(--iaa-navy);
  font-family: var(--iaa-font-texto);
  font-size: var(--iaa-txt-base);
  line-height: var(--iaa-lh-texto);
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--iaa-font-titulo);
  font-weight: 700;
  line-height: var(--iaa-lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--iaa-sp-2);
}

h1 { font-size: var(--iaa-txt-3xl); }
h2 { font-size: var(--iaa-txt-2xl); margin-top: 0; }

p { margin: 0 0 var(--iaa-sp-2); max-width: var(--iaa-ancho-texto); }

img { max-width: 100%; }

/* Foco visible en todo elemento interactivo (manual, seccion 9). */
a:focus-visible { outline: 2px solid var(--iaa-rojo); outline-offset: 3px; }

/* Sobre fondo oscuro el foco va en blanco: el rojo sobre navy da 1.83:1. */
.iaa-pie a:focus-visible { outline-color: var(--iaa-blanco); }

/* Enlace de salto al contenido, visible solo al enfocarlo con el teclado. */
.iaa-salto {
  position: absolute;
  left: -9999px;
  background: var(--iaa-rojo);
  color: var(--iaa-blanco);
  font-family: var(--iaa-font-titulo);
  font-size: var(--iaa-txt-sm);
  padding: var(--iaa-sp-1) var(--iaa-sp-2);
  z-index: 10;
}
.iaa-salto:focus { left: var(--iaa-sp-2); top: var(--iaa-sp-1); }

/* --- Reticula --- */

.iaa-contenedor {
  width: 100%;
  max-width: var(--iaa-ancho-max);
  margin-inline: auto;
  padding-inline: var(--iaa-sp-3);
}

.iaa-seccion { padding-block: var(--iaa-sp-8); }
.iaa-seccion--alterna { background: var(--iaa-blanco); }

/* --- Componentes del manual, seccion 9 --- */

.iaa-kicker {
  font-family: var(--iaa-font-titulo);
  font-weight: 600;
  font-size: var(--iaa-txt-xs);
  text-transform: uppercase;
  letter-spacing: var(--iaa-track-caps);
  color: var(--iaa-rojo);
  margin: 0 0 var(--iaa-sp-1);
}

/* Sobre navy los rotulos van en blanco, nunca en rojo (manual, seccion 7). */
.iaa-kicker--oscuro { color: var(--iaa-blanco); }

.iaa-btn {
  display: inline-block;
  font-family: var(--iaa-font-titulo);
  font-weight: 600;
  font-size: var(--iaa-txt-sm);
  padding: .75rem 1.5rem;
  border-radius: var(--iaa-radio-sm);
  border: 0;
  letter-spacing: .02em;
  text-decoration: none;
}

.iaa-btn--secundario {
  background: transparent;
  color: var(--iaa-rojo);
  box-shadow: inset 0 0 0 1.5px var(--iaa-rojo);
}

/* Los tres llamados van sin href mientras no exista su destino, asi que
   todavia no son interactivos: el :hover se declara sobre a[href] para que
   solo aplique cuando el enlace ya lleve a algun lado. */
a.iaa-btn--secundario[href]:hover {
  color: var(--iaa-rojo-hover);
  box-shadow: inset 0 0 0 1.5px var(--iaa-rojo-hover);
}

/* --- Encabezado --- */

.iaa-encabezado {
  background: var(--iaa-blanco);
  border-bottom: var(--iaa-borde);
}

.iaa-encabezado__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--iaa-sp-3);
  flex-wrap: wrap;
  padding-block: var(--iaa-sp-2);
}

/* El logotipo va al filo izquierdo del contenedor, alineado con el rotulo y el
   titulo de la portada. Se le quita el aire de ese lado, no el de los otros
   tres: el area de proteccion de la seccion 4 del manual la cumple ahi el
   margen del contenedor, que es mayor que 0.86em y esta vacio. */
.iaa-encabezado__marca { display: inline-flex; padding: 0.2em; padding-left: 0; }
.iaa-encabezado__marca .iaa-logo { margin-left: 0; }

/* Area de proteccion del bloque, seccion 4 del manual. */
.iaa-logo { height: 2.2rem; width: auto; display: block; margin: var(--iaa-logo-aire); }
.iaa-logo--pie { height: 2.6rem; }

.iaa-nav__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iaa-sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.iaa-nav__enlace {
  font-family: var(--iaa-font-titulo);
  font-weight: 500;
  font-size: var(--iaa-txt-sm);
  color: var(--iaa-gris-700);
  text-decoration: none;
  padding-block: var(--iaa-sp-1);
}
.iaa-nav__enlace:hover { color: var(--iaa-rojo); }

/* --- Portada --- */

/* Menos aire arriba que en el sitio: aqui la portada es toda la pagina, no la
   entrada a un recorrido, asi que el titulo entra antes. */
.iaa-portada {
  background: var(--iaa-blanco);
  border-bottom: var(--iaa-borde);
  padding-block: var(--iaa-sp-6) var(--iaa-sp-8);
}

/* Sin ancho maximo: el titulo va en una sola linea mientras quepa. En pantalla
   angosta cae solo en dos, que es lo esperado ahi. */
.iaa-titulo-portada {
  font-size: var(--iaa-txt-4xl);
  max-width: none;
}

.iaa-entrada {
  font-size: var(--iaa-txt-lg);
  color: var(--iaa-gris-700);
  max-width: var(--iaa-ancho-texto);
}

.iaa-prose a {
  color: var(--iaa-rojo);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}

/* --- Los tres llamados a la accion --- */

.iaa-llamados {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--iaa-sp-4);
}

/* Filete rojo arriba de cada bloque, como en los pasos numerados del sitio. */
.iaa-llamados__bloque {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--iaa-rojo);
  padding-top: var(--iaa-sp-2);
}

.iaa-llamados__bloque h2 {
  font-size: var(--iaa-txt-lg);
  margin-top: var(--iaa-sp-1);
}

.iaa-llamados__bloque p {
  color: var(--iaa-gris-700);
  flex: 1;
}

.iaa-llamados__bloque .iaa-btn {
  align-self: start;
  margin-top: var(--iaa-sp-1);
}

/* --- Pie --- */

.iaa-pie {
  background: var(--iaa-navy);
  color: var(--iaa-blanco);
  padding-block: var(--iaa-sp-8);
}

.iaa-pie__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--iaa-sp-6);
}

.iaa-pie a {
  font-family: var(--iaa-font-titulo);
  font-size: var(--iaa-txt-sm);
  color: var(--iaa-blanco);
  text-decoration: none;
}
.iaa-pie a:hover { text-decoration: underline; text-underline-offset: .18em; }

.iaa-pie__legal {
  font-size: var(--iaa-txt-sm);
  color: var(--iaa-gris-300);
  margin: 0;
}

/* Renglon separado del bloque anterior, no pegado al de arriba. */
.iaa-pie__legal--aparte { margin-top: var(--iaa-sp-2); }

/* En el pie el logotipo arranca al filo de la columna, arriba y a la izquierda,
   para que su borde superior quede a la misma altura que el rotulo CONTACTO de
   la columna de al lado. El area de proteccion del manual la cumplen ahi el
   relleno de la seccion y la separacion de la rejilla, ambos mayores que
   0.86em y vacios. */
.iaa-pie__marca .iaa-logo { margin: 0 0 var(--iaa-sp-2); }

.iaa-pie__datos {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--iaa-sp-1);
  font-family: var(--iaa-font-titulo);
  font-size: var(--iaa-txt-sm);
  color: var(--iaa-gris-300);
}
.iaa-pie__datos a { color: var(--iaa-blanco); }

/* --- Pantallas angostas --- */

@media (max-width: 48rem) {
  h1 { font-size: var(--iaa-txt-2xl); }
  .iaa-titulo-portada { font-size: var(--iaa-txt-3xl); }
  .iaa-portada { padding-block: var(--iaa-sp-8); }
}

/* --- Texto largo: aviso de privacidad --- */

.iaa-documento h2 {
  font-size: var(--iaa-txt-xl);
  margin-top: var(--iaa-sp-4);
}

.iaa-documento h2:first-child { margin-top: 0; }

.iaa-documento ul {
  max-width: var(--iaa-ancho-texto);
  padding-left: var(--iaa-sp-3);
  margin: 0 0 var(--iaa-sp-2);
}

.iaa-documento li { margin-bottom: var(--iaa-sp-1); }

/* --- Formulario --- */

.iaa-formulario {
  max-width: 34rem;
  display: grid;
  gap: var(--iaa-sp-3);
}

.iaa-campo {
  display: grid;
  gap: var(--iaa-sp-1);
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.iaa-campo > label,
.iaa-campo legend {
  font-family: var(--iaa-font-titulo);
  font-weight: 600;
  font-size: var(--iaa-txt-sm);
  padding: 0;
}

/* Gris 700, no 500: estas dos piezas viven sobre crema, donde el gris 500 da
   4.22:1 y no llega al minimo AA de 4.5:1 que pide la seccion 9 del manual.
   El 700 da 7.84:1. */
.iaa-campo__opcional {
  font-weight: 400;
  color: var(--iaa-gris-700);
  text-transform: none;
  letter-spacing: 0;
}

.iaa-campo input[type="text"],
.iaa-campo input[type="email"],
.iaa-campo input[type="tel"],
.iaa-campo select,
.iaa-campo textarea {
  width: 100%;
  font-family: var(--iaa-font-texto);
  font-size: var(--iaa-txt-base);
  line-height: var(--iaa-lh-normal);
  color: var(--iaa-navy);
  background: var(--iaa-blanco);
  border: 1px solid var(--iaa-gris-300);
  border-radius: var(--iaa-radio-sm);
  padding: .625rem .75rem;
}

.iaa-campo textarea { resize: vertical; }

.iaa-campo input:focus-visible,
.iaa-campo select:focus-visible,
.iaa-campo textarea:focus-visible {
  outline: 2px solid var(--iaa-rojo);
  outline-offset: 1px;
  border-color: var(--iaa-rojo);
}

/* Campo con error: el borde rojo no es la unica senal, debajo va el mensaje. */
.iaa-campo [aria-invalid="true"] { border-color: var(--iaa-rojo); }

.iaa-campo__ayuda {
  font-size: var(--iaa-txt-sm);
  color: var(--iaa-gris-700);
}

.iaa-campo__error {
  font-family: var(--iaa-font-titulo);
  font-size: var(--iaa-txt-sm);
  color: var(--iaa-rojo);
}

/* Opciones de una sola linea: radios y casilla. */
.iaa-campo--opciones { display: grid; gap: var(--iaa-sp-1); }

.iaa-opcion {
  display: flex;
  align-items: baseline;
  gap: var(--iaa-sp-1);
  font-family: var(--iaa-font-texto);
  font-size: var(--iaa-txt-base);
}

.iaa-opcion input { accent-color: var(--iaa-rojo); }

.iaa-campo--casilla a {
  color: var(--iaa-rojo);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.iaa-formulario .iaa-btn { justify-self: start; cursor: pointer; }

.iaa-btn--primario { background: var(--iaa-rojo); color: var(--iaa-blanco); }
.iaa-btn--primario:hover { background: var(--iaa-rojo-hover); }

/* Campo trampa contra programas automaticos. Fuera de la vista y fuera del
   recorrido del teclado, pero sin display:none, que algunos lo ignoran. */
.iaa-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Aviso arriba del formulario --- */

.iaa-aviso {
  max-width: 34rem;
  margin: 0 0 var(--iaa-sp-3);
  padding: var(--iaa-sp-2);
  border-left: 3px solid var(--iaa-rojo);
  background: var(--iaa-rojo-tenue);
  border-radius: 0 var(--iaa-radio-sm) var(--iaa-radio-sm) 0;
}

/* Rotulo que separa los grupos de un formulario largo. */
.iaa-formulario .iaa-kicker { margin: var(--iaa-sp-2) 0 0; }
.iaa-formulario .iaa-kicker:first-of-type { margin-top: 0; }