/* =========================================================
   Daniela Manzini · Estética Avanzada
   Estilos globales (mobile first)
   ========================================================= */

/* ---------- Tokens de marca ---------- */
:root {
  /* Paleta (manual): 60% beige · 30% verde · ≤10% terracota */
  --verde: #385331;
  --verde-medio: #63886e;      /* línea secundaria del manual */
  --verde-claro: #dfe8df;      /* píldoras, como en historias */
  --verde-oscuro: #2a3f25;
  --crema: #f7f3e8;
  --crema-2: #efe9da;
  --blanco: #ffffff;
  --terracota: #ad592c;        /* SOLO botón principal de cada pantalla */
  --terracota-hover: #964b23;
  --texto: #2b3328;
  --texto-suave: #5d6659;

  /* Tipografías */
  --f-display: "Playfair Display", Georgia, serif;   /* títulos y cursivas */
  --f-body: "Montserrat", system-ui, sans-serif;     /* texto */
  --f-label: "Jost", "Futura", sans-serif;          /* etiquetas, como el logo */

  /* Bordes: un solo criterio en toda la web */
  --r-lg: 24px;   /* paneles e imágenes grandes */
  --r-md: 16px;   /* tarjetas */
  --r-pill: 999px;/* botones y etiquetas */

  --sombra: 0 18px 40px -24px rgba(42, 63, 37, .35);
  --header-h: 72px;
  --gutter: 20px;

  /* Textura de papel (como el fondo de las historias) */
  --papel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 500; line-height: 1.12; color: var(--verde); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

.container { width: 100%; max-width: 1240px; margin-inline: auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--verde); color: var(--crema); padding: 10px 16px; border-radius: var(--r-pill);
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; }

/* Fondos de sección: blanco por defecto, crema y verde solo donde se indique */
.bg-crema { background: var(--crema) var(--papel); }
.bg-verde { background: var(--verde); color: var(--crema); }

/* Estrella de cuatro puntas de la marca */
.star {
  display: inline-block; width: 14px; height: 14px; flex: none;
  background: currentColor;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-label); font-size: .78rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--terracota);
}
.eyebrow--light { color: var(--crema); opacity: .85; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 26px;
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  font-family: var(--f-body); font-size: .92rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s;
}
.btn:hover { transform: translateY(-1px); }
.btn--accent { background: var(--terracota); color: var(--blanco); }
.btn--accent:hover { background: var(--terracota-hover); }
.btn--green { background: var(--verde); color: var(--crema); }
.btn--green:hover { background: var(--verde-oscuro); }
.btn--ghost-light { border-color: rgba(247, 243, 232, .5); color: var(--crema); }
.btn--ghost-light:hover { background: rgba(247, 243, 232, .1); border-color: var(--crema); }

/* =========================================================
   CABECERA
   ========================================================= */
.header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: box-shadow .3s;
}
.header.is-scrolled { box-shadow: 0 1px 0 rgba(56, 83, 49, .12); }
.header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }

.header__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.header__brand { display: flex; flex-direction: column; line-height: 1.1; }
.header__name {
  font-family: var(--f-label); font-weight: 500; font-size: 1.02rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--verde);
}
.header__tag { font-family: var(--f-label); font-size: .74rem; letter-spacing: .08em; color: var(--verde-medio); }

/* Menú móvil */
.burger {
  display: grid; place-content: center; gap: 7px;
  width: 46px; height: 46px; border: 0; border-radius: var(--r-pill);
  background: var(--verde); cursor: pointer;
}
.burger span { display: block; width: 18px; height: 1.5px; background: var(--crema); transition: transform .3s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

.nav {
  position: fixed; inset: var(--header-h) 0 auto 0;
  display: flex; flex-direction: column; gap: 24px;
  padding: 28px var(--gutter) 36px;
  background: var(--blanco);
  border-bottom: 1px solid rgba(56, 83, 49, .12);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity .3s, transform .3s, visibility .3s;
}
.nav.is-open { transform: none; opacity: 1; visibility: visible; }
.nav__list { display: flex; flex-direction: column; gap: 4px; }
.nav__list a {
  display: block; padding: 10px 0;
  font-family: var(--f-display); font-size: 1.6rem; color: var(--verde); text-decoration: none;
}
.nav__cta { align-self: flex-start; }

/* =========================================================
   1. PORTADA
   ========================================================= */
.hero { padding: 8px 0 56px; }
.hero__grid { display: grid; gap: 12px; }

.hero__panel {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 40px 24px 32px;
  border-radius: var(--r-lg);
  background: var(--verde);
  color: var(--crema);
}
.hero__lines {
  position: absolute; z-index: -1;
  width: 420px; right: -170px; top: -90px;
  opacity: .22; transform: rotate(12deg);
  animation: flotar 14s ease-in-out infinite alternate;
}
@keyframes flotar { to { transform: rotate(18deg) translate(-12px, 14px); } }

.hero__title {
  display: flex; flex-direction: column; gap: 2px;
  margin: 18px 0 18px;
  color: var(--blanco);
  text-wrap: balance;
}
.hero__title-sans {
  font-family: var(--f-body); font-weight: 500;
  font-size: clamp(1.75rem, 7vw, 3rem); line-height: 1.15; letter-spacing: -.02em;
}
.hero__title em {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: clamp(2.4rem, 10vw, 4.4rem); line-height: 1.05; letter-spacing: -.01em;
}

.hero__text { max-width: 46ch; font-size: .98rem; color: rgba(247, 243, 232, .85); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero__actions .btn { flex: 1 1 auto; }

/* Contador */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 36px; padding-top: 22px;
  border-top: 1px solid rgba(247, 243, 232, .2);
}
.stats__item { display: flex; flex-direction: column; gap: 4px; padding-right: 8px; }
.stats__item + .stats__item { padding-left: 12px; border-left: 1px solid rgba(247, 243, 232, .2); }
.stats__num {
  display: flex; align-items: baseline; gap: 2px;
  font-family: var(--f-display); font-size: clamp(1.6rem, 6.4vw, 2.4rem); line-height: 1; color: var(--crema);
  font-variant-numeric: tabular-nums;
}
.stats__star { font-size: .55em; margin-left: 4px; color: #cfe0cc; }
.stats__label { font-size: .72rem; line-height: 1.35; color: rgba(247, 243, 232, .75); }

/* Foto */
.hero__media {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 4.4;
  background: var(--crema-2);
}
.hero__media > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
/* Velo verde de marca sobre la foto: suaviza el contraste con el panel verde */
.hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(56,83,49,.10) 0%, rgba(56,83,49,.22) 100%), rgba(99,136,110,.28);
  mix-blend-mode: multiply;
}
.hero__media .hero__badge { z-index: 2; }
.hero__badge {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: rgba(247, 243, 232, .94);
  font-size: .82rem; line-height: 1.3; color: var(--verde);
  box-shadow: var(--sombra);
}
.hero__badge img { flex: none; }
a.hero__badge { text-decoration: none; transition: background-color .25s, transform .25s; }
a.hero__badge:hover { background: var(--blanco); transform: translateY(-2px); }
.hero__badge-arrow { margin-left: auto; padding-left: 6px; color: var(--terracota); transition: transform .25s; }
a.hero__badge:hover .hero__badge-arrow { transform: translateX(4px); }

