/* ==========================================================================
   QUANTARA — hoja de estilos
   Tokens tomados del Manual de Marca v01 (2026). No agregar colores fuera
   de esta paleta: el acento es único.
   ========================================================================== */

:root{
  /* Paleta de marca */
  --carbon:        #16181B;  /* base */
  --grafito:       #262A2E;  /* superficies */
  --azul:          #1E6BE8;  /* acento único */
  --azul-profundo: #1552B9;  /* azul sobre fondo claro */
  --blanco:        #FFFFFF;  /* reserva */

  /* Derivados de uso (no son colores nuevos: son opacidades y ajustes
     de legibilidad sobre la paleta anterior) */
  --azul-claro:    #5E9BFF;  /* texto chico en azul sobre oscuro — AA */
  --texto:         #EDEFF1;
  --texto-suave:   #9AA3AC;
  --linea:         rgba(255,255,255,.10);
  --linea-fuerte:  rgba(255,255,255,.20);
  --superficie:    #1C1F23;

  /* Tipografía */
  --titulares: "Barlow Condensed", "Arial Narrow", sans-serif;
  --textos:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Medidas */
  --ancho:     1200px;
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --radio:     2px;          /* geometría precisa: casi sin redondeo */
  --transicion: 160ms ease;
}

/* ------------------------------- Base ----------------------------------- */

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:88px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--carbon);
  color:var(--texto);
  font-family:var(--textos);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.65;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }

a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--titulares);
  font-weight:600;
  line-height:1.06;
  letter-spacing:.01em;
  text-transform:uppercase;
  margin:0;
}

p{ margin:0 0 1rem; }

::selection{ background:var(--azul); color:var(--blanco); }

:focus-visible{
  outline:2px solid var(--azul-claro);
  outline-offset:3px;
}

.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.visualmente-oculto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.salto-contenido{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--azul); color:var(--blanco);
  padding:.75rem 1.25rem; text-decoration:none;
}
.salto-contenido:focus{ left:1rem; top:1rem; }

/* Rótulo técnico recurrente */
.kicker{
  font-family:var(--textos);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--azul-claro);
  margin:0 0 1rem;
}

/* ------------------------------ Botones --------------------------------- */

.boton{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  font-family:var(--textos);
  font-weight:700;
  font-size:.9375rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.75rem 1.5rem;
  border:1px solid transparent;
  border-radius:var(--radio);
  cursor:pointer;
  transition:background var(--transicion), border-color var(--transicion),
             color var(--transicion), transform var(--transicion);
}
.boton--acento{ background:var(--azul); color:var(--blanco); }
.boton--acento:hover{ background:#1A5FD0; }
.boton--acento:active{ transform:translateY(1px); }

.boton--linea{ border-color:var(--linea-fuerte); color:var(--texto); background:transparent; }
.boton--linea:hover{ border-color:var(--azul); color:var(--azul-claro); }

.boton--grande{ padding:.95rem 2rem; font-size:1rem; }
.boton--bloque{ width:100%; }

/* ----------------------------- Cabecera --------------------------------- */

.cabecera{
  position:sticky; top:0; z-index:100;
  background:rgba(22,24,27,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}

.cabecera__interior{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  min-height:76px;
}

.marca{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--blanco); }
.marca__isotipo{ display:block; width:38px; flex:0 0 38px; color:var(--blanco); }
.marca__isotipo svg{ width:100%; height:auto; }
.marca__texto{ display:flex; flex-direction:column; }
.marca__nombre{
  font-family:var(--titulares); font-weight:600; font-size:1.5rem;
  letter-spacing:.12em; line-height:1;
}
.marca__tagline{
  font-size:.5625rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--texto-suave); margin-top:.25rem; white-space:nowrap;
}

.nav{ display:flex; align-items:center; gap:2rem; }
.nav__lista{
  display:flex; gap:1.75rem; list-style:none; margin:0; padding:0;
}
.nav__lista a{
  text-decoration:none; font-size:.875rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--texto-suave);
  padding-block:.5rem;
  border-bottom:2px solid transparent;
  transition:color var(--transicion), border-color var(--transicion);
}
.nav__lista a:hover{ color:var(--blanco); border-bottom-color:var(--azul); }

.nav-boton{
  display:none;
  width:44px; height:44px;
  background:transparent; border:1px solid var(--linea-fuerte);
  border-radius:var(--radio); cursor:pointer;
  align-items:center; justify-content:center;
}
.nav-boton__barras,
.nav-boton__barras::before,
.nav-boton__barras::after{
  display:block; width:18px; height:2px; background:var(--blanco);
  transition:transform var(--transicion), opacity var(--transicion);
}
.nav-boton__barras{ position:relative; }
.nav-boton__barras::before,
.nav-boton__barras::after{ content:""; position:absolute; left:0; }
.nav-boton__barras::before{ top:-6px; }
.nav-boton__barras::after{ top:6px; }
.nav-boton[aria-expanded="true"] .nav-boton__barras{ background:transparent; }
.nav-boton[aria-expanded="true"] .nav-boton__barras::before{ transform:translateY(6px) rotate(45deg); }
.nav-boton[aria-expanded="true"] .nav-boton__barras::after{ transform:translateY(-6px) rotate(-45deg); }

