/* ===== Bruno Ferrero — sistema de diseño ===== */
:root{
  --paper:#F7F5F0;
  --paper-alt:#FCFBF8;
  --paper-line:#E2E0D8;
  --ink:#1A1B1E;
  --ink-soft:#63645D;
  --petroleo:#1D4B52;
  --petroleo-soft:#3E6E74;
  --plata-1:#9FA6AA;
  --plata-2:#E7E9E9;
  --plata-3:#7C8386;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:inherit;}
img{max-width:100%; display:block;}

/* ---- utilidades ---- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:6vw; padding-right:6vw; }
.eyebrow{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:12.5px; color:var(--ink-soft);
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:22px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--petroleo-soft);}
.eyebrow.plata::before{ background:linear-gradient(135deg,var(--plata-2),var(--plata-1)); }

/* ---- nav ---- */
nav.site{
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 6vw; border-bottom:1px solid var(--paper-line);
  max-width:var(--maxw); margin:0 auto;
  flex-wrap:wrap; gap:14px;
}
.logo{ font-family:'Newsreader',serif; font-style:italic; font-weight:500; font-size:21px; letter-spacing:.01em; text-decoration:none; }
.navlinks{ display:flex; gap:26px; font-family:'Bricolage Grotesque',sans-serif; font-weight:500; font-size:13px; flex-wrap:wrap; }
.navlinks a{ color:var(--ink-soft); text-decoration:none; }
.navlinks a:hover, .navlinks a.active{ color:var(--petroleo); }

/* ---- hero (home) ---- */
.hero{
  display:grid; grid-template-columns:1fr 250px;
  gap:60px; padding:9vh 0 9vh; border-bottom:1px solid var(--paper-line);
  max-width:var(--maxw); margin:0 auto; padding-left:6vw; padding-right:6vw;
}
h1{
  font-family:'Newsreader',serif; font-weight:400; font-size:clamp(36px,4.6vw,58px);
  line-height:1.1; letter-spacing:-.01em; max-width:16ch;
}
h1 em{ font-style:italic; color:var(--petroleo); font-weight:500; }
.thesis{ margin-top:24px; font-size:16.5px; line-height:1.65; color:var(--ink-soft); max-width:46ch; }
.cta-row{ margin-top:36px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.cta{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:14px;
  background:var(--petroleo); color:var(--paper); padding:13px 24px; text-decoration:none; display:inline-block;
  border:1px solid var(--petroleo);
}
.cta:hover{ background:var(--petroleo-soft); border-color:var(--petroleo-soft); }
.cta.ghost{ background:none; border:1px solid var(--ink); color:var(--ink); }
.cta.ghost:hover{ border-color:var(--petroleo); color:var(--petroleo); }
.cta.plata{
  background:linear-gradient(135deg,var(--plata-2) 0%,#fff 45%,var(--plata-1) 100%);
  color:var(--ink); border:1px solid var(--plata-1);
}

.rail{ border-left:1px solid var(--paper-line); padding-left:26px; }
.note{ margin-bottom:24px; padding-left:16px; border-left:2px solid var(--plata-1); }
.note .num{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:10.5px; color:var(--petroleo-soft);
  display:block; margin-bottom:5px; letter-spacing:.05em;
}
.note p{ font-size:12.5px; line-height:1.55; color:var(--ink-soft); }

/* ---- franja institucional ---- */
section.strip{
  padding:4.5vh 0; border-bottom:1px solid var(--paper-line);
  display:flex; gap:44px; font-family:'Bricolage Grotesque',sans-serif; font-weight:500; font-size:13px;
  color:var(--ink-soft); flex-wrap:wrap;
  max-width:var(--maxw); margin:0 auto; padding-left:6vw; padding-right:6vw;
}

/* ---- page hero (páginas internas) ---- */
.page-hero{
  padding:8vh 0 6vh; border-bottom:1px solid var(--paper-line);
  max-width:var(--maxw); margin:0 auto; padding-left:6vw; padding-right:6vw;
}
.page-hero h1{ max-width:22ch; }
.page-hero .thesis{ max-width:60ch; }

/* ---- curriculum: sidebar + contenido ---- */
.cv-layout{
  display:grid; grid-template-columns:260px 1fr; gap:56px;
  max-width:var(--maxw); margin:0 auto; padding:2vh 6vw 8vh;
}
.cv-sidebar{ position:sticky; top:32px; align-self:start; }
.cv-sidebar .framed-photo{ max-width:none; }
@media (max-width:800px){
  .cv-layout{ grid-template-columns:1fr; gap:8px; }
  .cv-sidebar{ position:static; }
  .cv-sidebar .framed-photo{ max-width:340px; margin:0 auto 8px; }
}

/* ---- contenido / secciones ---- */
.section{
  padding:8vh 0; border-bottom:1px solid var(--paper-line);
  max-width:var(--maxw); margin:0 auto; padding-left:6vw; padding-right:6vw;
}
.section h2{ font-family:'Newsreader',serif; font-weight:400; font-size:26px; margin-bottom:14px; }
.section .lede{ color:var(--ink-soft); line-height:1.65; font-size:14.5px; max-width:60ch; margin-bottom:36px; }
.prose{ max-width:62ch; }
.prose p{ color:var(--ink-soft); line-height:1.75; font-size:15.5px; margin-bottom:16px; }
.prose p:last-child{ margin-bottom:0; }

/* ---- grid de tarjetas ---- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card{ border:1px solid var(--paper-line); padding:26px; background:var(--paper-alt); }
.card img{ margin-bottom:16px; aspect-ratio:16/10; object-fit:cover; }
.card h3{ font-family:'Newsreader',serif; font-size:17px; font-weight:500; margin-bottom:8px;}
.card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.card .date, .card .meta{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:10.5px; color:var(--petroleo);
  margin-top:14px; display:block; letter-spacing:.03em;
}
.card .cta-link{
  display:inline-block; margin-top:16px; font-family:'Bricolage Grotesque',sans-serif; font-weight:600;
  font-size:12.5px; color:var(--petroleo); text-decoration:none; border-bottom:1px solid var(--petroleo);
}

/* ---- timeline (noticias) ---- */
.timeline-item{
  display:grid; grid-template-columns:120px 1fr; gap:30px;
  padding:34px 0; border-bottom:1px solid var(--paper-line);
}
.timeline-item .date{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:12px; color:var(--petroleo); letter-spacing:.03em;
}
.timeline-item h3{ font-family:'Newsreader',serif; font-size:19px; font-weight:500; margin-bottom:8px; }
.timeline-item p{ color:var(--ink-soft); font-size:14px; line-height:1.65; max-width:60ch; }
.timeline-item img{ margin-top:14px; max-width:340px; }

/* ---- video ---- */
.video-embed{ position:relative; width:100%; aspect-ratio:16/9; background:var(--ink); margin:28px 0; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---- notas / avisos ---- */
.note-flag{
  border:1px dashed var(--plata-1); background:var(--paper-alt); padding:16px 20px;
  font-family:'Bricolage Grotesque',sans-serif; font-size:12.5px; color:var(--ink-soft); margin:20px 0;
}
.note-flag b{ color:var(--ink); }

/* ---- listas simples (publicaciones, artículos) ---- */
.pub-list{ list-style:none; }
.pub-item{ padding:22px 0; border-bottom:1px solid var(--paper-line); }
.pub-item a.title{
  font-family:'Newsreader',serif; font-size:18px; color:var(--ink); text-decoration:none; display:inline-block; margin-bottom:6px;
}
.pub-item a.title:hover{ color:var(--petroleo); }
.pub-item .cite{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; }

/* ---- ficha datos (mentorías, cursos) ---- */
.spec-list{ display:flex; flex-direction:column; gap:10px; margin:26px 0; }
.spec-row{ display:flex; gap:16px; font-size:14px; border-bottom:1px solid var(--paper-line); padding-bottom:10px; }
.spec-row .k{ font-family:'Bricolage Grotesque',sans-serif; font-weight:600; color:var(--ink-soft); min-width:120px; font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; }

/* ---- footer ---- */
footer.site{
  padding:32px 6vw; font-family:'Bricolage Grotesque',sans-serif; font-size:12px; color:var(--ink-soft);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  max-width:var(--maxw); margin:0 auto;
}
footer.site a{ text-decoration:none; }
footer.site a:hover{ color:var(--petroleo); }
.social-row{ display:flex; align-items:center; gap:18px; }
.social-row a{ display:flex; }
.social-row svg{ width:19px; height:19px; fill:currentColor; }

/* ---- encabezado horizontal (banner) ---- */
.cover-banner{ position:relative; width:100%; aspect-ratio:2.6/1; overflow:hidden; background:var(--ink); }
.cover-banner img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; }
.cover-banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(20,21,24,.6) 100%); }
.cover-banner .cap{ position:absolute; left:6vw; bottom:20px; z-index:2; color:var(--paper); }
.cover-banner .cap .name{ font-family:'Newsreader',serif; font-style:italic; font-size:22px; margin:0; font-weight:400; }
.cover-banner .cap .role{ font-family:'Bricolage Grotesque',sans-serif; font-size:11px; letter-spacing:.05em; text-transform:uppercase; opacity:.85; margin-top:4px; }
@media (max-width:800px){ .cover-banner{ aspect-ratio:4/5; } .cover-banner img{ object-position:center 18%; } }

/* ---- compartir ---- */
.share-row{ display:flex; gap:12px; margin:30px 0 10px; flex-wrap:wrap; }
.share-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--paper-line);
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
  transition:.15s ease; cursor:pointer; background:none; text-decoration:none;
}
.share-btn:hover{ border-color:var(--petroleo); color:var(--petroleo); }
.share-btn svg{ width:17px; height:17px; }
.share-btn svg *{ fill:currentColor; }
.back-link{
  display:inline-block; font-family:'Bricolage Grotesque',sans-serif; font-weight:500; font-size:12.5px;
  color:var(--ink-soft); text-decoration:none; margin-bottom:26px;
}
.back-link:hover{ color:var(--petroleo); }
.noticia-photo{ width:100%; aspect-ratio:16/10; border:1px solid var(--paper-line); background:var(--paper-alt); padding:8px; margin:26px 0; }
.noticia-photo img{ width:100%; height:100%; object-fit:cover; }
.copy-feedback{ font-family:'Bricolage Grotesque',sans-serif; font-size:11.5px; color:var(--petroleo); margin-left:4px; opacity:0; transition:opacity .2s; }
.copy-feedback.show{ opacity:1; }

