/* ==========================================================================
   PLANES Y COMPARATIVA — SalonSistem
   ==========================================================================

   Archivo aparte y con todas las clases bajo el prefijo `ss-`.

   Los estilos viejos de precios viven en `estilos.css` y los sigue usando otra
   plantilla del proyecto (`welcomeV106JUNIOPLANTILLA.blade.php`). Reescribirlos
   ahí habría cambiado esa pantalla sin querer, y sin ninguna forma de notarlo
   hasta que alguien la abriera. Con un archivo nuevo, lo anterior queda intacto.

   El color del plan entra por la variable `--plan`, que la plantilla escribe en
   cada tarjeta. Por eso hay un solo bloque de reglas y no cuatro copias con el
   color cambiado.
   ========================================================================== */

:root {
    --ss-tinta: #1f2430;
    --ss-tinta-suave: #6b7280;
    --ss-borde: #e9e9f2;
    --ss-fondo: #f7f7fd;
    --ss-morado: #7c3aed;
}

/* ---------------------------------------------------------------- encabezado */
.ss-planes,
.ss-comparativa {
    background: var(--ss-fondo);
    padding: 56px 16px 64px;
}

.ss-comparativa {
    padding-top: 8px;
}

/*
    Ancho generoso para que "COMPARA TODAS LAS FUNCIONALIDADES" entre en un
    renglón en escritorio. A 720px se partía en dos y el título perdía fuerza;
    en pantallas chicas se parte igual, que ahí sí corresponde.
*/
.ss-encabezado {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 34px;
}

.ss-encabezado h2 {
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ss-tinta);
    margin: 0 0 10px;
}

.ss-encabezado p {
    font-size: 1rem;
    color: var(--ss-tinta-suave);
    margin: 0;
}

/* ------------------------------------------------------- selector de ciclo */
.ss-ciclo {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.ss-ciclo-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--ss-borde);
    background: #fff;
    color: var(--ss-tinta-suave);
    border-radius: 999px;
    padding: 11px 22px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
}

.ss-ciclo-btn:hover {
    border-color: #d9d2f7;
}

.ss-ciclo-btn .radio-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid #cfd2dc;
    flex: 0 0 auto;
    transition: border-color .18s, box-shadow .18s;
}

.ss-ciclo-btn.active {
    background: var(--ss-morado);
    border-color: var(--ss-morado);
    color: #fff;
    box-shadow: 0 6px 18px rgba(124, 58, 237, .28);
}

.ss-ciclo-btn.active .radio-dot {
    border-color: #fff;
    box-shadow: inset 0 0 0 3px var(--ss-morado);
    background: #fff;
}

.ss-ciclo-nota {
    font-weight: 500;
    font-size: 0.8rem;
    opacity: .82;
}

.ss-swipe {
    display: none;
    text-align: center;
    color: var(--ss-tinta-suave);
    font-size: .82rem;
    margin-bottom: 12px;
}

/* -------------------------------------------------------------- las tarjetas */
/*
    Las cuatro tarjetas miden lo mismo aunque tengan listas de distinto largo.

    Es lo que permite que el recuadro del contador y los botones queden a la
    misma altura en las cuatro. Con alturas libres, Premium —que lista quince
    funciones— empuja su botón "Adquirir plan" muy por debajo del de Baby, y la
    fila de botones deja de leerse como una fila: parece que cada plan estuviera
    en otra pantalla.

    El estirado lo absorbe la lista (`flex: 1` más abajo), así que el espacio
    sobrante queda entre la última función y el contador, que es donde no
    molesta.
*/
.ss-tarjetas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    max-width: 1180px;
    margin: 0 auto;
    align-items: stretch;
}

.ss-tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ss-borde);
    border-radius: 18px;
    padding: 30px 22px 22px;
    text-align: center;
    transition: box-shadow .22s, transform .22s, border-color .22s;
}

.ss-tarjeta:hover {
    border-color: var(--plan);
    box-shadow: 0 16px 40px rgba(20, 20, 43, .10);
    transform: translateY(-3px);
}

/* La cinta se apoya sobre el borde superior, centrada. */
.ss-cinta {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--plan);
    color: #fff;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 5px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

.ss-nombre {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--plan);
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}

.ss-lema {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--plan);
    opacity: .75;
    margin: 0 0 12px;
}

