/* ============================================================
   BLUE NOVA CONSULTING — SISTEMA DE DISEÑO v1.2
   ============================================================
   FUENTES DEFINIDAS:
   · H1: DM Sans 500 (Medium), 87px, normal, ls:-1px, lh:1.2
   · H2: Oceanwide 700 (Bold), 69px, oblicua, ls:-2px, lh:1.2
   · Body: Myriad Pro 400, 17px, normal, ls:0.5px, lh:2.1
   · Buttons: Myriad Pro 600 (Semi bold), 15px, itálica, ls:0.3px
   
   Oceanwide = fuente premium → self-host via @font-face
   Myriad Pro = Adobe → fallback web: Source Sans 3 (misma familia)
   ============================================================ */

/* ------------------------------------------------------------
   0. FONT-FACE — Oceanwide (self-hosted)
   ------------------------------------------------------------ 
   NOTA: Colocar archivos de fuente en /fonts/
   Si no se dispone de la licencia, se activa el fallback
   Raleway 700 italic que tiene geometría similar.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Oceanwide';
  src: url('../fonts/oceanwide-bold.woff2') format('woff2'),
       url('../fonts/oceanwide-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oceanwide';
  src: url('../fonts/oceanwide-bold-italic.woff2') format('woff2'),
       url('../fonts/oceanwide-bold-italic.woff') format('woff');
  font-weight: 700;
  font-style: oblique;
  font-display: swap;
}

/* ------------------------------------------------------------
   1. CUSTOM PROPERTIES
   ------------------------------------------------------------ */
