/* =====================================================
   Proyecto Final - WA SISTEMAS.
   Desarrollado por William Agudelo - 2026
===================================================== */

@font-face {
    font-family: "AlexBrush";
    src: url("../fonts/alexbrush-regular.woff2") format("woff2"),
        url("../fonts/alexbrush-regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


:root {
    --bg: #07111f;
    --bg-2: #0d1b2f;
    --card: #111c30;
    --text: #eef6ff;
    --muted: #b7c4d6;
    --primary: #00d9ff;
    --primary-2: #0bbfe3;
    --success: #25d366;
    --danger: #ff5c70;
    --light: #f4f7fb;
    --dark-text: #101828;
    --radius: 22px;
    --shadow: 0 16px 35px rgba(0, 0, 0, .30);
}

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

html {
    scroll-behavior: smooth
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(180deg, #07111f 0%, #0b1526 100%);
    color: var(--text);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block
}

a {
    text-decoration: none;
    color: inherit
}

/* Header */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 16px 48px;
    background: rgba(7, 17, 31, .88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 217, 255, .16);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
}

.logo {
    display: flex;
    align-items: center;
    gap: 14px
}

.logo img {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(0, 217, 255, .20);
}

.logo h2 {
    font-size: 26px;
    letter-spacing: .8px;
    color: var(--text)
}

.nav {
    display: block
}

.menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.menu a {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    color: var(--text);
    font-weight: 600;
    transition: .25s ease;
}

.menu a:hover {
    background: rgba(0, 217, 255, .12);
    color: var(--primary);
}

.submenu {
    position: relative
}

.dropdown {
    position: absolute;
    top: 48px;
    left: 0;
    width: 265px;
    list-style: none;
    padding: 10px;
    border-radius: 16px;
    background: #0f1a2d;
    border: 1px solid rgba(0, 217, 255, .16);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .25s ease;
}

.submenu:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown a {
    font-size: 15px;
    padding: 12px 14px
}

.menu-toggle {
    display: none;
    border: none;
    background: var(--primary);
    color: #00101a;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 24px;
    cursor: pointer;
    font-weight: bold;
}

#modoOscuro {
    border: none;
    background: linear-gradient(135deg, var(--primary), #3ee8ff);
    color: #00101a;
    padding: 12px 18px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 18px;
    box-shadow: 0 10px 25px rgba(0, 217, 255, .25);
}

/* Botones */
.boton,
form button {
    display: inline-block;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #00101a;
    padding: 14px 26px;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 800;
    transition: .25s ease;
    box-shadow: 0 12px 25px rgba(0, 217, 255, .22);
}

.boton:hover,
form button:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 35px rgba(0, 217, 255, .30);
}

/* Banner */
.banner {
    min-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 22px;
    background:
        radial-gradient(circle at 30% 20%, rgba(0, 217, 255, .20), transparent 28%),
        linear-gradient(rgba(2, 6, 14, .72), rgba(2, 6, 14, .76)),
        url("../imagenes/banner.jpg");
    background-size: cover;
    background-position: center;
}

.overlay {
    max-width: 980px;
    text-align: center;
    padding: 56px;
    border-radius: 30px;
    background: rgba(10, 24, 42, .70);
    border: 1px solid rgba(0, 217, 255, .18);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow);
}

.overlay h1 {
    font-size: clamp(38px, 6vw, 72px);
    line-height: 1.05;
    margin-bottom: 22px;
}

.overlay p {
    font-size: clamp(18px, 2.2vw, 25px);
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 34px;
}

/* Secciones */
section {
    scroll-margin-top: 105px
}

.servicios,
.galeria,
.faq,
.contacto {
    padding: 88px 24px;
    text-align: center;
}

.servicios h2,
.galeria h2,
.faq h2,
.contacto h2,
.video-section h2 {
    font-size: clamp(32px, 4vw, 50px);
    margin-bottom: 46px;
    color: var(--text);
}

.contenedor {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}

/* Cards de servicios */
.card-link {
    display: block;
    color: inherit;
    text-decoration: none !important;
}

.card-link * {
    text-decoration: none !important
}

