/* ==========================================================================
   Alluring Clinic · Landing "Valoración médica"
   Mobile-first (min-width only). Breakpoints: 640 / 768 / 1024 / 1280.
   Tokens derived from the clinic's own brand (logo oval, charcoal facade,
   off-white reception wall) and the approved Figma.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin + latin-ext subsets from Google Fonts) ---------- */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 300 400; font-display: swap;
  src: url("../fonts/oswald-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 300 400; font-display: swap;
  src: url("../fonts/oswald-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/lato-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/lato-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/lato-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/lato-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/lato-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/lato-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Metric-matched fallbacks (computed from the font files vs Arial) to reduce layout shift on swap */
@font-face { font-family: "Oswald Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  size-adjust: 72.19%; ascent-override: 165.25%; descent-override: 40.03%; line-gap-override: 0%; }
@font-face { font-family: "Lato Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  size-adjust: 98.09%; ascent-override: 100.62%; descent-override: 21.72%; line-gap-override: 0%; }

:root {
  /* Colour */
  --carbon: #262626;        /* the ONLY dark section background (facade black, softened) */
  --hueso: #f4f4f3;         /* the ONLY light section background (reception wall) */
  --blanco: #ffffff;        /* desktop cards (≥1024px), inputs and text on dark */
  --tinta: #222222;         /* body text on light */
  --texto-2: #5b5955;       /* secondary text on light  (6.4:1 on hueso) */
  --texto-claro: #d6d4d0;   /* secondary text on dark   (11:1 on carbon) */
  --linea: #dddad5;         /* hairlines on light */
  --linea-osc: rgba(255, 255, 255, .16);
  --laton: #b39a72;         /* brass, from the reception lamp fittings — decorative/on dark only */
  --laton-osc: #7a6443;     /* brass for use on light (5.4:1 on hueso) */
  --error: #a3312a;
  --ok: #2f6b45;

  /* Type */
  --f-display: "Oswald", "Oswald Fallback", "Arial Narrow", Arial, sans-serif;
  --f-texto: "Lato", "Lato Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --t-xs: .8125rem;   /* 13 */
  --t-sm: .9375rem;   /* 15 */
  --t-base: 1.0625rem;/* 17 */
  --t-lg: 1.1875rem;  /* 19 */
  --t-h3: 1.375rem;
  --t-h2: clamp(1.875rem, 1.2rem + 3vw, 3rem);
  --t-h1: clamp(2.25rem, 1.2rem + 4.6vw, 4.25rem);

  /* Layout */
  --max: 75rem;       /* 1200px */
  --gutter: 1.25rem;
  --sec: 4.5rem;      /* section padding */
  --radio-s: 4px;
  --radio-m: 10px;

  --sombra-card: 0 1px 2px rgba(20, 20, 20, .06), 0 18px 40px -18px rgba(20, 20, 20, .35);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 2rem; --sec: 6rem; }
}
@media (min-width: 1280px) {
  :root { --sec: 7.5rem; }
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-weight: 400;
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--hueso);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 300; }
strong { font-weight: 700; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--carbon); color: var(--blanco); padding: .75rem 1rem; border-radius: var(--radio-s);
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--laton-osc); outline-offset: 3px; border-radius: 2px; }
.is-dark :focus-visible { outline-color: var(--laton); }

.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }

