/********************************************
 * Techo Solar - Estilos Personalizados
 * Complemento a Tailwind CSS
 ********************************************/

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* iPhone viewport fix — prevent horizontal scroll from extending elements */
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Selection styling */
::selection {
    background-color: rgba(245, 158, 11, 0.3);
    color: inherit;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #f59e0b;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #d97706;
}

/* Focus visible styles */
:focus-visible {
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
}

/* Hero section parallax enhancement */
#inicio .absolute img {
    will-change: transform;
}

/* Navigation transition */
#navbar.scrolled {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Service card hover lift */
.group:hover {
    transform: translateY(-4px);
}

/* Form input animations */
input, select, textarea {
    transition: all 0.2s ease-in-out;
}

input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

/* Button ripple effect enhancement */
button {
    position: relative;
    overflow: hidden;
}

button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

button:active::after {
    width: 300px;
    height: 300px;
}

/* Mobile menu animation */
/* Mobile menu — simple desplegable blanco bajo el navbar */
#mobile-menu {
    transition: all 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}
#mobile-menu.active {
    max-height: 500px;
    opacity: 1;
}

/* En móvil el navbar SIEMPRE es sólido, sin importar el tipo elegido
   en el Customizer (transparent-hero solo aplica en desktop). */
@media (max-width: 767px) {
    #navbar.ts-navbar-type-transparent-hero,
    #navbar.ts-navbar-type-transparent-hero:not(.scrolled) {
        background-color: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(8px) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    }
    html.dark #navbar.ts-navbar-type-transparent-hero,
    html.dark #navbar.ts-navbar-type-transparent-hero:not(.scrolled) {
        background-color: rgba(15, 23, 42, 0.98) !important;
    }
    /* En móvil, los iconos del navbar son ámbar (no blanco) porque
       el fondo es sólido, no transparente sobre el hero. */
    #navbar.ts-navbar-type-transparent-hero:not(.scrolled) #dark-mode-toggle-mobile,
    #navbar.ts-navbar-type-transparent-hero:not(.scrolled) #mobile-menu-btn,
    #navbar.ts-navbar-type-transparent-hero:not(.scrolled) #techo-cart-toggle {
        color: #f59e0b !important;
    }
}

html.dark .bg-white {
    background-color: #111827 !important;
}

/* Paneles ámbar claros (bg-solar-50) → fondo oscuro con tinte ámbar */
html.dark .bg-solar-50 {
    background-color: rgba(245, 158, 11, 0.08) !important;
}

html.dark .border-solar-100 {
    border-color: rgba(245, 158, 11, 0.25) !important;
}

html.dark .bg-gray-50 {
    background-color: #030712 !important;
}

html.dark .bg-gray-100 {
    background-color: #111827 !important;
}

html.dark .text-gray-800,
html.dark .text-gray-900 {
    color: #ffffff !important;
}

html.dark .text-gray-600,
html.dark .text-gray-700 {
    color: #d1d5db !important;
}

html.dark .text-gray-500 {
    color: #9ca3af !important;
}

html.dark .text-gray-400 {
    color: #6b7280 !important;
}

html.dark .text-gray-300 {
    color: #d1d5db !important;
}

html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .shadow-lg,
html.dark .shadow-xl,
html.dark .shadow-2xl {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;
}

html.dark input,
html.dark select,
html.dark textarea {
    background-color: #1f2937 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

html.dark select:disabled {
    background-color: #111827 !important;
    color: #6b7280 !important;
    opacity: 0.6;
    cursor: not-allowed !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #6b7280 !important;
}

html.dark .bg-white.rounded-2xl,
html.dark .bg-white.rounded-3xl {
    background-color: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

html.dark footer {
    background-color: #030712 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

html.dark #success-modal .bg-white {
    background-color: #111827 !important;
}

html.dark #success-modal .text-gray-900 {
    color: #ffffff !important;
}

html.dark #success-modal .text-gray-600 {
    color: #9ca3af !important;
}

html.dark #back-to-top {
    background-color: #f59e0b !important;
}

/* Dark mode glow effects */
html.dark .glow-solar,
html.dark .group:hover {
    text-shadow: none;
}

/* Dark mode toggle animation */
#dark-mode-toggle,
#dark-mode-toggle-mobile {
    cursor: pointer;
}

#dark-mode-toggle:hover,
#dark-mode-toggle-mobile:hover {
    transform: rotate(15deg);
    transition: transform 0.2s ease;
}

/* Print styles */
@media print {
    nav, footer, #back-to-top, button {
        display: none !important;
    }
    
    section {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .text-gray-600 {
        color: #374151;
    }
    
    .text-gray-400 {
        color: #6b7280;
    }
}

/********************************************
 * Hero Slider - Carrusel de imágenes
 ********************************************/
.ts-hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.ts-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    transform: scale(1.05);
}

.ts-hero-slide.ts-slide-active {
    opacity: 1;
    transform: scale(1);
    animation: ts-slide-zoom 8s ease-out forwards;
}

@keyframes ts-slide-zoom {
    from { transform: scale(1.0); }
    to { transform: scale(1.08); }
}

.ts-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.6) 50%, rgba(15, 23, 42, 0.8) 100%);
    z-index: 1;
}

.ts-hero-dots {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.ts-hero-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.ts-hero-dot.ts-dot-active {
    background: #f59e0b;
    width: 2rem;
    border-radius: 0.375rem;
}

/********************************************
 * Servicios - Cards expandidas con sub-bullets
 ********************************************/
.ts-service-card {
    background: #ffffff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    border: 1px solid #f3f4f6;
}

.ts-service-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
}

html.dark .ts-service-card {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.1);
}

.ts-service-card-img {
    width: 100%;
    height: 12rem;
    object-fit: cover;
}

.ts-service-card-body {
    padding: 1.5rem;
}

.ts-service-card ul {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0 0;
}

.ts-service-card ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #4b5563;
}

html.dark .ts-service-card ul li {
    color: #d1d5db;
}

.ts-service-card ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #f59e0b;
}

/********************************************
 * Card de Conexión con redes sociales
 ********************************************/
.ts-connect-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 1.5rem;
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ts-connect-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 20rem;
    height: 20rem;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.ts-connect-card::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -10%;
    width: 20rem;
    height: 20rem;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
    border-radius: 50%;
}

.ts-connect-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.ts-connect-social a {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ts-connect-social a:hover {
    background: #f59e0b;
    color: #ffffff;
    border-color: #f59e0b;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px -4px rgba(245, 158, 11, 0.3);
}

/********************************************
 * Catálogo de productos
 ********************************************/
.ts-product-card {
    background: #ffffff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    border: 1px solid #f3f4f6;
    cursor: pointer;
}

html.dark .ts-product-card {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.1);
}

.ts-product-card:hover {
    box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

.ts-product-card-img {
    width: 100%;
    height: 10rem;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ts-product-card:hover .ts-product-card-img {
    transform: scale(1.05);
}

.ts-product-card-body {
    padding: 1.25rem;
}

.ts-product-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

html.dark .ts-product-card h3 {
    color: #ffffff;
}

.ts-product-card p {
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 1rem;
}

html.dark .ts-product-card p {
    color: #9ca3af;
}

.ts-product-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #d97706;
    transition: color 0.2s ease;
}

.ts-product-btn:hover {
    color: #b45309;
}

/********************************************
 * Sección Noticias
 ********************************************/
.ts-news-card {
    background: #ffffff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    border: 1px solid #f3f4f6;
    height: 100%;
    display: flex;
    flex-direction: column;
}

html.dark .ts-news-card {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.1);
}

.ts-news-card:hover {
    box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

.ts-news-card-img {
    width: 100%;
    height: 10rem;
    object-fit: cover;
}

.ts-news-card-body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ts-news-card-body h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

html.dark .ts-news-card-body h3 {
    color: #ffffff;
}

.ts-news-card-body p {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.5;
    flex: 1;
}

html.dark .ts-news-card-body p {
    color: #9ca3af;
}

.ts-news-date {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 0.5rem;
}

.ts-news-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #9ca3af;
}

/********************************************
 * Acordeón FAQ - Garantías y Financiamiento
 ********************************************/
.ts-faq-item {
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 1rem;
}

.ts-faq-item:hover {
    border-color: #fcd34d;
}

.ts-faq-item.ts-faq-active {
    border-color: #f59e0b;
    box-shadow: 0 4px 12px -2px rgba(245, 158, 11, 0.15);
}

html.dark .ts-faq-item {
    border-color: rgba(255, 255, 255, 0.1);
}

html.dark .ts-faq-item:hover {
    border-color: rgba(245, 158, 11, 0.5);
}

html.dark .ts-faq-item.ts-faq-active {
    border-color: #f59e0b;
    box-shadow: 0 4px 12px -2px rgba(245, 158, 11, 0.2);
}

.ts-faq-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    transition: background-color 0.2s ease, color 0.2s ease;
    gap: 1rem;
}

.ts-faq-header:hover {
    color: #d97706;
}

html.dark .ts-faq-header {
    color: #ffffff;
}

html.dark .ts-faq-header:hover {
    color: #fbbf24;
}

.ts-faq-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.3s ease;
    color: #f59e0b;
}

.ts-faq-active .ts-faq-icon {
    transform: rotate(180deg);
}

.ts-faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.ts-faq-body-inner {
    padding: 0 1.5rem 1.25rem 1.5rem;
    color: #4b5563;
    line-height: 1.7;
}

html.dark .ts-faq-body-inner {
    color: #d1d5db;
}

/********************************************
 * Botón flotante de WhatsApp
 ********************************************/
#whatsapp-float {
    position: fixed;
    bottom: 5rem;
    right: 1rem;
    z-index: 45;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background-color: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px -2px rgba(37, 211, 102, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease, bottom 0.3s ease;
}

@media (min-width: 640px) {
    #whatsapp-float {
        bottom: 6.5rem;
        right: 1.5rem;
        width: 3.5rem;
        height: 3.5rem;
    }
}
@media (min-width: 1024px) {
    #whatsapp-float {
        right: 2rem;
        width: 3.75rem;
        height: 3.75rem;
        bottom: 6.5rem;
    }
}

#whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px -4px rgba(37, 211, 102, 0.5);
}

