/* ==========================================================
   GPS Technology — estilos globales
   Puntos de quiebre: 992px (tableta), 768px (menú móvil), 576px (celular)
   ========================================================== */

:root {
    /* Marca */
    --principal: #066570;
    --principal-oscuro: #044b53;
    --principal-claro: #20b8c5;
    --principal-suave: #eaf3f4;
    --azul: #0b1730;

    /* Texto y superficies */
    --texto: #243247;
    --texto-suave: #536268;
    --borde: #dce8e9;
    --fondo: #f4f8f8;
    --blanco: #fff;
    --foco: #f7b731;

    /* Medidas */
    --ancho-max: 1120px;
    --radio: 12px;
    --radio-grande: 20px;
    --sombra: 0 8px 24px rgba(6, 101, 112, 0.1);
    --sombra-fuerte: 0 16px 32px rgba(6, 101, 112, 0.18);
    --alto-cabecera: 81px;

    /* Tipografía */
    --fuente-texto: "Inter", Arial, Helvetica, sans-serif;
    --fuente-titulos: "Poppins", Arial, Helvetica, sans-serif;

    --whatsapp: #25d366;
    --whatsapp-oscuro: #1da851;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--alto-cabecera) + 16px);
}

body {
    margin: 0;
    font-family: var(--fuente-texto);
    color: var(--texto);
    line-height: 1.65;
    background: var(--blanco);
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 4px;
}

.contenedor {
    width: min(var(--ancho-max), 100% - 32px);
    margin-inline: auto;
}

.contenedor-estrecho {
    width: min(650px, 100% - 32px);
    margin-inline: auto;
}

.saltar-contenido {
    position: fixed;
    top: -100px;
    left: 15px;
    z-index: 1100;
    padding: 12px;
    background: var(--blanco);
    color: var(--azul);
}

.saltar-contenido:focus {
    top: 15px;
}

h1,
h2,
h3,
.marca-texto {
    font-family: var(--fuente-titulos);
    letter-spacing: -0.01em;
}

.contenedor-medio {
    width: min(820px, 100% - 32px);
    margin-inline: auto;
}

.texto-principal {
    color: var(--principal);
}

/* ---------- Cabecera y navegación ---------- */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--blanco);
    border-bottom: 1px solid #e6ebf1;
}

.nav-principal {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 12px 0;
}

.marca {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: var(--azul);
}

.marca-logo {
    display: block;
    width: 52px;
    height: 52px;
}

.marca-texto {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

.marca-texto span {
    color: var(--principal);
}

.marca-texto small {
    display: block;
    margin-top: 4px;
    color: var(--texto-suave);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
}

.nav-enlaces {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 15px;
    font-weight: 600;
}

.nav-enlaces a:not(.boton):hover,
.nav-enlaces a:not(.boton)[aria-current="page"] {
    color: var(--principal);
}

.menu-toggle {
    display: none;
}

/* ---------- Botones ---------- */
.boton {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid var(--principal);
    border-radius: 8px;
    background: var(--principal);
    color: var(--blanco);
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.boton:hover {
    background: var(--principal-oscuro);
    color: var(--blanco);
}

.boton-pequeno {
    padding: 9px 18px;
}

.boton-redondo {
    border-radius: 999px;
}

.boton-contorno {
    background: transparent;
    color: var(--principal);
}

.boton-contorno:hover {
    background: var(--principal-suave);
    color: var(--principal);
}

.boton-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-color: var(--whatsapp);
    background: var(--whatsapp);
    color: #06371b;
}

.boton-whatsapp:hover {
    border-color: var(--whatsapp-oscuro);
    background: var(--whatsapp-oscuro);
    color: var(--blanco);
}

.boton-claro {
    border-color: var(--blanco);
    background: var(--blanco);
    color: var(--principal);
}

.boton-claro:hover {
    background: var(--principal-suave);
    color: var(--principal-oscuro);
}

/* ---------- Carrusel principal ---------- */
.carrusel-principal .carousel-item img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 640px;
    object-fit: cover;
}

/* El texto va debajo de la imagen: los banners ya traen su propio diseño */
.carrusel-principal .carousel-caption {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 18px max(16px, calc((100% - var(--ancho-max)) / 2)) 40px;
    background: var(--azul);
    text-align: left;
}

.carrusel-principal .carousel-caption h2 {
    margin: 0;
    color: var(--blanco);
    font-size: clamp(18px, 2vw, 24px);
}

