/* ============================================================
   Web Dra. Cristina Moya · Dermatología — estilos compartidos
   Prototipo Fase 1 · según spec_home_sitemap_v1.md (sección 3)
   Paleta mineral · Italiana (display) + Inter (texto y titulares pequeños)
   Fuentes auto-alojadas en ./fuentes/ — NO usar CDN (RGPD)
   ============================================================ */

/* ---- fuentes auto-alojadas (subset latino) ----
   Italiana: títulos PRINCIPALES (H1) y wordmark.
   Marcellus: títulos SECUNDARIOS (secciones, tarjetas, pasos).
   Inter: texto y etiquetas; Light 300 en intros/párrafos grandes. */
@font-face{
  font-family:'Italiana';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fuentes/italiana-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url('fuentes/inter-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Marcellus';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fuentes/marcellus-latin.woff2') format('woff2');
}

/* ---- paleta mineral (jerarquía revisada 2026-07-05) ----
   Superficies amplias SOLO blanco roto y gris piedra (o su tinte claro).
   Beige, greige y taupe: solo detalles (líneas, bordes, botones),
   nunca fondos dominantes — diferenciación vs. clínica anfitriona. */
:root{
  --blanco:#FFFEFB;        /* fondo principal (dominante) */
  --piedra-claro:#E6E4DF;  /* fondo de sección alterna (tinte de piedra) */
  --piedra:#B7AEA3;        /* bloques / tarjetas / bandas */
  --salvia:#A8AEA2;        /* acento firma (vegetal) */
  --carbon:#262421;        /* texto principal / titulares */
  --beige:#E4DED3;         /* detalle puntual — no fondos grandes */
  --greige:#D8D0C4;        /* detalle puntual — no fondos grandes */
  --taupe:#8C8173;         /* acento cálido puntual / botones */
  /* El mismo taupe, oscurecido para TEXTO. El original da 3,78:1 sobre
     blanco roto y 3,00:1 sobre piedra claro; el mínimo para texto pequeño
     es 4,5:1. Este da 5,94:1 y 4,72:1: con margen, no justo en el límite.
     El taupe original se queda para líneas, bordes y detalles, donde no
     hay que leer nada. */
  --taupe-texto:#6B6255;
  --texto-suave:#4b463f;
}

*{margin:0;padding:0;box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:'Inter',sans-serif;font-weight:400;color:var(--carbon);background:var(--blanco);line-height:1.7;font-size:16.5px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* Títulos principales (H1) en Italiana */
h1{font-family:'Italiana',serif;font-weight:400;line-height:1.15;letter-spacing:.02em}
/* Títulos secundarios (secciones, tarjetas, pasos) en Marcellus */
h2,h3,.t2{font-family:'Marcellus',serif;font-weight:400;line-height:1.22;letter-spacing:.005em}
/* intros y párrafos grandes en Light; el texto denso no baja de 400 */
.hero .sub,.bio-cab .bajada,.svc-cab .entradilla,.valor p,.enfoque p,.cab p,.cita p,.bio-cta p{font-weight:300}
strong{font-weight:500}
/* Las fotos llevan width y height (para reservar su hueco antes de que
   carguen), pero el tamaño en pantalla lo decide el CSS de cada hueco. */
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
.narrow{max-width:720px;margin:0 auto;padding:0 28px}

/* ---- botones (dos únicos estilos) ---- */
.btn{display:inline-block;padding:15px 34px;font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;transition:background .25s,color .25s,border-color .25s;cursor:pointer}
.btn-primario{background:var(--carbon);color:var(--blanco);border:1px solid var(--carbon)}
.btn-primario:hover{background:var(--taupe-texto);border-color:var(--taupe-texto)}
.btn-secundario{background:transparent;color:var(--carbon);border:1px solid var(--carbon)}
.btn-secundario:hover{background:var(--carbon);color:var(--blanco)}

/* ---- placeholders visibles (datos pendientes) ---- */
.ph{border:1px dashed var(--piedra);color:var(--taupe-texto);font-size:13px;letter-spacing:.02em;padding:10px 14px;background:transparent}
.ph-img{display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(160deg,var(--greige),var(--piedra));border:none;color:var(--blanco);text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;padding:24px;line-height:2}

/* ---- kickers y titulares de sección ---- */
.kicker{display:block;font-size:11px;font-weight:500;letter-spacing:.42em;text-transform:uppercase;color:var(--taupe-texto);margin-bottom:18px}
.t2{font-size:clamp(28px,3.6vw,42px);margin-bottom:22px}

/* ---- header ---- */
header{position:sticky;top:0;z-index:50;background:rgba(255,254,251,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--beige)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1280px;margin:0 auto;padding:12px 20px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand svg{height:46px;width:auto;display:block}
.brand .name{font-family:'Marcellus',serif;font-size:15.5px;font-weight:400;letter-spacing:.16em;white-space:nowrap}
.brand .name small{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:8.5px;letter-spacing:.46em;color:var(--taupe-texto);margin-top:3px}
nav ul{display:flex;gap:12px;list-style:none;font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
nav a{padding:6px 0}
nav a:hover{color:var(--taupe-texto)}
.tag-pronto{display:block;font-size:8px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--piedra);margin-top:1px}
nav a[aria-current="page"]{color:var(--taupe-texto);border-bottom:1px solid var(--taupe)}
.nav .btn{padding:12px 18px;flex-shrink:0}
.burger{display:none;background:none;border:none;color:var(--carbon);cursor:pointer;padding:10px 8px}
.burger svg{display:block}
@media(max-width:1080px){
  nav{position:absolute;top:100%;left:0;right:0;background:var(--blanco);border-bottom:1px solid var(--beige);visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease,visibility 0s .22s}
  nav.abierto{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition:opacity .22s ease,transform .22s ease}
  /* el menú no cabe en una pantalla de móvil: se desplaza él, y
     overscroll-behavior evita que el gesto pase a la página de detrás */
  nav{max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);overflow-y:auto;
      overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  /* Nada de overflow:hidden en html o body para bloquear el fondo: eso
     desactiva la cabecera pegajosa, que se va a su posición original y
     se lleva el menú fuera de la pantalla. El menú se basta con su
     propio desplazamiento y con overscroll-behavior. */
  nav ul{flex-direction:column;gap:0;padding:12px 28px 20px}
  nav li{border-top:1px solid var(--beige)}
  nav a{display:block;padding:13px 0}
  /* cabecera móvil: hamburguesa a la izquierda, logotipo centrado.
     Rejilla de tres columnas con las laterales del mismo ancho, para que
     el logotipo quede centrado de verdad y no desplazado por el botón. */
  .nav{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;padding:10px 14px}
  .burger{display:block;justify-self:start;order:1;margin-left:-8px}
  .brand{justify-self:center;order:2}
  .nav > .btn{justify-self:end;order:3;padding:11px 18px;font-size:12px;white-space:nowrap}
  .solo-ancho{display:none}
  .brand .name{display:none}
  .brand svg{height:40px}
  nav{order:4;grid-column:1 / -1}
}

/* ---- submenús desplegables (Patologías, Láser) ---- */
nav .sub-menu{list-style:none}
nav .menu-item-has-children{position:relative}
nav .menu-item-has-children>a::after{content:"·";margin-left:6px;color:var(--piedra)}
nav .sub-menu{display:flex;position:absolute;z-index:10;top:100%;left:0;min-width:240px;background:var(--blanco);border:1px solid var(--beige);box-shadow:0 12px 28px rgba(38,36,33,.10);padding:8px 0;flex-direction:column;gap:0;visibility:hidden;opacity:0;transform:translateY(-7px);pointer-events:none;transition:opacity .2s ease-out,transform .2s ease-out,visibility 0s linear .2s}
nav .menu-item-has-children:hover>.sub-menu,
nav .menu-item-has-children:focus-within>.sub-menu{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
nav .sub-menu a{display:block;padding:10px 22px;font-size:12px;letter-spacing:.02em;text-transform:none;color:var(--carbon)}
nav .sub-menu a:hover{color:var(--taupe-texto);background:var(--piedra-claro)}
@media(max-width:1080px){
  nav .menu-item-has-children>a::after{display:none}
  nav .sub-menu{position:static;display:flex;border:none;box-shadow:none;padding:2px 0 8px 16px;min-width:0;background:transparent;opacity:1;transform:none;pointer-events:none;transition:none}
  nav.abierto .sub-menu{visibility:visible;pointer-events:auto}
  nav .sub-menu li{border-top:none}
  nav .sub-menu a{padding:9px 0;font-size:13px;color:var(--texto-suave)}
}
@media(prefers-reduced-motion:reduce){
  nav .sub-menu{transition:none}
}

/* ============ barra de consentimiento de cookies ============ */
.cookie-barra{position:fixed;left:0;right:0;bottom:0;z-index:100;
  background:var(--blanco);border-top:1px solid var(--greige);
  box-shadow:0 -6px 22px rgba(38,36,33,.07)}
.cookie-barra .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:32px;padding:17px 20px}
.cookie-barra p{margin:0;font-size:14px;font-weight:300;line-height:1.55;
  color:var(--texto-suave);max-width:68ch}
.cookie-barra p a{color:var(--carbon);text-decoration:underline;text-underline-offset:3px}
.cookie-acciones{display:flex;gap:11px;flex-shrink:0}
/* los dos botones idénticos: rechazar debe costar lo mismo que aceptar */
.cookie-barra .btn{padding:11px 24px;font-size:11.5px}
@media(max-width:1080px){
  .cookie-barra .wrap{flex-direction:column;align-items:stretch;gap:14px;padding:16px 18px}
  .cookie-barra p{font-size:13.5px;max-width:none}
  .cookie-acciones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .cookie-barra .btn{width:100%;text-align:center;padding:12px 10px}
}

/* ============ HOME ============ */

/* bloque 1: hero */
.hero{background:var(--blanco);padding:96px 0 88px}
.hero .cols{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero h1{font-size:clamp(38px,5vw,60px);margin-bottom:24px}
.hero .sub{font-size:18px;color:var(--texto-suave);max-width:520px;margin-bottom:40px}
.acciones{display:flex;gap:16px;flex-wrap:wrap}
.bio-cta .acciones,.cita .acciones{justify-content:center}
.hero .acciones{display:flex;gap:16px;flex-wrap:wrap}
.hero .ph-img{aspect-ratio:4/5;max-height:560px}

/* bloque 2: propuesta de valor */
.valor{background:var(--blanco);padding:40px 0 96px}
.valor .narrow{border-top:1px solid var(--greige);padding-top:64px}
.valor p{color:var(--texto-suave);font-size:17px;line-height:1.85;margin-bottom:24px}
.valor p:last-child{margin-bottom:0}
.enlace-mas{margin-top:34px}
.enlace-mas a{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--carbon);border-bottom:1px solid var(--carbon);padding-bottom:3px;text-decoration:none}
.enlace-mas a:hover{color:var(--taupe-texto);border-bottom-color:var(--taupe)}
.enlace-mas a + a{margin-left:28px}

/* bloque 3: áreas (tarjetas) */
.areas{background:var(--piedra-claro);padding:96px 0 104px}
/* franja fina de enlace a otra sección (láser en la portada) */
.franja{background:var(--blanco);border-bottom:1px solid var(--greige)}
.franja .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:34px;padding-bottom:34px}
.franja p{margin:0;color:var(--texto-suave);font-weight:300;font-size:17px}
.franja a{flex-shrink:0;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--carbon);border-bottom:1px solid var(--carbon);padding-bottom:3px;text-decoration:none}
.franja a:hover{color:var(--taupe-texto);border-bottom-color:var(--taupe)}
.intro-areas{max-width:60ch;margin:14px 0 0;color:var(--texto-suave);font-weight:300;font-size:17px}
.areas .enlace-mas{margin-top:34px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:48px}
.card{background:var(--blanco);border:1px solid var(--greige);padding:38px 32px 34px;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(38,36,33,.12)}
.card h2,.card h3{font-size:22px;margin-bottom:12px}
.card p{font-size:15.5px;color:var(--carbon);flex:1}
.card .mas{display:inline-block;margin-top:20px;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--carbon);border-bottom:1px solid var(--carbon);align-self:flex-start;padding-bottom:3px}
/* Tarjetas con foto (portada, Patologías y Láser). El texto sigue sobre
   blanco: la foto nunca va detrás de las letras. */
