/* vlam.es · previa 20 oct 2026 — línea de las referencias del usuario:
   foto a sangre, blanco + tinta espresso + topo, serif de la marca grande, servicios en fotos. */
:root {
  --white: #FFFFFF;
  --sand: #F4EFE9;        /* único fondo cálido, en bloques */
  --ink: #241B17;         /* tinta espresso */
  --ink-2: #5A4B42;       /* texto secundario, tintado de la tinta */
  --taupe: #8A7466;       /* acento: el moka de la marca, más gris */
  --taupe-dark: #6E5A4E;
  --line: rgba(36, 27, 23, .16);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --t-small: .9375rem;
  --t-body: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  --t-lead: clamp(1.25rem, 1.05rem + .7vw, 1.625rem);
  --t-h2: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem);
  --t-h1: clamp(3.25rem, 1.8rem + 5.2vw, 6rem);

  --m: clamp(20px, 4vw, 64px);
  --sec: clamp(96px, 11vw, 168px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--taupe) var(--sand); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font: 300 var(--t-body)/1.6 var(--sans); -webkit-font-smoothing: antialiased; caret-color: var(--taupe); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; line-height: 1.02; text-wrap: balance; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
::selection { background: var(--ink); color: var(--white); }
:focus-visible { outline: 2px solid var(--taupe); outline-offset: 3px; }
b { font-weight: 500; }
mark.fill { background: #F1E1BE; color: var(--ink); padding: 0 .25em; }
.skip { position: absolute; left: var(--m); top: -60px; z-index: 60; background: var(--ink); color: var(--white); padding: 10px 16px; }
.skip:focus { top: 10px; }

/* botones: rectángulos limpios, como en las referencias */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; font: 400 var(--t-small)/1 var(--sans); letter-spacing: .06em; text-decoration: none; border: 1px solid transparent; border-radius: 0; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.btn:active { transform: scale(.98); }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: var(--sand); }
.btn-ghost { border-color: rgba(255, 255, 255, .75); color: var(--white); }
.btn-ghost:hover { background: var(--white); color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--taupe-dark); }

/* línea superior y cabecera sobre la foto */
.topline { display: flex; justify-content: space-between; gap: 16px; padding: 9px var(--m); background: var(--ink); color: #E9DFD6; font-size: var(--t-small); }
.topline a { text-decoration: none; }
.head { position: absolute; z-index: 20; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 36px; padding: 22px var(--m); color: var(--white); transition: background-color .4s var(--ease), color .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease); }
.head.solid { position: fixed; top: 0; background: var(--white); color: var(--ink); padding-top: 14px; padding-bottom: 14px; box-shadow: 0 6px 24px rgba(36, 27, 23, .08); }
.head.solid .head-cta { background: var(--ink); color: var(--white); }
.logo { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; }
.logo-v { font: 500 30px/1 var(--serif); letter-spacing: .16em; }
.logo-d { font: 300 var(--t-small)/1 var(--sans); letter-spacing: .04em; opacity: .85; }
.nav { display: flex; gap: 30px; margin-left: auto; }
.nav a { font-size: var(--t-small); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .3s var(--ease); }
.nav a:hover { text-decoration-color: currentColor; }
.head-cta { min-height: 44px; padding: 0 22px; }

