/* ============================================================
   PORTAFOLIO — Iván Taid Ruiz Alcaraz
   Sistema de Diseño: CSS Puro | Liquid Glass | Mesh Gradient
   ============================================================
   Fluid layout: `clamp(min, preferido vw, max)` en font-size, padding, margin, gap,
   width y height donde escala entre móvil y escritorio. Los @media conservan solo
   cambios de layout (flex-direction, visibilidad, ancho 100% forzado, etc.).
   ============================================================ */

/* ─── GOOGLE FONTS ─────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Instrument+Serif:ital@0;1&display=swap");

/* ─── GOTHAM (licencia propia — coloca los .woff2 en /assets/fonts/) ───
   Nombres esperados (ajústalos si tu export usa otro nombre):
   Gotham-Book.woff2 (400), Gotham-Bold.woff2 (700), Gotham-Black.woff2 (900)
   Si no hay archivos, el navegador usará el fallback (Raleway). */
@font-face {
  font-family: "Gotham";
  src: url("../assets/fonts/Gotham-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("../assets/fonts/Gotham-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("../assets/fonts/Gotham-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ─── VARIABLES CSS (Design Tokens) ────────────────────────── */
:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --color-primary: #337bff;
  --color-primary-alt: #3c5dff;
  --color-accent: #3aa6ff;
  --color-accent-bright: #00c8ff;

  --color-bg-dark: #0b0b0b;
  --color-bg-dark2: #111111;
  --color-dark: #262626;
  --color-white: #ffffff;

  --color-text: #ffffff;
  --color-text-muted: #c4c7c8;
  --color-text-dim: #dddddd;
  --color-text-dark: #262626;

  --color-badge-experto: #3aa6ff;
  --color-badge-avanzado: #ff5b56;
  --color-badge-intermedio: #f3915c;
  --color-badge-basico: #999999;
  --gradient-hero-text: linear-gradient(to right, #ffffff 0%, #3aa6ff 100%);
  --gradient-card-info: linear-gradient(
    129deg,
    rgba(255, 255, 255, 0.116) 14.8%,
    rgba(137, 137, 137, 0.251) 88.9%
  );
  --gradient-btn-square: linear-gradient(to bottom, #f4f4f4 0%, #86abfb 100%);
  --gradient-academic-1: linear-gradient(
    137.5deg,
    rgba(54, 173, 224, 0.2) 0%,
    rgb(36, 45, 85) 50%,
    rgba(36, 45, 85, 0) 100%
  );
  --gradient-academic-2: linear-gradient(
    137.5deg,
    rgba(241, 111, 99, 0.2) 0%,
    rgba(240, 129, 0, 0.1) 50%,
    rgba(240, 129, 0, 0) 100%
  );
  --glass-nav-bg: rgba(0, 0, 0, 0.226);
  --glass-nav-border: 1px solid #efefef78;
  --glass-btn-nav-bg: rgba(170, 170, 170, 0.18);
  --glass-btn-nav-border: 0.5px solid #efefef6c;
  --glass-hero-barra: rgba(45, 45, 45, 0.3);
  --glass-hero-btn: rgba(39, 39, 39, 0.55);
  --glass-dark-card: rgba(19, 19, 19, 0.5);
  --glass-card-overlay: rgba(255, 255, 255, 0.05);
  --glass-skill-card: rgba(15, 15, 18, 0.2);
  --glass-badge-bg: rgba(15, 15, 18, 0.07);
  --solid-dark-card: rgb(34, 34, 34);

  --blur-xs: blur(4px);
  --blur-sm: blur(8px);
  --blur-md: blur(16px);
  --blur-lg: blur(20px);
  --blur-xl: blur(24px);
  --border-glass: 1px solid rgba(255, 255, 255, 0.44);
  --border-glass-sm: 1px solid rgba(255, 255, 255, 0.1);
  --border-glass-white: 1px solid rgba(255, 255, 255, 0.6);
  --border-efefef: 1px solid #ffffff9d;
  --shadow-nav: 0 6px 10.1px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 4px 4px rgba(0, 0, 0, 0.25);
  --shadow-btn: 0 3px 5px rgba(0, 0, 0, 0.25);
  --shadow-academic: 0 20px 40px rgba(0, 0, 0, 0.4);
  --shadow-sq-btn: 0 7px 7.5px rgba(66, 130, 213, 0.3);
  --radius-pill: 35px;
  --radius-nav: 69px;
  --radius-btn-nav: 15px;
  --radius-card: 12px;
  --radius-card-lg: 16px;
  --radius-sm: 8px;
  --radius-xs: 3px;
  --font-doto: "Doto", sans-serif;
  --font-display: "Instrument Serif", Georgia, serif;
  --font-gotham: "Gotham", "Raleway", system-ui, sans-serif;
  --font-title: "Raleway", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Geist Mono", "Courier New", monospace;
  --font-geist: "Geist", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", "Georgia", serif;

  --radius-xl: 24px;
  --glass-footer-bg: rgba(0, 0, 0, 0.42);
  --glass-footer-bg-light: rgba(220, 225, 235, 0.55);

  --text-fluid-lg: clamp(22px, 3vw, 32px);

  /* Espaciado de sección fluido (reutilizado con var(--section-px)) */
  --section-px: clamp(24px, 5vw, 120px);
  --section-py: clamp(48px, 6vw, 84px);
  --content-max: 1196px;
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
  --bg: #1e1e1e;
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.749);
  --dark-text: #22282b;
  --page-pad: clamp(24px, 3.4vw, 50px);
  --btn-radius: 10px;
  --card-radius: 4px;
  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-text-active: #ffffff;
  --tabs-pill-bg: rgba(255, 255, 255, 0.1);
}

/* ─── RESET & BASE ──────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  /* Refuerzo móvil (Safari): evita micro-scroll horizontal si algún hijo se desborda */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg-dark);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
}

img {
  display: block;
  max-width: 100%;
}
a {
  text-decoration: none;
  color: inherit;
}
ul {
  list-style: none;
}

/* ─── UTILIDADES LIQUID GLASS ───────────────────────────────── */

/* Base glass: fondo rgba + backdrop-filter + borde translúcido */
.glass {
  background: var(--glass-nav-bg);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: var(--border-glass);
  position: relative;
}

/* Glass con efecto color-dodge (gradient overlay) */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 78.846%,
    rgba(255, 255, 255, 0.2) 100%
  );
  mix-blend-mode: color-dodge;
  pointer-events: none;
}

/* Glass oscuro para cards sobre fondos oscuros */
.glass-dark {
  background: var(--glass-dark-card);
  backdrop-filter: var(--blur-xl);
  -webkit-backdrop-filter: var(--blur-xl);
  border: 1px solid rgba(255, 255, 255, 0.34);
  position: relative;
}

/* Glass card info (sobre mí) */
.glass-card-info {
  background: var(--gradient-card-info);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border: var(--border-glass);
}

/* Glass para skill cards (habilidades) */
.glass-skill {
  background: var(--glass-skill-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: var(--border-glass-white);
}

/* ─── Switch de modo segmentado (reutilizable) ─────────────────
   Dos opciones visibles; thumb deslizante. Izquierda = aria-checked="false".
   Uso:
     <button type="button" class="mode-switch" role="switch" aria-checked="false">
       <span class="mode-switch__track">
         <span class="mode-switch__thumb" aria-hidden="true"></span>
         <span class="mode-switch__segment mode-switch__segment--start" data-switch-value="a">
           <span class="mode-switch__segment-inner">…icono… <span>Texto A</span></span>
         </span>
         <span class="mode-switch__segment mode-switch__segment--end" data-switch-value="b">
           <span class="mode-switch__segment-inner">…icono… <span>Texto B</span></span>
         </span>
       </span>
     </button>
   • Modificador --center: centra en contenedor flex columna.
   • JS: aria-checked="true" = opción derecha (--end); clic en segmento vía data-switch-value.
   ───────────────────────────────────────────────────────────── */
.mode-switch {
  --mode-switch-pad: 4px;
  --mode-switch-h: clamp(42px, 11vw, 48px);
  flex-shrink: 0;
  display: inline-flex;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-title);
  -webkit-tap-highlight-color: transparent;
}

.mode-switch:focus-visible {
  outline: none;
}

.mode-switch:focus-visible .mode-switch__track {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 3px;
}

.mode-switch--center {
  align-self: center;
}

.mode-switch__track {
  position: relative;
  display: flex;
  align-items: stretch;
  width: clamp(248px, 72vw, 340px);
  min-height: var(--mode-switch-h);
  padding: var(--mode-switch-pad);
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  border: var(--border-glass);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.mode-switch__thumb {
  position: absolute;
  top: var(--mode-switch-pad);
  bottom: var(--mode-switch-pad);
  left: var(--mode-switch-pad);
  width: calc(50% - var(--mode-switch-pad) - 2px);
  border-radius: calc(var(--radius-pill) - 4px);
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(58, 166, 255, 0.22) 100%
  );
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: left 0.4s cubic-bezier(0.34, 1.12, 0.64, 1);
  z-index: 0;
  pointer-events: none;
}

.mode-switch[aria-checked="true"] .mode-switch__thumb {
  left: calc(50% + 2px);
}

.mode-switch__segment {
  position: relative;
  z-index: 1;
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: clamp(6px, 1.5vw, 8px) clamp(8px, 2vw, 12px);
  color: rgba(255, 255, 255, 0.48);
  transition: color 0.28s ease;
}

.mode-switch__segment-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 1.2vw, 8px);
  min-width: 0;
}

.mode-switch__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
  opacity: 0.75;
  transition: opacity 0.28s ease;
}

.mode-switch__text {
  font-weight: 600;
  font-size: clamp(11px, 1.35vw, 13px);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.mode-switch[aria-checked="false"] .mode-switch__segment--start,
.mode-switch[aria-checked="true"] .mode-switch__segment--end {
  color: var(--color-white);
}

.mode-switch[aria-checked="false"]
  .mode-switch__segment--start
  .mode-switch__icon,
.mode-switch[aria-checked="true"]
  .mode-switch__segment--end
  .mode-switch__icon {
  opacity: 1;
}

.mode-switch:hover .mode-switch__track {
  border-color: rgba(58, 166, 255, 0.35);
  background: rgba(255, 255, 255, 0.09);
}

/* ─── FONDO TECNOLÓGICO — canvas animado (TechBgCanvas) ─────── */
/*
  Canvas fijo de pantalla completa que dibuja una cuadrícula de
  puntos y trazos tipo circuito. Siempre visible encima del
  contenido pero con pointer-events: none y opacidad muy baja.
  Parallax: la cuadrícula sube al bajar el scroll (--parallax: 0.15).
  Deriva: movimiento horizontal autónomo lento.
  Se desactiva con prefers-reduced-motion.
  Editar: ver clase TechBgCanvas en js/main.js.
*/
#tech-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 2;
}

/* ─── UTILIDADES LAYOUT ─────────────────────────────────────── */
.container {
  width: 100%;
  max-width: calc(var(--content-max) + var(--section-px) * 2);
  margin-inline: auto;
  padding-inline: var(--section-px);
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-gap-sm {
  gap: clamp(8px, 1.5vw, 10px);
}
.flex-gap-md {
  gap: clamp(14px, 3vw, 20px);
}
.flex-gap-lg {
  gap: clamp(22px, 5vw, 33px);
}

/* ─── TIPOGRAFÍA Y ENCABEZADOS GENERALES ─────────────────────── */
.global-pretitle,
.global-pretitle {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 21px);
  color: var(--color-primary-alt);
}

.global-title,
.global-title,
.sobremi__title {
  font-family: var(--font-doto);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  color: var(--color-text);
}

.section-title--dark,
.section-intro__title--dark {
  color: var(--color-dark);
}

.global-subtitle,
.global-subtitle {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--color-primary-alt);
}

.global-desc,
.sobremi__desc {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--color-text);
}

/* Bloque reutilizable: pretítulo + título + subtítulo/descripción */
.section-intro {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 8vw, 80px);
  box-sizing: border-box;
}

.section-intro--center {
  align-items: center;
  text-align: center;
}

.section-intro--start {
  align-items: flex-start;
  text-align: left;
}

/* Sin márgenes/padding del contenedor (el padre de la sección ya los define) */
.section-intro--flush {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.section-intro__title--sm {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 400;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  padding: clamp(4px, 1vw, 8px) clamp(12px, 3vw, 24px);
}

.section-intro__title--on-dark {
  color: var(--color-white);
}

.global-desc {
  padding-top: clamp(16px, 5vw, 27px);
  max-width: clamp(320px, 92vw, 878px);
}

.section-intro__desc--muted {
  color: rgba(255, 255, 255, 0.7);
}

.section-intro--center .global-subtitle {
  margin-top: clamp(6px, 1.2vw, 8px);
}

/* Encabezado especial con scroll-scrub interactivo (Habilidades) */
.skills-textcolumn-title {
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  padding: clamp(4px, 1vw, 8px) clamp(12px, 3vw, 30px);
  color: color-mix(
    in srgb,
    var(--color-white) calc((1 - var(--hab-focus)) * 100%),
    var(--color-dark) calc(var(--hab-focus) * 100%)
  );
}

.skills-textcolumn-desc {
  padding: clamp(18px, 4vw, 27px) 0;
  color: color-mix(
    in srgb,
    var(--color-text-dim) calc((1 - var(--hab-focus)) * 100%),
    var(--color-dark) calc(var(--hab-focus) * 100%)
  );
}

/* ─── BADGES / NIVEL ────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4px, 0.8vw, 5px) clamp(14px, 2.5vw, 18px);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(11px, 1.2vw, 12px);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  background: var(--glass-badge-bg);
  border: var(--border-glass-sm);
  white-space: nowrap;
}

.badge--experto {
  color: var(--color-badge-experto);
}
.badge--avanzado {
  color: var(--color-badge-avanzado);
}
.badge--intermedio {
  color: var(--color-badge-intermedio);
}
.badge--basico {
  color: var(--color-badge-basico);
}
.badge--white {
  color: var(--color-white);
}

/* ─── NAVEGACIÓN ─────────────────────────────────────────────── */
.nav-wrapper {
  position: fixed;
  top: clamp(6px, 1.2vw, 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: 100%;
  max-width: clamp(280px, calc(100% - 16px), 1120px);
  box-sizing: border-box;
}

/* Menú móvil abierto: main.js añade esta clase al <body> para evitar scroll detrás del panel */
body.nav-menu-open {
  overflow: hidden;
}

.nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2.5vw, 28px);
  padding: clamp(8px, 1.2vw, 10px) clamp(12px, 2vw, 22px);
  border-radius: var(--radius-nav);
  border: var(--glass-nav-border);
  background: var(--glass-nav-bg);
  backdrop-filter: blur(24px) saturate(150%) brightness(110%);
  -webkit-backdrop-filter: blur(24px) saturate(150%) brightness(110%);
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.3),
    inset 0 -2px 10px rgba(255, 255, 255, 0.1),
    var(--shadow-nav);
  /* visible: evita recortar Contáctame + idioma; el degradado sigue contenido por el radio del propio .nav */
  overflow: visible;
  min-width: 0;
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-nav);
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 78.846%,
    rgba(255, 255, 255, 0.2) 100%
  );
  mix-blend-mode: color-dodge;
  pointer-events: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1vw, 10px);
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

/*
 * ─── Menú hamburguesa (móvil ≤700px) ─────────────────────────────────────────
 * Qué se hizo:
 * - El botón .nav__menu-toggle solo es visible en ese ancho (display:none en escritorio).
 * - #nav-drawer (.nav-drawer) usa display:contents en ≥701px: el navegador “aplana” el
 *   contenedor y .nav-links sigue comportándose como flex hijo de .nav (sin cambiar el
 *   layout de escritorio al envolver los enlaces).
 * - En ≤700px .nav-drawer es bloque a ancho completo bajo la fila [icono | idioma+CTA];
 *   cerrado tiene max-height:0 + opacity/visibility; .nav-wrapper--menu-open (toggle JS)
 *   despliega el panel y muestra .nav__backdrop (fixed, detrás de .nav) para cerrar al
 *   pulsar fuera. Las tres rayas del icono rotan a “X” con la misma clase en el <nav>.
 * - Móvil: radio del cristal más pequeño (clamp) que el pill de escritorio (69px), para que
 *   el panel y la barra encajen sin “triángulos” de fondo oscuro en las curvas.
 * - Sin overflow:hidden en .nav al abrir (recortaba iconos/texto); el scroll y el borde
 *   horizontal los lleva solo #nav-drawer con padding en .nav-links.
 * - Los textos de los .btn-nav vuelven a mostrarse en el panel (sobreescribe la regla de
 *   1040px que ocultaba solo los span en tablet).
 * ─────────────────────────────────────────────────────────────────────────────
 */
