/* ============================================================
   ESTILOS DEL PORTAFOLIO — Colomer.dev
   Diseño idéntico a la referencia; nomenclatura en español.
   ============================================================ */

:root{
  --bg:#0F172A;
  --bg-2:#121E38;
  --bg-3:#0E2A3F;
  --border:#24324D;
  --text:#F8FAFC;
  --muted:#94A3B8;
  --dim:#64748B;
  --accent:#38BDF8;
  --accent-deep:#0EA5E9;
  --web:#38BDF8;
  --app:#34D399;
  --data:#A78BFA;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --maxw:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.contenedor{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.antetitulo{
  font-family:var(--font-mono);
  font-size:.82rem;
  color:var(--accent);
  letter-spacing:.04em;
  margin-bottom:14px;
  display:inline-block;
}
h2.titulo_seccion{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.8rem,4vw,2.6rem);
  line-height:1.1;
  margin-bottom:14px;
  letter-spacing:-.02em;
}
.intro_seccion{color:var(--muted);max-width:560px;margin-bottom:44px}

/* NAVEGACIÓN */
header.barra_navegacion{
  position:sticky;top:0;z-index:50;
  background:rgba(15,23,42,.78);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.barra_navegacion_interior{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-family:var(--font-display);font-weight:600;font-size:1.18rem;letter-spacing:-.01em}
.logo .corchete{color:var(--accent);font-family:var(--font-mono);font-weight:500}
.menu_enlaces{display:flex;align-items:center;gap:30px}
.menu_enlaces a.enlace{color:var(--muted);font-size:.94rem;transition:color .2s}
.menu_enlaces a.enlace:hover{color:var(--text)}
.boton{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-weight:500;font-size:.94rem;
  padding:10px 20px;border-radius:30px;cursor:pointer;transition:all .2s;
  border:1px solid transparent;
}
.boton_primario{background:var(--accent);color:#0B1120}
.boton_primario:hover{background:#7DD3FC;transform:translateY(-1px)}
.boton_fantasma{border-color:var(--border);color:var(--text)}
.boton_fantasma:hover{border-color:var(--accent);color:var(--accent)}
.boton_menu{display:none;background:none;border:0;color:var(--text);cursor:pointer;padding:6px}
.boton_menu svg{width:26px;height:26px}

/* PORTADA (HERO) */
.portada{padding:clamp(56px,9vw,108px) 0 clamp(48px,7vw,84px)}
.portada_rejilla{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.portada h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.1rem,5.2vw,3.5rem);line-height:1.06;letter-spacing:-.03em;
  margin-bottom:22px;
}
.portada h1 .resaltado{color:var(--accent)}
.portada p.entradilla{color:var(--muted);font-size:1.08rem;max-width:480px;margin-bottom:30px}
.portada_acciones{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px}

/* TERMINAL */
.terminal{
  background:#0B1424;border:1px solid var(--border);border-radius:14px;
  overflow:hidden;box-shadow:0 24px 60px -24px rgba(0,0,0,.65);
}
.terminal_barra{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--border);background:#0E1830}
.terminal_barra i{width:11px;height:11px;border-radius:50%;display:inline-block}
.terminal_barra .rojo{background:#FF5F57}.terminal_barra .amarillo{background:#FEBC2E}.terminal_barra .verde{background:#28C840}
.terminal_barra span{margin-left:8px;font-family:var(--font-mono);font-size:.74rem;color:var(--dim)}
.terminal_cuerpo{padding:22px 20px;font-family:var(--font-mono);font-size:.86rem;line-height:1.85}
.terminal_cuerpo .comentario{color:var(--dim)}
.terminal_cuerpo .clave{color:var(--accent)}
.terminal_cuerpo .cadena{color:#34D399}
.terminal_cuerpo .puntuacion{color:var(--muted)}
.terminal_cuerpo .indicador{color:var(--accent)}
.cursor{display:inline-block;width:8px;height:1.05em;background:var(--accent);vertical-align:-2px;animation:parpadeo 1.1s steps(2) infinite}
@keyframes parpadeo{0%,50%{opacity:1}51%,100%{opacity:0}}

/* SECCIONES */
section.bloque{padding:clamp(56px,8vw,96px) 0;border-top:1px solid var(--border)}

/* PROYECTOS */
.filtros{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.filtro_categoria{
  font-family:var(--font-mono);font-size:.82rem;color:var(--muted);
  background:none;border:1px solid var(--border);border-radius:30px;padding:8px 18px;cursor:pointer;transition:all .2s;
}
.filtro_categoria:hover{color:var(--text);border-color:var(--dim)}
.filtro_categoria.activo{color:#0B1120;background:var(--accent);border-color:var(--accent)}
.rejilla_proyectos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tarjeta_proyecto{
  background:var(--bg-2);border:1px solid var(--border);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s,border-color .25s;
}
.tarjeta_proyecto:hover{transform:translateY(-5px);border-color:var(--accent)}
.tarjeta_media{
  aspect-ratio:16/10;background:linear-gradient(135deg,#0E2036,#0B1626);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-bottom:1px solid var(--border);
}
.tarjeta_media img{width:100%;height:100%;object-fit:cover;display:block}
.tarjeta_media .marcador{font-family:var(--font-mono);font-size:.78rem;color:var(--dim);text-align:center;padding:0 18px}
.tarjeta_media .marcador b{display:block;color:var(--muted);font-size:1.4rem;margin-bottom:6px}
.tarjeta_cuerpo{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.etiqueta{
  align-self:flex-start;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.03em;
  padding:4px 10px;border-radius:6px;text-transform:lowercase;
}
.etiqueta.web{color:var(--web);background:rgba(56,189,248,.12)}
.etiqueta.app{color:var(--app);background:rgba(52,211,153,.12)}
.etiqueta.datos{color:var(--data);background:rgba(167,139,250,.12)}
.tarjeta_proyecto h3{font-family:var(--font-display);font-weight:600;font-size:1.18rem;letter-spacing:-.01em}
.tarjeta_proyecto p{color:var(--muted);font-size:.92rem;flex:1}
.tecnologias{display:flex;flex-wrap:wrap;gap:6px}
.chip_tecnologia{font-family:var(--font-mono);font-size:.68rem;color:var(--dim);border:1px solid var(--border);border-radius:5px;padding:3px 8px}

/* SERVICIOS */
.servicios_rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.servicio{background:var(--bg-2);border:1px solid var(--border);border-radius:16px;padding:30px 26px;transition:border-color .25s}
.servicio:hover{border-color:var(--accent)}
.servicio_icono{width:52px;height:52px;border-radius:13px;background:var(--bg-3);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.servicio_icono svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.8}
.servicio h3{font-family:var(--font-display);font-weight:600;font-size:1.28rem;margin-bottom:10px;letter-spacing:-.01em}
.servicio p{color:var(--muted);font-size:.95rem}

/* SOBRE MÍ */
.sobre_rejilla{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.sobre p{color:var(--muted);font-size:1.05rem;margin-bottom:18px}
.sobre p .resaltado{color:var(--text);font-weight:500}
.sobre_tarjeta{
  background:var(--bg-2);border:1px solid var(--border);border-radius:16px;padding:34px;
  font-family:var(--font-mono);font-size:.9rem;line-height:2;
}
.sobre_tarjeta .fila{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed var(--border)}
.sobre_tarjeta .fila:last-child{border-bottom:0}
.sobre_tarjeta .clave_dato{color:var(--dim)}
.sobre_tarjeta .valor_dato{color:var(--accent)}

/* CONTACTO */
.contacto{text-align:center;border-top:1px solid var(--border);padding:clamp(64px,9vw,110px) 0}
.contacto h2{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,5vw,3.1rem);letter-spacing:-.02em;margin-bottom:16px}
.contacto h2 .resaltado{color:var(--accent)}
.contacto p{color:var(--muted);max-width:480px;margin:0 auto 32px;font-size:1.06rem}
.contacto_acciones{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:34px}
.contacto_meta{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;font-family:var(--font-mono);font-size:.88rem;color:var(--muted)}
.contacto_meta a:hover{color:var(--accent)}

/* PIE DE PÁGINA */
footer{border-top:1px solid var(--border);padding:28px 0}
.pie_interior{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--dim);font-family:var(--font-mono)}

/* REVELAR AL HACER SCROLL */
.revelar{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.revelar.visible{opacity:1;transform:none}

/* RESPONSIVE */
@media(max-width:900px){
  .portada_rejilla{grid-template-columns:1fr;gap:40px}
  .sobre_rejilla{grid-template-columns:1fr;gap:34px}
  .rejilla_proyectos,.servicios_rejilla{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .menu_enlaces{
    position:fixed;inset:68px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--border);padding:10px 24px 22px;
    transform:translateY(-130%);transition:transform .3s;
  }
  .menu_enlaces.abierto{transform:translateY(0)}
  .menu_enlaces a.enlace{padding:14px 0;border-bottom:1px solid var(--border);font-size:1rem}
  .menu_enlaces .boton{margin-top:14px;justify-content:center}
  .boton_menu{display:block}
  .rejilla_proyectos,.servicios_rejilla{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .revelar{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}