/* ========================================================================== Webker Theme — VARIANTES DE MAQUETACIÓN Compañero de inc/secciones.php y de template-parts//. main.css es el sistema de diseño (tokens, componentes, estructura común). Este archivo es el catálogo de MAQUETAS: cada bloque viste una variante concreta y nada más. Reglas de este archivo: - Cada variante va entre un comentario de apertura "hero/nombre" y uno de cierre "fin hero/nombre". Al arrancar un proyecto de cliente se borran de un tirón los bloques de las variantes que no se usan, sin tener que leer el CSS para saber qué sobra. - Nada de identidad visual aquí: solo tokens de main.css. Colores, tipografías y radios se sustituyen allí y esto se recalcula solo. - Lo que comparten TODAS las variantes de UNA sección puede vivir suelto aquí, justo antes de sus bloques (los `.plan-*` de precios, los `.trabajo-*` de portfolio): al borrar la sección entera se va con ella. - Lo que comparten variantes de secciones DISTINTAS va en main.css, nunca dentro del bloque de una de ellas. Si no, podar esa sección deja a la otra sin estilo y sin ningún error que lo explique — le pasó a `.enlace-flecha`, que vivía en el bloque de servicios y la usaban también las áreas. ========================================================================== */ /* === hero/dividido ======================================================= No necesita CSS propio: es la maqueta base de .hero en main.css (rejilla de dos columnas 1.1fr / 0.9fr desde 860px). El bloque existe igualmente para que el mapa de variantes esté completo y nadie lo dé por perdido. === fin hero/dividido === */ /* === header/transparente ================================================= Colgado de .header-flotante en el , no de la variante: el hero de fondo activa este mismo comportamiento sin que el proyecto tenga que acordarse de cambiar también la cabecera (webker_header_flotante). ========================================================================= */ body.header-flotante .header { position: absolute; inset-inline: 0; } /* Solo mientras no se ha hecho scroll: en cuanto la cabecera deja de estar sobre la imagen recupera su fondo, si no el menú blanco se vuelve ilegible sobre el contenido claro de las secciones siguientes. */ body.header-flotante .header:not(.is-scrolled) { background: transparent; backdrop-filter: none; border-bottom-color: transparent; } body.header-flotante .header:not(.is-scrolled) .logo-text, body.header-flotante .header:not(.is-scrolled) .nav-toggle { color: var(--color-on-primary); } /* Los enlaces en blanco solo en escritorio, donde están sobre la foto. En móvil los mismos enlaces viven en el panel desplegable, que tiene el fondo claro de la página: en blanco ahí no se leían. */ @media (min-width: 861px) { body.header-flotante .header:not(.is-scrolled) .nav-list > li > a { color: var(--color-on-primary); } body.header-flotante .header:not(.is-scrolled) .nav-list > li > a:hover { color: color-mix(in srgb, var(--color-on-primary) 75%, transparent); } } /* Al hacer scroll vuelve a ser una cabecera normal, y para eso tiene que volver a ser pegajosa: si se quedara en absolute, desaparecería de la pantalla en cuanto el visitante baja. */ body.header-flotante .header.is-scrolled { position: fixed; top: 0; } /* === fin header/transparente === */ /* === footer/negocio-local ================================================ */ .footer-local-dato { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-2); } .footer-local-dato a { color: inherit; } .footer-local-dato a:hover { color: var(--color-accent); } /* La dirección y el teléfono son la razón de ser de este pie: se leen antes que el resto de la columna, no al mismo peso que un enlace de menú. */ .footer-local-direccion { color: var(--color-ink); font-size: var(--text-base); } .footer-local-tel a { color: var(--color-ink); font-weight: 600; font-size: var(--text-lg); } /* === fin footer/negocio-local === */ /* Común a las cinco maquetas: el segundo párrafo y siguientes. El primero usa .section-lead, que ya existe en main.css. */ .sobre-nosotros-parrafo { color: var(--color-muted); margin-top: var(--space-4); } /* === sobre-nosotros/con-imagen =========================================== */ .sobre-nosotros--con-imagen .container { display: grid; gap: var(--space-12); align-items: center; } .sobre-nosotros--con-imagen .section-head { margin-bottom: 0; } .sobre-nosotros-media { aspect-ratio: 4 / 3; min-width: 0; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: var(--color-surface-raised); } .sobre-nosotros-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .sobre-nosotros-media .foto-hueco { height: 100%; aspect-ratio: auto; } @media (min-width: 860px) { .sobre-nosotros--con-imagen .container { grid-template-columns: 1fr 1fr; gap: var(--space-16); } } /* === fin sobre-nosotros/con-imagen === */ /* === faq/acordeon ======================================================== No necesita CSS propio: .faq-list y .faq-item ya están en main.css. === fin faq/acordeon === */ /* === cta/franja ========================================================== */ .cta-final--franja { padding-block: var(--space-12); } .cta-final--franja .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); } .cta-franja-titulo { font-size: var(--text-2xl); } .cta-franja-sub { color: var(--color-muted); margin-top: var(--space-2); max-width: 52ch; } /* === fin cta/franja === */ /* Común a las cuatro maquetas de contacto: la lista de datos pasó de ser un

suelto con el email a una