.nav__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  cursor: pointer;
}

.nav-wrapper--menu-open .nav__backdrop {
  display: block;
  pointer-events: auto;
}

.nav__menu-toggle {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 11vw, 44px);
  height: clamp(40px, 11vw, 44px);
  margin: 0;
  padding: 0;
  border: var(--glass-btn-nav-border);
  border-radius: var(--radius-btn-nav);
  background: var(--glass-btn-nav-bg);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  color: var(--color-white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.nav__menu-toggle:hover {
  background: rgba(170, 170, 170, 0.35);
}

.nav__menu-toggle-bars {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 20px;
}

.nav__menu-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform-origin: center;
  transition:
    transform 0.28s ease,
    opacity 0.2s ease,
    translate 0.28s ease;
}

.nav-wrapper--menu-open .nav__menu-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-wrapper--menu-open .nav__menu-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-wrapper--menu-open .nav__menu-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Escritorio / tablet ancha: sin panel; el drawer no crea caja (los enlaces van directo al flex de .nav) */

.btn-nav {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 1vw, 8px);
  padding: clamp(4px, 1vw, 5px) clamp(10px, 1.4vw, 13px);
  border-radius: var(--radius-btn-nav);
  border: var(--glass-btn-nav-border);
  background: var(--glass-btn-nav-bg);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  font-family: var(--font-inter);
  font-weight: 300;
  font-size: clamp(13px, 1.4vw, 16px);
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  transition: all 0.25s ease;
}

.btn-nav:hover,
.btn-nav.active {
  background: rgba(170, 170, 170, 0.35);
  color: var(--color-white);
  opacity: 1;
}

.btn-nav svg {
  width: clamp(13px, 1.5vw, 15px);
  height: clamp(13px, 1.5vw, 15px);
  flex-shrink: 0;
  opacity: 0.7;
}

.btn-main {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 1vw, 8px);
  padding: clamp(8px, 0.76vw, 11px) clamp(13px, 1.39vw, 20px);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 300;
  border: 1.091px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(
      12deg,
      rgba(255, 255, 255, 0.06) -43.16%,
      rgba(255, 255, 255, 0) 103.95%
    ),
    rgba(255, 255, 255, 0.01);
  backdrop-filter: var(--blur-xl);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  color: var(--text-muted);
  font-size: clamp(14px, 1.4vw, 16px);
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 100%;
}

.btn-main:hover {
  background:
    linear-gradient(
      12deg,
      rgba(255, 255, 255, 0.266) -43.16%,
      rgba(255, 255, 255, 0.129) 103.95%
    ),
    rgba(255, 255, 255, 0.108);
  color: #fff;
  transform: translateY(-1px);
}

.btn-main svg {
  width: clamp(13px, 1.5vw, 15px);
  height: clamp(13px, 1.5vw, 15px);
  flex-shrink: 0;
}

/*
 * .btn-metal — aspecto cromático (CSS). Independiente de .btn-main: en el HTML van las dos
 * clases cuando haga falta (p. ej. fallback nav: btn-main btn-metal). Tipografía del nav
 * la define solo .btn-main. El CV usa además la clase .btn-metal-cta-cv (reglas sueltas, sin encadenar).
 */
.btn-metal {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.5vw, 10px);
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  border-radius: var(--radius-pill);
  isolation: isolate;
  overflow: hidden;
  padding: clamp(8px, 1.5vw, 10px) clamp(14px, 3vw, 22px);
  border: 1px solid transparent;
  color: var(--color-white);
  text-decoration: none;
  font-family: var(--font-body);
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background:
    linear-gradient(
        168deg,
        rgba(28, 38, 58, 0.96) 0%,
        rgba(15, 23, 42, 0.98) 52%,
        rgba(36, 28, 72, 0.92) 100%
      )
      padding-box,
    conic-gradient(
        from 125deg,
        rgba(0, 200, 255, 0.95),
        rgba(6, 2, 255, 0.9),
        rgba(183, 251, 255, 0.95),
        rgba(34, 211, 238, 0.9),
        rgba(51, 123, 255, 0.95),
        rgba(0, 200, 255, 0.95)
      )
      border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    0 0 28px rgba(51, 123, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition:
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.2s ease,
    background 0.3s ease;
}

.btn-metal svg {
  flex-shrink: 0;
  width: clamp(14px, 3.5vw, 18px);
  height: clamp(14px, 3.5vw, 18px);
}

/* CV: texto que puede partir línea + peso distinto al nav (nav usa .btn-main para 300/16px) */
.btn-metal-cta-cv {
  font-weight: 600;
  font-size: clamp(14px, 2.8vw, 16px);
  white-space: normal;
  word-break: break-word;
}

.btn-metal-cta-cv > span {
  min-width: 0;
}

.btn-metal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    108deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.26) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 240% 100%;
  animation: btn-metal-shine 2.85s ease infinite;
  pointer-events: none;
  transition: all 0.35s ease;
}

@keyframes btn-metal-shine {
  0%,
  100% {
    background-position: 160% 0;
  }

  50% {
    background-position: -60% 0;
  }
}

.btn-metal:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(
        168deg,
        rgba(34, 48, 72, 0.98) 0%,
        rgba(22, 32, 52, 0.99) 52%,
        rgba(44, 34, 88, 0.95) 100%
      )
      padding-box,
    conic-gradient(
        from 200deg,
        rgba(58, 166, 255, 0.98),
        rgba(8, 0, 255, 0.95),
        rgba(214, 255, 252, 0.98),
        rgba(34, 211, 238, 0.95),
        rgba(60, 93, 255, 0.98),
        rgba(58, 166, 255, 0.98)
      )
      border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    0 0 36px rgba(58, 166, 255, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  filter: brightness(1.04);
}

.btn-metal:active {
  transform: translateY(0) scale(0.985);
  filter: brightness(1.28) saturate(1.22);
  box-shadow:
    0 0 52px rgba(58, 166, 255, 0.62),
    0 0 96px rgba(236, 72, 153, 0.32),
    0 0 72px rgba(34, 211, 238, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 0 48px rgba(255, 255, 255, 0.12);
  transition-duration: 0.12s;
  transition-timing-function: ease-out;
}

.btn-metal:active::after {
  opacity: 1;
  filter: brightness(1.55);
  animation-duration: 0.95s;
}

.nav__actions {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 1vw, 8px);
  flex-shrink: 0;
  min-width: 0;
}

/* [REACT / border-beam] Hueco del nav donde se monta el CTA (react-island/) */
.nav__react-contact-root {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  overflow: visible;
}

.nav__react-contact-root .nav-cta-beam {
  border: 1.091px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(
    0deg,
    #002ae778 0%,
    rgba(100, 183, 255, 0) 53.95%,
    rgba(0, 204, 255, 0.951) 100%
  );
  backdrop-filter: var(--blur-xl);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  transition:
    all 0.2s ease,
    background 0.2s ease;
  z-index: 2;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: scale(0);
  animation: buttonBounce 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

.nav__react-contact-root .nav-cta-beam:hover {
  background: linear-gradient(
    0deg,
    #00cce778 0%,
    rgba(100, 183, 255, 0) 53.95%,
    rgba(149, 186, 255, 0.951) 100%
  );
  color: #fff;
  transform: translateY(-1px);
}

body.light-mode .nav__react-contact-root .nav-cta-beam {
  background: rgba(0, 0, 0, 0.807) !important;
  color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .nav__react-contact-root .nav-cta-beam:hover {
  background: linear-gradient(
    0deg,
    #00cce778 0%,
    rgba(100, 183, 255, 0) 53.95%,
    rgba(149, 186, 255, 0.951) 100%
  );
}

.btn-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 0.8vw, 7px);
  padding: clamp(6px, 1vw, 7px) clamp(10px, 1.8vw, 12px);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(12, 12, 14, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--color-white);
  font-family: var(--font-inter);
  font-weight: 300;
  font-size: clamp(12px, 1.5vw, 13px);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-lang:hover {
  background: rgba(18, 18, 22, 0.55);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}

.btn-lang:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 2px;
}

.btn-lang__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.9;
}

/* ─── BOTÓN MODO CLARO/OSCURO ────────────────────────────────── */
.btn-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 54px;
  height: 28px;
  padding: 0 4px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px) saturate(1.5);
  -webkit-backdrop-filter: blur(8px) saturate(1.5);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  color: var(--color-white);
  cursor: pointer;
  transition:
    background 0.3s ease,
    border-color 0.3s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

.btn-theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

.btn-theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 2px;
}

/* Bola deslizante */
.btn-theme-toggle__ball {
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #ffffff, #dcdcdc);
  border-radius: 50%;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.8);
  transition:
    transform 0.4s cubic-bezier(0.34, 1.12, 0.64, 1),
    background 0.4s ease;
  z-index: 2;
}

/* Íconos sol / luna */
.btn-theme-toggle__icon {
  width: 12px;
  height: 12px;
  opacity: 0.6;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.btn-theme-toggle__icon--moon {
  margin-left: 2px;
}
.btn-theme-toggle__icon--sun {
  margin-right: 2px;
}

/* Etiqueta */
.btn-theme-toggle__label {
  display: none;
}

/* Adaptación del toggle en modo claro */
body.light-mode .btn-theme-toggle {
  background: #000000 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

body.light-mode .btn-theme-toggle:hover {
  background: #1a1a1a !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

body.light-mode .btn-theme-toggle__ball {
  transform: translate(26px, -50%);
  background: linear-gradient(135deg, #ffffff, #dcdcdc);
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* ─── SECCIÓN HERO ────────────────────────────────────────────
   Altura con min-height en vh/dvh. Padding y tipografía fluidos con clamp(). */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  background: var(--bg);
}

.hero__name-perspective {
  position: absolute;
  inset: 0;
  perspective: 1000px;
  z-index: 0;
  pointer-events: none;
}

.hero__name-anim {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  width: 100%;
  max-width: 800px;
  height: 300px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  will-change: transform, opacity;
}

.taid-letter {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  fill: transparent;
}
/* Vídeo de fondo (hero); Cloudinary u otro MP4 */

/* Spline u otro WebGL: usar con #spline-scene-canvas cuando reactives js/spline-scene.js */
.spline-scene__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Subtítulo hero — typewriter estilo terminal */

@keyframes hero-role-cursor-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

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

.barra {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 1.2vw, 10px);
  padding: clamp(8px, 1.5vw, 10px) clamp(12px, 2.2vw, 21px);
  border-radius: var(--radius-pill);
  border: var(--border-efefef);
  position: relative;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.barra::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-hero-barra);
}

.barra::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 78.846%,
    rgba(255, 255, 255, 0.2) 100%
  );
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  mix-blend-mode: color-dodge;
}

.barra span {
  position: relative;
  z-index: 1;
  font-family: var(--font-title);
  font-size: clamp(12px, 1.5vw, 14px);
  color: var(--color-white);
}

.barra strong {
  font-weight: 700;
}
.barra em {
  font-weight: 500;
  font-style: normal;
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 1.2vw, 10px);
  padding: clamp(6px, 1vw, 8px) clamp(12px, 2vw, 16px);
  border-radius: var(--radius-pill);
  border: var(--border-glass-white);
  background: var(--glass-hero-btn);
  backdrop-filter: var(--blur-xs);
  -webkit-backdrop-filter: var(--blur-xs);
  box-shadow: var(--shadow-btn);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(14px, 1.6vw, 16px);
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.15s ease;
}

.btn-hero img,
.btn-hero svg {
  width: clamp(13px, 1.8vw, 15px);
  height: clamp(13px, 1.8vw, 15px);
  flex-shrink: 0;
}

.btn-hero:hover {
  background: rgba(60, 60, 60, 0.75);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

/* ─── SECCIÓN SOBRE MÍ ──────────────────────────────────────── */
.about {
  background: var(--color-bg-dark);
  padding: var(--section-py) var(--section-px);
}

.about__row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(40px, 6vw, 80px);
  max-width: var(--content-max);
  margin-inline: auto;
  padding-block: clamp(16px, 3vw, 22px);
  flex-direction: row;
}

.about__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.sobremi-textcolumn-title {
  font-size: clamp(28px, 5vw, 48px);
  padding-block: clamp(4px, 1vw, 8px);
}

.sobremi-textcolumn-desc {
  font-weight: 400;
  color: var(--color-white);
}

/* Primer párrafo del bloque (clase explícita — evita depender de h2 + p si hay comentarios HTML entre medias) */
.about .section-intro__desc--lead {
  padding: clamp(28px, 8vw, 54px) 0 clamp(10px, 2vw, 14px);
}

/* Segundo (o más) .sobremi__desc consecutivo: sin padding-top extra; cierre del bloque con el padding inferior original */
.sobremi-textcolumn-desc + .global-desc {
  padding: 0 0 clamp(24px, 5vw, 34px);
}

.sobremi__barra {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 1.2vw, 10px);
  padding: clamp(8px, 1.5vw, 10px) clamp(12px, 2.2vw, 21px);
  border-radius: var(--radius-pill);
  border: var(--border-efefef);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  box-shadow: var(--shadow-card);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(15px, 2vw, 18px);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.about__social {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: clamp(10px, 2.5vw, 15px);
  padding: clamp(24px, 6vw, 36px) 0;
}

.btn-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(30px, 5vw, 35px);
  height: clamp(30px, 5vw, 35px);
  border-radius: var(--radius-xs);
  border: var(--border-glass-white);
  background: var(--gradient-btn-square);
  box-shadow: var(--shadow-sq-btn);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  /*
   * Iconos en negro:
   * En el HTML los <svg> usan fill="currentColor". Ese valor toma la propiedad CSS `color`
   * computada del propio <svg> (heredada del enlace .btn-square). Por eso basta con fijar
   * `color` aquí: no hace falta tocar cada path en el HTML.
   */
  color: #0b0b0b;
}

.btn-square:hover {
  transform: translateY(-2px) scale(1.1);
  box-shadow: 0 10px 20px rgba(66, 130, 213, 0.4);
}

.btn-square img,
.btn-square svg {
  width: clamp(13px, 2vw, 15px);
  height: clamp(13px, 2vw, 15px);
  object-fit: contain;
  /* Refuerzo: el fill currentColor del SVG usa el color heredado del .btn-square */
  color: inherit;
}

.about__photo-col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 1.5vw, 10px);
  min-width: 0;
}

.about__photo {
  width: clamp(200px, 42vw, 323px);
  height: clamp(266px, 56vw, 431px);
  object-fit: cover;
  border-radius: 8px;
  /* ⚠️ Reemplazar con: assets/persona.png al guardar localmente */
}

/* ─── CARDS INFO (Sobre mí) ─────────────────────────────────── */
.info-cards {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 5vw, 35px) 0;
  justify-content: space-between;
  max-width: var(--content-max);
  margin-inline: auto;
  margin-top: 0;
}

.info-card {
  width: clamp(220px, 90%, 246px);
  min-height: clamp(200px, 35vw, 229px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.5vw, 10px);
  padding: clamp(20px, 4vw, 28px) clamp(16px, 3vw, 22px);
  border-radius: var(--radius-card);
  background: var(--gradient-card-info);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border: var(--border-glass);
  text-align: center;
}

/* Cuerpo de texto: ancho completo + contenido centrado en horizontal */
.info-card > div:not(.info-card__icon) {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.info-card__icon {
  width: clamp(22px, 3.5vw, 25px);
  height: clamp(22px, 3.5vw, 25px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-card__title {
  font-family: var(--font-doto);
  font-weight: 700;
  font-size: clamp(14px, 1.8vw, 16px);
  color: var(--color-white);
  text-align: center;
}

.info-card__desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(13px, 1.5vw, 14px);
  color: var(--color-white);
  text-align: center;
  line-height: 1.5;
}

/* ─── EDUCACIÓN ─────────────────────────────────────────────── */
.education {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.5vw, 20px);
  align-items: center;
  padding-top: clamp(24px, 5vw, 41px);
  max-width: var(--content-max);
  margin-inline: auto;
  width: 100%;
}

.education__heading {
  width: 100%;
}

.education__cards {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 16px);
  align-items: center;
  width: 100%;
}