/*
    La descripción reserva alto fijo aunque el texto sea más corto.

    Viene del panel y cada plan la escribió distinto: la de Premium ocupa cuatro
    renglones y la de Pro dos. Sin un piso, el icono, el precio y el "por mes"
    de cada tarjeta arrancan a distinta altura, y la fila de precios —que es lo
    que la persona recorre con la vista para comparar— queda escalonada.

    Cuatro renglones, que es lo que ocupa la descripción más larga de hoy. Si
    alguna se pasa, la tarjeta crece sin romperse; solo se desalinea esa.
*/
.ss-desc {
    font-size: .88rem;
    line-height: 1.5;
    color: var(--ss-tinta-suave);
    margin: 0 0 18px;
    min-height: 6em;
}

.ss-icono {
    width: 46px;
    height: 46px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--plan-suave);
    color: var(--plan);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.ss-precio {
    line-height: 1;
    margin: 0;
    /* El importe nunca se parte: el símbolo va pegado al número, no encima. */
    white-space: nowrap;
}

.ss-precio .ss-sym {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ss-tinta);
    vertical-align: super;
    margin-right: 2px;
}

.ss-precio .amount {
    font-size: 2.9rem;
    font-weight: 800;
    color: var(--ss-tinta);
    letter-spacing: -0.02em;
}

.ss-periodo {
    font-size: .78rem;
    color: var(--ss-tinta-suave);
    margin: 4px 0 0;
}

.ss-sep {
    height: 1px;
    background: var(--ss-borde);
    margin: 18px 0 16px;
}

.ss-hereda {
    font-size: .82rem;
    font-weight: 700;
    color: var(--plan);
    text-align: left;
    margin: 0 0 10px;
}

.ss-lista {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    text-align: left;
    flex: 1 1 auto;
}

.ss-lista li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .845rem;
    line-height: 1.45;
    color: #3d4453;
    padding: 4px 0;
}

.ss-lista li i {
    color: var(--plan);
    font-size: .72rem;
    margin-top: .34em;
    flex: 0 0 auto;
}

/*
    Las funciones que el plan NO incluye — los renglones que en el panel
    empiezan con ✖ — se muestran apagadas.

    Se muestran y no se esconden porque tienen un trabajo: quien mira Baby y ve
    "Punto de venta" tachado entiende de una que existe y que para tenerlo hay
    que subir de plan. Escondidas, esa persona se va creyendo que el sistema no
    lo tiene.
*/
.ss-lista li.ss-item-no {
    color: #a8acb7;
}

.ss-lista li.ss-item-no i {
    color: #cbcfd8;
}

/* El recuadro del contador: la puerta a la tabla comparativa. */
.ss-contador {
    display: block;
    text-decoration: none;
    background: var(--plan-suave);
    border-radius: 12px;
    padding: 11px 12px;
    margin-bottom: 12px;
    transition: filter .18s;
}

.ss-contador:hover {
    filter: brightness(.96);
}

.ss-contador strong {
    display: block;
    font-size: .84rem;
    font-weight: 700;
    color: var(--plan);
}

.ss-contador span {
    display: block;
    font-size: .74rem;
    color: var(--plan);
    opacity: .82;
    margin-top: 1px;
}

.ss-acciones {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ss-enlace {
    text-decoration: none;
    display: block;
}

.ss-btn-comprar,
.ss-btn-consultar {
    width: 100%;
    border-radius: 999px;
    padding: 12px 16px;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .18s, box-shadow .18s, background .18s, color .18s;
}

.ss-btn-comprar {
    background: var(--plan);
    border: 1px solid var(--plan);
    color: #fff;
}

.ss-btn-comprar:hover {
    filter: brightness(1.07);
    box-shadow: 0 8px 20px rgba(20, 20, 43, .16);
}

.ss-btn-consultar {
    background: #fff;
    border: 1px solid var(--ss-borde);
    color: var(--ss-tinta-suave);
}

.ss-btn-consultar:hover {
    border-color: var(--plan);
    color: var(--plan);
}

.ss-vertodas {
    display: block;
    margin-top: 12px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--plan);
    text-decoration: none;
}

.ss-vertodas:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------- licencia de por vida */
.ss-unico-wrap {
    justify-content: center;
    padding: 8px 0 0;
}

