/* =============================================================================
   Clinica Podologica Valdenoja - capa de refinamiento visual
   -----------------------------------------------------------------------------
   Se carga DESPUES del bundle. No modifica el marcado ni el contenido: todo son
   selectores sobre las clases que ya existen. Objetivo: profundidad por capas,
   transiciones entre secciones, coreografia de entrada y relieve en el hover.

   Casi todo el movimiento ligado al scroll usa animaciones nativas con
   animation-timeline, asi que corre en el compositor, no secuestra el scroll y
   no necesita JavaScript. Los navegadores sin soporte se quedan con la web tal
   y como estaba: el contenido nunca depende de una animacion para ser legible.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Tokens propios
   --------------------------------------------------------------------------- */
:root:root:root {
  --vd-ease: cubic-bezier(.22, 1, .36, 1);
  --vd-ease-soft: cubic-bezier(.33, .8, .35, 1);

  /* Sombras del apilado de secciones: luz cenital, siempre desde arriba. */
  --vd-lift-1: 0 -18px 38px -26px rgb(20 44 59 / .22);
  --vd-lift-2: 0 -26px 55px -30px rgb(20 44 59 / .28);
  --vd-lift-3: 0 -34px 70px -34px rgb(20 44 59 / .34);

  /* Filo superior de cada hoja: lo que la lee como capa y no como corte. */
  --vd-edge-light: inset 0 1px 0 rgb(255 255 255 / .72);
  --vd-edge-dark: inset 0 1px 0 rgb(216 194 161 / .26);

  --vd-card-shadow: 0 18px 40px -24px rgb(20 44 59 / .45);
  --vd-card-shadow-hover: 0 34px 62px -28px rgb(20 44 59 / .55);
}

/* ---------------------------------------------------------------------------
   2. Por que :root:root:root
   El CSS del sitio esta minificado dentro del bundle y no se puede editar. Sus
   entradas antiguas se apoyan en la clase .revealed que anade el JavaScript, y
   llegan a encadenar cuatro clases y un elemento
   (.interior-depth [data-sequence].revealed :is(.lead, .credential, li)).
   No estan en una capa @layer, asi que cargar despues no basta: hay que igualar
   o superar esa especificidad.

   Repetir :root es la forma mas barata de subir el peso sin ensuciar cada
   selector ni recurrir a !important, que si bloquearia futuros ajustes. Al
   aplicarse a toda la hoja por igual, la cascada interna de este archivo se
   mantiene intacta: las reglas de movil siguen ganando a las de base.
   Las pocas declaraciones !important del bundle siguen mandando; estan
   localizadas y se respetan.

   Los contenedores que solo servian para empujar el bloque entero si se
   desactivan: ahora entra cada pieza por separado y sumar los dos gestos
   descuadraba la secuencia. Sus hijos se animan mas abajo.
   --------------------------------------------------------------------------- */
:root:root:root .motion-reveal.revealed { animation-name: none; }

/* ---------------------------------------------------------------------------
   3. La escalera de capas
   Cada seccion es una hoja que cubre a la anterior: radio superior, margen
   negativo, sombra hacia arriba y filo de luz. El orden de pintado crece para
   que la de abajo siempre tape a la de encima.
   --------------------------------------------------------------------------- */
:root:root:root .home-depth .hero-stage { z-index: 1; }
:root:root:root .home-depth .intro-strip { z-index: 2; }

:root:root:root .home-depth .services-section {
  z-index: 3;
  margin-top: -46px;
  border-radius: 72px 72px 0 0;
  box-shadow: var(--vd-lift-2), var(--vd-edge-light);
}

:root:root:root .home-depth .about-composition {
  z-index: 4;
  margin-top: -56px;
  border-radius: 52px 52px 0 0;
  box-shadow: var(--vd-lift-2), var(--vd-edge-light);
}

/* La seccion de resenas no entraba en el apilado: era un bloque plano pegado
   al anterior. Ahora es una hoja mas, con su propio tono. */
:root:root:root .home-depth .reviews-section {
  z-index: 5;
  position: relative;
  margin-top: -48px;
  padding-top: calc(var(--space-section) + 22px);
  border-top: 0;
  border-radius: 48px 48px 0 0;
  background: linear-gradient(168deg, #f3f0e9, #efeae1 62%, #eae4d8);
  box-shadow: var(--vd-lift-2), var(--vd-edge-light);
}

/* La hoja oscura deslizandose sobre la clara es la transicion mas marcada de
   la pagina; se le dan el margen y la sombra mas generosos. */
:root:root:root .home-depth .prevention {
  z-index: 6;
  margin-top: -52px;
  border-radius: 60px 60px 0 0;
  box-shadow: var(--vd-lift-3), var(--vd-edge-dark);
}

:root:root:root .home-depth .clinic-composition {
  z-index: 7;
  margin-top: -52px;
  border-radius: 52px 52px 0 0;
  box-shadow: var(--vd-lift-3), var(--vd-edge-light);
}

:root:root:root .home-depth > .contact-band {
  z-index: 8;
  margin-top: -40px;
  border-radius: 44px 44px 0 0;
  box-shadow: var(--vd-lift-3), var(--vd-edge-dark);
}

/* Interiores: mismo criterio, escala algo menor porque son paginas mas cortas. */
:root:root:root .interior-depth .services-catalog,
:root:root:root .interior-depth .booking-section {
  margin-top: -40px;
  border-radius: 48px 48px 0 0;
  box-shadow: var(--vd-lift-2), var(--vd-edge-light);
}

:root:root:root .interior-depth :is(.domicilio, .contact-location) {
  position: relative;
  z-index: 2;
  margin-top: -36px;
  border-radius: 56px 56px 0 0;
  box-shadow: var(--vd-lift-2), var(--vd-edge-light);
}

:root:root:root .interior-depth > .contact-band {
  position: relative;
  z-index: 3;
  margin-top: -36px;
  border-radius: 48px 48px 0 0;
  box-shadow: var(--vd-lift-3), var(--vd-edge-dark);
}

/* El pie queda en calma a proposito: cierra sin mas efectos. */
:root:root:root .footer { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   4. Luz de fondo que evoluciona
   Un lavado radial muy tenue por seccion. Da volumen a las superficies planas
   sin ensuciar el color de marca.
   --------------------------------------------------------------------------- */
:root:root:root .home-depth .services-section,
:root:root:root .home-depth .reviews-section,
:root:root:root .home-depth .prevention,
:root:root:root .interior-depth .services-catalog,
:root:root:root .interior-depth .domicilio {
  overflow: clip;
}

:root:root:root .home-depth .services-section::before,
:root:root:root .home-depth .reviews-section::before,
:root:root:root .interior-depth .services-catalog::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -18%;
  right: -14%;
  width: min(78vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(216 194 161 / .30), rgb(216 194 161 / 0) 68%);
  pointer-events: none;
}

:root:root:root .home-depth .reviews-section::before {
  top: auto;
  bottom: -26%;
  right: auto;
  left: -16%;
  background: radial-gradient(circle, rgb(216 194 161 / .26), rgb(216 194 161 / 0) 70%);
}

:root:root:root .home-depth .prevention::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -30%;
  right: -10%;
  width: min(70vw, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(216 194 161 / .17), rgb(216 194 161 / 0) 68%);
  pointer-events: none;
}

