:root {
  /* Paleta derivada del logo SETLAX:
     ladrillo #952c1c (contorno + wordmark), terracota #e5bd97 (sombrero),
     crema #f4efe7 (branquias). Los nombres --olive/--sage se conservan
     porque los usa todo el CSS; ahora apuntan a los tonos del logo. */
  --ink: #2b201c;
  --muted: #6b564e;
  --line: #e7d5c8;
  --paper: #fffaf6;
  --surface: #ffffff;

  /* Ladrillo del logo — color de marca principal (antes olive) */
  --olive: #952c1c;
  --olive-dark: #6f2013;

  /* Terracota del sombrero */
  --clay: #b0512c;
  --clay-soft: #f0dccb;

  /* Fondos suaves (antes sage/cream, ahora crema + terracota clara) */
  --sage: #faf1e9;
  --cream: #f4e6d9;
  --terracotta: #e5bd97;
  --gold: #c98a52;
  --shadow: 0 18px 45px rgba(90, 44, 28, 0.13);

  /* Radios: tarjetas más cálidas (12px), controles medios (10px),
     píldoras siguen usando 999px literal. */
  --radius: 12px;
  --radius-ctrl: 10px;
  --max-w: 1160px;

  /* Tipografía */
  --font-head: Bitter, Georgia, "Times New Roman", serif;
  --font-body: Karla, "Helvetica Neue", Arial, Helvetica, sans-serif;

  /* Foco visible */
  --focus: var(--clay);
  --focus-on-dark: var(--terracotta);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* ── Foco visible (accesibilidad de teclado) ──
   :focus-visible en lugar de :focus para no dibujar el anillo al hacer clic
   con el mouse. Sobre el fondo oscuro de #contacto el clay no contrasta, así
   que ahí se usa terracota. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

#contacto a:focus-visible,
#contacto summary:focus-visible {
  outline-color: var(--focus-on-dark);
}

.wa-float:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* ── Layout ── */
.page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px 80px;
}

section {
  padding: 64px 0;
}

/* El borde solo separa secciones que comparten fondo. Donde el fondo ya
   cambia (#como-funciona, #receta, #contacto) el borde era redundante. */
#hero,
#presentaciones,
#beneficios {
  border-bottom: 1px solid var(--line);
}

/* Las secciones con fondo propio respiran un poco más que las de paper.
   Se usa la misma especificidad de ID en los breakpoints de abajo para que
   el padding móvil no quede atrapado detrás de esta regla. */
#como-funciona,
#receta {
  padding: 76px 24px;
}

section:last-of-type { border-bottom: 0; }

/* ── Typography ── */
h1, h2, h3 { margin: 0; line-height: 1.15; font-family: var(--font-head); text-wrap: balance; }

h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; margin-bottom: 12px; }
h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }

p { margin: 0; }

.eyebrow {
  margin: 0 0 10px;
  color: var(--clay);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lead {
  margin-top: 14px;
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 560px;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-ctrl);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: filter 0.15s, transform 0.1s;
}

.btn:hover  { filter: brightness(1.07); }
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: #25d366;
  color: #fff;
}

/* Jerarquía: el verde WhatsApp queda reservado para la acción principal de
   pedido. Todo lo secundario usa contorno, de modo que solo un botón por
   pantalla compite por la atención. */
.btn-outline {
  background: transparent;
  color: var(--olive-dark);
  border: 2px solid var(--olive);
  /* compensa el borde de 2px para igualar la altura de .btn-primary */
  padding: 12px 26px;
}

.btn-outline:hover {
  background: var(--clay-soft);
  filter: none;
}

.btn svg { flex-shrink: 0; }

/* ── Nav ── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 250, 242, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 16px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.nav-logo picture {
  display: contents;
}

.nav-logo img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 0.15s;
}

.nav-links a:hover { color: var(--olive-dark); }

.nav-cta {
  /* Solo móvil: en escritorio manda .nav-links. Se muestra a <=960px,
     el mismo breakpoint donde .nav-links pasa a display:none. */
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: #25d366;
  color: #fff;
  border-radius: var(--radius-ctrl);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  touch-action: manipulation;
  transition: filter 0.15s;
}

.nav-cta:hover { filter: brightness(1.08); }

/* ── Hero ── */
#hero {
  padding: 56px 0 64px;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--clay-soft);
  color: var(--olive-dark);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.hero-badge::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clay);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero-price-note {
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.9rem;
}

.hero-img-box {
  position: relative;
  background: var(--sage);
  background-image: radial-gradient(
    circle at 50% 42%,
    rgba(229, 189, 151, 0.38),
    rgba(229, 189, 151, 0) 68%
  );
  border: 1px solid var(--clay-soft);
  border-radius: var(--radius);
  overflow: hidden;
  /* 4/5 dejaba el logo flotando en una caja muy alta; 1/1 ajusta la caja al
     lockup real. Al llegar la foto de producto esto vuelve a 4/5. */
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  padding: 28px;
  box-shadow: var(--shadow);
}

