/* ==========================================================================
   Centro de Estética Mª Luisa Verdú — hoja de estilos única
   ========================================================================== */

:root{
  /* Paleta tomada del logo y la cosmética ML:
     negro serif · barra dorada · puntos terracota / ámbar / rosa palo */
  --bone:#FCFAF7;
  --cream:#F4EEE7;
  --cream-deep:#E9DFD3;
  --sand:#DCCDBC;
  --ink:#14110F;
  --ink-soft:#4B423B;
  --muted:#8A7B6E;
  --rose:#C7431A;          /* terracota del logo */
  --rose-dark:#A83714;
  --rose-tint:#F8E7E2;     /* rosa palo del logo */
  --gold:#EFB94E;          /* ámbar del logo */
  --gold-deep:#C9922F;
  --white:#fff;
  --line:rgba(20,17,15,.13);
  --line-soft:rgba(20,17,15,.07);
  --shadow-sm:0 2px 14px -6px rgba(20,17,15,.07), 0 10px 34px -22px rgba(20,17,15,.14);
  --shadow-md:0 4px 24px -10px rgba(20,17,15,.09), 0 30px 60px -34px rgba(20,17,15,.20);
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --wrap:1180px;
  --r:22px;
  --r-lg:28px;
  --r-sm:16px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; height:auto; display:block}
a{color:var(--rose-dark); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--ink)}

h1,h2,h3,h4{font-family:var(--serif); font-weight:500; line-height:1.12; margin:0; letter-spacing:-.01em}
h1{font-size:clamp(2.15rem,4.6vw,3.5rem); line-height:1.08}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.6rem)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,40px)}
.section{padding-block:clamp(76px,10vw,140px)}
.section--tight{padding-block:clamp(48px,6vw,80px)}
.bg-cream{background:var(--cream)}
.bg-rose{background:var(--rose-tint)}
.center{text-align:center}
.lead{font-size:clamp(1.1rem,1.9vw,1.3rem); color:var(--ink-soft); line-height:1.6}
.small{font-size:.85rem; color:var(--muted); line-height:1.55}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Eyebrow / etiqueta de sección ------------------------------------------ */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.72rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rose-dark); margin-bottom:1.1rem;
}
.eyebrow::before{content:""; width:28px; height:1px; background:currentColor; opacity:.5}
.center .eyebrow::after,.head.center .eyebrow::after{content:""; width:28px; height:1px; background:currentColor; opacity:.5}

/* Botones ----------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--sans); font-size:.95rem; font-weight:500; letter-spacing:.02em;
  padding:1em 2em; border-radius:999px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:all .22s ease; white-space:nowrap;
}
.btn svg{width:1.15em; height:1.15em; flex:none}
.btn--wa{background:var(--ink); color:var(--bone); box-shadow:var(--shadow-sm)}
.btn.btn--wa svg{color:#25D366; width:1.7em; height:1.7em}   /* solo el icono en verde WhatsApp, algo más grande */
.btn--wa:hover{background:#000; color:#fff; transform:translateY(-1px)}
.btn--solid{background:var(--ink); color:var(--bone)}
.btn--solid:hover{background:var(--rose-dark); color:#fff; transform:translateY(-1px)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink); color:var(--ink); background:rgba(255,255,255,.6)}
.btn--lg{font-size:1.02rem; padding:1.15em 2.4em}
.btn-row{display:flex; flex-wrap:wrap; gap:.75rem}
/* Los botones se centran en cualquier contenedor centrado, tanto si lleva la
   clase .center como si el centrado viene de la propia sección (.cta, .head.center). */
.center .btn-row,
.cta .btn-row,
.head.center .btn-row{justify-content:center}

/* Cabecera ---------------------------------------------------------------- */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(251,248,245,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color .25s ease, box-shadow .25s ease;
}
.header.is-stuck{border-bottom-color:var(--line-soft); box-shadow:0 1px 24px -12px rgba(42,35,33,.35)}
.header__inner{display:flex; align-items:center; gap:1.5rem; min-height:76px}
.brand{display:flex; flex-direction:column; text-decoration:none; color:var(--ink); line-height:1.05}
.brand__name{font-family:var(--serif); font-size:1.32rem; letter-spacing:.01em}
.nav{margin-left:auto; display:flex; align-items:center; gap:1.6rem}
.nav a{font-size:.86rem; color:var(--ink-soft); text-decoration:none; letter-spacing:.03em; transition:color .2s}
.nav a:hover{color:var(--rose-dark)}
.header__cta{display:flex; align-items:center; gap:.6rem}
.nav-toggle{display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:10px; width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center}
.nav-toggle span{display:block; width:18px; height:1.5px; background:var(--ink); position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink); transition:transform .2s}
.nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:960px){
  .nav{
    position:fixed; inset:76px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--bone); border-bottom:1px solid var(--line); padding:.5rem clamp(20px,5vw,40px) 1.5rem;
    margin:0; display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:.85rem 0; border-bottom:1px solid var(--line-soft); font-size:1rem}
  .nav .header__cta{flex-direction:column; align-items:stretch; margin-top:1rem}
  .nav .header__cta .btn{width:100%}
  .nav-toggle{display:flex}
  .header__cta--desktop{display:none}
}

/* Hero -------------------------------------------------------------------- */
.hero{position:relative; overflow:hidden; background:var(--cream)}
.hero::after{
  content:""; position:absolute; inset:auto -10% -40% 40%; height:70%;
  background:radial-gradient(ellipse at center, rgba(180,115,108,.16), transparent 65%);
  pointer-events:none;
}
.hero h1{margin-bottom:1.2rem}
.hero h1 em{font-style:italic; color:var(--rose-dark)}
.hero__sub{max-width:46ch; margin-bottom:2rem}
.hero__proof{display:flex; flex-wrap:wrap; gap:1.75rem; margin-top:2.5rem; padding-top:1.75rem; border-top:1px solid var(--line)}
.proof__n{font-family:var(--serif); font-size:2.1rem; line-height:1; color:var(--rose-dark); display:block}
.proof__l{font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-top:.5rem; display:block}

.hero__media{position:relative}
.ph{
  position:relative; border-radius:var(--r); overflow:hidden; background:var(--cream-deep);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:1.5rem;
  color:var(--muted); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  border:1px dashed rgba(42,35,33,.18);
}
.ph--hero{aspect-ratio:4/5; box-shadow:var(--shadow-md)}
.hero__badge{
  position:absolute; left:-14px; bottom:34px; background:var(--white); border-radius:12px;
  padding:.9rem 1.2rem; box-shadow:var(--shadow-md); max-width:230px;
}
.hero__badge strong{font-family:var(--serif); font-size:1.5rem; display:block; color:var(--rose-dark); line-height:1}
.hero__badge span{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

@media (max-width:900px){
    .hero__media{order:-1; max-width:420px; margin-inline:auto; width:100%}
  .ph--hero{aspect-ratio:4/3}
  .hero__badge{left:auto; right:12px; bottom:-18px}
}

/* Bloques de contenido ---------------------------------------------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.split--wide-left{grid-template-columns:1.15fr .85fr}
@media (max-width:900px){.split,.split--wide-left{grid-template-columns:1fr; gap:2.25rem}}

.head{max-width:62ch}
.center .head,.head.center{margin-inline:auto}
.head p{margin-top:1.1rem}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.25rem; margin-top:3rem}
.card{
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:2.4rem 2rem; box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.card h3{margin-bottom:.7rem}
.card p{font-size:.97rem; color:var(--ink-soft)}
.card__n{
  font-family:var(--serif); font-size:.95rem; width:38px; height:38px; border-radius:50%;
  background:var(--rose-tint); color:var(--rose-dark); display:flex; align-items:center; justify-content:center;
  margin-bottom:1.1rem; letter-spacing:.02em;
}

/* Lista con check --------------------------------------------------------- */
.ticks{list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.85rem}
.ticks li{display:flex; gap:.8rem; align-items:flex-start; font-size:1rem; color:var(--ink-soft)}
.ticks svg{width:19px; height:19px; flex:none; margin-top:.28em; color:var(--rose)}

/* Antes / después --------------------------------------------------------- */
.ba-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.1rem; margin-top:2.75rem}
.ba{border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); background:var(--white)}
.ba .ph{aspect-ratio:1/1; border:0; border-radius:0}
.ba__cap{padding:.85rem 1rem; font-size:.82rem; color:var(--muted); letter-spacing:.04em; border-top:1px solid var(--line-soft)}