.card {
    width: 320px;
    min-height: 560px;
    background: linear-gradient(180deg, #132036 0%, #0f1a2d 100%);
    border: 1px solid rgba(0, 217, 255, .16);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    transition: .28s ease;
}

.card:hover {
    transform: translateY(-10px);
    border-color: rgba(0, 217, 255, .42);
    box-shadow: 0 18px 45px rgba(0, 217, 255, .18);
}

.card img {
    width: 100%;
    height: 210px;
    object-fit: cover;
}

.card h3 {
    font-size: 24px;
    line-height: 1.15;
    padding: 24px 20px 14px;
    color: var(--text);
}

.servicios .card ul {
    list-style: none;
    padding: 0 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.servicios .card li {
    background: rgba(0, 217, 255, .08);
    border: 1px solid rgba(0, 217, 255, .14);
    color: #dce9f8;
    border-radius: 12px;
    padding: 10px 12px;
    text-align: center;
    font-size: 15.5px;
    line-height: 1.35;
}

.servicios .card li::before {
    content: "✔ ";
    color: var(--primary);
    font-weight: bold;
}

.ver-mas {
    align-self: center;
    margin: 0 auto 24px;
    padding: 11px 18px;
    border-radius: 12px;
    color: #00101a;
    background: linear-gradient(135deg, var(--primary), #8cf4ff);
    font-weight: 800;
    transition: .25s ease;
}

.card:hover .ver-mas {
    transform: scale(1.03)
}

/* Galería */
.galeria {
    background: #081426;
}

.galeria-card {
    min-height: 260px;
    width: 320px;
}

.galeria-card img {
    height: 260px;
    object-fit: cover;
}

/* FAQ */
.faq {
    background: linear-gradient(180deg, #07111f, #0c1a2e);
}

.faq-contenedor {
    max-width: 920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    background: var(--card);
    border: 1px solid rgba(0, 217, 255, .16);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

.faq-pregunta {
    width: 100%;
    padding: 22px;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 19px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.faq-pregunta::after {
    content: "+";
    float: right;
    color: var(--primary);
    font-size: 26px;
}

.faq-item.activo .faq-pregunta::after {
    content: "−"
}

.faq-respuesta {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.faq-respuesta p {
    padding: 0 22px 22px;
    color: var(--muted);
    line-height: 1.7;
    text-align: left;
}

/* Nosotros */
.nosotros {
    padding: 95px 8%;
    background: var(--bg);
}

.container-nosotros {
    display: flex;
    gap: 46px;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
}

.nosotros-texto,
.nosotros-ventajas {
    flex: 1;
    min-width: 310px;
    background: rgba(17, 28, 48, .70);
    border: 1px solid rgba(0, 217, 255, .14);
    border-radius: 24px;
    padding: 38px;
    box-shadow: var(--shadow);
}

.nosotros-texto h2,
.nosotros-ventajas h2 {
    font-size: clamp(30px, 4vw, 46px);
    text-align: center;
    margin-bottom: 26px;
}

.nosotros-texto p {
    color: var(--muted);
    font-size: 19px;
    line-height: 1.85;
    margin-bottom: 18px;
    text-align: justify;
}

.nosotros-ventajas ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nosotros-ventajas li {
    background: rgba(0, 217, 255, .08);
    border-radius: 12px;
    padding: 13px;
    color: #dce9f8;
    text-align: center;
    font-size: 18px;
}

/* Video */
.video-section {
    padding: 70px 20px;
    text-align: center;
    background: #0f1a2d;
}

.video-player {
    width: 100%;
    max-width: 900px;
    border-radius: 20px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 217, 255, .16);
}

/* Formulario */
form {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: left;
    background: rgba(17, 28, 48, .72);
    border: 1px solid rgba(0, 217, 255, .16);
    border-radius: 24px;
    padding: 34px;
    box-shadow: var(--shadow);
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.campo label {
    font-weight: 800;
    color: var(--text)
}

input,
textarea,
select {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    padding: 15px;
    font-size: 16px;
    outline: none;
    background: #f8fbff;
    color: #111827;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0, 217, 255, .20);
}

textarea {
    resize: none;
    min-height: 150px
}

.error {
    color: var(--danger);
    min-height: 18px;
    font-size: 14px;
}

.input-error {
    border-color: var(--danger) !important
}

.input-ok {
    border-color: #00b894 !important
}

.privacidad-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--muted);
}

.privacidad-check input {
    width: auto;
    margin-top: 3px
}

.privacidad-check a {
    color: var(--primary);
    font-weight: bold
}

.form-ok {
    text-align: center;
    color: #00b894;
    font-weight: 800
}

/* Servicio detalle */
.detalle-servicio,
.legal {
    padding: 90px 8%;
    background: var(--bg);
}

.detalle-hero {
    max-width: 1000px;
    margin: 0 auto 60px;
    text-align: center;
}

.detalle-hero h1,
.legal h1 {
    font-size: clamp(36px, 5vw, 56px);
    margin-bottom: 22px;
    color: var(--primary);
}

.detalle-hero p,
.legal p,
.legal li {
    color: var(--muted);
    font-size: 19px;
    line-height: 1.8;
}

.grid-servicio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 38px;
    margin-bottom: 56px;
}

.servicio-texto,
.servicio-imagen {
    flex: 1;
    min-width: 310px;
}

.servicio-texto {
    background: var(--card);
    border: 1px solid rgba(0, 217, 255, .16);
    border-radius: 24px;
    padding: 38px;
    box-shadow: var(--shadow);
}

.servicio-texto h2,
.servicio-texto h3 {
    color: var(--primary);
    font-size: 32px;
    margin-bottom: 22px;
}

.servicio-texto ul {
    padding-left: 22px
}

.servicio-texto li {
    color: #dce9f8;
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 10px;
}

.servicio-imagen img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.badges {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 28px;
}

.badges span {
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(0, 217, 255, .10);
    border: 1px solid rgba(0, 217, 255, .20);
    color: var(--primary);
    font-weight: 800;
}

.cta-servicio {
    text-align: center;
    margin-top: 20px
}

/* Legal */
.legal {
    max-width: 1050px;
    margin: 0 auto;
}

.legal h2 {
    margin: 30px 0 12px;
    color: var(--text);
}

.legal ul {
    padding-left: 24px
}

/* Gracias */
.gracias {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--bg);
}

.gracias-box {
    max-width: 700px;
    text-align: center;
    background: var(--card);
    border: 1px solid rgba(0, 217, 255, .16);
    padding: 55px;
    border-radius: 28px;
    box-shadow: var(--shadow);
}

.gracias-box h1 {
    font-size: 42px;
    margin-bottom: 20px
}

.gracias-box p {
    font-size: 20px;
    color: var(--muted);
    margin-bottom: 28px
}

/* Popup y WhatsApp */
.popup {
    position: fixed;
    right: 22px;
    bottom: 95px;
    width: 370px;
    z-index: 2000;
    background: #fff;
    color: #111827;
    border: 1px solid rgba(255, 92, 112, .35);
    border-radius: 24px;
    padding: 26px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .24);
}

.popup h2 {
    margin-bottom: 14px
}

.popup p {
    margin-bottom: 14px;
    line-height: 1.4
}

#contador {
    color: #e63946;
    font-weight: 900
}

.popup button {
    width: 100%;
    border: none;
    border-radius: 12px;
    background: var(--primary);
    color: #00101a;
    padding: 13px;
    cursor: pointer;
    font-weight: 800;
}

.whatsapp-flotante {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    z-index: 2500;
    box-shadow: var(--shadow);
    transition: .25s ease;
}

.whatsapp-flotante:hover {
    transform: scale(1.08)
}

/* Footer */
footer {
    background: #030914;
    text-align: center;
    padding: 48px 20px;
    border-top: 1px solid rgba(0, 217, 255, .12);
}

footer h3 {
    font-size: 28px;
    margin-bottom: 15px
}

footer p {
    margin: 10px 0;
    color: var(--muted)
}

footer a {
    color: var(--primary)
}

footer a:hover {
    text-decoration: underline
}

/* Modo claro */
.dark {
    background: var(--light);
    color: var(--dark-text);
}

.dark .header,
.dark footer {
    background: #d8dee7
}

.dark .logo h2,
.dark .menu a,
.dark footer p {
    color: var(--dark-text)
}

.dark .banner {
    background:
        linear-gradient(rgba(255, 255, 255, .76), rgba(255, 255, 255, .78)),
        url("../imagenes/banner.jpg");
    background-size: cover;
    background-position: center;
}

.dark .overlay,
.dark form,
.dark .nosotros-texto,
.dark .nosotros-ventajas,
.dark .servicio-texto,
.dark .faq-item,
.dark .card,
.dark .gracias-box {
    background: #fff;
    color: var(--dark-text);
}

.dark .overlay h1,
.dark .card h3,
.dark .nosotros-texto h2,
.dark .nosotros-ventajas h2,
.dark .faq-pregunta,
.dark .legal h2,
.dark .gracias-box h1 {
    color: var(--dark-text)
}

.dark .overlay p,
.dark .nosotros-texto p,
.dark .faq-respuesta p,
.dark .detalle-hero p,
.dark .servicio-texto li,
.dark .legal p,
.dark .legal li,
.dark .gracias-box p {
    color: #344054
}

.dark .servicios,
.dark .galeria,
.dark .faq,
.dark .nosotros,
.dark .detalle-servicio,
.dark .legal,
.dark .contacto {
    background: #f4f7fb
}

.dark .servicios h2,
.dark .galeria h2,
.dark .faq h2,
.dark .contacto h2,
.dark .video-section h2 {
    color: var(--dark-text)
}

.dark .servicios .card li,
.dark .nosotros-ventajas li {
    background: #eef9fc;
    color: #344054
}

.dark .dropdown {
    background: #fff
}

.dark .dropdown a {
    color: var(--dark-text)
}

/* Responsive */
@media (max-width:900px) {
    .header {
        flex-wrap: wrap;
        padding: 14px 18px;
    }

    .menu-toggle {
        display: block;
        order: 3;
        width: 100%;
    }

    .nav {
        display: none;
        width: 100%;
        order: 4;
    }

    .nav.activo {
        display: block
    }

    .menu {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .menu li {
        width: 100%
    }

    .menu a {
        text-align: center;
        background: rgba(0, 217, 255, .08);
        border: 1px solid rgba(0, 217, 255, .14);
    }

    .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        width: 100%;
        margin-top: 8px;
        background: transparent;
        box-shadow: none;
        border: none;
        padding: 0;
    }
}

@media (max-width:768px) {
    section {
        scroll-margin-top: 140px
    }

    .logo img {
        width: 50px;
        height: 50px
    }

    .logo h2 {
        font-size: 21px
    }

    #modoOscuro {
        padding: 9px 13px
    }

    .banner {
        min-height: 78vh;
        padding: 28px 15px
    }

    .overlay {
        padding: 34px 20px;
        border-radius: 24px
    }

    .servicios,
    .galeria,
    .faq,
    .contacto {
        padding: 58px 15px
    }

    .card {
        width: 100%;
        max-width: 390px;
        min-height: auto
    }

    .card img {
        height: 210px
    }

    .contenedor {
        gap: 24px
    }

    form {
        padding: 24px
    }

    .container-nosotros {
        gap: 26px
    }

    .nosotros {
        padding: 60px 18px
    }

    .nosotros-texto,
    .nosotros-ventajas {
        padding: 26px;
        min-width: 100%
    }

    .nosotros-texto p {
        text-align: left;
        font-size: 17px
    }

    .grid-servicio {
        gap: 26px
    }

    .servicio-texto {
        padding: 26px
    }

    .popup {
        width: 90%;
        right: 5%;
        bottom: 92px;
    }

    footer {
        padding-bottom: 90px
    }
}

