@charset "utf-8";

/* =========================================================================
   ISPIERTO — sistema visual
   Colores y pesos tipográficos tomados del Manual de Identidad Visual.
   Inter 200/300/400/500 (el manual no usa negrita) + Times italic como voz.
   ========================================================================= */

:root{
  /* ---- paleta del manual ---- */
  --ink:          #000000;
  --ink-deep:     #001827;
  --paper:        #EFEFEF;
  --white:        #FFFFFF;
  --signal:       #009EFE;
  --signal-deep:  #0168A8;
  --grey:         #BABABA;

  /* ---- derivados ---- */
  --line:         #CFCFCF;
  --line-soft:    #DEDEDE;
  --ink-60:       rgba(0,0,0,.60);
  --ink-45:       rgba(0,0,0,.58);   /* rótulos pequeños · 4.9:1 sobre papel */
  --ink-display:  rgba(0,0,0,.50);   /* solo display grande · 3.6:1 */
  --ink-12:       rgba(0,0,0,.12);
  --on-deep:      rgba(255,255,255,.92);
  --on-deep-60:   rgba(255,255,255,.58);
  --on-deep-30:   rgba(255,255,255,.28);
  --line-deep:    rgba(255,255,255,.16);

  /* ---- tipografía ---- */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --voice: "Times New Roman", Times, "Tinos", "Liberation Serif", serif;

  --t-hero:  clamp(2.4rem, 4.5vw, 4.35rem);
  --t-h2:    clamp(1.85rem, 3.6vw, 3.4rem);
  --t-h3:    clamp(1.35rem, 2.2vw, 1.95rem);
  --t-lead:  clamp(1.0625rem, 1.5vw, 1.375rem);
  --t-body:  clamp(1rem, 1.05vw, 1.0625rem);
  --t-small: .875rem;
  --t-label: .6875rem;
  --t-num:   clamp(2.25rem, 4.4vw, 3.5rem);

  /* ---- retícula 8pt ---- */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px; --s9: 192px;

  --shell: 1360px;
  --gut: clamp(20px, 4.5vw, 64px);
  --sec: clamp(72px, 11vh, 152px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 240ms;

  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

h1,h2,h3,h4{ margin:0; font-weight:200; line-height:1.03; letter-spacing:-.035em; }
h2{ font-weight:400; letter-spacing:-.025em; }
p{ margin:0; }

/* énfasis en titulares: Times Medium cursiva, interletrado -50 */
.voice-tight{ font-family:var(--voice); font-style:italic; font-weight:500; letter-spacing:-.05em; }
ul{ margin:0; padding:0; list-style:none; }

a{ color:inherit; text-decoration:none; }

::selection{ background:var(--signal); color:var(--ink-deep); }

/* ---------- foco visible, siempre ---------- */
:focus-visible{
  outline:2px solid var(--signal-deep);
  outline-offset:3px;
  border-radius:2px;
}
.on-deep :focus-visible{ outline-color:var(--signal); }

.skip{
  position:absolute; left:var(--s2); top:-100px; z-index:200;
  background:var(--ink); color:var(--white);
  padding:12px 20px; font-size:var(--t-small);
  transition:top 160ms var(--ease);
}
.skip:focus{ top:var(--s2); }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* =========================================================================
   Primitivas
   ========================================================================= */

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

.section{ padding-block:var(--sec); position:relative; }
.section:not(.deep) + .section:not(.deep){ padding-top:var(--s5); }

.deep{
  background:var(--ink-deep);
  color:var(--on-deep);
}
.deep h1,.deep h2,.deep h3{ color:var(--white); }

/* fondo WebGL animado (marea oscura) en secciones navy */
.velaris{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}
.has-velaris{ position:relative; }
.has-velaris > *:not(.velaris){ position:relative; z-index:1; }

.label{
  font-size:var(--t-label);
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--ink-45);
  font-variant-numeric:tabular-nums;
}
.deep .label{ color:var(--on-deep-60); }
.label--signal{ color:var(--signal-deep); }
.deep .label--signal{ color:var(--signal); }

.voice{
  font-family:var(--voice);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.005em;
}

.lead{
  font-size:var(--t-lead);
  font-weight:300;
  line-height:1.5;
  max-width:34ch;
  letter-spacing:-.015em;
}

.prose{ max-width:64ch; }
.prose p + p{ margin-top:1.1em; }
.prose strong{ font-weight:500; }

/* ---- cabecera de sección ---- */
.head{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s3);
  margin-bottom:var(--s6);
}
.head__rule{
  height:1px; background:var(--line); border:0; margin:0;
}
.deep .head__rule{ background:var(--line-deep); }
.head__title{ font-size:var(--t-h2); font-weight:400; letter-spacing:-.025em; max-width:18ch; }
.head--center{ justify-items:center; text-align:center; }
.head--center .head__title{ max-width:24ch; }
@media (min-width:900px){ .head.head--center{ grid-template-columns:minmax(0,1fr); justify-items:center; } }
.head.head--center .head__title{ margin-inline:auto; text-align:center; }
.head__aside{
  font-size:var(--t-body); color:var(--ink-60);
  max-width:44ch; font-weight:300;
}
.deep .head__aside{ color:var(--on-deep-60); }

@media (min-width:900px){
  .head{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:end; }
  .head__rule{ grid-column:1 / -1; }
  .head__aside{ padding-bottom:.4em; }
}

/* ---- botones ---- */
.btn{
  --btn-bg:var(--ink); --btn-fg:var(--white); --btn-bd:var(--ink);
  display:inline-flex; align-items:center; gap:12px;
  min-height:52px; padding:0 26px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd); border-radius:0;
  font-size:var(--t-small); font-weight:300; letter-spacing:.01em;
  cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover{ --btn-bg:var(--signal-deep); --btn-bd:var(--signal-deep); transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn__arrow{ transition:transform var(--dur) var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line); }
.btn--ghost:hover{ --btn-bg:transparent; --btn-fg:var(--signal-deep); --btn-bd:var(--signal-deep); }

.deep .btn{ --btn-bg:var(--white); --btn-fg:var(--ink-deep); --btn-bd:var(--white); }
.deep .btn:hover{ --btn-bg:var(--signal); --btn-bd:var(--signal); --btn-fg:var(--ink-deep); }
.deep .btn--ghost{ --btn-bg:transparent; --btn-fg:var(--white); --btn-bd:var(--line-deep); }
.deep .btn--ghost:hover{ --btn-bg:transparent; --btn-fg:var(--signal); --btn-bd:var(--signal); }
/* el vallesa gana también dentro de secciones navy */
.deep .btn--vallesa{ --btn-bg:var(--signal); --btn-fg:var(--ink-deep); --btn-bd:var(--signal); }
.deep .btn--vallesa:hover{ --btn-bg:var(--signal-deep); --btn-fg:var(--white); --btn-bd:var(--signal-deep); }