/* Tratamientos ------------------------------------------------------------ */
.treat{display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; margin-top:3rem}
.treat__row{background:var(--bone); padding:clamp(1.75rem,3.5vw,2.5rem); display:grid; grid-template-columns:minmax(190px,.85fr) 1.15fr; gap:clamp(1rem,3vw,2.5rem); align-items:start}
.treat__row h3{color:var(--ink)}
.treat__row h3 + .small{margin-top:.55rem; display:block}
.treat__row p{font-size:1rem; color:var(--ink-soft)}
@media (max-width:760px){.treat__row{grid-template-columns:1fr; gap:.9rem}}

/* Reseñas ----------------------------------------------------------------- */
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.25rem; margin-top:3rem}
.quote{background:var(--white); border-radius:var(--r); padding:2.4rem 2rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
.stars{color:var(--gold); font-size:.95rem; letter-spacing:.18em; margin-bottom:1rem}
.quote blockquote{margin:0 0 1.25rem; font-size:1rem; line-height:1.62; color:var(--ink-soft); font-style:italic}
.quote figcaption{margin-top:auto; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

/* Cita destacada ---------------------------------------------------------- */
/* El navegador aplica «margin:1em 40px» a blockquote por defecto: eso era lo
   que desalineaba la cita respecto a la etiqueta y al párrafo. */
blockquote{margin:0}
.pull{
  /* Sin segunda columna que la acompañe, las 24ch dejaban la cita en un
     tercio del hueco y el resto en blanco. Ocupa la columna. */
  margin:0; max-width:none;
  font-family:var(--serif); font-size:clamp(1.45rem,2.6vw,1.95rem);
  line-height:1.36; font-style:italic; color:var(--ink);
}
.pull__by{
  display:block; font-family:var(--sans); font-style:normal;
  font-size:.72rem; letter-spacing:.17em; text-transform:uppercase;
  /* En negrita sobre el gris claro la firma se veía sucia más que fuerte;
     el peso se nota de verdad con el tono de texto normal. */
  font-weight:600; color:var(--ink-soft); margin-top:1.6rem;
}



/* FAQ --------------------------------------------------------------------- */
.faq{max-width:800px; margin:3rem auto 0; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; padding:1.4rem 2.5rem 1.4rem 0; position:relative;
  font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.35rem); color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:.35rem; top:50%; width:11px; height:11px;
  border-right:1.5px solid var(--rose); border-bottom:1.5px solid var(--rose);
  transform:translateY(-70%) rotate(45deg); transition:transform .22s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq__a{padding:0 2.5rem 1.6rem 0; color:var(--ink-soft); font-size:1rem}

/* Contacto ---------------------------------------------------------------- */
.contact{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.info{list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:1.5rem}
.info dt{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem}
.info dd{margin:0; font-size:1.05rem; color:var(--ink)}
.info dd a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line)}
.info dd a:hover{color:var(--rose-dark); border-color:var(--rose)}
.map{border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line-soft); min-height:380px; background:var(--cream-deep)}
.map iframe{display:block; width:100%; height:100%; min-height:380px; border:0}

/* CTA final --------------------------------------------------------------- */
.cta{background:linear-gradient(157deg,#A84A20 0%,#8A3818 55%,#6E2C12 100%); color:var(--bone); text-align:center; position:relative; overflow:hidden}
.cta::before{content:""; position:absolute; inset:-50% 15% auto -25%; height:150%; background:radial-gradient(ellipse at center, rgba(239,185,78,.22), transparent 62%)}
.cta > *{position:relative; z-index:1}
.cta h2{color:var(--bone)}
.cta .lead{color:rgba(251,248,245,.78)}
.cta .btn--ghost{color:var(--bone); border-color:rgba(251,248,245,.3)}
.cta .btn--ghost:hover{background:rgba(251,248,245,.1); color:var(--bone); border-color:var(--bone)}
.cta__note{font-size:.8rem; color:rgba(251,248,245,.55); margin-top:1.75rem; max-width:52ch; margin-inline:auto}
.cta__note a{color:rgba(251,248,245,.8)}
.cta__note a:hover{color:var(--bone)}

/* Pie ---------------------------------------------------------------------- */
.footer{background:var(--cream); padding-block:clamp(48px,6vw,72px); font-size:.9rem}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem}
@media (max-width:760px){.footer__grid{grid-template-columns:1fr; gap:2rem}}
.footer h4{font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; font-weight:500}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:.6rem}
.footer a{color:var(--ink-soft); text-decoration:none}
.footer a:hover{color:var(--rose-dark)}
.footer__bottom{margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; color:var(--muted); font-size:.82rem}
.social{display:flex; gap:.75rem; margin-top:1.25rem}
.social a{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:all .2s}
.social a:hover{background:var(--ink); color:var(--bone); border-color:var(--ink)}
.social svg{width:17px; height:17px}

/* Botón flotante de WhatsApp ---------------------------------------------- */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:70;
  display:flex; align-items:center; gap:.6rem; padding:.8rem 1.25rem .8rem 1rem;
  background:#1FA855; color:#fff; border-radius:999px; text-decoration:none;
  box-shadow:0 10px 30px -8px rgba(31,168,85,.55); font-size:.92rem; font-weight:500;
  transform:translateY(120%); opacity:0; transition:transform .35s ease, opacity .35s ease, background .2s;
}
.wa-float.is-visible{transform:translateY(0); opacity:1}
.wa-float:hover{background:#17853F; color:#fff}
.wa-float svg{width:22px; height:22px; flex:none}
@media (max-width:520px){.wa-float__txt{display:none} .wa-float{padding:.95rem; border-radius:50%}}

/* Páginas legales --------------------------------------------------------- */
.legal{max-width:820px; margin-inline:auto; padding-block:clamp(48px,7vw,88px)}
.legal h1{font-size:clamp(2rem,4.5vw,3rem); margin-bottom:.5rem}
.legal .updated{font-size:.82rem; color:var(--muted); margin-bottom:3rem; padding-bottom:1.5rem; border-bottom:1px solid var(--line)}
.legal h2{font-size:clamp(1.35rem,2.6vw,1.8rem); margin:2.75rem 0 1rem}
.legal h3{font-size:1.15rem; margin:2rem 0 .75rem}
.legal p,.legal li{color:var(--ink-soft); font-size:1rem}
.legal ul,.legal ol{padding-left:1.3rem; margin:0 0 1.1em; display:grid; gap:.5rem}
.legal table{width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.9rem}
.legal th,.legal td{text-align:left; padding:.75rem .8rem; border:1px solid var(--line); vertical-align:top}
.legal th{background:var(--cream); font-weight:500; letter-spacing:.04em}
.legal .tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.legal .box{background:var(--rose-tint); border-radius:var(--r); padding:1.5rem 1.75rem; margin:2rem 0}
.legal .box p:last-child{margin-bottom:0}
.back{display:inline-flex; align-items:center; gap:.5rem; font-size:.86rem; color:var(--muted); text-decoration:none; margin-bottom:2rem}
.back:hover{color:var(--rose-dark)}

/* Aparición al hacer scroll ------------------------------------------------ */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .wa-float{transition:none}
}
:focus-visible{outline:2px solid var(--rose-dark); outline-offset:3px; border-radius:4px}