.card-academic {
  width: 100%;
  max-width: clamp(320px, 90vw, 733px);
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  background: var(--glass-dark-card);
  backdrop-filter: var(--blur-xl);
  -webkit-backdrop-filter: var(--blur-xl);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: var(--shadow-academic);
}

.card-academic__img-col {
  width: clamp(160px, 22vw, 212px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 2.5vw, 20px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.card-academic--blue .card-academic__img-col {
  background: var(--gradient-academic-1);
}
.card-academic--orange .card-academic__img-col {
  background: var(--gradient-academic-2);
}

.card-academic__img-col img {
  width: clamp(96px, 18vw, 150px);
  height: clamp(96px, 18vw, 150px);
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.card-academic__body {
  flex: 1;
  min-width: 0;
  padding: clamp(16px, 2.5vw, 21px) clamp(18px, 4vw, 32px);
  background: var(--glass-card-overlay);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vw, 8px);
}

.card-academic__name {
  font-family: var(--font-geist);
  font-weight: 600;
  font-size: clamp(18px, 2.8vw, 24px);
  color: var(--color-white);
  letter-spacing: -0.24px;
  line-height: 1.33;
}

.card-academic__period {
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: clamp(14px, 1.8vw, 16px);
  color: var(--color-white);
  line-height: 1.5;
}

.card-academic__list {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.6vw, 4px);
  margin-top: clamp(2px, 0.6vw, 4px);
}

.card-academic__item {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 12px);
  padding: clamp(6px, 1vw, 8px);
  border-radius: var(--radius-sm);
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: clamp(14px, 1.6vw, 16px);
  color: var(--color-text-muted);
}

.card-academic__item > span:last-child {
  flex: 1;
  min-width: 0;
  line-height: 1.45;
}

.card-academic__item-icon {
  color: var(--color-text-muted);
  font-size: clamp(11px, 1.2vw, 12px);
}

/* ─── SECCIÓN HABILIDADES ─────────────────────────────────────
   Base oscura (::before). Capa blanca + degradado (JS, mismo progreso):
   opacidad blanca 0→1 y translateY del degradado 100%→0.
   --hab-focus para tipografía (color-mix). */
.skills {
  --hab-focus: 0;
  position: relative;
  padding: clamp(28px, 4vw, 38px) var(--section-px) clamp(72px, 12vw, 99px);
  overflow: hidden;
}

.skills::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-bg-dark);
  z-index: 0;
}

.skills__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--color-white);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  will-change: opacity;
}

.skills__gradient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("../assets/degradado.png");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: 2;
  pointer-events: none;
  transform: translate3d(0, 100%, 0);
  will-change: transform;
}

.skills .skill-card__title {
  color: var(--color-white);
}

.skills .skill-card__desc {
  color: var(--color-text-dim);
}

.skills__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.2vw, 10px);
  max-width: var(--content-max);
  margin-inline: auto;
}

.skills__header {
  width: 100%;
}

/* ─── Drag Hint ────────────────────────────────────────────── */
.drag-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  margin: 30px auto 10px auto;
  letter-spacing: 1px;
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 8px 20px;
  border-radius: 30px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 13px;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.drag-hint__icon {
  animation: drag-hand 2.5s infinite ease-in-out;
  color: rgba(51, 123, 255, 0.8);
}

@keyframes drag-hand {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(-15px) rotate(-10deg);
  }
  75% {
    transform: translateX(15px) rotate(10deg);
  }
}

.skill-cards {
  position: relative;
  width: 100%;
  max-width: 680px;
  height: 340px;
  margin: 60px auto;
  perspective: 1200px;
  touch-action: none; /* Evita scroll en móviles al arrastrar */
  counter-reset: skill-card;
}

.skill-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  padding: 36px;
  border-radius: var(--radius-card, 24px);
  background-color: #0b0c10;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.8),
    inset 0 1px 1px rgba(255, 255, 255, 0.05);
  cursor: grab;
  will-change: transform;
  counter-increment: skill-card;
  user-select: none;
  -webkit-user-select: none;
}

.skill-card::before {
  content: "SYS." counter(skill-card, decimal-leading-zero);
  position: absolute;
  top: 20px;
  right: 24px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 2px;
  z-index: 5;
}

.skill-card:active {
  cursor: grabbing;
}

.skill-card__anim-area {
  width: 240px;
  height: 240px;
  flex-shrink: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  position: relative;
  /* Crucial para que el iframe no intercepte los eventos de arrastre */
  pointer-events: none;
}

.skill-card__anim-area iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.skill-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.skill-card__title {
  font-family: var(--font-doto);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 24px;
  color: #fff;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 12px;
  margin-top: 0;
  position: relative;
  z-index: 2;
}

.skill-card__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 16px;
  position: relative;
  z-index: 2;
}

/* ─── SECCIÓN TECNOLOGÍAS ───────────────────────────────────── */
.technologies {
  background: var(--color-bg-dark);
  padding: var(--section-py) var(--section-px);
}

.technologies__header {
  margin-bottom: clamp(24px, 6vw, 40px);
}

.tech-table {
  max-width: var(--content-max);
  margin-inline: auto;
  width: 100%;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.tech-category {
  padding-inline: clamp(16px, 5vw, 33px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tech-category:last-child {
  border-bottom: none;
}

.tech-category__title {
  font-family: var(--font-doto);
  text-align: center;
  font-weight: 700;
  font-size: clamp(11px, 1.4vw, 13px);
  letter-spacing: clamp(1px, 0.2vw, 1.5px);
  color: rgb(0, 208, 255);
  text-transform: uppercase;
  padding: clamp(14px, 3vw, 20px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tech-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(12px, 2.5vw, 16px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.tech-row:last-child {
  border-bottom: none;
}

.tech-row__name {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.5vw, 16px);
  font-family: var(--font-inter);
  font-weight: 300;
  font-size: clamp(15px, 2.2vw, 18px);
  color: var(--color-white);
}

/* Stagger tech-row__name reveals based on row index (1st row is 2nd child due to title) */
.tech-row:nth-child(2) .tech-row__name.reveal-active {
  transition-delay: calc(var(--stagger-stagger) * 0);
}
.tech-row:nth-child(3) .tech-row__name.reveal-active {
  transition-delay: calc(var(--stagger-stagger) * 1);
}
.tech-row:nth-child(4) .tech-row__name.reveal-active {
  transition-delay: calc(var(--stagger-stagger) * 2);
}
.tech-row:nth-child(5) .tech-row__name.reveal-active {
  transition-delay: calc(var(--stagger-stagger) * 3);
}
.tech-row:nth-child(6) .tech-row__name.reveal-active {
  transition-delay: calc(var(--stagger-stagger) * 4);
}
.tech-row:nth-child(7) .tech-row__name.reveal-active {
  transition-delay: calc(var(--stagger-stagger) * 5);
}
.tech-row:nth-child(8) .tech-row__name.reveal-active {
  transition-delay: calc(var(--stagger-stagger) * 6);
}
.tech-row:nth-child(9) .tech-row__name.reveal-active {
  transition-delay: calc(var(--stagger-stagger) * 7);
}
.tech-row:nth-child(10) .tech-row__name.reveal-active {
  transition-delay: calc(var(--stagger-stagger) * 8);
}
.tech-row:nth-child(11) .tech-row__name.reveal-active {
  transition-delay: calc(var(--stagger-stagger) * 9);
}
.tech-row:nth-child(12) .tech-row__name.reveal-active {
  transition-delay: calc(var(--stagger-stagger) * 10);
}
.tech-row:nth-child(13) .tech-row__name.reveal-active {
  transition-delay: calc(var(--stagger-stagger) * 11);
}
.tech-row:nth-child(14) .tech-row__name.reveal-active {
  transition-delay: calc(var(--stagger-stagger) * 12);
}
.tech-row:nth-child(15) .tech-row__name.reveal-active {
  transition-delay: calc(var(--stagger-stagger) * 13);
}

.tech-row__name svg,
.tech-row__name img {
  width: clamp(16px, 3vw, 20px);
  height: clamp(16px, 3vw, 20px);
  flex-shrink: 0;
  object-fit: contain;
  opacity: 0.85;
}

.tech-row__meta {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.5vw, 16px);
}

.tech-row__years {
  font-family: var(--font-inter);
  font-weight: 300;
  font-size: clamp(14px, 1.8vw, 16px);
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

/* Texto introductorio encima del carrusel (alineado con .tech-table) */
.technologies > .global-desc.technologies__carousel-lead {
  text-align: center;
  max-width: var(--content-max);
  margin-inline: auto;
  margin-top: clamp(32px, 8vw, 60px);
  margin-bottom: 0;
  padding-inline: 0;
  box-sizing: border-box;
}

/* ─── Carrusel de logos (Tecnologías) — scroll + rAF en main.js ─── */
/* Misma columna que .tech-table (sin bleed ni padding extra horizontal) */
.tech-logos-carousel {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  margin-top: clamp(18px, 4vw, 28px);
  padding-block: clamp(4px, 1vw, 8px) clamp(2px, 0.8vw, 4px);
  padding-inline: 0;
  box-sizing: border-box;
}

.tech-logos-carousel__viewport {
  width: 100%;
  margin-inline: auto;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.tech-logos-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.tech-logos-carousel__viewport.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.tech-logos-carousel__viewport:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 4px;
}

.tech-logos-carousel__track {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: max-content;
}

.tech-logos-carousel__list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(20px, 5vw, 40px);
  margin: 0;
  padding: clamp(8px, 1.5vw, 12px) clamp(16px, 4vw, 28px);
  list-style: none;
  flex-shrink: 0;
}

.tech-logos-carousel__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tech-logos-carousel__logo {
  display: block;
  height: clamp(36px, 8vw, 48px);
  width: auto;
  max-width: clamp(72px, 18vw, 120px);
  object-fit: contain;
  filter: grayscale(100%) opacity(0.7);
  transition:
    filter 0.35s ease,
    transform 0.35s ease;
}

.tech-logos-carousel__cell:hover .tech-logos-carousel__logo {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.04);
}

/* ─── SECCIÓN PROYECTOS ─────────────────────────────────────── */
.projects {
  /* Columnas en vista cuadrícula (editar aquí o en :root) */
  --view-grid-cols: 3;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  z-index: 1;
  background: var(--color-bg-dark);
  padding: var(--section-py) var(--section-px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Spline (o WebGL) de fondo: anclado a la sección, detrás del contenido, sin robar clics */
.projects > .spline-scene__canvas {
  z-index: 0;
  pointer-events: none;
}

/* Degradado sobre Spline, bajo el texto y las tarjetas (ajusta stops/opacidad a gusto) */
.cape-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.195) 0%,
    rgba(0, 0, 0, 0.75) 100%
  );
}

.cape-solid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.382);
}

/* Cabecera: título izq + switch der, alineados al centro vertical */
.projects__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 4vw, 32px);
  max-width: var(--content-max);
  margin-inline: auto;
  margin-bottom: clamp(20px, 4vw, 28px);
}

.projects__header-text {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1vw, 6px);
}

/* Barra descripción + contador */
.projects__meta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 4vw, 40px);
  max-width: var(--content-max);
  margin-inline: auto;
  margin-bottom: clamp(28px, 6vw, 48px);
  padding-bottom: clamp(20px, 4vw, 28px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.projects__text {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: clamp(15px, 1.6vw, 17px);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  max-width: 56ch;
}

.projects__count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  line-height: 1;
}

.projects__count-num {
  font-family: var(--font-doto);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  color: var(--color-white);
  letter-spacing: -0.02em;
  background: linear-gradient(
    135deg,
    #fff 30%,
    var(--color-accent, #3aa6ff) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.proyectos__count-label {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
}

/* Lista de tarjetas */
.projects__cards {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 4vw, 24px);
  max-width: var(--content-max);
  margin-inline: auto;
  width: 100%;
  box-sizing: border-box;
  transition: gap 0.35s ease;
}

/* Etiqueta de grupo dentro del grid (ocupa todas las columnas) */
.projects__group-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 16px);
  margin-bottom: clamp(2px, 1vw, 4px);
}

.projects__group-label::before,
.projects__group-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.projects__group-label::before {
  flex: 0 0 0;
}

.projects__group-label-text {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(10px, 1vw, 11px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent, #3aa6ff);
  white-space: nowrap;
}

/* Vista cuadrícula */
.projects--grid .projects__cards {
  display: grid;
  grid-template-columns: repeat(var(--view-grid-cols, 3), minmax(0, 1fr));
  gap: clamp(16px, 3vw, 24px);
}

.projects--grid .card-project {
  max-width: none;
  width: 100%;
  min-height: clamp(260px, 32vw, 340px);
  max-height: none;
}

.projects--grid .card-project .information {
  max-width: none;
}

.projects--grid .card-project .project-name {
  font-size: clamp(20px, 2.8vw, 26px);
}

.projects--grid .card-project .description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tarjeta destacada "Más reciente" — ocupa todo el ancho del grid, centrada, estilo lista */
.projects--grid .card-project--featured {
  grid-column: 1 / -1;
  width: clamp(320px, 72%, 700px);
  margin-inline: auto;
  min-height: clamp(300px, 45vw, 420px);
  max-height: none;
}

.projects--grid .card-project--featured .information {
  max-width: 580px;
}

.projects--grid .card-project--featured .project-name {
  font-size: clamp(24px, 3.5vw, 36px);
}

.projects--grid .card-project--featured .description {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

/* ─── TARJETA DE PROYECTO ───────────────────────────────────── */
.card-project {
  position: relative;
  width: 100%;
  max-width: clamp(320px, 90vw, 663px);
  min-height: clamp(220px, 50vw, 280px);
  max-height: clamp(360px, 85vh, 458px);
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 4vw, 22px);
  box-sizing: border-box;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  background-color: #1a1a2e;
  box-shadow: 0 19px 22.2px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.card-project:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

/* Velo negro 40% sobre la imagen de fondo */
.card-project::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.592);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

/* El contenido queda encima del velo */
.card-project .information {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 539px;
  width: 100%;
  gap: 11px;
  text-align: left;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 15px;
  flex: 1;
  justify-content: flex-end;
}

/* Columna de información superpuesta sobre la imagen */

/* Bloque: tipo + nombre + tags */
.card-project .title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 8px;
}

/* Etiqueta de tipo (Académico, Profesional…) */
.card-project .project-type {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent);
  line-height: 1;
}

/* Nombre del proyecto */
.card-project .project-name {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  font-family: var(--font-doto);
  align-self: stretch;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--color-white);
}

/* Contenedor de tags — reutiliza .tag existente */
.card-project .card-project__techs {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

/* Descripción */
.card-project .description {
  align-self: stretch;
  font-size: 14px;
  font-family: var(--font-title);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-white);
  padding: 4px 0;
}

/* Fila de botones de acción */
.card-project .actions {
  align-self: stretch;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* Botón principal (CTA azul con borde gradiente) */
.button-main {
  cursor: pointer;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.697);
  background: linear-gradient(0deg, #00c8ff, #41d6ff);
  box-shadow: var(--shadow-btn);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-family: var(--font-inter);
  font-weight: 700;
  color: var(--color-white);
  text-decoration: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.button-main:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.button-main svg,
.button-main img {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Botón secundario (glass blanco) */
.button-white {
  width: fit-content;
  cursor: pointer;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.34)
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-btn);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 300;
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: all 0.2s ease !important;
}

.button-white:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.42)
  );
  transform: translateY(-1px);
}

.button-white svg,
.button-white img {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.9;
}

/* .tag se mantiene igual (reutilizado dentro de .tecnologas) */
.tag {
  padding: 6px 15px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 12px;
  backdrop-filter: var(--blur-xs);
  -webkit-backdrop-filter: var(--blur-xs);
  font-family: var(--font-body);
  color: var(--color-white);
  font-weight: 300;
}

