[hidden] { display: none !important; }

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --black: #000;
  --ink: #121212;
  --paper: #f2f0eb;
  --white: #fff;
  --green: #8fbd18;
  --green-bright: #a8d21b;
  --green-dark: #4d6c00;
  --pink: #ec1986;
  --pink-dark: #a80b61;
  --muted: #767676;
  --line: rgba(255,255,255,.16);
  --line-dark: rgba(18,18,18,.18);
  --container: 1480px;
  --pad: clamp(22px, 4vw, 72px);
  --font: "Instrument Sans", Arial, Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; transform: translateY(-150%); padding: 10px 16px; background: var(--white); color: var(--black); }
.skip-link:focus { transform: none; }

.site-header { position: sticky; top: 0; z-index: 50; height: 106px; background: rgba(5,5,5,.97); color: var(--white); border-bottom: 1px solid var(--line); transition: height .25s ease; }

.header-inner { width: min(100%, var(--container)); height: 100%; margin: auto; padding: 0 var(--pad); display: flex; align-items: center; gap: 22px; }
.brand img { width: auto; object-fit: contain; }
.brand-clinic img { height: 50px; }
.brand-studio img { height: 44px; width: 122px; object-fit: cover; object-position: center; }
.brand-divider { width: 1px; height: 42px; background: var(--line); }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(20px, 2.2vw, 42px); font-size: .92rem; }
.main-nav > a { position: relative; padding: 12px 0; }
.main-nav > a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: 5px; width: 100%; height: 1px; background: var(--green); transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.main-nav > a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta, .button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 48px; border: 1px solid currentColor; border-radius: 999px; padding: 10px 16px 10px 20px; transition: color .2s ease, background .2s ease, transform .2s ease; }
.nav-cta { color: var(--green-bright); }
.nav-cta:hover, .button-primary:hover { background: var(--green); color: var(--black); transform: translateY(-2px); }
.menu-toggle { display: none; margin-left: auto; color: var(--white); background: none; border: 0; padding: 10px 0; }

.section-dark { color: var(--white); background: var(--black); }
.hero { position: relative; min-height: calc(100svh - 106px); overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-stage { position: relative; min-height: calc(100svh - 106px); }
.hero-slide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(360px, .82fr) minmax(500px, 1.18fr); min-height: calc(100svh - 106px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .7s ease, visibility .7s ease; }
.hero-slide.is-active { position: relative; z-index: 1; opacity: 1; visibility: visible; pointer-events: auto; }
.hero-copy { padding: clamp(72px, 8vw, 138px) var(--pad) 152px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.eyebrow, .label { margin: 0 0 18px; color: var(--green-dark); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.section-dark .eyebrow, .section-dark .label { color: var(--green); }
.hero .eyebrow span { display: inline-block; min-width: 72px; color: #8c8c8c; }
.hero h1, .hero h2 { margin: 0; max-width: 680px; font-size: clamp(4rem, 6.7vw, 8.4rem); line-height: .88; letter-spacing: -.07em; }
.accent-line { width: 58px; height: 3px; margin: 38px 0 26px; background: var(--green); }
.accent-line-dual { background: linear-gradient(90deg, var(--green) 0 50%, var(--pink) 50%); }
.hero-intro { margin: 0; max-width: 460px; font-size: clamp(1.2rem, 1.6vw, 1.75rem); line-height: 1.35; color: #e8e8e8; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 36px; }
.button-primary { color: var(--green-bright); }
.button-studio { color: var(--pink); }
.button-studio:hover { color: var(--black); background: var(--pink); transform: translateY(-2px); }
.hero-slide-studio .eyebrow { color: var(--pink); }
.hero-slide-studio .accent-line { background: var(--pink); }
.hero-choice-actions { align-items: stretch; flex-direction: column; width: min(100%, 330px); gap: 12px; }
.hero-choice-actions .button { width: 100%; }
.text-link { display: inline-flex; gap: 12px; align-items: center; border-bottom: 1px solid transparent; }
.text-link:hover { border-bottom-color: currentColor; }
.hero-media { position: relative; min-height: 720px; margin: 0; overflow: hidden; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.65), transparent 28%), linear-gradient(0deg, rgba(0,0,0,.42), transparent 40%); pointer-events: none; }
.hero-media > img, .hero-media-split span img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.06); }
.hero-media-facade > img { object-position: center 18%; }
.hero-media-clinic > img { object-position: center 44%; }
.hero-media-studio > img { object-position: 66% center; }
.hero-media-split { display: grid; grid-template-columns: 1fr 1fr; }
.hero-media-split span { min-width: 0; overflow: hidden; }
.hero-media-split span:first-child { clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%); margin-right: -10%; z-index: 1; }
.hero-media-split span:first-child img { object-position: center 42%; }
.hero-media-split span:last-child img { object-position: 66% center; }
.hero-media figcaption, .treatment-image figcaption { position: absolute; z-index: 1; right: 28px; bottom: 24px; color: rgba(255,255,255,.8); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-controls { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px 52px; align-items: stretch; gap: 10px; min-height: 112px; padding: 22px var(--pad); background: linear-gradient(0deg, rgba(5,5,5,.98), rgba(5,5,5,.7), transparent); }
.hero-controls button { color: #a7a7a7; background: transparent; border: 0; cursor: pointer; }
.hero-arrow, .hero-pause { align-self: center; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.45) !important; border-radius: 50%; font-size: 1.2rem; transition: color .2s ease, border-color .2s ease; }
.hero-arrow:hover, .hero-pause:hover { color: var(--green-bright); border-color: var(--green-bright) !important; }
.hero-pagination { display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; gap: 0; }
.hero-pagination button { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-width: 0; padding: 18px 12px 0; border-top: 1px solid rgba(255,255,255,.42); text-align: left; }
.hero-pagination button::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 3px; background: transparent; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.hero-pagination button.is-active { color: var(--green-bright); }
.hero-pagination button.is-active::before { background: var(--green-bright); transform: scaleX(1); }
.hero-pagination button:nth-child(3).is-active, .hero-pagination button:nth-child(3):hover { color: var(--pink); }
.hero-pagination button:nth-child(3).is-active::before { background: var(--pink); }
.hero-pagination small { font-size: .67rem; }

.treatment-browser { padding: clamp(54px, 6vw, 92px) var(--pad); }
.treatment-browser > * { width: min(100%, var(--container)); margin-left: auto; margin-right: auto; }
.section-kicker { display: flex; justify-content: space-between; color: #aaa; padding-bottom: 18px; border-bottom: 1px solid var(--line); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.treatment-explorer-heading { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); align-items: end; gap: clamp(34px, 7vw, 120px); margin-bottom: clamp(30px, 3.8vw, 54px); }
.treatment-explorer-heading h2 { max-width: 820px; margin: 0; font-size: clamp(2.25rem, 3.55vw, 4.45rem); line-height: .96; letter-spacing: -.052em; text-wrap: balance; }
.treatment-explorer-heading > p { max-width: 470px; margin: 0; color: #a8a8a8; line-height: 1.65; }
.treatment-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr); gap: clamp(34px, 4.8vw, 82px); align-items: stretch; }
.treatment-list { align-self: stretch; border-top: 1px solid var(--line); }
.treatment-item { display: grid; grid-template-columns: 50px minmax(0, 1fr) 28px; align-items: center; min-height: 57px; border-bottom: 1px solid var(--line); font-size: clamp(1rem, 1.28vw, 1.35rem); line-height: 1.18; transition: color .22s ease, transform .22s ease; }
.treatment-item:hover, .treatment-item.is-active { color: var(--green-bright); transform: translateX(7px); }
.treatment-item-index { color: #858585; font-size: .68rem; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.treatment-item.is-active .treatment-item-index { color: inherit; }
.treatment-item-arrow { justify-self: end; font-size: 1.15rem; transition: transform .22s ease; }
.treatment-item:hover .treatment-item-arrow, .treatment-item.is-active .treatment-item-arrow { transform: translate(2px,-2px); }
.treatment-item-thumb { display: none; }
.treatment-all { min-height: 54px; margin-top: 8px; font-size: .88rem; }
.treatment-image { position: relative; min-height: 500px; margin: 0; overflow: hidden; background: #111; }
.treatment-image::after { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.88)); pointer-events: none; }
.treatment-image > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.02); transition: opacity .2s ease, transform .55s cubic-bezier(.2,.72,.2,1), filter .35s ease; }
.treatment-image:hover > img { filter: saturate(1) contrast(1.01); transform: scale(1.025); }
.treatment-image.is-changing > img { opacity: .25; transform: scale(1.035); }
.treatment-image figcaption { position: absolute; z-index: 2; right: auto; bottom: 0; left: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); width: 100%; padding: 28px 30px; color: var(--white); text-transform: none; }
.treatment-image figcaption > span { grid-row: 1 / 3; color: var(--green-bright); font-size: .7rem; letter-spacing: .08em; }
.treatment-image figcaption > strong { font-size: clamp(1.35rem, 2vw, 2.25rem); line-height: 1; letter-spacing: -.035em; }
.treatment-image figcaption > p { max-width: 580px; margin: 9px 0 0; color: #d0d0d0; font-size: .84rem; line-height: 1.5; letter-spacing: 0; }

.treatment-catalog { padding-top: clamp(42px, 5vw, 74px); }
.treatment-catalog .treatment-explorer-heading { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); }
.treatment-catalog .treatment-explorer-heading h2 { font-size: clamp(2.15rem, 3vw, 3.7rem); }
.treatment-catalog .treatment-layout { grid-template-columns: minmax(360px, .78fr) minmax(0, 1.22fr); align-items: start; }
.treatment-catalog .treatment-image { position: sticky; top: 112px; height: min(620px, calc(100svh - 142px)); min-height: 480px; }
.treatment-catalog .treatment-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(22px, 3vw, 48px); }
.treatment-catalog .treatment-item { min-height: 76px; font-size: clamp(.98rem, 1.15vw, 1.2rem); }

.editorial-section { display: grid; grid-template-columns: minmax(320px, .72fr) minmax(480px, 1.28fr); width: min(100% - (var(--pad) * 2), var(--container)); margin: auto; padding: 70px 0; gap: clamp(46px, 8vw, 130px); border-bottom: 1px solid var(--line-dark); }
.editorial-copy { align-self: center; max-width: 520px; }
.editorial-copy h2, .section-heading-row h2 { margin: 0 0 24px; font-size: clamp(2.4rem, 4vw, 5rem); line-height: .98; letter-spacing: -.055em; }
.editorial-copy p:not(.label) { margin: 0 0 34px; max-width: 500px; font-size: 1.08rem; color: #414141; }
.button-light { color: var(--green-dark); padding-left: 20px; }
.section-dark .button-light { color: var(--green-bright); }
.button-light:hover { color: var(--black); background: var(--green-bright); transform: translateY(-2px); }
.editorial-media { min-height: 500px; margin: 0; overflow: hidden; background: #ddd; }
.editorial-media > img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.team-section { grid-template-columns: .86fr 1.14fr; }
.team-section .editorial-copy { order: 2; }
.team-portrait { position: relative; background: #d8d8d8; }
.team-portrait img { filter: grayscale(1); object-fit: contain; object-position: center bottom; }
.team-portrait figcaption { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; gap: 16px; padding: 18px 22px; color: var(--white); background: linear-gradient(transparent, rgba(0,0,0,.88)); }
.team-portrait figcaption span { color: #d6d6d6; }

.blog-preview { width: min(100% - (var(--pad) * 2), var(--container)); margin: auto; padding: 76px 0 92px; }
.section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.section-heading-row h2 { max-width: 800px; margin-bottom: 0; }
.label-pink { color: var(--pink-dark); }
.section-dark .label-pink { color: var(--pink); }
.dark-link { flex: 0 0 auto; padding-bottom: 5px; color: #444; }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
.article-card { position: relative; padding-bottom: 26px; border-bottom: 1px solid var(--line-dark); }
.article-image { display: block; aspect-ratio: 16/9; margin-bottom: 20px; overflow: hidden; background: #ddd; }
.article-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72); transition: transform .45s ease, filter .3s ease; }
.article-card:hover .article-image img { transform: scale(1.025); filter: saturate(1); }
.article-card p { margin: 0 0 8px; color: var(--pink-dark); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.article-card h3 { margin: 0; padding-right: 42px; font-size: clamp(1.2rem, 1.6vw, 1.65rem); line-height: 1.2; letter-spacing: -.025em; }
.article-card h3 a::after { content: ""; position: absolute; inset: 0; }
.card-arrow { position: absolute; z-index: 1; right: 2px; bottom: 24px; color: var(--pink); font-size: 1.8rem; }

.appointment-section { display: grid; grid-template-columns: 1fr 1fr 2fr; align-items: stretch; gap: 24px; padding: 62px max(var(--pad), calc((100% - var(--container)) / 2)); }
.appointment-copy { grid-column: 1 / -1; padding-bottom: 14px; }
.appointment-copy h2 { max-width: 900px; margin: 0; font-size: clamp(2.2rem, 3.5vw, 4rem); line-height: 1; }
.appointment-copy p { max-width: 760px; margin: 14px 0 0; color: #b9b9b9; font-size: 1.05rem; }
.space-card { min-height: 240px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px; border: 1px solid var(--green); transition: background .25s ease, transform .25s ease; }
.space-card img { width: auto; height: 100%; object-fit: contain; }
.space-card span { color: var(--green); font-size: 2.3rem; }
.space-card:hover { background: rgba(143,189,24,.09); transform: translateY(-3px); }
.studio-card { border-color: var(--pink); }
.studio-card img { width: auto; object-fit: contain; }
.studio-card span { color: var(--pink); }
.studio-card:hover { background: rgba(236,25,134,.08); }
.herbalist-card { position: relative; min-height: 240px; overflow: hidden; border: 1px solid rgba(151,202,27,.42); background: #f1f0e9; isolation: isolate; }
.herbalist-card::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.38) 49%, transparent 63%); transform: translateX(-120%); transition: transform .9s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.herbalist-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.herbalist-card span { position: absolute; z-index: 2; right: 18px; bottom: 16px; padding: 8px 12px; color: #fff; background: rgba(5,35,16,.78); font-size: .78rem; letter-spacing: .04em; backdrop-filter: blur(5px); }
.herbalist-card:hover img { transform: scale(1.025); filter: saturate(1.06); }
.herbalist-card:hover::after { transform: translateX(120%); }

.site-footer { position: relative; display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 40px; padding: 70px max(var(--pad), calc((100% - var(--container)) / 2)) 110px; color: #ddd; background: var(--black); border-top: 1px solid var(--line); }
.footer-brand img { height: 55px; width: auto; margin-bottom: 20px; }
.footer-brand p { color: #999; }
.site-footer h2 { margin: 0 0 18px; color: var(--white); font-size: .88rem; }
.site-footer > div:not(.footer-bottom) > a { display: block; width: fit-content; margin: 9px 0; color: #aaa; font-size: .9rem; }
.site-footer a:hover { color: var(--green-bright); }
.footer-bottom { position: absolute; left: max(var(--pad), calc((100% - var(--container)) / 2)); right: max(var(--pad), calc((100% - var(--container)) / 2)); bottom: 30px; display: flex; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--line); color: #777; font-size: .78rem; }
.floating-cta { display: none; }

/* Plantillas interiores: página de tratamiento y artículo editorial. */
.inner-hero { display: grid; grid-template-columns: .9fr 1.1fr; height: 620px; min-height: 0; }
.inner-hero-copy { padding: 38px var(--pad) 72px max(var(--pad), calc((100vw - var(--container)) / 2)); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 64px; color: #9c9c9c; font-size: .76rem; }
.breadcrumbs a:hover { color: var(--green-bright); }
.inner-hero h1 { max-width: 820px; margin: 0; font-size: clamp(2.45rem, 3.5vw, 4.6rem); line-height: .98; letter-spacing: -.045em; }
.inner-summary { max-width: 670px; margin: 0 0 30px; color: #ddd; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.42; }
.article-meta { display: flex; gap: 28px; margin: 0; color: #aaa; font-size: .82rem; }
.article-meta span + span::before { content: "·"; margin-right: 28px; }
.inner-hero-media { height: 620px; min-height: 0; margin: 0; overflow: hidden; background: #111; }
.inner-hero-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.68) contrast(1.04); }
.inner-hero-media-branded img { object-position: 72% center; filter: saturate(.9) contrast(1.02); }
.inner-hero-media-pilates img { object-position: 32% center; filter: saturate(.92) contrast(1.02); }
.content-shell { display: grid; grid-template-columns: 220px minmax(0, 780px) 240px; justify-content: center; align-items: start; gap: clamp(30px, 4vw, 78px); width: min(100% - (var(--pad) * 2), var(--container)); margin: 0 auto; padding: 76px 0 100px; }
.page-toc { position: sticky; top: 112px; padding-right: 26px; border-right: 1px solid var(--line-dark); }
.page-toc p { margin: 0 0 18px; font-weight: 700; }
.page-toc a { display: block; padding: 8px 0; color: #4a4a4a; font-size: .82rem; line-height: 1.35; }
.page-toc a:hover { color: #608700; }
.page-toc .toc-level-3 { padding-left: 14px; color: #666; }
.legacy-content { min-width: 0; color: #292929; font-size: 1.05rem; line-height: 1.72; }
.legacy-content > :first-child { margin-top: 0; }
.legacy-content h2, .legacy-content h3, .legacy-content h4 { scroll-margin-top: 115px; color: var(--ink); line-height: 1.1; letter-spacing: -.035em; }
.legacy-content h2 { margin: 54px 0 18px; padding-top: 28px; border-top: 1px solid var(--line-dark); font-size: clamp(2rem, 3vw, 3rem); }
.legacy-content h3 { margin: 38px 0 12px; font-size: clamp(1.4rem, 2vw, 2rem); }
.legacy-content h4 { margin: 28px 0 10px; font-size: 1.2rem; }
.legacy-content p { margin: 0 0 1.25em; }
.legacy-content ul, .legacy-content ol { margin: 0 0 1.6em; padding-left: 1.35em; }
.legacy-content li { margin: .45em 0; padding-left: .25em; }
.legacy-content a { color: var(--green-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legacy-content figure, .legacy-content .wp-block-image { margin: 40px 0; }
.legacy-content img { width: auto; max-width: 100%; height: auto; margin: 0 auto; }
.legacy-content iframe { width: 100%; max-width: 100%; border: 0; }

.legacy-content table { width: 100%; display: block; overflow-x: auto; border-collapse: collapse; }
.legacy-content code { padding: 2px 6px; background: rgba(19,21,17,.07); border-radius: 3px; font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace; font-size: .92em; word-break: break-word; }

/* --- Salux Estética -------------------------------------------------------
   La página /salux-estetica-salud-y-bienestar-en-cada-tratamiento/ llegó de
   WordPress con su propia maquetación en clases `.se-*` y una hoja de estilo
   incrustada en la propia página. El extractor elimina los <style> del origen,
   con buen criterio, pero eso dejaba estas clases sin ninguna regla: la página
   se veía como una pila de divs sin formato.
   Se les da estilo aquí, con el lenguaje del sitio, en lugar de recuperar el
   CSS de WordPress. -------------------------------------------------------- */
/* `.page-content` es una clase generica de WordPress y site.css la convierte en
   una rejilla de 12 columnas para otras paginas heredadas. En esta, eso metia
   cada tarjeta en una columna de 75 px. Se neutraliza solo cuando dentro hay
   una `.se-section`, sin tocar el resto de paginas que usan esa clase. */
.legacy-content .page-content:has(.se-section) {
  display: block;
  grid-template-columns: none;
}
.legacy-content .se-section { margin: clamp(28px, 4vw, 52px) 0; }
.legacy-content .se-title {
  margin: 0 0 10px;
  font-size: clamp(1.9rem, 3vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}
.legacy-content .se-subtitle {
  max-width: 62ch;
  margin: 0 0 clamp(26px, 3.4vw, 40px);
  color: #55534e;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.6;
}
.legacy-content .se-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 262px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.legacy-content .se-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2vw, 26px) clamp(24px, 2.4vw, 32px);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(18,18,18,.13);
  transition: transform .34s cubic-bezier(.2,.72,.2,1), box-shadow .34s ease, border-color .34s ease;
}
/* Barra de acento superior. Se despliega al pasar el ratón, como en el resto
   de tarjetas del sitio. */
.legacy-content .se-card::before {
  position: absolute;
  left: 0;
  top: -1px;
  width: 54px;
  height: 3px;
  content: "";
  background: var(--green-dark);
  transition: width .34s cubic-bezier(.2,.72,.2,1);
}
.legacy-content .se-card:hover {
  transform: translateY(-4px);
  border-color: rgba(18,18,18,.3);
  box-shadow: 0 22px 46px -28px rgba(18,18,18,.5);
}
.legacy-content .se-card:hover::before { width: 118px; }
.legacy-content .se-card h3 {
  margin: 2px 0 0;
  font-size: clamp(1.12rem, 1.35vw, 1.32rem);
  line-height: 1.15;
  letter-spacing: -.03em;
}
.legacy-content .se-card p {
  margin: 0;
  color: #55534e;
  font-size: .93rem;
  line-height: 1.58;
}
/* Etiqueta de categoría. Tres variantes en el contenido de origen:
   cuerpo, facial y bienestar. Se usan los colores de marca, sin inventar
   ninguno nuevo. */
.legacy-content .se-badge {
  align-self: start;
  padding: 5px 11px;
  color: var(--paper);
  background: var(--ink);
  font-size: .64rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.legacy-content .se-badge.cuerpo { color: #10120d; background: var(--green-bright); }
.legacy-content .se-badge.facial { color: var(--white); background: var(--pink-dark); }
.legacy-content .se-badge.bienestar { color: var(--white); background: var(--green-dark); }
.legacy-content .se-card:has(.se-badge.facial)::before { background: var(--pink-dark); }
.legacy-content .se-card:has(.se-badge.bienestar)::before { background: var(--green-dark); }

@media (max-width: 700px) {
  .legacy-content .se-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .legacy-content .se-card,
  .legacy-content .se-card::before { transition: none !important; }
  .legacy-content .se-card:hover { transform: none; }
}
.legacy-content th, .legacy-content td { padding: 10px; border: 1px solid var(--line-dark); text-align: left; }
.ez-toc-section { display: block; position: relative; top: -112px; visibility: hidden; }
.medical-note { margin-top: 56px; padding: 24px 26px; background: rgba(143,189,24,.1); border-left: 3px solid var(--green); }
.medical-note strong { display: block; margin-bottom: 5px; }
.medical-note p { margin: 0; font-size: .9rem; }
.contact-fallback { margin: 34px 0; padding: clamp(24px, 4vw, 42px); background: #e8e6e0; border-left: 3px solid var(--green); }
.contact-fallback strong { display: block; font-size: 1.35rem; }

/* --- Anti-spam de formularios ----------------------------------------------
   .form-trap es la trampa para bots: fuera de pantalla, sin ocupar espacio y
   sin `display:none` (algunos bots ignoran los campos ocultos por display).
   No es accesible a propósito: lleva aria-hidden y tabindex="-1". ---------- */
.form-trap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-captcha { margin-top: 6px; }
.form-captcha label { display: grid; gap: 6px; }
.form-captcha label > span { font-size: .82rem; font-weight: 650; }
.form-captcha input { max-width: 190px; }
.form-captcha-help { margin: 6px 0 0; color: #6b6b6b; font-size: .76rem; }

/* --- Marca de agua del formulario de Studio -------------------------------
   Simbolo de Studio Salux en la esquina superior derecha, grande y difuminado.
   Ocupa el 35 % del ancho del panel. Es decorativo: va con alt vacio y
   aria-hidden, y nunca recibe el puntero. -------------------------------- */
.contact-form-panel { position: relative; isolation: isolate; overflow: hidden; }
.contact-form-mark {
  position: absolute;
  z-index: -1;
  right: -4%;
  top: -6%;
  width: 35%;
  height: auto;
  opacity: .16;
  filter: blur(2.5px);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 900px) {
  .contact-form-mark { width: 44%; right: -8%; top: -3%; opacity: .13; }
}


/* --- Contenido de terceros bloqueado hasta el consentimiento --------------- */
.consent-frame { position: relative; display: grid; min-height: 260px; height: 100%; background: #1a1b17; border: 1px solid rgba(255,255,255,.14); }
.consent-frame[data-consent-loaded] { min-height: 0; border: 0; }
.consent-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
/* El bloque del video tiene proporcion 16/9 fija en el contenedor. El iframe
   que inserta site.js no traia altura y se quedaba en los 150 px por defecto
   del navegador, dejando una franja negra debajo. Aqui se le da la altura del
   contenedor. */
.context-video-frame .consent-frame,
.context-video-frame .consent-frame iframe { height: 100%; }
.context-video-frame .consent-frame { min-height: 0; }
.consent-frame-placeholder { display: grid; align-content: center; justify-items: start; gap: 12px; padding: clamp(24px, 3.4vw, 46px); color: var(--paper); }
.consent-frame-label { margin: 0; color: var(--green-bright); font-size: .7rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.consent-frame-placeholder > p { max-width: 60ch; margin: 0; color: #cfcfcf; font-size: .92rem; line-height: 1.6; }
.consent-frame-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; }
.consent-frame-actions .text-link { color: var(--paper); }
.consent-frame-note { max-width: 60ch; margin: 4px 0 0; color: #9a9a9a; font-size: .78rem; }
.consent-frame-note a { color: #cfcfcf; text-decoration: underline; }
.contact-map-frame .consent-frame { min-height: 520px; }
@media (max-width: 900px) { .contact-map-frame .consent-frame { min-height: 320px; } }

.form-captcha[data-captcha-error] input { border-color: var(--pink-dark); outline: 2px solid rgba(236,25,134,.28); outline-offset: 1px; }

.contact-fallback p { margin: 8px 0 22px; }
.contact-fallback .button { text-decoration: none; }
.contact-directory { grid-template-columns: 180px minmax(0, 1fr); }
.contact-intro, .contact-options { grid-column: 2; }
.contact-intro h2 { max-width: 900px; margin: 0 0 22px; font-size: clamp(2.3rem, 3.55vw, 4.25rem); line-height: 1; letter-spacing: -.05em; }
.contact-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 42px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.contact-options article { min-width: 0; min-height: 330px; padding: clamp(28px, 3.5vw, 48px); background: var(--paper); }
.contact-options h3 { margin: 42px 0 14px; font-size: clamp(1.45rem, 2vw, 2.05rem); }
.contact-options article > p:last-child { color: #555; }
.contact-main-link { display: block; min-height: 48px; overflow-wrap: anywhere; color: var(--green-dark); font-size: clamp(1rem, 1.25vw, 1.22rem); font-weight: 680; }
.studio-contact-page .contact-main-link { color: #ae0f65; }
.contact-hub { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(46px, 7vw, 108px); align-items: start; padding: clamp(70px, 8vw, 112px) max(var(--pad), calc((100% - var(--container)) / 2)); background: var(--paper); }
.contact-details > h2, .contact-form-panel > h2 { margin: 0 0 20px; font-size: clamp(2.15rem, 3.25vw, 3.85rem); line-height: 1; letter-spacing: -.05em; }
.contact-details > p:not(.label) { max-width: 590px; margin: 0 0 36px; color: #555; font-size: 1.06rem; }
.contact-card-stack { display: grid; gap: 12px; }
.contact-detail-card { display: grid; grid-template-columns: 52px minmax(0, 1fr) 24px; align-items: center; gap: 18px; min-height: 112px; padding: 17px 20px; color: var(--ink); background: #ebe8e1; border: 1px solid transparent; transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease; }
.contact-detail-card:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); transform: translateX(5px); }
.contact-card-icon { display: grid; place-items: center; width: 52px; height: 52px; color: var(--green-dark); background: var(--paper); border-radius: 50%; }
.contact-card-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-detail-card:nth-child(2) .contact-card-icon svg { fill: none; }
.contact-detail-card span:not(.contact-card-icon), .contact-detail-card small, .contact-detail-card strong, .contact-detail-card em { display: block; min-width: 0; }
.contact-detail-card small { margin-bottom: 3px; color: #666; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.contact-detail-card strong { overflow-wrap: anywhere; font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.2; }
.contact-detail-card:nth-child(3) strong { font-size: clamp(.86rem, 1.05vw, 1.06rem); }
.contact-detail-card em { margin-top: 4px; color: #666; font-size: .8rem; font-style: normal; }
.contact-detail-card > b { color: var(--green-dark); font-size: 1.2rem; }
.contact-detail-card:hover small, .contact-detail-card:hover em { color: #aaa; }
.contact-detail-card:hover .contact-card-icon { color: var(--ink); background: var(--green-bright); }
.contact-hub-studio .contact-card-icon, .contact-hub-studio .contact-detail-card > b { color: var(--pink-dark); }
.contact-hub-studio .contact-detail-card:hover .contact-card-icon { color: var(--ink); background: var(--pink); }
.contact-form-panel { padding: clamp(32px, 4.5vw, 62px); color: var(--paper); background: var(--ink); }
.contact-form { display: grid; gap: 20px; margin-top: 36px; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label:not(.form-consent) { display: grid; gap: 8px; color: #aaa; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.contact-form input:not([type="checkbox"]), .contact-form select, .contact-form textarea { width: 100%; min-height: 50px; padding: 12px 14px; color: var(--paper); background: #181818; border: 1px solid #414141; border-radius: 0; font: inherit; font-size: .96rem; text-transform: none; transition: border-color .2s ease, background-color .2s ease; }
.contact-form textarea { min-height: 128px; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; background: #1d1d1d; border-color: var(--green-bright); }

.contact-form option { color: var(--ink); background: var(--paper); }
.form-consent { display: flex; align-items: flex-start; gap: 11px; color: #bbb; font-size: .82rem; line-height: 1.45; }
.form-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green-bright); }
.contact-hub-studio .form-consent input { accent-color: var(--pink); }
.form-consent a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.contact-form .button { justify-self: start; margin-top: 4px; border: 0; cursor: pointer; }
.form-helper { max-width: 560px; margin: -3px 0 0; color: #888; font-size: .76rem; line-height: 1.45; }
.form-status { min-height: 20px; margin: 0; color: var(--green-bright); font-size: .82rem; }
.contact-hub-studio .form-status { color: var(--pink); }
.contact-map { display: grid; grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr); gap: clamp(38px, 6vw, 96px); align-items: center; padding: clamp(66px, 8vw, 108px) max(var(--pad), calc((100% - var(--container)) / 2)); background: #e8e5de; }
.contact-map-copy h2 { max-width: 520px; margin: 0 0 22px; font-size: clamp(2.2rem, 3.3vw, 4rem); line-height: 1; letter-spacing: -.05em; }
.contact-map-copy > p:not(.label) { margin: 0 0 25px; color: #555; font-size: 1.05rem; }
.contact-map-frame { position: relative; min-height: 520px; overflow: hidden; background: #d2d0ca; border: 1px solid var(--line-dark); }
.contact-map-frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.contact-guidance { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(44px, 8vw, 120px); padding: 78px max(var(--pad), calc((100% - var(--container)) / 2)); }
.contact-guidance h2 { max-width: 720px; margin: 0; font-size: clamp(2.25rem, 3.5vw, 4.15rem); line-height: 1; letter-spacing: -.05em; }
.contact-guidance > div:last-child { align-self: end; }
.contact-guidance > div:last-child p { max-width: 650px; margin: 0 0 28px; color: #c7c7c7; }
.not-found { min-height: 100svh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: var(--pad) max(var(--pad), calc((100% - 920px) / 2)); }
.not-found > img { width: auto; height: 64px; margin-bottom: 80px; }
.not-found h1 { max-width: 850px; margin: 0 0 24px; font-size: clamp(3.6rem, 8vw, 7.8rem); line-height: .9; letter-spacing: -.07em; }
.not-found > p:not(.eyebrow) { max-width: 560px; margin: 0 0 34px; color: #bbb; font-size: 1.2rem; }
.not-found > div { display: flex; align-items: center; gap: 28px; }
.author-card, .call-card { position: sticky; top: 112px; padding: 24px; background: #e8e6e0; }
.author-card > p, .call-card > p { margin: 0 0 18px; font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.author-card > p::after { content: ""; display: block; width: 28px; height: 2px; margin-top: 14px; background: var(--green); }
.author-card img { width: 100%; aspect-ratio: 4/5; margin-bottom: 16px; object-fit: cover; object-position: center top; filter: grayscale(1); }
/* Cuando la autoria es el equipo no hay retrato: se usa el logotipo, que es
   apaisado 3,82:1. Recortarlo a 4/5 con object-fit: cover dejaba a la vista
   el 21 % central de la marca, ampliado y en gris. Aqui se muestra entero. */
.author-card-team img { aspect-ratio: 3 / 2; padding: 22px; background: var(--white); object-fit: contain; filter: none; }
.author-card strong, .author-card > span { display: block; }
.author-card > span { margin-top: 3px; color: #666; font-size: .78rem; }
.author-card > a { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line-dark); color: var(--green-dark); font-size: .82rem; }
.call-card > span { display: block; margin-bottom: 24px; color: #555; font-size: .88rem; }
.call-card .button { width: 100%; font-size: .78rem; }

@media (max-width: 1050px) {
  body.menu-open { overflow: hidden; }
  
  .brand-studio, .brand-divider { display: none; }
  .menu-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; }
  .menu-toggle i, .menu-toggle i::before { display: block; width: 24px; height: 1px; background: currentColor; content: ""; transition: transform .2s ease; }
  .menu-toggle i::before { transform: translateY(-7px); }
  .menu-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] i::before { transform: rotate(-90deg); }
  /* 2026-09-03. `opacity: 0` + `pointer-events: none` ocultaba el menu al raton
     pero NO al teclado ni al lector de pantalla: a 390 px, con el menu cerrado,
     Shift+Tab desde el boton Menu llevaba el foco a «Pide cita», fuera de la
     pantalla y sin marca visible. `visibility: hidden` lo saca del orden de
     tabulacion y del arbol de accesibilidad; va en la transicion para que la
     animacion de cierre siga viendose los 280 ms. */
  .main-nav { position: fixed; inset: 82px 0 auto; display: grid; gap: 0; padding: 18px var(--pad) 30px; background: var(--black); border-bottom: 1px solid var(--line); transform: translateY(-140%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .28s ease, opacity .2s ease, visibility .28s ease; }
  .main-nav.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .main-nav > a { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .main-nav .nav-cta { margin-top: 16px; padding-left: 18px; }
  .hero, .hero-stage, .hero-slide { min-height: 760px; }
  
  
  .hero-media { min-height: 660px; }
  .treatment-layout { grid-template-columns: 1fr; }
  .treatment-image { min-height: 440px; }
  .appointment-section { grid-template-columns: 1fr 1fr; }
  .appointment-copy { grid-column: 1 / -1; }
  .content-shell { grid-template-columns: 190px minmax(0, 1fr); }
  .author-card, .call-card { position: static; grid-column: 2; display: grid; grid-template-columns: 100px 1fr; gap: 8px 18px; align-items: start; }
  .author-card > p, .call-card > p { grid-column: 1 / -1; }
  .author-card img { grid-row: 2 / span 3; }
}

/* Identidad de los dos ámbitos y utilidades globales. */
.brand {
  flex: 0 0 150px;
  width: 150px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.brand img,
.brand-clinic img,
.brand-studio img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-studio img {
  object-fit: cover;
  object-position: center top;
}
.brand-divider { flex: 0 0 1px; height: 36px; }
.footer-brand img { width: min(100%, 220px); height: auto; }
/* Logos de las tarjetas de espacio.
   Antes: caja fija de 190x52 y `object-fit: cover` en el de Studio, que tiene
   proporcion 2,72 frente a 3,65 de la caja. Resultado: el logo de Studio salia
   recortado por los lados. Ahora manda la ALTURA y el ancho se ajusta solo, con
   `contain` en los dos: un logo no se recorta nunca. */
.space-logo {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  height: clamp(58px, 6.4vw, 82px);
  display: flex;
  align-items: center;
  overflow: visible;
}
.space-logo img,
.studio-card .space-logo img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
/* El logo de Studio es un JPG con fondo negro solido (comprobado: las cuatro
   esquinas son 0,0,0). Sobre la tarjeta oscura se veia como un rectangulo
   pegado. `screen` hace que el negro puro devuelva el fondo, asi que la caja
   desaparece y el logo queda flotando. No hace falta rehacer el archivo. */
.studio-card .space-logo img {
  mix-blend-mode: screen;
}
.space-card > span:not(.space-logo) { flex: 1 0 100%; }

.footer-legal button {
  display: inline-block;
  width: fit-content;
  margin: 9px 0;
  padding: 0;
  color: #aaa;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: .9rem;
  text-align: left;
}
.footer-legal button:hover { color: var(--green-bright); }
.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 7px 12px;
  color: #bdbdbd;
  border: 1px solid #333;
  border-radius: 999px;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.footer-credit:hover { color: var(--white); border-color: var(--green); background: rgba(143,189,24,.08); }

.floating-tools {
  position: fixed;
  z-index: 72;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  transition: opacity .2s ease, transform .2s ease;
}
.scroll-top,
.whatsapp-button {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border: 0;
  border-radius: 999px 0 0 999px;
  box-shadow: 0 10px 34px rgba(0,0,0,.24);
}
.scroll-top {
  justify-content: center;
  color: var(--white);
  background: #111;
  border: 1px solid #393939;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease, background .2s ease;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.scroll-top:hover { background: #242424; }
.scroll-top svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.whatsapp-button {
  overflow: hidden;
  color: #071d0d;
  background: #25d366;
  transition: width .28s ease, transform .2s ease, box-shadow .2s ease;
}
.whatsapp-button:hover,
.whatsapp-button:focus-visible { width: 206px; transform: translateY(-2px); box-shadow: 0 14px 38px rgba(0,0,0,.3); }
.whatsapp-button svg {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  padding: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.whatsapp-label {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  font-weight: 750;
  font-size: .9rem;
  transition: max-width .28s ease, opacity .2s ease;
}
.whatsapp-button:hover .whatsapp-label,
.whatsapp-button:focus-visible .whatsapp-label { max-width: 136px; opacity: 1; }

.cookie-banner {
  position: fixed;
  z-index: 100;
  left: max(18px, env(safe-area-inset-left));
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(1180px, calc(100% - 36px));
  max-height: calc(100svh - 36px);
  margin: auto;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 34px;
  align-items: center;
  padding: 26px;
  color: var(--white);
  background: #101010;
  border: 1px solid #3c3c3c;
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
}
.cookie-copy p { margin: 0 0 6px; color: var(--green-bright); font-weight: 750; font-size: 1.08rem; }
.cookie-copy span { display: block; max-width: 760px; color: #ccc; font-size: .9rem; }
.cookie-copy a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.cookie-button {
  min-height: 46px;
  padding: 10px 16px;
  color: var(--white);
  border: 1px solid #555;
  border-radius: 999px;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;
}
.cookie-secondary { background: transparent; }
.cookie-secondary:hover { border-color: #999; background: #202020; }
.cookie-primary { color: #101010; background: var(--green-bright); border-color: var(--green-bright); }
.cookie-primary:hover { background: #b2df36; }
.cookie-preferences { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid #333; }
.cookie-preferences fieldset { margin: 0 0 18px; padding: 0; border: 0; }
.cookie-preferences legend { margin-bottom: 10px; font-weight: 750; }
.cookie-preferences label { display: flex; justify-content: space-between; gap: 28px; align-items: center; padding: 13px 0; border-top: 1px solid #2b2b2b; }
.cookie-preferences strong,
.cookie-preferences small { display: block; }
.cookie-preferences small { margin-top: 2px; color: #aaa; }
.cookie-preferences input { width: 22px; height: 22px; accent-color: var(--green); }
.cookie-open .floating-tools { opacity: 0; pointer-events: none; transform: translateX(20px); }


@media (max-width: 1050px) {
  .brand-studio { display: flex; }
  .brand-divider { display: block; }
  .header-inner { gap: 14px; }
}

@media (max-width: 760px) {
  
  
  .brand-divider { height: 28px; }
  .header-inner { gap: 9px; }
  
  .menu-toggle span { font-size: .8rem; }
  .space-logo { flex-basis: auto; width: auto; height: clamp(50px, 11vw, 66px); }
  .space-card img,
  .studio-card img { width: auto; height: 100%; }
  
  .floating-tools { right: 12px; bottom: 82px; }
  .scroll-top,
  .whatsapp-button { width: 52px; height: 52px; }
  .whatsapp-button:hover,
  .whatsapp-button:focus-visible { width: 52px; transform: none; }
  
  .whatsapp-label { display: none; }
  .cookie-open .floating-cta { display: none; }
  .cookie-banner { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
  .cookie-actions { justify-content: stretch; }
  .cookie-button { flex: 1 1 145px; }
}

@media (max-width: 390px) {
  
  .brand-divider { height: 24px; }
  .header-inner { gap: 7px; }
  .menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; width: calc(100% - 20px); padding: 18px; }
  .cookie-actions { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-top,
  .whatsapp-button,
  .whatsapp-label,
  .floating-tools { transition: none; }
}

/* Técnica clínica: composición editorial común, contenido específico por URL. */
.technique-editorial { overflow: clip; }
.technique-intro,
.technique-principles,
.technique-process,
.technique-limits,
.technique-faq,
.technique-next,
.technique-source { width: min(100%, var(--container)); margin-inline: auto; }
.technique-intro { display: grid; grid-template-columns: minmax(240px, .65fr) minmax(420px, 1.35fr); gap: clamp(42px, 8vw, 140px); padding: clamp(72px, 9vw, 150px) var(--pad); border-bottom: 1px solid var(--line-dark); }
.technique-intro h2,
.technique-principles h2,
.technique-process h2,
.technique-limits h2,
.technique-faq h2 { margin: 0; font-size: clamp(2.35rem, 4.3vw, 5.2rem); line-height: .95; letter-spacing: -.06em; }
.technique-lead { max-width: 830px; margin: 0; font-size: clamp(1.35rem, 2.1vw, 2.2rem); line-height: 1.35; }
.technique-principles { padding: clamp(72px, 8vw, 128px) var(--pad); }
.technique-principles > div { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border: 1px solid var(--line); }
.technique-principles article { min-height: 320px; padding: clamp(28px, 3vw, 48px); border-right: 1px solid var(--line); }
.technique-principles article:last-child { border-right: 0; }
.technique-principles article > span,
.technique-process li > span { color: var(--green); font-size: .8rem; letter-spacing: .1em; }
.technique-principles h3,
.technique-process h3 { margin: 52px 0 18px; font-size: clamp(1.55rem, 2.1vw, 2.25rem); line-height: 1.05; letter-spacing: -.045em; }
.technique-principles p { max-width: 36ch; margin: 0; color: #c8c8c8; }
.technique-process { padding: clamp(76px, 9vw, 150px) var(--pad); }
.technique-process > header { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: end; }
.technique-process > header > p { max-width: 560px; margin: 0; font-size: 1.15rem; }
.technique-process ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 70px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.technique-process li { padding: 34px clamp(22px, 3vw, 46px) 48px 0; border-right: 1px solid var(--line-dark); }
.technique-process li + li { padding-left: clamp(22px, 3vw, 46px); }
.technique-process li:last-child { border-right: 0; }
.technique-process h3 { margin-top: 30px; }
.technique-process li p { margin: 0; max-width: 38ch; }
.technique-limits { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(50px, 10vw, 170px); padding: clamp(70px, 8vw, 126px) var(--pad); border-top: 1px solid var(--line-dark); background: #e9e6df; }
.technique-limits > p { max-width: 760px; margin: 0; padding-left: 34px; border-left: 3px solid var(--green); font-size: clamp(1.2rem, 1.6vw, 1.55rem); line-height: 1.52; }
.technique-faq { padding: clamp(72px, 8vw, 128px) var(--pad); }
.technique-faq > div { margin-top: 54px; border-top: 1px solid var(--line); }
.technique-faq details { border-bottom: 1px solid var(--line); }
.technique-faq summary,
.technique-source summary { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 26px 0; cursor: pointer; list-style: none; font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 650; }
.technique-faq summary::-webkit-details-marker,
.technique-source summary::-webkit-details-marker { display: none; }
.technique-faq summary b,
.technique-source summary b { color: var(--green); font-size: 1.4rem; transition: transform .2s ease; }
.technique-faq details[open] summary b,
.technique-source[open] summary b { transform: rotate(45deg); }
.technique-faq details p { max-width: 820px; margin: -4px 0 28px; color: #c8c8c8; }
.technique-next { padding: 54px var(--pad) 80px; }
.technique-next > div { display: flex; flex-wrap: wrap; gap: 12px; }
.technique-next a { display: inline-flex; justify-content: space-between; gap: 32px; min-width: min(100%, 300px); padding: 18px 20px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.42); font-weight: 650; }
.technique-next a:hover { color: var(--green-dark); border-color: var(--green); }
.technique-source { margin-bottom: 90px; padding: 0 var(--pad); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.technique-source > .legacy-content { width: min(100%, 980px); margin: 0 auto; padding: 20px 0 70px; }

@media (max-width: 900px) {
  .technique-intro,
  .technique-process > header,
  .technique-limits { grid-template-columns: 1fr; gap: 34px; }
  .technique-principles > div,
  .technique-process ol { grid-template-columns: 1fr; }
  .technique-principles article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .technique-principles article:last-child { border-bottom: 0; }
  .technique-principles h3 { margin-top: 28px; }
  .technique-process li,
  .technique-process li + li { padding: 30px 0 36px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .technique-process li:last-child { border-bottom: 0; }
  .technique-limits > p { padding: 0 0 0 22px; }
}

/* Tratamientos: sistema editorial común con contenido específico por servicio. */
.treatment-editorial { overflow: clip; background: var(--paper); }
.treatment-orientation,
.treatment-focus,
.treatment-process,
.treatment-limits,
.treatment-faq,
.treatment-next,
.treatment-source { width: min(100%, var(--container)); margin-inline: auto; }
.treatment-orientation { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(420px, 1.25fr); gap: clamp(46px, 9vw, 150px); padding: clamp(72px, 9vw, 148px) var(--pad); }
.treatment-orientation h2,
.treatment-focus h2,
.treatment-process h2,
.treatment-limits h2,
.treatment-faq h2 { margin: 0; font-size: clamp(2.4rem, 4.5vw, 5.3rem); line-height: .94; letter-spacing: -.065em; }
.treatment-orientation > p { align-self: end; max-width: 820px; margin: 0; font-size: clamp(1.28rem, 1.85vw, 1.85rem); line-height: 1.45; }
.treatment-focus { width: 100%; max-width: none; padding: clamp(74px, 8vw, 126px) max(var(--pad), calc((100% - var(--container)) / 2)); }
.treatment-focus > header { display: grid; grid-template-columns: .65fr 1.35fr; gap: 48px; align-items: end; margin-bottom: 54px; }
.treatment-focus > div { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #343434; border-left: 1px solid #343434; }
.treatment-focus article { min-height: 310px; padding: clamp(28px, 3vw, 46px); border-right: 1px solid #343434; border-bottom: 1px solid #343434; }
.treatment-focus article > span { color: var(--green); font-size: .78rem; letter-spacing: .12em; }
.treatment-focus h3 { margin: 62px 0 18px; color: #fff; font-size: clamp(1.5rem, 2vw, 2.25rem); line-height: 1.05; letter-spacing: -.04em; }
.treatment-focus article p { max-width: 38ch; margin: 0; color: #bcbcbc; }
.treatment-process { padding: clamp(76px, 9vw, 142px) var(--pad); }
.treatment-process > header { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(48px, 9vw, 140px); align-items: end; }
.treatment-process > header > p { max-width: 600px; margin: 0; color: #555; font-size: 1.1rem; }
.treatment-process ol { display: grid; grid-template-columns: repeat(3, 1fr); margin: 64px 0 0; padding: 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); list-style: none; }
.treatment-process li { padding: 34px clamp(22px, 3vw, 46px) 48px 0; border-right: 1px solid var(--line-dark); }
.treatment-process li + li { padding-left: clamp(22px, 3vw, 46px); }
.treatment-process li:last-child { border-right: 0; }
.treatment-process li > span { color: var(--green-dark); font-size: .78rem; letter-spacing: .12em; }
.treatment-process h3 { margin: 30px 0 16px; font-size: clamp(1.5rem, 2vw, 2.2rem); letter-spacing: -.04em; }
.treatment-process li p { max-width: 38ch; margin: 0; }
.treatment-limits { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px, 9vw, 150px); padding: clamp(72px, 8vw, 122px) var(--pad); background: #e7e4dd; }
.treatment-limits > p { align-self: end; max-width: 780px; margin: 0; padding: 30px 0 30px 34px; border-left: 3px solid var(--green); font-size: clamp(1.18rem, 1.6vw, 1.5rem); line-height: 1.55; }
.treatment-faq { width: 100%; max-width: none; padding: clamp(74px, 8vw, 126px) max(var(--pad), calc((100% - var(--container)) / 2)); }
.treatment-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(48px, 9vw, 150px); }
.treatment-faq > div { border-top: 1px solid #353535; }
.treatment-faq details { border-bottom: 1px solid #353535; }
.treatment-faq summary { display: flex; justify-content: space-between; gap: 28px; padding: 26px 0; cursor: pointer; list-style: none; color: #fff; font-weight: 700; }
.treatment-faq summary::-webkit-details-marker { display: none; }
.treatment-faq summary b { color: var(--green); font-size: 1.4rem; transition: transform .2s ease; }
.treatment-faq details[open] summary b { transform: rotate(45deg); }
.treatment-faq details p { max-width: 780px; margin: 0 0 30px; color: #bfbfbf; }
.treatment-next { padding: 62px var(--pad) 86px; }
.treatment-next > div { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 18px; border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.treatment-next a { display: flex; justify-content: space-between; gap: 24px; padding: 26px; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); font-weight: 700; }
.treatment-next a:hover { color: var(--green-dark); background: rgba(168,210,27,.08); }
.treatment-source { margin-bottom: 90px; padding: 0 var(--pad); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.treatment-source > summary { display: flex; justify-content: space-between; gap: 28px; padding: 28px 0; cursor: pointer; list-style: none; font-weight: 750; }
.treatment-source > summary::-webkit-details-marker { display: none; }
.treatment-source > summary b { color: var(--green-dark); font-size: 1.45rem; transition: transform .2s ease; }
.treatment-source[open] > summary b { transform: rotate(45deg); }
.treatment-source-note { max-width: 900px; margin: 26px auto; padding: 26px; border-left: 3px solid var(--green); background: rgba(168,210,27,.08); }
.treatment-source-note strong { display: block; margin-bottom: 8px; }
.treatment-source-note p { margin: 0; }
.treatment-source .legacy-content { width: min(100%, 1040px); margin: 0 auto; padding: 24px 0 70px; }

@media (max-width: 900px) {
  .treatment-orientation,
  .treatment-focus > header,
  .treatment-process > header,
  .treatment-limits,
  .treatment-faq { grid-template-columns: 1fr; gap: 34px; }
  .treatment-focus > div,
  .treatment-process ol { grid-template-columns: 1fr; }
  .treatment-focus article { min-height: 0; }
  .treatment-focus h3 { margin-top: 32px; }
  .treatment-process li,
  .treatment-process li + li { padding: 30px 0 36px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .treatment-process li:last-child { border-bottom: 0; }
  .treatment-next > div { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --pad: 20px; }
  body { padding-bottom: 66px; }
  .brand-clinic img { height: 42px; }
  .hero, .hero-stage, .hero-slide { min-height: calc(100svh - 82px); }
  .hero-slide { display: block; }
  .hero-copy { position: relative; z-index: 2; min-height: calc(100svh - 82px); padding-top: 42px; padding-bottom: 188px; }
  .hero h1, .hero h2 { font-size: clamp(3.15rem, 15vw, 5.15rem); text-shadow: 0 2px 24px rgba(0,0,0,.48); }
  .hero-intro { font-size: 1.2rem; }
  .hero-actions .text-link { display: none; }
  .hero-media { position: absolute; z-index: 0; inset: 0; min-height: 100%; opacity: .66; }
  
  .hero-media figcaption { right: 18px; bottom: 180px; }
  .hero-media-facade > img { object-position: center 20%; }
  .hero-media-clinic > img { object-position: center 42%; }
  .hero-media-studio > img { object-position: 66% center; }
  .hero-controls { grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 4px; min-height: 96px; bottom: 66px; padding: 14px 12px; background: linear-gradient(0deg, rgba(5,5,5,.96), rgba(5,5,5,.72), transparent); }
  
  .hero-arrow { width: 38px; height: 38px; }
  .hero-pagination button { padding: 16px 5px 0; align-items: center; }
  .hero-pagination small { display: none; }
  .hero-choice-actions { width: 100%; }
  .treatment-browser { padding: 48px var(--pad) 58px; }
  .treatment-explorer-heading,
  .treatment-catalog .treatment-explorer-heading { grid-template-columns: 1fr; gap: 18px; margin-bottom: 28px; }
  .treatment-explorer-heading h2,
  .treatment-catalog .treatment-explorer-heading h2 { font-size: clamp(2rem, 9vw, 3rem); }
  .treatment-explorer-heading > p { font-size: .94rem; }
  .treatment-layout,
  .treatment-catalog .treatment-layout { grid-template-columns: 1fr; gap: 22px; }
  .treatment-image,
  .treatment-catalog .treatment-image { position: relative; top: auto; height: auto; min-height: 310px; aspect-ratio: 4 / 3; }
  .treatment-image figcaption { grid-template-columns: 52px minmax(0, 1fr); padding: 22px; }
  .treatment-image figcaption > strong { font-size: 1.45rem; }
  .treatment-image figcaption > p { display: none; }
  .treatment-list,
  .treatment-catalog .treatment-list { display: grid; grid-template-columns: 1fr; gap: 8px; border-top: 0; }
  .treatment-item,
  .treatment-catalog .treatment-item { grid-template-columns: 84px 34px minmax(0, 1fr) 22px; min-height: 78px; padding: 9px; gap: 8px; border: 1px solid rgba(255,255,255,.13); background: #0d0d0d; font-size: 1rem; }
  .treatment-item:hover, .treatment-item.is-active { transform: none; border-color: rgba(168,210,27,.72); }
  .treatment-item-thumb { display: block; grid-column: 1; grid-row: 1; width: 84px; height: 58px; overflow: hidden; }
  .treatment-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .treatment-item-index { grid-column: 2; grid-row: 1; }
  .treatment-item-title { grid-column: 3; grid-row: 1; }
  .treatment-item-arrow { grid-column: 4; grid-row: 1; }
  .treatment-all { margin-top: 2px; padding-inline: 12px; }
  .editorial-section, .team-section { grid-template-columns: 1fr; width: calc(100% - 40px); padding: 54px 0; gap: 34px; }
  .editorial-section .editorial-copy, .team-section .editorial-copy { order: 1; }
  .editorial-section .editorial-media, .team-section .editorial-media { order: 2; min-height: 380px; }
  .section-heading-row { display: block; }
  .section-heading-row .dark-link { margin-top: 22px; }
  .article-grid { grid-template-columns: 1fr; gap: 38px; }
  .appointment-section { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 48px; }
  .appointment-copy { grid-column: auto; }
  .space-card { min-height: 105px; padding: 22px; }
  .space-card img { height: 100%; }
  .studio-card img { width: auto; }
  .site-footer { grid-template-columns: 1fr 1fr; padding-bottom: 120px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { display: grid; gap: 6px; }
  .floating-cta { position: fixed; z-index: 60; display: flex; justify-content: space-between; align-items: center; left: 0; right: 0; bottom: 0; min-height: 66px; padding: 12px 22px; color: var(--black); background: var(--green-bright); font-weight: 700; }
  .inner-hero { display: flex; flex-direction: column; min-height: auto; }
  .inner-hero-copy { min-height: 560px; padding: 32px var(--pad) 58px; }
  .breadcrumbs { margin-bottom: 48px; }
  .inner-hero h1 { font-size: clamp(3rem, 13vw, 5rem); }
  
  .content-shell { display: block; width: calc(100% - 40px); padding: 50px 0 70px; }
  .page-toc { position: static; margin-bottom: 40px; padding: 22px; border: 1px solid var(--line-dark); }
  .page-toc a:nth-of-type(n+7) { display: none; }
  .legacy-content { font-size: 1rem; }
  .legacy-content h2 { margin-top: 42px; }
  .author-card, .call-card { display: block; margin-top: 42px; }
  .author-card img { max-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Sistema editorial 2026 */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.eyebrow-pink, .section-kicker.pink, .label-pink { color: var(--pink-dark); }
.section-dark .eyebrow-pink, .section-dark .section-kicker.pink, .section-dark .label-pink { color: var(--pink); }
.accent-pink { background: var(--pink); }
.button-dark { color: var(--ink); background: transparent; }
.button-dark:hover { color: var(--paper); background: var(--ink); transform: translateY(-2px); }
.text-link-dark { color: var(--ink); }
.lead { font-size: clamp(1.08rem, 1.45vw, 1.35rem); line-height: 1.55; color: #343434; }

.site-header { height: 92px; }
.site-header.is-compact { height: 76px; }
.main-nav { display: block; }
.main-nav > ul { display: flex; align-items: center; gap: clamp(12px, 1.25vw, 24px); margin: 0; padding: 0; list-style: none; }
.main-nav li { position: relative; }
.main-nav li > a, .nav-parent > a { display: inline-flex; min-height: 44px; align-items: center; color: #e8e8e8; font-size: .84rem; }
.main-nav li > a.is-active, .nav-parent > a.is-active { color: var(--green-bright); }
.nav-parent { display: flex; align-items: center; }
.submenu-toggle { width: 30px; height: 40px; padding: 0; color: #999; background: none; border: 0; cursor: pointer; }
.submenu { position: absolute; top: calc(100% + 18px); left: -24px; display: grid; grid-template-columns: repeat(2, minmax(190px, 1fr)); width: min(520px, 70vw); padding: 24px; color: var(--paper); background: #111; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.38); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.has-submenu:hover .submenu, .has-submenu:focus-within .submenu, .has-submenu.is-open .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu p { grid-column: 1 / -1; margin: 0 0 12px; color: var(--green); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.submenu a { display: flex !important; justify-content: space-between; gap: 20px; min-height: 42px !important; padding: 9px 10px; border-bottom: 1px solid var(--line); }

.main-nav > ul > li:nth-last-child(-n+4) .submenu { left: auto; right: 0; }
.nav-search { gap: 7px; }
.nav-search b { color: var(--green); font-size: 1.25rem; font-weight: 400; }
.main-nav .nav-cta { min-height: 42px; color: var(--green-bright); padding: 7px 14px 7px 17px; }

.hero, .hero-slides, .hero-slide { height: min(820px, calc(100svh - 92px)); min-height: 680px; }
.hero-slides { position: relative; }
.hero-slide { grid-template-columns: minmax(360px, .88fr) minmax(560px, 1.12fr); }
.hero-copy { padding-top: clamp(64px, 7vw, 110px); }
.hero h1, .hero h2 { max-width: 620px; font-size: clamp(2.9rem, 4vw, 5.15rem); line-height: .96; letter-spacing: -.05em; }
.hero-copy > p:not(.eyebrow) { max-width: 500px; margin: 0; color: #d2d2d2; font-size: clamp(1.03rem, 1.25vw, 1.24rem); line-height: 1.48; }
.hero-media { height: 100%; min-height: 0; }
.hero-controls { grid-template-columns: 46px minmax(0, 1fr) 46px 46px; min-height: 100px; }
.hero-tabs { display: grid; grid-template-columns: repeat(4, 1fr); }
.hero-tabs button { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; border-top: 1px solid rgba(255,255,255,.36); text-align: left; }
.hero-tabs button::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 3px; background: transparent; transform: scaleX(0); transform-origin: left; }
.hero-tabs button.is-active { color: var(--green-bright); }
.hero-tabs button.is-active::before { background: currentColor; animation: hero-slide-progress 6.5s linear forwards; }
.hero-tabs button:nth-child(3).is-active { color: var(--pink); }
.hero.is-paused .hero-tabs button.is-active::before,
.hero.is-system-paused .hero-tabs button.is-active::before { animation-play-state: paused; }
@keyframes hero-slide-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.section-heading, .section-heading-light, .archive-feed-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 42px; }
.section-heading h2, .section-heading-light h2, .archive-feed-heading h2 { max-width: 850px; margin: 0; font-size: clamp(2.35rem, 3.7vw, 4.4rem); line-height: .98; letter-spacing: -.05em; }
.section-heading > p, .section-heading-light > p, .archive-feed-heading > p { max-width: 460px; margin: 0; color: #8d8d8d; }
.section-heading-light > p, .archive-feed-heading > p { color: #555; }
.treatment-all { display: flex; justify-content: space-between; align-items: center; min-height: 72px; margin-top: 12px; color: var(--green-bright); border-bottom: 1px solid var(--green); }

.spaces-intro { grid-template-columns: 180px minmax(0, 1fr); }
.spaces-intro .section-kicker, .method-section .section-kicker, .home-guide .section-kicker, .blog-preview .section-kicker, .directory-intro .section-kicker, .team-directory .section-kicker, .testimonial-context .section-kicker, .featured-editorial .section-kicker, .category-lead .section-kicker, .studio-manifesto .section-kicker, .studio-source .section-kicker { display: block; border: 0; }
.section-kicker span { display: block; margin-bottom: 8px; color: var(--green-dark); font-size: 1rem; font-weight: 650; }
.section-kicker p { margin: 0; color: #666; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.section-dark .section-kicker span { color: var(--green-bright); }
.spaces-copy h2, .method-copy h2, .home-guide-heading h2, .directory-intro h2, .team-directory-intro h2, .testimonial-context h2, .studio-manifesto h2 { max-width: 980px; margin: 0 0 24px; font-size: clamp(2.25rem, 3.6vw, 4.35rem); line-height: 1; letter-spacing: -.052em; }
.space-editorial-grid { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 16px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.space-editorial-card { min-height: 280px; padding: clamp(28px, 4vw, 54px); background: var(--paper); transition: background .25s ease, color .25s ease; }
.space-editorial-card span { color: var(--green-dark); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.space-editorial-card strong { display: block; margin: 38px 0 14px; font-size: clamp(1.75rem, 2.4vw, 2.8rem); line-height: 1; }
.space-editorial-card p { max-width: 410px; color: #555; }
.space-editorial-card b { display: block; margin-top: 28px; color: var(--green-dark); font-size: .85rem; }
.space-editorial-card.studio span, .space-editorial-card.studio b { color: var(--pink-dark); }
.space-editorial-card:hover { color: var(--white); background: var(--ink); }
.space-editorial-card:hover p { color: #bbb; }
.space-editorial-card:hover span, .space-editorial-card:hover b { color: var(--green-bright); }
.space-editorial-card.studio:hover span, .space-editorial-card.studio:hover b { color: var(--pink); }

.method-section, .home-guide { grid-template-columns: 180px minmax(0, 1fr); }
.method-steps { grid-column: 2; margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); }
.method-steps li { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--line-dark); }
.method-steps > li > span { color: var(--green-dark); font-weight: 650; }
.method-steps h3 { margin: 0 0 8px; font-size: clamp(1.35rem, 1.8vw, 1.85rem); }
.method-steps p { max-width: 680px; margin: 0; color: #555; }
.home-guide-columns { grid-column: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 52px); margin-top: 28px; }
.home-guide-columns h3 { margin: 0 0 15px; font-size: 1.35rem; }
.home-guide-columns p { color: #4d4d4d; }
.guide-actions { grid-column: 2; display: flex; align-items: center; gap: 28px; margin-top: 28px; }
.home-faq { padding: clamp(66px, 8vw, 112px) max(var(--pad), calc((100% - var(--container)) / 2)); background: #e8e5de; }
.home-faq-intro { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(380px, 1.1fr); align-items: end; gap: clamp(38px, 8vw, 128px); margin-bottom: clamp(38px, 5vw, 66px); }
.home-faq-intro h2 { max-width: 690px; margin: 0; font-size: clamp(2.25rem, 3.5vw, 4.15rem); line-height: 1; letter-spacing: -.05em; }
.home-faq-intro > p { max-width: 580px; margin: 0 0 4px; color: #555; font-size: clamp(1rem, 1.2vw, 1.17rem); }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.5vw, 22px); }
.faq-column { display: grid; align-content: start; gap: clamp(12px, 1.25vw, 18px); }
.faq-list details {
  --faq-accent: var(--green-bright);
  position: relative;
  overflow: hidden;
  color: var(--ink);
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(15,15,15,.2);
  transition: color .34s ease, background-color .34s ease, border-color .34s ease, transform .42s cubic-bezier(.2,.7,.2,1), box-shadow .42s ease;
}
.faq-column:nth-child(2) details { --faq-accent: var(--pink); }
/* Barra de acento que se despliega desde la izquierda al pasar y al abrir. */
.faq-list details::before {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  content: "";
  background: var(--faq-accent);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .42s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
/* Halo que sigue al puntero sobre la tarjeta. */
.faq-list details::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background: radial-gradient(circle 220px at var(--faq-x, 50%) var(--faq-y, 50%), color-mix(in srgb, var(--faq-accent) 16%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity .38s ease;
  pointer-events: none;
}
.faq-list details:hover {
  border-color: rgba(15,15,15,.58);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -22px rgba(15,15,15,.55);
}
.faq-list details:hover::before { transform: scaleY(1); transform-origin: 50% 0; }
.faq-list details:hover::after { opacity: 1; }
.faq-list summary > * { position: relative; z-index: 2; }
.faq-list details[open] { color: var(--paper); background: var(--ink); border-color: var(--ink); transform: none; box-shadow: 0 24px 52px -30px rgba(15,15,15,.75); }
.faq-list details[open]::before { transform: scaleY(1); transform-origin: 50% 0; }
.faq-list details[open]::after { opacity: .55; }
.faq-list summary { display: grid; grid-template-columns: 38px minmax(0, 1fr) 34px; align-items: center; gap: 14px; min-height: 94px; padding: 18px 20px; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:focus-visible { outline: 3px solid var(--green-bright); outline-offset: -4px; }
.faq-list summary strong { font-size: clamp(1rem, 1.22vw, 1.2rem); line-height: 1.18; font-weight: 650; }
.faq-number { align-self: start; padding-top: 3px; color: var(--green-dark); font-size: .72rem; font-weight: 700; letter-spacing: .1em; transition: color .3s ease, transform .3s ease; }
.faq-icon { position: relative; width: 32px; height: 32px; border: 1px solid currentColor; border-radius: 50%; transition: color .3s ease, background-color .3s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }
.faq-icon i { position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform .3s ease; }
.faq-icon i:last-child { transform: translate(-50%, -50%) rotate(90deg); }
.faq-list details[open] .faq-number { color: var(--faq-accent); transform: translateY(3px) scale(1.08); }
.faq-list details[open] .faq-icon { color: var(--ink); background: var(--faq-accent); transform: rotate(180deg) scale(1.12); }
.faq-list details[open] .faq-icon i:last-child { transform: translate(-50%, -50%) rotate(180deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .46s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.faq-answer > div { min-height: 0; overflow: hidden; }
.faq-answer p { max-width: 650px; margin: 0; padding: 0 66px 26px 72px; color: #c8c8c8; font-size: .96rem; line-height: 1.62; }
.faq-list details[open] .faq-answer { grid-template-rows: 1fr; opacity: 1; }
.faq-answer p { filter: blur(4px); transform: translate3d(0, 12px, 0); transition: filter .42s ease .08s, transform .42s cubic-bezier(.2,.7,.2,1) .08s; }
.faq-list details[open] .faq-answer p { filter: blur(0); transform: none; }
/* Cierre suave: site.js mantiene `open` mientras dura la transicion. */
.faq-list details[data-faq-closing] .faq-answer { grid-template-rows: 0fr; opacity: 0; }
.faq-list details[data-faq-closing] .faq-answer p { filter: blur(4px); transform: translate3d(0, 12px, 0); transition-delay: 0s; }

/* Entrada escalonada. --faq-order lo emite el generador en cada <details>. */
@media (prefers-reduced-motion: no-preference) {
  .faq-list[data-faq-reveal] details {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  .faq-list[data-faq-reveal="in"] details {
    animation: faq-card-in .62s cubic-bezier(.22,.61,.36,1) both;
    animation-delay: calc(var(--faq-order, 0) * 55ms);
  }
}
@keyframes faq-card-in {
  from { opacity: 0; transform: translate3d(0, 30px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-list details,
  .faq-list details::before,
  .faq-list .faq-icon,
  .faq-answer,
  .faq-answer p { transition: none !important; animation: none !important; }
  .faq-answer p { filter: none !important; transform: none !important; }
}

.team-showcase { padding: 76px var(--pad) 90px; }
.team-showcase > * { width: min(100%, var(--container)); margin-left: auto; margin-right: auto; }
.home-team-grid, .team-grid, .related-team { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.team-card { position: relative; min-width: 0; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.team-card-image { display: block; aspect-ratio: .73; overflow: hidden; background: #171717; }
.team-card-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(.75); transition: transform .45s ease, filter .3s ease; }
.team-card:hover img { transform: scale(1.025); filter: saturate(1); }
.team-card p { margin: 16px 0 7px; color: #b8b8b8; font-size: .67rem; letter-spacing: .05em; text-transform: uppercase; }
.team-card h3 { margin: 0; padding-right: 24px; font-size: clamp(1.02rem, 1.3vw, 1.32rem); line-height: 1.12; }
.team-card h3 a::after { content: ""; position: absolute; inset: 0; }
.team-card > span { position: absolute; right: 2px; bottom: 20px; color: var(--green-dark); }
.section-dark .team-card > span { color: var(--green-bright); }
.team-all { margin-top: 36px; }
.team-grid { grid-column: 2; grid-template-columns: repeat(3, 1fr); gap: 48px 24px; margin-top: 16px; }
.team-grid .team-card { color: var(--ink); border-color: var(--line-dark); }
.team-grid .team-card p { color: #666; }
.team-grid .team-card > div { margin-top: 13px; color: #555; font-size: .92rem; }

.section-actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.cases-preview { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 8vw, 120px); padding: 80px max(var(--pad), calc((100% - var(--container)) / 2)); background: #e8e5de; }
.cases-intro h2 { margin: 0 0 20px; font-size: clamp(2.25rem, 3.6vw, 4.2rem); line-height: 1; letter-spacing: -.05em; }
.cases-intro > p:not(.label) { max-width: 500px; color: #555; }
.cases-intro > a { display: inline-block; margin-top: 22px; color: var(--green-dark); }
.cases-list article { padding: 26px 0; border-top: 1px solid var(--line-dark); }
.cases-list blockquote { margin: 0 0 16px; font-size: clamp(1.2rem, 1.8vw, 1.75rem); line-height: 1.38; }
.cases-list .case-record-title { margin: 0 0 16px; font-size: clamp(1.2rem, 1.8vw, 1.75rem); font-weight: 720; line-height: 1.28; text-wrap: balance; }
.cases-list a { color: var(--green-dark); font-size: .85rem; }

.archive-hero, .article-hero, .profile-hero { display: grid; grid-template-columns: minmax(420px, .9fr) minmax(520px, 1.1fr); height: 620px; min-height: 0; }
.archive-hero.has-section-wordmark { position: relative; isolation: isolate; overflow: hidden; }
.archive-hero.has-section-wordmark > .archive-hero-copy,
.archive-hero.has-section-wordmark > figure { position: relative; z-index: 1; }
.treatments-wordmark { z-index: 0; left: -2.5vw; bottom: -.08em; color: rgba(255,255,255,.027); font-size: clamp(9rem, 13.8vw, 18rem); }
.archive-hero-copy, .article-hero-copy, .profile-hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 52px var(--pad) 70px max(var(--pad), calc((100vw - var(--container)) / 2)); }
.archive-hero h1, .article-hero h1, .profile-hero h1, .category-hero h1, .search-hero h1 { max-width: 820px; margin: 0; font-size: clamp(2.45rem, 3.5vw, 4.6rem); line-height: .98; letter-spacing: -.045em; }
.archive-hero-copy > p:not(.eyebrow), .article-hero-copy > .inner-summary, .profile-hero-copy > p:not(.eyebrow):not(.profile-role) { max-width: 660px; margin: 0 0 28px; color: #ccc; font-size: clamp(1.02rem, 1.25vw, 1.22rem); }
.archive-hero > figure, .article-hero-media, .profile-hero > figure { height: 620px; min-height: 0; margin: 0; overflow: hidden; }
.archive-hero > figure img, .article-hero-media img, .profile-hero > figure img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.76) contrast(1.03); }
.profile-hero > figure { display: flex; align-items: flex-end; justify-content: center; padding: 34px clamp(28px, 6vw, 88px) 0; background: radial-gradient(circle at 50% 34%, #272727, #111 70%); }
.profile-hero > figure img { width: min(100%, 390px); height: auto; max-height: 100%; object-fit: contain; object-position: center bottom; box-shadow: 0 0 70px rgba(0,0,0,.24); }
.site-search-form { display: flex; width: min(100%, 580px); margin-top: 10px; border-bottom: 1px solid #777; }
.site-search-form input { flex: 1; min-width: 0; height: 54px; color: var(--white); background: transparent; border: 0; outline: 0; }
.site-search-form button { min-width: 52px; color: var(--green); background: transparent; border: 0; cursor: pointer; }
.site-search-form input::placeholder { color: #999; }

.topic-nav { position: sticky; z-index: 15; top: 76px; display: flex; gap: 0; overflow-x: auto; padding: 0 max(var(--pad), calc((100% - var(--container)) / 2)); background: var(--paper); border-bottom: 1px solid var(--line-dark); scrollbar-width: thin; }
.topic-nav a { flex: 0 0 auto; display: flex; gap: 8px; padding: 18px 22px; color: #555; border-bottom: 2px solid transparent; font-size: .82rem; }

.topic-nav a:hover, .topic-nav a.is-active { color: var(--ink); border-color: var(--pink); }
.featured-editorial, .category-lead { grid-template-columns: 180px 1fr; }
.featured-editorial > h2 { grid-column: 2; margin: 0; font-size: clamp(2.2rem, 3.3vw, 3.8rem); }
.featured-layout { grid-column: 2; display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 34px 24px; }
.featured-layout .article-card:first-child { grid-row: span 2; }
.featured-layout .article-card:first-child .article-image { aspect-ratio: 4/3; }
.featured-layout .article-card:nth-child(n+4) { grid-column: span 1; }
.card-excerpt { margin-top: 14px; padding-right: 36px; color: #555; font-size: .92rem; }
.archive-feed, .testimonial-archive { width: min(100% - (var(--pad) * 2), var(--container)); margin: auto; padding: 72px 0 96px; }
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 26px; }
.load-more { margin: 48px auto 0; cursor: pointer; }
.knowledge-callout, .techniques-callout, .studio-contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 120px); padding: 70px max(var(--pad), calc((100% - var(--container)) / 2)); }
.knowledge-callout h2, .techniques-callout h2, .studio-contact h2 { max-width: 680px; margin: 0; font-size: clamp(2.2rem, 3.6vw, 4.2rem); line-height: 1; letter-spacing: -.05em; }
.knowledge-callout > div:last-child, .techniques-callout > div:last-child, .studio-contact > div:last-child { align-self: end; }
.knowledge-callout > div:last-child p, .techniques-callout > div:last-child p { color: #aaa; }

.category-hero { display: grid; grid-template-columns: 1fr 280px; gap: 80px; align-items: end; min-height: 480px; padding: 70px max(var(--pad), calc((100% - var(--container)) / 2)); }
.category-hero > div:first-child > p:last-child { max-width: 720px; color: #bbb; font-size: 1.15rem; }
.category-stat { padding: 32px 0 8px; border-top: 1px solid var(--line); }
.category-stat strong, .category-stat span { display: block; }
.category-stat strong { color: var(--green); font-size: 4rem; line-height: 1; }
.category-stat span { margin-top: 8px; color: #aaa; }
.category-lead .article-card { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.category-lead .article-card .article-image { grid-row: span 4; margin: 0; aspect-ratio: 4/3; }

.testimonial-context { grid-template-columns: 180px 1fr; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.testimonial-card { position: relative; min-height: 340px; padding: 34px; background: var(--paper); }
.testimonial-card > p { margin: 0 0 32px; color: var(--green-dark); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; }
.testimonial-card h3 { margin: 0 0 18px; font-size: clamp(1.3rem, 1.7vw, 1.75rem); line-height: 1.14; }
.testimonial-card h3 a::after { content: ""; position: absolute; inset: 0; }
.testimonial-card > div { color: #555; font-size: .93rem; }
.testimonial-card > a { position: absolute; z-index: 1; left: 34px; bottom: 28px; color: var(--green-dark); font-size: .82rem; }

.article-layout { display: grid; grid-template-columns: 210px minmax(0, 780px) 230px; justify-content: center; align-items: start; gap: clamp(30px, 4vw, 72px); width: min(100% - (var(--pad) * 2), var(--container)); margin: auto; padding: 72px 0 100px; }
.article-toc { position: sticky; top: 110px; padding-right: 24px; border-right: 1px solid var(--line-dark); }
.article-toc p { margin: 0 0 16px; font-weight: 650; }
.article-toc a { display: block; padding: 7px 0; color: #656565; font-size: .8rem; line-height: 1.35; }
.article-toc .toc-level-3 { padding-left: 13px; color: #666; }
.article-toc a:hover { color: var(--green-dark); }
.article-meta { flex-wrap: wrap; row-gap: 7px; }
.related-content, .related-section { padding: 70px max(var(--pad), calc((100% - var(--container)) / 2)) 90px; }
.related-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 34px; }
.related-heading h2, .related-section > div:first-child h2 { margin: 0; font-size: clamp(2.1rem, 3vw, 3.5rem); letter-spacing: -.045em; }
.service-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.service-directory { display: grid; grid-template-columns: repeat(3, 1fr); width: min(100% - (var(--pad) * 2), var(--container)); margin: 0 auto; padding: 0 0 94px; gap: 54px 24px; }
.service-card { position: relative; min-width: 0; border-bottom: 1px solid var(--line-dark); }
.service-card-image { display: block; aspect-ratio: 4/3; overflow: hidden; background: #ddd; }
.service-card-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72); transition: transform .45s ease, filter .3s ease; }
.service-card:hover img { transform: scale(1.025); filter: saturate(1); }
.service-card-clinic .service-card-image { position: relative; isolation: isolate; background: #e7e1d9; }
.service-card-clinic .service-card-photo { position: relative; z-index: 1; }
.service-card-clinic .service-card-wall-logo {
  position: absolute;
  z-index: 2;
  top: 12%;
  left: 21%;
  width: clamp(76px, 22%, 118px);
  height: auto;
  object-fit: contain;
  opacity: .82;
  mix-blend-mode: multiply;
  filter: saturate(.88) contrast(.94) drop-shadow(0 1px 0 rgba(255,255,255,.5));
  pointer-events: none;
  transform: none;
  transform-origin: center;
}
.service-card-clinic:hover .service-card-wall-logo { transform: scale(1.025); filter: saturate(.94) contrast(.96) drop-shadow(0 1px 0 rgba(255,255,255,.5)); }

/* Portada: tres módulos editoriales con jerarquía propia y una retícula común. */


.home-page .home-team-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: #383838; border: 1px solid #383838; }
.home-page .home-team-grid .team-card { grid-column: span 3; display: flex; min-height: 390px; flex-direction: column; padding: 0; overflow: hidden; background: #101010; border: 0; }
.home-page .home-team-grid .team-card:nth-child(-n+2) { grid-column: span 6; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(180px, .92fr); grid-template-rows: auto 1fr; min-height: 390px; }
.home-page .home-team-grid .team-card:nth-child(2) { grid-template-columns: minmax(180px, .92fr) minmax(0, 1.08fr); }
.home-page .home-team-grid .team-card:nth-child(-n+2) .team-card-image { grid-row: 1 / 3; min-height: 390px; aspect-ratio: auto; }
.home-page .home-team-grid .team-card:nth-child(2) .team-card-image { grid-column: 2; }
.home-page .home-team-grid .team-card-image { aspect-ratio: 4 / 5; }
.home-page .home-team-grid .team-card p { align-self: end; margin: 0; padding: 28px 28px 10px; color: #9f9f9f; font-size: .7rem; line-height: 1.4; }
.home-page .home-team-grid .team-card h3 { margin: 0; padding: 0 42px 32px 28px; font-size: clamp(1.1rem, 1.45vw, 1.5rem); }
.home-page .home-team-grid .team-card:nth-child(-n+2) h3 { font-size: clamp(1.55rem, 2.2vw, 2.35rem); }

.home-page .home-team-grid .team-card:nth-child(2) > span { color: var(--pink); }
.home-page .team-showcase-action { display: flex; justify-content: flex-start; margin-top: 34px; }
.home-page .team-showcase-action .team-all { width: auto; margin: 0; }

.home-page .blog-preview { width: min(100% - (var(--pad) * 2), var(--container)); margin: auto; padding: clamp(78px, 8vw, 122px) 0 clamp(88px, 9vw, 136px); }
.home-page .home-module-heading { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: clamp(32px, 5vw, 82px); margin-bottom: clamp(42px, 5vw, 70px); }
.home-page .home-module-heading .section-heading-light { margin: 0; }
.home-page .blog-preview .article-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 268px; gap: 22px; }
.home-page .blog-preview .article-card { min-width: 0; overflow: hidden; padding: 0; background: #e6e2da; border: 0; }
.home-page .blog-preview .article-card:first-child { grid-column: span 7; grid-row: span 2; }
.home-page .blog-preview .article-card:nth-child(n+2) { grid-column: span 5; display: grid; grid-template-columns: minmax(160px, .92fr) minmax(0, 1.08fr); grid-template-rows: auto 1fr; }
.home-page .blog-preview .article-card:first-child .article-image { position: absolute; inset: 0; height: 100%; margin: 0; aspect-ratio: auto; }
.home-page .blog-preview .article-card:first-child::after { content: ""; position: absolute; inset: 34% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.9)); pointer-events: none; }
.home-page .blog-preview .article-card:first-child > p,
.home-page .blog-preview .article-card:first-child > h3,
.home-page .blog-preview .article-card:first-child > .card-excerpt { position: relative; z-index: 1; align-self: end; color: var(--white); }
.home-page .blog-preview .article-card:first-child > p { margin: auto 34px 12px; color: var(--pink); padding-top: 285px; }
.home-page .blog-preview .article-card:first-child > h3 { max-width: 690px; margin: 0 34px; padding: 0 48px 0 0; font-size: clamp(1.75rem, 2.65vw, 3rem); line-height: 1.02; }
.home-page .blog-preview .article-card:first-child > .card-excerpt { max-width: 700px; margin: 14px 34px 34px; color: #d3d3d3; font-size: .96rem; line-height: 1.55; }
.home-page .blog-preview .article-card:first-child .card-arrow { z-index: 2; right: 30px; bottom: 30px; }
.home-page .blog-preview .article-card:nth-child(n+2) .article-image { grid-row: 1 / 3; height: 100%; margin: 0; aspect-ratio: auto; }
.home-page .blog-preview .article-card:nth-child(n+2) > p { align-self: end; margin: 0; padding: 24px 26px 8px; }
.home-page .blog-preview .article-card:nth-child(n+2) > h3 { margin: 0; padding: 0 42px 28px 26px; font-size: clamp(1.1rem, 1.55vw, 1.55rem); }
.home-page .blog-preview .article-card:nth-child(n+2) .card-arrow { right: 22px; bottom: 22px; }
.home-page .blog-preview .section-actions { justify-content: flex-end; margin-top: 38px; }

.home-page .cases-preview { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr); align-items: start; gap: clamp(50px, 7vw, 110px); padding: clamp(78px, 8vw, 122px) max(var(--pad), calc((100% - var(--container)) / 2)) clamp(92px, 9vw, 140px); background: #dedad1; }
.home-page .cases-intro { position: sticky; top: 130px; }
.home-page .cases-intro h2 { max-width: 560px; font-size: clamp(2.1rem, 3.15vw, 3.55rem); }
.home-page .cases-list { display: grid; gap: 26px; }
.home-page .home-case-card { position: relative; display: grid; grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr); min-height: 340px; overflow: hidden; background: #f1eee8; }
.home-page .home-case-card:nth-child(2) { grid-template-columns: minmax(0, 1.22fr) minmax(220px, .78fr); }
.home-page .home-case-card:nth-child(2) .home-case-media { grid-column: 2; }
.home-page .home-case-media { grid-row: 1; min-height: 340px; overflow: hidden; }
.home-page .home-case-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72); transition: transform .45s ease, filter .3s ease; }
.home-page .home-case-card:hover .home-case-media img { transform: scale(1.025); filter: saturate(.95); }
.home-page .home-case-copy { position: relative; grid-row: 1; display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(28px, 3.2vw, 48px); }
.home-page .home-case-card:nth-child(2) .home-case-copy { grid-column: 1; }
.home-page .home-case-copy > p { margin: 0 0 14px; color: var(--green-dark); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.home-page .home-case-copy h3 { margin: 0 0 18px; font-size: clamp(1.25rem, 1.8vw, 1.85rem); line-height: 1.12; text-wrap: balance; }
.home-page .home-case-copy h3 a::after { content: ""; position: absolute; inset: 0; }
.home-page .home-case-copy blockquote { margin: 0 0 24px; color: #505050; font-family: Georgia, serif; font-size: clamp(1rem, 1.25vw, 1.22rem); font-style: italic; line-height: 1.48; }
.home-page .home-case-link { position: relative; z-index: 1; width: fit-content; margin-top: auto; color: var(--green-dark); font-size: .84rem; }

@media (max-width: 1080px) {
  .home-page .home-team-grid .team-card:nth-child(-n+2) { grid-column: span 6; grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .home-page .home-team-grid .team-card:nth-child(-n+2) .team-card-image,
  .home-page .home-team-grid .team-card:nth-child(2) .team-card-image { grid-column: 1; grid-row: 1; min-height: 330px; aspect-ratio: 4 / 3; }
  .home-page .home-team-grid .team-card { grid-column: span 6; }
  .home-page .blog-preview .article-grid { grid-auto-rows: 250px; }
  .home-page .cases-preview { grid-template-columns: 1fr; }
  .home-page .cases-intro { position: static; }
}

@media (max-width: 760px) {
  .home-page .team-showcase .section-heading,
  .home-page .home-module-heading,
  .home-page .home-module-heading .section-heading-light { display: grid; grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .home-page .home-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; }
  .home-page .home-team-grid .team-card,
  .home-page .home-team-grid .team-card:nth-child(-n+2) { grid-column: span 1; display: flex; min-height: 0; }
  .home-page .home-team-grid .team-card:nth-child(-n+2) .team-card-image,
  .home-page .home-team-grid .team-card:nth-child(2) .team-card-image,
  .home-page .home-team-grid .team-card-image { min-height: 0; aspect-ratio: 4 / 5; }
  .home-page .home-team-grid .team-card p { padding: 18px 16px 7px; font-size: .61rem; }
  .home-page .home-team-grid .team-card h3,
  .home-page .home-team-grid .team-card:nth-child(-n+2) h3 { padding: 0 30px 22px 16px; font-size: 1rem; }
  .home-page .home-team-grid .team-card > span { right: 14px; bottom: 20px; }
  .home-page .home-module-heading { margin-bottom: 34px; }
  .home-page .blog-preview .article-grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; gap: 18px; }
  .home-page .blog-preview .article-card:first-child,
  .home-page .blog-preview .article-card:nth-child(n+2) { grid-column: 1; grid-row: auto; display: block; min-height: 0; }
  .home-page .blog-preview .article-card:first-child .article-image,
  .home-page .blog-preview .article-card:nth-child(n+2) .article-image { position: relative; height: auto; aspect-ratio: 16 / 10; }
  .home-page .blog-preview .article-card:first-child::after { display: none; }
  .home-page .blog-preview .article-card:first-child > p,
  .home-page .blog-preview .article-card:nth-child(n+2) > p { margin: 0; padding: 22px 22px 8px; color: var(--pink-dark); }
  .home-page .blog-preview .article-card:first-child > h3,
  .home-page .blog-preview .article-card:nth-child(n+2) > h3 { margin: 0; padding: 0 42px 24px 22px; color: var(--ink); font-size: 1.35rem; }
  .home-page .blog-preview .article-card:first-child > .card-excerpt { display: none; }
  .home-page .blog-preview .card-arrow { right: 20px; bottom: 20px; }
  .home-page .blog-preview .section-actions { justify-content: flex-start; flex-wrap: wrap; }
  .home-page .home-case-card,
  .home-page .home-case-card:nth-child(2) { display: flex; min-height: 0; flex-direction: column; }
  .home-page .home-case-card:nth-child(2) .home-case-media { order: 0; }
  .home-page .home-case-media { min-height: 0; aspect-ratio: 16 / 10; }
  .home-page .home-case-copy { padding: 26px 22px 30px; }
}
.service-card > div { position: relative; min-height: 175px; padding: 22px 44px 24px 0; }
.service-card p { margin: 0 0 8px; color: var(--green-dark); font-size: .72rem; }
.service-card h3 { margin: 0 0 10px; font-size: clamp(1.35rem, 1.8vw, 1.8rem); line-height: 1.08; }
.service-card h3 a::after { content: ""; position: absolute; inset: 0; }
.service-card > div > span { display: block; color: #555; font-size: .9rem; }
.service-card b { position: absolute; right: 2px; top: 20px; color: var(--green-dark); font-size: 1.5rem; }
.studio-directory { padding: 76px max(var(--pad), calc((100% - var(--container)) / 2)) 90px; }
.studio-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 24px; margin-bottom: 38px; }
.studio-cards .service-card { border-color: var(--line); }
.studio-cards .service-card > div > span { color: #aaa; }
.studio-cards .service-card p, .studio-cards .service-card b { color: var(--pink-dark); }
.studio-manifesto { grid-template-columns: 180px 1fr; }
/* 2026-09-02 — El manifiesto ya no lleva una figura única de 16/7 sino el
   collage de cuatro imágenes; sus reglas viven en el bloque fechado del final. */
.studio-manifesto > .studio-collage { grid-column: 2; }

.studio-contact { color: var(--ink); background: #e7e2df; }
.studio-contact > div:last-child { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.studio-contact .button { color: #9f0b5b; }

.team-directory { grid-template-columns: 180px 1fr; }
.team-values {
  display: block;
  padding: clamp(92px, 7vw, 120px) max(var(--pad), calc((100% - var(--container)) / 2)) clamp(96px, 8vw, 136px);
  background:
    radial-gradient(circle at 18% 16%, rgba(151,202,27,.055), transparent 29%),
    radial-gradient(circle at 92% 3%, rgba(236,25,134,.035), transparent 24%),
    #080908;
}
.team-values-intro {
  width: min(100%, 920px);
  margin: 0 auto clamp(58px, 5.5vw, 82px);
  text-align: center;
}
.team-values-intro h2 {
  max-width: 900px;
  margin: 0 auto;
  color: var(--green-bright);
  font-size: clamp(2.75rem, 5vw, 5.6rem);
  line-height: .94;
  letter-spacing: -.055em;
  text-wrap: balance;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .team-values-intro h2 {
    color: transparent;
    background: linear-gradient(90deg, var(--green-bright) 0 72%, #b7c83a 78%, var(--pink) 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
.team-values-intro p {
  width: min(100%, 780px);
  margin: clamp(24px, 2.4vw, 34px) auto 0;
  color: #c2c4be;
  font-size: clamp(1.04rem, .4vw + .96rem, 1.18rem);
  line-height: 1.72;
}
.team-values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,.2);
}
.team-values-grid article {
  position: relative;
  min-width: 0;
  padding: clamp(34px, 3.5vw, 58px) clamp(26px, 3.5vw, 54px) 0;
  border-left: 1px solid rgba(255,255,255,.14);
}
.team-values-grid article:first-child { padding-left: 0; border-left: 0; }
.team-values-grid article:last-child { padding-right: 0; }
.team-values-grid article::before {
  position: absolute;
  left: clamp(26px, 3.5vw, 54px);
  top: -2px;
  width: clamp(46px, 4.5vw, 76px);
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--green-bright), rgba(151,202,27,.15));
}
.team-values-grid article:first-child::before { left: 0; }
.team-values-grid article:nth-child(3)::before { background: linear-gradient(90deg, var(--green-bright), rgba(236,25,134,.62)); }
.team-values-grid span {
  display: block;
  margin-bottom: clamp(22px, 2.4vw, 34px);
  color: var(--green-bright);
  font-size: clamp(2.5rem, 3.7vw, 4rem);
  font-weight: 760;
  line-height: .86;
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
}
.team-values-grid h3 { margin: 0 0 16px; color: var(--paper); font-size: clamp(1.55rem, 1.9vw, 2.2rem); line-height: 1.02; letter-spacing: -.035em; }
.team-values-grid p { max-width: 37ch; margin: 0; color: #b9bbb5; font-size: clamp(1.02rem, .26vw + .98rem, 1.12rem); line-height: 1.72; }
.profile-role { color: var(--green) !important; font-size: 1rem !important; letter-spacing: .04em; text-transform: uppercase; }
.profile-body { grid-template-columns: 250px minmax(0, 800px); justify-content: center; }
.profile-facts { padding-right: 24px; border-right: 1px solid var(--line-dark); }
.profile-facts p, .profile-facts strong, .profile-facts a { display: block; }
.profile-facts p { margin: 0 0 7px; color: #666; font-size: .75rem; text-transform: uppercase; }
.profile-facts strong { margin-bottom: 32px; }
.profile-facts a { color: #577b00; font-size: .85rem; }
.related-section > div:first-child { margin-bottom: 34px; }
.related-team { grid-template-columns: repeat(3, 1fr); max-width: 900px; }

.search-hero { min-height: 500px; padding: 70px max(var(--pad), calc((100% - 1100px) / 2)); }
.search-hero > div { max-width: 960px; }
.search-hero > div > p:not(.eyebrow) { max-width: 680px; color: #bbb; font-size: 1.18rem; }
.search-form-large { width: 100%; max-width: 820px; margin-top: 36px; }
.search-form-large input { height: 68px; font-size: 1.1rem; }
.search-results-shell { width: min(100% - (var(--pad) * 2), 1100px); min-height: 540px; margin: auto; padding: 58px 0 100px; }
.search-summary { padding-bottom: 28px; border-bottom: 1px solid var(--line-dark); }
.search-summary > p { margin: 0 0 18px; font-size: 1.25rem; }
.search-suggestions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: #666; font-size: .85rem; }
.search-suggestions a { padding: 7px 12px; border: 1px solid var(--line-dark); border-radius: 999px; }
.search-result { display: grid; grid-template-columns: 150px 1fr auto; gap: 28px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line-dark); }
.search-result-image { aspect-ratio: 4/3; overflow: hidden; background: #ddd; }
.search-result-image img { width: 100%; height: 100%; object-fit: cover; }
.search-result p { margin: 0 0 6px; color: #666; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.search-result h2 { margin: 0 0 7px; font-size: 1.45rem; line-height: 1.1; }
.search-result div > span { color: #555; font-size: .9rem; }
.search-result > span { color: var(--green-dark); font-size: 1.5rem; }
.search-empty { padding: 60px 0; }
.search-empty h2 { font-size: 2rem; }


.appointment-copy h2 { font-size: clamp(2.15rem, 3.2vw, 3.65rem); }
.space-card { flex-wrap: wrap; }
.space-card img { height: 52px; }
.space-card > span { flex: 1 0 100%; color: #aaa; font-size: .82rem; }
.space-card > b { color: var(--green); font-size: 1.8rem; }
.studio-card > b { color: var(--pink); }
.footer-legal { grid-column: 2 / -1; display: flex !important; gap: 24px; }
.footer-legal a { display: inline-block !important; }

.legacy-content [class*="elementor-"] { max-width: 100%; }
.legacy-content .elementor-section, .legacy-content .elementor-container, .legacy-content .elementor-column, .legacy-content .elementor-widget-wrap { display: block; width: 100%; min-height: 0; margin: 0; padding: 0; background: transparent; }
.legacy-content .elementor-button { display: inline-flex; width: auto; min-height: 44px; align-items: center; margin: 12px 0 24px; padding: 10px 18px; color: #476600; border: 1px solid #668f00; border-radius: 999px; text-decoration: none; }
.legacy-content video { max-width: 100%; height: auto; }
.legacy-content img { image-rendering: auto; }
.legacy-anchor { display: block; position: relative; top: -100px; visibility: hidden; }
.legal-shell { grid-template-columns: 220px minmax(0, 850px); }
.legal-shell .page-toc { grid-column: 1; }
.not-found h1 { font-size: clamp(2.8rem, 5.5vw, 5.6rem); }

@media (max-width: 1180px) {
  .main-nav > ul { gap: 9px; }
  .main-nav li > a, .nav-parent > a { font-size: .76rem; }
  .brand-clinic img { height: 44px; }
  .brand-studio img { width: 104px; height: 38px; }
  .article-layout, .content-shell { grid-template-columns: 180px minmax(0, 1fr); }
  .article-layout .author-card, .content-shell .call-card { position: static; grid-column: 2; max-width: 520px; }
  .home-team-grid { grid-template-columns: repeat(3, 1fr); gap: 36px 18px; }
}

@media (max-width: 1050px) {
  .site-header { height: 76px; }
  .main-nav { inset: 76px 0 auto; max-height: calc(100svh - 76px); overflow-y: auto; }
  .main-nav > ul { display: block; }
  .main-nav li { border-bottom: 1px solid var(--line); }
  .main-nav li > a, .nav-parent > a { width: 100%; min-height: 54px; font-size: .95rem; }
  .nav-parent > a { flex: 1; }
  .submenu-toggle { width: 54px; height: 54px; }
  .submenu { position: static; display: none; width: 100%; padding: 0 0 14px 18px; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .has-submenu.is-open .submenu { display: grid; }
  .has-submenu:hover .submenu:not([data-force-open]), .has-submenu:focus-within .submenu:not([data-force-open]) { display: none; }
  .has-submenu.is-open:hover .submenu, .has-submenu.is-open:focus-within .submenu { display: grid; }
  .main-nav .nav-cta { width: auto; margin: 16px 0; }
  .hero, .hero-slides, .hero-slide { height: min(760px, calc(100svh - 76px)); min-height: 660px; }
  .hero h1, .hero h2 { font-size: clamp(2.85rem, 6.2vw, 4.7rem); }
  .archive-hero, .article-hero, .profile-hero { grid-template-columns: .95fr 1.05fr; }
  .archive-hero h1, .article-hero h1, .profile-hero h1, .category-hero h1, .search-hero h1 { font-size: clamp(2.35rem, 4.7vw, 4.15rem); }
  .service-directory, .studio-cards { grid-template-columns: repeat(2, 1fr); }
  .featured-layout { grid-template-columns: 1fr 1fr; }
  .featured-layout .article-card:first-child { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; }
  .featured-layout .article-card:first-child .article-image { grid-row: span 4; margin: 0; }
  .archive-grid, .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  
  .hero-copy { min-height: calc(100svh - 76px); padding: 34px var(--pad) 166px; }
  .hero h1, .hero h2 { max-width: 500px; font-size: clamp(2.3rem, 9.6vw, 3.45rem); line-height: 1; }
  .hero-copy > p:not(.eyebrow) { font-size: 1.02rem; }
  .hero-controls { bottom: 66px; grid-template-columns: 44px minmax(0, 1fr) 44px 44px; min-height: 88px; padding: 11px 8px; }
  .hero-tabs button { justify-content: center; padding: 12px 3px; }
  .hero-tabs span { display: none; }
  .hero-controls > button { width: 44px; min-height: 44px; }
  .hero-pause { display: block; }
  .section-heading, .section-heading-light, .archive-feed-heading { display: block; }
  .section-heading > p, .section-heading-light > p, .archive-feed-heading > p { margin-top: 18px; }
  .spaces-intro, .method-section, .home-guide, .team-directory, .testimonial-context, .featured-editorial, .category-lead, .studio-manifesto, .studio-source { grid-template-columns: 1fr; }
  .spaces-copy, .space-editorial-grid, .method-copy, .method-steps, .home-guide-heading, .home-guide-columns, .guide-actions, .team-directory-intro, .team-grid, .featured-editorial > h2, .featured-layout, .category-lead .article-card, .studio-manifesto > div, .studio-manifesto > .studio-collage, .studio-source .legacy-content { grid-column: 1; }
  .space-editorial-grid, .home-guide-columns { grid-template-columns: 1fr; }
  .space-editorial-card { min-height: 230px; }
  .home-guide-columns { gap: 18px; }
  .guide-actions, .section-actions { align-items: flex-start; flex-direction: column; }
  .home-team-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-card h3 { font-size: 1.05rem; }
  .cases-preview { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 56px; }
  .home-faq { padding-top: 56px; padding-bottom: 56px; }
  .home-faq-intro, .faq-list { grid-template-columns: 1fr; }
  .home-faq-intro { gap: 20px; margin-bottom: 36px; }
  .faq-list { gap: 12px; }
  .faq-column { gap: 12px; }
  .faq-list summary { min-height: 82px; padding: 16px; grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 10px; }
  .faq-answer p { padding: 0 52px 22px 58px; }
  .archive-hero, .article-hero, .profile-hero { display: flex; flex-direction: column; height: auto; min-height: auto; }
  .treatments-wordmark { left: -4vw; bottom: 45%; font-size: clamp(6rem, 24vw, 8.5rem); }
  .inner-hero { height: auto; }
  .archive-hero-copy, .article-hero-copy, .profile-hero-copy { min-height: 460px; padding: 38px var(--pad) 54px; }
  .archive-hero h1, .article-hero h1, .profile-hero h1, .category-hero h1, .search-hero h1, .inner-hero h1 { font-size: clamp(2.3rem, 9.6vw, 3.45rem); }
  .archive-hero > figure, .article-hero-media, .profile-hero > figure { height: 340px; min-height: 340px; }
  .inner-hero-media { height: 360px; min-height: 360px; }
  
  .featured-layout, .featured-layout .article-card:first-child, .category-lead .article-card { display: block; }
  .featured-layout .article-card { margin-bottom: 34px; }
  .archive-grid, .testimonial-grid, .service-directory, .studio-cards, .service-related-grid { grid-template-columns: 1fr; }
  .testimonial-card { min-height: 300px; }
  .knowledge-callout, .techniques-callout, .studio-contact { grid-template-columns: 1fr; padding-top: 54px; padding-bottom: 54px; }
  .contact-directory { grid-template-columns: 1fr; }
  .contact-intro, .contact-options { grid-column: 1; }
  .contact-options { grid-template-columns: 1fr; }
  .contact-options article { min-height: 260px; }
  .contact-hub { grid-template-columns: 1fr; gap: 42px; padding-top: 56px; padding-bottom: 56px; }
  .contact-form .form-row { grid-template-columns: 1fr; }
  .contact-map { grid-template-columns: 1fr; gap: 30px; padding-top: 56px; padding-bottom: 56px; }
  .contact-map-frame { min-height: 380px; }
  .contact-guidance { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 56px; }
  .category-hero { grid-template-columns: 1fr; gap: 30px; min-height: 460px; padding-top: 48px; padding-bottom: 48px; }
  .category-stat { max-width: 180px; }
  .article-layout { display: block; width: calc(100% - 40px); padding: 48px 0 70px; }
  .article-toc { position: static; margin-bottom: 38px; padding: 20px; border: 1px solid var(--line-dark); }
  .article-toc a:nth-of-type(n+8) { display: none; }
  .related-heading { display: block; }
  .service-directory { padding-bottom: 60px; }
  .team-values { padding-top: 84px; padding-bottom: 94px; }
  .team-values-intro { margin-bottom: 48px; text-align: left; }
  .team-values-intro h2 { margin-left: 0; font-size: clamp(2.55rem, 11vw, 3.6rem); }
  .team-values-intro p { margin-top: 24px; font-size: 1.03rem; line-height: 1.7; }
  .team-values-grid { grid-template-columns: 1fr; border-top: 0; }
  .team-values-grid article,
  .team-values-grid article:first-child,
  .team-values-grid article:last-child { padding: 34px 0 38px; border-top: 1px solid rgba(255,255,255,.18); border-left: 0; }
  .team-values-grid article::before,
  .team-values-grid article:first-child::before { left: 0; }
  .team-values-grid span { margin-bottom: 22px; font-size: clamp(2.75rem, 13vw, 3.65rem); }
  .team-values-grid h3 { margin-bottom: 14px; font-size: clamp(1.65rem, 7vw, 2rem); }
  .team-values-grid p { max-width: 45ch; font-size: 1.03rem; line-height: 1.72; }
  .profile-body { grid-template-columns: 1fr; }
  .profile-facts { padding: 0 0 24px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .related-team { grid-template-columns: 1fr 1fr; }
  .search-hero { min-height: 480px; padding-top: 48px; }
  .search-result { grid-template-columns: 90px 1fr; gap: 18px; }
  .search-result > span { display: none; }
  .appointment-section { grid-template-columns: 1fr; }
  .footer-legal { grid-column: 1 / -1; flex-wrap: wrap; }
}

/* Mantener las dos firmas a la misma escala tras todas las reglas adaptables. */


.space-logo img,
.studio-card .space-logo img { width: 100%; height: 100%; }
.cookie-banner[hidden],
.cookie-preferences[hidden] { display: none; }

@media (max-width: 1180px) {
  .brand-clinic img,
  .brand-studio img { width: 100%; height: 100%; }
}

@media (max-width: 1050px) {
  .hero-slide { grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); }
  .editorial-section { grid-template-columns: 240px minmax(0, 1fr); gap: 42px; }
}

@media (max-width: 760px) {
  .editorial-section { grid-template-columns: 1fr; gap: 34px; }
  .brand-clinic img,
  .brand-studio img { width: 100%; height: 100%; }
  .space-logo img,
  .studio-card .space-logo img { width: 100%; height: 100%; }
  
}

/* Studio: menú directo y directorio compacto de disciplinas. */
.submenu-studio {
  left: -210px;
  width: min(760px, calc(100vw - 40px));
  padding: 0;
}
.submenu-studio-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.submenu-studio-grid section { min-width: 0; padding: 22px 18px 24px; border-right: 1px solid var(--line); }
.submenu-studio-grid section:last-child { border-right: 0; }
.submenu-studio-grid p {
  margin: 0 8px 12px;
  color: var(--pink);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.submenu-studio-grid a { min-height: 40px !important; padding: 8px !important; font-size: .76rem !important; }
.submenu-studio-grid a[aria-current="page"] { color: var(--white); background: rgba(236,25,134,.13); }

.disciplines-hero {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  height: 430px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.disciplines-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 34px var(--pad) 44px max(var(--pad), calc((100vw - var(--container)) / 2));
}
.disciplines-hero .breadcrumbs { margin-bottom: 34px; }
.disciplines-hero h1 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(2.75rem, 4.15vw, 4.75rem);
  line-height: .96;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.disciplines-hero-copy > p:not(.eyebrow) { max-width: 650px; margin: 18px 0 24px; color: #c8c8c8; font-size: 1rem; }
.disciplines-hero-actions { display: flex; align-items: center; gap: 24px; }
.disciplines-hero figure { position: relative; height: 430px; margin: 0; overflow: hidden; }
.disciplines-hero figure::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 32%); pointer-events: none; }
.disciplines-hero figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; filter: saturate(.78) contrast(1.04); }
.disciplines-hero figcaption { position: absolute; z-index: 1; right: 24px; bottom: 18px; color: rgba(255,255,255,.78); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; }

.discipline-index { width: min(calc(100% - (var(--pad) * 2)), var(--container)); margin: auto; padding: 64px 0 78px; }
.discipline-index-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: end; margin-bottom: 42px; }
.discipline-index-heading h2 { max-width: 780px; margin: 4px 0 0; font-size: clamp(2.35rem, 3.5vw, 4rem); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.discipline-index-heading > p { max-width: 620px; margin: 0; color: #5d5d5d; }
.discipline-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.discipline-group { min-width: 0; padding: 24px 24px 8px; background: #e7e4dd; }
.discipline-group > header { display: grid; grid-template-columns: 42px 1fr; gap: 12px; min-height: 128px; padding-bottom: 20px; }
.discipline-group > header > span { color: var(--pink-dark); font-variant-numeric: tabular-nums; font-size: .76rem; }
.discipline-group h2 { margin: 0 0 8px; font-size: 1.45rem; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.discipline-group header p { margin: 0; color: #5f5f5f; font-size: .83rem; line-height: 1.45; }
.discipline-group nav { border-top: 1px solid var(--line-dark); }
.discipline-group nav a { position: relative; display: flex; justify-content: space-between; gap: 18px; align-items: center; min-height: 84px; padding: 13px 4px; border-bottom: 1px solid var(--line-dark); transition: padding .22s ease, color .22s ease, background .22s ease; }
.discipline-group nav a:hover { padding-left: 10px; color: var(--pink-dark); background: rgba(255,255,255,.28); }
.discipline-group nav a:active { transform: translateY(1px); }
.discipline-group nav span,
.discipline-group nav strong,
.discipline-group nav small { display: block; }
.discipline-group nav strong { font-size: 1rem; line-height: 1.18; }
.discipline-group nav small { margin-top: 4px; color: #666; font-size: .74rem; line-height: 1.35; }
.discipline-group nav b { flex: 0 0 auto; color: var(--pink-dark); font-size: 1.2rem; }

.studio-direct-actions { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 max(var(--pad), calc((100% - var(--container)) / 2)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.studio-direct-actions > a { position: relative; min-height: 150px; display: flex; flex-direction: column; justify-content: center; padding: 28px 64px 28px 28px; border-right: 1px solid var(--line); transition: background .25s ease; }
.studio-direct-actions > a:last-child { border-right: 0; }
.studio-direct-actions > a:hover { background: rgba(236,25,134,.09); }
.studio-direct-actions span { margin-bottom: 5px; color: #999; font-size: .75rem; }
.studio-direct-actions strong { color: var(--white); font-size: clamp(1.15rem, 1.55vw, 1.55rem); }
.studio-direct-actions b { position: absolute; right: 28px; top: 50%; color: var(--pink); font-size: 1.6rem; transform: translateY(-50%); }

@media (max-width: 1050px) {
  .submenu-studio { width: 100%; padding: 0 0 16px 18px; }
  .submenu-studio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .submenu-studio-grid section { padding: 16px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .disciplines-hero { grid-template-columns: .95fr 1.05fr; }
  .discipline-index-heading { grid-template-columns: 1fr; gap: 18px; }
  .discipline-groups { gap: 16px; }
  .discipline-group { padding: 20px 18px 6px; }
}

@media (max-width: 760px) {
  .submenu-studio-grid { grid-template-columns: 1fr; }
  .disciplines-hero { display: flex; flex-direction: column; height: auto; }
  .disciplines-hero-copy { min-height: 390px; padding: 30px var(--pad) 42px; }
  .disciplines-hero .breadcrumbs { margin-bottom: 30px; }
  .disciplines-hero h1 { font-size: clamp(2.55rem, 12vw, 3.45rem); }
  .disciplines-hero-actions { align-items: flex-start; flex-direction: column; gap: 14px; }
  .disciplines-hero figure { height: 250px; }
  .discipline-index { width: calc(100% - 40px); padding: 48px 0 56px; }
  .discipline-index-heading { margin-bottom: 30px; }
  .discipline-groups { grid-template-columns: 1fr; }
  .discipline-group > header { min-height: 0; }
  .discipline-group nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  .discipline-group nav a { min-height: 72px; }
  .discipline-group nav small { display: none; }
  .studio-direct-actions { grid-template-columns: 1fr; }
  .studio-direct-actions > a { min-height: 112px; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* Directorio clínico completo: disciplinas y técnicas conservadas de WordPress. */
.main-nav > ul > li:first-child .submenu-studio-grid p { color: var(--green-bright); }
.main-nav > ul > li:first-child .submenu-studio-grid a[aria-current="page"] { color: var(--white); background: rgba(143,189,24,.14); }
.technique-directory { width: min(calc(100% - (var(--pad) * 2)), var(--container)); margin: auto; padding: clamp(66px, 8vw, 108px) 0; }
.technique-directory-heading { display: grid; grid-template-columns: 1.12fr .88fr; align-items: end; gap: clamp(42px, 8vw, 120px); margin-bottom: 48px; }
.technique-directory-heading h2 { max-width: 820px; margin: 5px 0 0; font-size: clamp(2.35rem, 3.7vw, 4.3rem); line-height: .98; letter-spacing: -.05em; }
.technique-directory-heading > p { max-width: 610px; margin: 0; color: #555; }
.technique-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.technique-group { min-width: 0; padding: clamp(24px, 3vw, 38px); background: #e8e5de; }
.technique-group > header { display: grid; grid-template-columns: 44px 1fr; gap: 16px; min-height: 120px; padding-bottom: 24px; }
.technique-group > header > span { color: var(--green-dark); font-size: .76rem; font-weight: 700; }
.technique-group h2 { margin: 0 0 8px; font-size: clamp(1.45rem, 2vw, 2rem); line-height: 1.05; }
.technique-group header p { max-width: 560px; margin: 0; color: #606060; font-size: .86rem; }
.technique-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); }
.technique-links a { position: relative; min-height: 126px; padding: 20px 48px 18px 0; border-bottom: 1px solid var(--line-dark); transition: color .22s ease, padding .22s ease; }
.technique-links a:nth-child(odd) { margin-right: 18px; }
.technique-links a:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line-dark); }
.technique-links a:hover { color: var(--green-dark); padding-right: 38px; }
.technique-links strong, .technique-links span { display: block; }
.technique-links strong { font-size: 1.02rem; line-height: 1.2; }
.technique-links span { margin-top: 7px; color: #646464; font-size: .76rem; line-height: 1.4; }
.technique-links b { position: absolute; right: 8px; top: 18px; color: var(--green-dark); font-size: 1.2rem; }
.technique-orientation, .nutrition-note { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(42px, 8vw, 120px); padding: clamp(62px, 7vw, 92px) max(var(--pad), calc((100% - var(--container)) / 2)); }
.technique-orientation h2, .nutrition-note h2 { max-width: 720px; margin: 0; font-size: clamp(2.2rem, 3.5vw, 4rem); line-height: 1; letter-spacing: -.05em; }
.technique-orientation > div:last-child { align-self: end; }
.technique-orientation > div:last-child p, .nutrition-note > p { max-width: 650px; color: #c5c5c5; }
.technique-source { border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); background: #e9e6df; }
.technique-source summary { display: grid; grid-template-columns: 150px minmax(0, 1fr) 48px; align-items: center; width: min(calc(100% - (var(--pad) * 2)), var(--container)); min-height: 130px; margin: 0 auto; cursor: pointer; list-style: none; }
.technique-source summary::-webkit-details-marker { display: none; }
.technique-source summary span { color: var(--green-dark); font-size: .7rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.technique-source summary strong { font-size: clamp(1.35rem, 2.4vw, 2.2rem); line-height: 1.08; letter-spacing: -.035em; }
.technique-source summary b { display: grid; width: 44px; height: 44px; place-items: center; justify-self: end; border: 1px solid var(--green-dark); border-radius: 50%; color: var(--green-dark); font-size: 1.45rem; font-weight: 400; transition: transform .25s ease, background-color .25s ease, color .25s ease; }
.technique-source[open] summary b { transform: rotate(45deg); background: var(--green-dark); color: #fff; }
.technique-source-panel { padding: 16px var(--pad) clamp(70px, 8vw, 120px); border-top: 1px solid var(--line-dark); background: var(--paper); }
.technique-source-intro { max-width: 720px; margin: 50px auto; color: #555; font-size: 1.05rem; line-height: 1.65; }
.technique-source .legacy-content { width: min(100%, 940px); margin: 0 auto; }
.technique-source .legacy-content .elementor-widget-image img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; }
.technique-source .legacy-content .elementor-button { display: inline-flex; width: auto; margin: 5px 5px 12px 0; padding: 9px 16px; border: 1px solid var(--green-dark); border-radius: 999px; }

/* Las páginas migradas se leen como piezas editoriales, no como volcados de Elementor. */
.studio-content-page .content-shell { grid-template-columns: minmax(0, 900px) 270px; width: min(calc(100% - (var(--pad) * 2)), 1220px); gap: clamp(36px, 6vw, 76px); }
.studio-content-page .page-toc { display: none; }
.studio-content-page .legacy-content { max-width: none; }
.studio-content-page .legacy-content .elementor-widget-text-editor > div > p:first-child { margin-bottom: 18px; color: var(--pink-dark); font-size: .72rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.studio-content-page .legacy-content .elementor-widget-text-editor > div > p:nth-child(2) { max-width: 900px; font-size: clamp(1.22rem, 1.7vw, 1.48rem); line-height: 1.55; letter-spacing: -.018em; }
.studio-content-page .legacy-content p:has(+ ul), .content-page:not(.legal-page) .legacy-content p:has(+ ul) { margin: 46px 0 18px; color: var(--ink); font-size: clamp(1.45rem, 2vw, 2rem); font-weight: 680; line-height: 1.12; letter-spacing: -.035em; }
.studio-content-page .legacy-content ul, .content-page:not(.legal-page) .legacy-content .elementor-widget-text-editor ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 34px; padding: 0; list-style: none; }
.studio-content-page .legacy-content li, .content-page:not(.legal-page) .legacy-content .elementor-widget-text-editor li { position: relative; min-height: 88px; margin: 0; padding: 18px 20px 18px 42px; background: #ebe8e1; border-top: 2px solid var(--pink-dark); }
.content-page:not(.legal-page) .legacy-content .elementor-widget-text-editor li { border-color: var(--green-dark); }
.studio-content-page .legacy-content li::before, .content-page:not(.legal-page) .legacy-content .elementor-widget-text-editor li::before { position: absolute; left: 18px; top: 20px; content: "↗"; color: var(--pink-dark); font-weight: 700; }
.content-page:not(.legal-page) .legacy-content .elementor-widget-text-editor li::before { color: var(--green-dark); }
.studio-content-page .legacy-content li p, .content-page:not(.legal-page) .legacy-content .elementor-widget-text-editor li p { margin: 0; }
.studio-content-page .legacy-content .elementor-section:has(.elementor-widget-image) .elementor-container,
.content-page:not(.legal-page) .legacy-content .elementor-section:has(.elementor-widget-image) .elementor-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 18px; margin: 46px 0 12px; }
.studio-content-page .legacy-content .elementor-column:has(.elementor-widget-image),
.content-page:not(.legal-page) .legacy-content .elementor-column:has(.elementor-widget-image) { width: 100%; }
.studio-content-page .legacy-content .elementor-widget-image:has(img[src*="Logo-"]),
.studio-content-page .legacy-content .elementor-widget-image:has(img[alt*="Logo"]),
.content-page:not(.legal-page) .legacy-content .elementor-widget-image:has(img[src*="Logo-"]),
.content-page:not(.legal-page) .legacy-content .elementor-widget-image:has(img[alt*="Logo"]) { display: none; }
.studio-content-page .legacy-content .elementor-column:has(.elementor-widget-image img[src*="Logo-"]):not(:has(img:not([src*="Logo-"]))),
.studio-content-page .legacy-content .elementor-column:has(.elementor-widget-image img[alt*="Logo"]):not(:has(img:not([alt*="Logo"]))),
.content-page:not(.legal-page) .legacy-content .elementor-column:has(.elementor-widget-image img[src*="Logo-"]):not(:has(img:not([src*="Logo-"]))),
.content-page:not(.legal-page) .legacy-content .elementor-column:has(.elementor-widget-image img[alt*="Logo"]):not(:has(img:not([alt*="Logo"]))) { display: none; }
.studio-content-page .legacy-content .elementor-column:has(.elementor-widget-image):not(:has(img)),
.content-page:not(.legal-page) .legacy-content .elementor-column:has(.elementor-widget-image):not(:has(img)) { display: none; }
.studio-content-page .legacy-content .elementor-section:has(img:not(.is-low-resolution)) .elementor-widget-image:has(img.is-low-resolution),
.content-page:not(.legal-page) .legacy-content .elementor-section:has(img:not(.is-low-resolution)) .elementor-widget-image:has(img.is-low-resolution) { display: none; }
.studio-content-page .legacy-content .elementor-section:has(img:not(.is-low-resolution)) .elementor-column:has(img.is-low-resolution):not(:has(img:not(.is-low-resolution))),
.content-page:not(.legal-page) .legacy-content .elementor-section:has(img:not(.is-low-resolution)) .elementor-column:has(img.is-low-resolution):not(:has(img:not(.is-low-resolution))) { display: none; }
.studio-content-page .legacy-content .elementor-widget-image img,
.content-page:not(.legal-page) .legacy-content .elementor-widget-image img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; margin: 0; object-fit: cover; }

/* Test de alimentación. */
.nutrition-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: clamp(50px, 9vw, 150px); min-height: 540px; overflow: hidden; padding: clamp(46px, 7vw, 92px) max(var(--pad), calc((100% - var(--container)) / 2)); }
.nutrition-hero > div { position: relative; z-index: 1; align-self: center; }
.nutrition-hero .breadcrumbs { margin-bottom: 52px; }
.nutrition-hero h1 { max-width: 920px; margin: 0; font-size: clamp(3rem, 5.4vw, 6.2rem); line-height: .94; letter-spacing: -.055em; }
.nutrition-hero > div > p:not(.eyebrow) { max-width: 690px; margin: 24px 0 30px; color: #c9c9c9; font-size: 1.12rem; }
.nutrition-hero > aside { position: relative; z-index: 1; align-self: end; padding: 30px 0 10px 30px; border-left: 1px solid var(--line); }
.nutrition-wordmark { z-index: 0; left: -2vw; bottom: -.08em; color: rgba(255,255,255,.028); font-size: clamp(8rem, 13.4vw, 17rem); }
.nutrition-hero > aside span, .nutrition-hero > aside strong { display: block; }
.nutrition-hero > aside span { color: var(--green-bright); font-size: clamp(4.5rem, 8vw, 8.5rem); line-height: .8; font-weight: 720; letter-spacing: -.07em; }
.nutrition-hero > aside strong { margin: 12px 0 18px; font-size: 1.2rem; }
.nutrition-hero > aside p { max-width: 330px; color: #999; font-size: .88rem; }
.nutrition-test-layout { display: grid; grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr); gap: clamp(42px, 8vw, 120px); align-items: start; width: min(calc(100% - (var(--pad) * 2)), var(--container)); margin: auto; padding: clamp(68px, 8vw, 108px) 0; }
.nutrition-test-intro { position: sticky; top: 108px; }
.nutrition-test-intro h2 { margin: 0 0 20px; font-size: clamp(2.2rem, 3.35vw, 3.9rem); line-height: 1; letter-spacing: -.05em; }
.nutrition-test-intro > p:not(.label) { color: #555; }
.nutrition-progress { height: 5px; margin: 32px 0 12px; overflow: hidden; background: #d8d5ce; }
.nutrition-progress span { display: block; height: 100%; background: var(--green-dark); transition: width .35s ease; }
.nutrition-test-intro > strong { color: var(--green-dark); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.nutrition-test-intro ul { margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line-dark); list-style: none; }
.nutrition-test-intro li { margin: 8px 0; color: #666; font-size: .82rem; }
.nutrition-form { min-width: 0; padding: clamp(28px, 4vw, 54px); background: #e8e5de; }
.nutrition-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.nutrition-step[hidden] { display: none; }
.nutrition-step legend { display: block; width: 100%; margin-bottom: 22px; font-size: clamp(2rem, 3vw, 3.3rem); font-weight: 680; line-height: 1; letter-spacing: -.045em; }
.nutrition-step legend span { display: block; margin-bottom: 9px; color: var(--green-dark); font-size: .7rem; letter-spacing: .11em; text-transform: uppercase; }
.nutrition-step-intro { max-width: 720px; margin: 0 0 28px; color: #5b5b5b; }
.nutrition-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.nutrition-data-grid label { display: grid; gap: 8px; color: #565656; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.nutrition-data-grid input { width: 100%; min-height: 54px; padding: 12px 14px; color: var(--ink); background: var(--paper); border: 1px solid #bbb8b1; border-radius: 0; font: inherit; font-size: 1rem; text-transform: none; }
.nutrition-data-grid input:focus { outline: 3px solid rgba(143,189,24,.24); border-color: var(--green-dark); }
.nutrition-questions { display: grid; gap: 10px; }
.nutrition-question { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) 62px; align-items: center; gap: 14px; min-height: 82px; padding: 13px 14px; cursor: pointer; background: rgba(255,255,255,.5); border: 1px solid transparent; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
.nutrition-question:hover { background: var(--paper); border-color: #bab7b0; transform: translateX(3px); }
.nutrition-question-number { color: var(--green-dark); font-size: .72rem; font-weight: 750; letter-spacing: .08em; }
.nutrition-question-text { font-size: .93rem; line-height: 1.38; }
.nutrition-question input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.nutrition-check { display: grid; grid-template-columns: 26px 1fr; align-items: center; justify-self: end; gap: 5px; min-width: 58px; padding: 5px; color: #777; border: 1px solid #aaa; border-radius: 999px; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.nutrition-check b { display: grid; place-items: center; width: 24px; height: 24px; color: transparent; background: #d2cfc8; border-radius: 50%; }
.nutrition-check em { font-size: .74rem; font-style: normal; font-weight: 700; }
.nutrition-question input:focus-visible + .nutrition-check { outline: 3px solid rgba(143,189,24,.3); outline-offset: 2px; }
.nutrition-question input:checked + .nutrition-check { color: var(--ink); background: var(--green-bright); border-color: var(--green-bright); }
.nutrition-question input:checked + .nutrition-check b { color: var(--ink); background: var(--paper); }
.nutrition-submit-consent { margin-top: 30px; padding: 22px; color: var(--paper); background: var(--ink); }
.nutrition-submit-consent .form-consent { margin-bottom: 12px; }
.nutrition-submit-consent > p { margin: 0; color: #888; font-size: .77rem; }
.nutrition-form-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line-dark); }
.nutrition-form-nav button { cursor: pointer; }
.nutrition-form .form-status { color: var(--green-dark); }
.nutrition-note > p { align-self: end; margin: 0; }

/* Galería de YouTube con carga bajo demanda. */
.video-hero { display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: end; min-height: 500px; padding: clamp(48px, 7vw, 92px) max(var(--pad), calc((100% - var(--container)) / 2)); }
.video-hero .breadcrumbs { margin-bottom: 54px; }
.video-hero h1 { max-width: 920px; margin: 0; font-size: clamp(3rem, 5.2vw, 6rem); line-height: .94; letter-spacing: -.055em; }
.video-hero > div > p:not(.eyebrow) { max-width: 700px; margin: 24px 0 30px; color: #c6c6c6; font-size: 1.12rem; }
.video-hero > span { display: flex; align-items: baseline; gap: 12px; padding: 18px 0; color: #999; border-top: 1px solid var(--line); font-size: .78rem; text-transform: uppercase; }
.video-hero > span strong { color: var(--green-bright); font-size: 2.4rem; letter-spacing: -.05em; }
.video-library { width: min(calc(100% - (var(--pad) * 2)), var(--container)); margin: auto; padding: clamp(68px, 8vw, 108px) 0; }
.video-library-heading { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 50px; margin-bottom: 44px; }
.video-library-heading h2 { margin: 0; font-size: clamp(2.4rem, 3.8vw, 4.5rem); line-height: 1; letter-spacing: -.05em; }
.video-library-heading > p { max-width: 540px; margin: 0; color: #5b5b5b; }
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 34px); margin-bottom: 42px; }
.video-card { min-width: 0; color: var(--ink); border-bottom: 1px solid var(--line-dark); transition: transform .28s ease; }
.video-card:hover { transform: translateY(-5px); }
.video-card-image { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.video-card-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.04); transition: transform .45s ease, filter .3s ease; }
.video-card:hover img { transform: scale(1.025); filter: saturate(1); }
.video-card-image i { position: absolute; left: 20px; bottom: 18px; display: grid; place-items: center; width: 54px; height: 54px; color: var(--ink); background: var(--green-bright); border-radius: 50%; transition: transform .28s ease; }
.video-card:hover .video-card-image i { transform: scale(1.08); }
.video-card-image svg { width: 25px; height: 25px; fill: currentColor; }
.video-card-copy { display: grid; min-height: 170px; padding: 18px 2px 22px; }
.video-card-copy small, .video-card-copy strong, .video-card-copy em { display: block; }
.video-card-copy small { color: var(--green-dark); font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.video-card-copy strong { margin: 12px 0 18px; font-size: clamp(1.25rem, 1.75vw, 1.65rem); line-height: 1.08; letter-spacing: -.025em; }
.video-card-copy em { align-self: end; color: #555; font-size: .78rem; font-style: normal; }
.video-dialog { width: min(1080px, calc(100% - 34px)); padding: 0; color: var(--paper); background: #090909; border: 1px solid #333; }
.video-dialog::backdrop { background: rgba(0,0,0,.88); backdrop-filter: blur(5px); }
.video-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 68px; padding: 14px 18px 14px 24px; border-bottom: 1px solid #333; }
.video-dialog-head strong { font-size: 1rem; }
.video-dialog-head button { width: 42px; height: 42px; color: var(--paper); background: transparent; border: 1px solid #555; border-radius: 50%; cursor: pointer; font-size: 1.7rem; }
.video-dialog-player { aspect-ratio: 16 / 9; background: #000; }
.video-dialog-player iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 1050px) {
  .technique-directory-heading, .video-library-heading { grid-template-columns: 1fr; gap: 18px; }
  .technique-links { grid-template-columns: 1fr; }
  .technique-links a:nth-child(odd) { margin-right: 0; }
  .technique-links a:nth-child(even) { padding-left: 0; border-left: 0; }
  .studio-content-page .content-shell { grid-template-columns: minmax(0, 1fr); }
  .studio-content-page .content-shell > .call-card { grid-column: 1; max-width: 620px; }
  .nutrition-test-layout { grid-template-columns: 290px minmax(0, 1fr); gap: 42px; }
}

@media (max-width: 760px) {
  .technique-groups, .technique-orientation, .nutrition-note, .nutrition-hero, .nutrition-test-layout, .video-hero, .video-library-heading { grid-template-columns: 1fr; }
  .technique-group > header { min-height: 0; }
  .technique-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .technique-links a { min-height: 108px; padding-right: 30px; }
  .technique-links a:nth-child(odd) { margin-right: 10px; }
  .technique-links a:nth-child(even) { padding-left: 10px; border-left: 1px solid var(--line-dark); }
  .technique-links span { display: none; }
  .technique-source summary { grid-template-columns: 1fr 44px; gap: 12px; min-height: 112px; }
  .technique-source summary span { grid-column: 1 / -1; align-self: end; }
  .technique-source summary b { grid-column: 2; grid-row: 2; }
  .studio-content-page .legacy-content ul, .content-page:not(.legal-page) .legacy-content .elementor-widget-text-editor ul,
  .studio-content-page .legacy-content .elementor-section:has(.elementor-widget-image) .elementor-container,
  .content-page:not(.legal-page) .legacy-content .elementor-section:has(.elementor-widget-image) .elementor-container { grid-template-columns: 1fr; }
  .nutrition-hero { min-height: auto; padding-top: 40px; padding-bottom: 54px; }
  .nutrition-wordmark { left: -8vw; bottom: 12%; font-size: clamp(6rem, 25vw, 8.5rem); }
  .nutrition-hero .breadcrumbs { margin-bottom: 38px; }
  .nutrition-hero > aside { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .nutrition-test-intro { position: static; }
  .nutrition-data-grid { grid-template-columns: 1fr; }
  .nutrition-form { padding: 24px 18px; }
  .nutrition-question { grid-template-columns: 32px minmax(0, 1fr) 56px; gap: 9px; min-height: 92px; padding: 12px 10px; }
  .nutrition-question-text { font-size: .86rem; }
  .nutrition-form-nav { flex-wrap: wrap; }
  .video-hero { min-height: auto; padding-top: 40px; padding-bottom: 56px; }
  .video-hero .breadcrumbs { margin-bottom: 38px; }
  .video-grid { grid-template-columns: 1fr; }
  .video-card-copy { min-height: 138px; }
}

/* Escala editorial más contenida en todo el sitio. */
.hero h1, .hero h2 { font-size: clamp(2.7rem, 3.45vw, 4.35rem); line-height: .98; letter-spacing: -.052em; }
.archive-hero h1, .article-hero h1, .profile-hero h1, .category-hero h1, .search-hero h1, .inner-hero h1 { font-size: clamp(2.25rem, 3vw, 3.85rem); line-height: 1; }
.section-heading h2, .section-heading-light h2, .archive-feed-heading h2,
.spaces-copy h2, .method-copy h2, .home-guide-heading h2, .directory-intro h2, .team-directory-intro h2, .testimonial-context h2, .studio-manifesto h2,
.home-faq-intro h2, .cases-intro h2, .contact-intro h2, .contact-map-copy h2, .contact-guidance h2,
.technique-directory-heading h2, .technique-orientation h2, .nutrition-note h2, .nutrition-test-intro h2,
.video-library-heading h2 { font-size: clamp(2rem, 2.85vw, 3.5rem); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.disciplines-hero h1, .nutrition-hero h1, .video-hero h1 { font-size: clamp(2.35rem, 3.3vw, 3.55rem); line-height: 1; }

/* Testimonios: navegación completa, historias vivas y archivo asimétrico. */
.testimonials-page .archive-hero { height: 560px; }
.testimonials-page .archive-hero > figure { height: 560px; }
.testimony-topics { position: relative; top: auto; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: visible; padding: 1px max(var(--pad), calc((100% - var(--container)) / 2)); background: var(--line-dark); scrollbar-width: none; }
.testimony-topics a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 10px; min-height: 72px; padding: 14px 18px; overflow: hidden; color: #4e4e4e; background: var(--paper); border: 0; transition: color .24s ease, background-color .24s ease, padding .24s ease; }
.testimony-topics a::after { content: "↗"; color: var(--green-dark); opacity: 0; transform: translateX(-7px); transition: opacity .24s ease, transform .24s ease; }
.testimony-topics a span { min-width: 28px; color: #777; font-variant-numeric: tabular-nums; }
.testimony-topics a:hover, .testimony-topics a:focus-visible { padding-left: 24px; color: var(--ink); background: #e5e2db; }
.testimony-topics a:hover::after, .testimony-topics a:focus-visible::after { opacity: 1; transform: translateX(0); }
.testimony-topics a.is-active { color: var(--paper); background: var(--ink); }
.testimony-topics a.is-active span, .testimony-topics a.is-active::after { color: var(--green-bright); }
.testimonial-spotlight { padding: clamp(70px, 8vw, 110px) max(var(--pad), calc((100% - var(--container)) / 2)) clamp(84px, 9vw, 132px); color: var(--paper); background: #0c0c0c; }
.testimonial-spotlight > header { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); align-items: end; gap: clamp(42px, 8vw, 120px); margin-bottom: 42px; }
.testimonial-spotlight > header h2 { max-width: 820px; margin: 5px 0 0; font-size: clamp(2.1rem, 3.05vw, 3.65rem); line-height: 1; letter-spacing: -.047em; text-wrap: balance; }
.testimonial-spotlight > header > p:last-child { max-width: 520px; margin: 0; color: #999; line-height: 1.6; }
.testimonial-spotlight-stage { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); min-height: 550px; border-top: 1px solid #424242; border-bottom: 1px solid #424242; }
.testimonial-spotlight-feature { position: relative; display: flex; min-width: 0; flex-direction: column; padding: clamp(34px, 4.5vw, 64px); overflow: hidden; background: radial-gradient(circle at 105% -5%, rgba(174,230,0,.17), transparent 40%), #151515; border-right: 1px solid #424242; }
.testimonial-spotlight-feature::after { position: absolute; right: -30px; bottom: -82px; content: "“"; color: rgba(174,230,0,.08); font-size: 24rem; font-weight: 750; line-height: .7; pointer-events: none; }
.testimonial-spotlight-feature > span { color: var(--green-bright); font-size: .72rem; font-weight: 700; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.testimonial-spotlight-feature > p { margin: auto 0 18px; color: var(--green-bright); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.testimonial-spotlight-feature h3 { position: relative; z-index: 1; max-width: 700px; margin: 0 0 24px; font-size: clamp(1.7rem, 2.5vw, 2.85rem); line-height: 1.03; letter-spacing: -.04em; text-wrap: balance; }
.testimonial-spotlight-feature blockquote { position: relative; z-index: 1; max-width: 680px; margin: 0 0 30px; color: #bdbdbd; font-size: 1rem; line-height: 1.6; }
.testimonial-spotlight-feature > a { position: relative; z-index: 1; align-self: flex-start; color: var(--paper); border-bottom: 1px solid var(--green-bright); font-size: .84rem; }
.testimonial-story-list { min-width: 0; }
.testimonial-story-trigger { display: grid; grid-template-columns: 42px minmax(0, 1fr) 30px; align-items: center; gap: 16px; width: 100%; min-height: 110px; padding: 18px 20px; color: #bcbcbc; text-align: left; background: transparent; border: 0; border-bottom: 1px solid #353535; cursor: pointer; transition: color .22s ease, background-color .22s ease, padding .22s ease; }
.testimonial-story-trigger:last-child { border-bottom: 0; }
.testimonial-story-trigger > span:first-child { color: #686868; font-size: .72rem; font-variant-numeric: tabular-nums; }
.testimonial-story-trigger small, .testimonial-story-trigger strong { display: block; }
.testimonial-story-trigger small { margin-bottom: 6px; color: #777; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.testimonial-story-trigger strong { max-width: 580px; font-size: 1rem; line-height: 1.22; }
.testimonial-story-trigger b { color: var(--green-bright); opacity: 0; transform: translateX(-8px); transition: opacity .22s ease, transform .22s ease; }
.testimonial-story-trigger:hover, .testimonial-story-trigger:focus-visible, .testimonial-story-trigger.is-active { padding-left: 28px; color: var(--paper); background: #1b1b1b; }
.testimonial-story-trigger.is-active { box-shadow: inset 3px 0 var(--green-bright); }
.testimonial-story-trigger:hover b, .testimonial-story-trigger:focus-visible b, .testimonial-story-trigger.is-active b { opacity: 1; transform: translateX(0); }
.testimonials-page .testimonial-context { padding-top: 64px; padding-bottom: 70px; }
.testimonial-finder { position: sticky; z-index: 8; top: 76px; display: grid; grid-template-columns: minmax(240px, .65fr) minmax(360px, 1.35fr); align-items: end; gap: 12px 44px; margin: 0 0 34px; padding: 22px 0 18px; background: rgba(244,242,237,.96); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); backdrop-filter: blur(12px); }
.testimonial-finder > label { color: #535353; font-size: .78rem; font-weight: 650; }
.testimonial-finder > div { position: relative; display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--ink); }
.testimonial-finder input { flex: 1; min-width: 0; height: 50px; padding: 0 70px 0 2px; color: var(--ink); background: transparent; border: 0; outline: 0; font: inherit; font-size: 1rem; }
.testimonial-finder input::placeholder { color: #858585; }
.testimonial-finder input:focus-visible { outline: 3px solid rgba(143,189,24,.25); outline-offset: 3px; }
.testimonial-finder button { position: absolute; right: 34px; min-height: 38px; padding: 0 8px; color: var(--green-dark); background: transparent; border: 0; cursor: pointer; font-size: .72rem; }
.testimonial-finder > div > span { position: absolute; right: 5px; color: var(--green-dark); font-size: 1.35rem; }
.testimonial-finder > p { grid-column: 2; margin: 0; color: #6a6a6a; font-size: .75rem; }
.testimonials-page .testimonial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; background: transparent; border: 0; }
.testimonials-page .testimonial-card { min-height: 330px; padding: clamp(28px, 3.2vw, 42px); overflow: hidden; background: #e9e6df; border: 1px solid #cbc8c0; transition: color .28s ease, background-color .28s ease, border-color .28s ease, transform .28s ease, opacity .45s ease; }
.testimonials-page .testimonial-card:nth-child(7n + 1) { grid-column: 1 / -1; min-height: 300px; padding-right: min(38%, 460px); background: #dfe7c8; }
.testimonials-page .testimonial-card:nth-child(7n + 4) { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.testimonials-page .testimonial-card:hover { z-index: 2; transform: translateY(-5px); background: var(--green-bright); border-color: var(--green-bright); }
.testimonials-page .testimonial-card:nth-child(7n + 4):hover { background: #202020; border-color: var(--green-bright); }
.testimonial-card-index { position: absolute; right: 26px; top: 22px; color: #aaa; font-size: clamp(2.1rem, 3.6vw, 4.2rem); font-weight: 700; line-height: 1; letter-spacing: -.07em; font-variant-numeric: tabular-nums; opacity: .34; }
.testimonials-page .testimonial-card > p { position: relative; z-index: 1; margin-bottom: 42px; }
.testimonials-page .testimonial-card h3 { position: relative; z-index: 1; max-width: 780px; padding-right: 38px; font-size: clamp(1.25rem, 1.65vw, 1.65rem); }
.testimonials-page .testimonial-card:nth-child(7n + 1) h3 { font-size: clamp(1.55rem, 2.2vw, 2.35rem); }
.testimonials-page .testimonial-card > div { position: relative; z-index: 1; display: -webkit-box; max-width: 720px; overflow: hidden; color: #575757; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.testimonials-page .testimonial-card:nth-child(7n + 4) > p, .testimonials-page .testimonial-card:nth-child(7n + 4) > a { color: var(--green-bright); }
.testimonials-page .testimonial-card:nth-child(7n + 4) > div { color: #aaa; }
.testimonials-page .testimonial-card > a { left: clamp(28px, 3.2vw, 42px); bottom: 30px; }
.testimonials-page .testimonial-card.is-reveal-ready { opacity: 0; transform: translateY(22px); }
.testimonials-page .testimonial-card.is-reveal-ready.is-in-view { opacity: 1; transform: translateY(0); }
.testimonials-page .testimonial-card.is-reveal-ready:nth-child(6n + 2) { transition-delay: 55ms; }
.testimonials-page .testimonial-card.is-reveal-ready:nth-child(6n + 3) { transition-delay: 110ms; }
.testimonials-page .testimonial-card.is-reveal-ready:nth-child(6n + 4) { transition-delay: 165ms; }
.testimonial-empty { padding: 62px 0; border-top: 1px solid var(--line-dark); }
.testimonial-empty h3 { margin: 0 0 10px; font-size: 1.6rem; }
.testimonial-empty p { margin: 0; color: #656565; }

/* Equipo: presentación circular con acceso directo a cada perfil. */
.team-orbit { display: grid; grid-template-columns: minmax(250px, .56fr) minmax(620px, 1.44fr); gap: clamp(40px, 7vw, 108px); align-items: center; padding: clamp(68px, 8vw, 112px) max(var(--pad), calc((100% - var(--container)) / 2)); overflow: hidden; background: #e7e4dd; }
.team-orbit > header { position: relative; z-index: 3; }
.team-orbit > header h2 { max-width: 470px; margin: 5px 0 20px; font-size: clamp(2.1rem, 2.85vw, 3.45rem); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.team-orbit > header > p:last-child { max-width: 440px; color: #5d5d5d; line-height: 1.65; }
.team-orbit-stage { position: relative; min-width: 0; height: 680px; }
.team-orbit-stage::before, .team-orbit-stage::after { position: absolute; left: 50%; top: 50%; content: ""; border: 1px solid rgba(20,20,20,.12); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.team-orbit-stage::before { width: 72%; aspect-ratio: 1; }
.team-orbit-stage::after { width: 48%; aspect-ratio: 1; border-style: dashed; }
.team-orbit-core { position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; width: 210px; aspect-ratio: 1; place-content: center; text-align: center; color: var(--paper); background: var(--ink); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 24px 70px rgba(35,32,24,.2); }
.team-orbit-core::before { position: absolute; z-index: -1; inset: -28px; content: ""; background: repeating-conic-gradient(from 4deg, rgba(151,202,27,.72) 0 1deg, transparent 1deg 14deg); border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 0 72%, #000 73% 76%, transparent 77%); mask: radial-gradient(circle, transparent 0 72%, #000 73% 76%, transparent 77%); animation: team-orbit-halo 32s linear infinite; }
.team-orbit-core span, .team-orbit-core strong, .team-orbit-core small { display: block; }
.team-orbit-core span { color: var(--green-bright); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.team-orbit-core strong { margin: 4px 0 14px; font-size: 2.35rem; line-height: 1; letter-spacing: -.05em; }
.team-orbit-core small { color: #8b8b8b; font-size: .65rem; }
.team-orbit-nodes { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.team-orbit-nodes i { position: absolute; width: 8px; height: 8px; background: var(--green-bright); border: 3px solid #e7e4dd; border-radius: 50%; box-shadow: 0 0 0 1px rgba(20,20,20,.14),0 0 0 0 rgba(151,202,27,.28); animation: team-node-pulse 3.8s ease-out infinite; }
.team-orbit-nodes i:nth-child(1) { left: 15.5%; top: 49%; }
.team-orbit-nodes i:nth-child(2) { left: 49.5%; top: 15%; animation-delay: -.9s; }
.team-orbit-nodes i:nth-child(3) { right: 14.5%; top: 51%; background: var(--pink); animation-delay: -1.8s; }
.team-orbit-nodes i:nth-child(4) { left: 50%; bottom: 14.5%; animation-delay: -2.7s; }
.team-orbit-person { --orbit-x: 14px; --orbit-y: -7px; --orbit-duration: 14s; position: absolute; z-index: 2; width: 176px; color: var(--ink); animation: team-orbit-glide var(--orbit-duration) cubic-bezier(.45,.05,.55,.95) infinite; will-change: transform; }
.team-orbit-person-1 { left: 1%; top: 8%; width: 168px; animation-delay: -2s; }
.team-orbit-person-2 { --orbit-x: 18px; --orbit-y: 3px; --orbit-duration: 16s; left: 38%; top: -1%; width: 196px; animation-delay: -6s; }
.team-orbit-person-3 { --orbit-x: -14px; --orbit-y: -7px; --orbit-duration: 15s; right: 1%; top: 10%; width: 164px; animation-delay: -9s; }
.team-orbit-person-4 { --orbit-x: -14px; --orbit-y: 7px; --orbit-duration: 17s; left: 7%; bottom: 4%; width: 166px; animation-delay: -4s; }
.team-orbit-person-5 { --orbit-x: 18px; --orbit-y: -3px; --orbit-duration: 15.5s; left: 40%; bottom: -1%; width: 188px; animation-delay: -11s; }
.team-orbit-person-6 { --orbit-x: 14px; --orbit-y: 7px; --orbit-duration: 16.5s; right: 1%; bottom: 6%; width: 172px; animation-delay: -7s; }
.team-orbit-image { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #d2cfc8; border: 6px solid var(--paper); border-radius: 50%; box-shadow: 0 18px 46px rgba(38,35,27,.18); transition: border-color .28s ease, box-shadow .28s ease; }
.team-orbit-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(.78); transition: transform .45s ease, filter .3s ease; }
.team-orbit-label { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) 20px; gap: 2px 8px; width: calc(100% + 34px); margin: -12px 0 0 -17px; padding: 10px 12px 11px; color: var(--paper); background: var(--ink); border-left: 3px solid var(--green-bright); }
.team-orbit-person-1 .team-orbit-label { border-color: var(--pink); }
.team-orbit-label small { grid-column: 1 / -1; color: #929292; font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; }
.team-orbit-label strong { overflow-wrap: anywhere; font-size: .78rem; line-height: 1.12; }
.team-orbit-label b { align-self: end; color: var(--green-bright); transform: translateX(-5px); transition: transform .25s ease; }
.team-orbit-person-1 .team-orbit-label b { color: var(--pink); }
.team-orbit-person:hover .team-orbit-image, .team-orbit-person:focus-visible .team-orbit-image { border-color: var(--green-bright); box-shadow: 0 22px 58px rgba(76,103,3,.24); }
.team-orbit-person:hover, .team-orbit-person:focus-visible { animation-play-state: paused; }
.team-orbit-person-1:hover .team-orbit-image, .team-orbit-person-1:focus-visible .team-orbit-image { border-color: var(--pink); }
.team-orbit-person:hover img, .team-orbit-person:focus-visible img { transform: scale(1.055); filter: saturate(1); }
.team-orbit-person:hover .team-orbit-label b, .team-orbit-person:focus-visible .team-orbit-label b { transform: translateX(1px); }
@keyframes team-orbit-glide { 0%,100% { transform: translate3d(calc(var(--orbit-x) * -1),0,0); } 50% { transform: translate3d(var(--orbit-x),var(--orbit-y),0); } }
@keyframes team-orbit-halo { to { transform: rotate(1turn); } }
@keyframes team-node-pulse { 0%,45%,100% { box-shadow: 0 0 0 1px rgba(20,20,20,.14),0 0 0 0 rgba(151,202,27,0); } 18% { box-shadow: 0 0 0 1px rgba(20,20,20,.14),0 0 0 10px rgba(151,202,27,.12); } }
.team-hub-page .team-directory { padding-top: 74px; }

/* Mapa con profundidad y una tarjeta de destino legible. */
.contact-map { position: relative; grid-template-columns: minmax(300px, .62fr) minmax(0, 1.38fr); min-height: 720px; overflow: hidden; background: radial-gradient(circle at 18% 22%, rgba(174,230,0,.1), transparent 28%), #e6e3dc; }
.contact-map-city,
.section-wordmark { position: absolute; color: rgba(20,20,20,.035); font-weight: 750; line-height: .75; letter-spacing: -.08em; white-space: nowrap; text-transform: uppercase; pointer-events: none; }
.section-wordmark.treatments-wordmark,
.section-wordmark.nutrition-wordmark { color: rgba(255,255,255,.032); }
.contact-map-city { left: -18px; bottom: -40px; font-size: clamp(8rem, 20vw, 22rem); }
.contact-map-copy { position: relative; z-index: 2; }
.contact-map-copy > p:not(.label) { max-width: 350px; }
.contact-map-facts { display: grid; gap: 0; max-width: 430px; margin: 30px 0 26px; border-top: 1px solid var(--line-dark); }
.contact-map-facts > span { display: grid; grid-template-columns: 100px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-dark); }
.contact-map-facts small { color: #777; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.contact-map-facts strong { font-size: .82rem; font-weight: 650; }
.contact-map-stage { position: relative; z-index: 2; min-width: 0; padding: 34px 8px 52px 30px; }
.contact-map-frame { position: relative; height: 560px; overflow: hidden; background: #cfd1c4; border: 8px solid var(--paper); box-shadow: 0 34px 80px rgba(55,50,39,.23); transform: rotate(-1.2deg); transition: transform .45s cubic-bezier(.2,.75,.2,1), box-shadow .45s ease; }
.contact-map-frame::before { position: absolute; z-index: 1; left: 0; top: 0; width: 92px; height: 7px; content: ""; background: linear-gradient(90deg, var(--green-bright) 0 52%, var(--pink) 52%); pointer-events: none; }
.contact-map-frame:hover { transform: rotate(0) translateY(-5px); box-shadow: 0 42px 90px rgba(55,50,39,.28); }
.contact-map-frame iframe { display: block; width: 100%; height: 100%; filter: saturate(.78) contrast(1.03); }
.contact-map-ticket { position: absolute; z-index: 3; left: -8px; bottom: 8px; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 14px; width: min(650px, calc(100% - 34px)); padding: 18px 20px; color: var(--paper); background: rgba(12,12,12,.96); box-shadow: 0 18px 44px rgba(0,0,0,.23); backdrop-filter: blur(10px); }
.contact-map-ticket > span { display: grid; width: 42px; height: 42px; place-items: center; color: var(--ink); background: var(--green-bright); border-radius: 50%; font-size: 1.3rem; }
.contact-map-ticket small, .contact-map-ticket strong { display: block; }
.contact-map-ticket small { color: #858585; font-size: .61rem; letter-spacing: .09em; text-transform: uppercase; }
.contact-map-ticket strong { margin: 2px 0 3px; font-size: 1rem; }
.contact-map-ticket p { margin: 0; color: #aaa; font-size: .74rem; }
.contact-map-ticket > a { display: flex; gap: 12px; align-items: center; min-height: 44px; color: var(--paper); border-bottom: 1px solid var(--green-bright); font-size: .76rem; }
.contact-map-ticket > a b { color: var(--green-bright); transition: transform .22s ease; }
.contact-map-ticket > a:hover b { transform: translateX(4px); }

/* Cabecera: firmas con la misma caja visual y centrado óptico. */
.header-inner .brand { align-self: center; }
.brand-clinic img,
.brand-studio img { display: block; width: 100%; height: 100%; object-position: center; }
.brand-clinic img { object-fit: contain; }
.brand-studio img { object-fit: cover; }

/* Pie: flecha diagonal previa y respuesta cromática por ámbito. */
.footer-brand { position: relative; padding-top: 18px; }
.footer-brand::before { position: absolute; left: 0; top: 0; width: 74px; height: 3px; content: ""; background: linear-gradient(90deg, var(--green-bright) 0 54%, var(--pink) 54%); transition: width .35s ease; }
.footer-brand:hover::before { width: 142px; }
.footer-brand img { transition: transform .35s ease, filter .35s ease; }
.footer-brand:hover img { transform: translateX(5px); filter: brightness(1.08); }
.footer-contact { display: flex !important; align-items: center; gap: 9px; transition: color .22s ease, transform .22s ease; }
.footer-contact svg { flex: 0 0 15px; width: 15px; height: 15px; fill: none; stroke: var(--green-bright); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer-contact:hover,
.footer-contact:focus-visible { color: var(--green-bright); transform: translateX(3px); }
.footer-links > a { position: relative; display: flex !important; width: fit-content; align-items: center; transition: color .22s ease, transform .22s ease; }
.footer-links > a::before { position: absolute; left: -20px; top: 50%; content: "→"; opacity: 0; transform: translate(6px,-50%) rotate(-45deg); transform-origin: center; transition: opacity .22s ease, transform .22s ease; }
.footer-links-clinic > a::before,
.footer-links-knowledge > a::before { color: var(--green-bright); }
.footer-links-studio > a::before { color: var(--pink); }
.footer-links-clinic > a:hover,
.footer-links-clinic > a:focus-visible,
.footer-links-knowledge > a:hover,
.footer-links-knowledge > a:focus-visible { color: var(--green-bright); transform: translateX(5px); }
.footer-links-studio > a:hover,
.footer-links-studio > a:focus-visible { color: var(--pink); transform: translateX(5px); }
.footer-links > a:hover::before,
.footer-links > a:focus-visible::before { opacity: 1; transform: translate(0,-50%) rotate(-45deg); }

@media (max-width: 1050px) {
  .testimonial-spotlight-stage { grid-template-columns: 1fr; }
  .testimonial-spotlight-feature { min-height: 470px; border-right: 0; border-bottom: 1px solid #424242; }
  .team-orbit { grid-template-columns: 1fr; }
  .team-orbit > header { max-width: 720px; }
  .team-orbit-stage { width: min(100%, 820px); margin: 0 auto; }
  .contact-map { grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); gap: 38px; }
  .contact-map-stage { padding-left: 10px; }
}

@media (max-width: 760px) {
  .hero h1, .hero h2, .archive-hero h1, .article-hero h1, .profile-hero h1, .category-hero h1, .search-hero h1, .inner-hero h1, .disciplines-hero h1, .nutrition-hero h1, .video-hero h1 { font-size: clamp(2.05rem, 8.6vw, 3.05rem); line-height: 1; }
  .section-heading h2, .section-heading-light h2, .archive-feed-heading h2,
  .spaces-copy h2, .method-copy h2, .home-guide-heading h2, .directory-intro h2, .team-directory-intro h2, .testimonial-context h2, .studio-manifesto h2,
  .home-faq-intro h2, .cases-intro h2, .contact-intro h2, .contact-map-copy h2, .contact-guidance h2,
  .technique-directory-heading h2, .technique-orientation h2, .nutrition-note h2, .nutrition-test-intro h2, .video-library-heading h2 { font-size: clamp(1.85rem, 8vw, 2.65rem); }
  .testimonials-page .archive-hero, .testimonials-page .archive-hero > figure { height: auto; }
  .testimony-topics { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 1px; }
  .testimony-topics a { min-height: 68px; padding: 12px 13px; font-size: .72rem; }
  .testimonial-spotlight > header { grid-template-columns: 1fr; gap: 18px; }
  .testimonial-spotlight > header h2 { font-size: clamp(1.9rem, 8.6vw, 2.65rem); }
  .testimonial-spotlight-stage { min-height: 0; }
  .testimonial-spotlight-feature { min-height: 500px; padding: 30px 24px; }
  .testimonial-spotlight-feature h3 { font-size: clamp(1.55rem, 7.3vw, 2.2rem); }
  .testimonial-story-trigger { min-height: 104px; padding: 16px 12px; }
  .testimonial-finder { position: static; grid-template-columns: 1fr; gap: 10px; }
  .testimonial-finder > p { grid-column: 1; }
  .testimonials-page .testimonial-grid { grid-template-columns: 1fr; }
  .testimonials-page .testimonial-card:nth-child(7n + 1) { grid-column: 1; min-height: 360px; padding-right: 28px; }
  .testimonials-page .testimonial-card:nth-child(7n + 1) h3 { font-size: clamp(1.4rem, 6.6vw, 1.9rem); }
  .team-orbit { padding-top: 62px; padding-bottom: 84px; }
  .team-orbit-stage { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px 16px; height: auto; margin-top: 18px; }
  .team-orbit-stage::before, .team-orbit-stage::after, .team-orbit-nodes, .team-orbit-core::before { display: none; }
  .team-orbit-core { position: static; grid-column: 1 / -1; width: 170px; margin: 0 auto 10px; transform: none; }
  .team-orbit-person, .team-orbit-person-1, .team-orbit-person-2, .team-orbit-person-3, .team-orbit-person-4, .team-orbit-person-5, .team-orbit-person-6 { position: static; width: min(100%, 158px); margin: 0 auto; animation: none; }
  .team-orbit-label { width: calc(100% + 14px); margin-left: -7px; }
  .contact-map { display: block; min-height: 0; padding-top: 70px; padding-bottom: 78px; }
  
  .contact-map-stage { margin-top: 42px; padding: 0 0 0 8px; }
  .contact-map-frame { height: 460px; border-width: 5px; transform: rotate(-.6deg); }
  .contact-map-ticket { position: relative; left: -8px; bottom: auto; grid-template-columns: 42px minmax(0,1fr); width: calc(100% + 8px); margin-top: -22px; }
  .contact-map-ticket > a { grid-column: 1 / -1; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .team-orbit-person { animation: none; }
  .testimonials-page .testimonial-card.is-reveal-ready { opacity: 1; transform: none; }
  .contact-map-frame, .testimonial-story-trigger, .testimonials-page .testimonial-card, .team-orbit-image img { transition-duration: .01ms; }
}

/* Artículos: lectura amplia con bloques visuales alternos y fotografías sin deformar. */
.article-layout,
.content-shell:not(.legal-shell) { grid-template-columns: minmax(160px, 190px) minmax(0, 1080px); gap: clamp(32px, 4vw, 66px); width: min(calc(100% - (var(--pad) * 2)), 1380px); }
.article-layout > .article-content,
.content-shell:not(.legal-shell) > .legacy-content { width: 100%; max-width: none; }
.article-toc,
.page-toc { padding-right: 20px; }
.legacy-content { font-size: clamp(1.02rem, 1.05vw, 1.12rem); line-height: 1.78; text-wrap: pretty; }
.article-content > p,
.article-content > ul,
.article-content > ol,
.content-shell:not(.legal-shell) > .legacy-content > p,
.content-shell:not(.legal-shell) > .legacy-content > ul,
.content-shell:not(.legal-shell) > .legacy-content > ol { max-width: 790px; }
.legacy-content h2 { max-width: 940px; margin-top: 72px; font-size: clamp(2rem, 2.7vw, 3.2rem); }
.legacy-content h3 { max-width: 820px; }
.legacy-content blockquote { max-width: 900px; margin: 52px 0; padding: 26px 34px; background: #e7e4dc; border-left: 0; border-top: 3px solid var(--green); font-size: clamp(1.18rem, 1.65vw, 1.52rem); line-height: 1.5; }
.legacy-content .elementor,
.legacy-content .page-content { width: 100%; }
.legacy-content .elementor > .elementor-top-section,
.legacy-content .page-content > * { position: relative; }
.legacy-content .elementor > .elementor-top-section { counter-increment: editorial-block; margin: 0 0 clamp(52px, 7vw, 92px); }
.legacy-content .elementor { counter-reset: editorial-block; }
.article-content .elementor > .elementor-top-section:has(img),
.content-page:not(.legal-page) .legacy-content .elementor > .elementor-top-section:has(img),
.studio-content-page .legacy-content .elementor > .elementor-top-section:has(img),
.technique-source .legacy-content .elementor > .elementor-top-section:has(img) { padding: clamp(24px, 3vw, 42px); background: #e7e4dc; border-top: 1px solid var(--line-dark); }
.article-content .elementor > .elementor-top-section:has(img)::before,
.content-page:not(.legal-page) .legacy-content .elementor > .elementor-top-section:has(img)::before,
.studio-content-page .legacy-content .elementor > .elementor-top-section:has(img)::before,
.technique-source .legacy-content .elementor > .elementor-top-section:has(img)::before { position: absolute; right: 18px; top: 14px; content: counter(editorial-block, decimal-leading-zero); color: rgba(18,18,18,.34); font-size: .68rem; font-weight: 750; letter-spacing: .12em; }
.article-content .elementor > .elementor-top-section:has(img) > .elementor-container,
.content-page:not(.legal-page) .legacy-content .elementor > .elementor-top-section:has(img) > .elementor-container,
.studio-content-page .legacy-content .elementor > .elementor-top-section:has(img) > .elementor-container,
.technique-source .legacy-content .elementor > .elementor-top-section:has(img) > .elementor-container { display: grid; grid-template-columns: minmax(260px, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 58px); align-items: center; }
.article-content .elementor > .elementor-top-section:nth-child(even):has(img) .elementor-column:has(.elementor-widget-image),
.content-page:not(.legal-page) .legacy-content .elementor > .elementor-top-section:nth-child(even):has(img) .elementor-column:has(.elementor-widget-image),
.studio-content-page .legacy-content .elementor > .elementor-top-section:nth-child(even):has(img) .elementor-column:has(.elementor-widget-image) { order: 2; }
.legacy-content .elementor-column,
.legacy-content .elementor-widget-wrap { min-width: 0; }
.legacy-content .elementor-widget-image,
.legacy-content .legacy-media { display: grid; min-width: 0; min-height: 250px; place-items: center; overflow: hidden; background: #dcd8ce; }
.studio-page .legacy-content .elementor-widget-image,
.studio-page .legacy-content .legacy-media,
.studio-content-page .legacy-content .elementor-widget-image,
.studio-content-page .legacy-content .legacy-media { background: #eadde4; }
.legacy-content .elementor-widget-image img,
.content-page:not(.legal-page) .legacy-content .elementor-widget-image img,
.studio-content-page .legacy-content .elementor-widget-image img,
.technique-source .legacy-content .elementor-widget-image img,
.legacy-content .legacy-media img,
.legacy-content > figure img,
.legacy-content > .wp-block-image img { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: auto; margin: 0 auto; object-fit: contain; }
.legacy-content img.legacy-image-portrait { width: auto; max-width: 100%; max-height: 680px; }
.legacy-content img.is-low-resolution { width: auto !important; max-width: 100%; height: auto !important; aspect-ratio: auto !important; image-rendering: auto; }
.legacy-content .elementor-widget-image:has(img.is-low-resolution),
.legacy-content .legacy-media:has(img.is-low-resolution) { min-height: 310px; padding: 30px; background-image: radial-gradient(circle at 50% 45%, rgba(255,255,255,.75), transparent 64%); }
.legacy-content > figure,
.legacy-content > .wp-block-image { width: min(100%, 1040px); margin: 56px 0; }
.legacy-content > figure:nth-of-type(even),
.legacy-content > .wp-block-image:nth-of-type(even) { margin-left: auto; }
.legacy-content .page-content { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; gap: clamp(18px, 3vw, 38px); align-items: start; }
.legacy-content .page-content > .legacy-subheading:first-child { grid-column: 1 / -1; margin: 0 0 12px; color: var(--pink-dark); font-size: .72rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.legacy-content .page-content > .legacy-media { grid-column: 1 / 8; grid-row: span 2; min-height: 360px; margin: 0; }
.legacy-content .page-content > .legacy-media:nth-of-type(even) { grid-column: 6 / -1; }
.legacy-content .page-content > .legacy-subheading:not(:first-child) { align-self: end; margin: 0; padding-top: 24px; border-top: 2px solid var(--pink); font-size: clamp(1.35rem, 2vw, 2.05rem); }
.legacy-content .page-content > .legacy-subheading:nth-of-type(even) { grid-column: 8 / -1; }
.legacy-content .page-content > .legacy-subheading:nth-of-type(odd):not(:first-child) { grid-column: 1 / 6; }
.legacy-content .page-content > p { margin: 0 0 48px; color: #4d4d4d; }
.legacy-content .page-content > p:nth-of-type(odd) { grid-column: 8 / -1; }
.legacy-content .page-content > p:nth-of-type(even) { grid-column: 1 / 6; }
.legacy-content .comments-area,
.legacy-content .comment-respond { display: none; }
.studio-source { grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); width: min(100%, var(--container)); }
.studio-source .legacy-content { width: 100%; max-width: none; }
.editorial-reveal.is-reveal-ready { opacity: 1; transform: translateY(12px); transition: transform .55s cubic-bezier(.2,.72,.2,1); }
.editorial-reveal.is-reveal-ready.is-in-view { opacity: 1; transform: none; }

/* Las tarjetas laterales pasan al final: liberan ancho y mantienen la conversión. */
.article-layout > .author-card,
.content-shell:not(.legal-shell) > .call-card { position: static; grid-column: 2; width: 100%; max-width: none; margin-top: 8px; }
.content-shell:not(.legal-shell) > .call-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 30px; align-items: center; padding: 30px 34px; color: var(--paper); background: var(--ink); }
.content-shell:not(.legal-shell) > .call-card > p { margin: 0; font-size: clamp(1.25rem, 2vw, 1.8rem); }
.content-shell:not(.legal-shell) > .call-card > span { margin: 0; color: #aaa; }
.content-shell:not(.legal-shell) > .call-card .button { grid-column: 2; grid-row: 1 / span 2; width: auto; color: var(--green-bright); }
.studio-content-page .content-shell:not(.legal-shell) > .call-card .button { color: var(--pink); }
.article-layout > .author-card { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 3px 24px; align-items: center; padding: 24px 28px; }
.article-layout > .author-card > p { grid-column: 2; margin: 0; }
.article-layout > .author-card > p::after { display: none; }
.article-layout > .author-card img { grid-column: 1; grid-row: 1 / span 3; width: 92px; height: 92px; margin: 0; border-radius: 50%; }
.article-layout > .author-card strong,
.article-layout > .author-card > span { grid-column: 2; }
.article-layout > .author-card > a { grid-column: 3; grid-row: 1 / span 3; min-width: 180px; margin: 0; padding: 14px 0; }

/* Horario Studio: calendario vivo, filtrable y legible en cualquier pantalla. */
.studio-schedule { padding: clamp(70px, 8vw, 116px) max(var(--pad), calc((100% - var(--container)) / 2)); background: #ebe7e1; }
.schedule-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: clamp(34px, 7vw, 110px); align-items: end; margin-bottom: 46px; }
.schedule-intro h2 { max-width: 820px; margin: 0; font-size: clamp(2.4rem, 4.4vw, 5rem); line-height: .96; letter-spacing: -.055em; }
.schedule-intro > p { max-width: 560px; margin: 0; color: #555; }
.schedule-controls { position: sticky; z-index: 12; top: 76px; display: flex; justify-content: space-between; align-items: center; gap: 26px; margin: 0 0 24px; padding: 12px; color: var(--paper); background: rgba(13,13,13,.96); backdrop-filter: blur(12px); }
.schedule-day-filter { display: flex; flex-wrap: wrap; gap: 5px; }
.schedule-day-filter button { min-height: 42px; padding: 8px 13px; color: #aaa; background: transparent; border: 1px solid transparent; cursor: pointer; transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }
.schedule-day-filter button:hover,
.schedule-day-filter button:focus-visible { color: var(--paper); border-color: #555; }
.schedule-day-filter button.is-active { color: var(--ink); background: var(--pink); border-color: var(--pink); }
.schedule-type-filter { display: flex; align-items: center; gap: 12px; color: #999; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.schedule-type-filter select { min-height: 42px; padding: 8px 38px 8px 12px; color: var(--paper); background: #1b1b1b; border: 1px solid #444; font: inherit; font-size: .8rem; text-transform: none; }
.schedule-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; align-items: start; }
.schedule-board { min-width: 0; background: #f5f3ef; border: 1px solid rgba(18,18,18,.16); box-shadow: 0 26px 70px rgba(56,42,49,.1); }

.schedule-head-row,
.schedule-time-row { display: grid; grid-template-columns: 74px repeat(5, minmax(0, 1fr)); }
.schedule-head-row { position: sticky; z-index: 2; top: 142px; color: var(--paper); background: var(--ink); }
.schedule-head-row > * { min-height: 62px; display: flex; align-items: center; padding: 12px 14px; border-right: 1px solid #353535; }
.schedule-head-row strong { position: relative; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.schedule-head-row strong.is-today::after { width: 7px; height: 7px; margin-left: 9px; content: ""; background: var(--pink); border-radius: 50%; }
.schedule-time-row > time { display: flex; align-items: flex-start; justify-content: center; min-height: 112px; padding-top: 18px; color: #555; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); font-size: .82rem; font-variant-numeric: tabular-nums; }
.schedule-cell { min-width: 0; min-height: 112px; padding: 7px; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.schedule-event { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 96px; padding: 12px 28px 12px 12px; color: var(--ink); background: #ddd; border: 0; cursor: pointer; text-align: left; transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; }
.schedule-event:hover,
.schedule-event:focus-visible { z-index: 1; transform: translateY(-3px) rotate(-.5deg); box-shadow: 0 13px 28px rgba(18,18,18,.15); filter: saturate(1.08); }

.schedule-event small { margin-bottom: 6px; font-size: .6rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.schedule-event strong { font-size: .78rem; line-height: 1.15; }
.schedule-event > b { position: absolute; right: 10px; top: 9px; font-size: .9rem; font-weight: 500; }
.schedule-event-day { display: none; }


.schedule-detail { position: sticky; top: 156px; min-height: 330px; padding: 30px; color: var(--paper); background: var(--ink); border-top: 4px solid var(--pink); }
.schedule-detail > span { display: block; margin-bottom: 22px; color: var(--pink); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.schedule-detail h3 { margin: 0 0 16px; font-size: clamp(1.65rem, 2.3vw, 2.35rem); line-height: 1; letter-spacing: -.045em; }
.schedule-detail > p:not(.label) { margin: 0 0 30px; color: #bdbdbd; font-size: .9rem; }
.schedule-detail .button { width: 100%; }
.schedule-status { margin: 16px 0 0; color: #666; font-size: .8rem; }
.schedule-note { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(42px, 8vw, 120px); padding: 76px max(var(--pad), calc((100% - var(--container)) / 2)); }
.schedule-note h2 { max-width: 700px; margin: 0; font-size: clamp(2.2rem, 3.6vw, 4.2rem); line-height: 1; letter-spacing: -.05em; }
.schedule-note > div:last-child { align-self: end; }
.schedule-note > div:last-child p { max-width: 620px; color: #aaa; }

/* Firma cromática del slideshow: tres trazos que se dibujan en cada cambio. */
.hero-chroma { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero-chroma-pass { --chroma-delay: 0s; transform-box: view-box; transform-origin: center; }
.hero-chroma-pass-1 { transform: translateY(-160px); }
.hero-chroma-pass-2 { --chroma-delay: 1.42s; transform: translateY(-55px); }
.hero-chroma-pass-3 { --chroma-delay: 2.84s; transform: translateY(55px); }
.hero-chroma-pass-4 { --chroma-delay: 4.26s; transform: translateY(160px); }
.hero-chroma path { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; vector-effect: non-scaling-stroke; }
.hero-chroma-green { stroke: var(--green-bright); stroke-width: 2.4; }
.hero-chroma-white { stroke: #fff; stroke-width: 1.4; }
.hero-chroma-pink { stroke: var(--pink); stroke-width: 2.4; }
.hero-chroma circle { opacity: 0; transform-box: fill-box; transform-origin: center; }
.hero-chroma-node-green { fill: var(--green-bright); }
.hero-chroma-node-white { fill: #fff; }
.hero-chroma-node-pink { fill: var(--pink); }


@keyframes hero-chroma-trace { 0% { stroke-dashoffset: 1; opacity: 0; } 16% { opacity: .4; } 64% { stroke-dashoffset: 0; opacity: .3; } 100% { stroke-dashoffset: -.55; opacity: 0; } }
@keyframes hero-chroma-pulse { 0% { opacity: 0; transform: scale(.35); } 48% { opacity: .34; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }

/* Cierre del pie: copyright y crédito juntos; menú legal en la segunda zona. */
.footer-bottom { align-items: center; gap: 28px; }
.footer-bottom-primary { display: flex; align-items: center; gap: 12px; }
.footer-copy { color: #d7d7d7; font-weight: 750; }
.footer-copy span { color: var(--green-bright); }
.footer-bottom .footer-credit { flex: 0 0 auto; }
.footer-bottom .footer-legal { display: flex !important; grid-column: auto; align-items: center; justify-content: flex-end; gap: clamp(13px, 2vw, 26px); margin-left: auto; }
.footer-bottom .footer-legal a,
.footer-bottom .footer-legal button { width: fit-content; margin: 0; color: #858585; font-size: .75rem; white-space: nowrap; }
.footer-bottom .footer-legal a:hover,
.footer-bottom .footer-legal button:hover,
.footer-bottom .footer-legal a:focus-visible,
.footer-bottom .footer-legal button:focus-visible { color: var(--green-bright); }

@media (max-width: 1180px) {
  .article-layout,
  .content-shell:not(.legal-shell) { grid-template-columns: minmax(150px, 180px) minmax(0, 1fr); }
  .legacy-content .page-content > .legacy-media { min-height: 300px; }
  .schedule-layout { grid-template-columns: 1fr; }
  .schedule-detail { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; gap: 4px 28px; }
  .schedule-detail .label,
  .schedule-detail > span,
  .schedule-detail h3,
  .schedule-detail > p:not(.label) { grid-column: 1; }
  .schedule-detail .button { grid-column: 2; grid-row: 1 / span 4; align-self: center; width: auto; }
  .footer-bottom { align-items: flex-start; }
  .footer-bottom .footer-legal { flex-wrap: wrap; }
}

@media (max-width: 760px) {
  .article-layout,
  .content-shell:not(.legal-shell) { display: block; width: calc(100% - 40px); padding-top: 48px; }
  .article-toc,
  .page-toc { position: static; margin-bottom: 42px; padding: 0 0 22px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .article-content .elementor > .elementor-top-section:has(img),
  .content-page:not(.legal-page) .legacy-content .elementor > .elementor-top-section:has(img),
  .studio-content-page .legacy-content .elementor > .elementor-top-section:has(img),
  .technique-source .legacy-content .elementor > .elementor-top-section:has(img) { padding: 18px; }
  .article-content .elementor > .elementor-top-section:has(img) > .elementor-container,
  .content-page:not(.legal-page) .legacy-content .elementor > .elementor-top-section:has(img) > .elementor-container,
  .studio-content-page .legacy-content .elementor > .elementor-top-section:has(img) > .elementor-container,
  .technique-source .legacy-content .elementor > .elementor-top-section:has(img) > .elementor-container { grid-template-columns: 1fr; gap: 24px; }
  .article-content .elementor > .elementor-top-section:nth-child(even):has(img) .elementor-column:has(.elementor-widget-image),
  .content-page:not(.legal-page) .legacy-content .elementor > .elementor-top-section:nth-child(even):has(img) .elementor-column:has(.elementor-widget-image),
  .studio-content-page .legacy-content .elementor > .elementor-top-section:nth-child(even):has(img) .elementor-column:has(.elementor-widget-image) { order: 0; }
  .legacy-content .page-content { display: block; }
  .legacy-content .page-content > .legacy-media { min-height: 260px; margin: 0 0 24px; }
  .legacy-content .page-content > .legacy-subheading:not(:first-child) { margin: 0 0 14px; }
  .legacy-content .page-content > p { margin-bottom: 58px; }
  .content-shell:not(.legal-shell) > .call-card { grid-template-columns: 1fr; margin-top: 48px; }
  .content-shell:not(.legal-shell) > .call-card .button { grid-column: 1; grid-row: auto; width: 100%; }
  .article-layout > .author-card { grid-template-columns: 72px 1fr; margin-top: 48px; }
  .article-layout > .author-card img { width: 72px; height: 72px; }
  .article-layout > .author-card > a { grid-column: 1 / -1; grid-row: auto; margin-top: 14px; }
  .studio-source { grid-template-columns: 1fr; }
  .schedule-intro,
  .schedule-note { grid-template-columns: 1fr; }
  .schedule-controls { position: static; display: grid; }
  .schedule-day-filter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .schedule-day-filter button { padding: 7px 5px; font-size: .72rem; }
  .schedule-type-filter { justify-content: space-between; }
  .schedule-type-filter select { flex: 1; min-width: 0; }
  .schedule-board { border: 0; box-shadow: none; }
  .schedule-grid { min-width: 0; }
  .schedule-head-row { display: none; }
  .schedule-time-row { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 8px; margin-bottom: 12px; }
  .schedule-time-row > time { grid-column: 1; grid-row: 1 / span 5; justify-content: flex-start; min-height: 0; padding: 12px 0; border: 0; font-weight: 700; }
  .schedule-cell { grid-column: 2; min-height: 0; padding: 0; border: 0; }
  .schedule-cell:empty { display: none; }
  .schedule-event { min-height: 92px; }
  .schedule-event-day { display: block; margin-bottom: 4px; font-size: .64rem; font-weight: 750; text-transform: uppercase; opacity: .72; }
  .schedule-detail { display: block; margin-top: 24px; }
  .schedule-detail .button { width: 100%; }
  .hero-chroma path { stroke-width: 3; }
  .footer-bottom { position: static; display: grid; margin: 32px var(--pad) 0; padding-top: 22px; }
  .site-footer { padding-bottom: 84px; }
  .footer-bottom-primary { flex-wrap: wrap; }
  .footer-bottom .footer-legal { justify-content: flex-start; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-reveal.is-reveal-ready { opacity: 1; transform: none; transition: none; }
  .hero-chroma { display: none; }
  .hero-tabs button.is-active::before { animation: none; transform: scaleX(1); }
  .team-orbit-core::before, .team-orbit-nodes i { animation: none; }
  .schedule-event { transition: none; }
}

/* Ajuste final de cabecera: firmas mayores y navegación propia de Studio. */
.brand { flex-basis: 164px; width: 164px; height: 46px; }

.main-nav-studio li > a { position: relative; font-size: clamp(.67rem, .71vw, .76rem); white-space: nowrap; }
.main-nav-studio > ul > li > a::after { position: absolute; right: 0; bottom: 6px; left: 0; height: 2px; content: ""; background: var(--pink); transform: scaleX(0); transform-origin: right; transition: transform .24s ease; }
.main-nav-studio > ul > li > a:hover::after,
.main-nav-studio > ul > li > a:focus-visible::after,
.main-nav-studio > ul > li > a.is-active::after { transform: scaleX(1); transform-origin: left; }
.main-nav-studio li > a.is-active { color: var(--pink); }
.main-nav-studio .nav-search b { color: var(--pink); }
.is-studio-header { border-bottom-color: rgba(236,25,134,.38); }

/* El filtro de día convierte la cuadrícula semanal en una agenda amplia. */
.studio-schedule[data-schedule-view="day"] .schedule-head-row,
.studio-schedule[data-schedule-view="day"] .schedule-time-row { grid-template-columns: 74px minmax(0, 1fr); }

.editorial-reveal.is-reveal-ready { transition-delay: var(--reveal-delay, 0ms); }

/* Eslogan editorial y contacto completo de cada marca. */
.footer-brand blockquote { position: relative; max-width: 29ch; margin: 5px 0 0; padding: 6px 0 3px 24px; border-left: 1px solid rgba(255,255,255,.25); }
.footer-brand blockquote::before { position: absolute; left: 8px; top: -7px; color: var(--green-bright); content: "“"; font-family: Georgia,serif; font-size: 2.15rem; line-height: 1; }
.footer-brand blockquote p { margin: 0; color: #b5b5b5; font-family: Georgia,serif; font-size: clamp(1rem,1.05vw,1.12rem); font-style: italic; line-height: 1.6; }
/* 10-09-2026 — Peticion de Juan: el numero de registro sanitario sale de la barra
   inferior del pie (donde iba pegado al copyright, junto a direccion y horario) y
   pasa aqui, debajo de la cita de marca y separado de ella. La direccion y el
   horario siguen en /contacto/ y en el JSON-LD MedicalClinic. */
.footer-brand .footer-nica { margin: 26px 0 0; padding: 0; color: #8b8b8b; font-family: var(--font); font-size: .78rem; font-style: normal; letter-spacing: .04em; }
/* 10-09-2026 — Puente hasta que se lance el build. El generador ya no escribe el
   <p class="footer-hours"> de la barra del copyright, pero el HTML que hay en
   disco es del build anterior y aun lo lleva. Sin esta regla esa linea se sigue
   viendo, y ademas sin separadores, porque sus estilos ya se retiraron.
   Se puede borrar en cuanto el build regenere las paginas. */
.footer-hours { display: none !important; }
.footer-brand-contact { display: grid; gap: 8px; margin-top: 19px; padding-top: 17px; border-top: 1px solid #292929; }
.footer-brand-contact > a { display: flex; width: fit-content; align-items: center; gap: 9px; color: #b7b7b7; font-size: .78rem; transition: color .2s ease, transform .2s ease; }
.footer-brand-contact > a:hover,
.footer-brand-contact > a:focus-visible { transform: translateX(3px); }
.footer-clinic-contact > a:hover,
.footer-clinic-contact > a:focus-visible { color: var(--green-bright); }
.footer-studio-contact > a:hover,
.footer-studio-contact > a:focus-visible { color: var(--pink); }
.footer-brand-contact > a svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer-clinic-contact > a svg { color: var(--green-bright); }
.footer-studio-contact > a svg { color: var(--pink); }
.footer-socials { display: flex; gap: 8px; margin-top: 5px; }
.footer-socials a { display: grid; width: 34px; height: 34px; place-items: center; color: var(--pink); border: 1px solid rgba(236,25,134,.6); border-radius: 50%; transition: color .2s ease, background .2s ease, transform .2s ease; }
.footer-socials a:hover,
.footer-socials a:focus-visible { color: var(--ink); background: var(--pink); transform: translateY(-2px); }
.footer-socials svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.footer-socials a:last-child svg { fill: currentColor; stroke: none; }
.footer-clinic-socials a { color: var(--green-bright); border-color: rgba(151,202,27,.62); }
.footer-clinic-socials a:hover,
.footer-clinic-socials a:focus-visible { color: var(--ink); background: var(--green-bright); }

@media (max-width: 1180px) {
  .brand { flex-basis: 140px; width: 140px; height: 39px; }
  .main-nav-studio > ul { gap: 7px; }
  .main-nav-studio li > a { font-size: .65rem; }
}

@media (max-width: 1050px) {
  .main-nav-studio li > a { font-size: .95rem; white-space: normal; }
  .main-nav-studio > ul > li > a::after { display: none; }
  .main-nav-studio li > a:hover,
  .main-nav-studio li > a:focus-visible { color: var(--pink); }
}

@media (max-width: 760px) {
  .brand { flex-basis: 112px; width: 112px; height: 31px; }
  .studio-schedule[data-schedule-view="day"] .schedule-time-row { grid-template-columns: 60px minmax(0, 1fr); }
}

@media (max-width: 390px) {
  .brand { flex-basis: 96px; width: 96px; height: 27px; }
}

/* Studio: módulo de método curado, sin la retícula heredada que solapaba textos. */
.studio-method { padding: clamp(76px, 8vw, 118px) max(var(--pad), calc((100% - var(--container)) / 2)); background: #e9e5df; }
.studio-method > header { display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) minmax(280px, .62fr); gap: clamp(28px, 5vw, 76px); align-items: end; margin-bottom: 42px; }
.studio-method > header h2 { max-width: 850px; margin: 0; font-size: clamp(2.35rem, 3.8vw, 4.45rem); line-height: .98; letter-spacing: -.052em; }
.studio-method > header > p { max-width: 420px; margin: 0; color: #555; }
.studio-method-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(265px, 1fr)); height: min(660px, 58vw); min-height: 560px; gap: 3px; background: #161616; }
.studio-method-card { position: relative; min-width: 0; overflow: hidden; color: var(--paper); background: #111; }
.studio-method-card-1 { grid-column: 1 / 7; grid-row: 1 / 3; }
.studio-method-card-2 { grid-column: 7 / -1; grid-row: 1; }
.studio-method-card-3 { grid-column: 7 / -1; grid-row: 2; }
.studio-method-card::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 28%, rgba(0,0,0,.84) 100%); }
.studio-method-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.03); transition: transform .55s cubic-bezier(.2,.72,.2,1), filter .35s ease; }
.studio-method-card-1 img { object-position: 64% center; }
.studio-method-card > span { position: absolute; z-index: 2; right: clamp(22px, 3vw, 42px); bottom: clamp(22px, 3vw, 40px); left: clamp(22px, 3vw, 42px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.studio-method-card small { grid-column: 1 / -1; margin-bottom: 8px; color: var(--pink); font-size: .69rem; font-style: normal; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.studio-method-card strong { display: block; font-size: clamp(1.55rem, 2.4vw, 3rem); line-height: 1; letter-spacing: -.045em; }
.studio-method-card em { grid-column: 1; max-width: 470px; margin-top: 10px; color: #d0d0d0; font-size: .82rem; font-style: normal; }
.studio-method-card b { grid-column: 2; grid-row: 2 / span 2; align-self: end; color: var(--pink); font-size: 1.8rem; font-weight: 400; transition: transform .25s ease; }
.studio-method-card:hover img,
.studio-method-card:focus-visible img { transform: scale(1.025); filter: saturate(.98) contrast(1.04); }
.studio-method-card:hover b,
.studio-method-card:focus-visible b { transform: translate(4px,-4px); }
.studio-method-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-dark); border-top: 0; }
.studio-method-quick a { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border-right: 1px solid var(--line-dark); transition: color .22s ease, background .22s ease; }
.studio-method-quick a:last-child { border-right: 0; }
.studio-method-quick a b { color: var(--pink-dark); font-weight: 500; transition: transform .22s ease; }
.studio-method-quick a:hover,
.studio-method-quick a:focus-visible { color: var(--paper); background: var(--ink); }
.studio-method-quick a:hover b,
.studio-method-quick a:focus-visible b { color: var(--pink); transform: translate(3px,-3px); }
.studio-method-quick .is-all { color: var(--paper); background: var(--pink-dark); }
.studio-method-quick .is-all b { color: inherit; }

/* El texto completo se conserva, pero queda en un archivo editorial desplegable y legible. */
.studio-legacy-archive { width: min(calc(100% - (var(--pad) * 2)), var(--container)); margin: 0 auto; padding: 34px 0 76px; border-bottom: 1px solid var(--line-dark); }
.studio-legacy-archive > summary { display: grid; grid-template-columns: minmax(190px, .5fr) minmax(0, 1fr) auto; gap: 26px; align-items: center; min-height: 86px; padding: 0 24px; border: 1px solid var(--line-dark); cursor: pointer; list-style: none; }
.studio-legacy-archive > summary::-webkit-details-marker { display: none; }
.studio-legacy-archive > summary span { color: var(--pink-dark); font-size: .69rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.studio-legacy-archive > summary strong { font-size: clamp(1.05rem, 1.6vw, 1.35rem); }
.studio-legacy-archive > summary b { color: var(--pink-dark); font-size: 1.8rem; font-weight: 400; transition: transform .25s ease; }
.studio-legacy-archive[open] > summary b { transform: rotate(45deg); }
.studio-legacy-archive > .legacy-content { padding: clamp(38px, 6vw, 78px); background: #fff; border: 1px solid var(--line-dark); border-top: 0; }
.studio-legacy-archive .legacy-content .page-content { display: block !important; }
.studio-legacy-archive .legacy-content .page-content > * { width: min(100%, 900px) !important; margin: 0 auto 28px !important; }
.studio-legacy-archive .legacy-content .page-content > h3 { padding-top: 30px; color: var(--pink-dark); border-top: 1px solid var(--line-dark); font-size: clamp(1.5rem, 2.4vw, 2.3rem); line-height: 1; }
.studio-legacy-archive .legacy-content .page-content img { width: auto; max-width: 100%; height: auto; margin: auto; }

/* Cierre de Studio: dos decisiones claras y contacto directo, sin vacío decorativo. */
.studio-start { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(500px, 1.35fr) minmax(210px, .5fr); gap: clamp(30px, 4vw, 66px); padding: clamp(66px, 7vw, 100px) max(var(--pad), calc((100% - var(--container)) / 2)); border-top: 3px solid var(--pink); }
.studio-start h2 { max-width: 560px; margin: 0 0 18px; font-size: clamp(2.2rem, 3.3vw, 3.9rem); line-height: .98; letter-spacing: -.05em; }
.studio-start header > p:last-child { max-width: 420px; margin: 0; color: #aaa; }
.studio-start-options { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; align-self: stretch; background: #3a3a3a; }
.studio-start-options > a { position: relative; display: flex; min-height: 250px; flex-direction: column; justify-content: flex-end; padding: 30px; background: #151515; transition: background .25s ease, transform .25s ease; }
.studio-start-options small { margin-bottom: auto; color: var(--pink); font-size: .68rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.studio-start-options strong { max-width: 260px; font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.03; }
.studio-start-options span { display: block; max-width: 300px; margin-top: 14px; color: #999; font-size: .82rem; }
.studio-start-options b { position: absolute; top: 28px; right: 28px; color: var(--pink); font-size: 1.45rem; font-weight: 400; transition: transform .22s ease; }
.studio-start-options > a:hover,
.studio-start-options > a:focus-visible { background: #20161c; transform: translateY(-3px); }
.studio-start-options > a:hover b,
.studio-start-options > a:focus-visible b { transform: translate(4px,-4px); }
.studio-start aside { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding-left: 28px; border-left: 1px solid #333; }
.studio-start aside > span { margin-bottom: 16px; color: #777; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.studio-start aside > a:not(.button) { margin: 5px 0; color: #ccc; font-size: .82rem; }
.studio-start aside > a:not(.button):hover { color: var(--pink); }
.studio-start aside .button { width: 100%; margin-top: 24px; }

/* Las páginas interiores de Studio ocupan el ancho correcto y cierran con la CTA, nunca al inicio. */
.studio-content-page .content-shell:not(.legal-shell) { grid-template-columns: minmax(0, 1fr); width: min(calc(100% - (var(--pad) * 2)), 1180px); }
.studio-content-page .content-shell:not(.legal-shell) > .legacy-content { grid-column: 1; width: 100%; max-width: none; }
.studio-content-page .content-shell:not(.legal-shell) > .call-card { grid-column: 1; order: 3; margin-top: 58px; }
.studio-content-page .legacy-content .page-content { display: block !important; }
.studio-content-page .legacy-content .page-content > * { width: min(100%, 920px) !important; margin-right: auto !important; margin-left: auto !important; }
.studio-content-page .legacy-content .page-content > h3 { margin-top: 62px !important; margin-bottom: 18px !important; padding: 22px 0 0 24px; color: var(--ink); border-top: 1px solid var(--line-dark); border-left: 3px solid var(--pink); font-size: clamp(1.55rem, 2.8vw, 2.75rem); line-height: 1; letter-spacing: -.04em; }
.studio-content-page .legacy-content .page-content > h3:nth-of-type(even) { padding-right: 24px; padding-left: 0; border-right: 3px solid var(--pink); border-left: 0; text-align: right; }
.studio-content-page .legacy-content .page-content > p { margin-bottom: 34px !important; color: #444; font-size: 1.02rem; line-height: 1.72; }
.studio-content-page .legacy-content .page-content > .legacy-media,
.studio-content-page .legacy-content .page-content > p:has(img) { width: min(100%, 1120px) !important; margin-top: 48px !important; margin-bottom: 54px !important; padding: clamp(18px, 3vw, 34px); background: #e7e2df; }
.studio-content-page .legacy-content .page-content img { width: auto; max-width: 100%; height: auto; margin: auto; object-fit: contain; }

/* Submenú de disciplinas dentro de la navegación propia de Studio. */
.main-nav-studio li > a { font-size: .74rem; }
.main-nav-studio .studio-disciplines-menu .nav-parent > a { position: relative; }
.main-nav-studio .studio-disciplines-menu .nav-parent > a::after { position: absolute; right: 0; bottom: 6px; left: 0; height: 2px; content: ""; background: var(--pink); transform: scaleX(0); transform-origin: right; transition: transform .24s ease; }
.main-nav-studio .studio-disciplines-menu:hover .nav-parent > a::after,
.main-nav-studio .studio-disciplines-menu:focus-within .nav-parent > a::after,
.main-nav-studio .studio-disciplines-menu .nav-parent > a.is-active::after { transform: scaleX(1); transform-origin: left; }
.main-nav-studio .studio-disciplines-menu .submenu-toggle { color: var(--pink); }
.studio-discipline-submenu { left: 50%; width: min(830px, calc(100vw - 40px)); transform: translate(-46%,-8px); }
.has-submenu:hover .studio-discipline-submenu,
.has-submenu:focus-within .studio-discipline-submenu,
.has-submenu.is-open .studio-discipline-submenu { transform: translate(-46%,0); }
.studio-discipline-submenu .submenu-studio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.is-studio-header .studio-discipline-submenu p { color: var(--pink); }
.is-studio-header .studio-discipline-submenu a:hover,
.is-studio-header .studio-discipline-submenu a:focus-visible,
.is-studio-header .studio-discipline-submenu a[aria-current="page"] { color: var(--paper); background: rgba(236,25,134,.14); }

@media (max-width: 1050px) {
  .studio-method > header { grid-template-columns: 150px minmax(0, 1fr); }
  .studio-method > header > p { grid-column: 2; }
  .studio-start { grid-template-columns: 1fr; }
  .studio-start-options { grid-template-columns: 1fr 1fr; }
  .studio-start aside { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 22px; align-items: center; padding: 26px 0 0; border-top: 1px solid #333; border-left: 0; }
  .studio-start aside > span { grid-column: 1 / -1; margin: 0; }
  .studio-start aside .button { grid-column: 3; grid-row: 2 / span 2; width: auto; margin: 0; }
  .studio-discipline-submenu,
  .has-submenu:hover .studio-discipline-submenu,
  .has-submenu:focus-within .studio-discipline-submenu,
  .has-submenu.is-open .studio-discipline-submenu { left: auto; width: 100%; transform: none; }
  .studio-discipline-submenu .submenu-studio-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .studio-method { padding-right: 20px; padding-left: 20px; }
  .studio-method > header { display: block; }
  .studio-method > header .section-kicker { margin-bottom: 32px; }
  .studio-method > header > p { margin-top: 20px; }
  .studio-method-grid { display: grid; height: auto; min-height: 0; grid-template-columns: 1fr; grid-template-rows: none; gap: 3px; }
  .studio-method-card-1,
  .studio-method-card-2,
  .studio-method-card-3 { grid-column: 1; grid-row: auto; min-height: 330px; }
  .studio-method-card > span { right: 22px; bottom: 22px; left: 22px; }
  .studio-method-card strong { font-size: 1.7rem; }
  .studio-method-quick { grid-template-columns: 1fr; }
  .studio-method-quick a { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .studio-legacy-archive { width: calc(100% - 40px); }
  .studio-legacy-archive > summary { display: flex; min-height: 0; flex-wrap: wrap; padding: 20px; }
  .studio-legacy-archive > summary b { margin-left: auto; }
  .studio-legacy-archive > .legacy-content { padding: 26px 20px; }
  .studio-start-options { grid-template-columns: 1fr; }
  .studio-start-options > a { min-height: 220px; }
  .studio-start aside { display: flex; align-items: flex-start; }
  .studio-start aside .button { width: 100%; margin-top: 20px; }
  .studio-content-page .content-shell:not(.legal-shell) { width: calc(100% - 40px); }
  .studio-content-page .legacy-content .page-content > h3,
  .studio-content-page .legacy-content .page-content > h3:nth-of-type(even) { margin-top: 44px !important; padding: 18px 0 0 18px; border-right: 0; border-left: 3px solid var(--pink); text-align: left; }
}

@media (max-width: 560px) {
  .site-footer { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .footer-brand { grid-column: 1; }
  .footer-brand-contact > a { max-width: 100%; min-width: 0; }
  .footer-brand-contact > a span { min-width: 0; overflow-wrap: anywhere; }
  .footer-bottom { grid-column: 1; margin-right: 0; margin-left: 0; }
}

/* Iteracion 34: cabecera por universos, contacto directo y composiciones vivas. */
.site-header,
.site-header.is-compact { height: auto; }

.contact-rail-inner { display: flex; width: min(100%, var(--container)); height: 100%; align-items: center; justify-content: flex-end; gap: clamp(18px, 2.2vw, 38px); margin: auto; padding: 0 var(--pad); }
.contact-space { display: flex; min-width: 0; align-items: center; gap: 10px; }
.contact-space > strong { color: #858585; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.contact-space-studio { padding-left: clamp(18px, 2.2vw, 38px); border-left: 1px solid rgba(255,255,255,.12); }
.contact-space-actions { display: inline-flex; align-items: center; gap: 2px; }
.contact-space-number { color: #dedede; font-size: .72rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.contact-rail-action { display: inline-flex; width: 28px; min-height: 28px; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: 50%; transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease; }
.contact-rail-action .contact-card-icon { width: 17px; height: 17px; color: currentColor; background: none; border-radius: 0; }
.contact-rail-action .contact-card-icon svg { width: 14px; height: 14px; }


.contact-space-clinic .contact-rail-action:hover,
.contact-space-clinic .contact-rail-action:focus-visible { color: var(--green-bright); background: rgba(168,210,27,.09); border-color: currentColor; transform: translateY(-1px); }
.contact-space-studio .contact-rail-action:hover,
.contact-space-studio .contact-rail-action:focus-visible { color: var(--pink); background: rgba(236,25,134,.09); border-color: currentColor; transform: translateY(-1px); }
.contact-rail-action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.header-inner { height: 98px; gap: clamp(14px, 1.45vw, 24px); transition: height .25s ease; }
.site-header.is-compact .header-inner { height: 78px; }
.header-inner .brand.brand-primary { flex: 0 0 auto; width: auto; overflow: hidden; }
.brand-primary-clinic { width: 230px !important; height: 62px !important; }
.brand-primary-studio { width: 220px !important; height: 64px !important; }
.brand-primary-clinic img { object-fit: contain; }
.brand-primary-studio img { object-fit: cover; object-position: center; }
.universe-switch { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 28px 64px; width: 204px; min-width: 204px; min-height: 98px; align-content: center; gap: 0; margin-left: clamp(16px, 1.7vw, 30px); margin-right: auto; padding: 2px 12px 2px 16px; overflow: hidden; background: #080808; border: 1px solid #373737; transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.universe-switch::before { position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; content: ""; background: currentColor; }
.universe-switch-logo { grid-column: 1; grid-row: 2; display: block; width: 100%; max-width: 100%; min-width: 0; height: 64px; background: transparent; object-fit: contain; object-position: left center; }
.universe-switch-studio .universe-switch-logo { object-fit: contain; object-position: left center; mix-blend-mode: screen; }
.universe-switch b { grid-column: 1; grid-row: 1; display: grid; width: 28px; height: 28px; place-items: center; align-self: center; justify-self: end; color: currentColor; border: 1px solid currentColor; border-radius: 50%; font-size: 1.16rem; font-weight: 750; line-height: 1; transition: color .22s ease, background-color .22s ease, transform .22s ease; }
.universe-switch-studio { color: var(--pink); }
.universe-switch-clinic { color: var(--green-bright); }
.universe-switch:hover,
.universe-switch:focus-visible { background: #0b0b0b; border-color: currentColor; box-shadow: 0 0 0 1px currentColor inset, 0 12px 28px rgba(0,0,0,.32); transform: translateY(-2px); }
.universe-switch:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.universe-switch:active { box-shadow: 0 0 0 1px currentColor inset, 0 6px 16px rgba(0,0,0,.24); transform: translateY(0) scale(.985); }

.universe-switch-studio:hover b,
.universe-switch-studio:focus-visible b { color: #080808; background: var(--pink); border-color: var(--pink); }
.universe-switch-clinic:hover b,
.universe-switch-clinic:focus-visible b { color: #080808; background: var(--green-bright); border-color: var(--green-bright); }
@media (min-width: 1051px) {
  .site-header.is-compact .header-inner { height: 86px; }
  .site-header.is-compact .universe-switch { grid-template-rows: 22px 56px; width: 180px; min-width: 180px; min-height: 84px; padding: 2px 10px 2px 13px; }
  .site-header.is-compact .universe-switch-logo { height: 56px; }
  .site-header.is-compact .universe-switch b { width: 22px; height: 22px; font-size: .94rem; }
}
.main-nav > ul { gap: clamp(11px, 1vw, 20px); }
.main-nav li > a,
.nav-parent > a { font-size: clamp(.82rem, .86vw, .94rem); }
.main-nav-studio > ul { gap: clamp(7px, .72vw, 14px); }
.main-nav-studio li > a,
.main-nav-studio .nav-parent > a { font-size: clamp(.76rem, .78vw, .84rem); }
.hero,
.hero-slides,
.hero-slide { height: min(820px, calc(100svh - 130px)); }
.topic-nav { top: 114px; }

/* WhatsApp conserva la accion real, pero adopta la identidad del espacio actual. */
.whatsapp-button { width: 62px; height: 62px; color: #102006; background: var(--green-bright); }
.is-studio-tools .whatsapp-button { color: #fff; background: var(--pink-dark); }
.whatsapp-button:hover,
.whatsapp-button:focus-visible { width: 242px; }
.whatsapp-button svg { flex-basis: 62px; width: 62px; height: 62px; padding: 16px; }
.whatsapp-label { display: grid; max-width: 0; padding-left: 0; line-height: 1.1; }
.whatsapp-label small { margin-bottom: 3px; font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.whatsapp-label strong { font-size: .9rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.whatsapp-button:hover .whatsapp-label,
.whatsapp-button:focus-visible .whatsapp-label { max-width: 168px; }

/* Metodo Salux: informacion completa alrededor de un nucleo comun. */
.method-section { row-gap: clamp(20px, 2.2vw, 32px); }
.method-copy .lead { max-width: 760px; margin-bottom: 0; }
.method-orbit { grid-column: 1 / -1; margin-top: 0; }


/* Circunferencia punteada exterior. Trazo mas marcado y punto mas denso: a
   .22 de opacidad y 1 px se veia como una linea sucia, no como un punteado. */
.method-orbit-guide { fill: none; stroke: rgba(77,108,0,.5); stroke-width: 1.6; stroke-dasharray: 2.5 9; stroke-linecap: round; transform-box: view-box; transform-origin: 550px 380px; }
.method-orbit-track { fill: none; stroke: rgba(18,18,18,.2); stroke-width: 1.2; transform-box: view-box; transform-origin: 550px 380px; }
.method-orbit-traveller { fill: var(--green-dark); transform-box: view-box; transform-origin: 550px 380px; animation: method-orbit-travel 16s linear infinite; }
.method-orbit-traveller-b { fill: var(--pink-dark); animation-direction: reverse; animation-duration: 21s; }
@keyframes method-orbit-travel { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .method-orbit-guide { animation: method-orbit-travel 150s linear infinite; }
}
.method-orbit-core { position: absolute; z-index: 2; left: 50%; top: 50%; display: flex; width: 232px; height: 232px; flex-direction: column; align-items: center; justify-content: center; padding: 30px; color: var(--paper); background: var(--ink); border-radius: 50%; box-shadow: 0 28px 70px rgba(52,49,40,.2); text-align: center; transform: translate(-50%,-50%); }
.method-orbit-core::before { position: absolute; inset: -14px; content: ""; border: 1px dashed rgba(77,108,0,.48); border-radius: 50%; animation: method-core-spin 24s linear infinite; }
@keyframes method-core-spin { to { transform: rotate(-360deg); } }

.method-orbit-core span { color: var(--green-bright); font-size: .64rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.method-orbit-core strong { margin: 5px 0 7px; font-size: 2rem; line-height: 1; letter-spacing: -.05em; }

.method-orbit-list { margin: 0; padding: 0; list-style: none; }
.method-orbit-node { position: absolute; z-index: 3; width: min(27%, 340px); }
.method-orbit-node::before { position: absolute; z-index: -1; content: ""; background: rgba(77,108,0,.3); }
.method-orbit-node article { position: relative; min-height: 0; padding: 18px 4px 0 20px; background: transparent; border-top: 1px solid rgba(77,108,0,.56); box-shadow: none; transition: transform .3s cubic-bezier(.2,.72,.2,1); }
.method-orbit-node article::before { position: absolute; left: 0; top: -2px; width: 42px; height: 3px; content: ""; background: var(--green-dark); }


.method-orbit-node-1 { left: 0; top: 34px; }
.method-orbit-node-1::before,
.method-orbit-node-4::before { left: 100%; top: 21px; width: 28px; height: 1px; }
.method-orbit-node-1 article::after,
.method-orbit-node-4 article::after { right: -34px; top: 17px; background: var(--pink-dark); box-shadow: 0 0 0 5px rgba(236,25,134,.1); }
.method-orbit-node-2 { right: 0; top: 34px; }
.method-orbit-node-2::before,
.method-orbit-node-3::before { right: 100%; top: 21px; width: 28px; height: 1px; }
.method-orbit-node-2 article::after,
.method-orbit-node-3 article::after { left: -34px; top: 17px; }
.method-orbit-node-3 { right: 0; bottom: 34px; }
.method-orbit-node-4 { left: 0; bottom: 34px; }
.method-orbit-node span { display: block; margin-bottom: 14px; color: var(--green-dark); font-size: .7rem; font-weight: 750; letter-spacing: .11em; }
.method-orbit-node-1 span { color: var(--pink-dark); }

.method-orbit-node p { margin: 0; color: #555; font-size: .77rem; line-height: 1.58; }
.method-orbit-note { width: min(100%, 720px); margin: 10px auto 0; color: #666; font-size: .83rem; text-align: center; }

/* --- Orbita "Tu proceso" ----------------------------------------------------
   Las circunferencias se dibujan al entrar en pantalla, los cuatro nodos
   aparecen en orden con su conector, y el conjunto responde al puntero.
   Se activa desde site.js (`data-method-orbit`). Sin JS, todo queda visible y
   estatico: la seccion nunca depende de la animacion para poder leerse. --- */
.method-orbit-stage {
  --orbit-tilt-x: 0deg;
  --orbit-tilt-y: 0deg;
  --orbit-shift-x: 0px;
  --orbit-shift-y: 0px;
  transition: transform .6s cubic-bezier(.2,.72,.2,1);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .method-orbit[data-method-orbit-pointer] .method-orbit-stage {
    transform: perspective(1400px) rotateX(var(--orbit-tilt-x)) rotateY(var(--orbit-tilt-y));
    transition: transform .28s ease-out;
  }
  .method-orbit[data-method-orbit-pointer] .method-orbit-core,
  .method-orbit[data-method-orbit-pointer] .method-orbit-lines {
    transform-style: preserve-3d;
  }
  .method-orbit[data-method-orbit-pointer] .method-orbit-lines {
    translate: calc(var(--orbit-shift-x) * -1) calc(var(--orbit-shift-y) * -1);
    transition: translate .28s ease-out;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Trazado de las circunferencias. r=210 y r=190 -> longitudes 1320 y 1194. */
  .method-orbit[data-method-orbit-state] .method-orbit-guide { opacity: 0; }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-guide {
    animation: orbit-guide-in 1.4s cubic-bezier(.3,.7,.3,1) .1s both,
               method-orbit-travel 150s linear .1s infinite;
  }
  .method-orbit[data-method-orbit-state] .method-orbit-track {
    stroke-dasharray: 1194;
    stroke-dashoffset: 1194;
  }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-track {
    animation: orbit-draw-track 1.5s cubic-bezier(.3,.7,.3,1) .25s both;
  }
  .method-orbit[data-method-orbit-state] .method-orbit-traveller { opacity: 0; }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-traveller {
    opacity: 1;
    transition: opacity .6s ease 1.2s;
  }

  /* Nucleo: entra con un pequeno impulso y respira despues. */
  .method-orbit[data-method-orbit-state] .method-orbit-core {
    opacity: 0;
    transform: translate(-50%,-50%) scale(.86);
  }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-core {
    animation: orbit-core-in .85s cubic-bezier(.34,1.4,.64,1) .05s both,
               orbit-core-breathe 7s ease-in-out 1.1s infinite;
  }

  /* Nodos: entran en orden, cada uno desde su lado. */
  .method-orbit[data-method-orbit-state] .method-orbit-node { opacity: 0; }
  
  
  .method-orbit[data-method-orbit-state="in"] .method-orbit-node {
    animation: orbit-node-in .7s cubic-bezier(.22,.61,.36,1) both;
  }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-node-1 { animation-delay: .45s; }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-node-2 { animation-delay: .62s; }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-node-3 { animation-delay: .79s; }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-node-4 { animation-delay: .96s; }

  /* Conector: se extiende hacia la orbita cuando llega su nodo. */
  .method-orbit[data-method-orbit-state] .method-orbit-node::before {
    transform: scaleX(0);
    transition: transform .5s cubic-bezier(.2,.72,.2,1);
  }
  .method-orbit[data-method-orbit-state] .method-orbit-node-1::before,
  .method-orbit[data-method-orbit-state] .method-orbit-node-4::before { transform-origin: 0 50%; }
  .method-orbit[data-method-orbit-state] .method-orbit-node-2::before,
  .method-orbit[data-method-orbit-state] .method-orbit-node-3::before { transform-origin: 100% 50%; }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-node-1::before { transform: scaleX(1); transition-delay: .95s; }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-node-2::before { transform: scaleX(1); transition-delay: 1.12s; }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-node-3::before { transform: scaleX(1); transition-delay: 1.29s; }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-node-4::before { transform: scaleX(1); transition-delay: 1.46s; }

  /* El punto de cada nodo late al llegar. */
  
}

/* Hover de un nodo: se ilumina su rama y el nucleo responde. */
.method-orbit-node article::before,
.method-orbit-node article::after { transition: width .3s ease, box-shadow .3s ease, background-color .3s ease; }
.method-orbit-node:hover article::before { width: 76px; }

.method-orbit-node-1:hover article::after,
.method-orbit-node-4:hover article::after { box-shadow: 0 0 0 9px rgba(236,25,134,.16); }
.method-orbit-stage:has(.method-orbit-node:hover) .method-orbit-core { box-shadow: 0 28px 70px rgba(52,49,40,.2), 0 0 0 6px rgba(168,210,27,.14); }

@keyframes orbit-guide-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes orbit-draw-track {
  from { stroke-dashoffset: 1194; }
  to   { stroke-dashoffset: 0; }
}
@keyframes orbit-core-in {
  from { opacity: 0; transform: translate(-50%,-50%) scale(.86); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@keyframes orbit-core-breathe {
  0%, 100% { transform: translate(-50%,-50%) scale(1); }
  50%      { transform: translate(-50%,-50%) scale(1.022); }
}
@keyframes orbit-node-in {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes orbit-dot-pulse {
  0%      { box-shadow: 0 0 0 5px rgba(168,210,27,.11); }
  35%     { box-shadow: 0 0 0 13px rgba(168,210,27,0); }
  100%    { box-shadow: 0 0 0 5px rgba(168,210,27,.11); }
}

@media (prefers-reduced-motion: reduce) {
  .method-orbit-traveller,
  .method-orbit-core::before { animation: none !important; }
  .method-orbit-stage { transform: none !important; }
}


/* Guia clinica: un rail sutil enlaza tres superficies alineadas. */
.home-guide-cards { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: stretch; margin-top: -36px; padding: 42px 0 28px; }
.home-guide-rail { position: absolute; left: 3%; right: 3%; top: 0; height: 1px; background: linear-gradient(90deg, rgba(77,108,0,.16), rgba(77,108,0,.5) 18%, rgba(236,25,134,.38) 52%, rgba(77,108,0,.32) 82%, rgba(77,108,0,.12)); }
.home-guide-rail::before { position: absolute; left: 0; top: -2px; width: 5px; height: 5px; content: ""; background: var(--green-dark); border-radius: 50%; }
.home-guide-rail i { position: absolute; inset: -1px 0 auto; height: 3px; background: linear-gradient(90deg, transparent, var(--pink) 72%, transparent); opacity: 0; transform: scaleX(.04); transform-origin: left; animation: home-guide-pulse 9s ease-in-out infinite; }
@keyframes home-guide-pulse { 0%, 12% { opacity: 0; transform: scaleX(.04); } 28%, 72% { opacity: .5; } 88%, 100% { opacity: 0; transform: scaleX(1); } }
.home-guide-card { position: relative; min-height: 390px; padding: clamp(28px, 2.7vw, 40px); background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(244,241,233,.94)); border: 1px solid rgba(77,68,52,.08); box-shadow: 0 20px 52px rgba(94,82,60,.13), 0 3px 10px rgba(94,82,60,.07); transition: transform .32s cubic-bezier(.2,.72,.2,1), box-shadow .32s ease; }
.home-guide-card::after { position: absolute; left: 50%; bottom: 100%; width: 1px; height: 42px; content: ""; background: linear-gradient(rgba(77,108,0,.42), rgba(77,108,0,.08)); }
.home-guide-card::before { position: absolute; left: 0; top: 0; width: 68px; height: 4px; content: ""; background: var(--green-dark); transition: width .32s ease; }
.home-guide-card:hover,
.home-guide-card:focus-visible { outline: 0; transform: translateY(-6px) scale(1.008); box-shadow: 0 30px 72px rgba(94,82,60,.2), 0 6px 18px rgba(94,82,60,.1); }
.home-guide-card:focus-visible { box-shadow: 0 0 0 3px var(--green-bright), 0 30px 72px rgba(94,82,60,.2); }
.home-guide-card:hover::before,
.home-guide-card:focus-visible::before { width: 132px; }
.home-guide-card-1 { grid-column: 1 / 5; }
.home-guide-card-2 { grid-column: 5 / 9; color: var(--paper); background: radial-gradient(circle at 88% 8%, rgba(236,25,134,.12), transparent 28%), #1a1919; border-color: rgba(255,255,255,.07); box-shadow: 0 24px 58px rgba(44,37,41,.22), 0 4px 12px rgba(44,37,41,.12); }
.home-guide-card-2::before { background: var(--pink); }
.home-guide-card-3 { grid-column: 9 / 13; background: linear-gradient(145deg, #edf2da, #dfe8bd); border-color: rgba(77,108,0,.12); }
.home-guide-index { display: flex; justify-content: space-between; gap: 18px; margin-bottom: clamp(38px, 4.2vw, 64px); color: var(--green-dark); font-size: .72rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.home-guide-index small { color: #777; font-size: .62rem; font-weight: 650; letter-spacing: .08em; text-align: right; text-transform: uppercase; }


.home-guide-card h3 { max-width: 16ch; margin: 0 0 22px; font-size: clamp(1.45rem, 2.1vw, 2.15rem); line-height: 1; letter-spacing: -.045em; }
.home-guide-card p { max-width: 48ch; color: #4f4f4f; font-size: .88rem; line-height: 1.62; }

.home-guide-card.is-reveal-ready,
.method-orbit-node.is-reveal-ready { opacity: 0; transform: translateY(24px); }
.method-orbit-node-3.is-reveal-ready { transform: translate(-50%,24px); }
.home-guide-card.is-reveal-ready.is-in-view,
.method-orbit-node.is-reveal-ready.is-in-view { opacity: 1; transform: none; transition: opacity .55s ease, transform .65s cubic-bezier(.2,.7,.2,1); transition-delay: var(--card-delay, 0ms); }
.method-orbit-node-3.is-reveal-ready.is-in-view { transform: translateX(-50%); }

/* Horario Studio: guias de tiempo, aire entre dias y clases suspendidas. */
.studio-schedule { background: #ebe6e2; }
.schedule-controls { border-radius: 2px; box-shadow: 0 18px 42px rgba(38,31,35,.13); }
.schedule-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: clamp(20px, 2.5vw, 34px); }
.schedule-board { overflow: visible; background: transparent; border: 0; box-shadow: none; }
.schedule-grid { min-width: 0; }
.schedule-head-row { top: 128px; color: var(--ink); background: transparent; border-bottom: 1px solid rgba(18,18,18,.28); }
.schedule-head-row > * { min-height: 56px; padding: 10px 12px; border: 0; }
.schedule-head-row > span { color: #777; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.schedule-head-row strong { justify-content: center; color: #5a5a5a; font-size: .72rem; }
.schedule-time-row { position: relative; min-height: 132px; }
.schedule-time-row::before { position: absolute; z-index: 0; left: 74px; right: 0; top: 0; height: 1px; content: ""; background: rgba(18,18,18,.13); }
.schedule-time-row > time { z-index: 1; min-height: 132px; justify-content: flex-start; padding: 16px 10px 0 0; color: #4c4c4c; border: 0; font-size: .78rem; font-weight: 750; }
.schedule-cell { z-index: 1; min-height: 132px; padding: 10px 7px 16px; border: 0; }
.schedule-cell:nth-child(3) { --event-shift: 8px; }
.schedule-cell:nth-child(4) { --event-shift: 2px; }
.schedule-cell:nth-child(5) { --event-shift: 11px; }
.schedule-cell:nth-child(6) { --event-shift: 5px; }
.schedule-event { min-height: 102px; padding: 15px 30px 14px 15px; border: 1px solid rgba(18,18,18,.1); border-radius: 16px 16px 16px 5px; box-shadow: 0 12px 26px rgba(47,39,42,.12); transform: translateY(var(--event-shift, 0)); }
.schedule-event:hover,
.schedule-event:focus-visible { transform: translateY(calc(var(--event-shift, 0px) - 5px)) rotate(-.6deg); box-shadow: 0 18px 34px rgba(47,39,42,.2); }
.schedule-event[aria-pressed="true"] { outline: 3px solid var(--pink-dark); outline-offset: 2px; }
.schedule-event-pilates { background: #f5c7de; }
.schedule-event-yoga { color: #fff; background: #a91565; }
.schedule-event-movement { background: #c8de78; }
.schedule-event-aerial { color: #fff; background: #202020; }
.schedule-event-recovery { color: #fff; background: #6b477b; }
.schedule-event-workshop { background: #79d2d1; }
.schedule-detail { top: 128px; overflow: hidden; min-height: 350px; padding: 34px; background: radial-gradient(circle at 88% 10%, rgba(236,25,134,.2), transparent 34%), #151315; border: 0; border-radius: 2px; box-shadow: 0 28px 68px rgba(43,32,39,.22); }
.schedule-detail::before { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; content: ""; background: var(--pink); }

/* Ritmo editorial para otras rejillas repetitivas en pantallas amplias. */
@media (min-width: 1181px) {
  .space-editorial-grid { grid-template-columns: 1.12fr .88fr; gap: 24px; background: transparent; border: 0; }
  .space-editorial-card { box-shadow: 0 24px 58px rgba(54,49,40,.1); }
  .space-editorial-card.studio { margin-top: 52px; }
  .archive-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .archive-grid > .article-card { grid-column: span 4; }
  .archive-grid > .article-card:nth-child(6n+1) { grid-column: span 5; }
  .archive-grid > .article-card:nth-child(6n+2) { grid-column: span 3; margin-top: 54px; }
  .archive-grid > .article-card:nth-child(6n+3) { grid-column: span 4; margin-top: 18px; }
  .archive-grid > .article-card:nth-child(6n+4) { grid-column: span 4; margin-top: 38px; }
  .archive-grid > .article-card:nth-child(6n+5) { grid-column: span 5; }
  .archive-grid > .article-card:nth-child(6n+6) { grid-column: span 3; margin-top: 72px; }
  .discipline-groups { grid-template-columns: 1.08fr .88fr 1.04fr; align-items: start; }
  .discipline-group:nth-child(2) { margin-top: 48px; }
  .team-grid { grid-template-columns: 1.08fr .9fr 1.02fr; align-items: start; }
  .team-grid .team-card:nth-child(3n+2) { margin-top: 48px; }
}

@media (max-width: 1280px) {
  .brand-primary-clinic { width: 194px !important; height: 53px !important; }
  .brand-primary-studio { width: 186px !important; height: 54px !important; }
  .universe-switch { grid-template-rows: 24px 60px; width: 190px; min-width: 190px; min-height: 90px; margin-left: 12px; padding-right: 10px; padding-left: 13px; }
  .universe-switch-logo { height: 60px; }
  .universe-switch b { width: 24px; height: 24px; font-size: 1rem; }
  .main-nav > ul { gap: 8px; }
  .main-nav li > a,
  .nav-parent > a { font-size: .79rem; }
  .main-nav-studio li > a,
  .main-nav-studio .nav-parent > a { font-size: .72rem; }
}

@media (max-width: 1050px) {
  .contact-rail { height: 42px; }
  .contact-rail-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .contact-space { justify-content: center; }
  .contact-space-studio { padding-left: 12px; }
  .header-inner,
  .site-header.is-compact .header-inner { height: 80px; }
  .brand-primary-clinic { width: 184px !important; height: 51px !important; }
  .brand-primary-studio { width: 176px !important; height: 51px !important; }
  .universe-switch { grid-template-rows: 22px 51px; width: 160px; min-width: 160px; min-height: 79px; margin-left: 8px; }
  .universe-switch-logo { height: 51px; }
  .universe-switch b { width: 22px; height: 22px; font-size: .94rem; }
  .main-nav,
  .main-nav.main-nav-studio { inset: 122px 0 auto; max-height: calc(100dvh - 122px); overflow-y: auto; }
  .main-nav > ul,
  .main-nav-studio > ul { display: block; }
  
  .menu-toggle { flex: 0 0 auto; }
  .topic-nav { top: 122px; }
  
  .method-orbit-node { width: min(36%, 320px); }
  .method-orbit-node article { min-height: 206px; padding: 24px; }
  .home-guide-cards { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .home-guide-card-1 { grid-column: 1 / 5; }
  .home-guide-card-2 { grid-column: 5 / 9; }
  .home-guide-card-3 { grid-column: 9 / 13; width: auto; margin: 0; }
  .schedule-layout { grid-template-columns: 1fr; }
  .schedule-detail { position: static; }
}

@media (max-width: 1050px) {
  .method-orbit-stage { display: flex; width: 100%; height: auto; flex-direction: column; }
  
  .method-orbit-core { position: relative; left: auto; top: auto; order: 1; width: 210px; height: 210px; margin: 0 auto 44px; transform: none; }
  .method-orbit-list { order: 2; display: grid; gap: 16px; }
  .method-orbit-node,
  .method-orbit-node-1,
  .method-orbit-node-2,
  .method-orbit-node-3,
  .method-orbit-node-4 { position: static; width: 100%; transform: none; }
  .method-orbit-node::before { display: none; }
  .method-orbit-node article { min-height: 0; padding-right: 0; }
  .method-orbit-node article::after { right: 10px; left: auto; top: -5px; }
  .method-orbit-node-3.is-reveal-ready,
  .method-orbit-node-3.is-reveal-ready.is-in-view { transform: none; }
}

@media (max-width: 760px) {
  
  
  .contact-space { display: grid; grid-template-columns: auto auto; grid-template-rows: 15px 30px; gap: 0 4px; align-content: center; justify-content: center; }
  .contact-space > strong { grid-column: 1 / -1; color: #8e8e8e; font-size: .52rem; text-align: center; }
  .contact-space-studio { padding-left: 6px; }
  .contact-space-actions { gap: 0; }
  .contact-rail-action { width: 28px; min-height: 28px; }
  .contact-space-number { align-self: center; font-size: .57rem; white-space: nowrap; }
  .header-inner,
  .site-header.is-compact .header-inner { height: 80px; padding-right: 14px; padding-left: 14px; gap: 10px; }
  .brand-primary-clinic { width: 146px !important; height: 42px !important; }
  .brand-primary-studio { width: 140px !important; height: 42px !important; }
  .universe-switch { grid-template-rows: 20px 48px; width: 150px; min-width: 150px; min-height: 76px; margin-left: 4px; padding: 2px 7px 4px 10px; }
  .universe-switch-logo { height: 48px; }
  .universe-switch b { display: grid; width: 20px; height: 20px; font-size: .86rem; }
  .menu-toggle { gap: 7px; font-size: .76rem; }
  
  .hero,
  .hero-slides,
  .hero-slide { height: auto; min-height: 690px; }
  .home-guide-cards { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 18px; padding: 0 0 12px 26px; }
  .home-guide-rail { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(rgba(77,108,0,.18), rgba(236,25,134,.34), rgba(77,108,0,.22)); }
  .home-guide-rail i { display: none; }
  .home-guide-card,
  .home-guide-card-1,
  .home-guide-card-2,
  .home-guide-card-3 { grid-column: 1; width: 100%; min-height: 0; margin: 0; }
  .home-guide-card::after { right: 100%; left: auto; top: 28px; bottom: auto; width: 19px; height: 1px; background: rgba(77,108,0,.38); }
  .home-guide-index { margin-bottom: 34px; }
  .method-orbit-core { width: 184px; height: 184px; }
  
  .schedule-controls { position: static; }
  .schedule-day-filter { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .schedule-day-filter::-webkit-scrollbar { display: none; }
  .schedule-day-filter button { flex: 0 0 auto; min-width: 92px; scroll-snap-align: start; }
  .schedule-board { overflow: visible; }
  .schedule-time-row::before { left: 0; }
  .schedule-time-row { grid-template-columns: 54px minmax(0, 1fr); gap: 10px; margin-bottom: 8px; }
  .schedule-time-row > time { min-height: 0; padding-top: 14px; }
  .schedule-cell { min-height: 0; padding: 6px 0 10px; --event-shift: 0 !important; }
  .schedule-event,
  .schedule-event:hover,
  .schedule-event:focus-visible { min-height: 96px; transform: none; }
  .schedule-detail { margin-top: 22px; border-radius: 0; }
  .whatsapp-button { width: 204px; }
  .whatsapp-label,
  .whatsapp-button .whatsapp-label { max-width: 142px; opacity: 1; }
}

@media (max-width: 390px) {
  .brand-primary-clinic { width: 136px !important; height: 39px !important; }
  .brand-primary-studio { width: 132px !important; height: 39px !important; }
  .universe-switch { grid-template-rows: 20px 36px; width: 116px; min-width: 116px; min-height: 64px; margin-left: 2px; }
  .universe-switch-logo { height: 36px; }
  .menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .home-guide-card { padding: 26px 22px; }
  .schedule-day-filter button { min-width: 84px; }
  .whatsapp-button { width: 188px; height: 56px; }
  .whatsapp-button svg { flex-basis: 56px; width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .method-orbit-traveller,
  .method-orbit-core::before,
  .home-guide-rail i { animation: none; }
  .home-guide-rail i { display: none; }
  .method-orbit-stage { display: flex; width: 100%; height: auto; flex-direction: column; }
  .method-orbit-lines { display: none; }
  .method-orbit-core { position: relative; left: auto; top: auto; order: 1; width: 210px; height: 210px; margin: 0 auto 44px; transform: none; }
  .method-orbit-list { order: 2; display: grid; gap: 16px; }
  .method-orbit-node,
  .method-orbit-node-1,
  .method-orbit-node-2,
  .method-orbit-node-3,
  .method-orbit-node-4 { position: static; width: 100%; transform: none; }
  .method-orbit-node::before { display: none; }
  .method-orbit-node article { min-height: 0; }
  .method-orbit-node article,
  .home-guide-card,
  .universe-switch,
  .schedule-event { transition: none; }
  .home-guide-card.is-reveal-ready,
  .method-orbit-node.is-reveal-ready,
  .home-guide-card.is-reveal-ready.is-in-view,
  .method-orbit-node.is-reveal-ready.is-in-view,
  .method-orbit-node-3.is-reveal-ready,
  .method-orbit-node-3.is-reveal-ready.is-in-view { opacity: 1; transform: none; }
}

/* Revisión de legibilidad: cuerpo auxiliar cómodo sin sobredimensionar microetiquetas. */


.method-orbit-note { color: #505050; font-size: .9rem; line-height: 1.55; }
.home-guide-card { min-height: 420px; }
.home-guide-card p { color: #3f3f3f; font-size: 1rem; line-height: 1.68; }


.main-nav li > a,
.nav-parent > a,
.main-nav-studio li > a,
.main-nav-studio .nav-parent > a { font-size: clamp(.875rem, .82rem + .12vw, .94rem); }
.page-toc a,
.article-toc a,
.topic-nav a,
.testimony-topics a,
.schedule-day-filter button { font-size: .875rem; line-height: 1.45; }
.breadcrumbs,
.article-meta,
.footer-bottom { font-size: .875rem; line-height: 1.45; }
.hero-media figcaption,
.treatment-image figcaption,
.disciplines-hero figcaption,
.team-portrait figcaption,
.legacy-content figcaption,
.article-content figcaption { font-size: .875rem; line-height: 1.45; }

.contact-detail-card em,
.form-consent,
.form-helper,
.form-status,
.author-card > a,
.schedule-status,
.contact-map-ticket p { font-size: .9rem; line-height: 1.55; }
.contact-form label:not(.form-consent),
.nutrition-data-grid label { font-size: .82rem; }
.discipline-group header p,
.nutrition-test-intro li,
.studio-method-card em,
.studio-start-options span { font-size: .94rem; line-height: 1.58; }
.discipline-group nav small { font-size: .86rem; line-height: 1.5; }
.medical-note p { font-size: .95rem; line-height: 1.55; }
.contact-space-number { font-size: .78rem; }

@media (max-width: 1050px) {
  .main-nav li > a,
  .main-nav-studio li > a,
  .nav-parent > a,
  .main-nav-studio .nav-parent > a { font-size: 1rem; }
  .method-orbit-stage { height: auto; }
  .home-guide-card { min-height: 0; }
}

@media (max-width: 760px) {
  .contact-space-number { font-size: .68rem; }
  .menu-toggle { font-size: .88rem; }
  .method-orbit-node p { font-size: .94rem; line-height: 1.68; }
  .home-guide-card p { font-size: 1rem; line-height: 1.68; }
}

/* Relato editorial entre Método Salux y Fisioterapia: dos planos unidos por
   una ventana orgánica que concentra la imagen en las dos personas. */
.home-parallax-story {
  --parallax-offset: 0px;
  --parallax-x: 0px;
  --parallax-depth: 0px;
  --parallax-depth-reverse: 0px;
  --parallax-scale: 1.1;
  --parallax-progress: 0;
  --parallax-copy: 0px;
  --parallax-sweep: 50%;
  --parallax-tilt-x: 0px;
  --parallax-tilt-y: 0px;
  --parallax-glow-x: 68%;
  --parallax-glow-y: 42%;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 50%) minmax(0, 50%);
  align-items: center;
  /* La foto es 1672x941 (proporcion 1,78). Con el alto anterior el hueco de la
     imagen quedaba en 2,13 y habia que recortar el 25 % en vertical: o se perdia
     la cabeza del fisioterapeuta o se perdia la columna iluminada. Con 37,6vw el
     hueco queda en 1,62, muy cerca de la foto, y el recorte pasa a ser
     horizontal: se va la parte del armario, que es justo lo que sobra. */
  height: clamp(480px, 37.6vw, 700px);
  min-height: 0;
  overflow: hidden;
  color: var(--white);
  background: #0b0b09;
  border-block: 1px solid rgba(255,255,255,.12);
}
.home-parallax-story::before,
.home-parallax-story::after {
  position: absolute;
  z-index: 2;
  content: "";
  pointer-events: none;
}
.home-parallax-story::before {
  right: -8%;
  top: 50%;
  width: 60%;
  height: 120%;
  border: 1px solid rgba(168,210,27,.42);
  border-radius: 52% 48% 45% 55% / 57% 44% 56% 43%;
  box-shadow: 0 0 48px rgba(143,189,24,.08);
  transform: translate3d(calc(var(--parallax-tilt-x) * -1.15), calc(-50% + var(--parallax-depth) + var(--parallax-tilt-y) * .6), 0) rotate(calc(-2.4deg + var(--parallax-progress) * 1.6deg));
  opacity: calc(.35 + var(--parallax-progress) * .65);
  transition: opacity .5s ease;
}
.home-parallax-story::after {
  right: -3%;
  top: 50%;
  width: 52%;
  height: 105%;
  border: 1px solid rgba(236,25,134,.25);
  border-radius: 47% 53% 56% 44% / 44% 56% 46% 54%;
  transform: translate3d(calc(var(--parallax-tilt-x) * .85), calc(-50% + var(--parallax-depth-reverse) - var(--parallax-tilt-y) * .45), 0) rotate(calc(2deg - var(--parallax-progress) * 1.9deg));
  opacity: calc(.3 + var(--parallax-progress) * .7);
  transition: opacity .5s ease;
}
.home-parallax-story-media {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  width: 61%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  /* Sin fondo propio: el degradado de la izquierda tiene que disolverse en el
     negro de la seccion, no en otro negro distinto. */
  background: transparent;
  -webkit-mask-image: radial-gradient(ellipse 112% 145% at 100% 50%, #000 0 70%, rgba(0,0,0,.88) 78%, rgba(0,0,0,.28) 92%, transparent 100%);
  mask-image: radial-gradient(ellipse 112% 145% at 100% 50%, #000 0 70%, rgba(0,0,0,.88) 78%, rgba(0,0,0,.28) 92%, transparent 100%);
}
.home-parallax-story-media img {
  position: absolute;
  left: 0;
  /* Margen minimo para el recorrido del parallax, casi todo por abajo, y la
     escala crece hacia abajo (transform-origin): el borde superior no se mueve
     y la cabeza del fisioterapeuta no se corta a ningun ancho. */
  top: -12px;
  width: 100%;
  height: calc(100% + 104px);
  max-width: none;
  object-fit: cover;
  object-position: 92% 10%;
  filter: saturate(.82) contrast(1.055) brightness(1.02);
  /* El corte recto de la izquierda no venia solo del canto de la caja: la propia
     fotografia tiene un canto vertical (la puerta contra la pared) y un
     degradado vertical, paralelo a el, lo subrayaba. La mascara va en diagonal
     y sobre la imagen, no sobre el bloque: cruza ese canto en lugar de
     acompanarlo, y la foto se disuelve en el negro de la seccion. */
  -webkit-mask-image: linear-gradient(101deg, transparent 0%, rgba(0,0,0,.10) 12%, rgba(0,0,0,.34) 26%, rgba(0,0,0,.66) 40%, rgba(0,0,0,.9) 54%, #000 66%);
  mask-image: linear-gradient(101deg, transparent 0%, rgba(0,0,0,.10) 12%, rgba(0,0,0,.34) 26%, rgba(0,0,0,.66) 40%, rgba(0,0,0,.9) 54%, #000 66%);
  transform-origin: 50% 0%;
  transform: translate3d(calc(var(--parallax-x) + var(--parallax-tilt-x)), calc(var(--parallax-offset) + var(--parallax-tilt-y)), 0) scale(var(--parallax-scale));
  will-change: transform;
}
/* El canto izquierdo de la foto cortaba en vertical y se veia la union.
   Se disuelve con un degradado del MISMO negro del bloque (#0b0b09) que ocupa
   el primer tercio del ancho de la imagen. Se hace superponiendo, no con
   mask-composite: Chrome no aplicaba la composicion de dos mascaras. */
.home-parallax-story-media::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(11,11,9,.55) 0%, rgba(11,11,9,.28) 12%, rgba(11,11,9,0) 26%),
    linear-gradient(0deg, rgba(5,5,4,.16), transparent 24%, transparent 78%, rgba(5,5,4,.08));
  pointer-events: none;
}
/* En ventanas estrechas la columna de la foto se queda corta: si la disolucion
   sigue ocupando el mismo porcentaje del ancho, se traga al fisioterapeuta. Se
   acorta, y el encuadre se centra un poco mas. */
@media (max-width: 1400px) {
  .home-parallax-story-media img {
    object-position: 74% 10%;
    -webkit-mask-image: linear-gradient(101deg, transparent 0%, rgba(0,0,0,.22) 8%, rgba(0,0,0,.62) 18%, rgba(0,0,0,.9) 28%, #000 38%);
    mask-image: linear-gradient(101deg, transparent 0%, rgba(0,0,0,.22) 8%, rgba(0,0,0,.62) 18%, rgba(0,0,0,.9) 28%, #000 38%);
  }
}

.home-parallax-story-media::after {
  position: absolute;
  z-index: 3;
  inset: 5% -8% 5% 4%;
  content: "";
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 52% 48% 50% 50% / 46% 54% 44% 56%;
  transform: translate3d(calc(var(--parallax-tilt-x) * -.5), calc(var(--parallax-depth-reverse) + var(--parallax-tilt-y) * -.35), 0);
  pointer-events: none;
}
.home-parallax-story-copy {
  position: relative;
  z-index: 3;
  transform: translate3d(0, var(--parallax-copy), 0);
  will-change: transform;
  grid-column: 1;
  grid-row: 1;
  width: 108%;
  height: 100%;
  margin: 0;
  padding: clamp(16px, 1.35vw, 22px) clamp(24px, 2.6vw, 42px) clamp(16px, 1.35vw, 22px) var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    linear-gradient(90deg, #090908 0 78%, rgba(9,9,8,.92) 86%, rgba(9,9,8,0) 100%),
    linear-gradient(135deg, #070706, #11110e);
  text-wrap: pretty;
}
.home-parallax-story-copy::after {
  display: none;
}
.home-parallax-story-copy .eyebrow {
  margin-bottom: 10px;
  color: var(--green-bright);
  font-weight: 700;
}
.home-parallax-story-copy h2 {
  max-width: none;
  margin: 0 0 14px;
  font-size: clamp(2.35rem, 3.05vw, 3.42rem);
  line-height: .94;
  letter-spacing: -.055em;
}
.home-parallax-story-copy h2 span { display: block; white-space: nowrap; }
.home-parallax-story-copy > p:not(.eyebrow):not(.home-parallax-story-legend) {
  max-width: 66ch;
  margin: 0 0 8px;
  color: rgba(255,255,255,.86);
  font-size: clamp(.94rem, .9rem + .12vw, 1.02rem);
  line-height: 1.48;
}
.home-parallax-story-legend {
  max-width: none;
  margin: 11px 0 0;
  padding-top: 9px;
  color: #e9f5c6;
  border-top: 1px solid rgba(168,210,27,.55);
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .015em;
  line-height: 1.4;
  white-space: nowrap;
}
.home-parallax-story-legend span { padding-inline: .35em; color: var(--pink); }
.home-parallax-story-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.home-parallax-story-actions .button { min-height: 48px; padding-block: 8px; }

/* --- Parallax del banner editorial de portada -------------------------------
   Cuatro capas a velocidades distintas (imagen, aros, marco interior y texto),
   dolly de escala segun el scroll, barrido especular y halo que sigue al raton.
   Todo se anula con prefers-reduced-motion y por debajo de 900 px: ver
   site.js, bloque `parallaxStories`. -------------------------------------- */
/* Barrido especular y halo, solo mientras el bloque esta en pantalla. */
.home-parallax-story[data-parallax-active] .home-parallax-story-media::before {
  background:
    linear-gradient(90deg, rgba(11,11,9,.55) 0%, rgba(11,11,9,.28) 12%, rgba(11,11,9,0) 26%),
    radial-gradient(ellipse 46% 62% at var(--parallax-glow-x) var(--parallax-glow-y), rgba(168,210,27,.16), transparent 62%),
    linear-gradient(104deg, transparent calc(var(--parallax-sweep) - 26%), rgba(255,255,255,.13) var(--parallax-sweep), transparent calc(var(--parallax-sweep) + 26%)),
    linear-gradient(0deg, rgba(5,5,4,.16), transparent 24%, transparent 78%, rgba(5,5,4,.08));
}

/* Entrada. Se dispara una sola vez con IntersectionObserver. */
.home-parallax-story .home-parallax-story-copy > * {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  .home-parallax-story[data-parallax-revealed] .home-parallax-story-media {
    animation: parallax-media-in .95s cubic-bezier(.22,.61,.36,1) both;
  }
  .home-parallax-story:not([data-parallax-revealed]) .home-parallax-story-copy > * {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }
  .home-parallax-story[data-parallax-revealed] .home-parallax-story-copy > * {
    animation: parallax-copy-in .72s cubic-bezier(.22,.61,.36,1) both;
  }
  .home-parallax-story[data-parallax-revealed] .home-parallax-story-copy > *:nth-child(1) { animation-delay: .04s; }
  .home-parallax-story[data-parallax-revealed] .home-parallax-story-copy > *:nth-child(2) { animation-delay: .12s; }
  .home-parallax-story[data-parallax-revealed] .home-parallax-story-copy > *:nth-child(3) { animation-delay: .2s; }
  .home-parallax-story[data-parallax-revealed] .home-parallax-story-copy > *:nth-child(4) { animation-delay: .28s; }
  .home-parallax-story[data-parallax-revealed] .home-parallax-story-copy > *:nth-child(5) { animation-delay: .36s; }
  .home-parallax-story[data-parallax-revealed] .home-parallax-story-copy > *:nth-child(6) { animation-delay: .44s; }
}
@keyframes parallax-media-in {
  from { clip-path: inset(0 0 0 100%); opacity: .2; }
  to   { clip-path: inset(0 0 0 0%); opacity: 1; }
}
@keyframes parallax-copy-in {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .home-parallax-story-media img,
  .home-parallax-story-copy,
  .home-parallax-story::before,
  .home-parallax-story::after,
  .home-parallax-story-media::after {
    transform: none !important;
    animation: none !important;
  }
  .home-parallax-story-copy > * { opacity: 1 !important; transform: none !important; }
}

.button-ghost-light { color: var(--white); border-color: rgba(255,255,255,.58); }
.button-ghost-light:hover,
.button-ghost-light:focus-visible { color: var(--black); background: var(--white); border-color: var(--white); transform: translateY(-2px); }

@media (max-width: 1280px) and (min-width: 901px) {
  .home-parallax-story { height: clamp(430px, 37.6vw, 520px); }
  .home-parallax-story-copy h2 { font-size: clamp(2.25rem, 3.25vw, 2.65rem); }
  .home-parallax-story-copy > p:not(.eyebrow):not(.home-parallax-story-legend) { font-size: .93rem; }
  .home-parallax-story-legend { font-size: .77rem; }
}

@media (max-width: 900px) {
  .home-parallax-story { display: block; height: auto; min-height: 0; }
  .home-parallax-story::before,
  .home-parallax-story::after,
  .home-parallax-story-copy::after { display: none; }
  .home-parallax-story-media { position: relative; inset: auto; z-index: 0; width: 100%; height: clamp(240px, 38vw, 320px); min-height: 0; -webkit-mask-image: none; mask-image: none; }
  .home-parallax-story-media img {
    position: absolute;
    left: -20%;
    top: -12%;
    width: 140%;
    height: 140%;
    max-width: none;
    object-position: 60% 48%;
    -webkit-mask-image: none;
    mask-image: none;
    transform: none;
    will-change: auto;
  }
  /* En movil la foto va encima del texto: el corte es horizontal, no vertical,
     asi que el degradado se aplica abajo. */
  .home-parallax-story-media::before,
  .home-parallax-story[data-parallax-active] .home-parallax-story-media::before {
    display: block;
    background: linear-gradient(180deg, rgba(11,11,9,0) 58%, rgba(11,11,9,.5) 84%, #0b0b09 100%);
  }
  .home-parallax-story-media::after { inset: 0; border: 0; border-radius: 0; background: linear-gradient(0deg, rgba(0,0,0,.38), transparent 34%); transform: none; }
  .home-parallax-story-copy {
    width: 100%;
    margin: 0;
    padding: clamp(30px, 5vw, 42px) var(--pad) clamp(38px, 6vw, 50px);
    background:
      radial-gradient(circle at 92% 0, rgba(236,25,134,.09), transparent 34%),
      linear-gradient(145deg, #070707, #111);
  }
  .home-parallax-story-copy h2 { max-width: 19ch; font-size: clamp(2.2rem, 5.8vw, 3.1rem); }
  .home-parallax-story-copy h2 span { display: inline; white-space: normal; }
  .home-parallax-story-legend { white-space: normal; }
}

@media (max-width: 520px) {
  .home-parallax-story-media { height: 220px; }
  .home-parallax-story-media img { object-position: 60% 48%; }
  .home-parallax-story-copy h2 { font-size: clamp(2.05rem, 9.2vw, 2.55rem); }
  .home-parallax-story-actions { align-items: stretch; flex-direction: column; }
  .home-parallax-story-actions .button { width: 100%; }
  .home-parallax-story-legend span { padding-inline: .18em; }
}

@media (prefers-reduced-motion: reduce) {
  .home-parallax-story { --parallax-offset: 0px; --parallax-x: 0px; --parallax-depth: 0px; --parallax-depth-reverse: 0px; }
  .home-parallax-story-media img { transform: none; will-change: auto; }
  .home-parallax-story::before { transform: translate3d(0,-50%,0) rotate(-2.4deg); }
  .home-parallax-story::after { transform: translate3d(0,-50%,0) rotate(2deg); }
  .home-parallax-story-media::after { transform: none; }
  .home-parallax-story-actions .button { transition: none; }
}

/* Equipo 2026: un único recorrido editorial en lugar de órbita y directorio duplicados. */
.team-editorial-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(390px, 44%) minmax(0, 56%);
  height: clamp(570px, 45vw, 680px);
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 37% 18%, rgba(151,202,27,.11), transparent 28%),
    #080908;
}
.team-editorial-hero-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: 54px clamp(38px, 4.2vw, 72px) 64px max(var(--pad), calc((100vw - var(--container)) / 2));
}
.team-editorial-hero-copy::after {
  position: absolute;
  z-index: -1;
  inset: 0 -92px 0 0;
  content: "";
  background: linear-gradient(90deg, #080908 0 78%, rgba(8,9,8,.96) 88%, transparent);
  pointer-events: none;
}
.team-editorial-hero-copy .breadcrumbs { margin-bottom: auto; }
.team-editorial-hero-copy .eyebrow { margin-top: auto; }
.team-editorial-hero-copy h1 {
  max-width: 690px;
  margin: 0;
  color: var(--paper);
  font-size: clamp(3.05rem, 4.35vw, 5rem);
  line-height: .91;
  letter-spacing: -.062em;
  text-wrap: balance;
}
.team-editorial-hero-copy > p:not(.eyebrow) {
  max-width: 560px;
  margin: 0 0 24px;
  color: #c2c2c2;
  font-size: clamp(1.02rem, 1.2vw, 1.18rem);
  line-height: 1.62;
}
.team-editorial-hero-copy .text-link { margin-bottom: auto; color: var(--green-bright); border-color: rgba(151,202,27,.46); }
.team-hero-portraits {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .88fr 1.08fr .92fr;
  gap: 6px;
  height: 100%;
  margin: 0;
  padding: 36px 0 0 28px;
  background: linear-gradient(110deg, #111 0 5%, #d8d5cd 5% 100%);
  transform: skewX(-4deg) translateX(24px);
}
.team-hero-portraits::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(8,9,8,.7), transparent 28%, transparent 78%, rgba(8,9,8,.18));
  pointer-events: none;
}
.team-hero-portraits > span { min-width: 0; overflow: hidden; background: #bcbab3; }
.team-hero-portraits > span:nth-child(1) { margin-bottom: 88px; }
.team-hero-portraits > span:nth-child(2) { margin-top: 62px; margin-bottom: 20px; border-top: 4px solid var(--green-bright); }
.team-hero-portraits > span:nth-child(3) { margin: 20px 0 102px; border-bottom: 4px solid var(--pink); }
.team-hero-portraits img {
  width: calc(100% + 42px);
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(1) contrast(1.04);
  transform: skewX(4deg) translateX(-20px) scale(1.04);
}
.team-hero-portraits > span:nth-child(2) img { object-position: center 25%; }
.team-hero-portraits > span:nth-child(3) img { object-position: 48% 30%; }

.team-journey {
  padding: clamp(84px, 8vw, 124px) max(var(--pad), calc((100% - var(--container)) / 2)) clamp(98px, 10vw, 150px);
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 49.92%, rgba(20,20,20,.035) 50%, transparent 50.08%),
    #e8e5de;
}
.team-journey > header {
  display: grid;
  grid-template-columns: minmax(260px, .76fr) minmax(320px, 1.24fr);
  gap: clamp(36px, 7vw, 112px);
  align-items: end;
  max-width: 1220px;
  margin: 0 auto clamp(62px, 7vw, 106px);
}
.team-journey > header .label { grid-column: 1 / -1; margin-bottom: -18px; }
.team-journey > header h2 {
  margin: 0;
  font-size: clamp(3rem, 4.6vw, 5.45rem);
  line-height: .88;
  letter-spacing: -.065em;
}
.team-journey > header > p:last-child { max-width: 650px; margin: 0; color: #555; font-size: clamp(1.02rem, 1.2vw, 1.17rem); line-height: 1.68; }
.team-journey-stage { position: relative; width: min(100%, 1240px); margin: 0 auto; }
.team-journey-route { position: absolute; z-index: 0; inset: 20px 2% 10px; width: 96%; height: calc(100% - 30px); overflow: visible; pointer-events: none; }
.team-journey-route path { fill: none; stroke: rgba(74,104,0,.3); stroke-width: 2; stroke-dasharray: 3 11; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.team-journey-list { position: relative; z-index: 1; display: grid; gap: clamp(58px, 7vw, 108px); margin: 0; padding: 0; list-style: none; }
.team-journey-item { min-width: 0; }
.team-journey-link {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 38px);
  align-items: center;
  min-height: 310px;
  color: var(--ink);
  outline-offset: 10px;
}
.team-journey-link:focus-visible { outline: 3px solid var(--green-dark); }
.team-journey-item.is-studio .team-journey-link:focus-visible { outline-color: var(--pink-dark); }
.team-journey-link figure {
  position: relative;
  grid-column: 1 / 7;
  grid-row: 1;
  aspect-ratio: 1.56;
  margin: 0;
  overflow: hidden;
  background: #d0cdc5;
  clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
  box-shadow: 0 26px 62px rgba(55,49,38,.16);
}
.team-journey-link figure::after {
  position: absolute;
  inset: 0;
  content: "";
  border: 1px solid rgba(255,255,255,.56);
  clip-path: inherit;
  pointer-events: none;
}
.team-journey-link figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(.82) saturate(.55) contrast(1.04);
  transform: scale(1.025);
  transition: filter .42s ease, transform .58s cubic-bezier(.2,.72,.2,1);
}
.team-journey-copy {
  position: relative;
  grid-column: 7 / 13;
  grid-row: 1;
  display: block;
  min-width: 0;
  max-width: 530px;
  padding: 36px 10px 36px clamp(22px, 3.1vw, 48px);
  border-top: 1px solid rgba(76,105,0,.42);
  transition: transform .35s ease;
}
.team-journey-copy::before { position: absolute; left: 0; top: -3px; width: 78px; height: 5px; content: ""; background: var(--green-bright); }
.team-journey-copy small { display: block; margin-bottom: 12px; color: #526c0d; font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.team-journey-copy h3 { display: block; margin: 0 0 16px; font-size: clamp(2rem, 3vw, 3.45rem); line-height: .96; letter-spacing: -.052em; text-wrap: balance; }
.team-journey-copy > span { display: block; max-width: 48ch; color: #555; font-size: clamp(.98rem, 1.08vw, 1.08rem); line-height: 1.62; }
.team-journey-copy b { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; margin-top: 18px; color: #426000; font-size: .83rem; font-style: normal; letter-spacing: .02em; }
.team-journey-copy b i { font-size: 1.18rem; font-style: normal; transition: transform .28s ease; }
.team-journey-number { position: absolute; z-index: 2; left: -8px; top: -34px; color: rgba(20,20,20,.13); font-size: clamp(4.5rem, 8vw, 8.4rem); font-weight: 760; line-height: 1; letter-spacing: -.08em; pointer-events: none; }
.team-journey-item:nth-child(even) .team-journey-link figure { grid-column: 7 / 13; clip-path: polygon(0 0, 91% 0, 100% 100%, 9% 100%); }
.team-journey-item:nth-child(even) .team-journey-copy { grid-column: 1 / 7; padding-right: clamp(22px, 3.1vw, 48px); padding-left: 10px; }
.team-journey-item:nth-child(even) .team-journey-copy::before { right: 0; left: auto; }
.team-journey-item:nth-child(even) .team-journey-number { right: -8px; left: auto; }
.team-journey-item.is-studio .team-journey-copy { border-color: rgba(196,0,101,.38); }
.team-journey-item.is-studio .team-journey-copy::before { background: var(--pink); }
.team-journey-item.is-studio .team-journey-copy small,
.team-journey-item.is-studio .team-journey-copy b { color: var(--pink-dark); }
.team-journey-link:hover figure img,
.team-journey-link:focus-visible figure img { filter: grayscale(0) saturate(.96) contrast(1.02); transform: scale(1.065); }
.team-journey-link:hover .team-journey-copy,
.team-journey-link:focus-visible .team-journey-copy { transform: translateX(8px); }
.team-journey-item:nth-child(even) .team-journey-link:hover .team-journey-copy,
.team-journey-item:nth-child(even) .team-journey-link:focus-visible .team-journey-copy { transform: translateX(-8px); }
.team-journey-link:hover .team-journey-copy b i,
.team-journey-link:focus-visible .team-journey-copy b i { transform: translate(3px,-3px); }
.team-journey-item-1 figure img { object-position: center 18%; }
.team-journey-item-2 figure img { object-position: center 27%; }
.team-journey-item-3 figure img { object-position: center 18%; }
.team-journey-item-4 figure img { object-position: center 15%; }
.team-journey-item-5 figure img { object-position: center 22%; }
.team-journey-item-6 figure img { object-position: center 35%; }

/* Fichas profesionales: retrato protagonista y currículo legible. */
.profile-editorial-hero {
  position: relative;
  isolation: isolate;
  height: clamp(650px, 51vw, 740px);
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 73% 34%, rgba(151,202,27,.12), transparent 30%),
    linear-gradient(112deg, #080908 0 48%, #171816 100%);
}
.profile-editorial-hero.is-studio-profile { background: radial-gradient(circle at 73% 34%, rgba(236,25,134,.13), transparent 31%), linear-gradient(112deg, #080908 0 48%, #171416 100%); }
.profile-editorial-top {
  position: absolute;
  z-index: 5;
  left: max(var(--pad), calc((100vw - var(--container)) / 2));
  right: max(var(--pad), calc((100vw - var(--container)) / 2));
  top: 34px;
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: center;
}
.profile-editorial-top .breadcrumbs { margin: 0; }
.profile-back-link { display: inline-flex; gap: 9px; align-items: center; min-height: 44px; padding: 0 12px; color: #dedede; background: rgba(5,5,5,.62); border-bottom: 1px solid rgba(151,202,27,.58); font-size: .84rem; backdrop-filter: blur(7px); }

.profile-editorial-photo {
  position: absolute;
  z-index: 1;
  inset: 0 0 0 36%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  overflow: hidden;
}
.profile-editorial-photo::before,
.profile-editorial-photo::after { position: absolute; z-index: 2; inset: 0; content: ""; pointer-events: none; }
.profile-editorial-photo::before { background: linear-gradient(90deg, #080908 0, rgba(8,9,8,.82) 15%, transparent 52%), linear-gradient(0deg, rgba(8,9,8,.9), transparent 35%); }
.profile-editorial-photo::after { inset: 28px 34px 24px 20%; border: 1px solid rgba(151,202,27,.3); clip-path: polygon(12% 0,100% 0,88% 100%,0 100%); }
.is-studio-profile .profile-editorial-photo::after { border-color: rgba(236,25,134,.42); }
.profile-editorial-photo img {
  width: min(100%, 610px);
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: grayscale(.92) contrast(1.06) brightness(.88);
  transform: scale(1.015);
}
.profile-person-2 .profile-editorial-photo img { object-position: center 24%; }
.profile-person-3 .profile-editorial-photo img { width: min(100%, 560px); object-position: center 13%; }
.profile-person-4 .profile-editorial-photo img { width: min(100%, 560px); object-position: center 12%; }
.profile-person-5 .profile-editorial-photo img { width: min(100%, 560px); object-position: center 16%; }
.profile-person-6 .profile-editorial-photo img { width: min(100%, 660px); object-position: 48% 28%; }
.profile-editorial-intro {
  position: absolute;
  z-index: 4;
  left: max(var(--pad), calc((100vw - var(--container)) / 2));
  bottom: clamp(42px, 5vw, 72px);
  width: min(760px, 62vw);
}
.profile-editorial-intro .eyebrow { margin-bottom: 12px; }
.profile-editorial-intro h1 { max-width: 820px; margin: 0; font-size: clamp(3.25rem, 5.2vw, 6rem); line-height: .88; letter-spacing: -.067em; text-wrap: balance; }
.profile-editorial-intro h1 span { display: inline; color: var(--paper); background: #090a09; box-shadow: 16px 0 0 #090a09, -10px 0 0 #090a09; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.profile-editorial-intro .profile-role { display: table; width: fit-content; max-width: 680px; margin: 14px 0 16px; padding: 8px 13px; color: #10120d !important; background: var(--green-bright); font-size: clamp(.78rem, .92vw, .94rem) !important; font-weight: 750; line-height: 1.35; letter-spacing: .04em; }
.profile-editorial-hero.is-studio-profile .profile-role { color: #fff !important; background: var(--pink-dark); }
.profile-summary { max-width: 610px; margin: 0 0 20px; color: #d0d0d0; font-size: clamp(.98rem, 1.12vw, 1.1rem); line-height: 1.58; }
.profile-editorial-intro .button { min-height: 46px; }
.profile-editorial-hero.is-studio-profile .button-primary { color: #fff; background: var(--pink-dark); border-color: var(--pink-dark); }
.profile-hero-index { position: absolute; z-index: 4; right: max(var(--pad), calc((100vw - var(--container)) / 2)); bottom: 38px; color: rgba(255,255,255,.5); font-size: .75rem; font-weight: 700; letter-spacing: .14em; }

.profile-editorial-body {
  display: grid;
  grid-template-columns: minmax(220px, 270px) minmax(0, 860px);
  gap: clamp(52px, 7vw, 112px);
  justify-content: center;
  width: min(calc(100% - (var(--pad) * 2)), 1260px);
  margin: 0 auto;
  padding: clamp(82px, 8vw, 124px) 0 clamp(96px, 9vw, 138px);
}
.profile-editorial-aside { position: sticky; top: 154px; align-self: start; padding: 24px 28px 30px 0; border-top: 4px solid var(--green-bright); border-bottom: 1px solid var(--line-dark); }
.profile-editorial-aside > .label { margin: 0 0 12px; }
.profile-editorial-aside > strong { display: block; margin-bottom: 18px; font-size: clamp(1.35rem, 1.7vw, 1.75rem); line-height: 1.08; letter-spacing: -.035em; }
.profile-editorial-aside > p:not(.label) { margin: 0; color: #5b5b5b; line-height: 1.65; }
.profile-editorial-aside nav { display: grid; gap: 0; margin-top: 28px; border-top: 1px solid var(--line-dark); }
.profile-editorial-aside nav a { display: flex; justify-content: space-between; gap: 14px; min-height: 48px; align-items: center; padding: 10px 0; color: #476800; border-bottom: 1px solid var(--line-dark); font-size: .86rem; }
.profile-biography { min-width: 0; }
.profile-biography > header { margin-bottom: 34px; padding-bottom: 24px; border-bottom: 1px solid var(--line-dark); }
.profile-biography > header .label { margin-bottom: 10px; }
.profile-biography > header h2 { margin: 0; font-size: clamp(2.35rem, 3.4vw, 4rem); line-height: .96; letter-spacing: -.055em; }
.profile-biography .legacy-content { width: 100%; max-width: none; color: #272727; font-size: clamp(1.02rem, 1.08vw, 1.12rem); line-height: 1.72; }
.profile-biography .legacy-content h2:first-of-type,
.profile-biography .legacy-content .elementor-widget-image { display: none; }
.profile-biography .legacy-content ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.profile-biography .legacy-content li { position: relative; margin: 0; padding: 16px 14px 16px 34px; border-top: 1px solid var(--line-dark); }
.profile-biography .legacy-content li:last-child { border-bottom: 1px solid var(--line-dark); }
.profile-biography .legacy-content li::before { position: absolute; left: 4px; top: 22px; width: 10px; height: 10px; content: ""; background: var(--green-bright); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.profile-biography .legacy-content p { max-width: 720px; }
.profile-sequence { display: grid; grid-template-columns: 1fr 1fr; padding: 0 max(var(--pad), calc((100% - var(--container)) / 2)); }
.profile-sequence a { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; min-width: 0; min-height: 190px; align-content: center; padding: 34px clamp(28px, 4vw, 62px); color: var(--paper); border-right: 1px solid var(--line); transition: background-color .3s ease; }
.profile-sequence a:last-child { grid-template-columns: 1fr auto; text-align: right; border-right: 0; }

.profile-sequence small { grid-column: 1 / -1; color: var(--green-bright); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.profile-sequence strong { overflow-wrap: anywhere; font-size: clamp(1.3rem, 2vw, 2rem); line-height: 1.04; }
.profile-sequence > a > span { align-self: center; color: var(--green-bright); font-size: 1.4rem; }
.profile-sequence em { grid-column: 1 / -1; color: #8f8f8f; font-size: .78rem; font-style: normal; }

@media (max-width: 1050px) {
  .team-editorial-hero { grid-template-columns: minmax(340px, 48%) minmax(0, 52%); height: 590px; }
  .team-editorial-hero-copy h1 { font-size: clamp(3rem, 5vw, 4.2rem); }
  .team-hero-portraits { grid-template-columns: 1fr 1fr; }
  .team-hero-portraits > span:nth-child(3) { display: none; }
  .team-journey-route { display: none; }
  .team-journey-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 54px 28px; }
  .team-journey-item:nth-child(even) { margin-top: 70px; }
  .team-journey-link,
  .team-journey-item:nth-child(even) .team-journey-link { display: block; min-height: 0; }
  .team-journey-link figure,
  .team-journey-item:nth-child(even) .team-journey-link figure { aspect-ratio: 1.34; clip-path: polygon(9% 0,100% 0,91% 100%,0 100%); }
  .team-journey-copy,
  .team-journey-item:nth-child(even) .team-journey-copy { max-width: none; padding: 30px 10px 20px 22px; }
  .team-journey-item:nth-child(even) .team-journey-copy::before { right: auto; left: 0; }
  .team-journey-item:nth-child(even) .team-journey-number { right: auto; left: -5px; }
  .profile-editorial-photo { left: 31%; }
  .profile-editorial-intro { width: min(700px, 68vw); }
  .profile-editorial-intro h1 { font-size: clamp(3.15rem, 6.2vw, 5rem); }
}

@media (max-width: 760px) {
  .team-editorial-hero { display: flex; height: auto; flex-direction: column; }
  .team-editorial-hero-copy { min-height: 420px; padding: 34px var(--pad) 48px; }
  .team-editorial-hero-copy::after { inset: 0; background: linear-gradient(145deg, #080908, #10130d); }
  .team-editorial-hero-copy h1 { font-size: clamp(2.7rem, 13vw, 3.7rem); }
  .team-editorial-hero-copy .breadcrumbs { margin-bottom: auto; }
  .team-editorial-hero-copy .eyebrow { margin-top: 46px; }
  .team-editorial-hero-copy .text-link { margin-bottom: 0; }
  .team-hero-portraits { width: calc(100% + 30px); height: 280px; padding: 18px 0 0; transform: skewX(-4deg) translateX(-15px); }
  .team-hero-portraits > span:nth-child(1) { margin-bottom: 36px; }
  .team-hero-portraits > span:nth-child(2) { margin-top: 28px; margin-bottom: 0; }
  .team-journey { padding: 74px var(--pad) 92px; background: #e8e5de; }
  .team-journey > header { display: block; margin-bottom: 52px; }
  .team-journey > header .label { margin-bottom: 18px; }
  .team-journey > header h2 { margin-bottom: 22px; font-size: clamp(2.65rem, 12vw, 3.65rem); }
  .team-journey-list { display: grid; grid-template-columns: 1fr; gap: 28px; }
  .team-journey-item:nth-child(even) { margin-top: 0; }
  .team-journey-link,
  .team-journey-item:nth-child(even) .team-journey-link { display: grid; grid-template-columns: minmax(108px, 39%) minmax(0, 61%); gap: 0; align-items: stretch; min-height: 230px; padding: 0; background: rgba(255,255,255,.34); outline-offset: 4px; }
  .team-journey-link figure,
  .team-journey-item:nth-child(even) .team-journey-link figure { grid-column: 1; grid-row: 1; height: 100%; aspect-ratio: auto; clip-path: polygon(0 0,100% 0,88% 100%,0 100%); box-shadow: none; }
  .team-journey-copy,
  .team-journey-item:nth-child(even) .team-journey-copy { grid-column: 2; grid-row: 1; align-self: center; padding: 28px 18px 24px 14px; border-top: 0; transform: none; }
  .team-journey-copy::before,
  .team-journey-item:nth-child(even) .team-journey-copy::before { left: 14px; right: auto; top: 17px; width: 42px; height: 3px; }
  .team-journey-copy small { margin: 4px 0 9px; font-size: .66rem; }
  .team-journey-copy h3 { margin-bottom: 10px; font-size: clamp(1.35rem, 6.6vw, 1.9rem); }
  .team-journey-copy > span { display: block; overflow: visible; font-size: .88rem; line-height: 1.5; }
  .team-journey-copy b { min-height: 38px; margin-top: 8px; font-size: .78rem; }
  .team-journey-number,
  .team-journey-item:nth-child(even) .team-journey-number { right: 9px; left: auto; top: 10px; color: rgba(20,20,20,.1); font-size: 3.2rem; }
  .team-journey-link:hover .team-journey-copy,
  .team-journey-link:focus-visible .team-journey-copy,
  .team-journey-item:nth-child(even) .team-journey-link:hover .team-journey-copy,
  .team-journey-item:nth-child(even) .team-journey-link:focus-visible .team-journey-copy { transform: none; }
  .profile-editorial-hero { display: flex; height: auto; min-height: 0; flex-direction: column; overflow: hidden; }
  .profile-editorial-top { position: relative; inset: auto; flex-wrap: wrap; padding: 24px var(--pad) 18px; }
  .profile-editorial-top .breadcrumbs { width: 100%; }
  .profile-back-link { margin-left: auto; }
  .profile-editorial-photo { position: relative; inset: auto; order: 2; width: 100%; height: 430px; }
  .profile-editorial-photo::before { background: linear-gradient(0deg, #080908 0, transparent 30%); }
  .profile-editorial-photo::after { inset: 20px var(--pad); }
  .profile-editorial-photo img,
  .profile-person-3 .profile-editorial-photo img,
  .profile-person-4 .profile-editorial-photo img,
  .profile-person-5 .profile-editorial-photo img,
  .profile-person-6 .profile-editorial-photo img { width: min(100%, 470px); object-position: center 18%; }
  .profile-person-2 .profile-editorial-photo img { object-position: center 24%; }
  .profile-person-6 .profile-editorial-photo img { object-position: 48% 28%; }
  .profile-editorial-intro { position: relative; inset: auto; order: 3; width: 100%; padding: 0 var(--pad) 54px; margin-top: -72px; }
  .profile-editorial-intro h1 { font-size: clamp(2.8rem, 13vw, 4.2rem); }
  .profile-editorial-intro .profile-role { margin-top: 12px; }
  .profile-summary { font-size: 1rem; }
  .profile-hero-index { right: var(--pad); bottom: 24px; }
  .profile-editorial-body { display: block; width: auto; margin: 0; padding: 72px var(--pad) 90px; }
  .profile-editorial-aside { position: static; padding-right: 0; }
  .profile-biography { margin-top: 64px; }
  .profile-biography > header h2 { font-size: clamp(2.25rem, 10vw, 3.25rem); }
  .profile-biography .legacy-content li { padding-right: 0; }
  .profile-sequence { grid-template-columns: 1fr; padding: 0; }
  .profile-sequence a,
  .profile-sequence a:last-child { min-height: 148px; padding: 28px var(--pad); text-align: left; border-right: 0; border-bottom: 1px solid var(--line); }
  .profile-sequence a:last-child { grid-template-columns: auto 1fr; }
  .profile-sequence a:last-child strong { grid-column: 2; }
  .profile-sequence a:last-child > span { grid-column: 1; grid-row: 2; }
}

@media (max-width: 430px) {
  .team-journey-link,
  .team-journey-item:nth-child(even) .team-journey-link { grid-template-columns: 122px minmax(0,1fr); min-height: 246px; }
  .team-journey-copy,
  .team-journey-item:nth-child(even) .team-journey-copy { padding-right: 12px; padding-left: 12px; }
  .team-journey-copy::before,
  .team-journey-item:nth-child(even) .team-journey-copy::before { left: 12px; }
  .profile-editorial-photo { height: 390px; }
}

@media (prefers-reduced-motion: reduce) {
  .team-journey-link figure img,
  .team-journey-copy,
  .team-journey-copy b i,
  .profile-sequence a { transition: none; }
  .team-journey-link:hover figure img,
  .team-journey-link:focus-visible figure img { transform: none; }
}

/* Equipo: trombinoscopio editorial único con los seis perfiles en el hero. */
.team-ensemble-hero {
  position: relative;
  isolation: isolate;
  height: clamp(720px, 52vw, 760px);
  min-height: 0;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 20%, rgba(151,202,27,.09), transparent 25%),
    linear-gradient(120deg, #ece9e2, #e4e1da 72%, #dedbd4);
}
.team-ensemble-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .2;
  background-image: repeating-linear-gradient(112deg, transparent 0 42px, rgba(20,20,20,.04) 43px, transparent 44px 90px);
  pointer-events: none;
}
.team-ensemble-watermark {
  z-index: 0;
  right: -2.5vw;
  bottom: -3.5vw;
  font-size: clamp(10rem, 22vw, 26rem);
  white-space: nowrap;
}
.team-ensemble-intro {
  position: absolute;
  z-index: 4;
  left: max(var(--pad), calc((100vw - var(--container)) / 2));
  top: 32px;
  width: min(670px, 51vw);
}
.team-ensemble-intro .breadcrumbs { margin-bottom: 30px; }
.team-ensemble-intro .eyebrow { margin: 0 0 15px; color: var(--green-dark); }
.team-ensemble-intro h1 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(3.1rem, 4.15vw, 4.85rem);
  line-height: .9;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.team-ensemble-intro > p:last-child {
  max-width: 610px;
  margin: 23px 0 0;
  color: #50504c;
  font-size: clamp(.94rem, 1vw, 1.05rem);
  line-height: 1.55;
}
.team-ensemble-line { position: absolute; z-index: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(79,110,0,.5), transparent); transform-origin: left center; pointer-events: none; }
.team-ensemble-line::after { position: absolute; right: 22%; top: -3px; width: 7px; height: 7px; content: ""; background: var(--green-bright); border-radius: 50%; }
.team-ensemble-line-a { left: 37%; top: 29%; width: 64%; transform: rotate(-7deg); }
.team-ensemble-line-b { left: -8%; bottom: 24%; width: 76%; transform: rotate(8deg); }
.team-ensemble-line-b::after { right: 14%; background: var(--pink); }
.team-ensemble-grid {
  position: absolute;
  z-index: 2;
  inset: 218px max(var(--pad), calc((100vw - var(--container)) / 2)) 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px clamp(22px, 3vw, 46px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.team-ensemble-person { --team-accent: var(--green-bright); min-width: 0; }
.team-ensemble-person.is-studio { --team-accent: var(--pink); }
.team-ensemble-person-2 { transform: translateY(-15px); }
.team-ensemble-person-3 { transform: translateY(18px); }
.team-ensemble-person-4 { transform: translateY(-8px); }
.team-ensemble-person-5 { transform: translateY(17px); }
.team-ensemble-person-6 { transform: translateY(-16px); }
.team-ensemble-person > a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(145px, 1.1fr);
  gap: 13px;
  align-items: center;
  height: 100%;
  min-height: 0;
  color: var(--ink);
  outline-offset: 5px;
}
.team-ensemble-person:nth-child(even) > a { grid-template-columns: minmax(145px, 1.1fr) minmax(0, .9fr); }
.team-ensemble-person > a:focus-visible { outline-color: var(--team-accent); }
.team-ensemble-person figure {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  height: min(100%, 228px);
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #c8c5be;
  clip-path: polygon(13% 0, 100% 0, 87% 100%, 0 100%);
  box-shadow: 0 18px 44px rgba(60,55,45,.16);
}
.team-ensemble-person:nth-child(even) figure { grid-column: 1; clip-path: polygon(0 0, 87% 0, 100% 100%, 13% 100%); }
.team-ensemble-person figure::after { position: absolute; inset: 0; content: ""; border-top: 3px solid var(--team-accent); background: linear-gradient(0deg, rgba(10,10,9,.18), transparent 42%); pointer-events: none; }
.team-ensemble-person img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(1) contrast(1.06); transform: scale(1.025); transition: filter .38s ease, transform .5s cubic-bezier(.2,.72,.2,1); }
.team-ensemble-person-1 img { object-position: center 27%; }
.team-ensemble-person-2 img { object-position: center 17%; }
.team-ensemble-person-3 img { object-position: center 14%; }
.team-ensemble-person-4 img { object-position: center 12%; }
.team-ensemble-person-5 img { object-position: center 20%; }
.team-ensemble-person-6 img { object-position: center 34%; }
.team-ensemble-meta {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  display: block;
  min-width: 0;
  padding: 18px 4px 18px 20px;
  border-left: 1px solid rgba(20,20,20,.28);
  transition: transform .3s ease;
}
.team-ensemble-person:nth-child(even) .team-ensemble-meta { grid-column: 2; padding-right: 20px; padding-left: 4px; text-align: right; border-right: 1px solid rgba(20,20,20,.28); border-left: 0; }
.team-ensemble-meta::before { position: absolute; left: -1px; top: 18px; width: 3px; height: 48px; content: ""; background: var(--team-accent); }
.team-ensemble-person:nth-child(even) .team-ensemble-meta::before { right: -1px; left: auto; }
.team-ensemble-meta small { display: block; margin-bottom: 7px; color: #5c6f28; font-size: .65rem; font-weight: 750; letter-spacing: .07em; line-height: 1.3; text-transform: uppercase; }
.team-ensemble-person.is-studio .team-ensemble-meta small { color: var(--pink-dark); }
.team-ensemble-meta h2 { margin: 0; overflow-wrap: anywhere; font-size: clamp(1.2rem, 1.55vw, 1.75rem); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.team-ensemble-meta b { display: inline-block; margin-top: 10px; color: var(--team-accent); font-size: 1.12rem; transition: transform .28s ease; }
.team-ensemble-number { position: absolute; z-index: 3; right: 0; top: -12px; color: rgba(20,20,20,.15); font-size: clamp(2.9rem, 4.5vw, 5.1rem); font-weight: 760; line-height: 1; letter-spacing: -.08em; pointer-events: none; }
.team-ensemble-person:nth-child(even) .team-ensemble-number { right: auto; left: 0; }
.team-ensemble-person > a:hover img,
.team-ensemble-person > a:focus-visible img { filter: grayscale(0) contrast(1.02); transform: scale(1.065); }
.team-ensemble-person > a:hover .team-ensemble-meta,
.team-ensemble-person > a:focus-visible .team-ensemble-meta { transform: translateX(5px); }
.team-ensemble-person:nth-child(even) > a:hover .team-ensemble-meta,
.team-ensemble-person:nth-child(even) > a:focus-visible .team-ensemble-meta { transform: translateX(-5px); }
.team-ensemble-person > a:hover .team-ensemble-meta b,
.team-ensemble-person > a:focus-visible .team-ensemble-meta b { transform: translate(3px,-3px); }

/* Perfil: hero compacto con retrato orbital; la fotografía grande pasa a la biografía. */
.profile-compact-hero {
  --profile-accent: var(--green-bright);
  position: relative;
  isolation: isolate;
  height: clamp(500px, 38vw, 560px);
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 48%, rgba(151,202,27,.12), transparent 21%),
    linear-gradient(118deg, #070807, #131512 64%, #090a09);
}
.profile-compact-hero.is-studio-profile { --profile-accent: var(--pink); background: radial-gradient(circle at 76% 48%, rgba(236,25,134,.13), transparent 21%), linear-gradient(118deg, #080708, #171116 64%, #090809); }
.profile-compact-hero::after { position: absolute; z-index: -1; right: -7%; top: -44%; width: 46%; aspect-ratio: 1; content: ""; border: 1px solid color-mix(in srgb, var(--profile-accent) 28%, transparent); border-radius: 50%; pointer-events: none; }
.profile-compact-top {
  position: absolute;
  z-index: 4;
  left: max(var(--pad), calc((100vw - var(--container)) / 2));
  right: max(var(--pad), calc((100vw - var(--container)) / 2));
  top: 26px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
}
.profile-compact-top .breadcrumbs { margin: 0; }
.profile-compact-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
  width: min(calc(100% - (var(--pad) * 2)), var(--container));
  height: 100%;
  margin: 0 auto;
  padding: 94px 0 42px;
}
.profile-compact-intro { min-width: 0; }
.profile-compact-intro .eyebrow { margin-bottom: 8px; color: var(--profile-accent); }
.profile-compact-intro h1 { max-width: 830px; margin: 0; color: var(--paper); font-size: clamp(3.25rem, 5.1vw, 5.8rem); line-height: .89; letter-spacing: -.067em; text-wrap: balance; }
.profile-compact-intro .profile-role { display: table; width: fit-content; max-width: 720px; margin: 14px 0 14px; padding: 7px 12px; color: #12130f !important; background: var(--profile-accent); font-size: clamp(.76rem, .88vw, .9rem) !important; font-weight: 750; line-height: 1.35; letter-spacing: .04em; }
.profile-compact-hero.is-studio-profile .profile-role { color: #fff !important; background: var(--pink-dark); }
.profile-compact-intro .profile-summary { max-width: 650px; margin-bottom: 18px; color: #cecece; }
.profile-compact-intro .button { min-height: 46px; }
.profile-compact-hero.is-studio-profile .button-primary { color: #fff; background: var(--pink-dark); border-color: var(--pink-dark); }
.profile-orbit-thumb {
  position: relative;
  display: grid;
  width: clamp(232px, 19vw, 270px);
  aspect-ratio: 1;
  place-items: center;
  justify-self: center;
  margin: 0;
}
.profile-orbit-thumb::before,
.profile-orbit-thumb::after { position: absolute; content: ""; border-radius: 50%; pointer-events: none; }
.profile-orbit-thumb::before { inset: 0; border: 2px dashed color-mix(in srgb, var(--profile-accent) 82%, transparent); animation: profile-orbit-spin 22s linear infinite; }
.profile-orbit-thumb::after { inset: 10px; background: conic-gradient(from 20deg, transparent 0 17%, var(--profile-accent) 18% 27%, transparent 28% 60%, color-mix(in srgb, var(--profile-accent) 76%, transparent) 61% 72%, transparent 73%); -webkit-mask: radial-gradient(circle, transparent 0 67%, #000 68% 76%, transparent 77%); mask: radial-gradient(circle, transparent 0 67%, #000 68% 76%, transparent 77%); animation: profile-orbit-spin 14s linear infinite reverse; }
.profile-orbit-thumb > span { display: block; width: calc(100% - 48px); aspect-ratio: 1; overflow: hidden; background: #d6d3cc; border: 6px solid color-mix(in srgb, var(--profile-accent) 72%, #111); border-radius: 50%; box-shadow: 0 22px 62px color-mix(in srgb, var(--profile-accent) 20%, rgba(0,0,0,.32)), inset 0 0 0 2px rgba(255,255,255,.28); }
.profile-orbit-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: grayscale(.92) contrast(1.05); }
.profile-person-1 .profile-orbit-thumb img { object-position: center 26%; }
.profile-person-2 .profile-orbit-thumb img { object-position: center 18%; }
.profile-person-3 .profile-orbit-thumb img { object-position: center 15%; }
.profile-person-4 .profile-orbit-thumb img { object-position: center 12%; }
.profile-person-5 .profile-orbit-thumb img { object-position: center 18%; }
.profile-person-6 .profile-orbit-thumb img { object-position: center 31%; }
@keyframes profile-orbit-spin { to { transform: rotate(1turn); } }

.profile-story-body {
  display: grid;
  grid-template-columns: minmax(330px, 450px) minmax(0, 780px);
  gap: clamp(56px, 7vw, 108px);
  align-items: start;
  width: min(calc(100% - (var(--pad) * 2)), 1260px);
  margin: 0 auto;
  padding: clamp(86px, 8vw, 124px) 0 clamp(98px, 9vw, 144px);
}
.profile-story-portrait {
  --portrait-accent: var(--green-bright);
  position: sticky;
  top: 150px;
  min-width: 0;
}
.profile-page .is-studio-profile + .profile-story-body .profile-story-portrait { --portrait-accent: var(--pink); }
.profile-story-portrait figure { position: relative; aspect-ratio: .76; margin: 0; overflow: hidden; background: #d4d1ca; clip-path: polygon(7% 0,100% 0,93% 100%,0 100%); box-shadow: 0 30px 72px rgba(53,47,36,.18); }
.profile-story-portrait figure::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(8,8,7,.4), transparent 44%); border-top: 4px solid var(--portrait-accent); pointer-events: none; }
.profile-story-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: grayscale(1) contrast(1.06); }
.profile-person-1 + .profile-story-body .profile-story-portrait img { object-position: center 25%; }
.profile-person-2 + .profile-story-body .profile-story-portrait img { object-position: center 17%; }
.profile-person-3 + .profile-story-body .profile-story-portrait img { object-position: center 13%; }
.profile-person-4 + .profile-story-body .profile-story-portrait img { object-position: center 11%; }
.profile-person-5 + .profile-story-body .profile-story-portrait img { object-position: center 17%; }
.profile-person-6 + .profile-story-body .profile-story-portrait img { object-position: center 31%; }
.profile-story-plate { position: relative; z-index: 2; width: calc(100% - 34px); margin: -92px 0 0 18px; padding: 18px 22px 20px; color: var(--paper); background: rgba(10,10,9,.96); border-left: 4px solid var(--portrait-accent); box-shadow: 0 18px 42px rgba(31,28,22,.2); }
.profile-story-plate small { display: block; margin-bottom: 5px; color: var(--portrait-accent); font-size: .66rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.profile-story-plate h2 { margin: 0 0 7px; overflow-wrap: anywhere; font-size: clamp(2rem, 2.8vw, 3rem); line-height: .92; letter-spacing: -.058em; }
.profile-story-plate p { margin: 0; color: #aaa; font-size: .78rem; line-height: 1.45; text-transform: uppercase; }
.profile-story-line { display: block; width: 72%; height: 1px; margin: 28px 0 0 auto; background: linear-gradient(90deg, transparent, var(--portrait-accent)); transform: rotate(-4deg); transform-origin: right center; }
.profile-story-body .profile-biography { padding-top: 8px; }

@media (max-width: 1100px) {
  .team-ensemble-hero { height: 740px; }
  .team-ensemble-intro { width: min(680px, 62vw); }
  .team-ensemble-grid { column-gap: 20px; }
  .team-ensemble-person > a { grid-template-columns: minmax(0,.82fr) minmax(124px,1.18fr); gap: 9px; }
  .team-ensemble-person:nth-child(even) > a { grid-template-columns: minmax(124px,1.18fr) minmax(0,.82fr); }
  .team-ensemble-meta { padding-left: 14px; }
  .team-ensemble-person:nth-child(even) .team-ensemble-meta { padding-right: 14px; }
  .team-ensemble-meta h2 { font-size: clamp(1.05rem, 1.8vw, 1.45rem); }
  .profile-compact-shell { grid-template-columns: minmax(0,1fr) 280px; }
  .profile-story-body { grid-template-columns: minmax(300px, 390px) minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .team-ensemble-hero { height: auto; min-height: 0; padding: 32px var(--pad) 92px; }
  .team-ensemble-hero::before { opacity: .14; }
  .team-ensemble-intro { position: relative; inset: auto; width: 100%; }
  .team-ensemble-intro .breadcrumbs { margin-bottom: 28px; }
  .team-ensemble-intro .eyebrow { margin-bottom: 13px; }
  .team-ensemble-intro h1 { max-width: 12ch; font-size: clamp(2.75rem, 12vw, 3.75rem); }
  .team-ensemble-intro > p:last-child { margin-top: 22px; font-size: .98rem; }
  .team-ensemble-watermark { right: -32vw; bottom: 4%; font-size: clamp(9rem, 47vw, 12rem); }
  .team-ensemble-line-a { left: 38%; top: 26%; width: 78%; }
  .team-ensemble-line-b { left: -28%; bottom: 21%; width: 116%; }
  .team-ensemble-grid { position: relative; inset: auto; grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: none; gap: 46px 14px; margin-top: 58px; }
  .team-ensemble-person-2,
  .team-ensemble-person-3,
  .team-ensemble-person-4,
  .team-ensemble-person-5,
  .team-ensemble-person-6 { transform: none; }
  .team-ensemble-person:nth-child(even) { margin-top: 34px; }
  .team-ensemble-person > a,
  .team-ensemble-person:nth-child(even) > a { display: block; height: auto; }
  .team-ensemble-person figure,
  .team-ensemble-person:nth-child(even) figure { width: 100%; height: auto; aspect-ratio: .79; clip-path: polygon(9% 0,100% 0,91% 100%,0 100%); }
  .team-ensemble-meta,
  .team-ensemble-person:nth-child(even) .team-ensemble-meta { width: calc(100% - 12px); margin: -25px 0 0 12px; padding: 15px 11px 13px 14px; color: var(--paper); text-align: left; background: rgba(10,10,9,.95); border: 0; border-left: 3px solid var(--team-accent); }
  .team-ensemble-meta::before,
  .team-ensemble-person:nth-child(even) .team-ensemble-meta::before { display: none; }
  .team-ensemble-meta small,
  .team-ensemble-person.is-studio .team-ensemble-meta small { margin-bottom: 5px; color: var(--team-accent); font-size: .58rem; }
  .team-ensemble-meta h2 { color: var(--paper); font-size: clamp(1.02rem, 5.3vw, 1.35rem); }
  .team-ensemble-meta b { margin-top: 7px; }
  .team-ensemble-number,
  .team-ensemble-person:nth-child(even) .team-ensemble-number { right: 7px; left: auto; top: 6px; color: rgba(255,255,255,.58); font-size: 2.7rem; }
  .team-ensemble-person > a:hover .team-ensemble-meta,
  .team-ensemble-person > a:focus-visible .team-ensemble-meta,
  .team-ensemble-person:nth-child(even) > a:hover .team-ensemble-meta,
  .team-ensemble-person:nth-child(even) > a:focus-visible .team-ensemble-meta { transform: none; }

  .profile-compact-hero { height: auto; min-height: 0; padding: 24px var(--pad) 102px; }
  .profile-compact-top { position: relative; inset: auto; display: block; }
  .profile-compact-top .breadcrumbs { margin-bottom: 18px; }
  .profile-compact-top .profile-back-link { margin-left: 0; }
  .profile-compact-shell { display: flex; width: 100%; height: auto; padding: 20px 0 0; flex-direction: column; gap: 14px; }
  .profile-orbit-thumb { order: -1; width: 168px; }
  .profile-orbit-thumb > span { width: calc(100% - 34px); border-width: 5px; }
  .profile-compact-intro { width: 100%; }
  .profile-compact-intro h1 { font-size: clamp(2.75rem, 12vw, 3.7rem); }
  .profile-compact-intro .profile-role { max-width: 100%; font-size: .74rem !important; }
  .profile-compact-intro .profile-summary { margin-bottom: 18px; font-size: .98rem; }
  .profile-compact-intro .button { min-height: 46px; margin-bottom: 20px; }
  .profile-compact-hero .profile-hero-index { right: var(--pad); bottom: 72px; }
  .profile-story-body { display: block; width: auto; margin: 0; padding: 72px var(--pad) 96px; }
  .profile-story-portrait { position: relative; top: auto; width: min(100%, 480px); margin: 0 auto; }
  .profile-story-portrait figure { aspect-ratio: .78; }
  .profile-story-plate { width: calc(100% - 20px); margin: -72px 0 0 10px; padding: 16px 18px 18px; }
  .profile-story-plate h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .profile-story-line { margin-top: 22px; }
  .profile-story-body .profile-biography { margin-top: 66px; padding-top: 0; }
}

@media (max-width: 430px) {
  .team-ensemble-hero { padding-bottom: 72px; }
  .team-ensemble-grid { column-gap: 10px; }
  .team-ensemble-meta,
  .team-ensemble-person:nth-child(even) .team-ensemble-meta { width: calc(100% - 8px); margin-left: 8px; padding-right: 8px; padding-left: 10px; }
  .team-ensemble-meta h2 { font-size: 1.02rem; }
  .profile-compact-hero { padding-bottom: 112px; }
  .profile-orbit-thumb { width: 158px; }
}

@media (prefers-reduced-motion: reduce) {
  .team-ensemble-person img,
  .team-ensemble-meta,
  .team-ensemble-meta b { transition: none; }
  .team-ensemble-person > a:hover img,
  .team-ensemble-person > a:focus-visible img { transform: none; }
  .profile-orbit-thumb::before,
  .profile-orbit-thumb::after { animation: none; }
}

/* Equipo y perfiles: WhatsApp móvil compacto, sin cubrir nombres ni controles. */
@media (max-width: 760px) {
  body.team-hub-page,
  body.profile-page {
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
  }
  body.team-hub-page .floating-tools,
  body.profile-page .floating-tools {
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(144px + env(safe-area-inset-bottom));
  }
  body.team-hub-page .whatsapp-button,
  body.profile-page .whatsapp-button,
  body.team-hub-page .whatsapp-button:hover,
  body.team-hub-page .whatsapp-button:focus-visible,
  body.profile-page .whatsapp-button:hover,
  body.profile-page .whatsapp-button:focus-visible {
    width: 56px;
    min-width: 56px;
    height: 56px;
    justify-content: center;
    border-radius: 50%;
    transform: none;
  }
  body.team-hub-page .whatsapp-button .whatsapp-label,
  body.profile-page .whatsapp-button .whatsapp-label {
    display: none;
    width: 0;
    max-width: 0;
    padding: 0;
    opacity: 0;
  }
  body.team-hub-page .whatsapp-button svg,
  body.profile-page .whatsapp-button svg {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
    padding: 14px;
  }
  body.team-hub-page .team-ensemble-hero {
    padding-bottom: calc(124px + env(safe-area-inset-bottom));
  }
  body.profile-page .profile-compact-hero {
    padding-bottom: calc(122px + env(safe-area-inset-bottom));
  }
  body.profile-page .profile-compact-intro .profile-summary {
    max-width: calc(100% - 78px);
  }
  body.profile-page .profile-compact-hero .profile-hero-index {
    top: 265px;
    right: var(--pad);
    bottom: auto;
  }
}

/* Equipo: dos zonas reales dentro de un único hero, sin solapamientos. */
@media (min-width: 761px) {
  body.team-hub-page .team-ensemble-hero {
    display: grid;
    grid-template-rows: auto minmax(540px, 1fr);
    row-gap: clamp(52px, 4vw, 68px);
    height: auto;
    min-height: 900px;
    padding: 38px max(var(--pad), calc((100vw - var(--container)) / 2)) 72px;
  }
  body.team-hub-page .team-ensemble-intro {
    position: relative;
    inset: auto;
    width: min(720px, 68vw);
  }
  body.team-hub-page .team-ensemble-grid {
    position: relative;
    inset: auto;
    width: 100%;
    height: 548px;
    min-height: 0;
    grid-template-rows: repeat(2, minmax(238px, 1fr));
    gap: clamp(48px, 3.4vw, 62px) clamp(24px, 2.6vw, 44px);
  }
  body.team-hub-page .team-ensemble-line-a {
    top: 41%;
  }
  body.team-hub-page .team-ensemble-line-b {
    bottom: 14%;
  }
  body.team-hub-page .team-ensemble-person-1 { transform: translateY(4px); }
  body.team-hub-page .team-ensemble-person-2 { transform: translateY(-7px); }
  body.team-hub-page .team-ensemble-person-3 { transform: translateY(7px); }
  body.team-hub-page .team-ensemble-person-4 { transform: translateY(-4px); }
  body.team-hub-page .team-ensemble-person-5 { transform: translateY(7px); }
  body.team-hub-page .team-ensemble-person-6 { transform: translateY(-6px); }
  body.team-hub-page .team-ensemble-person > a {
    isolation: isolate;
    min-height: 220px;
    padding: 10px 12px;
  }
  body.team-hub-page .team-ensemble-person > a::before {
    position: absolute;
    z-index: -1;
    inset: 3px 0;
    content: "";
    background: rgba(250,249,245,.68);
    clip-path: polygon(3% 0,100% 0,97% 100%,0 100%);
  }
  body.team-hub-page .team-ensemble-person:nth-child(2) > a::before,
  body.team-hub-page .team-ensemble-person:nth-child(5) > a::before {
    background: rgba(236,243,217,.72);
    clip-path: polygon(0 0,96% 0,100% 100%,4% 100%);
  }
  body.team-hub-page .team-ensemble-person:nth-child(3) > a::before,
  body.team-hub-page .team-ensemble-person:nth-child(4) > a::before {
    background: rgba(255,255,252,.54);
  }
  body.team-hub-page .team-ensemble-person.is-studio > a::before {
    background: rgba(252,229,241,.6);
  }
}

@media (min-width: 761px) and (max-width: 1400px) {
  body.team-hub-page .team-ensemble-hero {
    min-height: 940px;
  }
  body.team-hub-page .team-ensemble-grid {
    height: 560px;
  }
}

@media (min-width: 1680px) {
  body.team-hub-page .team-ensemble-hero {
    min-height: 880px;
    row-gap: 52px;
    padding-top: 34px;
    padding-bottom: 70px;
  }
  body.team-hub-page .team-ensemble-grid {
    height: 520px;
  }
}

@media (max-width: 760px) {
  body.team-hub-page .team-ensemble-intro {
    margin-bottom: 0;
  }
  body.team-hub-page .team-ensemble-grid {
    row-gap: 48px;
  }
  body.team-hub-page .team-ensemble-person > a,
  body.team-hub-page .team-ensemble-person:nth-child(even) > a {
    position: relative;
    isolation: isolate;
    padding: 7px;
  }
  body.team-hub-page .team-ensemble-person > a::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    background: rgba(250,249,245,.67);
    clip-path: polygon(4% 0,100% 0,96% 100%,0 100%);
  }
  body.team-hub-page .team-ensemble-person:nth-child(2) > a::before,
  body.team-hub-page .team-ensemble-person:nth-child(5) > a::before {
    background: rgba(236,243,217,.72);
  }
  body.team-hub-page .team-ensemble-person:nth-child(3) > a::before,
  body.team-hub-page .team-ensemble-person:nth-child(4) > a::before {
    background: rgba(255,255,252,.58);
  }
  body.team-hub-page .team-ensemble-person.is-studio > a::before {
    background: rgba(252,229,241,.64);
  }
}

/* Cada ficha conserva un único acento, ligado a la fotografía y dentro del panel. */
body.team-hub-page .team-ensemble-meta,
body.team-hub-page .team-ensemble-person:nth-child(even) .team-ensemble-meta {
  border: 0;
}
body.team-hub-page .team-ensemble-meta::before,
body.team-hub-page .team-ensemble-person:nth-child(even) .team-ensemble-meta::before {
  display: none;
}

/* Iteración 68: cabecera en dos ritmos, archivos SEO paginados y detalle de testimonios. */
html,
body { overflow-x: clip; }
.whatsapp-label { overflow: hidden; }

.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.header-search-action,
.header-primary-action { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 12px; border-radius: 999px; font-size: .9rem; font-weight: 650; transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }
.header-search-action { padding: 8px 17px; color: #ddd; border: 1px solid rgba(255,255,255,.18); }
.header-search-action b { color: var(--green-bright); font-size: 1.2rem; font-weight: 400; }

.header-primary-action { min-width: 142px; padding: 8px 17px 8px 20px; color: var(--green-bright); border: 1px solid currentColor; }

.header-search-action:hover,
.header-search-action:focus-visible { color: #fff; border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.05); transform: translateY(-1px); }
.header-primary-action:hover,
.header-primary-action:focus-visible { color: #080808; background: var(--green-bright); transform: translateY(-1px); }

.nav-mobile-tail { display: none; }

@media (min-width: 1181px) {
  .header-brand-row { border-bottom: 1px solid rgba(255,255,255,.11); }
  .header-inner,
  .site-header.is-compact .header-inner { height: 112px; gap: clamp(14px, 1.45vw, 24px); }
  
  .brand-primary-clinic,
  .site-header.is-compact .brand-primary-clinic { width: 262px !important; height: 72px !important; }
  .brand-primary-studio,
  .site-header.is-compact .brand-primary-studio { width: 252px !important; height: 74px !important; }
  .universe-switch,
  .site-header.is-compact .universe-switch { grid-template-rows: 25px 60px; width: 222px; min-width: 222px; min-height: 88px; margin: 0 0 0 clamp(16px, 1.8vw, 30px); padding: 2px 12px 3px 15px; }
  .universe-switch-logo,
  .site-header.is-compact .universe-switch-logo { height: 60px; }
  .universe-switch b,
  .site-header.is-compact .universe-switch b { width: 25px; height: 25px; font-size: 1rem; }
  .main-nav,
  .main-nav.main-nav-studio { position: static; display: block; min-width: 0; margin: 0 0 0 auto; padding: 0; background: transparent; border: 0; opacity: 1; transform: none; pointer-events: auto; }
  .main-nav > ul,
  .main-nav-studio > ul { display: flex; align-items: center; gap: 0; }
  .main-nav > ul > li { position: relative; display: flex; align-items: center; padding: 0 clamp(12px, 1.05vw, 19px); }
  .main-nav > ul > li:first-child { padding-left: 0; }
  .main-nav > ul > li:last-child { padding-right: 0; }
  .main-nav > ul > li + li::before { position: absolute; left: 0; top: 50%; width: 1px; height: 18px; content: ""; background: rgba(168,210,27,.14); transform: translateY(-50%); }
  .main-nav-studio > ul > li + li::before { background: rgba(236,25,134,.14); }
  .main-nav li > a,
  .nav-parent > a,
  .main-nav-studio li > a,
  .main-nav-studio .nav-parent > a { min-height: 64px; font-size: clamp(.86rem, .8rem + .1vw, .94rem); white-space: nowrap; }
  .main-nav-studio > ul > li { padding-right: clamp(8px, .72vw, 13px); padding-left: clamp(8px, .72vw, 13px); }
  .main-nav-studio li > a,
  .main-nav-studio .nav-parent > a { font-size: clamp(.76rem, .7rem + .1vw, .84rem); }
  .nav-mobile-tail { display: none !important; }
  .menu-toggle { display: none; }
  
}

/* Archivo editorial de blog. */
.archive-collection { width: min(calc(100% - (var(--pad) * 2)), var(--container)); margin: 0 auto; padding: clamp(64px, 7vw, 108px) 0; }
.archive-collection-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); align-items: end; gap: clamp(28px, 6vw, 100px); margin-bottom: clamp(44px, 5vw, 72px); }
.archive-collection-heading .label { margin-bottom: 12px; }
.archive-collection-heading h2 { max-width: 820px; margin: 0; font-size: clamp(2.25rem, 4vw, 4.7rem); line-height: .98; letter-spacing: -.052em; }
.archive-collection-heading > p { max-width: 560px; margin: 0; color: #555; font-size: 1.02rem; line-height: 1.62; }
.blog-archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(38px, 4.3vw, 72px) clamp(22px, 2.4vw, 38px); align-items: start; }
.blog-archive-card { position: relative; min-width: 0; }
.blog-archive-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #dedbd3; }
.blog-archive-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.03); transition: transform .55s cubic-bezier(.2,.72,.2,1), filter .3s ease; }
.blog-archive-card:hover .blog-archive-media img,
.blog-archive-card:focus-within .blog-archive-media img { filter: saturate(.98) contrast(1.03); transform: scale(1.025); }
.blog-archive-plate { position: relative; z-index: 2; width: calc(100% - 28px); min-height: 246px; margin: -54px 0 0 auto; padding: clamp(24px, 2.1vw, 34px); background: #fbfaf6; box-shadow: 0 22px 48px rgba(55,48,39,.13); }
.blog-archive-card:nth-child(3n+2) .blog-archive-plate { background: #e8efd1; }
.blog-archive-card.is-studio-topic .blog-archive-plate { background: #f6dce9; }
.blog-archive-plate > p { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; color: var(--green-dark); font-size: .78rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.blog-archive-card.is-studio-topic .blog-archive-plate > p { color: var(--pink-dark); }
.blog-archive-plate h3 { margin: 0 0 14px; font-size: clamp(1.3rem, 1.55vw, 1.75rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.blog-archive-date { display: block; margin: -4px 0 16px; color: #74746e; font-size: .76rem; font-weight: 650; letter-spacing: .055em; text-transform: uppercase; }
.blog-archive-plate > span { display: block; color: #555; font-size: .96rem; line-height: 1.58; }
.blog-archive-cta { display: inline-flex; align-items: center; gap: 14px; margin-top: 20px; color: var(--green-dark); font-size: .9rem; font-weight: 700; }
.blog-archive-card.is-studio-topic .blog-archive-cta { color: var(--pink-dark); }
.blog-archive-cta b { transition: transform .2s ease; }
.blog-archive-cta:hover b,
.blog-archive-cta:focus-visible b { transform: translate(3px,-3px); }

/* Archivo visual de testimonios, siempre con la imagen propia del caso. */
.testimonial-archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 52px) clamp(20px, 2.5vw, 38px); }
.testimonial-archive-card { position: relative; min-width: 0; overflow: hidden; background: #faf9f5; box-shadow: 0 18px 44px rgba(58,51,42,.1); }
.testimonial-archive-card:nth-child(3n+2) { background: #eaf0d8; }
.testimonial-archive-media { display: grid; height: 300px; place-items: center; padding: 18px; overflow: hidden; background: #e7e4dc; }
.testimonial-archive-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease, filter .3s ease; }
.testimonial-archive-card:hover .testimonial-archive-media img,
.testimonial-archive-card:focus-within .testimonial-archive-media img { transform: scale(1.025); }
.testimonial-archive-media.is-fallback img { width: 100%; object-fit: cover; }

.testimonial-archive-copy > p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0 0 16px; color: var(--green-dark); font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.testimonial-archive-copy > p time { color: #777; font-weight: 500; }
.testimonial-archive-copy h3 { margin: 0 0 16px; font-size: clamp(1.32rem, 1.55vw, 1.72rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.testimonial-archive-copy > div { color: #505050; font-size: .98rem; line-height: 1.62; }
.testimonial-archive-copy > a { display: inline-flex; gap: 14px; align-items: center; margin-top: 22px; color: var(--green-dark); font-size: .91rem; font-weight: 700; }
.testimonial-archive-index { position: absolute; right: 18px; top: 18px; display: grid; width: 38px; height: 38px; place-items: center; color: #fff; background: rgba(18,18,18,.82); border-radius: 50%; font-size: .7rem; font-weight: 750; }

.archive-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin-top: clamp(52px, 6vw, 86px); padding-top: 26px; border-top: 1px solid var(--line-dark); }
.archive-pagination > div:last-child { text-align: right; }
.pagination-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.pagination-numbers a,
.pagination-numbers span { display: inline-grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line-dark); border-radius: 50%; font-size: .9rem; }
.pagination-numbers .is-current { color: #fff; background: var(--ink); border-color: var(--ink); }
.pagination-direction { display: inline-flex; min-height: 44px; align-items: center; gap: 12px; color: var(--green-dark); font-weight: 700; }
.pagination-direction.is-disabled { color: #999; }

/* El detalle de un testimonio crece por contenido: título, resumen y foto nunca se montan. */
.testimonial-detail-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); align-items: center; gap: clamp(42px, 7vw, 116px); min-height: 0; padding: clamp(58px, 7vw, 102px) max(var(--pad), calc((100vw - var(--container)) / 2 + var(--pad))); }
.testimonial-detail-heading { min-width: 0; }
.testimonial-detail-heading h1 { max-width: 930px; margin: 0; font-size: clamp(2.2rem, 3.35vw, 4.25rem); line-height: .98; letter-spacing: -.052em; text-wrap: balance; overflow-wrap: anywhere; }
.testimonial-detail-heading .inner-summary { max-width: 760px; margin: 0 0 24px; color: #d2d2d2; font-size: clamp(1.02rem, 1.2vw, 1.2rem); line-height: 1.58; }
.testimonial-detail-media { display: grid; width: min(100%, 420px); min-height: 320px; max-height: 470px; place-items: center; justify-self: end; margin: 0; padding: clamp(18px, 2vw, 28px); overflow: hidden; background: #f4f1e9; box-shadow: 0 24px 64px rgba(0,0,0,.32); }
.testimonial-detail-media img { width: auto; max-width: 100%; height: auto; max-height: 410px; object-fit: contain; }
.testimonial-detail-media.is-fallback img { width: 100%; }
.testimonial-detail-layout { grid-template-columns: minmax(150px, .28fr) minmax(0, 1fr) minmax(210px, .36fr); align-items: start; }
.testimonial-page .article-content img { width: auto; max-width: min(100%, 420px); height: auto; max-height: 560px; margin-right: auto; margin-left: auto; object-fit: contain; }
.testimonial-page .article-content figure { max-width: 760px; margin-right: auto; margin-left: auto; }

@media (max-width: 1180px) {
  .header-brand-row { border-bottom: 1px solid rgba(255,255,255,.09); }
  .header-inner,
  .site-header.is-compact .header-inner { height: 88px; }
  .header-actions { display: none; }
  .menu-toggle { display: flex; align-items: center; gap: 10px; margin-left: auto; }
  .main-nav,
  .main-nav.main-nav-studio { position: fixed; inset: 130px 0 auto; display: grid; max-height: calc(100dvh - 130px); gap: 0; overflow-y: auto; padding: 18px var(--pad) 30px; background: #050505; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(-140%); pointer-events: none; transition: transform .28s ease, opacity .2s ease; }
  .main-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .main-nav > ul,
  .main-nav-studio > ul { display: block; }
  .main-nav > ul > li { padding: 0; border-bottom: 1px solid var(--line); }
  .main-nav > ul > li::before { display: none !important; }
  .main-nav li > a,
  .main-nav-studio li > a,
  .nav-parent > a,
  .main-nav-studio .nav-parent > a { width: 100%; min-height: 54px; font-size: 1rem; white-space: normal; }
  .nav-mobile-tail { display: block; }
  .nav-mobile-tail .nav-cta { width: auto; margin: 16px 0; }
  .nav-mobile-tail .nav-cta.is-studio-action { color: var(--pink); }
  .topic-nav { top: 130px; }
  .blog-archive-grid,
  .testimonial-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testimonial-detail-hero { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
  
  .testimonial-detail-layout .author-card { grid-column: 2; }
}

@media (max-width: 760px) {
  .header-inner,
  .site-header.is-compact .header-inner { height: 80px; }
  .brand-primary-clinic,
  .site-header.is-compact .brand-primary-clinic { width: 146px !important; height: 42px !important; }
  .brand-primary-studio,
  .site-header.is-compact .brand-primary-studio { width: 140px !important; height: 42px !important; }
  .universe-switch,
  .site-header.is-compact .universe-switch { grid-template-rows: 20px 46px; width: 146px; min-width: 146px; min-height: 72px; margin-left: 3px; padding: 2px 7px 3px 9px; }
  .universe-switch-logo,
  .site-header.is-compact .universe-switch-logo { height: 46px; }
  .universe-switch b,
  .site-header.is-compact .universe-switch b { width: 20px; height: 20px; font-size: .84rem; }
  .main-nav,
  .main-nav.main-nav-studio { inset: 138px 0 auto; max-height: calc(100dvh - 138px); }
  .topic-nav { top: 138px; }
  .archive-collection { width: calc(100% - 32px); padding: 58px 0; }
  .archive-collection-heading { grid-template-columns: 1fr; align-items: start; margin-bottom: 38px; }
  .archive-collection-heading h2 { font-size: clamp(2.1rem, 10vw, 3.2rem); }
  .blog-archive-grid,
  .testimonial-archive-grid { grid-template-columns: 1fr; gap: 38px; }
  .blog-archive-plate { width: calc(100% - 16px); min-height: 0; margin-top: -36px; }
  .testimonial-archive-media { height: 260px; }
  .testimonial-archive-copy { min-height: 0; }
  .archive-pagination { grid-template-columns: 1fr 1fr; }
  .pagination-numbers { grid-column: 1 / -1; grid-row: 1; }
  .archive-pagination > div:first-child { grid-column: 1; grid-row: 2; }
  .archive-pagination > div:last-child { grid-column: 2; grid-row: 2; }
  
  .testimonial-detail-heading h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); line-height: 1.02; }
  .testimonial-detail-media { width: min(100%, 360px); min-height: 250px; max-height: 420px; justify-self: center; }
  
  .testimonial-detail-layout,
  .testimonial-detail-layout .author-card { grid-template-columns: 1fr; grid-column: auto; }
  .whatsapp-button,
  .whatsapp-button:hover,
  .whatsapp-button:focus-visible { width: 56px; height: 56px; }
  .whatsapp-button .whatsapp-label { display: none; }
  .whatsapp-button svg { flex-basis: 56px; width: 56px; height: 56px; padding: 14px; }
}

@media (max-width: 430px) {
  .brand-primary-clinic,
  .site-header.is-compact .brand-primary-clinic { width: 126px !important; }
  .brand-primary-studio,
  .site-header.is-compact .brand-primary-studio { width: 122px !important; }
  .universe-switch,
  .site-header.is-compact .universe-switch { width: 126px; min-width: 126px; }
  .menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-archive-media img,
  .testimonial-archive-media img { transition: none; transform: none !important; }
}

/* Iteración 69: heroes de artículos fluidos y tres patrones editoriales por contenido. */
.article-page:not(.testimonial-page) .article-hero {
  height: auto;
  min-height: 620px;
  align-items: stretch;
}
.article-page:not(.testimonial-page) .article-hero-copy {
  position: relative;
  min-width: 0;
  min-height: 620px;
  justify-content: center;
  padding-top: clamp(62px, 6vw, 92px);
  padding-bottom: clamp(76px, 7vw, 112px);
}
.article-page:not(.testimonial-page) .article-hero h1 {
  max-width: 900px;
  font-size: clamp(2.2rem, 2.35vw, 3.1rem);
  line-height: .98;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.article-page:not(.testimonial-page) .article-hero-copy > .inner-summary {
  max-width: 720px;
  margin-bottom: 26px;
  line-height: 1.58;
}
.article-page:not(.testimonial-page) .article-hero .article-meta {
  position: static;
  width: 100%;
  margin-top: 0;
  padding: 0;
}
.article-page:not(.testimonial-page) .article-hero-media {
  position: relative;
  align-self: stretch;
  height: auto;
  min-height: 620px;
}
.article-page:not(.testimonial-page) .article-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-page:not(.testimonial-page) .article-hero-media.is-contained {
  background: radial-gradient(circle at 50% 46%, #303127, #171713 72%);
}
.article-page:not(.testimonial-page) .article-hero-media.is-contained img {
  inset: clamp(26px, 3vw, 52px);
  width: calc(100% - clamp(52px, 6vw, 104px));
  height: calc(100% - clamp(52px, 6vw, 104px));
  object-fit: contain;
}

.article-editorial-module {
  width: min(100%, 1040px);
  margin: 0 0 clamp(66px, 8vw, 108px);
  color: var(--ink);
}
.article-editorial-module .label {
  margin: 0 0 14px;
  color: var(--green-dark);
}
.article-editorial-module h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: clamp(2rem, 3.2vw, 3.55rem);
  line-height: .98;
  text-wrap: balance;
}

/* Patrón A: relato y material pequeño/vertical en dos planos. */
.editorial-story-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .72fr);
  gap: clamp(42px, 7vw, 92px);
  align-items: start;
  padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 4vw, 46px);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.editorial-story-copy blockquote {
  position: relative;
  max-width: 690px;
  margin: clamp(38px, 5vw, 70px) 0 0;
  padding: 28px 0 0 clamp(28px, 3vw, 48px);
  color: #1b1b1b;
  background: transparent;
  border: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.35rem, 2.15vw, 2.15rem);
  font-style: italic;
  line-height: 1.42;
}
.editorial-story-copy blockquote::before {
  position: absolute;
  left: 0;
  top: 0;
  content: '“';
  color: var(--green);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 5rem;
  font-style: normal;
  line-height: 1;
}
.editorial-story-copy blockquote p,
.editorial-key-media blockquote p { margin: 0; }
.editorial-story-media {
  width: min(100%, 370px);
  justify-self: end;
  margin: 0;
  padding: 18px;
  background: #e8e4da;
  box-shadow: 0 22px 60px rgba(66,55,39,.14);
}
.editorial-story-media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 500px;
  margin: auto;
  object-fit: contain;
}
.editorial-story-media.is-portrait,
.editorial-story-media.is-low-resolution { max-width: 340px; }
.editorial-story-media figcaption {
  margin-top: 14px;
  color: #666;
  font-size: .86rem;
  line-height: 1.5;
}
.editorial-story-media > p {
  margin: 20px 0 0;
  padding-top: 18px;
  color: #484848;
  border-top: 1px solid rgba(18,18,18,.16);
  font-size: .96rem;
  line-height: 1.62;
}

/* Patrón B: el hero hace de introducción split; el cuerpo gana medida editorial. */
.article-pattern-b .article-content > p:first-of-type {
  max-width: 850px;
  color: #333;
  font-size: clamp(1.16rem, 1.4vw, 1.36rem);
  line-height: 1.7;
}
.article-pattern-b .article-content > p:first-of-type::first-letter {
  float: left;
  margin: .08em .12em 0 0;
  color: var(--green-dark);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.8em;
  line-height: .76;
}

/* Patrón C: mapa de apartados reales y una segunda imagen con cita existente. */
.editorial-key-points {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr);
  gap: clamp(44px, 7vw, 92px);
  align-items: center;
  padding: clamp(42px, 5vw, 68px);
  background: #e7eadb;
}
.editorial-key-copy ol {
  display: grid;
  gap: 0;
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
}
.editorial-key-copy li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 15px;
  align-items: baseline;
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid rgba(50,68,18,.24);
}
.editorial-key-copy li:last-child { border-bottom: 1px solid rgba(50,68,18,.24); }
.editorial-key-copy li > span {
  color: var(--green-dark);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  letter-spacing: .08em;
}
.editorial-key-copy li > a {
  color: #20231a;
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  font-weight: 680;
  line-height: 1.28;
  text-decoration: none;
}
.editorial-key-copy li > a:hover,
.editorial-key-copy li > a:focus-visible { color: var(--green-dark); text-decoration: underline; text-underline-offset: 4px; }
.editorial-key-media {
  display: grid;
  align-items: end;
  width: min(100%, 480px);
  justify-self: end;
  margin: 0;
}
.editorial-key-media img {
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: contain;
  background: #d8ddc7;
}
.editorial-key-media.is-portrait img,
.editorial-key-media.is-low-resolution img {
  width: auto;
  max-width: min(100%, 360px);
  justify-self: center;
}
.editorial-key-media blockquote {
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  width: calc(100% - 32px);
  max-width: none;
  margin: 0 16px -42px;
  padding: 22px 24px;
  color: #f5f4ef;
  background: rgba(12,14,10,.94);
  border: 0;
  box-shadow: 0 18px 40px rgba(55,64,34,.2);
  font-size: clamp(1rem, 1.2vw, 1.16rem);
  line-height: 1.52;
}
.editorial-key-media figcaption {
  margin: 56px 16px 0;
  color: #5d6250;
  font-size: .86rem;
  line-height: 1.5;
}

/* Las imágenes verticales o modestas nunca se fuerzan al ancho del artículo. */
.article-page .article-content img.legacy-image-portrait,
.article-page .article-content img.is-low-resolution {
  width: auto !important;
  max-width: min(100%, 380px) !important;
  height: auto !important;
  max-height: 600px;
  object-fit: contain;
}
.article-page .article-content .legacy-media:has(img.legacy-image-portrait),
.article-page .article-content .legacy-media:has(img.is-low-resolution),
.article-page .article-content .elementor-widget-image:has(img.legacy-image-portrait),
.article-page .article-content .elementor-widget-image:has(img.is-low-resolution) {
  width: min(100%, 430px);
  min-height: 0;
  margin-right: auto;
  margin-left: auto;
  padding: clamp(18px, 2.5vw, 30px);
  background: #e7e4dc;
}
.article-pattern-c .article-content .elementor > .elementor-top-section:nth-of-type(3n+2):has(img) {
  width: min(94%, 980px);
  margin-left: auto;
}

@media (max-width: 1180px) {
  .article-page:not(.testimonial-page) .article-hero,
  .article-page:not(.testimonial-page) .article-hero-copy,
  .article-page:not(.testimonial-page) .article-hero-media { min-height: 580px; }
  .editorial-story-split,
  .editorial-key-points { gap: 42px; }
}

@media (max-width: 760px) {
  .article-page:not(.testimonial-page) .article-hero { display: flex; min-height: 0; }
  .article-page:not(.testimonial-page) .article-hero-copy {
    min-height: 0;
    padding: 46px 20px 58px;
  }
  .article-page:not(.testimonial-page) .article-hero h1 { font-size: clamp(1.7rem, 7vw, 2.6rem); }
  .article-page:not(.testimonial-page) .article-hero-media {
    height: 300px;
    min-height: 300px;
  }
  .article-page:not(.testimonial-page) .article-hero-media img { position: static; }
  .article-page:not(.testimonial-page) .article-hero-media.is-contained img {
    width: calc(100% - 36px);
    height: calc(100% - 36px);
    margin: 18px;
  }
  .article-editorial-module { margin-bottom: 62px; }
  .editorial-story-split,
  .editorial-key-points {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 32px 20px 38px;
  }
  .editorial-story-copy blockquote { margin-top: 30px; padding-left: 34px; }
  
  .editorial-key-media blockquote { position: relative; grid-row: 2; width: calc(100% - 18px); margin: -34px 9px 0; }
  .editorial-key-media figcaption { margin: 16px 9px 0; }
  .article-pattern-b .article-content > p:first-of-type::first-letter { float: none; margin: 0; font: inherit; color: inherit; }
  .article-pattern-c .article-content .elementor > .elementor-top-section:nth-of-type(3n+2):has(img) { width: 100%; }
}

/* Índice de conservación de las rutas históricas de WordPress. */
.legacy-archive-index {
  width: min(100% - 48px, 1320px);
  margin: 0 auto;
  padding: clamp(72px, 8vw, 128px) 0;
}
.legacy-archive-note {
  display: grid;
  grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr);
  gap: 32px;
  margin-bottom: clamp(64px, 7vw, 104px);
  padding: 28px 0;
  border-top: 1px solid rgba(104, 145, 5, .36);
  border-bottom: 1px solid rgba(22, 24, 18, .14);
}
.legacy-archive-note strong { font-size: clamp(1.22rem, 1.8vw, 1.68rem); line-height: 1.18; }
.legacy-archive-note p { max-width: 750px; margin: 0; color: #53584a; font-size: 1.06rem; line-height: 1.65; }
.legacy-archive-group {
  display: grid;
  grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr);
  gap: clamp(36px, 7vw, 110px);
  padding: clamp(44px, 5vw, 72px) 0;
  border-top: 1px solid rgba(22, 24, 18, .14);
}
.legacy-archive-group h2 { max-width: 520px; margin: 12px 0 20px; font-size: clamp(1.8rem, 3vw, 3.2rem); line-height: 1.02; text-wrap: balance; }
.legacy-archive-group > div > p:last-child { max-width: 560px; margin: 0; color: #5d6254; font-size: 1.02rem; line-height: 1.65; }
.legacy-archive-group ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.legacy-archive-group li { border-bottom: 1px solid rgba(22, 24, 18, .12); }
.legacy-archive-group a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  min-height: 64px;
  padding: 16px 4px;
  color: #181a15;
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
}
.legacy-archive-group a b { color: var(--green); font-size: 1.35rem; transition: transform .2s ease; }
.legacy-archive-group a:hover,
.legacy-archive-group a:focus-visible { color: var(--green-dark); }
.legacy-archive-group a:hover b,
.legacy-archive-group a:focus-visible b { transform: translate(3px, -3px); }
.legacy-snapshot-header > div {
  width: min(100% - 48px, 1180px);
  margin: 0 auto;
  padding: clamp(72px, 8vw, 128px) 0;
}
.legacy-snapshot-header h1 { max-width: 950px; margin: 18px 0 24px; font-size: clamp(2.2rem, 5vw, 5.8rem); line-height: .98; text-wrap: balance; }
.legacy-snapshot-header > div > p:not(.eyebrow) { max-width: 760px; margin: 0 0 32px; color: rgba(255,255,255,.74); font-size: 1.08rem; line-height: 1.65; }
.legacy-snapshot-shell {
  width: min(100% - 48px, 1180px);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 120px) 0;
}
.legacy-snapshot-warning {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) minmax(0, 1.58fr);
  gap: 32px;
  margin-bottom: 56px;
  padding: 26px 0;
  border-top: 2px solid var(--green);
  border-bottom: 1px solid rgba(22, 24, 18, .14);
}
.legacy-snapshot-warning strong { font-size: 1.14rem; }
.legacy-snapshot-warning p { max-width: 780px; margin: 0; color: #565b4e; line-height: 1.65; }
.legacy-snapshot-page .legacy-content { max-width: 920px; margin: 0 auto; }

/* Directorio completo de las taxonomías históricas de WordPress. */
.taxonomy-directory {
  width: min(100% - 48px, var(--container));
  margin: clamp(28px, 4vw, 54px) auto 0;
  scroll-margin-top: 210px;
  border-top: 1px solid rgba(22, 24, 18, .18);
  border-bottom: 1px solid rgba(22, 24, 18, .18);
}
.taxonomy-directory summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  min-height: 62px;
  padding: 12px 2px;
  color: var(--ink);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  font-weight: 720;
  cursor: pointer;
  list-style: none;
}
.taxonomy-directory summary::-webkit-details-marker { display: none; }
.taxonomy-directory summary::after {
  content: '+';
  order: 3;
  color: var(--green);
  font-size: 1.45rem;
  font-weight: 500;
}
.taxonomy-directory[open] summary::after { content: '−'; }
.taxonomy-directory summary span {
  margin-left: auto;
  color: #65695f;
  font-size: .82rem;
  font-weight: 600;
}
.taxonomy-directory-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 64px);
  padding: 4px 0 28px;
}
.taxonomy-directory-links a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 50px;
  padding: 10px 2px 10px calc((var(--taxonomy-depth, 1) - 1) * 10px + 2px);
  color: #30342c;
  border-bottom: 1px solid rgba(22, 24, 18, .1);
  font-size: .96rem;
  line-height: 1.35;
  text-decoration: none;
}
.taxonomy-directory-links a::before {
  content: '';
  width: calc(14px + (var(--taxonomy-depth, 1) - 1) * 5px);
  height: 1px;
  margin-right: 10px;
  background: color-mix(in srgb, var(--green) 58%, transparent);
  grid-column: 1;
  grid-row: 1;
}
.taxonomy-directory-links a span { grid-column: 1; grid-row: 1; padding-left: calc(24px + (var(--taxonomy-depth, 1) - 1) * 5px); }
.taxonomy-directory-links a b { color: var(--green-dark); font-size: .8rem; }
.taxonomy-directory-links a:hover,
.taxonomy-directory-links a:focus-visible,
.taxonomy-directory-links a[aria-current="page"] { color: var(--green-dark); }
.taxonomy-directory-links a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

@media (max-width: 760px) {
  .legacy-archive-index { width: min(100% - 36px, 1320px); padding: 64px 0 80px; }
  .legacy-archive-note,
  .legacy-archive-group { grid-template-columns: 1fr; gap: 20px; }
  .legacy-archive-note { margin-bottom: 48px; }
  .legacy-archive-group { padding: 44px 0; }
  .legacy-archive-group a { min-height: 58px; }
  .legacy-snapshot-header > div,
  .legacy-snapshot-shell { width: min(100% - 36px, 1180px); }
  .legacy-snapshot-warning { grid-template-columns: 1fr; gap: 14px; }
  .taxonomy-directory { width: min(100% - 36px, var(--container)); margin-top: 26px; scroll-margin-top: 190px; }
  .archive-page .topic-nav { position: relative; top: auto; }
  .taxonomy-directory summary { min-height: 58px; }
  .taxonomy-directory summary span { display: none; }
  .taxonomy-directory-links { grid-template-columns: 1fr; padding-bottom: 22px; }
  .taxonomy-directory-links a { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .legacy-archive-group a b { transition: none; }
}

/* Iteración 79: cabecera superior unificada y ritmo editorial de artículos. */
.contact-rail { height: 48px; }
.contact-rail-inner { justify-content: space-between; gap: 28px; }
.contact-rail-spaces { display: flex; min-width: 0; align-items: center; gap: clamp(18px, 2.2vw, 38px); }
.contact-rail .header-actions { display: flex; flex: 0 0 auto; gap: 8px; margin-left: auto; }
.contact-rail .header-search-action,
.contact-rail .header-primary-action { min-height: 34px; padding: 5px 14px; font-size: .78rem; }
.contact-rail .header-primary-action { min-width: 116px; }
.contact-rail .header-search-action b { font-size: 1.05rem; }
.header-brand-row .header-inner { justify-content: flex-start; }
.header-brand-row .menu-toggle { margin-left: auto; }


/* Las categorías de testimonios forman una banda compacta, no una tabla flotante. */
.testimonials-page .testimony-topics,
.testimonial-category-page .testimony-topics {
  position: relative;
  top: auto;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: min(calc(100% - (var(--pad) * 2)), var(--container));
  margin: clamp(26px, 3vw, 42px) auto 0;
  padding: 7px 0;
  overflow: visible;
  background: transparent;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.testimonials-page .testimony-topics a,
.testimonial-category-page .testimony-topics a {
  position: relative;
  min-width: 0;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  padding: 10px clamp(12px, 1.3vw, 19px);
  border: 0;
  font-size: .85rem;
  white-space: normal;
}
.testimonials-page .testimony-topics a + a::before,
.testimonial-category-page .testimony-topics a + a::before {
  position: absolute;
  left: 0;
  top: 13px;
  bottom: 13px;
  width: 1px;
  content: "";
  background: rgba(20,20,20,.12);
}
.testimonials-page .testimony-topics a:hover,
.testimonials-page .testimony-topics a:focus-visible,
.testimonials-page .testimony-topics a.is-active,
.testimonial-category-page .testimony-topics a:hover,
.testimonial-category-page .testimony-topics a:focus-visible,
.testimonial-category-page .testimony-topics a.is-active { color: #fff; background: var(--ink); }
.testimonials-page .testimony-topics a.is-active span,
.testimonial-category-page .testimony-topics a.is-active span { color: var(--green-bright); }

/* Proporción 58/42: texto e imagen se leen como una única composición. */
.article-editorial-module { width: min(100%, 1120px); }
.article-editorial-module h2 { font-size: clamp(1.75rem, 2.45vw, 2.75rem); line-height: 1; }
.editorial-story-split,
.editorial-key-points { grid-template-columns: minmax(0, 58fr) minmax(300px, 42fr); gap: clamp(30px, 4.2vw, 58px); }
.editorial-story-copy blockquote {
  max-width: 650px;
  margin-top: clamp(26px, 3vw, 42px);
  font-size: clamp(1.2rem, 1.55vw, 1.68rem);
  line-height: 1.5;
}
.editorial-story-media,
.editorial-story-media.is-portrait,
.editorial-story-media.is-low-resolution,
.editorial-key-media { width: 100%; max-width: none; justify-self: stretch; }
.editorial-story-media img { max-height: 580px; }
.testimonial-fragment-module .editorial-story-media { align-self: start; }
.testimonial-fragment-module .editorial-story-media > p { font-size: .92rem; line-height: 1.62; }

.legacy-media-row {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(260px, 42fr);
  gap: clamp(28px, 4.2vw, 58px);
  align-items: start;
  width: min(100%, 1060px);
  margin: clamp(42px, 6vw, 72px) 0;
  padding: clamp(24px, 3vw, 38px) 0;
  border-top: 1px solid rgba(22,24,18,.13);
  border-bottom: 1px solid rgba(22,24,18,.13);
}
.legacy-media-row-copy { min-width: 0; align-self: center; }
.legacy-media-row-copy > p { max-width: 650px; margin: 0 0 18px; }
.legacy-media-row-copy > p:last-of-type { margin-bottom: 0; }
.article-content .legacy-media-row > figure,
.article-content .legacy-media-row > .wp-block-image {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 0;
  place-items: center;
  margin: 0;
  padding: clamp(12px, 1.6vw, 20px);
  background: #e6e3db;
}
.article-content .legacy-media-row img,
.article-content .legacy-media-row img.legacy-image-portrait,
.article-content .legacy-media-row img.is-low-resolution {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 620px;
  object-fit: contain;
}

/* Un único componente ambiental, siempre por detrás y anclado abajo a la izquierda. */
.section-wordmark { z-index: 0; left: -2.5vw; right: auto; bottom: -.08em; }
.team-ensemble-watermark { left: -2.5vw; right: auto; bottom: -3vw; }
.nutrition-wordmark,
.treatments-wordmark { left: -2.5vw; bottom: -.08em; }
.contact-map-city { left: -18px; bottom: -40px; }

@media (max-width: 1180px) {
  .contact-rail { height: 42px; }
  .contact-rail-inner { display: flex; }
  .contact-rail-spaces { width: 100%; justify-content: center; }
  .contact-rail .header-actions { display: none; }
  .testimonials-page .testimony-topics,
  .testimonial-category-page .testimony-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .contact-rail { height: 58px; }
  .contact-rail-inner { padding: 0 12px; }
  .contact-rail-spaces { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .testimonials-page .testimony-topics,
  .testimonial-category-page .testimony-topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc(100% - 32px);
    margin-top: 20px;
  }
  .testimonials-page .testimony-topics a,
  .testimonial-category-page .testimony-topics a { min-height: 50px; padding: 9px 12px; font-size: .8rem; }
  .testimonials-page .testimony-topics a:nth-child(odd)::before,
  .testimonial-category-page .testimony-topics a:nth-child(odd)::before { display: none; }

  .article-editorial-module h2 { font-size: clamp(1.35rem, 6vw, 1.7rem); }
  .editorial-story-split,
  .editorial-key-points,
  .legacy-media-row {
    grid-template-columns: minmax(0, 58fr) minmax(126px, 42fr);
    gap: 14px;
    align-items: start;
    padding: 22px 0 26px;
  }
  .editorial-story-copy blockquote { margin-top: 22px; padding: 22px 0 0 24px; font-size: clamp(1rem, 4.2vw, 1.15rem); line-height: 1.55; }
  .editorial-story-copy blockquote::before { font-size: 3.5rem; }
  .editorial-story-media,
  .editorial-key-media { width: 100%; justify-self: stretch; padding: 8px; }
  .editorial-story-media figcaption { margin-top: 8px; font-size: .72rem; }
  .testimonial-fragment-module .editorial-story-media > p { margin-top: 10px; padding-top: 10px; font-size: .78rem; line-height: 1.5; }

  /*
   * La primera fila mantiene la lectura texto + imagen. Los textos largos que
   * acompañan a la figura dejan de quedar atrapados en la columna estrecha y
   * continúan debajo, a ancho completo y con resguardo para los accesos fijos.
   */
  .editorial-story-split > .editorial-story-copy,
  .editorial-key-points > .editorial-key-copy {
    grid-column: 1;
    grid-row: 1;
  }
  .editorial-story-split > .editorial-story-media,
  .editorial-key-points > .editorial-key-media { display: contents; }
  .editorial-story-split > .editorial-story-media > img,
  .editorial-key-points > .editorial-key-media > img {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: stretch;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0;
    padding: 8px;
    object-fit: contain;
    background: #e6e3db;
  }
  .editorial-key-points > .editorial-key-media > blockquote {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: start;
    width: 100%;
    margin: 20px 0 0;
    padding: 24px 76px 24px 24px;
    font-size: clamp(.98rem, 4.1vw, 1.08rem);
    line-height: 1.58;
  }
  .editorial-key-points > .editorial-key-media > figcaption,
  .editorial-story-split > .editorial-story-media > figcaption {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    margin: 12px 0 0;
    padding: 0 76px 0 0;
    font-size: .78rem;
    line-height: 1.55;
  }
  .editorial-story-split > .editorial-story-media > figcaption { grid-row: 2; }
  .editorial-story-split > .editorial-story-media > p,
  .testimonial-fragment-module > .editorial-story-media > p {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    margin: 10px 0 0;
    padding: 16px 76px 0 0;
    border-top: 1px solid rgba(22,24,18,.16);
    font-size: .9rem;
    line-height: 1.62;
  }
  .legacy-media-row { margin: 38px 0; }
  .legacy-media-row-copy { font-size: .9rem; line-height: 1.58; }
  .legacy-media-row-copy > p { margin-bottom: 12px; }
  .article-content .legacy-media-row > figure,
  .article-content .legacy-media-row > .wp-block-image { padding: 8px; }
  .team-ensemble-watermark { left: -10vw; right: auto; bottom: 4%; }
  .nutrition-wordmark,
  .treatments-wordmark { left: -8vw; }
  .contact-map-city { left: -8vw; top: auto; bottom: -10px; font-size: clamp(6rem, 30vw, 8rem); }
}

@media (max-width: 340px) {
  .editorial-story-split,
  .editorial-key-points,
  .legacy-media-row { grid-template-columns: 1fr; gap: 24px; }
  .editorial-story-split > .editorial-story-copy,
  .editorial-key-points > .editorial-key-copy { grid-column: 1; grid-row: 1; }
  .editorial-story-split > .editorial-story-media > img,
  .editorial-key-points > .editorial-key-media > img { grid-column: 1; grid-row: 2; }
  .editorial-key-points > .editorial-key-media > blockquote { grid-column: 1; grid-row: 3; }
  .editorial-key-points > .editorial-key-media > figcaption { grid-column: 1; grid-row: 4; }
  .editorial-story-split > .editorial-story-media > figcaption { grid-column: 1; grid-row: 3; }
  .editorial-story-split > .editorial-story-media > p,
  .testimonial-fragment-module > .editorial-story-media > p { grid-column: 1; grid-row: 4; }
}

/* Tres accesos Salux: 25 % Clínica, 25 % Studio y 50 % Herbolario. */
.appointment-section { grid-template-columns: 1fr 1fr 2fr; }
.appointment-copy { grid-column: 1 / -1; }

@media (max-width: 1120px) {
  .appointment-section { grid-template-columns: 1fr 1fr; }
  .herbalist-card { grid-column: 1 / -1; min-height: 260px; }
}

@media (max-width: 700px) {
  .appointment-section { grid-template-columns: 1fr; }
  .appointment-copy,
  .herbalist-card { grid-column: auto; }
  .space-card { min-height: 160px; }
  .herbalist-card { min-height: 0; aspect-ratio: 1984 / 800; }
  .herbalist-card img { object-fit: contain; }
  .herbalist-card span { right: 8px; bottom: 8px; padding: 6px 8px; font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .space-card,
  .herbalist-card::after,
  .herbalist-card img { transition: none; }
  .space-card:hover,
  .herbalist-card:hover img { transform: none; }
  .herbalist-card:hover::after { transform: translateX(-120%); }
}

/* Inicio: equipo completo en una sola visual de escritorio. */

.home-page .team-showcase .section-heading {
  align-items: end;
  margin-bottom: clamp(18px, 2vw, 30px);
}
.home-page .team-showcase .section-heading h2 {
  max-width: 780px;
  font-size: clamp(2rem, 2.8vw, 3.4rem);
  line-height: .96;
}
.home-page .team-showcase .section-heading > p { max-width: 410px; font-size: .98rem; line-height: 1.55; }
.home-page .home-team-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  max-width: 1600px;
  margin-inline: auto;
}
.home-page .home-team-grid .team-card,
.home-page .home-team-grid .team-card:nth-child(-n+2) {
  grid-column: span 1;
  display: flex;
  min-height: 0;
  grid-template-columns: none;
  grid-template-rows: none;
}
.home-page .home-team-grid .team-card:nth-child(-n+2) .team-card-image,
.home-page .home-team-grid .team-card:nth-child(2) .team-card-image,
.home-page .home-team-grid .team-card-image {
  grid-column: auto;
  grid-row: auto;
  min-height: 0;
  aspect-ratio: 4 / 3.95;
}
.home-page .home-team-grid .team-card p { padding: 15px 15px 5px; font-size: .59rem; letter-spacing: .02em; }
.home-page .home-team-grid .team-card h3,
.home-page .home-team-grid .team-card:nth-child(-n+2) h3 {
  padding: 0 30px 18px 15px;
  font-size: clamp(.92rem, 1.08vw, 1.2rem);
  line-height: 1.05;
}
.home-page .home-team-grid .team-card > span { right: 13px; bottom: 18px; }
.home-page .team-showcase-action { margin-top: 18px; }
.home-page .team-showcase-action .team-all { min-height: 42px; padding-block: 9px; }

/* Dos accesos editoriales discretos antes de las reseñas. */
.home-discovery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding: clamp(52px, 5vw, 82px) max(var(--pad), calc((100% - var(--container)) / 2));
  background: #efede7;
}
.home-discovery-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  column-gap: 30px;
  min-height: 225px;
  padding: clamp(28px, 3vw, 46px);
  overflow: hidden;
  color: var(--ink);
  background: #f7f5f0;
  border: 1px solid rgba(20,20,18,.12);
  transition: transform .28s ease, background-color .28s ease;
}
.home-discovery-card::before { content: ""; position: absolute; top: 0; left: 0; width: 82px; height: 3px; background: var(--green); }
.home-discovery-cases::before { background: var(--pink); }
.home-discovery-card > span { grid-column: 1 / -1; color: var(--green-dark); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.home-discovery-cases > span { color: var(--pink-dark); }
.home-discovery-card > strong { align-self: end; margin-top: 28px; font-size: clamp(1.65rem, 2.35vw, 2.75rem); line-height: .98; }
.home-discovery-card > p { grid-column: 1; max-width: 470px; margin: 13px 0 0; color: #5f5d58; line-height: 1.55; }
.home-discovery-card > b { grid-column: 2; grid-row: 2 / 4; align-self: end; color: inherit; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.home-discovery-card > b i { margin-left: 12px; font-style: normal; font-size: 1.2em; }
.home-discovery-card:hover { transform: translateY(-4px); background: #fff; }

/* Reseñas verificadas en el perfil de Google: cinco tarjetas compactas por página. */


.google-reviews-heading > div:last-child p { margin: 0 0 16px; color: #5e5b55; line-height: 1.6; }
.google-reviews-heading a { display: inline-flex; gap: 12px; padding-bottom: 5px; color: var(--ink); border-bottom: 1px solid var(--green); font-weight: 650; }


.google-review-card[hidden] { display: none !important; }
.google-review-author { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; }
.google-review-author > span { display: grid; width: 36px; aspect-ratio: 1; place-items: center; color: #fff; background: var(--green-dark); border-radius: 50%; font-size: .64rem; font-weight: 750; letter-spacing: .04em; }
.google-review-author > div { min-width: 0; }
.google-review-author strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.google-review-author small { display: block; margin-top: 2px; color: #77736b; font-size: .68rem; }
.google-review-author b { grid-column: 1 / -1; color: #f6ad01; font-size: .9rem; letter-spacing: .06em; }
.google-review-card blockquote { display: -webkit-box; margin: 13px 0 11px; overflow: hidden; color: #393732; font-size: clamp(.78rem, .78vw, .91rem); line-height: 1.48; -webkit-box-orient: vertical; -webkit-line-clamp: 7; }
.google-review-card > a { margin-top: auto; color: var(--green-dark); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.google-reviews-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; margin-top: 28px; }
.google-reviews-footer > p { max-width: 680px; margin: 0; color: #6b675f; font-size: .78rem; line-height: 1.55; }

.google-reviews-pagination > button,
.google-reviews-pagination div button { display: grid; width: 38px; height: 38px; place-items: center; padding: 0; color: var(--ink); background: transparent; border: 1px solid rgba(20,20,18,.26); border-radius: 50%; cursor: pointer; }
.google-reviews-pagination div { display: flex; gap: 5px; }
.google-reviews-pagination div button { width: 32px; height: 32px; border-color: transparent; font-size: .69rem; }
.google-reviews-pagination button.is-active { color: #fff; background: var(--green-dark); }
.google-reviews-pagination button:disabled { opacity: .35; cursor: default; }

/* Ajustes ópticos individuales del logo decorativo y del encuadre de tratamientos. */
.service-card-clinic .service-card-photo { object-position: var(--photo-position, 56% 50%); }
.service-card-clinic .service-card-wall-logo {
  top: var(--logo-top, 13%);
  left: var(--logo-left, 18%);
  width: var(--logo-width, 19%);
  max-width: 122px;
}
.service-card-clinic-01 { --logo-left: 18%; --logo-top: 13%; --logo-width: 19%; --photo-position: 58% 50%; }
.service-card-clinic-02 { --logo-left: 25%; --logo-top: 12%; --logo-width: 18%; --photo-position: 58% 50%; }
.service-card-clinic-03 { --logo-left: 18%; --logo-top: 14%; --logo-width: 18%; --photo-position: 60% 50%; }
.service-card-clinic-04 { --logo-left: 18%; --logo-top: 14%; --logo-width: 18%; --photo-position: 58% 50%; }
.service-card-clinic-05 { --logo-left: 37%; --logo-top: 14%; --logo-width: 17%; --photo-position: 50% 50%; }
.service-card-clinic-06 { --logo-left: 17%; --logo-top: 14%; --logo-width: 18%; --photo-position: 60% 50%; }
.service-card-clinic-07 { --logo-left: 14%; --logo-top: 13%; --logo-width: 18%; --photo-position: 57% 50%; }
.service-card-clinic-08 { --logo-left: 18%; --logo-top: 14%; --logo-width: 18%; --photo-position: 60% 50%; }
.service-card-clinic-09 { --logo-left: 17%; --logo-top: 14%; --logo-width: 18%; --photo-position: 61% 50%; }
.service-card-clinic-10 { --logo-left: 16%; --logo-top: 14%; --logo-width: 18%; --photo-position: 60% 50%; }
.service-card-clinic-11 { --logo-left: 18%; --logo-top: 13%; --logo-width: 18%; --photo-position: 58% 50%; }
.service-card-clinic-12 { --logo-left: 17%; --logo-top: 13%; --logo-width: 18%; --photo-position: 61% 50%; }
.service-card-clinic-13 { --logo-left: 17%; --logo-top: 13%; --logo-width: 18%; --photo-position: 61% 50%; }
.service-card-clinic-14 { --logo-left: 18%; --logo-top: 13%; --logo-width: 18%; --photo-position: 60% 50%; }
.service-card-clinic-15 { --logo-left: 32%; --logo-top: 13%; --logo-width: 17%; --photo-position: 52% 50%; }
.service-card-clinic-16 { --logo-left: 18%; --logo-top: 13%; --logo-width: 18%; --photo-position: 60% 50%; }
.service-card-clinic-17 { --logo-left: 17%; --logo-top: 13%; --logo-width: 18%; --photo-position: 60% 50%; }
.service-card-clinic-18 { --logo-left: 17%; --logo-top: 13%; --logo-width: 18%; --photo-position: 60% 50%; }
.service-card-clinic-19 { --logo-left: 15%; --logo-top: 13%; --logo-width: 18%; --photo-position: 59% 50%; }

@media (max-width: 1180px) {
  .home-page .home-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .google-reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .google-review-card { aspect-ratio: auto; min-height: 300px; }
}

@media (max-width: 760px) {
  .home-page .team-showcase { padding-block: 48px 56px; }
  .home-page .team-showcase .section-heading { align-items: start; margin-bottom: 28px; }
  .home-page .home-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page .home-team-grid .team-card-image { aspect-ratio: 4 / 5; }
  .home-discovery { grid-template-columns: 1fr; padding-block: 44px; }
  .home-discovery-card { display: block; min-height: 0; padding: 28px 24px; }
  .home-discovery-card > strong { display: block; margin-top: 22px; }
  .home-discovery-card > b { display: inline-block; margin-top: 22px; }
  .google-reviews { padding-block: 56px; }
  .google-reviews-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }
  .google-reviews-grid { grid-template-columns: 1fr; }
  .google-review-card { min-height: min(88vw, 390px); aspect-ratio: 1; }
  .google-reviews-footer { grid-template-columns: 1fr; }
  .google-reviews-pagination { justify-content: space-between; overflow-x: auto; padding-bottom: 4px; }
  .google-reviews-pagination div { min-width: max-content; }
}

@media (prefers-reduced-motion: reduce) {
  .home-discovery-card { transition: none; }
  .home-discovery-card:hover { transform: none; }
}

/* Iteración 100: navegación compacta, bienvenida ambiental y equipo diagonal. */
.nav-home-item { flex: 0 0 auto; }
.main-nav .nav-home {
  display: grid;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  color: #d8d8d8;
}
.main-nav .nav-home svg {
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.6;
}
.main-nav .nav-home:hover,
.main-nav .nav-home:focus-visible,
.main-nav .nav-home.is-active { color: var(--green-bright); }
.main-nav-studio .nav-home:hover,
.main-nav-studio .nav-home:focus-visible,
.main-nav-studio .nav-home.is-active { color: var(--pink); }
.is-knowledge-menu .submenu {
  grid-template-columns: minmax(210px, 1fr);
  width: min(270px, 70vw);
}

.home-page .spaces-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(82px, 7vw, 112px);
  padding-bottom: clamp(64px, 6vw, 92px);
  column-gap: clamp(46px, 8vw, 130px);
  row-gap: clamp(18px, 2vw, 30px);
}
.spaces-welcome {
  position: absolute;
  z-index: -1;
  top: clamp(12px, 1vw, 20px);
  right: 0;
  left: 0;
  margin: 0;
  color: rgba(20,20,18,.045);
  filter: blur(1.6px);
  font-size: clamp(5rem, 10.4vw, 10.8rem);
  font-weight: 720;
  letter-spacing: -.065em;
  line-height: .82;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.spaces-greeting {
  margin: 0 0 18px;
  color: #67645d;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.home-page .spaces-copy h2 { max-width: 1040px; text-wrap: balance; }
.home-page .spaces-copy .lead { max-width: 990px; text-wrap: pretty; }
.home-page .space-editorial-grid {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(16px, 2vw, 30px);
  margin-top: 0;
  background: transparent;
  border: 0;
}
.home-page .space-editorial-card {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: clamp(300px, 23vw, 350px);
  flex-direction: column;
  overflow: hidden;
  background: #f7f5ef;
  border: 1px solid rgba(20,20,18,.13);
  box-shadow: 0 26px 62px rgba(50,45,37,.09);
  transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}
.home-page .space-editorial-card.studio {
  margin-top: 0;
  background: #f5f1ef;
}
.home-page .space-editorial-card::after {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 88px;
  height: 4px;
  content: "";
  background: var(--green);
}
.home-page .space-editorial-card.studio::after { background: var(--pink); }
.space-card-watermark {
  position: absolute;
  z-index: -1;
  right: -9%;
  bottom: -33%;
  width: clamp(390px, 66%, 660px);
  max-width: none;
  height: auto;
  opacity: .08;
  object-fit: contain;
  pointer-events: none;
  transform: rotate(-8deg);
}

.home-page .space-editorial-card > span,
.home-page .space-editorial-card > strong,
.home-page .space-editorial-card > p,
.home-page .space-editorial-card > b { position: relative; z-index: 1; }
.home-page .space-editorial-card > strong {
  max-width: 12ch;
  margin-top: clamp(28px, 3vw, 42px);
  font-size: clamp(2rem, 2.7vw, 3.1rem);
  text-wrap: balance;
}
.home-page .space-editorial-card > p {
  max-width: 58ch;
  margin: 0;
  color: #4f4d48;
  font-size: clamp(.96rem, 1.05vw, 1.08rem);
  line-height: 1.62;
  text-wrap: pretty;
}
.home-page .space-editorial-card > b { margin-top: auto; padding-top: 20px; }
.home-page .space-editorial-card:hover,
.home-page .space-editorial-card:focus-visible {
  color: var(--ink);
  background: #fff;
  border-color: rgba(78,108,0,.38);
  box-shadow: 0 30px 72px rgba(50,45,37,.13);
  transform: translateY(-5px);
}
.home-page .space-editorial-card.studio:hover,
.home-page .space-editorial-card.studio:focus-visible { border-color: rgba(168,11,97,.35); }
.home-page .space-editorial-card:hover p,
.home-page .space-editorial-card:focus-visible p { color: #3f3d39; }
.home-page .space-editorial-card:hover span,
.home-page .space-editorial-card:hover b,
.home-page .space-editorial-card:focus-visible span,
.home-page .space-editorial-card:focus-visible b { color: var(--green-dark); }
.home-page .space-editorial-card.studio:hover span,
.home-page .space-editorial-card.studio:hover b,
.home-page .space-editorial-card.studio:focus-visible span,
.home-page .space-editorial-card.studio:focus-visible b { color: var(--pink-dark); }

.home-page .team-showcase {
  display: grid;
  grid-template-columns: minmax(220px, .26fr) minmax(0, 1.74fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(30px, 3vw, 58px);
  align-items: stretch;
  min-height: 700px;
  padding: clamp(58px, 5vw, 88px) max(24px, calc((100% - 1720px) / 2)) clamp(54px, 5vw, 86px);
  background: #080908;
}

.team-collage-heading > div { grid-column: 1; grid-row: 1; align-self: start; }
.team-collage-heading .label { margin-bottom: 18px; }

.team-collage-heading h2 span {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 4px solid currentColor;
}

.home-team-collage {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  min-width: 0;
  height: clamp(470px, 34vw, 610px);
  align-items: stretch;
  padding: 0 1.6%;
  overflow: hidden;
}
.team-collage-person {
  position: relative;
  min-width: 0;
  flex: 1 1 0;
  margin-left: -1.7%;
}
.team-collage-person:first-child { margin-left: 0; }
.team-collage-person > a {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
  background: #f4f4f1;
  clip-path: polygon(15% 0,100% 0,85% 100%,0 100%);
}


.team-collage-person > a > div {
  position: relative;
  flex: 0 0 104px;
  padding: 16px clamp(18px, 1.45vw, 28px) 16px clamp(24px, 2vw, 36px);
  background: #f4f4f1;
}
.team-collage-person:nth-child(odd) > a > div { order: -1; }


.team-collage-person > a > div b {
  position: absolute;
  right: clamp(22px, 1.7vw, 32px);
  bottom: 17px;
  color: var(--green-dark);
  font-size: 1.15rem;
  transition: transform .25s ease;
}
.team-collage-person:nth-child(2) > a > div b { color: var(--pink-dark); }

.team-collage-person > a:hover div b,
.team-collage-person > a:focus-visible div b { transform: translate(3px,-3px); }
.team-collage-person > a:focus-visible { outline: 4px solid var(--green-bright); outline-offset: -5px; }
.team-collage-person:nth-child(2) > a:focus-visible { outline-color: var(--pink); }
.home-page .team-showcase-action {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  margin: 0 0 6px;
}

@media (min-width: 1181px) {
  .contact-rail-inner,
  .header-brand-row .header-inner {
    width: 100%;
    max-width: none;
    padding-left: var(--pad);
    padding-right: clamp(12px, 1.25vw, 24px);
  }
  .main-nav > ul > li.nav-home-item { padding-right: clamp(8px, .72vw, 13px); padding-left: 0; }
  .main-nav > ul > li.nav-home-item + li::before { display: none; }
}

@media (max-width: 1180px) {
  .main-nav .nav-home { width: 54px; min-width: 54px; min-height: 54px; }
  .main-nav .nav-home svg { width: 20px; height: 20px; }
  .is-knowledge-menu .submenu { width: 100%; }
  .home-page .team-showcase {
    display: block;
    min-height: 0;
    padding: 58px var(--pad) 64px;
  }
  .team-collage-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr); gap: 28px; align-items: end; margin-bottom: 38px; }
  
  
  .home-team-collage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: auto;
    gap: 2px;
    padding: 0;
    overflow: visible;
  }
  .team-collage-person { min-height: 390px; margin: 0; }
  .team-collage-person > a,
  .team-collage-person:nth-child(even) > a { clip-path: polygon(8% 0,100% 0,92% 100%,0 100%); }
  .team-collage-person > a > div { flex-basis: 96px; }
  
}

@media (max-width: 760px) {
  .home-page .spaces-intro { padding-top: 72px; padding-bottom: 58px; }
  .spaces-welcome { top: 22px; right: auto; left: 50%; width: max-content; font-size: clamp(3rem, 15.2vw, 5.4rem); transform: translateX(-50%); }
  .home-page .spaces-intro .section-kicker { margin-bottom: 22px; }
  .home-page .space-editorial-grid { grid-column: 1; grid-template-columns: 1fr; gap: 16px; margin-top: 0; }
  .home-page .space-editorial-card { min-height: 320px; }
  
  

  
  
  
  
  
  
  
  .team-collage-person > a > div { flex-basis: 102px; padding: 15px 24px 15px 27px; }
  
  
  
}

@media (max-width: 340px) {
  .home-team-collage { grid-template-columns: 1fr; gap: 14px; }
  .team-collage-person { min-height: 460px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .space-editorial-card,
  .team-collage-person img,
  .team-collage-person > a > div b { transition: none; }
  .home-page .space-editorial-card:hover,
  .home-page .space-editorial-card:focus-visible,
  .team-collage-person > a:hover img,
  .team-collage-person > a:focus-visible img { transform: none; }
}

/* Inicio · galería de equipo más ligera, abierta y con profundidad sutil. */
.home-page .team-showcase {
  --team-light-x: 50%;
  --team-light-y: 50%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .62fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(50px, 8vw, 150px);
  min-height: 0;
  padding: clamp(66px, 6vw, 104px) max(22px, calc((100% - 1740px) / 2)) clamp(70px, 6.5vw, 112px);
  overflow: hidden;
  background: #070807;
}
.team-collage-heading { display: contents; }
.team-collage-heading > div { grid-column: 1; grid-row: 1; }
.team-collage-heading > p {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: end;
  width: min(100%, 470px);
  margin: 0 0 7px;
  color: #aaa;
  font-size: clamp(.9rem, .95vw, 1.02rem);
  line-height: 1.7;
}
.team-collage-heading h2 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2.55rem, 3.65vw, 4.55rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-transform: none;
}
.team-collage-heading h2 span { padding-bottom: 7px; border-bottom-width: 2px; }
.home-team-collage {
  position: relative;
  isolation: isolate;
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(11px, 1.25vw, 22px);
  width: 100%;
  height: auto;
  margin-top: clamp(42px, 4.5vw, 72px);
  padding: 18px 7px 28px;
  overflow: visible;
  perspective: 1200px;
}
.home-team-collage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -110px -7vw;
  background: radial-gradient(circle at var(--team-light-x) var(--team-light-y), rgba(145,190,26,.13), rgba(145,190,26,.025) 24%, transparent 48%);
  pointer-events: none;
  transition: background-position .2s ease;
}
.team-collage-person {
  --team-tilt: 0deg;
  --team-offset: 0px;
  --team-lean-x: 0deg;
  --team-lean-y: 0deg;
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: clamp(420px, 27vw, 490px);
  margin: 0;
  transform: translateY(var(--team-offset)) rotate(var(--team-tilt)) rotateX(var(--team-lean-x)) rotateY(var(--team-lean-y));
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.75,.2,1), z-index 0s .2s;
}
.team-collage-person:nth-child(1) { --team-tilt: -1.4deg; --team-offset: 12px; }
.team-collage-person:nth-child(2) { --team-tilt: .8deg; --team-offset: -7px; }
.team-collage-person:nth-child(3) { --team-tilt: -1deg; --team-offset: 8px; }
.team-collage-person:nth-child(4) { --team-tilt: 1.25deg; --team-offset: -10px; }
.team-collage-person:nth-child(5) { --team-tilt: -.65deg; --team-offset: 7px; }
.team-collage-person:nth-child(6) { --team-tilt: 1.35deg; --team-offset: -4px; }
.team-collage-person > a,
.team-collage-person:nth-child(even) > a {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
  background: #f2f1ed;
  clip-path: polygon(7% 0,100% 0,93% 100%,0 100%);
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
  transition: box-shadow .45s ease, background .3s ease;
}
.team-collage-person:nth-child(even) > a { clip-path: polygon(0 0,93% 0,100% 100%,7% 100%); }
.team-collage-person > a::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: -35% -120%;
  background: linear-gradient(112deg, transparent 42%, rgba(255,255,255,.22) 49%, transparent 56%);
  transform: translateX(-34%);
  transition: transform .85s cubic-bezier(.2,.72,.2,1);
  pointer-events: none;
}
.team-collage-person figure { min-height: 0; flex: 1 1 auto; margin: 0; overflow: hidden; background: #c9c9c5; }
.team-collage-person img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(1) contrast(1.04);
  transform: scale(1.045);
  transition: filter .45s ease, transform .7s cubic-bezier(.2,.72,.2,1);
}
.team-collage-person:nth-child(2) img { object-position: center 18%; }
.team-collage-person:nth-child(3) img { object-position: center 16%; }
.team-collage-person:nth-child(4) img { object-position: center 13%; }
.team-collage-person:nth-child(5) img { object-position: center 20%; }
.team-collage-person:nth-child(6) img { object-position: center 34%; }
.team-collage-person > a > div,
.team-collage-person:nth-child(odd) > a > div {
  position: relative;
  order: 0;
  flex: 0 0 132px;
  padding: 21px clamp(24px, 1.75vw, 34px) 24px clamp(27px, 2vw, 39px);
  background: #f2f1ed;
}
.team-collage-person > a > div span {
  display: block;
  min-height: 2.65em;
  margin-bottom: 12px;
  overflow: visible;
  color: #686861;
  font-size: clamp(.54rem, .52vw, .63rem);
  font-weight: 650;
  letter-spacing: .035em;
  line-height: 1.35;
  text-overflow: clip;
  text-transform: uppercase;
  white-space: normal;
}
.team-collage-person > a > div h3 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(.9rem, .95vw, 1.12rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.team-collage-person > a > div b { right: clamp(24px, 1.7vw, 32px); bottom: 25px; }
.team-collage-person:hover,
.team-collage-person:focus-within { z-index: 3; transform: translateY(-9px) rotate(0) rotateX(var(--team-lean-x)) rotateY(var(--team-lean-y)); transition-delay: 0s; }
.team-collage-person > a:hover,
.team-collage-person > a:focus-visible { background: #fff; box-shadow: 0 28px 70px rgba(0,0,0,.42); }
.team-collage-person > a:hover::after,
.team-collage-person > a:focus-visible::after { transform: translateX(68%); }
.team-collage-person > a:hover img,
.team-collage-person > a:focus-visible img { filter: grayscale(.08) contrast(1.01); transform: scale(1.085); }
.home-page .team-showcase-action { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin: 30px 0 0; }

/* Pilates terapéutico · la fotografía renovada iguala la altura de su pareja de galería. */
.studio-content-page .legacy-content .elementor-column:has(img.pilates-therapy-gallery-image),
.studio-content-page .legacy-content .elementor-widget-wrap:has(img.pilates-therapy-gallery-image),
.studio-content-page .legacy-content .elementor-widget:has(img.pilates-therapy-gallery-image),
.studio-content-page .legacy-content .elementor-widget:has(img.pilates-therapy-gallery-image) > div { height: 100%; }
.studio-content-page .legacy-content img.pilates-therapy-gallery-image {
  height: 100%;
  min-height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

@media (max-width: 1180px) {
  .home-page .team-showcase { display: block; padding: 62px var(--pad) 72px; }
  .team-collage-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr); gap: 34px; align-items: end; }
  .team-collage-heading > div,
  .team-collage-heading > p { grid-column: auto; grid-row: auto; width: auto; justify-self: auto; margin: 0; }
  .team-collage-heading h2 { font-size: clamp(2.6rem, 6vw, 4.3rem); }
  .home-team-collage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; margin-top: 46px; padding: 0; }
  .team-collage-person { min-height: 440px; transform: none; }
  .team-collage-person:hover,
  .team-collage-person:focus-within { transform: translateY(-6px); }
  .home-page .team-showcase-action { margin-top: 34px; }
}

@media (max-width: 760px) {
  .home-page .team-showcase { padding: 52px 16px 62px; }
  .team-collage-heading { grid-template-columns: 1fr; gap: 22px; }
  .team-collage-heading h2 { max-width: 420px; font-size: clamp(2.45rem, 11vw, 3.5rem); }
  .team-collage-heading > p { max-width: 500px; font-size: .92rem; }
  .home-team-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; margin-top: 36px; }
  .team-collage-person { min-height: min(88vw, 400px); }
  .team-collage-person > a,
  .team-collage-person:nth-child(even) > a { clip-path: polygon(5% 0,100% 0,95% 100%,0 100%); }
  .team-collage-person:nth-child(even) > a { clip-path: polygon(0 0,95% 0,100% 100%,5% 100%); }
  .team-collage-person > a > div,
  .team-collage-person:nth-child(odd) > a > div { flex-basis: 126px; padding: 18px 23px 22px 27px; }
  .team-collage-person > a > div span { min-height: 3.8em; margin-bottom: 9px; font-size: .54rem; }
  .team-collage-person > a > div h3 { font-size: clamp(.88rem, 4vw, 1.08rem); }
  .team-collage-person > a > div b { right: 22px; bottom: 22px; }
}

@media (max-width: 520px) {
  .home-team-collage { grid-template-columns: 1fr; gap: 18px; }
  .team-collage-person { min-height: min(122vw, 500px); }
}

@media (prefers-reduced-motion: reduce) {
  .home-team-collage::before { display: none; }
  .team-collage-person,
  .team-collage-person > a,
  .team-collage-person > a::after,
  .team-collage-person img { transition: none; }
  .team-collage-person,
  .team-collage-person:hover,
  .team-collage-person:focus-within { transform: none; }
}

/* Inicio · reseñas editoriales en carrusel manual. */
.google-reviews {
  position: relative;
  isolation: isolate;
  padding: clamp(68px, 6.5vw, 112px) max(var(--pad), calc((100% - var(--container)) / 2)) clamp(70px, 7vw, 118px);
  overflow: hidden;
  background: #e3e0d8;
}
.google-reviews::before {
  content: "EXPERIENCIAS";
  position: absolute;
  z-index: -1;
  top: clamp(215px, 22vw, 330px);
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  color: transparent;
  font-size: clamp(5.8rem, 12.2vw, 12rem);
  font-weight: 750;
  line-height: .8;
  letter-spacing: -.06em;
  -webkit-text-stroke: 1.5px rgba(77,108,0,.12);
  pointer-events: none;
}
.google-reviews-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(42px, 8vw, 136px);
  align-items: end;
  margin-bottom: clamp(44px, 5vw, 76px);
}
.google-reviews-heading h2 {
  max-width: 760px;
  margin: 12px 0 0;
  font-size: clamp(2.35rem, 3.65vw, 4.35rem);
  line-height: .96;
  letter-spacing: -.052em;
  text-wrap: balance;
}
.google-reviews-summary { display: flex; align-items: flex-start; flex-direction: column; }
.google-reviews-summary > strong { color: #d38f00; font-size: clamp(1.18rem, 1.5vw, 1.5rem); letter-spacing: .1em; line-height: 1; }
.google-reviews-summary > span { max-width: 380px; margin-top: 12px; color: #5e5b55; font-size: .94rem; line-height: 1.55; }
.google-reviews-summary > a { margin-top: 20px; }
.google-reviews-grid {
  --review-card-height: clamp(430px, 29vw, 490px);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(9px, 1.15vw, 18px);
  align-items: start;
  padding: 6px 0 34px;
  scroll-behavior: smooth;
}
.google-review-card {
  --review-offset: 0px;
  position: relative;
  display: flex;
  min-width: 0;
  min-height: var(--review-card-height);
  aspect-ratio: auto;
  flex-direction: column;
  padding: clamp(17px, 1.55vw, 25px);
  overflow: hidden;
  color: var(--ink);
  background: #f8f6f1;
  border: 1px solid rgba(77,108,0,.27);
  box-shadow: 0 16px 38px rgba(45,42,33,.1);
  transform: translateY(var(--review-offset));
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.google-review-card::before {
  content: "“";
  position: absolute;
  top: -18px;
  right: 10px;
  color: rgba(77,108,0,.12);
  font-family: Georgia, serif;
  font-size: clamp(5.5rem, 7vw, 8.2rem);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.google-review-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.google-review-card.is-lowered-review { --review-offset: 19px; }
.google-review-card.is-featured-review {
  min-height: clamp(465px, 31.4vw, 529px);
  color: #fffdf5;
  background: var(--green-dark);
  border-color: var(--green-dark);
  box-shadow: 0 24px 56px rgba(38,51,8,.24);
}
.google-review-card.is-featured-review::before { color: rgba(255,255,255,.13); }
.google-review-card.is-featured-review::after { background: #d5f26f; }
.google-review-card:hover,
.google-review-card:focus-within {
  border-color: rgba(77,108,0,.62);
  box-shadow: 0 25px 56px rgba(45,42,33,.19);
  transform: translateY(calc(var(--review-offset) - 6px));
}
.google-review-card:hover::after,
.google-review-card:focus-within::after { transform: scaleX(1); }
.google-review-author { position: relative; z-index: 1; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; }
.google-review-author > span { width: 38px; background: var(--green-dark); }
.google-review-author strong { font-size: clamp(.8rem, .84vw, .92rem); }
.google-review-author small { font-size: .72rem; }
.google-review-author b { margin-top: 5px; font-size: .93rem; }
.google-review-card blockquote {
  position: relative;
  z-index: 1;
  display: block;
  margin: 17px 0 20px;
  overflow: visible;
  color: #393732;
  font-size: max(14px, .86vw);
  line-height: 1.55;
  -webkit-line-clamp: unset;
}
.google-review-card > a { position: relative; z-index: 1; margin-top: auto; font-size: .72rem; }
.google-review-card.is-featured-review .google-review-author > span { color: var(--green-dark); background: #fffdf5; }
.google-review-card.is-featured-review .google-review-author small,
.google-review-card.is-featured-review blockquote,
.google-review-card.is-featured-review > a { color: #fffdf5; }
.google-review-card.is-featured-review .google-review-author b { color: #ffd66b; }
.google-reviews-footer { position: relative; z-index: 1; margin-top: 20px; }
.google-reviews-pagination { display: flex; gap: 12px; align-items: center; }
.google-reviews-pagination > button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  color: var(--ink);
  background: rgba(255,255,255,.3);
  border: 1px solid rgba(20,20,18,.26);
  border-radius: 50%;
  cursor: pointer;
  transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}
.google-reviews-pagination > button:not(:disabled):hover { color: #fff; background: var(--green-dark); border-color: var(--green-dark); transform: translateY(-2px); }
.google-reviews-pagination > button:disabled { opacity: .35; cursor: default; }
.google-reviews-pagination output { min-width: 66px; color: var(--green-dark); font-size: .77rem; font-weight: 750; letter-spacing: .11em; text-align: center; }

@media (max-width: 1180px) and (min-width: 901px) {
  .google-reviews { padding-inline: 28px; }
  .google-reviews-grid { --review-card-height: clamp(455px, 44vw, 520px); gap: 8px; }
  .google-review-card { padding: 16px 14px; }
  .google-review-card.is-featured-review { min-height: clamp(491px, 47.5vw, 562px); }
  .google-review-author { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; }
  .google-review-author > span { width: 32px; }
  .google-review-author strong { font-size: .78rem; }
  .google-review-card blockquote { font-size: 14px; line-height: 1.48; }
}

@media (max-width: 900px) {
  .google-reviews { padding: 62px var(--pad) 74px; }
  .google-reviews-heading { grid-template-columns: 1fr; gap: 26px; margin-bottom: 40px; }
  .google-reviews-heading h2 { max-width: 680px; }
  .google-reviews-grid {
    display: flex;
    gap: 16px;
    margin-right: calc(var(--pad) * -1);
    padding-right: var(--pad);
    padding-bottom: 40px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--green-dark) transparent;
  }
  .google-review-card { flex: 0 0 calc((100% - 24px) / 2.25); min-height: 430px; scroll-snap-align: start; }
  .google-review-card.is-featured-review { min-height: 465px; }
  .google-reviews-footer { grid-template-columns: 1fr auto; }
}

@media (max-width: 600px) {
  .google-reviews { padding: 54px 20px 66px; }
  .google-reviews::before { top: 255px; font-size: 5.4rem; }
  .google-reviews-heading h2 { font-size: clamp(2.3rem, 11vw, 3.35rem); }
  .google-reviews-summary > span { font-size: .9rem; }
  .google-reviews-grid { margin-right: -20px; padding-right: 20px; }
  .google-review-card { flex-basis: 87%; min-height: 440px; padding: 23px; }
  .google-review-card.is-featured-review { min-height: 475px; }
  .google-review-card blockquote { font-size: 14px; }
  .google-reviews-footer { grid-template-columns: 1fr; gap: 22px; }
  .google-reviews-pagination { justify-content: flex-start; overflow: visible; }
}

/* Tratamientos: transición editorial compacta entre la apertura y el catálogo. */
.treatment-hub-page .directory-intro {
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(34px, 5vw, 76px);
  padding-top: clamp(48px, 4.5vw, 70px);
  padding-bottom: clamp(50px, 5vw, 76px);
  border-bottom: 0;
}
.treatment-hub-page .directory-intro > .section-kicker {
  min-height: 100%;
  padding: 4px clamp(24px, 3vw, 44px) 4px 0;
  border-right: 1px solid var(--line-dark);
}
.treatment-hub-page .directory-intro > .section-kicker span {
  margin-bottom: 16px;
  font-size: 1.35rem;
}
.treatment-hub-page .directory-intro-main {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
  align-items: end;
  gap: clamp(34px, 5vw, 82px);
}
.treatment-hub-page .directory-intro h2 { margin: 0; }
.treatment-hub-page .directory-intro .lead { max-width: 560px; margin: 0 0 3px; }
.treatment-hub-page .directory-intro-explanation {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: clamp(28px, 5vw, 76px);
  margin-top: -4px;
  padding: 24px 26px;
  background: linear-gradient(90deg, rgba(143,189,24,.09), rgba(143,189,24,.015));
  border-top: 1px solid rgba(86,112,18,.38);
  border-bottom: 1px solid rgba(86,112,18,.18);
}
.treatment-hub-page .directory-intro-explanation strong { color: var(--green-dark); font-size: .78rem; line-height: 1.55; letter-spacing: .055em; text-transform: uppercase; }
.treatment-hub-page .directory-intro-explanation strong i { margin: 0 5px; font-style: normal; }
.treatment-hub-page .directory-intro-explanation p { max-width: 760px; margin: 0; color: #454545; font-size: .93rem; line-height: 1.65; }
.treatment-hub-page .treatment-catalog { border-top: 1px solid #242424; }

@media (max-width: 980px) {
  .treatment-hub-page .directory-intro { grid-template-columns: 140px minmax(0, 1fr); }
  .treatment-hub-page .directory-intro-main { grid-template-columns: 1fr; gap: 22px; }
  .treatment-hub-page .directory-intro-explanation { grid-template-columns: 1fr; gap: 10px; margin-top: 4px; }
}

@media (max-width: 760px) {
  .treatment-hub-page .directory-intro { grid-template-columns: 1fr; width: calc(100% - 40px); gap: 24px; padding-top: 44px; padding-bottom: 48px; }
  .treatment-hub-page .directory-intro > .section-kicker { min-height: 0; padding: 0 0 18px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .treatment-hub-page .directory-intro > .section-kicker span { margin-bottom: 8px; font-size: 1rem; }
  .treatment-hub-page .directory-intro-explanation { padding: 20px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .google-reviews-grid { scroll-behavior: auto; }
  .google-review-card,
  .google-review-card::after,
  .google-reviews-pagination > button { transition: none; }
  .google-review-card:hover,
  .google-review-card:focus-within { transform: translateY(var(--review-offset)); }
}

/* Iteración 105: más aire en cabecera, cierres de sección y palabra ambiental del test. */
@media (min-width: 1440px) {
  .contact-rail-inner,
  .header-brand-row .header-inner {
    padding-right: clamp(64px, 4.6vw, 88px);
    padding-left: clamp(64px, 4.6vw, 88px);
  }
  .header-brand-row .brand-primary-clinic { width: 260px !important; height: 70px !important; }
  .header-brand-row .brand-primary-studio { width: 250px !important; height: 72px !important; }
  .header-brand-row .universe-switch {
    width: 224px;
    min-width: 224px;
    margin-left: clamp(38px, 2.55vw, 50px);
    padding-right: 14px;
    padding-left: 18px;
  }
  .header-brand-row .universe-switch-logo { height: 70px; }
}

@media (min-width: 1051px) {
  body.team-hub-page .team-ensemble-hero { padding-bottom: clamp(98px, 6vw, 116px); }
}

.nutrition-test-layout {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.nutrition-test-layout::before {
  position: absolute;
  z-index: 0;
  left: -.08em;
  bottom: -.06em;
  content: "TEST DE ALIMENTACIÓN";
  color: rgba(77,108,0,.045);
  font-size: clamp(6.5rem, 10.8vw, 13.5rem);
  font-weight: 750;
  line-height: .78;
  letter-spacing: -.075em;
  white-space: nowrap;
  text-transform: uppercase;
  pointer-events: none;
}
.nutrition-test-layout > * { position: relative; z-index: 1; }

.service-card-clinic .service-card-wall-logo {
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

@media (max-width: 760px) {
  .nutrition-test-layout::before { left: -.14em; bottom: .04em; font-size: clamp(5rem, 23vw, 8rem); }
}

/* TECAR: infografía clínica y lectura recompuesta. */
.tecar-content-page .inner-hero-media img { object-position: 52% center; }
.tecar-explainer {
  display: grid;
  grid-template-columns: minmax(350px, .82fr) minmax(520px, 1.18fr);
  width: min(calc(100% - (var(--pad) * 2)), 1420px);
  margin: clamp(54px, 7vw, 104px) auto 0;
  overflow: hidden;
  background: #e9e6de;
  border-top: 1px solid rgba(16, 23, 10, .24);
}
.tecar-explainer-copy { padding: clamp(38px, 5vw, 76px); }
.tecar-explainer-copy .label { margin: 0 0 28px; color: var(--green-dark); }
.tecar-explainer-copy h2 {
  max-width: 650px;
  margin: 0 0 24px;
  font-size: clamp(2.1rem, 3.2vw, 4.1rem);
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.tecar-explainer-lead { max-width: 620px; margin: 0 0 36px; color: #3e423a; font-size: clamp(1.04rem, 1.25vw, 1.22rem); line-height: 1.58; }
.tecar-explainer-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; background: rgba(15, 24, 10, .16); list-style: none; }
.tecar-explainer-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; min-height: 164px; padding: 20px; background: #f4f1eb; }
.tecar-explainer-steps li > span { padding-top: 2px; color: var(--green-dark); font-size: .72rem; font-weight: 760; letter-spacing: .08em; }
.tecar-explainer-steps strong { display: block; margin-bottom: 8px; color: var(--ink); font-size: 1rem; line-height: 1.15; }
.tecar-explainer-steps p { margin: 0; color: #55594f; font-size: .88rem; line-height: 1.48; }
.tecar-explainer-note { margin: 20px 0 0; color: #62665b; font-size: .78rem; line-height: 1.45; }
.tecar-explainer-visual { position: relative; min-height: 100%; margin: 0; background: #f8f5ef; }
.tecar-explainer-visual picture { display: block; width: 100%; height: 100%; }
.tecar-explainer-visual img { display: block; width: 100%; height: 100%; min-height: 660px; object-fit: contain; object-position: center; }
.tecar-explainer-visual figcaption { position: absolute; right: 18px; bottom: 18px; left: 18px; padding: 12px 16px; color: #f7f6f1; background: rgba(10, 25, 16, .88); font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.tecar-content-page .content-shell { padding-top: clamp(56px, 6vw, 86px); }
.tecar-content-page .legacy-content .elementor-widget-image { display: none; }
.tecar-content-page .legacy-content .elementor > .elementor-top-section:has(img) { padding: 0; background: transparent; border-top: 0; }
.tecar-content-page .legacy-content .elementor > .elementor-top-section:has(img)::before { display: none; }

@media (max-width: 1120px) {
  .tecar-explainer { grid-template-columns: 1fr; }
  .tecar-explainer-visual { min-height: 0; }
  .tecar-explainer-visual picture { height: auto; }
  .tecar-explainer-visual img { min-height: 0; aspect-ratio: 3 / 2; }
}

@media (max-width: 760px) {
  .tecar-explainer { width: calc(100% - 28px); margin-top: 28px; }
  .tecar-explainer-copy { padding: 34px 22px 28px; }
  .tecar-explainer-copy .label { margin-bottom: 20px; }
  .tecar-explainer-copy h2 { font-size: clamp(2rem, 10vw, 3rem); }
  .tecar-explainer-steps { grid-template-columns: 1fr; }
  .tecar-explainer-steps li { min-height: 0; padding: 18px; }
  .tecar-explainer-visual figcaption { position: static; margin: 0; }
}

/* Interior-page integrity: migrated Elementor blocks must never reserve empty columns. */
.legacy-content .legacy-section-empty { display: none !important; margin: 0 !important; padding: 0 !important; }
.legacy-content .elementor > .elementor-top-section:not(:has(img, h2, h3, h4, p, li, blockquote, table, iframe, video, .elementor-button)) { display: none !important; margin: 0 !important; padding: 0 !important; }
.legacy-content .elementor-widget-image:not(:has(img)),
.legacy-content .elementor-column:has(.elementor-widget-image):not(:has(img, h2, h3, h4, p, li, blockquote, table, iframe, video, .elementor-button)) { display: none !important; }
.legacy-content .elementor-widget-image > div { width: 100%; min-width: 0; }
.legacy-content .elementor-widget-image > div > img { display: block; width: 100%; height: auto; }
.legacy-content .elementor-top-section > .elementor-container:has(> .elementor-column:only-child),
.legacy-content .legacy-section-text > .elementor-container { display: block !important; }
.legacy-content .elementor-top-section > .elementor-container > .elementor-column:only-child,
.legacy-content .legacy-section-text > .elementor-container > .elementor-column { width: 100% !important; max-width: none !important; }
.legacy-content .legacy-section-longform { padding: clamp(32px, 5vw, 72px) !important; }
.legacy-content .legacy-section-longform::before { display: none !important; }
.legacy-content .legacy-section-longform > .elementor-container { display: block !important; }
.legacy-content .legacy-section-longform .elementor-column { width: 100% !important; max-width: none !important; }
.legacy-content .legacy-section-longform .elementor-widget-image { width: min(100%, 780px); min-height: 0; margin: 0 auto clamp(36px, 5vw, 64px); padding: 0; }
.legacy-content .legacy-section-longform .elementor-widget-text-editor,
.legacy-content .legacy-section-longform .elementor-widget-heading { width: min(100%, 780px); margin-right: auto; margin-left: auto; }
.legacy-content .legacy-section-gallery > .elementor-container { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important; gap: clamp(14px, 2vw, 24px) !important; }
.legacy-content .legacy-section-gallery .elementor-widget-image { min-height: 0; }
.legacy-content .legacy-section-gallery img.legacy-image-landscape { width: 100% !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; }
.legacy-content .legacy-section-gallery img.legacy-image-square { width: 100% !important; aspect-ratio: 1 !important; object-fit: cover !important; }
.legacy-content .legacy-section-gallery img.legacy-image-portrait { width: 100% !important; aspect-ratio: 3 / 4 !important; object-fit: cover !important; }
.legacy-content img.is-low-resolution.legacy-image-landscape { width: 100% !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; }
.legacy-content img.is-low-resolution.legacy-image-square { width: 100% !important; aspect-ratio: 1 !important; object-fit: cover !important; }
.legacy-content img.is-low-resolution.legacy-image-portrait { width: min(100%, 340px) !important; aspect-ratio: 3 / 4 !important; object-fit: cover !important; }

/* TECAR article — bespoke editorial composition, independent from the legacy layout. */
.tecar-article {
  width: min(1540px, calc(100% - 48px));
  margin: clamp(58px, 7vw, 112px) auto;
  color: #151713;
}
.tecar-article-intro {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(30px, 4vw, 72px);
  align-items: start;
  padding: 0 0 clamp(60px, 7vw, 104px);
  border-bottom: 1px solid rgba(21, 23, 19, .24);
}
.tecar-article-index { display: grid; gap: 10px; color: #4f7900; }
.tecar-article-index span { font-size: clamp(3.8rem, 6vw, 7.1rem); font-weight: 760; line-height: .8; letter-spacing: -.08em; }
.tecar-article-index b { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; }
.tecar-article-heading .label,
.tecar-article-story .label,
.tecar-applications .label { margin: 0 0 22px; color: #4f7900; }
.tecar-article-heading h2 {
  max-width: 880px;
  margin: 0 0 28px;
  font-size: clamp(2.6rem, 5vw, 6rem);
  line-height: .92;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.tecar-article-heading > p:last-child { max-width: 790px; margin: 0; color: #4e534a; font-size: clamp(1.08rem, 1.35vw, 1.34rem); line-height: 1.58; }
.tecar-article-principles { display: grid; background: #102717; color: #f3f1e9; }
.tecar-article-principles span { padding: 22px 24px; border-bottom: 1px solid rgba(243, 241, 233, .2); font-size: .76rem; font-weight: 730; letter-spacing: .08em; text-transform: uppercase; }
.tecar-article-principles span:last-child { border-bottom: 0; }
.tecar-article-story {
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr);
  gap: clamp(52px, 8vw, 132px);
  padding: clamp(72px, 9vw, 144px) clamp(28px, 5vw, 82px);
  background: #e8e5dc;
}
.tecar-article-story-lead h2 { max-width: 610px; margin: 0; font-size: clamp(2.2rem, 3.8vw, 4.6rem); line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
.tecar-article-story-copy { align-self: end; max-width: 720px; }
.tecar-article-story-copy p { margin: 0 0 24px; color: #42463e; font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.68; }
.tecar-article-story-copy blockquote { margin: 48px 0 0; padding: 26px 0 0; border-top: 2px solid #75a900; color: #102717; font-size: clamp(1.35rem, 2vw, 2.1rem); font-weight: 670; line-height: 1.18; letter-spacing: -.03em; }
.tecar-applications {
  display: grid;
  grid-template-columns: minmax(280px, 1.08fr) repeat(2, minmax(240px, .96fr));
  background: #0b0d0b;
  color: #f3f1e9;
}
.tecar-applications-heading { padding: clamp(42px, 5vw, 78px); }
.tecar-applications-heading h2 { margin: 0 0 28px; font-size: clamp(2.3rem, 4vw, 4.8rem); line-height: .95; letter-spacing: -.06em; text-wrap: balance; }
.tecar-applications-heading > p:last-child { max-width: 520px; margin: 0; color: #bfc3ba; font-size: 1rem; line-height: 1.62; }
.tecar-application-card { display: flex; min-height: 430px; padding: clamp(34px, 4vw, 64px); flex-direction: column; justify-content: flex-end; }
.tecar-application-card span { margin-bottom: auto; font-size: .72rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.tecar-application-card h3 { margin: 48px 0 20px; font-size: clamp(1.8rem, 2.8vw, 3.2rem); line-height: .96; letter-spacing: -.045em; }
.tecar-application-card p { margin: 0; line-height: 1.58; }
.tecar-application-card-light { color: #151713; background: #f2efe8; }
.tecar-application-card-green { color: #f8f7f1; background: #547d00; }
.tecar-applications-note { grid-column: 1 / -1; margin: 0; padding: 18px clamp(28px, 5vw, 78px); color: #c9ccc5; border-top: 1px solid rgba(255,255,255,.16); font-size: .76rem; letter-spacing: .025em; }
.tecar-source-context { padding: clamp(34px, 4vw, 58px) clamp(28px, 5vw, 78px); background: #f2efe8; border-top: 1px solid rgba(21, 23, 19, .2); }
.tecar-source-context details { border-top: 1px solid #151713; border-bottom: 1px solid #151713; }
.tecar-source-context summary { display: grid; grid-template-columns: 190px minmax(0, 1fr) 28px; gap: 24px; align-items: center; padding: 24px 0; cursor: pointer; list-style: none; }
.tecar-source-context summary::-webkit-details-marker { display: none; }
.tecar-source-context summary span { color: #4f7900; font-size: .72rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.tecar-source-context summary strong { font-size: clamp(1.1rem, 1.6vw, 1.45rem); letter-spacing: -.02em; }
.tecar-source-context summary b { font-size: 1.7rem; font-weight: 400; line-height: 1; transition: transform .2s ease; }
.tecar-source-context details[open] summary b { transform: rotate(45deg); }
.tecar-source-context-body { width: min(100%, 840px); margin: 0 auto; padding: clamp(30px, 4vw, 58px) 0 clamp(42px, 5vw, 72px); }
.tecar-source-context-body p { margin: 0 0 24px; color: #42463e; line-height: 1.7; }
.tecar-source-context-body ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 30px 0 38px; padding: 1px; background: rgba(21, 23, 19, .18); list-style-position: inside; }
.tecar-source-context-body li { padding: 20px; background: #faf8f3; }
.tecar-source-context-body h3 { margin: 52px 0 20px; font-size: clamp(1.8rem, 3vw, 3rem); letter-spacing: -.045em; }
.tecar-source-context-body .tecar-source-context-note { padding: 18px 20px; color: #4d5248; border-left: 3px solid #75a900; background: #e5e2d9; font-size: .86rem; }

@media (max-width: 1080px) {
  .tecar-article-intro { grid-template-columns: 110px minmax(0, 1fr); }
  .tecar-article-principles { grid-column: 2; grid-template-columns: repeat(3, 1fr); }
  .tecar-article-principles span { border-right: 1px solid rgba(243, 241, 233, .2); border-bottom: 0; }
  .tecar-article-principles span:last-child { border-right: 0; }
  .tecar-applications { grid-template-columns: 1fr 1fr; }
  .tecar-applications-heading { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .legacy-content .legacy-section-longform { padding: 24px 18px !important; }
  .tecar-article { width: calc(100% - 28px); margin: 46px auto 70px; }
  .tecar-article-intro { grid-template-columns: 1fr; gap: 28px; padding-bottom: 54px; }
  .tecar-article-index { grid-template-columns: auto 1fr; align-items: end; }
  .tecar-article-index span { font-size: 4rem; }
  .tecar-article-index b { padding-bottom: 4px; }
  .tecar-article-heading h2 { font-size: clamp(2.55rem, 13vw, 4.1rem); }
  .tecar-article-principles { grid-column: auto; grid-template-columns: 1fr; }
  .tecar-article-principles span { border-right: 0; border-bottom: 1px solid rgba(243, 241, 233, .2); }
  .tecar-article-story { grid-template-columns: 1fr; gap: 48px; padding: 54px 22px; }
  .tecar-applications { grid-template-columns: 1fr; }
  .tecar-applications-heading { grid-column: auto; padding: 48px 22px; }
  .tecar-application-card { min-height: 360px; padding: 30px 22px; }
  .tecar-applications-note { grid-column: auto; padding: 18px 22px; }
  .tecar-source-context { padding: 28px 22px; }
  .tecar-source-context summary { grid-template-columns: 1fr 24px; gap: 10px 18px; }
  .tecar-source-context summary span { grid-column: 1; }
  .tecar-source-context summary strong { grid-column: 1; }
  .tecar-source-context summary b { grid-column: 2; grid-row: 1 / 3; }
  .tecar-source-context-body ol { grid-template-columns: 1fr; }
}

/* Medicina y naturopatía — composición editorial propia, sin contenido heredado vacío. */
.naturopathy-content-page .inner-hero-media img { object-position: center; }
.naturopathy-article {
  width: min(1540px, calc(100% - 48px));
  margin: clamp(58px, 7vw, 112px) auto;
  color: #151713;
}
.naturopathy-article .label { margin: 0 0 20px; color: #4f7900; }
.naturopathy-intro {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(30px, 4vw, 72px);
  align-items: start;
  padding-bottom: clamp(62px, 7vw, 108px);
  border-bottom: 1px solid rgba(21, 23, 19, .24);
}
.naturopathy-index { display: grid; gap: 10px; color: #4f7900; }
.naturopathy-index span { font-size: clamp(3.8rem, 6vw, 7.1rem); font-weight: 760; line-height: .8; letter-spacing: -.08em; }
.naturopathy-index b { max-width: 110px; font-size: .72rem; line-height: 1.3; letter-spacing: .13em; text-transform: uppercase; }
.naturopathy-intro-copy h2 {
  max-width: 930px;
  margin: 0 0 30px;
  font-size: clamp(2.6rem, 5vw, 5.8rem);
  line-height: .93;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.naturopathy-intro-copy > p:last-child { max-width: 820px; margin: 0; color: #4e534a; font-size: clamp(1.08rem, 1.35vw, 1.34rem); line-height: 1.62; }
.naturopathy-principles { display: grid; background: #102717; color: #f3f1e9; }
.naturopathy-principles span { padding: 22px 24px; border-bottom: 1px solid rgba(243, 241, 233, .2); font-size: .76rem; font-weight: 730; letter-spacing: .08em; text-transform: uppercase; }
.naturopathy-principles span:last-child { border-bottom: 0; }

.naturopathy-focus {
  display: grid;
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
  gap: clamp(48px, 7vw, 118px);
  padding: clamp(70px, 9vw, 142px) clamp(28px, 5vw, 80px);
  background: #e8e5dc;
}
.naturopathy-focus-heading { align-self: start; position: sticky; top: 150px; }
.naturopathy-focus-heading h2 { max-width: 600px; margin: 0 0 26px; font-size: clamp(2.25rem, 4vw, 4.7rem); line-height: .97; letter-spacing: -.058em; text-wrap: balance; }
.naturopathy-focus-heading > p:last-child { max-width: 520px; margin: 0; color: #50554c; font-size: 1.04rem; line-height: 1.65; }
.naturopathy-focus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(21, 23, 19, .28); border-left: 1px solid rgba(21, 23, 19, .28); }
.naturopathy-focus-grid article { display: flex; min-height: 330px; padding: clamp(26px, 3vw, 46px); flex-direction: column; border-right: 1px solid rgba(21, 23, 19, .28); border-bottom: 1px solid rgba(21, 23, 19, .28); background: rgba(250, 248, 243, .48); }
.naturopathy-focus-grid article > span { color: #4f7900; font-size: .72rem; font-weight: 760; letter-spacing: .12em; }
.naturopathy-focus-grid h3 { margin: auto 0 18px; font-size: clamp(1.55rem, 2.2vw, 2.65rem); line-height: .98; letter-spacing: -.045em; }
.naturopathy-focus-grid p { margin: 0; color: #51564d; line-height: 1.6; }
.naturopathy-focus-grid a { display: inline-flex; gap: 10px; align-items: center; width: fit-content; margin-top: 22px; color: #355700; font-size: .82rem; font-weight: 730; text-decoration: none; }
.naturopathy-focus-grid a:hover { text-decoration: underline; text-underline-offset: 4px; }

.naturopathy-process { padding: clamp(72px, 9vw, 140px) clamp(28px, 5vw, 80px); color: #f3f1e9; background: #0b0d0b; }
.naturopathy-process .label { color: #a7d500; }
.naturopathy-process-heading { display: grid; grid-template-columns: minmax(270px, .9fr) minmax(0, 1.1fr); column-gap: clamp(42px, 7vw, 120px); align-items: end; margin-bottom: clamp(50px, 6vw, 92px); }
.naturopathy-process-heading .label { grid-column: 1 / -1; }
.naturopathy-process-heading h2 { max-width: 680px; margin: 0; font-size: clamp(2.4rem, 4.3vw, 5rem); line-height: .95; letter-spacing: -.06em; text-wrap: balance; }
.naturopathy-process-heading > p:last-child { max-width: 580px; margin: 0; color: #bcc1b8; font-size: 1.04rem; line-height: 1.65; }
.naturopathy-process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid rgba(243, 241, 233, .26); border-left: 1px solid rgba(243, 241, 233, .26); list-style: none; }
.naturopathy-process-grid li { display: flex; min-height: 300px; padding: 28px; flex-direction: column; border-right: 1px solid rgba(243, 241, 233, .26); border-bottom: 1px solid rgba(243, 241, 233, .26); }
.naturopathy-process-grid li > span { color: #a7d500; font-size: .72rem; font-weight: 760; letter-spacing: .12em; }
.naturopathy-process-grid li > div { margin-top: auto; }
.naturopathy-process-grid h3 { margin: 0 0 16px; font-size: clamp(1.45rem, 2vw, 2.25rem); letter-spacing: -.04em; }
.naturopathy-process-grid p { margin: 0; color: #bdc1b9; line-height: 1.58; }

.naturopathy-safety { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); background: #a7d500; }
.naturopathy-safety-copy { padding: clamp(52px, 7vw, 108px); }
.naturopathy-safety-copy .label { color: #294700; }
.naturopathy-safety-copy h2 { max-width: 700px; margin: 0 0 28px; font-size: clamp(2.45rem, 4.5vw, 5.2rem); line-height: .93; letter-spacing: -.062em; text-wrap: balance; }
.naturopathy-safety-copy > p { max-width: 680px; margin: 0; font-size: 1.04rem; line-height: 1.64; }
.naturopathy-safety-copy blockquote { max-width: 680px; margin: clamp(42px, 5vw, 72px) 0 0; padding-top: 24px; border-top: 2px solid #102717; font-size: clamp(1.45rem, 2.3vw, 2.7rem); font-weight: 690; line-height: 1.08; letter-spacing: -.04em; }
.naturopathy-safety-list { display: grid; margin: 0; padding: 0; background: #102717; color: #f3f1e9; list-style: none; }
.naturopathy-safety-list li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; padding: clamp(28px, 3vw, 46px); border-bottom: 1px solid rgba(243, 241, 233, .2); }
.naturopathy-safety-list li:last-child { border-bottom: 0; }
.naturopathy-safety-list span { color: #a7d500; font-size: .72rem; font-weight: 760; letter-spacing: .12em; }
.naturopathy-safety-list p { margin: 0; font-size: clamp(1rem, 1.15vw, 1.18rem); line-height: 1.55; }

.naturopathy-fit { display: grid; grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr); gap: clamp(52px, 8vw, 132px); padding: clamp(76px, 9vw, 142px) clamp(28px, 5vw, 80px); background: #f5f3ed; }
.naturopathy-fit-copy h2 { max-width: 650px; margin: 0 0 28px; font-size: clamp(2.3rem, 4vw, 4.7rem); line-height: .96; letter-spacing: -.058em; text-wrap: balance; }
.naturopathy-fit-copy > p { max-width: 630px; margin: 0 0 32px; color: #51564d; font-size: 1.04rem; line-height: 1.65; }
.naturopathy-fit-copy ul { display: grid; gap: 1px; margin: 0; padding: 1px; background: rgba(21, 23, 19, .18); list-style: none; }
.naturopathy-fit-copy li { position: relative; padding: 18px 22px 18px 50px; background: #ebe8df; line-height: 1.5; }
.naturopathy-fit-copy li::before { position: absolute; top: 19px; left: 22px; color: #679000; content: '↗'; font-weight: 760; }
.naturopathy-faq { align-self: start; }
.naturopathy-faq details { border-top: 1px solid rgba(21, 23, 19, .42); }
.naturopathy-faq details:last-child { border-bottom: 1px solid rgba(21, 23, 19, .42); }
.naturopathy-faq summary { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 24px; align-items: center; padding: 24px 0; cursor: pointer; font-size: clamp(1.05rem, 1.4vw, 1.32rem); font-weight: 680; letter-spacing: -.02em; list-style: none; }
.naturopathy-faq summary::-webkit-details-marker { display: none; }
.naturopathy-faq summary b { font-size: 1.6rem; font-weight: 400; transition: transform .2s ease; }
.naturopathy-faq details[open] summary b { transform: rotate(45deg); }
.naturopathy-faq details p { margin: 0; padding: 0 48px 26px 0; color: #51564d; line-height: 1.65; }

.naturopathy-sources { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr); gap: clamp(40px, 7vw, 116px); align-items: end; padding: clamp(42px, 5vw, 74px) clamp(28px, 5vw, 80px); border-top: 1px solid rgba(21, 23, 19, .22); background: #e8e5dc; }
.naturopathy-sources h2 { max-width: 500px; margin: 0; font-size: clamp(1.8rem, 3vw, 3.3rem); line-height: .98; letter-spacing: -.05em; }
.naturopathy-sources > p { max-width: 760px; margin: 0; color: #51564d; line-height: 1.65; }
.naturopathy-sources a { color: #355700; font-weight: 720; text-underline-offset: 3px; }

@media (max-width: 1080px) {
  .naturopathy-intro { grid-template-columns: 110px minmax(0, 1fr); }
  .naturopathy-principles { grid-column: 2; grid-template-columns: repeat(3, 1fr); }
  .naturopathy-principles span { border-right: 1px solid rgba(243, 241, 233, .2); border-bottom: 0; }
  .naturopathy-principles span:last-child { border-right: 0; }
  .naturopathy-focus { grid-template-columns: 1fr; }
  .naturopathy-focus-heading { position: static; }
  .naturopathy-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .naturopathy-safety { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .naturopathy-article { width: calc(100% - 28px); margin: 46px auto 70px; }
  .naturopathy-intro { grid-template-columns: 1fr; gap: 28px; padding-bottom: 54px; }
  .naturopathy-index { grid-template-columns: auto 1fr; align-items: end; }
  .naturopathy-index span { font-size: 4rem; }
  .naturopathy-index b { max-width: none; padding-bottom: 4px; }
  .naturopathy-intro-copy h2 { font-size: clamp(2.45rem, 12.5vw, 4rem); }
  .naturopathy-principles { grid-column: auto; grid-template-columns: 1fr; }
  .naturopathy-principles span { border-right: 0; border-bottom: 1px solid rgba(243, 241, 233, .2); }
  .naturopathy-focus { gap: 44px; padding: 54px 22px; }
  .naturopathy-focus-grid { grid-template-columns: 1fr; }
  .naturopathy-focus-grid article { min-height: 270px; }
  .naturopathy-process { padding: 54px 22px; }
  .naturopathy-process-heading { grid-template-columns: 1fr; gap: 24px; }
  .naturopathy-process-heading .label { grid-column: auto; }
  .naturopathy-process-grid { grid-template-columns: 1fr; }
  .naturopathy-process-grid li { min-height: 250px; }
  .naturopathy-safety-copy { padding: 54px 22px; }
  .naturopathy-safety-list li { grid-template-columns: 40px 1fr; padding: 28px 22px; }
  .naturopathy-fit { grid-template-columns: 1fr; gap: 60px; padding: 58px 22px; }
  .naturopathy-sources { grid-template-columns: 1fr; gap: 30px; padding: 44px 22px; }
}

/* Testimonios compactos — relato, imágenes y navegación final en un único ritmo. */
.testimonial-archive-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 34px); }
.testimonial-archive-media { height: 220px; padding: 14px; }
.testimonial-archive-copy { min-height: 250px; padding: clamp(20px, 1.8vw, 28px); }
.testimonial-archive-copy h3 { margin-bottom: 12px; font-size: clamp(1.16rem, 1.25vw, 1.42rem); }
.testimonial-archive-copy > div { display: -webkit-box; overflow: hidden; font-size: .92rem; line-height: 1.52; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.testimonial-archive-copy > a { margin-top: 16px; }

.testimonial-detail-hero {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(34px, 5vw, 76px);
  padding-top: clamp(42px, 5vw, 68px);
  padding-bottom: clamp(42px, 5vw, 68px);
}
.testimonial-detail-heading .breadcrumbs { margin-bottom: clamp(28px, 3.5vw, 48px); }
.testimonial-detail-heading h1 { font-size: clamp(2.1rem, 3vw, 3.65rem); }
.testimonial-detail-heading .inner-summary { max-width: 820px; margin-bottom: 18px; font-size: clamp(.98rem, 1.08vw, 1.12rem); line-height: 1.5; }
.testimonial-detail-media { width: min(100%, 330px); min-height: 240px; max-height: 340px; padding: 16px; }
.testimonial-detail-media img { max-height: 308px; }

.testimonial-detail-layout {
  grid-template-columns: minmax(130px, 170px) minmax(0, 1040px);
  gap: clamp(30px, 4vw, 58px);
  width: min(calc(100% - (var(--pad) * 2)), 1340px);
  padding-top: clamp(42px, 5vw, 66px);
  padding-bottom: clamp(52px, 6vw, 78px);
}
.testimonial-detail-layout > .author-card { grid-column: 2; margin-top: 22px; }
.testimonial-page .article-editorial-module { margin-bottom: clamp(28px, 3.5vw, 48px); }
.testimonial-page .editorial-story-split { gap: clamp(24px, 3.2vw, 44px); padding: clamp(22px, 2.5vw, 34px) 0; }
.testimonial-page .article-editorial-module h2 { font-size: clamp(1.65rem, 2.15vw, 2.35rem); }
.testimonial-page .editorial-story-copy blockquote { margin-top: 24px; font-size: clamp(1.12rem, 1.4vw, 1.48rem); line-height: 1.48; }
.testimonial-page .editorial-story-media { padding: 13px; }
.testimonial-page .testimonial-fragment-module .editorial-story-media { width: min(100%, 310px); justify-self: end; }
.testimonial-page .editorial-story-media img { max-height: 320px; }
.testimonial-page .editorial-story-media > p { margin-top: 12px; padding-top: 12px; font-size: .84rem; line-height: 1.5; }

.testimonial-story-content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.testimonial-story-content > * { grid-column: 1 / -1; }

.testimonial-story-content > .legacy-media-row {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 13px;
  flex-direction: column;
  border: 0;
  background: #e6e3db;
}
.testimonial-story-content > .legacy-media-row .legacy-media-row-copy { order: 2; width: 100%; padding: 12px 3px 0; }
.testimonial-story-content > .legacy-media-row .legacy-media-row-copy p { margin: 0; color: #555; font-size: .8rem; line-height: 1.45; }
.testimonial-story-content > .legacy-media-row > figure,
.testimonial-story-content > .legacy-media-row > .wp-block-image { order: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; background: transparent; }
.testimonial-story-content > figure,
.testimonial-story-content > .wp-block-image {
  display: grid;
  min-width: 0;
  height: 360px;
  min-height: 0;
  place-items: center;
  margin: 0 !important;
  padding: 13px;
  background: #e6e3db;
}
.testimonial-page .testimonial-story-content img,
.testimonial-page .testimonial-story-content img.legacy-image-portrait,
.testimonial-page .testimonial-story-content img.is-low-resolution { width: auto !important; max-width: 100% !important; height: auto !important; max-height: 330px; object-fit: contain; }
.testimonial-story-content > p:first-of-type { margin-top: clamp(26px, 3vw, 42px); }
.testimonial-story-content > p { max-width: 830px; margin-bottom: 14px; line-height: 1.7; }
.testimonial-story-content > h2,
.testimonial-story-content > h3 { max-width: 830px; margin-top: 24px; }
.testimonial-page .medical-note { max-width: 830px; margin-top: 30px; }
.testimonial-detail-layout > .author-card-team img { padding: 8px; background: #f6f4ed; border-radius: 0; object-fit: contain; filter: none; }

.testimonial-related-content { padding-top: clamp(46px, 5vw, 66px); padding-bottom: clamp(52px, 6vw, 76px); }
.testimonial-related-content .related-heading { margin-bottom: 26px; }
.testimonial-related-content .article-image { max-height: 210px; margin-bottom: 16px; }
.testimonial-related-content .article-card { padding-bottom: 20px; }
.testimonial-related-content .article-card h3 { font-size: clamp(1.08rem, 1.35vw, 1.42rem); line-height: 1.15; }
.testimonial-return { display: flex; justify-content: flex-end; margin-top: clamp(30px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--line-dark); }
.testimonial-return a { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 12px; padding: 11px 20px; color: #fff; background: var(--ink); border: 1px solid var(--ink); border-radius: 999px; font-size: .9rem; font-weight: 700; transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.testimonial-return a:hover,
.testimonial-return a:focus-visible { color: var(--ink); background: var(--green-bright); transform: translateY(-1px); }
.testimonial-return-standalone { width: min(calc(100% - (var(--pad) * 2)), var(--container)); margin-right: auto; margin-left: auto; }

@media (max-width: 1180px) {
  .testimonial-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .testimonial-detail-layout { grid-template-columns: minmax(120px, 150px) minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .testimonial-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testimonial-detail-hero { grid-template-columns: minmax(0, 1fr) minmax(210px, 280px); }
  .testimonial-detail-media { min-height: 210px; }
}

@media (max-width: 760px) {
  .testimonial-detail-hero { grid-template-columns: 1fr; gap: 24px; padding: 34px 18px 40px; }
  .testimonial-detail-heading .breadcrumbs { margin-bottom: 28px; }
  .testimonial-detail-heading .inner-summary { margin-bottom: 16px; }
  .testimonial-detail-media { width: min(100%, 280px); min-height: 190px; max-height: 280px; padding: 12px; }
  .testimonial-detail-media img { max-height: 254px; }
  .testimonial-detail-layout { grid-template-columns: 1fr; width: calc(100% - 32px); padding: 36px 0 54px; }
  .testimonial-page .article-toc { display: none; }
  .testimonial-detail-layout > .author-card { grid-column: 1; }
  .testimonial-page .editorial-story-split { gap: 14px; padding: 18px 0 24px; }
  .testimonial-page .article-editorial-module h2 { font-size: clamp(1.3rem, 6vw, 1.65rem); }
  .testimonial-page .editorial-story-copy blockquote { margin-top: 18px; padding-top: 20px; font-size: 1rem; }
  .testimonial-page .editorial-story-media img { max-height: 300px; }
  .testimonial-story-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .testimonial-story-content > figure,
  .testimonial-story-content > .wp-block-image { height: 260px; min-height: 0; padding: 8px; }
  .testimonial-story-content > .legacy-media-row { padding: 8px; }
  .testimonial-page .testimonial-story-content img,
  .testimonial-page .testimonial-story-content img.legacy-image-portrait,
  .testimonial-page .testimonial-story-content img.is-low-resolution { max-height: 300px; }
  .testimonial-detail-layout > .author-card { grid-template-columns: 68px minmax(0, 1fr); padding: 18px; }
  .testimonial-detail-layout > .author-card img { width: 68px; height: 68px; }
  .testimonial-detail-layout > .author-card > a { grid-column: 1 / -1; grid-row: auto; min-width: 0; margin-top: 12px; }
  .testimonial-related-content { padding: 42px 16px 54px; }
  .testimonial-related-content .article-grid { grid-template-columns: 1fr; gap: 16px; }
  .testimonial-related-content .article-card { display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 16px; min-height: 116px; padding: 0 0 16px; }
  .testimonial-related-content .article-image { grid-column: 1; grid-row: 1 / 3; height: 116px; margin: 0; aspect-ratio: 1; }
  .testimonial-related-content .article-card p { grid-column: 2; margin-top: 4px; }
  .testimonial-related-content .article-card h3 { grid-column: 2; padding-right: 28px; }
  .testimonial-related-content .card-arrow { right: 0; bottom: 14px; }
  .testimonial-return { justify-content: stretch; margin-top: 28px; }
  .testimonial-return a { width: 100%; }
}

@media (max-width: 600px) {
  .testimonial-archive-grid { grid-template-columns: 1fr; gap: 18px; }
  .testimonial-archive-card { display: grid; grid-template-columns: minmax(112px, .78fr) minmax(0, 1.22fr); }
  .testimonial-archive-media { height: 100%; min-height: 230px; padding: 10px; }
  .testimonial-archive-copy { min-height: 230px; padding: 20px 18px; }
  .testimonial-archive-copy > p { display: block; margin-bottom: 12px; }
  .testimonial-archive-copy > p time { display: block; margin-top: 5px; }
  .testimonial-archive-copy > div { -webkit-line-clamp: 2; }
}

/* Studio Salux: infografía horizontal para orientar la elección de disciplina. */
.studio-practice-map {
  padding: clamp(58px, 6vw, 88px) max(var(--pad), calc((100% - var(--container)) / 2));
  border-top: 1px solid rgba(236,25,134,.42);
  background: radial-gradient(circle at 92% 5%, rgba(236,25,134,.13), transparent 31%), #0b0b0b;
}
.studio-practice-map > header { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr); align-items: end; gap: clamp(38px, 7vw, 112px); margin-bottom: clamp(34px, 4vw, 54px); }
.studio-practice-map > header h2 { max-width: 760px; margin: 5px 0 0; color: var(--paper); font-size: clamp(2.1rem, 3vw, 3.45rem); line-height: 1; letter-spacing: -.048em; text-wrap: balance; }
.studio-practice-map > header > p { max-width: 560px; margin: 0; color: #aaa; line-height: 1.65; }
.studio-practice-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #393939; border: 1px solid #393939; }
.studio-practice-route { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) 38px minmax(0, 1.2fr); min-width: 0; min-height: 310px; padding: clamp(26px, 2.6vw, 38px); overflow: hidden; color: var(--paper); background: #111; }
.studio-practice-route::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; content: ""; background: linear-gradient(90deg, var(--pink), rgba(236,25,134,.08)); }
.studio-practice-need { align-self: center; }
.studio-practice-need span { display: block; margin-bottom: 32px; color: var(--pink); font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.studio-practice-need small,
.studio-practice-family > small { display: block; margin-bottom: 8px; color: #858585; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.studio-practice-need strong { display: block; font-size: clamp(1.05rem, 1.35vw, 1.42rem); line-height: 1.12; letter-spacing: -.025em; }
.studio-practice-route > i { align-self: center; color: var(--pink); font-size: 1.35rem; font-style: normal; }
.studio-practice-family { align-self: center; min-width: 0; }
.studio-practice-family h3 { margin: 0 0 17px; font-size: clamp(1.2rem, 1.6vw, 1.68rem); line-height: 1.04; letter-spacing: -.035em; }
.studio-practice-family nav { display: flex; flex-wrap: wrap; gap: 7px; }
.studio-practice-family a { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 10px; color: #c6c6c6; background: #1c1c1c; border: 1px solid #343434; font-size: .72rem; line-height: 1.2; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.studio-practice-family a b { color: var(--pink); font-weight: 400; }
.studio-practice-family a:hover,
.studio-practice-family a:focus-visible { color: #fff; background: rgba(236,25,134,.12); border-color: var(--pink); }
.studio-practice-map > footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 2px 0; color: #8c8c8c; font-size: .82rem; }
.studio-practice-map > footer a { color: var(--paper); border-bottom: 1px solid var(--pink); }
.studio-practice-map > footer a b { color: var(--pink); }

@media (max-width: 1080px) {
  .studio-practice-routes { grid-template-columns: 1fr; }
  .studio-practice-route { min-height: 230px; grid-template-columns: minmax(170px, .68fr) 54px minmax(0, 1.32fr); }
}

@media (max-width: 760px) {
  .studio-practice-map { padding: 48px 20px 54px; }
  .studio-practice-map > header { grid-template-columns: 1fr; gap: 18px; margin-bottom: 30px; }
  .studio-practice-route { grid-template-columns: 1fr; gap: 18px; min-height: 0; padding: 26px 22px; }
  .studio-practice-route > i { display: none; }
  .studio-practice-need { padding-bottom: 20px; border-bottom: 1px solid #363636; }
  .studio-practice-need span { margin-bottom: 18px; }
  .studio-practice-map > footer { align-items: flex-start; flex-direction: column; }
}

/* Equipo Studio: perfil editorial compacto, sin la retícula heredada de WordPress. */
.studio-team-page .inner-hero { min-height: min(660px, 72vh); }
.studio-team-profile { color: var(--ink); background: var(--paper); }
.studio-profile-intro,
.studio-profile-credentials,
.studio-profile-training,
.studio-profile-closing { width: min(calc(100% - (var(--pad) * 2)), var(--container)); margin: 0 auto; }
.studio-profile-intro { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); align-items: center; gap: clamp(42px, 7vw, 112px); padding: clamp(68px, 8vw, 118px) 0; }
.studio-profile-portrait { position: relative; min-height: 560px; margin: 0; overflow: hidden; background: #e3dfda; }
.studio-profile-portrait::before { position: absolute; z-index: 1; inset: 18px; content: ""; border: 1px solid rgba(236,25,134,.55); pointer-events: none; }
.studio-profile-portrait img { width: 100%; height: 100%; min-height: 560px; filter: grayscale(1) contrast(1.04); object-fit: cover; }
.studio-profile-copy { max-width: 760px; }
.studio-profile-copy h2,
.studio-profile-credentials h2,
.studio-profile-training h2,
.studio-profile-closing h2 { margin: 8px 0 24px; font-size: clamp(2.35rem, 4.2vw, 4.9rem); line-height: .96; letter-spacing: -.055em; text-wrap: balance; }
.studio-profile-copy > p { max-width: 700px; color: #444; font-size: 1.05rem; line-height: 1.72; }
.studio-profile-copy .studio-profile-lead { color: var(--ink); font-size: clamp(1.16rem, 1.55vw, 1.42rem); line-height: 1.55; letter-spacing: -.018em; }
.studio-profile-copy blockquote { margin: 34px 0; padding: 22px 0 22px 28px; color: var(--ink); border-left: 3px solid var(--pink); font-family: Georgia, serif; font-size: clamp(1.28rem, 2vw, 1.8rem); font-style: italic; line-height: 1.4; }
.studio-profile-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 36px 0 0; background: #d8d3cd; border: 1px solid #d8d3cd; }
.studio-profile-facts > div { min-width: 0; padding: 18px; background: #f6f3ef; }
.studio-profile-facts dt { margin-bottom: 6px; color: var(--pink-dark); font-size: .64rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.studio-profile-facts dd { margin: 0; font-size: .9rem; font-weight: 650; line-height: 1.35; }
.studio-profile-origin { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(46px, 9vw, 150px); padding: clamp(70px, 7vw, 104px) max(var(--pad), calc((100% - var(--container)) / 2)); background: radial-gradient(circle at 90% 15%, rgba(236,25,134,.13), transparent 30%), #090909; }
.studio-profile-origin h2,
.studio-profile-experience h2 { max-width: 680px; margin: 9px 0 0; color: var(--paper); font-size: clamp(2.35rem, 4vw, 4.6rem); line-height: .96; letter-spacing: -.055em; }
.studio-profile-origin > div:last-child { max-width: 720px; padding-top: 28px; border-top: 1px solid rgba(236,25,134,.55); }
.studio-profile-origin > div:last-child p { color: #bbb; font-size: 1.03rem; line-height: 1.72; }
.studio-profile-credentials { padding: clamp(72px, 8vw, 118px) 0; }
.studio-profile-credentials header { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: end; gap: 48px; margin-bottom: 44px; }
.studio-profile-credentials header .label { align-self: start; padding-top: 12px; }
.studio-profile-credentials ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; background: #d2ccc5; border: 1px solid #d2ccc5; list-style: none; }
.studio-profile-credentials li { min-height: 270px; padding: clamp(26px, 3vw, 42px); background: #f4f1ed; }
.studio-profile-credentials li span { color: var(--pink-dark); font-size: .72rem; font-weight: 750; letter-spacing: .1em; }
.studio-profile-credentials li h3 { margin: 58px 0 12px; font-size: clamp(1.45rem, 2vw, 2.05rem); letter-spacing: -.035em; }
.studio-profile-credentials li p { margin: 0; color: #555; line-height: 1.62; }
.studio-profile-training { padding: 0 0 clamp(74px, 8vw, 120px); }
.studio-profile-training > header { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); align-items: end; gap: clamp(42px, 8vw, 130px); margin-bottom: 44px; }
.studio-profile-training > header > p { max-width: 560px; margin: 0 0 8px; color: #555; line-height: 1.7; }
.studio-training-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #cfc9c2; }
.studio-training-grid details { border-bottom: 1px solid #cfc9c2; }
.studio-training-grid details:nth-child(odd) { border-right: 1px solid #cfc9c2; }
.studio-training-grid summary { display: grid; grid-template-columns: 42px minmax(0, 1fr) 28px; gap: 18px; min-height: 182px; padding: 28px 30px; cursor: pointer; list-style: none; }
.studio-training-grid summary::-webkit-details-marker { display: none; }
.studio-training-grid summary > span { color: var(--pink-dark); font-size: .7rem; font-weight: 750; letter-spacing: .1em; }
.studio-training-grid summary h3 { margin: 0 0 9px; font-size: clamp(1.28rem, 1.7vw, 1.72rem); letter-spacing: -.035em; }
.studio-training-grid summary p { margin: 0; color: #5c5c5c; line-height: 1.55; }
.studio-training-grid summary b { color: var(--pink-dark); font-size: 1.35rem; font-weight: 400; transition: transform .2s ease; }
.studio-training-grid details[open] summary b { transform: rotate(45deg); }
.studio-training-grid details > p { margin: -12px 30px 28px 90px; color: #3e3e3e; line-height: 1.65; }
.studio-profile-experience { display: grid; grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr); gap: clamp(58px, 9vw, 150px); padding: clamp(74px, 8vw, 116px) max(var(--pad), calc((100% - var(--container)) / 2)); background: #090909; }
.studio-profile-experience ol { margin: 0; padding: 0; border-top: 1px solid #393939; list-style: none; }
.studio-profile-experience li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; padding: 24px 0; color: #aaa; border-bottom: 1px solid #393939; }
.studio-profile-experience li > span { color: var(--pink); font-size: .72rem; font-weight: 750; letter-spacing: .08em; }
.studio-profile-experience h3 { margin: 0 0 8px; color: var(--paper); font-size: 1.22rem; }
.studio-profile-experience p { margin: 0; line-height: 1.58; }
.studio-profile-archive { width: min(calc(100% - (var(--pad) * 2)), var(--container)); margin: clamp(62px, 8vw, 112px) auto 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.studio-profile-archive summary { display: flex; align-items: center; justify-content: space-between; gap: 34px; padding: 32px 0; cursor: pointer; list-style: none; }
.studio-profile-archive summary::-webkit-details-marker { display: none; }
.studio-profile-archive summary h2 { max-width: 820px; margin: 0; font-size: clamp(2rem, 3.5vw, 4rem); line-height: .98; letter-spacing: -.055em; }
.studio-profile-archive summary b { color: var(--pink); font-size: 1.8rem; transition: transform .2s ease; }
.studio-profile-archive details[open] summary b { transform: rotate(45deg); }
.studio-profile-archive .legacy-content { width: min(100%, 1180px); margin: 0 auto; padding: 10px 0 72px; }
.studio-profile-archive .legacy-content ul { columns: 2; column-gap: 54px; }
.studio-profile-archive .legacy-content li { break-inside: avoid; }
.studio-profile-closing { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); align-items: end; gap: clamp(46px, 8vw, 130px); padding: clamp(72px, 8vw, 112px) 0; }
.studio-profile-closing > div:last-child p { margin: 0 0 26px; color: #505050; font-size: 1.06rem; line-height: 1.7; }

@media (max-width: 920px) {
  .studio-profile-intro { grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: 34px; }
  .studio-profile-portrait,
  .studio-profile-portrait img { min-height: 480px; }
  .studio-profile-origin,
  .studio-profile-experience { grid-template-columns: 1fr; gap: 42px; }
  .studio-profile-credentials header,
  .studio-profile-training > header,
  .studio-profile-closing { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 700px) {
  .studio-team-page .inner-hero { min-height: 0; }
  .studio-profile-intro { grid-template-columns: 1fr; padding: 52px 0 62px; }
  .studio-profile-portrait { min-height: 390px; max-height: 540px; }
  .studio-profile-portrait img { min-height: 390px; }
  .studio-profile-copy blockquote { margin: 26px 0; padding-left: 20px; }
  .studio-profile-facts,
  .studio-profile-credentials ol,
  .studio-training-grid { grid-template-columns: 1fr; }
  .studio-profile-facts > div { padding: 15px 17px; }
  .studio-profile-credentials li { min-height: 210px; }
  .studio-profile-credentials li h3 { margin-top: 38px; }
  .studio-training-grid details:nth-child(odd) { border-right: 0; }
  .studio-training-grid summary { grid-template-columns: 32px minmax(0, 1fr) 22px; gap: 12px; min-height: 0; padding: 24px 4px; }
  .studio-training-grid details > p { margin: -4px 4px 24px 44px; }
  .studio-profile-experience li { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; }
  .studio-profile-archive .legacy-content ul { columns: 1; }
  .studio-profile-closing { padding: 58px 0 70px; }
}

/* Organometría funcional: artículo editorial y proceso visual. */
.organometry-article { color: var(--ink); background: var(--paper); }
.organometry-overview,
.organometry-process,
.organometry-scope { width: min(calc(100% - (var(--pad) * 2)), var(--container)); margin: 0 auto; }
.organometry-overview { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr); align-items: center; gap: clamp(48px, 8vw, 132px); padding: clamp(72px, 8vw, 122px) 0; }
.organometry-overview-copy h2,
.organometry-process > header h2,
.organometry-scope > header h2,
.organometry-map h2,
.organometry-faq h2 { margin: 8px 0 26px; font-size: clamp(2.45rem, 4.5vw, 5.2rem); line-height: .95; letter-spacing: -.058em; text-wrap: balance; }
.organometry-overview-copy > p { max-width: 710px; color: #484848; font-size: 1.04rem; line-height: 1.72; }
.organometry-overview-copy .organometry-lead { color: var(--ink); font-size: clamp(1.25rem, 1.75vw, 1.58rem); line-height: 1.5; letter-spacing: -.02em; }
.organometry-overview-copy aside { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 22px; margin-top: 34px; padding: 22px 0; border-top: 1px solid var(--green); border-bottom: 1px solid #d7d2ca; }
.organometry-overview-copy aside strong { color: var(--green-dark); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.organometry-overview-copy aside p { margin: 0; color: #393939; line-height: 1.55; }
.organometry-device { position: relative; margin: 0; padding: clamp(28px, 4vw, 50px); background: #e8e4de; box-shadow: 28px 32px 0 #d6e2bc; }
.organometry-device > span { display: block; margin-bottom: 22px; color: var(--green-dark); font-size: .68rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.organometry-device img { width: 100%; height: auto; mix-blend-mode: multiply; }
.organometry-device figcaption { margin-top: 22px; color: #5a5a5a; font-size: .84rem; line-height: 1.55; }
.organometry-map { padding: clamp(72px, 8vw, 112px) max(var(--pad), calc((100% - var(--container)) / 2)); background: radial-gradient(circle at 88% 12%, rgba(172,218,0,.13), transparent 29%), #090909; }
.organometry-map > header { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr); align-items: end; gap: clamp(42px, 8vw, 130px); margin-bottom: 50px; }
.organometry-map h2 { max-width: 790px; color: var(--paper); }
.organometry-map > header > p { max-width: 570px; margin: 0 0 8px; color: #aaa; line-height: 1.7; }
.organometry-map ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; background: #3a3a3a; border: 1px solid #3a3a3a; list-style: none; }
.organometry-map li { position: relative; min-height: 290px; padding: clamp(26px, 2.6vw, 40px); background: #111; }
.organometry-map li::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; content: ""; background: linear-gradient(90deg, var(--green), rgba(172,218,0,.08)); }
.organometry-map li span { color: var(--green); font-size: .7rem; font-weight: 750; letter-spacing: .1em; }
.organometry-map li h3 { margin: 78px 0 14px; color: var(--paper); font-size: clamp(1.25rem, 1.7vw, 1.72rem); line-height: 1.05; letter-spacing: -.035em; }
.organometry-map li p { margin: 0; color: #aaa; line-height: 1.58; }
.organometry-process { padding: clamp(76px, 8vw, 126px) 0; }
.organometry-process > header { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(320px, .84fr); align-items: end; gap: clamp(46px, 8vw, 130px); margin-bottom: 56px; }
.organometry-process > header .label { grid-column: 1 / -1; margin-bottom: -30px; }
.organometry-process > header h2 { max-width: 820px; margin-bottom: 0; }
.organometry-process > header > p { max-width: 540px; margin: 0 0 8px; color: #555; line-height: 1.7; }
.organometry-step { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr); align-items: stretch; min-height: 500px; border-top: 1px solid #cfc9c1; }
.organometry-step + .organometry-step { grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr); }
.organometry-step + .organometry-step figure { order: 2; }
.organometry-step figure { display: grid; align-items: center; margin: 0; padding: clamp(28px, 4vw, 58px); overflow: hidden; background: #e4e0da; }
.organometry-step figure img { width: 100%; height: min(410px, 30vw); object-fit: cover; }
.organometry-step > div { display: flex; justify-content: center; flex-direction: column; padding: clamp(34px, 5vw, 76px); background: #f7f4ef; }
.organometry-step > div > span { align-self: flex-start; margin-bottom: 62px; color: var(--green-dark); font-size: .72rem; font-weight: 750; letter-spacing: .1em; }
.organometry-step h3 { max-width: 520px; margin: 6px 0 18px; font-size: clamp(1.75rem, 2.7vw, 3rem); line-height: 1; letter-spacing: -.045em; }
.organometry-step > div > p:last-child { max-width: 550px; margin: 0; color: #505050; line-height: 1.68; }
.organometry-scope { padding: 0 0 clamp(78px, 8vw, 126px); }
.organometry-scope > header { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); align-items: start; gap: 48px; margin-bottom: 44px; }
.organometry-scope > header h2 { max-width: 920px; margin-top: 0; }
.organometry-scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #cbc6bf; border: 1px solid #cbc6bf; }
.organometry-scope-grid section { min-height: 390px; padding: clamp(32px, 4.5vw, 64px); background: #f3f0eb; }
.organometry-scope-grid section:last-child { color: var(--paper); background: #111; }
.organometry-scope-grid section > span { display: block; color: var(--green-dark); font-size: 2rem; }
.organometry-scope-grid section:last-child > span { color: var(--pink); }
.organometry-scope-grid h3 { margin: 34px 0 24px; font-size: clamp(1.55rem, 2.3vw, 2.55rem); letter-spacing: -.04em; }
.organometry-scope-grid ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.organometry-scope-grid li { position: relative; padding-left: 24px; color: #4d4d4d; line-height: 1.55; }
.organometry-scope-grid section:last-child li { color: #bcbcbc; }
.organometry-scope-grid li::before { position: absolute; left: 0; content: "↗"; color: var(--green-dark); }
.organometry-scope-grid section:last-child li::before { color: var(--pink); }
.organometry-faq { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(54px, 9vw, 150px); padding: clamp(74px, 8vw, 116px) max(var(--pad), calc((100% - var(--container)) / 2)); background: #090909; }
.organometry-faq h2 { max-width: 650px; color: var(--paper); }
.organometry-faq > div:last-child { border-top: 1px solid #393939; }
.organometry-faq details { border-bottom: 1px solid #393939; }
.organometry-faq summary { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 18px; padding: 25px 0; color: var(--paper); cursor: pointer; font-size: 1.04rem; font-weight: 650; list-style: none; }
.organometry-faq summary::-webkit-details-marker { display: none; }
.organometry-faq summary b { color: var(--green); font-size: 1.3rem; font-weight: 400; transition: transform .2s ease; }
.organometry-faq details[open] summary b { transform: rotate(45deg); }
.organometry-faq details p { max-width: 620px; margin: -4px 40px 25px 0; color: #aaa; line-height: 1.65; }

@media (max-width: 980px) {
  .organometry-overview { grid-template-columns: 1fr 1fr; gap: 34px; }
  .organometry-map ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .organometry-map li { min-height: 240px; }
  .organometry-step,
  .organometry-step + .organometry-step { grid-template-columns: 1fr 1fr; }
  .organometry-scope > header { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 720px) {
  .organometry-overview,
  .organometry-map > header,
  .organometry-process > header,
  .organometry-faq { grid-template-columns: 1fr; }
  .organometry-overview { padding: 56px 0 70px; }
  .organometry-device { box-shadow: 14px 16px 0 #d6e2bc; }
  .organometry-overview-copy aside { grid-template-columns: 1fr; gap: 8px; }
  .organometry-map { padding: 58px 20px 64px; }
  .organometry-map ol,
  .organometry-scope-grid { grid-template-columns: 1fr; }
  .organometry-map li { min-height: 215px; }
  .organometry-map li h3 { margin-top: 48px; }
  .organometry-process { padding: 62px 0 76px; }
  .organometry-process > header .label { grid-column: auto; margin-bottom: -5px; }
  .organometry-step,
  .organometry-step + .organometry-step { grid-template-columns: 1fr; min-height: 0; }
  .organometry-step + .organometry-step figure { order: 0; }
  .organometry-step figure { padding: 22px; }
  .organometry-step figure img { height: auto; max-height: 340px; object-fit: contain; }
  .organometry-step > div { padding: 34px 24px 42px; }
  .organometry-step > div > span { margin-bottom: 38px; }
  .organometry-scope-grid section { min-height: 0; }
  .organometry-faq { gap: 32px; padding: 60px 20px 70px; }
}

/* Lectura editorial para párrafos heredados excepcionalmente largos. */
.content-page:not(.legal-page) .legacy-content p.legacy-longform,
.studio-content-page .legacy-content p.legacy-longform {
  width: min(100%, 1080px) !important;
  max-width: none !important;
  margin: 38px auto 48px !important;
  padding: clamp(28px, 4vw, 48px) !important;
  column-count: 2;
  column-gap: clamp(36px, 5vw, 68px);
  column-rule: 1px solid #cbc6be;
  color: #343434 !important;
  background: linear-gradient(135deg, rgba(172,218,0,.08), transparent 42%), #f0ede7;
  border-top: 3px solid var(--green);
  font-size: clamp(.98rem, 1.05vw, 1.08rem) !important;
  line-height: 1.72 !important;
}
.studio-content-page .legacy-content p.legacy-longform { background: linear-gradient(135deg, rgba(236,25,134,.08), transparent 42%), #f0ede7; border-top-color: var(--pink); }

@media (max-width: 700px) {
  .content-page:not(.legal-page) .legacy-content p.legacy-longform,
  .studio-content-page .legacy-content p.legacy-longform { margin: 24px auto 34px !important; padding: 24px 20px !important; column-count: 1; column-rule: 0; }
}

/* Respuesta inicial para artículos con alta visibilidad orgánica. */
.article-search-brief { width: min(100%, var(--container)); margin: 0 auto; padding: clamp(58px, 7vw, 108px) var(--pad); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: clamp(50px, 8vw, 130px); border-bottom: 1px solid var(--line-dark); background: linear-gradient(120deg, rgba(168,210,27,.09), transparent 38%); }
.article-search-brief h2 { max-width: 780px; margin: 0 0 24px; font-size: clamp(2.25rem, 4.3vw, 5.1rem); line-height: .96; letter-spacing: -.06em; }
.article-search-brief > div > p:last-child { max-width: 780px; margin: 0; font-size: clamp(1.15rem, 1.55vw, 1.45rem); line-height: 1.5; }
.article-search-brief ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); }
.article-search-brief li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line-dark); }
.article-search-brief li span { color: var(--green-dark); }
.article-search-brief li p { margin: 0; }

.team-history { width: min(100%, var(--container)); margin: 0 auto; padding: clamp(70px, 8vw, 118px) var(--pad); }
.team-history summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; padding-bottom: 34px; cursor: pointer; list-style: none; border-bottom: 1px solid var(--line-dark); }
.team-history summary::-webkit-details-marker { display: none; }
.team-history summary > div { max-width: 900px; }
.team-history summary h2 { margin: 0 0 18px; font-size: clamp(2.35rem, 4vw, 4.8rem); line-height: .96; letter-spacing: -.06em; }
.team-history summary p:last-child { max-width: 760px; margin: 0; color: #565656; }
.team-history summary > b { color: var(--green-dark); font-size: 2rem; transition: transform .2s ease; }
.team-history details[open] summary > b { transform: rotate(45deg); }
.team-history nav { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 28px; border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.team-history nav a { display: flex; justify-content: space-between; gap: 24px; min-height: 92px; padding: 24px; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.team-history nav a:hover { color: var(--green-dark); background: rgba(168,210,27,.08); }
.team-history nav a > b { color: var(--green-dark); }

/* Studio discipline editorial system */
.studio-practice { background: var(--paper); }
.studio-practice-intro,
.studio-practice-session,
.studio-practice-before,
.studio-practice-faq,
.studio-practice-next,
.studio-practice-source,
.studio-practice-focus { width: min(100%, var(--container)); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.studio-practice-intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr); gap: clamp(44px, 8vw, 140px); padding-top: clamp(72px, 9vw, 132px); padding-bottom: clamp(64px, 8vw, 118px); }
.studio-practice-intro h2,
.studio-practice-focus h2,
.studio-practice-session h2,
.studio-practice-before h2,
.studio-practice-faq h2 { margin: 0; font-size: clamp(2.35rem, 4.8vw, 5.5rem); line-height: .94; letter-spacing: -.065em; }
.studio-practice-intro > p { align-self: end; max-width: 760px; margin: 0; font-size: clamp(1.1rem, 1.55vw, 1.5rem); line-height: 1.55; }
.studio-practice-focus { padding-bottom: clamp(72px, 9vw, 132px); }
.studio-practice-focus > header { display: grid; grid-template-columns: .65fr 1.35fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line-dark); }
.studio-practice-focus > header h2 { max-width: 820px; }
.studio-practice-focus > div { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid var(--line-dark); }

.studio-practice-focus article > span { color: var(--pink); font-size: .78rem; font-weight: 800; letter-spacing: .12em; }
.studio-practice-focus h3 { max-width: 260px; margin: 66px 0 18px; font-size: clamp(1.55rem, 2.2vw, 2.5rem); line-height: 1; letter-spacing: -.045em; }
.studio-practice-focus article p { margin: 0; color: #535353; }
.studio-practice-session { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(48px, 9vw, 150px); width: 100%; max-width: none; padding-top: clamp(76px, 9vw, 132px); padding-bottom: clamp(76px, 9vw, 132px); }
.studio-practice-session > div { margin-left: max(0px, calc((100vw - var(--container)) / 2)); }
.studio-practice-session > p { align-self: end; max-width: 650px; margin: 0 max(var(--pad), calc((100vw - var(--container)) / 2)) 0 0; color: #d1d1d1; font-size: clamp(1.08rem, 1.45vw, 1.4rem); line-height: 1.6; }
.studio-practice-before { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 9vw, 150px); padding-top: clamp(72px, 9vw, 132px); padding-bottom: clamp(72px, 9vw, 132px); border-bottom: 1px solid var(--line-dark); }
.studio-practice-before > p { align-self: end; margin: 0; padding: clamp(28px, 4vw, 56px); border-left: 3px solid var(--pink); background: #fff; font-size: 1.1rem; line-height: 1.65; }
.studio-practice-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(48px, 9vw, 150px); padding-top: clamp(72px, 9vw, 132px); padding-bottom: clamp(72px, 9vw, 132px); }
.studio-practice-faq details { border-top: 1px solid var(--line-dark); }
.studio-practice-faq details:last-child { border-bottom: 1px solid var(--line-dark); }
.studio-practice-faq summary { display: flex; justify-content: space-between; gap: 28px; padding: 24px 0; cursor: pointer; list-style: none; font-weight: 750; }
.studio-practice-faq summary::-webkit-details-marker { display: none; }
.studio-practice-faq summary b { color: var(--pink); font-size: 1.4rem; transition: transform .2s ease; }
.studio-practice-faq details[open] summary b { transform: rotate(45deg); }
.studio-practice-faq details p { max-width: 720px; margin: 0 0 28px; color: #515151; }
.studio-practice-next { width: 100%; max-width: none; padding-top: 72px; padding-bottom: 72px; }
.studio-practice-next > p,
.studio-practice-next > div { width: min(calc(100% - (var(--pad) * 2)), var(--container)); margin-left: auto; margin-right: auto; }
.studio-practice-next > div { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 20px; border-top: 1px solid #343434; border-left: 1px solid #343434; }
.studio-practice-next a { display: flex; justify-content: space-between; gap: 24px; padding: 28px; border-right: 1px solid #343434; border-bottom: 1px solid #343434; color: #fff; font-size: 1.1rem; }

.studio-practice-source { padding-top: 44px; padding-bottom: 80px; }
.studio-practice-source > summary { display: flex; justify-content: space-between; gap: 24px; padding: 26px 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); cursor: pointer; list-style: none; font-weight: 750; }
.studio-practice-source > summary::-webkit-details-marker { display: none; }
.studio-practice-source > summary b { color: var(--pink); font-size: 1.5rem; transition: transform .2s ease; }
.studio-practice-source[open] > summary b { transform: rotate(45deg); }
.studio-practice-source .legacy-content { width: min(100%, 1040px); margin: 0 auto; padding: 56px 0 0; }
.historical-profile-shell { grid-template-columns: minmax(180px, .28fr) minmax(0, 1fr); }
.historical-profile-note { margin-bottom: 54px; padding: 30px; border-left: 3px solid var(--green); background: rgba(168,210,27,.08); }
.historical-profile-note strong { display: block; margin-bottom: 10px; font-size: 1.1rem; }
.historical-profile-note p { max-width: 720px; margin: 0 0 16px; }
.historical-profile-note a { font-weight: 750; color: var(--green-dark); }

/* Contenido completo integrado en técnicas, tratamientos y disciplinas. */
.integrated-article-content {
  width: 100%;
  margin: 0;
  padding: clamp(72px, 8vw, 126px) max(var(--pad), calc((100% - var(--container)) / 2));
  overflow: clip;
  background:
    radial-gradient(circle at 92% 3%, rgba(168,210,27,.13), transparent 27%),
    linear-gradient(180deg, #efede7 0%, #f7f4ef 42%, #efede7 100%);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.integrated-article-header {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
  align-items: end;
  gap: clamp(44px, 8vw, 132px);
  width: min(100%, var(--container));
  margin: 0 auto clamp(54px, 7vw, 92px);
  padding-bottom: clamp(34px, 4vw, 52px);
  border-bottom: 1px solid #c8c3bb;
}
.integrated-article-header h2 {
  max-width: 880px;
  margin: 0;
  font-size: clamp(2.45rem, 4.8vw, 5.55rem);
  line-height: .94;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.integrated-article-header > p {
  max-width: 660px;
  margin: 0 0 6px;
  color: #4e4e4e;
  font-size: clamp(1.04rem, 1.3vw, 1.24rem);
  line-height: 1.65;
}
.integrated-article-body {
  width: min(100%, var(--container));
  max-width: none;
  margin: 0 auto;
}
.integrated-article-body > p,
.integrated-article-body > ul,
.integrated-article-body > ol,
.integrated-article-body > blockquote,
.integrated-article-body > h2,
.integrated-article-body > h3,
.integrated-article-body > h4 {
  width: min(100%, 920px);
  margin-right: auto;
  margin-left: auto;
}
.integrated-article-body > h2,
.integrated-article-body > h3 {
  margin-top: clamp(48px, 6vw, 82px);
  padding-top: 24px;
  border-top: 2px solid var(--green);
  font-size: clamp(1.85rem, 3vw, 3.45rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.integrated-article-studio .integrated-article-body > h2,
.integrated-article-studio .integrated-article-body > h3 { border-top-color: var(--pink); }
.integrated-article-body > p,
.integrated-article-body > li { color: #3f3f3f; font-size: clamp(1rem, 1.06vw, 1.1rem); line-height: 1.76; }
.integrated-article-body .elementor > .elementor-top-section { counter-increment: integrated-section; }
.integrated-article-body .elementor > .elementor-top-section:has(h2, h3, h4, p, li, blockquote, table) {
  position: relative;
  width: 100%;
  margin: 0 0 clamp(24px, 4vw, 54px);
}
.integrated-article-body .elementor > .elementor-top-section:has(img) {
  box-shadow: 0 28px 70px rgba(64,55,43,.08);
}
.integrated-article-body .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.integrated-article-body .elementor-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 8px 8px 8px 0;
  padding: 11px 18px;
  border: 1px solid var(--green-dark);
  color: var(--ink);
  font-weight: 700;
}
.integrated-article-studio .integrated-article-body .elementor-button { border-color: var(--pink); }

/* Vídeo contextual: lectura y audiovisual forman una única composición editorial. */
.context-video {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .76fr) minmax(0, 1.24fr);
  gap: clamp(34px, 6vw, 94px);
  align-items: center;
  width: min(calc(100% - (var(--pad) * 2)), var(--container));
  margin: clamp(62px, 7vw, 108px) auto;
  padding: clamp(34px, 4.5vw, 66px);
  color: #f6f4ee;
  background:
    radial-gradient(circle at 8% 100%, rgba(168,210,27,.18), transparent 32%),
    #10110f;
  overflow: visible;
}
.context-video-copy { max-width: 540px; }
.context-video-copy h2 { margin: 12px 0 22px; color: #fff; font-size: clamp(2rem, 3.4vw, 4.15rem); line-height: .96; letter-spacing: -.055em; text-wrap: balance; }
.context-video-copy > p:not(.label) { margin: 0; color: #c9cbc3; font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.66; }
.context-video-copy > a { display: inline-flex; gap: 14px; align-items: center; margin-top: 28px; padding-bottom: 6px; color: var(--green-bright); border-bottom: 1px solid rgba(168,210,27,.6); font-weight: 750; }
.context-video-frame { position: relative; z-index: 1; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 30px 70px rgba(0,0,0,.38); }
.context-video-frame::before { content: ""; position: absolute; z-index: -1; inset: -13px 15px 15px -13px; border: 1px solid rgba(168,210,27,.68); transform: rotate(-.75deg); pointer-events: none; }
.context-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.context-video-article { margin-top: clamp(54px, 6vw, 88px); margin-bottom: clamp(54px, 6vw, 88px); }

/* Relacionados del blog: la misma fórmula visual que el archivo, no una tarjeta genérica. */
.related-blog-content { padding-top: clamp(66px, 7vw, 106px); padding-bottom: clamp(78px, 8vw, 124px); background: #efede7; }
.related-blog-content .related-heading { display: grid; grid-template-columns: minmax(0, .72fr) minmax(320px, 1.28fr); align-items: end; gap: 34px; margin-bottom: clamp(38px, 5vw, 68px); }
.related-blog-content .related-heading h2 { max-width: 760px; margin: 0; font-size: clamp(2.25rem, 4vw, 4.8rem); line-height: .96; letter-spacing: -.055em; }
.related-blog-grid { gap: clamp(34px, 4vw, 60px) clamp(20px, 2.4vw, 38px); }
.related-blog-grid .blog-archive-card.is-shifted { margin-top: 42px; }

/* Ritmo editorial para artículos: titulares anclados, lectura medida e imágenes enmarcadas. */
.article-page:not(.testimonial-page) .article-content { counter-reset: article-section; }
.article-page:not(.testimonial-page) .article-content > h2 {
  counter-increment: article-section;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 22px;
  align-items: baseline;
  max-width: 980px;
  margin-top: clamp(68px, 8vw, 116px);
  padding-top: 22px;
  border-top: 1px solid rgba(22,24,18,.22);
  font-size: clamp(2rem, 3.5vw, 4rem);
  line-height: .98;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.article-page:not(.testimonial-page) .article-content > h2::before { content: counter(article-section, decimal-leading-zero); color: var(--green-dark); font-size: .72rem; font-weight: 750; letter-spacing: .08em; }
.article-page:not(.testimonial-page) .article-content > h3 { max-width: 800px; margin-top: clamp(44px, 5vw, 72px); font-size: clamp(1.45rem, 2.3vw, 2.45rem); line-height: 1.05; letter-spacing: -.035em; }
.article-page:not(.testimonial-page) .article-content > p,
.article-page:not(.testimonial-page) .article-content > ul,
.article-page:not(.testimonial-page) .article-content > ol { max-width: 820px; }
.article-page:not(.testimonial-page) .article-content > div:not([class]) > p,
.article-page:not(.testimonial-page) .article-content > div:not([class]) > ul,
.article-page:not(.testimonial-page) .article-content > div:not([class]) > ol { max-width: 820px; }
.article-page:not(.testimonial-page) .article-content > div:not([class]) > p:first-of-type {
  max-width: 980px;
  margin: clamp(42px, 5vw, 70px) 0;
  padding: clamp(28px, 4vw, 52px);
  color: #34362f;
  background: #e8eadf;
  border-left: 2px solid var(--green);
  column-count: 2;
  column-gap: clamp(32px, 5vw, 66px);
  column-rule: 1px solid rgba(22,24,18,.13);
  font-size: clamp(1.02rem, 1.18vw, 1.16rem);
  line-height: 1.75;
}
.article-page:not(.testimonial-page) .article-content > div:not([class]) > p.legacy-longform {
  max-width: 980px;
  margin: clamp(42px, 5vw, 72px) 0;
  padding: clamp(28px, 4vw, 48px);
  background: #f0eee8;
  border-top: 1px solid rgba(74,91,39,.34);
  column-count: 2;
  column-gap: clamp(32px, 5vw, 66px);
  column-rule: 1px solid rgba(22,24,18,.12);
  line-height: 1.75;
}
.article-page:not(.testimonial-page) .article-content > div:not([class]) > p:has(> strong:first-child):not(.legacy-longform) {
  margin-top: clamp(34px, 4vw, 58px);
  color: #1c1e19;
  font-size: clamp(1.08rem, 1.35vw, 1.32rem);
  line-height: 1.48;
}
.article-page:not(.testimonial-page) .article-content > div:not([class]) > h2 {
  max-width: 980px;
  margin: clamp(70px, 8vw, 116px) 0 28px;
  padding: 22px 0 0 70px;
  border-top: 1px solid rgba(22,24,18,.22);
  font-size: clamp(2rem, 3.5vw, 4rem);
  line-height: .98;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.article-page:not(.testimonial-page) .article-content > div:not([class]) > h3 {
  max-width: 850px;
  margin: clamp(50px, 6vw, 82px) 0 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(22,24,18,.18);
  font-size: clamp(1.55rem, 2.35vw, 2.55rem);
  line-height: 1.03;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.article-page:not(.testimonial-page) .article-content .wp-block-columns {
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 6vw, 78px);
  align-items: center;
  max-width: 980px;
  margin: clamp(54px, 7vw, 96px) 0;
}
.article-page:not(.testimonial-page) .article-content .wp-block-column { min-width: 0; }
.article-page:not(.testimonial-page) .article-content > blockquote { max-width: 980px; margin: clamp(58px, 7vw, 96px) 0; padding: clamp(30px, 4vw, 54px) clamp(34px, 5vw, 72px); background: #e8edd9; border: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.4rem, 2.4vw, 2.65rem); line-height: 1.28; }
.article-page:not(.testimonial-page) .article-content figure:has(> img),
.article-page:not(.testimonial-page) .article-content .elementor-widget-image {
  position: relative;
  isolation: isolate;
  overflow: visible;
  padding: clamp(10px, 1.4vw, 18px);
  background: #e6e3db;
  box-shadow: 0 24px 58px rgba(60,52,43,.12);
}
.article-page:not(.testimonial-page) .article-content figure:has(> img)::before,
.article-page:not(.testimonial-page) .article-content .elementor-widget-image::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -9px 11px 10px -10px;
  border: 1px solid rgba(74,91,39,.38);
  transform: rotate(-.55deg);
  pointer-events: none;
}
.article-page:not(.testimonial-page) .article-content figure:nth-of-type(even):has(> img)::before,
.article-page:not(.testimonial-page) .article-content .elementor-widget-image:nth-of-type(even)::before { inset: -8px -10px 11px 10px; transform: rotate(.7deg); }

/* El texto completo heredado se recompone como revista: capítulos, columnas y pausas visuales. */
.integrated-article-body .legacy-section-longform {
  width: min(100%, 1160px);
  margin-right: auto !important;
  margin-left: auto !important;
  padding: clamp(42px, 6vw, 84px) clamp(28px, 6vw, 92px) !important;
  background: rgba(255,255,255,.58);
  box-shadow: 0 28px 76px rgba(58,50,40,.08);
}
.integrated-article-body .legacy-section-longform .elementor-widget-heading,
.integrated-article-body .legacy-section-longform .elementor-widget-text-editor { width: min(100%, 980px); }
.integrated-article-body .legacy-section-longform .elementor-widget-text-editor > div {
  column-count: 2;
  column-gap: clamp(34px, 5vw, 72px);
  column-rule: 1px solid rgba(22,24,18,.12);
}
.integrated-article-body .legacy-section-longform .elementor-widget-text-editor h2,
.integrated-article-body .legacy-section-longform .elementor-widget-text-editor h3 { column-span: all; }
.integrated-article-body .legacy-section-longform h2,
.integrated-article-body .legacy-section-longform h3,
.integrated-article-body .legacy-section-text h2,
.integrated-article-body .legacy-section-text h3 {
  margin: clamp(42px, 5vw, 68px) 0 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(74,91,39,.34);
  font-size: clamp(1.65rem, 2.7vw, 3.2rem);
  line-height: 1;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.integrated-article-body .legacy-section-longform h3,
.integrated-article-body .legacy-section-text h3 { font-size: clamp(1.28rem, 1.8vw, 2rem); }
.integrated-article-body .legacy-section-longform p,
.integrated-article-body .legacy-section-text p { color: #3f403b; font-size: clamp(.99rem, 1.04vw, 1.08rem); line-height: 1.76; text-align: left !important; }

.integrated-article-body .legacy-section-text {
  width: min(100%, 1120px) !important;
  margin: clamp(30px, 5vw, 74px) auto !important;
  padding: clamp(32px, 5vw, 68px) !important;
  background: rgba(255,255,255,.44);
  border-top: 1px solid rgba(22,24,18,.13);
  border-bottom: 1px solid rgba(22,24,18,.13);
}
.integrated-article-body .legacy-section-text:nth-of-type(even) { width: min(94%, 1040px) !important; margin-left: 0 !important; background: #e7eadb; }
.integrated-article-body .legacy-section-text:nth-of-type(odd) { margin-right: 0 !important; }
.integrated-article-body .legacy-section-text > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: clamp(30px, 5vw, 74px);
}
.integrated-article-body .legacy-section-gallery {
  position: relative;
  width: min(100%, 1160px) !important;
  margin: clamp(54px, 7vw, 98px) auto !important;
  padding: clamp(22px, 3vw, 38px) !important;
  background: #e4e0d6;
  box-shadow: 0 28px 70px rgba(64,55,43,.11);
}
.integrated-article-body .legacy-section-gallery::before { content: ""; position: absolute; inset: -12px 14px 13px -13px; border: 1px solid rgba(74,91,39,.36); transform: rotate(-.4deg); pointer-events: none; }
.integrated-article-body .legacy-section-gallery .elementor-widget-image { position: relative; overflow: hidden; background: #d7d3c8; }
.integrated-article-body .legacy-section-gallery .elementor-widget-image img { transition: transform .5s cubic-bezier(.2,.72,.2,1); }
.integrated-article-body .legacy-section-gallery .elementor-widget-image:hover img { transform: scale(1.018); }
.integrated-article-studio .legacy-section-longform h2,
.integrated-article-studio .legacy-section-longform h3,
.integrated-article-studio .legacy-section-text h2,
.integrated-article-studio .legacy-section-text h3 { border-top-color: rgba(184,0,92,.38); }

.integrated-article-studio .legacy-section-gallery::before { border-color: rgba(225,0,113,.38); }

/*
 * Armonía editorial: la lectura continua es el patrón base. Las columnas
 * quedan reservadas para comparaciones breves y nunca se anidan entre sí.
 */
.content-page:not(.legal-page) .legacy-content p.legacy-longform,
.studio-content-page .legacy-content p.legacy-longform,
.article-page:not(.testimonial-page) .article-content > div:not([class]) > p:first-of-type,
.article-page:not(.testimonial-page) .article-content > div:not([class]) > p.legacy-longform,
.integrated-article-body .legacy-section-longform .elementor-widget-text-editor > div {
  column-count: 1;
  column-rule: 0;
}
.content-page:not(.legal-page) .legacy-content p.legacy-longform,
.studio-content-page .legacy-content p.legacy-longform {
  width: min(100%, 860px) !important;
}
.integrated-article-body .legacy-section-longform .elementor-widget-text-editor {
  width: min(100%, 860px);
  margin-right: auto;
  margin-left: auto;
}
.integrated-article-body .legacy-section-longform p { break-inside: auto; }

/* Panel ancho: comparte los ejes de la cabecera sin ensanchar la línea de lectura. */
.integrated-article-body .legacy-section-text.editorial-panel-wide,
.integrated-article-body .legacy-section-text.editorial-panel-wide:nth-of-type(even),
.integrated-article-body .legacy-section-text.editorial-panel-wide:nth-of-type(odd) {
  position: relative;
  width: min(100%, var(--container)) !important;
  margin: clamp(34px, 5vw, 76px) auto !important;
  padding: clamp(44px, 5vw, 76px) clamp(38px, 6vw, 88px) clamp(50px, 6vw, 86px) !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 14%, rgba(225, 0, 113, .12), transparent 30%),
    linear-gradient(112deg, #f2dfe8 0%, #f5e8ee 58%, #eee8e7 100%);
  border-top: 1px solid rgba(184, 0, 92, .24);
  border-bottom: 1px solid rgba(184, 0, 92, .2);
}
.integrated-article-body .legacy-section-text.editorial-panel-wide::after {
  content: "01";
  position: absolute;
  right: clamp(24px, 4vw, 62px);
  bottom: -0.22em;
  color: rgba(184, 0, 92, .065);
  font-size: clamp(7rem, 16vw, 14rem);
  font-weight: 780;
  line-height: .8;
  letter-spacing: -.08em;
  pointer-events: none;
}
.integrated-article-body .legacy-section-text.editorial-panel-wide > .elementor-container {
  position: relative;
  z-index: 1;
  display: block !important;
}
.integrated-article-body .legacy-section-text.editorial-panel-wide .elementor-widget-text-editor > div {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 860px);
  gap: clamp(34px, 5vw, 76px);
  align-items: start;
}
.integrated-article-body .legacy-section-text.editorial-panel-wide .elementor-widget-text-editor > div > p {
  margin: 0;
}
.integrated-article-body .legacy-section-text.editorial-panel-wide .elementor-widget-text-editor > div > p:empty,
.integrated-article-body .legacy-section-text.editorial-panel-wide .elementor-widget-text-editor > div > p:has(> br:only-child) {
  display: none;
}
.integrated-article-body .legacy-section-text.editorial-panel-wide .elementor-widget-text-editor > div > p:first-child {
  grid-column: 1;
  padding-top: .42rem;
  color: #b8005c !important;
  font-size: .76rem;
  font-weight: 760;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.integrated-article-body .legacy-section-text.editorial-panel-wide .elementor-widget-text-editor > div > p:last-child:not(:first-child) {
  grid-column: 2;
  max-width: 860px;
  color: #26231f !important;
  font-size: clamp(1.16rem, 1.45vw, 1.43rem);
  line-height: 1.58;
  text-wrap: pretty;
}

/*
 * Collage editorial adaptativo. El generador asigna cantidad y orientación
 * para que cada conjunto use una composición propia sin marcos vacíos.
 */
.legacy-content .legacy-section-gallery.editorial-collage,
.integrated-article-body .legacy-section-gallery.editorial-collage {
  --collage-accent: #86b900;
  --collage-accent-soft: rgba(134, 185, 0, .12);
  --collage-plate: #e7e5df;
  position: relative;
  isolation: isolate;
  width: min(100%, var(--container)) !important;
  margin: clamp(58px, 7vw, 104px) auto !important;
  padding: clamp(18px, 2.8vw, 38px) !important;
  overflow: visible;
  background: transparent !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
.studio-content-page .legacy-section-gallery.editorial-collage,
.integrated-article-studio .legacy-section-gallery.editorial-collage {
  --collage-accent: #e10071;
  --collage-accent-soft: rgba(225, 0, 113, .11);
  --collage-plate: #eee7ea;
}
.legacy-content .legacy-section-gallery.editorial-collage::before,
.integrated-article-body .legacy-section-gallery.editorial-collage::before {
  content: "" !important;
  position: absolute;
  z-index: 0;
  left: 1.5%;
  bottom: 4%;
  width: 62%;
  height: 61%;
  border: 2px solid var(--collage-accent);
  border-radius: 18px;
  transform: none;
  pointer-events: none;
}
.legacy-content .legacy-section-gallery.editorial-collage::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 1%;
  bottom: 0;
  width: 46%;
  height: 46%;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--collage-plate), var(--collage-accent-soft));
  pointer-events: none;
}
.legacy-content .legacy-section-gallery.editorial-collage > .elementor-container {
  position: relative;
  z-index: 1;
  display: block !important;
  width: min(100%, 1180px);
  margin: 0 auto;
  aspect-ratio: 16 / 9.25;
}
.legacy-content .legacy-section-gallery.editorial-collage > .elementor-container > .elementor-column {
  position: absolute !important;
  width: auto;
  min-width: 0;
}
.legacy-content .legacy-section-gallery.editorial-collage > .elementor-container > .elementor-column:has(img) {
  display: block !important;
}
.legacy-content .legacy-section-gallery.editorial-collage .elementor-widget-wrap,
.legacy-content .legacy-section-gallery.editorial-collage .elementor-widget-image,
.legacy-content .legacy-section-gallery.editorial-collage .elementor-widget-image > div {
  width: 100%;
  height: 100%;
}
.legacy-content .legacy-section-gallery.editorial-collage .elementor-widget-image {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(42, 40, 35, .16);
  border-radius: 18px;
  background: #f3f1eb;
  box-shadow: 0 22px 48px rgba(47, 42, 34, .14);
}
.legacy-content .legacy-section-gallery.editorial-collage .elementor-widget-image::after {
  content: none;
}
.legacy-content .legacy-section-gallery.editorial-collage img.legacy-image {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  transition: transform .5s cubic-bezier(.2, .72, .2, 1);
}
.legacy-content .legacy-section-gallery.editorial-collage img.legacy-image-square.is-low-resolution {
  object-fit: contain !important;
}

/* Una imagen: presencia amplia, sin fingir una galería. */
.legacy-content .editorial-collage--single > .elementor-container { aspect-ratio: 16 / 7.4 !important; }
.legacy-content .editorial-collage--single > .elementor-container > .editorial-collage-item--1 {
  inset: 0 5%;
  z-index: 1;
}
.legacy-content .editorial-collage--single::before { left: 2%; width: 72%; height: 72%; }
.legacy-content .editorial-collage--single::after { right: 2%; width: 36%; height: 58%; }

/* Dos imágenes: una base dominante y otra pieza superpuesta. */
.legacy-content .editorial-collage--duo > .elementor-container > .editorial-collage-item--1 {
  z-index: 1;
  top: 0;
  left: 1%;
  width: 70% !important;
  height: 82%;
}
.legacy-content .editorial-collage--duo > .elementor-container > .editorial-collage-item--2 {
  z-index: 2;
  right: 1%;
  bottom: 0;
  width: 41% !important;
  height: 57%;
}
.legacy-content .editorial-collage--duo.editorial-collage--mixed > .elementor-container > .elementor-column:has(img.legacy-image-landscape) {
  z-index: 1;
  top: 0;
  right: auto;
  bottom: auto;
  left: 1%;
  width: 70% !important;
  height: 82%;
}
.legacy-content .editorial-collage--duo.editorial-collage--mixed > .elementor-container > .elementor-column:has(img.legacy-image-landscape) ~ .elementor-column:has(img),
.legacy-content .editorial-collage--duo.editorial-collage--mixed > .elementor-container > .elementor-column:has(img):not(:has(img.legacy-image-landscape)) {
  z-index: 2;
  top: auto;
  right: 1%;
  bottom: 0;
  left: auto;
  width: 41% !important;
  height: 57%;
}
.legacy-content .editorial-collage--duo.editorial-collage--portrait > .elementor-container,
.legacy-content .editorial-collage--duo.editorial-collage--square > .elementor-container { aspect-ratio: 16 / 10 !important; }
.legacy-content .editorial-collage--duo.editorial-collage--portrait > .elementor-container > .editorial-collage-item--1,
.legacy-content .editorial-collage--duo.editorial-collage--square > .elementor-container > .editorial-collage-item--1 {
  left: 8%;
  width: 48% !important;
  height: 88%;
}
.legacy-content .editorial-collage--duo.editorial-collage--portrait > .elementor-container > .editorial-collage-item--2,
.legacy-content .editorial-collage--duo.editorial-collage--square > .elementor-container > .editorial-collage-item--2 {
  right: 8%;
  width: 45% !important;
  height: 76%;
}

/* Tres imágenes: la tercera cierra el hueco inferior y evita una fila rígida. */
.legacy-content .editorial-collage--trio > .elementor-container { aspect-ratio: 16 / 10.2 !important; }
.legacy-content .editorial-collage--trio > .elementor-container > .editorial-collage-item--1 {
  z-index: 1;
  top: 3%;
  left: 0;
  width: 63% !important;
  height: 64%;
}
.legacy-content .editorial-collage--trio > .elementor-container > .editorial-collage-item--2 {
  z-index: 3;
  top: 0;
  right: 0;
  width: 38% !important;
  height: 50%;
}
.legacy-content .editorial-collage--trio > .elementor-container > .editorial-collage-item--3 {
  z-index: 2;
  right: 7%;
  bottom: 0;
  width: 49% !important;
  height: 48%;
}
.legacy-content .editorial-collage--trio.editorial-collage--mixed > .elementor-container > .elementor-column:has(img.legacy-image-portrait) {
  z-index: 3;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  width: 34% !important;
  height: 82%;
}

/* Cuatro y más: mosaico compacto, con una imagen que ordena la lectura. */
.legacy-content .editorial-collage--quad > .elementor-container,
.legacy-content .editorial-collage--mosaic > .elementor-container { aspect-ratio: 16 / 10 !important; }
.legacy-content .editorial-collage--quad > .elementor-container > .editorial-collage-item--1,
.legacy-content .editorial-collage--mosaic > .elementor-container > .editorial-collage-item--1 {
  z-index: 1;
  top: 0;
  left: 0;
  width: 64% !important;
  height: 63%;
}
.legacy-content .editorial-collage--quad > .elementor-container > .editorial-collage-item--2,
.legacy-content .editorial-collage--mosaic > .elementor-container > .editorial-collage-item--2 {
  z-index: 2;
  top: 3%;
  right: 0;
  width: 35% !important;
  height: 40%;
}
.legacy-content .editorial-collage--quad > .elementor-container > .editorial-collage-item--3,
.legacy-content .editorial-collage--mosaic > .elementor-container > .editorial-collage-item--3 {
  z-index: 3;
  right: 5%;
  bottom: 8%;
  width: 38% !important;
  height: 42%;
}
.legacy-content .editorial-collage--quad > .elementor-container > .editorial-collage-item--4,
.legacy-content .editorial-collage--mosaic > .elementor-container > .editorial-collage-item--4 {
  z-index: 2;
  bottom: 0;
  left: 8%;
  width: 35% !important;
  height: 33%;
}
.legacy-content .editorial-collage--mosaic > .elementor-container > .editorial-collage-item--5 {
  z-index: 4;
  bottom: 0;
  left: 41%;
  width: 27% !important;
  height: 31%;
}
.legacy-content .editorial-collage--mosaic > .elementor-container { aspect-ratio: 16 / 10.7 !important; }
.legacy-content .editorial-collage--mosaic > .elementor-container > .editorial-collage-item--1 {
  top: 0;
  left: 0;
  width: 62% !important;
  height: 100%;
}
.legacy-content .editorial-collage--mosaic > .elementor-container > .editorial-collage-item--2 {
  top: 0;
  right: 0;
  width: 37% !important;
  height: 42%;
}
.legacy-content .editorial-collage--mosaic > .elementor-container > .editorial-collage-item--3 {
  right: 0;
  bottom: 0;
  width: 37% !important;
  height: 55%;
}
.legacy-content .editorial-collage--mosaic .elementor-column > .elementor-widget-wrap {
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  gap: clamp(10px, 1vw, 14px);
}
.legacy-content .editorial-collage--mosaic .elementor-background-overlay { display: none; }
.legacy-content .editorial-collage--mosaic .elementor-widget-image,
.legacy-content .editorial-collage--mosaic .elementor-widget-image > div {
  min-height: 0;
}
.legacy-content .editorial-collage--mosaic .elementor-widget-image {
  height: auto !important;
  align-self: stretch;
}

@media (max-width: 800px) {
  .article-search-brief { grid-template-columns: 1fr; gap: 36px; }
  .team-history nav { grid-template-columns: 1fr; }
  .studio-practice-intro,
  .studio-practice-focus > header,
  .studio-practice-session,
  .studio-practice-before,
  .studio-practice-faq { grid-template-columns: 1fr; gap: 28px; }
  .studio-practice-focus > div { grid-template-columns: 1fr; }
  .studio-practice-focus article { min-height: 0; }
  .studio-practice-focus h3 { margin-top: 34px; }
  .studio-practice-session > div { margin-left: 0; }
  .studio-practice-session > p { margin-right: 0; }
  .studio-practice-next > div { grid-template-columns: 1fr; }
  .integrated-article-content { padding: 58px 20px 68px; }
  .integrated-article-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 42px; }
  .integrated-article-header h2 { font-size: clamp(2.35rem, 12vw, 4rem); }
  .integrated-article-body > h2,
  .integrated-article-body > h3 { margin-top: 44px; }
  .context-video { grid-template-columns: 1fr; width: calc(100% - 32px); gap: 32px; margin: 54px auto; padding: 30px 20px 24px; }
  .context-video-copy h2 { font-size: clamp(2rem, 10vw, 3.15rem); }
  .context-video-frame::before { inset: -7px 8px 8px -7px; }
  .related-blog-content .related-heading { grid-template-columns: 1fr; gap: 16px; }
  .related-blog-grid .blog-archive-card.is-shifted { margin-top: 0; }
  .integrated-article-body .legacy-section-longform { padding: 32px 20px !important; }
  .integrated-article-body .legacy-section-longform .elementor-widget-text-editor > div { column-count: 1; column-rule: 0; }
  .integrated-article-body .legacy-section-text,
  .integrated-article-body .legacy-section-text:nth-of-type(even),
  .integrated-article-body .legacy-section-text:nth-of-type(odd) { width: 100% !important; margin: 28px 0 !important; padding: 28px 20px !important; }
  .integrated-article-body .legacy-section-gallery { width: 100% !important; padding: 14px !important; }
  .article-page:not(.testimonial-page) .article-content > h2 { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; font-size: clamp(1.72rem, 8.4vw, 2.65rem); }
  .article-page:not(.testimonial-page) .article-content > div:not([class]) > p:first-of-type,
  .article-page:not(.testimonial-page) .article-content > div:not([class]) > p.legacy-longform { padding: 24px 20px; column-count: 1; column-rule: 0; }
  .article-page:not(.testimonial-page) .article-content > div:not([class]) > h2 { padding-left: 0; font-size: clamp(1.72rem, 8.4vw, 2.65rem); }
  .article-page:not(.testimonial-page) .article-content .wp-block-columns { grid-template-columns: 1fr; gap: 26px; }
  .article-page:not(.testimonial-page) .article-content figure:has(> img)::before,
  .article-page:not(.testimonial-page) .article-content .elementor-widget-image::before { inset: -5px 6px 7px -6px; }
  .article-page:not(.testimonial-page) .legacy-media-row {
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }
  .integrated-article-body .legacy-section-text.editorial-panel-wide,
  .integrated-article-body .legacy-section-text.editorial-panel-wide:nth-of-type(even),
  .integrated-article-body .legacy-section-text.editorial-panel-wide:nth-of-type(odd) {
    padding: 32px 22px 38px !important;
  }
  .integrated-article-body .legacy-section-text.editorial-panel-wide .elementor-widget-text-editor > div {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .integrated-article-body .legacy-section-text.editorial-panel-wide .elementor-widget-text-editor > div > p:first-child,
  .integrated-article-body .legacy-section-text.editorial-panel-wide .elementor-widget-text-editor > div > p:last-child:not(:first-child) {
    grid-column: 1;
  }
  .integrated-article-body .legacy-section-text.editorial-panel-wide::after {
    right: 8px;
    bottom: -0.12em;
    font-size: 8rem;
  }
  .legacy-content .legacy-section-gallery.editorial-collage,
  .integrated-article-body .legacy-section-gallery.editorial-collage {
    margin: 44px auto 58px !important;
    padding: 10px 0 18px !important;
  }
  .legacy-content .legacy-section-gallery.editorial-collage::before,
  .integrated-article-body .legacy-section-gallery.editorial-collage::before {
    left: -4px;
    bottom: 4%;
    width: 70%;
    height: 58%;
    border-radius: 14px;
  }
  .legacy-content .legacy-section-gallery.editorial-collage::after {
    right: -4px;
    width: 52%;
    height: 42%;
    border-radius: 18px;
  }
  .legacy-content .legacy-section-gallery.editorial-collage > .elementor-container {
    width: 100%;
  }
  .legacy-content .legacy-section-gallery.editorial-collage .elementor-widget-image {
    border-radius: 14px;
  }
  .legacy-content .editorial-collage--single > .elementor-container { aspect-ratio: 4 / 2.9 !important; }
  .legacy-content .editorial-collage--single > .elementor-container > .editorial-collage-item--1 { inset: 0 3%; }
  .legacy-content .editorial-collage--duo > .elementor-container,
  .legacy-content .editorial-collage--duo.editorial-collage--portrait > .elementor-container,
  .legacy-content .editorial-collage--duo.editorial-collage--square > .elementor-container { aspect-ratio: 4 / 4.05 !important; }
  .legacy-content .editorial-collage--duo > .elementor-container > .editorial-collage-item--1,
  .legacy-content .editorial-collage--duo.editorial-collage--mixed > .elementor-container > .elementor-column:has(img.legacy-image-landscape) {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 86% !important;
    height: 65%;
  }
  .legacy-content .editorial-collage--duo > .elementor-container > .editorial-collage-item--2,
  .legacy-content .editorial-collage--duo.editorial-collage--mixed > .elementor-container > .elementor-column:has(img.legacy-image-landscape) ~ .elementor-column:has(img),
  .legacy-content .editorial-collage--duo.editorial-collage--mixed > .elementor-container > .elementor-column:has(img):not(:has(img.legacy-image-landscape)) {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    width: 62% !important;
    height: 48%;
  }
  .legacy-content .editorial-collage--duo.editorial-collage--mixed > .elementor-container > .elementor-column:has(img.legacy-image-landscape) {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 86% !important;
    height: 65%;
  }
  .legacy-content .editorial-collage--duo.editorial-collage--portrait > .elementor-container > .editorial-collage-item--1,
  .legacy-content .editorial-collage--duo.editorial-collage--square > .elementor-container > .editorial-collage-item--1 {
    left: 2%;
    width: 67% !important;
    height: 72%;
  }
  .legacy-content .editorial-collage--duo.editorial-collage--portrait > .elementor-container > .editorial-collage-item--2,
  .legacy-content .editorial-collage--duo.editorial-collage--square > .elementor-container > .editorial-collage-item--2 {
    right: 2%;
    width: 60% !important;
    height: 64%;
  }
  .legacy-content .editorial-collage--trio > .elementor-container { aspect-ratio: 4 / 5.1 !important; }
  .legacy-content .editorial-collage--trio > .elementor-container > .editorial-collage-item--1 {
    top: 0;
    left: 0;
    width: 82% !important;
    height: 45%;
  }
  .legacy-content .editorial-collage--trio > .elementor-container > .editorial-collage-item--2,
  .legacy-content .editorial-collage--trio.editorial-collage--mixed > .elementor-container > .elementor-column:has(img.legacy-image-portrait) {
    top: 29%;
    right: 0;
    width: 58% !important;
    height: 42%;
  }
  .legacy-content .editorial-collage--trio > .elementor-container > .editorial-collage-item--3 {
    right: auto;
    bottom: 0;
    left: 4%;
    width: 72% !important;
    height: 36%;
  }
  .legacy-content .legacy-section-gallery.editorial-collage.editorial-collage--quad > .elementor-container,
  .legacy-content .legacy-section-gallery.editorial-collage.editorial-collage--mosaic > .elementor-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    aspect-ratio: auto !important;
  }
  .legacy-content .legacy-section-gallery.editorial-collage.editorial-collage--quad > .elementor-container > .elementor-column,
  .legacy-content .legacy-section-gallery.editorial-collage.editorial-collage--mosaic > .elementor-container > .elementor-column {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
  }
  .legacy-content .editorial-collage--quad > .elementor-container > .elementor-column:first-child,
  .legacy-content .editorial-collage--mosaic > .elementor-container > .elementor-column:first-child {
    grid-column: 1 / -1;
  }
  .legacy-content .editorial-collage--quad .elementor-widget-image,
  .legacy-content .editorial-collage--mosaic .elementor-widget-image { aspect-ratio: 4 / 3; }
  .legacy-content .editorial-collage--mosaic .elementor-column > .elementor-widget-wrap {
    height: auto;
    gap: 12px;
  }
}

/* ---------------------------------------------------------------------------
   Guía de lectura. Reordena el contenido migrado en apartados navegables con
   un índice fijo. No cambia ni una palabra: solo el orden visual y el ritmo.
   Tipografía: se mantiene Instrument Sans (variable, 400-700, autoalojada).
   El carácter editorial se consigue con escala, peso, medida y aire, no con
   fuentes nuevas: añadirlas significaría peticiones externas antes del
   consentimiento y penalizar el LCP que acabamos de bajar.
--------------------------------------------------------------------------- */
.guia-lectura {
  width: 100%;
  margin: 0;
  padding: clamp(72px, 8vw, 126px) max(var(--pad), calc((100% - var(--container)) / 2));
  overflow: clip;
  background:
    radial-gradient(circle at 92% 3%, rgba(168,210,27,.13), transparent 27%),
    linear-gradient(180deg, #efede7 0%, #f7f4ef 42%, #efede7 100%);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  --guia-acento: var(--green);
  --guia-acento-oscuro: var(--green-dark);
}
.guia-lectura-studio {
  background:
    radial-gradient(circle at 92% 3%, rgba(225,0,113,.11), transparent 28%),
    linear-gradient(180deg, #efebe9 0%, #f8f5f2 42%, #eee9e7 100%);
  --guia-acento: var(--pink);
  --guia-acento-oscuro: var(--pink-dark);
}

.guia-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
  align-items: end;
  gap: clamp(44px, 8vw, 132px);
  width: min(100%, var(--container));
  margin: 0 auto clamp(46px, 6vw, 74px);
  padding-bottom: clamp(30px, 3.4vw, 46px);
  border-bottom: 1px solid #c8c3bb;
}
.guia-cabecera h2 {
  max-width: 880px;
  margin: 0;
  font-size: clamp(2.45rem, 4.8vw, 5.55rem);
  line-height: .94;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.guia-cabecera > p { max-width: 660px; margin: 0 0 6px; color: #4e4e4e; font-size: clamp(1.04rem, 1.3vw, 1.24rem); line-height: 1.65; }
.guia-metrica {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: clamp(24px, 3vw, 34px) 0 0;
  color: #6a675f;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.guia-metrica span { position: relative; padding-left: 18px; }
.guia-metrica span::before { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--guia-acento); transform: translateY(-50%); content: ""; }

/* La cabecera respira a todo el ancho; el cuerpo de lectura se acota y se
   centra. Un bloque de texto de 1.150 px de ancho no se lee, y dejarlo
   alineado a la izquierda abria un hueco muerto a la derecha. */
.guia-cuerpo {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(38px, 4vw, 72px);
  width: min(100%, 1180px);
  margin: 0 auto;
}
.guia-lateral { position: relative; }
.guia-indice { position: sticky; top: 168px; padding-right: 24px; border-right: 1px solid var(--line-dark); }
.guia-indice-titulo { margin: 0 0 16px; color: #4a4a4a; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.guia-indice ol { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.guia-indice li { margin: 0; }
/* Solo los enlaces de la lista: el boton de cita no es una fila del indice. */
.guia-indice ol a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 9px 0;
  color: #5d5d5d;
  font-size: .84rem;
  line-height: 1.34;
  border-left: 2px solid transparent;
  padding-left: 12px;
  margin-left: -14px;
  transition: color .22s ease, border-color .22s ease;
}
.guia-indice ol a span { color: #a3a099; font-size: .72rem; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.guia-indice ol a:hover { color: var(--guia-acento-oscuro); }
.guia-indice ol a[aria-current="true"] { color: var(--ink); font-weight: 650; border-left-color: var(--guia-acento); }
.guia-indice ol a[aria-current="true"] span { color: var(--guia-acento-oscuro); }
.guia-indice-cita {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-dark);
  color: var(--guia-acento-oscuro);
  font-size: .84rem;
  font-weight: 700;
  white-space: nowrap;
}
.guia-indice-cita b { transition: transform .22s ease; }
.guia-indice-cita:hover b { transform: translateX(4px); }

.guia-secciones { width: min(100%, 100%); max-width: none; margin: 0; }
.guia-entradilla { margin: 0 0 clamp(34px, 4vw, 54px); }
/* Medida de lectura: la linea larga cansa. Entradilla y cuerpo comparten
   el mismo ancho maximo para que el ritmo no cambie al bajar. */
.guia-entradilla > p,
.guia-entradilla > ul,
.guia-entradilla > ol { width: min(100%, 800px); }
.guia-entradilla > p:first-of-type { width: min(100%, 820px); color: #2f2f2f; font-size: clamp(1.14rem, 1.5vw, 1.42rem); line-height: 1.62; }
/* La cabecera es pegajosa y mide 162px (146px compactada): el destino de
   cada enlace del indice se separa esa altura para no quedar debajo. */
.guia-seccion { margin: 0 0 clamp(48px, 6vw, 88px); scroll-margin-top: 170px; }
.guia-seccion:last-child { margin-bottom: 0; }
.guia-seccion-cabecera { margin: 0 0 clamp(20px, 2.4vw, 30px); padding-top: 22px; border-top: 2px solid var(--guia-acento); }
.guia-seccion-cabecera .label { margin: 0 0 12px; }
.guia-numero { font-variant-numeric: tabular-nums; }
.guia-seccion-cabecera h2,
.guia-seccion-cabecera h3 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(1.85rem, 3vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.guia-seccion-cuerpo > p,
.guia-seccion-cuerpo > ul,
.guia-seccion-cuerpo > ol,
.guia-seccion-cuerpo > blockquote,
.guia-subseccion > p,
.guia-subseccion > ul,
.guia-subseccion > ol,
.guia-subseccion > blockquote { width: min(100%, 800px); }
.guia-seccion-cuerpo p,
.guia-seccion-cuerpo li,
.guia-entradilla p,
.guia-subseccion p { color: #3f3f3f; font-size: clamp(1.02rem, 1.12vw, 1.14rem); line-height: 1.76; hyphens: auto; }

.guia-subsecciones { margin-top: clamp(26px, 3vw, 40px); }
.guia-subseccion { width: 100%; margin: 0 0 clamp(24px, 3vw, 38px); scroll-margin-top: 170px; }
.guia-subseccion h3 { margin: 0 0 12px; font-size: clamp(1.2rem, 1.5vw, 1.5rem); letter-spacing: -.02em; }

/* Tres columnas fijas: el ancho de cada tarjeta lo decide el generador segun
   su contenido (data-ancho) y ninguna fila queda a medias. */
.guia-tarjetas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: clamp(16px, 1.6vw, 24px);
  margin-top: clamp(26px, 3vw, 40px);
  /* Las tarjetas de una fila comparten altura: el borde inferior queda a la
     misma linea. Lo que evita el hueco no es dejarlas sueltas, sino que el
     generador elija el ancho de cada una segun su texto (data-ancho), de modo
     que en una misma fila acaben midiendo parecido. */
  align-items: stretch;
}
.guia-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 34px);
  background: rgba(255,255,255,.72);
  border: 1px solid #ddd8ce;
  scroll-margin-top: 170px;
  transition: border-color .24s ease, background .24s ease, transform .24s ease;
}
.guia-tarjeta:hover { background: #fff; border-color: var(--guia-acento); transform: translateY(-2px); }
.guia-tarjeta-numero {
  display: block;
  margin-bottom: 14px;
  color: var(--guia-acento-oscuro);
  font-size: .74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .16em;
}
.guia-tarjeta h3 { margin: 0 0 14px; font-size: clamp(1.16rem, 1.4vw, 1.44rem); line-height: 1.14; letter-spacing: -.025em; }
/* En columna estrecha el texto justificado abre rios entre palabras: dentro
   de las tarjetas se alinea a la izquierda. En la medida ancha se mantiene
   justificado, con particion silabica (lang="es") para cerrar los huecos. */
.guia-tarjeta-cuerpo p,
.guia-tarjeta-cuerpo li { margin: 0 0 12px; color: #454545; font-size: .98rem; line-height: 1.7; text-align: left; }
.guia-tarjeta-cuerpo p:last-child { margin-bottom: 0; }
.guia-tarjeta-cuerpo img { width: 100%; height: auto; margin-top: 12px; }
.guia-tarjeta a { color: var(--guia-acento-oscuro); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.guia-ancla { display: block; height: 0; scroll-margin-top: 170px; }

.guia-tarjeta[data-ancho="2"] { grid-column: span 2; }
.guia-tarjeta[data-ancho="3"] { grid-column: span 3; }
/* La tarjeta ancha reparte su texto en dos columnas: una linea de 560 px no se
   lee mejor por ser mas larga. */
.guia-tarjeta[data-ancho="3"] .guia-tarjeta-cuerpo { columns: 2; column-gap: clamp(26px, 3vw, 48px); }
.guia-tarjeta[data-ancho="3"] .guia-tarjeta-cuerpo p { break-inside: avoid; }
.guia-tarjeta[data-ancho="3"] h3 { max-width: 24ch; font-size: clamp(1.3rem, 1.7vw, 1.72rem); }

/* ---------------------------------------------------------------------------
   Composicion de imagenes dentro de la guia. Nunca se deforman: el ancho manda
   y la altura es automatica, asi que conservan su proporcion original. Cuando
   van solas se montan unas sobre otras, con un marco desplazado y una trama de
   cuadricula difuminada detras que ocupa el aire sobrante.
--------------------------------------------------------------------------- */
.guia-figuras {
  position: relative;
  width: 100%;
  margin: clamp(38px, 4.6vw, 68px) 0;
  isolation: isolate;
}
.guia-figuras-trama {
  position: absolute;
  z-index: 0;
  inset: -9% -7%;
  background-image:
    linear-gradient(to right, rgba(18,18,18,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18,18,18,.16) 1px, transparent 1px);
  background-size: 46px 46px;
  filter: blur(1.1px);
  opacity: .6;
  -webkit-mask-image: radial-gradient(ellipse 82% 74% at 68% 44%, #000 0%, rgba(0,0,0,.55) 46%, transparent 78%);
  mask-image: radial-gradient(ellipse 82% 74% at 68% 44%, #000 0%, rgba(0,0,0,.55) 46%, transparent 78%);
  pointer-events: none;
}
.guia-figuras-marco {
  position: absolute;
  z-index: 0;
  top: 46%;
  bottom: 4%;
  left: -20px;
  width: min(36%, 250px);
  border: 2px solid var(--guia-acento);
  border-radius: 2px;
  pointer-events: none;
}
.guia-figura { position: relative; z-index: 1; }
.guia-figuras .guia-figura img {
  display: block;
  float: none;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  background: var(--white);
  box-shadow: 0 26px 62px rgba(64,55,43,.16);
}
.guia-figuras .guia-figura figure { margin: 0; }

/* Una sola imagen: centrada y mas ancha que la columna de texto. */
.guia-figuras[data-figuras="1"] .guia-figura { width: min(100%, 860px); margin-inline: auto; }

/* Dos imagenes montadas. La segunda cae sobre la esquina de la primera. */
.guia-figuras[data-figuras="2"] { display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; }
.guia-figuras[data-figuras="2"] .guia-figura:nth-child(3) { grid-area: 1 / 1 / 2 / 9; }
.guia-figuras[data-figuras="2"] .guia-figura:nth-child(4) { grid-area: 1 / 7 / 2 / 13; z-index: 2; margin-top: clamp(48px, 9vw, 132px); }

/* Tres o mas: mosaico montado, sin recortes. */
.guia-figuras[data-figuras="3"],
.guia-figuras[data-figuras="4"] { display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; }
.guia-figuras[data-figuras="3"] .guia-figura:nth-child(3) { grid-area: 1 / 1 / 2 / 8; }
.guia-figuras[data-figuras="3"] .guia-figura:nth-child(4) { grid-area: 1 / 7 / 2 / 13; z-index: 2; margin-top: clamp(40px, 7vw, 96px); }
.guia-figuras[data-figuras="3"] .guia-figura:nth-child(5) { grid-area: 2 / 3 / 3 / 11; z-index: 3; margin-top: clamp(-96px, -6vw, -32px); }
.guia-figuras[data-figuras="4"] .guia-figura { grid-column: span 6; }
.guia-figuras[data-figuras="4"] .guia-figura:nth-child(even) { margin-top: clamp(28px, 4vw, 56px); }

@media (max-width: 1180px) {
  .guia-cuerpo { grid-template-columns: 1fr; }
  .guia-indice { position: static; top: auto; padding: 22px; padding-right: 22px; border: 1px solid var(--line-dark); border-right: 1px solid var(--line-dark); }
  .guia-indice ol a { margin-left: 0; }
}
@media (max-width: 900px) {
  .guia-cabecera { grid-template-columns: 1fr; align-items: start; gap: 24px; }
  .guia-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guia-tarjeta[data-ancho="3"] { grid-column: span 2; }
  .guia-tarjeta[data-ancho="3"] .guia-tarjeta-cuerpo { columns: auto; }
}
@media (max-width: 620px) {
  .guia-tarjetas { grid-template-columns: 1fr; }
  .guia-tarjeta[data-ancho="2"],
  .guia-tarjeta[data-ancho="3"] { grid-column: auto; }
  /* En movil las imagenes se apilan: montarlas dejaria trozos ilegibles. */
  .guia-figuras[data-figuras] { display: flex; flex-direction: column; gap: 18px; }
  .guia-figuras[data-figuras] .guia-figura { grid-area: auto; width: 100%; margin-top: 0; }
  .guia-figuras-marco { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .guia-tarjeta,
  .guia-indice ol a,
  .guia-indice-cita b { transition: none; }
  .guia-tarjeta:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Test de alimentación: bloques de contexto. La página tenía el formulario y
   poco más — posición media 29,9 en Search Console, 4 clics en un año. Estas
   secciones explican para qué sirve, qué ocurre después y resuelven las dudas
   que frenan a alguien antes de dar 81 respuestas.
--------------------------------------------------------------------------- */
.nutrition-purpose,
.nutrition-flow,
.nutrition-faq,
.nutrition-next {
  width: 100%;
  max-width: none;
  padding: clamp(66px, 7.5vw, 118px) max(var(--pad), calc((100% - var(--container)) / 2));
}
.nutrition-purpose > header,
.nutrition-flow > header,
.nutrition-faq > header {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  align-items: end;
  gap: clamp(36px, 6vw, 104px);
  margin-bottom: clamp(40px, 5vw, 68px);
}
.nutrition-purpose h2,
.nutrition-flow h2,
.nutrition-faq h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.1rem, 3.7vw, 4.1rem);
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.nutrition-purpose > header > p,
.nutrition-flow > header > p { max-width: 620px; margin: 0 0 6px; color: #4e4e4e; font-size: clamp(1rem, 1.2vw, 1.16rem); line-height: 1.66; }
.nutrition-flow > header > p { color: #c2c2c2; }

.nutrition-purpose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(18px, 2vw, 30px); }
.nutrition-purpose-grid article { padding: clamp(26px, 2.6vw, 38px); background: rgba(255,255,255,.66); border: 1px solid #ddd8ce; }
.nutrition-purpose-grid span { display: block; margin-bottom: 16px; color: var(--green-dark); font-size: .74rem; font-weight: 700; letter-spacing: .16em; }
.nutrition-purpose-grid h3 { margin: 0 0 12px; font-size: clamp(1.1rem, 1.35vw, 1.34rem); line-height: 1.16; letter-spacing: -.025em; }
.nutrition-purpose-grid p { margin: 0; color: #454545; font-size: .98rem; line-height: 1.7; }

.nutrition-flow ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(20px, 2.4vw, 40px); margin: 0; padding: 0; list-style: none; }
.nutrition-flow li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; padding-top: 22px; border-top: 2px solid var(--green); }
.nutrition-flow li span { color: var(--green-bright); font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .1em; }
.nutrition-flow h3 { margin: 0 0 10px; color: #fff; font-size: clamp(1.08rem, 1.3vw, 1.3rem); line-height: 1.18; letter-spacing: -.02em; }
.nutrition-flow p { margin: 0; color: #bdbdbd; font-size: .96rem; line-height: 1.7; }

.nutrition-faq > div { border-top: 1px solid var(--line-dark); }
.nutrition-faq details { border-bottom: 1px solid var(--line-dark); }
.nutrition-faq summary { display: flex; justify-content: space-between; gap: 28px; padding: 24px 0; cursor: pointer; list-style: none; font-weight: 700; }
.nutrition-faq summary::-webkit-details-marker { display: none; }
.nutrition-faq summary b { color: var(--green-dark); font-size: 1.4rem; line-height: 1; transition: transform .24s ease; }
.nutrition-faq details[open] summary b { transform: rotate(45deg); }
.nutrition-faq details p { max-width: 820px; margin: 0 0 26px; color: #444; line-height: 1.74; }

.nutrition-next { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); gap: clamp(28px, 4vw, 70px); align-items: center; border-top: 1px solid var(--line-dark); }
.nutrition-next > div { display: flex; flex-wrap: wrap; gap: 12px; }
.nutrition-next a { display: inline-flex; gap: 10px; align-items: center; padding: 14px 22px; border: 1px solid var(--line-dark); border-radius: 999px; font-weight: 650; transition: border-color .22s ease, background .22s ease; }
.nutrition-next a:hover { background: var(--white); border-color: var(--green); }

@media (max-width: 900px) {
  .nutrition-purpose > header,
  .nutrition-flow > header,
  .nutrition-faq > header,
  .nutrition-next { grid-template-columns: 1fr; align-items: start; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .nutrition-faq summary b,
  .nutrition-next a { transition: none; }
}

/* ---------------------------------------------------------------------------
   Ampliación de artículos del blog. Se añade después del contenido migrado y
   hereda la tipografía de .legacy-content; aquí solo lo que no hereda.
--------------------------------------------------------------------------- */
.article-ampliacion { margin-top: clamp(40px, 5vw, 68px); padding-top: clamp(34px, 4vw, 54px); border-top: 2px solid var(--green); }
.article-ampliacion-intro { color: #2f2f2f; font-size: clamp(1.1rem, 1.4vw, 1.32rem); line-height: 1.62; }
.article-ampliacion h2 { margin: clamp(38px, 4.4vw, 62px) 0 16px; font-size: clamp(1.7rem, 2.5vw, 2.5rem); line-height: 1.04; letter-spacing: -.04em; }
.article-ampliacion h3 { margin: clamp(24px, 2.6vw, 34px) 0 10px; font-size: clamp(1.12rem, 1.4vw, 1.36rem); letter-spacing: -.02em; }
.article-ampliacion ul { margin: 0 0 18px; padding-left: 1.15em; }
.article-ampliacion li { margin-bottom: 9px; line-height: 1.7; }

/* Señales de alarma: tiene que verse distinto del resto del texto. */
.article-alerta { margin: clamp(34px, 4vw, 52px) 0; padding: clamp(24px, 2.6vw, 36px); background: rgba(236,25,134,.045); border-left: 3px solid var(--pink); }
.article-alerta h2 { margin-top: 0; color: var(--pink-dark); font-size: clamp(1.4rem, 1.9vw, 1.85rem); }
.article-alerta li { margin-bottom: 11px; }

.article-faq { margin-top: 8px; border-top: 1px solid var(--line-dark); }
.article-faq details { border-bottom: 1px solid var(--line-dark); }
.article-faq summary { display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; cursor: pointer; list-style: none; font-weight: 700; }
.article-faq summary::-webkit-details-marker { display: none; }
.article-faq summary b { color: var(--green-dark); font-size: 1.3rem; line-height: 1; transition: transform .24s ease; }
.article-faq details[open] summary b { transform: rotate(45deg); }
.article-faq details p { margin: 0 0 22px; line-height: 1.74; }

.article-enlaces { margin-top: clamp(34px, 4vw, 52px); padding-top: 26px; border-top: 1px solid var(--line-dark); }
.article-enlaces .label { margin: 0 0 16px; }
.article-enlaces > div { display: flex; flex-wrap: wrap; gap: 10px; }
.article-enlaces a { display: inline-flex; gap: 9px; align-items: center; padding: 12px 20px; border: 1px solid var(--line-dark); border-radius: 999px; font-size: .92rem; font-weight: 650; transition: border-color .22s ease, background .22s ease; }
.article-enlaces a:hover { background: var(--white); border-color: var(--green); }
@media (prefers-reduced-motion: reduce) {
  .article-faq summary b,
  .article-enlaces a { transition: none; }
}

/* Puente hacia los servicios dentro del cuerpo del articulo (blog).
   Anadido en la auditoria final del 31-08-2026: el blog concentra el 92 % del
   trafico y no enlazaba a las paginas de servicio. */
.article-service-bridge { clear: both; margin: clamp(40px, 5vw, 68px) 0; padding: clamp(28px, 3.4vw, 44px); border: 1px solid var(--line-dark); border-left: 4px solid var(--green); background: linear-gradient(140deg, rgba(168,210,27,.10), rgba(242,240,235,0) 62%), var(--white); }
.article-service-bridge .label { margin: 0 0 10px; color: var(--green-dark); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.article-service-bridge h2 { max-width: 30ch; margin: 0 0 14px; font-size: clamp(1.5rem, 2.3vw, 2.25rem); line-height: 1.08; letter-spacing: -.03em; }
.article-service-bridge .service-bridge-intro { max-width: 62ch; margin: 0; color: #4a4a4a; font-size: 1rem; line-height: 1.6; }
.article-service-bridge .service-bridge-list { margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); }
.article-service-bridge .service-bridge-list li { border-bottom: 1px solid var(--line-dark); }
.article-service-bridge .service-bridge-list a { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 18px; padding: 16px 4px; text-decoration: none; color: inherit; transition: background-color .18s ease, padding-left .18s ease; }
.article-service-bridge .service-bridge-list a:hover,
.article-service-bridge .service-bridge-list a:focus-visible { padding-left: 12px; background: rgba(168,210,27,.12); }
.article-service-bridge .service-bridge-list strong { font-size: 1.06rem; letter-spacing: -.01em; }
.article-service-bridge .service-bridge-list span { grid-column: 1 / -1; max-width: 66ch; color: #565656; font-size: .95rem; line-height: 1.5; }
.article-service-bridge .service-bridge-list b { color: var(--green-dark); font-size: 1.1rem; }
.article-service-bridge .service-bridge-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 26px 0 0; }
.article-service-bridge .service-bridge-phone { color: #565656; font-size: .95rem; }
.article-service-bridge .service-bridge-phone:hover { color: var(--green-dark); }

@media (max-width: 700px) {
  .article-service-bridge { padding: 24px 20px; }
  .article-service-bridge .service-bridge-cta .button { width: 100%; justify-content: center; }
}

/* Preguntas de la primera cita en las paginas de contacto. */
.contact-faq { width: min(100%, var(--container)); margin: 0 auto; padding: clamp(58px, 7vw, 104px) var(--pad); border-top: 1px solid var(--line-dark); display: grid; grid-template-columns: minmax(0, .85fr) minmax(320px, 1.15fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.contact-faq header h2 { max-width: 14ch; margin: 14px 0 18px; font-size: clamp(2rem, 3.4vw, 3.6rem); line-height: 1; letter-spacing: -.05em; }
.contact-faq header p { max-width: 46ch; margin: 0; color: #565656; }
.contact-faq-list { border-top: 1px solid var(--line-dark); }
.contact-faq-list details { border-bottom: 1px solid var(--line-dark); }
.contact-faq-list summary { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 1.06rem; }
.contact-faq-list summary::-webkit-details-marker { display: none; }
.contact-faq-list summary > b { color: var(--green-dark); font-size: 1.4rem; transition: transform .2s ease; }
.contact-faq-list details[open] summary > b { transform: rotate(45deg); }
.contact-faq-list details > p { max-width: 68ch; margin: 0 0 22px; color: #4a4a4a; line-height: 1.6; }
.studio-contact-page .contact-faq-list summary > b,
.studio-contact-page .contact-faq-list details[open] summary > b { color: var(--pink-dark); }

@media (max-width: 900px) {
  .contact-faq { grid-template-columns: 1fr; }
}

/* Landing de precios. */
.precios-preguntar { width: min(100%, var(--container)); margin: 0 auto; padding: clamp(58px, 7vw, 104px) var(--pad); display: grid; grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr); gap: clamp(40px, 6vw, 110px); border-top: 1px solid var(--line-dark); }
.precios-preguntar h2 { max-width: 18ch; margin: 14px 0 18px; font-size: clamp(2rem, 3.4vw, 3.6rem); line-height: 1; letter-spacing: -.05em; }
.precios-preguntar > div > p:last-child { max-width: 52ch; margin: 0; color: #565656; }
.precios-preguntar ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); counter-reset: pregunta; }
.precios-preguntar li { position: relative; padding: 18px 0 18px 46px; border-bottom: 1px solid var(--line-dark); font-size: 1.08rem; counter-increment: pregunta; }
.precios-preguntar li::before { content: counter(pregunta, decimal-leading-zero); position: absolute; left: 0; top: 20px; color: var(--green-dark); font-size: .82rem; font-weight: 600; letter-spacing: .1em; }
.precios-tabla { width: min(100%, var(--container)); margin: 0 auto; padding: clamp(58px, 7vw, 104px) var(--pad); }
.precios-tabla table { width: 100%; border-collapse: collapse; margin-top: 28px; }
.precios-tabla th, .precios-tabla td { padding: 16px 12px; border-bottom: 1px solid var(--line-dark); text-align: left; }
.precios-tabla thead th { color: var(--green-dark); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 900px) {
  .precios-preguntar { grid-template-columns: 1fr; }
}

/* Anclas de compatibilidad: mantienen vivas las direcciones #seccion historicas
   en las paginas cuyo contenido migrado se renumera con el prefijo "detail-".
   No ocupan espacio; solo desplazan el destino del salto para que el encabezado
   no quede tapado por la cabecera fija. */
.ancla-historica { display: block; position: relative; top: -110px; width: 0; height: 0; visibility: hidden; }

/* Numero de colegiado en la ficha de equipo. Senal de autoridad sanitaria:
   dos de las clinicas de Huelva analizadas lo publican y esta no lo hacia. */
.profile-story-plate .profile-colegiado { margin: 6px 0 0; font-size: .82rem; letter-spacing: .04em; opacity: .75; }
.precios-tabla .precios-aviso { max-width: 78ch; margin: 22px 0 0; color: #565656; font-size: .95rem; line-height: 1.6; }

/* Horario del herbolario junto a su banner. Negocio y web distintos: por eso
   no entra en el openingHoursSpecification de la clinica. */
.herbalist-card .herbalist-hours { display: block; margin-top: 6px; font-size: .8rem; letter-spacing: .03em; opacity: .8; }

/* Direccion y horario en el pie. Van en todas las paginas porque el bloque
   MedicalClinic que declara openingHoursSpecification tambien va en todas, y
   un dato estructurado sin respaldo visible es marcado invalido. */
.site-footer 
.site-footer 
.site-footer 

/* Sesiones privadas del Studio: no ocupan hora fija, así que van fuera de la
   rejilla semanal. */
.schedule-private {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 4vw, 64px);
  width: min(100%, var(--container));
  margin: clamp(38px, 4.5vw, 62px) auto 0;
  padding-top: clamp(30px, 3.4vw, 44px);
  border-top: 1px solid var(--line-dark);
}
.schedule-private h3 { margin: 0; font-size: clamp(1.5rem, 2.2vw, 2.2rem); line-height: 1.04; letter-spacing: -.04em; }
.schedule-private ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.schedule-private li { padding: 9px 16px; background: rgba(236,25,134,.07); border: 1px solid rgba(236,25,134,.22); border-radius: 999px; font-size: .9rem; }
@media (max-width: 900px) {
  .schedule-private { grid-template-columns: 1fr; gap: 20px; }
}

/* -------------------------------------------------------------------------
   2026-08-31 · Ajustes editoriales de imagen (petición de Juan).
   1) El collage de RPG/SGA (detail-5682b084) estrena fotos de alta
      resolución y va SIN el marco decorativo descentrado (borde verde y
      placa de fondo); composición y esquinas redondeadas se mantienen.
   2) La infografía de Tensegrity Touch, con esquinas redondeadas y sin
      fondo propio; la trama de líneas y el marco del montaje no se tocan.
------------------------------------------------------------------------- */
.legacy-content .legacy-section-gallery.editorial-collage[data-id="detail-5682b084"]::before,
.legacy-content .legacy-section-gallery.editorial-collage[data-id="detail-5682b084"]::after {
  content: none !important;
}
.guia-figuras .guia-figura img[src^="/wp-content/uploads/2025/06/Infografia_Tensegrity_Touch"] {
  background: none;
  border-radius: 18px;
}

/* 2026-08-31 · Figura destacada extraída de una guia-tarjeta (hoy, el flyer
   de la agenda de Salux Estética) y lightbox mínimo sin dependencias. */
.guia-tarjetas .guia-figura-destacada { grid-column: 1 / -1; }
.guia-figura-destacada {
  width: min(100%, 620px);
  margin: clamp(24px, 3.5vw, 44px) auto 0;
}
.guia-figura-destacada img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 26px 62px rgba(64, 55, 43, .18);
}
.js-lightbox img { cursor: zoom-in; }
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(20, 18, 14, .82);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity .25s ease;
}
.lightbox-overlay.is-open { opacity: 1; }
.lightbox-overlay img {
  max-width: min(100%, 940px);
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

/* ==================================================================
   2026-09-01 · Hero en móvil, navegación de categorías y paginador.
   ================================================================== */

/* --- Hero: art direction en móvil --------------------------------
   El hero sirve un recorte vertical propio en móvil mediante <picture>.
   Al envolver el <img>, este deja de ser hijo directo de .hero-media,
   así que hay que repetir el tratamiento sin exigir el hijo directo. */
.hero-media > picture { display: block; width: 100%; height: 100%; }
.hero-media picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.06);
}

@media (max-width: 760px) {
  /* La foto deja de atenuarse al 66 %: el recorte vertical está pensado
     para esta caja. Y el velo pasa de horizontal a vertical, porque en
     móvil el texto se apila sobre la imagen y el degradado de 90deg
     (86 % de negro en el borde izquierdo) oscurecía la pantalla entera. */
  .hero-media { opacity: 1; }
  .hero-media::after {
    background: linear-gradient(180deg,
      rgba(6,6,6,.76) 0%,
      rgba(6,6,6,.44) 30%,
      rgba(6,6,6,.42) 55%,
      rgba(6,6,6,.86) 88%,
      rgba(6,6,6,.95) 100%);
  }
  .hero-media picture > img { object-position: center center; }
}

/* --- Navegación de categorías del blog --------------------------- */
.topic-nav {
  gap: 4px;
  padding-top: 4px;
  border-bottom: 1px solid var(--line-dark);
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.topic-nav a {
  align-items: center;
  min-height: 52px;
  padding: 14px 18px;
  color: #4a4d45;
  font-weight: 560;
  border-radius: 10px 10px 0 0;
  scroll-snap-align: start;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.topic-nav a span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  color: #5d6157;
  background: rgba(18, 18, 18, .07);
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  transition: color .18s ease, background-color .18s ease;
}
.topic-nav a:hover { color: var(--ink); background: rgba(18, 18, 18, .045); }
.topic-nav a:hover span { background: rgba(18, 18, 18, .1); }
.topic-nav a.is-active {
  color: var(--ink);
  font-weight: 680;
  background: rgba(236, 25, 134, .05);
  border-color: var(--pink);
}
.topic-nav a.is-active span { color: var(--white); background: var(--pink); }
.topic-nav a:focus-visible { outline: 2px solid var(--green-dark); outline-offset: -3px; }

/* --- Índice completo de categorías -------------------------------
   Era una fila de texto entre dos filetes. Pasa a leerse como bloque
   desplegable, con su propia superficie y jerarquía. */
.taxonomy-directory {
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .4));
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.taxonomy-directory:hover { border-color: rgba(18, 18, 18, .3); }
.taxonomy-directory[open] { box-shadow: 0 18px 40px -30px rgba(18, 24, 10, .55); }
.taxonomy-directory summary {
  gap: 16px;
  min-height: 66px;
  padding: 14px clamp(18px, 2.4vw, 26px);
  transition: color .18s ease;
}
.taxonomy-directory summary:hover { color: var(--green-dark); }
.taxonomy-directory summary span {
  padding: 5px 11px;
  color: var(--green-dark);
  background: color-mix(in srgb, var(--green) 16%, transparent);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.taxonomy-directory summary::after {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--green-dark);
  background: color-mix(in srgb, var(--green) 18%, transparent);
  border-radius: 50%;
  font-size: 1.15rem;
  line-height: 1;
  transition: background-color .2s ease;
}
.taxonomy-directory summary:hover::after { background: color-mix(in srgb, var(--green) 30%, transparent); }
.taxonomy-directory-links { padding: 4px clamp(18px, 2.4vw, 26px) 22px; }
.taxonomy-directory-links a { border-bottom-color: rgba(22, 24, 18, .08); border-radius: 8px; }
.taxonomy-directory-links a:hover { background: rgba(143, 189, 24, .09); }

/* --- Paginador de archivos ---------------------------------------
   Ventana de páginas en lugar de la tira completa, indicadores sin
   círculo y dirección en botón de píldora. */
.archive-pagination { row-gap: 14px; padding-top: 22px; }
.pagination-side:last-of-type { text-align: right; }
.pagination-numbers { gap: 4px; }
.pagination-numbers a,
.pagination-numbers span {
  width: 44px;
  height: 44px;
  color: #4a4d45;
  background: none;
  border: 0;
  border-radius: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: color .18s ease, background-color .18s ease;
}
.pagination-numbers a:hover { color: var(--ink); background: rgba(18, 18, 18, .07); }
.pagination-numbers .is-current { color: var(--white); background: var(--ink); }
.pagination-numbers .pagination-gap { width: 26px; color: #9a9d95; }
.pagination-numbers a:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }
.pagination-direction {
  padding: 11px 20px;
  border: 1px solid rgba(77, 108, 0, .35);
  border-radius: 999px;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.pagination-direction:hover { color: var(--white); background: var(--green-dark); border-color: var(--green-dark); }
.pagination-direction.is-disabled { border-color: rgba(18, 18, 18, .12); }
.pagination-direction.is-disabled:hover { color: #999; background: none; border-color: rgba(18, 18, 18, .12); }
.pagination-status {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  text-align: center;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .pagination-side:first-of-type { grid-column: 1; grid-row: 2; justify-self: start; }
  .pagination-side:last-of-type { grid-column: 2; grid-row: 2; justify-self: end; }
  .pagination-status { grid-row: 3; }
  .pagination-numbers a,
  .pagination-numbers span { width: 42px; height: 42px; }
  .pagination-direction { padding: 10px 16px; }
  .topic-nav a { min-height: 48px; padding: 12px 14px; }
}

/* --- Trazo cromático del hero: más lento y más suave --------------
   Estaba en 1,18 s por pasada con salida brusca y 1,42 s de separación:
   se leía como cuatro latigazos. Se alarga el trazo a 2,4 s, se juntan
   las pasadas a 1,15 s para que se solapen y el conjunto fluya como una
   sola cinta, y se rebaja el pico de opacidad alargando la meseta. La
   secuencia completa termina en 5,85 s, dentro de los 6,5 s que dura
   cada escena del slideshow. */
.hero-chroma-pass-2 { --chroma-delay: 1.15s; }
.hero-chroma-pass-3 { --chroma-delay: 2.3s; }
.hero-chroma-pass-4 { --chroma-delay: 3.45s; }
.hero-chroma.is-playing path { animation: hero-chroma-trace 2.4s cubic-bezier(.33, .03, .24, 1) var(--chroma-delay) both; }
.hero-chroma.is-playing .hero-chroma-white { animation-delay: calc(var(--chroma-delay) + .14s); }
.hero-chroma.is-playing .hero-chroma-pink { animation-delay: calc(var(--chroma-delay) + .28s); }
.hero-chroma.is-playing circle { animation: hero-chroma-pulse .95s ease-in-out calc(var(--chroma-delay) + 1.25s) both; }
.hero-chroma.is-playing .hero-chroma-node-white { animation-delay: calc(var(--chroma-delay) + 1.36s); }
.hero-chroma.is-playing .hero-chroma-node-pink { animation-delay: calc(var(--chroma-delay) + 1.47s); }
@keyframes hero-chroma-trace {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  22%  { opacity: .3; }
  58%  { stroke-dashoffset: 0; opacity: .28; }
  78%  { opacity: .2; }
  100% { stroke-dashoffset: -.55; opacity: 0; }
}
@keyframes hero-chroma-pulse {
  0%   { opacity: 0; transform: scale(.4); }
  45%  { opacity: .3; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-chroma.is-playing path,
  .hero-chroma.is-playing circle { animation: none; opacity: .18; stroke-dashoffset: 0; }
}

/* --- Titulares con el degradado de cada símbolo -------------------
   Verde medido sobre el símbolo real de Clínica Salux (icono-logo.png:
   #39681e → #8bb52c). El extremo claro real da 2,11:1 sobre el papel del
   sitio y no llega al 3:1 que WCAG pide para texto grande, así que se
   detiene en #5f8a1c (3,59:1) conservando el sentido del degradado. El
   símbolo de Studio es plano en su archivo (#e41884 uniforme): su
   degradado se construye con los colores de marca #a80b61 → #ec1986.

   Los dos titulares se cruzan: el de Clínica manda en verde y remata en
   el rosa de Studio, y el de Studio al revés. La transición se concentra
   en el último tercio para que el color dominante se lea sin dudas. Todo
   el recorrido, incluido el punto medio (#a65251), se mantiene por encima
   de 3,5:1 sobre el papel. */
#spaces-title { color: #39681e; }
.studio-manifesto h2 { color: #a80b61; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #spaces-title,
  .studio-manifesto h2 {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  #spaces-title { background-image: linear-gradient(95deg, #39681e 0%, #5f8a1c 62%, #ec1986 100%); }
  .studio-manifesto h2 { background-image: linear-gradient(95deg, #a80b61 0%, #ec1986 62%, #5f8a1c 100%); }
}

@media (forced-colors: active) {
  #spaces-title,
  .studio-manifesto h2 {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}

/* --- Studio Salux · bloque de visión ------------------------------
   Petición de Alicia Sanz (01-09-2026). El mapa de práctica ya resuelve
   la orientación por objetivo, así que este bloque explica el porqué y
   no repite la elección. Superficie rosa muy diluida para marcar pausa
   entre el manifiesto (papel) y el mapa (fondo oscuro). */
.studio-vision {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 88px);
  width: min(100% - 48px, var(--container));
  margin: clamp(46px, 6vw, 86px) auto;
  padding: clamp(38px, 5vw, 70px) clamp(26px, 4vw, 62px);
  background: linear-gradient(160deg, rgba(236, 25, 134, .06), rgba(236, 25, 134, .015) 62%, transparent);
  border: 1px solid rgba(236, 25, 134, .16);
  border-radius: 22px;
}
.studio-vision-copy h2 {
  margin: 12px 0 0;
  font-size: clamp(2rem, 3.4vw, 3.15rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.studio-vision-copy .lead { margin-top: 22px; max-width: 46ch; }
.studio-vision-principles {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.studio-vision-principles li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 18px;
  padding: 22px 0;
  border-top: 1px solid rgba(18, 18, 18, .12);
}
.studio-vision-principles li:first-child { border-top: 0; padding-top: 0; }
.studio-vision-principles li:last-child { padding-bottom: 0; }
.studio-vision-principles span {
  grid-row: 1 / span 2;
  color: var(--pink);
  font-size: .8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  padding-top: .28em;
}
.studio-vision-principles h3 {
  margin: 0;
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  line-height: 1.25;
  letter-spacing: -.015em;
}
.studio-vision-principles p {
  margin: 8px 0 0;
  color: #4a4d45;
  font-size: .97rem;
  line-height: 1.62;
  max-width: 54ch;
}

@media (max-width: 980px) {
  .studio-vision { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .studio-vision {
    width: min(100% - 36px, var(--container));
    padding: 30px 22px;
    border-radius: 18px;
  }
  .studio-vision-principles li { grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; padding: 18px 0; }
}

/* --- Capturas de reseñas en las páginas de testimonios ------------
   Dos límites encadenados dejaban la captura en un tamaño ilegible:

   1) `.testimonial-story-content` es una retícula de TRES columnas y las
      figuras llevan `grid-column: auto`, así que una captura suelta
      ocupaba un tercio del ancho del contenido (~340 px).
   2) Las imágenes se dimensionaban por ALTURA (`max-height`). Con una
      captura de móvil de 886×1920 —2,17 veces más alta que ancha—
      cualquier tope de altura razonable la deja en ~320 px de ancho, así
      que la altura no sirve para dimensionarla.

   En estas páginas la imagen es el documento, no un adorno: pasa a ocupar
   el ancho completo de la retícula y se dimensiona por ANCHO, sin tope de
   altura. La página se hace más larga, pero la reseña se lee. */
.testimonial-story-content > .legacy-media-row,
.testimonial-story-content > figure,
.testimonial-story-content > .wp-block-image { grid-column: 1 / -1; }

.testimonial-story-content .legacy-media-row {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 34px);
}
.testimonial-story-content .legacy-media-row .legacy-media-row-copy { align-self: stretch; }

.testimonial-story-content > figure,
.testimonial-story-content > .wp-block-image,
.article-content .testimonial-story-content .legacy-media-row > figure,
.article-content .testimonial-story-content .legacy-media-row > .wp-block-image {
  justify-self: center;
  width: min(100%, 760px);
  margin-inline: auto;
  padding: clamp(14px, 2vw, 24px);
  background: #eae7df;
  border-radius: 16px;
}

.testimonial-story-content figure img,
.testimonial-story-content .wp-block-image img,
.article-content .testimonial-story-content .legacy-media-row img,
.article-content .testimonial-story-content .legacy-media-row img.legacy-image-portrait,
.article-content .testimonial-story-content .legacy-media-row img.is-low-resolution {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0 auto;
  border-radius: 8px;
  background: #fff;
}

/* Las capturas verticales, más estrechas: a 520 px de ancho una de 886 px
   se ve al 59 % y el texto queda en un tamaño legible. */
.testimonial-story-content img.legacy-image-portrait,
.article-content .testimonial-story-content .legacy-media-row img.legacy-image-portrait {
  width: min(100%, 520px);
}
.testimonial-story-content > figure:has(img.legacy-image-portrait),
.testimonial-story-content > .wp-block-image:has(img.legacy-image-portrait) {
  width: min(100%, 568px);
}

.article-content .testimonial-story-content .legacy-media-row a:focus-visible img {
  outline: 2px solid var(--green-dark);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .testimonial-story-content .legacy-media-row { gap: 18px; padding: 20px 0 24px; }
  .testimonial-story-content > figure,
  .testimonial-story-content > .wp-block-image,
  .article-content .testimonial-story-content .legacy-media-row > figure,
  .article-content .testimonial-story-content .legacy-media-row > .wp-block-image { padding: 10px; width: 100%; }
  .testimonial-story-content img.legacy-image-portrait { width: 100%; }
}

/* --- Botones flotantes en móvil: pegados al borde -----------------
   `.scroll-top` y `.whatsapp-button` tienen forma de media píldora
   (`border-radius: 999px 0 0 999px`): están diseñados para apoyarse en
   el borde derecho. En móvil quedaban separados —dos reglas seguidas
   dentro de la misma media query los dejaban en 12 px y luego en 20 px—
   y el lado recto flotaba en el aire, que es lo que se lee como
   «cortado». Se pegan al borde, respetando el área segura en apaisado. */
@media (max-width: 760px) {
  .floating-tools {
    right: env(safe-area-inset-right, 0px);
    box-shadow: none;
  }
  .scroll-top,
  .whatsapp-button { box-shadow: -6px 10px 28px rgba(0, 0, 0, .26); }
}

/* --- Reclamos decorativos recompuestos ---------------------------
   "RESTAURA TU MOVILIDAD" y "RESTAURA TU CUERPO" llegaron partidos de
   Elementor: la primera mitad en un <p> y la palabra final en un <h3>,
   y sueltas se leían como palabras huérfanas. Recompuestas en el
   generador, aquí se les da forma de reclamo con antetítulo. */
.legacy-claim {
  margin: clamp(30px, 4vw, 48px) 0 0;
  padding: clamp(22px, 3vw, 32px) 0 0;
  border-top: 1px solid rgba(18, 18, 18, .14);
}
.legacy-claim-eyebrow {
  margin: 0 0 8px;
  color: var(--pink-dark);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.legacy-claim h3 {
  margin: 0;
  color: var(--pink-dark);
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  line-height: .92;
  letter-spacing: -.045em;
}

/* --- Reseña de Google reconstruida -------------------------------
   Sustituye a la captura de pantalla: nítida a cualquier tamaño,
   legible por buscadores y lectores de pantalla, y con el nombre según
   la política de testimonios. La captura queda como comprobación. */
.google-review-card {
  width: min(100%, 760px);
  margin: clamp(26px, 4vw, 44px) auto;
  padding: clamp(22px, 3vw, 34px);
  background: #fbfaf6;
  border: 1px solid rgba(18, 18, 18, .12);
  border-radius: 18px;
  box-shadow: 0 18px 46px -34px rgba(55, 48, 39, .55);
}
.google-review-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(18, 18, 18, .1);
}
.google-review-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--white);
  background: var(--pink);
  border-radius: 50%;
  font-size: 1.15rem;
  font-weight: 700;
}
.google-review-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.google-review-who strong { font-size: 1.02rem; letter-spacing: -.01em; }
.google-review-who span { color: var(--muted); font-size: .8rem; }
.google-review-stars { color: #f5a623; font-size: 1.05rem; letter-spacing: .06em; white-space: nowrap; }
.google-review-card blockquote {
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  color: #26291f;
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  line-height: 1.62;
}
.google-review-card figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(18, 18, 18, .1);
  font-size: .84rem;
}
.google-review-card figcaption a { color: var(--green-dark); font-weight: 650; }
.google-review-card figcaption a:hover { text-decoration: underline; }
.google-review-card figcaption b { font-weight: 400; }

@media (max-width: 760px) {
  .google-review-card { padding: 18px; border-radius: 14px; }
  .google-review-head { grid-template-columns: 40px minmax(0, 1fr); row-gap: 10px; }
  .google-review-avatar { width: 40px; height: 40px; font-size: 1rem; }
  .google-review-stars { grid-column: 1 / -1; }
}

/* ==================================================================
   2026-09-02 · Escenas 02 y 04 del hero: fotos nuevas.
   ================================================================== */

/* --- Escena 02 (Clínica) ------------------------------------------
   2026-09-02 (2): la escena pasa a ser una sesión de terapia manual y
   el desplazamiento al 60 % que había aquí deja de tener sentido. Lo
   justificaba el rótulo de pared de la foto anterior, que se partía
   por la mitad; la foto nueva no tiene rótulo y sí tiene a la paciente
   ocupando el ancho completo —pies en un extremo, cabeza en el otro—.
   Medido a 1440 px, la caja recorta 181 px de ancho: centrado se van
   ~90 px por lado y no se pierde nada; al 60 % se comía la cabeza. Así
   que se vuelve al encuadre centrado, que es el que hereda. */

/* --- Escena 04 (Tu cita): tarjetas Clínica + Studio ---------------
   Es la única escena clara del hero (mármol y pared en tonos altos) y
   en móvil el texto se apila sobre ella. Medido sobre el recorte
   vertical con el velo actual, el peor píxel bajo el titular da 7,3:1
   y bajo el párrafo 3,8:1; la referencia del propio hero (escena 02)
   es 4,6:1 y 3,7:1. Una atenuación leve la sube a 8,8:1 y 4,9:1 sin
   apagar la escena, y de paso la integra en una sección oscura donde
   las otras tres fotos ya llegan filtradas. En escritorio el texto va
   en la columna izquierda, sobre negro, y no se solapa. */
.hero-slide-choice .hero-media picture > img {
  filter: saturate(.72) contrast(1.06) brightness(.86);
}


/* ==================================================================
   2026-09-02 (2) · Collage del manifiesto de Studio y entrada en
   cascada de los principios.
   ================================================================== */

/* --- Collage del manifiesto (index de Studio Salux) ---------------
   Sustituye a la figura única de 16/7. La composición viene de la
   referencia que trajo Juan (idiomas momo): una imagen principal, un
   marco desplazado que asoma por la izquierda y por abajo, y una
   tarjeta superpuesta con borde del color del papel. El marco va en
   magenta porque es el color de Studio.
   Las cuatro cajas tienen alto fijo y las fotos entran con `cover`,
   así que las proporciones declaradas en el HTML (las reales de cada
   archivo) solo sirven para reservar sitio; el encuadre lo fija
   `object-position`.

   TODAS las reglas van prefijadas con `.studio-manifesto .studio-collage`
   a propósito. El generador incrusta en el <head> una instantánea de
   site.css (assets/css/critical-studio.css) que puede ir por detrás, y
   al ir en línea gana a igualdad de especificidad: su
   `.studio-manifesto figure` mandaba las cuatro fotos a la columna 2 y
   les imponía 16/7, que es exactamente como se rompió esto la primera
   vez. Con el prefijo, el collage no depende de que esa instantánea
   esté al día. Si se toca esta sección, mantener el prefijo. */
.studio-manifesto .studio-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1.34fr 1fr;
  grid-template-rows: 198px 198px;
  gap: 20px;
  margin: 22px 0 0;
  padding: 0 0 34px 26px;
}
.studio-manifesto .studio-collage figure {
  grid-column: auto;
  aspect-ratio: auto;
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
}
.studio-manifesto .studio-collage img { width: 100%; height: 100%; object-fit: cover; }
.studio-manifesto .studio-collage .studio-collage-item-1 {
  grid-column: 1;
  grid-row: 1 / 3;
  z-index: 2;
  box-shadow: 0 26px 48px rgba(18, 18, 18, .14);
}
.studio-manifesto .studio-collage .studio-collage-item-2,
.studio-manifesto .studio-collage .studio-collage-item-3 {
  grid-column: 2;
  z-index: 2;
  box-shadow: 0 18px 34px rgba(18, 18, 18, .10);
}
.studio-manifesto .studio-collage .studio-collage-item-2 { grid-row: 1; }
.studio-manifesto .studio-collage .studio-collage-item-3 { grid-row: 2; }
.studio-manifesto .studio-collage .studio-collage-item-1 img { object-position: center 42%; }
.studio-manifesto .studio-collage .studio-collage-item-3 img { object-position: center 48%; }

/* El marco es decorativo: se ancla al contenedor, no a la foto, y su
   ancho replica el de la primera columna para que el desplazamiento se
   lea como intencionado y no como un desajuste. */
.studio-manifesto .studio-collage .studio-collage-frame {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 26px;
  width: calc((1.34 / 2.34) * 100% - 12px);
  height: 416px;
  border: 2px solid var(--pink);
  border-radius: 16px;
}
.studio-manifesto .studio-collage .studio-collage-item-4 {
  position: absolute;
  z-index: 3;
  left: calc((1.34 / 2.34) * 100% - 108px);
  bottom: 0;
  width: 300px;
  height: 200px;
  border: 8px solid var(--paper);
  border-radius: 14px;
  box-shadow: 0 22px 44px rgba(18, 18, 18, .26);
}

@media (max-width: 700px) {
  /* La foto principal pasa a ocupar el ancho completo y las dos de
     apoyo se reparten la fila. La tarjeta baja hasta solaparse solo
     unos 24 px: con más solape tapaba la cabeza de la inversión de
     AeroYoga, que en el recorte apaisado queda en la parte baja. */
  .studio-manifesto .studio-collage {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 206px 152px;
    gap: 12px;
    padding: 0 0 128px 16px;
  }
  .studio-manifesto .studio-collage .studio-collage-item-1 { grid-column: 1 / 3; grid-row: 1; }
  .studio-manifesto .studio-collage .studio-collage-item-2 { grid-column: 1; grid-row: 2; }
  .studio-manifesto .studio-collage .studio-collage-item-3 { grid-column: 2; grid-row: 2; }
  .studio-manifesto .studio-collage .studio-collage-frame { top: 16px; width: calc(100% - 8px); height: 206px; }
  .studio-manifesto .studio-collage .studio-collage-item-4 {
    left: auto;
    right: 0;
    width: 64%;
    height: 136px;
    border-width: 7px;
  }
  .studio-manifesto .studio-collage .studio-collage-item-2 img { object-position: 48% center; }
  .studio-manifesto .studio-collage .studio-collage-item-3 img { object-position: 57% center; }
}

/* --- Principios de Studio: entrada en cascada ---------------------
   Encargo de Juan: los cuatro bloques entran escalonados 0,15 s y cada
   fila sube mientras su línea divisoria termina de trazarse.
   La línea era el `border-top` del <li> y no se puede animar en
   longitud. Se conserva —es lo que ve quien no tiene JavaScript o pide
   menos movimiento— y, mientras dura la animación, se vuelve
   transparente y la dibuja un ::before con `scaleX`. El borde sigue
   ocupando su píxel, así que la caja no cambia de altura ni provoca
   salto. El primer bloque no tiene línea (nunca la tuvo), pero
   mantiene su turno en la cadencia para que el ritmo no se rompa. */
.studio-vision-principles.is-reveal-ready li {
  position: relative;
  border-top-color: transparent;
  opacity: 0;
  transform: translateY(16px);
}
.studio-vision-principles.is-reveal-ready li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(18, 18, 18, .12);
  transform: scaleX(0);
  transform-origin: left center;
}
.studio-vision-principles.is-reveal-ready li:first-child::before { content: none; }
.studio-vision-principles.is-in-view li {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease var(--fila-retraso, 0s),
              transform .55s cubic-bezier(.22, .61, .36, 1) var(--fila-retraso, 0s);
}
.studio-vision-principles.is-in-view li::before {
  transform: scaleX(1);
  transition: transform .38s cubic-bezier(.22, .61, .36, 1) var(--linea-retraso, 0s);
}
.studio-vision-principles li:nth-child(1) { --linea-retraso: 0s; --fila-retraso: .30s; }
.studio-vision-principles li:nth-child(2) { --linea-retraso: .15s; --fila-retraso: .45s; }
.studio-vision-principles li:nth-child(3) { --linea-retraso: .30s; --fila-retraso: .60s; }
.studio-vision-principles li:nth-child(4) { --linea-retraso: .45s; --fila-retraso: .75s; }

@media (prefers-reduced-motion: reduce) {
  .studio-vision-principles.is-reveal-ready li,
  .studio-vision-principles.is-in-view li {
    opacity: 1;
    transform: none;
    border-top-color: rgba(18, 18, 18, .12);
    transition: none;
  }
  .studio-vision-principles li::before { content: none; }
}

/* ------------------------------------------------------------------
   2026-09-03 · Estados de los formularios y alternativa sin JavaScript
   ------------------------------------------------------------------
   El mensaje de estado ya no es solo un «enviado»: distingue entregado,
   registrado sin entrega, duplicado, rechazo y fallo. Un fallo tiene que
   verse como tal, no con el mismo verde que un envío correcto. Y recibe el
   foco al terminar el envío, así que necesita marca de foco propia: sin
   `outline` el lector de pantalla lo anuncia pero nadie ve dónde ha ido el
   cursor.
   ------------------------------------------------------------------ */
.form-status { line-height: 1.5; }
.form-status:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 3px; }
.form-status.is-error,
.contact-hub-studio .form-status.is-error,
.nutrition-form .form-status.is-error { color: var(--pink-dark, #a80b61); font-weight: 600; }
.form-status.is-error:focus-visible { outline-color: var(--pink-dark, #a80b61); }
.form-status-alternativa { display: block; margin-top: 4px; font-weight: 400; }
.form-status-alternativa a { text-decoration: underline; text-underline-offset: 2px; }

/* Solo se ve con JavaScript desactivado: el <noscript> no se pinta de otro
   modo. Sin JavaScript el formulario no puede enviarse, porque la
   comprobación antispam la emite el servidor, así que hay que ofrecer una
   salida real en vez de un botón que no hace nada útil. */
.form-sin-js {
  margin: 14px 0 0;
  padding: 12px 14px;
  color: var(--ink);
  background: rgba(236, 25, 134, .07);
  border-left: 3px solid var(--pink);
  font-size: .84rem;
  line-height: 1.5;
}
.form-sin-js a { text-decoration: underline; text-underline-offset: 2px; }

/* Aviso de consentimiento dentro del diálogo de vídeos: hereda el bloque de
   los mapas, pero allí vive sobre papel y aquí sobre el fondo oscuro del
   diálogo. */
.video-dialog .consent-frame-placeholder { max-width: 560px; margin: 0 auto; }

/* ------------------------------------------------------------------
   2026-09-03 · Escape cierra los submenús también en escritorio
   ------------------------------------------------------------------
   `.has-submenu:focus-within .submenu` mantenía el panel abierto después de
   pulsar Escape: `aria-expanded` pasaba a false y se quitaba `.is-open`, pero
   el foco seguía en el botón, que está DENTRO de `.has-submenu`, así que
   `:focus-within` seguía cumpliéndose. Resultado: estado accesible cerrado y
   estado visual abierto, que es la peor combinación posible.

   El JavaScript marca el elemento al cerrar con Escape y retira la marca
   cuando el foco sale de él. El ratón no se toca: si alguien está encima con
   el puntero, el submenú debe seguir viéndose.
   ------------------------------------------------------------------ */
.has-submenu[data-submenu-escape]:focus-within .submenu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
}
.has-submenu[data-submenu-escape]:focus-within .studio-discipline-submenu { transform: translate(-46%, -8px); }
@media (max-width: 1050px) {
  .has-submenu[data-submenu-escape]:focus-within .submenu { display: none; visibility: visible; opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------
   2026-09-03 · Resumen del cuestionario de alimentación
   ------------------------------------------------------------------
   El último paso se llamaba «Revisión y envío» sin nada que revisar. Ahora
   muestra los datos y las respuestas marcadas —lo único que se envía— con un
   botón por bloque para volver a corregir. Se lista solo lo marcado: enseñar
   las 81 preguntas sería un muro que nadie lee, y revisar algo que nadie lee
   no es revisar.
   ------------------------------------------------------------------ */
.nutrition-resumen { display: grid; gap: 18px; margin-bottom: 26px; }
.nutrition-resumen-intro { margin: 0; color: #565656; font-size: .86rem; line-height: 1.5; }
.nutrition-resumen-bloque {
  padding: 16px 18px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgb(203, 200, 193);
}
.nutrition-resumen-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.nutrition-resumen-cabecera h3 {
  margin: 0;
  color: var(--green-dark);
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.nutrition-resumen-corregir {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 14px;
  color: var(--ink);
  background: none;
  border: 1px solid rgb(170, 167, 160);
  border-radius: 999px;
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.nutrition-resumen-corregir:hover { background: var(--paper); border-color: var(--green-dark); }
.nutrition-resumen-corregir:focus-visible { outline: 3px solid rgba(143, 189, 24, .34); outline-offset: 1px; }
.nutrition-resumen-datos { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.nutrition-resumen-datos dt { color: #6b6b6b; font-size: .8rem; }
.nutrition-resumen-datos dd { margin: 0; font-size: .92rem; overflow-wrap: anywhere; }
.nutrition-resumen-datos dd.is-vacio { color: #8a8a8a; font-style: italic; }
.nutrition-resumen-lista { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.nutrition-resumen-lista li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; font-size: .89rem; line-height: 1.4; }
.nutrition-resumen-lista b { color: var(--green-dark); font-size: .76rem; font-weight: 750; letter-spacing: .05em; }
.nutrition-resumen-vacio { margin: 0; color: #8a8a8a; font-size: .86rem; font-style: italic; }
.nutrition-resumen-total { margin: 0; font-size: .9rem; font-weight: 650; }
.nutrition-step:focus { outline: none; }
.nutrition-step:focus-visible { outline: 3px solid rgba(143, 189, 24, .34); outline-offset: 6px; }

@media (max-width: 620px) {
  .nutrition-resumen-datos { grid-template-columns: 1fr; gap: 2px; }
  .nutrition-resumen-datos dd { margin-bottom: 8px; }
  .nutrition-resumen-cabecera { flex-wrap: wrap; }
}

/* ==========================================================================
   2026-09-09 · Revisión de diseño pedida por el cliente
   Documento «cambios web.docx» de Antonio Moro (07-09-2026) y notas de voz
   del 04-09-2026.

   Bloque de anulación al final del archivo: no modifica ninguna regla
   anterior y se retira borrando el bloque entero. Alcance: SOLO la home
   (body.home-page). Pendiente de revisión visual por Juan.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · HERO A SANGRE
   El hero era una rejilla de dos columnas (texto .82fr / foto 1.18fr): la foto
   ocupaba el 59 % derecho del ancho. Eso es lo que el cliente describe como
   «la imagen sale cortada por la mitad», poniendo de contraejemplo la portada
   de Finca Charco la Olla y la web actual.

   Se promueve a escritorio el MISMO apilado que el sitio ya usaba en móvil:
   foto al 100 % del ancho y texto encima. No cambia el marcado, ni el
   <picture> con art direction, ni la precarga del LCP.
   -------------------------------------------------------------------------- */
@media (min-width: 761px) {
  .hero-sangre .hero-slide { display: block; }

  .hero-sangre .hero-copy {
    position: relative;
    z-index: 2;
    min-height: 100%;
    max-width: min(720px, 58%);
    padding-bottom: clamp(158px, 17vh, 214px);
  }

  .hero-sangre .hero-media {
    position: absolute;
    z-index: 0;
    inset: 0;
    min-height: 100%;
    height: 100%;
  }

  /* 09-09-2026 — El velo direccional de aquí lo reemplaza el bloque «rev. 3»
     del final del archivo (velo de borde a borde + halo en el texto). Se deja
     la declaración por si alguien retira aquel bloque, pero la que manda es la
     posterior. Y las reglas cuelgan ya de `.hero-sangre`, no de la portada:
     Studio Salux usa el mismo sistema. */
  

  /* Antes: saturate(.72) contrast(1.06) — se veía apagada. */
  .hero-sangre .hero-media > img {
    filter: saturate(1) contrast(1.02) brightness(1.06);
    object-position: center 42%;
  }
}

/* --------------------------------------------------------------------------
   2 · GEOMETRÍA MÁS BLANDA
   «Se ve muy cuadrada, me gustan más los círculos».
   -------------------------------------------------------------------------- */

/* 2.a · Las dos tarjetas de espacios (Tratamiento clínico / Movimiento
   terapéutico). La barra de acento superior se separa de la esquina para que
   el redondeo no la recorte. */
body.home-page .space-editorial-card { border-radius: 26px; }

body.home-page .space-editorial-card::after {
  left: clamp(28px, 4vw, 54px);
  width: 64px;
  border-radius: 0 0 4px 4px;
}

/* 2.b · «Pide cita»: los logos de Clínica y Studio pasan a círculo, con aro
   verde y rosa, como en la web actual que el cliente aprueba. Se mantiene el
   fondo oscuro porque los dos logos son versiones en negativo. */
body.home-page .appointment-section .space-card,
body.home-page .appointment-section .herbalist-card { border-radius: 22px; }

body.home-page .appointment-section .space-logo {
  display: grid;
  width: clamp(124px, 12vw, 162px);
  height: clamp(124px, 12vw, 162px);
  flex: 0 0 auto;
  padding: clamp(9px, .9vw, 14px);
  border: 2px solid var(--green);
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  place-items: center;
  overflow: hidden;
}

body.home-page .appointment-section .space-logo img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

body.home-page .appointment-section .studio-card .space-logo {
  border-color: var(--pink);
}

body.home-page .appointment-section .studio-card .space-logo img {
  object-position: center;
}

/* --------------------------------------------------------------------------
   3 · DENSIDAD DE LA HOME (añadido 2026-09-09, mismo bloque)
   «Hay tanta letra e información que satura un poco». No se quita contenido
   —el cliente acepta mantenerlo por SEO—: se le da aire y se jerarquiza, para
   que cada bloque se lea como idea principal + detalle en vez de como un
   muro. El FAQ, además, pasa al final de la home desde el generador.
   -------------------------------------------------------------------------- */

/* 3.a · Más respiración entre secciones editoriales de la home. */
body.home-page .editorial-section { padding-block: clamp(84px, 8vw, 122px); }

/* 3.b · Las tres tarjetas de la guía: el segundo párrafo baja de peso, así el
   ojo agarra primero la idea y el detalle queda de apoyo. */
body.home-page .home-guide-card p { max-width: 44ch; }

body.home-page .home-guide-card p + p {
  margin-top: 1.1em;
  color: #6a6862;
  font-size: .84rem;
}


body.home-page .home-guide-card-3 p + p { color: #5c6349; }

/* 3.c · FAQ: más separación entre preguntas y medida más corta en la entrada. */
body.home-page .faq-column { gap: clamp(16px, 1.6vw, 24px); }
body.home-page .home-faq-intro > p { max-width: 46ch; }
/* --------------------------------------------------------------------------
   4 · EQUIPO EN RECORRIDO CIRCULAR (propuesta 2026-09-09)
   El equipo era un collage de tarjetas en paralelogramo alineadas en fila:
   angular y plano, justo lo que el cliente llama «muy cuadrada».

   Pasa a seis retratos circulares con aro de marca, en zigzag suave y unidos
   por arcos, en la línea del recorrido por pasos que pidió el cliente. Todo
   con el marcado actual: no cambia una sola etiqueta del generador.
   -------------------------------------------------------------------------- */

body.home-page .home-team-collage {
  --circle: clamp(104px, 11vw, 168px);
  --wave: clamp(18px, 2.2vw, 34px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  height: auto;
  align-self: start;
  align-items: start;
  gap: clamp(6px, .8vw, 16px);
  margin-top: clamp(26px, 3vw, 46px);
  padding: calc(var(--wave) + 34px) 2% calc(var(--wave) + 22px);
  overflow: visible;
}

body.home-page .team-collage-person {
  align-self: start;
  min-height: 0;
  margin-left: 0;
  transform: translateY(calc(var(--dir, -1) * var(--wave)));
}

body.home-page .team-collage-person:nth-child(odd)  { --dir: -1; }
body.home-page .team-collage-person:nth-child(even) { --dir:  1; }

/* El hover/foco no debe deshacer la onda. */
body.home-page .team-collage-person:focus-within {
  transform: translateY(calc(var(--dir, -1) * var(--wave) - 6px));
}

body.home-page .team-collage-person > a {
  position: relative;
  z-index: 1;
  height: auto;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--circle) * .16);
  padding: 0;
  color: var(--white);
  background: transparent;
  clip-path: none;
  overflow: visible;
  text-align: center;
}

body.home-page .team-collage-person:nth-child(even) > a {
  height: auto;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

/* El retrato, en círculo con el aro de marca. */
body.home-page .team-collage-person figure {
  width: var(--circle);
  height: var(--circle);
  flex: 0 0 auto;
  border: 2px solid var(--green);
  border-radius: 50%;
  background: #101010;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}

body.home-page .team-collage-person:nth-child(2) figure { border-color: var(--pink); }

body.home-page .team-collage-person img {
  transform: scale(1.03);
  object-position: center 26%;
  filter: grayscale(1) contrast(1.06);
}

/* Reencuadre por retrato: los valores antiguos estaban pensados para recortes
   verticales, y dentro de un círculo cortaban la cabeza. */
body.home-page .team-collage-person:nth-child(1) img { object-position: center 24%; }
body.home-page .team-collage-person:nth-child(2) img { object-position: center 20%; }
body.home-page .team-collage-person:nth-child(3) img { object-position: center 20%; }
body.home-page .team-collage-person:nth-child(4) img { object-position: center 18%; }
body.home-page .team-collage-person:nth-child(5) img { object-position: center 24%; }
body.home-page .team-collage-person:nth-child(6) img { object-position: center 30%; }

/* El barrido diagonal era del formato tarjeta; sin tarjeta solo ensucia. */
body.home-page .team-collage-person > a::after { content: none; }

body.home-page .team-collage-person > a:focus-visible figure {
  box-shadow: 0 0 0 6px rgba(168,210,27,.22);
}

body.home-page .team-collage-person:nth-child(2) > a:focus-visible figure {
  box-shadow: 0 0 0 6px rgba(236,25,134,.22);
}

body.home-page .team-collage-person > a:focus-visible { outline: 0; }

/* Rótulo debajo del círculo, siempre: los impares lo llevaban encima. */
body.home-page .team-collage-person:nth-child(odd) > a > div,
body.home-page .team-collage-person > a > div {
  order: 0;
  flex: 0 0 auto;
  max-width: 20ch;
  padding: 0;
  background: transparent;
}

body.home-page .team-collage-person > a > div span {
  margin-bottom: 5px;
  color: var(--green-bright);
  font-size: clamp(.56rem, .58vw, .66rem);
  white-space: normal;
  text-overflow: clip;
}

body.home-page .team-collage-person:nth-child(2) > a > div span { color: var(--pink); }

body.home-page .team-collage-person > a > div h3 {
  max-width: none;
  color: var(--white);
  font-size: clamp(.86rem, .95vw, 1.04rem);
  line-height: 1.12;
}

body.home-page .team-collage-person > a > div b {
  position: static;
  display: block;
  margin-top: 7px;
  color: var(--green-bright);
  font-size: .95rem;
}

body.home-page .team-collage-person:nth-child(2) > a > div b { color: var(--pink); }

/* Arcos que enlazan un retrato con el siguiente. Alternan hacia abajo y hacia
   arriba, que es lo que dibuja el zigzag. El último no lleva. */
body.home-page .team-collage-person::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  width: calc(100% + clamp(6px, .8vw, 16px));
  height: calc(var(--wave) * 2);
  border-color: rgba(168,210,27,.38);
  border-style: solid;
  pointer-events: none;
}

body.home-page .team-collage-person:nth-child(odd)::after {
  top: calc(var(--circle) / 2);
  border-width: 0 0 2px;
  border-radius: 0 0 55% 55% / 0 0 100% 100%;
}

body.home-page .team-collage-person:nth-child(even)::after {
  top: calc(var(--circle) / 2 - var(--wave) * 2);
  border-width: 2px 0 0;
  border-radius: 55% 55% 0 0 / 100% 100% 0 0;
}

body.home-page .team-collage-person:last-child::after { content: none; }

/* Móvil y tablet: el zigzag se apaga y quedan los círculos en rejilla. */
@media (max-width: 1180px) {
  body.home-page .home-team-collage {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3.5vw, 40px) clamp(12px, 2vw, 26px);
    padding-block: 24px;
  }
  body.home-page .team-collage-person { transform: none; }
  body.home-page .team-collage-person:focus-within { transform: translateY(-6px); }
  body.home-page .team-collage-person::after { content: none; }
}

@media (max-width: 620px) {
  body.home-page .home-team-collage {
    --circle: clamp(96px, 30vw, 132px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 14px;
  }
  body.home-page .team-collage-person > a > div { max-width: 100%; }
}

/* El bloque ya no necesita la altura del collage antiguo. */
body.home-page .team-showcase { padding-bottom: clamp(56px, 5vw, 84px); }
body.home-page .team-showcase-action { margin-top: clamp(18px, 2vw, 30px); }

/* --------------------------------------------------------------------------
   4.b · MOVIMIENTO (2026-09-09)

   Dos cosas distintas:

   a) Los círculos se comportan como en la web publicada. Allí los seis
      retratos circulares llevan `elementor-animation-shrink`: un
      `transform: scale(.9)` con `transition: transform .3s` al pasar por
      encima. Se reproduce ese gesto, con el aro reaccionando también.

   b) El recorrido curvo evoluciona de forma continua y lenta del verde de
      Clínica al rosa de Studio, con cada tramo desfasado respecto al
      anterior: la onda de color viaja del primer retrato al último, que es
      lo que da la sensación de continuidad.

   Todo se apaga con `prefers-reduced-motion`.
   -------------------------------------------------------------------------- */

/* a) Gesto de los círculos.
   La web publicada encoge la IMAGEN, no la ficha entera. Escalar el enlace
   completo arrastraba también el rótulo, y ese salto del nombre es lo que se
   percibía como brusco. Ahora solo encoge el retrato, menos (.955 en vez de
   .9) y con una curva de salida suave en vez de `ease`. */
body.home-page .team-collage-person figure {
  transition:
    transform .42s cubic-bezier(.22,.61,.36,1),
    border-color .3s ease,
    box-shadow .3s ease,
    filter .3s ease;
}

body.home-page .team-collage-person > a:hover figure,
body.home-page .team-collage-person > a:focus-visible figure {
  transform: scale(.955);
}

body.home-page .team-collage-person > a:hover figure {
  box-shadow: 0 0 0 5px rgba(168,210,27,.16);
}

body.home-page .team-collage-person:nth-child(2) > a:hover figure {
  box-shadow: 0 0 0 5px rgba(236,25,134,.16);
}

body.home-page .team-collage-person > a:hover img {
  filter: grayscale(0) contrast(1.02);
}

/* b) El recorrido, del verde de Clínica al rosa de Studio y vuelta. */
@keyframes salux-recorrido-equipo {
  0%   { border-color: rgba(168,210,27,.42); }
  50%  { border-color: rgba(236,25,134,.40); }
  100% { border-color: rgba(168,210,27,.42); }
}

@media (prefers-reduced-motion: no-preference) {
  body.home-page .team-collage-person::after {
    animation: salux-recorrido-equipo 18s ease-in-out infinite;
  }

  /* Desfase creciente: el color entra por el primer retrato y avanza hacia
     el último. Los retrasos son negativos para que no haya espera inicial. */
  body.home-page .team-collage-person:nth-child(1)::after { animation-delay: -9.0s; }
  body.home-page .team-collage-person:nth-child(2)::after { animation-delay: -7.2s; }
  body.home-page .team-collage-person:nth-child(3)::after { animation-delay: -5.4s; }
  body.home-page .team-collage-person:nth-child(4)::after { animation-delay: -3.6s; }
  body.home-page .team-collage-person:nth-child(5)::after { animation-delay: -1.8s; }
}

/* Entrada encadenada al asomar la sección. Mejora progresiva: donde el
   navegador no soporta animaciones ligadas al scroll, no pasa nada. */
@keyframes salux-equipo-entrada {
  from { opacity: 0; transform: translateY(20px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body.home-page .team-collage-person > a {
      animation: salux-equipo-entrada linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 24%;
    }
    /* Ya no hace falta anular la entrada al pasar el ratón: el hover actúa
       sobre el retrato y la animación de entrada sobre el enlace, así que no
       compiten por la misma propiedad. */
  }
}

/* --------------------------------------------------------------------------
   5 · AROS CIRCULARES ANIMADOS (2026-09-09)

   El cliente pasó la referencia: retrato en blanco y negro dentro de un aro
   fino, dos arcos gruesos girando alrededor y, por fuera, un anillo de trazo
   discontinuo girando en sentido contrario.

   Se aplica en los dos sitios donde aparece el equipo:
     · la home  (body.home-page  .team-collage-person)
     · la página de equipo (body.team-hub-page .team-ensemble-person)

   El color sale de --team-accent, que la página de equipo YA define por
   persona (verde, y rosa en .is-studio). En la home se define aquí igual,
   para que las dos usen la misma pieza.
   -------------------------------------------------------------------------- */

@keyframes salux-aro-giro { to { transform: rotate(360deg); } }

body.home-page .team-collage-person            { --team-accent: var(--green); --aro-tenue: rgba(168,210,27,.45); }
body.home-page .team-collage-person:nth-child(2) { --team-accent: var(--pink); --aro-tenue: rgba(236,25,134,.5); }
body.team-hub-page .team-ensemble-person       { --aro-tenue: rgba(77,108,0,.45); }
body.team-hub-page .team-ensemble-person.is-studio { --aro-tenue: rgba(168,11,97,.45); }

/* Anfitrión del círculo: la foto deja de recortar, para que los aros puedan
   salirse por fuera. El recorte lo hace ahora la propia imagen. */
body.home-page .team-collage-person figure,
body.team-hub-page .team-ensemble-person figure {
  position: relative;
  border: 0;
  /* La sombra heredada era cuadrada y dibujaba un rectángulo claro detrás del
     retrato: con el radio pasa a ser un halo circular. */
  border-radius: 50%;
  background: transparent;
  clip-path: none;
  overflow: visible;
}

body.home-page .team-collage-person img,
body.team-hub-page .team-ensemble-person img {
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--team-accent);
}

/* Anillo exterior de trazo discontinuo. */
body.home-page .team-collage-person figure::before,
body.team-hub-page .team-ensemble-person figure::before {
  position: absolute;
  z-index: 0;
  inset: calc(var(--circle) * -.115);
  content: "";
  border: 2px dashed var(--aro-tenue);
  border-radius: 50%;
  background: none;
  pointer-events: none;
}

/* Dos arcos gruesos, uno a cada lado, girando al revés. */
body.home-page .team-collage-person figure::after,
body.team-hub-page .team-ensemble-person figure::after {
  position: absolute;
  z-index: 0;
  inset: calc(var(--circle) * -.05);
  content: "";
  border: 3px solid transparent;
  border-right-color: var(--team-accent);
  border-left-color: var(--team-accent);
  border-top: 3px solid transparent;
  border-radius: 50%;
  background: none;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  body.home-page .team-collage-person figure::before,
  body.team-hub-page .team-ensemble-person figure::before {
    animation: salux-aro-giro 26s linear infinite;
  }
  body.home-page .team-collage-person figure::after,
  body.team-hub-page .team-ensemble-person figure::after {
    animation: salux-aro-giro 15s linear infinite reverse;
  }
}

/* --- Página de equipo: el retrato pasa de paralelogramo a círculo. -------- */
body.team-hub-page .team-ensemble-person {
  --circle: clamp(124px, 11.5vw, 172px);
}

/* Con retratos circulares la rejilla necesita menos alto y algo más de aire
   entre filas: los aros se salen del cuadro de la foto. */
body.team-hub-page .team-ensemble-grid {
  height: auto;
  grid-template-rows: repeat(2, minmax(230px, auto));
  gap: clamp(54px, 4.4vw, 78px) clamp(24px, 2.6vw, 44px);
  /* Los aros sobresalen del retrato: sin este margen, los de los extremos se
     salían del contenedor y quedaban cortados. */
  padding-inline: clamp(18px, 2vw, 34px);
}

body.team-hub-page .team-ensemble-person > a { min-height: 0; }

body.team-hub-page .team-ensemble-person figure {
  width: var(--circle);
  height: var(--circle);
  height: var(--circle);
  justify-self: center;
  align-self: center;
  margin: 0 auto;
}

body.team-hub-page .team-ensemble-person img {
  object-position: center 24%;
}

body.team-hub-page .team-ensemble-person-1 img { object-position: center 24%; }
body.team-hub-page .team-ensemble-person-2 img { object-position: center 20%; }
body.team-hub-page .team-ensemble-person-3 img { object-position: center 20%; }
body.team-hub-page .team-ensemble-person-4 img { object-position: center 18%; }
body.team-hub-page .team-ensemble-person-5 img { object-position: center 24%; }
body.team-hub-page .team-ensemble-person-6 img { object-position: center 30%; }

/* Los fondos en paralelogramo de las tarjetas dejan de tener sentido. */
body.team-hub-page .team-ensemble-person > a::before { display: none; }

body.team-hub-page .team-ensemble-person > a:hover figure,
body.team-hub-page .team-ensemble-person > a:focus-visible figure {
  transform: scale(.955);
}

body.team-hub-page .team-ensemble-person figure {
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
}

body.team-hub-page .team-ensemble-person > a:hover img,
body.team-hub-page .team-ensemble-person > a:focus-visible img {
  filter: grayscale(0) contrast(1.02);
  transform: none;
}

@media (max-width: 900px) {
  body.team-hub-page .team-ensemble-person { --circle: clamp(112px, 26vw, 150px); }
}

/* --------------------------------------------------------------------------
   5.b · PÁGINA DE EQUIPO: MISMO ORDEN EN LAS SEIS FICHAS (2026-09-09)
   La rejilla alternaba nombre-foto / foto-nombre. Con los retratos ya en
   círculo esa alternancia solo desordenaba la lectura, así que las seis
   fichas pasan a nombre a la izquierda y retrato a la derecha.
   -------------------------------------------------------------------------- */

body.team-hub-page .team-ensemble-person:nth-child(even) > a {
  grid-template-columns: minmax(0, .9fr) minmax(145px, 1.1fr);
  padding: 10px 12px;
}

body.team-hub-page .team-ensemble-person:nth-child(even) figure {
  grid-column: 2;
}

body.team-hub-page .team-ensemble-person:nth-child(even) .team-ensemble-meta {
  grid-column: 1;
  padding: 18px 4px 18px 20px;
  border-right: 0;
  border-left: 1px solid rgba(20,20,20,.28);
  text-align: left;
}

body.team-hub-page .team-ensemble-person:nth-child(even) .team-ensemble-meta::before {
  display: block;
  right: auto;
  left: -1px;
}

body.team-hub-page .team-ensemble-person:nth-child(even) .team-ensemble-number {
  right: 0;
  left: auto;
}

body.team-hub-page .team-ensemble-person:nth-child(even) > a:focus-visible .team-ensemble-meta {
  transform: translateX(5px);
}

/* 5.c · Por debajo de 1100 px el nombre al lado del círculo estrangula la
   columna de texto (los nombres se partían letra a letra). La ficha pasa a
   apilarse: retrato arriba, nombre debajo y centrado. */
@media (max-width: 1100px) {
  body.team-hub-page .team-ensemble-person { --circle: clamp(104px, 20vw, 150px); transform: none; }

  body.team-hub-page .team-ensemble-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(34px, 5vw, 56px) clamp(14px, 2vw, 26px);
  }

  body.team-hub-page .team-ensemble-person > a,
  body.team-hub-page .team-ensemble-person:nth-child(even) > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 8px;
    text-align: center;
  }

  /* La versión móvil del sitio montaba aquí un panel negro superpuesto,
     pensado para el retrato en paralelogramo. Con el círculo estorba. */
  body.team-hub-page .team-ensemble-person .team-ensemble-meta,
  body.team-hub-page .team-ensemble-person:nth-child(even) .team-ensemble-meta {
    width: auto;
    margin: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    text-align: center;
  }

  body.team-hub-page .team-ensemble-person .team-ensemble-meta h2 { color: var(--ink); }

  body.team-hub-page .team-ensemble-person figure,
  body.team-hub-page .team-ensemble-person:nth-child(even) figure {
    width: var(--circle);
    height: var(--circle);
    aspect-ratio: auto;
    clip-path: none;
  }

  body.team-hub-page .team-ensemble-person .team-ensemble-meta::before,
  body.team-hub-page .team-ensemble-person:nth-child(even) .team-ensemble-meta::before { display: none; }

  /* Los números grandes chocaban con los aros al reducir la ficha. */
  body.team-hub-page .team-ensemble-number { display: none; }
}

@media (max-width: 700px) {
  body.team-hub-page .team-ensemble-person { --circle: clamp(94px, 28vw, 128px); }
  body.team-hub-page .team-ensemble-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   6 · BLOQUE «NO TRATAMOS SOLO DÓNDE DUELE» A SANGRE (2026-09-09)

   Mismo problema que el hero: la sección era una rejilla 50/50 con la foto
   ocupando el 61 % derecho y un panel negro sólido bajo el texto. El cliente
   pide lo mismo que arriba: imagen completa, parallax y texto encima.

   Se conserva intacto el parallax: las variables --parallax-* las sigue
   escribiendo el mismo JS y la imagen sigue moviéndose con ellas.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  /* Algo más de alto para que el recorte vertical no se coma las cabezas al
     pasar la foto de una caja de proporción 1,62 a una a sangre. */
  body.home-page .home-parallax-story {
    /* Una sola columna: con la rejilla 50/50 el ancho del texto se medía sobre
       media sección y la columna quedaba estrangulada. */
    grid-template-columns: 1fr;
    height: clamp(560px, 44vw, 760px);
  }

  body.home-page .home-parallax-story-media {
    right: auto;
    inset: 0;
    width: 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Fuera la máscara diagonal: existía para disolver el canto izquierdo de la
     foto contra el negro. A sangre no hay canto que disolver. */
  body.home-page .home-parallax-story-media img {
    top: -14px;
    height: calc(100% + 120px);
    object-position: center 18%;
    filter: saturate(.92) contrast(1.03) brightness(1.04);
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* El velo sustituye al panel negro: oscurece la franja del texto y libera la
     foto a partir del 56 % del ancho. */
  body.home-page .home-parallax-story-media::before,
  body.home-page .home-parallax-story[data-parallax-active] .home-parallax-story-media::before {
    background:
      linear-gradient(90deg,
        rgba(7,7,6,.90) 0%,
        rgba(7,7,6,.74) 26%,
        rgba(7,7,6,.30) 52%,
        rgba(7,7,6,0) 74%),
      linear-gradient(0deg, rgba(5,5,4,.5), transparent 34%, transparent 76%, rgba(5,5,4,.28));
  }

  /* El óvalo blanco estaba calculado sobre la caja del 61 %: a sangre se
     convertía en una elipse enorme cruzando la sección. */
  body.home-page .home-parallax-story-media::after { content: none; }

  body.home-page .home-parallax-story-copy {
    width: min(640px, 52%);
    max-width: 640px;
    height: 100%;
    padding-right: clamp(24px, 3vw, 56px);
    background: none;
  }
}

@media (min-width: 901px) and (max-width: 1280px) {
  body.home-page .home-parallax-story { height: clamp(500px, 48vw, 640px); }
  body.home-page .home-parallax-story-copy { width: min(540px, 60%); max-width: 540px; }
}

/* ==========================================================================
   09-09-2026 — Megamenú de Tratamientos en dos bloques
   --------------------------------------------------------------------------
   El cliente lee mal el menú: cuatro columnas al mismo nivel, 34 filas
   encajonadas con borde y flecha propia, y rótulos sin jerarquía
   ("Técnicas I", "Técnicas II"). Pasa a dos bloques —Tratamientos y
   Técnicas—, separados por una línea vertical, con cabecera propia y un
   único enlace "ver todos" por bloque. Los enlaces dejan de ser cajas: texto
   plano, más aire entre líneas y una sola flecha por bloque.
   ========================================================================== */
.submenu-duo {
  left: -320px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: min(960px, calc(100vw - 40px));
  padding: 0;
}

.submenu-duo .submenu-block { min-width: 0; padding: 26px 26px 24px; }
.submenu-duo .submenu-block + .submenu-block { border-left: 1px solid var(--line); }

.submenu-duo .submenu-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.submenu-duo .submenu-block-head p {
  grid-column: auto;
  margin: 0;
  color: var(--white);
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -.01em;
  text-transform: none;
}
.submenu-duo .submenu-block-all {
  display: inline-flex !important;
  gap: 7px;
  min-height: 0 !important;
  padding: 0 !important;
  color: var(--green-bright);
  font-size: .74rem;
  letter-spacing: .02em;
  white-space: nowrap;
  border: 0;
}
.submenu-duo .submenu-block-all:hover { background: none; text-decoration: underline; }

.submenu-duo .submenu-block-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 26px;
}
.submenu-duo .submenu-block-columns ul { min-width: 0; margin: 0; padding: 0; list-style: none; }
.submenu-duo .submenu-block-columns li { margin: 0; }
.submenu-duo .submenu-block-columns a {
  display: block !important;
  min-height: 0 !important;
  padding: 7px 12px 7px 0 !important;
  color: #cfcfcf;
  font-size: .82rem;
  line-height: 1.32;
  overflow-wrap: break-word;
  border: 0;
}
.submenu-duo .submenu-block-columns a:hover,
.submenu-duo .submenu-block-columns a:focus-visible { color: var(--green-bright); background: none; }
.submenu-duo .submenu-block-columns a[aria-current="page"] { color: var(--white); font-weight: 600; }

/* El segundo bloque es el de técnicas: se marca en rosa para separarlo de un
   vistazo del bloque clínico, igual que hace el resto del sitio. */


@media (max-width: 1050px) {
  .submenu-duo {
    left: auto;
    grid-template-columns: 1fr;
    width: 100%;
    padding: 0 0 12px;
  }
  .submenu-duo .submenu-block { padding: 18px 12px 16px; }
  .submenu-duo .submenu-block + .submenu-block { border-left: 0; border-top: 1px solid var(--line); }
  .submenu-duo .submenu-block-head { flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .submenu-duo .submenu-block-columns { grid-template-columns: 1fr; gap: 0; }
  .submenu-duo .submenu-block-columns a { padding: 9px 0 !important; }
}

/* ==========================================================================
   09-09-2026 (rev. 2) — Testimonios destacados en /testimonios/
   --------------------------------------------------------------------------
   Correcciones pedidas por Juan sobre la primera versión:
     · El módulo deja de tener cabecera propia. Se funde con el bloque «Una
       historia orienta. No sustituye una valoración.» y vive dentro de esa
       misma sección, así que hay un solo titular en vez de dos seguidos.
     · Fuera el fondo negro: se queda sobre el papel de la sección, con las
       tarjetas en blanco.
     · Retratos en círculo, con aro verde, como el resto del sitio.
     · La navegación por anclas se sustituye por botones. El ancla arrastraba
       también el scroll vertical de la página y dejaba las tarjetas a medias.

   Las clases se renombran a `testimonios-destacados-*`: `.testimonial-spotlight`
   ya existía en el sitio como otro componente (línea 2007, fondo #0c0c0c y
   texto claro), y el mío heredaba su fondo negro. Dos componentes distintos no
   pueden compartir nombre.
   ========================================================================== */
.testimonial-context.has-spotlight { padding-bottom: clamp(48px, 5vw, 76px); }
.testimonial-context-nota {
  max-width: 62ch;
  margin: 20px 0 0;
  color: #6a6a64;
  font-size: .92rem;
}

/* `min-width: 0` no es decorativo: el modulo es un item de rejilla y, con el
   `min-width: auto` por defecto, la pista se estiraba hasta caber entera en vez
   de recortarse. Resultado en movil: el carrusel no se desplazaba -era la
   pagina la que se iba de ancho-. */
.testimonios-destacados {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
  margin-top: clamp(4px, .8vw, 14px);
}

.testimonios-destacados-pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(520px, 80vw);
  gap: clamp(14px, 1.4vw, 22px);
  padding-bottom: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  scrollbar-width: none;
  min-width: 0;
  max-width: 100%;
}
.testimonios-destacados-pista::-webkit-scrollbar { display: none; }
.testimonios-destacados-pista:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 4px; }

.testimonios-destacados-tarjeta {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(18px, 1.8vw, 28px);
  min-width: 0;
  height: clamp(268px, 21vw, 330px);
  padding: clamp(22px, 2vw, 32px);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid rgba(20,20,18,.10);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(35,32,25,.05);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.testimonios-destacados-tarjeta:hover,
.testimonios-destacados-tarjeta:focus-within {
  border-color: rgba(143,189,24,.55);
  box-shadow: 0 14px 38px rgba(35,32,25,.10);
}

/* Retrato circular con aro, el mismo gesto que «Pide cita» y el equipo. */
.testimonios-destacados-retrato {
  display: block;
  width: clamp(104px, 10.5vw, 148px);
  height: clamp(104px, 10.5vw, 148px);
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--green), 0 0 0 8px rgba(143,189,24,.14);
}
.testimonios-destacados-retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.testimonios-destacados-tarjeta:hover .testimonios-destacados-retrato img { transform: scale(1.06); }

.testimonios-destacados-copia {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  height: 100%;
}
.testimonios-destacados-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  color: var(--green-dark);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.testimonios-destacados-meta time { color: #83837c; letter-spacing: .08em; }
.testimonios-destacados-copia h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: clamp(1.16rem, 1.5vw, 1.55rem);
  line-height: 1.16;
  letter-spacing: -.028em;
}
.testimonios-destacados-copia h3 a { color: var(--black); }
.testimonios-destacados-copia h3 a:hover { color: var(--green-dark); }
.testimonios-destacados-copia > p:not(.testimonios-destacados-meta) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  color: #55554f;
  font-size: .94rem;
  line-height: 1.6;
}
.testimonios-destacados-enlace {
  display: inline-flex;
  gap: 9px;
  margin-top: auto;
  color: var(--green-dark);
  font-size: .88rem;
  font-weight: 600;
}
.testimonios-destacados-enlace:hover { text-decoration: underline; }

/* Numeral fantasma: da escala sin añadir ruido. */
.testimonios-destacados-tarjeta::after {
  content: attr(data-indice);
  position: absolute;
  right: clamp(18px, 1.6vw, 28px);
  bottom: clamp(4px, .5vw, 10px);
  color: rgba(20,20,18,.055);
  font-size: clamp(3.2rem, 4.6vw, 5rem);
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.05em;
  pointer-events: none;
}

/* Controles. Las flechas sólo aparecen cuando el JS ha tomado el mando: sin
   él la pista sigue siendo un desplazamiento horizontal nativo y no se pierde
   ni una tarjeta, pero unos botones que no hacen nada serían peor que nada. */
.testimonios-destacados-controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(18px, 2vw, 26px);
}
.testimonios-destacados-pasos { display: flex; flex-wrap: wrap; gap: 6px; }
.testimonios-destacados-pasos button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 36px;
  padding: 0;
  color: #83837c;
  font-size: .72rem;
  font-family: inherit;
  letter-spacing: .1em;
  background: none;
  border: 1px solid rgba(20,20,18,.16);
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.testimonios-destacados-pasos button:hover { color: var(--green-dark); border-color: var(--green); }
.testimonios-destacados-pasos button.is-active {
  color: var(--black);
  background: rgba(143,189,24,.16);
  border-color: var(--green);
}

.testimonios-destacados-flechas { display: none; gap: 8px; }
[data-carrusel-listo] .testimonios-destacados-flechas { display: flex; }
.testimonios-destacados-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: var(--black);
  font-size: 1.1rem;
  background: none;
  border: 1px solid rgba(20,20,18,.18);
  border-radius: 50%;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, opacity .2s ease;
}
.testimonios-destacados-flecha:hover:not(:disabled) { color: var(--green-dark); background: rgba(143,189,24,.12); border-color: var(--green); }
.testimonios-destacados-flecha:disabled { opacity: .3; cursor: default; }

@media (max-width: 900px) {
  .testimonios-destacados-pista { grid-auto-columns: min(430px, 86vw); }
  .testimonios-destacados-tarjeta { height: auto; }
}

@media (max-width: 560px) {
  .testimonios-destacados-tarjeta {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px;
  }
  .testimonios-destacados-controles { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .testimonios-destacados-flechas { justify-content: flex-end; }
}

@media (prefers-reduced-motion: no-preference) {
  .testimonios-destacados-pista { scroll-behavior: smooth; }
}

/* ==========================================================================
   09-09-2026 (rev. 3) — El hero sin recuadro: velo uniforme y halo en el texto
   --------------------------------------------------------------------------
   Juan descarta el panel: quiere "lo justo para que se vea bien el texto" y que
   la fotografía se respete a lo ancho, como en el hero de Finca Charco la Olla.
   Dos capas, ninguna con borde visible:

   1. Un velo PLANO sobre toda la imagen. Al no ser un degradado no tiene arista
      ni deja media foto más clara que la otra, que era la objeción de partida.
      Se le suma una franja inferior corta, necesaria para que los controles y
      las pestañas del carrusel se lean sobre la foto.
   2. Un halo de sombra en los propios caracteres. Oscurece únicamente los
      píxeles pegados a las letras: es la forma más barata de subir el contraste
      sin poner nada encima de la imagen.

   OJO: no tocar `position` en .hero-slide. La base las apila con
   `position: absolute` y sólo la activa pasa a `relative`; forzarlas todas a
   relative las pone en flujo y el carrusel deja de rotar.

   09-09-2026 — Las reglas colgaban de `body.home-page`. Ahora cuelgan de la
   clase `.hero-sangre`, que el generador pone en la propia sección: así el
   mismo sistema sirve para la portada y para la de Studio Salux sin duplicar
   nada. Cualquier hero futuro que quiera este tratamiento sólo tiene que
   llevar la clase.
   ========================================================================== */
.hero-sangre .hero-media::after {
  background:
    /* franja inferior: los controles y las pestañas van sobre la foto */
    linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.34) 13%, rgba(0,0,0,0) 27%),
    /* refuerzo lateral que recorre TODO el ancho, de borde a borde: al no
       terminar dentro de la imagen no deja arista ni parte la foto en dos, que
       era el problema del degradado anterior */
    linear-gradient(90deg, rgba(4,4,4,.52) 0%, rgba(4,4,4,.34) 42%, rgba(4,4,4,.16) 72%, rgba(4,4,4,0) 100%),
    /* velo plano sobre el conjunto */
    linear-gradient(rgba(6,6,6,.26), rgba(6,6,6,.26));
}

.hero-sangre .hero-copy .eyebrow,
.hero-sangre .hero-copy h1,
.hero-sangre .hero-copy h2,
.hero-sangre .hero-copy > p:not(.eyebrow),
.hero-sangre .hero-copy .text-link {
  text-shadow:
    0 1px 2px rgba(0,0,0,.9),
    0 2px 12px rgba(0,0,0,.85),
    0 4px 22px rgba(0,0,0,.72),
    0 8px 44px rgba(0,0,0,.6);
}

/* El párrafo del hero venía en #d2d2d2. Sobre las escenas claras se quedaba en
   1,7:1; en blanco gana un 50 % de contraste sin tocar la fotografía. */
.hero-sangre .hero-copy > p:not(.eyebrow) { color: #fff; }

/* Los botones son de contorno: el halo va en la caja, no en el glifo, para que
   el trazo del borde no se emborrone. */
.hero-sangre .hero-actions .button {
  background-color: rgba(6,6,6,.44);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  box-shadow: 0 2px 26px rgba(0,0,0,.5);
  text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 2px 10px rgba(0,0,0,.7);
}

@media (min-width: 761px) {
  .hero-sangre .hero-copy {
    position: absolute;
    z-index: 2;
    left: clamp(24px, 4.2vw, 92px);
    top: 50%;
    width: fit-content;
    min-width: 0;
    max-width: min(660px, 52%);
    min-height: 0;
    padding: 0;
    transform: translateY(calc(-50% - 34px));
  }
  .hero-sangre .hero-copy > p:not(.eyebrow) { max-width: 46ch; }
  .hero-sangre h1,
  .hero-sangre h2 { max-width: 100%; }
}

@media (max-width: 760px) {
  /* En móvil la copia va a todo el ancho, así que el refuerzo no puede ser
     lateral: baja desde el borde superior y muere antes de encontrarse con la
     franja de los controles. Entre las dos la foto queda más clara por el
     centro, que se lee como un viñeteado, no como una caja. */
  .hero-sangre .hero-media::after {
    background:
      linear-gradient(0deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.36) 14%, rgba(0,0,0,0) 30%),
      linear-gradient(180deg, rgba(4,4,4,.62) 0%, rgba(4,4,4,.46) 40%, rgba(4,4,4,.18) 66%, rgba(4,4,4,0) 86%),
      linear-gradient(rgba(6,6,6,.26), rgba(6,6,6,.26));
  }
  .hero-sangre .hero-copy {
    position: relative;
    min-height: 0;
    margin: clamp(26px, 6vh, 58px) var(--pad) 190px;
    padding: 0;
  }
}

/* ==========================================================================
   09-09-2026 — Capa de movimiento del hero: círculos que ascienden
   --------------------------------------------------------------------------
   Equivalente Salux de las hojas que caen en el hero de Finca Charco la Olla.
   Aquí el idioma de la marca son los círculos —es lo que el propio cliente
   pidió—, así que son motas circulares muy tenues que suben despacio y se
   apagan, en verde clínica, rosa studio y blanco.

   Cumple el método: sólo `transform` y `opacity`, cero JavaScript, cero
   dependencias, nada de movimiento sobre el elemento del LCP (son <i> decorativos
   hermanos del titular, no el titular), y se apagan por completo con
   «reducir movimiento». Son decorativas y van en un contenedor `aria-hidden`,
   así que no ocultan contenido: si algo fallara, no se pierde nada.
   ========================================================================== */
.hero-motes {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-motes i {
  position: absolute;
  bottom: -12%;
  display: block;
  width: var(--mota, 14px);
  height: var(--mota, 14px);
  border: 1px solid currentColor;
  border-radius: 50%;
  color: rgba(255,255,255,.5);
  opacity: 0;
  transform: translate3d(0, 0, 0);
}

.hero-motes i.is-green { color: rgba(168,210,27,.62); }
.hero-motes i.is-pink  { color: rgba(236,25,134,.55); }
.hero-motes i.is-solid { background: currentColor; border-color: transparent; opacity: 0; }

@keyframes salux-mota-asciende {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(.86); }
  12%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--deriva, 26px), calc(var(--recorrido, 100vh) * -1), 0) scale(1.12); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-motes i {
    animation: salux-mota-asciende var(--dura, 26s) linear var(--retardo, 0s) infinite;
  }
}

/* Sin la preferencia atendida no queda ni rastro: el contenedor entero se
   retira, no se deja un círculo estático flotando en mitad de la foto. */
@media (prefers-reduced-motion: reduce) {
  .hero-motes { display: none; }
}

.hero-motes i:nth-child(1)  { left:  6%; --mota: 10px; --dura: 30s; --retardo: -2s;  --deriva:  34px; --recorrido: 96vh; }
.hero-motes i:nth-child(2)  { left: 13%; --mota: 22px; --dura: 41s; --retardo: -14s; --deriva: -28px; --recorrido: 92vh; }
.hero-motes i:nth-child(3)  { left: 21%; --mota:  7px; --dura: 25s; --retardo: -7s;  --deriva:  18px; --recorrido: 99vh; }
.hero-motes i:nth-child(4)  { left: 29%; --mota: 16px; --dura: 36s; --retardo: -21s; --deriva:  42px; --recorrido: 94vh; }
.hero-motes i:nth-child(5)  { left: 37%; --mota: 11px; --dura: 33s; --retardo: -5s;  --deriva: -36px; --recorrido: 97vh; }
.hero-motes i:nth-child(6)  { left: 44%; --mota: 26px; --dura: 46s; --retardo: -30s; --deriva:  22px; --recorrido: 90vh; }
.hero-motes i:nth-child(7)  { left: 52%; --mota:  9px; --dura: 28s; --retardo: -11s; --deriva: -20px; --recorrido: 98vh; }
.hero-motes i:nth-child(8)  { left: 59%; --mota: 18px; --dura: 39s; --retardo: -24s; --deriva:  30px; --recorrido: 93vh; }
.hero-motes i:nth-child(9)  { left: 66%; --mota: 13px; --dura: 31s; --retardo: -17s; --deriva: -44px; --recorrido: 96vh; }
.hero-motes i:nth-child(10) { left: 73%; --mota:  8px; --dura: 27s; --retardo: -3s;  --deriva:  16px; --recorrido: 99vh; }
.hero-motes i:nth-child(11) { left: 80%; --mota: 21px; --dura: 43s; --retardo: -35s; --deriva: -26px; --recorrido: 91vh; }
.hero-motes i:nth-child(12) { left: 87%; --mota: 12px; --dura: 34s; --retardo: -9s;  --deriva:  38px; --recorrido: 95vh; }
.hero-motes i:nth-child(13) { left: 93%; --mota: 15px; --dura: 37s; --retardo: -27s; --deriva: -18px; --recorrido: 94vh; }
.hero-motes i:nth-child(14) { left: 97%; --mota:  6px; --dura: 24s; --retardo: -19s; --deriva:  24px; --recorrido: 99vh; }

/* En móvil el hero es más estrecho y más alto: menos motas y más lentas, para
   no gastar batería pintando círculos que casi no se ven. */
@media (max-width: 760px) {
  .hero-motes i:nth-child(n+9) { display: none; }
  .hero-motes i { --dura: 42s; }
}

/* ==========================================================================
   09-09-2026 — Tarjetas de «Pide cita» en toda la web
   --------------------------------------------------------------------------
   Los logos en círculo con aro verde y rosa estaban acotados a `body.home-page`;
   pasan a aplicarse en todas las páginas, que es donde el bloque se repite.
   Además, por indicación de Juan: el texto bajo el logo crece (antes 0,82 rem
   sobre gris #aaa, se perdía) y la flecha sale del flujo para colocarse en la
   esquina superior derecha, más gruesa y girada 45º, apuntando arriba a la
   derecha — el mismo gesto que ya usa el botón de Herbolario.
   ========================================================================== */
.appointment-section .space-card,
.appointment-section .herbalist-card { border-radius: 22px; }

.appointment-section .space-logo {
  display: grid;
  flex: 0 0 auto;
  width: clamp(124px, 12vw, 162px);
  height: clamp(124px, 12vw, 162px);
  padding: clamp(9px, .9vw, 14px);
  background: rgba(255,255,255,.05);
  border: 2px solid var(--green);
  border-radius: 50%;
  place-items: center;
  overflow: hidden;
}
.appointment-section .studio-card .space-logo { border-color: var(--pink); }
.appointment-section .space-logo img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.appointment-section .space-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: clamp(16px, 1.7vw, 26px);
  min-height: 0;
  padding: clamp(26px, 2.4vw, 40px);
}

/* El texto descriptivo: era el elemento más pequeño de la tarjeta y llevaba
   todo el peso informativo. */
.appointment-section .space-card > span:not(.space-logo) {
  flex: 0 1 auto;
  max-width: 24ch;
  color: #dcdcdc;
  font-size: clamp(1.02rem, 1.15vw, 1.24rem);
  line-height: 1.38;
}

.appointment-section .space-card > b {
  position: absolute;
  top: clamp(18px, 1.5vw, 26px);
  right: clamp(18px, 1.5vw, 26px);
  font-size: clamp(1.9rem, 2.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  transform: rotate(-45deg);
  transform-origin: center;
}
.appointment-section .studio-card > b { color: var(--pink); }

@media (max-width: 700px) {
  .appointment-section .space-card { gap: 16px; padding: 24px; }
  .appointment-section .space-logo { width: clamp(96px, 26vw, 124px); height: clamp(96px, 26vw, 124px); }
  .appointment-section .space-card > span:not(.space-logo) { max-width: 100%; font-size: 1.02rem; }
}

/* Con el panel translúcido que pidió Juan, el rosa de Studio cae a 1,93:1 sobre
   la fotografía clara (medido). El color no da más de sí: `#ec1986` alcanza
   como máximo 5,05:1 contra negro puro. Se pasa a blanco sólo el rótulo y el
   texto del botón de esa diapositiva; la línea de acento y el borde del botón
   siguen siendo rosa, así que la diapositiva se lee igual de "Studio".
   Revertirlo es borrar estas dos reglas. */
.hero-sangre .hero-slide-studio .hero-copy .eyebrow,
.hero-sangre .hero-slide-studio .hero-copy .button-studio { color: #fff; }

/* 09-09-2026 — El hero pasa a cinco escenas: la tira de pestañas deja de estar
   fijada a cuatro columnas y se reparte sola, así añadir o quitar una escena no
   obliga a tocar el CSS. */
.hero-tabs {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

/* El rótulo del hero usaba `--green` (#8fbd18). Sobre las diapositivas claras
   se quedaba en 4,38:1, por debajo de AA. Pasa a `--green-bright` (#a8d21b),
   que es el verde que ya usan los botones del propio hero: mismo color de
   marca, más luminancia, y sube por encima de 6:1 en las cinco escenas. */
.hero-sangre .hero-copy .eyebrow:not(.eyebrow-pink) { color: var(--green-bright); }

/* ==========================================================================
   09-09-2026 — Hero de Studio Salux
   --------------------------------------------------------------------------
   Misma mecánica que la portada (`.hero-sangre` + carrusel + motas), con dos
   escenas y textos que hablan sólo de Studio.

   La copia va abajo a la izquierda, no centrada: las dos fotografías llevan el
   logotipo de Studio Salux en el tercio superior izquierdo, justo donde caería
   el titular. Con el texto abajo, el logotipo se ve entero y el titular se
   apoya sobre pared y suelo limpios. Se probó extender el lienzo por la
   izquierda como en la escena 05 de la portada: no sirve aquí — para despejar
   el logotipo harían falta 1.400 px y el recorte de `cover` se comería a la
   protagonista.
   ========================================================================== */
@media (min-width: 761px) {
  body.studio-page .hero-sangre .hero-copy {
    top: auto;
    bottom: clamp(104px, 12vh, 148px);
    max-width: min(620px, 46%);
    padding-bottom: 0;
    transform: none;
  }
}

@media (max-width: 760px) {
  body.studio-page .hero-sangre .hero-copy {
    margin-top: clamp(150px, 26vh, 260px);
  }
}

/* Las motas de Studio se inclinan al rosa: es su color. */
body.studio-page .hero-motes i { color: rgba(255,255,255,.46); }
body.studio-page .hero-motes i.is-green { color: rgba(236,25,134,.42); }
body.studio-page .hero-motes i.is-pink { color: rgba(236,25,134,.58); }

/* En Studio la pestaña activa y su barra de progreso van en rosa. La regla
   base tiñe de rosa la tercera pestaña, porque en la portada esa es la de
   Studio; aquí todas lo son. */
body.studio-page .hero-tabs button.is-active { color: var(--pink); }

/* ==========================================================================
   09-09-2026 — Las dos tarjetas de espacio, con el color de cada rama
   --------------------------------------------------------------------------
   Petición de Juan: intensificar el color de cada rama y que el logotipo esté
   más presente.

   Marcas de agua: se sustituyen los dos ficheros. Clínica usaba
   `icono-logo.png`, que son 90×90 px declarados como 720 y ampliados siete
   veces —salía borroso—; ahora es `clinica-salux-simbolo.png`, 720×720 limpio
   y en verde de marca. Studio usaba `studio-salux-negativo.jpg` con un apaño de
   `invert + grayscale + multiply` que lo dejaba gris; ahora es
   `studio-salux-simbolo.png`, que ya viene en rosa con transparencia.

   Movimiento: sólo `transform` y `opacity`, deriva muy lenta y desfasada entre
   las dos tarjetas, y se apaga entera con «reducir movimiento».
   ========================================================================== */
.home-page .space-editorial-card {
  background: linear-gradient(150deg, rgba(143,189,24,.13) 0%, rgba(143,189,24,.05) 42%, rgba(255,255,255,0) 74%), #f7f5ef;
  border-color: rgba(143,189,24,.30);
}
.home-page .space-editorial-card.studio {
  background: linear-gradient(150deg, rgba(236,25,134,.11) 0%, rgba(236,25,134,.045) 42%, rgba(255,255,255,0) 74%), #f7f2f4;
  border-color: rgba(236,25,134,.26);
}
.home-page .space-editorial-card:hover { border-color: rgba(143,189,24,.62); }
.home-page .space-editorial-card.studio:hover { border-color: rgba(236,25,134,.55); }

/* La barra superior deja de ser un guión de 88 px. */


/* Halo de color que respira, por detrás de todo. */
.home-page .space-editorial-card::before {
  position: absolute;
  z-index: -2;
  right: -18%;
  bottom: -26%;
  width: 78%;
  height: 78%;
  content: "";
  background: radial-gradient(circle at 50% 50%, rgba(143,189,24,.34), rgba(143,189,24,0) 68%);
  pointer-events: none;
}
.home-page .space-editorial-card.studio::before {
  background: radial-gradient(circle at 50% 50%, rgba(236,25,134,.28), rgba(236,25,134,0) 68%);
}

/* Marca de agua: el logotipo COMPLETO de cada rama, no sólo el símbolo, y con
   el desenfoque cocido en el propio PNG. Se desenfoca el fichero y no con
   `filter: blur()` porque el elemento se anima: desenfocar en cada fotograma
   una imagen de 950 px cuesta, y el resultado en pantalla es el mismo. */
.space-card-watermark {
  right: -5%;
  bottom: -14%;
  width: clamp(280px, 54%, 490px);
  height: auto;
  opacity: .34;
  filter: none;
  mix-blend-mode: normal;
  transform: rotate(-8deg);
}
.space-editorial-card.studio .space-card-watermark {
  right: -5%;
  bottom: -13%;
  width: clamp(268px, 51%, 460px);
  height: auto;
  opacity: .30;
  filter: none;
  mix-blend-mode: normal;
  transform: rotate(-6deg);
}

@keyframes salux-marca-deriva {
  0%   { transform: rotate(-8deg) translate3d(0, 0, 0) scale(1); }
  50%  { transform: rotate(-4.5deg) translate3d(-2.2%, -3.4%, 0) scale(1.045); }
  100% { transform: rotate(-8deg) translate3d(0, 0, 0) scale(1); }
}
@keyframes salux-marca-deriva-studio {
  0%   { transform: rotate(-6deg) translate3d(0, 0, 0) scale(1); }
  50%  { transform: rotate(-2.5deg) translate3d(-2.6%, -3%, 0) scale(1.05); }
  100% { transform: rotate(-6deg) translate3d(0, 0, 0) scale(1); }
}
@keyframes salux-halo-respira {
  0%, 100% { opacity: .72; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.09); }
}

@media (prefers-reduced-motion: no-preference) {
  .space-card-watermark { animation: salux-marca-deriva 26s ease-in-out infinite; }
  .space-editorial-card.studio .space-card-watermark { animation: salux-marca-deriva-studio 31s ease-in-out infinite -9s; }
  .home-page .space-editorial-card::before { animation: salux-halo-respira 19s ease-in-out infinite; }
  .home-page .space-editorial-card.studio::before { animation: salux-halo-respira 24s ease-in-out infinite -7s; }
}

/* ==========================================================================
   09-09-2026 (rev. 4) — Tres peticiones del cliente
   --------------------------------------------------------------------------
   A · MÉTODO SALUX: «demasiado texto». Los cuatro párrafos de la órbita bajan
       de 33-49 palabras a 19-22 (el recorte va en el generador, no aquí). Aquí
       se compensa el vacío subiendo el titular: de 1,5 rem a 2 rem. No se toca
       ni una etiqueta indexable: siguen siendo los mismos H3 con las mismas
       palabras. Las cuatro tarjetas suman 177 de las 6.693 palabras visibles
       de la home (2,6%); el recorte se lleva ~80, un 1,2% del total.

       Núcleo del círculo: 232 -> 300 px, símbolo 54 -> 92 px y «Tu proceso»
       2 -> 2,9 rem. 300 px es el techo cómodo: el aro discontinuo va a
       `inset:-14px` y la órbita dibujada tiene 380 px de diámetro, así que a
       partir de ~352 px el núcleo se comería el anillo.

   B · TARJETAS DE ESPACIO: el símbolo de cada rama en lugar del logotipo
       completo, y con inclinaciones opuestas para que el par no se lea como
       una repetición. Hay que redefinir los dos @keyframes porque llevan el
       ángulo de reposo cocido dentro; si no, la animación pisaría el `rotate`.
       La opacidad baja de .34/.30 a .20/.18: los PNG de símbolo están nítidos
       y los de logotipo iban desenfocados, así que a la misma opacidad el
       símbolo pesaría mucho más sobre el texto.

   C · TESTIMONIOS: botón que baja del carrusel destacado al archivo completo.
   ========================================================================== */

/* --- A · Órbita del método ------------------------------------------------ */


/* Con el titular a ~30 px las cuatro tarjetas necesitan 376 px para no partir
   en dos líneas. El hueco hasta el núcleo sigue siendo de 130 px. */
.method-orbit-node { width: min(29%, 376px); }
.method-orbit-node span { margin-bottom: 16px; font-size: .78rem; }
.method-orbit-node h3 {
  margin: 0 0 12px;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.02;
  letter-spacing: -.042em;
  /* «Seguimiento comprensible» parte en dos líneas en algunas anchuras y las
     otras tres no. Reservando dos líneas siempre, los cuatro párrafos arrancan
     a la misma altura pase lo que pase con el titular. */
  min-height: 2.04em;
  text-wrap: balance;
}


/* Con el texto recortado la tarjeta ya no necesita altura forzada. */
@media (max-width: 1050px) {
  .method-orbit-core { width: 244px; height: 244px; padding: 22px; }
  .method-orbit-core img { width: 74px; height: 74px; }
  .method-orbit-core strong { font-size: 2.15rem; }
  .method-orbit-core small { max-width: 22ch; }
  .method-orbit-node article { min-height: 0; }
}

/* --- B · Símbolo de marca en las dos tarjetas de espacio ------------------ */


/* Mismo nombre a propósito: la última definición gana y arrastra el nuevo
   ángulo de reposo. Si se borrara este bloque volverían las de arriba. */
@keyframes salux-marca-deriva {
  0%   { transform: rotate(-14deg) translate3d(0, 0, 0) scale(1); }
  50%  { transform: rotate(-9.5deg) translate3d(-2.2%, -3.4%, 0) scale(1.05); }
  100% { transform: rotate(-14deg) translate3d(0, 0, 0) scale(1); }
}
@keyframes salux-marca-deriva-studio {
  0%   { transform: rotate(12deg) translate3d(0, 0, 0) scale(1); }
  50%  { transform: rotate(7.5deg) translate3d(-2.6%, -3%, 0) scale(1.055); }
  100% { transform: rotate(12deg) translate3d(0, 0, 0) scale(1); }
}

/* --- C · Del carrusel destacado al archivo -------------------------------- */
#archivo-testimonios { scroll-margin-top: 132px; }

.testimonios-destacados-archivo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  color: var(--black);
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .01em;
  text-decoration: none;
  background: rgba(143,189,24,.14);
  border: 1px solid rgba(143,189,24,.5);
  border-radius: 999px;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.testimonios-destacados-archivo span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 1rem;
  border-radius: 50%;
  transition: transform .25s ease;
}
.testimonios-destacados-archivo:hover {
  color: var(--white);
  background: var(--green-dark);
  border-color: var(--green-dark);
}
.testimonios-destacados-archivo:hover span { transform: translateY(3px); }
.testimonios-destacados-archivo:focus-visible {
  outline: 2px solid var(--green-dark);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  /* El contenedor es `column-reverse`: el eje va de abajo arriba, así que el
     `order` más bajo queda ABAJO. Orden visual buscado: flechas, pasos y el
     botón cerrando el bloque a todo el ancho. */
  .testimonios-destacados-archivo { order: 1; justify-content: center; }
  .testimonios-destacados-pasos { order: 2; }
  .testimonios-destacados-flechas { order: 3; }
}

/* ==========================================================================
   09-09-2026 (rev. 5) — Isotipos de marca, a mayor tamaño
   --------------------------------------------------------------------------
   Los dos PNG de símbolo pasan a ser los isotipos ORIGINALES de marca, con su
   degradado: `clinica-salux-simbolo.png` a 900×900 (antes 720×720, trazado
   plano reconstruido desde el icono de 90 px) y `studio-salux-simbolo.png` a
   760×874 (antes 608×699). Las proporciones se conservan dentro del 0,1 %, así
   que los `width`/`height` del generador siguen siendo válidos y
   `validate-images` no protesta (tolera un 2 %).

   TAMAÑO: Clínica sube del 25 % al 38 % del ancho de la tarjeta y Studio del
   22 % al 37 %.

   La OPACIDAD baja de .26/.24 a .16 a propósito. Medido sobre los píxeles de
   glifo del render real (no sobre la caja del elemento): con la mancha grande a
   .22 el párrafo de Studio se quedaba en 4,21:1 y a .16 sube a 4,63:1. El
   estado anterior, con el símbolo pequeño a .24, estaba en 3,65:1. Es decir:
   el bloque gana tamaño Y contraste al mismo tiempo.

   TRAMPA, la de rev. 4 pero más apretada: la tarjeta tiene `overflow:hidden` y
   el símbolo girado ocupa una caja ~21 % mayor que la suya, así que el margen
   real por abajo es `bottom` MENOS la mitad de ese exceso. Con `bottom:7 %` el
   brazo inferior se cortaba; con 11 % quedan 17 px libres a 1440 px. Compro-
   bado a 360, 390, 480, 600, 700, 760, 900, 1100, 1200, 1440, 1600 y 1920 px:
   ningún borde negativo.

   Por debajo de 760 px la home pasa a una columna: la tarjeta conserva ~328 px
   de alto con el doble de ancho, y ahí el 38 % se salía por ARRIBA. De ahí el
   tope en píxeles del bloque @media.
   ========================================================================== */
.space-card-watermark {
  right: 8%;
  bottom: 11%;
  width: clamp(190px, 38%, 290px);
  opacity: .16;
  transform: rotate(-14deg);
}
.space-editorial-card.studio .space-card-watermark {
  right: 8%;
  bottom: 10%;
  width: clamp(180px, 37%, 280px);
  opacity: .16;
  transform: rotate(12deg);
}

@media (max-width: 760px) {
  .space-card-watermark { right: 7%; bottom: 9%; width: clamp(150px, 30%, 200px); }
  .space-editorial-card.studio .space-card-watermark { right: 7%; bottom: 9%; width: clamp(146px, 29%, 190px); }
}

/* Mismo nombre a propósito: la última definición del archivo gana y arrastra el
   ángulo de reposo. El recorrido se acorta porque la mancha es mayor. */
@keyframes salux-marca-deriva {
  0%   { transform: rotate(-14deg) translate3d(0, 0, 0) scale(1); }
  50%  { transform: rotate(-10deg) translate3d(-1.8%, -2.6%, 0) scale(1.035); }
  100% { transform: rotate(-14deg) translate3d(0, 0, 0) scale(1); }
}
@keyframes salux-marca-deriva-studio {
  0%   { transform: rotate(12deg) translate3d(0, 0, 0) scale(1); }
  50%  { transform: rotate(8deg) translate3d(-2%, -2.4%, 0) scale(1.04); }
  100% { transform: rotate(12deg) translate3d(0, 0, 0) scale(1); }
}

/* ==========================================================================
   09-09-2026 (rev. 6) — Método: título en cápsula y párrafo más grande
   --------------------------------------------------------------------------
   El número y el titular pasan a una sola cápsula: `<div class="method-orbit-tag">`
   envuelve al `<span>` y al `<h3>` (cambio en el GENERADOR). El H3 NO se toca
   por dentro: el número queda FUERA del texto del encabezado, así que lo que
   indexa Google sigue siendo «Valoración individual», no «01 Valoración
   individual». Ése es el motivo de envolver en vez de meter el span dentro
   del h3, que era lo cómodo.

   El titular baja de 2 rem a ~1,18 rem porque una cápsula de 2 rem sería un
   ladrillo; el peso visual lo sostiene ahora la caja, no el cuerpo de letra.
   El párrafo sube de .84 a .95 rem (+13 %) y se aclara un punto (#4a4a4a).

   Desaparece el `min-height: 2.04em` del H3 de rev. 4: con `white-space:nowrap`
   la cápsula nunca parte en dos líneas por encima de 1050 px, así que los
   cuatro párrafos arrancan solos a la misma altura. Medido a 1440 px: las
   cuatro cápsulas miden 243-287 px dentro de tarjetas de 376 px.

   ARREGLO DE UN FALLO VIVO (venía de rev. 4): aquella revisión dejó
   `.method-orbit-node { width: min(29%, 376px) }` al final del archivo, y por
   ser la última definición pisaba el `width: 100%` de la maquetación apilada.
   Resultado: por debajo de 1050 px las cuatro tarjetas se quedaban en el 29 %
   del ancho —101 px a 390 px— con el texto en columnas de dos palabras. Se
   repone aquí. Regla para la próxima vez: cualquier bloque nuevo al final del
   archivo que toque `width` de un elemento que se re-maqueta en @media tiene
   que reponer también las variantes de esos @media.
   ========================================================================== */
.method-orbit-tag {
  display: inline-flex;
  align-items: stretch;
  margin: 0 0 15px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(77,108,0,.34);
  border-radius: 999px;
  overflow: hidden;
  transition: background-color .3s ease, border-color .3s ease;
}
.method-orbit-node .method-orbit-tag span {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 11px 13px 12px 19px;
  color: var(--green-dark);
  font-size: .74rem;
  font-weight: 750;
  letter-spacing: .1em;
  border-right: 1px solid rgba(77,108,0,.22);
}
.method-orbit-node-1 .method-orbit-tag span { color: var(--pink-dark); }
.method-orbit-node .method-orbit-tag h3 {
  display: flex;
  align-items: center;
  min-height: 0;
  margin: 0;
  padding: 11px 21px 12px 14px;
  color: #121212;
  font-size: clamp(1rem, 1.12vw, 1.18rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.012em;
  white-space: nowrap;
}
.method-orbit-node:hover .method-orbit-tag {
  background: rgba(168,210,27,.16);
  border-color: rgba(77,108,0,.62);
}


@media (max-width: 1050px) {
  
  .method-orbit-node .method-orbit-tag h3 { white-space: normal; }
}


/* ==========================================================================
   10-09-2026 (rev. 7) — Método: la órbita grande pasa a un núcleo compacto
   --------------------------------------------------------------------------
   El cliente sigue rechazando el bloque de la órbita. La referencia que
   aporta es un diagrama apaisado: cuatro cajas de esquina redondeada en
   rejilla 2x2 alrededor de un núcleo pequeño, con conectores curvos.

   QUÉ CAMBIA DE VERDAD, y es lo que él pide: la ALTURA. El escenario deja de
   ser una caja absoluta de 760-780 px y pasa a una rejilla que se ajusta al
   contenido. El bloque cabe entero en una pantalla de portátil.

   POR QUÉ SE CONSERVAN LAS CLASES `.method-orbit*`: el reveal por scroll y el
   paralaje de puntero de `site.js` cuelgan de `[data-method-orbit]` y de esos
   nombres. Renombrar obligaba a tocar el JS y a rehacer la entrada, que aquí
   sigue sirviendo. Este bloque sólo redefine geometría, caja y color.

   NÚCLEO EN CLARO, no negro. El cliente rechazó el fondo negro el 04-09 y el
   círculo negro del centro era el resto más visible de aquella dirección.

   TRES TRAMPAS de este montaje, por si hay que volver:

   1. El núcleo ya no es `position:absolute` con `translate(-50%,-50%)`: ahora
      lo centra `.method-orbit-hub`. Los keyframes `orbit-core-in` y
      `orbit-core-breathe` llevaban ese translate COCIDO dentro, así que hay
      que redefinirlos al final del archivo o el núcleo salta media caja.
      Mismo caso que `salux-marca-deriva` en rev. 5.
   2. `orbit-dot-pulse` se redefine en vez de crear un nombre nuevo. La regla
      `.method-orbit[data-method-orbit-state="in"] … article::after` que lo
      lanza tiene más especificidad que cualquier regla de este bloque sin el
      atributo: era eso, o repetir el atributo en ocho selectores.
   3. El SVG de conectores va a `preserveAspectRatio="none"` con
      `vector-effect="non-scaling-stroke"`. Su ancho es EXACTAMENTE la columna
      central, así que los extremos de los arcos caen sobre el borde interior
      de las tarjetas a cualquier anchura. Si se le pone `meet`, se centra por
      su cuenta y los arcos dejan de morder la caja.

   TRAMPA HEREDADA de rev. 4 y rev. 6, repuesta aquí: por debajo de 1050 px la
   maquetación se apila. Cualquier bloque nuevo al final del archivo que toque
   `width`, `position`, `display` o `grid-area` tiene que reponer también las
   variantes de ese @media o rompe el móvil sin que se note en escritorio.
   ========================================================================== */
.method-orbit-stage {
  --hub-col: clamp(196px, 17vw, 240px);
  --hub-gap: clamp(30px, 3vw, 46px);
  position: relative;
  width: min(100%, 1100px);
  height: auto;
  margin: 0 auto;
  padding: 0;
}
.method-orbit-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hub-col) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0;
  row-gap: var(--hub-gap);
  align-items: stretch;
}

/* Las cuatro esquinas. El orden de lectura del HTML sigue siendo 01-02-03-04;
   aquí sólo se colocan. */
.method-orbit-node,
.method-orbit-node-1,
.method-orbit-node-2,
.method-orbit-node-3,
.method-orbit-node-4 {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: auto;
}
.method-orbit-node-1 { grid-area: 1 / 1 / 2 / 2; }
.method-orbit-node-2 { grid-area: 1 / 3 / 2 / 4; }
.method-orbit-node-3 { grid-area: 2 / 3 / 3 / 4; }
.method-orbit-node-4 { grid-area: 2 / 1 / 3 / 2; }
.method-orbit-node::before { display: none; }

/* La caja de la referencia: contorno fino, esquina muy redondeada, sin sombra
   dura. La tarjeta ya no cuelga de una línea superior. */
.method-orbit-node article {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  padding: clamp(20px, 1.9vw, 27px) clamp(22px, 2.1vw, 30px) clamp(21px, 2vw, 28px);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(77,108,0,.26);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(94,82,60,.06);
  transition: transform .3s cubic-bezier(.2,.72,.2,1), border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.method-orbit-node article::before { display: none; }
.method-orbit-node:hover article {
  transform: translateY(-3px);
  background: rgba(255,255,255,.88);
  border-color: rgba(77,108,0,.5);
  box-shadow: 0 16px 40px rgba(94,82,60,.11);
}

/* Punto de anclaje en la esquina INTERIOR, mirando al núcleo. La resta con
   `--hub-gap` lo deja siempre a la altura donde el SVG termina el arco. */
.method-orbit-node article::after {
  --halo: rgba(168,210,27,.14);
  position: absolute;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: 9px;
  height: 9px;
  content: "";
  background: var(--green-bright);
  border: 1px solid rgba(77,108,0,.5);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--halo);
  animation: orbit-dot-pulse 4.8s ease-out infinite;
}
.method-orbit-node-1 article::after,
.method-orbit-node-4 article::after { right: -5.5px; }
.method-orbit-node-2 article::after,
.method-orbit-node-3 article::after { left: -5.5px; }
.method-orbit-node-1 article::after,
.method-orbit-node-2 article::after { bottom: calc(43.5px - var(--hub-gap) / 2); }
.method-orbit-node-3 article::after,
.method-orbit-node-4 article::after { top: calc(43.5px - var(--hub-gap) / 2); }
.method-orbit-node:hover article::after { box-shadow: 0 0 0 9px var(--halo); }

/* Se REDEFINE (no se crea otro nombre): ver trampa 2 de la cabecera. */
@keyframes orbit-dot-pulse {
  0%, 58%, 100% { box-shadow: 0 0 0 4px var(--halo); }
  14%           { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
}

/* Núcleo y conectores: capa propia, centrada sobre la rejilla. */
.method-orbit-hub {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.method-orbit-hub > * { grid-area: 1 / 1; }
.method-orbit-lines {
  position: static;
  width: var(--hub-col);
  height: 260px;
  inset: auto;
  overflow: visible;
}
.method-orbit-link { fill: none; stroke: rgba(77,108,0,.55); stroke-width: 1.4; stroke-linecap: round; }
/* Aro exterior discontinuo. Va en CSS y no en el SVG a propósito: el SVG
   lleva `preserveAspectRatio="none"` y una circunferencia dibujada dentro se
   convertiría en elipse al estrechar la columna. */
.method-orbit-halo {
  width: clamp(184px, 16vw, 228px);
  height: clamp(184px, 16vw, 228px);
  border: 1px dashed rgba(77,108,0,.32);
  border-radius: 50%;
  animation: method-core-spin 46s linear infinite reverse;
}
.method-orbit-core {
  position: static;
  z-index: 2;
  width: clamp(156px, 13.5vw, 188px);
  height: clamp(156px, 13.5vw, 188px);
  padding: 18px;
  color: var(--ink);
  background: radial-gradient(circle at 50% 26%, #ffffff 0%, #f5f3e9 60%, #e9e6d9 100%);
  border: 1px solid rgba(77,108,0,.42);
  box-shadow: 0 16px 40px rgba(94,82,60,.15);
  transform: none;
}
.method-orbit-core::before { display: none; }
.method-orbit-core img { width: 40px; height: 40px; margin-bottom: 7px; border-radius: 0; }
.method-orbit-core span { color: var(--green-dark); font-size: .56rem; letter-spacing: .13em; }
.method-orbit-core strong { margin: 3px 0 5px; font-size: clamp(1.22rem, 1.24vw, 1.42rem); letter-spacing: -.04em; }
.method-orbit-core small { max-width: 16ch; color: #5c5c5c; font-size: .6rem; line-height: 1.32; }

/* Texto: se conservan los cuerpos de rev. 6, que venían de una queja del
   cliente por letra pequeña. El `nowrap` de la cápsula cae a 1240 px, donde
   las columnas ya no dan de sí. */
.method-orbit-node p { margin-top: 0; padding-top: 0; color: #4a4a4a; font-size: .93rem; line-height: 1.62; }
.method-orbit-tag { align-self: flex-start; margin-bottom: 13px; }
.method-orbit-note { margin-top: clamp(22px, 2.4vw, 34px); }

/* Ver trampa 1: los keyframes del núcleo llevaban el centrado dentro. */
@keyframes orbit-core-in {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes orbit-core-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.022); }
}
@keyframes orbit-draw-link {
  from { stroke-dashoffset: 96; }
  to   { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .method-orbit[data-method-orbit-state] .method-orbit-core { transform: scale(.86); }
  .method-orbit[data-method-orbit-state] .method-orbit-halo { opacity: 0; }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-halo { animation: orbit-guide-in 1.2s ease .2s both, method-core-spin 46s linear .2s infinite reverse; }
  .method-orbit[data-method-orbit-state] .method-orbit-link { stroke-dasharray: 96; stroke-dashoffset: 96; }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-link { animation: orbit-draw-link .6s cubic-bezier(.3,.7,.3,1) both; }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-link-1 { animation-delay: .75s; }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-link-2 { animation-delay: .92s; }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-link-3 { animation-delay: 1.09s; }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-link-4 { animation-delay: 1.26s; }

  .method-orbit[data-method-orbit-state] .method-orbit-node-1,
  .method-orbit[data-method-orbit-state] .method-orbit-node-4 { transform: translate3d(-24px, 0, 0); }
  .method-orbit[data-method-orbit-state] .method-orbit-node-2,
  .method-orbit[data-method-orbit-state] .method-orbit-node-3 { transform: translate3d(24px, 0, 0); }

  /* Cascada del latido: el recorrido se lee 01 -> 04. */
  .method-orbit[data-method-orbit-state="in"] .method-orbit-node article::after { animation: orbit-dot-pulse 4.8s ease-out 1.6s infinite; }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-node-2 article::after { animation-delay: 2.8s; }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-node-3 article::after { animation-delay: 4s; }
  .method-orbit[data-method-orbit-state="in"] .method-orbit-node-4 article::after { animation-delay: 5.2s; }

  /* El tilt en 3D de toda la escena no aguanta con la caja compacta: movía
     los conectores respecto a las tarjetas. Se sustituye por una deriva
     mínima del núcleo. */
  .method-orbit[data-method-orbit-pointer] .method-orbit-stage { transform: none; }
  .method-orbit[data-method-orbit-pointer] .method-orbit-hub {
    transform: translate(-50%, -50%) translate3d(calc(var(--orbit-shift-x, 0px) * .5), calc(var(--orbit-shift-y, 0px) * .5), 0);
    transition: transform .3s ease-out;
  }
  .method-orbit[data-method-orbit-pointer] .method-orbit-lines { translate: none; }
}

@media (max-width: 1240px) {
  .method-orbit-node .method-orbit-tag h3 { white-space: normal; }
}

/* Apilado. Sin esto la rejilla de tres columnas sobrevive por debajo de
   1050 px y deja las tarjetas en un tercio del ancho. */
@media (max-width: 1050px) {
  .method-orbit-stage { width: 100%; }
  .method-orbit-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 14px;
  }
  .method-orbit-node,
  .method-orbit-node-1,
  .method-orbit-node-2,
  .method-orbit-node-3,
  .method-orbit-node-4 { grid-area: auto; width: 100%; }
  .method-orbit-node article::after { display: none; }
  .method-orbit-hub {
    position: relative;
    left: auto;
    top: auto;
    margin: 0 auto 32px;
    transform: none;
  }
  .method-orbit-lines { display: none; }
  .method-orbit-halo { width: 224px; height: 224px; }
  .method-orbit-core { width: 184px; height: 184px; }
}
@media (prefers-reduced-motion: reduce) {
  .method-orbit-node article::after { animation: none !important; }
}

/* ==========================================================================
   VARIANTE CLARA · 14-09-2026 (fase 2)
   Alcance: home (body.home-page) y home de Studio (body.studio-page, excluida
   la página de disciplinas, que comparte clase). Se retira borrando el bloque.

   Criterio (aprobado el 09-09 para la home y extendido a Studio el 14-09):
   el hero se queda FOTOGRÁFICO con texto blanco sobre velo — es lo que hace la
   portada de Finca Charco la Olla, la referencia que el cliente aprueba — y se
   aclaran el resto de bloques `section-dark`. Aclarar también el hero obligaría
   a renunciar a la foto a sangre, que es justo lo que el cliente pedía.

   Mecánica barata: redefinir `--line` dentro del bloque aclarado arregla de
   una vez todos los bordes, porque los descendientes lo consumen con
   `var(--line)`. Aparte solo hay que tocar los grises fijados a mano y bajar
   los colores de marca a sus versiones oscuras, que sobre papel sí contrastan.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · HOME  (integra variante-clara-home.css, que hasta hoy vivía suelto en
   «Línea de diseño 08-2026» y no estaba enlazado desde ninguna página)
   -------------------------------------------------------------------------- */
body.home-page .treatment-browser.section-dark,
body.home-page .team-showcase.section-dark,
body.home-page .appointment-section.section-dark {
  color: var(--ink);
  background: var(--paper);
  --line: rgba(18,18,18,.15);
}

body.home-page .treatment-browser.section-dark .eyebrow,
body.home-page .treatment-browser.section-dark .label,
body.home-page .team-showcase.section-dark .eyebrow,
body.home-page .team-showcase.section-dark .label,
body.home-page .appointment-section.section-dark .label,
body.home-page .treatment-browser.section-dark .section-kicker span,
body.home-page .team-showcase.section-dark .section-kicker span,
body.home-page .team-showcase.section-dark .team-card > span { color: var(--green-dark); }

body.home-page .appointment-section.section-dark .label-pink,
body.home-page .team-showcase.section-dark .label-pink { color: var(--pink-dark); }

body.home-page .treatment-browser.section-dark .treatment-explorer-heading > p,
body.home-page .appointment-section.section-dark .appointment-copy p,
body.home-page .appointment-section.section-dark .space-card > span { color: #55534d; }


body.home-page .appointment-section .space-card:hover { background: rgba(143,189,24,.12); }

/* Los dos logotipos son versiones EN NEGATIVO: sobre círculo blanco
   desaparecerían, así que el disco se queda oscuro aunque el bloque aclare. */
body.home-page .appointment-section .space-logo {
  background: #101010;
  border-width: 3px;
}

body.home-page .treatment-browser.section-dark .treatment-item { color: var(--ink); }

/* --------------------------------------------------------------------------
   2 · HOME DE STUDIO
   Bloques que aclaran: mapa de orientación, directorio de disciplinas y
   «tu punto de partida». `.studio-method` ya era claro (#e9e5df) y se queda
   como está: es lo que da el ritmo entre bloques de papel.
   -------------------------------------------------------------------------- */
body.studio-page:not(.studio-disciplines-page) .studio-practice-map.section-dark,
body.studio-page:not(.studio-disciplines-page) .studio-directory.section-dark,
body.studio-page:not(.studio-disciplines-page) .studio-start.section-dark,
body.studio-page:not(.studio-disciplines-page) .appointment-section.section-dark {
  color: var(--ink);
  background: var(--paper);
  --line: rgba(18,18,18,.15);
}

/* «Pide cita» cierra también la home de Studio: si se queda negro, la página
   termina en un salto de claro a oscuro que es justo lo que rechaza el
   cliente. Mismo tratamiento que en la home. */
body.studio-page:not(.studio-disciplines-page) .appointment-section.section-dark .label { color: var(--green-dark); }
body.studio-page:not(.studio-disciplines-page) .appointment-section.section-dark .label-pink { color: var(--pink-dark); }
body.studio-page:not(.studio-disciplines-page) .appointment-section.section-dark .appointment-copy p,
body.studio-page:not(.studio-disciplines-page) .appointment-section.section-dark .space-card > span { color: #55534d; }
body.studio-page:not(.studio-disciplines-page) .appointment-section .space-card { background: #fbfaf7; }
body.studio-page:not(.studio-disciplines-page) .appointment-section .space-card:hover { background: rgba(236,25,134,.09); }
body.studio-page:not(.studio-disciplines-page) .appointment-section .space-logo {
  background: #101010;
  border-width: 3px;
}

/* Acentos de marca: sobre papel, --pink y --green no llegan al contraste
   mínimo en texto pequeño; se bajan a sus versiones oscuras. */
body.studio-page:not(.studio-disciplines-page) .studio-practice-map.section-dark .label,
body.studio-page:not(.studio-disciplines-page) .studio-practice-map.section-dark .label-pink,
body.studio-page:not(.studio-disciplines-page) .studio-directory.section-dark .label,
body.studio-page:not(.studio-disciplines-page) .studio-directory.section-dark .label-pink,
body.studio-page:not(.studio-disciplines-page) .studio-start.section-dark .label,
body.studio-page:not(.studio-disciplines-page) .studio-start.section-dark .label-pink,
body.studio-page:not(.studio-disciplines-page) .studio-start.section-dark .studio-start-options small,
body.studio-page:not(.studio-disciplines-page) .studio-start.section-dark .studio-start-options b,
body.studio-page:not(.studio-disciplines-page) .studio-directory.section-dark .button-studio,
body.studio-page:not(.studio-disciplines-page) .studio-start.section-dark .button-studio { color: var(--pink-dark); }

/* Titulares y textos secundarios que venían fijados en grises claros. */
body.studio-page:not(.studio-disciplines-page) .studio-practice-map.section-dark > header h2 { color: var(--ink); }
body.studio-page:not(.studio-disciplines-page) .studio-practice-map.section-dark > header > p,
body.studio-page:not(.studio-disciplines-page) .studio-practice-map.section-dark > footer,
body.studio-page:not(.studio-disciplines-page) .studio-directory.section-dark .section-heading > p,
body.studio-page:not(.studio-disciplines-page) .studio-directory.section-dark .studio-cards .service-card > div > span,
body.studio-page:not(.studio-disciplines-page) .studio-start.section-dark header > p:last-child,
body.studio-page:not(.studio-disciplines-page) .studio-start.section-dark .studio-start-options span,
body.studio-page:not(.studio-disciplines-page) .studio-start.section-dark aside > span { color: #55534d; }

body.studio-page:not(.studio-disciplines-page) .studio-practice-map.section-dark > footer a,
body.studio-page:not(.studio-disciplines-page) .studio-start.section-dark aside > a:not(.button) { color: var(--ink); }
body.studio-page:not(.studio-disciplines-page) .studio-start.section-dark aside > a:not(.button):hover { color: var(--pink-dark); }

/* La rejilla de «tu punto de partida» dibuja sus separadores con el fondo. */
body.studio-page:not(.studio-disciplines-page) .studio-start.section-dark .studio-start-options { background: rgba(18,18,18,.15); }

body.studio-page:not(.studio-disciplines-page) .studio-start.section-dark .studio-start-options > a:hover,
body.studio-page:not(.studio-disciplines-page) .studio-start.section-dark .studio-start-options > a:focus-visible { background: rgba(236,25,134,.09); }
body.studio-page:not(.studio-disciplines-page) .studio-start.section-dark aside { border-color: rgba(18,18,18,.15); }

/* El botón invertido de Studio: sobre papel el hover en rosa pleno necesita
   texto blanco, no negro. */
body.studio-page:not(.studio-disciplines-page) .studio-directory.section-dark .button-studio:hover,
body.studio-page:not(.studio-disciplines-page) .studio-start.section-dark .button-studio:hover { color: var(--white); background: var(--pink-dark); }

/* Dos bloques de papel seguidos necesitan una línea que los separe. */
body.studio-page:not(.studio-disciplines-page) .studio-directory.section-dark { border-top: 1px solid rgba(18,18,18,.12); }

/* --------------------------------------------------------------------------
   3 - FASE2-COLLAGE-CLARO - HOME - collage de equipo en circulos
   El recorrido circular se rehizo DESPUES de dibujar la variante clara del
   09-09, asi que sus textos seguian fijados para fondo negro: nombres en
   blanco (1,14:1 sobre papel) y rotulos en verde claro (1,55:1).
   -------------------------------------------------------------------------- */
body.home-page .team-showcase.section-dark .team-collage-heading > p { color: #55534d; }

body.home-page .team-showcase.section-dark .team-collage-person > a,
body.home-page .team-showcase.section-dark .team-collage-person > a > div h3 { color: var(--ink); }

body.home-page .team-showcase.section-dark .team-collage-person > a > div span,
body.home-page .team-showcase.section-dark .team-collage-person > a > div b { color: var(--green-dark); }

body.home-page .team-showcase.section-dark .team-collage-person:nth-child(2) > a > div span,
body.home-page .team-showcase.section-dark .team-collage-person:nth-child(2) > a > div b { color: var(--pink-dark); }

/* La onda que enlaza los retratos iba en verde claro al 38 %: sobre papel
   desaparece y el recorrido deja de leerse como recorrido. */
body.home-page .team-showcase.section-dark .team-collage-person::after { border-color: rgba(77,108,0,.4); }

/* El enlace "Ver los 18 tratamientos" y los numeros del explorador venian en
   verde claro y gris medio: 1,55:1 y 3,24:1 sobre papel. */
body.home-page .treatment-browser.section-dark .treatment-all,
body.home-page .treatment-browser.section-dark .treatment-all span { color: var(--green-dark); }
body.home-page .treatment-browser.section-dark .treatment-item-index { color: #55534d; }
/* ==========================================================================
   FASE2B-CABECERA-CIRCULOS - 14-09-2026
   Responde a tres cosas del documento de Antonio del 13-09:
   - "la cabecera con los dos logos encasillados en dos cuadrados y la flecha
      no nos convence"
   - "pondria los circulos en grande y quitaria los cuadrados que les rodean,
      y las flechas no nos gustan tampoco"
   - "pondria mas resaltado lo de clinica salux y studio salux para que la
      gente entienda que puede entrar"
   Y de paso la tarjeta del Herbolario, que salia cortada por la derecha.
   Se retira borrando el bloque.
   ========================================================================== */

/* A - Cabecera: el conmutador deja de ser una caja y pasa a ser un rotulo.
   El texto "Ir a Studio" / "Ir a Clinica" lo pone el generador dentro del <b>,
   que sigue siendo aria-hidden porque el enlace ya lleva su aria-label. */
.universe-switch {
  padding-right: 0;
  padding-left: clamp(10px, 1.5vw, 28px);
  overflow: visible;
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.18);
  box-shadow: none;
}
.universe-switch::before { display: none; }
.universe-switch:hover,
.universe-switch:focus-visible {
  background: transparent;
  border: 0;
  border-left: 1px solid currentColor;
  box-shadow: none;
  transform: none;
}
.universe-switch b {
  display: block;
  width: auto;
  height: auto;
  align-self: end;
  justify-self: start;
  padding-bottom: 4px;
  color: currentColor;
  border: 0;
  border-radius: 0;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
  transform: none;
}
.universe-switch:hover b,
.universe-switch:focus-visible b {
  color: currentColor;
  background: transparent;
  border: 0;
  transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.universe-switch-logo { opacity: .82; transition: opacity .22s ease; }
.universe-switch:hover .universe-switch-logo { opacity: 1; }

/* En pantallas estrechas el conmutador baja de 120 px: ahi el rotulo estorba
   y se queda solo el logotipo con su linea de separacion. */
@media (max-width: 720px) {
  .universe-switch b { display: none; }
}

/* B - "Pide cita": circulos grandes, sin caja alrededor y sin flecha. */
.appointment-section .space-card {
  align-items: center;
  gap: clamp(18px, 1.6vw, 26px);
  padding: clamp(14px, 1.4vw, 22px);
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: center;
}
body.home-page .appointment-section .space-card { background: transparent; border-radius: 0; }
.appointment-section .space-card:hover,
body.home-page .appointment-section .space-card:hover { background: transparent; transform: translateY(-3px); }
.appointment-section .space-card > b { display: none; }
.appointment-section .space-logo,
body.home-page .appointment-section .space-logo {
  width: clamp(150px, 15.5vw, 210px);
  height: clamp(150px, 15.5vw, 210px);
  margin-inline: auto;
  border-width: 3px;
  /* Los dos logotipos son versiones EN NEGATIVO: el disco se queda oscuro
     aunque el bloque este aclarado, o desaparecerian. */
  background: #101010;
}
.appointment-section .space-card > span:not(.space-logo) {
  max-width: 22ch;
  margin-inline: auto;
  font-size: clamp(1.02rem, 1.1vw, 1.16rem);
}
.appointment-section .space-card:hover .space-logo { box-shadow: 0 0 0 6px rgba(143,189,24,.16); }
.appointment-section .studio-card:hover .space-logo { box-shadow: 0 0 0 6px rgba(236,25,134,.14); }

/* La tarjeta del Herbolario salia recortada por la derecha con object-fit
   cover: se perdian el reclamo y el boton. */


/* C - Las dos tarjetas de la home: que se entienda que son entradas. */
.home-page .space-editorial-card > span {
  display: block;
  width: fit-content;
  align-self: flex-start;
  padding-bottom: 7px;
  border-bottom: 3px solid currentColor;
  font-size: clamp(.86rem, .92vw, .98rem);
  font-weight: 800;
  letter-spacing: .15em;
}
.home-page .space-editorial-card > b {
  font-size: clamp(.95rem, 1vw, 1.06rem);
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}/* ==========================================================================
   FASE2D-REMATES - 14-09-2026
   Dos restos de contraste que solo se ven midiendo, no mirando:
   - El boton "Conoce nuestro equipo" heredaba .button-light, pensado para
     fondo negro: 1,55:1 sobre papel.
   - Las flechas del mapa de orientacion de Studio, en rosa pleno: 4,1:1.
   ========================================================================== */
body.home-page .treatment-browser.section-dark .button-light,
body.home-page .treatment-browser.section-dark .button-light span,
body.home-page .team-showcase.section-dark .button-light,
body.home-page .team-showcase.section-dark .button-light span,
body.home-page .appointment-section.section-dark .button-light,
body.home-page .appointment-section.section-dark .button-light span { color: var(--green-dark); }

body.studio-page:not(.studio-disciplines-page) .studio-practice-map.section-dark .button-light,
body.studio-page:not(.studio-disciplines-page) .studio-practice-map.section-dark .button-light span,
body.studio-page:not(.studio-disciplines-page) .studio-directory.section-dark .button-light,
body.studio-page:not(.studio-disciplines-page) .studio-directory.section-dark .button-light span,
body.studio-page:not(.studio-disciplines-page) .studio-start.section-dark .button-light,
body.studio-page:not(.studio-disciplines-page) .studio-start.section-dark .button-light span { color: var(--pink-dark); }

body.studio-page:not(.studio-disciplines-page) .studio-practice-map.section-dark b { color: var(--pink-dark); }/* ==========================================================================
   FASE2E-MEJORAS - 14-09-2026
   Cuatro mejoras sobre la version clara, todas medidas antes de escribirlas.
   ========================================================================== */

/* 1 - FALLO REAL. Al hacerse compacta la cabecera (al bajar), la regla
   .site-header.is-compact .universe-switch b (mas especifica) devolvia el
   rotulo a una caja de 25x25 px: "IR A CLINICA" se partia en dos lineas y se
   montaba encima del logotipo. Se iguala la especificidad y se fija nowrap. */
.site-header .universe-switch b,
.site-header.is-compact .universe-switch b {
  display: block;
  width: auto;
  height: auto;
  align-self: end;
  justify-self: start;
  padding-bottom: 4px;
  color: currentColor;
  border: 0;
  border-radius: 0;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transform: none;
}


/* 2 - RITMO. Medido: la home encadenaba 3.000 px de papel seguido y la de
   Studio 4.041 px. Se alterna con el tono medio que el sitio YA usa en
   .studio-method (#e9e5df); no se inventa color nuevo. */
body.home-page .treatment-browser.section-dark { background: #e9e5df; }
body.studio-page:not(.studio-disciplines-page) .studio-practice-map.section-dark,
body.studio-page:not(.studio-disciplines-page) .studio-start.section-dark { background: #e9e5df; }
body.studio-page:not(.studio-disciplines-page) .studio-start.section-dark .studio-start-options > a { background: #fbfaf7; }

/* 3 - El mapa de orientacion estaba en banda clara pero con las tres tarjetas
   en negro dentro: justo el aspecto que el cliente rechaza. */
body.studio-page:not(.studio-disciplines-page) .studio-practice-map.section-dark .studio-practice-routes { background: rgba(18,18,18,.14); }
body.studio-page:not(.studio-disciplines-page) .studio-practice-map.section-dark .studio-practice-route { color: var(--ink); background: #fbfaf7; }
body.studio-page:not(.studio-disciplines-page) .studio-practice-map.section-dark .studio-practice-route * { color: inherit; }
body.studio-page:not(.studio-disciplines-page) .studio-practice-map.section-dark .studio-practice-route a,
body.studio-page:not(.studio-disciplines-page) .studio-practice-map.section-dark .studio-practice-route span[class] {
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(18,18,18,.16);
}
body.studio-page:not(.studio-disciplines-page) .studio-practice-map.section-dark .studio-practice-route small,
body.studio-page:not(.studio-disciplines-page) .studio-practice-map.section-dark .studio-practice-route b { color: var(--pink-dark); }

/* 4 - Los discos de "Pide cita". Medido: el disco ocupa 210x210 px y el
   logotipo, que es un wordmark apaisado, solo 176x46: el 18,4 % del area. A
   mas grande el circulo, mas vacio. Entra el isotipo, que es cuadrado
   (900x900 y 760x874), y el nombre de la marca baja a texto. El disco pasa a
   blanco porque los simbolos son version positiva. */
.appointment-section .space-logo {
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 56%;
}
body.home-page .appointment-section .space-logo {
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 56%;
}


/* El <img> del wordmark se mantiene en el arbol por compatibilidad, pero ya
   no pinta: el nombre de la marca lo pone el texto de debajo. */
.appointment-section .space-logo img { opacity: 0; }
.appointment-section .marca-nombre {
  display: block;
  margin: 14px 0 -6px;
  font-size: clamp(1.05rem, 1.15vw, 1.25rem);
  font-weight: 800;
  letter-spacing: .01em;
}
.appointment-section .clinic-card .marca-nombre { color: #3d5600; }
.appointment-section .studio-card .marca-nombre { color: var(--pink-dark); }/* ==========================================================================
   FASE2F-HERBOLARIO - 14-09-2026
   Vuelta atras del "contain" y arreglo del problema de raiz.
   Antes: la tarjeta media 716x396 (proporcion 1,81) y la imagen es
   1200x480 (proporcion 2,50). Con `cover` llenaba pero recortaba por la
   derecha (la queja original de Antonio); con `contain` no recortaba pero
   dejaba 108 px de banda vacia arriba y abajo, y ese es el aspecto que no
   convence.
   Ahora la tarjeta adopta la proporcion de la imagen y se centra respecto a
   los dos discos: la imagen llena de borde a borde y no se pierde nada.
   ========================================================================== */
.appointment-section .herbalist-card {
  aspect-ratio: 1200 / 480;
  height: auto;
  min-height: 0;
  align-self: center;
  background: #f1f0e9;
}
.appointment-section .herbalist-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* ==========================================================================
   FASE2H-VELO-HERO - 14-09-2026
   Peticion del cliente: aclarar el velo del slideshow de portada sin perder
   lectura.

   Diagnostico (medido sobre las 5 fotos del slideshow, composicion real del
   degradado sobre cada imagen, contraste WCAG del percentil 95 del fondo bajo
   cada bloque de texto):

     velo anterior     eyebrow  h1/h2   parrafo   foto conservada
     01 collage          3,37    6,68     5,94        35 %
     02 terapia manual   7,87   13,37     9,24        35 %
     03 studio           3,34    5,02     4,76        34 %
     04 tarjetas         9,05    8,70     5,24        32 %
     05 valoracion       3,81    5,45     5,74        32 %

   Es decir: el velo anterior NO solo oscurecia la foto, es que ademas dejaba
   el eyebrow por debajo del minimo AA (4,5:1) en 3 de las 5 escenas. Aclararlo
   sin mas habria empeorado eso.

   Cambio: se retira el velo plano que cubria toda la imagen y el refuerzo
   lateral suave, y se concentra el oscurecimiento en la columna izquierda, que
   es donde va el texto. Resultado medido con el mismo metodo:

     velo nuevo        eyebrow  h1/h2   parrafo   foto conservada
     01 collage          5,64   10,00     7,00        79 %
     02 terapia manual   9,63   15,64    10,34        79 %
     03 studio           5,42    7,20     5,50        78 %
     04 tarjetas        10,25   12,33     6,00        73 %
     05 valoracion       5,95    8,41     8,71        76 %

   Las cinco escenas pasan AA con margen y la fotografia se ve mas del doble de
   clara. Las cifras no cuentan el text-shadow que ya llevaba el texto, asi que
   la lectura real es algo mejor que la medida.

   Solo escritorio y tablet (>= 761px): en movil la copia ocupa todo el ancho y
   un refuerzo lateral no serviria, asi que el bloque de (max-width: 760px) que
   ya existe sigue mandando alli sin cambios.

   Para revertir: borrar este bloque entero.
   ========================================================================== */

/* ==========================================================================
   FASE2I-BRILLO-HERO - 14-09-2026
   Peticion del cliente: «¿se podria dar mas brillo a las imagenes del
   slideshow sin perjudicar la lectura?».

   Habia tres margenes, y el primero era un fallo:

   1 · FALLO DE SELECTOR. El 09-09 se escribio una correccion con el comentario
       «Antes: saturate(.72) contrast(1.06) — se veia apagada», colgada de
       `.hero-sangre .hero-media > img`. Pero el 01-09 la imagen del hero paso
       a ir dentro de <picture> para servir el recorte vertical en movil, con
       lo que el <img> dejo de ser hijo directo de .hero-media. Desde entonces
       esa regla NUNCA se ha aplicado: la que mandaba era
       `.hero-media picture > img { filter: saturate(.72) contrast(1.06) }`.
       Las fotos del hero llevaban dos semanas desaturadas al 72 %.

   2 · La saturacion es casi gratis en terminos de contraste: la matriz de
       saturate() conserva la luminancia, asi que devolverla no oscurece ni
       aclara el fondo bajo el texto. Es de donde sale la mayor parte de la
       mejora visual.

   3 · La franja inferior del velo llegaba al 27 % de la altura cuando las
       pestanas del slideshow solo ocupan el 11 % inferior. Se acorta a 24 % y
       se refuerza justo donde estan las etiquetas: se libera fotografia Y las
       pestanas ganan contraste.

   El brillo puro (brightness) es lo que menos margen tiene: por encima de 1,18
   la escena de Studio empieza a quemar altas luces (pasa del 0,1 % de pixeles
   a blanco puro al 19 %) y el parrafo del hero cae a 4,23:1, por debajo del
   minimo AA. Por eso se queda en 1,12.

   Medido en el navegador sobre la pagina real (contraste WCAG del percentil 95
   del fondo, descartando los pixeles de los glifos y su halo):

                        rotulo   titular   parrafo   pestanas
     escena 01 collage    8,56     9,43      6,29      >= 7,6
     escena 03 studio     9,50     7,69      5,17      >= 7,5
     escena 04 tu cita   10,16    15,57      6,90      >= 7,5
     minimo AA             4,5      3,0       4,5        4,5

   Y la fotografia: claridad media L* de 33,5 a 36,4 en el collage y de 45,4 a
   47,6 en Studio; saturacion media de 67 a 80 sobre 255 en el collage y de 37
   a 46 en Studio.

   Para revertir: borrar este bloque entero.
   ========================================================================== */

/* 1 · El filtro, ahora con el selector que de verdad alcanza a la imagen. */
.hero-sangre .hero-media picture > img,
.hero-sangre .hero-media > img {
  filter: saturate(1.18) contrast(.95) brightness(1.12);
}

/* La escena «Tu cita» es la mas clara de las cinco (marmol y pared en tonos
   altos) y en movil el texto se apila encima, asi que conserva su atenuacion
   propia; se ajusta al nuevo punto de partida. */
.hero-sangre .hero-slide-choice .hero-media picture > img {
  filter: saturate(1.18) contrast(.95) brightness(.90);
}

/* 2 · Franja inferior ajustada a lo que ocupan las pestanas. */

/* ==========================================================================
   FASE4-DIRECCION-CLARA - 15-09-2026
   Responde al encargo del 14-09 (documento de Antonio del 13-09 + docx de
   Alicia + WhatsApp): direccion visual clara y editorial, circulos reales para
   las disciplinas, cabecera con una sola marca principal, guia de primera
   sesion, sesiones privadas e Integracion Funcional. Va al final del fichero
   para ganar por orden de documento; se retira borrando el bloque entero.

   Criterio: el marfil (--paper) es la superficie dominante; el negro se queda
   en cabecera, pie y en la fotografia a sangre del hero. Menos recuadros:
   la jerarquia la dan la tipografia, los filetes y el espacio.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · Tokens locales del bloque
   -------------------------------------------------------------------------- */
:root {
  --f4-marfil: #fbfaf7;
  --f4-papel: #f2f0eb;
  --f4-tono: #e9e5df;
  --f4-linea: rgba(18,18,18,.14);
  --f4-texto-2: #4f4d48;
  --f4-medida: 66ch;
}

/* --------------------------------------------------------------------------
   1 · CABECERA: una marca principal por espacio y un selector secundario
   «Ir a Studio Salux» / «Ir a Clinica Salux» con el isotipo pequeno.
   El logotipo del otro espacio deja de competir en tamano con el principal.
   -------------------------------------------------------------------------- */
.site-header .universe-switch,
.site-header.is-compact .universe-switch {
  display: inline-grid;
  grid-template-columns: 30px auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  align-self: center;
  min-height: 0;
  margin-left: clamp(8px, 1.2vw, 22px);
  padding: 8px 0 8px clamp(12px, 1.5vw, 24px);
  border: 0;
  border-left: 1px solid rgba(255,255,255,.18);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #d9d9d9;
  overflow: visible;
  transform: none;
}
.site-header .universe-switch:hover,
.site-header .universe-switch:focus-visible {
  border-left-color: currentColor;
  background: transparent;
  color: var(--white);
}
/* El isotipo cuadrado sustituye al wordmark apaisado. */
.site-header .universe-switch .universe-switch-logo,
.site-header.is-compact .universe-switch .universe-switch-logo {
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  object-fit: contain;
  opacity: 1;
  transition: transform .22s ease;
}
.site-header .universe-switch:hover .universe-switch-logo { transform: scale(1.06); }
.site-header .universe-switch b,
.site-header.is-compact .universe-switch b {
  display: block;
  grid-column: 2;
  width: auto;
  height: auto;
  align-self: auto;
  justify-self: start;
  padding: 0;
  color: inherit;
  border: 0;
  border-radius: 0;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  transform: none;
}
.site-header .universe-switch b span {
  display: block;
  margin-top: 2px;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: none;
}


.site-header .universe-switch:hover b span { text-decoration: underline; text-underline-offset: 3px; }

/* Marca principal: un poco mas de aire, y Studio al mismo alto optico. */
.site-header .brand-primary-clinic img { height: 46px; }
.site-header .brand-primary-studio img { height: 60px; width: auto; object-fit: contain; }
.site-header.is-compact .brand-primary-clinic img { height: 40px; }
.site-header.is-compact .brand-primary-studio img { height: 50px; }

@media (max-width: 720px) {
  .site-header .universe-switch b { display: block; }
  .site-header .universe-switch b span { display: none; }
  .site-header .universe-switch { grid-template-columns: 26px auto; column-gap: 8px; padding-left: 10px; margin-left: 6px; }
  .site-header .universe-switch .universe-switch-logo { width: 26px; height: 26px; }
}
@media (max-width: 420px) {
  .site-header .universe-switch b { display: none; }
}

/* --------------------------------------------------------------------------
   2 · SUPERFICIES: interior de las paginas de Studio en claro. Solo quedan
   oscuros cabecera, pie y el hero fotografico.
   -------------------------------------------------------------------------- */
body.studio-content-page .inner-hero.section-dark,
body.content-page .inner-hero.section-dark,
.inner-hero-claro {
  color: var(--ink);
  background: var(--f4-marfil);
  border-bottom: 1px solid var(--f4-linea);
}
body.studio-content-page .inner-hero.section-dark .breadcrumbs,
body.content-page .inner-hero.section-dark .breadcrumbs,
.inner-hero-claro .breadcrumbs { color: #6f6d68; }
body.studio-content-page .inner-hero.section-dark .breadcrumbs a:hover,
body.content-page .inner-hero.section-dark .breadcrumbs a:hover,
.inner-hero-claro .breadcrumbs a:hover { color: var(--ink); }
body.studio-content-page .inner-hero.section-dark .eyebrow,
body.content-page .inner-hero.section-dark .eyebrow,
.inner-hero-claro .eyebrow { color: var(--green-dark); }
body.studio-content-page .inner-hero.section-dark .eyebrow-pink,
.inner-hero-claro .eyebrow-pink { color: var(--pink-dark); }
body.studio-content-page .inner-hero.section-dark .inner-summary,
body.content-page .inner-hero.section-dark .inner-summary,
.inner-hero-claro .inner-summary { color: var(--f4-texto-2); }
body.studio-content-page .inner-hero.section-dark .article-meta,
body.content-page .inner-hero.section-dark .article-meta { color: #6f6d68; }
body.studio-content-page .inner-hero.section-dark .button-studio,
.inner-hero-claro .button-studio { color: var(--pink-dark); }
body.studio-content-page .inner-hero.section-dark .button-studio:hover,
.inner-hero-claro .button-studio:hover { color: var(--white); background: var(--pink-dark); }
body.content-page .inner-hero.section-dark .button-primary { color: var(--green-dark); }
body.content-page .inner-hero.section-dark .button-primary:hover { color: var(--white); background: var(--green-dark); }
body.studio-content-page .inner-hero.section-dark .inner-hero-media,
body.content-page .inner-hero.section-dark .inner-hero-media,
.inner-hero-claro .inner-hero-media { background: var(--f4-tono); }
body.studio-content-page .inner-hero-media img,
.inner-hero-claro .inner-hero-media img { filter: saturate(1) contrast(1.02); }
/* Los retratos historicos y las paginas legales conservan su plantilla. */
body.legal-page .inner-hero.section-dark { color: var(--white); background: var(--black); }
body.legal-page .inner-hero.section-dark .breadcrumbs { color: #9c9c9c; }
body.legal-page .inner-hero.section-dark .inner-summary { color: #ddd; }

/* Bloques que eran negros dentro del armazon de disciplina. */
.studio-practice-session,
.studio-practice-next,
body.studio-page .studio-directory,
body.studio-page .studio-practice-map,
body.studio-page .studio-start,
body.studio-page .studio-direct-actions,
body.studio-page .disciplines-hero,
body.studio-content-page .studio-profile-origin,
body.studio-content-page .studio-profile-experience,
body.studio-schedule-page .schedule-note,
body.studio-contact-page .contact-guidance.section-dark {
  color: var(--ink);
  background: var(--f4-papel);
  --line: var(--f4-linea);
}
.studio-practice-session { background: var(--f4-tono); }
.studio-practice-session > p { color: var(--ink); }
.studio-practice-next { background: var(--f4-marfil); border-top: 1px solid var(--f4-linea); }
.studio-practice-next > div { border-color: var(--f4-linea); }
.studio-practice-next a { color: var(--ink); border-color: var(--f4-linea); }
.studio-practice-next a:hover { color: var(--pink-dark); background: rgba(236,25,134,.06); }
.studio-practice-next a span { color: var(--pink-dark); }
.studio-practice-before > div:last-child > p:first-child { margin: 0; padding: clamp(28px, 4vw, 56px); border-left: 3px solid var(--pink); background: var(--f4-marfil); font-size: 1.1rem; line-height: 1.65; }
.studio-practice-before-guia { margin: 18px 0 0; padding-left: clamp(28px, 4vw, 56px); font-weight: 700; }
.studio-practice-before-guia a { color: var(--pink-dark); border-bottom: 1px solid currentColor; }
.studio-practice-before-guia a:hover { color: var(--ink); }
.studio-practice-before > div:last-child { align-self: end; }

/* Sin tarjetas equivalentes: el bloque «que trabajamos» se lee por filetes. */
.studio-practice-focus > div { border-left: 0; }
.studio-practice-focus article { min-height: 0; padding: 30px clamp(18px, 2.4vw, 40px) 36px 0; border-right: 0; border-bottom: 0; border-top: 2px solid var(--ink); }
.studio-practice-focus article + article { margin-left: clamp(18px, 2.4vw, 40px); }
.studio-practice-focus article > span { color: var(--pink-dark); }
.studio-practice-focus h3 { margin: 26px 0 14px; }
.studio-practice-focus article p { max-width: 36ch; }

/* Contraste de rotulos rosa/verde sobre papel. */
body.studio-page .label-pink,
body.studio-content-page .label-pink,
body.studio-page .studio-directory .label,
body.studio-page .studio-practice-map .label,
body.studio-page .studio-start .label { color: var(--pink-dark); }
body.studio-page .studio-directory .button-studio,
body.studio-page .studio-start .button-studio,
body.studio-page .studio-direct-actions strong,
body.studio-content-page .studio-practice .button-studio { color: var(--pink-dark); }
body.studio-page .studio-directory .button-studio:hover,
body.studio-page .studio-start .button-studio:hover,
body.studio-content-page .studio-practice .button-studio:hover { color: var(--white); background: var(--pink-dark); }
body.studio-page .studio-practice-map > header h2 { color: var(--ink); }
body.studio-page .studio-practice-map > header > p,
body.studio-page .studio-practice-map > footer,
body.studio-page .studio-directory .section-heading > p,
body.studio-page .studio-start header > p:last-child,
body.studio-page .studio-start-options span,
body.studio-page .studio-start aside > span,
body.studio-page .studio-direct-actions span,
body.studio-page .disciplines-hero-copy > p:not(.eyebrow) { color: var(--f4-texto-2); }
body.studio-page .studio-practice-map > footer a,
body.studio-page .studio-start aside > a:not(.button) { color: var(--ink); }
body.studio-page .studio-practice-map .studio-practice-routes { gap: clamp(18px, 2vw, 32px); background: transparent; border: 0; }
body.studio-page .studio-practice-map .studio-practice-route { color: var(--ink); background: var(--f4-marfil); border-top: 2px solid var(--ink); }
body.studio-page .studio-practice-map .studio-practice-route::before { display: none; }
body.studio-page .studio-practice-map .studio-practice-route * { color: inherit; }
body.studio-page .studio-practice-map .studio-practice-route small,
body.studio-page .studio-practice-map .studio-practice-route b,
body.studio-page .studio-practice-map .studio-practice-route i { color: var(--pink-dark); }
body.studio-page .studio-practice-map .studio-practice-route a { color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--f4-linea); }
body.studio-page .studio-practice-map .studio-practice-route a:hover { color: var(--pink-dark); }
body.studio-page .studio-practice-map .studio-practice-route span[class] { background: transparent; border: 0; }
body.studio-page .studio-start-options { gap: 2px; background: var(--f4-linea); }
body.studio-page .studio-start-options > a { background: var(--f4-marfil); }
body.studio-page .studio-start-options > a:hover,
body.studio-page .studio-start-options > a:focus-visible { background: rgba(236,25,134,.07); }
body.studio-page .studio-start-options small,
body.studio-page .studio-start-options b { color: var(--pink-dark); }
body.studio-page .studio-start aside { border-left-color: var(--f4-linea); }
body.studio-page .studio-direct-actions { border-top: 1px solid var(--f4-linea); }
body.studio-page .studio-direct-actions > a { border-right: 1px solid var(--f4-linea); border-bottom: 1px solid var(--f4-linea); }
body.studio-page .studio-direct-actions > a:hover { background: rgba(236,25,134,.06); }
body.studio-page .studio-direct-actions b { color: var(--pink-dark); }
body.studio-page .disciplines-hero { border-bottom: 1px solid var(--f4-linea); }
body.studio-page .disciplines-hero .breadcrumbs { color: #6f6d68; }
body.studio-page .disciplines-hero .eyebrow-pink { color: var(--pink-dark); }
body.studio-page .disciplines-hero .button-studio { color: var(--pink-dark); }
body.studio-page .disciplines-hero .button-studio:hover { color: var(--white); background: var(--pink-dark); }
body.studio-page .disciplines-hero figure::after { display: none; }
body.studio-page .disciplines-hero figure img { filter: saturate(1) contrast(1.02); }
body.studio-page .disciplines-hero figcaption { color: rgba(255,255,255,.9); text-shadow: 0 1px 6px rgba(0,0,0,.45); }
body.studio-content-page .studio-profile-origin .label-pink,
body.studio-content-page .studio-profile-experience .label-pink { color: var(--pink-dark); }
body.studio-content-page .studio-profile-origin p,
body.studio-content-page .studio-profile-experience p { color: var(--f4-texto-2); }
body.studio-content-page .studio-profile-experience ol li { border-color: var(--f4-linea); }
body.studio-content-page .studio-profile-experience span { color: var(--pink-dark); }
body.studio-schedule-page .schedule-note > div:last-child p { color: var(--f4-texto-2); }
body.studio-schedule-page .schedule-note .button-studio { color: var(--pink-dark); }
body.studio-schedule-page .schedule-note .button-studio:hover { color: var(--white); background: var(--pink-dark); }
.schedule-note-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
body.studio-contact-page .contact-guidance.section-dark p { color: var(--f4-texto-2); }
body.studio-contact-page .contact-guidance.section-dark a:not(.button) { color: var(--pink-dark); border-bottom: 1px solid currentColor; }
body.studio-contact-page .contact-guidance.section-dark .button-studio { color: var(--pink-dark); }
body.studio-contact-page .contact-guidance.section-dark .button-studio:hover { color: var(--white); background: var(--pink-dark); }

/* Los discos de «Pide cita» salian NEGROS en las paginas de Studio: la regla
   de la variante clara (body.studio-page ... .space-logo {background:#101010})
   ganaba por especificidad a la de FASE2E. Se iguala en todas las paginas. */
.appointment-section .space-logo,
body.home-page .appointment-section .space-logo,
body.studio-page:not(.studio-disciplines-page) .appointment-section .space-logo,
body.studio-page .appointment-section .space-logo,
body.studio-content-page .appointment-section .space-logo {
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 56%;
  border-width: 3px;
}
/* «Pide cita» claro en todas las paginas, no solo en las dos portadas. */
.appointment-section.section-dark {
  color: var(--ink);
  background: var(--f4-papel);
  --line: var(--f4-linea);
}
.appointment-section.section-dark .label { color: var(--green-dark); }
.appointment-section.section-dark .label-pink { color: var(--pink-dark); }
.appointment-section.section-dark .appointment-copy p,
.appointment-section.section-dark .space-card > span:not(.space-logo) { color: var(--f4-texto-2); }
.appointment-section.section-dark .button-light,
.appointment-section.section-dark .button-light span { color: var(--green-dark); }
.appointment-section .herbalist-card { border: 1px solid var(--f4-linea); }
.appointment-section .herbalist-card .herbalist-hours { color: var(--f4-texto-2); }

/* --------------------------------------------------------------------------
   3 · DISCIPLINAS EN CIRCULO. Contenedor 1:1, circulo real (border-radius 50%
   + overflow hidden), object-fit cover, object-position por imagen en el
   atributo style. Nombre, descripcion y enlace FUERA del circulo, sin tarjeta.
   Composicion alterna: los circulos pares bajan un poco en escritorio.
   -------------------------------------------------------------------------- */
.disciplinas-directorio { padding: clamp(64px, 8vw, 118px) max(var(--pad), calc((100% - var(--container)) / 2)) clamp(56px, 7vw, 100px); }
.disciplinas-directorio .section-heading { margin-bottom: clamp(36px, 5vw, 72px); }
.disciplinas-circulos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: clamp(22px, 3vw, 48px);
  row-gap: clamp(44px, 5vw, 72px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.disciplinas-circulos > li { flex: 0 1 calc((100% - 3 * clamp(22px, 3vw, 48px)) / 4); }
.disciplinas-circulos-familia { justify-content: flex-start; row-gap: clamp(28px, 3vw, 44px); }
.disciplinas-circulos-familia > li { flex-basis: calc((100% - 4 * clamp(22px, 3vw, 48px)) / 5); }
.disciplina-circulo { min-width: 0; }
.disciplinas-circulos:not(.disciplinas-circulos-familia) .disciplina-circulo:nth-child(even) { padding-top: clamp(0px, 4vw, 64px); }
.disciplina-circulo > a { position: relative; display: block; color: var(--ink); text-align: center; }
.disciplina-circulo figure {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 1 / 1;
  margin: 0 auto 22px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--f4-tono);
  isolation: isolate;
  transition: box-shadow .28s ease, transform .28s ease;
}
.disciplina-circulo figure::after {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(18,18,18,.08);
  pointer-events: none;
}
.disciplina-circulo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.disciplina-circulo-num { display: block; margin-bottom: 6px; color: var(--pink-dark); font-size: .7rem; font-weight: 800; letter-spacing: .14em; }
.disciplina-circulo h3 { margin: 0 0 8px; font-size: clamp(1.15rem, 1.35vw, 1.4rem); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.disciplina-circulo p { max-width: 28ch; margin: 0 auto 12px; color: var(--f4-texto-2); font-size: .9rem; line-height: 1.5; text-wrap: pretty; }
.disciplina-circulo-link { display: inline-block; color: var(--ink); font-size: .82rem; font-weight: 700; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.disciplina-circulo-link b { font-weight: 700; }
.disciplina-circulo > a:hover figure,
.disciplina-circulo > a:focus-visible figure { box-shadow: 0 0 0 6px rgba(236,25,134,.16); transform: translateY(-4px); }
.disciplina-circulo-pilates > a:hover figure,
.disciplina-circulo-pilates > a:focus-visible figure { box-shadow: 0 0 0 6px rgba(143,189,24,.22); }
.disciplina-circulo > a:hover img { transform: scale(1.05); }
.disciplina-circulo > a:hover .disciplina-circulo-link,
.disciplina-circulo > a:focus-visible .disciplina-circulo-link { color: var(--pink-dark); border-bottom-color: currentColor; }
.disciplina-circulo > a:focus-visible { outline: none; }
.disciplina-circulo > a:focus-visible h3 { text-decoration: underline; text-underline-offset: 4px; }
.disciplina-circulo > a:active figure { transform: translateY(-1px); }
.disciplinas-directorio-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: clamp(40px, 5vw, 64px); }
.disciplinas-directorio-acciones .text-link { color: var(--ink); }

/* Pagina de disciplinas: las familias dejan de ser cajas grises. */
body.studio-page .discipline-groups { grid-template-columns: 1fr; gap: clamp(44px, 6vw, 88px); }
body.studio-page .discipline-group { padding: clamp(28px, 3vw, 44px) 0 0; background: transparent; border-top: 2px solid var(--ink); }
body.studio-page .discipline-group > header { grid-template-columns: 48px minmax(0, 1fr); min-height: 0; margin-bottom: clamp(22px, 3vw, 36px); padding-bottom: 0; }
body.studio-page .discipline-group h2 { font-size: clamp(1.6rem, 2.4vw, 2.4rem); }
body.studio-page .discipline-group header p { max-width: 62ch; font-size: .96rem; color: var(--f4-texto-2); }
body.studio-page .discipline-group .disciplina-circulo figure { width: min(100%, 220px); }

@media (max-width: 1100px) {
  .disciplinas-circulos > li,
  .disciplinas-circulos-familia > li { flex-basis: calc((100% - 2 * clamp(22px, 3vw, 48px)) / 3); }
  .disciplinas-circulos:not(.disciplinas-circulos-familia) .disciplina-circulo:nth-child(even) { padding-top: 0; }
  .disciplinas-circulos:not(.disciplinas-circulos-familia) .disciplina-circulo:nth-child(3n+2) { padding-top: clamp(0px, 4vw, 48px); }
}
@media (max-width: 700px) {
  .disciplinas-circulos { column-gap: 18px; row-gap: 34px; }
  .disciplinas-circulos > li,
  .disciplinas-circulos-familia > li { flex-basis: calc((100% - 18px) / 2); }
  .disciplinas-circulos:not(.disciplinas-circulos-familia) .disciplina-circulo:nth-child(n) { padding-top: 0; }
  .disciplina-circulo figure { width: min(100%, 190px); margin-bottom: 14px; }
  .disciplina-circulo h3 { font-size: 1.05rem; }
  .disciplina-circulo p { font-size: .84rem; }
  body.studio-page .discipline-group .disciplina-circulo figure { width: min(100%, 170px); }
}

/* --------------------------------------------------------------------------
   4 · FICHA DE DISCIPLINA: la descripcion del cliente, primero y sin acordeon.
   -------------------------------------------------------------------------- */
.studio-descripcion {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(320px, 1.2fr);
  gap: clamp(40px, 7vw, 120px);
  width: min(100%, var(--container));
  margin: 0 auto;
  padding: clamp(60px, 8vw, 110px) var(--pad) clamp(48px, 6vw, 84px);
  border-bottom: 1px solid var(--f4-linea);
}
.studio-descripcion-cabecera h2 { margin: 0; font-size: clamp(2.2rem, 4.2vw, 4.6rem); line-height: .96; letter-spacing: -.055em; text-wrap: balance; }
.studio-descripcion-texto { align-self: end; max-width: var(--f4-medida); }
.studio-descripcion-texto p { margin: 0 0 1.1em; font-size: clamp(1.12rem, 1.5vw, 1.42rem); line-height: 1.6; letter-spacing: -.01em; text-wrap: pretty; }
.studio-descripcion-texto p:last-child { margin-bottom: 0; }
.studio-descripcion-texto strong { color: var(--pink-dark); }
.studio-descripcion-texto ul { margin: 0 0 1.1em; padding-left: 1.2em; }
.studio-descripcion-texto li { margin: 0 0 .6em; font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.55; }
.studio-descripcion-texto li::marker { color: var(--pink-dark); }
/* Cuando la descripcion es el texto migrado de WordPress: se neutraliza la
   maquetacion Elementor heredada para que se lea como un parrafo editorial. */
.studio-descripcion-texto .legacy-content-descripcion .elementor-widget-text-editor > div > p:first-child { margin: 0 0 1.1em; color: var(--ink); font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: none; }
.studio-descripcion-texto .legacy-content-descripcion .elementor-widget-text-editor > div > p:nth-child(2) { font-size: inherit; line-height: inherit; }
.studio-descripcion-texto .legacy-content-descripcion .elementor-widget-image,
.studio-descripcion-texto .legacy-content-descripcion .legacy-media,
.studio-descripcion-texto .legacy-content-descripcion figure,
.studio-descripcion-texto .legacy-content-descripcion img { display: none; }
.studio-descripcion-texto .legacy-content-descripcion .elementor-section,
.studio-descripcion-texto .legacy-content-descripcion .elementor-container,
.studio-descripcion-texto .legacy-content-descripcion .elementor-column,
.studio-descripcion-texto .legacy-content-descripcion .elementor-widget-wrap { display: block; width: auto; margin: 0; padding: 0; background: transparent; }
.studio-descripcion-texto .legacy-content-descripcion p:has(+ ul) { margin: 1.2em 0 .6em; font-size: clamp(1.15rem, 1.5vw, 1.4rem); }
.studio-descripcion-texto .legacy-content-descripcion ul { display: block; margin: 0 0 1.1em; padding-left: 1.2em; }
.studio-descripcion-texto .legacy-content-descripcion li { min-height: 0; margin: 0 0 .5em; padding: 0; background: transparent; border: 0; }
.studio-descripcion-texto .legacy-content-descripcion li::before { display: none; }
.studio-descripcion-texto .legacy-content-descripcion h2,
.studio-descripcion-texto .legacy-content-descripcion h3 { margin: 1.2em 0 .5em; font-size: clamp(1.25rem, 1.6vw, 1.55rem); line-height: 1.2; }
.studio-descripcion-texto .legacy-content-descripcion .ancla-historica,
.studio-descripcion-texto .legacy-content-descripcion .legacy-anchor { display: none; }
.studio-descripcion-texto .legacy-content-descripcion .contact-fallback { display: none; }
@media (max-width: 900px) {
  .studio-descripcion { grid-template-columns: 1fr; gap: 28px; }
}

/* Etiqueta y titulo del bloque «como la trabajamos» pierden peso frente a la
   descripcion: bajan un escalon. */
.studio-practice-intro h2 { font-size: clamp(2rem, 3.6vw, 4rem); }
.studio-practice-focus h2,
.studio-practice-session h2,
.studio-practice-before h2,
.studio-practice-faq h2 { font-size: clamp(2rem, 3.8vw, 4.2rem); }

/* --------------------------------------------------------------------------
   5 · PORTADA DE STUDIO: lema, texto de Alicia, aviso de primera sesion.
   -------------------------------------------------------------------------- */
.studio-lema { margin: 0 0 18px; color: var(--pink-dark); font-size: clamp(.86rem, 1vw, 1rem); font-weight: 750; letter-spacing: .04em; }
.studio-manifesto h2 { text-wrap: balance; }
.studio-manifesto-texto { max-width: var(--f4-medida); margin-top: 26px; column-gap: 40px; }
.studio-manifesto-texto p { margin: 0 0 1em; color: var(--f4-texto-2); font-size: 1rem; line-height: 1.7; text-wrap: pretty; }
.studio-manifesto .lead { max-width: var(--f4-medida); }
.studio-primera-sesion-aviso {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  width: min(100%, var(--container));
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) var(--pad);
  border-top: 1px solid var(--f4-linea);
  border-bottom: 1px solid var(--f4-linea);
}
.studio-primera-sesion-aviso h2 { max-width: 620px; margin: 0; font-size: clamp(1.9rem, 3vw, 3.2rem); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.studio-primera-sesion-aviso p { max-width: 48ch; margin: 0 0 22px; color: var(--f4-texto-2); }
.studio-primera-sesion-aviso .button-studio { color: var(--pink-dark); }
.studio-primera-sesion-aviso .button-studio:hover { color: var(--white); background: var(--pink-dark); }
@media (max-width: 900px) {
  .studio-primera-sesion-aviso { grid-template-columns: 1fr; gap: 24px; }
}

/* Hero de Studio: el titular no vuelve a caer sobre un logotipo porque la
   escena 02 usa la version limpia; aun asi se acota el ancho del texto. */
.hero-studio-claro .hero-copy h1,
.hero-studio-claro .hero-copy h2 { max-width: 12ch; }
.hero-studio-claro .hero-copy > p:not(.eyebrow) { max-width: 44ch; }

/* --------------------------------------------------------------------------
   6 · GUIA DE PRIMERA SESION
   -------------------------------------------------------------------------- */
.primera-sesion-comun,
.primera-sesion-por-actividad,
.primera-sesion-cierre { width: min(100%, var(--container)); margin: 0 auto; padding: clamp(56px, 7vw, 100px) var(--pad); }
.primera-sesion-comun > header h2,
.primera-sesion-por-actividad > header h2,
.primera-sesion-cierre h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 4rem); line-height: .98; letter-spacing: -.05em; text-wrap: balance; }
.primera-sesion-comun { border-bottom: 1px solid var(--f4-linea); }
.primera-sesion-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
.primera-sesion-pasos li { display: grid; gap: 14px; padding-top: 22px; border-top: 2px solid var(--ink); }
.primera-sesion-pasos li > span { color: var(--pink-dark); font-size: .74rem; font-weight: 800; letter-spacing: .14em; }
.primera-sesion-pasos h3 { margin: 0 0 10px; font-size: clamp(1.15rem, 1.4vw, 1.4rem); line-height: 1.15; letter-spacing: -.02em; }
.primera-sesion-pasos p { margin: 0; color: var(--f4-texto-2); font-size: .96rem; line-height: 1.6; text-wrap: pretty; }
.primera-sesion-por-actividad > header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: clamp(28px, 5vw, 80px); align-items: end; margin-bottom: clamp(30px, 4vw, 52px); }
.primera-sesion-por-actividad > header > p { max-width: 46ch; margin: 0; color: var(--f4-texto-2); }
.primera-sesion-por-actividad > header strong { color: var(--ink); }
.primera-sesion-indice { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.primera-sesion-indice a { padding: 9px 16px; border: 1px solid var(--f4-linea); border-radius: 999px; font-size: .84rem; font-weight: 700; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.primera-sesion-indice a:hover,
.primera-sesion-indice a:focus-visible { color: var(--white); background: var(--pink-dark); border-color: var(--pink-dark); }
.primera-sesion-actividades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px) clamp(28px, 4vw, 64px); }
.primera-sesion-actividad { padding: 26px 0 30px; border-top: 2px solid var(--ink); scroll-margin-top: 120px; }
.primera-sesion-actividad h3 { margin: 0 0 18px; font-size: clamp(1.4rem, 1.9vw, 2rem); line-height: 1.05; letter-spacing: -.035em; }
.primera-sesion-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px 28px; }
.primera-sesion-lista p { margin: 0 0 8px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.primera-sesion-lista.is-obligatorio p { color: var(--pink-dark); }
.primera-sesion-lista.is-recomendado p { color: var(--green-dark); }
.primera-sesion-lista p b { display: inline-block; margin-right: 6px; font-size: .9em; }
.primera-sesion-lista ul { margin: 0; padding-left: 1.1em; }
.primera-sesion-lista li { margin: 0 0 8px; color: var(--ink); line-height: 1.55; text-wrap: pretty; }
.primera-sesion-lista.is-obligatorio li { font-weight: 700; }
.primera-sesion-lista.is-obligatorio li::marker { color: var(--pink-dark); }
.primera-sesion-lista.is-recomendado li::marker { color: var(--green-dark); }
.primera-sesion-enlaces { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; }
.primera-sesion-enlaces a { color: var(--pink-dark); font-size: .86rem; font-weight: 700; border-bottom: 1px solid transparent; }
.primera-sesion-enlaces a:hover { border-bottom-color: currentColor; }
.primera-sesion-cierre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); gap: clamp(28px, 6vw, 96px); align-items: center; background: var(--f4-tono); width: 100%; max-width: none; padding-left: max(var(--pad), calc((100% - var(--container)) / 2)); padding-right: max(var(--pad), calc((100% - var(--container)) / 2)); }
.primera-sesion-cierre p { max-width: 48ch; margin: 0 0 22px; color: var(--f4-texto-2); }
.primera-sesion-cierre-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.primera-sesion-cierre .button-studio { color: var(--pink-dark); }
.primera-sesion-cierre .button-studio:hover { color: var(--white); background: var(--pink-dark); }
@media (max-width: 1000px) {
  .primera-sesion-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .primera-sesion-pasos,
  .primera-sesion-actividades { grid-template-columns: 1fr; }
  .primera-sesion-por-actividad > header,
  .primera-sesion-cierre { grid-template-columns: 1fr; }
  .primera-sesion-actividad { scroll-margin-top: 90px; }
}

/* --------------------------------------------------------------------------
   7 · SESIONES PRIVADAS E INTEGRACION FUNCIONAL
   -------------------------------------------------------------------------- */
.studio-privadas-ambitos,
.studio-integracion-funcional { width: min(100%, var(--container)); margin: 0 auto; padding: clamp(56px, 7vw, 100px) var(--pad); }
.studio-privadas-ambitos > header h2,
.studio-integracion-funcional > header h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 4rem); line-height: .98; letter-spacing: -.05em; text-wrap: balance; }
.studio-privadas-ambitos { border-bottom: 1px solid var(--f4-linea); }
.studio-privadas-ambitos ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px) clamp(20px, 2.5vw, 40px); margin: clamp(30px, 4vw, 52px) 0 0; padding: 0; list-style: none; }
.studio-privadas-ambitos li { padding-top: 18px; border-top: 2px solid var(--ink); }
.studio-privadas-ambitos li > span { display: block; margin-bottom: 14px; color: var(--pink-dark); font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.studio-privadas-ambitos h3 { margin: 0 0 8px; font-size: clamp(1.1rem, 1.3vw, 1.3rem); line-height: 1.15; letter-spacing: -.02em; }
.studio-privadas-ambitos p { margin: 0; color: var(--f4-texto-2); font-size: .92rem; line-height: 1.55; }
.studio-integracion-funcional { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px) clamp(32px, 6vw, 96px); background: var(--f4-marfil); width: 100%; max-width: none; padding-left: max(var(--pad), calc((100% - var(--container)) / 2)); padding-right: max(var(--pad), calc((100% - var(--container)) / 2)); scroll-margin-top: 110px; }
.studio-integracion-funcional > header { grid-column: 1 / -1; max-width: 820px; }
.studio-if-formato p { max-width: var(--f4-medida); margin: 0 0 1em; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.6; text-wrap: pretty; }
.studio-if-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--f4-linea); }
.studio-if-datos div { margin: 0; }
.studio-if-datos dt { margin: 0 0 4px; color: var(--pink-dark); font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.studio-if-datos dd { margin: 0; font-size: 1.05rem; font-weight: 700; }
.studio-if-fases h3,
.studio-if-dialogo h3,
.studio-if-indicado h3 { margin: 0 0 18px; font-size: clamp(1.35rem, 1.8vw, 1.9rem); line-height: 1.1; letter-spacing: -.03em; }
.studio-if-fases ol { margin: 0; padding: 0; list-style: none; }
.studio-if-fases li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--f4-linea); }
.studio-if-fases li > span { color: var(--pink-dark); font-size: .74rem; font-weight: 800; letter-spacing: .14em; padding-top: 4px; }
.studio-if-fases li h3 { margin: 0 0 6px; font-size: 1.1rem; letter-spacing: -.015em; }
.studio-if-fases li p { margin: 0; color: var(--f4-texto-2); font-size: .95rem; line-height: 1.6; text-wrap: pretty; }
.studio-if-dialogo p,
.studio-if-indicado li { color: var(--ink); line-height: 1.65; text-wrap: pretty; }
.studio-if-dialogo p { max-width: var(--f4-medida); margin: 0 0 1em; }
.studio-if-dialogo { padding: clamp(24px, 3vw, 40px); border-left: 3px solid var(--pink); background: var(--f4-papel); }
.studio-if-indicado ul { margin: 0; padding-left: 1.15em; }
.studio-if-indicado li { margin: 0 0 10px; }
.studio-if-indicado li::marker { color: var(--pink-dark); }
.studio-if-aviso { max-width: var(--f4-medida); margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--f4-linea); color: var(--f4-texto-2); font-size: .9rem; line-height: 1.55; }
@media (max-width: 1000px) {
  .studio-privadas-ambitos ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .studio-integracion-funcional { grid-template-columns: 1fr; }
  .studio-privadas-ambitos ol { grid-template-columns: 1fr; }
  .studio-if-datos { grid-template-columns: 1fr 1fr; }
}

/* Ficha de Alicia en /studio-salux/equipo-studio-salux/. */
.studio-profile-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 28px; }
.studio-profile-acciones .button-studio { color: var(--pink-dark); }
.studio-profile-acciones .button-studio:hover { color: var(--white); background: var(--pink-dark); }
.studio-profile-facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* --------------------------------------------------------------------------
   8 · MENOS FLECHAS DECORATIVAS. La flecha se queda donde comunica navegacion
   (enlaces «siguiente», acciones directas); desaparece en las tarjetas del
   equipo y en los enlaces del mapa de orientacion, donde solo era adorno.
   -------------------------------------------------------------------------- */
body.home-page .team-collage-person > a > div b,
.team-ensemble-meta b,
body.studio-page .studio-practice-route nav a b { display: none; }

/* --------------------------------------------------------------------------
   9 · TIPOGRAFIA: medidas de lectura y titulares sin viudas.
   -------------------------------------------------------------------------- */
.studio-practice-intro > p,
.studio-practice-session > p,
.studio-practice-before > div > p:first-child,
.studio-practice-faq details p,
.studio-manifesto .lead,
.studio-vision-copy .lead { max-width: var(--f4-medida); text-wrap: pretty; }
.studio-practice-intro h2,
.studio-practice-focus h2,
.studio-practice-session h2,
.studio-practice-before h2,
.studio-practice-faq h2,
.studio-vision-copy h2,
.studio-practice-map > header h2,
.studio-manifesto h2,
.inner-hero h1 { text-wrap: balance; }

/* --------------------------------------------------------------------------
   10 · FOCO VISIBLE en superficies claras (el anillo rosa sobre marfil).
   -------------------------------------------------------------------------- */
body.studio-page :focus-visible,
body.studio-content-page :focus-visible { outline: 3px solid var(--pink-dark); outline-offset: 4px; }

/* FASE4 · La guia de lectura de Studio pierde el degradado rosa: superficie
   de marfil con el acento reservado a los filetes. */
.guia-lectura-studio {
  background: var(--f4-marfil);
  border-top: 1px solid var(--f4-linea);
  border-bottom: 1px solid var(--f4-linea);
}
.guia-lectura { background: var(--f4-marfil); }

/* FASE4 · Hero de portada: el texto no cae sobre ningun logotipo integrado.
   - Escena 04 (tarjetas) y 05 (valoracion): la fotografia se ancla a la
     izquierda, de modo que las tarjetas y las marcas quedan a la derecha del
     bloque de texto en cualquier ancho de escritorio.
   - Se retiran las curvas de color superpuestas (hero-chroma), que cruzaban
     las fotografias y competian con el contenido; las motas se quedan. */
@media (min-width: 761px) {
  .hero-sangre .hero-slide-choice .hero-media picture > img,
  .hero-sangre .hero-slide-pain .hero-media picture > img { object-position: 0% 50%; }
}
.hero-chroma { display: none; }
.hero-sangre .hero-copy > p:not(.eyebrow) { max-width: 46ch; }
.hero-sangre .hero-copy > p:not(.eyebrow) strong { color: var(--white); font-weight: 750; }

/* FASE4 · Los botones flotantes (WhatsApp y volver arriba) tapaban el boton
   de pausa del slideshow, abajo a la derecha. Los controles del hero dejan
   sitio a la columna flotante en escritorio. */
@media (min-width: 761px) {
  .hero-controls { padding-right: calc(var(--pad) + 76px); }
}

/* FASE4 · Portada: las dos entradas «Clinica / Studio» dejan el degradado
   pastel y el borde de color grueso. Superficie de marfil, un filete de marca
   arriba y el isotipo como marca de agua discreta. Los rotulos CLINICA SALUX /
   STUDIO SALUX subrayados (peticion del 13-09) se conservan. */
.home-page .space-editorial-card,
.home-page .space-editorial-card.studio {
  background: var(--f4-marfil);
  background-image: none;
  border: 1px solid var(--f4-linea);
  border-radius: 0;
  box-shadow: none;
}
.home-page .space-editorial-card::after { width: 100%; height: 3px; }
.home-page .space-editorial-card .space-card-watermark,
.home-page .space-editorial-card.studio .space-card-watermark { opacity: .07; filter: grayscale(1); mix-blend-mode: multiply; }
.home-page .space-editorial-card:hover,
.home-page .space-editorial-card:focus-visible { background: #fff; border-color: rgba(18,18,18,.28); box-shadow: 0 18px 44px rgba(50,45,37,.08); transform: translateY(-3px); }
/* Guia de fisioterapia: la tarjeta central era negra; pasa a marfil con el
   acento rosa en el filete. */
.home-guide-card-2 { color: var(--ink); background: var(--f4-marfil); border-color: var(--f4-linea); box-shadow: 0 20px 52px rgba(94,82,60,.13), 0 3px 10px rgba(94,82,60,.07); }
.home-guide-card-2 .home-guide-index { color: var(--pink-dark); }
.home-guide-card-2 .home-guide-index small { color: #777; }
.home-guide-card-2 p { color: #3f3f3f; }
.home-guide-card-2 h3 { color: var(--ink); }
.home-guide-card-3 { background: var(--f4-marfil); border-color: var(--f4-linea); }

/* FASE4 · Ficha de Alicia: los dos bloques que eran negros, en claro. */
body.studio-content-page .studio-profile-origin h2,
body.studio-content-page .studio-profile-experience h2,
body.studio-content-page .studio-profile-experience h3 { color: var(--ink); }
body.studio-content-page .studio-profile-origin > div:last-child { border-top-color: rgba(168,11,97,.45); }
body.studio-content-page .studio-profile-origin > div:last-child p,
body.studio-content-page .studio-profile-experience li { color: var(--f4-texto-2); }
body.studio-content-page .studio-profile-experience ol,
body.studio-content-page .studio-profile-experience li { border-color: var(--f4-linea); }
body.studio-content-page .studio-profile-experience li > span { color: var(--pink-dark); }

/* FASE4 · Fichas del equipo (/equipo/<nombre>/): cabecera y navegacion entre
   profesionales en claro. El retrato circular con sus arcos se conserva. */
.profile-compact-hero,
.profile-compact-hero.is-studio-profile {
  --profile-accent: var(--green-dark);
  color: var(--ink);
  background: var(--f4-marfil);
  border-bottom: 1px solid var(--f4-linea);
}
.profile-compact-hero.is-studio-profile { --profile-accent: var(--pink-dark); }
.profile-compact-hero::after { border-color: color-mix(in srgb, var(--profile-accent) 22%, transparent); }
.profile-compact-hero .breadcrumbs { color: #6f6d68; }
.profile-compact-hero .breadcrumbs a:hover { color: var(--ink); }
.profile-back-link { color: var(--ink); background: transparent; border-bottom-color: var(--profile-accent); }
.profile-back-link:hover,
.profile-back-link:focus-visible { color: var(--profile-accent); }
.profile-compact-intro h1 { color: var(--ink); }
.profile-compact-intro .profile-role { color: #fff !important; background: var(--profile-accent); }
.profile-compact-hero.is-studio-profile .profile-role { background: var(--pink-dark); }
.profile-compact-intro .profile-summary { color: var(--f4-texto-2); }
.profile-compact-intro .button-primary { color: #fff; background: var(--green-dark); border-color: var(--green-dark); }
.profile-compact-intro .button-primary:hover { color: #fff; background: #3d5600; }
.profile-compact-hero.is-studio-profile .button-studio { color: #fff; background: var(--pink-dark); border-color: var(--pink-dark); }
.profile-compact-hero.is-studio-profile .button-studio:hover { color: #fff; background: #8a0a50; }
.profile-hero-index { color: rgba(18,18,18,.42); }
.profile-orbit-thumb > span { border-color: color-mix(in srgb, var(--profile-accent) 72%, #fff); }
.profile-sequence.section-dark { color: var(--ink); background: var(--f4-papel); border-top: 1px solid var(--f4-linea); }
.profile-sequence a { color: var(--ink); border-color: var(--f4-linea); }
.profile-sequence a:hover,
.profile-sequence a:focus-visible { background: rgba(143,189,24,.1); }
.profile-sequence small,
.profile-sequence > a > span { color: var(--green-dark); }
.profile-sequence em { color: var(--f4-texto-2); }
.integrated-article-studio { background: var(--f4-marfil); }
.integrated-article-studio .legacy-section-text:nth-of-type(even) { background: var(--f4-papel); }

/* FASE4 · Desbordamiento horizontal en la portada a 360 px: el explorador de
   tratamientos ensanchaba la pagina (la figura del tratamiento activo llegaba a
   433 px). La rejilla ya era de una columna; faltaba permitir que encoja. */
.treatment-layout > * { min-width: 0; }
.treatment-image { max-width: 100%; }
.treatment-image figcaption > strong { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .method-orbit-node { max-width: 100%; }
}
.method-orbit { overflow-x: clip; }

/* FASE4 · Movil: el margen superior de la copia del hero colapsaba a traves
   de .hero-slides y dejaba una banda negra entre la cabecera y la fotografia
   (48 px en la portada, 208 px en Studio, donde ademas ya no hay logotipo que
   esquivar). Pasa a padding, que la foto si cubre. */
@media (max-width: 760px) {
  .hero-sangre .hero-slide .hero-copy,
  body.studio-page .hero-sangre .hero-copy { margin-top: 0; padding-top: clamp(40px, 8vh, 72px); }
}
@media (max-width: 760px) {
  .hero-controls { padding-right: 66px; }
}

/* FASE4 · Formulario de contacto y detalle del horario en claro. Eran dos
   paneles negros con letra blanca; ademas el estado de error del formulario
   (rosa oscuro sobre negro) daba 2,57:1. */
.contact-form-panel { color: var(--ink); background: var(--f4-marfil); border: 1px solid var(--f4-linea); }
.contact-form-panel .label { color: var(--green-dark); }
.contact-form-panel .label-pink { color: var(--pink-dark); }
.contact-form label:not(.form-consent) { color: var(--f4-texto-2); }
.contact-form input:not([type="checkbox"]), .contact-form select, .contact-form textarea { color: var(--ink); background: #fff; border-color: rgba(18,18,18,.22); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { background: #fff; border-color: var(--green-dark); }
.contact-hub-studio .contact-form input:focus, .contact-hub-studio .contact-form select:focus, .contact-hub-studio .contact-form textarea:focus { border-color: var(--pink-dark); }
.contact-form-panel .form-consent { color: var(--ink); }
.contact-form-panel .form-consent a { color: var(--ink); }
.contact-form-panel .button-primary { color: #fff; background: var(--green-dark); border-color: var(--green-dark); }
.contact-form-panel .button-primary:hover { background: #3d5600; }
.contact-form-panel .button-studio { color: #fff; background: var(--pink-dark); border-color: var(--pink-dark); }
.contact-form-panel .button-studio:hover { color: #fff; background: #8a0a50; }
.contact-form-panel .form-status { color: var(--green-dark); }
.contact-form-panel .form-status.is-error { color: var(--pink-dark); }
.contact-form-panel .contact-form-mark { opacity: .06; filter: grayscale(1); }
.contact-form-panel > p:not(.label):not(.form-status),
.contact-form-panel .form-nota { color: var(--f4-texto-2); }
.schedule-detail { color: var(--ink); background: var(--f4-marfil); border: 1px solid var(--f4-linea); border-top: 4px solid var(--pink); }
.schedule-detail > span,
.schedule-detail .label-pink { color: var(--pink-dark); }
.schedule-detail > p:not(.label) { color: var(--f4-texto-2); }
.schedule-detail .button-studio { color: #fff; background: var(--pink-dark); border-color: var(--pink-dark); }
.schedule-detail .button-studio:hover { color: #fff; background: #8a0a50; }
.schedule-private .button-studio,
body.studio-schedule-page .button-studio.button-studio { color: var(--pink-dark); }
body.studio-schedule-page .schedule-detail .button-studio,
body.studio-schedule-page .button-studio.button-studio:hover { color: #fff; background: var(--pink-dark); }
/* Boton del bloque de consentimiento (mapa, video): texto verde claro sobre
   fondo claro daba 1,53:1. */
.consent-frame-actions .button,
.consent-frame-actions .button-primary { color: #12130f; background: var(--green-bright); border-color: var(--green-bright); }
.consent-frame-actions .button:hover { color: #12130f; background: #c4e845; }
/* Fecha de las lecturas relacionadas sobre tarjeta tintada: 3,66:1. */
.blog-archive-card time.blog-archive-date,
time.blog-archive-date { color: #5a5955; }
/* «Hablar con Studio» en rosa pleno sobre papel: 3,65:1. */
body.studio-content-page .studio-profile-closing .button-studio,
.studio-profile-closing .button-studio { color: var(--pink-dark); }
.studio-profile-closing .button-studio:hover { color: #fff; background: var(--pink-dark); }
/* Filtro de dia del horario: rotulo «Hora» y boton del dia actual. */
.schedule-head-row span[role="columnheader"] { color: #5a5955; }

/* Ficha del equipo: «Equipo Salux» en rosa pleno sobre la placa negra. */
.profile-story-plate small { color: var(--green-bright); }
.is-studio-profile .profile-story-plate small,
.profile-page .is-studio-profile ~ .profile-story-body .profile-story-plate small { color: #ff5cb0; }
.contact-form-panel .form-helper { color: var(--f4-texto-2); }
.contact-map-facts small { color: #5a5955; }
.schedule-day-filter button.is-today { color: #ff5cb0; }

/* FASE4 · Preguntas frecuentes de la portada: la pregunta abierta dejaba de
   ser una tarjeta negra. Se abre en marfil con el filete verde. */
.faq-list details[open] { color: var(--ink); background: #fff; border-color: rgba(18,18,18,.22); box-shadow: 0 18px 44px -28px rgba(15,15,15,.35); }
.faq-list details[open] .faq-answer p,
.faq-list details[open] .faq-answer { color: #3f3d39; }
.faq-list details[open] .faq-icon { color: #fff; background: var(--green-dark); }
.faq-list details[open] .faq-number { color: var(--green-dark); }
.faq-list details[open] summary strong { color: var(--ink); }
.schedule-day-filter button.is-today:not(.is-active) { color: #ff5cb0; border-color: rgba(255,92,176,.5); }
.home-guide-card-2 p + p,
.home-guide-card p + p { color: #4f4f4f; }
.home-guide-index small { color: #5a5955; }
body.home-page .home-guide-card-2 p + p { color: #4f4f4f; }
body.home-page .home-guide-card-2 .home-guide-index small,
.home-guide-card-2 .home-guide-index small { color: #5a5955; }
.google-reviews-footer p { color: #5a5955; }
/* Restos de contraste medidos el 15-09 en paginas de clinica ya claras. */
.team-ensemble-hero .breadcrumbs,
.team-ensemble-hero .breadcrumbs a,
.team-ensemble-hero .breadcrumbs span { color: #6f6d68; }
.technique-principles article > span,
.treatment-focus article > span { color: var(--green-dark); }
.technique-principles.section-dark article > span,
.treatment-focus.section-dark article > span { color: var(--green-bright); }
.pagination-status { color: #5a5955; }
.technique-process ol li > span,
.treatment-process ol li > span { color: var(--green-dark); }
.context-video .label { color: var(--green-bright); }

/* ==========================================================================
   FASE5-EQUIPO-SIN-RECUADRO - 15-09-2026 (rev. 2)

   Historia corta: por la manana se llevo el bloque a rejilla de tres, como
   la pagina en produccion. Por la tarde Juan prefiere la formula anterior
   -«todos en linea con la curva que los enlaza por detras»- sobre el fondo
   claro. Asi que la rejilla se retira y solo queda lo que si era un fallo.

   EL RECUADRO DE ANTONIO, LESLIE Y PEDRO, MEDIDO: no era un fondo, era una
   sombra huerfana. La tarjeta antigua declaraba en `.team-collage-person > a`
   un `box-shadow: 0 18px 48px rgba(0,0,0,.22)`. Cuando el 09-09 el collage
   paso a retratos circulares se anulo el fondo en
   `body.home-page .team-collage-person > a`, pero la sombra solo se anulo
   dentro de la regla de los PARES (`:nth-child(even)`), asi que siguio viva
   en 1, 3 y 5. Sobre papel claro una sombra sin caja que la proyecte se lee
   como un rectangulo gris.
   -------------------------------------------------------------------------- */

body.home-page .team-collage-person > a,
body.home-page .team-collage-person:nth-child(odd) > a,
body.home-page .team-collage-person:nth-child(even) > a,
body.home-page .team-collage-person > a:hover,
body.home-page .team-collage-person > a:focus-visible {
  background: transparent;
  box-shadow: none;
  border: 0;
}
body.home-page .team-collage-person > a > div,
body.home-page .team-collage-person:nth-child(odd) > a > div {
  background: transparent;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   FASE5-HERO-INTERIOR-SIN-HUECO - 15-09-2026

   Tercera captura de Juan: bajo la fotografia de la ficha de Alicia quedaba
   una franja vacia. `.inner-hero` mide 620 px fijos, pero en las fichas de
   equipo de Studio la regla `.studio-team-page .inner-hero` lo deja en
   `min-height: min(660px, 72vh)`: el hero crece con el texto y la figura,
   con su `height: 620px` literal, se quedaba corta. La rejilla estira
   cualquier item de altura automatica, asi que basta con soltar esa altura.
   Medido: 40 px de hueco antes, 0 despues.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .inner-hero-media { height: auto; min-height: 620px; }
}

/* --------------------------------------------------------------------------
   FASE5-PRECIO-TEST - 15-09-2026

   El precio del test tiene que verse ANTES de las 81 preguntas, no solo en
   las preguntas frecuentes. Hereda el color del hero, ya medido en contraste.
   -------------------------------------------------------------------------- */
.nutrition-hero .nutrition-price {
  max-width: 46ch;
  margin: 18px 0 0;
  color: inherit;
  font-size: .95rem;
  line-height: 1.5;
}
.nutrition-hero .nutrition-price strong { font-weight: 700; white-space: nowrap; }

/* --------------------------------------------------------------------------
   FASE5B-VELO-ESCENA01 - 15-09-2026

   La fotografia nueva de la escena 01 (interior de la clinica) es mucho mas
   clara que el collage al que sustituye. Medido en movil: el rotulo
   «SALUX · HUELVA», en verde claro sobre la pared blanca, se queda en 4,43:1
   cuando el minimo AA para ese tamano es 4,5:1. Se probo antes a mover el
   recorte vertical a una franja mas oscura y no basta.

   Refuerzo acotado: una banda superior solo en movil y solo en esa escena.
   Escritorio no se toca (alli el rotulo mide 6,0:1) y las otras cuatro
   escenas tampoco.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .hero-sangre .hero-slide-intro .hero-media::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 0 auto;
    height: 42%;
    background: linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.30) 52%, rgba(0,0,0,0) 100%);
    pointer-events: none;
  }
}

/* --------------------------------------------------------------------------
   FASE5C-ESCENA03-TEXTO-COMPACTO - 15-09-2026

   La fotografia de la escena 03 lleva el logotipo de Studio compuesto arriba
   a la izquierda, justo donde caia el titular a dos lineas. Medido en la
   pagina: el logotipo ocupa del 20,7 % al 40,2 % de la altura del hero
   (159-310 px en una caja de 770) y el titular iba de 211 a 319 px: se
   solapaban de lleno.

   Peticion de Juan: que el texto ocupe menos en vertical. Con el titular en
   UNA linea baja de 108 a 42 px de alto, pero centrado seguia cayendo en
   244-286, todavia dentro del logotipo. Hace falta ademas bajar el bloque:
   con `margin-top` (no con `transform`, que compite con la animacion de
   entrada del slideshow y da saltos de 178 px) el rotulo queda en 347 y el
   titular en 384-426, por debajo del logotipo, y el bloque termina en 635,
   por encima de las pestanas (691). Solo escritorio: en movil el texto ya
   caia fuera del logotipo.
   -------------------------------------------------------------------------- */
@media (min-width: 761px) {
  .hero-slide-studio .hero-copy h2,
  .hero-slide-espacio .hero-copy h2 {
    font-size: clamp(1.95rem, 2.45vw, 2.6rem);
    line-height: 1.06;
    letter-spacing: -.03em;
  }
  .hero-slide-studio .hero-copy h2 br,
  .hero-slide-espacio .hero-copy h2 br { display: none; }
  .hero-sangre .hero-slide-studio .hero-copy,
  .hero-sangre .hero-slide-espacio .hero-copy { margin-top: clamp(96px, 18vh, 150px); }
}

/* --------------------------------------------------------------------------
   FASE5D-VELO-ESCENA02-MOVIL - 15-09-2026

   La escena «El espacio» es la fotografia mas clara del slideshow: el lineal
   del herbolario y la recepcion estan iluminados de lado a lado. En movil,
   donde el texto ocupa la parte alta a todo el ancho, el rotulo se quedaba en
   4,29:1 y el boton «Como llegar» en 3,64:1 (minimo 4,5). Se probaron dos
   recortes verticales distintos —el lineal y la fachada— y ninguno da fondo
   oscuro suficiente: la foto no tiene una franja vertical apagada.

   Mismo remedio que en la escena 01: banda superior de refuerzo, solo en
   movil y solo en esta escena. Escritorio no se toca (alli el texto va mas
   abajo, sobre el escaparate, y mide 6,5-9,7).
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .hero-sangre .hero-slide-espacio .hero-media::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 0 auto;
    height: 72%;
    background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.52) 45%, rgba(0,0,0,.28) 78%, rgba(0,0,0,0) 100%);
    pointer-events: none;
  }
}

/* ==========================================================================
   FASE5E-EXPLORADOR-MARCO-CURVO - 15-09-2026
   Peticion de Juan sobre el modulo del explorador de tratamientos:
   - En «¿Que necesitas hoy?» (portada) la imagen mantiene el zoom, pero gana
     curvatura y una linea curva alrededor.
   - En /tratamientos/ el mismo tratamiento, y ademas el bloque deja de ser
     negro para diferenciarse del resto de la pagina.
   El lenguaje no se inventa: es el mismo del collage del manifiesto de Studio
   (.studio-collage-frame, linea de 2 px y radio 16). El color pasa a verde
   porque en este sitio el rosa identifica a Studio y el explorador es clinica.
   Se retira borrando el bloque.
   ========================================================================== */

/* A - CURVATURA Y LINEA.
   El margen de 15 px cede exactamente el hueco que ocupa la linea, de modo
   que el marco cae donde antes caia el borde de la foto y el bloque no se
   desalinea ni con el titular ni con la lista de la derecha.
   Se usa `outline` y no un elemento nuevo porque se dibuja fuera de la caja y
   NO lo recorta el `overflow:hidden` que necesita el zoom de la imagen. */
.treatment-image {
  margin: 15px;
  border-radius: 18px;
  outline: 2px solid var(--green-dark);
  outline-offset: 13px;
}

/* La foto sticky del catalogo contaba con 112 px de techo y con la altura de
   la ventana menos 142: los 30 px de margen vertical nuevo hay que
   descontarlos o la imagen se sale por abajo al hacer scroll. */
.treatment-catalog .treatment-image {
  top: 97px;
  height: min(620px, calc(100svh - 172px));
}

@media (max-width: 760px) {
  .treatment-image,
  .treatment-catalog .treatment-image {
    margin: 9px;
    border-radius: 14px;
    outline-offset: 7px;
  }
}

/* B - EL CATALOGO DE /tratamientos/ DEJA DE SER NEGRO.
   Se aclara con el mismo tono medio que ya usan la portada y .studio-method
   (#e9e5df): no se inventa color nuevo y queda diferenciado tanto del papel
   de la introduccion como del bloque negro de tecnicas que viene despues. */
body.treatment-hub-page .treatment-catalog.section-dark {
  color: var(--ink);
  background: #e9e5df;
  border-top: 1px solid rgba(18,18,18,.12);
  --line: rgba(18,18,18,.15);
}
body.treatment-hub-page .treatment-catalog.section-dark .eyebrow,
body.treatment-hub-page .treatment-catalog.section-dark .label,
body.treatment-hub-page .treatment-catalog.section-dark .section-kicker span { color: var(--green-dark); }
body.treatment-hub-page .treatment-catalog.section-dark .treatment-explorer-heading > p,
body.treatment-hub-page .treatment-catalog.section-dark .treatment-item-index { color: #55534d; }
body.treatment-hub-page .treatment-catalog.section-dark .treatment-item { color: var(--ink); }

/* El verde claro del elemento activo se lee a 1,9:1 sobre fondo claro: el
   mismo fallo que ya se corrigio en la portada para el resto de piezas.
   Aqui se resuelve para los dos exploradores a la vez. */
body.treatment-hub-page .treatment-catalog.section-dark .treatment-item:hover,
body.treatment-hub-page .treatment-catalog.section-dark .treatment-item.is-active,
body.home-page .treatment-explorer.section-dark .treatment-item:hover,
body.home-page .treatment-explorer.section-dark .treatment-item.is-active { color: var(--green-dark); }

@media (max-width: 760px) {
  /* En movil la lista del catalogo se dibuja como tarjetas con fondo #0d0d0d:
     sobre banda clara habria que verlas al reves. */
  body.treatment-hub-page .treatment-catalog.section-dark .treatment-item {
    background: #fbfaf7;
    border: 1px solid rgba(18,18,18,.12);
  }
  body.treatment-hub-page .treatment-catalog.section-dark .treatment-item:hover,
  body.treatment-hub-page .treatment-catalog.section-dark .treatment-item.is-active { border-color: var(--green-dark); }
}

/* ==========================================================================
   FASE5F-RITMO-TONAL-PORTADA - 15-09-2026
   «Los modulos claros deberian diferenciarse en tonalidad, esto es demasiado
   plano» (Juan, con la captura de la FAQ y «Pide cita»).

   MEDIDO ANTES: de los once bloques de la portada, cinco compartian
   exactamente el mismo papel #f2f0eb y dos de ellos eran consecutivos
   (home-guide 1.269 px + equipo 776 px = 2.045 px sin un solo corte). Los
   otros tres tonos que habia (#efede7, #e8e5de, #e3e0d8) se diferencian del
   papel en un 2-4 %: existen en el codigo pero no se ven en pantalla.

   AHORA: dos tonos alternos, con 15 puntos de canal (6 %) entre ellos, que
   se turnan bloque a bloque. Ninguno es nuevo en el sitio: #e9e5df ya lo
   usaban el explorador y .studio-method, y #f8f7f4 es el papel aclarado.
   Se mantiene el limite de contraste: sobre #e9e5df, el tono mas oscuro de
   la escala, el verde de marca da 4,69:1 y el gris de apoyo 5,5:1.
   Se retira borrando el bloque.
   ========================================================================== */

body.home-page .spaces-intro,
body.home-page .method-section,
body.home-page .home-guide,
body.home-page .home-discovery,
body.home-page .home-faq { background: #f8f7f4; }

body.home-page .treatment-browser.section-dark,
body.home-page .team-showcase.section-dark,
body.home-page .google-reviews,
body.home-page .appointment-section.section-dark { background: #e9e5df; }

/* ==========================================================================
   FASE5G-CABECERA-LINEAS-Y-LOGOS - 15-09-2026
   Antonio pide «dos lineas que separen la zona del logo de la barra de arriba
   y del cuerpo de la web» y los logotipos «un poco mas grandes».

   LAS LINEAS YA EXISTIAN pero no se veian: la de la barra de contacto iba a
   rgba(255,255,255,.10) y la de la fila de marca a .11, es decir un 4 % de
   luz sobre negro. Se suben a .30, que es donde la linea se lee sin
   convertirse en un subrayado.

   LOS LOGOS crecen un 12 % SOLO en la cabecera desplegada (no en la compacta
   de scroll). La altura de la fila NO se toca a proposito: `.header-inner`
   mide 112 px con el logotipo en 72, asi que hay aire de sobra para 81, y
   asi no se mueven las piezas fijas que cuelgan de la altura de cabecera
   (`.topic-nav`, la foto sticky del catalogo, `.schedule-detail`).
   Se retira borrando el bloque.
   ========================================================================== */

.site-header .contact-rail { border-bottom: 1px solid rgba(255,255,255,.30); }
.header-brand-row { border-bottom: 1px solid rgba(255,255,255,.30); }

@media (min-width: 1181px) {
  
  
  /* El ancho del conmutador NO se toca: el simbolo se alinea a la izquierda
     con `object-position: left center`, asi que ensanchar la caja solo abre
     hueco muerto a su derecha. Crece la altura, que es lo que se ve. */
  
  .site-header:not(.is-compact) .universe-switch-logo { height: 67px; }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .site-header:not(.is-compact) .brand-primary-clinic { width: 214px !important; height: 58px !important; }
  .site-header:not(.is-compact) .brand-primary-studio { width: 205px !important; height: 60px !important; }
  .site-header:not(.is-compact) .universe-switch-logo { height: 66px; }
}

/* ==========================================================================
   FASE5H-EQUIPO-SOLO-NOMBRE - 15-09-2026
   Decision de Juan: «en el equipo, en el index y en /equipo/, solo apareceran
   los nombres, con el numero difuminado arriba a la derecha. Nunca
   especialidad ni cargo.»

   El rotulo de funcion desaparece del HTML (lo emite el generador), tambien
   del alt y del aria-label: si no se publica el cargo, no se publica en
   ninguna capa. El numero deja de ser un dato en linea y pasa a ser una
   marca de agua detras del retrato, como en la referencia del cliente: la
   fotografia lo recorta, que es lo que le da profundidad.
   Se retira borrando el bloque.
   ========================================================================== */

body.home-page .team-collage-person figure .team-collage-number,
body.team-hub-page .team-ensemble-person .team-ensemble-number,
body.team-hub-page .team-ensemble-person:nth-child(even) .team-ensemble-number {
  position: absolute;
  z-index: 0;
  right: calc(var(--circle) * -.02);
  left: auto;
  top: calc(var(--circle) * -.17);
  color: rgba(18,18,18,.16);
  font-size: calc(var(--circle) * .62);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -.08em;
  pointer-events: none;
}

/* El retrato va por encima del numero: lo recorta el circulo. */
body.home-page .team-collage-person img,
body.team-hub-page .team-ensemble-person img { position: relative; z-index: 1; }


/* ==========================================================================
   FASE5I-DISCOS-MARCA-PIDE-CITA - 15-09-2026
   «Esta solucion de la web actual le gusta para la zona de Pide cita junto al
   banner de Herbolario Salux»: el disco vuelve a llevar el LOGOTIPO COMPLETO,
   no el isotipo suelto que se puso el 09-09.

   Por que se puede ahora y antes no: el 09-09 se midio que el wordmark
   apaisado (176x46) solo ocupaba el 18,4 % del disco y por eso se cambio por
   el isotipo. La solucion no era el isotipo, era el ENCAJE: con el lockup
   vertical (simbolo arriba, marca debajo) el logotipo completo llena el disco.
   Se han compuesto dos piezas de 900x900 a partir de los originales del
   proyecto -`clinica-salux-marca.png` (948x829) y `studio-salux-simbolo.png`
   + `studio-salux-negativo` recortado-: disco blanco para Clinica y negro
   para Studio, como en la web en produccion.
   Se retira borrando el bloque (y las dos imagenes).
   ========================================================================== */

.appointment-section .clinic-card .space-logo,
body.home-page .appointment-section .clinic-card .space-logo {
  background-image: url("/assets/img/marca-clinica-salux-disco.webp");
  background-color: #fff;
  background-size: cover;
}
.appointment-section .studio-card .space-logo,
body.home-page .appointment-section .studio-card .space-logo {
  background-image: url("/assets/img/marca-studio-salux-disco.webp");
  background-color: #000;
  background-size: cover;
}
.appointment-section .space-logo,
body.home-page .appointment-section .space-logo { padding: 0; }

/* ==========================================================================
   FASE5J-CABECERA-CLARA - 15-09-2026
   Juan, tras ver la maqueta: «el menu me gusta claro. Los botones del menu
   los haria redondeados y un tono claro algo diferente». Y manda los dos
   logotipos en color, que es lo que hacia falta para poder aclararla: los que
   habia en la cabecera eran versiones EN NEGATIVO y sobre blanco no existen.

   Tres planos de claro, no uno: barra de contacto #f2f0eb, fila de marca #fff
   y las pastillas del menu #eef0e4 (verde muy desaturado; rosa en Studio).
   Asi la cabecera tiene profundidad sin lineas de mas.
   Se retira borrando el bloque (y devolviendo los logotipos en negativo al
   generador).
   ========================================================================== */

.site-header { color: var(--ink); background: #fff; border-bottom-color: rgba(18,18,18,.14); }


/* 1 - Barra de contacto. */


/* 2 - Los dos botones de accion. El principal pasa a solido: sobre claro un
   boton de solo contorno se pierde entre el resto de pastillas. */


.header-search-action b { color: #4d6c00; }
.is-studio-header .header-search-action b { color: #a80b61; }


/* 3 - El menu: cada entrada es una pastilla. Los separadores verticales
   sobran cuando el activo ya tiene forma propia. */
.main-nav > ul > li + li::before { display: none; }
.main-nav li > a,
.nav-parent > a,
.main-nav-studio li > a,
.main-nav-studio .nav-parent > a {
  color: var(--ink);
  padding: 0 clamp(11px, 1vw, 17px);
  border-radius: 999px;
  transition: color .2s ease, background-color .2s ease;
}
.main-nav li > a:hover,
.nav-parent > a:hover,
.main-nav li > a.is-active,
.nav-parent > a.is-active { color: var(--green-dark); background: #eef0e4; }
.main-nav-studio li > a:hover,
.main-nav-studio .nav-parent > a:hover,
.main-nav-studio li > a.is-active,
.main-nav-studio .nav-parent > a.is-active { color: var(--pink-dark); background: #fbeaf3; }
.nav-home { color: #4d6c00; }
.main-nav-studio .nav-home { color: #a80b61; }
.submenu-toggle { color: #767676; }
.menu-toggle { color: var(--ink); }

/* 4 - Submenu desplegable. */
.submenu { color: var(--ink); background: #fff; border-color: rgba(18,18,18,.12); box-shadow: 0 24px 60px rgba(18,18,18,.16); }
.submenu p { color: var(--green-dark); }
.submenu a { border-bottom-color: rgba(18,18,18,.10); }
.submenu a:hover { color: var(--green-dark); background: #f2f0eb; }
.main-nav-studio .submenu p { color: var(--pink-dark); }
.main-nav-studio .submenu a:hover { color: var(--pink-dark); background: #fbeaf3; }

/* 5 - Conmutador de espacio. El simbolo llevaba `mix-blend-mode: screen`,
   pensado para fondo negro: sobre blanco DESAPARECE. */
.universe-switch { border-left-color: rgba(18,18,18,.14); }
.universe-switch-studio .universe-switch-logo { mix-blend-mode: normal; }
.universe-switch b { color: #767676; }
.universe-switch-studio b span { color: var(--pink-dark); }
.universe-switch-clinic b span { color: var(--green-dark); }

/* 6 - Menu desplegable en movil: el panel era negro a sangre.
   16-09-2026: la regla de arriba (linea ~4589) pinta `.main-nav, .main-nav.main-nav-studio`
   de #050505 con especificidad (0,2,0); `.main-nav` a secas (0,1,0) solo rescataba el menu
   de Clinica y el de Studio seguia negro con letras negras. Se anade el mismo selector. */
@media (max-width: 1180px) {
  .main-nav,
  .main-nav.main-nav-studio { color: var(--ink); background: #fff; border-bottom: 1px solid rgba(18,18,18,.14); }
  /* 16-09-2026: el desplegable de Disciplinas (Studio) conservaba en movil las dos columnas
     de escritorio (repeat(2, minmax(190px,1fr)) = 380px + 18px de sangria = 398px) y, como el
     panel es una rejilla con columna automatica, ensanchaba todo el menu a 398px en un movil
     de 390px: el chevron y las flechas quedaban fuera de pantalla. Columna unica en movil y
     rejilla del panel que no puede crecer por su contenido. */
  .main-nav,
  .main-nav.main-nav-studio { grid-template-columns: minmax(0, 1fr); }
  .main-nav > ul { min-width: 0; }
  .submenu.submenu-studio { grid-template-columns: 1fr; }
  .main-nav li > a,
  .nav-parent > a { color: var(--ink); }
  .nav-cta { color: #fff; background: #4d6c00; border-color: #4d6c00; }
  .nav-cta.is-studio-action { background: #a80b61; border-color: #a80b61; }
  .nav-search { color: var(--ink); }
}

/* FASE5J - remates de especificidad del conmutador.
   Tres reglas mas especificas se comian el bloque anterior:
   - `.site-header .universe-switch` fija el color heredado (medido: «IR A» a
     1,41:1 sobre blanco) y `.site-header .universe-switch-studio b span` el
     rosa pleno (4,16:1). Ambas por debajo del minimo.
   - `.site-header .universe-switch .universe-switch-logo` clava el simbolo en
     30 px, asi que el «logos un poco mas grandes» no le llegaba. */
.site-header .universe-switch,
.site-header .universe-switch b { color: #6d6b66; }


.site-header .universe-switch:hover,
.site-header .universe-switch:focus-visible { color: var(--ink); }

/* FASE5J - el submenu grande (submenu-duo) estaba pintado para fondo negro:
   titulos en blanco, enlaces en #cfcfcf (1,3:1 sobre blanco) y los «ver
   todos» en verde y rosa claros. */
.submenu-duo .submenu-block-head { border-bottom-color: rgba(18,18,18,.14); }
.submenu-duo .submenu-block-head p { color: var(--ink); }
.submenu-duo .submenu-block + .submenu-block { border-left-color: rgba(18,18,18,.12); }
.submenu-duo .submenu-block-all { color: var(--green-dark); }
.submenu-duo .submenu-block:last-child .submenu-block-all { color: var(--pink-dark); }
.submenu-duo .submenu-block-columns a { color: #3a3a36; }
.submenu-duo .submenu-block-columns a:hover,
.submenu-duo .submenu-block-columns a:focus-visible { color: var(--green-dark); }
.submenu-duo .submenu-block:last-child .submenu-block-columns a:hover,
.submenu-duo .submenu-block:last-child .submenu-block-columns a:focus-visible { color: var(--pink-dark); }
.submenu-duo .submenu-block-columns a[aria-current="page"] { color: var(--ink); }

/* ==========================================================================
   FASE5J-2 - CABECERA CLARA, SEGUNDA VUELTA (15-09-2026)
   Indicaciones de Juan, literales:
   - fondo del menu #F2F0EB y el del top «un poco mas oscuro» -> #E9E5DF, el
     mismo tono medio que ya marca el ritmo de la portada.
   - el boton de la derecha, «del color del logo de Salux» (verde de marca en
     Clinica, fucsia en Studio).
   - submenu #F2F0EB con texto #111111.
   - el menu, «todo en el mismo grupo, en un ovalo como el que sale al pasar
     el raton», a todo el ancho del menu, y el raton subraya en verde Salux o
     fucsia Studio.
   Sobre los colores: el verde de marca (#8fbd18) con texto blanco da 1,9:1,
   asi que el rotulo del boton va en tinta (8,3:1). El fucsia pleno (#ec1986)
   con blanco da 4,16:1 -> se usa #c2116f, que sigue leyendose como fucsia de
   Studio y da 5,9:1.
   ========================================================================== */


.header-brand-row { background: #f2f0eb; }


.header-primary-action { color: #121212; background: var(--green); border-color: var(--green); }
.header-primary-action:hover,
.header-primary-action:focus-visible { color: #121212; background: #7ea814; border-color: #7ea814; }
.header-primary-action.is-studio-action { color: #fff; background: #c2116f; border-color: #c2116f; }
.header-primary-action.is-studio-action:hover,
.header-primary-action.is-studio-action:focus-visible { color: #fff; background: #a80b61; border-color: #a80b61; }

/* EL OVALO. Un solo grupo para toda la navegacion; las entradas pierden su
   pastilla y el raton las subraya con el color del espacio. */
@media (min-width: 1181px) {
  .main-nav > ul,
  .main-nav-studio > ul {
    padding: 5px clamp(10px, 1vw, 18px);
    background: #fff;
    border: 1px solid rgba(18,18,18,.08);
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(18,18,18,.05);
  }
  .main-nav li > a,
  .nav-parent > a,
  .main-nav-studio li > a,
  .main-nav-studio .nav-parent > a {
    position: relative;
    background: none;
    border-radius: 0;
  }
  .main-nav li > a:hover,
  .nav-parent > a:hover,
  .main-nav li > a.is-active,
  .nav-parent > a.is-active,
  .main-nav-studio li > a:hover,
  .main-nav-studio .nav-parent > a:hover,
  .main-nav-studio li > a.is-active,
  .main-nav-studio .nav-parent > a.is-active { background: none; }
  .main-nav li > a::after,
  .nav-parent > a::after {
    position: absolute;
    right: clamp(11px, 1vw, 17px);
    bottom: 12px;
    left: clamp(11px, 1vw, 17px);
    height: 2px;
    content: "";
    background: var(--green);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .22s ease;
  }
  .main-nav-studio li > a::after,
  .main-nav-studio .nav-parent > a::after { background: var(--pink); }
  .main-nav li > a:hover::after,
  .nav-parent > a:hover::after,
  .main-nav li > a:focus-visible::after,
  .main-nav li > a.is-active::after,
  .nav-parent > a.is-active::after { transform: scaleX(1); transform-origin: left; }
  /* El icono de inicio no lleva subrayado: no es una palabra. */
  .nav-home::after { content: none !important; }
  .nav-home { background: none; }
  /* Los enlaces del submenu viven dentro del panel, no del ovalo. */
  .submenu a::after,
  .submenu-duo .submenu-block-columns a::after { content: none !important; }
}

/* SUBMENU en el tono del menu, con la tinta que pide Juan. */
.submenu { color: #111; background: #f2f0eb; border-color: rgba(18,18,18,.10); }
.submenu-duo .submenu-block-columns a,
.submenu-duo .submenu-block-head p { color: #111; }
.submenu a:hover,
.submenu-duo .submenu-block-columns a:hover { background: rgba(255,255,255,.72); }

/* FASE5J-2, remate: el ovalo sumaba su propio relleno al que ya tenian los
   `li`, y «Contacto» se salia por el borde derecho (medido: 1.419 px de 1.440
   utiles). Dentro del ovalo el enlace no lleva relleno propio: lo pone el
   `li`, y el subrayado se ancla al ancho del texto. */
@media (min-width: 1181px) {
  .main-nav li > a,
  .nav-parent > a,
  .main-nav-studio li > a,
  .main-nav-studio .nav-parent > a { padding: 0; }
  .main-nav li > a::after,
  .nav-parent > a::after { right: 0; left: 0; }
  .main-nav > ul,
  .main-nav-studio > ul { padding: 5px clamp(14px, 1.2vw, 22px); }
  .main-nav > ul > li { padding: 0 clamp(9px, .85vw, 15px); }
}

/* FASE5J-3 - «los logos mas grandes». Segundo escalon, ahora que la fila es
   clara y el logotipo va en color. La fila sigue midiendo 112 px: Clinica
   sube a 88 de alto (12 px de aire arriba y abajo) y Studio a 95, que tiene
   mas margen interno en el propio archivo y por eso necesita mas caja para
   leerse al mismo tamano optico. La altura de `.header-inner` NO se toca. */


/* FASE5J-3, remate: el submenu grande mide 958 px y colgaba del `li` de
   «Tratamientos»; con el ovalo desplazado a la derecha se salia 10 px del
   viewport. Se ancla al borde derecho del contenedor. */
@media (min-width: 1181px) {
  /* `right:0` por si solo se referia al `li`, que es el ancestro posicionado,
     y el panel se iba por la izquierda. El ancla pasa a ser la propia lista. */
  .main-nav > ul { position: relative; }
  .main-nav > ul > li.has-mega-submenu { position: static; }
  .main-nav .submenu-duo { right: 0; left: auto; }
}

/* ==========================================================================
   FASE5K-REMATES - 15-09-2026
   1) «Los numeros quedan demasiado montados» sobre el retrato: salen mas
      arriba y mas afuera, y bajan de tamano, para que el circulo solo les
      muerda una esquina.
   2) Las dos tarjetas de «Guias / Experiencias» reciben un sombreado interior
      al pasar el raton, en vez de aclararse a blanco.
   ========================================================================== */

body.home-page .team-collage-person figure .team-collage-number,
body.team-hub-page .team-ensemble-person .team-ensemble-number,
body.team-hub-page .team-ensemble-person:nth-child(even) .team-ensemble-number {
  right: calc(var(--circle) * -.17);
  top: calc(var(--circle) * -.30);
  font-size: calc(var(--circle) * .54);
}
@media (max-width: 760px) {
  body.home-page .team-collage-person figure .team-collage-number,
  body.team-hub-page .team-ensemble-person .team-ensemble-number,
  body.team-hub-page .team-ensemble-person:nth-child(even) .team-ensemble-number {
    right: calc(var(--circle) * -.12);
    top: calc(var(--circle) * -.26);
    font-size: calc(var(--circle) * .46);
  }
}

.home-discovery-card { transition: transform .22s ease, background-color .22s ease, box-shadow .22s ease; }
.home-discovery-card:hover,
.home-discovery-card:focus-visible {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(18,18,18,.06), inset 0 14px 34px rgba(18,18,18,.07);
}
.home-discovery-cases:hover,
.home-discovery-cases:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(168,11,97,.10), inset 0 14px 34px rgba(168,11,97,.07);
}

/* ==========================================================================
   FASE5L-OVALO-TENIDO - 15-09-2026
   «El menu, con un color un poco mas claro solo que el resto de la zona,
   pero con un pequeno efecto de fondo tirando al verde del logo en Clinica y
   al fucsia en Studio.»
   El ovalo deja de ser blanco puro: parte de un blanco apenas teñido y baja a
   un velo del color del espacio. El salto con la fila (#F2F0EB) sigue siendo
   perceptible y el texto en tinta mantiene 16:1 largos.
   Ademas el logotipo de Studio pasa a `contain`: con `cover` -la regla vieja,
   pensada para el wordmark en negativo- el archivo nuevo (900x272) se
   recortaba por los lados.
   ========================================================================== */

@media (min-width: 1181px) {
  .main-nav > ul {
    background: linear-gradient(180deg, #fcfdf8 0%, #f3f7e8 100%);
    border-color: rgba(143,189,24,.28);
    box-shadow: 0 2px 10px rgba(77,108,0,.07);
  }
  .main-nav-studio > ul {
    background: linear-gradient(180deg, #fdf8fb 0%, #fbeef5 100%);
    border-color: rgba(236,25,134,.24);
    box-shadow: 0 2px 10px rgba(168,11,97,.07);
  }
}

.brand-primary-studio img { object-fit: contain; }


/* ==========================================================================
   FASE5M-VELO-TENUE - 15-09-2026
   «El slideshow tiene un fondo que oscurece mucho las fotos; que sea muy
   tenue.»

   MEDIDO ANTES DE TOCAR NADA: con el velo simplemente rebajado (columna de
   texto de .78 a .46), CINCO de las seis escenas caen por debajo del minimo
   de 4,5 -escena 01 en 1,93 el rotulo y 1,89 el boton; 06 en 1,98 y 2,06-.
   El velo no es decoracion: es lo unico que sostiene el texto sobre la foto.

   LO QUE SI FUNCIONA: no bajarlo, ACORTARLO. El degradado lateral conserva su
   profundidad donde esta el texto y muere en el 58 % del ancho en vez del
   76 %, asi que toda la mitad derecha de la fotografia queda limpia -que es
   la parte que se mira- y el texto mantiene su contraste. La franja de las
   pestanas baja de .88 a .72, lo justo para que sigan legibles.
   Las escenas «El espacio» y «Studio» llevan su propia version, algo mas
   profunda: son las dos fotos mas claras bajo la columna de texto (con el
   degradado corto daban 4,48 y 3,46).

   Contrastes despues, las seis escenas a 1440 px: minimo 5,33 y maximo 19,90.
   Movil no se toca: alli el texto se apila sobre la foto y los velos de las
   escenas 01 y 02 estan calculados uno a uno.
   ========================================================================== */
@media (min-width: 761px) {
  .hero-sangre .hero-media::after {
    background:
      linear-gradient(0deg,
        rgba(0,0,0,.72) 0%,
        rgba(0,0,0,.62) 11%,
        rgba(0,0,0,.22) 17%,
        rgba(0,0,0,0) 24%),
      linear-gradient(90deg,
        rgba(0,0,0,.76) 0%,
        rgba(0,0,0,.66) 22%,
        rgba(0,0,0,.38) 38%,
        rgba(0,0,0,.10) 50%,
        rgba(0,0,0,0) 58%);
  }
  .hero-sangre .hero-slide-studio .hero-media::after,
  .hero-sangre .hero-slide-espacio .hero-media::after {
    background:
      linear-gradient(0deg,
        rgba(0,0,0,.72) 0%,
        rgba(0,0,0,.62) 11%,
        rgba(0,0,0,.22) 17%,
        rgba(0,0,0,0) 24%),
      linear-gradient(90deg,
        rgba(0,0,0,.86) 0%,
        rgba(0,0,0,.76) 25%,
        rgba(0,0,0,.48) 42%,
        rgba(0,0,0,.14) 54%,
        rgba(0,0,0,0) 62%);
  }
}

/* ==========================================================================
   FASE5N-CONMUTADOR-CON-LOGOTIPO - 15-09-2026
   Juan: «los dos logos de la zona de menú» son los logotipos completos. El
   acceso al otro espacio deja de mostrar el isotipo suelto de 30 px -decision
   del 14-09, que el cliente corrige- y pasa a mostrar el logotipo entero, a
   menor tamano que la marca principal para que la jerarquia se mantenga.
   ========================================================================== */
.site-header .universe-switch .universe-switch-logo,
.site-header.is-compact .universe-switch .universe-switch-logo {
  grid-column: 1;
  grid-row: 2;
  width: 172px !important;
  max-width: none;
  height: 48px !important;
  max-height: none;
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: normal;
}
.site-header:not(.is-compact) .universe-switch .universe-switch-logo { width: 196px !important; height: 56px !important; }
@media (min-width: 1181px) {
  .site-header:not(.is-compact) .universe-switch,
  .site-header .universe-switch { width: 236px; min-width: 236px; }
}

/* FASE5I, remate de especificidad - 15-09-2026
   Los discos salian bien en la portada y MAL en las paginas de Studio y en
   las de contenido: alli manda la regla
   `body.studio-page .appointment-section .space-logo` (0,3,1), que reimpone
   `background-size: 56%` y fondo blanco, y le gana a
   `.appointment-section .studio-card .space-logo` (0,3,0). Resultado: el
   logotipo se veia como un cuadrado pequeno dentro del circulo.
   Se repiten los selectores con el mismo prefijo de body para empatar y
   ganar por orden. */
body .appointment-section .clinic-card .space-logo,
body.home-page .appointment-section .clinic-card .space-logo,
body.studio-page .appointment-section .clinic-card .space-logo,
body.studio-page:not(.studio-disciplines-page) .appointment-section .clinic-card .space-logo,
body.studio-content-page .appointment-section .clinic-card .space-logo {
  background-image: url("/assets/img/marca-clinica-salux-disco.webp");
  background-color: #fff;
  background-size: cover;
  background-position: center;
  padding: 0;
}
body .appointment-section .studio-card .space-logo,
body.home-page .appointment-section .studio-card .space-logo,
body.studio-page .appointment-section .studio-card .space-logo,
body.studio-page:not(.studio-disciplines-page) .appointment-section .studio-card .space-logo,
body.studio-content-page .appointment-section .studio-card .space-logo {
  background-image: url("/assets/img/marca-studio-salux-disco.webp");
  background-color: #000;
  background-size: cover;
  background-position: center;
  padding: 0;
}

/* FASE5F, remate - 15-09-2026
   «Mismo color de fondo»: los tres bloques editoriales de la portada
   (`.spaces-intro`, `.method-section`, `.home-guide`) son `.editorial-section`,
   que mide `min(100% - pad*2, container)` y va centrado. Al pintarles el fondo
   solo se teñia esa caja, no la banda completa, y a los lados asomaba el papel
   del body: dos tonos dentro del mismo modulo, justo lo contrario de lo que se
   buscaba. El color pasa a un pseudo-elemento a sangre. */
body.home-page .spaces-intro,
body.home-page .method-section,
body.home-page .home-guide { position: relative; background: transparent; }
body.home-page .spaces-intro::after,
body.home-page .method-section::after,
body.home-page .home-guide::after {
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  content: "";
  background: #f8f7f4;
  pointer-events: none;
}

/* ==========================================================================
   FASE5O-LOGOS-MAYORES - 16-09-2026
   Tercer escalon de tamano. Los dos anteriores cabian en el aire que sobraba
   dentro de la fila de 112 px; este ya no, asi que la fila sube a 132 y hay
   que reajustar TODO lo que cuelga de la altura de cabecera: el indice lateral
   de articulo, la foto sticky del catalogo de tratamientos y el panel del
   horario de Studio. Si se revierte este bloque, revertir tambien esos tres.
   ========================================================================== */
@media (min-width: 1181px) {
  
  
  
  
  /* El conmutador se queda en 196: con 232 el menu perdia «Contacto» por el
     borde derecho (medido a 1440). */
  
  

  /* Piezas fijas que cuelgan de la altura de la cabecera (+20 px). */
  
  
  
}

/* ==========================================================================
   FASE5P-TRANSICION-Y-LOGOS-IGUALES - 16-09-2026
   1) Opcion B elegida por Juan: filete de marca entre la cabecera y el
      slideshow (4 px, verde de Clinica -> fucsia de Studio) y un velo claro
      muy corto que suaviza el arranque de la fotografia.
   2) «El logo de la clinica y el de Studio, del mismo tamano, aunque el de
      Studio tenga arriba la leyenda de ir a Studio Salux.»

   MEDIDO: a 1.440 px no caben dos logotipos de 96 px de alto mas el ovalo del
   menu (366 + 314 + 640 + margenes = 1.368 sobre 1.324 utiles). Por eso los
   dos crecen o encogen A LA VEZ en tres tramos, y en cada tramo miden lo
   mismo: la proporcion de cada archivo hace el resto (Clinica 3,82:1 y
   Studio 3,27:1, de ahi que el de Studio sea algo menos ancho a igual alto).
   ========================================================================== */

/* 1 - Transicion. */

.hero-sangre::before {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--green) 0%, var(--green) 38%, var(--pink) 100%);
  pointer-events: none;
}

/* 2 - Los dos logotipos, mismo alto. El conmutador reserva arriba la fila del
   rotulo «IR A / Studio Salux», asi que su caja total es mayor que la de la
   marca principal aunque el logotipo mida igual. */
@media (min-width: 1181px) {
  .site-header:not(.is-compact) .brand-primary-clinic { width: 275px !important; height: 72px !important; }
  .site-header:not(.is-compact) .brand-primary-studio { width: 236px !important; height: 72px !important; }
  .site-header:not(.is-compact) .universe-switch .universe-switch-logo { width: 236px !important; height: 72px !important; }
  
  .header-inner,
  .site-header.is-compact .header-inner { height: 124px; }
  .site-header.is-compact .header-inner { height: 96px; }
  .topic-nav { top: 156px; }
  .treatment-catalog .treatment-image { top: 109px; height: min(620px, calc(100svh - 184px)); }
  .schedule-detail { top: 168px; }
}
@media (min-width: 1360px) {
  
  
  .site-header:not(.is-compact) .universe-switch .universe-switch-logo { width: 275px !important; height: 84px !important; }
  .site-header:not(.is-compact) .universe-switch { min-height: 112px; }
  
  
  
  
  
}
@media (min-width: 1600px) {
  
  
  .site-header:not(.is-compact) .universe-switch .universe-switch-logo { width: 314px !important; height: 96px !important; }
  .site-header:not(.is-compact) .universe-switch { min-height: 124px; }
  
  
  
  
  
}

/* FASE5P, remate - 16-09-2026
   Medido: la caja del enlace de Clinica media 321x84 pero su <img> se quedaba
   en 321x46, asi que el logotipo salia visiblemente mas pequeno que el de
   Studio aunque las cajas fueran iguales. Se fuerza que la imagen ocupe la
   caja y se ajuste dentro.
   Y a 1.200 px el menu se salia por la derecha: ese tramo baja a 64 px. */
.site-header .brand-primary-clinic img,
.site-header .brand-primary-studio img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
@media (min-width: 1181px) and (max-width: 1359px) {
  
  
  .site-header:not(.is-compact) .universe-switch .universe-switch-logo { width: 210px !important; height: 64px !important; }
  .site-header:not(.is-compact) .universe-switch { min-height: 92px; }
  
  
  
  
  
}

/* FASE5P - a 1.200 px el ovalo llegaba a 15 px del borde. En vez de encoger
   mas los logotipos, se aprieta el relleno del ovalo en ese tramo. */
@media (min-width: 1181px) and (max-width: 1359px) {
  .main-nav > ul,
  .main-nav-studio > ul { padding: 5px 12px; }
  .main-nav > ul > li { padding: 0 7px; }
}

/* ==========================================================================
   FASE5Q-CABECERA-ALINEADA-Y-TOP-DEGRADADO - 16-09-2026
   1) «Mismo alto y en la misma línea. Sepáralos un poco.»
      MEDIDO antes: el logotipo de Clinica ocupaba y 74-158 y el de Studio
      y 87-171 -13 px mas abajo-, porque el conmutador va centrado y su caja
      incluye la fila del rotulo. Con `align-self: flex-start` el conmutador
      arranca en el borde superior de la fila y su logotipo cae en y 75-159:
      misma linea que el de Clinica. La separacion entre marcas sube a 56 px.
      Los tamanos bajan un escalon en cada tramo para que el ovalo del menu
      siga cabiendo con esa separacion mayor (medido a 1200, 1440 y 1680).
   2) El top pasa a fondo oscuro con degradado del verde de Clinica al fucsia
      de Studio, y ese degradado se invierte en las paginas de Studio, que es
      donde la marca principal cambia de lado.
   ========================================================================== */

@media (min-width: 1181px) {
  .site-header:not(.is-compact) .universe-switch {
    align-self: flex-start;
    min-height: 0;
    margin-left: clamp(34px, 3.6vw, 56px);
  }
  .site-header:not(.is-compact) .universe-switch,
  .site-header:not(.is-compact) .brand-primary-clinic,
  .site-header:not(.is-compact) .brand-primary-studio { flex: 0 0 auto; }
}

@media (min-width: 1181px) and (max-width: 1359px) {
  .site-header:not(.is-compact) .brand-primary-clinic { width: 229px !important; height: 60px !important; }
  .site-header:not(.is-compact) .brand-primary-studio { width: 196px !important; height: 60px !important; }
  .site-header:not(.is-compact) .universe-switch,
  .site-header:not(.is-compact) .universe-switch .universe-switch-logo { width: 196px !important; min-width: 196px; }
  .site-header:not(.is-compact) .universe-switch .universe-switch-logo { height: 60px !important; }
}
@media (min-width: 1360px) {
  .site-header:not(.is-compact) .brand-primary-clinic { width: 298px !important; height: 78px !important; }
  .site-header:not(.is-compact) .brand-primary-studio { width: 255px !important; height: 78px !important; }
  .site-header:not(.is-compact) .universe-switch,
  .site-header:not(.is-compact) .universe-switch .universe-switch-logo { width: 255px !important; min-width: 255px; }
  .site-header:not(.is-compact) .universe-switch .universe-switch-logo { height: 78px !important; }
}
@media (min-width: 1600px) {
  .site-header:not(.is-compact) .brand-primary-clinic { width: 336px !important; height: 88px !important; }
  .site-header:not(.is-compact) .brand-primary-studio { width: 288px !important; height: 88px !important; }
  .site-header:not(.is-compact) .universe-switch,
  .site-header:not(.is-compact) .universe-switch .universe-switch-logo { width: 288px !important; min-width: 288px; }
  .site-header:not(.is-compact) .universe-switch .universe-switch-logo { height: 88px !important; }
}

/* 2 - EL TOP. Oscuro, con el degradado de los dos espacios. El texto va en
   claro; los tonos son versiones muy oscurecidas del verde y del fucsia para
   que el rotulo blanco mantenga contraste de sobra en los dos extremos. */
.contact-rail {
  color: #e6e5e2;
  background: linear-gradient(90deg, #16210a 0%, #101010 44%, #121212 58%, #2f0a1d 100%);
  border-bottom: 1px solid rgba(255,255,255,.14);
}


.contact-space-number { color: #f2f0eb; }
.contact-space-studio { border-left-color: rgba(255,255,255,.16); }
.contact-space-clinic .contact-rail-action { color: var(--green-bright); }
.contact-space-studio .contact-rail-action { color: var(--pink); }
.contact-space-clinic .contact-rail-action:hover,
.contact-space-clinic .contact-rail-action:focus-visible { color: var(--green-bright); background: rgba(168,210,27,.14); }
.contact-space-studio .contact-rail-action:hover,
.contact-space-studio .contact-rail-action:focus-visible { color: var(--pink); background: rgba(236,25,134,.16); }
.contact-rail .header-search-action { color: #ededea; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.26); }
.contact-rail .header-search-action:hover,
.contact-rail .header-search-action:focus-visible { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45); }
.contact-rail .header-search-action b { color: var(--green-bright); }
.is-studio-header .contact-rail .header-search-action b { color: var(--pink); }

/* FASE5Q, remate - medido: el conmutador conservaba 23 px de relleno
   izquierdo, asi que su logotipo se salia de la caja y quedaba a 5 px del
   ovalo del menu; y el rotulo de dos lineas invadia 6 px del logotipo. */
@media (min-width: 1181px) {
  .site-header:not(.is-compact) .universe-switch {
    padding: 0;
    grid-template-rows: 24px auto;
    border-left: 0;
  }
  .site-header:not(.is-compact) .universe-switch b {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    font-size: .56rem;
    line-height: 1.02;
  }
  .site-header:not(.is-compact) .universe-switch b span { margin-top: 1px; font-size: .74rem; }
}

/* FASE5Q - los 5 px que faltaban: la fila del rotulo tiene que medir
   exactamente lo que el centrado deja por encima del logotipo de Clinica,
   y eso cambia en cada tramo -(altura de fila - altura de logotipo) / 2-. */


/* ==========================================================================
   FASE5R-AJUSTE-CABECERA - 16-09-2026
   «Centra un poco mas los logos, pegalos mas a la linea inferior; el "ir a"
   queda muy pegado al top. El top lo has hecho negro casi en su totalidad.»
   - El bloque de marca baja: 18 px de aire bajo el logotipo y el resto
     arriba, con lo que el rotulo del conmutador se despega del top.
   - El degradado del top gana color: los extremos suben de #16210a y #2f0a1d
     a #24350a y #4d0d2f, y el negro neutro se reduce a la franja central.
     Medido sobre los extremos nuevos: rotulo 5,5:1 y numero 11:1.
   ========================================================================== */

@media (min-width: 1181px) {
  .site-header:not(.is-compact) .brand-primary-clinic,
  .site-header:not(.is-compact) .brand-primary-studio {
    align-self: flex-end;
    margin-bottom: 18px;
  }
  .site-header:not(.is-compact) .universe-switch { align-self: flex-end; margin-bottom: 18px; }
}
@media (min-width: 1181px) and (max-width: 1359px) {
  .site-header:not(.is-compact) .universe-switch { grid-template-rows: 38px auto; }
}
@media (min-width: 1360px) {
  .site-header:not(.is-compact) .universe-switch { grid-template-rows: 40px auto; }
}
@media (min-width: 1600px) {
  .site-header:not(.is-compact) .universe-switch { grid-template-rows: 42px auto; }
}


/* FASE5R - el rotulo seguia clavado en el borde superior de su fila
   (`align-self: start`); centrado en ella queda a 9 px del top y a 9 del
   logotipo. */
@media (min-width: 1181px) {
  .site-header:not(.is-compact) .universe-switch b { align-self: center; }
}

/* FASE5R rev.2 - «el top sigue casi negro». Los extremos suben a #3d5a0d y
   #7a1450, que ya se leen como verde y fucsia, no como negro teñido. A ese
   nivel el rotulo gris (#a9a7a1) se quedaba en 3,3:1 sobre el verde, asi que
   sube a #d5d3ce: 5,3:1 sobre el extremo verde y 6,8:1 sobre el fucsia. Los
   numeros, en #f2f0eb, van a 6,8:1 en el peor punto. */
.contact-rail {
  background: linear-gradient(90deg, #3d5a0d 0%, #24350a 18%, #101010 44%, #121212 56%, #55104a 82%, #7a1450 100%);
}
.is-studio-header .contact-rail {
  background: linear-gradient(90deg, #7a1450 0%, #55104a 18%, #121212 44%, #101010 56%, #24350a 82%, #3d5a0d 100%);
}
.contact-space > strong { color: #d5d3ce; }

/* ==========================================================================
   FASE5S-AIRE-CABECERA - 16-09-2026
   «Un poco mas de altura, 10 px arriba y 10 abajo en la zona de logo y menu,
   y un poco mas de espacio entre los logos.»
   La fila crece 20 px en cada tramo y el aire bajo el logotipo pasa de 18 a
   28, con lo que los 10 de arriba y los 10 de abajo quedan repartidos como
   pide. La separacion entre marcas sube de clamp(34,3.6vw,56) a
   clamp(48,5vw,80) — comprobado que el ovalo del menu sigue cabiendo a 1200,
   1440 y 1680. Y con la fila mas alta hay que volver a mover las tres piezas
   que cuelgan de ella.
   ========================================================================== */

@media (min-width: 1181px) {
  .site-header:not(.is-compact) .brand-primary-clinic,
  .site-header:not(.is-compact) .brand-primary-studio,
  .site-header:not(.is-compact) .universe-switch { margin-bottom: 28px; }
  .site-header:not(.is-compact) .universe-switch { margin-left: clamp(48px, 5vw, 80px); }
}
@media (min-width: 1181px) and (max-width: 1359px) {
  .header-inner,
  .site-header.is-compact .header-inner { height: 136px; }
  .site-header.is-compact .header-inner { height: 92px; }
  .topic-nav { top: 168px; }
  .treatment-catalog .treatment-image { top: 121px; height: min(620px, calc(100svh - 196px)); }
  .schedule-detail { top: 180px; }
}
@media (min-width: 1360px) {
  .header-inner,
  .site-header.is-compact .header-inner { height: 156px; }
  .site-header.is-compact .header-inner { height: 100px; }
  .topic-nav { top: 188px; }
  .treatment-catalog .treatment-image { top: 141px; height: min(620px, calc(100svh - 216px)); }
  .schedule-detail { top: 200px; }
}
@media (min-width: 1600px) {
  .header-inner,
  .site-header.is-compact .header-inner { height: 168px; }
  .site-header.is-compact .header-inner { height: 104px; }
  .topic-nav { top: 200px; }
  .treatment-catalog .treatment-image { top: 153px; height: min(620px, calc(100svh - 228px)); }
  .schedule-detail { top: 212px; }
}

/* ==========================================================================
   FASE5T-CIERRE - 16-09-2026
   Tres remates que quedaban ofrecidos:
   1) Escena 01: el bloque de texto seguia rozando el logotipo pintado en la
      pared del fondo. Baja con el mismo recurso de la escena de Studio
      (`margin-top`, nunca `transform`: compite con la animacion de entrada
      del slideshow y el bloque salta de golpe).
   2) Cabecera compacta (la de scroll): los logotipos suben tambien ahi, al
      76 % del tamano desplegado, y siguen midiendo lo mismo entre si.
   ========================================================================== */

@media (min-width: 761px) {
  .hero-sangre .hero-slide-intro .hero-copy { margin-top: clamp(54px, 9vh, 92px); }
}

@media (min-width: 1181px) {
  .site-header.is-compact .brand-primary-clinic { width: 226px !important; height: 59px !important; }
  .site-header.is-compact .brand-primary-studio { width: 194px !important; height: 59px !important; }
  .site-header.is-compact .universe-switch .universe-switch-logo { width: 194px !important; height: 59px !important; }
  .site-header.is-compact .universe-switch { grid-template-rows: 22px auto; min-height: 0; margin-bottom: 14px; }
  
}
@media (min-width: 1360px) {
  .site-header.is-compact .brand-primary-clinic { width: 245px !important; height: 64px !important; }
  .site-header.is-compact .brand-primary-studio { width: 210px !important; height: 64px !important; }
  .site-header.is-compact .universe-switch .universe-switch-logo { width: 210px !important; height: 64px !important; }
}
@media (min-width: 1600px) {
  .site-header.is-compact .brand-primary-clinic { width: 256px !important; height: 67px !important; }
  .site-header.is-compact .brand-primary-studio { width: 219px !important; height: 67px !important; }
  .site-header.is-compact .universe-switch .universe-switch-logo { width: 219px !important; height: 67px !important; }
}

/* FASE5T - medido tras bajar el texto de la escena 01: el parrafo caia sobre
   una zona mas clara de la foto y se quedaba en 3,47:1. La escena pasa al
   mismo perfil de velo que Studio y El espacio (muere en el 62 % en vez del
   58 %) y sube a 6,15. La escena completa: 6,15 - 16,06. */
@media (min-width: 761px) {
  .hero-sangre .hero-slide-intro .hero-media::after {
    background:
      linear-gradient(0deg,
        rgba(0,0,0,.72) 0%,
        rgba(0,0,0,.62) 11%,
        rgba(0,0,0,.22) 17%,
        rgba(0,0,0,0) 24%),
      linear-gradient(90deg,
        rgba(0,0,0,.86) 0%,
        rgba(0,0,0,.76) 25%,
        rgba(0,0,0,.48) 42%,
        rgba(0,0,0,.14) 54%,
        rgba(0,0,0,0) 62%);
  }
}

/* FASE5T - `.site-header.is-compact .brand-primary-clinic img { height: 40px }`
   (linea 12235) clavaba el logotipo de Clinica en 40 px en la cabecera de
   scroll: quedaba mas pequeno que el de Studio y desalineado. */
@media (min-width: 1181px) {
  .site-header.is-compact .brand-primary-clinic img,
  .site-header.is-compact .brand-primary-studio img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    object-position: left center;
  }
  .site-header.is-compact .brand-primary-clinic,
  .site-header.is-compact .brand-primary-studio { align-self: flex-end; }
}

/* FASE5T - en la compacta el rotulo de dos lineas no cabia en su fila de
   22 px y se veia cortado por arriba: la fila sube a 28 y el aire inferior
   baja a 8, que es lo que da la altura de 100. */
@media (min-width: 1181px) {
  .site-header.is-compact .universe-switch { grid-template-rows: 28px auto; margin-bottom: 8px; }
  .site-header.is-compact .universe-switch b { align-self: center; line-height: 1.02; }
  .site-header.is-compact .brand-primary-clinic,
  .site-header.is-compact .brand-primary-studio { margin-bottom: 8px; }
}

/* ==========================================================================
   FASE5U-HERO-PIEZA - 16-09-2026
   Opcion C: el hero deja de ir a sangre y pasa a ser una pieza con margen,
   esquinas redondeadas y sombra sobre el papel de la cabecera.
   El filete de marca NO desaparece: se integra en el borde superior de la
   pieza, siguiendo su curvatura, para que la idea del verde -> fucsia siga
   contando los dos espacios sin competir con el marco.
   En movil el margen y el radio se reducen (la pantalla no sobra) y a
   480 px la pieza vuelve a sangre.
   Se retira borrando el bloque.
   ========================================================================== */

.hero-sangre {
  position: relative;
  width: min(100% - 48px, 1560px);
  margin: 18px auto 0;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(18,18,18,.16);
}

/* El filete pasa a vivir dentro de la pieza, sobre su borde curvo. */
.hero-sangre::before {
  z-index: 6;
  height: 5px;
  border-radius: 30px 30px 0 0;
}

@media (max-width: 980px) {
  .hero-sangre { width: min(100% - 28px, 1560px); margin-top: 12px; border-radius: 22px; box-shadow: 0 18px 44px rgba(18,18,18,.14); }
  .hero-sangre::before { border-radius: 22px 22px 0 0; }
}
@media (max-width: 480px) {
  .hero-sangre { width: 100%; margin-top: 0; border-radius: 0; box-shadow: none; }
  .hero-sangre::before { border-radius: 0; }
}

/* ==========================================================================
   FASE5V-ANCHO-HERO-Y-BANDA - 16-09-2026
   1) «El slideshow tiene que coger desde el comienzo del primer logo hasta el
      final del menu.» Medido: el logotipo arranca en `var(--pad)` y el ovalo
      del menu acaba en `100% - var(--pad)` (66/1374 a 1.440 px y 85/1755 a
      1.840). El hero pasa a ese mismo ancho exacto; se retira el tope de
      1.560 px, que era lo que lo dejaba corto en pantallas anchas.

   2) «El modulo de abajo sigue teniendo dos colores.» DIAGNOSTICADO de
      verdad: el `::after` a sangre que se puso ayer NO SE PINTA. Comprobado
      pintandolo de rojo en el navegador: no aparece en ningun pixel. La causa
      es el `z-index: -1`, que manda el pseudo-elemento detras del fondo del
      contexto de apilamiento y por tanto detras del papel del body.
      Se sustituye por el par `box-shadow` de 100vmax + `clip-path` vertical,
      que pinta la banda a los lados sin pseudo-elemento y sin z-index
      negativo. Medido despues: mismo color de borde a borde.
   ========================================================================== */

.hero-sangre { width: calc(100% - var(--pad) * 2); max-width: none; }

body.home-page .spaces-intro::after,
body.home-page .method-section::after,
body.home-page .home-guide::after { content: none !important; }

body.home-page .spaces-intro,
body.home-page .method-section,
body.home-page .home-guide {
  background: #f8f7f4;
  box-shadow: 0 0 0 100vmax #f8f7f4;
  clip-path: inset(0 -100vmax);
}

/* FASE5V - el ancho exacto. A partir de 1.440 px la cabecera NO usa
   `var(--pad)`: la regla de la iteracion 105 le pone
   `clamp(64px, 4.6vw, 88px)` a los dos lados (66,24 px a 1.440 y 84,64 a
   1.840). El hero copia ese mismo valor para que sus bordes caigan
   exactamente donde empieza el logotipo y donde acaba el ovalo del menu. */
@media (min-width: 1440px) {
  .hero-sangre { width: calc(100% - clamp(64px, 4.6vw, 88px) * 2); }
}

/* FASE5V - «los laterales del slideshow, del mismo color que el modulo de
   abajo». Detras de la pieza del hero se veia el papel del body (#f2f0eb)
   mientras el primer modulo ya es #f8f7f4. El papel de la PORTADA pasa a
   #f8f7f4, que es el color con el que arranca el ritmo de bloques; el resto
   de paginas conserva el suyo. */
body.home-page { background: #f8f7f4; }

/* ==========================================================================
   FASE5W-SOMBRA-SIN-DERRAME - 16-09-2026
   «El color a los lados del slideshow es #F6F5F2 y el del modulo inmediatamente
   inferior #F8F7F4; tienen que ser iguales.» DIAGNOSTICO: el papel ya es
   #f8f7f4 en los dos sitios (FASE5V). Lo que oscurece los laterales es la
   PROPIA SOMBRA de la pieza del hero: `0 30px 70px` se difumina 35 px hacia
   cada lado sobre un papel que solo tiene 60-66 px de margen, asi que el color
   que se mide junto al borde es el papel + sombra = #f6f5f2.
   Se confina la sombra al pie con un radio de dispersion negativo IGUAL al
   desenfoque. Medido en Chromium: el desenfoque de `box-shadow` se extiende
   hacia fuera del borde casi su radio completo, no la mitad; con spread =
   -blur el derrame lateral cae a 2-3 niveles en los 4 px pegados al borde y
   a 10 px del borde el papel ya mide 248,247,244 = #f8f7f4 exacto. La pieza mantiene el mismo efecto de relieve hacia abajo y los
   laterales quedan en #f8f7f4 exacto, igual que el modulo de abajo.
   Se retira borrando el bloque.
   ========================================================================== */

.hero-sangre { box-shadow: 0 30px 44px -44px rgba(18,18,18,.60); }

@media (max-width: 980px) {
  .hero-sangre { box-shadow: 0 18px 28px -28px rgba(18,18,18,.55); }
}
@media (max-width: 480px) {
  .hero-sangre { box-shadow: none; }
}


/* --------------------------------------------------------------------------
   FASE6A - 16-09-2026. «La solucion al banner de Pide cita no se aplica en
   todos.» Cierto: el bloque se escribio acotado a `body.home-page` y el
   modulo esta en las 438 paginas. Se duplica cada selector con
   `body:not(.home-page)`, que tiene la misma especificidad (0,3,x) que
   `body.home-page`, para no alterar la cascada en la portada y aplicar lo
   mismo en el resto del sitio, Studio incluido.
   -------------------------------------------------------------------------- */
/* ==========================================================================
   FASE5X-PIDE-CITA-EQUILIBRIO - 16-09-2026
   «El cliente quiere los botones redondos de Clinica y Studio y a mi me
   parece todo demasiado vacio.» Los discos se quedan: lo que falla es el
   reparto del espacio. Medido a 1.440 px: el titular ocupaba una banda propia
   de ancho completo con ~900 px de papel muerto a su derecha, y cada disco
   (210 px) flotaba dentro de una caja de 319x255 sin fondo, al lado de un
   banner de 638x255 lleno de imagen y texto. Tres piezas de peso muy distinto.
   Tres ajustes, ninguno toca el HTML:
   1) Rejilla de CUATRO columnas: el titular deja de ser una banda y pasa a ser
      la primera columna, centrado con las piezas. Se recupera todo el alto
      muerto de arriba.
   2) Cada disco se apoya en una TARJETA de papel propio (radio 28, borde y
      sombra suaves) de la misma altura que el banner del Herbolario, y el
      disco crece. Las tres piezas pasan a pesar lo mismo.
   3) TRAZO DE MARCA por detras: un arco verde->fucsia muy tenue cruza la
      seccion como fondo de la propia seccion (background-image, NO un
      pseudo-elemento con z-index negativo, que en este sitio no se pinta),
      mas un velo radial calido. Llena el aire sin anadir contenido.
   Se retira borrando el bloque.
   ========================================================================== */

/* 3 · trazo de marca + velo, como fondo de la seccion */
body.home-page .appointment-section.section-dark ,
body:not(.home-page) .appointment-section.section-dark {
  background-image:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 560' preserveAspectRatio='none'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%238fbd18' stop-opacity='.55'/%3E%3Cstop offset='.52' stop-color='%238fbd18' stop-opacity='.30'/%3E%3Cstop offset='1' stop-color='%23d61d8d' stop-opacity='.42'/%3E%3C/linearGradient%3E%3Cpath d='M-60 432 C 300 250 780 232 1160 316 C 1320 352 1420 392 1500 418' fill='none' stroke='url(%23g)' stroke-width='2.5'/%3E%3C/svg%3E"),
    radial-gradient(110% 80% at 14% 16%, rgba(143,189,24,.055), transparent 56%),
    radial-gradient(85% 70% at 97% 94%, rgba(214,29,141,.035), transparent 60%);
  background-repeat: no-repeat;
  background-position: center, center, center;
  background-size: 100% 100%, 100% 100%, 100% 100%;
}

@media (min-width: 1121px) {
  /* 1 · cuatro columnas en una sola fila */
  body.home-page .appointment-section ,
body:not(.home-page) .appointment-section {
    grid-template-columns: minmax(214px, .78fr) minmax(0, .70fr) minmax(0, .70fr) minmax(0, 1.96fr);
    gap: clamp(18px, 1.7vw, 28px);
    align-items: stretch;
    padding-top: clamp(56px, 5vw, 74px);
    padding-bottom: clamp(56px, 5vw, 74px);
  }
  body.home-page .appointment-section > *,
body:not(.home-page) .appointment-section > *,
  body.home-page .appointment-section .space-logo ,
body:not(.home-page) .appointment-section .space-logo { min-width: 0; }
  body.home-page .appointment-section .appointment-copy ,
body:not(.home-page) .appointment-section .appointment-copy {
    grid-column: auto;
    align-self: center;
    padding-right: clamp(6px, 1vw, 16px);
  }
  body.home-page .appointment-section .appointment-copy p ,
body:not(.home-page) .appointment-section .appointment-copy p { margin-bottom: 0; }
}

/* 2 · tarjeta bajo cada disco */
body.home-page .appointment-section .space-card ,
body:not(.home-page) .appointment-section .space-card {
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 268px;
  padding: clamp(22px, 2vw, 30px);
  border: 1px solid rgba(18,18,18,.10);
  border-radius: 28px;
  background: #fdfdfb;
  box-shadow: 0 20px 36px -28px rgba(18,18,18,.42);
}
body.home-page .appointment-section .space-card:hover ,
body:not(.home-page) .appointment-section .space-card:hover {
  background: #fff;
  border-color: rgba(143,189,24,.55);
  transform: translateY(-4px);
}
body.home-page .appointment-section .studio-card:hover ,
body:not(.home-page) .appointment-section .studio-card:hover { border-color: rgba(214,29,141,.50); }

/* el disco crece dentro de su tarjeta */
body.home-page .appointment-section .space-logo ,
body:not(.home-page) .appointment-section .space-logo {
  width: min(clamp(132px, 11.4vw, 178px), 100%);
  height: auto;
  aspect-ratio: 1;
  flex: 0 0 auto;
}

/* la flecha deja de competir con el disco: pasa a boton en la esquina */
body.home-page .appointment-section .space-card > b ,
body:not(.home-page) .appointment-section .space-card > b {
  position: absolute;
  right: 16px;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--green-dark);
  font-size: 1.25rem;
  line-height: 1;
  background: rgba(143,189,24,.12);
  border-radius: 50%;
  transition: background .25s ease, color .25s ease;
}
body.home-page .appointment-section .studio-card > b ,
body:not(.home-page) .appointment-section .studio-card > b { color: var(--pink-dark); background: rgba(214,29,141,.10); }
body.home-page .appointment-section .clinic-card:hover > b ,
body:not(.home-page) .appointment-section .clinic-card:hover > b { color: #fff; background: var(--green-dark); }
body.home-page .appointment-section .studio-card:hover > b ,
body:not(.home-page) .appointment-section .studio-card:hover > b { color: #fff; background: var(--pink-dark); }

/* el banner del Herbolario iguala el radio de las tarjetas */
body.home-page .appointment-section .herbalist-card ,
body:not(.home-page) .appointment-section .herbalist-card { border-radius: 28px; }
@media (min-width: 1121px) {
  /* el banner llevaba `aspect-ratio: 1200/480` + `align-self: center`: con la
     altura de la tarjeta se ensanchaba a 679 px y se salia de su columna. */
  body.home-page .appointment-section .herbalist-card ,
body:not(.home-page) .appointment-section .herbalist-card { align-self: stretch; min-height: 0; }
  body.home-page .appointment-section .space-card ,
body:not(.home-page) .appointment-section .space-card { min-height: 0; }
}
body.home-page .appointment-section .herbalist-card img ,
body:not(.home-page) .appointment-section .herbalist-card img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1120px) {
  body.home-page .appointment-section .space-card ,
body:not(.home-page) .appointment-section .space-card { min-height: 236px; }
}
@media (max-width: 700px) {
  body.home-page .appointment-section .space-card ,
body:not(.home-page) .appointment-section .space-card { min-height: 210px; border-radius: 24px; }
  body.home-page .appointment-section .herbalist-card ,
body:not(.home-page) .appointment-section .herbalist-card { border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  body.home-page .appointment-section .space-card:hover ,
body:not(.home-page) .appointment-section .space-card:hover { transform: none; }
}

/* ==========================================================================
   FASE5Y-CABECERA-CONTINUA - 16-09-2026
   Juan, con el hero ya convertido en pieza con margen: «me gusta mas que haya
   continuidad de color entre el slideshow y la zona de los logos y el menu.
   Ademas, si lo pusieramos todo del mismo color, quitaria la linea gris
   separatoria.» De acuerdo: desde que el hero flota, el limite de la cabecera
   lo marca el borde curvo de la propia pieza, asi que la linea sobra; y el
   escalon de 6 puntos entre #f2f0eb y #f8f7f4 no se lee como intencion, se
   lee como un fallo de montaje (es justo lo que se estuvo midiendo dos veces
   esta manana).
   Se unifica en #f8f7f4, que es el color que ya tienen el papel del hero y el
   primer modulo, y se retira `border-bottom` de la cabecera.
   REMATE NECESARIO: sin linea ni cambio de tono, al bajar la pagina la
   cabecera fija se funde con el contenido que pasa por debajo. La separacion
   vuelve SOLO en el estado compacto (`.is-compact`), y como sombra, no como
   filete: separa mientras hay algo debajo y desaparece en reposo.
   El submenu se queda en #f2f0eb (color que fijo Juan el 15-09): sobre el
   papel nuevo sigue leyendose como panel.
   Contrastes medidos sobre #f8f7f4: menu 17,49 · submenu 17,63 · «Ver todos
   los tratamientos» 5,66 · rotulo «Ir a» 4,97 · «Studio Salux» 6,79.
   Se retira borrando el bloque.
   ========================================================================== */

.site-header { background: #f8f7f4; border-bottom: 0; }
.site-header .header-brand-row { background: #f8f7f4; }
.site-header.is-compact {
  box-shadow: 0 10px 26px -16px rgba(18,18,18,.26);
  transition: height .25s ease, box-shadow .25s ease;
}

/* ==========================================================================
   FASE5Z-FLOTANTES-AL-BORDE - 16-09-2026
   «Necesito que estos dos botones se peguen a la derecha de la web, que no
   quede espacio; si quieres, poner unos pixeles mas anchos.»
   Los dos botones son medias pildoras (`border-radius: 999px 0 0 999px`):
   estan dibujados para apoyarse en el borde, y con 18-20 px de separacion su
   lado recto flotaba en el aire y se leia como un recorte. En movil ya se
   habian pegado (bloque de <=760 px); aqui se hace lo mismo en escritorio.
   Al pegarlos, el icono se quedaba a ras del borde, asi que la caja gana
   12 px de ancho (58 -> 70) con 6 px de relleno a la derecha: el icono
   conserva su tamano y recupera aire. El ancho del WhatsApp desplegado sube
   en la misma proporcion (206 -> 218).
   La sombra pasa a proyectarse hacia la izquierda, que es el unico lado por
   el que ahora se ve.
   Se retira borrando el bloque.
   ========================================================================== */

@media (min-width: 761px) {
  .floating-tools { right: env(safe-area-inset-right, 0px); }
  .scroll-top,
  .whatsapp-button {
    width: 70px;
    padding-right: 6px;
    box-shadow: -8px 12px 30px rgba(0,0,0,.24);
  }
  .whatsapp-button:hover,
  .whatsapp-button:focus-visible { width: 218px; box-shadow: -10px 14px 38px rgba(0,0,0,.3); }
  /* el boton de WhatsApp media 62 px de alto y el de subir 58: el SVG usaba
     `box-sizing: content-box`, asi que su relleno sumaba fuera de los 58. */
  .whatsapp-button { height: 58px; }
  .whatsapp-button svg { box-sizing: border-box; height: 58px; }
}

/* ==========================================================================
   FASE6B-FORMULARIOS-ICONO-Y-BUSCADOR - 16-09-2026
   Tres remates que pidio Juan viendo la web construida.

   1) «Necesito que sean un poco mas oscuros los diferentes formularios: el
      del test, el de la Clinica y el del Studio.» MEDIDO antes: no solo eran
      claros, eran INCOHERENTES entre si. El panel de contacto (Clinica y
      Studio) estaba en #fbfaf7, MAS CLARO que el papel de la pagina
      (#f2f0eb), mientras el del test estaba en #e8e5de, mas oscuro. Y en el
      test los campos tenian exactamente el color del papel (#f2f0eb), asi
      que no se leian como campos.
      Se unifican los tres: panel #e6e2da (un paso por debajo del papel, con
      un filete propio) y campos en blanco. El conjunto pesa mas -que es lo
      pedido- y el campo se distingue del panel, no al reves.

   2) «El icono home de la Clinica se ve muy diluido, se ve mejor el de
      Studio.» MEDIDO: el de Clinica usaba `--green-bright` (#a8d21b) sobre
      el ovalo casi blanco = 1,9:1, por debajo del 3:1 que WCAG 2.1 pide a un
      elemento grafico; el de Studio usa fucsia y por eso si se ve. Pasa a
      `--green-dark` (#4d6c00), 5,66:1 sobre ese fondo, y el trazo sube de
      1,6 a 1,9 px, que es lo que hace legible un icono de linea.

   3) «En el buscador queda mucho espacio con la parte inferior a las
      sugerencias.» MEDIDO: `.search-results-shell` reserva `min-height:
      540px` + 100 px de relleno inferior para que la lista de resultados no
      empuje la pagina al aparecer; sin busqueda hecha eso deja 396 px
      vacios. La reserva se mantiene SOLO cuando hay resultados: mientras
      `.search-results` este vacio, el contenedor se ajusta al contenido.
      Va dentro de `@supports selector(:has(*))` para que un navegador sin
      `:has()` conserve el comportamiento de hoy en vez de romperse.
   Se retira borrando el bloque.
   ========================================================================== */

/* 1 · los tres formularios */
.nutrition-form,
.contact-form-panel {
  background: #e6e2da;
  border: 1px solid rgba(18,18,18,.10);
}
.nutrition-form input[type="text"],
.nutrition-form input[type="email"],
.nutrition-form input[type="tel"],
.nutrition-form input[type="date"],
.nutrition-form input[type="number"],
.nutrition-form select,
.nutrition-form textarea,
.contact-form-panel input[type="text"],
.contact-form-panel input[type="email"],
.contact-form-panel input[type="tel"],
.contact-form-panel input[type="date"],
.contact-form-panel input[type="number"],
.contact-form-panel select,
.contact-form-panel textarea {
  background: #fff;
  border: 1px solid rgba(18,18,18,.24);
}

/* 2 · el icono de inicio, legible.
   MEDIDO en la web construida: `.main-nav .nav-home` (0,2,0) lo dejaba en
   #d8d8d8 -herencia de la cabecera oscura- en todas las paginas menos la
   portada, donde `is-active` le ponia el verde claro #a8d21b. Sobre el ovalo
   casi blanco eso es 1,15:1 y 1,9:1 respectivamente: invisible el primero y
   muy diluido el segundo. Hace falta 0,3,0 para ganar a esa regla. */
.site-header .main-nav .nav-home,
.site-header .main-nav .nav-home.is-active { color: var(--green-dark); }
body.studio-page .site-header .main-nav .nav-home,
body.studio-page .site-header .main-nav .nav-home.is-active,
body.studio-content-page .site-header .main-nav .nav-home { color: var(--pink-dark); }
.site-header .main-nav .nav-home svg { stroke-width: 1.9; }

/* 3 · el buscador, sin hueco mientras no hay resultados */
@supports selector(:has(*)) {
  .search-results-shell:has(.search-results:empty) {
    min-height: 0;
    padding-bottom: clamp(36px, 4vw, 56px);
  }
}

/* ==========================================================================
   FASE6C-CABECERA-SIN-VIBRACION - 16-09-2026
   «Pues a mi me siguen vibrando los logos y mucho.» Acotado con Juan: pasa
   SOLO mientras hace scroll, en Chrome al 100 %.
   CAUSA (medida): la cabecera es `position: sticky`, asi que ocupa sitio en
   el flujo. Al compactarse pierde 56 px de alto (205 -> 149 a 1.440 px) y el
   documento entero se acorta esos 56 px. El interruptor estaba en
   `scrollY > 24`, justo donde se empieza a mover la rueda, y sin histeresis:
   entraba y salia del estado compacto en bucle. Encima, `transition: height
   .25s` convertia cada cambio en 15 fotogramas de recolocacion en vez de uno.
   Dos medidas:
   1) HISTERESIS en site.js: compacta al pasar de 96 px, suelta por debajo de
      32. Entre los dos valores no hay cambio posible.
   2) La altura deja de animarse. Lo que se anima ahora es solo la sombra, que
      no toca el layout. Un cambio de altura instantaneo es un salto de un
      fotograma; animado es un temblor de un cuarto de segundo.
   Se retira borrando el bloque (y deshaciendo la histeresis en site.js).
   ========================================================================== */

.site-header { transition: box-shadow .25s ease; }
.site-header.is-compact { transition: box-shadow .25s ease; }

/* ==========================================================================
   FASE6D-IR-A-PILDORA - 16-09-2026
   Juan: «estoy aun intentando afinar el "ir a", ¿no quedaria mas elegante un
   boton discreto con "Ir a..."?». Si, y por una razon concreta: hoy es texto
   suelto en DOS lineas -«IR A» encima y el nombre debajo- flotando sobre el
   logotipo. Son dos niveles tipograficos compitiendo con una marca que ya
   tiene los suyos, y ademas no parece pulsable.
   Pasa a pildora de UNA linea dentro del propio enlace.
   OJO, decision de accesibilidad: NO se mete un <button> dentro del <a>. El
   conmutador entero ya es un enlace (`aria-label="Ir a Studio Salux"`) y
   anidar un control dentro de otro es invalido y confunde a los lectores de
   pantalla. La pildora es el mismo <b aria-hidden> de siempre, con forma de
   boton: un solo objetivo pulsable, ninguna semantica nueva.
   Se retira borrando el bloque.
   ========================================================================== */
/* La cabecera define `.site-header .universe-switch b` (0,3,1), que gana a
   `.universe-switch b` (0,2,1): la pildora necesita ese mismo prefijo. */
.site-header .universe-switch b {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  grid-column: 2;
  place-self: end start;
  width: auto;
  height: auto;
  margin: 0 0 5px;
  padding: 3px 10px 4px;
  color: #56544f;
  font-size: .56rem;
  letter-spacing: .14em;
  line-height: 1;
  white-space: nowrap;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(18,18,18,.16);
  border-radius: 999px;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.site-header .universe-switch b span {
  display: inline;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: -.005em;
}
.site-header .universe-switch b::after {
  content: "\2192";
  font-size: .68rem;
  letter-spacing: 0;
  opacity: .8;
}

/* el color lo pone el espacio AL QUE SE VA, no en el que estas */
.site-header .universe-switch-studio b { border-color: rgba(214,29,141,.34); }
.site-header .universe-switch-studio b span { color: var(--pink-dark); }
.site-header .universe-switch-clinic b { border-color: rgba(143,189,24,.44); }
.site-header .universe-switch-clinic b span { color: var(--green-dark); }

/* 16-09: Juan pide que al PULSAR se vea como el hover. `:active` cubre el
   clic con raton y tambien el toque en pantalla tactil, donde no hay hover
   y sin esto no habria ninguna respuesta visual al dedo. */
.site-header .universe-switch:hover b,
.site-header .universe-switch:focus-visible b,
.site-header .universe-switch:active b { color: #fff; border-color: transparent; }
.site-header .universe-switch:hover b span,
.site-header .universe-switch:focus-visible b span,
.site-header .universe-switch:active b span { color: #fff; }
.site-header .universe-switch-studio:hover b,
.site-header .universe-switch-studio:focus-visible b,
.site-header .universe-switch-studio:active b { background: var(--pink-dark); }
.site-header .universe-switch-clinic:hover b,
.site-header .universe-switch-clinic:focus-visible b,
.site-header .universe-switch-clinic:active b { background: var(--green-dark); }

/* un apunte tactil de que se ha pulsado, sin mover el layout */
.site-header .universe-switch:active b { transform: scale(.97); transition: background .12s ease, transform .12s ease; }

/* «Sin subrayar el nombre». El conmutador es un <a> y la regla general de
   enlaces le pone subrayado al pasar el raton; dentro de la pildora sobra,
   porque la propia pildora ya es la senal de que aquello se pulsa. */
.site-header .universe-switch,
.site-header .universe-switch b,
.site-header .universe-switch b span,
.site-header .universe-switch:hover b,
.site-header .universe-switch:hover b span,
.site-header .universe-switch:focus-visible b,
.site-header .universe-switch:focus-visible b span,
.site-header .universe-switch:active b,
.site-header .universe-switch:active b span { text-decoration: none; }

@media (max-width: 1180px) {
  .site-header .universe-switch b { font-size: .52rem; padding: 2px 8px 3px; }
  .site-header .universe-switch b span { font-size: .66rem; }
}

/* ==========================================================================
   FASE6D-2 - «Cuando se reduce al bajar por la web, se pierde la pildora.»
   Correcto: la cabecera compacta conserva reglas del diseno ANTERIOR, cuando
   el <b> era un circulo de 22-25 px con una flecha dentro
   (`.site-header.is-compact .universe-switch b { width: 22px; height: 22px }`,
   0,4,1). Ganan por especificidad a la pildora (0,3,1) y la devolvian a caja
   pequena y esquinada. Se repite la pildora con ese mismo prefijo, un punto
   mas compacta, para los tres tramos en los que la cabecera se reduce.
   ========================================================================== */

.site-header.is-compact .universe-switch b {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  grid-column: 2;
  place-self: end start;
  width: auto;
  height: auto;
  margin: 0 0 4px;
  padding: 2px 9px 3px;
  color: #56544f;
  font-size: .52rem;
  letter-spacing: .13em;
  line-height: 1;
  white-space: nowrap;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(18,18,18,.16);
  border-radius: 999px;
  text-decoration: none;
}
.site-header.is-compact .universe-switch b span {
  display: inline;
  margin-top: 0;
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: -.005em;
}
.site-header.is-compact .universe-switch b::after { content: "\2192"; font-size: .62rem; letter-spacing: 0; opacity: .8; }
.site-header.is-compact .universe-switch-studio b { border-color: rgba(214,29,141,.34); }
.site-header.is-compact .universe-switch-studio b span { color: var(--pink-dark); }
.site-header.is-compact .universe-switch-clinic b { border-color: rgba(143,189,24,.44); }
.site-header.is-compact .universe-switch-clinic b span { color: var(--green-dark); }
.site-header.is-compact .universe-switch:hover b,
.site-header.is-compact .universe-switch:focus-visible b,
.site-header.is-compact .universe-switch:active b { color: #fff; border-color: transparent; }
.site-header.is-compact .universe-switch:hover b span,
.site-header.is-compact .universe-switch:focus-visible b span,
.site-header.is-compact .universe-switch:active b span { color: #fff; }
.site-header.is-compact .universe-switch-studio:hover b,
.site-header.is-compact .universe-switch-studio:focus-visible b,
.site-header.is-compact .universe-switch-studio:active b { background: var(--pink-dark); }
.site-header.is-compact .universe-switch-clinic:hover b,
.site-header.is-compact .universe-switch-clinic:focus-visible b,
.site-header.is-compact .universe-switch-clinic:active b { background: var(--green-dark); }

/* ==========================================================================
   FASE6E-SUBMENU-LEGIBLE - 16-09-2026
   Juan: «el menu desplegable, ¿podria mejorar su visibilidad, textos un poco
   mas en negrita y un fondo con algun pequeno degradado en cada uno de los
   dos apartados?».
   Los «dos apartados» son las dos `<section class="submenu-block">` del
   desplegable de Tratamientos: TRATAMIENTOS (19 enlaces) y TECNICAS (17).
   Hoy son dos listas seguidas sobre un unico plano #f2f0eb, con los enlaces
   en peso 400 a 11,84 px: nada separa un apartado del otro y la lista pesa
   poco para 36 enlaces.
   Tres cosas:
   1) Cada apartado pasa a tarjeta con degradado vertical propio, de blanco al
      papel. Los dos son de Clinica, asi que NO se tinen de dos marcas
      distintas: el primero lleva un velo verde y el segundo uno neutro, lo
      justo para leerse como dos bloques. En Studio, velo fucsia.
   2) Los enlaces suben de 400 a 550 y los titulos de apartado de 650 a 720.
   3) El hover del enlace deja de ser solo color: lleva fondo propio, que es
      lo que hace que se siga la fila con la vista en una lista larga.
   Se retira borrando el bloque.
   ========================================================================== */

.submenu .submenu-block {
  padding: 16px 14px 14px;
  background: linear-gradient(180deg, #fff 0%, #faf9f6 58%, #f4f2ed 100%);
  border: 1px solid rgba(18,18,18,.07);
  border-radius: 16px;
}

.submenu-duo { gap: 10px; padding: 10px; }

/* el velo de marca, muy por debajo del texto */
.submenu .submenu-block:first-child {
  background:
    linear-gradient(180deg, rgba(143,189,24,.10) 0%, rgba(143,189,24,0) 46%),
    linear-gradient(180deg, #fff 0%, #faf9f6 58%, #f4f2ed 100%);
}
.submenu-studio .submenu-block:first-child,
body.studio-page .submenu .submenu-block:first-child {
  background:
    linear-gradient(180deg, rgba(214,29,141,.09) 0%, rgba(214,29,141,0) 46%),
    linear-gradient(180deg, #fff 0%, #faf9f6 58%, #f4f2ed 100%);
}

/* 2 · mas cuerpo en los textos */
.submenu a,
.submenu li > a { font-weight: 550; }
.submenu .submenu-block-head p { font-weight: 720; letter-spacing: .01em; }
.submenu .submenu-block-all { font-weight: 650; }

/* 3 · la fila del hover, no solo el color */
.submenu li > a {
  padding: 3px 8px;
  border-radius: 8px;
  transition: background .18s ease, color .18s ease;
}
.submenu li > a:hover,
.submenu li > a:focus-visible { color: var(--green-dark); background: rgba(143,189,24,.14); }
.submenu-studio li > a:hover,
.submenu-studio li > a:focus-visible,
body.studio-page .submenu li > a:hover { color: var(--pink-dark); background: rgba(214,29,141,.12); }

/* ==========================================================================
   FASE6E-2 - «Las dos columnas con degradado: me gusta la primera, la segunda
   tambien.» La segunda solo llevaba el degradado neutro de blanco a papel y a
   su lado se leia plana. Recibe el mismo velo que la primera, en FUCSIA: no
   es un color traido de fuera, el bloque de Tecnicas ya tiene su enlace «Ver
   todas las tecnicas» en fucsia desde el diseno anterior, asi que el velo lo
   acompana y de paso los dos apartados siguen distinguiendose entre si.
   Si se prefieren identicos, basta con cambiar aqui el fucsia por el verde.
   ========================================================================== */

.submenu .submenu-block + .submenu-block {
  background:
    linear-gradient(180deg, rgba(214,29,141,.085) 0%, rgba(214,29,141,0) 46%),
    linear-gradient(180deg, #fff 0%, #faf9f6 58%, #f4f2ed 100%);
}
.submenu-studio .submenu-block + .submenu-block,
body.studio-page .submenu .submenu-block + .submenu-block {
  background:
    linear-gradient(180deg, rgba(143,189,24,.10) 0%, rgba(143,189,24,0) 46%),
    linear-gradient(180deg, #fff 0%, #faf9f6 58%, #f4f2ed 100%);
}

/* ==========================================================================
   FASE6D-3 - «Los botones estos los dejamos con IR A CLÍNICA - IR A STUDIO.»
   El nombre del span pasa de «Clínica Salux» / «Studio Salux» a «Clínica» /
   «Studio» en el generador, y aqui se pone en mayusculas para que la pildora
   se lea como una sola linea de rotulo. El `aria-label` del enlace conserva
   el nombre completo («Ir a Studio Salux»), que es lo que oye quien navega
   con lector de pantalla: acortar el texto visible no debe acortar el
   destino anunciado.
   ========================================================================== */

.site-header .universe-switch b span,
.site-header.is-compact .universe-switch b span {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 750;
}
.site-header .universe-switch b { letter-spacing: .12em; }

/* ==========================================================================
   FASE6F-SUBMENU-MOVIL - 16-09-2026
   «El menu desplegable no funciona muy bien en la version movil.» Medido a
   390 px con el cajon abierto: el submenu de Tratamientos aparecia YA
   DESPLEGADO, con sus 36 enlaces y 1.441 px de alto dentro de un cajon de
   706 px. Para llegar a «Equipo» o «Contacto» habia que recorrer dos
   pantallas largas.

   CAUSA (no es de hoy): en <=1050 px la regla `.submenu { display: none }`
   cierra los desplegables, y `.has-submenu.is-open .submenu { display: grid }`
   los abre. Pero `.submenu-duo { display: grid }` (linea ~10289, SIN media
   query y posterior en el fichero) tiene la misma especificidad 0,1,0 y gana
   por orden: el duo nunca llegaba a cerrarse en movil. Con el diseno de
   escritorio anterior pasaba mas desapercibido; con las tarjetas de hoy se
   ve a la primera.

   Se corrige con `.submenu.submenu-duo` (0,2,0), que gana a esa regla sin
   tocarla, y se reabre con la clase que usa site.js.
   Ademas, en movil la tarjeta con degradado sobra —no hay dos columnas que
   distinguir y produce un recuadro dentro del cajon— y el rotulo
   «Tratamientos» del primer bloque repite el del propio acordeon.
   Se retira borrando el bloque.
   ========================================================================== */

@media (max-width: 1050px) {
  /* 1 · el duo obedece al cierre, como el resto de desplegables */
  .submenu.submenu-duo { display: none; }
  .has-submenu.is-open .submenu.submenu-duo,
  .has-submenu.is-open:hover .submenu.submenu-duo,
  .has-submenu.is-open:focus-within .submenu.submenu-duo { display: grid; }

  /* 2 · sin tarjeta dentro del cajon: lista limpia */
  .submenu .submenu-block,
  .submenu .submenu-block + .submenu-block,
  .submenu .submenu-block:first-child,
  .submenu-studio .submenu-block:first-child,
  body.studio-page .submenu .submenu-block:first-child {
    padding: 4px 0 10px;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .submenu .submenu-block + .submenu-block {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid rgba(18,18,18,.12);
  }
  .submenu-duo { gap: 0; padding: 0; }

  /* 3 · el rotulo del primer bloque repite el del acordeon */
  .submenu-duo .submenu-block:first-child .submenu-block-head p { display: none; }
  .submenu-duo .submenu-block-head { margin-bottom: 6px; }
}

/* ==========================================================================
   FASE6G-CABECERA-MOVIL - 16-09-2026
   Medido a 360, 390 y 430 px: el logotipo del conmutador se salia de su caja
   y de la pantalla. El contenedor `.universe-switch` mide 126 px, pero la
   imagen llevaba `height: 56px` con el ancho libre y, siendo el logotipo de
   Studio de 900x272 (3,3:1), se estiraba a 196 px: acababa en x=363 con la
   pantalla en 360 y se montaba sobre el boton del menu (x=322-346).
   La pildora hacia lo mismo: 145 px de ancho dentro de una caja de 126.
   Se le da al conmutador un ancho que mantiene los dos logotipos a la misma
   altura (139 px -> 42 px de alto, como el de Clinica) y la imagen pasa a
   depender del ancho, no del alto, que es lo que impide que vuelva a
   desbordarse. La pildora se ajusta al mismo ancho.
   Se retira borrando el bloque.
   ========================================================================== */

@media (max-width: 760px) {
  .site-header .universe-switch {
    width: 139px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .site-header .universe-switch-logo {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 46px;
    object-fit: contain;
    object-position: left center;
  }
  .site-header .universe-switch b,
  .site-header.is-compact .universe-switch b {
    max-width: 100%;
    overflow: hidden;
    padding: 2px 7px 3px;
    font-size: .46rem;
    letter-spacing: .08em;
  }
  .site-header .universe-switch b span,
  .site-header.is-compact .universe-switch b span { font-size: .56rem; letter-spacing: .04em; }
}

/* FASE6G-2 — la regla que de verdad desbordaba el logotipo en movil es
   `.site-header:not(.is-compact) .universe-switch .universe-switch-logo
   { width: 196px !important; height: 56px !important }`, escrita SIN media
   query cuando se igualaron los dos logotipos en escritorio. Al llevar
   `!important` no hay forma de ganarle desde una regla normal: hace falta
   repetir la especificidad y el `!important` dentro de la media query. */
@media (max-width: 760px) {
  .site-header:not(.is-compact) .universe-switch .universe-switch-logo,
  .site-header.is-compact .universe-switch .universe-switch-logo {
    width: 100% !important;
    height: auto !important;
    max-height: 46px;
    object-fit: contain;
    object-position: left center;
  }
}

/* FASE6G-3 — y aun asi el logotipo salia a 26 px: en movil el conmutador
   conserva del diseno antiguo un grid de dos columnas cuya primera columna
   media 26 px (era la del isotipo suelto), y la imagen esta colocada en
   `grid-area: 2 / 1`. Con `width: 100%` se ajustaba a esa columna, no al
   ancho del conmutador. En movil pasa a una sola columna. Medido despues a
   360, 390 y 430 px: logotipo 128x39 dentro del conmutador (139 px), pildora
   123 px, y el boton del menu libre a partir de x=322. Nada se sale. */
@media (max-width: 760px) {
  .site-header .universe-switch,
  .site-header.is-compact .universe-switch { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .site-header .universe-switch .universe-switch-logo,
  .site-header.is-compact .universe-switch .universe-switch-logo { grid-area: 2 / 1; }
  .site-header .universe-switch b,
  .site-header.is-compact .universe-switch b { grid-column: 1; grid-row: 1; }
}

/* ==========================================================================
   FASE6H - 16-09-2026 (noche) - tres avisos de Juan sobre la version subida
   y la preferencia de color del cliente (audio de WhatsApp de las 21:54).
   1 · Explorador de tratamientos de la portada en movil: las tarjetas seguian
       con el fondo #0d0d0d del diseno oscuro (regla de la linea ~948) mientras
       la banda ya es clara y el texto es tinta: nombre invisible salvo el activo.
       La portada de /tratamientos/ ya tenia este mismo remate (linea ~12955);
       se replica para `body.home-page .treatment-explorer`.
   2 · Botones del hero a sangre: `.hero-sangre .hero-actions .button` (0,3,0)
       fija el fondo translucido oscuro y el hover generico `.button-primary:hover`
       (0,2,0) solo llegaba a poner el texto y el borde en negro: boton negro.
       El hover pasa a relleno verde oscuro con texto blanco, como ya hacen los
       heroes interiores (`.inner-hero.section-dark .button-primary:hover`).
   3 · Verde de la barra «Pide cita» y del boton de WhatsApp: el cliente no
       quiere el lima (#a8d21b). WhatsApp vuelve a su verde de marca #25d366,
       que es el que tenia la web anterior (medido en clinicasalux.com:
       rgb(37,211,102)); la barra toma el verde oscuro del carril superior
       (#4d6c00 -> #3d5a0d) con texto blanco (6,1:1). En Studio la barra
       adopta el fucsia oscuro del espacio en lugar del lima.
   ========================================================================== */
@media (max-width: 760px) {
  body.home-page .treatment-explorer.section-dark .treatment-item {
    background: #fbfaf7;
    border: 1px solid rgba(18,18,18,.12);
  }
  body.home-page .treatment-explorer.section-dark .treatment-item:hover,
  body.home-page .treatment-explorer.section-dark .treatment-item.is-active { border-color: var(--green-dark); }
}

.hero-sangre .hero-actions .button-primary:hover,
.hero-sangre .hero-actions .button-primary:focus-visible {
  color: #fff;
  background-color: var(--green-dark);
  border-color: var(--green-dark);
}

.whatsapp-button,
.is-clinic-tools .whatsapp-button { color: #071d0d; background: #25d366; }

@media (max-width: 760px) {
  .floating-cta {
    color: #fff;
    background: linear-gradient(90deg, #4d6c00 0%, #3d5a0d 100%);
  }
  .floating-cta[href^="/studio-salux/"] {
    background: linear-gradient(90deg, #a80b61 0%, #8a0a50 100%);
  }
}

/* El boton de Studio del mismo hero no cambiaba nada al pasar el raton (blanco
   sobre blanco): relleno fucsia oscuro, misma logica que el verde de Clinica. */
.hero-sangre .hero-actions .button-studio:hover,
.hero-sangre .hero-actions .button-studio:focus-visible {
  color: #fff;
  background-color: var(--pink-dark);
  border-color: var(--pink-dark);
}

/* ==========================================================================
   FASE6I - 16-09-2026 - chevron del acordeon en el menu movil.
   El glifo «⌄» del boton `.submenu-toggle` mide unos 8 px en gris #767676:
   Juan pide que sea mucho mas evidente. En movil el boton pasa a ser un disco
   de 44 px con borde y un chevron dibujado en CSS (10 px de lado, trazo de 2 px)
   en el color del espacio; gira 180° cuando el acordeon esta abierto
   (`aria-expanded="true"`). El glifo original se oculta solo en movil; en
   escritorio no cambia nada.
   ========================================================================== */
@media (max-width: 1050px) {
  .submenu-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 5px 0 5px auto;
    color: var(--green-dark);
    background: rgba(77,108,0,.08);
    border: 1.5px solid rgba(77,108,0,.45);
    border-radius: 50%;
    transition: background-color .2s ease, border-color .2s ease;
  }
  .submenu-toggle > span[aria-hidden] { font-size: 0; line-height: 0; }
  .submenu-toggle::after {
    content: "";
    display: block;
    width: 11px;
    height: 11px;
    margin-top: -6px;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .22s ease, margin .22s ease;
  }
  .submenu-toggle[aria-expanded="true"],
  .has-submenu.is-open .submenu-toggle {
    color: #fff;
    background: var(--green-dark);
    border-color: var(--green-dark);
  }
  .submenu-toggle[aria-expanded="true"]::after,
  .has-submenu.is-open .submenu-toggle::after { margin-top: 6px; transform: rotate(225deg); }
  .submenu-toggle:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }

  .main-nav-studio .submenu-toggle,
  .main-nav-studio .studio-disciplines-menu .submenu-toggle {
    color: var(--pink-dark);
    background: rgba(168,11,97,.08);
    border-color: rgba(168,11,97,.45);
  }
  .main-nav-studio .submenu-toggle[aria-expanded="true"],
  .main-nav-studio .has-submenu.is-open .submenu-toggle {
    color: #fff;
    background: var(--pink-dark);
    border-color: var(--pink-dark);
  }
  .main-nav-studio .submenu-toggle:focus-visible { outline-color: var(--pink-dark); }
}