/* ==========================================================================
   Imágenes reales (sustituyen a los marcadores .ph)
   ========================================================================== */
.brand__logo{
  height:52px; width:52px; border-radius:50%; object-fit:cover;
  display:block; background:#fff; border:1px solid var(--line-soft);
}
@media (max-width:600px){.brand__logo{height:44px; width:44px}}

.fig{position:relative; border-radius:var(--r); overflow:hidden; background:var(--cream-deep); margin:0}
.fig img{width:100%; height:100%; object-fit:cover; display:block}
.fig--hero{aspect-ratio:4/5; box-shadow:var(--shadow-md)}
.fig--portrait{aspect-ratio:3/4; box-shadow:var(--shadow-sm)}
.fig--wide{aspect-ratio:4/3; box-shadow:var(--shadow-sm)}
.fig--square{aspect-ratio:1/1}
@media (max-width:900px){.fig--hero{aspect-ratio:4/3}}

/* Antes / después ---------------------------------------------------------- */
.results{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(1.25rem,3vw,2rem); margin-top:3rem}
.result{background:var(--white); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line-soft)}
.result__pair{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft)}
.result__side{position:relative; background:var(--cream-deep)}
.result__side img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block}
.result__tag{
  position:absolute; top:10px; left:10px; z-index:2;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  padding:.4em .8em; border-radius:999px; background:rgba(20,17,15,.72); color:#fff;
  backdrop-filter:blur(4px);
}
.result__side--after .result__tag{background:var(--rose)}
.result__meta{padding:1.1rem 1.35rem; display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:baseline; justify-content:space-between}
.result__meta strong{font-family:var(--serif); font-size:1.15rem; font-weight:500}
.result__meta span{font-size:.78rem; letter-spacing:.08em; color:var(--muted); text-transform:uppercase}

/* Cosmética ---------------------------------------------------------------- */
.shelf{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.25rem; margin-top:3rem}
.item{text-align:left}
.item .fig{aspect-ratio:3/4; margin-bottom:1rem}
.item h3{font-size:1.1rem; margin-bottom:.3rem}
.item p{font-size:.88rem; color:var(--muted); margin:0}
/* El precio por debajo del subtítulo, con el tono del texto normal: en gris
   claro se perdía justo el dato que la gente viene a buscar. Sin negrita: el
   color ya lo separa del subtítulo. */
.item__precio{
  margin-top:.45rem !important;
  font-size:.95rem !important;
  color:var(--ink) !important; font-variant-numeric:lining-nums tabular-nums;
}

/* Aviso legal en línea ----------------------------------------------------- */
.consent-note{
  font-size:.78rem; color:var(--muted); line-height:1.55; max-width:56ch;
  margin-top:1.1rem;
}
/* También cuando «center» va en el propio elemento y no en un padre: sin
   esto el bloque se queda pegado a la izquierda y solo se centra el texto
   dentro de él, que es justo lo que parece un descentrado. */
.center .consent-note,.center>.consent-note,.consent-note.center{margin-inline:auto}
.consent-note a{color:var(--ink-soft)}


/* Mapa bajo consentimiento -------------------------------------------------- */
.map{display:flex; align-items:center; justify-content:center; position:relative}
.map::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(199,67,26,.05), rgba(239,185,78,.08)),
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(20,17,15,.035) 22px 23px);
  pointer-events:none;
}
.map__ask{position:relative; z-index:1; text-align:center; padding:2rem 1.75rem; max-width:38ch}
.map__ask p:first-child{font-family:var(--serif); font-size:1.3rem; margin-bottom:.6rem}
.map iframe{position:relative; z-index:1}

/* Marcador de dato pendiente de completar (quitar antes de publicar) --------- */
.pending{
  background:#FFF3CD; color:#6B4E00; border:1px dashed #C9922F;
  padding:.1em .45em; border-radius:4px; font-size:.94em; font-weight:500;
  white-space:nowrap;
}

/* Ajustes finos de móvil ---------------------------------------------------- */
@media (max-width:600px){
    .header__inner{min-height:64px}
  html{scroll-padding-top:76px}
  .nav{inset:64px 0 auto 0}

  .hero__badge{
    right:10px; bottom:-14px; left:auto;
    max-width:none; width:auto; padding:.7rem 1rem;
    display:flex; align-items:baseline; gap:.55rem;
  }
  .hero__badge strong{font-size:1.15rem}
  .hero__badge span{font-size:.6rem; letter-spacing:.09em}

  .hero__proof{gap:1.25rem}
  .proof__n{font-size:1.7rem}
  .proof__l{font-size:.66rem; letter-spacing:.1em}

  .btn-row .btn{width:100%}
  .result__meta{padding:.9rem 1rem}
  .treat__row{padding:1.5rem 1.25rem}
}

/* ==========================================================================
   Ajustes de la segunda revisión
   ========================================================================== */

/* Método en rejilla 2 × 2 --------------------------------------------------- */
.cards--2x2{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:900px; margin-inline:auto}
@media (max-width:700px){.cards--2x2{grid-template-columns:1fr}}

/* Antes / después en la portada -------------------------------------------- */
.ba-hero{margin:0; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-md); background:var(--white)}
.ba-hero__pair{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line-soft)}
.ba-hero__pair .result__side img{width:100%; aspect-ratio:4/5; object-fit:cover; display:block}
.ba-hero__cap{
  padding:.9rem 1.1rem; font-size:.78rem; letter-spacing:.06em; color:var(--muted);
  text-align:center; border-top:1px solid var(--line-soft);
}


/* Caso compuesto en vertical (antes arriba / después abajo en un mismo archivo).
   Se muestra el mismo fichero dos veces, recortando por CSS cada mitad, para no
   alterar la imagen original ni su marca de agua. -------------------------- */
/* Este contenedor heredaba de .results la rejilla de 3 columnas, así que la
   única tarjeta se quedaba en la primera (380px) y las otras dos vacías: salía
   pequeña y descolgada a la izquierda. Con una sola columna puede ocupar sus
   720px y centrarse. */
.results--single{grid-template-columns:minmax(0,1fr); margin-top:1.25rem}
.result--wide{max-width:720px; margin-inline:auto}
.halfshot{position:relative; overflow:hidden; aspect-ratio:1080/645; background:var(--cream-deep)}
.halfshot img{
  position:absolute; left:0; width:100%; height:auto; display:block;
  aspect-ratio:auto !important;   /* anula el 1/1 de .result__side img */
  object-fit:fill !important;     /* anula el cover, que recortaba por el centro */
  max-width:none;
}
.halfshot--top img{top:0}
.halfshot--bottom img{bottom:0}

/* Retratos verticales algo más contenidos (fachada y retrato de Mª Luisa) ---- */
.fig--portrait{max-width:400px; margin-inline:auto}
@media (max-width:900px){.fig--portrait{max-width:340px}}

/* ==========================================================================
   Animación al entrar en pantalla
   Todo se anula bajo prefers-reduced-motion (más abajo).
   ========================================================================== */

/* Aparición escalonada de tarjetas y elementos de lista */
.cards .card, .shelf .item, .quotes .quote, .results .result{transition-delay:0ms}
.cards .card:nth-child(2), .shelf .item:nth-child(2), .quotes .quote:nth-child(2), .results .result:nth-child(2){transition-delay:90ms}
.cards .card:nth-child(3), .shelf .item:nth-child(3), .quotes .quote:nth-child(3){transition-delay:180ms}
.cards .card:nth-child(4), .shelf .item:nth-child(4){transition-delay:270ms}

