/* ==========================================================================
Fiducia Inmobiliaria — hoja del tema (web y editor)
Concepto: «El marco». El rectángulo fino del logotipo se convierte en el
recurso gráfico de la web: marcos desplazados en las fotos, ventanas que
se abren en los héroes y una línea de recorrido que une los pasos.
Índice:
1. Tokens 2. Base 3. Layout 4. Cabecera y menú 5. Componentes
6. Superficies 7. Secciones 8. Formularios 9. Preguntas frecuentes
10. Pie 11. Responsive 12. Movimiento 13. Accesibilidad y movimiento reducido
Clase para desactivar los efectos de un bloque: «fid-sin-animacion».
========================================================================== */
/* 1. Tokens ---------------------------------------------------------------- */
:root {
--fid-ease: cubic-bezier(0.23, 1, 0.32, 1);
--fid-ease-io: cubic-bezier(0.77, 0, 0.175, 1);
--fid-marino: var(--wp--preset--color--marino, #0a003d);
--fid-oliva: var(--wp--preset--color--oliva, #5b6b4f);
--fid-linea: var(--wp--preset--color--linea, #e3dacb);
--fid-crema: var(--wp--preset--color--crema, #f7f3ec);
/* Esquinas (petición del cliente, 24/10/2026): suaves, ni redondas ni en pico */
--fid-radio: 6px; /* botones, campos y elementos pequeños */
--fid-radio-tarjeta: 12px; /* tarjetas, cajas y paneles */
--fid-radio-foto: 12px; /* fotos */
--fid-marco: 14px;
--fid-cabecera-alto: 4.75rem;
--fid-flecha: url("data:image/svg+xml;utf8,");
--fid-mas: url("data:image/svg+xml;utf8,");
}
@supports (interpolate-size: allow-keywords) {
:root { interpolate-size: allow-keywords; }
}
/* 2. Base ------------------------------------------------------------------ */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--fid-cabecera-alto) + 1.5rem); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { text-wrap: balance; font-optical-sizing: auto; }
p { text-wrap: pretty; }
::selection { background: var(--fid-marino); color: #fff; }
img { height: auto; }
/* Enlaces dentro del texto */
:where(.wp-block-paragraph, p, .wp-block-list li) a:where(:not(.wp-element-button)) {
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.22em;
text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
transition: color 200ms ease, text-decoration-color 200ms ease;
}
:where(.wp-block-paragraph, p, .wp-block-list li) a:where(:not(.wp-element-button)):hover {
text-decoration-color: currentColor;
}
/* 3. Layout ---------------------------------------------------------------- */
.wp-site-blocks { overflow-x: clip; }
.wp-site-blocks > main,
.wp-site-blocks > footer,
main.wp-block-group { margin-block-start: 0; }
/* Las secciones a sangre se apilan sin huecos; el espacio lo da su relleno. */
.wp-block-post-content > .alignfull,
.wp-block-post-content > .wp-block-cover.alignfull { margin-block-start: 0; margin-block-end: 0; }
.fid-seccion { position: relative; }
.fid-seccion + .fid-seccion { margin-block-start: 0; }
.fid-estrecho { max-width: 40rem; }
.fid-texto-suave { color: var(--wp--preset--color--tinta-suave); }
/* 4. Cabecera y menú ------------------------------------------------------- */
header.wp-block-template-part {
position: sticky;
top: 0;
z-index: 60;
background: var(--wp--preset--color--base);
transition: box-shadow 300ms ease, border-color 300ms ease;
border-bottom: 1px solid transparent;
}
body.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 0); }
@media (max-width: 600px) {
/* En móvil la barra de administración no es fija */
body.admin-bar header.wp-block-template-part { top: 0; }
}
header.wp-block-template-part.is-scrolled {
border-bottom-color: var(--fid-linea);
box-shadow: 0 10px 30px -24px rgba(10, 0, 61, 0.35);
}
.fid-cabecera__barra { min-height: var(--fid-cabecera-alto); gap: var(--wp--preset--spacing--40); }
/* Escritorio (petición del cliente, 24/10/2026): la cabecera se encoge 1rem al bajar. El margen
inferior compensa la diferencia en el sitio original de la cabecera (ya fuera de la pantalla),
así el contenido no salta. */
@media (min-width: 782px) {
header.wp-block-template-part { transition: box-shadow 300ms ease, border-color 300ms ease, margin-bottom 300ms var(--fid-ease); }
.fid-cabecera__barra { transition: min-height 300ms var(--fid-ease); }
.fid-logo img { transition: width 300ms var(--fid-ease); }
header.wp-block-template-part.is-scrolled { margin-bottom: 1rem; }
header.is-scrolled .fid-cabecera__barra { min-height: calc(var(--fid-cabecera-alto) - 1rem); }
header.is-scrolled .fid-logo img { width: 136px !important; } /* gana al ancho en línea del bloque */
}
.fid-logo { margin: 0; flex-shrink: 0; }
/* Cabecera: logo sin marco (petición del cliente, 24/10/2026). Los logos no se redondean: el
radio de las fotos cortaba las esquinas del marco. */
.fid-logo img { display: block; width: clamp(124px, 11vw, 152px); border-radius: 0 !important; }
.fid-logo a { display: block; border-radius: var(--fid-radio); }
.fid-cabecera .wp-block-navigation { flex: 1; justify-content: flex-end; }
.fid-menu .wp-block-navigation-item__content { position: relative; padding-block: 0.5rem; }
.fid-menu > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0.15rem;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 300ms var(--fid-ease);
}
.fid-menu .current-menu-item > .wp-block-navigation-item__content::after,
.fid-menu .current-menu-ancestor > .wp-block-navigation-item__content::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
.fid-menu > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after {
transform: scaleX(1);
transform-origin: left;
}
}
.fid-menu .wp-block-navigation__submenu-container {
border: 1px solid var(--fid-linea) !important; /* el núcleo fija un borde negro en línea */
border-radius: var(--fid-radio-tarjeta);
padding: 0.5rem !important;
box-shadow: var(--wp--preset--shadow--suave);
min-width: 17rem !important;
}
.fid-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
padding: 0.6rem 0.75rem !important;
border-radius: var(--fid-radio);
white-space: nowrap;
transition: background-color 200ms ease;
}
.fid-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--fid-crema); }
.fid-menu__whatsapp,
.fid-menu__dato { display: none !important; }
.fid-cabecera__cta { flex-shrink: 0; }
.fid-cabecera__cta .wp-block-button__link { padding: 0.75rem 1.2rem; }
/* Menú móvil a pantalla completa */
.fid-menu .wp-block-navigation__responsive-container.is-menu-open {
padding: 1.25rem clamp(1.25rem, 6vw, 3rem) 2rem;
background: var(--wp--preset--color--base);
color: var(--fid-marino);
--navigation-layout-justification-setting: flex-start;
--navigation-layout-justify: flex-start;
}
.fid-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
gap: 0.25rem;
align-items: stretch;
padding-top: 3.5rem;
}
.fid-menu .is-menu-open :is(.wp-block-navigation__container, .wp-block-navigation__submenu-container, .wp-block-navigation-item) {
align-items: flex-start !important;
text-align: left;
}
.fid-menu .is-menu-open .wp-block-navigation__container { gap: 0; width: 100%; }
.fid-menu .is-menu-open .wp-block-navigation-item { width: 100%; }
.fid-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
font-family: var(--wp--preset--font-family--titulares);
font-size: clamp(1.625rem, 6vw, 2.25rem);
font-weight: 380;
padding-block: 0.6rem;
border-bottom: 1px solid var(--fid-linea);
width: 100%;
}
.fid-menu .is-menu-open .wp-block-navigation__submenu-container {
border: 0 !important;
box-shadow: none;
padding: 0.25rem 0 0.75rem 1rem !important;
min-width: 0 !important;
}
.fid-menu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
font-size: 1.0625rem;
white-space: normal;
padding: 0.5rem 0 !important;
}
.fid-menu .is-menu-open .fid-menu__whatsapp { display: flex !important; margin-top: 1.5rem; width: 100%; }
.fid-menu .is-menu-open .fid-menu__whatsapp > .wp-block-navigation-item__content { width: 100%; box-sizing: border-box; }
.fid-menu .is-menu-open .fid-menu__whatsapp > .wp-block-navigation-item__content {
font-family: var(--wp--preset--font-family--texto) !important;
font-size: 1rem !important;
font-weight: 600 !important;
justify-content: center;
text-align: center;
background: var(--fid-marino);
color: #fff !important;
border: 0 !important;
border-radius: var(--fid-radio);
padding: 1rem 1.5rem !important;
}
/* Menú móvil completo (petición del cliente, 24/10/2026): logo arriba, y teléfonos y horario
al final. El horario es el del briefing; si cambia, se cambia aquí. */
.fid-menu .is-menu-open .fid-menu__dato { display: flex !important; flex-direction: column; width: 100%; }
.fid-menu .is-menu-open .fid-menu__dato > .wp-block-navigation-item__content {
font-family: var(--wp--preset--font-family--texto) !important;
font-size: 1rem !important;
font-weight: 500 !important;
padding: 0.35rem 0 !important;
border: 0 !important;
}
.fid-menu .is-menu-open .fid-menu__dato--primero { margin-top: 1.5rem; }
.fid-menu .is-menu-open .fid-menu__dato--horario::after {
content: "De lunes a viernes, de 9:00 a 14:00 y de 17:00 a 21:00.";
display: block;
margin-top: 0.5rem;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--tinta-suave);
}
.fid-menu .is-menu-open .wp-block-navigation__responsive-dialog { position: relative; }
.fid-menu .is-menu-open .wp-block-navigation__responsive-dialog::before {
content: "";
position: absolute;
top: 15px;
left: 0;
right: 0;
margin-inline: auto;
width: 124px;
height: 15px;
background: url("../images/logo-fiducia-sin-marco.png") center / contain no-repeat;
pointer-events: none;
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
width: 44px;
height: 44px;
display: inline-grid;
place-items: center;
border-radius: var(--fid-radio);
}
.fid-menu .wp-block-navigation__responsive-container.is-menu-open { animation: fid-menu-entrada 260ms var(--fid-ease) both; }
@keyframes fid-menu-entrada { from { opacity: 0; transform: translateY(-8px); } }
/* 5. Componentes ----------------------------------------------------------- */
/* Antetítulo: mayúsculas espaciadas como el logotipo, con un trazo de marco */
.is-style-antetitulo {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: var(--wp--preset--font-size--x-small);
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
line-height: 1.4;
color: var(--fid-oliva);
}
.is-style-antetitulo::before {
content: "";
flex: 0 0 2rem;
height: 1px;
background: currentColor;
transform-origin: left;
}
.is-style-antetitulo.has-text-align-center { justify-content: center; }
/* Destacado: frase protagonista en la tipografía de titulares */
.is-style-destacado {
font-family: var(--wp--preset--font-family--titulares);
font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
font-weight: 360;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--fid-marino);
}
.has-large-font-size { line-height: 1.6; }
/* Botones */
.wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
min-height: 48px;
transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease, transform 160ms var(--fid-ease), box-shadow 250ms ease;
}
.wp-block-button__link:active { transform: scale(0.98); }
.wp-block-button.is-style-outline > .wp-block-button__link {
background: transparent;
color: var(--fid-marino);
border: 1px solid var(--fid-marino);
padding: 0.95rem 1.6rem;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
background: var(--fid-marino);
color: #fff;
}
.is-style-flecha > .wp-block-button__link::after,
.fid-flecha > .wp-block-button__link::after,
.fid-enlace-flecha a::after {
content: "";
width: 1.05em;
height: 1.05em;
flex-shrink: 0;
background: currentColor;
-webkit-mask: var(--fid-flecha) center / contain no-repeat;
mask: var(--fid-flecha) center / contain no-repeat;
transition: transform 300ms var(--fid-ease);
}
@media (hover: hover) and (pointer: fine) {
.wp-block-button__link:hover { box-shadow: 0 12px 24px -16px rgba(10, 0, 61, 0.55); }
.is-style-flecha > .wp-block-button__link:hover::after,
.fid-flecha > .wp-block-button__link:hover::after,
.fid-enlace-flecha a:hover::after { transform: translateX(4px); }
}
/* Colores de botón blindados: WordPress da a los botones una prioridad mínima, así que una regla
ajena como «a:visited { color: … }» (plugins, CSS antiguo) podría ponerles el color del fondo.
Estas reglas fijan texto y fondo en todos los estados; las de cada superficie van después. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:is(:link, :visited, :hover, :focus, :active),
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
color: #fff;
background-color: var(--fid-marino);
border-color: var(--fid-marino);
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:is(:hover, :focus-visible) {
background-color: var(--wp--preset--color--marino-hover);
border-color: var(--wp--preset--color--marino-hover);
}
/* Botones de contacto con icono */
.fid-boton-whatsapp > .wp-block-button__link::before,
.fid-boton-email > .wp-block-button__link::before {
content: "";
width: 1.2em;
height: 1.2em;
flex-shrink: 0;
background: currentColor;
-webkit-mask: var(--fid-ico) center / contain no-repeat;
mask: var(--fid-ico) center / contain no-repeat;
}
.fid-boton-whatsapp { --fid-ico: url("data:image/svg+xml;utf8,"); }
.fid-boton-email { --fid-ico: url("data:image/svg+xml;utf8,"); }
/* Enlaces con flecha (enlaces de texto con peso de llamada a la acción) */
.fid-enlace-flecha a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
text-decoration: none !important;
border-bottom: 1px solid currentColor;
padding-bottom: 0.2rem;
margin-right: 1.75rem;
min-height: 44px;
}
/* Imagen enmarcada: un marco fino desplazado, como el del logotipo */
.wp-block-image.is-style-enmarcada {
position: relative;
isolation: isolate;
margin-right: var(--fid-marco);
margin-bottom: var(--fid-marco);
}
.wp-block-image.is-style-enmarcada::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border: 1px solid var(--fid-marino);
border-radius: var(--fid-radio-foto);
transform: translate(var(--fid-marco), var(--fid-marco));
transition: transform 1.1s var(--fid-ease) 0.15s, opacity 0.6s ease 0.15s;
pointer-events: none;
}
.wp-block-image.is-style-enmarcada img { border-radius: var(--fid-radio-foto); }
.has-marino-background-color .wp-block-image.is-style-enmarcada::after { border-color: rgba(255, 255, 255, 0.55); }
/* Imágenes en general */
.wp-block-image img { border-radius: var(--fid-radio-foto); }
.fid-foto-recorte { overflow: hidden; border-radius: var(--fid-radio-foto); }
.fid-foto-recorte img { transition: transform 900ms var(--fid-ease); }
/* Tarjeta (petición del cliente, 24/10/2026: interior crema para que se distinga del fondo blanco) */
.wp-block-group.is-style-tarjeta {
position: relative;
background: var(--fid-crema);
border: 1px solid var(--fid-linea);
border-radius: var(--fid-radio-tarjeta);
padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
transition: transform 400ms var(--fid-ease), box-shadow 400ms var(--fid-ease), border-color 300ms ease;
}
@media (hover: hover) and (pointer: fine) {
.wp-block-group.is-style-tarjeta:hover {
transform: translateY(-4px);
box-shadow: var(--wp--preset--shadow--elevada);
border-color: color-mix(in srgb, var(--fid-marino) 25%, var(--fid-linea));
}
}
.is-style-tarjeta .wp-block-buttons { margin-top: auto; padding-top: 0.5rem; }
.wp-block-columns.fid-columnas-igualadas > .wp-block-column { display: flex; }
.wp-block-columns.fid-columnas-igualadas > .wp-block-column > .is-style-tarjeta { display: flex; flex-direction: column; width: 100%; }
/* Iconos de línea (decorativos, se dibujan con CSS) */
.fid-icono::before {
content: "";
display: block;
width: 2.75rem;
height: 2.75rem;
margin-bottom: 1.5rem;
background-color: var(--fid-oliva);
-webkit-mask: var(--fid-icono) center / contain no-repeat;
mask: var(--fid-icono) center / contain no-repeat;
}
.fid-icono--comprar { --fid-icono: url("data:image/svg+xml;utf8,"); }
.fid-icono--vender { --fid-icono: url("data:image/svg+xml;utf8,"); }
.fid-icono--invertir { --fid-icono: url("data:image/svg+xml;utf8,"); }
.fid-icono--escucha { --fid-icono: url("data:image/svg+xml;utf8,"); }
.fid-icono--acompanamiento { --fid-icono: url("data:image/svg+xml;utf8,"); }
.fid-icono--criterio { --fid-icono: url("data:image/svg+xml;utf8,"); }
.fid-icono--primera { --fid-icono: url("data:image/svg+xml;utf8,"); }
.fid-icono--segunda { --fid-icono: url("data:image/svg+xml;utf8,"); }
.fid-icono--extranjero { --fid-icono: url("data:image/svg+xml;utf8,"); }
/* Tarjetas de zona con foto */
.fid-zona { position: relative; }
.fid-zona .wp-block-image { margin-bottom: 1.25rem; }
.fid-zona .wp-block-image img { width: 100%; }
.fid-zona .wp-block-button__link::before,
.fid-zona .fid-enlace-flecha a::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
/* Tarjetas de zona de distinto ancho con las fotos a la misma altura (Inicio) */
.fid-zonas-misma-altura .fid-foto-recorte img {
height: clamp(17rem, 34vw, 30rem);
aspect-ratio: auto !important; /* la proporción del bloque queda como guía para el editor */
}
@media (max-width: 781px) {
.fid-zonas-misma-altura .fid-foto-recorte img { height: auto; aspect-ratio: 4 / 3 !important; }
}
.fid-zona__nombre {
margin: 0 0 1rem;
font-family: var(--wp--preset--font-family--titulares);
font-weight: 400;
line-height: 1.2;
color: var(--fid-marino);
}
.fid-zona h3 { margin-bottom: 0.5rem; }
@media (hover: hover) and (pointer: fine) {
.fid-zona:hover .fid-foto-recorte img { transform: scale(1.045); }
.fid-zona:hover .is-style-flecha > .wp-block-button__link::after,
.fid-zona:hover .fid-enlace-flecha a::after { transform: translateX(4px); }
}
/* Recorrido: pasos unidos por una línea que se dibuja */
.wp-block-columns.is-style-recorrido {
counter-reset: fid-paso;
position: relative;
padding-top: 2.75rem;
margin-top: var(--wp--preset--spacing--50);
}
.wp-block-columns.is-style-recorrido::before {
content: "";
position: absolute;
top: 0.875rem;
left: 0;
right: 0;
height: 1px;
background: var(--fid-marino);
transform-origin: left;
transition: transform 1.6s var(--fid-ease-io) 0.2s;
}
.wp-block-columns.is-style-recorrido > .wp-block-column { position: relative; counter-increment: fid-paso; }
.wp-block-columns.is-style-recorrido > .wp-block-column::before {
content: counter(fid-paso, decimal-leading-zero);
position: absolute;
top: -2.75rem;
left: 0;
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
padding: 0 0.5rem;
box-sizing: content-box;
background: var(--wp--preset--color--base);
color: var(--fid-oliva);
font-size: var(--wp--preset--font-size--x-small);
font-weight: 700;
letter-spacing: 0.12em;
}
.has-crema-background-color .wp-block-columns.is-style-recorrido > .wp-block-column::before { background: var(--fid-crema); }
.wp-block-columns.is-style-recorrido .fid-paso__titulo {
font-family: var(--wp--preset--font-family--titulares);
font-size: var(--wp--preset--font-size--x-large);
font-weight: 400;
line-height: 1.25;
color: var(--fid-marino);
margin: 0;
}
/* Lista editorial numerada (perfiles, valores) */
.fid-lista-numerada { counter-reset: fid-num; }
.fid-lista-numerada > .wp-block-column,
.fid-lista-numerada > .wp-block-group { counter-increment: fid-num; border-top: 1px solid var(--fid-linea); padding-top: 1.5rem; }
.fid-lista-numerada > .wp-block-column::before,
.fid-lista-numerada > .wp-block-group::before {
content: counter(fid-num, decimal-leading-zero);
display: block;
margin-bottom: 1rem;
font-size: var(--wp--preset--font-size--x-small);
font-weight: 700;
letter-spacing: 0.14em;
color: var(--fid-oliva);
}
/* Con icono: el pseudoelemento dibuja el icono en lugar del número */
.fid-lista-numerada.fid-icono-lista > .wp-block-column.fid-icono::before { content: ""; margin-bottom: 1.25rem; }
/* Lista con líneas */
.wp-block-list.is-style-lineas { list-style: none; padding: 0; }
.wp-block-list.is-style-lineas li { padding: 0.85rem 0; border-bottom: 1px solid var(--fid-linea); }
/* Datos de contacto rápidos */
.fid-contacto-rapido { gap: 1rem 2rem; }
.fid-contacto-rapido .wp-block-social-links { gap: 0.5rem; }
.wp-block-social-links.is-style-logos-only .wp-social-link { color: currentColor; }
.wp-block-social-links .wp-social-link a { padding: 0.55rem; border-radius: 50%; transition: background-color 200ms ease, transform 160ms var(--fid-ease); }
.wp-block-social-links .wp-social-link a:active { transform: scale(0.94); }
.wp-block-social-links .wp-social-link svg { width: 1.4rem; height: 1.4rem; }
.fid-horario { font-size: var(--wp--preset--font-size--small); margin: 0; }
/* 6. Superficies --------------------------------------------------------- */
/* Azul de marca: texto claro, botones invertidos, foco claro */
.has-marino-background-color { color: rgba(255, 255, 255, 0.86); }
.has-marino-background-color :where(h1, h2, h3, h4, h5, h6) { color: #fff; }
.has-marino-background-color .is-style-antetitulo { color: rgba(255, 255, 255, 0.72); }
/* Enlaces sobre azul, también visitados (para que ningún CSS ajeno los ponga en azul) */
.has-marino-background-color a:not(.wp-element-button):is(:link, :visited) { color: #fff; }
.has-marino-background-color a:not(.wp-element-button):hover { color: var(--fid-crema); }
.has-marino-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
background: #fff;
color: var(--fid-marino);
border-color: #fff;
}
.has-marino-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.has-marino-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus-visible {
background: var(--fid-crema);
border-color: var(--fid-crema);
color: var(--fid-marino);
}
.has-marino-background-color .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.has-marino-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-marino-background-color .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
background: #fff;
color: var(--fid-marino);
border-color: #fff;
}
.has-marino-background-color .wp-social-link a:hover { background: rgba(255, 255, 255, 0.12); }
.has-marino-background-color .fid-texto-suave { color: rgba(255, 255, 255, 0.72); }
.has-marino-background-color .wp-block-separator { color: rgba(255, 255, 255, 0.2); }
/* Crema: tarjetas blancas, el resto igual que el blanco */
.has-crema-background-color .wp-social-link a:hover,
.has-base-background-color .wp-social-link a:hover { background: var(--wp--preset--color--arena); }
/* 7. Secciones ------------------------------------------------------------- */
/* Héroe de inicio: texto + collage de fotos reales */
.fid-hero { position: relative; }
.fid-hero > .wp-block-columns { align-items: center; }
.fid-hero h1 { margin-top: 1.25rem; }
.fid-hero__texto > .wp-block-paragraph:not(.is-style-antetitulo),
.fid-hero__texto > p:not(.is-style-antetitulo) { max-width: 34rem; }
.fid-collage { position: relative; padding-bottom: 3.5rem; padding-left: clamp(1.5rem, 4vw, 4rem); }
.fid-collage .fid-collage__principal { margin: 0; }
.fid-collage .fid-collage__principal img { width: 100%; aspect-ratio: 4 / 5; max-height: min(74svh, 42rem); object-fit: cover; }
.fid-collage .fid-collage__secundaria {
position: absolute;
left: 0;
bottom: 0;
width: 44%;
margin: 0;
z-index: 2;
padding: 6px;
background: var(--wp--preset--color--base);
border-radius: var(--fid-radio-tarjeta);
box-shadow: var(--wp--preset--shadow--elevada);
}
.fid-collage .fid-collage__secundaria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--fid-radio-tarjeta) - 6px); }
.fid-hero__nota {
position: absolute;
right: 0;
bottom: 1rem;
z-index: 2;
margin: 0;
padding: 0.5rem 0.9rem;
background: var(--wp--preset--color--base);
border: 1px solid var(--fid-linea);
border-radius: var(--fid-radio);
font-size: var(--wp--preset--font-size--x-small);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fid-marino);
}
/* Héroe dividido: la foto cabe en la primera pantalla junto al texto */
.fid-hero-dividido .wp-block-image img { max-height: min(calc(100svh - var(--fid-cabecera-alto) - 7rem), 38rem); }
.fid-hero-dividido h1 { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem); }
/* Héroe panorámico: texto y una ventana que se abre al bajar */
.wp-block-image.fid-panoramica { margin-bottom: 0; margin-top: var(--wp--preset--spacing--50); overflow: hidden; border-radius: var(--fid-radio-foto); }
.fid-panoramica img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
/* Héroe con foto de fondo (zonas) */
.wp-block-cover.fid-hero-cover { min-height: min(88svh, 52rem); }
.wp-block-cover.fid-hero-cover .wp-block-cover__inner-container { width: 100%; position: relative; z-index: 2; }
.wp-block-cover.fid-hero-cover :where(h1, p) { color: #fff; }
/* Degradado azul de abajo arriba para que el texto se lea sobre cualquier foto */
.wp-block-cover.fid-hero-cover::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg, rgba(10, 0, 61, 0) 30%, rgba(10, 0, 61, 0.55) 65%, rgba(10, 0, 61, 0.88) 100%);
}
.wp-block-cover.fid-hero-cover .is-style-antetitulo { color: rgba(255, 255, 255, 0.85); }
.wp-block-cover.fid-hero-cover .wp-block-button:not(.is-style-outline) > .wp-block-button__link { background: #fff; color: var(--fid-marino); border-color: #fff; }
.wp-block-cover.fid-hero-cover .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: var(--fid-crema); border-color: var(--fid-crema); }
.wp-block-cover.fid-hero-cover .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, 0.75); }
.wp-block-cover.fid-hero-cover .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: #fff; color: var(--fid-marino); }
.wp-block-cover.fid-hero-cover .wp-block-cover__inner-container > * { max-width: 46rem; }
/* Escritorio (petición del cliente, 30/10/2026): en Chiclana y Aljarafe el texto va en el centro
de la pantalla, en vertical y en horizontal, en lugar de abajo a la izquierda. !important gana
a la posición y al relleno guardados en el bloque Cover. */
@media (min-width: 782px) {
.wp-block-cover.fid-hero-cover {
align-items: center !important;
justify-content: center !important;
padding: var(--wp--preset--spacing--60) var(--wp--style--root--padding-right) !important;
}
.wp-block-cover.fid-hero-cover .wp-block-cover__inner-container { max-width: 50rem; margin-inline: auto; text-align: center; }
.wp-block-cover.fid-hero-cover .wp-block-cover__inner-container .fid-hero-entrada > * { margin-inline: auto; }
.wp-block-cover.fid-hero-cover .wp-block-buttons { justify-content: center; }
/* Con el texto en el centro, el azul se reparte por igual detrás de él */
.wp-block-cover.fid-hero-cover::before { background: linear-gradient(180deg, rgba(10, 0, 61, 0.15) 0%, rgba(10, 0, 61, 0.5) 45%, rgba(10, 0, 61, 0.55) 60%, rgba(10, 0, 61, 0.75) 100%); }
.wp-block-cover.fid-hero-cover .is-style-antetitulo { justify-content: center; }
.wp-block-cover.fid-hero-cover .is-style-antetitulo::after { content: ""; flex: 0 0 2rem; height: 1px; background: currentColor; }
}
/* Título a la izquierda, texto a la derecha */
.fid-titulo-lateral > .wp-block-column:first-child h2 { position: sticky; top: calc(var(--fid-cabecera-alto) + 2rem); }
/* Cita protagonista con regla vertical */
.fid-cita {
border-left: 1px solid var(--fid-marino);
padding-left: clamp(1.25rem, 3vw, 2.5rem);
}
/* Llamada final */
.fid-cta { position: relative; overflow: hidden; border-radius: var(--fid-radio-tarjeta); }
.fid-cta::before {
content: "";
position: absolute;
inset: clamp(0.75rem, 2vw, 1.5rem);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--fid-radio);
pointer-events: none;
}
.fid-cta h2 { max-width: 20ch; }
/* Páginas legales: columna de lectura con secciones separadas por una línea */
.fid-legal h2 {
margin-top: var(--wp--preset--spacing--50);
padding-top: var(--wp--preset--spacing--40);
border-top: 1px solid var(--fid-linea);
}
.fid-legal h2:first-child { margin-top: 0; }
/* Página de contacto */
.fid-canal {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.fid-canal .fid-canal__dato {
font-family: var(--wp--preset--font-family--titulares);
font-size: var(--wp--preset--font-size--x-large);
color: var(--fid-marino);
line-height: 1.3;
margin: 0;
}
.fid-canal .fid-canal__dato a { text-decoration: none; }
/* 8. Formularios ----------------------------------------------------------- */
/* Petición del cliente (24/10/2026): la caja contrasta siempre con su sección: crema sobre fondo
blanco (Contacto) y blanca sobre fondo crema. Los campos van siempre en blanco. */
.fid-form-caja {
background: var(--fid-crema);
border: 1px solid var(--fid-linea);
border-radius: var(--fid-radio-tarjeta);
padding: clamp(1.5rem, 1rem + 2vw, 3rem);
box-shadow: var(--wp--preset--shadow--suave);
}
.has-crema-background-color .fid-form-caja,
.has-crema-background-color .wp-block-group.is-style-tarjeta { background: var(--wp--preset--color--base); }
.fid-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.25rem; }
.fid-form__campo { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.fid-form__campo--ancho,
.fid-form__privacidad,
.fid-form__acciones,
.fid-form__aviso { grid-column: 1 / -1; }
.fid-form label,
.fid-form legend {
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
color: var(--fid-marino);
}
.fid-form__opcional { font-weight: 400; color: var(--wp--preset--color--tinta-suave); }
.fid-form input[type="text"],
.fid-form input[type="email"],
.fid-form input[type="tel"],
.fid-form select,
.fid-form textarea {
width: 100%;
min-height: 48px;
padding: 0.8rem 0.95rem;
font: inherit;
font-size: 1rem;
color: var(--wp--preset--color--tinta);
background: var(--wp--preset--color--base);
border: 1px solid #cfc4b2;
border-radius: var(--fid-radio);
transition: border-color 200ms ease, box-shadow 200ms ease;
box-sizing: border-box;
}
.fid-form textarea { min-height: 8rem; resize: vertical; }
.fid-form select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.9rem center;
background-size: 1.1rem;
padding-right: 2.6rem;
}
.fid-form input:focus-visible,
.fid-form select:focus-visible,
.fid-form textarea:focus-visible {
outline: none;
border-color: var(--fid-marino);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--fid-marino) 18%, transparent);
}
.fid-form__campo--destacado input { border-color: var(--fid-marino); }
.fid-form__privacidad { display: flex; gap: 0.75rem; align-items: flex-start; font-size: var(--wp--preset--font-size--small); }
.fid-form__privacidad input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--fid-marino); flex-shrink: 0; }
.fid-form__privacidad label { font-weight: 400; color: var(--wp--preset--color--tinta); }
.fid-form__trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.fid-form__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.fid-form__acciones .wp-element-button { cursor: pointer; }
.fid-form__aviso {
padding: 1rem 1.25rem;
border-radius: var(--fid-radio);
border: 1px solid var(--fid-linea);
background: var(--wp--preset--color--base);
font-size: var(--wp--preset--font-size--small);
}
.fid-form__aviso--ok { border-color: var(--fid-oliva); background: #eef1ea; color: #2f3a27; display: flex; align-items: center; gap: 0.875rem; }
.fid-form__check { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; fill: none; stroke: var(--fid-oliva); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* El círculo y luego el check se dibujan una vez (si el visitante no pide reducir movimiento) */
@media (prefers-reduced-motion: no-preference) {
.fid-form__check :is(circle, path) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fid-dibujar 600ms var(--fid-ease) forwards; }
.fid-form__check path { animation-delay: 450ms; animation-duration: 400ms; }
.fid-form__aviso--ok { animation: fid-aviso-entrada 400ms var(--fid-ease) both; }
}
@keyframes fid-dibujar { to { stroke-dashoffset: 0; } }
@keyframes fid-aviso-entrada { from { opacity: 0; transform: translateY(6px); } }
.fid-form__aviso--error { border-color: #a1442c; background: #fbefea; color: #6e2a18; }
.fid-form__aviso:focus { outline: 2px solid var(--fid-marino); outline-offset: 3px; }
.fid-form__nota { grid-column: 1 / -1; margin: 0; font-size: 0.8125rem; color: var(--wp--preset--color--tinta-suave); }
/* 9. Preguntas frecuentes -------------------------------------------------- */
.wp-block-details { padding: 0; margin: 0; }
.wp-block-details + .wp-block-details { margin-top: 0; }
.fid-faq { border-top: 1px solid var(--fid-linea); }
.wp-block-details > summary {
position: relative;
list-style: none;
cursor: pointer;
padding: 1.4rem 3rem 1.4rem 0;
font-family: var(--wp--preset--font-family--titulares);
font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
font-weight: 400;
line-height: 1.35;
color: var(--fid-marino);
border-radius: var(--fid-radio);
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after {
content: "";
position: absolute;
right: 0.25rem;
top: 50%;
width: 1.5rem;
height: 1.5rem;
margin-top: -0.75rem;
background: currentColor;
-webkit-mask: var(--fid-mas) center / contain no-repeat;
mask: var(--fid-mas) center / contain no-repeat;
transition: transform 300ms var(--fid-ease);
}
.wp-block-details[open] > summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { margin: 0 0 1.5rem; max-width: 44rem; color: var(--wp--preset--color--tinta); }
@media (hover: hover) and (pointer: fine) {
.wp-block-details > summary:hover { color: var(--fid-oliva); }
}
@supports selector(::details-content) {
.wp-block-details::details-content {
block-size: 0;
overflow: clip;
opacity: 0;
transition: block-size 380ms var(--fid-ease), opacity 300ms ease, content-visibility 380ms allow-discrete;
}
.wp-block-details[open]::details-content { block-size: auto; opacity: 1; }
}
/* 10. Pie -------------------------------------------------------------------- */
.fid-pie { font-size: var(--wp--preset--font-size--small); }
.fid-pie .fid-logo img { width: 156px; }
.fid-pie__titulo {
font-size: var(--wp--preset--font-size--x-small);
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6) !important;
margin-bottom: 1rem;
}
.fid-pie .wp-block-list { list-style: none; padding: 0; margin: 0; }
.fid-pie .wp-block-list li { padding: 0.3rem 0; }
.fid-pie .wp-block-list a { text-decoration: none; }
.fid-pie .wp-block-list a:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.fid-pie__legal { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); margin: 0; }
.fid-pie__enlaces-legales a { color: rgba(255, 255, 255, 0.78) !important; text-decoration: none !important; }
.fid-pie__enlaces-legales a:hover { color: #fff !important; text-decoration: underline !important; }
/* Barra fija de WhatsApp en móvil (petición del cliente, 24/10/2026). Aparece al dejar atrás la
primera pantalla y se retira sobre la llamada final, el pie, un formulario en uso o el menú
abierto (lo decide fiducia.js). Sin JavaScript no aparece. */
.fid-barra-whatsapp { display: none; }
@media (max-width: 781px) {
.fid-barra-whatsapp {
display: block;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
margin: 0 !important;
padding: 0.625rem var(--wp--style--root--padding-left, 1.5rem) calc(0.625rem + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-top: 1px solid var(--fid-linea);
box-shadow: 0 -10px 30px -24px rgba(10, 0, 61, 0.45);
transform: translateY(105%);
visibility: hidden;
transition: transform 320ms var(--fid-ease), visibility 0s linear 320ms;
}
.fid-barra-whatsapp.is-visible { transform: none; visibility: visible; transition: transform 320ms var(--fid-ease), visibility 0s; }
.fid-barra-whatsapp .wp-block-buttons { margin: 0; }
.fid-barra-whatsapp .wp-block-button,
.fid-barra-whatsapp .wp-block-button__link { width: 100%; }
.fid-barra-whatsapp .wp-block-button__link { justify-content: center; padding-block: 0.85rem; }
html.has-modal-open .fid-barra-whatsapp { visibility: hidden; }
}
/* 11. Responsive ------------------------------------------------------------ */
@media (max-width: 781px) {
.wp-block-buttons.fid-cabecera__cta { display: none; }
.fid-collage { padding-left: 1.25rem; padding-bottom: 2.5rem; margin-top: 1rem; }
.fid-collage .fid-collage__principal img { aspect-ratio: 4 / 3.6; }
.fid-collage .fid-collage__secundaria { width: 40%; }
.fid-hero__nota { display: none; }
.fid-titulo-lateral > .wp-block-column:first-child h2 { position: static; }
.fid-panoramica img { aspect-ratio: 4 / 3; }
.fid-form { grid-template-columns: 1fr; }
.wp-block-columns.is-style-recorrido { padding-top: 0; padding-left: 2.5rem; }
.wp-block-columns.is-style-recorrido::before {
top: 0;
bottom: 0;
left: 0.875rem;
right: auto;
width: 1px;
height: auto;
transform-origin: top;
}
.wp-block-columns.is-style-recorrido > .wp-block-column::before { top: 0; left: -2.5rem; padding: 0.25rem 0; width: 1.75rem; }
.wp-block-columns.is-style-recorrido > .wp-block-column { padding-top: 0.15rem; }
/* Petición del cliente (30/10/2026): héroe a pantalla completa con el texto centrado en
vertical. !important gana al min-height y a la posición del bloque Cover. */
.wp-block-cover.fid-hero-cover {
min-height: calc(100svh - var(--fid-cabecera-alto) - 1px) !important;
align-items: center !important;
padding: 3rem var(--wp--style--root--padding-right, 2rem) 3rem var(--wp--style--root--padding-left, 2rem) !important;
}
.wp-block-cover.fid-hero-cover::before { background: linear-gradient(180deg, rgba(10, 0, 61, 0.25) 0%, rgba(10, 0, 61, 0.62) 18%, rgba(10, 0, 61, 0.72) 60%, rgba(10, 0, 61, 0.86) 100%); }
.wp-block-cover.fid-hero-cover h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); margin-top: 0.75rem; }
.wp-block-cover.fid-hero-cover .has-large-font-size { font-size: 1rem; line-height: 1.6; }
.wp-block-cover.fid-hero-cover .wp-block-buttons { gap: 0.625rem; }
.wp-block-cover.fid-hero-cover .wp-block-button__link { padding: 0.8rem 0.9rem; font-size: 0.8125rem; }
.fid-enlace-flecha a { margin-right: 1.25rem; }
}
@media (min-width: 782px) and (max-width: 1080px) {
.fid-cabecera .wp-block-navigation { font-size: 0.875rem; --wp--style--block-gap: 1rem; }
}
/* Móvil (petición del cliente, 24/10/2026): todos los héroes con la foto de fondo, como en las
páginas de zona, para que la primera pantalla se vea entera. En escritorio no cambia nada. */
@media (max-width: 781px) {
.fid-seccion:is(.fid-hero, :has(> .wp-block-columns.fid-hero-dividido)) {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
/* Petición del cliente (30/10/2026): el héroe ocupa toda la primera pantalla (bajo la
cabecera) con el texto centrado en vertical: el mismo espacio arriba y abajo. */
justify-content: center;
min-height: calc(100svh - var(--fid-cabecera-alto) - 1px);
padding-top: 3rem !important; /* igual arriba y abajo para que el centrado sea real */
padding-bottom: 3rem !important;
color: #fff;
overflow: hidden;
}
/* Degradado azul para que el texto se lea sobre cualquier foto */
.fid-seccion:is(.fid-hero, :has(> .wp-block-columns.fid-hero-dividido))::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
/* El texto va centrado: azul uniforme en la zona del texto, algo más claro arriba */
background: linear-gradient(180deg, rgba(10, 0, 61, 0.3) 0%, rgba(10, 0, 61, 0.68) 18%, rgba(10, 0, 61, 0.78) 60%, rgba(10, 0, 61, 0.9) 100%);
}
/* La columna de la foto pasa a ser el fondo de la sección */
.fid-seccion:is(.fid-hero, :has(> .wp-block-columns.fid-hero-dividido)) .wp-block-column:has(img) {
position: absolute;
inset: 0;
z-index: -2;
margin: 0;
/* La alineación vertical del bloque (align-self: center) encogería la foto a altura cero */
align-self: stretch !important;
justify-self: stretch;
}
.fid-seccion:is(.fid-hero, :has(> .wp-block-columns.fid-hero-dividido)) .wp-block-column:has(img) :is(.fid-collage, .wp-block-image) {
position: absolute;
inset: 0;
margin: 0;
padding: 0;
}
.fid-seccion:is(.fid-hero, :has(> .wp-block-columns.fid-hero-dividido)) .wp-block-column:has(img) img {
width: 100%;
height: 100% !important;
max-height: none !important;
aspect-ratio: auto !important;
object-fit: cover;
border-radius: 0;
/* La animación de entrada (fid-ventana) deja un recorte redondeado: la foto de fondo va recta.
!important gana a la animación y la ventana no se ve en móvil, solo el acercamiento. */
clip-path: none !important;
}
.fid-seccion:is(.fid-hero, :has(> .wp-block-columns.fid-hero-dividido)) .wp-block-image.is-style-enmarcada::after,
.fid-hero .fid-collage__secundaria { display: none; }
/* Texto, antetítulo y botones sobre la foto */
.fid-seccion:is(.fid-hero, :has(> .wp-block-columns.fid-hero-dividido)) :is(h1, p) { color: #fff; }
.fid-seccion:is(.fid-hero, :has(> .wp-block-columns.fid-hero-dividido)) h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 2.5rem); margin-top: 0.75rem; }
.fid-seccion:is(.fid-hero, :has(> .wp-block-columns.fid-hero-dividido)) .has-large-font-size { font-size: 1.0625rem; }
.fid-seccion:is(.fid-hero, :has(> .wp-block-columns.fid-hero-dividido)) .is-style-antetitulo { color: rgba(255, 255, 255, 0.85); }
.fid-seccion:is(.fid-hero, :has(> .wp-block-columns.fid-hero-dividido)) .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
background: #fff;
color: var(--fid-marino);
border-color: #fff;
}
.fid-seccion:is(.fid-hero, :has(> .wp-block-columns.fid-hero-dividido)) .wp-block-button.is-style-outline > .wp-block-button__link {
color: #fff;
border-color: rgba(255, 255, 255, 0.75);
}
.fid-seccion:is(.fid-hero, :has(> .wp-block-columns.fid-hero-dividido)) :is(a, .wp-block-button__link):focus-visible { outline-color: #fff; }
/* Héroe más compacto (petición del cliente, 24/10/2026, pensado para Comprar): párrafos
secundarios algo menores y botones en una fila cuando caben. */
.fid-seccion:is(.fid-hero, :has(> .wp-block-columns.fid-hero-dividido)) p:not(.has-large-font-size):not(.is-style-antetitulo) { font-size: 0.9375rem; line-height: 1.6; }
.fid-seccion:is(.fid-hero, :has(> .wp-block-columns.fid-hero-dividido)) .wp-block-buttons { gap: 0.625rem; }
.fid-seccion:is(.fid-hero, :has(> .wp-block-columns.fid-hero-dividido)) .wp-block-button__link { padding: 0.8rem 0.9rem; font-size: 0.8125rem; }
.fid-seccion:is(.fid-hero, :has(> .wp-block-columns.fid-hero-dividido)) h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); }
/* Contacto (petición del cliente, 30/10/2026): en móvil, el formulario justo después del H1.
La columna del texto se «disuelve» (display: contents) para poder ordenar sus bloques
junto a la del formulario; en escritorio no cambia nada y no hace falta restaurar la página. */
.wp-block-columns:has(> .wp-block-column > h1):has(> .wp-block-column > .fid-form-caja) { row-gap: 0; }
.wp-block-columns:has(> .wp-block-column > h1):has(> .wp-block-column > .fid-form-caja) > .wp-block-column:has(> h1) { display: contents; }
.wp-block-columns:has(> .wp-block-column > h1):has(> .wp-block-column > .fid-form-caja) > .wp-block-column:has(> h1) > * { flex: 0 0 100%; order: 3; }
.wp-block-columns:has(> .wp-block-column > h1):has(> .wp-block-column > .fid-form-caja) > .wp-block-column:has(> h1) > h1 { order: 1; margin-bottom: 0; }
.wp-block-columns:has(> .wp-block-column > h1):has(> .wp-block-column > .fid-form-caja) > .wp-block-column:has(> .fid-form-caja) { order: 2; margin-top: 1.5rem; }
.wp-block-columns:has(> .wp-block-column > h1):has(> .wp-block-column > .fid-form-caja) > .wp-block-column:has(> h1) > h1 + * { margin-top: var(--wp--preset--spacing--50); }
/* Llamada final: margen interior para que el texto no toque el borde ni el marco */
.fid-cta {
padding-left: clamp(1.75rem, 7vw, 2.5rem) !important;
padding-right: clamp(1.75rem, 7vw, 2.5rem) !important;
}
.fid-cta::before { inset: 0.625rem; }
.fid-cta .wp-block-buttons { flex-direction: column; align-items: stretch; }
.fid-cta .wp-block-button__link { width: 100%; }
/* Petición del cliente (24/10/2026): más margen lateral en móvil (theme.json, 24 px); las
tarjetas y cajas recuperan ese espacio por dentro para que el texto no quede estrecho. */
.wp-block-group.is-style-tarjeta,
.fid-form-caja { padding: 1.25rem; }
}
/* Móvil con menú hamburguesa (por debajo de 600 px): botón a la izquierda y logo centrado */
@media (max-width: 599px) {
.fid-cabecera__barra { position: relative; justify-content: center !important; }
/* Sin transform: si no, el menú a pantalla completa (position: fixed) quedaría encerrado aquí */
.fid-cabecera__barra > .wp-block-navigation { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; flex: 0 0 auto; }
.fid-menu .wp-block-navigation__responsive-container-open { margin-left: -0.6rem; }
.fid-menu .wp-block-navigation__responsive-container-close { right: auto; left: 0; }
.fid-menu .wp-block-navigation__responsive-dialog { text-align: left; }
}
/* Cuatro zonas: 2 × 2 en tablet y en móviles grandes */
@media (min-width: 560px) and (max-width: 1080px) {
.wp-block-columns.fid-zonas-4 { flex-wrap: wrap !important; }
.wp-block-columns.fid-zonas-4 > .wp-block-column { flex-basis: calc(50% - var(--wp--preset--spacing--40)) !important; flex-grow: 0; }
}
/* 12. Movimiento ------------------------------------------------------------- */
/* Personalidad: pausada y precisa. Solo transform y opacity; nada se repite.
El estado oculto solo existe con la clase «fid-motion», que pone el script
de la cabecera y que se retira sola si el JS del tema no llega a cargar. */
.fid-motion .fid-reveal:not(.fid-sin-animacion) {
opacity: 0;
transform: translate3d(0, 28px, 0);
transition: opacity 0.9s var(--fid-ease), transform 1.1s var(--fid-ease);
transition-delay: calc(var(--fid-i, 0) * 90ms);
}
.fid-motion .fid-reveal.is-visible { opacity: 1; transform: none; }
/* Marcos: aparecen pegados a la foto y se desplazan a su sitio */
.fid-motion .wp-block-image.is-style-enmarcada:not(.is-visible):not(.fid-sin-animacion)::after { transform: translate(0, 0); opacity: 0; }
/* Recorrido: la línea se dibuja al entrar en pantalla */
.fid-motion .wp-block-columns.is-style-recorrido:not(.is-visible):not(.fid-sin-animacion)::before { transform: scaleX(0); }
@media (max-width: 781px) {
.fid-motion .wp-block-columns.is-style-recorrido:not(.is-visible):not(.fid-sin-animacion)::before { transform: scaleY(0); }
}
/* Antetítulos: el trazo se estira al aparecer */
.fid-motion .fid-reveal:not(.is-visible) .is-style-antetitulo::before,
.fid-motion .fid-reveal.is-style-antetitulo:not(.is-visible)::before { transform: scaleX(0); }
.is-style-antetitulo::before { transition: transform 0.9s var(--fid-ease) 0.25s; }
/* Héroe de inicio: la foto se abre como una ventana y el collage se compone */
@keyframes fid-ventana { from { clip-path: inset(9% 9% 9% 9% round 12px); } to { clip-path: inset(0 0 0 0 round 12px); } }
@keyframes fid-acercar { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes fid-subir { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes fid-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes fid-marco-entra { from { opacity: 0; transform: translate(0, 0); } to { opacity: 1; transform: translate(var(--fid-marco), var(--fid-marco)); } }
/* El recorte va en la foto (no en la figura) para no cortar el marco desplazado. */
.fid-motion .fid-hero:not(.fid-sin-animacion) .fid-collage__principal img { animation: fid-ventana 1.5s var(--fid-ease) 0.1s both, fid-acercar 2s var(--fid-ease) both; }
.fid-motion .fid-hero:not(.fid-sin-animacion) .fid-collage__principal::after { animation: fid-marco-entra 1.2s var(--fid-ease) 0.9s both; }
.fid-motion .fid-hero:not(.fid-sin-animacion) .fid-collage__secundaria { animation: fid-subir 1.1s var(--fid-ease) 0.75s both; }
.fid-motion .fid-hero:not(.fid-sin-animacion) .fid-hero__nota { animation: fid-aparecer 0.8s ease 1.3s both; }
.fid-motion .fid-hero:not(.fid-sin-animacion) .fid-hero__texto > * { animation: fid-subir 1s var(--fid-ease) both; }
.fid-motion .fid-hero:not(.fid-sin-animacion) .fid-hero__texto > :nth-child(2) { animation-delay: 0.12s; }
.fid-motion .fid-hero:not(.fid-sin-animacion) .fid-hero__texto > :nth-child(3) { animation-delay: 0.24s; }
.fid-motion .fid-hero:not(.fid-sin-animacion) .fid-hero__texto > :nth-child(n + 4) { animation-delay: 0.36s; }
/* Héroes de página: el contenido entra escalonado */
.fid-motion .fid-hero-entrada:not(.fid-sin-animacion) > * { animation: fid-subir 1s var(--fid-ease) both; }
.fid-motion .fid-hero-entrada:not(.fid-sin-animacion) > :nth-child(2) { animation-delay: 0.1s; }
.fid-motion .fid-hero-entrada:not(.fid-sin-animacion) > :nth-child(3) { animation-delay: 0.2s; }
.fid-motion .fid-hero-entrada:not(.fid-sin-animacion) > :nth-child(n + 4) { animation-delay: 0.3s; }
.fid-motion .wp-block-cover.fid-hero-cover:not(.fid-sin-animacion) .wp-block-cover__image-background { animation: fid-acercar 2.2s var(--fid-ease) both; }
.fid-motion .fid-hero-dividido:not(.fid-sin-animacion) .wp-block-image img { animation: fid-ventana 1.4s var(--fid-ease) 0.15s both; }
/* Ligado al scroll, solo donde el navegador lo soporta (si no, queda estático) */
@supports (animation-timeline: view()) {
@keyframes fid-panoramica-abre { from { clip-path: inset(0 7% 0 7% round 12px); } to { clip-path: inset(0 0 0 0 round 12px); } }
@keyframes fid-deriva { from { transform: translateY(0); } to { transform: translateY(-36px); } }
@keyframes fid-deriva-foto { from { transform: scale(1.12) translateY(-3%); } to { transform: scale(1.12) translateY(3%); } }
.fid-motion .fid-panoramica:not(.fid-sin-animacion) {
animation: fid-panoramica-abre linear both;
animation-timeline: view();
animation-range: entry 0% cover 45%;
}
.fid-motion .fid-panoramica:not(.fid-sin-animacion) img {
animation: fid-deriva-foto linear both;
animation-timeline: view();
}
.fid-motion .fid-hero:not(.fid-sin-animacion) .fid-collage__secundaria img {
animation: fid-deriva linear both;
animation-timeline: scroll(root);
animation-range: 0 90vh;
}
}
/* 13. Accesibilidad y movimiento reducido --------------------------------- */
:where(a, button, summary, input, select, textarea, .wp-block-button__link):focus-visible {
outline: 2px solid var(--fid-oliva);
outline-offset: 3px;
}
.has-marino-background-color :where(a, button, summary, .wp-block-button__link):focus-visible,
.wp-block-cover :where(a, button, .wp-block-button__link):focus-visible {
outline-color: #fff;
}
.skip-link.screen-reader-text:focus { z-index: 100000; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0ms !important;
transition-duration: 0.01ms !important;
transition-delay: 0ms !important;
}
.fid-reveal { opacity: 1 !important; transform: none !important; }
@supports (animation-timeline: view()) {
.fid-panoramica, .fid-panoramica img, .fid-collage__secundaria img { animation: none !important; }
}
}