/* Variables para mantener la coherencia */
:root {
    --primary-color: #0066ff;
    --primary-hover: #0052cc;
    --dark-bg: #0f172a;
    --light-text: #f8fafc;
    --body-text: #334155;
    --accent: #38bdf8;
    --font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    line-height: 1.6;
    color: var(--body-text);
    background-color: #ffffff;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    
}

/* Header & Nav */
/* Header base */
header {
    position: fixed; /* Lo fijamos a la parte superior */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
    transition: all 0.4s ease; /* Transición suave para todos los cambios */
    background-color: transparent; /* Empieza transparente */
}

/* Esta clase se añadirá mediante JS cuando el usuario haga scroll */
header.scrolled {
    padding: 12px 0; /* Se hace un poco más estrecho */
    background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco con transparencia */
    backdrop-filter: blur(10px); /* Efecto de cristal esmerilado */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 102, 255, 0.1);
}

/* Ajustar colores de los enlaces cuando hay scroll */
header.scrolled nav a {
    color: var(--dark-bg);
}

header.scrolled .logo {
    transform: scale(0.95);
    color: var(--dark-bg);
}
/* Contenedor del logo */
.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 12px; /* Espacio entre el icono y el texto */
    text-decoration: none;
}

/* El icono SVG parpadeante */
.header-icon {
    width: 35px;  /* Tamaño compacto para el header */
    height: 35px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}
.header-icon text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}
.header-icon .prompt { fill: #fff; }

.header-icon .cursor {
    fill: #38bdf8; /* Color cian de tu marca */
    animation: blink 1s infinite step-end;
}
/* Animación de parpadeo (si no la tenías ya) */
@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
/* Importante: Como el header es fixed, "flota" sobre el contenido. 
   Debemos darle un margen superior al primer elemento del main (el Hero) 
   para que no se meta debajo del header al cargar. */
#hero {
    padding-top: 150px; /* Ajusta según el alto de tu header */
}
/* Ocultar burger por defecto */
.burger {
    display: none;
    cursor: pointer;
    margin-right: 20px;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: var(--light-text);
    margin: 5px;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .nav-links {
        position: absolute;
        right: 0px;
        height: 100vh;
        top: 70px;
        background-color: var(--dark-bg);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 70%;
        transform: translateX(100%); /* Escondido a la derecha */
        transition: transform 0.5s ease-in;
        padding-top: 50px;
    }

    .nav-links li { opacity: 0; }
    
    .nav-links.nav-active {
        transform: translateX(0%); /* Entra al pulsar */
    }

    .burger { display: block; }
}

/* Animación de los links al entrar */
.nav-active li {
    animation: navLinkFade 0.5s ease forwards 0.3s;
}

@keyframes navLinkFade {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0px); }
}
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    color: var(--light-text);
    letter-spacing: -1px;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

nav a {
    text-decoration: none;
    color: var(--light-text);
    font-weight: 500;
    transition: color 0.3s;
}

nav a:hover {
    color: var(--primary-color);
}

/* Hero Section - El impacto visual */
#hero {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--dark-bg) 0%, #1e293b 100%);
    color: var(--light-text);
    text-align: center;
}

#hero h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 800;
}

#hero h1 span {
    color: var(--accent);
    display: block; /* Para que la frase de impacto baje sola */
}

#hero p {
    font-size: 1.25rem;
    max-width: 700px;
    margin: 0 auto 40px;
    opacity: 0.9;
}

/* Botones */
.hero-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s, background 0.3s;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
}

.btn-secondary {
    border: 2px solid rgba(255,255,255,0.2);
    color: white;
    padding: 13px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.1);
}
/* Intro de sección */
.section-intro {
    text-align: center;
    margin: 60px;

}
#servicios .badge{
    background-color: var(--dark-bg);
    color: var(--light-text);
}
#metodo .badge{
    background-color: var(--dark-bg);
    color: var(--light-text);
}
.badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700; /* Aumentar el grosor ayuda a la legibilidad */
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* OPCIÓN A: Fondo oscuro con texto neón (Muy legible) */
    background-color: rgba(56, 189, 248, 0.15); /* Cian muy suave de fondo */
    color: #0ea5e9; /* Un cian más oscuro y saturado para cumplir contraste */
    border: 1px solid #0ea5e9;
}

