/* ==========================================================================
   KikiBrows and BeaSkin — Centro de Estética (La Serena)
   Tema oliva / crema / rosa · minimalista, elegante, femenino
   Estándar Facand · mobile-first
   ========================================================================== */

:root{
  /* Paleta de marca */
  --oliva:        #8F8457;
  --oliva-dark:   #6b6340;   /* texto/acentos con contraste AA sobre crema */
  --oliva-deep:   #565030;
  --rosa:         #D9B5AF;
  --rosa-soft:    #e7cfca;
  --rosa-deep:    #b98e86;
  --crema:        #EFEBE0;
  --crema-light:  #f7f4ec;
  --crema-card:   #fbfaf5;
  --ink:          #3a362c;   /* texto principal (pardo oliváceo oscuro) */
  --ink-soft:     #6a6455;
  --white:        #ffffff;
  --line:         #e3ddcf;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1180px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 10px rgba(86,80,48,.06);
  --shadow:    0 14px 40px rgba(86,80,48,.10);
  --ease: cubic-bezier(.22,.61,.36,1);
  /* Easing con fuerte desaceleración (easeOutExpo) → entrada con "pop" */
  --ease-pop: cubic-bezier(.16,1,.3,1);
  /* Easing con leve rebote (easeOutBack) → entrada más llamativa (sobrepasa y asienta) */
  --ease-back: cubic-bezier(.34,1.45,.5,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--crema);
  line-height:1.65;
  font-weight:400;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  /* `clip` evita el scroll horizontal SIN crear un contenedor de scroll
     (a diferencia de `hidden`), que en iOS Safari rompía el position:sticky
     del header y lo hacía "desaparecer" al hacer scroll. */
  overflow-x:clip;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
:focus-visible{ outline:2px solid var(--oliva); outline-offset:2px; }

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; line-height:1.12; color:var(--oliva-deep); }
h1{ font-size:clamp(2.5rem,6vw,4.1rem); }
h2{ font-size:clamp(2rem,4.5vw,3rem); }
h3{ font-size:clamp(1.3rem,2.5vw,1.7rem); }
p{ color:var(--ink); }
.muted{ color:var(--ink-soft); }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px; }
section{ padding:74px 0; }
.section-head{ max-width:640px; margin:0 auto 48px; text-align:center; }
.section-head.left{ margin-left:0; text-align:left; }
.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase; letter-spacing:.28em; font-size:.72rem;
  font-weight:600; color:var(--oliva); display:inline-block; margin-bottom:14px;
}
.section-head p{ color:var(--ink-soft); margin-top:14px; font-size:1.05rem; }
.svc-photo-wrap .svc-revisar{ position:absolute; bottom:12px; left:12px; display:inline-flex; align-items:center; gap:4px; font-family:var(--font-body); font-size:.68rem; letter-spacing:.04em; color:#5b3f3a; background:rgba(255,255,255,.92); border:1px dashed var(--rosa,#D9B5AF); padding:4px 9px; border-radius:100px; backdrop-filter:blur(2px); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-body); font-weight:500; font-size:.95rem; letter-spacing:.02em;
  padding:.85em 1.7em; border-radius:100px; transition:.28s var(--ease);
  white-space:nowrap; border:1.5px solid transparent;
}
.btn-primary{ background:var(--oliva); color:var(--crema-light); }
.btn-primary:hover{ background:var(--oliva-deep); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn-ghost{ background:transparent; border-color:var(--oliva); color:var(--oliva-dark); }
.btn-ghost:hover{ background:var(--oliva); color:var(--crema-light); }
.btn-rosa{ background:var(--rosa); color:#5b3f3a; }
.btn-rosa:hover{ background:var(--rosa-deep); color:#fff; transform:translateY(-2px); }
.btn-sm{ padding:.65em 1.25em; font-size:.88rem; }
.btn-block{ display:flex; width:100%; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header .bar{ display:flex; align-items:center; justify-content:space-between; height:74px; gap:18px; }
.brand img{ height:46px; width:auto; }
.nav{ display:none; gap:30px; }
.nav a{ font-size:.95rem; color:var(--ink); position:relative; padding:6px 0; transition:.2s; }
.nav a::after{ content:''; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--oliva); transition:width .25s var(--ease); }
.nav a:hover, .nav a.active{ color:var(--oliva-dark); }
.nav a:hover::after, .nav a.active::after{ width:100%; }
.header-cta{ display:flex; align-items:center; gap:12px; }
.header-cta .btn{ display:none; }

.hamburger{ display:flex; flex-direction:column; gap:5px; padding:8px; }
.hamburger span{ width:24px; height:2px; background:var(--oliva-deep); border-radius:2px; transition:.3s var(--ease); }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display:flex; flex-direction:column; gap:4px; padding:0 22px;
  max-height:0; overflow:hidden; background:var(--crema-light);
  border-bottom:1px solid transparent; transition:max-height .35s var(--ease), padding .35s var(--ease);
}
.mobile-nav.open{ max-height:460px; padding:14px 22px 22px; border-bottom-color:var(--line); }
.mobile-nav a{ padding:12px 4px; border-bottom:1px solid var(--line); font-size:1.05rem; }
.mobile-nav a:last-of-type{ border:none; }
.mobile-nav .btn{ margin-top:10px; }

/* ---------- Hero ---------- */
.hero{
  position:relative; background:
    radial-gradient(1100px 500px at 85% -10%, var(--rosa-soft) 0%, transparent 55%),
    linear-gradient(180deg, var(--crema-light) 0%, var(--crema) 100%);
  padding:64px 0 78px;
}
.hero-grid{ display:grid; gap:38px; align-items:center; }
.hero-eyebrow{ color:var(--rosa-deep); }
.hero h1{ margin:0 0 18px; }
.hero h1 em{ font-style:italic; color:var(--oliva); }
.hero-lead{ font-size:1.15rem; color:var(--ink-soft); max-width:46ch; margin-bottom:30px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:30px; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:22px 30px; }
.hero-meta div{ display:flex; flex-direction:column; }
.hero-meta b{ font-family:var(--font-display); font-size:1.9rem; color:var(--oliva-deep); font-weight:600; line-height:1; }
.hero-meta span{ font-size:.82rem; color:var(--ink-soft); letter-spacing:.04em; }
.hero-visual{ position:relative; }
.hero-photo{
  border-radius:var(--radius-lg); box-shadow:var(--shadow); aspect-ratio:4/5; width:100%;
  object-fit:cover; background:var(--rosa-soft);
}
.hero-badge{
  position:absolute; left:-14px; bottom:26px; background:var(--white);
  border-radius:100px; padding:12px 20px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:10px; font-size:.9rem; font-weight:500; color:var(--oliva-deep);
}
.hero-badge img{ width:34px; height:34px; border-radius:50%; }

/* placeholder de imagen pendiente (sesión de fotos) */
.ph{ display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(135deg,var(--rosa-soft),var(--crema)); color:var(--oliva-dark);
  font-family:var(--font-display); font-style:italic; font-size:1.1rem; padding:24px; }

/* ---------- Líneas de marca (split) ---------- */
.lines{ background:var(--crema-light); }
.lines-grid{ display:grid; gap:26px; }
.line-card{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:340px;
  display:flex; flex-direction:column; justify-content:flex-end; padding:34px;
  color:#fff; box-shadow:var(--shadow-sm);
}
.line-card.kiki{ background:linear-gradient(160deg,#9a9063,#6b6340); }
.line-card.bea{ background:linear-gradient(160deg,var(--rosa),#a9786f); }
.line-card h3{ color:#fff; font-size:1.9rem; margin-bottom:8px; }
.line-card p{ color:rgba(255,255,255,.9); margin-bottom:18px; max-width:38ch; }
.line-card .btn{ align-self:flex-start; background:rgba(255,255,255,.92); color:var(--oliva-deep); }
.line-card .btn:hover{ background:#fff; }
.line-card .tag{ position:absolute; top:24px; left:34px; text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; opacity:.85; }

/* ---------- Servicios (cards) ---------- */
.svc-line{ margin-bottom:56px; }
.svc-line:last-child{ margin-bottom:0; }
.svc-line-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding-bottom:14px; margin-bottom:28px; border-bottom:1px solid var(--line); }
.svc-line-head h2{ font-size:2rem; }
.svc-line-head .pill{ font-family:var(--font-body); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:#fff; padding:5px 12px; border-radius:100px; }
.pill.kiki{ background:var(--oliva); }
.pill.bea{ background:var(--rosa-deep); }
.svc-grid{ display:grid; gap:18px; }
.svc-card{
  background:var(--crema-card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:.28s var(--ease); display:flex; flex-direction:column;
}
.svc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--rosa-soft); }
/* foto de referencia del servicio (slug.webp o placeholder) */
.svc-photo-wrap{ position:relative; }
.svc-photo{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.svc-photo-wrap .pill{ position:absolute; top:12px; left:12px; font-family:var(--font-body);
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:#fff; padding:4px 11px;
  border-radius:100px; }
.svc-photo-wrap .pack-badge{ position:absolute; top:12px; right:12px; margin:0; }
.svc-card-body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.svc-desc-larga{ font-size:.92rem; color:var(--ink-soft); line-height:1.6; margin-bottom:16px; }
.svc-card h3{ font-size:1.32rem; margin-bottom:6px; }
.svc-card .svc-desc{ font-size:.92rem; color:var(--ink-soft); margin-bottom:16px; flex:1; }
.svc-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.svc-price{ font-family:var(--font-display); font-size:1.5rem; font-weight:600; color:var(--oliva-deep); }
.svc-dur{ font-size:.82rem; color:var(--ink-soft); display:inline-flex; align-items:center; gap:5px; }
.svc-dur svg{ width:15px; height:15px; }
.svc-card .btn{ width:100%; }
.svc-note{ font-size:.8rem; color:var(--rosa-deep); margin-top:10px; }
.pack-badge{ display:inline-block; font-size:.72rem; letter-spacing:.05em; background:var(--rosa-soft); color:#5b3f3a; padding:3px 10px; border-radius:100px; margin-bottom:10px; align-self:flex-start; }

/* ---------- Pasos / cómo agendar ---------- */
/* Banner "Reservar es fácil": imagen fija de fondo difuminada en blanco (parallax).
   Capa blanca alta opacidad → la imagen aparece sutil al hacer scroll; texto oscuro legible. */
.steps{ position:relative; isolation:isolate; background:var(--crema-light); }
.steps::before{ content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(rgba(247,244,236,.88), rgba(247,244,236,.92)), url('../assets/img/fija.webp') center/cover no-repeat;
  background-attachment:scroll, fixed; }
@media (max-width:768px){ .steps::before{ background-attachment:scroll, scroll; } }
.steps-grid{ display:grid; gap:26px; }
.step{ text-align:center; padding:10px; }
.step-n{
  width:58px; height:58px; border-radius:50%; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); border:1.5px solid var(--rosa); color:var(--oliva-deep);
  font-family:var(--font-display); font-size:1.5rem; font-weight:600; box-shadow:var(--shadow-sm);
}
.step h3{ font-size:1.25rem; margin-bottom:6px; }
.step p{ font-size:.92rem; color:var(--ink-soft); }

/* ---------- Nosotras / equipo ---------- */
.team-grid{ display:grid; gap:26px; }
.team-card{ background:var(--crema-card); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; text-align:center; transition:.28s var(--ease); }
.team-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.team-photo{ aspect-ratio:1/1; width:100%; object-fit:cover; background:var(--rosa-soft); }
.team-body{ padding:22px; }
.team-card h3{ font-size:1.4rem; margin-bottom:2px; }
.team-role{ color:var(--rosa-deep); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }
.team-body p{ font-size:.92rem; color:var(--ink-soft); }
.team-skills{ list-style:none; margin:14px 0 0; padding-top:14px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:7px; justify-content:center; }
.team-skills li{ font-size:.76rem; color:var(--oliva-deep); background:var(--crema);
  border:1px solid var(--line); padding:4px 11px; border-radius:100px; }

.about-split{ display:grid; gap:36px; align-items:center; }
.about-figure{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5; }
.about-text h2{ margin-bottom:18px; }
.about-text p{ color:var(--ink-soft); margin-bottom:16px; }
.about-values{ display:grid; gap:14px; margin-top:22px; }
.value{ display:flex; gap:12px; align-items:flex-start; }
.value svg{ width:22px; height:22px; color:var(--oliva); flex:none; margin-top:3px; }
.value b{ color:var(--oliva-deep); font-weight:600; }

/* ---------- Galería ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.gallery-grid figure{ border-radius:var(--radius); overflow:hidden; aspect-ratio:1/1; box-shadow:var(--shadow-sm); }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:.5s var(--ease); }
.gallery-grid figure:hover img{ transform:scale(1.06); }

/* ---------- CTA band ---------- */
.cta-band{ background:linear-gradient(135deg,var(--oliva),var(--oliva-deep)); color:var(--crema-light); text-align:center; border-radius:var(--radius-lg); padding:56px 28px; }
.cta-band h2{ color:#fff; margin-bottom:12px; }
.cta-band p{ color:rgba(255,255,255,.88); max-width:48ch; margin:0 auto 26px; }
.cta-band .btn-primary{ background:var(--crema-light); color:var(--oliva-deep); }
.cta-band .btn-primary:hover{ background:#fff; }

/* ---------- Cursos (redirección) ---------- */
/* Banner academia: imagen fija de fondo (parallax) + overlay para profundidad */
.cursos-banner{ position:relative; isolation:isolate; padding:clamp(78px,13vw,128px) 0; text-align:center;
  background:#2c2814 url('../assets/img/academia.webp') center/cover no-repeat fixed; }
.cursos-banner-overlay{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(40,36,20,.62), rgba(86,60,72,.58)); }
.cursos-banner .wrap{ position:relative; }
.cursos-banner-text{ max-width:680px; margin:0 auto; color:#fff; }
.cursos-banner-text .eyebrow{ color:#fff; }
.cursos-banner-text h2{ color:#fff; margin-bottom:14px; text-shadow:0 2px 16px rgba(0,0,0,.3); }
.cursos-banner-text p{ color:rgba(255,255,255,.92); margin-bottom:26px; }
/* iOS no soporta background-attachment:fixed (lo ignora/glitchea) → cover normal */
@media (max-width:768px){ .cursos-banner{ background-attachment:scroll; } }

/* ---------- Contacto ---------- */
.contact-grid{ display:grid; gap:36px; }
.contact-info h3{ margin-bottom:16px; }
.contact-info ul{ display:grid; gap:16px; }
.contact-info li{ display:flex; gap:13px; align-items:flex-start; color:var(--ink); }
.contact-info svg{ width:22px; height:22px; color:var(--oliva); flex:none; margin-top:2px; }
.contact-info a:hover{ color:var(--oliva-dark); }
.form-card{ background:var(--crema-card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-sm); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.85rem; font-weight:500; color:var(--oliva-deep); margin-bottom:7px; }
.field input,.field textarea,.field select{
  width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:.95rem; color:var(--ink); background:var(--white); transition:.2s;
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--oliva); box-shadow:0 0 0 3px rgba(143,132,87,.12); }
.field textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:.82rem; color:var(--ink-soft); margin-top:6px; }
.form-msg{ padding:13px 16px; border-radius:10px; font-size:.9rem; margin-bottom:18px; display:none; }
.form-msg.ok{ display:block; background:#eef5ec; color:#4a6b3e; border:1px solid #cfe3c7; }
.form-msg.err{ display:block; background:#f8ecea; color:#9a4b3f; border:1px solid #e8cdc7; }
.map-embed{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); margin-top:26px; border:1px solid var(--line); }
.map-embed iframe{ width:100%; height:280px; border:0; display:block; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--oliva-deep); color:var(--crema-light); padding:56px 0 24px; margin-top:20px; }
.foot-grid{ display:grid; gap:34px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.14); }
.foot-brand img{ margin-bottom:14px; }
.foot-tag{ color:rgba(255,255,255,.78); font-size:.95rem; max-width:30ch; }
.foot-col h4{ font-family:var(--font-body); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--rosa-soft); margin-bottom:16px; font-weight:600; }
.foot-col ul{ display:grid; gap:10px; }
.foot-col a{ color:rgba(255,255,255,.82); font-size:.95rem; transition:.2s; }
.foot-col a:hover{ color:#fff; }
.foot-data li{ display:flex; gap:10px; align-items:flex-start; color:rgba(255,255,255,.82); font-size:.92rem; }
.foot-data svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--rosa-soft); }
.foot-bottom{ display:flex; flex-direction:column; gap:8px; text-align:center; padding-top:22px; font-size:.82rem; color:rgba(255,255,255,.62); }
.foot-bottom b{ color:var(--rosa-soft); font-weight:500; }
.foot-admin{ color:rgba(255,255,255,.4); }
.foot-admin:hover{ color:rgba(255,255,255,.7); }

/* ---------- WhatsApp flotante ---------- */
.wa-float{ position:fixed; right:18px; bottom:18px; z-index:50; width:56px; height:56px; border-radius:50%; background:#25d366; box-shadow:0 8px 24px rgba(37,211,102,.4); display:flex; align-items:center; justify-content:center; transition:.25s var(--ease); }
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:30px; height:30px; fill:#fff; }

/* ---------- Botón flotante de Agenda (abajo a la derecha, con motion) ---------- */
.agenda-float{ position:fixed; right:18px; bottom:84px; z-index:51;
  display:inline-flex; align-items:center; gap:10px; padding:11px 20px 11px 12px;
  background:linear-gradient(135deg,var(--oliva),var(--oliva-deep)); color:var(--crema-light);
  border-radius:100px; box-shadow:0 10px 26px rgba(86,80,48,.34);
  font-family:var(--font-body); font-weight:500; font-size:.92rem;
  animation:floatUp 3.4s ease-in-out infinite;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.agenda-float:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 16px 34px rgba(86,80,48,.44); color:#fff; }
.agenda-float .cal{ position:relative; width:36px; height:36px; border-radius:12px; flex:none;
  background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; }
.agenda-float .cal svg{ width:20px; height:20px; stroke:#fff; fill:none; }
.agenda-float .cal::after{ content:''; position:absolute; inset:-5px; border-radius:15px;
  border:2px solid var(--rosa); opacity:0; animation:ringPulse 2.8s var(--ease) infinite; }
.agenda-float .txt{ display:flex; flex-direction:column; line-height:1.15; }
.agenda-float .txt b{ font-weight:600; }
.agenda-float .txt small{ font-size:.72rem; opacity:.82; }
@keyframes floatUp{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes ringPulse{ 0%{ transform:scale(.85); opacity:.55; } 70%{ transform:scale(1.3); opacity:0; } 100%{ opacity:0; } }
@media (max-width:560px){
  .agenda-float{ padding:0; width:56px; height:56px; justify-content:center; }
  .agenda-float .txt{ display:none; }
  .agenda-float .cal{ background:transparent; }
}
@media (prefers-reduced-motion:reduce){ .agenda-float, .agenda-float .cal::after{ animation:none; } }

/* ---------- Reveal (sutil; el hero NO usa reveal) ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* ---------- Responsive ---------- */
@media (min-width:640px){
  .lines-grid{ grid-template-columns:1fr 1fr; }
  .svc-grid{ grid-template-columns:1fr 1fr; }
  .steps-grid{ grid-template-columns:repeat(2,1fr); }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
  .foot-grid{ grid-template-columns:1.4fr 1fr 1fr 1.3fr; }
  .foot-bottom{ flex-direction:row; justify-content:space-between; text-align:left; }
}
@media (min-width:900px){
  .nav{ display:flex; }
  .header-cta .btn{ display:inline-flex; }
  .hamburger{ display:none; }
  .mobile-nav{ display:none; }
  .hero-grid{ grid-template-columns:1.05fr .95fr; gap:50px; }
  .svc-grid{ grid-template-columns:repeat(3,1fr); }
  .steps-grid{ grid-template-columns:repeat(4,1fr); }
  .team-grid{ grid-template-columns:repeat(3,1fr); }
  .about-split{ grid-template-columns:.9fr 1.1fr; }
  .contact-grid{ grid-template-columns:1fr 1.1fr; }
}
@media (min-width:1024px){
  .hero{ padding:84px 0 96px; }
  section{ padding:90px 0; }
}

/* ==========================================================================
   MOTION & LANDING — reveal, scroll-progress, servicios "ver más",
   testimonios, evaluación, galería lightbox
   ========================================================================== */

/* Offset para anclas bajo el header sticky */
section[id]{ scroll-margin-top:84px; }

/* Barra de progreso de scroll */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:70;
  background:linear-gradient(90deg,var(--oliva),var(--rosa-deep)); transition:width .1s linear; }

/* Header transparente sobre el hero → sólido (crema + blur) al hacer scroll */
.site-header.compact{ background:rgba(247,244,236,.88); backdrop-filter:blur(12px);
  border-bottom-color:var(--line); box-shadow:var(--shadow-sm); }
.site-header .bar{ transition:height .3s var(--ease); }
.site-header.compact .bar{ height:60px; }
.brand img{ transition:height .3s var(--ease); }
.site-header.compact .brand img{ height:38px; }

/* Blobs decorativos del hero */
.hero{ overflow:hidden; }
.hero .wrap{ position:relative; z-index:1; }
.blob{ position:absolute; border-radius:50%; filter:blur(46px); opacity:.5; z-index:0; pointer-events:none; }
.blob-1{ width:320px; height:320px; background:var(--rosa-soft); top:-80px; right:-30px; animation:float1 15s ease-in-out infinite; }
.blob-2{ width:260px; height:260px; background:#dfe3c8; bottom:-90px; left:-60px; animation:float2 19s ease-in-out infinite; }
@keyframes float1{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-26px,22px); } }
@keyframes float2{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(22px,-18px); } }

/* Entrada del hero (sin ocultar el H1/LCP por mucho tiempo) */
.hero-enter{ animation:heroIn .85s var(--ease) both; }
.hero-visual.hero-enter{ animation-delay:.12s; }
@keyframes heroIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* Franja de stats: cada dato entra en cascada + realce */
.hero-meta div{ opacity:0; animation:statIn .7s var(--ease) both; position:relative; padding-left:16px; }
.hero-meta div::before{ content:''; position:absolute; left:0; top:4px; bottom:4px; width:3px; border-radius:3px;
  background:linear-gradient(180deg,var(--oliva),var(--rosa-deep)); transform:scaleY(0); transform-origin:top; animation:statBar .6s var(--ease) both; }
.hero-meta div:nth-child(1), .hero-meta div:nth-child(1)::before{ animation-delay:.45s; }
.hero-meta div:nth-child(2), .hero-meta div:nth-child(2)::before{ animation-delay:.6s; }
.hero-meta div:nth-child(3), .hero-meta div:nth-child(3)::before{ animation-delay:.75s; }
@keyframes statIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes statBar{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@media (prefers-reduced-motion:reduce){
  .hero-meta div{ opacity:1; animation:none; }
  .hero-meta div::before{ transform:scaleY(1); animation:none; }
}

/* Botón con glow */
.btn-glow{ box-shadow:0 8px 24px rgba(143,132,87,.28); }
.btn-glow:hover{ box-shadow:0 12px 30px rgba(143,132,87,.42); }

/* Reveal con variantes (set por data-reveal) + stagger (delay inline desde JS) */
[data-reveal]{ opacity:0; transition:opacity .5s var(--ease), transform .55s var(--ease), filter .5s var(--ease); will-change:opacity,transform; }
[data-reveal="up"]{ transform:translateY(22px); }
[data-reveal="left"]{ transform:translateX(-32px); }
[data-reveal="right"]{ transform:translateX(32px); }
[data-reveal="scale"]{ transform:scale(.8); }
[data-reveal="zoom"]{ transform:scale(1.18); }
[data-reveal="mask"]{ transform:translateY(44px); clip-path:inset(0 0 100% 0); }
[data-reveal="blur"]{ transform:translateY(60px) scale(.93); filter:blur(16px); }
[data-reveal].in{ opacity:1; transform:none; filter:none; clip-path:inset(0 0 0 0); }

/* Dinamismo extra en TÍTULOS: dentro de una sección revelada, el eyebrow, el h2
   y el párrafo entran en cascada (no todos juntos) para un efecto más vivo. */
.section-head{ --t:0ms; }
.section-head.in .eyebrow{ animation:title-rise .8s var(--ease-back) both; }
.section-head.in h2{ animation:title-rise .9s var(--ease-back) .1s both; }
.section-head.in > p{ animation:title-rise .9s var(--ease-back) .2s both; }
@keyframes title-rise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

/* Botones: micro-rebote al aparecer dentro de una sección revelada */
[data-reveal].in .btn, [data-reveal].in.btn{ animation:btn-pop .6s var(--ease-back) .25s both; }
@keyframes btn-pop{ 0%{ opacity:0; transform:scale(.86); } 60%{ transform:scale(1.04); } 100%{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  .section-head.in .eyebrow, .section-head.in h2, .section-head.in > p,
  [data-reveal].in .btn, [data-reveal].in.btn{ animation:none; opacity:1; transform:none; }
}
/* En móvil los reveals laterales entran DESDE ABAJO (no de los lados): en pantalla
   angosta el translateX se salía del viewport y causaba desborde/recorte horizontal. */
@media (max-width:560px){
  [data-reveal="left"], [data-reveal="right"]{ transform:translateY(48px) scale(.96); }
}

/* Título de sección: subrayado que se "dibuja" al revelarse */
.section-head h2{ position:relative; display:inline-block; }
.section-head h2::after{ content:''; position:absolute; left:50%; bottom:-12px; transform:translateX(-50%);
  width:0; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--oliva),var(--rosa-deep));
  transition:width .7s var(--ease) .25s; }
.section-head.left h2::after{ left:0; transform:none; }
.section-head.in h2::after, [data-reveal].in.section-head h2::after{ width:64px; }
.section-head h2.in::after{ width:64px; }

/* Filtros de servicios */
.svc-filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:34px; }
.svc-filter{ border:1.5px solid var(--line); background:var(--white); color:var(--ink-soft);
  padding:9px 18px; border-radius:100px; font-size:.88rem; transition:.22s var(--ease); }
.svc-filter:hover{ border-color:var(--rosa); }
.svc-filter.active{ background:var(--oliva); color:#fff; border-color:var(--oliva); }

/* Tarjeta de servicio con "ver más" */
.svc-card.hide{ display:none; }
.svc-card-head{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.svc-tagline{ font-size:.92rem; color:var(--ink-soft); margin-bottom:14px; flex:1; }
.svc-toggle{ display:inline-flex; align-items:center; gap:7px; color:var(--oliva-dark);
  font-weight:500; font-size:.9rem; padding:6px 0; align-self:flex-start; }
.svc-toggle svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.svc-toggle .lbl-menos{ display:none; }
.svc-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.svc-toggle[aria-expanded="true"] .lbl-mas{ display:none; }
.svc-toggle[aria-expanded="true"] .lbl-menos{ display:inline; }
.svc-detail{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease); }
.svc-card.open .svc-detail{ grid-template-rows:1fr; }
.svc-detail-in{ overflow:hidden; }
.svc-detail-in .svc-meta{ margin-top:14px; }
.svc-facts{ display:grid; gap:6px; margin:4px 0 16px; font-size:.9rem; color:var(--ink); }
.svc-facts li{ padding-left:16px; position:relative; }
.svc-facts li::before{ content:'·'; position:absolute; left:4px; color:var(--rosa-deep); font-weight:700; }
.svc-facts .svc-note{ color:var(--rosa-deep); }

/* Testimonios (carrusel) */
.testi{ position:relative; max-width:760px; margin:0 auto; overflow:hidden; }
.testi-track{ display:flex; transition:transform .5s var(--ease); }
.testi-card{ flex:0 0 100%; padding:28px 26px; text-align:center; }
.testi-stars{ color:var(--rosa-deep); letter-spacing:3px; margin-bottom:14px; }
.testi-card blockquote{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.2rem,2.6vw,1.5rem);
  color:var(--oliva-deep); line-height:1.4; margin-bottom:14px; }
.testi-card figcaption{ color:var(--ink-soft); font-size:.9rem; letter-spacing:.05em; }
.testi-dots{ display:flex; justify-content:center; gap:8px; margin-top:8px; }
.testi-dots button{ width:9px; height:9px; border-radius:50%; background:var(--line); transition:.25s var(--ease); }
.testi-dots button.active{ background:var(--oliva); width:22px; border-radius:5px; }
/* Etiqueta "Referencia" — testimonios de ejemplo hasta tener reseñas reales */
.testi-ref{ display:inline-block; font-family:var(--font-body); font-size:.64rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--oliva-dark);
  background:var(--crema); border:1px solid var(--line); padding:4px 12px; border-radius:100px; margin-bottom:14px; }

/* Evaluación con fotos */
.eval-card{ display:grid; gap:30px; background:linear-gradient(160deg,var(--crema-card),var(--crema-light));
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(26px,4vw,44px); box-shadow:var(--shadow-sm); }
.eval-text h2{ margin-bottom:12px; } .eval-text p{ color:var(--ink-soft); }
.eval-previews{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.eval-thumb{ width:72px; height:72px; border-radius:10px; overflow:hidden; border:1px solid var(--line); }
.eval-thumb img{ width:100%; height:100%; object-fit:cover; }

/* Filas de 2 campos (evaluación + contacto) */
.fields-2{ display:grid; gap:0; }
@media (min-width:560px){ .fields-2{ grid-template-columns:1fr 1fr; gap:0 16px; } }
@media (min-width:900px){ .eval-card{ grid-template-columns:.9fr 1.1fr; align-items:center; } }

/* Galería lightbox */
.gallery-item{ cursor:pointer; }
.lightbox{ position:fixed; inset:0; z-index:90; background:rgba(40,36,28,.82);
  display:none; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .3s var(--ease); }
.lightbox.open{ display:flex; opacity:1; }
.lightbox-inner{ position:relative; max-width:560px; width:100%; }
.lightbox-body{ aspect-ratio:1/1; border-radius:var(--radius); font-size:1.2rem; }
.lightbox-close{ position:absolute; top:-16px; right:-4px; color:#fff; font-size:2rem; line-height:1; width:42px; height:42px; }

/* Respeto a reduce-motion para todo el sistema nuevo */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none; }
  .hero-enter{ animation:none; }
  .blob{ animation:none; }
  .testi-track{ transition:none; }
  .scroll-progress{ display:none; }
}

/* ==========================================================================
   HERO A SANGRE COMPLETA + HEADER TRANSPARENTE + GLASS + HOVERS
   ========================================================================== */

/* Header: logo más grande + conmutación claro/oscuro */
.brand{ display:inline-flex; align-items:center; }
.brand img{ height:50px; width:auto; }
@media (max-width:560px){ .brand img{ height:42px; } }
.brand .logo-light{ display:none; }
.brand .logo-dark{ display:inline; }

/* Header transparente SOLO sobre el hero (índice); en otras páginas, glass crema */
.site-header:not(.over-hero){ background:rgba(247,244,236,.9); backdrop-filter:blur(10px); border-bottom-color:var(--line); }
.site-header.over-hero:not(.compact){ background:transparent; border-bottom-color:transparent; box-shadow:none; }
.site-header.over-hero:not(.compact) .brand .logo-light{ display:inline; }
.site-header.over-hero:not(.compact) .brand .logo-dark{ display:none; }
.site-header.over-hero:not(.compact) .nav a{ color:rgba(255,255,255,.92); }
.site-header.over-hero:not(.compact) .nav a::after{ background:#fff; }
.site-header.over-hero:not(.compact) .nav a:hover{ color:#fff; }
.site-header.over-hero:not(.compact) .hamburger span{ background:#fff; }

/* Hero con imagen a sangre completa */
/* svh = viewport visible real del móvil: el hero llena exactamente la pantalla
   al abrir (sin la franja blanca que dejaba `vh` cuando la barra del navegador
   está visible) y nunca queda más alto que la pantalla. */
/* 100svh: el hero llena TODA la pantalla visible, sin franja crema abajo (la
   que hacía que se viera "cortado") y deja los botones flotantes sobre el hero. */
.hero-photo-bg{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center;
  padding:120px 0 70px; background:#2c2814; overflow:hidden; }
/* ===== Carrusel del hero: slides con crossfade + Ken Burns + giro 3D ===== */
.hero-carousel{ position:absolute; inset:0; z-index:0; perspective:1600px; }
.hero-slide{ position:absolute; inset:0; opacity:0; transform:rotateY(7deg) scale(1.06);
  transition:opacity 1.4s var(--ease), transform 1.7s var(--ease-pop);
  transform-origin:50% 50%; will-change:opacity,transform; }
.hero-slide.is-active{ opacity:1; transform:rotateY(0) scale(1); z-index:1; }
/* Capa interna de imagen (separada para que el Ken Burns no choque con el giro 3D) */
.hero-slide .hero-kb{ position:absolute; inset:-4%; display:block;
  background:#2c2814 var(--img) center/cover no-repeat; transform:scale(1.02); }
.hero-slide.is-active .hero-kb{ animation:hero-kb 8s ease-out both; }
@keyframes hero-kb{ from{ transform:scale(1.02) translate(0,0); } to{ transform:scale(1.13) translate(-1.8%,-1.2%); } }
@media (prefers-reduced-motion:reduce){
  .hero-slide{ transition:opacity .5s; transform:none; }
  .hero-slide.is-active .hero-kb{ animation:none; transform:scale(1.03); }
}
/* Overlay más marcado: las fotos del equipo son claras y el texto va en blanco */
.hero-photo-bg .hero-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(95deg, rgba(28,24,12,.82) 0%, rgba(28,24,12,.6) 38%, rgba(28,24,12,.3) 68%, rgba(28,24,12,.12) 100%),
             linear-gradient(0deg, rgba(28,24,12,.55) 0%, rgba(28,24,12,.05) 32%, transparent 50%); }
/* Indicadores del carrusel */
.hero-dots{ position:absolute; left:0; right:0; bottom:24px; z-index:3; display:flex; gap:10px; justify-content:center; }
.hero-dots button{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.65); transition:.3s var(--ease); cursor:pointer; padding:0; }
.hero-dots button.active{ background:#fff; width:28px; border-radius:6px; }
.hero-photo-bg .wrap{ position:relative; z-index:1; width:100%; }
.hero-photo-bg .hero-text{ max-width:640px; color:#fff; }
.hero-photo-bg h1{ color:#fff; font-size:clamp(2.9rem,7.5vw,5rem); line-height:1.05; font-weight:600;
  letter-spacing:-.01em; text-shadow:0 2px 18px rgba(0,0,0,.28); margin-bottom:20px; }
.hero-photo-bg h1 em{ color:var(--rosa-soft); font-style:italic; }
.hero-photo-bg .hero-lead{ color:rgba(255,255,255,.9); }
.hero-photo-bg .hero-eyebrow{ color:#fff; }
.glass-chip{ background:rgba(255,255,255,.16); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.32);
  padding:7px 16px; border-radius:100px; }
.hero-photo-bg .hero-meta b{ color:#fff; }
.hero-photo-bg .hero-meta span{ color:rgba(255,255,255,.82); }
.hero-photo-bg .hero-meta div::before{ background:linear-gradient(180deg,var(--rosa),#fff); }

/* CTAs glass con hover de color/borde */
.btn-glass{ background:rgba(255,255,255,.12); border:1.6px solid rgba(255,255,255,.6); color:#fff; backdrop-filter:blur(4px); }
.btn-glass:hover{ background:#fff; color:var(--oliva-deep); border-color:#fff; transform:translateY(-2px); }
.btn-glass-primary{ background:rgba(143,132,87,.85); border:1.6px solid rgba(255,255,255,.4); color:#fff; box-shadow:0 10px 26px rgba(0,0,0,.24); }
.btn-glass-primary:hover{ background:var(--oliva-deep); border-color:#fff; transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,.32); }

@media (max-width:560px){
  /* Llena exactamente la pantalla visible al abrir (sin franja blanca abajo) */
  .hero-photo-bg{ min-height:88vh; min-height:100svh; padding:104px 0 54px; }
  /* En móvil cada slide usa su recorte vertical dedicado.
     Menos overscan y Ken Burns más suave para NO recortar a las 3 profesionales. */
  .hero-slide .hero-kb{ background-image:var(--img-m); background-position:center 28%; inset:0; transform:scale(1); }
  .hero-slide.is-active .hero-kb{ animation:hero-kb-m 9s ease-out both; }
  @keyframes hero-kb-m{ from{ transform:scale(1) translate(0,0); } to{ transform:scale(1.05) translate(0,-1%); } }
  .hero-photo-bg .hero-overlay{ background:linear-gradient(180deg, rgba(28,24,12,.55), rgba(28,24,12,.32) 42%, rgba(28,24,12,.72)); }
  /* El texto del hero se desbordaba a la derecha (se "cortaba") en móvil:
     acotamos el bloque al ancho disponible y dejamos que todo envuelva. */
  .hero-photo-bg .hero-text{ max-width:100%; width:100%; }
  .hero-photo-bg h1{ font-size:clamp(2rem,8.6vw,2.9rem); }
  .hero-photo-bg .hero-lead{ font-size:1rem; max-width:100%; }
  .hero-actions{ gap:10px; }
  .hero-actions .btn{ flex:1 1 46%; text-align:center; }
  .hero-meta{ gap:14px 16px; }
  .hero-meta div{ min-width:0; flex:1 1 auto; }
  .hero-meta b{ font-size:1.5rem; }
  .hero-meta span{ font-size:.74rem; }
}

/* Hover más rico: cajas de líneas + pasos */
.line-card{ transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.line-card:hover{ transform:translateY(-7px); box-shadow:0 22px 50px rgba(86,80,48,.24); }
.line-card::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 0 rgba(255,255,255,.5); transition:box-shadow .35s var(--ease); }
.line-card:hover::after{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.5); }
.step{ transition:transform .3s var(--ease); }
.step:hover{ transform:translateY(-6px); }
.step:hover .step-n{ background:var(--oliva); color:#fff; border-color:var(--oliva); transform:scale(1.06); }
.step-n{ transition:.3s var(--ease); }

/* ===== Fotos reales (catálogo) + fixes de color/legibilidad ===== */

/* Header sobre el hero: scrim superior MÁS marcado para que el logo/nav blancos
   se lean SIEMPRE, incluso sobre las zonas claras (fondo desenfocado) de la foto. */
.site-header.over-hero:not(.compact){
  background:linear-gradient(180deg, rgba(28,24,12,.70) 0%, rgba(28,24,12,.42) 45%, rgba(28,24,12,.12) 80%, transparent 100%);
}
/* Seguro de legibilidad: sombra suave en logo y menú para que se lean sobre
   cualquier zona de la foto (clara u oscura), sin recargar el scrim. */
.site-header.over-hero:not(.compact) .brand img{ filter:drop-shadow(0 1px 6px rgba(0,0,0,.45)); }
.site-header.over-hero:not(.compact) .nav a{ text-shadow:0 1px 8px rgba(0,0,0,.5); }

/* Filtro BeaSkin en rosa (no oliva) en "Nuestros servicios" */
.svc-filter[data-filter="beaskin"].active{ background:var(--rosa-deep); border-color:var(--rosa-deep); color:#fff; }

/* Cajas de líneas con foto de fondo + tinte de marca para legibilidad */
.line-card.kiki{ background:linear-gradient(160deg, rgba(60,56,34,.22), rgba(40,36,20,.6)), url('../assets/img/linea-kiki.webp') center/cover; }
.line-card.bea{  background:linear-gradient(160deg, rgba(150,100,92,.2), rgba(90,60,54,.58)), url('../assets/img/linea-bea.webp') center/cover; }

/* Galería con imágenes reales + zoom al hover */
.gallery-item{ position:relative; overflow:hidden; background:var(--rosa-soft); }
.gallery-item .gimg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .5s var(--ease); }
.gallery-item:hover .gimg{ transform:scale(1.08); }

/* Lightbox: mostrar la imagen real */
.lightbox-body{ background:#000; }
.lightbox-body img{ width:100%; height:100%; object-fit:contain; display:block; border-radius:var(--radius); }

/* ==========================================================================
   CAPA CREATIVA — detalles de motion premium (on-brand oliva/crema/rosa)
   ========================================================================== */

/* 1) "piel" del hero con brillo de luz que recorre el texto */
.hero-photo-bg h1 em{
  background:linear-gradient(100deg, var(--rosa-soft) 0%, #ffffff 45%, var(--rosa-soft) 90%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:hero-shimmer 6.5s ease-in-out infinite;
}
@keyframes hero-shimmer{ 0%,100%{ background-position:0% center; } 50%{ background-position:130% center; } }

/* 2) Barrido de luz (sheen) al pasar por los CTAs clave */
.btn-primary, .btn-rosa, .btn-glass-primary{ position:relative; overflow:hidden; }
.btn-primary::after, .btn-rosa::after, .btn-glass-primary::after{
  content:''; position:absolute; top:-25%; left:-150%; width:55%; height:150%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); pointer-events:none;
}
.btn-primary:hover::after, .btn-rosa:hover::after, .btn-glass-primary:hover::after{ animation:cta-sheen .8s ease; }
@keyframes cta-sheen{ from{ left:-150%; } to{ left:170%; } }

/* 3) La pastilla flotante de agenda destella sola cada cierto rato (capta la vista).
   OJO: NO redefinir position aquí — ya es position:fixed (esquina inf. derecha).
   El ::before se posiciona contra ese contexto fixed. */
.agenda-float::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; overflow:hidden;
  background:linear-gradient(110deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  background-size:240% 100%; background-position:170% 0;
  animation:gloss-loop 4.5s ease-in-out 2s infinite;
}
@keyframes gloss-loop{ 0%{ background-position:170% 0; } 40%,100%{ background-position:-70% 0; } }

/* 4) Gloss diagonal que cruza las tarjetas de línea al pasar el mouse */
.line-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  background-size:240% 100%; background-position:150% 0; transition:background-position .8s var(--ease);
}
.line-card:hover::before{ background-position:-60% 0; }

/* 5) Imágenes de galería: revelado con "cortina" (clip) al entrar, más cinematográfico */
.gallery-item[data-reveal="zoom"]{ clip-path:inset(0 0 8% 0); }
.gallery-item[data-reveal="zoom"].in{ clip-path:inset(0 0 0 0); transition:opacity .9s var(--ease), transform 1.25s var(--ease-back), clip-path 1.1s var(--ease); }

@media (prefers-reduced-motion:reduce){
  .hero-photo-bg h1 em{ animation:none; }
  .agenda-float::before{ animation:none; display:none; }
}

/* ===== CTA de WhatsApp (evaluación + contacto) ===== */
.wa-cta{ background:#25d366; color:#fff; border:none; display:inline-flex; align-items:center;
  justify-content:center; gap:10px; font-weight:600; box-shadow:0 8px 22px rgba(37,211,102,.28); }
.wa-cta:hover{ background:#1ebe5d; color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px rgba(37,211,102,.4); }
.wa-cta svg{ width:22px; height:22px; flex:none; }
.eval-cta{ display:flex; flex-direction:column; justify-content:center; gap:10px; }
.eval-cta .form-note{ text-align:center; }
.contact-cta h3{ color:var(--oliva-deep); margin-bottom:8px; }
.contact-cta p{ color:var(--ink-soft); margin-bottom:18px; }