/* Zoom lento de las fotografías al aparecer */
.zoom{overflow:hidden}
.zoom img{
  transform:scale(1.08);
  transition:transform 1.6s cubic-bezier(.22,.68,.28,1);
  will-change:transform;
}
.zoom.is-in img{transform:scale(1)}

/* Las mitades del caso compuesto van posicionadas en absoluto: escalarlas
   dejaría ver la junta entre las dos fotos, así que se quedan quietas. */
.zoom .halfshot img{transform:none !important; transition:none}

/* Subrayado que se dibuja bajo los títulos de sección al aparecer */
.head.center h2{position:relative; display:inline-block}
.head.center h2::after{
  content:""; position:absolute; left:0; bottom:-.22em; height:1px; width:0;
  background:var(--rose); opacity:.45;
  transition:width 1.1s cubic-bezier(.22,.68,.28,1) .25s;
}
.head.is-in h2::after, .is-in .head.center h2::after{width:100%}

@media (prefers-reduced-motion:reduce){
  .zoom img{transform:none; transition:none}
  .cards .card, .shelf .item, .quotes .quote, .results .result{transition-delay:0 !important}
  .head.center h2::after{transition:none; width:100%}
}

/* ==========================================================================
   Cabecera con el nombre completo del centro
   ========================================================================== */
.brand{flex-direction:row; align-items:center; gap:.75rem}
.brand__text{display:flex; flex-direction:column; min-width:0}
.brand__name{
  font-family:var(--serif); font-size:1.18rem; line-height:1.12;
  letter-spacing:.005em; color:var(--ink);
}
@media (max-width:960px){.brand__name{font-size:1.05rem}}
@media (max-width:600px){
  .brand__name{font-size:.92rem; max-width:15ch}
  }
@media (max-width:400px){.brand__name{font-size:.85rem}}

/* ==========================================================================
   Mapa estático · teselas de OpenStreetMap alojadas por nosotros
   Sin iframe, sin JavaScript, sin cookies y sin peticiones a terceros.
   ========================================================================== */
.osm{
  position:relative; overflow:hidden; border-radius:var(--r);
  border:1px solid var(--line-soft); box-shadow:var(--shadow-sm);
  min-height:380px; height:100%; background:#E8E0D6;
}
.osm__grid{
  position:absolute; left:50%; top:50%;
  /* 5 columnas y no 3: con 768px de ancho el mosaico se quedaba corto por la
     izquierda —el punto del centro no cae en el medio de la tesela— y asomaba
     una franja del fondo beige. Con 1.280px cubre cualquier ancho de columna. */
  width:1280px; height:768px;
  display:grid; grid-template-columns:repeat(5,256px); grid-template-rows:repeat(3,256px);
  /* Desplazamiento calculado para que el centro exacto quede bajo el pin:
     2 teselas completas + 8px dentro de la tercera, 1 tesela + 103px de alto */
  transform:translate(-520px,-359px);
}
.osm__grid img{display:block; width:256px; height:256px}
.osm__pin{
  position:absolute; left:50%; top:50%; width:30px; height:40px;
  transform:translate(-50%,-100%);
  filter:drop-shadow(0 3px 6px rgba(20,17,15,.4));
}
.osm__cta{position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:2; font-size:.86rem}
.osm__attr{
  position:absolute; right:6px; bottom:4px; margin:0; z-index:2;
  font-size:.62rem; color:#4A423B; background:rgba(255,255,255,.75);
  padding:.15em .5em; border-radius:4px;
}
.osm__attr a{color:inherit; text-decoration:underline}
@media (max-width:900px){.osm{min-height:320px}}

/* Valoración de Google — contenido visible, nunca datos estructurados.
   Google prohíbe el marcado aggregateRating sobre uno mismo en negocios
   locales («self-serving reviews»): no genera estrellas y arriesga sanción. */
.rating{
  display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:.55rem;
  /* Cuando no cabe en una línea (móvil) parte en dos: así quedan centradas. */
  justify-content:center; text-align:center;
  margin-top:1.5rem; padding:.7rem 1.4rem; border-radius:999px;
  background:var(--white); border:1px solid var(--line-soft); box-shadow:var(--shadow-sm);
}
.rating__stars{color:var(--gold); font-size:1.05rem; letter-spacing:.1em}
.rating__score{font-family:var(--serif); font-size:1.65rem; line-height:1; color:var(--ink)}
.rating__meta{font-size:.88rem; color:var(--muted)}
.rating__meta strong{color:var(--ink-soft); font-weight:500}
@media (max-width:520px){
  .rating{padding:.7rem 1.1rem; gap:.4rem}
  .rating__meta{font-size:.8rem}
}

/* ==========================================================================
   Ajuste de aire y redondeo — referencia de cosmética tipo «bdy.»
   Bloques grandes con esquinas más suaves y composición más centrada.
   ========================================================================== */
.fig--hero, .ba-hero, .result, .osm, .map{border-radius:var(--r-lg)}
.card, .quote{border-radius:var(--r-lg)}
.item .fig{border-radius:var(--r)}
.treat{border-radius:var(--r-lg)}

/* Los bloques de texto centrados respiran un poco más antes del contenido */
.head.center{margin-bottom:.5rem}
.cards, .shelf, .results, .quotes, .treat{margin-top:3.5rem}

/* Cifras de la portada con más separación, menos apretadas */
.hero__proof{gap:2.25rem; padding-top:2rem; margin-top:3rem}

/* La banda de confianza deja de ser un corte duro y pasa a ser una transición */

/* ==========================================================================
   Fondo texturizado y tarjeta flotante
   La textura se genera con gradientes y grano SVG: no descarga ninguna imagen.
   Evoca el microcemento de las paredes del centro, no un mármol de catálogo.
   ========================================================================== */
body{background-color:var(--bone)}

/* La página llega a los bordes de la ventana. Antes era una tarjeta flotante
   de 1.340px con esquinas redondeadas sobre un fondo texturizado, y ese fondo
   asomaba alrededor como un marco de otro color. */
.shell{
  position:relative;
  background:var(--bone);
  /* «clip» en lugar de «hidden»: no rompe la cabecera pegajosa, que con
     overflow:hidden dejaría de pegarse. */
  overflow:hidden;
  overflow:clip;
}

/* La cabecera vive dentro del contenedor y sigue siendo pegajosa */
.header{background:rgba(252,250,247,.88)}

/* Etiquetas antes/después abajo y en recuadro claro, como la referencia ------ */
.result__tag{
  top:auto; bottom:10px; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,.94); color:var(--ink);
  border-radius:6px; letter-spacing:.14em; font-weight:500;
  box-shadow:0 2px 8px -3px rgba(20,17,15,.3);
}
.result__side--after .result__tag{background:rgba(255,255,255,.94); color:var(--rose-dark)}

/* ==========================================================================
   ACABADO EDITORIAL
   Un solo sistema, sin decoración añadida: la jerarquía la marcan el tamaño,
   el espacio y unas pocas líneas finas. El color queda como acento, no como
   relleno. Es lo que separa una web de clínica de una de catálogo.
   ========================================================================== */

/* Más contraste de escala: el titular manda, el cuerpo acompaña -------------- */
h1{font-size:clamp(2.3rem,5vw,3.9rem); line-height:1.04; letter-spacing:-.018em}
h2{font-size:clamp(2.05rem,4.3vw,3.2rem); line-height:1.08; letter-spacing:-.014em}
h3{letter-spacing:-.008em}
body{font-size:1.02rem; line-height:1.72}
p{max-width:68ch}
.lead{line-height:1.62; letter-spacing:-.004em}

/* La etiqueta de sección, más fina y con más aire --------------------------- */
.eyebrow{font-size:.68rem; letter-spacing:.26em; margin-bottom:1.35rem; font-weight:400}
.eyebrow::before, .eyebrow::after{width:22px; opacity:.4}

