a{color:inherit;}
  .contenedor{
    max-width:1160px;
    margin:0 auto;
    padding:0 32px;
  }

  

:root{
    --violeta:#6C4EF5;
    --violeta_oscuro:#4B2FD1;
    --violeta_tinta:#241755;
    --lavanda:#F1EEFE;
    --lavanda_media:#E4DEFC;
    --coral:#FF7A59;
    --menta:#1FBF8F;
    --fondo:#FFFFFF;
    --texto:#181229;
    --texto_suave:#665F80;
    --linea:#E9E5FA;
    --radio_grande:28px;
    --radio_medio:18px;
    --sombra_suave: 0 24px 48px -24px rgba(76,49,209,0.28);
  }
  
  
:root {
  /* color */
  --clofik_tinta: #14161c;
  --clofik_texto: #2c2f3a;
  --clofik_texto_suave: #62667a;
  --clofik_borde: #e6e7f0;
  --clofik_fondo_sutil: #f8f8fc;
  --clofik_indigo: #4338ca;
  --clofik_indigo_oscuro: #322a99;
  --clofik_indigo_suave: #edecfb;
  --clofik_verde: #17a36b;
  --clofik_verde_suave: #e7f8f0;

  /* forma */
  --clofik_radio_s: 10px;
  --clofik_radio_m: 16px;
  --clofik_radio_l: 26px;
  --clofik_sombra: 0 18px 40px -22px rgba(20, 22, 28, 0.18);

  /* movimiento */
  --clofik_curva: cubic-bezier(0.2, 0.8, 0.2, 1);
}

  
    * {
        font-family:'Plus Jakarta Sans', sans-serif;
        box-sizing:border-box;
        margin: 0;
        padding: 0;
    }

  
    body {
        margin: 0;
        background:var(--fondo);
        color:var(--texto);
        -webkit-font-smoothing:antialiased;
        line-height:1.55;
    }
  
    html{scroll-behavior:smooth;}
  
  
    
    /* ===== titulos general ===== */
    
    
    /* HERO del contacto: claro y con un halo violeta suave, no navy como el del index */
      .hero{
        position: relative;
        text-align: center;
        padding: 80px 24px 56px;
        background: linear-gradient(180deg, var(--lavanda) 0%, #fff 78%);
        overflow: hidden;
      }



      .hero::before{
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        width: 900px;
        height: 900px;
        transform: translate(-50%, -46%);
        background: radial-gradient(circle at 50% 50%, rgba(108, 78, 245, .18) 0%, rgba(228, 222, 252, .20) 32%, rgba(255, 255, 255, 0) 66%);
        z-index: 0;
        pointer-events: none;
      }
      
      .hero>*{position:relative;z-index:1;}
      
      .pill{
        display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
        padding:7px 15px;border:1px solid var(--linea);border-radius:999px;background:#fff;
        color:var(--texto_suave);margin-bottom:22px;
        
      }
      .dot{width:7px;height:7px;border-radius:50%;background:var(--violeta);}
      
      .hero h1 {
            margin: 0 auto;
            max-width: 760px;
            font-size: clamp(2.1rem, 5vw, 3.4rem);
            line-height: 1.08;
            font-weight: 800;
            letter-spacing: -0.03em;
            text-align: center;
            color: var(--violeta_tinta);
        }
        
      .hero h1 em{
        font-style:normal;
        background:linear-gradient(100deg, var(--violeta) 0%, var(--violeta_oscuro) 100%);
        -webkit-background-clip:text;
        background-clip:text;
        color:transparent;
      }
      
      .hero p{margin:18px auto 0;max-width:520px;color:var(--texto_suave);line-height:1.6;}








/* ===== barra_navegacion (nav) ===== */
    .enlaces_navegacion a.activo{
      color: var(--violeta);
      font-weight: 700;
      position: relative;
    }
    .enlaces_navegacion a.activo::after{
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: -6px;
      height: 2px;
      background: var(--violeta);
      border-radius: 2px;
    }



  .barra_navegacion{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,0.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--linea);
  }
  
  .barra_navegacion .contenedor{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:76px;
  }
  
  .marca{
      text-decoration: none;
    display:flex;
    align-items:center;
    gap:9px;
    font-family:'Plus Jakarta Sans', sans-serif;
    font-size:20px;
    font-weight:800;
    color:var(--violeta_tinta);
  }

  .enlaces_navegacion{
    display:flex;
    align-items:center;
    gap:30px;
  }
  .enlaces_navegacion a{
    color:var(--texto_suave);
    text-decoration:none;
    font-size:14.5px;
    font-weight:600;
  }
  .enlaces_navegacion a:hover{color:var(--violeta_tinta);}
  .boton_nav_cta{
      text-decoration: none;
    background:var(--violeta);
    color:#fff !important;
    padding:11px 22px;
    border-radius:999px;
    font-weight:700 !important;
  }
  .boton_nav_cta:hover{background:var(--violeta_oscuro);}
  
  
  
  
  /* ===== barra lateral ===== */
  .barra_lateral{
    background:var(--violeta_tinta);
    color:#fff;
    padding:28px 18px;
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    height:100vh;
  }
  .marca_panel{
    display:flex;
    align-items:center;
    gap:9px;
    font-family:'Plus Jakarta Sans', sans-serif;
    font-size:18px;
    font-weight:800;
    padding:6px 10px 26px;
  }
  .marca_icono{
    width:28px;height:28px;
    border-radius:9px;
    background:linear-gradient(135deg, var(--violeta), var(--coral));
    flex:none;
  }
  .nav_panel{
    display:flex;
    flex-direction:column;
    gap:2px;
    flex:1;
    overflow-y:auto;
  }
  .nav_panel a{
    display:flex;
    align-items:center;
    gap:11px;
    padding:10px 12px;
    border-radius:11px;
    font-size:14px;
    font-weight:600;
    color:rgba(255,255,255,0.68);
  }
  .nav_panel a:hover{
    background:rgba(255,255,255,0.06);
    color:#fff;
  }
  .nav_panel a.activo{
    background:#fff;
    color:var(--violeta_tinta);
  }
  .nav_panel svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .nav_separador{
    font-size:11px;
    font-weight:700;
    letter-spacing:0.07em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.38);
    padding:16px 12px 6px;
  }
  .pie_lateral{
    border-top:1px solid rgba(255,255,255,0.1);
    padding-top:14px;
    margin-top:10px;
  }
  
  
  
      /* ==========================================
   FOOTER BRUTAL - CLOKIF
   ========================================== */