/* Si el badge está sobre un fondo oscuro (como en Diagnóstico), usamos colores más vivos */
#diagnostico .badge {
    background-color: rgba(74, 222, 128, 0.2);
    color: #4ade80; /* Verde brillante sobre fondo oscuro tiene contraste infinito */
    border: 1px solid #4ade80;
}

.section-intro h2 {
    font-size: 2.5rem;
    color: var(--dark-bg);
}

/* Grid de servicios */
/* Sección de Servicios / Soluciones */
#servicios {
    padding: 40px 0;
    background-color: #ffffff;
}

#servicios h2 , #metodo h2{
    text-align: center;
    font-size: 2.5rem;
    padding-top: 40px;
    margin-bottom: 50px;
    color: var(--dark-bg);
    font-weight: 800;
}

/* El contenedor Grid */
#servicios .grid, 
#servicios .services-grid {
    display: grid;
    gap: 25px;
    width: 100%;
}
/* 2. ESCRITORIO (Más de 1024px) -> 4 columnas */
@media (min-width: 1025px) {
    #servicios .grid, 
    #servicios .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 3. TABLET (De 601px a 1024px) -> Tu diseño 2x2 */
@media (max-width: 1024px) and (min-width: 601px) {
    #servicios .grid, 
    #servicios .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 4. MÓVIL (Menos de 600px) -> 1 columna (evita desbordes) */
@media (max-width: 600px) {
    #servicios .grid, 
    #servicios .services-grid {
        grid-template-columns: 1fr;
    }
    
    /* Ajuste de tarjetas para móvil */
    .card, .service-card {
        padding: 20px;
        margin: 0; /* Aseguramos que no haya márgenes externos que empujen la card */
    }
}
/* Estilo de las Tarjetas (Cards) */
#servicios .card {
    background: #f8fafc;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

/* Efecto al pasar el ratón */
#servicios .card:hover {
    transform: translateY(-8px);
    background: #ffffff;
    border-color: var(--primary-color);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Títulos dentro de las tarjetas */
#servicios .card h3 {
    font-size: 1.25rem;
    color: var(--dark-bg);
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
}

/* Una pequeña línea decorativa bajo el título de la card */
#servicios .card h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 2px;
}

/* Texto de descripción */
#servicios .card p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--body-text);
}
#diagnostico {
    padding: 50px 0;
    background-color: #0f172a; /* Fondo muy oscuro */
    color: #fff;
}
#diagnostico h2{
    color: white;
    margin: 15px;
}
.scanner-wrapper {
    max-width: 900px;
    margin: 0 auto;
    background: #1e293b;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.scanner-input-group {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}

.scanner-input-group input {
    flex: 1;
    background: #0f172a;
    border: 1px solid #334155;
    padding: 15px 20px;
    border-radius: 10px;
    color: #fff;
    font-family: inherit;
}
#btn-diagnostico {
    background: #dc2626; /* Un rojo más profundo y profesional */
    color: #ffffff;      /* Blanco puro para máximo contraste */
    border-radius: 12px;
    border: none;
    padding: 12px 25px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Añadimos una altura mínima para mejorar el área de click en móvil */
    min-height: 48px; 
}

#btn-diagnostico:hover {
    background: #b91c1c; /* Rojo más oscuro en hover */
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3); /* Sombra sutil roja */
    transform: translateY(-2px);
}

#btn-diagnostico:active {
    transform: translateY(0);
}
/* Estilo de los resultados */
#results-board {
    background: #0f172a;
    border-radius: 10px;
    padding: 30px;
    border: 1px solid #1e293b;
    transition: opacity 0.5s ease-in-out;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.stat-item label {
    display: block;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 10px;
}

