/* ══════════════════════════════════════════════════════════════════
   Brain Experts · sitio institucional
   Paleta: blanco, negro y el magenta de la marca (#E6007F), usado
   solo como acento. Todo el peso visual lo cargan el espacio en
   blanco y la tipografía — nunca sombras ni colores de relleno.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --tinta:#101012;        /* texto principal            */
  --tinta2:#55555C;       /* texto secundario           */
  --tinta3:#8A8A92;       /* apoyos, pies de página     */
  --linea:#E7E7EA;        /* bordes finos               */
  --linea2:#F2F2F4;       /* separadores muy suaves     */
  --fondo:#FFFFFF;
  --fondo2:#FAFAFB;       /* bloques apenas despegados  */
  --marca:#E6007F;        /* magenta de la logo         */
  --ancho:1120px;
  --r:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.65; letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}

h1,h2,h3,.jost{font-family:'Jost','Inter',sans-serif; letter-spacing:-0.02em}

.envoltorio{width:100%; max-width:var(--ancho); margin:0 auto; padding:0 24px}

/* ── cabecera ───────────────────────────────────────────────────── */
.cabecera{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--linea2);
}
.cabecera__fila{display:flex; align-items:center; justify-content:space-between;
  height:76px; gap:24px}
.cabecera__logo img{height:42px; width:auto}
.menu{display:flex; gap:30px; list-style:none; margin:0; padding:0}
.menu a{text-decoration:none; font-size:14.5px; color:var(--tinta2);
  transition:color .15s}
.menu a:hover{color:var(--tinta)}
.boton{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  background:var(--tinta); color:#fff; font-size:14.5px; font-weight:500;
  padding:11px 22px; border-radius:999px; transition:opacity .15s;
  white-space:nowrap;
}
.boton:hover{opacity:.85}
.boton--linea{background:transparent; color:var(--tinta);
  border:1px solid var(--linea)}
.boton--linea:hover{border-color:var(--tinta); opacity:1}

/* ── rótulo de sección ──────────────────────────────────────────── */
.rotulo{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tinta3); margin:0 0 20px;
}
.rotulo::before{content:''; width:7px; height:7px; border-radius:50%;
  background:var(--marca); flex:none}

/* ── portada ────────────────────────────────────────────────────── */
.portada{padding:96px 0 84px; border-bottom:1px solid var(--linea2)}
.portada h1{
  font-size:clamp(38px,6.2vw,68px); line-height:1.08; font-weight:500;
  margin:0 0 28px; max-width:16ch;
}
.portada h1 em{font-style:normal; color:var(--marca)}
.portada__texto{font-size:clamp(17px,2.1vw,20px); color:var(--tinta2);
  max-width:60ch; margin:0 0 38px}
.portada__acciones{display:flex; flex-wrap:wrap; gap:12px}

/* ── cinta de hechos ────────────────────────────────────────────── */
.cinta{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--linea); border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea)}
.cinta__celda{background:var(--fondo); padding:34px 28px}
.cinta__t{font-family:'Jost',sans-serif; font-size:19px; font-weight:500;
  margin:0 0 7px}
.cinta__d{font-size:15px; color:var(--tinta2); margin:0}

/* ── secciones ──────────────────────────────────────────────────── */
.seccion{padding:92px 0}
.seccion--suave{background:var(--fondo2); border-top:1px solid var(--linea2);
  border-bottom:1px solid var(--linea2)}
.seccion h2{font-size:clamp(28px,4vw,42px); line-height:1.15; font-weight:500;
  margin:0 0 24px; max-width:20ch}
.seccion__intro{font-size:18px; color:var(--tinta2); max-width:62ch; margin:0}

.dos{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:64px; align-items:start}
.texto p{color:var(--tinta2); margin:0 0 20px}
.texto p:last-child{margin-bottom:0}
.texto strong{color:var(--tinta); font-weight:500}

/* ── tarjetas ───────────────────────────────────────────────────── */
.tarjetas{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
  margin-top:48px}
.tarjeta{border:1px solid var(--linea); border-radius:var(--r);
  padding:34px 30px; background:var(--fondo); transition:border-color .18s}
