/* ============================================================
   BDI — Sistema editorial, evolución 2026
   Papel cálido · tinta · una faceta bronce · serif display
   ============================================================ */
:root{
  --paper:#FBFAF8;
  --tint:#F0EDE4;
  --ink:#191813;
  --graphite:#4A463D;
  --faint:#7C776B;
  --line:#E4E1D7;
  --line-strong:#C6C2B4;
  --bronze:#8A6D3B;
  --bronze-deep:#5F4A26;
  --white:#FFFFFF;

  --f-display:"Source Serif 4", Georgia, serif;
  --f-ui:"Inter", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, monospace;

  --max:72rem;
  --pad:clamp(1.25rem, 4.5vw, 4rem);
  --section:clamp(4rem, 9vw, 6.5rem);
}

/* Font Awesome 4.7 (SIL OFL 1.1) — subconjunto propio de 2 glifos:
   U+F095 teléfono y U+F003 sobre (804 B). unicode-range hace que esta
   familia solo se consulte para esos dos codepoints. */
@font-face{
  font-family:"FA Marcas";
  src:url("/assets/fa-marcas.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:block;
  unicode-range:U+F095, U+F003;
}

*{ box-sizing:border-box; margin:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--f-ui);
  font-size:16.5px; line-height:1.65;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* Tipos ---------------------------------------------------------------- */
h1,h2,h3{
  font-family:var(--f-display); font-weight:500; line-height:1.12;
  text-wrap:balance; letter-spacing:-0.012em;
}
h1{ font-size:clamp(2.35rem, 5.4vw, 3.9rem); }
h2{ font-size:clamp(1.7rem, 3.6vw, 2.5rem); }
h3{ font-size:clamp(1.25rem, 2.4vw, 1.55rem); }
p{ max-width:66ch; }

a{ color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ text-decoration-color:var(--bronze); }
img{ max-width:100%; height:auto; display:block; }

:focus-visible{ outline:2px solid var(--bronze-deep); outline-offset:3px; }

.mono{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.02em; color:var(--faint); }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }

/* Etiqueta de sección: pequeña, semibold, SIN mayúsculas */
.etiqueta{
  display:flex; align-items:center; gap:.9rem;
  font-size:.86rem; font-weight:600; color:var(--bronze-deep);
  margin-bottom:1.1rem;
}
.etiqueta::after{ content:""; flex:0 0 4.5rem; height:1px; background:var(--line-strong); }
@media (max-width:560px){ .etiqueta::after{ flex-basis:2rem; } }

/* Cabecera de página interior */
.cabecera-pagina{ padding:clamp(3.25rem, 7vw, 5.5rem) var(--pad) 0; }
.cabecera-pagina .wrap{ border-bottom:1px solid var(--line-strong); padding-bottom:clamp(2rem, 4vw, 3rem); }
.cabecera-pagina h1{ max-width:22ch; }
.encabezado{ font-size:1.2rem; line-height:1.6; font-family:var(--f-display); color:var(--graphite); margin-top:1.1rem; max-width:52ch; }
.migas{ font-size:.84rem; color:var(--faint); margin-bottom:1.6rem; }
.migas a{ color:var(--graphite); text-decoration:none; }
.migas a:hover{ text-decoration:underline; }

/* Header --------------------------------------------------------------- */
.top{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);
}
.top__barra{
  max-width:var(--max); margin-inline:auto; padding:.8rem var(--pad);
  display:flex; align-items:center; gap:1.25rem;
}
.marca{ display:inline-flex; align-items:center; gap:.75rem; text-decoration:none; margin-right:auto; }
.marca img{ width:36px; height:36px; object-fit:contain; }
.marca__texto{ display:grid; line-height:1.18; }
.marca__nombre{ font-family:var(--f-display); font-weight:600; font-size:1.02rem; letter-spacing:.01em; }
.marca__tag{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.nav{ display:flex; align-items:center; gap:1.4rem; }
.nav a{ text-decoration:none; font-size:.92rem; font-weight:500; color:var(--graphite); }
.nav a:hover{ color:var(--ink); }
.nav a[aria-current="page"]{ color:var(--ink); box-shadow:inset 0 -2px 0 var(--bronze); }
.nav .cta{
  border:1px solid var(--ink); padding:.5rem 1rem; color:var(--ink);
}
.nav .cta:hover{ background:var(--ink); color:var(--paper); }
.lang{
  font-family:var(--f-mono); font-size:.74rem; text-decoration:none;
  color:var(--graphite); border:1px solid var(--line-strong);
  padding:.55rem .65rem; line-height:1;
}
.lang:hover{ border-color:var(--ink); color:var(--ink); }

/* Menú móvil (details, sin JS) */
.menu-movil{ display:none; }
.menu-movil summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.6rem;
  font-size:.95rem; font-weight:500; color:var(--ink); padding:.55rem 0;
}
.menu-movil summary::-webkit-details-marker{ display:none; }
.menu-movil summary .raya{ display:inline-block; width:1.15rem; height:1px; background:var(--ink); box-shadow:0 4px 0 var(--ink), 0 -4px 0 var(--ink); }
.menu-movil[open] summary{ color:var(--bronze-deep); }
.menu-movil .nav{
  display:grid; gap:0; position:absolute; left:0; right:0; top:100%;
  background:var(--paper); border-bottom:1px solid var(--line);
  padding:.5rem var(--pad) 1.25rem;
}
.menu-movil .nav a{ padding:.65rem 0; border-bottom:1px solid var(--line); font-size:1rem; }
.menu-movil .nav .cta{ border:none; padding:.65rem 0; justify-self:start; }

