/*
Theme Name:   Altaweb.ia (Hello Elementor Child)
Theme URI:    https://altawebia.com
Description:  Tema hijo de Hello Elementor para Altaweb.ia. Carga los tokens del sistema "Aurora Brutalism", las fuentes locales y la capa de movimiento GSAP. El contenido de las paginas se construye con Elementor; este tema solo aporta la base y los assets.
Author:       Altaweb.ia
Author URI:   https://altawebia.com
Template:     hello-elementor
Version:      0.1.0
Text Domain:  altaweb-ia
*/

/* ==========================================================================
   1. TOKENS
   Fuente unica de verdad. Ningun valor de color, tipografia o espaciado
   deberia escribirse suelto fuera de este bloque.
   ========================================================================== */

:root {
  /* Color */
  --ink:    #0A0118;
  --violet: #7C3AED;
  --cyan:   #22D3EE;
  --white:  #FFFFFF;
  --muted:  rgba(255, 255, 255, .65);
  --line:   rgba(255, 255, 255, .12);
  --aurora: linear-gradient(135deg, #7C3AED, #22D3EE);

  /* Espaciado: multiplos de 8 */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  40px;
  --sp-5:  64px;
  --sp-6:  96px;
  --sp-7:  128px;

  /* Tipografia */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Escala movil (valores por defecto, mobile-first) */
  --fs-h1:    36px;
  --fs-h2:    28px;
  --fs-h3:    22px;
  --fs-body:  16px;
  --fs-label: 11px;

  /* Motion */
  --ease:     cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 200ms;
}

@media (min-width: 1025px) {
  :root {
    --fs-h1:    64px;
    --fs-h2:    44px;
    --fs-h3:    28px;
    --fs-body:  18px;
    --fs-label: 12px;
  }
}

/* ==========================================================================
   2. FUENTES LOCALES
   [DATO NECESARIO] Los .woff2 de Space Grotesk y JetBrains Mono todavia no
   estan subidos. Hasta entonces cae al stack de sistema y la web funciona.
   Ver assets/fonts/README.md.
   ========================================================================== */

/* @font-face se anade aqui cuando los ficheros esten en assets/fonts/ */

/* ==========================================================================
   3. BASE — Aurora Brutalism
   ========================================================================== */

body {
  background-color: var(--ink);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Radio cero en absolutamente todo, incluido lo que pinta Elementor. */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--white);
}

h1 { font-size: var(--fs-h1); line-height: 1.05; }
h2 { font-size: var(--fs-h2); line-height: 1.15; }
h3 { font-size: var(--fs-h3); line-height: 1.2;  }

/* Etiqueta tecnica */
.aw-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
}

/* Texto secundario: nunca violeta (contraste 4.2:1 sobre --ink, por debajo de AA) */
.aw-muted { color: var(--muted); }

/* Bordes duros */
.aw-line       { border: 1px solid var(--line); }
.aw-line-top   { border-top: 1px solid var(--line); }
.aw-line-bottom{ border-bottom: 1px solid var(--line); }

/* ==========================================================================
   4. ACCESIBILIDAD — no negociable
   ========================================================================== */

/* Foco visible en todo lo interactivo. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* Area tactil minima 44x44. */
a.elementor-button,
button,
input[type="submit"] {
  min-height: 44px;
  min-width: 44px;
}

/* Enlaces en linea: cyan, nunca violeta. */
.aw-prose a {
  color: var(--cyan);
  text-underline-offset: .2em;
}

/* ==========================================================================
   5. INTERACCION
   ========================================================================== */

.aw-card {
  border: 1px solid var(--line);
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  will-change: transform;
}

.aw-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 58, 237, .5);
  box-shadow: 0 0 0 1px rgba(124, 58, 237, .35),
              0 18px 48px -12px rgba(124, 58, 237, .45);
}

/* CTA primario: gradiente Aurora, maximo peso visual.
   OJO: _css_classes de Elementor pone la clase en el CONTENEDOR del widget,
   no en el <a class="elementor-button">. Por eso se estila el descendiente. */
.aw-cta-primary .elementor-button {
  background-image: var(--aurora);
  background-color: transparent;
  color: var(--ink);
  font-weight: 700;
  border: 0;
  transition: transform var(--dur-fast) var(--ease);
}

.aw-cta-primary .elementor-button:hover,
.aw-cta-primary .elementor-button:focus {
  color: var(--ink);
  transform: scale(1.02);
}

/* CTA secundario: outline. SIEMPRE visualmente por debajo del primario. */
.aw-cta-secondary .elementor-button {
  background-color: transparent;
  background-image: none;
  color: var(--white);
  font-weight: 500;
  border: 1px solid var(--line);
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.aw-cta-secondary .elementor-button:hover,
.aw-cta-secondary .elementor-button:focus {
  color: var(--white);
  border-color: var(--muted);
  transform: scale(1.02);
}

/* ---------- HEADER ----------
   Elementor da a los hijos de un container width:100% y a este widget de
   navegacion se le colapsaba el ancho hasta solaparse con el logo. En vez
   de parchear un sintoma cada vez, aqui se declara el layout entero.
   Es la unica zona donde el CSS del tema manda sobre Elementor, y se hace
   por ID para no afectar a ningun otro container del sitio. */
#aw-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#aw-header > .elementor-widget-theme-site-logo {
  flex: 0 0 auto;
  width: auto;
  max-width: 200px;
}

#aw-header > .elementor-widget-theme-site-logo img {
  display: block;
  width: 100%;
  height: auto;
}

#aw-header > .e-con {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

#aw-header > .e-con > .elementor-widget {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

@media (max-width: 767px) {
  #aw-header { padding-left: 16px; padding-right: 16px; gap: 12px; }
  #aw-header > .elementor-widget-theme-site-logo { max-width: 120px; }
  #aw-header > .e-con { gap: 12px; }
  #aw-header .aw-cta-primary .elementor-button { padding: 12px 14px; font-size: 12px; }
}

/* ==========================================================================
   6. MOVIMIENTO — estado inicial del parallax
   Los elementos que GSAP anima parten ocultos SOLO si JS esta disponible.
   La clase .aw-js la pone functions.php, para que sin JS el contenido se vea.
   ========================================================================== */

.aw-js .aw-reveal { opacity: 0; }

.aw-media-expand { overflow: hidden; }
.aw-media-expand > img,
.aw-media-expand > picture > img { display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .aw-js .aw-reveal { opacity: 1; }
}

/* Ninguna seccion debe desbordar en horizontal en ningun breakpoint. */
html, body { overflow-x: hidden; }