/* Madelina by Marcela — capa de marca. Fuente única del sistema visual.
   Prisma + Pixel, 2026-08-04 (creada) · 2026-08-06 (extraída a capa compartida).

   Esta hoja la consumen DOS despliegues distintos:
     · la maqueta estática en madelinabymarcela.com
     · la tienda Django en tienda.madelinabymarcela.com

   Regla de esta capa, y `tests/test_diseno.py` la vigila: ningún color de marca
   se declara fuera de este archivo. Copiar estos tokens a otra hoja crea una
   segunda fuente de verdad que diverge en la primera prisa — pasó con los skills
   duplicados del framework y se corrigió el 2026-07-26.

   Regla de las rutas: `fuentes/x.woff2` es relativa a ESTE archivo, y por eso
   resuelve igual en el repo, en el paquete publicado y tras `collectstatic`.
   Cambiarla a `../fuentes/` o a una absoluta rompe dos de los tres contextos. */

/* ── Tipografías ────────────────────────────────────────────────────────
   Sustitutas libres de las del manual: Cormorant Garamond por Gazpacho, Jost
   por Author. Ninguna de las dos originales tiene licencia web confirmada, y
   descargarlas de un sitio de «fuentes gratis» no otorga licencia: dejaría a
   Marcela —no a nosotros— en incumplimiento (identidad.md, problema 2).

   Si su licencia de Gazpacho incluye uso web, el cambio son estas dos reglas y
   los dos tokens de abajo. Por eso están en tokens desde el primer día.

   El logotipo NO depende de esto: es SVG, y un trazado no necesita webfont. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url("fuentes/cormorant-garamond.c47ff12887a3.woff2") format('woff2');
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Jost';
  src: url("fuentes/jost.3c986c6628b4.woff2") format('woff2');
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}

:root {
  /* Los cuatro del manual, sin tocar */
  --rosa-topo: #9A565D;
  --rosa-viejo: #C37E82;
  --sabio: #A1AB84;
  --lima: #E8EED1;

  /* Derivados — NO están en el manual, se proponen para revisión de Marcela.
     Un manual de impresión no necesita un neutro de texto largo; una web sí. */
  --tinta: #3A2226;        /* mismo tono que el rosa topo, muy oscuro: 13.4:1 sobre blanco */
  --tinta-suave: #6B4A4F;  /* secundario: 6.6:1 sobre blanco */
  --crema: #FDFBFA;
  --blanco: #FFFFFF;

  /* Estados — los estrena la tienda; la landing no tenía ninguno.
     La marca NO tiene color de alerta, y meter un rojo de framework la rompería.
     La salida es darle trabajo semántico a las dos familias de tono que ya hay:
     verde = Marcela ya confirmó · rosa = te toca hacer algo · neutro = aún no ha
     mirado. Medidos sobre --crema con la fórmula WCAG 2.1, no a ojo:  */
  --exito: #61674F;        /* sabio al 60% sobre negro — 5.72:1 ✅ */
  --atencion: #5C3438;     /* rosa topo al 60% sobre negro — 10.16:1 ✅ */
  --espera: var(--tinta-suave);  /* 7.49:1 ✅ */

  /* Papeles: qué color hace de fondo en cada sección */
  --fondo: var(--crema);
  --superficie: var(--blanco);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --medida: 68ch;
  --radio: 2px;          /* la marca es de remates finos: nada de esquinas blandas */
  --transicion: 180ms ease;

  /* ── Escala de la TIENDA ────────────────────────────────────────────────────
     La landing es editorial —se lee— y la tienda es una aplicación —se usa—. Son dos
     superficies de la misma marca con lenguajes de interacción distintos, y eso es
     deliberado (Romfeli, 2026-08-06): «la web típica para webs típicas, y una tienda
     diseñada solo para usuarios de smartphone».

     El pulgar necesita blancos grandes y bordes blandos; una revista no. Por eso el
     radio de 2px de arriba NO se usa en la tienda: allí manda esta escala.

     Lo que NO cambia entre las dos: los colores, las tipografías y el patrón de rayas.
     La marca es la misma; lo que cambia es cómo se toca. */
  --radio-tarjeta: 20px;
  --radio-campo: 14px;
  --radio-pildora: 999px;

  --sombra-tarjeta: 0 1px 2px rgb(58 34 38 / 0.04), 0 8px 24px rgb(58 34 38 / 0.06);
  --sombra-flotante: 0 4px 16px rgb(58 34 38 / 0.18);

  /* Fondo de aplicación: las tarjetas blancas necesitan despegarse de algo. Sobre crema
     plano no se distinguen, y toda la pantalla parece una sola hoja. */
  --lienzo: #F6F3F1;
}

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.5rem, 9vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; max-width: var(--medida); }

