/* Rediseño Drop Point: el sistema de diseño del sitio (único CSS público).
   Paleta y tipografías de la marca; componentes con prefijo rd-. */

/* El ancho incluye el relleno: sin esto, un botón a width:100% se sale de su
   columna por los 24 px de padding de cada lado. El footer se incluye aparte
   porque vive fuera de .rd-main (es hermano, no hijo, en el layout). */
.rd-main, .rd-main *, .rd-main *::before, .rd-main *::after,
.rd-footer, .rd-footer *, .rd-footer *::before, .rd-footer *::after { box-sizing: border-box; }

/* La paleta va en :root y no solo en .rd-main: la cabecera y el pie quedan
   fuera de ese contenedor y sus botones se quedaban sin color (el «Contacto»
   de la barra se veía como texto suelto, no como botón). */
:root {
  --rd-ink: #122033;
  --rd-muted: #5b6675;
  --rd-line: #d9e1e8;
  --rd-soft: #f5f8fb;
  --rd-blue: #0f5f9f;
  --rd-teal: #0f9d92;
  --rd-green: #7db53c;
  --rd-radius: 14px;
  --rd-wrap: 1180px;
  --rd-display: "Space Grotesk", "Instrument Sans", sans-serif;
}
/* Las fotos llevan width/height intrínsecos en el HTML. Sin esto, cuando la
   regla de la imagen fija el ancho pero no la altura (los carruseles, la tira
   de módulos, las comparativas), el navegador aplica la altura del atributo
   y la foto sale a tamaño real. Con height:auto manda la proporción del CSS.
   Las reglas con clase que sí fijan altura (logos, tarjetas) siguen ganando. */
:where(img[width][height]) { height: auto; }

.rd-main {
  --rd-ink: #122033;
  --rd-muted: #5b6675;
  --rd-line: #d9e1e8;
  --rd-soft: #f5f8fb;
  --rd-blue: #0f5f9f;
  --rd-teal: #0f9d92;
  --rd-green: #7db53c;
  --rd-radius: 14px;
  --rd-wrap: 1180px;
  --rd-display: "Space Grotesk", "Instrument Sans", sans-serif;
  font-family: "Instrument Sans", Arial, sans-serif;
  color: var(--rd-ink);
  line-height: 1.65;
  overflow-wrap: break-word;
}
.rd-wrap { max-width: var(--rd-wrap); margin: 0 auto; padding: 0 22px; }

/* Migas */
.rd-crumbs { padding-top: 18px; font-size: 0.88rem; color: var(--rd-muted); }
.rd-crumbs a { color: var(--rd-blue); text-decoration: none; font-weight: 600; }
.rd-crumbs a:hover { text-decoration: underline; }
.rd-crumbs .rd-crumbs-sep { margin: 0 0.45em; color: var(--rd-line); }

/* Héroe */
/* padding solo vertical: el lateral lo pone .rd-wrap (22px); con «padding: 2.6rem 0 3rem» el texto tocaba el borde en móvil */
.rd-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; align-items: center; padding-top: 2.6rem; padding-bottom: 3rem; }
.rd-hero--plain { grid-template-columns: minmax(0, 1fr); }
.rd-eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rd-teal); margin-bottom: 0.9rem; }
.rd-hero h1 { font-family: var(--rd-display); font-size: clamp(2rem, 4.5vw, 3.1rem); line-height: 1.08; margin: 0 0 1.1rem; letter-spacing: -0.02em; }
.rd-hero-intro { font-size: 1.13rem; color: var(--rd-muted); margin: 0 0 0.8rem; max-width: 58ch; }
.rd-hero-media { margin: 0; }
.rd-hero-media img { width: 100%; height: auto; max-height: 400px; object-fit: cover; border-radius: var(--rd-radius); box-shadow: 0 18px 44px rgba(18, 32, 51, 0.16); }
/* foto vertical en el hero: entera y centrada en su columna, en vez de recortada a una franja */
.rd-hero-media--portrait { text-align: center; }
.rd-hero-media--portrait img { width: auto; max-width: 100%; max-height: 520px; object-fit: contain; display: inline-block; }

/* Cuerpo */
.rd-body { padding-bottom: 2.5rem; }
.rd-body p { margin: 0 0 1.15rem; }
.rd-body a { color: var(--rd-blue); font-weight: 600; }
.rd-body h2, .rd-body h3, .rd-body h4 { font-family: var(--rd-display); line-height: 1.2; margin: 2.2rem 0 0.8rem; letter-spacing: -0.01em; }
.rd-body h2 { font-size: 1.55rem; }
.rd-body h3 { font-size: 1.25rem; }
.rd-body h4 { font-size: 1.05rem; }
.rd-body ul, .rd-body ol { margin: 0 0 1.3rem; padding-left: 1.3rem; }
.rd-body li { margin-bottom: 0.45rem; }
.rd-body ul > li::marker { color: var(--rd-teal); }
/* Foto suelta: ocupa el ancho del texto. Una vertical se recorta a una franja
   apaisada en vez de dejar medio bloque en blanco al lado. */
.rd-figure { margin: 1.8rem 0; }
.rd-figure img { display: block; width: 100%; max-height: 520px; object-fit: cover; object-position: center;
  border-radius: var(--rd-radius); border: 1px solid var(--rd-line); }
.rd-figure figcaption { font-size: 0.88rem; color: var(--rd-muted); margin-top: 0.5rem; }
.rd-quote { border-left: 4px solid var(--rd-teal); background: var(--rd-soft); border-radius: 0 var(--rd-radius) var(--rd-radius) 0; padding: 1rem 1.3rem; margin: 1.6rem 0; font-style: italic; }
.rd-embed { position: relative; aspect-ratio: 16 / 9; margin: 1.8rem 0; }
.rd-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--rd-radius); }
.rd-table { overflow-x: auto; margin: 1.8rem 0; }
.rd-table table { border-collapse: collapse; width: 100%; }
.rd-table th, .rd-table td { border: 1px solid var(--rd-line); padding: 0.55rem 0.8rem; text-align: left; }
.rd-table th { background: var(--rd-soft); }

/* Galería: imágenes consecutivas en rejilla, misma altura. Son fotos de
   instalaciones reales con el TPV en sitios distintos del encuadre, así que
   se usa "contain" (con fondo) en vez de recortar: el dispositivo se ve
   siempre entero en las 3, aunque cambie el ángulo o la proporción. */
.rd-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; margin: 1.8rem 0; align-items: start; }
/* rejilla fija, para cuando auto-fit no cuadra las fotos como se quiere */
.rd-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) {
  .rd-gallery--2 { grid-template-columns: 1fr; }
}
.rd-gallery .rd-figure { margin: 0; }
.rd-gallery img { width: 100%; height: 260px; object-fit: contain; background: var(--rd-soft); padding: 0.9rem; box-sizing: border-box; }
/* fotos que aguantan el recorte: sin relleno ni marco, a sangre */
.rd-gallery .rd-figure--cover img { object-fit: cover; background: none; padding: 0; }
/* una foto más alta que ocupe 2 filas, junto a otras dos normales */
.rd-gallery .rd-figure--rowspan2 { grid-row: span 2; align-self: stretch; }
.rd-gallery .rd-figure--rowspan2 img { height: 100%; }
/* documentos (capturas de artículos, páginas escaneadas): no se pueden
   recortar sin perder texto, así que en vez de "cover" se agrandan y se
   reduce el relleno para que el marco blanco pese menos */
