/* ==========================================================================
   Rodar by iké — shell.css
   Vitrina de desktop: fondo, panel lateral y marco del celular.
   Paleta fija (no cambia con el tema de la app). La app vive en el iframe.
   ========================================================================== */

/* ---------- Fuente: Montserrat local (sin CDN, anda en file://) ---------- */
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-style: normal; font-display: swap; src: url("../assets/fonts/montserrat-latin-800-normal.woff2") format("woff2"); }

:root {
  --navy-profundo: #06223A;
  --navy: #0B2F4D;
  --celeste: #279DD9;
  --naranja: #F39214;
  --rojo: #E5322D;
  --texto: #FFFFFF;
  --texto-2: #9DB7CC;
  --texto-3: #7E9CB5;
  --linea: rgba(255, 255, 255, .09);
  --bisel: #0b0f14;

  /* Ritmo vertical: se achica en pantallas bajas para que todo entre sin scroll */
  --hueco: clamp(12px, 2.4vh, 28px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  background-color: var(--navy-profundo);
  color: var(--texto);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Fondo fijo: degradé radial sutil, un halo celeste detrás del celular y una trama de calles muy tenue */
body::before {
  content: "";
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 55% at 68% 50%, rgba(39, 157, 217, .14), rgba(39, 157, 217, 0) 70%),
    radial-gradient(ellipse 120% 100% at 15% 0%, var(--navy) 0%, var(--navy-profundo) 62%);
}
body::after {
  content: "";
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 60% 50%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 60% 50%, #000 20%, transparent 75%);
}

a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
}

.oculto { display: none !important; }

.icono { width: 16px; height: 16px; flex: none; }

