@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;
  font-weight: 500;
}

.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);
  font-weight: 500;
}

.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);
}

.rvd-hero__veil-v2 {
  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__veil-v2 {
    background:
      linear-gradient(to right, rgba(13, 13, 13, .70) 0%, rgba(13, 13, 13, 0.5) 30%, rgba(13, 13, 13, 0.2) 100%)
  }
}

.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(1.8rem, 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;
}

@media(max-width: 991.98px){
  .rvd-hero__eyebrow {
    display: none;
  }
}

/* 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);
  font-weight: 500;
  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-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); }

.rvd-treatment--panel-right.dark-variant .rvd-title,
.rvd-treatment--panel-right.dark-variant .rvd-prose,
.rvd-treatment--panel-right.dark-variant .rvd-features dd,
.rvd-treatment--panel-right.dark-variant .rvd-features dt { color: var(--rvd-cream); }
.rvd-treatment--panel-right.dark-variant .rvd-features__item { border-left-color: var(--rvd-rule-light); }
.rvd-treatment--panel-right.dark-variant .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); }

.rvd-treatment--panel-right.dark-variant .rvd-title,
.rvd-treatment--panel-right.dark-variant .rvd-prose,
.rvd-treatment--panel-right.dark-variant .rvd-features dd,
.rvd-treatment--panel-right.dark-variant .rvd-features dt { color: var(--rvd-ink); }
.rvd-treatment--panel-right.dark-variant .rvd-features__item { border-left-color: var(--rvd-rule); }
.rvd-treatment--panel-right.dark-variant .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 {
  margin-bottom: 2.25rem;
  max-width: 48ch;
}

.rvd-note.m-hide {
  display: none;
}
.rvd-note.m-show {
  display: block;
  padding-inline: 0.5rem;
}

.rvd-note p {
  margin-bottom: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  line-height: 1.7;
}

.rvd-hero__content.left_variant2 .rvd-note p {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.2;
  font-weight: 500;
}

/* en desktop */
@media(min-width: 576px) {
  .rvd-note.m-hide {
    display: block;
    padding-left: 1.5rem;
  }

  .rvd-note.m-hide p {
    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;
    border-left: 1px solid var(--rvd-cream);
  }

  .rvd-note.m-show {
    display: none;
  }
}

/* ===========================  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;
}

/* ---------------------------  Carrusel (solo móvil)  ---------------------------

   Bajo 992 px la retícula de cinco columnas se convierte en un carrusel de una
   imagen por vista: así cada foto ocupa todo el ancho disponible en vez de la
   mitad, y la sección ocupa menos alto que las tres filas anteriores.

   El bucle es infinito sin clonar nada. El track descansa siempre desplazado
   -100 %, de modo que hay una diapositiva de reserva a cada lado; al terminar
   la transición el guion mueve un hijo de un extremo al otro y devuelve el
   track a -100 % sin animar. Ver `js/scripts.js`. */

/* Las flechas solo existen mientras el carrusel está activo */
.rvd-space__arrow { display: none; }

@media (max-width: 991.98px) {
  .rvd-space__gallery { position: relative; }

  /* `pan-y` cede el desplazamiento vertical al navegador y nos deja el
     horizontal para el arrastre; sin esto el gesto compite con el scroll. */
  .rvd-space__viewport {
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
  }

  .rvd-space__viewport.is-dragging { cursor: grabbing; }

  .rvd-space__track img {
    user-select: none;
    -webkit-user-drag: none;
  }

  .rvd-space__track {
    flex-wrap: nowrap;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin-inline: 0;
    transition: transform .45s ease;
  }

  .rvd-space__track > * {
    flex: 0 0 100%;
    max-width: 100%;
    padding-inline: 0;
  }

  .rvd-space__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(242, 240, 234, .88);
    color: var(--rvd-ink);
    transform: translateY(-50%);
    transition: background-color .3s ease;
  }

  .rvd-space__arrow:hover,
  .rvd-space__arrow:focus-visible { background: var(--rvd-cream); }

  /* `.container` deja 12 px de relleno: las flechas se apoyan justo dentro
     del borde de la imagen, no sobre el margen de la página. */
  .rvd-space__arrow--prev { left: calc(.75rem + .5rem); }
  .rvd-space__arrow--next { right: calc(.75rem + .5rem); }

  .rvd-space__arrow svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

/* ===========================  Opiniones  ===========================

   Sección de reseñas de pacientes. El contenido vive en `reviews.json` y lo
   pinta `js/scripts.js`: en el HTML solo hay el marco vacío.

   El diseño no importa el lenguaje de «tarjeta de testimonio» al uso —caja
   blanca, esquinas redondeadas, sombra, estrellas doradas—, que aquí sonaría a
   pieza pegada de otro sitio. Cada ficha se marca con la misma regla capilar a
   la izquierda que `.rvd-features__item` usa para separar ítems, y las
   estrellas van en `--rvd-track-rule`, el mismo tono de las viñetas del resto
   de la maqueta. La calificación es lo único propio de una reseña, así que es
   ahí donde se gasta el color.

   Retícula: 3 fichas desde 992 px, 2 entre 576 y 991.98, 1 por debajo. Las
   flechas aparecen solo cuando hay más opiniones que huecos.
   ========================================================================== */

