/* /assets/css/device-frames.css
   Marcos CSS-only de móvil + carrusel interno.
   Colocaciones: cómo-funciona (lateral), portada (junto a los pasos),
   posts del blog (lateral de lectura) y ficha de epígrafe (bloque CTA).
   En demo se ven siempre; en la web pública según /admin/devices/.
   Frames estilizados que evocan iPhone 17 (isla dinámica) y Pixel 10
   (barra horizontal de cámara), sin imágenes de marca registrada.
   Aspecto interior: 19.5:9 (390x844 CSS px de referencia).
*/

/* Stage genérico: contenido a la izquierda + móvil sticky a la derecha.
   .demo-howto-* son los nombres históricos de como-funciona; .device-stage /
   .device-stage-aside son los genéricos para el resto de colocaciones. */
.demo-howto-stage,
.device-stage {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s6);
    align-items: start;
    margin-top: var(--s5);
}

@media (min-width: 980px) {

    .demo-howto-stage,
    .device-stage {
        grid-template-columns: 1fr minmax(220px, 280px);
        gap: var(--s6);
    }
}

.demo-howto-cards {
    display: flex;
    flex-direction: column;
    gap: var(--s5);
}

.demo-howto-cards .callout,
.demo-howto-cards .app-availability {
    margin: 0;
}

.demo-howto-device,
.device-stage-aside {
    position: sticky;
    top: calc(var(--header-h) + 70px);
    /* gap bajo la navbar: súbelo (60px) o bájalo (20px) a gusto */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s4);
}

@media (max-width: 979px) {

    .demo-howto-device,
    .device-stage-aside {
        position: static;
    }
}

/* --- Portada: sección "Qué podrás hacer con Fiscalio" --- */
/* Con el móvil al lado, los 5 pasos pasan a 2 columnas y se oculta la
   línea conectora pensada para la fila de 4. */
@media (min-width: 768px) {
    .device-stage--home .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .device-stage--home .steps-grid::before {
        display: none;
    }
}

.device-stage--home .device-stage-aside {
    /* Los pasos ocupan bastante alto: deja que el móvil acompañe centrado. */
    align-self: center;
}

/* --- Ficha de epígrafe: bloque CTA "La app lo configura por ti" --- */
.epi-cta--device {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s5);
    align-items: center;
}

@media (min-width: 900px) {
    .epi-cta--device {
        grid-template-columns: 1fr auto;
        gap: var(--s7);
    }
}

.epi-cta-device {
    display: flex;
    justify-content: center;
}

.epi-cta-device .device-phone {
    --device-width: min(200px, 60vw);
}

.device-phone {
    --device-width: min(250px, 70vw);
    --device-ratio: calc(844 / 390);
    --bezel: 10px;
    --radius-outer: 38px;
    --radius-inner: 28px;

    position: relative;
    width: var(--device-width);
    aspect-ratio: 390 / 844;
    background: linear-gradient(160deg, #1c1f25 0%, #0d0f13 55%, #1a1d22 100%);
    border-radius: var(--radius-outer);
    padding: var(--bezel);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .06) inset,
        0 0 0 1.5px #0a0c10,
        0 2px 0 #2a2e36 inset,
        0 30px 60px -20px rgba(0, 0, 0, .65),
        0 12px 24px -10px rgba(0, 0, 0, .5);
    isolation: isolate;
}

.device-phone::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: calc(var(--radius-outer) - 3px);
    background: linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 40%);
    pointer-events: none;
    z-index: 2;
}

.device-phone::after {
    content: "";
    position: absolute;
    right: -2px;
    top: 22%;
    width: 3px;
    height: 54px;
    background: linear-gradient(180deg, #2a2e36, #14171c);
    border-radius: 2px 0 0 2px;
    box-shadow: -1px 0 0 rgba(0, 0, 0, .4) inset;
}

.device-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-inner);
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .8) inset;
}

/* ---------- iPhone 17: isla dinámica centrada ---------- */
.device-phone--iphone17 .device-screen::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 74px;
    height: 22px;
    background: #000;
    border-radius: 14px;
    z-index: 5;
    box-shadow: 0 0 0 1px rgba(40, 40, 45, .8);
}

.device-phone--iphone17 .device-screen::after {
    content: "";
    position: absolute;
    top: 13px;
    left: calc(50% + 22px);
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, #2a3340 30%, #0a0d11 75%);
    border-radius: 50%;
    z-index: 6;
}

/* ---------- Pixel 10: barra horizontal de cámara + punch-hole frontal ---------- */
.device-phone--pixel10 {
    --radius-outer: 32px;
    --radius-inner: 24px;
}

.device-phone--pixel10::before {
    /* Barra de cámara horizontal en la parte trasera, simulada como banda superior interna del marco */
    background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, transparent 8%, transparent 100%);
}

.device-phone--pixel10 .device-screen::before {
    /* Punch-hole frontal centrado */
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 9px;
    height: 9px;
    background: #000;
    border-radius: 50%;
    z-index: 5;
    box-shadow: 0 0 0 1.5px rgba(60, 60, 65, .9);
}

/* Barra lateral derecha más larga en Pixel (power) */
.device-phone--pixel10::after {
    height: 46px;
    top: 18%;
}

/* ---------- Carrusel ---------- */
.device-carousel {
    position: absolute;
    inset: 0;
    overflow: hidden;
    touch-action: pan-y;
    outline: none;
}

.device-carousel:focus-visible {
    box-shadow: 0 0 0 2px var(--accent) inset;
}

.device-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.device-carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .6s ease;
    background: #000 center / cover no-repeat;
}

.device-carousel-slide.is-active {
    opacity: 1;
}

.device-carousel-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s5);
    color: rgba(255, 255, 255, .55);
    text-align: center;
    font-size: 13px;
    line-height: 1.45;
    background: linear-gradient(180deg, #0a0e14 0%, #050709 100%);
}

.device-carousel-dots {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 6;
}

.device-carousel-dot {
    width: 5px;
    height: 5px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    transition: background .2s ease, width .2s ease;
    cursor: pointer;
    appearance: none;
}

.device-carousel-dot:hover {
    background: rgba(255, 255, 255, .7);
}

.device-carousel-dot.is-active {
    background: rgba(255, 255, 255, .95);
    width: 14px;
    border-radius: 3px;
}

/* ---------- Flechas prev/next ---------- */
.device-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 7;
    opacity: 0;
    transition: opacity .2s ease, background .2s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.device-carousel:hover .device-carousel-arrow,
.device-carousel-arrow:focus-visible {
    opacity: 1;
}

.device-carousel-arrow:hover {
    background: rgba(0, 0, 0, .8);
}

.device-carousel-arrow--prev {
    left: 4px;
}

.device-carousel-arrow--next {
    right: 4px;
}

/* En táctil siempre visibles a baja opacidad para indicar interacción. */
@media (hover: none) {
    .device-carousel-arrow {
        opacity: .65;
    }
}

/* ---------- Etiqueta modelo + nota tamaño ---------- */
.device-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s2);
    max-width: 320px;
    text-align: center;
}

.device-meta-model {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--border-2);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-2);
    background: var(--panel);
}

.device-meta-model::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.device-meta-hint {
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.5;
}