.tarjeta:hover{border-color:#CFCFD6}
.tarjeta__n{font-family:'Jost',sans-serif; font-size:13px; font-weight:500;
  letter-spacing:.1em; color:var(--marca); display:block; margin-bottom:16px}
.tarjeta h3{font-size:21px; font-weight:500; margin:0 0 12px}
.tarjeta p{font-size:15.5px; color:var(--tinta2); margin:0}

/* ── pasos ──────────────────────────────────────────────────────── */
.pasos{display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin-top:52px; border-top:1px solid var(--linea)}
.paso{padding:32px 28px 0 0; border-right:1px solid var(--linea)}
.paso:last-child{border-right:0; padding-right:0}
.paso__n{font-family:'Jost',sans-serif; font-size:40px; font-weight:400;
  line-height:1; color:#D7D7DE; display:block; margin-bottom:18px}
.paso h3{font-size:19px; font-weight:500; margin:0 0 10px}
.paso p{font-size:15.5px; color:var(--tinta2); margin:0}

/* ── valores ────────────────────────────────────────────────────── */
.valores{display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  margin-top:48px}
.valor{padding:30px 34px 30px 0; border-top:1px solid var(--linea)}
.valor:nth-child(odd){padding-right:48px}
.valor h3{font-size:19px; font-weight:500; margin:0 0 9px;
  display:flex; align-items:baseline; gap:11px}
.valor h3::before{content:''; width:6px; height:6px; border-radius:50%;
  background:var(--marca); flex:none; transform:translateY(-2px)}
.valor p{font-size:15.5px; color:var(--tinta2); margin:0; padding-left:17px}

/* ── contacto ───────────────────────────────────────────────────── */
.contacto{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:48px;
  align-items:center; border:1px solid var(--linea); border-radius:var(--r);
  padding:48px 44px}
.contacto h2{margin-bottom:14px}
.contacto p{color:var(--tinta2); margin:0; max-width:48ch}
.contacto__datos{display:flex; flex-direction:column; gap:10px;
  font-size:15.5px}
.contacto__datos a{text-decoration:none; border-bottom:1px solid var(--linea);
  padding-bottom:2px; transition:border-color .15s}
.contacto__datos a:hover{border-color:var(--marca)}

/* ── pie ────────────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--linea); padding:54px 0 44px; margin-top:0}
.pie__fila{display:flex; justify-content:space-between; align-items:flex-start;
  gap:48px; flex-wrap:wrap}
.pie__marca img{height:36px; width:auto; margin-bottom:16px}
.pie__legal{font-size:13.5px; color:var(--tinta3); margin:0; max-width:44ch;
  line-height:1.6}
.pie__enlaces{display:flex; gap:26px; flex-wrap:wrap}
.pie__enlaces a{font-size:14px; color:var(--tinta2); text-decoration:none}
.pie__enlaces a:hover{color:var(--tinta)}
.pie__abajo{margin-top:40px; padding-top:22px; border-top:1px solid var(--linea2);
  font-size:13px; color:var(--tinta3)}

/* ── páginas de texto legal ─────────────────────────────────────── */
.legal{padding:72px 0 92px; max-width:740px}
.legal h1{font-size:clamp(30px,4.5vw,44px); font-weight:500; margin:0 0 10px}
.legal__fecha{font-size:14px; color:var(--tinta3); margin:0 0 44px}
.legal h2{font-size:21px; font-weight:500; margin:44px 0 14px}
.legal p,.legal li{color:var(--tinta2); font-size:16.5px}
.legal ul{padding-left:20px}
.legal li{margin-bottom:8px}
.legal a{color:var(--tinta)}
.aviso{border:1px solid var(--linea); border-left:3px solid var(--marca);
  border-radius:8px; padding:18px 22px; font-size:15px; color:var(--tinta2);
  background:var(--fondo2)}

/* ── teléfono ───────────────────────────────────────────────────── */
@media (max-width:860px){
  .menu{display:none}
  .seccion{padding:64px 0}
  .portada{padding:64px 0 56px}
  .dos{grid-template-columns:1fr; gap:36px}
  .tarjetas{grid-template-columns:1fr}
  .cinta{grid-template-columns:1fr}
  .pasos{grid-template-columns:1fr}
  .paso{border-right:0; border-bottom:1px solid var(--linea);
    padding:26px 0; }
  .paso:last-child{border-bottom:0}
  .valores{grid-template-columns:1fr}
  .valor,.valor:nth-child(odd){padding:26px 0}
  .contacto{grid-template-columns:1fr; padding:34px 26px; gap:30px}
}