#whatsapp-float svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: #ffffff;
}

#whatsapp-float .ts-wa-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 1rem;
    height: 1rem;
    background: #f59e0b;
    border-radius: 50%;
    border: 2px solid #ffffff;
    animation: ts-wa-pulse 2s infinite;
}

html.dark #whatsapp-float .ts-wa-badge {
    border-color: #030712;
}

@keyframes ts-wa-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

/********************************************
 * Logo navbar - responsive sizing
 ********************************************/
.ts-logo-navbar {
    max-height: 3.5rem;
    width: auto;
    border-radius: 10px;
}

@media (min-width: 768px) {
    .ts-logo-navbar {
        max-height: 4rem;
    }
}

.ts-logo-footer {
    max-height: 3rem;
    width: auto;
    border-radius: 10px;
}

/********************************************
 * Logo como texto HTML (TECHO SOLAR)
 * Se renderiza cuando el setting del logo en
 * el Personalizador es "__TEXT__". Ocupa más
 * ancho que el SVG y no tiene fondo blanco.
 ********************************************/
.ts-logo-text {
    display: inline-flex;
    align-items: baseline;
    text-decoration: none;
    font-family: var(--ts-font-title, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 900;
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.25rem;
    white-space: nowrap;
    user-select: none;
}

@media (min-width: 768px) {
    .ts-logo-text {
        font-size: 1.35rem;
        padding: 0.2rem 0.3rem;
    }
}

.ts-word-techo {
    color: #1e3a8a;
    transition: color 0.2s ease;
}

.ts-word-solar {
    color: #f1c117;
    margin-left: 0.45rem;
    transition: color 0.2s ease;
}

/* En modo oscuro, TECHO se vuelve blanco y SOLAR
 * se intensifica al ámbar solar del tema. */
html.dark .ts-word-techo {
    color: #fdfdfd;
}

html.dark .ts-word-solar {
    color: #fbbf24;
}

/********************************************
 * Conmutación de logo claro / oscuro
 * Se muestran dos <img> en el navbar; el CSS
 * muestra sólo el que corresponde al tema activo.
 ********************************************/
.ts-logo-dark {
    display: none;
}

html.dark .ts-logo-light {
    display: none;
}

html.dark .ts-logo-dark {
    display: inline-block;
}

/********************************************
 * Quitar el "cuadro blanco" de los logos SVG
 * que tienen fondo blanco embebido (PNG dentro
 * del SVG). mix-blend-mode: multiply hace que
 * los píxeles blancos se fusionen con el fondo
 * (blanco * fondo = fondo), sin alterar los
 * colores vivos del logo.
 *
 * IMPORTANTE: no usar `screen` en modo oscuro.
 * Screen convierte AMBER + fondo oscuro en
 * blanco, creando un "cuadro blanco" artificial.
 * En modo oscuro el navbar ya es oscuro, así
 * que el logo oscuro (texto blanco + ícono
 * ámbar) se muestra tal cual, sin blending.
 ********************************************/
.ts-logo-light[src$=".svg"],
img.ts-logo-light[src$=".SVG"] {
    mix-blend-mode: multiply;
}

/* Mobile responsiveness fixes */
@media (max-width: 639px) {
    /* Ensure form inputs are at least 48px touch target height and prevent iOS zoom */
    input, select, textarea {
        min-height: 48px;
        font-size: 16px;
    }

    /* Mobile menu safe area */
    #mobile-menu {
        max-height: none;
        -webkit-overflow-scrolling: touch;
    }

    #mobile-menu.active {
        max-height: 400px;
        overflow-y: auto;
    }

    /* Prevent text overflow on long words */
    .prose {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Better modal sizing on mobile */
    #success-modal .bg-white {
        margin: 1rem;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Force table cells to not stretch beyond viewport */
    table {
        table-layout: fixed;
        width: 100%;
        word-break: break-word;
    }

    table th,
    table td {
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Contain blur effects within parent on small screens */
    .blur-3xl,
    .blur-2xl {
        filter: blur(16px);
    }
}

/* Cookie consent banner */
#cookie-consent-banner {
    animation: cookieSlideUp 0.4s ease-out;
}

@keyframes cookieSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

#cookie-consent-banner.hidden {
    display: none;
}

html.dark #cookie-consent-banner .bg-slate-900 {
    background-color: #030712 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Tablet adjustments */
@media (min-width: 640px) and (max-width: 1023px) {
    /* Comfortable spacing on tablets */
}

/********************************************
 * Sección Protección Energética
 ********************************************/
.ts-proteccion {
    background-color: #0f172a;
}

.ts-proteccion-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #020617 0%, #111827 50%, #020617 100%);
    z-index: 0;
}

.ts-proteccion-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
}

.ts-proteccion-glow--tr {
    top: -10%;
    right: -10%;
    width: 24rem;
    height: 24rem;
    background: rgba(245, 158, 11, 0.06);
}

.ts-proteccion-glow--bl {
    bottom: -10%;
    left: -10%;
    width: 20rem;
    height: 20rem;
    background: rgba(245, 158, 11, 0.04);
}

.ts-proteccion-content {
    position: relative;
    z-index: 2;
}

/* Protection cards */
.ts-proteccion-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background-color: rgba(255, 255, 255, 0.02);
    transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.ts-proteccion-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.4);
}

.ts-proteccion-card--red:hover    { border-color: rgba(239, 68, 68, 0.35);  background-color: rgba(239, 68, 68, 0.04); }
.ts-proteccion-card--orange:hover { border-color: rgba(249, 115, 22, 0.35); background-color: rgba(249, 115, 22, 0.04); }
.ts-proteccion-card--yellow:hover { border-color: rgba(234, 179, 8, 0.35);  background-color: rgba(234, 179, 8, 0.04); }
.ts-proteccion-card--solar:hover  { border-color: rgba(245, 158, 11, 0.35); background-color: rgba(245, 158, 11, 0.06); }

.ts-proteccion-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.ts-proteccion-card--red    .ts-proteccion-icon { background-color: rgba(239, 68, 68, 0.15); }
.ts-proteccion-card--orange .ts-proteccion-icon { background-color: rgba(249, 115, 22, 0.15); }
.ts-proteccion-card--yellow .ts-proteccion-icon { background-color: rgba(234, 179, 8, 0.15); }
.ts-proteccion-card--solar  .ts-proteccion-icon { background-color: rgba(245, 158, 11, 0.15); }

/* Visual column (image + floating badge) */
.ts-proteccion-visual {
    z-index: 2;
}

.ts-proteccion-img-wrap {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 30px -10px rgba(245, 158, 11, 0.1);
    aspect-ratio: 4 / 5;
    position: relative;
}

.ts-proteccion-img-wrap > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.ts-proteccion-visual:hover .ts-proteccion-img-wrap > img {
    transform: scale(1.04);
}

.ts-proteccion-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2, 6, 23, 0.85) 0%, transparent 60%);
    pointer-events: none;
}

.ts-proteccion-badge {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    background-color: rgba(17, 24, 39, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 0.75rem;
    padding: 1.25rem;
    border: 1px solid rgba(245, 158, 11, 0.2);
    z-index: 2;
}

/* Protection section — responsive adjustments */
@media (min-width: 640px) {
    .ts-proteccion-badge {
        left: 2rem;
        right: 2rem;
        bottom: 2rem;
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .ts-proteccion-img-wrap {
        aspect-ratio: auto;
        border-radius: 1rem;
    }
}

@media (max-width: 1023px) {
    .ts-proteccion-visual {
        max-width: 28rem;
        margin: 0 auto;
    }
}

@media (max-width: 639px) {
    .ts-proteccion-glow {
        filter: blur(60px);
    }

    .ts-proteccion-glow--tr {
        width: 16rem;
        height: 16rem;
    }

    .ts-proteccion-glow--bl {
        width: 14rem;
        height: 14rem;
    }
}

/* Dark mode — protection section */
html.dark .ts-proteccion-card {
    background-color: rgba(255, 255, 255, 0.03);
}

/********************************************
 * Artículo de noticia — tipografía profesional
 * Aplica a .prose (single.php y content-legal.php)
 ********************************************/
.prose {
    color: #374151;
    font-size: 1.075rem;
    line-height: 1.85;
    letter-spacing: 0.003em;
}

.prose p {
    margin-bottom: 1.5rem;
}

.prose > p:first-of-type {
    margin-top: 0.25rem;
}

/* Intro lead opcional (primer párrafo tras la imagen) */
.prose > figure + p,
.prose > p:first-of-type {
    font-size: 1.15rem;
    color: #1f2937;
    line-height: 1.75;
}

.prose strong {
    color: #111827;
    font-weight: 700;
}

.prose a {
    color: #d97706;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}

.prose a:hover {
    color: #b45309;
}

/* Encabezados */
.prose h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: #111827;
    line-height: 1.3;
    margin-top: 3rem;
    margin-bottom: 1.1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #fde68a;
    letter-spacing: -0.01em;
}

.prose h2:first-of-type {
    margin-top: 2rem;
}

.prose h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.4;
    margin-top: 2.25rem;
    margin-bottom: 0.85rem;
}

.prose h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #374151;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Listas */
.prose ul,
.prose ol {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    padding-left: 1.75rem;
}

.prose ul {
    list-style-type: disc;
}

.prose ol {
    list-style-type: decimal;
}

.prose li {
    margin-bottom: 0.6rem;
    padding-left: 0.25rem;
}

.prose li::marker {
    color: #d97706;
    font-weight: 700;
}

.prose li:last-child {
    margin-bottom: 0;
}

/* Blockquote */
.prose blockquote {
    margin: 2rem 0;
    padding: 1.5rem 1.75rem 1.5rem 2rem;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-left: 5px solid #f59e0b;
    border-radius: 0.75rem;
    font-size: 1.15rem;
    font-style: italic;
    color: #78350f;
    line-height: 1.7;
    box-shadow: 0 1px 3px rgba(180, 83, 9, 0.08);
}

.prose blockquote p {
    margin-bottom: 0.75rem;
}

.prose blockquote p:last-child {
    margin-bottom: 0;
}

.prose blockquote cite {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 700;
    color: #92400e;
}

/* Figuras y figcaption */
.prose figure {
    margin: 2.5rem 0;
    padding: 0;
}

.prose figure img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.18),
                0 4px 10px -3px rgba(15, 23, 42, 0.1);
    display: block;
}