.cards.con-foto .card{padding:0;overflow:hidden}
.cards.con-foto .card img{display:block;width:100%;aspect-ratio:12/5;object-fit:cover}
.cards.con-foto .card .txt{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
.cards.con-foto .card .txt p{flex:1}
/* Un número de teléfono no se parte entre dos líneas. */
.nw{white-space:nowrap}
/* En el móvil, cada tarjeta es una fila: foto a la izquierda, texto a la
   derecha. La foto ocupa el hueco que el texto dejaba libre y no añade
   altura: con once tarjetas en la portada, así queda más corta que sin
   fotos, en vez de pantalla y media más larga. */
@media(max-width:700px){
  .cards.con-foto{gap:12px}
  .cards.con-foto .card{flex-direction:row;align-items:stretch}
  .cards.con-foto .card img{width:31%;flex:none;aspect-ratio:auto;height:auto}
  .cards.con-foto .card .txt{padding:16px 16px 16px 18px}
  .cards.con-foto .card h2,.cards.con-foto .card h3{font-size:19px;margin-bottom:6px}
  .cards.con-foto .card p{font-size:14.5px;line-height:1.5}
  .cards.con-foto .card .mas{margin-top:10px}
}

/* bloque 4: láser destacado */
.laser{background:var(--blanco);padding:104px 0}
.laser .cols{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.laser p{color:var(--texto-suave);margin-bottom:36px;font-size:17px}
.laser .ph-img{aspect-ratio:4/3}

/* bloque 5: cómo trabajo */
.metodo{background:var(--blanco);padding:0 0 104px}
.metodo .borde{border-top:1px solid var(--greige);padding-top:80px}
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:44px;margin-top:44px}
.paso .n{font-family:'Italiana',serif;font-size:42px;color:var(--salvia);display:block;margin-bottom:10px}
.paso h3{font-size:23px;margin-bottom:10px}
.paso p{font-size:15px;color:var(--texto-suave)}

/* bloque 6: sobre la doctora (resumen en Home) */
.sobre{background:var(--piedra-claro);padding:104px 0}
.sobre .cols{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
.sobre .ph-img{aspect-ratio:3/4;max-height:520px}
.sobre p{color:var(--texto-suave);margin-bottom:18px}
.enlace{position:relative;display:inline-block;margin-top:10px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe-texto);border-bottom:1px solid var(--taupe);padding-bottom:4px;transition:color .25s}
.enlace::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--carbon);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.enlace:hover{color:var(--carbon)}
.enlace:hover::after{transform:scaleX(1)}

