/* ==========================================================================
   components.css — Dr. Rodrigo Mata · Componentes globales del sistema FINAL
   Header · Panel de navegación · Barra móvil · Footer · Modal Aviso de
   Publicidad · Formulario → WhatsApp · Botones · Eyebrow · Doctoralia ·
   Líneas orgánicas · Reveal. Requiere tokens.css y base.css.
   ========================================================================== */

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 18px 28px;
  font-size: var(--fs-btn); font-weight: var(--fw-bold); letter-spacing: var(--ls-btn); text-transform: uppercase;
  line-height: 1; border-radius: var(--r-2); border: var(--bw) solid transparent; white-space: nowrap;
  color: #fff; background: var(--c-teal);
  transition: background-color var(--d-hover) ease, color var(--d-hover) ease, border-color var(--d-hover) ease;
}
.btn:hover { background: var(--c-teal-hover); color: #fff; }
.btn .arrow { font-size: 14px; line-height: 1; }
.btn--sm { min-height: 0; padding: 12px 20px; font-size: 11px; }
.btn--secondary { background: transparent; color: var(--t-ink); border-color: var(--b-300); padding: 17px 24px; }
.btn--secondary:hover { background: transparent; color: var(--c-teal); border-color: var(--c-teal); }
.btn--secondary-photo { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); padding: 17px 24px; }
.btn--secondary-photo:hover { background: transparent; color: #fff; border-color: #fff; }
.btn--outline-dark { background: transparent; color: #fff; border-color: var(--s-black-6); font-weight: var(--fw-semibold); }
.btn--outline-dark:hover { background: transparent; color: var(--c-teal-300); border-color: var(--c-teal-300); }
.btn--black { background: var(--s-black); color: #fff; }
.btn--black:hover { background: var(--c-teal); }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--b-200); color: var(--t-faint); pointer-events: none; }
.link-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-btn); text-transform: uppercase;
  color: var(--c-teal); border-bottom: var(--bw) solid var(--c-teal-100); padding-bottom: 5px;
}
.link-cta:hover { border-color: var(--c-teal); color: var(--c-teal); }

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-teal);
}
.eyebrow--dark { color: var(--c-teal-300); }
.eyebrow--gray { color: var(--c-teal-100); }
.eyebrow--muted { color: var(--t-faint); }
.eyebrow--line::before { content: ""; display: block; width: 34px; height: 1px; background: currentColor; flex: 0 0 auto; }

/* ---------- Iconos SVG inline ---------- */
.icon { width: 16px; height: 16px; flex: 0 0 auto; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon--15 { width: 15px; height: 15px; }
.icon--18 { width: 18px; height: 18px; }
.icon--24 { width: 24px; height: 24px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px);
  border-bottom: var(--bw) solid var(--b-200);
  transition: box-shadow .3s ease;
}
.site-header__inner {
  position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: clamp(24px, 4vw, 56px); align-items: center;
}
.site-header__logo { display: flex; align-items: center; grid-row: 1 / span 2; }
.site-header__logo img { height: clamp(22px, 2.4vw, 31px); width: auto; transition: height var(--d-header) var(--ease); }
.site-header__topbar {
  display: flex; align-items: center; justify-content: flex-end; gap: 22px;
  padding: 14px 0 10px; border-bottom: var(--bw) solid var(--b-150);
  overflow: hidden; max-height: 80px; opacity: 1;
  transition: max-height var(--d-header) var(--ease), opacity .25s ease, padding var(--d-header) var(--ease), border-color var(--d-header) var(--ease);
}
.site-header__social { display: flex; align-items: center; gap: 14px; }
.site-header__social a { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .08em; color: var(--t-faint); padding: 6px 0; }
.site-header__social a:hover { color: var(--c-teal); }
.site-header__social .sep { width: 1px; height: 12px; background: var(--b-200); }
.site-header__nav {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: 0 clamp(18px, 2.4vw, 32px); white-space: nowrap; padding: 10px 0 12px;
  transition: padding var(--d-header) var(--ease);
}
.nav-link {
  position: relative; display: inline-block; padding: 10px 0;
  font-size: var(--fs-nav); font-weight: var(--fw-medium); letter-spacing: var(--ls-nav); color: var(--t-nav);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 4px; height: 2px; width: 100%; background: var(--c-teal);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--d-nav-underline) var(--ease);
}
.nav-link:hover { color: var(--t-ink); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--t-ink); font-weight: var(--fw-semibold); }
.site-header__navcta { display: none; margin-left: 8px; padding: 10px 18px; font-size: 10.5px; min-height: 0; }
.site-header__tabbar { display: none; align-items: center; justify-content: flex-end; gap: 18px; padding: 14px 0; }
.site-header__mobile { display: none; align-items: center; justify-content: space-between; height: var(--header-h-m); }
.site-header__mobile-actions { display: flex; align-items: center; gap: 12px; }
.tel-round {
  width: 44px; height: 44px; border: var(--bw) solid var(--b-200); border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .06em; color: var(--c-teal);
}
.tel-round:hover { border-color: var(--c-teal); }

