/* ============================================================
   alexvarillas.com
   Layout: Todo en una sola composición vertical compacta
   — foto → rol → nombre → tagline → cards — todo a la vista
   Tipografía: Bricolage Grotesque + Syne
   Acento: #E8A200
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,700;12..96,800&family=Syne:wght@400;500;600;700&display=swap');

:root {
  --bg:        #0A0A0A;
  --bg-card:   #141414;
  --border:    #202020;
  --border-lo: #181818;

  --text-hi:   #EDEDED;
  --text-mid:  #686868;
  --text-lo:   #333333;

  --amber:     #E8A200;
  --amber-dim: rgba(232,162,0,0.07);

  --navel:     #4A78DC;
  --navel-dim: rgba(74,120,220,0.07);

  --blue:     #006CE8;
  --blue-dim: rgba(0, 108, 232, 0.07);

  --f-display: 'Bricolage Grotesque', sans-serif;
  --f-ui:      'Syne', sans-serif;

  --ease: cubic-bezier(0.16,1,0.3,1);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg);
  color: var(--text-hi);
  font-family: var(--f-ui);
  overflow-x: hidden;
}

/* Grain sutil */
body::after {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.028;
  pointer-events: none;
  z-index: 999;
}

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

/* ── Contenedor angosto — como raulmerchan ── */
.container {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 clamp(20px,5vw,48px);
}

/* ── Reveal on scroll ── */
.reveal {
  opacity:0;
  transform:translateY(16px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.reveal.is-visible { opacity:1; transform:translateY(0); }
.rd1 { transition-delay: 60ms; }
.rd2 { transition-delay: 150ms; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
  .reveal { opacity:1; transform:none; }
}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}


/* ============================================================
   HEADER — mínimo, fijo
   ============================================================ */
.site-header {
  position: fixed;
  top:0; left:0; right:0;
  z-index: 100;
  padding: 18px 0;
  transition: background .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(10,10,10,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border-lo);
}
.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.header-logo {
  font-family: var(--f-ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mid);
  transition: color .18s ease;
}
.header-logo:hover { color:var(--text-hi); }

.header-nav {
  display:flex;
  align-items:center;
  gap:28px;
}
.header-nav a {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mid);
  transition: color .18s ease;
}
.header-nav a:hover { color:var(--text-hi); }


/* ============================================================
   PÁGINA — todo en una sola columna centrada
   ============================================================ */
.page-wrap {
  /* Empuja desde el header fijo */
  padding-top: 80px;
  /* Padding bottom mínimo */
  padding-bottom: 60px;
}


/* ============================================================
   HERO — compacto, centrado
   ============================================================ */
.hero {
  text-align: center;
  /* No 100vh — solo el espacio que necesita el contenido */
  padding: clamp(40px, 7vh, 72px) 0 clamp(32px, 5vh, 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Avatar pequeño arriba — como el logotipo en raulmerchan */
.hero-photo-wrap {
  animation: fadeIn .7s var(--ease) both;
  animation-delay: .05s;
}

.hero-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
  margin: 0 auto;
}
.hero-photo img { width:100%; height:100%; object-fit:cover; }

.photo-label {
  position: absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-lo);
}

/* Pill de rol */
.hero-role {
  display:inline-flex;
  align-items:center;
  gap: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px 14px;
  font-family: var(--f-ui);
  font-size: .76rem;
  font-weight: 500;
  color: var(--text-mid);
  letter-spacing: .04em;

  animation: fadeIn .7s var(--ease) both;
  animation-delay: .12s;
}
.hero-role-dot {
  width:7px; height:7px;
  border-radius:50%;
  background: var(--amber);
  flex-shrink:0;
}

/* Nombre — grande, protagonista */
.hero-name {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 10vw, 3.8rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--text-hi);

  animation: fadeUp .85s var(--ease) both;
  animation-delay: .18s;
}

/* Tagline — mixed weight igual que raulmerchan:
   palabras de "relleno" gris/300 + palabras clave blancas/700 */
.hero-tagline {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 3.8vw, 1.2rem);
  font-weight: 200;
  line-height: 1.2;
  color: var(--text-mid);
  letter-spacing: -.01em;

  animation: fadeUp .85s var(--ease) both;
  animation-delay: .28s;
}
.hero-tagline strong {
  font-weight: 500;
  color: var(--text-hi);
}


/* ============================================================
   CARDS — inmediatamente después del hero, sin sección separada
   Icono app flotando encima, igual que raulmerchan
   ============================================================ */
.projects-section {
  /* Sin padding-top enorme — sólo el espacio para los iconos flotantes */
  padding-top: 44px;
}

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

/* Wrapper — contexto para el icono absoluto */
.card-wrap {
  position: relative;
  padding-top: 40px; /* espacio para que el icono no se corte */
}

/* Card */
.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-lo);
  border-radius: 18px;
  padding: 44px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  min-height: 240px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}

/* Card */
.card2 {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-lo);
  border-radius: 18px;
  padding: 44px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  min-height: 240px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}

