/* ============================================================
   Amaranto y más — sistema de diseño
   Paleta derivada del logo: magenta amaranto + verde hoja
   ============================================================ */

:root {
  /* Marca */
  --magenta:        #c60466;
  --magenta-hover:  #a80355;
  --magenta-deep:   #7d0240;
  --rosa:           #f487b1;
  --rosa-wash:      #fdf0f6;
  --verde:          #6b8e3c;
  --verde-deep:     #3f5622;
  --verde-wash:     #f1f5ea;

  /* Neutros cálidos */
  --crema:          #fdfbf7;
  --arena:          #f6f2ea;
  --arena-2:        #ece5d8;
  --tinta:          #241a1f;
  --tinta-suave:    #6e6068;
  --linea:          #e6ddd2;
  --blanco:         #ffffff;

  /* Tipografía */
  --display: 'Fraunces', 'Georgia', serif;
  --texto:   'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala tipográfica fluida */
  --t-xs:  0.75rem;
  --t-sm:  0.875rem;
  --t-base: 1rem;
  --t-lg:  clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --t-xl:  clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem);
  --t-2xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --t-3xl: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);

  /* Espacio */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-8: 3rem;    --s-10: 4rem;
  --s-12: 6rem;

  /* Formas orgánicas */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-full: 999px;

  --sombra-sm: 0 1px 2px rgba(36, 26, 31, .06), 0 2px 8px rgba(36, 26, 31, .04);
  --sombra-md: 0 4px 12px rgba(36, 26, 31, .07), 0 12px 28px rgba(36, 26, 31, .06);
  --sombra-lg: 0 12px 32px rgba(36, 26, 31, .10), 0 24px 60px rgba(36, 26, 31, .08);
  --sombra-magenta: 0 8px 24px rgba(198, 4, 102, .28);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --nav-h: 72px;
}

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

/* El atributo `hidden` debe ganar siempre. Sin esto, cualquier regla de
   display (grid, flex) lo anula y deja una caja vacía ocupando espacio. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--texto);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
p  { margin: 0 0 var(--s-4); text-wrap: pretty; }

img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.contenedor { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
.seccion { padding-block: var(--s-10); }

/* Cuando dos secciones son parte de la misma idea, sus rellenos se suman y
   dejan un hueco enorme. Estas dos clases juntan ese par concreto:
   «Cómo hacer tu pedido» funciona como entrada al catálogo. */
.seccion-cierra { padding-bottom: var(--s-6); }
.seccion-abre   { padding-top: var(--s-8); }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--magenta); color: #fff; padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--r-md) 0; font-weight: 600;
}
.saltar:focus { left: 0; }

