/* =====================================================================
   BÖTH · Zen Body Clinic — PROPUESTA A
   Editorial cinematográfico oscuro (inspirado en la campaña "ME AMO")
   ===================================================================== */

:root{
  /* Color — tema oscuro cálido */
  --bg:      #12181B;   /* fondo base, casi negro petróleo */
  --bg-2:    #171F23;   /* sección alterna */
  --bg-3:    #1D272C;   /* tarjetas / elevación */
  --ink:     #0C1113;   /* negro para velos */
  --text:    #EFEAE0;   /* hueso cálido (texto principal) */
  --text-soft:#AEB4B2;  /* texto secundario */
  --muted:   #7E8785;
  --accent:  #D08A5E;   /* terracota (más luminosa para fondo oscuro) */
  --accent-2:#E4B594;   /* terracota suave */
  --line:    rgba(239,234,224,.14);
  --line-2:  rgba(239,234,224,.08);

  --serif:  "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:   "Poppins", "Helvetica Neue", Arial, sans-serif;
  --script: "Allura", "Segoe Script", cursive;

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 80px);
  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; line-height:1.12; }

/* ---------- Utilidades tipográficas ---------- */
.display{ font-family:var(--serif); font-weight:400; line-height:1.06; letter-spacing:.005em; }
.script{ font-family:var(--script); color:var(--accent-2); font-weight:400; line-height:1; }
.label{ font-family:var(--sans); font-size:.7rem; letter-spacing:.32em; text-transform:uppercase; font-weight:400; color:var(--accent-2); }
.muted{ color:var(--text-soft); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(52px,8vw,100px); }
.section--tight{ padding-block:clamp(38px,5vw,64px); }
.bg-2{ background:var(--bg-2); }
.bg-3{ background:var(--bg-3); }

.eyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.eyebrow::before{ content:""; width:42px; height:1px; background:var(--accent); }
.eyebrow--center{ justify-content:center; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em; padding:15px 32px;
  font-family:var(--sans); font-size:.74rem; font-weight:400; letter-spacing:.22em; text-transform:uppercase;
  border:1px solid var(--accent); background:var(--accent); color:#1a1207;
  border-radius:var(--radius); transition:.4s var(--ease);
}
.btn:hover{ background:transparent; color:var(--accent-2); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--text); border-color:rgba(239,234,224,.5); }
.btn--ghost:hover{ background:var(--text); color:var(--ink); border-color:var(--text); }
.btn--sm{ padding:11px 24px; font-size:.68rem; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.6em; font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text); border-bottom:1px solid var(--line); padding-bottom:5px;
  transition:.3s var(--ease);
}
.link-arrow:hover{ gap:1.1em; color:var(--accent-2); border-color:var(--accent); }

/* =====================================================================
   Header
   ===================================================================== */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:50; padding-block:22px; transition:.5s var(--ease); }
.site-header.scrolled{ background:rgba(18,24,27,.85); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line-2); padding-block:13px; }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.brand .mark{ font-family:var(--sans); font-weight:300; font-size:2.2rem; letter-spacing:.3em; color:var(--text); padding-left:.3em; }
.brand .sub{ font-family:var(--sans); font-weight:300; font-size:.52rem; letter-spacing:.46em; text-transform:uppercase; color:var(--accent-2); margin-top:5px; padding-left:.46em; }
.nav-links{ display:flex; align-items:center; gap:32px; }
.nav-links a{ font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text); position:relative; padding-block:4px; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--accent); transition:width .35s var(--ease); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; }
.nav-toggle span{ width:24px; height:1.5px; background:var(--text); transition:.3s var(--ease); }
.nav-toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.nav-mobile-cta{ display:none; }

