/* Pastel, minimal, clean */
:root{
  --bg:#FAFAFC;
  --ink:#0f172a;
  --muted:#64748b;
  --card:#ffffff;
  --brand:#7c3aed;        /* pastel purple */
  --brand-2:#06b6d4;      /* pastel cyan */
  --accent:#f59e0b;       /* warm accent */
  --ring: rgba(124,58,237,.15);
--dark-bg: #1A1A1A; /* Fondo casi negro de la referencia */
  --text-dark: #FFFFFF; /* Texto blanco en fondo oscuro */
  --text-muted-dark: #A0A0A0; /* Texto gris para links y descripciones */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;background:var(--bg);color:var(--ink)}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

.container{width:min(1120px,92%);margin:0 auto}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px}

.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid #e2e8f0}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:34px;height:34px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.brand-name{font-weight:800;letter-spacing:.3px}

.nav{display:none;gap:20px}
@media(min-width:860px){.nav{display:flex}}
.nav a{padding:10px 6px;border-radius:8px}
.nav a:hover{background:#f1f5f9}

.actions{display:flex;align-items:center;gap:10px}
.lang-switch button{border:1px solid #cbd5e1;background:#fff;padding:6px 10px;border-radius:10px;cursor:pointer;font-weight:700}
.lang-switch button+button{margin-left:6px}

.btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:800;letter-spacing:.2px;box-shadow:0 6px 16px rgba(0,0,0,.08);transition:.15s}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(124,58,237,.25)}
.btn.outline{border:2px solid var(--brand);color:var(--brand);background:transparent}
.btn.ghost{border:2px solid transparent;color:var(--ink);background:#fff}
.btn.ghost:hover{border-color:#e2e8f0}
.btn:hover{transform:translateY(-1px)}

.hero{padding:70px 0;background:linear-gradient(180deg,#fff, #f8fafc)}
.grid2{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:980px){.grid2{grid-template-columns:1.1fr 0.9fr}}
.hero-copy h1{font-size:clamp(28px,5vw,46px);line-height:1.1;margin:0 0 10px}
.sub{color:var(--muted);font-size:1.12rem;margin:0 0 18px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.stress{margin:18px 0 0;padding:0;list-style:none;color:#0b1324}
.stress li{margin:6px 0}

.hero-art{display:grid;gap:12px;align-content:start}
.hero-art>img{border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,.15)}
.art-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.art-strip img{border-radius:12px;box-shadow:0 8px 18px rgba(0,0,0,.12)}

.features{padding:64px 0}
.features h2{text-align:center;margin:0 0 10px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:18px}
.card{background:var(--card);border:1px solid #e2e8f0;border-radius:18px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.06)}
.card h3{margin:12px 16px 0}
.card p{margin:8px 16px 16px;color:var(--muted)}

.about{padding:64px 0;background:#ffffff}
.check{list-style:none;padding:0;margin:8px 0 16px}
.check li{margin:8px 0}

.pricing{padding:64px 0}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.tier{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:18px;position:relative}
.tier.best{border-color:var(--brand);box-shadow:0 10px 26px var(--ring)}
.badge{position:absolute;top:14px;right:14px;background:var(--brand);color:#fff;border-radius:999px;padding:6px 10px;font-size:.8rem;font-weight:800}
.price{font-size:2rem;margin:6px 0 10px}
.price small{color:var(--muted);font-size:.9rem}

.faq{padding:64px 0;background:#ffffff}
details{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px;margin:10px 0}

.calendar{padding:70px 0}
.calendar h2{text-align:center;margin:0 0 12px}

.footer{padding:28px 0 36px;background:#0f172a;color:#94a3b8}
.footer p{margin:0;text-align:center}

/* --- FIX: Cambiamos el color de fondo del body para ver el banner y el footer --- */
/* Esto es NECESARIO si el banner está fuera del container principal */
body {
    background-color: var(--dark-bg); 
}

/* El contenido del sitio (no el banner ni el footer) debe tener su color original */
.topbar, .hero, .features, .about, .pricing, .faq, .calendar {
    /* Nos aseguramos de que las secciones de arriba tengan el color de fondo claro */
    background-color: var(--bg);
}
.about, .faq {
    /* Mantenemos el blanco puro que tenías en About y FAQ */
    background-color: var(--card);
}


/* --- SECCIÓN: Banner CTA (Screenshot 4) --- */

.banner-cta {
    /* El banner ocupa todo el ancho, pero el contenedor interno es el que lleva el fondo morado */
    background-color: var(--dark-bg); /* El fondo exterior es el oscuro del footer */
    padding: 60px 0;
}

.banner-cta .container {
    /* Esto crea el "flotado" del banner morado con el fondo oscuro alrededor */
    background: linear-gradient(135deg, var(--brand), #9b5af9, #6a34d6);
    color: white;
    text-align: center;
    padding: 40px 20px;
    border-radius: 16px; /* Bordes redondeados */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    
    /* Centrar y darle espacio en desktop */
    max-width: 900px;
}

.banner-cta h2 {
    font-size: clamp(24px, 4vw, 36px);
    margin-bottom: 8px;
    font-weight: 800;
}

.banner-cta p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* Botón blanco en el banner */
.banner-cta .btn.primary {
    background: white;
    color: var(--brand); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 700;
}

/* --- SECCIÓN: Pie de Página (Footer Extendido - Screenshot 3) --- */

.footer {
    padding: 0; 
    background: var(--dark-bg); 
    color: var(--text-muted-dark); 
}

.footer-grid {
    padding: 60px 0 40px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 768px) {
    /* Estructura de 4 columnas en desktop */
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 20px;
    }
}

.footer-brand .brand {
    /* Mantenemos el logo, pero ajustamos el nombre para que se vea bien sobre el oscuro */
    margin-bottom: 15px;
}

.footer-brand .brand-name {
    color: var(--text-dark); 
}

.footer-brand p {
    margin: 15px 0 25px;
    text-align: left; 
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 250px; /* Para que la descripción no sea demasiado larga en desktop */
}

/* Enlaces de Redes Sociales */
.social-links {
    display: flex;
    gap: 12px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; 
    height: 36px; 
    background: #333333; /* Fondo más claro para los íconos de redes */
    border-radius: 8px;
    transition: background 0.15s;
}

.social-links a:hover {
    background: var(--brand); 
}

.social-links img {
    /* Asumiendo que tus íconos son oscuros y necesitan ser blancos */
    filter: invert(1); 
    width: 18px;
    height: 18px;
}

/* Estilos para las columnas de links */
.footer-links h4 {
    color: var(--text-dark); 
    margin: 0 0 15px;
    font-size: 1.1rem;
    font-weight: 800; /* Títulos en negrita */
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 6px; /* Menos espacio entre links */
}

.footer-links a {
    font-size: 0.95rem;
    transition: color 0.15s;
    color: var(--text-muted-dark); 
    display: flex; 
    align-items: center;
}

/* La flecha (>) de la referencia */
.footer-links li a::before {
    content: "›"; 
    font-size: 1.2rem;
    margin-right: 8px;
    color: var(--brand); /* Color púrpura para la flecha */
    font-weight: 700;
}

.footer-links a:hover {
    color: var(--brand);
}

/* Estilos de Copyright Final */
.copyright {
    padding: 20px 0;
    text-align: center;
    font-size: 0.85rem;
    color: #666; 
    border-top: 1px solid #333333;
}