@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Reseteo del botón para que no parezca un botón tradicional */
html {
    scroll-behavior: smooth;
}

body {
    background-color: #f9f9f9; /* Un gris muy sutil para que los paneles destaquen */
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding-top: 100px !important;
}

body::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 1.1rem !important; /* Cubre el hueco exacto del techo en el móvil */
    background-color: #f9f9f9 !important;
    z-index: 1020 !important;
    pointer-events: none !important;
}

.navbar ,
.toggler-text,
button,
input,
select,
textarea {
    font-family: 'Montserrat', sans-serif;
}

.contenedor-principal {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 2.5rem; /* Separación sutil entre paneles */
}

.panel {
    padding: 4rem 3rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

/* 1. INICIO (Conecta con el rojo del menú) */
.panel-inicio {
    background-color: #eb464c;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 5rem; /* Gran separación entre los bloques internos para que no agobie */
    margin-top: 0.5rem;
}

/* Tipografía general interna */
.panel-inicio h1, .panel-inicio h2, .panel-inicio h3 {
    margin-top: 0;
    line-height: 1.3;
}

/* 1. HERO (Introducción) */
.inicio-hero {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 0;
}
.inicio-hero h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
}
.inicio-hero .subtitulo {
    font-size: 1.3rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
    font-weight: 600;
}
.inicio-hero .descripcion-principal {
    font-size: 1.1rem;
    opacity: 0.85;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

/* El Botón destacado (CTA) */
.boton-cta {
    display: inline-block;
    background-color: #ffffff;
    color: #eb464c; /* El texto del botón toma el color del fondo */
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.boton-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* 2. GRID DE DOS COLUMNAS (Historia y Filosofía) */
.inicio-grid-dos-columnas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

/* 2. SOLUCIONES (Limpio para explicar tus servicios) */
.panel-blanco {
    background-color: #ffffff;
    color: #333333;
}
.panel-blanco h2 {
    color: #dd4b39; /* Títulos en tu rojo */
}

/* 3. PRECIOS (Gris neutro) */
.panel-gris {
    background-color: #f0f0f0;
    color: #333333;
}
.panel-gris h2 {
    color: #757575;
}

/* 4. CONTACTO (Cierre corporativo elegante) */
.panel-contacto {
    background-color: #bf2327;
    color: #ffffff;
}

.navbar {
    background: linear-gradient(to right, #ffffff 30%, #dd4b39 100%) !important;
    padding: 0.75rem 2rem !important; /* Reducido un pelín para que no ocupe tanta pantalla al ser fijo */
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    /* Corrección del Fixed: */
    width: calc(100% - 40px); /* Evita que choque con los bordes del navegador */
    max-width: 1160px; /* Se alinea perfectamente con tu .contenedor-principal de 1200px */
    margin: 1rem auto 0 auto !important; /* Lo separa del techo del navegador flotando con estilo */
    left: 0;
    right: 0;
}

.navbar a {
    color: #ffffff; /* Texto blanco para que resalte sobre el fondo rojo */
    text-decoration: none;
    font-weight: bold;
    padding: 0.5rem 1rem;
}

/* En teléfonos móviles, forzamos a que los enlaces sean visibles (Color Gris Oscuro/Negro) */
.navbar .nav-link {
    color: #757575 !important; /* Tu gris corporativo para que se lea bien en móvil */
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 1rem;
    display: inline-block; /* Evita que el enlace se colapse a 0 píxeles de ancho */
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #dd4b39 !important; /* Al pasar el ratón en móvil se vuelve tu rojo */
    padding-left: 1.25rem; /* Pequeño desplazamiento interactivo hacia la derecha */
}

.navbar-toggler {
    border: none;
    background: transparent;
    outline: none;
    display: block;
    flex-direction: row;/* Centrado vertical para móvil */
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    margin: 0;
}
.navbar-toggler:focus {
    box-shadow: none;
}

/* Estilos de la palabra MENÚ */
.toggler-text {
    font-size: 0.75rem;         /* Tamaño de letra pequeño y sutil */
    font-weight: bold;
    letter-spacing: 0.5px;     /* Espaciado entre letras elegante */
    color: #dd4b39;     /* Hereda el color de texto del navbar */
    position: absolute;
    margin-top: -5px;         /* Separación respecto al logo */
    margin-left: -25px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    order: 2;
    letter-spacing: 0.5px;
    line-height: 1;
    display: block;
    text-align: center;
    padding-left: 1.5rem;
}

/* Cuando el menú está ABIERTO (el botón NO tiene la clase .collapsed) */
.navbar-toggler:not(.collapsed) .navbar-logo,
.navbar-toggler:not(.collapsed) .logo-giratorio,
.navbar-toggler:not(.collapsed) .logo-grid-giratorio {
    transform: rotate(360deg);
}

/* 2. El texto se desvanece y se desplaza ligeramente hacia abajo */
.navbar-toggler:not(.collapsed) .toggler-text {
    opacity: 0;
    transform: translateY(5px);
    pointer-events: none;    /* Evita que sea interactivo mientras es invisible */
}

.navbar-toggler .collapsed {
    border: none;
}

/* Animación cuando el menú está ABIERTO (no tiene la clase .collapsed) */
.navbar-toggler:not(.collapsed) .top-bar {
    transform: rotate(45deg) translate(5px, 5px);
}

.navbar-toggler:not(.collapsed) .middle-bar {
    opacity: 0;
}

.navbar-toggler:not(.collapsed) .bottom-bar {
    transform: rotate(-45deg) translate(6px, -6px);
}

.navbar-logo, .logo-giratorio, .logo-grid-giratorio {
    order: 1;
    height: 40px;
    width: auto;
    display: block;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Controla el tamaño de la imagen que solo aparece en el ordenador */
.logo-escritorio {
    height: 40px; /* Misma altura de tu logo del botón para mantener simetría */
    width: auto;  /* Evita que la imagen se deforme a lo ancho */
    display: block;
}

/* Dimensiones del logo */
.navbar-logo {
    height: 40px; /* Ajusta la altura a tu gusto */
    width: auto;
    display: block;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto elástico al girar */
    ;
}

/* Contenedor relativo para poder centrar el icono dentro */
.progress-container {
    position: relative;
    width: 46px;
    height: 46px;
    /*background-color: #dd4b39;  Color de fondo del círculo interno */
    background-color: #FFFFFF; /* Color de fondo del círculo interno */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease-in-out;
}

/* Forzamos que el SVG rote -90 grados para que el progreso empiece arriba en el centro */
.progress-circle {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

/* Línea de fondo del anillo */
.progress-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1); /* Línea gris muy sutil */
    stroke-width: 3;
}

/* Línea de progreso (Tu color personalizado) */
.progress-bar-circle {
    fill: none;
    /*stroke: #FFFFFF;  Pon aquí el color personalizado de tu marca */
    stroke: #dd4b39; /* Pon aquí el color personalizado de tu marca */
    stroke-width: 3;
    stroke-linecap: butt; /* Hace que las puntas del anillo sean planas */

    /* El perímetro del círculo es ~126 (2 * PI * radio 20) */
    stroke-dasharray: 126;
    stroke-dashoffset: 126; /* Empieza completamente vacío */
    transition: stroke-dashoffset 0.1s linear;
}

/* Icono en el centro del círculo */
.icono-interior {
    /*color: #ffffff;*/
    color: #dd4b39;
    z-index: 2;
}

.boton-whatsapp-completo,
.boton-subir-completo {
    position: relative !important; /* Anula cualquier fixed/absolute previo */
    bottom: auto !important;
    right: auto !important;
    display: block;
    opacity: 0.8;
    transition: opacity 0.3s ease; /* Opcional: hace que el cambio de opacidad sea suave */
}

/* Al pasar el ratón por los padres, se vuelven 100% opacos */
.boton-subir-completo:hover,
.boton-whatsapp-completo:hover {
    opacity: 1;
}

/* Efecto de agrandado al pasar el ratón */
.boton-subir-completo:hover .progress-container,
.whatsapp-container:hover {
    transform: translateY(-0.75rem) scale(1.2); /* Desplaza suavemente el círculo hacia arriba */
    box-shadow: 5px 7px 15px black;
}

/* Estilos visuales del botón de WhatsApp */
.whatsapp-container {
    position: relative;
    width: 46px;
    height: 46px;
    background-color: #25D366; /* Verde oficial */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

/* Color blanco para el icono de WhatsApp */
.whatsapp-container .bi-whatsapp {
    color: #ffffff;
}

/* Compensación de la navbar fija para que no tape los títulos al navegar */
section {
    scroll-margin-top: 65px; /* Altura estimada de tu barra */
}

/* Forzar que la primera sección (Inicio) ocupe la altura completa de la pantalla del usuario */
.full-screen-section {
    min-height: calc(100vh - 65px);
}

/* Estilo para los títulos de sección en tu fondo rojo corporativo */
#servicios .section-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background-color: #ffffff; /* Subrayado blanco elegante debajo del título */
    margin: 10px auto 0;
}

/* Contenedor que limita el ancho en pantallas grandes */
.contenedor-principal {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    /* Usamos flexbox para alinear verticalmente y dar separación constante */
    display: flex;
    flex-direction: column;
    gap: 2.5rem; /* Esta es la separación "un pelín separados" entre paneles */
    padding-top: 1rem !important;
}

/* Estilo base para TODOS los paneles */
.panel {
    padding: 4rem 3rem; /* Espaciado interno amplio para que el texto respire */
    border-radius: 12px; /* Esquinas suavizadas para efecto panel moderno */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Sombra muy suave */
}

/* PANEL CLARO (Inicio / Contacto) */
.panel-claro {
    background-color: #ffffff;
    color: #333333;
    margin-bottom: 3rem !important;
    display: flex;
    flex-direction: column;
    gap: 4.5rem;
}
.panel-claro h2 {
    color: #eb464c; /* Título con tu rojo vibrante */
}

/* 1. ¿POR QUÉ ELEGIRNOS? */
.contacto-por-que h2 {
    color: #bf2327; /* Título en tu rojo oscuro corporativo */
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-align: center;
}
.lista-razones {
    list-style: none;
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
}
.lista-razones li {
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    color: #444444;
}
.punto-rojo {
    color: #eb464c; /* Puntos en tu rojo vivo */
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* 2. GRID DE DOS COLUMNAS (Ayuda y Datos Legales) */
.contacto-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.contacto-ayuda h3 {
    font-size: 1.6rem;
    color: #333333;
    margin: 0 0 1rem 0;
}
.contacto-ayuda p {
    line-height: 1.6;
    font-size: 1.05rem;
    color: #555555;
}
.resaltado-contacto {
    font-weight: bold;
    font-style: italic;
    margin-top: 1.5rem;
    color: #bf2327; /* Frase destacada en tu rojo */
    font-size: 1.1rem !important;
}

/* Tarjeta de Datos Legales (Gris Suave para contrastar sobre el fondo blanco) */
.tarjeta-legal-gris {
    background-color: #f9f9f9;
    padding: 2.5rem;
    border-radius: 12px;
    border: 1px solid #eeeeee;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}
.tarjeta-legal-gris h4 {
    font-size: 1.25rem;
    color: #333333;
    margin: 0 0 1.25rem 0;
    border-bottom: 2px solid #eeeeee;
    padding-bottom: 0.5rem;
}
.datos-empresa {
    list-style: none;
    padding: 0;
    margin: 0;
}
.datos-empresa li {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
    color: #555555;
}
.datos-empresa li strong {
    color: #333333;
}
.datos-extra {
    display: block;
    margin-top: 1rem;
    color: #757575; /* Tu gris corporativo para la letra pequeña */
}

/* 3. BOTÓN DISPARADOR DE CORREO ELECTRÓNICO (Rojo Corporativo) */
.contacto-accion {
    text-align: center;
}
.btn-enviar-email {
    display: inline-block;
    background-color: #dd4b39; /* Tu rojo principal */
    color: #ffffff; /* Texto en blanco inmaculado */
    text-decoration: none;
    padding: 1.2rem 3rem;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1.15rem;
    box-shadow: 0 6px 20px rgba(221, 75, 57, 0.25);
    transition: background-color 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}
/* Tu efecto hover quitando opacidades, cambiando a rojo oscuro y agrandando fluidamente */
.btn-enviar-email:hover {
    background-color: #bf2327; /* Pasa a tu rojo oscuro */
    transform: scale(1.08) translateY(-3px);
    box-shadow: 0 10px 25px rgba(191, 35, 39, 0.35);
}

/* 4. CIERRE EMOCIONAL DE LA WEB */
.contacto-cierre-filosofia {
    text-align: center;
    max-width: 800px;
    margin: 1rem auto 0 auto;
    border-top: 2px solid #eeeeee;
    padding-top: 3rem;
}
.frase-cierre-prefacio {
    font-size: 1.1rem;
    color: #757575; /* Tu gris corporativo */
    margin-bottom: 0.5rem;
}
.frase-cierre-fuerte {
    font-size: 1.35rem;
    font-weight: bold;
    font-style: italic;
    line-height: 1.5;
    color: #333333;
}

/* PANEL DE COLOR (Soluciones) */
.panel-color {
    background-color: #bf2327; /* Tu color de cuerpo corporativo */
    color: #ffffff; /* Texto blanco para que contraste perfectamente */
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.soluciones-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
.soluciones-intro h2 {
    color: #ffffff; /* Título en blanco para resaltar */
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 1rem;
}
.subtitulo-soluciones {
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9); /* Blanco con ligera transparencia */
    line-height: 1.5;
    margin-bottom: 1rem;
}
.descripcion-soluciones {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

/* 2. CONTENEDOR DE PANELES APILADOS */
.lista-aplicaciones-vertical {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

/* Tarjeta apilada 1: Fondo Blanco Puro */
.tarjeta-app-horizontal {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 3rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Sombra más marcada para dar relieve sobre el rojo */
    border-left: 6px solid #eb464c; /* Detalle en tu rojo más vivo */
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
}

/* Tarjeta apilada 2: Fondo Gris Muy Suave */
.tarjeta-app-alterna {
    background-color: #f7f7f7;
    border-left-color: #757575; /* Detalle lateral en tu gris corporativo */
}

/* Interior de las tarjetas (Texto oscuro porque el fondo de la tarjeta es claro) */
.app-info-principal {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.badge-app {
    align-self: flex-start;
    background-color: rgba(235, 70, 76, 0.1);
    color: #eb464c;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 1rem;
}
.tarjeta-app-horizontal h3 {
    font-size: 2.2rem;
    color: #333333; /* Texto oscuro para legibilidad */
    margin: 0 0 0.5rem 0;
}
.tagline {
    font-size: 1.15rem;
    font-weight: bold;
    color: #757575;
    margin: 0 0 1.5rem 0;
}
.descripcion-app {
    line-height: 1.7;
    color: #555555;
    font-size: 1.05rem;
    margin-bottom: 2rem;
}

.app-funcionalidades {
    padding-right: 15% !important; /* Lo despega del borde derecho exterior de tu Mac */
}

.app-funcionalidades h4 {
    margin: 0 0 1rem 0;
    font-size: 1.2rem;
    color: #333333;
}

.lista-funcionalidades {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-funcionalidades li {
    padding: 0.6rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1rem;
    color: #444444;
    border-bottom: 1px dashed #e0e0e0;
}

.lista-funcionalidades li:last-child {
    border-bottom: none;
}

.bullet-rojo {
    color: #eb464c;
    font-weight: bold;
    transform: translateY(2px);
    display: inline-block;
}

/* 3. BOTÓN DE APERTURA MODAL (Destaca sobre el fondo claro de la tarjeta) */
.tarjeta-app-pie {
    margin-top: auto;
}
.btn-abrir-modal {
    display: inline-block;
    background-color: #dd4b39; /* Tu rojo corporativo principal */
    color: #ffffff;
    text-decoration: none;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.05rem;
    box-shadow: 0 4px 12px rgba(221, 75, 57, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn-abrir-modal:hover {
    background-color: #bf2327;
    transform: translateY(-2px);
}

/* 4. CIERRE DEL PANEL (Textos adaptados a fondo oscuro) */
.soluciones-cierre {
    text-align: center;
    max-width: 700px;
    margin: 2rem auto 0 auto;
}
.lema-funciones {
    font-size: 1.15rem;
    font-style: italic;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 3rem;
}

/* Banner Próximamente (Translúcido para que se integre con el fondo rojo) */
.banner-proximamente {
    background-color: rgba(255, 255, 255, 0.1); /* Efecto cristal */
    padding: 2rem;
    border-radius: 8px;
    border-left: 4px solid #ffffff;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.banner-proximamente h4 {
    margin: 0 0 0.5rem 0;
    color: #ffffff;
    font-size: 1.2rem;
}
.banner-proximamente p {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

/* 5. MODAL (Estilos se mantienen para la ventana blanca flotante) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.modal-overlay.mostrar {
    opacity: 1;
    pointer-events: auto;
}
.modal-ventana {
    background-color: #ffffff;
    padding: 3rem;
    border-radius: 12px;
    position: relative;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.modal-cerrar {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #757575;
}
.modal-contenido h3 {
    color: #333333;
}
.modal-contenido p {
    color: #666666;
}

.panel-color h2 {
    color: #ffffff;
}

/* PANEL GRIS (Precios) */
.panel-gris {
    background-color: #f0f0f0; /* Tu gris intermedio limpio */
    color: #333333;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Introducción */
.precios-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}
.precios-intro h2 {
    color: #757575; /* Tu gris corporativo para el título principal */
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}
.subtitulo-precios {
    font-size: 1.15rem;
    color: #555555;
}

/* Contenedor centrado de la tarjeta */
.contenedor-tarjeta-precios {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}

/* La tarjeta blanca principal */
.tarjeta-suscripcion {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    padding: 3rem;
    border-top: 5px solid #dd4b39; /* Detalle superior con tu rojo de marca */
}

.tarjeta-precios-cabecera {
    text-align: center;
    margin-bottom: 2.5rem;
    /*border-bottom: 2px solid #f0f0f0;*/
    padding-bottom: 1.5rem;
}
.tarjeta-precios-cabecera h3 {
    font-size: 1.8rem;
    color: #333333;
    margin: 0 0 0.25rem 0;
}
.tagline-precios {
    font-size: 1.05rem;
    color: #757575;
    font-weight: bold;
    margin: 0;
}

/* Bloques de desglose */
.bloque-precio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fdfdfd;
    border: 1px solid #eeeeee;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2.5rem;
}
.precio-info h4, .bloque-precio-detallado h4 {
    font-size: 1.15rem;
    color: #333333;
    margin: 0 0 0.5rem 0;
}
.precio-info p, .bloque-precio-detallado p.instruccion {
    margin: 0;
    color: #666666;
    font-size: 0.95rem;
    line-height: 1.4;
}

.precio-badge {
    text-align: right;
}
.precio-badge .cifra {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    color: #eb464c; /* Tu rojo vivo para destacar la base */
    line-height: 1;
}
.precio-badge .periodo {
    font-size: 0.8rem;
    color: #757575;
    font-weight: bold;
}

/* Bloques detallados (Perfiles y Módulos) */
.bloque-precio-detallado {
    margin-bottom: 2.5rem;
}
.bloque-precio-detallado p.instruccion {
    margin-bottom: 1.5rem;
}

/* Grid de Perfiles de Empleados */
.grid-perfiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.item-perfil {
    background-color: #f9f9f9;
    padding: 1.25rem;
    border-radius: 8px;
    border: 1px solid #eeeeee;
    display: flex;
    flex-direction: column;
}
.item-perfil h5 {
    font-size: 1rem;
    margin: 0 0 0.25rem 0;
    color: #333333;
}
.sub-item {
    font-size: 0.85rem;
    color: #757575;
    margin: 0 0 1rem 0;
}
.precio-perfil {
    margin-top: auto;
    font-size: 0.95rem;
    font-weight: bold;
    color: #dd4b39; /* Rojo para indicar que aquí va un precio */
}

/* Grid de Módulos Extra */
.grid-modulos {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.item-modulo {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background-color: #fdfdfd;
    border: 1px solid #eeeeee;
    padding: 1rem 1.5rem;
    border-radius: 8px;
}
.modulo-check {
    color: #eb464c;
    font-weight: bold;
    font-size: 1.2rem;
}
.modulo-txt {
    flex-grow: 1;
}
.modulo-txt h5 {
    font-size: 0.95rem;
    margin: 0 0 0.15rem 0;
    color: #333333;
}
.modulo-txt p {
    margin: 0;
    font-size: 0.85rem;
    color: #666666;
}
.precio-modulo {
    font-weight: bold;
    color: #eb464c;
    font-size: 1.1rem;
}
.precio-modulo small {
    font-size: 0.75rem;
    color: #757575;
}

/* Pie de tarjeta */
.tarjeta-precios-pie {
    text-align: center;
    border-top: 2px solid #f0f0f0;
    margin-top: 3rem;
    padding-top: 2rem;
}
.aviso-calculo {
    font-size: 0.95rem;
    color: #666666;
    margin-bottom: 1.5rem;
}
.btn-precios-cta {
    display: inline-block;
    background-color: #757575; /* Tu gris corporativo para variar el botón respecto al de soluciones */
    color: #ffffff;
    text-decoration: none;
    padding: 1rem 3rem;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.05rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn-precios-cta:hover {
    background-color: #555555;
    transform: translateY(-2px);
}

/* Estilo para el esbozo de precios por perfil */
.precio-perfil b {
    color: #dd4b39; /* Tu rojo corporativo principal */
}
.precio-perfil small {
    color: #757575; /* Tu gris corporativo */
    margin-left: 4px;
    font-weight: normal;
}

.panel-gris h2 {
    color: #757575; /* Título con tu gris corporativo */
}

/* Asegura alineación en pantallas grandes (PC) donde el botón se oculta */
.tarjeta-ventaja {
    background: rgba(255, 255, 255, 0.07);
    padding: 1.5rem;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.tarjeta-ventaja p {
    margin: 0;
    line-height: 1.4;
    font-size: 1rem;
}
.icono-check {
    background: #ffffff;
    color: #eb464c;
    font-size: 0.8rem;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0; /* Evita que el check se deforme */
}

/* 4. EVOLUCIÓN (Banner de cierre) */
.inicio-evolucion {
    text-align: center;
    background: rgba(0, 0, 0, 0.15); /* Fondo ligeramente más oscuro para cerrar */
    padding: 3rem;
    border-radius: 12px;
    margin-top: 1rem;
}
.inicio-evolucion h3 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
}
.inicio-evolucion p {
    max-width: 800px;
    margin: 0 auto 1rem auto;
    opacity: 0.9;
    line-height: 1.6;
}
.compromiso {
    font-size: 1.2rem;
    font-weight: bold;
    font-style: italic;
    color: #ffffff;
    margin-top: 2rem !important;
}

.footer-factopia {
    padding: 3rem 0; /* Da espacio arriba y abajo del logo */
    text-align: center;
    color: white;
    background-color: #dd4b39;
}

/* ==========================================================================
   ESTILOS PERSONALIZADOS PARA EL MODAL DE FACTOPIA
   ========================================================================== */

/* 1. Fondo difuminado de la pantalla (opcional, le da un toque moderno) */
.modal-backdrop.show {
    opacity: 0.7;
    background-color: #11141a; /* Un tono oscuro profundo en vez de negro puro */
}

/* 2. Contenedor principal de la ventana blanca */
#modal-suscripcion .modal-content {
    background-color: #ffffff;
    border: 2px solid #e0e0e0; /* Un borde sutil */
    border-radius: 12px;       /* Esquinas más suaves alineadas a apps modernas */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* 3. Cabecera del Modal */
#modal-suscripcion .modal-header {
    background: linear-gradient(90deg, #dd4b39 0%, #ffffff 100%);
    border-bottom: 1px solid #eeeeee;
    padding: 20px 24px;
}

/* Título de la cabecera (H5) */
#modal-suscripcion .modal-title {
    color: #ffffff; /* Color principal de tus textos */
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.3px;
}

/* Botón 'X' de cierre (adaptado a tus colores si quieres) */
#modal-suscripcion .btn-close:focus {
    box-shadow: none; /* Elimina el molesto borde azul brillante por defecto de Bootstrap */
}

/* Ajuste del Botón de Cierre (X) para que contraste sobre el fondo rojo */
#modal-suscripcion .btn-close {
    /* Volvemos el botón blanco o con más contraste si queda sobre la zona roja */
    filter: invert(1) grayscale(1) brightness(2);
    opacity: 0.8;
}

#modal-suscripcion .btn-close:hover {
    opacity: 1;
}

/* 4. Cuerpo del Modal e Inputs */
#modal-suscripcion .modal-body {
    padding: 24px;
}

/* Etiquetas de los campos (Labels) */
#modal-suscripcion .form-label {
    color: #4a5568;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 6px;
}

/* Cajas de texto (Inputs) cuando el usuario hace clic en ellas */
#modal-suscripcion .form-control {
    border-radius: 6px;
    border: 1px solid #ccd0d5;
    padding: 10px 12px;
    transition: all 0.2s ease;
}

#modal-suscripcion .form-control:focus {
    border-color: #ff3b30; /* Pon aquí TU COLOR CORPORATIVO PRINCIPAL (ej. el rojo de tus bullets) */
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.15); /* Efecto glow con tu color corporativo */
    outline: none;
}

/* Enlaces legales (Términos y Privacidad) */
#modal-suscripcion .form-check-label a {
    color: #ff3b30; /* Pon aquí TU COLOR CORPORATIVO PRINCIPAL */
    text-decoration: none;
    transition: color 0.2s;
}

#modal-suscripcion .form-check-label a:hover {
    color: #cc2f26; /* Versión un poco más oscura para el efecto hover */
    text-decoration: underline;
}

/* 5. Personalización del Botón de Suscripción (Primary) */
#modal-suscripcion .btn-primary {
    background-color: #ff3b30; /* Pon aquí TU COLOR CORPORATIVO PRINCIPAL */
    border-color: #ff3b30;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

#modal-suscripcion .btn-primary:hover:not(:disabled) {
    background-color: #cc2f26; /* Color corporativo oscuro al pasar el ratón */
    border-color: #cc2f26;
}

/* Estado deshabilitado del botón (cuando el checkbox no está marcado) */
#modal-suscripcion .btn-primary:disabled {
    background-color: #e4e6eb;
    border-color: #e4e6eb;
    color: #8a8d91;
    cursor: not-allowed;
}

