/* ARC — Phone showcase (index.html only) · Slate v1.0
   Demo móvil interactivo con colores/tipografía personalizables en vivo.
   El dispositivo y la app internos son un port del proyecto de referencia
   IGNIS (IGNIS/IGNIS/index.html: #phone-wrap / #phone-device), traducido de
   utilidades Tailwind a CSS con ámbito propio y mapeado a las variables
   --arc-phone-*. Encapsulado bajo .arc-phone-showcase / .arc-phone /
   .arc-phone-lab / .arc-phone-app — no toca main.css y no filtra estilos
   globales. Lógica: assets/js/arc-phone-showcase.js */

/* ── Shell + tokens del demo ─────────────────────────────────── */
.arc-phone-showcase {
  /* Colores del demo — el laboratorio de color reescribe estas variables */
  --arc-phone-primary: #D43828;
  --arc-phone-on-primary: #FFFFFF;
  --arc-phone-secondary: #1B1E2A;
  --arc-phone-on-secondary: #FFFFFF;
  --arc-phone-bg: #FFFFFF;
  --arc-phone-surface: #F5F5F7;
  --arc-phone-text: #1B1E2A;
  --arc-phone-muted: #7A7E92;
  --arc-phone-line: rgba(27, 30, 42, 0.10);
  --arc-phone-frame: #171717;
  --arc-phone-font: var(--arc-font-sans);

  position: relative;
  background: var(--arc-card);
  border-top: 1px solid var(--arc-cloud);
  border-bottom: 1px solid var(--arc-cloud);
  padding-block: 112px;
  overflow: hidden;
}

.arc-phone-showcase__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

/* ── Columna de texto ────────────────────────────────────────── */
.arc-phone-showcase__copy h2 {
  margin-top: 22px;
  max-width: 560px;
  font-size: clamp(32px, 4.4vw, 54px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.014em;
}

.arc-phone-showcase__sub {
  margin-top: 20px;
  max-width: 520px;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.6;
  color: var(--arc-ink-70);
}

.arc-phone-showcase__points {
  list-style: none;
  margin-top: 40px;
  display: grid;
  gap: 26px;
  max-width: 520px;
}

.arc-phone-showcase__points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
}

.arc-phone-showcase__point-marker {
  font-family: var(--arc-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--arc-vermillion);
  padding-top: 5px;
  border-top: 1px solid var(--arc-vermillion);
  min-width: 34px;
}

.arc-phone-showcase__points h3 {
  font-family: var(--arc-font-sans);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--arc-ink);
}

.arc-phone-showcase__points p {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--arc-steel);
}

/* CTA de texto — subrayado animado sobre fondo claro */
.arc-phone-showcase__cta {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 34px;
  padding: 4px 0 10px;
  font-family: var(--arc-font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--arc-ink);
  width: max-content;
  max-width: 100%;
}
.arc-phone-showcase__cta-arrow {
  display: inline-block;
  line-height: 1;
  color: var(--arc-vermillion);
  transition: transform 320ms var(--ease);
}
.arc-phone-showcase__cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--arc-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 640ms cubic-bezier(0.65, 0, 0.35, 1);
}
.arc-phone-showcase__cta:hover::after,
.arc-phone-showcase__cta:focus-visible::after { transform: scaleX(1); }
.arc-phone-showcase__cta:hover .arc-phone-showcase__cta-arrow,
.arc-phone-showcase__cta:focus-visible .arc-phone-showcase__cta-arrow { transform: translateX(4px); }
.arc-phone-showcase__cta:focus { outline: none; }
.arc-phone-showcase__cta:focus-visible {
  outline: 2px solid var(--arc-vermillion);
  outline-offset: 6px;
  border-radius: 2px;
}

/* ── Laboratorio de color ("Pruébalo en vivo") ───────────────── */
.arc-phone-lab {
  margin-top: 44px;
  padding: 26px 28px 28px;
  max-width: 520px;
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  border-radius: 14px;
  box-shadow: var(--arc-shadow-sm);
}

.arc-phone-lab__title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--arc-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arc-vermillion);
}
.arc-phone-lab__title::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}

.arc-phone-lab__hint {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--arc-steel);
}

.arc-phone-lab__group {
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  align-items: center;
  gap: 16px;
}

.arc-phone-lab__label {
  font-family: var(--arc-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--arc-ink-70);
}

