/* TechnicalSupportGrid.css — Franjas de servicios por familia (vertiente ASISTENCIA TÉCNICA).
   Nodos 1368:23754 (PC), 1368:23911 (tablet), 1368:24171 (mobile). Tipografía: site.css.
   Va a sangre completa; solo el contenido se centra. Sin tope de franjas ni de servicios: el layout
   envuelve y apila según la cantidad real. */

/* --- Sección: fondo blanco a sangre completa. --- */
.TechnicalSupportGrid {
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    background-color: #ffffff; /* Fondo de la sección. */
}

/* Contenido centrado dentro del techo del sitio. */
.TechnicalSupportGrid-content {
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    padding: 56px 48px; /* Rellenos del nodo. */
    display: flex; /* Apila el título y las franjas. */
    flex-direction: column; /* En columna. */
    gap: 16px; /* Separación entre franjas. */
}

/* Título de la sección. */
.TechnicalSupportGrid-title {
    margin: 0 0 14px; /* Solo separación con la primera franja. */
    font-size: clamp(24px, 3vw, 36px); /* Toca los 36px del nodo a partir de 1200px. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.2; /* Interlineado de titular. */
    color: #0f0f12; /* Casi negro del diseño. */
}

/* --- Franja: familia (izquierda, angosta) y servicios (derecha, en fila). --- */
.TechnicalSupportGrid-strip {
    display: flex; /* Familia y servicios en línea. */
    align-items: stretch; /* La familia toma el alto de las tarjetas. */
    gap: 16px; /* Separación del nodo. */
}

/* Tinte de la franja 1 del ciclo. El módulo no trae campo de color: se cicla por posición. */
.TechnicalSupportGrid-strip:nth-of-type(3n + 1) {
    --strip-veil-88: rgba(91, 103, 112, 0.88); /* Capa de duotono en PC. */
    --strip-veil-62: rgba(91, 103, 112, 0.62); /* Capa plana en PC. */
    --strip-veil-82: rgba(91, 103, 112, 0.82); /* Velo plano en tablet y mobile. */
}

/* Tinte de la franja 2 del ciclo. */
.TechnicalSupportGrid-strip:nth-of-type(3n + 2) {
    --strip-veil-88: rgba(14, 93, 96, 0.88); /* Capa de duotono en PC. */
    --strip-veil-62: rgba(14, 93, 96, 0.62); /* Capa plana en PC. */
    --strip-veil-82: rgba(14, 93, 96, 0.82); /* Velo plano en tablet y mobile. */
}

/* Tinte de la franja 3 del ciclo. */
.TechnicalSupportGrid-strip:nth-of-type(3n) {
    --strip-veil-88: rgba(69, 79, 99, 0.88); /* Capa de duotono en PC. */
    --strip-veil-62: rgba(69, 79, 99, 0.62); /* Capa plana en PC. */
    --strip-veil-82: rgba(69, 79, 99, 0.82); /* Velo plano en tablet y mobile. */
}

/* Índice de la franja 1, para el tono de sus tarjetas. */
.TechnicalSupportGrid-strip:nth-of-type(3n + 1) {
    --strip-index: 0; /* Primer paso del ciclo. */
}

/* Índice de la franja 2. */
.TechnicalSupportGrid-strip:nth-of-type(3n + 2) {
    --strip-index: 1; /* Segundo paso del ciclo. */
}

/* Índice de la franja 3. */
.TechnicalSupportGrid-strip:nth-of-type(3n) {
    --strip-index: 2; /* Tercer paso del ciclo. */
}

/* Paso de la tarjeta 1 dentro de su franja. */
.TechnicalSupportGrid-service:nth-of-type(3n + 1) {
    --card-step: 0; /* Primer paso del ciclo. */
}

/* Paso de la tarjeta 2. */
.TechnicalSupportGrid-service:nth-of-type(3n + 2) {
    --card-step: 1; /* Segundo paso del ciclo. */
}

/* Paso de la tarjeta 3. */
.TechnicalSupportGrid-service:nth-of-type(3n) {
    --card-step: 2; /* Tercer paso del ciclo. */
}