/* La doble limpieza: bloque editorial, sin caja ni adorno ------------------- */
.method{
  max-width:760px; margin:4.5rem auto 0;
  padding:clamp(2.25rem,4.5vw,3.5rem) clamp(1.5rem,4vw,3.5rem) clamp(2.5rem,5vw,3.75rem);
  text-align:center;
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:0 4px 24px -14px rgba(20,17,15,.12), 0 34px 70px -50px rgba(20,17,15,.24);
}

.method__title{
  font-size:clamp(1.9rem,3.8vw,2.7rem); margin-bottom:1.5rem;
  font-weight:400; color:var(--ink);
}
.method__text{
  font-size:1.05rem; color:var(--ink-soft); line-height:1.7;
  max-width:56ch; margin-inline:auto;
}
.method__text + .method__text{margin-top:1.1rem}
@media (max-width:600px){.method{margin-top:3.25rem; padding-top:2.5rem}}

/* Tarjetas sin relieve: solo una línea. Menos «app», más editorial ---------- */
.card{background:var(--white); border:1px solid var(--line-soft); box-shadow:none}
.card:hover{transform:none; box-shadow:var(--shadow-sm)}
.quote{box-shadow:none; border:1px solid var(--line-soft)}

/* Las cifras de confianza, con más presencia ------------------------------- */
.proof__n{font-size:2.5rem; letter-spacing:-.02em}
.proof__l{font-size:.7rem; letter-spacing:.16em}

/* Reseñas: la valoración como pieza central -------------------------------- */
.rating{box-shadow:none; border:1px solid var(--line)}

/* Tratamientos: filas más editoriales -------------------------------------- */
.treat{border:0; background:transparent; border-radius:0; gap:0}
.treat__row{
  background:transparent; border-top:1px solid var(--line);
  padding-inline:0; align-items:baseline;
}
.treat__row:last-child{border-bottom:1px solid var(--line)}
.treat__row h3{
  font-size:clamp(1.25rem,2.1vw,1.55rem);
  /* 700 está auto-alojado en assets/fonts/ solo para estos títulos. */
  font-weight:700;
}

/* Derrames de producto dentro de la caja del método ------------------------- */

