:root {
    /* Fondos Negros Transparentes (Ajusta la transparencia según prefieras) */
    --bg-pomelia-light: rgba(0, 0, 0, 0.85);   /* Fondo principal: Negro con 85% de opacidad */
    --bg-pomelia-soft: rgba(0, 0, 0, 0.65);    /* Secciones secundarias: Negro con 65% de opacidad */
    --card-pomelia-bg: rgba(0, 0, 0, 0.50);    /* Tarjetas: Negro con 50% de opacidad */

    /* Textos (Blancos / Claron para buen contraste sobre negro) */
    --text-primary: #ffffff;                    /* Blanco puro para títulos */
    --text-secondary: #cbd5e1;                  /* Gris claro para textos */

    /* Colores del Isotipo Pomelia (Ajustados para destacar en fondo negro) */
    --cyan-pomelia: #00b4d8;            
    --purple-pomelia: #7c3aed;          
    --sunset-orange: #f97316;           

    /* Variaciones transparentes de los colores para badges / tarjetas */
    --cyan-dim: rgba(0, 180, 216, 0.20);
    --purple-dim: rgba(124, 58, 237, 0.20);
    --sunset-dim: rgba(249, 115, 22, 0.20);

    /* Degradados */
    --pomelia-logo-gradient: linear-gradient(135deg, #00b4d8 0%, #7c3aed 50%, #f97316 100%);
    --pomelia-primary-gradient: linear-gradient(135deg, #00b4d8 0%, #7c3aed 100%);

    --font-family-pomelia: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body {
    background-color: var(--bg-pomelia-light);
    color: var(--text-primary);
    font-family: var(--font-family-pomelia);
    overflow-x: hidden;
    line-height: 1.6;
}
/* =========================================
   Textos y Gradientes
   ========================================= */
.text-pomelia-gradient {
    background: var(--pomelia-logo-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-cyan { color: var(--cyan-pomelia) !important; }
.text-purple { color: var(--purple-pomelia) !important; }
.text-sunset { color: var(--sunset-orange) !important; }
.text-muted-pomelia { color: var(--text-secondary) !important; }

/* Contenedores y Bordes */
.bg-pomelia-light { background-color: var(--bg-pomelia-light) !important; }
.bg-pomelia-soft { background-color: var(--bg-pomelia-soft) !important; }
.bg-card-pomelia { background-color: var(--card-pomelia-bg) !important; }

.border-cyan-dim { border: 1px solid rgba(0, 180, 216, 0.2) !important; }
.border-purple-dim { border: 1px solid rgba(124, 58, 237, 0.2) !important; }
.border-sunset-dim { border: 1px solid rgba(249, 115, 22, 0.2) !important; }
.border-soft { border: 1px solid #e2e8f0 !important; }

.bg-cyan-dim { background-color: var(--cyan-dim) !important; }
.bg-purple-dim { background-color: var(--purple-dim) !important; }
.bg-sunset-dim { background-color: var(--sunset-dim) !important; }

/* =========================================
   Botones
   ========================================= */
.btn-pomelia-primary {
    background: var(--pomelia-primary-gradient);
    color: #ffffff !important;
    border: none;
    transition: all 0.3s ease;
    font-weight: 600;
}

.btn-pomelia-primary:hover {
    box-shadow: 0 8px 20px rgba(0, 180, 216, 0.3);
    transform: translateY(-2px);
}

.btn-pomelia-outline {
    border: 2px solid var(--cyan-pomelia);
    color: var(--cyan-pomelia);
    background: transparent;
    transition: all 0.3s ease;
    font-weight: 600;
}

.btn-pomelia-outline:hover {
    background: var(--cyan-pomelia);
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(0, 180, 216, 0.25);
}

/* =========================================
   Navbar
   ========================================= */
/* =========================================
   ESTILOS DE LA NAVBAR POMELIA EN MODO OSCURO
   ========================================= */

.navbar-pomelia {
    background-color: rgba(0, 0, 0, 0.85) !important; /* Negro transparente */
    backdrop-filter: blur(12px) !important;          /* Efecto glassmorphic */
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: all 0.3s ease;
}

/* Enlaces de la barra de navegación */
.nav-link-pomelia {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-link-pomelia:hover,
.nav-link-pomelia.active {
    color: #00b4d8 !important; /* Cian brillante */
}

/* Fondo del menú colapsable en pantallas móviles */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: rgba(10, 10, 12, 0.95);
        padding: 1.25rem;
        border-radius: 16px;
        margin-top: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* =========================================
   Hero Section
   ========================================= */
.hero-section-light {
    background: radial-gradient(circle at 80% 20%, rgba(249, 115, 22, 0.06) 0%, rgba(124, 58, 237, 0.05) 40%, #ffffff 80%);
}

.badge-pomelia {
    background: var(--cyan-dim);
    border: 1px solid rgba(0, 180, 216, 0.25);
    color: var(--text-primary);
}

.hero-glass-card-light {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

.floating-element {
    animation: floatAnimation 6s ease-in-out infinite;
}

@keyframes floatAnimation {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* =========================================
   Tarjetas & Secciones
   ========================================= */
.card-pomelia {
    transition: all 0.35s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.card-pomelia:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.icon-square-pomelia {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.bg-stats-light {
    background: var(--bg-pomelia-soft);
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.bg-gradient-cta-pomelia {
    background: var(--pomelia-primary-gradient);
}

/* =========================================
   Línea de Tiempo
   ========================================= */
.timeline-pomelia {
    max-width: 850px;
    margin: 0 auto;
}

.timeline-pomelia::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 2px;
    background: linear-gradient(180deg, var(--cyan-pomelia), var(--purple-pomelia), var(--sunset-orange));
    transform: translateX(-50%);
}

.timeline-item-pomelia {
    position: relative;
    width: 50%;
}

.timeline-item-pomelia:nth-child(odd) { left: 0; padding-right: 35px; }
.timeline-item-pomelia:nth-child(even) { left: 50%; padding-left: 35px; }

.timeline-dot-pomelia {
    position: absolute;
    top: 24px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    z-index: 10;
}

.timeline-item-pomelia:nth-child(odd) .timeline-dot-pomelia { right: -8px; }
.timeline-item-pomelia:nth-child(even) .timeline-dot-pomelia { left: -8px; }

/* =========================================
   Formularios
   ========================================= */
.form-control-pomelia {
    background-color: var(--bg-pomelia-soft) !important;
    border: 1px solid #cbd5e1 !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease;
    border-radius: 10px;
}

.form-control-pomelia:focus {
    background-color: #ffffff !important;
    border-color: var(--cyan-pomelia) !important;
    box-shadow: 0 0 10px rgba(0, 180, 216, 0.2) !important;
}

/* =========================================
   HERO FULL WIDTH (FONDO NEGRO TRANSPARENTE)
   ========================================= */

.hero-full-layout {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    overflow: hidden;
    background-color: transparent !important; /* Elimina fondos blancos predeterminados */
}

/* Contenedor de la imagen al 95% */
.hero-image-full-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 95%;
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Imagen con degradado suave hacia el fondo negro transparente */
.img-degradado-izq {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    
    /* La máscara desvanece la imagen hacia la izquierda integrándola con el negro */
    -webkit-mask-image: linear-gradient(to right, 
        transparent 0%, 
        rgba(0, 0, 0, 0.05) 20%, 
        rgba(0, 0, 0, 0.25) 40%, 
        rgba(0, 0, 0, 0.6) 55%, 
        rgba(0, 0, 0, 0.9) 65%, 
        rgba(0, 0, 0, 1) 70%
    );
    mask-image: linear-gradient(to right, 
        transparent 0%, 
        rgba(0, 0, 0, 0.05) 20%, 
        rgba(0, 0, 0, 0.25) 40%, 
        rgba(0, 0, 0, 0.6) 55%, 
        rgba(0, 0, 0, 0.9) 65%, 
        rgba(0, 0, 0, 1) 70%
    );
}

/* Contenedor de texto sobre la sección */
.hero-text-overlay {
    position: relative;
    z-index: 2;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Forzar que el contenedor e interior de textos sea transparente con tipografía clara */
.hero-text-clean {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Color blanco/claro para los textos del Hero sobre fondo negro */
.hero-text-clean h1, 
.hero-text-clean .display-3 {
    color: #ffffff !important;
}

.hero-text-clean p, 
.hero-text-clean .lead {
    color: #cbd5e1 !important; /* Gris claro de alto contraste */
}

/* Adaptación para dispositivos móviles */
@media (max-width: 991.98px) {
    .hero-image-full-container {
        position: relative;
        width: 100%;
        height: 380px;
        margin-top: 2rem;
    }
    .img-degradado-izq {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
    }
}

/* =========================================
   CTA SECTION CON IMAGEN DE FONDO
   ========================================= */

.cta-bg-image {
    position: relative;
    /* Reemplaza la ruta por tu archivo de imagen */
    background-image: url('../img/cta-bg.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Efecto parallax suave (opcional) */
}

/* Overlay semitransparente con los colores de Pomelia */
.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Degradado azul/púrpura con transparencia del 85% */
    background: linear-gradient(135deg, rgba(0, 180, 216, 0.85) 0%, rgba(124, 58, 237, 0.85) 100%);
    z-index: 1;
}

/* Elevación de contenido para quedar sobre el overlay */
.cta-content {
    position: relative;
    z-index: 2;
}

/* =========================================
   FOOTER CON DISEÑO POMELIA (MODO NEGRO)
   ========================================= */

/* Fondo general del Footer */
footer,
.footer-pomelia,
.footer-pomelia-dark {
    background-color: #000000 !important; /* Negro sólido puro */
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
    font-size: 0.9rem;
}

/* Marca e Isotipo en Header/Footer */
footer .logo-brand-img {
    height: 38px !important;
    width: auto !important;
    object-fit: contain;
}

/* Mantiene el degradado tricolor intacto */
.brand-text-gradient {
    background: linear-gradient(135deg, #00b4d8 0%, #a78bfa 50%, #f97316 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    display: inline-block !important;
}

/* Titulares de columnas */
footer h6 {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

/* Descripción del footer */
.footer-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #94a3b8 !important;
}

/* Enlaces de menú (Enlaces y Servicios) */
.footer-menu-list li {
    margin-bottom: 0.5rem;
}

.footer-menu-list a {
    color: #cbd5e1 !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.footer-menu-list a:hover {
    color: #00b4d8 !important; /* Cian al pasar el cursor */
}

/* Lista de Contacto */
.footer-contact-list a,
.footer-contact-list span {
    color: #cbd5e1 !important;
    text-decoration: none !important;
}

.footer-contact-list a:hover {
    color: #a78bfa !important;
}

/* Iconos de contacto en tono Púrpura */
.text-purple {
    color: #8b5cf6 !important;
    font-size: 1.05rem;
}

/* Botones circulares de Redes Sociales */
.social-circle-btn,
.social-link-pomelia {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.social-circle-btn:hover,
.social-link-pomelia:hover {
    background-color: rgba(0, 180, 216, 0.15) !important;
    border-color: #00b4d8 !important;
    color: #00b4d8 !important;
    transform: translateY(-2px);
}

/* Divisiones verticales entre columnas en pantallas grandes */
@media (min-width: 992px) {
    .border-end-custom {
        border-right: 1px solid rgba(255, 255, 255, 0.08);
    }
}

/* Banner de palabras clave a la derecha (Innovación, Diseño, Tecnología) */
.keywords-banner {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    font-size: 0.78rem;
    background: linear-gradient(135deg, #a78bfa 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Líneas divisorias horizontales (<hr>) */
footer hr {
    border-color: rgba(255, 255, 255, 0.08) !important;
    opacity: 1 !important;
}

/* =========================================
   SECCIÓN CTA EN NEGRO 
   ========================================= */

/* =========================================
   SECCIÓN CTA CON IMAGEN DE FONDO
   ========================================= */

.cta-section-dark {
    position: relative;
    background-color: #0b0f19; /* Fondo de respaldo mientras carga la imagen */
    min-height: 380px;
}

/* Envoltorio de la imagen */
.cta-bg-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Ajuste de la imagen para cubrir todo el contenedor */
.cta-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Capa oscura (Overlay) para garantizar la lectura del texto */
.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(11, 15, 25, 0.85) 0%, rgba(11, 15, 25, 0.95) 100%);
}

/* Capa de texto sobre la imagen */
.cta-content-overlay {
    z-index: 2;
}

/* =========================================
   ELIMINAR SUBRAYADO DE ENLACES DE NAVEGACIÓN
   ========================================= */


/* Estilo y contraste para el texto de la marca junto al logo */
.brand-text-gradient {
    /* Degradado luminoso optimizado para fondo negro */
    background: linear-gradient(135deg, #38bdf8 0%, #a78bfa 50%, #fb923c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Tamaño y tipografía */
    font-size: 1.85rem !important;  /* Aumenta el tamaño de la letra */
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.5px;
    
    /* Alineación perfecta con el isotipo */
    display: inline-block;
    vertical-align: middle;
}

/* Mantiene el tamaño adecuado de la flor */
.logo-brand-img {
    height: 45px !important;
    width: auto !important;
    object-fit: contain;
}

/* =========================================
   ESTILOS DE LA MARCA EN EL HEADER
   ========================================= */

/* Alineación limpia para la marca */
.navbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* Isotipo (Flor) */
.logo-brand-img {
    height: 42px !important;
    width: auto !important;
    object-fit: contain;
}

/* Texto Pomelia al lado de la flor con degradado luminoso */
.brand-text-gradient {
    background: linear-gradient(135deg, #38bdf8 0%, #a78bfa 50%, #fb923c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.5px !important;
    display: inline-block !important;
}

/* =========================================
   BLOQUE DE MANIFIESTO MÁS ANCHO Y EXPANDIDO
   ========================================= */

/* Contenedor principal con mayor separación desde la línea vertical */
.footer-manifesto-block {
    border-left: 2px solid rgba(255, 255, 255, 0.2) !important;
    padding-left: 1.75rem !important; /* Aumenta la distancia respecto a la línea */
}

/* Lista de palabras con mayor espaciado entre caracteres */
.footer-manifesto-list {
    margin-bottom: 0.75rem;
}

.footer-manifesto-list li {
    color: #c084fc !important; /* Tono violeta/rosado */
    font-weight: 800;
    font-size: 1.1rem !important; /* Ligeramente más grande */
    letter-spacing: 4px !important; /* <--- Esto expande a lo ancho cada palabra */
    line-height: 1.9;
    text-transform: uppercase;
    white-space: nowrap; /* Evita saltos de línea no deseados */
}

/* Icono de Corazón adaptado */
.footer-heart-icon {
    color: #c084fc !important;
    font-size: 1.5rem !important;
    display: inline-block;
    margin-left: 2px;
}

/* =========================================
   BLOQUE DE MANIFIESTO EN FOOTER
   ========================================= */

/* Estilo para la lista en mayúsculas */
.footer-manifesto-list {
    margin-bottom: 0.75rem;
}

.footer-manifesto-list li {
    color: #c084fc !important; /* Tono violeta/rosado suave exacto */
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 1.5px;
    line-height: 1.8;
    text-transform: uppercase;
}

/* Icono de Corazón */
.footer-heart-icon {
    color: #c084fc !important;
    font-size: 1.4rem;
    display: inline-block;
}

/* Línea vertical izquierda sutil */
.footer-manifesto-block {
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
}


/* =========================================
   ESTILOS EXACTOS DE ENCABEZADO Y CTA
   ========================================= */

/* Fondo negro puro */
.cta-section-dark {
    background-color: #000000 !important;
}

/* Tipografía general del título */
.cta-title-main {
    letter-spacing: -1px;
    line-height: 1.2;
}

/* Parte de texto opaca / gris oscura (Ej: "Haz realidad tu sitio con la calidad de" o "Servicios de") */
.text-muted-dark {
    color: #1e293b !important; /* Gris oscuro profundo idéntico al de la imagen */
    font-weight: 700;
}

/* Degradado horizontal continuo: Cian (#00b4d8) -> Púrpura (#8b5cf6) -> Naranja (#f97316) */
.brand-text-gradient {
    background: linear-gradient(90deg, #00b4d8 0%, #8b5cf6 50%, #f97316 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
    font-weight: 800;
}

/* Subtítulo en blanco puro centrado */
.text-subtitle-clean {
    color: #ffffff !important;
    font-size: 1.15rem;
    font-weight: 400;
    opacity: 0.95;
    letter-spacing: 0.2px;
}

/* Ajuste de espaciado y divisores entre columnas del footer */
@media (min-width: 992px) {
    /* Línea divisora en el borde derecho */
    .border-end-custom {
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    /* Forzar mayor separación interna en las columnas medias */
    .footer-pomelia-dark .ps-lg-5 {
        padding-left: 3.5rem !important;
    }
}

/* Alineación limpia de elementos de contacto */
.footer-contact-list li {
    display: flex;
    align-items: center;
}

.footer-contact-list i {
    min-width: 20px;
}

/* =========================================
   FOOTER  (SISTEMA POMELIA)
   ========================================= */


.footer-links{
    margin:0;
    padding:0;
    list-style:none;
}

.footer-links li{
    margin-bottom:10px;
}

.footer-links a{
    color:rgba(255,255,255,.7);
    text-decoration:none;
    transition:.3s;
}

.footer-links a:hover{
    color:#fff;
    padding-left:6px;
}

.footer-links li:not(:has(a)){
    color:rgba(255,255,255,.7);
}

.footer-explora{
    padding-left:40px;
}

.footer-servicios{
    padding-left:40px;
}

.form-label{
    font-size: 1rem !important;
    font-weight: 700;
}

/* =========================================
   BOTON REDES SOCIALES
   ========================================= */

/* Botón de redes sociales celeste */
.btn-outline-light {
    color: #00d2ff !important; /* Celeste en los íconos */
    border: 1px solid rgba(0, 210, 255, 0.4) !important; /* Borde celeste tenue */
    background-color: transparent !important;
    transition: all 0.3s ease !important;
}

/* Ajuste de tamaño circular para íconos de redes sociales */
.social-icon-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* Estado al pasar el cursor (Hover) */
.btn-outline-light:hover {
    color: #0d0e12 !important; /* Ícono oscuro al hacer hover */
    background-color: #00d2ff !important; /* Fondo celeste brillante */
    border-color: #00d2ff !important;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.4) !important; /* Resplandor celeste sutil */
    transform: translateY(-2px); /* Pequeña elevación */
}

/* =========================================
   IMAGEN DE FONDO
   ========================================= */

/* --- Sección CTA con Imagen en Movimiento --- */

.cta-section {
    background-color: #0d0e12;
    position: relative;
}

/* Imagen de fondo animada */
.cta-bg-animated {
    /* ⚠️ REEMPLAZA 'tu-imagen.jpg' CON LA RUTA REAL DE TU IMAGEN ⚠️ */
    background-image: url('../img/tu-imagen.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.1);
    animation: moverImagen 20s ease-in-out infinite alternate;
}

/* Animación de movimiento suave */
@keyframes moverImagen {
    0% {
        transform: scale(1.1) translate(0, 0);
    }
    50% {
        transform: scale(1.18) translate(-15px, -10px);
    }
    100% {
        transform: scale(1.1) translate(10px, 15px);
    }
}

/* Superposición para oscurecer y mejorar lectura */
.cta-overlay {
    background: rgba(13, 14, 18, 0.75); /* Ajusta la opacidad (0.75) si quieres ver la imagen más clara u oscura */
    backdrop-filter: blur(2px);
    z-index: 1;
}

.cta-content-overlay {
    max-width: 850px;
}

/* =========================================
   CUADRO DE MENSAJES
   ========================================= */

/* Tarjeta principal con borde morado ultrafino y opaco */
.border-gradient-purple {
    background-color: #0d0e12 !important;
    border: 1px solid rgba(168, 85, 247, 0.35) !important; /* Morado suave y semitransparente */
    box-shadow: none !important; /* Eliminamos el resplandor brillante */
}

/* Custom Inputs con contorno anaranjado fino y sutil */
#contactForm .custom-input-pomelia {
    background-color: #0d0e12 !important;
    border: 1px solid rgba(255, 122, 0, 0.35) !important; /* Anaranjado tenue y fino */
    color: #00d2ff !important; /* Texto celeste al escribir */
    box-shadow: none !important; /* Sin brillo alrededor */
}

/* Estado activo / enfocado (al hacer clic o escribir) */
#contactForm .custom-input-pomelia:focus {
    background-color: #0d0e12 !important; /* Mantiene fondo oscuro */
    border-color: rgba(255, 122, 0, 0.6) !important; /* Se define un poco más sin encandilar */
    box-shadow: none !important; /* Eliminamos el resplandor brillante al enfocar */
    color: #00d2ff !important; /* Mantiene texto celeste */
}

/* Color del placeholder (texto de sugerencia) */
#contactForm .custom-input-pomelia::placeholder {
    color: #6c757d !important;
}


/* =========================================
   MODAL
   ========================================= */

/* Hero Layout Completo */
.hero-full-layout {
    overflow: hidden;
    background-color: #0b0f19;
}

/* Manejo de imagen de fondo */
.hero-bg-wrapper img {
    object-fit: cover;
    object-position: center right; /* Prioriza enfocar la derecha en pantallas pequeñas */
}

/* Capa de degradado oscuro a la izquierda */
.hero-overlay-gradient {
    background: linear-gradient(
        90deg, 
        rgba(11, 15, 25, 0.95) 0%, 
        rgba(11, 15, 25, 0.85) 40%, 
        rgba(11, 15, 25, 0.3) 75%, 
        rgba(11, 15, 25, 0.1) 100%
    );
}

/* Gradient Text */
.brand-text-gradient {
    background: linear-gradient(135deg, #00e5ff 0%, #a100ff 50%, #ff6b35 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Ajustes Responsive para Móviles */
@media (max-width: 991.98px) {
    .hero-overlay-gradient {
        background: linear-gradient(
            180deg, 
            rgba(11, 15, 25, 0.92) 0%, 
            rgba(11, 15, 25, 0.75) 100%
        );
    }
}


/* =========================================
   MMMMM
   ========================================= */

.brand-text-gradient {
    /* Define el degradado continuo de cian a violeta/naranja */
    background: linear-gradient(135deg, #00f2fe 0%, #9b51e0 50%, #ff6a00 100%);
    
    /* Aplica el degradado directamente al texto */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    
    display: inline-block;
}

.bg-card-pomelia {
    background-color: #0b0f19;
}

.brand-text-gradient {
    background: linear-gradient(135deg, #00e5ff 0%, #a100ff 50%, #ff6b35 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-pomelia-primary {
    background: linear-gradient(135deg, #00a8ff 0%, #7000ff 100%);
    color: #fff;
    border: none;
    transition: all 0.3s ease;
}

.btn-pomelia-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    color: #fff;
}

.btn-pomelia-outline {
    background: transparent;
    border: 1px solid #00e5ff;
    color: #00e5ff;
    transition: all 0.3s ease;
}

.btn-pomelia-outline:hover {
    background: rgba(0, 229, 255, 0.1);
    color: #fff;
    transform: translateY(-2px);
}


.footer-pomelia {
    background-color: #0b0f19;
}

.text-muted-pomelia {
    color: #94a3b8 !important;
}

.footer-links a {
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #00e5ff !important;
}

.social-icon-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: rgba(255, 255, 255, 0.2);
    color: #00e5ff;
}

.social-icon-btn:hover {
    background-color: #00e5ff;
    border-color: #00e5ff;
    color: #0b0f19;
}