/* Botón Cancelar (Secondary) */
#modal-suscripcion .btn-secondary {
    background-color: #f0f2f5;
    border-color: #f0f2f5;
    color: #4e5154;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 6px;
}

#modal-suscripcion .btn-secondary:hover {
    background-color: #e4e6eb;
    border-color: #e4e6eb;
    color: #1c1e21;
}

.logo-interactivo-wrapper .logo-imagen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* TRANSICIÓN SÉNIOR: Suaviza la escala, la sombra y la opacidad en 350ms */
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
        filter 0.35s ease-in-out,
        opacity 0.35s ease-in-out;
    will-change: transform, filter, opacity;
}

.logo-interactivo-wrapper .logo-original {
    /*    opacity: 1;*/
    z-index: 2;
}

.logo-interactivo-wrapper:hover .logo-imagen {
    /* 1. Elevación elástica: aumenta un 6% de su tamaño original */
    transform: scale(1.06) translateY(-4px);
    /* 2. Sombra premium de cristal: genera un halo difuminado suave en el fondo */
    filter: drop-shadow(0 12px 15px rgba(207, 45, 58, 0.18));
}

.animacion-cohete-factopia i {
    animation: levitacionSuaveFactopia 2.2s ease-in-out infinite;
    will-change: transform; /* Delega el renderizado a la gráfica del Mac para máxima fluidez */
}