@media (max-width:920px){
  .nav-toggle{ display:flex; position:relative; z-index:3; }
  .brand{ position:relative; z-index:3; }
  .nav-links{
    position:fixed; inset:0; width:100%; height:100dvh; min-height:100vh; background:var(--bg);
    flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:96px 24px 56px; margin:0;
    transform:translateX(100%); transition:transform .45s var(--ease); z-index:2; overflow-y:auto;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-family:var(--serif); font-size:clamp(1.6rem,7vw,2.2rem); }
  .nav-links a::after{ display:none; }
  .nav-links a.active{ color:var(--accent-2); }
  .nav-mobile-cta{ display:inline-flex !important; margin-top:28px; }
  .nav .nav-cta > .btn{ display:none; }
}

/* =====================================================================
   Escena cinematográfica (full-bleed foto + velo + texto centrado)
   Es el componente insignia, estilo campaña ME AMO
   ===================================================================== */
.cine{
  position:relative; min-height:100svh; display:grid; place-items:center; text-align:center;
  padding:140px var(--gutter) 90px; overflow:hidden; isolation:isolate;
}
.cine--page{ min-height:72svh; padding:180px var(--gutter) 90px; }
.cine__bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; }
.cine__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,17,19,.55) 0%, rgba(12,17,19,.28) 35%, rgba(12,17,19,.72) 100%),
    radial-gradient(120% 80% at 50% 50%, transparent 25%, rgba(12,17,19,.5) 100%);
}
.cine__inner{ position:relative; z-index:1; max-width:900px; }
.cine__label{ font-size:.7rem; letter-spacing:.4em; text-transform:uppercase; color:var(--text); opacity:.9; margin-bottom:26px; }
.cine__title{ font-family:var(--serif); font-weight:400; color:#fff; font-size:clamp(2.6rem,7vw,6rem); line-height:1.02; letter-spacing:.01em; }
.cine__script{ font-family:var(--script); color:var(--accent-2); font-size:clamp(2.4rem,6vw,4.4rem); line-height:1; display:block; }
.cine__lead{ max-width:600px; margin:26px auto 0; color:#EDE7DD; font-size:1.06rem; }
.cine__cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:40px; }
.cine__cap{ position:absolute; left:0; right:0; bottom:34px; z-index:1; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--text-soft); }

/* Banda marquee */
.marquee{ overflow:hidden; border-block:1px solid var(--line); padding-block:22px; background:var(--bg); }
.marquee__track{ display:flex; gap:56px; white-space:nowrap; width:max-content; animation:scroll 46s linear infinite; }
.marquee__track span{ font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--text-soft); display:flex; align-items:center; gap:56px; }
.marquee__track span::after{ content:"·"; color:var(--accent); }
@keyframes scroll{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* =====================================================================
   Cabezales de sección
   ===================================================================== */
.sec-head{ display:grid; grid-template-columns:1.1fr auto; gap:28px; align-items:end; margin-bottom:42px; }
.sec-head h2{ font-family:var(--serif); font-size:clamp(2.1rem,5vw,3.6rem); max-width:18ch; color:#fff; }
.sec-head p{ max-width:40ch; color:var(--text-soft); margin:0; }
@media (max-width:760px){ .sec-head{ grid-template-columns:1fr; } }

.intro-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,90px); align-items:center; }
.intro-split .lead-lg{ font-family:var(--serif); font-size:clamp(1.6rem,3.1vw,2.4rem); line-height:1.32; color:#fff; }
.intro-split .lead-lg em{ font-style:italic; color:var(--accent-2); }
@media (max-width:820px){ .intro-split{ grid-template-columns:1fr; } }

/* Pilares */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px); margin-top:clamp(44px,6vw,68px); }
@media (max-width:760px){ .pillars{ grid-template-columns:1fr; gap:28px; } }
.pillar{ padding-top:24px; border-top:1px solid var(--line); }
.pillar h3{ font-family:var(--serif); font-size:1.5rem; color:#fff; margin-bottom:10px; }
.pillar p{ color:var(--text-soft); font-size:.95rem; margin:0; }

/* =====================================================================
   Servicios (tarjetas oscuras)
   ===================================================================== */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:860px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .svc-grid{ grid-template-columns:1fr; } }
