/* ---------- Colores del sitio ----------
   Cada tema define los mismos colores; el que se usa lo decide el atributo data-tema
   de <html>, que pone includes/encabezado.php. El menú, el pie, el carrusel y el visor
   de fotos son siempre oscuros y no dependen del tema. */

/* B · Claro: fondo gris muy claro, texto negro y tarjetas blancas */
:root{
    --fondo: #f1f1f1;
    --texto: #111;
    --texto-suave: #555;
    --panel: #ffffff;
    --panel-borde: #cfcfcf;
    --panel-hover: #ededed;
    --linea: #e3e3e3;
    --subrayado: #111;
    --marco-foto: #e4e4e4;
    --inverso-fondo: #111;
    --inverso-texto: #ffffff;
    --resplandor: rgba(0, 0, 0, 0.28);
    --resplandor-suave: rgba(0, 0, 0, 0.14);
    --icono-boton: invert(1);
}
/* A · Carbón: fondo casi negro, texto blanco y tarjetas apenas más claras */
html[data-tema="a"]{
    --fondo: #242424;
    --texto: #ffffff;
    --texto-suave: #c8c8c8;
    --panel: #343434;
    --panel-borde: #535353;
    --panel-hover: #414141;
    --linea: #474747;
    --subrayado: #c0c0c0;
    --marco-foto: #2c2c2c;
    --inverso-fondo: #ffffff;
    --inverso-texto: #000;
    --resplandor: rgba(255, 255, 255, 0.5);
    --resplandor-suave: rgba(255, 255, 255, 0.22);
    --icono-boton: none;
}
/* C · Grafito: gris oscuro con un tinte azulado */
html[data-tema="c"]{
    --fondo: #2b2f36;
    --texto: #ffffff;
    --texto-suave: #c9ced6;
    --panel: #3a3f48;
    --panel-borde: #5b616c;
    --panel-hover: #454b55;
    --linea: #4d535d;
    --subrayado: #c0c6cf;
    --marco-foto: #32363d;
    --inverso-fondo: #ffffff;
    --inverso-texto: #000;
    --resplandor: rgba(255, 255, 255, 0.5);
    --resplandor-suave: rgba(255, 255, 255, 0.22);
    --icono-boton: none;
}
/* Coral pastel: fondo coral muy suave, texto oscuro y tarjetas blancas */
html[data-tema="coral"]{
    --fondo: #f6d3ca;
    --texto: #1a1a1a;
    --texto-suave: #55504e;
    --panel: #ffffff;
    --panel-borde: #e6c2b8;
    --panel-hover: #fbeeea;
    --linea: #efe0db;
    --subrayado: #1a1a1a;
    --marco-foto: #f6f2f0;
    --inverso-fondo: #1a1a1a;
    --inverso-texto: #ffffff;
    --resplandor: rgba(0, 0, 0, 0.26);
    --resplandor-suave: rgba(0, 0, 0, 0.13);
    --icono-boton: invert(1);
}
/* Crema: el mismo fondo claro de MaqPower (#fff6d9), con texto negro y tarjetas blancas */
html[data-tema="crema"]{
    --fondo: #fff6d9;
    --texto: #111;
    --texto-suave: #55504a;
    --panel: #ffffff;
    --panel-borde: #e2d6b3;
    --panel-hover: #fbf3dc;
    --linea: #eee7d3;
    --subrayado: #111;
    --marco-foto: #f7f3e6;
    --inverso-fondo: #111;
    --inverso-texto: #ffffff;
    --resplandor: rgba(0, 0, 0, 0.26);
    --resplandor-suave: rgba(0, 0, 0, 0.13);
    --icono-boton: invert(1);
}
/* Amarillo: el mismo amarillo fuerte de MaqPower, con texto negro y tarjetas blancas */
html[data-tema="amarillo"]{
    --fondo: #fbbc05;
    --texto: #111;
    --texto-suave: #3d3d3d;
    --panel: #ffffff;
    --panel-borde: #d9a200;
    --panel-hover: #fff3cc;
    --linea: #ece6d2;
    --subrayado: #111;
    --marco-foto: #f6f2e6;
    --inverso-fondo: #111;
    --inverso-texto: #ffffff;
    --resplandor: rgba(0, 0, 0, 0.3);
    --resplandor-suave: rgba(0, 0, 0, 0.15);
    --icono-boton: invert(1);
}
/* Gris medio: el que estaba antes */
html[data-tema="gris"]{
    --fondo: #6b6b6b;
    --texto: #ffffff;
    --texto-suave: #d2d2d2;
    --panel: #333333;
    --panel-borde: #8a8a8a;
    --panel-hover: #444;
    --linea: #555;
    --subrayado: #c0c0c0;
    --marco-foto: #333333;
    --inverso-fondo: #ffffff;
    --inverso-texto: #000;
    --resplandor: rgba(255, 255, 255, 0.5);
    --resplandor-suave: rgba(255, 255, 255, 0.22);
    --icono-boton: none;
}

