/* ============================================================
   Make it Easy — Piezas de la página
   Se apoya en sistema.css (tokens, superficies, botones) y en
   objetos3d.css (celulares, ronda, moneda, hojas). Acá viven el
   armado de cada sección: cabecera, portada, productos, sistemas,
   cronograma, preguntas, contacto y pie.
   ============================================================ */

/* ---------- cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:40;transition:background var(--normal), backdrop-filter var(--normal), border-color var(--normal);border-bottom:1px solid transparent}
.cabecera.con-fondo{background:rgba(14,19,26,.72);border-bottom-color:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.cabecera-in{display:flex;align-items:center;gap:26px;height:74px;padding-top:env(safe-area-inset-top, 0px)}
.logo{display:flex;align-items:center;gap:11px;color:#fff}
.logo svg{width:34px;height:34px;flex:none}
.logo span{text-align:center}
.logo b{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1}
.logo small{display:block;font-size:11px;color:rgba(255,255,255,.55);letter-spacing:.02em}
.nav{display:flex;gap:22px;margin-left:auto}
.nav-wa{display:none}
.nav a{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.7);padding:6px 0;border-bottom:1px solid transparent;transition:color var(--rapido), border-color var(--rapido)}
.nav a.actual,
.nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--cobre)}

/* Submenú de Productos. Se abre con el puntero y con el teclado (focus-within),
   sin JavaScript. En celular el menú ya es una columna, así que se apoya ahí
   mismo indentado (ver el bloque de 1080px). */
/* El area sensible baja hasta el panel: con un hueco en el medio, el puntero
   pasa por la nada, se pierde el hover y el menu se cierra antes de llegar. */
