/*
 * TS Orbix design system — visual reference: tsorbix.wixsite.com/ts-orbix
 *
 * Spec: /tmp/opencode/wix-ds/home/spec.json (measured live, 1440px viewport)
 *   header: 104px white bar, menu avenir 15px black, active/dropdown #57BBBF
 *   hero:   930px full-bleed photo, lulo 20px white title + 14px sub + 14px CTA links (ls 1.4px)
 *   que-es: left-aligned, lulo 53px #57BBBF / 33px #14445C / body 25px avenir justify / 25px #14445C
 *   cards:  450px, 3 columns #14445C / #57BBBF / #14445C, lulo 18px + avenir 16px white
 *   bands:  976/1009px, 2 columns 50/50 (navy|white, white|teal), lulo 56px / 17px, 29px body, pills h=50 radius 25
 *   sobre:  white, lulo 55px #0A5587
 *   footer: #57BBBF teal band, avenir 14px white ls 0.56px legal row
 * Fonts: Nunito Sans (≈ avenir-lt), Baloo 2 (≈ lulo-clean). User decision: no self-hosted Wix woff2.
 */

:root {
	--tsx-navy: #14445C;
	--tsx-teal: #57BBBF;
	--tsx-azul: #0A5587;
	--tsx-black: #000000;
	--tsx-white: #FFFFFF;
	--tsx-font-body: 'Nunito Sans', 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
	--tsx-font-display: 'Baloo 2', 'Comic Sans MS', cursive;
}

/* ─── Full-bleed marketing pages ───────────────────────────────────────── */

body.page-template-page-templateshome-php .site-content > .container,
body.page-template-page-templatessections-php .site-content > .container {
	max-width: none;
	width: 100%;
	padding: 0;
}

body.page-template-page-templateshome-php .site-content,
body.page-template-page-templatessections-php .site-content {
	padding: 0;
}

body {
	font-family: var(--tsx-font-body);
	color: var(--tsx-black);
}

.tsx-page {
	font-family: var(--tsx-font-body);
	color: var(--tsx-black);
	overflow: hidden;
}

.tsx-page h1,
.tsx-page h2,
.tsx-page h3,
.tsx-page h4 {
	font-family: var(--tsx-font-display);
	font-weight: 800;
	line-height: 1.15;
	text-transform: uppercase;
	margin: 0;
}

.tsx-page p {
	line-height: 1.7;
}

/* Tamaño unificado 21px para todo el contenido, salvo header y las secciones destacadas (que-es, bandas, sobre). */
.tsx-hero h1 { font-size: 24px; }
.tsx-hero__sub { font-size: 24px; }
.tsx-hero__cta a { font-size: 21px; }
.tsx-inner-hero h1,
.tsx-page-hero h1 { font-size: 21px; }
.tsx-title--hero { font-size: 53px; }
.tsx-title--hero--lg { font-size: 21px; }
.tsx-title--sub { font-size: 33px; }
.tsx-title--sub-sm { font-size: 21px; }
.tsx-lead--justify { font-size: 25px; }
.tsx-lead--justify--lg { font-size: 21px; }
.tsx-title--md {
	font-family: var(--tsx-font-display);
	font-size: 25px;
}
.tsx-card h3,
.tsx-card p { font-size: 21px; }
.tsx-title--xxl { font-size: 78px; }
.tsx-title--band { font-size: 21px; }
.tsx-lead--xl { font-size: 29px; }
.tsx-title--sobre { font-size: 55px; }
.tsx-page .tsx-title--sobre { margin-bottom: 120px; }
#sobre-nosotros .tsx-iniciativa { font-size: 24px; }
#sobre-nosotros .tsx-sobre__intro,
#sobre-nosotros .tsx-sobre__socios { font-size: 21px; }
.tsx-title--why,
.tsx-title--why-sub { font-size: 21px; }
.tsx-feature__num,
.tsx-feature h3,
.tsx-feature p,
.tsx-pack__num,
.tsx-pack-row h3 { font-size: 21px; }
.tsx-title--aud,
.tsx-sub--aud,
.tsx-aud-list li,
.tsx-section--right .tsx-aud-list li { font-size: 21px; }
.tsx-col-3 h3,
.tsx-col-3 p { font-size: 21px; }
.tsx-title--pack,
.tsx-lead--pack,
.tsx-pack-row h3,
.tsx-pack-side h3,
.tsx-pack-sub,
.tsx-pack-text { font-size: 21px; }
.tsx-closing h2,
.tsx-closing--text h2,
.tsx-closing .tsx-lead--pack,
.tsx-closing--text .tsx-lead--pack { font-size: 21px; }
.tsx-contact h2,
.tsx-form label { font-size: 21px; }

/* Variantes de "quienes-somos": unificadas a 21px. */
body.page-quienes-somos .tsx-title--hero--lg,
body.page-quienes-somos .tsx-title--sub-sm,
body.page-quienes-somos .tsx-lead--justify--lg,
body.page-quienes-somos .tsx-title--md,
body.page-quienes-somos .tsx-col-3 h3 { font-size: 21px; }

/* ─── Header (barra blanca 104px, menú 15px con dropdowns) ─────────────── */

.tsx-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--tsx-white);
}

.tsx-header__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 49.6px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32.0px;
	min-height: 104px;
}

.tsx-header__logo img {
	height: 46px;
	width: auto;
	display: block;
}

.tsx-header__nav {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

.tsx-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 24.8px;
}

.tsx-menu li {
	position: relative;
}

.tsx-menu > li > a {
	color: var(--tsx-black);
	text-decoration: none;
	font-size: 15.04px;
	font-weight: 400;
	white-space: nowrap;
	transition: color 0.15s ease;
}

.tsx-menu a:hover,
.tsx-menu li.current-menu-item > a,
.tsx-menu li.current-menu-ancestor > a {
	color: var(--tsx-teal);
}

.tsx-menu ul.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: -19.2px;
	background: var(--tsx-white);
	list-style: none;
	margin: 14.4px 0 0;
	padding: 12.8px 0;
	min-width: 230px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
	border-radius: 4px;
}

.tsx-menu li:hover > ul.sub-menu {
	display: block;
}

.tsx-menu ul.sub-menu li {
	padding: 0;
}

.tsx-menu ul.sub-menu a {
	display: block;
	color: var(--tsx-black);
	font-size: 15.04px;
	text-decoration: none;
	padding: 8.8px 22.4px;
	transition: color 0.15s ease, background 0.15s ease;
}

.tsx-menu ul.sub-menu a:hover {
	color: var(--tsx-teal);
	background: #F5FAFA;
}

.tsx-burger {
	display: none;
	background: none;
	border: 0;
	font-size: 25.6px;
	color: var(--tsx-black);
	cursor: pointer;
	line-height: 1;
}

.tsx-mobile {
	display: none;
}

.tsx-mobile.is-open {
	display: block;
	background: var(--tsx-white);
	border-top: 1px solid #E2E2E2;
	padding: 12.8px 24.0px 19.2px;
}

.tsx-mobile .tsx-menu {
	flex-direction: column;
	gap: 14.4px;
	padding: 9.6px 0 16.0px;
}

