/* ====================================================================
   VITTA NUTRIVA SPA — Premium stylesheet
   Palette: rose nude · champagne gold · sage green · cream · chocolate
   ==================================================================== */

:root{
  /* Paleta alineada al local real: rosa palo del logo + verde follaje + blanco estuco */
  --rose: #E9C9D1;            /* rosa palo del logo Vitta */
  --rose-deep: #C98AA0;       /* mauve marca */
  --rose-ink: #8E4D63;         /* mauve oscuro para texto sobre claro */
  --gold: #C98AA0;             /* alias compatibilidad — ahora es mauve */
  --gold-deep: #8E4D63;        /* alias compatibilidad */
  --leaf: #6E8E5A;             /* verde follaje muro vivo */
  --leaf-deep: #4F6B40;
  --bougain: #E37A4F;          /* naranja bougainvillea, acento cálido */
  --cream: #FBF5F2;
  --bone: #FFFDFC;             /* blanco estuco */
  --ink: #2B1F22;              /* tinta cálida */
  --ink-soft: #5A4651;
  --muted: #978690;
  --line: rgba(43,31,34,.12);
  --shadow-soft: 0 20px 60px -20px rgba(142,77,99,.18);
  --shadow-lg: 0 40px 100px -30px rgba(142,77,99,.28);
  --easing: cubic-bezier(.2,.8,.2,1);
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --script: "Great Vibes", cursive;
  --radius: 22px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bone);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; transition: color .3s var(--easing); }
a:hover{ color: var(--gold-deep); }
button{ font-family: inherit; cursor: pointer; border:none; background:none; color:inherit; }
em{ font-style: italic; font-family: var(--serif); font-weight:400; color: var(--gold-deep); }

h1,h2,h3,h4{ font-family: var(--serif); font-weight: 500; color: var(--ink); letter-spacing:.01em; margin:0; }
h1{ font-size: clamp(2.4rem, 5vw + 1rem, 5.4rem); line-height:1.05; letter-spacing:-.01em; }
h2{ font-size: clamp(1.9rem, 2.5vw + 1rem, 3.6rem); line-height:1.12; }
h3{ font-size: clamp(1.15rem, .5vw + 1rem, 1.5rem); line-height:1.3; }
h4{ font-size: 1rem; letter-spacing:.08em; text-transform:uppercase; font-family: var(--sans); font-weight:600; }

.eyebrow{
  display:inline-block;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  margin-bottom: 1rem;
}
.script{ font-family: var(--script); font-size: 2rem; color: var(--gold); font-weight:400; display:block; line-height:1; margin-bottom:.6rem; }

/* ====================================================================
   PRELOADER
==================================================================== */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background: var(--bone);
  display:grid; place-items:center;
  transition: opacity .8s var(--easing), visibility .8s;
}
.preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-inner{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.preloader-ring{ width:80px; height:80px; }
.preloader-ring circle{
  fill:none; stroke: var(--gold); stroke-width:1.5;
  stroke-dasharray: 226; stroke-dashoffset: 226;
  animation: ring 2s var(--easing) infinite;
  transform-origin: center;
}
@keyframes ring{
  0%{ stroke-dashoffset:226; transform: rotate(0deg); }
  60%{ stroke-dashoffset:0; }
  100%{ stroke-dashoffset:226; transform: rotate(360deg); }
}
.preloader-brand{ display:flex; align-items:center; gap:.6rem; }
.preloader-brand .brand-mark{
  width:28px; height:28px; border-radius:50%;
  background: linear-gradient(135deg, var(--gold), var(--rose-deep));
  color: white; display:grid; place-items:center; font-family: var(--serif); font-size: 1rem; font-weight:600;
}
.preloader-brand .brand-word{ font-family: var(--serif); font-size:1.4rem; letter-spacing:.1em; color: var(--ink); }

/* ====================================================================
   SCROLL PROGRESS
==================================================================== */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background: linear-gradient(90deg, var(--gold), var(--rose-deep));
  z-index:1100; transition: width .1s linear;
}

/* ====================================================================
   NAV
==================================================================== */
.nav{
  position: fixed; inset: 0 0 auto 0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.25rem clamp(1.2rem, 4vw, 4rem);
  transition: all .4s var(--easing);
  background: transparent;
}
.nav.is-solid{
  background: rgba(255, 252, 247, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-top: .8rem; padding-bottom: .8rem;
  border-bottom: 1px solid var(--line);
}
.nav-brand{ display:flex; align-items:center; gap:.7rem; font-family: var(--serif); font-size:1.4rem; font-weight:600; color:#fff; transition: color .4s; }
.nav.is-solid .nav-brand{ color: var(--ink); }
.nav-mark{
  width:36px; height:36px; border-radius:50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--rose-deep) 100%);
  color:#fff; display:grid; place-items:center; font-family: var(--serif); font-weight:600; font-size:1.15rem;
  box-shadow: 0 6px 20px -6px rgba(201,166,107,.6);
}
.nav-name{ line-height:1; }
.nav-name em{ color: var(--gold); font-size:.92em; }
.nav-links{ display:flex; gap:2rem; }
.nav-links a{
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; font-weight:500;
  position:relative;
  transition: color .3s;
}
.nav.is-solid .nav-links a{ color: var(--ink-soft); }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background: var(--gold);
  transition: width .3s var(--easing);
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  padding:.85rem 1.5rem; border-radius: 999px;
  background: var(--gold); color:#fff;
  transition: all .3s var(--easing);
  box-shadow: 0 10px 30px -10px rgba(201,166,107,.55);
}
.nav-cta:hover{ background: var(--gold-deep); transform: translateY(-2px); color:#fff; }
.nav-burger{ display:none; flex-direction:column; gap:5px; padding:.4rem; }
.nav-burger span{ display:block; width:22px; height:1.5px; background: currentColor; transition: transform .3s, opacity .3s; }
.nav.is-solid .nav-burger{ color: var(--ink); }
.nav:not(.is-solid) .nav-burger{ color:#fff; }

/* ====================================================================
   HERO
==================================================================== */
.hero{
  position:relative; min-height: 100vh; min-height: 100svh;
  display:grid; place-items:center;
  color:#fff; text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{
  position:absolute; inset:-10%;
  background: url('../img/ambiente/hero.jpg') center/cover no-repeat, #2E1E12;
  will-change: transform;
  transform: scale(1.08);
  animation: slowZoom 14s var(--easing) forwards;
  z-index:-2;
}
@keyframes slowZoom{
  from{ transform: scale(1.15); }
  to{ transform: scale(1); }
}
.hero-veil{
  position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(43,27,16,.35) 0%, rgba(43,27,16,.15) 35%, rgba(43,27,16,.65) 100%);
}
.hero-veil-strong{
  background:
    linear-gradient(180deg, rgba(20,10,15,.55) 0%, rgba(20,10,15,.40) 30%, rgba(20,10,15,.78) 100%),
    linear-gradient(90deg, rgba(142,77,99,.35), rgba(20,10,15,.0) 60%);
}
.hero-content{ max-width: 980px; padding: 8rem 1.5rem 6rem; }
.hero-kicker{
  font-size:.75rem; letter-spacing:.5em; text-transform:uppercase;
  display:inline-block; padding-bottom:.5rem; margin-bottom:1.5rem;
  color: var(--rose);
}
.hero-title{ color:#fff; }
.hero-title .line{ display:block; overflow:hidden; }
.hero-title em{ color: var(--rose); }
.hero-title strong{ font-weight:500; color: var(--gold); }
.hero-sub{ max-width: 620px; margin: 1.8rem auto 2.6rem; color: rgba(255,255,255,.88); font-weight: 300; font-size:1.05rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: 1rem 2rem; border-radius: 999px;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  transition: all .35s var(--easing);
  border:1px solid transparent;
}
.btn-gold{ background: var(--gold); color:#fff; box-shadow: 0 14px 40px -14px rgba(201,166,107,.7); }
.btn-gold:hover{ background: var(--gold-deep); color:#fff; transform: translateY(-3px); box-shadow: 0 20px 50px -14px rgba(169,133,71,.8); }
.btn-ghost{ border-color: rgba(255,255,255,.6); color:#fff; }
.btn-ghost:hover{ background: rgba(255,255,255,.1); border-color:#fff; color:#fff; }
.hero-ctas{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:3rem; }

.hero-stats{ display:flex; gap: clamp(1rem,4vw,3rem); justify-content:center; align-items:center; flex-wrap:wrap; margin-top:2rem; }
.hero-stats > div{ display:flex; flex-direction:column; align-items:center; }
.hero-stats strong{ font-family: var(--serif); font-size: 2.6rem; font-weight:400; color: var(--gold); line-height:1; }
.hero-stats span{ font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; color: rgba(255,255,255,.8); margin-top:.4rem; }
.hero-stats .sep{ width:1px; height:40px; background: rgba(255,255,255,.28); }

.hero-scroll{ position:absolute; bottom: 1.5rem; left:50%; transform: translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.7rem; font-size:.68rem; letter-spacing:.4em; text-transform:uppercase; color: rgba(255,255,255,.7); }
.mouse{ width:22px; height:36px; border: 1.5px solid rgba(255,255,255,.5); border-radius:12px; display:grid; place-items:start center; padding-top:6px; }
.wheel{ display:block; width:2px; height:6px; background: var(--gold); border-radius:1px; animation: wheel 1.8s var(--easing) infinite; }
@keyframes wheel{ 0%{ transform:translateY(0); opacity:1; } 80%{ transform:translateY(12px); opacity:0; } 100%{ opacity:0; } }

/* ====================================================================
   MARQUEE
==================================================================== */
.marquee{
  overflow:hidden; background: var(--ink); color: var(--rose);
  padding: 1.25rem 0; border-top:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05);
}
.marquee-track{ display:flex; gap:3rem; width: max-content; animation: marquee 42s linear infinite; padding-left:3rem; }
.marquee-track span{ font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--rose); opacity:.85; white-space:nowrap; }
@keyframes marquee{ to{ transform: translateX(-50%); } }

/* ====================================================================
   SECTION HELPERS
==================================================================== */
.section-head{ max-width: 760px; margin: 0 auto 4rem; text-align:center; padding: 0 1.5rem; }
.section-head p{ color: var(--muted); font-size:1.05rem; margin-top:1rem; }

/* ====================================================================
   ABOUT
==================================================================== */
.about{ padding: clamp(5rem, 10vw, 9rem) clamp(1.2rem, 5vw, 5rem); background: var(--bone); }
.about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items:center; max-width: 1320px; margin:0 auto; }
.about-img{ margin:0; position:relative; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-lg); }
.about-img img{ aspect-ratio: 4/5; object-fit: cover; transition: transform 1.4s var(--easing); width:100%; }
.about-img:hover img{ transform: scale(1.05); }
.about-img figcaption{
  position:absolute; bottom:1.5rem; left:1.5rem; right:1.5rem;
  background: rgba(255,252,247,.92); backdrop-filter: blur(12px);
  padding:1rem 1.25rem; border-radius: 12px;
  font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--ink-soft);
}
.about-body p{ color: var(--ink-soft); font-size: 1rem; margin: 1rem 0; }
.about-body strong{ font-weight:500; color: var(--ink); }
.about-bullets{ list-style:none; padding:0; margin: 2rem 0 0; display:grid; gap:.8rem; }
.about-bullets li{ display:flex; align-items:center; gap:.9rem; font-size:.95rem; color: var(--ink-soft); }
.about-bullets .dot{ width:8px; height:8px; border-radius:50%; background: var(--gold); flex-shrink:0; box-shadow: 0 0 0 4px rgba(201,166,107,.18); }

/* ====================================================================
   PARALLAX BANNER
==================================================================== */
.parallax{
  position:relative; min-height: 60vh;
  background-image: var(--img); background-size: cover; background-position: center; background-attachment: fixed;
  display:grid; place-items:center; color:#fff; text-align:center;
  isolation:isolate;
}
.parallax::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(43,27,16,.45), rgba(43,27,16,.65)); z-index:-1; }
.parallax-inner{ max-width: 780px; padding: 5rem 1.5rem; }
.parallax h3{ font-size: clamp(1.6rem, 2.5vw + .8rem, 2.8rem); color:#fff; line-height:1.3; font-weight:400; }
.parallax .script{ color: var(--rose); }

/* ====================================================================
   SERVICIOS + TABS
==================================================================== */
.servicios{ padding: clamp(5rem, 10vw, 9rem) clamp(1.2rem, 4vw, 4rem); background: linear-gradient(180deg, var(--bone) 0%, var(--cream) 100%); }
.tabs{
  display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap;
  max-width: 900px; margin: 0 auto 3rem;
  padding: .5rem; background: var(--bone); border-radius: 999px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
}
.tab{
  padding: .85rem 1.6rem; border-radius: 999px;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  color: var(--ink-soft);
  transition: all .35s var(--easing);
  display:inline-flex; align-items:center; gap:.5rem;
}
.tab small{ font-family: var(--serif); font-style: italic; font-size:.75rem; color: var(--gold-deep); }
.tab.active{ background: var(--ink); color:#fff; box-shadow: 0 10px 30px -10px rgba(43,27,16,.45); }
.tab.active small{ color: var(--gold); }
.tab:hover:not(.active){ color: var(--ink); background: rgba(201,166,107,.12); }

.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation: fadeUp .6s var(--easing); }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(20px); } to{ opacity:1; transform: none; } }

