/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/manrope-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/manrope-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/manrope-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/manrope-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/manrope-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/manrope-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/manrope-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/manrope-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/manrope-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/manrope-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/inter-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/inter-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/jetbrains-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/jetbrains-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/jetbrains-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =========================================================
   VORLAN — hoja de estilos
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Escala de superficies: las secciones alternan de valor para que la
     página tenga ritmo en lugar de un único negro plano de arriba abajo. */
  --bg:            #0c0b0a;
  --bg-alt:        #141211;
  --bg-deep:       #090807;
  --panel:         #16130f;
  --panel-2:       #1b1714;
  --line:          rgba(255,255,255,.14);
  --line-soft:     rgba(255,255,255,.08);

  /* luz blanca: el contrapunto frío al cobre, lo que evita que todo
     el sitio se lea como una sola capa de rojo */
  --sheen:         rgba(255,255,255,.55);
  --sheen-soft:    rgba(255,255,255,.07);

  --text:          #f7f5f3;
  --text-2:        #c4bdb8;
  --text-3:        #8a827c;

  --accent:        #e2503f;
  --accent-2:      #f4795e;
  --accent-deep:   #8d2a1c;
  --copper:        #c98a63;

  --font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  --wrap: 1280px;
  --pad: clamp(20px, 5vw, 64px);
  --r-lg: 20px;
  --r-md: 14px;

  --ease: cubic-bezier(.22,.7,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; background:var(--bg); }
body{
  margin:0;
  background:transparent;
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
[hidden]{ display:none !important; }

/* Textura de hormigón bajo toda la página, recortada del diseño de referencia.
   Va fija: el contenido pasa por delante de la pared, no la arrastra. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(255,255,255,.05), transparent 58%),
    linear-gradient(180deg, rgba(12,11,10,.8), rgba(10,9,8,.9)),
    url("../assets/img/fondo-hormigon.webp") center/cover no-repeat;
  filter:brightness(1.5) contrast(.92) saturate(.6);
}

/* Grano de película sobre toda la página. Rompe los degradados perfectos,
   que es lo que hace que un fondo oscuro se lea como render plano. */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
a{ color:inherit; text-decoration:none; }
button,input,textarea{ font:inherit; color:inherit; }
h1,h2,h3,p,dl,dd,figure,blockquote{ margin:0; }
ol,ul{ margin:0; padding:0; list-style:none; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; left:50%; top:-100px; transform:translateX(-50%);
  background:var(--accent); color:#fff; padding:10px 20px; border-radius:0 0 10px 10px;
  z-index:200; transition:top .2s;
}
.skip-link:focus{ top:0; }

:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; border-radius:4px; }

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

/* ---------- Tipografía compartida ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--text-2); display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.eyebrow--wide{ letter-spacing:.32em; font-size:10.5px; color:var(--text-3); display:block; margin:14px 0 34px; }
.dot{ width:6px; height:6px; background:var(--accent); flex:none; }

.h2{
  font-family:var(--font-display);
  font-size:clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight:600; line-height:1.04; letter-spacing:-.025em;
}
.h2 em{ font-style:normal; color:var(--accent); }

.head{ margin-bottom:clamp(38px,5vw,64px); }
.head__lead{ color:var(--text-2); font-size:15px; margin-top:18px; line-height:1.75; }
.head--split{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }
.head--split .head__lead{ margin:0 0 8px; max-width:420px; }

.rule{ display:block; width:34px; height:2px; background:var(--accent); border-radius:2px; margin:14px 0 16px; }

/* ---------- Botones ---------- */
.btn-pill{
  display:inline-flex; align-items:center; gap:16px;
  background:#f4f1ef; color:#111; border:0; cursor:pointer;
  padding:8px 8px 8px 30px; border-radius:999px;
  font-size:15px; font-weight:500; font-family:var(--font-body);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-pill:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(226,80,63,.28); }

/* variante roja del diseño: la llamada principal del hero */
.btn-pill--accent{ background:var(--accent); color:#fff; }
.btn-pill--accent .btn-pill__arrow{ background:rgba(255,255,255,.16); color:#fff; }
.btn-pill--accent:hover{ background:var(--accent-2); box-shadow:0 16px 40px rgba(226,80,63,.42); }
.btn-pill__arrow{
  width:38px; height:38px; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; flex:none;
  transition:transform .3s var(--ease);
}
.btn-pill__arrow svg{ width:18px; height:18px; }
.btn-pill:hover .btn-pill__arrow{ transform:translateX(3px); }

.link-mono{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-2); display:inline-flex; gap:14px; align-items:center; transition:color .25s;
}
.link-mono span{ color:var(--accent); }
.link-mono:hover{ color:var(--text); }

/* Botón con marco de esquinas */
.btn-frame{
  position:relative; padding:11px 24px; font-size:14px; color:var(--text);
  border:1px solid transparent; transition:color .25s;
}
.btn-frame::before,.btn-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1px solid var(--accent);
}
.btn-frame::before{ clip-path:polygon(0 0,34% 0,34% 1.6px,1.6px 1.6px,1.6px 34%,0 34%,0 100%,34% 100%,34% calc(100% - 1.6px),1.6px calc(100% - 1.6px),1.6px 66%,0 66%); }
.btn-frame::after{ clip-path:polygon(100% 0,66% 0,66% 1.6px,calc(100% - 1.6px) 1.6px,calc(100% - 1.6px) 34%,100% 34%,100% 100%,66% 100%,66% calc(100% - 1.6px),calc(100% - 1.6px) calc(100% - 1.6px),calc(100% - 1.6px) 66%,100% 66%); }
.btn-frame:hover{ color:var(--accent-2); }

