/*
 * Autos Valls · Theme v2 — Ficha de oficina
 * -----------------------------------------
 * /alquiler-de-coches-en/{localidad}/  ·  Epica EP-12 (AUTOVA-121)
 * Pantalla «Landing de ubicacion» del proyecto de Claude Design.
 *
 * Se carga ENCIMA de theme-v2-home.css, que hace de base en todas las paginas
 * v2: ahi viven .av-wrap, .av-seccion, .av-btn, .av-h2, el chrome y el pie.
 * Aqui solo va lo propio de esta pagina.
 *
 * Mobile-first: todas las media queries son min-width.
 */

/* ====================================================================
 * MIGAS
 * ==================================================================== */

.av-migas {
    border-bottom: 1px solid var(--av-borde);
    background: #fff;
}

.av-migas__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0;
    padding: 12px 0;
    list-style: none;
    font-size: 13px;
    color: var(--av-texto-3);
}

.av-migas__it + .av-migas__it::before {
    content: "›";
    margin-right: 8px;
    color: var(--av-texto-3);
}

.av-migas__it a {
    color: var(--av-texto-3);
    text-decoration: none;
}

.av-migas__it a:hover,
.av-migas__it a:focus-visible {
    color: var(--av-marino);
    text-decoration: underline;
}

.av-migas__it--aqui {
    font-weight: 600;
    color: var(--av-marino);
}

/* ====================================================================
 * HERO
 * ==================================================================== */

.av-fhero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 340px;
    overflow: hidden;
    background: var(--av-marino);
}

.av-fhero__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * 🔴 EL VELO ES MAS FUERTE QUE EL DEL DISENO.
 *
 * El prototipo usa .62 / .30 al 40% / .92. Ese .30 asume una foto oscura. En
 * /oficinas/ la imagen destacada real resulto ser una captura de Google Maps
 * casi blanca y el eyebrow se quedaba en 1,57:1.
 *
 * Aqui son ONCE fotos distintas, una por oficina, y ninguna esta elegida para
 * llevar texto encima. El velo se cierra hasta que el peor caso siga siendo
 * legible.
 */
.av-fhero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 48, 105, .64) 0%,
        rgba(0, 48, 105, .74) 40%,
        rgba(0, 48, 105, .92) 82%,
        rgba(0, 48, 105, .97) 100%
    );
}

.av-fhero__in {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: 56px;
    padding-bottom: 30px;
    color: #fff;
}

/*
 * 🔴 BLANCO, y no --av-sobre-marino ni --av-eyebrow.
 *
 * Los dos tokens estan calculados para marino SOLIDO (8,4:1 y 5,8:1). Sobre una
 * foto velada no valen, y aqui son ONCE fotos distintas.
 *
 * Lo comprobe midiendo, no mirando: con --av-sobre-marino (#b8d4ea) sobre la
 * foto de Arenal el peor pixel daba 3,48:1 —por debajo del 4,5 que exige un
 * texto de 11px—, y eso DESPUES de haber subido el velo respecto al diseno
 * precisamente para que esto no pasara. Es la misma trampa de /oficinas/: el
 * velo se calibra contra la foto que uno tiene delante, no contra las once.
 *
 * Blanco sobre el velo reforzado da 6,11:1 en el peor de los once heros
 * (Canutells y San Jaime), medido pixel a pixel sobre el render con el texto
 * oculto. El mejor llega a 7,77.
 */
.av-fhero__eyebrow {
    display: block;
    margin-bottom: 10px;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #fff;
}

.av-fhero__h1 {
    margin: 0 0 10px;
    max-width: 24ch;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: clamp(28px, 3.8vw, 44px);
    line-height: 1.08;
    color: #fff;
    text-wrap: balance;
}

.av-fhero__bajada {
    margin: 0;
    max-width: 56ch;
    font-size: 16px;
    line-height: 1.6;
    color: #dceaf5;
}

