/* ============================================================
   DYPO MDM · Landing promocional
   Paleta: azul + blanco + negro/navy. Limpio y editorial.
   Sin degradados azul-violeta, sin glassmorphism, sin partículas.
   ============================================================ */

/* Fuentes auto-hospedadas (OFL). Son los ficheros variables de Google Fonts,
   subconjuntos latin y latin-ext; el eje wght cubre 100..900 con un solo
   archivo, así que no hay que declarar un @font-face por peso. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #ffffff;        /* blanco base */
  --paper-2: #f5f8fc;      /* azul muy claro */
  --band: #eef3f9;         /* banda clara */
  --ink: #0c1622;          /* negro navy */
  --ink-soft: #303d4c;
  --muted: #63707e;
  --line: #e2e8f0;
  --line-soft: #eef2f7;

  --blue: #1466c4;         /* azul Dypo */
  --blue-deep: #0e4f9c;
  --blue-bright: #2b86e8;
  --blue-wash: rgba(20, 102, 196, 0.10);

  /* Verde Android, reservado a lo que acredita Android Enterprise. El tono
     oscuro es el que se usa sobre fondo claro: el verde de marca (#3ddc84) no
     llega al contraste AA sobre blanco. */
  --green-android: #1c7a41;
  --green-android-wash: rgba(28, 122, 65, 0.10);

  --ink-bg: #0c1622;       /* banda oscura */

  --container: 1180px;
  --shadow-hard: 8px 8px 0 var(--ink);
  --shadow-soft: 0 22px 50px -30px rgba(12, 22, 34, 0.35);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.04; margin: 0; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
em { font-style: italic; }

.container { width: min(100% - 2.6rem, var(--container)); margin-inline: auto; }
.narrow { max-width: 860px; }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand img { border-radius: 8px; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 1.22rem; letter-spacing: -0.02em; }
.brand-name span { color: var(--blue); }

/* Firma "x DYPO" junto al nombre del producto: el logo corporativo en su rojo,
   más pequeño que el nombre, inclinado y apoyado por debajo de su línea base. */
.brand-by {
  display: inline-flex;
  align-items: center;
  gap: .16rem;
  margin-left: -.05rem;
  transform: translateY(5px) rotate(-9deg);
  transform-origin: left center;
}
.brand-by-x {
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 600;
  line-height: 1;
  color: var(--muted);
}
.brand-by-logo {
  display: block;
  height: .58rem;
  width: auto;
  border-radius: 0;
}

.primary-nav ul { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.primary-nav a { color: var(--ink-soft); font-weight: 500; font-size: .96rem; }
.primary-nav a:not(.nav-cta):hover { color: var(--blue); }
.nav-cta { color: var(--blue) !important; font-weight: 600 !important; border-bottom: 2px solid var(--blue); padding-bottom: 2px; }

/* ===== Selector de idioma (solo banderas, como la consola de soporte) ===== */
.lang-select { position: relative; margin-left: 1.4rem; flex: 0 0 auto; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  background: none;
  border: 1px solid var(--line);
  padding: .3rem .5rem;
  cursor: pointer;
  line-height: 1;
  transition: border-color .18s ease;
}
.lang-btn:hover { border-color: var(--ink); }
.lang-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.lang-flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  box-shadow: 0 0 0 1px rgba(12, 22, 34, .12);
}

.lang-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--muted);
}

.lang-menu {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 60;
  min-width: 168px;
  margin: 0;
  padding: .3rem;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.lang-menu[hidden] { display: none; }

.lang-menu li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .48rem .6rem;
  cursor: pointer;
  font-size: .9rem;
  color: var(--ink-soft);
}
.lang-menu li:hover,
.lang-menu li:focus-visible { background: var(--band); color: var(--ink); outline: none; }
.lang-menu li.is-active { color: var(--blue); font-weight: 600; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 30px; height: 22px; position: relative; }
.nav-toggle span { position: absolute; left: 0; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: .3s; }
.nav-toggle span:nth-child(1){top:0} .nav-toggle span:nth-child(2){top:10px} .nav-toggle span:nth-child(3){top:20px}