/* ---------- Orbes de fondo ---------- */
.orb{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  border:1px solid rgba(226,130,95,.22);
  background:radial-gradient(circle at 50% 50%, rgba(226,80,63,.035), rgba(226,80,63,0) 62%);
  box-shadow:0 0 90px rgba(226,90,60,.09), inset 0 0 120px rgba(226,90,60,.035);
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s, border-color .35s, backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(6,5,5,.78); backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.nav__inner{
  max-width:1480px; margin-inline:auto; padding:18px var(--pad);
  display:flex; align-items:center; gap:32px;
}
.brand{ display:flex; align-items:center; gap:12px; flex:none; }
/* La V del logo, redibujada en vector: hereda el color del contexto, así que
   se lee igual sobre las secciones oscuras y sobre la de equipo en claro.
   El PNG original se sigue usando como favicon. */
.brand__mark{
  width:19px; height:20px; color:var(--text);
  transition:transform .4s var(--ease), filter .4s;
}
.brand:hover .brand__mark{ transform:scale(1.08); filter:drop-shadow(0 0 12px rgba(255,255,255,.35)); }
.brand__word{ font-family:var(--font-display); font-weight:500; letter-spacing:.14em; font-size:19px; }

.nav__links{ display:flex; gap:clamp(18px,2.6vw,44px); margin-inline:auto; }
.nav__links a{
  position:relative; font-size:15px; color:var(--text-2); padding:6px 0;
  transition:color .25s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after,.nav__links a.is-active::after{ transform:scaleX(1); }
.nav__links a.is-active{ color:var(--text); }

.nav__end{ display:flex; align-items:center; gap:18px; flex:none; }
.lang{
  background:none; border:0; cursor:pointer; font-family:var(--font-mono);
  font-size:12px; letter-spacing:.18em; color:var(--text-2); transition:color .25s;
  text-decoration:none;
}
.lang:hover{ color:var(--text); }
.nav__sep{ width:1px; height:16px; background:var(--line); }

.nav__burger{
  display:none; background:none; border:0; cursor:pointer; width:34px; height:34px;
  flex-direction:column; justify-content:center; gap:6px; padding:0;
}
.nav__burger span{ display:block; height:1.5px; background:var(--text); transition:transform .3s var(--ease), opacity .2s; }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

.mobile-menu{
  position:fixed; top:70px; left:0; right:0; z-index:99;
  background:rgba(8,6,6,.97); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  padding:14px var(--pad) 26px; display:flex; flex-direction:column; gap:4px;
  animation:slideDown .3s var(--ease);
}
.mobile-menu a{ padding:14px 0; border-bottom:1px solid var(--line-soft); color:var(--text-2); }
.mobile-menu__cta{
  margin-top:16px; border:1px solid var(--accent)!important; color:var(--accent-2)!important;
  text-align:center; border-radius:999px; padding:14px!important;
}
@keyframes slideDown{ from{ opacity:0; transform:translateY(-10px); } }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center; padding:140px 0 90px; overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }

/* La V es la fotografía del diseño, no un SVG: trae la pared de hormigón,
   el haz y el reflejo en el suelo. */
.hero__laser{
  position:absolute; right:0; top:0; height:100%; width:66%; max-width:none;
  object-fit:cover; object-position:center 42%;
  /* el canto izquierdo se funde: si no, la foto deja una línea vertical dura */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 14%, #000 34%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 14%, #000 34%);
}
/* la foto ya trae su propio destello; este solo lo hace respirar */
.hero__flare{
  position:absolute; right:29%; top:87%; width:min(26vw,330px); aspect-ratio:1;
  transform:translate(50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,236,225,.16) 0%, rgba(226,80,63,.1) 34%, transparent 68%);
  animation:pulseCore 5s ease-in-out infinite;
}

/* polvo de estrellas: va en .hero, no en .hero__bg, para quedar por encima
   del degradado que oscurece el lado del texto */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.2px 1.2px at 26% 68%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.8px 1.8px at 41% 14%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.1px 1.1px at 58% 44%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 73% 26%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.3px 1.3px at 84% 62%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.7px 1.7px at 92% 18%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.2px 1.2px at 34% 88%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.4px 1.4px at 66% 78%, rgba(255,255,255,.65), transparent);
  animation:titilar 7s ease-in-out infinite;
}
@keyframes titilar{ 0%,100%{ opacity:.45; } 50%{ opacity:.9; } }

/* halo blanco frío en lo alto del hero */
.hero::before{
  content:""; position:absolute; top:-8%; left:50%; transform:translateX(-50%);
  width:min(1300px,96%); height:600px; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 55% 100% at 50% 0%, rgba(255,255,255,.09), transparent 70%);
}
/* funde la foto hacia la izquierda para que el titular no compita con ella */
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(10,9,8,.9) 0%, rgba(10,9,8,.72) 24%, rgba(10,9,8,.28) 40%, transparent 56%);
}
@keyframes pulseCore{
  0%,100%{ opacity:.7; transform:translate(50%,-50%) scale(1); }
  50%{ opacity:1; transform:translate(50%,-50%) scale(1.1); }
}

.hero__inner{ position:relative; z-index:1; }
.hero__title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.6rem,5.6vw,4.6rem); line-height:1.04; letter-spacing:-.03em;
  animation:fadeUp 1s .05s var(--ease) both;
}
.hero__title em{ font-style:normal; color:var(--accent); }
.hero__lead{
  margin-top:28px; max-width:42ch;
  color:var(--text-2); font-size:clamp(15px,1.15vw,16.5px); line-height:1.85;
  animation:fadeUp 1s .18s var(--ease) both;
}
.hero__actions{
  margin-top:40px; display:flex; align-items:center; gap:clamp(20px,3vw,44px); flex-wrap:wrap;
  animation:fadeUp 1s .3s var(--ease) both;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(26px); } }

/* =========================================================
   SECCIONES
   ========================================================= */
.section{ position:relative; padding:clamp(84px,10vw,140px) 0; overflow:hidden; }
/* En desktop el baseline de 140px por lado apilaba 280px entre secciones;
   se recorta un tercio. Móvil (<901px) conserva la escala original. */
@media (min-width:901px){
  .section{ padding:clamp(72px,8vw,96px) 0; }
  .hero{ padding-bottom:60px; }
}
.section .wrap{ position:relative; z-index:1; }

/* Luz cenital blanca: entra por arriba de cada sección y hace de contrapunto
   frío al cobre. Es lo que da sensación de foco en vez de fondo uniforme. */
.section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1200px,94%); height:min(520px,60%); pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 62% 100% at 50% 0%, rgba(255,255,255,.115), transparent 74%);
}

/* Alternancia de valor entre secciones, con una línea de luz que las separa.
   Semitransparentes: la textura de hormigón del body tiene que seguir leyéndose. */
.section--sectores,
.section--construimos,
.section--trayectoria,
.section--contacto{ background:rgba(20,18,17,.55); }
.section--sectores::after,
.section--construimos::after,
.section--trayectoria::after,
.section--contacto::after{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22) 22%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.22) 78%, transparent);
}

.orb--met{ width:min(76vw,940px); aspect-ratio:1; right:-26vw; top:-24%; }
.orb--sec-a{ width:min(56vw,700px); aspect-ratio:1; left:-26vw; top:22%; }
.orb--sec-b{ width:min(52vw,640px); aspect-ratio:1; right:-22vw; top:-8%; }
.orb--eq-a{ width:min(58vw,720px); aspect-ratio:1; left:-24vw; top:26%; }
.orb--eq-b{ width:min(64vw,800px); aspect-ratio:1; right:-28vw; top:-2%; }
.orb--con-a{ width:min(62vw,780px); aspect-ratio:1; left:-30vw; top:10%; }
.orb--con-b{ width:min(58vw,720px); aspect-ratio:1; right:-26vw; bottom:-14%; }
.orb--tra-a{ width:min(60vw,760px); aspect-ratio:1; left:-28vw; top:8%; }
.orb--tra-b{ width:min(54vw,680px); aspect-ratio:1; right:-24vw; top:-10%; }
.orb--dat-a{ width:min(66vw,820px); aspect-ratio:1; left:50%; top:-20%; transform:translateX(-50%); }
.orb--cta-a{ width:min(54vw,660px); aspect-ratio:1; left:-24vw; bottom:-16%; }
.orb--cta-b{ width:min(48vw,580px); aspect-ratio:1; right:-18vw; top:-10%; }

/* ---------- Tarjetas base ---------- */
.card{
  position:relative; overflow:hidden;
  background:linear-gradient(158deg, #322a26 0%, #201b19 46%, #171413 100%);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 30px 0;
  display:flex; flex-direction:column;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease), background .4s;
}
/* filo de luz blanca en el canto superior: el detalle que separa una
   superficie con materia de un rectángulo relleno de color */
