/* Personalizaciones propias de Autorent. NO lo regenera el exportador. */ /* ===== Ficha de marca (coches-,
	/* 02/10/2026 - Ficha de marca (page-coches-audi.php,
	plantilla compartida por TODAS las marcas vía template_include -- /coches-audi/,
	/coches-renting/bmw/,
	etc.),
	reorden pedido en móvil (solo móvil,
	no toca escritorio): 1) bloque "Renting,
	" (intro + descripción) justo debajo del hero. 2) título "X coches,
	/* ===== Ficha de marca (sigue),
	02/10/2026: tras subir a producción,
	el usuario reporta "espacios sin nada y elementos que se montan" en móvil. Se confirma con captura: 4 fallos más,
	los 4 ya existían antes de esta sesión (afectan a CUALQUIER marca,
	no solo BMW) y quedaban tapados porque nadie había mirado esta plantilla en móvil hasta ahora: 1) Debajo de "Renting,
	" había un hueco enorme: el fix global del 01/10/2026 (más arriba en este archivo) restauró el "display" de ".container-offers-cards-preview" -- una caja vacía (sin contenido,
	siempre "style=display:none" en el PHP) que en escritorio mide 926x492px -- sin querer,
	dejando ese bloque vacío pero VISIBLE y ocupando espacio real. Se vuelve a ocultar. De paso se fuerza "min-height:auto" en el contenedor del bloque,
	que heredaba un "min-height:442px" de escritorio nunca reseteado en móvil. 2) Debajo de "Ordenar por" quedaba otro hueco: "Ordenar por" hereda "flex:0 0 232px" de escritorio (pensado para un ancho fijo en una fila); al pasar esta fila a columna (más arriba en este archivo) esa medida se convierte en el ALTO de la caja en vez del ancho. 3) El texto de "Conoce la gama{marca}): fondo de sección, no imagen =====
   Las dos imagenes/overlays que generaba Figma para estas secciones son, en
   origen, un simple rectangulo solido #EAF5FB -- se sustituyen por color de
   fondo directo para que cubran siempre el 100% del ancho, sin depender del
   tamano fijo en px de la imagen exportada. */