/* ---------- Encabezado de sección ---------- */
.encabezado { max-width: 46rem; margin-bottom: var(--s-8); }
.encabezado.centro { margin-inline: auto; text-align: center; }
.sobretitulo {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--magenta);
  background: var(--rosa-wash); padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full); margin-bottom: var(--s-4);
}
.encabezado p { color: var(--tinta-suave); font-size: var(--t-lg); margin-bottom: 0; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5); border: 2px solid transparent;
  border-radius: var(--r-full); font-weight: 700; font-size: var(--t-sm);
  cursor: pointer; text-decoration: none; transition: all .22s var(--ease);
  white-space: nowrap; min-height: 46px;
}
.btn-primario { background: var(--magenta); color: #fff; box-shadow: var(--sombra-magenta); }
.btn-primario:hover { background: var(--magenta-hover); transform: translateY(-2px); }
.btn-fantasma { background: transparent; color: var(--magenta); border-color: currentColor; }
.btn-fantasma:hover { background: var(--rosa-wash); transform: translateY(-2px); }
.btn-wa { background: #0f7d3f; color: #fff; box-shadow: 0 8px 24px rgba(15, 125, 63, .32); }
.btn-wa:hover { background: #0b6e36; transform: translateY(-2px); }
.btn-bloque { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }

/* ---------- Navegación ---------- */
.nav {
  position: sticky; top: 0; z-index: 60; height: var(--nav-h);
  background: rgba(253, 251, 247, .88); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}
.nav-inner { display: flex; align-items: center; gap: var(--s-5); height: 100%; }
.marca { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: inherit; margin-right: auto; }
.marca img { width: 46px; height: 46px; border-radius: var(--r-sm); }
.marca-txt { font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: -.02em; }
.marca-sub { display: block; font-family: var(--texto); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 600; }
.nav-links { display: flex; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.nav-links a {
  text-decoration: none; color: var(--tinta); font-weight: 600; font-size: var(--t-sm);
  padding: var(--s-2) 0; border-bottom: 2px solid transparent; transition: all .2s var(--ease);
}
.nav-links a:hover { color: var(--magenta); border-bottom-color: var(--magenta); }

.btn-carrito {
  position: relative; display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--magenta); color: #fff; border: none; cursor: pointer;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-full); font-weight: 700;
  font-size: var(--t-sm); box-shadow: var(--sombra-magenta); transition: all .2s var(--ease);
  min-height: 46px;
}
.btn-carrito:hover { background: var(--magenta-hover); transform: translateY(-2px); }
.contador {
  min-width: 22px; height: 22px; padding: 0 6px; background: #fff; color: var(--magenta);
  border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 800;
  display: grid; place-items: center;
}
.contador:empty, .contador[data-vacio='true'] { display: none; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--s-2); }
.nav-toggle svg { width: 26px; height: 26px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(168deg, var(--rosa-wash) 0%, var(--crema) 55%, var(--verde-wash) 100%); padding-block: var(--s-12) var(--s-10); }
.hero::before, .hero::after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; }
.hero::before { width: 480px; height: 480px; background: var(--rosa); top: -180px; right: -120px; }
.hero::after  { width: 380px; height: 380px; background: #cfe0b0; bottom: -160px; left: -100px; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-10); align-items: center; }
.hero h1 { margin-bottom: var(--s-5); }
.hero h1 em { font-style: normal; color: var(--magenta); }
.hero-lead { font-size: var(--t-lg); color: var(--tinta-suave); max-width: 34rem; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero-datos { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--linea); }
.dato strong { display: block; font-family: var(--display); font-size: 1.7rem; color: var(--magenta); line-height: 1; }
.dato span { font-size: var(--t-xs); color: var(--tinta-suave); font-weight: 600; letter-spacing: .04em; }

.hero-collage { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: start; }
.hero-collage img { border-radius: var(--r-lg); box-shadow: var(--sombra-lg); aspect-ratio: 1; object-fit: cover; width: 100%; height: auto; }
.hero-collage img:nth-child(1) { border-radius: var(--r-xl) var(--r-lg) var(--r-lg) var(--r-lg); }
.hero-collage img:nth-child(2) { margin-top: var(--s-6); }
.hero-collage img:nth-child(3) { margin-top: calc(var(--s-6) * -1); }

/* ---------- Recomendador ---------- */
.recomendador { background: var(--arena); border-radius: var(--r-xl); padding: var(--s-8); }
.paso { margin-bottom: var(--s-6); }
.paso-titulo { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.paso-num {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  background: var(--magenta); color: #fff; border-radius: var(--r-full);
  font-size: var(--t-sm); font-weight: 800; font-family: var(--texto);
}
.paso-titulo h3 { margin: 0; font-size: var(--t-lg); }
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--s-3); }
.opcion {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: var(--s-4); background: var(--blanco); border: 2px solid var(--linea);
  border-radius: var(--r-md); cursor: pointer; text-align: left;
  transition: all .2s var(--ease); min-height: 96px;
}
.opcion:hover { border-color: var(--rosa); transform: translateY(-2px); box-shadow: var(--sombra-sm); }
.opcion[aria-pressed='true'] {
  border-color: var(--magenta); background: var(--rosa-wash);
  box-shadow: 0 0 0 3px rgba(198, 4, 102, .12);
}
.opcion-icono { font-size: 1.5rem; line-height: 1; margin-bottom: var(--s-1); }
.opcion-nombre { font-weight: 700; font-size: var(--t-sm); }
.opcion-desc { font-size: var(--t-xs); color: var(--tinta-suave); line-height: 1.35; }

.reco-pie { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; padding-top: var(--s-5); border-top: 1px solid var(--arena-2); }
.reco-estado { font-size: var(--t-xs); color: var(--tinta-suave); line-height: 1.45; }
.reco-resultados { margin-top: var(--s-8); }
.reco-vacio { text-align: center; padding: var(--s-8); color: var(--tinta-suave); background: var(--blanco); border-radius: var(--r-lg); border: 2px dashed var(--linea); }

/* ---------- Filtros de categoría ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-8); }
.filtro {
  padding: var(--s-2) var(--s-4); background: var(--blanco); border: 2px solid var(--linea);
  border-radius: var(--r-full); cursor: pointer; font-weight: 600; font-size: var(--t-sm);
  transition: all .2s var(--ease); min-height: 44px;
}
.filtro:hover { border-color: var(--rosa); }
.filtro[aria-pressed='true'] { background: var(--magenta); border-color: var(--magenta); color: #fff; }

/* ---------- Rejilla de productos ---------- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: var(--s-5); }

.tarjeta {
  display: flex; flex-direction: column; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--r-lg); overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); }
.tarjeta-img { position: relative; aspect-ratio: 4 / 3; background: var(--arena); overflow: hidden; }
.tarjeta-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.hero-collage img, .tarjeta-img img { display: block; }
.tarjeta:hover .tarjeta-img img { transform: scale(1.05); }
.insignia {
  position: absolute; top: var(--s-3); left: var(--s-3);
  background: var(--magenta); color: #fff; font-size: var(--t-xs); font-weight: 800;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-full); letter-spacing: .04em;
}
.insignia-match { background: var(--verde-deep); }

.tarjeta-cuerpo { display: flex; flex-direction: column; flex: 1; padding: var(--s-5); }
.tarjeta-cat { font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--verde-deep); margin-bottom: var(--s-2); }
.tarjeta h3 { font-size: 1.1rem; margin-bottom: var(--s-2); }
.tarjeta-desc { font-size: var(--t-sm); color: var(--tinta-suave); margin-bottom: var(--s-4); flex: 1; }

.etiquetas { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-4); }
.etiqueta { font-size: var(--t-xs); background: var(--verde-wash); color: var(--verde-deep); padding: 3px var(--s-2); border-radius: var(--r-full); font-weight: 600; }

.campo { margin-bottom: var(--s-4); }
.campo label { display: block; font-size: var(--t-xs); font-weight: 700; color: var(--tinta-suave); margin-bottom: var(--s-1); text-transform: uppercase; letter-spacing: .08em; }
.select {
  width: 100%; padding: var(--s-3); border: 2px solid var(--linea); border-radius: var(--r-sm);
  background: var(--crema); font-size: var(--t-sm); font-weight: 600; cursor: pointer; min-height: 44px;
}
.select:hover { border-color: var(--rosa); }

.tarjeta-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.precio { font-family: var(--display); font-size: 1.35rem; font-weight: 600; color: var(--magenta); line-height: 1; }
.precio-consultar { font-size: var(--t-sm); font-family: var(--texto); font-weight: 700; color: var(--tinta-suave); }

.detalle { margin-top: var(--s-3); font-size: var(--t-xs); }
.detalle summary { cursor: pointer; color: var(--tinta-suave); font-weight: 600; padding: var(--s-1) 0; }
.detalle summary:hover { color: var(--magenta); }
.detalle p { margin: var(--s-2) 0 0; color: var(--tinta-suave); line-height: 1.5; }

/* ---------- Panel del carrito ---------- */
.velo {
  position: fixed; inset: 0; background: rgba(36, 26, 31, .5); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: all .3s var(--ease); z-index: 90;
}
.velo[data-abierto='true'] { opacity: 1; visibility: visible; }

.carrito {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(430px, 100%);
  background: var(--crema); box-shadow: var(--sombra-lg); z-index: 100;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .34s var(--ease), visibility 0s linear .34s;
}
.carrito[data-abierto='true'] { transform: translateX(0); transition: transform .34s var(--ease), visibility 0s linear 0s; }
/* Respaldo para navegadores sin soporte de `inert`: al estar oculto por
   visibility, sus botones dejan de ser enfocables. */
.carrito[data-abierto='false'] { visibility: hidden; }
.carrito[data-abierto='true']  { visibility: visible; }
.carrito-cab { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5); border-bottom: 1px solid var(--linea); }
.carrito-cab h2 { margin: 0; font-size: var(--t-xl); }
.cerrar { background: none; border: none; cursor: pointer; padding: var(--s-2); border-radius: var(--r-full); display: grid; place-items: center; transition: background .2s; width: 44px; height: 44px; }
.cerrar:hover { background: var(--arena-2); }
.cerrar svg { width: 22px; height: 22px; }

