/* =============================================================
   HORNO ROJO · Panadería
   Sistema tomado de DESIGNpanaderia.md (referencia "Redbrick"):
   tinta escarlata sobre papel crema, serif fina de 300 en display,
   sans con tracking positivo, sin sombras y sin botones rellenos.
   ============================================================= */

:root {
  /* Colores */
  --rojo:   #e82c2a;   /* único acento: logo, nav, rótulos, display, acciones */
  --tinta:  #212529;   /* texto de cuerpo */
  --crema:  #ffffff;   /* lienzo */
  --gris:   #f2f2f2;   /* superficie de tarjeta */
  --carbon: #121212;   /* pie e inversos */

  /* Tipografía */
  --serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala tipográfica */
  --t-caption:  10px;
  --t-body-sm:  15px;
  --t-body:     20px;
  --t-sub:      30px;
  --t-head-sm:  35px;

  /* Espaciado */
  --e-5: 5px;   --e-10: 10px; --e-12: 12px; --e-15: 15px;
  --e-20: 20px; --e-30: 30px; --e-50: 50px; --e-117: 117px;

  /* Radios */
  --r-link: 3.75px;
  --r-card: 25px;
  --r-full: 50px;

  /* Márgenes de página */
  --borde: clamp(20px, 4vw, 50px);
  --hueco: clamp(50px, 8vw, 117px);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 120px; }

body {
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-body-sm);
  line-height: 1.5;
  letter-spacing: 0.013em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }

::selection { background: var(--rojo); color: #fff; }
:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; }

.salto { position: fixed; top: -100px; left: var(--e-20); z-index: 999; background: var(--rojo); color: #fff; padding: var(--e-10) var(--e-20); border-radius: var(--r-link); }
.salto:focus { top: var(--e-10); }

/* ── Tipos base ────────────────────────────────────────────── */
.display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 8.2vw, 118px);
  line-height: 0.99;
  letter-spacing: -0.005em;
  color: var(--rojo);
  font-feature-settings: "clig" on, "liga" on;
  text-wrap: balance;
}
.display-sm { font-size: clamp(34px, 5vw, 62px); line-height: 1.05; }

.cuerpo {
  font-size: var(--t-body);
  line-height: 1.3;
  letter-spacing: 0.017em;
  color: var(--tinta);
  max-width: 480px;
}
.cuerpo + .cuerpo { margin-top: var(--e-20); }

.micro {
  font-family: var(--mono);
  font-size: var(--t-caption);
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--rojo);
}

.nota {
  margin-top: var(--e-30);
  font-size: var(--t-body-sm);
  line-height: 1.5;
  color: var(--tinta);
  max-width: 60ch;
}

/* ── Barra de anuncio ──────────────────────────────────────── */
.anuncio { background: var(--rojo); color: #fff; }
.anuncio-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-20); flex-wrap: wrap;
  padding: var(--e-8, 8px) var(--borde);
  min-height: 30px;
}
.anuncio-txt,
.anuncio-nav a {
  font-family: var(--mono);
  font-size: var(--t-caption);
  letter-spacing: 0.06em;
  color: #fff;
}
.anuncio-txt { margin-inline: auto; text-align: center; }
.anuncio-nav { display: flex; gap: var(--e-20); }
.anuncio-nav a { opacity: .85; transition: opacity .25s; }
.anuncio-nav a:hover { opacity: 1; }

/* ── Nav ───────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 100; background: var(--crema); }
.nav-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-30); flex-wrap: wrap;
  padding: var(--e-20) var(--borde);
}
.marca { display: inline-flex; align-items: center; gap: var(--e-10); color: var(--rojo); }
.marca-ico { flex: 0 0 auto; }
.marca-txt { font-size: var(--t-body); letter-spacing: 0.017em; }

.nav-links { display: flex; flex-wrap: wrap; gap: var(--e-30); }
.nav-links a {
  font-size: var(--t-body-sm); letter-spacing: 0.013em; color: var(--rojo);
  transition: opacity .25s;
}
.nav-links a:hover { opacity: .6; }

.subnav { border-top: 1px solid var(--rojo); border-bottom: 1px solid var(--rojo); }
.subnav-in {
  display: flex; flex-wrap: wrap; gap: var(--e-30);
  padding: var(--e-12) var(--borde);
}
.subnav-in a { font-size: var(--t-body-sm); letter-spacing: 0.013em; color: var(--rojo); transition: opacity .25s; }
.subnav-in a:hover { opacity: .6; }

/* ── Acción delineada (único estilo de acción del sistema) ──── */
.accion {
  display: inline-block; margin-top: var(--e-30);
  padding: var(--e-10) var(--e-20);
  border: 1px solid var(--rojo); border-radius: var(--r-link);
  font-size: var(--t-body-sm); letter-spacing: 0.013em; color: var(--rojo);
  transition: background .25s, color .25s;
}
.accion:hover { background: var(--rojo); color: #fff; }

/* ── Bloques y splits ──────────────────────────────────────── */
.portada { padding: var(--hueco) var(--borde) var(--e-50); }
.bloque { padding: var(--e-50) var(--borde) var(--hueco); }

.split { display: grid; gap: var(--e-50); align-items: center; }
.split-txt .display + .cuerpo { margin-top: var(--e-30); }
.split-img { border-radius: var(--r-card); overflow: hidden; }
.split-img img { width: 100%; height: 100%; object-fit: cover; }

/* ── Rótulo de sección (running head) ──────────────────────── */
.rotulo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-20); flex-wrap: wrap;
  padding-bottom: var(--e-10);
  border-bottom: 1px solid var(--rojo);
  margin-bottom: var(--e-50);
}
.rotulo-txt {
  font-family: var(--mono); font-size: var(--t-caption);
  letter-spacing: 0.06em; color: var(--rojo);
}
.flecha {
  font-family: var(--mono); font-size: var(--t-caption);
  letter-spacing: 0.06em; color: var(--rojo);
  border-radius: var(--r-link);
  transition: opacity .25s;
}
.flecha:hover { opacity: .6; }