/* Botones -------------------------------------------------------------- */
.btn{
  display:inline-block; font-family:var(--f-ui); font-size:.95rem; font-weight:600;
  padding:.8rem 1.5rem; border:1px solid var(--ink);
  color:var(--ink); background:transparent; text-decoration:none;
  cursor:pointer; border-radius:0;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primario{ background:var(--ink); color:var(--paper); }
.btn--primario:hover{ background:var(--bronze-deep); border-color:var(--bronze-deep); }
.btn--secundario:hover{ background:var(--tint); }

/* Hero ------------------------------------------------------------------ */
.hero{ border-bottom:1px solid var(--line-strong); }
.hero__rejilla{
  max-width:var(--max); margin-inline:auto; padding:clamp(3.5rem, 8vw, 6rem) var(--pad) clamp(3rem, 6vw, 4.5rem);
  display:grid; gap:clamp(2rem, 5vw, 4rem); align-items:center;
}
.hero__texto .etiqueta{ margin-bottom:1.4rem; }
.hero__texto h1{ max-width:17ch; }
.hero__lead{
  margin-top:1.4rem; font-family:var(--f-display);
  font-size:clamp(1.1rem, 2vw, 1.3rem); line-height:1.6; color:var(--graphite); max-width:46ch;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.1rem; }
.hero__gema{ justify-self:center; width:min(100%, 30rem); }

/* La gema: facetas a lápiz, una sola faceta bronce */
.gema line, .gema path{ stroke:var(--ink); stroke-opacity:.36; stroke-width:1; fill:none; vector-effect:non-scaling-stroke; }
.gema .cristal{ stroke:var(--ink); stroke-opacity:.66; }
.gema .faceta{ fill:var(--bronze); fill-opacity:.22; stroke:var(--bronze); stroke-opacity:.6; }
@media (prefers-reduced-motion: no-preference){
  .gema line, .gema path{ stroke-dasharray:1; stroke-dashoffset:1; animation:trazar 1.5s cubic-bezier(.4,0,.2,1) forwards; }
  .gema line:nth-of-type(3n){ animation-delay:.25s; }
  .gema line:nth-of-type(3n+1){ animation-delay:.45s; }
  .gema .cristal{ animation-duration:1.9s; }
}
@keyframes trazar{ to{ stroke-dashoffset:0; } }

/* Secciones ------------------------------------------------------------- */
.seccion{ padding:var(--section) var(--pad); }
.seccion__cuerpo{ max-width:var(--max); margin-inline:auto; }
.seccion--tinte{ background:var(--tint); }
.seccion--tinte .seccion__cuerpo{ max-width:var(--max); }
.seccion__cab{ margin-bottom:clamp(1.75rem, 4vw, 2.75rem); }
.seccion__cab h2{ max-width:24ch; }
.seccion__intro{ color:var(--graphite); margin-top:.8rem; }

/* Índice de líneas: filas con hairline, sin números (no es secuencia) */
.lineas{ list-style:none; padding:0; border-top:1px solid var(--line-strong); }
.linea{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr) auto;
  gap:1rem 2.5rem; align-items:baseline;
  padding:1.6rem 0; border-bottom:1px solid var(--line-strong);
}
.linea h3 a{ text-decoration:none; }
.linea h3 a::after{ content:""; display:block; width:0; height:1px; background:var(--bronze); transition:width .25s ease; }
.linea:hover h3 a::after{ width:2.6rem; }
.linea p{ color:var(--graphite); font-size:.98rem; }
.linea .ir{ font-size:.9rem; font-weight:500; color:var(--bronze-deep); text-decoration:none; white-space:nowrap; padding:.4rem 0; }
.linea .ir:hover{ text-decoration:underline; }

