/* Fragmenta.cl — Propuesta B: "Unimos los fragmentos"
   Lenguaje visual: los cortes oblicuos del isotipo (≈14°) se repiten en botones, tarjetas, fotos y pasos.
   Mismos colores, tipografías (Montserrat + Poppins), textos y logos del sitio actual. */

@font-face { font-family: "Montserrat"; font-weight: 400 800; font-style: normal; font-display: swap;
  src: url("assets/fonts/montserrat-var.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("assets/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("assets/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("assets/fonts/poppins-600.woff2") format("woff2"); }

:root {
  --noche: #13141e;
  --noche-2: #1b1d2b;
  --amarillo: #ffc107;
  --marino: #1d2d4f;
  --gris: #f7f7f7;
  --blanco: #ffffff;
  --texto-suave: rgba(255, 255, 255, .76);
  --mont: "Montserrat", Helvetica, Arial, sans-serif;
  --pop: "Poppins", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --corte: 14px;
  --margen: clamp(20px, 5vw, 72px);
  --max: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; font-family: var(--pop); font-size: 16px; line-height: 1.6; color: var(--noche); background: var(--noche); }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.centro { width: min(100% - 2 * var(--margen), var(--max)); margin-inline: auto; }

/* ---------- Botones con corte oblicuo ---------- */
.btn { --c: var(--corte); display: inline-flex; align-items: center; gap: .65rem; padding: 1rem 2.1rem;
  font: 700 .875rem/1 var(--mont); letter-spacing: .08em; text-transform: uppercase;
  background: var(--amarillo); color: var(--noche); cursor: pointer;
  clip-path: polygon(var(--c) 0, 100% 0, calc(100% - var(--c)) 100%, 0 100%);
  transition: background .25s, color .25s, transform .25s var(--ease); }
.btn:hover { background-color: #ffffff; color: #13141e; transform: translateX(3px); }
.btn:focus-visible { background-color: #ffffff; color: #13141e; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn-sm { padding: .8rem 1.6rem; font-size: .75rem; --c: 10px; }
.btn-linea { background: transparent; color: var(--blanco); box-shadow: inset 0 0 0 2px var(--amarillo); clip-path: none; }
.btn-linea:hover, .btn-linea:focus-visible { background-color: #ffc107; color: #13141e; }
.btn-oscuro { background: var(--noche); color: var(--blanco); }
.btn-oscuro:hover, .btn-oscuro:focus-visible { background-color: #ffffff; color: #13141e; }

:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 4px; }
.sobre-amarillo :focus-visible { outline-color: var(--noche); }

/* ---------- Cabecera ---------- */
.centinela { position: absolute; top: 0; left: 0; width: 1px; height: 80px; pointer-events: none; }
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .3s, box-shadow .3s; }
.top.es-fijo { background: rgba(19, 20, 30, .96); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
@supports (backdrop-filter: blur(8px)) { .top.es-fijo { background: rgba(19, 20, 30, .94); backdrop-filter: blur(12px); } }
.top-in { width: min(100% - 2 * var(--margen), var(--max)); margin-inline: auto; height: 72px; display: flex; align-items: center; gap: 2rem; }
.marca { display: inline-flex; align-items: center; gap: .7rem; color: var(--amarillo); }
.marca svg { width: 34px; height: 32px; }
.marca span { font: 800 1.05rem/1 var(--mont); letter-spacing: .14em; color: var(--blanco); }
.top-nav { margin-left: auto; display: flex; gap: 2rem; }
.top-nav a { position: relative; font: 600 .9rem/1 var(--mont); letter-spacing: .02em; color: var(--blanco); padding: .5rem 0; }
.top-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--amarillo);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.top-nav a:hover::after, .top-nav a[aria-current="true"]::after { transform: scaleX(1); }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; min-height: 100svh; min-height: max(100svh, 700px); display: flex; align-items: center; overflow: hidden;
  background: var(--noche) url("assets/img/hero-poster.jpg") center / cover; color: var(--blanco); padding: 120px 0 80px; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; opacity: .5; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(95deg, rgba(19, 20, 30, .97) 0%, rgba(19, 20, 30, .86) 42%, rgba(19, 20, 30, .5) 100%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 3rem; }
.sello { display: inline-flex; align-items: center; gap: .8rem; font: 700 .8rem/1 var(--mont); letter-spacing: .22em; text-transform: uppercase; color: var(--amarillo); margin-bottom: 1.6rem; }
.sello::before { content: ""; width: 38px; height: 12px; background: var(--amarillo); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.hero h1 { font: 800 clamp(2.7rem, 1.2rem + 5.6vw, 6rem)/1.02 var(--mont); letter-spacing: -.02em; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--amarillo); }
.hero p { margin-top: 1.8rem; max-width: 58ch; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); line-height: 1.7; color: var(--texto-suave); }
.hero .acciones { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem 1.2rem; align-items: center; }

.iso-wrap { color: var(--amarillo); transform: translate3d(calc(var(--mx, 0) * 16px), calc(var(--my, 0) * 12px), 0); transition: transform .5s var(--ease); }
.iso-wrap svg { width: 100%; height: auto; max-height: 68vh; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45)); }
.shard { fill: currentColor; transform-box: fill-box; transform-origin: center; }
.shard.claro { fill: var(--blanco); }
.s1 { --i: 0; --dx: -140px; --dy: 40px; --r: -14deg; }
.s2 { --i: 1; --dx: 180px; --dy: -120px; --r: 12deg; }
.s3 { --i: 2; --dx: -90px; --dy: 170px; --r: 10deg; }
.s4 { --i: 3; --dx: 230px; --dy: 90px; --r: -16deg; }
.s5 { --i: 4; --dx: -40px; --dy: 220px; --r: 18deg; }
.js .shard { animation: ensamble 1.3s var(--ease) both; animation-delay: calc(var(--i) * 120ms + 250ms); }
@keyframes ensamble { from { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } to { opacity: 1; transform: none; } }

.frag { position: absolute; z-index: -1; background: rgba(255, 193, 7, .09); clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); }
.frag.f1 { width: 300px; height: 120px; left: 38%; top: 14%; animation: flota 14s ease-in-out infinite alternate; }
.frag.f2 { width: 180px; height: 260px; right: 4%; bottom: 8%; animation: flota 17s ease-in-out -4s infinite alternate-reverse; }
.frag.f3 { width: 420px; height: 90px; left: -4%; bottom: 14%; background: rgba(255, 255, 255, .04); animation: flota 20s ease-in-out -8s infinite alternate; }
@keyframes flota { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(24px, -22px, 0); } }