/* =========================================================================
   Barra superior
   ========================================================================= */

.bar{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3);
  padding:14px var(--gut);
  background:rgba(239,239,239,.86);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.bar.is-deep{
  background:rgba(0,24,39,.84);
  color:var(--on-deep);
  border-bottom-color:var(--line-deep);
}
.bar.is-stuck{ border-bottom-color:var(--line); }
.bar.is-deep.is-stuck{ border-bottom-color:var(--line-deep); }

.bar__id{ display:flex; align-items:center; gap:10px; min-width:0; min-height:44px; }
.bar__mark{
  width:30px; height:30px; flex:none; border-radius:50%;
  background:var(--white); border:1px solid var(--line);
  object-fit:cover; object-position:50% 22%;
}
.bar.is-deep .bar__mark{ border-color:var(--line-deep); }
.bar__id > span{ line-height:1.04; }
.bar__name{ font-size:var(--t-small); font-weight:500; letter-spacing:-.01em; white-space:nowrap; }
.bar__role{
  font-size:.8125rem; letter-spacing:-.005em; text-transform:none;
  font-weight:300; color:var(--ink-45); white-space:nowrap;
}
@media (max-width:639px){
  .bar__role{ display:none; }
  .bar__cta{ padding:0 14px; }
}
.bar.is-deep .bar__role{ color:var(--on-deep-60); }

.bar__nav{ display:none; gap:var(--s4); }
@media (min-width:880px){ .bar__nav{ display:flex; } }
.bar__link{
  font-size:var(--t-small); font-weight:400; color:var(--ink-60);
  position:relative; padding-block:13px; display:inline-flex; align-items:center;
  transition:color var(--dur) var(--ease);
}
.bar.is-deep .bar__link{ color:var(--on-deep-60); }
.bar__link::after{
  content:""; position:absolute; left:0; right:0; bottom:9px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.bar__link:hover{ color:var(--signal-deep); }
.bar.is-deep .bar__link:hover{ color:var(--signal); }
.bar__link:hover::after{ transform:scaleX(1); }

.bar__cta{ min-height:44px; padding:0 18px; font-size:var(--t-small); white-space:nowrap; }
.bar__cta-short{ display:none; }
@media (max-width:639px){
  .bar__cta-full{ display:none; }
  .bar__cta-short{ display:inline; }
}

.bar__status{
  display:none; align-items:center; gap:8px;
  font-size:var(--t-label); letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-45);
}
@media (min-width:1120px){ .bar__status{ display:flex; } }
.bar.is-deep .bar__status{ color:var(--on-deep-60); }
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--signal);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--signal) 60%, transparent);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%   { box-shadow:0 0 0 0 color-mix(in srgb, var(--signal) 55%, transparent); }
  70%  { box-shadow:0 0 0 9px transparent; }
  100% { box-shadow:0 0 0 0 transparent; }
}

/* =========================================================================
   CUADRO 00/01 — el organigrama y su colapso
   ========================================================================= */

.stage{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  padding-top:96px;
  background:var(--paper);
  overflow:hidden;
}

.stage__grid{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s5);
  align-content:center;
  width:100%; max-width:var(--shell);
  margin-inline:auto; padding:var(--s4) var(--gut) var(--s6);
}
@media (min-width:1080px){
  .stage__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:var(--s5);
    align-items:center;
  }
}

/* ---- columna de texto ---- */
.pitch{ display:flex; flex-direction:column; gap:var(--s3); }

.pitch__h1{
  font-size:var(--t-hero);
  font-weight:200;
  letter-spacing:-.045em;
  line-height:.95;
}
.pitch__h1 em{
  font-family:var(--voice); font-style:italic; font-weight:400;
  letter-spacing:-.02em;
}
.pitch__h1 .neg{ color:var(--ink-display); }

.pitch__sub{
  font-size:var(--t-lead); font-weight:300; line-height:1.45;
  max-width:36ch; color:var(--ink-60); letter-spacing:-.015em;
}
.pitch__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--s2); }

.pitch__proof{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4);
  margin-top:var(--s3); padding-top:var(--s3);
  border-top:1px solid var(--line);
}
.proof__item{ display:flex; flex-direction:column; gap:2px; }
.proof__n{
  font-size:1.5rem; font-weight:200; letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.proof__k{ font-size:var(--t-label); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-45); }
@media (max-width:639px){
  .pitch__proof{ flex-wrap:nowrap; justify-content:space-between; gap:8px; }
  .proof__n{ font-size:clamp(1.0625rem, 5.2vw, 1.5rem); }
  .proof__k{ font-size:clamp(.5625rem, 2.6vw, .6875rem); letter-spacing:.08em; white-space:nowrap; }
}

/* ---- envoltorio: es la pieza que se fija y la que se centra ---- */
.chartwrap{
  position:relative;
  display:flex; justify-content:center; align-items:center;
  width:100%;
  will-change:transform;
}

/* ---- el organigrama ---- */
.chart{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  width:100%;
  --node-w: clamp(72px, 8.2vw, 112px);
}

.chart__row{
  display:grid;
  justify-items:center;
  width:100%;
  gap:clamp(8px, 1.6vw, 20px);
}
.chart__row--one{ grid-template-columns:minmax(0,var(--node-w)); justify-content:center; }
.chart__row--five,
.chart__row--sub{ grid-template-columns:repeat(5,minmax(0,1fr)); }
/* la sub-fila cuelga de Estrategia (col 1) y de Contenido (col 3) */
.chart__row--sub > :nth-child(1){ grid-column:1; }
.chart__row--sub > :nth-child(2){ grid-column:3; }

/* conectores */
.conn{ position:relative; width:100%; display:flex; justify-content:center; }
.conn--stem{ height:clamp(20px,3.4vh,34px); }

.stem{
  width:1px; height:100%; background:var(--line-strong,var(--ink));
  transform-origin:top center; transform:scaleY(0);
  opacity:.5;
}

