/* Lonso Lab — hoja de estilos del sitio.
   Mundo visual: cartografía de las sierras de Córdoba. Papel de mapa, tinta azul noche,
   cobalto para las superficies de marca y naranja "pin" reservado para tu negocio y la acción. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --papel: #f3f4ef;
  --papel-2: #e8eae2;
  --blanco: #ffffff;
  --tinta: #13182b;
  --tinta-2: #4a5168;
  --linea: #d3d7df;
  --cobalto: #2340d8;
  --cobalto-hondo: #182c9e;
  --cobalto-claro: #c9d2ff;
  --pin: #ff5a26;
  --pin-hondo: #e8461a;

  --gutter: clamp(16px, 4vw, 40px);
  --ancho: 1240px;
  --radio: 18px;
  --radio-chico: 10px;
  --header: 72px;

  --sombra-panel: 0 1px 2px rgb(19 24 43 / 0.06), 0 24px 48px -24px rgb(19 24 43 / 0.32);
  --sombra-flotante: 0 2px 6px rgb(19 24 43 / 0.08), 0 18px 36px -18px rgb(19 24 43 / 0.4);
  --salida: cubic-bezier(0.16, 1, 0.3, 1);
  --rebote: cubic-bezier(0.34, 1.4, 0.5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header) + 16px);
  scrollbar-color: var(--tinta-2) var(--papel);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  font-stretch: 100%;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--cobalto);
}
body.menu-abierto { overflow: hidden; }

::selection { background: var(--cobalto); color: var(--blanco); }

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--pin); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 780;
  font-stretch: 108%;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
}
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
h3 { font-size: clamp(1.3rem, 1.8vw, 1.55rem); letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0; text-wrap: pretty; }
strong { font-weight: 680; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.wrap { width: min(var(--ancho), 100% - 2 * var(--gutter)); margin-inline: auto; }
.franja { padding-block: clamp(80px, 11vw, 150px); position: relative; }
.lead { font-size: clamp(1.125rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--tinta-2); max-width: 36ch; }
.chico { font-size: 0.875rem; color: var(--tinta-2); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.icono { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Saltar al contenido ---------- */
.saltar {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--tinta); color: var(--blanco); padding: 10px 16px; border-radius: 8px;
  text-decoration: none; font-weight: 600;
}
.saltar:focus { top: 12px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 52px; padding: 0 1.5em;
  border: 0; border-radius: 999px;
  font: inherit; font-weight: 680; font-stretch: 104%; font-size: 1rem; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.25s var(--salida), transform 0.25s var(--salida);
}
.boton:hover { text-decoration: none; transform: translateY(-2px); }
.boton:active { transform: translateY(0); transition-duration: 0.05s; }
.boton-pin { background: var(--pin); color: var(--tinta); box-shadow: 0 10px 20px -12px rgb(19 24 43 / 0.45); }
.boton-pin:hover { background: #ff7a4d; color: var(--tinta); box-shadow: 0 16px 26px -14px rgb(19 24 43 / 0.5); }
.boton-tinta { background: var(--tinta); color: var(--papel); }
.boton-tinta:hover { background: var(--cobalto); }
.boton-borde { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.boton-borde:hover { background: var(--tinta); color: var(--papel); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.sobre-cobalto .boton-borde:hover { background: var(--papel); color: var(--cobalto); box-shadow: inset 0 0 0 1.5px var(--papel); }
.boton-chico { min-height: 42px; padding: 0 1.15em; font-size: 0.95rem; }
.boton .icono { width: 1.2em; height: 1.2em; }

.enlace {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: 620; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.enlace:hover { text-decoration-color: currentColor; }

/* ---------- Encabezado ---------- */
.encabezado {
  position: sticky; top: 0; z-index: 50;
  height: var(--header);
  transition: background-color 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}
.encabezado.con-scroll {
  background: color-mix(in srgb, var(--papel) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--linea);
}
.encabezado .wrap { height: 100%; display: flex; align-items: center; gap: 32px; }
.marca { display: inline-flex; color: var(--tinta); text-decoration: none; flex: none; }
.logo-lockup { height: 30px; width: auto; }
.nav-principal { display: flex; gap: clamp(18px, 1.8vw, 28px); margin-left: auto; }
.nav-principal a {
  font-size: 0.97rem; font-weight: 560; text-decoration: none; color: var(--tinta-2); white-space: nowrap;
  padding-block: 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: color 0.2s, background-size 0.3s var(--salida);
}
.nav-principal a:hover, .nav-principal a[aria-current="page"] { color: var(--tinta); background-size: 100% 2px; }
.encabezado .boton { margin-left: 4px; }
.menu-boton {
  display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 999px;
  border: 0; background: var(--tinta); color: var(--papel); cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-boton span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s var(--salida); }
.menu-boton span + span { margin-top: 5px; }
.menu-boton[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu-boton > div { display: flex; flex-direction: column; }

.menu-movil {
  position: fixed; inset: var(--header) 0 0 0; z-index: 49;
  background: var(--papel); padding: 24px var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
}
.menu-movil[hidden] { display: none; }
.menu-movil a:not(.boton) {
  font-size: 2rem; font-weight: 760; font-stretch: 110%; letter-spacing: -0.03em;
  text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--linea);
}
.menu-movil .boton { margin-top: 24px; align-self: stretch; }

@media (max-width: 1180px) {
  .nav-principal, .encabezado .boton-auditoria { display: none; }
  .menu-boton { display: inline-flex; }
}

/* ---------- Mapa topográfico (material de fondo) ---------- */
.topo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
/* El mapa se define una vez (#mapa) y se reutiliza con <use>; cada uso lo ajusta con variables. */
#mapa path { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; stroke-dasharray: var(--topo-guion, none); animation: var(--topo-anim, none); }
#mapa .topo-minor { stroke-width: 1; opacity: var(--topo-menor, 0.32); }
#mapa .topo-major { stroke-width: 1.5; opacity: var(--topo-mayor, 0.6); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: clip; margin-top: calc(-1 * var(--header)); padding: calc(var(--header) + clamp(20px, 3vw, 40px)) 0 clamp(48px, 6vw, 88px); }
.hero > .topo {
  color: var(--cobalto);
  -webkit-mask-image: linear-gradient(100deg, transparent 8%, #000 52%, #000 100%);
  mask-image: linear-gradient(100deg, transparent 8%, #000 52%, #000 100%);
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 {
  font-size: clamp(2.6rem, 5.2vw, 5rem);
  font-weight: 820;
  font-stretch: 112%;
  line-height: 0.94;
  letter-spacing: -0.04em;
}
.hero h1 .linea { display: block; white-space: nowrap; }
.hero h1 .linea-b { color: var(--cobalto); }
.hero .lead { margin-top: clamp(18px, 2vw, 26px); max-width: 44ch; }
.hero-acciones { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.garantias { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 0.9rem; color: var(--tinta-2); }
.garantias li { display: inline-flex; align-items: center; gap: 8px; }
.garantias .icono { color: var(--cobalto); width: 1.1em; height: 1.1em; stroke-width: 2.2; }

/* Animación de entrada del titular: la tipografía se expande, como algo que despega. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero h1 .linea { animation: estirar 1.3s var(--salida) both; }
  .js .hero h1 .linea:nth-child(2) { animation-delay: 0.08s; }
  .js .hero h1 .linea:nth-child(3) { animation-delay: 0.3s; }
  .js .hero h1 .linea:nth-child(4) { animation-delay: 0.38s; }
  .js .hero .lead, .js .hero-acciones, .js .garantias { animation: aparecer 0.9s var(--salida) both; animation-delay: 0.55s; }
  .js .hero-acciones { animation-delay: 0.65s; }
  .js .garantias { animation-delay: 0.75s; }
  .js .hero > .topo { --topo-guion: 2400; --topo-anim: trazar 3.2s var(--salida) both; }
}
@keyframes estirar {
  from { font-stretch: 68%; opacity: 0; transform: translateY(0.18em); filter: blur(6px); }
  to { font-stretch: 112%; opacity: 1; transform: none; filter: none; }
}
@keyframes aparecer { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes trazar { from { stroke-dashoffset: 2400; } to { stroke-dashoffset: 0; } }

/* ---------- Simulador de búsqueda en Google ---------- */
.demo { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .js .demo { animation: aparecer 1s var(--salida) 0.35s both; }
}
.demo-panel {
  position: relative; background: var(--blanco); border-radius: 24px;
  box-shadow: var(--sombra-panel); padding: 16px; overflow: hidden;
}
.buscador {
  display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 18px;
  background: #eef0f5; border-radius: 999px; color: var(--tinta);
}
.buscador .icono { color: var(--tinta-2); }
.buscador-texto { font-size: 1.02rem; white-space: nowrap; overflow: hidden; }
.cursor { width: 2px; height: 1.25em; background: var(--cobalto); margin-left: -8px; animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

.mini-mapa {
  position: relative; height: 120px; margin-top: 10px; border-radius: 14px; overflow: hidden;
  background: #e6ebf3; color: #9fb0d8;
}
.mini-mapa .topo { --topo-menor: 0.55; --topo-mayor: 0.9; }
.calle { position: absolute; background: var(--blanco); border-radius: 4px; }
.calle-1 { left: -10%; right: -10%; top: 58%; height: 9px; transform: rotate(-8deg); }
.calle-2 { top: -20%; bottom: -20%; left: 38%; width: 8px; transform: rotate(14deg); }
.calle-3 { left: 55%; right: -10%; top: 24%; height: 6px; transform: rotate(18deg); }
.pin {
  position: absolute; width: 26px; height: 26px; margin: -26px 0 0 -13px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--tinta); color: var(--blanco);
  display: grid; place-items: center; box-shadow: 0 4px 10px -4px rgb(19 24 43 / 0.6);
}
.pin span { transform: rotate(45deg); font-size: 0.75rem; font-weight: 750; }
.pin-1 { left: 22%; top: 46%; } .pin-2 { left: 63%; top: 36%; } .pin-3 { left: 79%; top: 74%; }
.pin-tuyo {
  left: 46%; top: 70%; width: 34px; height: 34px; margin: -34px 0 0 -17px; background: var(--pin); color: var(--tinta);
  opacity: 0; transform: translateY(-60px) rotate(-45deg);
  transition: opacity 0.2s, transform 0.7s var(--rebote);
}
.pin-tuyo span { font-size: 0.95rem; }
.pin-tuyo::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--pin);
  opacity: 0; transform: rotate(45deg);
}
.demo[data-estado="con"] .pin-tuyo { opacity: 1; transform: rotate(-45deg); }
.demo[data-estado="con"] .pin-tuyo::after { animation: onda 1.6s var(--salida) 0.5s 2; }
@keyframes onda { from { opacity: 0.9; transform: rotate(45deg) scale(0.6); } to { opacity: 0; transform: rotate(45deg) scale(2.4); } }

.resultados { position: relative; height: calc(4 * 80px + 22px); margin-top: 8px; }
.resultado {
  position: absolute; left: 0; right: 0; top: 0; height: 80px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 14px;
  transform: translateY(calc(var(--pos, 0) * 80px + var(--salto, 0px)));
  transition: transform 0.9s var(--salida), opacity 0.5s, background-color 0.4s, box-shadow 0.4s;
}
.resultado + .resultado::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: #eceef3; }
.resultado.tuyo::before, .resultado.tuyo + .resultado::before { display: none; }
.resultado strong { display: block; line-height: 1.3; font-weight: 680; font-stretch: 100%; font-size: 0.98rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resultado small { display: flex; line-height: 1.4; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--tinta-2); white-space: nowrap; overflow: hidden; }
.estrellas { color: #e7a614; letter-spacing: 1px; font-size: 0.8rem; }
.resultado .acciones { display: flex; gap: 8px; }
.resultado .acciones span {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid #dfe3ea; color: var(--cobalto);
}
.resultado .acciones .icono { width: 16px; height: 16px; }
.resultado[data-orden="2"] { --pos: 1; }
.resultado[data-orden="3"] { --pos: 2; }
.resultado.tuyo { --pos: 3; --salto: 22px; opacity: 0.55; }
.resultado.tuyo strong { color: var(--tinta-2); }
.resultado.tuyo .estado-ficha { color: #b42318; }
.separador {
  position: absolute; left: 12px; right: 12px; top: calc(3 * 80px + 1px);
  font-size: 0.78rem; color: var(--tinta-2); display: flex; align-items: center; gap: 10px;
  transition: opacity 0.4s;
}
.separador::before, .separador::after { content: ""; flex: 1; border-top: 1px dashed #c9ced8; }
.demo[data-estado="con"] .separador { opacity: 0; }
.demo[data-estado="con"] .resultado.tuyo {
  --pos: 0; --salto: 0px; opacity: 1;
  background: #fff4ef; box-shadow: inset 0 0 0 1.5px var(--pin);
}
.demo[data-estado="con"] .resultado.tuyo strong { color: var(--tinta); }
.demo[data-estado="con"] .resultado.tuyo .estado-ficha { color: #1d7a3e; }
.demo[data-estado="con"] .resultado[data-orden="1"] { --pos: 1; }
.demo[data-estado="con"] .resultado[data-orden="2"] { --pos: 2; }
.demo[data-estado="con"] .resultado[data-orden="3"] { --pos: 3; --salto: 22px; opacity: 0.5; }
.demo[data-fase="vacio"] .resultado, .demo[data-fase="vacio"] .separador { opacity: 0; transition-duration: 0.3s; }
.demo[data-fase="vacio"] .resultado { transform: translateY(calc(var(--pos, 0) * 80px + var(--salto, 0px) + 10px)); }

.llamada {
  position: absolute; z-index: 2; right: -14px; top: 112px;
  display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px;
  background: var(--tinta); color: var(--papel); border-radius: 16px; box-shadow: var(--sombra-flotante);
  opacity: 0; transform: translateY(12px) scale(0.96); pointer-events: none;
  transition: opacity 0.4s, transform 0.6s var(--salida);
}
.llamada .burbuja { width: 38px; height: 38px; border-radius: 50%; background: #22a35a; color: var(--blanco); display: grid; place-items: center; }
.llamada .burbuja .icono { width: 18px; height: 18px; }
.llamada strong { display: block; font-size: 0.92rem; font-weight: 660; }
.llamada small { display: block; font-size: 0.78rem; color: #b9bfd3; }
.demo[data-llamada="si"] .llamada { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .demo[data-llamada="si"] .llamada .burbuja { animation: sonar 0.9s ease-in-out 3; }
}
@keyframes sonar { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } }

.demo-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 14px; }
.conmutador { display: inline-grid; grid-template-columns: 1fr 1fr; position: relative; background: #e3e6ee; border-radius: 999px; padding: 4px; }
.conmutador::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  background: var(--blanco); border-radius: 999px; box-shadow: 0 2px 6px rgb(19 24 43 / 0.12);
  transition: transform 0.6s var(--salida), background-color 0.4s;
}
.demo[data-estado="con"] .conmutador::before { transform: translateX(100%); background: var(--tinta); }
.conmutador button {
  position: relative; z-index: 1; border: 0; background: none; font: inherit; font-size: 0.86rem; font-weight: 640;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; color: var(--tinta-2); white-space: nowrap;
  transition: color 0.4s;
}
.conmutador button[aria-pressed="true"] { color: var(--tinta); }
.demo[data-estado="con"] .conmutador button[aria-pressed="true"] { color: var(--papel); }
.pausa {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit;
  font-size: 0.82rem; color: var(--tinta-2); cursor: pointer; padding: 6px 4px; text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap;
}
.pausa .icono { width: 14px; height: 14px; }
.demo-nota { margin-top: 12px; font-size: 0.8rem; color: var(--tinta-2); }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(2.7rem, 11.5vw, 4.6rem); }
  .llamada { right: 8px; top: 120px; }
}
@media (max-width: 480px) {
  .demo-panel { padding: 12px; border-radius: 20px; }
  .resultado .acciones span:last-child { display: none; }
  .resultado { padding-inline: 8px; }
  .conmutador button { padding: 8px 10px; font-size: 0.8rem; }
}

/* ---------- Encabezados de sección ---------- */
.titulo-seccion { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.titulo-seccion .lead { justify-self: start; }
@media (max-width: 860px) { .titulo-seccion { grid-template-columns: 1fr; } }

/* ---------- El costo de no aparecer ---------- */
.perdidas { border-top: 1.5px solid var(--tinta); }
.perdida {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px 64px;
  padding-block: clamp(28px, 3.6vw, 44px); border-bottom: 1px solid var(--linea); align-items: baseline;
}
.perdida h3 { font-size: clamp(1.6rem, 3vw, 2.5rem); font-stretch: 106%; line-height: 1.05; }
.perdida p { color: var(--tinta-2); max-width: 46ch; }
.perdida .tachado { text-decoration: line-through; text-decoration-color: var(--pin); text-decoration-thickness: 0.09em; }
@media (prefers-reduced-motion: no-preference) {
  .js .perdida .tachado { text-decoration-color: transparent; transition: text-decoration-color 0.4s 0.3s; }
  .js .perdida.en-vista .tachado { text-decoration-color: var(--pin); }
}
@media (max-width: 760px) { .perdida { grid-template-columns: 1fr; } }

/* ---------- Hacerlo solo ---------- */
.solo { background: var(--tinta); color: var(--papel); overflow: clip; }
.solo .lead { color: #b9bfd3; }
.solo-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.pila-caja { position: relative; }
.pila {
  position: relative; min-height: 360px; padding: 4px 0 0;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px;
  border-bottom: 1.5px solid #39405a;
}
.ficha {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: #232a42; color: var(--papel); border: 1px solid #39405a;
  font-size: 0.95rem; font-weight: 560; white-space: nowrap;
  transform: translate(var(--px, 0), var(--py, 0)) rotate(var(--pr, 0deg));
  transition: transform 0.9s var(--rebote), background-color 0.5s, border-color 0.5s, color 0.5s, opacity 0.4s;
  transition-delay: var(--retraso, 0s);
}
.ficha .icono { width: 16px; height: 16px; stroke-width: 2.4; display: none; }
.pila.esperando .ficha .icono { display: none; }
.pila.esperando .ficha { transform: translate(var(--px, 0), calc(var(--py, 0) - 520px)) rotate(var(--pr, 0deg)); opacity: 0; transition: none; }
.pila.ordenada .ficha { transform: none; background: var(--cobalto); border-color: var(--cobalto); }
.pila.ordenada .ficha .icono { display: block; }
.pila-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 20px; }
.conmutador-oscuro { background: #232a42; }
.conmutador-oscuro::before { background: var(--papel); }
.conmutador-oscuro button { color: #b9bfd3; }
.conmutador-oscuro button[aria-pressed="true"] { color: var(--tinta); }
.pila-caja[data-estado="orden"] .conmutador::before { transform: translateX(100%); background: var(--cobalto); }
.pila-caja[data-estado="orden"] .conmutador button[aria-pressed="true"] { color: var(--papel); }
.pausa-oscura { color: #b9bfd3; }
.pila-estado { margin-top: 16px; color: #d8dcea; font-size: 0.98rem; min-height: 3em; max-width: 52ch; }
.pila-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 18px; }
.enlace-claro { color: var(--papel); }

.calculadora { background: #1b2137; border: 1px solid #2f3650; border-radius: var(--radio); padding: clamp(22px, 3vw, 36px); }
.calculadora h3 { font-size: 1.5rem; }
.calculadora > p { color: #b9bfd3; margin-top: 8px; font-size: 0.95rem; }
.control { margin-top: 26px; }
.control label { display: flex; justify-content: space-between; gap: 16px; font-size: 0.95rem; color: #d8dcea; }
.control output { font-weight: 700; color: var(--papel); font-variant-numeric: tabular-nums; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin-top: 8px; background: transparent; cursor: pointer;
  --lleno: 30%;
}
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--pin) var(--lleno), #39405a var(--lleno)); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: #39405a; }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--pin); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--papel); border: 4px solid var(--pin); box-shadow: 0 2px 8px rgb(0 0 0 / 0.4); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--papel); border: 4px solid var(--pin); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--pin); outline-offset: 3px; }
input[type="range"]:focus-visible::-moz-range-thumb { outline: 3px solid var(--pin); outline-offset: 3px; }

.resultado-costo { margin-top: 30px; padding-top: 24px; border-top: 1px solid #2f3650; }
.resultado-costo > p { font-size: 1.15rem; line-height: 1.45; }
.resultado-costo strong { font-size: 1.6rem; font-weight: 800; font-stretch: 110%; color: var(--pin); font-variant-numeric: tabular-nums; white-space: nowrap; }
.barras { margin-top: 22px; display: grid; gap: 14px; }
.barra small { display: flex; justify-content: space-between; gap: 12px; font-size: 0.85rem; color: #b9bfd3; }
.barra small b { color: var(--papel); font-weight: 650; font-variant-numeric: tabular-nums; }
.barra i { display: block; height: 10px; margin-top: 6px; border-radius: 10px; background: #39405a; overflow: hidden; }
.barra i::before { content: ""; display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--color-barra, var(--pin)); transform-origin: left; transform: scaleX(var(--escala, 0.5)); transition: transform 0.6s var(--salida); }
.barra-maps { --color-barra: #6f86ff; }
.barra-redes { --color-barra: var(--cobalto-claro); }
.calculadora .chico { color: #959cb4; margin-top: 18px; }
@media (max-width: 960px) { .solo-grid { grid-template-columns: 1fr; } .pila { min-height: 420px; } }

/* ---------- Servicios ---------- */
.servicios-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.servicio {
  position: relative; border-radius: 28px; padding: clamp(28px, 4vw, 52px); overflow: hidden;
  display: flex; flex-direction: column;
}
.servicio-maps { background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); }
.servicio-maps > .topo { color: var(--cobalto); opacity: 0.35; -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 100%); mask-image: linear-gradient(to bottom, transparent 30%, #000 100%); }
.servicio-redes { background: var(--cobalto); color: var(--papel); }
.servicio .rubro { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 1rem; }
.servicio .rubro .icono { width: 22px; height: 22px; }
.servicio-maps .rubro { color: var(--cobalto); }
.servicio h3 { font-size: clamp(2rem, 3.4vw, 2.9rem); font-stretch: 110%; margin-top: 20px; line-height: 1; letter-spacing: -0.035em; }
.servicio > p { margin-top: 16px; max-width: 40ch; color: var(--tinta-2); }
.servicio-redes > p { color: var(--cobalto-claro); }
.entregables { margin-top: 28px; display: grid; gap: 12px; position: relative; }
.entregables li { display: flex; gap: 12px; align-items: flex-start; }
.entregables .icono { margin-top: 0.15em; color: var(--pin); stroke-width: 2.4; }
.servicio-pie { margin-top: auto; padding-top: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; position: relative; }
.precio-desde { font-size: 0.9rem; color: var(--tinta-2); }
.precio-desde b { display: block; font-size: 1.9rem; font-weight: 800; font-stretch: 110%; color: var(--tinta); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.servicio-redes .precio-desde { color: var(--cobalto-claro); }
.servicio-redes .precio-desde b { color: var(--papel); }
.abanico { position: absolute; top: 40px; right: -28px; width: 32%; max-width: 190px; aspect-ratio: 4 / 5; pointer-events: none; }
.abanico img { position: absolute; right: 0; bottom: 0; width: 100%; border-radius: 14px; box-shadow: 0 20px 40px -18px rgb(0 0 0 / 0.5); transition: transform 0.9s var(--salida); }
.abanico img:nth-child(1) { transform: rotate(-16deg) translate(-30%, 8%); }
.abanico img:nth-child(2) { transform: rotate(-6deg) translate(-13%, 0); }
.abanico img:nth-child(3) { transform: rotate(5deg); }
.servicio-redes:hover .abanico img:nth-child(1) { transform: rotate(-22deg) translate(-44%, 6%); }
.servicio-redes:hover .abanico img:nth-child(2) { transform: rotate(-9deg) translate(-22%, -2%); }
.servicio-redes > h3, .servicio-redes > p { max-width: 62%; }
@media (max-width: 960px) {
  .servicios-grid { grid-template-columns: 1fr; }
  .servicio { min-height: 0; }
  .abanico { display: none; }
  .servicio-redes > h3, .servicio-redes > p { max-width: none; }
}

.servicio-web { grid-column: 1 / -1; background: var(--tinta); color: var(--papel); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px 64px; align-items: start; }
.servicio-web .rubro { color: var(--papel); }
.servicio-web p { color: #b9bfd3; margin-top: 16px; max-width: 46ch; }
.servicio-web .entregables { margin-top: 8px; }
.servicio-web .servicio-pie { grid-column: 1 / -1; padding-top: 28px; }
.servicio-web .precio-desde { color: #b9bfd3; margin-top: 0; }
.servicio-web .precio-desde b { color: var(--papel); }
@media (max-width: 960px) { .servicio-web { grid-template-columns: 1fr; } }

.precio-web { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.precio-web-lado { border-radius: 24px; padding: clamp(24px, 3vw, 34px); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); display: flex; flex-direction: column; justify-content: center; }
.precio-web-lado h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.precio-web-lado p { margin-top: 12px; color: var(--tinta-2); max-width: 44ch; }
@media (max-width: 860px) { .precio-web { grid-template-columns: 1fr; } }

/* ---------- Trabajos / prueba ---------- */
.trabajos { background: var(--papel-2); }
.trabajos-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.pieza { grid-column: span 4; display: flex; flex-direction: column; gap: 14px; }
.pieza figure { margin: 0; position: relative; border-radius: var(--radio); overflow: hidden; background: var(--tinta); aspect-ratio: 4 / 5; }
.pieza video, .pieza img { width: 100%; height: 100%; object-fit: cover; }
.pieza figcaption, .pieza .pie { font-size: 0.95rem; color: var(--tinta-2); }
.pieza h3 { font-size: 1.25rem; }
.caso-numero { grid-column: span 4; background: var(--cobalto); color: var(--papel); border-radius: var(--radio); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; }
.caso-numero .cifra { font-size: clamp(3rem, 5.4vw, 4.6rem); font-weight: 850; font-stretch: 115%; letter-spacing: -0.04em; line-height: 0.95; font-variant-numeric: tabular-nums; margin-top: 18px; }
.caso-numero h3 { font-size: 1.4rem; margin-top: 8px; font-stretch: 104%; }
.caso-numero > p { margin-top: 16px; color: var(--cobalto-claro); font-size: 0.95rem; }
.caso-numero .enlace { margin-top: auto; padding-top: 22px; color: var(--papel); }
.caso-cuenta { font-weight: 650; }
.caso-maps {
  grid-column: span 12; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px;
  background: var(--blanco); border-radius: var(--radio); padding: clamp(22px, 3vw, 32px); box-shadow: inset 0 0 0 1px var(--linea);
}
.caso-maps h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.caso-maps p { color: var(--tinta-2); margin-top: 6px; max-width: 60ch; }
.trabajos-pie { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
@media (max-width: 960px) { .pieza, .caso-numero { grid-column: span 6; } .caso-numero { grid-column: span 12; } }
@media (max-width: 640px) { .pieza { grid-column: span 12; } .caso-maps { grid-template-columns: 1fr; } }

/* Desglose de una métrica: barras de una sola tinta, cada valor escrito. */
.desglose { margin-top: 18px; }
.desglose-titulo { font-size: 0.9rem; font-weight: 650; margin-bottom: 8px; }
.desglose ul { display: grid; gap: 10px; }
.desglose li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 5px; font-size: 0.9rem; color: var(--tinta-2); }
.desglose li b { color: var(--tinta); font-weight: 700; font-variant-numeric: tabular-nums; }
.desglose li i { grid-column: 1 / -1; height: 8px; border-radius: 8px; background: #e3e6ee; overflow: hidden; }
.desglose li i::before { content: ""; display: block; height: 100%; width: 100%; border-radius: 4px; background: var(--cobalto); transform-origin: left; transform: scaleX(var(--e, 1)); transition: transform 1.2s var(--salida); }
@media (prefers-reduced-motion: no-preference) {
  .js .desglose:not(.en-vista) li i::before { transform: scaleX(0); }
  .js .desglose li:nth-child(2) i::before { transition-delay: 0.12s; }
  .js .desglose li:nth-child(3) i::before { transition-delay: 0.24s; }
}
.caso-numero .desglose-titulo { color: var(--papel); }
.caso-numero .desglose li { color: var(--cobalto-claro); }
.caso-numero .desglose li b { color: var(--papel); }
.caso-numero .desglose li i { background: rgb(255 255 255 / 0.2); }
.caso-numero .desglose li i::before { background: var(--papel); }

/* Sitio web: navegador + celular */
.caso-web { grid-column: span 8; display: flex; flex-direction: column; background: var(--blanco); border-radius: var(--radio); box-shadow: inset 0 0 0 1px var(--linea); overflow: hidden; }
/* Fondo claro con el dorado del cliente: el sitio oscuro se lee como un objeto y no como un agujero negro. */
.caso-web-medios { position: relative; aspect-ratio: 16 / 10; background: radial-gradient(120% 90% at 85% 10%, #f6efdf 0%, #e9dfc8 60%, #dccfb1 100%); overflow: hidden; }
.navegador { margin: 0; border-radius: 10px; overflow: hidden; background: #0d0c0a; box-shadow: 0 2px 6px rgb(19 24 43 / 0.18), 0 28px 50px -26px rgb(19 24 43 / 0.6); }
.navegador-atras { position: absolute; top: 7%; right: 5%; width: 64%; opacity: 0.96; }
.navegador-frente { position: absolute; left: 5%; bottom: 7%; width: 66%; z-index: 1; }
.navegador-barra { display: flex; align-items: center; gap: 6px; height: clamp(18px, 2.2vw, 28px); padding: 0 12px; background: #2a2824; }
.navegador-barra i { width: 9px; height: 9px; border-radius: 50%; background: #55514a; }
.navegador-barra span { margin-left: 10px; flex: 1; max-width: 240px; height: 70%; border-radius: 5px; background: #3a3732; color: #d6cdb8; font-size: 0.7rem; display: flex; align-items: center; padding: 0 10px; }
.navegador img { width: 100%; height: auto; }
.telefono { position: absolute; z-index: 2; right: 5%; bottom: 5%; width: 19%; margin: 0; border-radius: 20px; border: 5px solid #34312c; overflow: hidden; background: #0d0c0a; box-shadow: 0 18px 36px -12px rgb(0 0 0 / 0.75); transition: transform 0.6s var(--salida); }
.telefono img { width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }
.caso-web:hover .telefono, .web-destacado:hover .telefono { transform: translateY(-8px) rotate(-1.5deg); }
.navegador-atras, .navegador-frente { transition: transform 0.7s var(--salida); }
.caso-web:hover .navegador-atras, .web-destacado:hover .navegador-atras { transform: translate(6px, -6px); }
.caso-web:hover .navegador-frente, .web-destacado:hover .navegador-frente { transform: translate(-4px, 4px); }
.banda-resenas { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; background: radial-gradient(120% 90% at 15% 10%, #f6efdf 0%, #e9dfc8 70%); border-radius: 24px; padding: clamp(20px, 3.4vw, 40px); }
.banda-resenas h3 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.banda-resenas p { margin-top: 12px; color: #4f4637; max-width: 46ch; }
.banda-resenas .boton { margin-top: 22px; }
@media (max-width: 860px) { .banda-resenas { grid-template-columns: 1fr; } }
.caso-web-texto { padding: clamp(22px, 3vw, 32px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; }
.caso-web-texto > div { flex: 1 1 320px; }
.caso-web h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.caso-web-texto p { margin-top: 8px; color: var(--tinta-2); max-width: 54ch; }

/* Ficha del gimnasio */
.caso-gym { grid-column: span 4; display: flex; flex-direction: column; background: var(--blanco); border-radius: var(--radio); box-shadow: inset 0 0 0 1px var(--linea); overflow: hidden; }
.caso-gym .mapa-gym { margin: 0; border-radius: 0; height: auto; flex: 1; min-height: 190px; }
.pin-gym { left: 54%; top: 62%; width: 38px; height: 38px; margin: -38px 0 0 -19px; background: var(--pin); color: var(--tinta); }
.caso-gym-texto { padding: clamp(22px, 3vw, 32px); }
.etiqueta-mapa b { color: #8a5200; font-weight: 750; margin-left: 4px; }
.etiqueta-mapa { position: absolute; left: calc(54% + 26px); top: calc(62% - 30px); background: var(--blanco); color: var(--tinta); font-size: 0.82rem; font-weight: 680; padding: 5px 10px; border-radius: 8px; box-shadow: 0 6px 16px -8px rgb(19 24 43 / 0.5); white-space: nowrap; }
.caso-gym h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.caso-gym p { margin-top: 8px; color: var(--tinta-2); }
.caso-gym .boton { margin-top: 20px; }
.caso-gym-ancho { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.caso-gym-ancho .caso-gym-texto { align-self: center; }
@media (max-width: 960px) { .caso-web, .caso-gym { grid-column: span 12; } .caso-gym .mapa-gym { min-height: 160px; } }
@media (max-width: 640px) { .caso-gym-ancho { grid-template-columns: 1fr; } .caso-web-medios { aspect-ratio: 4 / 3; } .navegador-atras { width: 70%; top: 8%; } .navegador-frente { width: 74%; bottom: 10%; } .telefono { width: 23%; } .navegador-barra span { display: none; } }

.web-destacado { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.web-destacado .caso-web-medios { border-radius: var(--radio); box-shadow: inset 0 0 0 1px rgb(120 100 60 / 0.15); }
.web-destacado h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.web-destacado .lead { margin-top: 18px; }
.web-destacado .entregables .icono { color: var(--cobalto); }
@media (max-width: 960px) { .web-destacado { grid-template-columns: 1fr; } }

/* Recorrido interactivo de un sitio hecho por el equipo */
.recorrido { display: grid; gap: 14px; }
.navegador-recorrido { width: 100%; }
.recorrido-pantalla { aspect-ratio: 16 / 11; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; background: #0d0c0a; scrollbar-width: thin; scrollbar-color: #8a7a54 #1b1a17; }
.recorrido-pantalla:focus-visible { outline: 3px solid var(--pin); outline-offset: -3px; }
.recorrido-pantalla img { width: 100%; height: auto; display: block; }
.recorrido-capitulos { display: flex; flex-wrap: wrap; gap: 8px; }
.recorrido-capitulos button { border: 0; font: inherit; font-size: 0.88rem; font-weight: 620; padding: 8px 14px; border-radius: 999px; cursor: pointer; background: var(--blanco); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea); transition: background-color 0.25s, color 0.25s, box-shadow 0.25s; }
.recorrido-capitulos button:hover { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.recorrido-capitulos button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); box-shadow: none; }
.recorrido-nota { min-height: 3em; color: var(--tinta-2); font-size: 0.97rem; max-width: 60ch; }
@media (prefers-reduced-motion: reduce) { .recorrido-pantalla { scroll-behavior: auto; } }

/* ---------- Accesos a las páginas ---------- */
.accesos { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.acceso {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 16px; text-decoration: none;
  background: color-mix(in srgb, var(--blanco) 72%, transparent); box-shadow: inset 0 0 0 1px var(--linea);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color 0.25s, box-shadow 0.25s, transform 0.35s var(--salida);
}
.acceso:hover { text-decoration: none; background: var(--blanco); box-shadow: inset 0 0 0 1.5px var(--cobalto); transform: translateY(-3px); }
.acceso-icono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #e4e9fb; color: var(--cobalto); transition: background-color 0.25s, color 0.25s; }
.acceso:hover .acceso-icono { background: var(--cobalto); color: var(--blanco); }
.acceso strong { display: block; font-weight: 700; font-stretch: 104%; font-size: 1.05rem; line-height: 1.2; }
.acceso small { display: block; margin-top: 2px; color: var(--tinta-2); font-size: 0.86rem; line-height: 1.35; }
.acceso-flecha { color: var(--cobalto); transition: transform 0.35s var(--salida); }
.acceso:hover .acceso-flecha { transform: translateX(4px); }
.accesos-intro { position: relative; font-size: 0.95rem; font-weight: 600; color: var(--tinta-2); margin-bottom: 12px; }
.hero-accesos { position: relative; margin-top: clamp(24px, 2.4vw, 32px); }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-accesos { animation: aparecer 0.9s var(--salida) 0.9s both; }
}
.accesos-grande .acceso { padding: 24px; border-radius: 20px; background: var(--blanco); }
.accesos-grande .acceso-icono { width: 52px; height: 52px; }
.accesos-grande strong { font-size: 1.2rem; }
@media (max-width: 1100px) { .accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .accesos { grid-template-columns: 1fr; gap: 8px; } .acceso { padding: 14px 16px; } }

/* ---------- Proceso ---------- */
.pasos { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: paso; }
.pasos::before {
  content: ""; position: absolute; left: 28px; right: 28px; top: 27px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--cobalto) 0 12px, transparent 12px 22px);
  transform-origin: left; transform: scaleX(1);
}
.js .pasos::before { transform: scaleX(0); transition: transform 1.8s var(--salida) 0.2s; }
.js .pasos.en-vista::before { transform: scaleX(1); }
.paso { position: relative; }
.paso .marcador {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--papel); box-shadow: inset 0 0 0 2px var(--cobalto); color: var(--cobalto);
  font-weight: 800; font-size: 1.15rem; font-stretch: 110%; position: relative;
}
.paso:last-child .marcador { background: var(--pin); box-shadow: none; color: var(--tinta); }
.js .paso:last-child .marcador { transform: scale(0.4); opacity: 0; transition: transform 0.7s var(--rebote) 1.6s, opacity 0.3s 1.6s; }
.js .pasos.en-vista .paso:last-child .marcador { transform: none; opacity: 1; }
.paso h3 { margin-top: 26px; font-size: 1.45rem; }
.paso p { margin-top: 10px; color: var(--tinta-2); max-width: 34ch; }
.paso .plazo { display: inline-block; margin-top: 14px; font-size: 0.85rem; font-weight: 650; color: var(--cobalto); }
@media (max-width: 860px) {
  .pasos { grid-template-columns: 1fr; gap: 36px; padding-left: 0; }
  .pasos::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 3px; height: auto; background: repeating-linear-gradient(180deg, var(--cobalto) 0 12px, transparent 12px 22px); transform-origin: top; }
  .js .pasos::before { transform: scaleY(0); }
  .js .pasos.en-vista::before { transform: scaleY(1); }
  .paso { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; }
  .paso .marcador { grid-row: span 3; }
  .paso h3 { margin-top: 12px; }
}

/* ---------- Planes ---------- */
.planes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column; border-radius: 24px; padding: clamp(24px, 3vw, 34px);
  background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea);
}
.plan h3 { font-size: 1.7rem; font-stretch: 108%; }
.plan > p:not(.precio) { margin-top: 10px; color: var(--tinta-2); min-height: 3.2em; }
.plan .precio { color: var(--tinta); margin-top: 26px; font-size: clamp(2.3rem, 3.6vw, 3rem); font-weight: 820; font-stretch: 112%; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan .precio small { display: block; font-size: 0.85rem; font-weight: 500; font-stretch: 100%; letter-spacing: 0; color: var(--tinta-2); margin-bottom: 8px; }
.plan .precio del { font-weight: 500; color: var(--tinta-2); text-decoration-thickness: 1px; margin-left: 6px; }
.plan .entregables { margin-top: 24px; margin-bottom: 28px; }
.plan .entregables .icono { color: var(--cobalto); }
.plan .boton { margin-top: auto; align-self: stretch; }
.plan-destacado { background: var(--cobalto); color: var(--papel); box-shadow: 0 30px 60px -30px rgb(35 64 216 / 0.7); }
.plan-destacado .precio { color: var(--papel); }
.plan-destacado > p:not(.precio), .plan-destacado .precio small, .plan-destacado .precio del { color: var(--cobalto-claro); }
.plan-destacado .entregables .icono { color: var(--pin); }
.etiqueta-ahorro {
  position: absolute; top: clamp(24px, 3vw, 34px); right: clamp(24px, 3vw, 34px);
  background: var(--pin); color: var(--tinta); font-weight: 760; font-size: 0.9rem; padding: 6px 12px; border-radius: 999px;
}
.nota-precios { margin-top: 24px; font-size: 0.9rem; color: var(--tinta-2); max-width: 80ch; }
@media (max-width: 960px) { .planes-grid { grid-template-columns: 1fr; } .plan > p:not(.precio) { min-height: 0; } }

.combo { margin-top: 28px; border-radius: 24px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); }
.combo summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px clamp(22px, 3vw, 34px); font-weight: 680; font-size: 1.15rem;
}
.combo summary::-webkit-details-marker { display: none; }
.mas { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--papel-2); transition: transform 0.4s var(--salida), background-color 0.3s; }
.mas .icono { width: 18px; height: 18px; }
details[open] > summary .mas { transform: rotate(45deg); background: var(--tinta); color: var(--papel); }
.combo-cuerpo { padding: 4px clamp(22px, 3vw, 34px) 30px; display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 24px; align-items: end; }
.campo label { display: block; font-size: 0.92rem; font-weight: 620; margin-bottom: 8px; }
.campo select, .campo input, .campo textarea {
  width: 100%; min-height: 52px; border-radius: 12px; border: 1.5px solid var(--linea); background: var(--papel);
  font: inherit; color: var(--tinta); padding: 12px 14px; transition: border-color 0.2s, box-shadow 0.2s;
}
.campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313182b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.campo select:focus, .campo input:focus, .campo textarea:focus { outline: none; border-color: var(--cobalto); box-shadow: 0 0 0 4px rgb(35 64 216 / 0.15); }
.campo .enlace { margin-top: 8px; font-size: 0.88rem; }
.combo-total { background: var(--papel-2); border-radius: 16px; padding: 16px 20px; }
.combo-total span { display: block; font-size: 0.88rem; color: var(--tinta-2); }
.combo-total strong { display: block; font-size: 2rem; font-weight: 820; font-stretch: 112%; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.combo-total #combo-ahorro { color: #1d7a3e; font-weight: 620; }
.combo-cuerpo .boton { grid-column: 1 / -1; justify-self: start; }
.combo .nota-precios { padding: 0 clamp(22px, 3vw, 34px) 26px; margin: 0; }
@media (max-width: 860px) { .combo-cuerpo { grid-template-columns: 1fr; } }

/* Cuatro planes y el armador de packs */
.planes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.planes-4 .plan h3 { font-size: 1.45rem; }
.planes-4 .etiqueta-ahorro { position: static; align-self: flex-start; margin-bottom: 14px; }
.planes-4 .plan .precio { font-size: clamp(2rem, 2.8vw, 2.5rem); }
.precio-extra { margin-top: 10px; color: var(--cobalto-claro); font-size: 0.95rem; }
.precio-extra b { color: var(--papel); font-size: 1.15rem; font-weight: 780; font-stretch: 108%; }
.precio-extra del { margin-left: 4px; }
@media (max-width: 1180px) { .planes-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .planes-4 { grid-template-columns: 1fr; } }

.armador { margin-top: clamp(56px, 7vw, 88px); padding-top: clamp(32px, 4vw, 48px); border-top: 1.5px solid var(--tinta); display: grid; gap: clamp(22px, 3vw, 34px); scroll-margin-top: calc(var(--header) + 16px); }
.armador-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.armador-cabeza h3 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-stretch: 110%; letter-spacing: -0.035em; }
.armador-cabeza p { color: var(--tinta-2); max-width: 44ch; }

/* Tarjetas de servicio: se tocan para sumar o sacar */
.pack-servicios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pack-servicio {
  display: grid; gap: 14px; align-content: start; padding: 16px; border-radius: 22px;
  background: var(--blanco); border: 1.5px dashed #b9c0cd;
  transition: background-color 0.35s, border-color 0.35s, color 0.35s, transform 0.4s var(--salida);
}
.pack-servicio[data-activo="true"] { background: var(--cobalto); border-color: transparent; border-style: solid; color: var(--papel); }
.pack-servicio:has(.pack-toggle:active) { transform: scale(0.98); }
.pack-toggle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 4px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 14px; }
.pack-icono { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #e4e9fb; color: var(--cobalto); transition: background-color 0.35s, color 0.35s; }
.pack-servicio[data-activo="true"] .pack-icono { background: rgb(255 255 255 / 0.16); color: var(--papel); }
.pack-nombre b { display: block; font-size: 1.15rem; font-weight: 740; font-stretch: 104%; }
.pack-nombre small { display: block; font-size: 0.88rem; opacity: 0.8; }
.pack-check { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--blanco); color: var(--tinta); box-shadow: inset 0 0 0 1.5px #b9c0cd; transition: background-color 0.3s, transform 0.4s var(--salida); }
.pack-check .icono { width: 18px; height: 18px; stroke-width: 2.6; }
.pack-check .si { display: none; }
.pack-servicio[data-activo="true"] .pack-check { background: var(--pin); box-shadow: none; transform: rotate(-8deg) scale(1.05); }
.pack-servicio[data-activo="true"] .pack-check .si { display: block; }
.pack-servicio[data-activo="true"] .pack-check .no { display: none; }
.pack-niveles { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 6px; }
.pack-niveles button { border: 0; font: inherit; font-size: 0.9rem; font-weight: 680; padding: 9px 6px; border-radius: 12px; cursor: pointer; background: var(--blanco); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea); transition: background-color 0.25s, color 0.25s, box-shadow 0.25s; }
.pack-niveles button small { display: block; font-size: 0.78rem; font-weight: 520; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.pack-servicio[data-activo="false"] .pack-niveles { opacity: 0.55; }
.pack-servicio[data-activo="true"] .pack-niveles button { background: rgb(255 255 255 / 0.1); color: var(--papel); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22); }
.pack-servicio[data-activo="true"] .pack-niveles button small { color: var(--cobalto-claro); }
.pack-servicio[data-activo="true"] .pack-niveles button[aria-checked="true"] { background: var(--papel); color: var(--cobalto); box-shadow: none; }
.pack-servicio[data-activo="true"] .pack-niveles button[aria-checked="true"] small { color: var(--tinta-2); }
.pack-periodo { font-size: 0.82rem; opacity: 0.75; margin-top: -6px; }
.pack-toggle:focus-visible, .pack-niveles button:focus-visible { outline: 3px solid var(--pin); outline-offset: 2px; }

/* Camino de ahorro: el pin avanza a medida que sumás */
.camino { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 46px; }
.camino-pista { position: absolute; left: 12.5%; right: 12.5%; top: 53px; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, #c9ced8 0 10px, transparent 10px 18px); }
.camino-avance { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 4px; background: var(--cobalto); transform-origin: left; transform: scaleX(calc(var(--paso, 3) / 3)); transition: transform 0.7s var(--salida); }
.camino-pin { position: absolute; top: -44px; left: 0; width: 30px; height: 30px; margin-left: -15px; border-radius: 50% 50% 50% 0; transform: translateX(calc(var(--paso, 3) / 3 * var(--largo-pista, 0px))) rotate(-45deg); background: var(--pin); box-shadow: 0 6px 12px -6px rgb(19 24 43 / 0.55); transition: transform 0.7s var(--salida); display: grid; place-items: center; }
.camino-pin span { width: 10px; height: 10px; border-radius: 50%; background: var(--tinta); }
.armador[data-nivel="0"] .camino-pin { opacity: 0.35; }
.camino-parada { position: relative; display: grid; justify-items: center; gap: 2px; border: 0; background: none; font: inherit; color: var(--tinta-2); text-align: center; cursor: pointer; padding: 0 6px 6px; border-radius: 14px; }
.camino-parada::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 3px #c9ced8; margin-bottom: 12px; transition: background-color 0.4s, box-shadow 0.4s; }
.camino-parada b { font-weight: 700; color: var(--tinta); font-size: 0.98rem; }
.camino-parada small { font-size: 0.84rem; line-height: 1.3; }
.camino-parada.alcanzada::before { background: var(--cobalto); box-shadow: inset 0 0 0 3px var(--cobalto); }
.camino-parada.actual b { color: var(--cobalto); }
.camino-parada:hover::before { box-shadow: inset 0 0 0 3px var(--cobalto); }
.camino-parada:focus-visible { outline: 3px solid var(--pin); outline-offset: 2px; }

/* Totales */
.pack-resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pack-total { background: var(--blanco); border-radius: 18px; padding: 16px 18px; box-shadow: inset 0 0 0 1px var(--linea); }
.pack-total > span { display: block; font-size: 0.88rem; color: var(--tinta-2); }
.pack-total strong { display: block; margin: 4px 0 2px; font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 820; font-stretch: 112%; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.pack-antes { font-size: 0.86rem !important; }
.pack-antes del { margin-right: 4px; }
.pack-total-ahorro { background: #eaf6ee; box-shadow: none; }
.pack-total-ahorro strong { color: #1d7a3e; }
.armador.sin-ahorro .pack-total-ahorro { background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); }
.armador.sin-ahorro .pack-total-ahorro strong { color: var(--tinta-2); }
.pack-pie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 20px; align-items: center; }
.armador > .nota-precios { margin-top: -10px; }
.empujon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 14px 16px; border-radius: 16px; background: #fff4ef; box-shadow: inset 0 0 0 1.5px rgb(255 90 38 / 0.35); }
.empujon p { flex: 1 1 260px; font-size: 0.97rem; font-weight: 560; }
.empujon.maximo { background: #eaf6ee; box-shadow: inset 0 0 0 1.5px rgb(29 122 62 / 0.3); }
@media (max-width: 960px) {
  .pack-servicios { grid-template-columns: 1fr; }
  .pack-servicio { grid-template-columns: minmax(0, 1fr); }
  .pack-pie { grid-template-columns: 1fr; }
  .pack-pie .boton { justify-self: start; }
}
@media (max-width: 700px) {
  .camino { grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 0; }
  .camino-pista { display: none; }
  .camino-parada { justify-items: start; text-align: left; padding: 12px 14px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); }
  .camino-parada::before { display: none; }
  .camino-parada.actual { background: var(--cobalto); color: var(--cobalto-claro); }
  .camino-parada.actual b { color: var(--papel); }
  .pack-resumen { grid-template-columns: 1fr; }
}

.mini-promos { margin-top: 16px; display: grid; gap: 10px; }
.mini-promos li { padding: 12px 14px; border-radius: 12px; background: var(--papel); }
.mini-promos b { display: block; font-weight: 700; }
.mini-promos span { color: var(--tinta-2); font-size: 0.93rem; }
.barra-nota { margin-top: 14px; font-size: 0.9rem; color: #d8dcea; }

/* ---------- Preguntas ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 32px 80px; align-items: start; }
.faq-grid > div:first-child { position: sticky; top: calc(var(--header) + 32px); }
.faq-grid .lead { margin-top: 18px; }
.faq-grid .enlace { margin-top: 22px; }
.faq { border-top: 1.5px solid var(--tinta); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; font-weight: 660; font-size: 1.12rem; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--cobalto); }
.faq details p { padding: 0 56px 24px 0; color: var(--tinta-2); max-width: 62ch; }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] p { animation: aparecer 0.5s var(--salida); }
}
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } .faq-grid > div:first-child { position: static; } .faq details p { padding-right: 0; } }

/* ---------- Cierre ---------- */
.cierre { background: var(--cobalto); color: var(--papel); overflow: clip; }
.cierre > .topo { color: var(--papel); opacity: 0.22; }
.cierre-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px 64px; align-items: end; }
.cierre h2 { font-size: clamp(2.6rem, 6vw, 5.4rem); font-stretch: 112%; line-height: 0.95; letter-spacing: -0.04em; }
.cierre p { color: var(--cobalto-claro); font-size: 1.15rem; max-width: 36ch; }
.cierre .hero-acciones { margin-top: 28px; }
.cierre .enlace { color: var(--papel); }
.cierre .chico { color: var(--cobalto-claro); margin-top: 22px; }
.cierre-oso { position: absolute; right: -2%; bottom: -14%; width: min(34vw, 420px); color: var(--cobalto-hondo); opacity: 0.55; pointer-events: none; }
.cierre-oso svg { width: 100%; height: auto; }
@media (max-width: 860px) { .cierre-grid { grid-template-columns: 1fr; } .cierre-oso { width: 60vw; bottom: -6%; opacity: 0.35; } }

/* ---------- Pie ---------- */
.pie-sitio { background: var(--tinta); color: #c8ccda; padding-block: 72px 32px; font-size: 0.97rem; }
.pie-sitio a { text-decoration: none; }
.pie-sitio a:hover { color: var(--papel); text-decoration: underline; }
.pie-arriba { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
.pie-sitio .marca { color: var(--papel); }
.pie-sitio .logo-lockup { height: 34px; }
.pie-arriba p { margin-top: 18px; max-width: 30ch; }
.pie-arriba h2 { font-size: 0.95rem; font-weight: 650; font-stretch: 100%; letter-spacing: 0; color: var(--papel); margin-bottom: 14px; }
.pie-arriba address a:first-child { white-space: nowrap; }
.pie-arriba nav, .pie-arriba address { display: grid; gap: 10px; font-style: normal; align-content: start; }
.pie-abajo { margin-top: 64px; padding-top: 24px; border-top: 1px solid #2c3349; display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-size: 0.88rem; }
.pie-abajo nav { display: flex; gap: 22px; flex-wrap: wrap; }
@media (max-width: 760px) { .pie-arriba { grid-template-columns: 1fr 1fr; } .pie-arriba > div:first-child { grid-column: 1 / -1; } }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 20px 0 16px;
  background: #1f9d55; color: var(--blanco); border-radius: 999px; text-decoration: none; font-weight: 660;
  box-shadow: 0 16px 30px -14px rgb(19 24 43 / 0.7);
  transform: translateY(140%); opacity: 0;
  transition: transform 0.5s var(--salida), opacity 0.3s, background-color 0.2s;
}
.wa-flotante .icono { width: 24px; height: 24px; }
.wa-flotante.visible { transform: none; opacity: 1; }
.wa-flotante:hover { background: #178046; text-decoration: none; }
@media (max-width: 560px) { .wa-flotante span { display: none; } .wa-flotante { padding: 0; width: 58px; justify-content: center; } }
@media print { .wa-flotante, .encabezado { display: none; } }

/* ---------- Páginas internas ---------- */
.cabecera-pagina { position: relative; overflow: clip; margin-top: calc(-1 * var(--header)); padding: calc(var(--header) + clamp(40px, 7vw, 96px)) 0 clamp(56px, 8vw, 104px); }
.cabecera-pagina > .topo { color: var(--cobalto); -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 70%); mask-image: linear-gradient(100deg, transparent 20%, #000 70%); }
.migas { position: relative; display: flex; gap: 8px; font-size: 0.9rem; color: var(--tinta-2); margin-bottom: 28px; }
.migas a { color: var(--tinta-2); }
.cabecera-pagina h1 { position: relative; font-size: clamp(2.7rem, 7vw, 5.8rem); font-weight: 820; font-stretch: 112%; line-height: 0.95; letter-spacing: -0.04em; max-width: 14ch; }
.cabecera-pagina .lead { position: relative; margin-top: 24px; max-width: 46ch; }
.cabecera-pagina .hero-acciones { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .js .cabecera-pagina h1 { animation: estirar 1.2s var(--salida) both; }
  .js .cabecera-pagina .lead, .js .cabecera-pagina .hero-acciones { animation: aparecer 0.9s var(--salida) 0.35s both; }
  .js .cabecera-pagina > .topo { --topo-guion: 2400; --topo-anim: trazar 3s var(--salida) both; }
}

.beneficios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; border-top: 1.5px solid var(--tinta); padding-top: 36px; }
.beneficios .icono { width: 30px; height: 30px; color: var(--cobalto); }
.beneficios h3 { margin-top: 18px; font-size: 1.4rem; }
.beneficios p { margin-top: 10px; color: var(--tinta-2); }
@media (max-width: 860px) { .beneficios { grid-template-columns: 1fr; gap: 32px; } }

.plan .detalle { margin-top: 18px; margin-bottom: 22px; border-top: 1px solid var(--linea); }
.plan-destacado .detalle { border-color: rgb(255 255 255 / 0.25); }
.plan .detalle summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 16px 0 6px; font-weight: 640; }
.plan .detalle summary::-webkit-details-marker { display: none; }
.plan-destacado .mas { background: rgb(255 255 255 / 0.15); }
.plan .detalle h4 { font-size: 0.98rem; font-stretch: 100%; letter-spacing: 0; margin-top: 18px; }
.plan .detalle ul { margin-top: 8px; display: grid; gap: 6px; }
.plan .detalle li { position: relative; padding-left: 18px; font-size: 0.95rem; color: var(--tinta-2); }
.plan .detalle li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--cobalto); }
.plan-destacado .detalle li { color: var(--cobalto-claro); }
.plan-destacado .detalle li::before { background: var(--pin); }
.plan .detalle .aclaracion { font-size: 0.85rem; color: var(--tinta-2); margin-top: 16px; }
.plan-destacado .detalle .aclaracion { color: var(--cobalto-claro); }
.plan .incluye-previo { margin-top: 22px; font-weight: 640; font-size: 0.95rem; }

.banda-combo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; background: var(--tinta); color: var(--papel); border-radius: 24px; padding: clamp(26px, 4vw, 44px); margin-top: 40px; }
.banda-combo h3 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.banda-combo p { color: #b9bfd3; margin-top: 6px; }

/* Trabajos (página) */
.galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.galeria a { display: block; border-radius: var(--radio); overflow: hidden; background: var(--tinta); text-decoration: none; }
.galeria img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; transition: transform 0.8s var(--salida); }
.galeria a:hover img { transform: scale(1.04); }
.galeria figcaption { padding: 14px 4px 0; color: var(--tinta-2); font-size: 0.95rem; }
.galeria figure { margin: 0; }
.reel-destacado { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.reel-destacado figure { margin: 0; border-radius: var(--radio); overflow: hidden; background: var(--tinta); aspect-ratio: 9 / 16; max-height: 78vh; }
.reel-destacado video { width: 100%; height: 100%; object-fit: cover; }
.reel-destacado p { margin-top: 18px; color: var(--tinta-2); max-width: 46ch; }
.metricas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.metricas figure { margin: 0; background: var(--blanco); border-radius: var(--radio); padding: 16px; box-shadow: inset 0 0 0 1px var(--linea); }
.metricas img { border-radius: 10px; width: 100%; }
.metricas figure { display: flex; flex-direction: column; gap: 18px; }
.metricas figcaption { padding: 8px 8px 0; }
.metrica-cifra { color: var(--tinta-2); }
.metrica-cifra strong { display: block; color: var(--tinta); font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 820; font-stretch: 112%; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.metrica-nota { margin-top: 16px; font-size: 0.95rem; color: var(--tinta-2); }
.metricas img { max-height: 520px; object-fit: contain; background: #0b0b0d; }
@media (max-width: 860px) { .galeria, .metricas, .reel-destacado { grid-template-columns: 1fr; } .reel-destacado figure { max-width: 420px; } }

/* Nosotros */
.principios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; border-top: 1.5px solid var(--tinta); }
.principios > div { padding: 30px 0; border-bottom: 1px solid var(--linea); }
.principios h3 { font-size: 1.45rem; }
.principios p { margin-top: 10px; color: var(--tinta-2); max-width: 44ch; }
.manifiesto { font-size: clamp(1.6rem, 3.2vw, 2.6rem); font-weight: 700; font-stretch: 106%; letter-spacing: -0.025em; line-height: 1.15; max-width: 26ch; text-wrap: balance; }
.manifiesto + p { margin-top: 24px; color: var(--tinta-2); max-width: 56ch; }
@media (max-width: 760px) { .principios { grid-template-columns: 1fr; } }

/* Contacto */
.contacto-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.vias { display: grid; gap: 16px; margin-top: 28px; }
.vias a { font-weight: 620; }
.mini-pasos { margin-top: 36px; display: grid; gap: 18px; border-top: 1.5px solid var(--tinta); padding-top: 28px; counter-reset: mp; }
.mini-pasos li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: baseline; counter-increment: mp; }
.mini-pasos li::before { content: counter(mp); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--cobalto); color: var(--cobalto); font-weight: 760; }
.formulario { background: var(--blanco); border-radius: 28px; padding: clamp(24px, 4vw, 44px); box-shadow: var(--sombra-panel); display: grid; gap: 18px; }
.formulario h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.formulario .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.formulario .campo input, .formulario .campo select, .formulario .campo textarea { background: var(--papel); }
.formulario textarea { min-height: 110px; resize: vertical; }
.formulario .boton { justify-self: start; }
.oculto { display: none; }
.estado-form { padding: 14px 16px; border-radius: 12px; background: #fff4ef; color: var(--tinta); font-size: 0.95rem; }
@media (max-width: 860px) { .contacto-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .formulario .fila { grid-template-columns: 1fr; } }

/* Texto legal */
.prosa { max-width: 72ch; }
.prosa h2 { font-size: 1.6rem; font-stretch: 104%; margin: 2.4em 0 0.6em; }
.prosa p, .prosa ul { margin: 0 0 1em; color: var(--tinta-2); }
.prosa ul { padding-left: 1.2em; list-style: disc; }
.prosa li { margin-bottom: 0.5em; }
.prosa li::marker { color: var(--cobalto); }
.prosa strong { color: var(--tinta); }
.prosa .updated { font-size: 0.92rem; }

/* Movimiento reducido: todo queda en su estado final. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  .cursor { display: none; }
}