/* =====================================================
   AJUSTES FINALES DE DISEÑO - WA SISTEMAS
   Mejora visual escritorio, tema claro, banner y servicios
===================================================== */

/* Banner más elegante y menos grande */
.banner {
    min-height: 72vh;
    padding: 42px 22px;
    background:
        radial-gradient(circle at 28% 18%, rgba(0, 217, 255, .16), transparent 25%),
        linear-gradient(rgba(2, 6, 14, .62), rgba(2, 6, 14, .70)),
        url("../imagenes/banner.jpg");
    background-size: cover;
    background-position: center;
}

.overlay {
    max-width: 820px;
    padding: 38px 42px;
    border-radius: 26px;
    background: rgba(7, 17, 31, .72);
}

.overlay::before {
    content: "WA Sistemas";
    display: block;
    font-family: "AlexBrush", cursive;
    font-size: 38px;
    color: #8cf4ff;
    margin-bottom: 6px;
    line-height: 1;
}

.overlay h1 {
    font-size: clamp(30px, 4.2vw, 54px);
    line-height: 1.08;
    margin-bottom: 16px;
}

.overlay p {
    font-size: clamp(16px, 1.6vw, 20px);
    line-height: 1.55;
    margin-bottom: 28px;
}

/* Servicios: 5 tarjetas juntas en escritorio */
.servicios {
    padding-top: 70px;
    padding-bottom: 70px;
}