.arc-phone-lab__swatches {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.arc-phone-lab__swatch {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--swatch, var(--arc-cloud));
  border: 1px solid rgba(27, 30, 42, 0.14);
  padding: 0;
  cursor: pointer;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.arc-phone-lab__swatch:hover { transform: scale(1.12); }
.arc-phone-lab__swatch::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color 180ms var(--ease);
}
.arc-phone-lab__swatch[aria-pressed="true"]::after {
  border-color: var(--arc-ink);
}
.arc-phone-lab__swatch:focus { outline: none; }
.arc-phone-lab__swatch:focus-visible {
  outline: 2px solid var(--arc-vermillion);
  outline-offset: 4px;
}

/* Selector de color personalizado (input nativo dentro de un label) */
.arc-phone-lab__custom {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px dashed var(--arc-ink-30);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}
.arc-phone-lab__custom:hover { transform: scale(1.12); border-color: var(--arc-ink-70); }
.arc-phone-lab__custom input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.arc-phone-lab__custom-icon {
  font-family: var(--arc-font-mono);
  font-size: 14px;
  line-height: 1;
  color: var(--arc-ink-70);
  pointer-events: none;
}
.arc-phone-lab__custom:focus-within {
  outline: 2px solid var(--arc-vermillion);
  outline-offset: 4px;
}
.arc-phone-lab__custom.is-selected { border-style: solid; border-color: var(--arc-ink); }

/* Campo hexadecimal (referencia: #brand-hex) */
.arc-phone-lab__hex {
  width: 96px;
  padding: 6px 9px;
  font-family: var(--arc-font-mono);
  font-size: 12.5px;
  color: var(--arc-ink);
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  border-radius: 8px;
  transition: border-color 180ms var(--ease);
}
.arc-phone-lab__hex:hover { border-color: var(--arc-ink-30); }
.arc-phone-lab__hex:focus {
  outline: 2px solid var(--arc-vermillion);
  outline-offset: 2px;
  border-color: var(--arc-ink-30);
}
.arc-phone-lab__hex.is-invalid { border-color: var(--arc-vermillion); }

/* Selector de tipografía (referencia: #brand-font) */
.arc-phone-lab__fontlabel { display: block; }
.arc-phone-lab__font {
  width: 100%;
  padding: 8px 10px;
  font-family: var(--arc-font-sans);
  font-size: 13px;
  color: var(--arc-ink);
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 180ms var(--ease);
}
.arc-phone-lab__font:hover { border-color: var(--arc-ink-30); }
.arc-phone-lab__font:focus {
  outline: 2px solid var(--arc-vermillion);
  outline-offset: 2px;
}

.arc-phone-lab__reset {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: var(--arc-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--arc-ink);
  background: transparent;
  border: 1px solid var(--arc-cloud);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.arc-phone-lab__reset:hover {
  border-color: var(--arc-ink-30);
  background: var(--arc-card);
}
.arc-phone-lab__reset:focus { outline: none; }
.arc-phone-lab__reset:focus-visible {
  outline: 2px solid var(--arc-vermillion);
  outline-offset: 3px;
}

/* ── Columna del dispositivo ─────────────────────────────────── */
.arc-phone-showcase__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.arc-phone-showcase__note {
  font-family: var(--arc-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--arc-steel);
  text-align: center;
}

/* ── Dispositivo (port del marco de referencia) ──────────────── */
/* Base de 300 px adaptada a ancho y alto de viewport. */
.arc-phone {
  position: relative;
  width: clamp(264px, min(20.5vw, calc(47svh - 79.9px)), 286px);
  margin-inline: auto;
}

/* Proporción compacta derivada de aspect-[9/19.5], con el mismo acabado del marco:
   rounded-[2.8rem] border-[10px] border-neutral-900
   bg-neutral-900 shadow-[0_30px_60px_-25px_rgba(0,0,0,0.5),
   0_0_0_2px_rgba(255,255,255,0.08)_inset] */
.arc-phone__frame {
  position: relative;
  aspect-ratio: 9 / 18.7;
  border-radius: 2.8rem;
  border: 10px solid var(--arc-phone-frame);
  background: var(--arc-phone-frame);
  box-shadow:
    0 30px 60px -25px rgba(0, 0, 0, 0.5),
    inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}

/* Referencia: isla dinámica h-6 w-24 top-2 */
.arc-phone__island {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 24px;
  border-radius: 999px;
  background: #000;
  z-index: 20;
  pointer-events: none;
}

/* Referencia: pantalla rounded-[2rem] bg-white, flex column */
.arc-phone__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2rem;
  background: var(--arc-phone-bg);
  color: var(--arc-phone-text);
  transition: background 240ms var(--ease), color 240ms var(--ease);
}

