/* ===========================================================
   Lumière Estética — v2
   -----------------------------------------------------------
   Dos decisiones que separan esta versión de la anterior:

   1. Sin serif. La v1 usaba Playfair Display. El serif "porque se ve
      premium" es el reflejo más automático que hay en estética, y el
      resultado es que todas las clínicas se parecen. Aquí manda una
      display sans (Outfit) con tracking cerrado.

   2. Sin rosa empolvado. La paleta nude es al rubro lo que el serif es a
      la tipografía. Se cambió por verde profundo sobre neutros fríos: el
      acento no compite con la piel de las fotos, que ya es cálida.

   Un solo acento en toda la página, un solo radio de esquina, un solo tema.
   =========================================================== */

:root{
  --tinta:#15181B;        /* casi negro, frío, nunca #000 */
  --tinta-2:#3D454C;
  --gris:#6B747C;
  --papel:#FCFCFB;
  --papel-2:#F1F3F2;
  --linea:#E3E7E6;
  --acento:#0F5C4A;       /* verde profundo, saturación contenida */
  --acento-d:#0A4638;
  --acento-cl:#E6F0EC;
  --r:14px;               /* un único radio para toda la página */
  --display:'Outfit',system-ui,sans-serif;
  --texto:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.8,.28,1);
}

body{background:var(--papel);color:var(--tinta);font-family:var(--texto);line-height:1.6}
.wrap{width:min(1180px,92vw);margin:0 auto}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:600}
h3{font-size:1.12rem;font-weight:600;letter-spacing:-.015em}
p{text-wrap:pretty}
:focus-visible{outline:2.5px solid var(--acento);outline-offset:3px;border-radius:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Eyebrow: se usa tres veces en toda la página, no encima de cada título. */
.eyb{font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--acento);margin-bottom:14px}

/* ---------- Botones ---------- */
.cta-b,.ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:.95rem;
  padding:12px 24px;border-radius:var(--r);border:1.5px solid transparent;
  cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),transform .15s var(--ease),border-color .2s var(--ease);
}
.cta-b{background:var(--acento);color:#fff}
.cta-b:hover{background:var(--acento-d);transform:translateY(-2px)}
.cta-b:active{transform:translateY(0)}
.ghost{background:transparent;color:var(--tinta);border-color:var(--linea)}
.ghost:hover{border-color:var(--acento);color:var(--acento)}
.cta-lg{padding:15px 30px;font-size:1.02rem}
.cta-inv{background:#fff;color:var(--acento)}
.cta-inv:hover{background:var(--papel-2)}

/* ---------- Cabecera ---------- */
.hd{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--papel) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.hd-in{display:flex;align-items:center;gap:26px;height:70px}
.mark{font-family:var(--display);font-weight:700;font-size:1.4rem;letter-spacing:-.03em;color:var(--tinta)}
.nv{display:flex;gap:26px;margin-left:auto}
.nv a{font-size:.94rem;color:var(--tinta-2);transition:color .18s}
.nv a:hover{color:var(--acento)}

/* ---------- Hero ----------
   Asimétrico a propósito: el bloque de texto no está centrado ni parte la
   pantalla por la mitad. Cuatro elementos de texto y nada más. */
.hero{padding:clamp(46px,7vw,86px) 0 clamp(40px,6vw,70px)}
.hero-in{display:grid;grid-template-columns:1.02fr .88fr;gap:clamp(30px,5vw,66px);align-items:center}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.05rem);font-weight:700;margin-bottom:20px}
.hero .lead{font-size:clamp(1.04rem,1.5vw,1.19rem);color:var(--tinta-2);max-width:31ch;margin-bottom:30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-fig{position:relative;margin:0}
.hero-fig img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:calc(var(--r) + 8px)}
.hero-fig .tag{
  position:absolute;left:-14px;bottom:26px;display:inline-flex;align-items:center;gap:8px;
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  padding:10px 16px;font-size:.86rem;font-weight:500;box-shadow:0 12px 30px -18px rgba(21,24,27,.45);
}