.nav-grupo{position:relative;display:flex;align-items:center;padding-bottom:14px;margin-bottom:-14px}
.nav-sub{
  position:absolute;top:100%;left:-16px;min-width:214px;display:grid;
  padding:7px 0;background:rgba(14,19,26,.97);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.13);border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;translate:0 -6px;z-index:60;
  transition:opacity var(--rapido), translate var(--rapido), visibility var(--rapido);
}
.nav-grupo:focus-within .nav-sub{opacity:1;visibility:visible;translate:0 0}
.nav-sub a{padding:9px 16px;border-bottom:0;white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  .nav-grupo:hover .nav-sub{opacity:1;visibility:visible;translate:0 0}
}
.menu-boton{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-sm);padding:8px 10px;min-width:44px;min-height:44px}
.menu-boton span{display:block;width:18px;height:1.5px;background:#fff;margin:3px 0}
.avance{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:rgba(255,255,255,.08)}
.avance span{display:block;height:100%;background:var(--cobre);transform-origin:0 50%;transform:scaleX(var(--avance, 0))}

/* ---------- portada ---------- */
.portada{position:relative;display:flex;align-items:center;min-height:min(880px, calc(100svh - 74px));padding-block:clamp(40px, 6vw, 80px);overflow-x:clip}
.portada-in{position:relative;width:100%}
.portada-texto{max-width:660px}
/* Un solo titulo de portada para las tres paginas: inicio, nosotros y sistemas.
   Antes cada una usaba una clase distinta (.portada-titulo, .titulo-ronda,
   .display-2) y las tres tenian peso, cuerpo y tracking diferentes. */
.portada-titulo{
  font-family:var(--serif);font-weight:330;color:#F5EFE8;
  font-size:clamp(46px, 6.3vw, 100px);line-height:.93;letter-spacing:-.042em;
  font-variation-settings:"opsz" 144, "SOFT" 40, "WONK" 0;
  text-wrap:balance;
}
/* La segunda linea en cobre e italica, para las portadas que la usan. */
.portada-titulo em{
  font-style:italic;font-weight:400;color:var(--cobre-claro);
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
.portada-titulo .linea--sub{
  font-size:.43em;line-height:1.12;letter-spacing:-.02em;font-weight:300;margin-top:.55em;
  color:rgba(245,239,232,.6);--demora:450ms;
}
.portada .lede{margin:30px 0 32px;max-width:50ch}
.portada-botones{display:flex;flex-wrap:wrap;gap:12px}
.portada .portada-dato{margin-top:28px;max-width:46ch;padding-left:14px;border-left:2px solid var(--cobre);font-size:14px;color:rgba(255,255,255,.62)}

/* ---------- secciones ---------- */
.seccion{position:relative;padding-block:clamp(64px, 9vw, 124px)}

/* ---------- productos ---------- */
.productos-cabeza{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px, 5vw, 80px);align-items:center;margin-bottom:clamp(36px, 5vw, 64px)}
.productos-cabeza .h-sec{margin-bottom:16px}
.sobre-oscuro .productos-cuota{margin-top:14px;max-width:54ch;font-size:14.5px;color:rgba(255,255,255,.62)}

.planilla{padding:clamp(10px, 1.8vw, 20px) clamp(18px, 3vw, 36px)}
.fila{
  position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:6px 22px;align-items:center;
  padding:22px 16px;margin-inline:-16px;border-radius:16px;
  transform-style:preserve-3d;transition:transform .45s var(--curva), background var(--normal);
}
.fila + .fila::before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:#DCD8D0}

.fila .icono{
  width:48px;height:48px;color:var(--cobre-hondo);stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s var(--curva);
}

.fila .icono .relleno{fill:var(--cobre-tinte);stroke:none}
.sobre-oscuro .fila h3{font-size:clamp(1.1rem, 1.7vw, 1.32rem);margin-bottom:5px;color:var(--grafito-hondo)}
.sobre-oscuro .fila p{font-size:14.5px;color:var(--tinta-suave);max-width:52ch;line-height:1.5}
.fila p a{color:var(--cobre-hondo);font-weight:600;border-bottom:1px solid currentColor}
.fila p:not(.prod-mas) a{white-space:nowrap}
.precio{text-align:right;white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.precio small{font-size:12px;color:var(--tinta-suave)}
.precio b{font-family:var(--serif);font-size:clamp(1.55rem, 2.4vw, 2.1rem);font-weight:600;letter-spacing:-.025em;line-height:1;font-variant-numeric:tabular-nums;color:var(--grafito-hondo)}
.precio b .moneda-sigla{font-family:var(--mono);font-size:.42em;letter-spacing:.06em;margin-right:.35em;vertical-align:.45em;color:var(--cobre-hondo)}
.precio .cotizar{font-family:var(--serif);font-size:clamp(1.1rem, 1.7vw, 1.4rem);font-weight:600;font-style:italic;color:var(--grafito-hondo)}

.linea-precio{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:40px}
.sobre-oscuro .linea-precio p{color:rgba(255,255,255,.8);font-size:15.5px}
.linea-precio b{color:#fff;font-family:var(--serif);font-size:1.25em;font-weight:600}
/* El panel oscuro compone titulo + bajada + accion. Como el reset deja h2 y p
   en margin:0, el aire va explicito. Solo hijos directos: el bloque de contacto
   anida su texto y tiene el suyo. */
.panel-hondo > .display-2 + .lede{margin-top:1.1em}
.panel-hondo > .lede + .botones,
.panel-hondo > .lede + .btn{margin-top:clamp(20px, 2.4vw, 30px)}

.letra-chica{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px 32px;margin-top:28px;margin-bottom:4px}
.sobre-oscuro .letra-chica p{font-size:15px;color:rgba(255,255,255,.8);padding-left:14px;border-left:2px solid var(--cobre)}

/* ---------- sistemas a medida ---------- */
.sistemas-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px, 5vw, 80px);align-items:center}
.sistemas-texto .display-2{margin-bottom:22px;max-width:14ch}
.sistemas-texto .lede + .lede{margin-top:14px}
.documentos-titulo{margin:30px 0 4px;font-size:14px;font-weight:600}
.sobre-oscuro .documentos-titulo{color:#fff}
.documentos{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:26px}
.sobre-oscuro .documentos li{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:14px;color:rgba(255,255,255,.7);transition:color var(--rapido), padding var(--normal) var(--curva)}

.botones{display:flex;flex-wrap:wrap;gap:12px}
.btn svg.externo{width:13px;height:13px}

/* ---------- cronograma ---------- */
.cabeza-doble{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px, 4vw, 56px);align-items:end;margin-bottom:clamp(32px, 4vw, 52px)}
.crono-escena{perspective:1600px;perspective-origin:50% 100%}
.crono-escena .cronograma{transform-origin:50% 100%;transform:rotateX(calc((1 - var(--p, 1)) * 38deg));transition:transform .55s var(--curva-salida)}
.cronograma{--entrega:7;padding:clamp(20px, 3vw, 34px)}
.crono-cabeza{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}
.plazos{display:inline-flex;gap:8px;flex-wrap:wrap}
.repetir{background:none;border:0;font-size:13.5px;font-weight:600;color:var(--cobre-hondo);text-decoration:underline;text-underline-offset:3px;min-height:24px;padding:4px 2px}
.crono-grilla{--col:clamp(160px, 26%, 250px);position:relative;display:grid;grid-template-columns:var(--col) minmax(0,1fr);align-items:center;row-gap:12px;cursor:crosshair;touch-action:pan-y}
.crono-fila{display:contents}
.crono-nombre{font-size:14px;line-height:1.3;padding-right:14px;color:var(--tinta-suave);transition:color var(--rapido)}
.crono-fila.activa .crono-nombre{color:var(--grafito-hondo);font-weight:700}
.crono-pista{position:relative;height:30px;background:linear-gradient(var(--linea),var(--linea)) 0 50% / 100% 1px no-repeat}
/* barras con espesor: una cara de arriba y el canto de abajo */
.barra-c{
  position:absolute;top:5px;height:16px;border-radius:5px;background:var(--grafito-medio);
  box-shadow:0 2px 0 #121820, 0 4px 0 #0C1117, 0 10px 14px -8px rgba(14,19,26,.5);
  left:calc(var(--desde) / 35 * 100%);width:calc((var(--hasta) - var(--desde)) / 35 * 100%);
  transition:left .8s var(--curva-salida), width .8s var(--curva-salida), background-color var(--normal), transform var(--normal) var(--curva), box-shadow var(--normal);
}
.barra-c.rayada{background:repeating-linear-gradient(-45deg, var(--grafito-medio) 0 5px, #C9CDD3 5px 9px);box-shadow:inset 0 0 0 1.5px var(--grafito-medio), 0 2px 0 #121820, 0 4px 0 #0C1117}
.barra-c.sigue{background:linear-gradient(90deg, var(--grafito-medio) 55%, rgba(35,47,61,.2));border-radius:5px 0 0 5px}
.crono-fila.activa .barra-c{background:var(--cobre);transform:translateY(-3px);box-shadow:0 2px 0 var(--cobre-hondo), 0 5px 0 #6A3617, 0 14px 18px -8px rgba(138,74,34,.6)}
.crono-fila.activa .barra-c.rayada{background:repeating-linear-gradient(-45deg, var(--cobre) 0 5px, var(--cobre-tinte) 5px 9px);box-shadow:inset 0 0 0 1.5px var(--cobre), 0 2px 0 var(--cobre-hondo), 0 5px 0 #6A3617}
.hito{position:absolute;top:50%;left:calc(var(--en) / 35 * 100%);width:14px;height:14px;background:var(--cobre);translate:-50% -50%;rotate:45deg;box-shadow:2px 2px 0 var(--cobre-hondo);transition:left .8s var(--curva-salida)}
.etiqueta{position:absolute;top:50%;left:calc(var(--en) / 35 * 100% + 15px);translate:0 -50%;font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--grafito-hondo)}
.crono-eje{grid-column:2;position:relative;height:30px;border-top:1px solid var(--linea);margin-top:4px}
.crono-eje span{position:absolute;top:0;left:calc(var(--en) / 35 * 100%);translate:-50% 0;padding-top:7px;font-family:var(--mono);font-size:11px;color:var(--tinta-suave);white-space:nowrap}
.crono-eje span::before{content:"";position:absolute;top:0;left:50%;width:1px;height:5px;background:var(--linea)}
.crono-eje span:first-child{translate:0 0}
.crono-eje span:last-child{translate:-100% 0}
.cabezal{position:absolute;top:-8px;bottom:30px;width:2px;background:var(--cobre);pointer-events:none;left:calc(var(--col) + (100% - var(--col)) * var(--dia, 0) / 35);opacity:0;transition:opacity var(--normal)}
.cronograma.corriendo .cabezal,.cronograma.quieto .cabezal{opacity:1}
.cabezal::after{content:"";position:absolute;bottom:-5px;left:50%;width:9px;height:9px;border-radius:50%;background:var(--cobre);translate:-50% 0}
.cabezal-dia{position:absolute;top:-22px;left:50%;translate:-50% 0;background:var(--cobre-accion);color:#fff;border-radius:5px;padding:1px 8px;font-family:var(--mono);font-size:11px;font-weight:500;white-space:nowrap}
.sobre-oscuro .crono-leyenda{margin-top:18px;min-height:3em;font-size:15px;color:var(--tinta-suave);max-width:60ch}
.crono-leyenda b{color:var(--grafito-hondo)}

/* ---------- preguntas ---------- */
.preguntas-in{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px, 5vw, 80px);align-items:start}
.preguntas-cabeza{position:sticky;top:120px}
.preguntas-cabeza .h-sec{margin-bottom:16px}
.preguntas-cabeza a{color:#fff;border-bottom:1px solid var(--cobre)}
.faq{interpolate-size:allow-keywords}
.faq details{border-bottom:1px solid rgba(255,255,255,.14)}
.faq summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;
  padding:19px 4px;font-family:var(--serif);font-size:clamp(1.02rem, 1.5vw, 1.2rem);font-weight:500;color:#fff;
  transition:color var(--rapido), padding var(--normal) var(--curva);
}
.faq summary::-webkit-details-marker{display:none}

.faq .mas{position:relative;flex:none;width:28px;height:28px;border:1px solid rgba(255,255,255,.3);border-radius:50%;transition:rotate var(--normal) var(--curva), background var(--rapido), border-color var(--rapido)}
.faq .mas::before,.faq .mas::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:currentColor;translate:-50% -50%}
.faq .mas::after{rotate:90deg}
.faq details[open] .mas{rotate:135deg;background:var(--cobre);border-color:var(--cobre);color:#fff}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--curva-salida), content-visibility .45s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.sobre-oscuro .faq .respuesta{margin:0 0 20px;padding-left:14px;border-left:2px solid var(--cobre);color:rgba(255,255,255,.72);max-width:64ch;font-size:14.5px}

/* ---------- Portada de las paginas interiores ----------
   Texto a la izquierda, logo a la derecha. En celular se apila y queda
   todo centrado, con el logo arriba. Lo comparten nosotros.html y
   sistemas.html: una sola definicion, para que no se vuelvan a separar. */
.portada-int{padding-block:clamp(44px,6vw,86px) clamp(48px,7vw,96px)}
.portada-int .marco{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(30px,5vw,72px);align-items:center;
}
.portada-int-texto{display:grid;justify-items:start;gap:clamp(16px,1.9vw,24px)}
.portada-int .portada-titulo{max-width:15ch}
.portada-int .lede{max-width:50ch;margin:0}
.portada-int-marca{display:grid;place-items:center}
.portada-int .marca{width:min(380px,88%);filter:drop-shadow(0 26px 60px rgba(74,134,228,.28))}
@media (max-width:900px){
  .portada-int .marco{grid-template-columns:1fr;gap:clamp(24px,5vw,36px);justify-items:center;text-align:center}
  .portada-int-marca{order:-1}
  .portada-int-texto{justify-items:center}
  .portada-int .marca{width:min(250px,56vw)}
  .portada-int .portada-titulo{max-width:16ch}
  .portada-int .lede{max-width:54ch;margin-inline:auto}
}

/* El enlace de cada producto a su propia pagina. */
.prod-mas{margin-top:.6em;font-size:13.5px}
.prod-mas a{color:var(--cobre-claro);border-bottom:1px solid rgba(224,165,116,.4)}

/* ---------- Figura de partículas de las páginas de producto ----------
   Va donde en Nosotros y Sistemas va el logo: a la derecha del texto en
   escritorio, arriba y centrada en celular. */
/* .portada-int-marca centra con place-items, asi que su hijo se ajusta al
   contenido: sin este ancho explicito, un hijo al 100% colapsa a cero y el
   lienzo queda de 1x1 px. */
.portada-int-marca > div{width:min(470px, 100%)}
.prod-figura{position:relative;width:100%;aspect-ratio:1/1}
.prod-figura canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.prod-respaldo{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.prod-respaldo[hidden]{display:none}
.prod-respaldo svg{width:min(240px,62%);height:auto;filter:drop-shadow(0 26px 60px rgba(74,134,228,.28))}
.prod-pie{margin-top:6px;text-align:center;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cobre-claro);min-height:1.2em}
@media (max-width:900px){
  /* en celular .marco centra con justify-items, asi que el padre se ajusta al
     contenido y un 100% seria circular: se mide contra el viewport. */
  .portada-int-marca > div{width:min(290px, 74vw)}
  .prod-respaldo svg{width:min(170px,54%)}
}

/* ---------- contacto ---------- */
.contacto-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.08fr);gap:clamp(24px, 3.4vw, 52px);align-items:center}
.contacto-texto .display-2{margin-bottom:16px}
.contacto-texto .directo{margin-top:22px;font-size:15px}
.directo a{font-family:var(--serif);font-size:1.5em;color:#fff;border-bottom:1px solid var(--cobre);white-space:nowrap}
.formulario{display:grid;gap:16px;padding:clamp(20px, 3vw, 32px)}
.chips-op{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip-op{position:relative;display:inline-flex}
.chip-op input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chip-op input:focus-visible + span{outline:2px solid var(--cobre);outline-offset:2px}
/* Sin esto el chip elegido no se distinguia del resto: con seleccion multiple
   hay que poder ver de un vistazo cuales estan puestas. */
.chip-op input:checked + .chip{
  background:var(--cobre);border-color:var(--cobre);color:#fff;
}
.chip-op input:checked + .chip::before{
  content:"";flex:none;width:11px;height:6px;margin-right:1px;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  rotate:-45deg;translate:0 -2px;
}
@media (hover:hover) and (pointer:fine){
  .chip-op:hover input:not(:checked) + .chip{border-color:var(--cobre)}
}
.panel-hondo .aviso-datos{font-size:12.5px;color:var(--tinta-suave);line-height:1.5;max-width:52ch}

/* el celular donde se escribe tu mensaje */
.celular-contacto{--w:232px;--t:calc(var(--w) * .1);perspective:1100px;width:var(--w);height:calc(var(--w) * 2.02);margin-inline:auto}
.celular-contacto .cel{
  transform:rotateY(calc(-18deg + var(--ry, 0deg))) rotateX(calc(5deg + var(--rx, 0deg)));
  transition:transform .8s var(--curva-salida);
  animation:flotar 7s ease-in-out infinite;
}
@keyframes flotar{50%{translate:0 -10px}}
/* mientras completás el formulario, el celular se da vuelta hacia vos */
.celular-contacto.atento .cel{transform:rotateY(calc(-4deg + var(--ry, 0deg))) rotateX(calc(2deg + var(--rx, 0deg)))}
.chat-pantalla{--fondo-pantalla:#0B141A;display:flex;flex-direction:column;font-family:var(--sans)}
.chat-cabeza{display:flex;align-items:center;gap:3.8cqw;padding:13.5cqw 4.5cqw 3.4cqw;background:#1F2C34;color:#E9EDEF}
.chat-cabeza .avatar{width:12cqw;height:12cqw;border-radius:50%;background:var(--cobre-accion);display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:5.6cqw;color:#fff;flex:none}
.chat-cabeza b{display:block;font-size:5.4cqw;line-height:1.2;font-weight:600;color:#E9EDEF}
.chat-cabeza small{display:block;font-size:4.2cqw;color:#8696A0}
.chat-cuerpo{
  flex:1;min-height:0;padding:4cqw;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:3cqw;
  background-color:#0B141A;background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);background-size:5cqw 5cqw;
}
.chat-nota{align-self:center;font-size:3.9cqw;background:#182229;color:#8696A0;border-radius:2.4cqw;padding:1cqw 3.4cqw;text-align:center}
.burbuja{position:relative;max-width:88%;background:#005C4B;color:#E9EDEF;border-radius:4cqw .8cqw 4cqw 4cqw;padding:3cqw 4cqw 7.5cqw;font-size:4.9cqw;line-height:1.42;white-space:pre-wrap;word-break:break-word}
.burbuja .hueco{color:rgba(233,237,239,.55);font-style:italic}
.burbuja small{position:absolute;right:3.4cqw;bottom:1.6cqw;font-size:3.5cqw;color:rgba(233,237,239,.6);display:flex;align-items:center;gap:1.3cqw}
.burbuja small svg{width:5cqw;height:3cqw;fill:none;stroke:#53BDEB;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.burbuja.pop{animation:globo .4s cubic-bezier(.3,1.5,.5,1)}
@keyframes globo{from{transform:scale(.92);opacity:.5}}
.escribiendo{display:none;gap:1.4cqw;background:#1F2C34;border-radius:4cqw;padding:3.6cqw 4.2cqw;align-self:flex-end}
.escribiendo.on{display:flex}
.escribiendo i{width:2.2cqw;height:2.2cqw;border-radius:50%;background:#8696A0;animation:punto 1s infinite}
.escribiendo i:nth-child(2){animation-delay:.15s}
.escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes punto{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-1.2cqw);opacity:1}}
.chat-escribir{display:flex;align-items:center;gap:2.6cqw;padding:2.6cqw 3.4cqw 6cqw;background:#0B141A}
.chat-escribir span{flex:1;background:#1F2C34;color:#8696A0;border-radius:999px;padding:2.6cqw 4.4cqw;font-size:4.4cqw}
.chat-escribir i{width:10cqw;height:10cqw;border-radius:50%;background:#00A884;flex:none}

/* ---------- pie ---------- */
.pie{padding-block:clamp(36px, 5vw, 60px) calc(28px + env(safe-area-inset-bottom, 0px));border-top:1px solid rgba(255,255,255,.12)}
.pie-grilla{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2, minmax(0,1fr));gap:24px}
.pie-celda > span{display:block;font-size:12px;color:rgba(255,255,255,.45);margin-bottom:6px}
.sobre-oscuro .pie-celda p,.pie-celda a{font-size:14.5px;color:#fff;font-weight:500}

.sobre-oscuro .pie-legal{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:rgba(255,255,255,.45);max-width:62ch}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .contacto-in{grid-template-columns:minmax(0,1fr) auto}
  .contacto-in .formulario{grid-column:1 / -1}
}
@media (max-width:1080px){
  .nav{display:none;position:absolute;top:74px;left:0;right:0;flex-direction:column;gap:0;padding:8px var(--gut) 18px;background:rgba(14,19,26,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .nav.abierto{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-grupo{display:block}
  .nav-sub{position:static;opacity:1;visibility:visible;translate:none;min-width:0;
    padding:0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none}
  .nav-sub a{padding:11px 0 11px 18px;font-size:13px;color:rgba(255,255,255,.62);
    border-bottom:1px solid rgba(255,255,255,.08)}
  .menu-boton{display:block}
  /* no se oculta: se colapsa a solo-icono de 44px para que siga estando */
  .cabecera-wa{width:44px;min-width:44px;padding:0;gap:0}
  .cabecera-wa .btn-rotulo{display:none}
  .nav-wa{display:flex !important;align-items:center;gap:9px;margin-top:6px;padding:12px 0 0 !important;border-bottom:0 !important;color:var(--whatsapp) !important;font-weight:600}
  .nav-wa svg{width:17px;height:17px;flex:none}
}
@media (max-width:920px){
  .sistemas-in,.cabeza-doble,.preguntas-in,.productos-cabeza{grid-template-columns:1fr}
  .preguntas-cabeza{position:static}
  .productos-cabeza .moneda-escena{justify-self:center;margin-bottom:12px}
  .pie-grilla{grid-template-columns:1fr 1fr}
  .pie-celda--marca{grid-column:1 / -1}
}
@media (max-width:860px){
  .portada{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-top:0}
  .portada-in{order:1}
  .portada-maqueta{order:2;margin-top:30px}
}
@media (max-width:640px){
  /* El hero crece por contenido, no por unidades de viewport: se aprieta el aire
     para que los dos botones entren en la primera pantalla. */
  .portada{padding-bottom:28px}
  .portada-titulo{font-size:clamp(38px, 10.4vw, 60px)}
  .portada .lede{margin:16px 0 16px}
  .portada .portada-dato{margin-top:18px}
  .portada-botones{gap:10px}
  .contacto-in{grid-template-columns:1fr}
  .celular-contacto{--w:200px}
  .fila{grid-template-columns:38px minmax(0,1fr)}
  .fila .icono{width:38px;height:38px}
  .precio{grid-column:2;align-items:flex-start;flex-direction:row;gap:9px;align-self:start}
  .letra-chica,.documentos{grid-template-columns:1fr}
  .crono-grilla{--col:0px;grid-template-columns:minmax(0,1fr);row-gap:2px}
  .crono-nombre{padding-top:10px}
  .crono-eje{grid-column:1}
  .crono-eje span:nth-child(even){display:none}
  .pie-grilla{grid-template-columns:1fr}
}
@media (hover:none){
  .fila:hover{transform:none;background:transparent}
  .fila:hover .icono{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .celular-contacto .cel{animation:none}
}

/* ---------- modos de precios ----------
   <html data-precios="completos|desde|sin"> elige qué se muestra; cada pieza
   dice en qué modos aparece con data-modo="...". */
html[data-precios="completos"] [data-modo]:not([data-modo~="completos"]),
html[data-precios="desde"] [data-modo]:not([data-modo~="desde"]),
html[data-precios="sin"] [data-modo]:not([data-modo~="sin"]){display:none !important}
html:not([data-precios="completos"]) .fila .precio{display:none}
html:not([data-precios="completos"]) .fila{grid-template-columns:48px minmax(0,1fr)}
@media (max-width:640px){ html:not([data-precios="completos"]) .fila{grid-template-columns:38px minmax(0,1fr)} }

/* sin columna de precios, los productos van en dos columnas para no dejar la mitad vacía */
html:not([data-precios="completos"]) .planilla{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));column-gap:clamp(24px, 4vw, 56px)}
html:not([data-precios="completos"]) .planilla .fila:last-child:nth-child(odd){grid-column:1 / -1}
/* la primera fila de cada columna no lleva línea arriba */
html[data-precios="desde"] .fila:nth-child(-n+2)::before,
html[data-precios="sin"] .fila:nth-child(2)::before{display:none}
@media (max-width:760px){
  html:not([data-precios="completos"]) .planilla{grid-template-columns:1fr}
  html[data-precios="desde"] .fila:nth-child(2)::before,
  html[data-precios="sin"] .fila:nth-child(2)::before{display:block}
}

/* Hover solo donde hay puntero fino: en tactil el :hover queda pegado tras el toque */
@media (hover:hover) and (pointer:fine){
  .nav a:hover{color:#fff;border-bottom-color:var(--cobre)}
  .fila:hover{transform:translateZ(28px);background:#fff}
  .fila:hover .icono{transform:translateZ(22px) rotateY(-24deg) scale(1.08)}
  .sobre-oscuro .documentos li:hover{color:#fff;padding-left:8px}
  .faq summary:hover{color:var(--cobre-claro);padding-left:10px}
  .pie-celda a:hover{color:var(--cobre-claro)}
}