/* ===========================================================================
   Tesauro ERP — tema visual
   ---------------------------------------------------------------------------
   Paleta y lenguaje visual alineados con sofihacloud.com (misma familia de
   productos): gradiente azul→violeta, tipografía Inter, superficies blancas
   con radio 12px y sombras suaves sobre neutros fríos.

   Se carga DESPUÉS de style.css y modern-improvements.css, así que redefine
   los colores heredados del template (#3867D6 / #8e44ad / #27ae60).
   =========================================================================== */

:root {
    /* -----------------------------------------------------------------------
       Redefinición de los tokens de modern-improvements.css.
       Esa hoja ya usa una escala tipo Tailwind; al reapuntar sus variables de
       marca, todo lo que ya estaba estilado adopta la paleta nueva sin tener
       que duplicar selectores ni pelear con la especificidad.
       ----------------------------------------------------------------------- */
    --primary-color: #2563EB;
    --primary-dark: #1D4ED8;
    --primary-light: #60A5FA;
    --primary-gradient: linear-gradient(to right, #2563EB, #9333EA);
    --secondary-color: #9333EA;
    --accent-color: #16A34A;

    /* Marca */
    --tsr-blue: #2563EB;
    --tsr-blue-dark: #1D4ED8;
    --tsr-purple: #9333EA;
    --tsr-purple-dark: #7E22CE;
    --tsr-indigo: #4F46E5;
    --tsr-gradient: linear-gradient(to right, #2563EB, #9333EA);
    --tsr-gradient-135: linear-gradient(135deg, #2563EB 0%, #9333EA 100%);

    /* Superficies frías */
    --tsr-soft: linear-gradient(to bottom right, #EFF6FF, #EEF2FF, #FAF5FF);
    --tsr-surface: #F9FAFB;
    --tsr-white: #FFFFFF;

    /* Tinta */
    --tsr-ink: #111827;
    --tsr-body: #4B5563;
    --tsr-muted: #6B7280;
    --tsr-line: #E5E7EB;

    /* Semánticos (mismos que usa el ERP para colorear módulos) */
    --tsr-primary: #2563EB;
    --tsr-success: #16A34A;

    /* Verde WhatsApp legible: el de marca (#25D366) con texto blanco da 1.98:1
       y no se lee. Este mantiene el tono y llega a 5.41:1, sirve tanto de
       fondo con texto blanco como de color de texto sobre blanco.
       El botón flotante conserva el verde de marca porque es sólo ícono. */
    --tsr-whatsapp: #157A3B;
    --tsr-whatsapp-dark: #11612F;
    --tsr-info: #0891B2;
    --tsr-warning: #F59E0B;
    --tsr-danger: #E11D48;
    --tsr-secondary: #64748B;

    /* Formas */
    --tsr-radius: 12px;
    --tsr-radius-sm: 8px;
    --tsr-radius-lg: 16px;
    --tsr-shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
    --tsr-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.05);
    --tsr-shadow-brand: 0 12px 28px -8px rgba(147, 51, 234, .28);
}

/* Tipografía --------------------------------------------------------------- */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--tsr-body);
    background: var(--tsr-white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    color: var(--tsr-ink);
    font-weight: 700;
    letter-spacing: -.02em;
}

/* ---------------------------------------------------------------------------
   Compatibilidad con el template original.
   style.css y testimonial-fix.css traen selectores más específicos (y algunos
   con !important) que fijan colores del tema anterior. Se igualan acá para que
   la paleta nueva gane sin tener que editar esas hojas.
   --------------------------------------------------------------------------- */

.feature .heading h2,
.service .heading h2,
.project .heading h2,
.testimonial .heading h2,
.team-member .heading h2,
.latest-blog .heading h2 {
    color: var(--tsr-ink) !important;
    font-weight: 700 !important;
    letter-spacing: -.025em;
}

.feature .heading h3,
.service .heading h3,
.project .heading h3,
.testimonial .heading h3,
.latest-blog .heading h3 {
    color: var(--tsr-body) !important;
    font-weight: 400 !important;
}

/* Franja de testimonios */
.testimonial {
    background: var(--tsr-soft) !important;
}

.testimonial .heading h2,
.testimonial-item h4 {
    color: var(--tsr-ink) !important;
}

/* Flechas de los carruseles */
.slide-carousel .owl-nav .owl-prev,
.slide-carousel .owl-nav .owl-next,
.service-carousel .owl-nav .owl-prev,
.service-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
    background: var(--tsr-gradient) !important;
    border-radius: var(--tsr-radius-sm) !important;
    color: #fff !important;
}

/* testimonial-fix.css fuerza font-weight 600 con !important sobre los títulos
   dentro de .page-content. Se recupera el peso 700 del sistema tipográfico. */
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
    font-weight: 700 !important;
    color: var(--tsr-ink);
}

/* Encabezados de sección --------------------------------------------------- */

.heading h2 {
    color: var(--tsr-ink);
    font-weight: 700;
    letter-spacing: -.025em;
}

.heading h3 {
    color: var(--tsr-body);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.7;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

/* Bajadas de sección -------------------------------------------------------- */

/* El template pinta el subtítulo de cada franja de gris #928f8f: 3.21:1 sobre
   blanco, por debajo del 4.5:1 que pide WCAG AA a 20px/500. El gris apagado de
   la paleta da 4.83:1 y mantiene la jerarquía respecto del título.

   Hay que repetir las ocho secciones porque el template las escribe como
   `.blog-area .heading h3` y una `.heading h3` suelta pierde por especificidad. */
.heading h3,
.feature .heading h3,
.corona-case .heading h3,
.service .heading h3,
.project .heading h3,
.pricing .heading h3,
.blog-area .heading h3,
.partner .heading h3,
.team .heading h3 {
    color: var(--tsr-muted);
}

/* Enlaces ------------------------------------------------------------------ */

/* Bootstrap deja los <a> sueltos en su celeste #007bff, que sobre blanco da
   3.98:1 y no llega al 4.5:1 que pide WCAG AA para texto normal. El azul de
   la paleta da 5.17:1 y además unifica el color de marca.
   Las tarjetas-enlace (.cap-card y las notas del blog) son bloques, no
   enlaces de texto: heredan el color del cuerpo y el destaque lo da el
   título, no el celeste. */
a {
    color: var(--tsr-blue);
}

a:hover,
a:focus {
    color: var(--tsr-purple-dark);
}

.cap-card,
.cap-card:hover,
.blog-item > a,
.blog-item > a:hover {
    color: var(--tsr-body);
}

/* Paginación: Bootstrap le pone su propia regla a .page-link, más específica
   que la del <a> suelto, así que hay que nombrarla aparte. */
.page-link {
    color: var(--tsr-blue);
    border-color: var(--tsr-line);
}

.page-link:hover {
    color: var(--tsr-purple-dark);
    background-color: #F5F3FF;
    border-color: var(--tsr-line);
}

.page-item.active .page-link {
    background: var(--tsr-blue);
    border-color: var(--tsr-blue);
    color: #fff;
}

/* Botones ------------------------------------------------------------------ */

.btn-primary,
.slider-text ul li a,
.read-more a {
    background: var(--tsr-gradient);
    border: 0;
    border-radius: var(--tsr-radius-sm);
    color: #fff;
    font-weight: 600;
    padding: 12px 24px;
    box-shadow: none;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-primary:hover,
.slider-text ul li a:hover,
.read-more a:hover {
    background: var(--tsr-gradient);
    filter: saturate(1.15);
    transform: translateY(-2px);
    box-shadow: var(--tsr-shadow-brand);
    color: #fff;
}

/* Navegación --------------------------------------------------------------- */

.navbar-area .nav-item .nav-link {
    color: var(--tsr-ink);
    font-weight: 500;
}

.navbar-area .nav-item .nav-link:hover,
.navbar-area .nav-item .nav-link.active {
    color: var(--tsr-purple);
}

.navbar-area .dropdown-menu {
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius);
    box-shadow: var(--tsr-shadow-lg);
    padding: 8px;
}

.navbar-area .dropdown-menu .nav-link {
    border-radius: var(--tsr-radius-sm);
    padding: 9px 14px;
}

.navbar-area .dropdown-menu .nav-link:hover {
    background: #F5F3FF;
    color: var(--tsr-purple);
}

/* Contacto como botón: es la acción, no una sección más. Sólo en escritorio;
   meanmenu (≤991px) clona este <ul> y ahí debe verse como un ítem cualquiera. */
@media (min-width: 992px) {
    .main-nav .navbar-nav > .nav-cta {
        margin-left: 10px;
    }

    .main-nav .navbar-nav > .nav-cta > .nav-link {
        background: var(--tsr-gradient);
        color: #fff !important;
        border-radius: 999px;
        padding: 9px 22px !important;
        box-shadow: 0 4px 14px rgba(37, 99, 235, .28);
        transition: transform .18s ease, box-shadow .18s ease;
    }

    .main-nav .navbar-nav > .nav-cta > .nav-link:hover {
        color: #fff !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(37, 99, 235, .36);
    }
}

/* Tramo justo: meanmenu suelta el mando en 992px pero el contenedor recién
   llega a 1140px en 1200px. Entre medio el menú no entra —se iba 128px— así
   que acá se comprime el espaciado y se oculta la bajada del logo.
   A partir de 1200px vuelve todo al tamaño pleno. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .main-nav nav .navbar-nav .nav-item > a {
        /* Con ocho ítems de primer nivel el menú necesitaba 53px más de los
           que hay a 992px. Bajar el margen y un punto de tipografía alcanza
           sin llegar a mandar el menú a hamburguesa en notebooks. */
        margin-left: 5px !important;
        margin-right: 5px !important;
        font-size: 14px;
    }

    .main-nav .navbar-nav > .nav-cta > .nav-link {
        padding: 8px 16px !important;
    }

    .main-nav .navbar-brand .brand-tagline {
        display: none;
    }

    .main-nav .navbar-brand img {
        max-width: 175px;
    }
}