/* Columna de la familia: foto con duotono y textos. */
.TechnicalSupportGrid-family {
    position: relative; /* Origen del velo y del texto. */
    flex: 0 0 16.05%; /* 190/1184 del nodo. */
    border-radius: 6px; /* Esquinas redondeadas. */
    overflow: hidden; /* Recorta la foto a esas esquinas. */
    background-color: #5b6770; /* Respaldo si la franja no tiene imagen. */
    background-size: cover; /* La foto llena la columna. */
    background-position: center; /* Conserva el centro al recortar. */
}

/* Duotono, primera capa: tiñe con el color de la franja. Las capas planas van en el ::after de
   .family y NO acá: mix-blend-mode mezcla TODO lo que se pinta dentro de su caja, pseudoelementos
   incluidos, así que ahí adentro un oscurecido no oscurece nada. */
.TechnicalSupportGrid-family-veil {
    position: absolute; /* Sobre la foto. */
    inset: 0; /* Cubre la columna entera. */
    background-color: var(--strip-veil-88, rgba(91, 103, 112, 0.88)); /* Color de la franja. */
    mix-blend-mode: color; /* Tiñe sin tocar la luminosidad. */
    pointer-events: none; /* No intercepta clics. */
}

/* Las dos capas planas del duotono, en un elemento sin blend propio: el oscurecido arriba y el
   tinte de la franja abajo. El oscurecido va por encima del 0.2 del nodo porque
   mix-blend-mode:color conserva el brillo y las zonas claras quedaban muy brillantes. */
.TechnicalSupportGrid-family::after {
    content: ""; /* Necesario para que el pseudoelemento exista. */
    position: absolute; /* Sobre el duotono. */
    inset: 0; /* Cubre la columna entera. */
    pointer-events: none; /* No intercepta clics. */
    background-image:
        linear-gradient(rgba(15, 15, 18, 0.35), rgba(15, 15, 18, 0.35)),
        linear-gradient(var(--strip-veil-62, rgba(91, 103, 112, 0.62)), var(--strip-veil-62, rgba(91, 103, 112, 0.62))); /* Oscurecido sobre tinte. */
}

/* En PC el título y la tagline NO son un bloque rotado: son dos piezas independientes. El título se
   saca del flujo; tagline y acento quedan como ítems de este flex. */
.TechnicalSupportGrid-family-text {
    position: absolute; /* Sobre las capas. */
    inset: 0; /* Cubre la columna entera. */
    z-index: 1; /* Por encima del duotono, que pinta después en el flujo. */
    display: flex; /* Apila acento y tagline. */
    flex-direction: column-reverse; /* El acento es el último del DOM y así queda arriba. */
    align-items: flex-end; /* Alineados a la derecha. */
    justify-content: flex-start; /* En reversed, pegado abajo. */
    gap: 11px; /* Separación entre acento y tagline. */
    padding: 18px; /* Rellenos del nodo. */
    box-sizing: border-box; /* El relleno entra dentro del alto. */
}

/* Solo el título rota. El centrado es por flex y no por alto fijo, así funciona con cualquier
   nombre de familia. */
.TechnicalSupportGrid-family-title {
    position: absolute; /* Columna angosta pegada a la izquierda. */
    left: 18px; /* Separación del borde izquierdo. */
    top: 0; /* A todo el alto. */
    width: 1.2em; /* Igual al interlineado: el ancho justo para centrar el texto rotado. */
    height: 100%; /* A todo el alto de la columna. */
    margin: 0; /* Quita el margen propio del título. */
    display: flex; /* Para centrar el texto rotado. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    font-size: 36px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.2; /* Interlineado del nodo. */
    color: #ffffff; /* Blanco sobre la foto. */
    white-space: nowrap; /* No se parte al rotar. */
    transform: rotate(-90deg); /* De abajo hacia arriba. */
}

/* La tagline NO rota: va horizontal y a la derecha. Su posición la da el flex. */
.TechnicalSupportGrid-family-tagline {
    max-width: 12.03vw; /* 154/1280 del nodo: se parte en dos líneas, no se achica ni se corta. */
    margin: 0; /* Quita el margen propio del párrafo. */
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold del diseño. */
    line-height: 1.3; /* Interlineado ajustado. */
    color: rgba(255, 255, 255, 0.9); /* Blanco apenas atenuado. */
    text-align: right; /* Alineada a la derecha. */
}