/* Status bar compacto: "9:41" + señal/wifi/batería. */
.arc-phone__statusbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 22px 3px;
  color: var(--arc-phone-text);
  transition: color 240ms var(--ease);
}
.arc-phone__time {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--arc-phone-font);
}
.arc-phone__status-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.arc-phone__st-signal { width: 16px; height: 12px; }
.arc-phone__st-wifi { width: 16px; height: 12px; }
.arc-phone__st-battery { width: 24px; height: 12px; }

/* Referencia: .no-scrollbar flex-1 overflow-y-auto pb-4
   (sin overscroll-contain: se conserva el encadenamiento natural del scroll
   para que la página siga navegable al llegar al tope/fondo del demo) */
.arc-phone__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.arc-phone__scroll::-webkit-scrollbar { display: none; }
.arc-phone__scroll:focus { outline: none; }
.arc-phone__scroll:focus-visible {
  outline: 3px solid var(--arc-vermillion);
  outline-offset: -3px;
  border-radius: 2rem;
}

/* ── App interna (adaptación compacta del contenido) ────────── */
.arc-phone-app {
  font-family: var(--arc-phone-font);
  font-size: 13px;
  line-height: 1.45;
  color: var(--arc-phone-text);
}

/* Etiqueta de bloque: text-[11px] font-semibold uppercase neutral-400 */
.arc-phone-app__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--arc-phone-muted);
}

/* Header hero compacto con color de marca. */
.arc-phone-app__hero {
  margin: 4px 12px 0;
  border-radius: 16px;
  overflow: hidden;
}
.arc-phone-app__hero-media {
  position: relative;
  height: 148px;
  width: 100%;
  background: var(--arc-phone-primary);
  transition: background 240ms var(--ease);
}
.arc-phone-app__hero-light {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background: radial-gradient(circle at 80% 20%, #fff, transparent 55%);
}
.arc-phone-app__hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2) 50%, transparent);
}
.arc-phone-app__hero-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px;
}
/* Blanco fijo: siempre descansa sobre el degradado oscuro inferior */
.arc-phone-app__hello {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.arc-phone-app__biz {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

/* Puntos de lealtad compactos. */
.arc-phone-app__loyalty {
  margin: 10px 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px;
  background: var(--arc-phone-surface);
  padding: 10px 12px;
  transition: background 240ms var(--ease);
}
.arc-phone-app__points {
  font-size: 16px;
  font-weight: 700;
  color: var(--arc-phone-primary);
  transition: color 240ms var(--ease);
}
.arc-phone-app__points-label {
  margin-left: 4px;
  font-size: 11px;
  color: var(--arc-phone-muted);
}
.arc-phone-app__redeem {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--arc-phone-on-primary);
  background: var(--arc-phone-primary);
  transition: background 240ms var(--ease), color 240ms var(--ease);
}

/* Próxima cita. */
.arc-phone-app__appt {
  margin: 10px 12px 0;
  border-radius: 12px;
  border: 1px solid var(--arc-phone-line);
  padding: 12px;
}
.arc-phone-app__appt-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.arc-phone-app__appt-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--arc-phone-text);
}
.arc-phone-app__appt-meta {
  font-size: 12px;
  color: var(--arc-phone-muted);
}
.arc-phone-app__appt-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--arc-phone-primary);
  color: var(--arc-phone-on-primary);
  transition: background 240ms var(--ease), color 240ms var(--ease);
}
.arc-phone-app__appt-icon svg { width: 16px; height: 16px; }

/* Bloques genéricos con ritmo vertical compacto. */
.arc-phone-app__block { margin: 14px 12px 0; }

