/* Base: canvas, type, links, focus, layout primitives, bands, cards, buttons. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--texto); font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--naranja-texto); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--naranja-boton-hover); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); color: inherit; margin: 0 0 .5em; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
h1, h2 { font-weight: 900; font-stretch: var(--stretch-display); }
h3, h4 { font-weight: 800; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Brand focus ring: navy with a white halo, visible on white, marino and orange. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--marino); outline-offset: 0; box-shadow: 0 0 0 5px #fff; border-radius: 4px; }
.tone-marino :is(a, button, summary):focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--marino); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tl-skip { position: absolute; left: 12px; top: -60px; z-index: 100000; padding: 12px 18px; border-radius: var(--r-pill); background: var(--marino); color: #fff; font-weight: 700; text-decoration: none; }
.tl-skip:focus { top: 12px; color: #fff; }

.tl-main { display: block; outline: none; }
.tl-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* Bands: one per page section. Tone sets background and text color together. */
.tl-band { padding: 72px 0; }
.tl-band > .tl-wrap > :first-child { margin-top: 0; }
.tone-white { background: #fff; color: var(--texto); }
.tone-light { background: var(--gris-banda); color: var(--texto); }
.tone-marino { background: var(--marino); color: #fff; }
.tone-marino a { color: #fff; }
.tone-orange { background: var(--naranja); color: #fff; }
.tone-orange a { color: #fff; }
.tone-orange .tl-sub, .tone-marino .tl-sub { color: #fff; }

/* Kickers (mono, uppercase, small) and micro-labels. Orange reads #C43D00 on light, white on dark. */
.tl-kicker, .tl-label { font-family: var(--font-mono); font-size: .78rem; font-weight: 500; letter-spacing: var(--tracking-wider); text-transform: uppercase; line-height: 1.45; margin: 0 0 10px; }
.tl-kicker { color: var(--naranja-texto); }
.tl-label { color: var(--gris-texto); }
.tone-marino .tl-kicker, .tone-orange .tl-kicker { color: #fff; }
.tone-marino .tl-label { color: rgba(255, 255, 255, .78); }
.tl-mono { font-family: var(--font-mono); }
.tl-sub { font-size: 1.15rem; line-height: 1.5; color: var(--texto-sec); max-width: 62ch; }
.tl-small { font-size: .95rem; color: var(--gris-texto); }

/* Cards */
.tl-card { background: #fff; color: var(--texto); border: 1px solid var(--linea); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.tl-card.tone-marino { background: var(--marino); color: #fff; border-color: var(--marino); }
.tl-card.tone-light { background: var(--gris-banda); border-color: var(--gris-banda); }

/* Buttons. Filled = orange #D64300 on white text. Line = marino outline on light. Ghost = white outline on dark or orange bands. */
/* .wp-block-button > .wp-block-button__link outranks core's default gray button. */
.tl-btn, .wp-block-button > .wp-block-button__link, .wp-element-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: var(--r-pill); border: 2px solid var(--naranja-boton); background: var(--naranja-boton); color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease-envio), border-color var(--dur-fast) var(--ease-envio); }
.tl-btn:hover, .wp-block-button > .wp-block-button__link:hover, .wp-element-button:hover { background: var(--naranja-boton-hover); border-color: var(--naranja-boton-hover); color: #fff; }
.tl-btn-line, .is-style-outline > .wp-block-button__link { background: transparent; color: var(--marino); border-color: var(--marino); }
.tl-btn-line:hover, .is-style-outline > .wp-block-button__link:hover { background: var(--marino); color: #fff; border-color: var(--marino); }
.tone-marino .is-style-outline > .wp-block-button__link, .tone-orange .is-style-outline > .wp-block-button__link, .tl-btn-ghost { background: transparent; color: #fff; border-color: #fff; font-size: 1.19rem; }
.tone-marino .is-style-outline > .wp-block-button__link:hover, .tone-orange .is-style-outline > .wp-block-button__link:hover, .tl-btn-ghost:hover { background: #fff; color: var(--marino); }
.tone-orange .wp-block-button:not(.is-style-outline) > .wp-block-button__link { background: var(--marino); border-color: var(--marino); }
.tone-orange .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: var(--marino-tinta); border-color: var(--marino-tinta); }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.tl-btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.tl-ico { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Search form (archive header, search page, 404). */
.search-form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 560px; }
.search-form label { flex: 1 1 240px; margin: 0; }
.search-form .search-field { width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid var(--linea); border-radius: var(--r-md); background: #fff; color: var(--texto); font-size: 1rem; }
.search-form .search-submit { min-height: 50px; padding: 0 22px; border: 0; border-radius: var(--r-pill); background: var(--naranja-boton); color: #fff; font-weight: 700; cursor: pointer; }
.search-form .search-submit:hover { background: var(--naranja-boton-hover); }

/* Tracker ([tl_tracker] from the tl-tracking plugin prints its own blue; the theme recolors it). */
#tl-tracker { font-family: var(--font-sans); border-radius: var(--r-lg); border-color: var(--linea); box-shadow: var(--shadow-sm); }
#tl-tracker .tl-title { font-weight: 800; color: var(--texto); }
#tl-tracker .tl-subtitle { color: var(--gris-texto); }
#tl-input { min-height: 48px; border-radius: var(--r-md); border-color: var(--linea); font-size: 1rem; }
#tl-input:focus { border-color: var(--marino); }
#tl-btn { min-height: 48px; border-radius: var(--r-pill); background: var(--naranja-boton); font-weight: 700; font-size: 1rem; }
#tl-btn:hover { background: var(--naranja-boton-hover); }
#tl-btn:disabled { background: #e59a7a; }
#tl-tracker .tl-field-value { color: var(--texto); }
#tl-tracker .tl-field-label { color: var(--gris-texto); font-family: var(--font-mono); }
#tl-tracker .tl-carrier-links a { color: var(--marino); background: var(--gris-banda); border-color: var(--linea); }

@media (max-width: 767px) {
  .tl-band { padding: 48px 0; }
  .tl-card { padding: 22px 18px; }
  h1 { font-size: clamp(1.9rem, 9vw, 2.4rem); }
}
/* The tracker plugin prints its own <style> after the theme; the id pair outranks it. */
#tl-tracker #tl-btn { background: var(--naranja-boton); border-radius: var(--r-pill); min-height: 48px; font-weight: 700; font-size: 1rem; }
#tl-tracker #tl-btn:hover { background: var(--naranja-boton-hover); }
#tl-tracker #tl-input { min-height: 48px; border-radius: var(--r-md); font-size: 1rem; }
#tl-tracker #tl-input:focus { border-color: var(--marino); }