/* =========================================================================
   Web V2 — Mónica Patiño · Swiss Just
   DIRECCIÓN A: "Herbolaria alpina" (aprobada por Mario, F1 14-jul-2026)
   Tokens primero: cambiar la marca = tocar :root, no el layout.
   ========================================================================= */

:root {
  /* Paleta — del mundo real Just: crema botánico, salvia, ámbar del frasco.
     Azul Just SOLO como sello. El magenta MX queda reservado a promos. */
  --crema: #F6F2E8;
  --crema-2: #EFE9DA;
  --salvia: #7E8C6C;
  --salvia-osc: #46543B;
  --salvia-noche: #37432E;
  --ambar: #B5722A;
  --ambar-osc: #9A5F20;
  --ambar-claro: #D89A4E;
  --tinta: #2B2E24;
  --tinta-suave: #5C6052;
  --blanco: #FDFCF8;
  --azul-just: #27519B;

  /* Motion (Emil): curvas fuertes, UI ≤300ms */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --radio: 14px;
  --max: 1080px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Jost", system-ui, sans-serif;
  background: var(--crema);
  color: var(--tinta);
  line-height: 1.6;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
img, svg { max-width: 100%; height: auto; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--tinta);
  color: var(--crema); padding: .6rem 1rem; z-index: 99;
}
.skip-link:focus { left: 0; }

/* ---------- utilidades tipográficas ---------- */
h1, h2, h3, blockquote { font-family: "Fraunces", Georgia, serif; font-weight: 530; }
.eyebrow {
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--salvia-osc); font-weight: 500; margin-bottom: 1rem;
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: var(--salvia); flex: none; }
.centrado .eyebrow { justify-content: center; }
.centrado { text-align: center; }
.sub { color: var(--tinta-suave); max-width: 52ch; }
.centrado .sub { margin-inline: auto; }

/* ---------- botones (Emil: press 160ms, scale .97) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: "Jost", sans-serif; font-weight: 500; font-size: .98rem;
  padding: .95rem 1.7rem; border-radius: 999px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--salvia-osc); color: var(--crema); }
.btn-ambar { background: var(--ambar); color: var(--blanco); }
.btn-ghost { background: transparent; color: var(--salvia-osc); border-color: rgba(70, 84, 59, .35); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--salvia-noche); }
  .btn-ambar:hover { background: var(--ambar-osc); }
  .btn-ghost:hover { border-color: var(--salvia-osc); }
}

/* ---------- header ---------- */
.site-header { padding: 1.1rem 0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--tinta); }
.brand-name { font-family: "Fraunces", serif; font-weight: 530; font-size: 1.05rem; display: block; line-height: 1.15; }
.brand-sub { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--salvia-osc); }
.header-cta { font-size: .9rem; padding: .65rem 1.2rem; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  display: grid; align-items: center;
  background:
    radial-gradient(58% 42% at 78% 18%, rgba(126, 140, 108, .16), transparent 70%),
    radial-gradient(46% 38% at 16% 82%, rgba(181, 114, 42, .12), transparent 70%),
    var(--crema);
}
.hero-inner {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  padding-block: clamp(2.5rem, 7vh, 5rem);
}
.hero h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.3rem);
  line-height: 1.04; letter-spacing: -0.015em; margin-bottom: 1.3rem;
}
.hero h1 em { font-style: italic; font-weight: 400; color: var(--salvia-osc); }
.hero-lead { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--tinta-suave); max-width: 34ch; margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.hero-breath {
  margin-top: 2.2rem; font-size: .8rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--salvia);
  display: flex; align-items: center; gap: .7rem;
}
.breath-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--salvia); flex: none;
  animation: breathe 14s var(--ease-in-out) infinite;
}
@keyframes breathe {
  0%   { transform: scale(1);   opacity: .55; }  /* reposo */
  28%  { transform: scale(1.9); opacity: 1; }    /* inhala 4 */
  57%  { transform: scale(1.9); opacity: 1; }    /* sostén 4 */
  100% { transform: scale(1);   opacity: .55; }  /* exhala 6 */
}

/* Frasco: contenedor swap-ready — F3 reemplaza el SVG por foto/3D sin tocar layout */
.hero-frasco { position: relative; display: grid; place-items: center; }
.frasco-halo {
  position: absolute; width: min(78%, 340px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 154, 78, .22), transparent 65%);
  animation: breathe 14s var(--ease-in-out) infinite;
}
#producto-hero { position: relative; width: clamp(120px, 30vw, 170px); }
#producto-hero svg, #producto-hero img { display: block; width: 100%; filter: drop-shadow(0 18px 28px rgba(43, 46, 36, .18)); }
.frasco-nota {
  position: relative; margin-top: 1rem; font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-suave); text-align: center;
}

/* ---------- secciones base + reveal on scroll ---------- */
section { padding-block: clamp(3.5rem, 9vh, 6rem); }
.rev { opacity: 0; transform: translateY(18px);
  transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1), transform 380ms cubic-bezier(0.16, 1, 0.3, 1); }