/* El contenido siempre por encima del lavado. */
:root:root:root .home-depth .services-section > .wrap,
:root:root:root .home-depth .reviews-section > .wrap,
:root:root:root .home-depth .prevention > .wrap,
:root:root:root .interior-depth .services-catalog > * {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------------
   5. Coreografia de entrada
   Cada papel tiene su gesto y su momento: el antetitulo entra primero desde la
   izquierda, el titular sube tras una mascara, el cuerpo de texto llega despues
   y las acciones cierran. No es el mismo fade para todo.
   --------------------------------------------------------------------------- */
/* El antetitulo se descubre de izquierda a derecha con una mascara, no
   desplazandose. Un translate horizontal se salia del contenedor y el texto
   aparecia cortado contra el borde de la seccion (en Servicios ademas lo
   recortaba el overflow del bloque). La mascara da el mismo gesto lateral sin
   salirse nunca de la caja. */
@keyframes vd-eyebrow-in {
  from { opacity: 0; clip-path: inset(-60% 100% -60% -8%); }
  to   { opacity: 1; clip-path: inset(-60% -8% -60% -8%); }
}

@keyframes vd-title-in {
  from { opacity: 0; translate: 0 30px; clip-path: inset(-14% -10% 102% -10%); }
  to   { opacity: 1; translate: 0 0;    clip-path: inset(-14% -10% -28% -10%); }
}

@keyframes vd-copy-in {
  from { opacity: 0; translate: 0 22px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes vd-action-in {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes vd-card-in {
  from { opacity: 0; translate: 0 48px; clip-path: inset(16% 0 0 0); }
  to   { opacity: 1; translate: 0 0;    clip-path: inset(0 0 0 0); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    :root:root:root .home-depth .section-heading .eyebrow,
    :root:root:root .home-depth .introduction > .eyebrow,
    :root:root:root .home-depth .reviews-section .eyebrow,
    :root:root:root .home-depth .prevention .eyebrow,
    :root:root:root .home-depth .clinic-heading .eyebrow,
    :root:root:root .home-depth .contact-band .eyebrow,
    :root:root:root .home-depth .about-copy > .eyebrow,
    :root:root:root .interior-depth [data-sequence] .eyebrow,
    :root:root:root .interior-depth .services-catalog .eyebrow,
    :root:root:root .interior-depth .domicilio .eyebrow,
    :root:root:root .interior-depth .clinic-detail .eyebrow,
    :root:root:root .interior-depth .contact-band .eyebrow {
      animation-name: vd-eyebrow-in;
      animation-duration: auto;
      animation-timing-function: var(--vd-ease);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 4% entry 92%;
    }

    :root:root:root .home-depth .introduction h2,
    :root:root:root .home-depth .section-heading h2,
    :root:root:root .home-depth .reviews-heading h2,
    :root:root:root .home-depth .prevention h2,
    :root:root:root .home-depth .clinic-heading h2,
    :root:root:root .home-depth .about-copy h2,
    :root:root:root .home-depth .contact-band h2,
    :root:root:root .interior-depth .services-catalog-heading h2,
    :root:root:root .interior-depth .domicilio h2,
    :root:root:root .interior-depth .clinic-detail h2,
    :root:root:root .interior-depth .contact-information h2,
    :root:root:root .interior-depth .bio-story h2,
    :root:root:root .interior-depth .contact-band h2 {
      animation-name: vd-title-in;
      animation-duration: auto;
      animation-timing-function: var(--vd-ease);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 8% cover 14%;
    }

    :root:root:root .home-depth .introduction .intro-bottom > p,
    :root:root:root .home-depth .section-heading > p,
    :root:root:root .home-depth .reviews-intro > p,
    :root:root:root .home-depth .about-copy > p:not(.eyebrow),
    :root:root:root .home-depth .clinic-heading > p:not(.eyebrow),
    :root:root:root .home-depth .prevention-copy > div,
    :root:root:root .home-depth .contact-band-action > p,
    :root:root:root .interior-depth .services-catalog-heading > p,
    :root:root:root .interior-depth .domicilio-grid > div > p:not(.eyebrow),
    :root:root:root .interior-depth .clinic-detail > div > p:not(.eyebrow),
    :root:root:root .interior-depth .bio-story > p:not(.eyebrow) {
      animation-name: vd-copy-in;
      animation-duration: auto;
      animation-timing-function: var(--vd-ease);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 10% cover 20%;
    }

    :root:root:root .home-depth .introduction .intro-bottom > a,
    :root:root:root .home-depth .reviews-intro .text-link,
    :root:root:root .home-depth .prevention .text-link,
    :root:root:root .home-depth .clinic-heading .text-link,
    :root:root:root .home-depth .home-service-note,
    :root:root:root .home-depth .credential,
    :root:root:root .interior-depth .credential,
    :root:root:root .interior-depth .domicilio .button {
      animation-name: vd-action-in;
      animation-duration: auto;
      animation-timing-function: var(--vd-ease);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 14% cover 26%;
    }

    /* Escalonado de la tira de tres columnas bajo el hero. */
    :root:root:root .home-depth .intro-strip > * {
      animation-name: vd-copy-in;
      animation-duration: auto;
      animation-timing-function: var(--vd-ease);
      animation-fill-mode: both;
      animation-timeline: view();
    }
    :root:root:root .home-depth .intro-strip > :nth-child(1) { animation-range: entry 2% entry 76%; }
    :root:root:root .home-depth .intro-strip > :nth-child(2) { animation-range: entry 10% entry 90%; }
    :root:root:root .home-depth .intro-strip > :nth-child(3) { animation-range: entry 18% cover 4%; }

    /* Bloques numerados de prevencion: entran de uno en uno. */
    :root:root:root .home-depth .prevention-copy > div:nth-child(2) {
      animation-range: entry 16% cover 30%;
    }

    /* Listas de alcance en las paginas de tratamiento. */
    :root:root:root .interior-depth .treatment-scope li {
      animation-name: vd-copy-in;
      animation-duration: auto;
      animation-timing-function: var(--vd-ease);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 4% entry 92%;
    }
    :root:root:root .interior-depth .treatment-scope li:nth-child(2) { animation-range: entry 10% cover 4%; }
    :root:root:root .interior-depth .treatment-scope li:nth-child(3) { animation-range: entry 16% cover 10%; }
    :root:root:root .interior-depth .treatment-scope li:nth-child(n+4) { animation-range: entry 22% cover 16%; }
  }
}

/* ---------------------------------------------------------------------------
   6. Hero
   Es lo primero que se ve, asi que la entrada va por tiempo (no por scroll) y
   el relieve lo dan tres planos que se mueven a velocidades distintas: marmol
   de fondo, anillo intermedio y fotografia en primer plano.
   --------------------------------------------------------------------------- */
:root:root:root .home-depth .hero-stage::after {
  inset: -16% 0;
}

/* Halo calido detras de la fotografia: separa la foto del fondo de marmol. */
:root:root:root .home-depth .hero-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12% -14% -6% -8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(216 194 161 / .38), rgb(216 194 161 / 0) 78%);
  pointer-events: none;
}

:root:root:root .home-depth .hero-photo {
  border-radius: 132px 10px 10px 10px;
  box-shadow: 0 34px 70px -34px rgb(20 44 59 / .48), 0 4px 14px -8px rgb(20 44 59 / .22);
}

/* El filete interior pasa a champan: cose la foto con la paleta de marca. */
:root:root:root .home-depth .hero-photo::after {
  border-color: rgb(255 255 255 / .42);
  border-radius: 118px 4px 4px 4px;
  inset: 18px;
}

:root:root:root .home-depth .photo-caption {
  border-radius: 4px;
  box-shadow: 0 16px 34px -20px rgb(20 44 59 / .35);
}

@keyframes vd-hero-eyebrow {
  from { opacity: 0; clip-path: inset(-60% 100% -60% -8%); }
  to   { opacity: 1; clip-path: inset(-60% -8% -60% -8%); }
}

@keyframes vd-hero-title {
  from { opacity: 0; translate: 0 38px; clip-path: inset(-10% -8% 104% -8%); }
  to   { opacity: 1; translate: 0 0;    clip-path: inset(-10% -8% -26% -8%); }
}

@keyframes vd-hero-copy {
  from { opacity: 0; translate: 0 24px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes vd-hero-photo {
  from { opacity: 0; clip-path: inset(0 0 0 0 round 132px 10px 10px 10px); translate: 0 26px; }
  to   { opacity: 1; clip-path: inset(0 0 0 0 round 132px 10px 10px 10px); translate: 0 0; }
}

@keyframes vd-photo-settle {
  from { scale: 1.2; }
  to   { scale: 1.06; }
}

@media (prefers-reduced-motion: no-preference) {
  :root:root:root .hero-enter {
    animation-name: vd-hero-copy;
    animation-duration: .95s;
    animation-timing-function: var(--vd-ease);
    animation-fill-mode: both;
  }

  :root:root:root .hero .eyebrow.hero-enter {
    animation-name: vd-hero-eyebrow;
    animation-duration: .8s;
    animation-delay: .05s;
  }

  :root:root:root .hero h1.hero-enter {
    animation-name: vd-hero-title;
    animation-duration: 1.15s;
    animation-delay: .12s;
  }

  /* El "tus pies." en cursiva llega un paso despues: el titular se lee en dos
     tiempos en lugar de aparecer de golpe. */
  :root:root:root .hero h1 em {
    display: inline-block;
    animation-name: vd-hero-copy;
    animation-duration: 1s;
    animation-delay: .38s;
    animation-timing-function: var(--vd-ease);
    animation-fill-mode: both;
  }

  :root:root:root .hero .hero-description.hero-enter { animation-delay: .3s; }
  :root:root:root .hero .actions.hero-enter { animation-delay: .42s; }

  :root:root:root .home-depth .hero-professional {
    animation-name: vd-hero-copy;
    animation-duration: .9s;
    animation-delay: .54s;
    animation-timing-function: var(--vd-ease);
    animation-fill-mode: both;
  }

  :root:root:root .home-depth .hero-visual {
    animation-name: vd-hero-photo;
    animation-duration: 1.25s;
    animation-delay: .16s;
    animation-timing-function: var(--vd-ease);
    animation-fill-mode: both;
  }

  :root:root:root .home-depth .hero-photo img {
    animation-name: vd-photo-settle;
    animation-duration: 1.8s;
    animation-timing-function: var(--vd-ease);
    animation-fill-mode: both;
  }
}

/* ---------------------------------------------------------------------------
   7. Parallax ligado al scroll
   Tres velocidades: fondo lento, capa intermedia media, primer plano rapido.
   Todo con transformaciones, que van al compositor.
   --------------------------------------------------------------------------- */
@keyframes vd-bg-slow   { from { translate: 0 -6%; } to { translate: 0 6%; } }
@keyframes vd-layer-mid { from { translate: 0 42px; } to { translate: 0 -42px; } }
@keyframes vd-layer-far { from { translate: 0 70px; } to { translate: 0 -70px; } }
@keyframes vd-photo-pan { from { translate: 0 -3.5%; } to { translate: 0 3.5%; } }
@keyframes vd-orbit-spin { to { rotate: 360deg; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* El marmol del hero se mueve mas despacio que todo lo demas. */
    :root:root:root .home-depth .hero-stage::after {
      animation-name: vd-bg-slow;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover;
    }

    /* Anillo: gira despacio en bucle y ademas deriva con el scroll. */
    :root:root:root .hero-orbit {
      animation-name: vd-orbit-spin, vd-layer-far;
      animation-duration: 120s, auto;
      animation-timing-function: linear, linear;
      animation-iteration-count: infinite, 1;
      animation-fill-mode: none, both;
      animation-timeline: auto, view();
      animation-range: normal, cover;
      transform: none;
    }

    /* Fotografias que respiran dentro de su marco. */
    :root:root:root .home-depth .hero-photo img,
    :root:root:root .home-depth .portrait-photo img,
    :root:root:root .depth-frame .depth-image > img,
    :root:root:root .clinic-window img {
      animation-name: vd-photo-pan;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover;
    }

    /* La foto del hero mantiene su asentamiento de carga y solo pane al salir. */
    :root:root:root .home-depth .hero-photo img {
      animation-name: vd-photo-settle, vd-photo-pan;
      animation-duration: 1.8s, auto;
      animation-timing-function: var(--vd-ease), linear;
      animation-fill-mode: both, both;
      animation-timeline: auto, view();
      animation-range: normal, cover;
    }

    /* Marcos decorativos: se mueven mas que la foto que enmarcan. */
    :root:root:root .home-depth .portrait-composition::before,
    :root:root:root .depth-frame::before {
      animation-name: vd-layer-mid;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover;
      translate: none;
      transform: none;
    }

    /* Circulos de luz de las superficies. */
    :root:root:root .layered-surface::before,
    :root:root:root .home-depth .services-section::before,
    :root:root:root .home-depth .reviews-section::before,
    :root:root:root .home-depth .prevention::before,
    :root:root:root .interior-depth .services-catalog::before {
      animation-name: vd-layer-far;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover;
      translate: none;
    }

    /* Pies de foto flotando por delante de su imagen. */
    :root:root:root .home-depth .photo-caption,
    :root:root:root .home-depth .portrait-caption,
    :root:root:root .depth-frame figcaption,
    :root:root:root .depth-frame .services-intro-caption {
      animation-name: vd-layer-mid;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover;
      translate: none;
    }
  }
}

/* Cabecera: se condensa al alejarse del inicio. Solo opacidad y escala. */
@keyframes vd-header-shadow { from { opacity: 0; } to { opacity: 1; } }
@keyframes vd-brand-tighten { from { scale: 1; } to { scale: .88; } }

:root:root:root .site-header::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  height: 22px;
  background: linear-gradient(rgb(20 44 59 / .10), rgb(20 44 59 / 0));
  opacity: 0;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    :root:root:root .site-header::after {
      animation-name: vd-header-shadow;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root);
      animation-range: 20px 180px;
    }
    :root:root:root .site-header .brand img {
      transform-origin: 0 50%;
      animation-name: vd-brand-tighten;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root);
      animation-range: 20px 220px;
    }
  }
}