/* --------------------------------- Hero --------------------------------- */

.hero{
  position:relative;
  padding-block:clamp(4rem, 12vw, 8.5rem);
  border-bottom:1px solid var(--linea);
  overflow:hidden;
}

/* Eje a 45°: cita geométrica del isotipo, no decoración arbitraria */
.hero__eje{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(135deg, transparent calc(50% - 1px), var(--azul) 50%, transparent calc(50% + 1px));
  opacity:.18;
  mask-image:linear-gradient(to left, #000 0%, transparent 62%);
  -webkit-mask-image:linear-gradient(to left, #000 0%, transparent 62%);
}

.hero__interior{ position:relative; z-index:1; max-width:900px; }

.hero__titulo{
  font-size:clamp(2.75rem, 8vw, 5.5rem);
  margin-bottom:1.5rem;
}

.hero__bajada{
  font-size:clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
  color:var(--texto-suave);
  max-width:58ch;
  margin-bottom:2.25rem;
}

.hero__acciones{ display:flex; flex-wrap:wrap; gap:.875rem; margin-bottom:3.5rem; }

.hero__datos{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  margin:0; padding-top:2rem;
  border-top:1px solid var(--linea);
  max-width:760px;
}
.hero__datos dt{
  font-size:.6875rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--azul-claro); margin-bottom:.4rem;
}
.hero__datos dd{ margin:0; font-size:.9375rem; color:var(--texto-suave); }

/* ------------------------------ Secciones ------------------------------- */

.seccion{ padding-block:clamp(3.5rem, 9vw, 6.5rem); border-bottom:1px solid var(--linea); }
.seccion--grafito{ background:var(--grafito); }

.seccion__cabecera{ max-width:62ch; margin-bottom:clamp(2.5rem, 5vw, 4rem); }
.seccion__titulo{ font-size:clamp(2rem, 4.5vw, 3rem); margin-bottom:1rem; }
.seccion__bajada{ color:var(--texto-suave); font-size:1.0625rem; margin:0; }

/* ------------------------------ Servicios ------------------------------- */

.territorio{ margin-bottom:clamp(2.5rem, 5vw, 4rem); }
.territorio:last-of-type{ margin-bottom:0; }

.territorio__rotulo{
  display:flex; align-items:baseline; gap:1rem;
  padding-bottom:.875rem; margin-bottom:1.75rem;
  border-bottom:1px solid var(--linea-fuerte);
}
.territorio__numero{
  font-family:var(--titulares); font-size:1.125rem; font-weight:600;
  letter-spacing:.1em; color:var(--azul-claro);
}
.territorio__titulo{ font-size:clamp(1.375rem, 2.6vw, 1.875rem); letter-spacing:.04em; }

.grilla-servicios{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}

.servicio{
  background:var(--superficie);
  border:1px solid var(--linea);
  border-left:3px solid var(--azul);
  padding:1.75rem;
  transition:border-color var(--transicion), background var(--transicion);
}
.seccion--grafito .servicio{ background:rgba(0,0,0,.16); }
.servicio:hover{ border-color:var(--linea-fuerte); border-left-color:var(--azul); }
.servicio__titulo{
  font-size:1.25rem; letter-spacing:.03em; margin-bottom:.75rem; color:var(--blanco);
}
.servicio__texto{ color:var(--texto-suave); font-size:.9375rem; margin:0; }

.nota-borrador{
  margin-top:2.5rem; padding-top:1.25rem;
  border-top:1px solid var(--linea);
  font-size:.8125rem; color:var(--texto-suave); letter-spacing:.02em;
}

/* ------------------------------- Proceso -------------------------------- */

.proceso{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  counter-reset:paso;
}
.proceso__paso{
  padding:1.75rem 1.5rem;
  background:rgba(0,0,0,.16);
  border-top:2px solid var(--azul);
}
.proceso__numero{
  display:block; font-family:var(--titulares); font-size:2.25rem;
  font-weight:600; color:var(--azul-claro); line-height:1; margin-bottom:.75rem;
}
.proceso__titulo{ font-size:1.25rem; letter-spacing:.06em; margin-bottom:.5rem; }
.proceso__paso p{ margin:0; color:var(--texto-suave); font-size:.9375rem; }

/* ------------------------------- Empresa -------------------------------- */

.empresa{
  display:grid; gap:clamp(2rem, 5vw, 4rem);
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .empresa{ grid-template-columns:1.6fr 1fr; align-items:start; }
}
.empresa__texto p{ color:var(--texto-suave); max-width:62ch; }
.empresa__texto .seccion__titulo{ margin-bottom:1.5rem; }
.empresa__cita{
  border-left:3px solid var(--azul);
  padding-left:1.25rem;
  color:var(--texto) !important;
  font-size:1.0625rem;
  margin-top:2rem;
}

.empresa__ficha{
  background:var(--superficie);
  border:1px solid var(--linea);
  padding:1.75rem;
}
.empresa__ficha-titulo{
  font-size:.75rem; letter-spacing:.2em; color:var(--azul-claro);
  margin-bottom:1.25rem; font-family:var(--textos); font-weight:700;
}
.empresa__ficha dl{ margin:0; }
.empresa__ficha dt{
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-suave); margin-top:1.125rem;
}
.empresa__ficha dt:first-child{ margin-top:0; }
.empresa__ficha dd{ margin:.25rem 0 0; font-size:.9375rem; }

