/* Sitio público — lo compartido por catálogo, servicios y ubicación: colores,
   letras, franja de beneficios, barra verde, menú del celular, pie y botones.
   Lo propio de cada página vive en catalogo.css / paginas.css.
   Spec: docs/superpowers/specs/2026-10-02-rediseno-catalogo-design.md */

:root {
  --verde:       #1E7A3E;
  --verde-hondo: #124026;   /* el único "casi negro" de la página */
  --verde-claro: #45A16B;
  --amarillo:    #F5A800;
  --amarillo-suave: #fff4dd;
  --verde-suave: #e9f3ed;
  /* Sólo para descuentos (estrella de la tarjeta, chip "Ofertas" activo,
     número del banner sobre amarillo). En ningún otro lado. */
  --rojo-oferta: #d93a1e;

  --fondo:      #f4f6f3;    /* gris verdoso muy claro: las tarjetas blancas se despegan */
  --card:       #FFFFFF;
  --tinta:      #124026;
  --tinta-2:    #6B6E5F;
  --tinta-3:    #9a9c8b;
  --linea:      #E3E7E1;

  --radio:      14px;
  --sombra:     0 1px 3px rgba(0,0,0,.06);
  --sombra-alta:0 10px 26px rgba(18,64,38,.14);
  --fuente:     "Montserrat", "Segoe UI", system-ui, sans-serif;
  --fuente-titular: "Barlow Condensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--fuente); font-size: 15px; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; }
button { font-family: inherit; }

/* Titular de la casa: condensada e itálica. Peso 800 y .045em de aire: a 900
   y casi sin espacio las letras quedaban pegadas. */
.titular {
  font-family: var(--fuente-titular); font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: .045em; line-height: .95;
}

/* ── Barra: cápsula ─────────────────────────────────────────────────────── */
/* Una pieza redondeada del mismo ancho y radio que el banner de la portada,
   de un solo verde (el del escenario de la portada), para que se lean como
   un set: logo, buscador y pedido, nada más.
   sticky con un pequeño margen arriba: al bajar queda flotando sobre el
   contenido. El <header> es sólo el carril (todo el ancho, mismo padding que
   .layout); la cápsula visible es .navbar-inner. */
.navbar {
  position: sticky; top: 10px; z-index: 50;
  margin: 12px 0 0; padding: 0 1.4rem;
}
.navbar-inner {
  position: relative;
  display: flex; align-items: center; gap: 1.4rem;
  padding: .85rem 1.6rem; border-radius: 20px;
  box-shadow: 0 10px 30px rgba(18,64,38,.18);
  transition: box-shadow .25s ease;
}
/* El degradé va en una capa aparte para poder apagarlo con un fundido: en la
   portada del catálogo, arriba de todo, la barra se apoya sobre el escenario
   verde sin cápsula propia (ver #banner::before en catalogo.css). */
.navbar-inner::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--verde);
  transition: opacity .25s ease;
}
.navbar-inner { isolation: isolate; }
.navbar.scrolled .navbar-inner { box-shadow: 0 14px 34px rgba(18,64,38,.32); }
body:has(#portada:not([hidden])) .navbar:not(.scrolled) .navbar-inner { box-shadow: none; }
body:has(#portada:not([hidden])) .navbar:not(.scrolled) .navbar-inner::before { opacity: 0; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.brand-logo { height: 46px; width: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.brand-nombre {
  display: flex; flex-direction: column; line-height: .82;
  font-family: var(--fuente-titular); font-weight: 900; font-style: italic; letter-spacing: .03em;
  font-size: 1.9rem; color: var(--amarillo);
}
.brand-nombre small {
  font-family: var(--fuente); font-style: normal; font-weight: 600;
  font-size: .53rem; letter-spacing: .42em; color: rgba(255,255,255,.75); margin-top: .25rem;
}

/* Buscador en cápsula translúcida sobre el verde. */
.searchbox {
  display: flex; align-items: center; gap: .6rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 99px;
  padding: .62rem 1.1rem; transition: border-color .15s ease, background .15s ease;
}
.searchbox:focus-within { border-color: var(--amarillo); background: rgba(255,255,255,.12); }
.searchbox input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-size: .86rem; font-family: inherit; color: #fff;
}
.searchbox input::placeholder { color: rgba(255,255,255,.6); font-weight: 500; }
.searchbox input::-webkit-search-cancel-button { filter: invert(1); }
.searchbox-icon {
  width: 17px; height: 17px; flex: none; stroke: rgba(255,255,255,.75);
  fill: none; stroke-width: 2; stroke-linecap: round;
}
.navbar-buscador { flex: 1 1 auto; min-width: 0; max-width: 620px; margin: 0 0 0 auto; }