.rev.vista { opacity: 1; transform: translateY(0); }

/* ---------- consulta guiada ---------- */
.consulta { background: var(--blanco); border-block: 1px solid var(--crema-2); }
.consulta h2, .seccion-titulo { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.1; margin-bottom: .6rem; }
.consulta .sub { margin-bottom: 2.2rem; }
.necesidades { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 2rem; }
.chip {
  font-family: "Jost", sans-serif; font-size: .95rem; font-weight: 400;
  padding: .75rem 1.35rem; border-radius: 999px;
  background: var(--crema); color: var(--tinta);
  border: 1px solid rgba(70, 84, 59, .22); cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 180ms ease,
              color 180ms ease, border-color 180ms ease;
}
.chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--salvia-osc); } }
.chip[aria-pressed="true"] { background: var(--salvia-osc); color: var(--crema); border-color: var(--salvia-osc); }
.respuesta { min-height: 200px; }
.respuesta-voz {
  font-family: "Fraunces", serif; font-style: italic; font-size: 1.12rem;
  color: var(--salvia-osc); margin-bottom: 1.4rem; max-width: 52ch;
}
.productos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.producto {
  background: var(--crema); border: 1px solid var(--crema-2);
  border-radius: var(--radio); padding: 1.15rem 1.25rem;
  opacity: 0; transform: translateY(8px);
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.respuesta.viva .producto { opacity: 1; transform: translateY(0); }
.respuesta.viva .producto:nth-child(1) { transition-delay: 0ms; }
.respuesta.viva .producto:nth-child(2) { transition-delay: 50ms; }
.respuesta.viva .producto:nth-child(3) { transition-delay: 100ms; }
.producto h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.producto p { font-size: .9rem; color: var(--tinta-suave); }
.producto p q { font-style: italic; color: var(--salvia-osc); }
.respuesta-hint { color: var(--tinta-suave); font-size: .95rem; }

/* ---------- óleo 31 spotlight ---------- */
.oleo { background: linear-gradient(180deg, var(--crema), var(--crema-2)); }
.oleo-inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.oleo-media { display: grid; place-items: center; }
.oleo-media svg, .oleo-media img { width: min(55%, 190px); filter: drop-shadow(0 14px 22px rgba(43, 46, 36, .16)); }
.oleo blockquote { font-style: italic; font-weight: 400; font-size: 1.15rem; color: var(--salvia-osc);
  border-left: 2px solid var(--ambar); padding-left: 1rem; margin: 1.4rem 0; }
.oleo-datos { display: flex; gap: 1.6rem; flex-wrap: wrap; margin: 1.4rem 0 1.8rem; }
.dato { min-width: 7rem; }
.dato strong { font-family: "Fraunces", serif; font-size: 1.6rem; font-weight: 530; color: var(--ambar); display: block; line-height: 1.1; }
.dato span { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }

/* ---------- sobre mí ---------- */
.about { background: var(--blanco); border-block: 1px solid var(--crema-2); }
.about-inner { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.about-medallion {
  width: min(60%, 200px); aspect-ratio: 1; border-radius: 50%; margin-inline: auto;
  display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 35% 30%, var(--crema), var(--crema-2));
  border: 1px solid var(--crema-2);
}
.medallion-initials { font-family: "Fraunces", serif; font-size: 2.6rem; font-weight: 530; color: var(--salvia-osc); }
.medallion-ring { position: absolute; inset: -9px; border-radius: 50%; border: 1px dashed rgba(126, 140, 108, .5); }
.about-media-note { text-align: center; margin-top: 1rem; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.about h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: 1rem; }
.about p { color: var(--tinta-suave); max-width: 56ch; margin-bottom: 1rem; }
.about p.destacada { font-family: "Fraunces", serif; font-style: italic; font-size: 1.15rem; color: var(--tinta); }

/* ---------- así trabajo ---------- */
.como .seccion-titulo { margin-bottom: .6rem; }
.como .sub { margin-bottom: 2.4rem; }
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; counter-reset: paso; list-style: none; }
.paso {
  background: var(--blanco); border: 1px solid var(--crema-2); border-radius: var(--radio);
  padding: 1.4rem 1.3rem 1.2rem; position: relative;
}
.paso::before {
  counter-increment: paso; content: counter(paso);
  font-family: "Fraunces", serif; font-weight: 530; font-size: 1.3rem;
  color: var(--ambar); display: block; margin-bottom: .5rem;
}
.paso h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.paso p { font-size: .9rem; color: var(--tinta-suave); }
.como-nota { margin-top: 1.6rem; font-size: .95rem; color: var(--tinta-suave); }
.como-nota a { color: var(--salvia-osc); }