a { color: var(--rosa-topo); }

.contenedor {
  width: min(100% - 2.5rem, 1180px);
  margin-inline: auto;
}

/* El patrón de rayas del packaging, que en la bolsa hace tanto trabajo de marca
   como el logotipo. Aquí es un elemento reutilizable, no un adorno suelto.

   En la tienda tiene además trabajo estructural: marca los bordes de las piezas
   que «contienen» algo —cabecera del carrito, banda de la página de pedido—,
   porque Madelina es antes que nada una marca de packaging. */
.rayas {
  background-image: repeating-linear-gradient(
    90deg,
    var(--rosa-viejo) 0 14px,
    var(--rosa-topo) 14px 28px
  );
}
.rayas--verde {
  background-image: repeating-linear-gradient(
    90deg,
    var(--sabio) 0 14px,
    var(--lima) 14px 28px
  );
}
.filete { height: 6px; }

/* ── Cabecera ───────────────────────────────────────────────────────── */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--crema) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid color-mix(in srgb, var(--rosa-topo) 15%, transparent);
}
.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.85rem 0;
}
.marca { display: flex; align-items: baseline; gap: 0.6rem; text-decoration: none; }
/* `img` además de `svg`: la maqueta incrusta el logotipo y la tienda lo enlaza como imagen
   cacheable. Sin el selector de `img`, el logo salía a sus 190px intrínsecos y a 360px
   empujaba el botón del carrito a una segunda fila. `color` solo pinta el svg incrustado. */
.marca svg, .marca img { display: block; width: clamp(130px, 26vw, 190px); height: auto; color: var(--rosa-topo); }
.marca__sub {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  white-space: nowrap;
}

/* En móvil la navegación NO desaparece: baja a una fila propia con desplazamiento
   horizontal. Ocultarla exigiría un menú con JS, y un enlace que no existe en
   pantalla pequeña es un enlace que no existe para la mitad de las visitas. */
.nav {
  display: flex;
  gap: 1.5rem;
  order: 3;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
  border-top: 1px solid color-mix(in srgb, var(--rosa-topo) 12%, transparent);
  padding-top: 0.6rem;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta);
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion);
}
.nav a:hover, .nav a:focus-visible { border-bottom-color: var(--rosa-topo); }

.carrito {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: 1px solid color-mix(in srgb, var(--rosa-topo) 35%, transparent);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--rosa-topo);
  white-space: nowrap;      /* «Carrito (0)» partía en dos líneas a 360px */
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transicion), color var(--transicion);
}
.carrito:hover, .carrito:focus-visible { background: var(--rosa-topo); color: var(--blanco); }

/* ── Botón ──────────────────────────────────────────────────────────── */
.boton {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 2.25rem;
  border: 0;
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--rosa-topo);       /* 5.44:1 */
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.boton:hover, .boton:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 20px rgb(58 34 38 / 0.25); }
.boton--solido { background: var(--rosa-topo); color: var(--blanco); }

/* ── Secciones ──────────────────────────────────────────────────────── */
.seccion { padding: 3.5rem 0; }
.seccion--clara { background: var(--superficie); }
.seccion__titulo { text-align: center; margin-bottom: 0.5rem; color: var(--rosa-topo); }
.seccion__entrada {
  text-align: center;
  max-width: 52ch;
  margin: 0 auto 2.5rem;
  color: var(--tinta-suave);
}

/* ── Vitrina ────────────────────────────────────────────────────────────
   La tarjeta de producto es de la marca, no de la landing: la maqueta la
   estrenó y la tienda la usa igual. Una sola definición para las dos. */
.rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  /* Sirve también como <ul>: en la tienda la vitrina es una lista de verdad, para que un
     lector de pantalla anuncie cuántos postres hay antes de recorrerlos. */
  list-style: none;
  padding: 0;
  margin: 0;
}
.postre {
  background: var(--superficie);
  border: 1px solid color-mix(in srgb, var(--rosa-topo) 12%, transparent);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Proporción fija + object-fit: cover = cualquier foto que mande Marcela encaja
   sin rehacer maquetación, sea vertical de teléfono, cuadrada o apaisada. */
.postre__foto { aspect-ratio: 1; background: var(--lima); }
.postre__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.postre__cuerpo { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.postre__nombre { font-family: var(--serif); font-size: 1.5rem; margin: 0; }
.postre__precio { font-family: var(--sans); font-size: 1.05rem; color: var(--rosa-topo); font-weight: 500; }
.postre__nota { font-size: 0.8125rem; color: var(--tinta-suave); margin: 0; }
.postre .boton { margin-top: auto; text-align: center; }

/* Hueco declarado: donde falta contenido REAL de Marcela no se pone relleno.
   Se dice qué falta. Un placeholder bonito se acaba publicando (principio 9). */
.pendiente {
  border: 1px dashed color-mix(in srgb, var(--rosa-topo) 40%, transparent);
  background: var(--lima);
  border-radius: var(--radio);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 260px;
  gap: 0.5rem;
}
.pendiente__etiqueta {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rosa-topo);
}
.pendiente p { color: var(--tinta); font-size: 0.9rem; margin: 0; max-width: 30ch; }

/* El círculo numerado. Primitiva compartida: la landing lo usa para «cómo se
   pide» y el checkout para el indicador 1→2. Quien lo use pone el contenedor
   con `counter-reset: paso`. */
.paso__numero {
  counter-increment: paso;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--rosa-topo);
  color: var(--rosa-topo);
  font-family: var(--serif);
  font-size: 1.4rem;
  margin-bottom: 0.85rem;
}
.paso__numero::before { content: counter(paso); }

