/* * Compensaciones de CSS del marcado semántico de Maitén (TG-1620). * * `custom.css` es el CSS ORIGINAL del template y no se toca (ver maiten/layout/topbar.tsx). Cuando el * SEO obliga a cambiar la etiqueta de un texto (h2 -> h1, h3 -> p, …), el elemento nuevo deja de * matchear la regla del theme y cambiaría de aspecto. Cada regla de acá restituye EXACTAMENTE los * valores medidos en `custom.css` para que no haya ninguna diferencia visual. * * Se enlaza con precedence="maiten-overrides", posterior a "maiten-app" (custom.css), para ganar la * cascada a igual especificidad. Ver maiten/layout/site-layout.tsx. * * REGLA: cada bloque cita la línea de `custom.css` de donde sale el valor. No agregar nada acá sin * haber medido el valor original primero. */ /* --------------------------------------------------------------------------------------------- * 1. Encabezado de páginas interiores: h2 -> h1 (page-header.tsx). * * `custom.css:366` declara `.section-title h1, .section-title h2 { font-size: 50px }` — la MISMA * regla para ambas etiquetas, así que en >=992px y en <=991px el cambio es neutro. * La única diferencia está en <=767px: `:3534` da 26px a h1+h2, pero `:3580` lo sobreescribe a 28px * solo para h1. Se restituye el 26px que tenía el h2, acotado al encabezado de página (`.page-intro`) * para no tocar el h1 del hero ni ningún otro `.section-title h1`. * --------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) { .page-intro .section-title h1 { font-size: 26px; } } /* --------------------------------------------------------------------------------------------- * 2. Hero del Home: un solo h1 (hero-slider.tsx). * * El slider deja todas las capas de slides en el DOM a la vez, así que un `

` por slide daba N+1 * encabezados de nivel 1. Ahora solo el slide ACTIVO usa `

`; el resto (y el espaciador que fija * la altura) usan un `
`. * * Los slides inactivos son visibles durante el crossfade, y el espaciador define la altura del hero: * el div tiene que verse idéntico al h1. Valores replicados de: * - `custom.css:56` h1..h6 -> font-family accent, font-weight 700, margin-top 0 * - `custom.css:366` .section-title h1 -> line-height 1.2em, margin-bottom 0 * - `custom.css:660` .hero-content .section-title h1 -> color blanco, font-size 70px * - `custom.css:3261` @991 -> font-size 56px * - `custom.css:3584` @767 -> font-size 28px * --------------------------------------------------------------------------------------------- */ .hero-content .section-title .hero-slide-title { font-family: var(--accent-font); font-weight: 700; line-height: 1.2em; margin-top: 0; margin-bottom: 0; color: var(--white-color); font-size: 70px; } @media only screen and (max-width: 991px) { .hero-content .section-title .hero-slide-title { font-size: 56px; } } @media only screen and (max-width: 767px) { .hero-content .section-title .hero-slide-title { font-size: 28px; } } /* --------------------------------------------------------------------------------------------- * 3. Títulos de columna del footer: h3 -> div (site-layout.tsx). * * Replicado de `custom.css:1577` (`.footer-contact-info h3, .footer-quick-links h3`) + la regla * global de encabezados `custom.css:56` (font-family/weight, que un div no hereda). * Responsive: `:3357` @991 margin-bottom 20px, `:3771` @767 font-size 20px. * --------------------------------------------------------------------------------------------- */ .footer-contact-info .footer-widget-title, .footer-quick-links .footer-widget-title { font-family: var(--accent-font); font-weight: 700; font-size: 22px; color: var(--accent-color); margin-top: 0; margin-bottom: 30px; } @media only screen and (max-width: 991px) { .footer-contact-info .footer-widget-title, .footer-quick-links .footer-widget-title { margin-bottom: 20px; } } @media only screen and (max-width: 767px) { .footer-contact-info .footer-widget-title, .footer-quick-links .footer-widget-title { font-size: 20px; } } /* --------------------------------------------------------------------------------------------- * 4. Nombre · cargo del testimonio: h3 -> div (testimonials-carousel.tsx). * * Replicado de `custom.css:1798` (`.testimonial-slide .testimonial-author-info h3`), que ya * sobreescribe font-family, weight y color de la regla global de encabezados. Sin overrides * responsive. La regla `:1826` (texto blanco en el slide activo de Swiper) NO aplica: el carrusel * de React no usa `.testimonial-slider` ni `.swiper-slide-active`. * --------------------------------------------------------------------------------------------- */ .testimonial-slide .testimonial-author-info .testimonial-author-name { font-size: 16px; font-family: var(--default-font); font-weight: 600; color: var(--text-color); margin-top: 0; margin-bottom: 15px; } /* --------------------------------------------------------------------------------------------- * 5. Label del widget de búsqueda: h4/h3 -> div (search-filters.tsx). * * Replicado de `custom.css:805` (`.search-heading h4`) + la regla global `custom.css:56`. * `.search-heading` sigue controlando la visibilidad (oculto en escritorio, `custom.css:801`). * --------------------------------------------------------------------------------------------- */ .search-filters-heading { font-family: var(--accent-font); font-weight: 700; font-size: 18px; color: var(--primary-color); position: relative; text-align: center; margin-top: 0; margin-bottom: 0; } /* --------------------------------------------------------------------------------------------- * 6. Ficha de propiedad (property-detail.tsx). * * 6a. Labels del resumen ("Habitaciones", "Baños", …): h3 -> div. * El valor efectivo sale de `custom.css:4201`, que es una regla BASE con `!important` y por eso gana * en todos los breakpoints (pisa los 20px de `:2555` y los 16px de `:3907` @767). Medido: 14px. * --------------------------------------------------------------------------------------------- */ .property-overview-box .property-overview-item .property-overview-content .property-overview-label { font-family: var(--accent-font); font-size: 14px; font-weight: 600; color: var(--dark-color); margin-top: 0; margin-bottom: 3px; } /* * 6b. Títulos de bloque: h3 -> h2 (jerarquía h1 -> h2 -> h3, antes saltaba de h1 a h3). * Las reglas del theme apuntan a `h3`, así que el `h2` tomaría el tamaño de Bootstrap * (`calc(1.325rem + .9vw)`). Se replican los valores de `custom.css:2509` (+ `:3877` @767 para el * subtítulo) y de `:2217` / `:2446` para las cajas del sidebar. `.property-agent-box` no necesita * regla propia: en el JSX lleva también la clase `.property-info-box`. */ .property-single-subtitle h2 { font-size: 36px; color: var(--primary-color); margin: 0; } @media only screen and (max-width: 767px) { .property-single-subtitle h2 { font-size: 26px; } } .property-info-box h2, .property-inquiry-box h2 { font-size: 22px; color: var(--dark-color); font-weight: 600; margin-top: 0; margin-bottom: 20px; } /* --------------------------------------------------------------------------------------------- * 7. Burbujas de la página Contacto: h3 -> h2 (contact-page.tsx). * * La página abre con el h1 de `PageHeader`, así que estos títulos iban h1 -> h3: un salto de nivel. * Replicado de `custom.css:3026` (`.contact-detail-item h3`) + `:4005` @767. No se declara * `margin-bottom`: el theme tampoco lo hacía y Bootstrap aplica el mismo `.5rem` a h2 y a h3. * --------------------------------------------------------------------------------------------- */ .contact-detail-item h2 { font-size: 22px; font-weight: 600; color: var(--dark-color); } @media only screen and (max-width: 767px) { .contact-detail-item h2 { font-size: 20px; } } /* --------------------------------------------------------------------------------------------- * 8. Tarjetas de la página Servicios: h3 -> h2 (services-page.tsx). * * Mismo salto de nivel que en Contacto (h1 de PageHeader -> h3). Quillay ya usaba h2. * Replicado de `custom.css:1216` (`.how-it-work-item h3`) + `:3700` @767. * --------------------------------------------------------------------------------------------- */ .how-it-work-item h2 { font-size: 22px; margin-bottom: 15px; color: var(--dark-color); font-weight: 600; } @media only screen and (max-width: 767px) { .how-it-work-item h2 { font-size: 20px; } } /* --------------------------------------------------------------------------------------------- * 9. Título de la tarjeta de propiedad en nivel 2 (property-card.tsx, `headingLevel={2}`). * * En el listado la tarjeta cuelga directo del h1 de la página, así que su título va en h2 para no * saltar de h1 a h3. Dentro de secciones con su propio h2 sigue siendo h3 y usa la regla del theme. * Replicado de `custom.css:966` (`.property-item .property-body h3`) + `:3634` @767. * --------------------------------------------------------------------------------------------- */ .property-item .property-body h2 { font-size: 22px; font-weight: 600; color: var(--dark-color); } @media only screen and (max-width: 767px) { .property-item .property-body h2 { font-size: 20px; } }