.servicios .contenedor {
    width: min(1520px, 96vw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(210px, 1fr));
    gap: 18px;
    align-items: stretch;
}

.servicios .card-link {
    height: 100%;
}

.servicios .card {
    width: 100%;
    min-height: 510px;
    border-radius: 18px;
}

.servicios .card img {
    height: 170px;
}

.servicios .card h3 {
    font-size: 21px;
    padding: 18px 14px 10px;
    margin: 0;
}

.servicios .card ul {
    padding: 0 14px 16px;
    gap: 8px;
}

.servicios .card li {
    font-size: 14px;
    padding: 8px 9px;
    line-height: 1.3;
}

.ver-mas {
    margin-bottom: 18px;
    padding: 10px 15px;
    font-size: 14px;
}

/* Secciones más proporcionadas */
.servicios h2,
.galeria h2,
.faq h2,
.contacto h2,
.video-section h2 {
    font-size: clamp(30px, 3.2vw, 44px);
}

/* Tema claro corregido - Banner */
.dark .banner {
    background:
        linear-gradient(rgba(255, 255, 255, .70), rgba(255, 255, 255, .72)),
        url("../imagenes/banner.jpg");
    background-size: cover;
    background-position: center;
}

.dark .overlay {
    background: rgba(255, 255, 255, .92);
    color: #101828;
    border: 1px solid rgba(0, 217, 255, .18);
    box-shadow: 0 16px 38px rgba(16, 24, 40, .18);
}

