/*
 * Nekomiau — Marketing / storefront persuasion blocks
 * ====================================================
 * Fourth CUBE layer, loaded after components.css: everything the persuasion
 * storefront adds (homepage narrative sections, PDP persuasion blocks,
 * announcement bar, rich footer). Existing transactional CSS stays in
 * tokens/layout/components untouched.
 *
 * Design rules enforced here (brand manual + UX research):
 *  - Rothko color-field sections: flat solid blocks, max 3 colors per piece,
 *    never blue, no gradients, no decorative shadows.
 *  - One primary CTA per viewport: only .cta-button carries rojo atún (or
 *    crema inverted on red fields); everything else is text/outline.
 *  - Section air: 64-96px between sections, 16-24px inside.
 *  - Zero JS: scroll-snap gallery, <details> accordions, sticky positioning.
 */

/* ==========================================================================
   Announcement bar (non-sticky, one line)
   ========================================================================== */

.announcement-bar {
  background-color: var(--bg-inverse);
  color: var(--color-crema-leche);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-2) var(--space-4);
}

.announcement-bar a {
  color: inherit;
  text-decoration-color: var(--color-ocre-croqueta);
}

/* ==========================================================================
   Sections — flat color fields
   ========================================================================== */

.section {
  padding: var(--space-16) var(--space-4);
}

@media (min-width: 768px) {
  .section {
    padding: var(--space-20) var(--space-8);
  }
}

.section > .section__inner {
  max-width: var(--container-lg);
  margin-inline: auto;
}

.section--narrow > .section__inner {
  max-width: var(--container-md);
}

/* Color fields. Text colors resolve per field so headings stay legible. */
.section--rojo {
  background-color: var(--color-rojo-atun);
  color: var(--color-crema-leche);
}

.section--vino {
  background-color: var(--color-vino-res);
  color: var(--color-crema-leche);
}

.section--negro {
  background-color: var(--color-negro-trazo);
  color: var(--color-crema-leche);
}

.section--arena {
  background-color: var(--color-arena);
}

.section--rojo h1, .section--rojo h2, .section--rojo h3,
.section--vino h2, .section--vino h3,
.section--negro h2, .section--negro h3 {
  color: inherit;
}

/* Kicker: small uppercase label above a section headline */
.section__kicker {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-primary);
  margin-bottom: var(--space-2);
}

.section--rojo .section__kicker,
.section--vino .section__kicker,
.section--negro .section__kicker {
  color: var(--color-ocre-croqueta);
}

.section__headline {
  font-size: var(--text-2xl);
  max-width: 22ch;
  text-wrap: balance; /* evita viudas en 390px sin tocar el copy */
}

@media (min-width: 768px) {
  .section__headline {
    font-size: var(--text-3xl);
  }
}

.section__headline--center {
  margin-inline: auto;
  text-align: center;
}

.section__lead {
  font-size: var(--text-md);
  max-width: 58ch;
}

/* Section-closing CTA row: same single CTA repeated (consensus pattern) */
.section__cta-row {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.section__cta-row--center {
  align-items: center;
  text-align: center;
}

/* ==========================================================================
   CTA button + risk-reversal microcopy
   ========================================================================== */

.cta-button {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-md);
  color: var(--text-on-brand);
  background-color: var(--brand-primary);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-8);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.cta-button:hover {
  background-color: var(--brand-contrast);
  color: var(--text-on-brand);
}

.cta-button:active {
  transform: translateY(1px);
}

/* On red/dark fields the button inverts to crema so it stays the loudest
   element without adding a 4th color. */
.cta-button--inverse {
  background-color: var(--color-crema-leche);
  color: var(--color-negro-trazo);
}

.cta-button--inverse:hover {
  background-color: var(--color-arena);
  color: var(--color-negro-trazo);
}

.cta-microcopy {
  font-size: var(--text-sm);
  opacity: 0.85;
  margin: 0;
}

/* ==========================================================================
   Hero — rojo atún color field, type-led (Aesop) + identity headline (KatKin)
   ========================================================================== */

.hero-field {
  background-color: var(--color-rojo-atun);
  color: var(--color-crema-leche);
  padding: var(--space-16) var(--space-4) var(--space-12);
}