.contenedor { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Typography ---------- */
.display {
  font-family: var(--f-display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.08;
}
.h2 { font-size: var(--t-h2); }
.h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; letter-spacing: .03em; font-size: var(--t-h3); line-height: 1.2; }
.entradilla { font-size: var(--t-lg); line-height: 1.55; color: var(--texto-2); max-width: 38rem; font-weight: 300; }
.is-dark .entradilla { color: var(--texto-claro); }
.contexto { /* small context line (brief-mandated eyebrow for doctor block) */
  font-size: var(--t-sm); color: var(--laton-osc); letter-spacing: .02em; margin-bottom: .75rem;
}
.is-dark .contexto { color: var(--laton); }

/* ---------- Buttons ---------- */
.btn {
  --b-bg: var(--carbon); --b-fg: var(--blanco); --b-bd: var(--carbon);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .8rem 1.5rem;
  background: var(--b-bg); color: var(--b-fg); border: 1px solid var(--b-bd);
  border-radius: 999px;
  font-family: var(--f-texto); font-weight: 700; font-size: var(--t-sm); letter-spacing: .02em;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { --b-bg: #000; --b-bd: #000; }
.btn--claro { --b-bg: var(--blanco); --b-fg: var(--carbon); --b-bd: var(--blanco); }
.btn--claro:hover { --b-bg: var(--hueso); --b-bd: var(--hueso); }
.btn--linea { --b-bg: transparent; --b-fg: var(--carbon); --b-bd: var(--carbon); }
.btn--linea:hover { --b-bg: var(--carbon); --b-fg: var(--blanco); }
.is-dark .btn--linea { --b-fg: var(--blanco); --b-bd: rgba(255,255,255,.55); }
.is-dark .btn--linea:hover { --b-bg: var(--blanco); --b-fg: var(--carbon); --b-bd: var(--blanco); }
.btn--bloque { width: 100%; }
.btn--sm { min-height: 2.75rem; padding: .55rem 1.1rem; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .7; cursor: progress; }

.enlace-sutil { color: inherit; font-weight: 700; text-decoration: underline; }

/* ---------- Header ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: rgba(244, 244, 243, .94);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.cabecera.is-scrolled { border-bottom-color: var(--linea); }
.cabecera__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.cabecera__logo img { width: 112px; height: auto; }
.cabecera__acciones { display: flex; align-items: center; gap: 1.25rem; }
.cabecera__tel { display: none; align-items: center; gap: .45rem; text-decoration: none; font-size: var(--t-sm); color: var(--texto-2); min-height: 44px; }
.cabecera__tel:hover { color: var(--tinta); }
@media (min-width: 768px) {
  .cabecera__in { min-height: 4.75rem; }
  .cabecera__logo img { width: 132px; }
  .cabecera__tel { display: inline-flex; }
}

/* ---------- Header over the hero (index only, needs JS for the scrolled state) ---------- */
.cabecera__logo picture { display: block; }
.cabecera__logo .cabecera__logo-rev { display: none; } /* beats .cabecera__logo picture */
.cabecera--sobre { transition: border-color .2s, background-color .3s var(--ease); }
.js .cabecera--sobre:not(.is-scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.js .cabecera--sobre:not(.is-scrolled) .cabecera__logo-base { display: none; }
.js .cabecera--sobre:not(.is-scrolled) .cabecera__logo-rev { display: block; }
.js .cabecera--sobre:not(.is-scrolled) .cabecera__tel { color: #e9e7e3; }
.js .cabecera--sobre:not(.is-scrolled) .cabecera__tel:hover { color: var(--blanco); }
.js .cabecera--sobre:not(.is-scrolled) .btn { --b-bg: transparent; --b-fg: var(--blanco); --b-bd: rgba(255,255,255,.6); }
.js .cabecera--sobre:not(.is-scrolled) .btn:hover { --b-bg: var(--blanco); --b-fg: var(--carbon); --b-bd: var(--blanco); }
.js .cabecera--sobre:not(.is-scrolled) :focus-visible { outline-color: var(--laton); }

/* ---------- Hero ---------- */
/* Round 12: the hero is content-height and top-anchored (no 100svh stretching). The photo zone above the tag is --h-top; the doctor row (first part of the form card) must end
   at <= 86 % of the screen height on tall phones, so it is visible even in a cropped DevTools window. Targets are verified at 10 phone sizes (README, Ronda 12).
   Scale unit --u: 1u = 1px on the reference phone (iPhone 16, 393x852 CSS px). Everything in the first screen is written as calc(var(--u) * N),
   so every phone shows the same composition, proportionally. u = the smaller of width/393 and height/852, floored at .78 (legible text) and capped at 1.3.
   Tweak: change the N of a property (reference px) or the floor/cap in the clamp() below. From 1024px the hero is the desktop layout and u is fixed to 1px. */
.hero {
  --u: 1px; /* fallback: browsers without min()/clamp()/svh keep the reference size */
  --h-cab: calc(4rem + 1px); /* header height incl. its 1px border */
  --h-top: calc(var(--u) * 48); /* photo zone between the header and the tag (the copy is top-anchored; no 100svh stretching) */
  /* The doctor row of the form card (avatar + «Te valora» + name + title) is the only part of the card inside the first screen:
     --doc-h is its exact height (card top padding + oval avatar incl. brass ring + bottom padding). The copy block fills the rest of 100svh. */
  --doc-av: calc(var(--u) * 88);   /* avatar width (4:5 oval) */
  --doc-pt: calc(var(--u) * 16);   /* card padding-top */
  --doc-pb: calc(var(--u) * 10);   /* space under the doctor row */
  --doc-ring: calc(var(--u) * 12); /* avatar margin (6px each side) that holds the brass ring */
  --doc-h: calc(var(--doc-pt) + var(--doc-av) * 1.25 + var(--doc-ring) + var(--doc-pb));
  position: relative; isolation: isolate;
  background: var(--carbon); color: var(--blanco);
  padding-block: var(--h-top) 0; /* the full-bleed form panel closes the hero on mobile/tablet */
  overflow-x: clip; /* the desktop ring may exceed the viewport; y stays visible for the card overlap */
}
@supports (width: min(1px, 2px)) {
  .hero { --u: clamp(.78px, min(100vw / 393, 100vh / 852), 1.3px); }
}
@supports (height: 100svh) and (width: min(1px, 2px)) {
  .hero { --u: clamp(.78px, min(100vw / 393, 100svh / 852), 1.3px); }
}
.js .hero { margin-top: calc(var(--h-cab) * -1); padding-top: calc(var(--h-cab) + var(--h-top)); }

/* Photo + veil + oval, clipped here so the form card can overlap the next section.
   Mobile: the photo only covers the copy area (it fades into charcoal); the form card starts right after the copy,
   so the doctor header row is inside the first screen. */
.hero__fondo { position: absolute; inset: 0 0 auto; height: calc(var(--u) * 560); max-height: 100%; z-index: -1; overflow: hidden; } /* covers the header + copy zone and fades into charcoal before the form card */
.hero__fondo picture, .hero__fondo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__fondo img { object-fit: cover; object-position: 30% 0%; filter: grayscale(.4) contrast(1.05); transform-origin: 35% 20%; }
.hero__velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(24,24,24,.5) 0%, rgba(24,24,24,.74) 32%, rgba(24,24,24,.94) 66%, var(--carbon) 100%);
}
.hero__oval { display: none; } /* desktop only: frames the form card, echoing the logo oval */

.hero__grid { position: relative; display: grid; gap: 0; }
.hero__copia { max-width: 44rem; min-width: 0; padding-bottom: calc(var(--u) * 10); } /* top-anchored: the doctor row follows the cards directly */

/* H1 = one heading with three lines: tag (Chamberí, Madrid) + MEDICINA ESTÉTICA + the dimmer promise line */
.hero__titulo { font-family: var(--f-display); text-transform: uppercase; margin-bottom: calc(var(--u) * 24); }
.hero__tag {
  display: flex; align-items: center; gap: calc(var(--u) * 10); margin-bottom: calc(var(--u) * 14);
  font-family: var(--f-texto); font-weight: 400; font-size: max(12px, calc(var(--u) * 14)); letter-spacing: .2em; line-height: 1.2; color: var(--laton);
}
.hero__tag::before { content: ""; width: calc(var(--u) * 28); height: 1px; background: var(--laton); flex: none; }
.hero__l1, .hero__l2 { display: block; }
.hero__l1 {
  font-weight: 300; font-size: calc(var(--u) * 46);
  line-height: .98; letter-spacing: -.005em; text-wrap: balance;
}
.hero__l2 {
  font-weight: 300; color: var(--laton);
  font-size: calc(var(--u) * 37);
  letter-spacing: .03em; line-height: 1.1; margin-top: calc(var(--u) * 12); text-wrap: balance;
}
.hero__sub { font-size: max(14px, calc(var(--u) * 18)); font-weight: 400; line-height: 1.48; color: var(--blanco); max-width: min(36rem, calc(var(--u) * 340)); margin: 0 0 calc(var(--u) * 14); }

/* "Qué tratamos": two equal, compact tiles in one row (thin brass line icon + label + descriptor), they scroll to their block in «¿Qué podemos valorar contigo?» */
.areas { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 10); margin: calc(var(--u) * 38) 0 0; }
.areas li { display: flex; }
.area { /* light tile, name only: icon + label centred on one line, arrow at the right, thin low-contrast border */
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: calc(var(--u) * 8); width: 100%;
  padding: calc(var(--u) * 17) calc(var(--u) * 26) calc(var(--u) * 17) calc(var(--u) * 12);
  border: 1px solid rgba(255,255,255,.13); border-radius: var(--radio-s);
  background: rgba(255,255,255,.03); color: var(--blanco); text-decoration: none;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.area__icono { width: calc(var(--u) * 20); height: calc(var(--u) * 20); fill: none; stroke: var(--laton); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.area__txt { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: max(14px, calc(var(--u) * 16.5)); letter-spacing: .04em; line-height: 1.15; white-space: nowrap; }
.area__flecha { position: absolute; right: calc(var(--u) * 10); top: calc(50% - var(--u) * 6); width: calc(var(--u) * 12); height: calc(var(--u) * 12); color: rgba(255,255,255,.35); stroke-width: 1.5; transition: transform .3s var(--ease), color .3s var(--ease); }
.area:hover, .area:active { border-color: rgba(179,154,114,.85); background: rgba(179,154,114,.1); }
.area:hover .area__flecha, .area:active .area__flecha { transform: translate(2px, 2px); color: var(--laton); }
.area:focus-visible { outline: 2px solid var(--laton); outline-offset: 2px; }

/* Tablet: same composition as the phone (scaled by --u), form below the copy */
@media (min-width: 768px) {
  .hero { --h-cab: calc(4.75rem + 1px); }
  .hero__fondo img { object-position: 50% 30%; }
  .hero__velo { background: linear-gradient(180deg, rgba(24,24,24,.55) 0%, rgba(24,24,24,.86) 30%, rgba(24,24,24,.95) 55%, var(--carbon) 90%); }
  .areas { max-width: 30rem; }
}

@media (min-width: 1024px) {
  /* Desktop: the hero is one complete screen (form card fully visible, copy centred beside it); taller only if the content needs it */
  .hero { --u: 1px; display: grid; align-content: center; min-height: 100vh; min-height: 100svh; padding-bottom: clamp(1rem, 3svh, 3rem); } /* desktop: no scaling, 1u = 1px */
  .js .hero { padding-top: calc(var(--h-cab) + 1rem); } /* the card top is never hidden under the transparent header; on short laptops the hero grows and the card extends below the fold */
  .hero__fondo { height: auto; inset: 0; max-height: none; }
  .hero__fondo img { object-position: 0% 35%; }
  .hero__velo {
    background:
      linear-gradient(90deg, rgba(22,22,22,.95) 0%, rgba(22,22,22,.92) 54%, rgba(22,22,22,.8) 61%, rgba(22,22,22,.5) 76%, rgba(22,22,22,.45) 100%),
      linear-gradient(180deg, rgba(22,22,22,.35) 0%, rgba(22,22,22,0) 30%, rgba(22,22,22,.55) 100%);
  }
  .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 3.5rem; align-items: start; }
  .hero__copia { grid-column: 1; grid-row: 1; align-self: start; margin-top: clamp(0px, 10svh, 7rem); padding: 0; min-height: 0; display: block; } /* top-aligned with a small offset (balanced against the card, never pushed down by a tall card) */
  .hero__titulo { margin-bottom: 1.1rem; }
  .hero__tag { gap: .65rem; margin-bottom: 1rem; font-size: .9375rem; }
  .hero__tag::before { width: 1.75rem; }
  .hero__l1 { font-size: clamp(3.5rem, min(.8rem + 5.9vw, 9.5svh), 6.45rem); line-height: 1.04; letter-spacing: -.01em; }
  .hero__l2 { font-size: clamp(1.75rem, min(.6rem + 2.5vw, 5svh), 2.75rem); margin-top: .4rem; line-height: 1.12; }
  .hero__sub { font-size: clamp(1.125rem, min(.7rem + .6vw, 2.6svh), 1.375rem); margin-bottom: .75rem; }
  /* desktop tiles: same name-only design in rem sizes */
  .areas { margin-top: 1.5rem; gap: .75rem; max-width: 28rem; }
  .area { padding: 1.1rem 2.25rem 1.1rem 1.1rem; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.04); column-gap: .65rem; }
  .area__icono { width: 1.5rem; height: 1.5rem; }
  .area__txt { font-size: 1.25rem; }
  .area__flecha { right: .85rem; top: calc(50% - .45rem); width: .9rem; height: .9rem; color: rgba(255,255,255,.45); }
  .tarjeta-form { grid-column: 2; grid-row: 1; }
  .hero__oval {
    display: block; grid-column: 2; grid-row: 1; justify-self: center; align-self: center;
    width: calc(100% + 4.5rem); height: calc(100% + 5rem);
    border-radius: 50%; border: 1px solid rgba(179,154,114,.5); pointer-events: none;
  }
  .tarjeta-form { position: relative; z-index: 2; }
}
@media (min-width: 1280px) {
  .hero__oval { width: calc(100% + 7rem); }
}

/* One orchestrated entrance: slow settle of the photo + staggered copy.
   Only when motion is allowed; at rest (or without animations) everything is visible. */
@media (prefers-reduced-motion: no-preference) {
  .hero__fondo img { animation: hero-foto 9s cubic-bezier(.2,.6,.2,1) both; }
  .hero__oval { animation: hero-fundido 2.4s .5s var(--ease) both; }
  .hero__tag, .hero__sub, .areas { animation: hero-sube .9s var(--ease) both; }
  .hero__l1, .hero__l2 { animation: hero-linea 1.1s var(--ease) both; }
  .hero__tag { animation-delay: .02s; }
  .hero__l1 { animation-delay: .1s; }
  .hero__l2 { animation-delay: .28s; }
  .hero__sub { animation-delay: .42s; }
  .areas { animation-delay: .62s; }
}
@keyframes hero-foto { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes hero-fundido { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-sube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hero-linea {
  from { opacity: 0; transform: translateY(.35em); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(-50% -10% -50% -10%); }
}

/* ---------- Form card ---------- */
/* Mobile/tablet: full-bleed light panel (no dark side bands). Desktop: white card in the right column. */
.tarjeta-form {
  background: var(--hueso); color: var(--tinta);
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--doc-pt, 1.25rem) var(--gutter) 2.25rem;
}
@media (min-width: 768px) { .tarjeta-form { padding-block: var(--doc-pt, 2.25rem) 2.5rem; } }
@media (min-width: 1024px) {
  .tarjeta-form { margin-inline: 0; background: var(--blanco); border-radius: var(--radio-m); box-shadow: var(--sombra-card); padding: 1.1rem 1.75rem 1.2rem; }
  /* Compact card. The doctor row (face + name + role) is ALWAYS shown; on shorter screens the intro, helper text and trust rows go first, then fields get tighter. The card may extend below the fold. */
  .tarjeta-form .mini-doctor { display: flex; padding-bottom: .75rem; gap: 1.1rem; }
  .tarjeta-form .mini-doctor__foto { width: 4.5rem; margin: 6px; }
  .tarjeta-form .aval, .tarjeta-form .tarjeta-form__intro, .tarjeta-form .campo__ayuda { display: none; }
  .tarjeta-form .tarjeta-form__titulo { font-size: 1.5rem; margin-bottom: .75rem; }
  .tarjeta-form .campo, .tarjeta-form fieldset.campo { margin-bottom: .65rem; }
  .tarjeta-form .campo > label, .tarjeta-form .campo legend { margin-bottom: .25rem; }
  .tarjeta-form .campo input[type="text"], .tarjeta-form .campo input[type="tel"], .tarjeta-form .campo input[type="email"] { min-height: 2.75rem; padding-block: .45rem; }
  .tarjeta-form .segmentado label { min-height: 2.75rem; }
  .tarjeta-form .check-legal { font-size: var(--t-xs); line-height: 1.4; }
  .tarjeta-form .rgpd { margin: 0 0 .75rem; }
  .tarjeta-form .rgpd summary { min-height: 2rem; }
  .tarjeta-form .separador-o { margin: .6rem 0; }
  .tarjeta-form .btn-wa { min-height: 3rem; padding: .4rem .9rem; gap: .75rem; }
  .tarjeta-form .btn-wa__icono { width: 2rem; height: 2rem; }
  .tarjeta-form .btn-wa__icono .icon { width: 1.1rem; height: 1.1rem; }
  .tarjeta-form .btn-wa small { display: none; }
}
/* Taller desktop viewports: bring back the doctor, then the intro/helpers, then the trust rows */
@media (min-width: 1024px) and (min-height: 760px) {
  .tarjeta-form { padding: 1.25rem 1.75rem 1.35rem; }
  .tarjeta-form .campo input[type="text"], .tarjeta-form .campo input[type="tel"], .tarjeta-form .campo input[type="email"], .tarjeta-form .segmentado label { min-height: 2.875rem; }
}
@media (min-width: 1024px) and (min-height: 800px) {
  .tarjeta-form .mini-doctor__foto { width: 4.75rem; }
}
@media (min-width: 1024px) and (min-height: 940px) {
  .tarjeta-form { padding: 1.75rem 2rem 1.6rem; }
  .tarjeta-form .tarjeta-form__intro, .tarjeta-form .campo__ayuda { display: block; }
  .tarjeta-form .tarjeta-form__intro { margin-bottom: .9rem; }
  .tarjeta-form .campo__ayuda { margin-top: .2rem; }
  .tarjeta-form .mini-doctor__cargo { display: block; }
  .tarjeta-form .mini-doctor__foto { width: 5.25rem; }
  .tarjeta-form .btn-wa small { display: block; }
}
@media (min-width: 1024px) and (min-height: 1040px) {
  .tarjeta-form { padding: 2.25rem 2.25rem 2rem; }
  .tarjeta-form .aval { display: grid; padding: .7rem 0 .85rem; margin-bottom: 1rem; }
  .tarjeta-form .campo, .tarjeta-form fieldset.campo { margin-bottom: 1rem; }
}

.mini-doctor { display: flex; align-items: center; gap: calc(var(--u, 1px) * 20); padding-bottom: var(--doc-pb, 1rem); }
.mini-doctor__foto { position: relative; flex: none; width: var(--doc-av, 5.5rem); aspect-ratio: 4 / 5; margin: calc(var(--u, 1px) * 6); }
.mini-doctor__foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 0; filter: none; }
.mini-doctor__foto::after { content: ""; position: absolute; inset: calc(var(--u, 1px) * -6); border: 1px solid var(--laton); border-radius: 50%; }
.mini-doctor__txt { margin: 0; }
.mini-doctor__rol { display: block; font-size: max(12px, calc(var(--u, 1px) * 15)); color: var(--laton-osc); letter-spacing: .02em; }
.mini-doctor__nombre { display: block; font-weight: 700; font-size: max(14px, calc(var(--u, 1px) * 18)); line-height: 1.3; }
.mini-doctor__cargo { display: block; font-size: max(12px, calc(var(--u, 1px) * 13)); color: var(--texto-2); }

/* Trust list: two items (SEME + Plaza de Olavide) under the mini doctor card */
.aval {
  list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1rem;
  padding: .9rem 0 1.15rem; margin-bottom: 1.35rem;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  font-size: var(--t-xs); line-height: 1.3; color: var(--texto-2);
}
.aval li { display: flex; align-items: flex-start; gap: .5rem; min-width: 0; }
.aval .icon { width: 1.05rem; height: 1.05rem; margin-top: .05rem; color: var(--laton-osc); stroke-width: 1.4; }
.aval strong { display: block; color: var(--tinta); font-weight: 700; }

.tarjeta-form__titulo { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 1.75rem; line-height: 1.1; letter-spacing: .02em; margin-bottom: .4rem; }
.tarjeta-form__intro { font-size: var(--t-sm); color: var(--texto-2); margin-bottom: 1.25rem; }

.campo { margin-bottom: 1rem; }
.campo > label, .campo legend { display: block; font-size: var(--t-sm); font-weight: 700; margin-bottom: .35rem; }
.campo input[type="text"], .campo input[type="tel"], .campo input[type="email"] {
  width: 100%; min-height: 3rem; padding: .7rem .9rem;
  border: 1px solid #b9b6b0; border-radius: var(--radio-s);
  background: var(--blanco); font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
.campo input:hover { border-color: #8f8b85; }
.campo input:focus-visible { outline: none; border-color: var(--carbon); box-shadow: 0 0 0 3px rgba(122, 100, 67, .35); }
.campo input[aria-invalid="true"] { border-color: var(--error); }
.campo__ayuda { font-size: var(--t-xs); color: var(--texto-2); margin-top: .3rem; }
.campo__error { display: none; font-size: var(--t-xs); color: var(--error); margin-top: .3rem; font-weight: 700; }
.campo.has-error .campo__error { display: block; }

fieldset.campo { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.segmentado { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #b9b6b0; border-radius: var(--radio-s); overflow: hidden; }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado label {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .5rem; cursor: pointer; font-size: var(--t-sm);
  transition: background-color .15s, color .15s;
}
.segmentado label + input + label { border-left: 1px solid #b9b6b0; }
/* three options: 2 + 1 (the third spans the row) on phones and in the desktop card; three equal segments on tablets, where the form is wide */
.segmentado input:nth-of-type(3) + label { grid-column: 1 / -1; border-left: 0; border-top: 1px solid #b9b6b0; }
@media (min-width: 640px) {
  .segmentado { grid-template-columns: repeat(3, 1fr); }
  .segmentado input:nth-of-type(3) + label { grid-column: auto; border-top: 0; border-left: 1px solid #b9b6b0; }
}
@media (min-width: 1024px) {
  .segmentado { grid-template-columns: 1fr 1fr; }
  .segmentado input:nth-of-type(3) + label { grid-column: 1 / -1; border-left: 0; border-top: 1px solid #b9b6b0; }
}
.segmentado input:checked + label { background: var(--carbon); color: var(--blanco); }
.segmentado input:focus-visible + label { outline: 2px solid var(--laton-osc); outline-offset: -4px; }
.campo.has-error .segmentado { border-color: var(--error); }
/* «¿Qué te interesa?» (r34): always 2 + 1 — «Aún no lo tengo claro» is too long for a third of the modal at 640–1023px */
@media (min-width: 640px) {
  .segmentado--interes { grid-template-columns: 1fr 1fr; }
  .segmentado--interes input:nth-of-type(3) + label { grid-column: 1 / -1; border-left: 0; border-top: 1px solid #b9b6b0; }
}
.segmentado label { text-align: center; line-height: 1.25; }

.campo > label.check-legal { font-weight: 400; }
.check-legal { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-sm); line-height: 1.45; cursor: pointer; }
.check-legal input { width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--carbon); flex: none; cursor: pointer; }
.check-legal a { font-weight: 700; }

.rgpd { margin: .5rem 0 1.25rem; font-size: var(--t-xs); color: var(--texto-2); }
.rgpd summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: .35rem; text-decoration: underline; }
.rgpd summary::-webkit-details-marker { display: none; }
.rgpd summary { list-style: none; }
.rgpd dl { margin: .25rem 0 0; display: grid; gap: .35rem; }
.rgpd dt { font-weight: 700; color: var(--tinta); }
.rgpd dd { margin: 0 0 .25rem; }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-estado { font-size: var(--t-sm); margin-top: .9rem; }
.form-estado:empty { display: none; }
.form-estado--error { background: #f8ecea; border-left: 3px solid var(--error); padding: .8rem 1rem; color: #5c1f1a; border-radius: 0 var(--radio-s) var(--radio-s) 0; }
.form-estado--error a { font-weight: 700; }
.form-sinjs { display: none; }
.form-sinjs:target { display: block; }

.separador-o { display: flex; align-items: center; gap: .9rem; margin: 1.25rem 0; font-size: var(--t-xs); color: var(--texto-2); }
.separador-o::before, .separador-o::after { content: ""; flex: 1; height: 1px; background: var(--linea); }

.btn-wa {
  display: flex; align-items: center; gap: .9rem; width: 100%;
  padding: .85rem 1rem; min-height: 3.5rem;
  border: 1px solid var(--linea); border-radius: var(--radio-m);
  text-decoration: none; background: transparent;
  transition: border-color .2s, background-color .2s;
}
.btn-wa:hover { border-color: #b9b6b0; background: rgba(38,38,38,.04); }
.btn-wa__icono { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #1f8a4c; color: #fff; display: grid; place-items: center; flex: none; }
.btn-wa__icono .icon { width: 1.3rem; height: 1.3rem; }
.btn-wa strong { display: block; font-size: var(--t-sm); }
.btn-wa small { display: block; font-size: var(--t-xs); color: var(--texto-2); }

.turnstile-slot:empty { display: none; }
.turnstile-slot { margin-bottom: 1rem; }

/* ---------- Band: «Primero, valoramos.» (typographic statement on charcoal, brass rule + oval motif) ---------- */
.banda { position: relative; isolation: isolate; overflow: hidden; background: var(--carbon); color: var(--blanco); padding-block: 4rem 4.25rem; }
.banda__oval { /* the logo oval, cropped by the band edge */
  position: absolute; z-index: -1; right: -9rem; top: 50%; width: 22rem; height: 28rem; transform: translateY(-50%) rotate(-8deg);
  border: 1px solid rgba(179,154,114,.32); border-radius: 50%; pointer-events: none;
}
.banda__in { display: grid; gap: 1.5rem; }
.banda__titulo {
  font-family: var(--f-display); font-weight: 300; text-transform: uppercase;
  font-size: clamp(3rem, 15vw, 4.5rem); line-height: .95; letter-spacing: -.005em;
}
.banda__titulo span { display: block; }
.banda__acento { color: var(--laton); }
.banda__txt {
  max-width: 34rem; margin: 0; padding-top: 1.35rem; border-top: 1px solid var(--laton);
  font-size: 1.375rem; font-weight: 400; line-height: 1.42; color: rgba(255,255,255,.95); text-wrap: pretty;
}
@media (min-width: 768px) {
  .banda { padding-block: 5.5rem; }
  .banda__oval { right: -6rem; width: 30rem; height: 38rem; }
  .banda__txt { font-size: 1.5rem; max-width: 36rem; }
  .banda__titulo { font-size: clamp(4.5rem, 2rem + 6vw, 7rem); }
}
@media (min-width: 1024px) {
  .banda { padding-block: 6rem; }
  .banda__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: end; }
  .banda__txt { padding-top: 1.5rem; margin-bottom: .6rem; font-size: 1.75rem; line-height: 1.38; }
  .banda__oval { right: 4%; width: 34rem; height: 44rem; }
}

/* ---------- Sections ---------- */
/* Background rhythm: only two section backgrounds, --hueso (light) and --carbon (dark: .hero, .banda, .cta-media, .cierre, .pie). Related consecutive sections share
   one background; inside a light run, a hairline in the container marks where one section ends and the next begins. */
.seccion { padding-block: var(--sec); }
.seccion--hueso { background: var(--hueso); }
/* Two consecutive light sections share ONE boundary: a single hairline centred in a normal gap (no padding stacked on both sides, no second line) */
.seccion--hueso:has(+ .seccion--hueso) { padding-bottom: calc(var(--sec) * .6); }
.seccion--hueso + .seccion--hueso { padding-top: 0; }
.seccion--hueso + .seccion--hueso::before {
  content: ""; display: block; width: calc(100% - var(--gutter) * 2); max-width: var(--max); height: 1px;
  margin: 0 auto calc(var(--sec) * .6); background: var(--linea);
}
.cabeza-seccion { margin-bottom: 2.5rem; max-width: 44rem; }
.cabeza-seccion .h2 { margin-bottom: 1rem; }

/* ---------- Doctor ----------
   Mobile: large 4:5 portrait (full content width, 4px corners, no frame, capped at 70svh) then name, one subtitle line, the statement and a typographic «ficha».
   Desktop (>=1024): sticky portrait column (440px; the source is 597px wide) beside the text. */
.doctor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.retrato { margin: 0; }
.retrato picture { display: block; }
.retrato img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 70vh; max-height: 70svh; object-fit: cover; object-position: 50% 20%; border-radius: 4px; filter: grayscale(.15) contrast(1.02); background: #d9d6d1; }
.doctor__texto { min-width: 0; }
.doctor__texto .h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3rem); margin-bottom: .75rem; }
.doctor__rol { max-width: 34rem; margin: 0 0 1.75rem; font-size: var(--t-base); line-height: 1.5; color: var(--texto-2); }
.doctor__cita {
  position: relative; max-width: 34rem; margin: 0 0 2rem; padding-top: 1.5rem;
  font-family: var(--f-display); font-weight: 300; font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.125rem); line-height: 1.3; letter-spacing: .005em; color: var(--tinta); text-wrap: pretty;
}
.doctor__cita::before { content: ""; position: absolute; left: 0; top: 0; width: 2.75rem; height: 2px; background: var(--laton-osc); }
.ficha { margin: 0 0 2rem; max-width: 40rem; border-top: 1px solid var(--carbon); }
.ficha__fila { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: .3rem; padding: .95rem 0; border-bottom: 1px solid var(--linea); } /* stacked (label above value) until there is room for two columns */
.ficha dt { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--laton-osc); }
.ficha dd { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--tinta); }
.ficha__soc { container-type: inline-size; }
.ficha__soc span { display: block; } /* one society per line; the size follows the value column (longest line ≈ 24em) and the line never wraps when it fits at >=13px */
@container (min-width: 312px) { .ficha__soc span { white-space: nowrap; font-size: clamp(13px, calc(100cqw / 24), .9375rem); } }
@media (min-width: 640px) {
  .doctor { max-width: 32rem; }
  .ficha__fila { grid-template-columns: 8rem minmax(0, 1fr); }
}
@media (min-width: 768px) {
  .doctor { max-width: none; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); column-gap: 2.5rem; }
  .retrato { position: sticky; top: 6.5rem; }
  .ficha__fila { grid-template-columns: minmax(0, 1fr); } /* the text column is narrow beside the portrait: label above value */
}
@media (min-width: 1024px) {
  .doctor { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); column-gap: 5rem; }
  .retrato { top: 7rem; }
  .retrato img { max-height: none; border-radius: 6px; }
  .doctor__texto .h2 { font-size: var(--t-h2); }
}
@media (min-width: 1280px) {
  .ficha__fila { grid-template-columns: 9rem minmax(0, 1fr); }
}

/* ---------- Where we are (facade + concise NAP + big directions button + map) ---------- */
.donde { display: grid; gap: 2.25rem; }
.donde__info { display: grid; gap: 1.75rem; align-content: start; }
.donde__foto { margin: 0 calc(var(--gutter) * -1); }
.donde__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 45%; }
.btn--grande { min-height: 3.75rem; padding: 1rem 1.75rem; font-size: var(--t-base); gap: .75rem; }
.donde__llegar { width: 100%; }
.donde__llegar .icon { width: 1.35rem; height: 1.35rem; }
.donde__llegar-flecha { transition: transform .25s var(--ease); }
.donde__llegar:hover .donde__llegar-flecha { transform: translateX(3px); }
.donde .mapa { margin-inline: calc(var(--gutter) * -1); aspect-ratio: 1 / 1; border-radius: 0; border-inline: 0; }
.donde__llegar.btn { min-height: 3.75rem; }
@media (min-width: 640px) {
  .donde__llegar { width: auto; justify-self: start; padding-inline: 2.5rem; }
  .donde .mapa { aspect-ratio: 16 / 10; }
}
@media (min-width: 1024px) {
  .donde { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; align-items: stretch; }
  .donde__foto { margin-inline: 0; }
  .donde__foto img { border-radius: var(--radio-m); }
  .donde .mapa { margin-inline: 0; aspect-ratio: auto; min-height: 36rem; border-radius: var(--radio-m); border-inline: 1px solid var(--linea); }
}

/* ---------- Steps: numbered timeline (vertical on mobile, horizontal with a connecting rule from 768px) ---------- */
.pasos { list-style: none; display: grid; gap: 0; }
.paso { position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); align-content: start; gap: 1.25rem; padding-bottom: 2.25rem; }
.paso:last-child { padding-bottom: 0; }
.paso::before { /* connecting rule between nodes */
  content: ""; position: absolute; left: calc(1.625rem - .5px); top: 3.25rem; bottom: 0; width: 1px; background: var(--laton);
}
.paso:last-child::before { display: none; }
.paso__nodo {
  position: relative; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  border: 1px solid var(--laton); background: var(--hueso);
  font-family: var(--f-display); font-weight: 300; font-size: 1.5rem; line-height: 1; color: var(--laton-osc);
}
.paso__cuerpo { padding-top: .35rem; min-width: 0; }
.paso__icono { width: 1.75rem; height: 1.75rem; margin-bottom: .75rem; fill: none; stroke: var(--laton-osc); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.paso__etiqueta { display: block; font-size: var(--t-xs); color: var(--texto-2); letter-spacing: .04em; }
.paso .h3 { margin: .15rem 0 .5rem; font-size: 2rem; font-weight: 300; letter-spacing: .02em; }
.paso__cuerpo > p { margin: 0; color: var(--texto-2); max-width: 22rem; }
@media (min-width: 1024px) { /* horizontal timeline; the middle column is wider because «Valoramos» holds the Facial | Corporal disclosure */
  .pasos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr); gap: 2.5rem; }
  .paso { grid-template-columns: 1fr; gap: 1.5rem; padding-bottom: 0; }
  .paso::before, .paso:last-child::before { display: block; left: 4rem; right: -2.5rem; top: calc(2rem - .5px); bottom: auto; width: auto; height: 1px; }
  .paso:last-child::before { right: 0; background: linear-gradient(90deg, var(--laton), transparent); }
  .paso__nodo { width: 4rem; height: 4rem; font-size: 1.875rem; }
  .paso .h3 { font-size: 2.25rem; }
}

