/* ========================================================
   R&P IMPORTADORES - APP PWA & MOBILE UI/UX PRO MAX
   - Menú superior e inferior estrictamente FIJOS en móviles
   - Botones fijos arriba a la derecha: [Actualizar] y [Modo Claro/Oscuro]
   - Botón WhatsApp flotante elevado (cero solapamiento con barra inferior)
   - Eliminación de espacios en blanco innecesarios
   - Soporte nativo de Modo Oscuro / Claro
   - Optimización de renderizado ultrarrápido (< 2s)
   ======================================================== */

/* La página nunca declaraba color-scheme — sin esto, el navegador (sobre
   todo Chrome en Android, "Tema oscuro" del sistema) trata el sitio como
   "no sabe de modo oscuro" y le aplica SU PROPIO oscurecimiento heurístico
   por encima del modo oscuro manual de este sitio, peleándose entre sí:
   produce exactamente texto que el CSS dice azul marino pero se pinta
   blanco/transparente, de forma inconsistente entre elementos. Declararlo
   (sincronizado con el mismo [data-theme] que ya controla todo lo demás)
   le dice al navegador "esta página ya maneja los dos temas, no la toques".
   Sincronizado con [data-theme]: claro por defecto, oscuro solo cuando el
   toggle (o la preferencia guardada) activa data-theme="dark". */
