/* =========================================================
   Inter servida desde el propio dominio
   Antes venia de fonts.googleapis.com, que bloquea el primer render y
   anade dos dominios externos. Solo el subconjunto latin y solo los cinco
   pesos que el CSS usa de verdad (400, 500, 600, 700, 800): se comprobo
   que ningun texto del sitio necesita latin-ext, y que el peso 900 no se
   usa en ninguna regla. De 785 KB a 235.
   ========================================================= */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/inter-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* =========================================================
   PORTFOLIO · Angel Manuel Firpo Estrella
   Estética: Apple × ahora-studio · Modo claro/oscuro
   ========================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #f5f5f7;
  --bg-white: #ffffff;
  --card-hover: rgba(0,0,0,0.1);
  --dark: #000000;
  --dark-2: #111114;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --blue: #2997ff;
  --purple: #bf5af2;
  --green: #30d158;
  --line: rgba(0,0,0,0.08);
  --radius: 28px;
  --shadow: rgba(0,0,0,0.08);
  --nav-bg: rgba(22,22,23,0.85);
  --btn-bg: #000000;
  --btn-fg: #ffffff;
}

html[data-theme="dark"] {
  --bg: #050507;
  --bg-white: #0c0c0e;
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --line: rgba(255,255,255,0.12);
  --shadow: rgba(0,0,0,0.5);
  --card-hover: rgba(255,255,255,0.14);
  --btn-bg: #f5f5f7;
  --btn-fg: #000000;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.4s, color 0.4s;
}

.container { max-width: 1150px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 1000px; }

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: rgba(41,151,255,0.25); }

/* ---------- Barra de progreso ---------- */
#progressBar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--purple));
  z-index: 200;
  border-radius: 0 2px 2px 0;
}

/* ---------- Tipografía ---------- */
.section { padding: 120px 0; }

.section-title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-align: center;
  margin-bottom: 20px;
}

.section-title.left { text-align: left; }

.eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
  text-align: center;
}

.eyebrow.dark { color: var(--muted); text-align: center; }

/* El degradado se pinta con background-clip:text, que recorta el fondo a la
   silueta del texto del PROPIO elemento. splitHeadings() mueve el texto a
   spans hijos (.w > .w-in), y esos hijos heredan color:transparent pero no
   el fondo: resultado, palabras invisibles. Por eso el degradado se declara
   con una variable y se vuelve a aplicar en cada .w-in. */