/* ---------------------------------------------------------------------------
   8. Tarjetas de servicio
   Eran planas: foto atenuada, degradado plano y un aro. Ahora tienen un
   degradado en dos planos, filete champan, numero con jerarquia y una entrada
   escalonada por filas.
   --------------------------------------------------------------------------- */
:root:root:root .service-card {
  border-color: rgb(255 255 255 / .10);
  border-radius: 4px 22px 4px 22px;
  box-shadow: var(--vd-card-shadow);
  transition: box-shadow .45s var(--vd-ease), border-color .45s ease, translate .45s var(--vd-ease), rotate .45s var(--vd-ease);
}

/* Degradado principal + sombra de suelo desde la esquina inferior izquierda,
   que es donde vive el titulo. Da forma en lugar de oscurecer por igual. */
:root:root:root .service-card::after {
  background:
    radial-gradient(120% 90% at 12% 108%, rgb(8 27 39 / .92), rgb(8 27 39 / 0) 62%),
    linear-gradient(rgb(8 27 39 / .12) 0%, rgb(8 27 39 / .34) 38%, rgb(8 27 39 / .93) 100%);
}

:root:root:root .service-card-photo img {
  filter: saturate(.72) contrast(1.04);
}

:root:root:root .service-card:is(:hover, :focus-visible) {
  border-color: rgb(216 194 161 / .55);
  box-shadow: var(--vd-card-shadow-hover);
}

:root:root:root .service-card:is(:hover, :focus-visible) .service-card-photo img {
  filter: saturate(1) contrast(1.02);
}

/* Barrido de luz al pasar el cursor. */
:root:root:root .service-card::before {
  background:
    linear-gradient(104deg, rgb(255 255 255 / 0) 38%, rgb(246 223 181 / .16) 50%, rgb(255 255 255 / 0) 62%),
    radial-gradient(320px circle at var(--light-x, 50%) var(--light-y, 50%), rgb(246 223 181 / .16), transparent 70%);
  background-size: 260% 100%, auto;
  background-position: 120% 0, 0 0;
  background-repeat: no-repeat;
  transition: opacity .5s, background-position 1.1s var(--vd-ease);
}

:root:root:root .service-card.pointer-lit::before,
:root:root:root .service-card:focus-visible::before {
  background-position: -60% 0, 0 0;
}

/* El numero de orden gana peso: es lo que ordena la lectura de la parrilla. */
:root:root:root .service-card-index {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  letter-spacing: -.02em;
  color: rgb(255 255 255 / .92);
}

:root:root:root .service-card-index > span {
  font-family: var(--font-sans);
  font-size: .6875rem;
  letter-spacing: .1em;
  opacity: .6;
}

:root:root:root .service-card-arrow {
  border-color: rgb(255 255 255 / .5);
  backdrop-filter: blur(2px);
}

:root:root:root .service-card-copy h3 {
  text-shadow: 0 2px 24px rgb(8 27 39 / .45);
}

:root:root:root .service-card-copy p {
  color: rgb(240 241 241 / .92);
  text-shadow: 0 1px 14px rgb(8 27 39 / .5);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :root:root:root .service-card {
      animation-name: vd-card-in;
      animation-duration: auto;
      animation-timing-function: var(--vd-ease);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 4% cover 20%;
    }
    /* Escalonado por columna dentro de cada fila. */
    :root:root:root .service-gallery > :nth-child(3n+2) { animation-range: entry 4% cover 25%; }
    :root:root:root .service-gallery > :nth-child(3n+3) { animation-range: entry 4% cover 30%; }
  }
}

/* ---------------------------------------------------------------------------
   9. Resenas
   Las tarjetas estaban dentro de una caja unica con filetes. Se separan en
   piezas con elevacion propia y comilla de mayor presencia.
   --------------------------------------------------------------------------- */
:root:root:root .reviews-grid {
  border: 0;
  background: transparent;
  gap: 18px;
}

:root:root:root .review-card {
  position: relative;
  background: var(--background);
  border: 1px solid #ddd8cc;
  border-radius: 4px 20px 4px 20px;
  box-shadow: 0 14px 32px -26px rgb(20 44 59 / .5);
  transition: translate .4s var(--vd-ease), box-shadow .4s var(--vd-ease), border-color .4s ease;
}

:root:root:root .review-card + .review-card {
  border-left: 1px solid #ddd8cc;
  border-top: 1px solid #ddd8cc;
}

:root:root:root .review-card:is(:hover, :focus-within) {
  translate: 0 -6px;
  border-color: rgb(216 194 161 / .9);
  box-shadow: 0 26px 48px -28px rgb(20 44 59 / .5);
}

:root:root:root .review-card-top svg.lucide-quote {
  width: 36px;
  height: 36px;
  color: rgb(120 97 67 / .32);
}

:root:root:root .review-avatar {
  border: 1px solid rgb(216 194 161 / .8);
  box-shadow: 0 6px 14px -10px rgb(20 44 59 / .6);
}

:root:root:root .reviews-score-number {
  color: var(--ink);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :root:root:root .review-card {
      animation-name: vd-card-in;
      animation-duration: auto;
      animation-timing-function: var(--vd-ease);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 6% cover 22%;
    }
    :root:root:root .review-card:nth-child(2) { animation-range: entry 6% cover 27%; }
    :root:root:root .review-card:nth-child(3) { animation-range: entry 6% cover 32%; }
  }
}

/* ---------------------------------------------------------------------------
   10. Prevencion (hoja oscura)
   --------------------------------------------------------------------------- */
:root:root:root .home-depth .prevention-copy > div + div {
  border-color: rgb(255 255 255 / .16);
}

:root:root:root .home-depth .prevention-copy span {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: rgb(216 194 161 / .75);
}

/* Anillo del hero: pasa de filete plano a aro con degradado conico, de modo
   que su giro lento si se percibe. Si el navegador no soporta mask se queda
   con el filete original. */
@supports (mask: radial-gradient(#000, #000)) or (-webkit-mask: radial-gradient(#000, #000)) {
  :root:root:root .hero-orbit {
    border: 0;
    background: conic-gradient(from 200deg,
      rgb(216 194 161 / 0) 0deg,
      rgb(216 194 161 / .12) 60deg,
      rgb(165 139 98 / .78) 165deg,
      rgb(216 194 161 / .30) 250deg,
      rgb(216 194 161 / 0) 340deg);
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.6px));
    mask: radial-gradient(closest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.6px));
  }
}

/* ---------------------------------------------------------------------------
   11. El momento protagonista: la fachada
   La seccion ya tenia una escena fija; aqui se convierte en el unico gran gesto
   de la pagina. Al entrar, la imagen es una ventana estrecha de esquina
   redondeada, oscurecida y ampliada; segun bajas se abre a pantalla completa,
   se aclara y el rotulo con la direccion sube al final.
   El scroll sigue siendo el del navegador: solo hay position:sticky.
   --------------------------------------------------------------------------- */
@keyframes vd-scene-open {
  from { clip-path: inset(0 16% 0 16% round 200px 200px 10px 10px); }
  to   { clip-path: inset(0 0 0 0 round 12px 12px 10px 10px); }
}
@keyframes vd-scene-zoom  { from { scale: 1.2; } to { scale: 1; } }
@keyframes vd-scene-veil  { from { opacity: .62; } to { opacity: 0; } }
@keyframes vd-scene-plate {
  0%, 52% { opacity: 0; translate: 0 26px; }
  100%    { opacity: 1; translate: 0 0; }
}

:root:root:root .home-depth .clinic-window::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(190deg, rgb(11 28 39 / .85), rgb(11 28 39 / .55) 55%, rgb(11 28 39 / .78));
  opacity: 0;
  pointer-events: none;
}