.carrito-cuerpo { flex: 1; overflow-y: auto; padding: var(--s-5); }
.carrito-vacio { text-align: center; padding: var(--s-10) var(--s-4); color: var(--tinta-suave); }
.carrito-vacio-icono { font-size: 3rem; margin-bottom: var(--s-4); opacity: .5; }

.linea {
  display: grid; grid-template-columns: 68px 1fr auto; gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--linea);
}
.linea:last-child { border-bottom: none; }
.linea img { width: 68px; height: 68px; object-fit: cover; border-radius: var(--r-sm); }
.linea-nombre { font-weight: 700; font-size: var(--t-sm); line-height: 1.3; margin-bottom: 2px; }
.linea-var { font-size: var(--t-xs); color: var(--tinta-suave); margin-bottom: var(--s-2); }
.linea-precio { font-weight: 700; font-size: var(--t-sm); color: var(--magenta); }

.cantidad { display: flex; align-items: center; gap: var(--s-1); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-full); padding: 2px; }
.cantidad button { width: 30px; height: 30px; border: none; background: none; cursor: pointer; border-radius: var(--r-full); font-weight: 800; color: var(--magenta); font-size: 1rem; transition: background .2s; }
.cantidad button:hover { background: var(--rosa-wash); }
.cantidad span { min-width: 22px; text-align: center; font-weight: 700; font-size: var(--t-sm); }
.quitar { background: none; border: none; cursor: pointer; color: var(--tinta-suave); font-size: var(--t-xs); text-decoration: underline; padding: var(--s-1) 0; margin-top: var(--s-1); }
.quitar:hover { color: var(--magenta); }

