/* =====================================================================
   RURIX — Hoja de estilos del tema
   Réplica del diseño original. Las medidas (contenedor 1296px, padding
   72px, radios de 8px) están tomadas del diseño de partida para que la
   web se vea exactamente igual.
   ===================================================================== */

/* ---------- Tipografía autoalojada -----------------------------------
   Inter va servida desde el propio dominio: así no depende de Google ni
   de ningún CDN externo, carga antes y no envía datos de los visitantes
   a terceros (importante para el aviso de cookies).                     */
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff2") format("woff2");  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.woff2") format("woff2");   font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Bold.woff2") format("woff2");     font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-ExtraBold.woff2") format("woff2");font-weight: 800; font-style: normal; font-display: swap; }

/* ---------- Variables de diseño -------------------------------------- */
:root {
  /* Colores de marca */
  --rx-rojo:        #ee5454;
  --rx-rojo-oscuro: #d43f3f;
  --rx-rojo-suave:  #fdecec;
  --rx-azul:        #2b3252;   /* azul marino corporativo */
  --rx-azul-claro:  #333a57;
  --rx-azul-hondo:  #252b47;   /* pie de página */
  --rx-texto:       #5b6178;   /* texto corrido */
  --rx-texto-tenue: #9aa0b5;
  --rx-blanco:      #ffffff;
  --rx-fondo:       #f7f8fb;   /* fondo de secciones alternas */
  --rx-fondo-2:     #eef1f8;
  --rx-borde:       #e7eaf1;

  /* Medidas */
  --rx-contenedor:  1296px;
  --rx-margen:      72px;      /* margen lateral en escritorio */
  --rx-seccion:     80px;      /* aire vertical entre secciones */
  --rx-radio:       8px;
  --rx-radio-g:     16px;

  /* Alturas de cabecera: se usan para el desplazamiento de las anclas */
  --rx-topbar:      48px;
  --rx-nav:         87px;
}

/* ---------- Reinicio y base ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Al saltar a un ancla, deja hueco para que la cabecera fija no tape el título */
:target { scroll-margin-top: calc(var(--rx-nav) + 24px); }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--rx-texto);
  background: var(--rx-blanco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Los iconos van incrustados como SVG sin atributos de tamaño. Sin esta
   medida por defecto el navegador los estira hasta ocupar todo el ancho
   disponible (una flecha tan grande como el botón entero). Las reglas
   concretas de más abajo la sobrescriben donde hace falta otro tamaño. */
svg:not([width]) { width: 18px; height: 18px; flex: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  color: var(--rx-azul);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.375rem); letter-spacing: -1.5px; line-height: 1.06; }
h2 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); letter-spacing: -0.8px; }
h3 { font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); font-weight: 700; letter-spacing: -0.3px; }
h4 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.2px; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Solo visible para lectores de pantalla */
.rx-oculto {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Enlace de salto: aparece al tabular, para quien navega con teclado */
.rx-saltar {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--rx-azul); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.rx-saltar:focus { left: 0; }

/* Foco visible y coherente en toda la web */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--rx-rojo);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Estructura ------------------------------------------------ */
.rx-contenedor {
  width: 100%;
  max-width: calc(var(--rx-contenedor) + var(--rx-margen) * 2);
  margin-inline: auto;
  padding-inline: var(--rx-margen);
}

.rx-seccion { padding-block: var(--rx-seccion); }
.rx-seccion--gris { background: var(--rx-fondo); }
.rx-seccion--gris2 { background: var(--rx-fondo-2); }
.rx-seccion--azul { background: var(--rx-azul); color: rgba(255,255,255,.82); }
.rx-seccion--azul h2, .rx-seccion--azul h3 { color: #fff; }

/* ---------- Elementos de texto recurrentes --------------------------- */

/* Antetítulo rojo en versalitas ("SERVICIOS", "FAQ"...) */
.rx-antetitulo {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rx-rojo);
}
.rx-antetitulo--raya::before {
  content: ""; width: 28px; height: 2px; background: var(--rx-rojo); flex: none;
}
.rx-antetitulo--centrado { justify-content: center; }

.rx-entradilla {
  font-size: 1.0625rem; line-height: 1.65; color: var(--rx-texto); max-width: 72ch;
}
.rx-seccion--azul .rx-entradilla { color: rgba(255,255,255,.82); }

/* Cabecera de sección: antetítulo + h2 + entradilla */
.rx-cabecera-seccion { margin-bottom: 40px; }
.rx-cabecera-seccion--centrada { text-align: center; }
.rx-cabecera-seccion--centrada .rx-entradilla { margin-inline: auto; }
.rx-cabecera-seccion--fila {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}

/* ---------- Botones --------------------------------------------------- */
.rx-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px;
  border-radius: var(--rx-radio);
  border: 1px solid transparent;
  font-size: .9375rem; font-weight: 600; line-height: 1.2;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.rx-boton:hover { transform: translateY(-1px); }
.rx-boton svg { flex: none; }

