/* =============================
Variables de color (paleta)
============================= */
:root {
--c1: #ADEADA; /* más vibrante */
--c2: #BDEADB;
--c3: #CDEADC;
--c4: #DDEADD;
--c5: #EDEADE; /* más neutra */


--bg: #0e1116; /* fondo oscuro para contrastes puntuales */
--ink: #0a0d12; /* texto principal oscuro */
--muted: #475569; /* texto secundario */
--surface: #ffffff; /* tarjetas */
--shadow: 0 10px 30px rgba(16, 24, 40, 0.08);


--radius: 16px;

--hero-bg: #133BFF;          /* azul intenso para el hero */
  --highlight: #20E0C0; 

}


/* Tipografía */
html { scroll-behavior: smooth; }
body {
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--ink);
background: linear-gradient(180deg, var(--c5), #fff 20%, #fff 70%, var(--c4));
line-height: 1.6;
}


h1, h2, h3 { font-family: "Space Grotesk", Inter, sans-serif; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.1; }
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; }


.container { width: min(1100px, 92%); margin-inline: auto; }


/* Header / Nav */
.header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(8px); }
.nav {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .9rem 0;
}
.brand { display:flex; align-items:center; gap:.5rem; text-decoration:none; color:inherit; font-weight:600; }
.brand-glyph{ display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg, var(--c1), var(--c3)); color:#0b1116; font-weight:700; }
.brand-text{ font-family:"Space Grotesk"; font-weight:700; letter-spacing:.02em; }