/* ---------- colecciones ---------- */
.colecciones { background: var(--blanco); border-block: 1px solid var(--crema-2); }
.colecciones .sub { margin-bottom: 2.4rem; }
.cole-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.cole {
  background: var(--crema); border: 1px solid var(--crema-2); border-radius: var(--radio);
  padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .5rem;
}
.cole .emoji { font-size: 1.5rem; }
.cole h3 { font-size: 1.12rem; }
.cole p { font-size: .9rem; color: var(--tinta-suave); flex: 1; }
.cole a {
  font-size: .9rem; font-weight: 500; color: var(--salvia-osc); text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem;
}
@media (hover: hover) and (pointer: fine) { .cole a:hover { color: var(--ambar-osc); } }
.cole-links { margin-top: 2rem; display: flex; gap: .8rem; flex-wrap: wrap; }

/* ---------- consultora ---------- */
.consultora { background: linear-gradient(180deg, var(--crema), var(--crema-2)); }
.consultora-caja {
  max-width: 640px; margin-inline: auto; text-align: center;
  background: var(--blanco); border: 1px solid var(--crema-2);
  border-radius: calc(var(--radio) + 6px); padding: clamp(1.8rem, 5vw, 3rem);
}
.consultora h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .8rem; }
.consultora p { color: var(--tinta-suave); margin-bottom: 1rem; }
.consultora ul { list-style: none; margin: 0 0 1.6rem; color: var(--tinta-suave); font-size: .95rem; }
.consultora li { padding: .25rem 0; }
.consultora li::before { content: "· "; color: var(--ambar); font-weight: 600; }

/* ---------- contacto ---------- */
.contact { text-align: center; }
.contact h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); margin-bottom: .7rem; }
.contact .sub { margin-inline: auto; margin-bottom: 2rem; }
.contact-redes { margin-top: 1.6rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.contact-redes a { color: var(--salvia-osc); font-size: .95rem; }
.sello {
  margin-top: 2.4rem; display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--azul-just); border: 1px solid rgba(39, 81, 155, .3);
  padding: .5rem 1rem; border-radius: 999px;
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--tinta); color: rgba(246, 242, 232, .75);
  padding: 2.4rem 0 2.8rem; font-size: .85rem;
}
.footer-links { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.footer-links a { color: var(--crema); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer-links a:hover { color: var(--ambar-claro); } }
.footer-legal { max-width: 70ch; opacity: .75; line-height: 1.55; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .hero-inner, .oleo-inner, .about-inner { grid-template-columns: 1fr; }
  .hero-frasco { order: -1; margin-top: .5rem; }
  #producto-hero { width: clamp(108px, 34vw, 140px); }

  .frasco-halo { width: min(52%, 210px); }
  .oleo-media { order: -1; }
  .oleo-media svg, .oleo-media img { width: min(32%, 130px); }
}

/* ---------- accesibilidad de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .breath-dot, .frasco-halo { animation: none; }
  .rev, .producto { transform: none; transition: opacity 200ms ease; }
}

/* =========================================================================
   F2.5 — capa de rediseño (nav viva, protagonistas, craft de botones)
   ========================================================================= */

/* ---------- header sticky que gana fondo al scrollear ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.site-header.con-fondo {
  background: var(--crema);
  box-shadow: 0 1px 0 rgba(70, 84, 59, .12);
}
#hero-sentinel { position: absolute; top: 120px; height: 1px; width: 1px; }

.nav-secciones { display: flex; gap: 1.4rem; }
.nav-secciones a {
  position: relative; text-decoration: none; color: var(--tinta-suave);
  font-size: .92rem; font-weight: 400; padding: .3rem 0;
  transition: color 180ms ease;
}
.nav-secciones a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--ambar); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-secciones a.activa { color: var(--tinta); }
.nav-secciones a.activa::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .nav-secciones a:hover { color: var(--tinta); }
}
@media (max-width: 860px) { .nav-secciones { display: none; } }

/* ---------- craft de botones: flecha viva + focus visible ---------- */
.btn .flecha, .duo-cta .flecha {
  display: inline-block;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover .flecha, .duo-card:hover .flecha { transform: translateX(4px); }
}
.btn:focus-visible, .chip:focus-visible, .duo-card:focus-visible, #wa-flotante:focus-visible {
  outline: 2px solid var(--ambar); outline-offset: 3px;
}

