/* ==========================================================================
   Kronometro · ficha de un plan (encima de kronometro.css)
   ========================================================================== */
/* Las migas ya separan la ficha de la barra: el margen general de .pagina sobra aquí. */
.pagina:has(> .migas:first-child) {
    padding-top: clamp(16px, 2vw, 28px);
    gap: 24px;
}

.producto {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

/* Sin foto del plan todavía: el detalle ocupa todo el ancho. */
.producto-sin-imagen {
    grid-template-columns: minmax(0, 1fr);
}

/* La imagen del plan, en un marco con la muesca del reloj a los lados. */
.producto-imagen {
    max-width: 460px;
    margin: 0;
    background: var(--tinta);
    clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
}

.producto-imagen img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.producto-detalle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
}

.producto-precio {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--letra-titular);
    font-weight: 700;
}

.producto-cifra {
    font-size: var(--paso-cifra);
    letter-spacing: -0.04em;
    line-height: 0.9;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
    .producto {
        grid-template-columns: minmax(0, 1fr);
    }
    .producto-imagen {
        max-width: 360px;
    }
    .producto-imagen img {
        aspect-ratio: 4 / 5;
    }
    .producto-detalle .boton {
        width: 100%;
    }
}