.fan{ position:relative; width:100%; height:clamp(34px,5.4vh,58px); }
.fan__stem{
  position:absolute; top:0; left:50%; width:1px; height:42%;
  background:var(--ink); opacity:.5;
  transform-origin:top center; transform:translateX(-.5px) scaleY(0);
}
.fan__bus{
  position:absolute; top:42%; height:1px; background:var(--ink); opacity:.5;
  transform-origin:center; transform:scaleX(0);
}
.fan__drops{
  position:absolute; top:42%; bottom:0; left:0; right:0;
  display:grid; align-items:stretch;
  gap:clamp(8px, 1.6vw, 20px);
}
.fan__drops > i{
  width:1px; height:100%; margin-inline:auto; background:var(--ink); opacity:.5;
  transform-origin:top center; transform:scaleY(0);
}
.fan--five .fan__drops{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.fan--five .fan__bus{ left:10%; right:10%; }

/* sub-conector: sin bus, dos bajadas rectas desde sus casillas padre */
.fan--sub{ height:clamp(22px,3.4vh,38px); }
.fan--sub .fan__drops{ top:0; grid-template-columns:repeat(5,minmax(0,1fr)); }
.fan--sub .fan__drops > i:nth-child(1){ grid-column:1; }
.fan--sub .fan__drops > i:nth-child(2){ grid-column:3; }

/* ---- casilla ---- */
.node{
  position:relative;
  width:100%; max-width:var(--node-w);
  display:flex; flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  will-change:transform,opacity;
}
.node__photo{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--paper);
}
.node__photo img{
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  filter:grayscale(1) contrast(1.04);
  transition:filter 420ms var(--ease);
}
.node:hover .node__photo img{ filter:grayscale(0) contrast(1); }

.node__label{
  display:block;
  padding:7px 8px 8px;
  font-size:clamp(.5rem,.62vw,.625rem);
  font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  line-height:1.25; text-align:center;
  color:var(--ink-60);
  border-top:1px solid var(--line-soft);
  min-height:2.9em;
  display:flex; align-items:center; justify-content:center;
}

/* casilla del cliente: vacía y discontinua */
.node--client{
  background:transparent;
  border:1px dashed var(--grey);
  aspect-ratio:auto;
  min-height:64px;
  align-items:center; justify-content:center;
  max-width:clamp(150px,22vw,220px);
}
.node--client .node__label{
  border-top:0; color:var(--ink); min-height:0;
  font-size:var(--t-label); letter-spacing:.16em;
}

/* casillas de niño: la trama de semitono manda */
.node--kid .node__photo{ background:var(--white); }
.node--kid .node__photo img{ object-fit:contain; filter:none; padding:6px; }
.node--kid:hover .node__photo img{ filter:none; }

/* el nodo que sobrevive al colapso queda por encima de la pila */
[data-survivor]{ z-index:3; }

/* placa final tras el colapso */
/* Sin transform propio: el colapso anima `y` desde JS y no debe pelearse
   con un translate en porcentajes. */
.collapsed{
  position:absolute; left:50%; top:50%;
  width:min(560px,84vw); margin-left:calc(min(560px,84vw) / -2);
  margin-top:28px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center; padding-inline:var(--gut);
  opacity:0; pointer-events:none;
  z-index:4;
}
.collapsed__name{
  font-size:clamp(1.75rem,3.6vw,2.75rem); font-weight:200;
  letter-spacing:-.04em; color:var(--white); line-height:1.05;
}
.collapsed__role{
  font-size:var(--t-label); letter-spacing:.18em; text-transform:uppercase;
  color:var(--signal);
}
.collapsed__line{
  font-family:var(--voice); font-style:italic;
  font-size:clamp(1.25rem,2.4vw,1.75rem);
  color:var(--on-deep); letter-spacing:-.01em;
}
.collapsed__rule{ width:44px; height:1px; background:var(--signal); }

.stage__hint{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  --wa-bottom:22px; bottom:var(--wa-bottom);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-45); pointer-events:none;
}
.stage__hint i{
  width:1px; height:26px; background:var(--line);
  transform-origin:top; animation:drip 2.4s var(--ease) infinite;
}
@keyframes drip{
  0%,100%{ transform:scaleY(.35); opacity:.5; }
  50%    { transform:scaleY(1);   opacity:1; }
}

/* móvil: el organigrama es una columna, nunca un split */
@media (max-width:899px){
  .stage{ min-height:0; padding-top:88px; padding-bottom:var(--s5); }
  .stage__grid{ padding-bottom:var(--s4); gap:var(--s5); }
}

@media (max-width:719px){
  .chart{ --node-w: 92px; width:min(100%,264px); }
  .chart__row--five,
  .chart__row--sub{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .chart__row--sub > :nth-child(1),
  .chart__row--sub > :nth-child(2){ grid-column:auto; }

  /* La fila de cinco pasa a tres filas de dos, así que el peine de bajadas
     deja de tener sentido: se sustituye por una espina vertical única. */
  .fan__bus{ display:none; }
  .fan__drops{ display:block; }
  .fan__drops > i{ display:none; }
  .fan__drops > i:first-child{ display:block; width:1px; height:100%; margin-inline:auto; }
  .fan--sub{ height:clamp(18px,2.6vh,26px); }

  .stage__hint{ display:none; }
}

/* =========================================================================
   CUADRO 02 — lo que no soy
   ========================================================================= */

.against{
  display:grid; gap:var(--s5);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  .against{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6); }
}
.against__card{
  border:1px solid var(--line-deep);
  padding:var(--s4);
  display:flex; flex-direction:column; gap:var(--s2);
}
.against__k{ font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase; color:var(--on-deep-60); }
.against__t{ font-size:var(--t-h3); font-weight:200; letter-spacing:-.03em; color:var(--white); }
.against__d{ color:var(--on-deep-60); font-weight:300; max-width:42ch; }

.network{ margin-top:var(--s6); }
.network__grid{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  margin-top:var(--s3);
}
.ghost{
  border:1px dashed var(--on-deep-30);
  min-height:82px;
  display:flex; align-items:center; justify-content:center;
  padding:12px;
  text-align:center;
  font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-deep-60);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ghost:hover{ border-color:var(--signal); color:var(--signal); }

/* =========================================================================
   CUADRO 03 — los puestos
   ========================================================================= */

.posts{ border-top:1px solid var(--line); }

.post{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s2);
  padding-block:var(--s4);
  border-bottom:1px solid var(--line);
  position:relative;
}
@media (min-width:860px){
  .post{
    grid-template-columns:56px minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,.7fr);
    gap:var(--s4);
    align-items:baseline;
    padding-block:var(--s4);
  }
}
.post::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--signal); transform:scaleX(0); transform-origin:left;
  transition:transform 420ms var(--ease);
}
.post:hover::after{ transform:scaleX(1); }

.post__i{ font-size:var(--t-label); color:var(--ink-45); letter-spacing:.13em; font-variant-numeric:tabular-nums; }
.post__t{ font-size:var(--t-h3); font-weight:400; letter-spacing:-.03em; }
.post__d{ color:var(--ink-60); font-weight:300; max-width:46ch; }
.post__n{
  font-size:1.375rem; font-weight:400; letter-spacing:-.03em;
  color:var(--signal); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.post__n small{ display:block; font-size:var(--t-label); letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-45); font-weight:500; margin-top:3px;
  white-space:normal; }