.cards{
  display:grid; gap: 1.8rem;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  max-width: 1320px; margin: 0 auto;
}
.card{
  position:relative; background: var(--bone);
  border-radius: var(--radius); overflow:hidden;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px -20px rgba(43,27,16,.15);
  transition: transform .5s var(--easing), box-shadow .5s var(--easing);
  display:flex; flex-direction:column;
}
.card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.card-img{ aspect-ratio: 4/3; overflow:hidden; background: var(--cream); }
.card-img img{ width:100%; height:100%; object-fit:cover; transition: transform 1s var(--easing); }
.card:hover .card-img img{ transform: scale(1.08); }
.card-body{ padding: 1.4rem 1.5rem 1.8rem; flex:1; display:flex; flex-direction:column; }
.card-tag{
  display:inline-block; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600;
  padding:.35rem .7rem; border-radius: 999px;
  background: rgba(168,184,154,.22); color: #627055;
  margin-bottom: .9rem; align-self: flex-start;
}
.card-tag.gold{ background: linear-gradient(135deg, rgba(201,166,107,.28), rgba(232,201,186,.28)); color: var(--gold-deep); }
.card h3 small{ font-family: var(--sans); font-weight:400; font-size:.75em; color: var(--muted); }
.card p{ color: var(--ink-soft); font-size:.92rem; margin: .7rem 0 1.1rem; flex:1; }
.card-link{ font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color: var(--gold-deep); align-self: flex-start; }
.card-link:hover{ color: var(--ink); letter-spacing:.22em; }
.card.featured{ border-color: rgba(201,166,107,.35); box-shadow: 0 20px 60px -28px rgba(201,166,107,.6); }
.card.featured::before{
  content:"★"; position:absolute; top:1rem; right:1rem; z-index:2;
  width:34px; height:34px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--gold), var(--rose-deep)); color:#fff;
  border-radius:50%; font-size:.85rem;
  box-shadow: 0 6px 16px -4px rgba(201,166,107,.7);
}

/* ====================================================================
   EXPERIENCIA
==================================================================== */
.experiencia{ padding: clamp(5rem, 10vw, 9rem) clamp(1.2rem, 4vw, 4rem); background: var(--ink); color: rgba(255,255,255,.9); }
.exp-head{ text-align:center; max-width: 760px; margin: 0 auto 4rem; }
.experiencia h2{ color:#fff; }
.experiencia em{ color: var(--rose); }
.experiencia .eyebrow{ color: var(--gold); }
.exp-grid{ display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); max-width: 1320px; margin: 0 auto; }
.exp-card{
  padding: 2.5rem 1.8rem;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  text-align:center;
  transition: all .5s var(--easing);
}
.exp-card:hover{ background: rgba(201,166,107,.08); border-color: rgba(201,166,107,.4); transform: translateY(-6px); }
.exp-ico{
  width:56px; height:56px; margin:0 auto 1.2rem;
  display:grid; place-items:center;
  font-family: var(--serif); font-size:1.8rem; color: var(--gold);
  border: 1px solid rgba(201,166,107,.4); border-radius:50%;
}
.exp-card h3{ color:#fff; margin-bottom:.6rem; }
.exp-card p{ font-size:.9rem; color: rgba(255,255,255,.68); margin:0; }

/* ====================================================================
   GALERÍA
==================================================================== */
.galeria{ padding: clamp(5rem, 10vw, 9rem) clamp(1.2rem, 4vw, 4rem); background: var(--cream); }
.gallery-grid{
  display:grid; gap:1rem; max-width: 1320px; margin:0 auto;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 220px 220px;
}
.gallery-grid figure{ margin:0; overflow:hidden; border-radius: var(--radius); position:relative; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--easing); }
.gallery-grid figure:hover img{ transform: scale(1.08); }
.g1{ grid-column: 1 / 3; grid-row: 1 / 3; }
.g2{ grid-column: 3 / 4; grid-row: 1 / 2; }
.g3{ grid-column: 4 / 5; grid-row: 1 / 2; }
.g4{ grid-column: 3 / 5; grid-row: 2 / 3; }

/* ====================================================================
   TESTIMONIOS
==================================================================== */
.testimonios{ padding: clamp(5rem, 10vw, 9rem) clamp(1.2rem, 4vw, 4rem); background: var(--bone); }
.test-track{
  display:flex; gap:1.5rem; overflow-x: auto;
  scroll-snap-type: x mandatory;
  max-width: 1320px; margin: 0 auto;
  padding: 1rem 0 2rem;
  scrollbar-width: thin; scrollbar-color: var(--gold) var(--cream);
}
.test-track::-webkit-scrollbar{ height:6px; }
.test-track::-webkit-scrollbar-track{ background: var(--cream); border-radius:3px; }
.test-track::-webkit-scrollbar-thumb{ background: var(--gold); border-radius:3px; }
.test{
  min-width: min(420px, 85vw); scroll-snap-align: start;
  background: var(--cream); padding:2rem 2rem 1.8rem; border-radius: var(--radius);
  border: 1px solid var(--line);
  position:relative;
}
.test::before{ content:"“"; position:absolute; top:.2rem; left:1.3rem; font-family: var(--serif); font-size:5rem; color: var(--gold); line-height:1; opacity:.5; }
.test p{ font-family: var(--serif); font-style: italic; font-size: 1.12rem; color: var(--ink-soft); margin: 1.2rem 0 1.4rem; position:relative; z-index:1; }
.test footer{ border-top:1px solid var(--line); padding-top:.9rem; display:flex; flex-direction:column; gap:.15rem; }
.test strong{ font-weight:600; color: var(--ink); font-size:.95rem; }
.test span{ font-size:.78rem; color: var(--muted); letter-spacing:.04em; }

/* ====================================================================
   CONTACTO
==================================================================== */
.contacto{
  padding: clamp(5rem, 10vw, 9rem) clamp(1.2rem, 4vw, 4rem);
  background: linear-gradient(135deg, var(--rose) 0%, var(--cream) 60%);
  position:relative; overflow:hidden;
}
.contacto::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 10% 10%, rgba(201,166,107,.28), transparent 40%), radial-gradient(circle at 90% 90%, rgba(168,184,154,.25), transparent 40%);
  pointer-events:none;
}
.cont-grid{ display:grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem,5vw,5rem); max-width: 1280px; margin: 0 auto; position:relative; z-index:1; align-items:flex-start; }
.cont-body p{ color: var(--ink-soft); margin-bottom:1.5rem; }
.cont-list{ list-style:none; padding:0; margin:1rem 0; display:grid; gap:.8rem; }
.cont-list li{ display:flex; align-items:center; gap:1rem; font-size:.97rem; color: var(--ink-soft); }
.cont-list span{ width:36px; height:36px; display:grid; place-items:center; background: var(--bone); border-radius:50%; color: var(--gold-deep); flex-shrink:0; box-shadow: var(--shadow-soft); }
.cont-list a{ color: var(--ink); }
.cont-list a:hover{ color: var(--gold-deep); }
.cont-social{ display:flex; gap:1.25rem; margin-top:2rem; }
.cont-social a{
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  padding-bottom:3px; border-bottom:1px solid var(--ink); color: var(--ink);
  transition: all .3s;
}
.cont-social a:hover{ border-color: var(--gold); color: var(--gold-deep); }