/* ---------- Títulos de sección: sans + cursiva (mismo criterio que la portada) ---------- */
.section-title, .about__title {
  display: flex; flex-direction: column; gap: 2px;
  text-wrap: balance;
}
.title-sans {
  font-family: var(--f-body); font-weight: 500; color: var(--verde);
  font-size: clamp(1.5rem, 5.6vw, 2.25rem); line-height: 1.15; letter-spacing: -.02em;
}
.section-title em, .about__title em {
  font-family: var(--f-display); font-style: italic; font-weight: 400; color: var(--verde);
  font-size: clamp(2.2rem, 8.4vw, 3.6rem); line-height: 1.05;
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding-bottom: 4px; border-bottom: 1px solid currentColor;
  font-weight: 600; font-size: .92rem; color: var(--verde); text-decoration: none;
}
.link-arrow span { color: var(--terracota); transition: transform .25s; }
.link-arrow:hover { color: var(--terracota); }
.link-arrow:hover span { transform: translateX(4px); }

/* =========================================================
   2. QUIÉN ESTÁ DETRÁS
   ========================================================= */
.about { padding-block: 72px; overflow: hidden; }
.about__grid { display: grid; gap: 64px; align-items: center; }

.about__media {
  position: relative; isolation: isolate;
  width: min(100%, 360px); margin-inline: auto;
  padding: 28px 0 0 28px;
}
.about__lines {
  position: absolute; z-index: -1;
  width: 116%; max-width: none; left: -12%; top: -9%;
  opacity: .9;
}
.about__frame { overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--sombra); transition: box-shadow .6s; }
.js-anim .about__frame:has(.about__photo:not(.rv-done):not(.rv-go)) { box-shadow: none; }
.about__frame { transition: box-shadow 1.2s ease; }
.about__photo {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top;
}
/* Zoom suave en las fotos al pasar el ratón */
.hero__media > img, .about__photo, .pro__media img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.hero__media:hover > img, .about__frame:hover .about__photo, .pro:hover .pro__media img { transform: scale(1.05); }
.about__years {
  position: absolute; left: 0; bottom: -22px;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px 14px 18px;
  border-radius: var(--r-md);
  background: var(--verde); color: var(--crema);
  box-shadow: var(--sombra);
}
.about__years-num { font-family: var(--f-display); font-size: 2.4rem; line-height: 1; white-space: nowrap; }
.about__years-txt { font-size: .74rem; line-height: 1.35; }

.about__content { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; min-width: 0; }
.about__text { display: flex; flex-direction: column; gap: 14px; max-width: 58ch; color: var(--texto-suave); }

.about__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.about__pills li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--verde-claro);
  font-size: .84rem; color: var(--verde);
}
.about__pills .star { width: 10px; height: 10px; }

/* =========================================================
   3. TRATAMIENTOS POR CATEGORÍA (bento)
   ========================================================= */
.services { padding-block: 72px; background: var(--blanco); }
.services__head { display: grid; gap: 18px; margin-bottom: 36px; }
.services__head .section-title { margin-top: 14px; }
.services__intro { max-width: 44ch; color: var(--texto-suave); }

.bento { display: grid; gap: 12px; }
.bento__item { min-width: 0; }

.card {
  position: relative; overflow: hidden; isolation: isolate;
  height: 100%; min-height: 300px;
  display: flex; align-items: flex-end;
  border-radius: var(--r-lg);
}
.card__body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  width: 100%; padding: 24px;
}
.card__count {
  font-family: var(--f-label); font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
}
.card__title { font-family: var(--f-body); font-weight: 600; font-size: 1.45rem; letter-spacing: -.01em; color: inherit; }
.card__text { max-width: 36ch; font-size: .9rem; line-height: 1.5; }
.card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 6px; }
.card__btn {
  margin-top: 6px;
  padding: 10px 18px; min-height: 42px;
  border: 0; border-radius: var(--r-pill);
  font: 600 .84rem var(--f-body); cursor: pointer;
  transition: background-color .25s, transform .25s;
}
.card__actions .card__btn { margin-top: 0; }
.card__btn:hover { transform: translateY(-1px); }
.card__link { font-weight: 600; font-size: .86rem; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.card__link span { display: inline-block; transition: transform .25s; }
.card__link:hover span { transform: translateX(4px); }

/* Tarjetas con foto */
.card--photo { color: var(--blanco); background: var(--verde-oscuro); }
.card--photo > img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.card--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(42,63,37,0) 30%, rgba(42,63,37,.82) 100%);
}
.card--photo:hover > img { transform: scale(1.04); }
.card--photo .card__text { color: rgba(255,255,255,.88); }
.card--photo .card__btn { background: var(--crema); color: var(--verde); }
.card--photo .card__btn:hover { background: var(--blanco); }

/* Tarjetas sin foto: con líneas de la marca */
.card--plain { min-height: 240px; }
.card__lines {
  position: absolute; z-index: -1; pointer-events: none;
  width: 300px; max-width: none; right: -150px; top: -175px;
}
.card--mint { background: var(--verde-claro); color: var(--verde); }
.card--mint .card__lines { opacity: .55; }
.card--mint .card__text { color: var(--texto-suave); }
.card--mint .card__btn { background: var(--verde); color: var(--crema); }
.card--mint .card__btn:hover { background: var(--verde-oscuro); }
.card--green { background: var(--verde); color: var(--crema); }
.card--green .card__lines { opacity: .3; }
.card--green .card__text { color: rgba(247,243,232,.82); }
.card--green .card__btn { background: var(--crema); color: var(--verde); }


/* Tarjeta entera como enlace (faciales) */
.card--link { text-decoration: none; }
.card--link .card__btn { display: inline-flex; align-items: center; gap: 8px; }
.card--link .card__btn span { transition: transform .25s; }
.card--link:hover .card__btn span { transform: translateX(4px); }
.card--link:focus-visible { outline-offset: 4px; }
a.card__btn { display: inline-flex; align-items: center; text-decoration: none; }
.sheet__list li.sheet__group {
  padding: 18px 0 4px; border-bottom: 0;
  font-family: var(--f-label); font-size: .74rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--verde-medio);
}

