/* Importamos la fuente 'Inter' de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* Variables para colores (fáciles de cambiar) */
:root {
    --azul-primario: #0056b3; /* Un azul más moderno y corporativo */
    --texto-oscuro: #2d3748;
    --texto-claro: #718096;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

/* El contenedor mantiene todo centrado y con un ancho máximo */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

/* --- Barra Azul (Top Bar) --- */

/* --- Hacer que el menú persiga al usuario (Sticky) --- */
#contenedor-menu {
    position: sticky;
    top: 0;
    z-index: 9999; /* Esto asegura que el menú SIEMPRE pase por encima de las fotos y el texto */
}
.top-bar {
    background-color: var(--azul-primario);
    color: white;
    font-size: 13px;
    padding: 10px 0;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar a, .top-bar span {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px; /* Separación entre ícono y texto */
    letter-spacing: 0.3px;
}

.top-bar a:hover {
    color: white;
}

/* --- Barra Blanca (Navbar) --- */
.navbar {
    background-color: white;
    /* Una sombra mucho más suave y extendida para dar efecto "flotante" */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); 
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-content {
    /* Grid de 3 columnas: logo | enlaces | botón. Las dos columnas 1fr de
       los costados son iguales, así que la columna central (los enlaces)
       queda perfectamente centrada sin importar el ancho del logo o del
       botón. El logo NO se centra: se ancla al inicio de su columna
       (justify-self: start), pegado a la izquierda igual que antes. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 24px;
    height: 72px;
}

.logo { justify-self: start; }

.logo img {
    /* El archivo es cuadrado (1200x1200): con height:auto el ancho sigue
       la misma proporción, así que nunca se deforma. 44px deja ~14px de
       aire arriba y abajo dentro de los 72px del navbar. */
    height: 44px;
    width: auto;
    object-fit: contain;
}

.enlaces {
    list-style: none;
    display: flex;
    gap: 32px;
    justify-self: center;
}

/* Botón de acción a la derecha, anclado al final de su columna.
   Reutiliza los colores de .btn-primario con un tamaño más compacto,
   a juego con la altura del navbar. */
.btn-nav {
    justify-self: end;
    padding: 10px 24px;
    font-size: 0.9rem;
    white-space: nowrap;
}

.enlaces a {
    text-decoration: none;
    color: var(--texto-oscuro);
    font-size: 15px;
    font-weight: 500;
    position: relative;
    padding: 8px 0;
    transition: color 0.3s ease;
}

/* Efecto minimalista: Subrayado animado al pasar el mouse */
.enlaces a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--azul-primario);
    transition: width 0.3s ease;
}

.enlaces a:hover {
    color: var(--azul-primario);
}

.enlaces a:hover::after {
    width: 100%;
}




/* =====================================================================
   HERO: carrusel de fotos a todo el ancho, sin texto encima.
   Las imágenes se agregan en hero-carrusel.js (arreglo HERO_IMAGENES),
   no aquí. El recorte se ajusta solo con object-fit, así que no importa
   el tamaño exacto que traiga cada foto.
   ===================================================================== */
.hero-foto {
    position: relative;
    line-height: 0; /* evita el espacio fantasma que deja la imagen inline */
    overflow: hidden;
    outline: none; /* el foco por teclado ya se ve en las flechas/puntos */
}

.hero-carrusel-track {
    position: relative;
    width: 100%;
    height: clamp(320px, 55vw, 640px);
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.9s ease;
}

.hero-slide.activa {
    opacity: 1;
}

/* --- Flechas de navegación --- */
.hero-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    color: var(--texto-oscuro);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.hero-flecha:hover {
    background-color: #ffffff;
    transform: translateY(-50%) scale(1.08);
}

.hero-flecha--prev { left: 20px; }
.hero-flecha--next { right: 20px; }

/* --- Puntos indicadores --- */
.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 10px;
}

.hero-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.hero-dots button.activo {
    background-color: #ffffff;
    transform: scale(1.3);
}

@media (max-width: 768px) {
    .hero-flecha { width: 38px; height: 38px; font-size: 0.95rem; }
    .hero-flecha--prev { left: 10px; }
    .hero-flecha--next { right: 10px; }
}

/* --- Acciones debajo del hero: los botones que antes iban sobre la foto --- */
.hero-acciones {
    background-color: #f8fafc;
    padding: 40px 0;
    text-align: center;
}