/* bloque 7: banda de confianza */
.confianza{background:var(--piedra);color:var(--carbon);padding:44px 0}
.confianza ul{display:flex;justify-content:space-between;gap:20px;list-style:none;flex-wrap:wrap}
.confianza li{font-size:13.5px;letter-spacing:.02em;display:flex;align-items:center;gap:11px}
.confianza li::before{content:"";width:5px;height:5px;background:var(--carbon);border-radius:50%;flex-shrink:0;opacity:.7}
@media(max-width:900px){.confianza ul{flex-direction:column;gap:14px}}

/* bloque 8: cita (cierre) */
.cita{background:var(--blanco);padding:110px 0;text-align:center}
.cita p{max-width:560px;margin:0 auto 40px;color:var(--texto-suave);font-size:17px}
.cita .ph{display:inline-block;margin-top:28px}

/* ============ SOBRE LA DOCTORA ============ */

/* bloque 1: encabezado */
.bio-cab{background:var(--blanco);padding:96px 0 88px}
.bio-cab .cols{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.bio-cab h1{font-size:clamp(38px,5vw,58px);margin-bottom:20px}
.bio-cab .bajada{font-size:18px;color:var(--texto-suave);max-width:520px}
.bio-cab .ph-img{aspect-ratio:3/4;max-height:560px}

/* bloque 2: enfoque */
.enfoque{background:var(--piedra-claro);padding:96px 0}
.enfoque p{color:var(--texto-suave);font-size:17px;line-height:1.85;margin-bottom:20px}
.enfoque p:last-child{margin-bottom:0}

/* bloque 3: trayectoria (prosa, no bullets) */
.trayectoria{background:var(--blanco);padding:96px 0}
.trayectoria p{color:var(--texto-suave);font-size:17px;margin-bottom:20px}
.trayectoria strong{color:var(--carbon)}

/* bloque 4: áreas de dedicación (lista enlazada) */
.dedicacion{background:var(--blanco);padding:0 0 96px}
.dedicacion .narrow>div{border-top:1px solid var(--greige);padding-top:64px}
.dedicacion ul{list-style:none;margin-top:34px}
.dedicacion li{border-bottom:1px solid var(--greige)}
.dedicacion li a{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:20px 2px;transition:color .2s}
.dedicacion li a:hover{color:var(--taupe-texto)}
.dedicacion .area{font-family:'Inter',sans-serif;font-weight:500;font-size:18px;flex-shrink:0}
.dedicacion .linea{font-size:14.5px;color:var(--texto-suave);text-align:right}
@media(max-width:700px){
  /* por debajo de 700px la rejilla iba a 300px mínimos y se salía
     de la pantalla en móviles estrechos (320px) */
  .cards{grid-template-columns:1fr}
  .dedicacion li a{flex-direction:column;gap:4px}
  .dedicacion .linea{text-align:left}
}

/* bloque 5: actividad científica */
.ciencia{background:var(--piedra-claro);padding:64px 0}
.ciencia p{color:var(--texto-suave);font-size:16.5px}
.ciencia details{margin-top:18px}
.ciencia summary{cursor:pointer;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe-texto);list-style:none}
.ciencia summary::-webkit-details-marker{display:none}
.ciencia summary:hover{color:var(--carbon)}
.ciencia details .ph{display:inline-block;margin-top:16px}