/* Selector universal */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img{
    width: 100%;
}
body{
    font-family: Archivo, Arial, Helvetica, sans-serif;
    color: var(--texto);
    /* fondo general en gris, no negro */
    background-color: var(--fondo);
    /* columna de alto completo para que el pie quede siempre abajo */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* Títulos y menú en Archivo, en negrita; el resto del texto usa la misma letra en peso normal */
h1, h2, h3, ul.menu li a{
    font-family: Archivo, Arial, Helvetica, sans-serif;
    font-weight: 800;
    letter-spacing: 0;
}

/* Encabezado: logo a la izquierda y menú centrado, fijo al bajar la página */
header.encabezado{
    display: grid;
    grid-template-columns: 1fr 60% 1fr;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: black;
    border-bottom: 1px solid #8a8a8a;
}
figure.logo{
    width: 200px;
    padding: 8px 12px;
}
figure.logo img{
    display: block;
}
ul.menu{
    display: flex;
    list-style-type: none;
    justify-content: space-around;
}
ul.menu li a{
    color: white;
    text-decoration: none;
    padding: 6px 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 20px;
    transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
/* al pasar el cursor se enciende: fondo blanco con un resplandor alrededor */
ul.menu li a:hover{
    background-color: white;
    color: black;
    /* borde gris fino, a modo de marco, + resplandor blanco */
    box-shadow: 0 0 0 3px #3d3d3d, 0 0 6px 3px rgba(255, 255, 255, 0.6), 0 0 18px 7px rgba(255, 255, 255, 0.25);
}
/* la página en la que estás queda marcada con una línea plateada debajo */
ul.menu li a.actual{
    border-radius: 0;
    box-shadow: 0 3px 0 #c0c0c0;
}
ul.menu li a.actual:hover{
    background-color: transparent;
    color: white;
    box-shadow: 0 3px 0 #c0c0c0;
}

main{
    flex: 1;
}
/* Carrusel de la portada: las fotos van una encima de la otra y se ve solo la activa */
section.carrusel{
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 80vh;
    min-height: 300px;
    width: 100%;
    background-color: #111;
    overflow: hidden;
}
/* cada diapositiva es una foto con su leyenda */
div.diapositiva{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s;
}
div.diapositiva.activa{
    opacity: 1;
}
div.diapositiva img{
    display: block;
    height: 100%;
    object-fit: cover;
}
/* Leyenda sobre las fotos; oscurece un poco la imagen para que se lea */
div.leyenda{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 90px 40px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    pointer-events: none;
}
/* botón de cada leyenda: solo se puede tocar el de la foto que se está viendo */
div.diapositiva{
    pointer-events: none;
}
a.botonleyenda{
    margin-top: 8px;
    padding: 10px 28px;
    font-size: 18px;
    font-weight: 700;
    color: black;
    background-color: white;
    text-decoration: none;
    border-radius: 24px;
    transition: box-shadow 0.25s;
}
div.diapositiva.activa a.botonleyenda{
    pointer-events: auto;
}
a.botonleyenda:hover{
    box-shadow: 0 0 6px 3px rgba(255, 255, 255, 0.5), 0 0 18px 7px rgba(255, 255, 255, 0.22);
}
div.leyenda h2{
    font-size: 50px;
    margin-bottom: 12px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
div.leyenda p{
    max-width: 820px;
    font-size: 18px;
    line-height: 1.55;
    margin-bottom: 10px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
button.flecha{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border: 1px solid #555;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.55);
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.25s, color 0.25s;
}
button.flecha:hover{
    background-color: white;
    color: black;
}
button.anterior{
    left: 20px;
}
button.siguiente{
    right: 20px;
}
div.puntos{
    position: absolute;
    bottom: 14px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
}
div.puntos button{
    width: 11px;
    height: 11px;
    border: none;
    border-radius: 50%;
    background-color: #999;
    cursor: pointer;
}
div.puntos button.activo{
    background-color: white;
}

/* Título de las páginas interiores, con una línea debajo */
section.pagina{
    max-width: 1100px;
    margin: 50px auto;
    padding: 0 20px;
}
section.pagina h1{
    font-size: 38px;
    padding-bottom: 8px;
    border-bottom: 4px solid var(--subrayado);
    display: inline-block;
}

/* Buscador: desplegable de marcas y casillero para escribir, arriba de la grilla */
form.buscador{
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
form.buscador select,
form.buscador input{
    font-family: inherit;
    font-size: 17px;
    color: var(--texto);
    background-color: var(--panel);
    border: 1px solid var(--panel-borde);
    border-radius: 20px;
    padding: 8px 16px;
}
form.buscador select{
    cursor: pointer;
}
form.buscador input{
    flex: 1;
    min-width: 220px;
    max-width: 420px;
}
/* "Ordenar por" va al final de la fila, a la derecha */
form.buscador select#orden{
    margin-left: auto;
}
form.buscador input::placeholder{
    color: var(--texto-suave);
}
form.buscador select:focus,
form.buscador input:focus{
    outline: none;
    border-color: var(--texto);
    box-shadow: 0 0 6px 1px var(--resplandor);
}
p.sinresultados{
    margin-top: 25px;
    font-size: 18px;
}

/* Inicio: "Últimos ingresos", cuatro autos en una fila debajo del carrusel */
section.ultimos > h2{
    font-size: 32px;
    padding-bottom: 8px;
    border-bottom: 4px solid var(--subrayado);
    display: inline-block;
}
section.ultimos div.vehiculos{
    grid-template-columns: repeat(4, 1fr);
}
p.vertodos{
    margin-top: 28px;
    text-align: center;
}
p.vertodos a.volver{
    margin-top: 0;
    font-size: 17px;
    padding: 8px 22px;
}

/* Inicio: franja para el que quiere vender su auto, debajo de los últimos ingresos */
section.vendetuauto{
    /* mismo ancho que la fila de autos de arriba */
    box-sizing: border-box;
    max-width: 1060px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px 30px;
    padding: 26px 30px;
    background-color: var(--panel);
    border: 1px solid var(--panel-borde);
    border-radius: 12px;
}
section.vendetuauto h2{
    font-size: 28px;
}
section.vendetuauto p{
    margin-top: 6px;
    font-size: 18px;
    color: var(--texto-suave);
}
section.vendetuauto a.consultar{
    margin-top: 0;
    padding: 12px 26px;
    font-size: 18px;
}

/* Vehículos: grilla de tarjetas, una por auto, con la foto de portada y el nombre */
div.vehiculos{
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 22px;
}
article.vehiculo{
    background-color: var(--panel);
    border: 1px solid var(--panel-borde);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
article.vehiculo:hover{
    transform: translateY(-4px);
    box-shadow: 0 0 6px 1px var(--resplandor), 0 0 18px 5px var(--resplandor-suave);
}
/* franja "Reservado" o "Vendido" sobre la foto, en el cartel y en la ficha */
article.vehiculo div.portada{
    position: relative;
}
span.estado{
    position: absolute;
    top: 14px;
    left: 0;
    padding: 5px 16px 4px;
    font-family: Archivo, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--inverso-texto);
    background-color: var(--inverso-fondo);
    border-radius: 0 6px 6px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
article.vehiculo[hidden]{
    display: none;
}
/* las fotos del stock son cuadradas: el cartel también, para que el auto se vea entero */
article.vehiculo img{
    display: block;
    aspect-ratio: 1;
    object-fit: cover;
}
article.vehiculo a{
    display: block;
    color: var(--texto);
    text-decoration: none;
}
article.vehiculo h2{
    font-size: 19px;
    padding: 10px 14px 2px;
}
/* versión y año, debajo de la marca y el modelo */
article.vehiculo p{
    padding: 0 14px;
    font-size: 15px;
    color: var(--texto-suave);
}
/* precio de contado, destacado al pie del cartel */
article.vehiculo p.precio{
    margin-top: 8px;
    font-size: 21px;
    font-weight: 700;
    color: var(--texto);
}
article.vehiculo a{
    padding-bottom: 12px;
}

/* Ficha de un auto: foto grande con flechas y, debajo, las miniaturas */
a.volver{
    display: inline-block;
    margin-top: 14px;
    color: var(--texto);
    text-decoration: none;
    font-size: 15px;
    padding: 5px 14px;
    border: 1px solid var(--texto-suave);
    border-radius: 20px;
    transition: background-color 0.25s, color 0.25s;
}
a.volver:hover{
    background-color: var(--inverso-fondo);
    color: var(--inverso-texto);
}
/* la ficha arranca más cerca del menú */
section.ficha{
    margin-top: 16px;
}
section.ficha h1{
    display: block;
    width: fit-content;
}
/* la galería a la izquierda y el recuadro de especificaciones a la derecha */
div.fichacuerpo{
    margin-top: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 25px;
    align-items: start;
}
aside.especificaciones{
    padding: 18px 22px 20px;
    background-color: var(--panel);
    border: 1px solid var(--panel-borde);
    border-radius: 8px;
}
aside.especificaciones h2{
    font-size: 21px;
    padding-bottom: 6px;
    margin-bottom: 10px;
    border-bottom: 3px solid var(--subrayado);
}
aside.especificaciones dl div{
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--linea);
}
aside.especificaciones dl div:last-child{
    border-bottom: none;
}
aside.especificaciones dt{
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--texto-suave);
}
/* ícono de cada dato */
aside.especificaciones dt svg{
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--texto);
}
aside.especificaciones dd{
    font-weight: 700;
    text-align: right;
}
/* solo los precios (valor y valor con permuta) van un poco más grandes */
aside.especificaciones dd.valor{
    font-size: 20px;
}
aside.especificaciones p{
    font-size: 16px;
    line-height: 1.5;
}
/* desplegable "Especificaciones adicionales", debajo de los datos principales */
details.adicionales{
    margin-top: 14px;
    border: 1px solid var(--panel-borde);
    border-radius: 8px;
    overflow: hidden;
}
details.adicionales summary{
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.2s;
}
details.adicionales summary::-webkit-details-marker{
    display: none;
}
/* flechita que gira al abrir */
details.adicionales summary::after{
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--texto);
    border-bottom: 2px solid var(--texto);
    transform: rotate(45deg);
    margin-top: -4px;
    transition: transform 0.2s;
}
details.adicionales[open] summary::after{
    transform: rotate(-135deg);
    margin-top: 4px;
}
details.adicionales summary:hover{
    background-color: var(--panel-hover);
}
details.adicionales ul{
    list-style: none;
    padding: 2px 14px 8px;
    border-top: 1px solid var(--linea);
}
details.adicionales li{
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 7px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--linea);
}
details.adicionales li:last-child{
    border-bottom: none;
}
details.adicionales li{
    align-items: center;
}
details.adicionales li span{
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--texto-suave);
}
details.adicionales li svg{
    width: 19px;
    height: 19px;
    flex: none;
    color: var(--texto);
}
details.adicionales li strong{
    text-align: right;
}
details.adicionales p{
    padding: 10px 14px 12px;
    font-size: 15px;
    border-top: 1px solid var(--linea);
}