/* Hamburguesa: botón real de 46×46 (44 en móvil), 3 barras 18/18/12 */
.hamburger {
  width: 46px; height: 46px; background: var(--s-black); border-radius: var(--r-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 0 0 auto;
}
.hamburger span { display: block; width: 18px; height: 1.5px; background: #fff; }
.hamburger span:nth-child(3) { width: 12px; }

/* Estado compacto (scrollY > 110, vuelve < 40) */
.site-header[data-compact="true"] { box-shadow: var(--sh-header); }
.site-header[data-compact="true"] .site-header__logo img { height: 22px; }
.site-header[data-compact="true"] .site-header__topbar { max-height: 0; opacity: 0; padding: 0; border-bottom-color: transparent; }
.site-header[data-compact="true"] .site-header__nav { padding: 18px 0; }
.site-header[data-compact="true"] .site-header__navcta { display: inline-flex; }

/* ==========================================================================
   PANEL DE NAVEGACIÓN (< 1100 px y móvil) — fuera del header para no
   heredar el backdrop-filter
   ========================================================================== */
.nav-panel {
  position: fixed; inset: 0; z-index: var(--z-panel);
  background: var(--s-black); color: #fff; overflow: auto;
  display: flex; flex-direction: column;
  padding: 0 var(--pad-x) 32px;
}
.nav-panel__top { height: 78px; display: flex; align-items: center; justify-content: space-between; border-bottom: var(--bw) solid var(--b-dark-3); flex: 0 0 auto; }
.nav-panel__top img { height: 22px; width: auto; filter: invert(1); }
.nav-panel__close {
  width: 46px; height: 46px; background: #fff; color: var(--s-black); border-radius: var(--r-2);
  display: flex; align-items: center; justify-content: center;
}
.nav-panel__nav { padding: 34px 0 0; display: flex; flex-direction: column; max-width: 560px; }
.nav-panel__nav a {
  font-size: 30px; font-weight: var(--fw-semibold); letter-spacing: -.03em; color: var(--t-on-dark-muted);
  padding: 18px 0; border-bottom: var(--bw) solid var(--b-dark-3);
}
.nav-panel__nav a:last-child { border-bottom: 0; }
.nav-panel__nav a:hover, .nav-panel__nav a[aria-current="page"] { color: #fff; }
.nav-panel__foot {
  margin-top: 24px; padding-top: 32px; border-top: var(--bw) solid var(--b-dark-3);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; max-width: 560px;
}
.nav-panel__foot .eyebrow { font-size: var(--fs-label-s); letter-spacing: var(--ls-label-s); margin-bottom: 12px; }
.nav-panel__foot p { font-size: 14px; line-height: 1.7; color: var(--t-on-dark-muted); }
.nav-panel__tel { display: inline-block; margin-top: 10px; font-size: 22px; font-weight: var(--fw-semibold); letter-spacing: -.02em; color: #fff; }
.nav-panel__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.nav-panel__social { display: flex; align-items: center; gap: 20px; }
.nav-panel__social a { font-size: var(--fs-micro); color: var(--t-muted); padding: 6px 0; }
.nav-panel__social a:hover { color: #fff; }
body.is-menu-open { overflow: hidden; }

/* ==========================================================================
   BARRA FIJA MÓVIL (WhatsApp + Llamar) — visible sólo ≤ 640 px
   ========================================================================== */
.mobile-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-mobile-bar);
  background: rgba(255,255,255,.97); border-top: var(--bw) solid var(--b-200);
  padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px)); gap: 10px;
}
.mobile-bar .btn { flex: 1; min-height: 50px; padding: 15px; font-size: 11px; letter-spacing: .12em; border-radius: 0; }
.mobile-bar .btn--secondary { flex: 0 0 118px; font-weight: var(--fw-semibold); }

/* ==========================================================================
   FOOTER (3 niveles, negro)
   ========================================================================== */
.site-footer { background: var(--s-black); color: #fff; position: relative; overflow: hidden; }
.site-footer--overlap .container { padding-top: 200px; }   /* Home: la tarjeta del formulario desborda 200 px */
.site-footer__main {
  position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(40px, 5vw, 80px); align-items: end; padding: 72px 0 56px; border-top: var(--bw) solid var(--b-dark-3);
}
.site-footer__logo { height: 40px; width: auto; filter: invert(1); }
.site-footer__eyebrow { margin: 36px 0 14px; font-size: var(--fs-label-s); letter-spacing: var(--ls-label-s); color: var(--c-teal-300); font-weight: var(--fw-semibold); text-transform: uppercase; }
.site-footer__claim { font-family: var(--f-serif); font-size: 22px; line-height: 1.45; color: var(--t-on-dark); max-width: 24em; }
.site-footer__contact { position: relative; display: flex; flex-direction: column; gap: 36px; padding-left: clamp(0px, 2vw, 32px); }
.site-footer__contact .site-footer__eyebrow { margin: 0 0 22px; }
.site-footer__phone { display: block; font-size: 26px; font-weight: var(--fw-semibold); letter-spacing: -.03em; color: #fff; white-space: nowrap; }
.site-footer__phone:hover { color: var(--c-teal-300); }
.site-footer__address { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: var(--t-on-dark-muted); display: flex; align-items: center; gap: 10px; letter-spacing: -.01em; }
.site-footer__address .icon { color: var(--c-teal-300); }
.site-footer__social { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.site-footer__social a { font-size: 14px; color: var(--t-on-dark); display: inline-flex; align-items: center; gap: 10px; }
.site-footer__social a:hover { color: var(--c-teal-300); }
.site-footer__navrow {
  display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap;
  padding: 26px 0; border-top: var(--bw) solid var(--b-dark-3);
}
.site-footer__nav { display: flex; gap: 12px 32px; white-space: nowrap; flex-wrap: wrap; }
.site-footer__nav a { font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--t-on-dark-muted); }
.site-footer__nav a:hover, .site-footer__nav a[aria-current="page"] { color: #fff; }
.site-footer__legal {
  border-top: var(--bw) solid var(--b-dark-3); padding: 24px 0 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.site-footer__legal-links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 12px; }
.site-footer__legal-links span { color: var(--t-body); }
.site-footer__legal-links a, .site-footer__legal-links button { color: var(--t-muted); font-size: 12px; font-family: inherit; padding: 0 0 2px; }
.site-footer__legal-links a:hover, .site-footer__legal-links button:hover { color: #fff; }
.site-footer__credit { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #8A8A8A; }   /* T-09A.1: 5.70:1 sobre #0B0B0B y 3.10:1 frente al enlace contiguo (#F2F1EF) */
.site-footer__credit img { height: 14px; width: auto; filter: grayscale(1) brightness(2.4); }
.site-footer__credit a { color: var(--t-on-dark); }   /* contraste ≥ 3:1 frente al texto contiguo (enlace sin subrayado) */
.site-footer__credit a:hover { color: var(--c-teal-100); }
.site-footer__credit--color img { filter: none; }

/* ==========================================================================
   MODAL AVISO DE PUBLICIDAD (<dialog>)
   ========================================================================== */
.aviso-dialog {
  border: 0; padding: 44px; margin: auto; max-width: 560px; width: calc(100% - 64px);
  background: #fff; color: var(--t-strong); border-radius: var(--r-2); box-shadow: var(--sh-modal);
}
.aviso-dialog::backdrop { background: rgba(11,11,11,.6); }
.aviso-dialog__eyebrow { font-size: 11px; letter-spacing: var(--ls-label-s); margin-bottom: 16px; }
.aviso-dialog__body { font-size: var(--fs-body-s); line-height: 1.85; color: var(--t-strong); }
.aviso-dialog__body p { margin: 0; }
.aviso-dialog__body .resp { font-weight: var(--fw-semibold); color: var(--t-ink); margin-bottom: 10px; }
.aviso-dialog__body .num { font-weight: var(--fw-semibold); color: var(--t-ink); }
.aviso-dialog__body .aviso { margin-top: 14px; font-weight: var(--fw-semibold); color: var(--t-ink); }
.aviso-dialog__close { margin-top: 32px; padding: 14px 26px; font-size: var(--fs-label); }

/* ==========================================================================
   FORMULARIO → WHATSAPP (tarjeta blanca sobre negro)
   ========================================================================== */
.wa-card {
  position: relative; background: #fff; color: var(--t-strong); border-radius: var(--r-2);
  padding: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 60px) clamp(36px, 4vw, 52px);
  box-shadow: var(--sh-card);
}
.wa-card::before { content: ""; position: absolute; top: 0; left: 56px; right: 56px; height: var(--bw-bar); background: var(--c-teal); }
.wa-card--overlap { margin: -40px 0 -200px; }        /* Home: a caballo del footer */
.wa-card--light { box-shadow: var(--sh-card-light); border: var(--bw) solid var(--b-200); }
.wa-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.wa-card__head .eyebrow { font-size: 11px; letter-spacing: var(--ls-label-s); }
.wa-card__note { font-size: 11px; color: var(--t-faint); }
.wa-card__title { margin: 14px 0 0; font-family: var(--f-serif); font-size: 28px; line-height: 1.25; font-weight: var(--fw-regular); letter-spacing: 0; color: var(--t-ink); }
.wa-form { display: flex; flex-direction: column; gap: 30px; margin-top: 40px; }
.wa-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 30px 32px; }
.field { display: block; }
.field__label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); margin-bottom: 10px;
}
.field__optional { font-weight: var(--fw-regular); letter-spacing: 0; text-transform: none; color: var(--t-faint); font-size: 12px; }
.field__control {
  width: 100%; min-height: 48px; border: 0; border-bottom: var(--bw) solid var(--b-300); border-radius: 0;
  background: transparent; padding: 10px 0 12px; font-size: 17px; color: var(--t-ink); outline: none;
  transition: border-color var(--d-hover) ease, box-shadow var(--d-hover) ease;
}
select.field__control, textarea.field__control { font-size: 15.5px; }
select.field__control {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E6E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; background-size: 16px;
}
textarea.field__control { resize: none; line-height: 1.6; }
.field__control:focus { border-bottom-color: var(--c-teal); box-shadow: 0 1px 0 var(--c-teal); }
.field__control:focus-visible { outline: none; }
.field__hint { display: block; margin-top: 10px; font-size: var(--fs-micro); color: var(--t-faint); }
.field__error { display: none; margin-top: 8px; font-size: 13px; color: #A64B3C; }
.field.is-invalid .field__control { border-bottom-color: #A64B3C; box-shadow: 0 1px 0 #A64B3C; }
.field.is-invalid .field__error { display: block; }
.wa-form__actions { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin-top: 6px; }
.wa-form__actions .btn { display: flex; padding: 19px 24px; }
.wa-form__privacy { font-size: 12px; color: var(--t-body); border-bottom: var(--bw) solid var(--b-200); padding-bottom: 3px; }
.wa-form__privacy:hover { color: var(--c-teal); }
.wa-form__legal { margin: 0; font-size: var(--fs-micro); line-height: var(--lh-small); color: var(--t-faint); }

/* ==========================================================================
   DOCTORALIA (franja)
   ========================================================================== */
.doctoralia { background: #fff; padding: 96px 0; border-bottom: var(--bw) solid var(--b-200); }
.doctoralia__row { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; }
.doctoralia__sep { width: 1px; height: 28px; background: var(--b-200); }
.doctoralia__rating { display: flex; align-items: center; gap: 18px; }
.doctoralia__stars { font-size: 20px; letter-spacing: .16em; color: var(--c-peach); line-height: 1; }
.doctoralia__count { font-size: 20px; font-weight: var(--fw-semibold); letter-spacing: -.02em; color: var(--t-ink); }
.doctoralia__count span[data-reviews-count] { font-weight: inherit; }
.doctoralia__count .of { font-weight: var(--fw-regular); color: var(--t-body); }
.doctoralia__source { margin: 20px 0 0; text-align: center; font-size: var(--fs-micro); color: var(--t-faint); }

/* ==========================================================================
   LÍNEAS ORGÁNICAS
   pathLength="1000" + stroke-dasharray 1000 + dashoffset 1000 → 0
   Criterio adoptado: progreso temporal consistente (misma duración por path).
   ========================================================================== */
@keyframes drawLine { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.lines { position: absolute; pointer-events: none; }
.lines path {
  fill: none; stroke-miterlimit: 10; stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: drawLine var(--d-lines) var(--ease) both;
}
.lines path:nth-child(1) { animation-delay: .2s; }
.lines path:nth-child(2) { animation-delay: .5s; }
.lines path:nth-child(3) { animation-delay: .8s; }
.lines--home path { animation-duration: var(--d-lines-home); }
.lines--onphoto path { stroke-width: 1.4; }
.lines--onphoto path:nth-child(1) { stroke: rgba(255,255,255,.30); }
.lines--onphoto path:nth-child(2) { stroke: rgba(255,255,255,.20); }
.lines--onphoto path:nth-child(3) { stroke: rgba(255,255,255,.11); }
.lines--onlight path { stroke-width: 1.6; }
.lines--onlight path:nth-child(1) { stroke: #DCDAD6; }
.lines--onlight path:nth-child(2) { stroke: #DCDAD6; }
.lines--onlight path:nth-child(3) { stroke: #E6E4E0; }
.lines--onblack path { stroke-width: 1.6; }
.lines--onblack path:nth-child(1) { stroke: rgba(255,255,255,.14); }
.lines--onblack path:nth-child(2) { stroke: rgba(255,255,255,.08); }
.lines--onblack path:nth-child(3) { stroke: rgba(255,255,255,.05); }
/* Posiciones canónicas del handoff (LINEAS_ORGANICAS_ESPECIFICACION) */
.lines--hero-home   { left: -34%; bottom: -8%;  height: 112%; width: auto; }
.lines--hero-int    { left: -40%; bottom: -6%;  height: 108%; width: auto; }
.lines--quote       { left: -160px; bottom: -200px; width: 520px; }
.lines--corner-tr   { right: -140px; top: -120px; width: 520px; }
.lines--corner-br   { right: -140px; bottom: -200px; width: 520px; }
.lines--hero-wide   { right: -120px; bottom: -200px; width: 620px; }

/* ==========================================================================
   REVEAL (sólo cuando hay JS: html.js)
   ========================================================================== */
html.js [data-reveal].is-pending { opacity: 0; transform: translateY(var(--reveal-offset)); }
html.js [data-reveal] { transition: opacity var(--d-reveal) var(--ease), transform var(--d-reveal) var(--ease); }
html.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   AVISO DE VARIABILIDAD (UI-04) y callouts — infraestructura
   ========================================================================== */
.callout { display: inline-flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border: var(--bw) solid var(--b-200); background: var(--s-off-white); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--t-strong); border-radius: var(--r-2); }
.callout::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--c-teal); flex: 0 0 auto; margin-top: 7px; }
.bg-black .callout, .cases .callout { border-color: var(--s-black-6); background: rgba(255,255,255,.03); color: var(--t-on-dark-2); }

/* ==========================================================================
   MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lines path { animation: none !important; stroke-dashoffset: 0 !important; }
  html.js [data-reveal], html.js [data-reveal].is-pending { opacity: 1 !important; transform: none !important; transition: none !important; }
  .site-header, .site-header__logo img, .site-header__topbar, .site-header__nav, .nav-link::after, .btn, a, .field__control { transition: none !important; }
}

/* ==========================================================================
   LEGAL (UI-06 Aviso de Privacidad) — hero legal, índice sticky, secciones
   numeradas, listas, address, callouts en bloque
   ========================================================================== */
.hero-legal {
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: min(380px, 52vh); background: var(--s-black); background-image: var(--g-hero-interno); color: #fff;
}
.hero-legal::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,11,0) 55%, rgba(11,11,11,.85) 100%); pointer-events: none; }
.hero-legal .container { position: relative; width: 100%; padding-top: clamp(56px, 6vw, 80px); padding-bottom: clamp(48px, 5vw, 64px); }
.hero-legal h1 { color: #fff; font-size: clamp(40px, 4.4vw, 60px); line-height: 1; margin-top: 24px; }
.hero-legal .lead { margin-top: 18px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.4; }
.legal-updated { margin-top: 26px; font-size: 13px; color: var(--t-on-dark-faint); }
.legal-updated__label { font-weight: var(--fw-semibold); letter-spacing: .14em; text-transform: uppercase; font-size: var(--fs-label-s); }
.lines--hero-legal { right: -120px; bottom: -220px; width: 600px; }
.lines--hero-legal path { stroke-width: 1.4; }
.lines--hero-legal path:nth-child(1) { stroke: rgba(255,255,255,.22); }
.lines--hero-legal path:nth-child(2) { stroke: rgba(255,255,255,.12); }
.lines--hero-legal path:nth-child(3) { display: none; }

.legal { background: #fff; padding: 96px 0 120px; }
.legal-grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.toc { position: sticky; top: 120px; }
.toc__title { font-size: var(--fs-label-s); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label-s); text-transform: uppercase; color: var(--c-teal); margin-bottom: 14px; padding-bottom: 12px; border-bottom: var(--bw) solid var(--b-200); }
.toc__list { display: flex; flex-direction: column; }
.toc__list a { display: flex; gap: 12px; font-size: var(--fs-small); line-height: 1.5; color: var(--t-body); padding: 7px 0; }
.toc__list a:hover { color: var(--c-teal); }
.toc__num { font-family: var(--f-serif); color: var(--t-num); flex: 0 0 22px; }
.toc__contact { margin-top: 24px; }
.legal-body { max-width: var(--measure-legal); }
.legal-intro__eyebrow { margin-bottom: 22px; }
.legal-lead { margin: 0 0 18px; font-family: var(--f-serif); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.45; color: var(--t-ink); }
.legal-body p { margin: 0 0 18px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--t-strong); }
.legal-body strong { font-weight: var(--fw-semibold); color: var(--t-ink); }
.legal-body a:not(.btn):not(.link-cta) { color: var(--c-teal); border-bottom: var(--bw) solid var(--c-teal-100); }
.legal-body a:not(.btn):not(.link-cta):hover { border-color: var(--c-teal); }
.legal-intro__updated { font-size: 13px; color: var(--t-muted); padding: 14px 0 30px; border-bottom: var(--bw) solid var(--t-ink); }
.legal-intro__updated .legal-updated__label { color: var(--t-ink); }
.legal-section { padding: 44px 0 22px; border-top: var(--bw) solid var(--b-200); scroll-margin-top: 120px; }
.legal-section__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.legal-section__num { font-family: var(--f-serif); font-size: 26px; color: var(--t-num); line-height: 1; }
.legal-section h2 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; letter-spacing: var(--ls-h3); }
.legal-list { margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.legal-list li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: 16px; line-height: 1.7; color: var(--t-strong); }
.legal-list li::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--c-teal); display: block; margin-top: 10px; }
.legal-address { margin: 0 0 18px; padding: 22px 26px; border: var(--bw) solid var(--b-200); font-size: 16px; line-height: 1.7; color: var(--t-ink); max-width: 32em; }
.legal-address a { font-weight: var(--fw-semibold); border-bottom: 0 !important; }
.legal-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14.5px; color: var(--t-ink); }

