@import url(fonts.css);
/* ==========================================================================
   RVD Médica — Maqueta Home
   Identidad visual sobre Bootstrap 5. Mobile-first.
   Bootstrap resuelve grid, breakpoints, offcanvas y utilidades;
   este archivo solo aporta color, tipografía y las composiciones propias.
   ========================================================================== */

:root {
  /* Paleta muestreada del layout de referencia */
  --rvd-cream:      #F2F0EA;
  --rvd-hcontrast:  #fcfbf9;
  --rvd-ink:        #282828;
  --rvd-black:      #0D0D0D;
  --rvd-taupe:      #A29C8E;
  --rvd-text:       #2B2B2B;
  --rvd-muted:      #6B6459;
  --rvd-rule:       rgba(43, 43, 43, .22);
  --rvd-rule-light: rgba(242, 240, 234, .50);

  /* Tratamiento fotográfico de las bandas (deriva del layout) */
  --rvd-media-filter: saturate(.75);
  --rvd-veil:         rgba(38, 36, 33, .22);
  --rvd-veil-darker:  rgba(12, 11, 10, 0.5);

  --rvd-display: 'Alta', 'Times New Roman', serif;
  --rvd-body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --rvd-header-h: 72px;
}

/* ===========================  Base  =========================== */

body {
  background-color: var(--rvd-cream);
  color: var(--rvd-text);
  font-family: var(--rvd-body);
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  font-weight: normal;
  line-height: 1.1;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

::selection { background: var(--rvd-taupe); color: var(--rvd-cream); }

:focus-visible {
  outline: 2px solid var(--rvd-taupe);
  outline-offset: 3px;
}

.rvd-skip {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 1080;
  background: var(--rvd-ink);
  color: var(--rvd-cream);
  padding: .75rem 1.25rem;
  text-decoration: none;
}

/* Ancho de contenido del layout de referencia (1146 px sobre 1470).
   Este max-width pisa el de `.container` en todos los breakpoints, así que el
   contenedor deja de estar limitado a los 960 px de Bootstrap entre 992 y
   1180 px y ocupa el ancho disponible. En ese tramo el padding de 12 px que
   trae `.container` (medio gutter por defecto) ya no alcanza para absorber el
   margen negativo de -24 px de las filas `g-lg-5`, y se desbordan 12 px por
   lado. Igualamos el padding al medio gutter que realmente se usa. */
.rvd-container--narrow { max-width: 1180px; }
.rvd-container--narrow .rvd-grid-copy { padding: 0 10vw; }
.rvd-container--narrow .rvd-grid-copy .rvd-prose,
.rvd-container--narrow .rvd-grid-copy dd { font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height:  1.2; }

@media (min-width: 576px) {
  .rvd-container--narrow .rvd-grid-copy { padding: 0 25vw; }
}

@media (min-width: 992px) {
  .rvd-container--narrow { padding-inline: 1.5rem; }
  .rvd-container--narrow .rvd-grid-copy { padding: 0 4vw; }
}

.rvd-section { padding-block: clamp(3.5rem, 5vw, 7.5rem); }

/* Los anclas no deben quedar bajo el header fijo */
[id] { scroll-margin-top: calc(var(--rvd-header-h) + 1rem); }

/* ===========================  Tipografía  =========================== */

.rvd-title {
  font-family: var(--rvd-display);
  font-weight: bold;
  font-size: clamp(1.85rem, 4.4vw, 2.6rem);
  line-height: clamp(1.85rem, 4.4vw, 2.6rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--rvd-ink);
  margin-bottom: 1rem;
}

.rvd-title--center {
  text-align: center;
  font-size: clamp(1.75rem, 4.6vw, 3.1rem);
}

.rvd-eyebrow {
  font-family: var(--rvd-body);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.rvd-eyebrow--dark  { color: var(--rvd-ink); }
.rvd-eyebrow--muted { color: var(--rvd-muted); }
.rvd-eyebrow--light { color: var(--rvd-cream); }

.rvd-prose { max-width: 46ch; margin-bottom: 2rem; }
.rvd-prose p { font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height:  1.2; font-weight: normal; }
.rvd-prose p:last-child { margin-bottom: 0; }

/* ===========================  Botones y enlaces  =========================== */

.rvd-btn {
  display: inline-block;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 0.7rem 1.5rem;
  border: 1px solid transparent;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.rvd-btn--ink     { background: var(--rvd-ink);   color: var(--rvd-cream); }
.rvd-btn--taupe   { background: var(--rvd-taupe); color: var(--rvd-cream); }
.rvd-btn--solid   { background: var(--rvd-cream); color: var(--rvd-ink); }
.rvd-btn--outline { background: transparent; color: var(--rvd-muted); border-color: var(--rvd-taupe); }

.rvd-btn--ink:hover,
.rvd-btn--ink:focus-visible     { background: var(--rvd-taupe); color: var(--rvd-cream); }
.rvd-btn--taupe:hover,
.rvd-btn--taupe:focus-visible   { background: var(--rvd-ink);   color: var(--rvd-cream); }
.rvd-btn--solid:hover,
.rvd-btn--solid:focus-visible   { background: var(--rvd-taupe); color: var(--rvd-cream); }
.rvd-btn--outline:hover,
.rvd-btn--outline:focus-visible { background: var(--rvd-taupe); color: var(--rvd-cream); border-color: var(--rvd-taupe); }

@media (max-width: 991.98px) {
.rvd-btn--outline { background: var(--rvd-taupe); color: var(--rvd-cream); border-color: unset; }
.rvd-btn--outline:hover,
.rvd-btn--outline:focus-visible { background: var(--rvd-ink);   color: var(--rvd-cream); border-color: unset; }
}

.rvd-link {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: 44px;
  font-size: clamp(1.2rem, 1.3vw, 1.2rem);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rvd-taupe);
  transition: color .3s ease;
}
.rvd-link.light-variant { color: var(--rvd-cream); }

.rvd-link:hover,
.rvd-link:focus-visible { color: var(--rvd-ink); }

.rvd-link__arrow {
  display: inline-block;
  width: 34px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: transform .3s ease;
}

.rvd-link__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.rvd-link:hover .rvd-link__arrow { transform: translateX(6px); }

/* ===========================  Header  =========================== */

.rvd-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  background: transparent;
  transition: background-color .35s ease, padding .35s ease;
  padding-block: 1rem;
}

.rvd-header.is-scrolled {
  background: var(--rvd-ink);
  padding-block: .625rem;
}

.rvd-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1400px;
}

