/* ============================================================
   Empaná — sitio estático legal
   Sin frameworks, sin JS, sin requests a terceros.
   Fuente de titulares autohospedada en /fonts/ (SIL OFL 1.1).
   ============================================================ */

@font-face {
  font-family: "Alfa Slab One";
  src: url("fonts/alfa-slab-one-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Subset EMPAN, solo para el wordmark compuesto */
@font-face {
  font-family: "Zilla Slab";
  src: url("fonts/zilla-slab-bold-wordmark.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --crema: #f7f0e5;
  --blanco: #ffffff;
  --rojo: #c8102e;      /* 5.2:1 sobre crema, 5.9:1 bajo blanco — AA texto normal */
  --dorado: #f5c518;    /* solo decorativo: no cumple AA como color de texto */
  --tinta: #1a1a1a;
  --tinta-suave: #4a4640;
  --borde: #e4dccc;
  --display: "Alfa Slab One", "Rockwell", "Georgia", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 100%; /* 16px base */
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.65;
  color: var(--tinta);
  background: var(--crema);
  -webkit-text-size-adjust: 100%;
}

/* ---------- Cabecera ---------- */

.site-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 3px solid var(--rojo);
  background: var(--crema);
}

/* Wordmark compuesto EMPANÁ: Zilla Slab 700, tracking parejo (0.14 em),
   estirado sutil y trazo reforzado; el acento de la Á es un paralelogramo
   dorado centrado sobre el vértice. Espejo del widget Flutter y del admin. */
.site-header .wordmark {
  font-family: "Zilla Slab", var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--rojo);
  text-decoration: none;
}

.site-header .wordmark > span,
.hero .wordmark-big > span {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.14em;
  margin-right: -0.14em;
  -webkit-text-stroke: 0.02em currentColor;
  transform: scaleX(1.06);
}

.wm-a {
  position: relative;
  display: inline-block;
}

.wm-acc {
  position: absolute;
  left: calc(50% - 0.22em);
  top: -0.025em;
  width: 0.3em;
  height: 0.09em;
  background: var(--dorado);
  -webkit-text-stroke: 0;
  transform: rotate(-15deg) skewX(-24deg);
}

.site-header .wordmark:hover,
.site-header .wordmark:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--dorado);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* ---------- Contenido principal ---------- */

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

article.doc {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 2.5rem clamp(1.25rem, 5vw, 3rem);
}

h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 5vw, 2.375rem);
  line-height: 1.2;
  color: var(--rojo);
  margin: 0 0 0.5rem;
}

.doc-meta {
  color: var(--tinta-suave);
  font-size: 0.9375rem;
  margin: 0 0 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 3px solid var(--dorado);
}

h2 {
  font-size: 1.3125rem;
  line-height: 1.3;
  margin: 2.25rem 0 0.75rem;
  color: var(--tinta);
}

h3 {
  font-size: 1.0625rem;
  margin: 1.5rem 0 0.5rem;
}

p,
ul,
ol {
  margin: 0 0 1rem;
}

ul,
ol {
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.375rem;
}

a {
  color: var(--rojo);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover,
a:focus-visible {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: 2px;
  border-radius: 2px;
}

strong {
  font-weight: 600;
}

/* Marcadores pendientes de sustituir */
.placeholder {
  background: #fdf3c4;
  border-radius: 4px;
  padding: 0 0.25em;
  font-style: normal;
}

/* ---------- Tablas ---------- */

.table-wrap {
  overflow-x: auto;
  margin: 0 0 1rem;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem;
}

caption {
  text-align: left;
  font-weight: 600;
  padding-bottom: 0.5rem;
}

th,
td {
  border: 1px solid var(--borde);
  padding: 0.625rem 0.75rem;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--crema);
}

/* ---------- Portada ---------- */

/* El hero ocupa la pantalla completa; los perks quedan anclados abajo y el
   borde inferior es un «repulgue» festoneado (.crimp) hacia el pie blanco. */
.hero {
  display: flex;
  flex-direction: column;
  min-height: 92vh;
  min-height: 100svh;
  max-width: none;
  text-align: center;
  padding: 0;
}

.hero-inner {
  margin: auto;
  padding: clamp(3rem, 8vh, 5rem) 1.5rem 2.5rem;
}

.hero-empanada {
  width: clamp(5.5rem, 14vw, 7.5rem);
  height: auto;
  display: block;
  margin: 0 auto 0.5rem;
}

