/* GLOBAL FONT */
body,
html {
font-family: "Plus Jakarta Sans", sans-serif;
/* Root-level safety net. Full-bleed sections no longer use width:100vw (see
the breakout note below), so nothing should overflow horizontally any
more — this stays as a backstop against a future block or third-party
plugin reintroducing an over-wide element.
This must be `clip`, never `hidden`. `overflow-x: hidden` cannot coexist
with `overflow-y: visible` — the browser silently computes the other axis
as `auto`, which turns the element into a SCROLL CONTAINER. With the rule
on both html and body, the page ended up with two nested scroll
containers (body had ~10px of scroll range of its own). Chrome then has
to latch scrolling to one of them and hand off at its boundary, which is
felt as scrolling "sticking" when you reach the very top or the very
bottom of the page.
`clip` clips without establishing a scroll container, so overflow-y stays
`visible` and only ONE scroller (the viewport) exists. Do not "simplify"
this back to `hidden`. */
overflow-x: clip;
}
/* Shared contained-content width. The theme's "global padding" (used on
.has-global-padding blocks) is a flat side padding with no width ceiling,
so full-bleed sections were stretching edge to edge on wide monitors.
Home-page sections opt into this instead of relying on that padding alone. */
:root {
--tsm-container: 1280px;
/* Rendered height of the FIXED .tsm-header, so pages that start with
in-flow content directly beneath it can reserve the right amount of
space instead of guessing.
The header takes itself out of flow (position: fixed), and its height is
INTRINSIC — the sum of .tsm-header-inner's vertical padding and the
tallest flex child. It therefore changes at two independent breakpoints:
the inner padding steps down at 900px and 600px, and the logo shrinks
110px -> 80px at 768px. A single hardcoded offset cannot track that,
which is exactly how the service-detail pages ended up with the back
link overlapping the header by ~7px on desktop while sitting 40px clear
on mobile.
Values are measured from the rendered header, rounded UP so a sub-pixel
difference can never produce an overlap:
> 900px padding 20px + 110px logo -> 156.8px
768-900px padding 16px + 110px logo -> 148.2px
601-767px padding 16px + 80px logo -> 117.8px
<= 600px padding 12px + 80px logo -> 109.5px
KEEP IN SYNC: changing .tsm-header-inner's padding or the logo width
below means re-measuring these. Consumers must add their own breathing
room on top (e.g. calc(var(--tsm-header-h) + 32px)) rather than baking
the gap into this value — this is the header's height, not a margin. */
--tsm-header-h: 157px;
}
@media (max-width: 900px) {
:root {
--tsm-header-h: 149px;
}
}
@media (max-width: 767px) {
:root {
--tsm-header-h: 118px;
}
}
@media (max-width: 600px) {
:root {
--tsm-header-h: 110px;
}
}
/* Smooth transitions for interactive elements.
NOTE: a universal `* { transition: ... }` rule used to live here. It was
removed because it made *every* element on the page a transition target
(measured: 342/342 elements, ~280 animating transform/opacity). As content
scrolls under a stationary pointer, Chrome recomputes :hover for whatever
element is now under the cursor; with a universal transition every such
change starts style-recalc + compositor animations across the whole tree,
which floods the main thread and makes wheel/trackpad scrolling appear to
"stick" until a mousemove forces the browser to catch up. Every element
that actually needs a hover animation already declares its own transition
on its own selector, so removing the universal rule changes no visible
behavior — it only stops the sitewide scroll-time cost. Interactive
elements below keep an explicit, property-scoped transition (not `all`,
which would watch every property incl. layout-affecting ones). */
a,
button,
.btn-primary,
.wp-block-button__link,
.wp-block-navigation-item__content {
transition:
color 0.3s ease,
background-color 0.3s ease,
transform 0.3s ease,
opacity 0.3s ease !important;
}
/* PAGE LOADING STATE */
body {
opacity: 0;
transition: opacity 0.3s ease-in;
}
body.loaded {
opacity: 1;
}
/* HEADER WRAPPER */
.tsm-header {
position: fixed;
top: 0;
/* Spanned with insets rather than width:100vw. A fixed element's containing
block is the viewport EXCLUDING the scrollbar, so left/right:0 gives the
exact visible width; 100vw INCLUDES the scrollbar and made the header
~15px too wide, pushing its right-hand buttons under the scrollbar and
contributing to the page's horizontal overflow. */
left: 0;
right: 0;
z-index: 100;
transition:
background-color 0.3s ease,
box-shadow 0.3s ease,
color 0.3s ease;
/* Start transparent by default - JS will add solid class if no carousel */
background: transparent;
box-shadow: none;
}
/* Default text color (white for transparent state) */
.tsm-header a,
.tsm-header button {
color: #fff !important;
transition: color 0.3s ease;
}
.tsm-header .wp-block-navigation-submenu__toggle svg {
stroke: #fff !important;
transition: stroke 0.3s ease;
}
/* INNER FLEX CONTAINER */
.tsm-header-inner {
width: 100%;
padding: 20px 48px;
display: flex;
align-items: center;
}
/* LEFT SIDE - Logo + Nav */
.tsm-header-left {
display: flex;
align-items: center;
gap: 75px !important;
}
/* NAV LINKS */
.tsm-header .wp-block-navigation a,
.tsm-header .wp-block-navigation button {
font-weight: 500;
text-decoration: none;
background: none;
border: none;
cursor: pointer;
font-size: inherit;
font-family: inherit;
}
/* Navigation Container */
.tsm-header .wp-block-navigation__container {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 30px;
align-items: center;
}
/* Navigation Items */
.tsm-header .wp-block-navigation-item {
position: relative;
list-style: none;
}
.tsm-header .wp-block-navigation-item__content {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
font-size: 15px !important;
}
/* Submenu Styles */
.tsm-header .wp-block-navigation-submenu {
position: relative;
}
.tsm-header .wp-block-navigation-submenu__toggle {
display: flex;
align-items: center;
gap: 6px;
}
.tsm-header .wp-block-navigation-submenu__toggle svg {
transition: transform 0.2s ease;
stroke: currentColor;
}
.tsm-header
.wp-block-navigation-submenu:hover
.wp-block-navigation-submenu__toggle
svg {
transform: rotate(180deg);
}
/* Dropdown Container */
.tsm-header .wp-block-navigation__submenu-container {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: #fff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
border-radius: 8px;
padding: 8px 0;
margin-top: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
list-style: none;
}
.tsm-header
.wp-block-navigation-submenu:hover
.wp-block-navigation__submenu-container {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Dropdown Items */
.tsm-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
margin: 0;
background: transparent !important;
}
.tsm-header
.wp-block-navigation__submenu-container
.wp-block-navigation-item__content {
display: block;
padding: 12px 20px;
color: white !important;
transition: background-color 0.2s ease;
}
/* TRANSPARENT MODE */
.tsm-header.is-transparent {
background: transparent;
}
.tsm-header.is-transparent a,
.tsm-header.is-transparent button {
color: #fff !important;
}
.tsm-header.is-transparent .wp-block-navigation-submenu__toggle svg {
stroke: #fff;
}
/* SOLID MODE (no carousel or scrolled) */
.tsm-header.is-solid {
background: #fff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.tsm-header.is-solid a,
.tsm-header.is-solid button {
color: #111 !important;
}
/* Keep header buttons white always */
.tsm-header.is-solid .btn-primary,
.tsm-header.is-scrolled .btn-primary {
color: #fff !important;
}
.tsm-header.is-solid .wp-block-navigation-submenu__toggle svg {
stroke: #111 !important;
}
/* Scrolled state */
.tsm-header.is-scrolled {
background-color: #ffffff;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.tsm-header.is-scrolled a,
.tsm-header.is-scrolled button {
color: #111 !important;
}
.tsm-header.is-scrolled .wp-block-navigation-submenu__toggle svg {
stroke: #111 !important;
}
/* LOGO SWITCHING */
.tsm-logo-container {
position: relative;
display: inline-block;
height: auto;
}
.tsm-logo-dark,
.tsm-logo-white {
transition: opacity 0.3s ease;
display: block;
width: 80px;
height: auto;
max-width: 100%;
@media (min-width: 768px) {
width: 110px;
}
}
/* When header is transparent (default), show white logo */
.tsm-header .tsm-logo-dark {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
.tsm-header .tsm-logo-white {
opacity: 1;
position: relative;
}
/* When header is solid, show dark logo */
.tsm-header.is-solid .tsm-logo-dark {
opacity: 1;
position: relative;
}
.tsm-header.is-solid .tsm-logo-white {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
/* When header is scrolled, show dark logo */
.tsm-header.is-scrolled .tsm-logo-dark {
opacity: 1;
position: relative;
}
.tsm-header.is-scrolled .tsm-logo-white {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
.tsm-header-right {
display: flex;
align-items: center;
gap: 10px;
}
.tsm-header-right-buttons {
display: flex;
gap: 10px;
align-items: center;
}
/* "Citas Export" is per-deployment: Costa Rica has an appointment system,
Panamá does not. Toggled by "Mostrar botón Citas Export" in Configuración
TSM, which puts .tsm-hide-citas-export on (Header\DynamicHeader).
Both copies of the button are hidden — the desktop core/button block and
the hand-written one in the mobile menu. The link is withheld from
TSM_SETTINGS at the same time, so a hidden button never carries the other
country's URL. */
.tsm-hide-citas-export .tsm-citas-btn,
.tsm-hide-citas-export .tsm-mobile-citas-btn {
display: none;
}
/* "Iniciar sesión" is hidden by default — there is no login destination yet
and the button has always been inert. Same mechanism as Citas Export above:
toggled by "Mostrar botón Iniciar sesión" in Configuración TSM, which puts
.tsm-hide-login on . Kept in the markup so re-enabling it is a
checkbox, not a redeploy. */
.tsm-hide-login .tsm-login-btn,
.tsm-hide-login .tsm-mobile-login-btn {
display: none;
}
/* MOBILE MENU BUTTON */
.tsm-mobile-menu-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
gap: 4px;
}
.tsm-hamburger-line {
width: 24px;
height: 2px;
background-color: currentColor;
transition: all 0.3s ease;
transform-origin: center;
pointer-events: none; /* Prevent clicks on child elements */
}
/* Hamburger animation when active */
.tsm-mobile-menu-toggle.active .tsm-hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.tsm-mobile-menu-toggle.active .tsm-hamburger-line:nth-child(2) {
opacity: 0;
}
.tsm-mobile-menu-toggle.active .tsm-hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
/* MOBILE MENU OVERLAY */
.tsm-mobile-menu-overlay {
position: fixed;
/* Inset on all four sides instead of 100vw/100vh. Besides the scrollbar
issue that 100vw has, 100vh on mobile Safari is the height WITHOUT the
browser chrome, so a 100vh overlay is taller than the visible area and
its bottom is unreachable while the URL bar is showing. Insets track the
real visible viewport on every browser. */
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.95);
z-index: 999;
opacity: 0;
visibility: hidden;
transition:
opacity 0.3s ease,
visibility 0.3s ease;
}
/* backdrop-filter is scoped to the active state only. As a fixed,
full-viewport element it sits in the header markup of EVERY page; leaving
the blur on the base rule allocates a viewport-sized backdrop layer that
the compositor may re-sample on scroll even while the menu is hidden.
Applying it only when open keeps the visual identical (the overlay is
invisible until .active) with no idle scroll-time cost. */
.tsm-mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
backdrop-filter: blur(10px);
}
/* Mobile Menu Close Button */
.tsm-mobile-menu-close {
position: absolute;
top: 24px;
right: 24px;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 50%;
cursor: pointer;
color: #fff;
transition: background-color 0.3s ease;
z-index: 1001;
}
.tsm-mobile-menu-close:hover {
background: rgba(255, 255, 255, 0.2);
}
.tsm-mobile-menu-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* box-sizing: border-box is required here — height: 100% must include the
padding, or the element renders taller than the viewport (844 + 120px
of vertical padding = 964px on a 390x844 screen) and centers its content
inside that oversized, partly off-screen box instead of the real
viewport, pushing the nav links visibly toward the top. */
box-sizing: border-box;
height: 100%;
padding: 40px;
text-align: center;
}
.tsm-mobile-nav {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
margin-bottom: 48px;
}
.tsm-mobile-nav-link {
color: #fff !important;
font-size: 24px;
font-weight: 500;
text-decoration: none;
transition: opacity 0.3s ease;
text-align: center;
}
.tsm-mobile-nav-link:hover {
opacity: 0.7;
}
.tsm-mobile-services-dropdown {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.tsm-mobile-services-toggle {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.tsm-services-arrow {
transition: transform 0.3s ease;
color: #fff;
}
.tsm-mobile-services-dropdown.active .tsm-services-arrow {
transform: rotate(180deg);
}
.tsm-mobile-services-list {
display: none;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 0;
margin-top: 16px;
}
.tsm-mobile-services-dropdown.active .tsm-mobile-services-list {
display: flex;
}
.tsm-mobile-services-list a {
color: #fff !important;
font-size: 18px;
font-weight: 400;
text-decoration: none;
opacity: 0.7;
transition: opacity 0.3s ease;
text-align: center;
}
.tsm-mobile-services-list a:hover {
opacity: 1;
}
.tsm-mobile-buttons {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
max-width: 280px;
}
.tsm-mobile-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 16px 24px;
background: #ee2346;
color: #fff !important;
text-decoration: none;
border-radius: 999px;
font-weight: 600;
font-size: 16px;
transition: background-color 0.3s ease;
}
.tsm-mobile-btn:hover {
background: #d91e3c;
}
.tsm-mobile-btn img {
width: 18px;
height: auto;
}
.tsm-btn-primary .wp-block-button__link {
display: inline-flex;
align-items: center;
gap: 8px;
figure {
height: 20px;
margin: 0;
img {
vertical-align: initial;
}
}
}
.btn-primary {
background: #ee2346 !important;
color: #fff !important;
font-size: 12px !important;
padding: 10px 15px !important;
font-weight: 600;
border-radius: 999px;
text-decoration: none;
transition: all 0.25s ease;
display: inline-flex;
align-items: center;
gap: 12px;
}
@media (min-width: 768px) {
.btn-primary {
font-size: 14px !important;
padding: 10px 20px !important;
}
}
.btn-primary a {
font-size: 14px !important;
}
.btn-primary figure {
margin: 0;
display: flex;
align-items: center;
}
.btn-primary img {
vertical-align: middle;
}
.btn-primary:hover {
background: #d91f3d !important;
transform: translateY(-2px);
}
.wp-block-post-title {
display: none;
}
/* Remove top spacing above first section */
.wp-site-blocks {
padding-top: 0;
}
/* Remove default main spacing */
main {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Remove group block top margin */
.wp-block-group {
margin-top: 0;
}
body:has(.tsm-carousel-wrapper)
.wp-block-group.has-global-padding:not(.tsm-footer) {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body:has(.tsm-carousel-wrapper) .entry-content.has-global-padding {
padding-top: 0 !important;
}
/* Safety: kill margins too */
body:has(.tsm-carousel-wrapper) .entry-content {
margin-top: 0 !important;
}
.tsm-related-products {
min-width: 100%;
width: 100%;
}
.wp-block-image img {
vertical-align: initial !important;
}
:where(figure) {
margin: 0;
}
body {
/* NOT 100vw: that unit includes the scrollbar's width, so on desktop the
body rendered ~15px wider than the space actually available to it. That
self-inflicted horizontal overflow is what the overflow-x clipping above
was compensating for. 100% resolves against the containing block, which
already excludes the scrollbar. */
width: 100%;
overflow-x: clip;
}
/* ── FULL-BLEED: let WordPress do it ───────────────────────────────────────
Applies to .cta-help below, .tsm-carousel-wrapper (tsm-core/carousel.css)
and .tsm-locations-grid (tsm-core/locations.css).
These used to declare `width: 100vw; margin-left: calc(50% - 50vw)` — the
well-known breakout trick. It was wrong here for one reason: **100vw
includes the scrollbar's width**, so every full-bleed section rendered ~15px
wider than the viewport and hung off the right edge. That overflow is what
forced the root-level clipping above, which in turn caused the nested-scroll
-container stall documented in docs/CLAUDE/gotchas.md.
The trick was also redundant. This theme uses WordPress's root-padding-aware
alignments, so core already ships exactly the right rule:
.has-global-padding > .alignfull {
margin-left: calc(var(--wp--style--root--padding-left) * -1);
margin-right: calc(var(--wp--style--root--padding-right) * -1);
}
Every one of these elements carries .alignfull, so the breakout is already
handled — correctly, at every breakpoint, with no viewport units. All that
was needed was to stop forcing a width. `width: auto` then resolves to
containing block + both negative margins, i.e. the viewport, scrollbar
already excluded.
So: **do not re-add breakout margins to these rules.** Declaring them on top
of WordPress's doubles the offset wherever the parent's padding is not what
the margins assume, which is exactly how the carousel ended up 100px too
wide on Sobre Nosotros. If a full-bleed element is not breaking out, the fix
is in the markup (does it have .alignfull? is its parent .has-global-padding?),
not another margin override here.
------------------------------------------------------------------------ */
:where(figure) {
margin: 0 !important;
}
/* CTA */
.cta-help {
position: relative;
box-sizing: border-box;
padding: 40px 20px;
background-color: #fafafa;
overflow: hidden;
border-radius: 0;
@media (min-width: 641px) {
padding: 56px 20px;
}
@media (min-width: 900px) {
padding: 80px 20px;
}
@media (min-width: 768px) {
/* Full-bleed comes from WordPress's .alignfull rule — see the note near
the top of this file. Only the 100vw width needed removing. */
width: auto;
}
}
/* SVG background */
.cta-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/* Circle style */
.cta-bg circle {
fill: none;
stroke: #e0dff7;
stroke-width: 1.5;
}
/* Content above SVG */
.cta-container {
position: relative;
z-index: 2;
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.cta-container h2 {
font-size: 44px;
font-weight: 700;
line-height: 1.2;
color: #111;
margin-top: 0;
margin-bottom: 35px;
letter-spacing: -0.5px;
}
@media (max-width: 900px) {
.cta-container h2 {
font-size: 32px;
}
}
@media (max-width: 600px) {
.cta-container h2 {
font-size: 26px;
}
}
.cta-button {
display: inline-block;
background: #ee2346;
color: #fff;
padding: 20px 38px;
font-size: 16px;
font-weight: 600;
border-radius: 999px;
text-decoration: none;
transition: all 0.25s ease;
}
.primary-btn:hover,
.cta-button:hover {
background: #ee2346;
transform: translateY(-2px);
}
/* =========================
ABOUT US PAGE
========================= */
/* About Section */
.tsm-about-section {
background: #fff;
}
.tsm-about-columns {
display: flex;
gap: 60px;
align-items: center;
justify-content: center;
}
.tsm-about-image-col,
.tsm-about-text-col {
flex: 1;
max-width: 700px;
}
.tsm-about-image {
width: 100%;
border-radius: 16px;
overflow: hidden;
}
.tsm-about-image img {
width: 100%;
height: auto;
object-fit: cover;
display: block;
}
.tsm-about-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 24px;
color: #191919;
}
.tsm-about-text {
font-size: 16px;
line-height: 1.7;
color: #191919b3;
margin-bottom: 20px;
}
/* Values Section */
.tsm-values-section {
background: #fafafa;
}
/* Mobile Responsive */
@media (max-width: 900px) {
.tsm-about-columns {
flex-direction: column;
gap: 40px;
}
}
/* =========================
CONTAINER & FOOTER
========================= */
/* Container for content width */
.tsm-container {
max-width: var(--tsm-container) !important;
margin: 0 auto;
padding: 0 48px;
width: 100%;
box-sizing: border-box;
}
/* Nosotros page content - same styles as product-content */
.tsm-nosotros-content p,
.tsm-nosotros-content span,
.tsm-nosotros-content li,
.tsm-nosotros-content ul {
font-size: 14px;
color: #191919b3;
margin-top: 0;
font-weight: 500 !important;
}
.tsm-nosotros-content strong, b {
font-size: 14px;
font-weight: 700 !important;
color: #191919b3 !important;
}
.tsm-nosotros-content ul {
color: #191919b3;
}
.tsm-nosotros-content h1,
.tsm-nosotros-content h2,
.tsm-nosotros-content h3,
.tsm-nosotros-content h4,
.tsm-nosotros-content h5,
.tsm-nosotros-content h6 {
color: #191919;
margin-bottom: 15px !important;
}
.tsm-nosotros-content h1,
.tsm-nosotros-content h2,
.tsm-nosotros-content h3 {
font-weight: 700 !important;
}
.tsm-nosotros-content p {
margin-bottom: 16px;
}
.tsm-nosotros-content p:last-child {
margin-bottom: 0;
}
/* Footer Styles */
.tsm-footer {
background: #ee2346;
color: #fff;
}
.tsm-footer .tsm-container {
padding: 0;
}
.tsm-footer-columns {
display: flex;
gap: 40px;
margin-bottom: 0;
}
.tsm-footer-col {
flex: 1;
}
.tsm-footer-logo {
margin-bottom: 16px;
}
.tsm-footer-tagline {
color: #fff;
opacity: 0.9;
margin: 0;
}
.tsm-footer-heading {
color: #fff;
margin-bottom: 20px;
margin-top: 0;
}
.tsm-footer-nav {
gap: 16px !important;
}
.tsm-footer-nav .wp-block-navigation-item {
margin: 0;
}
.tsm-footer-nav .wp-block-navigation-item a {
color: #fff;
opacity: 0.9;
text-decoration: none;
font-size: 14px;
transition: opacity 0.2s ease;
}
.tsm-footer-nav .wp-block-navigation-item a:hover {
opacity: 1;
}
.tsm-footer-text {
color: #fff;
opacity: 0.9;
margin: 0 0 8px 0;
}
/* Service hours are a multi-line setting — honour its line breaks. */
.tsm-footer-hours,
.tsm-contact-hours {
white-space: pre-line;
}
/* The contact page's email row points at email-dark.svg in the template. A
site serving a DB copy of that template (saved in the Site Editor at some
point) still points it at telephone.svg, and no template edit of ours can
reach it. Replacing the rendered image in CSS does, and is a no-op where
the markup is already correct. */
.tsm-contact-email-item img {
content: url("../images/email-dark.svg");
}
.tsm-footer-bottom {
width: 100%;
}
.tsm-footer-copyright,
.tsm-footer-link {
color: #fff;
opacity: 0.8;
margin: 0;
}
.tsm-footer-link a {
color: #fff;
text-decoration: none;
margin-left: 20px;
transition: opacity 0.2s ease;
}
.tsm-footer-link a:hover {
opacity: 1;
}
/* Mobile Footer */
@media (max-width: 900px) {
.tsm-container {
padding: 0 24px;
}
.tsm-footer-columns {
flex-direction: column;
gap: 32px;
}
.tsm-footer-bottom {
flex-direction: column;
gap: 16px;
text-align: center;
}
.tsm-footer-link a {
margin-left: 0;
margin-right: 12px;
}
}
/* =========================
CONTACT PAGE
========================= */
/* The header is FIXED, so this page has to reserve its height itself. It used
to carry an inline `padding-top: 150px` — 7px LESS than --tsm-header-h, so
"Contáctanos" started underneath the header with no breathing room at all.
Derive it instead, exactly as the service detail page does, and add the same
32px gap on top (see the --tsm-header-h comment: that var is the header's
height, not a margin). */
/* !important because a site whose contact template was ever saved in the Site
Editor serves a DB copy of the old markup, which still carries the inline
`padding-top: 150px` this rule replaces — and an inline style beats a
stylesheet. The responsive rules below already use !important for their own
reasons, so the specificity ladder here stays consistent. */
.tsm-contact-section {
background: #fff;
overflow-x: hidden;
padding-top: calc(var(--tsm-header-h, 157px) + 32px) !important;
}
.tsm-contact-columns {
display: flex;
gap: 100px;
align-items: center;
max-width: 100%;
width: 100%;
justify-content: center;
}
.tsm-contact-info-col {
flex: 0 0 auto;
max-width: 700px;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.tsm-contact-form-col {
flex: 0 0 auto;
max-width: 700px;
min-width: 0;
display: flex;
justify-content: center;
}
.tsm-contact-title {
font-size: 56px;
font-weight: 500;
line-height: 1.2;
color: #191919;
margin: 0 0 20px 0;
font-style: italic;
}
.tsm-contact-description {
font-size: 14px;
line-height: 140%;
color: #191919b3;
margin: 36px 0 !important;
font-weight: regular;
}
.tsm-contact-item {
margin: 0 !important;
margin-bottom: 40px !important;
}
.tsm-contact-item h4,
.tsm-contact-item p {
font-size: 16px;
font-weight: 500;
margin-bottom: 0;
color: #191919b3;
}
.tsm-contact-item li,
.tsm-panel-text li {
margin-bottom: 5px;
}
.tsm-contact-label {
font-size: 14px;
font-weight: 600;
color: #191919;
margin: 0 0 8px 0;
}
.tsm-contact-value {
font-size: 16px;
color: #191919b3;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
/* Contact Form Wrapper */
.tsm-contact-form-wrapper {
background: #f5f5f5;
border-radius: 20px;
padding: 24px 28px;
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
/* CF7's own stylesheet is disabled (Support\Assets: wpcf7_load_css -> false),
so the rules it would have provided have to live here. Without them the
plugin's accessibility block renders as a visible bulleted error summary and
the per-field tips inherit body colour instead of red. Everything from here
to the submit button targets CF7's own class names, which do not depend on
how a particular form is authored. */
/* The a11y summary. CF7 ships this visually hidden; keep it available to
screen readers, just not painted on the page. */
.tsm-contact-form-wrapper .screen-reader-response {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* The banner. Hidden by default — CF7 renders this div empty on page load and
on validation errors, and a bordered empty box was showing under the submit
button. Only the states that carry a message opt back in; `invalid` stays
hidden deliberately, since the per-field tips already say it better. */
.tsm-contact-form-wrapper .wpcf7-response-output {
display: none;
margin: 4px 0 0;
padding: 10px 14px;
border: 1px solid currentColor;
border-radius: 8px;
font-size: 13px;
}
.tsm-contact-form-wrapper .wpcf7-form.sent .wpcf7-response-output,
.tsm-contact-form-wrapper .wpcf7-form.failed .wpcf7-response-output,
.tsm-contact-form-wrapper .wpcf7-form.aborted .wpcf7-response-output {
display: block;
}
.tsm-contact-form-wrapper .wpcf7-form.sent .wpcf7-response-output {
color: #1c7c3f;
}
.tsm-contact-form-wrapper .wpcf7-form.failed .wpcf7-response-output,
.tsm-contact-form-wrapper .wpcf7-form.aborted .wpcf7-response-output {
color: #d92040;
}
/* The per-field message — the one the client actually wants to read. */
.tsm-contact-form-wrapper .wpcf7-not-valid-tip {
display: block;
margin-top: 5px;
color: #d92040;
font-size: 12px;
line-height: 1.3;
}
.tsm-contact-form-wrapper .wpcf7-form-control.wpcf7-not-valid {
border-color: #d92040;
}
/* Hidden inputs live in a