.rvd-header__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.rvd-header__brand img {
  width: clamp(120px, 15vw, 210px);
  height: auto;
  display: block;
}

.rvd-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.75rem);
}

.rvd-header__phone {
  display: none;
  color: var(--rvd-cream);
  font-size: .8125rem;
  letter-spacing: .12em;
  text-decoration: none;
}

.rvd-header__phone:hover,
.rvd-header__phone:focus-visible { color: var(--rvd-taupe); }

.rvd-header__menu {
  display: inline-flex;
  align-items: center;
  gap: .875rem;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--rvd-cream);
}

.rvd-header__menu-label {
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.rvd-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 30px;
}

.rvd-burger span {
  display: block;
  height: 1px;
  background: currentColor;
}

@media (min-width: 768px) {
  .rvd-header__phone { display: inline-block; }
}

/* ===========================  Offcanvas  =========================== */

.rvd-offcanvas {
  background: var(--rvd-ink);
  color: var(--rvd-cream);
  width: min(420px, 88vw);
}

.rvd-offcanvas .offcanvas-header { padding: 1.75rem 1.75rem 1rem; }
.rvd-offcanvas .offcanvas-body   { padding: 0 1.75rem 2.5rem; }
.rvd-offcanvas .offcanvas-title  { margin-bottom: 0; color: var(--rvd-taupe); }

.rvd-offcanvas__nav { margin: 0; }

.rvd-offcanvas__nav a {
  display: block;
  padding: .875rem 0;
  border-bottom: 1px solid var(--rvd-rule-light);
  font-family: var(--rvd-display);
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--rvd-cream);
  text-decoration: none;
  transition: color .3s ease, padding-left .3s ease;
}

.rvd-offcanvas__nav a:hover,
.rvd-offcanvas__nav a:focus-visible { color: var(--rvd-taupe); padding-left: .5rem; }

.rvd-offcanvas__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 1.5rem;
  font-size: .8125rem;
  letter-spacing: .12em;
  color: var(--rvd-taupe);
  text-decoration: none;
}

.rvd-offcanvas__phone:hover,
.rvd-offcanvas__phone:focus-visible { color: var(--rvd-cream); }

@media (min-width: 768px) {
  .rvd-offcanvas__phone { display: none; }
}

/* ===========================  Hero  =========================== */

.rvd-hero {
  position: relative;
  /* En móvil se reduce la altura para que el encuadre horizontal de la
     fotografía siga siendo legible; en desktop ocupa la pantalla completa. */
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

@media (min-width: 768px) {
  .rvd-hero { min-height: 100svh; }
}

.rvd-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: var(--rvd-media-filter);
}

.rvd-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(13, 13, 13, .35) 0%, rgba(13, 13, 13, 0) 20%),
    linear-gradient(to top, rgba(13, 13, 13, .45) 0%, rgba(13, 13, 13, 0) 20%),
    var(--rvd-veil-darker);
}

@media(min-width: 992px){
  .rvd-hero__veil {
    background:
      linear-gradient(to bottom, rgba(13, 13, 13, .35) 0%, rgba(13, 13, 13, 0) 20%),
      linear-gradient(to top, rgba(13, 13, 13, .45) 0%, rgba(13, 13, 13, 0) 20%),
      var(--rvd-veil);
  }
}

.rvd-hero__content {
  position: relative;
  text-align: center;
  color: var(--rvd-cream);
  padding-bottom: clamp(3.5rem, 12vh, 7rem);
}

.rvd-hero__content.left_variant1 { padding-bottom: clamp(3.5rem, 10vh, 15rem); }
.rvd-hero__content.left_variant2 {  padding-bottom: clamp(3.5rem, 5vh, 5rem); }

@media (min-width: 576px) {
  .rvd-hero__content.left_variant1 { padding-bottom: clamp(3.5rem, 40vh, 15rem); }
  .rvd-hero__content.left_variant2 { padding-bottom: clamp(3.5rem, 15vh, 10rem); }
}

