/* ============================================================
   Sitio comercial de Gescom. CSS nativo, sin frameworks.
   Tipografía: Arial (pedido del cliente). Marca: azul marino del ícono
   (#062a57) con el azul de la mascota como único acento.
   Formas: botones en píldora; marcos dobles (bisel) de 28 px para fotos,
   capturas y tarjetas; campos 12 px. Claro y oscuro: sistema o elección.
   ============================================================ */

:root {
  --fondo: #f4f6fa;
  --fondo-2: #e9eef6;
  --sup: #ffffff;
  --sup-2: #eef2f8;
  --texto: #0c1a2c;
  --texto-2: #41536a;
  --texto-3: #5a6a80;
  --linea: rgb(12 26 44 / .09);
  --linea-2: rgb(12 26 44 / .16);
  --acento: #1d63c9;
  --acento-hover: #1654ad;
  --acento-suave: #e2ecfb;
  --acento-texto: #164f9f;
  --marino: #062a57;
  --marino-2: #0b3a73;
  --ok: #17784a;
  --ok-suave: #e2f4ea;
  --error: #b42330;
  --error-suave: #fbe7e9;
  --bisel: rgb(12 26 44 / .045);
  --bisel-borde: rgb(12 26 44 / .07);
  --brillo: inset 0 1px 1px rgb(255 255 255 / .7);
  --sombra: 0 1px 2px rgb(13 40 80 / .04), 0 12px 40px -12px rgb(13 40 80 / .14);
  --sombra-alta: 0 2px 8px rgb(13 40 80 / .06), 0 40px 80px -24px rgb(13 40 80 / .28);
  --r-bisel: 28px;
  --r-campo: 12px;
  --ancho: 1240px;
  --curva: cubic-bezier(.32, .72, 0, 1);
  --fuente: Arial, "Helvetica Neue", Helvetica, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #06111f; --fondo-2: #0a192d; --sup: #0d1f38; --sup-2: #122846;
    --texto: #e9eff8; --texto-2: #b3c1d4; --texto-3: #93a3b9;
    --linea: rgb(255 255 255 / .08); --linea-2: rgb(255 255 255 / .15);
    --acento: #5b9cf0; --acento-hover: #7cb1f5; --acento-suave: #13305a; --acento-texto: #8dbcf7;
    --marino: #04132a; --marino-2: #0a2548;
    --ok: #4fc58a; --ok-suave: #0f3326; --error: #f08a92; --error-suave: #3a1519;
    --bisel: rgb(255 255 255 / .04); --bisel-borde: rgb(255 255 255 / .08);
    --brillo: inset 0 1px 1px rgb(255 255 255 / .06);
    --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 12px 40px -12px rgb(0 0 0 / .5);
    --sombra-alta: 0 2px 8px rgb(0 0 0 / .35), 0 40px 80px -24px rgb(0 0 0 / .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #06111f; --fondo-2: #0a192d; --sup: #0d1f38; --sup-2: #122846;
  --texto: #e9eff8; --texto-2: #b3c1d4; --texto-3: #93a3b9;
  --linea: rgb(255 255 255 / .08); --linea-2: rgb(255 255 255 / .15);
  --acento: #5b9cf0; --acento-hover: #7cb1f5; --acento-suave: #13305a; --acento-texto: #8dbcf7;
  --marino: #04132a; --marino-2: #0a2548;
  --ok: #4fc58a; --ok-suave: #0f3326; --error: #f08a92; --error-suave: #3a1519;
  --bisel: rgb(255 255 255 / .04); --bisel-borde: rgb(255 255 255 / .08);
  --brillo: inset 0 1px 1px rgb(255 255 255 / .06);
  --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 12px 40px -12px rgb(0 0 0 / .5);
  --sombra-alta: 0 2px 8px rgb(0 0 0 / .35), 0 40px 80px -24px rgb(0 0 0 / .6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: var(--fuente); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acento-texto); text-underline-offset: 3px; }
a:hover { color: var(--acento); }
h1, h2, h3 { font-family: var(--fuente); color: var(--texto); margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; }
p { margin: 0; }
.ic { width: 1.25em; height: 1.25em; flex: none; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 8px; }
.saltar { position: absolute; left: -9999px; top: 8px; background: var(--sup); padding: 8px 14px; border-radius: 999px; z-index: 100; }
.saltar:focus { left: 12px; }
.cont { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 28px; }
@media (max-width: 767px) { .cont { padding: 0 16px; } body { font-size: 16px; } }

/* ── Botones: píldora con la flecha en su propio círculo ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
  font: 700 16px/1 var(--fuente); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .5s var(--curva), color .5s var(--curva), border-color .5s var(--curva), transform .4s var(--curva), box-shadow .5s var(--curva);
}
.btn:active { transform: scale(.98); }
.btn-flecha { padding-right: 7px; }
.btn-flecha .bola {
  width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center;
  background: rgb(255 255 255 / .18); transition: transform .5s var(--curva);
}
.btn-flecha .bola .ic { width: 18px; height: 18px; }
.btn-flecha:hover .bola { transform: translate(3px, -1px) scale(1.05); }
.btn-prim { background: var(--acento); color: #fff; box-shadow: 0 10px 28px -10px rgb(29 99 201 / .6); }
.btn-prim:hover { background: var(--acento-hover); color: #fff; }
:root[data-theme="dark"] .btn-prim, :root[data-theme="dark"] .btn-prim:hover { color: #04132a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-prim, :root:not([data-theme="light"]) .btn-prim:hover { color: #04132a; } }
:root[data-theme="dark"] .btn-prim .bola { background: rgb(4 19 42 / .14); }
.btn-sec { background: var(--sup); color: var(--texto); border-color: var(--linea-2); }
.btn-sec:hover { border-color: var(--acento); color: var(--acento-texto); }
.btn-sec.btn-flecha .bola { background: var(--sup-2); }
.btn-claro { background: #fff; color: #0c1a2c; }
.btn-claro:hover { background: #eef3fb; color: #0c1a2c; }
.btn-claro .bola { background: #1d63c9; color: #fff; }
.btn-chico { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn-bloque { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn > .ic { width: 20px; height: 20px; }

.btn-icono {
  width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--linea);
  background: transparent; color: var(--texto-2); display: inline-grid; place-items: center; cursor: pointer;
  transition: color .4s var(--curva), background-color .4s var(--curva);
}
.btn-icono:hover { color: var(--texto); background: var(--sup-2); }
.btn-icono .ic { width: 20px; height: 20px; }
.ic-sol { display: none; }
:root[data-theme="dark"] .ic-luna { display: none; }
:root[data-theme="dark"] .ic-sol { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ic-luna { display: none; }
  :root:not([data-theme="light"]) .ic-sol { display: block; }
}

/* ── Navegación: isla flotante ── */
.barra { position: sticky; top: 14px; z-index: 50; padding: 0 16px; }
.isla {
  max-width: var(--ancho); margin: 0 auto; height: 66px; padding: 0 10px 0 18px;
  display: flex; align-items: center; gap: 18px; border-radius: 999px;
  background: color-mix(in srgb, var(--sup) 78%, transparent);
  -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px);
  border: 1px solid var(--linea); box-shadow: var(--sombra);
}
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); font: 700 20px/1 var(--fuente); letter-spacing: -0.02em; }
.marca img { border-radius: 9px; }
.marca:hover { color: var(--texto); }
.menu { display: flex; gap: 2px; margin-left: 8px; }
.menu a { color: var(--texto-2); text-decoration: none; font-size: 15.5px; padding: 9px 14px; border-radius: 999px; transition: color .4s var(--curva), background-color .4s var(--curva); }
.menu a:hover { color: var(--texto); background: var(--sup-2); }
.menu a[aria-current="page"] { color: var(--texto); background: var(--sup-2); font-weight: 700; }
.barra-acc { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hamburguesa { display: none; position: relative; }
.hamburguesa span { position: absolute; left: 12px; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .5s var(--curva), opacity .3s var(--curva); }
.hamburguesa span:nth-child(1) { top: 15px; }
.hamburguesa span:nth-child(2) { top: 20px; }
.hamburguesa span:nth-child(3) { top: 25px; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.cortina {
  position: fixed; inset: 0; z-index: 40; padding: 110px 24px 32px; display: flex; flex-direction: column; gap: 4px;
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--curva), visibility .5s;
}
.cortina.abierta { opacity: 1; visibility: visible; }
.cortina a { font: 700 30px/1.2 var(--fuente); color: var(--texto); text-decoration: none; padding: 10px 4px; letter-spacing: -0.02em;
  transform: translateY(24px); opacity: 0; transition: transform .6s var(--curva), opacity .6s var(--curva); }
.cortina.abierta a { transform: none; opacity: 1; }
.cortina.abierta a:nth-child(2) { transition-delay: .04s; } .cortina.abierta a:nth-child(3) { transition-delay: .08s; }
.cortina.abierta a:nth-child(4) { transition-delay: .12s; } .cortina.abierta a:nth-child(5) { transition-delay: .16s; }
.cortina.abierta a:nth-child(6) { transition-delay: .2s; } .cortina.abierta a:nth-child(7) { transition-delay: .24s; }
@media (max-width: 1000px) {
  .menu { display: none; }
  .hamburguesa { display: inline-grid; }
}
@media (max-width: 480px) { .isla { padding-left: 14px; gap: 8px; } .barra-acc .btn-chico { padding: 0 14px; } .barra-acc #btnTema { display: none; } }

/* ── Marco doble (bisel): la pieza se asienta en una bandeja ── */
.bisel { padding: 8px; border-radius: var(--r-bisel); background: var(--bisel); border: 1px solid var(--bisel-borde); }
.bisel-in { border-radius: calc(var(--r-bisel) - 8px); overflow: hidden; background: var(--sup); box-shadow: var(--brillo), var(--sombra); }
.bisel-in > img { width: 100%; }
.foto .bisel-in { position: relative; }
.foto .bisel-in > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Ventana de aplicación dentro del bisel */
.ventana-barra { height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: var(--sup-2); border-bottom: 1px solid var(--linea); }
.ventana-barra i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.ventana-barra i:nth-child(1) { background: #ff5f57; } .ventana-barra i:nth-child(2) { background: #febc2e; } .ventana-barra i:nth-child(3) { background: #28c840; }

/* ── Etiquetas y títulos ── */
.etiqueta { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--acento-suave); color: var(--acento-texto); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.sec { padding: 120px 0; }
.sec-t { font-size: clamp(32px, 4.2vw, 52px); max-width: 17ch; }
.sec-p { color: var(--texto-2); font-size: 19px; max-width: 56ch; margin-top: 18px; }
.cabeza { margin-bottom: 56px; }
@media (max-width: 767px) { .sec { padding: 80px 0; } .cabeza { margin-bottom: 36px; } .sec-p { font-size: 17px; } }

/* ── Hero con cascada ── */
.hero { position: relative; padding: 72px 0 96px; }
.hero::before {
  content: ""; position: absolute; inset: -140px 0 auto 38%; height: 820px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(closest-side at 40% 40%, color-mix(in srgb, var(--acento) 20%, transparent), transparent),
    radial-gradient(closest-side at 75% 65%, color-mix(in srgb, var(--marino-2) 22%, transparent), transparent);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(38px, 4.3vw, 58px); line-height: 1.04; letter-spacing: -0.04em; max-width: 17ch; }
.hero-p { font-size: 20px; color: var(--texto-2); margin-top: 24px; max-width: 32ch; }
.hero-acc { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.cascada { position: relative; padding: 0 0 80px 70px; }
.cascada .c-foto { transform: rotate(2deg); }
.cascada .c-foto .bisel-in { aspect-ratio: 16 / 11; }
.cascada .c-app { position: absolute; left: 0; bottom: 0; width: 68%; transform: rotate(-2.5deg); }
.cascada .c-app .bisel-in { box-shadow: var(--brillo), var(--sombra-alta); }
.cascada .c-app img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero h1 { max-width: 14ch; }
}
@media (max-width: 767px) {
  .hero { padding: 40px 0 56px; }
  .hero-p { font-size: 18px; }
  .cascada { padding: 0; }
  .cascada .c-foto, .cascada .c-app { transform: none; }
  .cascada .c-app { position: static; width: 100%; margin-top: 16px; }
}

/* ── Cabecera de páginas internas: texto + foto ── */
.cab-pag { padding: 64px 0 24px; }
.cab-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.cab-pag h1 { font-size: clamp(38px, 4.8vw, 60px); letter-spacing: -0.035em; max-width: 15ch; }
.cab-pag .sec-p { margin-top: 20px; }
.cab-pag .foto .bisel-in { aspect-ratio: 4 / 3; }
.cab-pag .foto { transform: rotate(1.5deg); }
@media (max-width: 900px) { .cab-grid { grid-template-columns: 1fr; gap: 32px; } .cab-pag .foto { transform: none; } }
@media (max-width: 767px) { .cab-pag { padding: 36px 0 8px; } }

/* ── Rubros: bento con fotos ── */
.rubros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 250px; gap: 16px; }
.rubro-foto { position: relative; border-radius: var(--r-bisel); overflow: hidden; background: var(--sup-2); isolation: isolate; }
.rubro-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); z-index: -2; }
.rubro-foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgb(34 19 8 / .8)); }
.rubro-foto:hover img { transform: scale(1.04); }
.rubro-foto div { position: absolute; left: 22px; right: 22px; bottom: 20px; color: #fff; }
.rubro-foto b { display: block; font-size: 21px; letter-spacing: -0.01em; }
.rubro-foto span { font-size: 15px; color: rgb(255 255 255 / .88); }
.rubro-foto.grande { grid-column: span 2; grid-row: span 2; }
.rubro-foto.grande b { font-size: 28px; }
@media (max-width: 1023px) { .rubros { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; } }
@media (max-width: 640px) { .rubros { grid-template-columns: 1fr; } .rubro-foto.grande { grid-column: span 1; grid-row: span 1; } }

/* ── Dividido: texto + pieza visual ── */
.dividido { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.dividido.inverso { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.dividido.inverso > :first-child { order: 2; }
.dividido h2 { font-size: clamp(30px, 3.6vw, 44px); max-width: 16ch; }
.dividido .sec-p { font-size: 18px; }
.puntos { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 16px; }
.puntos li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.puntos .pto-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento-texto); }
.puntos .pto-ic .ic { width: 21px; height: 21px; }
.puntos b { display: block; font-size: 17px; }
.puntos span { color: var(--texto-2); font-size: 16px; }
.superpuesta { position: relative; padding-bottom: 40px; }
.superpuesta .mini { position: absolute; width: 40%; right: -18px; bottom: 0; transform: rotate(3deg); }
.superpuesta .mini .bisel-in { aspect-ratio: 4 / 3; }
@media (max-width: 1023px) {
  .dividido, .dividido.inverso { grid-template-columns: 1fr; gap: 40px; }
  .dividido.inverso > :first-child { order: 0; }
}
@media (max-width: 767px) { .superpuesta { padding-bottom: 0; } .superpuesta .mini { position: static; width: 100%; transform: none; margin-top: 14px; } }

/* ── Recorrido de pantallas ── */
.recorrido-pest { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; padding: 6px; border-radius: 999px; background: var(--bisel); border: 1px solid var(--bisel-borde); width: max-content; max-width: 100%; }
.recorrido-pest button {
  font: 700 15px/1 var(--fuente); padding: 12px 18px; border-radius: 999px; cursor: pointer;
  border: 0; background: transparent; color: var(--texto-2); transition: background-color .5s var(--curva), color .5s var(--curva);
}
.recorrido-pest button[aria-selected="true"] { background: var(--sup); color: var(--texto); box-shadow: var(--sombra); }
.panel-rec[hidden] { display: none; }
.panel-rec { animation: aparece .6s var(--curva) both; margin: 0; }
.panel-rec figcaption { margin-top: 18px; color: var(--texto-2); max-width: 70ch; }
@keyframes aparece { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
  .recorrido-pest { flex-wrap: nowrap; overflow-x: auto; width: 100%; border-radius: 22px; }
  .recorrido-pest button { flex: none; }
}

/* ── Franja marina ── */
.franja { background: var(--marino); color: #dfe8f5; border-radius: 36px; padding: 72px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; position: relative; overflow: hidden; }
.franja::before { content: ""; position: absolute; inset: auto -10% -60% 40%; height: 480px; background: radial-gradient(closest-side, rgb(91 156 240 / .22), transparent); pointer-events: none; }
.franja h2 { color: #fff; font-size: clamp(30px, 3.6vw, 46px); max-width: 14ch; }
.franja .sec-p { color: #b9c8dd; }
.hechos { display: grid; gap: 28px; align-content: center; position: relative; }
.hecho { display: grid; grid-template-columns: 48px 1fr; gap: 16px; }
.hecho-ico { width: 48px; height: 48px; border-radius: 14px; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .12); display: grid; place-items: center; color: #8dbcf7; }
.hecho-ico .ic { width: 24px; height: 24px; }
.hecho b { display: block; color: #fff; font-size: 18px; margin-bottom: 4px; }
.hecho span { color: #b9c8dd; font-size: 16px; }
@media (max-width: 1023px) { .franja { grid-template-columns: 1fr; padding: 48px 32px; gap: 40px; } }
@media (max-width: 767px) { .franja { padding: 36px 20px; border-radius: 26px; } }

/* ── Tarjetas en bisel ── */
.tarjetas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.tarjeta { grid-column: span 6; }
.tarjeta .bisel-in { height: 100%; padding: 30px; display: flex; flex-direction: column; }
.tarjeta h3 { font-size: 22px; margin-bottom: 8px; }
.tarjeta p { color: var(--texto-2); font-size: 16px; }
.tarjeta .ic-grande { width: 34px; height: 34px; color: var(--acento-texto); margin-bottom: 18px; }
.tarjeta .t-img { margin-top: auto; padding-top: 24px; }
.tarjeta .t-img img { border-radius: 14px; border: 1px solid var(--linea); aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.tarjeta a.mas { margin-top: 16px; font-weight: 700; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.t-4 { grid-column: span 4; } .t-5 { grid-column: span 5; } .t-7 { grid-column: span 7; } .t-8 { grid-column: span 8; } .t-12 { grid-column: span 12; }
.tarjeta.marina .bisel-in { background: var(--marino); color: #dfe8f5; }
.tarjeta.marina h3 { color: #fff; } .tarjeta.marina p { color: #b9c8dd; } .tarjeta.marina .ic-grande { color: #8dbcf7; }
.tarjeta.tinte .bisel-in { background: linear-gradient(160deg, var(--acento-suave), var(--sup) 65%); }
@media (max-width: 1023px) { .tarjeta, .t-4, .t-5, .t-7, .t-8 { grid-column: span 6; } .t-12 { grid-column: span 12; } }
@media (max-width: 767px) { .tarjetas { grid-template-columns: 1fr; } .tarjeta, .t-4, .t-5, .t-7, .t-8, .t-12 { grid-column: span 1; } .tarjeta .bisel-in { padding: 24px; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chips span { font-size: 14px; padding: 7px 13px; border-radius: 999px; background: var(--sup-2); color: var(--texto-2); border: 1px solid var(--linea); }
.tarjeta.marina .chips span { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .1); color: #cfdaea; }

/* Galería de informes: tres capturas escalonadas */
.galeria { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px; }
.galeria .g-der { display: grid; gap: 18px; }
.galeria img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
@media (max-width: 900px) { .galeria { grid-template-columns: 1fr; } }

/* Módulos */
.modulos-lista { display: grid; gap: 22px; }
.modulo-fila .bisel-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding: 0; }
.modulo-fila:nth-child(even) .bisel-in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.modulo-fila:nth-child(even) .m-foto { order: 2; }
.modulo-fila .m-foto { min-height: 340px; position: relative; }
.modulo-fila .m-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.modulo-fila .m-txt { padding: 44px; display: flex; flex-direction: column; gap: 12px; }
.modulo-fila .m-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento-texto); }
.modulo-fila .m-ic .ic { width: 26px; height: 26px; }
.modulo-fila h3 { font-size: 30px; }
.modulo-fila p { color: var(--texto-2); }
.modulo-fila ul { margin: 6px 0 0; padding-left: 20px; color: var(--texto-2); display: grid; gap: 6px; }
.m-precio { margin-top: auto; padding-top: 18px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.m-precio b { font-size: 36px; letter-spacing: -0.03em; }
.m-precio span { color: var(--texto-3); font-size: 15px; }
@media (max-width: 900px) {
  .modulo-fila .bisel-in, .modulo-fila:nth-child(even) .bisel-in { grid-template-columns: 1fr; }
  .modulo-fila:nth-child(even) .m-foto { order: 0; }
  .modulo-fila .m-foto { min-height: 230px; } .modulo-fila .m-txt { padding: 28px; }
}
.mods-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mod-mini .bisel-in { padding: 22px 24px; display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center; }
.mod-mini .mm-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento-texto); }
.mod-mini .mm-ic .ic { width: 24px; height: 24px; }
.mod-mini b { display: block; font-size: 18px; }
.mod-mini small { color: var(--texto-3); font-size: 14.5px; }
.mod-mini .mm-precio { text-align: right; font-weight: 700; font-size: 19px; white-space: nowrap; }
.mod-mini .mm-precio small { display: block; font-weight: 400; font-size: 12.5px; }
@media (max-width: 900px) { .mods-mini { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .mod-mini .bisel-in { grid-template-columns: 44px 1fr; } .mod-mini .mm-precio { grid-column: 2; text-align: left; } }

/* ── Planes ── */
.planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.plan .bisel-in { height: 100%; padding: 40px; display: flex; flex-direction: column; }
.plan-dest.bisel { background: color-mix(in srgb, var(--acento) 14%, transparent); border-color: color-mix(in srgb, var(--acento) 35%, transparent); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan h3 { font-size: 28px; }
.plan-sello { font-size: 13px; font-weight: 700; color: var(--acento-texto); background: var(--acento-suave); padding: 7px 13px; border-radius: 999px; }
.plan-para { color: var(--texto-2); margin-top: 10px; }
.plan-precio { margin: 28px 0 6px; font-size: 48px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.plan-precio small { font-size: 16px; font-weight: 400; color: var(--texto-3); letter-spacing: 0; margin-left: 6px; }
.plan-precio.cotizar { font-size: 32px; }
.plan-extra { color: var(--texto-3); font-size: 15px; min-height: 24px; }
.plan ul { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; gap: 13px; }
.plan li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.plan li .ic { width: 20px; height: 20px; color: var(--ok); margin-top: 3px; }
.plan li.no, .plan li.no .ic { color: var(--texto-3); }
.plan .btn { margin-top: auto; }
.nota-precios { margin-top: 22px; color: var(--texto-3); font-size: 15px; }
@media (max-width: 900px) { .planes { grid-template-columns: 1fr; } .plan .bisel-in { padding: 30px; } }

/* ── Pasos ── */
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.paso .bisel-in { padding: 30px; height: 100%; }
.paso .ic { width: 32px; height: 32px; color: var(--acento-texto); margin-bottom: 16px; }
.paso h3 { font-size: 21px; margin-bottom: 8px; }
.paso p { color: var(--texto-2); font-size: 16px; }
@media (max-width: 900px) { .pasos { grid-template-columns: 1fr; } }

/* ── Preguntas ── */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--linea-2); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 48px 24px 0; position: relative; font-size: 19px; font-weight: 700; color: var(--texto); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 10px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid var(--texto-3); border-bottom: 2px solid var(--texto-3); transform: rotate(45deg); transition: transform .5s var(--curva); }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { color: var(--texto-2); padding: 0 0 24px; max-width: 70ch; }

/* ── Llamado final con foto ── */
.final { position: relative; border-radius: 36px; overflow: hidden; isolation: isolate; padding: 96px 72px; color: #fff; }
.final > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* velo suave: oscurece solo lo justo detrás del texto para que la foto se vea entera; la sombra del texto hace el resto */
.final::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgb(30 17 7 / .74) 0%, rgb(30 17 7 / .55) 34%, rgb(30 17 7 / .14) 58%, rgb(30 17 7 / 0) 80%); }
.final h2, .final p { text-shadow: 0 2px 18px rgb(0 0 0 / .5), 0 1px 3px rgb(0 0 0 / .35); }
.final h2 { color: #fff; font-size: clamp(32px, 4vw, 50px); max-width: 15ch; }
.final p { color: rgb(255 255 255 / .96); margin-top: 16px; max-width: 44ch; font-size: 18px; }
.final .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 767px) { .final { padding: 56px 24px; border-radius: 26px; } .final::after { background: linear-gradient(180deg, rgb(30 17 7 / .5), rgb(30 17 7 / .62)); } }

/* ── Pie ── */
.pie { margin-top: 120px; border-top: 1px solid var(--linea); background: var(--fondo-2); }
.pie-in { max-width: var(--ancho); margin: 0 auto; padding: 64px 28px 36px; display: grid; grid-template-columns: 1.5fr 1.7fr 1fr 1.3fr; gap: 32px; }
/* Soluciones del pie en 2 columnas parejas: se llena hacia abajo y sigue en la segunda */
.pie-sol-lista { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); grid-template-rows: repeat(var(--filas, 5), auto); grid-auto-flow: column; gap: 11px 36px; }
.pie-in > div { display: flex; flex-direction: column; gap: 11px; }
.pie-in a { color: var(--texto-2); text-decoration: none; font-size: 15px; }
.pie-in a:hover { color: var(--texto); }
.pie-marca p { color: var(--texto-3); font-size: 15px; max-width: 34ch; margin-top: 6px; }
.pie-t { font-size: 14px; color: var(--texto); letter-spacing: 0; margin-bottom: 4px; }
.pie-legal { max-width: var(--ancho); margin: 0 auto; padding: 18px 28px 34px; color: var(--texto-3); font-size: 13.5px; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
@media (max-width: 900px) { .pie-in { grid-template-columns: 1fr 1fr; } .pie-marca, .pie-sol { grid-column: 1 / -1; } }
@media (max-width: 767px) { .pie { margin-top: 80px; } .pie-in, .pie-legal { padding-left: 16px; padding-right: 16px; } }

/* ── Formularios (contratar, clientes) ── */
.pagina-t { padding: 56px 0 8px; }
.pagina-t h1 { font-size: clamp(34px, 4.6vw, 56px); max-width: 20ch; letter-spacing: -0.035em; }
.pagina-t p { color: var(--texto-2); font-size: 19px; margin-top: 14px; max-width: 60ch; }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo label, .etq { font-weight: 700; font-size: 15px; color: var(--texto); }
.campo .ayuda { font-size: 13.5px; color: var(--texto-3); }
.campo .err { font-size: 13.5px; color: var(--error); }
.entrada, select.entrada, textarea.entrada {
  width: 100%; height: 50px; padding: 0 14px; border-radius: var(--r-campo);
  border: 1px solid var(--linea-2); background: var(--sup); color: var(--texto);
  font: 400 16px/1.2 var(--fuente); transition: border-color .3s var(--curva), box-shadow .3s var(--curva);
}
textarea.entrada { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.entrada::placeholder { color: var(--texto-3); opacity: 1; }
.entrada:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 22%, transparent); }
.entrada[aria-invalid="true"] { border-color: var(--error); }
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.rejilla .ancho { grid-column: 1 / -1; }
@media (max-width: 640px) { .rejilla { grid-template-columns: 1fr; } }

.aviso { border-radius: 14px; padding: 14px 18px; display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; margin-bottom: 18px; }
.aviso .ic { width: 22px; height: 22px; margin-top: 1px; }
.aviso-error { background: var(--error-suave); color: var(--error); }
.aviso-ok { background: var(--ok-suave); color: var(--ok); }
.aviso-info { background: var(--acento-suave); color: var(--acento-texto); }

.config { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 36px; align-items: start; padding-top: 36px; }
.bloque { background: var(--sup); border: 1px solid var(--linea); border-radius: 24px; padding: 30px; box-shadow: var(--brillo); }
.bloque + .bloque { margin-top: 20px; }
.bloque h2 { font-size: 23px; margin-bottom: 6px; }
.bloque > p { color: var(--texto-2); margin-bottom: 20px; }
.opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion .caja { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px; border-radius: 18px; border: 1.5px solid var(--linea-2); background: var(--sup); transition: border-color .4s var(--curva), background-color .4s var(--curva), box-shadow .4s var(--curva); }
.opcion .caja b { font-size: 18px; color: var(--texto); display: flex; align-items: center; gap: 10px; }
.opcion .caja b .ic { color: var(--acento-texto); }
.opcion .caja span { color: var(--texto-2); font-size: 14.5px; }
.opcion .caja em { font-style: normal; font-weight: 700; color: var(--texto); font-size: 15px; margin-top: auto; padding-top: 6px; }
.opcion input:checked + .caja { border-color: var(--acento); background: var(--acento-suave); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent); }
.opcion input:focus-visible + .caja { outline: 3px solid var(--acento); outline-offset: 2px; }
.opcion .marca-check { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--linea-2); background: var(--sup); display: grid; place-items: center; }
.opcion .marca-check .ic { width: 14px; height: 14px; color: #fff; opacity: 0; }
.opcion input:checked ~ .marca-check { background: var(--acento); border-color: var(--acento); }
.opcion input:checked ~ .marca-check .ic { opacity: 1; }
.opcion.mod .caja { padding-right: 52px; }
@media (max-width: 640px) { .opciones { grid-template-columns: 1fr; } .bloque { padding: 22px; } }
.contador { display: inline-flex; align-items: center; border: 1px solid var(--linea-2); border-radius: 999px; background: var(--sup); }
.contador button { width: 48px; height: 48px; border: 0; background: none; color: var(--texto); cursor: pointer; display: grid; place-items: center; border-radius: 999px; }
.contador button:hover { background: var(--sup-2); }
.contador output { min-width: 44px; text-align: center; font-size: 21px; font-weight: 700; }
.resumen { position: sticky; top: 104px; }
.resumen .bisel-in { padding: 28px; }
.resumen h2 { font-size: 21px; margin-bottom: 16px; }
.resumen dl { margin: 0; display: grid; gap: 12px; }
.resumen .fila { display: flex; justify-content: space-between; gap: 16px; font-size: 15.5px; }
.resumen dt { color: var(--texto-2); }
.resumen dd { margin: 0; font-weight: 700; text-align: right; }
.resumen .total { border-top: 1px solid var(--linea-2); padding-top: 16px; margin-top: 8px; }
.resumen .total dt { color: var(--texto); font-weight: 700; }
.resumen .total dd { font-size: 26px; }
.resumen .nota { font-size: 13.5px; color: var(--texto-3); margin-top: 14px; }
.resumen .btn { margin-top: 20px; }
@media (max-width: 1023px) { .config { grid-template-columns: 1fr; } .resumen { position: static; } }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 15px; color: var(--texto-2); font-weight: 400 !important; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--acento); }
.trampa { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.listo { max-width: 640px; margin: 48px auto 0; text-align: center; }
.listo .bisel-in { padding: 48px 32px; }
.listo .ic-ok { width: 56px; height: 56px; color: var(--ok); margin: 0 auto 18px; }
.listo h1 { font-size: clamp(28px, 4vw, 40px); }
.listo p { color: var(--texto-2); margin-top: 12px; }
.listo ol { text-align: left; margin: 28px auto 0; max-width: 440px; color: var(--texto-2); display: grid; gap: 10px; padding-left: 22px; }

/* Área de clientes */
.acceso { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; padding-top: 36px; align-items: start; }
.acceso .bloque h2 { font-size: 24px; }
.acceso form { display: grid; gap: 18px; }
@media (max-width: 900px) { .acceso { grid-template-columns: 1fr; } }
.panel-cli { padding-top: 36px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 22px; align-items: start; }
.panel-cli .bloque h2 { font-size: 22px; margin-bottom: 16px; }
.dato { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--linea); font-size: 15.5px; align-items: center; }
.dato:last-child { border-bottom: 0; }
.dato span { color: var(--texto-2); }
.dato b { text-align: right; }
.serial { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; }
.chip { display: inline-block; font-size: 13.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--acento-suave); color: var(--acento-texto); margin: 0 6px 6px 0; }
.chip-ok { background: var(--ok-suave); color: var(--ok); }
.chip-mal { background: var(--error-suave); color: var(--error); }
.descargas { display: grid; gap: 12px; }
.descarga { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 16px; border-radius: 18px; border: 1px solid var(--linea); text-decoration: none; color: var(--texto); background: var(--sup); transition: border-color .4s var(--curva), background-color .4s var(--curva); }
.descarga:hover { border-color: var(--acento); color: var(--texto); background: var(--acento-suave); }
.descarga > .ic { width: 28px; height: 28px; }
.descarga .ic-flecha { width: 20px; height: 20px; color: var(--texto-3); }
.descarga b { display: block; }
.descarga small { color: var(--texto-3); font-size: 13.5px; }
.equipo { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.equipo:last-child { border-bottom: 0; }
.equipo small { color: var(--texto-3); grid-column: 1 / -1; font-size: 13.5px; }
@media (max-width: 900px) { .panel-cli { grid-template-columns: 1fr; } }

/* Soporte */
.guias { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.guia { grid-column: span 4; }
.guia .bisel-in { padding: 30px; height: 100%; }
.guia-ancha { grid-column: span 8; }
.guia.marina .bisel-in { background: var(--marino); color: #dfe8f5; }
.guia.marina h3 { color: #fff; } .guia.marina p, .guia.marina li { color: #b9c8dd; } .guia.marina .ic-grande { color: #8dbcf7; }
.guia .ic-grande { width: 32px; height: 32px; color: var(--acento-texto); margin-bottom: 14px; }
.guia h3 { font-size: 21px; margin-bottom: 8px; }
.guia p { color: var(--texto-2); font-size: 16px; }
.guia ol, .guia ul { margin: 14px 0 0; padding-left: 20px; color: var(--texto-2); font-size: 16px; display: grid; gap: 7px; }
.guia .btn { margin-top: 20px; }
@media (max-width: 1023px) { .guia, .guia-ancha { grid-column: span 6; } }
@media (max-width: 767px) { .guia, .guia-ancha { grid-column: span 12; } }
.nov-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; }
@media (max-width: 900px) { .nov-grid { grid-template-columns: 1fr; gap: 28px; } }
.novedades { display: grid; border-left: 2px solid var(--linea-2); margin-left: 8px; }
.novedad { position: relative; padding: 0 0 30px 28px; }
.novedad::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--sup); border: 2px solid var(--acento); }
.novedad b { font-size: 18px; }
.novedad ul { margin: 8px 0 0; padding-left: 18px; color: var(--texto-2); display: grid; gap: 6px; }

/* Capturas: se ve la del tema activo (si no hay oscura, queda la clara) */
.img-oscuro { display: none; }
:root[data-theme="dark"] .img-claro:has(+ .img-oscuro) { display: none; }
:root[data-theme="dark"] .img-oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .img-claro:has(+ .img-oscuro) { display: none; }
  :root:not([data-theme="light"]) .img-oscuro { display: block; }
}

/* ── Entrada al hacer scroll: subida lenta y pesada (solo sin «reducir movimiento») ── */
@media (prefers-reduced-motion: no-preference) {
  .revela { opacity: 0; transform: translateY(40px); filter: blur(6px); transition: opacity .9s var(--curva), transform .9s var(--curva), filter .9s var(--curva); }
  .revela.visto { opacity: 1; transform: none; filter: none; }
  .hero-anim > * { animation: sube .9s var(--curva) both; }
  .hero-anim > *:nth-child(2) { animation-delay: .08s; }
  .hero-anim > *:nth-child(3) { animation-delay: .16s; }
  .cascada { animation: sube 1.1s .12s var(--curva) both; }
  @keyframes sube { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panel-rec, .cascada { animation: none; }
  .rubro-foto img { transition: none; }
}

/* ── Equipos ── */
.eq-foto { aspect-ratio: 4 / 3; background: #fff; overflow: hidden; }
.eq-foto img { width: 100%; height: 100%; object-fit: cover; }
.kit .bisel-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
.kit-foto { background: #fff; height: 100%; min-height: 360px; position: relative; }
.kit-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kit-txt { padding: 48px; }
.kit-txt h2 { font-size: clamp(28px, 3.2vw, 40px); max-width: 16ch; }
.kit-txt p { color: var(--texto-2); margin-top: 14px; font-size: 18px; }
@media (max-width: 900px) { .kit .bisel-in { grid-template-columns: 1fr; } .kit-foto { min-height: 240px; } .kit-txt { padding: 28px; } }
.items-cot { display: grid; gap: 12px; }
.item-cot { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: center; padding: 10px; border: 1px solid var(--linea); border-radius: 18px; background: var(--sup); }
.item-cot .ic-foto { width: 96px; height: 72px; border-radius: 12px; overflow: hidden; background: #fff; }
.item-cot .ic-foto img { width: 100%; height: 100%; object-fit: cover; }
.item-cot b { display: block; font-size: 16.5px; }
.item-cot small { color: var(--texto-3); font-size: 14px; }
.item-cot .contador button { width: 42px; height: 42px; }
.item-cot.activo { border-color: var(--acento); background: var(--acento-suave); }
@media (max-width: 560px) { .item-cot { grid-template-columns: 72px 1fr; } .item-cot .ic-foto { width: 72px; height: 56px; } .item-cot .contador { grid-column: 1 / -1; justify-self: end; } }

.eq-blanco { background: #fff; }
.eq-blanco img, .eq-foto-kit img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.eq-foto-kit { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--linea); }
.eq-foto img { object-fit: contain; }
.eq-vacia { aspect-ratio: 4 / 3; display: grid; place-items: center; color: var(--texto-3); background: var(--sup-2); }
.eq-vacia .ic { width: 48px; height: 48px; }
.eq-cuerpo { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.eq-cuerpo p { font-size: 15.5px; }
.eq-pie { margin-top: auto; padding-top: 16px; display: grid; gap: 14px; }
.eq-precio b { font-size: 26px; letter-spacing: -0.02em; }
.eq-precio span { display: block; font-size: 13px; color: var(--texto-3); }
.eq-botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.eq-tienda { color: var(--texto-2); text-decoration: none; padding: 0 12px; }
.eq-tienda:hover { color: var(--acento-texto); }
.eq-tienda .ic { width: 16px; height: 16px; }
.ic-precio { display: block; font-style: normal; font-weight: 700; font-size: 14px; color: var(--acento-texto); margin-top: 2px; }
.dividido .eq-pie { max-width: 420px; }
.item-cot .ic-foto img { object-fit: contain; }
.kit-foto img { object-fit: contain; }

/* ── Menú «Soluciones» desplegable ── */
.desplegable { position: relative; }
.menu-btn { font: inherit; font-size: 15.5px; color: var(--texto-2); background: none; border: 0; cursor: pointer; padding: 9px 12px 9px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; transition: color .4s var(--curva), background-color .4s var(--curva); }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { color: var(--texto); background: var(--sup-2); }
.menu-btn.activo { color: var(--texto); font-weight: 700; }
.menu-btn .ic-caret { width: 14px; height: 14px; transition: transform .4s var(--curva); }
.menu-btn[aria-expanded="true"] .ic-caret { transform: rotate(180deg); }
.panel-sol {
  position: absolute; top: calc(100% + 14px); left: -12px; width: 560px; padding: 10px; border-radius: 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: color-mix(in srgb, var(--sup) 96%, transparent); border: 1px solid var(--linea); box-shadow: var(--sombra-alta);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.panel-sol[hidden] { display: none; }
.sol-item { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 12px; border-radius: 16px; text-decoration: none; color: var(--texto); transition: background-color .3s var(--curva); }
.sol-item:hover, .sol-item[aria-current="page"] { background: var(--sup-2); color: var(--texto); }
.sol-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento-texto); }
.sol-ic .ic { width: 21px; height: 21px; }
.sol-item b { display: block; font-size: 15px; }
.sol-item small { display: block; color: var(--texto-3); font-size: 13px; line-height: 1.4; margin-top: 2px; }

/* Barra del producto (páginas de un producto con varias secciones) */
.subnav { max-width: var(--ancho); margin: 8px auto 0; }
.subnav-in { display: flex; gap: 4px; width: max-content; max-width: 100%; overflow-x: auto; padding: 5px; border-radius: 999px; background: color-mix(in srgb, var(--sup) 82%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--linea); box-shadow: var(--sombra); margin: 0 auto; }
.subnav a { flex: none; font-size: 14.5px; padding: 8px 14px; border-radius: 999px; color: var(--texto-2); text-decoration: none; white-space: nowrap; }
.subnav a:hover { color: var(--texto); background: var(--sup-2); }
.subnav a[aria-current="page"] { background: var(--texto); color: var(--fondo); font-weight: 700; }

.cortina { overflow-y: auto; }
.cortina-t { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); margin: 14px 4px 2px; }
.cortina a.cortina-sol { font-size: 22px; padding: 6px 4px; }
.pie-dir { color: var(--texto-3); font-size: 15px; }

/* ── Portada de Cidsoft: soluciones ── */
.soluciones { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.solucion { grid-column: span 2; position: relative; border-radius: var(--r-bisel); overflow: hidden; min-height: 330px; isolation: isolate; color: #fff; text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; }
.solucion.ancha { grid-column: span 3; min-height: 380px; }
.solucion > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--curva); }
.solucion::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(34 19 8 / .04) 30%, rgb(30 16 6 / .86)); }
.solucion:hover > img { transform: scale(1.04); }
.solucion .s-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); margin-bottom: 14px; }
.solucion .s-ic .ic { width: 23px; height: 23px; }
.solucion h3 { color: #fff; font-size: 24px; }
.solucion p { color: rgb(255 255 255 / .88); font-size: 15.5px; margin-top: 6px; max-width: 40ch; }
.solucion .s-mas { margin-top: 14px; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.solucion .s-mas .ic { width: 18px; height: 18px; transition: transform .5s var(--curva); }
.solucion:hover .s-mas .ic { transform: translateX(4px); }
.solucion .sello { position: absolute; top: 18px; right: 18px; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: rgb(255 255 255 / .9); color: #0c1a2c; }
@media (max-width: 1023px) { .soluciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } .solucion, .solucion.ancha { grid-column: span 1; min-height: 300px; } }
@media (max-width: 640px) { .soluciones { grid-template-columns: 1fr; } }

.valores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.valor .bisel-in { padding: 28px; height: 100%; }
.valor .ic { width: 30px; height: 30px; color: var(--acento-texto); margin-bottom: 14px; }
.valor h3 { font-size: 20px; margin-bottom: 6px; }
.valor p { color: var(--texto-2); font-size: 15.5px; }
@media (max-width: 1023px) { .valores { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .valores { grid-template-columns: 1fr; } }

.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linea-2); }
.cifra { padding: 26px 20px 0 0; }
.cifra b { display: block; font-size: clamp(34px, 4vw, 48px); letter-spacing: -0.03em; }
.cifra span { color: var(--texto-2); }
@media (max-width: 767px) { .cifras { grid-template-columns: 1fr 1fr; } }

/* ── Páginas de producto ── */
.cap-oscura .bisel-in { background: #0b1220; }
.galeria-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.galeria-3 figure { margin: 0; }
.galeria-3 figcaption { margin-top: 12px; color: var(--texto-2); font-size: 15px; }
.galeria-3 .bisel-in img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
@media (max-width: 900px) { .galeria-3 { grid-template-columns: 1fr; } }
.para-quien { display: flex; flex-wrap: wrap; gap: 10px; }
.para-quien span { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 12px; border-radius: 999px; background: var(--sup); border: 1px solid var(--linea); font-size: 15px; }
.para-quien .ic { color: var(--acento-texto); width: 20px; height: 20px; }
.movil-par { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
.movil-par .bisel-in img { width: 100%; }
.movil { max-width: 340px; margin: 0 auto; border-radius: 40px; }
.movil .bisel-in { border-radius: 32px; }
.panel-sol { width: 600px; }

/* ── Privacidad (Ley 21.719): aviso junto a los formularios y página de la política ── */
.opc { font-weight: 400; color: var(--texto-3); font-size: .9em; }
.aviso-datos { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; padding: 12px 14px;
  border-radius: var(--r-campo); background: var(--sup-2); color: var(--texto-2); font-size: 13.5px; line-height: 1.5; }
.aviso-datos .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--acento-texto); }
.aviso-datos a, .consent a { color: var(--acento-texto); font-weight: 700; }
.legal { max-width: 78ch; }
.legal h2 { font-size: clamp(21px, 2.2vw, 26px); letter-spacing: -0.02em; margin: 44px 0 14px; }
.legal p, .legal li { color: var(--texto-2); line-height: 1.7; }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 12px 0; padding-left: 20px; display: grid; gap: 8px; }
.legal b { color: var(--texto); }
.legal a { color: var(--acento-texto); font-weight: 700; }
.legal code { font-size: .92em; padding: 1px 6px; border-radius: 6px; background: var(--sup-2); }
.legal-ficha { display: grid; gap: 0; border: 1px solid var(--linea); border-radius: var(--r-campo); background: var(--sup); overflow: hidden; }
.legal-ficha > div { display: grid; grid-template-columns: minmax(140px, 32%) 1fr; gap: 12px; padding: 12px 16px; }
.legal-ficha > div + div { border-top: 1px solid var(--linea); }
.legal-ficha dt { color: var(--texto-3); font-size: 14px; }
.legal-ficha dd { margin: 0; color: var(--texto); }
.legal-tabla { overflow-x: auto; margin: 16px 0; border: 1px solid var(--linea); border-radius: var(--r-campo); background: var(--sup); }
.legal-tabla table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.legal-tabla th, .legal-tabla td { text-align: left; vertical-align: top; padding: 12px 14px; line-height: 1.5; }
.legal-tabla th { background: var(--sup-2); color: var(--texto); font-weight: 700; }
.legal-tabla td { color: var(--texto-2); border-top: 1px solid var(--linea); }
.legal-tabla td:first-child { color: var(--texto); font-weight: 700; }
@media (max-width: 600px) { .legal-ficha > div { grid-template-columns: 1fr; gap: 2px; } }

/* ── Confianza en la portada: cifras, testimonios y clientes (se editan en la consola) ── */
.cifras-hero { margin-top: 8px; }
.cifras-hero .cifra b { font-size: clamp(30px, 3.4vw, 42px); color: var(--texto); }
.cifras-hero .cifra span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; max-width: 26ch; }
.testimonios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; }
.testimonio { margin: 0; }
.testimonio .bisel-in { padding: 28px; height: 100%; display: flex; flex-direction: column; gap: 16px; }
.testimonio .ic-cita { width: 30px; height: 30px; color: var(--acento-texto); }
.testimonio blockquote { margin: 0; font-size: 17px; line-height: 1.6; color: var(--texto); flex: 1; }
.testimonio figcaption { display: flex; align-items: center; gap: 12px; }
.testimonio figcaption b { display: block; font-size: 15px; }
.testimonio figcaption small { display: block; color: var(--texto-3); font-size: 14px; }
.t-ini { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--acento-suave); color: var(--acento-texto); }
.confian { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.confian-t { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.confian ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.confian li { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--linea-2); background: var(--sup); color: var(--texto-2); font-weight: 700; font-size: 15px; }
@media (max-width: 1023px) { .testimonios { grid-template-columns: 1fr; } }

/* ── Celular: portada y soluciones más compactas ── */
@media (max-width: 767px) {
  /* La captura de la app es ilegible a este ancho: la portada queda con la foto */
  .hero .cascada .c-app { display: none; }
}
@media (max-width: 640px) {
  .soluciones { grid-template-columns: 1fr 1fr; gap: 12px; }
  .solucion { min-height: 200px; padding: 16px; border-radius: 22px; }
  .solucion.ancha { grid-column: span 2; min-height: 240px; padding: 20px; }
  .solucion:not(.ancha) p { display: none; }
  .solucion h3 { font-size: 18px; line-height: 1.2; }
  .solucion.ancha h3 { font-size: 22px; }
  .solucion .s-ic { width: 38px; height: 38px; border-radius: 11px; margin-bottom: 10px; }
  .solucion .s-ic .ic { width: 20px; height: 20px; }
  .solucion .s-mas { margin-top: 8px; font-size: 14px; }
  .solucion .sello { top: 12px; right: 12px; }
  .cifras-hero .cifra { padding-top: 20px; }
}

/* ── Tocar y leer: zonas de al menos 44 px y nada bajo 13 px ── */
.menu a, .menu-btn { min-height: 44px; display: inline-flex; align-items: center; }
.marca { min-height: 44px; }
.sol-item { min-height: 44px; }
.cortina a.cortina-sol { padding: 10px 4px; min-height: 44px; display: flex; align-items: center; }
.pie-in a { display: inline-flex; align-items: center; min-height: 44px; }
.subnav a { min-height: 40px; display: inline-flex; align-items: center; }
.etiqueta, .solucion .sello, .cortina-t { font-size: 13px; }
.pie-in > div { gap: 2px; }
.pie-sol-lista { row-gap: 2px; }

/* ── Logos de clientes (franja que avanza sola) ── */
.logos-t { text-align: center; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--texto-3); margin-bottom: 22px; }
.logos-franja { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logos-pista { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; width: max-content; animation: logos-corre 90s linear infinite; }
.logos-franja:hover .logos-pista, .logos-franja:focus-within .logos-pista { animation-play-state: paused; }
.logos-pista li { flex: none; height: 96px; width: 180px; display: grid; place-items: center; padding: 14px 18px; border-radius: 20px; background: #fff; border: 1px solid var(--linea); }
.logos-pista img { max-height: 64px; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1); opacity: .78; transition: filter .5s var(--curva), opacity .5s var(--curva); }
.logos-pista li:hover img { filter: none; opacity: 1; }
@media (hover: none) { .logos-pista img { filter: none; opacity: 1; } }
@keyframes logos-corre { to { transform: translateX(calc(-50% - 9px)); } }
@media (prefers-reduced-motion: reduce) {
  .logos-franja { -webkit-mask-image: none; mask-image: none; }
  .logos-pista { animation: none; width: auto; flex-wrap: wrap; justify-content: center; max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
  .logos-pista li[aria-hidden="true"] { display: none; }
}
@media (max-width: 640px) { .logos-pista li { height: 80px; width: 140px; padding: 10px 12px; } .logos-pista img { max-height: 52px; } }
.testimonio .bisel-in { position: relative; }
.t-foto { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--acento-suave); }
.t-ejemplo { position: absolute; top: 16px; right: 16px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--sup-2); color: var(--texto-3); border: 1px dashed var(--linea-2); }