/* primera pantalla */
.hero { position: relative; min-height: 100svh; display: grid; align-content: end; color: var(--white); overflow: hidden; background: #3B2E27; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; animation: settle 2.4s var(--ease) both; }
@keyframes settle { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 14, 11, .72) 0%, rgba(20, 14, 11, .38) 48%, rgba(20, 14, 11, .05) 78%), linear-gradient(0deg, rgba(20, 14, 11, .55) 0%, transparent 38%); }
.hero-copy { position: relative; z-index: 1; padding: 0 var(--m); max-width: 760px; margin-bottom: clamp(48px, 7vw, 96px); }
.hero h1 { font-size: var(--t-h1); font-weight: 400; max-width: 11em; }
.hero-sub { margin-top: 24px; font-size: var(--t-lead); line-height: 1.45; max-width: 30em; color: #F3ECE6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-facts { position: relative; z-index: 1; list-style: none; padding: 8px var(--m) 28px; display: flex; gap: 0; font-size: var(--t-small); color: #EFE6DD; }
.hero-facts li { flex: 1; }
.hero-facts li + li { padding-left: 24px; }

/* presentación */
.intro { padding: var(--sec) var(--m) calc(var(--sec) * .7); text-align: center; display: grid; justify-items: center; gap: 22px; }
.intro h2 { font-size: var(--t-h2); }
.intro p { max-width: 38em; color: var(--ink-2); font-size: var(--t-lead); line-height: 1.5; }

/* método */
.metodo { display: grid; grid-template-columns: 1.05fr 1fr; grid-template-areas: "foto copy" "mapa mapa"; background: var(--sand); }
.metodo-photo { grid-area: foto; min-height: 640px; position: relative; overflow: hidden; }
.metodo-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.metodo-copy { grid-area: copy; padding: clamp(56px, 7vw, 112px) var(--m); display: grid; align-content: center; gap: 22px; max-width: 640px; }
.metodo h2 { font-size: var(--t-h2); }
.lema { font: 400 var(--t-lead)/1.3 var(--serif); color: var(--taupe-dark); }
.metodo-copy > p:not(.lema) { color: var(--ink-2); }
.pasos { list-style: none; padding: 0; display: grid; gap: 18px; margin: 8px 0 12px; counter-reset: p; }
.pasos li { display: grid; gap: 2px; padding-left: 52px; position: relative; color: var(--ink-2); }
.pasos h3 { font: 500 22px/1.2 var(--serif); color: var(--ink); letter-spacing: 0; }
.pasos li::before { counter-increment: p; content: counter(p); position: absolute; left: 0; top: -2px; font: 400 34px/1 var(--serif); color: var(--taupe); }
.pasos b { font: 500 22px/1.2 var(--serif); color: var(--ink); }
.metodo .btn { justify-self: start; }
.mapa { grid-area: mapa; display: grid; grid-template-columns: auto minmax(0, 440px); justify-content: center; align-items: center; gap: clamp(32px, 6vw, 96px); padding: clamp(24px, 4vw, 56px) var(--m) clamp(56px, 7vw, 104px); }
.mapa-fig { position: relative; width: min(340px, 70vw); aspect-ratio: 548 / 860; }
.mapa-fig img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.spot { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; width: 30%; aspect-ratio: 1; border-radius: 50%; border: 0; background: transparent; color: transparent; font-size: 0; cursor: pointer; transition: background-color .3s var(--ease); }
.spot::after { content: attr(data-label); position: absolute; left: calc(50% + 16px); top: 50%; translate: 0 -50%; font: 400 14px/1 var(--sans); letter-spacing: .03em; color: var(--white); background: var(--ink); padding: 7px 10px; white-space: nowrap; }
.spot[aria-pressed="true"]::after { background: var(--taupe-dark); }
.spot:hover, .spot[aria-pressed="true"] { background: rgba(138, 116, 102, .22); }
.spot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; translate: -50% -50%; border-radius: 50%; background: var(--taupe); box-shadow: 0 0 0 0 rgba(138, 116, 102, .45); animation: ping 2.6s var(--ease) infinite; }
.spot[aria-pressed="true"]::before { background: var(--ink); animation: none; }
@keyframes ping { 70% { box-shadow: 0 0 0 16px rgba(138, 116, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(138, 116, 102, 0); } }
.mapa-card { display: grid; gap: 12px; }
.mapa-card h3 { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); }
.mapa-card p { color: var(--ink-2); }
.mapa-card .zona { font: 400 var(--t-small)/1.4 var(--sans); color: var(--taupe-dark); letter-spacing: .02em; }
.mapa-card a { justify-self: start; margin-top: 8px; }