/* ─── SECCIÓN EXPERIENCIA (3D Card Stack) ───────────────────── */
.experience {
  background: var(--color-bg-dark);
  padding: var(--section-py) var(--section-px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.experience__header {
  max-width: var(--content-max);
  margin-inline: auto;
  margin-bottom: clamp(28px, 6vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.experience__header .mode-switch {
  margin-top: clamp(10px, 2vw, 16px);
}

/* Contenedor del stack */
.card-stack-wrapper {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 6vw, 32px);
}

.card-stack {
  position: relative;
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding-left: clamp(20px, 4vw, 40px);
  gap: 30px;
  padding: 120px clamp(20px, 4vw, 40px);
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-self: flex-start;
  margin-top: -60px;
  margin-bottom: -60px;
  perspective: 1200px;
}

.card-stack::-webkit-scrollbar {
  display: none;
}
.drag-hint span {
  font-size: 16px;
  animation: drag-hint-pulse 1.5s infinite ease-in-out;
}
@keyframes drag-hint-pulse {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(4px);
  }
}

/* El carrusel interno que girará */
.card-stack__rotator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.card-experience {
  position: relative;
  inset: auto;
  flex: 0 0 clamp(300px, 75vw, 380px);
  height: clamp(400px, 60vh, 480px);
  scroll-snap-align: start;
  transform: none;
  opacity: 1;
  border-radius: var(--radius-card-lg);
  background-color: #0b0c10;
  background-image: url("../img/exp-bg-premium.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    var(--shadow-academic);
  padding: clamp(22px, 6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3vw, 16px);
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

.card-experience::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transform: translateZ(0);
}

.card-experience::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    800px circle at var(--mouseX, 50%) var(--mouseY, 50%),
    rgba(255, 255, 255, 0.06),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 10;
  will-change: transform;
  transform: translateZ(0);
}

.card-experience:hover::after {
  opacity: 1;
}

.card-experience > * {
  position: relative;
  z-index: 1;
}

/* Old states removed */

.card-exp__badge {
  position: absolute;
  top: calc(clamp(22px, 6vw, 36px) + 8px);
  right: calc(clamp(22px, 6vw, 36px) + 8px);
  z-index: 5;
}

.card-exp__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.card-exp__logo {
  width: 100%;
  height: 100px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 48px;
  position: relative;
  overflow: hidden;
}

.card-exp__logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.card-exp__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.card-exp__cargo {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  order: 1;
}

.card-exp__empresa {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 4vw, 32px);
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: -0.5px;
  order: 2;
}

.card-exp__period {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  order: 3;
  margin-top: 4px;
}

.card-exp__divider {
  display: none;
}

.card-exp__desc {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-dim);
  line-height: 1.65;
  flex: 1;
  overflow-y: auto;
  padding-right: 8px;
  pointer-events: auto;
  -webkit-overflow-scrolling: touch;
}

.card-exp__desc::-webkit-scrollbar {
  width: 4px;
}
.card-exp__desc::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.card-exp__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

/* Controles del stack */
.stack-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

.btn-stack {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: var(--border-glass);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-white);
  font-size: 18px;
  transition: all 0.25s ease;
}

.btn-stack:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

.stack-counter {
  font-family: var(--font-mono);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  min-width: 40px;
  text-align: center;
}

/* ─── Experiencia: vista cuadrícula (Bento) — clase en #experiencia: .experiencia--grid ─── */
@keyframes exp-grid-card-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.experiencia--grid .stack-controls {
  display: none;
}

/* Nombres únicos para animar con View Transitions */
.card-experience:nth-child(1) {
  view-transition-name: exp-card-1;
}
.card-experience:nth-child(2) {
  view-transition-name: exp-card-2;
}
.card-experience:nth-child(3) {
  view-transition-name: exp-card-3;
}
.card-experience:nth-child(4) {
  view-transition-name: exp-card-4;
}
.card-experience:nth-child(5) {
  view-transition-name: exp-card-5;
}
.card-experience:nth-child(6) {
  view-transition-name: exp-card-6;
}
.card-experience:nth-child(7) {
  view-transition-name: exp-card-7;
}
.card-experience:nth-child(8) {
  view-transition-name: exp-card-8;
}

/* ─── SECCIÓN CONTACTO ──────────────────────────────────────── */
.contact {
  background: var(--color-bg-dark);
  padding: var(--section-py) var(--section-px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.contact__header {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 8vw, 80px);
  margin-bottom: clamp(28px, 6vw, 39px);
}

.contact__body {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 5vw, 32px);
  max-width: var(--content-max);
  margin-inline: auto;
}

/* Card talk (info de contacto) */
.card-talk {
  width: clamp(280px, 92vw, 486px);
  min-height: clamp(400px, 120vw, 521px);
  flex-shrink: 0;
  border-radius: var(--radius-card-lg);
  background: var(--glass-dark-card);
  backdrop-filter: var(--blur-xl);
  -webkit-backdrop-filter: var(--blur-xl);
  border: var(--border-glass);
  padding: clamp(28px, 8vw, 40px) clamp(22px, 6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 4vw, 20px);
  box-shadow: var(--shadow-academic);
}

.card-talk__title {
  font-family: var(--font-doto);
  font-weight: 900;
  font-size: clamp(20px, 4vw, 28px);
  color: var(--color-white);
}

.card-talk__subtitle {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(14px, 1.8vw, 16px);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.card-talk__info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.card-talk__info-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-dim);
}

.card-talk__info-item svg,
.card-talk__info-item span.icon {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-talk__social {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}

/* Formulario de contacto */
.form-mail {
  flex: 1;
  min-width: 0;
  max-width: 690px;
  border-radius: var(--radius-card-lg);
  background: var(--glass-dark-card);
  backdrop-filter: var(--blur-xl);
  -webkit-backdrop-filter: var(--blur-xl);
  border: var(--border-glass);
  padding: 40px 36px;
  box-shadow: var(--shadow-academic);
}

.form-mail__title {
  font-family: var(--font-doto);
  font-weight: 800;
  font-size: 24px;
  color: var(--color-white);
  margin-bottom: 28px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.form-group label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.form-hint {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.42);
}

.form-group__label-captcha {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.form-group--captcha {
  margin-bottom: 12px;
}

.form-group--captcha .h-captcha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.form-group--captcha .h-captcha iframe {
  max-width: 100%;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-btn-nav);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  outline: none;
  transition:
    border-color 0.25s ease,
    background 0.25s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--color-primary);
  background: rgba(51, 123, 255, 0.06);
}

.form-group textarea {
  resize: vertical;
  min-height: 140px;
  border-radius: var(--radius-sm);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-accent-bright);
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-top: 8px;
}

.btn-submit:hover {
  background: var(--color-primary-alt);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(51, 123, 255, 0.4);
}

.form-send-feedback {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}

.form-send-feedback--error {
  color: #ff8a80;
}

/* ─── FOOTER ─────────────────────────────────────────────────── */

/* Outer wrapper — full-width, flex-center, provides padding */
.footer {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 16px 24px;
  background: transparent;
  border: none;
  min-height: unset;
}

/* Floating glass panel */
.footer__panel {
  width: 100%;
  max-width: var(--content-max, 1152px);
  border-radius: var(--radius-xl);
  background: var(--glass-footer-bg);
  backdrop-filter: var(--blur-xl) saturate(1.4);
  -webkit-backdrop-filter: var(--blur-xl) saturate(1.4);
  border: var(--border-glass-sm);
  box-shadow:
    0 0 80px -12px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
  /* Reutilizar variables tipográficas base para el contenido */
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-text-muted);
}

/* Tipografía de descripción del footer (reutilizable) */
.global-desc-mini {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: inherit;
}

/* ── CTA section ─────────────────────────────────────────────── */
.footer__cta {
  padding: 40px 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer__eyebrow {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.footer__heading {
  font-family: var(--font-doto);
  font-size: var(--text-fluid-lg);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-text);
  margin: 0;
}

.footer__heading em {
  font-style: italic;
  color: var(--color-text-dim);
  font-weight: 300;
}

/* Email CTA */
.footer__email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.5s ease;
  white-space: nowrap;
}

.footer__email:hover {
  color: var(--color-text);
}

/* The sliding dash */
.footer__email-dash {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--color-text-muted);
  transition:
    width 0.5s ease,
    background 0.5s ease;
  flex-shrink: 0;
}

.footer__email:hover .footer__email-dash {
  width: 40px;
  background: var(--color-text);
}

/* ── Hairline divider ─────────────────────────────────────────── */
.footer__hairline {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--border-glass-sm) 20%,
    var(--border-glass-sm) 80%,
    transparent
  );
}

/* ── Bottom bar ──────────────────────────────────────────────── */
.footer__bar {
  padding: 18px 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Left meta cluster */
.footer__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer__dot {
  display: none;
  font-size: 14px;
}

/* Live clock */
.footer__clock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}

.footer__clock-icon {
  font-size: 10px;
  line-height: 1;
}

.footer__clock-time {
  color: var(--color-text-dim);
}

/* ── Social links ─────────────────────────────────────────────── */
.footer__social {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__social-link {
  position: relative;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.5s ease;
}

.footer__social-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-text-dim);
  transition: width 0.5s ease;
}

.footer__social-link:hover {
  color: var(--color-text);
}

.footer__social-link:hover::after {
  width: 100%;
}

/* ─── ANIMACIONES ────────────────────────────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* Degradado del nombre — recorre el gradiente de izquierda a derecha en loop */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ─── Reveal (Intersection Observer + micro-interacción) ───── */
.reveal-base {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  /* Exit decoupled: same fade for every line, no Y return, no blur */
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
  will-change: transform, opacity, filter;
}

.reveal-base.reveal-left {
  transform: translateX(var(--stagger-distance));
}

.reveal-base.reveal-right {
  transform: translateX(calc(var(--stagger-distance) * -1));
}

.reveal-base.reveal-down {
  transform: translateY(calc(var(--stagger-distance) * -1));
}

:where(.reveal-base).reveal-active {
  opacity: 1;
  transform: translateY(0);
  filter: none;
  /* Entrance transition */
  transition:
    opacity var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter var(--stagger-dur) var(--stagger-ease);
}

/* Cursor de efecto typewriter para títulos */
.title-typewriter-cursor {
  display: inline-block;
  color: var(--color-primary-alt);
  margin-left: 4px;
  animation: title-blink 0.8s infinite;
  font-weight: 300;
}

@keyframes title-blink {
  50% {
    opacity: 0;
  }
}

.reveal-typewriter:not(.reveal-active) {
  opacity: 0 !important;
}

/* Force 0s delay on exit to decouple from stagger */
.reveal-base:not(.reveal-active) {
  transition-delay: 0s !important;
}

/* Retrasos en cascada (stagger) — combinar con .reveal-base */
.delay-100 {
  transition-delay: calc(var(--stagger-stagger) * 1);
}
.delay-200 {
  transition-delay: calc(var(--stagger-stagger) * 2);
}
.delay-300 {
  transition-delay: calc(var(--stagger-stagger) * 3);
}
.delay-400 {
  transition-delay: calc(var(--stagger-stagger) * 4);
}
.delay-500 {
  transition-delay: calc(var(--stagger-stagger) * 5);
}
.delay-600 {
  transition-delay: calc(var(--stagger-stagger) * 6);
}
.delay-700 {
  transition-delay: calc(var(--stagger-stagger) * 7);
}
.delay-800 {
  transition-delay: calc(var(--stagger-stagger) * 8);
}

/* Scroll-scrub: opacidad/transform los controla JS (sin transición CSS) */
.js-scroll-scrub {
  will-change: opacity, transform;
}

.animate-in {
  animation: fadeInUp 0.6s ease forwards;
}

.status-dot {
  display: inline-block;
  width: clamp(6px, 1.2vw, 8px);
  height: clamp(6px, 1.2vw, 8px);
  border-radius: 50%;
  background: #00eaff;
  animation: pulse-dot 2s ease infinite;
  margin-right: clamp(4px, 1vw, 6px);
}

/* ─── RESPONSIVE (viewport) — @media solo para layout; escala con clamp arriba ─── */

/* ════════════════════════════════════════════════════════
   SECCIÓN IA WORKFLOW
   ════════════════════════════════════════════════════════ */
.ia-workflow {
  background: var(--color-bg-dark);
  padding: var(--section-py) var(--section-px);
  position: relative;
  overflow: hidden;
}

.ia-workflow__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(40px, 8vw, 80px);
}

.ia-workflow__carousel-col {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ia-workflow__content {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ia-workflow__reflexion {
  margin-top: 1rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--color-accent);
  border-radius: 4px 12px 12px 4px;
  font-style: italic;
  font-size: 0.95em;
  color: var(--color-text-dim);
}

/* 3D Spiral Carousel */
.ai-spiral-container {
  width: 100%;
  height: 500px;
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* No interacciones */
}

.ai-spiral {
  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  /* RotateZ determines the diagonal tilt */
  transform: rotateZ(35deg) rotateX(-20deg);
}

.ai-spiral-item {
  position: absolute;
  top: -40px;
  left: -40px;
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
  will-change: transform, opacity;
}

.ai-spiral-item svg.logo-ai,
.ai-spiral-item img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 0.8;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

body.light-mode .ia-workflow {
  background: var(--color-bg-light);
}
body.light-mode .ia-workflow__reflexion {
  background: rgba(0, 0, 0, 0.03);
  color: #444;
}
body.light-mode .ai-spiral-item {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
body.light-mode .ai-spiral-item svg.logo-ai {
  color: #222;
  filter: none;
}

/* Ajuste del AI Card Inline para que encaje bien en la columna */
.ia-workflow__content .ai-card {
  width: 100%;
  margin: 20px 0 0;
  padding: 24px;
}

/* ════════════════════════════════════════════════════════
   SECCIÓN CERTIFICACIONES
   ════════════════════════════════════════════════════════ */
.certifications {
  background: var(--color-bg-dark);
  padding: var(--section-py) var(--section-px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.certifications__inner {
  position: relative;
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(40px, 8vw, 80px);
  padding-block: clamp(16px, 3vw, 22px);
}

.certifications__badge,
.certifications__content {
  position: relative;
  z-index: 1;
}

.certifications__badge {
  flex: 0 0 clamp(280px, 45%, 450px);
  display: flex;
  justify-content: center;
  perspective: 1000px;
}

.certifications__anim-area {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: visible;
  position: relative;
}

.certifications__anim-area iframe {
  position: absolute;
  top: -15%;
  left: -15%;
  width: 130%;
  height: 130%;
  border: none;
  background: transparent;
  pointer-events: auto; /* Badge must be interactive */
}

.certifications__content {
  flex: 1 1 540px;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

/* Bloques especificos de texto para certificaciones */
.certifications-textcolumn-title,
.certifications-textcolumn-desc,
.certificaciones-textcolumn-pretitle {
  text-align: right;
}

body.light-mode .certifications {
  background: transparent;
  border-top-color: rgba(0, 0, 0, 0.05);
}
body.light-mode .certifications__inner {
  background: transparent;
  box-shadow: none;
}

/* ════════════════════════════════════════════════════════
   SECCIÓN CTA — Descarga de Currículum
   ════════════════════════════════════════════════════════ */

.cta-cv {
  background: var(--color-bg-dark);
  padding: var(--section-py) var(--section-px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.cta-cv__inner {
  position: relative;
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(40px, 8vw, 80px);
  padding-block: clamp(16px, 3vw, 22px);
}

.cta-cv__icon,
.cta-cv__content {
  position: relative;
  z-index: 1;
}

/* ── Ícono 3D flotante ───────────────────────────────── */
.cta-cv__icon {
  flex: 0 0 clamp(280px, 45%, 450px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cta-cv__icon::before {
  content: "";
  position: absolute;
  width: clamp(150px, 22vw, 220px);
  height: clamp(150px, 22vw, 220px);
  background: radial-gradient(
    circle,
    rgba(51, 123, 255, 0.2) 0%,
    transparent 70%
  );
  filter: blur(40px);
  z-index: -1;
  animation: pulse-glow 4s infinite alternate ease-in-out;
}

@keyframes pulse-glow {
  from {
    opacity: 0.6;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1.1);
  }
}

.cta-cv__doc {
  width: clamp(150px, 22vw, 240px);
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(51, 123, 255, 0.15))
    drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
  animation: cta-doc-float 4s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes cta-doc-float {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-15px) rotate(3deg);
  }
}

/* ── Texto ───────────────────────────────────────────── */
.cta-cv__content {
  flex: 1 1 540px;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: clamp(12px, 2vw, 16px);
  min-width: 0;
}

.cta-cv__content .btn-metal-cta-cv {
  width: fit-content;
  margin-top: 10px;
}

/* ── Botón de descarga ───────────────────────────────── */
.btn-cv-download {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 10px);
  padding: clamp(12px, 3vw, 14px) clamp(22px, 6vw, 32px);
  border-radius: 50px;
  border: 1px solid rgba(51, 123, 255, 0.55);
  background: linear-gradient(
    30deg,
    #0b1c40b9 0%,
    #1a3f84be 50%,
    #3aa6ffbb 100%
  );
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(14px, 1.8vw, 16px);
  text-decoration: none;
  cursor: pointer;
  width: fit-content;
  position: relative;
  overflow: hidden;
  transition: all 0.15s ease;
}

/* Capa de glow base */
.btn-cv-download::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #337affd0, #3ab1edb4, #3aa6ff);
  opacity: 0;
  filter: blur(14px);
  transition: opacity 0.35s ease;
  z-index: -1;
}

/* Brillo deslizante al hover */
.btn-cv-download::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}

.btn-cv-download:hover {
  transform: translateY(-3px) scale(1.025);
  border-color: rgba(58, 166, 255, 0.8);
  box-shadow:
    0 0 22px rgba(51, 123, 255, 0.55),
    0 0 48px rgba(51, 123, 255, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.65);
}

.btn-cv-download:hover::before {
  opacity: 1;
}

.btn-cv-download:hover::after {
  left: 120%;
}

.btn-cv-download:active {
  transform: translateY(-1px) scale(1.01);
  transition-duration: 0.12s;
}

.btn-cv-download:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 3px;
}

/* ════════════════════════════════════════════════════════
   MODAL DE VIDEO — Demo GeriaSmart
   ════════════════════════════════════════════════════════ */

/* Overlay base (oculto por defecto) */
.vmodal {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  /* visibility cambia en step-end para que el click-through no se rompa */
  transition:
    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.35s step-end;
}

.vmodal.modal-active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s step-start;
}

/* Fondo desenfocado */
.vmodal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 6, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Contenedor del video */
.vmodal__container {
  position: relative;
  width: 90%;
  max-width: 900px;
  border-radius: 12px;
  overflow: hidden;
  background: #0b0b0e;
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  /* Entra con scale pequeño → crece a 1 */
  transform: scale(0.95);
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.vmodal.modal-active .vmodal__container {
  transform: scale(1);
}

/* Reproductor */
.vmodal__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  outline: none;
}

/* Botón de cierre */
.vmodal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(14, 14, 20, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vmodal__close:hover {
  background: rgba(255, 60, 60, 0.82);
  border-color: rgba(255, 60, 60, 0.4);
  color: #fff;
  transform: scale(1.1) rotate(90deg);
}

.vmodal__close:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 3px;
}

/* ════════════════════════════════════════════════════════
   TERMINAL INTRO — Overlay de bienvenida
   ════════════════════════════════════════════════════════ */

#terminal-intro {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(5, 5, 7, 0.97);
  padding: 24px;
}