.prose figcaption {
    margin-top: 0.85rem;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    font-style: italic;
    text-align: center;
    line-height: 1.55;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* Imagen individual (sin figure) */
.prose > img {
    margin: 2rem 0;
    border-radius: 1rem;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.18);
}

.prose img {
    background-color: #f3f4f6;
}

/* Tablas */
.prose table {
    margin: 2rem 0;
    font-size: 0.95rem;
}

.prose table th {
    background: #fef3c7;
    color: #78350f;
}

/* Separador more (#more) */
.prose #more {
    display: block;
    margin-top: 0.5rem;
    visibility: hidden;
}

/* Responsive — ajuste fino en mobile */
@media (max-width: 639px) {
    .prose {
        font-size: 1rem;
        line-height: 1.75;
    }

    .prose h2 {
        font-size: 1.5rem;
        margin-top: 2.25rem;
    }

    .prose h3 {
        font-size: 1.2rem;
    }

    .prose figure {
        margin: 1.75rem 0;
    }

    .prose blockquote {
        padding: 1.1rem 1.25rem 1.1rem 1.5rem;
        font-size: 1.05rem;
        margin: 1.5rem 0;
    }
}

/********************************************
 * Banner superior de noticia (single.php)
 * Modos:
 *   .ts-single-banner--gradient → solo degradado ámbar sólido
 *   .ts-single-banner--image    → imagen destacada al fondo con overlay ámbar (opacidad preset 0.65)
 ********************************************/
.ts-single-banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 3rem 0 3.25rem;
    background-size: cover;
    background-position: center;
}

@media (min-width: 640px) {
    .ts-single-banner { padding: 4rem 0 4.25rem; }
}

@media (min-width: 1024px) {
    .ts-single-banner { padding: 5rem 0 5.25rem; }
}

/* Modo gradiente (sin imagen) */
.ts-single-banner--gradient {
    background-image: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
}

.ts-single-banner--gradient .ts-single-banner-overlay {
    display: none;
}

/* Modo imagen destacada con overlay ámbar semi-transparente */
.ts-single-banner--image {
    background-repeat: no-repeat;
}

.ts-single-banner--image .ts-single-banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(15, 23, 42, 0.40);
}

.ts-single-banner-content {
    position: relative;
    z-index: 2;
}

.ts-single-banner-title {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.ts-single-banner-meta {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);
}

/* En mobile subir un poco la opacidad para asegurar contraste del texto */
@media (max-width: 639px) {
    .ts-single-banner--image .ts-single-banner-overlay {
        background: rgba(15, 23, 42, 0.50);
    }
}

/********************************************
 * Modo oscuro — Artículo de noticia (.prose)
 * Garantiza contraste de texto/encabezados/
 * blockquote/tablas/figcaption sobre el
 * fondo oscuro definido por html.dark .bg-white
 ********************************************/
html.dark .prose {
    color: #d1d5db; /* gray-300 */
}

html.dark .prose > figure + p,
html.dark .prose > p:first-of-type {
    color: #f3f4f6; /* gray-100 */
}

html.dark .prose strong {
    color: #ffffff;
}

html.dark .prose a {
    color: #fbbf24; /* amber-400 */
}

html.dark .prose a:hover {
    color: #fcd34d; /* amber-300 */
}

html.dark .prose h2 {
    color: #ffffff;
    border-bottom-color: #f59e0b; /* amber-500 */
}

html.dark .prose h3 {
    color: #f9fafb; /* gray-50 */
}

html.dark .prose h4 {
    color: #e5e7eb; /* gray-200 */
}

html.dark .prose li::marker {
    color: #fbbf24;
}