.rvd-hero__title {
  font-family: var(--rvd-display);
  font-weight: bold;
  font-size: clamp(2.25rem, 6.6vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: .015em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.rvd-hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: normal;
  margin-bottom: 2.25rem;
}

/* Variantes de hero para las páginas interiores (about-doctor y siguientes).
   El hero interior alinea el contenido a la izquierda y sustituye el subtítulo
   por una línea corta en versales espaciadas. En móvil se mantiene centrado,
   porque a ancho reducido la alineación izquierda desequilibra el encuadre. */
@media (min-width: 768px) {
  .rvd-hero--start .rvd-hero__content { text-align: left; }
}

.rvd-hero__eyebrow {
  font-weight: 500;
  font-size: clamp(1.2rem, 1.4vw, 1.4rem);
  line-height: 1.6;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 2.25rem;
}

/* Variante del eyebrow cuando antecede al título (Toxina Botulínica) en vez
   de sucederlo (about-doctor): el hueco que necesita es hacia el título, no
   hacia el botón, y es mucho más corto. */
.rvd-hero__eyebrow--lead { margin-bottom: .75rem; }

/* Cuerpo de dos párrafos dentro del hero, para páginas de tratamiento cuya
   presentación no cabe en el subtítulo de una sola línea. */
.rvd-hero__body { max-width: 46ch; margin-bottom: 2.25rem; }

.rvd-hero__body p {
  font-size: clamp(.875rem, 1.4vw, 1.125rem);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.rvd-hero__body p:last-child { margin-bottom: 0; }

/* ===========================  Doctor  =========================== */

.rvd-doctor__portrait { width: 90%; display: block; margin: 0 auto; }

.rvd-doctor__sign {
  display: block;
  width: clamp(150px, 40%, 200px);
  height: auto;
  margin: 1.5rem 0 1rem;
}

.rvd-doctor__body { padding: 0 10%; }

.rvd-doctor__cta {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

@media (min-width: 576px) {
  .rvd-doctor__portrait { width: 70%; display: block; }
  .rvd-doctor__body { padding: 0 20%; }
}

@media (min-width: 992px) {
  .rvd-doctor__portrait { width: 100%; display: block; }
  .rvd-doctor__body { padding-left: 3.5rem; padding-right: 5%; }
  .rvd-doctor__cta  { justify-content: flex-end; margin-top: 3.5rem; }
}

/* ===========================  Bandas fotográficas  =========================== */

.rvd-band {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(220px, 34vw, 342px);
  overflow: hidden;
}

.rvd-band__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--rvd-media-filter);
}

.rvd-band__veil {
  position: absolute;
  inset: 0;
  background: var(--rvd-veil);
}

.rvd-band__content {
  position: relative;
  text-align: center;
  color: var(--rvd-cream);
  padding-block: 2.5rem;
}

.rvd-band__title {
  font-family: var(--rvd-display);
  font-weight: bold;
  font-size: clamp(2rem, 5.6vw, 3.7rem);
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 0;
}

.rvd-band__subtitle {
  margin: 1rem auto 0;
  max-width: 80vw;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.7;
}

/* ===========================  Tratamientos  =========================== */

.rvd-treatment { position: relative; }
.rvd-treatment__inner { position: relative; z-index: 2; }

.rvd-treatment__media {
  width: 100%;
  display: block;
}

@media (max-width: 991.98px) {
  .rvd-treatment__media { width: 60%; display: block; margin: 0 auto; }
}
@media (max-width: 575.98px) {
  .rvd-treatment__media { width: 90%; display: block; margin: 0 auto; }
}

/* Panel oscuro desplazado. La textura se aplica en cuanto exista el archivo;
   mientras tanto queda el color sólido de respaldo.
   PENDIENTE: img/home/home-textura-oscura.jpg */
.rvd-treatment__panel {
  display: block;
  position: absolute;
  z-index: 1;
  background-color: var(--rvd-black);
  background-image: url('../img/home/home-textura-oscura.jpg');
  /* La textura lleva el degradado vertical horneado (oscurece arriba y abajo,
     igual que la referencia). Con `cover` el recorte se come justo esas bandas
     en cuanto el bloque es más apaisado que la textura (1.777): a 1920 px el
     panel perdía el 7% y la cita el 57%. `100% 100%` fija el degradado al alto
     real del bloque a cualquier ancho, a cambio de estirar algo las diagonales. */
  background-size: cover;
  background-position: center;
}

.rvd-treatment--panel-right .rvd-treatment__panel {
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0;
}
.rvd-treatment--panel-right .rvd-title,
.rvd-treatment--panel-right .rvd-prose,
.rvd-treatment--panel-right .rvd-features dd,
.rvd-treatment--panel-right .rvd-features dt { color: var(--rvd-cream); }
.rvd-treatment--panel-right .rvd-features__item { border-left-color: var(--rvd-rule-light); }
.rvd-treatment--panel-right .rvd-features__item + .rvd-features__item { border-top-color: var(--rvd-rule-light); }

/* Variante A — panel sangrando a la derecha (Toxina, Dermopigmentación) */
@media (min-width: 992px) {
  .rvd-treatment--panel-right .rvd-treatment__panel {
    display: block;
    top: 5%;
    bottom: 5%;
    left: 62%;
    right: 0;
  }
.rvd-treatment--panel-right .rvd-title,
.rvd-treatment--panel-right .rvd-prose,
.rvd-treatment--panel-right .rvd-features dd,
.rvd-treatment--panel-right .rvd-features dt { color: var(--rvd-ink); }
.rvd-treatment--panel-right .rvd-features__item { border-left-color: var(--rvd-rule); }
.rvd-treatment--panel-right .rvd-features__item + .rvd-features__item { border-top-color: var(--rvd-rule); }
}

/* Variante C — panel sangrando a la izquierda, con el texto en cream fuera
   del panel (página Toxina Botulínica). Espejo de la variante A: ahí el
   panel ocupa el 38% derecho, aquí el 39.86% izquierdo, medido en su propia
   referencia (layout-img/3.ToxinaBotulinica-desktop.png). A diferencia de la
   variante B (`--dark`), el panel no cubre toda la sección: el texto se lee
   sobre crema, no sobre la textura oscura. */
@media (min-width: 992px) {
  .rvd-treatment--panel-left .rvd-treatment__panel {
    display: block;
    top: 12%;
    bottom: 12%;
    left: 0%;
    right: 60.14%;
  }
}

/* Variante B — panel sangrando a la izquierda (Calidad de Piel).
   En móvil, con las columnas apiladas, la sección entera es oscura. */
.rvd-treatment--dark {
  background-color: var(--rvd-black);
  background-image: url('../img/home/home-textura-oscura.jpg');
  /* Aquí sí `cover`: este fondo solo se ve por debajo de 992 px, donde la
     sección es muy alta y estrecha y estirar la textura dejaría las diagonales
     casi verticales. */
  background-size: cover;
  background-position: center;
  color: var(--rvd-cream);
}

.rvd-treatment--dark .rvd-title,
.rvd-treatment--dark .rvd-features dt { color: var(--rvd-cream); }
.rvd-treatment--dark .rvd-features__item { border-left-color: var(--rvd-rule-light); }
.rvd-treatment--dark .rvd-features__item + .rvd-features__item { border-top-color: var(--rvd-rule-light); }

@media (min-width: 992px) {
  /* Desde lg el oscuro deja de cubrir la fila entera: en la referencia llega
     al 73.07% del viewport (1074 de 1470 px) sangrando por la izquierda, y la
     fotografía monta ese borde y lo rebasa. Verticalmente el panel coincide
     con la caja de la sección, así que la foto queda contenida. */
  .rvd-treatment--dark {
    background: none;
  }

  .rvd-treatment--dark .rvd-treatment__panel {
    display: block;
    inset: 0 26.93% 0 0;
  }
}

/* Lista de características */
.rvd-features {
  padding-left: 1rem;
  margin-bottom: 2rem;
  max-width: 48ch;
}

.rvd-features__item { padding-block: 1rem; border-left: 1px solid var(--rvd-rule); }
.rvd-features__item:first-child { padding-top: 0; }
.rvd-features__item:last-child  { padding-bottom: 0; }
.rvd-features__item + .rvd-features__item { border-top: 1px solid var(--rvd-rule); }

.rvd-features dt {
  margin: 0 0 0 1rem;
  font-family: var(--rvd-display);
  font-weight: bold;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rvd-ink);
  margin-bottom: .25rem;
}

.rvd-features dd {
  margin: 0 0 0 2rem;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  line-height:  clamp(1rem, 1.2vw, 1.5rem); 
  line-height: 1.65;
}

/* ===========================  Tratamientos corporales  =========================== */