/* «Valoramos»: Facial and Corporal blocks, always visible (stacked; a single hairline between them) */
.vdesp { margin-top: 1.5rem; max-width: 36rem; }
.vdesp__item + .vdesp__item { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--linea); }
.vdesp__titulo { display: grid; gap: .15rem; min-width: 0; margin: 0 0 .75rem; font-weight: 400; }
.vdesp__rotulo { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; letter-spacing: .05em; font-size: 1.375rem; line-height: 1.15; color: var(--laton-osc); }
.vdesp__cuerpo { padding: 0; }
.vdesp__cuerpo p { max-width: none; margin: 0 0 1rem; font-size: var(--t-base); line-height: 1.6; color: var(--tinta); }
.vdesp__cuerpo p:last-child { margin-bottom: 0; }
.vdesp__fotos { margin: 0 0 1.25rem; }
.vdesp__foto { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.vdesp__foto img { width: auto; height: 13rem; max-width: 100%; }
.vdesp__foto figcaption { margin-top: .5rem; font-size: var(--t-xs); line-height: 1.4; color: var(--texto-2); }
.vdesp__cuerpo strong, .valorar__bloque strong { font-weight: 700; } /* main services / treatments: plain bold */

/* Mid-page CTA: its own charcoal block right after the steps */
.cta-media { background: var(--carbon); color: var(--blanco); padding-block: calc(var(--sec) * .85); }
.cta-media__in { display: grid; gap: 1.75rem; }
.cta-media__titulo { margin: 0 0 .75rem; font-family: var(--f-display); font-weight: 300; text-transform: uppercase; font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); line-height: 1; letter-spacing: -.005em; }
.cta-media__txt { margin: 0; max-width: 32rem; color: var(--texto-claro); font-weight: 300; font-size: var(--t-lg); line-height: 1.55; }
.cta-media__botones { display: grid; gap: .75rem; }
@media (min-width: 640px) { .cta-media__botones { display: flex; flex-wrap: wrap; } }
@media (min-width: 1024px) {
  .cta-media__in { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 3rem; }
}