/* ---------- catálogo y tienda protagonistas ---------- */
.duo { background: var(--crema); }
.duo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.1rem; margin-top: 1.6rem; }
.duo-card {
  display: flex; flex-direction: column; gap: .55rem;
  padding: clamp(1.5rem, 4vw, 2.2rem);
  border-radius: calc(var(--radio) + 6px);
  text-decoration: none; color: var(--crema);
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 200ms ease;
}
.duo-card:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .duo-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(43, 46, 36, .18); }
}
.duo-catalogo { background: linear-gradient(135deg, var(--salvia-osc), #2E3A26); }
.duo-tienda { background: linear-gradient(135deg, var(--ambar-osc), #7A4A16); }
.duo-emoji { font-size: 2rem; line-height: 1; }
.duo-card h3 { font-size: 1.35rem; color: inherit; }
.duo-card p { font-size: .95rem; opacity: .85; flex: 1; }
.duo-cta {
  font-weight: 500; font-size: .98rem; display: inline-flex; gap: .45rem; align-items: center;
  border-top: 1px solid rgba(253, 252, 248, .25); padding-top: .9rem; margin-top: .4rem;
}
.duo-nota { margin-top: 1.4rem; color: var(--tinta-suave); font-size: .95rem; }
.duo-nota a { color: var(--salvia-osc); }

/* ---------- WhatsApp flotante (aparece tras el hero) ---------- */
#wa-flotante {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.45rem;
  background: var(--salvia-osc); color: var(--crema); text-decoration: none;
  box-shadow: 0 8px 22px rgba(43, 46, 36, .3);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
#wa-flotante.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#wa-flotante:active { transform: scale(0.94); }
@media (min-width: 861px) { #wa-flotante { display: none; } } /* desktop: el header ya trae CTA */

/* ---------- consulta premium: crossfade con blur (Emil) ---------- */
.respuesta-voz, .respuesta .btn { opacity: 0; filter: blur(3px);
  transition: opacity 240ms cubic-bezier(0.23, 1, 0.32, 1), filter 240ms ease; }
.respuesta.viva .respuesta-voz, .respuesta.viva .btn { opacity: 1; filter: blur(0); }
.producto { filter: blur(3px); }
.respuesta.viva .producto { filter: blur(0); }
.producto { transition: opacity 250ms cubic-bezier(0.23,1,0.32,1), transform 250ms cubic-bezier(0.23,1,0.32,1), filter 250ms ease; }
.chip { min-height: 2.9rem; }

@media (prefers-reduced-motion: reduce) {
  .respuesta-voz, .respuesta .btn, .producto { filter: none; transition: opacity 200ms ease; }
  #wa-flotante { transition: opacity 200ms ease; transform: none; }
  .nav-secciones a::after { transition: none; }
  .duo-card, .btn .flecha, .duo-cta .flecha { transition: none; }
}

/* ---------- foto real de Mónica (sustituye medallón MP) ---------- */
.about-medallion { overflow: visible; }
.about-foto {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; display: block;
}

/* =========================================================================
   F2.6 — multi-página: nav real, iconografía propia, tarjetas tocables
   ========================================================================= */

/* ---------- iconos SVG propios (cero emojis) ---------- */
.ic { width: 1.15em; height: 1.15em; vertical-align: -0.18em; flex: none; }
.ic-lg { width: 2.1rem; height: 2.1rem; }
.chip .ic { margin-right: .45rem; color: var(--salvia-osc); }
.chip[aria-pressed="true"] .ic { color: var(--crema); }

/* ---------- nav multi-página ---------- */
.nav-secciones a[aria-current="page"] { color: var(--tinta); }
.nav-secciones a[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none; background: none; border: 1px solid rgba(70,84,59,.25);
  border-radius: 10px; padding: .5rem .6rem; color: var(--salvia-osc); cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color 180ms ease;
}
.nav-toggle:active { transform: scale(0.95); }
.nav-movil {
  display: none; position: fixed; inset: 0; z-index: 70;
  background: rgba(43, 46, 36, .35);
}
.nav-movil.abierto { display: block; }
.nav-movil-panel {
  position: absolute; top: 0; right: 0; width: min(78vw, 320px); height: 100%;
  background: var(--crema); padding: 1.4rem 1.6rem;
  display: flex; flex-direction: column; gap: .2rem;
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: -12px 0 32px rgba(43,46,36,.18);
}
.nav-movil.abierto .nav-movil-panel { transform: translateX(0); }
.nav-movil-panel a {
  display: flex; align-items: center; gap: .7rem;
  padding: .9rem .4rem; text-decoration: none; color: var(--tinta);
  font-size: 1.06rem; border-bottom: 1px solid var(--crema-2);
}
.nav-movil-panel a .ic { color: var(--salvia-osc); }
.nav-movil-panel a[aria-current="page"] { color: var(--salvia-osc); font-weight: 500; }
.nav-movil-cerrar { align-self: flex-end; margin-bottom: .6rem; }
@media (max-width: 860px) { .nav-toggle { display: inline-flex; align-items: center; } .header-cta { display: none; } }

/* ---------- hero de página interior ---------- */
.page-hero { padding: clamp(2.2rem, 6vh, 4rem) 0 clamp(1.5rem, 4vh, 2.5rem); }
.page-hero h1 { font-family: "Fraunces", serif; font-weight: 530;
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -0.01em; margin-bottom: .8rem; }
.page-hero h1 em { font-style: italic; font-weight: 400; color: var(--salvia-osc); }
.page-hero .sub { font-size: 1.05rem; }

/* ---------- tarjetas de invitación (home) — 100% tocables ---------- */
.invita-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.invita {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--blanco); border: 1px solid var(--crema-2); border-radius: var(--radio);
  padding: 1.5rem 1.4rem; text-decoration: none; color: var(--tinta);
  transition: transform 200ms var(--ease-out), box-shadow 200ms ease, border-color 200ms ease;
}
.invita:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .invita:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(43,46,36,.12); border-color: rgba(70,84,59,.3); }
  .invita:hover .flecha { transform: translateX(4px); }
}
.invita .ic-lg { color: var(--ambar); }
.invita h3 { font-size: 1.15rem; }
.invita p { font-size: .92rem; color: var(--tinta-suave); flex: 1; }
.invita .invita-cta { font-weight: 500; color: var(--salvia-osc); display: inline-flex; gap: .4rem; align-items: center; font-size: .95rem; }

/* ---------- colecciones tocables (tarjeta entera = link) ---------- */
a.cole { text-decoration: none; color: var(--tinta);
  transition: transform 200ms var(--ease-out), box-shadow 200ms ease, border-color 200ms ease; }
a.cole:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  a.cole:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(43,46,36,.12); border-color: rgba(70,84,59,.3); }
  a.cole:hover .flecha { transform: translateX(4px); }
}
.cole .ic-lg { color: var(--salvia-osc); }
.cole .cole-cta { font-size: .9rem; font-weight: 500; color: var(--salvia-osc); display: inline-flex; gap: .35rem; align-items: center; }

