/* ==========================================================================
AUTOCARES FLOMARSAN — Sistema de diseño
Divi 5.6 · autocaresflomarsan.com
--------------------------------------------------------------------------
Dónde pegarlo: Divi → Opciones del tema → Personalizar → CSS personalizado
(o en el style.css del child theme, que va mejor de caché)
Cómo está organizado:
1. Variables (cambia los colores aquí y cambian en todo el sitio)
2. Base y tipografía
3. Cabecera y navegación
4. Botones
5. Secciones y tarjetas
6. Formularios (Fluent Forms)
7. Acordeón de FAQ
8. Fichas de flota
9. Pie de página
10. Accesibilidad y foco
11. Rendimiento y utilidades
12. Impresión
========================================================================== */
/* ==========================================================================
1. VARIABLES
========================================================================== */
:root {
/* --- Color -------------------------------------------------------------
Azul profundo: transporte, seriedad, sin caer en el azul corporativo
genérico. Ámbar: el calor de la empresa familiar y buen contraste
sobre el azul. Todos los pares texto/fondo cumplen WCAG AA (4,5:1).
Si cambias el ámbar por un color más claro, comprueba el contraste
en webaim.org/resources/contrastchecker antes.
--------------------------------------------------------------------- */
--flo-azul: #1B3A5C; /* principal */
--flo-azul-osc: #12293F; /* hover, footer */
--flo-azul-claro: #2E5A87;
--flo-azul-suave: #EAF0F6; /* fondos de bloque */
--flo-ambar: #D98A1F; /* acento, CTA */
--flo-ambar-osc: #B8721A; /* hover */
--flo-ambar-suave: #FDF4E7;
--flo-tinta: #14202B; /* texto principal */
--flo-gris: #55636F; /* texto secundario */
--flo-gris-claro: #8A96A1; /* texto terciario, metadatos */
--flo-linea: #DFE4E9; /* bordes */
--flo-fondo: #F6F8FA; /* fondo de sección alterna */
--flo-blanco: #FFFFFF;
--flo-exito: #1F7A4C;
--flo-error: #C0392B;
--flo-aviso: #B8721A;
/* --- Tipografía -------------------------------------------------------
Pila del sistema = 0 KB de descarga y renderizado inmediato.
Si quieres una fuente propia, descomenta el @font-face de abajo
y cambia --flo-font-titulo.
--------------------------------------------------------------------- */
--flo-font: system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--flo-font-titulo: var(--flo-font);
/* Escala tipográfica fluida con clamp(): se adapta al ancho de pantalla
sin necesidad de media queries. */
--flo-t-h1: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem);
--flo-t-h2: clamp(1.65rem, 1.2rem + 2vw, 2.5rem);
--flo-t-h3: clamp(1.3rem, 1.1rem + 0.9vw, 1.65rem);
--flo-t-h4: 1.15rem;
--flo-t-base: 1.0625rem; /* 17px */
--flo-t-lg: 1.1875rem; /* 19px, entradillas */
--flo-t-sm: 0.9375rem; /* 15px */
--flo-t-xs: 0.8125rem; /* 13px, legal y metadatos */
--flo-lh-titulo: 1.18;
--flo-lh-texto: 1.7;
/* --- Espaciado (escala de 8px) ---------------------------------------- */
--flo-e-1: 0.5rem;
--flo-e-2: 1rem;
--flo-e-3: 1.5rem;
--flo-e-4: 2rem;
--flo-e-5: 3rem;
--flo-e-6: 4rem;
--flo-e-7: 6rem;
/* --- Formas y sombras -------------------------------------------------- */
--flo-radio: 6px;
--flo-radio-lg: 10px;
--flo-sombra: 0 1px 3px rgba(20, 32, 43, .07),
0 4px 14px rgba(20, 32, 43, .05);
--flo-sombra-lg: 0 4px 12px rgba(20, 32, 43, .09),
0 16px 40px rgba(20, 32, 43, .07);
--flo-trans: 180ms cubic-bezier(.4, 0, .2, 1);
--flo-max: 1200px;
}
/* --- Fuente propia (opcional) ---------------------------------------------
Descarga Figtree en woff2 desde gwfh.mranftl.com, súbela a
/wp-content/themes/divi5-child/fonts/ y descomenta esto.
Solo dos pesos. Nunca cargues la variable completa: pesa 120 KB+.
@font-face {
font-family: "Figtree";
src: url("./fonts/figtree-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Figtree";
src: url("./fonts/figtree-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
:root { --flo-font-titulo: "Figtree", var(--flo-font); }
-------------------------------------------------------------------------- */
/* ==========================================================================
2. BASE Y TIPOGRAFÍA
========================================================================== */
html { scroll-behavior: smooth; }
/* Compensa la cabecera fija al saltar a un ancla */
:target { scroll-margin-top: 100px; }
body,
body.et-db #et-boc .et-l p,
#et-boc .et-l .et_pb_text {
font-family: var(--flo-font);
font-size: var(--flo-t-base);
line-height: var(--flo-lh-texto);
color: var(--flo-tinta);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2,
.et_pb_module h3, .et_pb_module h4 {
font-family: var(--flo-font-titulo);
line-height: var(--flo-lh-titulo);
color: var(--flo-azul);
letter-spacing: -0.018em;
font-weight: 700;
text-wrap: balance; /* evita títulos con una palabra huérfana */
}
h1, .et_pb_module h1 { font-size: var(--flo-t-h1); }
h2, .et_pb_module h2 { font-size: var(--flo-t-h2); margin-bottom: var(--flo-e-3); }
h3, .et_pb_module h3 { font-size: var(--flo-t-h3); }
h4, .et_pb_module h4 { font-size: var(--flo-t-h4); }
p { margin-bottom: var(--flo-e-2); max-width: 68ch; }
p:last-child { margin-bottom: 0; }
/* Entradilla bajo los H1 y H2 */
.flo-entradilla,
.flo-entradilla p {
font-size: var(--flo-t-lg);
color: var(--flo-gris);
line-height: 1.6;
max-width: 62ch;
}
/* Texto sobre fondo oscuro */
.flo-oscuro,
.flo-oscuro p,
.flo-oscuro li { color: rgba(255,255,255,.88); }
.flo-oscuro h1, .flo-oscuro h2, .flo-oscuro h3, .flo-oscuro h4 { color: #fff; }
.flo-oscuro .flo-entradilla p { color: rgba(255,255,255,.75); }
/* Enlaces en el cuerpo del texto */
.et_pb_text a:not(.et_pb_button) {
color: var(--flo-azul-claro);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--flo-trans);
}
.et_pb_text a:not(.et_pb_button):hover { color: var(--flo-ambar-osc); }
/* Listas con marca propia */
.flo-lista ul { list-style: none; padding-left: 0; }
.flo-lista li {
position: relative;
padding-left: 1.75rem;
margin-bottom: 0.7rem;
line-height: 1.6;
}
.flo-lista li::before {
content: "";
position: absolute;
left: 0; top: 0.62em;
width: 8px; height: 8px;
background: var(--flo-ambar);
border-radius: 2px;
transform: rotate(45deg);
}
/* Cita destacada */
.flo-cita {
border-left: 3px solid var(--flo-ambar);
padding: var(--flo-e-1) 0 var(--flo-e-1) var(--flo-e-3);
font-size: var(--flo-t-lg);
color: var(--flo-gris);
font-style: normal;
}
/* ==========================================================================
3. CABECERA Y NAVEGACIÓN
========================================================================== */
/* --- Barra superior (teléfono, pago) --- */
.flo-topbar {
background: var(--flo-azul-osc);
color: rgba(255,255,255,.82);
font-size: var(--flo-t-xs);
padding: 8px 0;
}
.flo-topbar a { color: rgba(255,255,255,.82); text-decoration: none; }
.flo-topbar a:hover { color: var(--flo-ambar); }
@media (max-width: 780px) { .flo-topbar { display: none; } }
/* --- Cabecera principal --- */
#main-header,
.flo-header {
background: rgba(255,255,255,.97);
backdrop-filter: saturate(180%) blur(12px);
box-shadow: 0 1px 0 var(--flo-linea);
transition: box-shadow var(--flo-trans);
}
#main-header.et-fixed-header { box-shadow: var(--flo-sombra); }
/* --- Logo: alto fijo para que no haya salto de layout (CLS) --- */
#logo, .flo-header img.flo-logo {
max-height: 52px;
width: auto;
height: auto;
}
@media (max-width: 980px) { #logo, .flo-header img.flo-logo { max-height: 42px; } }
/* --- Menú principal --- */
#top-menu li a,
.flo-nav a {
font-size: 0.9375rem;
font-weight: 500;
color: var(--flo-tinta);
letter-spacing: 0.002em;
padding-bottom: 6px;
position: relative;
}
/* Subrayado que crece al pasar el ratón */
#top-menu li a::after,
.flo-nav a::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 0; height: 2px;
background: var(--flo-ambar);
transition: width var(--flo-trans);
}
#top-menu li a:hover::after,
#top-menu li.current-menu-item > a::after,
.flo-nav a:hover::after { width: 100%; }
#top-menu li.current-menu-item > a { color: var(--flo-azul); font-weight: 600; }
/* Menú de 8 elementos: reduce el espacio entre ellos para que quepan.
Si adoptas el menú de 5 + CTA que propongo en la guía, borra este bloque. */
@media (min-width: 981px) and (max-width: 1300px) {
#top-menu li { padding-right: 16px; }
#top-menu li a { font-size: 0.875rem; }
}
/* --- El item "Presupuesto" convertido en botón ---
Asigna la clase CSS flo-menu-cta a ese elemento en
Apariencia → Menús → (abrir el item) → Clases CSS */
#top-menu li.flo-menu-cta > a {
background: var(--flo-ambar);
color: #fff !important;
padding: 11px 22px !important;
border-radius: var(--flo-radio);
font-weight: 600;
transition: background var(--flo-trans), transform var(--flo-trans);
}
#top-menu li.flo-menu-cta > a::after { display: none; }
#top-menu li.flo-menu-cta > a:hover {
background: var(--flo-ambar-osc);
transform: translateY(-1px);
}
/* --- Submenú --- */
#top-menu li ul.sub-menu {
border-top: 3px solid var(--flo-ambar);
box-shadow: var(--flo-sombra-lg);
border-radius: 0 0 var(--flo-radio) var(--flo-radio);
padding: 8px 0;
}
#top-menu li ul.sub-menu li a {
padding: 10px 20px !important;
font-size: 0.9rem;
width: 240px;
}
#top-menu li ul.sub-menu li a::after { display: none; }
#top-menu li ul.sub-menu li a:hover { background: var(--flo-azul-suave); }
/* --- Menú móvil --- */
#mobile_menu {
border-top: 3px solid var(--flo-ambar);
box-shadow: var(--flo-sombra-lg);
}
#mobile_menu li a {
font-size: 1.0625rem;
padding: 15px 5%; /* área táctil de 44px+ */
border-bottom: 1px solid var(--flo-linea);
}
.mobile_menu_bar::before { color: var(--flo-azul); font-size: 30px; }
/* --- Barra flotante de llamada en móvil ---
Botón fijo abajo con teléfono y presupuesto. En un negocio local esto
es de lo que más convierte. Añade el HTML en el footer del Theme Builder
(módulo Código):
------------------------------------------------------------------------ */
.flo-movil-cta { display: none; }
@media (max-width: 780px) {
.flo-movil-cta {
display: grid;
grid-template-columns: 1fr 1fr;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 9999;
box-shadow: 0 -2px 14px rgba(20,32,43,.16);
}
.flo-movil-cta a {
padding: 15px 8px;
text-align: center;
font-weight: 600;
font-size: 0.9375rem;
text-decoration: none;
min-height: 50px;
display: flex; align-items: center; justify-content: center;
}
.flo-movil-cta__tel { background: var(--flo-azul); color: #fff; }
.flo-movil-cta__pres { background: var(--flo-ambar); color: #fff; }
body { padding-bottom: 50px; } /* que no tape el pie */
}
/* ==========================================================================
4. BOTONES
========================================================================== */
/* Base común. Aplica la clase en Divi → módulo Botón → Avanzado → Clase CSS */
.flo-btn,
.et_pb_button.flo-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: var(--flo-font);
font-size: 1rem !important;
font-weight: 600 !important;
line-height: 1.2;
padding: 15px 30px !important;
border-radius: var(--flo-radio) !important;
border: 2px solid transparent !important;
text-decoration: none !important;
letter-spacing: 0 !important;
min-height: 48px; /* área táctil accesible */
transition: background var(--flo-trans),
color var(--flo-trans),
transform var(--flo-trans),
box-shadow var(--flo-trans);
}
/* Quita la flechita automática de Divi, que estorba */
.flo-btn::after,
.et_pb_button.flo-btn::after { display: none !important; }
/* --- Primario --- */
.flo-btn--primario,
.et_pb_button.flo-btn--primario {
background: var(--flo-ambar) !important;
color: #fff !important;
border-color: var(--flo-ambar) !important;
box-shadow: 0 2px 8px rgba(217,138,31,.28);
}
.flo-btn--primario:hover {
background: var(--flo-ambar-osc) !important;
border-color: var(--flo-ambar-osc) !important;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(217,138,31,.34);
}
/* --- Secundario (contorno) --- */
.flo-btn--secundario,
.et_pb_button.flo-btn--secundario {
background: transparent !important;
color: var(--flo-azul) !important;
border-color: var(--flo-azul) !important;
}
.flo-btn--secundario:hover {
background: var(--flo-azul) !important;
color: #fff !important;
}
/* --- Sobre fondo oscuro --- */
.flo-oscuro .flo-btn--secundario,
.flo-btn--claro {
color: #fff !important;
border-color: rgba(255,255,255,.5) !important;
}
.flo-oscuro .flo-btn--secundario:hover,
.flo-btn--claro:hover {
background: #fff !important;
color: var(--flo-azul) !important;
border-color: #fff !important;
}
/* --- Enlace con flecha --- */
.flo-enlace {
display: inline-flex; align-items: center; gap: 0.4rem;
color: var(--flo-azul-claro);
font-weight: 600;
text-decoration: none;
transition: gap var(--flo-trans), color var(--flo-trans);
}
.flo-enlace::after { content: "\2192"; transition: transform var(--flo-trans); }
.flo-enlace:hover { color: var(--flo-ambar-osc); }
.flo-enlace:hover::after { transform: translateX(4px); }
/* ==========================================================================
5. SECCIONES, TARJETAS Y BLOQUES
========================================================================== */
/* Espaciado vertical coherente en todo el sitio */
.et_pb_section { padding: var(--flo-e-7) 0; }
@media (max-width: 980px) { .et_pb_section { padding: var(--flo-e-5) 0; } }
.flo-seccion--compacta { padding: var(--flo-e-5) 0 !important; }
.flo-seccion--clara { background: var(--flo-fondo); }
.flo-seccion--suave { background: var(--flo-azul-suave); }
.flo-seccion--oscura { background: var(--flo-azul); }
/* --- Hero -------------------------------------------------------------- */
.flo-hero {
position: relative;
min-height: 620px;
display: flex;
align-items: center;
overflow: hidden;
}
@media (max-width: 780px) { .flo-hero { min-height: 500px; } }
/* Velo sobre la imagen de fondo. Sin esto, ningún texto se lee bien
sobre una foto. El degradado da más contraste abajo, donde va el CTA. */
.flo-hero::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(18,41,63,.42) 0%,
rgba(18,41,63,.58) 55%,
rgba(18,41,63,.72) 100%);
z-index: 1;
}
.flo-hero > .et_pb_row { position: relative; z-index: 2; }
/* Hero de página interior, más bajo */
.flo-hero--interior { min-height: 340px; }
.flo-hero--interior::before { background: rgba(18,41,63,.6); }
/* Hero sin imagen (Presupuesto, Pago, Contacto) */
.flo-hero--plano {
min-height: auto;
background: var(--flo-azul);
padding: var(--flo-e-6) 0 var(--flo-e-5);
}
.flo-hero--plano::before { display: none; }
/* Animación suave de la imagen del hero. Alternativa ligera al vídeo
de fondo, que arruina el rendimiento. */
@media (prefers-reduced-motion: no-preference) {
.flo-hero--anima .et_pb_section_video_bg,
.flo-hero--anima > .et_pb_background {
animation: flo-kenburns 26s ease-in-out infinite alternate;
}
}
@keyframes flo-kenburns {
from { transform: scale(1); }
to { transform: scale(1.07); }
}
/* --- Tarjeta de servicio (módulo Blurb) -------------------------------- */
.flo-tarjeta,
.et_pb_blurb.flo-tarjeta {
background: #fff;
border: 1px solid var(--flo-linea);
border-radius: var(--flo-radio-lg);
padding: var(--flo-e-3) !important;
height: 100%;
transition: transform var(--flo-trans),
box-shadow var(--flo-trans),
border-color var(--flo-trans);
}
.flo-tarjeta:hover {
transform: translateY(-4px);
box-shadow: var(--flo-sombra-lg);
border-color: transparent;
}
.flo-tarjeta .et_pb_module_header,
.flo-tarjeta h3 {
font-size: 1.2rem !important;
margin-bottom: 0.6rem !important;
}
.flo-tarjeta .et_pb_blurb_description { color: var(--flo-gris); font-size: var(--flo-t-sm); }
/* Imagen de la tarjeta: proporción fija para que no baile el layout */
.flo-tarjeta .et_pb_main_blurb_image {
margin-bottom: var(--flo-e-2) !important;
border-radius: var(--flo-radio);
overflow: hidden;
}
.flo-tarjeta .et_pb_main_blurb_image img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
transition: transform 400ms ease;
}
.flo-tarjeta:hover .et_pb_main_blurb_image img { transform: scale(1.04); }
/* --- Paso numerado (sección "cómo trabajamos") ------------------------- */
.flo-paso { position: relative; padding-top: var(--flo-e-4); }
.flo-paso::before {
content: attr(data-paso);
position: absolute; top: 0; left: 0;
font-size: 3rem;
font-weight: 800;
line-height: 1;
color: var(--flo-ambar);
opacity: .34;
}
/* --- Contador de cifras ------------------------------------------------ */
.flo-cifra .et_pb_number_counter .percent-value,
.et_pb_number_counter.flo-cifra .percent p {
font-size: 2.6rem !important;
font-weight: 800 !important;
color: var(--flo-azul) !important;
letter-spacing: -0.03em;
}
.flo-cifra .et_pb_number_counter h3 {
font-size: var(--flo-t-sm) !important;
font-weight: 500 !important;
color: var(--flo-gris) !important;
text-transform: none;
letter-spacing: 0;
}
/* --- Bloque alterno imagen/texto --------------------------------------- */
.flo-alterno img {
border-radius: var(--flo-radio-lg);
width: 100%; height: auto;
aspect-ratio: 10 / 7;
object-fit: cover;
display: block;
}
@media (min-width: 981px) {
.flo-alterno .et_pb_column { display: flex; flex-direction: column; justify-content: center; }
}
/* --- Testimonio -------------------------------------------------------- */
.flo-testimonio,
.et_pb_testimonial.flo-testimonio {
background: #fff !important;
border: 1px solid var(--flo-linea);
border-radius: var(--flo-radio-lg);
padding: var(--flo-e-3) !important;
height: 100%;
}
.flo-testimonio::before {
content: "\201C";
display: block;
font-size: 3.4rem;
line-height: .8;
color: var(--flo-ambar);
opacity: .32;
margin-bottom: 0.4rem;
}
.et_pb_testimonial.flo-testimonio .et_pb_testimonial_portrait { display: none; }
.flo-testimonio .et_pb_testimonial_author {
font-weight: 600; color: var(--flo-azul); font-style: normal;
}
/* --- Sello de confianza ------------------------------------------------ */
.flo-sello {
display: inline-flex; align-items: center; gap: .5rem;
background: var(--flo-ambar-suave);
border: 1px solid rgba(217,138,31,.25);
color: var(--flo-ambar-osc);
font-size: var(--flo-t-xs);
font-weight: 600;
padding: 6px 12px;
border-radius: 100px;
}
/* --- Barra lateral fija (página de presupuesto) ------------------------ */
@media (min-width: 981px) {
.flo-sticky { position: sticky; top: 110px; align-self: start; }
}
/* --- CTA final --------------------------------------------------------- */
.flo-cta-final {
background: linear-gradient(135deg, var(--flo-azul) 0%, var(--flo-azul-osc) 100%);
padding: var(--flo-e-6) 0 !important;
text-align: center;
}
/* ==========================================================================
6. FORMULARIOS (Fluent Forms)
========================================================================== */
.fluentform .ff-el-group { margin-bottom: var(--flo-e-3); }
/* --- Etiquetas: siempre visibles, nunca solo placeholder --- */
.fluentform .ff-el-input--label label {
font-size: var(--flo-t-sm);
font-weight: 600;
color: var(--flo-tinta);
margin-bottom: 0.4rem;
display: block;
line-height: 1.4;
}
.fluentform .ff-el-is-required.asterisk-right label:after {
color: var(--flo-error);
margin-left: 3px;
}
/* --- Campos --- */
.fluentform .ff-el-form-control {
font-family: var(--flo-font);
font-size: 1rem;
line-height: 1.5;
padding: 12px 14px;
min-height: 48px; /* táctil */
color: var(--flo-tinta);
background: #fff;
border: 1.5px solid var(--flo-linea);
border-radius: var(--flo-radio);
width: 100%;
transition: border-color var(--flo-trans), box-shadow var(--flo-trans);
-webkit-appearance: none;
appearance: none;
}
.fluentform .ff-el-form-control:hover { border-color: var(--flo-gris-claro); }
.fluentform .ff-el-form-control:focus {
border-color: var(--flo-azul-claro);
box-shadow: 0 0 0 3px rgba(46,90,135,.16);
outline: none;
}
.fluentform textarea.ff-el-form-control { min-height: 110px; resize: vertical; }
/* Flecha propia en los desplegables */
.fluentform select.ff-el-form-control {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2355636F' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 38px;
}
/* --- Texto de ayuda --- */
.fluentform .ff-el-help-message {
font-size: var(--flo-t-xs);
color: var(--flo-gris);
line-height: 1.5;
margin-top: 0.35rem;
}
/* --- Radios y casillas como tarjetas seleccionables --- */
.fluentform .ff-el-form-check {
margin-bottom: 0.5rem;
padding: 12px 14px;
border: 1.5px solid var(--flo-linea);
border-radius: var(--flo-radio);
background: #fff;
cursor: pointer;
transition: border-color var(--flo-trans), background var(--flo-trans);
}
.fluentform .ff-el-form-check:hover {
border-color: var(--flo-azul-claro);
background: var(--flo-azul-suave);
}
.fluentform .ff-el-form-check:has(input:checked) {
border-color: var(--flo-azul);
background: var(--flo-azul-suave);
box-shadow: inset 0 0 0 1px var(--flo-azul);
}
.fluentform .ff-el-form-check label {
font-size: var(--flo-t-sm);
font-weight: 500;
cursor: pointer;
display: flex; align-items: flex-start; gap: 0.6rem;
margin: 0;
}
.fluentform input[type="radio"],
.fluentform input[type="checkbox"] {
width: 19px; height: 19px;
accent-color: var(--flo-azul);
margin-top: 1px;
flex-shrink: 0;
}
/* Radios en cuadrícula para el campo "tipo de servicio" */
.flo-radio-grid .ff-el-form-check-group,
.flo-radio-grid .ff_list_inline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
gap: 0.6rem;
}
.flo-radio-grid .ff-el-form-check { margin-bottom: 0; }
/* --- Multipaso: barra de progreso --- */
.fluentform .ff-step-header { margin-bottom: var(--flo-e-4); }
.fluentform .ff-el-progress {
background: var(--flo-linea);
height: 6px;
border-radius: 100px;
overflow: hidden;
}
.fluentform .ff-el-progress-bar {
background: var(--flo-ambar);
border-radius: 100px;
transition: width 320ms ease;
font-size: 0; /* oculta el % dentro de la barra */
}
.fluentform .ff-step-titles {
display: flex; gap: 0.5rem; flex-wrap: wrap;
margin-bottom: var(--flo-e-2);
padding-left: 0; list-style: none;
}
.fluentform .ff-step-titles li {
font-size: var(--flo-t-xs);
font-weight: 600;
color: var(--flo-gris-claro);
padding: 4px 0;
flex: 1 1 auto;
border-bottom: 3px solid var(--flo-linea);
transition: color var(--flo-trans), border-color var(--flo-trans);
}
.fluentform .ff-step-titles li.active {
color: var(--flo-azul);
border-bottom-color: var(--flo-ambar);
}
/* Botones de navegación entre pasos */
.fluentform .ff-btn-next,
.fluentform .ff-btn-prev,
.fluentform .ff-btn-submit {
font-family: var(--flo-font);
font-size: 1rem;
font-weight: 600;
padding: 14px 30px;
min-height: 48px;
border-radius: var(--flo-radio);
border: 2px solid transparent;
cursor: pointer;
transition: all var(--flo-trans);
}
.fluentform .ff-btn-next,
.fluentform .ff-btn-submit {
background: var(--flo-ambar);
color: #fff;
box-shadow: 0 2px 8px rgba(217,138,31,.28);
}
.fluentform .ff-btn-next:hover,
.fluentform .ff-btn-submit:hover {
background: var(--flo-ambar-osc);
transform: translateY(-1px);
}
.fluentform .ff-btn-prev {
background: transparent;
color: var(--flo-gris);
border-color: var(--flo-linea);
}
.fluentform .ff-btn-prev:hover { border-color: var(--flo-gris); color: var(--flo-tinta); }
.fluentform .step-nav {
display: flex; justify-content: space-between; gap: var(--flo-e-2);
margin-top: var(--flo-e-4);
}
/* --- Repeat Container (las paradas) --- */
.fluentform .ff-el-repeat,
.fluentform .ff_repeater_table {
background: var(--flo-fondo);
border: 1px solid var(--flo-linea);
border-radius: var(--flo-radio-lg);
padding: var(--flo-e-2);
}
.fluentform .ff-el-repeat-item,
.fluentform .ff_repeater_table tbody tr {
background: #fff;
border: 1px solid var(--flo-linea);
border-radius: var(--flo-radio);
padding: var(--flo-e-2);
margin-bottom: 0.75rem;
position: relative;
}
/* Numera cada parada: "Parada 1", "Parada 2"... */
.fluentform .ff-el-repeat-item::before {
content: "Parada " counter(flo-parada);
counter-increment: flo-parada;
display: block;
font-size: var(--flo-t-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--flo-ambar-osc);
margin-bottom: 0.6rem;
}
.fluentform .ff-el-repeat { counter-reset: flo-parada; }
.fluentform .ff-el-repeat-buttons button,
.fluentform .ff_repeater_buttons button {
background: transparent;
border: 1.5px dashed var(--flo-azul-claro);
color: var(--flo-azul-claro);
font-weight: 600;
font-size: var(--flo-t-sm);
padding: 9px 16px;
border-radius: var(--flo-radio);
cursor: pointer;
transition: all var(--flo-trans);
}
.fluentform .ff-el-repeat-buttons button:hover {
background: var(--flo-azul-suave);
border-style: solid;
}
/* --- Bloque de accesibilidad destacado --- */
.flo-bloque-accesibilidad {
background: var(--flo-azul-suave);
border-left: 3px solid var(--flo-azul);
border-radius: var(--flo-radio);
padding: var(--flo-e-3);
margin: var(--flo-e-3) 0;
}
.flo-bloque-accesibilidad .ff-el-form-check { background: #fff; }
/* --- Consentimiento (letra pequeña legible) --- */
.flo-consent .ff-el-form-check {
border: none; background: transparent; padding: 0;
}
.flo-consent .ff-el-form-check label {
font-size: var(--flo-t-xs);
color: var(--flo-gris);
font-weight: 400;
line-height: 1.55;
}
.flo-consent a { color: var(--flo-azul-claro); text-decoration: underline; }
/* --- Errores: icono + texto, no solo color (accesibilidad) --- */
.fluentform .ff-el-is-error .ff-el-form-control {
border-color: var(--flo-error);
background: #FEF6F5;
}
.fluentform .error-text,
.fluentform .text-danger {
display: flex; align-items: flex-start; gap: 0.35rem;
color: var(--flo-error);
font-size: var(--flo-t-xs);
font-weight: 500;
margin-top: 0.35rem;
}
.fluentform .error-text::before,
.fluentform .text-danger::before { content: "\26A0"; flex-shrink: 0; }
/* --- Mensaje de éxito --- */
.fluentform .ff-message-success,
.ff_submit_success {
background: #F0F8F4;
border: 1px solid rgba(31,122,76,.28);
border-left: 4px solid var(--flo-exito);
color: #14532F;
padding: var(--flo-e-3);
border-radius: var(--flo-radio);
font-size: var(--flo-t-base);
}
/* --- Estado de carga --- */
.fluentform.ff-form-loading { opacity: .6; pointer-events: none; }
/* ==========================================================================
7. ACORDEÓN DE PREGUNTAS FRECUENTES
========================================================================== */
.flo-faq .et_pb_toggle {
background: #fff !important;
border: 1px solid var(--flo-linea) !important;
border-radius: var(--flo-radio) !important;
margin-bottom: 0.6rem !important;
padding: 0 !important;
transition: border-color var(--flo-trans), box-shadow var(--flo-trans);
}
.flo-faq .et_pb_toggle_open {
border-color: var(--flo-azul) !important;
box-shadow: var(--flo-sombra);
}
.flo-faq .et_pb_toggle_title {
font-family: var(--flo-font-titulo) !important;
font-size: 1.0625rem !important;
font-weight: 600 !important;
color: var(--flo-azul) !important;
padding: 18px 52px 18px 20px !important;
cursor: pointer;
line-height: 1.45;
}
.flo-faq .et_pb_toggle_content {
padding: 0 20px 20px !important;
color: var(--flo-gris);
font-size: var(--flo-t-sm);
line-height: 1.7;
}
/* Icono +/− propio */
.flo-faq .et_pb_toggle_title::before {
content: "+" !important;
font-family: var(--flo-font) !important;
font-size: 1.5rem !important;
font-weight: 400 !important;
color: var(--flo-ambar) !important;
right: 20px !important;
top: 50% !important;
transform: translateY(-50%);
transition: transform var(--flo-trans);
}
.flo-faq .et_pb_toggle_open .et_pb_toggle_title::before {
content: "\2212" !important;
}
/* ==========================================================================
8. FICHAS DE FLOTA
========================================================================== */
.flo-ficha {
border: 1px solid var(--flo-linea);
border-radius: var(--flo-radio-lg);
overflow: hidden;
background: #fff;
margin-bottom: var(--flo-e-5);
}
.flo-ficha img { width: 100%; height: auto; display: block; }
/* Tabla de especificaciones */
.flo-especs table {
width: 100%;
border-collapse: collapse;
font-size: var(--flo-t-sm);
}
.flo-especs tr { border-bottom: 1px solid var(--flo-linea); }
.flo-especs tr:last-child { border-bottom: none; }
.flo-especs td { padding: 11px 0; vertical-align: top; }
.flo-especs td:first-child {
font-weight: 600;
color: var(--flo-gris);
width: 48%;
padding-right: var(--flo-e-2);
}
.flo-especs td:last-child { color: var(--flo-tinta); }
/* Etiqueta de plazas sobre la foto */
.flo-plazas {
display: inline-block;
background: var(--flo-azul);
color: #fff;
font-size: var(--flo-t-xs);
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 100px;
}
/* ==========================================================================
9. PIE DE PÁGINA
========================================================================== */
#main-footer, .flo-footer {
background: var(--flo-azul-osc);
color: rgba(255,255,255,.68);
font-size: var(--flo-t-sm);
}
#main-footer h4, .flo-footer h4 {
color: #fff;
font-size: 0.9375rem;
text-transform: uppercase;
letter-spacing: .07em;
margin-bottom: var(--flo-e-2);
}
#main-footer a, .flo-footer a {
color: rgba(255,255,255,.68);
text-decoration: none;
transition: color var(--flo-trans);
}
#main-footer a:hover, .flo-footer a:hover { color: var(--flo-ambar); }
#footer-bottom, .flo-footer__legal {
border-top: 1px solid rgba(255,255,255,.11);
padding-top: var(--flo-e-2);
font-size: var(--flo-t-xs);
color: rgba(255,255,255,.48);
}
#et-footer-nav { background: transparent; }
/* ==========================================================================
10. ACCESIBILIDAD Y FOCO
========================================================================== */
/* Foco visible solo con teclado. Sin esto, el sitio no es navegable
para quien no usa ratón. */
:focus-visible {
outline: 3px solid var(--flo-ambar) !important;
outline-offset: 2px !important;
border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }
/* Enlace de salto al contenido. Añade en la cabecera del Theme Builder:
Saltar al contenido
y id="contenido" en la primera sección del cuerpo. */
.flo-skip {
position: absolute;
left: -9999px;
z-index: 100000;
padding: 12px 20px;
background: var(--flo-azul);
color: #fff;
font-weight: 600;
text-decoration: none;
border-radius: 0 0 var(--flo-radio) 0;
}
.flo-skip:focus { left: 0; top: 0; }
/* Solo para lectores de pantalla */
.flo-sr {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* Respeta a quien ha pedido menos movimiento en su sistema */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* Modo de alto contraste */
@media (prefers-contrast: more) {
:root {
--flo-gris: #33404B;
--flo-linea: #94A0AB;
}
.fluentform .ff-el-form-control { border-width: 2px; }
}
/* ==========================================================================
11. RENDIMIENTO Y UTILIDADES
========================================================================== */
/* Reserva el espacio de las imágenes para que no salte el layout (CLS) */
img, video, iframe {
max-width: 100%;
height: auto;
}
.et_pb_image img,
.et_pb_blurb img { display: block; }
/* La imagen del hero nunca en lazy load: es tu LCP.
Añade también fetchpriority="high" (lo hace el snippet del PHP). */
.flo-hero img { content-visibility: auto; }
/* Aplaza el renderizado de lo que está fuera de pantalla.
Mejora el INP en páginas largas. */
.flo-diferido {
content-visibility: auto;
contain-intrinsic-size: auto 500px;
}
/* Mapa: contenedor con proporción fija, sin salto de layout */
.flo-mapa {
position: relative;
aspect-ratio: 16 / 9;
border-radius: var(--flo-radio-lg);
overflow: hidden;
background: var(--flo-fondo);
}
.flo-mapa iframe,
.flo-mapa img {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
object-fit: cover;
}
/* --- Utilidades sueltas --- */
.flo-centrado { text-align: center; }
.flo-centrado p { margin-left: auto; margin-right: auto; }
.flo-estrecho { max-width: 760px; margin-inline: auto; }
.flo-medio { max-width: 900px; margin-inline: auto; }
.flo-sin-margen { margin: 0 !important; }
.flo-mt-3 { margin-top: var(--flo-e-3) !important; }
.flo-mb-3 { margin-bottom: var(--flo-e-3) !important; }
@media (max-width: 780px) {
.flo-oculta-movil { display: none !important; }
}
@media (min-width: 781px) {
.flo-solo-movil { display: none !important; }
}
/* En móvil, dos columnas de tarjetas en lugar de una */
@media (max-width: 980px) and (min-width: 481px) {
.flo-grid-2movil .et_pb_column {
width: 48% !important;
margin-right: 4% !important;
}
.flo-grid-2movil .et_pb_column:nth-child(2n) { margin-right: 0 !important; }
}
/* ==========================================================================
12. IMPRESIÓN
Alguien va a imprimir el presupuesto o la ficha de un autocar.
========================================================================== */
@media print {
#main-header, #main-footer, .flo-topbar,
.flo-movil-cta, .flo-cta-final,
.et_pb_section_video_bg, .flo-hero::before { display: none !important; }
body { font-size: 11pt; color: #000; background: #fff; }
h1, h2, h3 { color: #000; page-break-after: avoid; }
.et_pb_section { padding: 12pt 0 !important; }
a { color: #000; text-decoration: underline; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; }
.flo-ficha, .flo-tarjeta { page-break-inside: avoid; border: 1px solid #999; }
}