/* Ventana con la lista (hoja inferior en móvil) */
.sheet {
  width: 100%; max-width: 100%; max-height: 86vh;
  margin: auto 0 0; padding: 0;
  border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--blanco); color: var(--texto);
  box-shadow: 0 -20px 60px -20px rgba(42,63,37,.4);
}
.sheet[open] { display: flex; flex-direction: column; animation: subir .35s cubic-bezier(.2,.7,.2,1); }
.sheet::backdrop { background: rgba(42,63,37,.45); backdrop-filter: blur(3px); }
@keyframes subir { from { transform: translateY(24px); opacity: 0; } }
.sheet__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px 16px; border-bottom: 1px solid var(--verde-claro);
}
.sheet__head h3 { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.7rem; }
.sheet__close {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--verde-claro); color: var(--verde); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.sheet__list { overflow-y: auto; padding: 8px 24px; }
.sheet__list li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 0; border-bottom: 1px solid #edf0ea;
}
.sheet__list li:last-child { border-bottom: 0; }
.sheet__list strong { font-weight: 600; color: var(--verde); }
.sheet__list span { font-size: .88rem; color: var(--texto-suave); }
.sheet__foot {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 16px 24px calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--verde-claro);
}
.sheet__foot .btn { flex: 1 1 auto; }

/* =========================================================
   4. TRATAMIENTOS DESTACADOS
   ========================================================= */
.featured { padding-block: 72px; }
.featured__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.featured__head .section-title { margin-top: 14px; }

/* Móvil: carrusel deslizable; escritorio: 3 columnas */
.featured__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%;
  gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 16px;
  scrollbar-width: none;
}
.featured__list::-webkit-scrollbar { display: none; }
.featured__list > li { scroll-snap-align: start; min-width: 0; }

.feat {
  display: flex; flex-direction: column; height: 100%;
  padding: 10px;
  border-radius: var(--r-lg);
  background: var(--blanco);
  text-decoration: none; color: var(--texto);
  box-shadow: 0 1px 0 rgba(56,83,49,.06);
  transition: transform .35s, box-shadow .35s;
}
.feat:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.feat__media { position: relative; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 4 / 3; }
.feat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.feat:hover .feat__media img { transform: scale(1.05); }
.feat__tag {
  position: absolute; left: 12px; top: 12px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--verde-claro); color: var(--verde);
  font-size: .74rem; font-weight: 600;
}
.feat__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px 10px 10px; flex: 1; }
.feat__title {
  font-family: var(--f-label); font-weight: 500; font-size: .95rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--verde);
}
.feat__text { margin-top: 6px; font-size: .88rem; line-height: 1.5; color: var(--texto-suave); }
.feat__arrow {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(56,83,49,.3); color: var(--verde);
  transition: background-color .3s, color .3s, border-color .3s;
}
.feat:hover .feat__arrow { background: var(--verde); border-color: var(--verde); color: var(--crema); }

/* =========================================================
   5. TU PRIMERA VISITA
   ========================================================= */
.visit { padding-block: 72px; background: var(--blanco); }
.visit__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 40px; }
.visit__head .section-title { align-items: center; margin-top: 14px; }

.visit__list { display: grid; }
.visit__item {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 28px 8px;
}
.visit__item + .visit__item { border-top: 1px solid var(--verde-claro); }
.visit__icon {
  width: 46px; height: 46px; margin-bottom: 6px;
  fill: none; stroke: var(--verde); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.visit__title { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.6rem; }
.visit__item p { max-width: 32ch; font-size: .92rem; color: var(--texto-suave); }

/* =========================================================
   6. OPINIONES
   ========================================================= */
.reviews { position: relative; overflow: hidden; isolation: isolate; padding-block: 72px; }
.reviews__lines {
  position: absolute; z-index: -1; pointer-events: none;
  width: 560px; max-width: none; left: -260px; bottom: -280px; opacity: .18;
}
.reviews__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.reviews__head .section-title { margin-top: 14px; }
.section-title--light .title-sans, .section-title--light em { color: var(--blanco); }

.reviews__score { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 12px; }
.reviews__num { grid-row: span 2; font-family: var(--f-display); font-size: 3.2rem; line-height: 1; color: var(--blanco); }
.reviews__stars { color: #e7d9a8; letter-spacing: .12em; }
.reviews__src { font-size: .78rem; color: rgba(247,243,232,.75); }

.reviews__draft {
  display: inline-block; margin-bottom: 20px; padding: 4px 12px; border-radius: var(--r-pill);
  border: 1px dashed rgba(247,243,232,.5); font-size: .74rem; color: rgba(247,243,232,.8);
}

.reviews__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px;
  scrollbar-width: none;
}
.reviews__list::-webkit-scrollbar { display: none; }
.review {
  scroll-snap-align: start; min-width: 0;
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px; border-radius: var(--r-lg);
  background: var(--crema) var(--papel); color: var(--texto);
}
.review__top { display: flex; align-items: center; gap: 12px; }
.review__avatar {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--verde-claro); color: var(--verde);
  font-family: var(--f-display); font-size: 1.2rem;
}
.review__name { font-weight: 600; color: var(--verde); line-height: 1.2; }
.review__stars { font-size: .82rem; letter-spacing: .1em; color: #b8964a; }
.review__text { font-size: .93rem; line-height: 1.6; color: var(--texto-suave); }
/* Reseñas largas: se muestran 4 líneas y "Leer más" despliega el resto */
.reviews__list { align-items: start; }
.review.is-clamped .review__text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.review__more {
  align-self: flex-start; margin-top: -8px; padding: 0 0 2px; border: 0; border-bottom: 1px solid currentColor;
  background: none; font: 600 .82rem var(--f-body); color: var(--verde); cursor: pointer;
}
.review__more[hidden] { display: none; }

.reviews__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; }
.dots { display: flex; gap: 8px; }
.dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--r-pill);
  background: rgba(247,243,232,.35); cursor: pointer; transition: width .3s, background-color .3s;
}
.dots button.is-active { width: 24px; background: var(--crema); }
.link-arrow--light { color: var(--crema); }

/* =========================================================
   7. PROFESIONALES QUE RECOMENDAMOS
   ========================================================= */