.method__art{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(.5rem,2.5vw,1.75rem);
  margin:0 0 2.25rem;
}
.drop-item{display:flex; flex-direction:column; align-items:center; gap:.85rem}
.drop-item figcaption{
  font-size:.66rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.drop{display:block; width:clamp(140px,23vw,200px); height:auto; aspect-ratio:260/200; object-fit:cover}

/* La leche viene fotografiada sobre fondo blanco. Con «multiply» ese blanco
   desaparece contra la caja y solo queda el relieve del producto, sin tener
   que recortar la imagen. */
.drop--milk{mix-blend-mode:multiply}


.drop-plus{
  font-family:var(--serif); font-size:1.6rem; color:var(--rose);
  margin-bottom:2.1rem; opacity:.7; flex:none;
}
@media (max-width:520px){
  .method__art{gap:.35rem}
  .drop-item figcaption{font-size:.58rem; letter-spacing:.14em}
  .drop-plus{font-size:1.2rem; margin-bottom:1.9rem}
}

/* Sección «Nuestra filosofía» ------------------------------------------------
   Tres bloques de texto seguidos se leían como un amontonamiento. Ahora la cita
   manda, una línea fina la separa del texto de apoyo, y ese texto baja de peso
   para que se note cuál es el principal y cuál el secundario. */
.centro__text{
  margin-top:2.5rem; padding-top:2.5rem;
  border-top:1px solid var(--line);
  /* Sin tope de ancho: la columna de la rejilla ya le da la medida, y así
     cae justo debajo de la cita en lugar de quedarse corto. */
  font-size:1.05rem; color:var(--muted); line-height:1.7; max-width:none;
}
/* En negrita sobre el gris claro se ve sucia; el peso cuenta con el tono de
   texto normal, igual que en la firma de la cita. */
.centro__text strong{font-weight:600; color:var(--ink-soft)}
.centro__cta{margin-top:2.25rem}

/* La cabina, sobre la cita: pone cara y lugar a lo que dice la directora
   antes de leerlo. Ocupa la columna sin llegar a competir con el retrato. */
/* Cuadrada en vez de 4:3: a 4:3 la foto se quedaba 180px más baja que la
   columna de texto de al lado y el bloque cojeaba. El recorte sale del
   original vertical, así que gana alto sin perder nada por los lados: entra
   el carro entero con los frascos. */
.centro__cabina{margin:1.6rem 0 2.6rem; max-width:none; aspect-ratio:1/1}

/* «Nuestra filosofía» ocupa el ancho de la página ------------------------------
   En una sola columna de 700px la sección se veía encogida al lado del resto,
   que usa 1.180. Pero estirar esa misma columna tampoco valía: la foto habría
   pasado a 885px de alto y la cita a 85 caracteres por línea, que ya no se lee
   de un vistazo. Así que vuelve a ser dos columnas —texto a la izquierda, la
   cabina a la derecha— y cada pieza se queda en su tamaño legible.
   Por debajo de 900px se apila con la foto encima de la cita, como estaba. */
.centro__col{max-width:700px}

@media (min-width:901px){
  .centro__col{max-width:var(--wrap)}
  .centro__col > div{
    display:grid;
    grid-template-columns:1.02fr .98fr;
    grid-template-areas:
      "etiqueta etiqueta"
      "cita     foto"
      "texto    foto"
      "cta      foto";
    column-gap:clamp(2.5rem,5vw,4.5rem);
    align-items:start;
  }
  .centro__col .eyebrow{grid-area:etiqueta}
  .centro__col .pull{grid-area:cita}
  .centro__col .centro__text{grid-area:texto}
  .centro__col .centro__cta{grid-area:cta}
  .centro__cabina{
    grid-area:foto; align-self:center; margin:0;
    /* min-width:0 evita que la foto imponga su ancho natural a la columna */
    min-width:0;
  }
}

/* Cierre de la cosmética: la estantería era un callejón sin salida —cinco
   botes y nada que hacer con ellos—, así que se le pone salida por el mismo
   canal que el resto de la página. */
.pedido{
  margin-top:3.25rem; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center; gap:1rem 1.5rem;
}
.pedido__txt{margin:0; font-size:1rem; color:var(--ink-soft)}
@media (max-width:620px){
  .pedido{flex-direction:column; gap:1.1rem; text-align:center}
  .pedido .btn{width:100%; justify-content:center}
}

#centro .eyebrow{margin-bottom:1.5rem}
@media (max-width:600px){
  .centro__cabina{margin:1.4rem 0 2.2rem}
}

/* ==========================================================================
   ACABADO PROFESIONAL · 2ª pasada
   Botones rectangulares con versalitas, portada asimétrica con la foto a
   sangre y menos «tarjeta flotante». Es lo que separa una clínica de una
   plantilla: geometría recta, composición asimétrica y color contenido.
   ========================================================================== */

/* Botones: de píldora a rectángulo -------------------------------------------
   La píldora es el gesto más reconocible de las plantillas. El rectángulo con
   versalitas espaciadas lee como clínica. */
.btn{
  border-radius:999px;
  text-transform:uppercase; letter-spacing:.14em;
  font-size:.76rem; font-weight:500;
  padding:1.15em 2.2em;
}
.btn--lg{font-size:.82rem; padding:1.3em 2.6em}
.btn svg{width:1.25em; height:1.25em}
.btn--solid{background:var(--ink)}
.btn--ghost{border-color:rgba(20,17,15,.28)}
.btn--ghost:hover{background:transparent; border-color:var(--ink)}
.wa-float{border-radius:999px}

/* El titular: romana arriba, cursiva abajo ---------------------------------- */
.hero h1 em{font-style:italic; color:var(--ink); display:inline-block}

/* La cabecera, también en versalitas ---------------------------------------- */
.nav a{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase}
@media (max-width:960px){.nav a{font-size:.85rem; letter-spacing:.08em}}

/* ==========================================================================
   Reseñas: carrusel que avanza de tarjeta en tarjeta
   El desplazamiento continuo se leía mal, sobre todo en móvil: el texto nunca
   llegaba a estar quieto. Ahora cada reseña se detiene en su sitio unos
   segundos; el scroll nativo con anclaje hace el resto (dedo, rueda, teclado).
   ========================================================================== */
.carousel--resenas{margin-top:3rem}
.carousel--resenas .carousel__track{
  gap:1.25rem;
  scroll-snap-type:x mandatory;
  padding:.25rem .25rem .75rem;
}
.carousel--resenas .quote{
  flex:none; margin:0; scroll-snap-align:start;
  width:clamp(280px,30vw,370px);
  background:var(--white); border:1px solid var(--line-soft); box-shadow:none;
}

/* ==========================================================================
   Carrusel de productos: una línea con flechas
   ========================================================================== */
.carousel{position:relative; margin-top:3.5rem}
.carousel__track{
  display:flex; gap:1.25rem; margin-top:0;
  overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory;
  padding-bottom:.5rem;
  scrollbar-width:none;
}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track .item{
  flex:none; width:clamp(200px,24vw,262px); scroll-snap-align:start;
}
.carousel__nav{
  position:absolute; top:38%; z-index:3;
  width:46px; height:46px; border-radius:50%;
  background:var(--white); border:1px solid var(--line);
  color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 12px -4px rgba(20,17,15,.2);
  transition:background .2s, color .2s, opacity .2s;
}
.carousel__nav svg{width:20px; height:20px}
.carousel__nav:hover{background:var(--ink); color:var(--bone); border-color:var(--ink)}
.carousel__nav[disabled]{opacity:.25; cursor:default}
.carousel__nav[disabled]:hover{background:var(--white); color:var(--ink); border-color:var(--line)}
.carousel__nav--prev{left:-23px}
.carousel__nav--next{right:-23px}
@media (max-width:1280px){
  .carousel__nav--prev{left:4px}
  .carousel__nav--next{right:4px}
}


/* Portada: antes arriba y después abajo -------------------------------------
   Apiladas encajan mucho mejor en una columna estrecha que sangra al borde.
   Las fotos son verticales (4:5), así que se recortan a 4:3 para que el bloque
   no se dispare de alto; el recorte se centra en la mejilla, que es la zona
   donde se ve la diferencia. */

/* Tipografía de las reseñas del carrusel ------------------------------------ */
.carousel--resenas blockquote{font-size:.95rem; font-style:normal}
.carousel--resenas figcaption{font-size:.74rem; letter-spacing:.09em}
.carousel--resenas .stars{font-size:.82rem; margin-bottom:.85rem}

/* Puntos de posición: en móvil son la única pista de que hay más reseñas,
   porque ahí las flechas estorban más de lo que ayudan. */
.carousel__dots{
  display:flex; justify-content:center; gap:.5rem;
  margin-top:1.4rem;
}
.carousel__dot{
  width:7px; height:7px; padding:0; border:0; border-radius:50%;
  background:var(--ink); opacity:.18; cursor:pointer;
  transition:opacity .3s, transform .3s, background .3s;
}
.carousel__dot:hover{opacity:.45}
.carousel__dot.is-activo{opacity:1; background:var(--rose); transform:scale(1.35)}

@media (max-width:760px){
  /* --ficha es el ancho de la tarjeta; el relleno lateral se calcula a partir
     de él para que la tarjeta activa quede centrada en la pantalla. */
  .carousel--resenas{--ficha:min(80vw,330px)}
  .carousel--resenas .carousel__nav{display:none}
  .carousel--resenas .quote{
    width:var(--ficha); padding:2rem 1.6rem; scroll-snap-align:center;
  }
  /* Sangra al borde para que la tarjeta siguiente asome y se vea que hay más */
  .carousel--resenas .carousel__track{
    margin-inline:calc(50% - 50vw); width:100vw;
    padding-inline:calc(50vw - var(--ficha) / 2);
  }
}

@media (prefers-reduced-motion:reduce){
  .carousel--resenas .carousel__track{scroll-behavior:auto}
}

/* Portada: antes y después en horizontal, a proporción original --------------
   Las fotos son verticales (4:5). Apiladas en una caja ancha había que
   recortar más de la mitad de cada una y solo se veía una ceja. En horizontal
   la caja coincide con la proporción real, así que no se recorta nada y el
   bloque ocupa la mitad de alto. */
.ba-hero{max-width:520px; margin-left:auto}
.ba-hero__pair{grid-template-columns:1fr 1fr; gap:2px}
.ba-hero__pair .result__side img{
  aspect-ratio:4/5; width:100%; height:auto;
  object-fit:cover; object-position:center;
}

/* ==========================================================================
   Móvil: evitar que el contenido empuje la columna
   «1fr» no baja del ancho mínimo de su contenido. Como los botones llevan
   white-space:nowrap y su texto en versalitas es más ancho que la pantalla,
   estiraban la columna de la portada y recortaban todo lo demás.
   ========================================================================== */
@media (max-width:900px){
    .hero__inner > *{min-width:0}
  .ba-hero{max-width:min(420px,100%)}
}
@media (max-width:600px){
  /* El texto de los botones puede partirse: vale más que quepa */
  .btn{white-space:normal; padding-inline:1.5em; letter-spacing:.1em; text-align:center}
  .btn--lg{padding-inline:1.6em; font-size:.78rem}
  .split > *, .contact > *, .cards > *, .shelf > *{min-width:0}
}

/* ==========================================================================
   Portada: carrusel de casos de antes y después
   El texto ocupa una columna de lectura y los casos van debajo, a todo el
   ancho. La prueba entra en pantalla antes de que haya que hacer scroll.
   ========================================================================== */
.hero__cases{padding-bottom:clamp(56px,7vw,88px)}

.carousel--cases{margin-top:0}
/* Separación entre casos distintos. El antes y el después de una misma
   persona van pegados —2px— para que se lean como una sola pieza; lo que hay
   que despegar es un caso del siguiente, o parecen cuatro fotos sueltas. */
.cases{gap:clamp(2rem,4vw,3.25rem)}
.cases .case{
  flex:none; scroll-snap-align:center; margin:0;
  width:100%;
}
.case__pair{
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
  background:var(--line-soft);
  border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow-sm); border:1px solid var(--line-soft);
}
.case__pair .result__side{position:relative; background:var(--cream-deep); min-height:0}
.case__pair .result__side > img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
}
.case figcaption{
  margin-top:.9rem; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}

.carousel--cases .carousel__nav{top:38%}

/* El tónico como gota de gel: la forma redondeada necesita un brillo propio
   y una sombra más corta para leerse como algo con volumen apoyado, no como
   una silueta recortada. */
.drop-item{position:relative}



/* ==========================================================================
   Portada en tres bloques: titular · casos · texto de apoyo
   El titular ocupa el ancho completo y la prueba entra justo después, antes
   de pedirle nada a quien llega.
   ========================================================================== */
.hero__head{padding-top:clamp(48px,7vw,86px); padding-bottom:clamp(28px,4vw,44px)}
.hero__head h1{max-width:20ch}

.hero__cases{padding-bottom:clamp(32px,4vw,48px)}

.hero__body{
  padding-bottom:clamp(56px,7vw,88px);
  display:grid; gap:1.75rem; max-width:var(--wrap);
}
.hero__body .lead{max-width:45ch; margin:0}
.hero__body .btn-row{margin:0}
.hero__body .consent-note{margin:0}
.hero__body .hero__proof{margin:0; padding-top:2rem}




/* ==========================================================================
   Animaciones de entrada
   ========================================================================== */