.carrito-pie { padding: var(--s-5); border-top: 1px solid var(--linea); background: var(--arena); }
.total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s-2); }
.total-etq { font-weight: 700; }
.total-num { font-family: var(--display); font-size: 1.75rem; font-weight: 600; color: var(--magenta); }
.nota-cotizar { font-size: var(--t-xs); color: var(--tinta-suave); margin-bottom: var(--s-4); line-height: 1.45; }

/* ---------- Pasos ---------- */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-5); counter-reset: paso; }
.paso-card { position: relative; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-lg); padding: var(--s-6) var(--s-5) var(--s-5); }
.paso-card::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; top: calc(var(--s-5) * -1); left: var(--s-5);
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--magenta); color: #fff; border-radius: var(--r-full);
  font-family: var(--display); font-size: 1.3rem; font-weight: 600;
  box-shadow: var(--sombra-magenta);
}
.paso-card h3 { font-size: var(--t-lg); margin-top: var(--s-3); }
.paso-card p { font-size: var(--t-sm); color: var(--tinta-suave); margin: 0; }

/* ---------- Testimonios ---------- */
.testimonios { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s-5); }
.testimonio { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-lg); padding: var(--s-6); display: flex; flex-direction: column; }
.estrellas { color: var(--magenta); letter-spacing: 2px; margin-bottom: var(--s-3); font-size: var(--t-sm); }
.testimonio blockquote { margin: 0 0 var(--s-4); font-size: var(--t-sm); color: var(--tinta); line-height: 1.6; flex: 1; }
.testimonio cite { font-style: normal; font-weight: 700; font-size: var(--t-sm); color: var(--magenta); }