.rd-gallery .rd-figure--tall img { height: 560px; padding: 0.3rem; }
.rd-gallery .rd-figure--cover.rd-figure--tall img { padding: 0; }
/* fotos apaisadas 4:3 o 3:2 a sangre: a 260 px se quedan en una franja; con 420 px se ve la escena entera */
.rd-gallery .rd-figure--mid img { height: 420px; }
/* con un número impar de fotos, la última ocupa las dos columnas (más alta) en vez de quedarse sola a la izquierda */
.rd-gallery--2 .rd-figure:last-child:nth-child(odd) { grid-column: 1 / -1; }
.rd-gallery--2 .rd-figure:last-child:nth-child(odd) img { height: 420px; }
/* interfaces/capturas con texto arriba y abajo: recortarlas (cover) pierde
   contenido, así que se dejan enteras al alto máximo de la celda, sin el
   relleno ni el fondo que se veían como marco */
.rd-gallery .rd-figure--snug img { object-fit: contain; background: none; padding: 0; }

/* Rejillas de subpáginas y relacionados */
.rd-section-title { font-family: var(--rd-display); font-size: 1.5rem; margin: 0 0 1.3rem; letter-spacing: -0.01em; }
.rd-grid-band { padding: 2.6rem 0 3rem; }
.rd-grid-band--tinted { background: var(--rd-soft); border-top: 1px solid var(--rd-line); }
/* filtro por categoría de /clientes: pastillas, sin recargar la página */
.rd-filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.4rem; }
.rd-filter-btn { font: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.95rem; border-radius: 999px;
  border: 1px solid var(--rd-line); background: #fff; color: var(--rd-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.rd-filter-btn:hover { border-color: var(--rd-teal); color: var(--rd-ink); }
.rd-filter-btn.is-active { background: var(--rd-teal); border-color: var(--rd-teal); color: #fff; }
.rd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1.3rem; }
.rd-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rd-line); border-radius: var(--rd-radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.rd-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(18, 32, 51, 0.12); }
.rd-card-media { aspect-ratio: 16 / 10; background: var(--rd-soft); }
.rd-card-media { overflow: hidden; }
.rd-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.rd-card:hover .rd-card-media img { transform: scale(1.06); }
/* el cuerpo crece hasta el alto de la tarjeta (todas las de una fila miden
   igual): así el «Ver más» de abajo se alinea al pie en todas, por larga o
   corta que sea la etiqueta o la entradilla */