/* Ventana (100% en móvil; antes width:640px forzaba scroll horizontal en pantallas estrechas) */
.ti-window {
  width: 100%;
  max-width: 640px;
  border-radius: 10px;
  background: #0d0e12;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 48px 120px rgba(0, 0, 0, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
  animation: ti-window-in 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes ti-window-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Barra de título (estilo macOS) */
.ti-bar {
  height: 36px;
  background: #161820;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 7px;
}

.ti-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ti-dot--r {
  background: #ff5f57;
}
.ti-dot--y {
  background: #ffbd2e;
}
.ti-dot--g {
  background: #28c840;
}

.ti-bar__label {
  margin-left: auto;
  margin-right: auto;
  transform: translateX(-20px);
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.03em;
  user-select: none;
}

/* Cuerpo de texto */
.ti-body {
  padding: 20px 26px 28px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.78;
  min-height: 210px;
}

.ti-prompt {
  margin: 0;
  color: #e8e8ec;
}
.ti-blank {
  margin: 0;
  height: 8px;
}
.ti-title {
  margin: 0;
  color: #58a6ff;
  font-weight: 600;
}
.ti-check {
  margin: 0;
  transition: color 0.12s ease;
}

.ti-check--pending {
  color: rgba(255, 255, 255, 0.65);
}
.ti-check--done {
  color: rgba(255, 255, 255, 0.72);
}

.ti-tick {
  color: #4ade80;
}

.ti-ready {
  margin: 0;
  color: #a78bfa;
  font-weight: 600;
}

/* Cursor parpadeante */
.ti-cursor {
  display: inline-block;
  color: #58a6ff;
  line-height: 1;
  animation: ti-blink 0.9s step-end infinite;
}

@keyframes ti-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

/* Texto "para omitir" */
.ti-skip-hint {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.22);
  letter-spacing: 0.04em;
  user-select: none;
  animation: ti-hint-in 0.5s 1.5s ease both;
}

@keyframes ti-hint-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Salida — fade + ligero scale down */
.ti-exit {
  animation: ti-exit-anim 0.62s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes ti-exit-anim {
  0% {
    opacity: 1;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.ask {
  background-color: #0b0b0b;
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
  justify-items: center;
}

.preguntar__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════
   AI CARD — Rediseño Premium (border-beam + thinking pulse)
   ═══════════════════════════════════════════════════════ */

.ai-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: clamp(280px, 80%, 820px);
  margin: 40px auto 0;
  padding: 32px;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(14, 14, 18, 0.92) 0%,
    rgba(8, 8, 12, 0.96) 100%
  );
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 32px 64px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  /* No transition needed for border-color since beam handles it */
  isolation: isolate;
}

/* ─── Ambient inner glow layers ─── */
.ai-card__glow-top {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(
    circle,
    rgba(51, 123, 255, 0.18) 0%,
    transparent 70%
  );
  filter: blur(32px);
  pointer-events: none;
  mix-blend-mode: screen;
  border-radius: 50%;
  z-index: 0;
}

.ai-card__glow-bottom {
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 240px;
  height: 240px;
  background: radial-gradient(
    circle,
    rgba(0, 180, 255, 0.12) 0%,
    transparent 70%
  );
  filter: blur(40px);
  pointer-events: none;
  mix-blend-mode: screen;
  border-radius: 50%;
  z-index: 0;
}

/* ─── Header ─── */
.ai-card__header {
  display: flex;
  align-items: center;
  width: 100%;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 2;
}

.ai-card__header-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.ai-card__header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

/* ─── Status badge ─── */
.ai-card__status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 200, 255, 0.2);
  background: rgba(0, 200, 255, 0.05);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-accent-bright);
  letter-spacing: 1px;
}

.ai-card__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent-bright);
  box-shadow: 0 0 6px var(--color-accent-bright);
  animation: ai-dot-pulse-led 1.5s infinite alternate ease-in-out;
}

@keyframes ai-dot-pulse-led {
  0% {
    transform: scale(0.9);
    opacity: 0.45;
    box-shadow: 0 0 2px rgba(0, 200, 255, 0.3);
  }
  100% {
    transform: scale(1.25);
    opacity: 1;
    box-shadow:
      0 0 10px var(--color-accent-bright),
      0 0 4px var(--color-accent-bright);
  }
}

/* ─── Title ─── */
.ai-card__title {
  font-family: var(--font-doto);
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
  letter-spacing: 1.5px;
  background: linear-gradient(
    90deg,
    #e8ecf4 0%,
    #a8c4ff 50%,
    var(--color-primary) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.ai-card__subtitle {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: rgba(200, 210, 230, 0.55);
  line-height: 1.55;
  margin: 0;
}

/* ─── Messages area ─── */
.ai-card__chat-area {
  display: block;
  min-height: 180px;
  max-height: min(380px, 50vh);
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 16px;
  background: rgba(6, 6, 10, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  position: relative;
  z-index: 2;
}

.ai-card__chat-area::-webkit-scrollbar {
  width: 4px;
}
.ai-card__chat-area::-webkit-scrollbar-track {
  background: transparent;
}
.ai-card__chat-area::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
}
.ai-card__chat-area::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ─── Input area ─── */
.ai-card__input-area {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 6px 6px 6px 18px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  overflow: hidden;
  isolation: isolate;
}

.ai-card__input-area:focus-within {
  border-color: rgba(51, 123, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(51, 123, 255, 0.08);
}

.ai-card__input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-geist), sans-serif;
  font-size: 14px;
  outline: none;
}

.ai-card__input::placeholder {
  color: rgba(255, 255, 255, 0.65);
}

.ai-card__input:focus {
  background: transparent;
}

.ai-card__input[aria-invalid="true"] {
  color: var(--color-badge-avanzado);
}

.ai-card__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-alt) 100%
  );
  color: #ffffff;
  font-family: var(--font-geist), sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(51, 123, 255, 0.3);
  transition:
    transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.ai-card__btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(51, 123, 255, 0.4);
  background: linear-gradient(
    135deg,
    var(--color-accent) 0%,
    var(--color-primary) 100%
  );
}

.ai-card__btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(51, 123, 255, 0.2);
}

.ai-card__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.ai-card__btn-icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.ai-card__btn:hover .ai-card__btn-icon {
  transform: translateX(2px);
}

/* ─── Responsive ─── */

.ai-chat-msg {
  display: flex;
  margin-bottom: 10px;
  animation: ai-msg-pop-up 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

@keyframes ai-msg-pop-up {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.ai-chat-msg--user {
  justify-content: flex-end;
}

.ai-chat-msg--assistant,
.ai-chat-msg--error {
  justify-content: flex-start;
}

.ai-chat-msg__bubble {
  max-width: 92%;
  padding: 10px 14px;
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-chat-msg--user .ai-chat-msg__bubble {
  background: linear-gradient(
    135deg,
    rgba(51, 123, 255, 0.85),
    rgba(58, 166, 255, 0.75)
  );
  color: #fff;
  border-bottom-right-radius: 4px;
}

.ai-chat-msg--assistant .ai-chat-msg__bubble {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-muted);
  border-bottom-left-radius: 4px;
}

.ai-chat-msg--error .ai-chat-msg__bubble {
  background: rgba(255, 91, 86, 0.12);
  border: 1px solid rgba(255, 91, 86, 0.35);
  color: #ffb4b1;
}

.ai-chat-msg--typing .ai-chat-msg__bubble {
  display: flex;
  gap: 5px;
  align-items: center;
  min-height: 22px;
}

/* Widget flotante */
.chat-widget__btn {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 1100;
  width: 56px;
  height: 56px;
  border: var(--border-glass-sm);
  border-radius: 50%;
  background: var(--glass-hero-btn);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-nav);
  backdrop-filter: var(--blur-sm);
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-widget__btn:hover {
  transform: translateY(-2px);
  background: var(--glass-card-overlay);
}

.chat-widget__btn--active .chat-widget__btn-icon--open {
  display: none;
}

.chat-widget__btn:not(.chat-widget__btn--active) .chat-widget__btn-icon--close {
  display: none;
}

.chat-widget__overlay {
  position: fixed;
  inset: 0;
  z-index: 1098;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.chat-widget__overlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.chat-widget__panel {
  position: fixed;
  right: clamp(12px, 2vw, 24px);
  bottom: calc(clamp(16px, 3vw, 28px) + 68px);
  z-index: 1099;
  width: min(400px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card-lg);
  border: var(--border-glass-sm);
  background: var(--glass-dark-card);
  backdrop-filter: var(--blur-xs);
  box-shadow: var(--shadow-academic);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}

.chat-widget__panel--open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.chat-widget--no-motion,
.chat-widget--no-motion * {
  transition: none !important;
}

.chat-widget__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chat-widget__title {
  margin: 0;
  font-family: var(--font-doto);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

.chat-widget__subtitle {
  margin: 4px 0 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.chat-widget__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text);
  cursor: pointer;
}

.chat-widget__messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  min-height: 200px;
  max-height: 300px;
}

.chat-widget__input-area {
  display: flex;
  gap: 8px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.chat-widget__input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.65);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
}

.chat-widget__input:focus {
  border-color: rgba(58, 166, 255, 0.5);
}

.chat-widget__send {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
}

.chat-widget__send:disabled,
.ai-chat-input:disabled,
.ai-card__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.chat-widget__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: chat-dot-bounce 1.2s infinite ease-in-out;
}

.chat-widget__dot:nth-child(2) {
  animation-delay: 0.15s;
}
.chat-widget__dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes chat-dot-bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* ────────────────────────────────────────────────────────────
   6. SIRI-LIKE ANIMATION (AI Assist button)
   ──────────────────────────────────────────────────────────── */

.chat-widget__btn-icon--siri {
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.chat-widget__btn:hover .chat-widget__btn-icon--siri {
  transform: scale(1.1);
}

.siri-orb {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, #ff007f, #7f00ff, #00d2ff, #00ff88);
  background-size: 300% 300%;
  border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
  animation: siri-gradient 3s ease infinite, siri-morph 3s ease-in-out infinite alternate, siri-spin 6s linear infinite;
  z-index: 2;
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.6);
}

.siri-orb-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, #ff007f, #7f00ff, #00d2ff, #00ff88);
  background-size: 300% 300%;
  border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
  animation: siri-gradient 3s ease infinite, siri-morph 3s ease-in-out infinite alternate, siri-spin 6s linear infinite;
  filter: blur(8px);
  opacity: 0.8;
  z-index: 1;
}

@keyframes siri-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes siri-morph {
  0% { border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; }
  100% { border-radius: 50% 50% 40% 60% / 40% 60% 40% 60%; }
}

@keyframes siri-spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Soporte prefers-reduced-motion: detiene la animación si el usuario lo prefiere */

/* ═══════════════════════════════════════════════════════════════
   MODO CLARO — body.light-mode
   Por defecto la página es oscura. Al añadir .light-mode al body
   se activa el modo claro completo en toda la página.
   ═══════════════════════════════════════════════════════════════ */

/* ── Transiciones suaves (Sin usar el selector universal * para no romper transform/left) ── */
body.light-mode {
  transition:
    background-color 0.4s ease,
    color 0.4s ease;
  background: #f4f6fa;
  color: #1a1a1a;
  --taid-color: #000000;
}
body.light-mode .hero__name-anim {
  opacity: 0.3;
}
body.light-mode section,
body.light-mode div,
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode p,
body.light-mode a,
body.light-mode button {
  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease;
}

/* ── Body base ── */

/* ═══════════════════════════════════════
   NAV Y HEADER
   ═══════════════════════════════════════ */
