/* ==========================================================================
   TecnoPlug - Home 2026
   Estilos del rediseño de la pagina principal.
   Se carga SOLO desde index.php, despues de style.css y responsive.css.
   No afecta las paginas satelite ni los paneles.
   Paleta: azul noche -> petroleo -> verde (marca #64b671).
   ========================================================================== */

:root {
    --tp-noche: #0d1b3e;
    --tp-petroleo: #10475e;
    --tp-verde: #14785a;
    --tp-marca: #64b671;
    --tp-menta: #7ce3b1;
    --tp-sombra: rgba(13, 27, 62, 0.15);
}

/* ---------- Tipografia (Inter/Sora se cargan en index.php, Tarea 6) ---------- */

body {
    font-family: 'Inter', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    letter-spacing: 0.1px;
}

h1, h2, h3, h4, h5, h6,
.navbar-nav > li > a,
.btn {
    font-family: 'Sora', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

p {
    line-height: 1.75;
}

/* ---------- Botones animados (familia del plan 04: transicion + hover lift) ---------- */

#page .btn,
.navbar-nav > li > a.header-btn {
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
    will-change: transform;
}

#page .btn:hover,
#page .btn:focus {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(13, 27, 62, 0.28);
}

.navbar-nav > li > a.header-btn:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(13, 27, 62, 0.28);
}

/* Pulso suave para el CTA principal del hero */

@keyframes tp-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(100, 182, 113, 0.55); }
    70%  { box-shadow: 0 0 0 18px rgba(100, 182, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(100, 182, 113, 0); }
}

/* ---------- Hero renovado (#hero-2026, HTML en Tarea 3) ---------- */

#hero-2026 {
    background-image: url(../images/hero-11.jpg);
    background-size: cover;
    background-position: center center;
}

#hero-2026 .hero-overlay {
    background: -webkit-linear-gradient(135deg, rgba(13, 27, 62, 0.94) 0%, rgba(16, 71, 94, 0.88) 55%, rgba(20, 120, 90, 0.85) 100%);
    background: linear-gradient(135deg, rgba(13, 27, 62, 0.94) 0%, rgba(16, 71, 94, 0.88) 55%, rgba(20, 120, 90, 0.85) 100%);
    padding-top: 150px;
    padding-bottom: 0;
}

#hero-2026 .hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tp-menta);
    margin-bottom: 18px;
}

#hero-2026 h1.hero2026-title {
    font-size: 46px;
    line-height: 56px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 22px;
}

#hero-2026 h1.hero2026-title .accent {
    color: var(--tp-menta);
}

#hero-2026 p.hero2026-sub {
    font-size: 20px;
    line-height: 30px;
    color: rgba(255, 255, 255, 0.92);
    padding: 0 6%;
    margin-bottom: 30px;
}

#hero-2026 ul.hero-pilares {
    list-style: none;
    padding: 0;
    margin: 0 0 34px;
}

#hero-2026 ul.hero-pilares li {
    display: inline-block;
    margin: 5px 8px;
    padding: 10px 20px;
    font-size: 15px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.08);
}

#hero-2026 ul.hero-pilares li span {
    margin-right: 8px;
    font-size: 18px;
    vertical-align: -2px;
}

#hero-2026 .hero-cta .btn {
    margin: 6px 8px;
}

#hero-2026 .btn-cta-main {
    background-color: var(--tp-marca);
    border-color: var(--tp-marca);
    color: var(--tp-noche);
    font-weight: 600;
    animation: tp-pulse 2.6s ease-out infinite;
}

#hero-2026 .btn-cta-main:hover,
#hero-2026 .btn-cta-main:focus {
    color: var(--tp-noche);
}

#hero-2026 img.hero2026-img {
    margin-top: 54px;
}

/* Entrada del hero: animacion CSS pura al cargar (sin depender de JS ni de
   jquery.appear, que el template usa solo para secciones bajo el fold) */

@keyframes tp-fade-up {
    from { opacity: 0; -webkit-transform: translateY(26px); transform: translateY(26px); }
    to   { opacity: 1; -webkit-transform: none; transform: none; }
}