.tsx-mobile .tsx-menu ul.sub-menu {
	display: block;
	position: static;
	box-shadow: none;
	padding: 6.4px 0 3.2px 19.2px;
	min-width: 0;
	margin: 6.4px 0 0;
}

/* ─── Hero (foto full-bleed 930px, contenido centrado abajo) ───────────── */

.tsx-hero {
	position: relative;
	min-height: 930px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	color: var(--tsx-white);
	padding: 0 24.0px 168.0px;
	text-align: center;
	background-image: url('../img/hero.jpg');
	background-size: cover;
	background-position: center 30%;
	overflow: hidden;
}

.tsx-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.tsx-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 880px;
}

.tsx-hero__qr {
	display: block;
	width: 425px;
	max-width: 100%;
	height: auto;
	margin: 0 auto 32.0px;
}

.tsx-hero__text {
	background: rgba(20, 68, 92, 0.61);
	border-radius: 30px;
	padding: 12.0px 40.0px;
	margin-bottom: 41.6px;
}

.tsx-hero__text .tsx-hero__sub {
	margin-bottom: 0;
}

.tsx-hero h1 {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: normal;
	color: var(--tsx-white);
}

.tsx-hero__sub {
	font-family: var(--tsx-font-display);
	font-size: 24px;
	font-weight: 800;
	color: var(--tsx-white);
	max-width: 600px;
	margin: 0 auto 41.6px;
	line-height: 1.6;
}

.tsx-hero__cta {
  display: flex;
  align-items: center;
  gap: 70px;
  justify-content: center;
}

.tsx-hero__cta a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 48px;
	background: var(--tsx-teal);
	color: var(--tsx-white);
	font-family: var(--tsx-font-display);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: 1.4px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.tsx-hero__cta a:hover {
	background: var(--tsx-azul);
}

/* ─── Secciones genéricas ──────────────────────────────────────────────── */

.tsx-section {
	padding: 0;
}

/* Rows are full-bleed (no padding). The padding is moved to the text column so
 * the media column reaches the viewport edge without a negative-margin hack. */
.tsx-section > .tsx-intro,
.tsx-section > .tsx-why,
.tsx-section > .tsx-aud,
.tsx-section > .tsx-pack {
	padding: 0;
}

.tsx-section--white { background: var(--tsx-white); }
.tsx-section--flush { padding: 0; }

.tsx-section__inner {
	max-width: 1440px;
	margin: 0 auto;
}

.tsx-section--left { text-align: left; }
.tsx-section--center { text-align: center; }

.tsx-section--intro,
.tsx-section--audience,
.tsx-section--why,
.tsx-section--pack {
	padding-top: 100px;
}

/* Beneficios Orbixers: vertical breathing room (200px top + bottom) on
 * sections 4 and 6 so they separate cleanly from neighbouring sections and
 * from the footer. Section 5 (closing) keeps no vertical padding so the
 * gap above and below it is owned by its neighbours (audience/after).
 *
 * The closing photos are absolutely positioned with `top: 102.4px` and
 * `height: calc(100% - 102.4px)` to compensate for the original 102.4px
 * top padding. Since we now drop the top padding to 0, the photos must
 * fill from the very top of the section. */
body.page-beneficios-orbixers .tsx-section--audience {
	padding-top: 200px;
	padding-bottom: 200px;
}
body.page-beneficios-orbixers .tsx-closing {
	padding-top: 0;
	padding-bottom: 0;
}
body.page-beneficios-orbixers .tsx-section--after {
	padding-top: 200px;
	padding-bottom: 200px;
}
body.page-beneficios-orbixers .tsx-closing__photo {
	top: 0;
	height: 100%;
}

/* ─── ¿Qué es TS Orbix? (left-aligned, 53px teal) ──────────────────────── */

#que-es {
	padding-top: 102.4px;
	padding-bottom: 112.0px;
}

#que-es .tsx-section__inner {
	padding-left: 15.9%;
}

.tsx-title--hero {
	letter-spacing: 0.53px;
	color: var(--tsx-teal);
	margin-bottom: 33.6px;
}

.tsx-title--sub {
	color: var(--tsx-navy);
	margin-bottom: 38.4px;
	line-height: 1.2;
}

.tsx-lead--justify {
	font-weight: 300;
	text-align: justify;
	max-width: 951px;
	margin-bottom: 22.4px;
	color: var(--tsx-black);
}

.tsx-title--md {
	font-family: var(--tsx-font-display);
	font-weight: 800;
	color: var(--tsx-navy);
	text-transform: uppercase;
	margin-top: 38.4px;
}

/* ─── Cards (450px, 3 columnas coloreadas) ─────────────────────────────── */

.tsx-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.tsx-card {
	color: var(--tsx-white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	padding: 96px 70.4px 48px;
	min-height: 560px;
}

.tsx-card--navy { background: var(--tsx-navy); }
.tsx-card--teal { background: var(--tsx-teal); }

.tsx-card__icon {
	display: block;
	width: 72px;
	height: 72px;
	margin: 0 auto 32px;
	color: var(--tsx-white);
}

.tsx-card__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.tsx-card h3 {
	font-family: var(--tsx-font-body);
	font-weight: 800;
	color: var(--tsx-white);
	max-width: 320px;
	margin-bottom: 43.2px;
}

.tsx-card p {
	font-weight: 300;
	color: var(--tsx-white);
	max-width: 340px;
	margin: 0;
}

/* ─── Bandas (2 columnas 50/50) ────────────────────────────────────────── */

.tsx-band {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: end;
	padding: 203.2px 0 1.6px;
}

.tsx-band--flip {
	align-items: end;
	padding: 235.2px 0 3.2px;
}

.tsx-band__col {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 772px;
	padding: 91.2px 102.4px;
	text-align: left;
}

.tsx-band__col--navy  { background: var(--tsx-navy); padding-left: 139.2px; }
.tsx-band__col--teal  { background: var(--tsx-teal); padding-left: 139.2px; }
.tsx-band__col--white { background: var(--tsx-white); padding-left: 172.8px; }

.tsx-band .tsx-title--xxl,
.tsx-title--xxl {
	color: var(--tsx-white);
	max-width: 470px;
	line-height: 1.1;
	text-transform: uppercase;
}

.tsx-band--flip .tsx-band__col--teal .tsx-title--xxl {
}

.tsx-band .tsx-title--band,
.tsx-title--band {
	color: var(--tsx-navy);
	max-width: 380px;
	margin-bottom: 62.4px;
}

.tsx-band--flip .tsx-title--band {
	margin-bottom: 30.4px;
}

.tsx-band .tsx-lead--xl,
.tsx-lead--xl {
	font-weight: 300;
	color: var(--tsx-black);
	max-width: 420px;
	margin-bottom: 46.4px;
	line-height: 1.5;
}

.tsx-band--flip .tsx-lead--xl {
	margin-bottom: 108.0px;
}

.tsx-btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  min-height: 50px;
  padding: 0 48px;
  font-family: var(--tsx-font-display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  align-self: flex-start;
  /* Push the pill to the bottom of its column so the two pills in each band
   * stay aligned regardless of how much copy above them changes between
   * translations (Spanish paragraphs are longer than English and vice versa). */
  margin-top: auto;
  transition: background-color 0.15s ease;
}

.tsx-band__col--navy .tsx-btn-pill { margin-left: 17.6px; }
.tsx-band__col--white .tsx-btn-pill { margin-left: 25.6px; }
.tsx-band--flip .tsx-band__col--teal .tsx-btn-pill { margin-left: 43.2px; }
.tsx-band--flip .tsx-band__col--white .tsx-btn-pill { margin-left: 65.6px; }

/* Variant colours:
 *   --teal  → band 1 (navy column background): teal button, white text.
 *   --white → band 2 (white + teal columns): navy button, white text. */
.tsx-btn-pill--teal  { background: var(--tsx-teal); color: var(--tsx-white); }
.tsx-btn-pill--white { background: var(--tsx-navy); color: var(--tsx-white); }

.tsx-btn-pill--teal:hover,
.tsx-btn-pill--white:hover,
.tsx-btn-pill--navy:hover { background: var(--tsx-azul); }

/* ─── Sobre nosotros (2 columnas: iniciativa + socios, medido 2026-08-04) ─ */

#sobre-nosotros {
	min-height: 1069px;
	padding-top: 136.0px;
	padding-bottom: 64.0px;
}

