/* ============================================================
   IA GOLF — QUIÉN HAY DETRÁS
   Mismos tokens, misma tipografía y mismas esquinas que la home:
   crema y verde calle, Instrument Serif de display, Geist de texto
   y Geist Mono en los ladillos numerados.

   Es la hermana de holeview.es/quien-hay-detras/, pero NO la misma
   página: allí la pregunta es "¿entiende de golf?" y aquí es
   "¿seguiréis existiendo dentro de dos años?".
   ============================================================ */
:root{
  --bone:      oklch(0.975 0.008 92);
  --bone-2:    oklch(0.955 0.012 90);
  --bone-3:    oklch(0.92 0.015 88);
  --ink:       oklch(0.18 0.01 150);
  --ink-2:     oklch(0.32 0.012 150);
  /* --ink-3 de la home es 0.52 y da 3.9 de contraste sobre el crema:
     por debajo del 4.5 que pide la WCAG para texto pequeño, y los
     ladillos van a 12 px. Aquí baja a 0.46 → 4.87. Medido. */
  --ink-3:     oklch(0.46 0.014 150);
  --line:      oklch(0.88 0.012 90);
  --line-2:    oklch(0.82 0.015 90);
  --fairway:   oklch(0.38 0.07 152);
  --fairway-2: oklch(0.30 0.065 152);
  --fairway-3: oklch(0.52 0.08 150);
  --gold:      oklch(0.78 0.10 82);
  --wa:        #25D366;

  --r-sm: 6px; --r: 10px; --r-lg: 18px; --r-xl: 28px;
  --shadow-1: 0 1px 0 rgba(20,30,20,0.04), 0 1px 2px rgba(20,30,20,0.05);
  --shadow-2: 0 10px 40px -12px rgba(20,40,25,0.18), 0 2px 6px rgba(20,40,25,0.06);

  --display: "Instrument Serif", "Times New Roman", serif;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  color-scheme: light;
}

*{ box-sizing: border-box }
html, body{ margin:0; padding:0 }
body{
  font-family: var(--sans); background: var(--bone); color: var(--ink);
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1,h2,h3{ font-family: var(--display); font-weight: 400; margin:0; line-height:1.06; letter-spacing:-0.01em }
p{ margin:0; text-wrap: pretty }
a{ color: var(--fairway) }
/* height:auto OBLIGATORIO: las <img> llevan width/height como atributo para
   que la página no dé saltos, y sin esto se estiran al tocarles el ancho. */
img{ display:block; max-width:100%; height:auto }

.wrap{ max-width:1240px; margin:0 auto; padding:0 28px }
.wrap-txt{ max-width:720px; margin:0 auto; padding:0 28px }

.eyebrow{
  font-family: var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform: uppercase; color: var(--ink-3);
  display:inline-flex; align-items:center; gap:10px; margin:0 0 18px;
}
.eyebrow::before{ content:''; width:22px; height:1px; background: var(--line-2) }

/* ---------- barra ---------- */
.barra{ border-bottom:1px solid var(--line); background: var(--bone); position:sticky; top:0; z-index:30 }
.barra .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px }
.barra a{ text-decoration:none }
.brand{ display:flex; align-items:center; gap:11px; color: var(--ink) }
.brand-mark{
  width:32px; height:32px; background-color: currentColor; color: var(--fairway);
  -webkit-mask: url("../assets/ia-golf-logo.svg") center / contain no-repeat;
          mask: url("../assets/ia-golf-logo.svg") center / contain no-repeat;
  flex-shrink:0;
}
.brand-name{ font-family: var(--display); font-size:20px; letter-spacing:-0.01em }
.barra .volver{ font-size:14px; color: var(--ink-2) }
.barra .volver:hover{ color: var(--ink) }

/* ---------- entrada ---------- */
.entrada{ padding: clamp(40px,7vw,84px) 0 clamp(36px,6vw,68px) }
.entrada .wrap{ display:grid; gap:clamp(28px,5vw,60px); align-items:center }
@media (min-width:960px){ .entrada .wrap{ grid-template-columns:1.02fr .98fr } }
.entrada h1{ font-size: clamp(38px,5.4vw,72px) }
.entrada .lead{ margin-top:26px; font-size:clamp(17px,1.5vw,19px); color: var(--ink-2) }
.entrada .lead + .lead{ margin-top:16px }
.entrada .remate{
  margin-top:30px; padding-top:24px; border-top:1px solid var(--line);
  font-family: var(--display); font-size:clamp(22px,2.7vw,30px); line-height:1.24; color: var(--fairway);
}
.retrato-campo{ margin:0 }
.retrato-campo img{ width:100%; border-radius: var(--r-lg); box-shadow: var(--shadow-2) }
.retrato-campo figcaption{ margin-top:12px; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) }