/* La portada se presenta por partes: primero la etiqueta, después el titular.
   Solo se esconden si el JS ha podido marcar el documento; sin JS la portada
   se ve completa desde el primer momento. */
.entrada .hero__head .eyebrow,
.entrada .hero__head h1{
  opacity:0; transform:translateY(14px);
}
.entrada-lista .hero__head .eyebrow,
.entrada-lista .hero__head h1{
  opacity:1; transform:none;
  transition:opacity .85s cubic-bezier(.22,.68,.28,1),
             transform .85s cubic-bezier(.22,.68,.28,1);
}
.entrada-lista .hero__head .eyebrow{transition-delay:.05s}
.entrada-lista .hero__head h1{transition-delay:.18s}

/* Las cifras cambian mientras suben: con ancho fijo por dígito no bailan */
.proof__n, .rating__score{font-variant-numeric:tabular-nums}

/* Los casos reaccionan al pasar por encima, muy poco: lo justo para que
   el carrusel no parezca una imagen fija */
.case__pair{transition:box-shadow .35s ease, transform .35s ease}


@media (prefers-reduced-motion:reduce){
  .entrada .hero__head .eyebrow,
  .entrada .hero__head h1{opacity:1; transform:none}
}

/* El tónico como gota de gel ------------------------------------------------
   Una gota limpia y redondeada con una sola gota pequeña al lado. El relleno
   es la textura real del producto; encima va el canto —luz arriba a la
   izquierda, sombra abajo a la derecha— y un reflejo alargado dentro. */
.drop--tonic{
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 413'><g fill='%23000'><path d='M348,74 C428,72 502,112 516,177 C529,238 489,297 414,320 C338,343 253,327 203,281 C157,238 156,169 199,125 C240,84 292,76 348,74 Z'/><ellipse cx='178' cy='332' rx='30' ry='26'/></g></svg>");
  mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 413'><g fill='%23000'><path d='M348,74 C428,72 502,112 516,177 C529,238 489,297 414,320 C338,343 253,327 203,281 C157,238 156,169 199,125 C240,84 292,76 348,74 Z'/><ellipse cx='178' cy='332' rx='30' ry='26'/></g></svg>");
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  object-fit:cover;
  filter:saturate(1.25) brightness(1.04)
         drop-shadow(0 7px 10px rgba(104,92,46,.30))
         drop-shadow(0 1px 2px rgba(104,92,46,.22));
}
.drop-item:last-child::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  bottom:calc(0.85rem + 1.1em);
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 413'><defs><linearGradient id='c' x1='.15' y1='0' x2='.85' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='.9'/><stop offset='.4' stop-color='%23fff' stop-opacity='.15'/><stop offset='.75' stop-color='%238a7334' stop-opacity='.45'/><stop offset='1' stop-color='%236b5726' stop-opacity='.6'/></linearGradient><linearGradient id='h' x1='0' y1='0' x2='.4' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='.95'/><stop offset='1' stop-color='%23fff' stop-opacity='0'/></linearGradient></defs><path d='M348,74 C428,72 502,112 516,177 C529,238 489,297 414,320 C338,343 253,327 203,281 C157,238 156,169 199,125 C240,84 292,76 348,74 Z' fill='none' stroke='url(%23c)' stroke-width='4.5'/><ellipse cx='300' cy='128' rx='92' ry='26' fill='url(%23h)' transform='rotate(-14 300 128)' opacity='.75'/><ellipse cx='178' cy='332' rx='30' ry='26' fill='none' stroke='url(%23c)' stroke-width='3'/><ellipse cx='170' cy='323' rx='11' ry='5' fill='url(%23h)' transform='rotate(-18 170 323)' opacity='.8'/></svg>") center/100% 100% no-repeat;
}

/* Las flechas del carrusel, siempre visibles ---------------------------------
   Son la única señal de que hay más casos a la derecha. Ocultarlas en móvil
   dejaba el carrusel sin pista ninguna. */
.carousel__nav{width:42px; height:42px}
.carousel--cases .carousel__nav{top:34%}
@media (max-width:600px){
  .carousel__nav{width:36px; height:36px}
  .carousel__nav svg{width:17px; height:17px}
  .carousel__nav--prev{left:2px}
  .carousel__nav--next{right:2px}
}
/* La flecha de avanzar llama un poco más que la de retroceder */
.carousel__nav--next:not([disabled]){background:var(--ink); color:var(--bone); border-color:var(--ink)}
.carousel__nav--next:not([disabled]):hover{background:var(--rose-dark); border-color:var(--rose-dark)}

/* El borde derecho del carrusel llevaba un velo degradado para sugerir que el
   contenido seguía. Sobre una foto se leía como una mancha clara encima de la
   piel, justo donde hay que mirar. La flecha y la tarjeta cortada ya dicen lo
   mismo sin ensuciar la imagen. */
.carousel{position:relative}

/* Las tarjetas del método entran desde la izquierda --------------------------
   El resto de la página aparece subiendo; estas se desplazan en horizontal
   para que se lean como una secuencia —01, 02, 03, 04— y no como cuatro
   bloques sueltos. El escalonado ya estaba: solo cambia la dirección. */
.cards .card.reveal{
  transform:translateX(-34px);
  /* Solo duración y curva: con la propiedad «transition» completa se
     reiniciarían los retrasos que escalonan las cuatro tarjetas. */
  transition-duration:.8s;
  transition-timing-function:cubic-bezier(.22,.68,.28,1);
}
.cards .card.reveal.is-in{transform:none}

@media (prefers-reduced-motion:reduce){
  .cards .card.reveal{transform:none; transition:none}
}

/* El titular cabe en dos líneas: una frase por línea ------------------------- */
.hero__head h1{max-width:30ch}
.hero__body .lead{max-width:62ch}

/* Botón de Instagram: era fantasma y se perdía justo donde más interesa que
   la gente siga mirando casos. */