/* Acciones rápidas: grid-cols-4 gap-2 */
.arc-phone-app__quick {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  text-align: center;
}
.arc-phone-app__quick-btn {
  display: block;
  border-radius: 12px;
  background: var(--arc-phone-surface);
  padding: 10px 4px;
  transition: background 240ms var(--ease);
}
.arc-phone-app__quick-btn svg {
  display: block;
  margin-inline: auto;
  width: 16px;
  height: 16px;
  color: var(--arc-phone-primary);
  transition: color 240ms var(--ease);
}
.arc-phone-app__quick-btn span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--arc-phone-muted);
}

/* Tratamientos: grid-cols-2 gap-2, media h-16 con degradado de marca */
.arc-phone-app__treatments {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.arc-phone-app__treatment {
  border-radius: 12px;
  border: 1px solid var(--arc-phone-line);
  overflow: hidden;
}
.arc-phone-app__treatment-media {
  height: 64px;
  transition: background 240ms var(--ease);
}
/* El extremo oscuro del degradado usa el color secundario del laboratorio
   (la referencia usa rgba(0,0,0,.55); el secundario ARC por defecto es tinta) */
.arc-phone-app__treatment-media--a {
  background: linear-gradient(135deg, var(--arc-phone-primary), var(--arc-phone-secondary));
}
.arc-phone-app__treatment-media--b {
  background: linear-gradient(315deg, var(--arc-phone-primary), var(--arc-phone-secondary));
}
.arc-phone-app__treatment-body { padding: 8px; }
.arc-phone-app__treatment-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--arc-phone-text);
}
.arc-phone-app__treatment-price {
  font-size: 10px;
  color: var(--arc-phone-muted);
}

/* Actividad reciente: filas bg-neutral-100 con icono circular blanco */
.arc-phone-app__activity {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}
.arc-phone-app__activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  background: var(--arc-phone-surface);
  padding: 10px;
  transition: background 240ms var(--ease);
}
.arc-phone-app__activity-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--arc-phone-bg);
  color: var(--arc-phone-primary);
  transition: background 240ms var(--ease), color 240ms var(--ease);
}
.arc-phone-app__activity-icon svg { width: 14px; height: 14px; }
.arc-phone-app__activity-copy { min-width: 0; }
.arc-phone-app__activity-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--arc-phone-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arc-phone-app__activity-meta {
  font-size: 10px;
  color: var(--arc-phone-muted);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (min-width: 901px) {
  /* Referencia: #phone-device lg:sticky lg:top-28 */
  .arc-phone-showcase__inner { align-items: start; }
  .arc-phone-showcase__stage {
    position: sticky;
    top: 96px;
  }
}

@media (max-width: 1180px) {
  .arc-phone-showcase__inner { gap: 40px; }
}

@media (max-width: 1024px) {
  .arc-phone-showcase { padding-block: 80px; }
}

@media (max-width: 900px) {
  .arc-phone-showcase__inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .arc-phone-showcase__copy h2,
  .arc-phone-showcase__sub,
  .arc-phone-showcase__points,
  .arc-phone-lab { max-width: 640px; }
  .arc-phone-showcase__stage { order: 1; }
  .arc-phone { width: min(286px, 78vw, calc(48svh - 53.76px)); }
}

@media (max-width: 768px) {
  .arc-phone-showcase { padding-block: 64px; }
}

@media (max-width: 480px) {
  .arc-phone-lab { padding: 20px 18px 22px; }
  .arc-phone-lab__group {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .arc-phone-lab__swatch,
  .arc-phone-lab__custom { width: 34px; height: 34px; }
  .arc-phone { width: min(270px, 84vw, calc(48svh - 51.84px)); }
}

/* ── Movimiento reducido ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .arc-phone__screen,
  .arc-phone__statusbar,
  .arc-phone-app__hero-media,
  .arc-phone-app__loyalty,
  .arc-phone-app__points,
  .arc-phone-app__redeem,
  .arc-phone-app__appt-icon,
  .arc-phone-app__quick-btn,
  .arc-phone-app__quick-btn svg,
  .arc-phone-app__treatment-media,
  .arc-phone-app__activity-row,
  .arc-phone-app__activity-icon,
  .arc-phone-showcase__cta::after,
  .arc-phone-showcase__cta-arrow,
  .arc-phone-lab__swatch,
  .arc-phone-lab__custom,
  .arc-phone-lab__hex,
  .arc-phone-lab__font,
  .arc-phone-lab__reset {
    transition: none;
  }
  .arc-phone-lab__swatch:hover,
  .arc-phone-lab__custom:hover { transform: none; }
}