/* Línea de color en el top — solo en hover/activa */
.card::before {
  content:'';
  position:absolute;
  top:0; left:18px; right:18px;
  height:1px;
  border-radius:1px;
  background: var(--navel);
  opacity:0;
  transition: opacity .3s ease;
}

/* Línea ámbar en el top — solo en hover/activa */
.card2::before {
  content:'';
  position:absolute;
  top:0; left:18px; right:18px;
  height:1px;
  border-radius:1px;
  background: var(--blue);
  opacity:0;
  transition: opacity .3s ease;
}

/* Card */
.card2 {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-lo);
  border-radius: 18px;
  padding: 44px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  min-height: 240px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}

/* Línea ámbar en el top — solo en hover/activa */
.card2::before {
  content:'';
  position:absolute;
  top:0; left:18px; right:18px;
  height:1px;
  border-radius:1px;
  background: var(--blue);
  opacity:0;
  transition: opacity .3s ease;
}

/* Hover — card activa */
.card-wrap.active:hover .card {
  border-color: rgba(74,120,220,.18);
  background: var(--navel-dim);
}
.card-wrap.active:hover .card::before { opacity:1; }

.card-wrap.active:hover .card2 {
  border-color: rgba(0, 108, 232, 0.18);
  background: var(--blue-dim);
}
.card-wrap.active:hover .card2::before { opacity:1; }

/* Card WIP — apagada */
.card.wip { opacity: .8; }

/* Icono app flotando */
.card-icon {
  position:absolute;
  top:0; left:50%;
  transform: translateX(-50%) translateY(-50%);
  width:72px; height:72px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
  z-index:2;
  transition: box-shadow .3s ease;
}
.card-icon img { width:100%; height:100%; object-fit:cover; }


.card-wrap.active:hover .card-icon {
  box-shadow: 0 8px 28px rgba(74,120,220,.14);
}

/* Badge */
.badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family: var(--f-ui);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
}
.badge::before {
  content:''; width:5px; height:5px;
  border-radius:50%; flex-shrink:0;
}
.badge-on {
  background:rgba(74,120,220,.08);
  color:var(--navel);
  border:1px solid rgba(74,120,220,.2);
}
.badge-on::before { background:var(--navel); }
.badge-off {
  background:rgba(255,255,255,.03);
  color:rgb(107, 107, 107);
  border:1px solid var(--border-lo);
}
.badge-off::before { background:var(--text-lo); }

.badge2 {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family: var(--f-ui);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
}
.badge2::before {
  content:''; width:5px; height:5px;
  border-radius:50%; flex-shrink:0;
}
.badge-on2 {
  background:rgba(0, 108, 232, 0.08);
  color:var(--blue);
  border:1px solid rgba(0, 108, 232, 0.2);
}
.badge-on2::before { background:var(--blue); }
.badge-off {
  background:rgba(255,255,255,.03);
  color:rgb(107, 107, 107);
  border:1px solid var(--border-lo);
}
.badge-off::before { background:var(--text-lo); }

/* Nombre proyecto */
.card-name {
  font-family: var(--f-display);
  font-size: clamp(1.3rem,3vw,1.75rem);
  font-weight: 700;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--text-hi);
}

/* Descripción */
.card-desc {
  font-size: .875rem;
  line-height:1.65;
  color:var(--text-mid);
  max-width:280px;
  flex:1;
}

/* Botón pill */
.card-btn {
  display:inline-block;
  margin-top:4px;
  padding: 9px 22px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--f-ui);
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-hi);
  letter-spacing:.02em;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
}
.card-wrap.active:hover .card-btn {
  background: rgba(74,120,220,.1);
  border-color: rgba(74,120,220,.35);
  color: var(--navel);
}

.card-btn2 {
  display:inline-block;
  margin-top:4px;
  padding: 9px 22px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--f-ui);
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-hi);
  letter-spacing:.02em;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
}

.card-wrap.active:hover .card-btn2 {
  background: rgba(0, 108, 232, 0.1);
  border-color: rgba(0, 108, 232, 0.35);
  color: var(--blue);
}

.card-btn-wip {
  opacity:.3;
  cursor:not-allowed;
  pointer-events:none;
}


/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  margin-top: 64px;
  padding: 28px 0;
  border-top: 1px solid var(--border-lo);
}
.footer-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.footer-copy {
  font-size:.76rem;
  color:var(--text-lo);
}
.footer-socials {
  display:flex;
  align-items:center;
  gap:10px;
}
.social-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px; height:34px;
  border-radius:8px;
  border:1px solid var(--border-lo);
  color:var(--text-lo);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.social-link:hover {
  color:var(--text-hi);
  border-color:var(--border);
  background:rgba(255,255,255,.04);
}
.social-link svg { width:15px; height:15px; }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:640px) {
  .hero { gap:14px; }
  .hero-photo { width:120px; height:120px; }

  .projects-grid { grid-template-columns:1fr; }
  .rd2 { margin-top: 50px;}

  .footer-inner { flex-direction:column; align-items:flex-start; }
}
@media (max-width:440px) {
  .header-nav { display:none; }
  .site-footer { text-align:center; }
  .footer-inner { flex-direction:column; align-items:center; }
}