/* =========================================================================
   CUADRO 04 — despliegues
   ========================================================================= */

.deploys{ display:grid; gap:var(--s5); }
@media (min-width:980px){ .deploys{ gap:var(--s6); } }

.deploy{
  display:grid; gap:var(--s3);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  padding-top:var(--s4);
  border-top:1px solid var(--line);
}
@media (min-width:980px){
  .deploy{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--s6); }
  .deploy:nth-child(even) .deploy__media{ order:2; }
}
.deploy__media{
  position:relative; overflow:hidden;
  aspect-ratio:16/10; background:var(--line-soft);
}
.deploy__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  transition:transform 720ms var(--ease), filter 720ms var(--ease);
}
.deploy:hover .deploy__media img{ transform:scale(1.06); }

.deploy__body{ display:flex; flex-direction:column; gap:var(--s2); }
.deploy__meta{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; }
.deploy__t{ font-size:var(--t-h2); font-weight:200; letter-spacing:-.04em; }
.deploy__t a{ display:inline-block; padding-block:7px; }
.deploy__d{ color:var(--ink-60); font-weight:300; max-width:46ch; }

.stats{
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5);
  padding-top:var(--s2);
}
.stat__n{
  font-size:var(--t-num); font-weight:200; letter-spacing:-.05em; line-height:.9;
  color:var(--signal-deep); font-variant-numeric:tabular-nums;
}
.stat__k{
  font-size:var(--t-label); letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-45); margin-top:8px; display:block; max-width:16ch;
}

/* mini organigrama del caso */
.mini{ display:flex; flex-wrap:wrap; gap:5px; padding-top:var(--s2); }
.mini__box{
  font-size:.5625rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 9px; border:1px solid var(--line); color:var(--ink-45);
  background:var(--white);
}
.mini__box[data-on]{ border-color:var(--ink); color:var(--ink); }
.mini__box[data-on="signal"]{ border-color:var(--signal-deep); color:var(--signal-deep); }

/* índice del resto de trabajo */
.index{ margin-top:var(--s7); border-top:1px solid var(--line); }
.index__row{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px var(--s3);
  padding-block:var(--s3);
  border-bottom:1px solid var(--line);
}
.index__row{ width:100%; text-align:left; background:transparent; border-inline:0; border-top:0; font:inherit; color:inherit; cursor:pointer; }
.index__n{ font-size:var(--t-label); color:var(--ink-45); letter-spacing:.13em; min-width:2.5em; font-variant-numeric:tabular-nums; }
.index__t{ font-size:var(--t-h3); font-weight:400; letter-spacing:-.03em; flex:1; min-width:180px; }
.index__k{ font-size:var(--t-small); color:var(--ink-60); font-weight:300; }

/* =========================================================================
   CUADRO 05 — de dónde sale esto
   ========================================================================= */

