/* ============================================================
   HOME: lo que cambia sobre la estética original de v2-style.css.
   La estructura y los bloques son los de siempre; acá solo vive lo
   que trajo Neuralia: el hero claro, las funciones y el contacto
   por WhatsApp.
   ============================================================ */

/* --- Hero claro ---
   El mismo marco redondeado de pantalla completa. Sin la foto de la
   órtesis (que todavía no se entrega): fondo claro con el resplandor
   violeta de la app, y la app real asomando desde abajo, donde antes
   estaban las manos. */
.v2-hero-video--claro .v2-hero-video__frame {
    background:
        radial-gradient(70% 55% at 50% 100%, rgba(var(--v2-violeta-rgb), 0.16) 0%, rgba(var(--v2-violeta-rgb), 0) 70%),
        radial-gradient(60% 50% at 10% 0%, rgba(178, 223, 219, 0.35) 0%, rgba(178, 223, 219, 0) 70%),
        linear-gradient(180deg, #F7F4F0 0%, #ECE7EF 100%);
    box-shadow: inset 0 0 0 1px rgba(34, 31, 46, 0.06), var(--v2-shadow-medium);
}

/* Alto por contenido (con una pantalla de mínimo): con el titular en tres
   líneas, un alto fijo dejaba la app escondida debajo del borde. */
.v2-hero-video--claro {
    height: auto;
    min-height: 100svh;
}

.v2-hero-video--claro .v2-hero-video__content {
    position: relative;
    inset: auto;
    padding: 160px 24px 0;
    color: var(--v2-tinta);
}


.v2-hero-video--claro .v2-hero-video__desc {
    color: var(--v2-tinta-2);
    max-width: 48ch;
    font-weight: 400;
}

.v2-hero-video--claro .v2-hero-video__actions {
    margin-top: 32px;
    gap: 1.5rem;
}

.v2-hero-video--claro .v2-hero-video__cta {
    color: #ffffff;
    background: var(--v2-violeta);
    box-shadow: 0 10px 28px -10px rgba(var(--v2-violeta-rgb), 0.6);
}

.v2-hero-video--claro .v2-hero-video__cta:hover {
    background: var(--v2-violeta-hover);
}

.v2-hero-video--claro .v2-hero-video__cta--secondary {
    color: var(--v2-tinta);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--v2-borde-fuerte);
    box-shadow: none;
}

.v2-hero-video--claro .v2-hero-video__cta--secondary:hover {
    color: var(--v2-tinta);
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(34, 31, 46, 0.3);
}

.v2-hero-video__sello {
    margin-top: 18px;
}

/* La app real, cortada por el borde del marco como antes la foto */
.v2-hero-video__app {
    margin: auto 0 0;
    padding-top: 44px;
    width: min(300px, 62vw);
    height: 380px;
    overflow: hidden;
}

.v2-hero-video__celu {
    border: 9px solid #1d1a24;
    border-bottom: 0;
    border-radius: 42px 42px 0 0;
    background: #1d1a24;
    overflow: hidden;
}

.v2-hero-video__celu img, .v2-hero-video__celu video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 33px 33px 0 0;
}

@media (max-width: 860px) {
    .v2-hero-video--claro .v2-hero-video__content {
        padding-top: 132px;
    }
}

@media (max-width: 600px) {
    .v2-hero-video--claro {
        padding: 10px;
    }
    .v2-hero-video--claro .v2-hero-video__frame {
        border-radius: 28px;
    }
    .v2-hero-video--claro .v2-hero-video__content {
        padding: 124px 20px 0;
    }
    .v2-hero-video--claro .v2-hero-video__desc {
        font-size: 1.02rem;
    }
    .v2-hero-video--claro .v2-hero-video__actions {
        flex-wrap: wrap;
        gap: 14px 20px;
    }
    .v2-hero-video__app {
        width: min(240px, 66vw);
        height: 280px;
    }
}

/* En escritorio, texto a la izquierda y el celular entero a la derecha: así
   la app se ve completa en vez de asomar recortada debajo de los botones. */
.v2-hero-video__texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
}

.v2-hero-video--claro .v2-hero-video__actions {
    justify-content: flex-start;
}

