/* ═══════════════════════════════════════════════════════════════════
   ARPE · home 2026 — FASE 2
   Azul #0D1B2A · Naranja #FF7A00 · Blanco · Negro #05090F

   Qué cambió respecto de la fase 1 y por qué:
   · El naranja NUNCA es texto sobre fondo claro (2,51:1). Para eso está
     --nar-t #B54D00, que da 5,00:1. El #FF7A00 vive en superficies.
   · El texto sobre el botón naranja es tinta, no blanco: 2,61 → 6,66:1.
   · Se fue el eyebrow naranja en versalitas que estaba en cuatro sitios.
   · Se fueron los 01-06 de servicios: seis servicios no son una secuencia.
   · Se fue la grilla de métricas. Dos de sus cuatro celdas no eran números.
   · Radios de 26px a 14px. Nada aquí es un chicle.
   · La entrada uniforme .rv ya no se aplica a todo; cada sección tiene
     el movimiento que le corresponde, o ninguno.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --negro:#05090F;
  --tinta:#0D1B2A;
  --tinta-2:#16293D;
  --nar:#FF7A00;          /* marca: superficies, nunca texto sobre claro */
  --nar-t:#B54D00;        /* naranja legible sobre fondo claro — 5,00:1  */
  --hueso:#FBFAF8;
  --gris-1:#5A6875;       /* 5,48:1 sobre hueso */
  --gris-2:#AAB6C2;       /* sólo sobre tinta */
  --linea-o:rgba(255,255,255,.13);
  --linea-c:#E1E5EA;
  --e:cubic-bezier(.16,1,.3,1);

  /* escala z semántica */
  --z-fondo:-2; --z-velo:-1; --z-base:1; --z-sticky:10; --z-menu:100;
}

.b2026{
  font-family:"Source Serif 4",Georgia,serif;
  --display:"Montserrat","Helvetica Neue",Arial,sans-serif;
}
.b2026 h1,.b2026 h2,.b2026 h3,.b2026 .ui{font-family:var(--display)}
.b2026 h1,.b2026 h2,.b2026 h3{text-wrap:balance}
.b2026 p{text-wrap:pretty}
.b2026 .rejilla{width:min(1340px,calc(100% - 48px));margin-inline:auto}
@media(max-width:640px){.b2026 .rejilla{width:calc(100% - 36px)}}

/* ── Movimiento ──────────────────────────────────────────────────
   Regla dura que se mantiene de la fase 1: el contenido es visible por
   defecto. Sólo se esconde si el JS alcanzó a marcar html.anim.        */
.rv{opacity:1;transform:none}
html.anim .rv{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--e),transform .8s var(--e)}
html.anim .rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .lin i{transform:none!important}
}

/* titular que se revela por líneas — sólo el h1 del hero */
.lin{display:block;overflow:hidden;padding-bottom:.06em}
.lin i{display:block;font-style:normal}
html.anim .lin i{transform:translateY(105%);transition:transform 1s var(--e)}
html.anim .on .lin i{transform:none}
.lin:nth-child(2) i{transition-delay:.08s}
.lin:nth-child(3) i{transition-delay:.16s}

/* ── Botones ─────────────────────────────────────────────────────── */
.b26{display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:0 28px;
  border:0;border-radius:12px;background:var(--nar);color:var(--tinta);
  font-family:var(--display);font-size:15.5px;font-weight:700;letter-spacing:-.01em;
  cursor:pointer;text-decoration:none;
  transition:transform .45s var(--e),background .45s var(--e)}
.b26:hover{background:#ff9224;transform:translateY(-2px)}
.b26:active{transform:scale(.985)}
.b26:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.b26 i{width:28px;height:28px;border-radius:50%;background:rgba(13,27,42,.16);
  display:grid;place-items:center;font-style:normal;font-size:13px;
  transition:transform .45s var(--e)}
.b26:hover i{transform:translate(3px,-2px)}
.b26--fantasma{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32)}
.b26--fantasma:hover{background:rgba(255,255,255,.09)}
.b26--fantasma i{background:rgba(255,255,255,.18)}
.b26--fantasma:focus-visible{outline-color:var(--nar)}