.rules{
  display:grid; gap:1px;
  grid-template-columns:minmax(0,1fr);
  background:var(--line-deep);
  border:1px solid var(--line-deep);
  margin-top:var(--s5);
}
@media (min-width:680px){ .rules{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .rules{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.rule-card{
  background:var(--ink-deep);
  padding:var(--s4) var(--s3);
  display:flex; flex-direction:column; gap:12px;
  min-height:200px;
}
.rule-card__i{ font-size:var(--t-label); letter-spacing:.16em; color:var(--signal); font-variant-numeric:tabular-nums; }
.rule-card__t{ font-size:1.25rem; font-weight:300; letter-spacing:-.025em; color:var(--white); line-height:1.15; }
.rule-card__d{ font-size:var(--t-small); color:var(--on-deep-60); font-weight:300; margin-top:auto; }

/* =========================================================================
   CUADRO 06 — testimonios
   ========================================================================= */

.says{
  display:grid; gap:var(--s3);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:760px){ .says{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1140px){ .says{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.say{
  border:1px solid var(--line);
  background:var(--white);
  padding:var(--s4);
  display:flex; flex-direction:column; gap:var(--s3);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.say:hover{ border-color:var(--ink); transform:translateY(-3px); }
.say__q{
  font-family:var(--voice); font-style:italic;
  font-size:1.1875rem; line-height:1.45; letter-spacing:-.01em;
  flex:1;
}
.say__who{ display:flex; align-items:center; gap:12px; }
.say__av{
  width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none;
  filter:grayscale(1); background:var(--paper);
}
.say__n{ font-size:var(--t-small); font-weight:500; letter-spacing:-.01em; }
.say__r{ font-size:var(--t-label); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-45); }

/* =========================================================================
   CUADRO 07 — la casilla vacía + contacto
   ========================================================================= */

.close__top{
  display:flex; flex-direction:column; gap:var(--s3);
  margin-bottom:var(--s6);
}
.close__h{ font-size:var(--t-h2); font-weight:400; letter-spacing:-.03em; max-width:16ch; }
.close__h em{ font-family:var(--voice); font-style:italic; font-weight:500; letter-spacing:-.03em; }

/* datos de contacto, bajo el formulario */
.close__contact{
  display:flex; flex-direction:column; gap:var(--s3);
  margin-top:var(--s6);
  padding-top:var(--s5);
  border-top:1px solid var(--line-deep);
}
.contact__mail{
  font-size:clamp(1.125rem,2.2vw,1.5rem); font-weight:300; letter-spacing:-.03em;
  color:var(--white); word-break:break-word;
  border-bottom:1px solid var(--line-deep); padding-bottom:10px; padding-top:4px;
  display:inline-flex; align-items:center; min-height:44px; width:fit-content;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.contact__mail:hover{ color:var(--signal); border-color:var(--signal); }
.contact__mail{
  font-size:clamp(1.125rem,2.2vw,1.5rem); font-weight:300; letter-spacing:-.03em;
  color:var(--white); word-break:break-word;
  border-bottom:1px solid var(--line-deep); padding-bottom:10px; padding-top:4px;
  display:inline-flex; align-items:center; min-height:44px; width:fit-content;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.contact__mail:hover{ color:var(--signal); border-color:var(--signal); }

.social{ display:flex; gap:10px; }
.social a{
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--line-deep); color:var(--on-deep-60);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.social a:hover{ border-color:var(--signal); color:var(--signal); transform:translateY(-2px); }
.social svg{ width:17px; height:17px; fill:currentColor; }

/* ---- formulario ---- */
.form{ display:grid; gap:var(--s3); }
.form__row{ display:grid; gap:var(--s3); grid-template-columns:minmax(0,1fr); }
@media (min-width:620px){ .form__row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.field{ display:flex; flex-direction:column; gap:8px; }
.field > label{
  font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-deep-60);
}
.field input,.field textarea,.field select{
  font-family:inherit; font-size:var(--t-body); font-weight:300;
  color:var(--white); background:transparent;
  border:0; border-bottom:1px solid var(--line-deep);
  border-radius:0;
  padding:12px 2px; min-height:48px;
  transition:border-color var(--dur) var(--ease);
  appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 13px) calc(50% + 1px), calc(100% - 8px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:28px;
}
.field select option{ background:var(--ink-deep); color:var(--white); }
.field textarea{ resize:vertical; min-height:112px; line-height:1.55; }
.field input::placeholder,.field textarea::placeholder{ color:rgba(255,255,255,.48); }
.field input:hover,.field textarea:hover,.field select:hover{ border-bottom-color:var(--on-deep-30); }
.field input:focus,.field textarea:focus,.field select:focus{
  border-bottom-color:var(--signal); outline:none;
}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:2px solid var(--signal); outline-offset:4px;
}
.field__hint{ font-size:var(--t-small); color:var(--on-deep-60); font-weight:300; }
.field__err{ font-size:var(--t-small); color:#FF7A6B; min-height:0; }
.field.is-bad input,.field.is-bad textarea{ border-bottom-color:#FF7A6B; }

.form__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3);
  padding-top:var(--s1);
}
.form__note{ font-size:var(--t-small); color:var(--on-deep-60); font-weight:300; max-width:34ch; }

/* =========================================================================
   Pie
   ========================================================================= */

.foot{
  padding-block:var(--s5) var(--s4);
}
.foot__grid{
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5);
  justify-content:space-between; align-items:flex-end;
}
.foot__mark{ display:flex; align-items:center; gap:12px; }
.foot__mark img{ width:44px; height:44px; border-radius:50%; background:var(--white); object-fit:cover; }
.foot__links{ display:flex; flex-wrap:wrap; gap:var(--s3); }
.foot__links a{ font-size:var(--t-small); font-weight:300; color:var(--on-deep-60); transition:color var(--dur) var(--ease);
  display:inline-flex; align-items:center; min-height:44px; }
.foot__links a:hover{ color:var(--signal); }
.foot__fine{ font-size:var(--t-small); font-weight:300; letter-spacing:0; text-transform:none; color:var(--on-deep-60); }

/* =========================================================================
   Páginas interiores
   ========================================================================= */

.phero{
  padding-top:clamp(140px,17vh,220px);
  padding-bottom:var(--sec);
}
.phero__h{ font-size:var(--t-hero); font-weight:200; letter-spacing:-.045em; line-height:.97; max-width:14ch; }
.phero__h em{ font-family:var(--voice); font-style:italic; font-weight:400; }

.split{ display:grid; gap:var(--s5); grid-template-columns:minmax(0,1fr); }
@media (min-width:960px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s7); align-items:start; }
}
.split--sticky > :first-child{ position:sticky; top:110px; }
@media (max-width:959px){ .split--sticky > :first-child{ position:static; } }

.figure{ display:flex; flex-direction:column; gap:12px; }
.figure img{ width:100%; height:auto; background:var(--line-soft); }
.figure figcaption{ font-size:var(--t-small); color:var(--ink-45); font-weight:300; }

.kv{ border-top:1px solid var(--line); }
.deep .kv{ border-top-color:var(--line-deep); }
.kv__row{
  display:grid; gap:4px var(--s4);
  grid-template-columns:minmax(0,1fr);
  padding-block:var(--s3);
  border-bottom:1px solid var(--line);
}
.deep .kv__row{ border-bottom-color:var(--line-deep); }
@media (min-width:640px){ .kv__row{ grid-template-columns:minmax(0,.5fr) minmax(0,1fr); } }
.kv__k{ font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45); }
.deep .kv__k{ color:var(--on-deep-60); }
.kv__v{ font-weight:300; }

.back{
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--t-small); color:var(--ink-60);
  min-height:44px; padding-block:4px;
  transition:color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.back:hover{ color:var(--signal-deep); gap:14px; }
.deep .back{ color:var(--on-deep-60); }
.deep .back:hover{ color:var(--signal); }

.nextcase{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:var(--s2) var(--s4);
  padding-block:var(--s5);
  border-top:1px solid var(--line);
}
.nextcase__t{ font-size:var(--t-h2); font-weight:200; letter-spacing:-.04em; }
.nextcase:hover .nextcase__t{ color:var(--signal-deep); }

/* =========================================================================
   Reveal por scroll — estado base
   ========================================================================= */

[data-rise]{ opacity:0; }
.no-js [data-rise], .is-settled [data-rise]{ opacity:1; }

/* =========================================================================
   Movimiento reducido — la página se lee entera, quieta
   ========================================================================= */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-rise]{ opacity:1 !important; transform:none !important; }
  .node__photo img{ opacity:1 !important; }
  .stem,.fan__stem,.fan__drops > i{ transform:none !important; }
  .fan__bus{ transform:scaleX(1) !important; }
  .stage__hint{ display:none; }
}

/* =========================================================================
   REDISEÑO 2026 — hero de foto + nuevas secciones
   Vallesa = --signal (#009EFE) · Navy = --ink-deep (#001827)
   ========================================================================= */

/* ---------- botones de marca ---------- */
.btn--vallesa{ --btn-bg:var(--signal); --btn-fg:var(--ink-deep); --btn-bd:var(--signal); }
.btn--vallesa:hover{ --btn-bg:var(--signal-deep); --btn-fg:var(--white); --btn-bd:var(--signal-deep); }
.btn--navy{ --btn-bg:var(--ink-deep); --btn-fg:var(--white); --btn-bd:var(--ink-deep); }
.btn--navy:hover{ --btn-bg:var(--ink); --btn-bd:var(--ink); --btn-fg:var(--white); }

/* =========================================================================
   00 — HERO
   ========================================================================= */
.hero{
  position:relative;
  background:var(--paper);
  overflow:hidden;
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:stretch;
}
@media (min-width:960px){
  .hero__grid{ grid-template-columns:1.05fr 1fr; min-height:100vh; }
}
/* la columna de texto reutiliza .pitch del sistema */
.hero .pitch{
  padding:clamp(112px,15vh,168px) var(--gut) var(--sec);
  justify-content:center;
}
@media (max-width:639px){ .hero .pitch{ padding-bottom:48px; } }
@media (min-width:960px){
  .hero .pitch{
    padding-left:max(var(--gut), calc((100vw - var(--shell)) / 2 + var(--gut)));
    padding-right:clamp(28px,4vw,64px);
  }
}
.hero .pitch__h1{ font-size:clamp(2.5rem,5.4vw,4.6rem); }
.hero .pitch__h1 em{ color:inherit; }   /* «departamento» en el mismo negro que el resto */

/* foto a sangre: pega arriba (bajo la barra) y a la derecha, sin blancos */
.hero__media{
  position:relative; margin:0;
  min-height:104vw;
}
@media (min-width:960px){ .hero__media{ min-height:100%; } }
.hero__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:60% 24%;
  display:block;
}