/* ── Tarjetas de producto ──────────────────────────────────── */
.tarjetas { display: grid; gap: var(--e-20); }
.tarjeta {
  background: var(--gris);
  border-radius: var(--r-card);
  padding: var(--e-30);
  /* columna: así el precio queda al ras abajo en todas, aunque el nombre
     ocupe una o dos líneas */
  display: flex; flex-direction: column; gap: var(--e-5);
}
.tarjeta-img { border-radius: var(--r-card); overflow: hidden; margin-bottom: var(--e-20); }
.tarjeta-img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.tarjeta-nom {
  font-family: var(--sans); font-weight: 400;
  font-size: var(--t-body); line-height: 1.2; letter-spacing: 0.017em;
  color: var(--tinta);
}
.precio { font-size: var(--t-body-sm); letter-spacing: 0.013em; color: var(--tinta); margin-top: auto; padding-top: var(--e-12); }

/* ── Lista con viñeta roja ─────────────────────────────────── */
.lista { display: grid; gap: var(--e-10); margin-top: var(--e-20); max-width: 480px; }
.lista li { position: relative; padding-left: var(--e-20); font-size: var(--t-body-sm); line-height: 1.5; }
.lista li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--rojo); }

/* ── Datos de visita ───────────────────────────────────────── */
.datos { display: grid; gap: var(--e-30); }
.dato .micro { margin-bottom: var(--e-10); }
.dato .cuerpo { font-size: var(--t-body-sm); line-height: 1.5; }

.cierre {
  margin-top: var(--hueco);
  padding-top: var(--e-50);
  border-top: 1px solid var(--rojo);
}

/* ── Pie ───────────────────────────────────────────────────── */
.pie { background: var(--carbon); color: #fff; padding: var(--hueco) var(--borde) var(--e-30); }
.pie-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-30); flex-wrap: wrap;
  padding-bottom: var(--e-30);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.pie-marca { display: inline-flex; align-items: center; gap: var(--e-10); color: var(--rojo); }
.pie-nav { display: flex; flex-wrap: wrap; gap: var(--e-30); }
.pie-nav a { font-size: var(--t-body-sm); letter-spacing: 0.013em; color: var(--rojo); transition: opacity .25s; }
.pie-nav a:hover { opacity: .6; }
.pie-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-10);
  padding-top: var(--e-20); padding-bottom: var(--e-50);
  /* espacio a la derecha para que el botón flotante no tape el texto */
  padding-right: 72px;
  font-family: var(--mono); font-size: var(--t-caption);
  letter-spacing: 0.06em; color: rgba(255,255,255,.45);
}

/* ── WhatsApp flotante ─────────────────────────────────────── */
.wa {
  position: fixed; right: var(--e-20); bottom: var(--e-20); z-index: 400;
  width: 52px; height: 52px; border-radius: var(--r-full);
  background: var(--rojo); display: grid; place-items: center;
  transition: transform .25s;
}
.wa:hover { transform: translateY(-3px); }

/* ── Responsive ────────────────────────────────────────────── */
@media (min-width: 620px) {
  .tarjetas { grid-template-columns: repeat(2, 1fr); }
  .datos { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--e-50); }
  .datos { grid-template-columns: repeat(4, 1fr); }
  .tarjetas { grid-template-columns: repeat(5, 1fr); }
  .tarjeta { padding: var(--e-20); }
  .tarjeta-nom { font-size: var(--t-body-sm); }
}

@media (min-width: 1280px) {
  .tarjeta { padding: var(--e-30); }
  .tarjeta-nom { font-size: var(--t-body); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .accion, .flecha, .wa, .nav-links a, .pie-nav a { transition: none; }
}