.rvd-reviews__title {
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  font-weight: 400;
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}

.rvd-reviews__lead {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.35;
  max-width: 52ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.rvd-reviews--center .rvd-reviews__lead { margin-inline: auto; text-align: center; }

/* Cabecera de la variante B: el título a la izquierda y el enlace al perfil
   alineado a su derecha, en la misma línea de base. */
.rvd-reviews__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.rvd-reviews__head .rvd-reviews__title,
.rvd-reviews__head .rvd-reviews__lead { margin-bottom: 0; }

@media (min-width: 992px) {
  .rvd-reviews__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }
}

/* Los márgenes laterales del 20 % dejarían dos fichas de 160 px a 576 px de
   ancho, ilegibles. Entre sm y lg el bloque se queda con un 8 %, que a 768 px
   da columnas de 311 px. Por debajo de 576 solo hay una ficha y vuelve la
   regla general del 10 %. */
@media (max-width: 991.98px) {
  .rvd-reviews__inner { padding-inline: 8%; }
}

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

/* ---------------------------  Carril  --------------------------- */

.rvd-reviews__frame { position: relative; }

.rvd-reviews__viewport { overflow: hidden; }

/* `--rvd-op-per` es cuántas fichas caben a la vista. Se declara aquí y el
   guion la lee: una sola fuente de verdad para CSS y JS. Los huecos se hacen
   con relleno interior y margen negativo, como las columnas de Bootstrap, para
   que una ficha mida exactamente el 100/n % del carril y el desplazamiento sea
   un `translateX` limpio. */
.rvd-reviews__track {
  --rvd-op-per: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin-inline: -.75rem;
  transition: transform .45s ease;
}

.rvd-reviews__slide {
  display: flex;
  flex: 0 0 calc(100% / var(--rvd-op-per));
  max-width: calc(100% / var(--rvd-op-per));
  padding-inline: .75rem;
}

@media (min-width: 576px) { .rvd-reviews__track { --rvd-op-per: 2; } }
@media (min-width: 992px) { .rvd-reviews__track { --rvd-op-per: 3; } }

/* ---------------------------  Ficha  --------------------------- */

.rvd-review {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-left: 1.5rem;
}

.rvd-review__stars {
  display: flex;
  gap: .3rem;
  margin-bottom: 1.25rem;
}

.rvd-review__stars svg { width: 17px; height: 17px; display: block; }

.rvd-review__star      { fill: var(--rvd-track-rule); }
.rvd-review__star--off { fill: none; stroke: var(--rvd-track-rule); stroke-width: 1.4; }

/* El `flex: 1` empuja la firma al pie de la ficha: con fichas de texto desigual
   las tres firmas quedan a la misma altura, que es lo que hace que la fila se
   lea como una retícula y no como tres bloques sueltos. */
.rvd-review__text {
  flex: 1;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.45;
  margin-bottom: 1.75rem;
}

.rvd-review__sign {
  border-top: 1px solid var(--rvd-rule);
  padding-top: 1rem;
}

.rvd-review__name {
  font-family: var(--rvd-display);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--rvd-ink);
  margin-bottom: .25rem;
}

.rvd-review__date {
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  color: var(--rvd-muted);
  margin: 0;
}

/* ---------------------------  Flechas  --------------------------- */

/* El guion pone `tiene-carrusel` cuando hay más opiniones que huecos: sin eso
   las flechas no existen. Mismo control que la galería de «Nuestro espacio»,
   con relleno crema y borde capilar para que se lea sobre fondo crema. */
.rvd-reviews__arrow { display: none; }

.rvd-reviews__frame.tiene-carrusel .rvd-reviews__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--rvd-rule);
  border-radius: 50%;
  background: var(--rvd-cream);
  color: var(--rvd-ink);
  transform: translateY(-50%);
  transition: border-color .3s ease, color .3s ease;
}

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

/* Desde lg el carril reserva un pasillo a cada lado para las flechas, en vez
   de dejarlas colgando fuera: con el contenedor a 1180 px el hueco libre
   depende del viewport y en pantallas de 1200 px las flechas se salían. */
@media (min-width: 992px) {
  .rvd-reviews__frame.tiene-carrusel { padding-inline: 3.5rem; }
  .rvd-reviews__arrow--prev { left: 0; }
  .rvd-reviews__arrow--next { right: 0; }
}

.rvd-reviews__arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Por debajo de lg solo hay una o dos fichas a la vista y no queda pasillo:
   encima de la foto de la galería una flecha se lee, pero encima de un párrafo
   tapa lo que hay que leer. Aquí bajan a una fila propia bajo el carril. */
@media (max-width: 991.98px) {
  .rvd-reviews__frame.tiene-carrusel { padding-bottom: 5rem; }

  .rvd-reviews__frame.tiene-carrusel .rvd-reviews__arrow {
    top: auto;
    bottom: 0;
    transform: none;
  }

  .rvd-reviews__arrow--prev { left: calc(50% - 52px); }
  .rvd-reviews__arrow--next { right: calc(50% - 52px); }
}

/* ---------------------------  Pie  --------------------------- */

.rvd-reviews__foot { margin-top: clamp(2rem, 4vw, 3rem); }
.rvd-reviews--center .rvd-reviews__foot { display: flex; justify-content: center; }