/* ---- fila de categorías (íconos) ---- */
.category-row{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:4.5vh 6vw; max-width:var(--maxw); margin:0 auto; border-bottom:1px solid var(--paper-line);
}
.category-item{
  display:flex; flex-direction:column; align-items:center; gap:9px; text-decoration:none;
  color:var(--ink-soft); flex:1; min-width:78px; text-align:center;
}
.category-item svg{ width:25px; height:25px; }
.category-item svg *{ stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.category-item span{ font-family:'Bricolage Grotesque',sans-serif; font-weight:500; font-size:11px; letter-spacing:.02em; }
.category-item:hover{ color:var(--petroleo); }
.framed-photo{
  max-width:340px; aspect-ratio:3/4; border:1px solid var(--paper-line);
  padding:8px; background:var(--paper-alt); margin-bottom:8px;
}
.framed-photo img{ width:100%; height:100%; object-fit:cover; }

/* ---- placeholder de contenido pendiente (foto/video a subir) ---- */
.placeholder{
  width:100%; height:100%; min-height:260px; display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--plata-1); background:var(--paper-alt); text-align:center; padding:20px;
}
.placeholder span{ font-family:'Bricolage Grotesque',sans-serif; font-size:12.5px; color:var(--ink-soft); max-width:32ch; }