.footer-grande {
  position: relative;
  background-color: #030303;
  /* Aura morada superior exacta a la imagen */
  background-image: radial-gradient(
    140% 70% at 50% 0%, 
    #e0b0ff 0%, 
    #7e22ce 25%, 
    #3b0764 50%, 
    #030303 80%
  );
  color: #a1a1aa;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding-top: 5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

/* Contenedor Grid Principal */
.footer-grande .wrap.foot-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem 1.5rem;
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 3rem;
}

/* Columna de Marca / Logo */
.foot-marca {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.foot-marca p {
  font-size: 0.925rem;
  font-weight: 400;
  line-height: 1.6;
  color: #a1a1aa;
  max-width: 340px;
  margin: 0;
  letter-spacing: normal;
}

/* Columnas de Navegación */
.foot-col {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.foot-col h4 {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem 0;
}

.foot-col a {
  color: #a1a1aa;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s ease, transform 0.2s ease;
  width: fit-content;
}

.foot-col a:hover {
  color: #d8b4fe; /* Destello morado claro al pasar el cursor */
  transform: translateX(4px);
}

/* Barra del Pie Inferior */
.pie {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.875rem;
  color: #71717a;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pie a {
  color: #a1a1aa;
  text-decoration: none;
  transition: color 0.2s ease;
}

.pie a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Adaptación a Pantallas Móviles */
@media (max-width: 768px) {
  .footer-grande {
    padding-top: 3.5rem;
  }

  .footer-grande .wrap.foot-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .foot-marca p {
    max-width: 100%;
  }

  .pie {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
}