@keyframes levitacionSuaveFactopia {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px); /* Eleva el cohete 5 píxeles de forma flotante */
    }
}

/*@media (min-width: 992px) {
    .navbar {
        padding: 0.5rem 2rem !important;
    }

    .navbar-toggler {
        display: none !important;
    }

    .navbar-collapse {
        display: flex !important;
        justify-content: flex-end !important;
    }

    .navbar-nav {
        height: 40px;
        display: flex;
        align-items: center;
        flex-direction: row !important;
        gap: 0.5rem;
    }

    .navbar .nav-link {
         Como a la derecha el fondo es tu rojo corporativo, ponemos los textos en blanco 
        color: #ffffff !important;  Blanco inmaculado sobre el rojo 
        font-weight: 600;
        padding: 0.5rem 1.2rem;
        border-radius: 6px;
        background-color: transparent;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }
    .navbar .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.15);  Crea un botón translúcido muy elegante 
        color: #ffffff !important;
        padding-left: 1.2rem;  Anula el desplazamiento de móvil 
        transform: translateY(-1px);
    }

    .grid-ventajas {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  Columnas automáticas según pantalla 
    }

    .tarjeta-app-horizontal {
        grid-template-columns: 1.2fr 0.8fr;  Texto explicativo a la izquierda, lista a la derecha 
    }

    .grid-perfiles {
        grid-template-columns: repeat(2, 1fr);  2 columnas en pantallas medianas/grandes 
    }

    .contacto-grid {
        grid-template-columns: 1.1fr 0.9fr;
    }
}*/