/* ---- bloque decálogo (home) ---- */
.decalogo{
  max-width:var(--maxw); margin:0 auto; padding:6vh 6vw; border-top:1px solid var(--paper-line);
  display:grid; grid-template-columns:280px 1fr; gap:50px; align-items:center;
}
.decalogo .book-frame{ aspect-ratio:3/4; border:1px solid var(--paper-line); background:var(--paper-alt); padding:8px; }
.decalogo .book-frame img{ width:100%; height:100%; object-fit:cover; }
.decalogo h2{ font-family:'Newsreader',serif; font-weight:400; font-size:24px; margin-bottom:12px; }
.decalogo p{ color:var(--ink-soft); font-size:14.5px; line-height:1.7; margin-bottom:20px; max-width:56ch; }

/* ---- video TEDx (home) ---- */
.home-video{ max-width:var(--maxw); margin:0 auto; padding:6vh 6vw 0; }

/* ---- botón flotante whatsapp ---- */
.wa-float{
  position:fixed; right:22px; bottom:86px; z-index:100;
  width:56px; height:56px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.22); transition:transform .15s ease;
}
.wa-float:hover{ transform:scale(1.06); }
.wa-float svg{ width:28px; height:28px; }

@media (max-width:800px){
  .hero{ grid-template-columns:1fr; }
  .grid-2, .grid-3{ grid-template-columns:1fr; }
  .timeline-item{ grid-template-columns:1fr; gap:8px; }
  .decalogo{ grid-template-columns:1fr; }
  .decalogo .book-frame{ max-width:220px; margin:0 auto; }
  .page-hero{ padding-top:6vh; padding-bottom:5vh; }
  .section{ padding-top:5vh; padding-bottom:5vh; }
}

@media (max-width:560px){
  nav.site{ padding:18px 5vw; gap:8px 14px; }
  .navlinks{ gap:14px 18px; font-size:12px; row-gap:8px; }
  .logo{ font-size:18px; }
  .category-row{ gap:6px 10px; padding:3.5vh 5vw; }
  .category-item{ min-width:64px; }
  .category-item svg{ width:21px; height:21px; }
  .category-item span{ font-size:10px; }
  h1{ font-size:clamp(28px,7vw,40px); }
  .cover-banner .cap{ left:5vw; }
  .wa-float{ width:50px; height:50px; right:16px; bottom:78px; }
  .wa-float svg{ width:25px; height:25px; }
  footer.site{ flex-direction:column; align-items:flex-start; gap:14px; padding:26px 5vw; }
}