/* El rotulo sube: la franja de contacto monta sobre el borde inferior de la
   escena y a 30px quedaba mordido. */
:root:root:root .home-depth .facade-composition figcaption {
  bottom: 68px;
  border-radius: 2px 14px 2px 14px;
  box-shadow: 0 18px 40px -22px rgb(20 44 59 / .6);
}

@media (max-width: 767px) {
  :root:root:root .home-depth .facade-composition figcaption { bottom: 44px; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Fuera del tramo fijo (moviles y ventanas bajas): la apertura se liga a la
       entrada normal del bloque, mas corta pero con el mismo gesto. */
    :root:root:root .home-depth .clinic-scroll {
      view-timeline-name: --vd-scene;
      view-timeline-axis: block;
    }

    :root:root:root .depth-ready .clinic-window,
    :root:root:root .home-depth .clinic-window {
      animation-name: vd-scene-open;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --vd-scene;
      animation-range: entry 30% cover 62%;
    }

    :root:root:root .home-depth .clinic-window img {
      animation-name: vd-scene-zoom;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --vd-scene;
      animation-range: entry 30% cover 62%;
      transform: none;
    }

    :root:root:root .home-depth .clinic-window::after {
      animation-name: vd-scene-veil;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --vd-scene;
      animation-range: entry 30% cover 58%;
    }

    :root:root:root .home-depth .facade-composition figcaption {
      animation-name: vd-scene-plate;
      animation-duration: auto;
      animation-timing-function: var(--vd-ease);
      animation-fill-mode: both;
      animation-timeline: --vd-scene;
      animation-range: entry 30% cover 70%;
    }

    /* Con tramo fijo disponible, la apertura ocupa casi todo el recorrido
       pegado. Arranca ya en la ultima parte de la entrada para que no haya un
       tramo muerto viendo la ventana estrecha sin que pase nada. */
    @media (min-width: 900px) and (min-height: 650px) {
      :root:root:root .depth-ready .clinic-window,
      :root:root:root .home-depth .clinic-window,
      :root:root:root .home-depth .clinic-window img,
      :root:root:root .home-depth .clinic-window::after {
        animation-range: entry 78% contain 88%;
      }
      :root:root:root .home-depth .facade-composition figcaption {
        animation-range: entry 90% contain 100%;
      }
    }
  }
}

/* Un poco mas de recorrido para que la apertura no se sienta apresurada. */
@media (min-width: 900px) and (min-height: 650px) and (prefers-reduced-motion: no-preference) {
  :root:root:root .home-depth .clinic-scroll { height: calc(178svh - 100px); }
}

/* ---------------------------------------------------------------------------
   12. Paginas interiores
   --------------------------------------------------------------------------- */
@keyframes vd-frame-open {
  from { clip-path: inset(0 8% 0 8% round 140px 10px 10px 10px); }
  to   { clip-path: inset(0 0 0 0 round 26px 8px 26px 8px); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :root:root:root .depth-ready .depth-image,
    :root:root:root .interior-depth .depth-image {
      animation-name: vd-frame-open;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 8% cover 46%;
    }
  }
}

/* Correccion de maquetacion previa a este trabajo, visible en las nueve fichas
   de tratamiento a partir de 900px: el pie de la fotografia caia 45px por
   debajo de su seccion y se montaba sobre el filete de "Otros tratamientos".
   Ademas, el sticky que buscaba el diseno original nunca llego a aplicarse
   porque .depth-frame{position:relative} lo sobrescribia; se restituye, y en
   las fichas de texto largo la imagen acompana la lectura. */
@media (min-width: 768px) {
  :root:root:root .interior-depth .treatment-photo {
    position: sticky;
    top: 125px;
    align-self: start;
    padding-bottom: 64px;
  }
}

@media (max-width: 767px) {
  :root:root:root .interior-depth .treatment-photo { padding-bottom: 0; }
}

:root:root:root .interior-depth .bio-story {
  border-radius: 4px 44px 4px 24px;
  box-shadow: 0 26px 54px -34px rgb(20 44 59 / .45);
  border: 1px solid rgb(216 194 161 / .45);
  background: linear-gradient(162deg, #f2eee6, #eae4d8);
}

:root:root:root .interior-depth .treatment-guidance {
  border-left-width: 3px;
  border-radius: 0 22px 22px 0;
  background: linear-gradient(110deg, #eeece4, #e7e2d6);
  box-shadow: 0 18px 36px -30px rgb(20 44 59 / .5);
}

:root:root:root .depth-frame::before {
  background: linear-gradient(150deg, rgb(230 221 206 / .85), rgb(216 194 161 / .28));
  border-color: rgb(184 161 129 / .55);
}

/* ---------------------------------------------------------------------------
   13. Microinteracciones
   Respuestas cortas y contenidas: elevacion, un barrido de luz y el subrayado
   que se dibuja. Nada que distraiga de la lectura.
   --------------------------------------------------------------------------- */
:root:root:root .button {
  position: relative;
  overflow: hidden;
  transition: background .25s, translate .3s var(--vd-ease), box-shadow .3s var(--vd-ease);
}

:root:root:root .button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg, transparent 34%, rgb(255 255 255 / .30) 50%, transparent 66%);
  translate: -110% 0;
  pointer-events: none;
}

:root:root:root .button:hover {
  translate: 0 -2px;
  box-shadow: 0 14px 26px -16px rgb(20 44 59 / .55);
}

:root:root:root .button:hover::after {
  translate: 110% 0;
  transition: translate .75s var(--vd-ease-soft);
}

:root:root:root .button:active { translate: 0 0; }

/* Enlaces de texto: el filete se dibuja de izquierda a derecha. */
:root:root:root .text-link {
  position: relative;
}

:root:root:root .text-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--bronze);
  transform-origin: 0 50%;
  scale: 0 1;
  transition: scale .45s var(--vd-ease);
  pointer-events: none;
}

:root:root:root .text-link:is(:hover, :focus-visible)::after { scale: 1 1; }

:root:root:root :is(.prevention, .contact-band, .contact-masthead, .concierge-body) .text-link::after,
:root:root:root .hero .text-link::after {
  background: var(--champagne);
}

/* Telefono: el filete inferior tambien se enciende. */
:root:root:root .phone-link,
:root:root:root .contact-phone {
  position: relative;
  transition: color .3s ease;
}

:root:root:root .phone-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--champagne);
  transform-origin: 0 50%;
  scale: 0 1;
  transition: scale .5s var(--vd-ease);
}

:root:root:root .phone-link:is(:hover, :focus-visible)::after { scale: 1 1; }
:root:root:root .phone-link:is(:hover, :focus-visible),
:root:root:root .contact-phone:is(:hover, :focus-visible) { color: var(--champagne); }

/* Navegacion del pie y listas de enlaces. */
:root:root:root .footer-nav > a,
:root:root:root .footer-nav details a {
  transition: translate .25s var(--vd-ease), color .25s ease;
}

:root:root:root .footer-nav > a:hover,
:root:root:root .footer-nav details a:hover {
  translate: 4px 0;
  color: var(--bronze);
}

:root:root:root .review-card figcaption > a {
  transition: translate .3s var(--vd-ease), color .3s ease, border-color .3s ease;
}
:root:root:root .review-card figcaption > a:hover { translate: 2px 0; }

/* Boton flotante de WhatsApp: un pulso muy contenido, sin bucle infinito
   agresivo, y elevacion al pasar el cursor (ya existente). */
:root:root:root .whatsapp-float::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgb(216 194 161 / .55);
  opacity: 0;
  scale: .85;
  transition: opacity .35s ease, scale .45s var(--vd-ease);
  pointer-events: none;
}

:root:root:root .whatsapp-float:is(:hover, :focus-visible)::before {
  opacity: 1;
  scale: 1;
}

/* Retrato del hero: ya se eleva; se le anade el filete champan. */
:root:root:root .hero-professional {
  border-radius: 2px;
  transition: translate .3s var(--vd-ease), box-shadow .3s var(--vd-ease), border-color .3s ease;
}
:root:root:root .hero-professional:is(:hover, :focus-visible) {
  border-top-color: rgb(216 194 161 / .9);
}

/* Filas de servicio en el listado compacto. */
:root:root:root .service-row .service-arrow {
  transition: background .3s, color .3s, transform .35s var(--vd-ease), border-color .3s;
}

/* ---------------------------------------------------------------------------
   14. Movil
   El movimiento se reduce: menos recorrido de parallax, sin inclinacion y
   apilado mas corto para no dejar huecos.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root:root:root .home-depth .services-section {
    margin-top: -28px;
    border-radius: 34px 34px 0 0;
  }
  :root:root:root .home-depth .about-composition {
    margin-top: -30px;
    border-radius: 30px 30px 0 0;
  }
  :root:root:root .home-depth .reviews-section {
    margin-top: -26px;
    padding-top: calc(var(--space-section) + 14px);
    border-radius: 30px 30px 0 0;
  }
  :root:root:root .home-depth .prevention {
    margin-top: -28px;
    border-radius: 34px 34px 0 0;
  }
  :root:root:root .home-depth .clinic-composition {
    margin-top: -28px;
    border-radius: 30px 30px 0 0;
  }
  :root:root:root .home-depth > .contact-band {
    margin-top: -22px;
    border-radius: 28px 28px 0 0;
  }
  :root:root:root .interior-depth :is(.services-catalog, .booking-section, .domicilio, .contact-location) {
    margin-top: -22px;
    border-radius: 30px 30px 0 0;
  }
  :root:root:root .interior-depth > .contact-band {
    margin-top: -22px;
    border-radius: 30px 30px 0 0;
  }

  :root:root:root .home-depth .hero-photo {
    border-radius: 84px 8px 8px 8px;
  }
  :root:root:root .home-depth .hero-photo::after { inset: 12px; border-radius: 74px 4px 4px 4px; }

  :root:root:root .service-card { border-radius: 4px 18px 4px 18px; }
  :root:root:root .review-card { border-radius: 4px 16px 4px 16px; }

  @keyframes vd-layer-mid { from { translate: 0 16px; } to { translate: 0 -16px; } }
  @keyframes vd-layer-far { from { translate: 0 26px; } to { translate: 0 -26px; } }
  @keyframes vd-photo-pan { from { translate: 0 -2%; } to { translate: 0 2%; } }
  @keyframes vd-bg-slow   { from { translate: 0 -3%; } to { translate: 0 3%; } }

  /* Sin inclinacion 3D en tactil: solo un hundido al pulsar. */
  :root:root:root .service-card.pointer-lit { rotate: none; translate: none; }
}