/* =========================================================================
   01 — ELIGE LO QUE PUEDE PAGAR (fondo vallesa, tarjetas navy)
   ========================================================================= */
.choose{ background:var(--signal); color:var(--ink-deep); }
.choose__head{
  display:grid; gap:var(--s3);
  grid-template-columns:minmax(0,1fr);
  margin-bottom:var(--s6);
}
@media (min-width:900px){
  .choose__head{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:end; }
}
.choose__h{
  font-size:clamp(1.6rem,3.3vw,2.85rem); font-weight:400; letter-spacing:-.03em;
  color:var(--ink-deep); max-width:none; text-wrap:balance;
}
.choose__h br{ display:none; }
@media (min-width:620px){ .choose__h br{ display:inline; } }  /* 2 líneas exactas */
.choose__h em{ font-family:var(--voice); font-style:italic; font-weight:500; letter-spacing:-.03em; }
.choose__intro{
  font-size:var(--t-lead); font-weight:300; line-height:1.5;
  color:var(--ink-deep); max-width:48ch; letter-spacing:-.01em;
}

.cards{
  display:grid; gap:var(--s3);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:720px){ .cards{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); } }

.card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(340px,44vw,400px);
  padding:var(--s3);
  background:var(--ink-deep);
  border:1px solid rgba(255,255,255,.10);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover{ transform:translateY(-8px); box-shadow:0 26px 50px -24px rgba(0,10,20,.65); }
.card__i{
  position:absolute; top:var(--s3); left:var(--s3); z-index:2;
  font-size:var(--t-label); letter-spacing:.18em;
  color:var(--on-deep-30); font-variant-numeric:tabular-nums;
}
.card__emoji{
  position:absolute; inset:0 0 34% 0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.card__emoji::before{
  content:""; position:absolute; width:66%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(0,158,254,.34) 0%, rgba(0,158,254,0) 68%);
}
.card__emoji img{
  position:relative; width:clamp(128px,17vw,168px); height:auto; object-fit:contain;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.4));
  transition:transform 420ms var(--ease);
}
.card:hover .card__emoji img{ transform:scale(1.09) translateY(-4px); }
/* la cara del dinero trae fondo amarillo horneado: se recorta en moneda */
.card__emoji--coin img{
  clip-path:circle(45% at 50% 48%);
  width:clamp(150px,19vw,188px);
}
.card__panel{
  position:relative; z-index:2;
  background:rgba(0,24,39,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);
  padding:16px 18px;
  display:flex; flex-direction:column; gap:9px;
}
.card__tag{
  align-self:flex-start;
  font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase;
  color:var(--signal); font-weight:500;
  padding:5px 11px; border:1px solid rgba(0,158,254,.4);
  background:rgba(0,158,254,.10);
}
.card__d{ font-size:var(--t-small); color:var(--on-deep); font-weight:300; line-height:1.5; }

/* =========================================================================
   02 — QUIEN SOY
   ========================================================================= */
.quiensoy__grid{
  display:grid; gap:var(--s5);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:900px){
  .quiensoy__grid{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(40px,6vw,96px); }
}
.quiensoy__media{
  position:relative; margin:0;
  align-self:start;
}
@media (min-width:900px){ .quiensoy__media{ position:sticky; top:108px; } }
.quiensoy__media img{
  width:100%; max-width:420px; height:auto; display:block;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.4));
}
.quiensoy__tag{
  position:absolute; left:8%; bottom:24%;
  font-family:var(--sans); font-style:normal; font-weight:400;
  font-size:clamp(1.25rem,2.6vw,1.9rem);
  color:var(--white); letter-spacing:-.01em; line-height:1;
  background:var(--signal); padding:.28em .5em .34em;
}
.quiensoy__text{ max-width:64ch; }
.quiensoy__text p{ color:var(--on-deep); font-weight:300; }
.quiensoy__text p + p{ margin-top:1.05em; }

/* =========================================================================
   04 — TRABAJOS (acordeón en banda navy)
   ========================================================================= */
.works{ padding-bottom:var(--sec); }
/* toda la sección va en navy; el índice hereda el fondo */
.works__recent{ padding-block:clamp(40px,6vh,72px) clamp(48px,7vh,88px); }
.works__label{
  font-size:var(--t-h3); font-weight:400; color:var(--white);
  letter-spacing:-.03em; text-transform:none; margin-bottom:var(--s3);
}
.works__label--more{ margin-top:var(--s6); }
.deep .index{ border-top-color:var(--line-deep); }
.deep .index__row{ border-bottom-color:var(--line-deep); transition:background var(--dur) var(--ease); }
.deep .index__row:hover .index__t{ color:var(--signal); }
.deep .index__row:hover .index__k{ color:var(--on-deep); }
.deep .index__n{ color:var(--on-deep-60); }
.deep .index__t{ color:var(--white); transition:color var(--dur) var(--ease); }
.deep .index__k{ color:var(--on-deep-60); transition:color var(--dur) var(--ease); }

/* ---- tarjetas de proyecto (abren diálogo) ---- */
.pcards{ display:grid; gap:var(--s3); grid-template-columns:minmax(0,1fr); }
@media (min-width:620px){ .pcards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:980px){ .pcards{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.pcard{
  position:relative; display:flex; flex-direction:column; text-align:left;
  padding:0; border:1px solid var(--line-deep); overflow:hidden;
  background:rgba(255,255,255,.04); color:inherit; font:inherit; cursor:pointer;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pcard:hover{ transform:translateY(-6px); border-color:rgba(0,158,254,.55); box-shadow:0 28px 56px -30px rgba(0,0,0,.8); }
.pcard:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }
.pcard__media{ display:block; aspect-ratio:4/3; overflow:hidden; background:var(--ink-deep); }
.pcard__media img{ width:100%; height:100%; object-fit:cover; filter:none; transition:transform 720ms var(--ease); }
.pcard:hover .pcard__media img{ transform:scale(1.05); }
.pcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2); padding:14px 16px; }
.pcard__t{ font-size:1.0625rem; font-weight:400; color:var(--white); letter-spacing:-.02em; }
.pcard__plus{ position:relative; width:26px; height:26px; flex:none; border-radius:50%; border:1px solid var(--line-deep); transition:border-color var(--dur) var(--ease); }
.pcard__plus::before,.pcard__plus::after{ content:""; position:absolute; background:var(--signal); }
.pcard__plus::before{ left:6px; top:12px; width:13px; height:1.5px; }
.pcard__plus::after{ left:12px; top:6px; width:1.5px; height:13px; }
.pcard:hover .pcard__plus{ border-color:var(--signal); }