:root {
  /* === COLORES === */
  --color-bg-deep:        #060918;
  --color-bg-primary:     #0a0e27;
  --color-bg-elevated:    #0f1435;
  --color-bg-surface:     #141a42;
  --color-bg-hover:       #1a2255;

  --color-accent-primary:   #00b4d8;
  --color-accent-secondary: #7b2ff7;
  --color-accent-tertiary:  #00e5a0;
  --color-accent-warm:      #f5a623;

  --gradient-brand:       linear-gradient(135deg, #00b4d8 0%, #7b2ff7 100%);
  --gradient-brand-soft:  linear-gradient(135deg, rgba(0,180,216,0.12) 0%, rgba(123,47,247,0.12) 100%);
  --gradient-hero:        linear-gradient(180deg, #060918 0%, #0a0e27 40%, #0f1435 100%);
  --gradient-card:        linear-gradient(145deg, rgba(15,20,53,0.9) 0%, rgba(10,14,39,0.97) 100%);
  --gradient-glow:        radial-gradient(ellipse at center, rgba(0,180,216,0.15) 0%, transparent 70%);
  --gradient-violet-glow: radial-gradient(ellipse at center, rgba(123,47,247,0.12) 0%, transparent 70%);
  --gradient-process:     linear-gradient(180deg, #0a0e27 0%, #0d1a3a 40%, #101e50 70%, #0a0e27 100%);
  --gradient-cta-banner:  linear-gradient(135deg, #0a3d6b 0%, #0ea5e9 40%, #38bdf8 70%, #7dd3fc 100%);

  --color-text-primary:    #ffffff;
  --color-text-secondary:  #a0a8c8;
  --color-text-tertiary:   #6b7194;
  --color-text-accent:     #00b4d8;
  --color-text-warm:       #f5a623;
  --color-text-on-accent:  #060918;

  --color-border-subtle:   rgba(255,255,255,0.06);
  --color-border-default:  rgba(255,255,255,0.10);
  --color-border-card:     rgba(0,180,216,0.12);
  --color-border-accent:   rgba(0,180,216,0.30);
  --color-border-focus:    rgba(0,180,216,0.60);

  /* === TIPOGRAFÍA — FUENTES === */
  /* H1: DM Sans Medium */
  --font-h1:    'DM Sans', system-ui, -apple-system, sans-serif;
  /* H2+: Oceanwide Bold Oblique → fallback Raleway Bold Italic */
  --font-h2:    'Oceanwide', 'Raleway', system-ui, sans-serif;
  /* Body + Buttons: Myriad Pro → fallback Source Sans 3 */
  --font-body:  'Myriad Pro', 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
  /* Mono */
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* === ESCALA TIPOGRÁFICA — fluid (basada en valores reales) === */
  /* H1: 87px desktop → ~40px mobile */
  --text-h1:     clamp(2.5rem, 1.8rem + 3.5vw, 5.4rem);
  /* H2: 69px desktop → ~32px mobile */
  --text-h2:     clamp(2rem, 1.5rem + 2.5vw, 4.3rem);
  /* General scale */
  --text-xs:     clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm:     clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
  --text-base:   1.0625rem;  /* 17px — exacto como Myriad en el sitio */
  --text-md:     clamp(1rem, 0.9rem + 0.5vw, 1.15rem);
  --text-lg:     clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --text-xl:     clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  --text-2xl:    clamp(1.6rem, 1.3rem + 1.5vw, 2.25rem);
  --text-3xl:    clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --text-4xl:    clamp(2.5rem, 1.8rem + 3.5vw, 4rem);
  --text-btn:    0.9375rem; /* 15px — exacto para botones */

  /* Line heights (exactos del sitio) */
  --leading-none:    1;
  --leading-heading: 1.2;   /* H1 y H2: 1.2 */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-body:    2.1;   /* Body text: 2.1 — exacto del sitio */
  --leading-relaxed: 1.75;

  /* Font weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Letter spacing (exactos del sitio) */
  --tracking-h1:      -1px;   /* H1: -1px */
  --tracking-h2:      -2px;   /* H2: -2px */
  --tracking-body:    0.5px;  /* Body: 0.5px */
  --tracking-btn:     0.3px;  /* Buttons: 0.3px */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* === ESPACIADO === */
  --space-2xs:  0.25rem;
  --space-xs:   0.5rem;
  --space-sm:   0.75rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;
  --space-5xl:  8rem;

  /* === LAYOUT === */
  --container-max:     1280px;
  --container-narrow:  960px;
  --container-wide:    1440px;
  --container-padding: clamp(1rem, 3vw, 2rem);

  /* === BORDES === */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-full:  9999px;

  /* === SOMBRAS === */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg:    0 8px 30px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3);
  --shadow-xl:    0 16px 50px rgba(0,0,0,0.6);
  --shadow-glow:  0 0 20px rgba(0,180,216,0.25), 0 0 60px rgba(0,180,216,0.10);
  --shadow-glow-violet: 0 0 20px rgba(123,47,247,0.20), 0 0 60px rgba(123,47,247,0.08);
  --shadow-card:  0 4px 24px rgba(0,0,0,0.3);

  /* === TRANSICIONES === */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  /* === Z-INDEX === */
  --z-base:      1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
}

/* ------------------------------------------------------------
   2. RESET Y BASE
   ------------------------------------------------------------ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);         /* 17px */
  font-weight: var(--weight-regular);  /* 400 */
  line-height: var(--leading-body);    /* 2.1 */
  letter-spacing: var(--tracking-body); /* 0.5px */
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
::selection { background: rgba(0,180,216,0.30); color: var(--color-text-primary); }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--color-accent-primary); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
a:hover { color: #33c9e8; }
ul, ol { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }

/* ------------------------------------------------------------
   3. TIPOGRAFÍA
   ------------------------------------------------------------ */

/* H1: DM Sans Medium — el título principal grande */
h1, .h1 {
  font-family: var(--font-h1);
  font-size: var(--text-h1);
  font-weight: var(--weight-medium);    /* 500 */
  font-style: normal;
  line-height: var(--leading-heading);  /* 1.2 */
  letter-spacing: var(--tracking-h1);   /* -1px */
  color: var(--color-text-primary);
}

/* H2: Oceanwide Bold Oblique — títulos de sección */
h2, .h2 {
  font-family: var(--font-h2);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);      /* 700 */
  font-style: oblique;
  line-height: var(--leading-heading);  /* 1.2 */
  letter-spacing: var(--tracking-h2);   /* -2px */
  color: var(--color-text-primary);
}

/* H3-H6: Oceanwide para consistencia */
h3, .h3 {
  font-family: var(--font-h2);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  font-style: oblique;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-h2);
  color: var(--color-text-primary);
}
h4, .h4 {
  font-family: var(--font-h2);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: -1px;
  color: var(--color-text-primary);
}
h5, .h5 {
  font-family: var(--font-h1);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}
h6, .h6 {
  font-family: var(--font-h1);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

/* Body text */
p {
  margin-bottom: var(--space-md);
  color: var(--color-text-secondary);
  line-height: var(--leading-body);     /* 2.1 */
  letter-spacing: var(--tracking-body); /* 0.5px */
}
p:last-child { margin-bottom: 0; }

/* PATRÓN DE MARCA: em cyan en títulos */
h1 em, h2 em, h3 em, h4 em {
  font-style: italic;
  color: var(--color-accent-primary);
}
/* Variante warm amber */
h1 em.warm, h2 em.warm, h3 em.warm, h4 em.warm {
  color: var(--color-accent-warm);
}

/* Helpers */
.text-accent  { color: var(--color-accent-primary); }
.text-warm    { color: var(--color-accent-warm); }
.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-lead {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}
.text-small {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* ------------------------------------------------------------
   4. SECTION LABELS — Pill style
   ------------------------------------------------------------ */
.label {
  display: inline-flex;
  align-items: center;
  padding: 0.45em 1.2em;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-primary);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.label--accent {
  color: var(--color-accent-primary);
  background: rgba(0,180,216,0.08);
  border-color: rgba(0,180,216,0.20);
}

/* ------------------------------------------------------------
   5. LAYOUT
   ------------------------------------------------------------ */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); }
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--space-4xl); position: relative; }
@media (max-width: 768px) { .section { padding-block: var(--space-3xl); } }