/* ── 1 · HERO ────────────────────────────────────────────────────
   Sin fotografía. La imagen anterior era un portátil con un panel de
   gráficos y una cordillera nevada: ni Antofagasta ni nada que ARPE
   venda. La tesis de la firma es una frase, así que la frase manda.  */
.hero26{position:relative;background:var(--tinta);color:#fff;overflow:hidden;
  isolation:isolate;display:flex;align-items:center;min-height:min(94svh,880px)}
/* Antofagasta de verdad: la costa, el cerro y la ciudad. El velo ya viene
   quemado en el archivo, así que el titular se lee aunque la imagen falle. */
.hero26::before{content:"";position:absolute;inset:0;z-index:var(--z-fondo);
  background:
    radial-gradient(120% 90% at 88% 8%,rgba(255,122,0,.16),transparent 58%),
    linear-gradient(180deg,rgba(13,27,42,.30) 0%,rgba(10,21,34,.62) 100%),
    url("../assets/oficina-arpe.jpg?v=202609071240") center right / cover no-repeat,
    var(--tinta)}
.hero26 .rejilla{padding:clamp(118px,14vh,168px) 0 clamp(72px,9vh,104px);position:relative}
.hero26__g{display:grid;grid-template-columns:7fr 5fr;gap:clamp(40px,5vw,84px);align-items:start}
.hero26 h1{margin:0;max-width:14ch;font-weight:800;letter-spacing:-.028em;line-height:1.03;
  font-size:clamp(2.5rem,5.4vw,5rem)}
.hero26 h1 em{font-style:normal;color:var(--nar)}
.hero26 .bajada{max-width:52ch;margin:30px 0 0;font-size:clamp(1.1rem,1.5vw,1.32rem);
  line-height:1.62;color:#D3DDE7}
.hero26 .acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}

/* atajos: las cuatro consultas que más llegan, en el primer pantallazo */
.atajos{border-top:1px solid var(--linea-o);margin-top:8px}
.atajos__t{margin:0;padding:0 0 6px;font-family:var(--display);font-size:13px;
  font-weight:700;color:var(--gris-2)}
.atajo{display:flex;align-items:center;justify-content:space-between;gap:18px;
  width:100%;padding:17px 0;border:0;border-bottom:1px solid var(--linea-o);
  background:none;cursor:pointer;text-align:left;color:#fff;font-family:var(--display);
  font-size:15.5px;font-weight:600;
  transition:color .35s var(--e),padding-left .35s var(--e)}
.atajo:hover{color:var(--nar);padding-left:8px}
.atajo:focus-visible{outline:2px solid var(--nar);outline-offset:3px}
.atajo::after{content:"↓";color:var(--nar);font-size:14px;flex:none;opacity:.75}

/* nota al pie del banner: a quién atendemos, sin robarle aire al titular */
.nota-pyme{display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  font-family:var(--display);font-size:13.5px;font-weight:600;color:var(--gris-2)}
.nota-pyme::before{content:"";width:7px;height:7px;border-radius:50%%;
  background:var(--nar);flex:none}

/* la firma: quién responde, desde el primer pantallazo */
.firma{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
  margin-top:clamp(52px,7vh,84px);padding-top:26px;
  border-top:1px solid var(--linea-o);font-family:var(--display)}
.firma__q{font-size:13.5px;color:var(--gris-2);letter-spacing:.005em}
.firma__n{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14.5px;font-weight:700;color:#fff}
.firma__n span{display:inline-flex;align-items:center;gap:9px}
.firma__n span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--nar)}

/* ── 2 · LOS DOS SOCIOS ──────────────────────────────────────────
   Sin retrato. Los archivos que había eran fotografías de banco de
   imágenes rotuladas con el nombre y apellido de los socios. Cuando
   lleguen las de verdad, entran aquí.                                */
.quien{position:relative;isolation:isolate;color:#fff;
  padding:clamp(84px,10vw,150px) 0;background:var(--tinta)}
/* Fondo neutro: la costa competía con las fichas. Queda un degradado
   propio, sin imagen, para que manden las dos caras y los organismos. */
