/*
 * Productos y sus fichas: app/views/productos.php, producto-firmware.php, producto-sistema-iot.php y
 * tiktok_download.php (las carga ProductosController). La base está en css/marca.css; aquí solo va lo propio,
 * con las variables de marca.
 *
 *   Captura       a.pt-media.pt-media--enlace > img + .pt-tag               (captura que abre el sitio)
 *   Precio        .pt-tarjeta__precio > b                                    (dentro de una .pt-tarjeta)
 *   Mosaico       a.pt-mosaico > img × 3                                     (vistas previas encimadas)
 *   Pasos de 4    ol.pt-pasos.pt-pasos--fila.pt-pasos--cuatro
 *   Ficha         .pt-ficha[.pt-ficha--dos] > div > h3 + ul.pt-lista          (qué incluye, requisitos, usos)
 *   Aviso         p.pt-nota.pt-aviso > i + texto                              (nota bajo un bloque)
 *   Compra        .pt-compra > div(h2 p ul) + .pt-compra__caja(.pt-compra__precio .pt-compra__detalle .pt-btn .pt-compra__ayuda)
 */

/* ---------- Captura del sitio de un producto ---------- */
.pt-media--enlace { display: block; }
.pt-media--enlace > img { object-position: top center; transition: transform 1.2s var(--pt-ease); }
.pt-media--enlace:hover > img { transform: scale(1.03); }
.pt-media--enlace .pt-tag i { color: var(--pt-acento); }

/* ---------- Precio dentro de una tarjeta ---------- */
.pt-tarjeta .pt-tarjeta__precio { margin: 14px 0 0; font-size: .9rem; color: var(--pt-faint); }
.pt-tarjeta__precio b { font-family: var(--pt-display); font-weight: 600; font-size: 1.05rem; color: var(--pt-text); }

/* ---------- Mosaico de vistas previas (bloque de sitios web) ---------- */
.pt-mosaico { position: relative; display: block; aspect-ratio: 4 / 3; }
.pt-mosaico img { position: absolute; width: 62%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; border-radius: 14px; border: 1px solid var(--pt-line); background: var(--pt-bg-2); box-shadow: 0 30px 70px var(--pt-sombra); transition: transform .8s var(--pt-ease); }
.pt-mosaico img:nth-child(1) { left: 0; top: 5%; }
.pt-mosaico img:nth-child(2) { right: 0; top: 0; }
.pt-mosaico img:nth-child(3) { left: 19%; bottom: 0; }
.pt-mosaico:hover img:nth-child(1) { transform: translate(-6px, -4px); }
.pt-mosaico:hover img:nth-child(2) { transform: translate(6px, -6px); }
.pt-mosaico:hover img:nth-child(3) { transform: translateY(6px); }

/* ---------- Texto + media invertido con las columnas en espejo ----------
/* ---------- Pasos en fila de cuatro ---------- */
.pt-pasos--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Ficha: qué incluye, qué necesitas, para qué sirve ---------- */
.pt-ficha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pt-ficha--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pt-ficha > div { background: var(--pt-card); border: 1px solid var(--pt-line); border-radius: var(--pt-radius); padding: clamp(22px, 2.6vw, 32px); }
.pt-ficha h3 { display: flex; align-items: center; gap: 12px; font-family: var(--pt-display); font-weight: 600; font-size: 1.25rem; color: var(--pt-text); margin: 0 0 18px; }
.pt-ficha h3 i { color: var(--pt-acento); font-size: 1.1em; }

/* Aviso corto bajo un bloque (p. ej. el uso responsable de la app) */
.pt-aviso { margin-top: 32px; }
.pt-aviso i { color: var(--pt-acento); margin-right: 4px; }

/* ---------- Compra: texto + caja con el precio y el botón de pago ---------- */
.pt-compra { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.pt-compra .pt-lead + .pt-lista { margin-top: 26px; }
.pt-compra__caja { background: var(--pt-panel); border: 1px solid rgba(var(--pt-tinta), .16); border-radius: 22px; padding: clamp(24px, 3.4vw, 40px); box-shadow: 0 40px 90px var(--pt-sombra); }
.pt-compra__precio { font-family: var(--pt-display); font-weight: 600; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.02em; color: var(--pt-text); margin: 0 0 10px; }
.pt-compra__precio--texto { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.pt-compra__detalle { margin: 0 0 26px; }
.pt-compra__caja .pt-btn { width: 100%; justify-content: center; }
.pt-compra__ayuda { margin: 16px 0 0; font-size: .86rem; color: var(--pt-faint); }
.pt-compra__ayuda a { color: var(--pt-muted); text-decoration: underline; text-decoration-color: var(--pt-orange); text-underline-offset: 3px; }
.pt-compra__ayuda a:hover { color: var(--pt-text); }

/* ---------- Llamado final: línea extra bajo los botones ---------- */
.pt-cta .pt-cta__extra { margin: 28px 0 0; font-size: .95rem; color: var(--pt-faint); }

/* ---------- Tablet y móvil ---------- */
@media (max-width: 1199.98px) {
    .pt-pasos--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .pt-ficha, .pt-ficha--dos, .pt-compra { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .pt-pasos--cuatro { grid-template-columns: 1fr; }
    .pt-split__texto .pt-botones .pt-btn, .pt-compra .pt-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .pt-media--enlace > img, .pt-mosaico img { transition: none; }
}