/* ============================================================================
 * site-product.css — PÁGINAS DE PRODUCTO del sitio público (entrenamiento,
 * progreso, inteligencia, app-cliente, comunicación, facturación).
 * Lo carga _site_feature.php. Clases propias (prefijo sp-) para no depender de
 * la purga de Tailwind (style.css se compila aparte y no ve estas clases).
 * Colores y radios: tokens del DS (axui-tokens.css). Los marcos de los
 * dispositivos son "hardware": oscuros y plateados en ambos modos.
 * Movimiento: solo con html.sp-js (sin JS todo se ve quieto) y nunca con
 * prefers-reduced-motion.
 * ========================================================================== */

/* ---------- Portátil (marco + pantalla con captura real) ---------- */
.sp-laptop { position: relative; width: 100%; margin: 0; }
.sp-laptop-lid {
  position: relative; background: #1b1d1c; border-radius: 3.2% / 5.4%;
  padding: 2.4% 2.4% 3.2%; box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 24px 48px -28px rgba(32,39,35,.45);
}
.sp-laptop-lid::before { /* cámara */
  content: ''; position: absolute; top: 1%; left: 50%; width: .9%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; background: #2c302e;
}
.sp-screen { position: relative; overflow: hidden; border-radius: 4px; background: #fff; aspect-ratio: 1424 / 840; }
.sp-screen img, .sp-phone-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.sp-laptop-base {
  position: relative; height: 0; padding-bottom: 3.4%; width: 114%; margin-left: -7%;
  background: linear-gradient(#d9dcdb, #b9bdbb 55%, #9a9e9c); border-radius: 0 0 14% 14% / 0 0 100% 100%;
  box-shadow: 0 18px 30px -22px rgba(32,39,35,.55);
}
.sp-laptop-base::before { /* hueco para abrir la tapa */
  content: ''; position: absolute; left: 50%; top: 0; width: 13%; height: 42%; transform: translateX(-50%);
  background: #a7abaa; border-radius: 0 0 10px 10px;
}

/* Pantalla que enseña una zona ampliada de la captura (la transformación viene del servidor). */
.sp-screen-zone img { position: absolute; left: 0; top: 0; width: 100%; height: auto; object-fit: initial; transform-origin: 0 0; }

/* ---------- Móvil ----------
   Proporciones de un iPhone actual: bisel fino (1,9 % del ancho) y esquinas CONCÉNTRICAS: el radio exterior es el de la
   pantalla más el bisel. Los % de border-radius van por ejes (ancho / alto), por eso son pares calculados para que la
   curva sea circular: pantalla 13 % / 6 %, cuerpo 14,4 % / 6,8 %. Isla del tamaño y la altura reales. */
.sp-phone {
  position: relative; margin: 0 auto; width: 100%; max-width: 300px; background: #0f1110;
  border-radius: 14.4% / 6.8%; padding: 0; container-type: inline-size;   /* el bisel va en cqw: % del ancho DEL MÓVIL */
  box-shadow: 0 0 0 1px #2b2f2d, inset 0 0 0 1px rgba(255,255,255,.06), 0 24px 48px -28px rgba(32,39,35,.55);
}
.sp-phone-screen { position: relative; overflow: hidden; border-radius: 13% / 6%; background: #fff; aspect-ratio: 390 / 844; margin: 1.9cqw; }
.sp-phone::after { /* isla */
  content: ''; position: absolute; top: 2.3%; left: 50%; width: 30.8%; height: 4.2%; transform: translateX(-50%);
  background: #0f1110; border-radius: 999px;
}
.sp-phone-sm { max-width: 270px; }

/* ---------- Recorte de pantalla en tarjeta (zoom fijo a una zona de la captura) ---------- */
.sp-shot {
  position: relative; overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: var(--r-card-lg, 16px);
  background: hsl(var(--card)); aspect-ratio: 4 / 3; box-shadow: 0 1px 2px rgba(32,39,35,.05);
}
.sp-shot img, .sp-zoom img {
  position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; transform-origin: 0 0;
  /* SIN will-change: con él Chrome rasteriza la capa a tamaño base y la amplía (zoom borroso). */
}

/* ---------- Composición: dispositivo + móvil superpuesto (p. ej. landing en el móvil sobre su editor) ---------- */
.sp-combo { position: relative; padding-right: 12%; padding-bottom: 6%; }
.sp-combo-phone { position: absolute; right: 0; bottom: 0; width: 27%; }
.sp-combo-phone .sp-phone { max-width: none; }
/* En pantallas estrechas el móvil superpuesto quedaba de ~70 px: más grande para que se lea como un móvil. */
@media (max-width: 639.98px) { .sp-combo { padding-right: 18%; } .sp-combo-phone { width: 36%; } }

/* ---------- Contenedor de los visuales: SIN fondo (el dueño los quiere directamente sobre el fondo de la página).
   Solo deja aire lateral para la base del portátil, que sobresale un 7 % por cada lado. ---------- */
.sp-stage { position: relative; padding: 0 5%; }

/* ---------- Ritmo de secciones (zig-zag) ---------- */
.sp-rows > * + * { margin-top: 4.5rem; }
@media (min-width: 1024px) { .sp-rows > * + * { margin-top: 7rem; } }
.sp-row { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) {
  .sp-row { grid-template-columns: 5fr 7fr; gap: 4rem; }
  .sp-row.is-flip { grid-template-columns: 7fr 5fr; }
  .sp-row.is-flip .sp-row-text { order: 2; }
  .sp-row.is-flip .sp-row-visual { order: 1; }
}
.sp-row-text h2 { font-size: 1.625rem; line-height: 1.15; font-weight: 700; color: hsl(var(--foreground)); margin-bottom: .75rem; }
@media (min-width: 768px) { .sp-row-text h2 { font-size: 2rem; } }
.sp-row-text p { font-size: 1.0625rem; line-height: 1.6; color: hsl(var(--muted-foreground)); margin-bottom: 1.25rem; }
.sp-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .625rem; }
.sp-checks li { display: flex; gap: .625rem; align-items: flex-start; color: hsl(var(--muted-foreground)); line-height: 1.5; }
.sp-checks li > span:first-child { color: hsl(var(--success)); flex-shrink: 0; margin-top: .125rem; }

/* Encabezado de sección entre bloques (p. ej. del seguimiento del cliente a la analítica del centro). */
.sp-sec { max-width: 42rem; padding-top: 1rem; }
.sp-sec h2 { font-size: 1.875rem; line-height: 1.15; font-weight: 700; color: hsl(var(--foreground)); margin-bottom: .75rem; }
@media (min-width: 768px) { .sp-sec h2 { font-size: 2.25rem; } }
.sp-sec p { font-size: 1.125rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }

/* ---------- Hero ---------- */
.sp-hero { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) {
  .sp-hero { grid-template-columns: 5fr 7fr; gap: 3.5rem; }
  .sp-hero.is-phone { grid-template-columns: 7fr 5fr; }
}
.sp-hero h1 { overflow-wrap: break-word; }
/* La base del portátil sobresale un 7 % por cada lado: aire lateral para que no la corte el borde de la pantalla. */
.sp-hero:not(.is-phone) > div:last-child { padding: 0 5%; }
@media (min-width: 1024px) { .sp-hero:not(.is-phone) > div:last-child { padding: 0 0 0 3%; } }

/* ---------- Recorrido guiado por el scroll (visual fijo + pasos que se iluminan) ---------- */
.sp-tour { display: grid; gap: 2rem; }
@media (min-width: 1024px) {
  .sp-tour { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: start; }
  .sp-tour-visual { position: sticky; top: 6.5rem; }
}
.sp-zoom { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 1424 / 840; background: #fff; }
.sp-zoom img { position: static; display: block; width: 100%; height: auto; }
.sp-steps { list-style: none; margin: 0; padding: 0; counter-reset: sp; }
.sp-step {
  position: relative; padding: 1.25rem 1.25rem 1.25rem 3.75rem; border-radius: var(--r-card, 12px);
  border: 1px solid transparent; transition: background-color .3s ease, border-color .3s ease, opacity .3s ease;
}
.sp-step + .sp-step { margin-top: .75rem; }
.sp-step::before {
  counter-increment: sp; content: counter(sp); position: absolute; left: 1.125rem; top: 1.25rem;
  width: 1.75rem; height: 1.75rem; border-radius: 999px; display: grid; place-items: center; font-size: .8125rem; font-weight: 700;
  background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); transition: background-color .3s ease, color .3s ease;
}
.sp-step h3 { font-size: 1.0625rem; font-weight: 700; color: hsl(var(--foreground)); margin-bottom: .25rem; }
.sp-step p { font-size: .9375rem; line-height: 1.55; color: hsl(var(--muted-foreground)); }
.sp-step.is-on { background: hsl(var(--card)); border-color: hsl(var(--border)); }
.sp-step.is-on::before { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
@media (min-width: 1024px) {
  .sp-step { padding-top: 2rem; padding-bottom: 2rem; }
  .sp-step::before { top: 2rem; }
  .sp-step + .sp-step { margin-top: 1.5rem; }
  html.sp-js .sp-step:not(.is-on) { opacity: .5; }
}
/* Móvil: la captura completa va encima de los pasos (sin recortes; en escritorio queda fija al lado). */
.sp-tour-visual { padding: 0 5%; }

/* ---------- Animaciones (solo con JS y sin reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.sp-js .sp-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
  html.sp-js .sp-reveal.is-in { opacity: 1; transform: none; }
  /* Inclinación del portátil del hero mientras entra. SIN will-change y, en cuanto queda plano (.is-flat), SIN ninguna
     transformación: una capa 3D se rasteriza a menos resolución y la captura se veía pixelada (dueño, 6/11). */
  html.sp-js [data-sp-tilt] { transform: perspective(1800px) rotateX(calc((1 - var(--p, 1)) * 16deg)) scale(calc(.9 + var(--p, 1) * .1)); transform-origin: 50% 100%; }
  html.sp-js [data-sp-tilt].is-flat { transform: none; }
  html.sp-js [data-sp-parallax] { transform: translate(0, var(--py, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-step, .sp-step::before { transition: none; }
}

/* ---------- Maquetas en HTML dentro de la pantalla del portátil (_site_mockups.php) ----------
   Todo en em sobre un font-size ligado al ANCHO de la pantalla (container query): la maqueta escala con el
   portátil como si fuera una captura, pero el texto sigue nítido a cualquier densidad. */
.sp-screen-html { container-type: inline-size; background: hsl(var(--background)); }
.spm { font-size: 2.1cqw; line-height: 1.3; color: hsl(var(--foreground)); height: 100%; overflow: hidden; font-family: 'DM Sans', system-ui, sans-serif; }
.spm svg { width: 1em; height: 1em; flex-shrink: 0; }
.spm b { font-weight: 600; }
.spm i { font-style: normal; color: hsl(var(--muted-foreground)); }
.spm em { font-style: normal; }
.spm-pad { padding: 1.4em 1.6em; display: flex; flex-direction: column; gap: .8em; }
.spm-seg { display: grid; grid-template-columns: 1fr 1fr; background: hsl(var(--muted)); border-radius: .7em; padding: .25em; font-size: .9em; text-align: center; }
.spm-seg span { padding: .45em; border-radius: .5em; color: hsl(var(--muted-foreground)); }
.spm-seg span.is-on { background: hsl(var(--card)); color: hsl(var(--foreground)); font-weight: 600; box-shadow: 0 1px 2px rgba(32,39,35,.08); }
.spm-block { border-radius: .9em; border: 1px solid hsl(var(--border)); border-left-width: .28em; padding: .7em .8em .8em; display: flex; flex-direction: column; gap: .5em; }
.spm-block.is-warm { background: hsl(var(--warning) / .07); border-left-color: hsl(var(--warning)); }
.spm-block.is-main { background: hsl(var(--muted)); border-left-color: hsl(var(--foreground)); }
.spm-bhead { display: flex; align-items: center; gap: .55em; }
.spm-dot { width: .6em; height: .6em; border-radius: 99em; background: currentColor; flex-shrink: 0; }
.is-warm .spm-dot { color: hsl(var(--warning)); }
.spm-btitle { display: flex; flex-direction: column; gap: .15em; min-width: 0; flex: 1; }
.spm-btitle > span { font-size: .78em; color: hsl(var(--muted-foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spm-chip { display: inline-block; padding: .1em .6em; border-radius: 99em; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); }
.is-warm .spm-chip { color: hsl(var(--warning)); border-color: hsl(var(--warning) / .35); }
.spm-note { opacity: .8; }
.spm-btools { display: flex; gap: .7em; color: hsl(var(--muted-foreground)); }
.spm-btools svg:last-child { color: hsl(var(--destructive)); }
.spm-grip { color: hsl(var(--muted-foreground)); opacity: .6; display: flex; }
.spm-ex { display: flex; align-items: center; gap: .6em; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: .7em; padding: .45em .6em; }
.spm-thumb { width: 2.3em; height: 2.3em; border-radius: .55em; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); display: grid; place-items: center; flex-shrink: 0; }
.spm-thumb svg { width: 1.2em; height: 1.2em; }
.spm-thumb { overflow: hidden; }
.spm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spm-ex-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.spm-ex-name b, .spm-ex-name i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spm-ex-name i { font-size: .8em; }
.spm-fields { display: flex; gap: .35em; flex-shrink: 0; }
.spm-field { display: flex; align-items: baseline; justify-content: space-between; gap: .4em; min-width: 3.6em; padding: .35em .5em; border: 1px solid hsl(var(--border)); border-radius: .45em; background: hsl(var(--background)); }
.spm-field i { font-size: .72em; }
.spm-input { display: flex; align-items: center; gap: .5em; border: 1px solid hsl(var(--border)); border-radius: .6em; padding: .55em .75em; color: hsl(var(--muted-foreground)); background: hsl(var(--card)); }
.spm-select { justify-content: space-between; color: hsl(var(--foreground)); }
.spm-list { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; }
.spm-add { color: hsl(var(--muted-foreground)); display: flex; }
.spm-foot { text-align: center; font-size: .78em; color: hsl(var(--muted-foreground)); margin-top: auto; }