.hero-field__inner {
  max-width: var(--container-lg);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero-field .brand-mark {
  color: var(--color-crema-leche);
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
}

.hero-field__kicker {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-ocre-croqueta);
  margin: 0;
}

.hero-field__headline {
  font-size: var(--text-4xl);
  color: inherit;
  letter-spacing: -0.01em;
  max-width: 16ch;
  margin: 0;
  text-wrap: balance;
}

.hero-field__subhead {
  font-size: var(--text-md);
  font-weight: var(--font-weight-light);
  max-width: 44ch;
  margin: 0;
  opacity: 0.95;
}

.hero-field__cta {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

/* Puerta lateral de hidratación: link de texto, nunca compite con el CTA */
.hero-field__secondary-link {
  color: inherit;
  font-size: var(--text-sm);
  text-decoration-color: var(--color-ocre-croqueta);
  text-underline-offset: 0.2em;
  margin-top: var(--space-2);
}

.hero-field__secondary-link:hover {
  color: var(--color-ocre-croqueta);
}

/* CTA dentro del resultado del Test del Agua */
.hydration-callout .cta-button {
  margin-top: var(--space-3);
}

@media (min-width: 768px) {
  .hero-field {
    padding: var(--space-24) var(--space-8) var(--space-16);
  }

  .hero-field__headline {
    font-size: var(--text-5xl);
  }
}

/* Hero con foto de fondo: la imagen cubre el campo completo y un scrim
   PLANO de negro trazo (nunca degradado, manual de marca) garantiza el
   contraste del texto crema. El retrato es vertical: object-position
   favorece los ojos del gato hacia la derecha en pantallas anchas. */
.hero-field--photo {
  position: relative;
  overflow: hidden;
}

.hero-field__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 30%;
}

.hero-field__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(26, 22, 20, 0.55);
}

.hero-field--photo .hero-field__inner {
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .hero-field__bg {
    object-position: 70% 25%;
  }
}

/* ==========================================================================
   Authority strip (Nekovet)
   ========================================================================== */

.authority-strip {
  background-color: var(--color-arena);
  padding: var(--space-6) var(--space-4);
}

.authority-strip__inner {
  max-width: var(--container-md);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.authority-strip .brand-mark {
  flex: 0 0 auto;
}

.authority-strip__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-md);
  margin: 0 0 var(--space-1);
}

.authority-strip__body {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  max-width: 60ch;
}

/* ==========================================================================
   Two worlds — presa vs croqueta (Meléndez contrast)
   ========================================================================== */

.two-worlds {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

@media (min-width: 768px) {
  .two-worlds {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    /* Cada mundo mide lo suyo: sin esto la card de croqueta se estira
       hasta la altura de la card con foto y queda medio vacía. */
    align-items: start;
  }
}

.world-card {
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
}

.world-card--presa {
  background-color: var(--color-vino-res);
  color: var(--color-crema-leche);
}

.world-card--croqueta {
  background-color: var(--color-arena);
  color: var(--color-negro-trazo);
}

.world-card__photo {
  width: calc(100% + var(--space-6) * 2);
  margin: calc(var(--space-8) * -1) calc(var(--space-6) * -1) var(--space-5);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: block;
}

/* Foto editorial dentro de una sección (test del agua, plan despensa) */
.section-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-top: var(--space-6);
}

.section-photo--inset {
  max-width: var(--container-sm);
  margin-bottom: var(--space-6);
}

.world-card__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-3);
  opacity: 0.8;
}

.world-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: inherit;
  margin: 0 0 var(--space-4);
}

.world-card__facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.world-card__facts li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  padding-bottom: var(--space-2);
}

.world-card__facts strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  white-space: nowrap;
}

.two-worlds__closing {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--brand-primary);
  margin-top: var(--space-8);
  max-width: 30ch;
}

/* ==========================================================================
   Steps (cómo funciona) — big Arvo numerals
   ========================================================================== */

.steps {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
  counter-reset: step;
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}

.step {
  counter-increment: step;
}

.step::before {
  content: counter(step);
  display: block;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-4xl);
  line-height: 1;
  color: var(--color-ocre-croqueta);
  margin-bottom: var(--space-3);
}

