/* Módulo «pie-demo» del front: se carga solo si la página trae sus clases (App\Core\View\CssFront::MODULOS). */
.landing-footer-demo { --fd-linea-fuerte: color-mix(in srgb, var(--color-texto) 24%, transparent); display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr); --fd-gap-y: clamp(1.5rem, 3vw, 2.75rem); gap: var(--fd-gap-y) clamp(1.25rem, 3vw, 2.5rem); color: var(--color-footer-texto); }
.landing-footer-demo--oscuro { --color-footer-texto: var(--footer-demo-texto, #a9b6c8); --color-texto: var(--footer-demo-titulo, #ffffff); --color-borde: var(--footer-demo-borde, #27334a); --fd-acento: var(--footer-demo-acento, color-mix(in srgb, var(--color-primario) 55%, var(--footer-demo-titulo, #ffffff))); --fd-linea-fuerte: color-mix(in srgb, var(--footer-demo-titulo, #ffffff) 30%, transparent); }
.landing-footer-demo__intro { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem 2rem; padding-bottom: clamp(1.6rem, 3.5vw, 2.6rem); border-bottom: 1px solid var(--color-borde); }
.landing-footer-demo__intro > div:first-child { display: grid; gap: .55rem; max-width: 640px; }
/* Solo la etiqueta superior: el selector anterior (`span` a secas) también pintaba la flecha de los botones con el color de acento y la dejaba invisible sobre el botón. */
.landing-footer-demo__intro > div:first-child > span { color: var(--fd-acento, var(--color-footer-texto)); font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.landing-footer-demo__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; flex: 0 0 auto; }
.landing-footer-demo a.landing-footer-demo__boton:hover { opacity: 1; transform: translateY(-1px); }
.landing-footer-demo a.landing-footer-demo__boton--sec:hover { border-color: var(--color-texto); }
.landing-footer-demo--compact { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
.landing-footer-demo__logo { display: inline-block; max-width: 190px; margin-bottom: .9rem; font-size: 1.3rem; font-weight: 700; color: var(--color-texto); }
.landing-footer-demo__logo--caja { padding: .55rem .9rem; border-radius: 12px; background: var(--footer-demo-logo-fondo, #ffffff); color: var(--color-primario); }
.landing-footer-demo__marca > a:last-child:not(.landing-footer-demo__logo) { font-size: .9rem; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.landing-footer-demo .landing-social .footer-redes a { text-decoration: none; }
.landing-footer-demo__bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-top: .25rem; padding: 1.15rem 0 1.4rem; border-top: 1px solid var(--color-borde); font-size: .8rem; }
.landing-footer-demo__legal { display: inline-flex; flex-wrap: wrap; gap: 1.25rem; }
@media (max-width: 1024px) {
.landing-footer-demo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.landing-footer-demo__marca { grid-column: 1 / -1; }
.landing-footer-demo__contacto { grid-column: span 3; }
}
@media (max-width: 680px) {
.landing-footer-demo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.landing-footer-demo__intro { align-items: flex-start; flex-direction: column; }
.landing-footer-demo__acciones { width: 100%; }
.landing-footer-demo a.landing-footer-demo__boton { flex: 1 1 140px; }
.landing-footer-demo__contacto { grid-column: 1 / -1; }
}
@media (max-width: 340px) {
.landing-footer-demo { grid-template-columns: 1fr; }
.landing-footer-demo__marca, .landing-footer-demo__contacto { grid-column: auto; }
}
@media (pointer: coarse) {
.landing-footer-demo ul { gap: 0; }
}
/* Footer con newsletter: franja a todo el ancho de la grilla con el texto a la izquierda y el formulario a la derecha. */
.landing-footer-demo__newsletter { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 1.5rem clamp(1.5rem, 4vw, 4rem); padding-bottom: clamp(1.4rem, 3vw, 2.2rem); border-bottom: 1px solid var(--color-borde); }
.landing-footer-demo__newsletter > div > span { color: var(--fd-acento, var(--color-footer-texto)); font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.landing-footer-demo .landing-footer-demo__newsletter p { margin: 0; max-width: 56ch; }
.landing-footer-demo .landing-footer-demo__newsletter .newsletter-form { max-width: none; }
.landing-footer-demo__newsletter .newsletter-form__boton { background: var(--footer-demo-boton, var(--footer-demo-titulo, #fff)); color: var(--footer-demo-boton-texto, var(--footer-demo-fondo, #0f1a2b)); transition: filter .15s ease, transform .1s ease; }
.landing-footer-demo__newsletter .newsletter-form__boton:hover { background: var(--footer-demo-boton, var(--footer-demo-titulo, #fff)); filter: brightness(.9); }
.landing-footer-demo__newsletter .newsletter-form__boton:active { transform: translateY(1px); }
.landing-footer-demo__newsletter .newsletter-form__boton:focus-visible { outline: 2px solid var(--footer-demo-boton, #fff); outline-offset: 2px; }
@media (max-width: 900px) {
.landing-footer-demo__newsletter { grid-template-columns: minmax(0, 1fr); }
}
/* Escritorio: la franja de newsletter usa las mismas columnas del pie (el texto sobre «marca» y «Explora», el formulario desde «Ayuda» hasta el borde derecho), así sus bordes coinciden con los de abajo; el formulario arranca a la altura del texto, no centrado. */
.landing-footer-demo__newsletter { align-items: center; }
@media (min-width: 1025px) {
.landing-footer-demo__newsletter { grid-template-columns: subgrid; column-gap: normal; }
}
/* Beneficios del pie repartidos de borde a borde, como la barra legal de abajo. */
@media (min-width: 681px) {
.landing-footer-demo ul.landing-footer-demo__garantias { justify-content: space-between; }
}