/*
  REDISEÑO V3 -- paleta oscura con profundidad real: verde-petroleo
  profundo en vez de negro plano, acento menta saturado. Dark-first: la
  version oscura es la identidad principal de la marca (no un modo
  alternativo), con una version clara disponible para quien la prefiera
  via prefers-color-scheme/data-theme. Los 3 productos se diferencian
  por TONALIDAD dentro de la misma familia menta, no por colores
  distintos. Fondos de gradiente limpio, sin textura de grano (se probo
  y se descarto -- se veia como puntos en rejilla, poco profesional).
  Tipografia: Plus Jakarta Sans para la voz de marca (nombre, titulares
  de producto), Fraunces italica para frases editoriales de transicion,
  Inter para cuerpo, JetBrains Mono para indices/specs.
*/
:root {
  --bg: #16241f;
  --bg-2: #1d3029;
  --surface: #203630;
  --surface-2: #2a443c;
  --ink: #f3f8f5;
  --ink-dim: #b9c7c0;
  --ink-faint: #85958c;
  --border: #3a5048;

  --mint: #5fd9c4;
  --mint-fuerte: #7fe6d4;
  --mint-ink: #04120e;
  --gradiente-mint: linear-gradient(135deg, var(--mint-fuerte) 0%, var(--mint) 55%, #3fb8a3 100%);

  --c-inventario: #2fbf71;
  --c-inventario-suave: #0e4d3c;
  --c-tecnia: #8fd8c8;
  --c-tecnia-suave: #0f1f1c;
  --c-clinica: #6fe0cb;
  --c-clinica-suave: #0d201c;
  --c-medida: #5fd9c4;
  --c-medida-suave: #11231f;

  --font-display: 'Fraunces', Georgia, serif;
  --font-marca: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #faf9f6;
    --bg-2: #f1f0ea;
    --surface: #ffffff;
    --surface-2: #f0f1ef;
    --ink: #0a0d0c;
    --ink-dim: #4a5250;
    --ink-faint: #868d8b;
    --border: #e1e3e0;

    --mint: #0e6e68;
    --mint-fuerte: #0a5a55;
    --mint-ink: #ffffff;

    --c-inventario: #0e4d3c;
    --c-inventario-suave: #e7f5ec;
    --c-tecnia: #1b4a52;
    --c-tecnia-suave: #e9f0f1;
    --c-clinica: #2d6e72;
    --c-clinica-suave: #e7f2f2;
    --c-medida: #0e6e68;
    --c-medida-suave: #eef0ef;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #faf9f6;
  --bg-2: #f1f0ea;
  --surface: #ffffff;
  --surface-2: #f0f1ef;
  --ink: #0a0d0c;
  --ink-dim: #4a5250;
  --ink-faint: #868d8b;
  --border: #e1e3e0;

  --mint: #0e6e68;
  --mint-fuerte: #0a5a55;
  --mint-ink: #ffffff;

  --c-inventario: #0e4d3c;
  --c-inventario-suave: #e7f5ec;
  --c-tecnia: #1b4a52;
  --c-tecnia-suave: #e9f0f1;
  --c-clinica: #2d6e72;
  --c-clinica-suave: #e7f2f2;
  --c-medida: #0e6e68;
  --c-medida-suave: #eef0ef;
  color-scheme: light;
}

* { box-sizing: border-box; min-width: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  margin: 0;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.shell { max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 640px) { .shell { padding-inline: 18px; } }

.kicker {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}
.kicker::before { content: ""; width: 16px; height: 1px; background: currentColor; }

.btn-primario {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
  transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), box-shadow 0.22s ease;
}
.btn-primario:hover { transform: translateY(-2px) scale(1.015); }
.btn-secundario {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink-faint);
  border-radius: 999px;
  padding: 13px 26px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.btn-secundario:hover { background: var(--surface-2); border-color: var(--ink-dim); }
.flecha { display: inline-block; transition: transform 0.25s cubic-bezier(0.16,1,0.3,1); }
.btn-primario:hover .flecha, .enlace-flecha:hover .flecha { transform: translateX(5px); }

/* ---------- Progreso de scroll ---------- */
.progreso-scroll {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--mint);
  z-index: 100;
  transform-origin: left;
}