/* botón de consulta por WhatsApp, al pie del recuadro */
a.consultar{
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    background-color: var(--inverso-fondo);
    color: var(--inverso-texto);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border-radius: 24px;
    transition: box-shadow 0.25s;
}
a.consultar img{
    width: 22px;
    filter: var(--icono-boton);
}
/* segundo botón de la ficha: mismo tamaño, pero solo con borde */
a.consultar.financiar{
    margin-top: 10px;
    background-color: transparent;
    color: var(--texto);
    border: 1px solid var(--texto-suave);
}
a.consultar:hover{
    box-shadow: 0 0 6px 3px var(--resplandor), 0 0 18px 7px var(--resplandor-suave);
}
aside.especificaciones p.nota{
    margin-top: 8px;
    font-size: 14px;
    color: var(--texto-suave);
}
figure.fotogrande{
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    background-color: var(--marco-foto);
    border: 1px solid var(--panel-borde);
    border-radius: 8px;
    overflow: hidden;
}
figure.fotogrande img{
    display: block;
    max-height: 72vh;
    object-fit: contain;
    cursor: zoom-in;
}
/* Visor: la foto a pantalla completa sobre un fondo casi negro */
div.visor{
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.94);
}
div.visor[hidden]{
    display: none;
}
div.visor img{
    width: auto;
    max-width: 96vw;
    max-height: 92vh;
}
div.visor button.cerrar{
    position: absolute;
    top: 14px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: 1px solid #777;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.25s, color 0.25s;
}
div.visor button.cerrar:hover{
    background-color: white;
    color: black;
}
div.visor p{
    color: white;
    position: absolute;
    bottom: 14px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 15px;
}
figure.fotogrande figcaption{
    position: absolute;
    right: 12px;
    bottom: 10px;
    font-size: 14px;
    padding: 3px 12px;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
}
div.miniaturas{
    max-width: 760px;
    margin: 14px auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
}
div.miniaturas img{
    display: block;
    aspect-ratio: 1;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: 6px;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s, border-color 0.2s;
}
div.miniaturas img:hover,
div.miniaturas img.activa{
    opacity: 1;
    border-color: var(--texto);
}