.bar-container {
    height: 6px;
    background: #1e293b;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.bar {
    height: 100%;
    width: 0%;
    transition: width 1s ease;
}

.value { font-weight: bold; font-family: monospace; }

/* Colores de las barras */
#stat-speed .bar { background: #ef4444; } /* Rojo (suele ser el fallo común) */
#stat-security .bar { background: #f59e0b; } /* Ámbar */
#stat-responsive .bar { background: #10b981; } /* Verde */

#console-logs {
    margin-top: 30px;
    font-family: monospace;
    font-size: 0.85rem;
    color: #4ade80;
    height: 100px;
    overflow-y: auto;
    border-top: 1px solid #1e293b;
    padding-top: 20px;
}
/* Contenedor del consejo final */
#final-advice {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px dashed #334155; /* Una línea divisoria técnica */
    text-align: center; /* Centramos todo el contenido */
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeIn 0.8s ease forwards;
    gap: 20px; /* Crea un espacio fijo de 20px entre el texto y el botón */
}

/* El texto del diagnóstico */
.advice-text {
    font-size: 1.1rem;
    line-height: 1.5;
    color: #f8fafc;
    max-width: 600px; /* Para que el texto no se estire demasiado a lo ancho */
}

/* Ajuste específico para el botón dentro del diagnóstico */
#final-advice .btn-primary {
    display: inline-block;
    width: auto; /* Que no ocupe todo el ancho si no es necesario */
    min-width: 250px;
    padding: 15px 40px;
    background-color: #ef4444; /* Color rojo "urgencia" para este botón específico */
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

#final-advice .btn-primary:hover {
    background-color: #dc2626;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.hidden { display: none !important; }


#filosofia {
    padding: 100px 0;
    background-color: #f8fafc; /* Un tono gris muy claro para contrastar con la siguiente sección */
}

#filosofia .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.custom-list {
    list-style: none;
    margin-top: 20px;
}

.custom-list li {
    margin-bottom: 15px;
    padding-left: 30px;
    position: relative;
}
/* Section metodo */
#metodo {
    padding: 30px 0;
    background-color: #ffffff;
}

.timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding-left: 50px; /* Espacio para la línea vertical */
}

/* La línea vertical que une los pasos */
.timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--primary-color), var(--accent), transparent);
}

.step {
    position: relative;
    margin-bottom: 50px;
}

/* El círculo con el número */
.step-number {
    position: absolute;
    left: -50px;
    width: 40px;
    height: 40px;
    background: var(--dark-bg);
    color: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    border: 2px solid var(--primary-color);
    z-index: 1;
}

.step-content {
    background: #f8fafc;
    padding: 25px;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.step:hover .step-content {
    transform: translateX(10px);
    background: #f1f5f9;
}

.step-content h3 {
    margin-bottom: 10px;
    color: var(--dark-bg);
}

.step-content p {
    color: var(--body-text);
    font-size: 0.95rem;
}

/* Efecto de pulso en el círculo activo (opcional) */
.step:first-child .step-number {
    box-shadow: 0 0 0 0 rgba(0, 102, 255, 0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 102, 255, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(0, 102, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 102, 255, 0); }
}
/* Footer */
.main-footer {
    background-color: var(--dark-bg);
    color: #94a3b8;
    padding: 80px 0 30px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 50px;
}

.footer-brand .logo {
    color: #fff;
    margin-bottom: 20px;
}

.footer-brand p {
    max-width: 300px;
}

.footer-links h4, .footer-status h4 {
    color: #fff;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.footer-links ul {
    list-style: none;
}

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

.footer-links a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--accent);
}

/* Indicador de estado (detalle técnico) */
.status-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #fff;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #27c93f;
    border-radius: 50%;
    box-shadow: 0 0 8px #27c93f;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(39, 201, 63, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(39, 201, 63, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(39, 201, 63, 0); }
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