/* ---------- Nav: vidrio esmerilado ---------- */
.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.nav.con-fondo {
  border-bottom-color: var(--border);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
}
.nav-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px;
}
/* mintlogo.png es un lockup vertical completo (icono + "Mint" +
   "Software Solutions", pensado como pieza independiente, no para caber
   en una barra angosta) -- el nav usa en su lugar solo el isotipo
   (logo-icono.png, con fondo transparente) junto al nombre como texto
   real en HTML: nitido a cualquier tamaño y facil de agrandar. */
.marca { display: flex; align-items: center; gap: 9px; }
.marca-icono { height: 32px; width: auto; display: block; }
.marca-texto {
  font-family: var(--font-marca);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.nav-enlaces { display: flex; gap: 32px; font-size: 13.5px; font-weight: 500; color: var(--ink-dim); }
.nav-enlaces a:hover { color: var(--ink); }
@media (max-width: 760px) { .nav-enlaces { display: none; } }
.nav-cta {
  font-weight: 700;
  font-size: 13.5px;
  background: var(--mint);
  color: var(--mint-ink);
  border-radius: 999px;
  padding: 10px 20px;
  white-space: nowrap;
}

/* ============================================================
   HOME
   ============================================================ */

/* ---------- Hero: la marca como protagonista ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 140px 80px;
  overflow: hidden;
}
.hero-fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 130% 85% at 50% -15%, var(--bg-2) 0%, var(--bg) 55%, color-mix(in srgb, var(--bg) 80%, black) 100%);
}
.hero-malla { display: none; }

/* Isotipo de marca en 3D (Three.js, ver js/hero-3d.js) -- reemplaza el
   icono estatico pequeño que habia antes. El canvas cubre una franja
   del hero por encima del titulo; si Three.js no carga o el visitante
   pidio reduced-motion, el script deja el canvas vacio y el gradiente
   de .hero-fondo llena ese espacio sin que se note la ausencia. */
.hero-canvas-3d {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: min(980px, 98vw);
  height: 560px;
  z-index: 0;
  pointer-events: none;
}
.hero-3d-espacio { height: 480px; }
@media (max-width: 640px) {
  .hero-canvas-3d { height: 360px; top: 10px; }
  .hero-3d-espacio { height: 300px; }
}

/* El nombre de la marca ahora aparece dentro del canvas 3D (sprite de
   texto en js/hero-3d.js), en el punto donde estalla el cristal -- el
   H1 real se mantiene en el documento para accesibilidad/SEO pero se
   oculta visualmente para no duplicar el nombre dos veces en pantalla. */
.hero-titulo {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.hero-claim {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 2.4vw, 23px);
  color: var(--ink-dim);
  margin: 0 0 14px;
}
.hero-lede {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-faint);
  max-width: 42ch;
  margin: 0 0 38px;
}
.hero-acciones { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero-acciones .btn-primario {
  background: var(--gradiente-mint);
  color: var(--mint-ink);
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--mint) 55%, transparent);
}
.hero-acciones .btn-primario:hover {
  box-shadow: 0 14px 38px -8px color-mix(in srgb, var(--mint) 65%, transparent);
}

/* ---------- Tarjetas de producto (home) ---------- */
.productos-home { padding-block: 40px 100px; }
.productos-home-cabecera { text-align: center; max-width: 54ch; margin: 0 auto 52px; }
.productos-home-cabecera .kicker { justify-content: center; color: var(--ink-faint); }
.productos-home-cabecera .kicker::before { display: none; }
.productos-home-titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

/* ---------- Track horizontal de productos (desktop: pin + scroll) ---------- */
/* La altura real la fija ScrollTrigger en JS segun el recorrido exacto de
   las tarjetas (ver app.js) -- un valor fijo aqui desincroniza el pin del
   espacio reservado y deja un hueco en blanco al final de la seccion. */
