/* ============================================================
   arturobisono.com · borrador v3
   Estructura inspirada en orestisgeorgiou.com: fondo oscuro, titular
   contundente, fotos grandes y la trayectoria contada en historias.
   De anne-laure.net: la voz en primera persona y la sobriedad.
   Colores y tipografías de la marca actual (tinta, oliva, terracota).
   ============================================================ */
:root{
  --tinta:#161616; --tinta-2:#1E1E1C; --tinta-3:#262624;
  --papel:#F2F0EB; --blanco:#FFFFFF; --linea-clara:#E3E0D8;
  --gris:#9C988E; --gris-osc:#5E5B55;
  --terra:#8E3A2A;          /* terracota de la marca, sobre fondos claros */
  --acento:#C8673F;         /* la misma terracota, más clara, para leerse sobre la tinta */
  --boton:#B85A35;          /* un tono más oscura: el texto blanco de los botones necesita contraste 4.5 */
  --oliva:#5D6B3D;
  --titulos:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --texto:'Source Serif 4','Source Serif Pro',Georgia,serif;
  --display:'Cormorant Garamond',Georgia,serif;
  --mono:'IBM Plex Mono','Courier New',monospace;
  --ancho:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--texto);font-size:18px;line-height:1.62;color:var(--tinta);background:var(--tinta);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