.grad-text,
.grad-text-sec,
.grad-text-net {
  --grad: linear-gradient(110deg, var(--blue), var(--purple));
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.grad-text-sec { --grad: linear-gradient(110deg, #30d158, #2997ff); }
.grad-text-net { --grad: linear-gradient(110deg, #22d3ee, #6366f1); }

.grad-text .w-in,
.grad-text-sec .w-in,
.grad-text-net .w-in {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 980px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.25s, opacity 0.25s, background 0.25s, color 0.25s, box-shadow 0.25s;
  cursor: pointer;
}

.btn-light { background: #fff; color: #000; }
.btn-light:hover { background: #f0f0f2; transform: scale(1.03); }

.btn-ghost { border-color: rgba(255,255,255,0.35); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,0.12); }

.btn-dark { background: var(--btn-bg); color: var(--btn-fg); }
.btn-dark:hover { opacity: 0.85; transform: scale(1.02); }

.btn-outline-sec { border: 1px solid rgba(48,209,88,0.5); color: #30d158; }
.btn-outline-sec:hover { background: rgba(48,209,88,0.12); }

.w-full { width: 100%; }

/* ---------- NAVBAR ---------- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.nav-inner {
  max-width: 1150px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }

.brand-mark {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff;
}

.brand-text { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }

.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; }

.nav-links a { color: rgba(255,255,255,0.72); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover { color: #fff; }

.nav-links .nav-cta { padding: 8px 18px; border-radius: 980px; background: #fff; color: #000; font-weight: 600; }
.nav-links .nav-cta:hover { background: #f0f0f2; }

.nav-actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  width: 36px; height: 36px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
  display: grid;
  place-items: center;
}

.icon-btn:hover { background: rgba(255,255,255,0.2); }

.menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.menu-toggle span { width: 24px; height: 2px; background: #fff; transition: 0.3s; }

/* ---------- HERO ---------- */
.hero {
  min-height: 100vh;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  position: relative;
  padding: 160px 24px 110px;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 400px at 80% 0%, rgba(41,151,255,0.16), transparent 60%),
    radial-gradient(700px 400px at 15% 100%, rgba(191,90,242,0.14), transparent 60%);
  pointer-events: none;
}

.hero-inner { position: relative; max-width: 1150px; margin: 0 auto; width: 100%; text-align: center; }
.hero .eyebrow { color: var(--blue); }

.hero-title {
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin-bottom: 28px;
}

.hero-sub { max-width: 640px; margin: 0 auto 40px; color: rgba(255,255,255,0.72); font-size: clamp(1.05rem, 2vw, 1.25rem); }
.hero-sub strong { color: #fff; }

/* margin-top separa los botones de las dos tarjetas de camino: pegados
   se leían como un solo bloque de cuatro cosas. */
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 34px; margin-bottom: 56px; }

.hero-stats { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; margin-bottom: 72px; }

.stat strong {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, #fff, rgba(255,255,255,0.6));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat span { color: rgba(255,255,255,0.5); font-size: 0.85rem; }

/* Foto + glass cards */
.hero-visual { position: relative; max-width: 860px; margin: 0 auto; height: 330px; pointer-events: none; }

.hero-photo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.profile-photo {
  width: 210px; height: 210px;
  object-fit: cover;
  /* El recorte es un círculo, así que una foto vertical pierde arriba y
     abajo. Subimos el punto de anclaje para que quede la cara y no el
     torso, que es donde caería con el centro por defecto. */
  object-position: center 28%;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 60px rgba(41,151,255,0.35), 0 30px 60px rgba(0,0,0,0.5);
  animation: pulse-glow 4s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 40px rgba(41,151,255,0.3), 0 30px 60px rgba(0,0,0,0.5); }
  50% { box-shadow: 0 0 70px rgba(191,90,242,0.4), 0 30px 60px rgba(0,0,0,0.5); }
}

.glass-card {
  position: absolute;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  padding: 18px;
}

.card-code { left: 0; top: 10px; width: 42%; animation: float 7s ease-in-out infinite; }
.card-sec { right: 0; top: 40px; width: 34%; animation: float 7s ease-in-out infinite 1.2s; }

.glass-head { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.gdot { width: 9px; height: 9px; border-radius: 50%; }
.gdot.red { background: #ff5f57; }
.gdot.yellow { background: #febc2e; }
.gdot.green { background: #28c840; }
.glass-file { margin-left: 8px; font-size: 0.72rem; font-family: 'SF Mono', 'JetBrains Mono', monospace; color: rgba(255,255,255,0.55); }

.glass-code { font-family: 'SF Mono', 'JetBrains Mono', monospace; font-size: 0.66rem; line-height: 1.8; text-align: left; white-space: pre; color: rgba(255,255,255,0.9); }
.glass-code .k { color: #bf5af2; }
.glass-code .f { color: #2997ff; }
.glass-code .s { color: #30d158; }
.glass-code .b { color: #ffd60a; }
.glass-code .c { color: rgba(255,255,255,0.4); }

.shield { font-size: 1rem; }
.card-sec .glass-head { justify-content: space-between; }
.sec-rows { display: flex; flex-direction: column; gap: 12px; }
.sec-row { display: flex; justify-content: space-between; font-size: 0.75rem; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sec-row span { color: rgba(255,255,255,0.55); }
.sec-row b { font-weight: 700; color: #fff; font-family: 'SF Mono', monospace; }
.sec-row b.on { color: var(--green); }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

/* ---------- MARQUEE ---------- */
.marquee {
  background: #000;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  padding: 22px 0;
  white-space: nowrap;
}

.marquee-track {
  display: inline-flex;
  animation: marquee 32s linear infinite;
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.55);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- SOBRE MÍ ---------- */
.about { background: var(--bg); transition: background 0.4s; }

.about-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: start; }
.about-text .eyebrow { text-align: left; }
.about-text p { color: var(--muted); font-size: 1.02rem; margin-bottom: 18px; }
.about-text p strong { color: var(--text); font-weight: 600; }
.about-text .btn { margin-top: 8px; }

.side-title { font-size: 1rem; font-weight: 700; margin-bottom: 18px; }
.cert-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }

.cert {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 16px var(--shadow);
  transition: transform 0.25s, box-shadow 0.25s;
}

.cert:hover { transform: translateY(-3px); box-shadow: 0 10px 24px var(--shadow); }

.cert-logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; color: #fff; flex-shrink: 0; }
.cert-logo.g { background: linear-gradient(135deg, #4285f4, #34a853, #fbbc05, #ea4335); }
.cert-logo.c { background: linear-gradient(135deg, #2997ff, #0057b8); }
.cert strong { display: block; font-size: 0.92rem; }
.cert span { color: var(--muted); font-size: 0.8rem; }


/* ---------- PILARES ---------- */
.pillar { padding: 140px 0; }
.pillar-dev { background: var(--bg-white); transition: background 0.4s; }
.pillar-sec { background: #05070c; color: #fff; }
.pillar-sec .pillar-sub { color: rgba(255,255,255,0.65); }
.pillar-sec .section-title { color: #fff; }

.pillar-sub { text-align: center; max-width: 620px; margin: 0 auto 64px; color: var(--muted); font-size: 1.05rem; }

.pillar-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.pcard {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px 24px;
  background: var(--bg-white);
  transition: transform 0.3s, box-shadow 0.3s;
}

.pcard:hover { transform: translateY(-8px); box-shadow: 0 20px 40px var(--shadow); }

.pcard.sec { background: #0c111b; border-color: rgba(255,255,255,0.08); }
.pcard.sec h3 { color: #fff; }
.pcard.sec p { color: rgba(255,255,255,0.65); }

.pcard-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 20px; }
.pcard-icon.dev { background: rgba(41,151,255,0.12); }
.pcard-icon.sec { background: rgba(48,209,88,0.14); }
.pcard h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
.pcard p { color: var(--muted); font-size: 0.9rem; }

.pillar-cta { text-align: center; margin-top: 56px; }

/* ---------- EXPERIENCIA ---------- */
.experience { background: var(--bg); transition: background 0.4s; }

.timeline { position: relative; margin: 48px auto 0; max-width: 760px; }

.timeline::before {
  content: '';
  position: absolute;
  left: 12px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--blue), var(--purple));
}

.tl-item { position: relative; padding-left: 48px; padding-bottom: 40px; }

.tl-dot {
  position: absolute;
  left: 6px; top: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg-white);
  border: 3px solid var(--blue);
}

.tl-card { background: var(--bg-white); border: 1px solid var(--line); border-radius: 20px; padding: 26px; transition: transform 0.3s, box-shadow 0.3s; }
.tl-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px var(--shadow); }

.tl-date {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--blue);
  background: rgba(41,151,255,0.1);
  padding: 4px 12px;
  border-radius: 980px;
  margin-bottom: 12px;
}

.tl-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.tl-org { font-size: 0.85rem; font-weight: 600; color: var(--purple); margin-bottom: 8px; }
.tl-card p:last-child { color: var(--muted); font-size: 0.92rem; }

/* ---------- PROYECTOS ---------- */
.projects { background: var(--bg); transition: background 0.4s; }

.filters { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 36px 0 40px; }

.filter-btn {
  padding: 10px 22px;
  border-radius: 980px;
  border: 1px solid var(--line);
  background: var(--bg-white);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}

.filter-btn:hover { transform: translateY(-2px); border-color: var(--blue); }
.filter-btn.active { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }

.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.proj-card {
  background: var(--bg-white);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s;
  cursor: pointer;
}

.proj-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px var(--shadow); }

.proj-card.hidden { display: none; }

.proj-cover { height: 150px; display: grid; place-items: center; font-size: 3rem; position: relative; }

.proj-emoji { filter: drop-shadow(0 10px 16px rgba(0,0,0,0.25)); }

.cover-1 { background: linear-gradient(135deg, #2997ff, #4f46e5); }
.cover-2 { background: linear-gradient(135deg, #34d399, #0ea5e9); }
.cover-3 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.cover-4 { background: linear-gradient(135deg, #a855f7, #ec4899); }
.cover-6 { background: linear-gradient(135deg, #10b981, #059669); }
.cover-7 { background: linear-gradient(135deg, #ef4444, #7f1d1d); }

.proj-body { padding: 24px; }
.proj-body h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: 8px; }
.proj-body p { color: var(--muted); font-size: 0.9rem; margin-bottom: 16px; }

.proj-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.proj-tags span { background: var(--bg); border: 1px solid var(--line); color: var(--text); padding: 4px 12px; border-radius: 980px; font-size: 0.74rem; font-weight: 600; }

.proj-links a { text-decoration: none; color: var(--blue); font-size: 0.86rem; font-weight: 600; }
.proj-links a:hover { text-decoration: underline; }

/* ---------- LIGHTBOX ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 30px;
}

.lightbox.open { display: flex; }

.lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}

.lb-close {
  position: absolute;
  top: 24px; right: 28px;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  font-size: 1.4rem;
  width: 46px; height: 46px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}

.lb-close:hover { background: rgba(255,255,255,0.3); }

/* ---------- STACK ---------- */
.stack { background: var(--bg-white); transition: background 0.4s; }

.stack-group { margin-top: 56px; }

.stack-group-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }

.chip-grid { display: flex; flex-wrap: wrap; gap: 12px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  cursor: default;
}

.chip:hover { transform: translateY(-4px); border-color: rgba(41,151,255,0.4); box-shadow: 0 10px 24px var(--shadow); }
.chip i { font-size: 1.35rem; }
.chip.mono { font-family: 'SF Mono', 'JetBrains Mono', monospace; font-weight: 600; letter-spacing: -0.02em; }


/* ---------- IA ---------- */
.ai { background: #000; color: #fff; }
.ai .eyebrow { color: var(--green); }
.ai .pillar-sub { color: rgba(255,255,255,0.65); }

.ai-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }

.ai-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 28px 20px; text-align: center; transition: transform 0.3s, border-color 0.3s, background 0.3s; }
.ai-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.09); }

.ai-badge { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800; color: #fff; }
.b1 { background: linear-gradient(135deg, #ff8a3d, #ff5a1f); }
.b2 { background: linear-gradient(135deg, #10a37f, #0e7a60); }
.b3 { background: linear-gradient(135deg, #4285f4, #8ab4f8); }
.b4 { background: linear-gradient(135deg, #6e40c9, #a780f5); }
.b5 { background: linear-gradient(135deg, #ea4335, #fbbc05); }
.b6 { background: linear-gradient(135deg, #22d3ee, #0ea5e9); }
.b7 { background: linear-gradient(135deg, #30d158, #0a84ff); }

.ai-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.ai-card span { color: rgba(255,255,255,0.55); font-size: 0.8rem; }

/* ---------- SERVICIOS ---------- */
.services { background: var(--bg); transition: background 0.4s; }

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }

.svc { background: var(--bg-white); border: 1px solid var(--line); border-radius: 22px; padding: 32px 26px; transition: transform 0.3s, box-shadow 0.3s; }
.svc:hover { transform: translateY(-6px); box-shadow: 0 20px 40px var(--shadow); }
.svc-icon { font-size: 1.8rem; display: block; margin-bottom: 16px; }
.svc h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.svc p { color: var(--muted); font-size: 0.9rem; }

/* ---------- CONTACTO ---------- */
.contact { background: var(--bg-white); transition: background 0.4s; }

.contact-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; margin-top: 48px; }

.cinfo { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cinfo-icon { width: 44px; height: 44px; border-radius: 14px; background: var(--bg); display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0; }
.cinfo strong { font-size: 0.92rem; }
.cinfo p { color: var(--muted); font-size: 0.9rem; margin-top: 2px; }
.cinfo a { text-decoration: none; color: var(--muted); transition: color 0.2s; }
.cinfo a:hover { color: var(--blue); }

.contact-social { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.social-btn { padding: 12px 22px; border-radius: 980px; border: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: border-color 0.2s, transform 0.2s, color 0.2s; display: inline-block; color: var(--text); }
.social-btn:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }

.contact-form { background: var(--bg); border: 1px solid var(--line); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-white);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(41,151,255,0.15);
}

.form-status { font-size: 0.9rem; font-weight: 600; text-align: center; min-height: 20px; }
.form-status.ok { color: var(--green); }
.form-status.err { color: #ff453a; }

/* ---------- FOOTER ---------- */
footer { background: #000; color: #fff; padding: 64px 0 40px; text-align: center; }
.footer-name {
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
  background: linear-gradient(100deg, #fff 30%, var(--blue) 55%, var(--purple) 75%, #fff 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.footer-tag { color: rgba(255,255,255,0.55); font-size: 0.92rem; margin-bottom: 14px; }

.footer-contact {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  margin-bottom: 26px;
}

.footer-contact a { color: var(--blue); text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }
.footer-contact .sep { color: rgba(255,255,255,0.3); }

.footer-social { display: flex; justify-content: center; gap: 12px; margin-bottom: 34px; }

.footer-social a {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  transition: transform 0.25s, background 0.25s, color 0.25s, border-color 0.25s;
}

.footer-social a:hover {
  transform: translateY(-3px);
  color: #fff;
  background: rgba(41,151,255,0.18);
  border-color: rgba(41,151,255,0.6);
}

/* En pantallas estrechas los separadores sobran: cada dato en su línea. */
@media (max-width: 560px) {
  .footer-contact { flex-direction: column; gap: 6px; }
  .footer-contact .sep { display: none; }
}

/* ---------- FLOTANTES ---------- */
.wa-float {
  position: fixed;
  bottom: 26px; left: 26px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(37,211,102,0.45);
  z-index: 90;
  transition: transform 0.25s, box-shadow 0.25s;
}

.wa-float:hover { transform: scale(1.1); box-shadow: 0 12px 30px rgba(37,211,102,0.6); }

.top-btn {
  position: fixed;
  bottom: 30px; right: 26px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 1.3rem;
  cursor: pointer;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}

.top-btn.show { opacity: 1; pointer-events: auto; }
.top-btn:hover { transform: translateY(-4px); }

/* ---------- HERO: video + aurora ---------- */
.hero-video,
.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Visibilidad del vídeo del hero: se ajusta SOLO aquí. Suba el número para
   verlo más y bájelo si el texto blanco empieza a costar de leer. */
.hero { --hero-video-opacity: 0.40; }

.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--hero-video-opacity);
  filter: saturate(130%) contrast(1.05);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Velo oscuro para que el texto blanco tenga contraste. Aclarado un punto
     respecto al original (era 0.55 → 0.78) para que el vídeo se note más. */
  background: linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.70) 100%);
  pointer-events: none;
}

.hero-inner { z-index: 2; }

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}

.blob-1 {
  width: 520px; height: 520px;
  background: rgba(41,151,255,0.55);
  top: -120px; left: -120px;
  animation: blobMove 18s ease-in-out infinite;
}

.blob-2 {
  width: 420px; height: 420px;
  background: rgba(191,90,242,0.5);
  bottom: -100px; right: -80px;
  animation: blobMove 22s ease-in-out infinite reverse;
}

.blob-3 {
  width: 300px; height: 300px;
  background: rgba(48,209,88,0.35);
  top: 40%; left: 55%;
  animation: blobMove 26s ease-in-out infinite 4s;
}

@keyframes blobMove {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(60px, -40px) scale(1.15); }
  66% { transform: translate(-50px, 50px) scale(0.9); }
}

/* ---------- Logos en proyectos ---------- */
.proj-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.3));
}

.proj-logos i { font-size: 2.4rem; }
.proj-logos img { width: 44px; height: 44px; }

/* ---------- PROCESO ---------- */
.process { background: var(--bg); transition: background 0.4s; }

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.proc-step {
  background: var(--bg-white);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px 26px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.proc-step:hover { transform: translateY(-8px); box-shadow: 0 20px 40px var(--shadow); }

.proc-num {
  position: absolute;
  top: 12px; right: 20px;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(41,151,255,0.14);
}

.proc-icon { font-size: 2rem; margin-bottom: 16px; }
.proc-step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.proc-step p { color: var(--muted); font-size: 0.9rem; }

/* ---------- FAQ ---------- */
.faq { background: var(--bg); transition: background 0.4s; }

.faq-list { max-width: 720px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 14px; }

.faq-item {
  background: var(--bg-white);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  transition: box-shadow 0.3s, border-color 0.3s;
}

.faq-item.open { border-color: rgba(41,151,255,0.45); box-shadow: 0 12px 30px var(--shadow); }

.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}

.faq-q::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--blue);
  transition: transform 0.3s;
}

.faq-item.open .faq-q::after { transform: rotate(45deg); }

.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-a p { padding: 0 24px 20px; color: var(--muted); font-size: 0.92rem; }

/* ---------- REVEAL ----------
   Ojo: el ocultamiento va detrás de .js a propósito. Sin JavaScript
   (bloqueado, error de red, script roto) el contenido se ve tal cual
   en vez de quedar toda la página en opacity:0. */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.8s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1); }
.js .reveal.visible { opacity: 1; transform: translateY(0); }

/* Quien pide menos movimiento ve el contenido, no la animación. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .w-in { transform: none !important; transition: none; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .pillar-cards { grid-template-columns: repeat(2, 1fr); }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { gap: 40px; }
}

@media (max-width: 768px) {
  .section { padding: 90px 0; }
  .about-grid,
  .contact-wrap,
  .test-grid { grid-template-columns: 1fr; }

  .hero-stats { gap: 28px; }
  .hero-visual { height: 380px; }
  .card-code { width: 46%; }
  .card-sec { width: 38%; }
  .glass-code { font-size: 0.56rem; }

  .form-row { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .pillar-cards,
  .projects-grid,
  .ai-grid,
  .services-grid,
  .process-grid,
  .blog-grid { grid-template-columns: 1fr; }
  .hero-visual { height: 360px; }
  .card-code { width: 60%; }
  .card-sec { width: 52%; top: 140px; }
  .profile-photo { width: 160px; height: 160px; }
}

/* =========================================================
   MOTION ESTILO DUTEN
   ========================================================= */

/* Lenis: smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Video del hero: fade-in + zoom lento */
.hero-video video { opacity: 0; }
@keyframes heroFade { from { opacity: 0; } to { opacity: var(--hero-video-opacity); } }
@keyframes heroZoom { from { transform: scale(1.18); } to { transform: scale(1); } }
.hero.is-loaded .hero-video video {
  animation: heroFade 1.8s ease-out forwards,
             heroZoom 20s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .hero-video video { animation: none; opacity: var(--hero-video-opacity); }
}

/* Títulos palabra por palabra (DUTEN heading-slide) */
.w { display: inline-block; overflow: hidden; vertical-align: top; }
.w-in {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 0.85s cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: transform;
}
.hero-title.is-in .w-in,
.section-title.is-in .w-in { transform: none; }

/* Esquina cruzada en tarjetas (firma DUTEN) */
.crossed { position: relative; }
.crossed::after {
  content: '';
  position: absolute;
  top: 12px; left: 12px;
  width: 24px; height: 24px;
  border: 1px solid rgba(41,151,255,0.45);
  background:
    linear-gradient(135deg, transparent calc(50% - 1px), rgba(41,151,255,0.9) calc(50% - 1px), rgba(41,151,255,0.9) calc(50% + 1px), transparent calc(50% + 1px));
  pointer-events: none;
  z-index: 3;
}

/* Menú: subrayado deslizante */
.nav-links a:not(.nav-cta) { position: relative; }
.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; }

/* Botones: brillo al pasar el mouse */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.btn:hover::before { left: 130%; }

/* =========================================================
   BLOQUE 2026 · Dos caminos, tercer pilar y proyectos honestos
   ========================================================= */

/* ---------- Hero: los dos caminos ---------- */
.hero-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 620px;
  margin: 32px auto 0;
}

.path-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
  text-align: left;
  text-decoration: none;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(14px);
  color: #fff;
  transition: transform 0.3s cubic-bezier(0.2,0.6,0.2,1), border-color 0.3s, background 0.3s;
}

.path-card:hover {
  transform: translateY(-5px);
  border-color: rgba(41,151,255,0.75);
  background: rgba(41,151,255,0.14);
}

.path-kicker {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

.path-card strong { font-size: 1.06rem; font-weight: 700; letter-spacing: -0.01em; }
.path-meta { font-size: 0.8rem; color: rgba(255,255,255,0.62); }

/* ---------- Pilar 03: Telecomunicaciones ---------- */
.pillar-net { background: #05121a; color: #fff; }
.pillar-net .eyebrow { color: #22d3ee; }
.pillar-net .pillar-sub { color: rgba(255,255,255,0.66); }

.pcard.net { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.1); }
.pcard.net:hover { border-color: rgba(34,211,238,0.5); }
.pcard-icon.net { background: linear-gradient(135deg, #22d3ee, #6366f1); }

.btn-outline-net { border: 1px solid rgba(34,211,238,0.5); color: #22d3ee; }
.btn-outline-net:hover { background: rgba(34,211,238,0.12); }

/* ---------- Trayectoria: etiquetas y roles paralelos ---------- */
.pillar-sub.center { text-align: center; max-width: 680px; margin: 0 auto 12px; }

.tl-sub {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
  font-size: 0.88rem;
  color: var(--muted);
}

.tl-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

.tl-tags span {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 980px;
  background: rgba(41,151,255,0.1);
  border: 1px solid rgba(41,151,255,0.22);
  color: var(--blue);
}

/* ---------- Proyectos: origen y estado en vez de demos falsas ---------- */
.proj-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 980px;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff;
  backdrop-filter: blur(8px);
}

.proj-status {
  margin-top: 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 7px;
}

.proj-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}

/* Portadas de los proyectos añadidos */
.cover-9  { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.cover-10 { background: linear-gradient(135deg, #8b5cf6, #4c1d95); }
.cover-11 { background: linear-gradient(135deg, #f97316, #b45309); }

/* ---------- Sobre mí: acciones y logos de formación ---------- */


.cert-logo.b { background: linear-gradient(135deg, #0f766e, #115e59); }
.cert-logo.s { background: linear-gradient(135deg, #ef4444, #7f1d1d); }
.cert-logo.u {
  background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.about-side .side-title:not(:first-child) { margin-top: 34px; }


/* ---------- Responsive de lo nuevo ---------- */
@media (max-width: 768px) {
  .hero-paths { grid-template-columns: 1fr; max-width: 420px; }
  .path-card { padding: 16px 18px; }
}

/* ---------- Selector de idioma: los tres, menos el activo ---------- */
.lang-group { display: flex; align-items: center; gap: 6px; }

.lang-btn {
  width: auto;
  min-width: 38px;
  padding: 0 10px;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

/* hidden por sí solo no basta: los botones son flex y lo ignorarían. */
.lang-btn[hidden] { display: none; }

/* El pilar de Desarrollo tiene 5 tarjetas en vez de 4. Solo en pantallas
   anchas: por debajo manda el responsive general (2 columnas y luego 1). */
@media (min-width: 1025px) {
  /* 5 tarjetas en el contenedor estrecho salen a 174 px, muy angostas frente
     a los 223 px de los otros pilares. Este pilar usa el ancho completo. */
  .pillar-dev .container.narrow { max-width: 1150px; }
  .pillar-cards.five { grid-template-columns: repeat(5, 1fr); }
  .pillar-cards.five .pcard { padding: 26px 20px; }
  .pillar-cards.five .pcard h3 { font-size: 1rem; }
  .pillar-cards.five .pcard p { font-size: 0.86rem; }
}

/* =========================================================
   LOGOS PROPIOS (assets/logos)
   ========================================================= */

/* ---------- Fichas del Stack ---------- */
.chip img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: none;
}

/* ---------- Certificaciones y formación ---------- */
.cert-logo.img {
  background: #fff;
  border: 1px solid var(--line);
  padding: 5px;
}

.cert-logo.img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* En modo oscuro la placa blanca es lo que hace legibles los sellos. */
html[data-theme="dark"] .cert-logo.img { background: #fff; border-color: rgba(0,0,0,0.1); }

/* ---------- Sección de IA ---------- */
/* El degradado de color deja de tener sentido cuando dentro va el logo
   de la marca: se sustituye por una placa neutra que no compita. */
/* Los logos de marca sustituyen a los degradados de color: placa neutra
   que no compita. Se midio el brillo de los siete: ChatGPT (187),
   NotebookLM (207) y GitHub Copilot (160) son claros y necesitan fondo
   oscuro. Cursor es negro puro (brillo 0) y sobre este fondo desaparecia,
   asi que es el unico con placa blanca. */
.ai-badge {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.14);
  padding: 11px;
}

.ai-badge.placa-blanca {
  background: #fff !important;
  border-color: rgba(255,255,255,0.3);
}

.ai-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Logotipos anchos en Certificaciones y Formación: un wordmark como el de
   Universidad ISA (2,2:1) dentro de un cuadro de 42 px queda diminuto. */
.cert-logo.wide { width: 76px; border-radius: 10px; }

/* Logo de la empresa en la trayectoria. Solo lo tienen algunas entradas;
   las que no, simplemente no muestran nada. */
.tl-logo {
  display: inline-block;
  height: 18px;
  width: auto;
  max-width: 62px;
  object-fit: contain;
  vertical-align: -4px;
  margin-right: 8px;
  background: #fff;
  border-radius: 4px;
  padding: 1px 3px;
}

/* ---------- Formación: rejilla de instituciones ----------
   Con 13 entidades, una lista de filas altas alargaba la columna sin
   aportar nada: los logos se reconocen antes que el texto. */
.edu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
}

.edu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fichas cuadradas: así todas miden igual y el logo queda centrado de
     verdad, sin depender del alto de cada imagen. */
  aspect-ratio: 1 / 1;
  padding: 10px;
  background: var(--bg-white);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.edu-item:hover { transform: translateY(-3px); border-color: rgba(41,151,255,0.4); box-shadow: 0 8px 20px var(--shadow); }

/* Placa blanca: varios de estos logos son de tinta oscura o traen fondo
   propio, y en modo oscuro desaparecerían sin ella. */
/* display:flex y no grid a proposito. Con grid, la fila es auto y el
   max-height:100% de la imagen no puede resolverse contra ella, asi que el
   navegador lo ignora: un logo de 160 px se renderizaba a 64 px dentro de
   una caja de 42 y se salia de la ficha. En flex el porcentaje si resuelve
   contra la altura definida del contenedor. */
.edu-logo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  padding: 8px;
}

.edu-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* Formación ocupa todo el ancho, no la columna lateral. */
.edu-band { margin-top: 56px; }
.edu-band .side-title { margin-bottom: 18px; }

/* Formación ocupa todo el ancho de la sección, no la columna lateral. */
.edu-title { margin-top: 56px; margin-bottom: 18px; }

/* Logos reales en los botones de contacto, en vez de emojis. */
.social-btn { display: inline-flex; align-items: center; gap: 9px; }
.social-btn svg { flex: none; }

/* =========================================================
   RESPONSIVE · revisión completa
   Cada regla de aquí sale de una medición, no de una suposición.
   ========================================================= */

/* El español tiene palabras largas: "Telecomunicaciones" desbordaba su
   caja 8 px en el h3 de la trayectoria a 409 px de ancho. */
h1, h2, h3, h4, p, span, li, a, strong, b { overflow-wrap: break-word; }

/* ---------- Hero visual: apilado en móvil ----------
   La foto y las dos tarjetas de cristal están posicionadas en absoluto
   para que floten alrededor del retrato. Por debajo de 700 px no hay
   sitio: medido a 409 px, la tarjeta de código tapaba la foto 116×61 px y
   la de infraestructura 87×120 px, y además se solapaban entre ellas.
   Aquí se pasa a flujo normal, en columna.

   El corte está en 900 px y no en 700 por geometría: las dos tarjetas
   ocupan 42% + 34% del ancho y la foto son 210 px fijos, así que no
   solapan solo si 210 <= 0,24 × ancho, es decir a partir de unos 875 px
   de visual. Medido: a 768 px la tarjeta de código tapaba la foto
   77×76 px; a 1024 el solape baja a 36×115 y ahí ya es el efecto de
   capas buscado. */
@media (max-width: 900px) {
  .hero-visual {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    pointer-events: auto;
  }

  .hero-photo,
  .card-code,
  .card-sec {
    position: static;
    top: auto; left: auto; right: auto;
    transform: none;
    width: 100%;
    max-width: 330px;
    animation: none;          /* el flotar solo tiene sentido superpuesto */
  }

  .hero-photo { order: -1; }

  /* Con la tarjeta a ancho completo el código ya no necesita achicarse
     a 0,56rem, que eran 9 px ilegibles. */
  .glass-code { font-size: 0.78rem; }
  .profile-photo { width: 176px; height: 176px; }
}

/* ---------- Objetivos táctiles ----------
   En pantallas táctiles los enlaces del menú medían 17 px de alto y el
   botón de menú 28. El mínimo recomendado es 44. */
/* Se incluye max-width por si acaso: una ventana estrecha de escritorio o
   un portátil táctil no siempre declaran pointer:coarse, y ahí el dedo
   necesita el mismo espacio. */
@media (hover: none), (pointer: coarse), (max-width: 768px) {
  .nav-links a:not(.nav-cta) { display: block; padding: 12px 6px; }
  .nav-links li { padding: 2px 0; }
  .nav-links .nav-cta { padding: 15px 24px; }
  .icon-btn { width: 44px; height: 44px; }
  .lang-btn { min-width: 46px; height: 44px; }
  .menu-toggle { padding: 14px 10px; }
  .filter-btn { padding: 13px 20px; }
  .social-btn { padding: 13px 18px; }
  .faq-q { padding-top: 20px; padding-bottom: 20px; }
  .footer-social a { width: 48px; height: 48px; }
}

/* ---------- Móvil estrecho ---------- */
@media (max-width: 420px) {
  .section { padding: 72px 0; }
  .container { padding: 0 18px; }
  .hero { padding: 130px 18px 90px; }
  .hero-stats { gap: 22px 30px; }
  .stat strong { font-size: 1.7rem; }
  /* Dos por fila en vez de cuatro apretadas */
  .edu-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .filters { gap: 8px; }
  .footer-name { font-size: 1.45rem; }
}

/* ---------- Logos del Stack en modo oscuro ----------
   Las fichas siguen al tema, así que en oscuro su fondo es rgb(5,5,7).
   Se midió el brillo de los 30 logos: los de tinta oscura (GitHub 0,
   Next.js 0, Huawei 32, Issabel 77, Grandstream 81, MySQL 96, Fortinet 96)
   desaparecían por completo. Llevan placa blanca todos MENOS los seis
   claros —Android Studio 227, Cisco 211, VS Code 210, JavaScript 208,
   Power BI 180, WordPress 175—, que sobre blanco desaparecerían ellos. */
html[data-theme="dark"] .chip img:not(.logo-claro) {
  background: #fff;
  border-radius: 5px;
  padding: 2px;
  box-sizing: content-box;
}

/* ---------- Barra de navegación: hamburguesa por debajo de 1024 ----------
   Medido a 958 px: marca 89 + enlaces 694 + acciones 128 más los espacios
   y el padding daban 967 sobre 958 de ancho. El botón de tema quedaba
   cortado y "Angel Firpo" se partía en dos líneas. Con siete enlaces, el
   CTA y tres botones, la barra necesita unos 1000 px para respirar. */
@media (max-width: 1024px) {
  .nav-links {
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: rgba(22,22,23,0.98);
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 20px 0 28px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transform: translateY(-140%);
    transition: transform 0.35s ease;
  }

  .nav-links.active { transform: translateY(0); }
  .nav-links li { padding: 4px 0; width: 100%; text-align: center; }
  /* En el desplegable cada enlace ocupa toda la fila: así se puede pulsar
     sin apuntar a 17 px de texto. */
  .nav-links a:not(.nav-cta) { display: block; padding: 12px 6px; }
  .menu-toggle { display: flex; }
}

/* El nombre de la marca no debe partirse nunca. */
.brand-text { white-space: nowrap; }

/* Los títulos van como texto bajo el titular, no como etiqueta de cada
   ficha: la rejilla se queda solo con logos, que es como se pidió. */
.edu-titulos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: -6px 0 20px;
  font-size: 0.9rem;
  color: var(--muted);
}

.edu-titulos strong { color: var(--text); font-weight: 700; }
.edu-titulos .sep { color: var(--line); }

@media (max-width: 560px) {
  .edu-titulos { flex-direction: column; gap: 3px; }
  .edu-titulos .sep { display: none; }
}

/* =========================================================
   CARRUSEL DE CAPTURAS
   Las imagenes NO se amplian al pulsar: se ven solo aqui, en pequeno,
   como se pidio. No llevan data-lightbox, asi que el visor no se activa.
   ========================================================= */
.proj-cover.shots {
  display: block;
  padding: 0;
  overflow: hidden;
  background: #0c0c0e;
  cursor: default;
}

/* width:100% en el track es imprescindible: sin el, el ancho del track lo
   decide su contenido y el width:100% de cada diapositiva resuelve contra
   una anchura indefinida, es decir a cero. Medido: la diapositiva salia
   0x150 y la portada quedaba vacia. */
.shots-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.shots-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Arriba y no al centro: en una captura, la cabecera y el contenido
     principal viven en la parte superior. */
  object-position: top center;
}

/* Flechas: solo aparecen al pasar por la tarjeta, para no tapar la captura. */
.shots-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s, background 0.25s;
  z-index: 3;
}

.shots-nav.prev { left: 8px; }
.shots-nav.next { right: 8px; }
.proj-card:hover .shots-nav { opacity: 1; }
.shots-nav:hover { background: rgba(41,151,255,0.75); }
.shots-nav:focus-visible { opacity: 1; outline: 2px solid var(--blue); outline-offset: 2px; }

.shots-dots {
  position: absolute;
  bottom: 9px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 3;
}

.shots-dots b {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  transition: background 0.25s, width 0.25s;
}

.shots-dots b.on { background: #fff; width: 14px; border-radius: 3px; }

/* Un solo pantallazo: sin flechas ni puntos, no hay nada que recorrer. */
.proj-cover.shots.unica .shots-nav,
.proj-cover.shots.unica .shots-dots { display: none; }

/* En tactil las flechas no pueden depender del hover. */
@media (hover: none), (pointer: coarse) {
  .shots-nav { opacity: 1; width: 34px; height: 34px; }
}

/* Varias empresas en una portada: la tarjeta de redes cubre cuatro. */
.proj-badges {
  position: absolute;
  bottom: 10px; right: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  max-width: calc(100% - 20px);
  z-index: 3;
}

.proj-badges .proj-badge { position: static; bottom: auto; right: auto; font-size: 0.62rem; padding: 4px 9px; }

/* Las capturas de sitios web llevan el titulo a media altura del hero, no
   arriba: encuadrarlas por el centro es lo que hace que se reconozca la
   pagina. Las de aplicacion siguen ancladas arriba. */
.shots-track img.centrada { object-position: center center; }