/* =========================================================================
responsive-base.css v3 — Defensive defaults + fixes targeted
--------------------------------------------------------------------------
Cargar como ÚLTIMO en para ganar la cascada por orden.
Cubre 320 → 1920+ sin media queries específicos por página. Additive.
========================================================================= */
/* ------------------------------------------------------------------
1) ANTI-OVERFLOW UNIVERSAL (estricto)
------------------------------------------------------------------ */
html, body {
overflow-x: hidden;
max-width: 100vw;
}
img, video, svg, iframe, embed, object, picture {
max-width: 100%;
height: auto;
}
p, li, blockquote, dd, figcaption,
.prose, .article-body, .content-prose {
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: manual;
}
h1, h2, h3, .hero h1, .hero h2 {
text-wrap: balance;
overflow-wrap: break-word;
}
/* Section/main no pueden expandir más allá del body */
section, main, header, footer, article, aside, nav {
max-width: 100%;
}
/* ------------------------------------------------------------------
2) FLEX/GRID DEFENSIVO
------------------------------------------------------------------ */
*,
*::before,
*::after {
min-width: 0;
}
/* Excepciones: logos y wordmarks NO deben colapsar */
.logo,
.logo-text-block,
.brand-wordmark,
.brand-mark,
nav .logo *,
nav .brand *,
[class*="logo"] strong,
[class*="brand"] strong {
min-width: max-content;
white-space: nowrap;
}
/* Pero las IMÁGENES del logo/brand NO deben heredar min-width:max-content.
En WebKit (iOS Safari) max-content de un ![]()
se resuelve al ancho
intrínseco (300px), ignorando el width:56px → aplasta el logo. El width
explícito ya define el tamaño; sólo hay que anular ese min-width heredado.
No afecta desktop (el logo ya usa su width fijo). */
nav .logo img,
nav .brand img,
.logo img,
.brand img {
min-width: 0;
}
/* Botones siempre con nowrap + max-width */
.btn,
button.btn,
a.btn,
[class*="btn-"] {
white-space: nowrap;
max-width: 100%;
}
/* ------------------------------------------------------------------
3) NAV LOGIN → ICONO PERSONA EN MOBILE
------------------------------------------------------------------ */
@media (max-width: 480px) {
#navLoginBtn {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
gap: 0 !important;
border-radius: 50%;
overflow: hidden;
}
#navLoginBtn svg {
width: 22px;
height: 22px;
font-size: initial;
flex-shrink: 0;
}
#navRegisterBtn {
padding: 8px 12px !important;
font-size: 13px !important;
}
/* Operators nav — botones más compactos */
nav .btn-ghost-light,
nav .btn-white {
font-size: 12px !important;
padding: 8px 10px !important;
}
}
/* ------------------------------------------------------------------
4) NAV — ocultos en mobile + wrap defensivo
------------------------------------------------------------------ */
@media (max-width: 600px) {
nav, header nav,
.nav-right, .nav-left,
[class*="nav-row"] {
flex-wrap: wrap;
}
}
@media (max-width: 480px) {
nav .nav-divider,
nav .nav-back,
nav .nav-event,
nav [data-mobile-hide] {
display: none !important;
}
}
/* ------------------------------------------------------------------
5) HERO / SECCIONES — padding fluido seguro
------------------------------------------------------------------ */
.hero,
section,
.section,
.legal-hero {
padding-left: clamp(16px, 4vw, 24px);
padding-right: clamp(16px, 4vw, 24px);
}
.hero h1,
section h1,
.section h1,
.legal-hero h1 {
font-size: clamp(28px, 6vw, 56px);
line-height: 1.1;
}
.hero h2,
section h2,
.section h2 {
font-size: clamp(22px, 4.5vw, 40px);
line-height: 1.15;
}
.hero p,
.hero .lead,
.hero .subtitle,
.lead {
font-size: clamp(15px, 1.6vw + 12px, 19px);
line-height: 1.5;
}
/* ------------------------------------------------------------------
6) CARDS — stack en mobile
------------------------------------------------------------------ */
@media (max-width: 600px) {
.product-card,
.feature-card,
.pricing-card,
.event-card,
.lot-card,
.card,
[class*="-card"] {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
.product-card,
.feature-card,
.pricing-card,
.card {
padding: clamp(20px, 5vw, 32px) !important;
}
}
@media (max-width: 600px) {
.products-grid,
.features-grid,
.pricing-grid,
.cards-grid,
[class*="-grid"]:not(.footer-grid):not(.events-grid):not(.toc-grid) {
grid-template-columns: 1fr !important;
}
}
.product-card,
.feature-card,
.pricing-card,
.card {
position: relative;
overflow: hidden;
}
.badge,
.pill,
[class*="badge-"],
[class*="pill-"] {
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
/* ------------------------------------------------------------------
7) FLEX WRAP DEFENSIVO en filas con múltiples items
El bug clásico: filas de pasos / stats / features con flex-direction:row
sin flex-wrap. Forzamos wrap en mobile y ocultamos las flechas →
------------------------------------------------------------------ */
@media (max-width: 600px) {
.op-steps-mini,
.step-row,
.steps-row,
[class*="steps-mini"],
[class*="-steps"],
.feature-row,
.stats-row,
.breadcrumbs-row,
.guest-shortcut,
[class*="-shortcut"],
[class*="-callout"]:not(.alert) {
flex-wrap: wrap !important;
row-gap: 12px !important;
}
/* Solo center en filas de pasos/stats (no en callouts con texto + botón) */
.op-steps-mini,
.step-row,
.steps-row,
[class*="steps-mini"],
[class*="-steps"],
.feature-row,
.stats-row,
.breadcrumbs-row {
justify-content: center !important;
}
/* Hijos de callouts/shortcuts: permitir shrink correcto */
.guest-shortcut > *,
[class*="-shortcut"] > *,
[class*="-callout"]:not(.alert) > * {
min-width: 0;
flex-shrink: 1;
}
.guest-shortcut > button,
.guest-shortcut > a,
[class*="-shortcut"] > button,
[class*="-shortcut"] > a {
flex: 0 0 auto;
white-space: nowrap;
}
.op-step-mini,
.step-mini,
[class*="step-mini"] {
flex: 0 0 auto;
white-space: nowrap;
min-width: 0;
}
/* Las flechas → entre pasos pierden sentido cuando se apilan */
.op-step-arrow,
.step-arrow,
[class*="step-arrow"] {
display: none !important;
}
}
/* ------------------------------------------------------------------
8) GRIDS AUTO-RESPONSIVE genéricos
------------------------------------------------------------------ */
.auto-grid,
[data-auto-grid] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
gap: clamp(12px, 2.5vw, 20px);
}
/* ------------------------------------------------------------------
9) CONTAINERS
------------------------------------------------------------------ */
.container,
.container-md,
.container-lg,
[class*="container"] {
width: 100%;
max-width: 100%;
padding-left: clamp(16px, 4vw, 24px);
padding-right: clamp(16px, 4vw, 24px);
box-sizing: border-box;
}
@media (min-width: 768px) {
.container { max-width: 1200px; margin-inline: auto; }
.container-md { max-width: 960px; margin-inline: auto; }
.container-lg { max-width: 1440px; margin-inline: auto; }
}
/* ------------------------------------------------------------------
10) TABLES
------------------------------------------------------------------ */
@media (max-width: 768px) {
table {
max-width: 100%;
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* ------------------------------------------------------------------
11) FORMS
------------------------------------------------------------------ */
input, textarea, select {
max-width: 100%;
box-sizing: border-box;
}
@media (max-width: 600px) {
form .row,
form .form-row,
.form-grid {
grid-template-columns: 1fr !important;
flex-direction: column;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="url"],
textarea,
select {
width: 100%;
}
}
@media (max-width: 480px) {
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="url"],
textarea,
select {
font-size: max(16px, 1em);
}
}
/* ------------------------------------------------------------------
12) HIT TARGETS
------------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
.btn,
button,
a.btn,
[role="button"] {
min-height: 44px;
}
}
/* ------------------------------------------------------------------
13) FOOTER — apilado universal en mobile
------------------------------------------------------------------ */
@media (max-width: 600px) {
.footer-grid,
footer .footer-grid,
footer .grid,
.footer-cols {
grid-template-columns: 1fr !important;
gap: clamp(20px, 4vw, 32px);
}
footer .footer-brand,
footer .footer-brand-logo {
flex-wrap: wrap;
gap: 10px;
}
}
/* ------------------------------------------------------------------
14) MODAL / DRAWER / DIALOG — full-screen safe en mobile
------------------------------------------------------------------ */
@media (max-width: 600px) {
.modal-content,
.dialog,
[role="dialog"]:not(.mobile-drawer),
.modal {
max-width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
}
}
/* ------------------------------------------------------------------
15) SECCIONES CTA — padding seguro
------------------------------------------------------------------ */
@media (max-width: 600px) {
.cta,
.cta-section,
.cta-banner,
.cta-sec,
[class*="cta-"] {
padding: clamp(32px, 8vw, 64px) clamp(16px, 4vw, 24px) !important;
}
.cta h2,
.cta-section h2,
.cta-sec h2 {
font-size: clamp(24px, 5.5vw, 40px);
}
}
/* ------------------------------------------------------------------
16) MAIN — anti-overflow global de layouts complejos (operators/portal)
------------------------------------------------------------------ */
@media (max-width: 900px) {
main,
.main,
.portal-layout,
.app-shell {
flex-direction: column;
flex-wrap: wrap;
}
main > *,
.main > *,
.content {
width: 100% !important;
max-width: 100% !important;
min-width: 0;
}
/* NOTA: .sidebar removido de esta regla (2026-05-11). Era el responsable de
que portal.html mostrara sidebar de 345px en mobile, anulando Sección 26.
.sidebar es position:fixed (drawer) — no participa del layout flex de
main/.main, por tanto no necesita el reset anti-overflow. Su ancho mobile
se controla en Sección 26 abajo. */
}
/* ------------------------------------------------------------------
17) SCROLL HORIZONTAL CONTENIDO — chips/tags rows
------------------------------------------------------------------ */
.chips-row,
.tags-row,
.filter-row,
[class*="chips"],
[class*="tags"] {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
.chips-row > *,
.tags-row > *,
.filter-row > * {
scroll-snap-align: start;
flex-shrink: 0;
}
/* ------------------------------------------------------------------
18) ASPECT RATIOS DEFENSIVOS
------------------------------------------------------------------ */
.hero-image,
.feature-image,
.product-image {
width: 100%;
height: auto;
}
/* ------------------------------------------------------------------
19) FIX iOS 100vh
------------------------------------------------------------------ */
.full-height,
.viewport-height,
[class*="vh-100"],
.split-screen,
.auth-layout {
min-height: 100dvh;
}
/* ------------------------------------------------------------------
20) TYPOGRAPHY GLOBAL — line-height legible mobile
------------------------------------------------------------------ */
body {
line-height: 1.55;
}
@media (max-width: 480px) {
body { line-height: 1.5; }
}
/* ------------------------------------------------------------------
21) LEGAL PAGES TOC — apilar en mobile
En desktop el TOC es sticky aside; en tablet/mobile se vuelve inline-block
por el CSS de operators-legal.css → eso causa "tags apretados" en cels.
Forzamos vuelta a list vertical en cels chicos.
------------------------------------------------------------------ */
@media (max-width: 600px) {
.toc,
aside.toc,
nav.toc,
[class*="toc"]:not([class*="-toc-"]) {
position: static !important;
max-height: none !important;
padding: 16px !important;
border-radius: 12px;
}
.toc a,
aside.toc a,
nav.toc a {
display: block !important;
margin: 0 0 4px 0 !important;
padding: 8px 12px !important;
font-size: 14px;
}
.toc h3,
aside.toc h3 {
margin-bottom: 12px !important;
}
}
/* ------------------------------------------------------------------
22) EVENTS CAROUSEL — proteger viewport del scroll horizontal
SOLO mobile. En desktop el carousel usa full-bleed (width:100vw +
margin-left:calc(-50vw + 50%)) con auto-scroll JS — no tocar.
------------------------------------------------------------------ */
@media (max-width: 600px) {
.events-viewport {
overflow-x: hidden;
max-width: 100%;
}
.events-carousel {
overflow-x: hidden;
max-width: 100%;
}
}
/* ------------------------------------------------------------------
23) DEBUG (descomentar para ver overflow culprits)
------------------------------------------------------------------ */
/*
* { outline: 1px solid rgba(255, 0, 0, 0.2); }
*:hover { outline-color: rgba(255, 0, 0, 0.6); }
*/
/* ------------------------------------------------------------------
24) FIX A — guest-shortcut card: stack vertical en mobile (v4)
El botón "Continue as guest" tiene white-space:nowrap inline en checkout.html
y no respeta flex-wrap del padre. Solución: stack columna + botón 100%.
------------------------------------------------------------------ */
@media (max-width: 600px) {
.guest-shortcut,
[class*="guest-shortcut"] {
flex-direction: column !important;
align-items: stretch !important;
text-align: center;
}
.guest-shortcut > button,
.guest-shortcut > a,
.guest-shortcut-btn,
[class*="guest-shortcut"] > button,
[class*="guest-shortcut"] > a {
width: 100% !important;
flex: 1 1 100% !important;
white-space: normal !important;
box-sizing: border-box;
}
}
/* ------------------------------------------------------------------
25) FIX B — operators legal pages: header chrome simplificado (v4)
En privacy/terms/about/contact el nav tiene brand+POS pill+2 botones,
wrappea fea en 2 filas. Solución: ocultar pill decorativo + Log In a
icono persona + Get Started compacto.
------------------------------------------------------------------ */
@media (max-width: 768px) {
/* POS pill decorativo en header — no esencial en legal pages */
nav .pos-badge,
nav .brand-pill,
nav .nav-pill,
header .pos-badge {
display: none !important;
}
/* Operators "Log In" → icono persona circular */
nav .btn-ghost-light:not(#navRegisterBtn) {
width: 44px !important;
height: 44px !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 22px;
border: 1px solid rgba(250, 247, 240, 0.3) !important;
}
/* "Get Started" / register CTAs compactos */
nav .btn-white,
nav .btn-orange,
nav [class*="register-btn"] {
font-size: 13px !important;
padding: 10px 14px !important;
min-height: 40px;
}
/* Asegura que el nav-row vuelva a 1 línea */
nav,
header nav,
.nav-row,
.nav-content,
nav .nav-right,
nav .nav-left,
header .nav-right,
header .nav-left {
flex-wrap: nowrap !important;
gap: 8px !important;
align-items: center !important;
}
/* Si nav-right todavía no entra, encoger Get Started más */
nav .nav-right .btn-white,
nav .nav-right .btn-orange {
padding: 8px 10px !important;
font-size: 12px !important;
}
}
/* ------------------------------------------------------------------
24) FIX C v6 — Legal pages operators (privacy/terms/about/contact)
En cels muy chicos (≤360px efectivos = ~345 usables) el header
no entra: logo+wordmark + icon-Login (44px) + "Get Started" (105px)
requieren ~250px y solo hay ~150 disponibles tras el wordmark.
Solución: ocultar "Get Started" en pages legales a ≤360px.
El CTA sigue accesible vía Login → Create account.
------------------------------------------------------------------ */
@media (max-width: 360px) {
/* Heurística: pages legales tienen body con clase legal o están en /operators/{privacy,terms,about,contact}.html */
body.legal-page nav .btn-white,
body.legal-page nav .btn-orange,
body.legal-page nav [class*="register-btn"],
body[class*="legal"] nav .btn-white,
/* Fallback: cualquier nav de página con .legal-hero (operators legal share esa estructura) */
:is(body:has(.legal-hero), body:has(.legal-toc), body:has(.toc)) nav .btn-white,
:is(body:has(.legal-hero), body:has(.legal-toc), body:has(.toc)) nav .btn-orange {
display: none !important;
}
}
/* ------------------------------------------------------------------
25) FIX D v6 — Scroll-x para tablas/rows densas en mobile.
Cierra WP 1.2: pos-pro .compare-table (grid 3 cols) y portal.html
rows densos (.ev-list-row / .order-row / .listing-row-flex) se
aplastan en <600px. Solución no invasiva: convertir el contenedor
en scroll horizontal y bloquear shrink de los hijos. El layout
original (grid/flex) se preserva intacto.
------------------------------------------------------------------ */
@media (max-width: 600px) {
/* pos-pro: compare table (grid 1fr 1fr 1fr) — scroll-x con min-width
en cada row para que las 3 columnas conserven legibilidad. */
.compare-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.compare-table .compare-row {
min-width: 520px;
}
/* portal.html: rows densos (date pill / content / price / CTA).
overflow-x:auto en el row + flex-shrink:0 en hijos => el row scrollea
sin perder su disposición flex interna. */
.ev-list-row,
.order-row,
.listing-row-flex {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ev-list-row > *,
.order-row > *,
.listing-row-flex > * {
flex-shrink: 0;
}
}
/* ------------------------------------------------------------------
26) FIX D v6 — Portal sidebar más angosto en mobile (v4 2026-05-11).
portal.html define .sidebar con width:240px (desktop). En mobile
el drawer tapaba toda la pantalla. Tras iterar:
v1: min(62vw, 200px) → invasivo
v2: min(55vw, 168px) → muy angosto, items apretados
v3: min(60vw, 196px) → balance pero feedback "un poco más ancho"
v4: min(64vw, 216px) → +20px sobre v3, sigue dejando ~36-40% del
viewport visible detrás del drawer en 360px+.
Deja ver contenido detrás del drawer + items legibles.
------------------------------------------------------------------ */
@media (max-width: 768px) {
.sidebar {
width: min(64vw, 216px) !important;
max-width: min(64vw, 216px) !important;
}
}
/* End RB v6 */