.card::before{
  content:""; position:absolute; top:0; left:16%; right:16%; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, var(--sheen), transparent);
  opacity:.45; transition:opacity .45s var(--ease), left .55s var(--ease), right .55s var(--ease);
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(300px 200px at var(--mx,50%) var(--my,0%), rgba(255,255,255,.09), transparent 68%),
    radial-gradient(460px 260px at var(--mx,50%) var(--my,0%), rgba(226,80,63,.10), transparent 72%);
  opacity:0; transition:opacity .4s;
}
.card:hover{
  transform:translateY(-5px);
  border-color:rgba(255,255,255,.28);
  background:linear-gradient(158deg, #3f3530 0%, #262020 46%, #1b1716 100%);
  box-shadow:0 26px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
}
.card:hover::before{ opacity:1; left:0; right:0; }
.card:hover::after{ opacity:1; }

.card__icon{
  width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  border:1px solid rgba(226,80,63,.45); color:var(--accent);
  background:rgba(226,80,63,.07); margin-bottom:26px; flex:none;
}
.card__icon svg{ width:20px; height:20px; }
.card__title{ font-family:var(--font-display); font-size:1.25rem; font-weight:600; letter-spacing:-.015em; line-height:1.3; }
.card__title--lg{ font-size:1.4rem; }
.card__text{ color:var(--text-2); font-size:14.5px; line-height:1.72; }
.card__num{
  font-family:var(--font-mono); font-size:13px; color:var(--accent);
  letter-spacing:.08em; margin-bottom:14px;
}
.card__art{ margin-top:auto; padding-top:26px; display:flex; justify-content:center; align-items:flex-end; }
.card__art .art{ width:100%; height:auto; }

/* --- Tarjetas de servicios: texto a la izquierda, imagen integrada a la derecha ---
   La rejilla coloca los cuatro primeros hijos en la columna 1 y la
   imagen ocupa entera la 2, sin tocar el orden del HTML. */
.card--build{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  grid-template-rows:auto auto auto 1fr;
  column-gap:clamp(8px,1vw,18px);
  align-items:start;
  padding:clamp(24px,2.2vw,32px);
}
.card--build .card__num  { grid-area:1 / 1; margin-bottom:10px; }
.card--build .card__title{ grid-area:2 / 1; font-size:clamp(1.02rem,1.25vw,1.2rem); line-height:1.28; }
.card--build .rule       { grid-area:3 / 1; margin:14px 0 14px; }
.card--build .card__text { grid-area:4 / 1; font-size:12.8px; line-height:1.68; }
.card--build .card__art  { grid-area:1 / 2 / 5 / 3; align-self:stretch; }

/* La imagen no lleva recuadro: el negro de su fondo se funde con la tarjeta
   mediante screen, así que solo flotan los objetos iluminados. */
.card__art--foto{ padding:0; margin:0; display:grid; place-items:center; height:100%; min-height:210px; }
.card__art--foto img{
  width:100%; height:100%; max-height:none; object-fit:contain;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 50%, #000 46%, transparent 88%);
          mask-image:radial-gradient(ellipse 78% 78% at 50% 50%, #000 46%, transparent 88%);
  filter:brightness(1.06) contrast(1.04);
  transition:transform .7s var(--ease), filter .7s;
}
.card--build:hover .card__art--foto img{ transform:scale(1.05); filter:brightness(1.16) contrast(1.08); }

/* Bento de tarjetas: 3 arriba, 2 abajo centradas (base compartida por
   .bento--build, que solo redefine las columnas 4 y 5) */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:22px; }
.bento > .card:nth-child(1),
.bento > .card:nth-child(2),
.bento > .card:nth-child(3){ grid-column:span 2; }
.bento > .card:nth-child(4){ grid-column:2 / span 2; }
.bento > .card:nth-child(5){ grid-column:4 / span 2; }

/* =========================================================
   MÉTODO
   ========================================================= */
/* La sección no puede recortar: rompería el position:sticky del recorrido */
.section--metodo{ overflow:clip; }
/* Solo cuando el recorrido va anclado (la condición inversa del modo lista):
   con el sticky, el contenido del método llega tarde y la luz cenital iluminaba
   520px de zona vacía —se leía como franja gris— y los paddings encadenados
   dejaban un hueco muerto. En modo lista el contenido empieza arriba y nada
   de esto hace falta. */
@media (min-width:901px) and (min-height:621px) and (prefers-reduced-motion:no-preference){
  .section--metodo{ padding-top:16px; }
  .section--metodo::before{ content:none; }
  .section--metodo{ padding-bottom:clamp(48px,5vw,72px); }
}

/* ---- Recorrido guiado por scroll ---- */
.journey{ position:relative; }
.journey__sticky{ position:sticky; top:0; min-height:100vh; min-height:100svh; display:flex; align-items:center; }
.journey__stage{
  position:relative; z-index:1; width:100%;
  display:grid; grid-template-columns:minmax(280px,360px) minmax(0,1fr); gap:clamp(34px,5vw,86px);
  align-items:center; padding-block:80px 40px;
}
.jside{ display:flex; flex-direction:column; }
.jside .head{ margin-bottom:clamp(26px,3vw,42px); }
.jside .head__lead{ margin-top:14px; font-size:14.5px; }

/* Índice lateral */
.jrail{ position:relative; }
.jrail__count{
  font-family:var(--font-display); display:flex; align-items:baseline; gap:2px; margin-bottom:22px;
  padding-top:22px; border-top:1px solid var(--line-soft);
}
.jrail__count b{ font-size:2.6rem; font-weight:600; color:var(--accent); line-height:1; font-variant-numeric:tabular-nums; }
.jrail__count i{ font-style:normal; font-size:1.1rem; color:var(--text-3); }

.jrail__list{ display:flex; flex-direction:column; gap:2px; }
.jrail__btn{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:14px; padding:11px 12px 11px 0;
  color:var(--text-3); position:relative; transition:color .35s var(--ease), padding-left .35s var(--ease);
}
.jrail__btn::before{
  content:""; position:absolute; left:0; top:50%; width:2px; height:0; background:var(--accent);
  transform:translateY(-50%); transition:height .35s var(--ease);
}
.jrail__n{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; opacity:.7; }
.jrail__t{ font-size:14.5px; }
.jrail__btn:hover{ color:var(--text-2); }
.jrail__btn.is-done{ color:var(--text-2); }
.jrail__btn.is-active{ color:var(--text); padding-left:16px; }
.jrail__btn.is-active::before{ height:24px; }
.jrail__btn.is-active .jrail__n{ color:var(--accent); opacity:1; }

.jrail__bar{ margin-top:26px; height:2px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; }
.jrail__bar span{
  display:block; height:100%; width:20%; border-radius:2px;
  background:linear-gradient(90deg, var(--accent-deep), var(--accent));
  transition:width .5s var(--ease);
}

/* Pasos apilados: solo uno visible cada vez */
.jsteps{ display:grid; }
.jstep{
  grid-area:1/1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(24px,4vw,56px); align-items:center;
  min-height:clamp(360px,54svh,520px);
  padding:clamp(30px,3.6vw,52px);
  background:linear-gradient(168deg, #342c28 0%, #211c1a 48%, #181514 100%);
  border:1px solid var(--line); border-radius:22px;
  opacity:0; visibility:hidden; transform:translateY(46px) scale(.985);
  transition:opacity .55s var(--ease), transform .55s var(--ease), visibility 0s .55s;
  box-shadow:0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09);
  position:relative;
}
/* filo de luz superior, igual que en las tarjetas */
.jstep::before{
  content:""; position:absolute; top:0; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg, transparent, var(--sheen), transparent); opacity:.5;
}
.jstep.is-active{ opacity:1; visibility:visible; transform:none; transition:opacity .55s var(--ease), transform .55s var(--ease), visibility 0s; }
.jstep.is-past{ transform:translateY(-46px) scale(.985); }