@media (min-width: 900px) {
    .av-fhero { min-height: 420px; }
    .av-fhero__in { padding-top: 70px; padding-bottom: 36px; }
}

/* ====================================================================
 * BUSCADOR
 * ==================================================================== */

/*
 * El fondo, el panel blanco y TODO el re-estilado del formulario del plugin
 * vienen de `.av-buscador` / `.av-buscador__caja` en theme-v2-home.css. Aqui
 * solo se anade la cabecera con la oficina fijada, que la home no necesita.
 */

.av-fbuscador .av-buscador__caja { padding: 18px; }

/*
 * El CTA no va a sangre.
 *
 * La regla base le pone `width: 100%`, que en la home funciona porque su
 * tarjeta es mas estrecha. Aqui el panel mide 1.140px y salia un boton de
 * 1.080px de ancho por 60 de alto: mas grande que cualquier otro elemento de
 * la pagina y desproporcionado respecto a los campos que lo alimentan.
 *
 * El diseno lo pinta como la cuarta celda de la rejilla, no como una barra.
 *
 * ⚠️ Va ANTES de cualquier @media: el boton lleva `col-md-4 col-lg-3` encima y
 * las reglas de Bootstrap del plugin viven en un bloque `@media (min-width:
 * 1200px)`. Una regla propia declarada despues gana por orden y parte el
 * escritorio.
 */
.av-fbuscador .search-submit-js {
    max-width: 320px;
    margin-left: auto;
}

/* El desplegable de codigo promocional deja mucho aire muerto entre el ultimo
   campo y el CTA. */
.av-fbuscador .av-buscador__caja .row:last-child { margin-bottom: 0; }

.av-fbuscador__cab {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--av-borde);
}

.av-fbuscador__tit {
    margin: 0 0 6px;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.25;
    color: var(--av-marino);
}

/*
 * La oficina va FIJADA, no en un desplegable: esta pagina existe porque el
 * usuario ya ha elegido donde recoge. De paso esquiva que el nombre de oficina
 * mas largo mida 478px y no quepa en ningun <select>.
 */
.av-fbuscador__fijada {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--av-marino);
}

.av-fbuscador__pin {
    width: 9px;
    height: 9px;
    border-radius: var(--av-r-pill);
    background: var(--av-cielo);
}

.av-fbuscador__cambiar {
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: 13px;
    color: var(--av-enlace);
}

@media (min-width: 900px) {
    .av-fbuscador .av-buscador__caja { margin-top: -38px; padding: 22px 24px; }
    .av-fbuscador__tit { font-size: 20px; }
}

/* ====================================================================
 * BANDA DE CLAIMS
 * ==================================================================== */

.av-fclaims { background: var(--av-arena); margin-top: 26px; }

.av-fclaims__in {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 30px;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 13.5px;
    color: var(--av-marino);
}

.av-fclaims__it {
    display: flex;
    align-items: center;
    gap: 8px;
}

.av-fclaims__it::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: var(--av-r-pill);
    background: var(--av-cielo);
}

/* ====================================================================
 * CUERPO: prosa + aside
 * ==================================================================== */

.av-fcuerpo__in {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}

@media (min-width: 1000px) {
    .av-fcuerpo__in { grid-template-columns: minmax(0, 1fr) 340px; }
}

/*
 * PROSA. El copy SEO viene verbatim del post_content y trae su propio marcado
 * (H2/H3, parrafos, listas, enlaces y algun bloque con estilos pegados). Aqui
 * solo se le da la tipografia de lectura del diseno: 15,5px / 1.75, medida
 * corta. No se reescribe ni se reordena nada.
 */
.av-prosa {
    max-width: 78ch;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--av-texto-2);
}

.av-prosa > *:first-child { margin-top: 0; }

.av-prosa h2 {
    margin: 34px 0 12px;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.2;
    color: var(--av-marino);
}

.av-prosa h3 {
    margin: 26px 0 10px;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.28;
    color: var(--av-marino);
}