/* ---------- Credenciales ---------- */
.creds{border-block:1px solid var(--linea);background:var(--papel-2)}
.creds-in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:26px 0}
.creds-in div{display:flex;flex-direction:column;gap:2px}
.creds b{font-family:var(--display);font-size:1.85rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.creds span{font-size:.85rem;color:var(--gris)}

/* ---------- Secciones ---------- */
.sec{padding:clamp(56px,8vw,104px) 0}
.sec-alt{background:var(--papel-2)}
.sec-hd{max-width:56ch;margin-bottom:clamp(28px,4vw,46px)}
.sec-hd p{color:var(--tinta-2);margin-top:12px}

/* ---------- Tratamientos (retícula asimétrica) ----------
   Una pieza grande, dos medianas y tres compactas. Seis tarjetas del mismo
   tamaño obligan a leerlas todas por igual, que es justo lo que no queremos. */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.bx{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.sec-alt .bx{background:var(--papel)}
.bx:hover{transform:translateY(-3px);box-shadow:0 20px 44px -28px rgba(21,24,27,.4)}
.bx img{width:100%;object-fit:cover}
.bx-tx{padding:20px 22px 22px}
.bx p{color:var(--tinta-2);font-size:.93rem;margin-top:7px}
.bx .meta{display:block;margin-top:12px;font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--acento);font-variant-numeric:tabular-nums}
/* La pieza destacada ocupa dos filas. Con la foto arriba y el texto debajo
   la imagen se comía todo el alto y el título quedaba fuera de la vista, así
   que aquí el texto va sobre la foto. De paso la pieza principal se lee
   distinta de las que la acompañan, en vez de ser la misma tarjeta más
   grande. El degradado no es decorativo: sostiene el contraste del texto. */
.bx-lg{grid-column:span 3;grid-row:span 2;position:relative;min-height:420px}
.bx-lg img{position:absolute;inset:0;width:100%;height:100%}
.bx-lg .bx-tx{
  position:relative;margin-top:auto;padding:26px;color:#fff;
  background:linear-gradient(to top,rgba(10,14,12,.9) 0%,rgba(10,14,12,.72) 58%,rgba(10,14,12,0) 100%);
}
.bx-lg h3{font-size:1.45rem}
.bx-lg p{color:rgba(255,255,255,.86)}
.bx-lg .meta{color:#fff;opacity:.95}
.bx-md{grid-column:span 3}
.bx-md img{aspect-ratio:16/7}
.bx-sm{grid-column:span 2;padding:22px}
.bx-sm h3{font-size:1.02rem}

/* ---------- Comparador antes / después ---------- */
.cmp{position:relative;max-width:660px;margin:0 auto;border-radius:var(--r);overflow:hidden;touch-action:none;cursor:ew-resize;user-select:none}
.cmp img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;pointer-events:none}
.cmp-b{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.cmp-hd{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translateX(-1px);box-shadow:0 0 0 1px rgba(21,24,27,.18)}
.cmp-hd::after{
  content:"";position:absolute;top:50%;left:50%;width:38px;height:38px;transform:translate(-50%,-50%);
  border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(21,24,27,.32);
}
.cmp-lb{position:absolute;bottom:14px;font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:color-mix(in srgb,var(--tinta) 72%,transparent);color:#fff;padding:5px 12px;border-radius:999px;pointer-events:none}
.cmp-lb.a{left:14px} .cmp-lb.b{right:14px}
/* El range gobierna el comparador para que también funcione con teclado.
   Se mantiene en el DOM (no display:none) o dejaría de ser enfocable. */
.cmp-r{position:absolute;inset:auto 0 0 0;width:100%;opacity:0;height:44px;cursor:ew-resize}
.cmp-r:focus-visible{opacity:1}

/* ---------- Split editorial ---------- */
.split{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,64px);align-items:center}
.split-fig{margin:0}
.split-fig img{width:100%;aspect-ratio:6/5;object-fit:cover;border-radius:calc(var(--r) + 6px)}
.split-tx h2{margin-bottom:16px}
.split-tx > p{color:var(--tinta-2);margin-bottom:22px}
.lista{list-style:none;padding:0;display:grid;gap:11px;margin-bottom:26px}
.lista li{display:flex;align-items:flex-start;gap:11px;font-size:.96rem}
.lista .ico{color:var(--acento);margin-top:3px}

/* ---------- Opiniones ---------- */
.muro{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.op{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);padding:24px;margin:0}
.op p{font-size:1rem;line-height:1.55}
.op cite{display:block;margin-top:16px;font-style:normal}
.op cite b{display:block;font-family:var(--display);font-weight:600;font-size:.94rem}
.op cite span{font-size:.83rem;color:var(--gris)}
/* La segunda respira más alto: un muro perfectamente alineado se lee como
   plantilla, y estas son opiniones de personas distintas. */
.muro .op:nth-child(2){margin-top:22px}

/* ---------- Oferta ---------- */
.oferta{display:grid;grid-template-columns:1.25fr .75fr;gap:0;border:1px solid var(--linea);border-radius:calc(var(--r) + 6px);overflow:hidden;background:var(--papel)}
.of-tx{padding:clamp(28px,4vw,44px)}
.of-tx h2{margin-bottom:14px}
.of-tx > p{color:var(--tinta-2);margin-bottom:22px}
.of-pr{background:var(--acento);color:#fff;padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;justify-content:center;gap:6px}
.of-pr .antes{font-size:1.05rem;text-decoration:line-through;opacity:.62;font-variant-numeric:tabular-nums}
.of-pr .ahora{font-family:var(--display);font-size:3rem;font-weight:700;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.of-pr .nota{font-size:.84rem;opacity:.8;margin-bottom:16px}
.of-pr .lista .ico{color:#fff}

/* ---------- Preguntas ---------- */
.preg{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 44px}
.preg h3{margin-bottom:7px}
.preg p{color:var(--tinta-2);font-size:.95rem}

/* ---------- Cierre ---------- */
.cierre{background:var(--tinta);color:#fff;padding:clamp(56px,8vw,96px) 0;text-align:center}
.cierre h2{margin-bottom:12px}
.cierre p{color:#B9C0C4;margin-bottom:28px}

/* ---------- Pie ---------- */
.pie{background:var(--papel-2);border-top:1px solid var(--linea);padding:52px 0 26px}
.pie-in{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:32px}
.pie h4{font-size:.95rem;margin-bottom:12px}
.pie p,.pie a{display:flex;align-items:center;gap:9px;color:var(--tinta-2);font-size:.92rem;margin-bottom:8px}
.pie a:hover{color:var(--acento)}
.pie .mark{display:block;margin-bottom:10px}
.pie-bt{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--linea);margin-top:34px;padding-top:20px;font-size:.85rem;color:var(--gris)}
.pie-bt a{display:inline;color:var(--acento);font-weight:600}

/* ---------- Aparición al hacer scroll ---------- */
.rev{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rev.vis{opacity:1;transform:none}

/* ---------- Adaptación ---------- */
@media(max-width:980px){
  .hero-in{grid-template-columns:1fr;gap:32px}
  .hero-fig{order:-1}
  .hero .lead{max-width:52ch}
  .split{grid-template-columns:1fr}
  .muro{grid-template-columns:1fr}
  .muro .op:nth-child(2){margin-top:0}
  .oferta{grid-template-columns:1fr}
  .preg{grid-template-columns:1fr;gap:24px}
  .bx-lg,.bx-md{grid-column:span 6}
  .bx-sm{grid-column:span 2}
  .pie-in{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  /* Al ocultar el menú se pierde el margin-left:auto que empujaba el botón
     al extremo, y quedaba pegado al logo. Se lo pasamos al botón. */
  .nv{display:none}
  .hd-in{gap:14px}
  .hd-in .cta-b{margin-left:auto}
  .creds-in{grid-template-columns:repeat(2,1fr);gap:18px}
  .bento{grid-template-columns:1fr}
  .bx-lg,.bx-md,.bx-sm{grid-column:span 1}
  .hero-fig .tag{left:12px;bottom:12px}
  .pie-in{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rev{opacity:1;transform:none}
}

/* El sprite de iconos no se muestra: solo define los símbolos que reusa
   la página. Iba como estilo suelto en el HTML. */
.sprite{position:absolute}

/* Aclaración bajo el comparador. */
.pie-nota{max-width:660px;margin:16px auto 0;text-align:center;font-size:.85rem;color:var(--gris)}