body.light-mode .nav {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* ESTILOS ACTIVE GLOBALES (Modo oscuro / por defecto) */
.btn-nav:active,
.btn-main:active,
.btn-lang:active,
.btn-hero:active,
.button-white:active,
.btn-glass-light:active,
.btn-square:active,
.ai-card__btn:active,
.button-main:active,
.btn-submit:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Botones en modo claro: Negros para contrastar con el glassmorphism */
/* Botones del header (menos sólidos) */
body.light-mode .btn-nav,
body.light-mode .nav__menu-toggle {
  background-color: rgba(0, 0, 0, 0.45) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  transition: all 0.4s ease !important;
}

body.light-mode .btn-nav:hover,
body.light-mode .btn-nav.active,
body.light-mode .nav__menu-toggle:hover {
  background-color: rgba(0, 0, 0, 0.65) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

body.light-mode .btn-nav:active,
body.light-mode .nav__menu-toggle:active {
  background-color: rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Resto de botones: Negros sólidos */
body.light-mode .btn-main,
body.light-mode .btn-metal,
body.light-mode .btn-lang,
body.light-mode .btn-hero,
body.light-mode .button-white,
body.light-mode .btn-glass-light,
body.light-mode .btn-square,
body.light-mode .ai-card__btn,
body.light-mode .button-main,
body.light-mode .btn-cv-download,
body.light-mode .btn-submit {
  background-color: #000000ab !important;
  background-image: none !important; /* Forza quitar gradientes previos en btn-metal */
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  transition: all 0.25s ease;
}

body.light-mode .btn-main:hover,
body.light-mode .btn-metal:hover,
body.light-mode .btn-lang:hover,
body.light-mode .btn-hero:hover,
body.light-mode .button-white:hover,
body.light-mode .btn-glass-light:hover,
body.light-mode .btn-square:hover,
body.light-mode .ai-card__btn:hover,
body.light-mode .button-main:hover,
body.light-mode .btn-cv-download:hover,
body.light-mode .btn-submit:hover {
  background-color: #1a1a1ae6 !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-1px);
}

body.light-mode .btn-main:active,
body.light-mode .btn-metal:active,
body.light-mode .btn-lang:active,
body.light-mode .btn-hero:active,
body.light-mode .button-white:active,
body.light-mode .btn-glass-light:active,
body.light-mode .btn-square:active,
body.light-mode .ai-card__btn:active,
body.light-mode .button-main:active,
body.light-mode .btn-cv-download:active,
body.light-mode .btn-submit:active {
  background-color: #333333 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.65) !important;
  transform: translateY(0) scale(0.98) !important;
}

body.light-mode .btn-metal::after,
body.light-mode .btn-cv-download::before,
body.light-mode .btn-cv-download::after {
  display: none !important; /* Oculta el brillo animado en modo claro */
}

body.light-mode .btn-cv-download:hover {
  transform: translateY(-2px) !important;
}

body.light-mode .btn-hero svg,
body.light-mode .button-white svg,
body.light-mode .btn-nav svg,
body.light-mode .btn-main svg,
body.light-mode .btn-metal svg,
body.light-mode .btn-lang svg,
body.light-mode .btn-square svg,
body.light-mode .ai-card__btn svg,
body.light-mode .button-main svg,
body.light-mode .btn-submit svg,
body.light-mode .nav__menu-toggle svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* ═══════════════════════════════════════
   ESTILO REUTILIZABLE: GLASSMORPHISM MODO CLARO
   Para tarjetas en toda la página
   ═══════════════════════════════════════ */

/* Tarjetas Glass Claro */
body.light-mode .glass-dark,
body.light-mode .glass-card-info,
body.light-mode .ai-card,
body.light-mode .card-academic,
body.light-mode .card-academic__body,
body.light-mode .card-talk,
body.light-mode .form-mail {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  color: #1a1a1a;
}

/* ═══════════════════════════════════════
   HERO — video de fondo + overlay + textos
   ═══════════════════════════════════════ */
body.light-mode .hero {
  background: #e0e4ec;
}
body.light-mode #hero-video-bg {
  display: none;
}

/* Overlay translúcido blanco */

/* Degradado invertido a negro-color */
body.light-mode .projects__count-num,
body.light-mode .cta-cv-textcolumn-title {
  background: linear-gradient(135deg, #0d0d14 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: none;
}

/* Barra de estado */
body.light-mode .barra {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
body.light-mode .barra::before,
body.light-mode .barra::after {
  display: none;
} /* Ocultamos decoraciones extrañas del modo oscuro */
body.light-mode .barra span {
  color: #1a1a2e;
}

/* ═══════════════════════════════════════
   SECCIÓN PREGUNTAR (AI)
   ═══════════════════════════════════════ */
body.light-mode .ask {
  background-color: #f4f6fa;
}

body.light-mode .ai-card__title {
  background: linear-gradient(
    90deg,
    #111111 0%,
    var(--color-accent) 50%,
    var(--color-primary) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
body.light-mode .ai-card__subtitle {
  color: rgba(20, 20, 50, 0.6);
}
body.light-mode .ai-card__header {
  border-bottom-color: rgba(0, 0, 0, 0.07);
}
body.light-mode .ai-card__input-area {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
body.light-mode .ai-card__input-area:focus-within {
  border-color: rgba(51, 123, 255, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(51, 123, 255, 0.07) !important;
}
body.light-mode .ai-card__input {
  background: transparent !important;
  border-color: transparent !important;
  color: #111111 !important;
}
body.light-mode .ai-card__input::placeholder {
  color: rgba(0, 0, 0, 0.65) !important;
}
body.light-mode .ai-card__glow-top,
body.light-mode .ai-card__glow-bottom {
  opacity: 0.1;
}

/* AI Chat adjustments */
body.light-mode .ai-chat-msg--assistant .ai-chat-msg__bubble {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
}
body.light-mode .ai-chat-msg--error .ai-chat-msg__bubble {
  background: rgba(255, 91, 86, 0.15);
  border-color: rgba(255, 91, 86, 0.4);
  color: #d32f2f;
}
body.light-mode .ai-chat-msg--user .ai-chat-msg__bubble {
  color: #fff; /* Maintains the blue gradient and white text */
}

/* ═══════════════════════════════════════
   SOBRE MÍ
   ═══════════════════════════════════════ */
body.light-mode .about {
  background: #f4f6fa;
}
body.light-mode .global-title,
body.light-mode .section-intro__title--on-dark {
  color: #111111;
}
body.light-mode .global-desc,
body.light-mode .section-intro__desc--muted {
  color: rgba(20, 20, 20, 0.8);
}
body.light-mode .sobremi__barra {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.12);
  color: #1a1a1a;
}
body.light-mode .info-card__title,
body.light-mode .info-card__value,
body.light-mode .info-card__label,
body.light-mode .info-card__desc {
  color: #1a1a1a;
}

/* ═══════════════════════════════════════
   TECNOLOGÍAS
   ═══════════════════════════════════════ */
body.light-mode .technologies {
  background: #e8ecf2;
}
body.light-mode .tech-table {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light-mode .tech-category {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light-mode .tech-category__title {
  color: var(--color-primary);
}

/* Textos de las filas (tecnologías) */
body.light-mode .tech-row__name,
body.light-mode .tech-item__name {
  color: #1a1a1a !important;
}
body.light-mode .tech-row__years {
  color: rgba(20, 20, 20, 0.65);
}

/* Logos invertidos (para SVG e IMGs) */
body.light-mode .tech-row__name svg,
body.light-mode .tech-row__name img,
body.light-mode .tech-logos-carousel__logo {
  filter: grayscale(100%) invert(1) brightness(0.2) opacity(0.85);
}
body.light-mode .tech-logos-carousel__cell:hover .tech-logos-carousel__logo {
  filter: grayscale(0%) invert(0) brightness(1) opacity(1) !important;
}
body.light-mode .badge {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
  color: #333;
}

/* ═══════════════════════════════════════
   PROYECTOS
   ═══════════════════════════════════════ */
body.light-mode .projects {
  background: #f4f6fa;
}

/* Capas que oscurecen el fondo deben volverse claras/transparentes */
body.light-mode .projects .cape-gradient,
body.light-mode .projects .cape-solid {
  background: linear-gradient(
    to bottom,
    rgba(244, 246, 250, 0.3) 0%,
    rgba(244, 246, 250, 1) 100%
  ) !important;
}

body.light-mode .projects__text {
  color: rgba(20, 20, 20, 0.7);
}
body.light-mode .proyectos__count-label {
  color: rgba(20, 20, 20, 0.55);
}
body.light-mode .projects__group-label::before,
body.light-mode .projects__group-label::after {
  background: rgba(0, 0, 0, 0.1);
}

/* Tarjetas (el fondo ya está en "Tarjetas Glass Claro") */

/* ═══════════════════════════════════════
   EXPERIENCIA — Switch y Cards
   ═══════════════════════════════════════ */
body.light-mode .experience {
  background: #e8ecf2;
  border-top-color: rgba(0, 0, 0, 0.05);
}

/* Botón Switch */
body.light-mode .mode-switch__track {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}
body.light-mode .mode-switch__thumb {
  background: rgba(255, 255, 255, 1);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
/* Texto e icono inactivo: gris opaco */
body.light-mode .mode-switch__segment {
  color: rgba(0, 0, 0, 0.45);
}
body.light-mode .mode-switch__segment .mode-switch__icon {
  opacity: 0.45;
}

/* Activo: negro fuerte */
body.light-mode .mode-switch[aria-checked="false"] .mode-switch__segment--start,
body.light-mode .mode-switch[aria-checked="true"] .mode-switch__segment--end {
  color: #111111;
}
body.light-mode
  .mode-switch[aria-checked="false"]
  .mode-switch__segment--start
  .mode-switch__icon,
body.light-mode
  .mode-switch[aria-checked="true"]
  .mode-switch__segment--end
  .mode-switch__icon {
  opacity: 1;
}

/* Botones stack (< / >) */
body.light-mode .btn-stack {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.12);
  color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
body.light-mode .btn-stack:hover {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.25);
}
body.light-mode .stack-counter {
  color: rgba(20, 20, 20, 0.6);
}

/* ═══════════════════════════════════════
   SECCIÓN CTA-CV
   ═══════════════════════════════════════ */
body.light-mode .cta-cv {
  background: #f4f6fa;
  border-top-color: rgba(0, 0, 0, 0.05);
}
body.light-mode .cta-cv__inner {
  background: transparent;
  box-shadow: none;
}

/* ═══════════════════════════════════════
   CONTACTO
   ═══════════════════════════════════════ */
body.light-mode .contact {
  background: #f4f6fa;
  border-top-color: rgba(0, 0, 0, 0.05);
}

/* Tarjetas (el fondo ya está en "Tarjetas Glass Claro") */
body.light-mode .card-talk__title,
body.light-mode .form-mail__title {
  color: #111111;
}
body.light-mode .card-talk__subtitle {
  color: rgba(20, 20, 20, 0.65);
}
body.light-mode .card-talk__info-item {
  color: rgba(20, 20, 20, 0.8);
}

body.light-mode .form-group label {
  color: rgba(20, 20, 20, 0.7);
}
body.light-mode .form-hint,
body.light-mode .form-group__label-captcha {
  color: rgba(20, 20, 20, 0.55);
}

/* Inputs del formulario */
body.light-mode .form-group input,
body.light-mode .form-group textarea {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #1a1a1a;
}
body.light-mode .form-group input::placeholder,
body.light-mode .form-group textarea::placeholder {
  color: rgba(20, 20, 20, 0.45);
}
body.light-mode .form-group input:focus,
body.light-mode .form-group textarea:focus {
  border-color: var(--color-primary);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(51, 123, 255, 0.15);
}

/* ═══════════════════════════════════════
   FOOTER — Light mode overrides
   ═══════════════════════════════════════ */
body.light-mode .footer__panel {
  background: var(--glass-footer-bg-light);
  border-color: rgba(0, 0, 0, 0.07);
  box-shadow:
    0 0 80px -12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.04);
  /* Sobrescribir color global de texto en el panel para el modo claro */
  color: rgba(20, 20, 20, 0.45);
}

/* En modo claro, ajustamos el color de los elementos destacados */
body.light-mode .footer__heading {
  color: rgba(20, 20, 20, 0.85);
}
body.light-mode .footer__heading em {
  color: rgba(20, 20, 20, 0.4);
}
body.light-mode .footer__email:hover,
body.light-mode .footer__social-link:hover {
  color: rgba(20, 20, 20, 0.85);
}
body.light-mode .footer__email-dash {
  background: rgba(20, 20, 20, 0.2);
}
body.light-mode .footer__email:hover .footer__email-dash {
  background: rgba(20, 20, 20, 0.45);
}
body.light-mode .footer__hairline {
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 0, 0, 0.07) 20%,
    rgba(0, 0, 0, 0.07) 80%,
    transparent
  );
}
body.light-mode .footer__social-link::after {
  background: rgba(20, 20, 20, 0.25);
}
body.light-mode #tech-bg-canvas {
  opacity: 0.3;
}

/* ═══════════════════════════════════════════════════════════════
   HABILIDADES — DEBEN MANTENERSE NEGRAS
   ═══════════════════════════════════════════════════════════════ */
body.light-mode .skills__bg {
  background: #1a1a2e;
} /* Fondo oscuro al hacer scroll */

/* Tarjetas siempre negras con borde sutil claro */
body.light-mode .skill-card {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}
body.light-mode .skill-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
}
body.light-mode .skills .skill-card__title {
  color: #111 !important;
}
body.light-mode .skills .skill-card__desc {
  color: rgba(0, 0, 0, 0.6) !important;
}
body.light-mode .skills .skill-card__anim-area {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.05);
}

/* Text gradients in Light Mode */

body.light-mode .projects__count-num {
  background: linear-gradient(
    135deg,
    #111111 30%,
    var(--color-accent, #3aa6ff) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.light-mode .cta-cv-textcolumn-title {
  background: linear-gradient(to right, #111111 0%, #00a6ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Correcciones de Light Mode - Chat Inline */
body.light-mode .ai-card__chat-area {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
body.light-mode .ai-card__chat-area::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
}
body.light-mode .ai-card__chat-area::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.65) !important;
}

/* Correcciones de Light Mode - Chat Widget Flotante */
body.light-mode .chat-widget__panel {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
body.light-mode .chat-widget__header {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
body.light-mode .chat-widget__input-area {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}
body.light-mode .chat-widget__title {
  color: #1a1a1a !important;
}
body.light-mode .chat-widget__subtitle {
  color: rgba(20, 20, 20, 0.6) !important;
}
body.light-mode .chat-widget__input {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #111111 !important;
}
body.light-mode .chat-widget__input::placeholder {
  color: rgba(0, 0, 0, 0.65) !important;
}
body.light-mode .chat-widget__input:focus {
  background: #ffffff !important;
  border-color: rgba(51, 123, 255, 0.6) !important;
  box-shadow: 0 0 12px rgba(51, 123, 255, 0.15) !important;
}
body.light-mode .chat-widget__messages::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
}
body.light-mode .chat-widget__messages::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.65) !important;
}
body.light-mode .chat-widget__close {
  color: #1a1a1a !important;
}

body.light-mode .skills-textcolumn-title {
  color: color-mix(
    in srgb,
    #111111 calc((1 - var(--hab-focus)) * 100%),
    #ffffff calc(var(--hab-focus) * 100%)
  ) !important;
}
body.light-mode .skills-textcolumn-desc {
  color: color-mix(
    in srgb,
    rgba(17, 17, 17, 0.7) calc((1 - var(--hab-focus)) * 100%),
    rgba(255, 255, 255, 0.8) calc(var(--hab-focus) * 100%)
  ) !important;
}
body.light-mode .skills-textcolumn-subtitle {
  color: color-mix(
    in srgb,
    var(--color-primary) calc((1 - var(--hab-focus)) * 100%),
    #ffffff calc(var(--hab-focus) * 100%)
  ) !important;
}

body.light-mode .card-project::before {
  background: rgba(255, 255, 255, 0.6) !important;
}

/* Correcciones de texto negro en modo claro */
body.light-mode .technologies__carousel-lead,
body.light-mode .card-project .project-name,
body.light-mode .card-project .project-type,
body.light-mode .card-project .description,
body.light-mode .card-academic .card-academic__name,
body.light-mode .card-academic .card-academic__period,
body.light-mode .card-academic .card-academic__item,
body.light-mode .card-academic .card-academic__item-icon {
  color: #1a1a1a !important;
}

/* Modificar los "badges" blancos para que sean oscuros en modo claro */
body.light-mode .badge--white {
  background: rgba(0, 0, 0, 0.08) !important;
  color: #1a1a1a !important;
}

/* Restablecer estilo de tags en modo claro para que sean legibles y elegantes */
body.light-mode .tag {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #1a1a1a !important;
}

/* Evitar que TODAS las badges y tags de la tarjeta de experiencia cambien a oscuro en modo claro */
body.light-mode .card-experience .badge,
body.light-mode .card-experience .tag {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Transitions.dev — Error state shake */

.t-input {
  transition: border-color 150ms ease-out;
  will-change: transform;
}
.t-input.is-error {
  transition: border-color var(--revert-dur, 280ms) ease-out;
  border-color: #ff5b56 !important;
}

.t-error-msg {
  opacity: 0;
  visibility: hidden;
  color: #ff5b56;
  font-size: 12px;
  margin-top: 2px;
  display: block;
  transition:
    opacity var(--revert-dur, 280ms) ease-out,
    visibility 0s linear var(--revert-dur, 280ms);
}
.t-input-wrap.is-error .t-error-msg {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--revert-dur, 280ms) ease-out,
    visibility 0s linear 0s;
}

.t-input.is-shaking {
  animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2)
    linear;
}
@keyframes t-input-shake {
  0% {
    transform: translateX(0);
    animation-timing-function: var(--shake-ease);
  }
  28.57% {
    transform: translateX(var(--shake-distance));
    animation-timing-function: var(--shake-ease);
  }
  57.14% {
    transform: translateX(calc(var(--shake-distance) * -1));
    animation-timing-function: var(--shake-ease);
  }
  78.57% {
    transform: translateX(var(--shake-overshoot));
    animation-timing-function: var(--shake-ease);
  }
  100% {
    transform: translateX(0);
  }
}

/* ============ HERO ============ */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 90%;
  object-fit: cover;
  transform: translate(-50%, -50%) scale(1.9);
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(8, 8, 8, 0.25);
  pointer-events: none;
}
.hero__gradient-top,
.hero__gradient-bottom {
  display: none;
}

/* ===== PROGRESSIVE BLUR ===== */
.hero__blur {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  z-index: 3;
  pointer-events: none;
}
.hero__blur-layer {
  position: absolute;
  inset: 0;
}
.hero__blur-layer:nth-child(1) {
  backdrop-filter: blur(0.6px);
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%);
}
.hero__blur-layer:nth-child(2) {
  backdrop-filter: blur(1px);
  mask-image: linear-gradient(to bottom, transparent 12%, black 25%);
}
.hero__blur-layer:nth-child(3) {
  backdrop-filter: blur(1.5px);
  mask-image: linear-gradient(to bottom, transparent 25%, black 37%);
}
.hero__blur-layer:nth-child(4) {
  backdrop-filter: blur(2px);
  mask-image: linear-gradient(to bottom, transparent 37%, black 50%);
}
.hero__blur-layer:nth-child(5) {
  backdrop-filter: blur(3px);
  mask-image: linear-gradient(to bottom, transparent 50%, black 62%);
}
.hero__blur-layer:nth-child(6) {
  backdrop-filter: blur(4px);
  mask-image: linear-gradient(to bottom, transparent 62%, black 75%);
}
.hero__blur-layer:nth-child(7) {
  backdrop-filter: blur(6px);
  mask-image: linear-gradient(to bottom, transparent 75%, black 87%);
}
.hero__blur-layer:nth-child(8) {
  backdrop-filter: blur(8px);
  mask-image: linear-gradient(to bottom, transparent 87%, black 100%);
}
.hero__blur::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(20, 20, 20, 0.35) 40%,
    rgba(20, 20, 20, 0.65) 70%,
    rgba(20, 20, 20, 0.85) 100%
  );
}