@media (hover: none), (pointer: coarse) {
  :root:root:root .service-card::before { background-position: 120% 0, 0 0; }
  :root:root:root .button::after { display: none; }
}

/* ---------------------------------------------------------------------------
   15. prefers-reduced-motion
   Se apaga todo el movimiento: nada de parallax, nada de escenas ligadas al
   scroll, nada de entradas. La composicion por capas se mantiene, porque es
   maquetacion y no animacion.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root:root:root .hero-enter,
  :root:root:root .hero h1 em,
  :root:root:root .home-depth .hero-visual,
  :root:root:root .home-depth .hero-photo img,
  :root:root:root .home-depth .hero-professional,
  :root:root:root .home-depth .hero-stage::after,
  :root:root:root .hero-orbit,
  :root:root:root .site-header::after,
  :root:root:root .site-header .brand img,
  :root:root:root .home-depth .portrait-photo img,
  :root:root:root .depth-frame .depth-image > img,
  :root:root:root .home-depth .portrait-composition::before,
  :root:root:root .depth-frame::before,
  :root:root:root .layered-surface::before,
  :root:root:root .home-depth .services-section::before,
  :root:root:root .home-depth .reviews-section::before,
  :root:root:root .home-depth .prevention::before,
  :root:root:root .interior-depth .services-catalog::before,
  :root:root:root .home-depth .photo-caption,
  :root:root:root .home-depth .portrait-caption,
  :root:root:root .depth-frame figcaption,
  :root:root:root .depth-frame .services-intro-caption,
  :root:root:root .service-card,
  :root:root:root .review-card,
  :root:root:root .intro-strip > *,
  :root:root:root .home-depth .clinic-window,
  :root:root:root .home-depth .clinic-window img,
  :root:root:root .home-depth .clinic-window::after,
  :root:root:root .home-depth .facade-composition figcaption,
  :root:root:root .depth-image,
  :root:root:root .interior-depth .treatment-scope li,
  :root:root:root .home-depth .prevention-copy > div,
  :root:root:root [data-sequence] :is(.eyebrow, h1, h2, p, a, li, .credential, .intro-bottom),
  :root:root:root .home-depth :is(.section-heading, .reviews-heading, .clinic-heading, .introduction, .about-copy, .contact-band) :is(.eyebrow, h2, p, a),
  :root:root:root .interior-depth :is(.services-catalog-heading, .domicilio, .clinic-detail, .contact-information, .bio-story, .contact-band) :is(.eyebrow, h1, h2, p, a) {
    animation-name: none;
  }

  :root:root:root .home-depth .clinic-window { clip-path: none; }
  :root:root:root .home-depth .clinic-window::after { opacity: 0; }
  :root:root:root .site-header::after { opacity: 0; }
  :root:root:root .home-depth .hero-photo img { scale: 1.06; }
  :root:root:root .depth-image { clip-path: none; }

  :root:root:root .button,
  :root:root:root .button:hover,
  :root:root:root .review-card,
  :root:root:root .review-card:hover,
  :root:root:root .service-card { translate: none; transition: none; }
  :root:root:root .button::after { display: none; }
  :root:root:root .text-link::after,
  :root:root:root .phone-link::after { transition: none; }
}

/* ---------------------------------------------------------------------------
   16. Remates
   --------------------------------------------------------------------------- */

/* El barrido de las tarjetas tambien sin JavaScript. */
:root:root:root .service-card:hover::before { opacity: 1; }

/* La introduccion tenia una columna izquierda casi vacia bajo el antetitulo.
   Un filete vertical que se dibuja al bajar ocupa ese hueco y ata la
   composicion sin anadir texto. */
@media (min-width: 901px) {
  :root:root:root .home-depth .introduction > .eyebrow { position: relative; }

  :root:root:root .home-depth .introduction > .eyebrow::after {
    content: "";
    position: absolute;
    left: 0;
    top: calc(100% + 26px);
    width: 1px;
    height: 132px;
    background: linear-gradient(rgb(120 97 67 / .85), rgb(120 97 67 / 0));
    transform-origin: 50% 0;
    scale: 1 0;
    pointer-events: none;
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      :root:root:root .home-depth .introduction > .eyebrow::after {
        animation-name: vd-rule-draw;
        animation-duration: auto;
        animation-timing-function: var(--vd-ease);
        animation-fill-mode: both;
        animation-timeline: view();
        animation-range: entry 14% cover 40%;
      }
    }
  }
}

@keyframes vd-rule-draw {
  from { scale: 1 0; }
  to   { scale: 1 1; }
}

/* La tira de tres columnas gana su propio filo de luz al montar sobre el hero. */
:root:root:root .home-depth .intro-strip {
  box-shadow: 0 -14px 44px -18px rgb(20 44 59 / .12), var(--vd-edge-light);
}

/* La franja de contacto oscura: el halo champan se nota mas sobre la tinta. */
:root:root:root .contact-band.layered-surface::before {
  background: radial-gradient(circle, rgb(216 194 161 / .18), rgb(216 194 161 / 0) 68%);
  border-color: rgb(184 161 129 / .28);
}

@media (prefers-reduced-motion: reduce) {
  :root:root:root .home-depth .introduction > .eyebrow::after { scale: 1 1; }
}

/* ---------------------------------------------------------------------------
   17. Impresion
   Las entradas parten de opacidad 0. Al imprimir no hay scroll que las
   resuelva, asi que se desactivan y se restituyen los recortes.
   --------------------------------------------------------------------------- */
@media print {
  :root:root:root *,
  :root:root:root *::before,
  :root:root:root *::after {
    animation-name: none !important;
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    clip-path: none !important;
    box-shadow: none !important;
  }
  :root:root:root .whatsapp-float,
  :root:root:root .mobile-contact,
  :root:root:root .reading-progress { display: none !important; }
}

/* ---------------------------------------------------------------------------
   18. Portada de las paginas interiores
   La home abre con una secuencia por tiempo y las interiores entraban planas.
   Aqui reciben el mismo trato: migas, antetitulo, titular, entradilla y foto,
   en ese orden. Va por tiempo y no por scroll porque este bloque ya esta en
   pantalla al cargar; el scroll no tendria nada que recorrer.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  :root:root:root .interior-depth .breadcrumb,
  :root:root:root .interior-depth :is(.treatment-heading, .services-intro-copy, .about-heading, .contact-intro) .eyebrow,
  :root:root:root .interior-depth :is(.treatment-heading, .services-intro-copy, .about-heading, .contact-intro) h1,
  :root:root:root .interior-depth :is(.treatment-heading, .services-intro-copy, .about-heading, .contact-intro) .lead,
  :root:root:root .interior-depth :is(.about-heading, .contact-intro) .credential,
  :root:root:root .interior-depth .contact-welcome,
  :root:root:root .interior-depth .services-intro-copy .actions,
  :root:root:root .interior-depth :is(.services-intro-visual, .about-page-portrait, .treatment-photo) {
    animation-name: vd-hero-copy;
    animation-duration: .9s;
    animation-timing-function: var(--vd-ease);
    animation-fill-mode: both;
    animation-timeline: auto;
    animation-range: normal;
  }

  /* Las migas se descubren con mascara, sin desplazarse: van pegadas a la
     seccion siguiente y un translate vertical las hacia pisarla durante la
     entrada. */
  :root:root:root .interior-depth .breadcrumb {
    animation-name: vd-eyebrow-in;
    animation-duration: .7s;
    animation-delay: .02s;
  }

  :root:root:root .interior-depth :is(.treatment-heading, .services-intro-copy, .about-heading, .contact-intro) .eyebrow {
    animation-name: vd-hero-eyebrow;
    animation-duration: .8s;
    animation-delay: .1s;
  }

  :root:root:root .interior-depth :is(.treatment-heading, .services-intro-copy, .about-heading, .contact-intro) h1 {
    animation-name: vd-hero-title;
    animation-duration: 1.1s;
    animation-delay: .16s;
  }

  :root:root:root .interior-depth :is(.treatment-heading, .services-intro-copy, .about-heading, .contact-intro) .lead,
  :root:root:root .interior-depth .contact-welcome { animation-delay: .34s; }

  :root:root:root .interior-depth :is(.about-heading, .contact-intro) .credential,
  :root:root:root .interior-depth .services-intro-copy .actions { animation-delay: .46s; }

  :root:root:root .interior-depth :is(.services-intro-visual, .about-page-portrait, .treatment-photo) {
    animation-duration: 1.15s;
    animation-delay: .2s;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root:root:root .interior-depth .breadcrumb,
  :root:root:root .interior-depth :is(.treatment-heading, .services-intro-copy, .about-heading, .contact-intro) :is(.eyebrow, h1, .lead, .credential),
  :root:root:root .interior-depth .contact-welcome,
  :root:root:root .interior-depth .services-intro-copy .actions,
  :root:root:root .interior-depth :is(.services-intro-visual, .about-page-portrait, .treatment-photo) {
    animation-name: none;
  }
}