.section__header { text-align: center; margin-bottom: var(--space-3xl); max-width: 720px; margin-inline: auto; }
.section__label { display: inline-block; margin-bottom: var(--space-md); }
.section__title { margin-bottom: var(--space-md); }
.section__description { font-size: var(--text-lg); color: var(--color-text-secondary); }

.grid { display: grid; gap: var(--space-lg); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* ------------------------------------------------------------
   6. BOTONES — Myriad Pro 600, 15px, italic, ls:0.3px
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.8em 1.8em;
  font-family: var(--font-body);        /* Myriad Pro */
  font-size: var(--text-btn);           /* 15px */
  font-weight: var(--weight-semibold);  /* 600 */
  font-style: italic;                   /* Itálica */
  letter-spacing: var(--tracking-btn);  /* 0.3px */
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    background var(--duration-base) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--gradient-brand);
  color: var(--color-text-on-accent);
  box-shadow: var(--shadow-glow);
}
.btn--primary:hover {
  box-shadow: 0 0 25px rgba(0,180,216,0.35), 0 0 80px rgba(0,180,216,0.15);
  transform: translateY(-2px);
  color: var(--color-text-on-accent);
}

.btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
}
.btn--secondary:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
  background: rgba(0,180,216,0.05);
}

.btn--ghost {
  background: transparent;
  color: var(--color-accent-primary);
  padding: 0.6em 1em;
}
.btn--ghost:hover { background: rgba(0,180,216,0.08); }

/* Accent — "Agenda tu cita" */
.btn--accent {
  background: var(--color-bg-deep);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  font-weight: var(--weight-bold);
}
.btn--accent:hover {
  border-color: var(--color-accent-primary);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
  color: var(--color-text-primary);
}

.btn--sm { padding: 0.55em 1.2em; font-size: var(--text-xs); }
.btn--lg { padding: 1em 2.4em; font-size: var(--text-base); }
.btn__icon { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* ------------------------------------------------------------
   7. CARD — SERVICIO
   ------------------------------------------------------------ */
.card-service {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.card-service:hover { border-color: var(--color-border-accent); box-shadow: var(--shadow-card); transform: translateY(-4px); }
.card-service__image { width: 100%; aspect-ratio: 16/10; background: var(--color-bg-surface); overflow: hidden; }
.card-service__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.card-service:hover .card-service__image img { transform: scale(1.05); }
.card-service__body { padding: var(--space-lg); }
.card-service__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2xs);
  letter-spacing: var(--tracking-body);
}
.card-service__title {
  font-family: var(--font-h2);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-style: oblique;
  color: var(--color-accent-primary);
  line-height: var(--leading-heading);
  letter-spacing: -1px;
}

/* ------------------------------------------------------------
   8. CARD — GENÉRICA
   ------------------------------------------------------------ */
.card {
  background: var(--gradient-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  position: relative; overflow: hidden;
}
.card:hover { border-color: var(--color-border-accent); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.card__icon { width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--gradient-brand-soft); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-lg); color: var(--color-accent-primary); font-size: 1.5rem; }
.card__title { font-family: var(--font-h1); font-size: var(--text-lg); font-weight: var(--weight-medium); margin-bottom: var(--space-sm); color: var(--color-text-primary); }
.card__text { font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-body); }
.card__link { display: inline-flex; align-items: center; gap: var(--space-2xs); margin-top: var(--space-lg); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold); font-style: italic; color: var(--color-accent-primary); transition: gap var(--duration-base) var(--ease-out); }
.card__link:hover { gap: var(--space-xs); }
.card--featured { border-color: var(--color-border-accent); background: var(--gradient-card), var(--gradient-brand-soft); }