/* ── Animaciones (js/animaciones.js): capas y efectos que lucen solo con movimiento permitido ── */
html.gsap .hero-anim > h1 { animation: none; }            /* el titular lo anima GSAP palabra por palabra */
html.gsap .cascada { animation: none; }
.linea-anim { padding-bottom: .08em; margin-bottom: -.08em; } /* que la máscara no corte las letras con cola */
.barra-progreso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--acento), #7c3aed, #ea580c); pointer-events: none; }

/* Aurora detrás de la portada: manchas de color que se mueven lento (solo transform) */
.hero { position: relative; isolation: isolate; overflow-x: clip; }
.hero::before, .hero::after { content: ""; position: absolute; inset: auto; z-index: -1; border-radius: 50%; pointer-events: none; opacity: .55; }
.hero::before { width: 620px; height: 620px; top: -120px; right: -80px; background: radial-gradient(circle, rgb(37 99 235 / .28), transparent 65%); }
.hero::after { width: 520px; height: 520px; bottom: -160px; left: -120px; background: radial-gradient(circle, rgb(234 88 12 / .16), transparent 65%); }
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: aurora-a 16s ease-in-out infinite alternate; }
  .hero::after { animation: aurora-b 19s ease-in-out infinite alternate; }
  @keyframes aurora-a { to { transform: translate(-140px, 90px) scale(1.15); } }
  @keyframes aurora-b { to { transform: translate(160px, -70px) scale(1.2); } }

  /* Destello que recorre los botones principales cada tanto */
  .btn-prim { position: relative; overflow: hidden; isolation: isolate; }
  .btn-prim::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%);
    transform: translateX(-120%); animation: destello 4.5s ease-in-out infinite; }
  @keyframes destello { 0%, 62% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
}
@media (max-width: 767px) { .hero::before { width: 380px; height: 380px; } .hero::after { width: 320px; height: 320px; } }

