/* Tema Trayecta. Los tokens (--wp--preset--*) vienen de theme.json; aquí solo componentes. Origen: mockups/base.css */ /* ===== Base (lo que theme.json no cubre) ===== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--wp--preset--color--blanco); color: var(--wp--preset--color--negro); font-family: var(--wp--preset--font-family--dm-sans); font-size: var(--wp--preset--font-size--base); line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--wp--preset--font-family--manrope); font-weight: 700; line-height: 1.08; letter-spacing: -0.015em; margin: 0; text-wrap: balance; } h1 { font-size: var(--wp--preset--font-size--titulo-1); } h2 { font-size: var(--wp--preset--font-size--titulo-2); } h3 { font-size: var(--wp--preset--font-size--titulo-3); } h4 { font-size: var(--wp--preset--font-size--destacado); } p { margin: 0; } a { color: inherit; } /* theme.json emite elements.link como a:where(:not(.wp-element-button)) — especificidad (0,0,1), la misma que la regla de arriba, así que el empate lo rompe el orden de impresión. Sobre negro ese empate decide entre texto legible y #212121 sobre #212121: aquí se gana por especificidad. */ .t-oscuro a:not(.wp-element-button), .t-pie a:not(.wp-element-button), .t-banda a:not(.wp-element-button), .t-franja a:not(.wp-element-button) { color: inherit; } img, svg { max-width: 100%; height: auto; display: block; } :focus-visible { outline: 2px solid var(--wp--preset--color--negro); outline-offset: 3px; } .t-oscuro :focus-visible { outline-color: var(--wp--preset--color--amarillo); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } } /* ===== Utilidades de sección ===== */ .t-cont { max-width: var(--wp--style--global--content-size); margin-inline: auto; padding-inline: var(--wp--preset--spacing--3); } .t-seccion { padding-block: var(--wp--preset--spacing--8); } .t-seccion--hundida { background: var(--wp--preset--color--hundido); } .t-oscuro { background: var(--wp--preset--color--negro); color: var(--wp--preset--color--blanco); } .t-prosa { max-width: 68ch; } /* Texto legal (aviso de privacidad): una columna de 68 caracteres, apartados en h2 de tamaño destacado. */ .t-legal { max-width: 68ch; } .t-legal h2 { font-size: var(--wp--preset--font-size--destacado); margin-top: var(--wp--preset--spacing--5); } .t-legal h2 + p, .t-legal p + p, .t-legal ul, .t-legal ul + p { margin-top: var(--wp--preset--spacing--2); } .t-legal ul { padding-left: 1.25em; display: grid; gap: 6px; } .t-prosa p + p { margin-top: var(--wp--preset--spacing--2); } .t-muted { color: var(--wp--preset--color--gris-oscuro); } .t-oscuro .t-muted { color: rgba(255, 255, 255, 0.72); } .t-ceja { font-family: var(--wp--preset--font-family--dm-sans); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--gris-oscuro); margin: 0 0 var(--wp--preset--spacing--2); } .t-ceja::before { content: ''; display: inline-block; width: 14px; height: 3px; background: var(--wp--preset--color--amarillo); margin-right: 10px; vertical-align: middle; } .t-oscuro .t-ceja { color: var(--wp--preset--color--amarillo); } .t-encabezado-seccion { display: grid; gap: var(--wp--preset--spacing--2); margin-bottom: var(--wp--preset--spacing--5); max-width: 760px; } .t-encabezado-seccion p { color: var(--wp--preset--color--gris-oscuro); font-size: var(--wp--preset--font-size--destacado); } .t-oscuro .t-encabezado-seccion p { color: rgba(255, 255, 255, 0.78); } .t-separador { border: 0; height: 0; border-top: 3px dashed var(--wp--preset--color--amarillo); margin: 0; } /* ===== Botones ===== */ .t-boton { display: inline-block; font-family: var(--wp--preset--font-family--dm-sans); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; padding: 1rem 1.75rem; border-radius: 0; border: 2px solid transparent; transition: background 150ms, color 150ms, border-color 150ms; cursor: pointer; line-height: 1; } .t-boton, .t-boton--amarillo { background: var(--wp--preset--color--amarillo); color: var(--wp--preset--color--negro); border-color: var(--wp--preset--color--amarillo); } .t-boton--amarillo:hover { background: var(--wp--preset--color--negro); color: var(--wp--preset--color--blanco); border-color: var(--wp--preset--color--negro); } .t-boton--oscuro { background: var(--wp--preset--color--negro); color: var(--wp--preset--color--blanco); border-color: var(--wp--preset--color--negro); } .t-boton--oscuro:hover { background: var(--wp--preset--color--amarillo); color: var(--wp--preset--color--negro); border-color: var(--wp--preset--color--amarillo); } .t-boton--contorno { background: transparent; color: var(--wp--preset--color--negro); border-color: var(--wp--preset--color--negro); } .t-boton--contorno:hover { background: var(--wp--preset--color--negro); color: var(--wp--preset--color--blanco); } .t-oscuro .t-boton--contorno { color: var(--wp--preset--color--blanco); border-color: var(--wp--preset--color--blanco); } .t-oscuro .t-boton--contorno:hover { background: var(--wp--preset--color--blanco); color: var(--wp--preset--color--negro); } .t-botones { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--2); align-items: center; } .t-enlace { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* ===== Encabezado ===== */ .t-cabecera { position: sticky; top: 0; z-index: 20; background: var(--wp--preset--color--blanco); border-bottom: 1px solid rgba(126, 139, 138, 0.25); } .t-cabecera__int { display: flex; align-items: center; gap: var(--wp--preset--spacing--4); min-height: 104px; } .t-logo { display: block; width: 152px; flex: none; } .t-nav { display: flex; gap: var(--wp--preset--spacing--4); margin-left: auto; } .t-nav a { text-decoration: none; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 0; border-bottom: 2px solid transparent; } .t-nav a:hover, .t-nav a[aria-current="page"] { border-bottom-color: var(--wp--preset--color--amarillo); } .t-cabecera__acciones { display: flex; align-items: center; gap: var(--wp--preset--spacing--3); } .t-tel { text-decoration: none; font-family: var(--wp--preset--font-family--manrope); font-weight: 700; font-variant-numeric: tabular-nums; } @media (max-width: 950px) { .t-tel { display: none; } .t-cabecera__int { min-height: 84px; } .t-logo { width: 120px; } .t-cabecera__acciones .t-boton { padding: 0.75rem 1rem; } } /* ===== Hero ===== */ .t-hero { position: relative; overflow: hidden; } .t-hero__int { position: relative; display: grid; grid-template-columns: minmax(0, 640px) 1fr; align-items: center; min-height: 560px; padding-block: var(--wp--preset--spacing--8); gap: var(--wp--preset--spacing--5); } .t-hero__titulo { font-size: var(--wp--preset--font-size--display); } .t-hero__texto { font-size: var(--wp--preset--font-size--destacado); max-width: 34em; margin-top: var(--wp--preset--spacing--3); color: var(--wp--preset--color--gris-oscuro); } .t-oscuro .t-hero__texto { color: rgba(255, 255, 255, 0.78); } .t-hero .t-botones { margin-top: var(--wp--preset--spacing--4); } /* La caja del SVG se ancla al borde del contenedor y arriba del todo: antes sobresalía 40px del viewport y la banda derecha se recortaba. La carretera queda simétrica dentro de su caja (véase carretera.svg). */ /* Carretera en amarillo pleno (sin degradado ni opacidad: el manual no admite ocres). Sangra por arriba (top negativo) para que el vértice quede oculto tras la cabecera y por abajo para que corte con la sección. */ /* Desplazada 120 px a la derecha del contenedor para no pisar la columna de texto (640 px): texto claro sobre amarillo está vetado. */ .t-hero--oscuro .t-carretera { position: absolute; right: max(-120px, calc((100% - var(--wp--style--global--content-size)) / 2 - 120px)); top: -120px; width: 656px; height: 820px; pointer-events: none; } .t-hero--corto .t-carretera { top: -400px; } .t-hero__nota { margin-top: var(--wp--preset--spacing--3); font-size: var(--wp--preset--font-size--nota); color: rgba(255, 255, 255, 0.72); } .t-hero__nota a { color: var(--wp--preset--color--blanco); font-weight: 700; } /* Inicio: el hero oscuro va sin foto ni banda hasta tener fotografías reales de la flota (Diego, 2026-09-08); la carretera se corta en el borde inferior del hero. */ .t-hero--foto { background-size: cover; background-position: center; } .t-hero--foto .t-hero__int { grid-template-columns: minmax(0, 560px); } .t-hero--foto.t-oscuro { background-color: var(--wp--preset--color--negro); } .t-hero--foto.t-oscuro::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(33, 33, 33, 0.92) 0%, rgba(33, 33, 33, 0.65) 55%, rgba(33, 33, 33, 0.15) 100%); } .t-hero--foto.t-clara::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(247, 248, 248, 0.96) 0%, rgba(247, 248, 248, 0.85) 45%, rgba(247, 248, 248, 0) 100%); } @media (max-width: 900px) { .t-hero__int { grid-template-columns: 1fr; min-height: 0; padding-block: var(--wp--preset--spacing--6); } /* En móvil el texto cruzaría las bandas (texto claro sobre amarillo): fuera la carretera, y el ícono oficial como firma. */ .t-hero--oscuro .t-carretera { display: none; } .t-hero--oscuro::after { content: ''; position: absolute; top: var(--wp--preset--spacing--5); right: var(--wp--preset--spacing--3); width: 56px; height: 22px; background: url(../theme/assets/img/icono.svg) no-repeat center / contain; } .t-hero--foto.t-oscuro::before { background: linear-gradient(180deg, rgba(33, 33, 33, 0.35) 0%, rgba(33, 33, 33, 0.92) 55%); } .t-hero--foto.t-clara::before { background: linear-gradient(180deg, rgba(247, 248, 248, 0.2) 0%, rgba(247, 248, 248, 0.96) 45%); } .t-hero--foto .t-hero__int { padding-top: 220px; } } /* ===== Franja de datos ===== */ .t-franja { position: relative; background-size: cover; background-position: center; color: var(--wp--preset--color--blanco); } .t-franja::before { content: ''; position: absolute; inset: 0; background: rgba(33, 33, 33, 0.78); } .t-franja__int { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--4); padding-block: var(--wp--preset--spacing--6); } .t-franja__dato { border-top: 3px dashed var(--wp--preset--color--amarillo); padding-top: var(--wp--preset--spacing--2); } .t-franja__dato b { display: block; font-family: var(--wp--preset--font-family--manrope); font-weight: 700; font-size: var(--wp--preset--font-size--titulo-1); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .t-franja__dato span { display: block; margin-top: var(--wp--preset--spacing--1); color: rgba(255, 255, 255, 0.78); font-size: var(--wp--preset--font-size--nota); } @media (max-width: 700px) { .t-franja__int { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--3); } } /* ===== Tarjetas de servicios ===== */ .t-tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--3); } .t-tarjeta { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--2); padding: var(--wp--preset--spacing--4); background: var(--wp--preset--color--hundido); } .t-tarjeta--negra { background: var(--wp--preset--color--negro); color: var(--wp--preset--color--blanco); } .t-tarjeta__icono { width: 44px; height: 44px; color: var(--wp--preset--color--negro); } .t-tarjeta--negra .t-tarjeta__icono { color: var(--wp--preset--color--amarillo); } .t-tarjeta h3 { margin-top: var(--wp--preset--spacing--2); } .t-tarjeta p { color: var(--wp--preset--color--gris-oscuro); } .t-tarjeta--negra p { color: rgba(255, 255, 255, 0.78); } .t-tarjeta .t-etiqueta { margin-top: auto; padding-top: var(--wp--preset--spacing--3); } .t-tarjeta .t-enlace { align-self: flex-start; } .t-etiqueta { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--gris-oscuro); } .t-tarjeta--negra .t-etiqueta { color: var(--wp--preset--color--amarillo); } @media (max-width: 900px) { .t-tarjetas { grid-template-columns: 1fr; } } /* ===== Listas con guion amarillo ===== */ .t-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--1); } .t-lista li { position: relative; padding-left: 20px; } .t-lista li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 10px; height: 3px; background: var(--wp--preset--color--amarillo); } /* ===== Garantías / valores (ítems con línea superior) ===== */ .t-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--4) var(--wp--preset--spacing--4); } .t-items--2 { grid-template-columns: repeat(2, 1fr); } .t-item { border-top: 2px solid currentColor; padding-top: var(--wp--preset--spacing--2); } .t-item h3 { font-size: var(--wp--preset--font-size--destacado); } .t-item p { margin-top: var(--wp--preset--spacing--1); color: var(--wp--preset--color--gris-oscuro); font-size: var(--wp--preset--font-size--nota); line-height: 1.5; } .t-oscuro .t-item p { color: rgba(255, 255, 255, 0.78); } .t-dos-columnas { display: grid; grid-template-columns: 7fr 5fr; gap: var(--wp--preset--spacing--6); align-items: center; } .t-dos-columnas--iguales { grid-template-columns: 1fr 1fr; } .t-dos-columnas img { width: 100%; } @media (max-width: 900px) { .t-items, .t-items--2, .t-dos-columnas, .t-dos-columnas--iguales { grid-template-columns: 1fr !important; } } /* ===== Cobertura ===== */ .t-cobertura { display: grid; grid-template-columns: 5fr 7fr; gap: var(--wp--preset--spacing--6); align-items: center; } .t-cobertura__estados { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--4); } .t-cobertura__estado h3 { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; font-family: var(--wp--preset--font-family--dm-sans); color: var(--wp--preset--color--amarillo); margin-bottom: var(--wp--preset--spacing--2); } .t-cobertura__estado li { font-family: var(--wp--preset--font-family--manrope); font-weight: 700; font-size: var(--wp--preset--font-size--destacado); padding-left: 22px; } .t-cobertura__estado li::before { top: 0.75em; width: 12px; } .t-cobertura__nota { margin-top: var(--wp--preset--spacing--4); color: rgba(255, 255, 255, 0.78); max-width: 34em; } .t-cobertura__mapa { width: 100%; max-width: 560px; justify-self: end; } @media (max-width: 900px) { .t-cobertura { grid-template-columns: 1fr; } .t-cobertura__mapa { justify-self: stretch; } } /* ===== Pasos numerados ===== */ .t-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--4); counter-reset: paso; } .t-paso { border-top: 3px solid var(--wp--preset--color--amarillo); padding-top: var(--wp--preset--spacing--2); counter-increment: paso; } .t-paso::before { content: counter(paso); display: block; font-family: var(--wp--preset--font-family--manrope); font-weight: 700; font-size: var(--wp--preset--font-size--titulo-2); line-height: 1; color: var(--wp--preset--color--gris-oscuro); margin-bottom: var(--wp--preset--spacing--1); } .t-paso h3 { font-size: var(--wp--preset--font-size--destacado); } .t-paso p { margin-top: var(--wp--preset--spacing--1); color: var(--wp--preset--color--gris-oscuro); font-size: var(--wp--preset--font-size--nota); } @media (max-width: 900px) { .t-pasos { grid-template-columns: 1fr; } } /* ===== Detalle de servicio (Servicios) ===== */ .t-servicio { display: grid; grid-template-columns: 200px 1fr; gap: var(--wp--preset--spacing--5); padding-block: var(--wp--preset--spacing--6); border-top: 1px solid rgba(126, 139, 138, 0.35); scroll-margin-top: 90px; } .t-servicio:first-of-type { border-top: 0; } .t-ancla { display: block; height: 0; scroll-margin-top: 90px; } .t-servicio__icono { width: 96px; height: 96px; color: var(--wp--preset--color--negro); } .t-servicio h2 { margin-top: var(--wp--preset--spacing--1); } .t-servicio .t-prosa { margin-top: var(--wp--preset--spacing--2); } .t-servicio h3 { font-size: var(--wp--preset--font-size--base); margin-top: var(--wp--preset--spacing--3); } .t-servicio .t-lista { margin-top: var(--wp--preset--spacing--1); } .t-servicio .t-boton { margin-top: var(--wp--preset--spacing--4); } @media (max-width: 900px) { .t-servicio { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--2); } .t-servicio__icono { width: 64px; height: 64px; } } /* ===== Banda con foto ===== */ .t-banda { position: relative; background-color: var(--wp--preset--color--negro); background-size: cover; background-position: center; color: var(--wp--preset--color--blanco); } .t-banda::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(33, 33, 33, 0.9) 0%, rgba(33, 33, 33, 0.6) 60%, rgba(33, 33, 33, 0.3) 100%); } .t-banda__int { position: relative; padding-block: var(--wp--preset--spacing--8); max-width: 640px; } .t-banda h2 { font-size: var(--wp--preset--font-size--titulo-1); } .t-banda p { margin-top: var(--wp--preset--spacing--2); font-size: var(--wp--preset--font-size--destacado); color: rgba(255, 255, 255, 0.82); } .t-banda .t-botones { margin-top: var(--wp--preset--spacing--4); } /* ===== Lista clave / valor (Contacto, pie) ===== */ .t-kv { display: grid; grid-template-columns: auto 1fr; gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4); margin: 0; } .t-kv dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--gris-oscuro); padding-top: 4px; } .t-oscuro .t-kv dt { color: rgba(255, 255, 255, 0.6); } .t-kv dd { margin: 0; } .t-kv dd a { text-decoration: underline; text-underline-offset: 3px; } .t-kv dd a:hover { text-decoration-thickness: 2px; } .t-kv dd b { font-family: var(--wp--preset--font-family--manrope); font-weight: 700; font-size: var(--wp--preset--font-size--destacado); font-variant-numeric: tabular-nums; } .t-kv dd small { display: block; font-size: var(--wp--preset--font-size--nota); color: var(--wp--preset--color--gris-oscuro); } .t-oscuro .t-kv dd small { color: rgba(255, 255, 255, 0.6); } .t-kv--filas { grid-template-columns: 1fr; gap: 0; } .t-kv--filas > div { display: grid; grid-template-columns: 120px 1fr; gap: var(--wp--preset--spacing--3); padding-block: var(--wp--preset--spacing--3); border-top: 1px solid rgba(126, 139, 138, 0.35); } .t-oscuro .t-kv--filas > div { border-top-color: rgba(255, 255, 255, 0.18); } /* Con las fuentes reales cargadas (no la Arial de respaldo), "info@trayecta.com.mx" en Manrope 700 a 1.25rem no cabe en lo que deja la columna de 120px del rótulo: a 390px desbordaba la página. En pantallas estrechas el rótulo va encima del valor y el valor se queda con todo el ancho. */ @media (max-width: 520px) { .t-kv--filas > div { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--1); } } /* ===== Formularios (Contact Form 7) ===== */ .t-form { display: grid; gap: var(--wp--preset--spacing--4); } .t-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--2); } .t-form legend { font-family: var(--wp--preset--font-family--manrope); font-weight: 700; font-size: var(--wp--preset--font-size--destacado); margin-bottom: var(--wp--preset--spacing--2); display: flex; align-items: center; gap: 12px; } .t-form__num { display: inline-grid; place-items: center; width: 32px; height: 32px; background: var(--wp--preset--color--amarillo); color: var(--wp--preset--color--negro); font-size: 0.875rem; } .t-form__campo { display: block; } .t-form__campo > span { display: block; font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--wp--preset--color--gris-oscuro); margin-bottom: 4px; } .t-form input[type="text"], .t-form input[type="email"], .t-form input[type="tel"], .t-form input[type="date"], .t-form textarea { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--wp--preset--color--gris); border-radius: 0; background: transparent; padding: 10px 0; font: inherit; color: var(--wp--preset--color--negro); } .t-form input:focus, .t-form textarea:focus { outline: 0; border-bottom: 2px solid var(--wp--preset--color--amarillo); } .t-form textarea { min-height: 110px; resize: vertical; } .t-form__dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--3); } .t-form__radios { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4); } .t-form__radios label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; } .t-form input[type="radio"] { accent-color: var(--wp--preset--color--amarillo); width: 18px; height: 18px; margin: 0; } .t-form .t-boton, .t-form input[type="submit"] { justify-self: start; } .t-form input[type="submit"] { font-family: var(--wp--preset--font-family--dm-sans); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 1rem 1.75rem; border: 2px solid var(--wp--preset--color--negro); background: var(--wp--preset--color--negro); color: var(--wp--preset--color--blanco); cursor: pointer; transition: background 150ms, color 150ms; } .t-form input[type="submit"]:hover { background: var(--wp--preset--color--amarillo); color: var(--wp--preset--color--negro); border-color: var(--wp--preset--color--amarillo); } .t-form__nota { font-size: var(--wp--preset--font-size--nota); color: var(--wp--preset--color--gris-oscuro); } @media (max-width: 700px) { .t-form__dos { grid-template-columns: 1fr; } } /* ===== Pie ===== */ .t-pie { background: var(--wp--preset--color--negro); color: var(--wp--preset--color--blanco); } .t-pie__int { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--wp--preset--spacing--5); padding-block: var(--wp--preset--spacing--7) var(--wp--preset--spacing--5); } .t-pie .t-logo { width: 160px; } .t-pie__col h2 { font-family: var(--wp--preset--font-family--dm-sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--amarillo); margin-bottom: var(--wp--preset--spacing--2); } .t-pie__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--wp--preset--font-size--nota); } .t-pie__col a { text-decoration: none; } .t-pie__col a:hover { text-decoration: underline; } .t-pie__col p { font-size: var(--wp--preset--font-size--nota); color: rgba(255, 255, 255, 0.72); margin-top: var(--wp--preset--spacing--2); max-width: 30em; } .t-pie__final { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-block: var(--wp--preset--spacing--3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--wp--preset--spacing--2); font-size: var(--wp--preset--font-size--nota); color: rgba(255, 255, 255, 0.6); } @media (max-width: 900px) { .t-pie__int { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .t-pie__int { grid-template-columns: 1fr; } } /* ===== Adaptación a los bloques de WordPress ===== */ .wp-block-group.t-cont { max-width: var(--wp--style--global--content-size); } /* WordPress emite `.is-layout-flex > :is(*, div)` { margin: 0 }: el `div` dentro de :is() sube la especificidad a (0,1,1) y anula el `margin-left: auto` de `.t-nav` (0,1,0), que es lo que en el mockup empuja el menú contra las acciones. Tres clases lo devuelven a su sitio. */ .wp-block-group.t-cabecera__int > .t-nav { margin-left: auto; } /* Un número de teléfono no se parte nunca en dos renglones: si falta sitio, que ceda otra cosa. */ .t-tel { white-space: nowrap; } /* Logotipos como bloques (decisión 8: el equipo los cambia desde el editor). El del encabezado es core/site-logo, que envuelve la imagen en un enlace; el del pie, un bloque de imagen que apunta a la variante blanca del tema. La anchura la sigue dando .t-logo, como en el mockup. */ .wp-block-site-logo.t-logo .custom-logo-link { display: block; } .wp-block-site-logo.t-logo img { width: 100%; height: auto; } .wp-block-image.t-logo { margin: 0; } .wp-block-image.t-logo a { display: block; } /* El teléfono va dentro de la capa del menú móvil, como en el mockup (decisión de Diego del 2026-09-08). En escritorio ya está en la barra: ahí se oculta la entrada. */ @media (min-width: 951px) { .t-nav .t-nav__tel { display: none; } } /* El mockup usa dos elementos (menú de escritorio y
móvil) y deja el hamburguesa al extremo derecho; aquí el bloque de navegación es uno solo, así que bajo 900px se reordena. Y el punto de corte del bloque es 600px: sin estas dos reglas, entre 601 y 950px se ven los enlaces de escritorio sin hamburguesa, ya reordenados detrás del botón, y la cabecera crece a dos renglones. */ @media (max-width: 950px) { .wp-block-group.t-cabecera__int > .t-nav { order: 3; margin-left: 0; } .t-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } .t-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } } .t-nav .wp-block-navigation-item__content { text-decoration: none; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 0; border-bottom: 2px solid transparent; } .t-nav .wp-block-navigation-item__content:hover, .t-nav .current-menu-item > .wp-block-navigation-item__content { border-bottom-color: var(--wp--preset--color--amarillo); } /* Solo el relleno: el fondo y el color los ponen overlayBackgroundColor/overlayTextColor del bloque (clases de preset con !important), no esta regla. */ .t-nav .wp-block-navigation__responsive-container.is-menu-open { padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--3); } .t-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--manrope); font-size: 1.75rem; text-transform: none; letter-spacing: 0; } /* El `justifyContent: right` del menú de escritorio deja la clase `items-justified-right`, que dentro de la capa pone `align-items: flex-end` en el envoltorio y empujaba los enlaces a la derecha. El mockup los alinea a la izquierda, contra el relleno de 24px. */ .t-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; } .t-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; } .t-nav .wp-block-navigation__responsive-container-close, .t-nav .wp-block-navigation__responsive-container-open { color: inherit; } .t-cabecera .wp-block-buttons .wp-block-button__link { padding: 0.75rem 1.25rem; } /* El mockup pone como hijo directo; el editor de bloques lo envuelve en un

. Ocultar solo el enlace deja ese

con ancho 0 pero consumiendo su gap (24px), que es lo que estrechaba el botón hasta partirlo en dos líneas en móvil. Se oculta el envoltorio, que lleva su propia clase para no ocultar cualquier párrafo que el equipo añada al grupo de acciones. */ @media (max-width: 950px) { .t-cabecera__tel { display: none; } .t-cabecera .wp-block-buttons .wp-block-button__link { padding: 0.75rem 1rem; } } /* ===== Patrones (Plan 2) ===== */ /* El logotipo del pie es un bloque de imagen (core/image) sin width/height en el : si el marcado los trae, core/image no los emite al guardar y el editor de sitio marca el pie como bloque inválido. La proporción se declara aquí, como con las demás imágenes sin width/height. */ .t-pie .t-logo img { aspect-ratio: auto 442 / 242; } .t-hero--oscuro::after { background-image: url(../img/icono.svg); } /* Lo que el mockup resuelve con style="" en línea, aquí son clases. */ .t-mt-2 { margin-top: var(--wp--preset--spacing--2); } .t-mt-3 { margin-top: var(--wp--preset--spacing--3); } .t-mt-4 { margin-top: var(--wp--preset--spacing--4); } .t-hero--corto .t-hero__int { min-height: 420px; } .t-seccion--apretada { padding-top: var(--wp--preset--spacing--4); } .t-seccion--baja { padding-block: var(--wp--preset--spacing--5); } .t-dos-columnas--arriba { align-items: start; } .t-dos-columnas--5-7 { grid-template-columns: 5fr 7fr; } /* El Group de la banda lleva ambas clases ("t-cont t-banda__int"): la regla de adaptación ".wp-block-group.t-cont" (dos clases) gana en especificidad al "max-width: 640px" de ".t-banda__int" (una clase) del mockup, así que la banda quedaba tan ancha como .t-cont (1160px) en vez de 640px. Repetir la propia clase sube la especificidad por encima. */ .wp-block-group.t-cont.t-banda__int { max-width: 640px; } /* Las imágenes son bloques de imagen (figure > img); el mockup ponía la clase en el img. */ .wp-block-image { margin: 0; } .wp-block-image > img, .wp-block-image > a > img { width: 100%; height: auto; } /* Sin width/height en el (core/image no los guarda así y el editor marcaría el bloque inválido), la proporción se declara aquí para que el navegador reserve el hueco antes de cargar. Con "auto" al frente (la misma forma que usa el navegador cuando sí hay width/height en el HTML): antes de cargar reserva esta proporción, y en cuanto la imagen carga adopta su proporción real si es distinta. Sin "auto" el navegador fuerza esta cifra para siempre, y en la foto del hero (560×373 aquí, pero el archivo real es 1920×869) eso la deformaba y añadía 73px de alto de más en móvil frente al mockup, que sí usa la proporción real. */ .t-cobertura__mapa img { aspect-ratio: auto 1; } .t-dos-columnas .wp-block-image img { aspect-ratio: auto 1; } /* El mockup escribe la cifra de la franja con y su texto con ; el editor no los conserva. */ .t-franja__cifra { display: block; font-family: var(--wp--preset--font-family--manrope); font-weight: 700; font-size: var(--wp--preset--font-size--titulo-1); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .t-franja__texto { display: block; margin-top: var(--wp--preset--spacing--1); color: rgba(255, 255, 255, 0.78); font-size: var(--wp--preset--font-size--nota); } /* La lista clave/valor del mockup es un

; aquí, un Group por fila con párrafos con clase. */ .t-kv__clave { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--gris-oscuro); padding-top: 4px; } .t-kv__valor { font-family: var(--wp--preset--font-family--manrope); font-weight: 700; font-size: var(--wp--preset--font-size--destacado); font-variant-numeric: tabular-nums; } .t-kv__nota { display: block; font-size: var(--wp--preset--font-size--nota); color: var(--wp--preset--color--gris-oscuro); } .t-kv__dd a { text-decoration: underline; text-underline-offset: 3px; } .t-kv__dd a:hover { text-decoration-thickness: 2px; } /* El enlace de la tarjeta es un párrafo con clase; hereda el color de la tarjeta, no el gris de sus párrafos. */ .t-tarjeta .t-tarjeta__enlace { color: inherit; align-self: flex-start; } .t-tarjeta__enlace a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* La ceja de la banda va en amarillo (Nosotros); la banda no lleva .t-oscuro porque su fondo es la foto. En Nosotros la ceja es el primer hijo del grupo ("is-layout-flow"), y WordPress lo resetea con ":root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }" (especificidad 0,2,0), que empata con ".t-banda .t-ceja" y le gana a ".t-banda p" (0,1,1) del mockup, que es de donde la ceja saca su separación de 16px. Repetir la propia clase no sube la especificidad (sigue en 0,2,0): lo que desempata a favor de esta regla es que trayecta.css se carga después del bloque de estilos globales de WordPress. */ .t-banda .t-ceja { color: var(--wp--preset--color--amarillo); margin-top: var(--wp--preset--spacing--2); } /* Contact Form 7 pone rows="10" al textarea si el shortcode no lo especifica; ese atributo fija una altura intrínseca mayor que min-height: 110px del mockup (que ahí no tiene rows y parte del valor por defecto del navegador). Un alto explícito gana al atributo rows. */ .t-form textarea { height: 110px; } /* CF7 envuelve cada control en , hijo directo del