/* Blockquote: fondo oscuro con borde ámbar */
html.dark .prose blockquote {
    background: linear-gradient(135deg, rgba(30, 27, 22, 0.9) 0%, rgba(20, 18, 14, 0.95) 100%);
    color: #fde68a;
    border-left-color: #f59e0b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

html.dark .prose blockquote cite {
    color: #fcd34d;
}

/* Figcaption */
html.dark .prose figcaption {
    color: #9ca3af; /* gray-400 */
}

/* Imágenes: quitar el fondo gris claro que estorbaba */
html.dark .prose img {
    background-color: transparent;
}

/* Tablas */
html.dark .prose table th {
    background: rgba(245, 158, 11, 0.18);
    color: #fde68a;
}

html.dark .prose table tr:nth-child(odd) td {
    background: rgba(255, 255, 255, 0.03);
}

/* Legal pages content-legal.php añade text-gray-600 en el contenedor */
html.dark .prose.text-gray-600,
html.dark .prose.text-gray-700,
html.dark .prose.text-gray-800 {
    color: #d1d5db;
}

/* ============================================
   CATÁLOGO (archive + taxonomy + single)
   ============================================ */

.ts-archive .ts-cat-filter { margin-top: 0.5rem; }
.ts-cat-pill {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #374151;
    font-size: var(--ts-size-ui, 0.9375rem);
    font-family: var(--ts-font-ui);
    font-weight: var(--ts-weight-ui);
    transition: all .2s ease;
    text-decoration: none;
}
.ts-cat-pill:hover { color: #ea580c; border-color: #fb923c; }
.ts-cat-pill--active { background: #f59e0b; color: #fff; border-color: #f59e0b; }
html.dark .ts-cat-pill { background: #1f2937; border-color: #374151; color: #d1d5db; }
html.dark .ts-cat-pill--active { background: #f59e0b; color: #1f2937; }

.ts-subcat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    color: #1f2937;
    font-weight: 600;
    font-family: var(--ts-font-ui);
    transition: all .2s ease;
    text-decoration: none;
}
.ts-subcat-card:hover { border-color: #f59e0b; color: #ea580c; }
.ts-subcat-count {
    background: #fef3c7;
    color: #92400e;
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 9999px;
}

/* Tarjetas de producto (reutilizadas en home + archive) */
.ts-product-card--catalog {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.ts-product-card--catalog:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -8px rgba(0,0,0,.15);
    border-color: #fbbf24;
}
.ts-product-card-imgwrap { display: block; }
.ts-product-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    background: #f3f4f6;
}
.ts-product-card-img--ph { background: linear-gradient(135deg, #f3f4f6, #e5e7eb); }
.ts-product-card-body { padding: 0.9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.ts-product-cat {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ea580c;
    font-weight: 700;
    font-family: var(--ts-font-ui);
}
.ts-product-title { margin: 0; font-size: 1.05rem; }
.ts-product-title a { color: #111827; text-decoration: none; }
.ts-product-title a:hover { color: #ea580c; }
.ts-product-desc { color: #4b5563; font-size: 0.875rem; margin: 0; line-height: 1.45; }
.ts-product-sku { font-size: 0.75rem; color: #6b7280; margin: 0; }
.ts-product-sku code { background: #f3f4f6; padding: 0.1rem 0.35rem; border-radius: 4px; }
.ts-product-price {
    font-size: 1.15rem;
    font-weight: 800;
    color: #059669;
    margin: 0.3rem 0 0;
    font-family: var(--ts-font-title);
}
.ts-product-price-empty { font-size: 0.85rem; font-weight: 600; color: #6b7280; }
html.dark .ts-product-card--catalog { background: #1f2937; border-color: #374151; }
html.dark .ts-product-title a { color: #f9fafb; }
html.dark .ts-product-desc { color: #9ca3af; }

.ts-product-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }

/* Botones generic */
.ts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    border-radius: 9999px;
    font-family: var(--ts-font-ui);
    font-weight: var(--ts-weight-ui);
    font-size: var(--ts-size-ui);
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    line-height: 1.2;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}
.ts-btn:active { transform: translateY(1px); }
.ts-btn--buy {
    background: #f59e0b;
    color: #fff;
    flex: 1;
}
.ts-btn--buy:hover { background: #ea580c; }
.ts-btn--detail {
    background: transparent;
    color: #1f2937;
    border-color: #d1d5db;
    flex: 1;
}
.ts-btn--detail:hover { border-color: #f59e0b; color: #ea580c; }
.ts-btn--wa { background: #25d366; color: #1f2937; }
.ts-btn--wa:hover { background: #1ebe5a; color: #fff; }
.ts-btn--wa-light { background: #fff; color: #128c4a; border-color: #25d366; }
.ts-btn--wa-light:hover { background: #25d366; color: #fff; }
.ts-btn--ghost { background: transparent; color: #374151; border-color: #d1d5db; }
.ts-btn--ghost:hover { color: #ea580c; border-color: #f59e0b; }
.ts-btn--sm { padding: 0.4rem 0.85rem; font-size: 0.8rem; }
.ts-btn--lg { padding: 0.85rem 1.5rem; font-size: 1rem; }
.ts-btn--block { display: flex; width: 100%; }
html.dark .ts-btn--detail { color: #e5e7eb; border-color: #4b5563; }

/* ============================================
   CATEGORÍAS (grid en home)
   ============================================ */
.ts-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}
@media (min-width: 768px) {
    .ts-cat-grid { grid-template-columns: repeat(4, 1fr); }
}
.ts-cat-tile {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 0.875rem;
    overflow: hidden;
    background: linear-gradient(135deg, #1f2937, #374151);
    color: #fff;
    text-decoration: none;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ts-cat-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -10px rgba(0,0,0,.4);
    border-color: #f59e0b;
}
.ts-cat-tile:focus-visible {
    outline: 3px solid #f59e0b;
    outline-offset: 2px;
}
.ts-cat-tile-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .4s ease;
    opacity: 0.9;
}
.ts-cat-tile:hover .ts-cat-tile-img { transform: scale(1.06); }
.ts-cat-tile-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
    background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.25) 55%, transparent 100%);
}
.ts-cat-tile-title {
    margin: 0;
    font-size: 1.1rem;
    font-family: var(--ts-font-title);
    font-weight: var(--ts-weight-title);
    color: #fff;
}
.ts-cat-tile-count {
    font-size: 0.78rem;
    font-family: var(--ts-font-ui);
    color: #fcd34d;
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.ts-cat-tile-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--ts-font-ui);
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background: rgba(245, 158, 11, 0.85);
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    width: fit-content;
    transition: background .2s ease;
}
.ts-cat-tile:hover .ts-cat-tile-cta {
    background: #f59e0b;
    box-shadow: 0 2px 6px rgba(245,158,11,.6);
}

/* ============================================
   SINGLE PRODUCT
   ============================================ */
.ts-breadcrumb a, .ts-breadcrumb span { font-size: 0.85rem; }
.ts-single-gallery .ts-single-imgwrap {
    background: #f3f4f6;
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 1;
    border: 1px solid #e5e7eb;
}
.ts-single-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-single-imgwrap--ph { display: flex; align-items: center; justify-content: center; color: #9ca3af; }

/* === Galeria del producto: miniaturas === */
.ts-single-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.ts-single-thumb {
    display: block;
    padding: 0;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f3f4f6;
    cursor: pointer;
    aspect-ratio: 1;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.ts-single-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ts-single-thumb:hover {
    border-color: #fb923c;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(0,0,0,0.2);
}
.ts-single-thumb.is-active {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}
html.dark .ts-single-thumb { border-color: #374151; background: #1f2937; }
html.dark .ts-single-thumb:hover { border-color: #fb923c; }
html.dark .ts-single-thumb.is-active { border-color: #f59e0b; }

/* === Lightbox === */
.ts-single-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: tsLbIn 0.2s ease;
}
@keyframes tsLbIn { from { opacity: 0; } to { opacity: 1; } }
.ts-single-lightbox-img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 0.5rem;
    box-shadow: 0 20px 60px -10px rgba(0,0,0,0.5);
    object-fit: contain;
}
.ts-single-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.ts-single-lightbox-close:hover { background: rgba(255,255,255,0.3); }

/* === Responsive galeria: en pantallas estrechas mostrar thumbs en scroll horizontal === */
@media (max-width: 640px) {
    .ts-single-thumbs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        grid-template-columns: none;
        padding-bottom: 0.25rem;
    }
    .ts-single-thumb {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
        scroll-snap-align: start;
    }
}
.ts-single-info .ts-product-cat-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ea580c;
    font-weight: 700;
    font-family: var(--ts-font-ui);
    text-decoration: none;
}
.ts-single-meta { margin: 1rem 0; padding-bottom: 1rem; border-bottom: 1px solid #e5e7eb; }
.ts-single-meta p { margin: 0.3rem 0; }
.ts-single-price {
    font-size: 1.85rem;
    font-family: var(--ts-font-title);
    font-weight: 800;
    color: #059669;
    margin: 0.4rem 0 !important;
}
.ts-single-qty { display: flex; align-items: center; gap: 0.6rem; margin: 1.2rem 0; }
.ts-qty-input {
    width: 70px;
    padding: 0.4rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    text-align: center;
    background: #fff;
    color: #111827;
    font-family: var(--ts-font-ui);
}
.ts-qty-input--mini { width: 56px; padding: 0.25rem 0.5rem; border-radius: 9999px; }
.ts-single-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.2rem 0 0; }
.ts-single-actions > * { flex: 1; min-width: 200px; }

/* ============================================
   BADGE DEL CARRITO (navbar)
   ============================================ */
.ts-cart-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 6px;
    background: #dc2626;
    color: #fff !important;
    font-family: var(--ts-font-ui);
    font-weight: 800;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,.25);
    transition: opacity .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    z-index: 60;
    pointer-events: none;
}
.ts-cart-badge:empty { display: none; }
.ts-cart-badge[data-count="0"] { opacity: 0; }
.ts-cart-badge.ts-cart-badge--hidden { opacity: 0; }
#techo-cart-count-mobile {
    position: relative;
    top: 0;
    right: -6px;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 0.4rem;
}

/* Asegurar que el toggle del carrito nunca recorte el badge */
#techo-cart-toggle {
    padding: 0 !important;
    overflow: visible !important;
    position: relative;
    isolation: isolate;
}
#techo-cart-toggle svg {
    width: 22px;
    height: 22px;
}

/* Evitar que cualquier ascendente del navbar recorte el badge:
   el navbar tiene backdrop-blur y bg-white/95, forzamos overflow visible. */
#navbar { overflow: visible !important; }
#navbar > div { overflow: visible !important; }
.ts-qty-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d1d5db;
    background: #fff;
    border-radius: 9999px;
    cursor: pointer;
    color: #374151;
    font-weight: 700;
    transition: background .15s ease, color .15s ease;
}
.ts-qty-btn:hover { background: #f59e0b; color: #fff; border-color: #f59e0b; }

/* ============================================
   MODAL
   ============================================ */
.ts-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ts-modal[hidden] { display: none; }
.ts-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); animation: tsFadeIn .2s ease; }
.ts-modal-dialog {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 1rem;
    max-width: 920px;
    width: 100%;
    max-height: 92vh;
    overflow: auto;
    box-shadow: 0 25px 60px -10px rgba(0,0,0,.35);
    animation: tsModalIn .22s ease;
}
html.dark .ts-modal-dialog { background: #1f2937; color: #e5e7eb; }
.ts-modal-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: none;
    background: rgba(0,0,0,.05);
    color: #374151;
    border-radius: 9999px;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}
.ts-modal-close:hover { background: #fee2e2; color: #b91c1c; }
.ts-modal-body { padding: 1.5rem; }
.ts-modal-loading, .ts-modal-error {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
    font-family: var(--ts-font-body);
}
.ts-modal-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .ts-modal-grid { grid-template-columns: 1fr 1fr; } }
.ts-modal-media .ts-modal-img {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 0.875rem;
    background: #f3f4f6;
}
.ts-modal-img--ph { aspect-ratio: 1; }
.ts-modal-info { display: flex; flex-direction: column; gap: 0.5rem; }
.ts-modal-title { font-size: 1.6rem; font-weight: 800; color: #111827; margin: 0; font-family: var(--ts-font-title); }
html.dark .ts-modal-title { color: #f9fafb; }
.ts-modal-price { font-size: 1.7rem; font-weight: 800; color: #059669; margin: 0.3rem 0; font-family: var(--ts-font-title); }
.ts-modal-price--empty { color: #6b7280; font-size: 1rem; font-weight: 600; }
.ts-modal-sku { font-size: 0.8rem; color: #6b7280; }
.ts-modal-sku code { background: #f3f4f6; padding: 0.1rem 0.35rem; border-radius: 4px; }
.ts-modal-desc { color: #4b5563; line-height: 1.6; margin: 0.5rem 0 1rem; }
.ts-modal-qty { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 1rem; }
.ts-modal-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.8rem; }
.ts-modal-actions > * { flex: 1; min-width: 180px; }
.ts-modal-footlinks { margin-top: 0.4rem; text-align: left; }

@keyframes tsFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes tsModalIn { from { opacity: 0; transform: translateY(10px) scale(.98) } to { opacity: 1; transform: none } }

/* ============================================
   DRAWER (CARRITO LATERAL)
   ============================================ */
.ts-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    width: min(360px, 88vw);
    background: #fff;
    z-index: 110;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 40px -10px rgba(0,0,0,.3);
    animation: tsDrawerIn .25s ease;
}
.ts-cart-drawer[hidden] { display: none; }
html.dark .ts-cart-drawer { background: #1f2937; color: #e5e7eb; }
@keyframes tsDrawerIn { from { transform: translateX(100%) } to { transform: none } }
.ts-cart-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}
html.dark .ts-cart-drawer-head { border-color: #374151; }
.ts-cart-drawer-title { margin: 0; font-size: 1.2rem; font-family: var(--ts-font-title); font-weight: var(--ts-weight-title); }
.ts-cart-drawer-close {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280;
    border-radius: 9999px;
    transition: background .15s ease;
}
.ts-cart-drawer-close:hover { background: #fee2e2; color: #b91c1c; }
.ts-cart-drawer-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.ts-cart-empty { text-align: center; color: #9ca3af; padding: 3rem 1rem; font-family: var(--ts-font-body); }
.ts-cart-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.ts-cart-item { display: flex; gap: 0.75rem; padding-bottom: 0.85rem; border-bottom: 1px solid #f3f4f6; }
html.dark .ts-cart-item { border-color: #374151; }
.ts-cart-item-img { width: 64px; height: 64px; object-fit: cover; border-radius: 0.5rem; flex-shrink: 0; background: #f3f4f6; }
.ts-cart-item-img--ph { background: linear-gradient(135deg, #f3f4f6, #e5e7eb); }
.ts-cart-item-body { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.ts-cart-item-title { color: #1f2937; font-weight: 600; font-size: 0.95rem; text-decoration: none; font-family: var(--ts-font-title); }
html.dark .ts-cart-item-title { color: #f9fafb; }
.ts-cart-item-title:hover { color: #ea580c; }
.ts-cart-item-unit { font-size: 0.78rem; color: #6b7280; }
.ts-cart-item-controls { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; }
.ts-cart-item-remove {
    margin-left: auto;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 9999px;
    transition: background .15s ease, color .15s ease;
}
.ts-cart-item-remove:hover { background: #fee2e2; color: #b91c1c; }
.ts-cart-item-line { font-weight: 700; color: #059669; font-size: 0.95rem; margin-top: 0.15rem; font-family: var(--ts-font-title); }

.ts-cart-drawer-foot { border-top: 1px solid #e5e7eb; padding: 1rem 1.25rem; }
html.dark .ts-cart-drawer-foot { border-color: #374151; }
.ts-cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.8rem; font-family: var(--ts-font-title); font-weight: 700; }
.ts-cart-total strong { color: #059669; font-size: 1.4rem; }
.ts-cart-wa-buttons { display: flex; flex-direction: column; gap: 0.5rem; }
.ts-cart-foot-extra { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; font-size: 0.8rem; }
.ts-cart-view-page { color: #6b7280; text-decoration: none; }
.ts-cart-view-page:hover { color: #ea580c; }
.ts-cart-clear { background: transparent; border: none; color: #9ca3af; cursor: pointer; }
.ts-cart-clear:hover { color: #b91c1c; }

/* ============================================
   TOAST
   ============================================ */
.ts-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #1f2937;
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 9999px;
    z-index: 200;
    font-family: var(--ts-font-ui);
    font-weight: 600;
    font-size: var(--ts-size-ui);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.ts-toast[hidden] { display: none; }
.ts-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================
   PÁGINA DEL CARRITO (page-carrito)
   ============================================ */
.ts-cart-page { max-width: 900px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.ts-cart-page-title { font-family: var(--ts-font-title); font-weight: var(--ts-weight-title); font-size: var(--ts-size-h2); margin-bottom: 1.5rem; }
.ts-cart-page-empty { text-align: center; padding: 4rem 1rem; color: #6b7280; font-family: var(--ts-font-body); }
.ts-cart-page-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.ts-cart-page-list .ts-cart-item { border: 1px solid #e5e7eb; padding: 1rem; border-radius: 0.875rem; }
html.dark .ts-cart-page-list .ts-cart-item { border-color: #374151; }
.ts-cart-page-list .ts-cart-item-img { width: 96px; height: 96px; }
.ts-cart-page-foot { margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid #e5e7eb; }
html.dark .ts-cart-page-foot { border-color: #374151; }
.ts-cart-page-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.5rem; font-family: var(--ts-font-title); font-weight: 800; margin-bottom: 1.5rem; }
.ts-cart-page-total strong { color: #059669; }
.ts-cart-page-wa { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.ts-cart-page-wa > * { flex: 1; min-width: 240px; }
.ts-cart-page-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

/* ============================================
   PAGINATION archive (Tailwind-ish)
   ============================================ */
/* ============================================
   PAGINACION DEL CATÁLOGO (ts-pagination)
   Contenedor flex con flechas + numeros + ellipsis
   ============================================ */
.ts-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--ts-font-ui);
}
.ts-pagination-numbers {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    order: 2;
}
.ts-pagination:hover .ts-pagination-page {
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.ts-pagination-page,
.ts-pagination-arrow,
.ts-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    user-select: none;
}
.ts-pagination-page:hover,
.ts-pagination-arrow:not(.ts-pagination-arrow--disabled):hover {
    border-color: #f59e0b;
    color: #ea580c;
    background: #fffbeb;
    transform: translateY(-1px);
}
.ts-pagination-page:active,
.ts-pagination-arrow:not(.ts-pagination-arrow--disabled):active {
    transform: translateY(0);
}
.ts-pagination .is-current {
    background: #f59e0b;
    color: #fff;
    border-color: #f59e0b;
    cursor: default;
}
.ts-pagination .is-current:hover {
    background: #f59e0b;
    color: #fff;
    transform: none;
}
.ts-pagination-ellipsis {
    min-width: 1.5rem;
    border: 0;
    background: transparent;
    color: #9ca3af;
    pointer-events: none;
}
.ts-pagination-arrow {
    gap: 0.4rem;
    padding: 0 1rem;
}
.ts-pagination-arrow svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}
.ts-pagination-arrow--disabled {
    color: #d1d5db;
    cursor: not-allowed;
    opacity: 0.55;
}
.ts-pagination-arrow--disabled svg { opacity: 0.6; }
.ts-pagination-prev { order: 1; }
.ts-pagination-next { order: 3; }
.ts-pagination-info {
    order: 4;
    width: 100%;
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
}

/* — Modo oscuro — */
html.dark .ts-pagination-page,
html.dark .ts-pagination-arrow {
    background: #1f2937;
    border-color: #374151;
    color: #d1d5db;
}
html.dark .ts-pagination-page:hover,
html.dark .ts-pagination-arrow:not(.ts-pagination-arrow--disabled):hover {
    background: #374151;
    border-color: #f59e0b;
    color: #fb923c;
}
html.dark .ts-pagination-ellipsis { color: #6b7280; }
html.dark .ts-pagination .is-current {
    background: #f59e0b;
    color: #1f2937;
}
html.dark .ts-pagination-info { color: #9ca3af; }

/* — Movil — */
@media (max-width: 640px) {
    .ts-pagination { gap: 0.35rem; }
    .ts-pagination-page,
    .ts-pagination-arrow,
    .ts-pagination-ellipsis {
        min-width: 2.25rem;
        height: 2.25rem;
        padding: 0 0.55rem;
        font-size: 0.9rem;
    }
    /* En pantallas muy estrechas el texto "Anterior/Siguiente"
       se oculta; queda solo la flecha, ahorrando espacio. */
    .ts-pagination-arrow span {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
    .ts-pagination-info { display: none; }
}

/* ============================================
   GRID DE CATÁLOGO (responsive, configurable)
   variable --ts-cat-grid-cols (2..6)
   ============================================ */
.ts-cat-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem 0.75rem;
}
@media (min-width: 640px) {
    .ts-cat-product-grid { gap: 1.25rem; }
}
@media (min-width: 768px) {
    .ts-cat-product-grid {
        grid-template-columns: repeat(var(--ts-cat-grid-cols, 4), 1fr);
    }
}
@media (min-width: 1024px) {
    .ts-cat-product-grid { gap: 1.5rem; }
}

/* Asegurar altura de imagen consistente sin importar nº de columnas */
.ts-cat-product-grid .ts-product-card-img { height: 170px; }
@media (min-width: 768px) {
    .ts-cat-product-grid .ts-product-card-img { height: 180px; }
    .ts-cat-product-grid[style*="--ts-cat-grid-cols:5"] .ts-product-card-img,
    .ts-cat-product-grid[style*="--ts-cat-grid-cols:6"] .ts-product-card-img { height: 160px; }
}

/* ============================================
   DETALLES TÉCNICOS (en modal + single)
   ============================================ */
.ts-modal-specs, .ts-single-specs {
    margin: 1rem 0 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
}
html.dark .ts-modal-specs, html.dark .ts-single-specs { border-color: #374151; }
.ts-modal-specs-title, .ts-single-specs-title {
    font-family: var(--ts-font-title);
    font-weight: var(--ts-weight-title);
    font-size: 1rem;
    margin: 0 0 0.5rem;
    color: #111827;
}
html.dark .ts-modal-specs-title, html.dark .ts-single-specs-title { color: #f9fafb; }
.ts-spec-list {
    display: grid;
    grid-template-columns: minmax(40%, 1fr) 1fr;
    gap: 0.4rem 1rem;
    font-size: 0.875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ts-spec-list dt {
    font-weight: 600;
    color: #374151;
    font-family: var(--ts-font-ui);
}
html.dark .ts-spec-list dt { color: #d1d5db; }
.ts-spec-list dd {
    margin: 0;
    color: #4b5563;
    font-family: var(--ts-font-body);
}
html.dark .ts-spec-list dd { color: #9ca3af; }
.ts-spec-list dt::after { content: ":"; }

/* HTML personalizado en specs admite tablas como en post_content */
.ts-modal-specs-html, .ts-single-specs-html { font-size: 0.875rem; color: #4b5563; line-height: 1.6; }
.ts-modal-specs-html table, .ts-single-specs-html table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; }
.ts-modal-specs-html th, .ts-single-specs-html th,
.ts-modal-specs-html td, .ts-single-specs-html td {
    border: 1px solid #e5e7eb;
    padding: 0.4rem 0.6rem;
    text-align: left;
    font-size: 0.85rem;
}
html.dark .ts-modal-specs-html th, html.dark .ts-single-specs-html th,
html.dark .ts-modal-specs-html td, html.dark .ts-single-specs-html td { border-color: #374151; }

/* ============================================

/* ============================================
   FORMULARIO "PEDIR POR CORREO" (modal)
   Mobile-first: en móvil el formulario ocupa todo
   el ancho disponible (sin scroll horizontal) con
   touch targets cómodos. A partir de 640px vuelve
   a su estilo compacto.
   ============================================ */
.ts-orderform-modal .ts-modal-dialog {
    max-width: 480px;
    width: calc(100vw - 1.5rem);
    max-height: 94vh;
    overflow-y: auto;
}
.ts-orderform-modal .ts-modal-body {
    padding: 1.25rem 1rem 1.5rem;
}
@media (min-width: 640px) {
    .ts-orderform-modal .ts-modal-dialog { width: calc(100vw - 3rem); }
    .ts-orderform-modal .ts-modal-body { padding: 1.5rem 1.25rem 2rem; }
}

.ts-orderform-title {
    font-family: var(--ts-font-title);
    font-weight: var(--ts-weight-title);
    font-size: 1.15rem;
    margin: 0 0 0.35rem;
    color: #111827;
    line-height: 1.25;
}
@media (min-width: 640px) {
    .ts-orderform-title { font-size: 1.35rem; margin: 0 0 0.5rem; }
}
html.dark .ts-orderform-title { color: #f9fafb; }

.ts-orderform-subtitle {
    color: #6b7280;
    font-size: 0.8rem;
    margin: 0 0 0.85rem;
    line-height: 1.4;
}
@media (min-width: 640px) {
    .ts-orderform-subtitle { font-size: 0.85rem; margin: 0 0 1rem; }
}

/* Resumen del pedido: en móvil es colapsable (acordeón) */
.ts-orderform-summary {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.6rem;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.85rem;
    font-size: 0.82rem;
    max-height: 140px;
    overflow-y: auto;
}
@media (min-width: 640px) {
    .ts-orderform-summary {
        padding: 0.75rem 1rem;
        margin-bottom: 1.25rem;
        font-size: 0.85rem;
        max-height: 200px;
    }
}
html.dark .ts-orderform-summary { background: #111827; border-color: #374151; }
.ts-orderform-summary h4 {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
}
.ts-orderform-summary ul { margin: 0; padding: 0; list-style: none; }
.ts-orderform-summary li {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border-bottom: 1px dashed #e5e7eb;
    line-height: 1.35;
}
html.dark .ts-orderform-summary li { border-color: #374151; }
.ts-orderform-summary .ts-orderform-summary-total {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    color: #059669;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 2px solid #e5e7eb;
}
html.dark .ts-orderform-summary .ts-orderform-summary-total { border-color: #4b5563; }

/* Grid: mobile-first, una columna, siempre */
.ts-orderform-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}
.ts-orderform-grid .ts-orderform-full { grid-column: 1; }

.ts-orderform-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: #374151;
    font-family: var(--ts-font-ui);
}
@media (min-width: 640px) {
    .ts-orderform-field label { font-size: 0.8rem; }
}
html.dark .ts-orderform-field label { color: #d1d5db; }
.ts-orderform-field label .ts-req { color: #dc2626; }

.ts-orderform-field input,
.ts-orderform-field textarea,
.ts-orderform-field select {
    width: 100%;
    padding: 0.65rem 0.75rem;     /* touch target más grande en móvil */
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: #fff;
    color: #111827;
    font-family: var(--ts-font-body);
    font-size: 16px;              /* evita auto-zoom en iOS */
    line-height: 1.5;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
@media (min-width: 640px) {
    .ts-orderform-field input,
    .ts-orderform-field textarea,
    .ts-orderform-field select {
        padding: 0.55rem 0.7rem;
        font-size: 0.95rem;
    }
}
html.dark .ts-orderform-field input,
html.dark .ts-orderform-field textarea,
html.dark .ts-orderform-field select { background: #1f2937; border-color: #4b5563; color: #f9fafb; }
.ts-orderform-field input:focus,
.ts-orderform-field textarea:focus,
.ts-orderform-field select:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,.2);
}
.ts-orderform-field textarea { resize: vertical; min-height: 80px; }
.ts-orderform-field select {
    /* Flecha custom para select en móvil */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    padding-right: 2rem;
}
.ts-orderform-field input[type="tel"],
.ts-orderform-field input[type="email"],
.ts-orderform-field input[type="text"] {
    /* iOS: usa el teclado apropiado */
    -webkit-text-fill-color: inherit; /* evita autofill flicker */
}

/* Footer (botones Cancelar/Enviar): móvil → columna apilada, full width */
.ts-orderform-foot {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    align-items: stretch;
}
@media (min-width: 480px) {
    .ts-orderform-foot {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
}
.ts-orderform-foot .ts-btn {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1rem;        /* touch target más alto */
    font-size: 1rem;
}
@media (min-width: 640px) {
    .ts-orderform-foot .ts-btn { padding: 0.6rem 1.1rem; font-size: var(--ts-size-ui); }
}
.ts-orderform-foot .ts-btn--submit {
    background: #059669;
    color: #fff;
    border-color: #059669;
}
.ts-orderform-foot .ts-btn--submit:hover { background: #047857; }

.ts-orderform-feedback {
    margin-top: 0.6rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.82rem;
    line-height: 1.4;
    display: none;
}
@media (min-width: 640px) {
    .ts-orderform-feedback {
        margin-top: 0.75rem;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
}
.ts-orderform-feedback.ts-orderform-feedback--ok {
    display: block;
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}
.ts-orderform-feedback.ts-orderform-feedback--err {
    display: block;
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.ts-orderform-loading {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #d1d5db;
    border-top-color: #f59e0b;
    border-radius: 9999px;
    animation: tsSpin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 0.4rem;
}
@keyframes tsSpin { to { transform: rotate(360deg); } }
.csSEOF
echo "CSS appended"
/* ============================================
   BOTÓN "PEDIR POR CORREO" + Toast linkado
   ============================================ */
.ts-btn--email {
    background: #f3f4f6;
    color: #1f2937;
    border: 1px solid #d1d5db;
}
.ts-btn--email:hover { background: #fbbf24; color: #fff; border-color: #fbbf24; }
html.dark .ts-btn--email { background: #1f2937; color: #f9fafb; border-color: #4b5563; }
html.dark .ts-btn--email:hover { background: #f59e0b; color: #1f2937; border-color: #f59e0b; }

/* Asegurar el drawer/aside con la total altura */
.ts-cart-drawer { width: min(360px, 88vw); }

/* ============================================
   NAVBAR VARIANTES (Customizer)
   Tipos: solid / transparent-hero / floating / overlay-dark
   Posiciones: between / center / left / right
   ============================================ */

/* Variables con defaults que pueden ser sobrescritas
   por el inline-style emitido en wp_head */
:root {
    --ts-navbar-text: inherit;
    --ts-navbar-text-hover: #ea580c;
}

/* Aplicar variables del color de texto del menú
   a los enlaces del navbar (fallback al que ya usaba
   el tema, así vacío no rompe nada). */
#navbar.ts-navbar nav a,
#navbar.ts-navbar > div a:not(.bg-solar-500),
.ts-nav a {
    color: var(--ts-navbar-text);
}
#navbar.ts-navbar a:hover:not(.bg-solar-500),
.ts-nav a:hover {
    color: var(--ts-navbar-text-hover);
}

/* ---- Tipo: SOLID (sólido blanco; default) ---- */
#navbar.ts-navbar-type-solid,
#navbar.ts-navbar-type-solid.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
html.dark #navbar.ts-navbar-type-solid,
html.dark #navbar.ts-navbar-type-solid.scrolled {
    background-color: rgba(15, 23, 42, 0.95);
}

/* ---- Tipo: TRANSPARENT-HERO (transparente al inicio, sólido al scroll) ---- */
#navbar.ts-navbar-type-transparent-hero {
    background-color: transparent;
    backdrop-filter: none;
    box-shadow: none;
}
#navbar.ts-navbar-type-transparent-hero .ts-navbar-row { color: #fff; }
/* IMPORTANTE: usar .ts-navbar-inner (no > div) para que el selector
   NO afecte a #mobile-menu que también es un div hijo de #navbar. */
#navbar.ts-navbar-type-transparent-hero .ts-navbar-inner a:not(.bg-solar-500):not(.ts-cart-badge):not(.ts-logo-text),
#navbar.ts-navbar-type-transparent-hero .ts-navbar-row a:not(.bg-solar-500) {
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
#navbar.ts-navbar-type-transparent-hero .ts-navbar-inner a:hover:not(.bg-solar-500):not(.ts-cart-badge):not(.ts-logo-text),
#navbar.ts-navbar-type-transparent-hero .ts-navbar-row a:hover:not(.bg-solar-500) {
    color: #fcd34d;
}
/* El logo modo claro se oculta al inicio y se muestra el oscuro;
   invertido para el modo sólido al hacer scroll. */
#navbar.ts-navbar-type-transparent-hero .ts-logo-light { display: none !important; }
#navbar.ts-navbar-type-transparent-hero .ts-logo-dark { display: inline-block !important; }
#navbar.ts-navbar-type-transparent-hero.scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
#navbar.ts-navbar-type-transparent-hero.scrolled .ts-navbar-row { color: #1f2937; }
#navbar.ts-navbar-type-transparent-hero.scrolled .ts-navbar-inner a:not(.bg-solar-500):not(.ts-cart-badge):not(.ts-logo-text),
#navbar.ts-navbar-type-transparent-hero.scrolled .ts-navbar-row a:not(.bg-solar-500) {
    color: var(--ts-navbar-text, #374151);
    text-shadow: none;
}
#navbar.ts-navbar-type-transparent-hero.scrolled .ts-navbar-inner a:hover:not(.bg-solar-500):not(.ts-cart-badge):not(.ts-logo-text),
#navbar.ts-navbar-type-transparent-hero.scrolled .ts-navbar-row a:hover:not(.bg-solar-500) {
    color: var(--ts-navbar-text-hover, #ea580c);
}
#navbar.ts-navbar-type-transparent-hero.scrolled .ts-logo-light { display: inline-block !important; }
#navbar.ts-navbar-type-transparent-hero.scrolled .ts-logo-dark { display: none !important; }

/* ---- TRANSPARENT-HERO en modo oscuro ----
   El navbar debe ser transparente al inicio (igual que en modo claro)
   para que la imagen del hero se vea por detrás. Al hacer scroll se
   vuelve oscuro sólido. Las letras se mantienen claras en ambos
   estados (sobre fondo hero oscuro / fondo navbar oscuro sólido). */
html.dark #navbar.ts-navbar-type-transparent-hero {
    background-color: transparent !important;
    backdrop-filter: none;
    box-shadow: none;
}
html.dark #navbar.ts-navbar-type-transparent-hero .ts-navbar-row { color: #fff; }
html.dark #navbar.ts-navbar-type-transparent-hero .ts-navbar-inner a:not(.bg-solar-500):not(.ts-cart-badge):not(.ts-logo-text),
html.dark #navbar.ts-navbar-type-transparent-hero .ts-navbar-row a:not(.bg-solar-500) {
    color: #ffffff !important;
    text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
html.dark #navbar.ts-navbar-type-transparent-hero .ts-navbar-inner a:hover:not(.bg-solar-500):not(.ts-cart-badge):not(.ts-logo-text),
html.dark #navbar.ts-navbar-type-transparent-hero .ts-navbar-row a:hover:not(.bg-solar-500) {
    color: #fcd34d !important;
}
/* En modo oscuro el logo claro (blanco) ya es visible por defecto;
   nos aseguramos que el logo claro se mantenga. */
html.dark #navbar.ts-navbar-type-transparent-hero .ts-logo-light { display: inline-block !important; }
html.dark #navbar.ts-navbar-type-transparent-hero .ts-logo-dark { display: none !important; }

/* Scrolled en modo oscuro: navbar oscuro sólido, texto claro */
html.dark #navbar.ts-navbar-type-transparent-hero.scrolled {
    background-color: rgba(15, 23, 42, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
html.dark #navbar.ts-navbar-type-transparent-hero.scrolled .ts-navbar-row { color: #fff; }
html.dark #navbar.ts-navbar-type-transparent-hero.scrolled .ts-navbar-inner a:not(.bg-solar-500):not(.ts-cart-badge):not(.ts-logo-text),
html.dark #navbar.ts-navbar-type-transparent-hero.scrolled .ts-navbar-row a:not(.bg-solar-500) {
    color: #f3f4f6 !important;
    text-shadow: none;
}
html.dark #navbar.ts-navbar-type-transparent-hero.scrolled .ts-navbar-inner a:hover:not(.bg-solar-500):not(.ts-cart-badge):not(.ts-logo-text),
html.dark #navbar.ts-navbar-type-transparent-hero.scrolled .ts-navbar-row a:hover:not(.bg-solar-500) {
    color: #fcd34d !important;
}
html.dark #navbar.ts-navbar-type-transparent-hero.scrolled .ts-logo-light { display: inline-block !important; }
html.dark #navbar.ts-navbar-type-transparent-hero.scrolled .ts-logo-dark { display: none !important; }

/* ---- Tipo: FLOATING (flotante, redondeado, sin tocar bordes) ---- */
#navbar.ts-navbar-type-floating {
    background-color: transparent;
    box-shadow: none;
}
#navbar.ts-navbar-type-floating .ts-navbar-inner {
    background: rgba(255,255,255,0.95);
    border-radius: 9999px;
    margin-top: 8px;
    box-shadow: 0 8px 24px -4px rgba(0,0,0,0.18);
    backdrop-filter: blur(8px);
    padding-left: 16px;
    padding-right: 16px;
}
#navbar.ts-navbar-type-floating.scrolled .ts-navbar-inner {
    box-shadow: 0 4px 12px -2px rgba(0,0,0,0.15);
}
html.dark #navbar.ts-navbar-type-floating .ts-navbar-inner {
    background: rgba(15,23,42,0.95);
}

/* ---- Tipo: OVERLAY-DARK (translúcido oscuro) ---- */
#navbar.ts-navbar-type-overlay-dark,
#navbar.ts-navbar-type-overlay-dark.scrolled {
    background-color: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
#navbar.ts-navbar-type-overlay-dark nav a,
#navbar.ts-navbar-type-overlay-dark > div a:not(.bg-solar-500) {
    color: #f9fafb;
}
#navbar.ts-navbar-type-overlay-dark a:hover:not(.bg-solar-500) {
    color: #fcd34d;
}

/* ============================================
   10 TIPOS NUEVOS DE NAVBAR (v20.0.10+)
   Variables CSS aplicables a todos los tipos:
   --ts-navbar-bg, --ts-navbar-text, --ts-navbar-text-hover,
   --ts-navbar-height, --ts-navbar-radius, --ts-navbar-blur,
   --ts-navbar-shadow, --ts-navbar-font-size, --ts-navbar-font-weight,
   --ts-navbar-gap, --ts-navbar-cta-bg, --ts-navbar-cart-color.
   Cada tipo puede usarlas o ignorarlas (con !important sobre las
   defaults del tipo). Si la variable no esta definida (Customizer
   vacio), se usa el valor por defecto del tipo.
   ============================================ */

/* ============================================
   LAYOUT DEL NAVBAR DESKTOP (v20.0.13+)
   - .ts-navbar-desktop: contenedor flex (hidden por defecto, visible en md+)
   - .ts-navbar-menu: gap entre links del menu (0.5rem default, editable)
   - font-weight del menu: 500 (medium) por defecto
   - Las clases Tailwind space-x-* y gap-* se eliminaron para que
     el control sea 100% via CSS variables editables desde el Customizer.
   Variables CSS:
     --ts-navbar-gap: gap entre links del menu (default 0.5rem)
     --ts-navbar-gap-groups: gap entre elementos del navbar (default 1.5rem)
   ============================================ */

/* Por defecto oculto (movil). Visible en desktop via media query. */
#navbar .ts-navbar-desktop {
    display: none;
    align-items: center;
    gap: var(--ts-navbar-gap-groups, 1.5rem);
    margin-left: auto;
}
@media (min-width: 768px) {
    #navbar .ts-navbar-desktop {
        display: flex;
    }
}
#navbar .ts-navbar-menu {
    display: flex;
    align-items: center;
    gap: var(--ts-navbar-gap, 0.5rem);
}
/* El menuwraper wp_nav_menu genera un <ul> con menu_class; los li heredam */
#navbar .ts-navbar-menu li,
#navbar .ts-navbar-menu a {
    font-family: var(--ts-font-ui, inherit);
}

/* ---- Aplicar variables globales (sobreescriben defaults si Customizer las define) ----
   Importante: los defaults SIEMPRE son los del tema original para que
   si el Customizer esta vacio el navbar se vea igual que antes. */
#navbar .ts-navbar-row {
    min-height: var(--ts-navbar-height, auto);
}
/* font-weight 500 (medium) por defecto (igual que font-medium de Tailwind) */
#navbar .ts-navbar-inner a:not(.bg-solar-500):not(.ts-cart-badge):not(.ts-logo-text),
#navbar .ts-navbar-menu a {
    font-size: var(--ts-navbar-font-size, inherit);
    font-weight: var(--ts-navbar-font-weight, 500);
}
#navbar .bg-solar-500 {
    background-color: var(--ts-navbar-cta-bg, #f59e0b);
}
#navbar #techo-cart-toggle,
#navbar .ts-cart-toggle-btn {
    color: var(--ts-navbar-cart-color, inherit);
}
/* Override de sombra si la variable esta definida (sino default del tipo) */
#navbar {
    box-shadow: var(--ts-navbar-shadow, 0 1px 3px rgba(0,0,0,0.06));
}
/* Override de background solo si --ts-navbar-bg esta definida (no vacia) */
#navbar.ts-navbar-type-solid,
#navbar.ts-navbar-type-floating .ts-navbar-inner,
#navbar.ts-navbar-type-overlay-dark,
#navbar.ts-navbar-type-glass,
#navbar.ts-navbar-type-minimal,
#navbar.ts-navbar-type-top-bar {
    background-color: var(--ts-navbar-bg, initial);
}
/* Override de blur solo si --ts-navbar-blur > 0 (sino respeta el tipo) */
#navbar.ts-navbar-type-solid,
#navbar.ts-navbar-type-glass,
#navbar.ts-navbar-type-transparent-blur {
    backdrop-filter: blur(var(--ts-navbar-blur, var(--ts-navbar-blur-default, 8px)));
}
/* Override de radio de bordes solo si > 0 */
#navbar, #navbar .ts-navbar-inner {
    border-radius: var(--ts-navbar-radius, 0px);
}

/* ---- Tipo: GLASS (glassmorphism) ---- */
#navbar.ts-navbar-type-glass {
    background-color: rgba(255,255,255,0.55);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow: 0 4px 20px -4px rgba(0,0,0,0.10);
    border-bottom: 1px solid rgba(255,255,255,0.4);
}
#navbar.ts-navbar-type-glass.scrolled {
    background-color: rgba(255,255,255,0.75);
}
html.dark #navbar.ts-navbar-type-glass {
    background-color: rgba(15,23,42,0.55);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
html.dark #navbar.ts-navbar-type-glass.scrolled {
    background-color: rgba(15,23,42,0.75);
}

/* ---- Tipo: GRADIENT-SOLAR (degradado ámbar-naranja) ---- */
#navbar.ts-navbar-type-gradient-solar,
#navbar.ts-navbar-type-gradient-solar.scrolled {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 50%, #f97316 100%);
    box-shadow: 0 2px 12px -2px rgba(234,88,12,0.4);
}
#navbar.ts-navbar-type-gradient-solar .ts-navbar-inner a:not(.bg-solar-500):not(.ts-cart-badge):not(.ts-logo-text),
#navbar.ts-navbar-type-gradient-solar .ts-navbar-row a:not(.bg-solar-500) {
    color: #ffffff;
    font-weight: 600;
}
#navbar.ts-navbar-type-gradient-solar a:hover:not(.bg-solar-500) {
    color: #fef3c7;
}
#navbar.ts-navbar-type-gradient-solar .ts-logo-light { display: inline-block !important; }
#navbar.ts-navbar-type-gradient-solar .ts-logo-dark { display: none !important; }

/* ---- Tipo: GRADIENT-DARK (degradado azul-negro) ---- */
#navbar.ts-navbar-type-gradient-dark,
#navbar.ts-navbar-type-gradient-dark.scrolled {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    box-shadow: 0 4px 16px -4px rgba(0,0,0,0.5);
}
#navbar.ts-navbar-type-gradient-dark .ts-navbar-inner a:not(.bg-solar-500):not(.ts-cart-badge):not(.ts-logo-text),
#navbar.ts-navbar-type-gradient-dark .ts-navbar-row a:not(.bg-solar-500) {
    color: #f1f5f9;
}
#navbar.ts-navbar-type-gradient-dark a:hover:not(.bg-solar-500) {
    color: #fcd34d;
}
#navbar.ts-navbar-type-gradient-dark .ts-logo-light { display: inline-block !important; }
#navbar.ts-navbar-type-gradient-dark .ts-logo-dark { display: none !important; }

/* ---- Tipo: BORDER-BOTTOM (solo linha inferior, sin fondo) ---- */
#navbar.ts-navbar-type-border-bottom {
    background-color: transparent;
    backdrop-filter: none;
    box-shadow: none;
    border-bottom: 2px solid #f59e0b;
}
#navbar.ts-navbar-type-border-bottom.scrolled {
    background-color: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
}
html.dark #navbar.ts-navbar-type-border-bottom.scrolled {
    background-color: rgba(15,23,42,0.92);
}
#navbar.ts-navbar-type-border-bottom .ts-logo-light { display: none !important; }
#navbar.ts-navbar-type-border-bottom .ts-logo-dark { display: inline-block !important; }

/* ---- Tipo: MINIMAL (sin sombra ni blur, fondo plano) ---- */
#navbar.ts-navbar-type-minimal,
#navbar.ts-navbar-type-minimal.scrolled {
    background-color: #ffffff;
    backdrop-filter: none;
    box-shadow: none;
    border-bottom: 1px solid #f3f4f6;
}
html.dark #navbar.ts-navbar-type-minimal,
html.dark #navbar.ts-navbar-type-minimal.scrolled {
    background-color: #0f172a;
    border-bottom: 1px solid #1e293b;
}

/* ---- Tipo: STICKY-PILL (píldora flotante que se reduce al scroll) ---- */
#navbar.ts-navbar-type-sticky-pill {
    background-color: transparent;
    box-shadow: none;
}
#navbar.ts-navbar-type-sticky-pill .ts-navbar-inner {
    background: rgba(255,255,255,0.95);
    border-radius: 9999px;
    margin: 10px 16px;
    padding: 6px 20px;
    box-shadow: 0 6px 20px -4px rgba(0,0,0,0.15);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}
#navbar.ts-navbar-type-sticky-pill.scrolled .ts-navbar-inner {
    margin: 4px 24px;
    padding: 4px 16px;
    box-shadow: 0 4px 12px -2px rgba(0,0,0,0.12);
}
html.dark #navbar.ts-navbar-type-sticky-pill .ts-navbar-inner {
    background: rgba(15,23,42,0.95);
}

/* ---- Tipo: DOUBLE-SHADOW (sólido con sombra profunda doble) ---- */
#navbar.ts-navbar-type-double-shadow,
#navbar.ts-navbar-type-double-shadow.scrolled {
    background-color: rgba(255,255,255,0.97);
    backdrop-filter: blur(6px);
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 6px 20px -4px rgba(0,0,0,0.10),
        0 12px 40px -8px rgba(0,0,0,0.08);
}
html.dark #navbar.ts-navbar-type-double-shadow,
html.dark #navbar.ts-navbar-type-double-shadow.scrolled {
    background-color: rgba(15,23,42,0.97);
    box-shadow:
        0 1px 2px rgba(0,0,0,0.2),
        0 6px 20px -4px rgba(0,0,0,0.3),
        0 12px 40px -8px rgba(0,0,0,0.25);
}

/* ---- Tipo: TRANSPARENT-BLUR (transparente, solo blur) ---- */
#navbar.ts-navbar-type-transparent-blur {
    background-color: transparent;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: none;
}
#navbar.ts-navbar-type-transparent-blur.scrolled {
    background-color: rgba(255,255,255,0.4);
}
html.dark #navbar.ts-navbar-type-transparent-blur.scrolled {
    background-color: rgba(15,23,42,0.4);
}

/* ---- Tipo: TOP-BAR (barra fina compacta) ---- */
#navbar.ts-navbar-type-top-bar {
    background-color: #ffffff;
    box-shadow: none;
    border-bottom: 1px solid #e5e7eb;
}
#navbar.ts-navbar-type-top-bar.scrolled {
    background-color: rgba(255,255,255,0.97);
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
#navbar.ts-navbar-type-top-bar .ts-navbar-row {
    height: 48px !important;
    min-height: 48px !important;
}
html.dark #navbar.ts-navbar-type-top-bar,
html.dark #navbar.ts-navbar-type-top-bar.scrolled {
    background-color: #0f172a;
    border-bottom-color: #1e293b;
}

/* ---- Tipo: AURORA (degradado multicolor animado) ---- */
#navbar.ts-navbar-type-aurora,
#navbar.ts-navbar-type-aurora.scrolled {
    background: linear-gradient(270deg, #f59e0b, #ea580c, #ec4899, #8b5cf6, #3b82f6, #f59e0b);
    background-size: 400% 400%;
    box-shadow: 0 4px 20px -4px rgba(139,92,246,0.3);
    animation: tsAurora 18s ease infinite;
}
@keyframes tsAurora {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
#navbar.ts-navbar-type-aurora .ts-navbar-inner a:not(.bg-solar-500):not(.ts-cart-badge):not(.ts-logo-text),
#navbar.ts-navbar-type-aurora .ts-navbar-row a:not(.bg-solar-500) {
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.25);
    font-weight: 600;
}
#navbar.ts-navbar-type-aurora a:hover:not(.bg-solar-500) {
    color: #fef9c3;
}
#navbar.ts-navbar-type-aurora .ts-logo-light { display: inline-block !important; }
#navbar.ts-navbar-type-aurora .ts-logo-dark { display: none !important; }
html.dark #navbar.ts-navbar-type-aurora,
html.dark #navbar.ts-navbar-type-aurora.scrolled {
    background: linear-gradient(270deg, #1e293b, #0f172a, #312e81, #1e1b4b, #0f172a, #1e293b);
    background-size: 400% 400%;
}
/* ---- Posiciones ---- */
/* between (default): logo izquierda, menú derecha */
#navbar.ts-navbar-pos-between .ts-navbar-row { justify-content: space-between; }

/* center: logo centrado arriba, menú abajo */
#navbar.ts-navbar-pos-center .ts-navbar-row {
    justify-content: center;
    flex-direction: column;
    height: auto;
    padding-top: 12px;
    padding-bottom: 4px;
}
#navbar.ts-navbar-pos-center .ts-navbar-row > div:first-child { margin-bottom: 8px; }
#navbar.ts-navbar-pos-center .ts-navbar-row > div:last-child { width: 100%; justify-content: center; }
#navbar.ts-navbar-pos-center { height: auto !important; }

/* left: todo a la izquierda */
#navbar.ts-navbar-pos-left .ts-navbar-row { justify-content: flex-start; gap: 1.5rem; }
#navbar.ts-navbar-pos-left .ts-navbar-row > div:first-child { margin-right: auto; }

/* right: todo a la derecha */
#navbar.ts-navbar-pos-right .ts-navbar-row { justify-content: flex-end; gap: 1.5rem; }
#navbar.ts-navbar-pos-right .ts-navbar-row > div:first-child { order: 2; margin-left: auto; }
#navbar.ts-navbar-pos-right .ts-navbar-row > div:last-child { order: 1; }

/* En modo transparent-hero o floating, el modo sin scroll no debe tener el logo light */
#navbar.ts-navbar-type-floating .ts-logo-light { display: none !important; }
#navbar.ts-navbar-type-floating.scrolled .ts-logo-light { display: inline-block !important; }
#navbar.ts-navbar-type-floating.scrolled .ts-logo-dark { display: none !important; }
#navbar.ts-navbar-type-overlay-dark .ts-logo-light { display: none !important; }
#navbar.ts-navbar-type-overlay-dark .ts-logo-dark { display: inline-block !important; }


/* ============================================
   FIX: mobile-menu links SIEMPRE legibles
   sin importar el tipo de navbar (transparent-hero,
   solid, floating, etc.)
   ============================================ */
#mobile-menu a {
    color: #374151 !important;
    text-shadow: none !important;
}
#mobile-menu a:hover {
    color: #ea580c !important;
}
html.dark #mobile-menu a {
    color: #e5e7eb !important;
}
html.dark #mobile-menu a:hover {
    color: #fcd34d !important;
}
/* Iconos del navbar en transparent-hero SIN scroll: blancos en desktop,
   ámbar en móvil (donde el navbar es sólido). */
#navbar.ts-navbar-type-transparent-hero:not(.scrolled) #dark-mode-toggle,
#navbar.ts-navbar-type-transparent-hero:not(.scrolled) #dark-mode-toggle-mobile,
#navbar.ts-navbar-type-transparent-hero:not(.scrolled) #mobile-menu-btn,
#navbar.ts-navbar-type-transparent-hero:not(.scrolled) #techo-cart-toggle {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
#navbar.ts-navbar-type-transparent-hero:not(.scrolled) #dark-mode-toggle:hover,
#navbar.ts-navbar-type-transparent-hero:not(.scrolled) #dark-mode-toggle-mobile:hover,
#navbar.ts-navbar-type-transparent-hero:not(.scrolled) #mobile-menu-btn:hover,
#navbar.ts-navbar-type-transparent-hero:not(.scrolled) #techo-cart-toggle:hover {
    color: #fcd34d !important;
    background-color: rgba(255, 255, 255, 0.12);
}
/* En móvil, override: ámbar porque el navbar es sólido */
@media (max-width: 767px) {
    #navbar.ts-navbar-type-transparent-hero:not(.scrolled) #dark-mode-toggle,
    #navbar.ts-navbar-type-transparent-hero:not(.scrolled) #dark-mode-toggle-mobile,
    #navbar.ts-navbar-type-transparent-hero:not(.scrolled) #mobile-menu-btn,
    #navbar.ts-navbar-type-transparent-hero:not(.scrolled) #techo-cart-toggle {
        color: #f59e0b !important;
        text-shadow: none !important;
    }
}

/* ============================================
   PÁGINA NOTICIAS (grid de posts)
   ============================================ */
.ts-news-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.ts-news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px -8px rgba(0,0,0,.12);
    border-color: #fbbf24;
}
.ts-news-card-imgwrap { display: block; }
.ts-news-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    background: #f3f4f6;
}
.ts-news-card-img--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
}
.ts-news-card-body {
    padding: 1.1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}