#sobre-nosotros .tsx-section__inner {
	padding-left: 0;
}

.tsx-title--sobre {
	font-weight: 800;
	color: var(--tsx-navy);
	text-align: center;
	margin-bottom: 120px;
}

.tsx-sobre__cols {
	display: grid;
	grid-template-columns: 427px 1fr;
	padding: 0 80px;
	margin-top: 80.0px;
}

.tsx-sobre__left {
	text-align: center;
}

#sobre-nosotros .tsx-iniciativa {
	font-family: var(--tsx-font-display);
	font-weight: 800;
	color: var(--tsx-teal);
	margin: 0 0 54.4px;
}

.tsx-sobre__logo-main img {
	width: 261px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.tsx-btn-pill--navy {
	background: var(--tsx-teal);       /* was navy → now teal (azul claro) */
	color: var(--tsx-white);
	margin-top: 35.2px;
	/* the rest inherits from .tsx-btn-pill (square corners, 21px, uppercase,
	 * inline-flex centering, etc.) so it matches the other buttons. */
}

.tsx-sobre__right {
	padding-top: 64.0px;
}

#sobre-nosotros .tsx-sobre__intro {
	font-family: var(--tsx-font-display);
	font-size: 21px;
	font-weight: 800;
	margin-bottom: 64.0px;
}

.tsx-sobre__intro--teal { color: var(--tsx-teal); }
.tsx-sobre__intro--navy { color: var(--tsx-navy); }

#sobre-nosotros .tsx-sobre__socios {
	font-family: var(--tsx-font-display);
	font-size: 24px;
	font-weight: 800;
	color: var(--tsx-azul);
	margin: 88.0px 0 56.0px;
}

.tsx-sobre__logos {
	display: flex;
	align-items: flex-start;
	gap: 96.0px;
}

.tsx-sobre__logos img {
	width: auto;
	height: auto;
	opacity: 0.95;
}

.tsx-sobre__logos img:first-child {
	width: 187px;
	height: 170px;
}

.tsx-sobre__logos img:last-child {
	width: 132px;
	height: 142px;
}

/* ─── Footer (banda teal, fila legal abajo) ────────────────────────────── */


/* ─── Páginas internas (secciones, medido 2026-08-04) ──────────────────── */

.tsx-inner-hero {
	padding: 188px 24.0px 188px;
	background: var(--tsx-white);
}

.tsx-inner-hero h1 {
	font-size: 21px;
	color: var(--tsx-navy);
	text-align: center;
}