.rvd-body-care__grid { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* En este estilo no se está aplicando una lógica MOBILE-FIRST porque
   se prioriza el estilo de boostrap en pantallas grandes y sólo se aplica
   el estilo personalizado en pantallas pequeñas. */
@media (max-width: 991.98px) {
  .rvd-body-care__grid .col { margin-top: 0; padding: 0 20%; }
  .rvd-body-care__grid .col:last-child .rvd-body-care__item { border-top: 1px solid var(--rvd-rule); }
}
@media (max-width: 575.98px) {
  .rvd-body-care__grid .col { padding: 0 10%; }
}

.rvd-body-care__media {
  display: block;
  width: 100%;
  max-width: 568px;
  margin-inline: auto;
  margin-bottom: 1rem;
  border-radius: 190px;
}

@media (min-width: 992px) {
  .rvd-body-care__media { margin-bottom: 0; }
}

.rvd-body-care__item {
  text-align: center;
  padding-block: 1.25rem;
  margin: 0;
  display: grid;
  place-content: center;
}

.rvd-body-care__item + .rvd-body-care__item { border-top: 1px solid var(--rvd-rule); }

.rvd-body-care__item dt {
  font-family: var(--rvd-display);
  font-weight: bold;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rvd-ink);
  margin-bottom: .5rem;
}

.rvd-body-care__item dd {
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  line-height: 1.2;
}

.rvd-body-care__foot {
  margin-top: clamp(2rem, 5vw, 3rem);
  text-align: center;
}

.rvd-body-care__foot .rvd-prose {
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 4rem;
  font-weight: 500;
}

@media (min-width: 992px) {
  .rvd-body-care__item { padding-block: 2rem; }

  /* Las fichas laterales forman dos filas que deben coincidir entre la columna
     izquierda y la derecha. Flexbox no comparte alturas entre columnas
     hermanas, así que se les da una altura de fila común: mientras el texto
     quepa en `--rvd-body-care-row`, las cuatro fichas miden lo mismo y tanto
     los títulos como los separadores quedan a la misma altura en cualquier
     ancho ≥ 992 px. El caso más ajustado es 992 px (columnas más estrechas,
     el texto ocupa más líneas): ahí la ficha más alta mide 195 px. Si en el
     futuro un texto crece, sube este valor. */
  .rvd-body-care__grid { --rvd-body-care-row: 13rem; }

  .rvd-body-care__grid > .col-lg-3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .rvd-body-care__grid > .col-lg-3 .rvd-body-care__item {
    min-height: var(--rvd-body-care-row);
    padding-inline: 0.5rem;
  }

  /* La imagen se centra frente al par de fichas */
  .rvd-body-care__grid > .col-lg-6 {
    display: flex;
    align-items: center;
  }

  .rvd-body-care__item:first-child { place-content: end; border-top: none; }
  .rvd-body-care__item:last-child { place-content: start; border-bottom: none; }

  .rvd-body-care__foot .rvd-prose {
    max-width: 52ch;
    margin-inline: auto;
    margin-bottom: 1rem;
  }
}


/* ===========================  Tecnología  =========================== */

.rvd-tech {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
  color: var(--rvd-cream);
}

.rvd-tech__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% center;
  filter: var(--rvd-media-filter);
}

.rvd-tech__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(13, 13, 13, .8) 0%, rgba(13, 13, 13, .82) 55%, rgba(13, 13, 13, 1) 100%);
}

.rvd-tech__inner { position: relative; padding: 0 10% }

.rvd-tech .rvd-title,
.rvd-tech .rvd-features dt { color: var(--rvd-cream); }
.rvd-tech .rvd-features__item { padding-block: 1rem; border-left: 1px solid var(--rvd-rule-light); }
.rvd-tech .rvd-features__item + .rvd-features__item { border-top-color: var(--rvd-rule-light); }

@media (min-width: 576px) {
  .rvd-tech__inner { padding: 0 10%; }
}

@media (min-width: 992px) {
  .rvd-tech__veil {
    background: linear-gradient(to right, rgba(13, 13, 13, .4) 0%, rgba(13, 13, 13, .50) 38%, rgba(13, 13, 13, .86) 70%, rgba(13, 13, 13, .92) 100%);
  }
  .rvd-tech__inner { margin: 0 auto; padding: 0 calc(var(--bs-gutter-x) * .5); }
}

/* ===========================  Valoración  =========================== */

.rvd-note {
  padding-left: 1.5rem;
  margin-bottom: 2.25rem;
  max-width: 48ch;
}

.rvd-note p {
  margin-bottom: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  line-height: 1.7;
  padding: 1rem 0 1rem 0.7rem;
  border-left: 1px solid var(--rvd-rule);
}

.rvd-hero__content.left_variant2 .rvd-note p {
  padding: .5rem 0 .5rem 0.7rem;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 500;
  line-height: 1.2;
  border-left: 1px solid var(--rvd-cream);
}

/* ===========================  Nuestro espacio  =========================== */

.rvd-space { padding-top: 1rem; }