.rx-boton--rojo { background: var(--rx-rojo); color: #fff; }
.rx-boton--rojo:hover { background: var(--rx-rojo-oscuro); color: #fff; }

.rx-boton--linea { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); }
.rx-boton--linea:hover { background: #fff; color: var(--rx-azul); border-color: #fff; }

.rx-boton--blanco { background: #fff; color: var(--rx-azul); border-color: var(--rx-borde); }
.rx-boton--blanco:hover { border-color: var(--rx-azul); }

/* Enlace rojo con flecha ("Ver soluciones para operadores ›") */
.rx-enlace {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--rx-rojo); font-weight: 600; font-size: .9375rem;
}
.rx-enlace::after {
  content: ""; width: 7px; height: 7px; flex: none;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.rx-enlace:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* ---------- Tarjeta genérica ----------------------------------------- */
.rx-tarjeta {
  background: #fff;
  border: 1px solid var(--rx-borde);
  border-radius: var(--rx-radio);
  padding: 32px;
  display: flex; flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.rx-tarjeta:hover { border-color: #d9dee9; box-shadow: 0 10px 30px rgba(43,50,82,.07); transform: translateY(-2px); }

/* Icono cuadrado rosa de las tarjetas */
.rx-icono {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--rx-rojo-suave); color: var(--rx-rojo);
  margin-bottom: 20px;
}
.rx-icono svg { width: 22px; height: 22px; }

/* Rejillas */
.rx-rejilla { display: grid; gap: 24px; }
.rx-rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rx-rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rx-rejilla--4 { grid-template-columns: repeat(4, 1fr); }

/* =====================================================================
   CABECERA
   ===================================================================== */

/* Barra superior azul con teléfono, redes e idioma */
.rx-topbar {
  background: var(--rx-azul);
  color: rgba(255,255,255,.9);
  font-size: .8125rem;
}
.rx-topbar__inner {
  min-height: var(--rx-topbar);
  display: flex; align-items: center; justify-content: flex-end; gap: 18px;
}
.rx-topbar a { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-weight: 600; }
.rx-topbar a:hover { color: #fff; }
.rx-topbar svg { width: 15px; height: 15px; }
.rx-topbar__sep { width: 1px; height: 16px; background: rgba(255,255,255,.28); }

/* Cabecera principal blanca y pegajosa */
.rx-cabecera {
  position: sticky; top: 0; z-index: 90;
  background: #fff;
  border-bottom: 1px solid var(--rx-borde);
}
.rx-cabecera__inner {
  min-height: var(--rx-nav);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.rx-logo img { height: 34px; width: auto; }

/* --- Navegación de escritorio --- */
.rx-nav { display: flex; align-items: center; gap: 4px; }

/* Los elementos del menú NO crean contexto de posicionamiento: así el panel
   desplegable se ancla a la cabecera y ocupa todo el ancho, como en el diseño.
   Si fueran «relative», el panel colgaría del ancho del enlace y se saldría
   de la pantalla. */
.rx-nav__item { position: static; }

.rx-nav__enlace {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  font-size: .9375rem; font-weight: 500; color: var(--rx-azul);
  border-radius: 6px;
  transition: color .18s ease;
}
.rx-nav__enlace:hover, .rx-nav__item--abierto > .rx-nav__enlace { color: var(--rx-rojo); }

/* Subrayado rojo de la página actual */
.rx-nav__item--activo > .rx-nav__enlace { color: var(--rx-rojo); }
.rx-nav__item--activo > .rx-nav__enlace::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--rx-rojo);
}
/* La cabecera es el marco al que se ancla el desplegable */
.rx-cabecera { position: sticky; }

/* Flecha del desplegable */
.rx-nav__flecha {
  width: 8px; height: 8px; flex: none;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.rx-nav__item--abierto .rx-nav__flecha { transform: rotate(-135deg) translate(-2px, -2px); }

/* --- Megamenú --- */
.rx-mega {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--rx-borde);
  box-shadow: 0 24px 48px rgba(43,50,82,.10);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
/* El megamenú se ancla al ancho de la cabecera, no al del elemento de nav */
.rx-nav__item--abierto > .rx-mega { opacity: 1; visibility: visible; transform: translateY(0); }

.rx-mega__inner { padding-block: 32px 0; }
.rx-mega__cols { display: grid; gap: 32px; padding-bottom: 24px; }
.rx-mega__cols--2 { grid-template-columns: repeat(2, 1fr); }
.rx-mega__cols--3 { grid-template-columns: repeat(3, 1fr); }
.rx-mega__cols--4 { grid-template-columns: repeat(4, 1fr); }
.rx-mega__cols--5 { grid-template-columns: repeat(5, 1fr); }

.rx-mega__titulo {
  margin: 0 0 18px;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rx-azul);
}
.rx-mega__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rx-mega__enlace {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .9375rem; font-weight: 500; color: var(--rx-azul);
}
.rx-mega__enlace:hover { color: var(--rx-rojo); }
.rx-mega__enlace svg { width: 17px; height: 17px; flex: none; color: var(--rx-rojo); }
.rx-mega__mas { font-size: .875rem; color: var(--rx-texto-tenue); font-weight: 500; }
.rx-mega__mas:hover { color: var(--rx-rojo); }

.rx-mega__pie {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-block: 18px; border-top: 1px solid var(--rx-borde);
}
.rx-mega__nota { font-size: .875rem; font-style: italic; color: var(--rx-texto-tenue); margin: 0; }

/* Fila única (menú de Actualidad) */
.rx-mega__fila {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-bottom: 24px;
}

/* --- Selector de idioma --- */
.rx-idioma { position: relative; }
.rx-idioma__boton {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 0; cursor: pointer;
  color: inherit; font-size: .8125rem; font-weight: 600;
  padding: 6px 4px;
}
.rx-idioma__globo { width: 15px; height: 15px; color: var(--rx-rojo); }
.rx-idioma__flecha {
  width: 7px; height: 7px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px,-1px);
}
.rx-idioma__lista {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 148px; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--rx-borde); border-radius: var(--rx-radio);
  box-shadow: 0 16px 32px rgba(43,50,82,.14);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 20;
}
.rx-idioma--abierto .rx-idioma__lista { opacity: 1; visibility: visible; transform: translateY(0); }
.rx-idioma__lista a {
  display: block; padding: 9px 12px; border-radius: 6px;
  font-size: .875rem; font-weight: 500; color: var(--rx-azul);
}
.rx-idioma__lista a:hover { background: var(--rx-fondo); color: var(--rx-rojo); }
.rx-idioma__lista a[aria-current="true"] { color: var(--rx-rojo); font-weight: 700; }

/* --- Botón hamburguesa --- */
.rx-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; color: var(--rx-azul);
}
.rx-burger__caja { position: relative; width: 22px; height: 16px; }
.rx-burger__caja span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.rx-burger__caja span:nth-child(1) { top: 0; }
.rx-burger__caja span:nth-child(2) { top: 7px; }
.rx-burger__caja span:nth-child(3) { top: 14px; }
.rx-burger[aria-expanded="true"] .rx-burger__caja span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.rx-burger[aria-expanded="true"] .rx-burger__caja span:nth-child(2) { opacity: 0; }
.rx-burger[aria-expanded="true"] .rx-burger__caja span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* --- Menú móvil --- */
.rx-movil {
  position: fixed; inset: 0; z-index: 100;
  background: #fff;
  display: flex; flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s ease;
  visibility: hidden;
}
.rx-movil--abierto { transform: translateX(0); visibility: visible; }
.rx-movil__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--rx-borde);
}
.rx-movil__cerrar {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer; color: var(--rx-azul);
}
.rx-movil__cuerpo { padding: 24px; flex: 1; }
.rx-movil__lista { list-style: none; margin: 0; padding: 0; }
.rx-movil__item { border-bottom: 1px solid var(--rx-borde); }
.rx-movil__enlace {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 16px 0;
  background: transparent; border: 0; text-align: left; cursor: pointer;
  font-size: 1.0625rem; font-weight: 700; color: var(--rx-azul);
}
.rx-movil__enlace .rx-nav__flecha { color: var(--rx-texto-tenue); }
.rx-movil__sub {
  list-style: none; margin: 0; padding: 0 0 12px 12px;
  display: none;
}
.rx-movil__item--abierto .rx-movil__sub { display: block; }
.rx-movil__item--abierto > .rx-movil__enlace .rx-nav__flecha { transform: rotate(-135deg) translate(-2px,-2px); }
.rx-movil__sub a { display: block; padding: 9px 0; font-size: .9375rem; color: var(--rx-texto); font-weight: 500; }
.rx-movil__sub a:hover { color: var(--rx-rojo); }
.rx-movil__subtitulo {
  margin: 14px 0 6px; font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--rx-texto-tenue);
}
.rx-movil__pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 24px; }