/* bloque 7: CTA */
.bio-cta{background:var(--blanco);padding:110px 0;text-align:center}
.bio-cta p{max-width:560px;margin:0 auto 40px;color:var(--texto-suave);font-size:17px}

/* ============ CITA ============ */
.cab{background:var(--piedra-claro);padding:88px 0 72px;text-align:center}
.cab h1{font-size:clamp(34px,4.6vw,52px);margin-bottom:20px}
.cab p{max-width:560px;margin:0 auto;color:var(--texto-suave);font-size:17.5px}
.vias{padding:88px 0 104px}
.vias .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:980px;margin:0 auto}
.via{background:var(--piedra);padding:40px 34px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.via h2{font-size:23px}
.via p{font-size:14.5px;color:var(--carbon)}
.vias .nota{max-width:640px;margin:56px auto 0;text-align:center;font-size:14px;color:var(--texto-suave)}
/* Dos notas seguidas (condiciones y dirección): la segunda, más pegada. */
.vias .nota + .nota{margin-top:18px}
.vias .nota a{color:var(--carbon);border-bottom:1px solid var(--piedra);padding-bottom:1px}
.vias .nota a:hover{border-bottom-color:var(--carbon)}
/* Contacto en el móvil, más compacto: los dos botones —llamar y
   WhatsApp— tienen que caber en la primera pantalla. */
@media(max-width:700px){
  .cab{padding:36px 0 32px}
  .cab h1{margin-bottom:12px}
  .cab p{font-size:16px}
  .vias{padding:28px 0 64px}
  .vias .grid{gap:12px}
  .via{padding:24px 22px;gap:10px}
  .via h2{font-size:21px}
  .vias .nota{margin-top:36px}
}

/* ---- footer ---- */
footer{background:var(--carbon);color:#b8b2a8;padding:72px 0 36px;font-size:14px}
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:56px;margin-bottom:52px}
footer .logo-f{display:flex;align-items:center;gap:14px;margin-bottom:18px}
footer .logo-f svg{height:54px;width:auto}
footer .logo-f .name{font-family:'Marcellus',serif;font-size:15.5px;letter-spacing:.16em;color:var(--blanco)}
footer .logo-f .name small{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:8.5px;letter-spacing:.46em;color:var(--piedra);margin-top:3px}
footer .tit-pie{color:var(--blanco);font-size:11px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:18px;font-weight:500}
footer li{list-style:none;padding:5px 0}
footer a:hover{color:var(--blanco)}
footer .ph{font-size:12px;padding:6px 10px;margin:3px 0;display:inline-block;border-color:#4b463f;color:var(--piedra)}
.legal{border-top:1px solid #3a3733;padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;align-items:center}

/* ============ PÁGINAS DE SERVICIO ============ */
.svc-cab{background:var(--blanco);padding:88px 0 80px}
.svc-cab .cols{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.svc-cab h1{font-size:clamp(36px,4.6vw,54px);margin-bottom:22px}
.svc-cab .entradilla{font-size:18px;color:var(--texto-suave);max-width:560px}
.svc-cab .ph-img{aspect-ratio:4/3}
.svc-cab .acciones{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap}
.svc-bloque{padding:88px 0}
.svc-bloque.alt{background:var(--piedra-claro)}
.svc-bloque p{color:var(--texto-suave);font-size:17px;margin-bottom:20px}
.svc-bloque p:last-child{margin-bottom:0}
.svc-bloque strong{color:var(--carbon)}
.svc-bloque ul.lista{color:var(--texto-suave);font-size:17px;margin:0 0 20px 22px}
.svc-bloque ul.lista li{margin-bottom:8px}
.apuntes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:44px;margin-top:44px}
.apunte{border-top:2px solid var(--salvia);padding-top:22px}
.apunte p{font-size:15px;color:var(--texto-suave)}
.apunte strong{display:block;font-weight:600;color:var(--carbon);margin-bottom:8px}
.enlaces-rel{margin-top:36px;display:flex;gap:28px;justify-content:center;flex-wrap:wrap}
.con-borde{border-top:1px solid var(--greige)}

/* ---- formatos de sección para dar variedad y hueco a imágenes ---- */
/* sección a dos columnas: texto + imagen (alternando lado con .rev) */
.split{padding:90px 0;background:var(--blanco)}
.split.alt{background:var(--piedra-claro)}
.split .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center}
.split .split-txt h2{margin-bottom:20px}
.split .split-txt p{color:var(--texto-suave);font-size:17px;line-height:1.85;margin-bottom:18px}
.split .split-txt p:last-child{margin-bottom:0}
.split .split-txt ul.lista{color:var(--texto-suave);font-size:16.5px;line-height:1.7;margin:4px 0 0 20px}
.split .split-txt ul.lista li{margin-bottom:12px}
.split .ph-img{aspect-ratio:4/3;max-height:480px}
.split.rev .split-txt{order:2}
@media(max-width:820px){
  .split .wrap{grid-template-columns:1fr;gap:34px}
  .split.rev .split-txt{order:0}
  .split .ph-img{aspect-ratio:16/10}
}
/* banda de imagen a todo el ancho, como respiro entre secciones */
/* huecos que ya tienen fotografía: sin degradado ni relleno */
.ph-img.con-foto,.imagen-banda.con-foto{background:none;padding:0;overflow:hidden;display:block}
.ph-img.con-foto img,.imagen-banda.con-foto img{width:100%;height:100%;object-fit:cover;display:block}
.imagen-banda{height:clamp(200px,30vw,360px);background:linear-gradient(160deg,var(--greige),var(--piedra));display:flex;align-items:center;justify-content:center;text-align:center;color:var(--blanco);text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;line-height:1.9;padding:24px}

/* lista numerada de pasos (p. ej. alta en ClinicStore) */
.lista-num{list-style:none;counter-reset:paso;margin:6px 0 0}
.lista-num li{position:relative;padding-left:46px;margin-bottom:18px;color:var(--texto-suave);font-size:16.5px;line-height:1.7}
.lista-num li:last-child{margin-bottom:0}
.lista-num li::before{counter-increment:paso;content:counter(paso);position:absolute;left:0;top:-2px;font-family:'Marcellus',serif;font-size:22px;color:var(--salvia)}

/* aviso destacado (láser: valoración previa) */
.aviso{background:var(--piedra-claro);border-left:3px solid var(--salvia);padding:22px 26px;margin:8px 0 0;font-size:15.5px;color:var(--carbon)}
.aviso strong{font-weight:600}

/* tablas de tarifas */
.tarifas-tabla{width:100%;border-collapse:collapse;margin:8px 0 8px;font-size:15.5px}
.tarifas-tabla caption{font-family:'Inter',sans-serif;font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe-texto);text-align:left;margin-bottom:14px}
.tarifas-tabla th,.tarifas-tabla td{text-align:left;padding:14px 4px;border-bottom:1px solid var(--greige)}
.tarifas-tabla td:last-child{text-align:right;white-space:nowrap;color:var(--texto-suave)}
.tarifas-tabla thead th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe-texto);font-weight:500}
.tarifas-nota{font-size:14px;color:var(--texto-suave);margin-top:18px}
/* al saltar a #tarifas desde el menú, no quedar bajo la cabecera fija */
#tarifas{scroll-margin-top:96px}