.step__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.step__body {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 0;
  max-width: 34ch;
}

.section--negro .step__body,
.section--vino .step__body {
  color: inherit;
  opacity: 0.85;
}

/* ==========================================================================
   Pillars (sin atajos, sin cereal)
   ========================================================================== */

.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

@media (min-width: 640px) {
  .pillars {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .pillars {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pillar {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.pillar__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}

.pillar__title {
  font-size: var(--text-md);
  margin-bottom: var(--space-2);
}

.pillar__body {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* ==========================================================================
   Comparison table — mobile scrolls inside its own container
   ========================================================================== */

.compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: var(--space-8);
}

.compare-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin: 0;
}

.compare-table th,
.compare-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  text-align: left;
  vertical-align: top;
}

.compare-table thead th {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
  border-bottom-width: 2px;
}

.compare-table th[scope="row"] {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  color: inherit;
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: 0;
}

.compare-table .is-presa {
  color: var(--color-ocre-croqueta);
  font-weight: var(--font-weight-semibold);
}

.compare-table .is-nekomiau {
  font-weight: var(--font-weight-semibold);
}

.compare-table__footnote {
  font-size: var(--text-xs);
  opacity: 0.7;
  margin-top: var(--space-4);
}

/* ==========================================================================
   Social proof
   ========================================================================== */

.testimonials {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

@media (min-width: 768px) {
  .testimonials {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

.testimonial {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: 0;
}

.testimonial__tag {
  display: inline-block;
  background-color: var(--color-arena);
  color: var(--color-marron-pate);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-3);
}

.testimonial__quote {
  font-size: var(--text-base);
  margin: 0 0 var(--space-3);
}

.testimonial__quote::before {
  content: "“";
  font-family: var(--font-display);
  color: var(--brand-primary);
  font-size: var(--text-xl);
  line-height: 0;
  margin-right: 2px;
}

.testimonial__who {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
}

/* ==========================================================================
   Offer card (Pack de prueba) + subscription perks
   ========================================================================== */

.offer-card {
  background-color: var(--surface-raised);
  border: 2px solid var(--color-negro-trazo);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .offer-card {
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
  }

  .offer-card > img {
    flex: 0 0 40%;
  }
}

.offer-card__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* Los 5 sabores del pack como mini grid (fotos reales del producto) */
.offer-card__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .offer-card__gallery {
    flex: 0 0 40%;
  }
}

.offer-card__gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background-color: var(--bg-secondary);
}

.offer-card__gallery img:nth-child(4),
.offer-card__gallery img:nth-child(5) {
  display: none;
}

@media (min-width: 480px) {
  .offer-card__gallery {
    grid-template-columns: repeat(5, 1fr);
  }

  .offer-card__gallery img:nth-child(4),
  .offer-card__gallery img:nth-child(5) {
    display: block;
  }
}

.offer-card__price {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-3xl);
  color: var(--brand-primary);
  margin: 0;
}

.offer-card__includes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.offer-card__includes li::before {
  content: "· ";
  color: var(--brand-primary);
  font-weight: var(--font-weight-bold);
}

.perks {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-3);
  font-size: var(--text-base);
}

@media (min-width: 640px) {
  .perks {
    grid-template-columns: repeat(2, 1fr);
  }
}

.perks li {
  border-left: 3px solid var(--color-ocre-croqueta);
  padding-left: var(--space-3);
}

/* ==========================================================================
   FAQ — native <details>
   ========================================================================== */

.faq {
  margin-top: var(--space-8);
  border-top: 2px solid var(--color-negro-trazo);
}

.faq details {
  border-bottom: 1px solid var(--border-color-strong);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-md);
}

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

.faq summary::after {
  content: "+";
  font-family: var(--font-body);
  color: var(--brand-primary);
  font-size: var(--text-xl);
  line-height: 1;
  flex: 0 0 auto;
}

/* Al abrir, el "+" rota a "×": mismo glifo, transform-only, animable. */
.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details > p {
  padding-bottom: var(--space-4);
  margin: 0;
  color: var(--text-secondary);
  max-width: 62ch;
}

/* ==========================================================================
   Final CTA field
   ========================================================================== */

.final-cta {
  text-align: center;
}

