/** * TAVER — estilos del theme. * * Organizado por sección, en el mismo orden en que aparecen en la página. * Los valores salen de variables.css; acá no hay colores ni medidas crudas * salvo detalles de un solo uso. * * Motivo recurrente: el logo de TAVER es un perfil de viga I. Ese perfil en * sección (ala superior, alma, ala inferior) marca cada eyebrow de sección. * Es la única licencia decorativa del theme y viene del material real de la * empresa, no de un adorno genérico. */ /* ========================================================================== 1. Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--taver-font-body); font-size: var(--taver-fs-body); line-height: var(--taver-lh-body); color: var(--taver-body); background-color: var(--taver-white); -webkit-font-smoothing: antialiased; } img, picture, video, svg { max-width: 100%; display: block; } img { height: auto; } h1, h2, h3, h4 { margin: 0; font-family: var(--taver-font-head); font-weight: 600; line-height: var(--taver-lh-head); color: var(--taver-ink); text-wrap: balance; } p { margin: 0; } ul, ol { margin: 0; padding: 0; } a { color: var(--taver-link); text-decoration: none; transition: color var(--taver-transition); } a:hover { color: var(--taver-blue-600); } button { font: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--taver-focus); outline-offset: 3px; border-radius: 2px; } /* El atributo hidden del navegador vale (0,1,0), lo mismo que una clase. Cualquier `.mi-clase { display: flex }` lo pisa, porque los estilos de autor le ganan a los del navegador. El filtro de proyectos usa `hidden` para ocultar tarjetas, así que sin esto no oculta nada. */ [hidden] { display: none !important; } /* ========================================================================== 1b. Aparición al hacer scroll ========================================================================== La clase .taver-anim la pone un script en el , antes del primer pintado, y solo si el navegador soporta IntersectionObserver y el visitante no pidió reducir movimiento. De ahí que el estado oculto cuelgue de esa clase: si el JS no corre, nada queda escondido. El movimiento es corto a propósito. En una landing larga el scroll es la navegación principal, y una animación que se hace esperar la entorpece. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { .taver-anim .taver-seccion__header, .taver-anim .taver-seccion__intro, .taver-anim .taver-filtro, .taver-anim .taver-card, .taver-anim .taver-valor, .taver-anim .taver-franja__inner, .taver-anim .taver-nosotros__texto, .taver-anim .taver-contacto__intro, .taver-anim .taver-contacto__form { opacity: 0; transform: translateY(18px); transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1), transform 520ms cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .taver-anim .is-visible { opacity: 1; transform: none; will-change: auto; } } /* ========================================================================== 2. Layout ========================================================================== */ .taver-container { width: 100%; max-width: var(--taver-container); margin-inline: auto; padding-inline: var(--taver-gutter); } .taver-main { /* Compensa el header fijo. */ padding-top: var(--taver-header-h); } .taver-seccion { padding-block: var(--taver-section-y); /* El header sticky no debe tapar el título al saltar a un ancla. Se resuelve acá y no en JS: el JS se desincroniza al cambiar la altura del header en cada breakpoint. */ scroll-margin-top: calc(var(--taver-header-h) + 8px); } .taver-seccion--alt { background-color: var(--taver-surface); } .taver-seccion__header { max-width: 720px; margin-bottom: var(--taver-space-6); } .taver-seccion__titulo { font-size: var(--taver-fs-h2); margin-bottom: var(--taver-space-2); } .taver-seccion__bajada { font-size: 1.125rem; color: var(--taver-muted); } .taver-seccion__intro { max-width: 780px; margin-bottom: var(--taver-space-6); } .taver-grid { display: grid; gap: var(--taver-space-3); list-style: none; } /* ========================================================================== 3. Eyebrow — el perfil de viga ========================================================================== */ .taver-eyebrow { display: flex; align-items: center; gap: 0.75rem; margin-bottom: var(--taver-space-2); font-size: var(--taver-fs-eyebrow); font-weight: 500; line-height: 1; letter-spacing: var(--taver-ls-eyebrow); text-transform: uppercase; color: var(--taver-green); } .taver-eyebrow::before { /* Viga I en sección: ala, alma, ala. */ content: ""; flex: none; width: 16px; height: 12px; background: linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat, linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat; } .taver-hero .taver-eyebrow, .taver-contacto .taver-eyebrow { color: var(--taver-white); } /* ========================================================================== 4. Botones ========================================================================== */ .taver-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.25rem 2.5rem; border: 2px solid transparent; border-radius: var(--taver-radius-pill); font-family: var(--taver-font-head); font-size: 0.9375rem; font-weight: 600; line-height: 1; text-align: center; cursor: pointer; transition: background-color var(--taver-transition), border-color var(--taver-transition), border-radius var(--taver-transition), color var(--taver-transition); } /* El botón píldora que se cuadra al pasar el mouse es del kit original. Es un gesto chico y reconocible; se conserva. */ .taver-btn:hover { border-radius: var(--taver-radius-pill-hover); } /* Doble clase en los botones: son etiquetas , y las reglas de color de enlace que WordPress genera desde theme.json empatan en especificidad con una clase suelta. Sin esto el texto del botón puede salir azul. */ .taver-btn--primario.taver-btn--primario { background-color: var(--taver-cta); border-color: var(--taver-cta); color: var(--taver-cta-text); } .taver-btn--primario.taver-btn--primario:hover, .taver-btn--primario.taver-btn--primario:focus { background-color: var(--taver-cta-hover); border-color: var(--taver-cta-hover); color: var(--taver-cta-text); } .taver-btn--fantasma.taver-btn--fantasma { background-color: transparent; border-color: currentColor; color: var(--taver-white); } .taver-btn--fantasma.taver-btn--fantasma:hover, .taver-btn--fantasma.taver-btn--fantasma:focus { background-color: var(--taver-white); border-color: var(--taver-white); color: var(--taver-ink); } .taver-btn svg { flex: none; } /* ========================================================================== 5. Header ========================================================================== */ .taver-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; height: var(--taver-header-h); background-color: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--taver-border); } .taver-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--taver-space-3); height: 100%; } .taver-header__brand img, .taver-header__logo img, .taver-header .custom-logo { width: auto; height: 60px; object-fit: contain; } .taver-nav__list { display: flex; align-items: center; gap: var(--taver-space-3); list-style: none; } /* ----- Cruz de cierre del panel mobile ----- En desktop no existe: el panel tampoco. */ .taver-nav__cerrar.taver-nav__cerrar { display: none; position: absolute; inset-block-start: 18px; inset-inline-end: var(--taver-gutter); align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; background-color: transparent; background-image: none; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--taver-radius-sm); box-shadow: none; color: var(--taver-white); transition: border-color var(--taver-transition), background-color var(--taver-transition); } .taver-nav__cerrar.taver-nav__cerrar:hover { border-color: var(--taver-green-300); background-color: rgba(69, 181, 113, 0.14); } .taver-nav__cerrar-cruz { position: relative; display: block; width: 20px; height: 20px; } .taver-nav__cerrar-cruz::before, .taver-nav__cerrar-cruz::after { content: ""; position: absolute; inset-block-start: 9px; inset-inline: 0; height: 2px; border-radius: 2px; background-color: currentColor; } .taver-nav__cerrar-cruz::before { transform: rotate(45deg); } .taver-nav__cerrar-cruz::after { transform: rotate(-45deg); } /* El CTA del panel solo aparece en mobile: en desktop ya está en el header. */ .taver-nav__cta { display: none; } @media (max-width: 900px) { .taver-nav__cta { display: inline-flex; } } .taver-nav .taver-nav__link, .taver-nav .taver-nav__list a { font-family: var(--taver-font-head); font-size: 0.9375rem; font-weight: 500; color: var(--taver-ink); } .taver-nav .taver-nav__link:hover, .taver-nav .taver-nav__list a:hover, .taver-nav .taver-nav__link:focus, .taver-nav .taver-nav__list a:focus { color: var(--taver-green); } /* ----- Botón hamburguesa ----- Tres barras que se transforman en cruz. La animación no es decorativa: es lo que hace evidente que el botón cambió de estado, sin depender de que el usuario note que cambió un ícono. */ /* Selector doble: sin esto, cualquier plugin que estilice `button` con un selector de tipo `.algo button` le gana y le pinta su color de acento encima, tapando las barras. */ .taver-hamburguesa.taver-hamburguesa { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; background-color: transparent; background-image: none; border: 1px solid var(--taver-border); border-radius: var(--taver-radius-sm); box-shadow: none; color: var(--taver-ink); transition: border-color var(--taver-transition), background-color var(--taver-transition); } .taver-hamburguesa.taver-hamburguesa:hover { border-color: var(--taver-green); background-color: var(--taver-green-100); } .taver-hamburguesa__cajon { position: relative; display: block; width: 22px; height: 16px; } .taver-hamburguesa__barra { position: absolute; inset-inline: 0; height: 2px; border-radius: 2px; background-color: currentColor; transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 160ms linear, width 280ms cubic-bezier(0.4, 0, 0.2, 1); } .taver-hamburguesa__barra:nth-child(1) { top: 0; } .taver-hamburguesa__barra:nth-child(2) { top: 7px; /* La del medio arranca más corta: da carácter y refuerza que las tres son un mismo objeto que se pliega. */ width: 70%; } .taver-hamburguesa__barra:nth-child(3) { top: 14px; } .taver-hamburguesa:hover .taver-hamburguesa__barra:nth-child(2) { width: 100%; } .taver-hamburguesa[aria-expanded="true"] .taver-hamburguesa__barra:nth-child(1) { transform: translateY(7px) rotate(45deg); } .taver-hamburguesa[aria-expanded="true"] .taver-hamburguesa__barra:nth-child(2) { opacity: 0; transform: scaleX(0.2); } .taver-hamburguesa[aria-expanded="true"] .taver-hamburguesa__barra:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================== 6. Hero ========================================================================== */ .taver-hero { position: relative; display: flex; align-items: center; min-height: min(88vh, 780px); padding-block: var(--taver-space-14); overflow: hidden; color: var(--taver-white); scroll-margin-top: var(--taver-header-h); } .taver-hero__fondo { position: absolute; inset: 0; z-index: 0; } .taver-hero__video, .taver-hero__imagen, .taver-hero__imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* El video tapa al poster cuando puede reproducirse; si no carga, abajo sigue estando la imagen. */ .taver-hero__video { z-index: 1; } .taver-hero__velo { position: absolute; inset: 0; z-index: 2; /* Denso del lado del texto para que el titular tenga contraste, y abierto hacia la derecha para que la obra se vea. Al 94% de origen el velo tapaba el video casi por completo. */ background: linear-gradient( 100deg, rgba(12, 28, 49, 0.92) 0%, rgba(12, 28, 49, 0.70) 42%, rgba(23, 46, 79, 0.32) 100% ); } .taver-hero__inner { position: relative; z-index: 3; } /* Los selectores del hero llevan .taver-hero por delante a propósito. WordPress genera desde theme.json reglas de color para headings y enlaces con especificidad (0,1,0), que empatan con una clase suelta — y en un empate gana la hoja que se imprime último, que puede ser la de WordPress. Anteponer el contenedor sube a (0,2,0) y saca el color del hero de esa disputa. */ .taver-hero .taver-hero__titulo, .taver-hero .taver-hero__titulo b, .taver-hero .taver-hero__titulo strong, .taver-hero .taver-hero__titulo em, .taver-hero .taver-hero__contenido h1, .taver-hero .taver-hero__contenido h2, .taver-hero .taver-hero__contenido h3 { color: var(--taver-white); } .taver-hero .taver-hero__titulo { max-width: 16ch; font-size: var(--taver-fs-h1); line-height: var(--taver-lh-tight); } .taver-hero .taver-hero__titulo b, .taver-hero .taver-hero__titulo strong { font-weight: 600; /* Filete verde fino bajo el concepto clave. Con box-shadow el grosor escala con el tamaño de fuente, que a 72px se iba de escala. */ box-shadow: inset 0 -0.06em 0 var(--taver-green); } .taver-hero .taver-hero__bajada { max-width: 52ch; margin-top: var(--taver-space-2); font-size: 1.1875rem; color: rgba(255, 255, 255, 0.88); } .taver-hero .taver-hero__bajada b, .taver-hero .taver-hero__bajada strong { font-weight: 500; color: var(--taver-white); } .taver-hero__acciones { display: flex; flex-wrap: wrap; gap: var(--taver-space-1); margin-top: var(--taver-space-4); } .taver-hero__contenido { max-width: 60ch; color: var(--taver-white); } .taver-hero__contenido h1, .taver-hero__contenido h2 { color: var(--taver-white); } /* ========================================================================== 7. Tarjetas ========================================================================== */ .taver-card { position: relative; display: flex; flex-direction: column; background-color: var(--taver-white); border: 1px solid var(--taver-border); border-radius: var(--taver-radius-card); overflow: hidden; transition: transform var(--taver-transition), box-shadow var(--taver-transition), border-color var(--taver-transition); } .taver-card:hover { transform: translateY(-4px); box-shadow: var(--taver-shadow-lift); border-color: transparent; } .taver-card__titulo { font-size: var(--taver-fs-h3); } .taver-card__texto { margin-top: 0.625rem; color: var(--taver-body); } .taver-card__cuerpo { padding: var(--taver-space-2); } /* ----- Tarjeta de proyecto ----- */ .taver-card--proyecto .taver-card__media { position: relative; aspect-ratio: 4 / 3; background-color: var(--taver-surface); } .taver-card__img { width: 100%; height: 100%; object-fit: cover; } .taver-card__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; height: 100%; color: var(--taver-muted); background-color: var(--taver-surface); } .taver-card__placeholder-texto { font-size: var(--taver-fs-small); } .taver-card__etapa { position: absolute; inset-block-start: 0.75rem; inset-inline-start: 0.75rem; padding: 0.375rem 0.75rem; background-color: var(--taver-navy-900); border-radius: var(--taver-radius-pill); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--taver-white); } .taver-card__meta { font-size: var(--taver-fs-small); font-weight: 500; color: var(--taver-green); } .taver-card--proyecto .taver-card__titulo { margin-top: 0.375rem; font-size: 1.1875rem; } .taver-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: var(--taver-space-1); list-style: none; } .taver-chip { padding: 0.25rem 0.625rem; background-color: var(--taver-surface); border: 1px solid var(--taver-border); border-radius: var(--taver-radius-pill); font-size: 0.75rem; color: var(--taver-muted); } /* ----- Tarjetas de servicio y área ----- */ .taver-card--servicio, .taver-card--area { padding: var(--taver-space-2); } .taver-card__icono { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: var(--taver-space-2); background-color: var(--taver-green-100); border-radius: var(--taver-radius-sm); color: var(--taver-green); transition: background-color var(--taver-transition), color var(--taver-transition); } .taver-card--servicio:hover .taver-card__icono, .taver-card--area:hover .taver-card__icono { background-color: var(--taver-green); color: var(--taver-white); } .taver-card--servicio .taver-card__titulo, .taver-card--area .taver-card__titulo { font-size: 1.125rem; text-wrap: pretty; } /* ========================================================================== 8. Grillas ========================================================================== */ .taver-grid--proyectos { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .taver-grid--servicios, .taver-grid--areas { /* auto-fill y no auto-fit: con 7 ítems la última fila queda incompleta, y auto-fit estiraría esa tarjeta al ancho de tres. */ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .taver-grid--posts { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } /* ========================================================================== 9. Filtro de proyectos ========================================================================== */ .taver-filtro { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--taver-space-4); } /* Sin JS el filtro no puede funcionar, así que no se muestra. */ .no-js .taver-filtro { display: none; } /* Estilo eyebrow: sin caja, sin relleno, sin píldora. Es una lista de etiquetas, no una fila de llamados a la acción — los CTA de la página son verdes y sólidos, y estos no deben competir con ellos. Selector doble a propósito: los plugins que aplican estilos a `button` con un selector como `.algo button` (0,1,1) le ganan a una clase suelta y pintan estos botones con su propio color de acento. */ /* Tipografía de eyebrow dentro de una caja de trazo fino: el tamaño chico mantiene la jerarquía por debajo de los CTA, y el borde es lo que comunica que son accionables. Sin borde no se leían como clickeables. Selector doble a propósito: los plugins que estilizan `button` con un selector como `.algo button` (0,1,1) le ganan a una clase suelta y pintan estos botones con su propio color de acento. */ .taver-filtro__btn.taver-filtro__btn { padding: 0.4375rem 0.8125rem; background-color: var(--taver-white); background-image: none; border: 1px solid var(--taver-border); border-radius: var(--taver-radius-pill); box-shadow: none; font-family: var(--taver-font-body); font-size: var(--taver-fs-eyebrow); font-weight: 600; line-height: 1.3; letter-spacing: var(--taver-ls-eyebrow); text-transform: uppercase; white-space: nowrap; color: var(--taver-muted); transition: background-color var(--taver-transition), border-color var(--taver-transition), color var(--taver-transition); } .taver-filtro__btn.taver-filtro__btn:hover, .taver-filtro__btn.taver-filtro__btn:focus { background-color: var(--taver-white); border-color: var(--taver-green); color: var(--taver-green); } .taver-filtro__btn.taver-filtro__btn[aria-pressed="true"] { background-color: var(--taver-green-100); border-color: var(--taver-green); color: var(--taver-green-600); } .taver-filtro__vacio { padding: var(--taver-space-4); text-align: center; color: var(--taver-muted); } /* ========================================================================== 9b. Franja entre Servicios y Áreas ========================================================================== */ .taver-franja { position: relative; display: flex; align-items: center; min-height: 340px; padding-block: var(--taver-space-8); overflow: hidden; background-color: var(--taver-navy-900); text-align: center; } .taver-franja__media, .taver-franja__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .taver-franja__velo { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(12, 28, 49, 0.9) 0%, rgba(12, 28, 49, 0.78) 50%, rgba(12, 28, 49, 0.9) 100% ); } .taver-franja__inner { position: relative; z-index: 2; } .taver-franja__marca { font-family: var(--taver-font-head); font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 600; line-height: 1.1; letter-spacing: 0.02em; color: var(--taver-white); } /* Filete de viga bajo la marca: el mismo motivo del logo que usan los eyebrows, acá a mayor escala. */ .taver-franja__marca::after { content: ""; display: block; width: 38px; height: 24px; margin: 1.125rem auto 0; background: linear-gradient(var(--taver-green-300), var(--taver-green-300)) top / 100% 3px no-repeat, linear-gradient(var(--taver-green-300), var(--taver-green-300)) center / 3px 100% no-repeat, linear-gradient(var(--taver-green-300), var(--taver-green-300)) bottom / 100% 3px no-repeat; } .taver-franja__frase { max-width: 34ch; margin: var(--taver-space-2) auto 0; font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.5; color: rgba(255, 255, 255, 0.88); } /* ========================================================================== 10. Nosotros ========================================================================== */ .taver-nosotros__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--taver-space-6); align-items: start; } .taver-nosotros__valores { display: grid; gap: var(--taver-space-2); } .taver-valor { padding: var(--taver-space-2); background-color: var(--taver-navy-900); border-radius: var(--taver-radius-card); color: rgba(255, 255, 255, 0.78); } .taver-valor__icono { display: inline-flex; margin-bottom: 0.75rem; color: var(--taver-green-300); } /* Contenedor por delante: son

, y las reglas de heading de theme.json empatan con una clase suelta. Sobre la tarjeta navy tienen que ser blancos sí o sí. */ .taver-valor .taver-valor__titulo { font-size: 1.25rem; color: var(--taver-white); } .taver-valor__texto { margin-top: 0.5rem; } /* ========================================================================== 11. Contacto ========================================================================== */ .taver-contacto { background-color: var(--taver-navy-900); color: rgba(255, 255, 255, 0.82); } .taver-contacto .taver-seccion__titulo { color: var(--taver-white); } .taver-contacto .taver-seccion__bajada { color: rgba(255, 255, 255, 0.72); } .taver-contacto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--taver-space-6); align-items: start; } .taver-contacto__datos { display: grid; gap: 0.875rem; margin-top: var(--taver-space-4); list-style: none; } .taver-contacto__datos li { display: flex; align-items: center; gap: 0.75rem; } .taver-contacto__datos svg { flex: none; color: var(--taver-green-300); } .taver-contacto__datos a { color: var(--taver-white); } .taver-contacto__datos a:hover { color: var(--taver-green-300); } .taver-contacto__cierre { margin-top: var(--taver-space-3); padding-top: var(--taver-space-2); border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: var(--taver-fs-small); color: rgba(255, 255, 255, 0.6); } .taver-contacto__form { padding: var(--taver-space-3); background-color: var(--taver-white); border-radius: var(--taver-radius-card); color: var(--taver-body); } /* Contact Form 7, si está instalado. */ .taver-contacto__form label { display: block; margin-bottom: 0.875rem; font-size: var(--taver-fs-small); font-weight: 500; color: var(--taver-ink); } .taver-contacto__form input[type="text"], .taver-contacto__form input[type="email"], .taver-contacto__form input[type="tel"], .taver-contacto__form select, .taver-contacto__form textarea { width: 100%; margin-top: 0.3125rem; padding: 0.875rem 1rem; font: inherit; color: var(--taver-ink); background-color: var(--taver-white); border: 1px solid var(--taver-border); border-radius: var(--taver-radius-sm); } .taver-contacto__form input:focus, .taver-contacto__form select:focus, .taver-contacto__form textarea:focus { border-color: var(--taver-green); outline: none; box-shadow: 0 0 0 3px var(--taver-green-100); } .taver-contacto__form textarea { min-height: 120px; resize: vertical; } .taver-contacto__form input[type="submit"], .taver-contacto__form .wpcf7-submit { width: auto; padding: 1.125rem 2.5rem; background-color: var(--taver-cta); border: none; border-radius: var(--taver-radius-pill); font-family: var(--taver-font-head); font-weight: 600; color: var(--taver-white); cursor: pointer; transition: background-color var(--taver-transition), border-radius var(--taver-transition); } .taver-contacto__form input[type="submit"]:hover, .taver-contacto__form .wpcf7-submit:hover { background-color: var(--taver-cta-hover); border-radius: var(--taver-radius-pill-hover); } /* ----- Mensajes de Contact Form 7 ----- Sin esto los errores salen con el estilo por defecto del plugin: bordes rojos gruesos y tipografía ajena al theme. */ .taver-contacto__form .wpcf7-not-valid-tip { display: block; margin-top: 0.375rem; font-size: var(--taver-fs-small); font-weight: 400; color: #B42318; } .taver-contacto__form .wpcf7-not-valid { border-color: #B42318; } .taver-contacto__form .wpcf7-response-output { margin: var(--taver-space-2) 0 0; padding: 0.875rem 1rem; border: 1px solid var(--taver-border); border-radius: var(--taver-radius-sm); font-size: var(--taver-fs-small); line-height: 1.5; } .taver-contacto__form .wpcf7-form.invalid .wpcf7-response-output, .taver-contacto__form .wpcf7-form.unaccepted .wpcf7-response-output, .taver-contacto__form .wpcf7-form.payment-required .wpcf7-response-output { border-color: #FDA29B; background-color: #FEF3F2; color: #B42318; } .taver-contacto__form .wpcf7-form.sent .wpcf7-response-output { border-color: var(--taver-green); background-color: var(--taver-green-100); color: var(--taver-green-600); } .taver-contacto__form .wpcf7-spinner { margin: 0 0 0 0.75rem; } /* CF7 envuelve cada línea en

; sin esto el espaciado queda irregular. */ .taver-contacto__form form p { margin: 0; } /* ----- Aviso de formulario sin configurar ----- */ .taver-aviso { padding: var(--taver-space-2); background-color: var(--taver-surface); border: 1px dashed var(--taver-border); border-radius: var(--taver-radius-sm); } .taver-aviso__titulo { margin-bottom: 0.5rem; font-size: 1.0625rem; } .taver-aviso p { margin-bottom: 0.625rem; font-size: var(--taver-fs-small); } .taver-aviso__campos { color: var(--taver-muted); } /* ========================================================================== 12. Marcador de contenido pendiente ========================================================================== */ /* Marcador de contenido faltante. En azul de marca y no en naranja: el naranja competía con los CTA verdes y era lo primero que saltaba a la vista en toda la página. Con el borde punteado y los corchetes ya se lee como "esto falta" sin gritar. */ .taver-pendiente { display: inline-block; padding: 0.0625rem 0.4375rem; background-color: var(--taver-blue-100); border: 1px dashed rgba(30, 89, 174, 0.4); border-radius: 4px; font-size: 0.75rem; font-weight: 500; line-height: 1.5; color: var(--taver-blue-600); } /* Dentro de la tarjeta de proyecto va todavía más discreto: ahí el marcador ocupa el lugar de la foto y no debe pelearle protagonismo al título. */ .taver-card__placeholder .taver-pendiente { background-color: transparent; border-color: transparent; font-size: 0.6875rem; font-weight: 400; color: var(--taver-muted); } /* ========================================================================== 13. Footer ========================================================================== */ .taver-footer { padding-block: var(--taver-space-8) var(--taver-space-3); background-color: var(--taver-navy-900); color: rgba(255, 255, 255, 0.68); } .taver-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: var(--taver-space-4); } .taver-footer__brand img { height: 52px; width: auto; } .taver-footer__tagline { max-width: 34ch; margin-top: var(--taver-space-1); font-size: var(--taver-fs-small); } .taver-footer .taver-footer__titulo { margin-bottom: 0.875rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: var(--taver-ls-eyebrow); text-transform: uppercase; color: var(--taver-white); } .taver-footer__lista { display: grid; gap: 0.5rem; list-style: none; font-size: var(--taver-fs-small); } .taver-footer__lista a { color: rgba(255, 255, 255, 0.68); } .taver-footer__lista a:hover { color: var(--taver-white); } .taver-footer__lista--datos li { display: flex; align-items: flex-start; gap: 0.625rem; } .taver-footer__lista--datos svg { flex: none; margin-top: 2px; color: var(--taver-green-300); } .taver-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; margin-top: var(--taver-space-6); padding-top: var(--taver-space-2); border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.8125rem; } .taver-footer__credito a { color: var(--taver-white); border-bottom: 1px solid rgba(255, 255, 255, 0.3); transition: color var(--taver-transition), border-color var(--taver-transition); } .taver-footer__credito a:hover { color: var(--taver-green-300); border-bottom-color: var(--taver-green-300); } /* El botón flotante de WhatsApp queda encima del pie al llegar al final del scroll y tapaba el crédito. Se reserva el espacio. */ .taver-has-whatsapp .taver-footer { padding-bottom: 6rem; } @media (max-width: 767px) { .taver-footer__base { justify-content: flex-start; } .taver-has-whatsapp .taver-footer { padding-bottom: 7rem; } } /* ========================================================================== 14. WhatsApp flotante ========================================================================== */ /* Doble clase para ganarle al color de enlace que WordPress emite desde theme.json, que de otro modo pinta el texto de azul sobre el verde. */ .taver-whatsapp.taver-whatsapp { position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 90; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.25rem; background-color: #25D366; border-radius: var(--taver-radius-pill); box-shadow: var(--taver-shadow-lift); font-family: var(--taver-font-head); font-size: 0.9375rem; font-weight: 600; color: #FFFFFF; transition: background-color var(--taver-transition), transform var(--taver-transition); } .taver-whatsapp.taver-whatsapp:hover, .taver-whatsapp.taver-whatsapp:focus { background-color: #1EBE5A; color: #FFFFFF; transform: translateY(-2px); } .taver-whatsapp.taver-whatsapp svg { color: #FFFFFF; } /* ========================================================================== 15. Prosa (Gutenberg y blog) ========================================================================== */ .taver-prosa > * + * { margin-top: var(--taver-space-2); } .taver-prosa b, .taver-prosa strong { font-weight: 600; color: var(--taver-ink); } .taver-prosa ul, .taver-prosa ol { padding-inline-start: 1.25rem; } .taver-prosa li + li { margin-top: 0.375rem; } .taver-pagina { max-width: 780px; } .taver-pagina__header { margin-bottom: var(--taver-space-3); } .taver-pagina__titulo { font-size: var(--taver-fs-h2); } .taver-pagina__media { margin: 0 0 var(--taver-space-3); border-radius: var(--taver-radius-card); overflow: hidden; } .taver-404 { max-width: 620px; text-align: center; } .taver-404__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: var(--taver-space-3); } .taver-buscar { display: flex; gap: 0.5rem; margin-bottom: var(--taver-space-4); } .taver-buscar__campo { flex: 1; padding: 0.875rem 1rem; font: inherit; border: 1px solid var(--taver-border); border-radius: var(--taver-radius-sm); } .taver-comentarios { margin-top: var(--taver-space-6); padding-top: var(--taver-space-4); border-top: 1px solid var(--taver-border); } .taver-comentarios__lista { list-style: none; } /* ========================================================================== 16. Responsive ========================================================================== */ @media (max-width: 1024px) { .taver-nosotros__grid, .taver-contacto__grid { grid-template-columns: 1fr; } .taver-footer__grid { grid-template-columns: 1fr 1fr; } .taver-header__cta { display: none; } } @media (max-width: 900px) { .taver-hamburguesa.taver-hamburguesa { display: inline-flex; } /* backdrop-filter crea un bloque contenedor para los descendientes position:fixed, así que con el blur puesto el panel se posiciona contra el header (68px de alto) en lugar de contra el viewport. En mobile el blur no aporta nada, y sin él el panel vuelve a cubrir la pantalla. */ .taver-header { backdrop-filter: none; background-color: var(--taver-white); } /* ----- Panel lateral a pantalla completa ----- Entra desde la derecha, que es donde está el botón que lo abre: el panel sale de donde el dedo lo pidió. */ .taver-nav { position: fixed; inset: 0; z-index: 110; display: flex; flex-direction: column; justify-content: center; padding: var(--taver-space-8) var(--taver-gutter) var(--taver-space-4); background-color: var(--taver-navy-900); overflow-y: auto; visibility: hidden; transform: translateX(100%); transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 320ms; } .taver-menu-abierto .taver-nav { visibility: visible; transform: translateX(0); transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0s; } /* Doble clase para igualar la especificidad de la regla base, que también la usa; con una sola clase acá, el display:none de arriba ganaba. */ .taver-nav__cerrar.taver-nav__cerrar { display: flex; } .taver-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 0; } .taver-nav__item, .taver-nav .taver-nav__list li { border-bottom: 1px solid rgba(255, 255, 255, 0.12); /* Cada ítem entra escalonado detrás del panel. */ opacity: 0; transform: translateX(24px); transition: opacity 260ms ease, transform 260ms ease; } .taver-menu-abierto .taver-nav__item, .taver-menu-abierto .taver-nav .taver-nav__list li { opacity: 1; transform: translateX(0); } .taver-menu-abierto .taver-nav__list li:nth-child(1) { transition-delay: 120ms; } .taver-menu-abierto .taver-nav__list li:nth-child(2) { transition-delay: 165ms; } .taver-menu-abierto .taver-nav__list li:nth-child(3) { transition-delay: 210ms; } .taver-menu-abierto .taver-nav__list li:nth-child(4) { transition-delay: 255ms; } .taver-menu-abierto .taver-nav__list li:nth-child(5) { transition-delay: 300ms; } .taver-menu-abierto .taver-nav__list li:nth-child(6) { transition-delay: 345ms; } .taver-nav .taver-nav__link, .taver-nav .taver-nav__list a { display: block; padding: 1.125rem 0; font-size: 1.5rem; font-weight: 600; color: var(--taver-white); } .taver-nav .taver-nav__link:hover, .taver-nav .taver-nav__list a:hover { color: var(--taver-green-300); } .taver-nav__cta { margin-top: var(--taver-space-3); opacity: 0; transform: translateX(24px); transition: opacity 260ms ease 390ms, transform 260ms ease 390ms; } .taver-menu-abierto .taver-nav__cta { opacity: 1; transform: translateX(0); } /* El scroll de fondo detrás del menú abierto es desorientador. */ .taver-menu-abierto { overflow: hidden; } } @media (max-width: 767px) { .taver-footer__grid { grid-template-columns: 1fr; gap: var(--taver-space-3); } .taver-hero { min-height: auto; padding-block: var(--taver-space-8); } /* En mobile el video se descarta: son datos móviles gastados en algo decorativo. Queda el poster, que ya está descargado. */ .taver-hero__video { display: none; } .taver-hero__acciones .taver-btn { width: 100%; } .taver-btn { padding: 1rem 1.75rem; } .taver-whatsapp { inset-block-end: 16px; inset-inline-end: 16px; padding: 0.875rem; } .taver-whatsapp__texto { display: none; } .taver-buscar { flex-direction: column; } } /* ========================================================================== 17. Accesibilidad y preferencias ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; /* Sin esto la entrada escalonada del menú deja los ítems invisibles hasta 390ms después de abrirlo. */ transition-delay: 0ms !important; } .taver-card:hover, .taver-whatsapp:hover { transform: none; } /* * El video del hero NO se oculta acá, a propósito. * * Hasta 1.7.2 se reemplazaba por el poster, que es el tratamiento que * espera esta preferencia: un loop con autoplay es movimiento persistente * y sin control para detenerlo. Se quitó por pedido del cliente: el video * es parte de la presentación de la empresa y no era aceptable que un * visitante lo viera y otro no según la configuración de su sistema. * * Queda anotado que esto incumple WCAG 2.2.2 (Pause, Stop, Hide). Si más * adelante se quiere resolver sin volver a esconder el video, el camino es * un control de pausa sobre el hero, no restaurar este display: none. */ } @media print { .taver-header, .taver-whatsapp, .taver-hero__video, .taver-filtro { display: none; } }