.tsx-inner-hero--img {
	background-size: cover;
	background-position: center;
	min-height: 482px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tsx-inner-hero--img h1 {
	color: var(--tsx-navy);
}

.tsx-inner-hero__box {
	background: rgba(255, 255, 255, 0.8);
	text-align: center;
	padding: 16px 32px;
}

body.page-beneficios-orbixers .tsx-inner-hero h1,
body.page-beneficios-partners .tsx-inner-hero h1,
body.page-quienes-somos .tsx-inner-hero h1 {
	font-size: 64px;
}

/* ─── INTRO (text left 60%, image right 40% — flex row) ────────────────── */

.tsx-intro {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 64px;
	min-width: 0;
}

.tsx-intro__text {
	flex: 1 1 60%;
	min-width: 0;
	padding: 0 0 0 10%; /* text starts at 10% from viewport left edge */
}

.tsx-intro__media {
	flex: 1 1 40%;
	min-width: 0;
	margin-top: 64px;
	display: flex;            /* so the logo can be centered horizontally inside the column */
	justify-content: center;  /* center the 354px logo within the 40% column */
	/* no padding / no margin → image bleeds to the right viewport edge */
}

.tsx-intro__img {
	display: block;
	width: 100%;
	max-width: 354px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* ─── WHY (image on left or right, text on opposite — flex row) ─────────── */

.tsx-why {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 64px;
	min-width: 0;
}

.tsx-why__text {
	flex: 1 1 60%;
	min-width: 0;
}

/* Orbixers default (image on left, text on right): keep text 10% from viewport right. */
.tsx-why:not(.tsx-why--media-right) .tsx-why__text { padding: 0 10% 0 0; }

/* Partners variant (image on right, text on left): keep text 10% from viewport left. */
.tsx-why--media-right .tsx-why__text { padding: 0 9.2% 0 10%; }

.tsx-why__media {
	flex: 0 0 40%;   /* strict 40% width so the 60/40 ratio is preserved */
	min-width: 0;
	align-self: stretch;  /* fill row height, match the text column */
	overflow: hidden;      /* clip any image overflow */
}

/* No margin needed — media column reaches the viewport edge naturally because
 * the row has no horizontal padding. */

.tsx-why__img {
	display: block;
	width: 100%;
	height: 100%;          /* fill the column (= row height, which equals text height) */
	object-fit: cover;
	object-position: center center;
}

/* ─── AUDIENCE (image + text, opposite sides — flex row) ────────────────── */

.tsx-aud {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 64px;
	min-width: 0;
}

.tsx-aud__text {
	flex: 1 1 60%;
	min-width: 0;
}

/* Orbixers default (image on right, text on left): 10% from viewport left. */
.tsx-aud__text--left  { padding: 0 0 0 10%; }
/* Partners variant (image on left, text on right): 10% from viewport right. */
.tsx-aud__text--right { padding: 0 10% 0 0; }

.tsx-aud__media {
	flex: 0 0 40%;    /* strict 40% width */
	min-width: 0;
	align-self: stretch;  /* fill row height, match the text column */
	overflow: hidden;      /* clip any image overflow */
}

/* No negative margin — image bleeds naturally because row has no padding. */

.tsx-aud__img {
	display: block;
	width: 100%;
	height: 100%;          /* fill the column (= row height) */
	object-fit: cover;
	object-position: center center;
}

body.page-beneficios-orbixers .tsx-title--hero--lg,
body.page-beneficios-partners .tsx-title--hero--lg,
body.page-quienes-somos .tsx-title--hero--lg {
	font-size: 53px;
	color: var(--tsx-teal);
}

body.page-beneficios-orbixers .tsx-title--sub-sm,
body.page-beneficios-partners .tsx-title--sub-sm,
body.page-quienes-somos .tsx-title--sub-sm {
	font-size: 33px;
	font-weight: 800;
	color: var(--tsx-azul);
}

body.page-beneficios-orbixers .tsx-lead--justify--lg,
body.page-beneficios-partners .tsx-lead--justify--lg,
body.page-quienes-somos .tsx-lead--justify--lg {
	font-size: 25px;
	text-align: left;
}

body.page-beneficios-orbixers .tsx-title--why,
body.page-beneficios-partners .tsx-title--why {
	font-size: 42px;
	color: var(--tsx-teal);
	margin-bottom: 64px;
}

body.page-beneficios-orbixers .tsx-title--why-sub,
body.page-beneficios-partners .tsx-title--why-sub {
	font-size: 25px;
	color: var(--tsx-navy);
	margin-bottom: 128px;
}

/* Partners-only: collapse the gap between the WHY title and sub so they read as
 * a single block (no margin between them). */
body.page-beneficios-partners .tsx-title--why { margin-bottom: 0; }
body.page-beneficios-partners .tsx-title--why-sub { margin-bottom: 0; }

body.page-beneficios-orbixers .tsx-feature h3,
body.page-beneficios-partners .tsx-feature h3 {
	font-size: 25px;
	color: var(--tsx-navy);
}

body.page-beneficios-orbixers .tsx-feature__num,
body.page-beneficios-partners .tsx-feature__num {
	font-size: 30px;
	color: var(--tsx-teal);
	letter-spacing: normal;
	margin-bottom: 16px;
}

body.page-beneficios-orbixers .tsx-title--aud,
body.page-beneficios-partners .tsx-title--aud {
	font-size: 42px;
}

body.page-beneficios-orbixers .tsx-sub--aud,
body.page-beneficios-partners .tsx-sub--aud {
	font-size: 25px;
	margin-bottom: 64px;
}

body.page-beneficios-orbixers .tsx-section--audience .tsx-sub--aud,
body.page-beneficios-partners .tsx-section--audience .tsx-sub--aud {
	margin-bottom: 30px;
}

/* Beneficios Partners: section 4 (audience) gets 200px padding-top so the
 * gap between why and audience matches the other major gaps; section 5
 * (pack) gets 200px top + bottom so it breathes above and separates from
 * the footer below. */
body.page-beneficios-partners .tsx-section--audience {
	padding-top: 200px;
}
body.page-beneficios-partners .tsx-section--pack {
	padding-top: 200px;
	padding-bottom: 200px;
}
/* Hide the bottom 100px of the audience image on the partners page
 * (the image sits on the left of the section). clip-path makes the
 * element visually transparent at the bottom, but the layout box stays
 * full size — so we pull the next sibling up with a matching negative
 * margin-bottom to eliminate the empty space left by the crop. */
body.page-beneficios-partners .tsx-section--audience .tsx-aud__img {
	clip-path: inset(0 0 100px 0);
	margin-bottom: -100px;
}

/* Quienes Somos: section 3 (columns) padding-top 100px (was 50px) so it
 * matches the surrounding rhythm; section 4 (sobre-ts) gets 100px
 * padding-bottom to separate it from the footer. */
body.page-quienes-somos .tsx-section--columns {
	padding-top: 100px;
}
body.page-quienes-somos .tsx-section--sobre-ts {
	padding-bottom: 100px;
}

body.page-beneficios-orbixers .tsx-closing h2,
body.page-beneficios-partners .tsx-closing h2 {
	font-size: 42px;
}

body.page-beneficios-orbixers .tsx-title--after,
body.page-beneficios-partners .tsx-title--after {
	font-size: 42px;
	color: var(--tsx-teal);
}

body.page-beneficios-orbixers .tsx-title--after-sub,
body.page-beneficios-partners .tsx-title--after-sub {
	font-size: 25px;
}

body.page-beneficios-orbixers .tsx-features,
body.page-beneficios-partners .tsx-features {
	row-gap: 80px;
	column-gap: 64px;
	max-width: 100%;     /* fit the parent text column instead of a fixed 660 px */
	margin-top: 0;
}

body.page-beneficios-orbixers .tsx-feature p,
body.page-beneficios-partners .tsx-feature p {
	max-width: 100%;     /* fit the 2-col grid column (~290 px), not 440 px */
}

body.page-beneficios-orbixers .tsx-aud-list,
body.page-beneficios-partners .tsx-aud-list {
	list-style: disc;
	padding-left: 24px;
}

#que-es {
	padding-top: 102.4px;
	padding-bottom: 112.0px;
}

.tsx-section__inner.tsx-section--left {
	max-width: 1440px;
	padding-left: 9.2%;
}

.tsx-section__inner.tsx-section--right {
	max-width: 540px;
	margin-left: auto;
	margin-right: 64px;
}

.tsx-section--center .tsx-title--why,
.tsx-section--center .tsx-title--why-sub {
	text-align: center;
}

.tsx-section--center .tsx-title--why-sub {
	color: var(--tsx-black);
}

.tsx-closing--text .tsx-lead--pack {
}

.tsx-closing--cta .tsx-lead--pack {
}

.tsx-title--sub-sm {
	color: var(--tsx-azul);
}

.tsx-title--why {
	color: #1D758B;
	margin-bottom: 32.0px;
}

.tsx-title--why-sub {
	font-family: var(--tsx-font-display);
	font-weight: 800;
	color: var(--tsx-azul);
	margin-bottom: 72.0px;
}

.tsx-features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 160.0px;
	row-gap: 56.0px;
	max-width: 980px;
	margin-top: 16.0px;
	text-align: left;
}

.tsx-features--center {
	margin: 16.0px auto 0;
}

.tsx-feature {
	padding: 0;
}

.tsx-feature__num,
.tsx-pack__num {
	font-family: var(--tsx-font-display);
	font-weight: 800;
	letter-spacing: 0.2em;
	color: var(--tsx-black);
	margin-bottom: 6.4px;
}

.tsx-feature h3 {
	font-weight: 800;
	color: var(--tsx-black);
	margin-bottom: 14.4px;
}

.tsx-feature p {
	font-weight: 300;
	color: var(--tsx-black);
	margin: 0;
	max-width: 440px;
}

.tsx-section--left .tsx-title--aud,
.tsx-section--right .tsx-title--aud {
	font-size: 21px;
	color: var(--tsx-teal);
	margin-bottom: 25.6px;
}

.tsx-section--right .tsx-title--aud {
	max-width: 520px;
}

.tsx-sub--aud {
	font-family: var(--tsx-font-display);
	font-weight: 800;
	color: var(--tsx-azul);
	margin-bottom: 35.2px;
}

.tsx-aud-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 17.6px;
}

.tsx-aud-list li {
	font-weight: 300;
	color: var(--tsx-black);
}

.tsx-section--right .tsx-aud-list li {
}

/* ─── Columns section (3-up full-bleed band) ──────────────────────────── */

.tsx-section--columns {
	padding: 50px 0 0;        /* full-bleed horizontal: no padding-x */
	background: var(--tsx-white);
}

.tsx-columns-3 {
	display: flex;
	flex-direction: row;
	gap: 0;                    /* no gap so colors form a continuous band */
}