/* Línea de acento, arriba de la tagline; el orden lo da el column-reverse. */
.TechnicalSupportGrid-family-accent {
    flex-shrink: 0; /* No se comprime. */
    width: 2.125rem; /* Línea decorativa de ancho fijo. */
    height: 3px; /* Grosor del nodo. */
    background-color: #ff5a1f; /* Naranja del diseño. */
}

/* Fila de tarjetas de servicio. */
.TechnicalSupportGrid-services {
    flex: 1 1 auto; /* Ocupa el ancho que deja la familia. */
    display: flex; /* Tarjetas en línea. */
    gap: 16px; /* Separación real del nodo. */
}

/* --- Tarjeta de servicio. El tono sale de (--strip-index*3 + --card-step) * 137: los 137 grados
   son el ángulo áureo, que reparte los tonos por todo el círculo; con un paso fijo de 60 la tercera
   tarjeta de cada franja caía siempre en el mismo verde. --- */
.TechnicalSupportGrid-service {
    --card-hue: calc((var(--strip-index, 0) * 3 + var(--card-step, 0)) * 137); /* Tono calculado. */
    --card-accent: hsl(calc(var(--card-hue)), 62%, 42%); /* Color del acento. */
    --card-tint: hsl(calc(var(--card-hue)), 55%, 67%); /* Fondo del hover, del mismo tono. */
    flex: 1 1 0; /* Todas las tarjetas del mismo ancho. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    aspect-ratio: 314 / 320; /* Piso de alto con la proporción del nodo; si el texto pide más, crece. */
    display: flex; /* Apila acento, textos y botón. */
    flex-direction: column; /* En columna. */
    justify-content: space-between; /* El botón queda al pie. */
    gap: 16px; /* Separación entre las piezas. */
    padding: 24px 22px 22px; /* Rellenos del nodo. */
    border-radius: 6px; /* Esquinas redondeadas. */
    background-color: #ffffff; /* Fondo en reposo. */
    border: 1px solid rgba(15, 15, 18, 0.14); /* Filete tenue. */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Suaviza el hover. */
}