.jstep__num{
  font-family:var(--font-display); font-size:clamp(3rem,5vw,4.4rem); font-weight:200;
  color:var(--accent); line-height:.9; display:block; letter-spacing:-.03em;
}
.jstep__title{ font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:600; margin-top:14px; letter-spacing:-.02em; }
.jstep .rule{ width:44px; margin:18px 0 20px; }
.jstep__text{ color:var(--text-2); font-size:clamp(14.5px,1.15vw,16.5px); line-height:1.8; max-width:44ch; }
.jstep__tag{
  margin-top:28px; display:flex; align-items:flex-start; gap:13px;
  font-size:13.5px; line-height:1.7; color:var(--text-2);
  border-top:1px solid var(--line-soft); padding-top:20px; max-width:46ch;
}
.jstep__tag span{ width:7px; height:7px; background:var(--accent); flex:none; margin-top:8px; }
.jstep__art{ display:grid; place-items:center; }
.jstep__art .art{ width:100%; max-width:300px; height:auto; filter:drop-shadow(0 0 44px rgba(226,80,63,.34)); }

/* Entrada escalonada del contenido del paso activo */
.jstep.is-active .jstep__num,
.jstep.is-active .jstep__title,
.jstep.is-active .rule,
.jstep.is-active .jstep__text,
.jstep.is-active .jstep__tag,
.jstep.is-active .jstep__art{ animation:stepIn .6s var(--ease) both; }
.jstep.is-active .jstep__title{ animation-delay:.06s; }
.jstep.is-active .rule{ animation-delay:.1s; }
.jstep.is-active .jstep__text{ animation-delay:.14s; }
.jstep.is-active .jstep__tag{ animation-delay:.2s; }
.jstep.is-active .jstep__art{ animation-delay:.12s; }
@keyframes stepIn{ from{ opacity:0; transform:translateY(18px); } }

.journey__hint{
  margin-top:30px; display:flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-3);
  transition:opacity .4s;
}
.journey__hint.is-hidden{ opacity:0; }
.journey__mouse{ width:18px; height:28px; border:1px solid var(--text-3); border-radius:10px; position:relative; flex:none; }
.journey__mouse i{
  position:absolute; left:50%; top:6px; width:2px; height:5px; border-radius:2px; background:var(--accent);
  transform:translateX(-50%); animation:wheel 1.8s ease-in-out infinite;
}
@keyframes wheel{ 0%,100%{ transform:translate(-50%,0); opacity:1; } 50%{ transform:translate(-50%,9px); opacity:.25; } }

.prio-row > rect{ fill:rgba(255,255,255,.05); stroke:rgba(255,235,225,.55); stroke-width:1.4; }
.prio-row > circle{ fill:#fff; }
.prio-row > rect:not(:first-child){ fill:rgba(255,255,255,.75); stroke:none; }
.flame{ animation:flicker 1.6s ease-in-out infinite; transform-origin:110px 116px; }
@keyframes flicker{ 0%,100%{ transform:scaleY(1); opacity:.85; } 50%{ transform:scaleY(1.22); opacity:1; } }

.closer{
  margin-top:46px; display:flex; align-items:center; gap:16px;
  color:var(--text-2); font-size:15px;
}
.closer__mark{ width:22px; color:var(--accent); transform:rotate(-14deg); }

/* Modo sticky (va DESPUÉS de las reglas base de .journey__sticky y .closer:
   a igual especificidad gana el orden, dentro del @media de arriba quedaban pisadas) */
@media (min-width:901px) and (min-height:621px) and (prefers-reduced-motion:no-preference){
  .journey__sticky{ align-items:flex-start; }
  .closer{ margin-top:clamp(24px,3vw,32px); }
  /* Ceñido al contenido: sin alto mínimo artificial, el cierre y la sección
     siguiente asoman por abajo mientras se lee el último paso, en vez de
     dejar cientos de px de lienzo vacío tras la tarjeta. */
  .journey__sticky{ min-height:0; }
}

.measure{
  max-width:62ch; margin:0 auto 48px; text-align:center;
  padding:32px; border:1px solid var(--line); border-radius:var(--r-md);
  background:rgba(255,255,255,.02);
}
.measure__title{
  font-family:var(--font-display); font-size:clamp(1.2rem,2vw,1.6rem); font-weight:600; letter-spacing:-.01em;
}
.measure__text{ margin-top:14px; color:var(--text-2); font-size:14.5px; line-height:1.75; }

/* =========================================================
   DÓNDE ACABAN VUESTROS DATOS
   ========================================================= */
.datatable{ margin-top:40px; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); }
.datatable table{ width:100%; border-collapse:collapse; min-width:560px; font-size:13.5px; }
.datatable th,.datatable td{ padding:14px 18px; text-align:left; border-bottom:1px solid var(--line-soft); white-space:nowrap; }
.datatable th{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3); background:rgba(255,255,255,.03);
}
.datatable td{ color:var(--text-2); }
.datatable tbody tr:last-child td{ border-bottom:0; }
.datatable tbody tr:hover{ background:rgba(226,80,63,.05); }
.datos__note{ margin-top:28px; color:var(--text-2); font-size:14px; line-height:1.75; max-width:74ch; }

/* =========================================================
   SECTORES
   ========================================================= */
.sectors{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.sector{
  position:relative; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--line); background:var(--panel);
  aspect-ratio:16/11; display:flex; align-items:flex-end;
  transition:border-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
/* barrido de luz blanca al pasar el cursor */
.sector::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(104deg, transparent 34%, rgba(255,255,255,.16) 50%, transparent 66%);
  transform:translateX(-120%); transition:transform .9s var(--ease);
}
.sector:hover::after{ transform:translateX(120%); }
.sector__media{ position:absolute; inset:0; }
.sector .scene{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .8s; }
/* fotografías: se dejan respirar y con contraste alto para que las zonas
   claras destaquen contra el negro, en vez de quedar todo en un gris plano */
.sector img.scene{ filter:grayscale(.92) contrast(1.32) brightness(.86); }
/* la mitad de arriba se deja luminosa; abajo se cierra para que
   el número y el título sigan legibles sobre fotos muy claras */
.sector__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(5,4,4,.97) 12%,
    rgba(5,4,4,.86) 30%,
    rgba(5,4,4,.42) 52%,
    rgba(5,4,4,.06) 78%,
    transparent 100%);
}
.sector__body{ position:relative; z-index:1; padding:26px; width:100%; }
.sector__num{ font-family:var(--font-mono); font-size:12px; color:var(--accent); letter-spacing:.1em; }
.sector__title{ font-family:var(--font-display); font-size:1.32rem; font-weight:600; margin-top:8px; letter-spacing:-.015em; }
.sector .rule{ margin:12px 0 0; }
.sector__text{
  color:var(--text-2); font-size:13.5px; line-height:1.68;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .5s var(--ease), opacity .35s, margin-top .5s var(--ease);
}
.sector:hover{ transform:translateY(-5px); border-color:rgba(255,255,255,.34); box-shadow:0 26px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2); }
.sector:hover img.scene{ transform:scale(1.06); filter:grayscale(.15) contrast(1.2) brightness(1.06); }
.sector:hover .sector__text{ max-height:120px; opacity:1; margin-top:14px; }