.productos-track-wrap { position: relative; }
.productos-track-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.productos-track {
  display: flex;
  gap: 24px;
  padding-left: max(24px, calc((100vw - 1180px) / 2 + 24px));
  will-change: transform;
}
.productos-track-spacer {
  flex: 0 0 auto;
  width: max(24px, calc((100vw - 1180px) / 2 + 24px));
}
@media (max-width: 920px) {
  /* En movil el pin de scroll no se siente bien con gestos tactiles --
     se cae a scroll horizontal nativo con snap, simple y predecible. */
  .productos-track-wrap { height: auto; }
  .productos-track-pin { position: static; height: auto; overflow: visible; display: block; }
  .productos-track {
    display: flex;
    gap: 16px;
    padding-inline: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .productos-track::-webkit-scrollbar { display: none; }
  .productos-track .tarjeta-producto { scroll-snap-align: center; }
}

.tarjeta-producto {
  position: relative;
  border-radius: 24px;
  padding: 40px 36px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: min(560px, 82vw);
  min-height: 460px;
  border: 1px solid var(--border);
  transition: transform 0.32s cubic-bezier(0.16,1,0.3,1), box-shadow 0.32s ease;
  cursor: pointer;
}
.tarjeta-producto:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 60px -24px color-mix(in srgb, var(--color-tarjeta) 45%, transparent);
}
.tarjeta-producto[data-color="inventario"] {
  --color-tarjeta: var(--c-inventario);
  background: linear-gradient(155deg, color-mix(in srgb, var(--c-inventario) 22%, var(--surface)) 0%, var(--c-inventario-suave) 55%, var(--bg-2) 100%);
}
.tarjeta-producto[data-color="tecnia"] {
  --color-tarjeta: var(--c-tecnia);
  background: linear-gradient(155deg, color-mix(in srgb, var(--c-tecnia) 22%, var(--surface)) 0%, var(--c-tecnia-suave) 55%, var(--bg-2) 100%);
}
.tarjeta-producto[data-color="clinica"] {
  --color-tarjeta: var(--c-clinica);
  background: linear-gradient(155deg, color-mix(in srgb, var(--c-clinica) 22%, var(--surface)) 0%, var(--c-clinica-suave) 55%, var(--bg-2) 100%);
}

.tarjeta-producto-badge {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-tarjeta);
  margin-bottom: 10px;
  overflow: hidden;
}
.tarjeta-producto-badge span { display: inline-block; }
.tarjeta-producto-badge .punto { display: none; }

.tarjeta-producto-visual {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-tarjeta) 25%, transparent);
  margin-bottom: 24px;
  box-shadow: 0 16px 32px -18px color-mix(in srgb, var(--color-tarjeta) 50%, transparent);
}
.tarjeta-producto-visual img { width: 100%; height: auto; display: block; }
.tarjeta-producto-visual-placeholder {
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 70% at 30% 20%, color-mix(in srgb, var(--color-tarjeta) 18%, transparent), transparent 60%),
    linear-gradient(160deg, var(--bg-2), var(--surface) 70%);
  font-size: 52px;
  color: var(--color-tarjeta);
  position: relative;
}
.tarjeta-producto-visual-placeholder::before { display: none; }
.tarjeta-producto-visual-placeholder > * { position: relative; }
.tarjeta-producto[data-color="clinica"] .tarjeta-producto-visual-placeholder::after {
  content: "Próximamente";
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
}

.tarjeta-producto-nombre {
  font-family: var(--font-marca);
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 12px;
  color: var(--ink);
}
.tarjeta-producto-frase {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0 0 20px;
  flex-grow: 1;
}
.tarjeta-producto-cta {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--color-tarjeta);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.tarjeta-producto:hover .tarjeta-producto-cta .flecha { transform: translateX(5px); }