/* Metodología: secuencia real, numerada */
.pasos{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(13.5rem, 1fr));
  gap:2.25rem 2.5rem;
}
.paso{ border-top:2px solid var(--ink); padding-top:1rem; }
.paso__num{ font-family:var(--f-mono); font-size:.8rem; color:var(--bronze-deep); display:block; margin-bottom:.7rem; }
.paso h3{ font-size:1.2rem; margin-bottom:.4rem; }
.paso p{ color:var(--graphite); font-size:.95rem; }

/* La firma: puntos sobrios + tarjeta de equipo */
.firma{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:3rem; align-items:start; }
.puntos{ list-style:none; padding:0; border-top:1px solid var(--line-strong); }
.puntos li{ padding:1.15rem 0; border-bottom:1px solid var(--line-strong); }
.puntos h3{ font-size:1.08rem; font-weight:600; font-family:var(--f-ui); letter-spacing:0; margin-bottom:.15rem; }
.puntos p{ color:var(--graphite); font-size:.95rem; }
.tarjeta-equipo{
  border:1px solid var(--line-strong); background:var(--white);
  padding:1.6rem; display:grid; grid-template-columns:8.5rem minmax(0,1fr);
  gap:1.4rem; align-items:start;
}
.tarjeta-equipo .foto{ width:8.5rem; }
.tarjeta-equipo .nombre{ font-family:var(--f-display); font-size:1.28rem; }
.tarjeta-equipo .rol{ font-size:.86rem; font-weight:600; color:var(--bronze-deep); margin-top:.15rem; }
.tarjeta-equipo .bio{ color:var(--graphite); font-size:.93rem; margin-top:.55rem; }
.tarjeta-equipo .mas{ font-size:.88rem; font-weight:500; margin-top:.8rem; }

.foto{ filter:grayscale(1) contrast(1.06); }