.dark .overlay::before {
    color: #007fa3;
}

.dark .overlay h1 {
    color: #101828;
}

.dark .overlay p {
    color: #344054;
}

/* Tema oscuro - Banner */
body:not(.dark) .banner {
    background:
        linear-gradient(rgba(2, 6, 14, .72), rgba(2, 6, 14, .76)),
        url("../imagenes/banner.jpg");
    background-size: cover;
    background-position: center;
}

body:not(.dark) .overlay {
    background: rgba(7, 17, 31, .72);
    color: #ffffff;
    border: 1px solid rgba(0, 217, 255, .18);
}

body:not(.dark) .overlay::before {
    color: #8cf4ff;
}

body:not(.dark) .overlay h1 {
    color: #ffffff;
}

body:not(.dark) .overlay p {
    color: #dce9f8;
}

/* Labels del formulario en tema claro */
.dark .campo label,
.dark .privacidad-check {
    color: #344054;
}

.dark .contacto form {
    background: #ffffff;
    color: #101828;
}

.dark input,
.dark textarea,
.dark select {
    background: #ffffff;
    color: #101828;
    border: 1px solid #cbd5e1;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #667085;
}

/* Video en tema claro sin recuadro oscuro */
.dark .video-section {
    background: #f4f7fb;
}

.dark .video-player {
    background: #ffffff;
    border: 1px solid #d0d5dd;
    box-shadow: 0 14px 30px rgba(16, 24, 40, .12);
}

/* Mejoras de lectura en tema claro */
.dark .faq-pregunta {
    color: #101828;
}

.dark .privacidad-check a {
    color: #007fa3;
}