/* ---------- A la medida: banda llamativa ---------- */
.medida-banda {
  margin-block: 0 100px;
}
.medida-banda-interior {
  background:
    radial-gradient(ellipse 90% 70% at 30% 0%, color-mix(in srgb, var(--c-inventario) 20%, transparent), transparent 60%),
    linear-gradient(160deg, var(--bg-2), var(--bg) 70%);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 72px 44px;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: var(--ink);
}
.medida-banda-interior::before { display: none; }
.medida-banda-interior > * { position: relative; }
.medida-banda-kicker {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--mint);
  margin: 0 0 18px;
}
.medida-banda-titulo {
  font-family: var(--font-marca);
  font-weight: 700;
  font-size: clamp(32px, 5.5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  text-wrap: balance;
}
.medida-banda-lede {
  font-size: 16.5px;
  color: var(--ink-dim);
  max-width: 50ch;
  margin: 0 auto 34px;
  line-height: 1.6;
}
.medida-banda-acciones {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.medida-banda .btn-primario {
  background: var(--gradiente-mint);
  color: var(--mint-ink);
  font-size: 15px;
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--mint) 55%, transparent);
}
.medida-banda .btn-primario:hover {
  box-shadow: 0 14px 38px -8px color-mix(in srgb, var(--mint) 65%, transparent);
}
.btn-secundario-claro {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.btn-secundario-claro:hover { background: var(--surface-2); border-color: var(--ink-faint); }

/* ---------- Footer ---------- */
.pie { border-top: 1px solid var(--border); padding-block: 44px calc(32px + env(safe-area-inset-bottom, 0px)); }
.pie-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.pie-logo { height: 26px; width: auto; margin-bottom: 8px; }
.pie-marca p { font-size: 12.5px; color: var(--ink-faint); margin: 0; }
.pie-enlaces { display: flex; gap: 28px; }
.pie-enlaces a { font-size: 13px; color: var(--ink-dim); }
.pie-enlaces a:hover { color: var(--ink); }
.pie-copy {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink-faint);
}

/* ============================================================
   PAGINAS DE PRODUCTO
   ============================================================ */
.producto-hero {
  padding-block: 120px 70px;
  position: relative;
  overflow: hidden;
}
.producto-hero[data-color="inventario"] { --color-prod: var(--c-inventario); --color-prod-suave: var(--c-inventario-suave); }
.producto-hero[data-color="tecnia"] { --color-prod: var(--c-tecnia); --color-prod-suave: var(--c-tecnia-suave); }
.producto-hero[data-color="clinica"] { --color-prod: var(--c-clinica); --color-prod-suave: var(--c-clinica-suave); }
.producto-hero-fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--color-prod-suave), transparent 70%);
}
/* Boton de volver: chip elegante fijo en la esquina superior izquierda
   del hero, en vez de un link de texto plano centrado arriba del
   contenido (se veia apilado con el badge de categoria justo debajo). */
.producto-volver {
  position: absolute;
  top: 28px;
  left: max(24px, calc((100vw - 1180px) / 2 + 24px));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px 9px 14px;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);
}
.producto-volver:hover { color: var(--ink); border-color: var(--ink-faint); transform: translateX(-3px); }
@media (max-width: 700px) {
  .producto-volver { position: static; display: inline-flex; margin-bottom: 24px; }
}

/* Categoria del producto: kicker de texto simple (sin pastilla ni
   punto), mismo patron que las tarjetas del home -- ya no es un badge
   separado, es parte de la jerarquia tipografica justo arriba del
   titulo grande. */
/* Chip de estado "En construccion": simetrico al boton de volver, en la
   esquina superior derecha -- discreto, con punto que pulsa, en vez de
   competir como una segunda pastilla junto al nombre de categoria. */