.nav-links { display:flex; align-items:center; gap: 1rem; list-style:none; }
.nav-links a { text-decoration:none; color: #111827; font-weight:600; padding:.6rem .8rem; border-radius:10px; }
.nav-links a:hover { background: var(--c3); }


.nav-toggle { display:none; flex-direction:column; gap:4px; background:none; border:0; }
.nav-toggle .bar{ width:26px; height:2px; background:#111; }


/* Botones */
.btn { display:inline-block; border-radius: 999px; padding: .8rem 1.1rem; font-weight:700; text-decoration:none; transition: transform .15s ease, box-shadow .15s ease; }
.btn--primary { background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: var(--shadow); }
.btn--primary:hover { transform: translateY(-1px); }
.btn--ghost { border:1px solid var(--c2); color:#0b1116; }


/* Hero */
.hero { display:grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items:center; padding: 4rem 0 2rem; }
.subhead { color: var(--muted); max-width: 58ch; }
.hero__cta { display:flex; gap: .8rem; margin-top: 1rem; }
.hero__media { position:relative; }
.hero__media img{ width:100%; border-radius: var(--radius); box-shadow: var(--shadow); }


/* ——— Título más impactante (sin cambiar tu estructura) ——— */
.headline {
  font-family: "Sora", Inter, system-ui, sans-serif; /* opcional, deja impactante */
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ——— Resaltado de palabras sin fondo ———
   Usa tu paleta para un efecto “neón suave” solo en el texto */
.hl {
  background: linear-gradient(135deg, var(--c1), var(--c2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;                /* hace que se vea el gradiente en el texto */
  text-shadow: none;                 /* sin halo ni fondo */
}

/* Por si quieres un resaltado sólido en vez de gradiente:
   .hl { color: var(--c1); } */





/* Stickers (posiciones) */
.sticker { position:absolute; width:58px; height:58px; border-radius:14px; display:grid; place-items:center; background: var(--surface); box-shadow: var(--shadow); opacity:.95; }
.sticker svg{ width:60%; fill:#0b1116; }
.sticker--1{ top: -14px; right: -14px; }
.sticker--2{ bottom: -14px; left: -14px; }


/* Secciones */
.section { padding: 4rem 0; background:#fff; }
.section--alt { background: linear-gradient(180deg, var(--c4), var(--c5)); }
.section__header { margin-bottom: 1.6rem; }
.kicker { color: var(--muted); }


/* Cards servicios */
.grid { display:grid; gap: 1rem; }
.cards { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--surface); padding: 1.2rem; border-radius: var(--radius); box-shadow: var(--shadow); }
.card__icon { width: 42px; height: 42px; }
.card h3 { margin: .6rem 0 .3rem; }
.card p { color: var(--muted); }

/* Visión */
.vision { display:grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.checks { list-style: none; padding:0; }
.checks li { position:relative; padding-left: 1.6rem; margin: .55rem 0; }
.checks li::before{ content:""; position:absolute; left:0; top:.45rem; width:12px; height:12px; border-radius:50%; background: linear-gradient(135deg, var(--c1), var(--c2)); }


/* Experiencia */
.exp { grid-template-columns: repeat(4, 1fr); }
.exp__item { background: var(--surface); padding:1rem; border-radius: var(--radius); box-shadow: var(--shadow); }
.exp__item ul{ color: var(--muted); padding-left: 1rem; }
.pillrow { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.pill { background: var(--c3); padding:.5rem .8rem; border-radius:999px; font-weight:600; }


/* Contacto */
.contact .form { background:#fff; padding: 1.2rem; border-radius: var(--radius); box-shadow: var(--shadow); }
.form__row { display:grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
label { display:grid; gap: .3rem; font-weight:600; }
input, textarea { border:1px solid var(--c3); border-radius: 10px; padding: .8rem; font: inherit; }
input:focus, textarea:focus { outline:2px solid var(--c2); }
.form__actions { display:flex; align-items:center; gap:1rem; margin-top: .6rem; }
.form__note { color: var(--muted); font-size:.9rem; }

/* Footer */
.footer{ padding: 2rem 0; background: #0b1116; color:#e6f6f2; }
.footer__grid{ display:flex; align-items:center; justify-content:space-between; }
.footer .top{ color:#e6f6f2; text-decoration:none; }


/* Animaciones reveal */
.reveal { opacity:0; transform: translateY(8px); }
.reveal.is-visible { opacity:1; transform:none; transition: all .6s cubic-bezier(.2,.6,.2,1); }


/* Responsivo */
@media (max-width: 960px){
.hero{ grid-template-columns: 1fr; }
.cards{ grid-template-columns: repeat(2, 1fr); }
.exp{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
.nav-toggle{ display:flex; }
.nav-links{ position: fixed; inset: 64px 0 auto 0; padding:1rem; background:#fff; border-bottom:1px solid var(--c3); box-shadow: var(--shadow); transform: translateY(-120%); transition: transform .2s ease; flex-direction:column; }
.nav-links.is-open{ transform: translateY(0); }
.form__row{ grid-template-columns: 1fr; }
.cards{ grid-template-columns: 1fr; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 5.6rem; /* espacio entre logo y texto */
  text-decoration: none;
  color: #111;
}

.logo {
  height: 80px;
  width: auto;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  margin-top: -4px;
  text-align: center;   /* centra el texto dentro del bloque */
}

.brand-top {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;    /* “Implementaciones” un poco grande */
  font-weight: 400;
  color: #222;
}

.brand-bottom {
  font-family: 'Allura', cursive;
  font-size: 4.2rem;    /* “Lenoa” más grande y destacado */
  margin-top: -6px;     /* hace que se encime ligeramente */
  color: #333;
}


/* 1) Menos espacio arriba del hero */
.header + .hero {            /* hero inmediatamente después del header */
  padding-top: 1.6rem;       /* antes lo tenías ~4rem */
}
.hero {                      /* mantén el resto igual */
  padding-bottom: 2.2rem;
  min-height: clamp(420px, 58vh, 680px);
  align-items: center;       /* centra verticalmente el grid */
}

/* 2) Ajustes finos del título y subtítulo */
.headline { 
  margin: 0 0 .6rem;         /* quita márgenes extra del h1 */
  max-width: 16ch;           /* evita saltos raros de línea */
}
.subhead { 
  margin-top: .8rem;
}


.hero__media {
  position: relative; /* clave para posicionar hijos en absoluto */
}

.hero-icon {
  position: absolute;
  top: 10%;      /* ajusta la distancia desde arriba */
  right: 10%;    /* ajusta la distancia desde la derecha */
  width: 120px;  /* mantiene el tamaño que pediste */
  height: 120px;
  opacity: 0.9;
  stroke: #0cc9a7;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}


/* Posicionar el rayo respecto al bloque de texto del hero */
.hero__copy { 
  position: relative; 
}

/* Rayo a la derecha del título + animación */
.hero-icon {
  position: absolute;
  top: -80px;                  /* súbelo o bájalo a gusto */
  right: -10px;               /* empújalo un poquito fuera del bloque para que “muerda” el margen */
  width: 120px;               /* tamaño fijo solicitado */
  height: auto;
  opacity: 0.95;
  stroke: #0cc9a7;            /* color de tu paleta */
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.18));
  pointer-events: none;       /* que no interfiera con los clics */
  animation: float 1.8s cubic-bezier(.4,0,.6,1) infinite;
}

/* Animación sutil de flotación */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-25px); }
}

/* Ajuste responsivo: en pantallas pequeñas reducir o esconder */
@media (max-width: 960px){
  .hero-icon { width: 90px; right: -6px; top: -4px; }
}
@media (max-width: 640px){
  .hero-icon { display: none; } /* opcional: ocultarlo en móviles si invade el título */
}



/* Footer: links a la derecha, estilo sobrio */
.footer__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer__links {
  display: flex;
  gap: 1rem;
}

.footer__links a {
  color: #e6f6f2;
  text-decoration: none;
  opacity: .9;
}

.footer__links a:hover {
  text-decoration: underline;
  opacity: 1;
}

/* Facturación: reutiliza estilos del sitio + pequeños ajustes */
#facturacion .facturacion__body {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.2rem;
}

#facturacion ul {
  margin: .6rem 0 1rem;
  padding-left: 1.2rem;
  color: var(--muted);
}

#facturacion a { color: #0b7; font-weight: 600; }



/* ===== NAV: correcciones móvil ===== */
.header{
  position: sticky;
  top: 0;
  z-index: 1000;                     /* por encima del contenido */
  background: rgba(255,255,255,.85); /* fondo para contraste en móvil */
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Botón hamburguesa: área táctil y contraste */
.nav-toggle{
  display: none;
  width: 44px; height: 44px;         /* área mínima táctil */
  align-items: center; justify-content: center;
  border-radius: 10px;
}
.nav-toggle .bar{
  background: #0a0d12;               /* asegúrate que se vea sobre el fondo */
}

/* Panel del menú en móvil */
@media (max-width: 640px){
  .nav-toggle{ display:flex; }

  .nav-links{
    position: fixed;
    top: calc(56px + env(safe-area-inset-top, 0px)); /* debajo del header */
    left: 0; right: 0;
    padding: 12px 16px 24px;
    background: #fff;
    border-bottom: 1px solid var(--c3);
    box-shadow: var(--shadow);
    transform: translateY(-130%);
    transition: transform .22s ease;
    flex-direction: column;
    gap: 8px;
    z-index: 1001;
    max-height: calc(100vh - 56px - env(safe-area-inset-top, 0px));
    overflow-y: auto;                /* si hay muchas opciones, que scrollee */
  }
  .nav-links.is-open{ transform: translateY(0); }

  .nav-links a{
    display: block;
    padding: 12px 10px;
    border-radius: 10px;
    font-size: 1rem;
  }
}


/* ==== 1) Evitar overflow horizontal global ==== */
* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }

/* ==== 2) Contenedores no más anchos que la vista ==== */
.container { max-width: 1100px; width: 100%; padding-left: 16px; padding-right: 16px; }
.header, .section, .hero, .footer { width: 100%; }

/* ==== 3) Header en móvil (brand grande no empuje) ==== */
@media (max-width: 640px){
  .brand { max-width: calc(100% - 56px); overflow: hidden; } /* deja espacio al botón */
  .brand-text { 
    line-height: 1.05; 
    white-space: normal;          /* permite salto de línea */
    word-break: break-word;       /* por si la palabra es larga */
  }
  .brand-top   { font-size: 1.2rem; }
  .brand-bottom{ font-size: 1.6rem; }
}

/* ==== 4) Menú móvil por encima de todo ==== */
.header { position: sticky; top: 0; z-index: 1000; }
.nav-links { max-width: 100%; }    /* por si algún padding lo hacía crecer */

/* ==== 5) Footer flexible en móvil (que envuelva) ==== */
.footer__grid { 
  display: flex; align-items: center; justify-content: space-between; gap: 16px; 
  flex-wrap: wrap;                 /* evita que estire el ancho */
}
.footer__links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer__links a { white-space: nowrap; }  /* “Código de Ética” no parte raro */

/* ==== 6) Imágenes/SVG nunca más anchos que el contenedor ==== */
img, svg { max-width: 100%; height: auto; display: block; }


/* ===== Header glass para DESKTOP (>=641px) ===== */
@media (min-width: 641px){
  .header{
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,.35);                /* translúcido */
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid rgba(0,0,0,.06);
    transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  /* efecto al hacer scroll */
  .header.is-scrolled{
    background: rgba(255,255,255,.55);
    border-bottom-color: rgba(0,0,0,.08);
    box-shadow: 0 8px 24px rgba(16,24,40,.08);
  }

  /* compacta un poco la barra cuando hay scroll */
  .header.is-scrolled .nav{ padding: .6rem 0; }
  .nav{ padding: .9rem 0; }  /* tamaño normal */
}