.rvd-space__title {
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  font-weight: 400;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

@media (max-width: 991.98px) {
  .rvd-space__gallery {
    margin-bottom: 4rem;
  }
}

@media (max-width: 575.98px) {
  .rvd-space__gallery {
    margin-bottom: 2rem;
  }
}

.rvd-space__gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ===========================  Cita  =========================== */

.rvd-quote {
  background-color: var(--rvd-black);
  background-image: url('../img/home/home-textura-oscura.jpg');
  background-size: cover;
  background-position: center;
  color: var(--rvd-cream);
  padding-block: clamp(4rem, 11vw, 8rem);
  text-align: center;
}


/* En desktop la galería se solapa sobre esta sección, igual que en la
   referencia. En móvil las fichas se apilan y el solape estorbaría. */
@media (min-width: 992px) {
  .rvd-quote {
    margin-top: -6rem;
    padding-top: clamp(6rem, 14vw, 10rem);
  }
}
@media (min-width: 1200px) {
  .rvd-quote {
    margin-top: -7rem;
    padding-top: clamp(6rem, 14vw, 20rem);
  }
}

.rvd-quote figure { margin: 0; }

.rvd-quote blockquote p {
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 300;
  line-height: 1.2;
  max-width: 44ch;
  margin: 0 auto 2rem;
}

.rvd-quote figcaption {
  font-family: var(--rvd-display);
  font-size: clamp(1rem, 2vw, 1.7rem);
  font-weight: bold;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ===========================  Banda de cierre  =========================== */

/* Franja oscura con titular + botón, usada al cierre de las páginas internas
   (about-doctor, Toxina Botulínica y las que sigan). Antes vivía como
   `.rvd-about-cta` exclusiva de about-doctor; se promovió a compartida en
   cuanto una segunda página necesitó exactamente el mismo patrón. */
.rvd-cta-band {
  background-color: var(--rvd-black);
  background-image: url('../img/home/home-textura-oscura.jpg');
  background-size: cover;
  background-position: center;
  color: var(--rvd-cream);
  padding-block: clamp(2.5rem, 4.4vw, 4rem);
  text-align: center;
}

/* Igual que en `.rvd-quote`: esta franja es muy apaisada en desktop y `cover`
   recortaría el degradado que la textura trae horneado. */
@media (min-width: 992px) {
  .rvd-cta-band { background-size: 100% 100%; }
}

.rvd-cta-band__title {
  font-family: var(--rvd-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 2.7vw, 2.3rem);
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
  max-width: 70vw;
  margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
}

/* ===========================  Footer  =========================== */

.rvd-footer {
  background: var(--rvd-ink);
  color: rgba(242, 240, 234, .82);
  font-size: clamp(1rem, 1.1vw, 1.2rem);
}

.rvd-footer .container { padding-block: clamp(3rem, 7vw, 5rem); }
.rvd-footer .rvd-container--narrow { max-width: 65%; }

@media (max-width: 991.98px) {
  .rvd-footer .rvd-container--narrow { max-width: 80%; }
}

.rvd-footer__logo {
  width: clamp(120px, 15vw, 210px);
  height: auto;
  display: block;
  margin-bottom: 1.5rem;
}

.rvd-footer__tagline { max-width: 34ch; margin-bottom: 1.5rem; color: var(--rvd-hcontrast); }

.rvd-footer__legal {
  line-height: 1.2;
  margin-bottom: 1.5rem;
  font-style: normal;
}

.rvd-footer .rvd-eyebrow {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: clamp(0.825rem, 1vw, 1rem);
  color: var(--rvd-hcontrast);
}

.rvd-footer__nav a {
  display: inline-flex;
  align-items: center;
  padding-block: 0.5rem;
  color: var(--rvd-hcontrast);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .3s ease;
}

.rvd-footer__nav a:hover,
.rvd-footer__nav a:focus-visible { color: var(--rvd-taupe); }

.rvd-footer__bar {
  border-top: 1px solid var(--rvd-rule-light);
  text-align: center;
  padding-block: 1.5rem;
}

.rvd-footer__bar p { margin: 0; font-size: .75rem; color: var(--rvd-hcontrast); }

/* ==========================================================================
   PÁGINA ABOUT-DOCTOR
   Componentes exclusivos de `about-doctor.html`. Header, footer, offcanvas,
   contenedores, botones, `.rvd-note` y `.rvd-title` se reutilizan del home;
   las variantes de hero viven en el bloque «Hero» de arriba.
   Medidas deducidas de layout-img/2.Doctor-desktop.png (3063 × 8766 px sobre
   un viewport de diseño de 1470 × 832 px, factor 2.0837). Tramos verticales
   de la referencia, en px CSS:
     hero      0 ..  832      perfil     832 .. 1599
     enfoque 1599 .. 2299     formación 2299 .. 3334
     cierre  3334 .. 3652     footer    3652 .. 4207
   ========================================================================== */

:root {
  /* Color de las reglas y viñetas de Formación, muestreado del layout.
     Es sensiblemente más oscuro que `--rvd-rule`, que sobre crema compone
     en torno a #C6C4BE. */
  --rvd-track-rule: #989181;
}

/* ---------------------------  Perfil  --------------------------- */

.rvd-about-profile__portrait {
  display: block;
  width: 90%;
  margin: 0 auto;
  /* Reserva la caja con la proporción de la referencia (599 × 490), para que
     el alto de la sección sea estable aunque el archivo aún no exista. */
  aspect-ratio: 599 / 711;
  object-fit: cover;
}

.rvd-about-profile__copy { padding: 0 10%; margin-top: 3rem; line-height: 1.2; }

@media (min-width: 576px) {
  .rvd-about-profile__portrait { width: 70%; }
  .rvd-about-profile__copy { padding: 0 20%; }
}

/* La fila usa `g-lg-0` porque en la referencia el retrato mide 599 px, y con
   el gutter por defecto la columna solo daría 532. Sin gutter la mitad del
   contenedor son 590 px, y la separación con el texto la aporta el inset de
   la columna de copia: el párrafo arranca en 827 px y mide 485. */
@media (min-width: 992px) {
  /* La referencia deja 121 px arriba y 157 abajo en esta sección, más que el
     padding compartido de `.rvd-section`. */
  .rvd-about-profile { padding-block: 7.5rem 9.8rem; }

  .rvd-about-profile__portrait { width: 100%; }

  .rvd-about-profile__copy { padding: 0 0 0 5.75rem; }

  .rvd-about-profile__copy .rvd-prose,
  .rvd-about-profile__copy .rvd-note p {
    max-width: 485px;
    font-weight: 500;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    line-height: 1.3;
    text-align: justify;
  }
}

/* ---------------------------  Enfoque  --------------------------- */

.rvd-about-approach {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  color: var(--rvd-cream);
  text-align: center;
}

.rvd-about-approach__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: var(--rvd-media-filter);
}

/* La referencia oscurece mucho esta fotografía para que el texto en versales
   ligeras se sostenga encima; de ahí un velo más cerrado que el del hero. */
.rvd-about-approach__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(13, 13, 13, .92) 0%, rgba(13, 13, 13, .74) 45%, rgba(13, 13, 13, .92) 100%);
}

.rvd-about-approach__inner { position: relative; padding: 0 10%; }

@media (min-width: 576px) {
  .rvd-about-approach__inner { padding: 0 20%; }
}

@media (min-width: 992px) {
  .rvd-about-approach__inner { padding-inline: 1.5rem; }
}