/* ---------------------------  Variantes  --------------------------- */

@media (min-width: 992px) {
  .rvd-reviews--split .rvd-reviews__lead { margin-inline: 0; }
}

.rvd-reviews--dark {
  background-color: var(--rvd-black);
  background-image: url('../img/home/home-textura-oscura.jpg');
  background-size: cover;
  background-position: center;
  color: var(--rvd-cream);
}

/* Igual que en `.rvd-quote`: la textura trae el degradado horneado y `cover`
   lo recortaría en una franja tan apaisada. */
@media (min-width: 992px) {
  .rvd-reviews--dark { background-size: 100% 100%; }
}

.rvd-reviews--dark .rvd-reviews__title { color: var(--rvd-cream); }
.rvd-reviews--dark .rvd-reviews__lead  { color: rgba(242, 240, 234, .82); }
.rvd-reviews--dark .rvd-review         { border-left-color: var(--rvd-rule-light); }
.rvd-reviews--dark .rvd-review__sign   { border-top-color: var(--rvd-rule-light); }
.rvd-reviews--dark .rvd-review__name   { color: var(--rvd-cream); }
.rvd-reviews--dark .rvd-review__date   { color: rgba(242, 240, 234, .62); }

.rvd-reviews--dark .rvd-reviews__frame.tiene-carrusel .rvd-reviews__arrow {
  border-color: var(--rvd-rule-light);
  background: transparent;
  color: var(--rvd-cream);
}

.rvd-reviews--dark .rvd-reviews__arrow:hover,
.rvd-reviews--dark .rvd-reviews__arrow:focus-visible { border-color: var(--rvd-cream); }


/* ===========================  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;
}

/* ---  Variante --dark dentro de una franja compartida (propuesta C)  ---
   Cuando las opiniones cierran la página justo debajo de la cita del doctor,
   dos franjas oscuras seguidas dejarían una costura visible: cada una estira
   su propia copia de la textura y las diagonales no empalman. La solución es
   la misma que en `valoracion.html`: una sola sección `.rvd-closing` pone el
   fondo y los dos bloques renuncian al suyo. */

.rvd-closing {
  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-bottom: clamp(3.5rem, 7vw, 6rem);
}

@media (min-width: 992px) {
  /* El solape de la galería sobre la cita pasa a gobernarlo el contenedor */
  .rvd-closing { background-size: 100% 100%; margin-top: -6rem; }
  .rvd-quote--inline { margin-top: 0; }
}

@media (min-width: 1200px) {
  .rvd-closing { margin-top: -7rem; }
  .rvd-quote--inline { margin-top: 0; }
}

.rvd-quote--inline,
.rvd-reviews--inline { background: none; }

/* Dentro de la franja compartida el bloque no lleva `.rvd-section`, así que
   pone aquí su propio aire respecto a la cita que tiene encima. */
.rvd-reviews--inline { padding-top: clamp(2rem, 5vw, 4rem); }

/* ===========================  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); }

/* ===========================  Llamadas a la acción fijas  ===========================

   Espejo inferior del header: acompañan al visitante durante todo el
   desplazamiento. Dos piezas excluyentes, una por rango de ancho.

     Desde 992 px  dos botones flotando en la esquina inferior derecha
     Por debajo    una barra a lo ancho con tres accesos directos

   Van con el z-index del header (1030), por debajo del offcanvas de Bootstrap
   (1045): al abrir el menú, el panel las tapa en vez de flotar sobre él. */

:root { --rvd-fixedbar-h: 56px; }

/* ---------------------------  Desktop: botones flotantes  --------------------------- */

.rvd-fixedcta {
  display: none;
  position: fixed;
  right: 1.875rem;
  bottom: 1.875rem;
  z-index: 1030;
  gap: 1rem;
}

@media (min-width: 992px) {
  .rvd-fixedcta { display: flex; }
}

/* Los dos botones son opacos a propósito: flotan sobre fotografía, crema o
   textura oscura según dónde se haya quedado el visitante, y `--outline`
   dejaría ver el fondo a través. */
.rvd-fixedcta .rvd-btn {
  box-shadow: 0 2px 16px rgba(13, 11, 10, .18);
}

/* ---------------------------  Móvil: barra de accesos  --------------------------- */

.rvd-fixedbar {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1030;
  background: var(--rvd-ink);
  /* Al final de la página la barra queda sobre el footer, que es del mismo
     color: la regla capilar es lo que la mantiene legible como pieza aparte. */
  border-top: 1px solid var(--rvd-rule-light);
  /* Respeta la franja del gesto de inicio en iOS */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 991.98px) {
  .rvd-fixedbar { display: grid; grid-template-columns: repeat(3, 1fr); }

  /* La barra tapa el pie de página: el footer se alarga otro tanto para que
     su última línea siga siendo legible. */
  .rvd-footer { padding-bottom: var(--rvd-fixedbar-h); }
}

/* Sin rótulo: el icono va solo y centrado. La altura de 56 px se mantiene
   —es el área táctil, no el tamaño del dibujo— y el nombre accesible de cada
   acceso lo lleva el `aria-label` del enlace. */
.rvd-fixedbar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--rvd-fixedbar-h);
  padding: .5rem .25rem;
  color: var(--rvd-cream);
  text-decoration: none;
  transition: background-color .3s ease;
}

