/* Public Sans servida desde padelgalis.com (sin Google Fonts) */
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/wp-content/uploads/lp-imantic/public-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/wp-content/uploads/lp-imantic/public-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Padel Galis · landing de presupuesto · versión A (Premium) */
#brx-content :where(.lp :is(figcaption,label,select,textarea,input,button,p,li,h1,h2,h3,h4,h5,h6,figure,fieldset,legend,summary,a,section)) { all: revert; }
#brx-content :where([class*="brxe-"]:not(img)) { max-width: none; }
#brx-content :where(.lp img) { border-radius: 0; }
#brx-content :where(.lp, .lp *) { border-color: currentcolor; }
:root {
  --ink: #1F3344; --deep: #1D2E3E; --mut: #5F6F82; --line: #E3E8EE; --steel: #598BAF; --blue: #0065B1;
  --steel-t: #4A7596; /* acero para texto pequeño sobre blanco: 4,9:1 (el acero de marca da 3,7:1) */
  --chipline: #D5DCE4; --soft: #F4F6F9; --scrim: rgba(16, 26, 36, .55);
  /* el contenido no pasa de 1280 px; en pantallas grandes el margen crece y las fotos siguen a sangre */
  --maxw: 1280px;
  --gut: max(clamp(20px, 6.944vw, 100px), calc((100vw - var(--maxw)) / 2));
  --ease: cubic-bezier(.16, .84, .24, 1);
  --hd: 88px;
}
#brx-content *, #brx-content *::before, #brx-content *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--hd); }
body { margin: 0; background: #FFFFFF; color: var(--ink); font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
#brx-content h1, #brx-content h2, #brx-content h3, #brx-content p, #brx-content figure, #brx-content ul, #brx-content ol, #brx-content dl, #brx-content dd, #brx-content fieldset { margin: 0; }
#brx-content ul, #brx-content ol { padding: 0; list-style: none; }
#brx-content fieldset { padding: 0; border: 0; min-width: 0; }
#brx-content legend { padding: 0; }
#brx-content img { display: block; max-width: 100%; }
#brx-content a { color: inherit; text-decoration: none; }
#brx-content button { font: inherit; color: inherit; }
#brx-content address { font-style: normal; }
/* email y teléfono bajo la dirección del cierre */
#brx-content .addr__c { display: block; margin-top: 12px; }
#brx-content address a { color: inherit; text-decoration: underline; text-decoration-color: rgba(229, 237, 247, .35); text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; }
#brx-content address a:hover { color: #FFFFFF; text-decoration-color: currentColor; }
#brx-content [hidden] { display: none !important; }
#brx-content p, #brx-content summary, #brx-content figcaption, #brx-content dd, #brx-content li { text-wrap: pretty; }
#brx-content :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
#brx-content .skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: #FFFFFF; border-radius: 3px; }
#brx-content .skip:focus { top: 16px; }

/* ---------- tipografía ---------- */
#brx-content .l { font-weight: 200; }
/* alineación óptica de los titulares: a 50–90 px el margen propio de cada letra se ve junto al texto de debajo; la clase la pone optico.py según la primera letra */
#brx-content .h1, #brx-content .h2 { margin-left: -.045em; }
#brx-content .h1.oa-s, #brx-content .h2.oa-s { margin-left: -.09em; }
#brx-content .h1.oa-r, #brx-content .h2.oa-r { margin-left: -.045em; }
#brx-content .h1.oa-d, #brx-content .h2.oa-d { margin-left: -.037em; }
#brx-content .h1.oa-a, #brx-content .h2.oa-a { margin-left: -.03em; }
#brx-content .h1.oa-q, #brx-content .h2.oa-q { margin-left: -.017em; }
#brx-content .b { font-weight: 700; }
#brx-content .lab { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--steel-t); }
#brx-content .h1 { font-size: clamp(46px, 6.1vw, 88px); line-height: .96; letter-spacing: -.045em; font-weight: 400; text-wrap: balance; }
#brx-content .h2 { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.04; letter-spacing: -.03em; font-weight: 400; text-wrap: balance; }
#brx-content .h2--sm { font-size: 32px; }
#brx-content .h2--flat { font-weight: 300; }
#brx-content .note { font-size: 13px; line-height: 1.5; color: var(--mut); text-wrap: pretty; }
#brx-content .ul { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .35s var(--ease); padding-bottom: 2px; }
#brx-content .lk:hover .ul, #brx-content a:hover > .ul { background-size: 0 1px; background-position: 100% 100%; }
#brx-content .lk { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; border: 0; padding: 0; background: none; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
#brx-content .ar { flex-shrink: 0; transition: transform .45s var(--ease); }
#brx-content .lk:hover .ar, #brx-content .btn:hover .ar { transform: translateX(5px); }

/* ---------- botones ---------- */
#brx-content .btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; height: 56px; padding: 0 26px; border: 0; border-radius: 3px; background: var(--ink); color: #FFFFFF; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .3s ease, transform .15s ease; }
#brx-content .btn:hover { background: var(--blue); }
#brx-content .btn:active { transform: translateY(1px); }
#brx-content .btn--sm { height: 44px; padding: 0 18px; font-size: 14px; }
#brx-content .btn--full { width: 100%; }

/* ---------- cabecera ---------- */
#brx-content .hd { position: sticky; top: 0; z-index: 40; background: #FFFFFF; transition: box-shadow .3s ease; }
#brx-content .hd.is-scrolled { box-shadow: 0 1px 0 var(--line); }
#brx-content .hd__in { height: var(--hd); padding: 0 var(--gut); display: flex; align-items: center; gap: 44px; }
#brx-content .hd__logo { display: flex; align-items: center; min-height: 44px; }
#brx-content .hd__logo img { height: 28px; width: auto; }
#brx-content .hd__nav { margin-left: auto; display: flex; gap: 36px; font-size: 15px; }
#brx-content .hd__nav a { position: relative; padding: 6px 0; }
#brx-content .hd__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
#brx-content .hd__nav a:hover::after { transform: scaleX(1); }
#brx-content .hd__menu { display: none; width: 44px; height: 44px; margin-left: auto; border: 0; background: transparent; align-items: center; justify-content: center; cursor: pointer; }
#brx-content .menu { padding: 8px var(--gut) 28px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 20px; background: #FFFFFF; }
#brx-content .menu nav { display: flex; flex-direction: column; }
#brx-content .menu nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 18px; }

/* ---------- hero ---------- */
#brx-content .hero__top { padding: 72px var(--gut) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
#brx-content .hero__title { grid-column: 1 / span 8; display: flex; flex-direction: column; gap: 26px; }
#brx-content .hero__lead { grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; padding-bottom: 10px; }
#brx-content .hero__lead p { font-size: 20px; line-height: 1.5; color: var(--mut); }
#brx-content .hero__stage { position: relative; margin-top: 64px; }
#brx-content .hero__slides { position: relative; height: clamp(500px, 55.56vw, 1000px); overflow: hidden; background: #C9D3DC; }
#brx-content .hs { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
#brx-content .hs.is-on { opacity: 1; }
#brx-content .hs img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7.5s linear; }
#brx-content .hs.is-on img { transform: scale(1); }
#brx-content .hs figcaption { position: absolute; right: var(--gut); bottom: 96px; font-size: 13px; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 12px rgba(0, 0, 0, .5); }
#brx-content .hero__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 260px; background: linear-gradient(0deg, rgba(16, 26, 36, .45), rgba(16, 26, 36, 0)); pointer-events: none; }
#brx-content .hero__ind { position: absolute; right: var(--gut); bottom: 96px; display: flex; align-items: flex-end; gap: 20px; } /* solo el botón de pausa, a la derecha junto al pie de foto */
#brx-content .hi { width: 132px; min-height: 44px; padding: 0; border: 0; background: transparent; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; text-align: left; color: #FFFFFF; cursor: pointer; opacity: .75; transition: opacity .2s ease; }
#brx-content .hi:hover, #brx-content .hi.is-on { opacity: 1; }
#brx-content .hi span { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
#brx-content .hi i { position: relative; display: block; height: 2px; background: rgba(255, 255, 255, .4); }
#brx-content .hi b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #FFFFFF; }
#brx-content .hi.is-on b { animation: prog 7s linear both; }
#brx-content .is-paused .hi.is-on b { animation-play-state: paused; }
@keyframes prog { from { width: 0; } to { width: 100%; } }
#brx-content .hero__pause { position: relative; width: 36px; height: 36px; margin-left: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .85); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .15s ease; }
@media (hover: hover) { #brx-content .hero__pause:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--ink); } } /* se invierte; solo con ratón, para que en el móvil no se quede blanco tras tocarlo */
#brx-content .hero__pause:active { transform: scale(.94); }
#brx-content .hero__pause::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; } /* zona pulsable de 44 px aunque el círculo mida 36 */
#brx-content .hero__pause .i-play, #brx-content .is-paused .hero__pause .i-pause { display: none; }
#brx-content .is-paused .hero__pause .i-play { display: block; }

/* entrada al formulario en el hero: la primera pregunta; cada respuesta abre el panel con ella marcada. Barra en escritorio, tarjeta en tablet y móvil */
#brx-content .he { position: absolute; left: var(--gut); right: var(--gut); bottom: -50px; min-height: 100px; padding: 22px; background: #FFFFFF; border-radius: 3px; display: flex; align-items: center; gap: 28px; box-shadow: 0 30px 60px -30px rgba(16, 26, 36, .5); }
#brx-content .he__head { flex-shrink: 0; max-width: 240px; display: flex; flex-direction: column; gap: 6px; }
#brx-content .he__q { font-size: 28px; line-height: 1.1; letter-spacing: -.025em; white-space: nowrap; }
#brx-content .he__opts { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; }
/* desplegable de la barra: rótulo pequeño arriba, respuesta debajo; toda la caja abre el desplegable */
#brx-content .he__f { position: relative; height: 56px; border: 1px solid var(--chipline); border-radius: 3px; background: #FFFFFF; transition: border-color .2s ease; }
#brx-content .he__f:hover, #brx-content .he__f:focus-within { border-color: var(--ink); }
#brx-content .he__f label { position: absolute; left: 14px; top: 9px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-t); pointer-events: none; }
#brx-content .he__f select { appearance: none; -webkit-appearance: none; width: 100%; height: 100%; margin: 0; padding: 22px 36px 0 14px; border: 0; border-radius: 3px; background: transparent; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
#brx-content .he__f.is-empty label { opacity: 0; } /* sin respuesta: el nombre del campo va dentro, centrado; al elegir sube arriba en pequeño */
#brx-content .he__f.is-empty select { padding-top: 0; color: var(--ink); }
#brx-content .he__f label, #brx-content .he__f select { transition: opacity .15s ease, padding .15s ease; }
#brx-content .he__f select:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
#brx-content .he__f::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -2px; border-right: 1.5px solid var(--mut); border-bottom: 1.5px solid var(--mut); transform: rotate(45deg); pointer-events: none; }
#brx-content .he__f.is-error { border-color: #B3261E; }
#brx-content .he__go { height: 56px; white-space: nowrap; }
#brx-content .he__err { font-size: 13px; line-height: 1.5; color: #B3261E; }
#brx-content .he__note { margin: 0; }

/* ---------- pasos ---------- */
#brx-content .stepper { display: flex; gap: 8px; }
#brx-content .stepper li { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
#brx-content .stepper__bar { height: 2px; background: var(--chipline); transition: background-color .3s ease; }
#brx-content .stepper__t { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--mut); white-space: nowrap; }
#brx-content .stepper__n { display: flex; font-size: 12px; font-weight: 600; color: var(--steel-t); font-variant-numeric: tabular-nums; }
#brx-content .stepper__n svg { display: none; }
#brx-content .stepper li.is-done .stepper__bar, #brx-content .stepper li.is-now .stepper__bar { background: var(--ink); }
#brx-content .stepper li.is-done .stepper__t, #brx-content .stepper li.is-now .stepper__t { color: var(--ink); }
#brx-content .stepper li.is-now .stepper__t { font-weight: 700; }
#brx-content .stepper li.is-done .stepper__n { color: var(--ink); }
#brx-content .stepper li.is-done .stepper__n .n { display: none; }
#brx-content .stepper li.is-done .stepper__n svg { display: block; }

/* ---------- campos ---------- */
#brx-content .field { display: flex; flex-direction: column; gap: 10px; }
#brx-content .field > legend, #brx-content .field > label { font-size: 16px; font-weight: 600; color: var(--ink); }
#brx-content .field > legend { margin-bottom: 12px; }
#brx-content .chips { display: grid; gap: 8px; }
#brx-content .chips--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#brx-content .chips--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#brx-content .chips--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#brx-content .chip { position: relative; cursor: pointer; }
#brx-content .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#brx-content .chip span { height: 48px; padding: 0 14px; border: 1px solid var(--chipline); border-radius: 3px; background: #FFFFFF; display: flex; align-items: center; font-size: 15px; color: var(--ink); white-space: nowrap; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
#brx-content .chips--4 .chip span, #brx-content .chips--3 .chip span { justify-content: center; padding: 0 8px; }
#brx-content .chip:hover span { border-color: var(--ink); }
#brx-content .chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
#brx-content .chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 3px; }
#brx-content .field input[type="text"], #brx-content .field input[type="email"], #brx-content .field input[type="tel"], #brx-content .field textarea, #brx-content .select select {
  width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--chipline); border-radius: 3px; background: #FFFFFF; font: inherit; font-size: 16px; color: var(--ink); }
#brx-content .field textarea { height: 88px; padding: 12px 16px; resize: vertical; }
#brx-content .field input:hover, #brx-content .field textarea:hover, #brx-content .select select:hover { border-color: #AEBBC9; }
#brx-content .select { position: relative; }
#brx-content .select select { appearance: none; padding-right: 40px; cursor: pointer; }
#brx-content .select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.5px solid var(--mut); border-bottom: 1.5px solid var(--mut); transform: rotate(45deg); pointer-events: none; }
#brx-content .tel { display: flex; gap: 8px; }
#brx-content .select--prefix { flex: 0 0 104px; }
#brx-content .tel input { flex: 1; min-width: 0; }
#brx-content .opt-t, #brx-content .opt { font-weight: 400; }
#brx-content .field .opt { font-weight: 400; color: var(--mut); }
#brx-content .check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--mut); cursor: pointer; }
#brx-content .check input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--ink); }
#brx-content .check a { color: var(--ink); text-decoration: underline; }
#brx-content .err { display: none; font-size: 13px; color: #B3261E; }
#brx-content .is-error > .err { display: block; }
#brx-content .is-error .chip span, #brx-content .is-error input[type="text"], #brx-content .is-error input[type="email"], #brx-content .is-error input[type="tel"], #brx-content .is-error select { border-color: #B3261E; }

/* ---------- cifras ---------- */
#brx-content .metrics { padding: 200px var(--gut) 0; }
#brx-content .metrics__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
#brx-content .mt { padding: 36px 28px 0 32px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
#brx-content .mt:first-child { padding-left: 0; border-left: 0; }
#brx-content .mt__fig { height: 62px; display: flex; align-items: flex-end; }
#brx-content .mt__big { font-size: clamp(40px, 4.72vw, 68px); line-height: 1; font-weight: 200; letter-spacing: -.05em; white-space: nowrap; }
#brx-content .mt__big--word { font-size: clamp(20px, 2.36vw, 34px); line-height: 1; letter-spacing: -.03em; margin-bottom: .13em; white-space: normal; }
#brx-content .mt__lab { font-size: 13px; line-height: 1.25; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
#brx-content .mt__txt { font-size: 15px; line-height: 1.55; color: var(--mut); }

/* ---------- confianza ---------- */
#brx-content .trust { margin-top: 176px; background: var(--deep); color: #FFFFFF; display: flex; flex-direction: column; }
#brx-content .trust__band { position: relative; height: clamp(640px, 62.5vw, 1000px); }
#brx-content .trust__img { position: absolute; inset: 0; }
#brx-content .trust__img img { width: 100%; height: 100%; object-fit: cover; }
#brx-content .trust__band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(20, 31, 43, .88) 0%, rgba(20, 31, 43, .55) 34%, rgba(20, 31, 43, 0) 56%); pointer-events: none; }
#brx-content .trust__cap { position: absolute; z-index: 1; right: var(--gut); top: 120px; width: 420px; display: flex; flex-direction: column; gap: 24px; }
#brx-content .trust__stat { margin-top: 60px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "num sig" "num lab"; grid-template-rows: 1fr auto; align-items: end; gap: 12px 16px; } /* el «16» a la izquierda; firma y rótulo a su derecha */
#brx-content .trust__bela { grid-area: sig; height: 96px; width: auto; justify-self: start; } /* sin estirar: el logo queda alineado con el texto */
#brx-content .trust__stat b { grid-area: num; font-size: 150px; line-height: .8; font-weight: 200; letter-spacing: -.05em; }
#brx-content .trust__stat span { grid-area: lab; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding-bottom: 8px; }
#brx-content .trust__name { font-size: 34px; line-height: 1.15; font-weight: 300; letter-spacing: -.015em; }
#brx-content .trust__txt { font-size: 16px; line-height: 1.6; color: rgba(229, 237, 247, .82); }
#brx-content .trust__credit { position: absolute; z-index: 2; right: var(--gut); bottom: 40px; font-size: 13px; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 12px rgba(0, 0, 0, .5); }
#brx-content .trust__partners { padding: 0 var(--gut) 120px; }
#brx-content .trust__intro { padding: 56px 0 28px; font-size: 17px; line-height: 1.6; color: rgba(229, 237, 247, .72); }
#brx-content .pcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid rgba(229, 237, 247, .16); border-left: 0; }
#brx-content .pc { position: relative; min-height: 240px; padding: 24px 16px; border-left: 1px solid rgba(229, 237, 247, .16); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; }
#brx-content .pc__logo { height: 100px; max-width: 100%; display: flex; align-items: center; }
#brx-content .pc__logo img { height: var(--lh); width: auto; max-width: min(250px, 100%); object-fit: contain; }
#brx-content .pc__name { font-size: 14px; color: rgba(229, 237, 247, .8); }
#brx-content .pc__extra { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: #FFFFFF; }
/* USA: alianzas primero y Wilson delante */
#brx-content [data-market="us"] .trust__partners { order: -1; padding-top: 120px; padding-bottom: 0; }
#brx-content [data-market="us"] .trust__band { margin-top: 120px; }
#brx-content [data-market="us"] .pc[data-partner="wilson"] { order: -1; }
/* USA: logos delante de Bela; el titular sube con ellos para seguir encabezando la sección */
#brx-content .trust__h2 { margin-bottom: 20px; color: #FFFFFF; }
#brx-content [data-market="us"] .trust__cap .h2 { display: none; }
#brx-content [data-market="us"] .pcs { display: flex; }
#brx-content [data-market="us"] .pc { flex: 1; justify-content: flex-start; padding-top: 40px; } /* el texto extra de Wilson no descuadra la fila: logos y nombres a la misma altura */

/* ---------- por qué ---------- */
#brx-content .why { padding: 176px var(--gut) 0; }
#brx-content .why__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
#brx-content .why__head { grid-column: 1 / span 4; }
#brx-content .why__list { grid-column: 6 / span 7; border-bottom: 1px solid var(--line); }
#brx-content .why__row { padding: 28px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 5fr 7fr; gap: 24px; }
#brx-content .why__row h3 { font-size: 18px; line-height: 1.35; font-weight: 700; }
#brx-content .why__row p { font-size: 16px; line-height: 1.6; color: var(--mut); }
#brx-content .why__trip { margin-top: 136px; display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 20px; }
#brx-content .why__ph { display: flex; flex-direction: column; gap: 14px; }
#brx-content .why__ph .zm { height: clamp(300px, 41.67vw, 600px); }
#brx-content .why__ph img { width: 100%; height: 100%; object-fit: cover; }
#brx-content .why__ph figcaption { font-size: 13px; color: var(--mut); }

/* ---------- plano cenital ---------- */
#brx-content .band { margin-top: 176px; }
#brx-content .band__img { position: relative; height: min(50vw, 1000px); overflow: hidden; }
/* caja con la proporción de la foto (2:1); si la altura se limita, se recorta arriba y abajo por igual */
#brx-content .band__box { position: absolute; left: 0; right: 0; top: 50%; aspect-ratio: 2 / 1; transform: translateY(-50%); }
#brx-content .band__box img { width: 100%; height: 100%; }
#brx-content .band__cap { margin: 16px var(--gut) 0; display: block; font-size: 13px; color: var(--mut); }
#brx-content .band__cap b { font-weight: 700; color: var(--ink); }

/* ---------- catálogo ---------- */
#brx-content .catalog { padding: 176px 0 0; overflow-x: clip; } /* la foto entra desde 40 px a la derecha: sin esto el móvil gana scroll lateral mientras dura la animación */
#brx-content .sechead { padding: 0 var(--gut); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
#brx-content .sechead__t { grid-column: 1 / span 7; }
#brx-content .sechead__p { grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; font-size: 17px; line-height: 1.6; color: var(--mut); }
#brx-content .ctabs { margin: 64px var(--gut) 0; display: flex; gap: 40px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
#brx-content .ctabs::-webkit-scrollbar { display: none; }
#brx-content .ctab { position: relative; flex-shrink: 0; min-height: 44px; padding: 8px 0 18px; border: 0; background: transparent; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); white-space: nowrap; cursor: pointer; }
#brx-content .ctab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
#brx-content .ctab:hover { color: var(--ink); }
#brx-content .ctab[aria-selected="true"] { color: var(--ink); font-weight: 700; }
#brx-content .ctab[aria-selected="true"]::after { transform: scaleX(1); }
#brx-content .stages { display: grid; }
#brx-content .st { grid-area: 1 / 1; padding: 80px var(--gut) 0; display: flex; align-items: center; gap: 72px; visibility: hidden; opacity: 0; transition: opacity .5s ease, visibility 0s linear .5s; }
#brx-content .st.is-on { visibility: visible; opacity: 1; transition: opacity .6s ease; }
#brx-content .st__render { flex: 0 1 760px; min-width: 0; display: flex; justify-content: center; }
#brx-content .st__img { position: relative; width: 100%; }
#brx-content .st__img img { width: 100%; height: 100%; }
#brx-content .dot { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--ink); color: #FFFFFF; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #FFFFFF; }
#brx-content .dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(31, 51, 68, .55); animation: ping 2.6s ease-out infinite; }
/* los puntos son botones: al pasar o pulsar muestran su rasgo y lo marcan en la leyenda */
#brx-content button.dot { padding: 0; border: 0; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background-color .25s ease; }
#brx-content button.dot::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; } /* zona táctil de 44 px */
#brx-content .dot__tip { position: absolute; left: 50%; bottom: calc(100% + 14px); padding: 8px 12px; border-radius: 3px; background: var(--ink); color: #FFFFFF; font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translate(-50%, 6px); pointer-events: none; transition: opacity .25s ease, transform .35s var(--ease); }
#brx-content .dot.is-on, #brx-content .dot:focus-visible { background: var(--blue); }
#brx-content .dot.is-on .dot__tip, #brx-content .dot:focus-visible .dot__tip { opacity: 1; transform: translate(-50%, 0); }
#brx-content .legend li { transition: color .25s ease; }
#brx-content .legend li .num { transition: background-color .25s ease; }
#brx-content .legend li.is-on { color: var(--blue); }
#brx-content .legend li.is-on .num { background: var(--blue); }
@keyframes ping { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
#brx-content .st__info { flex: 1 0 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
#brx-content .st__name { font-size: 44px; line-height: 1; letter-spacing: -.02em; font-weight: 400; }
#brx-content .st__name .b { font-weight: 800; }
#brx-content .st__desc { font-size: 16px; line-height: 1.6; color: var(--mut); }
#brx-content .legend li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; }
#brx-content .num { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--ink); color: #FFFFFF; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
#brx-content .spec { border-bottom: 1px solid var(--line); }
#brx-content .spec div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
#brx-content .spec dt { color: var(--mut); }
#brx-content .spec dd { font-weight: 600; text-align: right; }
#brx-content .st__cta { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* ---------- proyectos ---------- */
#brx-content .cases { padding: 176px var(--gut) 0; }
#brx-content .cases .sechead { padding: 0; }
#brx-content .cases__grid { margin-top: 64px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 64px 24px; }
#brx-content .case { grid-column: span 5; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
#brx-content .case:nth-child(4n + 1), #brx-content .case:nth-child(4n) { grid-column: span 7; }
#brx-content .case__img { height: clamp(300px, 41.67vw, 600px); }
#brx-content .case__img img { width: 100%; height: 100%; object-fit: cover; }
#brx-content .case figcaption { display: flex; flex-direction: column; gap: 6px; }
#brx-content .case__name { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
#brx-content .case__head { font-size: 18px; line-height: 1.4; font-weight: 300; }
#brx-content .case__meta { font-size: 14px; line-height: 1.5; color: var(--mut); }

/* ---------- módulo con foto a sangre (indoor) ---------- */
#brx-content .feature { position: relative; margin-top: 176px; height: clamp(600px, 50vw, 900px); }
#brx-content .feature__img { position: absolute; inset: 0; }
#brx-content .feature__img img { width: 100%; height: 100%; object-fit: cover; }
#brx-content .feature::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 60%; background: linear-gradient(90deg, rgba(16, 26, 36, .35), rgba(16, 26, 36, 0)); pointer-events: none; }
#brx-content .feature--right::before { left: auto; right: 0; background: linear-gradient(270deg, rgba(16, 26, 36, .35), rgba(16, 26, 36, 0)); }
#brx-content .feature__card { position: absolute; z-index: 2; left: var(--gut); top: 50%; transform: translateY(-50%); width: 460px; padding: 48px; background: #FFFFFF; border-radius: 3px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
#brx-content .feature--right .feature__card { left: auto; right: var(--gut); }
#brx-content .feature__card .h2 { font-size: clamp(34px, 3.33vw, 48px); }
#brx-content .feature__card p:not(.lab) { font-size: 17px; line-height: 1.6; color: var(--mut); }
#brx-content .feature__credit { position: absolute; z-index: 3; right: var(--gut); bottom: 28px; font-size: 13px; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 12px rgba(0, 0, 0, .5); }
#brx-content .feature--right .feature__credit { right: auto; left: var(--gut); }

/* ---------- calculadora (USA) ---------- */
#brx-content .calc { padding: 176px var(--gut) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
#brx-content .calc__text { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 24px; }
#brx-content .calc__text > p:last-child { font-size: 17px; line-height: 1.6; color: var(--mut); }
#brx-content .calc__card { grid-column: 7 / span 6; padding: 44px; border-radius: 3px; background: #FFFFFF; box-shadow: 0 30px 60px -30px rgba(16, 26, 36, .45), 0 0 0 1px var(--line); }
#brx-content .calc__form, #brx-content .calc__done { display: flex; flex-direction: column; gap: 24px; }
#brx-content .calc__done h3, #brx-content .flow__thanks h3 { font-size: 30px; line-height: 1.1; letter-spacing: -.02em; font-weight: 300; }
#brx-content .calc__done p, #brx-content .flow__thanks p { font-size: 16px; line-height: 1.6; color: var(--mut); }

/* ---------- preguntas ---------- */
#brx-content .faqs { padding: 176px var(--gut); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
#brx-content .faqs__head { grid-column: 1 / span 4; }
#brx-content .faqs__list { grid-column: 6 / span 7; border-bottom: 1px solid var(--line); }
#brx-content .faq { border-top: 1px solid var(--line); }
#brx-content .faq summary { padding: 32px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; list-style: none; cursor: pointer; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
#brx-content .faq summary::-webkit-details-marker { display: none; }
#brx-content .faq .pl { flex-shrink: 0; transition: transform .35s var(--ease); }
#brx-content .faq[open] .pl { transform: rotate(45deg); }
#brx-content .faq p { padding: 0 64px 34px 0; font-size: 17px; line-height: 1.6; color: var(--mut); }

/* ---------- cierre ---------- */
#brx-content .close { margin-top: 176px; padding: 160px var(--gut); background: var(--deep); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
#brx-content .close__text { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 28px; color: #FFFFFF; }
#brx-content .close__text .h2 { font-size: clamp(38px, 4.17vw, 60px); }
#brx-content .close__text p { font-size: 19px; line-height: 1.55; color: rgba(229, 237, 247, .8); }
#brx-content .close__text address { margin-top: 32px; font-size: 15px; line-height: 1.6; color: rgba(229, 237, 247, .65); }
/* cierre: la misma pregunta del hero en tarjeta */
#brx-content .close .he { grid-column: 7 / span 6; position: static; margin: 0; max-width: none; min-height: 0; padding: 44px; flex-direction: column; align-items: stretch; gap: 24px; box-shadow: none; }
#brx-content .close .he__head { max-width: none; }
#brx-content .close .he__opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#brx-content .close .he__go { grid-column: 1 / -1; justify-content: space-between; }
@media (min-width: 1100px) and (max-width: 1379px) { #brx-content .close .he__opts { grid-template-columns: 1fr; } } /* tarjeta estrecha junto al texto: un desplegable por fila */

/* ---------- pie ---------- */
#brx-content .ft { padding: 48px var(--gut); background: var(--deep); border-top: 1px solid rgba(229, 237, 247, .12); display: flex; align-items: center; gap: 40px; font-size: 13px; color: rgba(229, 237, 247, .6); }
#brx-content .ft img { height: 22px; width: auto; }
#brx-content .ft nav { display: flex; gap: 28px; }
#brx-content .ft nav a:hover { color: #FFFFFF; }
#brx-content .ft > span { margin-left: auto; }

/* ---------- zoom suave en fotos ---------- */
#brx-content .zm { overflow: hidden; }
#brx-content .zm img { transition: transform 1.6s var(--ease); }
#brx-content .zm:hover img { transform: scale(1.035); }

/* ---------- formulario de 3 pasos: panel lateral (escritorio) y hoja (móvil) ---------- */
#brx-content .flow { position: fixed; inset: 0; z-index: 60; }
#brx-content .flow__backdrop { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity .3s ease; }
#brx-content .flow__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); padding: 32px 48px 28px; background: #FFFFFF; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; box-shadow: -30px 0 60px -30px rgba(16, 26, 36, .5); transform: translateX(100%); transition: transform .45s var(--ease); }
#brx-content .flow.is-open .flow__backdrop { opacity: 1; }
#brx-content .flow.is-open .flow__panel { transform: none; }
#brx-content .flow__grip { display: none; }
#brx-content .flow__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
#brx-content .flow__hgroup { display: flex; flex-direction: column; gap: 10px; }
#brx-content .flow__sub { font-size: 15px; line-height: 1.5; color: var(--mut); }
#brx-content .flow__close { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--chipline); border-radius: 3px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; }
#brx-content .flow__close:hover { border-color: var(--ink); }
#brx-content .flow__form { flex: 1; margin-top: 22px; display: flex; flex-direction: column; gap: 20px; }
#brx-content .flow .field > legend { margin-bottom: 10px; }
#brx-content .flow .chip span { height: 46px; }
#brx-content .flow__step { display: flex; flex-direction: column; gap: 20px; }
#brx-content .flow__step:not([hidden]) { animation: fd .45s var(--ease) both; }
@keyframes fd { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#brx-content .row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; }
#brx-content .row + .row { border-top: 0; margin-top: -20px; }
#brx-content .row__k { color: var(--mut); white-space: nowrap; }
#brx-content .row__v { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#brx-content .row .lk { margin-left: auto; min-height: 0; font-size: 14px; }
#brx-content .row svg { flex-shrink: 0; }
#brx-content .rec { display: flex; align-items: center; gap: 18px; padding: 14px 18px 14px 12px; border: 1px solid var(--line); border-radius: 3px; }
#brx-content .rec img { width: 104px; height: 66px; object-fit: contain; flex-shrink: 0; }
#brx-content .rec__t { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
#brx-content .rec__tag { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-t); white-space: nowrap; }
#brx-content .rec__name { font-size: 18px; }
#brx-content .rec__name .b { font-weight: 800; }
#brx-content .rec__go { margin-left: auto; font-size: 14px; white-space: nowrap; }
/* pie fijo del panel en todos los tamaños: botón y promesa de respuesta siempre a la vista */
#brx-content .flow__foot { position: sticky; bottom: -28px; z-index: 2; margin: auto -48px -28px; padding: 16px 48px 28px; background: #FFFFFF; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 16px; }
#brx-content .flow__promise { flex-basis: 100%; font-size: 14px; font-weight: 600; color: var(--ink); }
#brx-content .flow__back { color: var(--mut); }
#brx-content .flow__next { min-width: 240px; }
#brx-content .flow__thanks { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; }
#brx-content .summary { border-bottom: 1px solid var(--line); }
#brx-content .summary div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
#brx-content .summary dt { color: var(--mut); }
#brx-content .summary dd { font-weight: 600; text-align: right; }
#brx-content .flow__thanks .btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
html.is-locked, html.is-locked body { overflow: hidden; }

/* ---------- barra fija móvil ---------- */
#brx-content .mbar { position: fixed; z-index: 50; left: 20px; right: 20px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); height: 56px; padding: 0 22px; border: 0; border-radius: 3px; background: var(--ink); color: #FFFFFF; display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; box-shadow: 0 16px 32px -12px rgba(16, 26, 36, .55); cursor: pointer; transform: translateY(calc(100% + 40px)); transition: transform .45s var(--ease), background-color .25s ease, color .25s ease; }
#brx-content .mbar.is-shown { transform: none; }
#brx-content .mbar.is-inv { background: #FFFFFF; color: var(--ink); }

/* ---------- selector de versión y mercado (revisión) ---------- */
#brx-content .mkt { position: fixed; z-index: 45; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; transition: opacity .25s ease; }
#brx-content .mkt.is-away { opacity: 0; pointer-events: none; } /* no tapa la tarjeta de la portada en portátiles bajos */
#brx-content .mkt__toggle { height: 40px; padding: 0 16px; border: 1px solid var(--chipline); border-radius: 20px; background: rgba(255, 255, 255, .96); font-size: 13px; color: var(--mut); cursor: pointer; box-shadow: 0 8px 24px -12px rgba(16, 26, 36, .4); }
#brx-content .mkt__toggle b { color: var(--ink); font-weight: 600; }
#brx-content .mkt__list { padding: 12px; border: 1px solid var(--line); border-radius: 3px; background: #FFFFFF; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 16px 40px -16px rgba(16, 26, 36, .4); }
#brx-content .mkt__t { padding: 0 4px 4px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
#brx-content .mkt__list button, #brx-content .mkt__list a { min-width: 180px; height: 40px; padding: 0 12px; border: 1px solid var(--chipline); border-radius: 3px; background: #FFFFFF; display: flex; align-items: center; text-align: left; font-size: 14px; cursor: pointer; }
#brx-content .mkt__list button:hover, #brx-content .mkt__list a:hover { border-color: var(--ink); }
#brx-content .mkt__list button[aria-pressed="true"], #brx-content .mkt__list a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
#brx-content .mkt__t--2 { margin-top: 6px; }


/* entrada del hero en tarjeta: la barra necesita unos 1.100 px de ancho útil; por debajo de 1380 px pasa a tarjeta */
@media (max-width: 1379px) {
  #brx-content .he { position: relative; left: auto; right: auto; bottom: auto; margin: -40px var(--gut) 0; max-width: 820px; padding: 32px; flex-direction: column; align-items: stretch; gap: 20px; }
  #brx-content .he__head { max-width: none; }
  #brx-content .he__opts { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
  #brx-content .metrics { padding-top: 120px; }
}

/* =================================================================== tablet */
@media (max-width: 1099px) {
  #brx-content .mt__big { font-size: clamp(34px, 4.4vw, 46px); } /* cuatro cifras en fila en tablet */
  #brx-content .mt__big--word { font-size: clamp(18px, 2.3vw, 23px); }
  :root { --hd: 72px; }
  #brx-content .hd__in { gap: 20px; }
  #brx-content .hd__nav { display: none; }
  #brx-content .hd__cta { margin-left: auto; }
  #brx-content .hd__menu { display: flex; margin-left: 0; }
  #brx-content .hero__title { grid-column: 1 / -1; }
  #brx-content .hero__lead { grid-column: 1 / -1; margin-top: 24px; }
  #brx-content .mt { padding: 28px 16px 0 20px; }
  #brx-content .trust__cap { right: var(--gut); top: 72px; width: 380px; }
  #brx-content .trust__stat b { font-size: 110px; }
  #brx-content .trust__bela { height: 80px; }
  #brx-content .pcs, #brx-content [data-market="us"] .pcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #brx-content .pc { border-bottom: 1px solid rgba(229, 237, 247, .16); }
  #brx-content .why__head { grid-column: 1 / -1; margin-bottom: 40px; }
  #brx-content .why__list { grid-column: 1 / -1; }
  #brx-content .why__trip { grid-template-columns: 1fr 1.4fr; }
  #brx-content .why__ph--2 { display: none; }
  #brx-content .sechead__t { grid-column: 1 / -1; }
  #brx-content .sechead__p { grid-column: 1 / -1; margin-top: 20px; }
  #brx-content .st { flex-direction: column; align-items: stretch; gap: 48px; }
  #brx-content .st__render { flex: none; align-self: center; width: min(640px, 100%); }
  #brx-content .st__info { flex: none; max-width: 640px; align-self: center; width: 100%; }
  #brx-content .case, #brx-content .case:nth-child(4n + 1), #brx-content .case:nth-child(4n) { grid-column: span 6; }
  #brx-content .feature { height: 600px; }
  #brx-content .calc__text { grid-column: 1 / -1; margin-bottom: 40px; }
  #brx-content .calc__card { grid-column: 1 / -1; }
  #brx-content .faqs__head { grid-column: 1 / -1; margin-bottom: 32px; }
  #brx-content .faqs__list { grid-column: 1 / -1; }
  #brx-content .close { padding: 120px var(--gut); }
  #brx-content .close__text { grid-column: 1 / -1; margin-bottom: 48px; }
  #brx-content .close .he { grid-column: 1 / -1; }
}

/* =================================================================== móvil */
@media (max-width: 767px) {
  :root { --hd: 64px; --gut: 20px; }
  #brx-content .hd { position: relative; border-bottom: 1px solid var(--line); }
  #brx-content .hd.is-scrolled { box-shadow: none; }
  #brx-content .hd__in { padding: 0 20px; }
  #brx-content .hd__logo img { height: 22px; }
  #brx-content .hd__cta { display: none; }
  #brx-content .hd__menu, #brx-content .menu { display: none; } /* en móvil la cabecera es solo el logo: navega la tira de anclas y el CTA es el botón flotante */
  #brx-content .hero__top { padding-top: 28px; }
  #brx-content .hero__title { gap: 16px; }
  #brx-content .hero__title .lab { font-size: 11px; }
  #brx-content .hero__lead { margin-top: 16px; gap: 12px; }
  #brx-content .hero__lead p { font-size: 17px; }
  #brx-content .hero__stage { margin-top: 28px; }
  #brx-content .hero__ind { left: auto; right: 20px; bottom: 40px; gap: 10px; }
  #brx-content .hi { flex: 1; width: auto; gap: 8px; }
  #brx-content .hi span { font-size: 10px; letter-spacing: .16em; }
  #brx-content .hero__pause { flex-shrink: 0; }
  #brx-content .hs figcaption { left: 20px; right: auto; bottom: 102px; font-size: 12px; }
  #brx-content .hs[data-k="tahoe-deck"] img { object-position: 15% 50%; }
  #brx-content .hs[data-k="costa-puerto"] img { object-position: 40% 50%; }
  #brx-content .he { margin: -24px 20px 0; padding: 22px; gap: 16px; box-shadow: 0 24px 48px -24px rgba(16, 26, 36, .45); }
  #brx-content .he__q { font-size: 26px; }
  #brx-content .he__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #brx-content .he__go { justify-content: space-between; }
  #brx-content .metrics { padding-top: 96px; }
  #brx-content .metrics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #brx-content .mt { padding: 20px 12px 28px 16px; gap: 10px; }
  #brx-content .mt:nth-child(odd) { padding-left: 0; border-left: 0; }
  #brx-content .mt:nth-child(n + 3) { border-top: 1px solid var(--line); }
  #brx-content .mt__fig { height: 36px; }
  #brx-content .mt__big { font-size: clamp(34px, 10.5vw, 42px); } /* «+10.000» cabe con aire en su celda de 360 a 414 px */
  #brx-content .mt__big--word { font-size: 22px; margin-bottom: 3px; }
  #brx-content .mt__lab { font-size: 11px; }
  #brx-content .mt:nth-child(n + 3) .mt__lab { min-height: 28px; }
  #brx-content .mt__txt { font-size: 13.5px; }
  #brx-content .trust { margin-top: 96px; padding: 64px 0 56px; }
  #brx-content .trust__band { height: auto; display: flex; flex-direction: column; }
  #brx-content .trust__band::after { display: none; }
  #brx-content .trust__img { position: relative; order: 2; height: 460px; margin-top: 28px; }
  #brx-content .trust__img img { object-position: 58% 30% !important; }
  #brx-content .trust__cap { position: static; order: 1; width: auto; padding: 0 20px; gap: 16px; display: contents; }
  #brx-content .trust__cap .h2 { order: 1; padding: 0 20px; }
  #brx-content .trust__stat, #brx-content .trust__name, #brx-content .trust__txt { order: 3; margin-left: 20px; margin-right: 20px; }
  #brx-content .trust__stat { margin-top: 32px; grid-template-areas: "num sig" "num lab"; grid-template-rows: 1fr auto; gap: 10px 14px; align-self: flex-start; } /* móvil: «16» a la izquierda; firma y rótulo a su derecha */
  #brx-content .trust__bela { height: 58px; }
  #brx-content .trust__name { font-size: 28px; }
  #brx-content .trust__name { margin-top: 18px; } /* el mismo aire que en B entre el bloque del «16» y el nombre */
  #brx-content .trust__stat b { font-size: 110px; }
  #brx-content .trust__stat span { font-size: 12px; padding-bottom: 6px; }
  #brx-content .trust__txt { margin-top: 16px; font-size: 15px; }
  #brx-content .trust__credit { left: 20px; right: auto; bottom: 14px; font-size: 12px; }
  #brx-content .trust__partners { padding: 0 20px; }
  #brx-content .trust__intro { padding: 28px 0 24px; font-size: 15px; }
  #brx-content [data-market="us"] .trust__partners { padding-top: 0; padding-bottom: 8px; }
  #brx-content [data-market="us"] .trust__band { margin-top: 48px; }
  #brx-content .pc { min-height: 172px; gap: 14px; padding: 16px 10px; }
  #brx-content [data-market="us"] .pc { padding-top: 24px; }
  #brx-content .pc__logo { height: 60px; }
  #brx-content .pc__logo img { height: calc(var(--lh) * .6); }
  #brx-content .pc__name { font-size: 11.5px; }
  #brx-content .pc__extra { font-size: 11px; }
  #brx-content .why { padding-top: 96px; }
  #brx-content .why__head { margin-bottom: 24px; }
  #brx-content .why__row { padding: 20px 0; grid-template-columns: 1fr; gap: 8px; }
  #brx-content .why__row h3 { font-size: 17px; }
  #brx-content .why__row p { font-size: 15px; }
  #brx-content .why__trip { margin: 64px calc(-1 * var(--gut)) 0; grid-template-columns: 1fr; }
  #brx-content .why__ph--0 { display: none; }
  #brx-content .why__ph .zm { height: 260px; }
  #brx-content .why__ph figcaption { padding: 0 20px; font-size: 12px; }
  #brx-content .band { margin-top: 96px; }
  #brx-content .band__cap { margin: 0; display: block; padding: 10px 20px 0; font-size: 12px; color: var(--mut); background: none; }
  #brx-content .band__cap b { color: var(--ink); }
  #brx-content .catalog { padding-top: 96px; }
  #brx-content .sechead__p { margin-top: 14px; font-size: 16px; }
  #brx-content .ctabs { margin: 28px 0 0 20px; padding-right: 20px; gap: 22px; }
  #brx-content .ctab { padding: 12px 0 14px; font-size: 12px; }
  #brx-content .st { padding: 36px 20px 0; gap: 28px; }
  #brx-content .dot { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: 11px; }
  #brx-content button.dot::before { inset: -11px; } /* zona táctil de 44 px */
  #brx-content .st__info { gap: 14px; }
  #brx-content .st__name { font-size: 32px; }
  #brx-content .st__desc { font-size: 15px; }
  #brx-content .legend li { font-size: 14px; padding: 10px 0; }
  #brx-content .num { width: 22px; height: 22px; font-size: 11px; }
  #brx-content .spec div { font-size: 13px; padding: 10px 0; }
  #brx-content .st__cta .btn { width: 100%; }
  #brx-content .cases { padding: 96px 0 0; }
  #brx-content .cases .sechead { padding: 0 20px; }
  #brx-content .cases__grid { margin-top: 28px; grid-template-columns: 1fr; gap: 36px; }
  #brx-content .case, #brx-content .case:nth-child(4n + 1), #brx-content .case:nth-child(4n) { grid-column: 1 / -1; gap: 12px; }
  #brx-content .case__img { height: 300px; }
  #brx-content .case figcaption { padding: 0 20px; gap: 4px; }
  #brx-content .case__name { font-size: 20px; }
  #brx-content .case__head { font-size: 16px; }
  #brx-content .case__meta { font-size: 13px; }
  #brx-content .feature { margin-top: 96px; height: auto; }
  #brx-content .feature::before { display: none; }
  #brx-content .feature__img { position: relative; height: 280px; }
  #brx-content .feature__card { position: static; transform: none; width: auto; padding: 28px 20px 0; gap: 16px; }
  #brx-content .feature__card p:not(.lab) { font-size: 16px; }
  #brx-content .feature__card .btn { width: 100%; }
  #brx-content .feature__credit, #brx-content .feature--right .feature__credit { left: 20px; right: auto; bottom: 12px; font-size: 12px; }
  #brx-content .calc { padding-top: 96px; }
  #brx-content .calc__text { margin-bottom: 28px; gap: 16px; }
  #brx-content .calc__card { padding: 22px; }
  #brx-content .chips--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #brx-content .faqs { padding-top: 96px; padding-bottom: 96px; }
  #brx-content .faqs__head { margin-bottom: 16px; }
  #brx-content .faq summary { padding: 22px 0; font-size: 17px; line-height: 1.35; gap: 16px; }
  #brx-content .faq p { padding: 0 32px 24px 0; font-size: 15px; }
  #brx-content .close { margin-top: 96px; padding: 64px 20px; }
  #brx-content .close__text { margin-bottom: 28px; gap: 20px; }
  #brx-content .close__text p { font-size: 16px; }
  #brx-content .close__text address { margin-top: 8px; font-size: 14px; }
  #brx-content .close .he { padding: 22px; gap: 16px; }
  #brx-content .close .he__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #brx-content .close .he__go { grid-column: auto; } /* 2 × 2 como en la portada: el botón ocupa la cuarta casilla */
  #brx-content .flow .stepper__t { font-size: 11px; }
  #brx-content .field > legend, #brx-content .field > label { font-size: 15px; }
  #brx-content .chip span { height: 46px; font-size: 14px; padding: 0 10px; }
  #brx-content .chips--2 .chip span { justify-content: center; }
  #brx-content .ft { padding: 32px 20px calc(96px + env(safe-area-inset-bottom, 0px)); flex-direction: column; align-items: flex-start; gap: 18px; }
  #brx-content .ft nav { flex-wrap: wrap; gap: 10px 22px; }
  #brx-content .ft > span { margin-left: 0; }
  /* hoja inferior */
  #brx-content .flow__panel { top: auto; left: 0; width: 100%; max-height: calc(100% - 24px); padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px)); border-radius: 14px 14px 0 0; box-shadow: 0 -20px 40px -20px rgba(16, 26, 36, .4); transform: translateY(100%); }
  #brx-content .flow__grip { display: block; align-self: center; width: 40px; height: 4px; margin-bottom: 14px; border-radius: 2px; background: var(--chipline); flex-shrink: 0; }
  #brx-content .flow__head { align-items: center; }
  #brx-content .flow .h2--sm { font-size: 22px; }
  #brx-content .flow__sub { display: none; }
  #brx-content .flow__close { border: 0; }
  #brx-content .flow__form { margin-top: 16px; gap: 18px; }
  #brx-content .flow__step { gap: 18px; }
  #brx-content .row + .row { margin-top: -18px; }
  #brx-content .row { font-size: 13px; }
  #brx-content .rec { gap: 12px; padding: 12px; }
  #brx-content .rec img { width: 80px; height: 52px; }
  #brx-content .rec__name { font-size: 16px; }
  #brx-content .flow__foot { bottom: calc(-24px - env(safe-area-inset-bottom, 0px)); margin: auto -20px calc(-24px - env(safe-area-inset-bottom, 0px)); padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)); gap: 10px 16px; }
  #brx-content .flow__promise { font-size: 13px; }
  #brx-content .flow__next { min-width: 0; flex: 1; }
  #brx-content .mkt { display: none; }
}
@media (max-width: 767px) {
  #brx-content .br-d { display: none; }
}
@media (min-width: 768px) {
  #brx-content .mbar { display: none; }
}
/* ficha técnica desplegable de cada pista (se abre en todas a la vez, para comparar) */
#brx-content .tech summary { padding: 12px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; }
#brx-content .tech summary::-webkit-details-marker { display: none; }
#brx-content .tech summary:hover span { text-decoration: underline; text-underline-offset: 3px; }
#brx-content .tech .pl { width: 14px; height: 14px; flex-shrink: 0; transition: transform .35s var(--ease); }
#brx-content .tech[open] .pl { transform: rotate(45deg); }
#brx-content .tech[open] summary { border-bottom: 0; }
#brx-content .spec--tech dd { max-width: 62%; }
@media (max-width: 767px) {
  #brx-content .tech summary { padding: 10px 0; font-size: 13px; }
}

/* catálogo en portátiles de poco alto (1366×768, 1280×720): pestañas, render y ficha caben en una pantalla */
@media (min-width: 1100px) and (max-height: 860px) {
  #brx-content .st { padding-top: 32px; }
  #brx-content .st__info { gap: 12px; }
  #brx-content .st__name { font-size: 38px; }
  #brx-content .legend li, #brx-content .spec div { padding: 8px 0; }
}

/* ---------- movimiento (solo con html.mo: JS activo y sin «reducir movimiento») ----------
   Un easing (--ease) y tres duraciones: 1,1 s los titulares, 1,4 s las fotos y .45 s la interfaz. El JS quita el estado al terminar. */
#brx-content .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em 0 .18em; margin: -.12em 0 -.18em; }
#brx-content .w > span { display: inline-block; }
html.mo #brx-content [data-rv="t"] .w > span { transform: translateY(115%); transition: transform 1.1s var(--ease) var(--d, 0ms); }
html.mo #brx-content [data-rv="t"].is-in .w > span { transform: none; }
html.mo #brx-content [data-rv="f"] { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease) var(--d, 0ms), transform 1.1s var(--ease) var(--d, 0ms); }
html.mo #brx-content [data-rv="f"].is-in { opacity: 1; transform: none; }
html.mo #brx-content [data-rv="i"] { clip-path: inset(6% 4%); transition: clip-path 1.4s var(--ease) var(--d, 0ms); }
html.mo #brx-content [data-rv="i"] img { scale: 1.12; transition: scale 1.8s var(--ease) var(--d, 0ms); }
html.mo #brx-content [data-rv="i"].is-in { clip-path: inset(0); }
html.mo #brx-content [data-rv="i"].is-in img { scale: 1; }
/* portada: la foto se abre desde la columna de texto hasta el ancho completo */
html.mo #brx-content .hero__slides { clip-path: inset(0 var(--gut)); transition: clip-path 1.6s var(--ease) .2s; }
html.mo #brx-content .hero.is-open .hero__slides { clip-path: inset(0); }
/* catálogo: al cambiar de pista, el render entra de lado y la ficha detrás */
html.mo #brx-content .st.is-on .st__img { animation: stIn 1s var(--ease) both; }
html.mo #brx-content .st.is-on .st__info > * { animation: fd .7s var(--ease) both; }
html.mo #brx-content .st.is-on .st__info > :nth-child(2) { animation-delay: .06s; }
html.mo #brx-content .st.is-on .st__info > :nth-child(3) { animation-delay: .12s; }
html.mo #brx-content .st.is-on .st__info > :nth-child(4) { animation-delay: .18s; }
html.mo #brx-content .st.is-on .st__info > :nth-child(n + 5) { animation-delay: .24s; }
@keyframes stIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #brx-content *, #brx-content *::before, #brx-content *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =================================================================== hero: foto a pantalla y tarjeta a caballo
   El título va sobre la foto y la foto ocupa la primera pantalla; la tarjeta «¿Qué necesitas?» flota al pie,
   así el formulario se ve sin hacer scroll en cualquier pantalla de escritorio. */
#brx-content .hero__stage { margin-top: 0; height: clamp(540px, calc(100svh - var(--hd) - 80px), 960px); } /* 80 px menos que la pantalla: la tarjeta se monta a medias sobre el blanco y aun así se ve entera */
#brx-content .hero__slides { position: absolute; inset: 0; height: auto; }
#brx-content .hero__shade { top: 0; height: auto; background: linear-gradient(90deg, rgba(16, 26, 36, .74) 0%, rgba(16, 26, 36, .4) 45%, rgba(16, 26, 36, 0) 72%), linear-gradient(0deg, rgba(16, 26, 36, .5) 0%, rgba(16, 26, 36, 0) 40%); }
#brx-content .hero__top { position: absolute; z-index: 2; left: 0; right: 0; top: 0; bottom: 46px; padding: 0 var(--gut); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; pointer-events: none; } /* centrado entre la cabecera y los indicadores */
#brx-content .hero__title { max-width: 860px; gap: 22px; }
#brx-content .hero__title .lab, #brx-content .hero__lead p { text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }
#brx-content .hero__title .lab { color: #E5EDF7; }
#brx-content .hero__title .h1 { color: #FFFFFF; font-size: clamp(40px, min(6.1vw, 9.4vh), 88px); } /* también según el alto: en portátiles bajos el título no llega a los indicadores */
#brx-content .hero__lead { margin-top: 26px; max-width: 640px; gap: 16px; padding: 0; }
#brx-content .hero__lead p { color: rgba(229, 237, 247, .92); }
#brx-content .hero .he { bottom: -56px; } /* mitad sobre la foto, mitad sobre el blanco, como antes */
#brx-content .hero__ind { bottom: 96px; }
#brx-content .hs figcaption { right: calc(var(--gut) + 52px); bottom: 104px; } /* centrado en alto con el botón de pausa, a su izquierda */
/* tablet y portátil estrecho: la tarjeta sigue flotando al pie, con la pregunta encima de las 4 respuestas */
@media (min-width: 768px) and (max-width: 1379px) {
  #brx-content .hero .he { position: absolute; left: var(--gut); right: var(--gut); bottom: -56px; margin: 0; max-width: none; min-height: 0; padding: 20px; flex-direction: column; align-items: stretch; gap: 14px; }
  #brx-content .hero .he__head { flex-direction: row; align-items: baseline; gap: 18px; }
  #brx-content .hero .he__opts { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
  #brx-content .hero__ind { bottom: 120px; }
  #brx-content .hs figcaption { bottom: 128px; }
  #brx-content .hero__top { bottom: 84px; } /* centrado entre la cabecera y la tarjeta, medido sobre la tinta */
}
/* móvil: foto con el título encima y la tarjeta debajo, montada sobre el borde; las dos entran en la primera pantalla */
@media (max-width: 767px) {
  #brx-content .hero__stage { height: auto; }
  #brx-content .hero__slides { position: relative; inset: auto; height: clamp(300px, calc(100svh - var(--hd) - 330px), 520px); }
  #brx-content .hero__shade { background: linear-gradient(0deg, rgba(16, 26, 36, .8) 0%, rgba(16, 26, 36, .38) 48%, rgba(16, 26, 36, 0) 78%); }
  #brx-content .hero__top { top: auto; bottom: calc(100% - clamp(300px, calc(100svh - var(--hd) - 330px), 520px) + 96px); padding: 0 20px; }
  #brx-content .hero__title { gap: 10px; }
  #brx-content .hero__title .h1 { font-size: clamp(32px, 9.4vw, 40px); }
  #brx-content .hero__lead { margin-top: 12px; }
  #brx-content .hero__lead p { font-size: 15px; }
  #brx-content .hero__ind { bottom: 40px; }
  #brx-content .hs figcaption { top: 14px; bottom: auto; left: auto; right: 20px; }
  #brx-content .hero .he { bottom: auto; margin: -24px 20px 0; }
  #brx-content .hero .he__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- tira de anclas: solo en móvil; entra fija arriba cuando la cabecera sale de pantalla (no resta alto a la portada) ---------- */
#brx-content .anc { display: none; }
@media (max-width: 767px) {
  :root { --anc: 52px; }
  html { scroll-padding-top: var(--anc); }
  #brx-content .anc { display: block; position: fixed; z-index: 39; top: 0; left: 0; right: 0; height: var(--anc); background: #FFFFFF; border-bottom: 1px solid var(--line); transform: translateY(-100%); visibility: hidden; transition: transform .25s var(--ease), visibility 0s linear .25s; }
  #brx-content .anc.is-in { transform: none; visibility: visible; transition: transform .25s var(--ease), visibility 0s; }
  #brx-content .anc::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 56px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #FFFFFF); pointer-events: none; transition: opacity .2s ease; }
  #brx-content .anc.is-end::after { opacity: 0; }
  #brx-content .anc__in { position: relative; height: 100%; padding: 0 2px; display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
  #brx-content .anc__in::-webkit-scrollbar { display: none; }
  #brx-content .anc a { flex-shrink: 0; height: 100%; padding: 0 18px; display: flex; flex-direction: column; justify-content: center; font-size: 16px; white-space: nowrap; color: var(--mut); border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; }
  #brx-content .anc a::after { content: attr(data-t); height: 0; overflow: hidden; visibility: hidden; font-weight: 600; } /* reserva el ancho en negrita: la tira no salta al cambiar de sección */
  #brx-content .anc a.is-on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
  #brx-content .anc a:focus-visible { outline-offset: -4px; }
}