.sectors__foot{
  margin-top:48px; display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.foot__icon{
  width:46px; height:46px; flex:none; display:grid; place-items:center;
  border:1px solid rgba(226,80,63,.5); border-radius:10px; color:var(--accent); background:rgba(226,80,63,.07);
}
.foot__icon svg{ width:20px; height:20px; }
.foot__copy{ display:flex; flex-direction:column; gap:8px; }
.sectors__foot p{ color:var(--text-2); font-size:14.5px; line-height:1.7; }
.foot__depts{ color:var(--text-3); font-size:12.5px; }
.foot__line{
  flex:1 1 180px; height:1px; min-width:120px;
  background:linear-gradient(to right, transparent, rgba(226,80,63,.55));
  position:relative;
}
.foot__line::after{ content:""; position:absolute; right:0; top:-2.5px; width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* =========================================================
   EQUIPO
   ========================================================= */
.team{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.05fr) minmax(0,.9fr); gap:clamp(24px,3vw,44px); align-items:start; }
.team__rail{ display:flex; flex-direction:column; gap:14px; }
.tile{
  position:relative;
  background:linear-gradient(158deg, #2e2724 0%, #1e1a18 50%, #161312 100%);
  border:1px solid var(--line); border-radius:var(--r-md); padding:22px;
  display:flex; gap:18px; align-items:flex-start;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .35s, transform .35s var(--ease), box-shadow .35s;
}
.tile::before{
  content:""; position:absolute; top:0; left:14%; right:14%; height:1px;
  background:linear-gradient(90deg, transparent, var(--sheen), transparent);
  opacity:.35; transition:opacity .35s, left .45s var(--ease), right .45s var(--ease);
}
.tile:hover{
  border-color:rgba(255,255,255,.26); transform:translateX(4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.tile:hover::before{ opacity:.9; left:0; right:0; }
.tile__icon{
  width:52px; height:52px; flex:none; border-radius:12px; display:grid; place-items:center;
  border:1px solid rgba(226,80,63,.45); color:var(--accent); background:rgba(226,80,63,.06);
}
.tile__icon svg{ width:26px; height:26px; }
.tile__name{ font-family:var(--font-display); font-size:1.02rem; font-weight:600; }
.tile__role{ color:var(--accent); font-size:13.5px; margin-top:2px; }
.tile__text{ color:var(--text-2); font-size:13px; line-height:1.7; margin-top:12px; }
.tile--stat{ align-items:center; }
.tile--stat p{ color:var(--text-2); font-size:14px; line-height:1.6; }
.stat__num{
  font-family:var(--font-display); font-size:2.1rem; font-weight:600; color:var(--accent);
  width:76px; height:60px; flex:none; display:grid; place-items:center;
  border:1px solid rgba(226,80,63,.4); border-radius:10px; background:rgba(226,80,63,.05);
  font-variant-numeric:tabular-nums;
}
.tile--quote p{ color:var(--text-2); font-size:13.5px; line-height:1.7; }
.team__tags{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-3); margin-top:12px;
}

.team__bio{ padding-top:6px; }
.bio__name{ font-family:var(--font-display); font-size:clamp(1.5rem,2.3vw,2rem); font-weight:600; letter-spacing:-.02em; }
.bio__role{ color:var(--accent); font-size:15px; margin-top:6px; }
.bio__p{ color:var(--text-2); font-size:14.5px; line-height:1.85; margin-top:22px; }
.bio__quote{
  margin-top:28px; padding:4px 0 4px 22px; border-left:2px solid var(--accent);
  color:var(--text); font-size:14.5px; line-height:1.85; font-weight:300;
}
.bio__meta{ margin-top:34px; padding-top:26px; border-top:1px solid var(--line); display:flex; gap:60px; }
.bio__meta dt{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-3);
}
.bio__meta dd{ margin:10px 0 0; font-size:16px; }

/* =========================================================
   EQUIPO EN CLARO
   La única sección luminosa del sitio. Rompe la sucesión de
   pantallas oscuras y deja que la foto del CEO —que viene con
   fondo claro— se lea en su propio terreno.
   ========================================================= */
.section--equipo{
  background:
    radial-gradient(90% 70% at 50% 0%, #e4e1dc 0%, #dcd8d2 42%, #cfcbc4 100%);
  color:#171310;
}
.section--equipo::before{
  background:radial-gradient(ellipse 62% 100% at 50% 0%, rgba(255,255,255,.45), transparent 70%);
}
.section--equipo .orb{ display:none; }
.section--equipo::after{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
.section--equipo .eyebrow{ color:#6b625b; }
.section--equipo .h2{ color:#12100e; }
.section--equipo .dot{ background:var(--accent); }

.section--equipo .tile{
  background:linear-gradient(158deg, #eeebe6 0%, #e7e3dd 100%);
  border-color:rgba(23,19,16,.12);
  box-shadow:0 1px 2px rgba(23,19,16,.06), 0 12px 30px rgba(23,19,16,.07);
}
.section--equipo .tile::before{
  background:linear-gradient(90deg, transparent, rgba(23,19,16,.14), transparent);
}
.section--equipo .tile:hover{
  border-color:rgba(226,80,63,.5);
  box-shadow:0 2px 4px rgba(23,19,16,.06), 0 18px 40px rgba(23,19,16,.1);
}
.section--equipo .tile__name{ color:#12100e; }
.section--equipo .tile__text,
.section--equipo .tile--stat p,
.section--equipo .tile--quote p{ color:#5d554e; }
.section--equipo .tile__icon{ background:rgba(226,80,63,.07); border-color:rgba(226,80,63,.35); }
.section--equipo .stat__num{ background:rgba(226,80,63,.06); border-color:rgba(226,80,63,.3); }
.section--equipo .team__tags{ color:#8a817a; }

.section--equipo .bio__name{ color:#12100e; }
.section--equipo .bio__p{ color:#544c46; }
.section--equipo .bio__quote{ color:#231e1a; border-left-color:var(--accent); }
.section--equipo .bio__meta{ border-top-color:rgba(23,19,16,.12); }
.section--equipo .bio__meta dt{ color:#8a817a; }
.section--equipo .bio__meta dd{ color:#1a1613; }

.team__photo{
  border-radius:var(--r-md); overflow:hidden; border:1px solid rgba(23,19,16,.1);
  background:var(--panel-2); position:relative;
  box-shadow:0 20px 50px rgba(23,19,16,.14);
}
.team__photo img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 22%;
  filter:grayscale(1) contrast(1.05);
  transition:transform .9s var(--ease), filter .9s;
}
.team__photo:hover img{ transform:scale(1.03); filter:grayscale(.25) contrast(1.06); }
/* sobre fondo claro la foto ya no necesita fundirse en negro */
.team__photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(23,19,16,.06);
}

/* =========================================================
   TRAYECTORIA
   ========================================================= */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.stats .tile{ flex-direction:column; align-items:center; text-align:center; gap:12px; }
.stats .stat__num{ width:auto; height:auto; padding:10px 20px; }

.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:32px; }
.case{
  position:relative; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--line); background:var(--panel); padding:28px;
  display:flex; flex-direction:column;
}
.case__num{
  font-family:var(--font-display); font-size:1.4rem; font-weight:600; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.case__text{ color:var(--text-2); font-size:13.5px; line-height:1.7; }
.case__text b{ color:var(--text); font-weight:600; }
@media (max-width:760px){
  .stats,.cases{ grid-template-columns:1fr; }
}

/* =========================================================
   LO QUE CONSTRUIMOS
   ========================================================= */
.verbs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin-bottom:clamp(32px,4vw,48px); padding-bottom:clamp(28px,3vw,40px);
  border-bottom:1px solid var(--line-soft);
}
.verbs__item{ color:var(--text-2); font-size:14.5px; line-height:1.6; }
.verbs__item b{ font-family:var(--font-display); font-weight:600; color:var(--text); }
@media (max-width:760px){
  .verbs{ grid-template-columns:1fr; gap:16px; }
}

.bento--build{ margin-top:8px; }
.bento--build > .card:nth-child(4),
.bento--build > .card:nth-child(5){ grid-column:auto/span 3; }
/* las dos de abajo son más anchas: la imagen puede crecer */
.bento--build > .card:nth-child(4) .card__art--foto img,
.bento--build > .card:nth-child(5) .card__art--foto img{ max-height:340px; }

/* =========================================================
   CONTACTO
   ========================================================= */
.contact{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(34px,5vw,80px); align-items:start; }
.contact__lead{ color:var(--text-2); font-size:16px; line-height:1.8; margin-top:24px; max-width:46ch; }
.contact__mail{ margin-top:30px; color:var(--text-2); font-size:15px; }
.contact__mail a{ color:var(--accent); border-bottom:1px solid rgba(226,80,63,.4); padding-bottom:2px; transition:color .25s, border-color .25s; }
.contact__mail a:hover{ color:var(--accent-2); border-color:var(--accent-2); }

.diagnostic{
  margin-top:32px; padding:22px 24px; border:1px solid rgba(226,80,63,.4); border-radius:var(--r-md);
  background:rgba(226,80,63,.06);
}
.diagnostic__title{ font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--text); }
.diagnostic__text{ margin-top:8px; color:var(--text-2); font-size:13.5px; line-height:1.65; }

/* Qué pasa después de escribir */
.after{ margin-top:38px; display:flex; flex-direction:column; gap:2px; }
.after li{
  display:flex; gap:18px; padding:18px 0; border-top:1px solid var(--line-soft);
  color:var(--text-2); font-size:14px; line-height:1.7;
}
.after li:last-child{ border-bottom:1px solid var(--line-soft); }
.after b{ color:var(--text); font-weight:500; }
.after__n{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--accent);
  flex:none; padding-top:3px;
}

/* ---- Asistente por pasos ---- */
.wizard{
  position:relative;
  background:linear-gradient(158deg, #322a26 0%, #201b19 46%, #171413 100%);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,34px);
  display:flex; flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.09);
}
.wizard::before{
  content:""; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, var(--sheen), transparent); opacity:.55;
}
.wizard__head{ margin-bottom:28px; }
.wizard__meta{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.wizard__count{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-3);
}
.wizard__count b{ color:var(--accent); font-weight:500; font-size:13px; }
.wizard__count i{ font-style:normal; }
.wizard__label{ font-family:var(--font-display); font-size:15px; font-weight:600; }
.wizard__dots{ display:flex; gap:7px; margin:16px 0 12px; }
.wizard__dots span{
  width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.14);
  transition:background .35s, transform .35s var(--ease);
}
.wizard__dots span.is-done{ background:rgba(226,80,63,.5); }
.wizard__dots span.is-active{ background:var(--accent); transform:scale(1.35); }
.wizard__bar{ height:2px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; }
.wizard__bar span{
  display:block; height:100%; width:25%; border-radius:2px;
  background:linear-gradient(90deg, var(--accent-deep), var(--accent));
  transition:width .45s var(--ease);
}

.wizard__body{ position:relative; flex:1; min-height:326px; }
.wstep{
  border:0; padding:0; margin:0; min-inline-size:0;
  position:absolute; inset:0 0 auto 0;
  opacity:0; visibility:hidden; transform:translateX(22px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s .4s;
}
.wstep.is-active{ opacity:1; visibility:visible; transform:none; position:relative; transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s; }
.wstep.is-back{ transform:translateX(-22px); }
.wstep__q{ font-family:var(--font-display); font-size:clamp(1.25rem,2vw,1.55rem); font-weight:600; letter-spacing:-.015em; padding:0; }
.wstep__help{ color:var(--text-2); font-size:14px; line-height:1.7; margin-top:10px; max-width:52ch; }
.wstep__sub{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-3); margin:26px 0 12px;
}

/* Opciones marcables */
.opts--grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px; }
.opt{
  position:relative; display:flex; align-items:center; gap:13px; cursor:pointer;
  padding:15px 40px 15px 15px; border:1px solid var(--line); border-radius:12px;
  background:rgba(255,255,255,.02); font-size:13.5px; line-height:1.45;
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.opt input{ position:absolute; opacity:0; width:0; height:0; }
.opt__icon{ width:22px; height:22px; flex:none; color:var(--text-3); transition:color .3s; }
.opt__check{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border:1px solid var(--line); border-radius:6px; transition:all .3s;
}
.opt__check::after{
  content:""; position:absolute; left:5px; top:1.5px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg) scale(0);
  transition:transform .25s var(--ease);
}
.opt:hover{ border-color:rgba(255,255,255,.2); transform:translateY(-1px); }
/* .is-checked lo pone el JS: cubre navegadores sin :has() */
.opt.is-checked{ border-color:var(--accent); background:rgba(226,80,63,.09); }
.opt.is-checked .opt__icon{ color:var(--accent); }
.opt.is-checked .opt__check{ background:var(--accent); border-color:var(--accent); }
.opt.is-checked .opt__check::after{ transform:rotate(42deg) scale(1); }
/* solo al navegar con teclado, no al hacer clic */
.opt input:focus-visible ~ .opt__check{ outline:2px solid var(--accent-2); outline-offset:3px; }

.opts--row{ display:flex; flex-wrap:wrap; gap:9px; }
.pick{ position:relative; cursor:pointer; }
.pick input{ position:absolute; opacity:0; width:0; height:0; }
.pick span{
  display:block; padding:11px 18px; border:1px solid var(--line); border-radius:999px;
  font-size:13.5px; color:var(--text-2); transition:all .3s var(--ease);
}
.pick:hover span{ border-color:rgba(255,255,255,.22); color:var(--text); }
.pick.is-checked span{ border-color:var(--accent); background:rgba(226,80,63,.12); color:var(--text); }
.pick input:focus-visible + span{ outline:2px solid var(--accent-2); outline-offset:3px; }

/* Campos */
.wgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.field{ display:flex; flex-direction:column; gap:9px; }
.field--full{ grid-column:1/-1; }
.field label{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-3);
}
.field input,.field textarea{
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:10px;
  padding:13px 15px; font-size:15px; font-weight:300; resize:vertical; width:100%;
  transition:border-color .3s, background .3s;
}
.field textarea{ line-height:1.65; }
.field input::placeholder,.field textarea::placeholder{ color:var(--text-3); opacity:.7; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--accent); background:rgba(226,80,63,.05); }
.field input.is-invalid,.field textarea.is-invalid{ border-color:#c0392b; }
.field__meter{
  font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); text-align:right; letter-spacing:.1em;
}
.wstep[data-step="2"] .field{ margin-top:24px; }

/* Resumen */
.wsummary{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line-soft); }
.wsummary__t{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:14px;
}
.wsummary dl{ display:grid; gap:10px; }
.wsummary dl > div{ display:flex; gap:14px; font-size:13.5px; line-height:1.6; }
.wsummary dt{ color:var(--text-3); flex:none; width:88px; }
.wsummary dd{ margin:0; color:var(--text-2); }

/* Pie de navegación */
.wizard__foot{ display:flex; align-items:center; gap:16px; margin-top:30px; }
.wbtn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  background:none; border:1px solid var(--line); border-radius:999px;
  padding:12px 22px; font-size:14px; color:var(--text-2);
  transition:border-color .3s, color .3s, background .3s;
}
.wbtn svg{ width:16px; height:16px; }
.wbtn:hover{ border-color:var(--accent); color:var(--accent-2); background:rgba(226,80,63,.06); }
.wizard__foot .btn-pill{ margin-left:auto; }

/* Confirmación */
.wdone{ text-align:center; padding:26px 0 6px; animation:fadeUp .5s var(--ease) both; }
.wdone__mark{
  width:58px; height:58px; margin:0 auto 22px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--accent); color:var(--accent); background:rgba(226,80,63,.1);
}
.wdone__mark svg{ width:26px; height:26px; }
.wdone h3{ font-family:var(--font-display); font-size:1.4rem; font-weight:600; }
.wdone p{ color:var(--text-2); font-size:14px; line-height:1.75; margin-top:14px; max-width:46ch; margin-inline:auto; }
.wdone a{ color:var(--accent); text-decoration:underline; }
.wdone__acts{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }

.form__note{ font-size:13.5px; color:var(--text-2); min-height:20px; margin-top:16px; }
.form__note.is-ok{ color:#7fd48a; }
.form__note.is-err{ color:#e97a6a; }

/* Consentimiento RGPD (paso "Vosotros"): mismo lenguaje visual que .opt,
   en formato de fila única en vez de tarjeta. */
.consent{
  display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  margin-top:26px; padding-top:22px; border-top:1px solid var(--line-soft);
}
.consent input{ position:absolute; opacity:0; width:0; height:0; }
.consent__box{
  position:relative; flex:none; width:18px; height:18px; margin-top:2px;
  border:1px solid var(--line); border-radius:6px; transition:all .3s;
}
.consent__box::after{
  content:""; position:absolute; left:5px; top:1.5px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg) scale(0);
  transition:transform .25s var(--ease);
}
.consent.is-checked .consent__box{ background:var(--accent); border-color:var(--accent); }
.consent.is-checked .consent__box::after{ transform:rotate(42deg) scale(1); }
.consent.is-invalid .consent__box{ border-color:#c0392b; }
.consent input:focus-visible ~ .consent__box{ outline:2px solid var(--accent-2); outline-offset:3px; }
.consent__text{ font-size:13px; line-height:1.6; color:var(--text-2); }

/* Honeypot anti-bot: nunca display:none (algunos bots lo detectan y lo
   evitan), sino fuera de pantalla; aria-hidden en el contenedor lo saca
   del árbol de accesibilidad y tabindex="-1" del tabulado del teclado. */
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }

.wz-turnstile{ margin-top:18px; }
.wz-turnstile:empty{ margin-top:0; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ border-top:1px solid var(--line-soft); padding:56px 0 44px; background:var(--bg-deep); }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.footer__nav{ display:flex; gap:26px; flex-wrap:wrap; }
.footer__nav a{ font-size:14px; color:var(--text-2); transition:color .25s; }
.footer__nav a:hover{ color:var(--accent-2); }
.footer__legal{ width:100%; color:var(--text-3); font-size:12.5px; padding-top:26px; border-top:1px solid var(--line-soft); }

/* =========================================================
   CHATBOT
   ========================================================= */
.chat-fab{
  position:fixed; right:24px; bottom:24px; z-index:120;
  display:inline-flex; align-items:center; gap:12px;
  height:54px; padding:0 22px 0 8px; border-radius:999px;
  border:1px solid rgba(226,80,63,.55);
  background:linear-gradient(150deg, #1c1513, #0b0908);
  color:var(--text); font-family:var(--font-body); font-size:14.5px; font-weight:500;
  cursor:pointer;
  box-shadow:0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .3s var(--ease), box-shadow .3s, padding .3s var(--ease), gap .3s var(--ease);
}
.chat-fab:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 18px 46px rgba(226,80,63,.35); }
.chat-fab__icon{
  width:40px; height:40px; border-radius:50%; flex:none;
  background:var(--accent); color:#fff; display:grid; place-items:center;
}
.chat-fab__icon svg{ width:19px; height:19px; }
.chat-fab__text em{ font-style:normal; color:var(--accent-2); }
.chat-fab__pulse{
  position:absolute; inset:-1px; border-radius:999px; border:1px solid rgba(226,80,63,.5);
  animation:ping 3s ease-out infinite;
}
@keyframes ping{ 0%{ transform:scale(1); opacity:.7; } 70%,100%{ transform:scale(1.5); opacity:0; } }
.chat-fab.is-open .chat-fab__pulse{ display:none; }

/* Burbuja de saludo: aparece a los ~3s (js/main.js), fondo claro
   a propósito para leer como un mensaje real, no como parte del chrome
   oscuro de la landing. */
.chat-greet{
  position:fixed; right:24px; bottom:92px; z-index:119; max-width:min(250px, calc(100vw - 48px));
  background:#f4f1ef; color:#171310; border-radius:14px 14px 4px 14px;
  padding:14px 32px 12px 16px; font-size:13px; line-height:1.55;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.chat-greet::after{
  content:""; position:absolute; right:16px; bottom:-7px;
  border:8px solid transparent; border-top-color:#f4f1ef; border-bottom:0; border-right:0;
}
@media (prefers-reduced-motion:no-preference){
  .chat-greet:not([hidden]){ animation:chatGreetIn .45s var(--ease); }
}
@keyframes chatGreetIn{ from{ opacity:0; transform:translateY(10px) scale(.94); } }
.chat-greet__text{ margin:0; padding-right:2px; }
.chat-greet__text b{ font-weight:600; }
.chat-greet__status{ display:flex; align-items:center; gap:6px; margin:6px 0 0; font-size:11px; color:#5d554e; }
.chat-greet__status i{ width:6px; height:6px; border-radius:50%; background:#3aa85c; flex:none; }
.chat-greet__close{
  position:absolute; top:8px; right:8px; width:22px; height:22px;
  display:grid; place-items:center; background:none; border:0; cursor:pointer;
  color:#8a827c; border-radius:50%; transition:background .2s, color .2s;
}
.chat-greet__close:hover{ background:rgba(0,0,0,.06); color:#171310; }
.chat-greet__close svg{ width:13px; height:13px; }

.chat{
  position:fixed; right:24px; bottom:98px; z-index:121;
  width:min(380px, calc(100vw - 32px)); max-height:min(620px, calc(100vh - 140px));
  display:flex; flex-direction:column;
  background:linear-gradient(168deg, rgba(26,21,19,.98), rgba(8,7,6,.99));
  border:1px solid rgba(226,80,63,.3); border-radius:18px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
  animation:chatIn .32s var(--ease);
}
@keyframes chatIn{ from{ opacity:0; transform:translateY(16px) scale(.97); } }
.chat__head{ display:flex; align-items:center; gap:14px; padding:18px 20px; border-bottom:1px solid var(--line); }
.chat__avatar{
  width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center;
  border:1px solid rgba(226,80,63,.5); background:rgba(226,80,63,.1); color:var(--accent-2);
}
.chat__avatar svg{ width:17px; height:18px; }
.chat__name{ font-family:var(--font-display); font-size:14.5px; font-weight:600; line-height:1.35; }
.chat__name span{ font-weight:300; color:var(--text-2); font-size:13px; }
.chat__status{ font-size:11.5px; color:var(--text-3); display:flex; align-items:center; gap:6px; margin-top:2px; }
.chat__status i{ width:6px; height:6px; border-radius:50%; background:#5cc47a; }
.chat__status--bloqueado{ color:#e8705f; }
.chat__status--bloqueado i{ background:#e8705f; }
.chat__close{ margin-left:auto; background:none; border:0; cursor:pointer; color:var(--text-3); width:28px; height:28px; }
.chat__close:hover{ color:var(--text); }
.chat__close svg{ width:18px; height:18px; }

.chat__log{ flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px; scrollbar-width:thin; }
.chat__log::-webkit-scrollbar{ width:6px; }
.chat__log::-webkit-scrollbar-thumb{ background:rgba(226,80,63,.3); border-radius:3px; }
.msg{ max-width:86%; padding:13px 16px; border-radius:14px; font-size:14px; line-height:1.65; animation:msgIn .3s var(--ease); }
.msg p{ margin:0; }
.msg--bot{ background:rgba(255,255,255,.045); border:1px solid var(--line); border-bottom-left-radius:4px; align-self:flex-start; color:var(--text); }
.msg--user{ background:rgba(226,80,63,.16); border:1px solid rgba(226,80,63,.35); border-bottom-right-radius:4px; align-self:flex-end; }
.msg--typing{ display:flex; gap:5px; align-items:center; }
.msg--typing i{ width:6px; height:6px; border-radius:50%; background:var(--text-3); animation:blink 1.2s infinite; }
.msg--typing i:nth-child(2){ animation-delay:.18s; }
.msg--typing i:nth-child(3){ animation-delay:.36s; }
@keyframes blink{ 0%,60%,100%{ opacity:.25; } 30%{ opacity:1; } }
@keyframes msgIn{ from{ opacity:0; transform:translateY(8px); } }
.msg a{ color:var(--accent-2); text-decoration:underline; }

.chat__chips{ display:flex; gap:8px; flex-wrap:wrap; padding:0 20px 14px; }
.chat__chips button{
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:999px;
  padding:8px 14px; font-size:12.5px; color:var(--text-2); cursor:pointer; transition:all .25s;
}
.chat__chips button:hover{ border-color:var(--accent); color:var(--accent-2); background:rgba(226,80,63,.08); }

.chat__form{ display:flex; gap:10px; padding:14px 18px 18px; border-top:1px solid var(--line); }
.chat__form input{
  flex:1; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:999px;
  padding:12px 18px; font-size:14px; font-weight:300;
}
.chat__form input:focus{ outline:none; border-color:var(--accent); }
.chat__form button{
  width:44px; height:44px; flex:none; border-radius:50%; border:0; cursor:pointer;
  background:var(--accent); color:#fff; display:grid; place-items:center; transition:transform .25s, background .25s;
}
.chat__form button:hover{ transform:scale(1.06); background:var(--accent-2); }
.chat__form button svg{ width:20px; height:20px; }

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .nav__links{ gap:20px; font-size:14px; }
  .journey__stage{ grid-template-columns:minmax(180px,210px) minmax(0,1fr); }
  .team{ grid-template-columns:1fr 1fr; }
  .team__photo{ grid-column:1/-1; max-width:460px; }
}
@media (max-width:1024px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bento > .card:nth-child(n){ grid-column:auto; }
  .bento > .card:nth-child(5){ grid-column:1/-1; }
  .bento--build > .card:nth-child(5){ grid-column:1/-1; }
  .sectors{ grid-template-columns:repeat(2,1fr); }
  .hero__laser{ width:70vw; opacity:.75; }
  .contact{ grid-template-columns:1fr; }
  .wizard__body{ min-height:0; }
}
@media (max-width:760px){
  html{ scroll-padding-top:80px; }
  .hero{ padding:120px 0 70px; }
  .hero__bg::after{ background:linear-gradient(180deg, rgba(5,5,5,.86), rgba(5,5,5,.72) 55%, var(--bg)); }
  .hero__lead br{ display:none; }
  .head__lead br{ display:none; }
  .bento,.sectors{ grid-template-columns:1fr; }
  .bento > .card:nth-child(n){ grid-column:auto; }
  .sector{ aspect-ratio:16/10; }
  .sector__text{ max-height:200px; opacity:1; margin-top:14px; }
  .team{ grid-template-columns:1fr; }
  .team__photo{ max-width:100%; order:-1; }
  .opts--grid,.wgrid{ grid-template-columns:1fr; }
  .wizard__foot{ flex-direction:row-reverse; justify-content:flex-end; }
  .wizard__foot .btn-pill{ margin-left:0; }
  .bio__meta{ gap:40px; }
  .footer__inner{ flex-direction:column; align-items:flex-start; }
  .chat{ right:12px; left:12px; bottom:92px; width:auto; }
  .chat-fab{ right:16px; bottom:16px; }
  .chat-greet{ right:16px; bottom:84px; }
}

/* Píldora del chat: por debajo de 480px se oculta el texto y queda
   solo el icono circular, para no comerse el ancho en móvil. */
@media (max-width:480px){
  .chat-fab{ width:52px; height:52px; padding:0; gap:0; justify-content:center; }
  .chat-fab__icon{ width:52px; height:52px; }
  .chat-fab__text{ display:none; }
}

/* ---- Recorrido del método: modo lista ----
   En pantallas estrechas o de poca altura el anclaje por scroll estorba,
   así que los pasos pasan a leerse en columna, apareciendo al bajar. */
@media (max-width:900px), (max-height:620px){
  .journey__sticky{ position:static; min-height:0; display:block; }
  .journey__stage{ display:block; padding-block:0; }
  .jsteps{ display:flex; flex-direction:column; gap:16px; }
  .jstep{
    grid-template-columns:1fr; opacity:1; visibility:visible; transform:none;
    box-shadow:none; padding:28px;
  }
  .jstep.is-past{ transform:none; }
  .jstep.is-active .jstep__num,
  .jstep.is-active .jstep__title,
  .jstep.is-active .rule,
  .jstep.is-active .jstep__text,
  .jstep.is-active .jstep__tag,
  .jstep.is-active .jstep__art{ animation:none; }
  .jstep__art{ margin-top:26px; }
  .jstep__art .art{ max-width:200px; }
  .jstep__text{ max-width:none; }
  .jrail__list,.jrail__bar{ display:none; }
  .jrail__count{ margin-bottom:18px; }
  .jrail__count b{ font-size:1.6rem; }
  .journey__hint{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .journey__sticky{ position:static; min-height:0; display:block; }
  .journey__stage{ display:block; padding-block:0; }
  .jsteps{ display:flex; flex-direction:column; gap:16px; }
  .jstep{ opacity:1; visibility:visible; transform:none; }
  .jrail__list,.jrail__bar,.journey__hint{ display:none; }
}