.rvd-about-approach__title {
  font-family: var(--rvd-display);
  font-size: clamp(1.9rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  /* El interletrado ancho es la seña de identidad de este titular */
  letter-spacing: .15em;
  text-transform: uppercase;
  /* La línea más ancha de la referencia mide 979 px */
  max-width: 980px;
  margin: 0 auto clamp(1.75rem, 4vw, 3rem);
}

.rvd-about-approach__body {
  max-width: 44ch;
  margin: 0 auto;
}

.rvd-about-approach__body p {
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.rvd-about-approach__body p:last-child { margin-bottom: 0; }

.rvd-about-approach__note {
  margin: clamp(1.75rem, 4vw, 3rem) auto 0;
  max-width: 80vw;
  font-size: clamp(1rem, 1.1vw, 1.2rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ---------------------------  Formación y trayectoria  --------------------------- */

/* Espaciados tomados de la referencia a 1470 px: título → columnas 124 px,
   encabezado → lista 51 px, entre entradas 38 px, lista → cierre 130 px. */
.rvd-about-track__grid { margin-top: clamp(2rem, 7.4vw, 6.75rem); }

/* Separador de dos piezas (punto + raya), replicando el patrón de
   mexicopuedeserdeoro.com. Sustituye al `border-left` + `::before` anterior,
   que no permitía controlar por separado el diámetro del punto ni el arranque
   de la línea.
   Diferencia respecto de aquel sitio: allí la raya lleva un degradado que se
   desvanece. Aquí no, porque la regla de la referencia mantiene opacidad
   constante en todo su recorrido (medida: 0.40 uniforme entre y=2610 y
   y=3116). Punto y raya comparten color, #989181, también medido.
   Va dentro de la columna y no como hermano de ella, para que al apilarse en
   móvil cada columna conserve su propio separador. */
/* El separador es hermano del contenido dentro de la columna, como en el
   original. Al ser la columna un flex row con `align-items: stretch`, la raya
   se estira sola hasta el fondo de la fila: es lo que hace la referencia, donde
   ambas reglas terminan a la misma altura aunque una columna tenga más texto. */
.rvd-about-track__col {
  display: flex;
  /* 1.7rem deja el encabezado a 33 px de la regla, como la referencia */
  gap: 1rem;
  padding: 0 7%;
}

@media (min-width: 576px) {
  .rvd-about-track__col { gap: 1.2rem; padding: 0 15%; }
}

@media (min-width: 992px) {
  .rvd-about-track__col { gap: 1.7rem; padding: 0 calc(var(--bs-gutter-x) * .5); }
}

.rvd-about-track__body {
  flex: 1;
  min-width: 0;
}

.rvd-about-track__separator {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 12px;
  /* Centra la regla sobre el borde de la columna, no a su derecha: en la
     referencia el punto queda montado sobre esa vertical. */
  margin-left: -6px;
  /* Hereda el tamaño del encabezado para centrar el punto sobre su primera
     línea sin números fijos: .6em es medio interlineado (1.2), menos medio
     punto. */
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  padding-top: calc(.6em - 6px);
}

.rvd-about-track__separator-end {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rvd-track-rule);
}

.rvd-about-track__separator-stripe {
  flex: 1;
  width: 1px;
  background: var(--rvd-track-rule);
}

.rvd-about-track__heading {
  font-family: var(--rvd-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rvd-ink);
  padding-bottom: 3rem;
  margin-bottom: 0;
}

/* En la referencia el encabezado y las entradas no llevan la misma sangría:
   respecto de la regla, el encabezado arranca a 33 px y las entradas a 48. */
.rvd-about-track__list {
  margin: 0;
  padding-left: 1rem;
}

/* En la referencia la regla de la segunda columna cae en 806 px; con el gutter
   por defecto la columna arranca en 759, de ahí este inset. */
@media (min-width: 992px) {
  .rvd-about-track__grid > .col-lg-6:last-child { padding-left: 4.4rem; }
}

.rvd-about-track__item + .rvd-about-track__item {
  margin-top: 2.375rem;
}

.rvd-about-track__list dt {
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  line-height: 1.2;
  font-weight: 600;
  color: var(--rvd-ink);
}

.rvd-about-track__list dd {
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 400;
  line-height: 1.2;
}

/* Columna de experiencia: sin pares término/definición, solo párrafos */
.rvd-about-track__list--plain li {
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 400;
  line-height: 1.2;
}

.rvd-about-track__list--plain li + li { margin-top: 2.375rem; }

.rvd-about-track__closing {
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 400;
  line-height: 1.2;
  margin: clamp(2.5rem, 8.8vw, 8rem) auto 0;
  max-width: 75vw;
  text-align: center;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.rvd-about-track__closing em {
  font-style: italic;
  font-weight: 600;
  color: var(--rvd-taupe);
}

/* El cierre de esta página reutiliza el componente compartido `.rvd-cta-band`
   (ver el bloque «Banda de cierre»). La línea más ancha del titular en esta
   referencia mide 1026 px, dato que fijó el `max-width: 70vw` del componente. */

/* ==========================================================================
   PÁGINA TOXINA BOTULÍNICA
   Header, footer, offcanvas, contenedores, botones, `.rvd-note`,
   `.rvd-grid-copy`, la variante `.rvd-hero--start` y `.rvd-cta-band` se
   reutilizan tal cual. La sección «La aplicación no se define…» reutiliza el
   sistema `.rvd-treatment` con la variante `--panel-left` (ver el bloque
   «Tratamientos»), nueva en esta página pero pensada para cualquier otra que
   la necesite.
   Medidas deducidas de layout-img/3.ToxinaBotulinica-desktop.png
   (3063 × 5203 px sobre un viewport de diseño de 1470 px, factor 2.0837).
   Tramos verticales de la referencia, en px CSS:
     hero        0 ..  833      aplicación   833 .. 1632
     cierre   1632 .. 1943      footer      1943 .. 2497
   ========================================================================== */
   
.rvd-note.rvd-tox-application__quote p {
  padding: 1rem 1.7rem;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 400;
  line-height: 1.2;
}

#aplicacion {
  padding-block: clamp(3.5rem, 10vw, 10rem);
}

@media(min-width: 992px) {
  .rvd-cta-band__title.rvd-tox-application__title {
    width: 80%;
  }
}

/* ==========================================================================
   PÁGINA REFINAMIENTO FACIAL
   El hero reutiliza `.rvd-hero--start` + `left_variant2` + `.rvd-note`, igual
   que Toxina Botulínica, y el cierre reutiliza `.rvd-cta-band`. Lo único
   propio es el eje de «Zonas de tratamiento».
   Medidas deducidas de layout-img/4.RefinamientoFacial-desktop.png
   (3063 × 7905 px sobre un viewport de diseño de 1470 px, factor 2.0837).
   Tramos verticales de la referencia, en px CSS:
     hero      0 ..  832      zonas    832 .. 2926
     cierre 2926 .. 3238      footer  3238 .. 3794
   ========================================================================== */
.rvd-hero__content.left_variant2 .rvd-hero__title.special-adjust1 {
  width: 100%;
}

.rvd-zones {
  padding-inline: 10%;
}

@media(min-width: 575px){
  .rvd-zones { padding-inline: 20%; }
}

@media(min-width: 992px){
  .rvd-hero__content.left_variant2 .rvd-hero__title.special-adjust1 {
    width: 70%;
  }
  
  .rvd-zones { padding-inline: unset; }
}

@media(min-width: 1200px){
  .rvd-hero__content.left_variant2 .rvd-hero__title.special-adjust1 {
    width: 45%;
  }
}

.rvd-zones__title {
  /* La referencia usa aquí un cuerpo bastante mayor que el resto de títulos
     centrados del sitio: 68 px con tracking ancho, frente a los 49.6 de
     `.rvd-title--center`. */
  font-size: clamp(2rem, 4.7vw, 4.25rem);
  line-height: 1.1;
}

.rvd-zones__intro {
  /* Sin `max-width`: en la referencia ocupa el ancho completo del contenedor
     y rompe en tres líneas. */
  margin: clamp(1.5rem, 3vw, 2.75rem) auto 0;
  text-align: center;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 400;
  line-height: 1.2;
}

/* ---------------------------  Eje de zonas  --------------------------- */

/* Eje vertical con un punto por zona. En la referencia el eje va centrado y
   las zonas alternan izquierda/derecha; en móvil no cabe esa alternancia, así
   que el eje se va al margen izquierdo y todas las zonas se leen a su derecha.
   El cambio se controla con una sola variable, `--rvd-zones-axis`, que usan
   por igual la línea, los remates y los puntos. */
.rvd-zones__track {
  --rvd-zones-axis: 10%;
  --rvd-zones-node: 18px;
  /* Separación de los remates respecto del primer y último punto: en la
     referencia son 223 px, y la mitad de un tramo son 113.5, de ahí los 110. */
  --rvd-zones-cap-gap: 110px;

  position: relative;
  margin-top: clamp(2.5rem, 6vw, 5.625rem);
  padding-block: 1rem;
  /* La línea como fondo deja libres los dos pseudoelementos para los remates */
  background: linear-gradient(var(--rvd-track-rule), var(--rvd-track-rule))
              var(--rvd-zones-axis) 50% / 1px 80% no-repeat;
}

.rvd-zones__list { margin: 0; padding: 0; }

.rvd-zones__item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* En móvil el tramo lo marca el propio contenido; en desktop se fija a los
     227 px que separan los puntos en la referencia. */
  padding: 1.75rem var(--rvd-zones-axis) 1.75rem calc(var(--rvd-zones-axis) + 2.75rem);
}

/* Punto hueco de cada zona, centrado sobre el eje */
.rvd-zones__item::before {
  content: "";
  position: absolute;
  left: var(--rvd-zones-axis);
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--rvd-zones-node);
  height: var(--rvd-zones-node);
  border-radius: 50%;
  border: 1.5px solid var(--rvd-track-rule);
  background: var(--rvd-cream);
}

.rvd-zones__item:first-child::before,
.rvd-zones__item:last-child::before {
    background: var(--rvd-track-rule);
}

.rvd-zones__name {
  font-family: var(--rvd-display);
  font-weight: 600;
  font-size: clamp(1.375rem, 2.7vw, 2.5rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--rvd-ink);
  margin-bottom: .5rem;
}

.rvd-zones__desc {
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--rvd-muted);
}