/* tratamientos */
.trat { padding: var(--sec) var(--m); }
.trat-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 48px; }
.trat-head h2 { font-size: var(--t-h2); }
.trat-head p { max-width: 26em; color: var(--ink-2); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 28px; }
.area { display: grid; align-content: start; gap: 10px; }
.area img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 12px; transition: transform .8s var(--ease), filter .8s var(--ease); }
.area:hover img { transform: scale(1.02); filter: saturate(1.08); }
.area h3 { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); }
.area > p { color: var(--ink-2); }
.area details { margin-top: 4px; }
.area summary { cursor: pointer; list-style: none; font-size: var(--t-small); font-weight: 400; letter-spacing: .04em; text-decoration: underline; text-underline-offset: .3em; color: var(--taupe-dark); }
.area summary::-webkit-details-marker { display: none; }
.area summary::after { content: " +"; }
.area details[open] summary::after { content: " –"; }
.area ul { list-style: none; padding: 12px 0 0; display: grid; gap: 4px; color: var(--ink); }
.area .sub { margin-top: 14px; }
.area .sub h4 { margin: 0; font: 400 var(--t-small)/1.4 var(--sans); letter-spacing: .02em; color: var(--taupe-dark); }
.area .sub ul { padding-top: 6px; }
.area .sub a { color: var(--ink); }

/* en casa */
.casa { position: relative; min-height: 78svh; display: grid; align-items: center; color: var(--white); overflow: hidden; background: #2E2420; }
.casa-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 62%; }
.casa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(20, 14, 11, .74) 0%, rgba(20, 14, 11, .2) 60%, transparent 100%); }
.casa-copy { position: relative; z-index: 1; justify-self: end; max-width: 520px; padding: 64px var(--m); display: grid; gap: 18px; }
.casa h2 { font-size: var(--t-h2); }
.casa p { font-size: var(--t-lead); line-height: 1.5; color: #F1E9E2; }
.casa { display: block; }
.opening__stage { position: relative; min-height: 78svh; display: grid; align-items: center; }

/* confianza */
.equipo { padding: var(--sec) var(--m); display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.equipo h2 { font-size: var(--t-h2); margin-bottom: 20px; }
.equipo-copy > p { color: var(--ink-2); max-width: 30em; }
.datos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 28px 48px; margin-top: 40px; }
.datos li { display: block; font-size: var(--t-small); color: var(--ink-2); }
.datos li br, .pasos li br { display: none; }
.datos b, .datos strong { display: block; margin-bottom: 4px; font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.125rem)/1.15 var(--serif); color: var(--ink); }
.datos span { display: block; }
.retratos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.retrato-hueco { aspect-ratio: 4 / 5; background: var(--sand); }
.retrato figcaption { margin-top: 12px; font-size: var(--t-small); color: var(--ink-2); display: grid; }
.retrato b { font: 500 22px/1.3 var(--serif); color: var(--ink); }

/* cita */
.cita { background: var(--sand); padding: var(--sec) var(--m); display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: clamp(40px, 7vw, 120px); }
.cita h2 { font-size: var(--t-h2); margin-bottom: 18px; }
.cita-copy > p { color: var(--ink-2); max-width: 26em; }
.contacto { list-style: none; padding: 0; margin-top: 40px; display: grid; gap: 18px; font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.125rem)/1.2 var(--serif); }
.contacto a { text-decoration: none; }
.contacto a:hover { color: var(--taupe-dark); }
.form { display: grid; gap: 18px; background: var(--white); padding: clamp(28px, 4vw, 48px); }
.form label { display: grid; gap: 6px; font-size: var(--t-small); color: var(--ink-2); }
.form input, .form select { font: inherit; font-size: 16px; color: var(--ink); padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0; transition: border-color .3s var(--ease); }
.form input:focus, .form select:focus { outline: none; border-bottom-color: var(--ink); }
.form .check { display: flex; gap: 10px; align-items: flex-start; }
.form .check input { margin-top: 5px; accent-color: var(--ink); }
.form .btn { justify-self: start; margin-top: 8px; }

