/* ==========================================================================
   TUPLACABLANCA.COM - ESTILOS ESTILO "PORTAL CARROYA" (style.css)
   ========================================================================== */

/* --- 1. VARIABLES DE MARCA Y RESET --- */
:root {
    --azul-oxford: #003358;
    --azul-cyan: #009CDE;
    --blanco: #FFFFFF;
    --gris-fondo: #F4F7F9;
    --gris-borde: #EAEAEA;
    --texto-oscuro: #333333;
    --texto-claro: #666666;
    
    --fuente-titulos: 'Montserrat', sans-serif;
    --fuente-textos: 'Roboto', sans-serif;
    
    --sombra-suave: 0 4px 12px rgba(0,0,0,0.05);
    --sombra-fuerte: 0 8px 25px rgba(0,51,88,0.15);
    --radio-bordes: 10px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--fuente-textos); color: var(--texto-claro); background: var(--blanco); }
h1, h2, h3, h4 { font-family: var(--fuente-titulos); color: var(--texto-oscuro); font-weight: 700; }
a { text-decoration: none; transition: 0.3s; }

.container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 40px 0; }
.text-center { text-align: center; }

/* Botón Principal (Azul Cyan brillante) */
.btn-principal {
    background: var(--azul-cyan);
    color: var(--blanco) !important;
    padding: 14px 24px;
    border-radius: 8px;
    font-family: var(--fuente-titulos);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    display: block;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    width: 100%;
}
.btn-principal:hover { background: var(--azul-oxford); transform: translateY(-2px); }

/* --- 2. HEADER Y MENÚ --- */
.header-tpb {
    background: var(--blanco); box-shadow: var(--sombra-suave);
    position: sticky; top: 0; z-index: 1000;
    display: flex; justify-content: space-between; align-items: center; padding: 15px 5%;
}
.logo-tpb img { height: 50px; }
.nav-tpb ul.menu-tpb { list-style: none; display: flex; gap: 25px; }
.menu-tpb > li > a {
    color: var(--texto-claro); font-family: var(--fuente-titulos);
    font-size: 13px; font-weight: 700; padding: 10px 0; display: block;
}
.menu-tpb > li > a:hover { color: var(--azul-oxford); }

/* Submenú */
.dropdown { position: relative; }
.submenu-tpb {
    position: absolute; top: 100%; left: 0; background: var(--blanco);
    box-shadow: var(--sombra-fuerte); min-width: 220px;
    border-top: 3px solid var(--azul-cyan); border-radius: 0 0 8px 8px;
    opacity: 0; visibility: hidden; transform: translateY(10px); transition: 0.3s;
}
.dropdown:hover .submenu-tpb { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu-tpb li a { padding: 12px 20px; border-bottom: 1px solid var(--gris-borde); color: var(--texto-oscuro); font-weight: 600; }
.submenu-tpb li a:hover { background: var(--gris-fondo); color: var(--azul-cyan); padding-left: 25px; }
.btn-menu-movil { display: none; background: none; border: none; font-size: 28px; color: var(--azul-oxford); }

/* --- 3. BANNER PROMOCIONAL (Como el de CashBack en la foto) --- */
.banner-top {
    width: 90%; max-width: 1200px; margin: 20px auto; border-radius: var(--radio-bordes);
    overflow: hidden; box-shadow: var(--sombra-suave);
}
.banner-top img { width: 100%; height: auto; display: block; }

/* --- 4. LA SECCIÓN DIVIDIDA (COMPRAR VS VENDER - ESTILO CARROYA) --- */
.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px auto 40px;
    width: 90%; max-width: 1200px;
}

.caja-accion {
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-bordes);
    padding: 30px;
    box-shadow: var(--sombra-suave);
}

.caja-accion h2 { 
    font-size: 22px; 
    margin-bottom: 25px; 
    color: var(--texto-oscuro);
    border-bottom: 2px solid var(--gris-fondo);
    padding-bottom: 10px;
}
.caja-accion h2 span { color: var(--azul-cyan); } /* Para resaltar palabras como en la foto */

/* 4A. Buscador (Izquierda) */
.grid-buscador {
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;
}
.campo-busqueda label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 5px; color: var(--texto-claro); }
.campo-busqueda select {
    width: 100%; padding: 12px; border: 1px solid var(--gris-borde);
    border-radius: 6px; font-family: var(--fuente-textos); outline: none; background: #fff;
}
.campo-busqueda select:focus { border-color: var(--azul-oxford); }