.navbar-burger {
  display: none; background: none; border: none; padding: .4rem; cursor: pointer; color: #fff;
  margin-left: auto;
}
.navbar-burger svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Menú del celular: colgando de la cápsula, también redondeado. */
.navbar-movil {
  position: absolute; top: calc(100% + 6px); left: 1.4rem; right: 1.4rem;
  display: flex; flex-direction: column; overflow: hidden; border-radius: 16px;
  background: var(--verde-hondo); box-shadow: 0 12px 26px rgba(0,0,0,.25);
}
.navbar-movil[hidden] { display: none; }
.navlink-movil {
  padding: .95rem 1.5rem; color: rgba(255,255,255,.85); text-decoration: none;
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  border-top: 1px solid rgba(255,255,255,.12);
}
.navlink-movil:first-child { border-top: none; }
.navlink-movil.active { color: var(--amarillo); }

@media (max-width: 768px) {
  .navbar { top: 6px; margin-top: 8px; padding: 0 .7rem; }
  .navbar-inner { flex-wrap: wrap; gap: .6rem; padding: .6rem .9rem .8rem; border-radius: 16px; }
  .navbar-movil { left: .7rem; right: .7rem; }
  .brand-logo { height: 34px; }
  .brand-nombre { font-size: 1.45rem; }
  .brand-nombre small { display: none; }
  .navbar-burger { display: flex; }
  .navbar-buscador { order: 10; flex-basis: 100%; max-width: none; margin: 0; }
  .searchbox { padding: .55rem .9rem; }
}
@media (min-width: 769px) { .navbar-movil { display: none !important; } }

/* ── Botón de acción (sombra dura que se hunde al apretar) ──────────────── */
.btn-accion {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-family: var(--fuente-titular); font-weight: 800; font-size: 1.05rem; letter-spacing: .05em;
  background: var(--amarillo); color: var(--verde-hondo);
  border: none; border-radius: 9px; padding: .55rem 1.1rem; cursor: pointer;
  box-shadow: 0 3px 0 #c98a00; text-decoration: none;
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn-accion:active { transform: translateY(2px); box-shadow: 0 1px 0 #c98a00; }
.btn-accion svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ── Aparición al scroll ────────────────────────────────────────────────── */
/* Lo dispara sitio.js (IntersectionObserver, una sola vez por elemento).
   --rd escalona los elementos de un mismo grupo. */
.reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--rd, 0s);
}
.reveal.reveal-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* ── Pie ────────────────────────────────────────────────────────────────── */
.foot { background: var(--verde-hondo); border-top: 5px solid var(--amarillo); }
.foot-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 3rem 1.75rem; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem;
}
.foot-marca-tit {
  font-family: var(--fuente-titular); font-size: 2rem; font-weight: 800; font-style: italic; letter-spacing: .03em;
  color: var(--amarillo); margin: 0 0 .8rem; line-height: .9;
}
.foot-marca-tit small { font-family: var(--fuente); font-size: .8rem; font-weight: 600; font-style: normal; color: #fff; margin-left: .4rem; letter-spacing: .2em; }
.foot-col-brand p { font-size: .84rem; line-height: 1.55; color: rgba(255,255,255,.72); margin: 0 0 .7rem; }
.foot-total-linea { font-size: .78rem !important; color: rgba(255,255,255,.55) !important; }
.foot-total-linea span { color: var(--amarillo); font-weight: 800; }
.foot-col h4 { font-family: var(--fuente-titular); font-size: 1.2rem; font-weight: 800; font-style: italic; letter-spacing: .05em; text-transform: uppercase; color: var(--amarillo); margin: 0 0 1rem; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.foot-col ul li, .foot-col ul li a {
  display: flex; align-items: flex-start; gap: .6rem; font-size: .84rem; color: rgba(255,255,255,.82);
  text-decoration: none;
}
.foot-col ul li a:hover { color: var(--amarillo); }
.foot-col ul svg { width: 15px; height: 15px; flex: none; margin-top: .15rem; fill: none; stroke: var(--amarillo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.foot-social { display: flex; align-items: center; gap: .7rem; text-decoration: none; font-size: .84rem; color: rgba(255,255,255,.82); margin-bottom: .8rem; }
.foot-social:hover { color: var(--amarillo); }
.foot-social-ico {
  width: 30px; height: 30px; border-radius: 99px; background: rgba(245,168,0,.2);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.foot-social-ico svg { width: 15px; height: 15px; fill: none; stroke: var(--amarillo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,.12); text-align: center;
  padding: 1.1rem 1.75rem; font-size: .72rem; color: rgba(255,255,255,.5);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem 1.1rem;
}
@media (max-width: 768px) { .foot-inner { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ── Modo embebido (?embed=1) ───────────────────────────────────────────── */
/* Para meter el catálogo dentro de otra página que ya trae su cromo. */
body.embebido .navbar,
body.embebido .foot { display: none; }