/* Componente compartido de hero — Artículos de fondo y Entender tu cuerpo */
:root{--ink:var(--ek-ink);--muted:var(--ek-muted);--moss:var(--ek-action);--sea:var(--ek-action);--cream:var(--ek-alice);--paper:var(--ek-paper);--line:var(--ek-line);--serif:var(--ek-font-heading);--sans:var(--ek-font-body);--wide:min(1240px,calc(100vw - 48px));--read:min(720px,calc(100vw - 40px))}
.hero{background:var(--cream);border-bottom:1px solid var(--line)}
.hero-inner{width:var(--wide);margin:auto;padding:28px 0 72px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.82fr);gap:clamp(48px,8vw,120px);align-items:end;margin-top:48px}
.hero-media{position:relative;min-height:590px;overflow:hidden;border-radius:160px 160px 20px 20px;background:linear-gradient(145deg,#d9ddd4,#c5cec4);display:grid;place-items:center}
.hero-media:before{content:"";position:absolute;inset:12%;border:1px solid rgba(255,255,255,.65);border-radius:140px 140px 12px 12px}
.hero-media span{position:relative;padding:9px 13px;border-radius:999px;background:rgba(251,250,246,.82);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hero-inner{padding-bottom:clamp(42px,6vw,76px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);grid-template-areas:"eyebrow media" "title media" "dek media" "meta media" ". media";grid-template-rows:auto auto auto auto 1fr;column-gap:clamp(42px,6vw,96px);row-gap:0;align-items:start;margin-top:clamp(32px,5vw,60px)}
.hero-grid>.eyebrow{grid-area:eyebrow;align-self:end;margin-bottom:clamp(20px,3vw,34px)}
.hero-grid>h1{grid-area:title;max-width:none;margin:0;font-family:var(--serif);font-weight:400;letter-spacing:0}
.hero-title{display:block;max-width:10ch;font-size:clamp(4rem,7.4vw,8rem);line-height:.86;letter-spacing:-.055em}
.hero-subtitle{display:block;max-width:24ch;margin-top:clamp(22px,3vw,36px);font-size:clamp(1.35rem,2.15vw,2.25rem);line-height:1.08;letter-spacing:-.025em;color:#34423b}
.hero-grid>.dek{grid-area:dek;max-width:54ch;margin:clamp(22px,3vw,34px) 0 0;color:#46534c;font-size:clamp(.98rem,1.15vw,1.12rem);line-height:1.6}
.hero-grid>.meta{grid-area:meta;align-self:start;margin-top:clamp(20px,2.6vw,32px)}
.hero-media{grid-area:media;align-self:stretch;width:100%;height:100%;min-height:clamp(460px,56vh,640px);margin:0;overflow:hidden;border-radius:24px;background:#d2d8d0}
.hero-media:before{display:none}
.hero-media img{display:block;width:100%;height:100%;object-fit:cover}
.hero-media span{z-index:1}
.hero-media.has-image span{display:none}
.hero-media{background:linear-gradient(145deg,#83c5be,#edf6f9)}
.hero-media img{filter:saturate(.92)}
.hero-media img:hover{filter:none}
.hero-grid>*{min-width:0}
.hero-title,.hero-subtitle{overflow-wrap:anywhere}
/* Imagen destacada real: se muestra completa, sin recorte, sobre el fondo propio de la ilustración */
.hero-media.has-image,body.ek-long-article .hero-media.has-image{background-color:var(--ek-hero-bg,#fcfaed)!important;background-image:none!important}
.hero-media.has-image img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:800px){.hero-inner{padding-bottom:54px}.hero-grid{grid-template-columns:1fr;gap:38px;margin-top:35px}.hero-media{min-height:440px;border-radius:110px 110px 18px 18px}}
@media(max-width:430px){.hero-media{min-height:380px}}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr}.hero-media{min-height:440px}.hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"eyebrow" "title" "dek" "meta" "media";grid-template-rows:auto;gap:0}.hero-title{max-width:12ch;font-size:clamp(3.5rem,13vw,6.6rem);line-height:.9}.hero-subtitle{max-width:29ch;font-size:clamp(1.3rem,4vw,2rem)}.hero-grid>.dek{margin-top:22px}.hero-media{min-height:0;aspect-ratio:16/10;margin-top:clamp(32px,6vw,52px);border-radius:20px}.hero-grid>.meta{margin-top:20px;padding-top:18px}.hero-media{height:auto}}
@media(max-width:560px){.hero-inner{padding-top:20px}.hero-grid{margin-top:30px}.hero-title{font-size:clamp(3.2rem,16vw,5.2rem)}.hero-subtitle{font-size:clamp(1.2rem,6vw,1.65rem);line-height:1.12}.hero-media{aspect-ratio:4/3;border-radius:16px}.hero-grid>.meta{gap:8px 14px}}
/* eyebrow y fila de metadata del hero (mismos valores que la plantilla de artículos) */
.hero-grid>.eyebrow{display:flex;align-items:center;justify-self:stretch;width:auto;max-width:none;gap:10px;margin:0 0 22px;font-size:.73rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.hero-grid>.meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.77rem}
.hero-grid>.meta strong{color:var(--ink)}

@media(max-width:800px){:root{--wide:calc(100vw - 32px)}}
.hero-grid--no-media{grid-template-columns:minmax(0,1fr);grid-template-areas:"eyebrow" "title" "dek" "meta"}

/* CORE-HERO — páginas core: superficie full-bleed, grid 55/45, slot visual 4:5 y orden móvil editorial */
.hero--core{background:linear-gradient(145deg,var(--ek-alice) 0%,var(--ek-paper) 70%);border-bottom:1px solid rgba(0,109,119,.16)}
.hero--core .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"eyebrow media" "title media" "since media" "dek media" "support media" "meta media";grid-template-rows:auto auto auto auto auto 1fr}
.hero--core .hero-grid>.eyebrow{color:var(--ek-blue-deep)}
.hero--core .hero-grid>.eyebrow:before{background:var(--ek-blue-soft)}
.hero--core .hero-grid>.dek{color:#183d49}
.hero--core .hero-media{border:1px solid rgba(0,109,119,.15);aspect-ratio:4/5;min-height:0;height:auto;background:var(--ek-alice)}
.hero--core .hero-grid--no-media{grid-template-columns:minmax(0,1fr);grid-template-areas:"eyebrow" "title" "since" "dek" "support" "meta"}
.hero-grid>.hero-support{grid-area:support;margin-top:clamp(12px,2vw,18px);max-width:56ch;color:var(--ek-text);font-size:1rem;line-height:1.65}
.hero-grid>.hero-support strong{color:var(--ek-ink)}
.hero-grid>.hero-actions{grid-area:meta;align-self:end;display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(22px,3vw,34px)}
.hero-grid>.hero-actions .button{text-decoration:none}
.hero-grid>.ek-since{grid-area:since;margin:6px 0 0;color:var(--ek-muted);font-size:.95rem;font-style:italic}
@media(min-width:1001px){
  .hero--core{display:flex;align-items:center;min-height:calc(100svh - var(--ek-header-h,78px))}
  .hero--core .hero-inner{margin:auto;padding-top:clamp(18px,2.6vw,36px);padding-bottom:clamp(18px,2.6vw,36px)}
}
@media(max-width:1000px){
  .hero--core .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"eyebrow" "title" "since" "media" "dek" "support" "meta";gap:0}
  .hero--core .hero-grid>.dek{margin-top:clamp(20px,4vw,28px)}
  .hero--core .hero-media{margin:clamp(18px,4vw,26px) 0 clamp(24px,5vw,36px);aspect-ratio:4/5;max-height:min(62svh,520px);border-radius:20px}
  .hero--core .hero-grid>.hero-actions{margin-top:clamp(24px,5vw,34px)}
}

/* Home: misma familia visual, superficie más luminosa y sin slot vacío */
body[data-template="home"] .hero.hero--home{background:linear-gradient(145deg,var(--ek-alice) 0%,var(--ek-paper) 84%);border-bottom:1px solid rgba(0,109,119,.14)}
body[data-template="home"] .hero--home .hero-copy h1{color:var(--ek-ink)}
body[data-template="home"] .hero--home .hero-visual{border-radius:24px}
body .hero .hero-grid.hero-grid--no-media:has(.hero-copy){grid-template-columns:minmax(0,1fr)}

/* PRUEBA acotada a /osteopatia/: superficie petróleo oscuro, misma geometría */
.ek-hero-petrol .hero--core{background:linear-gradient(145deg,var(--ek-ink) 0%,#173c54 62%,#12303f 100%);border-bottom:1px solid rgba(131,197,190,.22)}
body.ek-hero-petrol nav.breadcrumbs a{color:rgba(237,246,249,.92)!important}
body.ek-hero-petrol nav.breadcrumbs a:hover,body.ek-hero-petrol nav.breadcrumbs a:focus-visible{color:var(--ek-aqua)!important}
body.ek-hero-petrol nav.breadcrumbs>span{color:rgba(237,246,249,.4)!important}
body.ek-hero-petrol nav.breadcrumbs>*:last-child{color:rgba(237,246,249,.8)!important}
.ek-hero-petrol .hero--core .hero-grid>.eyebrow{color:var(--ek-aqua)}
.ek-hero-petrol .hero--core .hero-grid>.eyebrow:before{background:var(--ek-coral)}
.ek-hero-petrol .hero--core .hero-grid>h1,.ek-hero-petrol .hero--core .hero-title{color:#fbfaf6}
.ek-hero-petrol .hero--core .hero-grid>.dek{color:var(--ek-alice)}
.ek-hero-petrol .hero--core .hero-grid>.hero-support{color:rgba(237,246,249,.88)}
.ek-hero-petrol .hero--core .hero-grid>.hero-support strong{color:#fbfaf6}
.ek-hero-petrol .hero--core .hero-grid>.ek-since{color:rgba(237,246,249,.7)}
.ek-hero-petrol .hero--core .hero-media{border-color:rgba(131,197,190,.25)}
.ek-hero-petrol .hero--core .hero-actions .button{background:#fbfaf6;color:#12303f}
.ek-hero-petrol .hero--core .hero-actions .button:hover{background:var(--ek-aqua);color:#0e2836}
.ek-hero-petrol .hero--core .hero-actions .button--secondary{background:transparent;color:#fbfaf6;border:1px solid rgba(237,246,249,.45)}
.ek-hero-petrol .hero--core .hero-actions .button--secondary:hover{background:rgba(237,246,249,.12);color:#fbfaf6}

/* EditorialPhotoHero — patrón reutilizable: foto + overlay uniforme + card editorial.
   Variables: --ph-object-position · --ph-card-inline · --ph-card-w · --ph-overlay · --ph-card-bg */
.ek-photo-hero{position:relative;display:flex;align-items:flex-end;padding-top:var(--ek-header-h,78px);background:var(--ek-ink);border-bottom:0;--ph-bottom-gap:clamp(44px,4.4vw,68px);min-height:clamp(560px,76svh,880px);border-radius:0 0 var(--ph-bottom-radius,clamp(28px,3.25vw,62px)) var(--ph-bottom-radius,clamp(28px,3.25vw,62px));overflow:hidden}
/* El artículo que contiene el hero suelta su padding superior y sube bajo el header sticky. */
body.ek-unified article.section:has(> .ek-photo-hero){padding-top:0;margin-top:calc(-1 * var(--ek-header-h,78px))}
/* La Home monta el mismo hero directamente en <main>: misma subida bajo el header. */
body[data-template="home"] main > .ek-photo-hero{margin-top:calc(-1 * var(--ek-header-h,78px))}
.ek-photo-hero .hero-inner{position:relative;z-index:2;width:var(--wide);margin:0 auto;padding:clamp(24px,3.4vw,48px) 0 var(--ph-bottom-gap)}
.ph-stage{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:inherit}
.ph-stage img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--ph-object-position,50% 42%)}
.ph-overlay{position:absolute;inset:0;background:var(--ph-overlay,rgba(18,48,63,.33))}
.ph-card{position:relative;width:min(var(--ph-card-w,560px),100%);margin-inline:var(--ph-card-inline,0 auto);padding:clamp(22px,2.4vw,36px);background:var(--ph-card-bg,transparent);-webkit-backdrop-filter:var(--ph-card-filter,blur(var(--ph-card-blur,22px)) brightness(var(--ph-card-dim,.82)));backdrop-filter:var(--ph-card-filter,blur(var(--ph-card-blur,22px)) brightness(var(--ph-card-dim,.82)));border-radius:22px}
.ph-card .breadcrumbs{margin-bottom:clamp(12px,1.4vw,18px)}
.ph-card .eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 clamp(12px,1.5vw,18px);color:var(--ek-muted);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ph-card h1{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.02}
.ph-title{display:block;font-size:clamp(2rem,1.35rem + 1.9vw,3.35rem)}
.ph-copy{margin-top:clamp(14px,1.6vw,20px);max-width:46ch}
.ph-copy p{margin:0;color:var(--ek-text);font-size:clamp(.98rem,.95rem + .12vw,1.06rem);line-height:1.62}
.ph-more{margin-top:12px}
.ph-more summary{display:inline-flex;align-items:center;gap:6px;min-height:40px;cursor:pointer;list-style:none;color:var(--ek-accent);font-size:.86rem;font-weight:650}
.ph-more summary::-webkit-details-marker{display:none}
.ph-more summary:after{content:"+";font-weight:400}
.ph-more[open] summary:after{content:"–"}
.ph-more p{margin:2px 0 0;max-width:48ch;color:var(--ek-muted);font-size:.93rem;line-height:1.6}
/* Regla de cabecera: nunca mas de tres lineas visibles; el resto, tras «Leer mas». */
.ph-copy--clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.ph-card:has(.ph-more[open]) .ph-copy--clamp{display:block;-webkit-line-clamp:unset;overflow:visible}
.ph-more-less{display:none}
.ph-more[open] .ph-more-more{display:none}
.ph-more[open] .ph-more-less{display:inline}
.ph-more-body{margin-top:2px}
.ph-more-body p:first-child{margin-top:2px}
.ph-card .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(18px,2vw,26px)}
.ph-card .hero-actions .button{text-decoration:none}
@media(max-width:1000px){
  .ek-photo-hero{align-items:flex-end;min-height:clamp(500px,78svh,720px)}
  .ek-photo-hero{--ph-bottom-gap:clamp(44px,11vw,64px);--ph-bottom-radius:clamp(20px,4.5vw,36px)}
  .ek-photo-hero .hero-inner{padding:clamp(18px,5vw,32px) 0 var(--ph-bottom-gap)}
  .ph-card{width:100%;max-width:none;margin-inline:0;padding:clamp(20px,5.4vw,28px);border-radius:16px}
  .ph-copy{max-width:none}
}

@media(min-width:1001px){.ek-photo-hero .hero-inner{width:calc(100% - 2 * var(--ph-bottom-gap))}}
/* ProblemHero — variante compacta para Qué te pasa: foto + gran título + entrada, sin CTA.
   Reutiliza el stage, el overlay, el blur y el header integrado del EditorialPhotoHero. */
.ek-photo-hero--problem{align-items:flex-end;min-height:clamp(480px,78svh,760px)}
.ph-card--problem .ph-title{font-size:clamp(2.2rem,1.3rem + 2.4vw,4rem)}
.ph-card--problem .ph-copy{margin-top:clamp(10px,1.2vw,16px);max-width:38ch}
/* ProblemDetailHero — problema concreto: algo mas contenido que una categoria. */
.ek-photo-hero--problem.ek-photo-hero--detail{min-height:clamp(460px,66svh,660px)}
/* ServiceSubHero — subcategoria de Osteopatia: misma tarjeta, banner mas contenido que el hub. */
.ek-photo-hero--sub{min-height:clamp(460px,66svh,660px)}
@media(max-width:1000px){
  .ek-photo-hero--problem{min-height:clamp(460px,72svh,640px)}
  .ek-photo-hero--problem.ek-photo-hero--detail{min-height:clamp(430px,64svh,600px)}
  .ek-photo-hero--sub{min-height:clamp(430px,64svh,600px)}
  .ph-card--problem .ph-title{font-size:clamp(2.15rem,1.1rem + 4.6vw,3.2rem)}
}

/* Texto claro sobre la foto (misma regla en desktop y móvil) */
.ph-card .ph-title{color:#fff}
.ph-card .ph-copy p{color:rgba(255,255,255,.93)}
body .ph-card .eyebrow{color:rgba(255,255,255,.7)}
.ph-card .ek-since{color:rgba(255,255,255,.72)}
.ph-card .ph-more summary{color:rgba(255,255,255,.9)}
.ph-card .ph-more p{color:rgba(255,255,255,.75)}
.ph-card .hero-actions .button{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.ph-card .hero-actions .button:hover{background:rgba(255,255,255,.12);color:#fff}
.ph-card .hero-actions .button--secondary{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.85)}
.ph-card .share-trigger{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.35)}
.ph-card .share-trigger:hover,.ph-card .share-trigger:focus-visible{color:#fff;border-color:rgba(255,255,255,.75)}
body .ph-card nav.breadcrumbs a{color:rgba(255,255,255,.72)!important}
body .ph-card nav.breadcrumbs a:hover,body .ph-card nav.breadcrumbs a:focus-visible{color:#fff!important}
body .ph-card nav.breadcrumbs>span{color:rgba(255,255,255,.38)!important}
body .ph-card nav.breadcrumbs>*:last-child{color:rgba(255,255,255,.72)!important}