.bajar { position: absolute; left: var(--margen); bottom: 28px; font: 600 .75rem/1 var(--mont); letter-spacing: .2em; text-transform: uppercase; color: var(--texto-suave);
  display: inline-flex; align-items: center; gap: .8rem; }
.bajar::after { content: ""; width: 1px; height: 38px; background: var(--amarillo); transform-origin: top; animation: baja 2s var(--ease) infinite; }
@keyframes baja { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- Estrategia: la escalera ---------- */
.estrategia { background: var(--gris); color: var(--noche); padding: clamp(72px, 10vw, 140px) 0 clamp(72px, 9vw, 120px); }
.etiqueta { display: inline-flex; align-items: center; gap: .7rem; font: 700 .8rem/1 var(--mont); letter-spacing: .22em; text-transform: uppercase; }
.etiqueta::before { content: ""; width: 38px; height: 12px; background: currentColor; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.titulo { margin-top: 1.1rem; font: 800 clamp(2rem, 1rem + 3.6vw, 3.8rem)/1.08 var(--mont); letter-spacing: -.015em; max-width: 20ch; text-wrap: balance; }
.escalera { margin-top: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: end; }
.peldano { position: relative; background: var(--blanco); padding: 3.2rem 1.4rem 1.8rem; min-height: 330px;
  clip-path: polygon(0 28px, 100% 0, 100% 100%, 0 100%); box-shadow: inset 0 0 0 1px rgba(19, 20, 30, .06); }
.peldano::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; background: var(--amarillo); clip-path: polygon(0 28px, 100% 0, 100% 5px, 0 33px); }
.peldano:nth-child(1) { margin-bottom: 0; }
.peldano:nth-child(2) { margin-bottom: 44px; }
.peldano:nth-child(3) { margin-bottom: 88px; }
.peldano:nth-child(4) { margin-bottom: 132px; }
.peldano:nth-child(5) { margin-bottom: 176px; background: var(--noche); color: var(--blanco); }
.peldano:nth-child(5) p { color: var(--texto-suave); }
.peldano .num { position: absolute; top: 2.2rem; right: 1.1rem; font: 800 2.2rem/1 var(--mont); color: transparent; -webkit-text-stroke: 1.5px rgba(19, 20, 30, .28); }
.peldano:nth-child(5) .num { -webkit-text-stroke-color: rgba(255, 255, 255, .5); }
.peldano img { width: 88px; height: 88px; margin-bottom: 1.4rem; }
.peldano h3 { font: 800 1.02rem/1.2 var(--mont); letter-spacing: .08em; }
.peldano p { margin-top: .6rem; font-size: .95rem; line-height: 1.55; color: #3a3c4a; }

/* ---------- Soluciones: tarjetas que se apilan ---------- */
.soluciones { background: var(--noche); color: var(--blanco); padding: clamp(72px, 10vw, 140px) 0 clamp(72px, 9vw, 120px); }
.soluciones .titulo { color: var(--blanco); }
.soluciones .etiqueta { color: var(--amarillo); }
.pila { margin-top: clamp(36px, 5vw, 64px); }
.svc { position: sticky; top: calc(92px + var(--k) * 16px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 600px; margin-bottom: 36px; overflow: hidden; box-shadow: 0 -24px 60px rgba(0, 0, 0, .35);
  clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%); }
.svc-1 { --k: 0; background: var(--noche-2); }
.svc-2 { --k: 1; background: var(--amarillo); color: var(--noche); }
.svc-3 { --k: 2; background: var(--marino); }
.svc-texto { position: relative; padding: clamp(32px, 4.5vw, 64px) clamp(24px, 4vw, 56px) clamp(32px, 4vw, 56px); display: flex; flex-direction: column; align-items: flex-start; }
.svc-n { font: 800 clamp(4.5rem, 3rem + 5vw, 8rem)/.85 var(--mont); color: transparent; -webkit-text-stroke: 2px var(--amarillo); letter-spacing: -.03em; }
.svc-2 .svc-n { -webkit-text-stroke-color: var(--noche); }
.svc h3 { margin-top: 1.2rem; font: 800 clamp(1.7rem, 1.1rem + 1.8vw, 2.7rem)/1.1 var(--mont); letter-spacing: -.01em; }
.svc-intro { margin-top: 1rem; font-size: 1.1rem; line-height: 1.6; max-width: 44ch; color: var(--texto-suave); }
.svc-2 .svc-intro { color: rgba(19, 20, 30, .84); }
.svc-lista { margin: 1.6rem 0 2rem; width: 100%; max-width: 46ch; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.svc-lista.dos { max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.6rem; }
.svc-lista li { position: relative; padding: .55rem 0 .55rem 1.7rem; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 1rem; }
.svc-lista li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 14px; height: 8px; background: var(--amarillo); clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.svc-2 .svc-lista, .svc-2 .svc-lista li { border-color: rgba(19, 20, 30, .22); }
.svc-2 .svc-lista li::before { background: var(--noche); }
.svc-foto { position: relative; min-height: 320px; }
.svc-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
.svc-1 .svc-foto img { object-position: 50% 0; }
.svc-3 .svc-foto img { object-position: 50% 0; }

/* ---------- Nosotros ---------- */
.nosotros { position: relative; overflow: hidden; background: var(--amarillo); color: var(--noche); padding: clamp(72px, 10vw, 140px) 0; }
.marca-agua { position: absolute; right: -9%; bottom: -26%; width: min(46vw, 620px); color: var(--marino); opacity: .07; pointer-events: none; }
.nosotros-grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.cifra { margin-top: 1.4rem; font: 800 clamp(6.5rem, 3rem + 13vw, 15rem)/.8 var(--mont); letter-spacing: -.05em; color: var(--marino); }
.cifra small { font-size: .45em; letter-spacing: 0; vertical-align: top; }
.cifra-pie { margin-top: 1.2rem; font: 700 1.1rem/1.4 var(--mont); max-width: 18ch; }
.nosotros .lead { font: 500 clamp(1.15rem, 1rem + .7vw, 1.6rem)/1.55 var(--mont); }
.nosotros .lead strong { font-weight: 800; background: linear-gradient(transparent 62%, rgba(255, 255, 255, .55) 62%); }
.nosotros .cuerpo { margin-top: 1.6rem; display: grid; gap: 1.1rem; font-size: 1.05rem; line-height: 1.75; max-width: 62ch; }
.marcas { margin-top: 2.4rem; }
.marcas h3 { font: 700 .75rem/1 var(--mont); letter-spacing: .22em; text-transform: uppercase; margin-bottom: .9rem; }
.marcas ul { display: flex; flex-wrap: wrap; gap: .6rem; }
.marcas li { padding: .65rem 1.5rem; background: var(--noche); color: var(--blanco); font: 700 .9rem/1 var(--mont); letter-spacing: .04em;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.fundador { margin-top: 1.8rem; font: 600 .95rem/1.5 var(--pop); }

/* ---------- Contacto ---------- */
.contacto { background: var(--noche); color: var(--blanco); padding: clamp(72px, 10vw, 140px) 0 clamp(56px, 7vw, 96px); position: relative; overflow: hidden; }
.contacto .etiqueta { color: var(--amarillo); }
.contacto h2 { margin-top: 1.2rem; font: 800 clamp(3.4rem, 1rem + 12vw, 11rem)/.92 var(--mont); letter-spacing: -.04em; }
.contacto h2 span { color: var(--amarillo); }
.contacto .bajada { margin-top: 1.4rem; max-width: 46ch; font-size: 1.15rem; color: var(--texto-suave); }
.vias { margin-top: clamp(36px, 5vw, 64px); border-top: 1px solid rgba(255, 255, 255, .18); }
.via { position: relative; display: grid; grid-template-columns: 9rem 1fr auto; align-items: center; gap: 1.5rem; padding: 1.7rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .18); transition: background-color .3s, color .3s; }
.via:hover, .via:focus-visible { color: #13141e; background-color: #ffc107; }
.via small { font: 700 .75rem/1 var(--mont); letter-spacing: .22em; text-transform: uppercase; color: var(--amarillo); transition: color .3s; }
.via:hover small, .via:focus-visible small { color: var(--noche); }
.via strong { font: 800 clamp(1.4rem, .8rem + 2.6vw, 3rem)/1.1 var(--mont); letter-spacing: -.01em; overflow-wrap: anywhere; }
.via svg { width: 36px; height: 36px; transition: transform .4s var(--ease); }
.via:hover svg { transform: translate(6px, -6px); }

/* ---------- Pie ---------- */
.pie { background: var(--noche); color: var(--blanco); border-top: 1px solid rgba(255, 255, 255, .12); padding: 56px 0 32px; }
.pie-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }
.pie img { width: 150px; height: auto; }
.pie nav { display: flex; flex-wrap: wrap; gap: .6rem 2rem; }
.pie nav a { font: 600 .95rem/1 var(--mont); }
.pie nav a:hover, .pie nav a:focus-visible { color: var(--amarillo); }
.pie .copy { margin-top: 2.4rem; font-size: .82rem; color: rgba(255, 255, 255, .6); }

/* ---------- Aparición al hacer scroll ---------- */
.js .rev { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .rev.visto { opacity: 1; transform: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .top-nav { gap: 1.3rem; }
  .escalera { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .peldano:nth-child(n) { margin-bottom: 0; }
  .peldano:nth-child(4) { grid-column: 1 / span 1; }
}
@media (max-width: 900px) {
  .top-in { height: auto; flex-wrap: wrap; gap: .4rem 1rem; padding: 12px 0 10px; }
  .top-nav { order: 3; width: 100%; margin: 0; gap: 1.2rem; overflow-x: auto; padding-bottom: 4px; }
  .top-in > .btn { margin-left: auto; }
  .hero { padding-top: 150px; align-items: flex-start; }
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .iso-wrap { order: -1; width: 46%; max-width: 220px; }
  .iso-wrap svg { max-height: 200px; }
  .bajar { display: none; }
  .svc { position: relative; top: 0; grid-template-columns: 1fr; min-height: 0; clip-path: none; margin-bottom: 20px; }
  .svc-foto { min-height: 260px; order: -1; }
  .svc-lista.dos { grid-template-columns: 1fr; }
  .svc-foto img { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 22px)); }
  .nosotros-grid { grid-template-columns: 1fr; }
  .via { grid-template-columns: 1fr auto; row-gap: .5rem; }
  .via small { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .escalera { grid-template-columns: 1fr; gap: 10px; }
  .peldano { min-height: 0; padding-bottom: 1.6rem; display: grid; grid-template-columns: 88px 1fr; column-gap: 1.2rem; align-items: center; }
  .peldano img { grid-row: 1 / span 2; margin: 0; width: 76px; height: 76px; }
  .peldano p { margin-top: .3rem; }
  .peldano .num { font-size: 1.8rem; }
  .hero .acciones .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero video { display: none; }
  .js .shard, .frag, .bajar::after { animation: none !important; }
  .js .rev { opacity: 1; transform: none; transition: none; }
  .iso-wrap { transform: none !important; transition: none; }
  .btn, .top-nav a::after, .via { transition: none; }
  .svc { position: relative; top: 0; }
}