.carrusel-principal .carousel-caption p {
    flex: 1 1 300px;
    margin: 0;
    color: #bdc9db;
}

/* Las flechas cubren solo la imagen (16:9 a todo el ancho, máx. 640px) */
.carrusel-principal .carousel-control-prev,
.carrusel-principal .carousel-control-next {
    bottom: auto;
    height: min(100vw * 9 / 16, 640px);
}

.carrusel-principal .carousel-indicators {
    margin-bottom: 10px;
}

/* ---------- Secciones ---------- */
.seccion {
    padding: 72px 0;
}

.fondo-suave {
    background: var(--fondo);
}

h2 {
    margin: 12px 0;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.25;
}

.titulo-seccion {
    max-width: 700px;
    margin: 0 auto 36px;
    text-align: center;
}

.titulo-seccion h2 {
    color: var(--principal);
}

.titulo-seccion h3 {
    font-size: 1.25rem;
}

.titulo-seccion p,
.tarjeta p,
.nosotros p {
    color: var(--texto-suave);
}

.etiqueta {
    color: var(--principal);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ---------- Presentación ---------- */
.presentacion {
    padding: 64px 0;
}

.presentacion-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 48px;
}

.presentacion h1 {
    margin: 10px 0 16px;
    color: var(--azul);
    font-size: clamp(30px, 4.2vw, 48px);
    font-weight: 800;
    line-height: 1.12;
}

.presentacion-texto {
    max-width: 520px;
    color: var(--texto-suave);
    font-size: 18px;
}

.presentacion-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.beneficios {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.beneficios li {
    display: flex;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--blanco);
    box-shadow: var(--sombra);
}

.beneficios i {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--principal-suave);
    color: var(--principal);
    font-size: 20px;
}

.beneficios strong {
    display: block;
    color: var(--azul);
    line-height: 1.3;
}

.beneficios span {
    color: var(--texto-suave);
    font-size: 14px;
}

/* ---------- Planes ---------- */
.planes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    align-items: stretch;
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-grande);
    background: var(--blanco);
    box-shadow: var(--sombra);
}

.plan-destacado {
    border: 2px solid var(--principal);
    box-shadow: var(--sombra-fuerte);
}

