/*
* Nombre del archivo: landing-components.css
* Ubicación: /assets/css/landing-components.css
* Descripción: Componentes neón, carrusel, tarjetas y modales del landing.
*/

.admin-pill, .rate-pill, .quote-glow, .tracking-controls button, .btn-neon {
    border: 1px solid rgba(129, 205, 255, 0.9);
    color: var(--landing-white);
    cursor: pointer;
    font-weight: 900;
    text-decoration: none;
    text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}

.admin-pill { padding: 10px 24px; border-radius: 9px; background: linear-gradient(180deg, #106fe9, #0753c3); box-shadow: var(--landing-shadow-blue); }
.rate-pill, .quote-glow { background: linear-gradient(180deg, #ff1e25, #b50011); box-shadow: var(--landing-shadow-red), inset 0 0 10px rgba(255,255,255,0.24); }
.rate-pill { padding: 14px 20px; border-radius: 10px; }
.quote-glow { margin-top: 18px; padding: 12px 18px; border-radius: 9px; }

.landing-shell { padding-top: 82px; }
.hero-carousel { position: relative; height: clamp(306px, calc(100vh - 339px), 416px); overflow: hidden; }
.hero-carousel::before, .hero-carousel::after { content: ''; position: absolute; right: 0; left: 0; z-index: 4; height: 3px; pointer-events: none; }
.hero-carousel::before { top: 0; background: linear-gradient(90deg, var(--landing-cyan), var(--landing-red)); }
.hero-carousel::after { bottom: 0; background: linear-gradient(90deg, var(--landing-red), var(--landing-cyan)); }
.landing-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; }
.landing-slide.active { opacity: 1; }
.landing-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; filter: saturate(1.1) contrast(1.08); }
.landing-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(5,12,30,0.08) 58%, transparent); }

.hero-copy-panel {
    position: absolute;
    right: 6%;
    bottom: 28px;
    transform: none;
    width: fit-content;
    max-width: min(760px, 82vw);
    padding: 15px 18px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    border: 1px solid rgba(116, 185, 255, 0.55);
    border-radius: 10px;
    background: rgba(15, 28, 49, 0.72);
    box-shadow: inset 0 0 28px rgba(255,255,255,0.06), 0 0 24px rgba(0,0,0,0.38);
    backdrop-filter: blur(12px);
}
.hero-copy-panel h1 { font-size: clamp(1.34rem, 2.05vw, 1.78rem); line-height: 1.08; font-weight: 900; }
.hero-copy-panel .quote-glow { flex: 0 0 auto; margin-top: 0; white-space: nowrap; }
.hero-arrow { position: absolute; top: 47%; transform: translateY(-50%); border: 0; background: transparent; color: #fff; font-size: 2.2rem; cursor: pointer; text-shadow: 0 0 12px #000; }
.hero-arrow-left { left: 18px; }
.hero-arrow-right { right: 18px; }
.landing-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 10px; }
.landing-dot { width: 11px; height: 11px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.45); cursor: pointer; }
.landing-dot.active { background: #fff; box-shadow: 0 0 10px var(--landing-cyan); }

.tracking-band { position: relative; z-index: 3; margin: 10px 0; display: flex; justify-content: center; }
.tracking-box { width: min(700px, 92vw); padding: 11px 16px; display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 8px; border-radius: 12px; border: 1px solid transparent; background: linear-gradient(var(--landing-panel), var(--landing-panel)) padding-box, linear-gradient(120deg, var(--landing-red), var(--landing-cyan)) border-box; box-shadow: 0 0 8px rgba(255, 25, 47, 0.28), 0 0 10px rgba(17, 185, 255, 0.32); backdrop-filter: blur(14px); }
.tracking-box label { display: flex; align-items: center; margin-bottom: 0; text-align: left; font-size: 1rem; line-height: 1.15; font-weight: 900; }
.tracking-controls { display: grid; grid-template-columns: 1fr 145px; gap: 10px; }
.tracking-controls input { min-width: 0; padding: 10px 14px; border: 1px solid rgba(137, 170, 216, 0.45); border-radius: 8px; background: rgba(255,255,255,0.08); color: #fff; }
.tracking-controls button { border-radius: 9px; background: linear-gradient(180deg, #147cf0, #045bc8); box-shadow: var(--landing-shadow-blue); }

.services-grid { width: min(1240px, 94vw); margin: 0 auto 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.service-card { position: relative; min-width: 0; min-height: 78px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(14,27,52,0.46) 48%, rgba(255,255,255,0.08)); box-shadow: inset 0 1px 18px rgba(255,255,255,0.08), 0 8px 22px rgba(0,0,0,0.18); backdrop-filter: blur(14px); overflow: hidden; transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease, box-shadow 0.24s ease; }
.service-card:hover { transform: translateY(-5px); border-color: rgba(17,185,255,0.55); background: linear-gradient(135deg, rgba(255,255,255,0.24), rgba(13,54,92,0.58) 46%, rgba(255,25,47,0.13)); box-shadow: inset 0 1px 20px rgba(255,255,255,0.1), 0 12px 26px rgba(0,0,0,0.22); }
.service-icon { flex: 0 0 48px; font-size: 2.5rem; color: #858f9d; filter: none; transition: color 0.24s ease, filter 0.24s ease; }
.service-card:hover .service-icon { color: var(--landing-cyan); filter: drop-shadow(0 0 5px rgba(17,185,255,0.38)); }
.service-copy { min-width: 0; }
.service-card h2 { font-size: 0.9rem; line-height: 1.15; overflow-wrap: anywhere; }
.service-card p { margin-top: 3px; color: #858f9d; font-size: 0.84rem; line-height: 1.2; overflow-wrap: anywhere; }