/* ============================================================
   /hoja-de-ruta: composiciones propias de la página.
   Los componentes vienen de v2-system.css.
   ============================================================ */

/* Hero sin columna de media: el texto no se estira a todo el ancho */
.hr-hero .v2-hero-int__texto { max-width: 760px; }

/* El link de cada hito va en su propia línea, debajo del texto */
.v2-linea__item .v2-link-flecha { margin-top: .5rem; }
.v2-linea__item p .v2-link-flecha { display: inline-flex; }

/* --- Tarjetas de dispositivo: ícono de nube de puntos arriba, datos abajo.
   Sin fotos: las que había eran renders de diseño de productos que todavía
   no existen, y se leían como si ya estuvieran. --- */
.hr-dispositivos {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.hr-disp { padding: 0; overflow: hidden; gap: 0; min-width: 0; }
.hr-disp__icono {
    position: relative;
    display: block;
    width: 100%;
    height: 150px;
    background:
        radial-gradient(60% 80% at 50% 50%, rgba(var(--v2-violeta-rgb), .07) 0%, rgba(var(--v2-violeta-rgb), 0) 70%),
        var(--v2-superficie-alt);
    border-bottom: 1px solid var(--v2-borde);
}
.hr-disp__cuerpo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    flex: 1;
}
.hr-disp__cuerpo .v2-h3 { margin: .25rem 0 0; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); font-family: var(--v2-font-accent); font-weight: 400; }
.hr-disp__tipo { margin: 0; font-weight: 600; font-size: var(--v2-fs-small); color: var(--v2-violeta-texto); }
.hr-disp__cuerpo mark.v2-pendiente { font-size: .8rem; }
.hr-disp__cuerpo .v2-link-flecha { margin-top: auto; }

.hr-disp__datos { margin: .5rem 0 0; display: grid; gap: .25rem; }
.hr-disp__datos dt {
    margin-top: .6rem;
    font: 600 var(--v2-fs-eyebrow)/1.3 var(--v2-font-main);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--v2-tinta-3);
}
.hr-disp__datos dt:first-child { margin-top: 0; }
.hr-disp__datos dd { margin: 0; color: var(--v2-tinta-2); }

/* --- Protocolo --- */
.hr-aviso { margin-bottom: var(--v2-espacio-bloque); }

/* --- Cierre --- */
.hr-acciones--centro { justify-content: center; }
.hr-contacto { margin: 1.5rem 0 0; font-size: var(--v2-fs-small); color: rgba(255, 255, 255, .75); }
.hr-contacto a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hr-contacto a:hover { color: var(--v2-violeta-300); }