.btn--ig{background:var(--ink); color:var(--bone)}
.btn--ig:hover{background:var(--rose-dark); color:#fff}
.btn--ig svg{width:1.15em; height:1.15em}

/* ==========================================================================
   Cabecera en marrón oscuro
   Antes era casi del mismo tono que la página y el nombre del centro se
   perdía. En marrón oscuro con texto blanco se lee de un vistazo y además
   ancla la parte de arriba, que es lo que le faltaba a la página.
   ========================================================================== */
:root{--cab:#30221B; --cab-borde:rgba(255,255,255,.14)}

.header{
  background:#30221B;
  border-bottom:1px solid transparent;
  backdrop-filter:none;
}
.header.is-stuck{
  background:rgba(48,34,27,.96);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--cab-borde);
  box-shadow:0 1px 24px -12px rgba(0,0,0,.5);
}
.header__inner{min-height:82px}

/* El nombre del centro: blanco, con peso, y en una sola línea mientras quepa */
.brand{color:#fff}
.brand__name{
  color:#fff; font-weight:600; letter-spacing:.005em;
  font-size:clamp(1rem,1.5vw,1.28rem); line-height:1.16;
  text-wrap:balance;
}
.brand__logo{background:#fff; border-color:rgba(255,255,255,.22)}

.nav a{color:rgba(255,255,255,.78)}
.nav a:hover{color:#fff}

.nav-toggle{border-color:var(--cab-borde)}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{background:#fff}
.nav-toggle[aria-expanded="true"] span{background:transparent}

@media (max-width:960px){
  /* El panel desplegable hereda el mismo fondo, si no quedaba a medias */
  .nav{background:#30221B; border-bottom-color:var(--cab-borde)}
  .nav a{border-bottom-color:var(--cab-borde)}
}
@media (max-width:600px){
  /* En pantallas estrechas el nombre cabe en dos líneas, no en tres */
  .brand__name{font-size:.95rem; max-width:none}
  .header__inner{gap:.9rem}
}

/* ==========================================================================
   La etiqueta de sección pierde la rayita
   Ese filete delante es uno de los gestos más vistos en plantillas. Sin él,
   la etiqueta se sostiene sola con el color y el recorrido entre letras.
   ========================================================================== */
.eyebrow::before,
.eyebrow::after,
.center .eyebrow::after,
.head.center .eyebrow::after{display:none}
.eyebrow{gap:0}

/* En las cabeceras de sección el h2 es inline-block —lo necesita el subrayado
   que se dibuja al entrar— y la etiqueta era inline-flex: las dos caían en la
   misma línea, «QUÉ HACEMOS Todos nuestros tratamientos» seguido. Pasa a bloque. */
.head .eyebrow{display:block}

/* Un solo cuerpo de etiqueta en toda la página: la etiqueta abre el titular,
   no es un rótulo menor. Antes la de portada medía .92rem y las de sección
   .68rem, y la diferencia se leía como descuido. */
.eyebrow{font-size:.92rem; letter-spacing:.24em; font-weight:500}
@media (max-width:600px){
  .eyebrow{font-size:.8rem; letter-spacing:.2em}
}

/* En la portada es la primera línea que se lee: gana cuerpo y peso para
   funcionar como declaración y no como simple etiqueta. */
.hero__head .eyebrow{
  font-size:.92rem;
  letter-spacing:.24em;
  font-weight:500;
  color:var(--rose-dark);
  margin-bottom:1.6rem;
}
@media (max-width:600px){
  .hero__head .eyebrow{font-size:.78rem; letter-spacing:.2em}
}

/* Zona táctil de las flechas en móvil -----------------------------------------
   Medían 36px y el mínimo fiable para el dedo son 44. El círculo visible se
   mantiene pequeño; lo que crece es el área que responde al toque. */
@media (max-width:600px){
  .carousel__nav{
    width:44px; height:44px;
    background:rgba(252,250,247,.92);
  }
  .carousel__nav svg{width:18px; height:18px}
  .carousel__nav--prev{left:0}
  .carousel__nav--next{right:0}
}

/* ==========================================================================
   Las tres cifras de confianza
   En pantalla ancha, las tres en una fila sin que puedan partirse. En móvil
   se apilan centradas: antes se repartían 2 + 1 y la tercera quedaba suelta
   debajo, que es lo que se veía descolocado.
   ========================================================================== */
.hero__proof{flex-wrap:nowrap; align-items:flex-start}
.hero__proof > div{min-width:0}

/* Más peso: son el argumento, no un pie de foto */
.proof__n{font-weight:600}
.proof__l{color:var(--ink-soft); font-weight:500}

@media (max-width:760px){
  .hero__proof{
    flex-direction:column; flex-wrap:nowrap;
    align-items:center; text-align:center;
    gap:1.9rem;
  }
  .hero__proof > div{width:100%}
  .proof__n{font-size:2.3rem}
}

/* ==========================================================================
   Las cifras, en la tipografía de palo seco
   Cormorant trae cifras de estilo antiguo: suben y bajan de la línea base,
   así que el «1» salía enano al lado del «35» y el conjunto bailaba. Jost
   tiene cifras de altura uniforme y aquí lo que importa es que el número se
   lea de golpe, no que sea bonito.
   ========================================================================== */
.proof__n,
.rating__score{
  font-family:var(--sans);
  font-weight:500;
  letter-spacing:-.015em;
  font-variant-numeric:lining-nums tabular-nums;
}
.proof__n{font-size:2.6rem}
.rating__score{font-size:1.75rem}
@media (max-width:760px){
  .proof__n{font-size:2.5rem}
}

/* ==========================================================================
   Un solo caso en la portada
   Funciona como anticipo: la galería completa vive más abajo, en su propia
   sección. Se alinea a la izquierda, como el titular que lleva encima.
   ========================================================================== */
.case--solo{
  max-width:560px; margin:0;
  flex:none; width:auto;
}
.case--solo .case__pair{box-shadow:var(--shadow-sm)}
@media (max-width:760px){
  .case--solo{max-width:none}
}

/* ==========================================================================
   Portada en escritorio: centrada
   Los tres bloques se alineaban a la izquierda, así que a partir de 900px la
   mitad derecha quedaba vacía: el titular terminaba a media pantalla y la foto
   flotaba en una esquina. Centrados, el aire sobrante se reparte a los dos
   lados y se lee como decisión y no como hueco.
   En móvil no cambia nada: ahí la columna ya es el ancho de la pantalla.
   ========================================================================== */
@media (min-width:901px){
  .hero{text-align:center}
  .hero__head h1{max-width:26ch; margin-inline:auto}
  /* Centrada y con cuerpo, pero sin dominar: a 860px la foto pesaba más que el
     titular que lleva encima. */
  .case--solo{max-width:660px; margin-inline:auto}
  .hero__body{justify-items:center}
  /* 62ch es el límite de lo que se lee cómodo de un tirón; más ancho no sería
     «aprovechar la pantalla», sería obligar a buscar el principio de cada
     línea. Centrado, el bloque ocupa el hueco sin pasarse. */
  .hero__body .lead{max-width:62ch; margin-inline:auto; text-align:center}
  .hero__body .btn-row{justify-content:center}
  .hero__body .consent-note{margin-inline:auto; text-align:center}
  .hero__proof{justify-content:center; max-width:760px; margin-inline:auto}
  .hero__proof > div{text-align:center}
}

/* La sección de resultados ya trae su propio aire */
.hero__cases{padding-bottom:clamp(36px,5vw,56px)}
#resultados .carousel{margin-top:3rem}
#resultados .center{margin-top:2.25rem}

/* La negrita usa el peso 600 real, que ya está instalado. Sin él el navegador
   fabrica una falsa engordando los trazos, y en una geométrica se nota mucho. */
.lead strong, .hero__sub strong{font-weight:600; color:var(--ink)}

/* ==========================================================================
   Sección «Especialistas en acné en Zaragoza»
   En móvil el orden natural del HTML es el bueno: título, foto y después el
   texto. Antes había que leerse tres párrafos para llegar a la fachada.
   En pantalla ancha la foto vuelve a la derecha ocupando las dos filas.
   ========================================================================== */
.esp{display:grid; gap:1.75rem}
.esp__titulo{margin:0}
.esp__texto{display:grid; gap:1.1rem}
.esp__texto .lead{margin:0}
.esp__foto{margin:0}

@media (min-width:901px){
  .esp{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    grid-template-areas:
      "titulo foto"
      "texto  foto";
    column-gap:clamp(2rem,5vw,4.5rem);
    row-gap:1.6rem;
    align-items:start;
  }
  .esp__titulo{grid-area:titulo}
  .esp__texto{grid-area:texto}
  .esp__foto{grid-area:foto; align-self:center}
}
@media (max-width:900px){
  .esp{gap:1.6rem}
  .esp__foto{max-width:340px; margin-inline:auto}
}

/* Salto de línea solo en pantallas estrechas ---------------------------------
   Permite decidir dónde parte un titular en móvil sin tocar cómo se ve en
   pantalla ancha, donde cabe entero en una línea. */
.salto-movil{display:none}
@media (max-width:620px){
  .salto-movil{display:inline}
}

/* Casos de antes/después: uno solo cada vez --------------------------------
   Se ve un caso entero cada vez. Las flechas van debajo, con los puntos en
   medio, para que se entienda que hay más casos sin tapar las fotos. */
.carousel--cases{max-width:560px; margin-inline:auto}
.carousel__bar{
  display:flex; align-items:center; justify-content:center; gap:1.1rem;
  margin-top:1.4rem;
}
.carousel__bar .carousel__nav{position:static; flex:none}
.carousel__bar .carousel__dots{margin-top:0}