.svc{ background:var(--bg); padding:clamp(28px,3vw,44px); display:flex; flex-direction:column; min-height:260px; transition:background .45s var(--ease); }
.svc:hover{ background:var(--bg-3); }
.svc__tag{ font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-2); margin-bottom:auto; }
.svc h3{ font-family:var(--serif); font-size:clamp(1.5rem,2.4vw,1.95rem); color:#fff; margin:36px 0 12px; }
.svc p{ color:var(--text-soft); font-size:.94rem; margin:0 0 22px; }
.svc .link-arrow{ align-self:flex-start; margin-top:auto; }

/* =====================================================================
   Feature: foto grande + texto (cinematográfico, media pantalla)
   ===================================================================== */
.feature{ display:grid; grid-template-columns:1.05fr .95fr; gap:0; align-items:stretch; border:1px solid var(--line); }
.feature--rev .feature__media{ order:2; }
.feature__media{ position:relative; min-height:420px; background-size:cover; background-position:center; }
.feature__body{ padding:clamp(32px,5vw,72px); display:flex; flex-direction:column; justify-content:center; background:var(--bg-2); }
.feature__body h2{ font-family:var(--serif); font-size:clamp(1.9rem,4vw,3rem); color:#fff; margin:14px 0 18px; }
.feature__body .ticks{ display:grid; gap:12px; margin:22px 0 30px; }
.feature__body .ticks li{ position:relative; padding-left:26px; color:var(--text-soft); font-size:.98rem; }
.feature__body .ticks li::before{ content:""; position:absolute; left:0; top:.62em; width:13px; height:1px; background:var(--accent); }
.feature__body .ticks li strong{ color:var(--text); font-weight:500; }
@media (max-width:820px){
  .feature{ grid-template-columns:1fr; }
  .feature--rev .feature__media{ order:0; }
  .feature__media{ min-height:300px; }
}

/* =====================================================================
   Promos (carrusel)
   ===================================================================== */
.promos{ position:relative; }
.promo-track{ display:flex; gap:clamp(16px,2.4vw,26px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:18px; scrollbar-width:none; }
.promo-track::-webkit-scrollbar{ display:none; }
.promo-card{ flex:0 0 auto; width:clamp(240px,28vw,310px); scroll-snap-align:start; background:var(--bg-3); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:.4s var(--ease); }
.promo-card:hover{ transform:translateY(-6px); border-color:var(--accent); }
.promo-card img{ width:100%; aspect-ratio:9/12; object-fit:cover; }
.promo-card__body{ padding:18px 20px 22px; }
.promo-card__body h4{ font-family:var(--serif); font-size:1.3rem; color:#fff; margin-bottom:6px; }
.promo-card__body p{ font-size:.85rem; color:var(--text-soft); margin:0 0 14px; }
.promo-nav{ display:flex; gap:12px; margin-top:26px; }
.promo-nav button{ width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--text); display:grid; place-items:center; transition:.35s var(--ease); }
.promo-nav button:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink); }

/* =====================================================================
   Stats
   ===================================================================== */
.stats-band{ padding-block:clamp(20px,3vw,38px); }
.section--to-stats{ padding-bottom:clamp(28px,4.5vw,52px); }
.stats-band + .section{ padding-top:clamp(28px,4.5vw,52px); }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:720px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat{ text-align:center; padding:14px; }
.stat .num{ font-family:var(--serif); font-size:clamp(2.6rem,6vw,4rem); line-height:1; color:var(--accent-2); }
.stat .lbl{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-soft); margin-top:10px; }

/* =====================================================================
   Paquetes
   ===================================================================== */
