/* Página de la empresa (vortexlabsia.com). Dirección «Galería», aprobada por Nicolás el 23/09
   (docs/maquetas/empresa-2026-09-23/4-galeria.html).
   ⚠️ Lo tenue va con COLOR, no con `opacity`: un hijo no puede salir de la opacidad del padre
   (gotcha `opacity-en-el-padre-no-se-puede-deshacer-en-el-hijo`). */
:root{
  --papel:#f4f0e8;--papel-2:#ebe5d9;--piedra:#e2dacb;--tarjeta:#e6dfd1;
  --tinta:#1b1a17;--tinta-2:#4f4a42;--tinta-3:#6d665b;--linea:#d9d2c4;
  --noche:#1b1a17;--claro:#f4f0e8;--claro-2:#cfc8bb;--claro-3:#a39c8f;
  --acento:#7a2a22;--acento-noche:#c79a7e;
  --titulo:'Cormorant Garamond',Georgia,serif;--texto:Inter,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--texto);color:var(--tinta);background:var(--papel);font-weight:300;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.fin :focus-visible,.hero :focus-visible,footer :focus-visible{outline-color:var(--acento-noche)}
img{max-width:100%}

/* Cabecera */
.nav{display:flex;align-items:center;gap:28px;padding:22px 48px;position:sticky;top:0;background:var(--papel);z-index:5;border-bottom:1px solid var(--linea)}
.marca{font-family:var(--titulo);font-size:24px;font-weight:300;text-decoration:none;margin-right:auto}
.nav nav a,.idiomas a{font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;font-weight:400}
.nav nav{display:flex;gap:28px}
.idiomas{display:flex;gap:12px;padding-left:24px;border-left:1px solid var(--linea)}
.idiomas a{color:var(--tinta-3)}.idiomas a[aria-current]{color:var(--tinta)}
.nav a:hover{color:var(--acento)}

/* Hero */
.hero{background:var(--noche);color:var(--claro);padding:120px 48px 0;overflow:hidden}
.eti{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;color:var(--claro-3);margin:0 0 28px}
h1{font-family:var(--titulo);font-size:clamp(56px,9vw,150px);font-weight:300;line-height:.92;letter-spacing:-.01em;margin:0 0 36px}
h1 em{color:var(--acento-noche);font-style:italic}
.bajada{font-size:19px;line-height:1.6;max-width:28em;margin:0 0 72px;color:var(--claro-2)}
.collage{display:flex;gap:28px;transform:rotate(-3deg);margin:0 -80px -30px;padding-bottom:60px}
.collage img{height:240px;width:auto;border-radius:4px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45)}

/* Bloques */
.bloque{padding:130px 48px;scroll-margin-top:70px}
.bloque h2{font-family:var(--titulo);font-size:clamp(52px,8vw,128px);font-weight:300;letter-spacing:-.01em;line-height:.9;margin:0 0 64px;display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.bloque h2 small{font-family:var(--texto);font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;color:var(--tinta-3)}
.s0{background:var(--papel)}.s1{background:var(--papel-2)}.s2{background:var(--papel)}.s3{background:var(--piedra)}
.ir{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--acento);font-weight:500;white-space:nowrap}

/* Plataformas: Taskia es el argumento, Memora el apoyo */
.tk,.mem{display:grid;grid-template-columns:auto 1fr auto;align-items:center;text-decoration:none;border-radius:4px;transition:border-color .15s,background .15s}
.tk{gap:36px;background:var(--tarjeta);padding:48px;margin-bottom:28px}
.tk img{width:96px;height:96px;border-radius:22px}
.tk h3,.mem h3{font-family:var(--titulo);font-weight:300;letter-spacing:-.01em;margin:0;line-height:1}
.tk h3{font-size:64px}
.tk p{font-size:17px;margin:12px 0 0;color:var(--tinta-2);max-width:34em;line-height:1.55}
.mem{gap:28px;padding:32px 48px;border:1px solid var(--linea)}
.mem img{width:64px;height:64px;border-radius:16px;background:#2a2420;padding:6px}
.mem h3{font-size:40px}
.mem p{font-size:16px;margin:8px 0 0;color:var(--tinta-2);line-height:1.5}
.tk:hover{background:#ded6c6}.mem:hover{border-color:var(--tinta-3)}

/* Webs */
.grid{display:grid;grid-template-columns:2fr 1fr;gap:28px 22px}
.grid figure{margin:0}
.grid img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;display:block;border-radius:3px;box-shadow:0 12px 30px -18px rgba(0,0,0,.4)}
.grid figcaption{font-size:14px;margin-top:10px;font-weight:400}
.grid .g{grid-row:span 3}.grid .g img{aspect-ratio:auto;height:calc(100% - 30px)}

/* Aplicaciones */
.apps{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--linea)}
.apps>a{display:flex;gap:18px;align-items:flex-start;padding:28px 28px 28px 0;border-bottom:1px solid var(--linea);text-decoration:none}
.apps img{width:48px;height:48px;border-radius:12px;flex:none}
.apps b{font-size:20px;font-weight:500;display:block;margin-bottom:6px}
.apps span{font-size:15px;line-height:1.5;color:var(--tinta-2)}
.apps .tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acento);margin-left:10px;font-weight:500}
.apps>a:hover b{color:var(--acento)}
.apps img.contener{object-fit:contain;background:#fff}
.int-t{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;color:var(--tinta-3);margin:64px 0 20px}
.internos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.internos figure{margin:0}
.internos img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:left top;display:block;border-radius:3px;border:1px solid var(--linea)}
.internos figcaption{font-size:14px;margin-top:10px;color:var(--tinta-2)}