:root { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* Apagado temporal de transiciones durante el cambio de tema (ver
   applyTheme() en app-panel.js). Varias tarjetas/componentes tienen
   "transition: all 0.35s" — sin esto, el corrector de contraste medía el
   fondo a mitad de la animación de color y dejaba texto azul sobre fondo
   azul en el primer cambio de tema. */
html.rp-theme-switching,
html.rp-theme-switching * {
	transition: none !important;
}

:root {
	/* Altura FIJA (no medida por JS) de la topbar de contacto — ver bloque
	   "TOPBAR DE CONTACTO" más abajo. Un valor constante, igual en cualquier
	   ancho de pantalla, se aplica en el primerísimo pintado de la página:
	   cero JavaScript, cero parpadeo, cero condición de carrera. */
	--ryp-anuncio-h: 40px;
	--ryp-bottomnav-h: 60px;
	--ryp-header-h: 58px;
	
	/* PALETA ESTRICTA CORPORATIVA: AZUL, GRIS Y BLANCO */
	--azul-primario: #123B5D;
	--azul-oscuro: #0C273E;
	--azul-hover: #1A4B75;
	--gris-fondo: #F8FAFC;
	--gris-superficie: #F1F5F9;
	--gris-borde: #E2E8F0;
	--gris-texto: #5A6270;
	--gris-titulos: #123B5D;
	--blanco: #FFFFFF;
	
	/* VARIABLES MODO CLARO (TEXTOS OSCUROS / FONDOS CLAROS / BOTONES AZULES) */
	--bg-body: #FFFFFF;
	--bg-surface: #F8FAFC;
	--bg-card: #FFFFFF;
	--text-primary: #123B5D;
	--text-body: #2D3748;
	--text-secondary: #5A6270;
	--border-color: #E2E8F0;
	--header-bg: #FFFFFF;
	--bottom-nav-bg: #FFFFFF;
	
	--btn-bg: #123B5D;
	--btn-text: #FFFFFF;
	--btn-border: #123B5D;
}

/* ========================================================
   MODO OSCURO (DARK THEME)
   - TEXTOS CLAROS SOBRE FONDOS OSCUROS
   - BOTONES BLANCOS CON LETRA AZUL OSCURA
   ======================================================== */
html[data-theme="dark"] {
	--bg-body: #0B1926;
	--bg-surface: #0F2233;
	--bg-card: #132A3E;
	--text-primary: #FFFFFF;
	--text-body: #E2E8F0;
	--text-secondary: #94A3B8;
	--border-color: #1E3A56;
	--header-bg: #0B1926;
	--bottom-nav-bg: #0B1926;
	
	--btn-bg: #FFFFFF;
	--btn-text: #123B5D;
	--btn-border: #FFFFFF;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .page-wrapper {
	background-color: var(--bg-body) !important;
	color: var(--text-body) !important;
}

html[data-theme="dark"] .main-header,
html[data-theme="dark"] .bottom-nav-mobile {
	background-color: var(--header-bg) !important;
	border-color: var(--border-color) !important;
}

/* El menú principal fija su color de letra en un <style> por página
   (color: #123B5D !important), que por especificidad de selector le gana a
   cualquier regla genérica de este archivo si no se apunta igual de
   específico. Aquí sí se iguala para que el texto del menú se vea claro
   sobre el header oscuro en vez de azul oscuro sobre azul oscuro. */
html[data-theme="dark"] .main-menu__list > li > a {
	color: #FFFFFF !important;
}
html[data-theme="dark"] .main-menu__list > li.current > a,
html[data-theme="dark"] .main-menu__list > li:hover > a {
	color: #90CAF9 !important;
}

html[data-theme="dark"] .bottom-nav-mobile a {
	color: #94A3B8 !important;
}
html[data-theme="dark"] .bottom-nav-mobile a.active {
	color: #FFFFFF !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .catalog-card-studio,
html[data-theme="dark"] .service-card-two,
html[data-theme="dark"] .catalog-product-card,
html[data-theme="dark"] .feature-two__item,
html[data-theme="dark"] .testimonials-card,
html[data-theme="dark"] .accrodion,
html[data-theme="dark"] .accrodion-grp .accrodion {
	background-color: var(--bg-card) !important;
	border-color: var(--border-color) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .catalog-card-title,
html[data-theme="dark"] .sec-title__title,
html[data-theme="dark"] .catalog-title-studio,
html[data-theme="dark"] .page-header__title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .accrodion-title h4,
html[data-theme="dark"] .accrodion-title h4::before,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 {
	color: var(--text-primary) !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] .catalog-desc-studio,
html[data-theme="dark"] .spec-dims-badge,
html[data-theme="dark"] .accrodion-content p,
html[data-theme="dark"] .feature-two__text,
html[data-theme="dark"] span:not(.sec-title__tagline):not(.floens-btn span):not(.catalog-tab-pill):not(.ryp-anuncio-texto),
html[data-theme="dark"] ul li {
	color: var(--text-body) !important;
}

/* ========================================================
   SISTEMA UNIVERSAL DE TAGLINES Y BADGES DE SECCIÓN
   - Contraste absoluto garantizado en Modo Claro y Modo Oscuro
   ======================================================== */

/* 1. MODO CLARO (Fondos Claros / Normales): Fondo suave azulado con texto Azul Marino Corporativo */
.sec-title__tagline,
.section-tagline,
.thm-badge,
.about-one .sec-title__tagline,
.about-two .sec-title__tagline,
.faq-one .sec-title__tagline,
.faq-page .sec-title__tagline,
.work-process .sec-title__tagline,
.services-one .sec-title__tagline,
.services-two .sec-title__tagline,
.product-home .sec-title__tagline,
.contact-one .sec-title__tagline,
.sec-title--center .sec-title__tagline {
	color: #123B5D !important;
	background: #EEF4FA !important;
	border: 1px solid #CBDCEB !important;
	font-size: 12.5px !important;
	font-weight: 800 !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: static !important;
	transform: none !important;
	writing-mode: horizontal-tb !important;
	padding: 5px 16px !important;
	border-radius: 30px !important;
	margin-bottom: 12px !important;
	box-shadow: 0 1px 3px rgba(18, 59, 93, 0.06) !important;
	line-height: 1.4 !important;
}

.sec-title__tagline::before,
.sec-title__tagline::after {
	display: none !important;
}

/* 2. MODO CLARO en Secciones Oscuras / Azul Corporativo (#123B5D) */
.projects-two .sec-title__tagline,
.projects-three .sec-title__tagline,
.funfact-one .sec-title__tagline,
.cta-one .sec-title__tagline,
.contact-section .sec-title__tagline,
.dark-section .sec-title__tagline,
[style*="background: #123B5D"] .sec-title__tagline,
[style*="background-color: #123B5D"] .sec-title__tagline,
[style*="background:#123B5D"] .sec-title__tagline {
	color: #FFFFFF !important;
	background: rgba(255, 255, 255, 0.20) !important;
	border: 1px solid rgba(255, 255, 255, 0.40) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

/* 3. MODO OSCURO GLOBAL (html[data-theme="dark"]): Fondo oscuro con texto blanco / azul claro */
html[data-theme="dark"] .sec-title__tagline,
html[data-theme="dark"] .section-tagline,
html[data-theme="dark"] .thm-badge,
html[data-theme="dark"] .about-one .sec-title__tagline,
html[data-theme="dark"] .about-two .sec-title__tagline,
html[data-theme="dark"] .faq-one .sec-title__tagline,
html[data-theme="dark"] .faq-page .sec-title__tagline,
html[data-theme="dark"] .work-process .sec-title__tagline,
html[data-theme="dark"] .services-one .sec-title__tagline,
html[data-theme="dark"] .services-two .sec-title__tagline,
html[data-theme="dark"] .product-home .sec-title__tagline,
html[data-theme="dark"] .sec-title--center .sec-title__tagline {
	color: #FFFFFF !important;
	background: #1E3A56 !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .catalog-search-card,
html[data-theme="dark"] .catalog-search-box {
	background: var(--bg-card) !important;
	border-color: var(--border-color) !important;
}

html[data-theme="dark"] .catalog-search-field,
html[data-theme="dark"] .catalog-search-input {
	color: #FFFFFF !important;
}
html[data-theme="dark"] .catalog-search-field::placeholder,
html[data-theme="dark"] .catalog-search-input::placeholder {
	color: #94A3B8 !important;
}

html[data-theme="dark"] .catalog-tab-pill,
html[data-theme="dark"] .catalog-sub-pill,
html[data-theme="dark"] .service-tab-btn,
html[data-theme="dark"] .cat-filter-btn {
	background: var(--bg-card) !important;
	color: #CBD5E1 !important;
	border-color: var(--border-color) !important;
}

html[data-theme="dark"] .catalog-tab-pill.active,
html[data-theme="dark"] .catalog-sub-pill.active,
html[data-theme="dark"] .service-tab-btn.active,
html[data-theme="dark"] .cat-filter-btn.active {
	background: #FFFFFF !important;
	color: #123B5D !important;
	border-color: #FFFFFF !important;
	font-weight: 800 !important;
}

html[data-theme="dark"] .catalog-quick-tag {
	background: #14283C !important;
	color: #FFFFFF !important;
	border-color: #1E3A56 !important;
}

html[data-theme="dark"] .section-space,
html[data-theme="dark"] section:not(.page-header):not(.contact-section) {
	background-color: var(--bg-body) !important;
}

/* ========================================================
   BOTONES CORPORATIVOS: CONTRASTE BLINDADO (CLARO / OSCURO)
   - Modo Claro: Fondo Azul Marino (#123B5D) con texto e íconos BLANCOS (#FFFFFF)
   - Modo Oscuro: Fondo Blanco (#FFFFFF) con texto e íconos AZUL OSCURO (#123B5D)
   ======================================================== */
.floens-btn,
.main-header__btn,
.catalog-cta-btn-navy,
.banner-one__btn,
.evaluation-schedule__btn {
	background: #123B5D !important;
	color: #FFFFFF !important;
	border: 2px solid #123B5D !important;
	box-shadow: 0 4px 14px rgba(18, 59, 93, 0.20) !important;
}

.floens-btn span,
.main-header__btn span,
.catalog-cta-btn-navy span,
.banner-one__btn span,
.evaluation-schedule__btn span,
.floens-btn i,
.main-header__btn i,
.catalog-cta-btn-navy i,
.banner-one__btn i,
.evaluation-schedule__btn i {
	color: #FFFFFF !important;
}

.floens-btn:hover,
.main-header__btn:hover,
.catalog-cta-btn-navy:hover,
.banner-one__btn:hover {
	background: #0C273E !important;
	border-color: #0C273E !important;
}

/* 2026-08-31: se eliminó la inversión a fondo blanco/texto navy en modo
   oscuro — el sitio ahora es SIEMPRE oscuro (ver app-panel.js), así que esta
   inversión se aplicaba permanentemente y era la causa directa del botón
   "Cotizar" con texto invisible. Los botones se quedan con el estilo base
   de arriba (fondo navy, texto blanco) en todos los casos. */

html[data-theme="dark"] .mobile-top-btn {
	background: #132A3E !important;
	color: #FFFFFF !important;
	border-color: #1E3A56 !important;
}

/* ========================================================
   FORMULARIOS: CONTRASTE BLINDADO CLARO / OSCURO
   ======================================================== */
.form-label {
	color: #123B5D !important;
	font-weight: 700 !important;
	font-size: 13px !important;
}

.form-control,
.form-select,
input[type="text"],
input[type="tel"],
input[type="email"],
textarea,
select {
	background: #F8FAFC !important;
	border: 1.5px solid #CBD5E1 !important;
	color: #123B5D !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
	border-color: #123B5D !important;
	background: #FFFFFF !important;
	box-shadow: 0 0 0 3px rgba(18, 59, 93, 0.15) !important;
	color: #123B5D !important;
}

html[data-theme="dark"] .form-label {
	color: #90CAF9 !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
	background: #0E1E2C !important;
	border-color: rgba(255, 255, 255, 0.18) !important;
	color: #FFFFFF !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
	border-color: #90CAF9 !important;
	background: #14283C !important;
	box-shadow: 0 0 0 3px rgba(144, 202, 249, 0.25) !important;
	color: #FFFFFF !important;
}

/* ========================================================
   ACORDEONES Y PREGUNTAS FRECUENTES (FAQS): MODO CLARO Y OSCURO
   ======================================================== */
.faq-accordion .accordion,
.floens-accordion .accordion,
.accrodion {
	background: #FFFFFF !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 12px !important;
	margin-bottom: 12px !important;
	transition: all 0.2s ease !important;
}

.faq-accordion .accordion-title h4,
.floens-accordion .accordion-title h4,
.accrodion-title h4 {
	color: #123B5D !important;
	font-weight: 700 !important;
}

.faq-accordion .accordion-content p,
.floens-accordion .accordion-content p,
.accrodion-content p {
	color: #475569 !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
}

html[data-theme="dark"] .faq-accordion .accordion,
html[data-theme="dark"] .floens-accordion .accordion,
html[data-theme="dark"] .accrodion {
	background: #14283C !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .faq-accordion .accordion-title h4,
html[data-theme="dark"] .floens-accordion .accordion-title h4,
html[data-theme="dark"] .accrodion-title h4 {
	color: #FFFFFF !important;
}

html[data-theme="dark"] .faq-accordion .accordion-content p,
html[data-theme="dark"] .floens-accordion .accordion-content p,
html[data-theme="dark"] .accrodion-content p {
	color: #CBD5E1 !important;
}

/* ========================================================
   SECCIÓN DE CONTACTO & BENEFICIOS: MÁXIMA LEGIBILIDAD
   ======================================================== */
.contact-section {
	background: linear-gradient(135deg, rgba(18, 59, 93, 0.96) 0%, rgba(8, 25, 40, 0.98) 100%) !important;
	color: #FFFFFF !important;
}

.contact-section h2,
.contact-section h3 {
	color: #FFFFFF !important;
}

.contact-section .badge,
.cta-one .badge,
.badge-cotizacion,
span.badge {
	background: #FFFFFF !important;
	color: #123B5D !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	padding: 6px 16px !important;
	text-transform: uppercase !important;
	letter-spacing: 1.5px !important;
	border-radius: 20px !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
	display: inline-block !important;
	border: none !important;
}

html[data-theme="dark"] .contact-section .badge,
body.dark-theme .contact-section .badge,
html[data-theme="dark"] .cta-one .badge,
body.dark-theme .cta-one .badge,
html[data-theme="dark"] .badge-cotizacion,
body.dark-theme .badge-cotizacion,
html[data-theme="dark"] span.badge,
body.dark-theme span.badge {
	background: #14283C !important;
	color: #90CAF9 !important;
	border: 1px solid rgba(144, 202, 249, 0.35) !important;
}

.benefit-card-item {
	display: flex !important;
	align-items: flex-start !important;
	gap: 16px !important;
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
	padding: 16px 18px !important;
	border-radius: 14px !important;
	margin-bottom: 14px !important;
	backdrop-filter: blur(6px) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20) !important;
}

.benefit-card-item h5 {
	font-size: 16px !important;
	font-weight: 800 !important;
	color: #FFFFFF !important;
	margin: 0 0 4px !important;
	letter-spacing: 0.2px !important;
}

.benefit-card-item p {
	font-size: 13.8px !important;
	color: #F1F5F9 !important;
	font-weight: 500 !important;
	margin: 0 !important;
	line-height: 1.55 !important;
}

.benefit-card-icon {
	width: 46px !important;
	height: 46px !important;
	border-radius: 12px !important;
	background: #FFFFFF !important;
	color: #123B5D !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 20px !important;
	flex-shrink: 0 !important;
	margin-top: 2px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.benefit-card-icon i {
	color: #123B5D !important;
}

.payment-methods-box {
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
	border-radius: 14px !important;
	padding: 16px 18px !important;
	margin-top: 18px !important;
	backdrop-filter: blur(6px) !important;
}

.payment-methods-box p {
	color: #FFFFFF !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	margin-bottom: 12px !important;
}

.payment-badge-pill {
	background: #FFFFFF !important;
	padding: 5px 12px !important;
	border-radius: 8px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 3px 8px rgba(0,0,0,0.25) !important;
	height: 36px !important;
}

.payment-badge-pill i,
.payment-badge-pill span {
	color: #123B5D !important;
}

/* ========================================================
   MAIN FOOTER UNIVERSAL: MÁXIMA VISIBILIDAD, CONTRASTE Y ELEGANCIA
   ======================================================== */
.main-footer {
	background: #081726 !important;
	border-top: 3px solid #123B5D !important;
	position: relative !important;
	color: #FFFFFF !important;
	overflow: hidden !important;
	padding-top: 50px !important;
}

.footer-widget__title {
	color: #FFFFFF !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	margin-bottom: 22px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.8px !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.footer-widget__title::before {
	content: "" !important;
	width: 8px !important;
	height: 8px !important;
	background: #90CAF9 !important;
	display: inline-block !important;
	border-radius: 2px !important;
}

.footer-widget__about-text {
	color: #E2E8F0 !important;
	font-size: 14.5px !important;
	line-height: 1.8 !important;
	font-weight: 500 !important;
}

.footer-widget__links li {
	margin-bottom: 12px !important;
}

.footer-widget__links li a {
	color: #FFFFFF !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	display: inline-block !important;
}

.footer-widget__links li a:hover {
	color: #90CAF9 !important;
	transform: translateX(4px) !important;
}

.footer-widget__contact li {
	color: #FFFFFF !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	margin-bottom: 14px !important;
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	line-height: 1.6 !important;
}

.footer-widget__contact li a {
	color: #FFFFFF !important;
	text-decoration: none !important;
}

.footer-widget__contact li a:hover {
	color: #90CAF9 !important;
}

.footer-contact-icon {
	color: #90CAF9 !important;
	font-size: 18px !important;
	margin-top: 3px !important;
	flex-shrink: 0 !important;
}

.main-footer__bottom {
	background-color: #040D16 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
	padding: 18px 0 !important;
}

.main-footer__copyright {
	color: #CBD5E1 !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
}

.main-footer__author {
	color: #CBD5E1 !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
}

.main-footer__author a {
	color: #90CAF9 !important;
	font-weight: 800 !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
}

.main-footer__author a:hover {
	color: #FFFFFF !important;
	text-decoration: underline !important;
}

/* ========================================================
/* ========================================================
   GRID 2 FILAS X 3 COLUMNAS (6 SERVICIOS PERFECTAMENTE ALINEADOS)
   ======================================================== */
.catalog-services-box {
	background: #F8FAFC !important;
	border: 1.5px solid #CBD5E1 !important;
	border-radius: 16px !important;
	padding: 12px 14px !important;
	margin-bottom: 18px !important;
	box-shadow: 0 4px 14px rgba(18, 59, 93, 0.05) !important;
}

.catalog-services-label {
	font-size: 13px !important;
	font-weight: 800 !important;
	color: #123B5D !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.catalog-services-grid-2x3 {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	grid-auto-rows: 1fr !important;
	gap: 8px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.catalog-services-grid-2x3 .catalog-tab-pill {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 48px !important;
	min-width: 0 !important;
	padding: 8px 4px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	
	background: #FFFFFF !important;
	color: #123B5D !important;
	border: 1.5px solid #CBD5E1 !important;
	border-radius: 10px !important;
	
	font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: break-word !important;
	
	cursor: pointer !important;
	box-shadow: 0 2px 5px rgba(18, 59, 93, 0.05) !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	outline: none !important;
}

.catalog-services-grid-2x3 .catalog-tab-pill:hover {
	background: #F1F5F9 !important;
	border-color: #123B5D !important;
	color: #0C273E !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(18, 59, 93, 0.12) !important;
}

.catalog-services-grid-2x3 .catalog-tab-pill.active {
	background: #123B5D !important;
	color: #FFFFFF !important;
	border-color: #123B5D !important;
	font-weight: 800 !important;
	box-shadow: 0 4px 14px rgba(18, 59, 93, 0.30) !important;
	transform: translateY(-1px) !important;
}

@media (max-width: 767px) {
	.catalog-services-box {
		padding: 10px 8px !important;
	}
	.catalog-services-grid-2x3 {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 6px !important;
	}
	.catalog-services-grid-2x3 .catalog-tab-pill {
		min-height: 44px !important;
		padding: 6px 3px !important;
		font-size: 11px !important;
		line-height: 1.15 !important;
		border-radius: 8px !important;
	}
}

/* Modo Oscuro: Pestañas Incrustadas */
html[data-theme="dark"] .catalog-services-box {
	background: #0E1E2C !important;
	border-color: rgba(255, 255, 255, 0.10) !important;
}

html[data-theme="dark"] .catalog-services-label {
	color: #90CAF9 !important;
}

html[data-theme="dark"] .catalog-tab-pill {
	background: #152A3C !important;
	color: #FFFFFF !important;
	font-weight: 800 !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .catalog-tab-pill:hover {
	background: #1C364E !important;
	color: #FFFFFF !important;
	border-color: #90CAF9 !important;
}

html[data-theme="dark"] .catalog-tab-pill.active {
	background: #FFFFFF !important;
	color: #123B5D !important;
	border-color: #FFFFFF !important;
	font-weight: 800 !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

/* TARJETAS DE SERVICIOS PRINCIPALES: SOMBRA DE PROFUNDIDAD 3D */
.service-principal-card,
.service-card-two.is-principal,
.service-featured-block {
	position: relative !important;
	border: 2px solid rgba(18, 59, 93, 0.22) !important;
	border-radius: 18px !important;
	box-shadow: 0 16px 36px rgba(18, 59, 93, 0.14), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
	background: #FFFFFF !important;
}

.service-principal-card:hover,
.service-card-two.is-principal:hover,
.service-featured-block:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 24px 48px rgba(18, 59, 93, 0.22), 0 8px 20px rgba(0, 0, 0, 0.08) !important;
	border-color: #123B5D !important;
}

html[data-theme="dark"] .service-principal-card,
html[data-theme="dark"] .service-card-two.is-principal,
html[data-theme="dark"] .service-featured-block {
	background: #14283C !important;
	border: 2px solid rgba(255, 255, 255, 0.25) !important;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important;
}

/* Badge Distintivo de Servicio Principal */
.badge-principal-tag {
	position: absolute;
	top: 14px;
	left: 14px;
	background: #123B5D !important;
	color: #FFFFFF !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.8px !important;
	padding: 5px 12px !important;
	border-radius: 6px !important;
	box-shadow: 0 4px 12px rgba(18, 59, 93, 0.35) !important;
	z-index: 5 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}

/* ========================================================
   MENÚ PRINCIPAL 100% FIJO EN TODA LA APLICACIÓN (PC, TABLET, MÓVIL)
   ======================================================== */
.main-header,
header.main-header {
	position: fixed !important;
	top: var(--ryp-anuncio-h, 0px) !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	height: 74px !important;
	min-height: 74px !important;
	z-index: 100000 !important;
	background: var(--header-bg, #FFFFFF) !important;
	box-shadow: 0 4px 18px rgba(18, 59, 93, 0.10) !important;
	display: flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 24px !important;
}

/* ========================================================
   TOPBAR DE ANUNCIOS — 10 ESTILOS DISPONIBLES (SIEMPRE TOP BAR, 40PX, ANGULAR)
   1. clasica: Azul corporativo sobrio centrado
   2. marquesina: Ticker continuo suave de derecha a izquierda
   3. emojis: Dinámico con micro-íconos/emojis destacados y contraste vivo
   4. franja-doble: Fondo sólido + franja de acento — sin gradiente ni brillo
      (reemplaza a "Gradiente Angular", retirado 2026-09-11 por ilegible: el
      destello claro del centro tapaba el texto del anuncio)
   5. destacada: Promoción de alto impacto con acento dorado y micro-brillo
   6-10. slide-progreso / stock / particulas / bicolor / shimmer (ver abajo)
   ======================================================== */
:root {
	--ryp-anuncio-h: 40px;
	--ryp-topbar-bg: #123B5D;
	--ryp-topbar-color: #FFFFFF;
	--ryp-topbar-icon-color: #FFFFFF;
	--ryp-topbar-border: rgba(255, 255, 255, 0.18);
}

.topbar-one {
	font-family: var(--ryp-topbar-fuente, inherit) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	height: var(--ryp-anuncio-h, 40px) !important;
	overflow: hidden !important;
	z-index: 100001 !important;
	box-sizing: border-box !important;
	background: var(--ryp-topbar-bg, #123B5D) !important;
	border-bottom: 2px solid var(--ryp-topbar-border, rgba(255, 255, 255, 0.18)) !important;
}

.topbar-one.ryp-anuncio-oculto {
	display: none !important;
}

/* ÍCONOS VECTORIALES SVG DE LA TOPBAR: CONTRASTE FORZADO */
.topbar-one .ryp-tb-ico {
	color: var(--ryp-topbar-icon-color, #FFFFFF) !important;
	stroke: currentColor !important;
	fill: none !important;
	width: 14px !important;
	height: 14px !important;
	display: inline-block !important;
	vertical-align: middle !important;
	margin-right: 7px !important;
	flex-shrink: 0 !important;
}

/* 1. ESTILO CLÁSICA */
.topbar-one.estilo-clasica,
.topbar-one:not([class*="estilo-"]) {
	background: var(--ryp-topbar-bg, #123B5D) !important;
}

/* 2. ESTILO MARQUESINA (TICKER SUAVE) */
.topbar-one.estilo-marquesina {
	background: var(--ryp-topbar-bg, #0C273E) !important;
	justify-content: flex-start !important;
}
.topbar-one.estilo-marquesina .ryp-ticker-track {
	display: inline-flex !important;
	align-items: center !important;
	white-space: nowrap !important;
	will-change: transform !important;
	animation: rypMarquee 28s linear infinite !important;
}
.topbar-one.estilo-marquesina:hover .ryp-ticker-track {
	animation-play-state: paused !important;
}
.topbar-one.estilo-marquesina .ryp-ticker-item {
	display: inline-flex !important;
	align-items: center !important;
	padding: 0 45px !important;
	color: var(--ryp-topbar-color, #FFFFFF) !important;
	font-size: calc(12.5px * var(--ryp-fuente-escala, 1)) !important;
	font-weight: 600 !important;
	letter-spacing: 0.4px !important;
}

@keyframes rypMarquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* 3. ESTILO EMOJIS / ÍCONOS */
.topbar-one.estilo-emojis {
	background: var(--ryp-topbar-bg, #0F3352) !important;
}
.topbar-one.estilo-emojis .ryp-anuncio-texto {
	color: var(--ryp-topbar-color, #FFFFFF) !important;
	font-weight: 700 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
}
.topbar-one.estilo-emojis .ryp-emoji-badge {
	background: rgba(255, 255, 255, 0.20) !important;
	padding: 2px 9px !important;
	border-radius: 3px !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	color: var(--ryp-topbar-color, #FFFFFF) !important;
}

/* 4. ESTILO FRANJA DE ACENTO (reemplaza a "Gradiente Angular" — aquella
   versión metía un destello claro cruzando el centro del fondo que volvía el
   texto del anuncio ilegible, justo lo contrario de su objetivo publicitario.
   Retirado 2026-09-11 a pedido del cliente). Fondo 100% sólido, sin
   transparencias ni brillos: una franja de acento sólida a la izquierda +
   texto en mayúscula fina — mismo espíritu "con acento" pero perfectamente
   legible en cualquier dispositivo y con buen contraste garantizado. */
.topbar-one.estilo-franja-doble {
	background: var(--ryp-topbar-bg, #123B5D) !important;
	position: relative !important;
	padding-left: 16px !important;
}
.topbar-one.estilo-franja-doble::before {
	content: '';
	position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
	background: var(--ryp-topbar-color, #FFFFFF);
	opacity: .65;
}
.topbar-one.estilo-franja-doble .ryp-anuncio-texto {
	font-weight: 700 !important;
	letter-spacing: .6px !important;
	text-transform: uppercase !important;
	font-size: calc(12px * var(--ryp-fuente-escala, 1)) !important;
}

/* 5. ESTILO DESTACADA (PROMOCIÓN / ALERTA VIP) */
.topbar-one.estilo-destacada {
	background: var(--ryp-topbar-bg, #091D2E) !important;
}
.topbar-one.estilo-destacada .ryp-anuncio-texto {
	color: var(--ryp-topbar-color, #FEFCBF) !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
}
.topbar-one.estilo-destacada .ryp-destacada-star {
	color: #ECC94B !important;
	margin: 0 6px !important;
	display: inline-block !important;
	animation: rypPulse 1.8s infinite ease-in-out !important;
}

@keyframes rypPulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.25); opacity: 0.75; }
}

/* 6-10. Estilos — todos se apoyan en el MISMO --ryp-topbar-bg/color ya
   calculado por WCAG arriba (nunca introducen un color nuevo sin contraste
   verificado); "bicolor" logra el segundo tono con una superposición
   translúcida sobre el MISMO color de fondo, sin pedir un segundo color al
   panel. */

/* 6. SLIDE-IN + AUTO-CIERRE (pensado para un flash puntual, no el anuncio permanente) */
.topbar-one.estilo-slide-progreso {
	background: var(--ryp-topbar-bg, #123B5D) !important;
	transform: translateY(-100%);
	animation: rypTopbarSlideIn .5s cubic-bezier(.2,.8,.2,1) forwards;
	transition: max-height .4s ease, opacity .4s ease;
}
.topbar-one.estilo-slide-progreso.ryp-topbar-auto-oculta { max-height: 0 !important; opacity: 0 !important; }
.topbar-one.estilo-slide-progreso .ryp-topbar-progreso {
	position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
	background: var(--ryp-topbar-color, #FFFFFF); opacity: .55;
	transform-origin: left; animation: rypTopbarDeplete 6s linear forwards;
}
@keyframes rypTopbarSlideIn { to { transform: translateY(0); } }
@keyframes rypTopbarDeplete { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* 7. BARRA DE STOCK (relleno que sugiere existencias limitadas) */
.topbar-one.estilo-stock { position: relative; }
.topbar-one.estilo-stock .ryp-topbar-fill {
	position: absolute; inset: 0; width: 78%;
	background: color-mix(in srgb, var(--ryp-topbar-color, #FFFFFF) 16%, transparent);
}
.topbar-one.estilo-stock .ryp-anuncio-texto { position: relative; z-index: 1; }

/* 8. CIELO DE PARTÍCULAS (motas ambientales cruzando el fondo) */
.topbar-one.estilo-particulas { position: relative; overflow: hidden; }
.topbar-one.estilo-particulas .ryp-topbar-dot {
	position: absolute; width: 3px; height: 3px; border-radius: 50%;
	background: var(--ryp-topbar-icon-color, #90CAF9); opacity: .8;
	animation: rypTopbarDrift 4.5s linear infinite;
}
@keyframes rypTopbarDrift {
	from { transform: translateX(-10px); opacity: 0; }
	10% { opacity: .9; } 90% { opacity: .5; }
	to { transform: translateX(340px); opacity: 0; }
}

/* 9. BICOLOR DUAL (doble mensaje, separado por "|" en el texto) */
.topbar-one.estilo-bicolor {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	padding: 0 !important;
}
.ryp-topbar-split {
	height: 100%; display: flex; align-items: center; justify-content: center;
	padding: 0 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	color: var(--ryp-topbar-color, #FFFFFF); font-size: 12px; font-weight: 600;
}
.ryp-topbar-split--left { background: rgba(0,0,0,0.18); border-right: 1px solid rgba(255,255,255,0.15); }

/* 10. DESTELLO SHIMMER (barrido de luz metálico) */
.topbar-one.estilo-shimmer { position: relative; overflow: hidden; }
.topbar-one.estilo-shimmer::after {
	content: ''; position: absolute; top: -50%; left: -80%; width: 60%; height: 200%;
	background: linear-gradient(65deg, rgba(255,255,255,0) 15%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 85%);
	transform: rotate(20deg); animation: rypTopbarShimmer 3.2s infinite ease-in-out;
	pointer-events: none; z-index: 1;
}
@keyframes rypTopbarShimmer { 0% { left: -80%; } 35% { left: 140%; } 100% { left: 140%; } }

@media (prefers-reduced-motion: reduce) {
	.topbar-one.estilo-slide-progreso,
	.topbar-one.estilo-slide-progreso .ryp-topbar-progreso,
	.topbar-one.estilo-particulas .ryp-topbar-dot,
	.topbar-one.estilo-shimmer::after {
		animation: none !important; transform: none !important;
	}
}

/* ========================================================
   CONTRASTE AUTOMÁTICO CLARO / OSCURO PARA TOPBAR
   ======================================================== */
.topbar-one.contraste-oscuro .ryp-anuncio-texto,
.topbar-one.contraste-oscuro .ryp-ticker-item,
.topbar-one.contraste-oscuro .ryp-topbar-split {
	color: #123B5D !important;
	font-weight: 700 !important;
}
.topbar-one.contraste-oscuro .ryp-tb-ico {
	color: #123B5D !important;
}
.topbar-one.contraste-oscuro .ryp-emoji-badge {
	background: rgba(18, 59, 93, 0.14) !important;
	color: #123B5D !important;
}
.topbar-one.contraste-oscuro .ryp-destacada-star {
	color: #B45309 !important;
}

.topbar-one.contraste-claro .ryp-anuncio-texto,
.topbar-one.contraste-claro .ryp-ticker-item,
.topbar-one.contraste-claro .ryp-topbar-split {
	color: #FFFFFF !important;
	font-weight: 600 !important;
}
.topbar-one.contraste-claro .ryp-tb-ico {
	color: #FFFFFF !important;
}

/* Texto del anuncio: centrado, compacto, límite estricto de altura */
.ryp-anuncio-texto {
	color: var(--ryp-topbar-color, #FFFFFF) !important;
	font-size: calc(12.5px * var(--ryp-fuente-escala, 1)) !important;
	font-weight: 600 !important;
	letter-spacing: 0.3px !important;
	text-align: center !important;
	padding: 0 20px !important;
	line-height: 1.3 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	width: 100% !important;
}

@media (max-width: 600px) {
	.ryp-anuncio-texto {
		font-size: calc(11px * var(--ryp-fuente-escala, 1)) !important;
		line-height: 1.22 !important;
		padding: 0 8px !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 2 !important;
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		max-height: 38px !important;
		white-space: normal !important;
	}
	.topbar-one.estilo-marquesina .ryp-ticker-item {
		font-size: calc(11.5px * var(--ryp-fuente-escala, 1)) !important;
		padding: 0 20px !important;
		white-space: nowrap !important;
	}
}

/* Elementos viejos del sistema de contacto en topbar — eliminados */
.topbar-one__inner,
.topbar-one__info,
.topbar-one__info__item,
.topbar-one__right,
.ryp-anuncio-bar {
	display: none !important;
}

body {
	padding-top: calc(74px + var(--ryp-anuncio-h, 0px)) !important;
}

/* ========================================================
   CONTROLES INTEGRADOS EN LA ESQUINA DEL MENÚ:
   [MODO CLARO / OSCURO] Y [ACTUALIZAR APP]
   Totalmente contenidos dentro del recuadro del menú,
   perfectamente alineados en PC, tablet y móvil.
   ======================================================== */
.main-header__right {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 12px !important;
	margin: 0 !important;
	position: relative !important;
}

/* Ocultar botón de 3 puntos obsoleto que deformaba el menú */
.main-header__sidebar-btn,
.sidebar-btn__toggler {
	display: none !important;
}

.mobile-top-controls {
	position: static !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 10 !important;
}

.mobile-top-btn {
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;
	border-radius: 50% !important;
	border: 1.5px solid rgba(18, 59, 93, 0.20) !important;
	background: #FFFFFF !important;
	color: #123B5D !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 14.5px !important;
	cursor: pointer !important;
	box-shadow: 0 2px 8px rgba(18, 59, 93, 0.10) !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	padding: 0 !important;
	outline: none !important;
	box-sizing: border-box !important;
}

.mobile-top-btn:hover {
	transform: translateY(-2px) !important;
	border-color: #123B5D !important;
	box-shadow: 0 4px 12px rgba(18, 59, 93, 0.20) !important;
}

.mobile-top-btn:active {
	transform: scale(0.94) !important;
}

.mobile-top-btn.is-updating i {
	animation: rypSpin 0.7s linear infinite !important;
}

/* Modo oscuro para botones integrados */
html[data-theme="dark"] .mobile-top-btn,
body.dark-theme .mobile-top-btn {
	background: #1E293B !important;
	border-color: rgba(255, 255, 255, 0.20) !important;
	color: #90CAF9 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .mobile-top-btn:hover,
body.dark-theme .mobile-top-btn:hover {
	border-color: #90CAF9 !important;
	color: #FFFFFF !important;
}

@keyframes rypSpin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* ========================================================
   FOTO DE PRODUCTO LIMPIA Y ZOOM DIRECTO (SIN VELOS NI RECUADROS AZULES)
   ======================================================== */
.catalog-img-frame {
	position: relative !important;
	width: 100% !important;
	height: 220px !important;
	max-height: 220px !important;
	min-height: 220px !important;
	overflow: hidden !important;
	background: #F8FAFC !important;
	display: block !important;
	border-radius: 14px 14px 0 0 !important;
}

.catalog-img-frame a.img-popup {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	cursor: zoom-in !important;
}

.catalog-img-frame img,
.catalog-img-asset {
	width: 100% !important;
	height: 100% !important;
	max-height: 220px !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	transition: transform 0.35s ease !important;
}

.catalog-card-studio:hover .catalog-img-asset {
	transform: scale(1.05) !important;
}

/* ========================================================
   POPUP DE FOTO AMPLIADA GLOBAL (RESPONSIVO ~50% EN PC, BOTÓN DE CIERRE NÍTIDO)
   ======================================================== */
.mfp-bg,
.mfp-bg.ryp-catalog-mfp {
	z-index: 200000 !important;
	background: rgba(10, 24, 38, 0.94) !important;
	backdrop-filter: blur(8px) !important;
	opacity: 0.95 !important;
}

.mfp-wrap,
.mfp-wrap.ryp-catalog-mfp {
	z-index: 200005 !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	position: fixed !important;
}

.mfp-container,
.ryp-catalog-mfp .mfp-container {
	z-index: 200006 !important;
	padding: 30px 16px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
}

/* En PC: La imagen ampliada ocupa exactamente aprox. el 50% de la pantalla */
@media (min-width: 768px) {
	.mfp-content,
	.ryp-catalog-mfp .mfp-content {
		max-width: 48vw !important;
		max-height: 80vh !important;
		margin: auto !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		position: relative !important;
	}

	.mfp-figure,
	.ryp-catalog-mfp .mfp-figure {
		max-width: 48vw !important;
		max-height: 80vh !important;
		margin: 0 !important;
		position: relative !important;
	}

	img.mfp-img,
	.ryp-catalog-mfp img.mfp-img {
		max-width: 48vw !important;
		max-height: 78vh !important;
		width: auto !important;
		height: auto !important;
		object-fit: contain !important;
		border-radius: 16px !important;
		box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75) !important;
		padding: 0 !important;
		display: block !important;
		background: #FFFFFF !important;
		margin: auto !important;
	}
}

.mfp-bottom-bar,
.ryp-catalog-mfp .mfp-bottom-bar {
	margin-top: 10px !important;
	position: static !important;
	color: #FFFFFF !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	text-align: center !important;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) !important;
}

.mfp-title,
.ryp-catalog-mfp .mfp-title {
	color: #FFFFFF !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
}

.mfp-counter,
.ryp-catalog-mfp .mfp-counter {
	color: #90CAF9 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

/* BOTÓN DE CIERRE (X) FLOTANTE DESTACADO Y ACCESIBLE */
.mfp-close,
button.mfp-close,
.mfp-custom-close-btn {
	position: fixed !important;
	top: 20px !important;
	right: 24px !important;
	width: 48px !important;
	height: 48px !important;
	background: #123B5D !important;
	color: #FFFFFF !important;
	border: 2.5px solid #FFFFFF !important;
	border-radius: 50% !important;
	font-size: 32px !important;
	font-family: Arial, sans-serif !important;
	font-weight: 700 !important;
	line-height: 40px !important;
	text-align: center !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
	cursor: pointer !important;
	z-index: 200030 !important;
	opacity: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	transition: transform 0.2s ease, background 0.2s ease !important;
}

.mfp-close:hover,
button.mfp-close:hover,
.mfp-custom-close-btn:hover {
	transform: scale(1.12) !important;
	background: #0B243B !important;
	color: #FFFFFF !important;
	opacity: 1 !important;
}

/* Flechas de navegación de galería */
.mfp-arrow {
	z-index: 200015 !important;
	opacity: 0.85 !important;
	transition: transform 0.2s ease, opacity 0.2s ease !important;
}
.mfp-arrow:hover {
	opacity: 1 !important;
	transform: scale(1.1) !important;
}

@media (max-width: 767px) {
	.mfp-content,
	.ryp-catalog-mfp .mfp-content,
	.mfp-figure,
	.ryp-catalog-mfp .mfp-figure {
		max-width: 92vw !important;
		max-height: 82vh !important;
	}
	img.mfp-img,
	.ryp-catalog-mfp img.mfp-img {
		max-width: 92vw !important;
		max-height: 76vh !important;
		border-radius: 12px !important;
	}
	.mfp-close,
	button.mfp-close,
	.mfp-custom-close-btn {
		top: 14px !important;
		right: 14px !important;
		width: 40px !important;
		height: 40px !important;
		font-size: 26px !important;
		line-height: 34px !important;
	}
}

/* ELIMINAR CUALQUIER TELÓN O RECUADRO AZUL QUE TAPE LA FOTO */
.catalog-zoom-curtain,
.catalog-zoom-hint,
.catalog-category-tag,
.badge-principal-tag {
	display: none !important;
}

/* ========================================================
   TARJETAS DE CATÁLOGO LIMPIAS Y DESPEJADAS
   ======================================================== */
.catalog-card-studio {
	background: #FFFFFF !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
}

.catalog-card-studio:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 10px 24px rgba(18, 59, 93, 0.10) !important;
}

.catalog-studio-body {
	padding: 14px 16px 16px !important;
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
	justify-content: space-between !important;
}

.catalog-title-studio {
	color: #123B5D !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	margin: 0 0 6px !important;
	line-height: 1.35 !important;
}

.catalog-desc-studio {
	color: #5A6270 !important;
	font-size: 12.5px !important;
	line-height: 1.45 !important;
	margin: 0 0 12px !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

html[data-theme="dark"] .catalog-desc-studio {
	color: #94A3B8 !important;
}

html[data-theme="dark"] .catalog-card-studio {
	background: #14283C !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .catalog-title-studio {
	color: #FFFFFF !important;
}

html[data-theme="dark"] .catalog-services-box {
	background: #14283C !important;
	border-color: #1E3A56 !important;
}

/* ========================================================
   FONDO DIFERENCIADO PARA LÍNEAS Y SERVICIOS
   ======================================================== */
.catalog-services-box {
	background: #F1F5F9 !important;
	border: 1px solid #CBD5E1 !important;
	border-radius: 16px !important;
	padding: 14px 18px !important;
	margin-bottom: 18px !important;
	box-shadow: 0 2px 8px rgba(18, 59, 93, 0.04) !important;
}

/* ========================================================
   MÓVIL Y TABLETS (< 992px): FIJO Y PERFECTO
   ======================================================== */
@media (max-width: 991px) {
	.main-header,
	header.main-header {
		height: 58px !important;
		min-height: 58px !important;
		top: var(--ryp-anuncio-h, 0px) !important;
		padding: 0 14px !important;
	}

	.mobile-top-controls {
		gap: 6px !important;
	}

	.mobile-top-btn {
		width: 34px !important;
		height: 34px !important;
		min-width: 34px !important;
		min-height: 34px !important;
		font-size: 13px !important;
	}

	body {
		padding-top: calc(60px + var(--ryp-anuncio-h, 0px)) !important;
		padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
	}

	.catalog-img-frame {
		height: 160px !important;
		min-height: 160px !important;
		max-height: 160px !important;
	}

	.catalog-img-frame img,
	.catalog-img-asset {
		max-height: 160px !important;
	}

	/* Menú inferior fijo estilo App nativa */
	.bottom-nav-mobile {
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: 60px !important;
		z-index: 99995 !important;
		background: var(--bottom-nav-bg, #FFFFFF) !important;
		border-top: 1px solid var(--border-color, #E2E8F0) !important;
		display: flex !important;
		justify-content: space-around !important;
		align-items: center !important;
		padding-bottom: env(safe-area-inset-bottom, 0px) !important;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06) !important;
	}

	.bottom-nav-mobile a {
		font-size: 10.5px !important;
		font-weight: 700 !important;
		text-decoration: none !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 2px !important;
		color: #64748B !important;
	}

	.bottom-nav-mobile a.active {
		color: #123B5D !important;
	}

	.bottom-nav-mobile svg {
		width: 20px !important;
		height: 20px !important;
	}

	.page-header {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	.section-space {
		padding-top: 35px !important;
		padding-bottom: 35px !important;
	}

	.sec-title {
		margin-bottom: 20px !important;
	}

	.mobile-nav__content {
		padding: 16px 14px !important;
		max-width: 290px !important;
	}
}

/* ========================================================
   BOTÓN WHATSAPP FLOTANTE (ELEVADO SOBRE LA BARRA INFERIOR)
   ======================================================== */
.wa-widget-wrapper,
.wa-floating-wrapper,
#waFloatingWidget,
.wa-float-btn {
	position: fixed !important;
	bottom: 25px !important;
	right: 22px !important;
	z-index: 100010 !important;
}

@media (max-width: 991px) {
	/* El menú inferior fijo (.bottom-nav-mobile) tiene z-index: 100000.
	   Los intentos anteriores subían el z-index de este botón pero siempre
	   se quedaban por debajo de ese valor (99990 / 99999), así que el menú
	   inferior lo seguía tapando en la práctica. Debe quedar estrictamente
	   por encima de 100000. */
	.wa-widget-wrapper,
	.wa-floating-wrapper,
	#waFloatingWidget,
	.wa-float-btn {
		bottom: calc(var(--ryp-bottomnav-h, 74px) + 44px + env(safe-area-inset-bottom, 0px)) !important;
		right: 16px !important;
		z-index: 100010 !important;
	}

	.wa-box-popup,
	.wa-popup-card {
		bottom: calc(var(--ryp-bottomnav-h, 74px) + 106px + env(safe-area-inset-bottom, 0px)) !important;
		right: 14px !important;
		max-width: calc(100vw - 28px) !important;
		z-index: 100011 !important;
	}
}

/* ========================================================
   POPUP PROMOCIONAL
   ======================================================== */
.ryp-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(18, 59, 93, 0.7);
	backdrop-filter: blur(4px);
	z-index: 200000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.ryp-popup-card {
	position: relative;
	background: #FFFFFF;
	font-family: var(--ryp-popup-fuente, inherit);
	border-width: var(--ryp-popup-borde-w, 2px);
	border-style: solid;
	border-color: rgba(18, 59, 93, 0.14);
	border-radius: 16px;
	max-width: 420px;
	width: 100%;
	overflow: hidden;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
	animation: rypPopIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes rypPopIn {
	from { opacity: 0; transform: scale(0.92); }
	to { opacity: 1; transform: scale(1); }
}

.ryp-popup-close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: rgba(0, 0, 0, 0.4);
	color: #FFFFFF;
	border: none;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	font-size: 20px;
	cursor: pointer;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ryp-popup-img-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: block;
}

/* Sin foto propia (campo vacío): fondo neutro, nunca el logo ni una imagen
   rota — se aplica junto con la clase base de cada contenedor de foto. */
.ryp-sin-foto {
	background: linear-gradient(135deg, #EEF2F6, #E2E8F0);
}

.ryp-popup-img-cover {
	width: 100%;
	/* Proporción relativa, no alto fijo en px: con alto fijo, la misma foto se
	   ve recortada distinto según el ancho del contenedor — en el mockup
	   angosto del panel (250px) salía visiblemente más alargada que en un
	   celular real (~350-390px de ancho de tarjeta). Con aspect-ratio el
	   recorte queda igual sin importar cuán angosto sea el mockup. */
	aspect-ratio: 2 / 1;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Marca de agua: SOLO el logo transparente, sin caja ni texto, esquina
   superior izquierda de toda foto de campaña — en los 10 pop-ups. */
.ryp-popup-watermark {
	position: absolute;
	top: 10px;
	left: 10px;
	height: 26px;
	width: auto;
	max-width: 96px;
	object-fit: contain;
	filter: drop-shadow(0 2px 5px rgba(0,0,0,0.7));
	opacity: 0.92;
	pointer-events: none;
	z-index: 3;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.ryp-popup-cta {
	display: inline-block;
	width: 100%;
	padding: 13px 20px;
	border-radius: 10px;
	background: #123B5D;
	color: #FFFFFF !important;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(18,59,93,0.25);
	transition: all 0.2s;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ryp-popup-cta:hover { background: #0C273E; transform: translateY(-1px); }
.ryp-popup-cta span { pointer-events: none; }

.ryp-popup-body {
	padding: 20px;
	text-align: center;
}

.ryp-popup-body h3 {
	color: #123B5D;
	margin-bottom: 8px;
	font-weight: 800;
	font-size: calc(20px * var(--ryp-fuente-escala, 1));
	text-align: var(--ryp-popup-align, center);
	word-wrap: break-word;
	overflow-wrap: break-word;
	line-height: 1.3;
	/* Blindaje visual: por más que el título tenga muchos caracteres, nunca
	   estira ni deforma la tarjeta — se corta con puntos suspensivos. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* Ícono SVG dentro del título (reemplazo del emoji suelto en el texto) —
   tamaño en "em" para escalar solo con el font-size de cada estilo (elegante
   22px, pantalla-completa hasta 44px, etc.) sin overrides por estilo, y
   "currentColor" para heredar el mismo color que el título en cada uno. */
.ryp-popup-icon {
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	vertical-align: -0.1em;
	margin-right: 0.3em;
	flex-shrink: 0;
}

.ryp-popup-body p {
	color: #5A6270;
	margin-bottom: 16px;
	font-size: calc(14px * var(--ryp-fuente-escala, 1));
	text-align: var(--ryp-popup-align, center);
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	overflow-wrap: break-word;
	line-height: 1.5;
}

/* El botón comparte la clase .floens-btn de todo el sitio, que trae
   padding-right:75px (pensado para la flecha que aparece al pasar el mouse
   en botones grandes) — dentro de la tarjeta chica del pop-up eso empuja el
   texto/ícono visiblemente hacia la izquierda. Se pareja el relleno acá. */
.ryp-popup-body .floens-btn {
	padding: 14px 20px;
	text-align: center;
}

/* ========================================================
   10 PLANTILLAS DE POP-UP (mockup maestro definitivo, reconstruido
   2026-09-11) — "oferta-flash" es la tarjeta centrada de base; las demás
   son variaciones sobre las mismas clases .ryp-popup-card/.ryp-popup-body/
   .ryp-popup-close/.ryp-popup-img-wrap/.ryp-popup-watermark.
   ======================================================== */

/* banner-inferior / franja-lateral / meta-progreso NO bloquean toda la
   pantalla: el fondo queda transparente y sin click para que se pueda seguir
   navegando el sitio detrás; solo la tarjeta en sí recibe clics. */
.ryp-popup-overlay.estilo-banner-inferior,
.ryp-popup-overlay.estilo-franja-lateral,
.ryp-popup-overlay.estilo-meta-progreso {
	background: transparent;
	backdrop-filter: none;
	padding: 0;
	pointer-events: none;
}
.ryp-popup-overlay.estilo-banner-inferior { align-items: flex-end; justify-content: center; }
.ryp-popup-overlay.estilo-franja-lateral { align-items: stretch; justify-content: flex-end; }
.ryp-popup-overlay.estilo-meta-progreso {
	align-items: flex-start;
	justify-content: center;
	padding-top: calc(var(--ryp-anuncio-h, 40px) + 90px);
}
.ryp-popup-overlay.estilo-banner-inferior .ryp-popup-card,
.ryp-popup-overlay.estilo-franja-lateral .ryp-popup-card,
.ryp-popup-overlay.estilo-meta-progreso .ryp-popup-card {
	pointer-events: auto;
}

/* ---- 1. Oferta Flash Countdown: reloj regresivo en vivo + badge de urgencia ---- */
.ryp-flash-bar {
	background: #0B1724; color: #F8FAFC; font-size: 10.5px; font-weight: 800;
	padding: 7px 46px 7px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	letter-spacing: 0.02em; border-bottom: 2px solid #EF4444; text-align: center;
}
.ryp-flash-bar .ryp-flash-clock { flex-shrink: 0; white-space: nowrap; }
.ryp-flash-clock {
	color: #EF4444; font-family: monospace; font-size: 14px; font-weight: 900;
	background: rgba(239, 68, 68, 0.15); padding: 2px 7px; border-radius: 4px;
}
.ryp-flash-badge {
	position: absolute; top: 12px; right: 12px; background: #DC2626; color: #FFF;
	font-size: 11px; font-weight: 900; padding: 4px 10px; border-radius: 6px; letter-spacing: 0.03em;
	box-shadow: 0 4px 10px rgba(220,38,38,.4); z-index: 4;
}
.ryp-popup-overlay.estilo-oferta-flash .ryp-popup-cta {
	background: linear-gradient(135deg, #DC2626, #B91C1C);
	box-shadow: 0 4px 14px rgba(220,38,38,.35);
	animation: rypFlashPulse 2s infinite ease-in-out;
}
@keyframes rypFlashPulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); filter: brightness(1.08); } 100% { transform: scale(1); } }

/* ---- 2. Elegante VIP: fondo oscuro corporativo, acento dorado ---- */
.ryp-popup-overlay.estilo-elegante .ryp-popup-card {
	max-width: 480px;
	border-width: var(--ryp-popup-borde-w, 2.5px);
	border-style: solid;
	border-color: #C9A24B;
	background: #081726;
	color: #FFFFFF;
	animation-duration: .5s;
}
.ryp-popup-overlay.estilo-elegante .ryp-popup-img-cover { aspect-ratio: 8 / 5; }
.ryp-popup-overlay.estilo-elegante .ryp-popup-body h3 { color: #ECC94B; font-size: calc(22px * var(--ryp-fuente-escala, 1)); letter-spacing: .3px; }
.ryp-popup-overlay.estilo-elegante .ryp-popup-body p { color: #CBD5E1; }
.ryp-popup-overlay.estilo-elegante .ryp-popup-cta { background: linear-gradient(135deg, #C9A24B, #DFB85D); color: #081726 !important; font-weight: 800; }

/* ---- 3. Banner inferior: franja horizontal pegada abajo ---- */
.ryp-popup-overlay.estilo-banner-inferior .ryp-popup-card {
	max-width: 720px;
	width: 100%;
	margin: 0 16px 16px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	animation: rypSlideUp .35s ease forwards;
}
.ryp-popup-overlay.estilo-banner-inferior .ryp-popup-img-wrap--banner { width: 110px; height: 90px; flex-shrink: 0; }
.ryp-popup-overlay.estilo-banner-inferior .ryp-popup-img-wrap--banner .ryp-popup-img-cover { width: 110px; height: 90px; }
.ryp-popup-overlay.estilo-banner-inferior .ryp-popup-body {
	text-align: left; padding: 14px 40px 14px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.ryp-popup-overlay.estilo-banner-inferior .ryp-popup-body h3 { margin: 0; font-size: calc(13px * var(--ryp-fuente-escala, 1)); line-height: 1.2; -webkit-line-clamp: 2; }
.ryp-popup-overlay.estilo-banner-inferior .ryp-popup-cta { width: auto; padding: 8px 16px; }
.ryp-popup-overlay.estilo-banner-inferior .ryp-popup-close { top: 6px; right: 6px; width: 26px; height: 26px; font-size: 16px; }

@keyframes rypSlideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* ---- 4. Franja lateral: panel vertical cerca del borde derecho ---- */
.ryp-popup-overlay.estilo-franja-lateral .ryp-popup-card {
	max-width: 320px;
	width: 100%;
	height: calc(100% - 32px);
	max-height: calc(100vh - 32px);
	border-radius: 16px;
	margin: 16px;
	display: flex;
	flex-direction: column;
	animation: rypSlideLeft .35s ease forwards;
}
.ryp-popup-overlay.estilo-franja-lateral .ryp-popup-img-cover { aspect-ratio: 8 / 5; flex-shrink: 0; }
.ryp-popup-overlay.estilo-franja-lateral .ryp-popup-body { text-align: left; flex: 1; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }
/* Único estilo con espacio de sobra (panel vertical con scroll propio) — es
   el único al que se le permite más texto (100/150 caracteres): se sube el
   tope de líneas bastante por encima de lo que ese límite realmente ocupa. */
.ryp-popup-overlay.estilo-franja-lateral .ryp-popup-body h3 { -webkit-line-clamp: 6; }
.ryp-popup-overlay.estilo-franja-lateral .ryp-popup-body p { -webkit-line-clamp: 8; }

@keyframes rypSlideLeft { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* ---- 5. Meta de Progreso Comercial: cápsula con barra de beneficio ---- */
.ryp-popup-overlay.estilo-meta-progreso .ryp-popup-card {
	max-width: 900px; width: calc(100% - 32px); margin: 0 16px; border-radius: 16px;
	padding: 16px; animation: rypSlideDown .3s ease forwards; box-shadow: 0 15px 40px rgba(0,0,0,.25);
}
.ryp-meta-top { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; padding-right: 30px; }
.ryp-meta-thumb { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; position: relative; flex-shrink: 0; background: #F1F5F9; border: 1px solid #E2E8F0; }
.ryp-meta-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.ryp-meta-info { flex: 1; min-width: 0; text-align: left; }
.ryp-meta-pill { display: inline-block; font-size: 10px; font-weight: 800; color: #059669; background: #ECFDF5; padding: 2px 8px; border-radius: 5px; margin-bottom: 3px; letter-spacing: .04em; }
.ryp-meta-info h4 { font-size: calc(15px * var(--ryp-fuente-escala, 1)); font-weight: 800; color: #123B5D; margin: 0; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ryp-meta-track { width: 100%; height: 8px; background: #E2E8F0; border-radius: 10px; overflow: hidden; margin: 8px 0 10px; }
.ryp-meta-fill { height: 100%; width: 78%; background: linear-gradient(90deg, #10B981, #059669); border-radius: 10px; animation: rypMetaPulse 2s infinite ease-in-out; }
@keyframes rypMetaPulse { 0% { opacity: .85; } 50% { opacity: 1; filter: brightness(1.15); } 100% { opacity: .85; } }
.ryp-meta-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ryp-meta-bottom span { font-size: calc(12.5px * var(--ryp-fuente-escala, 1)); color: #64748B; font-weight: 600; text-align: left; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ryp-meta-bottom .ryp-popup-cta { width: auto; padding: 8px 16px; white-space: nowrap; }

/* ---- 6. Pantalla completa: toma todo el viewport, pensado para móvil (9:16) ---- */
.ryp-popup-overlay.estilo-pantalla-completa {
	background: linear-gradient(165deg, #123B5D, #091D2E);
	backdrop-filter: none;
	padding: 0;
}
.ryp-popup-overlay.estilo-pantalla-completa .ryp-popup-card {
	max-width: none; width: 100%; height: 100%; border-radius: 0; background: transparent; box-shadow: none; border: none;
	display: flex; align-items: center; justify-content: center;
}
.ryp-popup-overlay.estilo-pantalla-completa .ryp-popup-img-wrap--full { position: absolute; inset: 0; }
.ryp-popup-overlay.estilo-pantalla-completa .ryp-popup-img-wrap--full .ryp-popup-img-cover { height: 100%; }
.ryp-popup-overlay.estilo-pantalla-completa .ryp-popup-body { position: relative; z-index: 2; padding: 40px 28px; max-width: 480px; }
.ryp-popup-overlay.estilo-pantalla-completa .ryp-popup-body h3 { color: #FFFFFF; font-size: calc(clamp(24px, 5.5vw, 40px) * var(--ryp-fuente-escala, 1)); line-height: 1.15; -webkit-line-clamp: 3; }
.ryp-popup-overlay.estilo-pantalla-completa .ryp-popup-body p { color: rgba(255,255,255,.85); font-size: calc(17px * var(--ryp-fuente-escala, 1)); -webkit-line-clamp: 4; }
.ryp-popup-overlay.estilo-pantalla-completa .ryp-popup-close { top: 22px; right: 22px; }

/* ---- 7. Cupón troquelado: forma de ticket, muescas y línea punteada ---- */
.ryp-cupon-wrap { display: flex; max-width: 460px; width: 100%; margin: 0 16px; filter: drop-shadow(0 15px 40px rgba(0,0,0,.25)); }
.ryp-cupon-info.ryp-popup-card { box-shadow: none; border: none; }
.ryp-cupon-stub {
	width: 34%; border-radius: 16px 0 0 16px; background: #C9A24B; color: #081726;
	display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px 10px;
	position: relative; border-right: 3px dashed rgba(8,23,38,.35);
}
.ryp-cupon-stub h3 { color: #081726; font-size: calc(19px * var(--ryp-fuente-escala, 1)); font-weight: 900; margin: 0; line-height: 1.2; word-wrap: break-word; overflow-wrap: break-word; max-width: 100%; }
.ryp-cupon-stub::before, .ryp-cupon-stub::after {
	content: ""; position: absolute; right: -9px; width: 18px; height: 18px; border-radius: 50%; background: #EEF4FA;
}
.ryp-cupon-stub::before { top: -9px; } .ryp-cupon-stub::after { bottom: -9px; }
.ryp-cupon-info { flex: 1; border-radius: 0 16px 16px 0; text-align: left; }
.ryp-cupon-info .ryp-popup-body { padding: 20px 22px; text-align: left; }
.ryp-cupon-code { background: #FEF3C7; border: 2px dashed #D97706; color: #92400E; font-size: 13px; padding: 6px 10px; border-radius: 6px; margin: 8px 0 14px; display: inline-block; }

/* ---- 8. Panel dividido: columna de marca (logo real) + contenido ---- */
.ryp-panel-dividido-card { max-width: 480px; display: flex; padding: 0; overflow: hidden; }
.ryp-panel-brand {
	width: 90px; flex-shrink: 0; background: #0C273E;
	display: flex; align-items: center; justify-content: center; padding: 14px;
}
.ryp-panel-brand img { width: 100%; height: auto; max-height: 56px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
.ryp-panel-lado { flex: 1; text-align: left !important; }

/* ---- 9. Burbuja de Asesor: esquina, con avatar "en línea", sin fondo oscuro ---- */
.ryp-popup-overlay.estilo-burbuja-chat { align-items: flex-end; justify-content: flex-end; padding: 20px; }
.ryp-burbuja-card {
	max-width: 300px; border-radius: 16px 16px 4px 16px; animation: rypPopIn .3s cubic-bezier(.34,1.56,.64,1) forwards;
}
.ryp-burbuja-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 8px; border-bottom: 1px solid #F1F5F9; text-align: left; }
.ryp-burbuja-avatar { width: 40px; height: 40px; border-radius: 50%; position: relative; flex-shrink: 0; overflow: hidden; border: 2px solid #123B5D; background: #F1F5F9; }
.ryp-burbuja-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.ryp-burbuja-dot { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; background: #10B981; border-radius: 50%; border: 2px solid #fff; }
.ryp-burbuja-info strong { display: block; font-size: 13px; color: #0F172A; line-height: 1.2; }
.ryp-burbuja-info span { display: block; font-size: 11px; color: #10B981; font-weight: 700; }
.ryp-burbuja-body { padding: 16px 18px; }
.ryp-burbuja-body h3 { font-size: calc(15px * var(--ryp-fuente-escala, 1)); }
.ryp-burbuja-body p { font-size: calc(12.5px * var(--ryp-fuente-escala, 1)); }

/* ---- 10. Medallón 3D Flotante: foto circular sobresaliente con relieve ---- */
.estilo-medallon-3d { align-items: center; justify-content: center; }
.ryp-medallon-card {
	border-radius: 20px; padding-top: 54px; overflow: visible; position: relative;
	max-width: 340px; margin-top: 44px; box-shadow: 0 20px 45px -10px rgba(12,39,62,.35);
}
.ryp-medallon-wrap {
	position: absolute; top: -46px; left: 50%; transform: translateX(-50%);
	width: 92px; height: 92px; border-radius: 50%; background: #FFFFFF;
	box-shadow: 0 10px 25px -4px rgba(12,39,62,.4), 0 0 0 5px #FFFFFF, 0 0 0 8px #123B5D;
	overflow: hidden; z-index: 4;
}
.ryp-medallon-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.ryp-medallon-watermark { height: 14px; bottom: 6px; top: auto; left: 50%; transform: translateX(-50%); max-width: 60px; }

img, video {
	content-visibility: auto;
}

/* ========================================================
   AVISO DE INSTALACIÓN / NOTIFICACIONES — TOAST FLOTANTE
   (antes era un <div> sin ningún CSS: un bloque en flujo normal del
   documento, que por eso aparecía como una barra blanca ancha justo
   debajo del footer. Ahora es una tarjeta flotante y descartable,
   igual de discreta en PC, tablet y móvil.)
   ======================================================== */
/* Botón circular, mismo tamaño y patrón que el de WhatsApp (.wa-float-btn),
   solo que del lado opuesto de la pantalla. Nunca se expande solo: al
   tocarlo se abre una tarjetita pequeña con el mensaje, igual que el menú
   de agentes de WhatsApp. */
.ryp-install-banner {
	display: none;
	position: fixed;
	bottom: 25px;
	left: 22px;
	z-index: 100010;
	font-family: 'Plus Jakarta Sans', sans-serif;
	animation: rypFabIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ryp-install-banner.show {
	display: block;
}
@keyframes rypFabIn {
	from { transform: scale(0.6); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}
.ryp-banner-icon {
	width: 52px !important;
	height: 52px !important;
	border-radius: 50%;
	background-color: #123B5D;
	color: #FFFFFF !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 6px 18px rgba(18, 59, 93, 0.45);
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: none;
	outline: none;
	padding: 0;
	margin: 0;
	font-size: 22px;
	line-height: 1;
}
.ryp-banner-icon:hover {
	transform: scale(1.08);
	background-color: #1a5490;
}
.ryp-banner-fab-close {
	position: absolute;
	top: -6px;
	right: -6px;
	z-index: 6;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #FFFFFF;
	color: #123B5D;
	border: 1.5px solid #E0E4E8;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ryp-banner-fab-close:hover {
	background: #123B5D;
	color: #FFFFFF;
	transform: scale(1.08);
}
.ryp-banner-copy {
	display: none;
	position: absolute;
	bottom: 64px;
	left: 0;
	width: 250px;
	max-width: calc(100vw - 32px);
	background: #FFFFFF;
	border-radius: 14px;
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
	border: 1px solid #E0E4E8;
	overflow: hidden;
	padding: 16px 16px 14px;
	animation: waSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.ryp-install-banner.open .ryp-banner-copy {
	display: block;
}
.ryp-banner-eyebrow {
	display: block;
	color: #123B5D;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin-bottom: 4px;
	opacity: 0.65;
}
.ryp-install-banner #rypBannerText {
	display: block;
	color: #123B5D;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 12px;
}
.ryp-banner-cta {
	background: #123B5D;
	color: #FFFFFF;
	border: none;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.2px;
	white-space: nowrap;
	cursor: pointer;
	width: 100%;
	transition: background 0.2s ease;
}
.ryp-banner-cta:hover {
	background: #0c273e;
}
.ryp-banner-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 5;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #94A3B8;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s ease, color 0.15s ease;
}
.ryp-banner-close:hover {
	background: #F2F2F2;
	color: #123B5D;
}
html[data-theme="dark"] .ryp-banner-copy {
	background: #132A3E;
	border-color: #1E3A56;
}
html[data-theme="dark"] .ryp-install-banner #rypBannerText {
	color: #E2E8F0;
}
html[data-theme="dark"] .ryp-banner-close:hover {
	background: #1E3A56;
	color: #FFFFFF;
}

@media (max-width: 991px) {
	.ryp-install-banner {
		bottom: calc(var(--ryp-bottomnav-h, 74px) + 44px + env(safe-area-inset-bottom, 0px));
		left: 16px;
	}
}

/* ========================================================
   MODAL DE INSTALACIÓN / ACTIVACIÓN DE NOTIFICACIONES
   (mismo problema: sin CSS quedaba como un bloque suelto en la
   página en vez de un modal centrado)
   ======================================================== */
.ryp-install-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(18, 59, 93, 0.7);
	backdrop-filter: blur(4px);
	z-index: 200010;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.ryp-install-modal.active {
	display: flex;
}
.ryp-install-modal-box {
	position: relative;
	background: #FFFFFF;
	border-radius: 20px;
	max-width: 360px;
	width: 100%;
	padding: 0 28px 30px;
	text-align: center;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
	animation: rypPopIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	font-family: 'Plus Jakarta Sans', sans-serif;
	overflow: hidden;
}
.ryp-install-modal-header {
	position: relative;
	height: 76px;
	margin: 0 -28px 40px;
	background: linear-gradient(135deg, #17456b 0%, #0c273e 100%);
	overflow: visible;
}
.ryp-install-modal-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 140% at 15% 0%, rgba(144, 202, 249, 0.35), transparent 55%),
		radial-gradient(90% 120% at 100% 100%, rgba(255, 255, 255, 0.12), transparent 60%);
}
.ryp-install-modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: rgba(255, 255, 255, 0.16);
	color: #FFFFFF;
	border: none;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: background 0.15s ease;
}
.ryp-install-modal-close:hover {
	background: rgba(255, 255, 255, 0.28);
}
.ryp-icon-big {
	position: absolute;
	left: 50%;
	bottom: -30px;
	transform: translateX(-50%);
	width: 60px;
	height: 60px;
	border-radius: 16px;
	background: #FFFFFF;
	color: #123B5D;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	box-shadow: 0 10px 24px rgba(18, 59, 93, 0.28), 0 0 0 5px #FFFFFF;
	z-index: 2;
}
.ryp-install-modal-box h3 {
	color: #123B5D;
	font-weight: 800;
	font-size: 19px;
	margin-bottom: 8px;
}
.ryp-install-modal-box p {
	color: #5A6270;
	font-size: 13.5px;
	line-height: 1.6;
	margin-bottom: 18px;
}
.ryp-ios-steps ol {
	text-align: left;
	color: #5A6270;
	font-size: 13.5px;
	padding-left: 20px;
	margin-bottom: 16px;
}
.ryp-ios-steps li {
	margin-bottom: 6px;
}
.ryp-primary-btn {
	background: #123B5D;
	color: #FFFFFF;
	border: none;
	border-radius: 10px;
	padding: 12px 22px;
	font-size: 14.5px;
	font-weight: 800;
	cursor: pointer;
	width: 100%;
	transition: background 0.2s ease;
}
.ryp-primary-btn:hover {
	background: #0c273e;
}
html[data-theme="dark"] .ryp-install-modal-box {
	background: #132A3E;
}
html[data-theme="dark"] .ryp-install-modal-box h3 {
	color: #FFFFFF;
}
html[data-theme="dark"] .ryp-install-modal-box p,
html[data-theme="dark"] .ryp-ios-steps ol {
	color: #CBD5E1;
}

/* ========================================================
   BOTTOM NAV MOBILE (6 BOTONES: INICIO, NOSOTROS, SERVICIOS, CATALOGO, FAQ, CONTACTO)
   ======================================================== */
.bottom-nav-mobile {
	display: none;
}

@media (max-width: 991px) {
	.bottom-nav-mobile {
		display: flex !important;
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		z-index: 100000 !important;
		background: rgba(255, 255, 255, 0.98) !important;
		backdrop-filter: blur(12px) !important;
		border-top: 1px solid #E0E4E8 !important;
		box-shadow: 0 -4px 18px rgba(18, 59, 93, 0.08) !important;
		padding: 4px 1px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
		justify-content: space-around !important;
	}
	.bottom-nav-mobile a {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 2px !important;
		padding: 3px 1px !important;
		font-size: 9.5px !important;
		font-weight: 700 !important;
		color: #718096 !important;
		text-decoration: none !important;
		transition: all 0.2s ease !important;
		white-space: nowrap !important;
	}
	.bottom-nav-mobile a.active {
		color: #123B5D !important;
		font-weight: 800 !important;
	}
	.bottom-nav-mobile svg {
		width: 18px !important;
		height: 18px !important;
		stroke: currentColor !important;
		fill: none !important;
		stroke-width: 2 !important;
		stroke-linecap: round !important;
		stroke-linejoin: round !important;
	}
	html[data-theme="dark"] .bottom-nav-mobile {
		background: rgba(14, 30, 44, 0.98) !important;
		border-top-color: rgba(255, 255, 255, 0.12) !important;
	}
	html[data-theme="dark"] .bottom-nav-mobile a {
		color: #94A3B8 !important;
	}
	html[data-theme="dark"] .bottom-nav-mobile a.active {
		color: #90CAF9 !important;
	}
}

/* ========================================================
   FOOTER SIMPLIFICADO EN MOVIL (SOLO < 992px)
   El menu inferior tipo app ya cubre navegacion y servicios,
   asi que en movil el footer solo muestra logo + descripcion +
   medios de pago. En PC y tablet el footer se mantiene igual.
   ======================================================== */
@media (max-width: 991px) {
	.footer-col-nav,
	.footer-col-services,
	.footer-col-contact {
		display: none !important;
	}
}

/* ========================================================
   MODAL DE UBICACION & SHOWROOM EN GOOGLE MAPS (contacto.html)
   ======================================================== */
/* Pastilla blanca con texto navy en modo claro; en oscuro se invierte a
   fondo translúcido oscuro con texto blanco (a pedido explícito del
   cliente — antes se dejó fija blanca/navy en los dos temas, pero blanco
   sobre blanco de fondo no se distinguía bien de la sección oscura). */
.ryp-open-maps {
	background-color: #FFFFFF !important;
	color: #123B5D !important;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.ryp-open-maps i {
	color: #123B5D !important;
}
html[data-theme="dark"] .ryp-open-maps {
	background-color: rgba(255, 255, 255, 0.14) !important;
	color: #FFFFFF !important;
	border: 1.5px solid rgba(255, 255, 255, 0.3);
}
html[data-theme="dark"] .ryp-open-maps i {
	color: #FFFFFF !important;
}
.ryp-open-maps:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
	color: #0C273E !important;
}
html[data-theme="dark"] .ryp-open-maps:hover {
	color: #FFFFFF !important;
	background-color: rgba(255, 255, 255, 0.22) !important;
}

.ryp-maps-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.ryp-maps-modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(circle at 20% 15%, rgba(18, 59, 93, 0.35), transparent 55%),
		radial-gradient(circle at 85% 85%, rgba(2, 132, 199, 0.22), transparent 50%),
		rgba(8, 20, 33, 0.82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.ryp-maps-modal-dialog {
	position: relative;
	z-index: 2;
	background: #FFFFFF;
	border-radius: 20px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.2);
	width: 100%;
	max-width: 980px;
	max-height: 90vh;
	overflow-y: auto;
	overflow-x: hidden;
	animation: rypMapsModalFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ryp-maps-accent-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #123B5D 0%, #0284C7 55%, #90CAF9 100%);
	z-index: 3;
}

@keyframes rypMapsModalFadeIn {
	from { opacity: 0; transform: scale(0.96) translateY(14px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes rypMapsPhotoIn {
	from { opacity: 0; transform: translateX(-14px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes rypMapsContentIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.ryp-maps-photo-col {
	animation: rypMapsPhotoIn 0.5s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ryp-maps-content-col {
	animation: rypMapsContentIn 0.5s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (max-width: 860px) {
	.ryp-maps-photo-col { animation: none; }
	.ryp-maps-content-col { animation: none; }
}

.ryp-maps-close-btn {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #123B5D;
	color: #FFFFFF;
	border: none;
	font-size: 22px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, background 0.2s ease;
}
.ryp-maps-close-btn:hover {
	background: #0C273E;
	transform: scale(1.1) rotate(90deg);
}

.ryp-maps-modal-grid {
	display: grid;
	grid-template-columns: 44% 56%;
	min-height: 520px;
}

@media (max-width: 860px) {
	.ryp-maps-modal-grid {
		grid-template-columns: 1fr;
	}
	.ryp-maps-modal-dialog {
		max-height: 94vh;
	}
}

.ryp-maps-photo-col {
	position: relative;
	background: #0E1E2C;
}

.ryp-maps-photo-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 220px;
}

@media (max-width: 860px) {
	.ryp-maps-photo-wrapper {
		min-height: 200px;
	}
}

.ryp-maps-photo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ryp-maps-photo-badge {
	position: absolute;
	top: 18px;
	left: 18px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.95);
	color: #123B5D !important;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	padding: 7px 14px;
	border-radius: 30px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(4px);
}
.ryp-maps-photo-badge i {
	font-size: 11px;
}

.ryp-maps-photo-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px 20px 18px;
	background: linear-gradient(180deg, transparent 0%, rgba(14, 30, 44, 0.95) 100%);
}

.ryp-maps-photo-title {
	color: #FFFFFF !important;
	font-size: 16.5px;
	font-weight: 800;
	margin: 0 0 4px;
	font-family: "Plus Jakarta Sans", "DM Sans", sans-serif;
}

.ryp-maps-photo-address {
	color: #CBD5E1 !important;
	font-size: 13px;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}
.ryp-maps-photo-address i {
	color: #90CAF9;
	font-size: 12px;
}

.ryp-maps-content-col {
	padding: 24px 28px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

@media (max-width: 860px) {
	.ryp-maps-content-col {
		padding: 20px 18px 18px;
	}
}

.ryp-maps-eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	color: #0284C7;
	margin-bottom: 6px;
}

.ryp-maps-heading {
	color: #123B5D !important;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.3px;
	margin: 0 0 6px;
	font-family: "Plus Jakarta Sans", "DM Sans", sans-serif;
}

.ryp-maps-subheading {
	color: #5A6270 !important;
	font-size: 13.5px;
	margin: 0 0 14px;
}

.ryp-maps-frame-box {
	position: relative;
	width: 100%;
	height: 230px;
	border-radius: 14px;
	overflow: hidden;
	border: 1.5px solid #CBD5E1;
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.08);
	margin-bottom: 14px;
}

.ryp-maps-pin-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 9px;
	background: rgba(14, 30, 44, 0.92);
	color: #FFFFFF;
	padding: 8px 14px 8px 10px;
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(4px);
	pointer-events: none;
}
.ryp-maps-pin-tag strong {
	display: block;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.3;
}
.ryp-maps-pin-tag span {
	display: block;
	font-size: 10.5px;
	color: #90CAF9;
	line-height: 1.3;
}
.ryp-maps-pin-dot {
	position: relative;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #EF4444;
	flex-shrink: 0;
	box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
	animation: rypMapsPinPulse 1.8s infinite;
}
@keyframes rypMapsPinPulse {
	0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
	70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
	100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.ryp-maps-info-card {
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	padding: 12px 14px;
	margin-bottom: 16px;
}

.ryp-maps-info-row {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 12.8px;
	color: #334155 !important;
	margin-bottom: 8px;
}
.ryp-maps-info-row:last-child {
	margin-bottom: 0;
}
.ryp-maps-info-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: rgba(18, 59, 93, 0.1);
	color: #123B5D;
	font-size: 12.5px;
	flex-shrink: 0;
}
.ryp-maps-info-icon--accent {
	background: rgba(22, 163, 74, 0.12);
	color: #16A34A;
}

.ryp-maps-actions-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

@media (max-width: 480px) {
	.ryp-maps-actions-row {
		grid-template-columns: 1fr;
	}
}

.ryp-maps-btn {
	padding: 13px 16px;
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 800;
	text-align: center;
	text-decoration: none !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ryp-maps-btn-primary {
	background: #123B5D;
	color: #FFFFFF !important;
	box-shadow: 0 4px 14px rgba(18, 59, 93, 0.22);
}
.ryp-maps-btn-primary:hover {
	background: #0C273E;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(18, 59, 93, 0.35);
}
.ryp-maps-btn-arrow {
	font-size: 11px;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.ryp-maps-btn-primary:hover .ryp-maps-btn-arrow {
	transform: translateX(4px);
}

.ryp-maps-btn-waze {
	background: transparent;
	color: #123B5D !important;
	border: 1.5px solid #CBD5E1;
}
.ryp-maps-btn-waze i {
	color: #0284C7;
}
.ryp-maps-btn-waze:hover {
	border-color: #0284C7;
	background: rgba(2, 132, 199, 0.06);
	transform: translateY(-2px);
}

html[data-theme="dark"] .ryp-maps-modal-dialog {
	background: #0E1E2C;
	border: 1px solid rgba(255, 255, 255, 0.15);
}
html[data-theme="dark"] .ryp-maps-heading {
	color: #FFFFFF !important;
}
html[data-theme="dark"] .ryp-maps-subheading {
	color: #94A3B8 !important;
}
html[data-theme="dark"] .ryp-maps-info-card {
	background: #132A3E;
	border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .ryp-maps-info-row {
	color: #CBD5E1 !important;
}
html[data-theme="dark"] .ryp-maps-frame-box {
	border-color: rgba(255, 255, 255, 0.2);
}
html[data-theme="dark"] .ryp-maps-btn-waze {
	border-color: rgba(255, 255, 255, 0.25);
	color: #FFFFFF !important;
}
html[data-theme="dark"] .ryp-maps-btn-waze i {
	color: #90CAF9;
}
html[data-theme="dark"] .ryp-maps-photo-badge {
	background: rgba(14, 30, 44, 0.85) !important;
	color: #FFFFFF !important;
}
html[data-theme="dark"] .ryp-maps-eyebrow {
	color: #90CAF9;
}
html[data-theme="dark"] .ryp-maps-info-icon {
	background: rgba(144, 202, 249, 0.15);
	color: #90CAF9;
}
html[data-theme="dark"] .ryp-maps-frame-box {
	border-color: rgba(255, 255, 255, 0.2);
}