/* ---------- What we assess: two short prose blocks (facial | corporal), plain headings, no rules or rows ---------- */
.valorar { display: grid; gap: 2.5rem; }
.valorar__bloque { outline: 0; }
.valorar__titulo {
  font-family: var(--f-display); font-weight: 300; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.25rem); line-height: 1.1; margin-bottom: .75rem;
}
.valorar__bloque p { max-width: 38ch; margin: 0; font-size: var(--t-base); line-height: 1.65; color: var(--tinta); }
@media (min-width: 768px) {
  .valorar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; align-items: start; }
}

/* ---------- Reviews ---------- */
.resenas { display: grid; gap: 2rem; align-items: center; }
.resenas__intro { margin-top: 1rem; }
.resenas__caja { padding-top: 1.5rem; border-top: 1px solid var(--carbon); }
.resenas__caja p { color: var(--texto-2); }
@media (min-width: 1024px) {
  .resenas { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .resenas__caja { padding: 2.25rem 2rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-m); }
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 2rem; }
.faq__intro { margin: 1rem 0 0; } /* no trailing <p> margin: it stacked on the grid gap and left a blank band above the first question */
.preguntas { border-top: 1px solid var(--carbon); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 0; font-weight: 700; font-size: var(--t-lg); line-height: 1.4; min-height: 44px;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary .icon { margin-top: .2rem; transition: transform .25s var(--ease); color: var(--texto-2); }
.preguntas details[open] > summary .icon { transform: rotate(45deg); }
.preguntas .respuesta { padding-bottom: 1.25rem; color: var(--texto-2); max-width: 40rem; }
.preguntas .respuesta p:last-child { margin-bottom: 0; }
@media (min-width: 1024px) {
  .faq { grid-template-columns: 5fr 7fr; gap: 4.5rem; align-items: start; }
  .faq__lado { position: sticky; top: 6.5rem; }
}

/* ---------- Final CTA ---------- */
.cierre { color: var(--blanco); background: var(--carbon); padding-block: var(--sec) 2.5rem; }
.cierre__titulo { font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.75rem); line-height: 1; max-width: 18ch; margin-bottom: 1.5rem; }
.cierre__botones { display: grid; gap: .75rem; margin: 2rem 0 2.5rem; }
@media (min-width: 640px) { .cierre__botones { display: flex; flex-wrap: wrap; } }
.cierre__direccion {
  display: flex; gap: .7rem; align-items: flex-start; margin: 0;
  font-size: var(--t-sm); color: var(--texto-claro); line-height: 1.5;
}
.cierre__direccion .icon { color: var(--laton); margin-top: .1rem; }
.cierre__direccion a { color: var(--blanco); font-weight: 700; }
.nap { font-style: normal; display: grid; gap: 1rem; }
.nap__fila { display: flex; gap: .8rem; align-items: flex-start; line-height: 1.5; }
.nap__fila .icon { color: var(--laton-osc); margin-top: .15rem; }
.mapa {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radio-m); overflow: hidden;
  background: var(--hueso); border: 1px solid var(--linea);
}
.mapa iframe { width: 100%; height: 100%; border: 0; }
.mapa__cargar { /* map placeholder: a street grid drawn in hairlines on the section's own background */
  position: absolute; inset: 0; width: 100%; display: grid; place-content: center; justify-items: center; gap: .75rem;
  background:
    repeating-linear-gradient(0deg, rgba(38,38,38,.07) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(38,38,38,.07) 0 1px, transparent 1px 40px),
    var(--hueso);
  color: var(--tinta); border: 0; cursor: pointer; padding: 1.5rem; text-align: center;
}
.mapa__cargar strong { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; font-size: 1.25rem; }
.mapa__cargar .icon { width: 2rem; height: 2rem; color: var(--laton-osc); }
.mapa__cargar small { color: var(--texto-2); font-size: var(--t-xs); max-width: 18rem; }