/* ---------- Layout: apilado (celular arriba, panel abajo) ---------- */
.vitrina {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.escenario {
  order: -1;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel {
  width: 100%;
  max-width: 440px;
  padding: 8px 24px 64px;
}

/* ---------- Layout: dos columnas (panel a la izquierda, celular a la derecha) ---------- */
@media (min-width: 1000px) {
  .vitrina {
    grid-template-columns: 380px minmax(0, 1fr);
    column-gap: clamp(48px, 6vw, 96px);
    align-items: center;
    max-width: 1040px;
    height: 100vh;
    margin: 0 auto;
    padding: 0 32px;
  }
  .escenario {
    order: 0;
    height: 100vh;
    min-height: 0;
  }
  .panel {
    max-width: none;
    max-height: 100vh;
    overflow-y: auto;
    padding: clamp(16px, 4vh, 48px) 4px;
    scrollbar-width: none;
  }
  .panel::-webkit-scrollbar { display: none; }
}

/* ---------- Panel: marca y textos ---------- */
.panel-marca {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.panel-logo { margin: 0; line-height: 0; }
.logo-rodar { display: block; height: clamp(30px, 5.4vh, 42px); width: auto; color: var(--texto); }
.panel-firma {
  margin: 0 0 2px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  color: var(--texto-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.logo-ike { display: block; height: clamp(14px, 2.3vh, 18px); width: auto; color: var(--texto); }

.panel-bajada {
  margin: var(--hueco) 0 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
}
.panel-contexto {
  margin: 8px 0 0;
  color: var(--texto-2);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
}

/* ---------- Índice de pantallas ---------- */
.indice {
  margin-top: var(--hueco);
  padding-top: var(--hueco);
  border-top: 1px solid var(--linea);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 2vh, 20px) 16px;
}
.indice-titulo {
  margin: 0 0 4px;
  padding-left: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--texto-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.indice-titulo-choque::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rojo);
  box-shadow: 0 0 0 3px rgba(229, 50, 45, .2);
}
.indice-lista { margin: 0; padding: 0; list-style: none; }
.indice-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: clamp(4px, .8vh, 6px) 8px;
  border-radius: 8px;
  color: var(--texto);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.indice-num {
  min-width: 16px;
  color: var(--texto-3);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: color .15s ease;
}
.indice-link:hover { background: rgba(255, 255, 255, .07); }
.indice-link:hover .indice-num { color: var(--naranja); }

/* ---------- Controles: switch de tema y reiniciar ---------- */
.controles {
  margin-top: calc(var(--hueco) * 1.2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.switch-tema {
  display: inline-flex;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
}
.switch-opcion,
.btn-reiniciar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.switch-opcion {
  padding: 8px 13px;
  border: 0;
  background: transparent;
  color: var(--texto-2);
}
.switch-opcion:hover { color: var(--texto); }
.switch-opcion[aria-pressed="true"] {
  background: var(--texto);
  color: var(--navy-profundo);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.btn-reiniciar {
  padding: 10px 15px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: transparent;
  color: var(--texto);
}
.btn-reiniciar:hover {
  border-color: rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .06);
}
.btn-reiniciar .icono { color: var(--naranja); }

/* ---------- QR ---------- */
.qr {
  margin-top: calc(var(--hueco) * 1.2);
  display: flex;
  align-items: center;
  gap: 14px;
}
.qr-tarjeta {
  flex: none;
  padding: 5px;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  line-height: 0;
}
.qr-tarjeta img {
  display: block;
  width: clamp(64px, 11vh, 96px);
  height: clamp(64px, 11vh, 96px);
  border-radius: 7px;
}
.qr-leyenda { margin: 0; font-size: 14px; font-weight: 700; }
.qr-url { margin: 4px 0 0; color: var(--texto-2); font-size: 12px; font-weight: 500; }

/* ---------- Celular ----------
   .celular mide 414×868 (pantalla 390×844 + bisel de 12) y se escala con transform.
   .celular-caja ocupa el tamaño ya escalado, así no queda espacio en blanco ni scroll.
   js/vitrina.js calcula --escala. */
.celular-caja {
  --escala: 1;
  position: relative;
  flex: none;
  width: calc(414px * var(--escala));
  height: calc(868px * var(--escala));
}
.celular {
  position: absolute;
  top: 0;
  left: 0;
  width: 414px;
  height: 868px;
  padding: 12px;
  border-radius: 56px;
  background: var(--bisel);
  transform: scale(var(--escala));
  transform-origin: 0 0;
  box-shadow:
    0 0 0 2px #26313f,
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 0 0 9px rgba(39, 157, 217, .05),
    0 60px 120px -30px rgba(0, 0, 0, .75),
    0 30px 60px -24px rgba(1, 10, 20, .7);
}
/* Botones laterales: acción y volumen a la izquierda, encendido a la derecha */
.celular::before,
.celular::after {
  content: "";
  position: absolute;
  width: 4px;
  background: #1f2935;
}
.celular::before {
  left: -5px;
  top: 150px;
  height: 34px;
  border-radius: 3px 0 0 3px;
  box-shadow: 0 54px 0 #1f2935, 0 100px 0 #1f2935; /* dos de volumen */
}
.celular::after {
  right: -5px;
  top: 230px;
  height: 104px;
  border-radius: 0 3px 3px 0;
}
.celular-pantalla {
  position: relative;
  width: 390px;
  height: 844px;
  overflow: hidden;
  border-radius: 44px;
  clip-path: inset(0 round 44px); /* Safari recorta bien el iframe con esto */
  background: var(--navy-profundo);
}
.celular-pantalla iframe {
  display: block;
  width: 390px;
  height: 844px;
  border: 0;
}
.celular-isla {
  position: absolute;
  top: 23px; /* 12 de bisel + 11 */
  left: 50%;
  width: 120px;
  height: 34px;
  margin-left: -60px;
  border-radius: 17px;
  background: #000;
  pointer-events: none;
}

/* ---------- Teléfono: respaldo si la redirección a app/ no corre ----------
   Misma media query que Vitrina.MEDIA_TELEFONO. Sin marco: la app ocupa toda la pantalla. */
@media (max-width: 480px), (pointer: coarse) and (max-height: 480px) {
  html, body { height: 100%; overflow: hidden; }
  body::before, body::after { display: none; }
  .vitrina { display: block; max-width: none; height: 100%; margin: 0; padding: 0; }
  .panel { display: none; }
  .escenario { display: block; height: 100%; min-height: 0; }
  .celular-caja { width: 100vw; height: 100vh; height: 100dvh; }
  .celular {
    position: static;
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 0;
    background: none;
    transform: none;
    box-shadow: none;
  }
  .celular::before, .celular::after, .celular-isla { display: none; }
  .celular-pantalla { width: 100%; height: 100%; border-radius: 0; clip-path: none; }
  .celular-pantalla iframe { width: 100vw; height: 100vh; height: 100dvh; }
}