/* ===========================================================================
   Hero del home
   =========================================================================== */

.hero {
    position: relative;
    overflow: hidden;
    padding: 92px 0 104px;
    background: linear-gradient(to bottom right, #F5F9FF 0%, #EEF2FF 48%, #FAF5FF 100%);
}

/* Halos difusos de fondo */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.hero-orb-a {
    width: 620px; height: 620px;
    top: -220px; right: -140px;
    background: rgba(147, 51, 234, .16);
}

.hero-orb-b {
    width: 560px; height: 560px;
    bottom: -260px; left: -180px;
    background: rgba(37, 99, 235, .16);
}

.hero .container { position: relative; z-index: 2; }

/* Chip superior */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    margin-bottom: 26px;
    border: 1px solid #DBEAFE;
    border-radius: 30px;
    background: rgba(255, 255, 255, .8);
    color: var(--tsr-blue);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 2px 10px rgba(37, 99, 235, .07);
}

.hero-badge .mdi { font-size: 17px; }

.hero-copy h1 {
    font-size: 56px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.035em;
    color: var(--tsr-ink);
    margin: 0 0 22px;
}

/* La última palabra del título se resalta con el gradiente de marca */
.hero-copy h1 .accent,
.hero-copy h1 em {
    font-style: normal;
    background: var(--tsr-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-copy p {
    font-size: 18px;
    line-height: 1.75;
    color: var(--tsr-body);
    max-width: 560px;
    margin: 0 0 32px;
}

/* Acciones */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 44px;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.hero-btn-primary {
    background: var(--tsr-gradient);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(147, 51, 234, .55);
}

.hero-btn-primary:hover {
    color: #fff;
    filter: saturate(1.12);
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -12px rgba(147, 51, 234, .6);
    text-decoration: none;
}

.hero-btn-ghost {
    background: #fff;
    color: var(--tsr-ink);
    border: 1px solid var(--tsr-line);
    box-shadow: var(--tsr-shadow);
}

.hero-btn-ghost:hover {
    color: var(--tsr-purple);
    border-color: #DDD6FE;
    transform: translateY(-2px);
    text-decoration: none;
}

/* Contadores: cifras reales del producto */
/* Los cuatro datos van en 2×2, no en fila.
   En fila con wrap entraban tres y el cuarto caía solo a una segunda línea:
   el bloque vive en media pantalla (.col-lg-6) y nunca hubo lugar para los
   cuatro. La grilla lo vuelve deliberado en vez de accidental. */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 36px;
    max-width: 430px;
}

.hero-stat-num {
    display: block;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
    background: var(--tsr-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-stat-label {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: var(--tsr-muted);
}

/* Ilustración flotando */
.hero-visual {
    position: relative;
    padding-left: 20px;
}

.hero-visual img {
    width: 100%;
    height: auto;
    animation: hero-float 7s ease-in-out infinite;
    will-change: transform;
}

@keyframes hero-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-16px) rotate(-.35deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-visual img { animation: none; }
}

@media (max-width: 991px) {
    .hero { padding: 64px 0 72px; }
    .hero-copy h1 { font-size: 40px; }
    .hero-copy p { font-size: 17px; }
    .hero-visual { padding-left: 0; margin-top: 46px; }
    .hero-stats { gap: 24px 32px; }
}

@media (max-width: 575px) {
    .hero-copy h1 { font-size: 32px; }
    .hero-badge { font-size: 12.5px; }
    .hero-btn { width: 100%; }
    .hero-stat-num { font-size: 28px; }
    /* Sigue en 2×2: las etiquetas son cortas y entran. El gap se achica
       para que no se toquen en pantallas de 360px. */
    .hero-stats { gap: 20px 18px; max-width: none; }
}

/* Marca en la barra de navegación ------------------------------------------ */

.navbar-brand.brand {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}

.navbar-brand.brand img {
    height: 38px;
    width: auto;
}

.brand-tagline {
    margin-top: 5px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--tsr-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 575px) {
    .brand-tagline { display: none; }
}

/* ===========================================================================
   Franjas del home
   ---------------------------------------------------------------------------
   El template resolvía cada franja con una foto de banco de imágenes y un velo
   oscuro encima. Se reemplazan por degradés de marca: mejor contraste, sin
   imágenes ajenas al producto y sin peso extra.
   =========================================================================== */

/* "Del mostrador al balance" */
.special {
    background: linear-gradient(to bottom right, #F5F9FF 0%, #EEF2FF 50%, #FAF5FF 100%) !important;
    padding: 88px 0;
}

.special .bg { display: none !important; }

.special h2 {
    color: var(--tsr-ink) !important;
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -.03em;
}

.special h3 {
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--tsr-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.special p { color: var(--tsr-body) !important; font-size: 17px; line-height: 1.8; }

/* Marco del video: mientras no haya video propio, una superficie de marca */
.special .video-section {
    position: relative;
    min-height: 380px;
    border-radius: var(--tsr-radius-lg);
    overflow: hidden;
    background: var(--tsr-gradient-135) !important;
    box-shadow: 0 24px 48px -20px rgba(79, 70, 229, .45);
}

.special .video-section-bg { background: transparent !important; opacity: 1 !important; }

.special .video-button {
    background: rgba(255, 255, 255, .18) !important;
    border: 2px solid rgba(255, 255, 255, .55);
    backdrop-filter: blur(2px);
}

/* Testimonios */
.testimonial {
    background: linear-gradient(to bottom right, #FAF5FF 0%, #EEF2FF 55%, #F5F9FF 100%) !important;
    padding: 88px 0;
}

.testimonial .testimonial-bg { display: none !important; }

.testimonial .heading h2 { color: var(--tsr-ink) !important; }
.testimonial .heading h3 { color: var(--tsr-body) !important; }

.testimonial-item {
    background: var(--tsr-white);
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius-lg);
    box-shadow: var(--tsr-shadow-lg);
    padding: 44px 40px 36px;
}

.testimonial-item .photo img {
    border: 3px solid #fff;
    box-shadow: 0 6px 16px -6px rgba(17, 24, 39, .25);
}

.testimonial-item .text p { color: var(--tsr-body) !important; font-size: 17px; line-height: 1.8; }
.testimonial-item .text h3 { color: var(--tsr-ink) !important; }
.testimonial-item .text h4 { color: var(--tsr-muted) !important; font-weight: 500; }

/* "Impulsá tu negocio hoy mismo" (el template la llama .cta) */
.cta {
    background: var(--tsr-gradient-135) !important;
    padding: 78px 0;
}

.cta .overlay { display: none !important; }
.cta h2 { color: #fff !important; font-size: 38px; letter-spacing: -.03em; }
.cta p { color: rgba(255, 255, 255, .92) !important; font-size: 17px; line-height: 1.8; }

.cta .read-more a,
.cta .btn,
.cta-box a.btn {
    background: #fff !important;
    color: var(--tsr-purple) !important;
    border: 0 !important;
    border-radius: 10px;
    font-weight: 700;
    padding: 15px 30px;
    box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .5);
}

.cta .read-more a:hover,
.cta .btn:hover,
.cta-box a.btn:hover {
    background: #fff !important;
    color: var(--tsr-blue) !important;
    transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   Portada de tarjeta con ícono (servicios, áreas y blog)
   --------------------------------------------------------------------------- */

.icon-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 190px;
    background: linear-gradient(135deg, #EFF6FF 0%, #EEF2FF 50%, #F5F3FF 100%);
    border-bottom: 1px solid var(--tsr-line);
    font-size: 62px;
    line-height: 1;
    color: transparent;
    background-clip: padding-box;
}

.icon-cover .mdi {
    background: var(--tsr-gradient-135);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform .3s ease;
}

.service-item:hover .icon-cover .mdi,
.project-item:hover .icon-cover .mdi,
.blog-item:hover .icon-cover .mdi {
    transform: scale(1.08);
}

/* Tarjetas de servicio, área y nota */
.service-item,
.project-item,
.blog-item {
    background: var(--tsr-white);
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--tsr-shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.service-item:hover,
.project-item:hover,
.blog-item:hover {
    background: var(--tsr-white) !important;
    border-color: #DDD6FE !important;
    box-shadow: var(--tsr-shadow-lg) !important;
    transform: translateY(-5px);
}

.service-item .text,
.project-item .text,
.blog-item .text {
    background: var(--tsr-white) !important;
    padding: 26px 24px 28px;
}

.service-item .text h3 a,
.project-item .text h3 a,
.blog-item h3 a {
    color: var(--tsr-ink) !important;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.service-item:hover .text h3 a,
.project-item:hover .text h3 a,
.blog-item:hover h3 a { color: var(--tsr-purple) !important; }

.service-item .text p,
.project-item .text p,
.blog-item p { color: var(--tsr-body) !important; font-size: 15px; line-height: 1.7; }

/* "Leer más" deja de ser una píldora azul plana */
.service-item .read-more a,
.project-item .read-more a,
.blog-item .read-more a {
    display: inline-block;
    padding: 0 !important;
    background: none !important;
    color: var(--tsr-blue) !important;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    box-shadow: none !important;
}

.service-item .read-more a::after,
.project-item .read-more a::after,
.blog-item .read-more a::after { content: " →"; }

.service-item .read-more a:hover,
.project-item .read-more a:hover,
.blog-item .read-more a:hover {
    background: none !important;
    color: var(--tsr-purple) !important;
    transform: none;
}

/* Fecha superpuesta de las notas */
.blog-item .date {
    background: var(--tsr-gradient) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 18px -8px rgba(147, 51, 234, .55);
}

/* ---------------------------------------------------------------------------
   Pie
   --------------------------------------------------------------------------- */

.footer-area {
    background: #0F172A !important;
    border-top: 3px solid transparent;
    border-image: var(--tsr-gradient) 1;
}

.footer-item h3 {
    color: #fff !important;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.footer-item ul li a,
.footer-item p,
.footer-item li { color: rgba(255, 255, 255, .72) !important; }

.footer-item ul li a:hover { color: #fff !important; }

.footer-social-link ul li a {
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 10px !important;
    color: #fff !important;
    transition: all .25s ease;
}

.footer-social-link ul li a:hover {
    background: var(--tsr-gradient) !important;
    border-color: transparent !important;
    transform: translateY(-2px);
}

.copyright,
.copyright p,
.copyright a { color: rgba(255, 255, 255, .6) !important; }

.copyright a:hover { color: #fff !important; }

/* Botón de volver arriba */
.scroll-top {
    background: var(--tsr-gradient) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px -10px rgba(147, 51, 234, .6);
}

/* Slider ------------------------------------------------------------------- */

/* El arte de fondo ya es vectorial y viene con su propio contraste, así que
   el velo gris #222 del template sobra: se cambia por un tinte de marca leve. */
.slider-bg {
    background: linear-gradient(120deg, rgba(11,16,32,.55) 0%, rgba(37,99,235,.20) 55%, rgba(147,51,234,.28) 100%) !important;
    opacity: 1 !important;
}

.slider-item {
    background-position: center center !important;
}

.slider-text h1 {
    color: #fff;
    font-weight: 800;
    letter-spacing: -.03em;
    text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

.slider-text p,
.slider-text .text {
    color: rgba(255,255,255,.92);
    font-size: 17px;
    line-height: 1.75;
    text-shadow: 0 1px 12px rgba(0,0,0,.3);
}

.slider-text ul li a {
    box-shadow: 0 10px 26px -10px rgba(0,0,0,.55);
}

/* Portada grande en páginas de detalle -------------------------------------- */

.icon-cover-hero {
    height: 260px;
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius-lg);
    font-size: 92px;
}

/* Ícono en listas de barra lateral */
.side-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, #EFF6FF, #F5F3FF);
    border: 1px solid var(--tsr-line);
    font-size: 20px;
    flex: 0 0 auto;
}

.side-icon::before {
    background: var(--tsr-gradient-135);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sidebar .type-2 ul li {
    display: flex;
    align-items: center;
}

/* Banner de página --------------------------------------------------------- */

/* El template traía una foto de banco de imágenes con un velo encima. Se
   reemplazó primero por el degradé de marca saturado, y eso resolvió el
   problema de las fotos ajenas pero dejó otro: una banda oscura, centrada y
   vacía en cada página interior, que no se parecía en nada al hero.

   El sitio quedaba con dos lenguajes. Ahora el banner usa el mismo que el
   hero —fondo clarísimo, halos difusos, texto a la izquierda en tinta— así
   que pasar del home a cualquier sección no cambia de mundo. */
.page-banner {
    background: var(--tsr-soft) !important;
    padding: 62px 0 58px !important;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--tsr-line);
}

/* Halos difusos, como los del hero */
.page-banner::before,
.page-banner::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.page-banner::before {
    width: 460px; height: 460px;
    top: -230px; right: -90px;
    background: rgba(147, 51, 234, .14);
}

.page-banner::after {
    width: 380px; height: 380px;
    bottom: -240px; left: -110px;
    background: rgba(37, 99, 235, .13);
}

/* Centrado: ninguna de las 39 vistas que usan el banner mete un .container
   adentro, así que alineado a la izquierda el título quedaba contra el borde
   de la ventana en vez de a la altura del contenido. */
.page-banner .text {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 !important;
}

/* El velo del template ya no aplica: el fondo es claro */
.page-banner .bg-page { display: none; }

.page-banner .text h1 {
    color: var(--tsr-ink);
    font-size: clamp(28px, 4.4vw, 40px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
    max-width: 900px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.page-banner .breadcrumb {
    justify-content: center !important;
    background: transparent;
    padding: 0;
    margin: 0 0 12px;
    font-size: 13.5px;
}

.page-banner .breadcrumb-item,
.page-banner .breadcrumb-item.active {
    color: var(--tsr-muted);
}

.page-banner .breadcrumb-item a {
    color: var(--tsr-blue-dark);
}

.page-banner .breadcrumb-item a:hover {
    color: var(--tsr-purple-dark);
}

.page-banner .breadcrumb-item + .breadcrumb-item::before {
    color: var(--tsr-line);
}

/* La miga de pan va arriba del título: primero dónde estoy, después qué es */
.page-banner .text {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 10px;
}

@media (max-width: 767px) {
    .page-banner { padding: 44px 0 40px !important; }
}

/* Secciones con fondo suave ------------------------------------------------ */

.feature {
    background: var(--tsr-soft);
}

.feature + .feature {
    background: var(--tsr-white);
}

.service {
    background: var(--tsr-surface);
}

/* Tarjeta de circuito (why choose) ----------------------------------------- */

.feature-item {
    background: var(--tsr-white);
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius);
    padding: 26px 24px;
    box-shadow: var(--tsr-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}

.feature-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--tsr-shadow-lg);
}

.feature-item h4 {
    color: var(--tsr-ink);
    font-size: 18px;
    font-weight: 700;
}

.feature-item p {
    color: var(--tsr-body);
    font-size: 15px;
    line-height: 1.65;
}

/* Las tarjetas del recorrido operativo venían pintadas con el color de marca
   (general_settings.theme_color = #00356A) mediante un <style> en línea con
   !important, lo que dejaba el texto gris ilegible sobre azul marino.
   Se pasan a tarjeta blanca sobre el degradé frío de la sección: el color lo
   aportan las baldosas de ícono. Hace falta un selector con un elemento más
   para ganarle al !important de ese bloque en línea. */
.feature div.feature-item {
    background: var(--tsr-white) !important;
    background-color: var(--tsr-white) !important;
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius);
    padding: 30px 24px;
    color: var(--tsr-body) !important;
    box-shadow: var(--tsr-shadow);
}

/* style.css pinta background:#333 en el hover de casi todo. Sobre una tarjeta
   clara eso la vuelve negra y el texto deja de leerse: la tarjeta se mantiene
   blanca y el hover se expresa con elevación y borde. */
.feature div.feature-item:hover {
    background: var(--tsr-white) !important;
    background-color: var(--tsr-white) !important;
    border-color: #DDD6FE;
    box-shadow: var(--tsr-shadow-lg);
    transform: translateY(-4px);
}

.feature div.feature-item:hover h4 {
    color: var(--tsr-purple) !important;
}

.feature div.feature-item:hover p {
    color: var(--tsr-body) !important;
}

/* Mismo problema en el resto de los hovers heredados del template.
   Los botones pasan al gradiente de marca en vez de al gris oscuro. */
.btn-arf:hover,
.service .read-more a:hover,
.project .read-more a:hover,
.blog-area .read-more a:hover,
.pricing .btn:hover,
.scroll-top:hover {
    background: var(--tsr-gradient) !important;
    color: #fff !important;
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu li a:hover {
    background: #F5F3FF !important;
    color: var(--tsr-purple) !important;
}

.corona-case .corona-case-item:hover {
    background: var(--tsr-white) !important;
}

.slide-carousel .owl-nav .owl-prev:hover,
.slide-carousel .owl-nav .owl-next:hover,
.owl-carousel .owl-nav .owl-prev:hover,
.owl-carousel .owl-nav .owl-next:hover {
    background: var(--tsr-gradient) !important;
    filter: saturate(1.15);
}

.feature div.feature-item h4 {
    color: var(--tsr-ink) !important;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 10px;
}

.feature div.feature-item p {
    color: var(--tsr-body) !important;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 0;
}

/* ===========================================================================
   Tarjetas de módulo y capacidad
   =========================================================================== */

.cap-intro {
    font-size: 17px;
    line-height: 1.75;
    color: var(--tsr-body);
    max-width: 860px;
    margin: 0 0 30px;
}

.cap-card {
    display: flex;
    flex-direction: column;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 26px 24px;
    background: var(--tsr-white);
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius);
    box-shadow: var(--tsr-shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.cap-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tsr-shadow-lg);
    border-color: #DDD6FE;
    text-decoration: none;
}

.cap-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--tsr-ink);
    margin: 0 0 10px;
    line-height: 1.35;
}

.cap-card:hover h3 {
    color: var(--tsr-purple);
}

.cap-card p {
    flex: 1 1 auto;
    font-size: 15px;
    line-height: 1.65;
    color: var(--tsr-body);
    margin: 0 0 16px;
}

.cap-more {
    font-size: 14px;
    font-weight: 600;
    color: var(--tsr-blue);
}

.cap-more::after {
    content: " →";
}

/* Baldosa de ícono — identidad visual real del módulo en el ERP ------------- */

.cap-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: var(--tsr-radius);
    font-size: 26px;
    line-height: 1;
    color: #fff;
    background: var(--tsr-gradient-135);
    box-shadow: 0 6px 14px -6px rgba(147,51,234,.5);
}

.cap-icon.is-primary   { background: linear-gradient(135deg, #3B82F6, #2563EB); box-shadow: 0 6px 14px -6px rgba(37,99,235,.55); }
.cap-icon.is-success   { background: linear-gradient(135deg, #22C55E, #16A34A); box-shadow: 0 6px 14px -6px rgba(22,163,74,.5); }
.cap-icon.is-info      { background: linear-gradient(135deg, #22D3EE, #0891B2); box-shadow: 0 6px 14px -6px rgba(8,145,178,.5); }
.cap-icon.is-warning   { background: linear-gradient(135deg, #FBBF24, #F59E0B); box-shadow: 0 6px 14px -6px rgba(245,158,11,.5); }
.cap-icon.is-danger    { background: linear-gradient(135deg, #FB7185, #E11D48); box-shadow: 0 6px 14px -6px rgba(225,29,72,.5); }
.cap-icon.is-secondary { background: linear-gradient(135deg, #94A3B8, #64748B); box-shadow: 0 6px 14px -6px rgba(100,116,139,.5); }

.cap-icon-lg {
    width: 76px;
    height: 76px;
    font-size: 38px;
    border-radius: var(--tsr-radius-lg);
}

/* Navegación entre secciones de capacidades -------------------------------- */

.cap-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--tsr-line);
}

.cap-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--tsr-line);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tsr-body);
    background: var(--tsr-white);
    transition: all .25s ease;
}

.cap-nav-item:hover {
    border-color: #C4B5FD;
    color: var(--tsr-purple);
    text-decoration: none;
}

.cap-nav-item.is-active {
    background: var(--tsr-gradient);
    border-color: transparent;
    color: #fff;
}

.cap-nav-count {
    display: inline-block;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 20px;
    background: #EEF2FF;
    color: var(--tsr-indigo);
    font-size: 12px;
    text-align: center;
}

.cap-nav-item.is-active .cap-nav-count {
    background: rgba(255,255,255,.22);
    color: #fff;
}

/* Llamado a la acción ------------------------------------------------------- */

.cap-cta {
    margin-top: 40px;
    padding: 28px 30px;
    background: var(--tsr-soft);
    border: 1px solid #E9D5FF;
    border-radius: var(--tsr-radius);
}

.cap-cta p {
    font-size: 16px;
    color: var(--tsr-ink);
    font-weight: 500;
    margin: 0 0 16px;
}

/* Cabecera de la ficha ------------------------------------------------------ */

.cap-head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.cap-head h2 {
    margin: 0;
}

.sidebar .type-2 ul li a.is-active {
    color: var(--tsr-purple);
    font-weight: 700;
}

/* Tarjeta de módulo en el listado ------------------------------------------- */

/* Las tarjetas se igualan en alto dentro de cada fila. La columna de Bootstrap
   ya se estira —la fila es flex—, pero la tarjeta era display:block con alto
   automatico y quedaba corta: en una fila de tres, un modulo con descripcion
   larga empujaba a 432px y el de al lado se quedaba en 381px, con el boton a
   distinta altura. Con flex vertical la tarjeta llena la columna y el resumen
   absorbe la diferencia, asi que "Consultar" y el boton apoyan siempre abajo.
   El 80px que se descuenta es el margin-bottom que separa fila de fila. */
.product-item {
    display: flex;
    flex-direction: column;
    height: calc(100% - 80px);
    background: var(--tsr-white);
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius);
    padding: 26px 24px;
    box-shadow: var(--tsr-shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.product-item .text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* El resumen es lo unico elastico: crece hasta emparejar y deja el precio y el
   boton pegados al pie. */
.product-item .text .cap-card-desc { flex: 1 1 auto; }

.product-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--tsr-shadow-lg);
    border-color: #DDD6FE;
}

.product-item .text h3 a {
    color: var(--tsr-ink);
    font-size: 18px;
    font-weight: 700;
}

.product-item:hover .text h3 a {
    color: var(--tsr-purple);
}

.cap-card-desc {
    font-size: 15px;
    line-height: 1.65;
    color: var(--tsr-body);
    margin: 8px 0 14px;
}

/* Botones del listado (carrito / consultar) --------------------------------- */

/* style.css usa .product-item .text .cart-button a — se iguala la especificidad. */
.product-item .text .cart-button a,
.product-item .text .cart-button button,
.product-item .text .cart-button input[type="submit"] {
    background: var(--tsr-gradient);
    border: 0;
    border-radius: var(--tsr-radius-sm);
    color: #fff;
    font-weight: 600;
    padding: 11px 20px;
    transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}

.product-item .text .cart-button a:hover,
.product-item .text .cart-button button:hover,
.product-item .text .cart-button input[type="submit"]:hover {
    filter: saturate(1.15);
    transform: translateY(-2px);
    box-shadow: var(--tsr-shadow-brand);
    color: #fff;
}

.product-item .text .cart-button a.stock-empty {
    background: var(--tsr-surface);
    color: var(--tsr-muted);
    border: 1px solid var(--tsr-line);
}

/* Precio a consultar -------------------------------------------------------- */

.price-ask {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 30px;
    background: #EEF2FF;
    color: var(--tsr-indigo);
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .cap-nav-item { padding: 8px 14px; font-size: 13px; }
    .cap-head { gap: 14px; }
    .cap-icon-lg { width: 60px; height: 60px; font-size: 30px; }
}

/* Caso real de un cliente, en la ficha del rubro ---------------------------- */

.cap-caso {
    margin-top: 38px;
    padding: 28px 30px;
    background: var(--tsr-white);
    border: 1px solid var(--tsr-line);
    border-left: 4px solid var(--tsr-purple);
    border-radius: var(--tsr-radius);
    box-shadow: var(--tsr-shadow);
}

.cap-caso-label {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tsr-purple);
}

.cap-caso blockquote {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    font-size: 17px;
    line-height: 1.8;
    color: var(--tsr-ink);
}

.cap-caso-firma strong {
    display: block;
    color: var(--tsr-ink);
    font-size: 15px;
}

.cap-caso-firma span {
    font-size: 14px;
    color: var(--tsr-muted);
}

/* ===========================================================================
   Planes de contratación
   =========================================================================== */

.plan-aviso {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-left: 4px solid #9E6606;
    border-radius: var(--tsr-radius);
    padding: 14px 18px;
    margin-bottom: 26px;
    color: #713F12;
    font-size: 14.5px;
}

/* El argumento contra los competidores multi-tenant */
.plan-claim {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    background: var(--tsr-soft);
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius-lg);
    padding: 28px 30px;
    margin-bottom: 34px;
}

.plan-claim-icon {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: var(--tsr-gradient);
    color: #fff;
    font-size: 26px;
    box-shadow: var(--tsr-shadow-brand);
}

.plan-claim h2 { font-size: 22px; margin: 0 0 8px; color: var(--tsr-ink); }
.plan-claim p  { margin: 0; color: var(--tsr-body); font-size: 15.5px; line-height: 1.7; }

/* Tarjetas de plan ---------------------------------------------------------- */

.pricing-table { margin-top: 30px; }

.pricing-table .plan {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius-lg);
    padding: 30px 24px 26px;
    margin-bottom: 26px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.pricing-table .plan:hover {
    transform: translateY(-4px);
    box-shadow: var(--tsr-shadow-lg);
}

/* El destacado: borde de marca y elevación, sin invertir el fondo —el texto
   sobre gradiente perdía contraste en las viñetas. */
.pricing-table .plan-featured {
    border: 2px solid var(--tsr-blue);
    box-shadow: var(--tsr-shadow-brand);
}

.plan-badge {
    position: absolute;
    top: -13px; left: 50%;
    transform: translateX(-50%);
    background: var(--tsr-gradient);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.plan-header h3 {
    font-size: 21px;
    font-weight: 700;
    color: var(--tsr-ink);
    margin: 0 0 6px;
}

.plan-tagline {
    font-size: 14px;
    color: var(--tsr-muted);
    line-height: 1.55;
    min-height: 44px;
    margin: 0;
}

.plan-price {
    padding: 20px 0 18px;
    margin: 16px 0 4px;
    border-top: 1px solid var(--tsr-line);
    border-bottom: 1px solid var(--tsr-line);
}

.plan-price .price {
    display: block;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--tsr-ink);
    line-height: 1.1;
}

.plan-price .price-unit { font-size: 20px; font-weight: 700; margin-right: 2px; }
.plan-price .price-ask  { font-size: 26px; color: var(--tsr-blue); }

.plan-price .price-label {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: var(--tsr-muted);
}

.plan-features { flex: 1 1 auto; padding: 18px 0 8px; }

.plan-features ul { list-style: none; margin: 0; padding: 0; }

.plan-features li {
    position: relative;
    padding: 7px 0 7px 26px;
    font-size: 14.5px;
    color: var(--tsr-body);
    line-height: 1.5;
}

.plan-features li::before {
    content: "";
    position: absolute;
    left: 2px; top: 13px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--tsr-blue);
}

.plan-footer { padding-top: 6px; }
.plan-footer .btn { width: 100%; text-align: center; }

/* Cómo sigue después de contratar ------------------------------------------ */

.plan-nota {
    background: var(--tsr-surface);
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius-lg);
    padding: 30px;
    margin: 20px 0 34px;
}

.plan-nota h3 { font-size: 20px; color: var(--tsr-ink); margin: 0 0 16px; }
.plan-nota ol { margin: 0 0 16px; padding-left: 20px; }
.plan-nota li { color: var(--tsr-body); font-size: 15px; line-height: 1.75; padding: 3px 0; }
.plan-nota p  { margin: 0; color: var(--tsr-muted); font-size: 14.5px; line-height: 1.7; }

/* Accesos a los rubros ------------------------------------------------------ */

.plan-rubros { margin-bottom: 40px; }
.plan-rubros h3 { font-size: 20px; color: var(--tsr-ink); margin: 0 0 6px; }
.plan-rubros > p { color: var(--tsr-muted); margin: 0 0 18px; font-size: 15px; }

.plan-rubros-grid { display: flex; flex-wrap: wrap; gap: 10px; }

/* Los chips en blanco puro se perdían contra el fondo: 21 rectángulos sin
   peso. Un tono muy suave y el ícono en su propia pastilla los vuelven
   objetos, sin restarle legibilidad al texto —que pasa a tinta plena. */
.plan-rubro-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 18px 7px 8px;
    border: 1px solid #DCE4F5;
    border-radius: 999px;
    background: linear-gradient(to bottom, #FFFFFF 0%, #F2F6FE 100%);
    box-shadow: 0 1px 2px rgba(16, 34, 74, .05);
    color: var(--tsr-ink) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    transition: border-color .18s ease, background .18s ease,
                box-shadow .18s ease, transform .18s ease;
}

/* Pastilla del ícono: le da el punto de color sin teñir el texto */
.plan-rubro-chip .mdi {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #E4ECFC;
    color: var(--tsr-blue-dark);
    font-size: 15px;
    transition: background .18s ease, color .18s ease;
}

.plan-rubro-chip:hover {
    border-color: var(--tsr-blue);
    background: linear-gradient(to bottom, #FFFFFF 0%, #E9F0FF 100%);
    box-shadow: 0 6px 14px -6px rgba(37, 99, 235, .35);
    transform: translateY(-2px);
}

.plan-rubro-chip:hover .mdi {
    background: var(--tsr-gradient);
    color: #fff;
}

@media (max-width: 767px) {
    .plan-claim { flex-direction: column; gap: 16px; }
    .plan-tagline { min-height: 0; }
}

/* Los desplegables de los últimos ítems abren hacia adentro.
   "Recursos" quedó lo bastante a la derecha como para que su menú de 250px
   se saliera de la ventana y apareciera barra horizontal. Alineándolo al
   borde derecho del ítem, se despliega sobre el contenido y no fuera. */
@media (min-width: 992px) {
    .main-nav .navbar-nav > .nav-item:nth-last-child(-n+3) .dropdown-menu {
        left: auto;
        right: 0;
    }
}

/* Implementación + abono en la tarjeta de plan --------------------------- */

.plan-setup {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dashed var(--tsr-line);
}

.plan-setup-label { font-size: 12px; color: var(--tsr-muted); text-transform: uppercase; letter-spacing: .04em; }
.plan-setup-price { font-size: 19px; font-weight: 700; color: var(--tsr-body); }

/* Cómo se compone --------------------------------------------------------- */

.plan-desglose { margin: 12px 0 34px; }
.plan-desglose h3 { font-size: 20px; color: var(--tsr-ink); margin: 0 0 6px; }
.plan-desglose > p { color: var(--tsr-body); font-size: 15px; margin: 0 0 18px; line-height: 1.7; }

.plan-tabla { width: 100%; border-collapse: separate; border-spacing: 0; }

.plan-tabla thead th {
    background: var(--tsr-surface);
    color: var(--tsr-ink);
    font-size: 13.5px;
    font-weight: 700;
    text-align: right;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tsr-line);
}

.plan-tabla thead th:first-child { text-align: left; border-radius: var(--tsr-radius-sm) 0 0 0; }
.plan-tabla thead th:last-child  { border-radius: 0 var(--tsr-radius-sm) 0 0; }
.plan-tabla thead small { font-weight: 400; color: var(--tsr-muted); font-size: 11.5px; }

.plan-tabla td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--tsr-line);
    text-align: right;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--tsr-ink);
    white-space: nowrap;
}

.plan-tabla td:first-child { text-align: left; font-weight: 400; white-space: normal; }
.plan-tabla td strong { display: block; color: var(--tsr-ink); font-size: 15px; }
.plan-tabla td span   { display: block; color: var(--tsr-muted); font-size: 13px; line-height: 1.5; margin-top: 2px; }

.plan-tabla .fila-destacada td { background: #F5F8FF; }

.plan-tabla-nota { margin-top: 12px; color: var(--tsr-muted); font-size: 13.5px; line-height: 1.6; }

/* Complementos ------------------------------------------------------------ */

.plan-complementos { margin-bottom: 34px; }
.plan-complementos h3 { font-size: 20px; color: var(--tsr-ink); margin: 0 0 6px; }
.plan-complementos > p { color: var(--tsr-body); font-size: 15px; margin: 0 0 20px; }

.complemento {
    height: 100%;
    background: #fff;
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius-lg);
    padding: 24px;
    margin-bottom: 22px;
}

.complemento-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }

.complemento-head .mdi {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: var(--tsr-gradient);
    color: #fff;
    font-size: 20px;
}

.complemento-head h4 { margin: 0; font-size: 17px; color: var(--tsr-ink); }
.complemento-texto { color: var(--tsr-body); font-size: 14.5px; line-height: 1.65; margin: 0 0 16px; }

.complemento-opciones { list-style: none; margin: 0; padding: 0; }

.complemento-opciones li {
    padding: 12px 0;
    border-top: 1px solid var(--tsr-line);
}

.complemento-linea { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.complemento-label  { font-size: 14.5px; font-weight: 600; color: var(--tsr-ink); }
.complemento-precio { font-size: 14.5px; font-weight: 700; color: var(--tsr-blue); white-space: nowrap; }
.complemento-detalle { display: block; margin-top: 4px; font-size: 13px; color: var(--tsr-muted); line-height: 1.55; }

/* Bootstrap pinta <code> de rosa #E83E8C: 3.68:1, por debajo del mínimo.
   En el aviso de precios va sobre fondo ámbar claro, así que toma el mismo
   marrón que el resto del bloque. */
.plan-aviso code {
    color: #713F12;
    background: rgba(113, 63, 18, .08);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .92em;
}

/* Referencia en dólares junto al precio en pesos.
   El negocio define en USD y publica en ARS; mostrar los dos deja claro que
   el peso es una conversión con fecha, no un precio que se congeló. */
.plan-usd {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tsr-muted);
    letter-spacing: .02em;
}

.plan-tabla td em {
    display: block;
    font-style: normal;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tsr-muted);
    margin-top: 2px;
}

.plan-tabla td .sin-cargo {
    display: block;
    font-size: 14px;
    font-weight: 500;
    /* --tsr-success da 3.3:1 sobre blanco. El verde legible llega a 5.41:1. */
    color: var(--tsr-whatsapp);
}

.plan-desglose .sub-desglose {
    margin-top: 30px;
}

/* Con ocho ítems de primer nivel, el menú tampoco entra a 1280px: el
   contenedor llega a 1140px pero el logo con su bajada más los ocho ítems
   piden 36px de más. Se comprime apenas el espaciado hasta 1400px, donde ya
   sobra lugar y vuelve al tamaño pleno. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .main-nav nav .navbar-nav .nav-item > a {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
}

/* ===========================================================================
   Solicitud de contratación de un plan
   =========================================================================== */

.solicitud { margin: 34px 0 50px; }

/* Resumen del plan, a la izquierda */
.solicitud-resumen {
    background: var(--tsr-soft);
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius-lg);
    padding: 28px;
    margin-bottom: 26px;
}

.solicitud-rotulo {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tsr-blue-dark);
    margin-bottom: 6px;
}