/* 4B. Vender (Derecha - Las dos mini tarjetas) */
.vender-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.mini-card-vender {
    border: 1px solid var(--gris-borde); border-radius: 8px; overflow: hidden; text-align: center; padding-bottom: 15px;
}
.mini-card-vender img { width: 100%; height: 100px; object-fit: cover; }
.mini-card-vender h4 { font-size: 14px; margin: 10px; color: var(--azul-oxford); }
.mini-card-vender a { display: inline-block; background: var(--azul-oxford); color: var(--blanco); padding: 6px 15px; border-radius: 4px; font-size: 12px; font-weight: bold; }

/* --- 5. TARJETAS DE INVENTARIO (Catálogo) --- */
.grid-inventario { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 20px; }
.card-vehiculo {
    border: 1px solid var(--gris-borde); border-radius: 8px; overflow: hidden;
    transition: 0.3s; position: relative; background: var(--blanco);
}
.card-vehiculo:hover { box-shadow: var(--sombra-fuerte); transform: translateY(-3px); }
.badge-0km {
    position: absolute; top: 10px; left: 10px; background: var(--azul-cyan);
    color: var(--blanco); padding: 4px 10px; font-size: 11px; font-weight: 800; border-radius: 4px;
}
.card-vehiculo img { width: 100%; height: 180px; object-fit: cover; }
.card-info { padding: 15px; }
.card-info h3 { font-size: 16px; margin-bottom: 5px; }
.card-info p { font-size: 13px; color: var(--texto-claro); margin-bottom: 10px; }
.card-info .precio { font-size: 20px; color: var(--azul-oxford); font-weight: 800; font-family: var(--fuente-titulos); }

/* --- 6. SECCIÓN FINANCIACIÓN (Abajo, las 3 tarjetas de la foto) --- */
.seccion-financiacion { background: var(--gris-fondo); padding: 50px 0; margin-top: 40px; }
.grid-finanzas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 30px; }
.card-finanza {
    background: var(--blanco); border: 1px solid var(--gris-borde); padding: 25px;
    border-radius: 8px; display: flex; gap: 15px; align-items: flex-start;
}
.card-finanza img { width: 50px; height: 50px; }
.card-finanza h4 { font-size: 16px; margin-bottom: 8px; color: var(--azul-oxford); }
.card-finanza p { font-size: 13px; }

/* --- 7. DISEÑO MÓVIL (Celulares) --- */
@media (max-width: 900px) {
    .split-section { grid-template-columns: 1fr; gap: 30px; }
    .btn-menu-movil { display: block; }
    .header-acciones a { display: none; }
    .nav-tpb {
        position: absolute; top: 100%; left: 0; width: 100%; background: var(--blanco);
        display: none; flex-direction: column; padding: 20px; box-shadow: var(--sombra-suave);
    }
    .nav-tpb.activo { display: flex; }
    .nav-tpb ul.menu-tpb { flex-direction: column; gap: 0; }
    .menu-tpb > li > a { border-bottom: 1px solid var(--gris-borde); padding: 15px 0; }
    .submenu-tpb { position: static; box-shadow: none; border-top: none; display: none; margin-left: 10px; }
    .dropdown.abierto .submenu-tpb { display: block; }
    .grid-buscador { grid-template-columns: 1fr; }
}

/* --- 8. FOOTER --- */
.footer-tpb {
    background: var(--azul-oxford);
    color: var(--blanco);
    padding: 60px 0 20px;
    margin-top: 50px;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 30px;
}
.footer-tpb h4 { color: var(--blanco); margin-bottom: 20px; font-size: 18px; }
.footer-tpb p { font-size: 14px; color: #A0B2C0; margin-bottom: 12px; }
.footer-tpb a { color: #A0B2C0; transition: 0.3s; }
.footer-tpb a:hover { color: var(--azul-cyan); }
.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    font-size: 13px;
    color: #A0B2C0;
}

/* --- BOTÓN WHATSAPP FLOTANTE --- */
.whatsapp-flotante {
    position: fixed; bottom: 25px; right: 25px; width: 60px; height: 60px;
    background-color: #25d366; border-radius: 50px; display: flex;
    align-items: center; justify-content: center; box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
    z-index: 1000; transition: 0.3s;
}
.whatsapp-flotante:hover { transform: scale(1.1); background-color: #1ebe57; }
@media (max-width: 768px) {
    .whatsapp-flotante { width: 50px; height: 50px; bottom: 15px; right: 15px; }
    .whatsapp-flotante svg { width: 30px !important; height: 30px !important; }
}