.plan-insignia {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    border-radius: 999px;
    background: var(--principal);
    color: var(--blanco);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.plan h3 {
    margin: 0 0 6px;
    color: var(--azul);
    font-size: 22px;
}

.plan-descripcion {
    color: var(--texto-suave);
    font-size: 15px;
}

.plan-precio {
    margin: 12px 0 20px;
    color: var(--principal);
    font-family: var(--fuente-titulos);
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
}

.plan-precio span {
    font-size: 24px;
    vertical-align: top;
}

.plan-precio small {
    color: var(--texto-suave);
    font-family: var(--fuente-texto);
    font-size: 15px;
    font-weight: 500;
}

.plan ul {
    flex-grow: 1;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.plan li {
    display: flex;
    gap: 10px;
    padding: 6px 0;
}

.plan li i {
    color: var(--principal);
}

/* ---------- Listas ---------- */
.lista-check {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.lista-check li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    font-weight: 500;
}

.lista-check i {
    color: var(--principal);
    font-size: 20px;
}

/* ---------- Preguntas frecuentes ---------- */
.preguntas {
    display: grid;
    gap: 12px;
}

.pregunta {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--blanco);
}

.pregunta summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    color: var(--azul);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.pregunta summary::-webkit-details-marker {
    display: none;
}

.pregunta summary::after {
    content: "+";
    flex-shrink: 0;
    color: var(--principal);
    font-size: 24px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.pregunta[open] summary::after {
    transform: rotate(45deg);
}

.pregunta-respuesta {
    padding: 0 22px 8px;
    color: var(--texto-suave);
}

/* ---------- Llamado final ---------- */
.cta-final {
    padding: 56px 0;
    background: linear-gradient(120deg, var(--principal-oscuro), var(--principal));
    color: var(--blanco);
}

.cta-final-contenido {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.cta-final h2 {
    margin: 0 0 6px;
    font-size: clamp(22px, 2.6vw, 30px);
}

.cta-final p {
    margin: 0;
    color: #d3ecee;
}

.cta-final .presentacion-acciones {
    margin-top: 0;
}

/* ---------- Texto legal ---------- */
.texto-legal h1 {
    margin: 8px 0 24px;
    color: var(--azul);
    font-size: clamp(28px, 3.4vw, 38px);
}

.texto-legal h2 {
    margin-top: 32px;
    color: var(--principal);
    font-size: 20px;
}

.texto-legal a {
    color: var(--principal);
    text-decoration: underline;
}

/* ---------- WhatsApp flotante ---------- */
.whatsapp-flotante {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 12px 14px;
    border-radius: 999px;
    background: var(--whatsapp);
    color: #06371b;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.whatsapp-flotante i {
    font-size: 26px;
    line-height: 1;
}

.whatsapp-flotante:hover {
    background: var(--whatsapp-oscuro);
    color: var(--blanco);
    transform: translateY(-3px);
}

/* ---------- Servicios ---------- */
@property --angulo-servicio {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.tarjetas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 2px solid transparent;
    border-radius: var(--radio-grande);
    background:
        linear-gradient(var(--blanco), var(--blanco)) padding-box,
        conic-gradient(
            from var(--angulo-servicio),
            var(--borde) 0deg,
            var(--borde) 260deg,
            var(--principal) 310deg,
            var(--principal-claro) 340deg,
            var(--borde) 360deg
        ) border-box;
    box-shadow: var(--sombra);
    animation: recorrer-borde-servicio 3s linear infinite paused;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta:hover,
.tarjeta:focus-within {
    transform: translateY(-8px);
    box-shadow: var(--sombra-fuerte);
    animation-play-state: running;
}

.tarjeta-imagen {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radio);
    margin-bottom: 20px;
}

.numero {
    color: var(--principal);
    font-size: 26px;
    font-weight: 800;
}

.tarjeta h3 {
    margin: 12px 0;
    color: var(--principal);
    font-size: 21px;
}

.tarjeta p {
    flex-grow: 1;
}

.tarjeta a {
    color: var(--principal);
    font-weight: 700;
}

@keyframes recorrer-borde-servicio {
    to {
        --angulo-servicio: 360deg;
    }
}

/* ---------- Descargas ---------- */
.descargas {
    text-align: center;
}

.descargas-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.descarga-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px;
}

.descarga-item img {
    display: block;
    width: 100%;
    max-width: 225px;
    height: auto;
    aspect-ratio: 450 / 174;
    object-fit: contain;
}

.descarga-item span {
    color: var(--principal);
    font-size: 15px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.descarga-item:hover span {
    color: var(--azul);
}

/* ---------- Nosotros ---------- */
.nosotros {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
}

/* ---------- Testimonios ---------- */
.testimonios-pista {
    --por-vista: 3;
    --separacion: 24px;

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(
        (100% - (var(--por-vista) - 1) * var(--separacion)) / var(--por-vista)
    );
    gap: var(--separacion);
    margin: 0;
    padding: 8px 4px 16px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.testimonios-pista::-webkit-scrollbar {
    display: none;
}

.testimonio {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: var(--radio-grande);
    background: var(--blanco);
    box-shadow: var(--sombra);
    scroll-snap-align: start;
}

.testimonio blockquote {
    flex-grow: 1;
    margin: 0 0 16px;
    color: var(--texto-suave);
    font-style: italic;
}

.testimonio-autor {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--borde);
    color: var(--principal);
    font-weight: 700;
}

.testimonio time {
    color: var(--texto-suave);
    font-size: 13px;
}

.testimonios-controles {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.testimonios-controles[hidden] {
    display: none;
}

.testimonios-cta {
    margin-top: 48px;
    text-align: center;
}

.testimonios-cta h3 {
    color: var(--principal);
    font-weight: 700;
}

.nota {
    margin-top: 12px;
    color: var(--texto-suave);
    font-size: 14px;
}

/* ---------- Footer ---------- */
.footer {
    padding: 56px 0 24px;
    background: var(--azul);
    color: var(--blanco);
}

.footer-logo {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
    margin-bottom: 12px;
}

.footer-contenido {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: 32px;
}

.footer p {
    color: #bdc9db;
    font-size: 14px;
}

.footer-columna {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-style: normal;
}

.footer-columna h2 {
    margin: 0 0 6px;
    color: var(--blanco);
    font-size: 16px;
}

.footer-columna a,
.footer-columna span {
    color: #bdc9db;
    overflow-wrap: anywhere;
}

.footer-columna i {
    margin-right: 6px;
    color: var(--principal-claro);
}

.footer a:hover {
    color: var(--blanco);
}

.footer-redes {
    display: flex;
    gap: 10px;
}

.footer-redes a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff14;
    font-size: 17px;
}

.footer-redes a:hover {
    background: var(--principal);
}

.footer-final {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ffffff20;
    font-size: 14px;
}

.footer-final p {
    margin: 0;
}

.footer-final a {
    color: #bdc9db;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---------- Páginas internas ---------- */
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.encabezado-pagina {
    padding: 56px 0 48px;
    background: linear-gradient(135deg, var(--azul), var(--principal-oscuro));
    color: var(--blanco);
}

.encabezado-pagina .etiqueta {
    color: var(--principal-claro);
}

.encabezado-pagina h1 {
    margin: 8px 0;
    font-size: clamp(30px, 4vw, 44px);
}

.encabezado-pagina p {
    max-width: 620px;
    margin: 0;
    color: #d6e6e8;
}

.vacio-publico {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 16px;
    color: var(--texto-suave);
    text-align: center;
}

.vacio-publico .bi {
    color: var(--principal);
    font-size: 40px;
}

.vacio-publico a,
.volver-publico {
    color: var(--principal);
    font-weight: 600;
}

.volver-publico {
    display: inline-flex;
    gap: 6px;
    margin-bottom: 24px;
}

.centrado {
    margin: 32px 0 0;
    text-align: center;
}

/* ---------- Pestañas (Nosotros) ---------- */
.pestanas-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.pestanas-lista button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--blanco);
    color: var(--texto);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.pestanas-lista button:hover {
    border-color: var(--principal);
    color: var(--principal);
}

.pestanas-lista button[aria-selected="true"] {
    border-color: var(--principal);
    background: var(--principal);
    color: var(--blanco);
}

.pestana-panel {
    padding: 32px;
    border-radius: var(--radio-grande);
    background: var(--fondo);
}

.pestana-panel h2 {
    margin-top: 0;
    color: var(--principal);
}

.pestana-panel p {
    color: var(--texto-suave);
}

.pestana-panel p:last-child {
    margin-bottom: 0;
}

/* Sin JavaScript se ven todos los textos, uno tras otro */
.pestanas:not(.pestanas-activas) .pestanas-lista {
    display: none;
}

.pestanas:not(.pestanas-activas) .pestana-panel + .pestana-panel {
    margin-top: 16px;
}

/* ---------- Productos ---------- */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}

.filtros a {
    padding: 8px 16px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
}

.filtros a:hover {
    border-color: var(--principal);
    color: var(--principal);
}

.filtros a[aria-current="page"] {
    border-color: var(--principal);
    background: var(--principal);
    color: var(--blanco);
}

.productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 24px;
}

.producto {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--borde);
    border-radius: var(--radio-grande);
    background: var(--blanco);
    box-shadow: var(--sombra);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.producto:hover,
.producto:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--sombra-fuerte);
}