@media(min-width: 576px) {
  .rvd-zones__track {
    --rvd-zones-axis: 50%;
    background: linear-gradient(var(--rvd-track-rule), var(--rvd-track-rule))
                var(--rvd-zones-axis) 50% / 1px 80% no-repeat;
  }

  /* Dos columnas simétricas separadas por 110 px: con el contenedor estrecho
     eso deja el texto a 55 px del eje por cada lado, como en la referencia
     (las zonas de la derecha arrancan en 790 y las de la izquierda cierran
     en 680). */
  .rvd-zones__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 110px;
    align-content: center;
    min-height: 127px;
    padding: 0;
  }

  .rvd-zones__item > * { grid-column: 2; }

  .rvd-zones__item:nth-child(even) > * {
    grid-column: 1;
    text-align: right;
  }
}

@media (min-width: 992px) {

  /* Remates macizos de inicio y fin sólo se muestran en desktop */

  .rvd-zones__track::before,
  .rvd-zones__track::after {
    content: "";
    position: absolute;
    left: var(--rvd-zones-axis);
    width: var(--rvd-zones-node);
    height: var(--rvd-zones-node);
    border-radius: 50%;
    background: var(--rvd-track-rule);
  }

  .rvd-zones__track::before { top: 0;    transform: translate(-50%, -50%); }
  .rvd-zones__track::after  { top: 100%; transform: translate(-50%, -50%); }

  .rvd-zones__track {
    --rvd-zones-axis: 50%;
    padding-block: var(--rvd-zones-cap-gap);
    background: linear-gradient(var(--rvd-track-rule), var(--rvd-track-rule))
                var(--rvd-zones-axis) 0 / 1px 100% no-repeat;
  }

  /* Dos columnas simétricas separadas por 110 px: con el contenedor estrecho
     eso deja el texto a 55 px del eje por cada lado, como en la referencia
     (las zonas de la derecha arrancan en 790 y las de la izquierda cierran
     en 680). */
  .rvd-zones__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 110px;
    align-content: center;
    min-height: 227px;
    padding: 0;
  }

  .rvd-zones__item > * { grid-column: 2; }

  .rvd-zones__item:nth-child(even) > * {
    grid-column: 1;
    text-align: right;
  }

  .rvd-zones__item:first-child::before,
  .rvd-zones__item:last-child::before {
      background: var(--rvd-cream);
  }
}

/* ==========================================================================
   PÁGINA REGENERACIÓN CUTÁNEA
   El hero reutiliza `.rvd-hero--start` + `left_variant2` + `.rvd-note`, y el
   cierre reutiliza `.rvd-cta-band`. Lo propio es `.rvd-derm`: el bloque de
   tratamiento que se repite cuatro veces, con imagen alta a un lado y, al
   otro, título + entradilla + texto + lista de grupos sobre un eje vertical.
   El eje comparte lenguaje visual con `.rvd-zones` de Refinamiento Facial
   (mismo color `--rvd-track-rule` y mismo punto hueco de 18 px), pero aquí
   los puntos no van a intervalos fijos: cada uno se alinea con el encabezado
   de su grupo, así que la separación la dicta el contenido.
   Medidas deducidas de layout-img/5.RegeneraciónCutanea-desktop.png
   (3075 × 15130 px). Ojo: esta referencia se diseñó sobre un viewport de
   1475 px, no de 1470 como las anteriores; el factor sigue siendo 2.0847.
   Tramos verticales de la referencia, en px CSS:
     hero      0 ..  825      bloques  825 .. 6545
     cierre 6545 .. 6858      footer  6858 .. 7257
   ========================================================================== */

.rvd-derm { position: relative; }
.rvd-derm__inner { position: relative; z-index: 2; }

@media(max-width: 991.98px){
  .rvd-derm__inner { padding: 0 20%; }
}

@media(max-width: 575.98px){
  .rvd-derm__inner { padding: 0 10%; }
}