.av-prosa h4,
.av-prosa h5 {
    margin: 22px 0 8px;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: 17px;
    color: var(--av-marino);
}

.av-prosa p { margin: 0 0 16px; }
.av-prosa ul,
.av-prosa ol { margin: 0 0 16px; padding-left: 20px; }
.av-prosa li { margin-bottom: 6px; }

/* --av-enlace y no --av-cielo: el cian sobre blanco da 2,78:1. */
.av-prosa a { color: var(--av-enlace); }

.av-prosa img {
    max-width: 100%;
    height: auto;
    border-radius: var(--av-r-tarjeta);
}

/* El aeropuerto y San Jaime traen tablas e iframes dentro del copy. */
.av-prosa table { width: 100%; border-collapse: collapse; }
.av-prosa iframe { max-width: 100%; border: 0; }

@media (min-width: 900px) {
    .av-prosa h2 { font-size: 30px; }
}

/* --- Por que reservar aqui --- */

.av-fporque {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--av-borde);
}

.av-fporque__tit {
    margin: 0 0 16px;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: 20px;
    color: var(--av-marino);
}

.av-fporque__lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.av-fporque__it {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--av-texto-2);
}

/* Check cian con la marca en MARINO: blanco sobre cian daria 2,78:1. */
.av-fporque__check {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--av-r-pill);
    background: var(--av-cielo);
    color: var(--av-marino);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

/* ====================================================================
 * ASIDE
 * ==================================================================== */

.av-faside {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@media (min-width: 1000px) {
    .av-faside { position: sticky; top: 24px; }
}

.av-fcard {
    padding: 18px;
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-tarjeta);
    background: #fff;
}

.av-fcard__tit {
    margin: 0 0 12px;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: 15px;
    color: var(--av-marino);
}

/*
 * ALTURA FIJA DE 150px, la del diseno. Con `aspect-ratio: 4/3` el mapa medía
 * 227px en una tarjeta de 340 y se comia el aside entero: la direccion y el
 * horario —que es lo que se viene a leer aqui— quedaban por debajo del pliegue.
 *
 * 🔴 Y el iframe va ABSOLUTO: en flujo normal `height:100%` no resuelve, porque
 * la altura del contenedor no cuenta como definida para el porcentaje del hijo,
 * y un iframe mas alto estira la caja.
 */
.av-fcard__mapa {
    position: relative;
    height: 150px;
    margin-bottom: 14px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--av-fondo-suave);
}

.av-fcard__mapa iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.av-fcard__dato {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--av-texto-2);
}

.av-fcard__rotulo {
    display: block;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--av-texto-3);
}

/* Las lineas 3-5 de la direccion: «Enfrente estacion cruceros» y companeras. */
.av-fcard__nota,
.av-fcard__matiz {
    display: block;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--av-texto-3);
}

.av-fcard__nota { margin: -4px 0 10px; }

.av-fcard__semana { font-size: 13px; }

.av-fcard__semana summary {
    cursor: pointer;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: 13px;
    color: var(--av-enlace);
}

.av-fcard__dias {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.av-fcard__dias li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px solid var(--av-borde);
    color: var(--av-texto-2);
}

.av-fcard__dias li:last-child { border-bottom: 0; }

/* --- Otras oficinas: el enlazado interno entre localidades ---
 *
 * En LINEA, separadas por «·», como en el diseno. Como lista vertical eran
 * once renglones que estiraban el aside 300px por debajo de la columna de
 * lectura. Los once enlaces siguen ahi; lo que cambia es que no dominan. */

.av-fotras {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--av-texto-3);
}

.av-fotras a { color: var(--av-enlace); text-decoration: none; }
.av-fotras a:hover,
.av-fotras a:focus-visible { text-decoration: underline; }

.av-fotras__sep { color: var(--av-borde); }

/* --- Contacto --- */

.av-fcontacto {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border-radius: var(--av-r-tarjeta);
    background: var(--av-marino);
}