.solicitud-resumen h2 { font-size: 25px; margin: 0 0 6px; color: var(--tsr-ink); }
.solicitud-tagline { color: var(--tsr-body); font-size: 15px; line-height: 1.6; margin: 0 0 20px; }

.solicitud-precio {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    padding: 18px 0;
    border-top: 1px solid var(--tsr-line);
    border-bottom: 1px solid var(--tsr-line);
    margin-bottom: 18px;
}

.solicitud-precio-label {
    display: block;
    font-size: 12px;
    color: var(--tsr-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 3px;
}

.solicitud-precio strong { display: block; font-size: 21px; color: var(--tsr-ink); line-height: 1.2; }
.solicitud-precio em { display: block; font-style: normal; font-size: 12.5px; color: var(--tsr-muted); margin-top: 2px; }

.solicitud-incluye { list-style: none; margin: 0 0 18px; padding: 0; }

.solicitud-incluye li {
    position: relative;
    padding: 6px 0 6px 24px;
    font-size: 14.5px;
    color: var(--tsr-body);
    line-height: 1.5;
}

.solicitud-incluye li::before {
    content: "";
    position: absolute;
    left: 2px; top: 12px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--tsr-blue);
}

.solicitud-nota {
    margin: 0;
    font-size: 13.5px;
    color: var(--tsr-muted);
    line-height: 1.65;
}