.hero-botones {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.btn {
    padding: 15px 30px;
    border-radius: 8px; /* Bordes ligeramente redondeados */
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-primario {
    background-color: var(--azul-primario);
    color: white;
}

.btn-primario:hover {
    background-color: #004494;
    transform: translateY(-2px); /* Se levanta un poquito al pasar el mouse */
}

.btn-secundario {
    background-color: transparent;
    color: var(--azul-primario);
    border: 2px solid var(--azul-primario);
}

.btn-secundario:hover {
    background-color: rgba(0, 86, 179, 0.05);
}

/* Utilidad: oculta visualmente pero mantiene accesible a lectores de
   pantalla. Se usa para el <h1> del hero, que ya no se ve en pantalla
   pero sigue siendo necesario para SEO y accesibilidad. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* --- Cinta de Marcas --- */
.cinta-marcas {
    background-color: white;
    padding: 30px 0;
    border-bottom: 1px solid #eaeaea; /* Una línea sutil para separar */
}

.marcas-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.marcas-contenido p {
    color: var(--texto-claro);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.logos-marcas {
    display: flex;
    gap: 80px; /* AUMENTADO: Más espacio entre logos (antes 50px) */
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.logos-marcas img {
    height: 70px; /* ¡AUMENTADO! Logos mucho más grandes (antes 40px) */
    width: auto; /* Mantiene la proporción */
    object-fit: contain;
    /* Efecto premium: Escala de grises sutil que toma color al pasar el mouse */
    filter: grayscale(100%) opacity(0.6); 
    transition: all 0.3s ease;
}

.logos-marcas img:hover {
    filter: grayscale(0%) opacity(1); /* Toman color original */
    transform: scale(1.05); /* Pequeño zoom */
}

/* --- Beneficios --- */
.beneficios {
    background-color: white;
    padding: 80px 0;
}

.beneficios-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas del mismo tamaño */
    gap: 40px;
    text-align: center;
}

/* Bug preexistente (afectaba también a la home, no solo a Nosotros):
   3 columnas fijas nunca se achicaban en celular, así que el contenido
   desbordaba el ancho de la pantalla. */
@media (max-width: 640px) {
    .beneficios-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.beneficio-item {
    padding: 20px;
}

.icono-beneficio {
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0, 86, 179, 0.08);
    font-size: 1.9rem;
    color: var(--azul-primario);
}

.beneficio-item h3 {
    color: var(--texto-oscuro);
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.beneficio-item p {
    color: var(--texto-claro);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* --- Sección de Productos --- */
.productos-seccion {
    background-color: #f8fafc; /* Volvemos al fondo gris claro del Hero para dar contraste */
    padding: 100px 0;
}

.titulo-seccion {
    text-align: center;
    margin-bottom: 60px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.titulo-seccion h2 {
    font-size: 2.5rem;
    color: var(--texto-oscuro);
    margin-bottom: 15px;
}

.titulo-seccion p {
    color: var(--texto-claro);
    font-size: 1.1rem;
    line-height: 1.6;
}

/* --- Grid de Tarjetas --- */
.productos-grid {
    display: grid;
    /* Esto hace que sea responsive automáticamente.
       Si la pantalla es pequeña, se pone en 1 columna. Si es grande, en 3.
       El min(320px, 100%) evita que en celulares angostos (320px de
       ancho real, como un iPhone SE) el mínimo de 320px sea más ancho
       que la pantalla misma y la tarjeta se salga del borde. */
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 40px;
}

/* --- Estilo Minimalista de las Tarjetas --- */
.producto-card {
    background-color: white;
    border-radius: 12px;
    overflow: hidden; /* Para que la imagen no se salga de los bordes redondeados */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); /* Sombra casi invisible inicial */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto al pasar el mouse (Se levanta ligeramente) */
.producto-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.card-imagen {
    height: 240px;
    /* Fondo neutro: solo se ve si la foto tarda en cargar, o detrás del
       ícono de "próximamente". Con fotos de fondo blanco (como las que
       estás usando ahora) queda invisible, sin marco alrededor. */
    background-color: #f1f5f9;
}

.card-imagen img {
    width: 100%;
    height: 100%;
    /* "cover": la foto llena la tarjeta de borde a borde. Funciona bien
       mientras tus fotos de catálogo compartan un fondo blanco/claro
       parecido (como ahora) — si en el futuro usas una foto con fondo
       oscuro o muy distinto, avísame y ajustamos esta tarjeta puntual. */
    object-fit: cover;
}

/* Categoría sin foto propia todavía (ej. Herramientas, catálogo en
   construcción): ícono centrado en vez de una imagen rota. */
.card-imagen--proximamente {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e0;
    font-size: 3.5rem;
}

.etiqueta-proximamente {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: var(--azul-primario);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 999px;
}

.card-contenido {
    padding: 30px;
}

.card-contenido h3 {
    font-size: 1.3rem;
    color: var(--texto-oscuro);
    margin-bottom: 12px;
}

.card-contenido p {
    color: var(--texto-claro);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* --- Botón de Enlace con Flecha --- */
.enlace-flecha {
    text-decoration: none;
    color: var(--azul-primario);
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.3s ease;
}

/* Efecto moderno: la flecha se mueve a la derecha al pasar el mouse */
.enlace-flecha:hover {
    gap: 15px; 
}


/* ========================================== */
/* SECCIÓN 5: CTA (LLAMADA A LA ACCIÓN)       */
/* ========================================== */
.cta-whatsapp {
    background-color: #e8f0fe;
    padding: 70px 0;
    text-align: center;
}

.cta-contenido h2 {
    font-size: 2.2rem;
    color: var(--texto-oscuro);
    margin-bottom: 15px;
}

.cta-contenido p {
    color: var(--texto-claro);
    margin-bottom: 35px;
    font-size: 1.1rem;
}

.btn-whatsapp-grande {
    background-color: #25D366;
    color: white;
    padding: 16px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-whatsapp-grande:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
}

/* ========================================== */
/* FOOTER (PIE DE PÁGINA)                     */
/* ========================================== */
.footer-moderno {
    background-color: #1a202c; /* Azul/gris oscuro elegante */
    color: #a0aec0;
    padding: 70px 0 20px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    margin-bottom: 50px;
}

.footer-logo {
    height: 45px;
    margin-bottom: 25px;
    /* Esto vuelve blanco tu logo si es de color oscuro */
    filter: brightness(0) invert(1); 
}

.footer-col h4 {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 25px;
}

.footer-col p {
    line-height: 1.7;
    margin-bottom: 25px;
}

/* Redes Sociales */
.redes-sociales {
    display: flex;
    gap: 15px;
}

.redes-sociales a {
    color: #a0aec0;
    background-color: rgba(255, 255, 255, 0.05);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}

.redes-sociales a:hover {
    background-color: var(--azul-primario);
    color: white;
}

/* Enlaces del Footer */
.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 15px;
}

.footer-col ul a {
    color: #a0aec0;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-col ul a:hover {
    color: white;
    padding-left: 8px; /* Animación sutil a la derecha */
}

/* Contacto */
.lista-contacto li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.6;
}

.lista-contacto i {
    color: var(--azul-primario);
    margin-top: 5px;
}

/* --- Métodos de pago --- */
.footer-pagos {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px 0;
}

.footer-pagos p {
    color: #a0aec0;
    font-size: 0.85rem;
    margin-bottom: 18px;
}

.metodos-pago {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

/* Insignia blanca tipo "chip" para cada método: deja resaltar el color
   propio de cada marca sobre el fondo oscuro del footer. */
.metodo-pago {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #ffffff;
    color: var(--texto-oscuro);
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
}

.metodo-pago i { font-size: 1.25rem; }

/* Colores oficiales de cada red de tarjetas (íconos de Font Awesome) */
.metodo-pago .fa-cc-visa { color: #1a1f71; }
.metodo-pago .fa-cc-mastercard { color: #eb001b; }
.metodo-pago .fa-cc-amex { color: #2e77bc; }
.metodo-pago .fa-cc-diners-club { color: #0079be; }
.metodo-pago .fa-building-columns { color: var(--azul-primario); }

/* Yape y Plin no tienen ícono en Font Awesome: se muestran como insignia
   de texto en su color de marca en vez de imitar su logotipo. */
.metodo-pago--yape { color: #722282; font-weight: 700; }
.metodo-pago--plin { color: #00b2a9; font-weight: 700; }

.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
    font-size: 0.9rem;
}

/* ========================================== */
/* BOTÓN FLOTANTE WHATSAPP                    */
/* ========================================== */
.whatsapp-flotante {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25D366;
    color: white;
    font-size: 2rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 1000; /* Siempre visible por encima de todo */
    transition: transform 0.3s ease;
}

.whatsapp-flotante:hover {
    transform: scale(1.1);
}

/* Anillo pulsante sutil: llama la atención sobre el canal de contacto
   principal sin ser invasivo (se detiene solo, no molesta al hacer scroll). */
.whatsapp-flotante::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: #25D366;
    animation: pulso-whatsapp 2.5s ease-out infinite;
    z-index: -1;
}

@keyframes pulso-whatsapp {
    0% { transform: scale(1); opacity: 0.55; }
    100% { transform: scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-flotante::before { animation: none; }
}


/* ========================================== */
/* SECCIÓN 5: CONTACTO Y UBICACIÓN            */
/* ========================================== */
.contacto-ubicacion {
    background-color: #f8fafc; /* Fondo suave */
    padding: 80px 0;
}

.ubicacion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
    gap: 60px;
    align-items: center;
}

/* Si la pantalla es pequeña (celulares), se pone una cosa debajo de la otra */
@media (max-width: 768px) {
    .ubicacion-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.ubicacion-texto h2 {
    font-size: 2.2rem;
    color: var(--texto-oscuro);
    margin-bottom: 20px;
}

.ubicacion-texto p {
    color: var(--texto-claro);
    line-height: 1.7;
    margin-bottom: 25px;
    font-size: 1.05rem;
}

.info-contacto-directo {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--azul-primario);
    margin-bottom: 30px;
}

.info-contacto-directo p {
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: var(--texto-oscuro);
}

.info-contacto-directo p:last-child {
    margin-bottom: 0;
}

.info-contacto-directo i {
    color: var(--azul-primario);
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

/* El mapa */
.ubicacion-mapa {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Sombra elegante */
    height: 350px;
}

.ubicacion-mapa iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================================== */
/* PÁGINAS DE CATÁLOGO (MÁQUINAS Y HERRAMIENTAS) */
/* ========================================== */

/* Banner: degradado anclado en el azul de marca. El diamante calado de
   fondo es un guiño literal al nombre "DiamondCret". */
.banner-catalogo {
    position: relative;
    /* Degradado de respaldo: si la foto de fondo (más abajo) no carga
       o todavía no se subió, el hero se ve igual de intencional. */
    background: linear-gradient(135deg, #001b3a 0%, #003b7a 55%, var(--azul-primario) 100%);
    color: white;
    border-bottom: 5px solid var(--azul-primario);
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: clamp(360px, 42vw, 480px);
}

.banner-catalogo::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -60px;
    width: 340px;
    height: 340px;
    border: 3px solid rgba(255, 255, 255, 0.12);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
    z-index: 2;
}

/* Foto de fondo de todo el hero. Si el archivo no existe (404), el
   navegador nunca la pinta y solo se ve el degradado de arriba.
   object-fit: cover para que SIEMPRE llene el espacio sin dejar
   franjas vacías; como la foto sugerida ya tiene una proporción muy
   parecida a la del hero (ver medida recomendada en maquinas.html),
   el recorte que hace "cover" es mínimo. */
.banner-catalogo-fondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.banner-catalogo-grid {
    position: relative;
    z-index: 3;
    width: 100%;
}

.banner-catalogo-texto {
    max-width: 620px;
    /* Sin overlay de color sobre la foto, así que el texto necesita
       su propia sombra para leerse bien encima de cualquier imagen. */
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.banner-label {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #a8c6ec;
    margin-bottom: 10px;
}

.banner-catalogo h1 {
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 12px;
    max-width: 18ch;
}

.banner-categorias {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 12px;
}

.banner-descripcion {
    color: #cbd5e1;
    font-size: 1rem;
    max-width: 48ch;
    line-height: 1.6;
    margin-bottom: 22px;
}

.banner-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Variante clara del botón secundario, para fondos oscuros */
.btn-secundario-claro {
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    background-color: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.btn-secundario-claro:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
}

/* Etiqueta flotante sobre la foto de fondo (ej. "XINGYI GX 550") */
.banner-foto-etiqueta {
    position: absolute;
    right: 24px;
    bottom: 20px;
    z-index: 3;
    background-color: rgba(10, 25, 50, 0.85);
    color: white;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.4;
}

.banner-foto-etiqueta strong {
    display: block;
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .banner-foto-etiqueta {
        display: none;
    }
}


/* ========================================== */
/* EXPLORA POR CATEGORÍA                       */
/* ========================================== */
.categorias-explorar {
    padding: 60px 0 20px;
}

/* Variante de .titulo-seccion alineada a la izquierda, para secciones
   que no necesitan el centrado simétrico de la home. */
.titulo-seccion--izq {
    text-align: left;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.categorias-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

@media (max-width: 1100px) {
    .categorias-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .categorias-grid { grid-template-columns: repeat(2, 1fr); }
}

.categoria-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.categoria-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.07);
    border-color: var(--azul-primario);
}

.categoria-card-img {
    height: 120px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f6f8fa;
}

.categoria-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.categoria-card-info {
    padding: 14px 16px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.categoria-card-info h3 {
    font-size: 0.95rem;
    color: var(--texto-oscuro);
    margin: 0 0 2px;
}

.categoria-card-info span {
    font-size: 0.78rem;
    color: var(--texto-claro);
}

.categoria-card-info i {
    color: var(--azul-primario);
    flex-shrink: 0;
}

/* ========================================== */
/* CATÁLOGO: encabezado, buscador y filtros    */
/* ========================================== */
.catalogo-seccion {
    padding: 50px 0 70px;
    scroll-margin-top: 90px; /* que el ancla #catalogo no quede tapada por el navbar sticky */
}

.catalogo-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.catalogo-header h2 {
    font-size: 1.7rem;
    color: var(--texto-oscuro);
    margin-bottom: 6px;
}

.catalogo-header > div:first-child p {
    color: var(--texto-claro);
    font-size: 0.95rem;
}

.catalogo-controles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.catalogo-buscador {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    padding: 10px 16px;
    min-width: 220px;
}

.catalogo-buscador i {
    color: var(--texto-claro);
}

.catalogo-buscador input {
    border: none;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: var(--texto-oscuro);
    width: 100%;
}

.catalogo-orden {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--texto-claro);
    font-weight: 500;
}

.catalogo-orden select {
    border: 1px solid #dde3ea;
    border-radius: 8px;
    padding: 10px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: var(--texto-oscuro);
    background: #ffffff;
    cursor: pointer;
}

.catalogo-buscador:focus-within,
.catalogo-orden select:focus-visible {
    outline: 2px solid var(--azul-primario);
    outline-offset: 2px;
}

/* Estructura de dos columnas — a todo el ancho de la pantalla (ya no
   lleva la clase .container, que lo limitaba a 1200px centrado). */
.layout-catalogo {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    padding: 0 clamp(20px, 4vw, 60px);
}

/* Sidebar (Filtros) */
.sidebar-filtros h3 {
    font-size: 1.1rem;
    color: var(--texto-oscuro);
    margin-bottom: 15px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 10px;
}

.lista-filtros {
    list-style: none;
    margin-bottom: 30px;
}

.lista-filtros li {
    margin-bottom: 4px;
}

/* Barra de acento a la izquierda del activo — el mismo lenguaje que ya
   usas en "info-contacto-directo" (borde izquierdo azul), no un truco
   nuevo. El ícono por categoría reutiliza tu set de Font Awesome. */
.lista-filtros button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    color: var(--texto-claro);
    padding: 8px 10px 8px 12px;
    border-left: 3px solid transparent;
    border-radius: 0 6px 6px 0;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.lista-filtros button .filtro-nombre {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lista-filtros button i {
    color: var(--texto-claro);
    width: 16px;
    text-align: center;
    transition: color 0.25s ease;
}

.lista-filtros button .filtro-cuenta {
    font-size: 0.78rem;
    color: var(--texto-claro);
    font-variant-numeric: tabular-nums;
}

.lista-filtros button:hover {
    color: var(--azul-primario);
    background-color: rgba(0, 86, 179, 0.05);
}

.lista-filtros button.activo {
    color: var(--azul-primario);
    font-weight: 600;
    border-left-color: var(--azul-primario);
    background-color: rgba(0, 86, 179, 0.06);
}

.lista-filtros button:hover i,
.lista-filtros button.activo i {
    color: var(--azul-primario);
}

.lista-filtros button:focus-visible {
    outline: 2px solid var(--azul-primario);
    outline-offset: 2px;
}

/* Tarjeta de contacto en el sidebar: "¿no encuentras tu equipo?" */
.caja-asesor {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 22px;
}

.caja-asesor-icono {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: rgba(0, 86, 179, 0.1);
    color: var(--azul-primario);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 14px;
}

.caja-asesor h4 {
    font-size: 0.95rem;
    color: var(--texto-oscuro);
    margin-bottom: 8px;
    line-height: 1.4;
}

.caja-asesor p {
    font-size: 0.85rem;
    color: var(--texto-claro);
    line-height: 1.5;
    margin-bottom: 16px;
}

.btn-asesor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--azul-primario);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.btn-asesor:hover { gap: 12px; }

.catalogo-sin-resultados {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    color: var(--texto-claro);
}

/* Grilla de Productos del Catálogo. 3 columnas es la base "cómoda":
   a 4 columnas en una laptop normal (~1280-1440px) las tarjetas quedaban
   tan angostas que el título se partía a media palabra ("HTG-\n250D") y
   el botón "Cotizar Equipo" se iba a dos líneas — eso era lo tosco.
   4 columnas se reserva para monitores genuinamente anchos (≥1600px),
   donde cada tarjeta sigue teniendo ~270px de aire real. */
.grilla-catalogo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch;
}

@media (min-width: 1600px) {
    .grilla-catalogo {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 900px) {
    .grilla-catalogo {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .grilla-catalogo {
        grid-template-columns: 1fr;
    }
}

/* --- Tarjeta de producto: mismo lenguaje que .producto-card en la home
   (blanco, esquina redondeada, sombra al hover) --- */
.card-producto-detalle {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    height: 100%;
    position: relative;
}

.card-producto-detalle > a {
    display: block;
}

/* Antes: pastilla roja para "Más Vendida", pastilla verde para "Nuevo" —
   dos colores que no eran ni de tu marca ni el uno del otro. Ahora las
   dos comparten el azul de marca (se distinguen por texto, no por
   color) y el rombo es el mismo motivo geométrico del banner y el logo. */
.etiqueta-destacado, .etiqueta-nuevo {
    position: absolute;
    top: 15px;
    left: 15px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 10px;
    border-radius: 20px;
    background-color: var(--azul-primario);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0, 86, 179, 0.25);
}

.etiqueta-destacado::before, .etiqueta-nuevo::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    transform: rotate(45deg);
    flex-shrink: 0;
}

.card-producto-detalle:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: var(--azul-primario);
}

/* Cuando la tarjeta está marcada para comparar */
.card-producto-detalle--comparando {
    border-color: var(--azul-primario);
    box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.15);
}

/* --- Foto del producto: fondo neutro unificado (mismo criterio que las
   tarjetas de "Nuestros Productos" en la home) para que fotos de
   catálogo con fondos distintos no se vean como sesiones distintas.
   Menos alto y menos padding que antes: con fotos chicas dentro de un
   recuadro muy alto, sobraba demasiado gris y se sentía a medio hacer. --- */
.img-contenedor {
    height: 220px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f6f8fa;
    border-bottom: 1px solid #eef1f4;
}

.img-contenedor img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.info-producto {
    padding: 25px 25px 15px 25px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

.marca {
    color: var(--azul-primario);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.info-producto h2 {
    font-size: clamp(1.05rem, 1.6vw + 0.6rem, 1.3rem);
    margin: 0 0 15px;
    font-weight: 700;
    line-height: 1.25;
}

.info-producto h2 a {
    color: var(--texto-oscuro);
    text-decoration: none;
    /* Evita que "HTG-250D" se parta justo después del guion en tarjetas
       angostas — el modelo se mantiene entero o pasa completo a la
       siguiente línea, nunca a la mitad. */
    hyphens: none;
    overflow-wrap: normal;
    word-break: keep-all;
}

.info-producto h2 a:hover { color: var(--azul-primario); }

.specs-rapidas {
    margin: 0 0 14px;
    padding-top: 0;
}

.specs-rapidas li {
    font-size: 0.85rem;
    color: var(--texto-claro);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.specs-rapidas i {
    color: var(--azul-primario);
    width: 14px;
}

.card-resumen {
    font-size: 0.85rem;
    color: var(--texto-claro);
    line-height: 1.5;
    margin: 0;
}

.card-acciones {
    margin-top: auto;
    padding: 15px 25px 25px 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-acciones .enlace-detalles {
    display: block;
    color: var(--azul-primario);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s;
}

.card-acciones .enlace-detalles:hover {
    color: var(--texto-oscuro);
}

.card-acciones .enlace-detalles i {
    font-size: 0.8rem;
    margin-left: 5px;
}

.check-comparar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--texto-claro);
    cursor: pointer;
}

.check-comparar input {
    accent-color: var(--azul-primario);
    width: 16px;
    height: 16px;
}

.card-acciones .btn-cotizar-catalogo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #25D366;
    color: white;
    text-decoration: none;
    padding: 14px 10px;
    border-radius: 8px;
    font-weight: 700;
    font-size: clamp(0.85rem, 1vw + 0.6rem, 1.05rem);
    white-space: nowrap;
    transition: transform 0.3s, box-shadow 0.3s;
}

.card-acciones .btn-cotizar-catalogo:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
}

.card-acciones .btn-cotizar-catalogo i {
    margin-left: 8px;
    flex-shrink: 0;
}

.card-acciones .btn-cotizar-catalogo:focus-visible,
.card-acciones .enlace-detalles:focus-visible {
    outline: 2px solid var(--azul-primario);
    outline-offset: 3px;
}

/* ========================================== */
/* COMPARADOR DE EQUIPOS                       */
/* ========================================== */
.comparador-seccion {
    padding: 20px 0 70px;
    scroll-margin-top: 90px;
}

.comparador-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.comparador-header-icono {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: rgba(0, 86, 179, 0.1);
    color: var(--azul-primario);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.comparador-header h2 {
    font-size: 1.5rem;
    color: var(--texto-oscuro);
    margin-bottom: 4px;
}

.comparador-header p {
    color: var(--texto-claro);
    font-size: 0.9rem;
}

.comparador-vacio {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    color: var(--texto-claro);
}

.tabla-comparador-envoltorio {
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.tabla-comparador {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

.tabla-comparador th, .tabla-comparador td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top;
}

.tabla-comparador thead th {
    background-color: #f8fafc;
    vertical-align: bottom;
}

.tabla-comparador tbody th {
    background-color: #f8fafc;
    color: var(--texto-oscuro);
    font-weight: 600;
    width: 160px;
}

.tabla-comparador td { color: var(--texto-claro); }

.comparador-producto {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comparador-producto img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    background: #f6f8fa;
    border-radius: 8px;
    padding: 6px;
}

.comparador-producto span {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--texto-oscuro);
    line-height: 1.3;
}

.comparador-quitar {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--texto-claro);
    font-size: 0.75rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.comparador-quitar:hover { color: #ef4444; }

.punto-disponible {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #22c55e;
    margin-right: 6px;
}

.comparador-limpiar {
    margin-top: 18px;
    background: none;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 0.85rem;
    color: var(--texto-claro);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.comparador-limpiar:hover {
    border-color: var(--azul-primario);
    color: var(--azul-primario);
}

/* ========================================== */
/* CTA: ¿NO SABES QUÉ EQUIPO NECESITAS?        */
/* ========================================== */
.cta-asesoria {
    background-color: #0f2942;
    color: white;
    padding: 70px 0;
}

.cta-asesoria-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.cta-asesoria-icono {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.cta-asesoria-texto h2 {
    font-size: 1.9rem;
    margin-bottom: 14px;
}

.cta-asesoria-texto p {
    color: #cbd5e1;
    line-height: 1.7;
    max-width: 46ch;
    margin-bottom: 26px;
}

.cta-asesoria-foto {
    position: relative;
    aspect-ratio: 900 / 600;
    border-radius: 12px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.06);
}

.cta-asesoria-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cta-asesoria-foto-placeholder {
    display: none;
    position: absolute;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 30px;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    color: #cbd5e1;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.5;
}

.cta-asesoria-foto-placeholder i {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.5);
}

.cta-asesoria-foto--vacia .cta-asesoria-foto-placeholder { display: flex; }

@media (max-width: 900px) {
    .cta-asesoria-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .layout-catalogo { grid-template-columns: 1fr; }
    .sidebar-filtros { margin-bottom: 30px; }
}


/* ========================================== */
/* PÁGINA DE DETALLE DE MÁQUINA               */
/* ========================================== */

/* Migas de pan */
.breadcrumbs {
    padding: 20px 0;
    font-size: 0.9rem;
    color: var(--texto-claro);
}

.breadcrumbs a {
    color: var(--azul-primario);
    text-decoration: none;
}

.breadcrumbs i {
    font-size: 0.7rem;
    margin: 0 8px;
}

/* Presentación Principal (Foto + Info) */
.producto-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    padding: 20px 0 60px 0;
}

/* Galería */
/* ========================================== */
/* GALERÍA DE PÁGINA DE DETALLE (MÁS VERTICAL)*/
/* ========================================== */

.foto-principal {
    border: 1px solid #e2e8f0;
    border-radius: 12px; /* Bordes un poco más suaves */
    padding: 30px;
    height: 600px; /* ¡AQUÍ ESTÁ LA MAGIA! Aumentamos drásticamente la altura */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    margin-bottom: 15px;
}

.foto-principal img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15)); /* Sombra a la máquina para que "flote" */
    transition: transform 0.3s ease; /* Efecto suave si le agregamos zoom después */
}

/* Ajuste de las miniaturas para que combinen con el nuevo tamaño */
.miniaturas img {
    width: 90px;
    height: 90px;
    object-fit: contain; /* Cambiado a contain para que no se recorten las máquinas altas */
    padding: 10px;
    background-color: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.3s, transform 0.3s;
}

.miniaturas img.miniatura-activa, .miniaturas img:hover {
    border-color: var(--azul-primario);
    transform: translateY(-3px); /* Pequeño saltito al pasar el mouse */
}
/* Info Derecha — antes #1e293b, el mismo gris/slate genérico que ya
   corregimos en el banner del catálogo. Ahora es tu azul de marca. */
.marca-badge {
    display: inline-block;
    background-color: var(--azul-primario);
    color: white;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.producto-info-principal h1 {
    font-size: 2.2rem;
    color: var(--texto-oscuro);
    margin: 15px 0;
    line-height: 1.2;
}

.descripcion-corta {
    font-size: 1.1rem;
    color: var(--texto-claro);
    line-height: 1.6;
    margin-bottom: 25px;
}

.beneficios-rapidos {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
}

.beneficios-rapidos li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: var(--texto-oscuro);
    font-weight: 500;
    font-size: 0.95rem;
}

.beneficios-rapidos i {
    color: #25D366; /* Check verde */
    margin-right: 10px;
    flex-shrink: 0;
}

/* Caja de Cotización */
.caja-cotizacion {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 30px;
    border-radius: 8px;
}

.caja-cotizacion p {
    color: var(--texto-claro);
    margin-bottom: 15px;
    font-weight: 500;
}

.btn-cotizar-gigante {
    display: block;
    text-align: center;
    background-color: #25D366;
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 18px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s;
    margin-bottom: 15px;
}

.btn-cotizar-gigante:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
}

.nota-cotizacion {
    display: block;
    text-align: center;
    font-size: 0.85rem;
    color: var(--texto-claro);
}

/* Sección Características (Fondo Gris) */
.producto-caracteristicas {
    background-color: #f8fafc;
    padding: 60px 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.titulo-seccion-centrado {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 50px;
    color: var(--texto-oscuro);
}

.grid-caracteristicas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    text-align: center;
}

.feature-card i {
    font-size: 2.5rem;
    color: var(--azul-primario);
    margin-bottom: 20px;
}

.feature-card h3 {
    margin-bottom: 15px;
    color: var(--texto-oscuro);
}

.feature-card p {
    color: var(--texto-claro);
    line-height: 1.6;
}

/* Tabla Técnica */
.producto-ficha-tecnica {
    padding: 60px 0;
}

.producto-ficha-tecnica h2 {
    font-size: 2rem;
    color: var(--texto-oscuro);
    margin: 0;
}

/* "Especificaciones Técnicas" como acordeón nativo (<details>): sin JS
   propio, funciona con teclado y lector de pantalla solo con HTML. */
.ficha-tecnica-desplegable summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
    list-style: none; /* quita el triángulo nativo (Firefox) */
    margin-bottom: 30px;
}

.ficha-tecnica-desplegable summary::-webkit-details-marker {
    display: none; /* quita el triángulo nativo (Chrome/Safari) */
}

.ficha-tecnica-desplegable summary i {
    color: var(--azul-primario);
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.ficha-tecnica-desplegable[open] summary i {
    transform: rotate(180deg);
}

.ficha-tecnica-desplegable summary:hover h2 {
    color: var(--azul-primario);
}

.ficha-tecnica-desplegable summary:focus-visible {
    outline: 2px solid var(--azul-primario);
    outline-offset: 4px;
    border-radius: 4px;
}

.tabla-tecnica {
    width: 100%;
    border-collapse: collapse;
}

.tabla-tecnica th, .tabla-tecnica td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.tabla-tecnica th {
    background-color: #f8fafc;
    width: 30%;
    color: var(--texto-oscuro);
    font-weight: 600;
}

.tabla-tecnica td {
    color: var(--texto-claro);
}

/* Zebra sutil: ayuda a seguir la fila en fichas técnicas largas */
.tabla-tecnica tr:nth-child(even) td,
.tabla-tecnica tr:nth-child(even) th {
    background-color: #fbfcfd;
}

/* Volver al catálogo — para cuando alguien termina de leer la ficha
   técnica y no quiere desplazarse hasta el menú de arriba */
.enlace-volver-catalogo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    color: var(--azul-primario);
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.enlace-volver-catalogo:hover {
    gap: 12px;
}

/* --- "También te puede interesar" --- */
.productos-relacionados {
    padding: 20px 0 70px;
    border-top: 1px solid #e2e8f0;
    margin-top: 40px;
}

.productos-relacionados h2 {
    font-size: 1.6rem;
    color: var(--texto-oscuro);
    margin: 40px 0 30px;
}

.grid-relacionados {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

@media (max-width: 1100px) {
    .grid-relacionados { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .grid-relacionados { grid-template-columns: 1fr; }
}

.card-relacionado {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card-relacionado:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.07);
    border-color: var(--azul-primario);
}

.card-relacionado-img {
    height: 170px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f6f8fa;
    border-bottom: 1px solid #eef1f4;
}

.card-relacionado-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.card-relacionado-marca {
    display: block;
    padding: 16px 16px 0;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--azul-primario);
}

.card-relacionado h3 {
    padding: 4px 16px 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--texto-oscuro);
    line-height: 1.3;
}

.card-relacionado-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px 16px;
    margin-top: auto;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--texto-claro);
}

.card-relacionado:hover .card-relacionado-link {
    color: var(--azul-primario);
}

.card-relacionado-link i {
    font-size: 0.75rem;
}

/* Responsivo */
@media (max-width: 768px) {
    .producto-hero {
        grid-template-columns: 1fr; /* Una columna en celulares */
    }
    .tabla-tecnica th {
        width: 50%;
    }
}


/* ========================================== */
/* PÁGINA: NOSOTROS                           */
/* ========================================== */

.hero-nosotros {
    background-color: #f8fafc;
    padding: 80px 0;
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
}

.hero-nosotros h1 {
    font-size: 3rem;
    color: var(--texto-oscuro);
    margin-bottom: 15px;
}

.hero-nosotros .resaltado {
    color: var(--azul-primario);
}

.hero-nosotros p {
    font-size: 1.2rem;
    color: var(--texto-claro);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.quienes-somos {
    padding: 80px 0;
    background-color: white;
}

.grid-2-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.texto-historia h2 {
    font-size: 2.2rem;
    color: var(--texto-oscuro);
    margin-bottom: 25px;
}

.texto-historia p {
    font-size: 1.05rem;
    color: var(--texto-claro);
    line-height: 1.7;
    margin-bottom: 20px;
}

/* El espacio queda reservado con la proporción real (900x1000, ver
   nosotros.html) desde antes de que la foto cargue — así nunca colapsa
   a un ícono de "imagen rota" flotando en un hueco vacío. */
.imagen-historia {
    aspect-ratio: 900 / 1000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    background-color: #f1f5f9;
}

.imagen-historia img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Mientras no subas la foto (o si el archivo no existe): un recuadro de
   "sube tu foto aquí" en vez del ícono roto del navegador. El texto es
   HTML real (ver nosotros.html), no contenido generado por CSS. */
.imagen-historia-placeholder {
    display: none;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 30px;
    color: var(--texto-claro);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.5;
}

.imagen-historia-placeholder i {
    font-size: 2.5rem;
    color: #cbd5e1;
}

.imagen-historia--vacia {
    border: 2px dashed #cbd5e1;
    box-shadow: none;
}

.imagen-historia--vacia .imagen-historia-placeholder {
    display: flex;
}

/* Franja de marcas — reutiliza .marcas-contenido / .logos-marcas tal
   cual están definidas para la home; solo se agrega el padding/fondo
   propio de esta sección. */
.marcas-nosotros {
    background-color: #f8fafc;
    padding: 60px 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

/* Si el logo de una marca todavía no existe (ver el comentario en
   nosotros.html), este texto ocupa su lugar en vez de un ícono roto —
   mismo alto que los demás logos, para que la fila no salte. */
.logo-marca-texto {
    height: 70px;
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: 1px;
    color: var(--texto-claro);
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
}

.mision-vision {
    padding: 80px 0;
    background-color: #f8fafc;
}

.card-mv {
    background: white;
    padding: 50px 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s ease;
    height: 100%;
}

.card-mv:hover {
    transform: translateY(-8px);
}

.icono-mv {
    font-size: 3.5rem;
    color: var(--azul-primario);
    margin-bottom: 25px;
}

.card-mv h3 {
    font-size: 1.6rem;
    color: var(--texto-oscuro);
    margin-bottom: 15px;
}

.card-mv p {
    color: var(--texto-claro);
    line-height: 1.6;
    font-size: 1.05rem;
}

/* Ajuste para pantallas pequeñas (Celulares) */
@media (max-width: 768px) {
    .grid-2-columnas {
        grid-template-columns: 1fr; /* Pasa a una sola columna */
        gap: 40px;
    }
    
    .hero-nosotros h1 {
        font-size: 2.5rem;
    }
}


/* ========================================== */
/* ADAPTACIÓN PARA CELULARES (RESPONSIVE)     */
/* ========================================== */

@media (max-width: 768px) {
    /* 1. Arreglar el Menú Superior (Navbar): en celular se apila
          (logo arriba, enlaces debajo) en vez del grid de 3 columnas. */
    .navbar-content {
        display: flex;
        flex-direction: column;
        height: auto;
        padding: 15px 0;
    }

    /* El orden del HTML ya es logo → enlaces → botón, así que en columna
       se apilan en ese mismo orden sin necesidad de reordenar nada. */
    .enlaces {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 15px;
        padding: 0 10px;
    }

    .btn-nav {
        margin-top: 15px;
    }

    /* 2. Forzar que Categorías (arriba) y Máquinas (abajo) se apilen */
    .layout-catalogo {
        display: flex;
        flex-direction: column;
    }

    /* 3. Hacer que la barra de categorías ocupe el 100% del ancho de la pantalla */
    .sidebar-filtros {
        width: 100%;
        margin-bottom: 30px; /* Separación antes de que empiecen los productos */
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 20px;
    }

    /* 4. Forzar las tarjetas de productos a una sola columna limpia */
    .grilla-catalogo {
        display: grid;
        grid-template-columns: 1fr; /* 1 sola tarjeta por fila */
        gap: 20px;
        width: 100%;
    }
} /* ← cierre que faltaba: sin esto, todo lo de abajo (Herramientas y
     Distribuidor) quedaba atrapado dentro de este @media de celular y
     no se aplicaba en pantallas de escritorio. */


/* ========================================== */
/* PÁGINA: HERRAMIENTAS (PRÓXIMAMENTE)        */
/* ========================================== */

.seccion-proximamente {
    background-color: #f8fafc;
    min-height: 70vh; /* Ocupa buena parte de la pantalla */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.contenedor-proximamente {
    text-align: center;
    max-width: 700px;
    background-color: white;
    padding: 60px 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.icono-alerta {
    font-size: 4.5rem;
    color: var(--azul-primario);
    margin-bottom: 25px;
}

.contenedor-proximamente h1 {
    font-size: 2.2rem;
    color: var(--texto-oscuro);
    margin-bottom: 10px;
}

.contenedor-proximamente h2 {
    font-size: 1.4rem;
    color: #ef4444; /* Un rojo/naranja sutil para llamar la atención */
    font-weight: 600;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contenedor-proximamente p {
    font-size: 1.1rem;
    color: var(--texto-claro);
    line-height: 1.7;
    margin-bottom: 40px;
}

.acciones-proximamente {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap; /* Para que en celular los botones bajen */
}

/* Ajuste para celular */
@media (max-width: 768px) {
    .contenedor-proximamente {
        padding: 40px 20px;
    }
    .contenedor-proximamente h1 {
        font-size: 1.8rem;
    }
}

/* ========================================== */
/* PÁGINA: DISTRIBUIDOR (FORMULARIO)          */
/* ========================================== */

.seccion-distribuidor {
    background-color: #f8fafc;
    padding: 80px 0;
}

.grid-distribuidor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.texto-distribuidor h1 {
    font-size: 2.8rem;
    color: var(--texto-oscuro);
    margin-bottom: 20px;
    line-height: 1.2;
}

.texto-distribuidor .resaltado {
    color: var(--azul-primario);
}

.texto-distribuidor p {
    font-size: 1.15rem;
    color: var(--texto-claro);
    margin-bottom: 30px;
    line-height: 1.6;
}

.beneficios-lista {
    list-style: none;
    padding: 0;
}

.beneficios-lista li {
    font-size: 1.1rem;
    color: var(--texto-oscuro);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.beneficios-lista i {
    color: #10b981; /* Verde esmeralda para el check */
    font-size: 1.3rem;
}

/* --- Caja del Formulario --- */
.caja-formulario {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.caja-formulario h2 {
    font-size: 1.8rem;
    color: var(--texto-oscuro);
    margin-bottom: 10px;
}

.caja-formulario p {
    color: var(--texto-claro);
    margin-bottom: 25px;
}

.formulario-b2b .grupo-input {
    margin-bottom: 20px;
}

.formulario-b2b label {
    display: block;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.formulario-b2b input,
.formulario-b2b textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #f8fafc;
}

.formulario-b2b input:focus,
.formulario-b2b textarea:focus {
    outline: none;
    border-color: var(--azul-primario);
    background-color: white;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.grupo-input-doble {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.btn-form {
    width: 100%;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 16px;
}

.opcion-whatsapp {
    margin-top: 25px;
    text-align: center;
    border-top: 1px solid #e2e8f0;
    padding-top: 20px;
}

.opcion-whatsapp span {
    display: block;
    color: var(--texto-claro);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.opcion-whatsapp a {
    color: #25D366;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
}

/* Adaptación a Celular */
@media (max-width: 768px) {
    .grid-distribuidor {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: 40px;
    }
    
    .grupo-input-doble {
        grid-template-columns: 1fr; /* Inputs de a 1 en celular */
        gap: 0;
    }
    
    .caja-formulario {
        padding: 30px 20px;
    }
}

/* ========================================== */
/* IMÁGENES DEL CATÁLOGO (TAMAÑO COMPLETO)    */
/* ========================================== */

/* 1. Arreglamos el enlace <a> que envuelve la imagen */
.card-producto-detalle a {
    display: block !important; 
    position: relative;
}

/* 2. Forzamos al contenedor a tomar el tamaño de tu línea roja */
.card-producto-detalle .img-contenedor {
    width: 100% !important;
    height: 280px !important; /* Ajusta este número si lo quieres más alto */
    padding: 0 !important; /* Le quitamos cualquier relleno que la esté aplastando */
    margin: 15px 0 !important;
    background-color: transparent !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 3. Hacemos que la imagen se expanda al máximo */
.card-producto-detalle .img-contenedor img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
    mix-blend-mode: multiply; /* Oculta el fondo blanco del JPG si lo tiene */
}



/* =====================================================================
   AVISO OFICIAL INDECOPI — Libro de Reclamaciones
   Banner enlazable que aparece en el pie de todas las páginas.
   Para usar el PNG oficial en lugar del vector, basta con cambiar el
   src en footer.html: el tamaño lo controla esta regla.
   ===================================================================== */
.aviso-libro {
    display: inline-block;
    line-height: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.aviso-libro:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.aviso-libro img {
    display: block;
    width: 100%;
    max-width: 170px;
    height: auto;
}

.aviso-libro--grande img { max-width: 340px; }