.pros { padding-block: 72px; background: var(--blanco); }
.pros__grid { display: grid; gap: 28px; }
.pros__intro { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pros__intro > p:last-child { max-width: 44ch; color: var(--texto-suave); }

.pros__track { display: contents; }
.pros__dots, .visit__dots { display: none; }
.dots--dark button { background: var(--verde-claro); }
.dots--dark button.is-active { background: var(--verde); }
.pro { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pro__media { position: relative; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 3 / 4; background: var(--crema-2); }
.pro__media img { width: 100%; height: 100%; object-fit: cover; }
.pro__tag {
  position: absolute; left: 12px; bottom: 12px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.92); color: var(--verde);
  font-size: .74rem; font-weight: 600;
}
.pro__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pro__name { font-family: var(--f-body); font-weight: 600; font-size: 1.15rem; }
.pro__text { font-size: .9rem; color: var(--texto-suave); max-width: 38ch; }
.pro .link-arrow { margin-top: 6px; font-size: .86rem; }

/* =========================================================
   8. RESERVA
   ========================================================= */
.booking { padding-block: 56px; }
.booking__panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 28px;
  padding: 36px 20px 20px;
  border-radius: var(--r-lg);
  background: var(--verde); color: var(--crema);
}
.booking__lines { position: absolute; z-index: -1; width: 520px; max-width: none; right: -240px; top: -200px; opacity: .2; }
.booking__intro { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding-inline: 4px; }
.booking__intro .section-title { margin-top: -4px; }
.booking__intro > p { max-width: 42ch; color: rgba(247,243,232,.85); }
.booking__alt { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 8px; }
.booking__alt li { display: flex; flex-direction: column; gap: 2px; }
.booking__label { font-size: .78rem; color: rgba(247,243,232,.7); }
.booking__alt a { font-weight: 600; color: var(--blanco); text-decoration: none; border-bottom: 1px solid rgba(247,243,232,.4); align-self: flex-start; }
.booking__alt a:hover { border-color: var(--blanco); }

.booking__widget {
  min-height: 360px; display: grid;
  border-radius: var(--r-md);
  background: var(--blanco); color: var(--texto);
  overflow: hidden;
}
.booking__widget iframe { width: 100%; height: 640px; border: 0; }
.booking__placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 32px 24px; text-align: center;
}
.booking__placeholder p { max-width: 30ch; color: var(--texto-suave); }
.booking__fallback { font-size: .84rem; color: var(--verde); }

/* =========================================================
   9. PREGUNTAS FRECUENTES
   ========================================================= */
.faq { padding-block: 72px; background: var(--blanco); }
.faq__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 36px; }
.faq__head .section-title { align-items: center; margin-top: 14px; }
.faq__list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin-inline: auto; }
.faq__item { border-radius: var(--r-md); background: var(--crema); transition: background-color .3s; }
.faq__item[open] { background: var(--blanco); box-shadow: 0 0 0 1px var(--verde-claro), var(--sombra); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 18px 18px 22px;
  font-weight: 600; font-size: .96rem; color: var(--verde);
  cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--blanco); color: var(--verde); font-size: 1.2rem; font-weight: 400;
  transition: transform .3s, background-color .3s;
}
.faq__item[open] summary::after { transform: rotate(45deg); background: var(--verde-claro); }
.faq__item p { padding: 0 22px 20px; max-width: 62ch; color: var(--texto-suave); }

/* =========================================================
   10. NEWSLETTER (como la historia "todo lo nuevo")
   ========================================================= */
.news { position: relative; overflow: hidden; isolation: isolate; padding-block: 80px; }
.news__lines { position: absolute; z-index: -1; pointer-events: none; max-width: none; }
.news__lines--a { width: 230px; right: -140px; top: -120px; transform: rotate(10deg); }
.news__lines--b { width: 230px; left: -150px; bottom: -160px; transform: rotate(200deg); }
.news__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 760px; }
.news__title { display: flex; flex-direction: column; gap: 4px; font-family: var(--f-body); font-weight: 400; }
.news__title > span { font-size: clamp(1.6rem, 6vw, 2.6rem); line-height: 1.2; letter-spacing: -.01em; color: var(--verde); }
.news__title strong { font-weight: 600; }
.news__title em { font-family: var(--f-display); font-style: italic; font-size: clamp(2.6rem, 10vw, 4.4rem); line-height: 1.05; color: var(--verde); }
.news__text { max-width: 46ch; color: var(--verde); }

/* =========================================================
   11. UBICACIÓN Y CONTACTO
   ========================================================= */
.contact { padding-block: 72px; background: var(--blanco); }
.contact__grid { display: grid; gap: 36px; }
.contact__info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.contact__info .section-title { margin-bottom: 14px; }
.contact__list { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0; }
.contact__list > div { padding-top: 14px; border-top: 1px solid var(--verde-claro); min-width: 0; }
.contact__list dt {
  margin-bottom: 4px;
  font-family: var(--f-label); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--verde-medio);
}
.contact__list dd { margin: 0; color: var(--texto); overflow-wrap: anywhere; }
.contact__list a { color: var(--verde); font-weight: 500; }
.contact__route { display: none; }
.contact__lead { margin: -6px 0 6px; color: var(--texto-suave); }
.contact__lead a { color: var(--verde); font-weight: 600; white-space: nowrap; }
.contact__list dd { font-size: .94rem; }
.contact__list a.js-mail { overflow-wrap: normal; word-break: keep-all; }

.contact__map {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 340px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: 28px; border-radius: var(--r-lg);
  background: var(--crema) var(--papel);
}
.contact__map iframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; }
.contact__map-note { max-width: 34ch; text-align: center; font-size: .74rem; line-height: 1.4; color: var(--verde-medio); }
.contact__map.has-map { padding: 0; }
.contact__map.has-map > :not(iframe) { visibility: hidden; }
.contact__map-lines { position: absolute; z-index: -1; width: 130%; max-width: none; left: -15%; top: -10%; opacity: .35; }
.contact__pin {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px 14px 16px; border-radius: var(--r-pill);
  background: var(--blanco); box-shadow: var(--sombra);
  font-size: .88rem; line-height: 1.35; color: var(--verde);
}
.contact__map-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; }

/* =========================================================
   12. PIE DE PÁGINA
   ========================================================= */
.footer { overflow: hidden; background: var(--verde); color: rgba(247,243,232,.82); padding-top: 64px; }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--blanco); text-decoration: underline; text-underline-offset: 3px; }
.footer__top { display: grid; gap: 40px; }
.footer__brand { display: inline-flex; align-items: center; gap: 14px; }
.footer__brand > span { display: flex; flex-direction: column; line-height: 1.15; }
.footer__name { font-family: var(--f-label); font-weight: 500; font-size: 1.1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--crema); }
.footer__tag { font-family: var(--f-label); font-size: .78rem; letter-spacing: .08em; color: rgba(247,243,232,.7); }
.footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; font-size: .9rem; }
.footer__cols > div:last-child { grid-column: 1 / -1; }
.footer__cols > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
.footer__h {
  font-family: var(--f-label); font-weight: 500; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--crema);
}
.footer__links { display: flex; flex-direction: column; gap: 6px; }