/* Formulario, a la derecha */
.solicitud-form {
    background: #fff;
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius-lg);
    padding: 30px;
    box-shadow: var(--tsr-shadow);
}

.solicitud-form h3 { font-size: 21px; margin: 0 0 5px; color: var(--tsr-ink); }
.solicitud-bajada { color: var(--tsr-body); font-size: 15px; margin: 0 0 22px; }

.solicitud-form .form-group { margin-bottom: 18px; }

.solicitud-form label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--tsr-ink);
    margin-bottom: 6px;
}

.solicitud-form label span { color: var(--tsr-danger); }

.solicitud-form .form-control {
    height: auto;
    padding: 11px 14px;
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius-sm);
    font-size: 15px;
    color: var(--tsr-ink);
    background: #fff;
}

.solicitud-form textarea.form-control { min-height: 120px; }

.solicitud-form .form-control:focus {
    border-color: var(--tsr-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
    outline: none;
}

.solicitud-form small { display: block; margin-top: 5px; font-size: 12.5px; color: var(--tsr-muted); }

.solicitud-error { display: block; margin-top: 5px; font-size: 13px; color: var(--tsr-danger); }

.solicitud-alerta {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-left: 4px solid var(--tsr-danger);
    border-radius: var(--tsr-radius-sm);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14.5px;
    color: #7F1D1D;
}

.solicitud-enviar { width: 100%; padding: 14px 24px !important; font-size: 16px; }

/* La trampa para bots tiene que ser invisible pero existir en el formulario:
   display:none haría que algunos navegadores no la envíen. */
.solicitud-trampa {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* ── Gracias ─────────────────────────────────────────────────────────────── */

.gracias {
    max-width: 620px;
    margin: 60px auto 80px;
    text-align: center;
}

.gracias-icono {
    width: 74px; height: 74px;
    margin: 0 auto 22px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--tsr-gradient);
    color: #fff;
    font-size: 34px;
    box-shadow: var(--tsr-shadow-brand);
}

.gracias h1 { font-size: 32px; margin: 0 0 8px; color: var(--tsr-ink); }

.gracias-plan {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 999px;
    background: #EEF2FF;
    color: var(--tsr-blue-dark);
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 18px;
}

.gracias-texto { color: var(--tsr-body); font-size: 16.5px; line-height: 1.7; margin: 0 0 28px; }

.gracias-acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.btn-outline-plan {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius-sm);
    background: #fff;
    color: var(--tsr-body) !important;
    font-weight: 600;
    transition: border-color .18s ease, color .18s ease;
}