/* Tarjetas de soluciones: foco de luz que sigue al mouse */
.solucion { transform-style: preserve-3d; will-change: transform; }
.solucion::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--curva);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .22), transparent 45%); }
.solucion:hover::before { opacity: 1; }
.solucion > *:not(img) { position: relative; z-index: 1; }
.solucion .sello { position: absolute; }
.dividido .foto .bisel-in, .kit-foto, .cab-pag .foto .bisel-in { overflow: hidden; }
/* Un solo testimonio: tarjeta destacada y centrada */
.testimonios:has(> .testimonio:only-child) { grid-template-columns: minmax(0, 780px); justify-content: center; }
.testimonios:has(> .testimonio:only-child) .bisel-in { padding: 40px 44px; }
.testimonios:has(> .testimonio:only-child) blockquote { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.45; letter-spacing: -0.01em; }
@media (max-width: 640px) { .testimonios:has(> .testimonio:only-child) .bisel-in { padding: 28px 24px; } }

/* Cotizar: grupos del catálogo del master, fotos de producto sin recorte */
.grupo-cot { margin-top: 18px; }
.grupo-cot:first-of-type { margin-top: 8px; }
.grupo-cot-t { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); margin: 0 0 10px; }
.item-cot .ic-foto { display: grid; place-items: center; }
.item-cot .ic-foto img { object-fit: contain; }
.item-cot .ic-sinfoto { width: 34px; height: 34px; color: var(--texto-3); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── «Arma tu cotización» en la página de cada producto ── */
.arma-sec { padding-top: 40px; }
.arma .bisel-in { padding: 40px; }
.arma-cab { max-width: 640px; margin-bottom: 28px; }
.arma-cab h2 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; margin-bottom: 10px; }
.arma-cab p { color: var(--texto-2); font-size: 17px; }
.arma-form fieldset { border: 0; padding: 0; margin: 0 0 28px; min-width: 0; }
.arma-form legend { font-weight: 700; font-size: 17px; margin-bottom: 12px; padding: 0; }
.arma-sub { color: var(--texto-2); font-size: 15px; margin: -4px 0 16px; }
.arma-planes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.arma-plan { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1.5px solid var(--linea-2); border-radius: 16px;
             background: var(--sup); cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s; min-height: 64px; }