/* ===== Botones ===== */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
  padding: .85rem 1.6rem; border-radius: 6px; font-weight: 600; font-size: 1rem;
  font-family: var(--sans); cursor: pointer; border: 2px solid var(--blue);
  transition: transform .15s, box-shadow .15s, background .2s, color .2s;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 4px 4px 0 var(--ink); }
.btn-primary:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); background: var(--blue-deep); }
.btn-primary:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.btn-block { width: 100%; }
.btn-text { border: 0; padding: .85rem .4rem; color: var(--blue-deep); box-shadow: none; }
.btn-text:hover { color: var(--blue-bright); }
.band-ink .btn-text { color: #9fc7f2; }

/* ===== Fondos con blur (imágenes de uso libre, aspecto técnico) ===== */
.has-bg { position: relative; isolation: isolate; overflow: clip; }
.has-bg > .container { position: relative; z-index: 2; }
.has-bg > .strip { position: relative; z-index: 2; }
.has-bg::before {
  content: ""; position: absolute; inset: -40px; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(15px) saturate(1.25); opacity: var(--bg-op, .08);
  transform: scale(1.06);
}
.band-ink.has-bg::before { opacity: var(--bg-op, .3); }

/* Imágenes de fondo por sección (rutas relativas al CSS).
   Claras: circuito/esquemático (textura uniforme). Oscuras: código, servidores, Tierra. */
.hero::before      { background-image: url("../assets/img/bg/tech-circuit.jpg"); }
#reto::before      { background-image: url("../assets/img/bg/tech-cyber.jpg"); }
#que-hace::before  { background-image: url("../assets/img/bg/tech-circuit.jpg"); }
#recorrido::before { background-image: url("../assets/img/bg/tech-code.jpg"); }
#por-dentro::before{ background-image: url("../assets/img/bg/tech-circuit.jpg"); }
#signage::before    { background-image: url("../assets/img/bg/tech-network.jpg"); }
#sectores::before  { background-image: url("../assets/img/bg/tech-cyber.jpg"); }
#seguridad::before { background-image: url("../assets/img/bg/tech-circuit.jpg"); }
#preguntas::before { background-image: url("../assets/img/bg/tech-cyber.jpg"); }
#demo::before      { background-image: url("../assets/img/bg/tech-server.jpg"); }

/* ===== Hero (visible con logos "Compatible con" sin scroll) =====
   Se resta el header sticky (72px) + la banda de logos inferior (~5.5rem ≈ 88px)
   para que tanto la tira del hero como los logos queden en la primera pantalla. */
.hero { min-height: calc(100vh - 72px - 5.5rem); min-height: calc(100svh - 65px - 5.5rem); display: flex; flex-direction: column; padding-top: 1rem; position: relative; }
.hero-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 3.4rem; align-items: center; align-content: center; padding: 1rem 0; }
.kicker { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 1.1rem; }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 600; margin-bottom: 1.1rem; }
.hero h1 em { color: var(--blue); font-style: italic; }
.hero-lead { font-size: 1.14rem; color: var(--ink-soft); max-width: 33rem; }
.hero-actions { display: flex; align-items: center; gap: 1.2rem; margin: 1.5rem 0 .9rem; flex-wrap: wrap; }
.hero-foot { font-size: .88rem; color: var(--muted); }
.kicker { margin-bottom: .8rem; }

.hero-visual { position: relative; }
.hero-caption { margin-top: 1rem; font-size: .85rem; color: var(--muted); text-align: right; font-style: italic; font-family: var(--display); }

/* Rotación de capturas del hero: las imágenes se apilan en la misma celda de
   grid, así el marco no cambia de alto al cruzar de una a otra.
   El encuadre común es 2:1. `scripts/capture-console-shots.ps1` genera la
   captura de la consola ya a esa proporción (3456x1728); la de Managed Play
   viene de producción con otra proporción y la recorta aquí `object-fit`,
   dejando el diálogo del catálogo completo y centrado. */