.hero-img-box picture {
  display: contents;
}


.hero-img-box img {
  width: 100%;
  max-width: 300px;
  height: auto;
  /* El lockup es vertical (700x800) y la caja tiene overflow:hidden, asi que
     sin contain el logo se recortaba arriba y abajo en pantallas angostas.
     min-height:0 es necesario para que el grid item pueda encogerse por
     debajo de su tamano intrinseco; sin eso max-height no surte efecto. */
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
}

/* ── Prices ── */
#presentaciones { background: var(--paper); }

.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-header .lead { margin: 10px auto 0; }

.delivery-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 14px;
  background: var(--sage);
  color: var(--olive-dark);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1px solid var(--terracotta);
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.price-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(55, 41, 28, 0.07);
  transition: box-shadow 0.2s, transform 0.2s;
}

.price-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

/* La tarjeta destacada tiene que ganar a simple vista, no solo por el borde.
   El scale se desactiva a <=960px para no romper la rejilla de 2 columnas. */
.price-card.featured {
  border-color: var(--olive);
  border-width: 2px;
  box-shadow: 0 14px 38px rgba(90, 44, 28, 0.16);
  transform: translateY(-4px) scale(1.02);
  z-index: 1;
}

.price-card.featured:hover {
  transform: translateY(-7px) scale(1.02);
  box-shadow: var(--shadow);
}

.price-card.featured .price-badge {
  background: var(--olive);
  color: #fff;
}

.price-card-img {
  background: var(--cream);
  padding: 16px 20px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--line);
}

.price-card-img img {
  width: 100%;
  max-width: 340px;
  height: auto;
  object-fit: contain;
}

.price-card-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.price-amount {
  font-family: var(--font-head);
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  font-weight: 700;
  color: var(--olive-dark);
  line-height: 1;
}

.price-weight {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.price-desc {
  color: var(--muted);
  font-size: 0.9rem;
  flex: 1;
}

.price-card-footer {
  padding: 0 18px 18px;
}

.price-card-footer .btn {
  width: 100%;
  justify-content: center;
  padding: 10px 16px;
  font-size: 0.88rem;
}

.price-badge {
  /* align-self evita que el flex column lo estire a todo el ancho */
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 3px 10px;
  background: var(--sage);
  color: var(--olive-dark);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.price-badge.commercial {
  background: var(--clay-soft);
  color: var(--olive-dark);
}

/* ── How it works ── */
#como-funciona {
  background: var(--sage);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}

.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  position: relative;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--olive);
  color: #fff;
  border-radius: 50%;
  margin-bottom: 16px;
}

.step h3 { font-size: 1rem; margin-bottom: 8px; }
.step p  { color: var(--muted); font-size: 0.92rem; }


/* ── Benefits ── */
#beneficios { background: var(--paper); }

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.benefit {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
}

.benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--sage);
  border: 1.5px solid var(--terracotta);
  border-radius: 50%;
  color: var(--olive);
  margin: 0 auto 16px;
}

.benefit h3 { font-size: 1rem; margin-bottom: 6px; }
.benefit p  { color: var(--muted); font-size: 0.88rem; }

/* ── Recipe ── */
#receta {
  background: var(--cream);
}

.recipe-inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: center;
}

.recipe-img {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.recipe-img img { width: 100%; }

.recipe-steps {
  margin: 20px 0 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recipe-steps li { padding-left: 4px; }

/* ── FAQ ── */
#faq { background: var(--paper); }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-item {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.faq-item:last-child { border-bottom: 0; }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary:hover { background: var(--sage); }

.faq-item[open] summary { background: var(--sage); }

/* Antes era un <h3> dentro del <summary>; ahora es un <span> para no
   ensuciar el esquema de encabezados. El estilo es idéntico. */
.faq-q {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--olive-dark);
  margin: 0;
  flex: 1;
}

.faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  color: var(--olive);
  transition: transform 0.25s;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  bottom: 6px;
  width: 10px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s;
}

.faq-icon::before { left: 1px;  transform: rotate(45deg);  transform-origin: right center; }
.faq-icon::after  { right: 1px; transform: rotate(-45deg); transform-origin: left center; }

.faq-item[open] .faq-icon::before { transform: rotate(-45deg); }
.faq-item[open] .faq-icon::after  { transform: rotate(45deg);  }

.faq-item p {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0 22px 20px;
  line-height: 1.6;
}


/* ── Contact / Footer ── */
#contacto {
  background: var(--olive-dark);
  color: #fff;
  border-bottom: 0;
  padding-left: 24px;
  padding-right: 24px;
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

