/* Estilo común de las páginas de marca de Creative Codeworks
   (paleta de la colección «Construir y Pensar» / «Materia y Forma»). */
:root{--oscuro:#0B0D11;--crema:#EAE4D6;--papel:#F4F1E9;--terracota:#B8501F;--gris:#555;--linea:#ddd6c7}
*{box-sizing:border-box}
body{margin:0;font-family:Palatino,"Palatino Linotype",Georgia,serif;color:var(--oscuro);
  background:var(--papel);line-height:1.6}
a{color:var(--terracota);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:980px;margin:0 auto;padding:0 24px}

/* nav con chip de logo */
.nav{border-bottom:1px solid var(--linea);background:var(--papel);position:sticky;top:0;z-index:5}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px}
.nav .logo{background:var(--oscuro);padding:7px 14px;border-radius:8px;display:flex;align-items:center}
.nav .logo img{height:34px;width:auto;display:block}
.nav ul{display:flex;flex-wrap:wrap;gap:18px;list-style:none;margin:0;padding:0;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:.84rem}
.nav ul a{color:var(--gris)}.nav ul a:hover{color:var(--terracota);text-decoration:none}
.nav ul a.activo{color:var(--terracota)}

/* hero oscuro de subpágina */
.hero{background:var(--oscuro);color:var(--crema)}
.hero .wrap{padding:56px 24px 50px}
.hero .kicker{font-family:"Helvetica Neue",sans-serif;letter-spacing:.18em;text-transform:uppercase;
  font-size:.74rem;color:#9a958a;margin:0 0 12px}
.hero h1{font-size:2.5rem;line-height:1.08;margin:0 0 16px;color:var(--crema)}
.hero .lead{font-size:1.16rem;max-width:46rem;color:#d8d2c5;margin:0}
.hero .lead a{color:var(--crema);text-decoration:underline}
.volver{display:inline-block;margin-top:16px;font-family:"Helvetica Neue",sans-serif;font-size:.85rem;color:#d8d2c5}

/* secciones */
section{padding:44px 0}
.alt{background:var(--crema)}
.eyebrow{font-family:"Helvetica Neue",sans-serif;letter-spacing:.14em;text-transform:uppercase;
  font-size:.76rem;color:var(--gris);margin:0 0 6px}
h2{font-size:1.9rem;line-height:1.15;margin:0 0 18px}
h3{font-size:1.2rem;margin:0 0 6px}
p{max-width:46rem}
.quote{border-left:3px solid var(--terracota);padding:6px 0 6px 18px;margin:22px 0;
  font-size:1.3rem;line-height:1.4;max-width:42rem}
.tags{font-family:"Helvetica Neue",sans-serif;font-size:.78rem;color:var(--gris);margin-top:8px}
.tags span{display:inline-block;border:1px solid var(--linea);border-radius:20px;padding:3px 10px;margin:3px 6px 0 0}

/* rejilla genérica de tarjetas / áreas */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 34px;margin-top:8px}
@media(max-width:680px){.grid{grid-template-columns:1fr}}
.card{border-top:1px solid var(--linea);padding-top:14px}
.card .n{font-family:"Helvetica Neue",sans-serif;color:var(--terracota);font-size:.85rem;font-weight:700}
.card p{font-size:.98rem;color:#333;margin:4px 0 0}

/* bloques de experiencia / proyectos */
.bloques{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 34px}
@media(max-width:680px){.bloques{grid-template-columns:1fr}}
.bloque .fecha{font-family:"Helvetica Neue",sans-serif;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gris)}
.bloque .premios{font-family:"Helvetica Neue",sans-serif;font-size:.82rem;color:var(--terracota);margin-top:6px}

/* lista/línea de tiempo */
.tl{list-style:none;margin:0;padding:0;max-width:46rem}
.tl li{display:grid;grid-template-columns:128px 1fr;gap:18px;padding:12px 0;border-top:1px solid var(--linea)}
.tl .d{font-family:"Helvetica Neue",sans-serif;font-size:.8rem;letter-spacing:.06em;color:var(--gris)}
.tl p{margin:0;font-size:.98rem}
@media(max-width:560px){.tl li{grid-template-columns:1fr;gap:2px}}

.perfil{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 34px}
@media(max-width:680px){.perfil{grid-template-columns:1fr}}
.perfil .et{font-family:"Helvetica Neue",sans-serif;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--terracota)}

.btn{display:inline-block;margin-top:18px;padding:11px 20px;border-radius:6px;background:var(--oscuro);
  color:var(--crema);font-family:"Helvetica Neue",sans-serif;font-size:.92rem}
.btn:hover{text-decoration:none;opacity:.92}

ul.lista{max-width:46rem}ul.lista li{margin:6px 0}

footer{border-top:1px solid var(--linea);margin-top:10px;padding:26px 0;color:var(--gris);
  font-size:.86rem;font-family:"Helvetica Neue",sans-serif}

/* vídeo embebido responsive */
.video{position:relative;padding-bottom:56.25%;height:0;margin:16px 0;max-width:46rem}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:8px}