.rd-card-body { padding: 1rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1 0 auto; }
.rd-card-kind { align-self: flex-start; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #0b7a72; background: rgba(15, 157, 146, 0.12); border-radius: 999px; padding: 0.18rem 0.6rem; }
/* Un color por tipo de proyecto (ver PagesHelper#card_kind_class). Tonos
   suaves: la etiqueta distingue, pero no compite con la foto ni con el
   título de la tarjeta. */
.rd-card-kind--0 { color: #0b7a72; background: rgba(15, 157, 146, 0.12); }
.rd-card-kind--1 { color: #0f5f9f; background: rgba(15, 95, 159, 0.12); }
.rd-card-kind--2 { color: #8a4b00; background: rgba(214, 128, 0, 0.14); }
.rd-card-kind--3 { color: #6b3fa0; background: rgba(107, 63, 160, 0.12); }
.rd-card-kind--4 { color: #1b6b3a; background: rgba(27, 107, 58, 0.13); }
.rd-card-kind--5 { color: #a3324a; background: rgba(163, 50, 74, 0.12); }
.rd-card-kind--6 { color: #37556e; background: rgba(55, 85, 110, 0.13); }
.rd-card h3 { font-family: var(--rd-display); font-size: 1.06rem; margin: 0; line-height: 1.3; }
.rd-card p { margin: 0; font-size: 0.9rem; color: var(--rd-muted); }
.rd-card-more { margin-top: auto; padding-top: 0.5rem; font-size: 0.88rem; font-weight: 700; color: var(--rd-blue); }

/* CTA final */
.rd-cta { background: linear-gradient(120deg, var(--rd-ink), #1d3a5f 55%, var(--rd-blue)); color: #fff; padding: 3rem 0; }
.rd-cta-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.4rem; align-items: center; }
.rd-cta-inner > div:first-child { min-width: 0; }
.rd-cta h2 { font-family: var(--rd-display); font-size: 1.6rem; margin: 0 0 0.4rem; }
.rd-cta p { margin: 0; color: #cfe0f0; max-width: 52ch; }
.rd-cta-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.rd-btn { display: inline-block; padding: 0.75rem 1.5rem; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid transparent; transition: transform 0.12s ease; }
.rd-btn:hover { transform: translateY(-2px); }
.rd-btn--primary { background: var(--rd-green); color: #10250b; }
.rd-btn--ghost { border-color: rgba(255, 255, 255, 0.5); color: #fff; }

@media (max-width: 860px) {
  .rd-hero { grid-template-columns: 1fr; gap: 1.8rem; padding-top: 1.6rem; }
  .rd-hero-media { order: -1; }
}

/* ===== Cabecera y navegación ===== */
.rd-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rd-line, #d9e1e8); font-family: "Instrument Sans", Arial, sans-serif; }
.rd-header-inner { display: flex; align-items: center; gap: 0.8rem; max-width: 1180px; margin: 0 auto; padding: 0.5rem 18px; position: relative; }
.rd-logo img { display: block; height: 52px; width: auto; }
/* los items ocupan todo el alto de la cabecera: así todos los desplegables
   (sueltos y mega) arrancan a la misma altura, bajo la línea de la cabecera */
.rd-nav { display: flex; gap: 0.1rem; flex: 1; justify-content: center; align-self: stretch; align-items: stretch; }
.rd-nav-link { display: inline-block; padding: 0.5rem 0.65rem; border-radius: 8px; color: #122033; text-decoration: none; font-weight: 600; font-size: 0.92rem; white-space: nowrap; cursor: pointer; }
.rd-nav-link:hover { background: #f5f8fb; color: #0f5f9f; }
.rd-nav-caret { font-size: 0.7em; color: #5b6675; }
.rd-nav-item { position: relative; display: flex; align-items: center; }
/* los items con mega se quedan sin position: así el panel se ancla a la
   cabecera entera (rd-header-inner) y nunca se sale de la pantalla */
.rd-nav-item:has(.rd-dropdown--mega) { position: static; }
.rd-dropdown { position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff; border: 1px solid #d9e1e8; border-radius: 12px; box-shadow: 0 18px 40px rgba(18, 32, 51, 0.14); padding: 0.6rem; display: none; }
.rd-nav:not(.rd-nav--js) .rd-nav-item:hover .rd-dropdown,
.rd-nav-item:focus-within .rd-dropdown,
.rd-nav-item--open .rd-dropdown { display: block; }
/* mega a lo ancho de la cabecera: las columnas caben siempre (auto-fit las
   reparte en filas si falta ancho) y el panel no puede desbordar la pantalla */
.rd-dropdown--mega { display: none; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.4rem 1.6rem; left: 0; right: 0; width: auto; min-width: 0; max-width: none; }
/* los desplegables sueltos bajan hasta el borde de la cabecera (el mismo
   sitio que los mega, anclados a rd-header-inner con su padding inferior) */
.rd-dropdown:not(.rd-dropdown--mega) { top: calc(100% + 0.5rem); }
/* puente invisible entre el enlace y el panel: el hover no se corta al bajar */
.rd-dropdown::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; }
/* zona de entradas sueltas del mega: compacta, a dos columnas si son muchas */
.rd-dropdown-col--links { display: flex; flex-direction: column; }
/* título de la columna «Otros»: mismo aspecto que los de grupo, pero sin
   enlace ni el subrayado del hover */
.rd-dropdown-group--plain { cursor: default; }
.rd-dropdown-group--plain:hover { background: none; text-decoration: none; }
.rd-dropdown-col--split { display: block; column-count: 2; column-gap: 1.4rem; }
.rd-dropdown-col--split .rd-dropdown-link { break-inside: avoid; }
/* el título manda sobre las dos subcolumnas, no solo sobre la primera */
.rd-dropdown-col--split .rd-dropdown-group { column-span: all; }
/* con JavaScript el panel lo abre y lo cierra la clase --open (con un margen
   de tiempo para poder cruzar por encima de otra pestaña camino de un enlace);
   sin JavaScript sigue valiendo el :hover de toda la vida */
.rd-nav:not(.rd-nav--js) .rd-nav-item:hover .rd-dropdown--mega,
.rd-nav-item:focus-within .rd-dropdown--mega,
.rd-nav-item--open .rd-dropdown--mega { display: grid; }
.rd-dropdown-group { display: block; font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: #0f9d92; padding: 0.45rem 0.6rem 0.2rem; text-decoration: none; }
.rd-dropdown-link { display: block; padding: 0.35rem 0.6rem; border-radius: 7px; color: #122033; text-decoration: none; font-size: 0.92rem; }
.rd-dropdown-link:hover { background: #f5f8fb; color: #0f5f9f; }
.rd-dropdown-link--all { margin-top: 0.35rem; border-top: 1px solid #e6ecf2; padding-top: 0.6rem; font-weight: 700; color: #0f5f9f; }
.rd-header-cta { margin-left: auto; padding: 0.5rem 1.1rem; font-size: 0.92rem; white-space: nowrap; }
.rd-nav-mobile { display: none; position: relative; margin-left: auto; }
.rd-nav-mobile > summary { list-style: none; cursor: pointer; font-size: 1.5rem; padding: 0.2rem 0.6rem; border: 1px solid #d9e1e8; border-radius: 8px; }
.rd-nav-mobile > summary::-webkit-details-marker { display: none; }
.rd-nav-mobile-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(92vw, 380px); max-height: 75vh; overflow-y: auto; background: #fff; border: 1px solid #d9e1e8; border-radius: 14px; box-shadow: 0 22px 50px rgba(18, 32, 51, 0.2); padding: 0.8rem; display: flex; flex-direction: column; gap: 0.2rem; }
.rd-nav-mobile-link { display: block; padding: 0.55rem 0.7rem; border-radius: 8px; color: #122033; text-decoration: none; font-weight: 600; }
.rd-nav-mobile-link:hover { background: #f5f8fb; }
.rd-nav-mobile-link--sub { padding-left: 1.6rem; font-weight: 400; font-size: 0.92rem; }
.rd-nav-mobile-link--all { color: #0f5f9f; font-size: 0.9rem; }
.rd-nav-mobile-group > summary { cursor: pointer; padding: 0.55rem 0.7rem; border-radius: 8px; font-weight: 700; }
.rd-nav-mobile-group[open] > summary { color: #0f5f9f; }
@media (max-width: 1020px) {
  .rd-nav { display: none; }
  /* el CTA de contacto sobrevive en móvil, compacto, junto a la hamburguesa */
  .rd-header-cta { margin-left: auto; padding: 0.4rem 0.9rem; font-size: 0.88rem; }
  .rd-nav-mobile { display: block; margin-left: 0; }
  .rd-logo img { height: 44px; }
}

/* ===== Pie ===== */
/* --rd-wrap vive en .rd-main; el footer, al ser hermano y no hijo suyo, necesita
   su propia copia para que su .rd-wrap mida lo mismo que el resto de módulos. */
.rd-footer { --rd-wrap: 1180px; background: #122033; color: #cfe0f0; margin-top: 3rem; font-family: "Instrument Sans", Arial, sans-serif; }

/* Cuando la página acaba en un bloque oscuro de cierre (el CTA de portada y
   fichas, o el de contacto), el margen del pie dejaba una franja blanca
   entre los dos: van pegados. Las páginas que acaban en texto lo conservan. */
main:has(> .rd-cta:last-child) + .rd-footer,
main:has(> .contact-final-cta:last-child) + .rd-footer { margin-top: 0; }
.rd-footer-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; padding: 2.2rem 0 1.6rem; }
.rd-footer-card { display: flex; flex-direction: column; gap: 0.25rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(173, 195, 223, 0.18); border-radius: 12px; padding: 1rem 1.2rem; color: inherit; text-decoration: none; }
.rd-footer-card:hover { background: rgba(255, 255, 255, 0.12); }
.rd-footer-card-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: #7cc7cf; font-weight: 700; }
.rd-footer-card-value { font-weight: 600; color: #fff; }
/* icono de fondo, como los pilares de la portada: grande, tenue, detrás del texto */
.rd-footer-card--iconed { position: relative; overflow: hidden; }
.rd-footer-card-icon { position: absolute; top: -14px; right: -14px; width: 92px; height: 92px; color: #fff; opacity: 0.1; pointer-events: none; }
.rd-footer-card--iconed .rd-footer-card-label, .rd-footer-card--iconed .rd-footer-card-value { position: relative; }
.rd-footer-bottom { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; text-align: center; padding: 1.1rem 0 1.4rem; border-top: 1px solid rgba(173, 195, 223, 0.16); font-size: 0.88rem; }
.rd-footer-bottom p { margin: 0; }
.rd-footer-bottom nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.2rem; }
.rd-footer-bottom a { color: #cfe0f0; text-decoration: none; }
.rd-footer-bottom a:hover { color: #fff; text-decoration: underline; }

/* ===== Portada ===== */
.rd-home-hero { position: relative; overflow: hidden; background: radial-gradient(900px 420px at 85% -10%, rgba(15, 157, 146, 0.35), transparent 60%), radial-gradient(700px 420px at -10% 110%, rgba(15, 95, 159, 0.4), transparent 60%), linear-gradient(160deg, #0d1826 0%, #122033 60%, #16283f 100%); color: #fff; }
.rd-home-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1.4px); background-size: 26px 26px; mask-image: linear-gradient(to bottom, #000, transparent 85%); pointer-events: none; }
.rd-home-hero .rd-hero-intro { color: #b9c9dc; }
.rd-home-hero .rd-eyebrow { color: #35d3c4; }
.rd-home-hero .rd-btn--outline { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.rd-home-hero .rd-home-badges { color: #b9c9dc; }
.rd-home-hero .rd-home-badges li { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 0.3rem 0.9rem; }
.rd-grad { background: linear-gradient(100deg, #35d3c4, #7db53c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rd-home-hero-inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 2.5rem; align-items: center; padding-top: 3rem; padding-bottom: 3rem; }
.rd-home-hero h1 { font-family: var(--rd-display, "Space Grotesk", sans-serif); font-size: clamp(2.1rem, 4.5vw, 3.2rem); line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 1rem; }
.rd-home-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 0.8rem; padding: 0; margin: 1.5rem 0 0; font-size: 0.9rem; }
.rd-home-badges li::before { content: "●"; color: #7db53c; margin-right: 0.45rem; font-size: 0.7em; }
/* Carrusel de casos del héroe: automático e infinito (doble tira en bucle) */
/* El desvanecido de los lados a la mitad de ancho (6% -> 3%): con 6% se
   comía media tarjeta y no dejaba leer la de los extremos. */
.rd-cases-carousel { overflow: hidden; padding: 0.4rem 0 1rem; -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent); }
.rd-cases-track { display: flex; width: max-content; animation: rd-cases-scroll 45s linear infinite; }
/* la pausa por hover solo con puntero: en táctil el :hover se queda pegado tras tocar una tarjeta y el carrusel parecía parado */
@media (hover: hover) { .rd-cases-track:hover { animation-play-state: paused; } }
.rd-cases-track:focus-within { animation-play-state: paused; }
.rd-home-cases { display: flex; gap: 1rem; padding-left: 1rem; }
.rd-cases-track .rd-case-card { flex: 0 0 420px; }
@keyframes rd-cases-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 600px) {
  .rd-cases-track .rd-case-card { flex-basis: 300px; }
  /* sin difuminado lateral en móvil: se comía el borde y el margen de la primera tarjeta */
  .rd-cases-carousel { -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-cases-track { animation: none; width: auto; }
  .rd-cases-carousel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .rd-home-cases[aria-hidden] { display: none; }
}
.rd-case-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #d9e1e8; border-radius: 14px; overflow: hidden; text-decoration: none; color: #122033; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.rd-case-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(18, 32, 51, 0.14); }
.rd-case-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.rd-case-card-body { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem 1.1rem 1.1rem; }
.rd-case-card-body strong { font-family: var(--rd-display, "Space Grotesk", sans-serif); font-size: 1.05rem; }
.rd-case-card-body > span { color: #5b6675; font-size: 0.92rem; }
.rd-case-card--compact { flex: 0 0 min(70vw, 320px); }
.rd-logo-strip { padding: 2rem 0 1.4rem; }
.rd-strip-title { text-align: center; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.14em; color: #5b6675; margin: 0 0 1.2rem; }
/* Carrusel infinito de logos: dos tiras idénticas desplazándose -50% en bucle
   (reinicia sin salto); los laterales se desvanecen con una máscara. */
.rd-logo-carousel { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.rd-logo-track { display: flex; width: max-content; animation: rd-logo-scroll 36s linear infinite; }
@media (hover: hover) { .rd-logo-track:hover { animation-play-state: paused; } }
.rd-logo-row { display: flex; align-items: center; gap: 0 3.5rem; padding-left: 3.5rem; }
.rd-logo-row a { flex: 0 0 auto; display: flex; align-items: center; min-height: 76px; }
.rd-logo-row img { height: 56px; width: auto; max-width: 190px; object-fit: contain; filter: grayscale(1); opacity: 0.65; transition: filter 0.2s ease, opacity 0.2s ease; }
/* logos más cuadrados (marca + texto pequeño) que con la altura uniforme se
   quedan pequeños frente a los wordmarks anchos: un poco más grandes */
.rd-logo-row img.rd-logo--big { height: 76px; max-width: 230px; }
.rd-logo-row a:hover img { filter: none; opacity: 1; }
@keyframes rd-logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .rd-logo-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .rd-logo-row[aria-hidden] { display: none; }
  .rd-logo-row { flex-wrap: wrap; justify-content: center; gap: 1.4rem 2.4rem; padding-left: 0; }
}
.rd-home-section { padding: 3rem 0; }
.rd-home-section--tinted { background: #f5f8fb; border-top: 1px solid #d9e1e8; border-bottom: 1px solid #d9e1e8; }
.rd-home-heading { font-family: var(--rd-display, "Space Grotesk", sans-serif); font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 1.8rem; }
.rd-home-heading::before { content: ""; display: block; width: 56px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #0f9d92, #7db53c); margin-bottom: 0.9rem; }
.rd-home-subheading { color: #5b6675; margin: -0.8rem 0 1.4rem; }
.rd-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.6rem; }
.rd-trio-item h3 { font-family: var(--rd-display, "Space Grotesk", sans-serif); font-size: 1.12rem; margin: 0 0 0.5rem; }
.rd-trio-item p { color: #5b6675; margin: 0 0 0.7rem; }
.rd-trio-item ul { margin: 0; padding-left: 1.2rem; color: #5b6675; font-size: 0.94rem; }
.rd-trio-item li { margin-bottom: 0.3rem; }
.rd-trio-item li::marker { color: #0f9d92; }
/* Carrusel de aplicaciones reales: automático e infinito (reutiliza el
   keyframe de los casos del héroe) */
.rd-uses-carousel { overflow: hidden; padding: 0.2rem 0 1rem; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.rd-uses-track { display: flex; width: max-content; animation: rd-cases-scroll 55s linear infinite; }
@media (hover: hover) { .rd-uses-track:hover { animation-play-state: paused; } }
.rd-uses-track:focus-within { animation-play-state: paused; }
.rd-scroller-strip { display: flex; gap: 1rem; padding-left: 1rem; }
.rd-scroller-strip .rd-case-card--compact { flex: 0 0 320px; }
@media (max-width: 600px) { .rd-scroller-strip .rd-case-card--compact { flex-basis: 260px; } }
@media (prefers-reduced-motion: reduce) {
  .rd-uses-track { animation: none; width: auto; }
  .rd-uses-carousel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .rd-scroller-strip[aria-hidden] { display: none; }
}
.rd-hw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.rd-hw-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #d9e1e8; border-radius: 12px; overflow: hidden; text-decoration: none; color: #122033; font-size: 0.9rem; font-weight: 600; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.rd-hw-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(18, 32, 51, 0.12), 0 0 0 2px #0f9d92 inset; }
.rd-hw-card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #f5f8fb; }
.rd-hw-card > span { padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.15rem; }
.rd-hw-card .rd-card-more { padding-top: 0; white-space: nowrap; }
.rd-testimonial { padding: 4rem 0 3.4rem; background: var(--rd-soft, #f5f8fb); border-top: 1px solid var(--rd-line, #d9e1e8); border-bottom: 1px solid var(--rd-line, #d9e1e8); }
.rd-testimonial blockquote { position: relative; margin: 0 auto; text-align: center; font-family: var(--rd-display, "Space Grotesk", sans-serif); font-size: clamp(1.35rem, 2.8vw, 1.9rem); line-height: 1.35; max-width: 100%; color: #122033; }
.rd-testimonial blockquote::before { content: "\201C"; position: absolute; top: -0.55em; left: 50%; transform: translateX(-50%); font-size: 5.5rem; line-height: 1; color: rgba(15, 157, 146, 0.25); pointer-events: none; }
.rd-btn--outline { border-color: #0f5f9f; color: #0f5f9f; }
.rd-cta-media { margin: 0; }
.rd-cta-media img { width: 100%; max-height: 320px; object-fit: cover; border-radius: 14px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3); }
.rd-cta-media a { display: block; }
.rd-cta-media a:hover img { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.4); }
.rd-cta-media img { transition: transform 0.25s ease, box-shadow 0.25s ease; }
@media (max-width: 900px) {
  /* minmax(0,…): con 1fr a secas, el carrusel de casos (que es más ancho que la
     pantalla) estiraba la columna y el héroe se salía por la derecha */
  .rd-home-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .rd-cta-inner { grid-template-columns: 1fr; }
  .rd-cta-media { display: none; }
}

/* ===== 404 ===== */
.rd-notfound { text-align: center; padding: 4.5rem 22px; }
.rd-notfound-locker { color: var(--rd-teal); margin-bottom: 0.6rem; }
.rd-notfound-code { font-family: var(--rd-display, "Space Grotesk", sans-serif); font-size: clamp(4rem, 14vw, 8rem); font-weight: 700; color: #d9e1e8; margin: 0; line-height: 1; }
.rd-notfound h1 { font-family: var(--rd-display, "Space Grotesk", sans-serif); margin: 0.4rem 0 0.8rem; }
.rd-notfound .rd-cta-actions { justify-content: center; margin-top: 1.4rem; }

/* ===== Contacto (misma estructura de clases, estilos nuevos) ===== */
.modern-detail-page { font-family: "Instrument Sans", Arial, sans-serif; color: #122033; }
.eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #0f9d92; margin-bottom: 0.9rem; }
.content-hero { background: linear-gradient(160deg, #f5f8fb 0%, #ffffff 60%); border-bottom: 1px solid #d9e1e8; padding: 3rem 22px; }
.content-hero-copy { max-width: 1180px; margin: 0 auto; }
.content-hero h1 { font-family: "Space Grotesk", sans-serif; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 1rem; }
.content-hero-text { font-size: 1.1rem; color: #5b6675; max-width: 58ch; }
.contact-hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.4rem 0 0; }
.contact-hero-actions .button, .contact-form .button, .contact-final-cta .button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.5rem; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid transparent; cursor: pointer; font: inherit; }
.button-primary { background: #7db53c; color: #10250b; }
.button-secondary { border-color: #0f5f9f !important; color: #0f5f9f; background: none; }
.contact-hero-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; padding: 0; margin: 1.4rem 0 0; color: #5b6675; font-size: 0.92rem; }
.badge-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #7db53c; margin-right: 0.45rem; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; max-width: 1180px; margin: 0 auto; padding: 2.6rem 22px; }
.contact-form-header h2 { font-family: "Space Grotesk", sans-serif; margin: 0 0 0.4rem; }
.contact-form-header p { color: #5b6675; margin: 0 0 1.2rem; }
.contact-form-notice { border-radius: 10px; padding: 0.8rem 1rem; margin-bottom: 1.2rem; font-weight: 600; }
.contact-form-notice--ok { background: #e7f5e0; border: 1px solid #b4d99a; color: #2c5410; }
.contact-form-notice--error { background: #fdeaea; border: 1px solid #eeb4b4; color: #8f1d1d; }
.contact-hp { position: absolute; left: -9999px; }
.contact-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.contact-field { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; font-size: 0.92rem; }
.contact-field--full { grid-column: 1 / -1; }
.contact-field input, .contact-field select, .contact-field textarea { width: 100%; min-width: 0; box-sizing: border-box; padding: 0.65rem 0.8rem; border: 1px solid #c9d4e0; border-radius: 10px; font: inherit; font-weight: 400; background: #fff; }
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus { outline: 2px solid #0f5f9f; outline-offset: 1px; border-color: #0f5f9f; }
.contact-field-hint { color: #5b6675; font-weight: 400; }
.contact-field-error { color: #b3261e; font-size: 0.85rem; font-weight: 600; }
.contact-field--consent { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.6rem; font-weight: 400; line-height: 1.45; }
/* la casilla no hereda el ancho completo de los campos de texto: a su tamaño,
   con el texto a su derecha ocupando el resto de la fila */
.contact-field--consent input[type="checkbox"] { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: 0.12rem 0 0; padding: 0;
  border-radius: 4px; accent-color: #0f5f9f; cursor: pointer; }
.contact-field--consent > span:not(.contact-field-error) { flex: 1 1 0; min-width: 0; }
.contact-field--consent .contact-field-error { flex-basis: 100%; }
.contact-form-footer { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.4rem; }
.contact-form-note { margin: 0; color: #5b6675; font-size: 0.92rem; }
.contact-sidebar { display: flex; flex-direction: column; gap: 1rem; }
.contact-card { display: grid; grid-template-columns: 44px 1fr; gap: 0.9rem; background: #fff; border: 1px solid #d9e1e8; border-radius: 14px; padding: 1.1rem 1.2rem; }
.contact-card--accent { background: #f0faf5; border-color: #b4d99a; }
.contact-card-icon { color: #0f5f9f; }
.contact-card-label { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: #0f9d92; font-weight: 700; }
.contact-card-value { margin: 0.15rem 0; font-weight: 600; }
.contact-card-link { color: #0f5f9f; text-decoration: none; font-size: 0.9rem; }
.contact-map-section { max-width: 1180px; margin: 0 auto; padding: 0 22px 2.4rem; }
.contact-map-frame iframe { width: 100%; height: 340px; border: 0; border-radius: 14px; }
.contact-final-cta { background: linear-gradient(120deg, #122033, #1d3a5f 55%, #0f5f9f); color: #fff; padding: 2.6rem 22px; }
.contact-final-cta-inner { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto; }
.contact-final-cta h2 { font-family: "Space Grotesk", sans-serif; margin: 0 0 0.4rem; }
.contact-final-cta p { color: #cfe0f0; margin: 0; max-width: 52ch; }
.contact-final-cta-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.contact-final-cta .button-secondary { border-color: rgba(255,255,255,0.5) !important; color: #fff; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } .contact-form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Tríos de la portada: tarjetas numeradas con icono-marca de agua detrás */
.rd-trio { counter-reset: rd-pillar; }
.rd-trio-item--iconed { position: relative; overflow: hidden; counter-increment: rd-pillar; background: #fff; border: 1px solid var(--rd-line, #d9e1e8); border-radius: 16px; padding: 1.4rem 1.4rem 1.5rem; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.rd-trio-item--iconed:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(18, 32, 51, 0.1); }
.rd-trio-item--iconed::before { content: "0" counter(rd-pillar); font-family: var(--rd-display, "Space Grotesk", sans-serif); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.08em; color: #0f9d92; display: block; margin-bottom: 0.7rem; }
.rd-trio-item--iconed > .rd-trio-icon { position: absolute; top: -18px; right: -14px; width: 138px; height: 138px; color: #8fa3b8; opacity: 0.14; pointer-events: none; }
.rd-trio-item--iconed > h3, .rd-trio-item--iconed > p, .rd-trio-item--iconed > ul { position: relative; }
/* Banda oscura "enterprise" (sección de plataforma) */
.rd-home-section--dark { background: radial-gradient(700px 380px at 90% 0%, rgba(15, 157, 146, 0.25), transparent 60%), linear-gradient(160deg, #0d1826, #16283f); color: #fff; border: 0; }
.rd-home-section--dark .rd-home-heading { color: #fff; }
.rd-home-section--dark .rd-trio-item--iconed { background: rgba(255, 255, 255, 0.05); border-color: rgba(173, 195, 223, 0.18); }
.rd-home-section--dark .rd-trio-item--iconed:hover { box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35); }
.rd-home-section--dark .rd-trio-item--iconed::before { color: #35d3c4; }
.rd-home-section--dark .rd-trio-item--iconed > .rd-trio-icon { color: #cfe0f0; opacity: 0.1; }
.rd-home-section--dark .rd-trio-item h3 { color: #fff; }
.rd-home-section--dark .rd-trio-item p, .rd-home-section--dark .rd-trio-item ul { color: #b9c9dc; }
.rd-home-section--dark .rd-trio-item li::marker { content: "✓  "; color: #7db53c; }

/* Botón flotante de WhatsApp (todo el sitio) */
.rd-whatsapp { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 10px 26px rgba(18, 32, 51, 0.28); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.rd-whatsapp:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 32px rgba(18, 32, 51, 0.34); }
@media print { .rd-whatsapp { display: none; } }


/* Revelado al hacer scroll (progresivo: solo navegadores con scroll-driven
   animations; el resto lo ve todo visible desde el principio) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rd-grid .rd-card, .rd-trio-item--iconed, .rd-hw-card {
      animation: rd-reveal both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}
@keyframes rd-reveal { from { opacity: 0.15; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Puente caso de éxito -> solución empleada */
.rd-solution-link { margin: 1rem 0 0; font-size: 0.95rem; color: var(--rd-muted, #5b6675); }
.rd-solution-link a { color: var(--rd-blue, #0f5f9f); font-weight: 700; text-decoration: none; }
.rd-solution-link a:hover { text-decoration: underline; }

/* CTA intercalado tras el primer párrafo */
.rd-inline-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; background: var(--rd-soft, #f5f8fb); border-left: 4px solid var(--rd-teal, #0f9d92); border-radius: 0 12px 12px 0; padding: 0.9rem 1.2rem; margin: 1.6rem 0; }
.rd-inline-cta span { font-weight: 700; }
.rd-btn--small { padding: 0.5rem 1.1rem; font-size: 0.92rem; }

/* FAQ: acordeones nativos */
.rd-faq { border: 1px solid var(--rd-line, #d9e1e8); border-radius: 12px; margin: 0 0 0.8rem; background: #fff; }
.rd-faq > summary { list-style: none; cursor: pointer; padding: 1rem 1.2rem; font-weight: 700; font-family: var(--rd-display, "Space Grotesk", sans-serif); }
.rd-faq > summary::-webkit-details-marker { display: none; }
.rd-faq > summary::after { content: "+"; float: right; color: var(--rd-teal, #0f9d92); font-size: 1.2rem; line-height: 1; }
.rd-faq[open] > summary::after { content: "−"; }
.rd-faq[open] > summary { border-bottom: 1px solid var(--rd-line, #d9e1e8); }
.rd-faq-answer { padding: 0.9rem 1.2rem 1.1rem; color: var(--rd-muted, #5b6675); }
.rd-faq-answer a { color: var(--rd-blue, #0f5f9f); font-weight: 600; }

/* Opiniones de Google: carrusel infinito de tarjetas (portada) */
.rd-reviews { background: var(--rd-soft); padding: 3.6rem 0 3rem; }
.rd-reviews-carousel { overflow: hidden; margin-top: 1.8rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.rd-reviews-track { display: flex; width: max-content; animation: rd-logo-scroll linear infinite; }
.rd-reviews-track:hover { animation-play-state: paused; }
.rd-reviews-row { display: flex; align-items: stretch; gap: 0 1.4rem; padding-left: 1.4rem; }
.rd-review-card { flex: 0 0 auto; width: min(360px, 78vw); display: flex; flex-direction: column;
  margin: 0; padding: 1.4rem 1.5rem; background: #fff; border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius); box-shadow: 0 8px 22px rgba(18, 32, 51, 0.07); }
.rd-review-stars { display: block; margin-top: 0.75rem; color: #fbbc04; font-size: 1.05rem; letter-spacing: 0.1em; }
.rd-review-stars-off { color: var(--rd-line); }
.rd-review-card blockquote { flex: 1; margin: 0.6rem 0 0; font-size: 0.98rem; line-height: 1.55;
  color: var(--rd-ink); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rd-review-card figcaption { display: flex; align-items: center; gap: 0.75rem; }
.rd-review-more { display: none; margin-top: 0.55rem; font-size: 0.88rem; font-weight: 700;
  color: var(--rd-blue); text-decoration: none; }
.rd-review-more:hover { text-decoration: underline; }
.rd-review-card--clamped .rd-review-more,
.rd-review-card--linked .rd-review-more { display: inline-block; }
.rd-review-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--rd-blue);
  color: #fff; font-family: var(--rd-display); font-weight: 700; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center; }
.rd-review-meta { display: flex; flex-direction: column; line-height: 1.25; }
.rd-review-meta small { color: var(--rd-muted); }
.rd-reviews-link { margin-top: 1.6rem; text-align: center; }
.rd-reviews-link a { color: var(--rd-blue); font-weight: 700; text-decoration: none; }
.rd-reviews-link a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .rd-reviews-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .rd-reviews-row[aria-hidden] { display: none; }
  .rd-reviews-row { flex-wrap: wrap; justify-content: center; gap: 1.4rem; padding-left: 0; }
}

/* Compartir: fila discreta al final del contenido */
.rd-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--rd-line); }
.rd-share-label { font-size: 0.9rem; font-weight: 700; color: var(--rd-muted); margin-right: 0.2rem; }
.rd-share-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem; border: 1px solid var(--rd-line);
  border-radius: 999px; background: #fff; color: var(--rd-blue); font-size: 0.88rem; font-weight: 600;
  text-decoration: none; cursor: pointer; font-family: inherit; line-height: 1.5; transition: background 0.15s ease, border-color 0.15s ease; }
.rd-share-btn:hover { background: var(--rd-soft); border-color: var(--rd-blue); text-decoration: none; }
.rd-share-btn.is-copied { background: rgba(15, 157, 146, 0.12); border-color: var(--rd-teal); color: #0b7a72; }

/* ===== Bloques visuales del cuerpo (pasos, ventajas, comparativa, aviso) =====
   Dan aire y ritmo a las páginas largas: cada idea en su propia tarjeta en vez
   de una columna continua de párrafos. Los selectores llevan .rd-block delante
   porque compiten con la tipografía genérica de .rd-body h2/h3/p/li. */
.rd-block { margin: 2.8rem 0; }
.rd-body .rd-block-title, .rd-block .rd-block-title { font-family: var(--rd-display); font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.22; letter-spacing: -0.01em; margin: 0 0 1.4rem; }
.rd-body .rd-block-title::before, .rd-block .rd-block-title::before { content: ""; display: block; width: 52px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--rd-teal), var(--rd-green)); margin-bottom: 0.85rem; }
.rd-block .rd-block-lead { color: var(--rd-muted); margin: -0.9rem 0 1.5rem; }

/* Pasos numerados */
.rd-block .rd-steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 1.1rem; margin: 0; padding: 0; counter-reset: rd-step; }
.rd-block .rd-step { counter-increment: rd-step; margin: 0; background: #fff; border: 1px solid var(--rd-line);
  border-radius: 16px; padding: 1.3rem 1.35rem 1.4rem; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.rd-block .rd-step:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(18, 32, 51, 0.1); }
.rd-block .rd-step::before { content: counter(rd-step); display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border-radius: 50%; font-family: var(--rd-display); font-weight: 700; color: #fff;
  background: linear-gradient(120deg, var(--rd-teal), var(--rd-blue)); margin-bottom: 0.85rem; }
.rd-block .rd-step h3 { font-family: var(--rd-display); font-size: 1.03rem; line-height: 1.3; margin: 0 0 0.4rem; }
.rd-block .rd-step p { margin: 0; color: var(--rd-muted); font-size: 0.95rem; }

/* Ventajas con marca de verificación, con foto opcional al lado */
.rd-block .rd-checks-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: stretch; }
.rd-block .rd-checks-main .rd-block-title { margin-top: 0; }
.rd-block .rd-checks-wrap--plain { grid-template-columns: minmax(0, 1fr); }
.rd-block .rd-checks { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 0.75rem 1.5rem; }
.rd-block .rd-checks li { position: relative; padding-left: 1.95rem; margin: 0; line-height: 1.45; }
.rd-block .rd-checks li::before { content: "✓"; position: absolute; left: 0; top: 0.05rem; width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center; border-radius: 50%; font-size: 0.78rem; font-weight: 700;
  color: #0b7a72; background: rgba(15, 157, 146, 0.14); }
.rd-block .rd-checks-media { margin: 0; border-radius: var(--rd-radius); overflow: hidden; min-height: 100%; }
.rd-block .rd-checks-media img { display: block; width: 100%; height: 100%; min-height: 260px; max-height: 520px; object-fit: contain; }

/* Antes y después: dos fotos etiquetadas, una al lado de la otra */
.rd-block .rd-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); gap: 1.2rem; }
/* las dos fichas, a la misma altura aunque el pie de una sea más largo */
.rd-block .rd-compare figure { margin: 0; background: #fff; border: 1px solid var(--rd-line); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.rd-block .rd-compare figcaption { flex: 1; }
.rd-block .rd-compare img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rd-block .rd-compare figcaption { padding: 0.9rem 1.15rem 1.15rem; font-size: 0.94rem; color: var(--rd-muted); }
.rd-block .rd-compare-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; border-radius: 999px; padding: 0.2rem 0.62rem; margin-bottom: 0.45rem; }
.rd-block .rd-compare-tag--before { color: #8a4b12; background: rgba(214, 132, 42, 0.16); }
.rd-block .rd-compare-tag--after { color: #0b7a72; background: rgba(15, 157, 146, 0.14); }
.rd-block .rd-compare-text { display: block; }

/* Aviso destacado sobre fondo oscuro, para un matiz importante */
.rd-block.rd-callout { display: flex; flex-wrap: wrap; gap: 1rem 1.8rem; align-items: center; justify-content: space-between;
  background: radial-gradient(600px 300px at 88% 0%, rgba(15, 157, 146, 0.28), transparent 62%),
              linear-gradient(150deg, #0d1826, #16283f);
  color: #fff; border-radius: 18px; padding: 1.6rem 1.8rem; }
.rd-block.rd-callout h3 { font-family: var(--rd-display); font-size: 1.17rem; margin: 0 0 0.4rem; }
.rd-block.rd-callout p { margin: 0; color: #c6d6e6; max-width: 62ch; font-size: 0.97rem; }
.rd-block.rd-callout a { color: #8fe3d9; font-weight: 600; }
.rd-block.rd-callout .rd-btn { flex: 0 0 auto; color: #10250b; }

@media (max-width: 860px) {
  .rd-block .rd-checks-wrap { grid-template-columns: 1fr; }
  .rd-block .rd-checks-media { order: -1; }
  .rd-block .rd-checks-media { min-height: 0; }
  .rd-block .rd-checks-media img { height: auto; min-height: 0; max-height: 300px; }
}

/* Rejilla de tarjetas con foto: tamaños, variantes o piezas de una familia */
.rd-block .rd-card-grid { list-style: none; display: grid; gap: 1.2rem; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* columnas fijas, para cuando auto-fit deja una tarjeta sola descolgada en su fila */
.rd-block .rd-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .rd-block .rd-card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
.rd-block .rd-card-grid-item { display: flex; flex-direction: column; margin: 0; background: #fff;
  border: 1px solid var(--rd-line); border-radius: 16px; overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease; }
.rd-block .rd-card-grid-item:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(18, 32, 51, 0.1); }
.rd-block .rd-card-grid-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rd-block .rd-card-grid-body { padding: 1.1rem 1.25rem 1.3rem; }
.rd-block .rd-card-grid-body h3 { font-family: var(--rd-display); font-size: 1.05rem; margin: 0 0 0.45rem; line-height: 1.3; }
.rd-block .rd-card-grid-body p { margin: 0; color: var(--rd-muted); font-size: 0.95rem; }

/* En móvil, las rejillas de tarjetas van a dos columnas compactas: con una sola
   columna, doce soluciones (o cincuenta casos de éxito) son un scroll eterno. */
@media (max-width: 620px) {
  /* botones del héroe a ancho completo: apilados y con anchos distintos se ven
     desordenados, y son el destino principal de la portada */
  .rd-home-hero .rd-cta-actions { display: grid; gap: 0.6rem; }
  .rd-home-hero .rd-cta-actions .rd-btn { width: 100%; text-align: center; }
  .rd-home-hero .rd-home-badges { font-size: 0.82rem; gap: 0.45rem; }

  .rd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
  .rd-grid .rd-card-media { aspect-ratio: 4 / 3; }
  .rd-grid .rd-card-body { padding: 0.7rem 0.8rem 0.9rem; gap: 0.3rem; }
  .rd-grid .rd-card h3 { font-size: 0.95rem; }
  /* el resumen, a tres líneas: si no, cada tarjeta mide el doble que su foto */
  .rd-grid .rd-card p { font-size: 0.82rem; display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden; }
  .rd-grid .rd-card-kind { font-size: 0.62rem; padding: 0.14rem 0.45rem; }
  .rd-grid .rd-card-more { font-size: 0.8rem; padding-top: 0.35rem; }
}

/* Claves del proyecto: tira compacta de dato y etiqueta */
.rd-block--facts { margin: 2rem 0; }
/* Columnas al ancho de su contenido (no en partes iguales): así un valor
   largo como «Film de PVC calandrado blanco mate de 100 µ» no parte en dos
   líneas dejando la unidad suelta abajo. */
.rd-block .rd-facts { display: flex; flex-wrap: wrap; gap: 0;
  margin: 0; border: 1px solid var(--rd-line); border-radius: 14px; overflow: hidden; background: var(--rd-soft); }
.rd-block .rd-fact { flex: 1 1 auto; min-width: 190px; padding: 0.95rem 1.15rem; border-right: 1px solid var(--rd-line); }
.rd-block .rd-fact:last-child { border-right: 0; }
.rd-block .rd-fact dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--rd-muted); margin: 0 0 0.25rem; }
.rd-block .rd-fact dd { margin: 0; font-weight: 600; color: var(--rd-ink); line-height: 1.35; }
/* celda a toda la fila (valor largo) y valores de varios elementos como etiquetas */
.rd-block .rd-fact--wide { flex-basis: 100%; border-right: 0; border-top: 1px solid var(--rd-line); }
.rd-block .rd-fact:has(+ .rd-fact--wide) { border-right: 0; }
.rd-block .rd-fact-tag { display: inline-block; margin: 0.15rem 0.25rem 0.15rem 0; padding: 0.2rem 0.65rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--rd-line); font-size: 0.86rem; font-weight: 600; }
@media (max-width: 620px) {
  .rd-block .rd-fact { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--rd-line); }
  .rd-block .rd-fact--wide { border-top: 0; }
  .rd-block .rd-fact:last-child { border-bottom: 0; }
}
.rd-block .rd-card-grid-more { display: inline-block; margin-top: 0.7rem; font-size: 0.9rem; font-weight: 700;
  color: var(--rd-blue); text-decoration: none; }
.rd-block .rd-card-grid-more:hover { text-decoration: underline; }

/* Icono de fondo en las tarjetas, como los pilares de la portada */
.rd-block .rd-card-grid-item--iconed { position: relative; overflow: hidden; }
.rd-block .rd-card-grid-icon { position: absolute; top: -16px; right: -12px; width: 120px; height: 120px;
  color: #8fa3b8; opacity: 0.14; pointer-events: none; }
.rd-block .rd-card-grid-item--iconed .rd-card-grid-body { position: relative; }

/* Comparativa en columna: relato a la izquierda, fotos apiladas a la derecha */
.rd-block .rd-stack { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.4rem; align-items: start; }
.rd-block .rd-stack-text .rd-block-title { margin-top: 0; }
.rd-block .rd-stack-media { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
@media (max-width: 860px) {
  .rd-block .rd-stack { grid-template-columns: 1fr; gap: 1.4rem; }
}

/* Tarjeta de prensa: la cabecera del medio, entera y sobre blanco */
.rd-card--logo .rd-card-media { background: #fff; display: grid; place-items: center; padding: 1rem 1.2rem; }
.rd-card--logo .rd-card-media img { width: 100%; height: 100%; object-fit: contain; transform: none; }
.rd-card--logo:hover .rd-card-media img { transform: none; }

/* Entrevista: turnos de palabra, con el entrevistado destacado */
.rd-block .rd-interview { display: grid; gap: 1.1rem; }
.rd-block .rd-turn { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 1.4rem;
  padding: 1rem 1.2rem; border-radius: 14px; }
.rd-block .rd-turn--pregunta { background: var(--rd-soft); }
.rd-block .rd-turn--respuesta { border: 1px solid var(--rd-line); }
.rd-block .rd-turn-who { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rd-teal); padding-top: 0.15rem; }
.rd-block .rd-turn--pregunta .rd-turn-who { color: var(--rd-muted); }
.rd-block .rd-turn-text p { margin: 0 0 0.7rem; }
.rd-block .rd-turn-text p:last-child { margin-bottom: 0; }
.rd-block .rd-interview-note { margin-top: 1.1rem; font-size: 0.92rem; color: var(--rd-muted); font-style: italic; }
@media (max-width: 720px) {
  .rd-block .rd-turn { grid-template-columns: 1fr; gap: 0.35rem; }
}
.rd-share-icon { width: 17px; height: 17px; flex: 0 0 auto; }

/* Pasos: icono difuminado detrás y reparto en columnas fijas */
.rd-block .rd-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rd-block .rd-steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rd-block .rd-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rd-block .rd-steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.85rem; }
.rd-block .rd-steps--5 .rd-step { padding: 1.1rem 1.05rem 1.2rem; }
.rd-block .rd-step--iconed { position: relative; overflow: hidden; }
.rd-block .rd-step-icon { position: absolute; top: -14px; right: -10px; width: 110px; height: 110px;
  color: #8fa3b8; opacity: 0.13; pointer-events: none; }
.rd-block .rd-step-body { position: relative; }
@media (max-width: 860px) {
  .rd-block .rd-steps--3, .rd-block .rd-steps--2, .rd-block .rd-steps--4, .rd-block .rd-steps--5 { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
}

/* En prensa, el recorte del artículo se lee mejor a todo el ancho */
.rd-body--press .rd-figure { margin: 2.2rem 0; }
.rd-body--press .rd-figure img { width: 100%; }

/* Captura pequeña junto al texto: a todo el ancho se vería pixelada */
.rd-body .rd-figure--right { float: right; width: min(360px, 42%); margin: 0.4rem 0 1.4rem 2rem; }
.rd-body--press .rd-figure--right img { width: 100%; }
.rd-body .rd-figure--right + * { clear: none; }
/* un bloque con título (nueva sección) no se abraza a la figura flotante de arriba */
.rd-body .rd-block { clear: both; }
@media (max-width: 720px) {
  .rd-body .rd-figure--right { float: none; width: 100%; margin: 1.6rem 0; }
}

/* Ejemplo enlazado a la ficha de su proyecto: la foto entera es el enlace y
   el pie deja claro adónde lleva. */
.rd-figure-link { display: block; color: inherit; text-decoration: none; }
.rd-figure-link:hover img { filter: brightness(1.04); }
.rd-figure-link figcaption, .rd-figure a figcaption { color: var(--rd-blue); }
.rd-figure-link:hover figcaption { text-decoration: underline; }
/* contador pequeño al lado del título de una tarjeta (p. ej. hipermercados por comunidad) */
.rd-card-grid-body h3 .rd-count { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #e7f5f3; color: #0f9d92; font-size: 0.8rem; font-weight: 600; vertical-align: middle; }

/* Portada de /contacto: el texto deja sitio a la foto del SAT a su derecha
   (la misma que abre /sat). En pantalla estrecha, una debajo de otra. */
.content-hero--contact .content-hero-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.4rem; align-items: center; }
.content-hero--contact .content-hero-copy { max-width: none; }
.content-hero-media { margin: 0; }
.content-hero-media img { display: block; width: 100%; height: auto; border-radius: 16px; }
@media (max-width: 860px) {
  .content-hero--contact .content-hero-inner { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ─── Móvil: los tres carruseles se manejan con el dedo ─────────────────────
   Se movían solos dentro de un contenedor sin scroll, así que en pantalla
   estrecha siempre se veía tarjeta y media y no había forma de adelantar la
   que interesaba. Con puntero táctil (o pantalla estrecha) se paran, se
   quita la copia que solo servía para el bucle y la tira se desliza con
   puntos de anclaje. */
@media (hover: none), (max-width: 700px) {
  .rd-cases-carousel, .rd-uses-carousel, .rd-reviews-carousel {
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none; mask-image: none;
  }
  .rd-cases-track, .rd-uses-track, .rd-reviews-track { animation: none; width: auto; }
  .rd-home-cases[aria-hidden], .rd-scroller-strip[aria-hidden], .rd-reviews-row[aria-hidden] { display: none; }
  .rd-home-cases, .rd-scroller-strip, .rd-reviews-row { padding-right: 1rem; }
  .rd-cases-track .rd-case-card, .rd-scroller-strip .rd-case-card, .rd-review-card { scroll-snap-align: start; }
}

/* Móvil: la tira de módulos se quedaba a una sola columna por dos píxeles
   (170 de mínimo por tarjeta y 346 libres en una pantalla de 390), así que
   doce fotos cuadradas a ancho completo eran un scroll larguísimo. */
@media (max-width: 620px) {
  .rd-hw-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.7rem; }
  .rd-hw-card { font-size: 0.85rem; }
  .rd-hw-card > span { padding: 0.5rem 0.6rem; }
}

/* Menú móvil: los apartados con submenú y los enlaces sueltos se veían igual
   de destacados, y las líneas se quedaban en 38 px de alto (para el dedo se
   recomiendan 44). */
.rd-nav-mobile-panel > .rd-nav-mobile-link, .rd-nav-mobile-group .rd-nav-mobile-link { font-weight: 500; }
.rd-nav-mobile-group .rd-nav-mobile-link--group { font-weight: 700; margin-top: 0.35rem; border-top: 1px solid var(--rd-line); padding-top: 0.85rem; }
.rd-nav-mobile-link { padding: 0.72rem 0.7rem; }
.rd-nav-mobile-link--sub { padding: 0.6rem 0.7rem 0.6rem 1.6rem; }
.rd-nav-mobile-group > summary { padding: 0.72rem 0.7rem; color: var(--rd-teal); text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.06em; }
.rd-nav-mobile-panel > .rd-btn { text-align: center; margin-top: 0.4rem; }

/* /contacto: el teléfono, la dirección, el correo y el WhatsApp salían dos
   veces seguidas, en las tarjetas de la página y otra vez en el pie. En el
   pie se deja solo el aviso legal. */
body:has(.modern-contact-page) .rd-footer-cards { display: none; }

/* /contacto: el salto de línea del titular deja «proyecto» solo en una línea
   cuando la pantalla es estrecha. */
@media (max-width: 700px) { .content-hero h1 br { display: none; } }

/* ---------- Aviso de cookies ---------- */
.rd-cookies { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1000; display: flex; justify-content: center; pointer-events: none; }
.rd-cookies[hidden] { display: none; }
.rd-cookies-inner { pointer-events: auto; font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; width: 100%; max-width: 920px; display: flex; align-items: center; gap: 22px; background: #fff; color: var(--rd-ink); border: 1px solid var(--rd-line); border-radius: var(--rd-radius); box-shadow: 0 18px 50px rgba(18, 32, 51, 0.18); padding: 18px 22px; }
.rd-cookies-text { flex: 1 1 auto; font-size: 0.95rem; line-height: 1.5; }
.rd-cookies-text p { margin: 0; }
.rd-cookies-title { font-family: var(--rd-display); font-weight: 700; font-size: 1.02rem; margin-bottom: 4px !important; }
.rd-cookies-text a { color: var(--rd-blue); }
.rd-cookies-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.rd-cookies-btn { font: inherit; font-weight: 700; font-size: 0.95rem; min-width: 118px; padding: 0.65rem 1.2rem; border-radius: 999px; cursor: pointer; background: #fff; color: var(--rd-blue); border: 2px solid var(--rd-blue); transition: background 0.15s ease, color 0.15s ease; }
.rd-cookies-btn:hover, .rd-cookies-btn:focus-visible { background: var(--rd-blue); color: #fff; outline: none; }
@media (max-width: 680px) {
  .rd-cookies-inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
  .rd-cookies-actions .rd-cookies-btn { flex: 1 1 0; }
}
/* el botón de WhatsApp no tapa el aviso */
body:has(.rd-cookies:not([hidden])) .rd-whatsapp { bottom: 150px; }
@media (max-width: 680px) { body:has(.rd-cookies:not([hidden])) .rd-whatsapp { bottom: 230px; } }