.footer-bottom a { color: inherit; }

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-bottom { flex-direction: column; gap: 15px; text-align: center; }
}

/* Un check técnico como viñeta */
.custom-list li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-family: monospace;
    font-weight: bold;
}

/* Decoración para el bloque de código visual */
.code-window {
    background: #1e293b;
    padding: 30px;
    border-radius: 10px;
    color: var(--accent);
    font-family: monospace;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}


/* Ajuste para tablets/móviles */
@media (max-width: 600px) {
    #servicios h2 {
        font-size: 1.8rem;
    }
    
    #servicios .card {
        padding: 30px;
    }
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(250px, 1fr));
    gap: 30px;
    padding-bottom: 80px;
}

.service-card {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.service-card .icon {
    color: var(--primary-color);
    margin-bottom: 20px;
}

.service-card h3 {
    margin-bottom: 15px;
    font-size: 1.25rem;
    color: var(--dark-bg);
}

.service-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--body-text);
}

/* Estilo para la tarjeta destacada */
.service-card.destacada {
    background: var(--dark-bg);
    color: white;
}

.service-card.destacada h3 {
    color: white;
}

.service-card.destacada p {
    color: #94a3b8;
}

.service-card.destacada .icon {
    color: var(--accent);
}
#servicios .card.destacada {
    background: var(--dark-bg);
    color: white;
}

#servicios .card.destacada h3 {
    color: white;
}

#servicios .card.destacada p {
    color: #94a3b8;
}

#servicios .card.destacada .icon {
    color: var(--accent);
}
/* Section contacto */
#contacto {
    background-color: #f1f5f9;
    padding: 40px 0;
    margin-top: 60px;
}

.terminal-container {
    max-width: 800px;
    margin: 0 auto;
    background: #1e1e1e;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    font-family: 'Courier New', Courier, monospace;
}

.terminal-header {
    background: #333;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.buttons { display: flex; gap: 8px; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.red { background: #ff5f56; }
.yellow { background: #ffbd2e; }
.green { background: #27c93f; }
.terminal-title { color: #aaa; font-size: 0.8rem; }

.terminal-body {
    padding: 30px;
    color: #4af626; /* Verde terminal clásico */
}

#terminal-output { margin-bottom: 20px; font-size: 0.9rem; }
.line span { color: #fff; }

.form-group { margin-bottom: 20px; display: flex; flex-direction: column; }
.form-group label { margin-bottom: 5px; font-weight: bold; font-size: 0.8rem; }

#contact-form input, #contact-form textarea {
    background: transparent;
    border: 1px solid #444;
    color: #fff;
    padding: 10px;
    outline: none;
    font-family: inherit;
}

#contact-form input:focus, #contact-form textarea:focus {
    border-color: #4af626;
}

#btn-terminal {
    background: #4af626;
    color: #000;
    border: none;
    padding: 12px 25px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s;
}

#btn-terminal:hover {
    background: #fff;
    box-shadow: 0 0 15px #4af626;
}

/* Responsive */
@media (max-width: 768px) {
    
}

/* Solo mostrar el botón móvil en pantallas pequeñas */
.mobile-cta-container {
    display: none; /* Oculto en PC */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    touch-action: none; /* Crucial para el arrastre en móviles */
}
.btn-floating {
    width: 65px;
    height: 65px;
    background-color: #ef4444; /* Rojo urgencia */
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
    cursor: move; /* Indica que es movible */
    transition: transform 0.2s active;
}
.btn-floating:active {
    transform: scale(0.9);
}
/* .mobile-cta-container::before , .mobile-cta-container::after{
content:"";
  position:absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border: 10px solid gray;
  border-radius:100%;
  animation: latido linear 3s infinite;
}
.mobile-cta-container::after{
    animation-delay: -1.5s;
}

@keyframes latido {
     0% { width:70px; height:70px; border:10px solid gray; }
  100% { width:120px; height:120px; border:10px solid transparent; }

} */
.btn-terminal-mobile{
    /* width: 42px;
  height: 42px; */
  margin-top: 12px;
  margin-left: 14.5px;
}

.flotante{
    position: fixed; /* Fijo a la ventana del navegador */
  bottom: 20px; /* A 20px del borde inferior */
  right: 20px; /* A 20px del borde derecho */
  z-index: 1000; /* Asegura que esté encima de otros elementos */
}
@media (max-width: 768px) {
    #filosofia .split { grid-template-columns: 1fr; }
    #hero h1 { font-size: 2.5rem; }
    .hero-actions { flex-direction: column; align-items: center; }
    #form-desktop-container { display: none; } /* Oculta tu formulario actual */
    .mobile-cta-container { 
     display:block ;}
   
    .section-intro{
        margin: 15px;
    }
    .section-intro h2{
        padding: 15px 0px;
        font-size: 1.5em;
        color: white;
    }
    .scanner-wrapper{
        padding: 0px;
    }
    #contacto .terminal-container{
        display: none;
    }
}

