/*
Theme Name: Rotovel
Theme URI: https://rotovel.com/
Author: Jeser Andrade
Author URI: https://jeserdev.co/
Description: Theme profesional para Rotovel S.A.S. — Fabricación de productos plásticos para agua y saneamiento. Desarrollado a la medida por Jeser Andrade (jeserdev.co). Soporte disponible desde el panel: Rotovel → Soporte Theme.
Version: 1.10.2
License: All Rights Reserved
Text Domain: rotovel
Tags: business, responsive, custom
*/

/* === Sistema de diseño ===
   Estos son los valores POR DEFECTO. El panel (Rotovel → Apariencia) imprime
   un :root propio justo después de este archivo y pisa los que se hayan
   cambiado, así que no hace falta tocar nada aquí para recolorear el sitio.
   Los colores por línea de producto los inyecta la plantilla en --rt-line. */
:root {
  /* Marca */
  --rt-navy:    #01295e;   /* azul oscuro  */
  --rt-navy-2:  #10407f;   /* azul intermedio */
  --rt-navy-3:  #1b4f96;   /* borde sobre fondo oscuro */
  --rt-blue:    #0077f1;   /* azul de enlaces y acentos */
  --rt-green:   #70a327;   /* verde de acción */
  --rt-green-d: #5f8b21;   /* verde profundo: fondos que llevan texto blanco */

  /* Superficies y texto */
  --rt-bg:      #ffffff;
  --rt-surface: #f4f7fb;
  --rt-border:  #e3e8f0;
  --rt-ink:     #0e0e0e;
  --rt-muted:   #5a6270;
  --rt-on-dark: #c7d6ea;   /* texto secundario sobre las franjas azules */

  /* Tipografía */
  --rt-font-head: 'Poppins', sans-serif;
  --rt-font-body: 'Inter', sans-serif;
  --rt-font-ui:   'Poppins', sans-serif;  /* botones, pastillas, etiquetas */

  /* Botones y pastillas */
  --rt-btn-text:    #ffffff;
  --rt-btn-radius:  4px;
  --rt-pill-radius: 20px;
  --rt-cap-radius:  8px;

  /* Franjas y acentos */
  --rt-band-accent-w: 3px;
  --rt-title-bar-w:   64px;
  --rt-title-bar-h:   4px;

  /* Franjas */
  --rt-band-bg:  #01295e;
  --rt-band-ink: #ffffff;

  /* Cabecera y pie */
  --rt-topbar-from:  #70a327;
  --rt-topbar-to:    #01295e;
  --rt-topbar-ink:   #c7d6ea;
  --rt-topbar-pill:  #10407f;
  --rt-header-bg:    #01295e;
  --rt-header-ink:   #ffffff;
  --rt-header-line:  #10407f;
  --rt-footer-bg:    #01295e;
  --rt-footer-ink:   #c7d6ea;
  --rt-footer-title: #70a327;
  --rt-footer-line:  #10407f;
  --rt-social-bg:    #10407f;
  --rt-logo-h:      65px;
  --rt-logo-h-m:    42px;
  --rt-logo-h-foot: 44px;
}

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--rt-bg); font-family: var(--rt-font-body); color: var(--rt-ink); line-height: 1.5; }
a { color: var(--rt-blue); text-decoration: none; }
a:hover { color: #005ac2; }
input, textarea, select { font-family: var(--rt-font-body); font-size: 15px; box-sizing: border-box; }
img { max-width: 100%; height: auto; }
/* Nada debe generar barra de desplazamiento horizontal. Se usa `clip` y no
   `hidden` porque `hidden` crearía un contenedor de scroll y rompería los
   elementos position:sticky (galería del producto, índice de políticas). */
body { overflow-x: clip; }

/* === Layout Grids === */
.rt-grid2  { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.rt-grid4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.rt-grid5  { display: grid; grid-template-columns: repeat(5, 1fr); }
/* La columna de Políticas solo existe si hay documentos, así que el número de
   bloques varía. Con auto-flow el grid crea justo las columnas que hay: la
   primera algo más ancha para el logo y el resto repartidas por igual. */
.rt-footer-grid   { display: grid; grid-template-columns: 1.4fr; grid-auto-flow: column;
                    grid-auto-columns: minmax(0, 1fr); gap: 28px; }
.rt-footer-grid > * { min-width: 0; }
.rt-shop-grid     { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.rt-contact-grid  { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; }
.rt-values        { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rt-pdp-grid      { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.rt-pdp-grid > div { min-width: 0; }
.rt-char-grid     { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rt-badges        { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; }
.rt-related-grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rt-faq-grid      { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

/* === Acento verde ===
   El azul llevaba todo el peso. El verde entra como respiración: subraya los
   títulos de sección, marca el filo superior de las franjas oscuras y aparece
   en los estados interactivos. */
.rt-h-accent::after { content: ''; display: block;
                      width: var(--rt-title-bar-w); height: var(--rt-title-bar-h); border-radius: 2px;
                      background: var(--rt-green); margin: 18px 0 0; }
.rt-h-accent.is-center::after { margin-left: auto; margin-right: auto; }

/* Filo verde arriba de cada franja oscura */
.rt-band-accent { border-top: var(--rt-band-accent-w) solid var(--rt-green); }

/* Boton secundario dentro de una franja: se dibuja con el color del texto de
   la franja, asi se ve tanto sobre fondo oscuro como sobre fondo claro. */
.rt-btn-ghost-band {
  border: 1px solid color-mix(in srgb, var(--rt-band-ink) 45%, transparent);
  color: var(--rt-band-ink);
}
.rt-btn-ghost-band:hover { color: var(--rt-band-ink);
  border-color: color-mix(in srgb, var(--rt-band-ink) 75%, transparent); }
/* El logo va como SVG en linea y hereda currentColor, asi no hace falta una
   version oscura del PNG para las franjas claras. */
/* Las franjas oscuras usan su propio fondo/texto: asi un sitio claro no obliga
   a cambiar el azul de marca. */
.rt-band { background: var(--rt-band-bg); color: var(--rt-band-ink); }

/* Franja con degradado verde → azul oscuro. Arranca en el verde profundo y no
   en el de los botones: sobre esta franja va texto blanco y el verde claro no
   daría contraste suficiente. */
.rt-band-gradient { background: linear-gradient(90deg,
                      var(--rt-green-d) 0%, var(--rt-navy-2) 48%, var(--rt-navy) 100%); }

/* Tarjetas del catálogo: se levantan y se tiñen de verde al pasar el cursor */
.rt-product-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.rt-product-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(1,41,94,.14);
                         border-color: var(--rt-green); }
@media (hover: none) { .rt-product-card:hover { transform: none; box-shadow: none; } }

/* === Header ===
   Toda la cabecera (barra de contacto + navegación + CTA) va en Poppins, no
   solo los títulos. */
.rt-topbar, .rt-header { font-family: var(--rt-font-head); }

/* Barra de contacto: degradado de borde a borde, con el verde llevando la
   mayor parte y cerrando en el azul oscuro. El fondo vive aquí y no inline
   en header.php, para que sea una sola fuente. */
.rt-topbar { background: linear-gradient(90deg,
               var(--rt-topbar-from) 0%, var(--rt-topbar-from) 34%,
               color-mix(in srgb, var(--rt-topbar-from), var(--rt-topbar-to)) 74%,
               var(--rt-topbar-to) 100%);
             color: var(--rt-topbar-ink); }

/* === Navigation === */
.rt-nav-toggle { display: none; }
.rt-menu-btn   { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 26px; height: 20px; cursor: pointer; }
.rt-menu-btn span { display: block; height: 2px; background: var(--rt-header-ink); border-radius: 1px; }
.rt-cta-short  { display: none; }

/* === Hero === */
.rt-hero-mobile    { display: none; }
.rt-hero-overlay-m { display: none; }

/* Texto por slide: todas las copias comparten la misma celda del grid,
   así el contenedor toma el alto de la más alta y no hay saltos al rotar. */
.rt-hero-copies { display: grid; width: 100%; max-width: 560px; }
.rt-hero-copy   { grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none;
                  transition: opacity .5s ease, visibility .5s ease; }
.rt-hero-copy.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

/* === Carrusel de videos de la ficha ===
   Cada video respeta la proporción elegida en el panel: los horizontales
   ocupan el ancho y los verticales (Shorts/Reels) se limitan por altura
   y se centran, para que no queden gigantes ni con franjas negras. */
.rt-vid-carousel { margin: 0 0 32px; }
.rt-vid-head  { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.rt-vid-title { font-family: var(--rt-font-head); font-weight: 800; font-size: 18px; margin: 0; }
.rt-vid-nav   { display: flex; align-items: center; gap: 8px; }
.rt-vid-count { font-size: 13px; font-weight: 700; color: var(--rt-muted); font-variant-numeric: tabular-nums; }
.rt-vid-btn   { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--rt-border); background: #fff;
                color: var(--rt-ink); cursor: pointer; display: flex; align-items: center; justify-content: center;
                transition: border-color .15s, color .15s; }
.rt-vid-btn:hover:not([disabled]) { border-color: var(--rt-blue); color: var(--rt-blue); }
.rt-vid-btn[disabled] { opacity: .35; cursor: default; }

.rt-vid-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
                scroll-behavior: smooth; scrollbar-width: none; }
.rt-vid-track::-webkit-scrollbar { display: none; }

/* Tira de película: todos los videos comparten alto y el ancho lo marca su
   proporción. Así caben tres verticales de una vez y no queda hueco. */
/* El ancho lo fija el item, NO su contenido: si no, un título largo estira la
   tarjeta y dejan de caber tres. El caption envuelve dentro de ese ancho. */
.rt-vid-item  { flex: 0 0 auto; scroll-snap-align: start; min-width: 0; }
.rt-vid-item.is-tall   { width: 169px; }            /* 300px de alto en 9:16 */
.rt-vid-item.is-square { width: 300px; }            /* 300px de alto en 1:1  */
.rt-vid-item.is-wide   { flex: 0 0 100%; width: auto; }

.rt-vid-media { position: relative; display: block; margin: 0 auto; border-radius: 10px; overflow: hidden;
                background: var(--rt-navy); box-shadow: 0 6px 18px rgba(1,41,94,.16);
                height: 300px; width: auto; }
.rt-vid-item.is-wide .rt-vid-media { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.rt-vid-media.is-v { aspect-ratio: 9 / 16; }
.rt-vid-media.is-s { aspect-ratio: 1 / 1; }
.rt-vid-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rt-vid-play  { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
                width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.92);
                display: flex; align-items: center; justify-content: center;
                box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.rt-vid-caption { margin: 10px 0 0; font-size: 13.5px; font-weight: 700; color: var(--rt-ink);
                  text-align: center; line-height: 1.35; overflow-wrap: anywhere;
                  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
                  overflow: hidden; }

/* Inicial de respaldo cuando el ícono de la red no se puede dibujar */
.rt-social-letter { font-family: var(--rt-font-head); font-weight: 800; font-size: 15px;
                    line-height: 1; color: #fff; }

/* === Nota corta destacada en la ficha de producto === */
.rt-pdp-note { display: flex; align-items: flex-start; gap: 10px;
               margin: 0 0 24px; padding: 12px 16px;
               background: #fff; border: 1px solid var(--rt-border);
               border-left: 3px solid var(--rt-green); border-radius: 6px;
               font-size: 14.5px; color: #2a2a2a; line-height: 1.5; }

/* === Animaciones de entrada (IntersectionObserver) ===
   Solo se ocultan si el JS está activo: sin JS, todo se ve normal. */
.rt-js [data-rt-anim] {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.rt-js [data-rt-anim="up"]    { transform: translateY(28px); }
.rt-js [data-rt-anim="down"]  { transform: translateY(-28px); }
.rt-js [data-rt-anim="left"]  { transform: translateX(-32px); }
.rt-js [data-rt-anim="right"] { transform: translateX(32px); }
.rt-js [data-rt-anim="zoom"]  { transform: scale(.94); }
.rt-js [data-rt-anim].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rt-js [data-rt-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* === Tarjetas de línea del home (toda la tarjeta es un enlace) ===
   El contenedor .rt-line-item lleva la animación de entrada y la tarjeta su
   propio hover: así los dos transform no compiten entre sí. */
.rt-line-item { display: flex; }

/* Cada línea tiene su color propio (--rt-line, lo pone la plantilla): es lo
   que la diferencia de un vistazo. Se ve en el marco superior de la tarjeta,
   en el badge del ícono y en el enlace "Conocer más". */
.rt-line-card {
  flex: 1;
  display: flex; flex-direction: column; background: #fff; color: var(--rt-ink);
  border: 1px solid var(--rt-border); border-top: 4px solid var(--rt-line, var(--rt-blue));
  border-radius: 6px; overflow: hidden; text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.rt-line-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(1,41,94,.16);
                      border-color: var(--rt-line, var(--rt-blue)); color: var(--rt-ink); }
.rt-line-card:focus-visible { outline: 2px solid var(--rt-line, var(--rt-blue)); outline-offset: 3px; }

.rt-line-media { position: relative; display: block; height: 190px; overflow: hidden; }
.rt-line-badge { position: absolute; top: 12px; left: 12px; z-index: 2;
                 color: var(--rt-line-ink, #fff);
                 background: var(--rt-line, var(--rt-blue));
                 width: 34px; height: 34px; border-radius: 50%;
                 display: flex; align-items: center; justify-content: center; }
.rt-line-img   { display: block; width: 100%; height: 100%;
                 background-size: cover; background-position: center;
                 transition: transform .5s ease; }
.rt-line-card:hover .rt-line-img { transform: scale(1.06); }

.rt-line-body  { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.rt-line-title { font-family: var(--rt-font-ui); font-weight: 700; font-size: 19px; margin: 0 0 10px; }
.rt-line-desc  { font-size: 14.5px; color: var(--rt-muted); margin: 0 0 20px; flex: 1; }
/* El enlace usa el tono ya oscurecido en PHP (rt_line_text): los verdes claros
   y el beige de la línea cafetera serían ilegibles sobre blanco en su tono puro. */
.rt-line-cta   { font-family: var(--rt-font-ui); font-weight: 700; font-size: 14px;
                 color: var(--rt-line-text, var(--rt-line, var(--rt-blue)));
                 display: inline-flex; align-items: center; gap: 6px; }
.rt-line-arrow { transition: transform .25s ease; }
.rt-line-card:hover .rt-line-arrow { transform: translateX(5px); }

@media (hover: none) {
  .rt-line-card:hover { transform: none; box-shadow: none; }
  .rt-line-card:hover .rt-line-img { transform: none; }
}

/* Foto de la seccion de calidad: llena el recuadro entero. Antes iba dentro de
   un marco de color con relleno, y una foto apaisada dejaba el color a la vista
   por arriba y por abajo. */
.rt-quality-media {
  order: 2; border-radius: 10px; overflow: hidden;
  background: var(--rt-surface); aspect-ratio: 4 / 3;
}
.rt-quality-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .rt-quality-media { aspect-ratio: 16 / 10; } }

/* === Spec Table === */
.rt-spec-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rt-spec-table th, .rt-spec-table td { padding: 10px 14px; text-align: center; border-bottom: 1px solid var(--rt-border); }
.rt-spec-table thead th { border-bottom: 3px solid var(--rt-green); }

/* === FAQ Accordion === */
details.rt-faq summary { cursor: pointer; list-style: none; }
details.rt-faq summary::-webkit-details-marker { display: none; }
/* La flecha apunta abajo cerrada y arriba abierta, para que se note que hay
   contenido detrás de cada pregunta. */
details.rt-faq summary svg { transition: transform .2s ease, color .2s ease; }
details.rt-faq[open] summary svg { transform: rotate(180deg); color: var(--rt-green); }
details.rt-faq summary:hover svg { color: var(--rt-green); }

/* === Product Gallery === */
/* Escritorio: columna de miniaturas de alto fijo (igual que la imagen grande)
   con flechas arriba y abajo para recorrer el resto. */
.rt-thumbs-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rt-thumbs     { display: flex; flex-direction: column; gap: 10px;
                 max-height: 348px; overflow-y: auto; scroll-behavior: smooth;
                 scrollbar-width: none; }
.rt-thumbs::-webkit-scrollbar { display: none; }
/* Sin esto los botones encogen como flex items y caben todos: nunca desbordan. */
.rt-thumbs > button { flex: 0 0 auto; }

.rt-thumb-nav { width: 64px; height: 28px; flex-shrink: 0;
                border: 1px solid var(--rt-border); border-radius: 6px; background: #fff;
                color: var(--rt-muted); cursor: pointer;
                display: flex; align-items: center; justify-content: center;
                transition: border-color .15s, color .15s; }
.rt-thumb-nav:hover:not([disabled]) { border-color: var(--rt-blue); color: var(--rt-blue); }
.rt-thumb-nav[disabled] { opacity: .35; cursor: default; }
.rt-reel-rail { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; }
.rt-reel-item { flex: 0 0 180px; }

/* === Secciones con padding responsive === */
.rt-section-pad { padding: 64px 24px; }

/* === Contacto: formulario === */
.rt-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* === Contacto: mapa === */
.rt-map-frame { border-radius: 8px; overflow: hidden; border: 1px solid var(--rt-border); background: var(--rt-surface); }
.rt-map-frame iframe { display: block; border: 0; width: 100%; height: 380px; }
.rt-map-link { display: none; }

/* === Contacto: otras formas de contactarnos === */
.rt-ways { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.rt-way  { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
           padding: 20px 16px; border-radius: 10px;
           border: 1px solid color-mix(in srgb, var(--rt-band-ink) 14%, transparent);
           background: color-mix(in srgb, var(--rt-band-ink) 4%, transparent); }
.rt-way-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
              border-radius: 50%; flex-shrink: 0;
              background: color-mix(in srgb, var(--rt-green) 16%, transparent); }
.rt-way-ico i, .rt-way-ico svg { width: 21px; height: 21px; color: var(--rt-green); }
/* El logo de WhatsApp es un PNG blanco: aqui va sobre el verde solido de la
   marca para que se vea igual con el fondo claro o oscuro. */
.rt-way-ico--wa { background: #25d366; }
.rt-way-ico img { width: 22px; height: 22px; object-fit: contain; }
.rt-way-body { min-width: 0; }
.rt-way h3 { font-family: var(--rt-font-head); font-size: 15px; color: var(--rt-green); margin: 0 0 6px; }
.rt-way p  { margin: 0; color: var(--rt-on-dark); font-size: 14px; overflow-wrap: anywhere; }
.rt-way a  { color: var(--rt-on-dark); }
.rt-way a:hover { color: var(--rt-band-ink); }

/* Contacto: un botón de WhatsApp por línea telefónica, compactos y apilados
   dentro de la tarjeta. Van al chat directo, no al número a secas. */
.rt-wa-list { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 0; }
.rt-wa-btn, .rt-way .rt-wa-btn {
              display: inline-flex; align-items: center; gap: 8px;
              padding: 9px 14px; border-radius: var(--rt-btn-radius);
              background: #25d366; color: #fff; font-family: var(--rt-font-ui);
              font-weight: 700; font-size: 13.5px; line-height: 1.2;
              text-decoration: none; transition: filter .15s; }
.rt-wa-btn:hover, .rt-way .rt-wa-btn:hover { color: #fff; filter: brightness(.93); }
.rt-wa-btn span, .rt-way .rt-wa-btn span,
.rt-wa-btn em,   .rt-way .rt-wa-btn em    { color: #fff; }
.rt-wa-btn img    { width: 17px; height: 17px; object-fit: contain; flex-shrink: 0; }
.rt-wa-btn em     { font-style: normal; font-weight: 600; margin-left: 6px; font-size: 12.5px; }
/* Un número partido en dos líneas se lee fatal: antes se encoge la letra. */
.rt-wa-btn span   { white-space: nowrap; }
@media (max-width: 1100px) and (min-width: 901px) {
  .rt-wa-btn, .rt-way .rt-wa-btn { font-size: 12.5px; padding: 8px 11px; gap: 6px; }
}

.rt-ways-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.rt-ways-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
               padding: 14px 24px; border-radius: var(--rt-btn-radius); font-weight: 700; font-size: 15px;
               font-family: var(--rt-font-ui); cursor: pointer; border: 1px solid transparent; }
.rt-ways-btn--wa   { background: var(--rt-green); color: var(--rt-btn-text); }
.rt-ways-btn--wa:hover { color: var(--rt-btn-text); opacity: .92; }
.rt-ways-btn--mail { background: transparent; color: var(--rt-band-ink);
                     border-color: color-mix(in srgb, var(--rt-band-ink) 45%, transparent); }
.rt-ways-btn--mail:hover { color: var(--rt-band-ink);
                     background: color-mix(in srgb, var(--rt-band-ink) 8%, transparent); }

/* === WhatsApp flotante ===
   Con un numero, el boton enlaza directo. Con varios, abre un panel para
   elegir la linea, en vez de mandar todo el trafico a la primera. */
.rt-wa-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 61;
  width: 58px; height: 58px; border: 0; border-radius: 50%; cursor: pointer;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  transition: transform .18s ease, filter .18s ease;
}
.rt-wa-fab:hover { transform: scale(1.06); filter: brightness(.96); }
.rt-wa-fab img   { width: 28px; height: 28px; object-fit: contain; }
.rt-wa-fab-off   { display: none; }
.rt-wa-widget.is-open .rt-wa-fab-on  { display: none; }
.rt-wa-widget.is-open .rt-wa-fab-off { display: block; }

.rt-wa-bubble {
  position: fixed; bottom: 38px; right: 92px; z-index: 60;
  background: #fff; color: var(--rt-ink); font-family: var(--rt-font-ui);
  font-size: 13px; font-weight: 600; line-height: 1.35;
  padding: 10px 14px; border-radius: 10px; max-width: 190px;
  box-shadow: 0 6px 20px rgba(2,8,23,.22);
}
.rt-wa-bubble::after {
  content: ''; position: absolute; right: -6px; bottom: 16px;
  width: 12px; height: 12px; background: #fff; transform: rotate(45deg);
}
.rt-wa-bubble[hidden] { display: none; }

.rt-wa-panel {
  position: fixed; bottom: 94px; right: 24px; z-index: 61;
  width: min(340px, calc(100vw - 32px));
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 46px rgba(2,8,23,.34);
  font-family: var(--rt-font-body);
}
.rt-wa-panel[hidden] { display: none; }
.rt-wa-panel-head {
  background: #25d366; color: #fff; padding: 14px 16px;
  display: flex; align-items: flex-start; gap: 11px;
}
.rt-wa-panel-head > img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; margin-top: 1px; }
.rt-wa-panel-title { font-family: var(--rt-font-ui); font-weight: 700; font-size: 15px; margin: 0; }
.rt-wa-panel-sub   { margin: 3px 0 0; font-size: 12.5px; opacity: .92; }
.rt-wa-panel-x {
  margin-left: auto; background: rgba(255,255,255,.18); border: 0; color: #fff;
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.rt-wa-panel-x:hover { background: rgba(255,255,255,.3); }
.rt-wa-panel-note {
  margin: 0; padding: 11px 16px 5px; text-align: center;
  font-size: 12px; color: var(--rt-muted);
}
.rt-wa-panel-list {
  display: flex; flex-direction: column; gap: 8px;
  padding: 6px 12px 14px; max-height: 340px; overflow-y: auto;
}
.rt-wa-row {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border: 1px solid var(--rt-border); border-left: 3px solid #25d366;
  border-radius: 10px; background: #fff; color: var(--rt-ink); text-decoration: none;
  transition: background .15s, border-color .15s;
}
.rt-wa-row:hover, .rt-wa-row:focus-visible { background: #f0fdf4; color: var(--rt-ink); }
.rt-wa-row-ico {
  width: 34px; height: 34px; border-radius: 50%; background: #25d366; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.rt-wa-row-ico img  { width: 18px; height: 18px; object-fit: contain; }
.rt-wa-row-body     { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rt-wa-row-body strong { font-family: var(--rt-font-ui); font-size: 13.5px; font-weight: 700; }
.rt-wa-row-body em     { font-style: normal; font-size: 12.5px; color: var(--rt-muted); margin-top: 1px; }
.rt-wa-row-arrow    { color: #25d366; flex-shrink: 0; }

@media (max-width: 600px) {
  .rt-wa-panel  { right: 12px; bottom: 88px; }
  .rt-wa-fab    { bottom: 18px; right: 18px; }
  .rt-wa-bubble { display: none; }
}

/* === Modal de cotización === */
.rt-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.rt-modal[hidden] { display: none; }
.rt-modal-backdrop { position: absolute; inset: 0; background: rgba(1,41,94,.55); backdrop-filter: blur(2px); }
.rt-modal-box { position: relative; width: 100%; max-width: 540px; max-height: calc(100vh - 48px); overflow-y: auto;
                background: #fff; border-radius: 12px; padding: 28px 28px 24px;
                box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.rt-modal-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
              border: 0; background: transparent; color: var(--rt-muted); cursor: pointer;
              display: flex; align-items: center; justify-content: center; }
.rt-modal-x:hover { background: var(--rt-surface); color: var(--rt-ink); }
.rt-modal-kicker { color: var(--rt-green); font-weight: 700; letter-spacing: .06em; font-size: 12px; text-transform: uppercase; margin: 0 0 6px; }
.rt-modal-title  { font-family: var(--rt-font-head); font-weight: 800; font-size: 24px; margin: 0 0 8px; }
.rt-modal-sub    { font-size: 14.5px; color: var(--rt-muted); margin: 0 0 20px; }
.rt-modal-form   { display: flex; flex-direction: column; gap: 14px; }
.rt-modal-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rt-field        { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rt-field label  { font-size: 13px; color: var(--rt-muted); }
.rt-field input, .rt-field textarea {
  padding: 12px; border-radius: 6px; border: 1px solid var(--rt-border); background: #fff; color: var(--rt-ink); width: 100%;
}
.rt-field textarea { resize: vertical; }
.rt-field input:focus, .rt-field textarea:focus { outline: 2px solid var(--rt-blue); outline-offset: 1px; border-color: var(--rt-blue); }
.rt-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--rt-muted); line-height: 1.4; }
.rt-check input { margin-top: 2px; flex-shrink: 0; }
.rt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rt-modal-msg { margin: 0; padding: 11px 14px; border-radius: 6px; font-size: 14px; }
.rt-modal-msg.is-ok    { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
.rt-modal-msg.is-error { background: #fdecea; border: 1px solid #f5c2c0; color: #8a1c13; }
.rt-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rt-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--rt-blue); color: #fff;
                  padding: 13px 26px; border-radius: var(--rt-btn-radius); font-weight: 700; font-size: 15px;
                  font-family: var(--rt-font-ui); border: 0; cursor: pointer; }
.rt-btn-primary:hover { background: #005ac2; }
.rt-btn-primary[disabled] { opacity: .6; cursor: default; }
.rt-btn-ghost { background: transparent; border: 0; color: var(--rt-muted); font-family: inherit; font-size: 14.5px;
                font-weight: 600; padding: 13px 10px; cursor: pointer; }
.rt-btn-ghost:hover { color: var(--rt-ink); }
.rt-modal-foot { margin: 4px 0 0; font-size: 13px; color: var(--rt-muted); }

/* === Documentos legales (políticas) === */
.rt-policy-layout { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; }

.rt-policy-toc { position: sticky; top: 24px; }
.rt-policy-toc-title { font-family: var(--rt-font-head); font-weight: 800; font-size: 13px;
                       text-transform: uppercase; letter-spacing: .06em; color: var(--rt-muted); margin: 0 0 12px; }
.rt-policy-toc nav { display: flex; flex-direction: column; border-left: 2px solid var(--rt-border); }
.rt-policy-toc a   { padding: 8px 0 8px 14px; margin-left: -2px; border-left: 2px solid transparent;
                     font-size: 14px; color: var(--rt-muted); line-height: 1.35; }
.rt-policy-toc a:hover { color: var(--rt-blue); border-left-color: var(--rt-blue); }

.rt-policy-body { min-width: 0; max-width: 760px; font-size: 16px; color: #2a2a2a; line-height: 1.75; }
.rt-policy-body > :first-child { margin-top: 0; }
.rt-policy-body h2 { font-family: var(--rt-font-head); font-weight: 800; font-size: 21px;
                     color: var(--rt-ink); margin: 40px 0 14px; scroll-margin-top: 24px; line-height: 1.3; }
.rt-policy-body h3 { font-family: var(--rt-font-head); font-weight: 700; font-size: 17px;
                     color: var(--rt-ink); margin: 28px 0 10px; }
.rt-policy-body p  { margin: 0 0 16px; }
.rt-policy-body ul, .rt-policy-body ol { margin: 0 0 18px; padding-left: 22px; }
.rt-policy-body li { margin-bottom: 8px; }
.rt-policy-body a  { text-decoration: underline; }
.rt-policy-body table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 0 0 20px; display: block; overflow-x: auto; }
.rt-policy-body th, .rt-policy-body td { padding: 10px 14px; border: 1px solid var(--rt-border); text-align: left; }
.rt-policy-body blockquote { margin: 0 0 18px; padding: 14px 18px; border-left: 3px solid var(--rt-blue);
                             background: #fff; color: var(--rt-muted); }

.rt-policy-contact { margin-top: 44px; padding: 20px 24px; border: 1px solid var(--rt-border);
                     border-radius: 8px; background: #fff; font-size: 15px; }
.rt-policy-contact-title { font-family: var(--rt-font-head); font-weight: 800; font-size: 16px; margin: 0 0 8px; color: var(--rt-ink); }
.rt-policy-contact p:last-child { margin: 0; color: var(--rt-muted); }

.rt-policy-others { margin-top: 32px; }
.rt-policy-others-title { font-family: var(--rt-font-head); font-weight: 800; font-size: 16px; margin: 0 0 14px; }
.rt-policy-others-list  { display: grid; gap: 10px; }
.rt-policy-others-list a { display: flex; align-items: center; gap: 10px; padding: 13px 16px;
                           border: 1px solid var(--rt-border); border-radius: 8px; background: #fff;
                           font-size: 14.5px; font-weight: 600; color: var(--rt-ink); text-decoration: none; }
.rt-policy-others-list a:hover { border-color: var(--rt-blue); color: var(--rt-blue); }

/* === Tablet === */
@media (max-width: 900px) {
  .rt-menu-btn { display: flex; }
  .rt-nav-links { display: none !important; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--rt-header-bg); border-bottom: 1px solid var(--rt-header-line); padding: 16px 24px; gap: 16px !important; }
  .rt-nav-toggle:checked ~ .rt-nav-links { display: flex !important; }
  .rt-grid2         { grid-template-columns: 1fr; gap: 32px; }
  .rt-grid4         { grid-template-columns: 1fr 1fr; }
  .rt-grid5         { grid-template-columns: 1fr 1fr; }
  .rt-footer-grid   { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; }
  .rt-shop-grid     { grid-template-columns: 1fr 1fr; }
  .rt-contact-grid  { grid-template-columns: 1fr; }
  .rt-policy-layout { grid-template-columns: 1fr; gap: 28px; }
  .rt-policy-toc    { position: static; }
  .rt-values        { grid-template-columns: 1fr 1fr; }
  .rt-ways          { grid-template-columns: repeat(3, 1fr); }
  .rt-pdp-grid      { grid-template-columns: 1fr; }
  .rt-gallery       { flex-direction: column-reverse !important; position: static !important; top: auto !important; gap: 12px !important; }
  .rt-main-img      { width: 100%; height: 360px !important; flex: 0 0 auto !important; padding: 12px !important; background-size: contain !important; background-color: var(--rt-surface) !important; }
  .rt-thumbs-col    { flex-direction: row; width: 100%; }
  .rt-thumb-nav     { display: none !important; }
  .rt-thumbs        { flex-direction: row; overflow-x: auto; overflow-y: visible; max-height: none;
                      -webkit-overflow-scrolling: touch; padding-bottom: 6px; scroll-snap-type: x mandatory; width: 100%; }
  .rt-thumbs button { scroll-snap-align: start; flex: 0 0 auto; }
  .rt-char-grid     { grid-template-columns: 1fr; }
  .rt-badges        { grid-template-columns: 1fr; }
  .rt-related-grid  { grid-template-columns: repeat(3, 1fr); }
  .rt-faq-grid      { grid-template-columns: 1fr; }

  /* Columna estrecha: un video por vista */
  .rt-vid-item,
  .rt-vid-item.is-tall,
  .rt-vid-item.is-square { flex: 0 0 100%; width: auto; }
  .rt-vid-media      { height: auto; }
  .rt-vid-media.is-v { height: 380px; width: auto; }
  .rt-vid-media.is-s { width: 100%; height: auto; }
  .rt-vid-item.is-wide .rt-vid-media,
  .rt-vid-media.is-h { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}

/* === Mobile === */
@media (max-width: 600px) {
  .rt-cta-full    { display: none !important; }
  .rt-cta-short   { display: inline !important; }
  .rt-topbar-coverage { display: none !important; }

  /* Barra superior: botón Llamar (azul) + Cotizar WhatsApp (verde); ocultar correo */
  .rt-topbar-inner { flex-wrap: nowrap !important; gap: 8px !important; padding: 8px 14px !important; }
  .rt-top-mail     { display: none !important; }
  .rt-top-phone,
  .rt-top-wa       { flex: 1 1 0; justify-content: center; font-size: 14px !important; padding: 11px 12px !important; border-radius: 8px !important; }
  .rt-top-phone    { background: var(--rt-blue) !important; border-color: var(--rt-blue) !important; color: #fff !important; }
  .rt-top-phone i,
  .rt-top-phone svg { color: #fff !important; stroke: #fff !important; }
  .rt-top-wa       { display: flex !important; background: var(--rt-green) !important; border-color: var(--rt-green) !important; color: #fff !important; }

  /* En móvil, la barra de botones (Llamar/Cotizar) es la que queda fija; el menú no */
  .rt-topbar       { position: sticky; top: 0; z-index: 60; }
  .rt-header       { position: relative !important; z-index: 55; }
  .rt-nav-links    { z-index: 56 !important; box-shadow: 0 10px 24px rgba(0,0,0,.35); }

  /* Catálogo de productos: 1 columna en móvil */
  .rt-shop-grid    { grid-template-columns: 1fr !important; }

  /* Relacionados: carrusel horizontal en móvil (los 3 deslizables) */
  .rt-related-grid { display: flex !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 8px; }
  .rt-related-grid > a { flex: 0 0 80%; scroll-snap-align: start; }

  /* Botones del banner en una sola línea */
  .rt-hero-btns    { flex-wrap: nowrap !important; gap: 10px !important; }
  .rt-hero-btns a  { flex: 1 1 0; text-align: center; padding: 13px 10px !important; font-size: 14px !important; white-space: nowrap; }

  /* Header: logo a la izquierda, hamburguesa a la derecha; ocultar CTA (ya está arriba) */
  .rt-header-row   { display: flex !important; justify-content: space-between !important; align-items: center; gap: 12px; }
  .rt-logo         { order: 1; justify-self: auto !important; margin: 0 !important; }
  .rt-logo img     { height: var(--rt-logo-h-m) !important; }
  .rt-header-left  { order: 2; }
  .rt-header-right { display: none !important; }
  .rt-hero-desktop    { display: none !important; }
  .rt-hero-mobile     { display: block !important; }
  .rt-hero-overlay-d  { display: none !important; }
  .rt-hero-overlay-m  { display: block !important; }
  .rt-hero            { height: 620px !important; }
  /* Espacio arriba para que se vea el fondo del banner antes del texto */
  .rt-hero-content    { position: absolute !important; top: 44% !important; left: 0; right: 0; bottom: 0; height: auto !important; align-items: flex-start !important; }
  .rt-hero-slide img.rt-hero-mobile { object-position: center top !important; }
  .rt-hero-h1         { font-size: 26px !important; line-height: 1.2 !important; margin-bottom: 16px !important; }
  .rt-hero-lead       { font-size: 14.5px !important; margin-bottom: 20px !important; }
  .rt-hero-arrow      { display: none !important; }
  .rt-grid4           { grid-template-columns: 1fr !important; }
  .rt-values          { grid-template-columns: 1fr !important; }

  /* --- Contacto móvil --- */
  .rt-section-pad     { padding: 40px 18px !important; }
  .rt-contact-hero h1 { font-size: 27px !important; line-height: 1.2; }
  .rt-policy-h1       { font-size: 25px !important; }
  .rt-policy-body     { font-size: 15.5px; }
  .rt-policy-body h2  { font-size: 19px; margin-top: 32px; }
  .rt-policy-toc      { border: 1px solid var(--rt-border); border-radius: 8px; background: #fff; padding: 14px 16px; }
  .rt-policy-toc nav  { border-left: 0; }
  .rt-policy-toc a    { padding: 7px 0; border-left: 0; margin-left: 0; }
  .rt-contact-hero p  { font-size: 14.5px !important; }
  .rt-contact-grid    { gap: 36px !important; }
  .rt-form-row        { grid-template-columns: 1fr; }
  .rt-map-frame iframe { height: 260px; }
  .rt-map-link        { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
                        margin-top: 12px; width: 100%; padding: 13px 16px; border-radius: 6px;
                        border: 1px solid var(--rt-border); background: #fff; color: var(--rt-ink);
                        font-weight: 700; font-size: 14.5px; }

  .rt-ways            { grid-template-columns: 1fr; gap: 10px; }
  .rt-way             { flex-direction: row; align-items: center; text-align: left; gap: 14px; padding: 14px 16px; }
  .rt-way h3          { margin: 0 0 3px; font-size: 14px; }
  .rt-way p           { font-size: 14px; }
  .rt-ways-cta        { flex-direction: column; gap: 10px; margin-top: 24px; }
  .rt-ways-btn        { width: 100%; }

  /* --- Modal en móvil: hoja inferior --- */
  .rt-modal           { padding: 0; align-items: flex-end; }
  .rt-modal-box       { max-width: none; max-height: 92vh; border-radius: 14px 14px 0 0; padding: 24px 18px 20px; }
  .rt-modal-row       { grid-template-columns: 1fr; }
  .rt-modal-title     { font-size: 21px; }
  .rt-modal-actions   { flex-direction: column; align-items: stretch; gap: 6px; }
  .rt-btn-primary     { justify-content: center; width: 100%; }
  .rt-btn-ghost       { width: 100%; }
}