.callout-block { margin: 6px 0 22px; padding: 20px 24px; border-left: var(--bw-accent) solid var(--c-teal); background: var(--s-gray); }
.callout-block__label { font-size: var(--fs-label-s); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label-s); text-transform: uppercase; color: var(--c-teal); margin-bottom: 8px; }
.callout-block__body { font-size: var(--fs-body-s); line-height: 1.75; color: var(--t-strong); }
.callout-block__body p { margin: 0; font-size: inherit; line-height: inherit; }
.callout-block__body p + p { margin-top: 8px; }
.callout-block--tech { border-left-color: var(--c-teal-300); background: #F3F8F8; }
.callout-block--tech .callout-block__label { color: var(--c-teal); }   /* T-09A.1: 4.69:1 sobre #F3F8F8 */
.callout-block--pending { border-left-color: var(--c-gold-pending); background: #FFFCF6; }
.callout-block--pending .callout-block__label { color: #8A6A2E; }   /* T-09A.1: 4.90:1 sobre #FFFCF6 (filete conserva --c-gold-pending) */

/* ==========================================================================
   CONTACTO (UI-05) — hero, banda de contacto directo, formulario con columna
   sticky, cómo llegar + mapa, autoridad compacta, antes de tu valoración, cierre
   ========================================================================== */
.hero-contact {
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  min-height: min(560px, 76vh); background: var(--s-black); background-image: var(--g-hero-interno); color: #fff;
}
.hero-contact::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,11,0) 50%, rgba(11,11,11,.88) 100%); pointer-events: none; }
.hero-contact .container { position: relative; width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; column-gap: 48px; }
.hero-contact__copy { flex: 1 1 460px; max-width: 640px; align-self: center; padding: clamp(56px, 7vw, 88px) 0 clamp(48px, 6vw, 88px); }
.hero-contact__copy h1 { color: #fff; font-size: var(--fs-h1-int); line-height: 1.02; margin-top: 26px; }
.hero-contact__copy .lead { margin-top: 22px; font-size: clamp(19px, 1.7vw, 24px); max-width: 24em; }
.hero-contact__cta { display: flex; align-items: center; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.hero-contact__hours { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 32px; font-size: var(--fs-small); line-height: 1.6; color: var(--t-on-dark-2); }
.hero-contact__hours span { display: inline-flex; align-items: center; gap: 10px; }
.hero-contact__hours .icon { color: var(--c-teal-100); width: 18px; height: 18px; }
.hero-contact__hours-mobile { display: none; }
.hero-contact__photo { position: relative; flex: 0 1 380px; min-width: min(100%, 260px); align-self: flex-end; display: flex; justify-content: flex-end; margin-left: auto; padding-top: clamp(32px, 4vw, 56px); }
.hero-contact__photo img { width: min(100%, 360px); height: auto; filter: var(--sh-portrait); }
.lines--hero-contact { left: -46%; bottom: -10%; height: 110%; width: auto; }
.lines--hero-contact path { stroke-width: 1.4; }
.lines--hero-contact path:nth-child(1) { stroke: rgba(255,255,255,.28); }
.lines--hero-contact path:nth-child(2) { stroke: rgba(255,255,255,.16); }
.lines--hero-contact path:nth-child(3) { display: none; }

/* Banda de contacto directo (negra, continua con el hero) */
.contact-band { background: var(--s-black); color: #fff; }
.contact-band .container { padding-top: 56px; padding-bottom: 64px; }
.contact-band__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 36px 0; align-items: stretch; }
.contact-band__cell { padding: 0 40px; border-left: var(--bw) solid var(--b-dark-2); }
.contact-band__cell:first-child { padding-left: 0; border-left: 0; }
.contact-band__cell:last-child { padding-right: 0; }
.contact-band__label { display: flex; align-items: center; gap: 10px; font-size: var(--fs-label-s); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-teal-300); margin-bottom: 14px; }
.contact-band__label .icon { width: 18px; height: 18px; }
.contact-band__value { display: block; font-size: 22px; font-weight: var(--fw-semibold); letter-spacing: -.025em; color: #fff; line-height: 1.2; }
a.contact-band__value:hover { color: var(--c-teal-300); }
.contact-band__note { font-size: var(--fs-micro); color: var(--t-muted); margin-top: 8px; line-height: 1.55; }
.contact-band__text { font-size: 14.5px; font-weight: var(--fw-medium); line-height: 1.6; color: var(--t-on-dark); }
.contact-band__text .dim { color: var(--t-muted); font-weight: var(--fw-regular); }

/* Formulario de contacto: columna izquierda sticky + tarjeta clara */
.contact-form-section { background: #fff; padding: 140px 0 130px; }
.contact-form-section .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(48px, 6vw, 96px); align-items: start; }
.contact-form-section__intro { position: sticky; top: 132px; }
.contact-form-section__intro h2 { margin-top: 22px; max-width: 13em; }
.contact-form-section__intro > p { margin-top: 26px; color: var(--t-body); max-width: 30em; }
.contact-form-section__intro .callout { margin-top: 32px; padding: 22px 26px; max-width: 34em; font-size: 14px; display: flex; }
.contact-form-section__support { margin-top: 28px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--t-muted); max-width: 30em; }
.wa-card--contacto::before { top: -1px; left: clamp(28px, 4vw, 60px); right: clamp(28px, 4vw, 60px); }
.wa-card--contacto .wa-form__actions .btn { min-height: 56px; }

/* Cómo llegar */
.how-to { background: var(--s-gray); padding: 130px 0; position: relative; overflow: hidden; }
.how-to .container { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(48px, 6vw, 96px); align-items: center; }
.how-to h2 { margin-top: 22px; max-width: 12em; }
.how-to__address { margin: 28px 0 0; display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start; max-width: 30em; }
.how-to__address .icon { color: var(--c-teal); width: 18px; height: 18px; margin-top: 3px; }
.how-to__line { font-size: 19px; font-weight: var(--fw-semibold); letter-spacing: -.02em; color: var(--t-ink); line-height: 1.4; }
a.how-to__line:hover { color: var(--c-teal); }
.how-to__sub { font-size: 15px; line-height: 1.7; color: var(--t-body); margin-top: 4px; }
.how-to__hours { font-size: 16px; font-weight: var(--fw-semibold); letter-spacing: -.015em; color: var(--t-ink); line-height: 1.5; }
.how-to__cta { display: flex; align-items: center; gap: 28px; margin-top: 40px; flex-wrap: wrap; }
.map-card { display: block; position: relative; background: #fff; padding: 14px; border: var(--bw) solid var(--b-200); box-shadow: 0 40px 70px -50px rgba(11,11,11,.35); color: var(--t-ink); transition: border-color var(--d-hover) ease; }
.map-card img { width: 100%; height: auto; aspect-ratio: 550 / 500; object-fit: cover; }
.map-card__foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px 0; gap: 16px; }
.map-card__label { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-btn); text-transform: uppercase; color: var(--t-faint); }
.map-card__cta { font-size: var(--fs-btn); font-weight: var(--fw-bold); letter-spacing: var(--ls-btn); text-transform: uppercase; color: var(--c-teal); }
.map-card:hover { border-color: var(--c-teal); color: var(--t-ink); }
.lines--howto { left: -160px; bottom: -200px; width: 520px; }

/* Autoridad compacta (UI-03/04/05) */
.authority { background: var(--s-black); color: #fff; padding: 110px 0; }
.authority .container { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.authority__portrait { position: relative; display: flex; justify-content: center; }
.authority__portrait::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 70%; background: var(--s-black-3); }
.authority__portrait img { position: relative; width: min(100%, 340px); height: auto; }
.authority h2 { color: #fff; margin-top: 22px; }
.authority .lead { margin-top: 18px; font-size: 22px; line-height: 1.4; max-width: 26em; }
.authority__creds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px 40px; margin-top: 36px; padding-top: 32px; border-top: var(--bw) solid var(--b-dark); }
.authority__cred-label { font-size: var(--fs-label-s); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label-s); text-transform: uppercase; color: var(--c-teal-300); margin-bottom: 10px; }
.authority__cred { font-size: 14.5px; color: var(--t-on-dark); line-height: 1.55; }
.authority__cred .dim { color: var(--t-muted); }
.authority__link { margin-top: 36px; }
.link-cta--dark { color: var(--c-teal-300); border-bottom-color: var(--s-black-6); font-size: var(--fs-btn); font-weight: var(--fw-bold); padding-bottom: 6px; }
.link-cta--dark:hover { color: var(--c-teal-300); border-color: var(--c-teal-300); }

/* Antes de tu valoración */
.pre-visit { background: #fff; padding: 130px 0; }
.pre-visit__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 6vw, 96px); align-items: end; padding-bottom: 48px; }
.pre-visit__head h2 { margin-top: 22px; }
.pre-visit__head p { margin: 0 0 6px; font-size: 16px; line-height: 1.75; color: var(--t-body); max-width: 28em; }
.pre-visit__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.card-link { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 32px 30px; border: var(--bw) solid var(--b-200); color: var(--t-ink); min-height: 200px; transition: border-color var(--d-hover) ease; }
.card-link:hover { border-color: var(--c-teal); color: var(--t-ink); }
.card-link > span, .card-link__num, .card-link__title, .card-link__text, .card-link__cta { display: block; }
.card-link__num { font-family: var(--f-serif); font-size: 22px; color: var(--t-num); line-height: 1; margin-bottom: 16px; }
.card-link__title { font-size: 19px; font-weight: var(--fw-semibold); letter-spacing: -.025em; line-height: 1.3; }
.card-link__text { font-size: 14px; line-height: 1.7; color: var(--t-body); margin-top: 10px; }
.card-link__cta { font-size: var(--fs-btn); font-weight: var(--fw-bold); letter-spacing: var(--ls-btn); text-transform: uppercase; color: var(--c-teal); }

