/* =========================================================
   LAURA TRUJILLO · DERMATÓLOGA
   REDISEÑO 2026 — "El reflejo, de adentro hacia afuera"
   Sistema editorial sobre el branding oficial completo
   (coral · ámbar · menta · nude · blush · plumas · esfera)
   ========================================================= */

/* ---------- FUENTES (de marca) ---------- */
@font-face { font-family:"Grand Halva"; src:url("../fonts/GRAND_HALVA.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face { font-family:"RNS Miles"; src:url("../fonts/RNS-Miles/RNSMiles-Thin.otf") format("opentype"); font-weight:100; font-display:swap; }
@font-face { font-family:"RNS Miles"; src:url("../fonts/RNS-Miles/RNSMiles-Light.otf") format("opentype"); font-weight:300; font-display:swap; }
@font-face { font-family:"RNS Miles"; src:url("../fonts/RNS-Miles/RNSMiles-LightItalic.otf") format("opentype"); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:"RNS Miles"; src:url("../fonts/RNS-Miles/RNSMiles-Regular.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face { font-family:"RNS Miles"; src:url("../fonts/RNS-Miles/RNSMiles-RegularItalic.otf") format("opentype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"RNS Miles"; src:url("../fonts/RNS-Miles/RNSMiles-Medium.otf") format("opentype"); font-weight:500; font-display:swap; }
@font-face { font-family:"RNS Miles"; src:url("../fonts/RNS-Miles/RNSMiles-MediumItalic.otf") format("opentype"); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:"RNS Miles"; src:url("../fonts/RNS-Miles/RNSMiles-Bold.otf") format("opentype"); font-weight:700; font-display:swap; }

/* ---------- TOKENS (paleta oficial completa) ---------- */
:root {
  --coral:      #EC6F50;   /* Pantone 1635C — color insignia */
  --coral-deep: #C9512F;   /* texto/acento profundo */
  --amber:      #F4B05C;   /* Pantone 7507C — la calidez que faltaba */
  --amber-soft: #F9CF95;
  --mint:       #B0CFC1;   /* #B0CFC1 — naturaleza / sanación */
  --mint-deep:  #5F8E78;   /* menta legible sobre claro */
  --nude:       #E9CCBE;   /* #E9CCBE — piel */
  --blush:      #FEF2F0;   /* #FEF2F0 */
  --cream:      #FBF5EF;   /* blanco cálido para fondos */
  --canvas:     color-mix(in srgb, var(--amber) 10%, #fff); /* neutro cálido DOMINANTE (ámbar 10% sobre blanco, derivado del brandbook) */
  --canvas-2:   color-mix(in srgb, var(--amber) 18%, #fff); /* paso tonal sutil: mismo cálido, un punto más hondo, para separar secciones contiguas */
  --ink:        #4A3B35;   /* texto cálido (no negro frío) */
  --ink-soft:   #82706A;
  --navy:       #2C3E6B;   /* solo micro-texto, según brandbook */
  --line:       rgba(74,59,53,.14);

  --font-display: "Grand Halva", "Times New Roman", serif;
  --font-body: "RNS Miles", system-ui, -apple-system, sans-serif;

  --maxw: 1280px;
  --pad-x: clamp(1.25rem, 5vw, 4.5rem);
  --t: 600ms cubic-bezier(.16,.84,.34,1);
  --t-fast: 280ms cubic-bezier(.2,.7,.3,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; font-size:107%; }
body {
  margin:0;
  font-family:var(--font-body);
  font-weight:300;
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--coral); color:#fff; }
:focus-visible { outline:2px solid var(--coral-deep); outline-offset:3px; }

/* ---------- TIPOGRAFÍA ---------- */
.display {
  font-family:var(--font-display);
  text-transform:uppercase;
  font-weight:400;
  line-height:.96;
  letter-spacing:.01em;
}
.serif-italic { font-family:var(--font-body); font-style:italic; font-weight:300; text-transform:none; }
.kicker {
  font-family:var(--font-body);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:.72rem;
  color:var(--coral-deep);
}
.kicker.on-dark { color:#fff; opacity:.85; }

/* ---------- LAYOUT ---------- */
.shell { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }
.section { position:relative; padding-block:clamp(3.25rem,6.5vw,6.5rem); }
.section--tight { padding-block:clamp(2.5rem,5vw,4.5rem); }

/* ---------- BOTONES ---------- */
.btn {
  --bg:var(--coral); --fg:#fff;
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-body); font-weight:500;
  font-size:.98rem; letter-spacing:.005em; text-transform:none;
  padding:.95rem 1.9rem; border-radius:999px;
  background:var(--bg); color:var(--fg);
  border:1.5px solid var(--bg);
  transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
  will-change:transform;
}
.btn svg { width:16px; height:16px; transition:transform var(--t-fast); }
.btn:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(201,81,47,.28); }
.btn:hover svg { transform:translateX(4px); }
.btn--ghost { --bg:transparent; --fg:var(--coral-deep); border-color:var(--coral); }
.btn--ghost:hover { background:var(--coral); color:#fff; box-shadow:none; }
.btn--light { --bg:#fff; --fg:var(--coral-deep); border-color:#fff; }
.link-arrow {
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:500; letter-spacing:.04em; color:var(--coral-deep);
  border-bottom:1.5px solid transparent; padding-bottom:2px;
  transition:border-color var(--t-fast), gap var(--t-fast);
}
.link-arrow svg { width:17px; height:17px; flex-shrink:0; transition:transform var(--t-fast); }
.link-arrow:hover { border-color:var(--coral); gap:.9rem; }
.link-arrow:hover svg { transform:translateX(3px); }

/* ---------- MOTIVOS DE MARCA ---------- */
/* Esfera (los 7 círculos = de adentro hacia afuera) */
.sphere {
  position:absolute; pointer-events:none; user-select:none;
  background:url("../logo/circle-rings.png") center/contain no-repeat;
  aspect-ratio:1;
}
.sphere--ghost { opacity:.5; }
/* Halo orgánico difuso */
.glow {
  position:absolute; pointer-events:none; border-radius:50%;
  filter:blur(48px); opacity:.55;
}
/* Pluma */
.feather { position:absolute; pointer-events:none; user-select:none; opacity:.9; }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--cream) 86%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav .shell { display:flex; align-items:center; justify-content:space-between; min-height:78px; gap:1.5rem; }
.nav-logo img { height:42px; width:auto; }
.nav-menu { display:flex; align-items:center; gap:2.1rem; list-style:none; margin:0; padding:0; }
.nav-menu a:not(.btn) {
  font-size:.82rem; font-weight:400; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); position:relative; padding-block:.4rem;
}
.nav-menu a:not(.btn)::after {
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--coral);
  transition:width var(--t-fast);
}
.nav-menu a:not(.btn):hover::after, .nav-menu a[aria-current="page"]::after { width:100%; }
.nav-menu .btn { padding:.72rem 1.45rem; font-size:.9rem; }
.nav-toggle { display:none; background:none; border:0; color:var(--ink); cursor:pointer; padding:.4rem; }
.nav-toggle svg { width:26px; height:26px; }

/* =========================================================
   HERO — editorial, asimétrico
   ========================================================= */
.hero { position:relative; overflow:clip; background:linear-gradient(168deg, #FCF4EC 0%, var(--canvas) 62%); }
.hero-glow-1 { width:58vw; height:58vw; right:-12vw; top:-16vw; background:radial-gradient(circle, var(--amber-soft), transparent 62%); opacity:.5; }
.hero-glow-2 { width:40vw; height:40vw; left:-14vw; bottom:-20vw; background:radial-gradient(circle, var(--amber-soft), transparent 65%); opacity:.22; }
.hero .shell { position:relative; z-index:2; }
.hero-grid {
  display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:2rem;
  min-height:clamp(520px, 76vh, 740px); padding-block:clamp(2rem,5vw,4rem);
}
.hero-eyebrow { display:flex; align-items:center; gap:1rem; margin-bottom:2rem; }
.hero-eyebrow::before { content:""; width:54px; height:1.5px; background:var(--coral); }
.hero h1 {
  margin:0; color:var(--ink);
  font-family:var(--font-display); text-transform:uppercase; font-weight:400;
  font-size:clamp(3.1rem, 8.5vw, 7.4rem); line-height:.94; letter-spacing:.005em;
}
.hero h1 .reflejo { color:var(--coral-deep); display:block; }
.hero h1 .alma { font-family:var(--font-body); font-style:italic; font-weight:300; text-transform:none;
  font-size:.42em; letter-spacing:0; color:var(--ink-soft); display:block; margin-top:.5rem; }
.hero-lead { max-width:31rem; font-size:1.2rem; color:var(--ink); margin:1.8rem 0 2.4rem; line-height:1.6; }
.hero-actions { display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }
.hero-figure { position:relative; height:100%; min-height:340px; }
.hero-figure .sphere { width:min(46vw,520px); right:-6%; top:50%; transform:translateY(-50%); }
.hero-figure .feather { width:clamp(120px,16vw,210px); left:-6%; top:8%; transform:rotate(8deg); }
/* sello vertical */
.hero-stamp {
  position:absolute; z-index:3; right:calc(var(--pad-x) - .4rem); bottom:clamp(1.5rem,5vw,3rem);
  writing-mode:vertical-rl; font-size:.7rem; letter-spacing:.32em; text-transform:uppercase;
  color:#000; display:flex; align-items:center; gap:1rem;
}
.hero-stamp::after { content:""; height:64px; width:1.5px; background:var(--line); }
/* hero rediseñado: titular grande + símbolo de marca como marca de agua */
.hero--new .hero-grid { grid-template-columns:1fr; }
.hero--new .hero-text { position:relative; z-index:2; max-width:60rem; }
.hero--new h1 { font-size:clamp(2.6rem,6.4vw,5.6rem); line-height:.95; }
.hero--new .hero-lead { max-width:34rem; }
.hero-wm {
  position:absolute; z-index:1; pointer-events:none; user-select:none;
  right:-10%; top:50%; transform:translateY(-50%);
  width:min(66vw,86vh,920px); opacity:.5;
  -webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);
}
/* hero a pantalla completa en escritorio; la esfera, ambiental, sangra por la derecha */
@media (min-width:961px){
  .hero--new .hero-grid { min-height:calc(100svh - 79px); }
}
@media (max-width:760px){
  .hero--new .hero-grid { padding-block:clamp(4rem,12vw,5.5rem) clamp(3.5rem,13vw,5.5rem); }
  .hero--new h1 { margin-bottom:.4rem; }
  .hero--new .hero-lead { margin:1.4rem 0 2.2rem; }
  .hero-wm { top:-5%; right:-28%; width:98vw; opacity:.22; }
}

/* =========================================================
   DIFERENCIADORES — lista editorial numerada
   ========================================================= */
.why { background:radial-gradient(130% 55% at 0% 100%, var(--canvas-2), transparent 55%), var(--canvas); overflow:clip; }
.why .shell { position:relative; z-index:2; }
.why-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.why h2 { font-family:var(--font-display); text-transform:uppercase; font-weight:400;
  font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1; margin:1rem 0 0; color:var(--ink); }
.why h2.why-title { font-size:clamp(2.8rem,6vw,4.8rem); margin:0; }
.why-list { display:flex; flex-direction:column; }
.why-item { display:grid; grid-template-columns:auto 1fr; gap:1.6rem; padding:2rem clamp(.5rem,1.4vw,1.4rem); border-top:1px solid var(--line);
  position:relative; isolation:isolate; transition:padding var(--t-fast); }
.why-item:last-child { border-bottom:1px solid var(--line); }
.why-item::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:12px; background:#fff; opacity:0; box-shadow:0 12px 30px rgba(74,59,53,0); transition:opacity var(--t-fast), box-shadow var(--t-fast); }
.why-item:hover::before { opacity:1; box-shadow:0 12px 30px rgba(74,59,53,.07); }
.why-item:hover { padding-left:clamp(1.3rem,2.4vw,2.2rem); }
.why-item .n { font-family:var(--font-display); font-size:1.4rem; color:var(--coral-deep); line-height:1; padding-top:.2rem; transition:color var(--t-fast); }
.why-item:hover .n { color:var(--coral-deep); }
.why-item h3 { margin:0 0 .5rem; font-family:var(--font-body); font-weight:500; font-size:1.3rem; color:var(--ink); letter-spacing:.01em; }
.why-item p { margin:0; color:var(--ink-soft); font-size:1.08rem; max-width:36rem; line-height:1.6; }


/* =========================================================
   CTA AGENDA — invitación coral
   ========================================================= */
.cta { background:linear-gradient(150deg, var(--coral), var(--coral-deep)); color:#fff; overflow:clip; text-align:center; }
.cta .sphere { width:34vw; left:50%; top:-16%; transform:translateX(-50%); opacity:.22; mix-blend-mode:soft-light; }
.cta .feather { width:clamp(80px,8vw,130px); right:8%; top:16%; transform:rotate(-14deg); opacity:.32; }
.cta .shell { position:relative; z-index:2; max-width:760px; }
/* CTA de cierre en navy: fluye hacia el footer como una sola zona oscura (sin choque coral-navy) */
.cta.cta--close { background:radial-gradient(125% 85% at 50% -12%, color-mix(in srgb, var(--amber) 16%, transparent), transparent 58%), var(--navy);
  padding-bottom:clamp(2rem,4vw,3rem); }
.cta h2 { font-family:var(--font-display); text-transform:uppercase; font-weight:400;
  font-size:clamp(2.4rem,6vw,5rem); line-height:.98; margin:1.2rem 0; }
.cta p { margin:0 auto 2.4rem; max-width:34rem; opacity:.94; font-size:1.08rem; }

/* =========================================================
   CONTACTO
   ========================================================= */
.contact { background:var(--canvas); }
.contact-wrap {
  max-width:640px; margin-inline:auto;
  border-radius:32px; overflow:hidden; background:#fff;
  box-shadow:0 34px 80px rgba(74,59,53,.10);
}
.contact-head { text-align:center; max-width:46rem; margin:0 auto clamp(2rem,4vw,3rem); }
.contact-head .kicker { display:block; margin-bottom:.7rem; }
.contact-head h2 { font-family:var(--font-display); text-transform:uppercase; font-weight:400;
  font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1; margin:0; color:var(--ink); }
.contact-aside {
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(160deg, var(--nude), #DDB9A8);
  color:var(--ink); padding:clamp(2.4rem,4vw,3.8rem);
  display:flex; flex-direction:column; justify-content:center;
}
.contact-aside .sphere { width:78%; right:-22%; bottom:-26%; opacity:.5; mix-blend-mode:soft-light; }
.contact-aside .kicker { color:var(--coral-deep); }
.contact-aside h2 { font-family:var(--font-display); text-transform:uppercase; font-weight:400;
  font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1; margin:1rem 0; color:var(--ink); }
.contact-aside p { margin:0 0 2rem; max-width:26rem; color:#6c5249; }
.contact-aside .btn { align-self:flex-start; position:relative; z-index:2; }
.contact-list {
  list-style:none; margin:0; padding:clamp(.6rem,1.5vw,1.4rem) clamp(1.6rem,3vw,3rem);
  display:flex; flex-direction:column; justify-content:center;
}
.contact-list li { display:grid; grid-template-columns:auto 1fr; gap:1.3rem; align-items:center;
  padding:1.4rem 0; border-bottom:1px solid var(--line); }
.contact-list li:last-child { border-bottom:0; }
.contact-list .ico { width:48px; height:48px; border-radius:50%; background:var(--blush); color:var(--coral-deep);
  display:flex; align-items:center; justify-content:center; }
.contact-list .ico svg { width:21px; height:21px; }
.contact-list .lbl { display:block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.25rem; }
.contact-list a, .contact-list p { margin:0; font-size:1.02rem; word-break:break-word; }
.contact-list p { color:var(--ink); }
.contact-list a { color:var(--coral-deep); text-underline-offset:3px; transition:color var(--t-fast); }
.contact-list a:hover { text-decoration:underline; }

/* =========================================================
   LA DERMATÓLOGA — foto + credenciales + Registro Médico
   ========================================================= */
.medica { background:var(--canvas); overflow:clip; }
.medica-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(2.2rem,5vw,5rem); align-items:center; }
.medica-head-m { display:none; }
.medica-photo { position:relative; }
.medica-photo .glow { width:98%; aspect-ratio:1; left:1%; top:6%; background:radial-gradient(circle, var(--amber-soft), transparent 60%); opacity:.42; z-index:0; }
.medica-frame {
  position:relative; z-index:1; aspect-ratio:4/5; border-radius:210px 210px 28px 28px; overflow:hidden;
  background:linear-gradient(165deg, var(--nude), var(--blush)); box-shadow:0 34px 74px rgba(74,59,53,.14);
}
.medica-frame img { width:100%; height:100%; object-fit:cover; }
/* Inicio "feature" (escritorio): foto a sangre por la izquierda + degradado hacia el texto (estilo og) */
@media (min-width:961px){
  .medica { padding-block:0; }
  .medica > .shell { max-width:none; padding:0; }
  .medica-grid { grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr); gap:0; align-items:stretch; min-height:clamp(500px,72vh,720px); }
  .medica .medica-photo { position:relative; height:100%; max-width:none; }
  .medica .medica-frame { aspect-ratio:auto; height:100%; width:100%; border-radius:0; background:none; box-shadow:none; }
  .medica .medica-frame img { object-position:50% 26%; }
  .medica .medica-photo .glow { display:none; }
  .medica .medica-photo::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(90deg, transparent 80%, var(--canvas) 100%); }
  .medica-body { align-self:center; max-width:48rem;
    padding:clamp(2rem,5vw,4rem) var(--pad-x) clamp(2rem,5vw,4rem) clamp(2.5rem,5vw,5rem); }
}
.medica-frame .ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.7rem; color:#b08f80; text-align:center; padding:1.5rem; }
.medica-frame .ph svg { width:44px; height:44px; opacity:.6; }
.medica-frame .ph span { font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; }
.medica-body .quote { font-family:var(--font-display); text-transform:uppercase; font-weight:400;
  font-size:clamp(1.6rem,3.3vw,2.6rem); line-height:1.1; color:var(--ink); margin:1rem 0 1.5rem; }
.medica-body .quote em { color:var(--coral-deep); font-family:var(--font-body); font-style:italic; text-transform:none; }
.medica-who { font-family:var(--font-display); font-weight:400; color:var(--ink); margin:0 0 .5rem; font-size:clamp(1.5rem,2.8vw,1.9rem); line-height:1.05; }
.medica-cred { color:var(--ink-soft); margin:0 0 1.9rem; font-size:1.12rem; max-width:36rem; line-height:1.55; }
.medica-body > p { color:var(--ink-soft); max-width:40rem; margin:0 0 1.6rem; }

/* =========================================================
   TU CONSULTA — proceso clínico en pasos
   ========================================================= */
.steps { background:var(--blush); position:relative; overflow:clip; }
.steps .shell { position:relative; z-index:1; }
.steps::before { content:""; position:absolute; z-index:0; right:-8%; top:50%; transform:translateY(-50%);
  width:min(46vw,560px); aspect-ratio:1; background:url(../logo/circle-rings.png) center/contain no-repeat;
  opacity:.16; pointer-events:none; }
.steps .head { max-width:46rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.steps h2 { font-family:var(--font-display); text-transform:uppercase; font-weight:400;
  font-size:clamp(2rem,4.4vw,3.4rem); line-height:1; margin:1rem 0 0; color:var(--ink); }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.6rem); }
.step { position:relative; }
.step-rail { display:flex; align-items:center; gap:.85rem; margin:.4rem 0 1.3rem; }
.step .n { font-family:var(--font-display); font-size:1.3rem; letter-spacing:.18em; color:var(--coral-deep); flex-shrink:0; }
.step .bar { flex:1; height:1.5px; background:var(--coral); opacity:.3; }
.step h3 { margin:0 0 .7rem; font-family:var(--font-body); font-weight:500; font-size:1.4rem; color:var(--ink); }
.step p { margin:0; color:var(--ink-soft); font-size:1.18rem; line-height:1.55; }
.steps-cta { margin-top:clamp(2.6rem,5vw,4rem); text-align:center; }

/* =========================================================
   TRATAMIENTOS — invitación editorial (sin enumerar) -> tratamientos.html
   El menú de los 5 vive SOLO en la página; aquí solo el gancho.
   ========================================================= */
.tinvite { background:var(--mint); position:relative; overflow:clip; text-align:center; }
.tinvite .feather { width:clamp(120px,15vw,205px); }
.tinvite .feather.f1 { left:1.5%; bottom:9%; transform:rotate(-4deg); opacity:.5; }
.tinvite .feather.f2 { right:1.5%; bottom:9%; transform:scaleX(-1) rotate(-4deg); opacity:.4; }
.tinvite .shell { position:relative; z-index:2; }
.tinvite .inner { max-width:44rem; margin-inline:auto; }
.tinvite .kicker { color:var(--coral-deep); }
.tinvite h2 { font-family:var(--font-body); font-weight:600; text-transform:none; letter-spacing:-.015em;
  font-size:clamp(1.7rem,3.2vw,2.8rem); line-height:1.22; color:var(--ink); margin:1.1rem 0 2rem; }
.tinvite h2 em { font-style:normal; color:var(--coral-deep); }

/* =========================================================
   FOOTER
   ========================================================= */
.foot { background:var(--navy); color:#e9ddd6; padding-block:clamp(3.5rem,6vw,5rem) 2rem; overflow:clip; position:relative; }
.foot::before { content:""; position:absolute; top:clamp(1.3rem,2.8vw,2rem); left:50%; transform:translateX(-50%);
  width:56px; height:2px; border-radius:2px; background:var(--amber); opacity:.85; }
.foot .glow { width:30vw; height:30vw; left:-6vw; bottom:-12vw; background:radial-gradient(circle,var(--coral),transparent 60%); opacity:.22; }
.foot .shell { position:relative; z-index:2; }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.12); }
.foot-logo img { height:42px; width:auto; margin-bottom:1.4rem; }
.foot-logo p { max-width:24rem; color:#c9b8af; font-size:.95rem; }
.foot h4 { font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); margin:0 0 1.2rem; }
.foot ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.foot ul a, .foot ul li { color:#d8c9c1; font-size:.95rem; }
.foot ul a:hover { color:#fff; }
.foot-social { display:flex; gap:.8rem; margin-top:1.4rem; }
.foot-social a { width:40px; height:40px; border:1px solid rgba(255,255,255,.2); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:background var(--t-fast), border-color var(--t-fast); }
.foot-social a:hover { background:var(--coral); border-color:var(--coral); }
.foot-social svg { width:18px; height:18px; }
.foot-bottom { display:flex; justify-content:space-between; gap:1rem 1.5rem; flex-wrap:wrap; padding-top:1.6rem; font-size:.8rem; color:#b8a79e; }
.foot-bottom a { color:inherit; text-decoration:underline; text-underline-offset:3px; transition:color var(--t-fast); }
.foot-bottom a:hover { color:#fff; }
.foot-disclaimer { max-width:56rem; margin:0; padding-top:1.8rem; font-size:.8rem; line-height:1.55; color:#9d8d84; }

/* Páginas legales (privacidad, etc.) */
.legal .shell { max-width:780px; }
.legal h2 { font-family:var(--font-body); font-weight:600; font-size:1.3rem; color:var(--ink); margin:2.2rem 0 .6rem; }
.legal p { color:var(--ink-soft); line-height:1.7; margin:0 0 1rem; max-width:66ch; }
.legal a { color:var(--coral-deep); }
.legal-note { background:var(--canvas-2); border-left:3px solid var(--amber); padding:1rem 1.2rem; border-radius:10px; color:var(--ink); font-size:.95rem; margin-bottom:1.8rem; }

/* WhatsApp flotante */
.wa-float { position:fixed; right:1.4rem; bottom:1.4rem; z-index:60; width:58px; height:58px; border-radius:50%;
  background:var(--coral); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px rgba(236,111,80,.38); transition:transform var(--t-fast), background var(--t-fast); }
.wa-float:hover { transform:scale(1.08); background:var(--coral-deep); }
.wa-float svg { width:30px; height:30px; }

.skip-link { position:absolute; left:-999px; }
.skip-link:focus { left:1rem; top:1rem; z-index:100; background:#fff; padding:.7rem 1rem; border-radius:8px; }

/* =========================================================
   PÁGINAS INTERNAS
   ========================================================= */
.page-hero { position:relative; overflow:clip; background:linear-gradient(168deg,#FCF4EC,var(--cream) 62%);
  padding-block:clamp(2.6rem,4.8vw,4.2rem) clamp(1.3rem,2.4vw,2rem); }
.page-hero .glow { width:50vw; height:50vw; right:-14vw; top:-20vw; background:radial-gradient(circle,var(--amber-soft),transparent 62%); opacity:.42; }
.page-hero .shell { position:relative; z-index:2; }
.page-hero .eyebrow { display:flex; align-items:center; gap:1rem; }
.page-hero .eyebrow::before { content:""; width:54px; height:1.5px; background:var(--coral); }
.page-hero .eyebrow--bare { margin-bottom:1.2rem; }
.page-hero .eyebrow--bare::before { width:64px; }
.page-hero h1 { font-family:var(--font-display); text-transform:uppercase; font-weight:400; line-height:.98;
  font-size:clamp(2.5rem,6.5vw,5rem); color:var(--ink); margin:1.6rem 0 0; }
.page-hero h1 em { color:var(--coral-deep); font-family:var(--font-body); font-style:italic; text-transform:none; font-size:.5em; display:block; margin-top:.4rem; }
.page-hero .lead { max-width:42rem; font-size:1.2rem; color:var(--ink); margin:1.7rem 0 0; line-height:1.6; }
/* La sección que sigue al intro no repite el padding superior completo */
.page-hero + .section { padding-top:clamp(1.5rem,3vw,2.6rem); }

/* BIO (sobre mí) */
.bio-intro { position:relative; overflow:clip; background:linear-gradient(168deg,#FCF4EC,var(--cream) 60%); }
.bio-intro > .glow { width:48vw; height:48vw; right:-14vw; top:-22vw; background:radial-gradient(circle,var(--amber-soft),transparent 62%); opacity:.4; }
.bio-intro .shell { position:relative; z-index:2; }
.bio-grid { display:grid; grid-template-columns:.82fr 1.18fr; grid-template-areas:"photo head" "photo body"; column-gap:clamp(2.2rem,5vw,5rem); row-gap:0; align-items:center; }
.bio-grid .medica-photo { grid-area:photo; align-self:center; }
.bio-head { grid-area:head; align-self:end; }
.bio-intro .bio-text { grid-area:body; align-self:start; }
/* Sobre mí: foto a sangre estilo editorial (igual que el inicio) — escritorio */
@media (min-width:961px){
  .bio-intro { padding-block:0; }
  .bio-intro > .shell { max-width:none; padding:0; }
  .bio-grid { grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr); column-gap:0; align-items:stretch; min-height:clamp(560px,82vh,860px); }
  .bio-grid .medica-photo { align-self:stretch; height:100%; max-width:none; position:relative; }
  .bio-intro .medica-frame { aspect-ratio:auto; height:100%; width:100%; border-radius:0; background:none; box-shadow:none; }
  .bio-intro .medica-frame img { object-position:50% 28%; }
  .bio-intro .medica-photo .glow { display:none; }
  .bio-intro .medica-photo::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(90deg, transparent 80%, var(--cream) 100%); }
  .bio-head { align-self:end; padding:clamp(1.5rem,4vw,3rem) var(--pad-x) 0 clamp(2.5rem,5vw,5rem); }
  .bio-intro .bio-text { align-self:start; padding:.6rem var(--pad-x) clamp(1.5rem,4vw,3rem) clamp(2.5rem,5vw,5rem); }
}
.bio-text .kicker { display:block; margin-bottom:.9rem; }
.bio-head h1 { font-family:var(--font-body); font-weight:600; text-transform:none; letter-spacing:-.015em;
  line-height:1.06; font-size:clamp(2rem,3.6vw,3rem); color:var(--ink); margin:0 0 1.5rem; }
.bio-sub { color:var(--ink-soft); margin:0 0 1.5rem; font-size:1.05rem; text-wrap:balance; }
.bio-grid .quote { font-family:var(--font-display); text-transform:uppercase; font-weight:400;
  font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.12; color:var(--ink); margin:0 0 1.6rem; }
.bio-grid .quote em { color:var(--coral-deep); font-family:var(--font-body); font-style:italic; text-transform:none; }
.bio-text p { color:var(--ink-soft); margin:0 0 1.2rem; max-width:42rem; }
.bio-text p strong { color:var(--ink); font-weight:500; }

/* TIMELINE FORMACIÓN */
.formacion { background:var(--blush); }
.formacion .head, .pubs .head, .afil-band .head { max-width:46rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.formacion h2, .pubs h2, .afil-band h2, .bio h2 { font-family:var(--font-display); text-transform:uppercase; font-weight:400;
  font-size:clamp(2rem,4.4vw,3.4rem); line-height:1; margin:1rem 0 0; color:var(--ink); }
.formacion-grid { display:grid; grid-template-columns:1.55fr .85fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.formacion-main .head { margin-bottom:clamp(2rem,4vw,3rem); }
.formacion .head .lead { color:var(--ink-soft); font-size:1.12rem; line-height:1.55; margin:1.1rem 0 0; max-width:30rem; }
.timeline { list-style:none; padding:0; margin:0; }
.tl-item { display:grid; grid-template-columns:auto 1fr; gap:1.4rem; padding-bottom:2.3rem; }
.tl-item:last-child { padding-bottom:0; }
.tl-ico { position:relative; width:54px; height:54px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--coral-deep); background:#fff; border:1.5px solid color-mix(in srgb, var(--coral) 42%, transparent); }
.tl-ico svg { width:24px; height:24px; }
.tl-item:not(:last-child) .tl-ico::after { content:""; position:absolute; left:50%; transform:translateX(-50%); top:54px; bottom:-2.3rem; width:2px; background:rgba(236,111,80,.2); }
.tl-body { padding-top:.5rem; }
.tl-body h3 { margin:0 0 .35rem; font-weight:600; color:var(--ink); font-size:1.02rem; text-transform:uppercase; letter-spacing:.04em; line-height:1.28; }
.tl-body h3 span { display:block; color:var(--coral-deep); }
.tl-body p { margin:0; color:var(--ink-soft); font-size:1.02rem; line-height:1.5; }

/* Enfoque especializado — callout editorial (sin tarjeta) */
.enfoque { position:sticky; top:108px; padding-top:1.5rem; border-top:2px solid var(--coral); }
.enfoque .kicker { display:block; margin-bottom:1.1rem; color:var(--coral-deep); }
.enfoque h3 { font-family:var(--font-display); text-transform:uppercase; font-weight:400; color:var(--ink);
  font-size:clamp(1.55rem,2.6vw,2.15rem); line-height:1.06; margin:0; }

/* AFILIACIONES band */
.afil-band { background:var(--cream); text-align:center; }
.afil-logos { display:flex; justify-content:center; align-items:flex-start; gap:clamp(1.5rem,3vw,2.5rem); flex-wrap:wrap; }
.afil-logos figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:1.1rem; width:clamp(16rem,25vw,20rem); }
.afil-plate { width:100%; min-height:84px; display:flex; align-items:center; justify-content:center; padding:0; }
/* Igualar por ALTURA para que los dos logos se vean del mismo tamaño (no por ancho).
   El contenedor (figure) es lo bastante ancho para que el logo más ancho alcance esta altura. */
.afil-plate img { height:clamp(48px,6vw,72px); width:auto; max-width:100%; object-fit:contain; }
.afil-logos figcaption { font-size:.86rem; color:var(--ink-soft); line-height:1.4; }

/* TARJETAS (tratamientos / publicaciones / blog) */
.card-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2vw,1.5rem); }
.card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:clamp(1.8rem,3vw,2.5rem); position:relative; isolation:isolate;
  transition:transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
.card::before { content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:color-mix(in srgb, var(--mint) 55%, #fff); opacity:0; transition:opacity var(--t-fast); }
.card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(74,59,53,.10); border-color:var(--mint); }
.card:hover::before { opacity:1; }
.card .ico { display:block; color:var(--coral); margin-bottom:1.1rem; }
.card .ico svg { width:46px; height:46px; }
.card h3 { margin:0 0 .6rem; font-weight:500; font-size:1.3rem; color:var(--ink); line-height:1.25; }
.card p { margin:0 0 1.5rem; color:var(--ink-soft); flex:1; }
.card .meta { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; margin-bottom:.9rem; }
.card .tag { font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--coral-deep);
  background:var(--blush); padding:.3rem .7rem; border-radius:999px; }
.card .yr { margin-left:auto; font-size:.85rem; color:var(--ink-soft); }
.card .jr { font-style:italic; color:var(--ink-soft); font-size:.9rem; }
.card .authors { font-size:.9rem; color:var(--ink); margin:0 0 1.2rem; }
.card .authors strong { color:var(--coral-deep); }
.card.feature { grid-column:1 / -1; }

/* =========================================================
   BLOG — tarjetas con bloque de color (preferencia de la clienta)
   ========================================================= */
.post-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2vw,1.6rem); }
.post-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:22px;
  overflow:hidden; transition:transform var(--t-fast), box-shadow var(--t-fast); }
.post-card:hover { transform:translateY(-5px); box-shadow:0 20px 44px rgba(74,59,53,.10); }
.post-thumb { aspect-ratio:16/7; position:relative; overflow:hidden; }
.post-thumb::after { content:""; position:absolute; width:62%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.55), transparent 65%); bottom:-26%; right:-12%; }
.post-thumb.t-coral { background:linear-gradient(135deg, rgba(236,111,80,.42), rgba(236,111,80,.1)), linear-gradient(180deg,#F3A98E,var(--blush)); }
.post-thumb.t-mint  { background:linear-gradient(135deg, rgba(176,207,193,.55), rgba(176,207,193,.15)), linear-gradient(180deg,var(--mint),#d8eae0); }
.post-thumb.t-nude  { background:linear-gradient(135deg, rgba(233,204,190,.7), rgba(233,204,190,.2)), linear-gradient(180deg,var(--nude),var(--blush)); }
.post-thumb.t-amber { background:linear-gradient(135deg, rgba(244,176,92,.5), rgba(244,176,92,.12)), linear-gradient(180deg,var(--amber-soft),var(--blush)); }
.post-body { padding:clamp(1.5rem,2.4vw,1.9rem); display:flex; flex-direction:column; flex:1; }
.post-cat { font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--coral-deep); font-weight:500; margin-bottom:.7rem; }
.post-card h3 { margin:0 0 .6rem; font-family:var(--font-body); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(1.15rem,1.8vw,1.35rem); line-height:1.25; color:var(--ink); }
.post-card p { margin:0 0 1.3rem; color:var(--ink-soft); font-size:1.02rem; line-height:1.55; flex:1; }
/* Destacado: horizontal (thumb + texto) */
.post-card.feature { grid-column:1 / -1; }
@media (min-width:760px){
  .post-card.feature { flex-direction:row; }
  .post-card.feature .post-thumb { aspect-ratio:auto; width:46%; min-height:300px; flex-shrink:0; }
  .post-card.feature .post-body { justify-content:center; padding:clamp(2rem,4vw,3.2rem); }
  .post-card.feature h3 { font-size:clamp(1.5rem,2.4vw,2rem); }
}

/* NEWSLETTER */
.newsletter { background:var(--mint); color:#22473a; text-align:center; overflow:clip; }
.newsletter .glow { width:34vw; height:34vw; left:-8vw; bottom:-14vw; background:radial-gradient(circle,#fff,transparent 60%); opacity:.4; }
.newsletter .shell { position:relative; z-index:2; max-width:660px; }
.newsletter .kicker { color:#2f5a48; }
.newsletter h2 { font-family:var(--font-display); text-transform:uppercase; font-weight:400;
  font-size:clamp(1.9rem,4.4vw,3.2rem); line-height:1.04; margin:1rem 0; color:#22473a; }
.newsletter p { color:#2f5a48; margin:0 auto; max-width:34rem; }
.nl-form { display:flex; gap:.7rem; max-width:480px; margin:2rem auto 0; flex-wrap:wrap; }
.nl-form input { flex:1; min-width:210px; border:1.5px solid rgba(34,71,58,.28); background:#fff; border-radius:999px;
  padding:.95rem 1.5rem; font-family:var(--font-body); font-size:.95rem; color:var(--ink); }
.nl-form input::placeholder { color:#8aa89a; }
.nl-form .btn { flex-shrink:0; }

/* =========================================================
   REVEAL
   ========================================================= */
.reveal { opacity:0; transform:translateY(26px); transition:opacity var(--t), transform var(--t); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.08s; } .reveal.d2 { transition-delay:.16s; } .reveal.d3 { transition-delay:.24s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  .hero-grid { grid-template-columns:1fr; min-height:0; gap:0; }
  .hero-figure { order:-1; min-height:300px; height:46vw; }
  .hero-figure .sphere { width:min(64vw,360px); right:50%; transform:translate(50%,-50%); }
  .hero-figure .feather { left:8%; }
  .hero-stamp { display:none; }
  .why-grid { grid-template-columns:1fr; gap:1.5rem; }
  .why h2 { position:static; }
  .contact-wrap { grid-template-columns:1fr; }
  .contact-aside { padding:clamp(2rem,7vw,2.8rem); }
  .medica-grid { grid-template-columns:1fr; gap:1.6rem; }
  .medica-head-m { display:block; margin-bottom:.4rem; }
  .medica-body > .kicker, .medica-body > .medica-who { display:none; }
  .medica-photo { max-width:380px; }
  /* Inicio: foto a sangre frameless en móvil */
  .medica .medica-photo { max-width:none; margin-inline:calc(-1 * var(--pad-x)); }
  .medica .medica-frame { aspect-ratio:4/5; border-radius:0; background:none; box-shadow:none; }
  .medica .medica-photo .glow { display:none; }
  /* Pasos como línea de tiempo vertical en móvil */
  .steps-grid { grid-template-columns:1fr; gap:0; }
  .step { position:relative; display:grid; grid-template-columns:2.4rem 1fr; column-gap:1.15rem; align-items:start; padding-bottom:clamp(1.8rem,6vw,2.8rem); }
  .step:last-child { padding-bottom:0; }
  .step::before { content:""; position:absolute; left:calc(1.2rem - 1px); top:1.2rem; bottom:0; width:2px; background:var(--coral); opacity:.22; }
  .step:last-child::before { display:none; }
  .step-rail { grid-column:1; grid-row:1; margin:0; }
  .step .n { display:flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:50%; background:var(--blush); color:var(--coral-deep); font-size:.9rem; letter-spacing:.04em; line-height:1; position:relative; z-index:1; }
  .step .bar { display:none; }
  .step h3 { grid-column:2; grid-row:1; margin:.45rem 0 .5rem; }
  .step p { grid-column:2; grid-row:2; }
  .bio-grid { grid-template-columns:1fr; grid-template-areas:none; gap:1.6rem; }
  .bio-grid .medica-photo, .bio-head, .bio-intro .bio-text { grid-area:auto; align-self:auto; }
  .bio-head { margin-bottom:0; }
  .bio-head .quote { margin-bottom:0; }
  .bio-sub .sub-line { display:block; }
  .bio-sub .sub-dot { display:none; }
  .bio-intro .medica-photo { max-width:none; margin-inline:calc(-1 * var(--pad-x)); }
  .bio-intro .medica-frame { aspect-ratio:4/5; border-radius:0; background:none; box-shadow:none; }
  .bio-intro .medica-photo .glow { display:none; }
  .formacion-grid { grid-template-columns:1fr; gap:2.5rem; }
  .enfoque { position:static; }
  .bio .medica-photo { max-width:360px; }
  .card-grid { grid-template-columns:1fr; }
  .foot-grid { grid-template-columns:1fr; gap:2rem; }
}
@media (max-width:760px){
  /* sin backdrop-filter: permite que el overlay fixed cubra el viewport */
  .nav { backdrop-filter:none; background:var(--cream); }
  .nav-menu { position:fixed; inset:0; z-index:55; flex-direction:column; align-items:center; justify-content:center;
    gap:1.9rem; padding:2rem; background:var(--cream); transform:translateX(100%); transition:transform var(--t); }
  .nav-menu.open { transform:none; }
  .nav-menu a:not(.btn) { font-size:1.25rem; letter-spacing:.14em; }
  .nav-menu .btn { margin-top:.6rem; font-size:.8rem; padding:.9rem 1.8rem; }
  .nav-toggle { display:inline-flex; position:relative; z-index:60; }
  .post-grid { grid-template-columns:1fr; }
  .tinvite .feather { width:38vw; opacity:.28; }
}
@media (prefers-reduced-motion:reduce){
  .reveal { opacity:1; transform:none; transition:none; }
  * { scroll-behavior:auto; }
}

/* =========================================================
   REFINAMIENTO TIPOGRÁFICO — tono médico, no "billboard"
   Grand Halva (display) se reserva al hero; el resto de
   titulares pasa a RNS Miles (sans), caja normal, contenido.
   ========================================================= */
.hero h1 { font-size:clamp(2.2rem,4.4vw,3.7rem); line-height:1.08; letter-spacing:.005em; }
.hero h1 .alma { font-size:.5em; margin-top:.4rem; }

.page-hero h1 {
  font-family:var(--font-body); font-weight:600; text-transform:none;
  letter-spacing:-.01em; line-height:1.12; font-size:clamp(1.9rem,3.4vw,2.9rem);
}
.why h2, .cta h2, .contact-aside h2, .steps h2,
.formacion h2, .pubs h2, .afil-band h2, .bio h2, .newsletter h2 {
  font-family:var(--font-body); font-weight:600; text-transform:none;
  letter-spacing:-.01em; line-height:1.15; font-size:clamp(1.5rem,2.7vw,2.25rem); color:var(--ink);
}
.cta h2 { font-size:clamp(1.8rem,3.4vw,2.7rem); color:#fff; }
.newsletter h2 { font-size:clamp(1.6rem,3vw,2.35rem); }
/* Citas: serenas, en caja normal */
.medica-body .quote, .bio-grid .quote {
  font-family:var(--font-body); font-weight:400; text-transform:none;
  letter-spacing:0; line-height:1.34; font-size:clamp(1.25rem,2.3vw,1.8rem); color:var(--ink);
}

/* Teléfono en horizontal: aprovechar el ancho — foto y texto lado a lado, como escritorio */