.tsx-col-3 {
	flex: 0 0 33.3333%;
	min-width: 0;
	color: var(--tsx-white);
	padding: 72px 32px;
	min-height: 330px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.tsx-col-3--strong { background: var(--tsx-navy); } /* azul fuerte */
.tsx-col-3--light  { background: var(--tsx-teal); } /* azul claro */

.tsx-col-3__icon {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto 24px;
	color: var(--tsx-white);
}

.tsx-col-3__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.tsx-col-3 h3 {
	font-size: 25px;
	font-weight: 800;
	color: var(--tsx-white);
	margin-bottom: 22.4px;
}

.tsx-col-3 p {
	font-size: 25px;
	font-weight: 300;
	color: var(--tsx-white);
	margin: 0;
	max-width: 340px;
}

.tsx-title--pack {
	font-size: 21px;
	color: var(--tsx-teal);
	margin-bottom: 19.2px;
}

.tsx-title--pack-2 {
	color: var(--tsx-navy);
	margin-bottom: 41.6px;
}

/* Partners-only: pack titles render as 4 stacked, centered, uppercase lines
 * matching the visual weight of the other section titles (42 px). Intro block
 * (4 title lines + 2 paragraphs) is tight; one notable margin before the rows. */
body.page-beneficios-partners .tsx-pack__content { text-align: center; }

body.page-beneficios-partners .tsx-title--pack {
	font-size: 42px;
	margin-bottom: 8px;
	line-height: 1.1;
}

body.page-beneficios-partners .tsx-title--pack-line2 { color: var(--tsx-teal); }

body.page-beneficios-partners .tsx-title--pack-2 {
	font-size: 42px;
	margin-bottom: 16px;
	line-height: 1.1;
}

body.page-beneficios-partners .tsx-sub--pack {
	color: var(--tsx-teal);
	text-align: center;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 8px;
	line-height: 1.4;
}

body.page-beneficios-partners .tsx-lead--pack {
	margin-top: 0;
	margin-bottom: 0;
}

.tsx-lead--pack {
	font-weight: 300;
	color: var(--tsx-black);
	max-width: 720px;
	margin: 38.4px auto 0;
}

.tsx-pack-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64.0px;
	margin-top: 104.0px;
	text-align: left;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

/* PACK section with side image: content left 60%, image right 40%. */
.tsx-pack {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 64px;
	min-width: 0;
}

.tsx-pack__content {
	flex: 1 1 60%;
	min-width: 0;
	padding: 0 9.2% 0 10%; /* 10% from viewport left, 9.2% inner right gap so rows don't overflow into image column */
}

.tsx-pack__media {
	flex: 0 0 40%;    /* strict 40% width */
	min-width: 0;
	align-self: stretch;  /* fill row height, match the content column */
	overflow: hidden;      /* clip any image overflow */
}

/* No negative margin — image bleeds naturally because row has no padding. */

.tsx-pack__img {
	display: block;
	width: 100%;
	height: 100%;           /* fill the column (= row height) */
	object-fit: cover;
	object-position: center center;
}

.tsx-pack-row h3 {
	font-weight: 800;
	color: var(--tsx-teal);
	margin-bottom: 16.0px;
}

.tsx-pack-side h3 {
	color: var(--tsx-teal);
}

.tsx-pack-sub {
	font-family: var(--tsx-font-display);
	font-weight: 800;
	color: var(--tsx-black);
	margin-bottom: 16.0px;
}

.tsx-pack-text {
	font-weight: 300;
	color: var(--tsx-black);
	margin: 0;
	max-width: 460px;
}

body.page-beneficios-partners .tsx-pack-text {
	max-width: 100%; /* fit the 2-col pack-row column (~290 px), not 460 px */
}

.tsx-closing {
	padding: 102.4px 24.0px 0;
	background: var(--tsx-white);
}

.tsx-closing h2 {
	font-size: 21px;
	color: var(--tsx-teal);
	margin-bottom: 25.6px;
}

.tsx-closing--text h2 {
	font-size: 21px;
	color: var(--tsx-black);
}

.tsx-sub--white { color: var(--tsx-white); }
.tsx-lead--white { color: var(--tsx-white); }

.tsx-closing__cta {
	background: var(--tsx-navy);
	text-align: center;
	padding: 102.4px 24.0px;
}

body.page-beneficios-partners .tsx-closing__cta {
	text-align: left;
}

.tsx-link-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 48px;
	background: var(--tsx-teal);
	color: var(--tsx-white);
	font-family: var(--tsx-font-display);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: 1.4px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.tsx-link-cta:hover {
	background: var(--tsx-azul);
	color: var(--tsx-white);
}

.tsx-link-cta--band {
	font-family: var(--tsx-font-display);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 1.4px;
	color: var(--tsx-white);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.65);
	padding-bottom: 4.8px;
}

.tsx-closing__cta .tsx-link-cta--band {
	font-size: 21px;
}

.tsx-link-cta--band:hover {
	border-color: var(--tsx-white);
}

.tsx-closing--photo {
	position: relative;
	padding: 102.4px 0 0;
	overflow: hidden;
}

.tsx-closing__photo {
	position: absolute;
	top: 102.4px;
	width: 404px;
	height: calc(100% - 102.4px);
	object-fit: cover;
}

.tsx-closing__photo--l { left: 0; }
.tsx-closing__photo--r { right: 0; }

.tsx-closing--photo .tsx-section__inner {
	position: relative;
	max-width: 580px;
	padding: 0 24px;
}

.tsx-closing--photo .tsx-lead--pack {
	max-width: 310px;
}

.tsx-closing__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 400px;
	min-height: 50px;
	background: var(--tsx-navy);
	color: var(--tsx-white);
	font-family: var(--tsx-font-display);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: 1.4px;
	text-decoration: none;
	text-align: center;
	padding: 0 24px;
	margin-top: 56px;
}

.tsx-closing__btn:hover {
	background: var(--tsx-azul);
}

/* CTA button at the end of the pack content (section 4 on /beneficios-partners/).
 * Auto-sizes to the text with generous horizontal padding so letters don't touch
 * the button walls; never wraps to a second line. */
.tsx-pack__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	max-width: 100%;
	min-height: 50px;
	margin: 56px auto 0;
	padding: 0 48px;
	background: var(--tsx-navy);
	color: var(--tsx-white);
	font-family: var(--tsx-font-display);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: 1.4px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.tsx-pack__cta:hover {
	background: var(--tsx-azul);
}

.tsx-section--after {
	/* Default for pages other than beneficios-orbixers (which overrides to 200px above). */
	padding-top: 102.4px;
}

/* PACK section: top padding inherited from the shared rule above (100px). */

.tsx-title--after {
	font-size: 21px;
	color: var(--tsx-black);
	margin-bottom: 80px;
}

.tsx-title--after-sub {
	font-family: var(--tsx-font-display);
	font-size: 21px;
	font-weight: 800;
	color: var(--tsx-azul);
	margin-bottom: 40px;
}

.tsx-lead--after {
	font-size: 21px;
	font-weight: 300;
	color: var(--tsx-black);
	max-width: 890px;
	margin: 0 auto;
}

/* ─── Sobre TS (section 3 of /quienes-somos/) ─────────────────────────── */

.tsx-section--sobre-ts {
	padding: 100px 10% 0;
	background: var(--tsx-white);
}