.pkg-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.pkg{ flex:1 1 300px; max-width:360px; border:1px solid var(--line); background:var(--bg-2); padding:38px 32px; border-radius:var(--radius); display:flex; flex-direction:column; position:relative; transition:.4s var(--ease); }
@media (max-width:900px){ .pkg{ flex-basis:100%; max-width:460px; } }
.pkg:hover{ border-color:var(--accent); transform:translateY(-4px); }
.pkg--feat{ background:var(--bg-3); border-color:var(--accent); }
.pkg__feat-tag{ position:absolute; top:-11px; left:32px; background:var(--accent); color:var(--ink); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; padding:5px 12px; }
.pkg h3{ font-family:var(--serif); font-size:1.8rem; color:#fff; margin-bottom:6px; }
.pkg__sub{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-2); margin-bottom:26px; }
.pkg__price{ font-family:var(--serif); font-size:2.7rem; line-height:1; color:#fff; margin-bottom:4px; }
.pkg__price small{ font-family:var(--sans); font-size:.8rem; color:var(--text-soft); }
.pkg__note{ font-size:.76rem; color:var(--muted); margin-bottom:26px; }
.pkg ul{ display:grid; gap:11px; margin-bottom:32px; }
.pkg ul li{ position:relative; padding-left:24px; font-size:.92rem; color:var(--text-soft); }
.pkg ul li::before{ content:"—"; position:absolute; left:0; color:var(--accent); }
.pkg .btn{ margin-top:auto; }

/* Precios lista */
.price-list{ border-top:1px solid var(--line); }
.price-row{ display:grid; grid-template-columns:1fr auto auto; gap:24px; align-items:baseline; padding:22px 4px; border-bottom:1px solid var(--line); }
.price-row h4{ font-family:var(--serif); font-size:1.4rem; color:#fff; font-weight:400; }
.price-row h4 small{ display:block; font-family:var(--sans); font-size:.72rem; letter-spacing:0; text-transform:none; color:var(--text-soft); margin-top:5px; }
.price-row .dur{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.price-row .amt{ font-family:var(--serif); font-size:1.45rem; color:var(--accent-2); white-space:nowrap; }
@media (max-width:600px){ .price-row{ grid-template-columns:1fr auto; } .price-row .dur{ grid-column:1; } }

/* =====================================================================
   Testimonios / reseñas
   ===================================================================== */
.tst{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:820px){ .tst{ grid-template-columns:1fr; } }
.tst__card{ border:1px solid var(--line); background:var(--bg-2); padding:34px 30px; border-radius:var(--radius); }
.tst__stars{ color:var(--accent); letter-spacing:.2em; margin-bottom:16px; }
.tst__card blockquote{ margin:0 0 22px; font-family:var(--serif); font-style:italic; font-size:1.2rem; line-height:1.5; color:var(--text); }
.tst__who{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-2); }

/* Antes / Después */
.ba-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,32px); }
@media (max-width:760px){ .ba-grid{ grid-template-columns:1fr; } }
.ba-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:.4s var(--ease); }
.ba-card:hover{ border-color:var(--accent); }
.ba-card figure{ margin:0; position:relative; }
.ba-card__chip{ position:absolute; top:14px; left:14px; background:var(--accent); color:var(--ink); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; padding:6px 12px; border-radius:100px; }
.ba-card img{ width:100%; display:block; }
.ba-card__cap{ padding:22px 24px 26px; }
.ba-card__cap .k{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-2); }
.ba-card__cap h3{ font-family:var(--serif); font-size:1.4rem; color:#fff; margin:8px 0; font-weight:400; }
.ba-card__cap p{ margin:0; color:var(--text-soft); font-size:.92rem; }

/* Videos testimonios */
.vtest-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,26px); }
@media (max-width:900px){ .vtest-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .vtest-grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; } }
.vtest{ border-radius:var(--radius); overflow:hidden; background:#000; position:relative; border:1px solid var(--line); }
.vtest video, .vtest iframe{ width:100%; aspect-ratio:9/16; display:block; border:0; object-fit:cover; background:#000; }
.vtest--slot{ display:grid; place-items:center; aspect-ratio:9/16; text-align:center; padding:24px; color:var(--text-soft);
  background:repeating-linear-gradient(45deg,var(--bg-2),var(--bg-2) 14px,var(--bg-3) 14px,var(--bg-3) 28px); }
.vtest--slot .ic{ width:52px; height:52px; border-radius:50%; border:1px solid var(--accent); color:var(--accent-2); display:grid; place-items:center; margin:0 auto 14px; }
.vtest--slot p{ font-size:.82rem; margin:0; }

/* Cita insignia */
.pull-quote{ max-width:min(1000px,92%); margin:0 auto; text-align:center; }
.pull-quote .mark{ font-family:var(--serif); font-size:3rem; color:var(--accent); line-height:0; display:block; margin-bottom:16px; }
.pull-quote blockquote{ margin:0; font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2vw,1.9rem); line-height:1.5; color:#fff; }

/* Manifiesto lista */
.manifesto-list{ display:grid; gap:22px; margin:0; }
.manifesto-list li{ position:relative; padding-left:30px; color:var(--text-soft); font-size:1.05rem; line-height:1.6; }
.manifesto-list li::before{ content:""; position:absolute; left:0; top:.72em; width:16px; height:1px; background:var(--accent); }
.manifesto-list li strong{ font-family:var(--serif); font-style:italic; color:var(--text); font-weight:400; }

/* =====================================================================
   Contacto / formulario
   ===================================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,80px); }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.info-row{ display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.info-row .ic{ color:var(--accent-2); flex:0 0 auto; margin-top:3px; }
.info-row h4{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-2); margin-bottom:6px; font-weight:400; }
.info-row p{ margin:0; color:var(--text); }
.info-row a:hover{ color:var(--accent-2); }
.form{ display:grid; gap:20px; }
.field{ display:grid; gap:8px; }
.field label{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-2); }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:.98rem; font-weight:300; color:var(--text);
  background:var(--bg-3); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; transition:border-color .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }
.field textarea{ resize:vertical; min-height:120px; }
.field select option{ color:#111; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }
.form__note{ font-size:.8rem; color:var(--muted); }
.form__msg{ font-size:.9rem; padding:12px 16px; border-radius:var(--radius); display:none; }
.form__msg.ok{ display:block; background:rgba(208,138,94,.14); color:var(--text); border:1px solid var(--accent); }
.map-embed{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; min-height:340px; filter:grayscale(.3) contrast(1.05) brightness(.9); }
.map-embed iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }

/* =====================================================================
   CTA band
   ===================================================================== */
.cta-band{ text-align:center; }
.cta-band h2{ font-family:var(--serif); font-size:clamp(2.1rem,5vw,3.8rem); color:#fff; max-width:22ch; margin:0 auto 16px; }
.cta-band p{ max-width:48ch; margin:0 auto 34px; color:var(--text-soft); }
.cta-kicker{ font-family:var(--script); color:var(--accent-2); font-size:clamp(2rem,4.4vw,3.2rem); line-height:1; margin:0 0 12px; }

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer{ background:#0C1113; padding-block:clamp(56px,8vw,90px) 40px; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; margin-bottom:54px; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-col h5{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-2); margin-bottom:20px; }
.footer-col a, .footer-col p{ display:block; color:var(--text-soft); font-size:.9rem; margin-bottom:12px; transition:color .3s var(--ease); }
.footer-col a:hover{ color:#fff; }
.brand--footer{ align-items:flex-start; }
.brand--footer .sub{ padding-left:0; }
.footer-bottom{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:30px; border-top:1px solid var(--line); font-size:.76rem; color:var(--muted); }
.social{ display:flex; gap:14px; }
.social a{ width:40px; height:40px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; color:var(--text-soft); transition:.35s var(--ease); }
.social a:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink); }

/* WhatsApp flotante */
.wa-float{ position:fixed; right:22px; bottom:22px; z-index:60; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 10px 30px rgba(37,211,102,.45); transition:transform .3s var(--ease); animation:wa-in .6s var(--ease) .8s both; }
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:30px; height:30px; }
@keyframes wa-in{ from{ transform:scale(0); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* Page hero simple (para subpáginas que no usan foto full-bleed) */
.page-hero{ padding-top:clamp(120px,14vw,168px); padding-bottom:clamp(30px,4.5vw,52px); text-align:center; }
.page-hero .breadcrumb{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.page-hero .breadcrumb a:hover{ color:var(--accent-2); }
.page-hero h1{ font-family:var(--serif); font-size:clamp(2.6rem,7vw,5rem); color:#fff; margin-bottom:18px; }
.page-hero p{ max-width:56ch; margin:0 auto; color:var(--text-soft); font-size:1.05rem; }

/* Reveal */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* Blog */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,32px); }
@media (max-width:900px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .blog-grid{ grid-template-columns:1fr; } }
.post{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:.4s var(--ease); }
.post:hover{ border-color:var(--accent); }
.post__img{ aspect-ratio:4/3; overflow:hidden; }
.post__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.post:hover .post__img img{ transform:scale(1.05); }
.post__body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.post__cat{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-2); margin-bottom:10px; }
.post h3{ font-family:var(--serif); font-size:1.4rem; color:#fff; margin-bottom:10px; }
.post p{ color:var(--text-soft); font-size:.92rem; margin:0 0 14px; }
.post time{ font-size:.7rem; letter-spacing:.1em; color:var(--muted); margin-top:auto; }

/* Artículo de blog (páginas generadas por el panel) */
.article{ max-width:760px; margin:0 auto; }
.article__meta{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-2); margin-bottom:18px; }
.article h1{ font-family:var(--serif); font-size:clamp(2rem,4.6vw,3.4rem); color:#fff; line-height:1.08; margin-bottom:16px; }
.article__excerpt{ font-family:var(--serif); font-style:italic; font-size:1.25rem; color:var(--text); margin-bottom:8px; }
.article__cover{ margin:32px 0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.article__cover img{ width:100%; display:block; }
.article__body{ font-size:1.08rem; color:var(--text-soft); line-height:1.85; }
.article__body p{ margin:0 0 1.3em; }
.article__body strong{ color:var(--text); }
.article__back{ margin-top:44px; }

/* ---- Página de lectura del blog: fondo claro, texto oscuro (invertido) ---- */
body.reading{ background:#FBFAF8; }
body.reading main{ background:#FBFAF8; }
body.reading .site-header{ background:rgba(18,24,27,.94); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line-2); padding-block:14px; }
body.reading .article__meta{ color:#B06A3F; }
body.reading .article h1{ color:#1A1510; }
body.reading .article__excerpt{ color:#4A4238; }
body.reading .article__cover{ border-color:#E7E1D7; }
body.reading .article__body{ color:#33302A; }
body.reading .article__body strong{ color:#1A1510; }
body.reading .article__back .link-arrow{ color:#4A4238; border-color:rgba(0,0,0,.22); }
body.reading .article__back .link-arrow:hover{ color:#B06A3F; border-color:#B06A3F; }

/* ---- Carrusel de promos alimentado por banners.json ---- */
.promo-card__link{ display:block; }
.promo-card__link img{ width:100%; aspect-ratio:9/12; object-fit:cover; display:block; }
/* Un solo banner: fijo y centrado, sin flechas */
.promos.is-single .promo-track{ justify-content:center; overflow:visible; }
.promos.is-single .promo-nav{ display:none; }
/* Varios banners: marquee que avanza solo (animación CSS, se pausa al pasar el cursor) */
.promos.is-auto{ overflow:hidden; }
.promos.is-auto .promo-track{ overflow:visible; width:max-content; flex-wrap:nowrap; scroll-snap-type:none; animation:promoMarquee var(--marquee-dur,40s) linear infinite; }
.promos.is-auto:hover .promo-track{ animation-play-state:paused; }
.promos.is-auto .promo-nav{ display:none; }
@keyframes promoMarquee{ from{ transform:translateX(0); } to{ transform:translateX(calc(-1 * var(--marquee-shift,50%))); } }
@media (prefers-reduced-motion:reduce){
  .promos.is-auto{ overflow-x:auto; }
  .promos.is-auto .promo-track{ animation:none; width:auto; }
}

/* Utilidades */
.mt-m{ margin-top:36px; } .mt-l{ margin-top:56px; } .center{ text-align:center; }
.divider{ height:1px; background:var(--line); border:0; margin:0; }