/* Equipos */
.hw{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:start}
.hw img{width:100%;height:auto;display:block;border-radius:3px}
.hw h3{font-family:var(--titulo);font-weight:300;font-size:40px;letter-spacing:-.01em;line-height:1.05;margin:0 0 22px}
.hw p{font-size:17px;line-height:1.65;margin:0 0 22px;color:var(--tinta-2)}
.hw .otro{border-top:1px solid #c9c0b0;padding-top:22px}

/* Contacto */
.fin{background:var(--noche);color:var(--claro);padding:150px 48px;scroll-margin-top:70px}
.fin-g{display:grid;grid-template-columns:1fr 1fr;gap:80px;max-width:1100px;margin:0 auto;align-items:start}
.fin h2{font-family:var(--titulo);font-weight:300;font-size:clamp(44px,6vw,96px);letter-spacing:-.01em;line-height:1;margin:0 0 28px}
.fin-p{font-size:17px;line-height:1.6;color:var(--claro-2);margin:0 0 14px}
form{display:flex;flex-direction:column;gap:22px}
form label{display:flex;flex-direction:column;gap:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:400;color:var(--claro-2)}
form input,form textarea{font:inherit;font-size:17px;letter-spacing:0;text-transform:none;color:var(--claro);background:transparent;border:0;border-bottom:1px solid #6b665d;border-radius:0;padding:10px 0;resize:vertical}
form input:focus,form textarea:focus{outline:none;border-bottom-color:var(--acento-noche)}
form textarea::placeholder{color:#8a847a}
form button{align-self:flex-start;font:inherit;font-size:14px;letter-spacing:.16em;text-transform:uppercase;background:var(--claro);color:var(--noche);border:0;padding:18px 34px;cursor:pointer;min-height:48px}
form button:hover{background:#fff}
form button:disabled{background:#8a847a;cursor:wait}
.aviso{font-size:13px;color:var(--claro-3);margin:0}
.estado{font-size:16px;line-height:1.5;margin:0;color:var(--claro)}
.estado:empty{display:none}
.estado.mal{color:#e8a598}

/* Pie */
footer{padding:26px 48px;font-size:12px;letter-spacing:.08em;display:flex;flex-wrap:wrap;gap:8px 30px;background:var(--noche);color:var(--claro-3);border-top:1px solid #34322d}
footer a:hover{color:var(--claro)}

/* Legales propias (24/09) */
.legal{max-width:720px;margin:0 auto;padding:90px 24px 120px;font-size:17px;line-height:1.7;color:var(--tinta-2)}
.legal h1{font-size:clamp(44px,7vw,84px);line-height:1;color:var(--tinta);margin:0 0 14px}
.legal .fecha{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:400;color:var(--tinta-3);margin:0 0 48px}
.legal h2{font-family:var(--titulo);font-size:30px;font-weight:500;color:var(--tinta);margin:44px 0 10px}
.legal b{font-weight:500;color:var(--tinta)}
.legal a{color:var(--acento)}
.legal table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;margin:18px 0}
.legal th,.legal td{text-align:left;vertical-align:top;padding:10px 8px;border-bottom:1px solid var(--linea)}
.legal th{font-weight:500;color:var(--tinta);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:600px){.legal{padding:56px 16px 80px}.legal table{font-size:14px}.legal th,.legal td{padding:8px 4px}}

@media(max-width:900px){.nav nav{display:none}.idiomas{border-left:0;padding-left:0}}
@media(max-width:760px){
  .nav{padding:16px}
  .hero,.bloque,.fin,footer{padding-left:16px;padding-right:16px}
  .hero{padding-top:72px}.bajada{margin-bottom:48px}
  .bloque{padding-top:88px;padding-bottom:88px}
  .bloque h2{flex-direction:column;gap:10px;margin-bottom:40px}
  .grid{grid-template-columns:1fr 1fr;gap:18px 12px}
  .grid .g{grid-column:span 2;grid-row:auto}.grid .g img{aspect-ratio:16/10;height:auto}
  .internos{grid-template-columns:1fr;gap:18px}
  .hw,.apps,.fin-g{grid-template-columns:1fr}.fin-g{gap:40px}.hw{gap:28px}
  .tk,.mem{grid-template-columns:1fr;gap:18px;padding:24px}.tk h3{font-size:44px}
  .collage{margin:0 -40px -30px}.collage img{height:150px}
  .fin{padding-top:96px;padding-bottom:96px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}