.tsx-section--sobre-inner {
	max-width: 1440px;
	margin: 0 auto;
}

.tsx-title--sobre-ts {
	font-size: 42px;
	color: var(--tsx-teal);
	text-align: left;
	margin-bottom: 64px;
}

.tsx-sobre-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 64px;
}

.tsx-sobre-row__text {
	flex: 1 1 50%;
	min-width: 0;
}

.tsx-lead--sobre {
	font-family: var(--tsx-font-body);
	font-size: 25px;
	font-weight: 300;
	color: var(--tsx-black);
	margin: 0;
}

.tsx-sobre-row__logo {
	flex: 1 1 50%;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.tsx-sobre-row__logo img {
	display: block;
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
}

/* ─── Contacto (dentro del footer teal, como el Wix) ───────────────────── */

.tsx-footer__contact {
	max-width: 923px;
	margin: 0 auto;
	padding: 41.6px 0 80.0px;
	width: 100%;
}

.tsx-contact {
	display: grid;
	grid-template-columns: 360px 463px;
	gap: 100px;
	text-align: left;
}

.tsx-contact__info {
	display: flex;
	flex-direction: column;
}

.tsx-contact__qr {
	width: 204px;
	height: 207px;
	margin-top: 28.8px;
}

.tsx-contact h2 {
	font-family: var(--tsx-font-display);
	font-weight: 800;
	color: var(--tsx-white);
	margin-bottom: 19.2px;
}

.tsx-contact__placeholders {
	display: flex;
	flex-direction: column;
	gap: 11.2px;
	margin-bottom: 72.0px;
}

.tsx-contact__placeholders span,
.tsx-contact__placeholders a {
	font-size: 21px;
	letter-spacing: 0.3px;
	color: var(--tsx-white);
	text-decoration: none;
}

.tsx-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25.6px 32.0px;
	width: 100%;
}

.tsx-form .tsx-field--full { grid-column: 1 / -1; }

.tsx-form label {
	display: block;
	font-size: 21px;
	color: var(--tsx-black);
	margin-bottom: 4.8px;
}

.tsx-form input,
.tsx-form textarea {
	width: 100%;
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 0;
	padding: 6.4px 0;
	background: transparent;
	font-family: var(--tsx-font-body);
	font-size: 21px;
	color: var(--tsx-black);
}

.tsx-form input:focus,
.tsx-form textarea:focus {
	outline: none;
	border-bottom-color: var(--tsx-white);
}

.tsx-form textarea { min-height: 90px; resize: vertical; }

.tsx-form .tsx-btn {
	justify-self: end;
	border: 1px solid var(--tsx-white);
	border-radius: 22px;
	background: transparent;
	color: var(--tsx-white);
	font-family: var(--tsx-font-body);
	font-size: 21px;
	font-weight: 400;
	padding: 8.8px 38.4px;
	cursor: pointer;
}

.tsx-form-note {
	text-align: center;
	font-weight: 700;
	color: var(--tsx-white);
	margin-top: 16.0px;
}

/* ─── Footer ────────────────────────────────────────────────────────────── */

.tsx-footer {
	background: var(--tsx-teal);
	color: var(--tsx-white);
	min-height: 606px;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	padding: 0 24.0px 30.4px;
	font-family: var(--tsx-font-body);
}

.tsx-footer__row {
	max-width: 1440px;
	margin: auto auto 0 248px;
	display: flex;
	align-items: center;
	gap: 41.6px;
	font-size: 21px;
	letter-spacing: 0.56px;
}

.tsx-footer--contact .tsx-footer__row {
	margin-top: 48.0px;
}

.tsx-footer__row span,
.tsx-footer__row a {
	color: var(--tsx-white);
	text-decoration: none;
}

.tsx-footer__row a:hover {
	text-decoration: underline;
}


/* ─── Page hero (páginas internas) ─────────────────────────────────────── */

.tsx-page-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	color: var(--tsx-white);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(320px, 38vw, 480px);
	padding: 64.0px 24.0px;
}

.tsx-page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(10, 22, 40, 0.38);
}

.tsx-page-hero__inner {
	position: relative;
}

.tsx-page-hero h1 {
	font-size: 21px;
	font-weight: 800;
	color: var(--tsx-white);
	text-shadow: 0 2px 24px rgba(10, 22, 40, 0.45);
}