/* ---------------------------------------------------------------------------
   19. Convivencia con las reglas tactiles del bundle
   Al subir la especificidad, las transiciones de esta hoja pasan por delante de
   las que el bundle define para pantallas tactiles. Se reincorpora lo que alli
   se buscaba: el hundido al pulsar y la fotografia a plena saturacion en movil,
   donde no hay hover que la revele.
   --------------------------------------------------------------------------- */
:root:root:root .button {
  transition: background .25s, translate .3s var(--vd-ease), box-shadow .3s var(--vd-ease), scale .2s var(--vd-ease);
}

:root:root:root .service-card {
  transition: box-shadow .45s var(--vd-ease), border-color .45s ease, translate .45s var(--vd-ease), rotate .45s var(--vd-ease), scale .22s var(--vd-ease);
}

@media (hover: none), (pointer: coarse), (max-width: 767px) {
  :root:root:root .service-card-photo img { filter: none; }
}

/* ---------------------------------------------------------------------------
   20. Cierre de las entradas por tiempo
   La clase la pone vd-refine.js unos segundos despues de que la pagina sea
   visible. Solo afecta a las animaciones de carga -las de scroll siguen su
   curso- y garantiza que ningun texto de portada se quede en opacidad 0 si el
   navegador congela el reloj de animacion.
   --------------------------------------------------------------------------- */
:root:root:root.vd-entered .hero-enter,
:root:root:root.vd-entered .hero h1 em,
:root:root:root.vd-entered .home-depth .hero-visual,
:root:root:root.vd-entered .home-depth .hero-professional,
:root:root:root.vd-entered .interior-depth .breadcrumb,
:root:root:root.vd-entered .interior-depth :is(.treatment-heading, .services-intro-copy, .about-heading, .contact-intro) :is(.eyebrow, h1, .lead, .credential),
:root:root:root.vd-entered .interior-depth .contact-welcome,
:root:root:root.vd-entered .interior-depth .services-intro-copy .actions,
:root:root:root.vd-entered .interior-depth :is(.services-intro-visual, .about-page-portrait, .treatment-photo) {
  animation-name: none;
}

/* ---------------------------------------------------------------------------
   22. Cabecera movil: que se retire de forma progresiva
   El bundle conmuta la clase --compact de golpe al pasar de 120px de scroll y
   el logotipo con el boton desaparecian de un salto. Aqui el retiro se liga al
   propio scroll: se desvanecen y suben poco a poco, y para cuando la clase
   cambia ya no queda nada visible, asi que el cambio no se percibe.
   La barra tambien se difumina en lugar de apagarse.
   --------------------------------------------------------------------------- */
@keyframes vd-header-lift {
  from { opacity: 1; translate: 0 0; }
  to   { opacity: 0; translate: 0 -30px; }
}

@keyframes vd-header-bar {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@media (max-width: 767px) {
  /* La superficie de la barra pasa a un pseudoelemento para poder atenuarla
     sin tocar el contenido ni perder el desenfoque. */
  :root:root:root .site-header {
    background: none;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  :root:root:root .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(248 247 243 / .95);
    border-bottom: 1px solid var(--border);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    pointer-events: none;
  }

  :root:root:root .site-header .brand,
  :root:root:root .site-header .header-cta {
    transform-origin: 0 50%;
  }
}

@supports (animation-timeline: scroll()) {
  @media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    :root:root:root .site-header .brand,
    :root:root:root .site-header .header-cta,
    :root:root:root .site-header::before {
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root);
    }
    /* Termina antes de los 120px en los que salta la clase del bundle. */
    :root:root:root .site-header .brand,
    :root:root:root .site-header .header-cta {
      animation-name: vd-header-lift;
      animation-range: 20px 112px;
    }
    :root:root:root .site-header::before {
      animation-name: vd-header-bar;
      animation-range: 40px 118px;
    }
  }
}

/* ---------------------------------------------------------------------------
   23. El boton de menu movil
   Era un icono suelto sobre el fondo. Ahora es una pieza con forma: circulo
   claro con filete bronce mientras la cabecera esta completa, y circulo de
   tinta con aro champan cuando queda flotando. Las tres lineas pasan a tener
   longitudes distintas, que es lo que lo saca de "hamburguesa por defecto".
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root:root:root .mobile-trigger {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgb(248 247 243 / .88);
    border: 1px solid rgb(184 161 129 / .6);
    color: var(--ink);
    box-shadow: 0 6px 18px -10px rgb(20 44 59 / .45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background .3s var(--vd-ease), color .3s, border-color .3s,
                box-shadow .3s var(--vd-ease), scale .18s var(--vd-ease);
  }

  :root:root:root .site-header--compact .mobile-trigger {
    background: var(--ink);
    color: var(--background);
    border-color: rgb(216 194 161 / .65);
    box-shadow: 0 12px 28px -10px rgb(20 44 59 / .6);
  }

  :root:root:root .mobile-trigger:active { scale: .93; }

  :root:root:root .mobile-trigger svg {
    width: 21px;
    height: 21px;
    overflow: visible;
  }

  :root:root:root .mobile-trigger svg path {
    stroke-width: 1.7;
    transform-box: view-box;
    transition: transform .35s var(--vd-ease);
  }

  :root:root:root .mobile-trigger svg path:nth-of-type(1) {
    transform-origin: 4px 5px;
    transform: scaleX(.76);
  }

  :root:root:root .mobile-trigger svg path:nth-of-type(3) {
    transform-origin: 4px 19px;
    transform: scaleX(.5);
  }

  :root:root:root .mobile-trigger:is(:hover, :focus-visible, [data-state=open]) svg path:nth-of-type(1),
  :root:root:root .mobile-trigger:is(:hover, :focus-visible, [data-state=open]) svg path:nth-of-type(3) {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root:root:root .mobile-trigger,
  :root:root:root .mobile-trigger svg path { transition: none; }
  :root:root:root .site-header .brand,
  :root:root:root .site-header .header-cta,
  :root:root:root .site-header::before { animation-name: none; }
}

/* ---------------------------------------------------------------------------
   24. La esquina de la fotografia del hero
   El radio de 84px en movil abria un hueco muy grande justo donde la imagen es
   una pared blanca, y el filete interior lo cruzaba con una curva que no
   acompanaba a la del marco: parecia un error de dibujo. Se reduce el radio,
   el filete interior pasa a champan y a su geometria correcta (radio exterior
   menos el inset) y una sombra suave desde la esquina da volumen a esa zona.
   --------------------------------------------------------------------------- */
:root:root:root .home-depth .hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(135% 95% at 6% -4%, rgb(20 44 59 / .20), rgb(20 44 59 / 0) 52%);
}

:root:root:root .home-depth .hero-photo::after {
  inset: 18px;
  border-color: rgb(216 194 161 / .5);
  border-radius: 114px 4px 4px 4px;
}

@media (max-width: 767px) {
  :root:root:root .home-depth .hero-photo { border-radius: 58px 8px 8px 8px; }

  :root:root:root .home-depth .hero-photo::after {
    inset: 10px;
    border-radius: 48px 3px 3px 3px;
    border-color: rgb(216 194 161 / .55);
  }

  /* El aro champan cruzaba por encima del texto de la primera pantalla y se
     leia como una linea perdida. En movil no hay sitio para el. */
  :root:root:root .hero-orbit { display: none; }
}

/* ---------------------------------------------------------------------------
   25. Carrusel de opiniones
   La rejilla pasa a ser la ventana y la cinta va dentro. Las tarjetas llevan el
   hueco en el margen y no con gap: asi las dos vueltas miden exactamente lo
   mismo y el bucle vuelve al origen sin salto.
   Si el JavaScript no llega a montarlo, .vd-marquee no existe y se queda la
   rejilla de siempre.
   --------------------------------------------------------------------------- */
@keyframes vd-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