.rvd-fixedbar__item + .rvd-fixedbar__item {
  border-left: 1px solid var(--rvd-rule-light);
}

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

/* Los iconos de marca (`img/icons/*-mono.svg`) son siluetas macizas, así que
   toman el color por `fill`. El `viewBox` de Doctoralia no es cuadrado: se le
   deja la caja de 22 px y `preserveAspectRatio` se encarga de encajarlo sin
   deformarlo. */
.rvd-fixedbar__icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: none;
}

/* El teléfono sigue siendo un trazo, como el resto de iconos de la maqueta */
.rvd-fixedbar__icon--stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   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: 1rem;
  --rvd-derm-node: 18px;
  /* --rvd-derm-nodemargin: calc(var(--rvd-derm-axis) + 1.8rem + calc(var(--rvd-derm-node) / 2)); */
  --rvd-derm-nodemargin: calc(var(--rvd-derm-axis) + 1.8rem);

  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) * -1 + var(--rvd-derm-node) - 1px); */
  left: calc(var(--rvd-derm-axis) * -1 - 0.7rem);
  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.2rem, 2.5vw, 1.6rem);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--rvd-ink);
  margin-bottom: .375rem;
}

.rvd-derm__group-body {
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.35;
}

.rvd-derm__group-body p {
  margin: 0;
  line-height: 1.4;
}

.rvd-derm__list { margin: 0; }

.rvd-derm__list li {
  position: relative;
  padding-left: 1rem;
}

/* Viñeta de punto medio, como en la referencia */
.rvd-derm__list li::before {
  content: "·";
  font-weight: 500;
  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%; }

  /* Modificador `--hueco`: desde lg el fondo oscuro deja un margen a la
     izquierda en vez de ir a sangre, y sigue sangrando por la derecha. Es el
     espejo —mucho más estrecho— de lo que hace `.rvd-treatment--dark` en el
     home, donde el hueco queda a la derecha y ocupa el 26.93 %.

     El ancho del hueco cambia de una referencia a otra, así que se declara
     como variable y cada sección fija el suyo. Sin el modificador, el fondo
     sigue yendo a sangre como hasta ahora.

     En móvil el fondo cubre todo el ancho en cualquier caso. */
  .rvd-derm--dark.rvd-derm--hueco .rvd-derm__backdrop {
    inset: 0 0 0 var(--rvd-derm-hueco, 0);
  }
}

.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: 3rem;
    margin-top: 3rem;
  }

  .rvd-derm__group::before {
    left: calc(var(--rvd-derm-axis) * -1 + var(--rvd-derm-node) + 1px);
  }

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

/* ==========================================================================
   ESTILOS DE PÁGINAS INTERIORES
   A partir de aquí, componentes que solo usa una página. Todo lo anterior
   es el sistema compartido.
   ========================================================================== */

/* ==========================================================================
   PÁGINA REGENERACIÓN CAPILAR
   El hero reutiliza `.rvd-hero--start` + `left_variant2` + `.rvd-note`, y el
   cierre reutiliza `.rvd-cta-band`. Lo propio es `.rvd-hairgrid`: tres
   columnas de fichas separadas por reglas verticales.
   Medidas de layout-img/6.RegeneracionCapilar-desktop.png (3075 × 6273 px
   sobre un viewport de diseño de 1475 px, factor 2.0847).
     hero      0 ..  825      abordaje  825 .. 2142
     cierre 2142 .. 2461      footer   2461 .. 3009
   ========================================================================== */

/* Márgenes laterales del criterio general: 20 % bajo lg y 10 % bajo sm */
@media (max-width: 991.98px) {
  .rvd-hairgrid__inner { padding: 0 20%; }
}

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

.rvd-hairgrid__title {
  font-size: clamp(2rem, 4.6vw, 4.15rem);
  line-height: 1.1;
  letter-spacing: .06em;
}

.rvd-hairgrid__intro {
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  text-align: center;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  line-height: 1.35;
}