.hero__blur-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(60px + clamp(20px, 3vh, 36px) + 24px);
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(0.8deg, rgba(255, 255, 255, 0.06) -51%, transparent 109%),
    rgba(255, 255, 255, 0.01);
  mask-image: linear-gradient(to bottom, transparent 0%, black 30%);
}

/* ===== HEADER ===== */
.hero-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--page-pad);
}

/* ===== LOGO ===== */
.logo {
  display: flex;
  align-items: center;
}
.logo__icon {
  display: block;
  width: clamp(80px, 7.6vw, 110px);
  height: clamp(22px, 2.08vw, 30px);
  overflow: visible;
}
.is-not-ready .logo__circle,
.is-not-ready .logo__arc-1a,
.is-not-ready .logo__arc-1b,
.is-not-ready .logo__arc-2a,
.is-not-ready .logo__arc-2b,
.is-not-ready .logo__text-group {
  opacity: 0;
  animation-play-state: paused !important;
}
.logo__circle {
  transform-origin: 14.3px 14.9px;
  transform: scale(0);
  opacity: 0;
  animation: logoCircleGrow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}
@keyframes logoCircleGrow {
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.logo__arc-1a,
.logo__arc-1b {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  transform: translateX(-14px);
  animation: logoArcDraw1 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}
.logo__arc-2a,
.logo__arc-2b {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  transform: translateX(-14px);
  animation: logoArcDraw2 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.25s forwards;
}
@keyframes logoArcDraw1 {
  to {
    stroke-dashoffset: 0;
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes logoArcDraw2 {
  to {
    stroke-dashoffset: 0;
    opacity: 1;
    transform: translateX(0);
  }
}
.logo__text-group {
  opacity: 0;
  filter: blur(10px);
  transform: translateX(28px);
  animation: logoTextReveal 1.9s cubic-bezier(0.16, 1, 0.3, 1) 1.25s forwards;
}
@keyframes logoTextReveal {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
  }
}
.logo__tm {
  font-family: "Inter Tight", sans-serif;
  font-size: 20px;
  fill: #fff;
}

/* ===== NAV PILL ===== */
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: clamp(16px, 2.3vw, 33px);
  padding: clamp(8px, 0.76vw, 11px) clamp(13px, 1.39vw, 20px);
  justify-content: center;
  border-radius: 1090.909px;
  border: 1.091px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(
      12deg,
      rgba(255, 255, 255, 0.06) -43.16%,
      rgba(255, 255, 255, 0) 103.95%
    ),
    rgba(255, 255, 255, 0.01);
  backdrop-filter: var(--blur-xl);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  transform-origin: center;
  transform: scaleX(0);
  opacity: 0;
  animation: navPillReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
.is-not-ready .nav-pill {
  animation-play-state: paused !important;
}
@keyframes navPillReveal {
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}
.nav-pill__link {
  font-size: clamp(12px, 1.06vw, 15.27px);
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 0.56vw, 8px);
  opacity: 0;
  transform: translateY(14px);
  animation: navLinkReveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.is-not-ready .nav-pill__link {
  animation-play-state: paused !important;
}
.nav-pill__link:hover {
  color: #fff;
}
.nav-pill__link:nth-child(1) {
  animation-delay: 0.75s;
}
.nav-pill__link:nth-child(2) {
  animation-delay: 0.83s;
}
.nav-pill__link:nth-child(3) {
  animation-delay: 0.91s;
}
.nav-pill__link:nth-child(4) {
  animation-delay: 0.99s;
}
.nav-pill__link:nth-child(5) {
  animation-delay: 1.07s;
}
.nav-pill__link:nth-child(6) {
  animation-delay: 1.15s;
}
@keyframes navLinkReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.nav-pill__badge {
  width: clamp(14px, 1.25vw, 18px);
  height: clamp(14px, 1.25vw, 18px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 500;
  line-height: 1;
}

/* ===== BUTTONS ===== */
.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: clamp(7px, 0.7vw, 10px);
  padding: clamp(8px, 0.76vw, 11px) clamp(18px, 2.01vw, 29px);
  border-radius: var(--btn-radius);
  background: #fff;
  color: #000;
  font-size: clamp(13px, 1.11vw, 16px);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.hero-btn__arrow {
  width: 8px;
  height: 8px;
}
.hero-btn--header {
  background: #fff;
  color: #000;
  opacity: 0;
  transform: scale(0);
  animation: buttonBounce 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}
.hero-btn--footer {
  background: #fff;
  color: var(--dark-text);
  opacity: 0;
  transform: scale(0);
  animation: buttonBounce 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
}
.is-not-ready .hero-btn--header,
.is-not-ready .hero-btn--footer,
.is-not-ready .nav-cta-beam,
.is-not-ready #theme-toggle,
.is-not-ready #lang-toggle {
  animation-play-state: paused !important;
}
@keyframes buttonBounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===== HEADLINE ===== */
.hero__heading {
  position: absolute;
  left: var(--page-pad);
  right: var(--page-pad);
  top: 25%;
  z-index: 5;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(44px, 4.5vw, 74px);
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.11;
  pointer-events: none;
}
.is-not-ready .hero__heading,
.is-not-ready .hero__label,
.is-not-ready .hero__desc {
  opacity: 0;
}
body.is-ready .hero__heading,
body.is-ready .hero__label,
body.is-ready .hero__desc {
  opacity: 1;
}
.hero__line {
  display: block;
  overflow: hidden;
  line-height: 1.15;
}
.hero__line-inner {
  display: inline-block;
  white-space: normal;
}
.hero__heading em {
  font-style: italic;
  font-weight: 700;
}
.hero__heading strong {
  font-weight: 700;
}
.hero__science {
  font-style: italic;
  font-weight: 700;
}
.hero__char {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  animation: charReveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.is-not-ready .hero__char {
  animation-play-state: paused !important;
}
@keyframes charReveal {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ===== SIDE NAV ===== */
.side-nav {
  position: absolute;
  right: var(--page-pad);
  top: 55%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.1vw, 16px);
  align-items: flex-end;
}
.side-nav__link {
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 500;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: clamp(7px, 0.7vw, 10px);
  transition: color 0.2s ease;
}
.side-nav__link--active {
  color: #ececec;
}
.side-nav__link-text {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  animation: navTextReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.is-not-ready .side-nav__link-text,
.is-not-ready .side-nav__line {
  animation-play-state: paused !important;
  opacity: 0;
}
.side-nav__link:nth-child(1) .side-nav__link-text {
  animation-delay: 0.5s;
}
.side-nav__link:nth-child(2) .side-nav__link-text {
  animation-delay: 0.7s;
}
.side-nav__link:nth-child(3) .side-nav__link-text {
  animation-delay: 0.9s;
}
.side-nav__link:nth-child(4) .side-nav__link-text {
  animation-delay: 1.1s;
}
.side-nav__link:nth-child(5) .side-nav__link-text {
  animation-delay: 1.3s;
}
.side-nav__line {
  display: inline-block;
  width: 13.5px;
  height: 1px;
  background: #fff;
  opacity: 0;
  animation: navTextReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}
@keyframes navTextReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== HERO BOTTOM ===== */
.hero__bottom {
  position: absolute;
  left: var(--page-pad);
  right: var(--page-pad);
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  gap: clamp(6px, 0.7vw, 10px) clamp(20px, 2.8vw, 40px);
  padding-bottom: clamp(20px, 3vh, 36px);
  align-items: end;
}
.hero__label {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 500;
}
.hero__desc {
  grid-column: 1;
  grid-row: 2;
  max-width: clamp(300px, 32vw, 462px);
  color: rgba(255, 255, 255, 0.5);
  font-size: clamp(13px, 1.1vw, 18px);
  line-height: 1.4;
}
.hero__actions {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.67vw, 24px);
}

.about-card-wrapper {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: end;
  animation: floatCard 4s ease-in-out infinite;
  /* Retrasar la animación de flotado un poco para que no empiece antes de que aparezca */
  animation-delay: 2s;
}
@keyframes floatCard {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}

.about-card {
  display: flex;
  width: clamp(260px, 25.7vw, 370px);
  background: #fff;
  border-radius: var(--card-radius);
  overflow: hidden;
  transform: scale(0);
  opacity: 0;
  animation: buttonBounce_2 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
@keyframes buttonBounce_2 {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.is-not-ready .about-card {
  animation-play-state: paused !important;
}
.about-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.about-card__image {
  width: clamp(130px, 8vw, 191px);
  flex-shrink: 0;
  padding: clamp(4px, 0.49vw, 7px);
}
.about-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--card-radius);
}
.about-card__content {
  flex: 1;
  padding: clamp(12px, 1.32vw, 19px) clamp(10px, 1.1vw, 16px)
    clamp(10px, 1.1vw, 16px) clamp(5px, 0.56vw, 8px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.about-card__title {
  font-size: clamp(11px, 0.97vw, 14px);
  font-weight: 700;
  color: #000;
  margin-bottom: clamp(4px, 0.42vw, 6px);
}
.about-card__text {
  font-size: clamp(10px, 0.83vw, 12px);
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.4;
  margin-bottom: clamp(8px, 0.97vw, 14px);
}
.about-card__arrow {
  width: clamp(50px, 5.35vw, 77px);
  height: clamp(9px, 0.9vw, 13px);
  align-self: flex-end;
  color: rgba(0, 0, 0, 0.2);
  transition: color 0.2s ease;
}
.about-card:hover .about-card__arrow {
  color: rgba(0, 0, 0, 0.6);
}

/* ===== SCROLL DOWN ===== */
.scroll-down {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  outline: none;
  opacity: 0;
  transform: scale(0);
  animation: buttonBounce 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
}
.is-not-ready .scroll-down {
  animation-play-state: paused !important;
}
.scroll-down__text {
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 700;
  letter-spacing: -0.18px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.scroll-down__circle {
  width: clamp(20px, 1.8vw, 26px);
  height: clamp(20px, 1.76vw, 25.3px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  transition: border-color 0.2s ease;
  flex-shrink: 0;
}
.scroll-down:hover .scroll-down__circle {
  border-color: #fff;
}
.scroll-down__circle svg {
  width: 7.222px;
  height: 8.667px;
  animation: arrowScroll 2.5s cubic-bezier(0.4, 0, 0.7, 1) infinite;
}
@keyframes arrowScroll {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  38% {
    transform: translateY(9px);
    opacity: 0;
  }
  39% {
    transform: translateY(-9px);
    opacity: 0;
  }
  60% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ===== RESPONSIVE (desktop only) ===== */

/* Theme toggle logic for the header buttons */
#theme-toggle .theme-text::before {
  content: "Modo claro";
}
body.light-mode #theme-toggle .theme-text::before {
  content: "Modo oscuro";
}

/* Icons are handled by the switch design */

/* ==========================================================================
   KUBRIC HERO - LIGHT MODE ADAPTATION
   ========================================================================== */

body.light-mode .hero__heading {
  color: #111;
}
body.light-mode .hero__label {
  color: #111;
}
body.light-mode .hero__desc {
  color: rgba(0, 0, 0, 0.65);
}

/* Logo filter inversion for light mode */
body.light-mode .logo__icon {
  filter: brightness(0) !important;
}

/* Side navigation */
body.light-mode .side-nav__link {
  color: rgba(0, 0, 0, 0.5);
}
body.light-mode .side-nav__link--active {
  color: #000;
}
body.light-mode .side-nav__line {
  background: #000;
}

/* Blur masks and overlays */
body.light-mode .hero__blur::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 40%,
    rgba(255, 255, 255, 0.65) 70%,
    rgba(255, 255, 255, 0.85) 100%
  );
}
body.light-mode .hero__blur-bar {
  background:
    linear-gradient(0.8deg, rgba(0, 0, 0, 0.06) -51%, transparent 109%),
    rgba(0, 0, 0, 0.01);
}

/* Scroll down button */
body.light-mode .scroll-down__text {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, #000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.light-mode .scroll-down__circle {
  border-color: rgba(0, 0, 0, 0.3);
  color: #000;
}
body.light-mode .scroll-down:hover .scroll-down__circle {
  border-color: #000;
}

/* Typewriter role */
body.light-mode .hero__role {
  color: #111;
}

/* LIGHT MODE ADAPTATION: HEADER PILL NAV */
body.light-mode .nav-pill {
  border: 1.091px solid rgba(0, 0, 0, 0.1);
  background:
    linear-gradient(
      12deg,
      rgba(0, 0, 0, 0.06) -43.16%,
      rgba(0, 0, 0, 0) 103.95%
    ),
    rgba(0, 0, 0, 0.01);
}
body.light-mode .nav-pill__link {
  color: rgba(0, 0, 0, 0.5);
}
body.light-mode .nav-pill__link:hover {
  color: #000;
}
body.light-mode .nav-pill__badge {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.5);
}

/* LIGHT MODE ADAPTATION: CV BUTTON */
body.light-mode .hero-btn--footer {
  background: #111 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

/* LIGHT MODE ADAPTATION: ABOUT CARD */
body.light-mode .about-card {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
body.light-mode .about-card__title {
  color: #fff;
}
body.light-mode .about-card__text {
  color: rgba(255, 255, 255, 0.7);
}
body.light-mode .about-card__arrow {
  color: rgba(255, 255, 255, 0.3);
}
body.light-mode .about-card:hover .about-card__arrow {
  color: #fff;
}

/* ==========================================================================
   THEME SWITCH (btn-main variant)
   ========================================================================== */
.btn-main--switch {
  position: relative;
  width: 60px;
  height: 32px;
  padding: 4px;
  justify-content: space-between;
}

.btn-main--switch .switch__thumb {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  left: 4px;
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.btn-main--switch svg {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  opacity: 0.8;
  color: #fff;
  transition: color 0.3s ease;
}

/* Icons are arranged space-between, so sun is on right, moon on left */
.btn-main--switch .theme-moon {
  margin-left: 2px;
}
.btn-main--switch .theme-sun {
  margin-right: 2px;
}

/* Light mode overrides for the thumb and icons */
body.light-mode .btn-main--switch .switch__thumb {
  transform: translateX(28px);
  background: #fff;
}
body.light-mode .btn-main--switch svg {
  color: #fff; /* We want them to stay visible inside the black glass pill */
}

/* CONTACT BUTTON ANIMATION FIX */
body.light-mode .hero-hamburger {
  color: #111 !important;
}

/* ==========================================================================
   MOBILE MENU OVERLAY
   ========================================================================== */
.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100vw;
  max-height: 35vh;
  background:
    linear-gradient(
      12deg,
      rgba(255, 255, 255, 0.06) -43.16%,
      rgba(255, 255, 255, 0) 103.95%
    ),
    rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1; /* Goes behind header padding if needed, but absolute is fine */
}
.mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  align-items: center;
  padding: 10px 20px;
}
.mobile-link {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  transition:
    color 0.2s ease,
    background 0.2s ease;
  width: 90%;
  text-align: center;

  opacity: 0;
  transform: translateY(15px);
  filter: blur(5px);
}
.mobile-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
body.light-mode .mobile-menu {
  background:
    linear-gradient(
      12deg,
      rgba(0, 0, 0, 0.06) -43.16%,
      rgba(0, 0, 0, 0) 103.95%
    ),
    rgba(0, 0, 0, 0.01);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
body.light-mode .mobile-link {
  color: rgba(0, 0, 0, 0.5);
}
body.light-mode .mobile-link:hover {
  color: #000;
  background: rgba(0, 0, 0, 0.05);
}
.mobile-menu.is-open .mobile-link {
  animation: mobileMenuReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes mobileMenuReveal {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: none;
  }
}

.mobile-link:nth-child(1) {
  animation-delay: 0.1s;
}
.mobile-link:nth-child(2) {
  animation-delay: 0.2s;
}
.mobile-link:nth-child(3) {
  animation-delay: 0.3s;
}
.mobile-link:nth-child(4) {
  animation-delay: 0.4s;
}
.mobile-link:nth-child(5) {
  animation-delay: 0.5s;
}
.mobile-link:nth-child(6) {
  animation-delay: 0.6s;
}

/* Fix blur rendering for iframe/canvas elements */
.reveal-no-blur {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  will-change: transform, opacity;
}
:where(.reveal-no-blur).reveal-active {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease);
}

/* ANIMATED ICONS CSS */
.nav-icon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  display: inline-block;
  vertical-align: text-bottom;
}

/* 1. Paper Plane */
.nav-cta-beam:hover .paper-plane {
  animation: paperPlaneAnim 0.7s ease-in-out forwards;
}
@keyframes paperPlaneAnim {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(3px);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 2. File Description */
.file-fold,
.file-lines,
.info-circle-i,
.info-line-i,
.shield-check,
.discount-check {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.btn-main:hover .file-fold,
.hero-btn--footer:hover .file-fold,
.nav-pill__link:hover .info-circle-i {
  animation: drawStroke 0.3s ease-out forwards;
}
.btn-main:hover .file-lines,
.hero-btn--footer:hover .file-lines,
.nav-pill__link:hover .info-line-i {
  animation: drawStroke 0.4s ease-out forwards;
}
@keyframes drawStroke {
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* 3. Home Icon */
.nav-pill__link:hover .roof {
  animation: roofAnim 0.4s ease-out forwards;
}
.nav-pill__link:hover .house {
  animation: houseAnim 0.3s ease-out forwards;
}
.nav-pill__link:hover .door {
  animation: doorAnim 0.3s ease-out forwards;
}
@keyframes roofAnim {
  0% {
    transform: translateY(-2px);
    opacity: 0.6;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes houseAnim {
  0% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes doorAnim {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

/* 4. Sparkles Icon */
.nav-pill__link:hover .sparkle-main {
  animation: sparkMain 0.6s ease-in-out forwards;
}
.nav-pill__link:hover .sparkle-top {
  animation: sparkTop 0.5s ease-in-out 0.1s forwards;
}
.nav-pill__link:hover .sparkle-bottom {
  animation: sparkBot 0.5s ease-in-out 0.05s forwards;
}
@keyframes sparkMain {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(90deg) scale(1.2);
  }
  100% {
    transform: rotate(180deg) scale(1);
  }
}
@keyframes sparkTop {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    transform: rotate(-45deg) scale(0.8);
    opacity: 0.6;
  }
  100% {
    transform: rotate(-90deg) scale(1.1);
    opacity: 1;
  }
}
@keyframes sparkBot {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    transform: rotate(45deg) scale(1.15);
    opacity: 0.7;
  }
  100% {
    transform: rotate(90deg) scale(0.9);
    opacity: 1;
  }
}

/* 5. Shield Check */
.nav-pill__link:hover .shield-body {
  animation: shieldScale 0.35s ease-out forwards;
}
.nav-pill__link:hover .shield-check {
  animation: shieldCheckAnim 0.3s ease-in-out forwards;
}
@keyframes shieldScale {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@keyframes shieldCheckAnim {
  0% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* 6. Rosette Discount Check */
.nav-pill__link:hover .rosette-badge {
  animation: rosetteBadge 0.8s ease-in-out forwards;
}
.nav-pill__link:hover .discount-check {
  animation: shieldCheckAnim 0.4s ease-out forwards;
}
@keyframes rosetteBadge {
  0% {
    transform: rotate(0deg) scale(1);
  }
  30% {
    transform: rotate(-5deg) scale(1.05);
  }
  60% {
    transform: rotate(5deg) scale(0.98);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

/* ANIMATED ICONS - ROUND 2 */
/* 1. Send Icon */
.nav-cta-beam:hover .send-icon,
.btn-submit:hover .send-icon {
  animation: sendIconFly 0.5s forwards;
}
@keyframes sendIconFly {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  49% {
    transform: translate(24px, -24px);
    opacity: 0;
  }
  50% {
    transform: translate(-24px, 24px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/* 2. Sun Switch */
.btn-main--switch:hover .sun-center {
  animation: sunCenter 0.4s ease-in-out forwards;
}
.btn-main--switch:hover .sun-rays {
  animation: sunRays 0.5s ease-in-out forwards;
}
@keyframes sunCenter {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8);
  }
}
@keyframes sunRays {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* 3. Moon Switch */
.btn-main--switch:hover .moon {
  animation: moonAnim 0.5s ease-in-out forwards;
}
@keyframes moonAnim {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(-15deg) scale(1.1);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

/* Add support for CTA button hover for file drawing */
.btn-metal-cta-cv:hover .file-fold {
  animation: drawStroke 0.3s ease-out forwards;
}
.btn-metal-cta-cv:hover .file-lines {
  animation: drawStroke 0.4s ease-out forwards;
}

/* Explicit rule to make floating chat widget placeholder visible in dark mode */
.chat-widget__input::placeholder {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Transitions.dev — Tabs sliding */

.nav-pill.t-tabs {
  position: relative;
}

.nav-pill__link.t-tab {
  position: relative;
  z-index: 1;
  transition: color var(--tabs-dur) var(--tabs-ease);
}

.nav-pill__link.t-tab:not([aria-selected="true"]):hover,
.nav-pill__link.t-tab[aria-selected="true"] {
  color: var(--tabs-text-active);
}

.t-tabs-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: var(--tabs-pill-bg);
  border-radius: inherit;
  transform: translate(0, 0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width var(--tabs-dur) var(--tabs-ease),
    height var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width, height;
  z-index: 0;
  pointer-events: none;
}

body.light-mode .t-tabs-pill {
  background: rgba(0, 0, 0, 0.05);
}

body.light-mode .nav-pill__link.t-tab:not([aria-selected="true"]):hover,
body.light-mode .nav-pill__link.t-tab[aria-selected="true"] {
  color: #1a1a1a;
}

/* ─── UTILITIES & HELPER CLASSES ──────────────── */
/* Typography */
.font-dots {
  font-family: var(--font-doto);
}

.font-serif {
  font-family: var(--font-serif);
}

.font-mono {
  font-family: var(--font-mono);
}

/* Layout Utilities */
.section__column-double {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--section-px);
  width: 100%;
}

@media (max-width: 768px) {
  .section__column-double {
    grid-template-columns: 1fr;
  }
}

/* ─── RESPONSIVIDAD ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .mode-switch__thumb {
    transition: none;
  }

  .mode-switch__segment,
  .mode-switch__icon {
    transition: none;
  }
}

@media (min-width: 701px) {
  .nav__backdrop {
    display: none !important;
    pointer-events: none !important;
  }

  .nav-drawer {
    display: contents;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-metal {
    transition-duration: 0.2s;
  }

  .btn-metal::after {
    animation: none;
    opacity: 0.12;
  }

  .btn-metal:active {
    filter: brightness(1.12);
    box-shadow:
      0 0 32px rgba(58, 166, 255, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  .btn-metal:active::after {
    opacity: 0.35;
    filter: none;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
}

@media (max-width: 768px) {
}

@media (max-width: 600px) {
  .skill-cards {
    height: 520px;
  }
}

@media (max-width: 600px) {
  .skill-card {
    flex-direction: column;
    padding: 24px;
    gap: 16px;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .skill-card__anim-area {
    width: 100%;
    height: 200px;
  }
}

@media (max-width: 600px) {
  .skill-card__title {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tech-logos-carousel__logo {
    transition-duration: 0.15s;
  }

  .tech-logos-carousel__cell:hover .tech-logos-carousel__logo {
    transform: none;
  }
}

@media (max-width: 960px) {
  .projects--grid .projects__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .projects--grid .projects__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .projects__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .projects__meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .projects__count {
    flex-direction: row;
    gap: 8px;
    align-items: baseline;
  }
}

@media (min-width: 640px) {
  .footer__cta {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
  }
}

@media (min-width: 640px) {
  .footer__email {
    align-self: flex-end;
  }
}

@media (min-width: 640px) {
  .footer__bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }
}

@media (min-width: 640px) {
  .footer__meta {
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }
}

@media (min-width: 640px) {
  .footer__dot {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-base {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

@media (max-width: 1100px) {
  .contact__body {
    flex-direction: column;
    align-items: center;
  }

  .card-talk {
    width: 100%;
    max-width: 600px;
  }
}

@media (max-width: 1040px) and (min-width: 701px) {
  .btn-nav span {
    display: none;
  }

  .nav-links {
    flex: 0 1 auto;
  }
}

@media (max-width: 900px) {
  .about__row {
    flex-direction: column;
    align-items: center;
  }

  .info-cards {
    justify-content: center;
    gap: clamp(14px, 4vw, 20px);
  }

  .card-academic {
    width: 100%;
    max-width: 100%;
  }

  .card-academic__title {
    font-family: var(--font-doto);
  }

  .tech-category {
    padding-inline: clamp(12px, 4vw, 16px);
  }
}

@media (max-width: 768px) {
  .card-academic {
    flex-direction: column;
    align-items: stretch;
    border-radius: 16px;
  }

  .card-academic__img-col {
    width: 100%;
    max-width: none;
    flex-shrink: 0;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: clamp(14px, 4vw, 18px) clamp(16px, 5vw, 20px);
    justify-content: center;
  }

  .card-academic__img-col img {
    width: clamp(96px, 28vw, 112px);
    height: clamp(96px, 28vw, 112px);
  }

  .card-academic__body {
    padding: clamp(16px, 4vw, 18px) clamp(16px, 5vw, 20px)
      clamp(18px, 5vw, 22px);
  }

  .card-academic__name {
    letter-spacing: -0.02em;
    line-height: 1.28;
  }

  .card-academic__item {
    align-items: flex-start;
  }

  .card-academic__item-icon {
    margin-top: 3px;
    flex-shrink: 0;
  }
}

@media (max-width: 700px) {
  /*
   * Móvil: fila superior = hamburguesa + acciones; #nav-drawer despliega los enlaces debajo.
   * .nav-wrapper--menu-open la aplica main.js al pulsar #nav-menu-toggle.
   */
  .nav,
  .nav::before {
    /* Pill 69px en desktop; en hamburguesa un radio menor evita artefactos y huecos en las curvas */
    border-radius: clamp(14px, 4.2vw, 22px);
  }

  .nav__menu-toggle {
    display: inline-flex;
    order: 1;
  }

  .nav__actions {
    order: 2;
    margin-left: auto;
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: 0;
    flex-shrink: 1;
    max-width: 100%;
  }

  .nav-drawer {
    order: 3;
    flex: 1 1 100%;
    align-self: stretch;
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-sizing: border-box;
    transition:
      max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.28s ease,
      visibility 0.38s step-end;
  }

  .nav-wrapper--menu-open .nav-drawer {
    max-height: min(75vh, 520px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Capa un poco más densa que el solo glass: tapa el hero oscuro en los cantos del panel */
    background:
      linear-gradient(
        180deg,
        rgba(10, 12, 16, 0.72) 0%,
        rgba(8, 9, 12, 0.88) 100%
      ),
      var(--glass-nav-bg);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-inline: clamp(6px, 1.5vw, 10px);
    transition:
      max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.28s ease,
      visibility 0s step-start;
  }

  .nav {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: clamp(6px, 2vw, 10px);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: clamp(8px, 2vw, 14px) clamp(6px, 1.5vw, 12px) clamp(4px, 1vw, 8px);
    box-sizing: border-box;
  }

  /* En el panel móvil sí mostramos el texto junto al icono */
  .nav-drawer .btn-nav span {
    display: inline !important;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .nav-drawer .btn-nav {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    justify-content: flex-start;
    white-space: normal;
    padding-block: clamp(8px, 2.5vw, 12px);
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-drawer {
      transition: none;
    }
  }

  .vmodal__container {
    width: 100%;
    max-width: 640px;
  }

  .ti-window {
    width: 100%;
    max-width: 400px;
  }

  .hero {
    justify-content: flex-start;
    padding-top: calc(
      env(safe-area-inset-top, 0px) + clamp(120px, 42vw, 168px)
    );
    padding-bottom: calc(
      env(safe-area-inset-bottom, 0px) + clamp(18px, 5vw, 28px)
    );
  }

  .hero__cta-group .btn-hero {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }

  .barra {
    max-width: 100%;
    box-sizing: border-box;
  }

  .barra span {
    line-height: 1.35;
    text-align: center;
  }

  .info-card {
    width: 100%;
    max-width: clamp(260px, 92vw, 300px);
  }

  .skill-card {
    width: 100%;
    max-width: clamp(280px, 92vw, 320px);
  }

  .card-stack {
    height: clamp(480px, 120vw, 560px);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  /* CTA currículum + botón metal a ancho completo */
  .cta-cv__inner {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .cta-cv__desc {
    max-width: 100%;
  }

  .btn-cv-download {
    width: 100%;
    justify-content: center;
  }

  .cta-cv__content .btn-metal-cta-cv {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
}

@media (max-width: 400px) {
  .card-academic__body {
    padding-inline: clamp(10px, 4vw, 12px);
  }

  .card-academic__item {
    padding-inline: clamp(2px, 1.5vw, 4px);
  }
}

@media (max-width: 900px) {
  .ia-workflow__inner {
    flex-direction: column-reverse;
  }
  .ia-workflow__carousel-col {
    width: 100%;
    height: 350px;
  }
  .ai-spiral-container {
    height: 350px;
  }
}

@media (max-width: 900px) {
  .certifications__inner {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 900px) {
  .certifications__content {
    align-items: center;
    text-align: center;
  }
  .certifications-textcolumn-title,
  .certifications-textcolumn-desc,
  .certificaciones-textcolumn-pretitle {
    text-align: center;
  }
}

@media (max-width: 900px) {
  .cta-cv__inner {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 900px) {
  .cta-cv__content {
    align-items: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-cv__doc {
    animation: none;
  }

  .btn-cv-download,
  .btn-cv-download::before,
  .btn-cv-download::after {
    transition-duration: 0.15s;
  }
}

@media (max-width: 767px) {
  .ai-card {
    width: 100%;
    padding: 20px;
    gap: 18px;
  }

  .ai-card__input-area {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 16px;
  }

  .ai-card__input {
    width: 100%;
    padding: 0;
  }

  .ai-card__btn {
    width: 100%;
    padding: 12px;
  }
}

@media (max-width: 767px) {
  .chat-widget__panel {
    right: 12px;
    left: 12px;
    width: auto;
    bottom: calc(16px + 64px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .eye-group--left,
  .eye-group--right,
  .eye-pupil {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-input {
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width: 1360px) {
  .hero__heading {
    top: 21%;
  }
}

@media (max-width: 1200px) {
  .hero-header {
    padding-top: clamp(14px, 1.4vw, 18px);
    padding-bottom: clamp(14px, 1.4vw, 18px);
  }
  .side-nav {
    top: 52%;
  }
  .hero__heading {
    top: 20%;
  }
}

@media (max-width: 1100px) {
  .hero__heading {
    top: 18%;
  }
  .hero__blur {
    height: 30%;
  }
}

@media (max-width: 768px) {
  .hero__bottom {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    position: absolute;
    bottom: 5%;
    gap: 15px;
  }
  .hero__actions {
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .about-card-wrapper {
    grid-column: 1;
    grid-row: 4;
    align-self: center;
    width: 100%;
    max-width: 100%;
  }
  .about-card {
    width: 100%;
  }
  .hero__heading {
    font-size: clamp(32px, 8vw, 44px);
    top: 12%;
  }

  /* HIDE HEADER ELEMENTS AND SIDE NAV */
  #theme-toggle {
    display: none !important;
  }
  .hero-header__center {
    display: none !important;
  }
  .hero-header__actions > *:not(.hero-hamburger) {
    display: none !important;
  }
  .side-nav {
    display: none !important;
  }
  .hero-hamburger {
    display: block !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-tabs-pill,
  .t-tab {
    transition: none !important;
  }
}