.final-cta .brand-mark {
  color: var(--color-crema-leche);
  width: 4rem;
  height: 4rem;
  padding: 0;
  margin-bottom: var(--space-4);
}

.final-cta__headline {
  font-size: var(--text-3xl);
  margin-inline: auto;
  max-width: 18ch;
  text-wrap: balance;
}

.final-cta .section__lead {
  margin-inline: auto;
}

/* ==========================================================================
   El Test del Agua
   ========================================================================== */

.water-test-form {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
}

.water-test-form .field {
  margin: 0;
  flex: 1 1 12rem;
}

.water-test-form input,
.water-test-form select {
  margin: 0;
}

.water-test-form button {
  flex: 0 0 auto;
}

/* ==========================================================================
   El espejo (Supersize Michi) — placa tipográfica callada tras el CTA final:
   solo texto, aire generoso, cero competencia con el botón rojo de arriba.
   ========================================================================== */

.mirror .section__inner {
  max-width: var(--container-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mirror__headline {
  max-width: 20ch;
}

.mirror__beats {
  text-align: left;
  max-width: 46ch;
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mirror__beats p {
  margin: 0;
  color: var(--text-secondary);
}

.mirror__closing {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-lg);
  max-width: 24ch;
  margin: var(--space-8) 0 var(--space-2);
}

.mirror__link {
  font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   Catalog: category intro
   ========================================================================== */

.catalog-header {
  padding: var(--space-10) var(--space-6) var(--space-2);
  max-width: var(--container-lg);
  margin-inline: auto;
}

.catalog-header h1 {
  margin-bottom: var(--space-2);
}

.catalog-header__intro {
  color: var(--text-secondary);
  max-width: 56ch;
  font-size: var(--text-md);
  font-weight: var(--font-weight-light);
}

/* ==========================================================================
   PDP persuasion blocks
   ========================================================================== */

/* Gallery: horizontal scroll-snap when multiple photos */
.pdp-gallery {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.pdp-gallery::-webkit-scrollbar {
  display: none;
}

.pdp-gallery .product-detail__photo {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* Hydration callout: verde salvia signals "natural" (only allowed non-warm) */
.hydration-callout {
  border-left: 4px solid var(--color-verde-salvia);
  background-color: var(--feedback-success-bg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
  font-size: var(--text-sm);
}

.hydration-callout__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-base);
  margin: 0 0 var(--space-2);
}

.hydration-callout p {
  margin: 0;
  color: var(--text-secondary);
}

/* Guarantee box: pegado al botón de compra */
.guarantee-box {
  border: 2px solid var(--color-ocre-croqueta);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
}

.guarantee-box__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-base);
  margin: 0 0 var(--space-1);
}

.guarantee-box p {
  margin: 0;
  color: var(--text-secondary);
}

/* Zona Higuereta: caja de elegibilidad de delivery del barrio (checkout).
   Verde-salvia distingue esta caja de .guarantee-box (ocre) sin sumar un
   color nuevo: mismo patrón de caja plana, acento distinto. */
.shipping-zone {
  border: 2px solid var(--color-verde-salvia);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
  font-size: var(--text-sm);
}

.shipping-zone__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-base);
  margin: 0 0 var(--space-1);
}

.shipping-zone p {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
}

.shipping-zone__result {
  margin: var(--space-3) 0 0;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.shipping-zone__result[hidden] {
  display: none;
}

/* Purchase-mode choice: una vez vs plan (two visible options, radio feel) */
.buy-choice {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.buy-choice__option {
  display: block;
  border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.buy-choice__option--active {
  border: 2px solid var(--brand-primary);
}

.buy-choice__option strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
}

.buy-choice__option small {
  color: var(--text-secondary);
}

/* Benefit bullets */
.benefit-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.benefit-list li {
  padding-left: var(--space-5);
  position: relative;
}

.benefit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: var(--color-ocre-croqueta);
}

/* PDP accordions */
.pdp-accordions {
  margin-top: var(--space-6);
  border-top: 1px solid var(--border-color-strong);
}

.pdp-accordions details {
  border-bottom: 1px solid var(--border-color-strong);
}

.pdp-accordions summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) 0;
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
}