#contacto h2 { color: #fff; margin-bottom: 8px; }
#contacto .lead { color: rgba(255,255,255,0.7); max-width: none; }

.contact-details {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
}

.contact-detail svg { flex-shrink: 0; margin-top: 2px; }

.contact-action { margin-top: 28px; }

.contact-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  padding: 36px 32px;
}

.contact-card h3 {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.contact-card p {
  color: rgba(255,255,255,0.7);
  font-size: 0.92rem;
  margin-bottom: 20px;
}

.btn-wa-large {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: #25d366;
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  transition: filter 0.15s;
}

.btn-wa-large:hover { filter: brightness(1.1); }

.map-embed {
  margin-top: 48px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 48px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom p {
  color: rgba(255,255,255,0.45);
  font-size: 0.82rem;
}

/* ── Floating WhatsApp button ── */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: #25d366;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45);
  transition: opacity 0.3s, transform 0.2s, box-shadow 0.2s;
}

.wa-float.visible {
  opacity: 1;
  pointer-events: auto;
}

.wa-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(37, 211, 102, 0.55);
}

.wa-float-label { white-space: nowrap; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .hero-inner           { grid-template-columns: 1fr 280px; }
  .hero-img-box img     { max-width: 224px; }
  .price-grid           { grid-template-columns: repeat(2, 1fr); }
  .steps                { grid-template-columns: 1fr; gap: 20px; }
  .benefits-grid        { grid-template-columns: repeat(2, 1fr); }
  .recipe-inner         { grid-template-columns: 1fr; }
  .contact-inner        { grid-template-columns: 1fr; }

  /* El CTA de WhatsApp toma el lugar de los links en la barra fija */
  .nav-links            { display: none; }
  .nav-cta              { display: flex; }

  /* Sin scale: rompería la alineación de la rejilla de 2 columnas */
  .price-card.featured,
  .price-card.featured:hover { transform: none; }
  .price-card.featured:hover { box-shadow: var(--shadow); }
}

@media (max-width: 600px) {
  /* Nav: SETLAX is short — keep full text size, only tighten the logo mark */
  .nav-logo             { gap: 8px; letter-spacing: 0.04em; }
  .nav-logo img         { width: 28px; height: 28px; }

  /* Hero: reduce top padding — remove dead space */
  #hero                 { padding: 40px 0 48px; }

  /* Hero: stack at small screens only */
  .hero-inner           { grid-template-columns: 1fr; }

  /* Hero: apilado a ancho completo — caja más baja para el lockup vertical */
  /* 3/2 era demasiado bajo para el lockup vertical: a <=390px el alto util
     (~199px) quedaba por debajo del alto natural del logo (~217px). 4/3 da el
     margen necesario sin alargar tanto el hero como 4/5. */
  .hero-img-box         { aspect-ratio: 4/3; padding: 20px; }
  .hero-img-box img     { max-width: 190px; }
}

/* Telefonos angostos: 4/3 deja de dar alto suficiente para el lockup
   vertical, asi que la caja se hace mas alta en lugar de encoger el logo. */
@media (max-width: 400px) {
  .hero-img-box         { aspect-ratio: 1/1; padding: 18px; }
  .hero-img-box img     { max-width: 176px; }

  /* Price cards: tighter padding on small screens */
  .price-card-img       { padding: 12px 16px; }

  /* Recipe button: full width to match other CTAs */
  #receta .btn          { display: flex; width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .page                 { padding: 0 16px 80px; }
  section               { padding: 44px 0; }

  /* Mismo peso de ID que la regla base: sin esto, #como-funciona y #receta
     conservarían 76px/24px y se saldrían del ancho en teléfono. */
  #como-funciona,
  #receta               { padding: 48px 18px; }
  .price-grid           { grid-template-columns: 1fr; }
  .benefits-grid        { grid-template-columns: 1fr; }
  .hero-actions         { flex-direction: column; }
  .hero-actions .btn    { width: 100%; justify-content: center; }
  .wa-float-label       { display: none; }
  .wa-float             { padding: 16px; border-radius: 50%; bottom: max(20px, env(safe-area-inset-bottom, 20px)); }

  /* Barra angosta: el CTA se queda solo con el icono */
  .nav-cta              { padding: 9px 11px; }
  .nav-cta-label        { display: none; }

  /* Ensure minimum tap target height on all buttons */
  .btn                  { min-height: 48px; }
  .price-card-footer .btn { min-height: 48px; }
}

/* ── Movimiento reducido ──
   Respeta la preferencia del sistema: sin transiciones, sin transforms de
   hover y sin scroll suave (esto último también se comprueba en script.js). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .price-card:hover,
  .price-card.featured,
  .price-card.featured:hover,
  .wa-float:hover,
  .btn:active {
    transform: none;
  }
}

@media print {
  nav, .wa-float { display: none; }
  body { background: #fff; }
}