.shots-stack { display: grid; background: #fff; min-width: 0; }
.shots-stack .shot {
  grid-area: 1 / 1;
  width: 100%;
  /* Sin esto el `min-width:auto` de la celda de grid toma el ancho intrínseco de
     la captura (3456 px) y desborda el hero en pantallas estrechas. */
  min-width: 0;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  z-index: 0;
  /* La saliente no se desvanece: desaparece de golpe cuando la entrante ya es
     opaca. Si ambas cruzaran a la vez se vería el fondo blanco a través de las
     dos y la captura parecería lavada a mitad de transición. El retardo debe
     coincidir con la duración del fundido de .is-active. */
  transition: opacity 0s linear .3s;
}
.shots-stack .shot.is-active {
  opacity: 1;
  z-index: 1;
  transition: opacity .3s ease;
}

.hero-shots-foot { display: flex; align-items: baseline; justify-content: flex-end; gap: 1rem; }
.hero-shots-foot .hero-caption { margin-top: 1rem; }
.shots-dots { display: flex; gap: .4rem; margin-top: 1rem; }
.shots-dots button {
  width: 18px; height: 3px; padding: 0;
  border: 0; background: var(--line);
  cursor: pointer; transition: background .25s;
}
.shots-dots button:hover { background: var(--ink-soft); }
.shots-dots button[aria-selected="true"] { background: var(--blue); }
.shots-dots button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .shots-stack .shot,
  .shots-stack .shot.is-active { transition: none; }
}