/* Línea de acento de la tarjeta. */
.TechnicalSupportGrid-service-accent {
    width: 1.875rem; /* Línea decorativa de ancho fijo. */
    height: 3px; /* Grosor del nodo. */
    background-color: var(--card-accent, #5b6770); /* Color propio de la tarjeta, igual en hover. */
}

/* Nombre del servicio. */
.TechnicalSupportGrid-service-title {
    margin: 0; /* Quita el margen propio del título. */
    font-size: 24px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold del diseño. */
    line-height: 1.25; /* Interlineado de titular. */
    color: #0f0f12; /* Casi negro en reposo. */
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Suaviza el cambio del hover. */
}

/* Descripción del servicio. */
.TechnicalSupportGrid-service-description {
    margin: 0; /* Quita el margen propio del párrafo. */
    font-size: 16px; /* Tamaño del nodo. */
    font-weight: 400; /* Regular del diseño. */
    line-height: 1.6; /* Interlineado de lectura. */
    color: rgba(15, 15, 18, 0.62); /* Gris de cuerpo en reposo. */
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Suaviza el cambio del hover. */
}

/* Botón "Entrar" de la tarjeta. */
.TechnicalSupportGrid-service-button {
    display: inline-flex; /* Etiqueta y flecha en línea. */
    align-items: center; /* Centradas entre sí. */
    gap: 9px; /* Separación entre las dos. */
    align-self: flex-start; /* No se estira al ancho de la tarjeta. */
    padding: 11px 20px; /* Rellenos del nodo. */
    border-radius: 6px; /* Esquinas redondeadas. */
    border: 1px solid #0f0f12; /* Contorno oscuro en reposo. */
    font-size: 16px; /* Tamaño del nodo. */
    font-weight: 400; /* Regular del diseño. */
    color: #0f0f12; /* Texto oscuro en reposo. */
    text-decoration: none; /* Es un botón, no un enlace de texto. */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; /* Suaviza el hover. */
}

    /* Botón con el puntero encima o con el foco. Le gana al a:hover subrayado de Bootstrap. */
    .TechnicalSupportGrid-service-button:hover,
    .TechnicalSupportGrid-service-button:focus-visible {
        color: #0f0f12; /* Mismo color: no vira al azul de enlace. */
        text-decoration: none; /* Sin subrayado. */
        background-color: rgba(15, 15, 18, 0.04); /* Se rellena apenas. */
    }

    /* Flecha dentro del botón. */
    .TechnicalSupportGrid-service-button span {
        color: #243746; /* Un punto más clara que la etiqueta. */
        font-size: 13.5px; /* Más chica que la etiqueta. */
        transition: color 0.3s ease; /* Suaviza el cambio del hover. */
    }

/* Todas las tarjetas arrancan iguales y solo se distinguen por su acento. Al pasar el puntero se
   tiñen con su propio color. */
.TechnicalSupportGrid-service:hover {
    background-color: var(--card-tint, #8a939c); /* Fondo del tono de la tarjeta. */
    border-color: transparent; /* El filete desaparece contra el fondo teñido. */
}

    /* Los textos pasan a blanco sobre el tinte. */
    .TechnicalSupportGrid-service:hover .TechnicalSupportGrid-service-title,
    .TechnicalSupportGrid-service:hover .TechnicalSupportGrid-service-description {
        color: #ffffff; /* Blanco. */
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); /* Refuerza el contraste contra el tinte pastel. */
    }

    /* El botón pasa a celeste sólido. */
    .TechnicalSupportGrid-service:hover .TechnicalSupportGrid-service-button {
        background-color: #429cde; /* Celeste de marca. */
        border-color: transparent; /* Sin contorno sobre el relleno. */
        color: #ffffff; /* Etiqueta blanca. */
    }

    /* La flecha acompaña al botón. */
    .TechnicalSupportGrid-service:hover .TechnicalSupportGrid-service-button span {
        color: #ffffff; /* Blanca. */
    }

/* --- Tablet: hasta 1024px. La familia pasa a ser una banda ANCHA arriba de la franja (el título y
   la tagline ya NO rotan) y los servicios se acomodan debajo. El alto de las tarjetas pasa a ser
   siempre por contenido. --- */
@media (max-width: 1024px) {
    .TechnicalSupportGrid-content {
        padding: 48px 32px; /* Rellenos del nodo de tablet. */
        gap: 28px; /* Separación real del nodo de tablet. */
    }

    .TechnicalSupportGrid-title {
        font-size: 28px; /* Tamaño del nodo de tablet. */
    }

    .TechnicalSupportGrid-strip {
        flex-direction: column; /* Familia arriba, servicios abajo. */
        gap: 14px; /* Separación del nodo de tablet. */
    }

    .TechnicalSupportGrid-family {
        flex: none; /* Ya no comparte fila con los servicios. */
        width: 100%; /* Banda a todo el ancho. */
        height: 130px; /* Alto de la banda en el nodo de tablet. */
        border-radius: 8px; /* Más que los 6px de la tarjeta angosta de PC. */
    }

    /* Acá el velo es plano y de un solo color: el duotono pertenece al recorte angosto de PC. */
    .TechnicalSupportGrid-family-veil {
        background-color: var(--strip-veil-82, rgba(91, 103, 112, 0.82)); /* Velo plano. */
        mix-blend-mode: normal; /* Sin mezcla. */
    }

    .TechnicalSupportGrid-family::after {
        content: none; /* Sin las capas planas del duotono. */
    }

    /* Título, tagline y acento vuelven a apilarse en flujo normal, en ese orden. */
    .TechnicalSupportGrid-family-text {
        position: absolute; /* Sobre la banda. */
        left: 0; /* La cubre entera. */
        top: 0; /* Ídem. */
        width: 100%; /* Ídem. */
        height: 100%; /* Ídem. */
        display: flex; /* Apila las tres piezas. */
        flex-direction: column; /* Ya no invertido. */
        align-items: flex-start; /* Alineadas a la izquierda. */
        justify-content: center; /* Centradas en el alto de la banda. */
        gap: 4px; /* Separación entre las tres. */
        padding: 0 0 0 24px; /* Solo relleno izquierdo, según el nodo. */
        box-sizing: border-box; /* El relleno entra dentro del ancho. */
    }

    .TechnicalSupportGrid-family-title {
        position: static; /* Vuelve al flujo. */
        width: auto; /* El ancho lo da el texto. */
        height: auto; /* El alto lo da el texto. */
        display: block; /* Ya no necesita centrar nada. */
        font-size: 26px; /* Tamaño del nodo de tablet. */
        transform: none; /* Ya no rota: la banda es panorámica. */
    }

    .TechnicalSupportGrid-family-tagline {
        position: static; /* Vuelve al flujo. */
        width: auto; /* El ancho lo da el texto. */
        text-align: left; /* Alineada a la izquierda. */
    }

    .TechnicalSupportGrid-family-accent {
        position: static; /* Vuelve al flujo. */
        display: block; /* Caja propia. */
        width: 34px; /* Ancho del nodo de tablet. */
        height: 3px; /* Grosor del nodo. */
        background-color: #ff5a1f; /* Naranja del diseño. */
    }

    .TechnicalSupportGrid-services {
        flex-wrap: wrap; /* Las tarjetas bajan de renglón en vez de comprimirse. */
        gap: 14px; /* Separación del nodo de tablet. */
    }

    /* La tarjeta cambia de formato: más compacta, y el botón deja de ser pastilla con flecha. */
    .TechnicalSupportGrid-service {
        flex: 1 1 calc((100% - 2 * 14px) / 3); /* Tres por fila mientras entren. */
        min-width: 200px; /* Envuelve antes de quedar angostísima. */
        aspect-ratio: auto; /* El alto es libre, por contenido. */
        padding: 20px; /* Relleno del nodo de tablet. */
        gap: 8px; /* Separación más corta. */
    }

    .TechnicalSupportGrid-service-title {
        font-size: 17px; /* Tamaño del nodo de tablet. */
    }

    .TechnicalSupportGrid-service-description {
        font-size: 13px; /* Tamaño del nodo de tablet. */
    }

    .TechnicalSupportGrid-service-button {
        border: none; /* Sin contorno. */
        border-radius: 4px; /* Esquinas más chicas. */
        background-color: rgba(15, 15, 18, 0.06); /* Relleno gris tenue. */
        padding: 10px 18px; /* Rellenos del nodo de tablet. */
        font-size: 13px; /* Tamaño del nodo de tablet. */
        font-weight: 600; /* Semibold del diseño, no el Regular de PC. */
        gap: 0; /* Sin flecha, no hay nada que separar. */
    }

        /* Botón compacto con el puntero encima. */
        .TechnicalSupportGrid-service-button:hover,
        .TechnicalSupportGrid-service-button:focus-visible {
            background-color: rgba(15, 15, 18, 0.1); /* Un punto más oscuro. */
        }

        /* La flecha es propia del botón-pastilla de PC. */
        .TechnicalSupportGrid-service-button span {
            display: none; /* Fuera en este rango. */
        }
}

/* --- Mobile: hasta 500px. Los servicios se apilan. --- */
@media (max-width: 500px) {
    .TechnicalSupportGrid-content {
        padding: 32px 20px; /* Rellenos del nodo de mobile. */
    }

    .TechnicalSupportGrid-title {
        font-size: 22px; /* Tamaño del nodo de mobile. */
    }

    .TechnicalSupportGrid-family {
        height: 110px; /* Alto de la banda en el nodo de mobile. */
    }

    .TechnicalSupportGrid-family-title {
        font-size: 22px; /* Tamaño del nodo de mobile. */
    }

    .TechnicalSupportGrid-services {
        flex-direction: column; /* Una tarjeta por fila. */
    }

    .TechnicalSupportGrid-service {
        flex: 1 1 auto; /* Ocupa la fila entera. */
        width: 100%; /* Ancho completo. */
        min-width: 0; /* Anula el piso de tablet. */
    }
}

/* El marcador del editor usa las clases WidgetPlaceholder de site.css, no este archivo. */