/* ---------- Cierre ---------- */
.cierre { background: linear-gradient(140deg, var(--magenta) 0%, var(--magenta-deep) 100%); color: #fff; border-radius: var(--r-xl); padding: var(--s-10) var(--s-8); text-align: center; }
.cierre h2 { color: #fff; }
.cierre p { color: rgba(255, 255, 255, .88); max-width: 38rem; margin-inline: auto; font-size: var(--t-lg); }
.cierre-acciones { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-6); }
.cierre .btn-fantasma { color: #fff; border-color: rgba(255, 255, 255, .6); }
.cierre .btn-fantasma:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

/* ---------- Pie ---------- */
.pie { background: var(--tinta); color: rgba(255, 255, 255, .72); padding-block: var(--s-10) var(--s-6); margin-top: var(--s-12); }
.pie-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-8); margin-bottom: var(--s-8); }
.pie h3 { color: #fff; font-family: var(--texto); font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .12em; margin-bottom: var(--s-4); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.pie a { color: rgba(255, 255, 255, .72); text-decoration: none; font-size: var(--t-sm); }
.pie a:hover { color: var(--rosa); }
.pie-marca { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.pie-marca img { width: 52px; height: 52px; border-radius: var(--r-sm); background: #fff; padding: 3px; }
.pie-legal { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: var(--s-5); font-size: var(--t-xs); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; }

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-flotante {
  position: fixed; bottom: var(--s-5); left: var(--s-5); z-index: 55;
  width: 56px; height: 56px; border-radius: var(--r-full); background: #0f7d3f;
  display: grid; place-items: center; box-shadow: 0 8px 24px rgba(15, 125, 63, .42);
  transition: transform .2s var(--ease);
}
.wa-flotante:hover { transform: scale(1.08); }
.wa-flotante svg { width: 30px; height: 30px; fill: #fff; }

/* ---------- Aviso accesible ---------- */
.brindis {
  position: fixed; bottom: var(--s-5); left: 50%; transform: translate(-50%, 130%);
  background: var(--tinta); color: #fff; padding: var(--s-3) var(--s-5);
  border-radius: var(--r-full); font-size: var(--t-sm); font-weight: 600;
  box-shadow: var(--sombra-lg); z-index: 120; transition: transform .3s var(--ease);
  max-width: calc(100% - 2.5rem); text-align: center;
}
.brindis[data-visible='true'] { transform: translate(-50%, 0); }

/* ---------- Adaptable ---------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .hero-collage { max-width: 460px; }
  .pie-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--crema);
    border-bottom: 1px solid var(--linea); padding: var(--s-3) 1.25rem var(--s-5);
    box-shadow: var(--sombra-md); display: none;
  }
  .nav-links[data-abierto='true'] { display: flex; }
  .nav-links a { padding: var(--s-3) 0; border-bottom: 1px solid var(--linea); }
  .marca-txt { font-size: 1rem; }
  .btn-carrito span.etq { display: none; }
  .seccion { padding-block: var(--s-8); }
  /* las clases de unión deben seguir mandando también aquí */
  .seccion-cierra { padding-bottom: var(--s-4); }
  .seccion-abre   { padding-top: var(--s-5); }
  .recomendador { padding: var(--s-5); border-radius: var(--r-lg); }
  .cierre { padding: var(--s-8) var(--s-5); }
  .pie-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero-datos { gap: var(--s-5); }
  .wa-flotante { bottom: var(--s-4); left: var(--s-4); width: 52px; height: 52px; }
}
@media (max-width: 700px) {
  /* Dos columnas: entran más productos por pantalla y el navegador
     puede usar la foto de 320 px en lugar de la de 640. */
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .tarjeta-cuerpo { padding: var(--s-3); }
  .tarjeta h3 { font-size: .95rem; }
  .tarjeta-desc { font-size: var(--t-xs); }
  .tarjeta-pie { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .tarjeta-pie .btn { width: 100%; }
  .precio { font-size: 1.15rem; }
  .etiquetas { display: none; }          /* en dos columnas no caben bien */
}

@media (max-width: 420px) {
  .opciones { grid-template-columns: 1fr 1fr; }
}

@media print { .nav, .carrito, .velo, .wa-flotante, .brindis { display: none !important; } }

/* ============================================================
   Banner de promociones
   ============================================================ */
.banner {
  position: relative; display: flex; align-items: center;
  background: linear-gradient(90deg, var(--magenta) 0%, var(--magenta-deep) 100%);
  color: #fff; overflow: hidden; min-height: 44px;
}
.banner-ventana { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.banner-pista { display: flex; width: max-content; animation: correr var(--dur, 30s) linear infinite; }
.banner-pista[data-pausado='true'] { animation-play-state: paused; }
.banner:hover .banner-pista { animation-play-state: paused; }
.banner-grupo { display: flex; align-items: center; flex: none; }
.banner-item { padding: var(--s-2) var(--s-4); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }
.banner-sep { opacity: .55; font-size: .7rem; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.banner-pausa {
  flex: none; width: 36px; height: 36px; margin-right: var(--s-2);
  background: rgba(255, 255, 255, .16); border: none; color: #fff;
  border-radius: var(--r-full); cursor: pointer; font-size: .6rem; line-height: 1;
  display: grid; place-items: center; transition: background .2s;
}
.banner-pausa:hover { background: rgba(255, 255, 255, .3); }

@media (prefers-reduced-motion: reduce) {
  .banner-pista { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .banner-grupo:nth-child(2) { display: none; }
}

/* ============================================================
   Recomendador compacto
   ============================================================ */
.seccion-compacta { padding-block: var(--s-8); }

.reco-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--s-5); align-items: start;
}

.reco-caja {
  background: var(--arena); border-radius: var(--r-lg);
  padding: var(--s-4); border: 1px solid var(--linea);
  position: sticky; top: calc(var(--nav-h) + var(--s-4));
}
.reco-cab { margin-bottom: var(--s-4); }
.reco-cab .sobretitulo { margin-bottom: var(--s-2); padding: 4px var(--s-3); }
.reco-cab h2 { font-size: 1.15rem; margin-bottom: 2px; }
.reco-cab p { font-size: var(--t-xs); color: var(--tinta-suave); margin: 0; line-height: 1.4; }

.reco-controles { display: flex; flex-direction: column; gap: var(--s-3); }
.reco-grupo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.reco-etq {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-suave); flex: none;
}
.opciones-chip { display: flex; flex-wrap: wrap; gap: 6px; }
.opciones-chip .opcion {
  flex-direction: row; align-items: center; gap: 6px;
  min-height: 38px; padding: 6px 12px;
  border-radius: var(--r-full); background: var(--blanco);
}
.opciones-chip .opcion-icono { font-size: .9rem; margin: 0; }
.opciones-chip .opcion-nombre { font-size: var(--t-xs); font-weight: 700; }

.btn-chico { padding: var(--s-2) var(--s-4); min-height: 40px; font-size: var(--t-xs); }
.reco-caja .reco-pie { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--arena-2); flex-direction: column; align-items: stretch; gap: var(--s-2); }
.reco-caja .reco-estado { text-align: left; }
.reco-resultados { margin-top: 0; }
.reco-resultados .rejilla { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Estado inicial: aún no hay selección */
.reco-invita {
  display: grid; place-content: center; text-align: center; gap: var(--s-2);
  min-height: 340px; padding: var(--s-8) var(--s-5);
  background: var(--blanco); border: 2px dashed var(--linea); border-radius: var(--r-lg);
}
.reco-invita-icono { font-size: 2.5rem; line-height: 1; }
.reco-invita strong { font-family: var(--display); font-size: var(--t-lg); font-weight: 600; }
.reco-invita span { color: var(--tinta-suave); font-size: var(--t-sm); max-width: 34ch; margin-inline: auto; }
.presentacion-unica { margin: 0; font-weight: 700; font-size: var(--t-sm); }

/* ============================================================
   Ubicaciones y mapa
   ============================================================ */
.ubi-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s-5); align-items: start; }

.mapa-envoltura {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--linea); box-shadow: var(--sombra-sm); background: var(--arena);
}
#mapa { height: 460px; width: 100%; background: var(--arena); }
.mapa-error { padding: var(--s-6); text-align: center; color: var(--tinta-suave); font-size: var(--t-sm); margin: 0; }

.ubi-lista {
  list-style: none; margin: 0; padding: 0;
  max-height: 460px; overflow-y: auto;
  display: grid; gap: var(--s-2); padding-right: var(--s-2);
}
.ubi {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4); cursor: pointer; transition: all .2s var(--ease);
}
.ubi:hover { border-color: var(--rosa); transform: translateX(3px); box-shadow: var(--sombra-sm); }
.ubi-matriz { border-color: var(--magenta); background: var(--rosa-wash); }
.ubi-info { min-width: 0; }
.ubi-nombre { font-weight: 700; font-size: var(--t-sm); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.ubi-insignia {
  font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--magenta); color: #fff; padding: 2px var(--s-2); border-radius: var(--r-full);
}
.ubi-dir { font-size: var(--t-xs); color: var(--tinta-suave); line-height: 1.4; }
.ubi-comollegar {
  flex: none; font-size: var(--t-xs); font-weight: 700; color: var(--magenta);
  text-decoration: none; padding: var(--s-2) var(--s-3); border: 1px solid currentColor;
  border-radius: var(--r-full); transition: all .2s var(--ease); min-height: 44px;
  display: inline-flex; align-items: center;
}
.ubi-comollegar:hover { background: var(--magenta); color: #fff; }
.ubi-nota { text-align: center; margin-top: var(--s-5); color: var(--tinta-suave); font-size: var(--t-sm); }

/* Pines del mapa */
.pin-envoltura { background: none; border: none; }
.pin {
  display: block; width: 22px; height: 22px; border-radius: 50% 50% 50% 0;
  background: var(--magenta); border: 2.5px solid #fff;
  transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.pin-matriz { background: var(--verde-deep); width: 27px; height: 27px; }
.leaflet-popup-content { font-family: var(--texto); font-size: var(--t-sm); line-height: 1.5; }
.leaflet-popup-content a { color: var(--magenta); font-weight: 700; }
.leaflet-container { font-family: var(--texto); }

@media (max-width: 960px) {
  .ubi-grid { grid-template-columns: 1fr; }
  #mapa { height: 340px; }
  .ubi-lista { max-height: none; }
}
@media (max-width: 1040px) {
  .reco-layout { grid-template-columns: 1fr; }
  .reco-caja { position: static; order: -1; }
  .reco-controles { flex-direction: row; flex-wrap: wrap; gap: var(--s-5); }
  .reco-grupo { flex-direction: row; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
  .reco-caja .reco-pie { flex-direction: row; align-items: center; justify-content: space-between; }
  .reco-invita { min-height: 200px; }
}

@media (max-width: 760px) {
  .reco-controles { gap: var(--s-4); flex-direction: column; }
  .reco-grupo { align-items: flex-start; width: 100%; }
  .reco-caja { padding: var(--s-4); }
  .banner-item { font-size: var(--t-xs); }
  .ubi { flex-direction: column; align-items: flex-start; }
  .ubi-comollegar { align-self: stretch; justify-content: center; }
}

/* ============================================================
   Contacto
   ============================================================ */
.contacto-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-5); max-width: 940px; margin-inline: auto;
}
.contacto-tarjeta {
  display: flex; align-items: center; gap: var(--s-4); text-decoration: none;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-lg);
  padding: var(--s-5); color: var(--tinta); transition: all .25s var(--ease);
}
.contacto-tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); }
.contacto-wa:hover { border-color: #0f7d3f; }
.contacto-ig:hover { border-color: #c13584; }

.contacto-icono {
  flex: none; width: 54px; height: 54px; border-radius: var(--r-md);
  display: grid; place-items: center; color: #fff;
}
.contacto-wa .contacto-icono { background: #0f7d3f; }
.contacto-ig .contacto-icono { background: linear-gradient(135deg, #f9a03f 0%, #d6266e 50%, #7c3aed 100%); }
.contacto-icono svg { width: 28px; height: 28px; }

.contacto-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.contacto-titulo {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-suave);
}
.contacto-dato { font-family: var(--display); font-size: 1.25rem; font-weight: 600; line-height: 1.15; }
.contacto-desc { font-size: var(--t-sm); color: var(--tinta-suave); line-height: 1.45; }
.contacto-flecha { flex: none; font-size: 1.3rem; color: var(--magenta); transition: transform .25s var(--ease); }
.contacto-tarjeta:hover .contacto-flecha { transform: translateX(4px); }

@media (max-width: 420px) {
  .contacto-tarjeta { flex-wrap: wrap; }
  .contacto-flecha { display: none; }
}

/* ---------------------- Buscador y tandas del catálogo ---------------------- */
.catalogo-controles { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; margin-bottom: var(--s-5); }
.catalogo-controles .filtros { margin-bottom: 0; }

.buscador-envoltura { position: relative; flex: 1 1 280px; max-width: 420px; display: flex; align-items: center; }
.buscador-icono {
  position: absolute; left: var(--s-4); width: 18px; height: 18px;
  color: var(--tinta-suave); pointer-events: none;
}
.buscador-catalogo {
  width: 100%; padding: var(--s-3) var(--s-8) var(--s-3) calc(var(--s-4) + 26px);
  min-height: 48px; border: 2px solid var(--linea); border-radius: var(--r-full);
  background: var(--blanco); font: inherit; font-size: var(--t-sm);
}
.buscador-catalogo:focus { border-color: var(--magenta); outline: none; }
.buscador-catalogo::-webkit-search-cancel-button { display: none; }
.buscador-limpiar {
  position: absolute; right: var(--s-2); width: 36px; height: 36px;
  border: none; background: var(--arena-2); color: var(--tinta); cursor: pointer;
  border-radius: var(--r-full); font-size: .75rem; line-height: 1;
  display: grid; place-items: center;
}
.buscador-limpiar:hover { background: var(--magenta); color: #fff; }

.catalogo-mas { display: flex; justify-content: center; margin-top: var(--s-6); }
.catalogo-mas .btn { min-width: 260px; }
#catalogo-rejilla .tarjeta:focus { outline: 3px solid var(--magenta); outline-offset: 3px; }

@media (max-width: 700px) {
  .catalogo-controles { flex-direction: column; align-items: stretch; }
  .buscador-envoltura { max-width: none; }
  .catalogo-mas .btn { width: 100%; min-width: 0; }
}

/* Si una foto no carga, se muestra el hueco con el logo en vez de vacío */
.tarjeta-img.sin-foto {
  display: grid; place-items: center;
  background: var(--rosa-wash) url('../logo.png') center / 46% no-repeat;
  opacity: .75;
}

/* ============================================================
   Recetas
   ============================================================ */
.recetas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--s-5); }

.receta {
  display: flex; flex-direction: column; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--r-lg); overflow: hidden;
  transition: box-shadow .25s var(--ease);
}
.receta:hover { box-shadow: var(--sombra-md); }
.receta-foto { aspect-ratio: 4 / 3; background: var(--arena); overflow: hidden; }
.receta-foto img { width: 100%; height: 100%; object-fit: cover; }
.receta-cuerpo { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.receta h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.receta h4 {
  font-family: var(--texto); font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--magenta);
  margin: var(--s-5) 0 var(--s-2);
}
.receta-resumen { font-size: var(--t-sm); color: var(--tinta-suave); margin-bottom: var(--s-3); }
.receta-datos { display: flex; flex-wrap: wrap; gap: var(--s-3); font-size: var(--t-xs); color: var(--tinta-suave); font-weight: 600; }

.receta-ingredientes { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-1); }
.receta-ingredientes li { font-size: var(--t-sm); line-height: 1.5; }
.receta-pasos { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-3); }
.receta-pasos li { font-size: var(--t-sm); line-height: 1.6; padding-left: var(--s-1); }
.receta-pasos li::marker { color: var(--magenta); font-weight: 800; }