/* Las líneas de la marca, en grande, como cierre (en lugar del nombre gigante) */
.footer { position: relative; isolation: isolate; }
.footer__lines {
  position: absolute; z-index: -1; pointer-events: none;
  width: 520px; max-width: none; right: -230px; bottom: -260px;
  opacity: .16; transform: rotate(-20deg);
  animation: flotar-pie 14s ease-in-out infinite alternate;
}
@keyframes flotar-pie { to { transform: rotate(-14deg) translate(-12px, 14px); } }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  margin-top: 56px;
  padding-block: 20px calc(24px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(247,243,232,.18);
  font-size: .8rem; color: rgba(247,243,232,.65);
}

/* ---------- Botones de icono (redes) ---------- */
.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(56,83,49,.25); color: var(--verde);
  transition: background-color .25s, color .25s, border-color .25s;
}
.icon-btn:hover { background: var(--terracota); border-color: var(--terracota); color: var(--blanco); }
.icon-btn--light { border-color: rgba(247,243,232,.35); color: var(--crema); }
.footer a.icon-btn--light:hover { background: var(--crema); color: var(--verde); text-decoration: none; }
.nav__actions { display: flex; align-items: center; gap: 12px; }

/* ---------- Pie: fila de redes y empleo ---------- */
.footer__extra {
  display: grid; gap: 32px;
  margin-top: 40px; padding-top: 32px;
  border-top: 1px solid rgba(247,243,232,.18);
  font-size: .9rem;
}
.footer__extra > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; overflow-wrap: anywhere; }
.footer__social { display: flex; flex-wrap: wrap; gap: 10px; }
.footer__extra a:not(.icon-btn) { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(247,243,232,.4); }

/* =========================================================
   ÚLTIMAS PUBLICACIONES DE INSTAGRAM
   ========================================================= */
.ig { padding-block: 72px; }
.ig__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.ig__head .section-title { margin-top: 14px; }
.ig__head .btn svg { flex: none; }
.ig__live behold-widget { display: block; }
.ig__live:not(.is-ready) { height: 0; overflow: hidden; }
.ig__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ig__tile { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: var(--r-md); background: var(--crema-2); }
.ig__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ig__hover {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(42,63,37,.45); color: var(--blanco);
  opacity: 0; transition: opacity .3s;
}
.ig__hover svg { width: 30px; height: 30px; }
.ig__tile:hover img, .ig__tile:focus-visible img { transform: scale(1.06); }
.ig__tile:hover .ig__hover, .ig__tile:focus-visible .ig__hover { opacity: 1; }

/* Instagram del menú: terracota al pasar el ratón */
#nav-instagram:hover { background: var(--terracota); border-color: var(--terracota); color: var(--blanco); }

/* Redes personales en la sección de Daniela */
.about__social { display: flex; align-items: center; gap: 10px; }
.about__social span { margin-right: 6px; font-weight: 600; font-size: .9rem; color: var(--verde); }

/* Crédito */
.footer__credit { font-weight: 600; letter-spacing: .06em; }
[hidden] { display: none !important; }

/* Flecha para volver arriba: pequeña y discreta, encima del WhatsApp */
.to-top {
  position: fixed; z-index: 90;
  right: calc(26px + env(safe-area-inset-right, 0px));
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--verde);
  border: 1px solid rgba(56,83,49,.2);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .3s, transform .3s, background-color .25s;
}
.to-top.is-visible { opacity: .85; transform: none; pointer-events: auto; }
.to-top:hover { opacity: 1; background: var(--blanco); }

/* El botón de WhatsApp se oculta al llegar al pie, para no tapar nada */
.wa-float.is-hidden { opacity: 0; transform: scale(.8); pointer-events: none; }

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-float {
  position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--verde); color: var(--crema);
  box-shadow: 0 0 0 3px var(--blanco), 0 10px 24px -8px rgba(42, 63, 37, .55);
  transition: transform .25s, background-color .25s, opacity .25s;
}
.wa-float:hover { transform: scale(1.06); background: var(--verde-oscuro); }

/* =========================================================
   TABLET / ESCRITORIO
   ========================================================= */
@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .hero__actions .btn { flex: 0 0 auto; }
  .stats__label { font-size: .8rem; }
  .hero__badge { left: auto; right: 20px; bottom: 20px; max-width: 320px; }
}

@media (min-width: 960px) {
  :root { --header-h: 84px; }

  .burger { display: none; }
  .nav {
    position: static; flex-direction: row; align-items: center; gap: 36px;
    padding: 0; background: none; border: 0;
    transform: none; opacity: 1; visibility: visible;
  }
  .nav__list { flex-direction: row; gap: 30px; }
  .nav__list a {
    position: relative; padding: 6px 0;
    font-family: var(--f-body); font-size: .9rem; font-weight: 500;
  }
  .nav__list a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--verde); transform: scaleX(0); transform-origin: left; transition: transform .3s;
  }
  .nav__list a:hover::after { transform: scaleX(1); }
  .nav__cta { min-height: 44px; padding: 10px 22px; }

  .hero { padding: 12px 0 96px; }
  .hero__grid { grid-template-columns: 1.15fr 1fr; gap: 16px; min-height: min(80vh, 680px); }
  .hero__panel { display: flex; flex-direction: column; justify-content: center; padding: 56px 56px 44px; }
  .hero__lines { width: 560px; right: -200px; top: -130px; }
  .hero__media { aspect-ratio: auto; min-height: 560px; }
  .hero__media > img { position: absolute; inset: 0; }
  .stats { margin-top: auto; padding-top: 28px; }
  .hero__actions { margin-bottom: 48px; }
}

@media (min-width: 960px) {
  .about { padding-block: 120px; }
  .about__grid { grid-template-columns: 0.85fr 1fr; gap: 96px; }
  .about__media { width: 100%; max-width: 440px; margin: 0; padding: 40px 0 0 40px; }
  .about__lines { width: 150%; left: -32%; top: -14%; }
  .about__years { bottom: 36px; left: -8px; }
}

