/* Aube · sitio público. Criterio de diseño: Emil Kowalski (detalles que no se
   notan pero suman). Movimiento solo en la entrada de la página (se ve una vez)
   y como respuesta al presionar; nada en hover repetitivo. Siempre en tema
   claro, aunque el sistema esté en modo oscuro. */

:root {
  --fondo: #ffffff;
  --superficie: #f6f9f8;
  --texto: #0e2b2b;
  --tenue: #5a6b6a;
  --linea: #e2eae8;
  --linea-fuerte: #cbd8d5;
  --acento: #1f8a84;
  --acento-hover: #197570;
  --sobre-acento: #ffffff;
  --anillo: rgba(31, 138, 132, 0.35);

  /* Curvas fuertes: las del navegador se quedan cortas. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.65 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
img { max-width: 100%; }
::selection { background: var(--anillo); }

.contenedor { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.lectura { max-width: 680px; }

/* ---------- Cabecera ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  border-bottom: 1px solid var(--linea);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
}
header .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-height: 64px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.marca {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--texto);
  font-family: "Montserrat", "Inter", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1;
}
.marca img { height: 26px; width: auto; display: block; }
nav { display: flex; gap: 4px; flex-wrap: wrap; font-size: 14px; margin: 0 -10px; }
nav a {
  color: var(--tenue);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  transition: color 150ms ease, background-color 150ms ease;
}
nav a[aria-current] { color: var(--texto); font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  nav a:hover { color: var(--texto); background: var(--superficie); }
}

/* ---------- Tipografía ---------- */
main { padding: 56px 0 72px; }
h1 {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 650;
  margin: 0 0 12px;
  text-wrap: balance;
}
h2 { font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; margin: 44px 0 8px; text-wrap: balance; }
h3 { font-size: 16px; font-weight: 600; margin: 24px 0 4px; }
p, li { text-wrap: pretty; }
.tenue { color: var(--tenue); font-size: 14px; }
a { color: var(--acento); text-underline-offset: 3px; text-decoration-thickness: 1px; }
ul, ol { padding-left: 22px; }
li { margin: 6px 0; }
li::marker { color: var(--tenue); }
strong { font-weight: 600; }

/* Anillo de foco visible solo con teclado. */
a:focus-visible, .boton:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  background: var(--acento);
  color: var(--sobre-acento);
  border: 1px solid transparent;
  /* Al presionar se hunde un poco: la página "escucha". */
  transition: transform 160ms var(--ease-out), background-color 150ms ease, border-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.boton:active { transform: scale(0.97); }
.boton.secundario { background: transparent; color: var(--texto); border-color: var(--linea-fuerte); }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--acento-hover); }
  .boton.secundario:hover { background: var(--superficie); }
}
.botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ---------- Portada ---------- */
.portada {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.portada .bajada { font-size: 18px; color: var(--tenue); max-width: 520px; margin: 0; }
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tenue);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 4px 12px 4px 8px;
  margin-bottom: 20px;
}
.etiqueta i { width: 8px; height: 8px; border-radius: 50%; background: var(--acento); display: block; }
.foto {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--linea);
  aspect-ratio: 1;
  background: var(--superficie);
}
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

.rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 72px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: 16px;
  overflow: hidden;
}
.tarjeta { background: var(--fondo); padding: 24px; }
.tarjeta h3 { margin: 0 0 6px; }
.tarjeta p { margin: 0; color: var(--tenue); font-size: 15px; }

@media (max-width: 760px) {
  main { padding-top: 32px; }
  .portada { grid-template-columns: 1fr; gap: 32px; }
  .rejilla { grid-template-columns: 1fr; margin-top: 48px; }
}

/* ---------- Páginas legales ---------- */
.aviso {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--acento);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 24px 0;
}
.aviso p { margin: 0; }
.fecha {
  display: inline-block;
  font-size: 13px;
  color: var(--tenue);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Pie ---------- */
footer { border-top: 1px solid var(--linea); padding: 24px 0 40px; font-size: 14px; color: var(--tenue); }
footer .contenedor { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
footer nav { margin: 0 -10px; }

/* ---------- Entrada de la página ----------
   Solo al cargar (se ve una vez por visita): sube 8 px y aparece, en cascada
   de 60 ms. La foto se descubre de abajo hacia arriba con clip-path. */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes descubrir {
  from { clip-path: inset(100% 0 0 0 round 20px); transform: scale(1.04); }
  to { clip-path: inset(0 0 0 0 round 20px); transform: none; }
}
.entra { animation: aparecer 500ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
.foto.entra { animation: aparecer 500ms var(--ease-out) both 120ms; }
.foto.entra img { animation: descubrir 1100ms var(--ease-in-out) both 160ms; }

/* Reducir movimiento: sin desplazamientos, solo un fundido corto. */
@media (prefers-reduced-motion: reduce) {
  @keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
  .entra, .foto.entra { animation-duration: 200ms; animation-delay: 0ms; }
  .foto.entra img { animation: none; }
  .boton { transition: background-color 150ms ease, border-color 150ms ease; }
  .boton:active { transform: none; }
}