/* ---------- página catálogo: colecciones desarrolladas ---------- */
.coleccion { padding-block: clamp(2rem, 5vh, 3.2rem); border-top: 1px solid var(--crema-2); }
.coleccion:first-of-type { border-top: 0; }
.coleccion header { display: flex; align-items: center; gap: .8rem; margin-bottom: .4rem; }
.coleccion header .ic-lg { color: var(--ambar); }
.coleccion h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.coleccion .col-lead { color: var(--tinta-suave); max-width: 60ch; margin-bottom: 1.2rem; }
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; }
.prod {
  background: var(--blanco); border: 1px solid var(--crema-2); border-radius: 12px;
  padding: .95rem 1.05rem;
}
.prod h4 { font-family: "Fraunces", serif; font-weight: 530; font-size: .98rem; margin-bottom: .2rem; }
.prod p { font-size: .85rem; color: var(--tinta-suave); }
.prod p q { font-style: italic; color: var(--salvia-osc); }
.prod .tam { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ambar-osc); }

/* ---------- FAQ (cómo comprar) ---------- */
.faq { max-width: 720px; }
.faq details {
  background: var(--blanco); border: 1px solid var(--crema-2); border-radius: 12px;
  padding: 0; margin-bottom: .7rem; overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 1rem 1.2rem;
  font-family: "Fraunces", serif; font-weight: 530; font-size: 1.02rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: "Jost"; font-size: 1.3rem; color: var(--ambar);
  transition: transform 200ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-r { padding: 0 1.2rem 1.1rem; color: var(--tinta-suave); font-size: .95rem; }
.faq .faq-r a { color: var(--salvia-osc); }

/* ---------- frasco clickeable ---------- */
a.frasco-link { display: block; width: fit-content; margin-inline: auto; text-decoration: none; border-radius: 20px;
  transition: transform 200ms var(--ease-out); }
a.frasco-link:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { a.frasco-link:hover { transform: translateY(-4px); } }

/* ---------- 3D (model-viewer, lazy con poster) ---------- */
model-viewer { width: 100%; height: min(58vh, 460px); background: transparent; --poster-color: transparent; }
.mv-hint { text-align: center; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); margin-top: .5rem; }

@media (prefers-reduced-motion: reduce) {
  .nav-movil-panel { transition: none; }
  .invita, a.cole, a.frasco-link { transition: none; }
}

/* =========================================================================
   F2.7 — fichas de producto (dialog) + asistente determinista + fotos
   ========================================================================= */

/* tarjetas de producto con foto, 100% tocables */
button.prod { text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%;
  transition: transform 200ms var(--ease-out), box-shadow 200ms ease, border-color 200ms ease; }
button.prod:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  button.prod:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(43,46,36,.12); border-color: rgba(70,84,59,.3); }
}
.prod-img { width: 100%; height: 120px; object-fit: contain; margin-bottom: .6rem;
  mix-blend-mode: multiply; }
.prod-mas { font-size: .82rem; font-weight: 500; color: var(--salvia-osc); display: inline-flex; gap: .3rem; align-items: center; margin-top: .4rem; }