/* ── Pie ────────────────────────────────────────────────────────────── */
.pie { background: var(--superficie); padding: 3rem 0 2rem; }
.pie__filas { display: grid; gap: 2rem; }
.pie__titulo {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 0.6rem;
}
/* Los enlaces del pie ocupan su línea, así que NO les vale la excepción de WCAG 2.5.8 para
   enlaces dentro de una frase. Medían 23px de alto y el check de objetivo táctil de `UX.md`
   los marcó el 2026-08-07, el día que ese check existió por primera vez. */
/* 44px y no los 24 de mínimo legal: en la portada el enlace del pie es la vía de contacto real
   —Marcela no tiene otra— y salió 142×38 en la revisión del 2026-08-07. Cumplía AA y aun así
   era el control peor dimensionado de la página. `UX.md` pide 44 para lo que se pulsa. */
.pie a {
  text-decoration: none;
  display: inline-block;
  min-height: 44px;
  padding-block: 0.7rem;
}
.pie a:hover, .pie a:focus-visible { text-decoration: underline; }
.pie__legal {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--rosa-topo) 12%, transparent);
  font-size: 0.75rem;
  color: var(--tinta-suave);
}

/* ── Foco visible: se navega con teclado o no se entrega ─────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--rosa-topo);
  outline-offset: 3px;
  border-radius: var(--radio);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .boton:hover { transform: none; }
}

/* ── 768px ──────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .seccion { padding: 5rem 0; }
  .rejilla { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  /* `auto-fit` y no tres columnas fijas: los bloques del pie son opcionales —el Instagram
     solo si lo dio, el horario solo si lo puso— y una rejilla de tres deja un hueco o aprieta
     una cuarta columna a la fuerza según lo que ella haya rellenado ese día. */
  .pie__filas { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* ── 1024px ─────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .nav {
    order: 0;
    width: auto;
    gap: 1.75rem;
    border-top: 0;
    padding-top: 0;
  }
  .rejilla { grid-template-columns: repeat(3, 1fr); }
}

/* ── Pasos y franja: subieron de `maqueta.css` el 2026-08-07 ────────────
   Dejaron de ser piezas de la landing cuando la portada de la tienda pasó a
   explicar cómo se pide: ahora las consumen los dos despliegues, y una pieza
   compartida vive en la capa de marca o acaba duplicada. */
/* ── Cómo se pide ───────────────────────────────────────────────────── */
.pasos { display: grid; grid-template-columns: 1fr; gap: 2rem; counter-reset: paso; }
.paso { text-align: center; }
.paso p { margin-inline: auto; color: var(--tinta-suave); font-size: 0.95rem; }
/* Un enlace dentro de un paso es un objetivo táctil como cualquier otro. El de Instagram salió
   137×22 y lo marcó el verificador: por debajo de los 24px de WCAG 2.5.8 (AA). El padding lo
   sube a 44, que es lo que pide `UX.md`. En una línea de texto normal esto no haría falta —el
   incumplimiento aparece justo donde el enlace es la acción, que es donde importa. */
.paso a {
  display: inline-block;
  padding: 0.65rem 0.9rem;
  margin-top: 0.1rem;
}

/* ── Franja de marca ────────────────────────────────────────────────── */
.franja { position: relative; color: var(--blanco); text-align: center; padding: 3.5rem 0; }
.franja::before { content: ''; position: absolute; inset: 0; background: var(--rosa-topo); }
.franja > * { position: relative; }
.franja h2 { color: var(--blanco); }
.franja p { color: var(--blanco); margin-inline: auto; opacity: 0.94; }
.franja__mono { width: 76px; height: auto; color: var(--blanco); margin-bottom: 1rem; }

@media (min-width: 768px) {
  .pasos { grid-template-columns: repeat(3, 1fr); }
}