::selection{background:var(--acento);color:#fff}
.marco{max-width:var(--ancho);margin:0 auto;padding:0 40px}
.saltar{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;color:var(--tinta);padding:8px 14px;font-family:var(--titulos);font-size:14px}
.saltar:focus{left:12px}

/* superficies */
.oscuro{background:var(--tinta);color:#F3F1EC}
.oscuro-2{background:var(--tinta-2);color:#F3F1EC}
.claro{background:var(--blanco);color:var(--tinta)}
.papel{background:var(--papel);color:var(--tinta)}

/* títulos de sección: mayúsculas espaciadas y una raya de acento, como en la referencia */
.titulo{font-family:var(--titulos);font-weight:700;font-size:1.3rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.2;
  padding-bottom:18px;margin-bottom:28px;position:relative}
.titulo::after{content:"";position:absolute;left:0;bottom:0;width:min(420px,100%);height:3px;background:var(--acento)}
.claro .titulo::after,.papel .titulo::after{background:var(--terra)}
.titulo.grande{font-size:clamp(2rem,4.2vw,3.2rem);font-weight:800;letter-spacing:.08em;margin-bottom:48px}
.dato{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.claro .dato,.papel .dato{color:var(--gris-osc)}

/* botones: píldora de acento, mayúsculas pequeñas */
.boton{display:inline-block;margin-top:26px;background:var(--boton);color:#fff;border:0;border-radius:100px;cursor:pointer;
  padding:13px 26px;font-family:var(--titulos);font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transition:background .2s,transform .2s}
.boton:hover{background:#A24D2B;transform:translateY(-1px)}
.claro .boton,.papel .boton{background:var(--terra)}
.claro .boton:hover,.papel .boton:hover{background:#73301F}
.boton.claro{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--tinta)}
.boton.claro:hover{background:var(--tinta);color:#fff}
.enlace{display:inline-block;margin-top:18px;font-family:var(--titulos);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  border-bottom:2px solid var(--acento);padding-bottom:3px}
.claro .enlace,.papel .enlace{border-color:var(--terra)}
.enlace:hover{color:var(--acento)}

/* ---------- cabecera ---------- */
#cabecera{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,box-shadow .3s}
#cabecera.solida{background:rgba(22,22,22,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.barra{display:flex;align-items:center;justify-content:space-between;height:78px;max-width:none;padding:0 40px}
.firma{font-family:var(--titulos);font-weight:600;font-size:.82rem;letter-spacing:.34em;text-transform:uppercase;text-decoration:none;color:#fff}
#menu{display:flex;gap:30px}
#menu a{font-family:var(--titulos);font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:#E9E6DF;padding:6px 0;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
#menu a:hover,#menu a.activo{color:#fff;border-color:var(--acento)}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:100px;padding:8px 16px;
  font-family:var(--titulos);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}

/* ---------- inicio ----------
   Como en orestisgeorgiou.com: la foto ocupa la mitad derecha desde debajo de la cabecera, y la raya y el
   titular cruzan sobre ella. La foto lleva fondo de estudio agregado a la izquierda y arriba, para que lo que
   cruza caiga sobre fondo oscuro y no sobre la cara, y el dron quede entero. */
.inicio{position:relative;min-height:100vh;min-height:100svh;overflow:hidden}
.inicio-foto{position:absolute;left:50%;right:0;top:78px;bottom:0;margin:0;overflow:hidden;background:#1B1F27}
.inicio-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 100%}
.inicio-texto{position:relative;z-index:2;width:60%;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:118px 0 64px max(40px,4.6vw)}
.nombre{font-family:var(--titulos);font-size:clamp(1.2rem,1.85vw,2.3rem);font-weight:400;letter-spacing:.01em;text-transform:uppercase}
.raya{display:block;height:4px;background:var(--acento);width:100%;margin:clamp(18px,3.6vh,44px) 0 clamp(26px,6.5vh,80px)}
.inicio h1{text-align:right;font-family:var(--titulos);font-weight:800;font-size:clamp(2.2rem,4.15vw,7rem);line-height:1;letter-spacing:-.035em;
  text-transform:uppercase;text-shadow:0 2px 24px rgba(0,0,0,.3)}
.inicio h1 span{display:block;white-space:nowrap}
.declaracion{padding:130px 0 150px}
.declaracion .marco{position:relative}
.declaracion p{font-family:var(--titulos);font-weight:600;font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.45;max-width:30em;position:relative;z-index:1}
.aro{position:absolute;left:min(48%,540px);top:-22px;width:160px;height:160px;border:7px solid var(--acento);border-radius:50%;opacity:.9}

/* ---------- sobre mí ---------- */
.bio{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch}
.bio-foto{position:relative;min-height:560px;overflow:hidden}
.bio-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.bio-texto{padding:110px max(40px,calc((100vw - var(--ancho)) / 2 + 40px)) 110px 80px;background:#EFEDE8}
.saludo{font-family:var(--display);font-size:clamp(1.9rem,2.8vw,2.5rem);line-height:1.2;margin-bottom:26px;font-weight:500}
.bio-texto p{max-width:34em;margin-bottom:16px;color:#2A2926}
.capitular::first-letter{float:left;font-family:var(--display);font-weight:500;font-size:4.6em;line-height:.8;padding:.06em .1em 0 0;color:var(--terra)}
.firma-bio{font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--terra)!important;margin-top:22px}

/* ---------- historias ---------- */
.historias{padding:140px 0 60px}
.historia{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:0;align-items:center;margin-bottom:140px}
.historia figure{position:relative;margin:0}
.historia figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.historia figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-top:12px;padding-left:max(40px,calc((100vw - var(--ancho)) / 2 + 40px))}
.historia-texto{padding:0 max(40px,calc((100vw - var(--ancho)) / 2 + 40px)) 0 72px}
.historia-texto p{color:#DAD6CC;margin-bottom:14px;max-width:32em}
.historia-texto .dato{margin-bottom:10px}
.historia-texto p + .dato{margin-top:24px}
.historia .titulo{margin-left:-160px;padding-left:160px}      /* la raya cruza hacia la foto, como en la referencia */
.historia .titulo::after{left:0;width:calc(100% + 0px)}
/* invertida: la foto a la derecha */
.historia.invertida{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.historia.invertida figure{order:2}
.historia.invertida figcaption{padding-left:0}
.historia.invertida .historia-texto{order:1;padding:0 72px 0 max(40px,calc((100vw - var(--ancho)) / 2 + 40px))}
.historia.invertida .titulo{margin-left:0;padding-left:0;margin-right:-160px;padding-right:160px}
/* destacada: la foto de la inauguración, más grande */
.historia.destacada{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.historia.destacada figure img{aspect-ratio:3/2}
.cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:26px;border-top:1px solid rgba(255,255,255,.14);padding-top:20px}
.cifras dt{font-family:var(--titulos);font-weight:800;font-size:1.7rem;letter-spacing:-.02em;color:#fff}
.cifras dd{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);line-height:1.5;margin-top:4px}
/* sin foto: dos años grandes en su lugar */
.historia.solo-texto .anios{order:2;display:flex;flex-direction:column;align-items:flex-start;padding-left:72px;font-family:var(--titulos);font-weight:800;
  font-size:clamp(4rem,9vw,8.5rem);line-height:.9;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.28)}
.historia.solo-texto .anios span:last-child{color:var(--acento);-webkit-text-stroke:0}

/* ---------- empresas ---------- */
.empresas{padding:130px 0 140px}
.tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.tarjeta{background:var(--tinta-3);padding:36px 32px 34px;border-top:3px solid var(--acento)}
.tarjeta h3{font-family:var(--titulos);font-weight:800;font-size:1.9rem;letter-spacing:-.01em;margin:6px 0 16px;color:#fff}
.tarjeta p{color:#CFCBC1;font-size:1rem}
.rol{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acento)}
.claro .rol,.papel .rol{color:var(--terra)}

/* ---------- instituciones ---------- */
.instituciones{padding:130px 0 120px}
.institucion{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:8px 64px;padding:34px 0;border-top:1px solid var(--linea-clara)}
.institucion .rol{grid-column:1;grid-row:1}
.institucion h3{grid-column:1;grid-row:2;font-family:var(--titulos);font-weight:700;font-size:1.45rem;line-height:1.25}
.institucion p:not(.rol){grid-column:2;grid-row:1 / span 3;color:#3A3834}
.institucion .enlace{grid-column:1;grid-row:3;justify-self:start;align-self:start}

/* ---------- escritos ---------- */
.escritos{padding:140px 0}
.escritos-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:80px;align-items:start}
.escritos-grid > *{min-width:0}
.acuarela{position:sticky;top:110px}
.acuarela img{width:100%}
.boletin{font-family:var(--display);font-weight:500;font-size:2rem;line-height:1.15;margin-bottom:18px}
.cita{font-family:var(--display);font-style:italic;font-size:1.45rem;line-height:1.45;color:#E8E4DA;margin-bottom:14px;max-width:30em}
.suscribir{background:#fff;padding:22px 22px 14px;margin:28px 0 40px;max-width:520px}
.substack-crop{width:100%;max-width:480px;height:54px;overflow:hidden;position:relative}
.substack-crop iframe{width:480px;height:320px;border:0;background:transparent;position:absolute;top:-208px;left:50%;transform:translateX(-50%)}
.suscribir-movil{display:none}
/* el formulario de Substack mide 480 px: en pantallas angostas se corta por los lados, así que va un botón a su página */
@media (max-width:560px){.substack-crop{display:none}.suscribir-movil{display:inline-block;margin-top:0}}
.legal{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#77736B;margin-top:10px}
.legal a{color:var(--terra)}
.lista-escritos{list-style:none;border-top:1px solid rgba(255,255,255,.14)}
.lista-escritos li{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.fecha,.medio{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.lista-escritos a{text-decoration:none;font-size:1.06rem;line-height:1.4;transition:color .2s}
.lista-escritos a:hover{color:var(--acento)}
.lista-escritos b{display:block;font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acento);margin-bottom:2px}

/* ---------- charlas, investigación, reconocimientos ---------- */
.charlas{padding:130px 0 120px}
.charlas .titulo.grande{margin-top:40px}
.charlas .titulo.grande:first-child{margin-top:0}
.charla{padding:30px 0 34px;border-top:1px solid var(--linea-clara);max-width:52em}
.charla h3,.premio h3{font-family:var(--titulos);font-weight:700;font-size:1.45rem;line-height:1.3;margin:8px 0 12px}
.charla blockquote{font-family:var(--display);font-style:italic;font-size:1.65rem;line-height:1.35;color:var(--terra);margin:6px 0 14px;max-width:26em}
.charla p:not(.dato),.premio p:not(.dato){color:#3A3834}
.entrada{max-width:44em;color:#3A3834;margin-bottom:34px}
.oscuro .entrada{color:#DAD6CC}
.papers{list-style:none;counter-reset:paper;margin-bottom:60px}
.papers li{padding:22px 0 22px 56px;border-top:1px solid var(--linea-clara);position:relative;counter-increment:paper}
.papers li::before{content:counter(paper,decimal-leading-zero);position:absolute;left:0;top:22px;font-family:var(--mono);font-size:.8rem;color:var(--terra)}
.papers a{display:block;font-family:var(--titulos);font-weight:600;font-size:1.12rem;line-height:1.4;text-decoration:none;margin:6px 0;transition:color .2s}
.papers a:hover{color:var(--terra)}
.autores{font-size:.95rem;color:var(--gris-osc);font-style:italic}
.premios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.premio{border-top:3px solid var(--terra);padding-top:22px}

/* ---------- trayectoria (directorio, a la manera de anne-laure.net) ---------- */
.trayectoria{padding:130px 0}
.columnas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}
.columnas h3{font-family:var(--titulos);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;color:var(--terra)}
.columnas ul{list-style:none;margin-bottom:38px}
.columnas li{font-size:.98rem;line-height:1.5;padding:7px 0;border-bottom:1px solid var(--linea-clara);color:#2E2C29}
.con-fechas li span{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--gris-osc)}
.redes a{text-decoration:none;border-bottom:1px solid var(--terra)}
.redes a:hover{color:var(--terra)}

/* ---------- contacto y pie ---------- */
.contacto{padding:140px 0 120px}
.correo{display:inline-block;font-family:var(--titulos);font-weight:800;font-size:clamp(1.8rem,5.4vw,4.6rem);letter-spacing:-.025em;line-height:1.1;text-decoration:none;
  border-bottom:4px solid var(--acento);padding-bottom:6px;word-break:break-word;transition:color .2s}
.correo:hover{color:var(--acento)}
.redes-pie{list-style:none;display:flex;gap:28px;margin-top:40px;flex-wrap:wrap}
.redes-pie a{font-family:var(--titulos);font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:#D8D4CA}
.redes-pie a:hover{color:var(--acento)}
.pie{padding:30px 0;border-top:1px solid rgba(255,255,255,.08)}
.pie .marco{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.pie a{text-decoration:none}
.pie a:hover{color:#fff}

/* ---------- entrada suave al desplazar (parte siempre de un estado visible) ---------- */
@keyframes subir{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.rv.in{animation:subir .9s cubic-bezier(.2,.7,.2,1) both}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv.in{animation:none}
  .boton:hover{transform:none}
}

/* ---------- pantallas medianas ---------- */
@media (max-width:1100px){
  #menu{gap:20px}
  .historia-texto{padding:0 40px 0 48px}
  .historia.invertida .historia-texto{padding:0 48px 0 40px}
  .tarjetas{grid-template-columns:1fr}
  .columnas{grid-template-columns:1fr 1fr}
}
/* ---------- tableta y teléfono ---------- */
@media (max-width:900px){
  body{font-size:17px}
  .marco,.barra{padding:0 22px}
  .menu-btn{display:block}
  #menu{position:fixed;top:78px;left:0;right:0;flex-direction:column;gap:0;background:rgba(22,22,22,.98);padding:12px 22px 22px;display:none}
  #menu.abierto{display:flex}
  #menu a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:.78rem}
  .inicio{display:flex;flex-direction:column;min-height:0}
  .inicio-texto{width:auto;min-height:0;padding:120px 22px 48px}
  .inicio h1{text-align:left;font-size:clamp(2.2rem,10vw,3.4rem)}
  .inicio h1 span{display:inline;white-space:normal}
  .inicio-foto{position:relative;left:auto;top:auto;order:2;aspect-ratio:1/1}
  .declaracion{padding:80px 0 90px}
  .aro{width:110px;height:110px;left:auto;right:10px;top:-40px;border-width:5px}
  .bio{grid-template-columns:1fr}
  .bio-foto{min-height:0;height:58vh}
  .bio-texto{padding:64px 22px}
  .historias{padding:80px 0 20px}
  .historia,.historia.invertida,.historia.destacada{grid-template-columns:1fr;margin-bottom:90px}
  .historia.invertida figure{order:0}
  .historia-texto,.historia.invertida .historia-texto{padding:34px 22px 0}
  .historia figcaption{padding:0 22px}
  .historia .titulo,.historia.invertida .titulo{margin:0;padding-left:0;padding-right:0}
  .historia.solo-texto .anios{order:0;flex-direction:row;gap:18px;padding:0 22px;font-size:clamp(3.4rem,17vw,5rem)}
  .cifras{grid-template-columns:1fr 1fr}
  .empresas,.instituciones,.escritos,.charlas,.trayectoria,.contacto{padding:90px 0}
  .institucion{grid-template-columns:1fr}
  .institucion .rol,.institucion h3,.institucion p:not(.rol),.institucion .enlace{grid-column:1;grid-row:auto}
  .escritos-grid{grid-template-columns:1fr;gap:40px}
  .acuarela{position:static;max-width:320px}
  .lista-escritos li{grid-template-columns:1fr;gap:4px}
  .premios,.columnas{grid-template-columns:1fr;gap:0}
  .papers li{padding-left:42px}
}