/* ------------------------------- Contacto ------------------------------- */

.contacto{
  display:grid; gap:clamp(2.5rem, 5vw, 4rem);
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .contacto{ grid-template-columns:1fr 1fr; align-items:start; }
}
.contacto__bajada{ color:var(--texto-suave); margin-bottom:2rem; max-width:46ch; }

.contacto__datos{
  list-style:none; margin:2.5rem 0 0; padding:2rem 0 0;
  border-top:1px solid var(--linea-fuerte);
  display:grid; gap:1.25rem;
}
.contacto__rotulo{
  display:block; font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--azul-claro); margin-bottom:.25rem;
}
.contacto__datos a{ color:var(--texto); text-decoration:none; border-bottom:1px solid var(--linea-fuerte); }
.contacto__datos a:hover{ color:var(--azul-claro); border-bottom-color:var(--azul); }

.contacto__formulario{
  background:rgba(0,0,0,.20);
  border:1px solid var(--linea);
  padding:clamp(1.5rem, 3vw, 2.25rem);
}
.formulario__titulo{ font-size:1.375rem; letter-spacing:.05em; margin-bottom:1.5rem; }

.campo{ margin-bottom:1.125rem; }
.campo label{
  display:block; font-size:.75rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texto-suave); margin-bottom:.4rem;
}
.campo input,
.campo textarea{
  width:100%;
  background:var(--carbon);
  border:1px solid var(--linea-fuerte);
  border-radius:var(--radio);
  color:var(--texto);
  font-family:var(--textos);
  font-size:1rem;
  padding:.75rem .875rem;
  transition:border-color var(--transicion);
}
.campo input:hover,
.campo textarea:hover{ border-color:rgba(255,255,255,.32); }
.campo input:focus,
.campo textarea:focus{ outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(30,107,232,.25); }
.campo textarea{ resize:vertical; min-height:120px; }

.campo[data-error] input,
.campo[data-error] textarea{ border-color:#E5484D; }
.campo__error{
  display:block; margin-top:.35rem; font-size:.8125rem; color:#FF8A8D;
}

.campo-trampa{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

.formulario__aviso{ margin:1rem 0 0; font-size:.9375rem; min-height:1.4em; }
.formulario__aviso[data-estado="ok"]{ color:#7BD88F; }
.formulario__aviso[data-estado="error"]{ color:#FF8A8D; }

/* --------------------------------- Pie ---------------------------------- */

.pie{ padding-block:3rem; background:var(--carbon); }
.pie__interior{ display:grid; gap:1.25rem; }
.pie__marca{ display:flex; align-items:center; gap:.875rem; }
.marca__isotipo--pie{ width:32px; flex:0 0 32px; color:var(--blanco); }
.pie__tagline{
  margin:0; font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--texto-suave);
}
.pie__legal,
.pie__copy{ margin:0; font-size:.8125rem; color:var(--texto-suave); }
.pie__copy{ padding-top:1.25rem; border-top:1px solid var(--linea); }

/* --------------------------- WhatsApp flotante -------------------------- */

.wa-flotante{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:90;
  width:54px; height:54px;
  display:flex; align-items:center; justify-content:center;
  background:var(--azul); color:var(--blanco);
  border-radius:50%;
  box-shadow:0 6px 24px rgba(0,0,0,.45);
  transition:transform var(--transicion), background var(--transicion);
}
.wa-flotante svg{ width:28px; height:28px; }
.wa-flotante:hover{ background:#1A5FD0; transform:scale(1.05); }

/* ------------------------------- Responsive ------------------------------ */

@media (max-width:899px){
  .nav-boton{ display:flex; }

  .nav{
    position:fixed; inset:76px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--carbon);
    border-bottom:1px solid var(--linea);
    padding:1rem var(--gutter) 1.75rem;
    transform:translateY(-120%);
    transition:transform 220ms ease;
    max-height:calc(100vh - 76px);
    overflow-y:auto;
  }
  .nav[data-abierto="true"]{ transform:translateY(0); }

  .nav__lista{ flex-direction:column; gap:0; }
  .nav__lista a{
    display:block; padding:1rem 0; font-size:1rem;
    border-bottom:1px solid var(--linea);
  }
  .nav__lista a:hover{ border-bottom-color:var(--linea); color:var(--azul-claro); }
  .nav__cta{ margin-top:1.25rem; }

  .marca__tagline{ display:none; }
  .hero__eje{ opacity:.12; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}