.av-fcontacto__tit {
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: 15px;
    color: #fff;
}

.av-fcontacto__nota {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--av-sobre-marino);
}

/*
 * 🔴 LOS DOS BOTONES VAN PREFIJADOS CON `.av-v2`, Y NO ES COSMETICA.
 *
 * Sin el prefijo, `.av-btn--tel` tiene especificidad (0,1,0) y la regla
 * `.av-v2 a` de la hoja base tiene (0,2,0): GANA ELLA. Los dos CTA salian
 * pintados en `--av-enlace` (#00789f) en vez de marino y blanco —medido sobre
 * el render, no leido—, lo que dejaba «Escribir por WhatsApp» en azul enlace
 * sobre fondo marino, casi ilegible.
 *
 * Es la tercera vez que este tema muerde con lo mismo: `.av-v2 a` ya habia
 * pintado de azul el telefono de la cabecera. Cuando un color «no se aplica»,
 * mirar especificidad antes que el valor.
 *
 * El CTA de llamar va cian con TEXTO MARINO. El diseno lo pinta cian con
 * blanco: 2,78:1, prohibido en los tokens.
 */
.av-v2 .av-btn--tel {
    justify-content: center;
    background: var(--av-cielo);
    color: var(--av-marino);
    border: 0;
}

.av-v2 .av-btn--tel:hover,
.av-v2 .av-btn--tel:focus-visible {
    background: var(--av-cielo-hover);
    color: var(--av-marino);
}

/* Segundo CTA de la tarjeta: fantasma sobre marino, como en el diseno. */
.av-v2 .av-btn--fantasma {
    justify-content: center;
    background: none;
    border: 1px solid rgba(255, 255, 255, .38);
    color: #fff;
}

.av-v2 .av-btn--fantasma:hover,
.av-v2 .av-btn--fantasma:focus-visible {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .6);
    color: #fff;
}

/* ====================================================================
 * COCHES DISPONIBLES  (dentro de la columna, ANTES de la prosa)
 * ==================================================================== */

.av-fdisponibles { margin-bottom: 36px; }

.av-fdisponibles__tit { margin: 0 0 6px; }

.av-fdisponibles__bajada {
    margin: 0 0 18px;
    max-width: 70ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--av-texto-3);
}

.av-fdisponibles__mas { margin: 16px 0 0; }

/*
 * 🔴 TARJETA MINIMA, no la ficha de producto del catalogo.
 *
 * La primera version reutilizaba la tarjeta grande: 466px de alto, tres
 * columnas a todo el ancho de la pagina y por debajo del texto. Ocupaba media
 * pantalla y empujaba la prosa fuera del primer scroll.
 *
 * El diseno las pinta dentro de la columna izquierda, con foto de 110px y la
 * ficha en 7px de gap. Aqui caben tres por fila en 780px de columna.
 *
 * auto-fit y NO auto-fill: con auto-fill una fila incompleta reserva columnas
 * vacias y descentra las tarjetas. Paso en la home.
 */
.av-grid--fcoches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-auto-rows: 1fr;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * TRES COLUMNAS en escritorio, no `auto-fit` a secas.
 *
 * En la columna de ~780px, `minmax(150px)` resolvia a CUATRO columnas y los
 * seis coches quedaban 4 + 2: dos tarjetas sueltas en la segunda fila con la
 * mitad de la fila vacia. Con tres son 3 + 3.
 *
 * `grid-auto-rows: 1fr` iguala las dos filas: sin el, la fila con un nombre de
 * dos lineas («Citroen C3 Automatico») crece y desalinea los botones.
 */
@media (min-width: 1000px) {
    .av-grid--fcoches { grid-template-columns: repeat(3, 1fr); }
}

.av-fcoche {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-tarjeta);
    background: #fff;
    overflow: hidden;
}

.av-fcoche__foto {
    position: relative;
    height: 110px;
    background: var(--av-fondo-suave);
}