/* Teléfono y redes al final del menú desplegable */
.rx-movil__contacto {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rx-borde);
}
.rx-movil__telefono {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; color: var(--rx-azul);
}
.rx-movil__telefono svg { color: var(--rx-rojo); }
/* Sobre fondo claro los iconos necesitan invertir el contraste. Se cualifica
   con .rx-movil para ganar a la regla del pie, que va más abajo en el fichero. */
.rx-movil .rx-redes--claro a { background: var(--rx-fondo-2); color: var(--rx-azul); }
.rx-movil .rx-redes--claro a:hover { background: var(--rx-rojo); color: #fff; }
.rx-movil .rx-redes { margin-bottom: 0; }
.rx-movil__pie .rx-boton { flex: 1; }

/* Cuando el menú móvil está abierto, el fondo no debe poder desplazarse */
body.rx-sin-scroll { overflow: hidden; }

/* =====================================================================
   HERO (carrusel de portada)
   ===================================================================== */
.rx-hero { position: relative; background: var(--rx-azul); overflow: hidden; }
.rx-hero__pista { display: flex; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.rx-hero__slide {
  flex: 0 0 100%;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 828px;
}
.rx-hero__texto {
  display: flex; flex-direction: column; justify-content: center;
  padding: 80px var(--rx-margen);
  max-width: calc(var(--rx-contenedor) / 2 + var(--rx-margen));
  margin-left: auto;
  color: #fff;
}
.rx-hero__antetitulo {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
  font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
.rx-hero__antetitulo::before { content: ""; width: 28px; height: 2px; background: #fff; flex: none; }
.rx-hero__slide h1, .rx-hero__slide h2 { color: #fff; margin-bottom: 22px; max-width: 13ch; }
.rx-hero__descripcion { font-size: 1.0625rem; line-height: 1.6; color: rgba(255,255,255,.86); max-width: 52ch; margin-bottom: 30px; }
.rx-hero__botones { display: flex; gap: 14px; flex-wrap: wrap; }
.rx-hero__media { position: relative; }
.rx-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Flechas del carrusel */
.rx-hero__flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(37,43,71,.85); color: #fff;
  border: 0; border-radius: var(--rx-radio); cursor: pointer;
  transition: background-color .2s ease;
}
.rx-hero__flecha:hover { background: var(--rx-rojo); }
.rx-hero__flecha--prev { left: 24px; }
.rx-hero__flecha--next { right: 24px; }

/* Puntos indicadores (visibles en móvil) */
.rx-hero__puntos {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: 20px;
  display: none; gap: 10px;
}
.rx-hero__punto {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.45);
  transition: background-color .2s ease, width .2s ease;
}
.rx-hero__punto[aria-current="true"] { background: #fff; width: 24px; border-radius: 5px; }

/* =====================================================================
   HOME · Tarjetas de servicios
   ===================================================================== */
.rx-servicio__titulo { margin-bottom: 12px; }
.rx-servicio__texto { font-size: .9375rem; line-height: 1.65; margin-bottom: 24px; }
.rx-tarjeta__pie { margin-top: auto; }

/* =====================================================================
   HOME · Panel de cifras
   ===================================================================== */
.rx-cifras {
  background: #fff; border: 1px solid var(--rx-borde); border-radius: var(--rx-radio);
  padding: 44px 32px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 24px;
}
.rx-cifra { text-align: center; }
.rx-cifra__valor {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.375rem);
  font-weight: 800; color: var(--rx-azul); letter-spacing: -1px; line-height: 1.1;
}
.rx-cifra__valor span { color: var(--rx-rojo); }
.rx-cifra__etiqueta {
  margin-top: 8px;
  font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rx-texto-tenue); line-height: 1.4;
}

/* =====================================================================
   HOME · Bloque del mapa de cobertura
   ===================================================================== */
.rx-mapa {
  position: relative;
  background: var(--rx-azul);
  border-radius: var(--rx-radio-g);
  border-left: 5px solid var(--rx-rojo);
  overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px;
  padding: 64px;
  color: rgba(255,255,255,.84);
}
.rx-mapa::before {
  /* Trama de puntos y líneas de fondo, decorativa */
  content: ""; position: absolute; inset: 0;
  background-image: var(--rx-trama); background-size: cover; background-position: center;
  opacity: .5; pointer-events: none;
}
.rx-mapa > * { position: relative; z-index: 1; }
.rx-mapa h2 { color: #fff; }
.rx-mapa__media img { width: 100%; }

/* =====================================================================
   HOME · Bloque DWDM (larga distancia)
   ===================================================================== */
.rx-dwdm {
  background: var(--rx-fondo);
  border-radius: var(--rx-radio-g);
  border-left: 5px solid var(--rx-rojo);
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px;
  padding: 64px;
}
.rx-dwdm__fichas { display: grid; gap: 14px; }
.rx-ficha {
  background: rgba(43,50,82,.045);
  border-radius: var(--rx-radio);
  padding: 18px 22px;
}
.rx-ficha__valor { font-size: 1.125rem; font-weight: 700; color: var(--rx-azul); letter-spacing: -.3px; }
.rx-ficha__etiqueta { font-size: .8125rem; color: var(--rx-texto); }

/* =====================================================================
   Tarjetas de actualidad
   ===================================================================== */
.rx-post {
  background: #fff; border: 1px solid var(--rx-borde); border-radius: var(--rx-radio);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.rx-post:hover { border-color: #d9dee9; box-shadow: 0 12px 32px rgba(43,50,82,.08); transform: translateY(-2px); }
.rx-post__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--rx-fondo-2); }
.rx-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.rx-post:hover .rx-post__media img { transform: scale(1.04); }
.rx-post__cuerpo { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.rx-etiqueta {
  display: inline-block; align-self: flex-start;
  background: var(--rx-fondo-2); color: var(--rx-azul);
  border-radius: 4px; padding: 5px 10px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.rx-post__fecha { margin: 12px 0 8px; font-size: .8125rem; color: var(--rx-texto-tenue); }
.rx-post__titulo { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; color: var(--rx-azul); margin: 0; }
.rx-post:hover .rx-post__titulo { color: var(--rx-rojo); }

/* =====================================================================
   FAQ (acordeón)
   ===================================================================== */
.rx-faq { display: grid; gap: 14px; }
.rx-faq__item {
  background: #fff; border: 1px solid var(--rx-borde); border-radius: var(--rx-radio);
  overflow: hidden;
}
.rx-faq__boton {
  width: 100%; display: flex; align-items: center; gap: 16px;
  padding: 24px;
  background: transparent; border: 0; cursor: pointer; text-align: left;
}
.rx-faq__icono {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; border-radius: 8px;
  background: var(--rx-azul); color: #fff;
}
.rx-faq__icono svg { width: 17px; height: 17px; }
.rx-faq__pregunta { flex: 1; font-size: 1.0625rem; font-weight: 700; color: var(--rx-azul); letter-spacing: -.2px; }
.rx-faq__chevron {
  width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--rx-texto-tenue); border-bottom: 2px solid var(--rx-texto-tenue);
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .25s ease;
}
.rx-faq__item--abierto .rx-faq__chevron { transform: rotate(-135deg) translate(-2px,-2px); }
/* La altura se anima desde el JS para que la transición sea suave */
.rx-faq__respuesta { overflow: hidden; height: 0; transition: height .3s ease; }
.rx-faq__respuesta-inner { padding: 0 24px 24px 74px; font-size: .9375rem; line-height: 1.7; }

/* =====================================================================
   Llamada a la acción final
   ===================================================================== */
.rx-cta { background: var(--rx-azul); text-align: center; padding-block: 80px; }
.rx-cta h2 { color: #fff; max-width: 30ch; margin-inline: auto; margin-bottom: .35em; }
.rx-cta p { color: rgba(255,255,255,.8); max-width: 62ch; margin-inline: auto; margin-bottom: 26px; }

/* =====================================================================
   PIE DE PÁGINA
   ===================================================================== */
.rx-pie { background: var(--rx-azul-hondo); color: rgba(255,255,255,.72); font-size: .9375rem; }
.rx-pie__principal { padding-block: 64px 48px; display: grid; grid-template-columns: 1.4fr 1.2fr 1fr 1.2fr; gap: 40px; }
.rx-pie__logo img { height: 30px; width: auto; margin-bottom: 18px; }
.rx-pie__lema { font-size: .9375rem; line-height: 1.65; margin-bottom: 22px; max-width: 34ch; }
.rx-pie__titulo {
  margin: 0 0 18px;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.rx-pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.rx-pie__lista a:hover { color: #fff; }
.rx-pie__oficina { margin-bottom: 18px; }
.rx-pie__oficina strong { display: block; color: #fff; font-weight: 600; margin-bottom: 4px; }
.rx-pie__oficina span { font-size: .875rem; line-height: 1.55; display: block; }

.rx-redes { display: flex; gap: 10px; margin-bottom: 22px; }
.rx-redes a {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: rgba(255,255,255,.1); border-radius: 6px; color: #fff;
  transition: background-color .2s ease;
}
.rx-redes a:hover { background: var(--rx-rojo); }
.rx-redes svg { width: 17px; height: 17px; }

.rx-respaldo {
  display: inline-flex; align-items: center; gap: 14px;
  background: #fff; border-radius: var(--rx-radio); padding: 12px 16px;
}
.rx-respaldo span { font-size: .8125rem; color: var(--rx-texto); }
.rx-respaldo img { height: 26px; width: auto; }

.rx-marca { background: #fff; border-radius: var(--rx-radio); padding: 14px 18px; margin-bottom: 12px; display: block; }
.rx-marca img { height: 26px; width: auto; margin-inline: auto; }

.rx-pie__legal {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: .8125rem;
}
.rx-pie__legal ul { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; flex-wrap: wrap; }
.rx-pie__legal a:hover { color: #fff; }

/* El selector de idioma del pie va sobre fondo oscuro */
.rx-pie .rx-idioma__boton {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px; padding: 7px 12px; color: #fff;
}

/* =====================================================================
   PÁGINAS INTERNAS
   ===================================================================== */
.rx-hero-pagina {
  background: var(--rx-azul); color: rgba(255,255,255,.85);
  padding-block: 90px 80px;
}
.rx-hero-pagina h1 { color: #fff; max-width: 20ch; }
.rx-hero-pagina .rx-antetitulo { color: #fff; }
.rx-hero-pagina .rx-antetitulo--raya::before { background: #fff; }
.rx-hero-pagina__texto { font-size: 1.125rem; line-height: 1.6; max-width: 68ch; color: rgba(255,255,255,.85); }

/* Migas de pan */
.rx-migas { font-size: .8125rem; color: var(--rx-texto-tenue); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.rx-migas a { color: var(--rx-rojo); font-weight: 600; }

/* Contenido de texto largo (páginas legales, entradas) */
.rx-prosa { font-size: 1.0625rem; line-height: 1.75; color: var(--rx-texto); }
.rx-prosa > * + * { margin-top: 1.1em; }
.rx-prosa h2 { margin-top: 1.8em; font-size: 1.625rem; }
.rx-prosa h3 { margin-top: 1.5em; font-size: 1.25rem; }
.rx-prosa a { color: var(--rx-rojo); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rx-prosa ul, .rx-prosa ol { padding-left: 1.3em; }
.rx-prosa li + li { margin-top: .5em; }
.rx-prosa img { border-radius: var(--rx-radio); }
.rx-prosa blockquote {
  margin: 1.6em 0; padding: 20px 26px;
  border-left: 4px solid var(--rx-rojo); background: var(--rx-fondo);
  border-radius: 0 var(--rx-radio) var(--rx-radio) 0;
  font-size: 1.0625rem;
}
.rx-prosa table { width: 100%; border-collapse: collapse; }
.rx-prosa th, .rx-prosa td { border: 1px solid var(--rx-borde); padding: 10px 12px; text-align: left; }

/* Ancho de lectura cómodo para artículos */
.rx-columna-lectura { max-width: 760px; margin-inline: auto; }

/* --- Entrada de actualidad --- */
.rx-articulo__meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .875rem; color: var(--rx-texto-tenue); margin-bottom: 26px;
}
.rx-articulo__portada { border-radius: var(--rx-radio-g); overflow: hidden; margin-bottom: 40px; }

/* --- Navegación por categorías de actualidad --- */
.rx-filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.rx-filtro {
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--rx-borde); background: #fff;
  font-size: .875rem; font-weight: 600; color: var(--rx-azul);
  transition: all .18s ease;
}
.rx-filtro:hover { border-color: var(--rx-rojo); color: var(--rx-rojo); }
.rx-filtro--activo { background: var(--rx-rojo); border-color: var(--rx-rojo); color: #fff; }
.rx-filtro--activo:hover { color: #fff; }

/* Paginación */
.rx-paginacion { display: flex; gap: 8px; justify-content: center; margin-top: 48px; flex-wrap: wrap; }
.rx-paginacion .page-numbers {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rx-borde); border-radius: var(--rx-radio);
  font-size: .875rem; font-weight: 600; color: var(--rx-azul); background: #fff;
}
.rx-paginacion .page-numbers:hover { border-color: var(--rx-rojo); color: var(--rx-rojo); }
.rx-paginacion .page-numbers.current { background: var(--rx-rojo); border-color: var(--rx-rojo); color: #fff; }

/* =====================================================================
   PROYECTOS DE INFRAESTRUCTURA
   ===================================================================== */
/* Navegación por pestañas de la página de infraestructuras */
.rx-pestanas {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 44px;
}
.rx-pestana {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--rx-radio);
  padding: 18px 20px;
  transition: background-color .2s ease, border-color .2s ease;
}
.rx-pestana:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.3); }
.rx-pestana strong { display: block; color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 3px; }
.rx-pestana span { font-size: .8125rem; color: rgba(255,255,255,.7); }

.rx-proyecto { padding-block: var(--rx-seccion); border-bottom: 1px solid var(--rx-borde); }
.rx-proyecto:nth-child(even) { background: var(--rx-fondo); }
.rx-proyecto__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: start; }
.rx-proyecto__aside { display: grid; gap: 14px; position: sticky; top: calc(var(--rx-nav) + 24px); }
.rx-proyecto__panel {
  background: var(--rx-azul); color: rgba(255,255,255,.8);
  border-radius: var(--rx-radio-g); padding: 28px;
}
.rx-proyecto__panel strong { display: block; color: #fff; font-size: 1.0625rem; margin-bottom: 4px; }
.rx-dato { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rx-borde); font-size: .9375rem; }
.rx-dato:last-child { border-bottom: 0; }
.rx-dato dt { color: var(--rx-texto-tenue); }
.rx-dato dd { margin: 0; color: var(--rx-azul); font-weight: 600; text-align: right; }
.rx-datos { background: #fff; border: 1px solid var(--rx-borde); border-radius: var(--rx-radio); padding: 8px 22px; margin: 0; }

.rx-aviso-ue {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  background: var(--rx-fondo); border-radius: var(--rx-radio);
  padding: 22px 26px; margin-top: 28px;
  font-size: .875rem; line-height: 1.6;
}
.rx-aviso-ue img { max-height: 54px; width: auto; flex: none; }

/* Listado de provincias por comunidad */
.rx-cobertura { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 32px; }
.rx-cobertura__grupo { background: #fff; border: 1px solid var(--rx-borde); border-radius: var(--rx-radio); padding: 22px; }
.rx-cobertura__grupo strong { display: block; color: var(--rx-azul); margin-bottom: 12px; font-size: .9375rem; }
.rx-cobertura__grupo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.rx-cobertura__grupo li {
  background: var(--rx-fondo); border-radius: 999px; padding: 5px 12px;
  font-size: .8125rem; color: var(--rx-texto);
}

/* =====================================================================
   FORMULARIO DE CONTACTO
   ===================================================================== */
.rx-contacto { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; }
.rx-form { display: grid; gap: 18px; }
.rx-form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rx-campo { display: grid; gap: 7px; }
.rx-campo label { font-size: .875rem; font-weight: 600; color: var(--rx-azul); }
.rx-campo input, .rx-campo textarea, .rx-campo select {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--rx-borde); border-radius: var(--rx-radio);
  font-family: inherit; font-size: .9375rem; color: var(--rx-azul); background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.rx-campo input:focus, .rx-campo textarea:focus {
  border-color: var(--rx-rojo); box-shadow: 0 0 0 3px rgba(238,84,84,.14); outline: none;
}
.rx-campo textarea { min-height: 130px; resize: vertical; }
.rx-campo--error input, .rx-campo--error textarea { border-color: var(--rx-rojo); }
.rx-campo__error { font-size: .8125rem; color: var(--rx-rojo); font-weight: 500; }

.rx-consentimiento { display: flex; gap: 11px; align-items: flex-start; font-size: .875rem; line-height: 1.55; }
.rx-consentimiento input { margin-top: 3px; width: 17px; height: 17px; flex: none; accent-color: var(--rx-rojo); }
.rx-consentimiento a { color: var(--rx-rojo); font-weight: 600; text-decoration: underline; }

.rx-mensaje { border-radius: var(--rx-radio); padding: 16px 20px; font-size: .9375rem; font-weight: 500; }
.rx-mensaje--ok { background: #e9f7ef; color: #1b6e42; border: 1px solid #bfe6cf; }
.rx-mensaje--error { background: var(--rx-rojo-suave); color: #a32626; border: 1px solid #f5c4c4; }

/* Trampa antispam: invisible para las personas, visible para los robots */
.rx-trampa { position: absolute !important; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.rx-info { display: grid; gap: 14px; }
.rx-info__bloque { background: #fff; border: 1px solid var(--rx-borde); border-radius: var(--rx-radio); padding: 24px; }
.rx-info__bloque h3 { font-size: 1rem; margin-bottom: 14px; }
.rx-info__dato { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; padding: 7px 0; }
.rx-info__dato svg { width: 17px; height: 17px; color: var(--rx-rojo); flex: none; margin-top: 3px; }
.rx-info__dato strong { display: block; color: var(--rx-azul); font-weight: 600; }
.rx-info__dato a:hover { color: var(--rx-rojo); }

/* =====================================================================
   NOSOTROS
   ===================================================================== */
.rx-cinta {
  background: var(--rx-azul); color: #fff; overflow: hidden;
  padding-block: 22px;
}
.rx-cinta__pista {
  display: flex; gap: 48px; width: max-content;
  animation: rx-desliza 42s linear infinite;
}
.rx-cinta__texto {
  font-size: 1.25rem; font-weight: 700; letter-spacing: -.3px; white-space: nowrap;
  display: flex; align-items: center; gap: 48px;
}
.rx-cinta__texto::after { content: "·"; color: var(--rx-rojo); }
@keyframes rx-desliza { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.rx-valor { background: #fff; border: 1px solid var(--rx-borde); border-radius: var(--rx-radio); padding: 26px; }
.rx-valor strong { display: block; color: var(--rx-azul); font-size: 1.0625rem; margin-bottom: 4px; }
.rx-valor em { display: block; font-style: normal; font-size: .8125rem; color: var(--rx-rojo); font-weight: 600; margin-bottom: 10px; letter-spacing: .04em; }
.rx-valor p { font-size: .9375rem; line-height: 1.6; margin: 0; }

.rx-empresa { background: #fff; border: 1px solid var(--rx-borde); border-radius: var(--rx-radio); padding: 30px; }
.rx-empresa__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.rx-empresa__anio { font-size: .875rem; font-weight: 700; color: var(--rx-rojo); }
.rx-empresa__zonas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.rx-empresa__zonas span { background: var(--rx-fondo); border-radius: 999px; padding: 5px 12px; font-size: .8125rem; }

/* =====================================================================
   Aparición suave al hacer scroll
   El JS añade .rx-visible cuando el bloque entra en pantalla.
   ===================================================================== */
.rx-aparece { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.rx-aparece.rx-visible { opacity: 1; transform: none; }

/* Quien haya pedido menos animaciones en su sistema no debe sufrirlas */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rx-aparece { opacity: 1; transform: none; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* --- Portátiles y tablets grandes --- */
@media (max-width: 1200px) {
  :root { --rx-margen: 40px; --rx-seccion: 64px; }
  .rx-rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  .rx-cifras { grid-template-columns: repeat(4, 1fr); padding: 36px 24px; gap: 32px 16px; }
  .rx-pie__principal { grid-template-columns: 1.3fr 1fr 1fr; }
  .rx-pie__marcas { grid-column: 1 / -1; }
  .rx-mapa, .rx-dwdm { padding: 48px; gap: 32px; }
  .rx-hero__slide { min-height: 620px; }
}

/* --- La navegación pasa a menú desplegable ---
   El umbral es 1200px porque es donde el diseño original deja de mostrar
   la barra de menús y la barra superior de contacto. */
@media (max-width: 1199px) {
  :root { --rx-nav: 76px; }

  .rx-nav, .rx-cabecera__cta { display: none; }
  .rx-burger { display: inline-flex; }

  /* En el original el teléfono y las redes desaparecen aquí: pasan a estar
     dentro del menú desplegable, que es donde se buscan en pantallas
     estrechas. */
  .rx-topbar { display: none; }
}

/* --- Tablet: la maquetación pasa a una columna --- */
@media (max-width: 1024px) {
  .rx-hero__slide { grid-template-columns: 1fr; min-height: 0; }
  /* En tablet y móvil la imagen pasa a ser el fondo del texto */
  .rx-hero__slide { position: relative; }
  .rx-hero__media { position: absolute; inset: 0; }
  .rx-hero__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(43,50,82,.86) 0%, rgba(43,50,82,.72) 55%, rgba(43,50,82,.88) 100%);
  }
  .rx-hero__texto {
    position: relative; z-index: 2;
    max-width: none; margin: 0; width: 100%;
    padding: 96px var(--rx-margen) 104px;
    min-height: 560px;
  }
  .rx-hero__slide h1, .rx-hero__slide h2 { max-width: 16ch; }
  .rx-hero__flecha { display: none; }
  .rx-hero__puntos { display: flex; }

  .rx-rejilla--3 { grid-template-columns: repeat(2, 1fr); }
  .rx-mapa, .rx-dwdm { grid-template-columns: 1fr; }
  .rx-mapa__media { order: -1; max-width: 460px; margin-inline: auto; }
  .rx-proyecto__grid { grid-template-columns: 1fr; gap: 36px; }
  .rx-proyecto__aside { position: static; }
  .rx-contacto { grid-template-columns: 1fr; gap: 40px; }
  .rx-pestanas { grid-template-columns: repeat(2, 1fr); }
  .rx-cabecera-seccion--fila { align-items: flex-start; flex-direction: column; }
}

/* --- Móvil --- */
@media (max-width: 767px) {
  :root { --rx-margen: 24px; --rx-seccion: 56px; --rx-radio-g: 12px; }

  body { font-size: 15.5px; }

  .rx-topbar__inner { justify-content: center; gap: 14px; }
  .rx-topbar__ocultar-movil { display: none; }

  .rx-rejilla--2, .rx-rejilla--3, .rx-rejilla--4 { grid-template-columns: 1fr; }
  .rx-rejilla { gap: 16px; }

  .rx-cifras { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; padding: 32px 20px; }

  .rx-hero__texto { padding: 72px var(--rx-margen) 88px; min-height: 520px; }
  .rx-hero__slide h1, .rx-hero__slide h2 { max-width: none; }
  .rx-hero__botones { gap: 10px; }
  .rx-hero__botones .rx-boton { flex: 1 1 auto; }

  .rx-mapa, .rx-dwdm { padding: 32px 24px; border-radius: var(--rx-radio-g); }
  .rx-tarjeta { padding: 24px; }

  .rx-hero-pagina { padding-block: 56px 52px; }
  .rx-cta { padding-block: 64px; }

  .rx-pie__principal { grid-template-columns: 1fr; gap: 32px; padding-block: 48px 32px; }
  .rx-pie__legal { flex-direction: column; align-items: flex-start; gap: 14px; }
  .rx-pie__legal ul { gap: 18px; }

  .rx-form__fila { grid-template-columns: 1fr; }
  .rx-pestanas { grid-template-columns: 1fr; }
  .rx-cobertura { grid-template-columns: 1fr; }

  .rx-faq__boton { padding: 18px; gap: 12px; }
  .rx-faq__pregunta { font-size: .9375rem; }
  .rx-faq__respuesta-inner { padding: 0 18px 20px 18px; }

  .rx-proyecto__panel { padding: 22px; }
  .rx-aviso-ue { padding: 18px; }
  .rx-articulo__portada { border-radius: var(--rx-radio); margin-bottom: 28px; }
  .rx-cinta__texto { font-size: 1rem; gap: 32px; }
}

/* --- Móviles estrechos --- */
@media (max-width: 380px) {
  :root { --rx-margen: 18px; }
  .rx-cifras { grid-template-columns: 1fr; }
  .rx-hero__botones .rx-boton { width: 100%; }
}

/* ---------- Impresión ------------------------------------------------ */
@media print {
  .rx-topbar, .rx-cabecera, .rx-pie, .rx-cta, .rx-hero__flecha, .rx-hero__puntos { display: none !important; }
  body { color: #000; }
  .rx-prosa a { text-decoration: underline; }
}