@media (min-width: 700px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__item--faciales, .bento__item--bonos { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .services { padding-block: 120px; }
  .services__head { grid-template-columns: 1fr auto; align-items: end; gap: 48px; margin-bottom: 48px; }
  .bento { grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: minmax(280px, auto); gap: 16px; }
  .bento__item--faciales { grid-column: 1; grid-row: span 2; }
  .bento__item--bonos { grid-column: 2 / 4; }
  .card--wide .card__lines { width: 420px; right: -120px; top: -210px; }
  .bento__item--faciales .card__body { padding: 36px; }
  .bento__item--faciales .card__title { font-size: 2rem; }
  .card__body { padding: 28px; }
  .sheet { width: min(560px, 92vw); max-height: 80vh; margin: auto; border-radius: var(--r-lg); }
}

@media (min-width: 960px) {
  .featured { padding-block: 120px; }
  .featured__head { margin-bottom: 48px; }
  .featured__list {
    grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto;
    gap: 20px; overflow: visible; margin-inline: 0; padding: 0;
  }
}

@media (min-width: 960px) {
  .visit { padding-block: 120px; }
  .visit__head { margin-bottom: 56px; }
  .visit__list { grid-template-columns: repeat(3, 1fr); }
  .visit__item { padding: 8px 40px; }
  .visit__item + .visit__item { border-top: 0; border-left: 1px solid var(--verde-claro); }
}

@media (min-width: 700px) {
  .reviews__list { grid-auto-columns: calc((100% - 2 * var(--gutter) - 14px) / 2); }
}
@media (min-width: 960px) {
  .reviews { padding-block: 120px; }
  .reviews__head { margin-bottom: 28px; }
  .reviews__list { grid-auto-columns: calc((100% - 2 * var(--gutter) - 40px) / 3); gap: 20px; }
}

@media (min-width: 700px) {
  .pros__grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .pros__intro { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .pros { padding-block: 120px; }
  .pros__grid { grid-template-columns: 1fr 1.05fr .8fr; gap: 32px; align-items: end; }
  .pros__intro { grid-column: auto; align-self: center; padding-right: 24px; }
  .pro:not(.pro--main) .pro__media { aspect-ratio: 4 / 5; }
}

@media (min-width: 960px) {
  .booking { padding-block: 96px; }
  .booking__panel { grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; padding: 56px; }
  .booking__intro { padding-inline: 0; }
  .faq { padding-block: 120px; }
}

@media (min-width: 700px) {
  .contact__list { grid-template-columns: 1fr 1fr; }
  .footer__cols { grid-template-columns: repeat(3, 1fr); }
  .footer__cols > div:last-child { grid-column: auto; }
}
@media (min-width: 960px) {
  .news { padding-block: 120px; }
  .news__inner { align-items: center; text-align: center; margin-inline: auto; }
  .news__title { align-items: center; }
  .news__lines--a { width: 520px; right: -140px; top: -170px; }
  .news__lines--b { width: 480px; left: -160px; bottom: -260px; }
  .contact { padding-block: 120px; }
  .contact__grid { grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: stretch; }
  .contact__map { min-height: 420px; }
  .footer { padding-top: 88px; }
  .ig { padding-block: 112px; }
  .footer__top { grid-template-columns: auto 1fr; gap: 80px; }
  .footer__cols { gap: 32px; }
  .footer__extra { grid-template-columns: auto auto; justify-content: start; column-gap: 120px; }
  .ig__grid { gap: 16px; }
  .footer__lines { width: 900px; right: -260px; bottom: -480px; }
}

/* =========================================================
   Animaciones al hacer scroll (solo si no se pide reducir movimiento)
   ========================================================= */
/* 1. Entrada suave: suben y aparecen, en cascada */
.js-anim :is(.hero__panel, .about__content, .services__head, .bento, .featured__head, .featured__list, .visit__head, .visit__list, .reviews__head, .reviews__list, .pros__grid, .booking__intro, .faq__head, .faq__list, .news__inner, .contact__grid, .ig__head, .ig__grid) > :not([class*="__lines"]):not(.rv-done),
.js-anim .about__years:not(.rv-done) { opacity: 0; transform: translateY(22px); }
.js-anim :is(.hero__panel, .about__content, .services__head, .bento, .featured__head, .featured__list, .visit__head, .visit__list, .reviews__head, .reviews__list, .pros__grid, .booking__intro, .faq__head, .faq__list, .news__inner, .contact__grid, .ig__head, .ig__grid) > .rv-go:not(.rv-done),
.js-anim .about__years.rv-go:not(.rv-done) {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0s);
}
/* 2. Fotos: barrido de abajo arriba + zoom hacia atrás */
.js-anim :is(.hero__media > img, .about__photo, .pro__media img):not(.rv-done) { clip-path: inset(100% 0 0 0); transform: scale(1.1); }
.js-anim :is(.hero__media > img, .about__photo, .pro__media img).rv-go:not(.rv-done) {
  clip-path: inset(0 0 0 0); transform: none;
  transition: clip-path 1.1s cubic-bezier(.65,0,.25,1), transform 1.5s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0s);
}
/* 3. Líneas de la marca: se trazan de izquierda a derecha */
.js-anim img[class*="__lines"]:not(.hero__lines, .footer__lines):not(.rv-done) { clip-path: inset(0 100% 0 0); }
.js-anim img[class*="__lines"]:not(.hero__lines, .footer__lines).rv-go:not(.rv-done) { clip-path: inset(0 0 0 0); transition: clip-path 2s cubic-bezier(.55,0,.2,1) var(--d, 0s); }