/* ---------- dialog base (ficha + asistente) ---------- */
dialog { border: none; padding: 0; background: transparent; max-width: none; max-height: none; }
dialog::backdrop { background: rgba(43, 46, 36, .45); }
.dlg-caja {
  background: var(--crema); border-radius: 18px; border: 1px solid var(--crema-2);
  width: min(92vw, 560px); max-height: 86svh; overflow-y: auto;
  padding: clamp(1.3rem, 4vw, 2rem); position: relative;
  margin: auto;
}
dialog[open] .dlg-caja { animation: dlg-entra 220ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes dlg-entra { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.dlg-cerrar { position: absolute; top: .9rem; right: .9rem; }

/* ---------- ficha de producto ---------- */
.ficha-top { display: flex; gap: 1.2rem; align-items: center; margin-bottom: 1rem; }
.ficha-top img { width: 130px; height: 150px; object-fit: contain; flex: none; mix-blend-mode: multiply; }
.ficha-top h3 { font-size: 1.35rem; line-height: 1.15; }
.ficha-top .tam { display: block; margin-top: .3rem; }
.ficha-cita { font-family: "Fraunces", serif; font-style: italic; color: var(--salvia-osc);
  border-left: 2px solid var(--ambar); padding-left: .9rem; margin: .9rem 0; }
.ficha-secc { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ambar-osc); font-weight: 500; margin: 1rem 0 .3rem; }
.ficha-vabien { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.ficha-vabien button { font: inherit; font-size: .85rem; padding: .45rem .9rem; border-radius: 999px;
  background: var(--blanco); border: 1px solid var(--crema-2); color: var(--tinta); cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color 180ms ease; }
.ficha-vabien button:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .ficha-vabien button:hover { border-color: var(--salvia-osc); } }
.ficha-cta { margin-top: 1.3rem; display: flex; gap: .7rem; flex-wrap: wrap; }

/* ---------- asistente de dudas ---------- */
#dudas-flotante {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.1rem; border-radius: 999px; border: 1px solid rgba(70,84,59,.25);
  background: var(--crema); color: var(--salvia-osc); font: 500 .9rem "Jost", sans-serif;
  cursor: pointer; box-shadow: 0 6px 18px rgba(43,46,36,.14);
  transition: transform 160ms var(--ease-out), border-color 180ms ease;
}
#dudas-flotante:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { #dudas-flotante:hover { border-color: var(--salvia-osc); } }
.dudas-pregs { display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; }
.dudas-pregs button {
  font: inherit; font-size: .95rem; text-align: left; padding: .8rem 1rem; border-radius: 12px;
  background: var(--blanco); border: 1px solid var(--crema-2); color: var(--tinta); cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color 180ms ease;
}
.dudas-pregs button:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .dudas-pregs button:hover { border-color: var(--salvia-osc); } }
.dudas-r { background: var(--blanco); border: 1px solid var(--crema-2); border-radius: 12px;
  padding: 1rem 1.1rem; margin-top: .8rem; font-size: .95rem; color: var(--tinta-suave);
  opacity: 0; transform: translateY(6px); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.dudas-r.viva { opacity: 1; transform: none; }
.dudas-r a { color: var(--salvia-osc); }
.dudas-volver { margin-top: .8rem; }
.dudas-pie { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--crema-2);
  font-size: .88rem; color: var(--tinta-suave); }

@media (max-width: 860px) { #dudas-flotante span.txt { display: none; } #dudas-flotante { padding: .8rem; } }
@media (prefers-reduced-motion: reduce) {
  dialog[open] .dlg-caja { animation: none; }
  .dudas-r { transition: opacity 200ms ease; transform: none; }
}

/* ---------- F2.8: testimonios reales (PENDIENTE OK MÓNICA) ---------- */
.testimonios { background: var(--blanco); border-block: 1px solid var(--crema-2); }
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.testi { background: var(--crema); border: 1px solid var(--crema-2); border-radius: var(--radio); padding: 1.5rem 1.4rem; }
.testi blockquote { font-family: "Fraunces", serif; font-style: italic; font-weight: 400;
  font-size: 1.08rem; line-height: 1.45; color: var(--tinta); margin-bottom: .8rem; }
.testi cite { font-style: normal; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--salvia-osc); }
.testi-nota { margin-top: 1.1rem; font-size: .85rem; color: var(--tinta-suave); }

/* =========================================================================
   F2.9 — redes visibles, dudas con presencia, testimonios ricos, ofertas
   ========================================================================= */

/* redes en header y footer */
.redes-mini { display: flex; gap: .5rem; align-items: center; }
.redes-mini a { display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border-radius: 50%; border: 1px solid rgba(70,84,59,.22); color: var(--salvia-osc);
  transition: transform 160ms var(--ease-out), border-color 180ms ease, color 180ms ease; }
.redes-mini a:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .redes-mini a:hover { border-color: var(--salvia-osc); color: var(--ambar-osc); } }
.redes-mini .ic { width: 1.05rem; height: 1.05rem; }
@media (max-width: 860px) { .header-inner .redes-mini { display: none; } }
.site-footer .redes-mini { margin-bottom: 1.2rem; }
.site-footer .redes-mini a { border-color: rgba(246,242,232,.3); color: var(--crema); }