.quien::before{content:"";position:absolute;inset:0;z-index:var(--z-fondo);
  background:
    radial-gradient(100% 76% at 84% 4%,rgba(255,122,0,.10),transparent 58%),
    linear-gradient(180deg,#0B1725 0%,var(--tinta) 46%,#0B1725 100%)}

.socios{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.socio26{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;
  padding:34px 34px 38px;border-radius:16px;
  background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px var(--linea-o)}
.mono{width:78px;height:78px;border-radius:14px;object-fit:cover;flex:none;
  background:var(--tinta);display:block;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.socio26 .rol{margin:0 0 6px;font-family:var(--display);font-size:13px;font-weight:700;
  color:var(--nar)}
.socio26 h3{margin:0 0 12px;font-size:clamp(1.4rem,2.2vw,1.95rem);font-weight:800;
  letter-spacing:-.02em;line-height:1.12}
.socio26 .esp{margin:0;font-size:16.5px;color:#C6D1DC;line-height:1.6;max-width:38ch}
/* Un solo botón para los dos: el número es uno, y personalizarlo por
   socio obligaba al visitante a elegir con quién hablar antes de contar
   su problema. */
.hablemos{margin-top:clamp(30px,3.4vw,44px)}
.hablemos .b26 svg{width:19px;height:19px;flex:none;fill:currentColor}

/* Los organismos con los que se cumple mes a mes. Van en chips claros
   porque son logos a color: sobre el fondo oscuro se leerían sucios. */
.organismos{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-top:clamp(34px,4vw,52px);padding-top:clamp(30px,3.5vw,44px);
  border-top:1px solid var(--linea-o)}
.organismos__t{width:100%;margin:0 0 4px;font-family:var(--display);font-size:13px;
  font-weight:700;color:var(--gris-2)}
.orgchip{background:#fff;border-radius:12px;height:86px;min-width:172px;
  display:grid;place-items:center;padding:14px 20px;
  box-shadow:0 12px 30px rgba(0,0,0,.26)}
.orgchip img{max-width:132px;max-height:50px;object-fit:contain;display:block}
/* El sello de la Dirección del Trabajo es circular (1:1); con la altura
   común de los apaisados quedaba diminuto al lado de Previred. */
.orgchip--cuadrado{padding:8px 16px}
.orgchip--cuadrado img{max-height:70px;max-width:110px}
.orgchip--f30{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.26);
  text-align:center;color:#fff}
.orgchip--f30 b{display:block;font-family:var(--display);font-size:19px;font-weight:800;
  letter-spacing:-.02em}
.orgchip--f30 span{display:block;font-family:var(--display);font-size:10px;font-weight:700;
  color:var(--nar);margin-top:4px;letter-spacing:.07em}
@media(max-width:640px){
  .orgchip{min-width:0;flex:1 1 44%;height:74px;padding:12px 14px}
  .orgchip img{max-width:100%;max-height:42px}
  .orgchip--cuadrado img{max-height:54px}
}

/* ── 3 · QUÉ NECESITAS RESOLVER ──────────────────────────────────── */
.resolver{position:relative;isolation:isolate;color:#fff;
  padding:clamp(90px,11vw,168px) 0;background:var(--tinta)}
/* La foto va muy atenuada: encima vive el panel de situaciones y ese
   contenido manda. Es textura, no protagonista. */
.resolver::before{content:"";position:absolute;inset:0;z-index:var(--z-fondo);
  background:url("../assets/fondo-resolver.jpg?v=202609071340") center/cover no-repeat}
.resolver__cab{margin-bottom:clamp(44px,5vw,68px)}
.resolver h2{margin:0 0 20px;max-width:19ch;font-weight:800;letter-spacing:-.028em;
  line-height:1.04;font-size:clamp(2.2rem,5vw,4.4rem)}
.resolver h2 em{font-style:normal;color:var(--nar)}
.resolver__cab p{margin:0;font-size:18px;line-height:1.65;color:#C6D1DC;max-width:54ch}
.resolver__marco{display:grid;grid-template-columns:5fr 7fr;
  border:1px solid var(--linea-o);border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.02)}
.sit{display:flex;flex-direction:column;border-right:1px solid var(--linea-o)}
.sit button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:15px;
  padding:21px 26px;cursor:pointer;color:#C2CEDA;font-family:var(--display);
  font-size:15.5px;font-weight:600;border-bottom:1px solid var(--linea-o);
  transition:background .35s var(--e),color .35s var(--e)}
.sit button:last-child{border-bottom:0}
.sit button::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.26);transition:background .35s var(--e),transform .35s var(--e)}
.sit button:hover{color:#fff;background:rgba(255,255,255,.04)}
.sit button[aria-selected="true"]{color:#fff;background:rgba(255,122,0,.10)}
.sit button[aria-selected="true"]::before{background:var(--nar);transform:scale(1.6)}
.sit button:focus-visible{outline:2px solid var(--nar);outline-offset:-3px}
.panel{padding:clamp(34px,3.6vw,54px);position:relative;min-height:430px}
.panel__c{opacity:1;transform:none}
html.anim .panel__c{opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--e),transform .4s var(--e)}
html.anim .panel__c.on{opacity:1;transform:none}
.panel h3{margin:0 0 18px;font-size:clamp(1.4rem,2.3vw,2.05rem);font-weight:800;
  letter-spacing:-.02em;line-height:1.16;max-width:22ch}
.panel p{margin:0 0 20px;font-size:17px;line-height:1.66;color:#C6D1DC;max-width:56ch}
.panel p b{color:#fff;font-weight:600}
.panel .rotulo{margin:0 0 10px;font-family:var(--display);font-size:13px;font-weight:700;
  color:var(--nar)}
.panel .cierra{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;
  padding-top:22px;border-top:1px solid var(--linea-o);margin-top:28px}
@media(max-width:900px){
  .resolver__marco{grid-template-columns:1fr}
  .sit{flex-direction:row;overflow-x:auto;border-right:0;
    border-bottom:1px solid var(--linea-o);scrollbar-width:none}
  .sit::-webkit-scrollbar{display:none}
  .sit button{white-space:nowrap;border-bottom:0;border-right:1px solid var(--linea-o);
    padding:16px 20px;font-size:14.5px}
  .panel{min-height:0}
}

/* ── 4 · SERVICIOS ───────────────────────────────────────────────── */
.serv26{background:var(--hueso);color:var(--tinta);padding:clamp(90px,11vw,168px) 0}
.serv26__cab{display:grid;grid-template-columns:6fr 6fr;gap:60px;align-items:end;
  margin-bottom:64px}
.serv26 h2{margin:0;max-width:15ch;font-weight:800;letter-spacing:-.028em;line-height:1.04;
  font-size:clamp(2.2rem,5vw,4.4rem)}
.serv26__cab p{margin:0;font-size:18px;line-height:1.65;color:var(--gris-1);max-width:46ch}
.fila{display:grid;border-top:1px solid var(--linea-c)}
.sv{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center;
  padding:36px 6px;border-bottom:1px solid var(--linea-c);text-decoration:none;color:inherit;
  transition:padding-left .5s var(--e),background .5s var(--e)}
.sv:hover,.sv:focus-visible{padding-left:24px;background:#fff}
.sv:focus-visible{outline:2px solid var(--nar-t);outline-offset:-2px}
.sv__t{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap}
.sv__t h3{margin:0;font-size:clamp(1.5rem,2.8vw,2.4rem);font-weight:800;letter-spacing:-.024em}
.sv__t p{margin:0;font-size:16.5px;color:var(--gris-1);max-width:44ch;line-height:1.55}
.sv__f{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;flex:none;
  box-shadow:inset 0 0 0 1px var(--linea-c);color:var(--tinta);font-size:17px;
  transition:background .45s var(--e),color .45s var(--e),transform .45s var(--e)}
.sv:hover .sv__f{background:var(--nar);color:var(--tinta);transform:translateX(5px);box-shadow:none}
@media(max-width:760px){
  .sv{grid-template-columns:1fr;gap:10px;padding:26px 2px}
  .sv__f{display:none}
  .sv__t{gap:8px}
}

/* ── 5 · FAENA ───────────────────────────────────────────────────
   La única fotografía que queda, porque es la única que dice algo
   verdadero: el norte, la faena, el cliente que existe.              */
.faena26{position:relative;background:var(--negro);color:#fff;overflow:hidden;
  isolation:isolate;padding:clamp(100px,12vw,186px) 0}
.faena26__media{position:absolute;inset:0;z-index:var(--z-fondo)}
.faena26__media img{width:100%;height:100%;object-fit:cover;object-position:62% center;
  filter:contrast(1.08) saturate(1.05) brightness(1.06)}
.faena26__velo{position:absolute;inset:0;z-index:var(--z-velo);
  background:
    linear-gradient(96deg,rgba(5,9,15,.94) 0%,rgba(5,9,15,.82) 30%,
                    rgba(5,9,15,.34) 62%,rgba(5,9,15,.12) 100%),
    linear-gradient(rgba(5,9,15,.5),transparent 26%,transparent 74%,rgba(5,9,15,.6))}
.faena26 h2{margin:0;max-width:19ch;font-weight:800;letter-spacing:-.028em;line-height:1.04;
  font-size:clamp(2.2rem,5.4vw,4.8rem)}
.faena26 h2 em{font-style:normal;color:var(--nar)}
.faena26 p.b{max-width:50ch;margin:28px 0 0;font-size:18px;line-height:1.66;color:#C6D1DC}
.docs{display:flex;flex-wrap:wrap;gap:10px;margin:36px 0 40px;max-width:660px}
.docs span{padding:10px 18px;border-radius:999px;font-family:var(--display);
  font-size:13.5px;font-weight:600;color:#E2E9F0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.docs span.on{background:var(--nar);color:var(--tinta);box-shadow:none;font-weight:700}
html.anim .docs span{opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--e),transform .5s var(--e)}
html.anim .docs.on span{opacity:1;transform:none}
html.anim .docs.on span:nth-child(1){transition-delay:.00s}
html.anim .docs.on span:nth-child(2){transition-delay:.05s}
html.anim .docs.on span:nth-child(3){transition-delay:.10s}
html.anim .docs.on span:nth-child(4){transition-delay:.15s}
html.anim .docs.on span:nth-child(5){transition-delay:.20s}
html.anim .docs.on span:nth-child(6){transition-delay:.25s}
html.anim .docs.on span:nth-child(7){transition-delay:.30s}

/* ── 6 · CIERRE ──────────────────────────────────────────────────
   Aquí murió la grilla de métricas. En su lugar van los tres datos
   que sí se pueden comprobar: dónde estamos, cuándo, y qué cuesta
   la primera conversación.                                           */
.cierre26{background:var(--tinta);color:#fff;padding:clamp(90px,11vw,160px) 0}
.cierre26__g{display:grid;grid-template-columns:7fr 5fr;gap:clamp(48px,6vw,90px);
  align-items:start}
.cierre26 h2{margin:0;max-width:17ch;font-weight:800;letter-spacing:-.028em;line-height:1.05;
  font-size:clamp(2.1rem,5vw,4.3rem)}
.cierre26 h2 em{font-style:normal;color:var(--nar)}
.cierre26 .sub{max-width:50ch;margin:26px 0 38px;font-size:18px;line-height:1.65;color:#C6D1DC}
.datos{display:grid;gap:0;border-top:1px solid var(--linea-o)}
.dato{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--linea-o)}
.dato dt{font-family:var(--display);font-size:12.5px;font-weight:700;color:var(--nar);
  min-width:88px}
.dato dd{margin:0;font-size:16.5px;line-height:1.55;color:#D3DDE7}
.dato dd a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.dato dd a:hover{border-bottom-color:var(--nar)}
.dato dd span{display:block;font-size:14.5px;color:var(--gris-2);margin-top:3px}

/* ── Responsive general ──────────────────────────────────────────── */
@media(max-width:900px){
  .serv26__cab,.cierre26__g{grid-template-columns:1fr;gap:28px;align-items:start}
  .cierre26__g{gap:44px}
  .socios{grid-template-columns:1fr}
  .socio26{padding:28px 26px 32px}
  .hero26__g{grid-template-columns:1fr;gap:44px}
  .hero26 .rejilla{padding:132px 0 84px}
  .hero26 .acciones .b26{width:100%;justify-content:center}
}
@media(max-width:520px){
  .socio26{grid-template-columns:1fr;gap:16px}
  .mono{width:54px;height:54px;font-size:18px}
  .dato{grid-template-columns:1fr;gap:4px}
}