.arma-plan input { width: 20px; height: 20px; accent-color: var(--acento); flex: none; margin: 0; }
.arma-plan .ap-nombre { flex: 1; font-weight: 600; font-size: 15.5px; }
.arma-plan .ap-precio { font-weight: 700; color: var(--acento-texto); white-space: nowrap; }
.arma-plan:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); box-shadow: 0 0 0 3px rgb(29 99 201 / .12); }
.arma-grilla { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.arma-extra { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 44px 12px 12px; border: 1.5px solid var(--linea-2);
              border-radius: 16px; background: var(--sup); cursor: pointer; transition: border-color .2s, background-color .2s, transform .2s var(--curva); min-height: 72px; }
.arma-extra:hover { border-color: var(--acento); }
.arma-extra input { position: absolute; opacity: 0; pointer-events: none; }
.arma-extra:focus-within { outline: 3px solid rgb(29 99 201 / .35); outline-offset: 2px; }
.ae-foto { width: 64px; height: 48px; border-radius: 10px; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; border: 1px solid var(--linea); }
.ae-foto img { width: 100%; height: 100%; object-fit: contain; }
.ae-foto .ic { width: 24px; height: 24px; color: #5a6a80; }
.ae-txt { display: grid; gap: 2px; min-width: 0; }
.ae-txt b { font-size: 14.5px; line-height: 1.3; }
.ae-txt small { color: var(--texto-3); font-weight: 600; }
.ae-marca { position: absolute; right: 12px; top: 50%; translate: 0 -50%; width: 24px; height: 24px; border-radius: 50%;
            border: 1.5px solid var(--linea-2); display: grid; place-items: center; transition: background-color .2s, border-color .2s; }
.ae-marca .ic { width: 14px; height: 14px; color: #fff; opacity: 0; transition: opacity .2s; }
.arma-extra:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.arma-extra:has(input:checked) .ae-marca { background: var(--acento); border-color: var(--acento); }
.arma-extra:has(input:checked) .ae-marca .ic { opacity: 1; }
.arma-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; border-top: 1px solid var(--linea); }
.arma-pie .nota { color: var(--texto-3); font-size: 14px; margin: 12px 0 0; }
.arma-pie .btn { margin-top: 12px; }
.arma-pie .btn svg { width: 18px; height: 18px; margin-left: 6px; }
@media (max-width: 640px) { .arma .bisel-in { padding: 24px 20px; } .arma-pie .btn { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .arma-plan, .arma-extra, .ae-marca, .ae-marca .ic { transition: none; } }

/* ── «¿Le sumas…?» en el resumen de la cotización ── */
.sugerencias { margin-top: 18px; padding: 16px; border-radius: 16px; background: var(--acento-suave); border: 1px solid rgb(29 99 201 / .18); }
.sugerencias .sug-t { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; font-weight: 600; color: var(--acento-texto); margin: 0 0 12px; }
.sugerencias .sug-t svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.sug { padding: 12px 0; border-top: 1px solid rgb(29 99 201 / .14); }
.sug:first-child { border-top: 0; padding-top: 0; }
.sug b { display: block; font-size: 15px; margin-bottom: 4px; }
.sug small { display: block; color: var(--texto-2); font-size: 13.5px; line-height: 1.45; }
.sug-acc { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sug-acc .btn { min-height: 38px; padding: 0 14px; font-size: 14px; }

/* ── Cotización vista por el cliente (cotizacion.php): aceptar, pagar con Webpay o decir que no ── */
.cz { padding-top: 40px; padding-bottom: 64px; }
.cz-cab { margin-bottom: 22px; }
.cz-eti { color: var(--acento-texto); font-weight: 600; font-size: 14px; letter-spacing: .02em; }
.cz-cab h1 { font-size: clamp(28px, 4vw, 40px); margin-top: 4px; }
.cz-meta { color: var(--texto-2); margin-top: 6px; }
.cz-aviso { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; margin-bottom: 20px;
  background: var(--sup-2); border: 1px solid var(--linea-2); color: var(--texto); line-height: 1.55; }
.cz-aviso > .ic { width: 24px; height: 24px; flex: none; margin-top: 1px; color: var(--texto-2); }
.cz-ok { background: var(--ok-suave); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.cz-ok > .ic { color: var(--ok); }
.cz-mal { background: var(--error-suave); border-color: color-mix(in srgb, var(--error) 35%, transparent); }
.cz-mal > .ic { color: var(--error); }
.cz-voucher h2 { font-size: 20px; margin-bottom: 4px; }
.cz-voucher dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin-top: 14px; font-size: 14.5px; }
.cz-voucher dt { color: var(--texto-2); }
.cz-voucher dd { margin: 0; overflow-wrap: anywhere; }
.cz-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.cz-detalle { padding: 22px 24px; }
.cz-tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.cz-tabla th { text-align: left; font-size: 13px; font-weight: 600; color: var(--texto-2); padding: 0 0 10px; border-bottom: 1px solid var(--linea-2); }
.cz-tabla td { padding: 12px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.cz-tabla .r { text-align: right; white-space: nowrap; padding-left: 14px; }
.cz-pu { display: block; font-size: 13px; color: var(--texto-2); margin-top: 2px; }
.cz-tot { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin-top: 14px; color: var(--texto-2); font-size: 14.5px; }
.cz-tot dd { margin: 0; text-align: right; }
.cz-tot .cz-gran { color: var(--texto); font-weight: 700; font-size: 18px; padding-top: 8px; }
.cz-cond { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea); color: var(--texto-2); font-size: 14px; display: grid; gap: 8px; }
.cz-pre { white-space: pre-line; }
.cz-pdf { margin-top: 18px; }
.cz-pdf a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.cz-pdf .ic { width: 20px; height: 20px; }
.cz-acciones { display: grid; gap: 18px; position: sticky; top: 96px; }
.cz-caja { padding: 22px; display: grid; gap: 10px; }
.cz-monto { display: grid; font-size: 30px; font-weight: 700; line-height: 1.2; margin-bottom: 4px; }
.cz-monto span { font-size: 14px; font-weight: 500; color: var(--texto-2); }
.cz-ancho { width: 100%; justify-content: center; }
.cz-ancho .ic { width: 18px; height: 18px; }
.cz-nota { font-size: 13px; color: var(--texto-2); line-height: 1.5; margin-bottom: 6px; }
.cz-ayuda { font-size: 14.5px; color: var(--texto-2); display: grid; gap: 12px; padding: 0 4px; }
.cz-no summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--texto-2); text-decoration: underline; text-underline-offset: 3px; }
.cz-no form { display: grid; gap: 8px; margin-top: 6px; }
.cz-no textarea { width: 100%; font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linea-2); background: var(--sup); color: var(--texto); resize: vertical; }
@media (max-width: 860px) {
  .cz-grid { grid-template-columns: 1fr; }
  .cz-acciones { position: static; }
  .cz-detalle { padding: 18px 16px; }
  .cz-voucher dl { grid-template-columns: 1fr; gap: 0; }
  .cz-voucher dd { margin-bottom: 8px; }
}
.cz-causas { margin: 8px 0 8px 18px; padding: 0; display: grid; gap: 4px; }

/* ── Compra en línea (armador + comprar.php) ── */
.arma-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.arma-botones .btn .ic { width: 18px; height: 18px; }
.arma-compra-nota { color: var(--texto-2); }
.compra { padding-top: 40px; padding-bottom: 64px; }
.compra h1 { font-size: clamp(28px, 4vw, 40px); }
.compra-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; margin-top: 22px; }
.compra-caja { padding: 22px 24px; }
.compra-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.compra-items li { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--linea); }
.compra-items small { display: block; color: var(--texto-2); font-size: 13px; margin-top: 2px; }
.compra-total { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin-top: 14px; }
.compra-total .gran { font-size: 22px; font-weight: 700; }
.compra-condiciones { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--ok-suave); color: var(--texto); font-size: 14px; line-height: 1.6; }
.compra-condiciones ul { margin: 6px 0 0 18px; padding: 0; display: grid; gap: 4px; }
.cz-suscripcion { margin-top: 24px; }
.cz-sus-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.cz-sus-lista li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; padding: 14px 16px; border: 1px solid var(--linea-2); border-radius: 14px; }
.cz-sus-lista small { display: block; color: var(--texto-2); font-size: 13px; margin-top: 2px; }
.cz-sus-lista form { margin: 0; }
.cz-sus-estado { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--sup-2); color: var(--texto-2); }
.cz-sus-estado.activa { background: var(--ok-suave); color: var(--ok); }
.cz-sus-estado.cancelada, .cz-sus-estado.vencida { background: var(--error-suave); color: var(--error); }
.cz-entrega { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--sup-2); font-size: 14.5px; line-height: 1.7; overflow-wrap: anywhere; }
@media (max-width: 860px) { .compra-grid { grid-template-columns: 1fr; } }