/* Absoluto: con la imagen en flujo, una foto mas alta que la caja la estira
   —height:100% no resuelve porque la altura del padre no es un valor definido
   para el porcentaje del hijo. */
.av-fcoche__foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    box-sizing: border-box;
}

.av-fcoche__in {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7px;
    padding: 14px;
}

.av-fcoche__nombre {
    margin: 0;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.25;
    color: var(--av-marino);
}

.av-fcoche__specs {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--av-texto-3);
}

/* `margin-top:auto` empuja el precio y el CTA al pie de la tarjeta, para que
   las de nombre corto y largo alineen el boton a la misma altura. */
.av-fcoche__precio {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin: auto 0 0;
    color: var(--av-marino);
}

.av-fcoche__precio strong {
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: 20px;
}

.av-fcoche__precio small {
    font-family: var(--av-fuente-texto);
    font-weight: 400;
    font-size: 12px;
    color: var(--av-texto-3);
}

.av-fcoche__cta {
    justify-content: center;
    padding: 10px 12px;
    font-size: 12.5px;
    border-radius: var(--av-r-pill);
}

/* ====================================================================
 * COMO RECOGER
 * ==================================================================== */

.av-grid--frecoger {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.av-frecoger__card {
    height: 100%;
    padding: 20px;
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-bloque);
    background: #fff;
}

.av-frecoger__eyebrow {
    display: block;
    margin-bottom: 8px;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    /* Sobre blanco el cian no llega: se usa el enlace, que da 5,0:1. */
    color: var(--av-enlace);
}

.av-frecoger__tit {
    margin: 0 0 8px;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: 16px;
    color: var(--av-marino);
}

.av-frecoger__txt {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--av-texto-2);
}

/* ====================================================================
 * FAQ
 * ==================================================================== */

.av-ffaqs__in { max-width: 900px; }

.av-ffaqs__lista { margin-top: 18px; }

.av-ffaq { border-bottom: 1px solid var(--av-borde); }

.av-ffaq__p {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 0;
    cursor: pointer;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    color: var(--av-marino);
    list-style: none;
}

.av-ffaq__p::-webkit-details-marker { display: none; }

.av-ffaq__p::after {
    content: "+";
    flex: none;
    font-size: 18px;
    color: var(--av-enlace);
    transition: transform var(--av-transicion);
}

.av-ffaq[open] .av-ffaq__p::after { transform: rotate(45deg); }

.av-ffaq__r { padding-bottom: 16px; }

.av-ffaq__r p {
    margin: 0;
    max-width: 70ch;
    font-size: 14px;
    line-height: 1.65;
    color: var(--av-texto-2);
}

/* ====================================================================
 * CTA DE CIERRE
 * ==================================================================== */

/*
 * 🔴 El aire de FUERA con margin, el de DENTRO con padding en el panel.
 *
 * El resto del theme v2 solo pone padding-top en .av-seccion y deja que el aire
 * de abajo lo ponga la siguiente. Eso funciona mientras todo sea blanco, porque
 * el hueco se ve igual venga de donde venga. Una banda de color tiene sus DOS
 * bordes a la vista y ahi se rompe: y el arreglo evidente —padding-bottom en la
 * seccion— dispara el hueco al doble que el resto de la pagina.
 */
.av-fcta { margin: 44px 0 60px; }

.av-fcta__panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 26px;
    border-radius: var(--av-r-bloque);
    background: var(--av-arena);
}

.av-fcta__tit {
    margin: 0 0 6px;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: 18px;
    color: var(--av-marino);
}

.av-fcta__p {
    margin: 0;
    max-width: 60ch;
    font-size: 14px;
    color: var(--av-marino);
}

/* `.av-btn--oscuro` trae `width: 100%` de la base (esta pensado para ir dentro
   de una tarjeta). En la banda de cierre va al lado del texto, no debajo. */
.av-fcta .av-btn { width: auto; white-space: nowrap; }