/* dudas rápidas: presencia real + entrada anunciada una vez */
#dudas-flotante {
  background: var(--salvia-osc); color: var(--crema); border: none;
  font-size: .95rem; padding: .85rem 1.25rem;
  box-shadow: 0 10px 26px rgba(43,46,36,.32);
}
@media (hover: hover) and (pointer: fine) { #dudas-flotante:hover { background: var(--salvia-noche); border: none; } }
#dudas-flotante .ic { width: 1.2rem; height: 1.2rem; }
@media (max-width: 860px) { #dudas-flotante span.txt { display: inline; } #dudas-flotante { padding: .85rem 1.15rem; } }
@media (min-width: 861px) { #dudas-flotante.entra { animation: dudas-entra 320ms cubic-bezier(0.23, 1, 0.32, 1) both; } }
@keyframes dudas-entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
#dudas-flotante.saluda { animation: dudas-saluda 520ms cubic-bezier(0.77, 0, 0.175, 1) 1; }
@keyframes dudas-saluda { 0%,100% { transform: scale(1); } 40% { transform: scale(1.06); } }

/* testimonios enriquecidos */
.testi { display: flex; flex-direction: column; gap: .7rem; padding: 1.6rem 1.5rem; }
.testi-marco { display: flex; align-items: center; gap: .9rem; }
.testi-marco img { width: 64px; height: 76px; object-fit: contain; mix-blend-mode: multiply; flex: none; }
.testi-nec { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ambar-osc); font-weight: 500;
  display: inline-flex; align-items: center; gap: .45rem; }
.testi-prod { font-family: "Fraunces", serif; font-weight: 530; font-size: 1.02rem; }
.testi blockquote { margin: 0; }

/* ofertas de la semana (se oculta sola si no hay vigentes) */
.ofertas { display: none; background: linear-gradient(180deg, var(--crema), var(--crema-2)); }
.ofertas.viva { display: block; }
.ofertas-vigencia { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ambar-osc); }
.ofertas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.oferta-card { background: var(--blanco); border: 1px solid var(--ambar-claro); border-radius: var(--radio);
  padding: 1.3rem 1.25rem; display: flex; flex-direction: column; gap: .4rem; }
.oferta-card h3 { font-size: 1.08rem; }
.oferta-card p { font-size: .9rem; color: var(--tinta-suave); flex: 1; }
.oferta-tag { align-self: flex-start; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--ambar); color: var(--blanco); padding: .28rem .7rem; border-radius: 999px; }
.ofertas-ejemplo { outline: 2px dashed var(--ambar); outline-offset: 6px; }

@media (prefers-reduced-motion: reduce) {
  #dudas-flotante.entra, #dudas-flotante.saluda { animation: none; }
}

/* F2.9.1: hero foto a ~200px (1.5x suavizado, OK Mario) — TEMPORAL hasta foto propia de Mónica */

.frasco-halo { width: min(64%, 290px); }
@media (max-width: 760px) {

  .frasco-halo { width: min(46%, 190px); }
}

/* móvil: dudas aparece hasta pasar el hero (no tapa los CTAs de WhatsApp) */
@media (max-width: 860px) {
  #dudas-flotante:not(.visible) { opacity: 0; transform: translateY(16px); pointer-events: none; }
  #dudas-flotante { transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), background-color 200ms ease; }
}

/* F2.9.3: puerta al canal (la sección ya no depende de ofertas.json) */
.canal-ctas { margin-top: 1.8rem; display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.canal-cta { font-size: 1.05rem; padding: 1.05rem 1.9rem; box-shadow: 0 10px 26px rgba(70,84,59,.28); }
.ofertas-grid .prod { border-color: var(--crema-2); }

/* =========================================================================
   F2.9.4 — hero foto real + capa de movimiento de scroll (Emil: intención,
   transform/opacity, reduced-motion en todo, móvil primero)
   ========================================================================= */

/* hero: frasco real 267x670 => tope 134px (2x exacto) + hover elevación */


a.frasco-link { transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) and (pointer: fine) {
  a.frasco-link:hover { transform: translateY(-7px); }
}

/* ---------- reveals con dirección e intención ---------- */
.oleo-media.rev { transform: translateX(-18px); }
.oleo-media.rev.vista { transform: none; }
.about-medallion.rev { transform: translateX(-14px) scale(.98); }
.about-medallion.rev.vista { transform: none; }
.duo-grid.rev { transform: translateY(18px) scale(.985); }
.duo-grid.rev.vista { transform: none; }
.consultora-caja.rev { transform: translateY(16px) scale(.985); }
.consultora-caja.rev.vista { transform: none; }

/* ---------- stagger en grillas: los hijos entran en cascada ---------- */
.invita-grid.rev > *, .ofertas-grid.rev > *, .testi-grid.rev > *,
.prod-grid.rev > *, .pasos.rev > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1), transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
.invita-grid.rev.vista > *, .ofertas-grid.rev.vista > *, .testi-grid.rev.vista > *,
.prod-grid.rev.vista > *, .pasos.rev.vista > * { opacity: 1; transform: none; }
.rev.vista > *:nth-child(1) { transition-delay: 0ms; }
.rev.vista > *:nth-child(2) { transition-delay: 60ms; }
.rev.vista > *:nth-child(3) { transition-delay: 120ms; }
.rev.vista > *:nth-child(4) { transition-delay: 180ms; }
.rev.vista > *:nth-child(5) { transition-delay: 240ms; }
.rev.vista > *:nth-child(6) { transition-delay: 300ms; }
.rev.vista > *:nth-child(n+7) { transition-delay: 340ms; }