.receta-productos { margin-top: auto; padding-top: var(--s-4); }
.receta-producto {
  display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s-3); align-items: center;
  background: var(--rosa-wash); border-radius: var(--r-md); padding: var(--s-3); margin-bottom: var(--s-2);
}
.receta-producto-foto { width: 56px; height: 42px; object-fit: cover; border-radius: var(--r-sm); }
.receta-producto-nombre { font-weight: 700; font-size: var(--t-sm); line-height: 1.25; }
.receta-producto-precio { font-size: var(--t-xs); color: var(--tinta-suave); }

@media (max-width: 700px) {
  .recetas-grid { grid-template-columns: 1fr; }
  .receta-producto { grid-template-columns: 48px 1fr; }
  .receta-producto .btn { grid-column: 1 / -1; }
  .receta-producto-foto { width: 48px; height: 36px; }
}

/* ---------------------- Página de recetas ---------------------- */
.recetas-cabecera { padding-bottom: 0; }
.recetas-cabecera h1 { font-size: var(--t-2xl); }

.migas { font-size: var(--t-xs); color: var(--tinta-suave); margin-bottom: var(--s-5); }
.migas a { color: var(--magenta); font-weight: 700; text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.migas span { margin-inline: var(--s-1); }

.recetas-cierre {
  margin-top: var(--s-10); padding: var(--s-8) var(--s-5); text-align: center;
  background: var(--arena); border: 1px solid var(--linea); border-radius: var(--r-xl);
}
.recetas-cierre h2 { font-size: var(--t-xl); }
.recetas-cierre p { color: var(--tinta-suave); margin-bottom: var(--s-5); }
.nav-links a[aria-current='page'] { color: var(--magenta); border-bottom-color: var(--magenta); }

/* Precio con su nota de menudeo */
.precio-caja { display: flex; flex-direction: column; gap: 1px; }
.precio-nota {
  font-size: .68rem; color: var(--tinta-suave); font-weight: 600;
  letter-spacing: .01em; line-height: 1.2;
}
@media (max-width: 700px) { .precio-nota { font-size: .62rem; } }