/* ===========================================================
   ingridastiz.com · Board Member y Consejera independiente
   Misma familia tipográfica que ingrid.ar (Fraunces + Inter),
   paleta más sobria: azul oscuro como protagonista, naranja
   solo como acento puntual.
   =========================================================== */
:root{
  --bg:#F5F3F2;
  --bg-2:#ECE9E6;
  --dark:#182A44;
  --dark-2:#22375A;
  --blue:#5B86B8;
  --neutral:#6E7683;
  --accent:#E8590C;
  --line:rgba(24,42,68,.12);
  --card:#FFFFFF;
  --maxw:1080px;
  --text:820px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:76px;}
body{
  margin:0;
  background:var(--bg);
  color:var(--dark);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* --------- Tipografía --------- */
h1,h2,h3{
  font-family:"Fraunces","Georgia",serif;
  font-weight:500;
  line-height:1.15;
  color:var(--dark);
  letter-spacing:-.01em;
  margin:0 0 .5em;
}
h1{font-size:clamp(2rem,4.2vw,3rem);}
h2{font-size:clamp(1.6rem,3vw,2.15rem);}
h3{font-size:1.2rem;font-weight:600;}
p{margin:0 0 1.1em;}
a{color:var(--blue);text-decoration:none;}
a:hover{color:var(--dark);}
strong{font-weight:600;}
.muted{color:var(--neutral);}
.eyebrow{
  text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;
  font-weight:600;color:var(--blue);margin:0 0 1rem;
}

/* --------- Header / Nav --------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(245,243,242,.88);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;gap:1rem;
  padding:.8rem 1.4rem;
}
.brand{
  font-family:"Fraunces",serif;font-size:1.3rem;font-weight:600;
  color:var(--dark);letter-spacing:-.02em;white-space:nowrap;
}
.brand span{color:var(--accent);}
.nav-links{
  display:flex;gap:.15rem;align-items:center;
  margin-left:auto;
  overflow-x:auto;scrollbar-width:none;
}
.nav-links::-webkit-scrollbar{display:none;}
.nav-links a{
  color:var(--dark);font-size:.9rem;font-weight:500;
  padding:.35rem .65rem;border-radius:999px;white-space:nowrap;
  transition:background .2s,color .2s;
}
.nav-links a:hover{background:rgba(24,42,68,.07);}
.lang-toggle{
  display:inline-flex;border:1px solid var(--line);
  border-radius:999px;overflow:hidden;margin-left:.5rem;
  font-size:.78rem;flex:none;
}
.lang-toggle button{
  border:0;background:transparent;cursor:pointer;
  padding:.3rem .65rem;color:var(--neutral);font-weight:600;
  font-family:inherit;letter-spacing:.03em;
}
.lang-toggle button.on{background:var(--dark);color:var(--bg);}

/* --------- Layout --------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.4rem;}
section.sec{padding:4.2rem 0;}
section.sec.alt{background:var(--bg-2);}
.sec-head{max-width:var(--text);margin-bottom:2.2rem;}
.sec-head p{font-size:1.08rem;color:var(--neutral);margin:0;}
.text{max-width:var(--text);}
.lead-big{font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.5;font-family:"Fraunces",serif;font-weight:400;}

/* --------- Hero --------- */
.hero{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  column-gap:3.5rem;align-items:center;
  max-width:var(--maxw);margin:0 auto;
  padding:3.5rem 1.4rem 3rem;
  min-height:calc(100dvh - 64px);
}
.hero-text .eyebrow{margin-bottom:1rem;}
.hero-text h1{margin-bottom:.7em;}
.hero-text .lead{font-size:1.15rem;color:var(--dark-2);margin:0 0 1.8rem;}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;}
.hero-photo{
  position:relative;aspect-ratio:1000/1278;
  width:100%;max-width:420px;justify-self:end;
  border-radius:16px;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(24,42,68,.55);
}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block;}
.photo-credit{
  position:absolute;left:.75rem;bottom:.6rem;
  font-size:.66rem;color:rgba(255,255,255,.82);
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* --------- Botones --------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--dark);color:#fff;
  padding:.8rem 1.35rem;border-radius:999px;
  font-weight:600;font-size:.98rem;line-height:1.2;
  transition:transform .15s,box-shadow .2s,background .2s;
  box-shadow:0 12px 26px -14px rgba(24,42,68,.7);
}
.btn:hover{color:#fff;background:var(--dark-2);transform:translateY(-2px);}
.btn svg{width:1.05em;height:1.05em;fill:currentColor;flex:none;}
.btn-outline{
  background:transparent;color:var(--dark);
  border:1.5px solid var(--dark);box-shadow:none;
}
.btn-outline:hover{background:var(--dark);color:#fff;}

/* --------- Tarjetas (Qué aporto) --------- */
.grid{display:grid;gap:1.1rem;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:1.5rem 1.45rem 1.3rem;
  display:flex;flex-direction:column;
}
.card .num{
  font-family:"Fraunces",serif;font-size:.85rem;font-weight:600;
  color:var(--blue);letter-spacing:.08em;margin-bottom:.7rem;
}
.card h3{margin-bottom:.55rem;}
.card p{font-size:.97rem;color:var(--dark-2);margin:0;}
.card.now{background:var(--dark);border-color:var(--dark);}
.card.now .num,.card.now h3{color:#fff;}
.card.now p{color:rgba(255,255,255,.86);}
.card.now .num{color:#F1B08A;}

.callout{
  background:var(--card);border-left:4px solid var(--accent);
  border-radius:0 16px 16px 0;padding:1.5rem 1.6rem;margin-top:1.4rem;
  max-width:var(--text);
}
.callout p{margin:0;font-size:1.05rem;}
.callout p + p{margin-top:.6rem;}

/* --------- Consejos --------- */
.board{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:1.5rem 1.45rem;
}
.board .org{font-family:"Fraunces",serif;font-size:1.25rem;font-weight:600;margin:0 0 .25rem;}
.board .role{margin:0 0 .5rem;color:var(--dark-2);font-size:.98rem;}
.board .when{margin:0;font-size:.85rem;color:var(--neutral);text-transform:uppercase;letter-spacing:.08em;font-weight:600;}

/* --------- Trayectoria --------- */
.timeline{list-style:none;padding:0;margin:0 0 2.4rem;max-width:var(--text);}
.timeline li{
  display:grid;grid-template-columns:120px 1fr;gap:1.2rem;
  padding:.9rem 0;border-top:1px solid var(--line);
}
.timeline li:last-child{border-bottom:1px solid var(--line);}
.timeline .yr{
  font-family:"Fraunces",serif;font-weight:600;color:var(--blue);
  font-size:1rem;padding-top:.1rem;
}
.timeline .what{margin:0;color:var(--dark-2);}
.clients{max-width:var(--text);}
.clients p{color:var(--dark-2);}

blockquote{
  margin:0;padding:1.5rem 1.6rem;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  font-family:"Fraunces",serif;font-size:1.05rem;line-height:1.5;
}
blockquote p{margin:0 0 .9rem;}
blockquote cite{
  display:block;font-family:"Inter",sans-serif;font-style:normal;
  font-size:.85rem;color:var(--neutral);
}
blockquote cite strong{color:var(--dark);font-weight:600;}

/* --------- Listas --------- */
ul.clean{list-style:none;padding:0;margin:0;}
ul.clean li{position:relative;padding-left:1.3rem;margin-bottom:.6rem;color:var(--dark-2);}
ul.clean li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--blue);
}
.cols-2{columns:2;column-gap:2.5rem;}
.cols-2 li{break-inside:avoid;}

/* --------- Contacto --------- */
.contact{text-align:center;}
.contact .text{margin:0 auto;}
.contact .hero-actions{justify-content:center;margin:1.6rem 0 2rem;}
.contact .others{font-size:.92rem;color:var(--neutral);}

/* --------- Footer --------- */
footer{
  border-top:1px solid var(--line);
  padding:2rem 1.4rem;
  text-align:center;color:var(--neutral);font-size:.88rem;
}
footer a{color:var(--neutral);}
footer a:hover{color:var(--dark);}
footer .sep{margin:0 .5rem;opacity:.5;}
.foot-line{margin:.3rem 0;line-height:1.6;}

/* --------- Páginas legales --------- */
main.legal{max-width:var(--text);margin:0 auto;padding:3rem 1.4rem 2rem;color:#2b3a52;font-size:1rem;}
.legal h1{margin-bottom:.8rem;}
.legal h2{font-size:1.3rem;margin:2rem 0 .5rem;}

/* --------- Idiomas --------- */
/* Todo el texto está duplicado en .es y .en. Por defecto se ve .es;
   con body.lang-en se invierte. Se cuida que cada elemento recupere
   su display natural (inline, block, list-item). */
.en{display:none;}
body.lang-en .es{display:none;}
body.lang-en div.en,body.lang-en p.en,body.lang-en ul.en,body.lang-en blockquote.en{display:block;}
body.lang-en span.en{display:inline;}
body.lang-en li.en{display:list-item;}

/* --------- Responsive --------- */
@media(max-width:900px){
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .hero{grid-template-columns:1fr;row-gap:2rem;min-height:0;padding-top:2.4rem;}
  .hero-photo{justify-self:start;max-width:360px;}
}
@media(max-width:640px){
  body{font-size:16.5px;}
  section.sec{padding:3.2rem 0;}
  .grid-3,.grid-2{grid-template-columns:1fr;}
  .cols-2{columns:1;}
  .timeline li{grid-template-columns:1fr;gap:.2rem;}
  .hero{padding:1.8rem 1.4rem 2.4rem;}
  .hero-photo{max-width:none;width:100%;aspect-ratio:1/1;border-radius:14px;}
  .hero-actions .btn{width:100%;justify-content:center;}
  .nav{padding:.7rem 1rem;gap:.6rem;}
  .brand{font-size:1.15rem;}
}