:root:root:root .reviews-grid.vd-marquee {
  display: block;
  overflow: hidden;

  /* Se difumina en los extremos para que las tarjetas entren y salgan en vez
     de aparecer cortadas contra el borde. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

:root:root:root .vd-marquee-track {
  display: flex;
  width: max-content;
  padding-block: 4px;
  animation: vd-marquee var(--vd-marquee-duration, 40s) linear infinite;
  will-change: transform;
}

:root:root:root .vd-marquee .review-card {
  flex: 0 0 clamp(268px, 30vw, 400px);
  margin: 0 18px 0 0;
  border-left: 1px solid #ddd8cc;
  border-top: 1px solid #ddd8cc;
}

:root:root:root .vd-marquee .review-card blockquote { min-height: 132px; }

/* Se detiene al pasar el cursor, al enfocar con el teclado, al tocar y con el
   boton. La cinta sigue en su sitio: solo deja de avanzar. */
:root:root:root .reviews-grid.vd-marquee:hover .vd-marquee-track,
:root:root:root .reviews-grid.vd-marquee:focus-within .vd-marquee-track,
:root:root:root .reviews-grid.vd-marquee-held .vd-marquee-track,
:root:root:root .reviews-grid.vd-marquee-paused .vd-marquee-track {
  animation-play-state: paused;
}

:root:root:root .vd-marquee-controls {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

:root:root:root .vd-marquee-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 8px 16px;
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  background: rgb(255 255 255 / .6);
  border: 1px solid #ddd8cc;
  border-radius: 999px;
  transition: color .25s, border-color .25s, background .25s;
}

:root:root:root .vd-marquee-toggle::before {
  content: "";
  width: 9px;
  height: 10px;
  background: currentColor;
  /* Dos barras: pausa. Un triangulo: reanudar. */
  clip-path: polygon(0 0, 34% 0, 34% 100%, 0 100%, 0 0, 66% 0, 100% 0, 100% 100%, 66% 100%, 66% 0);
  transition: clip-path .25s var(--vd-ease);
}

:root:root:root .vd-marquee-toggle[aria-pressed="true"]::before {
  clip-path: polygon(0 0, 100% 50%, 100% 50%, 0 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
}

:root:root:root .vd-marquee-toggle:is(:hover, :focus-visible) {
  color: var(--ink);
  border-color: var(--champagne);
  background: rgb(255 255 255 / .9);
}

@media (max-width: 767px) {
  :root:root:root .vd-marquee .review-card {
    flex: 0 0 min(84vw, 340px);
    margin-right: 14px;
  }
  :root:root:root .vd-marquee .review-card blockquote { min-height: 0; }
  :root:root:root .reviews-grid.vd-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  }
  :root:root:root .vd-marquee-controls { justify-content: flex-start; margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  :root:root:root .vd-marquee-track { animation-name: none; }
}

/* Dentro de la cinta las tarjetas son estrechas, asi que se mantiene siempre la
   disposicion apilada del pie: la variante horizontal del bundle esta pensada
   para tarjetas a todo el ancho y aqui se apretaba. */
:root:root:root .vd-marquee .review-card {
  padding: 28px 26px;
}

:root:root:root .vd-marquee .review-card figcaption {
  display: block;
  border-top: 0;
  padding-top: 0;
}

:root:root:root .vd-marquee .review-author {
  border-top: 1px solid var(--border);
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  display: flex;
}

:root:root:root .vd-marquee .review-author strong { font-size: .75rem; }

:root:root:root .vd-marquee .review-card figcaption > a {
  gap: 12px;
  margin-top: 16px;
}

:root:root:root .vd-marquee .review-card blockquote p { font-size: 1.5rem; }

/* ---------------------------------------------------------------------------
   26. Blog
   Paginas estaticas, sin React: reutilizan el mismo sistema visual y anaden
   solo lo que el articulo necesita. La columna de lectura se limita en medida
   para que la linea no se haga larga.
   --------------------------------------------------------------------------- */
:root:root:root .vd-nav-mobile { position: relative; display: none; }
:root:root:root .vd-nav-mobile > summary { list-style: none; cursor: pointer; }
:root:root:root .vd-nav-mobile > summary::-webkit-details-marker { display: none; }

:root:root:root .vd-nav-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 12px);
  right: 0;
  display: grid;
  gap: 2px;
  width: min(280px, 78vw);
  padding: 14px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 4px 20px 4px 20px;
  box-shadow: 0 26px 54px -26px rgb(20 44 59 / .45);
}

:root:root:root .vd-nav-panel > a {
  padding: 11px 10px;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1.2;
  border-bottom: 1px solid var(--border);
}

:root:root:root .vd-nav-panel > a:last-child {
  justify-content: space-between;
  margin-top: 14px;
  border-bottom: 0;
  font-family: var(--font-sans);
  font-size: .8125rem;
}

@media (max-width: 900px) {
  :root:root:root .vd-nav-mobile { display: block; }
}

/* Portada del blog */
:root:root:root .vd-blog-intro { padding-block: 48px 60px; }
:root:root:root .vd-blog-intro h1 { font-size: clamp(48px, 5.7vw, 84px); margin-block: 26px 0; }
:root:root:root .vd-blog-intro .lead { max-width: 560px; }

:root:root:root .vd-post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding-bottom: var(--space-section);
}

:root:root:root .vd-post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 26px;
  background: var(--background);
  border: 1px solid #ddd8cc;
  border-radius: 4px 22px 4px 22px;
  box-shadow: 0 14px 32px -26px rgb(20 44 59 / .5);
  transition: translate .4s var(--vd-ease), box-shadow .4s var(--vd-ease), border-color .4s ease;
}

:root:root:root .vd-post-card:is(:hover, :focus-within) {
  translate: 0 -6px;
  border-color: rgb(216 194 161 / .9);
  box-shadow: 0 28px 50px -28px rgb(20 44 59 / .5);
}

:root:root:root .vd-post-card h2 {
  margin-block: 16px 14px;
  font-size: 1.9rem;
  line-height: 1.15;
}

/* El enlace cubre la tarjeta entera: asi todo el bloque es pulsable sin
   duplicar enlaces para el lector de pantalla. */
:root:root:root .vd-post-card h2 a::after { content: ""; position: absolute; inset: 0; }

:root:root:root .vd-post-card > p:not(.eyebrow):not(.vd-post-card-meta) {
  color: var(--muted-foreground);
  font-size: .9375rem;
  line-height: 1.7;
}

:root:root:root .vd-post-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
  color: var(--muted-foreground);
  font-size: .6875rem;
  letter-spacing: .06em;
}

/* Articulo */
:root:root:root .vd-post-head { padding-block: 46px 40px; }
:root:root:root .vd-post-head h1 { font-size: clamp(42px, 4.9vw, 70px); margin-block: 24px 0; }
:root:root:root .vd-post-head .lead { max-width: 620px; font-family: var(--font-serif); font-size: 1.6rem; line-height: 1.35; }

:root:root:root .vd-post-body {
  max-width: 68ch;
  padding-bottom: 20px;
  border-top: 1px solid var(--border);
  padding-top: 38px;
}

:root:root:root .vd-post-body p { margin-bottom: 22px; color: var(--muted-foreground); font-size: 1.0625rem; line-height: 1.9; }
:root:root:root .vd-post-body h2 { margin-block: 44px 18px; font-size: 2.1rem; }
:root:root:root .vd-post-body a { color: var(--bronze); border-bottom: 1px solid rgb(120 97 67 / .4); transition: border-color .25s, color .25s; }
:root:root:root .vd-post-body a:hover { color: var(--ink); border-bottom-color: var(--ink); }
:root:root:root .vd-post-body strong { font-weight: 600; color: var(--ink); }

:root:root:root .vd-post-list { margin: 0 0 26px; padding: 0; list-style: none; }
:root:root:root .vd-post-list li {
  position: relative;
  padding: 0 0 14px 26px;
  color: var(--muted-foreground);
  font-size: 1rem;
  line-height: 1.8;
}
:root:root:root .vd-post-list li::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 2px;
  width: 12px;
  height: 1px;
  background: var(--bronze);
}