.btn-outline-plan:hover { border-color: var(--tsr-blue); color: var(--tsr-blue) !important; }

@media (max-width: 767px) {
    .solicitud-precio { grid-template-columns: 1fr; gap: 14px; }
    .solicitud-form { padding: 22px; }
    .gracias-acciones .btn, .gracias-acciones .btn-outline-plan { width: 100%; text-align: center; }
}

/* "desde" en los conceptos que tienen piso y se cotizan según el caso */
.plan-tabla td .valor-desde {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--tsr-muted);
}

/* El widget de reCAPTCHA v2 mide 304px fijos: en pantallas angostas se sale
   de la tarjeta, así que se le deja su propio scroll. */
.solicitud-captcha { overflow-x: auto; }

/* Capturas del sistema dentro del contenido -------------------------------- */

/* Una captura de pantalla sin marco parece un error de maquetación. El marco,
   la sombra y el pie la convierten en lo que es: una muestra del producto. */
.captura {
    margin: 26px 0 30px;
}

.captura img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius);
    box-shadow: var(--tsr-shadow-lg);
    background: #fff;
}

.captura figcaption {
    margin-top: 11px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--tsr-muted);
}

.captura figcaption strong {
    color: var(--tsr-ink);
    font-weight: 600;
}

/* Ficha de área: capacidades en grilla ---------------------------------------
   La lista venía como <ul> con viñetas, en una sola columna: mucho alto, mucho
   blanco al costado y aire de documento viejo. En grilla ocupa el ancho, se
   lee de un vistazo y acompaña a las capturas que van abajo.

   Se ataca el <ul> que viene dentro del contenido, que es el único de la ficha:
   las <figure class="captura"> son hermanas, no descendientes. */