.ss-unico {
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
    border: 2px solid var(--plan);
    padding: 34px 34px 26px;
}

.ss-lista-doble {
    columns: 2;
    column-gap: 26px;
}

.ss-lista-doble li {
    break-inside: avoid;
}

.ss-unico .ss-acciones {
    flex-direction: row;
    gap: 12px;
}

.ss-unico .ss-enlace {
    flex: 1 1 0;
}

/* ------------------------------------------------------------- comparativa */
.ss-comparativa-caja {
    max-width: 1180px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--ss-borde);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 30px rgba(20, 20, 43, .05);
}

.ss-tabs-wrap {
    overflow-x: auto;
    padding-bottom: 10px;
    margin-bottom: 14px;
    /* La barra queda visible a propósito: es la señal de que hay más pestañas. */
    scrollbar-width: thin;
}

.ss-tabs-wrap::-webkit-scrollbar {
    height: 8px;
}

.ss-tabs-wrap::-webkit-scrollbar-thumb {
    background: #b9bcc7;
    border-radius: 999px;
}

.ss-tabs-wrap::-webkit-scrollbar-track {
    background: #f0f0f5;
    border-radius: 999px;
}

.ss-tabs {
    display: flex;
    gap: 9px;
    width: max-content;
    padding: 2px;
}

.ss-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    border: 1px solid var(--ss-borde);
    background: #fff;
    color: #414958;
    border-radius: 999px;
    padding: 10px 17px;
    font-size: .87rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s, color .16s, border-color .16s;
}

.ss-tab i {
    font-size: .82rem;
    opacity: .75;
}

.ss-tab:hover {
    border-color: #d9d2f7;
}

.ss-tab.active {
    background: #f5f1fe;
    border-color: #cdbcf8;
    color: var(--ss-morado);
}

.ss-tab.active i {
    opacity: 1;
}

.ss-tabla-wrap {
    overflow-x: auto;
}

.ss-tabla {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: .9rem;
}

.ss-tabla thead th {
    background: #fafaff;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .05em;
    padding: 14px 16px;
    text-align: center;
    border-bottom: 1px solid var(--ss-borde);
    color: var(--ss-tinta-suave);
}

.ss-tabla thead th:first-child {
    text-align: left;
}

.ss-tabla .ss-col-func {
    text-align: left;
    color: #333a49;
}

.ss-tabla tbody td {
    padding: 13px 16px;
    text-align: center;
    border-bottom: 1px solid #f2f2f7;
}

.ss-tabla tbody tr:last-child td {
    border-bottom: 0;
}

.ss-tabla tbody tr.ss-fila:hover td {
    background: #fbfbff;
}

.ss-fila-cat td {
    background: #f4f6fb;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .09em;
    color: #8a90a0;
    text-align: left !important;
    padding: 9px 16px !important;
}

.ss-no {
    color: #c3c7d1;
}

.ss-tabla tbody td i {
    font-size: .92rem;
}

/* -------------------------------------------------------------- adaptable */
@media (max-width: 1080px) {
    .ss-tarjetas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 720px;
    }
}

@media (max-width: 720px) {
    .ss-planes,
    .ss-comparativa {
        padding: 40px 12px 48px;
    }

    .ss-swipe {
        display: block;
    }

    /*
        En teléfono las tarjetas dejan de apilarse y pasan a deslizarse.

        Apiladas obligan a recorrer cuatro pantallas enteras para llegar al
        último plan, y nadie compara así. En carrusel, cada tarjeta ocupa el
        ancho útil y se pasa con el dedo — que es como ya funcionaban antes y
        lo que esperan los puntos de navegación de abajo.
    */
    .ss-tarjetas {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 14px;
        padding: 4px 4px 12px;
        max-width: none;
    }

    .ss-tarjeta {
        flex: 0 0 86%;
        scroll-snap-align: center;
        /*
            En teléfono cada tarjeta vuelve a medir lo que ocupa su contenido.

            La altura pareja existe para alinear los botones cuando las cuatro
            se ven una al lado de la otra; acá se ve una por vez, así que
            igualarlas solo agrega un hueco vacío —cuatro renglones en Baby,
            que es la más corta— entre la última función y el botón.
        */
        align-self: flex-start;
    }

    .ss-unico {
        padding: 26px 18px 20px;
    }

    .ss-lista-doble {
        columns: 1;
    }

    .ss-unico .ss-acciones {
        flex-direction: column;
    }

    .ss-ciclo-btn {
        padding: 10px 15px;
        font-size: .85rem;
    }

    .ss-ciclo-nota {
        display: none;
    }

    .ss-comparativa-caja {
        padding: 12px;
    }
}