.rvd-hairgrid__grid { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* Reglas verticales entre columnas: en la referencia caen en x=516 y x=965 y
   comparten el color `--rvd-track-rule` de los ejes de las demás páginas. Se
   dibujan con `border-left` para que Bootstrap siga gobernando el reparto. */
.rvd-hairgrid__col { text-align: center; }

@media (min-width: 992px) {
  .rvd-hairgrid__col + .rvd-hairgrid__col {
    border-left: 1px solid var(--rvd-track-rule);
  }

  .rvd-hairgrid__col { padding-inline: 2.5rem; }
}

/* Al apilarse, la regla pasa a horizontal para seguir separando bloques */
@media (max-width: 991.98px) {
  .rvd-hairgrid__col + .rvd-hairgrid__col {
    border-top: 1px solid var(--rvd-track-rule);
    padding-top: 2.5rem;
  }
}

.rvd-hairgrid__heading {
  font-family: var(--rvd-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--rvd-ink);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.rvd-hairgrid__list { margin: 0; }
.rvd-hairgrid__item + .rvd-hairgrid__item { margin-top: 1.75rem; }

.rvd-hairgrid__list dt {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.25;
  font-weight: 500;
  color: var(--rvd-taupe);
  margin-bottom: .25rem;
}

.rvd-hairgrid__list dd {
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.3;
  color: var(--rvd-text);
}

/* ==========================================================================
   PÁGINA TRATAMIENTOS CORPORALES
   Los tres bloques reutilizan `.rvd-derm`. Lo propio: la declaración central,
   la sección de tecnología y `--panel-left`, espejo de `--panel`.
   Medidas de layout-img/7.TratamientosCorporales-desktop.png (3075 × 10609).
     hero        0 ..  825      declaración   825 .. 1327
     bloques  1327 .. 4224      cierre       4224 .. 4538
   ========================================================================== */

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

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

.rvd-bodystmt__title {
  font-family: var(--rvd-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--rvd-ink);
  /* Sin recorte propio: en la referencia la línea más ancha mide 1133 px, o
     sea el contenedor completo, y el titular rompe en tres líneas. */
  margin: 0 auto;
}

.rvd-bodytech__title {
  font-size: clamp(2rem, 4.4vw, 3.9rem);
  line-height: 1.1;
  letter-spacing: .04em;
}

.rvd-bodytech__text {
  max-width: 68ch;
  margin: clamp(1.25rem, 2.5vw, 2rem) auto 0;
  text-align: center;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.35;
}

/* Espejo de `--panel`: el rectángulo oscuro sangra por la izquierda */
@media (min-width: 992px) {
  .rvd-derm--panel-left { overflow: hidden; }

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

  .rvd-derm--panel-left .rvd-derm__figure::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -2.8rem;
    bottom: -2.8rem;
    right: 19%;
    left: -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-left .rvd-derm__media { position: relative; z-index: 1; }
}

/* ==========================================================================
   PÁGINA DERMOPIGMENTACIÓN
   No aporta componentes nuevos: reutiliza `.rvd-derm` en sus tres variantes,
   `.rvd-band` del home y `.rvd-cta-band`. Solo añade la línea en versales que
   va por debajo del título del hero.
   Medidas de layout-img/9.Dermopigmentacion-desktop.png (3075 × 9687).
     hero        0 ..  825      simulación   825 .. 1640
     camuflaje 1640 .. 2458     banda       2540 .. 2884
     areolar   2884 .. 3820     cierre      3820 .. 4134
   ========================================================================== */

.rvd-hero__eyebrow--trail { margin-top: .25rem; margin-bottom: 1.5rem; }

/* ==========================================================================
   PÁGINA CONTACTO
   Hero y cierre reutilizan lo compartido. Lo propio es el bloque de datos de
   contacto a la izquierda y el mapa a la derecha.
   Medidas de layout-img/10.Contacto-desktop.png (3075 × 5323 px sobre un
   viewport de diseño de 1475 px).
     hero      0 ..  825      datos   825 .. 1907
     cierre 1907 .. 2221      footer 2221 .. 2553
   ========================================================================== */

/* La franja crema mide 859 px de alto en la referencia, con 137 arriba y 139
   abajo alrededor del mapa: algo más holgada que el `.rvd-section` común. */
.rvd-contact { padding-block: clamp(3.5rem, 9.3vw, 8.6rem); }

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

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

.rvd-contact__group + .rvd-contact__group { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }

.rvd-contact__heading {
  font-family: var(--rvd-display);
  font-weight: 400;
  /* 33 px de altura de caja alta en la referencia ≈ 2.05rem de cuerpo */
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  line-height: 1.15;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--rvd-ink);
  margin-bottom: .75rem;
}

.rvd-contact__list { margin: 0; }
.rvd-contact__list li + li { margin-top: .375rem; }

/* Cada dato va precedido de un icono; el `gap` los mantiene alineados aunque
   el texto rompa en dos líneas. */
.rvd-contact__list a,
.rvd-contact__item {
  display: inline-flex;
  align-items: flex-start;
  gap: .625rem;
  min-height: 44px;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  line-height: 1.35;
  color: var(--rvd-text);
  transition: color .3s ease;
  /* La URL de Doctoralia es una sola palabra de 46 caracteres: sin esto
     desborda el contenedor en pantallas estrechas. */
  overflow-wrap: anywhere;
}

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

.rvd-contact__icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  margin-top: .05em;
  fill: none;
  stroke: var(--rvd-taupe);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rvd-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* Los dos botones llevan icono, así que no pueden usar `.rvd-btn` a secas */
.rvd-contact__btn {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-height: 48px;
  padding: .7rem 1.75rem;
  background: var(--rvd-taupe);
  color: var(--rvd-cream);
  font-size: .95rem;
  letter-spacing: .06em;
  text-decoration: none;
  transition: background-color .3s ease;
}

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

.rvd-contact__btn .rvd-contact__icon { stroke: currentColor; }

/* El mapa mantiene su proporción y no desborda en ningún ancho. Desde lg toma
   la de la referencia: 697 × 583 px. */
.rvd-contact__map {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  display: block;
}

@media (min-width: 992px) {
  .rvd-contact__map { aspect-ratio: 697 / 583; }
}

/* ==========================================================================
   PÁGINA VALORACIÓN
   Hero y cierre reutilizan lo compartido. Lo propio es `.rvd-steps`: un eje
   HORIZONTAL con un punto por paso, sobre la textura oscura. Es el mismo
   lenguaje que el eje vertical de `.rvd-zones`, girado.
   Medidas de layout-img/11.Valoracion-desktop.png (3075 × 4169 px sobre un
   viewport de diseño de 1475 px).
     hero      0 ..  825      incluye  825 .. 1660
     cierre 1660 .. 2000
   ========================================================================== */

.rvd-steps {
  background-color: var(--rvd-black);
  background-image: url('../img/home/home-textura-oscura.jpg');
  background-size: cover;
  background-position: center;
  color: var(--rvd-cream);
}

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

/* El eje se despliega casi a sangre: en la referencia el primer texto empieza
   en x=63 y el último termina en 1411, sobre un viewport de 1475. No cabe en
   `.rvd-container--narrow`, así que esta franja lleva su propia caja. */
.rvd-steps__inner {
  max-width: 1460px;
  margin-inline: auto;
  padding: clamp(3.5rem, 7.3vw, 6.75rem) 1.5rem clamp(2rem, 4vw, 3rem);
}

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

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

.rvd-steps__title {
  font-family: var(--rvd-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--rvd-cream);
  /* Sin margen propio: la separación con el eje la pone el `padding-top` de
     la lista, que es también quien sitúa la línea y los puntos. */
  margin-bottom: 0;
}

.rvd-steps__list {
  --rvd-steps-node: 10px;
  /* Distancia del borde superior de la lista al centro de los puntos */
  --rvd-steps-axis: clamp(1.25rem, 2.15vw, 2rem);
  /* Hueco que la lista reserva por encima del texto para el eje. Se declara
     como variable porque los puntos cuelgan de cada `<li>`, no de la lista, y
     necesitan restarlo para alinearse con la línea. */
  --rvd-steps-pad: clamp(2.5rem, 4vw, 3.75rem);
  position: relative;
  display: grid;
  gap: 2rem 0;
  margin: 0;
  padding: var(--rvd-steps-pad) 0 0;
}

.rvd-steps__item {
  position: relative;
  text-align: center;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.45;
}

@media (min-width: 992px) {
  /* Las columnas son más anchas que el texto: en la referencia la línea más
     larga mide 224 px, así que el texto rompe antes de llenar su columna. Sin
     este tope los rótulos se estirarían a una sola línea. */
  .rvd-steps__item { max-width: 15rem; margin-inline: auto; }
}

/* Punto macizo de cada paso */
.rvd-steps__item::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--rvd-track-rule);
  width: var(--rvd-steps-node);
  height: var(--rvd-steps-node);
}

/* La línea del eje: pseudoelemento y no `background`, porque debe arrancar y
   terminar en el centro del primer y del último punto, y un `background-size`
   en porcentaje no permite fijar los dos extremos a la vez. */
.rvd-steps__list::before {
  content: "";
  position: absolute;
  background: var(--rvd-track-rule);
}

/* --- Móvil: el eje se vuelve vertical y corre por la izquierda --- */
@media (max-width: 991.98px) {
  .rvd-steps__list { padding: 0 0 0 2.25rem; }

  .rvd-steps__item { text-align: left; }

  .rvd-steps__item::before {
    left: -2.25rem;
    top: .72em;
    transform: translate(-50%, -50%);
  }

  .rvd-steps__list::before {
    left: calc(-2.25rem - .5px);
    top: .72em;
    bottom: .72em;
    width: 1px;
    margin-left: 2.25rem;
  }
}

/* --- Desde lg: cinco columnas con el eje horizontal por encima ---
   Las columnas no son iguales: en la referencia los puntos caen en
   157.5 / 468.5 / 777.5 / 1083.5 / 1333.5 px, de modo que las columnas
   guardan la proporción 311 : 310 : 307 : 278 : 250. Con esos `fr` los
   puntos aterrizan donde el diseño los pone a cualquier ancho. */
@media (min-width: 992px) {
  .rvd-steps__list {
    grid-auto-flow: column;
    grid-template-columns: 311fr 310fr 307fr 278fr 250fr;
  }

  .rvd-steps__item::before {
    left: 50%;
    /* El punto se posiciona contra su `<li>`, que empieza donde acaba el
       relleno superior de la lista: hay que descontarlo para caer sobre la
       línea, que sí se mide desde el borde de la lista. */
    top: calc(var(--rvd-steps-axis) - var(--rvd-steps-pad));
    transform: translate(-50%, -50%);
  }

  /* Centro de la primera columna: 155.5/1456 = 10.68 %.
     Centro de la última:  1331/1456 = 91.42 %, o sea 8.58 % desde la derecha. */
  .rvd-steps__list::before {
    left: 10.68%;
    right: 8.58%;
    top: var(--rvd-steps-axis);
    height: 1px;
  }
}

/* El cierre comparte franja con el eje, así que renuncia a su propio fondo */
.rvd-cta-band--inline { background: none; }


/* ==========================================================================
   PÁGINA TECNOLOGÍA Y ACTIVOS REGENERATIVOS
   Medidas de layout-img/8.TecnologiaActivos-desktop.png (3075 × 11758 px sobre
   un viewport de diseño de 1475 px; factor 2.0847). Cortes verticales:
     hero        0 ..  830    tecnologías médicas   830 .. 2747
     banda    2747 .. 3090    complementarias      3090 .. 3930
     activos  3930 .. 4773    cierre               4773 .. 5086

   El hero, la banda y el cierre reutilizan `.rvd-hero--start`, `.rvd-band` y
   `.rvd-cta-band`. Lo propio de la página son cuatro piezas: el divisor con
   rótulo, los bloques de plataforma, la retícula de complementarias y el marco
   de activos.
   ========================================================================== */

/* ---------------------------  Divisor con rótulo  ---------------------------

   Regla — rótulo — regla. En la referencia ocupa 1412 px de los 1475 del
   viewport: es más ancho que el contenido que separa (1265), y esa diferencia
   es deliberada, así que lleva caja propia en vez de heredar el contenedor. */

.rvd-rulelabel {
  display: flex;
  align-items: center;
  gap: 1.25rem;                 /* 20 px medidos entre regla y rótulo */
  max-width: 1460px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.rvd-rulelabel::before,
.rvd-rulelabel::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rvd-rule);
}

.rvd-rulelabel__text {
  font-family: var(--rvd-body);
  font-size: clamp(.9rem, 1.2vw, 1.05rem);
  font-weight: 400;
  letter-spacing: .42em;        /* el rótulo mide 423 px en la referencia */
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--rvd-muted);
  /* El tracking añade un hueco fantasma tras la última letra: sin esto el
     rótulo queda descentrado media letra respecto a las reglas. */
  margin: 0 -.42em 0 0;
  white-space: nowrap;
}

/* En pantallas estrechas el rótulo no cabe en una línea, y al ocupar todo el
   ancho las reglas se quedaban en cero: en vez de dejar dos líneas invisibles,
   el divisor se queda solo con el rótulo, centrado. */
@media (max-width: 767.98px) {
  .rvd-rulelabel { justify-content: center; }
  .rvd-rulelabel::before,
  .rvd-rulelabel::after { display: none; }
  .rvd-rulelabel__text { white-space: normal; text-align: center; }
}

/* El titular de apertura no vive dentro de ninguna de las piezas anteriores,
   así que recoge aquí los márgenes laterales de la maqueta. */
@media (max-width: 991.98px) {
  .rvd-techhead { padding-inline: 20%; }
}

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

/* En `tratamientos-corporales.html` el fondo oscuro de «Firmeza y
   reafirmación» arranca en el píxel 79 de los 1475 del viewport de diseño.
   Medido en layout-img/7.TratamientosCorporales-desktop.png: el fondo ocupa
   de x 79 a 1475 y de y 2136 a 2941. */
.rvd-firmeza { --rvd-derm-hueco: 5.36%; margin-top: 3rem; }
.rvd-derm__body.left-spacing__desk { padding-left: 2vw; }
@media (min-width: 992px) and (max-width: 1299.98px) {
  .rvd-derm__body.left-space__desk { padding-left: 9vw; }
}

/* ---------------------------  Bloques de plataforma  ---------------------------

   Foto sangrando a un borde de la página con un rectángulo oscuro detrás, algo
   más estrecho que ella, y el texto al otro lado. El texto se alinea hacia el
   lado de la foto —a la izquierda en el primer bloque, a la derecha en el
   segundo—, que es como lo resuelve la referencia. */

.rvd-platform { padding: 3rem 0; }

.rvd-platform__title {
  font-family: var(--rvd-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--rvd-ink);
  margin-bottom: 1.5rem;
}

.rvd-platform__text {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.38;
  max-width: 693px;             /* la línea más larga de la referencia */
  margin-bottom: 0;
}

.rvd-platform__media {
  display: block;
  width: 100%;
  aspect-ratio: 570 / 653;
  object-fit: cover;
}

/* Sin la retícula de dos columnas la fotografía dejaría de tener enfrente el
   texto y ocuparía todo el ancho: a 768 px eso son 880 px de alto. Aquí recoge
   los mismos márgenes laterales que el texto. */
@media (max-width: 991.98px) {
  .rvd-platform__body,
  .rvd-platform__figure { padding: 0 20%; }
  .rvd-platform__figure { margin-bottom: 2rem; }
  .rvd-firmeza { margin-top: 0; }
  .rvd-platform--end { background-color: var(--rvd-black); color: var(--rvd-cream); }
  .rvd-platform--end .rvd-platform__title { color: var(--rvd-cream); }
}

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

@media (min-width: 992px) {
  /* La sección va a sangre: la foto tiene que alcanzar el borde del viewport,
     así que aquí no hay contenedor y los anchos van en porcentaje. */
  .rvd-platform {
    display: grid;
    grid-template-columns: 38.64% 1fr;   /* 570 y 660 px de 1475 */
    column-gap: 6.1%;                    /* 90 px entre foto y texto */
    align-items: center;
    padding-right: 2.24%;                /* 33 px, como el resto de la página */
  }

  /* En la referencia las dos fotografías se tocan —3 px entre ellas— y los
     paneles se solapan 87 px. No estorba: uno cuelga del borde izquierdo y el
     otro del derecho, así que nunca coinciden en horizontal. */
  .rvd-platform + .rvd-platform { margin-top: 0; }

  .rvd-rulelabel + .rvd-platform { margin-top: clamp(3rem, 9.5vw, 6px); }

  .rvd-platform__figure { position: relative; }

  /* El panel es más estrecho que la foto y asoma por arriba y por abajo:
     medido, 450 de los 570 px de ancho y 46/45 px de desborde vertical. */
  /* La fotografía ya nace pegada al borde de la página, así que al panel le
     basta con quedarse dentro de ella: sin `-100vw` no hace falta recortar la
     sección, y el desborde vertical de 46/45 px se ve, que es lo que pide la
     referencia. */
  .rvd-platform__figure::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -2.9rem;
    bottom: -2.8rem;
    left: 0;
    right: 21.05%;
    background-color: var(--rvd-black);
    background-image: url('../img/home/home-textura-oscura.jpg');
    background-size: 100% 100%;
    background-position: center;
  }

  .rvd-platform__media { position: relative; z-index: 1; }

  /* Variante espejo: foto a la derecha, texto alineado a la derecha */
  .rvd-platform--end {
    grid-template-columns: 1fr 38.64%;
    padding-right: 0;
    padding-left: 2.24%;
  }

  .rvd-platform--end .rvd-platform__figure { order: 2; }
  .rvd-platform--end .rvd-platform__body   { order: 1; text-align: right; }
  .rvd-platform--end .rvd-platform__text   { margin-left: auto; }

  .rvd-platform--end .rvd-platform__figure::before {
    left: 21%;
    right: 0;
  }
}

/* ---------------------------  Tecnologías complementarias  ---------------------------

   Cuatro fichas en dos columnas, cada una abierta por una regla capilar
   superior: el mismo recurso que `.rvd-features__item`, girado. */

.rvd-complement {
  max-width: 1313px;            /* 1265 px de contenido a 1475 de viewport */
  margin-inline: auto;
  padding-inline: 1.5rem;
  /* Separaciones medidas en la referencia: 89 px del divisor a la primera
     regla, 277 px de paso entre filas —de los que 95 son el hueco— y 127 px
     hasta el final de la franja. */
  margin-block: clamp(2.5rem, 6vw, 89px) clamp(1rem, 3.6vw, 53px);
  display: grid;
  gap: clamp(2.5rem, 6.4vw, 95px) clamp(2rem, 9.6vw, 142px);
}

/* Dos columnas solo desde lg: con el margen lateral del 20 % vigente por
   debajo, a 768 px quedarían columnas de 193 px y el texto se rompería en
   jirones. Entre medias las cuatro fichas se apilan. */
@media (min-width: 992px) {
  .rvd-complement { grid-template-columns: 1fr 1fr; }
}

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

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

.rvd-complement__item {
  border-top: 1px solid var(--rvd-rule);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.rvd-complement__name {
  font-family: var(--rvd-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.9vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--rvd-ink);
  margin-bottom: 1rem;
}

.rvd-complement__text {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.45;
  margin-bottom: 0;
}

/* ---------------------------  Activos regenerativos  ---------------------------

   Franja con fotografía de fondo y velo, y sobre ella un marco de 2 × 2 con
   reglas capilares. Es la única retícula de la maqueta que se dibuja como
   tabla; el marco es lo que la separa del fondo sin necesidad de una caja
   opaca que taparía la fotografía. */

.rvd-actives {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 6.6vw, 6.2rem);
  color: var(--rvd-cream);
}

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

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

.rvd-actives__inner {
  position: relative;
  max-width: 1249px;            /* 1201 px de marco a 1475 de viewport */
  margin-inline: auto;
  padding-inline: 1.5rem;
}

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

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

.rvd-actives__title {
  color: var(--rvd-cream);
  margin-bottom: .75rem;
}

.rvd-actives__lead {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.35;
  text-align: center;
  color: var(--rvd-muted);
  margin-bottom: clamp(2.5rem, 4.4vw, 4rem);
}

/* Las reglas interiores se hacen con `gap` + `outline` de las celdas para no
   duplicar líneas en los cruces: un `border` por celda dejaría 2 px donde se
   tocan. Aquí el hueco de 1 px del `gap` deja ver el fondo del marco. */
.rvd-actives__grid {
  display: grid;
  background: transparent;
  border: 1px solid var(--rvd-rule-light);
}

@media (min-width: 992px) {
  .rvd-actives__grid { grid-template-columns: 1fr 1fr; }
}

.rvd-actives__cell {
  padding: clamp(1.75rem, 3.7vw, 3.4rem);
  border: 1px solid var(--rvd-rule-light);
}

@media (min-width: 992px) {
  /* 240 px de alto por fila en la referencia */
  .rvd-actives__cell { min-height: 15rem; }
}

.rvd-actives__name {
  font-family: var(--rvd-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.8vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--rvd-cream);
  margin-bottom: 1rem;
}

.rvd-actives__text {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.4;
  color: rgba(242, 240, 234, .88);
  margin-bottom: 0;
}

/* ---------------------------  Titular mayor  ---------------------------

   «Tecnologías médicas» y «Activos regenerativos» son los titulares más
   grandes de la maqueta: 52 y 49 px de altura de caja alta en la referencia,
   frente a los 31 del resto. Van con su propio tamaño en vez de estirar
   `.rvd-title--center`, que gobierna a todas las demás páginas. */
.rvd-title--xl {
  font-size: clamp(2rem, 4.8vw, 4.5rem);
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 1rem;
}


/* ===========================  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;
  }
}