/* ------------------------------------------------------------
   9. CARD — PORTAFOLIO
   ------------------------------------------------------------ */
.card-portfolio {
  background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.card-portfolio:hover { border-color: var(--color-border-accent); box-shadow: var(--shadow-card); transform: translateY(-4px); }
.card-portfolio__image { width: 100%; aspect-ratio: 4/3; overflow: hidden; }
.card-portfolio__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.card-portfolio:hover .card-portfolio__image img { transform: scale(1.05); }
.card-portfolio__body { padding: var(--space-lg); }
.card-portfolio__title { font-family: var(--font-h1); font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--color-text-primary); margin-bottom: var(--space-xs); }
.card-portfolio__tags { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.card-portfolio__tag { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-accent-primary); font-weight: var(--weight-medium); }

/* ------------------------------------------------------------
   10. CARD — TESTIMONIAL
   ------------------------------------------------------------ */
.card-testimonial {
  background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: var(--space-xl);
  transition: border-color var(--duration-base) var(--ease-out);
}
.card-testimonial:hover { border-color: var(--color-border-accent); }
.card-testimonial__stars { display: flex; gap: 4px; margin-bottom: var(--space-md); color: var(--color-accent-primary); }
.card-testimonial__stars svg { width: 18px; height: 18px; fill: currentColor; }
.card-testimonial__quote { font-size: var(--text-base); font-style: italic; color: var(--color-text-secondary); line-height: var(--leading-body); margin-bottom: var(--space-lg); }
.card-testimonial__author { display: flex; align-items: center; gap: var(--space-sm); }
.card-testimonial__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-border-card); flex-shrink: 0; }
.card-testimonial__name { font-family: var(--font-h1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-primary); }
.card-testimonial__role { font-size: var(--text-xs); color: var(--color-text-tertiary); }

/* ------------------------------------------------------------
   11. PROCESO — 4 pasos
   ------------------------------------------------------------ */
.process-section {
  background: var(--gradient-process); border: 1px solid var(--color-border-card); border-radius: var(--radius-xl);
  padding: var(--space-3xl) var(--space-2xl); position: relative; overflow: hidden;
}
.process-section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 600px; height: 600px; background: var(--gradient-glow); pointer-events: none; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); position: relative; z-index: 1; }
@media (max-width: 1024px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .process-grid { grid-template-columns: 1fr; } }
.process-step__icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: rgba(0,180,216,0.12); display: flex; align-items: center; justify-content: center; color: var(--color-accent-primary); margin-bottom: var(--space-md); }
.process-step__title { font-family: var(--font-h1); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-text-primary); margin-bottom: var(--space-xs); }
.process-step__text { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); }

/* ------------------------------------------------------------
   12. CTA BANNER
   ------------------------------------------------------------ */
.cta-banner { border-radius: var(--radius-xl); padding: var(--space-4xl) var(--space-2xl); background: var(--gradient-cta-banner); position: relative; overflow: hidden; }
.cta-banner__content { position: relative; z-index: 1; }
.cta-banner__title {
  font-family: var(--font-h2);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  font-style: oblique;
  color: var(--color-text-on-accent);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-h2);
  margin-bottom: var(--space-xl);
}
.cta-banner__title span { display: block; color: var(--color-accent-primary); }

/* ------------------------------------------------------------
   13. FORMULARIOS
   ------------------------------------------------------------ */