.area-cuerpo > ul {
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

.area-cuerpo > ul > li {
    position: relative;
    margin: 0;
    padding: 15px 18px 15px 46px;
    background: var(--tsr-white);
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius-lg);
    color: var(--tsr-body);
    font-size: 15px;
    line-height: 1.55;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.area-cuerpo > ul > li:hover {
    border-color: #C7D2FE;
    box-shadow: var(--tsr-shadow);
    transform: translateY(-2px);
}

/* Tilde dibujado con bordes: la fuente de íconos está reducida a los glifos
   que usa el sitio, y agregar uno nuevo obligaría a regenerar el subset. */
.area-cuerpo > ul > li::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 21px;
    width: 11px;
    height: 6px;
    border-left: 2px solid var(--tsr-success);
    border-bottom: 2px solid var(--tsr-success);
    transform: rotate(-45deg);
}

.area-cuerpo > p {
    font-size: 17px;
    line-height: 1.75;
    color: var(--tsr-body);
    margin: 0 0 24px;
}

@media (prefers-reduced-motion: reduce) {
    .area-cuerpo > ul > li { transition: none; }
    .area-cuerpo > ul > li:hover { transform: none; }
}

@media (max-width: 575px) {
    .area-cuerpo > ul { grid-template-columns: 1fr; }
}

/* Miniatura de pantalla en la tarjeta del listado ----------------------------
   Las fichas que tienen captura muestran la pantalla en vez del ícono. En
   /punto-de-venta es el argumento entero: las tres consolas son distintas y
   con un ícono las tres se ven iguales.

   La imagen sangra hasta los bordes de la tarjeta —de ahí el margen negativo—
   así se lee como encabezado y no como una foto pegada adentro. */

.cap-card-foto {
    padding-top: 0;
    overflow: hidden;
}

.cap-thumb {
    display: block;
    margin: 0 -24px 20px;
    background: var(--tsr-surface);
    border-bottom: 1px solid var(--tsr-line);
}

.cap-thumb img {
    display: block;
    width: 100%;
    height: auto;
    /* La captura es apaisada y muy ancha; recortada arriba se ve la zona que
       distingue a cada consola sin que la tarjeta quede desproporcionada. */
    aspect-ratio: 16 / 8;
    object-fit: cover;
    object-position: top center;
    transition: transform .35s ease;
}

.cap-card-foto:hover .cap-thumb img {
    transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .cap-thumb img { transition: none; }
    .cap-card-foto:hover .cap-thumb img { transform: none; }
}

/* La cabecera de nota lleva título y fecha apilados junto al ícono, así que
   el bloque de texto crece hacia abajo y no debe centrarse contra la baldosa. */
.cap-head > div {
    min-width: 0;
}

.cap-head h3 {
    margin: 6px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--tsr-muted);
}

/* Prueba visual junto al precio -----------------------------------------------
   La primera tarjeta ocupa el ancho completo y las otras cuatro van de a dos:
   así la franja no se lee como una grilla uniforme de cinco cosas iguales y
   la primera —el punto de venta— entra con el peso que le corresponde. */

.plan-pruebas {
    margin-top: 56px;
}

.plan-pruebas-bajada {
    max-width: 62ch;
    margin: 0 0 26px;
    color: var(--tsr-body);
}

.plan-pruebas-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.plan-pruebas-grid > :first-child {
    grid-column: 1 / -1;
}

.plan-prueba {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--tsr-white);
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius-lg);
    box-shadow: var(--tsr-shadow);
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.plan-prueba:hover,
.plan-prueba:focus-visible {
    transform: translateY(-3px);
    border-color: #C7D2FE;
    box-shadow: var(--tsr-shadow-lg);
    text-decoration: none;
}

.plan-prueba-img {
    display: block;
    background: var(--tsr-surface);
    border-bottom: 1px solid var(--tsr-line);
}

/* Sin recorte: son capturas de 1500x~700, y recortarlas por abajo se comía
   justo la fila de teclas de función y el total del punto de venta, que es
   la parte que más muestra de qué se trata. Todas tienen prácticamente la
   misma proporción, así que las tarjetas quedan parejas igual. */
.plan-prueba-img img {
    display: block;
    width: 100%;
    height: auto;
}

.plan-prueba-texto {
    display: block;
    padding: 18px 20px 20px;
}

.plan-prueba-texto strong {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    color: var(--tsr-ink);
}

.plan-prueba-texto > span {
    display: block;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--tsr-body);
}

.plan-prueba-mas {
    margin-top: 10px;
    font-weight: 600;
    color: var(--tsr-blue);
}

.plan-prueba-mas::after {
    content: " →";
}

@media (prefers-reduced-motion: reduce) {
    .plan-prueba { transition: none; }
    .plan-prueba:hover { transform: none; }
}

@media (max-width: 575px) {
    .plan-pruebas-grid { grid-template-columns: 1fr; }
}