/* FORM */
.cont-form{
  background: var(--bone); padding: 2.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display:grid; gap:1rem;
  border: 1px solid rgba(255,255,255,.5);
}
.field{ position:relative; }
.field input, .field select, .field textarea{
  width:100%;
  padding: 1.2rem 1rem .5rem; font-family: var(--sans); font-size: .95rem; color: var(--ink);
  background: transparent;
  border:1px solid var(--line);
  border-radius: 10px;
  outline:none;
  transition: border-color .3s, background .3s;
}
.field textarea{ padding-top:1.35rem; resize:vertical; }
.field select{ padding-top:1.35rem; appearance:none; cursor:pointer; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field label{
  position:absolute; left:1rem; top:1rem;
  font-size:.95rem; color: var(--muted); pointer-events:none;
  transition: all .2s var(--easing);
  background: transparent; padding: 0 .25rem;
}
.field label small{ color: var(--muted); opacity:.7; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--gold); background: rgba(232,201,186,.12); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select:focus + label, .field select:valid + label{
  top: -.5rem; left: .8rem; font-size:.7rem; letter-spacing:.08em; color: var(--gold-deep); background: var(--bone);
}
.cont-form button{ justify-self:flex-start; margin-top:.5rem; }
.form-note{ font-size:.78rem; color: var(--muted); text-align:center; margin:.3rem 0 0; }

/* ====================================================================
   FOOTER
==================================================================== */
.footer{ background: var(--ink); color: rgba(255,255,255,.7); padding: 4rem clamp(1.2rem, 4vw, 4rem) 2rem; }
.footer-top{ display:grid; grid-template-columns: 1fr 2fr; gap:3rem; max-width: 1280px; margin: 0 auto; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-brand{ display:flex; gap:1rem; align-items:flex-start; }
.footer-brand strong{ font-family: var(--serif); font-size:1.5rem; font-weight:600; color:#fff; display:block; line-height:1.2; }
.footer-brand em{ color: var(--gold); }
.footer-brand p{ font-size:.87rem; color: rgba(255,255,255,.55); margin:.4rem 0 0; }
.footer-cols{ display:grid; grid-template-columns: repeat(3, 1fr); gap:2rem; }
.footer-cols h4{ color: var(--gold); margin-bottom:1rem; font-size:.75rem; letter-spacing:.25em; }
.footer-cols a{ display:block; font-size:.88rem; color: rgba(255,255,255,.65); padding:.3rem 0; transition: color .3s; }
.footer-cols a:hover{ color: var(--rose); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; max-width: 1280px; margin: 2rem auto 0; font-size:.78rem; color: rgba(255,255,255,.45); }
.footer-bottom a{ color: var(--rose); }

/* ====================================================================
   WHATSAPP FAB
==================================================================== */
.fab-wa{
  position:fixed; bottom:1.3rem; right:1.3rem; z-index:999;
  width:56px; height:56px; border-radius:50%;
  background: #25D366; color:#fff;
  display:grid; place-items:center;
  box-shadow: 0 14px 40px -10px rgba(37,211,102,.6);
  transition: transform .3s var(--easing);
  animation: pulse 2.2s ease-out infinite;
}
.fab-wa:hover{ transform: scale(1.1); color:#fff; }
@keyframes pulse{
  0%{ box-shadow: 0 14px 40px -10px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.5); }
  70%{ box-shadow: 0 14px 40px -10px rgba(37,211,102,.6), 0 0 0 18px rgba(37,211,102,0); }
  100%{ box-shadow: 0 14px 40px -10px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,0); }
}

/* ====================================================================
   REVEAL ANIMATIONS
==================================================================== */
.reveal{ opacity:0; transform: translateY(32px); transition: opacity .9s var(--easing), transform .9s var(--easing); }
.reveal.is-visible{ opacity:1; transform:none; }
.hero .reveal{ transition-delay: .15s; }
.hero .reveal:nth-child(2){ transition-delay: .3s; }
.hero .reveal:nth-child(3){ transition-delay: .5s; }
.hero .reveal:nth-child(4){ transition-delay: .7s; }
.hero .reveal:nth-child(5){ transition-delay: .85s; }
.hero-title .line.reveal{ transform: translateY(100%); opacity:0; transition: opacity 1s var(--easing), transform 1s var(--easing); }
.hero-title .line.reveal.is-visible{ opacity:1; transform:none; }
.hero-title .line.reveal:nth-child(2){ transition-delay:.2s; }
.cards .reveal{ transition-delay: calc(var(--i, 0) * 60ms); }

/* ====================================================================
   RESPONSIVE
==================================================================== */
@media (max-width: 1024px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-img{ max-width:560px; margin:0 auto; }
  .cont-grid{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-rows: 180px 180px; }
}
@media (max-width: 720px){
  .nav{ padding: 1rem 1.2rem; }
  .nav-links{
    position:fixed; inset: 0 0 0 auto; width: 82%; max-width: 340px;
    background: var(--bone); flex-direction:column; justify-content:center;
    padding: 6rem 2rem 2rem; gap:2rem;
    transform: translateX(100%); transition: transform .5s var(--easing);
    box-shadow: -30px 0 80px -20px rgba(0,0,0,.3);
  }
  .nav-links.is-open{ transform:none; }
  .nav-links a{ color: var(--ink) !important; font-size:1rem; }
  .nav-cta{ display:none; }
  .nav-burger{ display:flex; z-index:1001; }
  .nav-burger.is-open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
  .nav-burger.is-open span:nth-child(2){ opacity:0; }
  .nav-burger.is-open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

  .hero-content{ padding: 7rem 1.2rem 5rem; }
  .hero-stats strong{ font-size:2rem; }
  .hero-stats .sep{ display:none; }

  .tabs{ padding:.4rem; }
  .tab{ padding:.7rem 1rem; font-size:.7rem; }
  .gallery-grid{ grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .g1, .g2, .g3, .g4{ grid-column: auto; grid-row: auto; aspect-ratio: 1; }
  .g1{ grid-column: 1 / 3; aspect-ratio: 16/9; }

  .footer-cols{ grid-template-columns: 1fr 1fr; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .parallax{ background-attachment: scroll; }
  .cont-form{ padding: 1.8rem; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .hero-bg{ animation:none; transform:none; }
  .reveal{ opacity:1; transform:none; }
}

/* ====================================================================
   BACKGROUNDS DECORATIVOS — petalos, blobs, follaje
==================================================================== */
.bg-petals,
.bg-blob,
.bg-leaf{
  position:absolute; pointer-events:none; user-select:none; opacity:.55;
  filter: blur(.4px);
  z-index:0;
}
.bg-petals svg, .bg-blob svg, .bg-leaf svg{ width:100%; height:100%; display:block; }

.bg-blob.b1{ width: 520px; height:520px; top:-180px; left:-180px; opacity:.45; }
.bg-blob.b2{ width: 420px; height:420px; bottom:-160px; right:-140px; opacity:.4; }
.bg-blob.b3{ width: 360px; height:360px; top:30%; right:-120px; opacity:.35; }

.bg-leaf.l1{ width: 220px; top:8%; left:2%; opacity:.5; transform: rotate(-12deg); }
.bg-leaf.l2{ width: 260px; bottom:6%; right:3%; opacity:.45; transform: rotate(18deg) scaleX(-1); }

.bg-petals.p1{ inset:0; opacity:.35; }
.float-slow{ animation: floaty 14s ease-in-out infinite alternate; }
.float-slower{ animation: floaty 22s ease-in-out infinite alternate; }
@keyframes floaty{
  from{ transform: translateY(-12px) rotate(-2deg); }
  to{ transform: translateY(14px) rotate(3deg); }
}

/* Permitir contenido sobre los blobs */
.about, .servicios, .galeria, .contacto, .testimonios{ position:relative; isolation:isolate; }
.about > *, .servicios > *, .galeria > *, .contacto > *, .testimonios > *{ position:relative; z-index:1; }

/* Hero ahora con overlay de pétalos */
.hero{ isolation:isolate; }
.hero .bg-petals{ z-index:-1; }

/* Pattern grain sutil (textura) sobre fondos planos */
.about::after, .galeria::after{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(142,77,99,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events:none; opacity:.45; z-index:0;
}

/* ====================================================================
   LOGO REAL — circular Vitta + tagline
==================================================================== */
.brand-seal{
  display:inline-grid; place-items:center;
  width: 180px; height: 180px; border-radius:50%;
  background: var(--bone);
  border: 1px solid rgba(142,77,99,.18);
  box-shadow: 0 14px 40px -16px rgba(142,77,99,.35), inset 0 0 0 6px rgba(233,201,209,.4);
  position:relative;
  font-family: var(--sans);
  letter-spacing: .25em;
  font-size:.6rem;
  color: var(--rose-ink);
  text-transform:uppercase;
  font-weight:600;
}
.brand-seal::before{
  content:"VITTA NUTRIVA & SPA";
  position:absolute; top:14px; left:0; right:0; text-align:center;
}
.brand-seal::after{
  content:"VITTA NUTRIVA & SPA";
  position:absolute; bottom:14px; left:0; right:0; text-align:center;
}
.brand-seal svg{ width:78px; height:78px; }

/* Tarjeta credenciales pro */
.creds{
  background: linear-gradient(135deg, rgba(233,201,209,.55), rgba(110,142,90,.18));
  border: 1px solid rgba(142,77,99,.18);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  display:grid; gap:.4rem;
  font-size:.92rem;
  margin-top:1.5rem;
  backdrop-filter: blur(8px);
}
.creds strong{ color: var(--rose-ink); font-weight:600; letter-spacing:.04em; }
.creds span{ color: var(--ink-soft); }

/* ====================================================================
   FOTOS REALES en GRID PEOPLE
==================================================================== */
.equipo{ padding: clamp(4rem,8vw,7rem) clamp(1.2rem,4vw,4rem); background: linear-gradient(180deg, var(--cream), var(--bone)); position:relative; overflow:hidden; }
.equipo-grid{ display:grid; gap:1rem; max-width:1280px; margin:0 auto; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.equipo-card{
  position:relative; aspect-ratio: 3/4;
  border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow-lg);
}
.equipo-card img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--easing); }
.equipo-card:hover img{ transform: scale(1.05); }
.equipo-card figcaption{
  position:absolute; left:1rem; right:1rem; bottom:1rem;
  background: rgba(255,253,252,.92);
  backdrop-filter: blur(8px);
  padding:.6rem .9rem; border-radius:12px;
  font-size:.78rem; color: var(--ink); letter-spacing:.04em;
  border:1px solid rgba(142,77,99,.15);
}
.equipo-card figcaption strong{ display:block; font-family: var(--serif); font-size:1rem; color: var(--rose-ink); }

/* ====================================================================
   FAB extra: scroll-top
==================================================================== */
.fab-top{
  position:fixed; bottom:5.5rem; right:1.5rem; z-index:998;
  width:42px; height:42px; border-radius:50%;
  background: var(--bone); color: var(--rose-ink);
  display:grid; place-items:center;
  box-shadow: 0 10px 30px -10px rgba(142,77,99,.5);
  border:1px solid rgba(142,77,99,.18);
  opacity:0; transform: translateY(20px); pointer-events:none;
  transition: all .35s var(--easing);
}
.fab-top.is-on{ opacity:1; transform:none; pointer-events:auto; }
.fab-top:hover{ background: var(--rose); color:#fff; transform: translateY(-3px); }

/* ====================================================================
   MARQUEE: ahora rosa-mauve, no tinta oscura
==================================================================== */
.marquee{
  background: linear-gradient(90deg, var(--rose-ink), var(--rose-deep), var(--rose-ink));
  color: #fff7f9;
}
.marquee-track span{ color: #fff; opacity:.92; }

/* ====================================================================
   EXPERIENCIA: dejar de ser ink negro, ahora mauve profundo
==================================================================== */
.experiencia{ background: linear-gradient(160deg, #2A1A22 0%, #4A2A36 100%); }
.experiencia em{ color: var(--rose); }
.experiencia .eyebrow{ color: var(--rose); }

/* ====================================================================
   FOOTER también mauve oscuro
==================================================================== */
.footer{ background: linear-gradient(180deg, #2A1A22, #1F1218); }
.footer-cols h4{ color: var(--rose); }
.footer-bottom a{ color: var(--rose); }

/* ====================================================================
   Contacto — fondo rosa palo + ondas SVG
==================================================================== */
.contacto{ background: linear-gradient(135deg, var(--rose) 0%, var(--cream) 60%, var(--bone) 100%); }
.contacto::after{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(110,142,90,.18), transparent 38%),
    radial-gradient(circle at 88% 86%, rgba(227,122,79,.16), transparent 40%);
  pointer-events:none;
}

/* Botón gold-now-mauve gradient */
.btn-gold{
  background: linear-gradient(135deg, var(--rose-deep), var(--rose-ink));
  box-shadow: 0 14px 40px -14px rgba(142,77,99,.6);
}
.btn-gold:hover{
  background: linear-gradient(135deg, var(--rose-ink), #6E3A4D);
  box-shadow: 0 20px 50px -14px rgba(142,77,99,.75);
}

/* nav-mark gradient mauve */
.nav-mark{ background: linear-gradient(135deg, var(--rose-deep), var(--rose-ink)); box-shadow: 0 6px 20px -6px rgba(142,77,99,.6); }

/* card.featured borde mauve */
.card.featured{ border-color: rgba(201,138,160,.45); box-shadow: 0 20px 60px -28px rgba(201,138,160,.55); }
.card.featured::before{ background: linear-gradient(135deg, var(--rose-deep), var(--rose-ink)); }
.card-tag.gold{ background: linear-gradient(135deg, rgba(201,138,160,.28), rgba(233,201,209,.28)); color: var(--rose-ink); }
.card-tag{ background: rgba(110,142,90,.18); color: var(--leaf-deep); }

/* ====================================================================
   PÁGINAS / MÓDULOS — sistema de vistas tipo SPA
==================================================================== */
.page{ display: none; min-height: calc(100vh - 80px); padding-top: 84px; animation: pageIn .55s var(--easing); }
.page.page-active{ display: block; }
@keyframes pageIn{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }

/* Nav siempre sólida en modo páginas */
.nav.is-solid{ background: rgba(255,253,252,.96); }

/* Activo en links del nav */
.nav-links a.active{ color: var(--rose-ink); }
.nav-links a.active::after{ width:100%; background: var(--rose-ink); }

/* CTA WhatsApp en navbar */
.nav-cta-wa{
  display:inline-flex; align-items:center; gap:.45rem;
  background: linear-gradient(135deg, #25D366, #128C7E);
  box-shadow: 0 8px 22px -8px rgba(37,211,102,.55);
}
.nav-cta-wa:hover{ background: linear-gradient(135deg, #128C7E, #075E54); }
.nav-cta-wa svg{ fill: #fff; }

/* ====================================================================
   HERO MOD (compacto, no full screen)
==================================================================== */
.hero-mod{ min-height: clamp(560px, 78vh, 760px); }
.hero-mod .hero-content{ padding: 5rem 1.5rem 4rem; }

/* Botón Whats grande */
.btn-wa-big{
  display:inline-flex; align-items:center; gap:.6rem;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff !important;
  padding: 1.05rem 1.9rem;
  font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  border-radius: 999px;
  box-shadow: 0 16px 38px -12px rgba(37,211,102,.55);
  transition: all .35s var(--easing);
}
.btn-wa-big:hover{ background: linear-gradient(135deg, #128C7E, #075E54); transform: translateY(-3px); color:#fff !important; box-shadow: 0 22px 50px -14px rgba(37,211,102,.7); }
.btn-wa-big svg{ fill: #fff; }
.mt{ margin-top: 1.4rem; }

/* ====================================================================
   FILOSOFÍA / NOSOTROS (con foto del Dr.)
==================================================================== */
.filo{ padding: clamp(4rem,8vw,6rem) clamp(1.2rem,5vw,5rem); position:relative; isolation:isolate; }
.filo-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem,5vw,5rem); max-width:1280px; margin:0 auto; align-items:center; }
.filo-img{ margin:0; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-lg); position:relative; }
.filo-img img{ aspect-ratio: 4/5; object-fit:cover; width:100%; transition: transform 1.4s var(--easing); }
.filo-img:hover img{ transform: scale(1.05); }
.filo-img figcaption{
  position:absolute; bottom:1rem; left:1rem; right:1rem;
  background: rgba(255,253,252,.93); backdrop-filter: blur(10px);
  padding:.75rem 1rem; border-radius: 12px;
  font-family: var(--serif); font-style: italic; font-size:.95rem; color: var(--rose-ink);
  border: 1px solid rgba(142,77,99,.18);
}
.filo-pillars{ display:grid; gap:1rem; margin-top:1.6rem; }
.filo-pillars > div{
  padding: 1rem 1.2rem; border-radius: 14px;
  background: linear-gradient(135deg, rgba(233,201,209,.4), rgba(110,142,90,.1));
  border: 1px solid rgba(142,77,99,.15);
  display:grid; gap:.2rem;
}
.filo-pillars strong{ color: var(--rose-ink); font-weight:600; font-size:.95rem; letter-spacing:.04em; }
.filo-pillars span{ font-size:.88rem; color: var(--ink-soft); }

/* ====================================================================
   SERVICIOS MOD
==================================================================== */
.serv-mod{ padding: clamp(3rem,6vw,5rem) clamp(1.2rem,4vw,4rem); position:relative; isolation:isolate; background: linear-gradient(180deg, var(--bone) 0%, var(--cream) 100%); }
.card-wa{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:.6rem;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  padding:.55rem .95rem; border-radius: 999px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff !important;
  align-self: flex-start;
  transition: all .3s var(--easing);
  box-shadow: 0 6px 18px -6px rgba(37,211,102,.5);
}
.card-wa:hover{ background: linear-gradient(135deg, #128C7E, #075E54); transform: translateY(-2px); color:#fff !important; }
.card-wa svg{ fill:#fff; }

/* Marcador "Foto real" */
.card.real-photo{ border-color: rgba(110,142,90,.4); }
.card.real-photo::after{
  content:"FOTO REAL"; position:absolute; top:.9rem; left:.9rem; z-index:2;
  font-size:.62rem; letter-spacing:.2em; font-weight:700;
  background: var(--leaf-deep); color: #fff;
  padding:.35rem .6rem; border-radius: 999px;
}

.serv-cta-bottom{
  text-align:center; max-width:680px; margin: 3rem auto 0;
  padding: 2rem; background: var(--bone); border-radius: var(--radius);
  border: 1px solid rgba(142,77,99,.15);
}

/* ====================================================================
   MACRO CARDS — 6 categorías premium en lugar de 25 cuadritos
==================================================================== */
.macro-grid{
  display:grid; gap: 1.6rem;
  grid-template-columns: repeat(2, 1fr);
  max-width: 1320px; margin: 0 auto;
}
.macro{
  display:grid; grid-template-columns: 280px 1fr;
  background: var(--bone); border-radius: var(--radius);
  overflow:hidden; position:relative;
  border: 1px solid rgba(142,77,99,.12);
  box-shadow: 0 16px 40px -22px rgba(43,31,34,.18);
  transition: transform .5s var(--easing), box-shadow .5s var(--easing);
}
.macro:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.macro-img{ margin:0; overflow:hidden; }
.macro-img img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 3/4; transition: transform 1.4s var(--easing); }
.macro:hover .macro-img img{ transform: scale(1.06); }
.macro-body{ padding: 1.8rem 1.8rem 1.6rem; display:flex; flex-direction:column; gap:.7rem; position:relative; }
.macro-num{
  position:absolute; top:1.3rem; right:1.6rem;
  font-family: var(--serif); font-style: italic; font-size: 2.4rem;
  color: var(--rose); opacity:.55; line-height:1; font-weight:300;
}
.macro h3{ font-size: 1.45rem; padding-right:3rem; line-height:1.2; }
.macro p{ font-size:.92rem; color: var(--ink-soft); line-height:1.6; margin:0; }
.macro p strong{ color: var(--rose-ink); font-weight:600; }
.macro-list{
  list-style:none; padding: 0; margin: .6rem 0 1rem;
  border-top: 1px dashed rgba(142,77,99,.2);
  padding-top: .8rem;
}
.macro-list li{
  font-size:.83rem; color: var(--ink-soft);
  padding: .25rem 0;
  display:flex; gap:.6rem; align-items:flex-start;
}
.macro-list li::before{
  content:"✦"; color: var(--rose-deep); font-size:.8rem; margin-top:.1rem;
  flex-shrink:0;
}
.macro .card-wa{ margin-top: auto; align-self: flex-start; }

/* Marca FOTO REAL en macro */
.macro.real-photo .macro-img::after{
  content:"FOTO REAL"; position:absolute; top:.9rem; left:.9rem; z-index:2;
  font-size:.6rem; letter-spacing:.22em; font-weight:700;
  background: var(--leaf-deep); color: #fff;
  padding:.32rem .6rem; border-radius: 999px;
  box-shadow: 0 4px 12px -2px rgba(79,107,64,.5);
}
.macro.real-photo{ border-color: rgba(110,142,90,.35); }

/* Responsive */
@media (max-width: 1100px){
  .macro-grid{ grid-template-columns: 1fr; }
  .macro{ grid-template-columns: 220px 1fr; }
}
@media (max-width: 640px){
  .macro{ grid-template-columns: 1fr; }
  .macro-img img{ aspect-ratio: 16/10; }
}
.serv-cta-bottom p{ font-family: var(--serif); font-style: italic; font-size:1.2rem; color: var(--ink-soft); margin-bottom: 1rem; }

/* ====================================================================
   EQUIPO MOD (con foto protagónica)
==================================================================== */
.equipo-mod{ padding: clamp(3rem,6vw,5rem) clamp(1.2rem,4vw,4rem); position:relative; isolation:isolate; background: linear-gradient(180deg, var(--cream), var(--bone)); }
.team-grid{ display:grid; gap: 2rem; max-width: 1280px; margin: 0 auto 4rem; }
.team-hero{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 2rem;
  align-items:center;
  background: var(--bone); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(142,77,99,.12);
}
.team-hero.alt{ grid-template-columns: 1fr 1.1fr; }
.team-hero.alt figure{ order: 2; }
.team-hero figure{ margin:0; aspect-ratio: 4/5; overflow:hidden; }
.team-hero figure img{ width:100%; height:100%; object-fit: cover; transition: transform 1.4s var(--easing); }
.team-hero:hover figure img{ transform: scale(1.04); }
.team-body{ padding: 2.5rem 2.5rem; }
.team-body h3{ font-size: clamp(1.6rem, 2vw + .8rem, 2.4rem); margin: .8rem 0 1rem; color: var(--ink); line-height: 1.15; }
.team-body p{ color: var(--ink-soft); margin-bottom: 1.4rem; line-height:1.7; }

.team-gallery{
  display:grid; gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1280px; margin: 0 auto;
}
.team-gallery figure{ margin:0; aspect-ratio: 4/3; overflow:hidden; border-radius: var(--radius); position:relative; }
.team-gallery figure img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--easing); }
.team-gallery figure:hover img{ transform: scale(1.06); }

/* Ficha médica del Dr. */
.med-card{
  background: linear-gradient(135deg, rgba(233,201,209,.45), rgba(255,253,252,1));
  border: 1px solid rgba(142,77,99,.2);
  border-radius: var(--radius);
  padding: 1.8rem 2rem;
  margin-top: 1.4rem;
  display:grid; gap:.55rem;
  font-size:.88rem;
  position:relative;
  box-shadow: var(--shadow-soft);
}
.med-card::before{
  content:"⚕"; position:absolute; top:1rem; right:1.2rem;
  font-size:1.6rem; color: var(--rose-ink); opacity:.5;
}
.med-card .med-row{ display:flex; gap:.8rem; align-items:flex-start; }
.med-card .med-label{ font-weight:600; color: var(--rose-ink); min-width: 130px; letter-spacing:.04em; font-size:.78rem; text-transform:uppercase; }
.med-card .med-val{ color: var(--ink-soft); flex:1; }

/* ====================================================================
   AVALES / CREDIBILIDAD — propuesta de valor única
==================================================================== */
.avales{ padding: clamp(3rem,5vw,4rem) clamp(1.2rem,4vw,4rem); background: var(--ink); color: rgba(255,255,255,.92); position:relative; overflow:hidden; }
.avales::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 10% 20%, rgba(201,138,160,.25), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(110,142,90,.18), transparent 40%);
}
.avales-inner{ max-width: 1280px; margin: 0 auto; position:relative; z-index:1; }
.avales-head{ text-align:center; margin-bottom: 3rem; }
.avales-head .eyebrow{ color: var(--rose); }
.avales-head h2{ color:#fff; }
.avales-head h2 em{ color: var(--rose); }
.avales-head p{ color: rgba(255,255,255,.7); max-width:680px; margin: 1rem auto 0; }

.avales-grid{
  display:grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.aval{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 1.8rem 1.5rem;
  display:grid; gap:.5rem;
  transition: all .35s var(--easing);
}
.aval:hover{ background: rgba(201,138,160,.12); border-color: rgba(201,138,160,.4); transform: translateY(-4px); }
.aval-ico{ font-size:1.8rem; color: var(--rose); margin-bottom:.4rem; }
.aval h3{ color:#fff; font-size: 1.05rem; font-family: var(--sans); font-weight:600; letter-spacing:.04em; }
.aval p{ font-size:.83rem; color: rgba(255,255,255,.7); margin: 0; }
.aval code{ font-family: 'Courier New', monospace; font-size:.78rem; color: var(--rose); display:inline-block; margin-top:.2rem; letter-spacing:.06em; background: rgba(201,138,160,.15); padding:.2rem .55rem; border-radius: 6px; }

/* ====================================================================
   CONTACTO MOD
==================================================================== */
.contact-mod{ padding: clamp(3rem,6vw,5rem) clamp(1.2rem,4vw,4rem); position:relative; isolation:isolate; background: linear-gradient(135deg, var(--rose) 0%, var(--cream) 60%, var(--bone) 100%); min-height: 80vh; }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; max-width: 1180px; margin: 0 auto; align-items:flex-start; }
.contact-info{ display:grid; gap: 1rem; }
.contact-wa-card{
  display:grid; grid-template-columns: auto 1fr auto; gap:1rem; align-items:center;
  padding: 1.6rem 1.8rem;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color:#fff !important; border-radius: var(--radius);
  box-shadow: 0 16px 40px -14px rgba(37,211,102,.55);
  transition: all .35s var(--easing);
}
.contact-wa-card:hover{ background: linear-gradient(135deg, #128C7E, #075E54); transform: translateY(-3px); color:#fff !important; box-shadow: 0 22px 52px -14px rgba(37,211,102,.7); }
.contact-wa-card svg{ fill:#fff; }
.contact-wa-card strong{ display:block; font-family: var(--serif); font-size: 1.4rem; font-weight:600; line-height:1.2; }
.contact-wa-card span{ font-size:.85rem; opacity:.92; }
.contact-wa-card .arrow{ font-size:1.6rem; opacity:.85; }

.contact-line{
  display:grid; grid-template-columns: auto 1fr; gap:1rem; align-items:center;
  padding: 1.1rem 1.4rem;
  background: var(--bone); border-radius: 14px;
  border: 1px solid rgba(142,77,99,.12);
  color: var(--ink) !important;
  transition: all .3s var(--easing);
}
.contact-line:hover{ border-color: rgba(142,77,99,.3); transform: translateX(4px); color: var(--ink) !important; }
.contact-line .ico{
  width:42px; height:42px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--rose-deep), var(--rose-ink));
  color:#fff; border-radius:50%; font-size:1.1rem;
}
.contact-line strong{ display:block; color: var(--rose-ink); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; margin-bottom: .15rem; }
.contact-line span{ font-size:.92rem; color: var(--ink-soft); }

.contact-social{ display:flex; gap: 1rem; margin-top:.5rem; padding: 0 .4rem; }
.contact-social a{
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  padding-bottom:3px; border-bottom:1px solid var(--rose-ink); color: var(--rose-ink);
}
.contact-social a:hover{ color: var(--ink); border-color: var(--ink); }

.cont-form .form-title{ font-family: var(--serif); font-size: 1.6rem; color: var(--rose-ink); margin-bottom:.4rem; }
.cont-form .form-sub{ font-size:.9rem; color: var(--ink-soft); margin-bottom: 1rem; }

/* ====================================================================
   FAB WhatsApp gigante con texto
==================================================================== */
.fab-wa{
  width: auto; height: 60px; padding: 0 1.4rem 0 .9rem;
  display:flex; align-items:center; gap:.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:#fff;
  box-shadow: 0 16px 44px -12px rgba(37,211,102,.6);
}
.fab-wa svg{ fill:#fff; flex-shrink:0; }
.fab-wa-text{ white-space:nowrap; }
.fab-wa:hover{ background: linear-gradient(135deg, #128C7E, #075E54); color:#fff; transform: scale(1.04); }

/* ====================================================================
   RESPONSIVE para módulos
==================================================================== */
@media (max-width: 1024px){
  .filo-grid{ grid-template-columns: 1fr; }
  .filo-img{ max-width: 480px; margin: 0 auto; }
  .team-hero, .team-hero.alt{ grid-template-columns: 1fr; }
  .team-hero.alt figure{ order: 0; }
  .team-gallery{ grid-template-columns: repeat(2, 1fr); }
  .contact-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .nav-cta-wa{ display:none; }
  .fab-wa{ height:54px; padding: 0 1rem 0 .7rem; }
  .fab-wa-text{ display:none; }
  .fab-wa{ width:54px; padding:0; justify-content:center; }
  .team-gallery{ grid-template-columns: 1fr; }
  .team-body{ padding: 2rem 1.5rem; }
}

/* Footer creds */
.footer-creds{
  max-width: 1280px; margin: 1.4rem auto 0; padding: 1.4rem 0; border-top: 1px solid rgba(255,255,255,.08);
  display:grid; gap:.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.footer-creds span{ font-size: .76rem; color: rgba(255,255,255,.55); }
.footer-creds strong{ color: var(--rose); }

/* ====================================================================
   LANDING SCROLL — quitar paginas tipo SPA, mostrar todo
==================================================================== */
.page, .page-active{ display:block !important; padding-top: 0; }
.hero-landing{ min-height: 100vh; min-height: 100svh; padding-top: 0; }

/* ====================================================================
   MIRIAM — la estrella
==================================================================== */
.myriam-hero{
  padding: clamp(4rem,8vw,7rem) clamp(1.2rem,5vw,5rem);
  background: linear-gradient(135deg, var(--bone) 0%, var(--cream) 60%, rgba(233,201,209,.5) 100%);
  position: relative; overflow: hidden;
}
.myriam-hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 85% 15%, rgba(201,138,160,.25), transparent 45%),
    radial-gradient(circle at 5% 90%, rgba(110,142,90,.2), transparent 45%);
  pointer-events:none;
}
.myriam-grid{
  display:grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 1280px; margin: 0 auto;
  align-items: center; position:relative; z-index:1;
}
.myriam-photo{
  margin: 0; aspect-ratio: 4/5;
  border-radius: 24px; overflow:hidden;
  box-shadow: 0 30px 80px -20px rgba(142,77,99,.4);
  position: relative;
  border: 4px solid rgba(255,255,255,.6);
}
.myriam-photo img{ width:100%; height:100%; object-fit: cover; transition: transform 1.6s var(--easing); }
.myriam-photo:hover img{ transform: scale(1.06); }
.myriam-stamp{
  position: absolute; top: 1.4rem; left: 1.4rem;
  background: linear-gradient(135deg, var(--rose-deep), var(--rose-ink));
  color: #fff;
  padding: .5rem 1rem .5rem .8rem;
  border-radius: 999px;
  display: flex; align-items: center; gap: .4rem;
  font-size: .72rem; letter-spacing:.2em; text-transform: uppercase; font-weight:700;
  box-shadow: 0 10px 24px -6px rgba(142,77,99,.5);
}
.myriam-stamp svg{ fill: #FFD27A; }
.myriam-body h2{
  font-size: clamp(2rem, 3vw + .8rem, 3.4rem);
  color: var(--ink); line-height: 1.05; margin-bottom: .4rem;
}
.myriam-sub{
  font-family: var(--serif); font-style: italic;
  font-size: 1.15rem; color: var(--rose-ink); margin: 0 0 1.4rem;
}
.myriam-body p{ color: var(--ink-soft); line-height: 1.75; margin-bottom: 1rem; font-size: 1rem; }
.myriam-body em{ color: var(--rose-ink); font-style: italic; }
.myriam-body blockquote{
  border-left: 3px solid var(--rose-deep);
  padding: .6rem 0 .6rem 1.4rem;
  margin: 1.5rem 0 .5rem;
  font-family: var(--serif); font-style: italic;
  font-size: 1.25rem; color: var(--ink); line-height: 1.5;
  background: linear-gradient(90deg, rgba(233,201,209,.3), transparent);
}
.myriam-credit{
  font-size: .85rem !important; color: var(--muted) !important;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 0 !important;
}

/* Botón ghost dark para fondo claro */
.btn-ghost.btn-ghost-dark{
  border-color: var(--rose-ink); color: var(--rose-ink);
  display: inline-flex; align-items:center; gap:.4rem;
}
.btn-ghost.btn-ghost-dark:hover{ background: var(--rose-ink); color:#fff; }
.btn-ghost.btn-ghost-dark svg{ fill: currentColor; }

/* ====================================================================
   DIFERENCIADORES (Por qué Vitta)
==================================================================== */
.diff{
  padding: clamp(4rem,7vw,6rem) clamp(1.2rem,4vw,4rem);
  background: var(--bone);
}
.diff-head{ text-align:center; max-width: 780px; margin: 0 auto 3rem; }
.diff-grid{
  display:grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 1280px; margin: 0 auto;
}
.diff-card{
  background: linear-gradient(160deg, var(--bone), var(--cream));
  border: 1px solid rgba(142,77,99,.15);
  border-radius: var(--radius);
  padding: 2rem 1.6rem;
  text-align: center;
  transition: all .4s var(--easing);
  position: relative; overflow: hidden;
}
.diff-card::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, transparent 60%, rgba(201,138,160,.12));
  opacity: 0; transition: opacity .4s;
}
.diff-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(201,138,160,.4); }
.diff-card:hover::before{ opacity: 1; }
.diff-ico{
  font-size: 2.4rem;
  width: 70px; height:70px;
  margin: 0 auto 1.2rem;
  display: grid; place-items:center;
  background: linear-gradient(135deg, var(--rose-deep), var(--rose-ink));
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 12px 30px -8px rgba(142,77,99,.4);
}
.diff-card h3{
  font-family: var(--sans); font-weight: 600; font-size: 1rem;
  letter-spacing: .04em; color: var(--ink); margin-bottom: .5rem;
}
.diff-card p{ font-size:.85rem; color: var(--ink-soft); margin: 0; line-height: 1.6; }

/* ====================================================================
   DR. RESPALDO — sección más pequeña, secundaria
==================================================================== */
.dr-respaldo{
  padding: clamp(3rem,6vw,5rem) clamp(1.2rem,4vw,4rem);
  background: var(--cream);
}
.dr-grid{
  display:grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem,5vw,4rem);
  max-width: 1180px; margin: 0 auto;
  align-items: center;
}
.dr-body h2{ font-size: clamp(1.6rem, 2vw + .6rem, 2.4rem); color: var(--ink); }
.dr-sub{
  font-family: var(--serif); font-style: italic;
  color: var(--rose-ink); font-size: 1.05rem;
  margin: .3rem 0 1.3rem;
}
.dr-body p{ color: var(--ink-soft); line-height: 1.7; margin-bottom: 1.5rem; }
.dr-creds{
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .55rem;
  background: var(--bone); border-radius: 14px; padding: 1.2rem 1.4rem;
  border: 1px solid rgba(142,77,99,.15);
}
.dr-creds li{ font-size:.88rem; color: var(--ink-soft); display:flex; gap:.8rem; }
.dr-creds strong{
  color: var(--rose-ink); font-weight:600;
  letter-spacing: .04em; text-transform: uppercase; font-size:.74rem;
  min-width: 130px;
}
.dr-photo{ margin: 0; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; }
.dr-photo img{ width:100%; height:100%; object-fit: cover; transition: transform 1.4s var(--easing); }
.dr-photo:hover img{ transform: scale(1.04); }

/* ====================================================================
   TESTIMONIOS — con estrellas
==================================================================== */
.test .stars{
  color: var(--rose-deep); font-size: 1rem; letter-spacing:.15em;
  margin-bottom: .6rem;
}
.testimonios{ background: linear-gradient(180deg, var(--bone), var(--cream)); }

/* ====================================================================
   TRIPLE CTA — WhatsApp · Llamar · Mapa
==================================================================== */
.triple-cta{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  max-width: 1180px; margin: 0 auto 2rem;
}
.cta-card{
  display:flex; align-items:center; gap: 1rem;
  padding: 1.5rem 1.6rem;
  border-radius: var(--radius);
  text-align: left;
  transition: all .35s var(--easing);
  color: #fff !important;
  box-shadow: 0 14px 36px -14px rgba(43,31,34,.3);
}
.cta-card:hover{ transform: translateY(-5px); box-shadow: 0 22px 50px -16px rgba(43,31,34,.45); color:#fff !important; }
.cta-card svg{ fill: #fff; flex-shrink: 0; }
.cta-card div{ flex: 1; }
.cta-card strong{ display: block; font-family: var(--serif); font-size: 1.4rem; font-weight: 600; line-height: 1.1; }
.cta-card span{ display:block; font-size: .9rem; opacity: .94; margin-top: .15rem; }
.cta-card small{ display:block; font-size: .72rem; opacity: .8; margin-top: .25rem; letter-spacing: .12em; text-transform: uppercase; }
.cta-wa{ background: linear-gradient(135deg, #25D366, #128C7E); }
.cta-call{ background: linear-gradient(135deg, var(--rose-deep), var(--rose-ink)); }
.cta-map{ background: linear-gradient(135deg, var(--leaf), var(--leaf-deep)); }

/* ====================================================================
   MAP FRAME — Google Maps
==================================================================== */
.map-frame{
  max-width: 1180px; margin: 0 auto 3rem;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 4px solid var(--bone);
}
.map-frame iframe{ display: block; }

/* ====================================================================
   CONTACT FORM WRAP — form + lateral
==================================================================== */
.contact-form-wrap{
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 2rem; max-width: 1180px; margin: 0 auto;
  align-items: flex-start;
}
.cont-form{
  background: var(--bone); padding: 2.4rem 2.2rem;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  display: grid; gap: 1rem;
  border: 1px solid rgba(255,255,255,.5);
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-side{
  display: grid; gap: .8rem;
}

/* ====================================================================
   SEO ZONAS
==================================================================== */
.seo-zonas{
  background: var(--ink); color: rgba(255,255,255,.75);
  padding: 3rem clamp(1.2rem,4vw,4rem);
}
.seo-zonas-inner{
  max-width: 1280px; margin: 0 auto; text-align: center;
}
.seo-zonas h3{
  color: #fff; font-family: var(--serif); font-size: 1.5rem;
  margin-bottom: .6rem;
}
.seo-zonas p{ color: rgba(255,255,255,.65); font-size:.92rem; margin: 0 0 1.5rem; }
.zone-list{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center;
}
.zone-list li{
  font-size: .76rem; padding: .5rem .9rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  letter-spacing: .04em;
  transition: all .3s;
}
.zone-list li:hover{ background: rgba(201,138,160,.15); border-color: rgba(201,138,160,.4); color: var(--rose); }

/* ====================================================================
   CTA Llamar grande
==================================================================== */
.btn-call-big{
  display:inline-flex; align-items:center; gap:.6rem;
  background: var(--bone);
  color: var(--rose-ink) !important;
  padding: 1rem 1.8rem;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  border-radius: 999px;
  border: 2px solid var(--bone);
  box-shadow: 0 12px 30px -10px rgba(43,31,34,.5);
  transition: all .35s var(--easing);
}
.btn-call-big svg{ fill: var(--rose-ink); }
.btn-call-big:hover{ background: var(--rose-ink); color:#fff !important; border-color: var(--rose-ink); transform: translateY(-3px); }
.btn-call-big:hover svg{ fill: #fff; }

/* ====================================================================
   FAB Llamar (debajo del WhatsApp)
==================================================================== */
.fab-call{
  position: fixed; bottom: 5.8rem; right: 1.5rem; z-index: 998;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-deep), var(--rose-ink));
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 12px 30px -8px rgba(142,77,99,.6);
  transition: all .3s var(--easing);
}
.fab-call svg{ fill: #fff; }
.fab-call:hover{ transform: scale(1.1); color:#fff; box-shadow: 0 16px 40px -10px rgba(142,77,99,.7); }

/* Featured macro card */
.macro.featured-macro{
  border-color: rgba(201,138,160,.5);
  box-shadow: 0 22px 60px -22px rgba(201,138,160,.5);
}
.macro.featured-macro::before{
  content:"⭐ ESTRELLA"; position:absolute; top:.9rem; right:.9rem; z-index:2;
  font-size:.62rem; letter-spacing:.22em; font-weight:700;
  background: linear-gradient(135deg, var(--rose-deep), var(--rose-ink)); color: #fff;
  padding:.32rem .65rem; border-radius: 999px;
}

/* Responsive ajustes landing */
@media (max-width: 1024px){
  .myriam-grid{ grid-template-columns: 1fr; gap: 2rem; }
  .myriam-photo{ max-width: 480px; margin: 0 auto; aspect-ratio: 4/5; }
  .dr-grid{ grid-template-columns: 1fr; }
  .dr-photo{ order: -1; max-width: 380px; margin: 0 auto; }
  .triple-cta{ grid-template-columns: 1fr; }
  .contact-form-wrap{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
}

/* ====================================================================
   HERO SERVICES STRIP — etiquetas de servicios bajo el H1
==================================================================== */
.hero-services-strip{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: .55rem .8rem;
  margin: 1.4rem auto 1.8rem;
  max-width: 720px;
  padding: 0 1rem;
}
.hero-services-strip span{
  font-size: .82rem;
  color: rgba(255,255,255,.94);
  letter-spacing: .04em;
  font-weight: 400;
}
.hero-services-strip span:not(.dot){
  background: rgba(255,255,255,.13);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: .4rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  white-space: nowrap;
}
.hero-services-strip .dot{
  display: none;
}

/* ====================================================================
   BOTTOM ACTION BAR — móvil tipo app
==================================================================== */
.bottom-bar{
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: rgba(255,253,252,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(142,77,99,.15);
  padding: .55rem .6rem calc(.55rem + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 28px -10px rgba(43,31,34,.25);
}
.bb-btn{
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .55rem .3rem;
  font-size: .68rem; letter-spacing: .04em; font-weight: 600;
  color: var(--ink-soft);
  border-radius: 14px;
  transition: all .25s var(--easing);
}
.bb-btn:active{ transform: scale(.94); }
.bb-btn svg{ fill: currentColor; transition: transform .25s; }
.bb-wa{ color: #128C7E; }
.bb-wa:hover, .bb-wa:active{ background: rgba(37,211,102,.12); color: #128C7E; }
.bb-call{ color: var(--rose-ink); }
.bb-call:hover, .bb-call:active{ background: rgba(201,138,160,.18); color: var(--rose-ink); }
.bb-map{ color: var(--leaf-deep); }
.bb-map:hover, .bb-map:active{ background: rgba(110,142,90,.14); color: var(--leaf-deep); }
.bb-services{ color: var(--ink-soft); }
.bb-services:hover, .bb-services:active{ background: rgba(43,31,34,.06); }

/* ====================================================================
   MENU MÓVIL TIPO APP — drawer fullscreen lateral
==================================================================== */
@media (max-width: 820px){
  .nav{ padding: .8rem 1rem; }
  .nav-cta-wa{ display:none; }
  .nav-burger{ display: flex; z-index: 1100; }

  /* Drawer fullscreen estilo app */
  .nav-links{
    position: fixed;
    inset: 0 0 0 auto;
    width: 88%; max-width: 380px;
    background: linear-gradient(160deg, var(--bone) 0%, var(--cream) 100%);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 6rem 1.8rem 2rem;
    gap: .25rem;
    transform: translateX(110%);
    transition: transform .42s cubic-bezier(.6,0,.2,1);
    box-shadow: -32px 0 80px -20px rgba(43,31,34,.45);
    z-index: 1099;
    overflow-y: auto;
  }
  .nav-links.is-open{ transform: none; }

  /* Backdrop blur cuando está abierto */
  .nav-links.is-open::before{
    content:""; position: fixed; inset: 0;
    background: rgba(43,31,34,.5);
    backdrop-filter: blur(4px);
    z-index: -1;
    width: 100vw; height: 100vh;
    margin-left: -100vw;
  }

  .nav-links a{
    color: var(--ink) !important;
    font-size: 1.05rem !important;
    letter-spacing: .04em !important;
    text-transform: none !important;
    font-family: var(--serif);
    font-weight: 500 !important;
    padding: 1.1rem 1.2rem !important;
    border-radius: 14px;
    border-bottom: 1px solid rgba(142,77,99,.08);
    display: flex; align-items: center; justify-content: space-between;
    transition: all .25s;
  }
  .nav-links a::after{ display: none; }
  .nav-links a::before{
    content:"→"; color: var(--rose-deep); margin-left: auto; opacity: .5; font-size: .9rem;
    order: 2;
  }
  .nav-links a:hover, .nav-links a:active{
    background: linear-gradient(135deg, rgba(233,201,209,.6), rgba(201,138,160,.15));
    color: var(--rose-ink) !important;
  }

  /* CTAs grandes dentro del drawer */
  .nav-links::after{
    content: "";
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px dashed rgba(142,77,99,.25);
  }

  /* Dejar espacio inferior para bottom-bar */
  body{ padding-bottom: 72px; }
  .fab-wa, .fab-call{ display: none !important; }

  /* Mostrar bottom bar en mobile */
  .bottom-bar{ display: flex; gap: .3rem; }

  /* Burger animado */
  .nav-burger{
    width: 38px; height: 38px;
    background: var(--bone);
    border-radius: 50%;
    align-items:center; justify-content:center;
    box-shadow: 0 4px 12px -4px rgba(142,77,99,.3);
  }
  .nav-burger span{
    width: 18px; background: var(--rose-ink);
  }
  .nav-burger.is-open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
  .nav-burger.is-open span:nth-child(2){ opacity: 0; }
  .nav-burger.is-open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

  /* Hero ajustes mobile */
  .hero-mod, .hero-landing{ min-height: 92vh; }
  .hero-content{ padding: 6rem 1.2rem 5rem; }
  .hero-title .line{ display: block; }
  .hero-services-strip{ font-size:.75rem; gap: .4rem; max-width: 100%; }
  .hero-services-strip span:not(.dot){ font-size:.75rem; padding: .35rem .7rem; }
  .hero-ctas{ flex-direction: column; gap: .8rem; align-items: center; }
  .hero-ctas .btn{ width: 100%; max-width: 320px; justify-content: center; }
  .hero-stats{ gap: 1rem; }
  .hero-stats strong{ font-size: 1.6rem; }
  .hero-stats .sep{ display:none; }

  /* Macro mobile — stack vertical */
  .macro{ grid-template-columns: 1fr; }
  .macro-img img{ aspect-ratio: 16/10; }
  .macro-body{ padding: 1.4rem 1.4rem 1.6rem; }

  /* Diff cards mobile */
  .diff-grid{ grid-template-columns: 1fr 1fr; }
  .diff-card{ padding: 1.5rem 1rem; }

  /* Avales mobile */
  .avales-grid{ grid-template-columns: 1fr 1fr; gap: .8rem; }
  .aval{ padding: 1.4rem 1.1rem; }

  /* Triple CTA mobile */
  .triple-cta{ grid-template-columns: 1fr; gap: .8rem; }

  /* Map */
  .map-frame iframe{ height: 320px; }

  /* Section heads */
  .section-head{ margin-bottom: 2.5rem; padding: 0 .8rem; }

  /* Myriam mobile */
  .myriam-grid{ gap: 1.5rem; }
  .myriam-body h2{ font-size: 1.9rem; }
  .myriam-body blockquote{ font-size: 1.1rem; }

  /* Dr respaldo mobile */
  .dr-grid{ gap: 1.5rem; }

  /* Test cards */
  .test{ min-width: 80vw; }

  /* Form */
  .cont-form{ padding: 1.8rem 1.4rem; }
  .form-row{ grid-template-columns: 1fr; }

  /* SEO zonas */
  .seo-zonas h3{ font-size: 1.2rem; }
}

@media (max-width: 480px){
  .diff-grid{ grid-template-columns: 1fr; }
  .hero-title{ font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .nav-name{ font-size: 1.1rem; }
  .nav-name em{ display:none; }
}

/* ====================================================================
   ★★★ UPGRADE PREMIUM MOBILE-FIRST ★★★
==================================================================== */

/* HERO BG responsive: foto del Dr. con dermapen — vertical en mobile, horizontal en desktop */
.hero-bg-responsive{
  background-image: url('../img/reales/dr-dermapen-2.jpg');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
@media (max-width: 820px){
  .hero-bg-responsive{
    background-image: url('../img/reales/dr-dermapen-1.jpg');
    background-position: center 25%;
  }
}

/* Velo cinemático: gradiente más cinematográfico */
.hero-veil-cinema{
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 50% 70%, transparent, rgba(20,8,15,.55) 70%),
    linear-gradient(180deg, rgba(15,8,12,.55) 0%, rgba(15,8,12,.30) 28%, rgba(15,8,12,.78) 100%),
    linear-gradient(135deg, rgba(142,77,99,.30), transparent 55%);
}

/* Hero Trust pills (sello flotante) */
.hero-trust{
  position: absolute; top: 5.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: .5rem; z-index: 5;
  flex-wrap: wrap; justify-content: center;
  padding: 0 1rem;
}
.trust-pill{
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .85rem;
  background: rgba(255,253,252,.22);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  font-size: .72rem;
  color: #fff;
  letter-spacing: .04em;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.4);
  white-space: nowrap;
}
.trust-pill svg{ fill: #FFD27A; flex-shrink: 0; }
.trust-pill strong{ font-weight: 700; letter-spacing: .08em; }
.trust-pill.rating .stars-mini{ color: #FFD27A; letter-spacing: .04em; font-size: .7rem; }

/* Tipografía afinada del hero */
.hero-title{
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.018em;
  line-height: 1.02;
  font-feature-settings: "ss01", "liga", "dlig";
  text-shadow: 0 4px 28px rgba(0,0,0,.35);
}
.hero-title em{ font-style: italic; color: var(--rose); font-weight: 400; }
.hero-title strong{ font-weight: 500; color: #fff; }

.hero-kicker{
  display: inline-block;
  padding: .35rem 1rem;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  font-weight: 500;
  margin-bottom: 1.6rem;
}

.hero-sub{
  font-size: 1rem;
  line-height: 1.62;
  color: rgba(255,255,255,.86);
  font-weight: 300;
  max-width: 580px;
  margin-left: auto; margin-right: auto;
}
.hero-sub strong{ color: #fff; font-weight: 500; }

/* ====================================================================
   CARRUSEL SERVICIOS swipeable mobile
==================================================================== */
.macro-wrap{ position: relative; }
.macro-dots{
  display: none;
  justify-content: center; gap: .5rem;
  margin: 1.4rem auto 0;
  padding: 0 1rem;
}
.macro-dots .dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(142,77,99,.25);
  transition: all .35s var(--easing);
  border: 0; padding: 0;
  cursor: pointer;
}
.macro-dots .dot.active{
  width: 28px;
  background: var(--rose-ink);
}

@media (max-width: 820px){
  /* Carrusel horizontal scroll-snap */
  .macro-wrap{
    margin: 0 -1.2rem; /* full-bleed */
    padding-left: 1.2rem;
  }
  .macro-grid{
    display: flex !important;
    gap: 1rem;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1.2rem;
    padding: .5rem 1.2rem 1.5rem 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .macro-grid::-webkit-scrollbar{ display: none; }
  .macro{
    flex: 0 0 86%;
    min-width: 86%;
    scroll-snap-align: start;
    grid-template-columns: 1fr !important;
    border-radius: 22px;
    box-shadow: 0 22px 50px -22px rgba(43,31,34,.28);
  }
  .macro-img{ aspect-ratio: 16/11; }
  .macro-img img{ aspect-ratio: 16/11; }
  .macro-body{ padding: 1.4rem 1.4rem 1.5rem; gap: .55rem; }
  .macro h3{ font-size: 1.3rem; padding-right: 2.5rem; }
  .macro-num{ font-size: 2rem; top: 1rem; right: 1.2rem; }
  .macro-list{ font-size: .82rem; }
  .macro-list li{ font-size: .8rem; padding: .2rem 0; }

  .macro-dots{ display: flex; }
}

/* ====================================================================
   AVALES BENTO GRID (asimétrico tipo Apple)
==================================================================== */
@media (min-width: 821px){
  .avales-grid{
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "cofepris medico udg"
      "cofepris nutri  udg";
    gap: 1.2rem;
  }
  .aval:nth-child(1){ grid-area: cofepris; padding: 2.4rem 2rem; }
  .aval:nth-child(1) .aval-ico{ font-size: 3.2rem; }
  .aval:nth-child(1) h3{ font-size: 1.4rem; }
  .aval:nth-child(2){ grid-area: medico; }
  .aval:nth-child(3){ grid-area: udg; }
  .aval:nth-child(4){ grid-area: nutri; }
}

@media (max-width: 820px){
  .avales-grid{
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
  }
  .aval:nth-child(1){
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(201,138,160,.18), rgba(255,255,255,.05));
    border-color: rgba(201,138,160,.35);
  }
  .aval{ padding: 1.3rem 1rem; }
  .aval h3{ font-size: .92rem; }
  .aval p{ font-size: .76rem; }
  .aval code{ font-size: .7rem; }
}

/* ====================================================================
   TIPOGRAFÍA Y MICRO-DETALLES PREMIUM
==================================================================== */
body{
  font-feature-settings: "kern", "liga", "calt", "ss01";
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

h2{
  letter-spacing: -.012em;
  font-weight: 400;
}
h2 em{ font-weight: 500; }
h3{ letter-spacing: -.005em; }

/* Section heads más respirados en mobile */
@media (max-width: 820px){
  .section-head h2{ font-size: clamp(1.6rem, 6vw, 2.1rem); line-height: 1.15; }
  .section-head .eyebrow{ font-size: .65rem; letter-spacing: .3em; }
  .section-head p{ font-size: .9rem; }
  .myriam-body p{ font-size: .92rem; }
  .myriam-body blockquote{ font-size: 1.05rem; padding-left: 1rem; }
}

/* Botones touch feedback */
.btn, .card-wa, .cta-card, .bb-btn, .nav-cta, .fab-wa, .fab-call{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.btn:active, .card-wa:active, .cta-card:active{
  transform: scale(.97);
}

/* Smooth scroll global */
html{ scroll-behavior: smooth; scroll-padding-top: 80px; }

/* Imágenes con transición de carga premium */
img{ background: linear-gradient(135deg, rgba(233,201,209,.18), rgba(110,142,90,.08)); }
img[loading="lazy"]{ transition: opacity .5s var(--easing), filter .5s var(--easing); }
img[loading="lazy"]:not([data-loaded]){ opacity: 0; filter: blur(6px); }
img[loading="lazy"][data-loaded]{ opacity: 1; filter: none; }

/* Mobile padding seguro (notch) */
@supports (padding: env(safe-area-inset-top)){
  .nav{ padding-top: max(1.25rem, env(safe-area-inset-top)); padding-left: max(1.2rem, env(safe-area-inset-left)); padding-right: max(1.2rem, env(safe-area-inset-right)); }
  .hero-trust{ top: calc(5rem + env(safe-area-inset-top)); }
}

/* WhatsApp pulse animation refinada */
@keyframes waPulse{
  0%, 100%{ box-shadow: 0 16px 44px -12px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.45); }
  50%{ box-shadow: 0 16px 44px -12px rgba(37,211,102,.6), 0 0 0 14px rgba(37,211,102,0); }
}
.fab-wa-pulse{ animation: waPulse 2.4s ease-out infinite; }

/* Hero CTAs un poco más premium */
.hero-ctas .btn{ font-size: .8rem; }
.btn-wa-big{
  letter-spacing: .14em;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  position: relative; overflow: hidden;
}
.btn-wa-big::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25), transparent 70%);
  transform: translateX(-100%);
  transition: transform .9s var(--easing);
}
.btn-wa-big:hover::before{ transform: translateX(100%); }

/* Diff cards más refinadas mobile */
@media (max-width: 820px){
  .diff-grid{ grid-template-columns: 1fr 1fr; gap: .8rem; }
  .diff-card{ padding: 1.4rem .9rem; }
  .diff-ico{ width: 54px; height: 54px; font-size: 1.7rem; margin-bottom: .8rem; }
  .diff-card h3{ font-size: .85rem; }
  .diff-card p{ font-size: .75rem; }
}

/* Marquee más sutil */
.marquee{ padding: .85rem 0; }
.marquee-track span{ font-size: 1rem; }
@media (max-width: 820px){
  .marquee-track span{ font-size: .85rem; }
}

/* Hero Stats en glass cards */
.hero-stats{
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  padding: 1.2rem 1.5rem;
  display: inline-flex;
  margin-top: 2.5rem;
}
@media (max-width: 820px){
  .hero-stats{ padding: 1rem 1.2rem; gap: .8rem; }
  .hero-stats > div{ min-width: 60px; }
}

/* Hero kicker mejor en mobile */
@media (max-width: 820px){
  .hero-content{ padding: 7rem 1.2rem 6rem; }
  .hero-trust{ top: 4.5rem; gap: .35rem; }
  .trust-pill{ font-size: .65rem; padding: .35rem .7rem; }
}

/* Micro animación de entrada para títulos */
@keyframes titleIn{
  from{ opacity: 0; transform: translateY(20px) scale(.98); filter: blur(4px); }
  to{ opacity: 1; transform: none; filter: none; }
}
.hero-title .line{ animation: titleIn .9s var(--easing) both; }
.hero-title .line:nth-child(2){ animation-delay: .15s; }

/* CTA card premium hover */
.cta-card{ position: relative; overflow: hidden; }
.cta-card::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.18), transparent 50%);
  opacity:0; transition: opacity .3s;
  pointer-events: none;
}
.cta-card:hover::after{ opacity:1; }

/* Reseñas: stars con sombra suave */
.test .stars{
  text-shadow: 0 2px 8px rgba(201,138,160,.25);
}

/* Form inputs más refinados */
.field input, .field select, .field textarea{
  font-feature-settings: "ss01";
  -webkit-appearance: none;
  appearance: none;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--rose-ink);
  box-shadow: 0 0 0 4px rgba(201,138,160,.15);
}

/* Footer más refinado mobile */
@media (max-width: 720px){
  .footer-top{ grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2rem; }
  .footer-cols{ grid-template-columns: 1fr 1fr; }
  .footer-creds{ font-size: .72rem; }
}

/* ====================================================================
   GALERÍA — Carrusel horizontal universal (desktop + mobile)
==================================================================== */
.galeria-real{
  padding: clamp(4rem,7vw,6rem) 0;
  background: linear-gradient(180deg, var(--bone) 0%, var(--cream) 100%);
  position: relative; overflow: hidden;
}
.galeria-real .section-head{ padding: 0 clamp(1.2rem,4vw,4rem); }
.gallery-wrap{
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.2rem,4vw,4rem);
}
.gallery-track{
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: clamp(1.2rem, 4vw, 4rem);
  padding: .5rem 0 1.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.gallery-track::-webkit-scrollbar{ display: none; }

.gallery-card{
  flex: 0 0 calc((100% - 2rem) / 3);   /* 3 cards desktop */
  min-width: calc((100% - 2rem) / 3);
  aspect-ratio: 4/5;
  margin: 0;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: 0 18px 40px -20px rgba(43,31,34,.28);
  transition: transform .55s var(--easing), box-shadow .55s var(--easing);
  cursor: grab;
}
.gallery-card:active{ cursor: grabbing; }
.gallery-card img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--easing);
}
.gallery-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.gallery-card:hover img{ transform: scale(1.06); }
.gallery-card::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(20,8,15,.55) 100%);
  pointer-events: none;
}
.gallery-card figcaption{
  position: absolute; left: 1rem; bottom: 1rem; right: 1rem; z-index: 2;
  pointer-events: none;
}
.gal-tag{
  display: inline-block;
  background: rgba(255,253,252,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: .42rem .9rem;
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rose-ink);
  font-weight: 700;
  border: 1px solid rgba(142,77,99,.18);
  box-shadow: 0 8px 20px -8px rgba(43,31,34,.2);
}

/* Flechas desktop */
.gallery-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bone);
  color: var(--rose-ink);
  font-size: 1.8rem; font-weight: 600; line-height: 1;
  display: grid; place-items: center;
  border: 1px solid rgba(142,77,99,.18);
  box-shadow: 0 12px 28px -10px rgba(43,31,34,.3);
  cursor: pointer;
  transition: all .3s var(--easing);
}
.gallery-arrow:hover{
  background: var(--rose-ink); color: #fff;
  transform: translateY(-50%) scale(1.08);
}
.gallery-prev{ left: .5rem; }
.gallery-next{ right: .5rem; }

/* Dots */
.gallery-dots{
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin: .8rem auto 0;
}
.gallery-dots .dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(142,77,99,.22);
  border: 0; padding: 0; cursor: pointer;
  transition: all .3s var(--easing);
}
.gallery-dots .dot.active{
  width: 26px;
  background: var(--rose-ink);
}

/* Tablet: 2 cards */
@media (max-width: 1024px){
  .gallery-card{
    flex: 0 0 calc((100% - 1rem) / 2);
    min-width: calc((100% - 1rem) / 2);
  }
}

/* Mobile: 1.2 cards visibles (peek next) */
@media (max-width: 720px){
  .gallery-wrap{ padding: 0 0 0 1.2rem; }
  .gallery-track{ padding-right: 1.2rem; gap: .8rem; scroll-padding-left: 1.2rem; }
  .gallery-card{
    flex: 0 0 82%;
    min-width: 82%;
    aspect-ratio: 4/5;
    border-radius: 20px;
  }
  .gallery-arrow{ display: none; }   /* ocultar flechas, usar swipe */
  .gallery-dots{ padding: 0 1.2rem; }
}