/*
 * Sitio público de resilifyapp.com — una sola hoja para las cuatro páginas.
 * Spec: Sprints/Sprint_9/S9-P-1/diseno/spec.md. Sin JavaScript: el índice
 * plegable es <details>. Siempre en tema claro (decisión P-15): no hay modo oscuro.
 */

/* ── Fuentes: los mismos woff2 (subset latin) que sirve el panel ─────────── */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fuentes/instrument-sans-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fuentes/instrument-serif-latin.woff2') format('woff2');
}

/*
 * ── Tokens ────────────────────────────────────────────────────────────────
 * Copia del bloque :root de src/app/globals.css: se actualizan juntos.
 * tests/sitio_publico.test.ts falla si un valor diverge.
 */
:root {
  color-scheme: light;

  --radius: 0.5rem;

  --background: #ffffff;
  --foreground: #1a1424;

  --primary: #7c3aed;
  --primary-foreground: #ffffff;
  --primary-dark: #5b21b6;

  --muted: #f8f6fc;
  --muted-foreground: #665a78;

  --accent: #f1e9fe;
  --accent-foreground: #5b21b6;

  --border: #e8e2f2;
  --ring: #7c3aed;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--background);
  color: var(--foreground);
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a:hover {
  color: var(--primary-dark);
  text-decoration-thickness: 2px;
}

a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 4px;
}

strong {
  font-weight: 600;
}

/* ── Marco común: encabezado, contenido, pie ─────────────────────────────── */
.contenedor {
  width: 100%;
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: 16px;
}

.encabezado {
  border-bottom: 1px solid var(--border);
}

.encabezado .contenedor {
  display: flex;
  align-items: center;
  min-height: 64px;
}

.marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--foreground);
  text-decoration: none;
}

.marca:hover {
  color: var(--foreground);
  text-decoration: underline;
}

main {
  flex: 1 0 auto;
}

.pie {
  border-top: 1px solid var(--border);
}

.pie .contenedor {
  padding-block: 24px;
}

.pie ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 24px;
}

.pie a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted-foreground);
}

.pie a:hover {
  color: var(--foreground);
}

/* ── Botón: una sola variante, la primaria ──────────────────────────────── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: calc(var(--radius) - 2px);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  text-decoration: none;
}

.boton:hover {
  background: var(--primary-dark);
  color: var(--primary-foreground);
}

.boton:focus-visible {
  border-radius: calc(var(--radius) - 2px);
}

.boton svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .boton {
    transition: background-color 150ms ease;
  }
}

/* ── Inicio ─────────────────────────────────────────────────────────────── */
.inicio-main {
  display: flex;
  align-items: center;
}

.inicio-main .contenedor {
  padding-block: 48px;
}

.hero {
  text-align: center;
  margin-bottom: 48px;
}

.hero h1 {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.05;
}

.hero p {
  margin: 12px auto 0;
  max-width: 65ch;
  font-size: 18px;
  line-height: 1.3;
  color: var(--muted-foreground);
  text-wrap: balance;
}

.caminos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.camino {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: calc(var(--radius) + 4px);
  background: var(--muted);
  border: 1px solid var(--border);
}

.camino-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: calc(var(--radius) + 4px);
  background: var(--accent);
  color: var(--accent-foreground);
}

.camino-icono svg {
  width: 24px;
  height: 24px;
}

.camino h2 {
  margin: 4px 0 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
}

.camino p {
  margin: 0;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

.camino .accion {
  margin-top: auto;
  padding-top: 12px;
}

.camino .accion .boton {
  width: 100%;
}

/* Correo escrito bajo "Quiero usar Resilify" (P-11) */
.camino .camino-correo {
  font-size: 14px;
  line-height: 1.45;
}

/* ── Páginas legales ────────────────────────────────────────────────────── */
.legal-main .contenedor {
  padding-block: 32px 48px;
}

.legal-cabecera {
  margin-bottom: 24px;
}

.legal-cabecera h1,
.no-encontrada h1 {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
}

.fecha {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted-foreground);
}

/* Índice: plegable en angosto, columna fija desde 1024 */
.indice ol {
  list-style: none;
  margin: 0;
}

.indice a {
  display: block;
  padding: 4px 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted-foreground);
  text-decoration: none;
}

.indice a:hover {
  color: var(--foreground);
  text-decoration: underline;
}

.indice-movil {
  margin-bottom: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
}

.indice-movil summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
}

.indice-movil summary::-webkit-details-marker {
  display: none;
}

.indice-movil summary svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .indice-movil summary svg {
    transition: transform 150ms ease;
  }
}

.indice-movil[open] summary svg {
  transform: rotate(180deg);
}

.indice-movil ol {
  padding: 0 16px 12px;
}

.indice-movil a {
  display: flex;
  align-items: center;
  min-height: 32px;
}

.indice-lateral {
  display: none;
}

.indice-titulo {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.indice-lateral ol {
  padding: 0;
  border-left: 1px solid var(--border);
}

.indice-lateral a {
  padding: 4px 0 4px 12px;
  margin-left: -1px;
  border-left: 2px solid transparent;
}

/* Texto largo */
.prosa {
  max-width: 65ch;
}

.prosa h2 {
  margin: 48px 0 12px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  scroll-margin-top: 24px;
}

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

.prosa p {
  margin: 0 0 16px;
}

.prosa ul {
  margin: 0 0 16px;
  padding-left: 24px;
}

.prosa li {
  margin-bottom: 8px;
  padding-left: 4px;
}

.prosa li::marker {
  color: var(--muted-foreground);
}

.prosa > :last-child {
  margin-bottom: 0;
}

/* ── 404 ────────────────────────────────────────────────────────────────── */
.no-encontrada {
  display: flex;
  align-items: center;
}

.no-encontrada .contenedor {
  padding-block: 48px;
  text-align: center;
}

.no-encontrada p {
  margin: 12px auto 32px;
  max-width: 40ch;
  color: var(--muted-foreground);
}

/* ── ≥ 768 ──────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .contenedor {
    padding-inline: 24px;
  }

  .pie ul {
    justify-content: flex-start;
  }

  /*
   * Dos columnas con subgrid: las filas (icono, título, texto, acción, correo)
   * se comparten entre las dos tarjetas, así los dos botones quedan a la misma
   * altura aunque solo "Tengo un negocio" lleve el correo debajo.
   */
  .caminos {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, auto);
    column-gap: 24px;
    row-gap: 0;
  }

  .camino {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 12px;
    align-items: start;
    padding: 32px;
  }

  .camino .accion .boton {
    width: auto;
  }

  .legal-main .contenedor {
    padding-block: 48px;
  }

  .legal-cabecera h1,
  .no-encontrada h1 {
    font-size: 40px;
    line-height: 1.05;
  }

  .prosa h2 {
    font-size: 22px;
    line-height: 1.25;
  }
}

/* ── ≥ 1024: índice lateral fijo ────────────────────────────────────────── */
@media (min-width: 1024px) {
  .legal-grilla {
    display: grid;
    grid-template-columns: 224px minmax(0, 65ch);
    gap: 48px;
    align-items: start;
  }

  .indice-movil {
    display: none;
  }

  .indice-lateral {
    display: block;
    position: sticky;
    top: 24px;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    /* El scroll propio recorta lo que sobresale: 4 px de margen para que el foco se vea entero */
    padding: 4px;
    margin-inline: -4px;
  }
}

/* ── Impresión: solo el contenido ───────────────────────────────────────── */
@media print {
  .encabezado,
  .pie,
  .indice {
    display: none;
  }
}