/* ==========================================================================
   SECCIÓN DEL VIDEO
   ==========================================================================

   Vive en este archivo y no en `main.css` porque `main.css` es la hoja base de
   la plantilla y define `.hero` para todo el sitio. Tocarla ahí habría cambiado
   cualquier otra pantalla que use esa clase, sin forma de notarlo hasta
   abrirla. Acá el alcance es solo esta sección.

   La sección dejó de ser un `hero`: sin foto de fondo, el velo negro que
   `.hero:before` pinta encima convertía la franja en un rectángulo oscuro.
   ========================================================================== */

.ss-video {
    /* El mismo fondo que los planes: las dos secciones se leen como una sola. */
    background: var(--ss-fondo);
    padding: 44px 16px 40px;
}

/*
    El mismo ancho que la grilla de planes.

    No va de borde a borde: un 16:9 a pantalla completa mide 1080px de alto en
    un monitor de 1920, y empuja los planes —que es a donde se viene— fuera de
    la primera pantalla. A 1180px el video manda y la pagina sigue leyendose de
    corrido, alineado con las tarjetas de abajo.
*/
.ss-video-caja {
    /*
        1216 y no 1200: alto y ancho no se pueden mover por separado.

        El marco está atado a la proporción 16:9, así que el alto sale del
        ancho. Para ganar los 20px de alto que se pidieron hacen falta 36 de
        ancho (20 ÷ 0.5625). Forzar los dos números por igual habría roto la
        proporción y YouTube habría rellenado la diferencia con franjas negras.
    */
    max-width: 1216px;
    margin: 0 auto;
}

/*
    El marco reserva la proporción 16:9 antes de que cargue el video.

    `padding-bottom: 56.25%` con altura cero es el truco de siempre: el relleno
    porcentual se calcula sobre el ANCHO, así que la caja mide alto sin saber
    todavía qué hay adentro. Sin eso, la página salta cuando YouTube responde.
*/
.ss-video-marco {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 14px 40px rgba(20, 20, 43, .12);
}

.ss-video-marco iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.ss-video-velo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 0.20 en lugar de 0.70: se ve la portada del video, no un rectángulo negro. */
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background .3s;
}

.ss-video-velo:hover {
    background: rgba(0, 0, 0, 0.32);
}

/*
    EL BOTÓN BLANCO CALCA LA FORMA DEL DE YOUTUBE.

    Antes era un círculo de 88px. Cubría el botón rojo, sí, pero por exceso: un
    círculo que envuelve un rectángulo de 68 × 48 tiene que medir 84 de diámetro
    solo para alcanzarle las esquinas, y a esa altura se ve enorme al lado del
    video.

    Copiando la forma —rectángulo redondeado, misma proporción— basta con
    cubrirlo justo. Van 72 × 52 contra los 68 × 48 de YouTube: 2px de margen por
    lado, invisibles a la vista, suficientes para que no asome ni un borde rojo
    por el antialias.

    El radio sigue la misma proporción que el de YouTube (12 sobre 48), así que
    las esquinas curvan igual y una tapa a la otra sin desbordes.
*/
.ss-video-play {
    width: 72px;
    height: 52px;
    border-radius: 14px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    transition: transform .2s;
}

.ss-video-velo:hover .ss-video-play {
    transform: scale(1.06);
}

@media (max-width: 720px) {
    .ss-video {
        padding: 28px 12px 24px;
    }

    /*
        EN EL TELÉFONO EL BOTÓN NO SE ACHICA.

        Acá había un tamaño menor —56 × 40— partiendo de que en un reproductor
        chico el botón de YouTube también encoge. No encoge: se queda en 68 × 48
        pase lo que pase, así que el blanco quedaba POR DENTRO del rojo y se veía
        el borde rojo asomando por los cuatro lados.

        Se mantiene la misma medida que en escritorio. En una pantalla de
        teléfono un botón de 72 × 52 es grande, y está bien que lo sea: es el
        único control de la sección y se toca con el dedo.
    */
}