/* Nosotros: la foto del local como franja a todo el ancho */
figure.fotonosotros img{
    display: block;
    aspect-ratio: 1920 / 850;
    object-fit: cover;
    object-position: center 12%;
}
section.nosotros{
    position: relative;
    padding: 28px 20px 50px;
    overflow: hidden;
}
/* Marca de agua: el logo grande y muy tenue, detrás del texto, hacia la derecha */
section.nosotros::before{
    content: "";
    position: absolute;
    right: 3%;
    top: 42%;
    transform: translateY(-50%);
    width: min(620px, 55%);
    aspect-ratio: 824 / 226;
    background: url("../img/logo-horizontal.png") center / contain no-repeat;
    opacity: 0.09;
    pointer-events: none;
}
/* el texto y las tarjetas van por encima de la marca de agua */
article.textonosotros,
div.agencias{
    position: relative;
}
article.textonosotros{
    max-width: 900px;
    margin: 0 auto;
}
article.textonosotros h1{
    font-size: 38px;
    padding-bottom: 6px;
    margin-bottom: 22px;
    border-bottom: 4px solid var(--subrayado);
    display: inline-block;
}
article.textonosotros p{
    font-size: 18px;
    line-height: 1.65;
    margin-bottom: 16px;
    color: var(--texto);
}