/* ── Página del módulo de Producción (produccion.php) ── */
.flujo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; counter-reset: none; }
.flujo-paso .bisel-in { position: relative; height: 100%; padding: 22px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.flujo-paso b { font-size: 18px; color: var(--texto); }
.flujo-paso span:not(.flujo-n) { color: var(--texto-2); font-size: 15px; line-height: 1.45; }
.flujo-n { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--acento-suave); color: var(--acento-texto); }
.flujo-ic { width: 30px; height: 30px; color: var(--acento-texto); margin-bottom: 6px; }
@media (max-width: 1100px) { .flujo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .flujo { grid-template-columns: 1fr; } }
.rubros-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.rubros-4 figure { margin: 0; }
.rubros-4 figcaption { margin-top: 12px; color: var(--texto-2); font-size: 15px; }
.rubros-4 .bisel-in img { aspect-ratio: 680 / 887; object-fit: cover; object-position: top left; }
@media (max-width: 1000px) { .rubros-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rubros-4 { grid-template-columns: 1fr; } }
.dos-capturas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 900px) { .dos-capturas { grid-template-columns: 1fr; } }
.videos { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 24px; align-items: start; }
.videos figure { margin: 0; }
.videos figcaption { margin-top: 12px; color: var(--texto-2); font-size: 15px; }
.videos video { display: block; width: 100%; height: auto; background: #000; }
.video-vertical { max-width: 360px; }
@media (max-width: 900px) { .videos { grid-template-columns: 1fr; } .video-vertical { margin: 0 auto; width: 100%; } }

/* fotos de las tarjetas y del cierre con un tono más cálido (sin tocar las pantallas de los sistemas) */
.rubro-foto img, .final > img { filter: sepia(.16) saturate(1.08) brightness(1.03); }
/* las fotos de la grilla de soluciones ya vienen corregidas en el archivo (más cálidas y con más contraste, 18-10-2026): sin sepia encima, que las lavaba */
.solucion > img { filter: none; }

/* Tarjetas: ninguna destaca (sin la azul marino ni el degradado). Cada una lleva un tono suave distinto,
   que se calcula sobre el fondo de la superficie, así funciona igual en claro y en oscuro. */
.tarjetas > .tarjeta .bisel-in { --tono: #2A7FDB; background: color-mix(in srgb, var(--tono) 8%, var(--sup)); color: inherit; }
.tarjetas > .tarjeta:nth-child(6n+2) .bisel-in { --tono: #1F9D68; }
.tarjetas > .tarjeta:nth-child(6n+3) .bisel-in { --tono: #D98A1E; }
.tarjetas > .tarjeta:nth-child(6n+4) .bisel-in { --tono: #C94F7C; }
.tarjetas > .tarjeta:nth-child(6n+5) .bisel-in { --tono: #7A5BD0; }
.tarjetas > .tarjeta:nth-child(6n+6) .bisel-in { --tono: #1C9AA8; }
.tarjetas > .tarjeta .ic-grande { color: color-mix(in srgb, var(--tono) 82%, var(--texto)); }
.tarjetas > .tarjeta h3 { color: var(--texto); }
.tarjetas > .tarjeta p { color: var(--texto-2); }
.tarjeta.marina .chips span { background: color-mix(in srgb, var(--tono) 10%, var(--sup)); border-color: var(--linea); color: var(--texto-2); }
.guia.marina .bisel-in { background: var(--sup); color: inherit; }
.guia.marina h3 { color: var(--texto); } .guia.marina p, .guia.marina li { color: var(--texto-2); } .guia.marina .ic-grande { color: var(--acento-texto); }

/* Fotos que se alternan (pieza «fotos»): todas apiladas, la visible con .on; fundido suave */
.foto.rota .bisel-in > img { opacity: 0; transition: opacity 1.4s ease-in-out; }
.foto.rota .bisel-in > img.on { opacity: 1; }
.campo[hidden] { display: none; }
.m-foto.rota > img { opacity: 0; transition: opacity 1.4s ease-in-out; }
.m-foto.rota > img.on { opacity: 1; }

/* PensiónFácil: contratar y pagar (pensionfacilinfo.php) */
.pf-precio{font-size:1.6rem;font-weight:700;margin:.2rem 0 .4rem}
.pf-contratar .acciones{margin-top:14px}
.pf-pasos{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pf-pasos li{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--linea,rgba(127,127,127,.25));border-radius:14px}
.pf-pasos li span{opacity:.8}
.pf-transf{margin-top:8px}
.pf-transf h3{display:flex;gap:8px;align-items:center}
.pf-transf dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:14px 0}
.pf-transf dt{opacity:.7}
.pf-transf dd{margin:0;font-weight:600;word-break:break-word}
@media (max-width:520px){.pf-transf dl{grid-template-columns:1fr}.pf-transf dt{margin-top:6px}}
.pf-contratar .cabeza h3.sec-t{max-width:none;white-space:normal}

/* ── Carrusel de clientes reales (portada): avanza solo cada 5 s; se pausa con el mouse, el foco o el dedo ── */
.carrusel { position: relative; }
.car-pista { list-style: none; margin: 0; padding: 6px 2px 14px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 3);
             gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.car-pista::-webkit-scrollbar { display: none; }
.car-item { scroll-snap-align: start; min-width: 0; }
.cli-tarjeta, .cli-tarjeta .bisel-in { height: 100%; }
.cli-tarjeta .bisel-in { padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.cli-logo { height: 84px; display: grid; place-items: center; background: #fff; border: 1px solid var(--linea); border-radius: 16px; margin-bottom: 8px; padding: 10px 16px; }
.cli-logo img { max-height: 64px; max-width: 100%; width: auto; object-fit: contain; }
/* Cliente sin logo todavía: sus iniciales y el ícono de la solución que usa */
.cli-logo-ini { background: var(--acento-suave, rgba(47,134,209,.10)); border-color: transparent; display: flex; gap: 14px; justify-content: center; }
.cli-ini { font-size: 30px; font-weight: 800; letter-spacing: .02em; color: var(--acento-texto); line-height: 1; }
.cli-ini-ic { width: 26px; height: 26px; color: var(--acento-texto); opacity: .75; }
.cli-nom { font-size: 18px; color: var(--texto); }
.cli-meta { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--acento-texto); }
.cli-txt { margin: 4px 0 0; color: var(--texto-2, var(--texto)); line-height: 1.55; font-size: 15.5px; }
.car-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%;
           border: 1px solid var(--linea); background: var(--sup); color: var(--texto); display: grid; place-items: center; cursor: pointer; box-shadow: var(--sombra); }
.car-btn:hover { border-color: var(--acento); color: var(--acento-texto); }
.car-btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.car-btn .ic { width: 20px; height: 20px; }
.car-btn .ic-izq { transform: scaleX(-1); }
.car-ant { left: -22px; } .car-sig { right: -22px; }
@media (max-width: 1023px) { .car-pista { grid-auto-columns: calc((100% - 18px) / 2); } }
@media (max-width: 767px) { .car-pista { grid-auto-columns: 86%; } .car-ant { left: -6px; } .car-sig { right: -6px; } }
@media (prefers-reduced-motion: reduce) { .car-pista { scroll-behavior: auto; } }