.form-group { margin-bottom: var(--space-lg); }
.form-label { display: block; font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); margin-bottom: var(--space-xs); }
.form-input {
  width: 100%; padding: 0.85em 1.1em;
  font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-primary);
  background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); appearance: none;
  letter-spacing: var(--tracking-body);
}
.form-input::placeholder { color: var(--color-text-tertiary); }
.form-input:hover { border-color: var(--color-border-accent); }
.form-input:focus { outline: none; border-color: var(--color-accent-primary); box-shadow: 0 0 0 3px rgba(0,180,216,0.15); }
textarea.form-input { min-height: 140px; resize: vertical; line-height: var(--leading-normal); }
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23a0a8c8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1em center; padding-right: 2.5em; }
.form-check { display: flex; align-items: flex-start; gap: var(--space-xs); cursor: pointer; }
.form-check input[type="checkbox"], .form-check input[type="radio"] { width: 20px; height: 20px; accent-color: var(--color-accent-primary); margin-top: 2px; flex-shrink: 0; }
.form-error { font-size: var(--text-sm); color: #ff6b6b; margin-top: var(--space-2xs); }
.form-success { font-size: var(--text-sm); color: var(--color-accent-tertiary); margin-top: var(--space-2xs); }

/* ------------------------------------------------------------
   14. BADGES
   ------------------------------------------------------------ */
.badge { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: 0.3em 0.8em; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); border-radius: var(--radius-full); white-space: nowrap; }
.badge--primary { background: rgba(0,180,216,0.12); color: var(--color-accent-primary); border: 1px solid rgba(0,180,216,0.20); }
.badge--secondary { background: rgba(123,47,247,0.12); color: #a06aff; border: 1px solid rgba(123,47,247,0.20); }
.badge--success { background: rgba(0,229,160,0.12); color: var(--color-accent-tertiary); border: 1px solid rgba(0,229,160,0.20); }

/* ------------------------------------------------------------
   15. FOOTER
   ------------------------------------------------------------ */
.footer { background: var(--color-bg-deep); border-top: 1px solid var(--color-border-subtle); padding-top: var(--space-3xl); }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2xl); padding-bottom: var(--space-2xl); }
@media (max-width: 768px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__heading { display: inline-flex; padding: 0.35em 1em; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-primary); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); margin-bottom: var(--space-lg); }
.footer__link { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-sm); transition: color var(--duration-fast) var(--ease-out); }
.footer__link:hover { color: var(--color-accent-primary); }
.footer__social { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); }
.footer__social-link { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border-default); display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); transition: all var(--duration-fast) var(--ease-out); }
.footer__social-link:hover { border-color: var(--color-accent-primary); color: var(--color-accent-primary); background: rgba(0,180,216,0.08); }
.footer__bottom { border-top: 1px solid var(--color-border-subtle); padding: var(--space-lg) 0; text-align: center; }
.footer__copyright { font-size: var(--text-sm); color: var(--color-text-tertiary); font-style: italic; }

/* ------------------------------------------------------------
   16. DECORATIVOS
   ------------------------------------------------------------ */
.divider { width: 100%; height: 1px; background: var(--color-border-subtle); border: none; margin-block: var(--space-2xl); }
.divider--gradient { background: var(--gradient-brand); height: 2px; opacity: 0.4; }
.glow-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; }
.glow-orb--cyan { background: rgba(0,180,216,0.15); }
.glow-orb--violet { background: rgba(123,47,247,0.12); }

/* ------------------------------------------------------------
   17. UTILIDADES
   ------------------------------------------------------------ */
.text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }
.mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mt-2xl { margin-top: var(--space-2xl); }
.mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .mb-xl { margin-bottom: var(--space-xl); } .mb-2xl { margin-bottom: var(--space-2xl); }

/* ------------------------------------------------------------
   18. ANIMACIONES
   ------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--duration-slower) var(--ease-out), transform var(--duration-slower) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--left { transform: translateX(-30px); } .reveal--left.is-visible { transform: translateX(0); }
.reveal--right { transform: translateX(30px); } .reveal--right.is-visible { transform: translateX(0); }
.reveal--scale { transform: scale(0.95); } .reveal--scale.is-visible { transform: scale(1); }

.reveal--stagger > * { opacity: 0; transform: translateY(20px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
.reveal--stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.reveal--stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: translateY(0); }
.reveal--stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
.reveal--stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
.reveal--stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: translateY(0); }
.reveal--stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }

@keyframes pulse-glow { 0%, 100% { box-shadow: var(--shadow-glow); } 50% { box-shadow: 0 0 30px rgba(0,180,216,0.35), 0 0 80px rgba(0,180,216,0.12); } }
.pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }

@keyframes skeleton-shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.skeleton { background: linear-gradient(90deg, var(--color-bg-elevated) 25%, var(--color-bg-surface) 50%, var(--color-bg-elevated) 75%); background-size: 400px 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-sm); }

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

@media print { body { background: #fff; color: #000; } .btn, .badge, .glow-orb, .label { display: none; } }