/* --------- Base & Theme --------- */
:root{
  --bg:#f9f9fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --brand:#1abc9c;
  --brand-600:#16a085;
  --ink:#2c3e50;
  --ring:#99f6e4;
  --shadow:0 10px 30px rgba(2,6,23,.06);
  --radius:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

/* Contenedor y ritmo vertical */
.container{max-width:880px;margin-inline:auto;padding:0 20px}
.section{padding:56px 0;scroll-margin-top:90px}
.section-title{
  text-align:center;font-size:clamp(1.6rem,2.4vw,2rem);
  margin:0 0 24px;color:var(--ink);position:relative;
}
.section-title::after{
  content:"";display:block;width:72px;height:4px;background:var(--brand);
  border-radius:2px;margin:10px auto 0;
}

/* PATRÓN VERTICAL: todo apilado (una columna) */
.stack{display:flex;flex-direction:column;gap:18px}
.cards,.tarjetas-academicas{display:flex;flex-direction:column;gap:18px}

/* Tarjeta full width para el stack vertical */
.card,.tarjeta{
  width:100%;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .2s;
}
.card:hover,.tarjeta:hover{transform:translateY(-3px)}
.card-header,.tarjeta-header{
  background:var(--ink);color:#fff;font-weight:700;padding:16px;text-align:center
}
.card-body,.tarjeta-body{padding:18px;color:var(--text)}
.card-body p{margin:.25rem 0 .75rem}
.card-body hr{border:0;border-top:1px solid #e5e7eb;margin:12px 0}

/* Listas centradas y lectura cómoda */
.list{padding-left:18px;margin:0 auto;max-width:680px}
.list li{margin:.4rem 0}
.badge.success{color:#059669;background:#ecfdf5;padding:.15rem .5rem;border-radius:999px;font-size:.85rem}

/* A11y: Skip */
.skip-link{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  position:fixed;left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;
  background:#000;color:#fff;border-radius:.5rem;z-index:9999;
}

/* Header sticky + nav */
.site-header{
  position:sticky;top:0;z-index:50;background:var(--ink);color:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.12);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.2px}
.site-nav .menu{list-style:none;display:flex;gap:12px;margin:0;padding:0}
.site-nav a{
  color:#fff;text-decoration:none;padding:10px 14px;border-radius:10px;
  background:rgba(255,255,255,.06);font-weight:600;display:inline-block;
}
.site-nav a:hover,.site-nav a:focus{background:var(--brand);outline:none}
.site-nav a:focus-visible{box-shadow:0 0 0 3px var(--ring)}

/* Hamburger (CSS only) */
.nav-toggle{display:none}
.hamburger{display:none;width:42px;height:42px;align-items:center;justify-content:center;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;transition:.2s}
@media (max-width:860px){
  .hamburger{display:flex}
  .site-nav{position:absolute;right:20px;top:64px;background:var(--ink);border-radius:12px;box-shadow:var(--shadow);padding:8px;display:none}
  .site-nav .menu{flex-direction:column;gap:6px}
  .nav-toggle:checked ~ .site-nav{display:block}
  .nav-toggle:checked + .hamburger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-toggle:checked + .hamburger span:nth-child(2){opacity:0}
  .nav-toggle:checked + .hamburger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

/* Sobre mí en vertical */
.about{
  display:flex;flex-direction:column;align-items:center;
  background:var(--card);padding:24px;border-radius:var(--radius);box-shadow:var(--shadow);
  text-align:center;gap:16px;
}
.about img{width:180px;height:180px;border-radius:50%;object-fit:cover;border:4px solid var(--ink)}
.about-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* Buttons */
.btn{display:inline-block;padding:10px 14px;border-radius:10px;font-weight:700;text-decoration:none;transition:.15s;border:1px solid transparent}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand-600)}
.btn-primary:hover{filter:brightness(.97)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--brand)}
.btn-ghost:hover{background:#f5fffb}

/* Utilidades */
.center{text-align:center}
.muted{color:var(--muted)}

/* Prototipo */
.card-prototipo .card-header{
  background:linear-gradient(90deg,#14532d,#0f766e 70%);
}
.badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:6px 0 12px}
.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* Swatches (colores reciclables) */
.swatches{
  display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));
  gap:12px;margin:8px 0 14px;
}
@media (max-width:700px){
  .swatches{grid-template-columns:repeat(2,minmax(120px,1fr))}
}
.swatch{
  background:var(--card);border:1px solid #dbe9e6;border-radius:12px;
  padding:10px 12px;text-align:center;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.swatch::before{
  content:"";position:absolute;inset:0;background:var(--sw,#1abc9c);opacity:.12;
}
.swatch span{font-weight:700;display:block;position:relative;z-index:1}
.swatch small{display:block;opacity:.8;position:relative;z-index:1}

/* Mis compañeros */
.buddy .card-body{padding:18px}
.buddy-inner{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.avatar{
  width:56px;height:56px;border-radius:50%;
  background:#1abc9c;color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  letter-spacing:.5px;box-shadow:var(--shadow);
}
.buddy-info{display:flex;flex-direction:column;gap:8px}
.buddy .badges{justify-content:flex-start}
@media (max-width:560px){
  .buddy-inner{flex-direction:row;align-items:flex-start}
}
.card-prototipo
/* Compañeros enlaces */
#companeros .card-header a{color:#1abc9c;text-decoration:none}
#companeros .card-header a:hover,#companeros .card-header a:focus{color:#fff;text-decoration:underline}

/* Footer mejorado */
.site-footer{
  background:var(--ink);color:#cdd6df;padding:28px 0 36px;margin-top:56px;
}
.footer-nav{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:12px}
.footer-nav a{
  color:#cdd6df;text-decoration:none;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.06);
}
.footer-nav a:hover,.footer-nav a:focus{background:var(--brand);color:#fff;outline:none}
.footer-legal{max-width:760px;margin:0 auto 8px;text-align:center;line-height:1.55}
.footer-copy{text-align:center;opacity:.85;margin:0}

/* Focus general */
a:focus-visible,button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}

/* Print (básico) */
@media print{
  .site-header,.site-footer,.btn,.hamburger{display:none !important}
  .section{padding:20px 0}
  .card{box-shadow:none;border:1px solid #ddd}
}
/* --- Prototipo: título, paleta y CTA --- */
.lead{font-size:1.25rem; font-weight:700; margin:4px 0 10px;}
.center{text-align:center;}

.card-prototipo .card-header{
  background: linear-gradient(90deg,#14532d,#0f766e 70%);
}

/* Paleta en tarjetas */
.swatches{
  display:grid;
  grid-template-columns: repeat(4, minmax(140px,1fr));
  gap:12px;
  margin: 10px 0 16px;
}
@media (max-width:900px){ .swatches{ grid-template-columns: repeat(2, minmax(140px,1fr)); } }

.swatch{
  background: var(--card);
  border: 1px solid #dbe9e6;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  box-shadow: var(--shadow);
  color: var(--sw-text, inherit);
}
.swatch .color{
  display:block;
  width:100%;
  height:48px;
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--sw, #1abc9c);
  border: 1px solid rgba(0,0,0,.06);
}
.swatch span{ display:block; font-weight:700; }
.swatch small{ display:block; opacity:.8; }

/* Alineación del CTA del prototipo */
.actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
/* ===== Prototipo (mockup vertical con carrusel) ===== */
.card-prototipo .card-header{ background:linear-gradient(90deg,#14532d,#0f766e 70%); }
.card-prototipo .card-body{ display:flex; flex-direction:column; align-items:center; text-align:center; }

.proto-wrap{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }

.phone{
  width:min(370px,92vw); aspect-ratio:9/19.5; position:relative; margin:18px auto;
  border-radius:28px; overflow:hidden;
  background:linear-gradient(145deg,#0b1723,#182636);
  box-shadow:0 20px 40px rgba(2,6,23,.25), inset 0 0 0 10px #0e1b28, inset 0 0 0 12px #0a1420;
}
.phone-notch{
  position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:2;
  width:42%; height:18px; background:#0a1420; border-bottom-left-radius:12px; border-bottom-right-radius:12px;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);
}

.proto-rail{
  position:absolute; inset:36px 10px 20px 10px; border-radius:18px; background:#fff;
  overflow:auto; scroll-snap-type:y mandatory; scroll-behavior:smooth;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}

.proto-panel{
  height:100%; margin:0; padding:0; position:relative; scroll-snap-align:start;
  display:flex; align-items:center; justify-content:center; background:#fff;
  border-bottom:1px solid #eef2f7;
}
.proto-panel:last-child{ border-bottom:0; }

.proto-panel img{
  width:100%; height:100%; object-fit:contain; /* muestra TODA la imagen completa */
  background:#fff; display:block;
}

.chip{
  position:absolute; top:10px; left:10px; font-size:.75rem; color:#fff;
  background:rgba(10,20,32,.85); padding:6px 10px; border-radius:999px; box-shadow:var(--shadow);
}

/* Dots */
.proto-dots{ display:flex; flex-direction:column; gap:10px; }
.proto-dots .dot{
  width:12px; height:12px; border-radius:999px; border:2px solid #0e1b28; background:transparent; cursor:pointer;
  transition:transform .15s, background .15s;
}
.proto-dots .dot:hover{ transform:scale(1.08); }
.proto-dots .dot.is-active{ background:#0e1b28; }

/* Accesibilidad: menos movimiento */
@media (prefers-reduced-motion: reduce){
  .proto-rail{ scroll-behavior:auto !important; }
}