.pdp-accordions summary::-webkit-details-marker {
  display: none;
}

.pdp-accordions summary::after {
  content: "+";
  color: var(--brand-primary);
}

.pdp-accordions details[open] summary::after {
  transform: rotate(45deg);
}

.pdp-accordions details > div {
  padding-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ==========================================================================
   Rich footer
   ========================================================================== */

.footer-rich {
  background-color: var(--bg-inverse);
  color: var(--color-crema-leche);
  padding: var(--space-16) var(--space-6) var(--space-8);
  margin-top: var(--space-16);
}

.footer-rich__inner {
  max-width: var(--container-lg);
  margin-inline: auto;
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .footer-rich__inner {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  }
}

/* Libro de Reclamaciones: ícono de libro + enlaces legales */
.libro-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--brand-primary);
  flex: 0 0 auto;
}

.libro-icon--sm {
  width: 1.1rem;
  height: 1.1rem;
  vertical-align: -0.2em;
  color: var(--color-ocre-croqueta);
}

.footer-rich__libro {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.libro-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.libro-header h1 {
  margin-bottom: var(--space-1);
}

.libro-fieldset {
  border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-6);
}

.libro-fieldset legend {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  padding-inline: var(--space-2);
}

/* Páginas legales: prosa larga con medida de lectura */
.legal-page h2 {
  margin-top: var(--space-8);
}

.legal-page p {
  max-width: 68ch;
  color: var(--text-secondary);
}

.legal-page__updated {
  font-size: var(--text-sm);
  opacity: 0.8;
}

.footer-rich .brand-mark {
  color: var(--color-crema-leche);
  padding: 0;
  margin-bottom: var(--space-2);
}

.footer-rich__wordmark {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-xl);
  margin: 0 0 var(--space-1);
  color: inherit;
}

.footer-rich__tagline {
  font-size: var(--text-sm);
  opacity: 0.8;
  margin: 0;
  max-width: 28ch;
}

.footer-rich__heading {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ocre-croqueta);
  margin: 0 0 var(--space-3);
}

.footer-rich ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.footer-rich a {
  color: inherit;
  text-decoration: none;
}

.footer-rich a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-ocre-croqueta);
}

.footer-rich__legal {
  max-width: var(--container-lg);
  margin: var(--space-10) auto 0;
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  font-size: var(--text-xs);
  opacity: 0.7;
}

/* ==========================================================================
   Sticky header refinement (public site)
   ========================================================================== */

.site-header--sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 3.5rem;
  padding-block: var(--space-2);
}

.site-header__brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.site-header__logo {
  display: block;
  height: 2.25rem;
  width: auto;
}

/* Isotipo/lockup como <img>: el PNG real reemplaza al SVG aproximado.
   .brand-mark conserva el sizing por contexto; contain evita distorsión. */
img.brand-mark {
  object-fit: contain;
}

.footer-rich__lockup {
  display: block;
  width: 9rem;
  height: auto;
  margin-bottom: var(--space-3);
}

/* ==========================================================================
   Micro-momentos — whimsy sin elementos nuevos: transform/opacity only,
   150-250ms, todo detrás de prefers-reduced-motion. El estado final
   (indicador rotado, foco visible) funciona igual sin animación.
   ========================================================================== */

/* Los <summary> no están cubiertos por el focus ring global de tokens.css */
.faq summary:focus-visible,
.pdp-accordions summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  /* Tarjetas que responden al paseo del cursor: lift sutil, sin sombra nueva */
  .pillar,
  .testimonial {
    transition: transform 200ms var(--ease-standard);
  }

  .pillar:hover,
  .testimonial:hover {
    transform: translateY(-2px);
  }

  /* El "+" del acordeón gira suave hacia "×" */
  .faq summary::after,
  .pdp-accordions summary::after {
    transition: transform 200ms var(--ease-standard);
  }

  /* El logo ladea la cabeza como un michi curioso (sutil: lockup ancho) */
  .site-header__logo {
    transition: transform 180ms var(--ease-standard);
  }

  .site-header__brand-lockup:hover .site-header__logo,
  .site-header__brand-lockup:focus-visible .site-header__logo {
    transform: rotate(-2deg);
  }
}