/* ==========================================================================
   ADAPTACIÓN ATÓMICA PARA DISPOSITIVOS MÓVILES (FICHBOX / FACTOPIA)
   ========================================================================== */
@media (min-width: 992px) {

    /* 🚀 REPARACIÓN ESQUINAS: Ampliamos el escudo en PC para que tape las curvas del Navbar */
    body::before {
        height: 1.8rem !important; /* Baja lo justo para hacer de guillotina antes de las esquinas */
        z-index: 1025 !important;
    }

    /* Tu barra original flotante centrada con sus 12px de esquinas intactos */
    .navbar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: calc(100% - 40px) !important;
        max-width: 1160px !important;
        margin: 1rem auto 0 auto !important;
        border-radius: 12px !important;
        z-index: 1030 !important;
    }

    /* REPARACIÓN FLUJO: Obligamos al contenedor a expandirse horizontalmente */
    .navbar-collapse {
        display: flex !important;
        flex-grow: 1 !important;
        justify-content: flex-end !important;
    }

    /* REPARACIÓN TEXTOS DERECHA: Imantamos los enlaces al extremo derecho de la barra */
    .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem !important;
        margin-left: auto !important; /* 🌟 Seguro atómico de empuje horizontal hacia la derecha */
    }

    .navbar .nav-link {
        color: #ffffff !important; /* Blanco puro para máximo contraste sobre el degradado */
        font-weight: 600 !important;
        font-size: 1rem !important;
        padding: 0.5rem 1.2rem !important;
        transition: color 0.2s ease, transform 0.2s ease !important;
    }

    /* Efecto hover translúcido elegante al posar el cursor en ordenador */
    .navbar .nav-link:hover {
        color: rgba(255, 255, 255, 0.85) !important;
        transform: translateY(-1px) !important;
        padding-left: 1.2rem !important; /* Mantenemos el colchón fijo para que no baile en PC */
    }
}