/* Preguntas frecuentes -------------------------------------------------------
   Veinte preguntas venían cada una con el degradado de marca de fondo. El
   color pasa a aparecer sólo en la que está abierta: el resto queda en blanco
   sobre línea fina, y la página deja de gritar. */

.faq-intro {
    margin-bottom: 34px;
    padding: 28px 30px;
    background: var(--tsr-soft);
    border: 1px solid #E0E7FF;
    border-radius: var(--tsr-radius-lg);
}

.faq-intro h2 {
    margin: 0 0 10px;
    font-size: 22px;
    color: var(--tsr-ink);
}

.faq-intro p {
    max-width: 72ch;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--tsr-body);
}

.faq-lista {
    display: grid;
    gap: 10px;
}

.faq-item {
    background: var(--tsr-white);
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius-lg);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.faq-item.abierta {
    border-color: #C7D2FE;
    box-shadow: var(--tsr-shadow);
}

.faq-titulo {
    margin: 0;
    font-size: inherit;
}

.faq-pregunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    padding: 17px 22px;
    background: none;
    border: 0;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--tsr-ink);
    cursor: pointer;
    transition: background .18s ease;
}

.faq-pregunta:hover {
    background: var(--tsr-surface);
}

.faq-pregunta:focus-visible {
    outline: 2px solid var(--tsr-blue);
    outline-offset: -2px;
}

.faq-item.abierta .faq-pregunta {
    color: var(--tsr-blue-dark);
}

/* Flecha dibujada con bordes: la fuente de íconos está reducida a los glifos
   que ya usa el sitio y sumar uno obligaría a regenerar el subset. */
.faq-flecha {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tsr-surface);
    position: relative;
    transition: background .2s ease, transform .25s ease;
}

.faq-flecha::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--tsr-blue);
    border-bottom: 2px solid var(--tsr-blue);
    transform: rotate(45deg);
}

.faq-item.abierta .faq-flecha {
    background: var(--tsr-blue);
    transform: rotate(180deg);
}

.faq-item.abierta .faq-flecha::before {
    border-color: #fff;
}

.faq-respuesta {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.faq-respuesta-cuerpo {
    padding: 2px 22px 22px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--tsr-body);
}

.faq-respuesta-cuerpo p,
.faq-respuesta-cuerpo li {
    color: var(--tsr-body);
}

.faq-respuesta-cuerpo p:last-child {
    margin-bottom: 0;
}

.faq-respuesta-cuerpo ul {
    margin: 10px 0 0;
    padding-left: 20px;
}

.faq-respuesta-cuerpo li {
    margin-bottom: 8px;
}

/* Restos del editor viejo: <font> con su propia tipografía y color. */
.faq-respuesta-cuerpo font {
    font-family: inherit !important;
    color: inherit !important;
}

.faq-cierre {
    margin-top: 46px;
    padding: 36px 34px;
    background: var(--tsr-soft);
    border: 1px solid #E0E7FF;
    border-radius: var(--tsr-radius-lg);
    text-align: center;
}

.faq-cierre h3 {
    margin: 0 0 10px;
    font-size: 21px;
    color: var(--tsr-ink);
}

.faq-cierre p {
    max-width: 56ch;
    margin: 0 auto 22px;
    color: var(--tsr-body);
}

.faq-cierre-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* Verde de marca legible: el #25D366 con texto blanco da 1.98:1. */
.btn-whatsapp,
.btn-whatsapp:visited {
    background: var(--tsr-whatsapp);
    border: 1px solid var(--tsr-whatsapp);
    color: #fff;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus {
    background: var(--tsr-whatsapp-dark);
    border-color: var(--tsr-whatsapp-dark);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .faq-item,
    .faq-flecha,
    .faq-respuesta,
    .faq-pregunta { transition: none; }
}

@media (max-width: 575px) {
    .faq-intro,
    .faq-cierre { padding: 24px 20px; }
    .faq-pregunta { padding: 15px 16px; font-size: 15px; }
    .faq-respuesta-cuerpo { padding: 2px 16px 18px; }
}

/* Separación entre bloques de /planes ----------------------------------------
   "Se contratan aparte" quedaba pegado a las capturas de arriba y se leía como
   si fuera el pie de las imágenes. Cada bloque abre con aire y una línea fina,
   que es lo que avisa que empieza otra cosa. */

.plan-pruebas + .plan-complementos,
.plan-complementos + .plan-nota,
.plan-nota + .plan-rubros {
    margin-top: 58px;
    padding-top: 44px;
    border-top: 1px solid var(--tsr-line);
}

@media (max-width: 767px) {
    .plan-pruebas + .plan-complementos,
    .plan-complementos + .plan-nota,
    .plan-nota + .plan-rubros {
        margin-top: 40px;
        padding-top: 32px;
    }
}

/* Secciones de la FAQ --------------------------------------------------------
   El tono va por grupo, no por pregunta. Es la diferencia entre color que
   informa —en qué parte de la página estás— y color que decora. Cada sección
   se anuncia con su baldosa de ícono, la misma que usan las capacidades, y la
   pregunta abierta toma el tono de su grupo. */

.faq-grupo + .faq-grupo {
    margin-top: 40px;
}

.faq-grupo-titulo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--tsr-line);
    font-size: 19px;
    color: var(--tsr-ink);
}

.faq-grupo-titulo .cap-icon {
    flex: none;
}

.faq-grupo-cuenta {
    margin-left: auto;
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--tsr-surface);
    border: 1px solid var(--tsr-line);
    font-size: 13px;
    font-weight: 600;
    color: var(--tsr-muted);
    font-variant-numeric: tabular-nums;
}

/* Tono por sección. Sólo se pinta la pregunta abierta y su flecha; el resto
   queda en blanco, que es lo que mantiene la página tranquila. */
/*                          texto/flecha   borde abierta  fondo cerrada  fondo al pasar */
.faq-grupo.is-primary   { --faq-tono: #2563EB; --faq-borde: #C7D2FE; --faq-fondo: #F6F9FE; --faq-fondo-hover: #EDF3FD; }
.faq-grupo.is-info      { --faq-tono: #0E7490; --faq-borde: #A5F3FC; --faq-fondo: #F4FBFC; --faq-fondo-hover: #E8F6F9; }
.faq-grupo.is-success   { --faq-tono: #15803D; --faq-borde: #BBF7D0; --faq-fondo: #F5FBF7; --faq-fondo-hover: #EAF7EF; }
.faq-grupo.is-warning   { --faq-tono: #B45309; --faq-borde: #FDE68A; --faq-fondo: #FEFAF4; --faq-fondo-hover: #FDF4E8; }
.faq-grupo.is-secondary { --faq-tono: #475569; --faq-borde: #CBD5E1; --faq-fondo: #F8FAFB; --faq-fondo-hover: #F1F4F7; }
.faq-grupo.is-danger    { --faq-tono: #BE123C; --faq-borde: #FECDD3; --faq-fondo: #FEF7F8; --faq-fondo-hover: #FDEDF0; }

/* La cerrada lleva el tono suave de su sección; la abierta pasa a blanco.
   Se invierte a propósito: la que estás leyendo se levanta del resto y el
   texto largo de la respuesta cae sobre blanco, que es donde mejor se lee. */
.faq-grupo .faq-item {
    background: var(--faq-fondo);
}

.faq-grupo .faq-item.abierta {
    background: var(--tsr-white);
    border-color: var(--faq-borde);
}

.faq-grupo .faq-pregunta:hover {
    background: var(--faq-fondo-hover);
}

.faq-grupo .faq-item.abierta .faq-pregunta:hover {
    background: var(--tsr-surface);
}

/* Sobre el tono, un círculo gris se ensucia: la flecha va en blanco. */
.faq-grupo .faq-flecha {
    background: var(--tsr-white);
}

.faq-grupo .faq-item.abierta {
    border-color: var(--faq-borde);
}

.faq-grupo .faq-item.abierta .faq-pregunta {
    color: var(--faq-tono);
}

.faq-grupo .faq-flecha::before {
    border-color: var(--faq-tono);
}

.faq-grupo .faq-item.abierta .faq-flecha {
    background: var(--faq-tono);
}

.faq-grupo .faq-item.abierta .faq-flecha::before {
    border-color: #fff;
}

.faq-grupo .faq-pregunta:focus-visible {
    outline-color: var(--faq-tono);
}

@media (max-width: 575px) {
    .faq-grupo-titulo { font-size: 17px; gap: 11px; }
}

/* Aclaración de precios -------------------------------------------------------
   Es letra chica, pero no puede ser ilegible: es donde dice que los valores
   son más IVA y a qué cotización están los pesos. Se le da un fondo propio
   para que se lea como una nota y no como un pie olvidado. */

.nota-precios {
    margin: 0;
    padding: 14px 16px;
    background: var(--tsr-surface);
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius-sm);
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--tsr-body);
}

.nota-precios strong {
    color: var(--tsr-ink);
    font-weight: 600;
}

/* En la ficha de contratación la nota va bajo los dos importes, dentro del
   panel del resumen, así que respira un poco más arriba. */
.solicitud-resumen .nota-precios {
    margin-top: 18px;
    background: var(--tsr-white);
}

/* Fecha en el listado del blog ------------------------------------------------
   Discreta pero presente: es lo que dice que el sitio se mueve. */

.blog-fecha {
    margin: -4px 0 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--tsr-muted);
    font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   Centro de Ayuda (/centro-de-ayuda)
   ---------------------------------------------------------------------------
   La página es larga y sin capturas entre medio se leería como una lista de
   listas. Se apoya en tres formas distintas —bloques con ícono, etiquetas y
   tarjetas numeradas— para que cada sección se distinga de la anterior de un
   vistazo, sin inventar una paleta nueva: los colores y los radios salen de
   los tokens que ya usan las fichas de capacidad.
   =========================================================================== */

.ayuda-titulo {
    margin: 48px 0 14px;
    font-size: 24px;
    font-weight: 700;
    color: var(--tsr-ink);
    text-wrap: balance;
}

/* La tesis de arriba lleva dos párrafos y .plan-claim p los deja sin
   separación. Sólo acá hace falta el aire entre ellos. */
.plan-claim p + p { margin-top: 12px; }

/* Dónde vive -------------------------------------------------------------- */

.ayuda-superficies {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 34px;
}

.ayuda-superficie {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 22px 24px;
    background: var(--tsr-white);
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius);
    box-shadow: var(--tsr-shadow);
}

/* La baldosa de ícono trae margen inferior para las tarjetas verticales;
   acá va al lado del texto y ese margen la descuadra. */
.ayuda-superficie .cap-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-bottom: 0;
    font-size: 22px;
    border-radius: var(--tsr-radius-sm);
}

.ayuda-superficie strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    color: var(--tsr-ink);
}

.ayuda-superficie span {
    display: block;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--tsr-body);
}

