/* ===============================
   Estilos base para la sección de paquetes
   ===============================*/
   :root {
    --scs-primary: #0d9488;      /* Verde azulado */
    --scs-accent:  #f59e0b;      /* Naranja ámbar */
    --scs-dark:    #1e293b;      /* Gris carbón */
    --scs-light:   #f8fafc;      /* Gris muy claro */
    --scs-radius:  0.75rem;
    --scs-gap:     1.25rem;
    --scs-shadow:  0 8px 20px rgb(0 0 0 / .08);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  
  .scs-paquetes {
    padding-block: 4rem 5rem;
    background: var(--scs-light);
    color: var(--scs-dark);
  }
  
  .scs-container {
    width: min(90%, 1100px);
    margin-inline: auto;
  }
  
  /* Cabecera */
  .scs-header {
    text-align: center;
    margin-bottom: 3rem;
  }
  
  .scs-header h2 {
    font-size: 2.25rem;
    margin-bottom: 0.5rem;
  }
  
  .scs-tagline {
    font-size: 1.125rem;
    color: var(--scs-primary);
  }
  
  /* Tarjetas */
  .scs-card-group {
    display: grid;
    gap: var(--scs-gap);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: 3rem;
  }
  
  .scs-card {
    background: #fff;
    border-radius: var(--scs-radius);
    box-shadow: var(--scs-shadow);
    padding: 2rem 1.5rem 2.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .25s ease;
  }
  
  .scs-card:hover {
    transform: translateY(-4px);
  }
  
  .scs-card__title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    text-align: center;
  }
  
  .scs-card__price {
    font-size: 2rem;
    font-weight: 600;
    color: var(--scs-primary);
    margin-bottom: 1rem;
    text-align: center;
  }
  
  .scs-card__list {
    list-style: none;
    margin: 0 0 1.75rem 0;
    padding: 0;
    line-height: 1.45;
    font-size: .95rem;
  }
  
  .scs-btn {
    display: block;
    text-align: center;
    padding: .75rem 1.25rem;
    border-radius: var(--scs-radius);
    font-weight: 600;
    background: var(--scs-primary);
    color: #fff;
    text-decoration: none;
    transition: background .2s ease;
  }
  
  .scs-btn:hover {
    background: #0f766e;
  }
  
  .scs-btn--accent {
    background: var(--scs-accent);
  }
  
  .scs-btn--accent:hover {
    background: #d97706;
  }
  
  /* Paquete destacado */
  .scs-card--featured {
    border: 2px solid var(--scs-accent);
  }
  
  .scs-ribbon {
    position: absolute;
    top: -12px;
    right: -12px;
    background: var(--scs-accent);
    color: #fff;
    padding: 0.25rem .75rem;
    font-size: .75rem;
    font-weight: 600;
    border-radius: var(--scs-radius);
    transform: rotate(6deg);
  }
  
  /* Extras y pasos */
  .scs-extras h4 {
    margin-top: 2rem;
    font-size: 1.125rem;
    color: var(--scs-primary);
  }
  
  .scs-steps {
    margin: .75rem 0 1.5rem 1.2rem;
    padding-left: .5rem;
  }
  
  .scs-steps li {
    margin-bottom: .5rem;
  }
  
  .scs-legal {
    font-size: .825rem;
    color: #475569;
    margin-top: 1.25rem;
  }
  
  /* Responsivo menor a 480 px */
  @media (max-width: 480px) {
    .scs-card__price { font-size: 1.75rem; }
    .scs-card { padding: 1.5rem 1.25rem 2.25rem; }
  }

     :root {
            --scs-primary: #0d9488;
            --scs-accent: #f59e0b;
            --scs-dark: #1e293b;
            --scs-light: #f8fafc;
            --scs-bg: #ffffff;
            --scs-radius: 0.75rem;
            --scs-shadow: 0 8px 20px rgb(0 0 0 / .08);
            --scs-gap: 1.25rem;
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        }

        /* Dark‑mode overrides */
        [data-theme="dark"] {
            --scs-light: #0f172a;
            --scs-dark: #f1f5f9;
            --scs-bg: #1e293b;
            --scs-shadow: 0 4px 12px rgb(0 0 0 / .4);
        }

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

        body {
            line-height: 1.6;
            color: var(--scs-dark);
            background: var(--scs-bg);
            transition: background .3s, color .3s;
        }

        /* ---------------- NAV ---------------- */
       

        nav {
            max-width: 1100px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
            position: relative;
        }

        .logo {
            font-weight: 700;
            font-size: 1.25rem;
            color: var(--scs-primary);
            text-decoration: none;
        }

        #nav-links {
            list-style: none;
            display: flex;
            gap: 1.5rem;
        }

        #nav-links a {
            color: var(--scs-dark);
            text-decoration: none;
            font-weight: 500;
            transition: color .2s;
        }

        #nav-links a:hover {
            color: var(--scs-primary);
        }

        /* Burger button */
        .burger {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            color: var(--scs-dark);
            cursor: pointer;
        }

        /* Theme toggle */
        #theme-toggle {
            background: none;
            border: 2px solid var(--scs-primary);
            color: var(--scs-primary);
            border-radius: 50%;
            width: 2.2rem;
            height: 2.2rem;
            font-size: 1.1rem;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background .2s, color .2s;
        }

        #theme-toggle:hover {
            background: var(--scs-primary);
            color: #fff;
        }

        .nav-actions {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        @media(max-width:768px) {
            .burger {
                display: block;
            }

            #nav-links {
                flex-direction: column;
                position: absolute;
                top: 100%;
                right: 0;
                background: var(--scs-bg);
                width: 220px;
                padding: 1rem;
                gap: 1rem;
                box-shadow: var(--scs-shadow);
                border-radius: 0 0 var(--scs-radius) var(--scs-radius);
                display: none;
            }

            #nav-links.open {
                display: flex;
            }
        }

        /* ---------------- HERO ---------------- */
        .hero {
            background: linear-gradient(135deg, #0d94880d, #f8fafc);
            padding: 6rem 2rem;
            text-align: center;
            transition: background .3s;
        }

        [data-theme="dark"] .hero {
            background: linear-gradient(135deg, #0d948810, #0f172a);
        }

        .hero h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .hero p {
            font-size: 1.25rem;
            max-width: 800px;
            margin: 0 auto 1.5rem;
        }

        .btn-primary {
            display: inline-block;
            background: var(--scs-primary);
            color: #fff;
            padding: .75rem 1.5rem;
            border-radius: var(--scs-radius);
            text-decoration: none;
            font-weight: 600;
            transition: background .2s;
        }

        .btn-primary:hover {
            background: #0f766e;
        }

        /* ---------------- SECTION GEN ---------------- */
        .section {
            padding: 4rem 2rem;
            max-width: 1100px;
            margin: auto;
        }

        .section h2 {
            font-size: 2rem;
            margin-bottom: 1rem;
            color: var(--scs-primary);
        }

        .mission-vision {
            display: grid;
            gap: 2rem;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        }

        /* ---------------- CURSOS ---------------- */
        #cursos .cursos-intro {
            max-width: 800px;
            margin: 0 auto 2rem;
            font-size: 1.125rem;
        }

        .cursos-grid {
            display: grid;
            gap: var(--scs-gap);
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        }

        .curso {
            background: var(--scs-bg);
            border-radius: var(--scs-radius);
            box-shadow: var(--scs-shadow);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: transform .25s ease, background .3s;
        }

        .curso:hover {
            transform: translateY(-4px);
        }

        .curso img {
            width: 100%;
            height: 316px;
            object-fit: cover;
        }

        .curso h3 {
            font-size: 1.125rem;
            padding: 1rem 1rem 0;
            color: var(--scs-dark);
        }

        .curso p {
            padding: 0 1rem 1.5rem;
            font-size: .95rem;
            flex-grow: 1;
        }

        /* ---------------- FOOTER ---------------- */
        footer {
            background: var(--scs-dark);
            color: #fff;
            padding: 2rem;
            transition: background .3s;
        }

        [data-theme="dark"] footer {
            background: #020617;
        }

        .footer-inner {
            max-width: 1100px;
            margin: auto;
            text-align: center;
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .social-links a {
            color: #fff;
            text-decoration: none;
            font-size: 1.125rem;
            transition: color .2s;
        }

        .social-links a:hover {
            color: var(--scs-accent);
        }

        .copyright {
            font-size: .875rem;
        }

        /* ---------------- Small tweaks ---------------- */
        @media(max-width:600px) {
            .hero h1 {
                font-size: 2rem;
            }
        }
    /* ---------- HERO ---------- */
    .hero{padding:4.5rem 1rem 3rem;text-align:center;background:linear-gradient(135deg,#0d94880d,#f8fafc);}
    [data-theme="dark"] .hero{background:linear-gradient(135deg,#0d948810,#1e293b);}    
    .hero h1{font-size:2.25rem;margin-bottom:.75rem;color:var(--scs-primary);}    

    /* ---------- PORTFOLIO GRID ---------- */
    main{max-width:1100px;margin:auto;padding:0 1rem 4rem;}
    .projects-grid{display:grid;gap:var(--scs-gap);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
    .project{background:var(--scs-bg);box-shadow:var(--scs-shadow);border-radius:var(--scs-radius);overflow:hidden;transition:transform .25s ease,background .3s;display:flex;flex-direction:column;}
    .project:hover{transform:translateY(-4px);}    
    .project img{width:100%;height:160px;object-fit:cover;}
    .project-content{padding:1rem 1rem 1.25rem;flex-grow:1;display:flex;flex-direction:column;}
    .project h3{font-size:1.1rem;margin-bottom:.4rem;}
    .project p{font-size:.9rem;margin-bottom:.75rem;flex-grow:1;}
    .project a.visit{align-self:flex-start;font-weight:600;color:var(--scs-primary);}    

    /* ---------- FOOTER ---------- */
    footer{text-align:center;padding:2rem 1rem;color:#64748b;font-size:.85rem;}