.producto-estado-chip {
  position: absolute;
  top: 28px;
  right: max(24px, calc((100vw - 1180px) / 2 + 24px));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #d9a441;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, #d9a441 35%, transparent);
  border-radius: 999px;
  padding: 8px 15px;
}
.producto-estado-chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #d9a441;
  animation: estado-pulso 1.8s ease-in-out infinite;
}
@keyframes estado-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (max-width: 700px) {
  .producto-estado-chip { position: static; display: inline-flex; margin: 0 0 16px; }
}
.producto-hero-badge {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-prod);
  margin-bottom: 10px;
}
.producto-hero-titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 6vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  max-width: 16ch;
  text-wrap: balance;
}
.producto-hero-lede {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 50ch;
  margin: 0 0 34px;
}
.producto-hero-acciones { display: flex; gap: 14px; flex-wrap: wrap; }
.producto-hero .btn-primario {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-prod) 100%, white 22%) 0%, var(--color-prod) 55%, color-mix(in srgb, var(--color-prod) 100%, black 22%) 100%);
  color: var(--bg);
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--color-prod) 55%, transparent);
}
.producto-hero .btn-primario:hover {
  box-shadow: 0 14px 38px -8px color-mix(in srgb, var(--color-prod) 65%, transparent);
}

.producto-hero-visual {
  max-width: 1000px;
  margin: 64px auto 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--color-prod) 40%, transparent);
}
.producto-hero-visual img { width: 100%; height: auto; }
.producto-hero-visual-placeholder {
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 20%, color-mix(in srgb, var(--color-prod) 16%, transparent), transparent 60%),
    linear-gradient(160deg, var(--bg-2), var(--bg) 70%);
  position: relative;
}
.producto-hero-visual-placeholder::before { display: none; }
.producto-hero-visual-placeholder .ph-glifo { font-size: 56px; position: relative; }
.producto-hero-visual-placeholder .ph-texto {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-faint);
  position: relative;
}

/* ---------- Features de producto ---------- */
.producto-features { padding-block: 90px; }
.producto-features-titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: -0.01em;
  margin: 0 0 44px;
  max-width: 24ch;
}
.grid-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 760px) { .grid-features { grid-template-columns: 1fr; } }
.feature-item { background: var(--surface); padding: 28px 24px; }
.feature-item .f-icono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-prod, var(--mint));
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.feature-item h4 { font-family: var(--font-display); font-size: 16.5px; font-weight: 600; margin: 0 0 8px; }
.feature-item p { font-size: 13px; line-height: 1.6; color: var(--ink-dim); margin: 0; }

/* ---------- Galeria de producto ---------- */
.producto-galeria { padding-block: 0 90px; }
.galeria-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 18px;
}
@media (max-width: 760px) { .galeria-grid { grid-template-columns: 1fr; } }
.galeria-item {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.galeria-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria-col { display: flex; flex-direction: column; gap: 18px; }
.galeria-item-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 20%, color-mix(in srgb, var(--color-prod) 16%, transparent), transparent 60%),
    linear-gradient(160deg, var(--bg-2), var(--bg) 70%);
  position: relative;
}
.galeria-item-placeholder::before { display: none; }
.galeria-item-placeholder .ph-glifo { font-size: 32px; position: relative; }
.galeria-item-placeholder .ph-texto {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
  position: relative;
}

/* ---------- Modulos de producto (filas alternadas imagen/texto) ---------- */
.producto-modulos { padding-block: 20px 90px; }
.producto-modulos .shell { max-width: 1440px; }
@media (max-width: 1500px) { .producto-modulos .shell { max-width: 1180px; } }
.modulos-cabecera { text-align: center; max-width: 60ch; margin: 0 auto 64px; }
.modulos-cabecera .kicker { justify-content: center; color: var(--ink-faint); margin-bottom: 14px; }
.modulos-cabecera h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.modulo-fila {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
  padding-block: 56px;
}
.modulo-fila + .modulo-fila { border-top: 1px solid var(--border); }
.modulo-fila.invertido { direction: rtl; }
.modulo-fila.invertido > * { direction: ltr; }
@media (max-width: 860px) {
  .modulo-fila, .modulo-fila.invertido { direction: ltr; grid-template-columns: 1fr; gap: 28px; padding-block: 36px; }
  /* Imagen primero, texto despues -- en pantalla angosta conviene ver
     el sistema antes de leer la explicacion, sin importar el zigzag
     que solo aplica en desktop. */
  .modulo-fila .modulo-visual, .modulo-fila .modulo-visual-grid { order: -1; }
}
.modulo-texto .modulo-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-prod, var(--mint));
  display: block;
  margin-bottom: 14px;
}
.modulo-texto h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(21px, 2.6vw, 27px);
  margin: 0 0 12px;
  text-wrap: balance;
}
.modulo-texto p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-dim);
  margin: 0 0 18px;
  max-width: 46ch;
}
.modulo-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.modulo-lista li {
  font-size: 13.5px;
  color: var(--ink-dim);
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.modulo-lista li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-prod, var(--mint));
  flex-shrink: 0;
  transform: translateY(-2px);
}
.modulo-visual {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--color-prod, var(--mint)) 35%, transparent);
  position: relative;
  cursor: zoom-in;
}
.modulo-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modulo-visual::after {
  content: "⤢";
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--ink);
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.modulo-visual:hover::after { opacity: 1; transform: translateY(0); }