@media (max-width: 991px) {

    /* 1. AJUSTES TIPOGRÁFICOS Y COMPACTACIÓN DE PANELES BASE */
    body {
        padding-top: 110px !important; /* Colchón superior adaptado para el menú móvil */
    }

    .contenedor-principal {
        gap: 1.5rem !important; /* Reducimos la separación entre paneles para optimizar scroll */
        padding: 0 12px !important;
    }

    .panel {
        padding: 2.5rem 1.25rem !important; /* Relleno compacto: el texto respira sin salirse */
        border-radius: 8px !important;
    }

    /* 2. COMPACTACIÓN DEL PANEL INICIO (HERO) */
    .panel-inicio {
        gap: 2.5rem !important; /* Evita que el usuario tenga que hacer un scroll infinito */
    }

    .inicio-hero {
        padding: 0 !important;
    }

    .inicio-hero h1 {
        font-size: 1.8rem !important; /* Escalado tipográfico: el título grande ya no se corta */
        font-weight: 800 !important;
        margin-bottom: 1rem !important;
    }

    .inicio-hero .subtitulo {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
    }

    .inicio-hero .descripcion-principal {
        font-size: 0.95rem !important;
        margin-bottom: 2rem !important;
        line-height: 1.5 !important;
        text-align: justify;
    }

    .boton-cta {
        padding: 0.85rem 2rem !important;
        font-size: 1rem !important;
        width: 100%; /* Botón elástico a ancho completo, mucho más cómodo para el dedo en móviles */
        text-align: center;
    }

    /* 3. REJILLAS A 1 COLUMNA (Aplanado atómico de Grids) */
    .inicio-grid-dos-columnas,
    .contacto-grid {
        grid-template-columns: 1fr !important; /* De 2 columnas pasa a 1 hilera vertical limpia */
        gap: 2rem !important;
    }

    /* 4. AJUSTE QUIRÚRGICO DE LA BARRA DE NAVÉGACIÓN (NAVBAR) */
    .navbar {
        width: calc(100% - 24px) !important; /* Colchón simétrico lateral en móviles */
        padding: 0.6rem 1.25rem !important;
        margin: 0.5rem auto 0 auto !important;
    }

    /* Ocultamos el texto "MENÚ" si se llega a solapar o pisar con el logotipo giratorio */
    .toggler-text {
        display: none !important;
    }

    /*️ 5. REPARACIÓN DEL PANEL DE SOLUCIONES (FICHBOX) */
    .tarjeta-app-horizontal {
        grid-template-columns: 1fr !important; /* Aplanamos el Grid a 1 sola hilera vertical limpia */
        gap: 2rem !important; /* Separación higiénica entre la info y las funcionalidades */
        /* Reducimos el relleno masivo a 1.25rem para ganar 60px de espacio útil en el smartphone */
        padding: 2.2rem 1.25rem !important;
        border-radius: 16px !important;
        width: 100% !important;
    }

    /* 2. REESCALADO Y CENTRADO DEL IMAGOTIPO */
    .tarjeta-app-horizontal .logo-interactivo-wrapper {
        position: relative !important; /* Despega la capa de cualquier absoluto */
        display: block !important;
        margin: 0 auto 1.5rem auto !important; /* Centra el imagotipo y genera 24px de colchón con el texto */
        height: auto !important;
        width: 100% !important;
        max-width: 240px !important; /* Escala perfecta para la anchura del iPhone */
    }

    .tarjeta-app-horizontal .logo-imagen,
    .tarjeta-app-horizontal .logo-original {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important; /* Mantiene la proporción matemática limpia de la imagen */
        margin: 0 auto !important;
        object-fit: contain !important;
    }

    /* ✒️ 3. OPTIMIZACIÓN TIPOGRÁFICA Y ESPACIADO */
    .tarjeta-app-horizontal .tagline {
        position: relative !important;
        display: block !important;
        clear: both !important; /* Rompe cualquier interferencia o pisado de la capa de arriba */
        font-size: 1.15rem !important; /* El eslogan respira de forma horizontal y no rompe palabras */
        text-align: center !important; /* Centrado estético premium para móviles */
        line-height: 1.4 !important;
        margin-top: 1rem !important; /* Colchón extra de seguridad vertical */
        margin-bottom: 1.25rem !important;
        color: #333333 !important;
    }

    .tarjeta-app-horizontal .descripcion-app {
        font-size: 0.88rem !important; /* Reducimos un pelín la fuente para que estilice el párrafo */
        line-height: 1.6 !important;
        text-align: justify !important; /* Justificado limpio de revista comercial */
        margin-bottom: 1.75rem !important;
        color: #555555 !important;
        padding: 0 4px !important; /* Pequeño respiro de cortesía lateral */
    }

    /* 🎛️ 4. BOTÓN SUSCRIBIRSE ELÁSTICO PARA EL DEDO GORDO */
    .tarjeta-app-horizontal .btn-abrir-modal,
    .tarjeta-app-horizontal .tarjeta-app-pie a {
        width: 100% !important; /* El botón se estira al 100% de la anchura del teléfono */
        text-align: center !important;
        padding: 0.9rem 1.5rem !important; /* Más grueso para facilitar la pulsación táctica */
        font-size: 1rem !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        display: block !important;
    }

    /* 📋 5. ALINEACIÓN DE LAS FUNCIONALIDADES DESTACADAS DOWN */
    .tarjeta-app-horizontal .app-funcionalidades {
        padding-right: 0 !important; /* 🚀 TRITURAMOS EL MARGEN DEL 15% DEL PC QUE ASFIXIABA TODO */
        width: 100% !important;
        margin-top: 0.5rem !important;
    }

    .tarjeta-app-horizontal .app-funcionalidades h4 {
        font-size: 1.15rem !important;
        margin-bottom: 1.25rem !important;
        text-align: left !important;
        font-weight: 700 !important;
    }

    .tarjeta-app-horizontal .lista-funcionalidades li {
        font-size: 0.95rem !important;
        padding: 0.75rem 0 !important; /* Más separación entre filas para facilitar lectura */
    }

    .tarjeta-app-horizontal h3 {
        font-size: 1.6rem !important; /* Evitamos que el título FICHBOX rompa la caja */
    }

    .descripcion-app {
        font-size: 0.92rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.5rem !important;
        text-align: justify;
    }

    .app-funcionalidades {
        padding-right: 0 !important; /* 🚀 REPARACIÓN CLAVE: Eliminamos el padding del 15% del Mac */
    }

    .btn-abrir-modal {
        width: 100% !important; /* Botón a ancho completo adaptable al smartphone */
        text-align: center;
        padding: 0.85rem 1.5rem !important;
    }

    /*️ 6. REPARACIÓN DE LA FICHA DE PRECIOS Y TARIFAS DINÁMICAS */
    .tarjeta-suscripcion {
        padding: 1.75rem 1.25rem !important;
    }

    .tarjeta-precios-cabecera h3 {
        font-size: 1.4rem !important;
    }

    .bloque-precio {
        flex-direction: column !important; /* El precio base se apila en vertical en el móvil */
        align-items: flex-start !important;
        gap: 1.25rem !important;
        padding: 1.25rem !important;
    }

    .precio-badge {
        text-align: left !important; /* El precio se alinea a la izquierda en smartphones */
        width: 100% !important;
    }

    .grid-perfiles {
        grid-template-columns: 1fr !important; /* Forzamos 1 sola columna para los perfiles */
        gap: 1rem !important;
    }

    .item-modulo {
        flex-direction: column !important; /* El check, el texto y el precio se apilan limpios */
        align-items: flex-start !important;
        gap: 1rem !important;
        padding: 1.25rem !important;
    }

    .precio-modulo {
        align-self: flex-end !important; /* El precio del módulo se apoya elegante abajo a la derecha */
    }

    .tarjeta-precios-pie {
        margin-top: 2rem !important;
        padding-top: 1.5rem !important;
    }

    .btn-precios-cta {
        width: 100% !important; /* Botón contratar elástico */
        text-align: center;
    }

    /* 7. SECCIÓN DE CONTACTO Y DATOS LEGALES */
    .contacto-por-que h2 {
        font-size: 1.6rem !important;
    }

    .lista-razones li {
        font-size: 0.95rem !important;
        align-items: flex-start !important;
    }

    .tarjeta-legal-gris {
        padding: 1.5rem !important;
    }

    .btn-enviar-email {
        width: 100% !important; /* El botón de disparo de correo se vuelve 100% adaptivo */
        text-align: center;
        padding: 1rem 2rem !important;
        font-size: 1.05rem !important;
    }

    .frase-cierre-fuerte {
        font-size: 1.1rem !important;
    }

    /* 8. CONTENEDOR DE LA VENTANA MODAL FLOTANTE DE ACCESO PRIORITARIO */
    .modal-ventana {
        padding: 1.75rem 1.25rem !important; /* Compactamos la modal para pantallas pequeñas */
        width: 95% !important;
    }
}