/* Responsivo: en pantallas medianas pasan a 3 columnas */
@media (max-width:1200px) {
    .servicios .contenedor {
        grid-template-columns: repeat(3, minmax(240px, 1fr));
        width: min(1050px, 94vw);
    }

    .servicios .card {
        min-height: 520px;
    }
}

/* Tablet: 2 columnas */
@media (max-width:900px) {
    .servicios .contenedor {
        grid-template-columns: repeat(2, minmax(230px, 1fr));
        width: 94vw;
    }

    .banner {
        min-height: 68vh;
    }

    .overlay {
        padding: 34px 24px;
    }

    .overlay::before {
        font-size: 34px;
    }
}

/* Móvil: 1 columna y menú limpio */
@media (max-width:600px) {
    .servicios .contenedor {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .servicios .card {
        max-width: 390px;
        margin: 0 auto;
        min-height: auto;
    }

    .servicios .card img {
        height: 205px;
    }

    .banner {
        min-height: 62vh;
        padding: 24px 14px;
    }

    .overlay {
        padding: 28px 18px;
        border-radius: 22px;
    }

    .overlay h1 {
        font-size: 32px;
    }

    .overlay p {
        font-size: 16px;
    }

    .overlay::before {
        font-size: 32px;
    }
}

/* =====================================================
   POPUP INVERSO AL TEMA
===================================================== */

/* SITIO OSCURO -> POPUP BLANCO */
.popup {
    background: #ffffff;
    color: #101828;
    border: 1px solid rgba(255, 92, 112, .35);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .24);
}

.popup h2,
.popup p {
    color: #101828;
}

.popup button {
    background: var(--primary);
    color: #00101a;
}

#contador {
    color: #e63946;
    font-weight: 900;
}

/* SITIO CLARO -> POPUP OSCURO */
.dark .popup {
    background: #111c30;
    color: #eef6ff;
    border: 1px solid rgba(0, 217, 255, .25);
}

.dark .popup h2,
.dark .popup p {
    color: #eef6ff;
}

.dark .popup button {
    background: var(--primary);
    color: #00101a;
}

.dark #contador {
    color: #ff6b7a;
}

@media (max-width:768px) {

    .popup {
        width: 92%;
        left: 4%;
        right: auto;
        bottom: 90px;
        padding: 20px;
        border-radius: 20px;
    }

    .popup h2 {
        font-size: 24px;
    }

    .popup p {
        font-size: 16px;
    }
}

/* =====================================================
   ORDEN CORRECTO EN MÓVIL - PÁGINAS DE SERVICIOS
   Imagen primero, texto después, imagen, texto
===================================================== */

@media (max-width:768px) {

    .detalle-servicio .grid-servicio {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
        margin-bottom: 42px !important;
    }

    .detalle-servicio .grid-servicio .servicio-imagen {
        order: 1 !important;
        width: 100% !important;
    }

    .detalle-servicio .grid-servicio .servicio-texto {
        order: 2 !important;
        width: 100% !important;
    }

    .detalle-servicio .servicio-imagen img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: cover !important;
        border-radius: 22px !important;
        display: block !important;
    }
}

/* =====================================================
   CENTRAR PÁGINAS INTERNAS DE SERVICIOS EN ESCRITORIO
===================================================== */

.detalle-servicio {
    max-width: 1500px;
    margin: 0 auto;
}

.grid-servicio {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.servicio-imagen,
.servicio-texto {
    flex: 0 1 560px;
}

.servicio-imagen img {
    width: 100%;
    height: 360px;
    object-fit: cover;
}

/* =====================================================
   POPUP INVERSO CORRECTO EN WEB Y MÓVIL
   En tu proyecto .dark = modo claro
===================================================== */

/* Página oscura -> popup blanco */
body:not(.dark) .popup {
    background: #ffffff !important;
    color: #101828 !important;
    border: 1px solid rgba(255, 92, 112, .35) !important;
}

body:not(.dark) .popup h2,
body:not(.dark) .popup p {
    color: #101828 !important;
}

body:not(.dark) #contador {
    color: #e63946 !important;
}