/* Página de línea ------------------------------------------------------- */
.contenido-linea{ padding:clamp(2.5rem, 6vw, 4.5rem) var(--pad); }
.contenido-linea .wrap{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(2.5rem, 6vw, 5rem); }
.texto-corriente p + p{ margin-top:1.1rem; }
.texto-corriente p{ color:#2E2C26; }
.cap-lista{ border-top:1px solid var(--line-strong); }
.cap-lista > div{ padding:1rem 0; border-bottom:1px solid var(--line); }
.cap-lista dt{ font-weight:600; font-size:.97rem; }
.cap-lista dd{ color:var(--graphite); font-size:.93rem; margin-top:.15rem; }
.otras-lineas{ list-style:none; padding:0; display:grid; gap:0; border-top:1px solid var(--line-strong); margin-top:2.5rem; }
.otras-lineas li{ border-bottom:1px solid var(--line); }
.otras-lineas a{ display:flex; justify-content:space-between; gap:1rem; padding:.9rem 0; text-decoration:none; font-size:.98rem; font-weight:500; }
.otras-lineas a:hover{ color:var(--bronze-deep); }

/* Equipo ---------------------------------------------------------------- */
.miembro{ display:grid; grid-template-columns:minmax(0,17rem) minmax(0,1fr); gap:clamp(2rem, 5vw, 4rem); align-items:start; }
.miembro .foto{ width:100%; }
.miembro h2{ font-size:clamp(1.6rem, 3vw, 2.1rem); }
.miembro__rol{ font-size:.92rem; font-weight:600; color:var(--bronze-deep); margin-top:.4rem; }
.miembro__bio{ color:var(--graphite); margin-top:1.2rem; }

/* Contacto --------------------------------------------------------------- */
.contacto{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(2.5rem, 6vw, 5rem); align-items:start; }
.contacto address{ font-style:normal; line-height:1.75; color:var(--graphite); }
.contacto__c{ margin-top:1.5rem; font-size:1.02rem; font-family:"FA Marcas", var(--f-ui); }
.contacto__c a{ text-decoration:none; }
.contacto__c a:hover{ text-decoration:underline; }
.contacto .mono{ margin-top:2rem; }
.form{ display:grid; gap:1.1rem; background:var(--white); border:1px solid var(--line-strong); padding:clamp(1.5rem, 3.5vw, 2.25rem); }
.form label{ display:grid; gap:.4rem; font-size:.88rem; font-weight:600; color:#2E2C26; }
.form input, .form select, .form textarea{
  font:inherit; font-size:.97rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line-strong);
  padding:.7rem .8rem; border-radius:0; width:100%;
}
.form input:focus, .form select:focus, .form textarea:focus{
  border-color:var(--bronze); outline:2px solid color-mix(in srgb, var(--bronze) 35%, transparent); outline-offset:0;
}
.form .btn{ justify-self:start; }
.form__nota{ font-size:.82rem; color:var(--faint); }

/* Banda CTA oscura ------------------------------------------------------- */
.banda{
  background:var(--ink); color:var(--paper);
  padding:clamp(3.25rem, 7vw, 5rem) var(--pad);
}
.banda .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; }
.banda h2{ font-size:clamp(1.5rem, 3.2vw, 2.15rem); max-width:24ch; }
.banda p{ color:#B9B4A6; margin-top:.6rem; }
.banda .btn{ border-color:var(--paper); color:var(--paper); }
.banda .btn:hover{ background:var(--paper); color:var(--ink); }

/* Pie -------------------------------------------------------------------- */
.pie{ border-top:1px solid var(--line-strong); background:var(--paper); }
.pie__rejilla{
  max-width:var(--max); margin-inline:auto; padding:clamp(2.25rem, 5vw, 3.25rem) var(--pad) 1.75rem;
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.4fr); gap:2.5rem; align-items:start;
}
.pie__marca-col{ display:flex; align-items:center; gap:1.15rem; }
.pie__marca{ flex:0 0 auto; line-height:0; }
.pie__marca img{ width:96px; height:96px; object-fit:contain; }
.pie__identidad{ min-width:0; }
.pie__nombre{ font-family:var(--f-display); font-weight:600; font-size:1.22rem; margin-top:0; }
.pie__tag{ font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); margin-top:.3rem; }
.pie__legal{ font-size:.86rem; color:var(--graphite); line-height:1.8; font-family:"FA Marcas", var(--f-ui); display:grid; gap:.35rem; align-content:start; }
.pie__legal a{
  color:var(--graphite);
  text-decoration:underline; text-decoration-color:var(--line-strong);
  text-decoration-thickness:1px; text-underline-offset:.22em;
}
.pie__legal a:hover{ color:var(--ink); }
.pie__base{
  max-width:var(--max); margin-inline:auto; padding:0 var(--pad) 1.5rem;
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  font-family:var(--f-mono); font-size:.74rem; color:var(--faint);
}

/* Redes sociales: círculos sobrios dentro del sistema */
.sociales{ list-style:none; padding:0; margin:1.1rem 0 0; display:flex; gap:.6rem; }
.sociales a{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.35rem; height:2.35rem; border-radius:50%;
  border:1px solid var(--line-strong); color:var(--graphite);
  text-decoration:none; transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.sociales a:hover{ border-color:var(--ink); color:var(--ink); background:var(--white); }
.sociales svg{ width:1.05rem; height:1.05rem; fill:currentColor; }
.sociales a.pendiente{ opacity:.4; cursor:default; }

/* Privacidad ------------------------------------------------------------- */
.legal h2{ font-size:1.15rem; margin-top:2rem; border-top:1px solid var(--line-strong); padding-top:1rem; font-family:var(--f-ui); font-weight:600; }
.legal p{ color:#2E2C26; margin-top:.7rem; }
.legal .vigente{ color:var(--faint); font-size:.9rem; margin-top:.8rem; }

/* Responsive -------------------------------------------------------------- */
@media (min-width:920px){
  .hero__rejilla{ grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); }
}
@media (max-width:919px){
  .nav{ display:none; }
  .menu-movil{ display:block; position:relative; }
  .top__barra{ flex-wrap:nowrap; }
}
@media (max-width:820px){
  .linea{ grid-template-columns:1fr; gap:.4rem; }
  .linea .ir{ margin-top:.4rem; }
  .firma{ grid-template-columns:1fr; }
  .tarjeta-equipo{ grid-template-columns:6.5rem minmax(0,1fr); }
  .tarjeta-equipo .foto{ width:6.5rem; }
  .contenido-linea .wrap{ grid-template-columns:1fr; }
  .contacto{ grid-template-columns:1fr; }
  .miembro{ grid-template-columns:1fr; }
  .miembro .foto{ max-width:19rem; }
  .pie__rejilla{ grid-template-columns:1fr; }
}