* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
        }

        body {
            background: #f4f6fa;
            color: #333;
            line-height: 1.6;
            scroll-behavior: smooth;
        }

        .top-bar {
            background: #0a1a5e;
            color: #fff;
            padding: 8px 20px;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
        }

        header {
            background: #fff;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 8px rgba(0,0,0,.08);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

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

        .logo img {
            height: 45px;
        }

        nav a {
            margin-left: 20px;
            text-decoration: none;
            font-weight: bold;
            color: #333;
        }

        nav a:hover {
            color: #1f3cff;
        }

        section {
            padding: 80px 20px;
            max-width: 1100px;
            margin: auto;
        }

        /* Hero */
        .hero {
            background:
                linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
                url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d')
                center/cover no-repeat;
            color: #fff;
            padding: 120px 20px;
            text-align: center;
        }

        .hero h1 {
            font-size: 42px;
            max-width: 700px;
            margin: auto;
        }

        .hero p {
            margin: 20px auto;
            font-size: 18px;
            max-width: 600px;
        }

        .hero button {
            background: #1f3cff;
            border: none;
            color: #fff;
            padding: 14px 30px;
            font-size: 16px;
            border-radius: 6px;
            cursor: pointer;
        }

        /* Services */
        .services {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .card {
            background: #fff;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,.05);
        }

        .card h3 {
            color: #1f3cff;
            margin-bottom: 10px;
        }

        /* Contact */
        form input, form textarea {
            width: 100%;
            padding: 12px;
            margin-bottom: 15px;
            border-radius: 6px;
            border: 1px solid #ccc;
        }

        form button {
            background: #1f3cff;
            color: #fff;
            border: none;
            padding: 14px;
            border-radius: 6px;
            cursor: pointer;
        }

        footer {
            background: #0a1a5e;
            color: #fff;
            text-align: center;
            padding: 25px;
        }

        .whatsapp {
            position: fixed;
            right: 20px;
            bottom: 20px;
            background: #25D366;
            color: #fff;
            padding: 14px 16px;
            border-radius: 50%;
            font-size: 22px;
            text-decoration: none;
        }
        /* Animaciones */
        .section {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.8s ease;
        }

        .section.visible {
            opacity: 1;
            transform: translateY(0);
        }
         /* Menu Activo */
        nav a.active {
            color: #1f3cff;
            border-bottom: 3px solid #1f3cff;
            padding-bottom: 5px;
        }
        
        /* Planes 
        .plans {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 25px;
        }

        .plan {
            background: #fff;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(0,0,0,.08);
            text-align: center;
            transition: transform .3s ease;
        }

        .plan:hover {
            transform: translateY(-8px);
        }

        .plan h3 {
            color: #1f3cff;
            margin-bottom: 10px;
        }

        .price {
            font-size: 36px;
            font-weight: bold;
            margin: 15px 0;
        }

        .plan ul {
            list-style: none;
            margin: 20px 0;
        }

        .plan ul li {
            margin-bottom: 10px;
        }

        .plan button {
            background: #1f3cff;
            color: #fff;
            border: none;
            padding: 14px 22px;
            border-radius: 6px;
            cursor: pointer;
        }
        */

        form select {
            width: 100%;
            padding: 12px;
            margin-bottom: 15px;
            border-radius: 6px;
            border: 1px solid #ccc;
        }

        .tabs{
            display:flex;
            justify-content:center;
            gap:10px;
            margin-bottom:30px;
            flex-wrap:wrap;
        }

        .tab-btn{
            border:none;
            background:#e8ecff;
            color:#1f3cff;
            padding:12px 25px;
            border-radius:8px;
            cursor:pointer;
            font-weight:bold;
        }

        .tab-btn.active{
            background:#1f3cff;
            color:white;
        }

        /*
        .plans{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
            gap:25px;
        }

        .plan{
            background:white;
            border-radius:12px;
            padding:25px;
            box-shadow:0 5px 15px rgba(0,0,0,.08);
        }

        .plan h3{
            color:#1f3cff;
            margin-bottom:10px;
        }

        .plan .price{
            font-size:32px;
            font-weight:bold;
            margin:15px 0;
        }

        .plan .small{
            font-size:14px;
            color:#666;
        }

        .badge{
            display:inline-block;
            background:#ff6b00;
            color:white;
            padding:4px 10px;
            border-radius:20px;
            font-size:12px;
            margin-bottom:10px;
        }

        .plan button{
            width:100%;
            margin-top:15px;
            border:none;
            background:#1f3cff;
            color:white;
            padding:12px;
            border-radius:6px;
            cursor:pointer;
        }

        .plan.oferta{
            border: 2px solid #ff6b00;
            position: relative;
            overflow: hidden;
        }

        .plan.oferta::before{
            content: "OFERTA";
            position: absolute;
            top: 15px;
            right: -30px;
            background: #ff6b00;
            color: white;
            padding: 5px 40px;
            transform: rotate(45deg);
            font-size: 11px;
            font-weight: bold;
        }
            */
            
/* Planes */
.plans{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:35px;
    align-items:start;
    padding-top:0; /* quitamos padding extra */
    align-items:stretch; /* clave: estira todas las cards */
}

.plan{
    background:white;
    border-radius:12px;
    box-shadow:0 8px 25px rgba(0,0,0,.1);
    position:relative;
    transition: transform .3s ease;
    width:100%;
    /* sin margin-top */
    display:flex;
    flex-direction:column; /* header arriba, body abajo */
    padding-top:35px; /* espacio para el badge */
}

.plan:hover{
    transform: translateY(-8px);
}

.plan-header{
    background:#00b4e6;
    color:white;
    padding:35px 20px 55px;
    text-align:center;
    position:relative;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 75%);
    border-radius:12px 12px 25px 25px;
    margin:-20px -10px 0; /* ESTO HACE QUE SOBRESALGA */
    width:calc(100% + 20px); /* más ancho que la card */
}

.plan.oferta .plan-header{
    background:#00b4e6;
    padding-top:55px; /* espacio para el badge + texto */
}

.plan-header h3{
    color:white;
    font-size:19px;
    margin-bottom:6px;
    font-weight:600;
    line-height:1.3;
}

.plan-header .price{
    font-size:38px;
    font-weight:bold;
    margin:8px 0 0;
    color:white;
}

.plan-header .small{
     font-size:14px;
    opacity:0.9;
    color:white;
}

.plan-badge{
    position:absolute;
    top:0;
    left:10px;
    right:10px;
    background:#ffb400;
    color:#fff;
    padding:10px 0;
    border-radius:12px 12px 0 0;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.plan.oferta .plan-badge{
    position:absolute;
    top:0;
    left:0px;
    right:0px;
    background:#ffb400;
    color:#fff;
    padding:10px 0;
    border-radius:12px 12px 0 0;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:0.5px;
    z-index:3;
}

.plan-body{
    padding:25px 25px 30px;
    flex:1; /* clave: el body crece para llenar el espacio */
    display:flex;
    flex-direction:column;
}

.plan-body ul{
    flex:1; /* el ul empuja el hr y botón hacia abajo */
    list-style:none;
    margin:0 0 25px 0;
    padding:0;
}

.plan-body ul li{
    margin-bottom:12px;
    padding-left:20px;
    position:relative;
    font-size:15px;
    color:#444;
}

.plan-body ul li::before{
    content:"•";
    position:absolute;
    left:0;
    color:#00b4e6;
    font-weight:bold;
    font-size:18px;
}

.plan-body .detalle-oferta{
    font-size:13px;
    color:#666;
    margin:15px 0;
    line-height:1.5;
}

.plan-body hr{
    border:none;
    border-top:1px solid #eee;
    margin:20px 0;
}

.plan button{
    width:auto;
    min-width:120px;
    margin:0 auto;
    display:block;
    border:none;
    background:#00b4e6;
    color:white;
    padding:12px 30px;
    border-radius:6px;
    cursor:pointer;
    font-weight:bold;
    font-size:15px;
    transition: background .2s;
    margin-top:auto; /* botón siempre pegado abajo */
}

.plan button:hover{
    background:#0095c0;
}

.precio-tachado{
    text-decoration:line-through;
    color:#999;
    font-size:14px;
}

.plan-body ul li.destacado{
    font-weight:bold;
    color:#00b4e6;
}

.plan-body ul li.destacado::before{
    color:#00b4e6;
    font-size:20px;
}


/* Responsive: 2 columnas en tablet, 1 en móvil */
@media (max-width: 1024px){
    .plans{
        grid-template-columns:repeat(2, 1fr);
        gap:25px;
    }
}

@media (max-width: 640px){
    .plans{
        grid-template-columns:1fr;
    }
}