@media (min-width: 900px) {
    .v2-hero-video--claro .v2-hero-video__content {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        align-items: center;
        column-gap: clamp(32px, 5vw, 80px);
        max-width: 1240px;
        margin: 0 auto;
        min-height: 100svh;
        padding: 150px clamp(32px, 5vw, 72px) 64px;
        text-align: left;
    }

    .v2-hero-video--claro .v2-hero-video__texto {
        align-items: flex-start;
    }

    .v2-hero-video--claro .v2-hero-video__actions {
        justify-content: flex-start;
    }

    /* El celular entero, con su borde de abajo: ya no lo corta el marco */
    .v2-hero-video__app {
        margin: 0;
        padding: 0;
        justify-self: center;
        /* Entra entero en la pantalla: el ancho sale también del alto disponible
           (390/844 es la proporción de la captura) */
        width: min(300px, 100%, calc((100svh - 230px) * 0.462));
        height: auto;
        overflow: visible;
    }

    .v2-hero-video__celu {
        border-bottom: 9px solid #1d1a24;
        border-radius: 42px;
        box-shadow: 0 30px 70px -30px rgba(52, 38, 110, 0.45);
    }

    .v2-hero-video__celu img, .v2-hero-video__celu video {
        border-radius: 33px;
    }
}

/* --- Escalera: la etiqueta de estado debajo del rango --- */
.v2-pack__card .v2-estado {
    align-self: flex-start;
    margin: -12px 0 16px;
}

/* --- Neuralia: cuatro funciones con íconos de nube de puntos,
       en lugar del panel inventado --- */
.v2-funciones {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.v2-funcion {
    padding: 22px 20px 20px;
    border-radius: var(--v2-radio-md);
    background: var(--v2-superficie);
    border: 1px solid var(--v2-borde);
    box-shadow: var(--v2-sombra-1);
    transition: transform var(--v2-dur) var(--v2-ease), box-shadow var(--v2-dur) var(--v2-ease);
}

.v2-funcion:hover {
    transform: translateY(-3px);
    box-shadow: var(--v2-sombra-2);
}

.v2-funcion__icono {
    position: relative;
    display: block;
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    color: var(--v2-violeta);
}

.v2-funcion h3 {
    margin: 0 0 6px;
    font-family: var(--v2-font-main);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--v2-tinta);
}

.v2-funcion p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--v2-tinta-3);
}

@media (max-width: 480px) {
    .v2-funciones {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Personas: la tarjeta de pacientes usaba la foto de la órtesis.
       Queda el degradé lila que ya tenía debajo. --- */
.v2-people__card--pacientes {
    background-image: linear-gradient(180deg, #D6C9EC 0%, #7B67A8 100%);
}

/* --- Contacto por WhatsApp, en la columna donde iba el formulario --- */
.v2-contact__wa {
    gap: 0;
}

.v2-contact__wa .v2-contact__submit {
    margin-top: 0;
    text-decoration: none;
    background: var(--v2-violeta);
    box-shadow: 0 10px 28px -10px rgba(var(--v2-violeta-rgb), 0.6);
}

.v2-contact__wa .v2-contact__submit:hover {
    background: var(--v2-violeta-hover);
}

.v2-contact__wa-label {
    margin: 32px 0 10px;
    font-family: var(--v2-font-main);
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v2-tinta-3);
}

.v2-contact__opciones {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--v2-borde-fuerte);
}

.v2-contact__opcion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--v2-borde-fuerte);
    font-family: var(--v2-font-main);
    font-size: 1rem;
    color: var(--v2-tinta);
    text-decoration: none;
    transition: color 0.25s ease, padding 0.25s ease;
}

.v2-contact__opcion span {
    color: var(--v2-violeta-texto);
    transition: transform 0.25s ease;
}

.v2-contact__opcion:hover {
    color: var(--v2-violeta-texto);
    padding-left: 10px;
}

.v2-contact__opcion:hover span {
    transform: translateX(4px);
}

/* Nota al pie del home */
.v2-notas {
    margin-bottom: 64px;
}

/* El desenfoque de los pilares bloqueados se derrama unos píxeles fuera de la
   caja y en el teléfono generaba scroll horizontal (ya pasaba antes). */
.v2-pillars {
    overflow-x: clip;
}