/* Marca de agua en las páginas que definen $marcaDeAgua = true: el logo grande y muy
   tenue arriba a la derecha, a la altura del título y por detrás del contenido */
main.marcadeagua{
    position: relative;
    z-index: 0;
}
main.marcadeagua::before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 14px;
    right: max(3%, calc((100% - 1100px) / 2 + 20px));
    width: min(400px, 48%);
    aspect-ratio: 824 / 226;
    background: url("../img/logo-horizontal.png") center / contain no-repeat;
    opacity: 0.09;
    pointer-events: none;
}

/* Financiación: el texto a la izquierda y los flyers de los bancos a la derecha */
section.financiacion div.columnas{
    display: grid;
    grid-template-columns: 1fr 370px;
    gap: 40px;
    align-items: start;
}
aside.flyers{
    margin-top: 34px;
    display: grid;
    gap: 18px;
}
aside.flyers img{
    display: block;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--panel-borde);
    transition: box-shadow 0.25s;
}
aside.flyers a:hover img{
    box-shadow: 0 0 6px 2px var(--resplandor-suave);
}
/* Financiación: texto y botón de consulta */
article.textofinanciacion{
    max-width: 760px;
    font-size: 18px;
    line-height: 1.55;
}
article.textofinanciacion p{
    margin-top: 16px;
}
/* entidades: recuadros blancos iguales, con cada logo centrado adentro */
article.textofinanciacion ul.logos{
    margin-top: 12px;
    padding-left: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}