/* ─── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
	.tsx-header__nav { display: none; }

	.tsx-burger { display: block; }

	.tsx-header__inner { min-height: 80px; padding: 0 24.0px; }

	.tsx-header__logo img { height: 36px; }

	.tsx-hero { min-height: 560px; padding-bottom: 96.0px; }

	.tsx-hero__qr { width: 254px; margin-bottom: 24.0px; }

	.tsx-hero__text { border-radius: 20px; padding: 12.0px 19.2px; }

	.tsx-hero__cta { flex-direction: column; gap: 25.6px; }
	.tsx-hero__cta a {
		display: inline-flex;
		width: 70%;
		justify-content: center;
		font-size: 16px;
		left: 0px;
		padding: 0 32px;
		min-height: 50px;
	}

	#que-es { padding-top: 56.0px; padding-bottom: 56.0px; }
	#que-es .tsx-section__inner,
	#sobre-nosotros .tsx-section__inner { padding-left: 0; }

	.tsx-title--hero { font-size: 33.6px; }
	.tsx-title--hero--lg { font-size: 33.6px; }
	.tsx-title--sub { font-size: 24.0px; }
	.tsx-lead--justify { font-size: 17.6px; }
	.tsx-lead--justify--lg { font-size: 17.6px; }
	.tsx-title--md { font-size: 18.4px; }

	.tsx-cards { grid-template-columns: 1fr; }
	.tsx-card { min-height: 320px; padding: 48.0px 32.0px; }

	.tsx-band { grid-template-columns: 1fr; padding-top: 50px; }
	.tsx-band__col { min-height: 0; padding: 64.0px 32.0px; }
	.tsx-title--xxl { font-size: 53.5px; }
	.tsx-lead--xl { font-size: 21.6px; margin-bottom: 41.6px; }

	#sobre-nosotros { padding-top: 56.0px; padding-bottom: 56.0px; }
	.tsx-title--sobre { font-size: 36.8px; }
	.tsx-sobre__cols { grid-template-columns: 1fr; padding: 0 24.0px; gap: 48.0px; }
	.tsx-contact { grid-template-columns: 1fr; gap: 48.0px; }
	.tsx-footer__contact { padding-top: 64.0px; }
	.tsx-lead--dark { font-size: 17.6px; }
	.tsx-iniciativa { font-size: 24px; }

	.tsx-footer { padding-top: 80.0px; }
	.tsx-footer__row { flex-direction: column; align-items: flex-start; gap: 16.0px; }

	.tsx-inner-hero--img { min-height: 240px; }

	/* ─── Mobile: vertical stack, each element width 100% ─────────────── */

	.tsx-intro,
	.tsx-why,
	.tsx-aud,
	.tsx-pack { flex-direction: column; gap: 24px; margin: 0; }

	body.page-beneficios-partners .tsx-why,
	body.page-beneficios-partners .tsx-aud { flex-direction: column; margin: 0; }

	/* Every flex child fills the full width of the single column. */
	.tsx-intro__text,
	.tsx-intro__media,
	.tsx-intro__img,
	.tsx-why__text,
	.tsx-why__media,
	.tsx-why__img,
	.tsx-aud__text,
	.tsx-aud__media,
	.tsx-aud__img,
	.tsx-pack__content,
	.tsx-pack__media,
	.tsx-pack__img {
		flex: 1 1 auto;
		width: 100%;
	}

	/* On mobile, ensure media columns have no inherited order or margin. */
	.tsx-intro__media,
	.tsx-why__media,
	.tsx-aud__media,
	.tsx-pack__media {
		margin: 0;
		order: initial;
	}

	/* Intro image: centered square, capped width. */
	.tsx-intro__img { max-width: 260px; aspect-ratio: 1 / 1; margin: 0 auto; }

	/* Section images: full width, fixed heights for visual rhythm. */
	.tsx-why__img,
	.tsx-pack__img { height: 320px; min-height: 0; max-height: 320px; }
	.tsx-aud__img { height: 420px; }

	/* Section content padding for mobile rhythm. */
	.tsx-intro__text { padding: 48px 24px 0; }
	.tsx-why__text,
	.tsx-aud__text,
	.tsx-aud__text--left,
	.tsx-aud__text--right { padding: 48px 24px 0; }
	.tsx-pack__content { padding: 0 24px; }
	.tsx-intro__media { margin-top: 0; }
	.tsx-pack-row { grid-template-columns: 1fr; gap: 32px; margin-top: 56px; }
	.tsx-section--pack { padding-top: 56.0px; }

	/* ─── Quienes-somos mobile ─── */
	.tsx-columns-3 { flex-direction: column; }
	.tsx-col-3 { flex: 1 1 100%; }
	.tsx-sobre-row { flex-direction: column; gap: 32px; }
	.tsx-section--sobre-ts { padding-top: 56.0px; }
	.tsx-title--sobre-ts { font-size: 33.6px; margin-bottom: 32px; }

	.tsx-closing__photo { display: none; }
	.tsx-closing--photo { padding-top: 0; }
	.tsx-closing--photo .tsx-section__inner { max-width: none; padding: 64px 24px; }
	.tsx-closing__btn { min-width: 0; width: 100%; }
	body.page-beneficios-partners .tsx-closing__cta { padding: 56px 24px; }

	body.page-beneficios-orbixers .tsx-title--hero--lg,
	body.page-beneficios-partners .tsx-title--hero--lg { font-size: 33.6px; }
	body.page-beneficios-orbixers .tsx-inner-hero h1,
	body.page-beneficios-partners .tsx-inner-hero h1 { font-size: 33.6px; }
	.tsx-inner-hero__box { padding: 12px 20px; }
	body.page-beneficios-orbixers .tsx-title--sub-sm,
	body.page-beneficios-partners .tsx-title--sub-sm { font-size: 24px; }
	body.page-beneficios-orbixers .tsx-lead--justify--lg,
	body.page-beneficios-partners .tsx-lead--justify--lg { font-size: 17.6px; }
	body.page-beneficios-orbixers .tsx-title--why,
	body.page-beneficios-partners .tsx-title--why,
	body.page-beneficios-orbixers .tsx-title--aud,
	body.page-beneficios-partners .tsx-title--aud,
	body.page-beneficios-orbixers .tsx-closing h2,
	body.page-beneficios-partners .tsx-closing h2,
	body.page-beneficios-orbixers .tsx-title--after,
	body.page-beneficios-partners .tsx-title--after { font-size: 33.6px; }
	body.page-beneficios-orbixers .tsx-title--why-sub,
	body.page-beneficios-partners .tsx-title--why-sub,
	body.page-beneficios-orbixers .tsx-sub--aud,
	body.page-beneficios-partners .tsx-sub--aud,
	body.page-beneficios-orbixers .tsx-title--after-sub,
	body.page-beneficios-partners .tsx-title--after-sub { font-size: 17.6px; }
	body.page-beneficios-orbixers .tsx-feature h3,
	body.page-beneficios-partners .tsx-feature h3 { font-size: 21px; }
	body.page-beneficios-orbixers .tsx-feature__num,
	body.page-beneficios-partners .tsx-feature__num { font-size: 24px; }
}

@media (min-width: 1024px) {
	.tsx-mobile { display: none !important; }
}

/* ─── Legal pages (Aviso Legal, Privacidad, Cookies) ──────────────── */

.tsx-legal-hero {
	background: transparent;
	padding: 80px 24px;
	text-align: center;
}

.tsx-legal-hero__inner {
	max-width: 820px;
	margin: 0 auto;
}