/* ---------- Lightbox de capturas (clic en .modulo-visual) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--bg) 88%, black);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
.lightbox.abierto { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(1400px, 94vw);
  max-height: 90vh;
  width: auto; height: auto;
  border-radius: 10px;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.6);
  transform: scale(0.97);
  transition: transform 0.25s ease;
}
.lightbox.abierto img { transform: scale(1); }
.lightbox-cerrar {
  position: absolute;
  top: 20px; right: 20px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-cerrar:hover { background: var(--surface-2); }
@media (max-width: 640px) {
  .modulo-visual::after { display: none; }
  .lightbox-cerrar { top: 12px; right: 12px; }
}
.modulo-visual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.modulo-visual-grid .modulo-visual:first-child { grid-column: 1 / -1; }
/* Sin alto explicito, img{height:100%} colapsa a 0 dentro de un grid
   item -- aspect-ratio les da una altura real que respetar. */
.modulo-visual-grid .modulo-visual { aspect-ratio: 16/10; }
.modulo-visual-grid .modulo-visual:first-child { aspect-ratio: 16/9; }
.modulo-visual-grid.dos .modulo-visual:first-child { grid-column: auto; }
/* Las capturas son pantallas anchas (~2:1) -- una caja vertical las
   recorta demasiado agresivo (se pierden columnas de tablas, cifras al
   borde derecho). 4/3 conserva mucho mas contenido legible. */
.modulo-visual-grid.dos .modulo-visual { aspect-ratio: 4/3; }
@media (max-width: 500px) {
  .modulo-visual-grid { grid-template-columns: 1fr; }
  .modulo-visual-grid.dos .modulo-visual { aspect-ratio: auto; }
}

/* ---------- Proceso (pagina A la medida) ---------- */
.section-head-centro { text-align: center; max-width: 60ch; margin: 0 auto 50px; }
.proceso { padding-block: 90px; border-top: 1px solid var(--border); }
.proceso-pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 860px) { .proceso-pasos { grid-template-columns: 1fr; } }
.proceso-paso { background: var(--surface); padding: 32px 26px; }
.proceso-visual {
  margin-bottom: 20px;
}
.proceso-num {
  font-family: var(--font-marca);
  font-weight: 700;
  font-size: 34px;
  color: var(--c-medida);
  opacity: 0.55;
}
.proceso-paso h3 { font-family: var(--font-marca); font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.proceso-paso p { font-size: 13px; line-height: 1.6; color: var(--ink-dim); margin: 0; }

/* ---------- Planes ---------- */
.producto-planes { padding-block: 90px; border-top: 1px solid var(--border); }
.planes-cabecera { text-align: center; max-width: 54ch; margin: 0 auto 48px; }
.planes-titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.6vw, 38px);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.planes-sub { font-size: 14.5px; color: var(--ink-dim); margin: 0; }
.planes-nota { font-size: 12.5px; color: var(--ink-faint); text-align: center; margin: 36px auto 0; max-width: 60ch; }