/* lista de publicaciones (Sobre mí) */
.publicaciones{margin-top:22px}
.publicaciones summary{cursor:pointer;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe-texto);list-style:none}
.publicaciones summary::-webkit-details-marker{display:none}
.publicaciones summary:hover{color:var(--carbon)}
.publicaciones ol{margin:20px 0 0 20px;font-size:13.5px;color:var(--texto-suave);line-height:1.6}
.publicaciones li{margin-bottom:14px}

/* ============ PÁGINAS LEGALES ============ */
.legal-pag{padding:88px 0 104px}
.legal-pag h1{font-size:clamp(32px,4vw,46px);margin-bottom:34px}
.legal-pag h2{font-size:23px;margin:44px 0 12px}
.legal-pag p,.legal-pag li{color:var(--texto-suave);font-size:15.5px;margin-bottom:14px}
.legal-pag ul{margin:0 0 14px 22px}
.legal-pag li{margin-bottom:6px}
.aviso-borrador{background:var(--greige);border:1px dashed var(--taupe);color:var(--carbon);padding:16px 20px;font-size:14px;margin-bottom:44px}

/* ---- responsive general ---- */
@media(max-width:900px){
  .hero .cols,.laser .cols,.sobre .cols,.bio-cab .cols,.svc-cab .cols{grid-template-columns:1fr}
  .hero,.bio-cab,.svc-cab{padding:64px 0}
  .hero .ph-img{aspect-ratio:4/3;max-height:none}
  .svc-cab .cols{gap:34px}
  .svc-cab .ph-img{aspect-ratio:4/3}
  .laser .cols .ph-img{order:2}
  footer .cols{grid-template-columns:1fr}
}