.producto-imagen img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--fondo);
}

.producto-cuerpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px;
}

.producto-categoria {
    color: var(--principal);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.producto h3 {
    margin: 6px 0 8px;
    font-size: 19px;
}

.producto h3 a:hover {
    color: var(--principal);
}

.producto-cuerpo p {
    flex: 1;
    color: var(--texto-suave);
    font-size: 15px;
}

.producto-pie {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.producto-precio {
    color: var(--azul);
    font-family: var(--fuente-titulos);
    font-weight: 700;
}

.producto-enlace {
    color: var(--principal);
    font-size: 14px;
    font-weight: 700;
}

.producto-detalle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.producto-detalle-imagen {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radio-grande);
    background: var(--fondo);
    box-shadow: var(--sombra);
}

.producto-detalle h1 {
    margin: 8px 0;
    font-size: clamp(28px, 3.5vw, 40px);
}

.producto-resumen {
    color: var(--texto-suave);
    font-size: 18px;
}

.producto-precio-grande {
    font-size: 28px;
}

.producto-precio-grande small {
    color: var(--texto-suave);
    font-size: 14px;
}

.producto-subtitulo {
    font-size: 20px;
}

/* ---------- Documentos ---------- */
.buscador {
    position: relative;
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
}

.buscador .bi-search {
    position: absolute;
    top: 50%;
    left: 16px;
    color: var(--texto-suave);
    transform: translateY(-50%);
}

.buscador input {
    flex: 1;
    min-width: 0;
    padding: 10px 16px 10px 44px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    font: inherit;
}

.buscador input:focus {
    border-color: var(--principal);
    outline: 3px solid var(--principal-suave);
}

.documentos-grupo + .documentos-grupo {
    margin-top: 40px;
}

.documentos-grupo h2 {
    font-size: 22px;
    color: var(--principal);
}

.documentos {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.documento {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--blanco);
}

.documento:hover {
    border-color: var(--principal-claro);
}

.documento-icono {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: var(--principal-suave);
    color: var(--principal);
    font-size: 12px;
    font-weight: 800;
}

.documento-texto {
    min-width: 0;
}

.documento h3 {
    margin: 0;
    font-size: 17px;
}

.documento p {
    margin: 2px 0;
    color: var(--texto-suave);
    font-size: 14px;
}

.documento small {
    color: var(--texto-suave);
    font-size: 12px;
}

@media (max-width: 768px) {
    .producto-detalle {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pestana-panel {
        padding: 22px;
    }
}

/* ==========================================================
   Responsive
   ========================================================== */

/* Tableta */
@media (max-width: 992px) {
    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: var(--blanco);
        color: var(--azul);
        font-size: 26px;
        cursor: pointer;
    }

    .nav-enlaces {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 16px;
        background: var(--blanco);
        border: 1px solid #e2e8f0;
        border-radius: 0 0 var(--radio) var(--radio);
        box-shadow: 0 10px 20px #0b173015;
    }

    .nav-enlaces.menu-abierto {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .nav-enlaces a {
        padding: 10px 14px;
        border-radius: 8px;
    }

    .nav-enlaces a:not(.boton)[aria-current="page"] {
        background: var(--principal-suave);
    }

    .tarjetas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Tarjeta impar sobrante: centrada en lugar de quedar sola a la izquierda */
    .tarjeta:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 12px);
    }

    .descargas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .testimonios-pista {
        --por-vista: 2;
    }

    .presentacion-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-contenido {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Menú móvil */
@media (max-width: 768px) {
    :root {
        --alto-cabecera: 69px;
    }

    /* En celular se mantiene el nombre de la empresa, en tamaño reducido */
    .marca {
        gap: 8px;
        min-width: 0;
    }

    .marca-logo {
        width: 42px;
        height: 42px;
    }

    .marca-texto {
        font-size: 18px;
    }

    .marca-texto small {
        margin-top: 2px;
        font-size: 10px;
        letter-spacing: 0.5px;
    }

    .seccion {
        padding: 48px 0;
    }

    .nosotros {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .presentacion {
        padding: 40px 0;
    }

    .cta-final-contenido {
        flex-direction: column;
        align-items: flex-start;
    }

    .carrusel-principal .carousel-caption {
        justify-content: center;
        text-align: center;
    }

    .carrusel-principal .carousel-caption p {
        display: none;
    }
}

/* Celular */
@media (max-width: 576px) {
    .documento {
        grid-template-columns: auto 1fr;
    }

    .documento .boton {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .pestanas-lista button {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
    }

    .tarjetas,
    .descargas-grid {
        grid-template-columns: 1fr;
    }

    .tarjeta:last-child:nth-child(odd) {
        width: auto;
    }

    .tarjeta {
        padding: 20px;
    }

    .testimonios-pista {
        --por-vista: 1.15;
        --separacion: 16px;
    }

    .beneficios,
    .footer-contenido {
        grid-template-columns: 1fr;
    }

    .presentacion-acciones .boton {
        flex: 1 1 100%;
    }

    /* En celular el botón flotante muestra solo el ícono */
    .whatsapp-flotante {
        right: 16px;
        bottom: 16px;
        padding: 14px;
    }

    .whatsapp-flotante-texto {
        display: none;
    }

    /* Espacio para que el botón flotante no tape el pie de página */
    .footer {
        padding-bottom: 88px;
    }
}

/* Celulares pequeños */
@media (max-width: 360px) {
    .marca-logo {
        width: 36px;
        height: 36px;
    }

    .marca-texto {
        font-size: 16px;
    }

    .marca-texto small {
        font-size: 9px;
        letter-spacing: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .tarjeta,
    .boton,
    .whatsapp-flotante,
    .pregunta summary::after {
        animation: none;
        transition: none;
    }

    .tarjeta:hover,
    .tarjeta:focus-within {
        transform: none;
    }
}