/* ===== Marcos (frames honestos) ===== */
.frame { margin: 0; background: #fff; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-hard); }
.frame img { width: 100%; display: block; }
.frame-bar { display: flex; align-items: center; gap: .4rem; padding: .55rem .8rem; background: var(--ink); }
.frame-bar .d { width: 10px; height: 10px; border-radius: 50%; background: #45525f; }
.frame-bar .d:first-child { background: var(--blue-bright); }
.frame-url { margin-left: .7rem; font-size: .74rem; color: #aebac6; font-family: var(--sans); }
.frame figcaption:not(.frame-bar) { padding: .85rem 1.05rem; font-size: .9rem; color: var(--ink-soft); border-top: 1px solid var(--line-soft); font-family: var(--display); font-style: italic; }

/* ===== Tira (pie del hero) ===== */
.strip { border-top: 1px solid var(--line); background: rgba(255,255,255,0.55); backdrop-filter: blur(4px); }
.strip-row { display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; padding: 1.4rem 0; justify-content: center; }
.strip-row > span,
.strip-row > .strip-cert { font-size: .9rem; font-weight: 500; position: relative; }
.strip-row > span { color: var(--ink-soft); }
/* El separador cuelga de cualquier hijo, no solo de los span: en la tira conviven
   etiquetas y el boton de la certificacion. */
.strip-row > *:not(:last-child)::after { content: "·"; position: absolute; right: -1.35rem; color: var(--blue); }

/* Android Enterprise es lo unico de la tira que abre algo, y va en verde para
   que se distinga del resto de etiquetas. */
.strip-row > .strip-cert {
  font-family: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--green-android);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--green-android-wash);
  transition: text-decoration-color .18s ease;
}
.strip-row > .strip-cert:hover { text-decoration-color: var(--green-android); }
.strip-row > .strip-cert:focus-visible { outline: 2px solid var(--green-android); outline-offset: 4px; border-radius: 2px; }

/* ===== Cierre de Signage ===== */
.signage-strip {
  margin-top: 3.5rem;
  background: rgba(255, 255, 255, .55);
  border-top: 1px solid rgba(20, 102, 196, .18);
  backdrop-filter: blur(8px);
}
.signage-strip-row {
  display: grid;
  grid-template-columns: minmax(190px, .85fr) minmax(260px, 1.4fr) auto;
  align-items: center;
  justify-content: stretch;
  gap: 1.25rem 2rem;
  padding: 1rem 0;
}
.signage-strip-row > span {
  font-size: .82rem;
  line-height: 1.45;
  color: var(--muted);
}
.signage-strip-row > span::after { content: none !important; }
.signage-strip-brand { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.signage-strip-brand .logo-samsung { width: 150px; min-width: 0; margin: 0; }
.signage-strip-brand span { font-size: .72rem; line-height: 1.35; color: var(--muted); }
.signage-strip .btn { padding: .65rem 1rem; font-size: .9rem; white-space: nowrap; }

#signage { padding-bottom: 0; }
#signage > .signage-strip { margin-top: auto; }

/* ===== Secciones (presencia de pantalla completa) ===== */
.section { padding: 7rem 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.band-cream { background: var(--band); }
.band-ink { background: var(--ink-bg); color: #dce6f1; }
.band-ink h2, .band-ink h3 { color: #fff; }

.section-num { font-size: .82rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); margin-bottom: 1rem; }
.band-ink .section-num { color: #6fb0ee; }
.section-head { margin-bottom: 3.2rem; max-width: 40rem; }
.section-head.left { margin-inline: 0; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 3rem); }

/* ===== El problema ===== */
.lead-statement { font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-weight: 500; line-height: 1.14; max-width: 24ch; margin-bottom: 2.6rem; }
.lead-statement .mark { background: linear-gradient(transparent 60%, var(--blue-wash) 60%); padding: 0 .1em; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.two-col p { font-size: 1.06rem; color: var(--ink-soft); }
.two-col strong { color: var(--ink); }

/* ===== Capacidades (lista editorial) ===== */
.cap-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.cap { display: flex; gap: 1.3rem; padding: 2.1rem 2.2rem 2.1rem 0; border-bottom: 1px solid var(--line); }
.cap:nth-child(odd) { padding-right: 2.6rem; border-right: 1px solid var(--line); padding-left: .2rem; }
.cap:nth-child(even) { padding-left: 2.4rem; }
.cap-idx { font-family: var(--display); font-size: 1rem; font-weight: 700; color: var(--blue); flex: none; padding-top: .25rem; }
.cap-body h3 { font-size: 1.32rem; margin-bottom: .5rem; }
.cap-body p { color: var(--muted); font-size: .98rem; }

/* ===== Recorrido / scrollytelling ===== */
.tour-grid { display: grid; grid-template-columns: 380px 1fr; gap: 4.5rem; align-items: start; }
.tour-sticky { position: sticky; top: 110px; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.tour-note { font-size: .8rem; color: #8ea2b6; text-align: center; max-width: 260px; }

.device-phone {
  width: 270px; background: #060d15; border: 3px solid #000; border-radius: 40px;
  padding: 12px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); position: relative;
}
.phone-speaker { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 54px; height: 6px; border-radius: 6px; background: #000; z-index: 3; }
.phone-screen { position: relative; border-radius: 28px; overflow: hidden; background: #fff; aspect-ratio: 9/19; }

.tour-panel { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); transition: opacity .45s, transform .45s; pointer-events: none; }
.tour-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }

.scr { position: absolute; inset: 0; padding: 40px 16px 18px; display: flex; flex-direction: column; gap: 14px; color: var(--ink); }
.scr-top { display: flex; align-items: center; gap: .5rem; font-family: var(--display); font-size: .95rem; }
.scr-top img { border-radius: 6px; }
.scr-foot { margin-top: auto; font-size: .74rem; color: var(--muted); }

.scr-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.scr-kpis span { display: flex; flex-direction: column; padding: 10px 8px; border: 1px solid var(--line-soft); border-radius: 8px; font-size: .62rem; color: var(--muted); background: var(--paper-2); }
.scr-kpis i { font-family: var(--display); font-style: normal; font-size: 1.25rem; color: var(--ink); font-weight: 700; }
.scr-bars { display: flex; align-items: flex-end; gap: 7px; height: 96px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--paper-2); }
.scr-bars b { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--blue); }
.scr-bars b:nth-child(even){ background: var(--blue-bright); }

.scr-kiosk .scr-apps { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; padding: 6px; }
.scr-kiosk .scr-apps span { aspect-ratio: 1; border-radius: 16px; background: var(--paper-2); border: 1px solid var(--line-soft); position: relative; }
.scr-kiosk .scr-apps span::after { content:""; position:absolute; inset: 28% 28% auto 28%; aspect-ratio:1; border-radius: 8px; background: var(--blue); }
.scr-kiosk .scr-apps span:nth-child(2)::after{ background: var(--blue-bright); }
.scr-kiosk .scr-apps span:nth-child(3)::after{ background: var(--blue-deep); }
.scr-kiosk .scr-apps span:nth-child(4)::after{ background: var(--ink-soft); }

.scr-map .scr-mapzone { flex: 1; border-radius: 10px; border: 1px solid var(--line-soft); position: relative;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 26px 26px; background-color: var(--paper-2); }
.scr-map .pin { position: absolute; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.scr-map .pin.a { top: 26%; left: 30%; background: var(--blue); }
.scr-map .pin.b { top: 52%; left: 62%; background: var(--blue-bright); }
.scr-map .pin.c { top: 70%; left: 38%; background: var(--blue-deep); }

.scr-upd .scr-rows { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.scr-upd .scr-rows i { font-style: normal; font-size: .72rem; color: var(--ink-soft); border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 10px; position: relative; overflow: hidden; background: var(--paper-2); }
.scr-upd .scr-rows i::after { content:""; position:absolute; left:0; bottom:0; height:3px; width: var(--p); background: var(--blue); }

.tour-steps { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.tour-step { padding: 2.6rem 0; border-top: 1px solid rgba(255,255,255,0.14); opacity: .4; transition: opacity .4s; counter-increment: t; }
.tour-step:first-child { border-top: 0; }
.tour-step.is-active { opacity: 1; }
.tour-step h3 { font-size: 1.7rem; margin-bottom: .6rem; }
.tour-step h3::before { content: counter(t, decimal-leading-zero); font-family: var(--display); font-size: 1rem; color: #6fb0ee; display: block; margin-bottom: .5rem; letter-spacing: .05em; }
.tour-step p { color: #aebccb; font-size: 1.05rem; max-width: 34rem; }

/* ===== Capturas ===== */
.shots { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; align-items: start; }
.shots .frame:nth-child(2) { margin-top: 2.5rem; }

/* ===== Sectores ===== */
.sectors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.sector { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 1.7rem; transition: transform .18s, box-shadow .18s, border-color .18s; }
.sector:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: var(--blue); }
.sector h3 { font-size: 1.28rem; margin-bottom: .55rem; }
.sector h3::after { content: ""; display: block; width: 34px; height: 3px; background: var(--blue); margin-top: .6rem; }
.sector p { color: var(--muted); font-size: .96rem; }

/* ===== Seguridad ===== */
.split-quote { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.pull { margin: 0; font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.9rem); font-weight: 500; line-height: 1.12; }
.pull span { color: var(--blue); }
.secure-copy p { font-size: 1.08rem; color: var(--ink-soft); margin-bottom: 1.4rem; }
.tick-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.tick-list li { padding-left: 1.9rem; position: relative; color: var(--ink-soft); }
.tick-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; background: var(--blue); border-radius: 3px; }

/* ===== FAQ ===== */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1.4rem 2.5rem 1.4rem 0; font-family: var(--display); font-size: 1.2rem; font-weight: 500; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .3rem; top: 1.2rem; font-size: 1.6rem; color: var(--blue); transition: transform .2s; line-height: 1; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 2.5rem 1.5rem 0; color: var(--muted); max-width: 60ch; }

/* ===== Demo ===== */
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
.demo-copy h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 1.1rem; }
.demo-lead { color: #aebccb; font-size: 1.08rem; max-width: 30rem; }
.demo-contact { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.demo-contact li { display: flex; flex-direction: column; gap: .1rem; }
.demo-contact span { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #6fb0ee; }
.demo-contact a { font-family: var(--display); font-size: 1.3rem; color: #fff; }
.demo-contact a:hover { color: var(--blue-bright); }

.demo-form { background: #fff; border-radius: 10px; padding: 2rem; color: var(--ink); box-shadow: var(--shadow-soft); }
.field { margin-bottom: 1.05rem; display: flex; flex-direction: column; gap: .35rem; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { font-size: .84rem; font-weight: 600; color: var(--ink-soft); }
.field .opt { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; padding: .75rem .85rem;
  color: var(--ink); font: inherit; font-size: .96rem; transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: #fff; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
.field textarea { resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7382' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 18px; }
.checkbox { display: flex; align-items: flex-start; gap: .55rem; font-size: .88rem; color: var(--muted); margin: .3rem 0 1.1rem; cursor: pointer; }
.checkbox input { margin-top: .2rem; accent-color: var(--blue); width: 16px; height: 16px; }
.form-fineprint { font-size: .78rem; color: var(--muted); margin-top: .8rem; text-align: center; }
.form-note { margin-top: .9rem; font-size: .92rem; text-align: center; }
.form-note.ok { color: #1a7a45; }
.form-note.err { color: #c0392b; }
.form-note a { color: var(--blue-deep); text-decoration: underline; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--blue-deep); text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: var(--blue); }

/* ===== Dialog ===== */
dialog { border: 0; border-radius: 12px; padding: 0; max-width: min(680px, 94vw); width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(6,18,32,.55); backdrop-filter: blur(3px); }
.dialog-inner { padding: 2.2rem 2.4rem 2rem; position: relative; }
.dialog-close { position: absolute; top: 1rem; right: 1rem; background: none; border: 0; font-size: 1.4rem; color: var(--muted); cursor: pointer; line-height: 1; padding: .2rem .4rem; border-radius: 4px; }
.dialog-close:hover { background: var(--line); color: var(--ink); }
.dialog-inner h2 { margin-top: 0; margin-bottom: 1.4rem; font-size: 1.4rem; }
.dialog-inner h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; color: var(--ink); }
.dialog-body { max-height: 60vh; overflow-y: auto; padding-right: .6rem; font-size: .93rem; line-height: 1.7; color: var(--text); }
.dialog-body ul { padding-left: 1.2rem; margin: .4rem 0 .8rem; }
.dialog-body a { color: var(--blue-deep); }

/* ===== Footer ===== */
.site-footer { background: var(--ink-bg); color: #aebccb; padding: 3.5rem 0 2rem; }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-name span { color: #6fb0ee; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 2.5rem; margin-bottom: 2.5rem; align-items: start; }
.footer-brand p { margin-top: .9rem; font-size: .92rem; max-width: 24rem; }
.footer-col h4 { color: #fff; font-size: 1rem; margin-bottom: 1rem; font-weight: 600; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.footer-col a { color: #aebccb; font-size: .92rem; }
.footer-ens { display: flex; align-items: flex-start; justify-content: flex-end; }
.footer-ens img { max-width: 130px; width: 100%; height: auto; border-radius: 4px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,0.12); font-size: .82rem; color: #8ea2b6; }

/* ===== To top ===== */
.to-top { position: fixed; right: 20px; bottom: 20px; width: 46px; height: 46px; border-radius: 6px; display: grid; place-items: center; background: var(--blue); color: #fff; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-size: 1.2rem; z-index: 90; opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; }
.to-top.show { opacity: 1; transform: none; }
.to-top[hidden] { display: grid; }

/* ===== Reveal ===== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ===== Banda "Compatible con" (logos de marca) ===== */
.compat { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.compat-inner { display: flex; align-items: center; justify-content: center; gap: 1.4rem 3rem; padding: 1.5rem 0; flex-wrap: wrap; }
.compat-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.compat-logos { display: flex; align-items: center; gap: 2.6rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.compat-logo { display: flex; align-items: center; gap: .6rem; }
.compat-logo img { display: block; height: 30px; width: auto; }
.compat-name { font-size: .8rem; line-height: 1.08; color: var(--muted); }
.compat-name b { display: block; font-weight: 700; color: var(--ink); }
.compat-knox { font-family: var(--display); font-size: 1.15rem; align-self: center; }
.compat-knox b { color: var(--ink); }

/* Wordmark oficial de Samsung — normas de marca:
   color original (Samsung Blue #1428A0) sobre fondo claro, proporción intacta (1600:425),
   sin rotar, recolorear ni aplicar efectos, y con área de protección alrededor.
   Sobre fondo oscuro debe usarse samsung-wordmark-white.png. */
.logo-samsung {
  height: auto;              /* la proporción manda: nunca deformar */
  width: 200px;
  max-width: 100%;
  min-width: 120px;          /* tamaño mínimo legible */
  margin: 0 clamp(1rem, 2vw, 2rem);  /* área de protección */
  filter: none;              /* sin sombras ni efectos */
}

/* Wordmark de Zebra enlazando a su certificado de autorización. El PNG ya viene
   en blanco y negro, así que no lleva ningún filtro encima. */
/* El propio logo es el enlace o el disparador del dialogo: no hay boton aparte.
   La unica senal es el cursor y, con teclado, el foco visible; el wordmark no se
   altera. Cuando es un <button> hay que quitarle el fondo y el borde propios del
   control para que no aparezca una caja alrededor de la marca. */
.partner-cert {
  display: inline-flex;
  align-items: center;
}
button.partner-cert {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.partner-cert:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 6px;
}

/* Insignias del programa de partners de Samsung dentro de su dialogo. Se
   muestran completas (object-fit: contain) y sobre fondo claro: son imagenes de
   marca, no se recortan ni se recolorean. */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.6rem;
  list-style: none;
  margin: 1.4rem 0 .4rem;
  padding: 0;
}
.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  text-align: center;
}
.badge-item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
}
.badge-item span {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

/* ===== Mockups de terminales flotantes ===== */
.floaters { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: clip; }
.dev { position: absolute; background: #0b131d; border: 3px solid #04090f; box-shadow: 0 34px 60px -26px rgba(6, 14, 24, .55); animation: floaty 8s ease-in-out infinite; }
.dev-screen { position: relative; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(155deg, #f2f6fb 0%, #dde8f4 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; overflow: hidden; }
.dev-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.35), transparent 40%); }
.dev-wm { opacity: .55; }
.dev-tag { font-size: .68rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); z-index: 1; }

.dev-bar { width: 152px; height: 320px; border-radius: 28px; padding: 8px; }
.dev-bar .dev-screen { border-radius: 21px; }
.dev-sm { width: 122px; height: 256px; border-radius: 24px; }
.dev-cam { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; background: #05203a; box-shadow: 0 0 0 2px #04090f; z-index: 3; }

.dev-fold { width: 306px; height: 236px; border-radius: 16px; padding: 9px; }
.dev-fold .dev-screen { border-radius: 9px; }
.dev-hinge { position: absolute; top: 10px; bottom: 10px; left: 50%; width: 2px; transform: translateX(-50%); background: rgba(255,255,255,.08); z-index: 3; }

/* TV / pantalla grande */
.dev-tv { width: 380px; height: 220px; border-radius: 10px 10px 4px 4px; padding: 7px; }
.dev-tv .dev-screen { border-radius: 5px; }
.signage-preview { width: 100%; height: 100%; padding: 1rem 1.1rem .8rem; color: #fff; background: #0d3157; display: flex; flex-direction: column; justify-content: space-between; }
.signage-preview::before { content: ""; position: absolute; width: 145px; height: 145px; right: -50px; top: -70px; border: 22px solid rgba(43, 134, 232, .48); border-radius: 50%; }
.signage-preview::after { content: ""; position: absolute; width: 85px; height: 85px; left: -35px; bottom: -48px; background: rgba(20, 102, 196, .6); transform: rotate(45deg); }
.signage-preview-top, .signage-preview-footer { position: relative; z-index: 1; display: flex; align-items: center; gap: .45rem; font-size: .55rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.signage-preview-top img { width: 20px; height: 20px; opacity: .95; }
.signage-preview-top i { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: #6ee7ad; box-shadow: 0 0 0 4px rgba(110, 231, 173, .16); }
.signage-preview-copy { position: relative; z-index: 1; }
.signage-preview-copy span { display: block; margin-bottom: .35rem; color: #9fcbf8; font-size: .62rem; font-weight: 600; letter-spacing: .03em; }
.signage-preview-copy strong { display: block; font-family: var(--display); font-size: 1.48rem; font-weight: 600; line-height: .98; letter-spacing: 0; }
.signage-preview-footer { padding-top: .55rem; border-top: 1px solid rgba(255, 255, 255, .22); color: #c7def4; font-size: .48rem; }
.signage-preview-footer b { margin-left: auto; color: #6ee7ad; font-size: .46rem; }
.signage-preview-patients { background: #1a5c58; }
.signage-preview-patients::before { right: auto; left: -50px; border-color: rgba(93, 214, 188, .42); }
.signage-preview-patients::after { right: -35px; left: auto; background: rgba(25, 143, 130, .6); }
.signage-preview-patients .signage-preview-copy span { color: #b9efe3; }
.signage-preview-patients .signage-preview-top i,
.signage-preview-patients .signage-preview-footer b { color: #a7f3d0; }
.signage-preview-patients .signage-preview-top i { background: #a7f3d0; box-shadow: 0 0 0 4px rgba(167, 243, 208, .16); }
.signage-preview-patients .signage-preview-footer { color: #c1e9e0; }
.dev-tv::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 20px;
  background: #0b131d;
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
}
.dev-tv::before {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 10px;
  background: #0b131d;
  border-radius: 0 0 6px 6px;
}
.float-tv { --rot: -2deg; top: 15%; right: -60px; animation-duration: 11s; animation-delay: -4s; }
.float-tv-patients { --rot: 3deg; width: 190px; height: 110px; bottom: 10rem; left: 12px; animation-duration: 9.5s; animation-delay: -2s; }
.float-tv-patients .signage-preview { padding: .55rem .65rem .45rem; }
.float-tv-patients .signage-preview-top { gap: .3rem; font-size: .35rem; }
.float-tv-patients .signage-preview-top img { width: 13px; height: 13px; }
.float-tv-patients .signage-preview-top i { width: 4px; height: 4px; box-shadow: 0 0 0 2px rgba(167, 243, 208, .16); }
.float-tv-patients .signage-preview-copy span { margin-bottom: .15rem; font-size: .42rem; }
.float-tv-patients .signage-preview-copy strong { font-size: .85rem; }
.float-tv-patients .signage-preview-footer { padding-top: .3rem; font-size: .31rem; }
.float-tv-patients .signage-preview-footer b { font-size: .28rem; }

.float-a { --rot: 6deg;  top: 6%;  right: -26px; animation-duration: 9s; }
.float-b { --rot: -8deg; bottom: 7%; left: -18px; animation-duration: 7.5s; animation-delay: -1.5s; }
.float-c { --rot: -5deg; bottom: 8%; right: 4%; animation-duration: 6.8s; animation-delay: -3s; }

@keyframes floaty {
  0%, 100% { transform: rotate(var(--rot, 0deg)) translateY(0); }
  50%      { transform: rotate(var(--rot, 0deg)) translateY(-16px); }
}
@media (prefers-reduced-motion: reduce) { .dev { animation: none; } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .hero-caption { text-align: left; }
  .hero-shots-foot { justify-content: flex-start; }
  .two-col { grid-template-columns: 1fr; gap: 1.2rem; }
  .cap-list { grid-template-columns: 1fr; }
  .cap, .cap:nth-child(odd), .cap:nth-child(even) { padding: 1.8rem 0; border-right: 0; }
  .tour-grid { grid-template-columns: 1fr; gap: 2rem; }
  .tour-sticky { position: relative; top: 0; }
  .shots { grid-template-columns: 1fr; }
  .shots .frame:nth-child(2) { margin-top: 0; }
  .sectors { grid-template-columns: 1fr 1fr; }
  .split-quote, .demo-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-ens { justify-content: flex-start; grid-column: 1 / -1; }
  .floaters { display: none; }
  .signage-strip-row { grid-template-columns: minmax(0, 1fr) auto; }
  .signage-strip-row > span { grid-column: 1 / -1; }
  .compat-inner { gap: 1rem 2rem; }
}

@media (max-width: 640px) {
  .nav-toggle { display: block; z-index: 120; }
  /* Con el menu convertido en panel deslizante, la bandera se queda fuera y a
     la izquierda de la hamburguesa; si no, el orden del DOM la manda detras. */
  .lang-select { order: 2; margin-left: auto; margin-right: 1rem; }
  .nav-toggle { order: 3; }
  .lang-menu { right: -.5rem; }
  .primary-nav {
    position: fixed; inset: 0 0 0 auto; width: min(80%, 320px);
    background: #fff; border-left: 1px solid var(--line);
    transform: translateX(100%); transition: transform .3s; padding: 5.5rem 2rem 2rem;
  }
  .primary-nav.open { transform: none; box-shadow: -20px 0 60px -30px rgba(0,0,0,.5); }
  .primary-nav ul { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .section { padding: 4.2rem 0; }
  .sectors { grid-template-columns: 1fr; }
  .row-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-ens { justify-content: flex-start; }
  .footer-bottom { flex-direction: column; gap: .5rem; }
  .hero-actions { gap: .6rem; }
  .signage-strip { margin-top: 2.5rem; }
  .signage-strip-row { grid-template-columns: 1fr; gap: .7rem; padding: .9rem 0; }
  .signage-strip-brand { flex-direction: row; align-items: center; gap: .8rem; }
  .signage-strip-brand span { max-width: 13rem; }
  .signage-strip .btn { justify-self: start; }
}