/* Quién está detrás: entrada más suave (fundido + leve zoom, sin barrido) */
.js-anim .about__frame .about__photo:not(.rv-done) { clip-path: none; opacity: 0; transform: scale(1.06); }
.js-anim .about__frame .about__photo.rv-go:not(.rv-done) {
  opacity: 1; transform: none;
  transition: opacity 1.2s cubic-bezier(.22,.61,.36,1), transform 1.6s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--d, 0s);
}
.js-anim .about__media img.about__lines:not(.rv-done) { clip-path: none; opacity: 0; }
.js-anim .about__media img.about__lines.rv-go:not(.rv-done) { opacity: .9; transition: opacity 1.8s ease var(--d, 0s); }
.js-anim .about__years.rv-go:not(.rv-done) { transition-duration: 1s; }
.js-anim .about__content > .rv-go:not(.rv-done) { transition-duration: 1s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* Destacados como botones que abren su ventana */
button.feat { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
.feat__media--placeholder { display: grid; place-items: center; background: var(--verde-claro); }
.feat__media .feat__logo { width: 64px; height: auto; object-fit: contain; opacity: .55; }
.feat:hover .feat__media .feat__logo { transform: none; }
.feat__new {
  display: inline-block; margin-left: 6px; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--terracota); color: var(--blanco);
  font-family: var(--f-body); font-size: .66rem; font-weight: 600; font-style: normal;
  letter-spacing: .06em; text-transform: uppercase; vertical-align: middle;
}
.sheet__head h3 .feat__new { font-size: .62rem; }
.sheet__content { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding: 20px 24px; }
.sheet__content p { color: var(--texto-suave); font-size: .94rem; }
.sheet__content .sheet__lead { color: var(--texto); font-size: 1rem; }
.sheet__content h4 { margin-bottom: 4px; font-family: var(--f-label); font-weight: 500; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--verde-medio); }
.sheet__cols { display: grid; gap: 12px; }
.sheet__cols > div { padding: 14px 16px; border-radius: var(--r-md); background: var(--crema); }
.sheet__cols p { font-size: .9rem; }
.sheet__cols h4 { margin-bottom: 6px; font-family: var(--f-body); font-size: .92rem; font-weight: 700; letter-spacing: .1em; color: var(--terracota); }
.sheet__content strong { font-weight: 600; color: var(--texto); }
.sheet__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sheet__gallery--one { grid-template-columns: 1fr; }
.sheet__gallery figure { margin: 0; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 4 / 5; background: var(--crema-2); }
.sheet__gallery img { width: 100%; height: 100%; object-fit: cover; }
.sheet__gallery--one figure { aspect-ratio: 4 / 3; }
@media (min-width: 640px) { .sheet__gallery { grid-template-columns: 1fr 1fr; } .sheet__gallery--one { grid-template-columns: 1fr; } }
.sheet__sub { display: block; margin-top: 2px; font-family: var(--f-label); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--verde-medio); }
.sheet__steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--verde-claro); }
.sheet__steps li { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--verde-claro); }
.sheet__steps strong { font-family: var(--f-body); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--terracota); }
.sheet__steps span { font-size: .88rem; color: var(--texto-suave); }
.sheet__content .sheet__tagline { font-family: var(--f-label); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--verde-medio); text-align: center; }
@media (max-width: 400px) { .sheet__steps li { grid-template-columns: 1fr; gap: 2px; } }
.sheet__ba { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.sheet__ba figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 4 / 5; background: var(--crema-2); }
.sheet__ba img { width: 100%; height: 100%; object-fit: cover; }
.sheet__ba-ph { display: grid; place-items: center; height: 100%; padding: 12px; border: 1.5px dashed rgba(56,83,49,.25); border-radius: inherit; text-align: center; font-size: .8rem; color: var(--verde-medio); }
.sheet__ba figcaption { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.92); font-size: .72rem; font-weight: 600; color: var(--verde); }
.sheet__content .sheet__note { margin-top: -6px; font-size: .76rem; color: var(--verde-medio); }
.sheet__foot { align-items: center; gap: 12px 24px; }
@media (min-width: 640px) { .sheet__cols { grid-template-columns: 1fr 1fr; } }

/* =========================================================
   FRASE DEL CENTRO (foto de la recepción + velo verde)
   ========================================================= */
.quote { position: relative; overflow: hidden; isolation: isolate; display: grid; place-items: center; min-height: 340px; padding-block: 72px; text-align: center; color: var(--crema); }
.quote__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.quote::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(42,63,37,.78), rgba(42,63,37,.86)); }
.quote__lines { position: absolute; z-index: -1; width: 460px; max-width: none; right: -160px; top: -120px; opacity: .22; transform: rotate(14deg); pointer-events: none; }
.quote__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.quote__text { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 22ch; }
.quote__text .title-sans { font-size: clamp(1.4rem, 5.2vw, 2.3rem); line-height: 1.15; color: var(--crema); }
.quote__text em { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(2rem, 8vw, 3.8rem); line-height: 1.08; color: var(--blanco); }
@media (min-width: 960px) { .quote { min-height: 460px; padding-block: 110px; } .quote__text { max-width: none; } }

/* =========================================================
   PÁGINAS LEGALES
   ========================================================= */
.legal-hero { padding-block: 56px 40px; }
.legal-hero .section-title { margin-top: 14px; }
.legal { padding-block: 48px 88px; background: var(--blanco); }
.legal__body { max-width: 760px; }
.legal__body > * + * { margin-top: 14px; }
.legal__body h2 {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--verde-claro);
  font-family: var(--f-body); font-weight: 600; font-size: 1.2rem; letter-spacing: -.01em;
}
.legal__body h3 { margin-top: 26px; font-family: var(--f-body); font-weight: 600; font-size: 1rem; }
.legal__body p, .legal__body li { color: var(--texto-suave); }
.legal__body ul { display: flex; flex-direction: column; gap: 6px; padding-left: 1.1em; list-style: disc; }
.legal__body li::marker { color: var(--verde-medio); }
.legal__body strong { color: var(--texto); font-weight: 600; }
.legal__body a { color: var(--verde); font-weight: 500; }
.legal__updated { font-family: var(--f-label); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--verde-medio); }
.legal__data { display: grid; gap: 0; margin: 18px 0 0; border-radius: var(--r-md); background: var(--crema); padding: 6px 20px; }
.legal__data > div { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid rgba(56,83,49,.12); }
.legal__data > div:first-child { border-top: 0; }
.legal__data dt { font-family: var(--f-label); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--verde-medio); }
.legal__data dd { margin: 0; color: var(--texto); overflow-wrap: anywhere; }
.legal__table { overflow-x: auto; margin-top: 12px; border-radius: var(--r-md); border: 1px solid var(--verde-claro); }
.legal__table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .9rem; }
.legal__table th { padding: 12px 14px; background: var(--crema); text-align: left; font-weight: 600; color: var(--verde); }
.legal__table td { padding: 12px 14px; border-top: 1px solid var(--verde-claro); color: var(--texto-suave); vertical-align: top; }
.legal__table td:first-child { font-family: ui-monospace, monospace; font-size: .84rem; color: var(--texto); white-space: nowrap; }
mark.pendiente { padding: 1px 6px; border-radius: 6px; background: #f8e6da; color: var(--terracota); font-weight: 500; }
@media (min-width: 640px) {
  .legal__data > div { grid-template-columns: 170px 1fr; gap: 16px; align-items: baseline; }
}
@media (min-width: 960px) {
  .legal-hero { padding-block: 88px 56px; }
  .legal { padding-block: 64px 120px; }
}

/* =========================================================
   404
   ========================================================= */
.notfound { position: relative; overflow: hidden; isolation: isolate; padding-block: 72px 96px; text-align: center; }
.notfound__lines { position: absolute; z-index: -1; width: 620px; max-width: none; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-12deg); opacity: .14; pointer-events: none; }
.notfound__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.notfound__inner .section-title { align-items: center; }
.notfound__code { font-family: var(--f-display); font-style: italic; font-size: clamp(5rem, 24vw, 9rem); line-height: .9; color: var(--verde-claro); }
.notfound__text { max-width: 42ch; color: var(--texto-suave); }
.notfound__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; margin-top: 10px; }
@media (min-width: 960px) { .notfound { padding-block: 120px 140px; } }