article.textofinanciacion ul.logos li{
    margin-top: 0;
    height: 62px;
    padding: 8px 10px;
    background-color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
article.textofinanciacion ul.logos img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
article.textofinanciacion p.bajada{
    margin-top: 4px;
    font-size: 20px;
    font-weight: 600;
    color: var(--texto-suave);
}
article.textofinanciacion h3{
    margin-top: 26px;
    font-size: 20px;
}
article.textofinanciacion ul{
    margin-top: 10px;
    padding-left: 22px;
}
article.textofinanciacion li{
    margin-top: 8px;
}
section.financiacion h2{
    margin-top: 34px;
    font-size: 24px;
}
section.financiacion a.consultar{
    margin-top: 20px;
    display: inline-flex;
    padding: 12px 28px;
    font-size: 18px;
}

/* Contacto: frase de entrada y los botones de WhatsApp, arriba de las sucursales */
section.contacto p.entrada{
    margin-top: 25px;
    font-size: 19px;
}
div.whatsapps{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
div.whatsapps a.consultar{
    padding: 10px 26px;
    font-size: 18px;
}

/* Contacto: horarios de atención, entre los WhatsApp y las sucursales */
div.horarios{
    margin-top: 28px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
div.horarios svg{
    width: 26px;
    height: 26px;
    margin-top: 2px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
div.horarios h2{
    font-size: 21px;
    margin-bottom: 4px;
}
div.horarios p{
    font-size: 18px;
    line-height: 1.5;
}

/* en Contacto las sucursales ocupan todo el ancho, alineadas con el título */
section.contacto div.agencias{
    max-width: none;
}

/* Las dos agencias, debajo del texto de Nosotros */
div.agencias{
    position: relative;
    max-width: 900px;
    margin: 30px auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
article.agencia{
    padding: 20px 24px;
    background-color: var(--panel);
    border: 1px solid var(--panel-borde);
    border-radius: 8px;
}
article.agencia h2{
    font-size: 22px;
    margin-bottom: 4px;
}
article.agencia p{
    font-size: 18px;
    margin-bottom: 12px;
}
/* dentro de la tarjeta: los datos a la izquierda y el mapa a la derecha, sin agrandarla */
article.agencia{
    display: flex;
    gap: 16px;
    align-items: stretch;
    overflow: hidden;
}
article.agencia div.datos{
    flex: 1;
    min-width: 0;
}
article.agencia iframe.mapa{
    width: 46%;
    min-height: 100px;
    margin: -20px -24px -20px 0;
    border: 0;
    border-left: 1px solid var(--panel-borde);
}
article.agencia a{
    display: inline-block;
    color: var(--texto);
    text-decoration: none;
    font-size: 15px;
    padding: 6px 16px;
    border: 1px solid var(--texto-suave);
    border-radius: 20px;
    transition: background-color 0.25s, color 0.25s;
}
article.agencia a:hover{
    background-color: var(--inverso-fondo);
    color: var(--inverso-texto);
}

footer{
    color: white;
    background-color: black;
    border-top: 1px solid #8a8a8a;
    text-align: center;
    padding: 14px 20px;
    font-size: 15px;
}
footer p.credito{
    margin-top: 4px;
    font-size: 13px;
    color: #999;
}
/* datos de las sucursales y de contacto, arriba del copyright */
div.piedatos{
    display: flex;
    justify-content: center;
    gap: 70px;
    flex-wrap: wrap;
    text-align: left;
    padding: 10px 0 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid #333;
}
div.piedatos h3{
    font-size: 16px;
    margin-bottom: 8px;
}
div.piedatos p{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 15px;
}
div.piedatos svg{
    width: 19px;
    height: 19px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* el pin de ubicación en rojo y el WhatsApp en su verde */
div.piedatos svg.ubicacion{
    stroke: #ea4335;
}
div.piedatos svg.whatsapp{
    stroke: #25d366;
}
/* redes: el usuario y, al lado, un ícono por cada red */
div.piedatos p.redes{
    gap: 10px;
}
div.piedatos p.redes span{
    min-width: 150px;
    color: #d8d8d8;
}
div.piedatos p.redes a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: box-shadow 0.25s;
}
/* logos oficiales de cada red, rellenos y con su color */
div.piedatos p.redes svg{
    width: 18px;
    height: 18px;
    stroke: none;
    fill: white;
}
div.piedatos p.redes a.instagram{
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
/* el logo de Facebook ya es un círculo: azul sobre fondo blanco */
div.piedatos p.redes a.facebook{
    background-color: white;
}
div.piedatos p.redes a.facebook svg{
    width: 32px;
    height: 32px;
    fill: #1877f2;
}
div.piedatos p.redes a.tiktok{
    background-color: #000;
    box-shadow: 0 0 0 1px #444;
}
div.piedatos p.redes a:hover{
    box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.6);
}
div.piedatos a{
    color: #d8d8d8;
    text-decoration: none;
    transition: color 0.2s;
}
div.piedatos a:hover{
    color: white;
    text-decoration: underline;
}

/* Botón flotante de WhatsApp, fijo abajo a la derecha en todas las páginas */
a.whatsappflotante{
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 20;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #25d366;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.25s;
}
a.whatsappflotante img{
    width: 30px;
    /* el ícono es oscuro: se pasa a blanco */
    filter: brightness(0) invert(1);
}
a.whatsappflotante:hover{
    box-shadow: 0 0 6px 3px rgba(37, 211, 102, 0.6), 0 0 18px 7px rgba(37, 211, 102, 0.3);
}

/* ---------- Celulares y pantallas angostas ---------- */
/* Tablet y celular: en Financiación los flyers pasan abajo del texto, uno al lado del otro */
@media (max-width: 950px){
    section.financiacion div.columnas{
        grid-template-columns: 1fr;
        gap: 0;
    }
    aside.flyers{
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}

@media (max-width: 700px){
    header.encabezado{
        grid-template-columns: 1fr;
        justify-items: center;
    }
    figure.logo{
        width: 170px;
        padding: 8px 8px 4px;
    }
    nav.navegacion{
        width: 100%;
        padding-bottom: 8px;
    }
    ul.menu li a{
        font-size: 13px;
        padding: 3px 5px;
        letter-spacing: 0;
    }
    /* en celular el carrusel es más alto, para que entre todo el texto */
    section.carrusel{
        aspect-ratio: auto;
        max-height: none;
        height: 520px;
    }
    div.leyenda{
        padding: 20px 20px 40px;
    }
    section.nosotros{
        padding: 25px 18px 35px;
    }
    section.nosotros::before{
        right: 5%;
        top: 30%;
        width: 90%;
    }
    main.marcadeagua::before{
        top: 10px;
        right: 4%;
        width: 62%;
    }
    article.textonosotros h1{
        font-size: 30px;
    }
    div.leyenda h2{
        font-size: 28px;
    }
    div.leyenda p{
        font-size: 15px;
    }
    /* en el carrusel las flechas bajan al pie de la foto, para no pisar la leyenda */
    section.carrusel button.flecha{
        top: auto;
        bottom: 8px;
        transform: none;
    }
    button.flecha{
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    button.anterior{
        left: 10px;
    }
    button.siguiente{
        right: 10px;
    }
    /* títulos de página y márgenes más chicos */
    section.pagina{
        margin: 28px auto;
        padding: 0 14px;
    }
    section.pagina h1{
        font-size: 30px;
    }
    section.ultimos > h2{
        font-size: 26px;
    }
    section.vendetuauto{
        margin-left: 14px;
        margin-right: 14px;
        padding: 20px 18px;
    }
    section.vendetuauto h2{
        font-size: 23px;
    }
    section.vendetuauto a.consultar{
        width: 100%;
    }
    article.textofinanciacion ul.logos{
        grid-template-columns: repeat(3, 1fr);
    }
    /* Vehículos: dos autos por fila y el buscador a todo el ancho */
    div.vehiculos,
    section.ultimos div.vehiculos{
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    article.vehiculo h2{
        font-size: 15px;
        padding: 8px 10px 2px;
    }
    article.vehiculo p{
        padding: 0 10px;
        font-size: 13px;
    }
    article.vehiculo p.precio{
        margin-top: 6px;
        font-size: 17px;
    }
    form.buscador select,
    form.buscador input{
        width: 100%;
        max-width: none;
        font-size: 16px;
    }
    form.buscador select#orden{
        margin-left: 0;
    }
    section.ficha{
        margin-top: 12px;
    }
    /* ficha: las especificaciones pasan debajo de las fotos */
    div.fichacuerpo{
        /* minmax(0, 1fr) y no 1fr: si no, la foto grande empuja la columna y se sale de la pantalla */
        grid-template-columns: minmax(0, 1fr);
    }
    /* ficha: miniaturas un poco más chicas */
    div.miniaturas{
        grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
        gap: 6px;
    }
    footer{
        font-size: 13px;
        /* lugar para que el botón de WhatsApp no tape el final del pie */
        padding-bottom: 80px;
    }
    div.piedatos{
        gap: 18px;
        justify-content: flex-start;
    }
}

/* Celulares muy angostos (320px, como el iPhone SE viejo): el menú más compacto para que entre */
@media (max-width: 360px){
    ul.menu li a{
        font-size: 12px;
        padding: 3px 3px;
    }
}