/* =========================================================================
   2-base.css — lo que vale para TODO el sitio
   -------------------------------------------------------------------------
   Aquí va lo que no pertenece a ninguna sección en particular: cómo se ve un
   párrafo, un enlace, un botón, y las tres o cuatro clases de uso general.

   Si una regla solo sirve para una sección (el hero, el pie, el buscador),
   NO va aquí: va en 3-componentes.css. Esa es toda la diferencia entre los
   dos archivos.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Puesta a cero
   -------------------------------------------------------------------------
   Cada navegador trae sus propios márgenes y tamaños por omisión, y no son
   iguales entre sí. Estas primeras líneas los emparejan para partir del mismo
   punto en todos.

   `box-sizing:border-box` es la más importante de todas: hace que el ancho de
   una caja incluya su relleno y su borde. Sin esto, una caja de 300px con 20px
   de padding mide 340px y todo se desborda.
   ------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:Montserrat,"Segoe UI",system-ui,sans-serif;
  font-size:var(--t-0);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{margin:0;line-height:1.06;letter-spacing:-.025em;text-wrap:balance;font-weight:900}
p{margin:0;text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
a{color:var(--cc-azul);text-underline-offset:3px;text-decoration-thickness:1.5px}

/* El contorno que aparece al navegar con la tecla Tab. NUNCA se quita: es lo
   único que le dice a quien no usa ratón dónde está parado. */
:focus-visible{outline:3px solid var(--cc-rojo-accion);outline-offset:3px;border-radius:3px}

::selection{background:var(--cc-amarillo);color:#111}

/* -------------------------------------------------------------------------
   2. Utilidades — clases sueltas que se reutilizan en todas las secciones
   ------------------------------------------------------------------------- */

/* .wrap centra el contenido y le pone aire a los lados. Va DENTRO de cada
   <section>, no envolviendo la página: así el fondo de color de la sección
   llega hasta el borde de la pantalla pero el texto no. */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.5rem)}

.lectura{max-width:var(--lectura)}
.flow{display:flex;flex-direction:column;gap:var(--e-2)}
.acciones{display:flex;flex-wrap:wrap;gap:var(--e-2)}

/* Texto que solo leen los lectores de pantalla. No se usa display:none:
   eso lo escondería también de ellos. */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Enlace de "saltar al contenido": vive fuera de la pantalla y solo aparece
   cuando alguien llega a él con Tab. Le ahorra a quien navega con teclado
   pasar por los 5 enlaces del menú en cada página. */
.saltar{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--cc-azul-profundo);color:#fff;padding:1rem 1.5rem;
  font-weight:700;text-decoration:none;
}
.saltar:focus{left:0}

/* Etiqueta pequeña que va encima de cada título de sección. */
.eyebrow{
  font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-50);margin:0 0 var(--e-2);display:flex;align-items:center;gap:.6rem;
}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--linea);max-width:5rem}

/* -------------------------------------------------------------------------
   3. Botones
   -------------------------------------------------------------------------
   Jerarquía estricta: NUNCA dos botones primarios visibles a la vez. El
   primario es rojo y hay uno solo por pantalla; todo lo demás es secundario.
   Si todo grita, nada se oye.

   min-height:52px no es capricho: es el tamaño mínimo cómodo para un dedo.
   ------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:inherit;font-size:1.02rem;font-weight:700;letter-spacing:-.01em;
  padding:.95rem 1.6rem;border-radius:var(--radio);border:2px solid transparent;
  cursor:pointer;text-decoration:none;min-height:52px;
  transition:transform var(--micro) var(--curva), background-color var(--micro), box-shadow var(--micro);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn--primario{background:var(--cc-rojo-accion);color:#fff;box-shadow:0 6px 18px -8px rgba(213,61,37,.75)}
.btn--primario:hover{background:#c1341e}
.btn--secundario{background:transparent;color:var(--cc-azul);border-color:var(--linea-fuerte)}
.btn--secundario:hover{border-color:var(--cc-azul);background:var(--papel-2)}
.btn--claro{background:#fff;color:var(--cc-azul-profundo)}
.btn--compacto{padding:.62rem 1.05rem;font-size:.92rem;min-height:44px;flex-shrink:0}
.btn--sm{padding:.7rem 1.1rem;font-size:.92rem;min-height:48px}

.btn .flecha{transition:transform var(--micro) var(--curva)}
.btn:hover .flecha{transform:translateX(3px)}

/* -------------------------------------------------------------------------
   4. Ritmo vertical de las secciones
   ------------------------------------------------------------------------- */
section{padding-block:clamp(3.5rem,8vw,6.5rem)}

/* La cabecera es fija. Sin esta línea, al hacer clic en un enlace de menú el
   título de la sección quedaría escondido DEBAJO de la cabecera. */
section[id]{scroll-margin-top:5.5rem}
html{scroll-behavior:smooth}

/* -------------------------------------------------------------------------
   5. La barra de cuenta atrás
   -------------------------------------------------------------------------
   Vive aquí y no en 3-componentes.css porque aparece en dos sitios distintos
   (la tarjeta del hero y cada tarjeta del buscador) y en los dos tiene que
   verse EXACTAMENTE igual: es la misma información.

   La rellena js/2-cuenta-atras.js. Nace oculta con el atributo `hidden` en el
   HTML: si el JavaScript no llega a correr, una barra vacía sin número al
   lado no comunicaría nada.
   ------------------------------------------------------------------------- */
.cuenta{margin-top:.95rem}
.cuenta-riel{height:8px;border-radius:99px;background:var(--linea);overflow:hidden}
.cuenta-riel span{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--cc-verde),var(--cc-azul));
  transition:width 900ms var(--curva) 250ms;
}
.cuenta-texto{
  font-size:.86rem;font-weight:700;color:var(--tinta-70);margin-top:.45rem;
  font-variant-numeric:tabular-nums;
}
/* Faltan 7 días o menos: la barra cambia a los colores de urgencia. */
.cuenta--pronto .cuenta-riel span{background:linear-gradient(90deg,var(--cc-amarillo),var(--cc-rojo-accion))}
.cuenta--pronto .cuenta-texto{color:var(--cc-rojo-accion)}

/* -------------------------------------------------------------------------
   6. El emblema — el círculo de cuatro arcos
   -------------------------------------------------------------------------
   Sale en el hero, en el cierre de /aliarse y en el 404. Lo común va aquí;
   el tamaño y el comportamiento de cada uno, en 3-componentes.css.
   ------------------------------------------------------------------------- */
.emblema{margin:0}
.emblema svg{margin-inline:auto;display:block}
.arco{fill:none;stroke-width:15;stroke-linecap:round}
.giro{transform-origin:50% 50%;animation:girar 50s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* -------------------------------------------------------------------------
   7. Respeto por quien pidió menos movimiento
   -------------------------------------------------------------------------
   Es un ajuste del sistema operativo (Windows: Configuración > Accesibilidad >
   Efectos visuales). Quien lo activa suele hacerlo porque el movimiento le
   provoca mareo o migraña. Apagarlo aquí no es un detalle: es accesibilidad.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .giro{animation:none}
  .cuenta-riel span{transition:none}
}