.ts-news-card-date {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ea580c;
    font-weight: 600;
    font-family: var(--ts-font-ui);
}
.ts-news-card-title {
    margin: 0;
    font-size: 1.15rem;
    font-family: var(--ts-font-title);
    font-weight: var(--ts-weight-title);
    line-height: 1.3;
}
.ts-news-card-title a {
    color: #111827;
    text-decoration: none;
}
.ts-news-card-title a:hover { color: #ea580c; }
.ts-news-card-excerpt {
    color: #4b5563;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    flex: 1;
}
.ts-news-card-readmore {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    font-family: var(--ts-font-ui);
    color: #ea580c;
    text-decoration: none;
    transition: color .15s ease;
}
.ts-news-card-readmore:hover { color: #f59e0b; }
html.dark .ts-news-card { background: #1f2937; border-color: #374151; }
html.dark .ts-news-card-title a { color: #f9fafb; }
html.dark .ts-news-card-excerpt { color: #9ca3af; }
html.dark .ts-news-card-img--ph { background: linear-gradient(135deg, #1f2937, #374151); }

/* Single post (noticia individual) */
.ts-single-news-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}
.ts-single-news-date {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ea580c;
    font-weight: 600;
}
.ts-single-news-title {
    font-family: var(--ts-font-title);
    font-weight: var(--ts-weight-title);
    font-size: 1.75rem;
    margin: 0.5rem 0;
    color: #111827;
}
.ts-single-news-img {
    width: 100%;
    max-height: 450px;
    object-fit: cover;
    border-radius: 1rem;
    margin-bottom: 2rem;
}
.ts-single-news-content { max-width: 780px; margin: 0 auto; }
html.dark .ts-single-news-title { color: #f9fafb; }
html.dark .ts-single-news-header { border-color: #374151; }

/* ============================================
   AVISO DE ENVÍO en el carrito (drawer + página)
   ============================================ */
.ts-cart-notice {
    font-size: 0.78rem;
    color: #6b7280;
    text-align: center;
    margin: 0.5rem 0 0.8rem;
    padding: 0.5rem 0.75rem;
    background: rgba(245, 158, 11, 0.08);
    border-radius: 0.5rem;
    border: 1px solid rgba(245, 158, 11, 0.15);
    line-height: 1.4;
}
html.dark .ts-cart-notice { color: #9ca3af; background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.2); }
.ts-cart-page-foot .ts-cart-notice { margin: 0.6rem 0 1rem; font-size: 0.85rem; }