/* Página clara -> popup oscuro */
body.dark .popup {
    background: #111c30 !important;
    color: #eef6ff !important;
    border: 1px solid rgba(0, 217, 255, .25) !important;
}

body.dark .popup h2,
body.dark .popup p {
    color: #eef6ff !important;
}

body.dark #contador {
    color: #ff6b7a !important;
}

/* Popup móvil */
@media (max-width:768px) {
    .popup {
        width: 92% !important;
        left: 4% !important;
        right: auto !important;
        bottom: 90px !important;
        padding: 20px !important;
        border-radius: 20px !important;
    }

    .popup button {
        width: 100% !important;
    }

    .servicio-imagen,
    .servicio-texto {
        flex: unset;
        width: 100%;
    }

    .servicio-imagen img {
        height: auto;
    }
}

/* =====================================================
   POPUP FINAL DEFINITIVO - WEB Y MÓVIL
   En este proyecto .dark = modo claro
===================================================== */

/* Página en modo oscuro -> popup blanco */
html body:not(.dark) #popup.popup {
    background: #ffffff !important;
    color: #101828 !important;
    border: 1px solid rgba(255, 92, 112, .35) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .24) !important;
}

html body:not(.dark) #popup.popup h2,
html body:not(.dark) #popup.popup p {
    color: #101828 !important;
}

html body:not(.dark) #contador {
    color: #e63946 !important;
}

/* Página en modo claro -> popup oscuro */
html body.dark #popup.popup {
    background: #111c30 !important;
    color: #eef6ff !important;
    border: 1px solid rgba(0, 217, 255, .25) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .35) !important;
}

html body.dark #popup.popup h2,
html body.dark #popup.popup p {
    color: #eef6ff !important;
}

html body.dark #contador {
    color: #ff6b7a !important;
}

/* Posición y tamaño del popup en móvil */
@media (max-width:768px) {
    html body #popup.popup {
        width: 92% !important;
        max-width: 420px !important;
        left: 4% !important;
        right: auto !important;
        bottom: 90px !important;
        padding: 20px !important;
        border-radius: 20px !important;
        z-index: 9999 !important;
    }

    html body #popup.popup h2 {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    html body #popup.popup p {
        font-size: 15px !important;
        line-height: 1.45 !important;
    }

    html body #popup.popup button {
        width: 100% !important;
        padding: 13px !important;
        border-radius: 12px !important;
        font-weight: 800 !important;
    }
}

/* =====================================================
   CORRECCIÓN DEFINITIVA FECHA + HORA FORMULARIO
   Se reemplaza datetime-local por date + time para móviles
===================================================== */

.fecha-hora-grupo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
}

.fecha-hora-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.fecha-hora-campo span {
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
}

.fecha-hora-campo input {
    width: 100%;
    min-width: 0;
    height: 56px;
    padding: 14px 15px;
    box-sizing: border-box;
}

.dark .fecha-hora-campo span {
    color: #344054;
}

@media (max-width:768px) {

    /* REESTRUCTURACIÓN COMPLETA PARA EVITAR EL DESBORDAMIENTO EN MÓVILES */
    .fecha-hora-grupo {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .fecha-hora-campo {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .fecha-hora-campo input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: 56px !important;
        display: block !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 14px 15px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
    }
}

/* ==========================================================================
   SOLUCIÓN PARCHE DE ENFOQUE ADICIONAL PARA CAMPOS FECHA/HORA EN NAVEGADORES MÓVILES
   ========================================================================== */
input[type="datetime-local"],
input[type="date"],
input[type="time"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #f8fbff !important;
    color: #111827 !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 12px !important;
    padding: 15px !important;
    font-size: 16px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    box-sizing: border-box !important;
}

/* Asegurar el estilo correcto en modo claro para estos campos específicos */
.dark input[type="datetime-local"],
.dark input[type="date"],
.dark input[type="time"] {
    background-color: #ffffff !important;
    color: #101828 !important;
    border: 1px solid #cbd5e1 !important;
}

/* Homogeneizar textos internos de ayuda en Safari de iOS */
input[type="datetime-local"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
input[type="datetime-local"]::-webkit-datetime-edit-ampm-field,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="time"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-ampm-field {
    color: #667085 !important;
}