:root:root:root .vd-post-note {
  margin: 36px 0 0;
  padding: 24px 26px;
  background: linear-gradient(110deg, #eeece4, #e7e2d6);
  border-left: 3px solid var(--bronze);
  border-radius: 0 22px 22px 0;
  box-shadow: 0 18px 36px -30px rgb(20 44 59 / .5);
}
:root:root:root .vd-post-note p { margin: 0; color: var(--ink); font-size: .875rem; line-height: 1.8; }

:root:root:root .vd-post-next {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin-top: 52px;
  padding-block: 26px 60px;
  border-top: 1px solid var(--border);
  font-size: .875rem;
}
:root:root:root .vd-post-next a { display: inline-flex; align-items: center; gap: 12px; transition: translate .3s var(--vd-ease); }
:root:root:root .vd-post-next a:hover { translate: 3px 0; color: var(--bronze); }

/* Enlace al blog inyectado en el pie del resto del sitio. */
:root:root:root .footer-nav .vd-blog-link { margin-bottom: 7px; display: block; }

@media (max-width: 900px) {
  :root:root:root .vd-post-grid { grid-template-columns: minmax(0, 1fr); }
  :root:root:root .vd-post-card h2 { font-size: 1.75rem; }
}

@media (max-width: 700px) {
  :root:root:root .vd-blog-intro { padding-block: 30px 44px; }
  :root:root:root .vd-blog-intro h1 { font-size: 3rem; }
  :root:root:root .vd-post-head { padding-block: 30px 32px; }
  :root:root:root .vd-post-head h1 { font-size: 2.6rem; }
  :root:root:root .vd-post-head .lead { font-size: 1.3rem; }
  :root:root:root .vd-post-body { padding-top: 30px; }
  :root:root:root .vd-post-body h2 { margin-block: 34px 14px; font-size: 1.75rem; }
  :root:root:root .vd-post-card { padding: 26px 24px 22px; }
  :root:root:root .vd-post-next { margin-top: 38px; padding-bottom: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  :root:root:root .vd-post-card,
  :root:root:root .vd-post-next a { transition: none; translate: none; }
}

/* ---------------------------------------------------------------------------
   27. Aire en el borde de las superficies recortadas
   Hay bloques que son a la vez superficie con overflow recortado y contenedor
   de medida (.wrap): el texto empieza justo en el borde del recorte y los
   remates de los tipos serif -que pintan uno o dos pixeles a la izquierda del
   origen del glifo, y algo mas en la cursiva- se cortaban. Se veia en el
   titular de Servicios, en las fichas de tratamiento y en el blog.

   El margen de recorte les devuelve ese aire. El halo de fondo, que es lo que
   el recorte esta conteniendo, queda mucho mas lejos (-14% y -18%), asi que
   sigue sin escaparse. Se queda en 12px, muy por debajo del margen lateral mas
   estrecho de .wrap (22px en movil), para no generar scroll horizontal.

   Queda fuera el catalogo de Servicios: alli lo resuelve el margen interior de
   la seccion 28, y anadirle ademas margen de recorte si generaba scroll
   horizontal, porque esa tarjeta ya llega casi al borde de la ventana.
   --------------------------------------------------------------------------- */
:root:root:root .layered-surface.wrap,
:root:root:root .vd-post-head {
  overflow-clip-margin: 12px;
}

/* ---------------------------------------------------------------------------
   28. Margen interior de las tarjetas de seccion
   El catalogo de Servicios y el bloque de reserva de Contacto son a la vez la
   tarjeta que se ve -fondo, radio y sombra- y el contenedor de medida, asi que
   su texto arrancaba pegado al borde. Con darles padding sin mas, el contenido
   quedaria descolocado respecto a las secciones de alrededor; lo que se hace
   es ensanchar la tarjeta hacia fuera exactamente lo que mide ese padding.
   Resultado: la tarjeta gana margen interior y el texto sigue alineado con el
   resto de la pagina. El ancho crece dentro del hueco que .wrap deja libre,
   asi que no aparece scroll horizontal en ningun tamano.
   --------------------------------------------------------------------------- */
:root:root:root .interior-depth :is(.services-catalog, .booking-section) {
  --vd-card-pad: 40px;
  width: calc(100% - 112px + var(--vd-card-pad) * 2);
  max-width: calc(1328px + var(--vd-card-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--vd-card-pad);
}

@media (max-width: 1100px) {
  :root:root:root .interior-depth :is(.services-catalog, .booking-section) {
    --vd-card-pad: 24px;
    width: calc(100% - 72px + var(--vd-card-pad) * 2);
  }
}

@media (max-width: 700px) {
  :root:root:root .interior-depth :is(.services-catalog, .booking-section) {
    --vd-card-pad: 16px;
    width: calc(100% - 44px + var(--vd-card-pad) * 2);
  }
}

/* ---------------------------------------------------------------------------
   29. Cierre del carrusel de opiniones
   Con solo tres resenas publicadas, la cinta parecia decir "hay tres". Esta
   pieza cierra cada vuelta con la nota media y el total real, y lleva a la
   ficha de Google. Es la unica tarjeta oscura de la cinta, asi que marca el
   final del ciclo y la repeticion se lee como un bucle, no como una carencia.
   --------------------------------------------------------------------------- */
:root:root:root .vd-review-all {
  justify-content: center;
  background: linear-gradient(158deg, #1b3648, var(--ink) 62%, #102532);
  border-color: rgb(216 194 161 / .45);
  color: var(--background);
  box-shadow: 0 20px 44px -26px rgb(20 44 59 / .7);
}

:root:root:root .vd-review-all .eyebrow { color: var(--champagne); }

:root:root:root .vd-review-all-score {
  margin: 18px 0 0;
  font-family: var(--font-serif);
  font-size: 4.6rem;
  line-height: .95;
  letter-spacing: -.05em;
  color: #fff;
}

:root:root:root .vd-review-all-score > span {
  margin-left: 10px;
  font-family: var(--font-sans);
  font-size: .8125rem;
  letter-spacing: 0;
  color: rgb(216 194 161 / .85);
}

:root:root:root .vd-review-all-count {
  margin: 18px 0 0;
  max-width: 24ch;
  color: #c9d2d7;
  font-size: .9375rem;
  line-height: 1.7;
}

:root:root:root .vd-review-all-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 26px;
  color: var(--champagne);
  font-size: .8125rem;
}

:root:root:root .vd-review-all-cta::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: width .3s var(--vd-ease);
}

:root:root:root .vd-review-all:is(:hover, :focus-visible) {
  border-color: var(--champagne);
  box-shadow: 0 30px 56px -26px rgb(20 44 59 / .75);
}

:root:root:root .vd-review-all:is(:hover, :focus-visible) .vd-review-all-cta::after {
  width: 40px;
}

@media (max-width: 767px) {
  :root:root:root .vd-review-all-score { font-size: 3.6rem; }
}

/* ---------------------------------------------------------------------------
   30. Segunda capa de movimiento
   Mas presencia al recorrer y al pasar el raton, pero repartida: cada gesto
   ocupa un sitio distinto y ninguno se aplica a todo por igual.
   --------------------------------------------------------------------------- */

/* 30.a Paso por pantalla. Las tarjetas crecen un punto al cruzar el centro y
   se relajan al salir. Es escala pura, va al compositor, y funciona igual con
   raton que con el dedo: en movil es lo que da vida sin depender del hover. */
@keyframes vd-pass {
  0%   { scale: .955; }
  50%  { scale: 1; }
  100% { scale: .975; }
}

/* 30.b Los titulares grandes se despiden con una deriva corta hacia arriba. */
@keyframes vd-drift-out {
  0%, 62% { translate: 0 0; opacity: 1; }
  100%    { translate: 0 -26px; opacity: .35; }
}

/* 30.c Filetes que se dibujan en lugar de estar puestos.
   La linea se lleva a un pseudoelemento y se anima ese: recortar el bloque
   entero escondia su contenido -en un articulo largo, el texto se quedaba
   invisible durante cientos de pixeles de scroll-. */
@keyframes vd-hairline {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

:root:root:root .home-depth .home-service-note,
:root:root:root .interior-depth .treatment-navigation,
:root:root:root .vd-post-body {
  position: relative;
  border-top-color: transparent;
}

:root:root:root .home-depth .home-service-note::before,
:root:root:root .interior-depth .treatment-navigation::before,
:root:root:root .vd-post-body::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
  transform-origin: 0 50%;
  pointer-events: none;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Se suma a la entrada que ya tienen, sin sustituirla. */
    :root:root:root .vd-post-card {
      animation-name: vd-card-in, vd-pass;
      animation-duration: auto, auto;
      animation-timing-function: var(--vd-ease), linear;
      animation-fill-mode: both, both;
      animation-timeline: view(), view();
      animation-range: entry 6% cover 22%, cover;
      animation-composition: replace, add;
    }

    /* El pie de pagina deja de estar completamente quieto: entra escalonado. */
    :root:root:root .footer-grid > * {
      animation-name: vd-copy-in;
      animation-duration: auto;
      animation-timing-function: var(--vd-ease);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 4% entry 88%;
    }
    :root:root:root .footer-grid > :nth-child(2) { animation-range: entry 10% entry 96%; }
    :root:root:root .footer-grid > :nth-child(3) { animation-range: entry 16% cover 4%; }
    :root:root:root .footer-grid > :nth-child(4) { animation-range: entry 22% cover 10%; }

    /* Filetes horizontales de las secciones: se dibujan de izquierda a derecha. */
    :root:root:root .home-depth .home-service-note::before,
    :root:root:root .interior-depth .treatment-navigation::before,
    :root:root:root .vd-post-body::before {
      animation-name: vd-hairline;
      animation-duration: auto;
      animation-timing-function: var(--vd-ease);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 10% cover 20%;
    }

    /* Los numeros de la seccion oscura se descubren como los antetitulos. */
    :root:root:root .home-depth .prevention-copy span {
      animation-name: vd-eyebrow-in;
      animation-duration: auto;
      animation-timing-function: var(--vd-ease);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 14% cover 26%;
    }

    /* Despedida del hero: la columna de texto se va antes que la fotografia,
       que ya lleva su propio recorrido. Refuerza la sensacion de capas. */
    @media (min-width: 768px) {
      :root:root:root .home-depth .hero-copy {
        animation-name: vd-drift-out;
        animation-duration: auto;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: view();
        animation-range: exit-crossing 0% exit 100%;
      }
    }
  }
}

/* 30.d Relieve al pasar el raton en las piezas que aun no lo tenian. */
@media (hover: hover) and (pointer: fine) {
  :root:root:root .vd-post-card,
  :root:root:root .review-card {
    --vd-mx: 50%;
    --vd-my: 50%;
  }

  :root:root:root .vd-post-card::before,
  :root:root:root .review-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(280px circle at var(--vd-mx) var(--vd-my), rgb(216 194 161 / .22), transparent 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
  }

  :root:root:root .vd-post-card:hover::before,
  :root:root:root .review-card:hover::before { opacity: 1; }

  :root:root:root .vd-review-all::before {
    background: radial-gradient(300px circle at var(--vd-mx) var(--vd-my), rgb(216 194 161 / .16), transparent 72%);
  }

  /* Las filas de la lista de alcance responden al cursor. */
  :root:root:root .treatment-scope li {
    transition: translate .3s var(--vd-ease), color .3s ease;
  }
  :root:root:root .treatment-scope li:hover {
    translate: 5px 0;
    color: var(--ink);
  }

  :root:root:root .breadcrumb a { transition: color .25s ease; }
  :root:root:root .breadcrumb a:hover { color: var(--bronze); }
}

/* 30.e Tactil: sin hover, el relieve lo da la pulsacion y el paso por pantalla. */
@media (hover: none), (pointer: coarse) {
  :root:root:root .vd-post-card,
  :root:root:root .review-card,
  :root:root:root .vd-post-next a,
  :root:root:root .text-link {
    transition: scale .18s var(--vd-ease), border-color .3s ease;
  }
  :root:root:root .vd-post-card:active,
  :root:root:root .review-card:active { scale: .985; }
  :root:root:root .vd-post-next a:active,
  :root:root:root .text-link:active { scale: .96; }
}

@media (prefers-reduced-motion: reduce) {
  :root:root:root .vd-post-card,
  :root:root:root .footer-grid > *,
  :root:root:root .home-depth .home-service-note::before,
  :root:root:root .interior-depth .treatment-navigation::before,
  :root:root:root .vd-post-body::before,
  :root:root:root .home-depth .prevention-copy span,
  :root:root:root .home-depth .hero-copy {
    animation-name: none;
    clip-path: none;
    translate: none;
    scale: none;
    opacity: 1;
  }
  :root:root:root .vd-post-card::before,
  :root:root:root .review-card::before { display: none; }
  :root:root:root .treatment-scope li { transition: none; }
}

/* 30.f Tactil: la fotografia de cada tarjeta de servicio respira al pasar por
   pantalla. Se anima el contenedor y no la imagen, porque el bundle bloquea la
   animacion de esta con !important; y se deja la tarjeta libre para que su
   hundido al pulsar siga funcionando. */
@supports (animation-timeline: view()) {
  @media (hover: none) and (prefers-reduced-motion: no-preference) {
    :root:root:root .service-card-photo {
      animation-name: vd-pass;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}