/* Quién ve qué ------------------------------------------------------------ */

.ayuda-audiencias {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.ayuda-audiencia {
    padding: 8px 16px;
    background: var(--tsr-surface);
    border: 1px solid var(--tsr-line);
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--tsr-body);
}

/* Los quince temas -------------------------------------------------------- */

.ayuda-temas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.ayuda-tema {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px;
    background: var(--tsr-white);
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius);
}

/* El número ordena la lectura, no la decora: es el paso del circuito. Va en
   gris y no en color de marca para no competir con el título del tema. */
.ayuda-tema-n {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tsr-surface);
    border: 1px solid var(--tsr-line);
    font-size: 13px;
    font-weight: 600;
    color: var(--tsr-muted);
    font-variant-numeric: tabular-nums;
}

.ayuda-tema strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15.5px;
    color: var(--tsr-ink);
}

.ayuda-tema span:not(.ayuda-tema-n) {
    display: block;
    font-size: 14px;
    line-height: 1.65;
    color: var(--tsr-body);
}

/* Y no se desactualiza ---------------------------------------------------- */

.ayuda-clave {
    margin-top: 44px;
    padding: 28px 30px;
    background: var(--tsr-soft);
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius-lg);
}

.ayuda-clave h3 {
    margin: 0 0 10px;
    font-size: 21px;
    font-weight: 700;
    color: var(--tsr-ink);
}

.ayuda-clave p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--tsr-body);
}

.ayuda-clave p + p { margin-top: 12px; }

@media (max-width: 575px) {
    .ayuda-titulo { font-size: 21px; margin-top: 38px; }
    .ayuda-superficie,
    .ayuda-tema { padding: 18px; }
}

/* ===========================================================================
   Home — la tesis (debajo del hero) y el cierre de instalación propia
   ---------------------------------------------------------------------------
   El titular del hero afirma que el sistema debería ser uno solo. Estas dos
   piezas son la prueba y el diferencial: la primera muestra que la gestión y
   la venta online son el mismo dato; la segunda, que ese dato es tuyo.
   =========================================================================== */

/* .feature (la franja siguiente) va sobre el degradado suave. Esta queda en
   blanco para que las dos no se lean como una sola mancha. */
.tesis {
    background: var(--tsr-white);
    padding: 70px 0 60px;
}

/* Las tres promesas en negativo -------------------------------------------
   Van antes del titulo de seccion porque hablan de como trabaja el lector
   hoy, no del producto. Sin icono a proposito: un tilde verde delante de una
   frase que empieza con "Sin" se lee al reves. */

.tesis-sin {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 0;
    margin-bottom: 54px;
}

.tesis-sin span {
    padding: 0 28px;
    font-size: 17px;
    font-weight: 600;
    color: var(--tsr-ink);
    text-align: center;
}

.tesis-sin span + span {
    border-left: 1px solid var(--tsr-line);
}

/* El template centra .heading solo dentro de .feature, .service, .project y
   companhia. Sin esto el h2 queda a la izquierda mientras el h3 se centra
   solo (lleva margin auto), y la franja no alinea con ninguna otra del home. */
.tesis .heading {
    text-align: center;
}

/* El subtitulo de esta franja necesita entrar en la lista de la regla de
   contraste de arriba, o el template lo pinta de #928f8f (3.21:1). */
.tesis .heading h3 {
    color: var(--tsr-body) !important;
    font-weight: 400 !important;
}

/* Los tres bloques -------------------------------------------------------- */

.tesis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 24px;
    margin-top: 34px;
}

.tesis-bloque {
    padding: 30px 28px;
    background: var(--tsr-white);
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius-lg);
    box-shadow: var(--tsr-shadow);
}

/* El tercero no es un tercero mas de la fila: es el que sostiene el titular.
   Los dos primeros los ofrece cualquier competidor. */
.tesis-bloque.is-clave {
    background: var(--tsr-soft);
    border-color: #C7D2FE;
}

.tesis-bloque h4 {
    margin: 0 0 16px;
    font-size: 19px;
    font-weight: 700;
    color: var(--tsr-ink);
}

.tesis-bloque ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tesis-bloque li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--tsr-body);
}

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

.tesis-bloque li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tsr-primary);
}

.tesis-bloque.is-clave li::before { background: var(--tsr-success); }

/* Cierre de la tesis: las integraciones ------------------------------------
   Es el parrafo que explica por que "ecosistema" y "un solo sistema" dicen lo
   mismo. Va centrado y angosto: es una idea, no una lista, y a 860px de ancho
   se lee de un tiron. */

.tesis-cierre {
    max-width: 760px;
    margin: 44px auto 0;
    padding: 28px 32px;
    background: var(--tsr-surface);
    border: 1px solid var(--tsr-line);
    border-radius: var(--tsr-radius-lg);
    text-align: center;
}

.tesis-cierre p {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: var(--tsr-body);
}

.tesis-cierre p + p { margin-top: 12px; }

.tesis-cierre strong { color: var(--tsr-ink); }

.tesis-cierre a {
    display: inline-block;
    margin-top: 16px;
    font-weight: 600;
    color: var(--tsr-primary);
}

.tesis-cierre a::after { content: " →"; }

/* El cierre: tu propia instalación ----------------------------------------
   Reusa .plan-claim, el bloque que abre /planes, para que el mismo argumento
   tenga la misma forma en las dos páginas. */

.home-claim {
    background: var(--tsr-white);
    padding: 20px 0 60px;
}

.home-claim .plan-claim { margin-bottom: 0; }

.home-claim-mas {
    margin-top: 14px !important;
    font-weight: 600;
}

.home-claim-mas a { color: var(--tsr-primary); }
.home-claim-mas a::after { content: " →"; }

@media (max-width: 767px) {
    .tesis { padding: 50px 0 40px; }
    .tesis-sin { gap: 12px; }
    .tesis-sin span { padding: 0; font-size: 16px; }
    .tesis-sin span + span { border-left: 0; }
}

/* Cuerpo del bloque `special` del home ------------------------------------
   Antes el texto salia dentro de un <p> del template y heredaba su tipografia.
   Ahora va en un <div> con sus propios parrafos, asi que hay que darles el
   mismo tratamiento que tenian. */

.special-text p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--tsr-body);
}

.special-text p:last-child { margin-bottom: 22px; }

.special-text strong { color: var(--tsr-ink); font-weight: 600; }

/* Listado de módulos: todas las tarjetas del mismo alto --------------------
   Con la fila de Bootstrap las tarjetas se emparejaban dentro de cada fila
   pero no entre filas: 440px arriba, 389px abajo, y el boton "Solicitar
   informacion" a distinta altura segun donde cayera el modulo.

   La grilla con grid-auto-rows:1fr iguala todas las filas a la mas alta, asi
   que las doce quedan del mismo alto. Las columnas de Bootstrap siguen en el
   HTML —las necesita el panel si alguien edita la vista— pero acá se neutraliza
   su ancho y su padding, que ahora los maneja la grilla. */

.modulos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 30px;
}

.modulos-grid > [class*="col-"] {
    max-width: none;
    width: auto;
    flex: none;
    padding-left: 0;
    padding-right: 0;
}

.modulos-grid .product-item {
    height: 100%;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .modulos-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .modulos-grid { grid-template-columns: 1fr; }
}

/* Captura al costado del bloque `special` del home ------------------------
   Reemplaza al boton de play que apuntaba a un video de la etapa Desktop. */

.special-shot {
    display: block;
    border-radius: var(--tsr-radius-lg);
    overflow: hidden;
    border: 1px solid var(--tsr-line);
    box-shadow: var(--tsr-shadow-lg);
    background: var(--tsr-white);
    transition: transform .25s ease, box-shadow .25s ease;
}

.special-shot:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px -12px rgba(17, 24, 39, .22);
}

.special-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.special-shot span {
    display: block;
    padding: 13px 18px;
    border-top: 1px solid var(--tsr-line);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tsr-primary);
}

.special-shot span::after { content: " →"; }