.grid-planes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 860px) { .grid-planes { grid-template-columns: 1fr; } }
.grid-planes.dos { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }
@media (max-width: 640px) { .grid-planes.dos { grid-template-columns: 1fr; } }

.plan-precio { display: flex; align-items: baseline; gap: 5px; margin: 0 0 4px; }
.plan-precio .monto { font-family: var(--font-display); font-size: 40px; font-weight: 600; letter-spacing: -0.01em; }
.plan-precio .periodo { font-size: 13.5px; color: var(--ink-faint); }
.plan-ahorro {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-prod, var(--mint));
  background: color-mix(in srgb, var(--color-prod, var(--mint)) 14%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
  margin: 0 0 18px;
}

/* ---------- Extras debajo de las tarjetas: FEL, soporte, pago ---------- */
.planes-extra {
  max-width: 760px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
@media (max-width: 700px) { .planes-extra { grid-template-columns: 1fr; } }
.planes-extra-item { background: var(--surface); padding: 20px 22px; }
.planes-extra-item h4 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink);
}
.planes-extra-item p { font-size: 12.5px; line-height: 1.55; color: var(--ink-dim); margin: 0; }
.planes-tarjetas { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.planes-tarjetas svg { height: 20px; width: auto; display: block; }

.plan-card {
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.plan-card.destacado {
  border-color: var(--color-prod, var(--mint));
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--color-prod, var(--mint)) 7%, transparent), transparent 55%),
    var(--surface);
  box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--color-prod, var(--mint)) 40%, transparent);
  position: relative;
}
.plan-card.destacado::before {
  content: "Más elegido";
  position: absolute;
  top: -13px;
  left: 26px;
  background: var(--color-prod, var(--mint));
  color: var(--mint-ink);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 999px;
}
.plan-nombre { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.plan-para { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 22px; }
.plan-lista { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 11px; flex-grow: 1; }
.plan-lista li { font-size: 13.5px; color: var(--ink-dim); display: flex; gap: 9px; align-items: flex-start; line-height: 1.4; }
.plan-lista li .check { color: var(--color-prod, var(--mint)); flex-shrink: 0; font-weight: 700; }
.plan-card .btn-secundario { width: 100%; justify-content: center; }
.plan-card.destacado .btn-primario {
  width: 100%;
  justify-content: center;
  background: color-mix(in srgb, var(--color-prod, var(--mint)) 12%, transparent);
  color: var(--color-prod, var(--mint));
  border: 1px solid color-mix(in srgb, var(--color-prod, var(--mint)) 45%, transparent);
}
.plan-card.destacado .btn-primario:hover {
  background: color-mix(in srgb, var(--color-prod, var(--mint)) 18%, transparent);
}

/* ---------- CTA final de producto ---------- */
.producto-cta { padding-block: 0 100px; }
.producto-cta-interior {
  border-radius: 24px;
  padding: 56px 40px;
  text-align: center;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, color-mix(in srgb, var(--color-prod, var(--mint)) 14%, transparent), transparent 60%),
    linear-gradient(160deg, var(--bg-2), var(--bg) 70%);
  border: 1px solid var(--border);
  color: var(--ink);
}
.producto-cta-titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3.2vw, 32px);
  margin: 0 0 12px;
}
.producto-cta-lede { font-size: 14.5px; opacity: 0.85; max-width: 44ch; margin: 0 auto 26px; }
.producto-cta .btn-primario {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-prod, var(--mint)) 100%, white 22%) 0%, var(--color-prod, var(--mint)) 55%, color-mix(in srgb, var(--color-prod, var(--mint)) 100%, black 22%) 100%);
  color: var(--bg);
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--color-prod, var(--mint)) 55%, transparent);
}
.producto-cta .btn-primario:hover {
  box-shadow: 0 14px 38px -8px color-mix(in srgb, var(--color-prod, var(--mint)) 65%, transparent);
}

/* ---------- Revelado en scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
}
.js-listo [data-reveal] {
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
[data-reveal].en-vista { opacity: 1; transform: translateY(0); }