/* Doctoralia como franja dentro de sección (UI-05: filetes superior e inferior) */
.doctoralia--inline { padding: 0 0 130px; border-bottom: 0; }
.doctoralia--inline .doctoralia__row { border-top: var(--bw) solid var(--b-200); border-bottom: var(--bw) solid var(--b-200); padding: 40px 0; }

/* Cierre (negro, dos columnas) */
.closing { background: var(--s-black); color: #fff; padding: 130px 0 120px; position: relative; overflow: hidden; }
.closing .container { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: center; }
.closing h2 { color: #fff; font-size: var(--fs-h2-home); line-height: 1.06; letter-spacing: -.04em; margin-top: 22px; max-width: 14em; }
.closing .lead { margin-top: 26px; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.45; max-width: 26em; }
.closing__aside { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.closing__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.closing__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px 40px; padding-top: 28px; border-top: var(--bw) solid var(--b-dark); width: 100%; }
.closing__meta-label { font-size: var(--fs-label-s); font-weight: var(--fw-semibold); letter-spacing: .16em; text-transform: uppercase; color: var(--t-muted); margin-bottom: 8px; }
.closing__meta-text { font-size: 14.5px; line-height: 1.6; color: var(--t-on-dark); }
.closing__meta-text .dim { color: var(--t-muted); }
.lines--closing { right: -140px; top: -140px; width: 520px; }
.lines--closing path { stroke-width: 1.6; }
.lines--closing path:nth-child(1) { stroke: rgba(255,255,255,.12); }
.lines--closing path:nth-child(2) { stroke: rgba(255,255,255,.07); }
.lines--closing path:nth-child(3) { display: none; }

/* ==========================================================================
   CASOS DE ÉXITO (UI-04) — hero, introducción, casos clínicos (Antes/Después
   simultáneos, sin animación), qué observar, CTA técnica, opiniones Doctoralia
   ========================================================================== */
.hero-cases { position: relative; overflow: hidden; background: var(--s-black); color: #fff; min-height: min(520px, 72vh); display: flex; align-items: center; }
.hero-cases .container { position: relative; width: 100%; padding-top: clamp(72px, 8vw, 110px); padding-bottom: clamp(64px, 7vw, 96px); }
.hero-cases__copy { max-width: 44em; }
.hero-cases h1 { color: #fff; font-size: clamp(40px, 4.6vw, 64px); line-height: 1; margin-top: 26px; }
.hero-cases .lead { margin-top: 22px; font-size: clamp(19px, 1.7vw, 25px); max-width: 24em; }
.hero-cases__cta { display: flex; align-items: center; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.lines--hero-cases { right: -120px; bottom: -200px; width: 620px; }
.lines--hero-cases path { stroke-width: 1.4; }
.lines--hero-cases path:nth-child(1) { stroke: rgba(255,255,255,.16); }
.lines--hero-cases path:nth-child(2) { stroke: rgba(255,255,255,.09); }
.lines--hero-cases path:nth-child(3) { display: none; }

/* Introducción */
.cases-intro { background: #fff; padding: 120px 0 0; }
.cases-intro .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(48px, 7vw, 112px); align-items: start; }
.cases-intro h2 { margin-top: 22px; max-width: 12em; }
.cases-intro__text p { margin-top: 26px; color: var(--t-body); max-width: 32em; }
.cases-intro__text p + p { margin-top: 18px; }
.cases-intro__aside { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }
.cases-intro__aside .callout { max-width: 40em; }
.note-box { padding: 26px 28px; border: var(--bw) solid var(--b-200); max-width: 40em; }
.note-box__label { font-size: var(--fs-label-s); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label-s); text-transform: uppercase; color: var(--c-teal); margin-bottom: 12px; }
.note-box__text { font-size: 14.5px; line-height: 1.75; color: var(--t-body); }
.note-box__text strong { color: var(--t-ink); }
.cases-intro__links { display: flex; gap: 28px; flex-wrap: wrap; }

/* Sección de casos */
.cases { background: var(--s-black); color: #fff; padding: 140px 0; margin-top: 120px; scroll-margin-top: 100px; }
.cases__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 6vw, 96px); align-items: end; padding-bottom: 72px; border-bottom: var(--bw) solid var(--b-dark); margin-bottom: 96px; }
.cases__head h2 { color: #fff; margin-top: 22px; }
.cases__head-aside { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.cases__head-aside p { font-size: 16px; line-height: 1.75; color: var(--t-on-dark-muted); max-width: 28em; }
.case { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: start; padding: 96px 0; border-bottom: var(--bw) solid var(--b-dark); }
.case:first-of-type { padding-top: 0; }
.case:last-of-type { padding-bottom: 0; border-bottom: 0; }
.case__media { order: 0; }
.case--alt .case__media { order: 2; }
.case__text { order: 1; align-self: center; }
.case__frame { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--s-black-4); }
.case__figure { margin: 0; position: relative; aspect-ratio: 750 / 340; overflow: hidden; background: var(--s-black-2); container-type: inline-size; }
.case__figure img { display: block; width: 100%; height: 100%; object-fit: contain; }   /* nunca cover, nunca animación */
.case__label { position: absolute; z-index: 2; top: 7.4%; left: 3%; min-width: 15%; min-height: 12%; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; /* T-10: la etiqueta horneada en el JPEG ocupa 3.5 % / 8.2 % / hasta 13.5 % x 10.3 %; el rotulo la cubre con margen en todos los anchos */ background: #fff; color: var(--t-ink); font-size: clamp(8px, 1.85cqw, 10.5px); font-weight: var(--fw-bold); letter-spacing: .18em; padding: 0 1.6%; border-radius: var(--r-2); line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
.case__label--after { background: var(--c-teal); color: #fff; }
.case__meta { display: flex; justify-content: space-between; gap: 16px; padding: 14px 2px 0; font-size: 11px; letter-spacing: var(--ls-btn); text-transform: uppercase; color: var(--t-body); font-weight: var(--fw-semibold); }
.case__meta .plain { letter-spacing: 0; text-transform: none; font-weight: var(--fw-regular); color: var(--t-muted); }
.case__note { margin-top: 12px; font-size: var(--fs-micro); line-height: 1.6; color: var(--t-muted); max-width: 40em; }
.case__num { display: flex; align-items: baseline; gap: 18px; }
.case__num span:first-child { font-family: var(--f-serif); font-size: 44px; line-height: 1; color: var(--t-num); }   /* T-09A.1: 3:1 mínimo en texto grande sobre negro */
.case__num span:last-child { height: 1px; flex: 1; background: var(--b-dark); max-width: 64px; }
.case h3 { margin-top: 22px; font-family: var(--f-serif); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.2; font-weight: var(--fw-regular); letter-spacing: 0; color: #fff; }
.case__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.case__tags li { font-size: var(--fs-label-s); font-weight: var(--fw-semibold); letter-spacing: var(--ls-btn); text-transform: uppercase; color: var(--c-teal-300); border: var(--bw) solid var(--b-dark-2); padding: 7px 12px; border-radius: var(--r-2); }
.case__desc-label { margin-top: 28px; font-size: var(--fs-label-s); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label-s); text-transform: uppercase; color: var(--t-muted); }
.case__desc { margin: 12px 0 0; font-size: 15.5px; line-height: 1.8; color: var(--t-on-dark-3); max-width: 32em; }
.case__editorial { margin: 18px 0 0; padding-left: 18px; border-left: var(--bw-accent) solid var(--c-teal); font-family: var(--f-serif); font-style: italic; font-size: 16px; line-height: 1.6; color: #D6D4D0; max-width: 30em; }
.case__cta { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 32px; align-items: center; }

/* Qué observar */
.observe { background: var(--s-gray); padding: 140px 0; position: relative; overflow: hidden; }
.observe .container { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(48px, 7vw, 112px); align-items: start; }
.observe h2 { margin-top: 22px; max-width: 13em; }
.observe__intro p { margin-top: 26px; color: var(--t-body); max-width: 32em; }
.observe__link { margin-top: 36px; }
.observe__list { background: #fff; padding: 8px clamp(24px, 3.5vw, 44px); border: var(--bw) solid var(--b-200); }
.observe__item { padding: 28px 0; border-top: var(--bw) solid var(--b-200); display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: start; }
.observe__item:first-child { border-top: 0; }
.observe__num { font-family: var(--f-serif); font-size: 22px; color: var(--t-num); line-height: 1.3; }
.observe__title { font-size: 18px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-h4); color: var(--t-ink); line-height: 1.4; }
.observe__text { font-size: 14.5px; line-height: 1.75; color: var(--t-body); margin-top: 8px; max-width: 30em; }
.lines--observe { left: -160px; bottom: -200px; width: 520px; }

/* CTA técnica */
.cta-tech { background: #fff; padding: 120px 0 0; }
.cta-tech__card { position: relative; background: var(--s-gray); padding: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; overflow: hidden; }
.cta-tech__card::before { content: ""; position: absolute; top: 0; left: clamp(40px, 5vw, 72px); width: 56px; height: 3px; background: var(--c-teal); }
.cta-tech h2 { margin-top: 22px; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.12; }
.cta-tech p { margin-top: 20px; font-size: 15.5px; line-height: 1.75; color: var(--t-body); max-width: 30em; }
.cta-tech__actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* Opiniones Doctoralia (tarjetas, sólo UI-04) */
.reviews { background: #fff; padding: 140px 0; }
.reviews__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 6vw, 96px); align-items: end; padding-bottom: 48px; }
.reviews h2 { margin-top: 22px; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.12; }
.reviews__aside { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.reviews__agg { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.reviews__stars { font-size: 18px; letter-spacing: .16em; color: var(--c-peach); line-height: 1; }
.reviews__count { font-size: 18px; font-weight: var(--fw-semibold); letter-spacing: -.02em; color: var(--t-ink); }
.reviews__count .of { font-weight: var(--fw-regular); color: var(--t-body); }
.reviews__source { font-size: 13px; line-height: 1.65; color: var(--t-muted); max-width: 36em; }
.reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.review { background: #fff; border: var(--bw) solid var(--b-200); padding: 32px 30px; display: flex; flex-direction: column; gap: 18px; }
.review__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.review__stars { font-size: 14px; letter-spacing: .14em; color: var(--c-peach); line-height: 1; }
.review__verified { font-size: 11px; color: var(--t-muted); }
.review__text { margin: 0; font-size: 15px; line-height: 1.75; color: var(--t-strong); flex: 1; }
.review__foot { padding-top: 16px; border-top: var(--bw) solid var(--b-200); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.review__author { font-size: 14px; font-weight: var(--fw-semibold); color: var(--t-ink); }
.review__date { font-size: 12px; color: var(--t-muted); }
.reviews__notice { margin-top: 28px; }
.callout--max { max-width: 40em; }

/* Agendamiento negro (patrón Home/UI-04): tarjeta a caballo del footer */
.booking { background: var(--s-black); color: #fff; padding: 140px 0 120px; position: relative; }
.booking .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(48px, 6vw, 96px); align-items: center; }
.booking h2 { color: #fff; font-size: var(--fs-h2-home); line-height: 1.06; letter-spacing: -.04em; margin-top: 24px; max-width: 14em; }
.booking__copy > p { margin-top: 30px; max-width: 26em; }
.booking__meta { display: flex; flex-wrap: wrap; gap: 32px 56px; margin-top: 56px; padding-top: 40px; border-top: var(--bw) solid var(--b-dark); max-width: 34em; }
.booking__meta-label { font-size: var(--fs-label-s); font-weight: var(--fw-semibold); letter-spacing: .16em; text-transform: uppercase; color: var(--t-muted); margin-bottom: 10px; }
.booking__phone { font-size: 28px; font-weight: var(--fw-semibold); letter-spacing: -.03em; color: #fff; white-space: nowrap; }
.booking__phone:hover { color: var(--c-teal-300); }
.booking__addr { font-size: 14.5px; line-height: 1.6; color: var(--t-on-dark); }
.booking__addr .dim { color: var(--t-muted); }

/* ==========================================================================
   DR. RODRIGO MATA (UI-02) — hero interno con retrato, banda de credenciales,
   presentación, rail de autoridad, filosofía, cronología, credenciales oficiales,
   galería editorial y cita del doctor
   ========================================================================== */
.doctor-top { position: relative; background: var(--s-black); }
.hero-doctor { position: relative; overflow: hidden; color: #fff; display: flex; align-items: center; min-height: min(560px, 78vh); background: linear-gradient(90deg, #3C3C3C 0%, #575757 55%, #4A4A4A 100%); }
.hero-doctor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,11,0) 55%, rgba(11,11,11,.85) 100%); pointer-events: none; }
.hero-doctor .container { position: relative; z-index: 1; width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; column-gap: 40px; }
.hero-doctor__copy { flex: 1 1 460px; max-width: 640px; align-self: center; padding: clamp(56px, 7vw, 88px) 0 clamp(48px, 6vw, 80px); }
.hero-doctor h1 { color: #fff; font-size: clamp(38px, 4.2vw, 58px); line-height: 1.02; margin-top: 26px; text-wrap: balance; }
.hero-doctor .lead { margin-top: 22px; font-size: clamp(19px, 1.7vw, 24px); color: var(--t-on-dark); max-width: 24em; }
.hero-doctor__cta { display: flex; align-items: center; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.hero-doctor__portrait { position: relative; flex: 0 1 420px; min-width: min(100%, 280px); align-self: flex-end; display: flex; justify-content: flex-end; margin-left: auto; padding-top: clamp(40px, 5vw, 72px); }
.hero-doctor__frame { position: relative; border: var(--bw) solid rgba(255,255,255,.22); padding: 12px; background: rgba(11,11,11,.18); margin-bottom: -1px; }
.hero-doctor__frame img { display: block; width: min(100%, 380px); height: auto; }
.lines--hero-doctor { left: -40%; bottom: -6%; height: 108%; width: auto; }
.lines--hero-doctor path { stroke-width: 1.4; }
.lines--hero-doctor path:nth-child(1) { stroke: rgba(255,255,255,.28); }
.lines--hero-doctor path:nth-child(2) { stroke: rgba(255,255,255,.16); }
.lines--hero-doctor path:nth-child(3) { display: none; }

/* Banda de credenciales (continua con el hero) */
.creds-band { position: relative; color: #fff; padding: 56px 0 64px; }
.creds-band .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 36px 0; align-items: stretch; }
.creds-band__cell { padding: 0 40px; border-left: var(--bw) solid var(--b-dark-2); }
.creds-band__cell:first-child { padding-left: 0; border-left: 0; }
.creds-band__cell:last-child { padding-right: 0; }
.creds-band__label { font-size: var(--fs-label-s); font-weight: var(--fw-semibold); letter-spacing: .2em; text-transform: uppercase; color: var(--c-teal-300); margin-bottom: 14px; }
.creds-band__name { font-family: var(--f-serif); font-size: 24px; line-height: 1.25; color: #fff; }
.creds-band__value { font-size: 14.5px; font-weight: var(--fw-medium); line-height: 1.6; color: var(--t-on-dark); }
.creds-band__value .dim { color: var(--t-muted); }
.creds-band__value .sub { display: block; color: var(--t-muted); font-size: 12.5px; }

/* Presentación */
.about { position: relative; background: #fff; overflow: hidden; padding: 140px 0 0; }
.about .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); grid-template-areas: "head media" "body media"; gap: 0 clamp(48px, 7vw, 104px); align-items: start; }
.about__head { grid-area: head; }
.about__body { grid-area: body; }
.about__media { grid-area: media; position: relative; padding: 40px 0 0 40px; }
.about h2 { margin-top: 22px; font-size: 44px; line-height: 1.1; max-width: 15em; text-wrap: balance; }
.about__body p { margin-top: 30px; font-size: 16.5px; line-height: 1.8; color: var(--t-body); max-width: 32em; }
.about__body p + p { margin-top: 20px; }
.about__body strong { color: var(--t-ink); font-weight: var(--fw-semibold); }
.about__years { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; margin-top: 44px; padding-top: 32px; border-top: var(--bw) solid var(--b-200); max-width: 34em; }
.about__year { font-family: var(--f-serif); font-size: 34px; color: var(--t-ink); line-height: 1; }
.about__year.is-accent { color: var(--c-teal); }
.about__year-label { font-size: 12.5px; line-height: 1.55; color: var(--t-muted); margin-top: 8px; }
.about__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 36px; }
.about__media::before { content: ""; position: absolute; left: 0; top: 0; width: 70%; height: 80%; background: var(--c-teal-050); }
.about__media img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 30%; }
.about__caption { position: relative; display: flex; justify-content: space-between; gap: 16px; padding: 16px 0 0 4px; margin: 0; }
.about__caption .k { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-btn); text-transform: uppercase; color: var(--t-faint); }
.about__caption .v { font-size: 11.5px; color: var(--t-faint); }

/* Rail de autoridad */
.rail { background: #fff; padding: 120px 0 0; }
.rail__frame { border-top: var(--bw) solid var(--b-200); border-bottom: var(--bw) solid var(--b-200); }
.rail .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.rail__cell { padding: 40px 40px 40px 40px; border-left: var(--bw) solid var(--b-200); }
.rail__cell:first-child { padding-left: 0; border-left: 0; }
.rail__cell:last-child { padding-right: 0; }
.rail__num { font-family: var(--f-serif); font-size: 22px; color: var(--t-num); line-height: 1; margin-bottom: 16px; }
.rail__title { font-size: 17px; font-weight: var(--fw-semibold); letter-spacing: -.02em; color: var(--t-ink); line-height: 1.35; }
.rail__text { font-size: 14px; line-height: 1.7; color: var(--t-body); margin-top: 12px; }

/* Filosofía */
.philo { background: var(--s-black); color: #fff; padding: 120px 0; position: relative; overflow: hidden; }
.philo .lines { left: auto; right: -140px; top: -120px; bottom: auto; width: 520px; }
.philo .lines path { stroke-width: 1.6; }
.philo .lines path:nth-child(1) { stroke: rgba(255,255,255,.14); }
.philo .lines path:nth-child(2) { stroke: rgba(255,255,255,.08); }
.philo .lines path:nth-child(3) { display: none; }
.philo .container { position: relative; display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.quote-mark { font-family: var(--f-serif); font-size: 72px; line-height: .5; color: var(--c-teal); }
.philo blockquote { margin: 0; }
.philo blockquote p { margin: 0; font-family: var(--f-serif); font-size: clamp(24px, 2.3vw, 32px); line-height: 1.45; color: #fff; max-width: 26em; text-wrap: pretty; }
.philo blockquote footer { margin-top: 32px; padding-top: 24px; border-top: var(--bw) solid var(--b-dark); display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.philo blockquote cite { font-style: normal; font-size: 15px; font-weight: var(--fw-semibold); color: #fff; }
.philo blockquote footer span { font-size: 13px; color: var(--t-muted); }

/* Cronología */
.timeline-section { background: #fff; padding: 140px 0; scroll-margin-top: 100px; }
.timeline-section__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 6vw, 96px); align-items: end; padding-bottom: 64px; }
.timeline-section__head h2 { margin-top: 22px; font-size: 46px; line-height: 1.1; }
.timeline-section__head p { margin: 0 0 6px; font-size: 16px; line-height: 1.75; color: var(--t-body); max-width: 26em; }
.timeline { list-style: none; margin: 0; padding: 0; }
.tl-year { display: grid; grid-template-columns: minmax(120px, .28fr) 1fr; column-gap: clamp(32px, 5vw, 80px); }
.tl-year__col { position: relative; }
.tl-year__sticky { position: sticky; top: 132px; padding-bottom: 24px; }
.tl-year + .tl-year .tl-year__sticky { padding-top: 72px; }
.tl-year + .tl-year .tl-year__sticky { top: 60px; }
.tl-year__num { margin: 0; font-family: var(--f-serif); font-size: clamp(56px, 6vw, 84px); line-height: .9; letter-spacing: -.02em; color: var(--t-ink); font-weight: var(--fw-regular); }
.tl-items { list-style: none; margin: 0; padding: 0 0 56px; display: flex; flex-direction: column; gap: 56px; border-left: var(--bw) solid var(--b-200); }
.tl-year + .tl-year .tl-items { padding-top: 72px; }
.tl-year:last-child .tl-items { padding-bottom: 8px; }
.tl-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 220px); gap: clamp(24px, 3vw, 40px); align-items: start; padding-left: 36px; }
.tl-item__dot { position: absolute; left: -7px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid var(--c-teal-100); box-sizing: border-box; transition: background .4s var(--ease), border-color .4s var(--ease); }
.tl-item::before { content: ""; position: absolute; left: -1px; top: 0; bottom: -56px; width: 1px; background: var(--c-teal); transform: scaleY(0); transform-origin: top center; transition: transform .6s var(--ease); }
.tl-item.is-reached .tl-item__dot { background: var(--c-teal); border-color: var(--c-teal); }
.tl-item.is-reached::before { transform: scaleY(1); }
.tl-item__label { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .18em; text-transform: uppercase; color: var(--c-teal); margin-bottom: 12px; }
.tl-item h4 { margin: 0; font-size: 22px; line-height: 1.3; letter-spacing: -.025em; font-weight: var(--fw-semibold); color: var(--t-ink); text-wrap: balance; }
.tl-item__inst { margin-top: 12px; font-size: 14.5px; line-height: 1.7; color: var(--t-body); }
.tl-item__doc { margin: 0; background: var(--s-gray); border: var(--bw) solid var(--b-200); padding: 10px; }
.tl-item__doc img { display: block; width: 100%; height: auto; }   /* documento íntegro: sin recorte, relación original */

/* Credenciales oficiales */
.creds-official { background: var(--s-black); color: #fff; padding: 120px 0; }
.creds-official .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: start; }
.creds-official h2 { color: #fff; margin-top: 22px; font-size: 42px; line-height: 1.1; max-width: 14em; }
.creds-official__intro p { margin-top: 26px; font-size: 15.5px; line-height: 1.8; color: var(--t-on-dark-muted); max-width: 28em; }
.btn-ghost { margin-top: 30px; display: inline-flex; align-items: center; gap: 10px; background: transparent; border: var(--bw) solid var(--s-black-6); color: #fff; padding: 15px 22px; font-family: var(--f-sans); font-size: 11.5px; font-weight: var(--fw-semibold); letter-spacing: .14em; text-transform: uppercase; border-radius: var(--r-2); cursor: pointer; transition: border-color var(--d-hover) var(--ease), color var(--d-hover) var(--ease); }
.btn-ghost:hover { border-color: var(--c-teal-300); color: var(--c-teal-300); }
.creds-list { margin: 0; border-bottom: var(--bw) solid var(--b-dark-2); }
.creds-list > div { padding: 36px 0; border-top: var(--bw) solid var(--b-dark-2); display: grid; grid-template-columns: minmax(140px, .35fr) 1fr; gap: 24px; align-items: baseline; }
.creds-list dt { font-size: var(--fs-label-s); font-weight: var(--fw-semibold); letter-spacing: .2em; text-transform: uppercase; color: var(--c-teal-300); }
.creds-list dd { margin: 0; }
.creds-list__value { font-size: 19px; font-weight: var(--fw-semibold); letter-spacing: -.02em; color: var(--t-on-dark); line-height: 1.35; }
.creds-list__inst { font-size: 13.5px; line-height: 1.7; color: var(--t-muted); margin-top: 8px; }

/* Galería editorial (orden DOM 1 · 2 · 3 · 4; composición FINAL por áreas) */
.gallery { background: #fff; padding: 140px 0 0; }
.gallery__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; padding-bottom: 48px; }
.gallery__head h2 { margin-top: 22px; font-size: 42px; line-height: 1.1; }
.gallery__head p { margin: 0 0 6px; font-size: 15px; line-height: 1.7; color: var(--t-muted); max-width: 24em; }
.gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "g1 g3 g4" "g1 g2 g2"; grid-auto-rows: 280px; gap: 16px; }
.gallery__grid figure { margin: 0; background: var(--s-black-2); overflow: hidden; }
.gallery__grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery__item--1 { grid-area: g1; }
.gallery__item--2 { grid-area: g2; }
.gallery__item--2 img { object-position: 50% 35%; }
.gallery__item--3 { grid-area: g3; }
.gallery__item--3 img { object-position: 50% 20%; }
.gallery__item--4 { grid-area: g4; }

/* Cita del doctor */
.quote-doc { background: var(--s-gray); padding: 130px 0; position: relative; overflow: hidden; }
.quote-doc blockquote { position: relative; margin: 0 auto; max-width: 880px; padding: 0 var(--pad-x); text-align: center; }
.quote-doc .quote-mark { color: var(--c-teal-100); }
.quote-doc blockquote p { margin: 22px 0 0; font-family: var(--f-serif); font-size: clamp(22px, 2.1vw, 29px); line-height: 1.5; color: var(--t-ink); text-wrap: pretty; }
.quote-doc blockquote footer { margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.quote-doc__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: #fff; display: block; flex: 0 0 auto; }
.quote-doc__who { text-align: left; }
.quote-doc__who cite { display: block; font-style: normal; font-size: 15px; font-weight: var(--fw-semibold); color: var(--t-ink); }
.quote-doc__who span { display: block; font-size: 13px; color: var(--t-muted); }

/* ==========================================================================
   RINOPLASTIA ULTRASÓNICA (UI-03) — hero temático, franja de autoridad, qué es,
   tecnología, beneficios, candidatura, comparativa, proceso, resultados,
   expectativas, FAQ (details/summary)
   ========================================================================== */
.hero-tech { position: relative; overflow: hidden; color: #fff; display: flex; align-items: center; min-height: min(600px, 80vh); background: linear-gradient(90deg, #3E3E3E 0%, #585858 50%, #464646 100%); }
.hero-tech::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,11,0) 50%, rgba(11,11,11,.88) 100%); pointer-events: none; }
.hero-tech .container { position: relative; z-index: 1; width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; column-gap: 48px; }
.hero-tech__copy { flex: 1 1 460px; max-width: 640px; align-self: center; padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 96px); }
.hero-tech h1 { color: #fff; font-size: clamp(42px, 4.8vw, 66px); line-height: .98; letter-spacing: -.045em; margin-top: 26px; text-wrap: balance; }
.hero-tech .lead { margin-top: 22px; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.38; color: var(--t-on-dark); max-width: 22em; }
.hero-tech__sign { margin-top: 26px; font-size: 14.5px; line-height: 1.65; font-weight: var(--fw-medium); color: #E2E1DE; }
.hero-tech__sign span { display: block; color: var(--t-num); font-weight: var(--fw-regular); }
.hero-tech__cta { display: flex; align-items: center; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.hero-tech__media { position: relative; flex: 0 1 460px; min-width: min(100%, 300px); align-self: flex-end; display: flex; justify-content: flex-end; margin-left: auto; padding: clamp(40px, 5vw, 72px) 0; }
.hero-tech__figure { position: relative; margin: 0; background: var(--s-black); padding: 12px; box-shadow: 0 40px 70px -40px rgba(0,0,0,.7); }
.hero-tech__frame { position: relative; }
.hero-tech__frame img { display: block; width: min(100%, 420px); height: auto; }
.hero-tech__tag { position: absolute; top: 3.5%; left: 2.2%; width: 12.5%; height: 5.4%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--t-ink); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .16em; border-radius: var(--r-2); line-height: 1; text-transform: uppercase; }
.hero-tech__tag--after { left: 53%; width: 16%; background: var(--c-teal); color: #fff; }
.hero-tech__figure figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 12px 4px 0; font-size: 10.5px; letter-spacing: var(--ls-btn); text-transform: uppercase; color: var(--t-muted); font-weight: var(--fw-semibold); }
.hero-tech__figure figcaption .plain { color: var(--t-body); letter-spacing: 0; text-transform: none; font-weight: var(--fw-regular); }
.lines--hero-tech { left: -44%; bottom: -18%; height: 120%; width: auto; }
.lines--hero-tech path { stroke-width: 1.4; }
.lines--hero-tech path:nth-child(1) { stroke: rgba(255,255,255,.28); }
.lines--hero-tech path:nth-child(2) { stroke: rgba(255,255,255,.16); }
.lines--hero-tech path:nth-child(3) { display: none; }

/* Franja de autoridad bajo el hero */
.auth-strip { position: relative; color: #fff; }
.auth-strip .container { padding-top: 44px; padding-bottom: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.auth-strip__who { display: flex; align-items: center; gap: 20px; }
.auth-strip__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: var(--s-gray); display: block; flex: 0 0 auto; }
.auth-strip__name { font-size: 15px; font-weight: var(--fw-semibold); color: #fff; }
.auth-strip__role { font-size: 12.5px; color: var(--t-muted); margin-top: 3px; }
.auth-strip__meta { display: flex; flex-wrap: wrap; gap: 12px 40px; font-size: 12.5px; color: var(--t-on-dark-muted); align-items: center; }
.auth-strip__meta b { color: var(--c-teal-300); font-weight: var(--fw-semibold); }
.auth-strip__link { color: #fff; font-weight: var(--fw-semibold); border-bottom: var(--bw) solid var(--s-black-6); padding-bottom: 2px; }
.auth-strip__link:hover { color: var(--c-teal-300); }

/* ¿Qué es? */
.whatis { background: #fff; padding: 140px 0 0; }
.whatis .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(48px, 7vw, 104px); align-items: start; }
.whatis h2 { margin-top: 22px; max-width: 14em; text-wrap: balance; }
.whatis__text p { margin-top: 26px; font-size: 16.5px; line-height: 1.8; color: var(--t-body); max-width: 32em; }
.whatis__text p + p { margin-top: 18px; }
.whatis__links { display: flex; align-items: center; gap: 12px 32px; margin-top: 40px; flex-wrap: wrap; }
.whatis__media { position: relative; padding: 40px 0 0 40px; }
.whatis__media::before { content: ""; position: absolute; left: 0; top: 0; width: 76%; height: 82%; background: var(--c-teal-050); }
.whatis__frame { position: relative; background: var(--s-black); padding: 14px; }
.whatis__frame img { display: block; width: 100%; height: auto; }
.whatis__caption { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0 0 4px; margin: 0; }
.whatis__caption .k { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-btn); text-transform: uppercase; color: var(--t-faint); }
.whatis__caption .v { font-size: 11.5px; color: var(--t-faint); }

/* Tecnología ultrasónica */
.tech { background: var(--s-gray); padding: 140px 0; margin-top: 140px; position: relative; overflow: hidden; }
.tech .lines { left: auto; right: -160px; top: -160px; bottom: auto; width: 560px; }
.tech .container { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(48px, 7vw, 112px); align-items: start; }
.tech__intro { position: sticky; top: 132px; }
.tech__intro h2 { margin-top: 22px; max-width: 13em; text-wrap: balance; }
.tech__intro p { margin-top: 26px; font-size: 16.5px; line-height: 1.8; color: var(--t-body); max-width: 32em; }
.tech__intro em { font-style: italic; }
.tech__phrase { margin-top: 32px; padding: 24px 28px; background: #fff; border: var(--bw) solid var(--b-200); max-width: 30em; }
.tech__phrase-label { font-size: var(--fs-label-s); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label-s); text-transform: uppercase; color: var(--c-teal); margin-bottom: 10px; }
.tech__phrase p { margin: 0; font-family: var(--f-serif); font-size: 20px; line-height: 1.45; color: var(--t-ink); }
.tech__steps { list-style: none; margin: 0; padding: 0; }
.tech__step { position: relative; padding: 32px 0; display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: start; border-top: var(--bw) solid var(--b-200); }
.tech__step:last-child { padding-bottom: 0; }
.tech__num { font-family: var(--f-serif); font-size: 30px; color: var(--t-num); line-height: 1; }
.tech__step:last-child .tech__num { color: var(--c-teal); }
.tech__title { font-size: 19px; font-weight: var(--fw-semibold); letter-spacing: -.025em; color: var(--t-ink); line-height: 1.35; }
.tech__text { font-size: 15px; line-height: 1.75; color: var(--t-body); margin-top: 10px; max-width: 30em; }

/* Beneficios */
.benefits { background: #fff; padding: 140px 0 0; }
.benefits__head { max-width: 30em; }
.benefits__head h2 { margin-top: 22px; text-wrap: balance; }
.benefits__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 5vw, 64px); margin-top: 64px; align-items: start; }
.benefit-card { position: relative; background: var(--s-gray); padding: clamp(28px, 4vw, 48px); }
.benefit-card::before { content: ""; position: absolute; top: 0; left: clamp(28px, 4vw, 48px); width: 56px; height: 3px; background: var(--c-peach); }
.benefit-card--dark { background: var(--s-black); color: #fff; }
.benefit-card--dark::before { background: var(--c-teal-300); }
.benefit-card__head { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
.benefit-card__avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--c-peach); flex: 0 0 auto; }
.benefit-card--dark .benefit-card__avatar { background: var(--c-teal-100); }
.benefit-card__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.benefit-card h3 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -.03em; color: var(--t-ink); }
.benefit-card h3 span { color: var(--c-teal); }
.benefit-card--dark h3 { color: #fff; }
.benefit-card--dark h3 span { color: var(--c-teal-300); }
.benefit-card ul { list-style: none; margin: 0; padding: 0; }
.benefit-card li { padding: 26px 0; border-top: var(--bw) solid var(--b-200); display: grid; grid-template-columns: 22px 1fr; gap: 16px; align-items: start; }
.benefit-card--dark li { border-top-color: var(--b-dark-2); }
.benefit-card li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-teal); display: block; margin-top: 9px; }
.benefit-card__title { font-size: 17px; font-weight: var(--fw-semibold); letter-spacing: -.02em; color: var(--t-ink); line-height: 1.45; }
.benefit-card--dark .benefit-card__title { color: #fff; }
.benefit-card__text { font-size: 14.5px; line-height: 1.7; color: var(--t-body); margin-top: 8px; max-width: 28em; }
.benefit-card--dark .benefit-card__text { color: var(--t-on-dark-muted); }
.benefits__note, .compare__note { margin: 32px 0 0; font-size: 13px; line-height: 1.7; color: var(--t-muted); max-width: 60em; }

/* Candidatura */
.candid { background: #fff; padding: 140px 0; }
.candid .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(48px, 7vw, 112px); align-items: start; }
.candid h2 { margin-top: 22px; max-width: 12em; text-wrap: balance; }
.candid__intro > p { margin-top: 26px; font-size: 16.5px; line-height: 1.8; color: var(--t-body); max-width: 32em; }
.candid__quote { margin: 36px 0 0; padding: 28px 32px; background: var(--s-gray); border-left: var(--bw-accent) solid var(--c-teal); max-width: 30em; font-family: var(--f-serif); font-size: 20px; line-height: 1.45; color: var(--t-ink); }
.candid__cta { margin-top: 36px; }
.candid__list { list-style: none; margin: 0; padding: 0; border-bottom: var(--bw) solid var(--b-200); }
.candid__list li { padding: 28px 0; border-top: var(--bw) solid var(--b-200); }
.candid__title { font-size: 17px; font-weight: var(--fw-semibold); letter-spacing: -.02em; color: var(--t-ink); line-height: 1.4; }
.candid__text { font-size: 14.5px; line-height: 1.7; color: var(--t-body); margin-top: 8px; }

/* Comparativa: describe, no rankea */
.compare { background: var(--s-gray); padding: 140px 0; scroll-margin-top: 100px; }
.compare__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 6vw, 96px); align-items: end; padding-bottom: 56px; }
.compare__head h2 { margin-top: 22px; text-wrap: balance; }
.compare__head p { margin: 0 0 6px; font-size: 16px; line-height: 1.75; color: var(--t-body); max-width: 28em; }
.compare__table { background: #fff; border: var(--bw) solid var(--b-200); padding: 0 clamp(24px, 4vw, 48px); }
.compare__row { display: grid; grid-template-columns: minmax(150px, .8fr) 1fr 1fr; gap: clamp(16px, 3vw, 40px); padding: 28px 0; border-bottom: var(--bw) solid var(--b-200); align-items: start; }
.compare__row:last-child { border-bottom: 0; }
.compare__row--head { padding: 26px 0 22px; border-bottom: var(--bw) solid var(--t-ink); }
.compare__row--head .compare__feat { padding-top: 0; }
.compare__feat { font-size: 11.5px; font-weight: var(--fw-semibold); letter-spacing: .16em; text-transform: uppercase; color: var(--t-muted); padding-top: 4px; }
.compare__th { font-size: 13px; font-weight: var(--fw-bold); letter-spacing: .16em; text-transform: uppercase; color: var(--t-ink); }
.compare__th--ultra { color: var(--c-teal); padding-left: 20px; }
.compare__trad { font-size: 15.5px; line-height: 1.65; color: var(--t-body); }
.compare__ultra { font-size: 15.5px; line-height: 1.65; color: var(--t-ink); font-weight: var(--fw-medium); padding-left: 20px; border-left: var(--bw-accent) solid var(--c-teal); }
.compare__col { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: var(--ls-btn); text-transform: uppercase; color: var(--t-muted); }   /* prefijo de columna: sólo lectores de pantalla en desktop, visible al apilar */
.compare__ultra .compare__col { color: var(--c-teal); }

/* Proceso 01–04 */
.process { background: #fff; padding: 140px 0; }
.process__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 6vw, 96px); align-items: end; }
.process__head h2 { margin-top: 22px; text-wrap: balance; }
.process__head p { margin: 0 0 6px; font-size: 16px; line-height: 1.75; color: var(--t-body); max-width: 28em; }
.process__grid { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; counter-reset: step; }
.process__step { position: relative; background: #fff; border: var(--bw) solid var(--b-200); padding: 36px 32px; }
.process__num { width: 64px; height: 64px; border-radius: 50%; background: #fff; border: var(--bw) solid var(--b-200); color: var(--t-muted); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: var(--fw-semibold); }
.process__step:nth-child(1) .process__num { background: var(--c-teal); border-color: var(--c-teal); color: #fff; }
.process__step:nth-child(2) .process__num { border-color: var(--c-teal-300); color: var(--c-teal); }
.process__step:nth-child(3) .process__num { border-color: var(--c-teal-100); color: var(--c-teal); }
.process__step h3 { margin: 26px 0 0; font-size: 20px; line-height: 1.3; letter-spacing: -.025em; color: var(--t-ink); }
.process__desc { margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--t-body); }
.process__more { margin: 18px 0 0; padding-top: 16px; border-top: var(--bw) solid var(--b-200); font-size: 13.5px; line-height: 1.7; color: var(--t-muted); }

/* Resultados (dos casos desde img/casos, componentes de UI-04) */
.results { background: var(--s-black); color: #fff; padding: 140px 0; }
.results__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 6vw, 96px); align-items: end; padding-bottom: 56px; border-bottom: var(--bw) solid var(--b-dark); }
.results__head h2 { color: #fff; margin-top: 22px; text-wrap: balance; }
.results__head p { margin: 0 0 6px; font-size: 16px; line-height: 1.75; color: var(--t-on-dark-muted); max-width: 26em; }
.results__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(56px, 6vw, 96px); margin-top: 72px; }
.result__text { padding-top: 32px; }
.result__id { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.result__name { font-size: 15px; font-weight: var(--fw-semibold); letter-spacing: -.015em; color: #fff; }
.result__sep { width: 1px; height: 12px; background: var(--s-black-6); align-self: center; }
.result__place { font-size: 12.5px; color: var(--t-muted); }
.result__text h3 { margin: 16px 0 0; font-family: var(--f-serif); font-size: 28px; line-height: 1.2; font-weight: var(--fw-regular); letter-spacing: 0; color: #fff; }
.result__desc { margin: 18px 0 0; font-size: 15px; line-height: 1.8; color: #A3A3A3; max-width: 34em; }
.results__cta { display: flex; justify-content: center; margin-top: 80px; }

/* Expectativas */
.expect { background: #fff; padding: 140px 0; position: relative; overflow: hidden; }
.expect .lines { left: auto; right: -140px; bottom: -200px; width: 520px; }
.expect .container { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(48px, 7vw, 112px); align-items: start; }
.expect h2 { margin-top: 22px; max-width: 13em; text-wrap: balance; }
.expect__intro > p { margin-top: 26px; font-size: 16.5px; line-height: 1.8; color: var(--t-body); max-width: 32em; }
.link-rows { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; max-width: 30em; }
.link-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border: var(--bw) solid var(--b-200); color: var(--t-ink); font-size: 14px; font-weight: var(--fw-semibold); transition: border-color var(--d-hover) var(--ease), color var(--d-hover) var(--ease); }
.link-row:hover { border-color: var(--c-teal); color: var(--c-teal); }
.expect .observe__list { margin: 0; padding: 8px clamp(24px, 3.5vw, 44px); border: 0; }
.expect .observe__item { padding: 30px 0; }

/* FAQ — <details>/<summary>, contenido íntegro en el DOM */
.faq { background: #fff; padding: 140px 0; }
.faq .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(40px, 7vw, 112px); align-items: start; }
.faq__intro { position: sticky; top: 120px; padding: 40px clamp(22px, 4vw, 48px) 44px 0; }
.faq__intro h2 { margin-top: 22px; font-size: 40px; line-height: 1.12; max-width: 13em; }
.faq__intro p { margin-top: 26px; font-size: 15.5px; line-height: 1.8; color: var(--t-body); max-width: 24em; }
.faq__intro .link-cta { margin-top: 32px; }
.faq__list { border-bottom: var(--bw) solid var(--b-200); counter-reset: faq; }
.faq__item { border-top: var(--bw) solid var(--b-200); counter-increment: faq; }
.faq__q { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px 1fr 32px; align-items: start; column-gap: 24px; padding: 30px 0; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before { content: counter(faq, decimal-leading-zero); font-family: var(--f-serif); font-size: 18px; color: var(--t-num); line-height: 1.45; }
.faq__q span { font-size: 18px; font-weight: var(--fw-semibold); letter-spacing: -.02em; color: var(--t-ink); line-height: 1.45; }
.faq__q::after { content: "+"; width: 32px; height: 32px; border: var(--bw) solid #CFCDC9; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--c-teal); font-size: 16px; line-height: 1; margin-top: -3px; box-sizing: border-box; }
.faq__item[open] .faq__q::after { content: "–"; background: var(--c-teal); border-color: var(--c-teal); color: #fff; }
.faq__q:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 2px; }
.faq__a { margin: -6px 0 0; padding: 0 80px 34px 68px; font-size: 15.5px; line-height: 1.85; color: var(--t-body); }

/* ==========================================================================
   HOME (UI-01) — hero fotográfico con retrato, autoridad sobre plano crema,
   qué es (etiquetas sobre imagen apilada), beneficios con rail y recortes
   circulares, proceso horizontal, cita con retrato de estudio
   ========================================================================== */
.hero-home { position: relative; overflow: hidden; color: #fff; background: #545454; display: flex; align-items: flex-end; min-height: min(720px, 92vh); }
.hero-home__bg { position: absolute; inset: 0; z-index: 0; }
.hero-home__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 38% 35%; }
.hero-home::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(18,18,18,.5) 0%, rgba(18,18,18,.34) 38%, rgba(18,18,18,.06) 62%, rgba(18,18,18,0) 100%), linear-gradient(180deg, rgba(11,11,11,0) 55%, rgba(11,11,11,.9) 100%); pointer-events: none; }
.hero-home .container { position: relative; z-index: 2; width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; column-gap: 24px; }
.hero-home__copy { flex: 1 1 440px; max-width: 600px; align-self: center; padding: clamp(56px, 8vw, 110px) 0 clamp(64px, 10vw, 160px); }   /* T-10A.1: mas altura util bajo el telefono para alojar la figura completa */
.hero-home h1 { color: #fff; font-size: clamp(46px, 5.3vw, 74px); line-height: .96; letter-spacing: -.045em; margin-top: clamp(20px, 2.5vw, 30px); }
.hero-home .lead { margin-top: clamp(18px, 2vw, 26px); font-size: clamp(20px, 1.95vw, 27px); line-height: 1.35; color: var(--t-on-dark); max-width: 17em; }
.hero-home__sign { margin-top: clamp(20px, 2vw, 28px); font-size: 14.5px; line-height: 1.65; font-weight: var(--fw-medium); color: #E2E1DE; letter-spacing: -.01em; }
.hero-home__sign span { display: block; color: var(--t-num); font-weight: var(--fw-regular); }
.hero-home__cta { display: flex; align-items: center; gap: 14px; margin-top: clamp(28px, 3vw, 40px); flex-wrap: wrap; }
.hero-home__phone { margin-top: clamp(26px, 3vw, 36px); display: flex; align-items: baseline; gap: 14px; }
.hero-home__phone-label { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .16em; text-transform: uppercase; color: var(--t-num); }
.hero-home__phone a { font-size: 19px; font-weight: var(--fw-semibold); letter-spacing: -.02em; color: #fff; }
.hero-home__phone a:hover { color: var(--c-teal-100); }
.hero-home__portrait { position: relative; flex: 0 1 clamp(320px, 46%, 600px); min-width: min(100%, 320px); align-self: stretch; display: flex; justify-content: flex-end; margin-left: auto; }   /* T-10A.1: la columna ocupa toda la altura del hero y la figura se ancla a su base */
.hero-home__portrait img { position: absolute; right: -47%; bottom: 0; display: block; height: calc(100% - clamp(56px, 8vw, 110px) + 42px); width: auto; max-width: none; margin: 0; transform: none; filter: drop-shadow(0 30px 50px rgba(0,0,0,.45)); }   /* T-10A.2: right -42% -> -47% (+27 px a la derecha en 1440-1600). T-10A.1: sin recorte inferior (bottom: 0); la escala sale de la altura del hero: cabeza ~80 px bajo el borde superior, por encima del eyebrow */
.lines--hero-home2 { left: -34%; bottom: -6%; height: 82%; width: auto; }   /* T-10A.1: mismo tamano en px que el original sobre una columna de altura completa */
.lines--hero-home2 path { stroke-width: 1.4; }
.lines--hero-home2 path:nth-child(1) { stroke: rgba(255,255,255,.30); }
.lines--hero-home2 path:nth-child(2) { stroke: rgba(255,255,255,.20); }
.lines--hero-home2 path:nth-child(3) { stroke: rgba(255,255,255,.11); }

/* Autoridad / presentación sobre plano crema */
.intro { position: relative; background: #fff; overflow: hidden; }
.intro .lines { left: -140px; top: -160px; bottom: auto; width: 560px; }
.intro .lines path:nth-child(2) { display: none; }
.intro .container { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(48px, 7vw, 96px); align-items: stretch; }
.intro__portrait { position: relative; padding: clamp(48px, 6vw, 80px) 0 clamp(48px, 5.5vw, 70px); display: flex; justify-content: center; align-items: flex-end; clip-path: inset(-200px -100vw clamp(48px, 5.5vw, 70px) -100vw); }
.intro__portrait::before { content: ""; position: absolute; left: -100vw; right: calc(-1 * clamp(24px, 3.5vw, 48px)); top: 0; bottom: clamp(48px, 5.5vw, 70px); background: var(--s-cream); }
.intro__portrait img { position: relative; display: block; width: 100%; max-width: 400px; height: auto; filter: saturate(.96) drop-shadow(0 18px 30px rgba(11,11,11,.18)); }
.intro__text { padding: clamp(64px, 8vw, 104px) 0 clamp(48px, 5.5vw, 70px); align-self: end; }
.intro h2 { margin-top: 22px; font-size: 44px; line-height: 1.1; max-width: 16em; text-wrap: balance; }
.intro__text > p { margin-top: 30px; font-size: 16.5px; line-height: 1.8; color: var(--t-body); max-width: 32em; }
.intro__text strong { color: var(--t-ink); font-weight: var(--fw-semibold); }
.intro__axes { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 48px; padding-top: 36px; border-top: var(--bw) solid var(--b-200); max-width: 34em; }
.intro__axis { font-family: var(--f-serif); font-size: 36px; letter-spacing: -.01em; color: var(--t-ink); line-height: 1; }
.intro__axis-text { font-size: 13.5px; line-height: 1.6; color: var(--t-muted); margin-top: 12px; }
.intro__link { margin-top: 44px; }
.whatis--home { padding: 70px 0 140px; }
.whatis__inner { position: relative; }
.btn--outline-light { background: #fff; border: var(--bw) solid #CFCDC9; color: var(--t-ink); }
.btn--outline-light:hover { border-color: var(--c-teal); color: var(--c-teal); background: #fff; }
.whatis__tag { position: absolute; top: 3.5%; left: 2.2%; width: 12.5%; height: 5.4%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--t-ink); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .16em; border-radius: var(--r-2); line-height: 1; text-transform: uppercase; }
.whatis__tag--after { top: 54.1%; width: 16%; background: var(--c-teal); color: #fff; }
.whatis__bullets { list-style: none; margin: 36px 0 0; padding: 0; max-width: 32em; display: flex; flex-direction: column; gap: 6px; }
.whatis__bullets li { display: grid; grid-template-columns: 22px 1fr; align-items: start; font-size: 15.5px; font-weight: var(--fw-semibold); letter-spacing: -.015em; color: var(--t-ink); line-height: 1.5; }
.whatis__bullets li::before { content: ""; width: 7px; height: 7px; background: var(--c-teal); border-radius: 50%; display: block; margin-top: 8px; }
.whatis__bullets small { display: block; font-size: 13px; font-weight: var(--fw-regular); color: var(--t-muted); letter-spacing: 0; line-height: 1.55; margin-top: 2px; }
.whatis__cta { display: flex; align-items: center; gap: 32px; margin-top: 44px; flex-wrap: wrap; }
.whatis__phone { display: flex; align-items: baseline; gap: 12px; }
.whatis__phone-label { font-size: var(--fs-label-s); font-weight: var(--fw-semibold); letter-spacing: .16em; text-transform: uppercase; color: var(--t-faint); }
.whatis__phone a { font-size: 18px; font-weight: var(--fw-semibold); letter-spacing: -.02em; color: var(--t-ink); }
.whatis__phone a:hover { color: var(--c-teal); }

/* Beneficios Home */
.benefits-home { background: #fff; padding: 0 0 150px; position: relative; }
.benefits-home__head { text-align: center; max-width: 24em; margin: 0 auto; }
.benefits-home__head h2 { margin-top: 22px; font-size: 46px; line-height: 1.1; }
.benefits-home__head em { font-family: var(--f-serif); font-style: italic; font-weight: var(--fw-regular); }
.rail--home { padding: 0; margin-top: 72px; }
.rail__label { font-size: 13px; font-weight: var(--fw-bold); letter-spacing: .2em; text-transform: uppercase; color: var(--t-ink); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.rail__label::before { content: ""; width: 18px; height: 1px; background: var(--c-teal); display: block; }
.rail--home .rail__text { font-size: 15px; margin-top: 0; }
.bblocks { margin-top: 150px; }
.bblock-wrap { position: relative; background: var(--s-gray); padding: 0 clamp(24px, 5vw, 72px); }
.bblock { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 72px); align-items: center; padding: 0 0 96px; }
.bblock + .bblock { padding: 96px 0 0; border-top: var(--bw) solid var(--b-200); }
.bblock__circle { position: relative; background: var(--c-peach); border-radius: 50%; aspect-ratio: 1 / 1; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(11,11,11,.4); }
.bblock__circle--up { margin-top: -110px; }
.bblock__circle--down { margin-bottom: -110px; background: var(--c-teal-100); }
.bblock__circle img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bblock__text--first { padding-top: 88px; }
.bblock__text--last { padding-bottom: 88px; }
.bblock__num { font-family: var(--f-serif); font-size: 22px; color: var(--t-num); margin-bottom: 14px; line-height: 1; }
.bblock h3 { margin: 0; font-size: 32px; line-height: 1.15; letter-spacing: -.03em; color: var(--t-ink); }
.bblock h3 span { color: var(--c-teal); }
.bblock p { margin: 22px 0 0; font-size: 16px; line-height: 1.8; color: var(--t-body); max-width: 32em; }
.bblock .btn { margin-top: 32px; }

/* Proceso horizontal 01–04 */
.steps { background: #fff; padding: 140px 0; }
.steps__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(32px, 6vw, 96px); align-items: end; }
.steps__head h2 { margin-top: 22px; font-size: 46px; line-height: 1.1; }
.steps__head p { margin: 0 0 6px; font-size: 16px; line-height: 1.75; color: var(--t-body); max-width: 26em; }
.steps__track { position: relative; margin-top: 88px; }
.steps__track::before { content: ""; position: absolute; top: 44px; left: calc(12.5% + 44px); right: calc(12.5% + 44px); height: 1px; background: linear-gradient(90deg, var(--c-teal) 0%, var(--c-teal-300) 40%, var(--c-teal-100) 70%, var(--b-200) 100%); }
.steps__list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 40px); }
.step { text-align: center; }
.step__num { width: 88px; height: 88px; margin: 0 auto; border-radius: 50%; border: var(--bw) solid var(--b-200); background: #fff; color: var(--t-muted); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: var(--fw-semibold); letter-spacing: -.01em; }
.step:nth-child(1) .step__num { background: var(--c-teal); border-color: var(--c-teal); color: #fff; }
.step:nth-child(2) .step__num { border-color: var(--c-teal-300); color: var(--c-teal); }
.step:nth-child(3) .step__num { border-color: var(--c-teal-100); color: var(--c-teal); }
.step h3 { margin: 32px 0 0; font-size: 19px; line-height: 1.3; letter-spacing: -.025em; color: var(--t-ink); }
.step p { margin: 14px auto 0; font-size: 14.5px; line-height: 1.75; color: var(--t-muted); max-width: 16em; }

/* Cita del doctor con retrato de estudio */
.quote-home { background: var(--s-gray); padding: 130px 0; position: relative; overflow: hidden; }
.quote-home .container { position: relative; max-width: 1180px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(40px, 6vw, 88px); align-items: center; }
.quote-home__portrait { position: relative; display: flex; justify-content: center; align-items: flex-end; }
.quote-home__portrait::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 72%; background: #fff; border: var(--bw) solid var(--b-200); }
.quote-home__portrait img { position: relative; display: block; width: 100%; max-width: 420px; height: auto; filter: drop-shadow(0 30px 40px rgba(11,11,11,.2)); }
.quote-home blockquote { margin: 0; }
.quote-home .quote-mark { color: var(--c-teal-100); }
.quote-home blockquote p { margin: 22px 0 0; font-family: var(--f-serif); font-size: clamp(22px, 1.9vw, 26px); line-height: 1.5; color: var(--t-ink); max-width: 26em; text-wrap: pretty; }
.quote-home blockquote p.quote-mark { margin: 0; line-height: .5; font-size: 72px; }   /* T-10: las comillas conservan su caja compacta (antes heredaban line-height 1.5 del parrafo) */
.quote-home blockquote footer { margin-top: 40px; padding-top: 28px; border-top: var(--bw) solid var(--b-200); display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.quote-home cite { font-style: normal; font-size: 15px; font-weight: var(--fw-semibold); letter-spacing: -.015em; color: var(--t-ink); }
.quote-home footer span { font-size: 13px; color: var(--t-muted); }
.quote-home__who { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }   /* T-10: separacion entre nombre y especialidad (antes se pegaban en desktop) */
.quote-home__avatar { display: none; }

/* ==========================================================================
   T-09A.1 · Contraste WCAG AA sobre fondos oscuros: los tokens de texto secundario
   pasan al gris claro del sistema (#9A9A9A ≥ 5.6:1 sobre #0B0B0B–#232323). La tarjeta
   blanca del formulario dentro de secciones oscuras recupera los valores claros.
   ========================================================================== */
.doctor-top, .creds-band, .cases, .results, .booking, .closing, .contact-band, .philo, .creds-official, .authority, .site-footer, .benefit-card--dark, .bg-black, .nav-panel, .hero-cases, .hero-tech, .hero-doctor, .hero-home { --t-muted: var(--t-on-dark-muted); --t-faint: var(--t-on-dark-muted); --t-body: var(--t-on-dark-muted); --t-num: #767676; }
.wa-card, .review, .observe__list, .callout-block, .card-link, .map-card, .note-box { --t-muted: #707070; --t-faint: #707070; --t-body: #6E6E6E; --t-num: #767676; }