/* Vapor: hebras que suben y se desvanecen en bucle */
.steam path {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .steam path {
    animation: vapor 3.2s ease-out infinite;
  }

  .steam .s2 {
    animation-delay: 1.1s;
  }

  .steam .s3 {
    animation-delay: 2.2s;
  }

  @keyframes vapor {
    0% {
      opacity: 0;
      transform: translateY(5px);
    }
    35% {
      opacity: 0.55;
    }
    100% {
      opacity: 0;
      transform: translateY(-7px);
    }
  }

  /* Entrada escalonada al cargar */
  .hero-inner > * {
    animation: sube 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }

  .hero-inner > :nth-child(2) { animation-delay: 0.07s; }
  .hero-inner > :nth-child(3) { animation-delay: 0.14s; }
  .hero-inner > :nth-child(4) { animation-delay: 0.21s; }
  .hero-inner > :nth-child(5) { animation-delay: 0.3s; }
  .hero-inner > :nth-child(6) { animation-delay: 0.38s; }
  .hero-inner > :nth-child(7) { animation-delay: 0.44s; }

  @keyframes sube {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .steam path {
    opacity: 0.45;
  }
}

.hero .kicker {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rojo);
  margin: 0 0 0.75rem;
}

.hero .wordmark-big {
  font-family: "Zilla Slab", var(--display);
  font-weight: 700;
  font-size: clamp(3rem, 12vw, 6rem);
  line-height: 1.1;
  color: var(--rojo);
  margin: 0;
}

.hero .tagline {
  font-size: clamp(1.1875rem, 2.5vw, 1.375rem);
  line-height: 1.45;
  color: var(--tinta-suave);
  margin: 1rem 0 0;
}

.cta-row {
  margin: 2.25rem 0 0;
}

/* CTA principal: botón dorado tipo cartel, con sombra dura del mismo tono */
.cta {
  display: inline-block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.125rem, 2.5vw, 1.3125rem);
  letter-spacing: 0.02em;
  color: var(--tinta);
  background: var(--dorado);
  text-decoration: none;
  padding: 0.9rem 2.5rem 1rem;
  border-radius: 999px;
  box-shadow: 0 4px 0 #c79a00;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #c79a00;
}

.cta:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #c79a00;
}

.cta:focus-visible {
  outline: 3px solid var(--rojo);
  outline-offset: 3px;
}

/* Enlace secundario a WhatsApp, bajo el CTA principal */
.wa-row {
  margin: 1.25rem 0 0;
}

.wa-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  color: var(--tinta-suave);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.wa-link:hover {
  color: var(--tinta);
  border-bottom-color: currentColor;
}

.wa-link:focus-visible {
  outline: 3px solid var(--rojo);
  outline-offset: 3px;
}

.wa-icon {
  width: 1.5em;
  height: 1.5em;
  color: #25d366;
  flex: none;
}

.store-note {
  font-size: 0.9375rem;
  color: var(--tinta-suave);
  margin: 2.5rem 0 0.875rem;
}

/* Perks: fila anclada al pie del hero, con el acento de la Á como viñeta */
.hero-perks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem 2.25rem;
  padding: 0 1.5rem 2.25rem;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tinta-suave);
}

.hero-perks li {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  margin: 0;
}

.hero-perks .pk {
  width: 0.7em;
  height: 0.32em;
  background: var(--dorado);
  transform: rotate(-15deg) skewX(-24deg);
}

/* Borde festoneado entre el hero (crema) y el pie (blanco) */
.crimp {
  height: 1.1rem;
  background-color: var(--blanco);
  background-image: radial-gradient(
    circle at 50% 0,
    var(--crema) 0.55rem,
    rgba(247, 240, 229, 0) calc(0.55rem + 1px)
  );
  background-size: 1.5rem 1.1rem;
  background-position: top center;
}

.crimp + .site-footer {
  border-top: 0;
}

.store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.store-badges a {
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
}

.store-badges a:focus-visible {
  outline: 3px solid var(--rojo);
  outline-offset: 3px;
}

.store-badges img {
  width: auto;
  display: block;
}

/* Badge de App Store: SVG sin margen (alto visible = alto del archivo) */
.store-badges .badge-appstore {
  height: 3.125rem; /* 50px */
}

/* Badge de Google Play: el PNG oficial trae margen transparente vertical
   (parte visible 192 de 250 px); 65px totales ≈ 50px visibles */
.store-badges .badge-googleplay {
  height: 4.0625rem; /* 65px */
}

/* ---------- Pie de página ---------- */

.site-footer {
  border-top: 1px solid var(--borde);
  background: var(--blanco);
  padding: 2rem 1.5rem;
  font-size: 0.9375rem;
  color: var(--tinta-suave);
}

.site-footer .footer-inner {
  max-width: 46rem;
  margin: 0 auto;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.site-footer p {
  margin: 0.25rem 0;
}