.section-configura-renting-desktop-coches-audi,
.section-que-incluye-desktop-coches-audi { background-color: #eaf5fb; }

/* ===== Carrusel de ofertas destacadas ===== */
.ar-carousel { position: relative; width: 100%; align-self: stretch; min-width: 0; }
.ar-carousel .ar-carousel__track {
	display: flex; flex-direction: row; flex-wrap: nowrap; gap: 1.5rem; align-items: stretch;
	overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%;
}.ar-carousel .ar-carousel__track::-webkit-scrollbar,
	.ar-carousel__btn.is-hidden,
	/* El propio Figma trae,
	DENTRO de cada pastilla,
	un rectangulo de color decorativo (el fondo azul original) -- con el fondo ya puesto en ".ar-plazo-pill" sobra y se ve como una caja azul de mas encima de la siguiente pastilla. */ .ar-plazo-pill > div:first-child,
	/* La casilla decorativa vacía del diseño ya no hace falta -- CF7 pinta su propio checkbox real junto al texto legal (con el enlace a la política). */ .contacto-light-desktop__casilla-desktop-home,
	/* -- botón "Filtros": nuevo,
	solo existe en móvil. El formulario de filtros (".../container-sidebar-filters-desktop-coches-renting",
	ya reparado más arriba para que vuelva a ser una caja real en vez de aplanarse) se oculta por defecto y el botón lo despliega añadiendo la clase "ar-filters-open" (ver assets/js/functions.js). */ .ar-filters-toggle-btn,
	/* casilla de aceptar política: se oculta la caja decorativa de mentira del diseño (no es un checkbox real,
	nunca lo fue) y se estiliza la real de CF7 para que ocupe su mismo hueco visual. */ [class*="consentimiento-desktop"] [class*="casilla-desktop"]{ display: none; }
.ar-carousel .ar-carousel__slide {
	flex: 0 0 calc((100% - 48px) / 3); max-width: none; min-width: 0; scroll-snap-align: start;
}
.ar-carousel .ar-carousel__slide img { max-width: 100%; }
.ar-carousel__vacio { margin: 0; padding: 1.5rem 0; }
.ar-carousel__btn {
	position: absolute; top: 110px; z-index: 2; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
	background: #0068c9; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.ar-carousel__btn:hover { background: #0057a8; }
.ar-carousel__btn--next { right: -20px; }
.ar-carousel__btn--prev { left: -20px; }
.ar-carousel__btn--prev svg { transform: scaleX(-1); }
@media (max-width: 1023px) {
	.ar-carousel .ar-carousel__track { gap: 1rem; }
	.ar-carousel .ar-carousel__slide { flex-basis: calc((100% - 16px) / 2); }
	.ar-carousel__btn { top: 114px; width: 40px; height: 40px; }
}
@media (max-width: 639px) {
	.ar-carousel .ar-carousel__slide { flex-basis: 100%; }
}/* ===== ar-nav-movil: hamburguesa,
	menú real y lupa colocados como en Figma (26-27/09/2026) ===== */ .cmp-header-navbar-desktop,
	/* El <input> real solo mide el alto de su propia línea de texto (24px) dentro de la caja azul de 48px -- pulsar cerca del borde (en el relleno de arriba/abajo) cae fuera del control real y da sensación de que el botón no responde (aviso del usuario). Se coloca el input en posición absoluta cubriendo TODA la caja azul (sea cual sea su envoltorio real -- CF7 solo mete un <p> si así se escribió el formulario en el admin),
	sin tocar relleno/tipografía/color ya correctos: el texto se sigue centrando igual,
	solo crece el área pulsable hasta ocupar el botón entero. */ .contacto-light-desktop__enviar-consulta-desktop-home,
	/* mismo fallo que en la home (ver más arriba): el <input> solo mide el alto de su línea de texto dentro de la caja azul de 48px,
	así que pulsar cerca del borde cae fuera del control real. Se coloca en posición absoluta cubriendo toda la caja (sea cual sea su envoltorio real -- CF7 solo mete un <p> si así se escribió el formulario en el admin),
	sin tocar relleno/tipografía/color ya correctos. */ [class*="enviar-consulta-desktop"]{ position: relative; }
.cmp-header-navbar-desktop .tm-nav__toggle { display: none; margin-left: 0.75rem; flex: 0 0 auto; color: #0b1f2c; }
/* Este "display:none" NO estaba dentro del media de movil -- ocultaba el menu
   real tambien en escritorio, sin ningun toggle que lo mostrara ahi (el
   hamburguesa solo existe <1024px). Es la causa de que el menu real nunca
   se viera aunque se asignara uno en Apariencia > Menus (encontrado por el
   usuario, 30/09/2026). En escritorio el menu real debe verse siempre; en
   movil arranca cerrado y el JS de la hamburguesa le añade ".is-open". */
@media (max-width: 1023px) {
	.cmp-header-navbar-desktop .tm-nav__nav-wrap { display: none; }
	.cmp-header-navbar-desktop .tm-nav__toggle { display: flex; width: 24px; height: 24px; gap: 0.3125rem; }
	.cmp-header-navbar-desktop .tm-nav__toggle span { width: 100%; height: 2px; background: currentColor; }
	.cmp-header-navbar-desktop .tm-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.cmp-header-navbar-desktop .tm-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.cmp-header-navbar-desktop .tm-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	.cmp-header-navbar-desktop .tm-nav__nav-wrap.is-open {
		display: flex !important; flex-direction: column; position: fixed; inset: 0; background: #fff;
		padding: 5rem 1.5rem 2rem; overflow-y: auto; z-index: 1000;
	}
	.cmp-header-navbar-desktop .tm-nav__nav-wrap.is-open ul { flex-direction: column; align-items: flex-start; gap: 1rem; }
	.cmp-header-navbar-desktop .tm-nav__nav-wrap .sub-menu { position: static; box-shadow: none; padding-left: 1rem; }
	body.tm-nav-open { overflow: hidden; }

	/* La lupa (y con ella la hamburguesa, ver mas arriba) viven en Figma en la SEGUNDA fila, junto al logo -- no en
	   la barra superior donde las deja el exportador (ver el punto 2 de la cabecera de este archivo). Se sacan de
	   flujo y se colocan en las coordenadas EXACTAS del diseño de movil (calculadas una vez contra la API de
	   Figma: 72px desde arriba, centradas en la segunda fila; 16px de margen lateral del sitio) -- así la barra
	   superior queda solo con el email y el telefono, sin apretarlos. La propia caja ya centra su contenido
	   (declaracion de Auto Layout de Figma, sin tocar) -- solo hace falta sacarla de flujo y reubicarla. */
	.cmp-header-navbar-desktop__right-actions-desktop { position: absolute; top: 72px; right: 16px; }
	/* El icono de la lupa es blanco (correcto en la barra superior azul de donde lo saca el exportador) -- al
	   reubicarlo aqui, sobre fondo blanco, quedaba invisible. Se oscurece solo en movil (en escritorio se queda
	   blanco, tal cual el diseño). */
	.cmp-header-navbar-desktop__search-desktop { filter: brightness(0); }

	/* El logo renderiza a 134px de alto en vez de 52px -- fallo real del motor, encontrado el 28/09/2026: cuando
	   aplana un contenedor (aqui, "header-main-navigation-desktop", porque su fila de escritorio no encaja limpia
	   con el diseño de movil) sus hijos sueltos pasan a vivir en una COLUMNA (el propio "cmp-header-navbar-desktop"),
	   pero su CSS "flex: 0 0 134px" se calculo pensando que seguirian en una FILA -- en una fila esa propiedad fija
	   el ANCHO (correcto, 134px es el ancho real del logo en movil), pero en una columna fija el ALTO, y el
	   navegador la prioriza sobre "height:52.39px". Aqui se fuerza el alto real y se quita el "flex" para que ya no
	   dispute con "height". Root cause pendiente de arreglar en el motor compartido (afecta a cualquier proyecto
	   donde esto se repita, no solo a este logo). */
	/* El mismo aplanado tambien hace desaparecer el padding de la fila original (14px arriba/abajo, 16px a la
	   izquierda en el diseño de movil: "display:contents" no genera caja, y una caja sin caja no puede tener
	   padding) -- el logo quedaba pegado al borde superior e izquierdo. Se repone como margen en el propio logo. */
	.cmp-header-navbar-desktop__autorent-logo-desktop { height: 52.3892px !important; flex: 0 0 auto; margin: 0.875rem 0 0.875rem 1rem; }
}







/* ===== ar-ficha-selector: plazo/km/equipamiento de la ficha de vehiculo =====
   El CSS que la app genera para estas dos piezas (las 3 "pastillas" de plazo, la rejilla de equipamiento) sale mal
   de origen -- Figma las define con posiciones libres que el motor determinista no traduce bien en este caso
   concreto (fallo real, pendiente de investigar en el motor compartido). En vez de pelear con ese CSS, esta pieza
   se maqueta aqui desde cero, con los mismos colores/medidas del diseño. */
.ar-plazo-row { display: flex; flex-direction: row; gap: 0.5rem; }
.ar-plazo-pill {
	width: 114px; height: 48px; border-radius: 6px; background: #ffffff; border: 1px solid #d9e2e8;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ar-plazo-pill p { margin: 0; font-family: "Poppins", sans-serif; font-size: 1rem; color: #40515f; }
.ar-plazo-pill.is-active { background: #0068c9; border-color: #0068c9; }
.ar-plazo-pill.is-active p { color: #ffffff; }
.ar-ficha-km {
	font: inherit;
	border: 1px solid #d9e2e8;
	border-radius: 8px;
	padding: 0.5rem 2.25rem 0.5rem 0.75rem;
	width: 100%;
	/* Flecha nativa del navegador sustituida por el chevron real del diseño
	   (mismo SVG ya usado en la version estatica, page-ficha.php). */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url('../generated/p27_I2276_4103;25_83.svg');
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 14px 14px;
}
/* El contenedor real de esta seccion ya es una rejilla CSS de 3 columnas x 2 filas (fila 1 = solo el titulo,
   fila 2 = las 2 columnas de equipamiento + la caja del PDF a la derecha, cada una con su propia posicion FIJA,
   sin auto-colocar). Sin decirle a esta pieza en que fila/columnas va exactamente, el propio grid la auto-coloca
   en el primer hueco libre que encuentra -- que resulta ser la fila 1, junto al titulo (fallo real, 29/09/2026,
   encontrado por el usuario: "solo ocupan una pequeña parte"). Mismas coordenadas que ocupaba el contenedor
   original de la primera columna. */
.ar-equip-grid { grid-row: 2 / span 1; grid-column: 1 / span 2; columns: 2; column-gap: 2.5rem; }
.ar-equip-item { break-inside: avoid; display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0; }
.ar-equip-item img { width: 24px; height: 24px; flex: 0 0 24px; }
.ar-equip-item h3 { margin: 0; font-family: "Poppins", sans-serif; font-size: 1rem; font-weight: 400; color: #143f70; }
@media (max-width: 600px) { .ar-equip-grid { columns: 1; } }

/* La foto real de cada vehiculo casi nunca tiene la misma proporcion que
   la caja fija de Figma (787x592) -- con object-fit:cover se llenaba el
   hueco exacto pero RECORTANDO la imagen cuando era mas grande/con otra
   proporcion que el hueco. El usuario prefiere ver la foto completa aunque
   la caja no quede con el alto exacto del diseño: se quita object-fit y la
   altura fija, y se deja que la imagen ocupe el ancho de su columna
   (787px via flex-basis, sin tocar) manteniendo su proporcion real.
   min-width:0 es necesario -- sin el, el tamaño minimo automatico de un
   elemento flex con <img> de contenido usa el ancho INTRINSECO de la foto
   (p.ej. 1024px) como suelo, y al ser mayor que el flex-basis (787px) con
   flex-shrink:0 la imagen se desbordaba de su columna en vez de encajar
   en ella (comprobado con Playwright: sin min-width:0 la imagen salia a
   787/1024 = su tamaño real en vez de encogerse). */
.section-hero-desktop__imagehero-desktop-ficha {
	width: 100%;
	height: auto;
	min-width: 0;
}

/* Dos fondos a sangre completa (el rectangulo azul claro de "Todo incluido en tu cuota" y la foto de "¿Te interesa para ti?") se quedaban cortados a un ancho FIJO de 1440px (el ancho del diseño de Figma) en vez de ocupar todo el ancho real del navegador -- mismo patron de fallo ya visto y arreglado en la Home,
	pendiente en el motor para esta pagina en concreto (aparte,
	no se toca aqui). Los dos son capas ABSOLUTAS dentro de una seccion que YA es "position:relative" y ya ocupa el ancho real -- basta con que ocupen el 100% de ESA seccion,
	no hace falta ningun truco de "sangrado" adicional sobre la seccion en si (ese primer intento,
	28/09/2026,
	apuntaba a la seccion equivocada,
	ver "rectangle-65" mas abajo,
	encontrado por el usuario). */ .section-features-desktop__rectangle-65-desktop-ficha,
	.section-benefits-desktop__image-conversation-desktop-ficha,
	.group-1261152832-desktop__section-header-desktop-contacto{ width: 100% !important; }

/* ===== single.php: entrada individual del blog (diseño propio, sin Figma) ===== */
.av-single { max-width: 1300px; margin: 0 auto; padding: 2rem 1rem 4rem; box-sizing: border-box; }
.av-single__breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1.5rem; font-family: "Poppins", sans-serif; font-size: 0.875rem; color: #71808c; }
.av-single__breadcrumb a { color: #0068c9; text-decoration: none; }.av-single__breadcrumb a:hover,
	.av-single__cat:hover,
	ul.footer-desktop__legal-links-desktop a:hover,
	article.result .entry-meta--category a:hover{ text-decoration: underline; }
.av-single__breadcrumb span { color: #a9b6bf; }
.av-single__breadcrumb-current { color: #40515f; }

.av-single__layout { display: flex; flex-direction: row; align-items: flex-start; gap: 2.5rem; }
.av-single__main { flex: 1 1 auto; min-width: 0; }
.av-single__image { width: 100%; height: 420px; object-fit: cover; border-radius: 16px; display: block; margin: 0 0 1.5rem; }

.av-single__meta { display: flex; align-items: center; gap: 0.5rem; font-family: "Poppins", sans-serif; font-size: 0.875rem; color: #71808c; margin: 0 0 0.75rem; }.av-single__cat,
	article.result .entry-meta--category a{ color: #0068c9; text-decoration: none; font-weight: 600; }
.av-single__sep { color: #d9e2e8; }

.av-single__title { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 2.25rem; line-height: 2.75rem; color: #143f70; margin: 0 0 1.5rem; }

.av-single__content { font-family: "Poppins", sans-serif; font-size: 1rem; line-height: 1.625rem; color: #40515f; }
.av-single__content p { margin: 0 0 1.25rem; }
.av-single__content h2 { font-weight: 700; font-size: 1.625rem; line-height: 2.125rem; color: #143f70; margin: 2.5rem 0 1rem; }
.av-single__content h3 { font-weight: 700; font-size: 1.25rem; line-height: 1.75rem; color: #143f70; margin: 2rem 0 0.75rem; }
.av-single__content ul, .av-single__content ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.av-single__content li { margin-bottom: 0.5rem; }.av-single__content a,
	.av-sidebar__categories a:hover,
	.contacto-light-desktop__consentimiento-desktop-home a,
	.sidebar-area .widget a:hover{ color: #0068c9; }
.av-single__content img { max-width: 100%; height: auto; border-radius: 12px; }
.av-single__content table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.9375rem; }
.av-single__content table th, .av-single__content table td { border: 1px solid #d9e2e8; padding: 0.625rem 0.75rem; text-align: left; }
.av-single__content table th { background: #eaf5fb; color: #143f70; }
.av-single__content blockquote { margin: 0 0 1.25rem; padding: 1rem 1.25rem; border-left: 4px solid #0068c9; background: #eaf5fb; border-radius: 0 8px 8px 0; color: #143f70; }

.av-single__sidebar { flex: 0 0 320px; width: 320px; display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 24px; }
.av-sidebar__block { background: #ffffff; border: 1px solid #d9e2e8; border-radius: 12px; padding: 1.25rem; box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.0588235); box-sizing: border-box; }.av-sidebar__block h3,
	.sidebar-area .widget-title{ font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.125rem; color: #143f70; margin: 0 0 1rem; }.av-sidebar__search .search-form,
	.sidebar-area .widget .search-form{ display: flex; gap: 0.5rem; }.av-sidebar__search .search-field,
	.sidebar-area .widget .search-field{ flex: 1 1 auto; min-width: 0; border: 1px solid #d9e2e8; border-radius: 8px; padding: 0.625rem 0.75rem; font: inherit; font-family: "Poppins", sans-serif; }
.av-sidebar__search .search-submit { flex: 0 0 auto; background: #0068c9; color: #ffffff; border: 0; border-radius: 8px; padding: 0 1rem; cursor: pointer; font-family: "Poppins", sans-serif; font-weight: 600; }
.av-sidebar__search .search-submit:hover { background: #00509c; }.av-sidebar__categories ul,
	.sidebar-area .widget ul{ list-style: none; margin: 0; padding: 0; }
.av-sidebar__categories li { border-bottom: 1px solid #eaf5fb; }.av-sidebar__categories li:last-child,
	.sidebar-area .widget li:last-child{ border-bottom: 0; }
.av-sidebar__categories a { display: block; padding: 0.625rem 0; color: #40515f; text-decoration: none; font-family: "Poppins", sans-serif; font-size: 0.9375rem; }

@media (max-width: 900px) {
	.av-single__layout { flex-direction: column; }
	.av-single__sidebar { width: 100%; flex-basis: auto; position: static; }
	.av-single__title { font-size: 1.75rem; line-height: 2.25rem; }
	.av-single__image { height: 260px; }
}

/* ===== Formulario real (Contact Form 7) dentro de "Contáctanos" (home) =====
   Cuando se rellena el campo "Shortcode formulario" (30/09/2026), el bloque
   estático (inputs falsos con h3) se sustituye por el formulario real de CF7 --
   pero el shortcode del usuario reutiliza las MISMAS clases/cajas del diseño
   (input-field-desktop-home, select-field-desktop-home, rea-de-texto-desktop-home,
   enviar-consulta-desktop-home...), así que esas cajas ya salen bien solas.
   Lo que falta es el estilo de los controles de formulario reales en sí
   (input/textarea/checkbox/submit), que no tenían ningún CSS porque antes
   eran solo texto. */
/* Las 4 columnas de 2 en fila (nombre/telefono, correo/asunto) medían su ancho
   por el CONTENIDO ("flex:1 1 auto" en style.css) -- con el <h3> de texto corto
   de antes cabían 2 en la fila, pero el <input> real de CF7 (con size="40") pide
   más ancho del que cabe y el navegador las apila en vertical. Mismo patrón de
   fallo ya visto y arreglado en otras filas del sitio: fijar flex-basis a 0 para
   que solo importen los ratios de flex-grow/min-width/max-width del diseño, no
   el contenido. */
.contacto-light-desktop__nombre-y-apellidos-desktop-home,
.contacto-light-desktop__tel-fono-desktop-home,
.contacto-light-desktop__correo-electr-nico-desktop-home,
.contacto-light-desktop__motivo-de-consulta-desktop-home { flex: 1 1 0; }
.contacto-light-desktop__formulario-compacto-desktop-home .wpcf7-form-control-wrap { display: block; width: 100%; }
.contacto-light-desktop__formulario-compacto-desktop-home input[type="text"],
.contacto-light-desktop__formulario-compacto-desktop-home input[type="tel"],
.contacto-light-desktop__formulario-compacto-desktop-home input[type="email"],
.contacto-light-desktop__formulario-compacto-desktop-home textarea {
	width: 100%; border: 0; outline: 0; background: transparent; padding: 0;
	font-family: "Poppins", sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5rem; color: #40515f;
}.contacto-light-desktop__formulario-compacto-desktop-home input[type="text"]::placeholder,
	.contacto-light-desktop__formulario-compacto-desktop-home input[type="tel"]::placeholder,
	.contacto-light-desktop__formulario-compacto-desktop-home input[type="email"]::placeholder,
	.contacto-light-desktop__formulario-compacto-desktop-home textarea::placeholder,
	[class*="input-field-desktop"] .wpcf7-form-control::placeholder,
	[class*="rea-de-texto-desktop"] .wpcf7-form-control::placeholder,
	[class*="select-field-desktop"] .wpcf7-form-control::placeholder{ color: #71808c; opacity: 1; }
/* Las cajas de nombre/teléfono/correo son de una sola línea -- el <p> del campo
   no debe estirarse más de lo que ya define ".input-field-desktop-home" en el diseño. */
.contacto-light-desktop__input-field-desktop-home > p,
.contacto-light-desktop__input-field-desktop-2-home > p,
.contacto-light-desktop__input-field-desktop-3-home > p,
.contacto-light-desktop__select-field-desktop-home > p { margin: 0; width: 100%; flex: 1 1 auto; }/* Área de texto: el <p> que envuelve el textarea debe llenar toda la caja ".rea-de-texto-desktop-home" para que el textarea real ocupe su alto real. */ .contacto-light-desktop__rea-de-texto-desktop-home,
	/* Botón enviar: el input real trae estilo nativo del navegador (fondo gris,
	borde) que tapa la caja azul ya correcta de ".enviar-consulta-desktop-home". */ .contacto-light-desktop__enviar-consulta-desktop-home{ width: 100%; }
.contacto-light-desktop__rea-de-texto-desktop-home > p { margin: 0; width: 100%; height: 100%; }
.contacto-light-desktop__rea-de-texto-desktop-home textarea { resize: vertical;height: 90px!important; }
.contacto-light-desktop__consentimiento-desktop-home { align-items: flex-start; }.contacto-light-desktop__consentimiento-desktop-home .wpcf7-list-item,
	ul.footer-desktop__legal-links-desktop li,
	article.result .entry-summary p,
	[class*="consentimiento-desktop"] p,
	[class*="consentimiento-desktop"] .wpcf7-list-item,
	/* el propio CF7 envuelve cada campo en un <p> con margen por defecto del navegador -- lo quita para no romper los espacios ya calculados por el diseño entre un campo y el siguiente. */ .wpcf7-form p{ margin: 0; }
.contacto-light-desktop__consentimiento-desktop-home .wpcf7-list-item-label,
.contacto-light-desktop__consentimiento-desktop-home label {
	display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer;
	font-family: "Poppins", sans-serif; font-weight: 500; font-size: 0.75rem; line-height: 1rem; color: #40515f;
}
.contacto-light-desktop__consentimiento-desktop-home input[type="checkbox"] {
	width: 20px; height: 20px; flex: 0 0 20px; margin: 0; accent-color: #0068c9; border-radius: 2px; cursor: pointer;
}.contacto-light-desktop__consentimiento-desktop-home > p,
	/* botón "Enviar consulta": el <input type="submit"> real de CF7 trae su propio botón gris del navegador por encima de la caja azul que ya tenía el diseño -- se vacía para que se vea el fondo azul ya puesto. */ [class*="enviar-consulta-desktop"] p{ margin: 0; width: 100%; }
.contacto-light-desktop__enviar-consulta-desktop-home > p { margin: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.contacto-light-desktop__enviar-consulta-desktop-home input[type="submit"] {
	-webkit-appearance: none; appearance: none; border: 0; outline: 0; background: transparent; padding: 0;
	width: 100%; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.5rem;
	text-align: center; color: #ffffff; cursor: pointer;
}
.contacto-light-desktop__enviar-consulta-desktop-home input[type="submit"]:disabled { cursor: default; opacity: .85; }
.contacto-light-desktop__enviar-consulta-desktop-home input[type="submit"] {
	position: absolute; inset: 0; height: auto; line-height: 3rem;
}
/* Mensajes de validación/estado propios de CF7 (ocultos hasta que hacen falta). */
.contacto-light-desktop__formulario-compacto-desktop-home .screen-reader-response {
	position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; margin: -0.0625rem; padding: 0; border: 0;
}
.contacto-light-desktop__formulario-compacto-desktop-home .wpcf7-not-valid-tip { display: block; margin-top: 0.25rem; font-family: "Poppins", sans-serif; font-size: 0.8125rem; color: #e0432c; }
.contacto-light-desktop__formulario-compacto-desktop-home .wpcf7-response-output { width: 100%; box-sizing: border-box; margin: 0.5rem 0 0; padding: 0.625rem 0.875rem; border-radius: 8px; font-family: "Poppins", sans-serif; font-size: 0.875rem; }
.contacto-light-desktop__formulario-compacto-desktop-home form.sent .wpcf7-response-output { border: 1px solid #2fae5b; color: #1f7a3f; background: #eafaf0; }.contacto-light-desktop__formulario-compacto-desktop-home form.invalid .wpcf7-response-output,
	.contacto-light-desktop__formulario-compacto-desktop-home form.failed .wpcf7-response-output,
	.contacto-light-desktop__formulario-compacto-desktop-home form.spam .wpcf7-response-output{ border: 1px solid #e0432c; color: #b3301c; background: #fdeceb; }
.contacto-light-desktop__formulario-compacto-desktop-home .ajax-loader { margin-left: 0.5rem; }/* ===== Footer: widgets reales dentro de las zonas dinamicas (30/09/2026) ===== Cada widget que se añade en Apariencia -> Widgets sale envuelto por WordPress en su propia caja ("before_widget"/"after_widget" de register_sidebar en inc/home-widgets.php: <div class="widget footer-marca ...">...</div>"),
	sea cual sea el tipo de widget (HTML personalizado,
	Texto...). Esa caja extra rompe el "display:flex" que las filas del footer esperan directamente sobre sus hijos (logo/texto/redes en una fila; ciudad/direccion/telefono en cada columna de oficina) -- con la caja de por medio,
	el contenido ya no se reparte como columnas,
	se ve todo apretado/descolocado (encontrado por el usuario,
	zona "Footer Marca"). "display:contents" quita esa caja del arbol de maquetacion (sin quitar el HTML) para que sus hijos vuelvan a ser hijos directos de la fila,
	tal cual si el widget no estuviera envuelto. */ .footer-desktop .widget,
	/* El widget "HTML personalizado" (y el clasico "Texto") meten SU PROPIA caja extra dentro de la del sidebar (<div class="textwidget custom-html-widget">),
	confirmado con el inspector por el usuario -- aplanar solo ".widget" no basta,
	esta segunda caja seguia siendo el unico hijo real de la fila. */ .footer-desktop .widget .textwidget{ display: contents; }

/* ===== Footer: 4 iconos de redes sociales enlazables por separado (30/09/2026) =====
   Antes era una sola imagen (las 4 insignias exportadas juntas en un unico SVG
   de Figma) sin forma de enlazar cada red por separado. Se partio en 4 SVG
   independientes (assets/generated/p26_social-*.svg, mismos trazos/colores del
   diseño original, solo recortados) y footer.php ahora pone cada uno dentro de
   su propio <a>. Esta caja pasa de ser una imagen suelta a un contenedor fila:
   mismo ancho/alto total que antes (4×40px + 3×12px de hueco = 196×40px, ya
   coincide con ".social-media-desktop" que trae "gap:12px"). */
.footer-desktop__social-links-desktop { display: flex; flex-direction: row; gap: 0.75rem; align-items: center; }
.footer-desktop__social-links-desktop img { display: block; width: 40px; height: 40px; }
.footer-desktop__social-links-desktop a { line-height: 0; opacity: 1; transition: opacity .15s ease; }
.footer-desktop__social-links-desktop a:hover { opacity: .8; }

/* ===== Footer: "Aviso legal | ..." pasa a ser el menu real "Menu pie" (30/09/2026) =====
   Antes era texto estatico fijo; ahora, en cuanto se asigne un menu en
   Apariencia > Menus > Menu pie, sale como <ul><li><a> real (wp_nav_menu),
   reutilizando la misma clase que ya tenia el texto para heredar tipografia/
   color -- solo hace falta quitar el estilo de lista y volver a ponerlo en fila
   con el separador "|" que traia el diseño original. */
ul.footer-desktop__legal-links-desktop { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; list-style: none; padding: 0; gap: 0; }
ul.footer-desktop__legal-links-desktop li:not(:last-child)::after { content: " | "; }
ul.footer-desktop__legal-links-desktop a { color: inherit; text-decoration: none; }

/* ===== Header: flechita de submenu en el menu real (30/09/2026) =====
   El bloque estatico que se quito tenia su propio icono de flecha junto a
   "Soluciones de renting"/"Preguntas frecuentes" -- el menu real (wp_nav_menu,
   sin el TM_Nav_Walker del tema base) nunca lo tuvo: WordPress marca un item
   con hijos como "menu-item-has-children" pero no dibuja ninguna flecha por si
   solo. Mismo trazo/color que traia el diseño (p26_I2128_3627;50_151.svg,
   #0B1F2C) como fondo del "::after", para cualquier item que tenga hijos
   AHORA o en el futuro (no depende de cual sea). */
.tm-nav__nav-wrap ul > li.menu-item-has-children > a::after {
	content: ""; display: inline-block; width: 10px; height: 6px; margin-left: 0.375rem; flex: 0 0 auto;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 14'%3E%3Cpath d='M1.5 1.5L12.5 12.5L23.5 1.5' stroke='%230B1F2C' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.tm-nav__nav-wrap ul > li.menu-item-has-children > a { display: inline-flex; align-items: center; }

/* ===== Header: tamaño real del logo en escritorio (30/09/2026, corregido 01/10/2026) =====
   style.css (lo que regenera el exportador) trae 265x96 para este logo --
   comprobado contra la propia API de Figma por el usuario: el nodo real mide
   321x123.98, ni siquiera la misma proporcion (265/96=2.76 vs 321/123.98=2.59).
   Fallo real del motor determinista para este nodo en concreto, no del diseño.
   CORREGIDO 01/10/2026: esta regla NO estaba limitada a escritorio, y aunque
   el "height" de movil lleva "!important" (que en teoria debia protegerlo), el
   "flex" de esta regla (sin !important, declarada mas abajo en el archivo que
   la de movil) SI ganaba por orden de cascada -- en un contenedor que en movil
   pasa a ser columna, ese "flex:0 0 321px" fija el alto real a 321px (logo
   cuadrado, empuja el hero muy abajo, hueco en blanco enorme -- encontrado por
   el usuario en la revision responsive). Ahora limitada a escritorio real. */
@media (min-width: 1024px) {
	.cmp-header-navbar-desktop__autorent-logo-desktop { width: 321px; height: 123.983px; flex: 0 0 321px; }
}

/* ===== Header: logo a la izquierda, menú pegado al borde derecho (30/09/2026) =====
   ".header-main-navigation-desktop" (fila logo+menu) nunca traia "justify-content"
   en style.css -- confirmado en vivo con el inspector por el usuario a pantalla
   ancha (1920px): el navegador la deja en su valor por defecto ("normal" =
   flex-start), asi que logo+menu quedan pegados a la izquierda del bloque de
   1300px con un hueco vacio enorme a la derecha, en vez de repartirse como en
   el diseño (logo a la izquierda, menu terminando en el borde derecho real del
   contenido). Fallo real del motor determinista para esta fila en concreto
   (la barra de contacto de arriba SI centra bien su contenido). */
.cmp-header-navbar-desktop__header-main-navigation-desktop { justify-content: space-between; }

/* ===== Header: el submenú de "Soluciones de renting" se recortaba (30/09/2026) =====
   Confirmado en vivo con el inspector: ".header-main-navigation-desktop" Y la
   propia sección ".cmp-header-navbar-desktop" traen "overflow:hidden" en el
   diseño (probablemente un "Clip content" de Auto Layout en Figma, sin ningún
   propósito visual aquí -- solo hay fondo blanco y un borde inferior). El
   submenú (position:absolute, se sale por debajo del header) quedaba recortado
   en el borde inferior del header en vez de flotar sobre el hero. Sin afectar
   al recorte de móvil (el menú a pantalla completa no usa overflow aquí). */
.cmp-header-navbar-desktop,
.cmp-header-navbar-desktop__header-main-navigation-desktop { overflow: visible; }

/* ===== Paginador: el número quedaba pegado arriba, no centrado (30/09/2026) =====
   Fallo sistemico del motor determinista, comprobado con el inspector en
   "coches-renting" y confirmado por grep en TODO el CSS: se repite igual en
   "coches-audi" y "blog" -- las 3 paginas con paginador. El texto del número
   (".../__1-desktop-...", "__2-desktop-...", etc.) trae "align-self:stretch"
   dentro de su caja (".../__page-1-desktop-...", 40x40, ya centrada con
   "align-items:center"), asi que el texto se estira a los 40px de alto en vez
   de encogerse a su propia altura de linea -- una sola linea de texto dentro
   de una caja de 40px queda arriba, no centrada. Selector generico por
   substring de clase para cubrir las 3 paginas (y cualquier otra que reuse
   el mismo patron) sin tener que listarlas una a una. Mismo fallo, mismo
   arreglo, en las flechas "anterior"/"siguiente" (".../__arrow-prev-desktop-...",
   ".../__arrow-next-desktop-...") -- confirmado por el usuario que seguian
   arriba tras arreglar solo los números. */
a[class*="__page-1-desktop-"] > p,
a[class*="__arrow-prev-desktop-"] > p,
a[class*="__arrow-next-desktop-"] > p { align-self: auto; height: auto; }

/* ===== FAQ (páginas de "Soluciones de renting"): altura fija se comía el footer (01/10/2026) =====
   La sección de FAQ trae "height:708px" FIJO en escritorio (calculado para el
   contenido exacto de Figma) -- el ajuste a "height:auto" que ya existe en el
   CSS solo se aplica en móvil ("@media max-width:1023px"), nunca en escritorio.
   Con 10 preguntas repartidas en 2 columnas, el texto real de cada pregunta
   (largo variable segun la página) puede superar esos 708px -- en
   "renting-empresas" el texto es corto y cabe por poco (pasa desapercibido);
   en "renting-autonomos" es un poco más largo y se sale, montándose sobre el
   footer (encontrado por el usuario). Mismo componente reutilizado en flotas,
   empresas, autonomos y particulares -- selector generico por substring para
   cubrir las 4 sin listarlas, y que no vuelva a pasar si se edita el texto de
   alguna pregunta en el admin. */
section[class*="container-section-faq-desktop"],
div[class*="__section-faq-desktop-"] { height: auto !important; }/* ===== Página /preguntas-frecuentes/: mismo fallo,
	3 secciones más (01/10/2026) ===== "Renting o comprar" (altura fija 439px),
	"Qué incluye y qué pasa si..." (521px) y la fila inferior "Cuándo termina el renting / Según tus necesidades" (915px,
	con "overflow:hidden" -- ahí ni siquiera se ve,
	se recorta en vez de superponerse) tienen el mismo problema que "Renting o comprar" (reportado por el usuario): la caja no crece al desplegar el acordeón,
	así que el contenido se monta sobre la sección siguiente. "1. Entender el renting" SÍ funciona bien porque esa es la única que ya sale sin altura fija en el diseño. */ .column-renting-o-comprar-desktop-preguntas-frecuentes,
	.container-que-incluye-desktop-preguntas-frecuentes,
	.section-faq-bottom-row-desktop-preguntas-frecuentes,
	/* -- contacto,
	solo escritorio: la tarjeta que envuelve el formulario tiene altura fija (614px) y "overflow:hidden",
	pensada para la maqueta de mentira. El formulario real ocupa algo más (relleno/interlineado real de un <textarea> y un <input type="submit">,
	en vez del texto suelto de la maqueta) y el botón "Enviar consulta" quedaba cortado por debajo del borde de la tarjeta -- confirmado en vivo (el botón existe y tiene el color correcto,
	pero su posición queda fuera de la caja visible). Se cambia la altura fija por "auto" (crece según su contenido real) y se quita el recorte. */ .contact-desktop__tarjeta-del-formulario-desktop-contacto{ height: auto !important; overflow: visible !important; }

/* -- home, misma tarjeta de formulario, mismo fallo (07/10/2026): "CONTÁCTANOS"
   en la portada usa la misma plantilla de formulario compacto, con su propia
   altura fija (574px) y "overflow:hidden". Aquí el síntoma no era el botón
   cortado sino el mensaje de "enviado"/"error" tras mandar el formulario --
   reportado por el usuario como que no aparece. Confirmado simulando el
   estado "sent" de Contact Form 7 (las mismas clases que pone su JS al
   terminar un envío real) contra la página en vivo: el mensaje SÍ se genera
   y SÍ tiene contenido, pero su posición queda varios píxeles por debajo
   del borde inferior de la tarjeta (574px fijos), así que "overflow:hidden"
   lo recorta por completo -- invisible aunque exista. Mismo arreglo que en
   contacto: altura automática y sin recorte. */
.contacto-light-desktop__tarjeta-del-formulario-desktop-home { height: auto !important; overflow: visible !important; }

/* ===== /soluciones-de-renting/: TODO el contenido desaparecía en móvil (01/10/2026) =====
   Revisión responsive pedida por el usuario. Reescrito el 03/10/2026 con
   datos REALES del frame "page-soluciones-mobile" de Figma, leídos por la
   API (antes era prueba/error por captura de pantalla -- ya no). Fallo
   grave del motor determinista (no introducido por nosotros): style.css
   trae "display:none" en "@media(max-width:1023px)" para las 7 secciones
   de contenido de esta página (hero + las 5 tarjetas de solución + el
   banner final) -- solo queda visible la cabecera y el footer. Los hijos
   directos de cada sección usan "position:absolute" con coordenadas fijas
   de escritorio -- invisibles/fuera de pantalla en móvil si solo se quita
   el "display:none". Se fuerza cada sección a una columna apilada y se
   liberan sus hijos de la posición absoluta para que sigan el orden
   natural del HTML, que coincide con el orden real del diseño móvil. */
@media (max-width: 1023px) {
	.section-hero-desktop-soluciones-de-renting,
	.section-particulares-desktop-soluciones-de-renting,
	.section-aut-nomos-desktop-soluciones-de-renting,
	.section-empresa-desktop-soluciones-de-renting,
	.section-flexible-desktop-soluciones-de-renting,
	.section-flota-desktop-soluciones-de-renting,
	.section-banner-desktop-soluciones-de-renting {
		display: flex !important; flex-direction: column !important; align-items: flex-start !important;
		height: auto !important; min-height: auto !important;
		background-size: cover !important; background-position: center !important; overflow: visible !important;
	}
	.section-hero-desktop-soluciones-de-renting > *,
	.section-particulares-desktop-soluciones-de-renting > *,
	.section-aut-nomos-desktop-soluciones-de-renting > *,
	.section-empresa-desktop-soluciones-de-renting > *,
	.section-flexible-desktop-soluciones-de-renting > *,
	.section-flota-desktop-soluciones-de-renting > *,
	.section-banner-desktop-soluciones-de-renting > * {
		position: static !important; width: 100% !important; max-width: 100% !important; height: auto !important;
		flex: none !important;
	}
	/* Los descendientes (no solo los hijos directos) siguen trayendo anchos
	   fijos de escritorio -- sin esto el texto se desbordaba por la derecha
	   en vez de ajustar línea, y seguían con "position:absolute" varios
	   niveles por debajo (la foto de autónomos/empresa/flexible/flota no es
	   hija directa de la sección). Se libera TODO descendiente. */
	.section-hero-desktop-soluciones-de-renting *,
	.section-particulares-desktop-soluciones-de-renting *,
	.section-aut-nomos-desktop-soluciones-de-renting *,
	.section-empresa-desktop-soluciones-de-renting *,
	.section-flexible-desktop-soluciones-de-renting *,
	.section-flota-desktop-soluciones-de-renting *,
	.section-banner-desktop-soluciones-de-renting * {
		position: static !important; height: auto !important; max-width: 100% !important; box-sizing: border-box !important;
	}
	/* 03/10/2026 -- HERO: datos reales del frame "hero-mobile" --
	   padding:32px 16px 16px 16px, gap:24px entre el bloque de texto y
	   "Tu movilidad, nuestras soluciones.", gap:16px entre eyebrow/titulo/
	   subtitulo/descripcion. Tamaños reales: eyebrow 14/20 (600), titulo
	   (h1) 36/44 (700), subtitulo 22/28 (700), descripcion 16/24 (400). */
	.section-hero-desktop-soluciones-de-renting {
		padding: 2rem 1rem 1rem 1rem !important; gap: 1.5rem !important;
	}
	.section-hero-desktop__container-hero-titles-desktop-soluciones-de-renting {
		display: flex !important; flex-direction: column !important; gap: 1.5rem !important;
	}
	.section-hero-desktop__txt-hero-eyebrow-desktop-soluciones-de-renting,
	.section-hero-desktop__txt-hero-heading-desktop-soluciones-de-renting,
	.section-hero-desktop__txt-hero-offers-description-desktop-soluciones-de-renting,
	.section-hero-desktop__txt-hero-custom-renting-description-desktop-soluciones-de-renting {
		margin-top: 1rem !important;
	}
	.section-hero-desktop__txt-hero-eyebrow-desktop-soluciones-de-renting {
		margin-top: 0 !important;
	}
	.section-hero-desktop__txt-hero-heading-desktop-soluciones-de-renting {
		font-size: 2.25rem !important; line-height: 2.75rem !important;
	}
	.section-hero-desktop__txt-hero-offers-description-desktop-soluciones-de-renting,
	.section-hero-desktop__tu-movilidad-nuestras-soluciones-desktop-soluciones-de-renting {
		font-size: 1.375rem !important; line-height: 1.75rem !important; height: auto !important; width: auto !important;
	}
	.section-hero-desktop__txt-hero-custom-renting-description-desktop-soluciones-de-renting {
		font-size: 1rem !important; line-height: 1.5rem !important;
	}
	/* 03/10/2026 -- TARJETAS: cada tarjeta es una caja blanca (bordeε12px,
	   radio 12px, #D9E2E8) con padding:16px EN TODOS LOS LADOS (la foto
	   incluida -- dato real, no va a sangre como se asumió antes por una
	   lectura equivocada de capturas comprimidas), separación 24px entre
	   tarjetas, gap:16px entre el bloque de foto y el de texto. */
	.section-particulares-desktop-soluciones-de-renting,
	.section-aut-nomos-desktop-soluciones-de-renting,
	.section-empresa-desktop-soluciones-de-renting,
	.section-flexible-desktop-soluciones-de-renting,
	.section-flota-desktop-soluciones-de-renting {
		padding: 1rem !important; gap: 1rem !important; position: relative !important;
		border: 1px solid #d9e2e8 !important; border-radius: 12px !important;
		background-color: #ffffff !important; margin: 0 1rem 1.5rem 1rem !important;
		width: auto !important;
	}
	/* La foto de fondo mide siempre 193px de alto (dato real, no 220px). En
	   particulares la foto es el FONDO de la propia sección (no hay div
	   aparte) -- se traslada ese fondo al hueco decorativo "rectangle-75",
	   que pasa a ser la caja real de la foto (193px), y se quita el fondo
	   de la sección para que no se vea detrás del texto. En el resto de
	   tarjetas la foto ya es un div real aparte -- solo se corrige su alto. */
	.section-particulares-desktop-soluciones-de-renting { background-image: none !important; }
	.section-particulares-desktop__rectangle-75-desktop-soluciones-de-renting {
		display: block !important; height: 193px !important; min-height: 193px !important; width: 100% !important;
		background-image: url('../generated/p36_2308_4598.png') !important;
		background-size: cover !important; background-position: center !important; border-radius: 8px !important;
		position: relative !important;
	}
	/* 03/10/2026 -- las capas diagonales semitransparentes SÍ van visibles
	   sobre la foto -- un fix anterior las ocultaba enteras por error,
	   confundiendo "decorativo" con "sobra". El SVG real (abierto y leído
	   directamente) no es un bloque de ancho fijo: es un velo blanco al
	   85% de opacidad con un recorte diagonal en el borde derecho, pensado
	   para cubrir la foto COMPLETA (en escritorio el SVG mide exactamente
	   el doble que la foto, 1578x792 vs 789x396 -- proporción exacta). En
	   móvil se usa el mismo SVG (no hay una versión específica exportada
	   para móvil) a tamaño completo de la foto -- la proporción no es
	   idéntica, "cover" recorta un poco, pero el efecto (velo diagonal) es
	   el correcto, no un bloque plano de 180px. En particulares la foto y
	   el hueco decorativo son el MISMO elemento (no hay div de foto
	   aparte), así que la capa se pinta con "::after" encima; en el resto
	   de tarjetas "rectangle-75" es su propio div -- se coloca en
	   absoluto sobre la foto. */
	.section-particulares-desktop__rectangle-75-desktop-soluciones-de-renting::after {
		content: ""; position: absolute !important; top: 0 !important; left: 0 !important;
		width: 100% !important; height: 100% !important;
		background-image: url('../generated/p36_2308_4599.svg') !important;
		background-size: cover !important; background-position: center !important; z-index: 1 !important;
	}
	.section-aut-nomos-desktop__image-autonomo-desktop-soluciones-de-renting,
	.section-empresa-desktop__handsome-man-choosing-car-show-room-1-desktop-soluciones-de-renting,
	.section-flexible-desktop__man-car-trip-1-desktop-soluciones-de-renting,
	.section-flota-desktop__image-gestion-flotas-desktop-soluciones-de-renting {
		height: 193px !important; min-height: 193px !important; width: 100% !important;
		background-size: cover !important; background-position: center !important; position: relative !important;
	}
	.section-aut-nomos-desktop__rectangle-75-desktop-soluciones-de-renting,
	.section-empresa-desktop__rectangle-75-desktop-soluciones-de-renting,
	.section-flexible-desktop__rectangle-75-desktop-soluciones-de-renting,
	.section-flota-desktop__rectangle-75-desktop-soluciones-de-renting {
		display: block !important; position: absolute !important; top: 16px !important; left: 16px !important;
		height: 193px !important; width: calc(100% - 32px) !important; z-index: 1 !important;
		background-size: cover !important; background-position: center !important;
	}
	.section-aut-nomos-desktop__rectangle-75-desktop-soluciones-de-renting {
		background-image: url('../generated/p36_2308_4616.svg') !important;
	}
	.section-empresa-desktop__rectangle-75-desktop-soluciones-de-renting {
		background-image: url('../generated/p36_2308_4630.svg') !important;
	}
	.section-flexible-desktop__rectangle-75-desktop-soluciones-de-renting {
		background-image: url('../generated/p36_2308_4645.svg') !important;
	}
	.section-flota-desktop__rectangle-75-desktop-soluciones-de-renting {
		background-image: url('../generated/p36_2308_4658.svg') !important;
	}
	/* Insignia sobre la foto: alto fijo 52px (con 1 o 2 líneas de texto,
	   dato real), top:132px (=193-52-9, deja 9px hasta el borde inferior
	   de la foto), ancho fijo 251px, por encima de la capa diagonal
	   (z-index:2). El left varía poco entre tarjetas (25px o 43px desde
	   el borde de la foto) -- valor real por tarjeta, no una fórmula.
	   Tamaño de letra real 12/16 (500) -- antes heredaba el 20/28 de
	   escritorio y salía desproporcionado ("el texto sobre la imagen es
	   demasiado grande"). 03/10/2026: en autónomos el bloque
	   "group-1261152904"/"text-tu-trabajo" NO es la insignia -- es un
	   texto fijo duplicado del de particulares que el propio diseño trae
	   oculto en escritorio (confirmado por el usuario: "en escritorio no
	   se repiten"); la insignia real de autónomos es
	   "group-1261152908"/"tu-trabajo-tambi-n" (texto dinámico "Tu trabajo
	   también se mueve con nosotros"), al FINAL de la sección. Se oculta
	   el duplicado y se posiciona el real. */
	.section-aut-nomos-desktop__group-1261152904-desktop-soluciones-de-renting {
		display: none !important;
	}
	.section-particulares-desktop__group-1261152904-desktop-soluciones-de-renting,
	.section-flota-desktop__group-1261152904-desktop-soluciones-de-renting {
		position: absolute !important; top: 132px !important; left: 43px !important;
		width: 251px !important; height: 52px !important; z-index: 2 !important;
	}
	.section-aut-nomos-desktop__group-1261152908-desktop-soluciones-de-renting,
	.section-empresa-desktop__group-1261152904-desktop-soluciones-de-renting,
	.section-flexible-desktop__group-1261152911-desktop-soluciones-de-renting {
		position: absolute !important; top: 132px !important; left: 25px !important;
		width: 251px !important; height: 52px !important; z-index: 2 !important;
	}
	.section-particulares-desktop__text-mas-tiempo-desktop-soluciones-de-renting,
	.section-aut-nomos-desktop__tu-trabajo-tambi-n-desktop-soluciones-de-renting,
	.section-empresa-desktop__image-empresa-desktop-soluciones-de-renting,
	.section-flexible-desktop__image-adaptarse-desktop-soluciones-de-renting,
	.section-flota-desktop__text-eficiencia-desktop-soluciones-de-renting {
		font-size: 0.75rem !important; line-height: 1rem !important; font-weight: 500 !important;
	}
	/* El recuadro de color de la insignia ("container-cesleste-1" y
	   equivalentes) hereda de escritorio un ancho fijo de 276px y un
	   min-height de 92px -- de ahi que sobrara espacio/padding respecto
	   al recuadro real de movil (251x52, mismo dato de Figma que el
	   envoltorio exterior). Se iguala al tamaño real; el padding
	   (16px 14px 16px 13px) ya coincide con escritorio, no se toca. */
	.section-particulares-desktop__container-cesleste-1-desktop-soluciones-de-renting,
	.section-aut-nomos-desktop__container-tu-trabajo-tambi-n-desktop-soluciones-de-renting,
	.section-empresa-desktop__container-tu-empresa-desktop-soluciones-de-renting,
	.section-flexible-desktop__container-adaptarse-desktop-soluciones-de-renting,
	.section-flota-desktop__container-eficiencia-desktop-soluciones-de-renting {
		width: 251px !important; min-height: 52px !important; height: 52px !important;
	}
	/* Bloque de texto bajo la foto: eyebrow 14/20 (600, #0068C9), titulo
	   28/36 (700, #143F70 -- NO 36/44, ese tamaño es solo del hero),
	   descripcion 16/24 (400). gap real de 12px entre eyebrow/titulo/
	   descripcion. */
	[class*="txt-benefits-eyebrow-desktop-soluciones-de-renting"] {
		font-size: 0.875rem !important; line-height: 1.25rem !important; font-weight: 600 !important; color: #0068c9 !important;
	}
	[class*="txt-benefits-heading-desktop-soluciones-de-renting"] {
		font-size: 1.75rem !important; line-height: 2.25rem !important; font-weight: 700 !important; color: #143f70 !important;
	}
	[class*="txt-benefits-description-desktop-soluciones-de-renting"] {
		font-size: 1rem !important; line-height: 1.5rem !important; color: #71808c !important;
		display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden !important;
	}
	[class*="container-benefits-content-desktop-soluciones-de-renting"] {
		display: flex !important; flex-direction: column !important; gap: 0.75rem !important; padding: 0 !important;
	}
	[class*="solicitar-renting-desktop-soluciones-de-renting"] {
		padding: 0.8125rem 1.25rem !important; margin-top: 0.25rem !important;
	}
	/* Boton "Ver más": en Figma el texto real es solo "Ver más", pero el
	   campo de WordPress trae frases largas ("Ver más sobre renting para
	   particulares...") pensadas para el enlace de escritorio -- se
	   recorta visualmente al ancho real medido en Figma (68px) para que
	   solo se vea "Ver más", igual que en el diseño (pedido del usuario:
	   "solo debe poner ver mas y la flecha"). El botón del banner final
	   ("Contacta con nosotros") no entra en esta lista, ese texto sí es
	   completo en el diseño. */
	.section-particulares-desktop__button-desktop-soluciones-de-renting,
	.section-aut-nomos-desktop__button-desktop-soluciones-de-renting,
	.section-empresa-desktop__button-desktop-soluciones-de-renting,
	.section-flexible-desktop__button-desktop-soluciones-de-renting,
	.section-flota-desktop__button-desktop-soluciones-de-renting {
		display: inline-block !important; max-width: 72px !important; overflow: hidden !important;
		white-space: nowrap !important; text-overflow: clip !important;
	}
	[class*="__icon-desktop-soluciones-de-renting"] {
		flex: 0 0 auto !important;
	}
}
/* 03/10/2026 -- BANNER FINAL "¿Necesitas asesoramiento?": en el diseño
   móvil la foto va arriba (293px, a todo lo ancho) y la tarjeta de
   contacto (blanca, con borde) debajo, separadas -- no superpuestas como
   en escritorio (pedido del usuario: "debería ir la imagen arriba y el
   bloque de texto debajo"). La foto sigue siendo el fondo de la propia
   sección (no hay div aparte, igual que en particulares): se limita con
   "background-size" a los primeros 293px y el resto del contenido se
   empuja por debajo con padding-top. */
@media (max-width: 1023px) {
	.section-banner-desktop-soluciones-de-renting {
		background-size: 100% 293px !important; background-position: top center !important;
		background-repeat: no-repeat !important; padding: 18.3125rem 1rem 1rem 1rem !important; gap: 0 !important;
	}
	.section-banner-desktop__container-benefits-content-desktop-soluciones-de-renting {
		display: flex !important; flex-direction: column !important; gap: 1rem !important;
		margin-top: 2rem !important; padding: 1.25rem !important; background-color: #ffffff !important;
		border: 1px solid #d9e2e8 !important; border-radius: 12px !important;
	}
	.section-banner-desktop__txt-benefits-eyebrow-desktop-soluciones-de-renting {
		font-size: 0.875rem !important; line-height: 1.25rem !important; font-weight: 600 !important; color: #0068c9 !important;
	}
	.section-banner-desktop__txt-benefits-heading-desktop-soluciones-de-renting {
		font-size: 1.75rem !important; line-height: 2.25rem !important; font-weight: 700 !important; color: #143f70 !important;
	}
	.section-banner-desktop__txt-benefits-description-desktop-soluciones-de-renting {
		font-size: 1rem !important; line-height: 1.5rem !important; color: #71808c !important;
	}
	.section-banner-desktop__solicitar-renting-desktop-soluciones-de-renting {
		margin-top: 0.25rem !important; padding: 0.8125rem 1.25rem !important;
	}
}

/* ===== Iconos invisibles en móvil por "display:contents" en el propio <img> (01/10/2026) =====
   Encontrado en "renting-particulares" (sección "¿Por qué elegir AUTORENT?":
   4 iconos con src correcto pero 0px de ancho) durante la revisión responsive
   -- confirmado por grep que se repite en MUCHAS mas paginas y secciones
   (renting-empresas, renting-flexible, renting-flotas, error-404, ficha...):
   el motor aplica "display:contents" directamente sobre el <img> al aplanar
   un contenedor en movil, pero un elemento reemplazado (img/video) con
   "display:contents" deja de pintar su contenido por completo -- no es lo
   mismo que en un <div>, donde "display:contents" solo aplana la caja sin
   ocultar nada. No hay NINGUN caso legitimo en todo el sitio donde una imagen
   necesite otro "display" que no sea "block" en movil (comprobado por grep),
   asi que se fuerza de forma global en vez de listar cada clase afectada. */
@media (max-width: 1023px) {
	img { display: block !important; }
}

/* ===== Corrección 02/10/2026: iconos gigantes en móvil (regresión del fix anterior) =====
   El aviso del usuario ("en la ficha del Kia los iconos de eléctrico y automático
   son enormes, en contacto pasa igual") destapó que la regla de arriba (01/10/2026)
   solo corregía "display", pero la MISMA regla de móvil rota que ponía
   "display:contents" en estos <img> TAMBIÉN traía "width:100%;height:auto;
   flex:0 1 auto" -- al quedar visible el icono, hereda el 100% del ancho de su
   contenedor en vez de su tamaño real, y sale gigante.
   El selector anterior (img[class*="icon-line"]) no cubría casi ninguno de estos
   casos porque muchos iconos NO llevan "icon-line" en el nombre de clase (ej. los
   de la ficha de vehículo: "cardoor-icon", "group-1261152885", etc.).
   Confirmado por script contra TODO style.css (no una muestra, y revisado dos
   veces -- ver nota más abajo): 37 iconos en 7 páginas distintas (ficha,
   contacto, coches-renting, error-404, renting-particulares/empresas/
   flexible/flotas) tienen este mismo patrón roto. Cada selector de abajo usa
   el tamaño real que ya tiene en escritorio (22px en la ficha de vehículo,
   24/44/190px en el resto), leído directamente del CSS generado. */
@media (max-width: 1023px) {
	img.section-hero-desktop__cardoor-icon-desktop-ficha,
	img.section-hero-desktop__group-1261152874-desktop-ficha,
	img.section-hero-desktop__group-1261152879-desktop-ficha,
	img.section-hero-desktop__group-1261152885-desktop-ficha {
		width: 22px !important; height: 22px !important; flex: 0 0 22px !important;
	}

	img.section-election-cards-desktop__icon-desktop-3-error-404, img.section-election-cards-desktop__icon-desktop-4-error-404, img.section-equipment-desktop__group-1261152848-desktop-10-ficha, img.section-equipment-desktop__group-1261152848-desktop-11-ficha, img.section-equipment-desktop__group-1261152848-desktop-12-ficha, img.section-equipment-desktop__group-1261152848-desktop-2-ficha, img.section-equipment-desktop__group-1261152848-desktop-3-ficha, img.section-equipment-desktop__group-1261152848-desktop-4-ficha, img.section-equipment-desktop__group-1261152848-desktop-5-ficha, img.section-equipment-desktop__group-1261152848-desktop-6-ficha, img.section-equipment-desktop__group-1261152848-desktop-7-ficha, img.section-equipment-desktop__group-1261152848-desktop-8-ficha, img.section-equipment-desktop__group-1261152848-desktop-9-ficha, img.section-equipment-desktop__group-1261152848-desktop-ficha, img.section-offers-with-filters-desktop__chevron-desktop-3-coches-renting, img.section-renting-benefits-desktop__group-renting-benefits-icon-line-1-desktop-renting-empresas, img.section-renting-benefits-desktop__group-renting-benefits-icon-line-1-desktop-renting-particulares, img.section-renting-benefits-desktop__group-renting-benefits-icon-line-2-desktop-renting-particulares, img.section-renting-benefits-desktop__group-renting-benefits-icon-line-3-desktop-renting-flexible, img.section-renting-benefits-desktop__group-renting-benefits-icon-line-3-desktop-renting-flotas, img.section-renting-benefits-desktop__group-renting-benefits-icon-line-3-desktop-renting-particulares, img.section-renting-benefits-desktop__group-renting-benefits-icon-line-4-desktop-renting-particulares, img.section-renting-benefits-desktop__group-renting-benefits-icon-line-5-desktop-renting-particulares, img.section-why-autorent-desktop__group-why-autorent-icon-line-1-desktop-renting-particulares, img.section-why-autorent-desktop__group-why-autorent-icon-line-2-desktop-renting-particulares, img.section-why-autorent-desktop__group-why-autorent-icon-line-3-desktop-renting-particulares, img.section-why-autorent-desktop__group-why-autorent-icon-line-4-desktop-renting-particulares {
		width: 24px !important; height: 24px !important; flex: 0 0 24px !important;
	}

	/* Encontrados en una segunda pasada (02/10/2026): el primer script de
	   búsqueda exigía que "display:contents" fuera la PRIMERA propiedad de
	   la regla rota, y en estos 5 casos aparece la ÚLTIMA -- por eso no
	   salieron en el primer barrido. Confirmado en vivo en /contacto/: el
	   icono de teléfono salía a pantalla completa (343x375px en vez de
	   44x44px). */
	
	
}

/* ===== Migas de pan del hero se salían por los dos lados en móvil (01/10/2026) =====
   Encontrado en "renting-autonomos" ("Inicio > Soluciones de renting > Renting
   para autónomos"): la fila trae "flex-wrap:nowrap", así que si los 3 enlaces
   no caben en una sola línea a 375px simplemente se salen de la pantalla en
   vez de pasar a una segunda línea. Mismo patrón de clase en quienes-somos y
   las 5 páginas de soluciones de renting (comprobado por grep). */
@media (max-width: 1023px) {
	[class*="cmp-hero-breadcrumb-desktop"] { flex-wrap: wrap !important; row-gap: 0.25rem !important; }
}

/* ===== Blog: el título del hero se solapaba con el subtítulo (01/10/2026) =====
   "page-blog.php" reutiliza a propósito las mismas clases CSS del hero de
   "coches-renting" (decisión ya tomada esta sesión, para heredar su estilo
   sin reconstruirlo). En móvil esa clase trae una altura FIJA de 43px,
   calculada para "Coches de renting" (cabe en una línea) -- pero el texto
   real del blog, "Actualidad y noticias", ocupa DOS líneas y se salía de esa
   caja, montándose sobre el subtítulo de debajo. Altura automática es segura
   para las dos páginas (en coches-renting ya mide justo una línea). */
@media (max-width: 1023px) {
	.section-hero-desktop__txt-hero-heading-desktop-coches-renting { height: auto !important; }
}

/* ===== Contacto: el párrafo del hero se colaba antes del título (01/10/2026) =====
   En el hero de /contacto/ (fila con "order" de flexbox: eyebrow=0,
   título=1, "Estamos aquí para ayudarte"=2), el párrafo "Cuéntanos qué
   necesitas..." no tenía ningún "order" propio en móvil -- se queda en el
   valor por defecto (0), empatado con el eyebrow, así que sale el segundo en
   vez de el último. Se le da order:3 para que quede despues de los otros 3
   textos, como en el diseño. */
@media (max-width: 1023px) {
	
}

/* ===== Corrección 02/10/2026: hero de las páginas "Renting para..." sin =====
   ===== contenido visible en móvil (particulares, autónomos, empresas,   =====
   ===== flotas, flexible)                                                =====
   Aviso del usuario: "en las de renting para particulares, para autonomos
   etc el hero sale sin contenido, solo se ve la foto o nada". Comprobado
   página a página contra el frame móvil real de Figma (API, no capturas
   locales -- estaban cacheadas con el contenido equivocado) y contra el
   HTML/CSS ya generado. Se confirmaron 3 fallos distintos, cada uno en un
   subconjunto de páginas distinto -- no es un único fallo repetido:

   1) particulares: el encabezado (h1) tenía "display:none" heredado de un
      fallo de emparejamiento del motor responsive (el nodo del frame móvil
      no encontró pareja por nombre en el frame de escritorio) y, al no
      tener tampoco un tamaño de móvil propio, se habría quedado al tamaño
      de escritorio (48px) si solo se revertía el "display:none".
   2) autónomos y empresas: el mismo fallo de emparejamiento dejó el
      encabezado con el tamaño EXACTO de una miga de pan
      (font-size:0.75rem;line-height:1rem) en vez de su propio tamaño --
      confirmado que es el mismo valor letra por letra en las dos páginas,
      señal de una mezcla de nodos en el generador, no un valor real de
      Figma. Además la descripción completa (autónomos: 2 párrafos; empresas:
      1 párrafo en dos partes) también quedó oculta, y a autónomos encima se
      le aplicó "flex-direction:row" en vez de "column" en el hero entero
      -- el texto salía en una sola fila horizontal, cortado por el borde
      de la pantalla.
   3) flexible: el bloque ENTERO de texto (migas de pan + título + subtítulo
      + descripción + botón) se quedó oculto sin más, y como esta página (a
      diferencia de las otras 4) no genera una foto específica de móvil, al
      quitarle también el fondo de escritorio el hero se queda totalmente en
      blanco -- el caso "no se ve nada" que describe el usuario.
   Tamaños de texto de móvil confirmados vía API de Figma (nodos reales
   "hero-copy-mobile" de cada página): título 36px/44px, texto de cuerpo
   16px/24px -- igual que ya tenía correctamente la página de "flotas" (la
   única de las 5 sin ningún fallo en el texto), usada aquí como referencia. */
@media (max-width: 1023px) {
	/* -- particulares -- */
	.section-hero-desktop__txt-hero-heading-desktop-renting-particulares {
		display: block !important;
		font-size: 2.25rem !important; line-height: 2.75rem !important; height: auto !important; max-width: 343px !important;
	}

	/* -- autónomos -- */
	/* La regla rota traía "height:auto" (heredado del intento de ponerlo en
	   fila) -- al pasarlo a columna, el hero se queda tan alto como su propio
	   texto y ni un pixel más, así que la foto de fondo (position:absolute,
	   alto:100% del hero) se corta justo donde termina el texto en vez de
	   llenar todo el hero, como sí hacen particulares/empresas/flotas (que ya
	   traían height:539/541px fijo en su propia regla, sin tocar). Mismo
	   valor que usa el frame "hero-mobile" real de autónomos en Figma
	   (539px, comprobado por API). */
	.section-hero-desktop-renting-autonomos { flex-direction: column !important; gap: normal !important; height: 539px !important; }.section-hero-desktop__txt-hero-heading-desktop-renting-autonomos,
	/* -- empresas -- */ .section-hero-desktop__txt-hero-heading-desktop-renting-empresas,
	.section-hero-desktop__txt-hero-heading-desktop-renting-flexible{
		font-size: 2.25rem !important; line-height: 2.75rem !important; max-width: 343px !important; height: auto !important;
	}.section-hero-desktop__txt-hero-custom-renting-description-desktop-renting-autonomos,
	.section-hero-desktop__txt-hero-custom-renting-1-description-desktop-renting-autonomos,
	.section-hero-desktop__txt-hero-custom-renting-description-desktop-renting-empresas,
	.section-hero-desktop__txt-hero-custom-renting-description-desktop-2-renting-empresas{
		display: block !important; height: auto !important;
	}/* Corregido 02/10/2026,
	dos fallos sobre este mismo separador: 1) Yo mismo lo había puesto en "display:block" -- pero está declarado "display:flex" en su propia regla de escritorio (es una fila,
	no un bloque); "block" lo saca del comportamiento de fila flex. 2) LA CAUSA REAL de que la miga de pan saliera desordenada (el usuario: "la miga de pan la tapa el header... esta muy mal"): de las 5 piezas de la miga de pan (item1,
	separador1,
	item2,
	separador2,
	item3) el generador solo numeró "order" en item1(0) y separador1(1) -- item2/separador2/item3 se quedan todos en el "order" por defecto (0),
	empatados con item1,
	así que el único elemento con order:1 (separador1) se va al final de la fila en vez de quedarse entre item1 e item2. Comparado con "flotas" (la única página sin este fallo),
	que sí numera las 5 piezas 0,
	1,
	2,
	3,
	4 -- se completa aquí la misma numeración. Primer intento fallido: puse el "order" en item2/item3,
	pero esos dos son "display:contents" (ya aplanados) -- el "order" no tiene ningún efecto sobre un elemento sin caja propia; hay que ponerlo en el hijo real que queda como flex-item de verdad (el <p> de texto). */ .section-hero-desktop__breadcrumb-separator-desktop-2-renting-autonomos,
	/* Mismo fallo de "order" incompleto que autónomos (ver comentario arriba) -- el "order" va en el <p> de texto real,
	no en el contenedor "display:contents". */ .section-hero-desktop__breadcrumb-separator-desktop-2-renting-empresas{
		display: flex !important; order: 3 !important;
	}.section-hero-desktop__page-desktop-2-renting-autonomos,
	.section-hero-desktop__page-desktop-2-renting-empresas{ order: 2 !important; }.section-hero-desktop__page-desktop-3-renting-autonomos,
	.section-hero-desktop__page-desktop-3-renting-empresas{ order: 4 !important; }

	/* Sección "Encuentra el vehículo que impulsa tu negocio" (autónomos):
	   de las 4 tarjetas, 3 (1ª, 3ª y 4ª) tienen su propio título con
	   "display:none" sin más -- la tarjeta se queda con la foto y el enlace
	   "Ver más" pero SIN el nombre de la categoría ("Turismos de empresa",
	   etc.), confirmado en vivo. La 2ª tarjeta SÍ tiene su ajuste de móvil
	   completo (font-size:1.375rem;max-width:295px) -- comprobado que ninguna
	   otra página (particulares/empresas/flotas/flexible) tiene este fallo,
	   es exclusivo de autónomos. Se iguala aquí al mismo tamaño que ya usa
	   correctamente la 2ª tarjeta. */
	.section-vehicle-finder-desktop__title-desktop-renting-autonomos,
	.section-vehicle-finder-desktop__title-desktop-3-renting-autonomos,
	.section-vehicle-finder-desktop__title-desktop-4-renting-autonomos {
		display: block !important; font-size: 1.375rem !important; line-height: 1.75rem !important; max-width: 295px !important;
	}

	/* -- flexible: sin foto propia de móvil, se reutiliza la misma imagen
	   y degradado que ya usa el escritorio (mismo archivo, sin inventar
	   ningún asset nuevo) -- ruta relativa desde assets/css/ hasta
	   assets/generated/ (comprobado que el fichero existe en esa ruta). */
	.section-hero-desktop__cmp-hero-breadcrumb-desktop-renting-flexible { display: flex !important; }
	.section-hero-desktop__container-hero-titles-desktop-renting-flexible {
		display: contents !important; position: static !important; width: auto !important; height: auto !important; overflow: visible !important;
	}
	.section-hero-desktop-renting-flexible {
		background-image: linear-gradient(90deg, rgba(4, 29, 59, 0.91) 0%, rgba(5, 43, 79, 0.4) 48.56%, rgba(0, 23, 43, 0.06) 100%), url('../generated/p31_2335_5739.png') !important;
		background-size: cover !important; background-position: center !important; background-color: transparent !important;
	}
	.section-hero-desktop__txt-hero-custom-renting-description-desktop-renting-flexible,
	.section-hero-desktop__txt-hero-custom-renting-description-desktop-2-renting-flexible {
		height: auto !important;
	}

	/* -- particulares, autónomos, empresas y flotas SÍ traen su propia foto
	   recortada para móvil, pero el generador la coloca mal en el HTML
	   (metida dentro del propio botón de la ficha) y, al ser
	   "position:absolute" sin z-index, se pinta POR ENCIMA del texto en vez
	   de por detrás -- tapándolo del todo (el otro caso que describe el
	   usuario: "solo se ve la foto"). El hero ya es "position:relative" en
	   escritorio (sin tocar), así que basta con mandar la foto detrás del
	   resto del contenido del propio hero. */
	.hero-portada-mobile__young-couple-car-trip-2-mobile-2-renting-particulares,
	.hero-portada-mobile__female-salesperson-car-showroom-1-1-mobile-2-renting-empresas,
	.group-1261152927-mobile__business-man-buying-car-showroom-1-mobile-2-renting-flotas {
		z-index: -1 !important;
	}

	/* La foto de autónomos, a diferencia de sus 3 hermanas de arriba, ni
	   siquiera tenía "position:absolute" en su propia regla (traía
	   "flex:1 1 0", pensado para un contenedor flex que en la práctica
	   nunca la envuelve, dado el mismo anidado roto dentro del botón) --
	   se queda en 0x0px y no se ve nada, ni con el z-index arreglado. Se
	   iguala aquí al mismo patrón "position:absolute" que ya usan
	   correctamente particulares/empresas/flotas. */
	.hero-autonomos-mobile__medium-shot-man-with-sunglasses-1-mobile-2-renting-autonomos {
		position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: -1 !important;
	}
}

/* ===== Corrección 02/10/2026: barrido sistemático de "cajas aplanadas" en todo el sitio =====
   Tras el aviso del usuario sobre el hero de autónomos ("no solo es el hero,
   hay secciones muy mal más abajo") se dejó de revisar página a página a
   ojo y se escaneó TODO style.css por script buscando el mismo patrón de
   fondo: un elemento que en escritorio es una caja real (tiene
   background-color propio, box-shadow o border-radius -- una tarjeta, un
   acordeón, un botón...) y que en móvil el generador lo deja en
   "display:contents", aplanando esa caja (pierde fondo, sombra, bordes y
   padding, sus hijos quedan sueltos en la fila/columna de su abuelo).
   Resultado del barrido: 57 casos confirmados en 9 páginas. Se excluye a
   propósito la barra de navegación del header (tiene su propio menú móvil
   ya construido y probado aparte -- aplicarle este mismo arreglo mecánico
   podría romperlo). Cada regla de abajo usa el "display"/"flex-direction"
   que la propia clase ya declara en su regla de ESCRITORIO (no un valor
   inventado), así que cada caja vuelve a ser exactamente la caja que el
   propio diseño ya define, solo que ahora también en móvil. Verificado en
   vivo (inyección de CSS) en los acordeones de FAQ y las tarjetas de
   "Encuentra el vehículo" de renting-autonomos antes de escribir esto. */
@media (max-width: 1023px) {
	
	
	
	
	
	
}

/* ===== Corrección 02/10/2026: /coches-renting/ en móvil =====
   Aviso del usuario: "no sale en movil las ofertas como en el diseño. Y
   ademas los filtros en movil van encima del listado de vehiculos... Hay un
   botón Filtros que al pulsar debería desplegar los filtros. Eso no es
   culpa ni tuya ni de la aplicación, es problema de diseño que no lo
   comunicó" -- Figma no incluye ninguna interacción de móvil para el
   formulario de filtros (es un bloque fijo en el lateral, pensado solo para
   escritorio), así que aquí no hay un dato de Figma que copiar: se construye
   el patrón de "botón que despliega un panel" a mano, igual que ya existe en
   este mismo theme para el menú móvil y los acordeones de FAQ. */

/* -- migas de pan: los 2 textos ("Inicio", "Coches de renting") tenían
   "display:none" sin más, dejando solo el separador ">" suelto -- mismo
   patrón ya visto y corregido en otras 6 páginas esta misma sesión. */
@media (max-width: 1023px) {
	.section-offers-with-filters-desktop__breadcrumb-item-desktop-coches-renting,
	.section-offers-with-filters-desktop__breadcrumb-item-desktop-2-coches-renting {
		display: flex !important;
	}
}

/* -- cabecera de "Las mejores ofertas de renting": el título principal y la
   insignia "OFERTAS" tenían "display:none" sin más (confirmado en vivo: el
   texto existe en el HTML pero con 0px de alto), y su contenedor común
   estaba aplanado con "display:contents" -- el barrido sistemático de más
   arriba no lo marcó porque esta caja en concreto no tiene fondo/sombra/
   borde propios (solo es una columna de texto), así que se corrige aparte. */
@media (max-width: 1023px) {
	.section-offers-with-filters-desktop__eyebrow-badge-desktop-coches-renting {
		display: flex !important;
	}
	.section-offers-with-filters-desktop__main-heading-desktop-coches-renting {
		display: block !important;
	}
}

/* -- formulario de filtros: 4 de sus 6 etiquetas ("Filtrar vehículos",
   "Marca", "Combustible", "Transmisión") tenían "display:none" sin más --
   "Tipo de vehículo" y "Cuota mensual" no tenían ningún fallo, por eso se
   veían bien y las otras 4 no. Las opciones de cada grupo (Turismos, SUV,
   Gasolina, Diésel...) nunca estuvieron ocultas, solo los títulos de grupo. */
@media (max-width: 1023px) {
	.section-offers-with-filters-desktop__txt-filter-title-desktop-coches-renting,
	.section-offers-with-filters-desktop__txt-filter-marca-label-desktop-coches-renting,
	.section-offers-with-filters-desktop__txt-filter-combustible-label-desktop-coches-renting,
	.section-offers-with-filters-desktop__txt-filter-transmision-label-desktop-coches-renting {
		display: block !important;
	}
}

/* -- formulario de filtros: 4 bloques ENTEROS con "display:none" sin más --
   el más grave de los cuatro es "filter-actions" (el botón "Ver resultados"
   y el enlace "Limpiar filtros"): sin él, el formulario no se podía ni
   siquiera enviar en móvil. Los otros tres son el grupo "Tipo de vehículo"
   completo (con sus 4 casillas), el rango de "Cuota mensual" y la tarjeta
   "¿Necesitas ayuda?". Confirmado por script contra el propio style.css
   (no una muestra): ninguno de los 4 tiene un valor de "order" ni ninguna
   otra propiedad en su regla de móvil, solo "display:none" -- se restauran
   al mismo "display:flex;flex-direction:column" que ya declaran en
   escritorio. */
@media (max-width: 1023px) {
	.section-offers-with-filters-desktop__filter-group-tipo-desktop-coches-renting,
	.section-offers-with-filters-desktop__filter-group-cuota-desktop-coches-renting,
	.section-offers-with-filters-desktop__filter-actions-desktop-coches-renting {
		display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important;
	}
	.section-offers-with-filters-desktop__help-card-desktop-coches-renting {
		display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important;
		padding: 1rem !important; border-radius: 8px !important; border: 1px solid rgba(217, 226, 232, 1) !important;
		background-image: linear-gradient(180deg, rgba(20, 63, 112, 1) -0%, rgba(11, 31, 44, 1) 100%) !important;
	}
}

/* -- "Las mejores ofertas de renting" (coches-renting): tarjeta "PROMO
   ESPECIAL" + tarjetas de vehículo, convertidas en carrusel horizontal real
   (pedido explícito del usuario: "los vehículos son un carrusel, se ve uno
   y una parte del siguiente" -- no es el folio original de Figma, que las
   apilaba/envolvía). Reutiliza el mismo mecanismo que ya usa la Home
   (".ar-carousel"/"autorent-carousel.js", ver arriba) envolviendo el marcado
   ya existente (".ar-carousel__track"/".ar-carousel__slide" añadidas en
   page-coches-renting.php, 01/10/2026).

   Antes de esto, en móvil, style.css dejaba "card-promo" y
   "card-vehicle-details-vertical-true" en "display:contents" (aplana la
   caja) y de paso les copiaba un padding/fondo de relleno (30px 16px 30px
   16px; #fff) que el exportador repite en TODOS los nodos aplanados de esta
   sección -- un valor sin sentido propio, no un dato real de Figma
   (confirmado: se repite idéntico en decenas de selectores no relacionados
   del mismo bloque). Con "display:contents" la caja desaparece del todo:
   las dos fotos absolutas (rectangle-51/52) pierden su punto de referencia
   y se van fuera de sitio, y la insignia azul deja de tener donde flotar
   -- el efecto "imágenes montadas" y "falta el fondo azul" que reportó el
   usuario. Se restaura la caja real de las dos tarjetas y se anula ese
   padding/fondo de relleno. */
.section-offers-with-filters-desktop__cards-container-desktop-coches-renting {
	flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: visible !important;
	scroll-snap-type: x mandatory !important; scroll-behavior: smooth !important;
	-webkit-overflow-scrolling: touch !important; scrollbar-width: none !important;
}.section-offers-with-filters-desktop__cards-container-desktop-coches-renting::-webkit-scrollbar,
	/* -- 02/10/2026: bloque de OFERTAS oculto a petición del usuario ("vamos a ocultar las ofertas por ahora,
	con un display none,
	vemos cómo queda y seguimos") -- temporal,
	quitar esta regla para volver a mostrarlo. */ .section-offers-with-filters-desktop__offers-row-desktop-coches-renting{
	display: none !important;
}
.section-offers-with-filters-desktop__card-promo-desktop-coches-renting,
.section-offers-with-filters-desktop__card-vehicle-details-vertical-true-desktop-coches-renting {
	scroll-snap-align: start !important; flex-shrink: 0 !important;
}
.ar-offers-carousel .ar-carousel__btn { top: 225px; }
@media (max-width: 1023px) {
	.section-offers-with-filters-desktop__cards-container-desktop-coches-renting {
		display: flex !important; flex-direction: row !important;
		gap: 1rem !important; align-items: stretch !important; width: 100% !important;
		padding: 0 !important; background-color: transparent !important;
	}
	.section-offers-with-filters-desktop__card-promo-desktop-coches-renting {
		display: flex !important; flex-direction: column !important; justify-content: flex-end !important;
		align-items: flex-start !important; position: relative !important; isolation: isolate !important;
		width: 300px !important; height: 300px !important; min-height: 300px !important; max-width: none !important;
		padding: 0 1rem 1.5rem 1rem !important; border-radius: 16px !important; overflow: hidden !important;
		background-color: transparent !important; flex: 0 0 300px !important;
	}
	.section-offers-with-filters-desktop__promo-badge-desktop-coches-renting {
		display: flex !important;
	}
	/* El exportador deja esta foto en display:none sin "!important" y, en la
	   práctica, no siempre se aplica -- se fuerza aquí para que nunca se vea
	   la segunda foto asomando (el efecto "imágenes montadas"). */
	.section-offers-with-filters-desktop__rectangle-52-desktop-coches-renting,
	.section-offers-with-filters-desktop__bottom-gradient-overlay-desktop-coches-renting {
		display: none !important;
	}
	.section-offers-with-filters-desktop__card-vehicle-details-vertical-true-desktop-coches-renting {
		display: flex !important; flex-direction: column !important; align-items: center !important;
		width: 300px !important; min-height: 0 !important; max-width: none !important;
		background-color: #ffffff !important; border-radius: 6px !important; padding: 0 !important;
		position: relative !important; flex: 0 0 300px !important; overflow: hidden !important;
	}
	.section-offers-with-filters-desktop__image-desktop-coches-renting {
		width: 300px !important;
	}
	.ar-offers-carousel .ar-carousel__btn { top: 140px; width: 40px; height: 40px; }
}
@media (max-width: 1023px) {
	.ar-filters-toggle-btn {
		display: flex !important; align-items: center !important; justify-content: space-between !important;
		width: 100% !important; padding: 0.875rem 1rem !important; margin: 0 0 1rem 0 !important;
		background-color: #ffffff !important; border: 1px solid #d9e2e8 !important; border-radius: 8px !important;
		font-family: "Poppins", sans-serif !important; font-weight: 600 !important; font-size: 1rem !important;
		color: #0b1f2c !important; cursor: pointer !important;
	}
	.ar-filters-toggle-btn svg { transition: transform 0.2s ease; flex: 0 0 16px; color: #0068c9; }
	.ar-filters-toggle-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

	/* El selector original repetía el mismo ID como ancestro y descendiente
	   a la vez ("#id #id.clase.ar-filters-open") -- un elemento nunca es
	   descendiente de sí mismo, así que esa regla no coincidía jamás y el
	   panel se quedaba con el "display:contents" de style.css SIN posibilidad
	   de ocultarlo: por eso se veía siempre desplegado, aunque el botón
	   "Filtros" apareciera encima como si fuera a desplegarlo. */
	#ar-filters-panel-coches-renting {
		display: none !important;
	}
	#ar-filters-panel-coches-renting.ar-filters-open {
		display: flex !important; flex-direction: column !important; align-items: flex-start !important;
		gap: 1rem !important; width: 100% !important; margin-bottom: 1.5rem !important;
		padding: 1.5rem 1rem !important; background-color: #eaf5fb !important; border-radius: 8px !important;
	}
}

/* ===== Corrección 02/10/2026 (cont.): /coches-renting/ en móvil -- reorden
   completo pedido por el usuario tras revisar capturas del diseño:
   1) filtros plegados por defecto (arreglado arriba) y el botón "Filtros"
      pasa de estar encima de todo a estar debajo del bloque de ofertas,
      justo bajo el selector "Ordenar por".
   2) "PROMO ESPECIAL" deja de ser una slide más del carrusel (se sacó de
      ".ar-carousel__track" en page-coches-renting.php) y pasa a ser una
      imagen fija encima del carrusel de vehículos en oferta.
   3) el fondo de la tarjeta de ofertas era blanco por el aplanado
      "display:contents" + "background-color:#ffffff" que le metía el
      exportador en móvil; se restaura la tarjeta real azul que ya existe
      en escritorio (".offers-row", fondo #e7fcff con borde azul).
   4) "Todos los coches de renting" tenía "display:none" sin más (su
      contenedor, no el texto) -- se restaura.
   5) "Ordenar por" pasa a ir debajo de ese título (ya es su orden natural
      en el HTML una vez se restaura el contenedor como caja real).
   6) la tarjeta de "Beneficios" tenía order:2 y el paginador order
      implícito 0, así que el paginador (que en el DOM va después) se
      colaba en el grupo de order:0 y aparecía ANTES que Beneficios -- se
      fuerza un orden explícito para todo el bloque y así queda Beneficios
      antes del paginador.
   7) la tarjeta "¿Necesitas ayuda?" vivía dentro del <form> de filtros
      (columna izquierda en escritorio); en page-coches-renting.php se
      sacó del formulario a un bloque aparte (".ar-coches-renting-help")
      justo antes de "Ver todas", y aquí se la reubica con grid SOLO en
      escritorio (sigue debajo de los filtros, visualmente igual que
      antes) y con "order" en móvil (pasa a ir al final, antes del footer). */

/* -- fila "promo + carrusel de ofertas": al sacar la tarjeta PROMO ESPECIAL
   del carrusel (page-coches-renting.php, ya no es una slide más) quedó
   suelta como hermana del carrusel -- sin esta regla, en escritorio se
   apilaba una encima de otra en vez de ir en la misma fila (como estaba
   antes, cuando las dos vivían dentro del mismo carrusel horizontal). Por
   defecto (escritorio) van en fila; en móvil se apilan en columna, igual
   que ya hacía el resto de esta sección. */
.ar-oferta-promo-row {
	display: flex; flex-direction: row; align-items: flex-start; gap: 1.5rem; width: 100%;
}
.ar-oferta-promo-row .ar-carousel {
	flex: 1 1 0; width: auto; min-width: 0;
}
@media (max-width: 1023px) {
	.ar-oferta-promo-row {
		flex-direction: column !important; gap: 1rem !important;
	}
	.ar-oferta-promo-row .ar-carousel {
		flex: 0 0 auto !important; width: 100% !important;
	}
}

/* -- tarjeta de ofertas (eyebrow + título + subtítulo + promo + carrusel):
   se restaura como caja real azul en vez de aplanarse. */
@media (max-width: 1023px) {
	.section-offers-with-filters-desktop__offers-row-desktop-coches-renting {
		display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
		gap: 1rem !important; align-items: center !important;
		padding: 1.25rem 1rem !important; background-color: #e7fcff !important;
		border: 2px solid rgba(7, 134, 251, 1) !important; border-radius: 6px !important;
		align-self: stretch !important; width: 100% !important; max-width: none !important; flex: 0 1 auto !important;
		order: 20 !important;
	}

	/* -- tarjeta "PROMO ESPECIAL": ya no es una slide del carrusel (ver
	   page-coches-renting.php), pasa a ir encima de este como imagen fija
	   a todo el ancho de la columna. */
	.ar-coches-renting-promo.section-offers-with-filters-desktop__card-promo-desktop-coches-renting {
		display: flex !important; flex-direction: column !important; justify-content: flex-end !important;
		align-items: flex-start !important; position: relative !important; isolation: isolate !important;
		width: 100% !important; height: 220px !important; min-height: 220px !important; max-width: none !important;
		padding: 0 1rem 1.5rem 1rem !important; border-radius: 16px !important; overflow: hidden !important;
		background-color: transparent !important; flex: 0 0 auto !important; align-self: stretch !important;
	}

	/* -- título "Todos los coches de renting": el contenedor tenía
	   "display:none" sin más (el texto en sí nunca estuvo oculto, no
	   tenía dónde mostrarse). "Ordenar por" (su hermano en el HTML) ya se
	   mostraba bien, así que al restaurar este contenedor como caja real
	   los dos quedan apilados en su orden natural: título arriba,
	   "Ordenar por" debajo. */
	.section-offers-with-filters-desktop__offers-header-row-desktop-coches-renting {
		display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
		gap: 0.75rem !important; align-items: flex-start !important; align-self: stretch !important;
		width: 100% !important; order: 30 !important;
	}
	.section-offers-with-filters-desktop__container-offers-header-desktop-coches-renting {
		display: block !important; height: auto !important; max-width: none !important; width: 100% !important;
		overflow: visible !important;
	}

	/* -- botón "Filtros" y su panel: pasan de ir encima de todo a ir justo
	   debajo de "Ordenar por", encima del listado de vehículos. */
	.ar-filters-toggle-btn { order: 40 !important; }
	#ar-filters-panel-coches-renting { order: 50 !important; }

	/* -- las 5 tarjetas de vehículo (3 de la fila 1 + 2 de la fila 2)
	   comparten la misma clase -- el "order:0/1/2" que trae style.css
	   corresponde a clases de una versión anterior del maquetado que ya no
	   existen en el HTML actual (quedó huérfano); se fuerza aquí un orden
	   explícito para que queden siempre después de los filtros. */
	.section-offers-with-filters-desktop__card-vehicle-details-vertical-desktop-coches-renting {
		order: 60 !important;
	}

	/* -- "Beneficios" antes del paginador (antes: Beneficios en order:2 y
	   el paginador en order:0 implícito, pero el paginador va DESPUÉS en
	   el HTML -- al estar en grupos de "order" distintos no importaba su
	   posición real en el DOM, y el paginador se colaba delante). */
	.section-offers-with-filters-desktop__container-card-benefits-desktop-coches-renting {
		order: 70 !important;
	}
	.section-offers-with-filters-desktop__cmp-pagination-desktop-coches-renting {
		order: 80 !important;
	}

	/* -- "¿Necesitas ayuda?": ya no vive dentro del formulario de filtros
	   (ver page-coches-renting.php), pasa a ir al final, antes del footer. */
	.ar-coches-renting-help.section-offers-with-filters-desktop__help-card-desktop-coches-renting {
		display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important;
		padding: 1rem !important; border-radius: 8px !important; border: 1px solid rgba(217, 226, 232, 1) !important;
		background-image: linear-gradient(180deg, rgba(20, 63, 112, 1) -0%, rgba(11, 31, 44, 1) 100%) !important;
		width: 100% !important; align-self: stretch !important; order: 90 !important;
	}

	.section-offers-with-filters-desktop__cmp-link-ver-mas-desktop-coches-renting {
		position: static !important; order: 100 !important; align-self: flex-end !important;
		width: auto !important; margin-top: 0.5rem !important;
	}
}

/* -- en escritorio, "¿Necesitas ayuda?" debe seguir viéndose en la misma
   columna izquierda, debajo del formulario de filtros, tal como estaba
   antes de sacarla del <form> en el HTML (ahora vive junto al formulario
   dentro de ".ar-sidebar-col", ver page-coches-renting.php).

   Corrección 02/10/2026 (cont.): un primer intento con CSS grid (filtros
   fila 1, ayuda fila 2, vehículos ocupando "1 / 3") hacía que la fila 2
   se estirase para absorber lo que le sobraba a la columna de vehículos
   (mucho más alta), convirtiendo "¿Necesitas ayuda?" en una columna
   entera -- las filas de un grid se reparten ENTRE columnas, así que no
   hay forma de que filtros+ayuda midan "lo suyo" si comparten fila con
   algo mucho más alto. Con flexbox cada columna crece por su cuenta: la
   de la izquierda (filtros + ayuda, en ".ar-sidebar-col") mide lo que
   ocupe su contenido, sin verse afectada por el alto de la de vehículos. */
@media (min-width: 1024px) {
	.section-offers-with-filters-desktop__container-offers-row-desktop-coches-renting {
		display: flex !important;
		flex-direction: row;
		align-items: flex-start;
		gap: 2.3125rem;
	}
	.ar-sidebar-col {
		display: flex; flex-direction: column; gap: 1.5rem;
		flex: 0 0 280px; width: 280px;
	}
	.section-offers-with-filters-desktop__container-vehicle-cards-desktop-coches-renting {
		flex: 1 1 0; min-width: 0;
	}
	/* -- promo fija encima del carrusel (ya no es una slide, ver
	   page-coches-renting.php): mismo tamaño 300x300 que tenía como slide. */
	.ar-coches-renting-promo.section-offers-with-filters-desktop__card-promo-desktop-coches-renting {
		width: 300px; height: 300px; flex: 0 0 300px;
	}
}
/* -- en móvil ".ar-sidebar-col" no debe formar caja propia: filtros y
   ayuda siguen aplanándose cada uno por su lado para que el "order"
   explícito que ya tienen (ver más abajo) siga posicionándolos por
   separado (botón "Filtros" justo bajo "Ordenar por", ayuda al final). */
@media (max-width: 1023px) {
	.ar-sidebar-col { display: contents; }
}

/* ===== Fotos de vehículo deformadas en todos los listados (02/10/2026) =====
   Aviso del usuario: "las imágenes de los vehículos están deformadas porque
   tienen ancho y alto definido en los estilos [...] Deben ser width:100% y
   height:auto [...] al cambiar eso verás que quedan con diferentes alturas
   [...] poner una altura mínima al contenedor de la imagen".

   Las clases de Figma (".image-desktop-coches-renting", ".image-desktop-3-
   coches-renting", ".image-car-toyota-corolla-desktop-home",
   ".image-desktop-coches-audi" y las 3 de "vehículos similares" de
   page-ficha.php) traen ancho Y alto fijos en píxeles -- si la foto real no
   tiene exactamente esa proporción, se estira o se aplasta para rellenar la
   caja. Afecta a los 4 listados de vehículo del tema: carrusel de ofertas y
   listado completo de /coches-renting/, tarjetas de la Home (y "vehículos
   similares" en la ficha, mismo template-part), listado de /coches-audi/ y
   "otros vehículos" de page-ficha.php.

   La imagen en sí no tenía ningún contenedor propio (iba suelta, hermana del
   bloque de texto) -- se envuelve cada una en un nuevo ".ar-vcard-img-wrap"
   (en los .php correspondientes) que es quien fija la altura mínima; la
   imagen dentro pasa a "width:100%;height:auto" (mantiene su proporción real,
   nunca se deforma) y, si es más baja que esa altura mínima, el contenedor
   la centra -- así el título de debajo siempre empieza a la misma altura en
   toda la fila, se vea la foto que se vea. */
.ar-vcard-img-wrap {
	display: flex !important; align-items: center !important; justify-content: center !important;
	overflow: hidden !important; align-self: stretch !important; width: 100% !important;
	flex-shrink: 0 !important;
}
/* -- 02/10/2026: faltaba anular "align-self: stretch" -- esa propiedad
   venía puesta directamente en la propia imagen por las clases de Figma
   (".image-desktop-coches-audi" y equivalentes, sin relación con esta
   regla, nunca se tocó) y, según la especificación de flexbox,
   "align-self:stretch" ESTIRA el elemento para rellenar el contenedor en
   vez de dejarlo calcular su altura según "height:auto" -- por eso
   "height:auto" aparecía aplicado en el inspector y aun así la imagen
   salía con la altura fija de siempre. Confirmado en vivo con el usuario
   (probó a anular "align-self" a mano y la foto dejó de deformarse). */
.ar-vcard-img-wrap img {
	width: 100% !important; height: auto !important; max-width: 100% !important; display: block !important;
	align-self: auto !important;
}
/* -- /coches-renting/ (carrusel de ofertas + listado) y /coches-audi/:
   180px en las dos (escritorio y móvil, el propio Figma no cambiaba esta
   altura concreta entre breakpoints). */
.ar-vcard-img-wrap--180 { min-height: 180px; }/* -- Home (y "vehículos similares" de la ficha,
	mismo template-part): 220px escritorio,
	228px móvil (valores originales de Figma). */ .ar-vcard-img-wrap--home,
	/* -- "Otros vehículos" de page-ficha.php: 220px escritorio,
	180px móvil. */ .ar-vcard-img-wrap--ficha{ min-height: 220px; }
@media (max-width: 1023px) {
	.ar-vcard-img-wrap--home { min-height: 228px; }
}
@media (max-width: 1023px) {
	.ar-vcard-img-wrap--ficha { min-height: 180px; }
}

/* ===== Página de resultados de búsqueda (02/10/2026) =====
   Aviso del usuario: "No hay nada definido en los estilos pero habría que
   generar una [página] de resultados de búsqueda". Confirmado: search.php,
   template-parts/content-search.php y content-none.php ya traían toda la
   lógica PHP (contador de resultados, categoría de cada resultado,
   paginación...) pero NINGUNA de sus clases tenía una sola regla CSS en
   todo el theme -- ni en style.css ni aquí. No hay ningún dato de Figma que
   copiar (la búsqueda no forma parte del diseño original), así que se
   construye con el mismo lenguaje visual que ya usa el resto del sitio:
   mismos colores (#143f70 títulos, #0068c9 acentos, #71808c/#40515f texto,
   #eaf5fb fondos claros), misma tipografía (Poppins) y el mismo patrón de
   paginación en cuadrados de 40x40px que ya usa /coches-renting/.
   De paso: el icono de la lupa del header (header.php) es solo una imagen
   estática sin enlace ni acción -- hoy no lleva a esta página. Es un fallo
   aparte (falta cablear el icono a un buscador desplegable), no se toca
   aquí porque no es lo que se ha pedido. */

.page-header {
	max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.25rem 1.5rem;
}
.page-title {
	font-family: "Poppins", sans-serif; font-weight: 700; font-size: 2rem; line-height: 2.5rem;
	color: #143f70; margin: 0 0 1.25rem;
}
.searchbox_searc .search-form {
	display: flex; gap: 0.5rem; max-width: 480px;
}
.searchbox_searc .search-field {
	flex: 1 1 auto; min-width: 0; border: 1px solid #d9e2e8; border-radius: 8px;
	padding: 0.75rem 1rem; font: inherit; font-family: "Poppins", sans-serif; font-size: 1rem; color: #0b1f2c;
}
.searchbox_searc .search-field:focus { outline: 2px solid #0068c9; outline-offset: 1px; }
.searchbox_searc .search-submit {
	flex: 0 0 auto; background-color: #0068c9; color: #ffffff; border: 0; border-radius: 8px;
	padding: 0 1.25rem; cursor: pointer; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1rem;
}.searchbox_searc .search-submit:hover,
	.sidebar-area .widget .search-submit:hover,
	.no-results .search-submit:hover,
	#search_container #searchsubmit:hover{ background-color: #00509c; }

.archive-meta-bar { margin-top: 1rem; }
.results_search { font-family: "Poppins", sans-serif; font-size: 0.875rem; color: #71808c; }

.content-grid { display: flex; gap: 2rem; align-items: flex-start; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem 3.75rem; }
.content-area { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.sidebar-area { flex: 0 0 280px; width: 280px; display: flex; flex-direction: column; gap: 1.25rem; }

/* sidebar.php solo llama a dynamic_sidebar('sidebar-1'), así que en una
   búsqueda normal (sin widgets propios configurados) salen los widgets por
   defecto de WordPress tal cual (Buscar, Entradas recientes, Categorías...)
   -- confirmado en vivo, salían como texto plano sin ninguna caja. Mismo
   patrón visual que ".av-sidebar__block" (ya usado en el sidebar del blog),
   aplicado aquí a la envoltura real que genera "register_sidebar()"
   (functions.php: before_widget=".widget", before_title="h2.widget-title"). */
.sidebar-area .widget {
	background-color: #ffffff; border: 1px solid #d9e2e8; border-radius: 12px; padding: 1.25rem;
	box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.0588235); box-sizing: border-box;
}
.sidebar-area .widget li { border-bottom: 1px solid #eaf5fb; padding: 0.625rem 0; font-family: "Poppins", sans-serif; font-size: 0.9375rem; color: #40515f; }
.sidebar-area .widget a { color: #40515f; text-decoration: none; }.sidebar-area .widget .search-submit,
	.no-results .search-submit{ flex: 0 0 auto; background-color: #0068c9; color: #ffffff; border: 0; border-radius: 8px; padding: 0 1rem; cursor: pointer; font-family: "Poppins", sans-serif; font-weight: 600; }

article.result {
	background-color: #ffffff; border: 1px solid #d9e2e8; border-radius: 8px; padding: 1.5rem;
}
article.result .entry-title { margin: 0 0 0.5rem; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.375rem; line-height: 1.75rem; }
article.result .entry-title a { color: #143f70; text-decoration: none; }
article.result .entry-title a:hover { color: #0068c9; text-decoration: underline; }
article.result .entry-meta--category { margin: 0 0 0.75rem; font-family: "Poppins", sans-serif; font-size: 0.8125rem; color: #71808c; }
article.result .entry-summary { font-family: "Poppins", sans-serif; font-size: 0.9375rem; line-height: 1.5rem; color: #40515f; }

.no-results {
	text-align: center; max-width: 480px; margin: 2.5rem auto; padding: 2.5rem 1.5rem;
	background-color: #eaf5fb; border-radius: 8px;
}
.no-results h2 { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.5rem; color: #143f70; margin: 0 0 0.75rem; }
.no-results p { font-family: "Poppins", sans-serif; font-size: 0.9375rem; color: #40515f; margin: 0 0 1.25rem; }
.no-results .search-form { display: flex; gap: 0.5rem; max-width: 360px; margin: 0 auto; }
.no-results .search-field { flex: 1 1 auto; min-width: 0; border: 1px solid #d9e2e8; border-radius: 8px; padding: 0.625rem 0.875rem; font: inherit; font-family: "Poppins", sans-serif; }

.posts-pagination { margin-top: 2rem; }
.pagination-numbers { display: flex; justify-content: center; }
.page-numbers-list { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0.5rem; flex-wrap: wrap; }
.page-numbers-item .page-numbers {
	display: flex; align-items: center; justify-content: center; min-height: 40px; min-width: 40px;
	border-radius: 8px; border: 1px solid #d9e2e8; font-family: "Poppins", sans-serif; font-weight: 600;
	font-size: 0.9375rem; color: #143f70; text-decoration: none; padding: 0 0.5rem; box-sizing: border-box;
}
.page-numbers-item .page-numbers:hover { border-color: #0068c9; color: #0068c9; }
.page-numbers-item .page-numbers.current { background-color: #0068c9; border-color: #0068c9; color: #ffffff; }
.page-numbers-item .page-numbers.dots { border: none; }

@media (max-width: 1023px) {
	.content-grid { flex-direction: column; gap: 1.5rem; padding: 0 1rem 2.5rem; }
	.sidebar-area { width: 100%; flex: 1 1 auto; }
	.page-header { padding: 1.5rem 1rem 1rem; }
	.page-title { font-size: 1.625rem; line-height: 2rem; }
	.searchbox_searc .search-form { max-width: none; }
}

/* ===== Buscador desplegable del header (02/10/2026) =====
   El usuario añadió a mano el formulario junto al icono de la lupa (antes
   era solo una imagen decorativa, sin enlace ni acción). Dos fallos
   funcionales corregidos de paso en header.php, sin los cuales la búsqueda
   nunca habría encontrado nada:
   - action="#" no enviaba a ningún sitio -- ahora va a home_url('/'), que es
     donde WordPress sabe interpretar "?s=..." y mostrar search.php.
   - Traía <input type="hidden" name="post_type" value="product">, residuo
     de una plantilla de WooCommerce -- esta web no tiene ningún contenido
     de tipo "product", así que esa línea habría forzado CERO resultados
     siempre. Eliminada.
   El botón de submit (un icono de fuente de Enfold/Avia que no existe en
   este theme, se habría visto como un cuadrado vacío) se cambió por un SVG
   propio, mismo criterio que el resto de iconos del sitio.
   El icono de la lupa ahora es un <button> de verdad (antes un <img> suelto,
   sin forma de interactuar) que despliega el panel -- mismo patrón de
   "botón con aria-expanded" que ya usan el menú móvil y "Filtros". */
.cmp-header-navbar-desktop__search-toggle {
	display: block; flex: 0 0 24px; width: 24px; height: 24px;
	background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; box-sizing: border-box;
}
.cmp-header-navbar-desktop__search-toggle img { display: block; width: 100%; height: 100%; }
@media (max-width: 1023px) {
	.cmp-header-navbar-desktop__search-toggle { flex: 0 0 20px; width: 20px; height: 20px; }
}

/* Panel: "position:fixed" a propósito -- ".cmp-header-navbar-desktop" (el
   header entero) tiene "overflow:hidden" en su propia regla de escritorio,
   así que cualquier panel en "position:absolute" anidado dentro se
   recortaría al desplegarse. "fixed" escapa de ese recorte sin tocar esa
   regla compartida por todo el header. La posición "top" exacta (justo
   debajo del header, que no es sticky y mide distinto en cada página/ancho)
   se calcula en JS al abrir, no aquí. */
#search_container {
	position: fixed; left: 0; right: 0; top: 0; z-index: 999;
	background-color: #ffffff; box-shadow: 0px 12px 24px -4px rgba(11, 31, 44, 0.18);
	border-bottom: 1px solid #d9e2e8;
	opacity: 0; visibility: hidden; transform: translateY(-16px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
#search_container.is-open {
	opacity: 1; visibility: visible; transform: translateY(0);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}
#search_container form > div {
	max-width: 1200px; margin: 0 auto; padding: 1.5rem 4.375rem;
	display: flex; align-items: center; gap: 0.75rem;
}
#search_container input[type="text"] {
	flex: 1 1 auto; min-width: 0; border: 1px solid #d9e2e8; border-radius: 8px;
	padding: 0.875rem 1.125rem; font-family: "Poppins", sans-serif; font-size: 1.125rem; color: #0b1f2c; box-sizing: border-box;
}
#search_container input[type="text"]:focus { outline: 2px solid #0068c9; outline-offset: 1px; border-color: #0068c9; }
#search_container #searchsubmit {
	flex: 0 0 auto; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
	background-color: #0068c9; color: #ffffff; border: 0; border-radius: 8px; cursor: pointer; padding: 0;
	transition: background-color 0.15s ease;
}
#search_container #search_close {
	flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
	background: transparent; color: #71808c; border: 0; border-radius: 8px; cursor: pointer; padding: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}
#search_container #search_close:hover { background-color: #eaf5fb; color: #0b1f2c; }

@media (max-width: 1023px) {
	#search_container form > div { padding: 1rem; gap: 0.5rem; }
	#search_container input[type="text"] { font-size: 1rem; padding: 0.75rem 0.875rem; }
	#search_container #searchsubmit,
	#search_container #search_close { width: 40px; height: 40px; }
}

/* ===== Corrección 02/10/2026: el formulario real de Contact Form 7 pierde =====
   ===== los estilos del diseño (home y contacto)                           =====
   Al rellenar el campo "Shortcode formulario" (home y contacto), CF7
   sustituye el maquetado de mentira por el formulario real -- pero quien
   construyó ese formulario en CF7 (Contacto > Editar, pestaña "Formulario")
   ya reutilizó a propósito las MISMAS clases del diseño para las cajas que
   envuelven cada campo (confirmado mirando el HTML real: el <input> de CF7
   aparece DENTRO de ".../input-field-desktop-contacto", la misma caja
   blanca con borde y esquinas redondeadas que ya tenía la maqueta). El
   problema no es que falte esa caja -- ya está y ya tiene su estilo -- es
   que el <input>/<textarea>/<select>/<button> REAL de CF7 trae su propio
   aspecto por defecto del navegador por encima, chocando con ella. Se
   vacía el <input> de estilo propio para que se vea A TRAVÉS de la caja
   que ya existe, en vez de reconstruir la caja desde cero.
   Selectores por atributo (no por página) para que sirva igual en home
   (".../formulario-compacto-desktop-home") y en contacto
   (".../formulario-compacto-desktop-contacto") sin duplicar reglas. */
[class*="input-field-desktop"] .wpcf7-form-control,
[class*="rea-de-texto-desktop"] .wpcf7-form-control,
[class*="select-field-desktop"] .wpcf7-form-control {
	display: block; width: 100%; border: 0; background: transparent; padding: 0; margin: 0;
	font-family: "Poppins", sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5rem; color: #0b1f2c;
	outline: none;
}
[class*="rea-de-texto-desktop"] { align-items: stretch !important; }
[class*="rea-de-texto-desktop"] .wpcf7-form-control-wrap,
[class*="rea-de-texto-desktop"] p { display: block; width: 100%; height: 100%; margin: 0; }
[class*="rea-de-texto-desktop"] .wpcf7-form-control { height: 100%; resize: vertical; }
[class*="input-field-desktop"] .wpcf7-form-control-wrap,
[class*="input-field-desktop"] p,
[class*="select-field-desktop"] .wpcf7-form-control-wrap,
[class*="select-field-desktop"] p {
	display: block; width: 100%; margin: 0;
}
[class*="consentimiento-desktop"] .wpcf7-form-control-wrap { display: block; }
[class*="consentimiento-desktop"] label {
	display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
	font-family: "Poppins", sans-serif; font-size: 0.875rem; line-height: 1.25rem; color: #40515f;
}
[class*="consentimiento-desktop"] input[type="checkbox"] {
	width: 20px; height: 20px; flex: 0 0 20px; margin: 0; border-radius: 2px; border: 1px solid #d9e2e8;
	accent-color: #0068c9; cursor: pointer;
}
[class*="enviar-consulta-desktop"] .wpcf7-submit {
	display: block; width: 100%; border: 0; background: transparent; padding: 0; margin: 0;
	font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.5rem; color: #ffffff;
	cursor: pointer; text-align: center;
}
[class*="enviar-consulta-desktop"] .wpcf7-submit { position: absolute; inset: 0; height: auto; line-height: 3rem; }
.wpcf7-response-output { margin: 0.75rem 0 0; border-radius: 8px; }

/* -- contacto: la fila "Nombre y apellidos" + "Teléfono" tenía
   "display:none" sin más en móvil -- exclusivo de esta página (la misma
   fila en home no tiene este fallo). Con el formulario real ya puesto,
   esto ocultaría 2 de los 6 campos del formulario en móvil. */
@media (max-width: 1023px) {
	
}

/* -- contacto, solo escritorio: "Teléfono*" se caía a su propia línea en
   vez de quedar junto a "Nombre y apellidos*". Causa: cada campo mide
   "max-width:48.8%" y el hueco fijo entre los dos es 16px -- en el ancho
   real de la tarjeta, 48.8% + 48.8% + 16px se pasa del 100% disponible por
   menos de 1px (redondeo), así que el navegador los manda a dos líneas.
   Mismo "48.8%" en "Correo electrónico*"/el campo de al lado. Se cambia a
   "calc(50% - 8px)" (la mitad del hueco de 16px restada a cada lado), que
   encaja exacto sea cual sea el ancho, sin depender de redondeos. */
.contact-desktop__nombre-y-apellidos-desktop-contacto,
.contact-desktop__tel-fono-desktop-contacto,
.contact-desktop__correo-electr-nico-desktop-contacto,
.contact-desktop__motivo-de-consulta-desktop-contacto {
	max-width: calc(50% - 8px) !important;
}

/* ===== Corrección 02/10/2026: el hero + formulario de /contacto/ en móvil =====
   ===== estaba genuinamente roto -- aviso directo del usuario tras un      =====
   ===== repaso general ("la de contacto ni siquiera parece responsive")   =====
   style.css trae, para esta misma página, un bloque @media (max-width:1023px)
   más antiguo que el que ya venía corrigiendo hasta ahora, con reglas que
   contradicen entre sí (confirmado comparando qué rumbo GANA de verdad en
   el navegador, no solo leyendo el CSS fuente -- probablemente de una
   regeneración de sección anterior que dejó reglas sueltas). Resultado real
   en el navegador: la tarjeta de "Otras formas de contacto" y la del
   formulario seguían en "position:absolute" (pensado solo para colocarlas
   una al lado de la otra en escritorio, encima de la foto del hero) y
   flotaban superpuestas sobre el resto de la página en vez de apilarse en
   una columna -- esto es lo que se veía como "Bilbao" y los iconos del mapa
   encima del hero. Además, 4 piezas quedaban con "display:none" sin más:
   la cabecera del hero, las migas de pan (que ADEMÁS tenían su propio
   "position:absolute" de escritorio), el área de "Cuéntanos tu consulta" y
   el bloque del checkbox + botón "Enviar consulta". */
@media (max-width: 1023px) {
	
	
	
}

/* -- "Nuestras oficinas": las 4 tarjetas (Bilbao, Burgos, La Rioja, Centro
   de Terminaciones) tienen cada una su propia regla "position:absolute;
   left:Npx" SIN media query -- pensada para colocarlas en 4 columnas una al
   lado de la otra en escritorio, pero se aplica también en móvil. Solo la
   de Bilbao tenía algo de tratamiento de móvil (y aun así seguía flotando
   por encima del hero, que es lo que se veía como "Bilbao" superpuesto);
   Burgos/La Rioja/Centro de Terminaciones directamente tenían
   "display:none" -- 3 de las 4 oficinas no se veían en absoluto. Los 3
   envoltorios (la sección entera, la fila de oficinas y la lista) estaban
   además fijados a 128px de alto y aplanados con "display:contents",
   pensado solo para que cupiera esa única tarjeta absoluta -- se devuelven
   a cajas reales en columna para que las 4 tarjetas se apilen una debajo de
   otra, con su alto real. */
@media (max-width: 1023px) {
	
	
}

/* -- "Otras formas de contacto" (título sobre Llámanos/Whatsapp/Escríbenos/
   Horario) tenía "display:none" sin más -- confirmado comparando contra el
   nodo real de Figma móvil ("otras-formas-de-contacto-mobile"), que sí lo
   incluye visible. */
@media (max-width: 1023px) {
	
}

/* -- misma tarjeta: TODAS las etiquetas ("Llámanos", "Whatsapp",
   "Escríbenos", "Síguenos") y las 3 frases descriptivas bajo cada medio de
   contacto tenían "display:none" sin más -- en móvil solo quedaban los
   valores sueltos (el número de teléfono, el email, el horario) sin
   ningún texto que dijera qué eran. Confirmado contra Figma: el nodo
   "texts-llamanos-mobile" (96px de alto) incluye las 3 líneas, no solo el
   valor. */
@media (max-width: 1023px) {
	
	
	
	
	
	
}


/* 01/10/2026 - Fix global (todas las paginas): el exportador de Figma generaba reglas moviles (max-width:1023px) que ocultan (display:none) contenido real que SI existe en desktop. Restaura el display real de cada elemento solo en movil. */
@media (max-width: 1023px) {.section-hero-desktop__hero-search-links-separator-desktop-home,
	.section-hero-desktop__group-1261152875-desktop-ficha,
	.section-hero-desktop__icon-maletero-desktop-ficha,
	.container-section-trayectoria-desktop-desktop__group-1261152915-desktop-quienes-somos,
	.section-renting-benefits-desktop__group-renting-benefits-icon-line-1-desktop-renting-flexible,
	.section-renting-benefits-desktop__group-renting-benefits-icon-line-2-desktop-renting-flexible,
	.section-renting-benefits-desktop__group-renting-benefits-icon-line-4-desktop-renting-flexible,
	.section-renting-benefits-desktop__group-renting-benefits-icon-line-5-desktop-renting-flexible,
	.section-why-autorent-desktop__group-why-autorent-icon-line-1-desktop-renting-flexible,
	.section-why-autorent-desktop__group-why-autorent-icon-line-2-desktop-renting-flexible,
	.section-why-autorent-desktop__group-why-autorent-icon-line-3-desktop-renting-flexible,
	.section-why-autorent-desktop__group-why-autorent-icon-line-4-desktop-renting-flexible,
	.container-section-faq-desktop__title-desktop-renting-flexible,
	.container-section-faq-desktop__title-desktop-2-renting-flexible,
	.container-section-faq-desktop__title-desktop-3-renting-flexible,
	.container-section-faq-desktop__title-desktop-4-renting-flexible,
	.container-section-faq-desktop__title-desktop-5-renting-flexible,
	.container-section-faq-desktop__title-desktop-6-renting-flexible,
	.container-section-faq-desktop__title-desktop-7-renting-flexible,
	.container-section-faq-desktop__title-desktop-8-renting-flexible,
	.container-section-faq-desktop__title-desktop-9-renting-flexible,
	.container-section-faq-desktop__title-desktop-10-renting-flexible,
	.section-renting-benefits-desktop__group-renting-benefits-icon-line-1-desktop-renting-flotas,
	.section-renting-benefits-desktop__group-renting-benefits-icon-line-2-desktop-renting-flotas,
	.section-renting-benefits-desktop__group-renting-benefits-icon-line-4-desktop-renting-flotas,
	.section-renting-benefits-desktop__group-renting-benefits-icon-line-5-desktop-renting-flotas,
	.section-why-autorent-desktop__group-why-autorent-icon-line-1-desktop-renting-flotas,
	.section-why-autorent-desktop__group-why-autorent-icon-line-2-desktop-renting-flotas,
	.section-why-autorent-desktop__group-why-autorent-icon-line-3-desktop-renting-flotas,
	.section-why-autorent-desktop__group-why-autorent-icon-line-4-desktop-renting-flotas,
	.section-hero-desktop__txt-hero-custom-renting-description-desktop-renting-autonomos,
	.section-hero-desktop__txt-hero-custom-renting-1-description-desktop-renting-autonomos,
	.section-vehicle-finder-desktop__image-desktop-renting-autonomos,
	.section-vehicle-finder-desktop__title-desktop-renting-autonomos,
	.section-vehicle-finder-desktop__image-desktop-3-renting-autonomos,
	.section-vehicle-finder-desktop__title-desktop-3-renting-autonomos,
	.section-vehicle-finder-desktop__icon-desktop-3-renting-autonomos,
	.section-vehicle-finder-desktop__image-desktop-4-renting-autonomos,
	.section-vehicle-finder-desktop__title-desktop-4-renting-autonomos,
	.section-vehicle-finder-desktop__icon-desktop-4-renting-autonomos,
	.section-hero-desktop__txt-hero-custom-renting-description-desktop-renting-empresas,
	.section-hero-desktop__txt-hero-custom-renting-description-desktop-2-renting-empresas,
	.section-renting-benefits-desktop__group-renting-benefits-icon-line-2-desktop-renting-empresas,
	.section-renting-benefits-desktop__group-renting-benefits-icon-line-3-desktop-renting-empresas,
	.section-renting-benefits-desktop__group-renting-benefits-icon-line-4-desktop-renting-empresas,
	.section-renting-benefits-desktop__group-renting-benefits-icon-line-5-desktop-renting-empresas,
	.section-why-autorent-desktop__group-why-autorent-icon-line-1-desktop-renting-empresas,
	.section-why-autorent-desktop__group-why-autorent-icon-line-2-desktop-renting-empresas,
	.section-why-autorent-desktop__group-why-autorent-icon-line-3-desktop-renting-empresas,
	.section-why-autorent-desktop__group-why-autorent-icon-line-4-desktop-renting-empresas,
	.section-hero-desktop__txt-hero-heading-desktop-renting-particulares,
	.section-offers-with-filters-desktop__txt-filter-title-desktop-coches-renting,
	.section-offers-with-filters-desktop__txt-filter-marca-label-desktop-coches-renting,
	.section-offers-with-filters-desktop__txt-filter-combustible-label-desktop-coches-renting,
	.section-offers-with-filters-desktop__box-desktop-5-coches-renting,
	.section-offers-with-filters-desktop__box-desktop-6-coches-renting,
	.section-offers-with-filters-desktop__box-desktop-7-coches-renting,
	.section-offers-with-filters-desktop__txt-filter-transmision-label-desktop-coches-renting,
	.section-offers-with-filters-desktop__circle-desktop-3-coches-renting,
	.section-offers-with-filters-desktop__main-heading-desktop-coches-renting,
	.section-offers-with-filters-desktop__txt-filter-ordenar-label-desktop-coches-renting,
	.section-offers-with-filters-desktop__seleccionar-desktop-2-coches-renting,
	.section-offers-with-filters-desktop__chevron-desktop-2-coches-audi,
	.section-offers-with-filters-desktop__txt-filter-title-desktop-coches-audi,
	.section-offers-with-filters-desktop__txt-filter-marca-label-desktop-coches-audi,
	.section-offers-with-filters-desktop__txt-filter-combustible-label-desktop-coches-audi,
	.section-offers-with-filters-desktop__box-desktop-5-coches-audi,
	.section-offers-with-filters-desktop__box-desktop-7-coches-audi,
	.section-offers-with-filters-desktop__txt-filter-transmision-label-desktop-coches-audi,
	.section-offers-with-filters-desktop__circle-desktop-3-coches-audi,
	.section-portada-desktop__hero-text-container-desktop-error-404,
	.section-election-cards-desktop__main-heading-desktop-error-404,
	.section-election-cards-desktop__subtitle-desktop-error-404,
	.section-election-cards-desktop__image-desktop-error-404,
	.section-election-cards-desktop__title-desktop-error-404,
	.section-election-cards-desktop__description-desktop-error-404,
	.section-election-cards-desktop__link-text-desktop-error-404,
	.section-election-cards-desktop__image-desktop-2-error-404,
	.section-election-cards-desktop__title-desktop-2-error-404,
	.section-election-cards-desktop__description-desktop-2-error-404,
	.section-election-cards-desktop__link-text-desktop-2-error-404,
	.section-election-cards-desktop__image-desktop-3-error-404,
	.section-election-cards-desktop__title-desktop-3-error-404,
	.section-election-cards-desktop__description-desktop-3-error-404,
	.section-election-cards-desktop__link-text-desktop-3-error-404,
	.section-election-cards-desktop__image-desktop-4-error-404,
	.section-election-cards-desktop__title-desktop-4-error-404,
	.section-election-cards-desktop__description-desktop-4-error-404,
	.section-election-cards-desktop__link-text-desktop-4-error-404{ display: block !important; }.group-1261152830-desktop__cmp-card-vehicle-kia-sportage-desktop-home,
	.group-1261152830-desktop__cmp-card-vehicle-volkswagen-t-roc-desktop-home,
	.section-hero-desktop-quienes-somos,
	.map-text-desktop-quienes-somos,
	.container-contrato-y-kil-metros-desktop-preguntas-frecuentes,
	.section-benefits-banner-desktop__container-benefits-content-desktop-preguntas-frecuentes,
	.hero-image-faq-desktop-preguntas-frecuentes,
	.section-hero-desktop__container-hero-titles-desktop-renting-flexible,
	.container-section-faq-desktop__container-faq-header-desktop-renting-flexible,
	.section-included-services-desktop__feature-card-coche-nuevo-desktop-renting-empresas,
	.section-renting-process-desktop__container-renting-process-content-desktop-renting-particulares,
	.container-section-faq-desktop-desktop__section-faq-desktop-renting-particulares,
	.section-offers-with-filters-desktop__filter-group-tipo-desktop-coches-renting,
	.section-offers-with-filters-desktop__filter-group-cuota-desktop-coches-renting,
	.section-offers-with-filters-desktop__filter-actions-desktop-coches-renting,
	.section-offers-with-filters-desktop__help-card-desktop-coches-renting,
	.section-offers-with-filters-desktop__filter-group-tipo-desktop-coches-audi,
	.section-offers-with-filters-desktop__filter-group-cuota-desktop-coches-audi,
	.section-offers-with-filters-desktop__filter-actions-desktop-coches-audi,
	.section-offers-with-filters-desktop__help-card-desktop-coches-audi,
	.section-tipos-vehiculo-desktop__feature-card-mas-espacio-desktop-coches-audi,
	.section-tipos-vehiculo-desktop__feature-card-uso-profesional-desktop-coches-audi,
	.section-tipos-vehiculo-desktop__feature-card-electrico-desktop-coches-audi,
	.section-blog-grid-desktop__container-pagination-desktop-blog,
	.footer-desktop__main-footer-desktop-error-404{ display: flex !important; flex-direction: column !important; }.column-entender-renting-desktop-preguntas-frecuentes,
	.column-renting-o-comprar-desktop-preguntas-frecuentes,
	.container-que-incluye-desktop-preguntas-frecuentes,
	.section-faq-bottom-row-desktop-preguntas-frecuentes,
	.section-hero-desktop__cmp-hero-breadcrumb-desktop-renting-flexible,
	.section-hero-desktop__breadcrumb-separator-desktop-2-renting-autonomos,
	.banner-autonomo-desktop__cmp-renting-process-cta-desktop-renting-autonomos,
	.section-why-autorent-desktop__cmp-why-autorent-cta-desktop-renting-autonomos,
	.section-hero-desktop__breadcrumb-separator-desktop-2-renting-empresas,
	.section-offers-with-filters-desktop__breadcrumb-item-desktop-coches-renting,
	.section-offers-with-filters-desktop__breadcrumb-item-desktop-2-coches-renting,
	.section-offers-with-filters-desktop__chk-electrico-desktop-coches-renting,
	.section-offers-with-filters-desktop__radio-todas-desktop-coches-renting,
	.section-offers-with-filters-desktop__radio-manual-desktop-coches-renting,
	.section-offers-with-filters-desktop__eyebrow-badge-desktop-coches-renting,
	.section-offers-with-filters-desktop__promo-badge-desktop-coches-renting,
	.section-offers-with-filters-desktop__badge-oferta-desktop-coches-renting,
	.section-offers-with-filters-desktop__badge-oferta-desktop-2-coches-renting,
	.section-offers-with-filters-desktop__container-offers-header-desktop-coches-renting,
	.section-offers-with-filters-desktop__cmp-link-ver-mas-desktop-coches-renting,
	.section-offers-with-filters-desktop__breadcrumb-item-desktop-coches-audi,
	.section-offers-with-filters-desktop__breadcrumb-item-desktop-2-coches-audi,
	.section-offers-with-filters-desktop__breadcrumb-item-desktop-3-coches-audi,
	.section-offers-with-filters-desktop__chk-diesel-desktop-coches-audi,
	.section-offers-with-filters-desktop__chk-electrico-desktop-coches-audi,
	.section-offers-with-filters-desktop__radio-todas-desktop-coches-audi,
	.section-offers-with-filters-desktop__radio-manual-desktop-coches-audi,
	.section-offers-with-filters-desktop__container-offers-cards-preview-desktop-coches-audi,
	.section-offers-with-filters-desktop__offers-header-row-desktop-coches-audi,
	.section-offers-with-filters-desktop__cmp-link-ver-mas-desktop-coches-audi,
	.section-gama-audi-desktop__container-gama-content-desktop-coches-audi,
	.section-categories-desktop__container-categories-scroll-desktop-blog,
	.footer-desktop__legal-bar-desktop-error-404{ display: flex !important; flex-direction: row !important; }
}

/* 01/10/2026 - El mapa de oficinas (marcadores con coordenadas fijas de escritorio) se queda oculto a proposito en movil: redisenarlo no entra en este arreglo urgente. */
@media (max-width: 1023px) {
	
}

/* 01/10/2026 - Preguntas frecuentes: filas de 2 columnas con ancho fijo de escritorio (343px+343px) que nunca pasaban a columna en movil, desbordando la pantalla (686px en 375px de ancho). */
@media (max-width: 1023px) {
	.column-entender-renting-desktop-preguntas-frecuentes,
	.column-renting-o-comprar-desktop-preguntas-frecuentes,
	.container-contrato-y-kil-metros-desktop__row-desktop-preguntas-frecuentes,
	.container-que-incluye-desktop-preguntas-frecuentes,
	.section-faq-bottom-row-desktop-preguntas-frecuentes {
		flex-direction: column !important;
		width: 100% !important;
	}
	.column-entender-renting-desktop__info-column-entender-el-renting-desktop-preguntas-frecuentes,
	.column-entender-renting-desktop__accordions-column-entender-el-renting-desktop-preguntas-frecuentes,
	.column-renting-o-comprar-desktop__info-column-renting-o-comprar-desktop-preguntas-frecuentes,
	.column-renting-o-comprar-desktop__accordions-column-renting-o-comprar-desktop-preguntas-frecuentes,
	.container-contrato-y-kil-metros-desktop__info-column-contrato-y-kil-metros-desktop-preguntas-frecuentes,
	.container-contrato-y-kil-metros-desktop__accordions-column-contrato-y-kil-metros-desktop-preguntas-frecuentes,
	.container-que-incluye-desktop__info-column-desktop-preguntas-frecuentes,
	.container-que-incluye-desktop__accordions-column-que-incluye-desktop-preguntas-frecuentes,
	.section-faq-bottom-row-desktop__column-cuando-termina-el-renting-desktop-preguntas-frecuentes,
	.section-faq-bottom-row-desktop__column-segun-tus-necesidades-desktop-preguntas-frecuentes {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;
	}
}

/* 01/10/2026 - Preguntas frecuentes: hero con padding-right:410px fijo de escritorio (hueco para la foto lateral) que nunca se adapto a movil, mas una caja de busqueda con padding:31px 264px fijo (hueco para los dos botones de escritorio) -- entre las dos desbordaban la pantalla el doble de ancho. */
@media (max-width: 1023px) {
	.hero-image-faq-desktop-preguntas-frecuentes {
		padding: 5.8125rem 1rem 2rem 1rem !important;
		height: auto !important;
		min-height: 500px !important;
	}
	.hero-image-faq-desktop-preguntas-frecuentes__container-container-hero-titles-desktop-desktop,
	.hero-image-faq-desktop-preguntas-frecuentes__group-1261152846-desktop,
	.hero-image-faq-desktop-preguntas-frecuentes__txt-hero-eyebrow-desktop,
	.hero-image-faq-desktop-preguntas-frecuentes__txt-hero-heading-desktop,
	.hero-image-faq-desktop-preguntas-frecuentes__txt-hero-offers-description-desktop,
	.hero-image-faq-desktop-preguntas-frecuentes__txt-hero-custom-renting-description-desktop,
	.hero-image-faq-desktop-preguntas-frecuentes__search-bar-faq-desktop {
		width: 100% !important;
		max-width: 100% !important;
	}
	.hero-image-faq-desktop-preguntas-frecuentes__search-bar-faq-desktop {
		flex-wrap: wrap !important;
		padding: 0.75rem !important;
		height: auto !important;
		min-width: 0 !important;
	}
	.hero-image-faq-desktop-preguntas-frecuentes__container-hero-vehicle-search-desktop {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}
}

/* 01/10/2026 - Renting empresas: capa decorativa de fondo (foto + rectangulo) con ancho fijo de escritorio, solo visible detras del contenido (z-index:-1). Se deja oculta en movil (no aporta contenido real, solo desbordaba la pantalla). */
@media (max-width: 1023px) {
	.container-group-1261152911-desktop-desktop__group-1261152911-desktop-renting-empresas { display: none !important; }
}

/* 01/10/2026 - Renting particulares: seccion de preguntas frecuentes con ancho fijo de escritorio (1303px, 2 columnas lado a lado) que nunca paso a una columna en movil. */
@media (max-width: 1023px) {
	.container-section-faq-desktop-desktop__section-faq-desktop-renting-particulares {
		padding: 2rem 1rem !important;
		height: auto !important;
	}
	.container-section-faq-desktop-desktop__container-faq-content-desktop-renting-particulares,
	.container-section-faq-desktop-desktop__container-faq-header-desktop-renting-particulares,
	.container-section-faq-desktop-desktop__txt-faq-heading-desktop-renting-particulares,
	.container-section-faq-desktop-desktop__container-faq-columns-desktop-renting-particulares,
	.container-section-faq-desktop-desktop__container-faq-column-left-desktop-renting-particulares,
	.container-section-faq-desktop-desktop__container-faq-column-right-desktop-renting-particulares,
	.container-section-faq-desktop-desktop__cmp-faq-accordion-desktop-renting-particulares {
		width: 100% !important;
		max-width: 100% !important;
	}
	.container-section-faq-desktop-desktop__container-faq-columns-desktop-renting-particulares {
		flex-direction: column !important;
	}
}

/* 01/10/2026 - Quienes somos: hero con posicion absoluta usando la formula de centrado de escritorio calc((100%-1300px)/2), que en movil da un numero NEGATIVO enorme (-462px) y saca el texto fuera de la pantalla por la izquierda. Mismo patron ya visto en Contacto. */
@media (max-width: 1023px) {
	.section-hero-desktop__container-hero-titles-desktop-quienes-somos {
		position: static !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* 01/10/2026 - Quienes somos: linea de tiempo decorativa (sin texto) y mapa de sedes con pines de escritorio -- mismo patron que el mapa de oficinas de Contacto, se deja oculto en movil. El bloque de texto real (titulo+descripcion) junto al mapa SI se mantiene, solo se le quita el ancho fijo de escritorio. */
@media (max-width: 1023px) {.container-section-trayectoria-desktop-desktop__group-1261152915-desktop-quienes-somos,
	.map-text-desktop__container-frame-1261152939-desktop-desktop-quienes-somos{
		display: none !important;
	}
	.map-text-desktop-quienes-somos {
		height: auto !important;
	}
	.map-text-desktop__container-frame-1261152941-desktop-desktop-quienes-somos {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
	}
	.map-text-desktop__container-frame-1261152941-desktop-desktop-2-quienes-somos,
	.map-text-desktop__container-frame-1261152940-desktop-desktop-quienes-somos,
	.map-text-desktop__container-text-kutxa-desktop-desktop-quienes-somos,
	.map-text-desktop__text-kutxa-desktop-quienes-somos,
	.map-text-desktop__txt-renting-benefits-eyebrow-desktop-quienes-somos,
	.map-text-desktop__txt-renting-benefits-heading-desktop-quienes-somos,
	.map-text-desktop__txt-renting-benefits-description-desktop-4-quienes-somos {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* 01/10/2026 - FIX SISTEMICO SITE-WIDE: busque en style.css (fuente, no solo lo que se ve) todas las reglas con la formula de centrado de escritorio left:calc((100% - Npx) / 2) + position:absolute. En movil esa resta da un numero NEGATIVO enorme (ej. (375-1300)/2 = -462px) y saca el contenido fuera de la pantalla por la izquierda -- bug confirmado primero en Quienes Somos, luego encontrado en 11 sitios mas via grep del CSS fuente: hero de Contacto (twocards), heroes de las 5 paginas renting-*, el bloque de texto de Renting Particulares, y 4 elementos mas en el indice de Soluciones de renting. */
@media (max-width: 1023px) {
	.section-hero-desktop__container-hero-titles-desktop-renting-flexible, .section-hero-desktop__container-hero-titles-desktop-renting-flotas, .section-hero-desktop__container-hero-titles-desktop-renting-autonomos, .section-hero-desktop__container-hero-titles-desktop-renting-empresas, .section-hero-desktop__container-hero-titles-desktop-renting-particulares, .section-renting-process-desktop__container-renting-process-content-desktop-renting-particulares, .section-empresa-desktop__container-group-1261152911-desktop-soluciones-de-renting, .section-flota-desktop__container-group-1261152903-desktop-soluciones-de-renting {
		position: static !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* 01/10/2026 - FALLO CRITICO, SITE-WIDE, NO SOLO MOVIL: el bloque "CTA de banner" (texto + boton "Solicitar llamada/renting") lleva transform:scaleX(-1) de fabrica en style.css, SIN estar dentro de ningun @media -- el texto sale literalmente escrito al reves (en espejo) en TODAS las paginas que usan este componente, en escritorio Y en movil. Encontrado via grep de scaleX(-1) en todo style.css: Home, Ficha, Quienes Somos, Contacto, Preguntas Frecuentes, Soluciones de Renting, Coches Audi. Se quita el transform sin condicion (no solo en movil), porque el problema ya existia tambien en escritorio. */
.section-benefits-banner-desktop-home,
.section-benefits-banner-desktop__txt-benefits-eyebrow-desktop-home,
.section-benefits-banner-desktop__txt-benefits-heading-desktop-home,
.section-benefits-banner-desktop__txt-benefits-description-desktop-home,
.section-benefits-banner-desktop__solicitar-renting-desktop-home,
.section-benefits-desktop__container-benefits-content-desktop-ficha,
.section-benefits-desktop__txt-benefits-eyebrow-desktop-ficha,
.section-benefits-desktop__txt-benefits-heading-desktop-ficha,
.section-benefits-desktop__solicitar-renting-desktop-ficha,
.txt-banner-bottom-desktop__container-benefits-content-desktop-quienes-somos,
.txt-banner-bottom-desktop__txt-benefits-heading-desktop-quienes-somos,
.txt-banner-bottom-desktop__txt-benefits-description-desktop-quienes-somos,
.txt-banner-bottom-desktop__solicitar-renting-desktop-quienes-somos,
.section-benefits-banner-desktop-contacto,
.section-benefits-banner-desktop__txt-benefits-eyebrow-desktop-contacto,
.section-benefits-banner-desktop__txt-benefits-heading-desktop-contacto,
.section-benefits-banner-desktop__txt-benefits-description-desktop-contacto,
.section-benefits-banner-desktop__solicitar-renting-desktop-contacto,
.section-benefits-banner-desktop-preguntas-frecuentes,
.section-benefits-banner-desktop__txt-benefits-eyebrow-desktop-preguntas-frecuentes,
.section-benefits-banner-desktop__txt-benefits-heading-desktop-preguntas-frecuentes,
.section-benefits-banner-desktop__txt-benefits-description-desktop-preguntas-frecuentes,
.section-benefits-banner-desktop__solicitar-renting-desktop-preguntas-frecuentes,
.section-banner-desktop__container-benefits-content-desktop-soluciones-de-renting,
.section-banner-desktop__txt-benefits-eyebrow-desktop-soluciones-de-renting,
.section-banner-desktop__txt-benefits-heading-desktop-soluciones-de-renting,
.section-banner-desktop__txt-benefits-description-desktop-soluciones-de-renting,
.section-banner-desktop__solicitar-renting-desktop-soluciones-de-renting,
.section-benefits-banner-desktop__container-benefits-content-desktop-coches-audi,
.section-benefits-banner-desktop__txt-benefits-eyebrow-desktop-coches-audi,
.section-benefits-banner-desktop__txt-benefits-heading-desktop-coches-audi,
.section-benefits-banner-desktop__txt-benefits-description-subtitle-desktop-coches-audi,
.section-benefits-banner-desktop__txt-benefits-description-text-superior-desktop-coches-audi,
.section-benefits-banner-desktop__txt-benefits-description-text-inferior-desktop-coches-audi,
.section-benefits-banner-desktop__solicitar-renting-desktop-coches-audi {
	transform: none !important;
}


@media (max-width: 639px) {
    
      .cmp-header-navbar-desktop__autorent-logo-desktop {
        height: auto!important;
        width: 55%;
         margin: 0.25rem 0 0.25rem 1rem;
    }  
    .cmp-header-navbar-desktop__search-toggle {
        display:none!important;
    }
    .cmp-header-navbar-desktop__header-contact-bar-desktop {

        padding: 0.75rem 0.5rem 0.75rem 0.5rem;
    }



}

/* 01/10/2026 - CONTACTO: se sustituyen las posiciones absolutas de escritorio (heredadas de Figma)
   por flex de verdad, SIN CONDICION DE ANCHO -- no es un parche solo para movil, es la estructura
   real en todos los tamanios. En escritorio las columnas y tarjetas siguen en fila (mismo aspecto
   que el diseno original, con las mismas medidas: 506px+735px con 52px de hueco para el bloque de
   contacto, 305px+23px de hueco para cada tarjeta de oficina) pero construidas con flex-direction:row,
   no con left/top fijos. El unico @media que queda es para cambiar esa fila a columna en movil. */
.contact-desktop__contacto-light-desktop-contacto {
	display: flex !important;
	flex-direction: column !important;
	position: relative !important;
	height: auto !important;
	gap: 1.5rem !important;
	padding-top: 2.5rem !important;
	padding-bottom: 2.5rem !important;
	padding-left: calc((100% - 1293px) / 2) !important;
	padding-right: calc((100% - 1293px) / 2) !important;
	box-sizing: border-box !important;
}
.contact-desktop__breadcrumbs-desktop-contacto {
	position: static !important;
	order: -1 !important;
}
.contact-desktop__twocards-desktop-contacto {
	position: static !important;
	display: flex !important;
	flex-direction: row !important;
	gap: 3.25rem !important;
	width: 100% !important;
	max-width: 1293px !important;
	height: auto !important;
}
.contact-desktop__imagen-de-contacto-desktop-contacto {
	position: static !important;
	flex: 0 0 506px !important;
	width: 506px !important;
	height: auto !important;
}
.contact-desktop__tarjeta-del-formulario-desktop-contacto {
	position: static !important;
	flex: 1 1 735px !important;
	width: 735px !important;
	height: auto !important;
}
.contact-desktop__formulario-compacto-desktop-contacto {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}
.section-map-desktop__section-header-desktop-contacto {
	position: static !important;
	width: 100% !important;
}
.group-1261152832-desktop__group-1261152831-desktop-contacto {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 1.4375rem !important;
	height: auto !important;
}
.group-1261152832-desktop__section-header-desktop-contacto,
.group-1261152832-desktop__card-office-desktop-contacto,
.group-1261152832-desktop__card-office-desktop-2-contacto,
.group-1261152832-desktop__card-office-desktop-3-contacto,
.group-1261152832-desktop__card-office-desktop-4-contacto {
	position: static !important;
}
/* 04/10/2026 - Contacto: la 4a tarjeta de oficinas ("Centro de
   Terminaciones") venia de un campo de texto enriquecido del admin con el
   HTML entero de la tarjeta a mano -- dificil de editar bien (facil de
   romper las clases, y no habia forma de meter el enlace "Cómo llegar"
   sin escribir HTML a pelo). El HTML que habia quedado guardado usaba
   clases sin el sufijo "-contacto" (ej. "content-desktop-4" en vez de
   "content-desktop-4-contacto"), por eso no cogia el CSS real y salia sin
   borde/sombra/padding. 04/10/2026 (cont.): se cambia de raiz -- el campo
   unico se sustituye por campos normales (empresa, 2 lineas de direccion,
   texto y URL del enlace) en inc/contacto-fields.php, y la plantilla
   (page-contacto.php) ya vuelve a imprimir las clases CON el sufijo
   correcto Y el enlace real (antes no existia en absoluto, ahora es un
   <a> de verdad). Este bloque de aqui (clases SIN sufijo) se deja como
   red de seguridad por si en algun sitio quedase cacheado el HTML viejo,
   pero ya no deberia hacer falta con la plantilla nueva. */
.group-1261152832-desktop__content-desktop-4 {
	box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: nowrap;
	gap: 0.75rem; align-items: flex-start; padding: 1.5rem; flex-shrink: 0; overflow: hidden; align-self: stretch;
}
.group-1261152832-desktop__title-desktop-4 {
	box-sizing: border-box; align-self: stretch; margin: 0; font-family: "Poppins", sans-serif;
	font-weight: 700; font-size: 1.5rem; line-height: 2rem; text-align: left; color: #143f70; max-width: 257px;
}
.group-1261152832-desktop__description-desktop-4 {
	box-sizing: border-box; align-self: stretch; margin: 0; font-family: "Poppins", sans-serif;
	font-weight: 400; font-size: 1rem; line-height: 1.5rem; text-align: left; color: #40515f; max-width: 257px;
}
.group-1261152832-desktop__group-1261152829-desktop-4,
.group-1261152832-desktop__group-1261152830-desktop-4 {
	box-sizing: border-box; height: 1.5rem;
}
.group-1261152832-desktop__contact-row-desktop-7,
.group-1261152832-desktop__contact-row-desktop-8 {
	box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: nowrap;
	gap: 0.5rem; align-items: center; max-width: 100%; overflow: hidden;
}
.group-1261152832-desktop__944-79-30-55-desktop-4,
.group-1261152832-desktop__cotizaciones-auto-rent-biz-desktop-4 {
	box-sizing: border-box; flex: 0 0 auto; margin: 0; font-family: "Poppins", sans-serif;
	font-weight: 400; font-size: 1rem; line-height: 1.5rem; text-align: left; color: #40515f; max-width: 100%;
}
.group-1261152832-desktop__link-desktop-4 {
	box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: nowrap;
	gap: 0.375rem; align-items: center; max-width: 100%;
}
.group-1261152832-desktop__link-text-desktop-4 {
	box-sizing: border-box; flex: 0 0 auto; margin: 0; font-family: "Poppins", sans-serif;
	font-weight: 600; font-size: 0.875rem; line-height: 1.25rem; text-align: left; color: #0068c9; max-width: 100%;
}
@media (max-width: 1023px) {
	.group-1261152832-desktop__content-desktop-4,
	.group-1261152832-desktop__title-desktop-4,
	.group-1261152832-desktop__description-desktop-4 {
		width: 100% !important; max-width: 100% !important; height: auto !important;
	}
}
/* El icono junto a "Cómo llegar" es nuevo (antes esta tarjeta no tenia
   enlace, por tanto tampoco icono) -- no existe en style.css, se añade
   aqui con el mismo tamaño que usan las otras 3 tarjetas. */
.group-1261152832-desktop__icon-desktop-4-contacto {
	box-sizing: border-box; height: 24px; flex: 0 0 24px; width: 24px; display: block;
}
.group-1261152832-desktop__card-office-desktop-contacto,
.group-1261152832-desktop__card-office-desktop-2-contacto,
.group-1261152832-desktop__card-office-desktop-3-contacto,
.group-1261152832-desktop__card-office-desktop-4-contacto {
	flex: 0 0 305px !important;
	width: 305px !important;
}.group-1261152832-desktop__section-location-desktop-contacto,
	.section-map-desktop__map-section-desktop-contacto{
	padding-left: calc((100% - 1293px) / 2) !important;
	padding-right: calc((100% - 1293px) / 2) !important;
	box-sizing: border-box !important;
}
.section-benefits-banner-desktop-contacto {
	transform: none !important;
}

/* 01/10/2026 - CONTACTO movil: lo unico que cambia por debajo de 1024px es la direccion (fila -> columna)
   y los anchos fijos de escritorio -> 100%. El halo decorativo se oculta (no aporta contenido real); el
   mapa de oficinas mantiene su titulo/subtitulo pero oculta los 3 pines (grafico de mapa, no texto). */
@media (max-width: 1023px) {
	.contact-desktop__contacto-light-desktop-contacto {
		gap: 1.5rem !important;
		padding: 2rem 1rem !important;
	}.contact-desktop__halo-secundario-desktop-contacto,
	.section-map-desktop__marker-bilbao-desktop-contacto,
	.section-map-desktop__marker-burgos-desktop-contacto,
	.section-map-desktop__marker-logrono-desktop-contacto{
		display: none !important;
	}
	.contact-desktop__twocards-desktop-contacto {
		flex-direction: column !important;
		gap: 1.5rem !important;
		max-width: 100% !important;
	}
	.contact-desktop__imagen-de-contacto-desktop-contacto,
	.contact-desktop__tarjeta-del-formulario-desktop-contacto {
		flex: 1 1 auto !important;
		width: 100% !important;
	}
	.contact-desktop__tarjeta-del-formulario-desktop-contacto {
		padding: 1.5rem !important;
	}.contact-desktop__rectangle-llamanos-desktop-contacto,
	.contact-desktop__rectangle-whatsapp-desktop-contacto,
	.contact-desktop__rectangle-escribenos-desktop-contacto,
	.contact-desktop__rectangle-horarios-desktop-contacto,
	.section-hero-desktop__container-hero-titles-desktop-contacto{
		width: 100% !important;
	}

	.section-map-desktop__map-section-desktop-contacto {
		display: flex !important;
		flex-direction: column !important;
		gap: 1rem !important;
		height: auto !important;
		padding: 2rem 1rem !important;
		background-image: none !important;
	}
	.section-map-desktop__main-heading-desktop-contacto,
	.section-map-desktop__subtitle-desktop-contacto {
		width: 100% !important;
		max-width: 100% !important;
	}

	.group-1261152832-desktop__section-location-desktop-contacto {
		display: flex !important;
		flex-direction: column !important;
		gap: 1rem !important;
		height: auto !important;
		width: 100% !important;
		padding: 2rem 1rem !important;
	}
	.group-1261152832-desktop__group-1261152831-desktop-contacto {
		flex-direction: column !important;
	}
	.group-1261152832-desktop__card-office-desktop-contacto,
	.group-1261152832-desktop__card-office-desktop-2-contacto,
	.group-1261152832-desktop__card-office-desktop-3-contacto,
	.group-1261152832-desktop__card-office-desktop-4-contacto,
	.group-1261152832-desktop__main-heading-desktop-contacto,
	.group-1261152832-desktop__subtitle-desktop-contacto {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	.section-benefits-banner-desktop-contacto {
		padding: 2rem 1rem !important;
		height: auto !important;
	}
	.section-benefits-banner-desktop__container-benefits-content-desktop-contacto {
		width: 100% !important;
		align-items: flex-start !important;
	}
}

/* 01/10/2026 - FIX SITE-WIDE del hero (texto demasiado grande y pegado a los bordes en movil):
   solo Home y Renting de flotas tenian el tamanio de letra y el padding correctos para movil en
   style.css -- Contacto, Quienes Somos, Preguntas Frecuentes (hero distinto, ya arreglado aparte) y
   los Renting Flexible/Autonomos/Empresas/Particulares o bien no tenian ninguna regla movil (heredaban
   el tamanio completo de escritorio) o tenian una rota (font-size:12px, o directamente display:none).
   Se copian aqui los valores exactos que ya funcionan bien en Home: padding:24px 16px en la seccion,
   36px/44px para el titulo, 22px/28px para el subtitulo, max-width:343px en todo el texto. */
@media (max-width: 1023px) {
	.section-hero-desktop-contacto,
	.section-hero-desktop-quienes-somos,
	.section-hero-desktop-renting-flexible,
	.section-hero-desktop-renting-flotas,
	.section-hero-desktop-renting-autonomos,
	.section-hero-desktop-renting-empresas,
	.section-hero-desktop-renting-particulares {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		display: flex !important;
		padding: 1.5rem 1rem !important;
		height: auto !important;
	}
	.section-hero-desktop__txt-hero-heading-desktop-contacto,
	.section-hero-desktop__txt-hero-heading-desktop-quienes-somos,
	.section-hero-desktop__txt-hero-heading-desktop-renting-flexible,
	.section-hero-desktop__txt-hero-heading-desktop-renting-autonomos,
	.section-hero-desktop__txt-hero-heading-desktop-renting-empresas,
	.section-hero-desktop__txt-hero-heading-desktop-renting-particulares {
		display: block !important;
		font-weight: 700 !important;
		font-size: 2.25rem !important;
		line-height: 2.75rem !important;
		max-width: 343px !important;
		height: auto !important;
		white-space: normal !important;
	}
	.section-hero-desktop__txt-hero-custom-renting-description-desktop-contacto,
	.section-hero-desktop__txt-hero-custom-renting-description-desktop-quienes-somos,
	.section-hero-desktop__txt-hero-custom-renting-description-desktop-renting-flexible,
	.section-hero-desktop__txt-hero-custom-renting-description-desktop-renting-autonomos,
	.section-hero-desktop__txt-hero-custom-renting-description-desktop-renting-empresas,
	.section-hero-desktop__txt-hero-custom-renting-description-desktop-renting-particulares {
		display: block !important;
		max-width: 343px !important;
		height: auto !important;
	}
	.section-hero-desktop__txt-hero-eyebrow-desktop-contacto {
		max-width: 343px !important;
	}
	.section-hero-desktop__txt-hero-offers-description-desktop-contacto {
		font-size: 1.375rem !important;
		line-height: 1.75rem !important;
		max-width: 343px !important;
	}
}

/* 01/10/2026 - FALLO DE MARQUETADO (no de CSS): en Renting Empresas/Autonomos/Particulares, el
   generador coloco por error la imagen de fondo del hero movil (<tm-bp>...) DENTRO del enlace del
   boton "Solicitar informacion" en el propio HTML (page-renting-*.php) -- el boton media 541px de
   alto (el tamanio de toda la foto) en vez de los 48px de un boton normal, y perdia su caja azul.
   Se ha movido esa imagen fuera del boton en el PHP (ya no es hijo suyo). El CSS de movil para ese
   boton tambien estaba roto (display:contents, fondo transparente, sin bordes) -- seguramente
   generado automaticamente a partir del propio boton ya roto -- se revierte aqui a los valores
   reales de escritorio (fondo azul, texto centrado, bordes redondeados), igual que ya tenia bien
   Renting de Flotas (la unica pagina de esta familia que no tenia el fallo de maquetado). */
@media (max-width: 1023px) {
	.section-hero-desktop__cmp-hero-primary-button-desktop-renting-empresas,
	.section-hero-desktop__cmp-hero-primary-button-desktop-renting-autonomos,
	.section-hero-desktop__button-desktop-renting-empresas,
	.section-hero-desktop__button-desktop-renting-autonomos,
	.section-hero-desktop__button-desktop-renting-particulares {
		color: #ffffff !important;
	}
}" a todo el ancho -- el fix global del
      01/10/2026 (más arriba en este archivo) solo restauró el "display" que
      el exportador había puesto a "none" copiando la dirección de escritorio
      (fila), lo que aprieta el título junto al selector en vez de apilarlos.
   3) "Ordenar por" debajo del título.
   4) botón "Filtros" debajo de "Ordenar por": esta plantilla no lo tenía (a
      diferencia de /coches-renting/, que ya usa este mismo patrón de botón
      que despliega un panel -- ver más arriba, "botón Filtros: nuevo, solo
      existe en móvil"); el selector de marca quedaba suelto y siempre visible. */
@media (max-width: 1023px) {
	.section-offers-with-filters-desktop__container-offers-intro-content-desktop-coches-audi {
		order: 10 !important;
	}
	.section-offers-with-filters-desktop__offers-header-row-desktop-coches-audi {
		display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
		gap: 0.75rem !important; align-items: flex-start !important; align-self: stretch !important;
		width: 100% !important; order: 20 !important;
	}
	.section-offers-with-filters-desktop__container-offers-header-desktop-coches-audi {
		display: block !important; height: auto !important; max-width: none !important; width: 100% !important;
		overflow: visible !important;
	}
	.section-offers-with-filters-desktop__container-ordenar-por-desktop-coches-audi {
		width: 100% !important;
	}

	#ar-filters-panel-coches-audi {
		display: none !important;
	}
	#ar-filters-panel-coches-audi.ar-filters-open {
		display: flex !important; flex-direction: column !important; align-items: flex-start !important;
		gap: 1rem !important; width: 100% !important; margin-bottom: 1.5rem !important;
		padding: 1.5rem 1rem !important; background-color: #eaf5fb !important; border-radius: 8px !important;
	}
	/* el botón reutiliza ".ar-filters-toggle-btn { order: 40 !important; }"
	   ya definido más arriba para /coches-renting/ (misma clase global, nunca
	   coinciden las dos plantillas en la misma página). */
	#ar-filters-panel-coches-audi { order: 45 !important; }

	/* el listado y la paginación traían "order:0/1/2" de una versión anterior
	   del maquetado (ver mismo comentario para /coches-renting/ más arriba),
	   así que sin esto se colaban antes del título. */
	.section-offers-with-filters-desktop__cards-row-1-desktop-coches-audi {
		order: 50 !important;
	}
	.section-offers-with-filters-desktop__cmp-pagination-desktop-coches-audi {
		order: 60 !important;
	}
}" se superponía con la siguiente
      sección: la sección entera colapsaba a "1px de ancho / 421px de
      alto" en el CSS de móvil del exportador (pensado para quedar oculta
      del todo), pero el mismo fix global del 01/10/2026 restauró el
      "display" de su contenido sin restaurar el tamaño de la caja que lo
      envuelve -- el texto real desborda esa caja minúscula. Se
      reconstruye como caja real a todo el ancho (mismo patrón que ya
      usan "Configura tu renting" y "¿Qué puede incluir la cuota?").
   4) En el bloque final ("¿No encuentras el X que buscas?" + botón
      "Solicitar información") varios textos tenían una ALTURA FIJA en
      píxeles en vez de "auto" (calculada por el exportador para el texto
      de ejemplo de Audi); con un texto real más largo (caso de BMW) el
      texto desborda su caja y se superpone con el botón y con el texto
      siguiente. Se fuerza "height:auto" en todos. */
@media (max-width: 1023px) {/* -- 1) hueco bajo "Renting,
	/* -- 3) "Conoce la gama{marca}" -- */ .section-offers-with-filters-desktop__container-offers-cards-preview-desktop-coches-audi,
	/* -- caja vacía ("Ver más",
	sin contenido) con position:absolute de escritorio (left:1163px) nunca reseteada en móvil: el fix global del 01/10/2026 también la restauró,
	y al no resetear esa posición provoca scroll horizontal en TODA la página. */ .section-offers-with-filters-desktop__cmp-link-ver-mas-desktop-coches-audi{
		display: none !important;
	}
	.section-offers-with-filters-desktop__container-offers-intro-content-desktop-coches-audi {
		min-height: auto !important;
	}.section-offers-with-filters-desktop__txt-offers-intro-heading-desktop-coches-audi,
	/* -- 4) CTA final: alturas fijas -> auto -- */ .section-benefits-banner-desktop__txt-benefits-heading-desktop-coches-audi,
	.section-benefits-banner-desktop__txt-benefits-description-subtitle-desktop-coches-audi,
	.section-benefits-banner-desktop__txt-benefits-description-text-superior-desktop-coches-audi{
		height: auto !important;
	}

	/* -- 2) hueco bajo "Ordenar por" -- */
	.section-offers-with-filters-desktop__container-ordenar-por-desktop-coches-audi {
		flex: 0 0 auto !important;
	}": reconstruida como caja real, texto
	   encima de la imagen (igual que "Configura tu renting"). -- */
	.section-gama-audi-desktop-coches-audi {
		height: auto !important; width: auto !important; min-width: 0 !important;
		padding: 2rem 1rem !important; background-color: #eaf5fb !important;
		overflow: visible !important; align-self: stretch !important;
	}
	.section-gama-audi-desktop__container-gama-content-desktop-coches-audi {
		display: flex !important; flex-direction: column !important; gap: 1.25rem !important;
		align-items: flex-start !important; width: 100% !important;
	}.section-gama-audi-desktop__container-gama-text-desktop-coches-audi,
	.section-motorizaciones-desktop__txt-motorizaciones-heading-desktop-coches-audi,
	.section-motorizaciones-desktop__txt-motorizaciones-description-1-desktop-coches-audi{
		max-width: none !important; width: 100% !important;
	}
	.section-gama-audi-desktop__txt-equipment-heading-desktop-coches-audi {
		height: auto !important; font-size: 1.75rem !important; line-height: 2.25rem !important;
	}
	.section-gama-audi-desktop__txt-gama-description-1-desktop-coches-audi,
	.section-gama-audi-desktop__txt-gama-description-2-desktop-coches-audi,
	.section-gama-audi-desktop__txt-gama-description-3-desktop-coches-audi,
	.section-gama-audi-desktop__txt-gama-description-4-desktop-coches-audi {
		height: auto !important; font-size: 1.125rem !important; line-height: 1.625rem !important;
	}
	.section-gama-audi-desktop__image-gama-audi-desktop-coches-audi {
		width: 100% !important; height: auto !important; flex: 0 0 auto !important; aspect-ratio: 434 / 421;
	}

	/* -- 5) "Motorizaciones disponibles en los X de renting": igual que
	   "Conoce la gama" (caso 3), pero aquí es la SECCIÓN la que se queda en
	   "flex-direction:row" de escritorio sin resetear en móvil. Su
	   contenedor de texto pasa a "display:contents" (igual que en "Conoce
	   la gama"), así que el titular, la descripción y la imagen acaban
	   los 3 en la misma fila sobre un móvil de ~343px de ancho y se
	   superponen entre sí (reportado por el usuario con captura). */
	.section-motorizaciones-desktop-coches-audi {
		flex-direction: column !important; align-items: flex-start !important;
	}
	.section-motorizaciones-desktop__image-motorizaciones-desktop-coches-audi {
		width: 100% !important; height: auto !important; flex: 0 0 auto !important; aspect-ratio: 343 / 344;
	}
}

/* ===== 02/10/2026: "Preguntas frecuentes" en las 5 páginas hijas de
   "Soluciones de renting" (renting flexible/empresas/particulares/
   autónomos/flotas) -- reportado por el usuario con captura en
   ESCRITORIO: el botón "Ver todas" aparecía flotando junto al título en
   vez de debajo de las preguntas, y el pie de página se veía solapado.

   Causa: el exportador de Figma metió el contenido real del FAQ
   (cabecera + las dos columnas de preguntas) en un div con
   "position:absolute" y una ALTURA FIJA (708px/701px según la página) en
   vez de dejarlo en el flujo normal, con "z-index:-1" (pensado para que
   quedara detrás, no para esconder un desbordamiento). El botón
   "Ver todas", que SÍ está en el flujo normal, se coloca con
   "justify-content:flex-end" dentro de esa misma caja de 708px -- así
   que si las preguntas reales (hasta 10 por página) ocupan más de esa
   altura, se salen de la caja (sin arrastrar su alto) y el botón se
   queda flotando a mitad del bloque en vez de ir debajo, montándose
   sobre el pie de página. Solo pasaba en escritorio: en móvil el
   exportador sí lo dejaba en flujo normal.

   Se devuelve el contenido al flujo normal. Al hacerlo queda sujeto al
   padding horizontal fijo de 544px de la sección (pensado solo para el
   botón, ya que el contenido antes lo ignoraba al ser absoluto), así que
   se compensa con márgenes negativos. De paso, cada pregunta tenía un
   ancho fijo de 625px (dos columnas = 1250px+ huecos, no caben por
   debajo de ~1320px de ventana) -- se vuelven flexibles para que no se
   corten en portátiles de pantalla más pequeña.

   Verificado con una reproducción local (Playwright, texto largo y 10
   preguntas) en varios anchos de escritorio (1024 a 1920px): sin
   solapamientos, sin desbordamiento horizontal, botón en la misma
   posición y tamaño que ya tenía (solo cambia de altura). Móvil no se
   toca (la regla exige "min-width:1024px"). */
@media (min-width: 1024px) {
	.container-section-faq-desktop-renting-flexible,
	.container-section-faq-desktop-renting-autonomos,
	.container-section-faq-desktop-renting-flotas,
	.container-section-faq-desktop-desktop-renting-empresas,
	.container-section-faq-desktop-desktop-renting-particulares {
		height: auto !important;
		/* los 544px fijos no son el ancho de contenido que usa el resto de
		   la página (p.ej. la sección "¿Por qué elegir AUTORENT...?" justo
		   encima, que SÍ usa este cálculo) -- por eso el bloque quedaba
		   desplazado a la izquierda respecto al resto del contenido
		   (reportado por el usuario tras el primer arreglo). */
		padding-left: calc((100% - 1300px) / 2) !important;
		padding-right: calc((100% - 1300px) / 2) !important;
	}
	.container-section-faq-desktop__section-faq-desktop-renting-flexible,
	.container-section-faq-desktop__section-faq-desktop-renting-autonomos,
	.container-section-faq-desktop__section-faq-desktop-renting-flotas,
	.container-section-faq-desktop-desktop__section-faq-desktop-renting-empresas,
	.container-section-faq-desktop-desktop__section-faq-desktop-renting-particulares {
		position: static !important; height: auto !important; z-index: auto !important;
		margin-left: 0 !important; margin-right: 0 !important; width: 100% !important;
		/* este padding propio (max(69px, calc(...))) estaba pensado para
		   autocentrarse dentro de los 1440px fijos de ancho que tenía antes
		   -- ahora que el ancho ya lo centra la sección (arriba), sobra y
		   desplazaba el texto 69px más a la derecha que el resto de la
		   página. */
		padding-left: 0 !important; padding-right: 0 !important;
	}
	.container-section-faq-desktop__container-faq-content-desktop-renting-flexible,
	.container-section-faq-desktop__container-faq-content-desktop-renting-autonomos,
	.container-section-faq-desktop__container-faq-content-desktop-renting-flotas,
	.container-section-faq-desktop-desktop__container-faq-content-desktop-renting-empresas,
	.container-section-faq-desktop-desktop__container-faq-content-desktop-renting-particulares {
		width: 100% !important; max-width: 1303px !important; flex-shrink: 1 !important;
	}

	/* cada pregunta tiene un ancho fijo de 625px; se usan selectores por
	   subcadena porque algunas páginas generan la clase numerada (-2,
	   -3...) por cada pregunta vía PHP en vez de reutilizar siempre la
	   misma. */
	[class*="cmp-faq-accordion"][class*="-renting-flexible"],
	[class*="cmp-faq-accordion"][class*="-renting-autonomos"],
	[class*="cmp-faq-accordion"][class*="-renting-flotas"],
	[class*="cmp-faq-accordion"][class*="-renting-empresas"],
	[class*="cmp-faq-accordion"][class*="-renting-particulares"] {
		width: 100% !important; max-width: none !important;
	}
	.container-section-faq-desktop__container-faq-column-left-desktop-renting-flexible,
	.container-section-faq-desktop__container-faq-column-right-desktop-renting-flexible,
	.container-section-faq-desktop__container-faq-column-left-desktop-renting-autonomos,
	.container-section-faq-desktop__container-faq-column-right-desktop-renting-autonomos,
	.container-section-faq-desktop__container-faq-column-left-desktop-renting-flotas,
	.container-section-faq-desktop__container-faq-column-right-desktop-renting-flotas,
	.container-section-faq-desktop-desktop__container-faq-column-left-desktop-renting-empresas,
	.container-section-faq-desktop-desktop__container-faq-column-right-desktop-renting-empresas,
	.container-section-faq-desktop-desktop__container-faq-column-left-desktop-renting-particulares,
	.container-section-faq-desktop-desktop__container-faq-column-right-desktop-renting-particulares {
		flex: 1 1 0 !important; min-width: 0 !important;
	}

	/* el hueco entre columnas venía de "justify-content:space-between"
	   sobre el espacio que SOBRABA entre dos columnas de ancho fijo
	   (625px); al volverlas flexibles (arriba) para que no desborden,
	   crecen para ocupar TODO el ancho entre las dos y no queda espacio
	   libre que repartir -- se añade un hueco explícito en su lugar. */
	.container-section-faq-desktop__container-faq-columns-desktop-renting-flexible,
	.container-section-faq-desktop__container-faq-columns-desktop-renting-autonomos,
	.container-section-faq-desktop__container-faq-columns-desktop-renting-flotas,
	.container-section-faq-desktop-desktop__container-faq-columns-desktop-renting-empresas,
	.container-section-faq-desktop-desktop__container-faq-columns-desktop-renting-particulares {
		gap: 2.5rem !important;
	}
}

/* ===== 03/10/2026 -- FIX SISTEMICO "pantallas intermedias" (tablets grandes,
   portátiles, 1024px-1340px aprox.) =====
   Pedido del usuario tras comparar en desarrollo.irudigital.com: al reducir
   la ventana entre el breakpoint móvil (1023px) y el ancho de diseño de
   escritorio (1300px de contenido + centrado), el texto se corta por la
   izquierda en varias secciones (confirmado con captura real a 1100px:
   "che, mplicaciones" en vez de "Tu coche, sin complicaciones"). Causa:
   "position:absolute; left:calc((100% - 1300px) / 2)" sin límite mínimo --
   en cuanto el ancho de ventana baja de 1300px esa resta se vuelve
   NEGATIVA (ej. a 1100px: (1100-1300)/2 = -100px) y el bloque se posiciona
   fuera de pantalla por la izquierda, con su propio ancho fijo (545px,
   563px...) por lo que el texto que SÍ queda visible aparece cortado a
   mitad de palabra en vez de ajustar línea. El propio exportador de Figma
   YA resuelve esto correctamente en 26 sitios del style.css con
   "max(Npx, calc(...))" (nunca deja que la resta baje de un mínimo) -- aquí
   se aplica el mismo patrón a los 17 sitios donde faltaba, confirmados
   grep-eando "calc((100% - 1300px) / 2)" sin "max(" en style.css. No toca
   nada en escritorio real (>=1332px, donde el cálculo ya da >=16px de
   por sí) ni en móvil (ese breakpoint ya tiene su propio fix aparte). */
@media (min-width: 1024px) {
	.section-hero-desktop__container-hero-titles-desktop-quienes-somos,
	.section-hero-desktop__container-hero-titles-desktop-renting-flexible,
	.section-hero-desktop__container-hero-titles-desktop-renting-flotas,
	.section-hero-desktop__container-hero-titles-desktop-renting-autonomos,
	.section-hero-desktop__container-hero-titles-desktop-renting-empresas,
	.section-hero-desktop__container-hero-titles-desktop-renting-particulares,
	.section-renting-process-desktop__container-renting-process-content-desktop-renting-particulares,
	.section-particulares-desktop__text-particulares-desktop-soluciones-de-renting,
	.section-aut-nomos-desktop__group-1261152908-desktop-soluciones-de-renting,
	.section-empresa-desktop__container-group-1261152911-desktop-soluciones-de-renting,
	.section-flexible-desktop__group-1261152911-desktop-soluciones-de-renting,
	.section-flota-desktop__container-group-1261152903-desktop-soluciones-de-renting {
		left: max(16px, calc((100% - 1300px) / 2)) !important;
	}
	.section-vehicle-finder-desktop__container-vehicle-finder-background-desktop-renting-flexible,
	.section-vehicle-finder-desktop__container-vehicle-finder-background-desktop-renting-flotas,
	.section-vehicle-finder-desktop__container-vehicle-finder-background-desktop-renting-autonomos,
	.section-vehicle-finder-desktop__container-vehicle-finder-background-desktop-renting-empresas,
	.section-vehicle-finder-desktop__container-vehicle-finder-background-desktop-renting-particulares {
		padding-left: max(16px, calc((100% - 1300px) / 2)) !important;
		padding-right: max(16px, calc((100% - 1300px) / 2)) !important;
	}
	/* Estas 3 insignias (particulares/empresa/flota en el indice de
	   soluciones-de-renting) no usan la fórmula de centrado -- usan un
	   "left:1089px" literal, pensado para una sección a todo el ancho con
	   el diseño de referencia a 1440px (1089+276=1365, el mismo ancho que
	   desborda). No hay fórmula que acotar con max(); se cambia a anclar
	   por la derecha ("right") en vez de por la izquierda -- a 1440px da
	   exactamente el mismo resultado (1440-75=1365) y a cualquier otro
	   ancho la insignia sigue el borde derecho de la foto (que también
	   escala, "background-size:cover") en vez de quedarse clavada a una
	   distancia fija del borde izquierdo. */
	.section-particulares-desktop__group-1261152904-desktop-soluciones-de-renting,
	.section-empresa-desktop__group-1261152904-desktop-soluciones-de-renting,
	.section-flota-desktop__group-1261152904-desktop-soluciones-de-renting {
		left: auto !important; right: 75px !important;
	}
	/* La descripción de autónomos/flexible (texto largo) trae su propio
	   ancho fijo de 714px, MAYOR que el de su contenedor (563px) --
	   desborda por diseño incluso en escritorio ancho, pero solo se nota
	   al faltar espacio lateral en anchos intermedios. Se limita al
	   ancho real disponible. */
	.section-aut-nomos-desktop__txt-benefits-description-desktop-soluciones-de-renting,
	.section-flexible-desktop__txt-benefits-description-desktop-soluciones-de-renting {
		width: 100% !important; max-width: 100% !important;
	}
}

/* Iconos de redes sociales de "Otras formas de contacto" (contacto):
   antes era una unica imagen compuesta sin enlaces; ahora son 4 <a>
   individuales (mismos iconos y mismas URLs globales que el footer).
   La clase original estaba pensada para un <img> suelto
   (display:block); ahora envuelve los 4 enlaces, así que necesita
   flex. */
.contact-desktop__icon-redes-desktop-contacto {
	display: flex;
	align-items: center;
	gap: 10px;
	width: auto;
	height: 40px;
}
.contact-desktop__icon-redes-desktop-contacto a {
	display: block;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
}
.contact-desktop__icon-redes-desktop-contacto img {
	display: block;
	width: 40px;
	height: 40px;
}

/* El detalle de precio de la ficha de vehiculo ("60 meses 713 euros")
   traia un ancho y alto fijos (157x32px) pensados para el texto corto
   del diseño original -- con importes de mas digitos no cabe, el
   "euros" se va a una segunda linea y la caja de altura fija la corta,
   montandose con el boton "Solicitar información" de debajo. El mismo
   bloque ya usaba width:100%;height:auto en movil (max-width:1023px);
   se aplica igual en escritorio. */
.section-hero-desktop__price-2-card-desktop-ficha {
	width: 100%;
	max-width: 303px;
	height: auto;
}

/* Botones para paginas de contenido simple (plantilla "1 columna ancho
   completo", page-fullwidth.php -- Aviso legal, Compliance...). Esta
   plantilla no trae ningun botón propio (el editor de bloques esta
   desactivado en todo el tema, ver use_block_editor_for_post en
   functions.php), asi que los enlaces pegados como texto en el editor
   clasico salian sin estilo. Mismo estilo que los botones del resto
   del sitio (p.ej. .cmp-header-navbar-desktop__button-desktop). */
.entry-content .ar-content-btns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 24px 0;
}
.entry-content .ar-content-btn {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
	padding: 14px 32px;
	min-height: 48px;
	max-width: 100%;
	background-color: #0068c9;
	border-radius: 6px;
	flex: 0 0 auto;
	text-decoration: none;
	cursor: pointer;
	color: #ffffff !important;
	font-weight: 600;
	text-align: center;
}
.entry-content .ar-content-btn:hover {
	background-color: #00519d;
}
@media (max-width: 600px) {
	.entry-content .ar-content-btns {
		grid-template-columns: 1fr;
	}
}

/* Listado del blog: la fila de categorias no tenia padding arriba ni
   abajo en escritorio, asi que quedaba pegada al grid de entradas de
   debajo (en movil la fila va oculta, display:none, no afecta). */
.section-categories-desktop-blog {
	padding-bottom: 32px;
}

/* Faldon fijo solo movil (telefono + CTA de renting) -- footer.php.
   No viene del diseño de Figma. En movil (<1024px) el boton "Pide tu
   renting a medida" de la cabecera se oculta del todo
   (.cmp-header-navbar-desktop__button-desktop{display:none} en el
   breakpoint movil de style.css) y no queda ningun CTA de renting a la
   vista, asi que se pide un faldon que se quede siempre visible al
   hacer scroll. Oculto en escritorio (>=1024px, el boton de cabecera ya
   hace ese trabajo ahi). z-index 900: por debajo del menu movil a
   pantalla completa (1000) y del panel de busqueda (999) en
   autorent-custom.css, para que esos dos sigan tapando el faldon si se
   abren encima. padding-bottom en <body> para que el faldon no monte
   sobre el pie de pagina real al llegar al final del scroll. */
.ar-sticky-mobile-bar {
	display: none;
}
@media (max-width: 1023px) {
	body {
		padding-bottom: calc(64px + env(safe-area-inset-bottom));
	}
	.ar-sticky-mobile-bar {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		height: 64px;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #ffffff;
		box-shadow: 0 -2px 10px rgba(5, 43, 79, 0.12);
	}
	.ar-sticky-mobile-bar__phone {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 2px;
		flex: 0 0 84px;
		text-decoration: none;
		color: #143f70;
		font-family: "Poppins", sans-serif;
		font-size: 11px;
		font-weight: 500;
		border-right: 1px solid #d9e2e8;
	}
	.ar-sticky-mobile-bar__phone-icon {
		color: #0068c9;
	}
	.ar-sticky-mobile-bar__cta {
		display: flex;
		flex: 1 1 0;
		justify-content: center;
		align-items: center;
		padding: 0 16px;
		background-color: #0068c9;
		color: #ffffff;
		text-decoration: none;
		text-align: center;
		font-family: "Poppins", sans-serif;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.2;
	}
}
@media (max-width: 600px) {
	body {
		padding-bottom: calc(58px + env(safe-area-inset-bottom));
	}
	.ar-sticky-mobile-bar {
		height: 58px;
	}
	.ar-sticky-mobile-bar__phone {
		flex-basis: 72px;
	}
	.ar-sticky-mobile-bar__cta {
		font-size: 13px;
	}
}

/* TEMPORAL -- faldon fijo de movil oculto a peticion del usuario (pendiente
   de revisar algo con diseño, 08/10/2026). No se toca nada de las reglas de
   arriba a proposito: quitando este bloque se vuelve a activar tal cual
   estaba. */
.ar-sticky-mobile-bar {
	display: none !important;
}
@media (max-width: 1023px) {
	body {
		padding-bottom: 0 !important;
	}
}