/* ---- diálogo de proyecto ---- */
body.is-locked{ overflow:hidden; }
.pdlg{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:var(--s3); }
.pdlg[hidden]{ display:none; }
.pdlg__backdrop{ position:absolute; inset:0; background:rgba(0,10,18,.74); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .28s var(--ease); }
.pdlg.is-open .pdlg__backdrop{ opacity:1; }
.pdlg__panel{
  position:relative; z-index:1; width:min(880px,100%); max-height:88vh; overflow-y:auto;
  background:var(--ink-deep); color:var(--on-deep);
  border:1px solid var(--line-deep);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.85);
  opacity:0; transform:translateY(22px) scale(.97);
  transition:opacity .32s var(--ease), transform .32s var(--ease);
}
.pdlg.is-open .pdlg__panel{ opacity:1; transform:none; }
.pdlg__img{ width:100%; height:clamp(190px,32vh,330px); object-fit:cover; display:block; }
.pdlg__body{ padding:var(--s4) clamp(24px,4vw,48px) clamp(32px,5vw,48px); display:flex; flex-direction:column; gap:10px; }
.pdlg__t{ font-size:clamp(1.6rem,3.2vw,2.4rem); font-weight:400; color:var(--white); letter-spacing:-.035em; }
.pdlg__desc{ margin-top:6px; }
.pdlg__desc p{ color:var(--on-deep-60); font-weight:300; }
.pdlg__desc p + p{ margin-top:1em; }
.pdlg__desc strong{ color:var(--white); font-weight:500; }
.pdlg__stats{ display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line-deep); }
.pdlg__stats span{ display:flex; flex-direction:column; gap:4px; font-size:var(--t-label); letter-spacing:.13em; text-transform:uppercase; color:var(--on-deep-60); }
.pdlg__stats b{ font-size:1.5rem; font-weight:400; letter-spacing:-.03em; color:var(--signal); text-transform:none; letter-spacing:-.03em; }
.pdlg__close{
  position:absolute; z-index:2; top:14px; right:14px; width:44px; height:44px;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); background:rgba(0,24,39,.65); color:var(--white);
  cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pdlg__close:hover{ border-color:var(--signal); color:var(--signal); }

/* ---- vista previa flotante en «Más trabajos» ---- */
.index__t{ position:relative; display:inline-block; }
.index__t::after{ content:""; position:absolute; left:0; bottom:-3px; height:1px; width:0; background:var(--signal); transition:width .32s var(--ease); }
.deep .index__row:hover .index__t::after{ width:100%; }
.preview{
  position:fixed; top:0; left:0; z-index:60;
  width:280px; height:180px; overflow:hidden;
  pointer-events:none; opacity:0; will-change:transform;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.85);
  transition:opacity .3s var(--ease);
}
.preview.is-on{ opacity:1; }
.preview img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:899px){ .preview{ display:none; } }

/* =========================================================================
   05 — PROCESO (línea de tiempo con raíl vallesa)
   ========================================================================= */
.phases{ position:relative; border-top:1px solid var(--line); }
.phase{
  position:relative;
  display:grid; gap:12px var(--s3);
  grid-template-columns:auto 1fr;
  grid-template-areas:"i t" "body body" "time time";
  padding-block:var(--s5);
  border-bottom:1px solid var(--line);
}
.phases__fill{ display:none; }   /* móvil: sin raíl */
@media (min-width:900px){
  .phase{
    grid-template-columns:66px minmax(0,.78fr) minmax(0,1.7fr);
    grid-template-areas:"i t body";
    align-items:start; gap:var(--s2) var(--s5);
  }
  /* raíl gris que se colorea de vallesa al bajar */
  .phases::before{
    content:""; position:absolute; left:31px; top:var(--s5); bottom:var(--s5);
    width:2px; background:var(--line);
  }
  .phases__fill{
    display:block; position:absolute; left:31px; top:var(--s5); width:2px;
    height:calc(100% - 2 * var(--s5)); z-index:0;
    background:var(--signal);
    transform:scaleY(0); transform-origin:top center;
  }
}
.phase__i{
  grid-area:i; position:relative; z-index:1;
  font-family:var(--voice); font-style:italic; font-weight:500;
  font-size:1.7rem; letter-spacing:-.05em; color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1;
  align-self:center;
  transition:color var(--dur) var(--ease);
}
@media (min-width:900px){
  .phase__i{ align-self:start; background:var(--paper); padding:1px 5px 5px; }
}
.phase__t{ grid-area:t; font-size:var(--t-h3); font-weight:400; letter-spacing:-.03em; align-self:center; transition:color var(--dur) var(--ease); }
@media (min-width:900px){ .phase__t{ align-self:start; padding-top:3px; } }
.phase__body{ grid-area:body; }
.phase__time{
  grid-area:time;
  font-size:var(--t-label); letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-45); white-space:nowrap;
}
@media (min-width:900px){
  .phase__time{ position:absolute; top:calc(var(--s5) + 4px); right:0; }
}
.phase__lead{ color:var(--ink-60); font-weight:300; max-width:52ch; line-height:1.55; }
.phase__list{ display:grid; gap:11px; margin-top:var(--s3); }
.phase__list li{
  position:relative; padding-left:20px;
  font-size:var(--t-small); color:var(--ink-60); font-weight:300; line-height:1.5;
}
.phase__list li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:8px; height:8px; border-radius:50%;
  background:var(--signal); border:0;
}
.phase__list strong{ font-weight:500; color:var(--ink); }

/* hover / press en vallesa */
.phase:hover .phase__t,
.phase:focus-within .phase__t{ color:var(--signal); }
.phase:hover .phase__i,
.phase:focus-within .phase__i{ color:var(--signal); }

/* sin línea al cierre de cada lista (puestos, índice, proceso) */
.posts .post:last-child{ border-bottom:0; }
.posts .post:last-child::after{ content:none; }   /* sin subrayado hover en la última */
.index__row:last-child{ border-bottom:0; }
.phase:last-child{ border-bottom:0; }