/* pie */
.foot { background: var(--ink); color: #E9DFD6; padding: 72px var(--m) 32px; display: grid; gap: 64px; }
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.foot nav { display: flex; gap: 28px; flex-wrap: wrap; font-size: var(--t-small); }
.foot nav a { text-decoration: none; }
.foot nav a:hover { text-decoration: underline; }
.legal { font-size: 13px; color: #B9AA9E; max-width: 70em; }

.float-call { display: none; }
.float-call.oculto { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* =====================================================================
   MOVIMIENTO (24 oct 2026)
   Todo el contenido está en el HTML y se ve sin JavaScript; los estados
   ocultos solo existen con html.js y prefers-reduced-motion: no-preference.
   Clases que usa también el tema de WordPress:
   .reveal (una pieza) · .stagger (sus hijos, uno tras otro) · .lines-up (títulos por líneas)
   .ink-fill (frase que se entinta) · .shutter (foto que se abre) · .roll (cifra que rueda)
   .opening (foto que pasa de ventana a pantalla completa) · .marquee (franja del lema)
   ===================================================================== */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --t-press: 140ms; --t-hover: 180ms; --t-ui: 240ms; --t-reveal: 800ms; --t-open: 1200ms;
  --stagger-line: 90ms; --stagger-item: 70ms;
  interpolate-size: allow-keywords;
}
.btn { transition: background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.btn:active { transform: scale(.97); }

/* titular de la portada: dos líneas que suben desde su línea base */
.hero h1 .ln { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.hero h1 .ln > span { display: block; }
.lines-up .line { display: block; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }
.lines-up .line > span { display: block; }
.shutter { overflow: clip; }
.roll__digits { display: inline-flex; font-variant-numeric: tabular-nums; line-height: 1; }
.roll__col { display: inline-block; height: 1em; overflow: clip; }
.roll__strip { display: flex; flex-direction: column; transform: translateY(calc(var(--d) * -1em)); }
.roll__strip > span { height: 1em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* franja del lema: una línea grande que viaja despacio; se para al pasar el ratón y fuera de pantalla */
.marquee { overflow: clip; background: var(--sand); padding: clamp(28px, 4vw, 52px) 0; }
.marquee__track { display: flex; width: max-content; }
.marquee__run { display: flex; flex: none; gap: .6em; padding-right: .6em; font: 400 clamp(2.75rem, 1.6rem + 4.6vw, 6.25rem)/1 var(--serif); letter-spacing: -.015em; color: var(--ink); white-space: nowrap; }
.marquee__run span:nth-child(even) { color: var(--taupe); }

/* desplegables de tratamientos: se abren a su altura real */
.area details::details-content { height: 0; overflow: clip; visibility: hidden; transition: height 360ms var(--ease-out), content-visibility 360ms allow-discrete, visibility 360ms allow-discrete; }
.area details[open]::details-content { height: auto; visibility: visible; }

@media (hover: hover) and (pointer: fine) {
  .nav a, .foot nav a, .contacto a { transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
  .area summary { transition: color var(--t-hover) ease; }
  .area summary:hover { color: var(--ink); }
}

@media (prefers-reduced-motion: no-preference) {
  /* carga: titular, frase y botones listos en 1,2 s; la foto ya se asienta con «settle» */
  .js .hero h1 .ln > span { transform: translateY(105%); animation: vl-line 900ms var(--ease-expo) forwards; animation-delay: calc(120ms + var(--i) * var(--stagger-line)); }
  .js .hero .hero-sub, .js .hero .hero-actions, .js .hero .hero-facts { opacity: 0; transform: translateY(14px); animation: vl-rise 600ms var(--ease-out) forwards; }
  .js .hero .hero-sub { animation-delay: 380ms; }
  .js .hero .hero-actions { animation-delay: 480ms; }
  .js .hero .hero-facts { animation-delay: 620ms; }
  /* en WordPress el titular es texto normal (sin líneas marcadas): sube entero */
  .js .hero h1:not(:has(.ln)) { opacity: 0; transform: translateY(28px); animation: vl-rise 900ms var(--ease-expo) 120ms forwards; }

  /* entradas por sección: cada pieza sube a su turno, una sola vez */
  .js .will-reveal .reveal, .js .will-reveal .stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-expo); transition-delay: calc(var(--i, 0) * var(--stagger-item)); }
  .js .will-reveal.is-in .reveal, .js .will-reveal.is-in .stagger > * { opacity: 1; transform: none; }

  /* títulos que suben línea a línea */
  .js .lines-up.is-split .line > span { transform: translateY(110%); }
  .js .lines-up.is-split.is-in .line > span { transform: none; transition: transform 900ms var(--ease-expo) calc(var(--i) * var(--stagger-line)); }

  /* fotos que se abren como una persiana */
  .js .will-reveal .shutter { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out) calc(var(--i, 0) * 90ms); }
  .js .will-reveal .shutter img { transform: scale(1.12); transition: transform 1500ms var(--ease-soft) calc(var(--i, 0) * 90ms); }
  .js .will-reveal.is-in .shutter { clip-path: inset(0); }
  .js .will-reveal.is-in .shutter img { transform: none; }

  /* cifras que ruedan */
  .roll:not(.is-in) .roll__strip { transform: none; }
  .roll.is-in .roll__strip { transition: transform 1100ms var(--ease-expo) calc(var(--i) * var(--stagger-item)); }

  /* mapa del método: los puntos aparecen uno a uno; la ficha cambia con un fundido corto */
  .js .will-reveal .spot { opacity: 0; scale: .6; transition: opacity 500ms var(--ease-out), scale 700ms var(--ease-expo); transition-delay: calc(400ms + var(--i, 0) * 160ms); }
  .js .will-reveal.is-in .spot { opacity: 1; scale: 1; }
  .mapa-card.cambia > * { animation: vl-rise 420ms var(--ease-out) both; }
  .mapa-card.cambia > :nth-child(2) { animation-delay: 60ms; }
  .mapa-card.cambia > :nth-child(3) { animation-delay: 120ms; }
  .mapa-card.cambia > :nth-child(4) { animation-delay: 180ms; }

  /* fotos de tratamientos: respuesta suave bajo el ratón */
  .area img { transition: transform 900ms var(--ease-soft), filter 600ms ease; }

  .marquee__track { animation: vl-marquee 38s linear infinite; }
  .marquee:hover .marquee__track, .marquee.is-paused .marquee__track { animation-play-state: paused; }

  @supports (animation-timeline: view()) {
    /* la portada se aleja al bajar: la foto se hunde y oscurece, el texto sube un poco */
    .hero { view-timeline-name: --hero; }
    .hero-img { animation: settle 2.4s var(--ease) both, vl-sink linear both; animation-timeline: auto, --hero; animation-range: normal, exit 0% exit 100%; }
    .hero-copy { animation: vl-lift linear both; animation-timeline: --hero; animation-range: exit 0% exit 70%; }

    /* la frase de presentación se entinta palabra a palabra al subir */
    .ink-fill.is-filling > span { display: inline-block; color: color-mix(in oklab, var(--ink-2) 45%, transparent); animation: vl-ink linear both; animation-timeline: view(); animation-range: cover 18% cover 42%; }

    /* momento estrella: «Y sigues en casa» pasa de ventana a pantalla completa */
    .opening { height: 190svh; min-height: 0; display: block; overflow: visible; background: var(--ink); view-timeline-name: --opening; }
    .opening .opening__stage { position: sticky; top: 0; height: 100svh; overflow: clip; display: grid; align-items: center; }
    .opening .casa-img { animation: vl-window linear both, vl-settle linear both; animation-timeline: --opening, --opening; animation-range: contain 0% contain 70%, contain 0% contain 70%; }
    .opening .casa-copy { animation: vl-copy linear both; animation-timeline: --opening; animation-range: contain 48% contain 72%; }
    .opening::after { display: none; }
    .opening .opening__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(270deg, rgba(20, 14, 11, .74) 0%, rgba(20, 14, 11, .2) 60%, transparent 100%); animation: vl-scrim linear both; animation-timeline: --opening; animation-range: contain 12% contain 46%; }

    /* foto del método: deriva muy lenta dentro de su marco */
    .metodo-photo img { animation: vl-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; scale: 1.08; }
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .area:hover img { transform: scale(1.03); filter: saturate(1.08); }
}
@keyframes vl-line { to { transform: none; } }
@keyframes vl-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes vl-sink { to { transform: translateY(8%) scale(1.06); filter: brightness(.7); } }
@keyframes vl-lift { to { transform: translateY(-6%); opacity: 0; } }
@keyframes vl-ink { to { color: var(--ink-2); } }
@keyframes vl-window { from { clip-path: inset(22% 30% 22% 30%); } to { clip-path: inset(0); } }
@keyframes vl-settle { from { transform: scale(1.16); } to { transform: none; } }
@keyframes vl-copy { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes vl-scrim { from { opacity: 0; } to { opacity: 1; } }
@keyframes vl-drift { from { translate: 0 -3%; } to { translate: 0 3%; } }
@keyframes vl-marquee { to { transform: translateX(-50%); } }
@media (max-width: 700px) { @keyframes vl-window { from { clip-path: inset(18% 8% 18% 8%); } to { clip-path: inset(0); } } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-img, .spot::before { animation: none; }
  .area details::details-content { transition: none; }
}

/* tablet */
@media (max-width: 1080px) {
  .nav { display: none; }
  .head-cta { margin-left: auto; }
  .metodo { grid-template-columns: 1fr; grid-template-areas: "foto" "copy" "mapa"; }
  .metodo-photo { min-height: 56svh; }
  .metodo-copy { max-width: none; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .equipo, .cita { grid-template-columns: 1fr; }
}

/* móvil */
@media (max-width: 640px) {
  .topline p { display: none; }
  .topline { justify-content: flex-end; }
  .logo-d { display: none; }
  .hero { min-height: 92svh; }
  .hero-img { object-position: 70% 40%; }
  .hero::after { background: linear-gradient(0deg, rgba(20, 14, 11, .82) 0%, rgba(20, 14, 11, .45) 55%, rgba(20, 14, 11, .15) 100%); }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-facts { flex-direction: column; gap: 6px; }
  .hero-facts li + li { padding-left: 0; }
  .intro { text-align: left; justify-items: start; }
  .mapa { grid-template-columns: 1fr; justify-items: center; }
  .trat-head { flex-direction: column; align-items: start; }
  .grid { grid-template-columns: 1fr; gap: 48px; }
  .casa-copy { justify-self: stretch; }
  .casa::after { background: linear-gradient(0deg, rgba(20, 14, 11, .8) 0%, rgba(20, 14, 11, .3) 70%); }
  .casa .opening__stage { align-items: end; }
  .datos { grid-template-columns: 1fr 1fr; }
  .retratos { gap: 14px; }
  .float-call { display: flex; transition: opacity var(--t-ui) ease, transform var(--t-ui) var(--ease-out); position: fixed; z-index: 30; right: 16px; bottom: 16px; min-height: 52px; padding: 0 24px; align-items: center; background: var(--ink); color: var(--white); text-decoration: none; font-size: var(--t-small); letter-spacing: .06em; }
}

/* ---------- páginas interiores (legales, gracias, 404) ---------- */
[hidden] { display: none !important; }
.page-head { position: sticky; top: 0; background: var(--white); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.doc { padding: clamp(56px, 8vw, 120px) var(--m) var(--sec); min-height: 60svh; }
.doc-in { max-width: 46rem; margin: 0 auto; display: grid; gap: 16px; }
.doc h1 { font-size: var(--t-h2); margin-bottom: 12px; }
.doc h2 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); margin-top: 28px; }
.doc p, .doc li { color: var(--ink-2); }
.doc .lead { font-size: var(--t-lead); line-height: 1.5; }
.doc .note { background: var(--sand); padding: 14px 18px; font-size: var(--t-small); color: var(--ink); }
.doc .btn { justify-self: start; margin-top: 12px; }
.doc table { border-collapse: collapse; width: 100%; font-size: var(--t-small); }
.doc th, .doc td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }

/* ---------- equipo: sale solo cuando hay datos en datos.js ---------- */
.equipo.sin-retratos { grid-template-columns: 1fr; }
.sin-retratos .equipo-copy { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 96px); align-items: center; }
.sin-retratos .equipo-copy h2, .sin-retratos .equipo-copy > p { grid-column: 1; }
.sin-retratos .datos { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; grid-template-columns: 1fr; gap: 24px; }
@media (max-width: 640px) { .sin-retratos .equipo-copy { grid-template-columns: 1fr; } .sin-retratos .datos { grid-column: 1; grid-row: auto; margin-top: 32px; } }
.retrato img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }