/* ==========================================================================
   REDISEÑO — dirección inmersiva
   ==========================================================================
   Hoja aparte, cargada DESPUÉS de style.css y solo por las páginas ya
   migradas. Así el piloto no puede romper las que aún no lo están.

   La idea: la fotografía manda. Cada sección ocupa su propio espacio, con
   aire suficiente para que se lea como un momento y no como una fila más.
   El texto va siempre sobre un velo calibrado, nunca sobre la foto desnuda.

   Usa los tokens de style.css. No redefine ninguno salvo los propios.
   ========================================================================== */

:root {
  --chrome: 132px;              /* barra de frases (40) + cabecera (92) */
  --medida: 62ch;               /* longitud de línea cómoda */
  --radio: 16px;
  --radio-grande: 24px;

  --ritmo-s: clamp(2rem, 4vw, 3rem);
  --ritmo-m: clamp(3.5rem, 7vw, 6rem);
  --ritmo-l: clamp(5rem, 10vw, 9rem);

  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Base de página
   -------------------------------------------------------------------------- */

body.r-pagina {
  background: var(--color-hueso);
  color: var(--color-tinta);
  overflow-x: hidden;
}

.r-main {
  display: block;
}

.r-contenedor {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* --------------------------------------------------------------------------
   Tipografía del rediseño
   -------------------------------------------------------------------------- */

/* El titular va siempre en un renglón. El tamaño no es una elección estética
   sino el que cabe con holgura. Medido: «Viajar es despertar» ocupa 12,5
   veces el tamaño de letra, y el hueco real —la caja de contenido del h1, ya
   descontados los márgenes del contenedor— es el 94,4 % del ancho de pantalla
   hasta 1194 px, y 1056 px fijos por encima.

   El titular se queda en el 80 % de ese hueco, no en el 100 %: a ras del
   borde cabía en un renglón pero seguía pareciendo enorme, que era la queja.
   De ahí `min(6vw, 66px)`. El `nowrap` deja dicho que partirlo no es una
   opción.

   Antes era `clamp(2.75rem, 8.5vw, 6.5rem)`: a 1280 px pedía 104 px donde
   caben 84, y se partía en dos. */
.r-display {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  /* En un teléfono, un renglón obliga a 23 px —más pequeño que el subtítulo
     de debajo—, así que ahí se parte en dos y se lee. El renglón único es
     para pantallas donde cabe a un tamaño de titular. */
  font-size: clamp(2rem, 9vw, 3rem);
  text-wrap: balance;
}

@media (min-width: 48rem) {
  .r-display {
    font-size: min(6vw, 66px);
    white-space: nowrap;
    text-wrap: wrap;
  }
}

/* El titular en inglés es otra cadena y ocupa otra cosa: «Traveling is
   awakening» mide 14,0 veces el tamaño de letra, frente a 12,5 de «Viajar es
   despertar». Lleva el suyo, del mismo 80 % del hueco. */
@media (min-width: 48rem) {
  html[lang="en"] .r-display {
    font-size: min(5.35vw, 59px);
  }
}

.r-titulo {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  line-height: 1.05;
  font-size: clamp(2rem, 5vw, 3.5rem);
  text-wrap: balance;
}

.r-entradilla {
  font-size: clamp(1.05rem, 2.2vw, 1.375rem);
  line-height: 1.55;
  max-width: var(--medida);
}

.r-texto {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.7;
  max-width: var(--medida);
}

.r-texto p + p {
  margin-top: 1em;
}

/* Rótulo pequeño que anuncia cada sección */
.r-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--fuente-titulo);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.r-rotulo::before {
  content: '';
  width: 2rem;
  height: 2px;
  background: var(--marca-turquesa);
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.r-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 56px;
  padding: 0 2rem;
  border-radius: 999px;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-align: center;
  transition: transform 0.25s var(--curva), background-color 0.25s var(--curva),
              color 0.25s var(--curva), border-color 0.25s var(--curva);
}

.r-btn:hover {
  transform: translateY(-2px);
}

.r-btn--primario {
  background: var(--marca-jade);
  color: var(--marca-hueso);
  border: 2px solid var(--marca-jade);
}

.r-btn--primario:hover {
  background: var(--color-jade-profundo);
  border-color: var(--marca-turquesa);
}

/* Secundario sobre foto: borde claro y base oscura.
   Con relleno casi transparente el texto blanco caía sobre la foto desnuda
   y daba 1,55:1; la base garantiza el contraste sin tapar la imagen. */
.r-btn--fantasma {
  background: rgba(10, 16, 26, 0.55);
  color: var(--color-blanco);
  border: 2px solid var(--marca-turquesa);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.r-btn--fantasma:hover {
  background: rgba(10, 16, 26, 0.72);
  border-color: var(--color-blanco);
}

/* Secundario sobre fondo claro */
.r-btn--linea {
  background: transparent;
  color: var(--color-tinta);
  border: 2px solid var(--color-tinta);
}

.r-btn--linea:hover {
  background: var(--color-tinta);
  color: var(--color-blanco);
}

.r-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   HERO — la primera pantalla
   -------------------------------------------------------------------------- */

.r-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  isolation: isolate;
  color: var(--color-blanco);
  padding-block: calc(var(--chrome) + 2rem) clamp(5rem, 12vh, 9rem);
  overflow: hidden;
}

.r-hero__media,
.r-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Velo: oscuro arriba para la cabecera, oscuro abajo para el texto,
   y transparente en la franja central para que la foto respire. */
.r-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(10, 16, 26, 0.58) 0%,
      rgba(10, 16, 26, 0.22) 30%,
      rgba(10, 16, 26, 0.32) 62%,
      rgba(10, 16, 26, 0.72) 100%
    );
}

.r-hero__contenido {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.r-hero__title {
  margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
}

.r-hero__sub {
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  line-height: 1.5;
  max-width: 34ch;
}

.r-hero__sub strong {
  font-weight: 700;
  display: block;
  margin-top: 0.4em;
}

.r-hero .r-acciones {
  justify-content: center;
}

/* Indicador de que hay más abajo */
.r-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 2.75rem);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  min-height: 44px;
  justify-content: flex-end;
}

.r-cue__linea {
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
  animation: r-cue-latido 2.4s var(--curva) infinite;
  transform-origin: top;
}

@keyframes r-cue-latido {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* --------------------------------------------------------------------------
   Secciones
   -------------------------------------------------------------------------- */

.r-seccion {
  padding-block: var(--ritmo-m);
  position: relative;
}

.r-seccion--claro {
  background: var(--color-hueso);
  color: var(--color-tinta);
}

.r-seccion--arena {
  background: var(--color-arena);
  color: var(--color-tinta);
}

/* Sección inmersiva: foto a sangre con velo, texto claro encima */
.r-seccion--foto {
  color: var(--color-blanco);
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--ritmo-l);
}

.r-seccion--foto > .r-fondo,
.r-seccion--foto > .r-fondo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.r-seccion--foto::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 16, 26, 0.66) 0%,
    rgba(10, 16, 26, 0.48) 45%,
    rgba(10, 16, 26, 0.70) 100%
  );
}

/* --------------------------------------------------------------------------
   Manifiesto — foto grande junto al texto
   -------------------------------------------------------------------------- */

.r-manifiesto__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  .r-manifiesto__grid {
    grid-template-columns: 1.05fr 1fr;
  }
}

.r-manifiesto__figura {
  margin: 0;
  border-radius: var(--radio-grande);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 2px solid var(--marca-turquesa);
}

.r-manifiesto__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------
   Lo que hacemos — tres piezas
   -------------------------------------------------------------------------- */

.r-pilares {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: 1fr;
  margin-top: var(--ritmo-s);
}

@media (min-width: 48rem) {
  .r-pilares { grid-template-columns: repeat(3, 1fr); }
}

.r-pilar {
  background: var(--color-blanco);
  border-radius: var(--radio-grande);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--curva), border-color 0.3s var(--curva);
}

.r-pilar:hover {
  transform: translateY(-6px);
  border-color: var(--marca-jade);
}

.r-pilar__figura {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.r-pilar__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--curva);
}

.r-pilar:hover .r-pilar__figura img {
  transform: scale(1.04);
}

.r-pilar__cuerpo {
  padding: clamp(1.5rem, 3vw, 2rem);
}

.r-pilar__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.r-pilar__texto {
  font-size: 1rem;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Voces — testimonios, todos visibles
   -------------------------------------------------------------------------- */

/* Flex y no rejilla: las reseñas son siete y una rejilla de tres columnas deja
   la última sola y pegada a la izquierda, como si faltara algo. Envolviendo con
   flex, la fila incompleta se centra y parece intencionada. El `flex-basis` es
   lo que fija las tres por fila; `max-width` evita que una fila de dos se
   estire hasta quedar desproporcionada. */
.r-voces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: var(--ritmo-s);
}

.r-voz {
  flex: 1 1 100%;
}

@media (min-width: 48rem) {
  .r-voz {
    flex: 0 1 calc((100% - 2 * clamp(1.25rem, 3vw, 2rem)) / 3);
    max-width: calc((100% - 2 * clamp(1.25rem, 3vw, 2rem)) / 3);
  }
}

/* --------------------------------------------------------------------------
   El carrusel
   Solo actúa cuando js/carrusel.js ha montado la clase. Sin JS, lo de arriba
   —las siete en su rejilla— se queda tal cual.
   -------------------------------------------------------------------------- */

.r-voces.js-carrusel {
  display: block;
  position: relative;
}

/* Las fichas se apilan en la misma celda: así la altura del carrusel es la de
   la reseña más larga y no da un salto cada vez que cambia. Animar la altura
   sería más ajustado pero mueve la página mientras se lee. */
.js-carrusel .r-voces__pista {
  display: grid;
  grid-template-areas: 'ficha';
  align-items: stretch;
}

.js-carrusel .r-voz {
  grid-area: ficha;
  flex: none;
  max-width: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.45s var(--curva), transform 0.45s var(--curva), visibility 0.45s;
}

.js-carrusel .r-voz.es-activa {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* --- Mandos --- */

.js-carrusel .r-voces__mandos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.js-carrusel .r-voces__flecha {
  /* 44x44 es el mínimo que pide la WCAG 2.2 para algo que se pulsa. */
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s var(--curva), border-color 0.3s var(--curva);
}

.js-carrusel .r-voces__flecha svg {
  width: 20px;
  height: 20px;
}

.js-carrusel .r-voces__flecha:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: var(--marca-turquesa, #33c3b2);
}

.js-carrusel .r-voces__puntos {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.js-carrusel .r-voces__punto {
  /* El punto se ve pequeño pero el área que se pulsa mide 44x44: el relleno
     es transparente y solo pinta el redondel del centro. */
  width: 28px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.js-carrusel .r-voces__punto::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.40);
  transition: background-color 0.3s var(--curva), transform 0.3s var(--curva);
}

.js-carrusel .r-voces__punto:hover::before {
  background: rgba(255, 255, 255, 0.75);
}

.js-carrusel .r-voces__punto.es-activo::before {
  background: var(--marca-turquesa, #33c3b2);
  transform: scale(1.35);
}

@media (min-width: 48rem) {
  /* Una sola reseña no debe ocupar todo el ancho: a línea muy larga cuesta
     seguir el renglón. */
  .js-carrusel .r-voces__pista {
    max-width: 58rem;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-carrusel .r-voz {
    transition: none;
    transform: none;
  }

  .js-carrusel .r-voces__flecha,
  .js-carrusel .r-voces__punto::before {
    transition: none;
  }
}

.r-voz {
  margin: 0;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radio);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.r-voz__cita {
  font-size: 1.05rem;
  line-height: 1.6;
  /* Dobles curvas en todo el sitio. Estaban en angulares y el resto del
     texto usa dobles, así que no casaban. */
  quotes: '“' '”';
}

.r-voz__cita::before { content: open-quote; }
.r-voz__cita::after  { content: close-quote; }

.r-voz__firma {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   Confianza — cómo trabajamos
   -------------------------------------------------------------------------- */

.r-confianza {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: 1fr;
  margin-top: var(--ritmo-s);
}

@media (min-width: 48rem) {
  .r-confianza { grid-template-columns: repeat(3, 1fr); }
}

/* Filete turquesa igual por los cuatro lados. Llevaba una barra jade de 6 px
   a la izquierda y la esquina de ese lado sin redondear, y rompía la simetría
   de la fila. */
.r-dato {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 2px solid var(--marca-turquesa);
  background: var(--marca-hueso);
  border-radius: var(--radio);
}

.r-dato__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.r-dato__texto {
  font-size: 0.98rem;
  line-height: 1.6;
}

.r-dato__texto a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Instagram
   -------------------------------------------------------------------------- */

.r-social__grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  justify-content: center;
  margin-top: var(--ritmo-s);
}

/* --------------------------------------------------------------------------
   Cierre
   -------------------------------------------------------------------------- */

.r-cierre__contenido {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.r-cierre .r-acciones {
  justify-content: center;
}

.r-cierre .r-entradilla {
  margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   Aparición al hacer scroll
   Sin JS o sin soporte, el contenido se ve igual: la clase solo se añade
   cuando el observador está activo.
   -------------------------------------------------------------------------- */

/* El `.js-anima` lo pone animaciones.js al arrancar. Sin esa clase no se
   oculta nada: si el JS no llega a ejecutarse, la portada se lee entera en vez
   de quedarse en blanco. */
/* Mismo criterio que en animaciones.css: el estado oculto lleva
   `:not(.r-visible)` y el revelado no declara `transform`. Con la regla de
   llegada, su 0,3,0 le ganaba a `.r-pilar:hover` y las piezas de la portada
   dejaban de moverse en cuanto aparecían. */
.js-anima .r-revela {
  transition: opacity 0.7s var(--curva), transform 0.7s var(--curva);
}

.js-anima .r-revela:not(.r-visible) {
  opacity: 0;
  transform: translateY(24px);
}

/* Escalonado suave dentro de una rejilla */
.js-anima .r-revela:nth-child(2) { transition-delay: 0.08s; }
.js-anima .r-revela:nth-child(3) { transition-delay: 0.16s; }

/* --------------------------------------------------------------------------
   Menos movimiento
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js-anima .r-revela,
  .js-anima .r-revela:not(.r-visible) {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .r-cue__linea {
    animation: none;
    opacity: 0.8;
  }

  .r-btn:hover,
  .r-pilar:hover,
  .r-pilar:hover .r-pilar__figura {
    transform: none;
  }

  .r-pilar:hover .r-pilar__figura img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Móvil
   -------------------------------------------------------------------------- */

@media (max-width: 47.999rem) {
  .r-hero {
    padding-block: calc(var(--chrome) + 1rem) 6rem;
  }

  .r-hero .r-acciones {
    flex-direction: column;
    width: 100%;
    max-width: 22rem;
  }

  .r-hero .r-btn {
    width: 100%;
  }

  .r-manifiesto__figura {
    aspect-ratio: 3 / 2;
  }
}

/* --------------------------------------------------------------------------
   Rejilla de Instagram: tres columnas de verdad, no tarjetas de ancho fijo
   que se reparten mal al envolver.
   -------------------------------------------------------------------------- */

.r-social__grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}

@media (min-width: 48rem) {
  .r-social__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.r-social__grid .ig-frame {
  width: 100%;
  max-width: 340px;
  height: 440px;
}

/* --------------------------------------------------------------------------
   Ajustes de ritmo del hero
   -------------------------------------------------------------------------- */

/* El subtítulo va en dos renglones marcados, no donde caiga: la frase entera
   arriba y la cita debajo. Con un `max-width` en caracteres, «digas» se caía
   sola al segundo renglón y la cita al tercero. Cada parte es un bloque y
   arriba de 48rem no se parte; por debajo sí, porque en un teléfono no cabe. */
.r-hero__sub {
  max-width: none;
}

.r-hero__linea {
  display: block;
}

@media (min-width: 48rem) {
  .r-hero__linea {
    white-space: nowrap;
  }
}

.r-hero__title {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* Indicador de scroll: área pulsable completa.
   (El área táctil de los enlaces del pie la lleva ahora marca.css, junto con
   el resto del pie.) */
.r-cue {
  min-width: 44px;
  padding-inline: 0.75rem;
}


/* ==========================================================================
   PANEL INMERSIVO
   Una sola frase sobre la foto, sin tarjeta ni columna de texto. El velo va
   en diagonal desde la derecha: la foto respira por la izquierda mientras el
   texto se apoya en la zona oscura. En móvil no hay anchura para ese reparto,
   así que el velo pasa a vertical y la frase se centra.
   ========================================================================== */

.r-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--marca-hueso);
  min-height: 78svh;
  display: grid;
  align-items: center;
  padding-block: var(--ritmo-l);
}

.r-panel > .r-fondo,
.r-panel > .r-fondo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.r-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    260deg,
    rgba(8, 14, 13, 0.88) 0%,
    rgba(8, 14, 13, 0.76) 36%,
    rgba(8, 14, 13, 0.30) 70%,
    rgba(8, 14, 13, 0.08) 100%
  );
}

.r-panel__contenido {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.r-panel__frase {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3.25rem);
  line-height: 1.12;
  max-width: 22ch;
  text-wrap: balance;
}

/* El rótulo sobre foto va en el verde de acento, que es el único de la paleta
   que aguanta sobre el velo oscuro. */
.r-rotulo--claro {
  color: var(--marca-verde);
}

.r-rotulo--claro::before {
  background: var(--marca-verde);
}

@media (max-width: 47.999rem) {
  .r-panel {
    min-height: 0;
    padding-block: var(--ritmo-m);
  }

  .r-panel::after {
    background: linear-gradient(
      180deg,
      rgba(8, 14, 13, 0.60) 0%,
      rgba(8, 14, 13, 0.70) 100%
    );
  }

  .r-panel__contenido {
    align-items: flex-start;
    text-align: left;
  }

  .r-panel__frase {
    max-width: none;
  }
}

/* ==========================================================================
   LO QUE HACEMOS — como estaba antes
   Sin tarjeta, sin borde y sin fondo propio: la foto con esquinas redondeadas
   y el texto debajo, sobre el azul claro de la sección.
   ========================================================================== */

.r-titulo--centrado {
  text-align: center;
  display: block;
  margin-inline: auto;
}

.r-pilar {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

/* Aquí ya no hay tarjeta que levantar, así que el bloque entero se queda
   quieto y el gesto lo hace la foto: sube un poco y se acerca. */
.r-pilar:hover {
  transform: none;
  border-color: transparent;
}

.r-pilar__figura {
  aspect-ratio: 1;
  border-radius: var(--radio-grande);
  overflow: hidden;
  margin-bottom: 1.5rem;
  transition: transform 0.42s var(--curva);
}

@media (hover: hover) and (pointer: fine) {
  .r-pilar:hover .r-pilar__figura {
    transform: translate3d(0, -6px, 0);
  }
}

.r-pilar:hover .r-pilar__figura img {
  transform: scale(1.04);
}

.r-pilar__cuerpo {
  padding: 0;
}

.r-pilar__titulo {
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  margin-bottom: 0.65rem;
}