/* legibilidad de placeholders sobre tarjetas gris piedra */
.via .ph{border-color:var(--carbon);color:var(--carbon);opacity:.72}


/* ---- accesibilidad: foco visible ---- */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--taupe);outline-offset:3px}
/* «Saltar al contenido»: fuera de la vista hasta que recibe el foco con el
   tabulador; entonces aparece arriba, por encima de la cabecera. */
.salto{position:fixed;top:8px;left:12px;z-index:300;padding:12px 18px;background:var(--carbon);color:var(--blanco);font-size:14px;font-weight:500;transform:translateY(calc(-100% - 16px))}
.salto:focus{transform:none}
/* El destino del salto recibe el foco sin pintarle un marco a toda la
   página, y no queda escondido bajo la cabecera fija. */
main:focus{outline:none}
main{scroll-margin-top:96px}
section[id]{scroll-margin-top:72px}

/* ============ ANIMACIONES (sobrias, progresivas) ============
   Reveal al hacer scroll (clases anadidas por animaciones.js)
   y entrada del encabezado al cargar. Todo queda desactivado
   si el usuario prefiere movimiento reducido. */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease-out,transform .6s ease-out;transition-delay:var(--rd,0ms)}
  .reveal.visto{opacity:1;transform:none}
  .hero h1,.hero .sub,.hero .acciones,
  .svc-cab h1,.svc-cab .entradilla,.svc-cab .acciones,
  .bio-cab h1,.bio-cab .bajada,
  .cab h1,.cab p{animation:entrada .65s ease-out both}
  .hero .sub,.svc-cab .entradilla,.bio-cab .bajada,.cab p{animation-delay:.12s}
  .hero .acciones,.svc-cab .acciones{animation-delay:.24s}
  @keyframes entrada{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}