/* La imagen se estira al alto de la columna de texto y recorta con `cover`:
   en la referencia su altura la marca el texto, no la proporción del archivo
   (los cuatro recortes miden 473 px de ancho y alturas distintas). */
.rvd-derm__media {
  display: block;
  width: 100%;
  height: auto;
  /* Los recortes son muy verticales (473 × 1340 el más alto): a su proporción
     natural ocuparían más de una pantalla en móvil, así que ahí se encuadran. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

@media (min-width: 576px) {
  .rvd-derm__media { aspect-ratio: 4 / 3; }
}

.rvd-derm__title {
  font-family: var(--rvd-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 3.6rem);
  line-height: 1.0;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--rvd-ink);
  margin-bottom: .5rem;
}

.rvd-derm__lead {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  line-height: 1.3;
  color: var(--rvd-ink);
  margin-bottom: 0;
}

.rvd-derm__rule {
  border: 0;
  border-top: 1px solid var(--rvd-rule);
  opacity: 1;
  margin: 1rem 0;
}

.rvd-derm__text {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.2;
  margin-bottom: 1.2rem;
  text-align: justify;
}

/* ---------------------------  Eje de grupos  --------------------------- */

.rvd-derm__groups {
  --rvd-derm-axis: 10%;
  --rvd-derm-node: 18px;
  --rvd-derm-nodemargin: calc(var(--rvd-derm-axis) + 1.8rem + calc(var(--rvd-derm-node) / 2));

  position: relative;
  margin: 2.5rem 0 0;
  padding-left: var(--rvd-derm-nodemargin);
  /* La línea va de fondo para dejar libres los pseudoelementos de los puntos */
  background: linear-gradient(var(--rvd-track-rule), var(--rvd-track-rule))
              var(--rvd-derm-axis) var(--rvd-derm-node) / 1px 100% no-repeat;
}

.rvd-derm__group { position: relative; }
.rvd-derm__group + .rvd-derm__group { margin-top: 2rem; }

/* Punto hueco alineado con la primera línea del encabezado del grupo: el
   `.62em` es medio interlineado del propio encabezado, así que se recoloca
   solo si cambia su cuerpo. */
.rvd-derm__group::before {
  content: "";
  position: absolute;
  left: calc(var(--rvd-derm-axis) - 2.75rem);
  top: .62em;
  transform: translate(-50%, -50%);
  width: var(--rvd-derm-node);
  height: var(--rvd-derm-node);
  border-radius: 50%;
  border: 1.5px solid var(--rvd-track-rule);
  background: var(--rvd-cream);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
}

.rvd-derm__group-name {
  font-family: var(--rvd-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1.5vw, 1.8rem);
  line-height: clamp(1.1625rem, 1.6vw, 1.9rem);
  text-transform: uppercase;
  color: var(--rvd-ink);
  margin-bottom: .375rem;
}

.rvd-derm__group-body { margin: 0 0 0 .75rem; }

.rvd-derm__group-body p {
  margin: 0;
  font-size: clamp(.9375rem, 1.2vw, 1.125rem);
  line-height: 1.5;
}

.rvd-derm__list { margin: 0; }

.rvd-derm__list li {
  position: relative;
  padding-left: 1rem;
  font-size: clamp(.9375rem, 1.2vw, 1.125rem);
  line-height: 1.5;
}

/* Viñeta de punto medio, como en la referencia */
.rvd-derm__list li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--rvd-muted);
}

/* ---------------------------  Variante oscura  --------------------------- */

/* El tercer bloque va sobre la textura oscura a sangre completa. El fondo se
   monta como capa propia y no como `background` de la sección para poder
   fijarle `100% 100%` sin recortar el degradado horneado de la textura, igual
   que en `.rvd-quote` y `.rvd-cta-band`. */
.rvd-derm--dark { color: var(--rvd-cream); }

.rvd-derm__backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--rvd-black);
  background-image: url('../img/home/home-textura-oscura.jpg');
  background-size: cover;
  background-position: center;
}

@media (min-width: 992px) {
  .rvd-derm__backdrop { background-size: 100% 100%; }
}

.rvd-derm--dark .rvd-derm__title,
.rvd-derm--dark .rvd-derm__lead,
.rvd-derm--dark .rvd-derm__group-name { color: var(--rvd-cream); }

.rvd-derm--dark .rvd-derm__rule { border-top-color: var(--rvd-rule-light); }

.rvd-derm--dark .rvd-derm__group::before {
  background: var(--rvd-black);
  border-color: var(--rvd-cream);
}

.rvd-derm--dark .rvd-derm__groups {
  background-image: linear-gradient(var(--rvd-cream), var(--rvd-cream));
}

.rvd-derm--dark .rvd-derm__list li::before { color: var(--rvd-cream); }

/* ---------------------------  Panel desplazado  --------------------------- */

/* El segundo bloque lleva detrás de la fotografía un rectángulo oscuro que
   sangra al borde derecho, el mismo recurso que `.rvd-treatment--panel-right`
   del home. Medido en la referencia: arranca en el 68.9 % del ancho y desborda
   la imagen 45 px por arriba y 67 por abajo.
   El `right: -100vw` junto al `overflow: hidden` de la sección resuelve la
   sangría sin depender del margen que tenga el contenedor a cada ancho. */
@media (min-width: 992px) {
  .rvd-derm--panel { overflow: hidden; }

  .rvd-derm--panel .rvd-derm__figure { position: relative; }

  .rvd-derm--panel .rvd-derm__figure::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -2.8rem;
    bottom: -4.2rem;
    /* 19 % de la columna deja el panel 69 px a la derecha del borde de la
       fotografía: el porcentaje se resuelve contra la columna, que es más
       ancha que la imagen por el medio gutter. */
    left: 19%;
    right: -100vw;
    background-color: var(--rvd-black);
    background-image: url('../img/home/home-textura-oscura.jpg');
    background-size: 100% 100%;
    background-position: center;
  }

  .rvd-derm--panel .rvd-derm__media { position: relative; z-index: 1; }
}

@media (min-width: 992px) {
  /* Desde lg la imagen acompaña al texto en altura */
  .rvd-derm__figure { display: flex; margin-top: 5rem }

  .rvd-derm__media {
    height: 100%;
    /* Desde lg manda el alto de la columna, no la proporción */
    aspect-ratio: auto;
    object-fit: cover;
  }

  .rvd-derm__groups {
    --rvd-derm-axis: 6px;
    margin-top: 3rem;
  }

  .rvd-derm__group + .rvd-derm__group { margin-top: 2.5rem; }
}

/* ===========================  Movimiento reducido  =========================== */

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