/* =========================================================================
   07 — TESTIMONIOS (cita + pastillas de avatar)
   ========================================================================= */
.uniq{ display:flex; flex-direction:column; align-items:center; gap:var(--s5); padding-block:var(--s4); text-align:center; }
.uniq__stage{ position:relative; max-width:min(46rem,100%); padding-inline:clamp(20px,4vw,48px); }
.uniq__stage::before,.uniq__stage::after{
  position:absolute; font-family:var(--voice); line-height:1; pointer-events:none; user-select:none;
  font-size:clamp(3.5rem,8vw,5.5rem); color:rgba(255,255,255,.09);
}
.uniq__stage::before{ content:"\201C"; left:-8px; top:-30px; }
.uniq__stage::after{ content:"\201D"; right:-8px; bottom:-58px; }
.uniq__q{
  margin:0; font-weight:300; letter-spacing:-.02em; color:var(--white);
  font-size:clamp(1.3rem,2.8vw,2.05rem); line-height:1.38;
  transition:opacity .4s var(--ease), filter .4s var(--ease), transform .4s var(--ease);
}
.uniq.is-anim .uniq__q{ opacity:0; filter:blur(4px); transform:scale(.98); }
.uniq__role{
  font-size:var(--t-label); letter-spacing:.2em; text-transform:uppercase; color:var(--on-deep-60);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.uniq.is-anim .uniq__role{ opacity:0; transform:translateY(8px); }
.uniq__pills{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
.uniq__pill{
  display:inline-flex; align-items:center; padding:5px; min-height:44px; border:0; border-radius:999px;
  background:transparent; color:var(--white); font:inherit; cursor:pointer;
  transition:background .5s var(--ease), padding .5s var(--ease), color .5s var(--ease);
}
.uniq__av{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none; display:block; }
.uniq__name{
  display:inline-block; max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  font-size:var(--t-small); font-weight:500;
  transition:max-width .5s var(--ease), opacity .5s var(--ease), margin .5s var(--ease);
}
.uniq__pill:hover{ background:rgba(255,255,255,.10); padding:5px 18px 5px 5px; }
.uniq__pill.is-active{ background:var(--white); color:var(--ink-deep); padding:5px 18px 5px 5px; }
.uniq__pill:hover .uniq__name,.uniq__pill.is-active .uniq__name{ max-width:200px; opacity:1; margin-left:10px; }
.uniq__pill:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }
.tcols__data{ display:none; }

/* =========================================================================
   08 — PREGUNTAS FRECUENTES
   ========================================================================= */
.qa{ border-top:1px solid var(--line); }
.qa__item{ border-bottom:1px solid var(--line); }
.qa__item h3{ margin:0; font-weight:inherit; letter-spacing:normal; }
.qa__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s3) 0; min-height:64px;
  background:transparent; border:0; cursor:pointer; text-align:left;
  font-family:inherit; font-size:clamp(1.05rem,1.7vw,1.35rem); font-weight:300;
  letter-spacing:-.02em; color:var(--ink);
  transition:color var(--dur) var(--ease);
}
.qa__q:hover,.qa__q:active{ color:var(--signal); }
.qa__q:hover .qa__ico::before,.qa__q:hover .qa__ico::after{ background:var(--signal); }
.qa__ico{ position:relative; width:15px; height:15px; flex:none; }
.qa__ico::before,.qa__ico::after{
  content:""; position:absolute; background:var(--signal-deep); transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.qa__ico::before{ left:0; top:7px; width:15px; height:1.5px; }
.qa__ico::after{ left:7px; top:0; width:1.5px; height:15px; }
.qa__q[aria-expanded="true"] .qa__ico::after{ transform:scaleY(0); opacity:0; }
.qa__a{ overflow:hidden; height:0; }
.no-js .qa__a{ height:auto; }
.qa__a > p{
  max-width:64ch; padding-bottom:var(--s4); margin:0;
  color:var(--ink-60); font-weight:300; line-height:1.6;
}
.qa__a a{ color:var(--signal-deep); border-bottom:1px solid currentColor; }
.qa__a a:hover{ color:var(--ink); }

/* =========================================================================
   CONTACTO — formulario a dos columnas + WhatsApp
   ========================================================================= */
/* el pie: formulario + foto a la misma altura */
#hablamos{ overflow:hidden; }
#hablamos .close__top{ margin-bottom:var(--s4); }
.signin{ display:grid; gap:var(--s5); grid-template-columns:minmax(0,1fr); }
@media (min-width:980px){
  .signin{ grid-template-columns:minmax(0,1.05fr) minmax(0,.68fr); gap:var(--s6); align-items:stretch; }
}
.signin__form{ align-content:start; }
.field__box{
  display:block; border:1px solid var(--line-deep);
  background:rgba(255,255,255,.05);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field__box:focus-within{ border-color:var(--signal); background:rgba(0,158,254,.09); }
.signin__form .field input,.signin__form .field select,.signin__form .field textarea{
  width:100%; border:0; background:transparent; padding:14px 16px; min-height:52px;
}
.signin__form .field textarea{ min-height:120px; resize:vertical; }
.signin__form .field input:focus,.signin__form .field select:focus,.signin__form .field textarea:focus{ outline:none; }
.signin__form .field select{ background-position:calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px); }
.signin__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--s1); }
.btn--send{ --btn-bg:var(--white); --btn-fg:var(--ink-deep); --btn-bd:var(--white); }
.btn--send:hover{ --btn-bg:var(--paper); --btn-bd:var(--paper); --btn-fg:var(--ink-deep); }

.signin__hero{ position:relative; overflow:hidden; margin:0; }
@media (max-width:979px){
  .signin__hero{ margin-inline:calc(-1 * var(--gut)); min-height:min(104vw,480px); }
}
@media (min-width:980px){
  .signin__hero{ margin-right:calc(-1 * max(var(--gut), (100vw - var(--shell)) / 2 + var(--gut))); }
}
.signin__hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 26%; }
.wa{
  position:absolute; left:50%; transform:translateX(-50%);
  --wa-bottom:22px; bottom:var(--wa-bottom);
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; min-height:48px;
  background:#25D366; color:#04291a;
  font-size:var(--t-small); font-weight:500; white-space:nowrap;
  box-shadow:0 18px 36px -16px rgba(0,0,0,.75);
  transition:transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.wa:hover{ transform:translateX(-50%) translateY(-3px); filter:brightness(1.06); }
.wa__ico{ font-size:1.05rem; line-height:1; }
@media (min-width:980px){ .wa{ --wa-bottom:46px; } }
.wa:focus-visible{ outline:2px solid var(--white); outline-offset:3px; }