/* ---------- bloques ---------- */
.bloque{ padding: clamp(40px,6vw,76px) 0 }
.bloque--crema{ background: var(--bone-2); border-block:1px solid var(--line) }
.bloque h2{ font-size: clamp(28px,3.6vw,44px); margin-bottom:20px }
.bloque p + p{ margin-top:15px }
.bloque p{ color: var(--ink-2) }

/* quién: retrato + texto */
.quien{ display:grid; gap:clamp(24px,4vw,46px); align-items:start }
@media (min-width:860px){ .quien{ grid-template-columns:280px 1fr } }
.quien .foto img{ width:100%; border-radius: var(--r-lg); box-shadow: var(--shadow-1) }
.quien .foto figcaption{ margin-top:11px; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3) }

/* el aval: tres cifras */
.aval{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:14px }
@media (min-width:720px){ .aval{ grid-template-columns:repeat(3,1fr) } }
.aval li{ background: var(--bone); border:1px solid var(--line); border-radius: var(--r); padding:20px 22px; box-shadow: var(--shadow-1) }
.aval .n{ font-family: var(--display); font-size:40px; line-height:1; color: var(--fairway); display:block }
.aval .k{ display:block; margin-top:10px; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3) }
.aval .d{ display:block; margin-top:9px; font-size:14px; color: var(--ink-2) }

/* ---------- los campos ---------- */
.campos-cab{ display:grid; gap:16px; margin-bottom:32px }
@media (min-width:880px){ .campos-cab{ grid-template-columns:1fr 1fr; gap:44px; align-items:end } }
.rejilla{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(250px,47%),1fr)); margin:0; padding:0 }
.rejilla figure{ margin:0; background: var(--bone); border:1px solid var(--line); border-radius: var(--r); overflow:hidden; box-shadow: var(--shadow-1) }
.rejilla img{ width:100%; aspect-ratio:4/3; object-fit:cover }
.rejilla figcaption{ padding:12px 14px 15px }
.rejilla .club{ display:block; font-size:14.5px; line-height:1.3 }
.rejilla .donde{ display:block; margin-top:5px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color: var(--ink-3) }
.rejilla .destacada{ grid-column: span 2 }
.rejilla .destacada img{ aspect-ratio:16/9 }
@media (max-width:620px){
  .rejilla{ gap:9px }
  .rejilla .destacada{ grid-column: span 1 }
  .rejilla figcaption{ padding:9px 10px 11px }
  .rejilla .club{ font-size:13px }
}
.nota-campos{ margin-top:24px; font-size:13.5px; color: var(--ink-3) }

/* ---------- los tres proyectos ---------- */
.proyectos{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:14px }
@media (min-width:820px){ .proyectos{ grid-template-columns:repeat(3,1fr) } }
.proyectos li{ background: var(--bone); border:1px solid var(--line); border-radius: var(--r); padding:24px 24px 26px; display:flex; flex-direction:column; box-shadow: var(--shadow-1) }
.proyectos li.aqui{ border-color: var(--fairway); box-shadow: var(--shadow-2) }
.proyectos .marca{ font-family: var(--display); font-size:26px; color: var(--fairway) }
.proyectos .dolor{ margin-top:7px; font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color: var(--ink-3) }
.proyectos p{ margin-top:14px; font-size:14.5px; color: var(--ink-2) }
.proyectos a{ margin-top:18px; font-size:14px; text-decoration:none; align-self:flex-start; border-bottom:1px solid var(--line-2); padding-bottom:2px }
.proyectos a:hover{ border-color: var(--fairway) }
.proyectos .estas{ margin-top:18px; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-3) }

/* ---------- cierre ---------- */
.cierre{ padding: clamp(44px,7vw,86px) 0; text-align:center }
.cierre .frase{ font-family: var(--display); font-size:clamp(26px,3.8vw,44px); line-height:1.18; max-width:19ch; margin-inline:auto; color: var(--fairway) }
.cierre .firma{ margin-top:26px; font-size:15px; color: var(--ink-2) }
.cierre .botones{ margin-top:30px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.btn{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; padding:13px 24px; border-radius:999px; font-size:14.5px; border:1px solid var(--ink); color: var(--ink) }
.btn--ink{ background: var(--ink); color: var(--bone) }
.btn--wa{ background: var(--wa); border-color: var(--wa); color:#0b3d20; font-weight:500 }
.btn:hover{ transform: translateY(-1px) }
.btn{ transition: transform .16s ease }

/* ---------- pie ---------- */
.pie{ background: var(--ink); color: var(--bone); padding:34px 0 44px; margin-top:0 }
.pie .wrap{ display:flex; flex-wrap:wrap; gap:16px 30px; align-items:center; justify-content:space-between }
.pie a{ color: rgba(255,255,255,.78); text-decoration:none }
.pie a:hover{ color:#fff }
.pie .brand{ color: var(--bone) }
.pie .brand-mark{ color: var(--bone) }
.pie .legales{ display:flex; gap:18px; flex-wrap:wrap; font-size:13px }
.pie .lema{ font-family: var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; width:100%; color: rgba(255,255,255,.62) }