.tsx-legal-hero__title {
	font-family: var(--tsx-font-display, 'Baloo 2'), sans-serif;
	font-size: 48px;
	font-weight: 800;
	color: var(--tsx-navy, #14445C);
	margin: 0 0 8px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.1;
}

.tsx-legal-hero__brand {
	font-family: var(--tsx-font-display, 'Baloo 2'), sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--tsx-teal, #57BBBF);
	margin: 0 0 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.tsx-legal-hero__meta {
	font-family: var(--tsx-font-body, 'Nunito Sans'), sans-serif;
	font-size: 14px;
	color: #1f2937;
	margin: 0;
}

.tsx-page--legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 60px 24px 96px;
}

.tsx-legal__header {
  margin-bottom: 40px;
}

.tsx-legal__title {
  font-family: var(--tsx-font-display, 'Baloo 2'), sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: var(--tsx-teal, #57BBBF);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.tsx-legal__rule {
  border: 0;
  height: 3px;
  background: var(--tsx-teal, #57BBBF);
  margin: 0 0 24px;
  width: 100%;
  max-width: 240px;
}

.tsx-legal__intro {
  font-family: var(--tsx-font-body, 'Nunito Sans'), sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #1f2937;
  margin: 0 0 32px;
}

.tsx-legal__body {
  font-family: var(--tsx-font-body, 'Nunito Sans'), sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #1f2937;
}

.tsx-legal__body h3 {
  font-family: var(--tsx-font-display, 'Baloo 2'), sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--tsx-navy, #14445C);
  margin: 36px 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.tsx-legal__body h3:first-child {
  margin-top: 0;
}

.tsx-legal__body p {
  margin: 0 0 18px;
}

.tsx-legal__body ul {
  margin: 0 0 18px;
  padding-left: 24px;
  list-style: disc;
}

.tsx-legal__body a {
  color: var(--tsx-navy, #14445C);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .tsx-page--legal { padding: 40px 20px 64px; }
  .tsx-legal__title { font-size: 36px; }
  .tsx-legal__body h3 { font-size: 19px; }
}

/* ─── Cookie consent banner ──────────────────────────────────────── */

.tsx-cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  background: #ffffff;
  border: 1px solid #c3c4c7;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  font-family: var(--tsx-font-body, 'Nunito Sans'), sans-serif;
}

.tsx-cookie-banner[hidden] { display: none; }

.tsx-cookie-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 16px 20px;
}

.tsx-cookie-banner__title {
  font-family: var(--tsx-font-display, 'Baloo 2'), sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--tsx-navy, #14445C);
  margin: 0;
  flex: 0 0 auto;
}

.tsx-cookie-banner__body {
  font-size: 14px;
  line-height: 1.5;
  color: #1f2937;
  margin: 0;
  flex: 1 1 320px;
}

.tsx-cookie-banner__body a {
  color: var(--tsx-navy, #14445C);
  text-decoration: underline;
}

.tsx-cookie-banner__actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.tsx-cookie-banner .tsx-button {
  display: inline-block;
  border: 1px solid var(--tsx-navy, #14445C);
  background: var(--tsx-white, #FFFFFF);
  color: var(--tsx-navy, #14445C);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  line-height: 1.4;
}

.tsx-cookie-banner .tsx-button--primary {
  background: var(--tsx-navy, #14445C);
  color: var(--tsx-white, #FFFFFF);
}

.tsx-cookie-banner .tsx-button--primary:hover {
  background: var(--tsx-azul, #0A5587);
  border-color: var(--tsx-azul, #0A5587);
}

.tsx-cookie-banner .tsx-button--ghost:hover {
  background: var(--tsx-navy, #14445C);
  color: var(--tsx-white, #FFFFFF);
}

@media (max-width: 600px) {
  .tsx-cookie-banner__inner { flex-direction: column; align-items: stretch; }
  .tsx-cookie-banner__actions { justify-content: stretch; }
  .tsx-cookie-banner .tsx-button { flex: 1; }
}

/* Hide the active theme's auto-rendered page title for legal pages — we
 * render our own styled H1 inside .tsx-legal__header. */
body.tsx-legal-page .page__title,
body.tsx-legal-page .entry-title,
body.tsx-legal-page h1.page-title {
  display: none !important;
}

/* ─── Legal container ────────────────────────────────────────────────── */

.tsx-legal__container {
  max-width: 820px;
  margin: 0 auto;
  padding: 60px 24px 96px;
  font-family: var(--tsx-font-body, 'Nunito Sans'), sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #1f2937;
}

.tsx-legal__container p {
  margin: 0 0 20px;
}

.tsx-legal__container h2 {
  margin: 40px 0 20px;
}

.tsx-legal__container h2:first-child {
  margin-top: 0;
}

.tsx-legal__container h3 {
  margin: 28px 0 12px;
}

.tsx-legal__container ul {
  margin: 0 0 20px;
  padding-left: 24px;
  list-style: disc;
}

.tsx-legal__container ul li {
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .tsx-legal-hero { padding: 56px 20px; }
  .tsx-legal-hero__title { font-size: 32px; }
  .tsx-legal__container { padding: 40px 20px 64px; }
}

/* ─── Header navbar: tighten when a custom logo is present ────────────
 * The theme's `.header-navbar { padding: 1rem 2rem }` adds 16px of
 * vertical padding on top of the logo. A 51px-tall custom logo grows
 * the navbar to ~84px; the menu items (~24px) end up vertically
 * centered inside it, leaving a noticeable white strip below them
 * that reads as a second horizontal bar under the menu. When a custom
 * logo is set, zero the navbar's vertical padding so it matches the
 * logo height, and update `--tsx-navbar-h` on `:root` so the
 * sticky-header body padding-top (set by tsorbix-listings.css) tracks
 * the same value instead of leaving a 20px gap above the content.
 * The `51px` matches the orbix-logo.png shipped with this plugin and
 * covers any logo up to ~56px without leaving a strip. Pages without
 * a custom logo keep the original `64px` body padding fallback from
 * tsorbix-listings.css. */
body:has(.site-header .header-logo img) {
  --tsx-navbar-h: 51px;
  --tsx-navbar-h-sm: 51px;
}
body:has(.site-header .header-logo img) .site-header .header-navbar {
  padding-top: 0;
  padding-bottom: 0;
}

/* ─── Navbar dropdown panels: no internal padding so they hug the menu ───
 * The theme (frontend.less) defines
 *     .header-navbar__menu ul li ul { padding: 1rem 0; }
 * which puts 16px of empty white space at the top of every dropdown
 * panel. That empty strip is what makes the dropdown look detached from
 * the menu bar (the user's "borde fantasma" / ghost border) — the
 * panel is visually anchored at the menu item's bottom, but the actual
 * menu items start 16px inside. We zero the top padding and put the
 * spacing back as padding on the first/last <li> so the panel still
 * breathes, just not at the seam with the menu. */
.header-navbar__menu ul li > ul {
  padding-top: 0;
  padding-bottom: 0;
}
.header-navbar__menu ul li > ul > li:first-child {
  padding-top: 0.75rem;
}
.header-navbar__menu ul li > ul > li:last-child {
  padding-bottom: 0.75rem;
}

/* ─── Language switcher (ES | EN) injected as the last nav item ─────────
 * Inherits the navbar's font/color (so it looks like a normal menu item),
 * but renders the active language in bold so the current state is obvious.
 * The separator is just a vertical bar; click target = the whole .tsx-lang-switch__inner
 * pill. Two-letter labels stay compact on mobile so the pill doesn't push the
 * burger around. */
.tsx-lang-switch {
  display: inline-flex;
  align-items: center;
}
.tsx-lang-switch > a {
  display: none; /* Hide the parent anchor, we render our own pill inside */
}
.tsx-lang-switch__inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  margin-left: 6px;
  line-height: 1;
}
.tsx-lang-switch__btn {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 4px 4px;
  border-radius: 3px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.tsx-lang-switch__btn:hover {
  color: #ff7a1a; /* match the navbar orange hover used by tsorbix-listings.css */
}
.tsx-lang-switch__btn--active {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tsx-lang-switch__sep {
  opacity: 0.6;
  font-size: 12px;
}
/* On the burger/mobile menu (where background is white) the pill blends with
 * a different color scheme. Detect via the theme's burger parent and adjust. */
.header-navbar__burger .tsx-lang-switch__inner {
  border-left-color: rgba(28, 32, 92, 0.18); /* navy on white */
}
@media (max-width: 600px) {
  .tsx-lang-switch__inner {
    padding: 0 8px;
    gap: 4px;
  }
  .tsx-lang-switch__btn {
    font-size: 12px;
  }
}

/* ==========================================================================
   Brand logo in the navbar (replaces the WP custom-logo 150x150).
   The SVG is bundled at assets/img/brand-logo.svg and rendered at
   65px tall in the header-navbar. The .hp-image-container mixin
   forces width:100% on the img — we override that here so the logo
   keeps its 7557:3434 aspect ratio instead of stretching the full
   container width.
   ========================================================================== */
.header-logo .custom-logo,
.header-logo a.custom-logo-link > img.custom-logo {
	max-width: none;
	max-height: none;
	width: auto;
	height: 65px;
}

/* ==========================================================================
   User account dropdown: prevent line-wraps so the longest label
   (e.g. "Próximos Cursos", "Descuentos y Promociones") doesn't push
   the items onto two lines. min-width: 270px + white-space: nowrap
   keeps each item on one line.
   ========================================================================== */
.hp-menu--user-account .sub-menu,
.hp-menu--user-account .sub-menu li,
.hp-menu--user-account .sub-menu a,
.hp-menu--user-account .sub-menu .hp-menu__item--user-account {
	min-width: 270px;
	white-space: nowrap;
}
.hp-menu--user-account .sub-menu .hp-menu__name,
.hp-menu--user-account .sub-menu .hp-menu__label {
	white-space: nowrap;
}