/* ═══════════════════════════════════════════════════════════════════════════
   LEDHCAR — ajustes sobre la plantilla
   Se carga DESPUÉS de styles.css. La plantilla no se toca: si algún día quiere
   volver al diseño original, basta con quitar este archivo del _cabeza.php.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --ledhcar-naranja: #E8622A;   /* el naranja del logo */
    --ledhcar-oscuro:  #333333;
    --wa-verde:        #25D366;   /* el verde propio de WhatsApp */
}

/* ── Colores de marca ────────────────────────────────────────────────────
   La plantilla traía el verde y el naranja de la demo inmobiliaria. Se
   reasignan con un criterio: naranja = acción de LEDHCAR, verde = WhatsApp.
   Así el color le dice al visitante a dónde lo lleva cada botón.            */
.boton-amarillo { background-color: var(--ledhcar-naranja); }
.boton-amarillo:hover { background-color: #ff7a3d; }
.boton-verde    { background-color: var(--wa-verde); }
.boton-verde:hover { background-color: #1fb757; }
.boton { border-radius: 6px; transition: background-color .18s; }

/* ── Menú ────────────────────────────────────────────────────────────────
   Cinco enlaces no caben en un celular, así que en pantallas angostas el menú
   se pliega detrás del botón de hamburguesa.                                */
.menu-boton {
    display: block; margin-left: auto;
    width: 4.4rem; height: 4.4rem; padding: .8rem;
    background: none; border: 0; cursor: pointer;
}
.menu-boton span {
    display: block; height: 3px; margin: 5px 0;
    background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s;
}
.menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.navegacion { display: none; }
.navegacion.abierto { display: flex; flex-direction: column; width: 100%; }
.navegacion a.activo { color: var(--ledhcar-naranja); }
.navegacion a.enlace-wa { color: var(--wa-verde); font-weight: 700; }

@media (min-width: 768px) {
    .menu-boton { display: none; }
    .navegacion { display: flex; flex-direction: row; }
}

/* La barra debe poder envolver para que el menú desplegado caiga debajo. */
.barra { flex-wrap: wrap; }

/* ── Tarjetas de producto ────────────────────────────────────────────────
   Las fotos de producto llegan en proporciones distintas (unas cuadradas del
   proveedor, otras del celular). Se recortan a un cuadrado para que la rejilla
   no quede con tarjetas de alturas dispares.                                */
.anuncio__foto {
    display: block; position: relative;
    aspect-ratio: 1; background: #f0f0f0;
    overflow: hidden;
}
.anuncio__foto img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 1rem; }

.sin-foto {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: #9a9a9a; font-size: 1.5rem;
}

.sello {
    position: absolute; top: 1rem; left: 1rem;
    background: var(--ledhcar-naranja); color: #fff;
    font-size: 1.2rem; font-weight: 700; letter-spacing: .05em;
    padding: .4rem .9rem; border-radius: 4px;
}
.sello--video { left: auto; right: 1rem; background: rgba(0,0,0,.72); }
/* Premium: abajo de la foto, en negro y dorado, para que no compita con el
   sello naranja de LEDHCAR ni con el de video. */
/* Promoción: abajo a la derecha, en rojo, para que se note sin tapar la foto. */
.sello--promo { top: auto; bottom: 1rem; left: auto; right: 1rem; background: #c1121f; font-size: 1.3rem; font-weight: 800;
                max-width: 55%; white-space: normal;   /* deja sitio al sello premium, abajo a la izquierda */ text-align: right; line-height: 1.25; }
.precio__antes { color: #999; font-weight: 400; font-size: .8em; margin-right: .5rem; }
.sello--premium {
    top: auto; bottom: 1rem; left: 1rem;
    background: linear-gradient(135deg, #1d1d1d, #3a3a3a); color: #f5d98b;
    border: 1px solid #f5d98b; text-transform: uppercase; letter-spacing: .06em;
}

.anuncio__cat {
    text-transform: uppercase; letter-spacing: .08em;
    font-size: 1.3rem !important; color: #8b8b90 !important; margin: 0 !important;
}
/* «Promoción válida para H7»: en una familia, la rebaja es de UNA referencia y
   la tarjeta representa a todas; sin esto el cliente cree que todo el K1 bajó. */
.anuncio__promo-ref {
    display: inline-block; align-self: flex-start;
    margin: .8rem 0 0 !important; padding: .3rem 1rem;
    background: #fdecec; color: #c1121f; border: 1px solid #f5c2c7; border-radius: 999px;
    font-size: 1.3rem !important; font-weight: 600; line-height: 1.4;
}
.anuncio__promo-ref strong { font-weight: 800; }
.precio__desde {
    display: inline-block; font-size: 1.4rem;
    color: #8b8b90; font-weight: 400;
}

/* Las tarjetas de la misma fila quedan de igual alto y el botón al fondo. */
.anuncio { display: flex; flex-direction: column; }
.contenido-anuncio { display: flex; flex-direction: column; flex: 1; }
.contenido-anuncio .boton { margin-top: auto; }

.aviso-vacio { font-size: 1.8rem; color: #666; line-height: 1.8; }

/* ── Video ───────────────────────────────────────────────────────────── */
.video-caja { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-caja iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Pie ─────────────────────────────────────────────────────────────── */
/* Ya no repite NIT ni teléfono: esos datos van en la factura y aquí solo
   recargaban el cierre de la página. Queda el menú y el aviso legal centrado. */
.contenedor-footer { display: block; }
.contenedor-footer .navegacion { justify-content: center; }
.copyright {
    font-size: 1.3rem; text-align: center;
    width: 100%; max-width: 70rem;
    margin: 2rem auto 0; line-height: 1.8;
}

/* ── Pedido flotante ─────────────────────────────────────────────────── */
.flotante {
    position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 60;
    display: flex; flex-direction: column; gap: 1rem; align-items: flex-end;
}
.fab {
    width: 5.6rem; height: 5.6rem; border-radius: 50%;
    display: grid; place-items: center;
    border: 0; cursor: pointer; font-size: 2.4rem;
    box-shadow: 0 4px 18px rgba(0,0,0,.35);
    transition: transform .15s; text-decoration: none;
}
.fab:active { transform: scale(.93); }
.fab-wa { background: var(--wa-verde); color: #fff; }
.fab-pedido { background: var(--ledhcar-naranja); color: #fff; position: relative; }
.contador {
    position: absolute; top: -.3rem; right: -.3rem;
    min-width: 2.2rem; height: 2.2rem; padding: 0 .5rem;
    background: #fff; color: #333;
    border-radius: 100px; font-size: 1.2rem; font-weight: 700;
    display: grid; place-items: center;
}

/* ── Panel del pedido ────────────────────────────────────────────────── */
.panel {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(0,0,0,.6);
    display: none; align-items: flex-end; justify-content: center;
}
.panel.abierto { display: flex; }
.panel-caja {
    background: #fff; width: min(56rem, 100%);
    border-radius: 12px 12px 0 0;
    max-height: 86vh; display: flex; flex-direction: column;
    animation: subir .22s ease-out;
}
@keyframes subir { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (min-width: 620px) {
    .panel { align-items: center; }
    .panel-caja { border-radius: 12px; }
}

.panel-cab { padding: 1.6rem 2rem; border-bottom: 1px solid #e5e5e5; display: flex; align-items: center; }
.panel-cab h3 { margin: 0; font-size: 2rem; }
.panel-cerrar { margin-left: auto; background: none; border: 0; font-size: 3rem; line-height: 1; cursor: pointer; color: #888; }
.panel-cuerpo { overflow-y: auto; padding: .5rem 2rem; flex: 1; }
.panel-pie { padding: 1.6rem 2rem; border-top: 1px solid #e5e5e5; }
.panel-pie .boton { margin-top: 0; width: 100%; }
.panel-nota { font-size: 1.3rem; color: #777; text-align: center; margin-top: 1rem; }

.linea { display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem 0; border-bottom: 1px solid #eee; }
.linea-nom { flex: 1; font-size: 1.5rem; }
.linea-nom small { display: block; color: #888; }
.cant { display: flex; align-items: center; gap: .6rem; }
.cant button {
    width: 3.2rem; height: 3.2rem; border-radius: 6px;
    background: #eee; border: 0; font-size: 1.8rem; cursor: pointer;
}
.cant span { min-width: 2.6rem; text-align: center; font-weight: 700; }

.total-fila { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.2rem; font-size: 1.6rem; }
.total-fila b { font-size: 2.4rem; color: var(--ledhcar-naranja); }
.vacio { text-align: center; color: #888; padding: 3rem 1rem; font-size: 1.5rem; }

/* Quien prefiere menos movimiento, no lo tiene. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Buscador y filtros del catálogo ─────────────────────────────────── */
.buscador { display: flex; gap: 1rem; max-width: 60rem; margin: 0 auto 2rem; }
.buscador input {
    flex: 1; padding: 1.2rem 1.8rem; font-size: 1.6rem;
    border: 1px solid #ddd; border-radius: 6px; font-family: inherit;
}
.buscador input:focus { outline: 2px solid var(--ledhcar-naranja); outline-offset: 1px; }
.buscador .boton { margin-top: 0; padding: 1.2rem 2.4rem; font-size: 1.6rem; }

.filtros { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; margin-bottom: 3rem; }
.chip {
    padding: .8rem 1.8rem; border-radius: 100px;
    background: #f0f0f0; color: #555; text-decoration: none;
    font-size: 1.4rem; transition: background .15s, color .15s;
    /* Sirve igual como <a> o como <button> (el filtro de la web usa botones). */
    border: 0; cursor: pointer; font-family: inherit; line-height: 1.4;
}
.chip:hover, .chip.activo { background: var(--ledhcar-naranja); color: #fff; }
.chip__n { opacity: .6; font-size: 1.2rem; }

/* ── Ficha de producto ───────────────────────────────────────────────── */
.ficha { display: grid; gap: 3rem; margin-bottom: 4rem; }
@media (min-width: 768px) { .ficha { grid-template-columns: 1fr 1fr; align-items: start; } }
.ficha__foto { border-radius: 8px; }
.ficha__datos h1 { font-size: 3rem; line-height: 1.2; margin: .5rem 0 1.5rem; }
.precio--grande { font-size: 3.4rem !important; }
.ficha__lista { list-style: none; padding: 0; margin: 2rem 0; }
.ficha__lista li { padding: .6rem 0; border-bottom: 1px solid #eee; font-size: 1.5rem; color: #555; }
.ficha__botones { display: flex; gap: 1rem; flex-wrap: wrap; }
.ficha__botones .boton { margin-top: 1rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   MENÚ SUPERIOR
   Antes eran enlaces sueltos que se perdían sobre la foto de la portada. Ahora
   van dentro de una píldora translúcida: se leen sobre cualquier fondo y se ve
   claro dónde termina el menú.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .navegacion {
        background: rgba(0, 0, 0, .38);
        /* Desenfoca lo que queda detrás para que el texto no compita con la foto. */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 100px;
        padding: .6rem .8rem;
        gap: .3rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
    }
    .navegacion a {
        margin: 0;
        padding: .9rem 1.8rem;
        border-radius: 100px;
        font-size: 1.6rem;
        transition: background-color .2s, color .2s, transform .2s;
    }
    .navegacion a:hover {
        background: rgba(255, 255, 255, .14);
        transform: translateY(-1px);
    }
    .navegacion a.activo {
        background: var(--ledhcar-naranja);
        color: #fff;
    }
    /* «Escríbenos» es la acción, no un enlace más: va en verde WhatsApp sólido. */
    .navegacion a.enlace-wa {
        background: var(--wa-verde);
        color: #fff;
        font-weight: 700;
    }
    .navegacion a.enlace-wa:hover { background: #1fb757; }
}

/* En celular la píldora se convierte en un panel desplegable. */
@media (max-width: 767px) {
    .navegacion.abierto {
        background: rgba(0, 0, 0, .82);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 16px;
        padding: 1rem;
        margin-top: 1rem;
        gap: .3rem;
    }
    .navegacion.abierto a {
        margin: 0; padding: 1.4rem 1.8rem;
        border-radius: 10px; text-align: center; font-size: 1.7rem;
    }
    .navegacion.abierto a.activo   { background: var(--ledhcar-naranja); color: #fff; }
    .navegacion.abierto a.enlace-wa{ background: var(--wa-verde); color: #fff; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PASARELA DE DESTACADOS
   Es una fila con desplazamiento y anclaje (scroll-snap), no un carrusel con
   librería: en celular se recorre con el dedo como cualquier app, y en
   escritorio con las flechas. Sin JavaScript sigue funcionando el arrastre.
   ═══════════════════════════════════════════════════════════════════════════ */
.pasarela { position: relative; margin-bottom: 1rem; }

.pasarela__pista {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 1rem .5rem 2rem;
    /* Oculta la barra de desplazamiento sin impedir el gesto. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.pasarela__pista::-webkit-scrollbar { display: none; }

.pasarela__item {
    flex: 0 0 82%;
    scroll-snap-align: center;
}
@media (min-width: 600px)  { .pasarela__item { flex-basis: 46%; } }
@media (min-width: 992px)  { .pasarela__item { flex-basis: 31%; } }
@media (min-width: 1200px) { .pasarela__item { flex-basis: 23.5%; } }

.pasarela__item .anuncio { height: 100%; }

.pasarela__flecha {
    position: absolute; top: 40%; z-index: 5;
    width: 4.8rem; height: 4.8rem; border-radius: 50%;
    background: #fff; border: 1px solid #e0e0e0;
    font-size: 3rem; line-height: 1; color: var(--ledhcar-naranja);
    cursor: pointer; display: none; place-items: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    transition: transform .15s, background .15s;
}
.pasarela__flecha:hover { background: var(--ledhcar-naranja); color: #fff; transform: scale(1.06); }
.pasarela__flecha--izq { left: -2.2rem; }
.pasarela__flecha--der { right: -2.2rem; }
/* Las flechas aparecen desde tablet hacia arriba; en celular estorban y se
   usa el dedo (swipe) más el avance automático. */
@media (min-width: 768px) { .pasarela__flecha { display: grid; } }

.pasarela__puntos { display: flex; justify-content: center; gap: .8rem; }
.pasarela__punto {
    width: 1rem; height: 1rem; padding: 0;
    border: 0; border-radius: 50%; background: #ccc;
    cursor: pointer; transition: background .2s, width .2s;
}
.pasarela__punto.activo { background: var(--ledhcar-naranja); width: 2.6rem; border-radius: 100px; }

/* ═══════════════════════════════════════════════════════════════════════════
   AVISO DE NOVEDADES
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-nuevos {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(0,0,0,.7);
    display: none; align-items: center; justify-content: center;
    padding: 2rem 1.5rem;
}
.modal-nuevos.abierto { display: flex; }
.modal-nuevos__caja {
    background: #fff; border-radius: 14px;
    width: min(52rem, 100%); max-height: 88vh;
    display: flex; flex-direction: column;
    animation: aparecer .25s ease-out;
    overflow: hidden;
}
@keyframes aparecer {
    from { opacity: 0; transform: translateY(2rem) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.modal-nuevos__cab {
    display: flex; align-items: center;
    padding: 1.8rem 2rem;
    background: var(--ledhcar-naranja); color: #fff;
}
.modal-nuevos__cab h3 { margin: 0; font-size: 2.2rem; }
.modal-nuevos__cerrar {
    margin-left: auto; background: none; border: 0;
    color: #fff; font-size: 3.2rem; line-height: 1; cursor: pointer; opacity: .85;
}
.modal-nuevos__cerrar:hover { opacity: 1; }

.modal-nuevos__cuerpo { overflow-y: auto; padding: 1rem 2rem; }
.modal-nuevos__pie { padding: 1.6rem 2rem; border-top: 1px solid #eee; }
.modal-nuevos__pie .boton { margin-top: 0; width: 100%; }

.nuevo-item {
    display: flex; gap: 1.5rem; align-items: center;
    padding: 1.4rem 0; border-bottom: 1px solid #eee;
    text-decoration: none; color: inherit;
}
.nuevo-item:last-child { border-bottom: 0; }
.nuevo-item:hover .nuevo-item__datos h4 { color: var(--ledhcar-naranja); }

.nuevo-item__foto {
    position: relative; flex: 0 0 8rem; height: 8rem;
    background: #f4f4f4; border-radius: 8px; overflow: hidden;
}
.nuevo-item__foto img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; }
.nuevo-item__foto .sin-foto { font-size: 1.1rem; }

.nuevo-item__datos h4 { margin: 0 0 .3rem; font-size: 1.7rem; line-height: 1.3; transition: color .15s; }
.nuevo-item__precio { display: block; margin-top: .4rem; font-size: 1.9rem; font-weight: 700; color: var(--ledhcar-naranja); }

/* Las fotos de instalaciones son ambientes, no productos recortados: aquí sí
   conviene que llenen el marco aunque se recorte algo del borde. */
.anuncio__foto--llena img { object-fit: cover; padding: 0; }

/* ── Ficha técnica del producto ──────────────────────────────────────────── */
.ficha__tecnica { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 1.45rem; }
.ficha__tecnica th, .ficha__tecnica td { padding: .9rem 1rem; text-align: left; border-bottom: 1px solid #eee; }
.ficha__tecnica th {
    width: 45%; color: #555; font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em; font-size: 1.25rem; vertical-align: top;
}
.ficha__tecnica td { color: #111; }

/* Cuando los precios están ocultos. */
.precio--consultar { color: var(--ledhcar-naranja); font-weight: 700; }

/* ── Acceso al sistema (discreto) ────────────────────────────────────────
   Un candado pequeño al final del menú, para el personal. No compite con los
   enlaces del cliente: va en gris translúcido, no en color de acción.        */
.enlace-admin {
    display: inline-flex; align-items: center; gap: .4rem;
    color: rgba(255, 255, 255, .75) !important;
    font-size: 1.3rem; opacity: .85;
}
.enlace-admin:hover { opacity: 1; color: #fff !important; }
@media (min-width: 768px) {
    .navegacion a.enlace-admin {
        background: rgba(255, 255, 255, .10);
        border: 1px solid rgba(255, 255, 255, .18);
    }
    .navegacion a.enlace-admin:hover { background: rgba(255, 255, 255, .2); }
    .enlace-admin__txt { display: none; }   /* en escritorio basta el candado */
}

/* ── Galería de la ficha de producto ─────────────────────────────────────
   Foto grande arriba y una fila de miniaturas debajo; al tocar una, cambia la
   grande (el intercambio lo hace un script mínimo en producto.php).          */
.miniaturas {
    display: flex; gap: .8rem; margin-top: 1rem; flex-wrap: wrap;
}
.miniatura {
    width: 7rem; height: 7rem; padding: .3rem;
    border: 2px solid #e2e2e2; border-radius: 8px; background: #fff;
    cursor: pointer; transition: border-color .15s, transform .15s;
    overflow: hidden;
}
.miniatura img { width: 100%; height: 100%; object-fit: contain; display: block; }
.miniatura:hover { transform: translateY(-2px); }
.miniatura.activa { border-color: var(--ledhcar-naranja); }

/* ── Slider de la portada ────────────────────────────────────────────────
   Varias fotos que se funden una sobre otra. Van en capas apiladas: todas
   ocupan el mismo sitio y solo la activa queda visible.                       */
.portada-slider { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.portada-slider__foto {
    position: absolute; inset: 0;
    background-position: center center; background-size: cover;
    opacity: 0; transition: opacity 1.2s ease-in-out;
}
.portada-slider__foto.activa { opacity: 1; }
/* El contenido (menú y titular) va por encima de las fotos. */
.site-header.inicio.con-slider { background-image: none; }
.site-header.inicio.con-slider .contenido-header { position: relative; z-index: 1; }
/* Un velo oscuro para que el texto blanco se lea sobre cualquier foto. */
.site-header.inicio.con-slider::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: rgba(0, 0, 0, .35); pointer-events: none;
}

/* La portada encaja en la pantalla. La plantilla la dejaba en 130vh, más alta
   que la ventana, y eso creaba el hueco oscuro de abajo. 100svh usa la altura
   REAL visible en el celular (descuenta la barra del navegador); 100vh es el
   respaldo donde svh no exista. */
.site-header.inicio {
    position: relative;   /* ancla la portada (slider y velo, con inset:0) a ESTE header;
                             sin esto se anclaban al body y dejaban una franja gris abajo. */
    height: 100vh;
    height: 100svh;
    min-height: 46rem;
}


/* ── Asesor de bombillos ──────────────────────────────────────────────────
   El mismo chat sirve empotrado en asesor.php y dentro del panel flotante del
   resto del sitio. Lo único que cambia entre los dos es de dónde saca la
   altura: en la página la fija .asesor, y en el panel la manda el panel.     */
.asesor {
    display: flex; flex-direction: column;
    max-width: 68rem; margin: 3rem auto 0;
    height: 52rem; max-height: 70vh;
    border: 1px solid #e2e2e2; border-radius: 12px; background: #fff;
    overflow: hidden;
}
.asesor__hilo {
    flex: 1; overflow-y: auto; padding: 2rem;
    display: flex; flex-direction: column; gap: 1.2rem;
}

/* Las burbujas. white-space: pre-line respeta los saltos de línea que trae la
   respuesta (la lista de bombillos viene con uno por renglón) sin tener que
   convertir el texto en HTML, que es justo lo que no se debe hacer con algo
   redactado a partir de lo que escribió un visitante. */
.asesor__msg {
    max-width: 85%; padding: 1.1rem 1.5rem; border-radius: 14px;
    font-size: 1.5rem; line-height: 1.5; white-space: pre-line;
    overflow-wrap: anywhere;   /* un código largo no debe ensanchar el chat */
}
.asesor__msg--asesor  { background: #f2f2f2; color: var(--ledhcar-oscuro); align-self: flex-start; }
.asesor__msg--cliente { background: var(--ledhcar-naranja); color: #fff; align-self: flex-end; }
.asesor__msg--esperando { opacity: .6; font-style: italic; }

/* Las referencias que le sirven. */
.asesor__refs { display: flex; flex-direction: column; gap: .6rem; align-self: stretch; }
.asesor__ref {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 1.1rem 1.5rem; border: 1px solid #e2e2e2; border-radius: 10px;
    text-decoration: none; color: var(--ledhcar-oscuro); font-size: 1.4rem;
    transition: border-color .15s, transform .15s;
}
.asesor__ref:hover { border-color: var(--ledhcar-naranja); transform: translateY(-1px); }
.asesor__ref-nom { flex: 1; }
.asesor__ref-pre { font-weight: 700; color: var(--ledhcar-naranja); white-space: nowrap; }

.asesor__wa {
    align-self: stretch; text-align: center; text-decoration: none;
    background: var(--wa-verde); color: #fff; font-weight: 700; font-size: 1.5rem;
    padding: 1.2rem; border-radius: 6px; transition: background-color .18s;
}
.asesor__wa:hover { background: #1fb757; }

/* Los botones de qué luz busca. Van entre el hilo y la caja de escribir, fijos:
   el cliente los necesita en cualquier momento, no solo justo después del
   mensaje que los ofreció (que se pierde hacia arriba al seguir conversando).
   Se envuelven en varias filas en vez de hacer scroll horizontal, que en el
   celular esconde la mitad de las opciones sin avisar. */
.asesor__luces {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    padding: 1rem 1.2rem 0; border-top: 1px solid #f0f0f0;
}
.asesor__luces-tit { font-size: 1.3rem; color: #888; margin-right: .3rem; }
.asesor__luz { font-size: 1.3rem; padding: .5rem 1.1rem; }

/* La caja de escribir. */
.asesor__forma { display: flex; gap: .8rem; padding: 1.2rem; border-top: 1px solid #e5e5e5; }
.asesor__campo {
    flex: 1; padding: 1.2rem 1.5rem; font-size: 1.5rem; font-family: inherit;
    border: 1px solid #d5d5d5; border-radius: 6px; min-width: 0;
}
.asesor__campo:focus { outline: 2px solid var(--ledhcar-naranja); outline-offset: -1px; }
.asesor__enviar {
    padding: 0 2.4rem; font-size: 1.5rem; font-weight: 700; font-family: inherit;
    background: var(--ledhcar-naranja); color: #fff; border: 0; border-radius: 6px;
    cursor: pointer; transition: background-color .18s;
}
.asesor__enviar:hover:not(:disabled) { background: #ff7a3d; }
.asesor__enviar:disabled { opacity: .5; cursor: default; }

/* Textos de la página del asesor. */
.asesor__intro { font-size: 1.6rem; color: #666; max-width: 60rem; margin: 0 auto; }
.asesor__pie   { font-size: 1.5rem; margin-top: 2.5rem; }
.asesor__nota  { font-size: 1.3rem; color: #888; max-width: 60rem; margin: 1rem auto 0; }

/* El botón flotante y su panel. */
.fab-asesor { background: var(--ledhcar-oscuro); color: #fff; border: 0; cursor: pointer; }
.asesor-panel .panel-caja { height: 88vh; }
/* El panel ya trae su propio scroll; aquí lo lleva el hilo del chat, o el
   contenido se desplazaría en dos sitios a la vez. */
.asesor-panel .panel-cuerpo {
    display: flex; flex-direction: column; overflow: hidden; padding: 0;
}
.asesor-panel .asesor {
    border: 0; border-radius: 0; margin: 0; height: auto; max-height: none; flex: 1;
}

@media (max-width: 600px) {
    .asesor { height: auto; max-height: none; min-height: 44rem; }
    .asesor__msg { max-width: 92%; }
    .asesor__enviar { padding: 0 1.6rem; }

    /* En el celular el rango de precio es casi tan largo como la tarjeta, y
       puesto al lado le robaba el ancho al nombre del producto: «C10 - H4 -NEW»
       se partía en dos renglones y el precio pesaba más que la referencia. En
       columna, el nombre manda y el precio va debajo. */
    .asesor__ref { flex-direction: column; align-items: flex-start; gap: .3rem; }
    .asesor__ref-pre { white-space: normal; }
}

/* ── Franja superior: contacto y redes ──────────────────────────────────────
   Va discreta a propósito (el dueño pidió que no se viera recargada): íconos
   pequeños, un solo texto (el teléfono) y el puntaje real de Google. */
.barra-sup { background: #111; color: #ddd; font-size: 1.25rem; }
.barra-sup__caja { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; flex-wrap: wrap; }
.barra-sup a { color: #ddd; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; }
.barra-sup a:hover { color: var(--ledhcar-naranja); }
.barra-sup__google { font-size: 1.2rem; }
.barra-sup__estrella { color: #ffc107; font-size: 1.5rem; line-height: 1; }
.barra-sup__google strong { color: #fff; }
.barra-sup__op { color: #9a9a9a; }
/* «Garantía de por vida»: en texto, con el dorado del sello premium. */
.barra-sup__gar { color: #f5d98b; font-weight: 700; letter-spacing: .03em; }
.barra-sup__der { display: flex; align-items: center; gap: 1.4rem; }
.barra-sup__tel span { letter-spacing: .3px; }
@media (max-width: 520px) {
    /* En el celular sobra el texto «opiniones en Google»: queda el 4.9 ★.
       La garantía también se va: con tres cosas la franja se parte en dos
       líneas y el dueño pidió que no se viera empachada. */
    .barra-sup__op, .barra-sup__gar { display: none; }
    .barra-sup__caja { justify-content: center; gap: 1.2rem; }
}

/* ── Barra de confianza ─────────────────────────────────────────────────── */
.confianza { background: #f7f7f7; border-bottom: 1px solid #ececec; }
.confianza__caja {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 2rem; padding: 3.2rem 0;   /* más alta: el dueño la quiso más visible */
}
.confianza__item { display: flex; align-items: center; gap: 1.6rem; }
.confianza__ico { font-size: 5rem; line-height: 1; flex-shrink: 0; }
.confianza__txt { display: flex; flex-direction: column; line-height: 1.25; }
.confianza__txt strong { font-size: 2.3rem; color: #222; font-weight: 800; }
.confianza__txt small { font-size: 1.7rem; color: #666; margin-top: .3rem; }
@media (max-width: 900px) { .confianza__caja { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
    .confianza__caja { grid-template-columns: 1fr; gap: 1.4rem; padding: 2.4rem 0; }
    .confianza__txt small { display: none; }   /* en el celular basta el titular */
}

/* ══════════════ Consulta de la compra (el QR de la factura) ══════════════ */
.compra-caja{max-width:720px;margin:0 auto;background:#fff;border:1px solid #e6e6e6;
  border-radius:10px;padding:28px 26px;box-shadow:0 2px 14px rgba(0,0,0,.06)}
.compra-encabezado{margin:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#888}
.compra-caja h2{margin:.2rem 0 .6rem}
.compra-cliente{margin:0 0 1.2rem;font-size:15px}
.compra-tenue{color:#888;font-size:14px}
.compra-aviso{background:#fff8e6;border-left:4px solid #e8a33d;padding:12px 14px;
  border-radius:4px;font-size:14px;margin:1rem 0}
.compra-aviso-rojo{background:#fdecec;border-left-color:#d33}
.compra-garantia{display:flex;flex-direction:column;gap:4px;padding:14px 16px;
  border-radius:8px;margin:1rem 0;font-size:15px}
.compra-garantia strong{font-size:17px}
.compra-garantia-ok{background:#eaf7ec;border:1px solid #bfe3c6;color:#1d6b2c}
.compra-garantia-vencida{background:#f4f4f4;border:1px solid #ddd;color:#555}
.compra-tabla{width:100%;border-collapse:collapse;margin:1.4rem 0 .6rem;font-size:15px}
.compra-tabla th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:#888;border-bottom:2px solid #eee;padding:6px 4px}
.compra-tabla td{padding:9px 4px;border-bottom:1px solid #f0f0f0;vertical-align:top}
.compra-tabla .col-cant{text-align:center;width:70px}
.compra-tabla .col-valor{text-align:right;width:120px;white-space:nowrap}
.compra-tabla tfoot td{border-bottom:none;color:#666}
.compra-tabla .compra-total td{font-weight:700;font-size:18px;color:#222;
  border-top:2px solid #eee;padding-top:12px}
.compra-privacidad{background:#f7f7f7;border-radius:8px;padding:16px 18px;margin:1.6rem 0 1rem;font-size:14px}
.compra-privacidad strong{display:block;margin-bottom:.5rem}
.compra-privacidad p{margin:0 0 .6rem;color:#555;line-height:1.55}
.compra-privacidad p:last-child{margin-bottom:0}
.compra-acciones{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* .boton trae un margen superior grande pensado para la portada. */
.compra-acciones .boton{margin-top:0;font-size:1.6rem;padding:1rem 2.4rem}
.boton-secundario{display:inline-block;padding:1rem 2.4rem;font-size:1.6rem;border-radius:6px;border:1px solid #ccc;
  color:#444;text-decoration:none;font-weight:700}
.boton-secundario:hover{background:#f2f2f2}
@media (max-width:600px){
  .compra-caja{padding:20px 16px}
  .compra-tabla{font-size:14px}
  .compra-acciones .boton,.compra-acciones .boton-secundario{flex:1 1 100%;text-align:center}
}
/* ── Aparición al bajar por la página ────────────────────────────────────
   Los bloques entran subiendo y apareciendo, una sola vez. El estado
   invisible vive bajo `html.anim`, y esa clase SOLO la pone el navegador
   cuando hay JavaScript y quien mira no pidió menos movimiento: si algo
   falla, la página se ve entera como siempre. `body.inicio-anim` la limita
   a la portada, para no pelear con los filtros del catálogo, que muestran y
   esconden tarjetas por su cuenta. */
html.anim .inicio-anim .confianza__item,
html.anim .inicio-anim .cats-titulo,
html.anim .inicio-anim .icono,
html.anim .inicio-anim .cat-card,
html.anim .inicio-anim .ubic-panel,
html.anim .inicio-anim .buscaveh__caja,
html.anim .inicio-anim .resenas__titulo,
html.anim .inicio-anim .resena,
html.anim .inicio-anim .masvendido__caja
{
    opacity: 0;
    transform: translateY(20px);
}
/* La transición se declara en el estado final: así el bloque aparece con
   suavidad pero nada se anima «hacia atrás». */
html.anim .inicio-anim .visible {
    opacity: 1;
    transform: none;
    transition: opacity .55s ease-out, transform .55s ease-out;
}

/* Realce de la tarjeta de producto al pasar el mouse. Las de categoría ya lo
   tenían (_cats_tarjetas.php); estas no, y quedaban muertas al lado. */
.anuncio {
    transition: transform .18s ease, box-shadow .18s ease;
}
.anuncio:hover, .anuncio:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .13);
}
.anuncio__foto img { transition: transform .35s ease; }
.anuncio:hover .anuncio__foto img { transform: scale(1.04); }
/* En pantalla táctil no hay «pasar por encima»: el realce se apaga para que
   el dedo no lo deje pegado. */
@media (hover: none) {
    .anuncio:hover, .anuncio:focus-within { transform: none; box-shadow: none; }
    .anuncio:hover .anuncio__foto img { transform: none; }
}