/* =========================================================
   BANNER DE COOKIES (Aceptar y Rechazar con el mismo peso visual)
   ========================================================= */
.cookie {
  position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px;
  display: flex; flex-direction: column; gap: 12px;
  max-height: calc(100vh - 24px); overflow-y: auto;
  padding: 20px; border-radius: var(--r-lg);
  background: var(--blanco); color: var(--texto);
  box-shadow: 0 0 0 1px rgba(56,83,49,.1), 0 24px 48px -16px rgba(42,63,37,.45);
  animation: subir .35s cubic-bezier(.2,.7,.2,1);
}
.cookie[hidden] { display: none; }
.cookie__title { font-family: var(--f-display); font-style: italic; font-size: 1.35rem; line-height: 1.15; color: var(--verde); }
.cookie__text { font-size: .86rem; line-height: 1.5; color: var(--texto-suave); }
.cookie__text a { color: var(--verde); font-weight: 600; }
.cookie__prefs { display: flex; flex-direction: column; border-top: 1px solid var(--verde-claro); }
.cookie__prefs[hidden] { display: none; }
.cookie__opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--verde-claro); cursor: pointer; }
.cookie__opt > span:first-child { display: flex; flex-direction: column; gap: 2px; font-size: .9rem; color: var(--verde); }
.cookie__opt small { font-size: .78rem; color: var(--texto-suave); }
.cookie__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cookie__switch { flex: none; position: relative; width: 42px; height: 24px; border-radius: var(--r-pill); background: #d6dcd4; transition: background-color .25s; }
.cookie__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--blanco); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .25s; }
.cookie__opt input:checked + .cookie__switch { background: var(--verde); }
.cookie__opt input:checked + .cookie__switch::after { transform: translateX(18px); }
.cookie__opt input:disabled + .cookie__switch { opacity: .55; }
.cookie__opt input:focus-visible + .cookie__switch { outline: 2px solid var(--terracota); outline-offset: 2px; }
.cookie__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cookie__btn { min-height: 44px; padding: 10px 14px; font-size: .86rem; background: var(--verde); color: var(--crema); }
.cookie__btn:hover { background: var(--verde-oscuro); }
.cookie__btn--ghost { grid-column: 1 / -1; order: 3; background: none; border-color: rgba(56,83,49,.3); color: var(--verde); }
.cookie__btn--ghost:hover { background: var(--verde-claro); }
.has-cookie-banner .wa-float, .has-cookie-banner .to-top { opacity: 0 !important; pointer-events: none !important; }
.footer__cookies { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.footer__cookies:hover { color: var(--blanco); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) {
  .cookie { left: 20px; right: auto; bottom: 20px; width: 420px; padding: 24px; }
  .cookie__actions { grid-template-columns: 1fr 1fr 1fr; }
  .cookie__btn--ghost { grid-column: auto; order: 0; }
  .cookie.is-detail .cookie__actions { grid-template-columns: 1fr 1fr; }
  .cookie.is-detail .cookie__btn--ghost { grid-column: 1 / -1; order: 3; }
}

/* =========================================================
   SOLO MÓVIL (hasta 639px): versión más corta y ligera
   ========================================================= */
@media (max-width: 639px) {
  /* Letra un poco más pequeña en toda la web */
  html { font-size: 15px; }

  /* Portada: sin foto, directo al mensaje */
  .hero__media { display: none; }

  /* Tratamientos: sin descripción y botón discreto */
  .card { min-height: 190px; }
  .card--photo .card__text { display: none; }
  .card--photo .card__btn {
    min-height: 0; padding: 0 0 2px; margin-top: 2px;
    background: none; color: var(--blanco); border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,.6);
    font-size: .8rem;
  }
  .card--photo .card__btn:hover { background: none; transform: none; }

  /* Destacados: uno debajo del otro, en formato compacto */
  .featured__list {
    grid-auto-flow: row; grid-auto-columns: auto;
    overflow: visible; margin-inline: 0; padding: 0; gap: 10px;
  }
  .feat { flex-direction: row; align-items: stretch; gap: 4px; }
  .feat__media { flex: 0 0 34%; aspect-ratio: auto; min-height: 112px; }
  .feat__tag { display: none; }
  .feat__body { align-items: center; padding: 6px 4px 6px 10px; gap: 10px; }
  .feat__text {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    font-size: .82rem;
  }
  .feat__arrow { flex: none; }

  /* Quién está detrás: texto un poco más pequeño */
  .about__text { font-size: .88rem; gap: 10px; }

  /* Preguntas frecuentes: más compactas */
  .faq__head { margin-bottom: 22px; }
  .faq__list { gap: 6px; }
  .faq__item summary { padding: 12px 12px 12px 16px; gap: 12px; font-size: .86rem; line-height: 1.35; }
  .faq__item summary::after { width: 26px; height: 26px; font-size: 1rem; }
  .faq__item p { padding: 0 16px 14px; font-size: .86rem; }
  /* Ocultas en móvil (dónde está, sesiones, horario): ya están en Contacto o son menos clave */
  .faq__item:nth-child(1) { display: none; }

  /* Profesionales: carrusel horizontal con puntos */
  .pros__grid { gap: 20px; }
  .pros__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px;
    scrollbar-width: none;
  }
  .pros__track::-webkit-scrollbar { display: none; }
  .pros__track > .pro { scroll-snap-align: start; }
  .pros__dots { display: flex; justify-content: center; }

  /* Tu primera visita: carrusel horizontal con puntos */
  .visit__head { margin-bottom: 24px; }
  .visit__list {
    grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px;
    scrollbar-width: none;
  }
  .visit__list::-webkit-scrollbar { display: none; }
  .visit__item { scroll-snap-align: start; padding: 26px 18px; border-radius: var(--r-lg); background: var(--crema); }
  .visit__item + .visit__item { border-top: 0; }
  .visit__dots { display: flex; justify-content: center; margin-top: 18px; }

  /* Contacto: sin correo ni mapa; "Cómo llegar" junto a la dirección */
  .contact__list > div:nth-child(3), .contact__list > div:nth-child(4) { display: none; }

  /* Instagram: botón "Síguenos" más pequeño */
  .ig__head { gap: 14px; margin-bottom: 22px; }
  .ig__head .btn { min-height: 0; padding: 8px 14px; gap: 6px; font-size: .78rem; }
  .ig__head .btn svg { width: 16px; height: 16px; }
  .contact__map { display: none; }
  .contact__route { display: inline-flex; margin-top: 10px; font-size: .84rem; }
}