/* ---------- parallax sutil (CSS scroll-driven; compositor, transform only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 861px) { @supports (animation-timeline: scroll()) {
    #producto-hero img {
      animation: hero-parallax linear both;
      animation-timeline: scroll();
      animation-range: 0 70vh;
    }
    @keyframes hero-parallax { from { transform: translateY(0); } to { transform: translateY(26px); } }
    @media (max-width: 760px) { @keyframes hero-parallax { from { transform: translateY(0); } to { transform: translateY(16px); } } }
    .oleo-media img, model-viewer {
      animation: spot-parallax linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }
    @keyframes spot-parallax { from { transform: translateY(18px); } to { transform: translateY(0); } }
  } }
}

@media (prefers-reduced-motion: reduce) {
  .oleo-media.rev, .about-medallion.rev, .duo-grid.rev, .consultora-caja.rev { transform: none; transition: opacity 200ms ease; }
  .invita-grid.rev > *, .ofertas-grid.rev > *, .testi-grid.rev > *, .prod-grid.rev > *, .pasos.rev > * { transform: none; transition: opacity 200ms ease; }
  a.frasco-link { transition: none; }
}

/* =========================================================================
   F2.9.5 — SISTEMA DE MOVIMIENTO "LA PAGINA RESPIRA 4-4-6"
   Tokens derivados del ritmo inhala 4 · sosten 4 · exhala 6.
   Duras: transform/opacity/clip-path one-shot; reduced-motion apaga TODO;
   View Transitions = mejora progresiva; parallax solo desktop (BUG3).
   ========================================================================= */
:root {
  --inhala: 400ms;   /* toda ENTRADA */
  --exhala: 600ms;   /* toda TRANSICION de pagina y asentamiento */
  --sosten: 60ms;    /* pausa base del stagger */
  --respira: cubic-bezier(0.16, 1, 0.3, 1);
}

/* reveals a ritmo inhala */
.rev { transition-duration: var(--inhala) !important; transition-timing-function: var(--respira) !important; }
.invita-grid.rev.vista > *, .ofertas-grid.rev.vista > *, .testi-grid.rev.vista > *,
.prod-grid.rev.vista > *, .pasos.rev.vista > * { transition-duration: var(--inhala); }
.rev.vista > *:nth-child(1) { transition-delay: 0ms; }
.rev.vista > *:nth-child(2) { transition-delay: var(--sosten); }
.rev.vista > *:nth-child(3) { transition-delay: calc(var(--sosten) * 2); }
.rev.vista > *:nth-child(4) { transition-delay: calc(var(--sosten) * 3); }
.rev.vista > *:nth-child(5) { transition-delay: calc(var(--sosten) * 4); }
.rev.vista > *:nth-child(6) { transition-delay: calc(var(--sosten) * 5); }
.rev.vista > *:nth-child(n+7) { transition-delay: calc(var(--sosten) * 6); }

/* View Transitions cross-document: crossfade exhala + retrato que viaja */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: var(--exhala); animation-timing-function: var(--respira);
  }
  .brand { view-transition-name: marca; }
  .about-foto { view-transition-name: retrato-mp; }
  ::view-transition-group(retrato-mp) { animation-duration: var(--exhala); animation-timing-function: var(--respira); }
  ::view-transition-old(retrato-mp), ::view-transition-new(retrato-mp) { object-fit: cover; height: 100%; }
}

/* revelado-gota SOLO en el spotlight — A PRUEBA DE FALLOS: reposo VISIBLE,
   la gota es aditiva (clase .gota via JS con failsafe); nunca oculta el producto */
.oleo-media.rev { opacity: 1 !important; transform: none; }   /* el media SIEMPRE visible */
@media (prefers-reduced-motion: no-preference) {
  .oleo-media.gota { clip-path: circle(0% at 50% 42%); transition: clip-path var(--exhala) var(--respira); }
  .oleo-media.gota.abierta { clip-path: circle(150% at 50% 42%); }
}

@media (prefers-reduced-motion: reduce) {
  .oleo-media.gota { clip-path: none; }
  .brand, .about-foto { view-transition-name: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}