/* ---------- Footer ---------- */
/* Same charcoal as the final CTA: the two merge, separated only by a hairline inside the container */
.pie { background: var(--carbon); color: var(--texto-claro); padding-block: 0 3rem; font-size: var(--t-sm); }
.pie > .contenedor::before { content: ""; display: block; height: 1px; margin-bottom: 2.5rem; background: var(--linea-osc); }
.pie__grid { display: grid; gap: 2rem; }
.pie__logo img { width: 128px; }
.pie address { font-style: normal; line-height: 1.7; }
.pie a { color: var(--texto-claro); }
.pie a:hover { color: var(--blanco); }
.pie__legal { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.pie__legal a { display: inline-flex; min-height: 44px; align-items: center; }
.pie__base { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2rem; padding-top: 1.5rem; font-size: var(--t-xs); color: #a19e99; }
.pie__base button { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; }
@media (min-width: 768px) { .pie__grid { grid-template-columns: 1fr 1fr 1fr; } }

/* ---------- Floating actions ----------
   Mobile (<768px): ONLY the WhatsApp circle, hidden until the user has scrolled past the «Primero, valoramos.» band (main.js adds .is-pasada); no phone circle, no bar.
   Desktop/tablet (>=768px): WhatsApp + phone circles, hidden only while the hero form card is on screen (.is-oculto). */
.flotantes {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom) + var(--flot-extra, 0px)); z-index: 45; /* --flot-extra: height of the open cookie banner (set by main.js), so the circle sits above it */
  display: grid; gap: .6rem;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(.75rem);
  transition: opacity .25s var(--ease), visibility .25s, transform .25s var(--ease);
}
.flotantes.is-pasada { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.flotantes a {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--carbon); color: var(--blanco); box-shadow: 0 8px 24px -8px rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.12);
  transition: background-color .2s;
}
.flotantes a:not(.flotantes__wa) { display: none; } /* phone circle: desktop only */
.flotantes a:hover { background: #000; }
.flotantes a.flotantes__wa { background: #1f8a4c; }
.flotantes a.flotantes__wa:hover { background: #17703d; }
@media (min-width: 768px) {
  .flotantes { right: 1.5rem; bottom: 1.5rem; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .flotantes a { width: 3.25rem; height: 3.25rem; }
  .flotantes a:not(.flotantes__wa) { display: grid; }
  .flotantes.is-oculto { opacity: 0; visibility: hidden; transform: translateY(.75rem); pointer-events: none; }
}

/* ---------- Cookie banner ---------- */
.cookies {
  position: fixed; z-index: 60; left: .75rem; right: .75rem; bottom: .75rem;
  background: var(--blanco); color: var(--tinta); border-radius: var(--radio-m);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.55); border: 1px solid var(--linea);
  padding: 1.25rem; max-height: calc(100vh - 1.5rem); overflow: auto;
}
.cookies[hidden] { display: none; }
.cookies .cookies__titulo { margin: 0 0 .5rem; }
.cookies__titulo strong { display: block; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 1.25rem; letter-spacing: .03em; line-height: 1.2; color: var(--tinta); }
.cookies p { font-size: var(--t-sm); color: var(--texto-2); }
.cookies__botones { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cookies__botones .btn { min-height: 2.75rem; padding-inline: 1rem; }
.cookies__botones .btn--config { grid-column: 1 / -1; }
.cookies__prefs { border-top: 1px solid var(--linea); margin: 1rem 0; padding-top: .75rem; }
.cookies__prefs[hidden] { display: none; }
.pref { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; font-size: var(--t-sm); align-items: flex-start; }
.pref small { display: block; color: var(--texto-2); font-size: var(--t-xs); }
.pref input { width: 1.25rem; height: 1.25rem; accent-color: var(--carbon); flex: none; margin-top: .15rem; }
@media (min-width: 768px) {
  .cookies { left: 1.5rem; right: auto; bottom: 1.5rem; width: 26rem; }
  .cookies__botones { grid-template-columns: 1fr 1fr 1fr; }
  .cookies__botones .btn--config { grid-column: auto; }
}

/* ---------- Thank-you page ---------- */
.gracias { min-height: 70vh; padding-block: var(--sec); }
.gracias__caja { max-width: 40rem; }
.gracias .h2 { margin-bottom: 1rem; }
.gracias ol { list-style: none; counter-reset: g; margin: 2rem 0; border-top: 1px solid var(--linea); }
.gracias ol li { counter-increment: g; display: grid; grid-template-columns: 2.5rem 1fr; padding: 1rem 0; border-bottom: 1px solid var(--linea); }
.gracias ol li::before { content: counter(g); font-family: var(--f-display); font-size: 1.75rem; line-height: 1; color: var(--laton-osc); font-weight: 300; }
.gracias__acciones { display: grid; gap: .75rem; margin-bottom: 2rem; }
@media (min-width: 640px) { .gracias__acciones { display: flex; flex-wrap: wrap; } }

/* ---------- Smooth <details> open (progressive: Chromium 131+; others open instantly) ---------- */
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  .preguntas details::details-content {
    block-size: 0; overflow: clip;
    transition: block-size .35s var(--ease), content-visibility .35s allow-discrete;
  }
  .preguntas details[open]::details-content { block-size: auto; }
}

/* ---------- Reveal (one quiet orchestration) ---------- */
/* Diagnosis and treatment routes; the form now lives in a native dialog. */
.hero__acciones { display: grid; gap: .75rem; margin-block: 1.75rem 0; max-width: 28rem; }
.hero__copia .tarjeta-doctor { margin: 1.5rem 0 0; padding: 1.25rem; border-radius: var(--radio-m); max-width: 40rem; }
.tarjeta-doctor .mini-doctor__cargo { display: block; }
.tarjeta-doctor .aval { display: grid; grid-template-columns: 1fr; margin-bottom: 0; }
.hero__acciones .hero__accion { justify-content: flex-start; gap: .85rem; min-height: 3.75rem; padding: 1rem 1.25rem; border-radius: .5rem; font-weight: 400; font-size: 1rem; letter-spacing: .01em; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.hero__accion--diagnostico { --b-bg: var(--hueso); --b-fg: var(--carbon); --b-bd: var(--hueso); }
.hero__accion--diagnostico:hover { --b-bg: #e6dccb; --b-bd: #e6dccb; }
.hero__accion--tratamiento { --b-bg: rgba(38,38,38,.55); --b-fg: var(--blanco); --b-bd: var(--laton); }
.hero__accion--tratamiento:hover { --b-bg: rgba(179,154,114,.18); --b-bd: #d1bd9d; }
.hero__accion--tratamiento > .icon:first-child { color: #d1bd9d; }
.hero__accion .icon { flex: none; }
.hero__accion-flecha { margin-left: auto; width: 1rem; transition: transform .2s var(--ease); }
.hero__accion:hover .hero__accion-flecha { transform: translateX(3px); }
.hero { padding-bottom: 2.5rem; }
.hero__oval { display: none; }
.hero__fondo { height: 100%; }
.hero__fondo picture { inset: 0 0 auto auto; width: 100%; max-width: 36rem; height: auto; aspect-ratio: 497 / 525; overflow: hidden; mask-image: linear-gradient(180deg, #000 65%, transparent); }
.hero__fondo img { inset: auto; left: -51.51%; top: -48.76%; width: 203.22%; max-width: none; height: 197.52%; object-fit: fill; transform: none; animation: none; filter: none; }
.hero--foto-exploracion .hero__fondo picture { aspect-ratio: 514 / 550; }
.hero--foto-exploracion .hero__fondo img { left: -49.81%; top: -46.55%; width: 199.61%; height: 193.09%; }
.hero--foto-original .hero__fondo picture { aspect-ratio: 401 / 499; }
.hero--foto-original .hero__fondo img { left: -63.84%; top: -51.30%; width: 227.93%; height: 202.40%; }
.hero--foto-final .hero__fondo { height: min(100%, 52rem); }
.hero--foto-final .hero__fondo picture { inset: 0; width: 100%; max-width: none; height: 100%; aspect-ratio: auto; transform: none; container-type: size; mask-image: linear-gradient(180deg, #000 40%, rgba(0,0,0,.8) 60%, rgba(0,0,0,.35) 82%, transparent 100%); }
/* Cover the photo area while excluding the source's 147px white top margin. */
.hero--foto-final .hero__fondo img { left: 50%; top: calc(-1 * max(15.84cqw, 14.63cqh)); width: max(100cqw, 92.34cqh); height: max(124.14cqw, 114.63cqh); transform: translateX(-50%); object-fit: fill; }
.hero--foto-final .hero__velo { background: linear-gradient(180deg, rgba(24,24,24,.4), rgba(24,24,24,.76) 18%, rgba(24,24,24,.82) 48%, rgba(24,24,24,.88) 72%, var(--carbon) 100%); }
.hero--foto-final .hero__l2, .hero--foto-final .hero__tag { color: #d8c39f; }
.hero--foto-final .hero__titulo, .hero--foto-final .hero__sub { text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.banda__foto { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(24,24,24,.94), rgba(24,24,24,.65)), url('../img/valoracion-facial.png') center / 214% auto no-repeat; }
.banda__in { position: relative; }
.observ-fotos { display: flex; gap: 0; overflow-x: auto; padding-bottom: .75rem; scroll-snap-type: x mandatory; scroll-padding-inline: 0; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; outline-offset: 2px; }
.observ-fotos::-webkit-scrollbar { display: none; }
.observ-fotos img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.observ-fotos:focus-visible { outline: 2px solid var(--laton-osc); }
.observ-fotos > .vdesp__foto { flex: 0 0 88%; min-width: 0; scroll-snap-align: start; }
.observ-fotos > .vdesp__foto > .observ-analisis { aspect-ratio: 673 / 550; }
.observ-analisis { position: relative; width: 100%; aspect-ratio: 673 / 550; overflow: hidden; background: #000; }
.observ-analisis img { position: absolute; max-width: none; width: 176.08%; height: 193.09%; left: -38.04%; top: -46.55%; }
.vdesp__foto .observ-paciente { width: 100%; height: auto; aspect-ratio: 673 / 550; object-fit: cover; object-position: center; }
@media (min-width: 640px) { .observ-fotos > .vdesp__foto { flex-basis: 70%; } }
.tratamiento-cta { margin-top: 1.5rem; max-width: 100%; white-space: normal; }
.doctor__texto > .btn, .cabeza-seccion > .tratamiento-cta { display: flex; width: fit-content; max-width: 100%; margin-inline: auto; }
.modal-abierto { overflow: hidden; }
.valoracion-modal { width: min(34rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 0; border-radius: var(--radio-m); color: var(--tinta); background: var(--hueso); overflow-y: auto; overscroll-behavior: contain; }
.valoracion-modal::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px); }
.valoracion-modal .tarjeta-form { position: relative; margin: 0; padding: 3.5rem 1.5rem 1.5rem; box-shadow: none; }
.valoracion-modal .tarjeta-form__intro, .valoracion-modal .campo__ayuda, .valoracion-modal .btn-wa small { display: block; }
.modal-cerrar { position: absolute; top: .5rem; right: .5rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; font-size: 1.75rem; line-height: 1; border: 1px solid var(--linea); border-radius: 50%; background: var(--blanco); color: var(--tinta); cursor: pointer; }
@media (min-width: 1024px) {
  .hero { min-height: 46rem; min-height: max(46rem, 100svh); padding-bottom: 3rem; }
  .js .hero { padding-top: calc(var(--h-cab) + 2rem); }
  .hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(22rem, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  .hero__copia { display: block; width: 100%; max-width: 40rem; margin-top: 0; align-self: center; }
  .hero__titulo { grid-column: 1; grid-row: 1; margin-bottom: 1rem; }
  .hero__l1 { font-size: clamp(3.5rem, 4.6vw, 5.2rem); }
  .hero__l2 { max-width: 36rem; font-size: clamp(2rem, 2.5vw, 2.5rem); line-height: 1.18; }
  .hero__sub { max-width: 34rem; font-size: 1.1875rem; line-height: 1.55; margin-bottom: .85rem; }
  .hero__acciones { grid-template-columns: 1fr 1fr; width: 100%; max-width: 34rem; margin-top: 1.5rem; padding: 0; background: none; border: 0; }
  .hero__acciones .hero__accion { padding-inline: .9rem; font-size: .9375rem; min-height: 3.75rem; }
  .valoracion-modal.is-inline { position: static; display: block; grid-column: 2; grid-row: 1; justify-self: end; align-self: center; width: 100%; max-width: 28rem; max-height: none; margin: 0; overflow: visible; background: var(--blanco); }
  .valoracion-modal.is-inline .tarjeta-form { padding: 1.5rem; }
  .valoracion-modal.is-inline .modal-cerrar { display: none; }
  .valoracion-modal.is-inline .form-doctor-desktop { display: block; }
  .valoracion-modal.is-inline .form-doctor-desktop .mini-doctor { padding-bottom: 1rem; }
  .valoracion-modal.is-inline .form-doctor-desktop .aval { display: grid; grid-template-columns: 1fr; margin-bottom: 1.25rem; }
  .valoracion-modal.is-inline .campo { margin-bottom: .75rem; }
  .valoracion-modal.is-inline .campo__ayuda { font-size: .75rem; }
  .valoracion-modal.is-inline .separador-o { margin-block: .75rem; }
  .hero__copia .tarjeta-doctor { display: none; }
  .tarjeta-doctor .mini-doctor { padding-bottom: .6rem; }
  .tarjeta-doctor .mini-doctor__foto { width: 3.75rem; }
  .tarjeta-doctor .aval { padding-block: .6rem 0; border-bottom: 0; }
  .hero__fondo picture { width: 48vw; max-width: 40rem; top: 50%; right: max(0px, calc((100vw - var(--max)) / 2 - 4rem)); transform: translateY(-50%); mask-image: linear-gradient(90deg, transparent, #000 28%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 85%, transparent); mask-composite: intersect; }
  .hero__velo { background: linear-gradient(90deg, rgba(24,24,24,.45), rgba(24,24,24,.2) 55%, rgba(24,24,24,.12)), linear-gradient(180deg, var(--carbon), transparent 16%, transparent 75%, var(--carbon)); }
  .hero--foto-final .hero__fondo { height: 100%; }
  .hero--foto-final .hero__fondo picture { mask-image: none; }
  .hero--foto-final .hero__fondo img { inset: 0; width: 100%; height: 100%; transform: none; object-fit: cover; object-position: 58% center; }
  .hero--foto-final .hero__velo { background: linear-gradient(90deg, rgba(24,24,24,.93) 0%, rgba(24,24,24,.85) 30%, rgba(24,24,24,.62) 50%, rgba(24,24,24,.28) 75%, rgba(24,24,24,.15) 100%), linear-gradient(180deg, rgba(24,24,24,.1), transparent 55%, rgba(24,24,24,.45)); }
  .banda__foto { background-size: auto, auto 214%; background-position: center, right center; }
}

.form-doctor-desktop { display: none; }
@media (min-width: 1024px) {
  .doctor.contenedor { max-width: calc(var(--max) + var(--gutter) * 2); }
  .doctor__texto > .btn { margin-inline: auto; }
  #como-funciona .cabeza-seccion { margin-inline: auto; text-align: center; }
  #como-funciona .entradilla { margin-inline: auto; }
  .observ-fotos { gap: 0; overflow: visible; padding-bottom: 0; cursor: grab; }
  .observ-fotos.is-arrastrando { cursor: grabbing; scroll-snap-type: none; }
  .observ-fotos > .vdesp__foto { flex-basis: 50%; }
    .hero__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .hero__copia { max-width: 52rem; text-align: center; }
  .hero__tag { justify-content: center; }
  .hero__l2, .hero__sub, .hero__acciones { margin-inline: auto; }
  .hero__sub { max-width: 40rem; }
  .hero--foto-final .hero__velo { background: linear-gradient(90deg, rgba(24,24,24,.45), rgba(24,24,24,.75) 35%, rgba(24,24,24,.75) 65%, rgba(24,24,24,.35)), linear-gradient(180deg, rgba(24,24,24,.2), transparent 65%, rgba(24,24,24,.6)); }
}
@media (max-width: 1023px) {
  .tarjeta-doctor .aval { display: none; }
  .tarjeta-doctor .mini-doctor { padding-bottom: 0; gap: 1.25rem; }
  .tarjeta-doctor .mini-doctor__rol { font-size: 1rem; }
  .tarjeta-doctor .mini-doctor__nombre { font-size: 1.25rem; line-height: 1.3; }
  .tarjeta-doctor .mini-doctor__cargo { font-size: .9375rem; line-height: 1.4; }
}
.js .revelar { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .revelar.is-in { opacity: 1; transform: none; }

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