:root{
  /* Colores y tokens */
  --bg: #0b1020;
  --bg-soft: #121a35;
  --panel: #141b2d;
  --panel-2:#0f1626;
  --text:#e8eefb;
  --muted:#a9b3cf;
  --primary:#5cc8ff;
  --primary-contrast:#071421;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --container: min(1100px, 92%);
  --ff: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;

  /* Escala tipográfica en rem */
  --fs-span: 0.9rem solid bold red 
  --fs--1: 0.95rem;  /* texto chico */
  --fs-0:  1.00rem;  /* cuerpo base */
  --fs-1:  1.35rem;  /* subtítulos */
  --fs-2:  1.90rem;  /* títulos */
  --fs-3:  2.6rem;  /* títulos grandes */
  --fs-lead: 1rem; /* textos destacados */
}

/* Tablet en adelante */
@media (min-width: 640px){
  :root{
    --fs--1: 1.00rem;
    --fs-0:  1.05rem;
    --fs-1:  1.50rem;
    --fs-2:  2.15rem;
    --fs-3:  3.00rem;
    --fs-lead: 1.20rem;
  }
}

/* Desktop amplio */
@media (min-width: 1024px){
  :root{
    --fs--1: 1.05rem;
    --fs-0:  1.125rem;
    --fs-1:  1.70rem;
    --fs-2:  2.40rem;
    --fs-3:  2.20rem;
    --fs-lead: 1.25rem;
  }
}

body{
  font-family: var(--ff);
  font-size: var(--fs-0);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, #1a2752, transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, #13213f, transparent 55%),
    var(--bg);
  min-height: 100dvh;
}

.container{ width: var(--container); margin-inline: auto; }
.section{ padding: 56px 0; }
.section.alt{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-block: 1px solid rgba(255,255,255,.06);
}

/* Header */
.header{
  position: sticky; top: 0; z-index: 10; backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.saludo{ font-size: var(--fs-3); padding-top: 18px; }
.yo{
  color: var(--primary);
  font-size: 1.15em; /* 15% más grande que el h1 */
  font-weight: 700;  /* opcional */
}
.lead{ color: var(--muted); margin-top: 6px; font-size: var(--fs-lead); }

/* aplica a cualquier span dentro de un p */
p .marca {
  font-size: 0.95rem;
  font-weight: bold;   /* también podés usar 700 */
  color: red;
}


/* Tarjetas y grillas */
.tech-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px){ .tech-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .tech-grid{ grid-template-columns: 1fr; } }

.card{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover{
  transform: scale(1.05);
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
}
.center{ display:flex; flex-direction: column; align-items:center; gap: 10px; text-align:center; }
.logo img{ filter: drop-shadow(0 6px 20px rgba(0,0,0,.45)); }

/* Formulario */
.form{ display:grid; gap: 10px; margin-top: 10px; }
.field{ font-weight: 500; font-size: var(--fs--1); }
.form input, .form textarea{
  background:#0d1628; color: var(--text);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 10px 12px; font-size: var(--fs-0);
}
.form textarea{ resize: vertical; min-height: 88px; }
.form-actions{ display:flex; gap:10px; margin-top: 4px; flex-wrap: wrap; }

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  background:var(--primary); color: var(--primary-contrast); font-weight:600; box-shadow: var(--shadow);
  font-size: var(--fs-0);
}
.btn:hover{ filter: brightness(1.05); }
.btn:focus-visible{ outline: 3px solid rgba(92,200,255,.5); outline-offset: 2px; }
.btn.btn-outline{ background: transparent; color: var(--text); border-color: rgba(255,255,255,.18); }

/* Listado dinámico */
.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
@media (max-width: 900px){ .cards{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .cards{ grid-template-columns: 1fr; } }

.card-activity{ display:flex; flex-direction: column; gap:10px; }
.card-activity img{
  width:100%; height: 180px; object-fit: cover;
  border-radius: 12px; border:1px solid rgba(255,255,255,.06);
}
.card-activity .actions{ display:flex; justify-content:flex-end; gap:8px; }

/* Ajustes para las cards de proyectos */
#proyectos .card-activity {
  padding: 1rem;               /* menos padding */
  gap: 0.6rem;                 /* menos espacio interno */
  font-size: var(--fs--1);     /* tipografía un poco más chica */
}

#proyectos .card-activity img {
  height: 140px;               /* más bajas que las actividades */
}

#proyectos h3 {
  font-size: var(--fs-0);      /* títulos un poco más chicos */
  margin-bottom: 0.3rem;
}

#proyectos .lead {
  font-size: var(--fs--1);     /* texto de apoyo más compacto */
}


/* Estados y footer */
.error{ color: #ff9aa2; min-height: 1lh; font-size: var(--fs--1); }
.help{ color: var(--muted); font-size: var(--fs--1); }
.footer{ color: var(--muted); padding: 36px 0 56px; text-align:center; font-size: var(--fs--1); }

/* Botón "deshabilitado" accesible para placeholders */
.btn[aria-disabled="true"] {
  opacity: .55;
  pointer-events: none;
}
/* === Proyectos en 2 columnas === */
#proyectos .cards {
  grid-template-columns: repeat(2, 1fr);
}

/* Mantener buena lectura en pantallas chicas */
@media (max-width: 640px){
  #proyectos .cards {
    grid-template-columns: 1fr;
  }
}

/* Centrar la última card SOLO si el total es impar */
#proyectos .cards > :nth-last-child(1):nth-child(odd) {
  grid-column: 1 / -1;
  max-width: 640px;
  justify-self: center;
}

/* Manito de saludo */
.hand{
  display: inline-block;
  margin-right: .45rem;
  vertical-align: middle;
  transform-origin: 70% 70%;
  /* animación suave al cargar (2 veces) */
  animation: wave .9s ease-in-out 2 .2s both;
  font-size: 1em; /* hereda del h1, queda proporcionado */
}

/* Animación de onda */
@keyframes wave{
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(14deg); }
  30%  { transform: rotate(-8deg); }
  45%  { transform: rotate(12deg); }
  60%  { transform: rotate(-4deg); }
  75%  { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}

/* Respetar usuarios con reduce motion */
@media (prefers-reduced-motion: reduce){
  .hand{ animation: none; }
}

/* (Opcional) que salude al pasar el mouse */
.saludo:hover .hand{
  animation: wave .9s ease-in-out 1;
}