/* ==========================================================================
   ESTILOS DE LA MODAL (ESTILO TERMINAL)
   ========================================================================== */

/* Contenedor de fondo (Overlay) */
.modal {
    display: none; /* Se controla por JS */
    position: fixed;
    z-index: 20000; /* Por encima de todo, incluso del botón flotante */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.9); /* Azul muy oscuro con transparencia */
    backdrop-filter: blur(5px); /* Efecto cristal traslúcido */
    padding-top: 50px;
}

/* Caja de contenido de la modal */
.modal-content.terminal-style {
    background-color: #0f172a; /* Fondo oscuro puro */
    margin: auto;
    padding: 0;
    border: 1px solid #1e293b;
    border-top: 30px solid #1e293b; /* Simulamos la barra superior de una ventana */
    width: 90%;
    max-width: 500px;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    font-family: var(--font-mono, monospace);
}

/* Botón de cerrar (X) */
.close-modal {
    color: #94a3b8;
    position: absolute;
    right: 15px;
    top: -26px; /* Posicionado en la barra superior simulada */
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.close-modal:hover {
    color: #ef4444; /* Rojo al pasar el ratón */
}

/* Título Nueva Conexión */
.modal-content h3 {
    color: #4ade80; /* Verde terminal */
    padding: 20px 25px 10px;
    font-size: 1.1rem;
    margin: 0;
    letter-spacing: 1px;
}

.modal-content h3::before {
    content: "> ";
}

/* Formulario interno */
#mobile-contact-form {
    padding: 10px 25px 25px;
}

#mobile-contact-form .form-group {
    margin-bottom: 20px;
}

#mobile-contact-form label {
    display: block;
    color: #94a3b8;
    font-size: 0.75rem;
    margin-bottom: 8px;
    font-weight: bold;
}

/* Inputs y Textarea estilo consola */
#mobile-contact-form input, 
#mobile-contact-form textarea {
    width: 100%;
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 12px;
    color: #f8fafc;
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

#mobile-contact-form input:focus, 
#mobile-contact-form textarea:focus {
    border-color: #4ade80;
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.3);
}

/* Botón de envío */
#mobile-contact-form .btn-terminal {
    width: 100%;
    background-color: #4ade80;
    color: #0f172a;
    border: none;
    padding: 15px;
    font-weight: 800;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s;
    margin-top: 10px;
}

#mobile-contact-form .btn-terminal:hover {
    background-color: #22c55e;
    transform: translateY(-1px);
}

/* Espacio para logs/mensajes de éxito tras enviar */
.terminal-output-small {
    margin-top: 15px;
    font-size: 0.8rem;
    color: #4ade80;
    min-height: 20px;
}

/* Animación de entrada */
@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-content {
    animation: modalFadeIn 0.3s ease-out;
}