/* Reset y base */

* { box-sizing: border-box; }

:root{ --nav-h: 70px; }

html{ scroll-behavior: smooth; }

body{ margin:0; font-family:'Poppins',sans-serif; background:linear-gradient(135deg,#2e3192,#8e44ad); color:#fff; overflow-x:hidden; }



/* NAV */

nav{ position:fixed; top:0; left:0; width:100%; height:var(--nav-h); background:#2c2c2c; z-index:1000; }

nav .nav-inner{ max-width:1200px; height:100%; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:24px; }

nav .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; }

nav .brand img{ height:40px; width:auto; }

nav .brand-name{ font-weight:700; letter-spacing:.2px; }

nav .nav-menu{ list-style:none; margin:0; padding:0; display:flex; gap:28px; }

nav .nav-menu a{ color:#fff; text-decoration:none; font-weight:600; padding:8px 12px; border-radius:10px; transition: background .18s ease,color .18s ease, transform .18s ease; }

nav .nav-menu a:hover, nav .nav-menu a:focus{ color:#25d366; background:rgba(255,255,255,0.1); transform:translateY(-1px); }



/* HEADER */

.site-header{ text-align:center; padding-top:calc(var(--nav-h)+40px); padding-bottom:20px; }

.site-header h1{ font-size:2.4rem; margin:0 0 8px; }

.site-header p{ margin:0; opacity:.95; }



/* SECCIONES */

.section{ padding:40px 16px; scroll-margin-top:calc(var(--nav-h)+20px); }



/* PLANES / NOVEDADES / PROYECTOS */

.planes{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; padding:20px 0; }

.plan{ background: rgba(255,255,255,0.1); border-radius:15px; padding:20px; text-align:center; box-shadow:0 4px 20px rgba(0,0,0,0.2); transition:transform .3s,background .3s; }

.plan:hover{ transform:translateY(-8px); background: rgba(255,255,255,0.15); }

.plan i{ font-size:50px; margin-bottom:10px; color:#25d366; }

.plan h2{ font-size:1.5em; margin:8px 0 12px; }

.plan-detalles{ list-style:none; padding:0; margin:12px 0 0; text-align:left; }

.plan-detalles li{ margin-bottom:6px; padding-left:22px; position:relative; }

.plan-detalles li::before{ content:"✔"; position:absolute; left:0; top:0; line-height:1; color:#25d366; font-weight:700; }



/* QUIÉNES SOMOS */

.quienes-somos{ max-width:850px; margin:24px auto; padding:26px; background:#ffffff; color:#222; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.12); text-align:center; }

.quienes-somos h2{ color:#2e3192; margin-top:0; font-size:1.9rem; }

.quienes-somos p{ font-size:1.05rem; line-height:1.6; margin:0; }



/* CONTACTO */

.contacto{ background:#2b2b2b; text-align:center; }

.contacto form{ max-width:540px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }

.contacto input, .contacto textarea{ padding:12px; border-radius:8px; border:none; font-size:1em; outline:none; }

.contacto button{ background-color:#25d366; color:white; padding:12px; border:none; border-radius:8px; font-size:1em; cursor:pointer; }



/* FOOTER */

footer{ margin-top:40px; padding:20px; background:#2c2c2c; text-align:center; }

footer a{ color:white; margin:0 10px; text-decoration:none; transition: color .3s; }

footer a:hover{ color:#25d366; }



/* WhatsApp flotante */

.whatsapp-float{ position:fixed; width:60px; height:60px; bottom:20px; right:20px; background-color:#25d366; color:white; border-radius:50%; text-align:center; font-size:30px; box-shadow:2px 2px 3px #999; z-index:9999; display:flex; align-items:center; justify-content:center; text-decoration:none; }



/* Ajustes para móviles en vertical */

@media (max-width: 768px) {

    nav {

        flex-direction: column;

        align-items: center;

        height: auto;

        padding: 10px;

        display: none;

    }



    nav img {

        height: 40px; /* tamaño fijo del logo */

        margin-bottom: 8px;

        width: auto;

        nav .brand-name { /* Asegúrate que el texto tenga esta clase */

        display: none;

    }



    .nav-menu {

        flex-direction: column;

        gap: 10px;

        text-align: center;

    }



    .nav-menu li a {

        padding: 6px 10px;

        font-size: 0.95rem;

    }

}