#hero-2026 .hero-load {
    opacity: 0;
    animation: tp-fade-up 0.8s ease forwards;
}

#hero-2026 .hero-load.d1 { animation-delay: 0.15s; }
#hero-2026 .hero-load.d2 { animation-delay: 0.30s; }
#hero-2026 .hero-load.d3 { animation-delay: 0.45s; }
#hero-2026 .hero-load.d4 { animation-delay: 0.60s; }
#hero-2026 .hero-load.d5 { animation-delay: 0.80s; }

@media (prefers-reduced-motion: reduce) {
    #hero-2026 .hero-load { opacity: 1; animation: none; }
    #hero-2026 .btn-cta-main { animation: none; }
}

/* ---------- Soluciones con IA y electronica (#soluciones, HTML en Tarea 4) ---------- */

#soluciones {
    background: #f5f8fb;
}

#soluciones .section-title h2 {
    font-weight: 600;
}

#soluciones .sol-card {
    background: #fff;
    border-radius: 14px;
    padding: 38px 26px;
    margin-bottom: 30px;
    text-align: center;
    box-shadow: 0 6px 18px var(--tp-sombra);
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
}

#soluciones .sol-card:hover {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(13, 27, 62, 0.18);
}

#soluciones .sol-card .sol-icon {
    display: inline-block;
    font-size: 54px;
    line-height: 1;
    color: var(--tp-verde);
    margin-bottom: 18px;
}

#soluciones .sol-card h4 {
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 12px;
}

#soluciones .sol-card p {
    color: #555;
    font-size: 16px;
    margin-bottom: 0;
}

@media (min-width: 992px) {
    #soluciones .sol-card { min-height: 268px; }
}

/* ---------- BeetWallet / presencia regional (#beetwallet, HTML en Tarea 4) ---------- */

#beetwallet {
    background: -webkit-linear-gradient(120deg, var(--tp-noche) 0%, var(--tp-petroleo) 55%, var(--tp-verde) 100%);
    background: linear-gradient(120deg, var(--tp-noche) 0%, var(--tp-petroleo) 55%, var(--tp-verde) 100%);
    color: #fff;
    padding-top: 80px;
    padding-bottom: 80px;
}

#beetwallet .beet-icon span {
    font-size: 96px;
    line-height: 1;
    color: var(--tp-menta);
}

#beetwallet h2 {
    color: #fff;
    font-weight: 300;
    margin-bottom: 18px;
}

#beetwallet h2 span {
    font-weight: 600;
    color: var(--tp-menta);
}

#beetwallet p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 24px;
}

#beetwallet .btn-beet {
    background-color: var(--tp-marca);
    border-color: var(--tp-marca);
    color: var(--tp-noche);
    font-weight: 600;
}

#beetwallet .btn-beet:hover,
#beetwallet .btn-beet:focus {
    color: var(--tp-noche);
}

/* ---------- Footer (HTML en Tarea 6) ---------- */

#footer-4 {
    background: var(--tp-noche);
    padding-bottom: 30px;
}

#footer-4 .footer-copyright p,
#footer-4 .footer-links li a {
    color: rgba(255, 255, 255, 0.72);
}

#footer-4 .footer-links li a:hover {
    color: #fff;
}

#footer-4 .footer-tag {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    line-height: 18px !important;
    margin-top: 8px;
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
    #hero-2026 .hero-overlay { padding-top: 130px; }
    #hero-2026 h1.hero2026-title { font-size: 36px; line-height: 44px; }
}

@media (max-width: 767px) {
    #hero-2026 .hero-overlay { padding-top: 120px; padding-bottom: 0; }
    #hero-2026 h1.hero2026-title { font-size: 29px; line-height: 37px; }
    #hero-2026 p.hero2026-sub { font-size: 17px; line-height: 26px; padding: 0; }
    #hero-2026 ul.hero-pilares li { font-size: 13px; padding: 8px 14px; }
    #hero-2026 img.hero2026-img { margin-top: 34px; }
    #beetwallet .beet-icon { margin-bottom: 20px; }
    #beetwallet .beet-icon span { font-size: 64px; }
}