/* Roca Gym V7 — tokens, shared components, page components, responsive.
   No build step. Keep selectors synchronized with HTML and ES modules. */





/* Base y tipografía */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + var(--announcement) + 24px); }
body { margin: 0; color: var(--ink); background: var(--white); font-family: "Poppins", Arial, sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body.is-locked { overflow: hidden; }
img, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -.045em; text-wrap: balance; overflow-wrap: break-word; }
p { color: var(--muted); }
::selection { color: #fff; background: var(--red); }
:focus-visible { outline: 3px solid #ed002d; outline-offset: 4px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 9999; padding: 12px 18px; background: #fff; color: #000; border: 2px solid #000; }
.skip-link:focus { top: 16px; }
.container { width: min(calc(100% - var(--gutter) * 2),var(--container)); margin-inline: auto; }
.narrow { width: min(calc(100% - var(--gutter) * 2),900px); margin-inline: auto; }
.section { padding-block: clamp(56px,6.3vw,100px); }
.surface { background: var(--soft); }
.ink-section { color: #fff; background: var(--ink); }
.ink-section p { color: rgba(255,255,255,.66); }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .85rem; line-height: 1.6; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--red); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow::before { width: 26px; height: 2px; content: ""; background: currentColor; }
.display { margin: 0; font-size: clamp(2.7rem,5vw,5.2rem); font-weight: 800; letter-spacing: -.055em; line-height: 1.07; }
.title { margin: 0; font-size: clamp(2rem,3.5vw,3.6rem); font-weight: 800; }
.title-md { margin: 0; font-size: clamp(1.65rem,2.5vw,2.5rem); font-weight: 700; }
.title-sm { margin: 0; font-size: clamp(1.25rem,1.7vw,1.7rem); font-weight: 700; }
.lede { max-width: 650px; font-size: clamp(1rem,1.15vw,1.13rem); line-height: 1.75; }
.red { color: var(--red); }
.rule { height: 1px; margin-block: 28px; background: var(--line); }

/* Navegación compartida */
.announcement { min-height: var(--announcement); display: flex; align-items: center; justify-content: center; padding: 7px 18px; color: #fff; background: var(--ink); text-align: center; font-size: .7rem; font-weight: 500; letter-spacing: .015em; }
.announcement a { display: inline-flex; align-items: center; gap: 8px; }
.announcement a::after { content: "→"; }
.site-header { height: var(--header); background: #fff; border-bottom: 1px solid var(--line); }
.site-header.scrolled { box-shadow: 0 10px 35px rgba(0,0,0,.07); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.brand img { width: 48px; height: 48px; object-fit: contain; border-radius: 50%; }
.brand-copy { display: grid; line-height: 1.08; }
.brand-copy strong { font-size: .91rem; font-weight: 800; letter-spacing: -.025em; }
.brand-copy span { margin-top: 5px; color: var(--muted); font-size: .58rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(14px,1.4vw,26px); }
.main-nav a { position: relative; padding-block: 14px; font-size: .79rem; font-weight: 600; white-space: nowrap; }
.main-nav a::after { position: absolute; right: 0; bottom: 4px; left: 0; height: 2px; content: ""; background: var(--red); transform: scaleX(0); transition: transform .2s ease; }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; font-size: 1.25rem; cursor: pointer; }
.cart-button, .icon-button { position: relative; width: 44px; height: 44px; display: inline-grid; place-items: center; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
.cart-count { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; display: grid; place-items: center; padding-inline: 4px; color: #fff; background: var(--red); border: 2px solid #fff; border-radius: 99px; font-size: .62rem; font-weight: 800; }
.mobile-nav { display: none; }

/* Botones y enlaces */
.btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; border: 1px solid transparent; border-radius: 8px; font-size: .85rem; font-weight: 700; line-height: 1.4; cursor: pointer; transition: background .18s,color .18s,transform .18s; }
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { color: #fff; background: var(--red); }
.btn-primary:hover { background: var(--red-dark); }
.btn-dark { color: #fff; background: var(--ink); }
.btn-dark:hover { background: #29292e; }
.btn-white { color: var(--ink); background: #fff; border-color: #fff; }
.btn-outline { color: var(--ink); background: transparent; border-color: var(--ink); }
.btn-ghost { color: var(--ink); background: #fff; border-color: var(--line); }
.btn-sm { min-height: 44px; padding: 10px 15px; font-size: .78rem; }
.btn-block { width: 100%; }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; background: none; border: 0; font-size: .85rem; font-weight: 700; cursor: pointer; }
.text-link::after { content: "↗"; color: var(--red); }
.text-link:hover { color: var(--red); }

/* Portada */
.home-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: 610px; background: var(--soft); }
.hero-copy-panel { display: flex; align-items: center; padding: 64px max(var(--gutter),calc((100vw - var(--container))/2)); padding-right: clamp(28px,4vw,64px); }
.hero-copy-inner { width: 100%; max-width: 660px; }
.hero-copy-inner .display { font-size: clamp(3rem,4.6vw,5.25rem); font-weight: 800; text-transform: uppercase; line-height: 1.05; letter-spacing: -.055em; }
.hero-copy-inner .lede { margin-block: 26px; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 38px; padding-top: 22px; border-top: 1px solid #d7d8da; }
.hero-proof div { padding: 0; background: transparent; }
.hero-proof strong, .hero-proof span { display: block; }
.hero-proof strong { font-size: .92rem; }
.hero-proof span { margin-top: 5px; color: var(--muted); font-size: .73rem; line-height: 1.5; }
.hero-media { position: relative; min-height: 610px; overflow: hidden; background: #17191c; }
.hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.38)); pointer-events: none; }
.hero-watermark { position: absolute; z-index: 2; right: 24px; top: 32px; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.5); font-size: clamp(4rem,9vw,10rem); font-weight: 800; letter-spacing: -.08em; line-height: 1; }
.hero-video-meta { position: absolute; z-index: 3; right: 28px; bottom: 28px; left: 28px; display: flex; align-items: center; justify-content: space-between; color: #fff; }
.hero-video-meta span { font-size: .7rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.video-controls { display: flex; gap: 8px; }
.video-controls button { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.38); border: 1px solid rgba(255,255,255,.35); border-radius: 50%; cursor: pointer; backdrop-filter: blur(10px); }
.ticker { display: flex; align-items: center; gap: 8px; min-height: 56px; padding-inline: 12px; overflow: hidden; color: #fff; background: var(--red); }
.ticker-window { flex: 1; min-width: 0; overflow: hidden; }
.ticker-track { display: flex; width: 100%; }
.ticker-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 28px; width: 100%; padding: 16px 14px; }
.ticker-group span { display: inline-flex; align-items: center; gap: 28px; font-size: .8125rem; font-weight: 600; letter-spacing: .065em; text-transform: uppercase; }
.ticker-group span::after { content: "✦"; font-size: .65rem; }
.ticker-copy { display: none; }
.ticker-toggle { flex: none; width: 44px; height: 44px; padding: 0; color: #fff; background: var(--red-dark); border: 1px solid rgba(255,255,255,.6); border-radius: 50%; font-size: 1rem; cursor: pointer; }
.ticker-toggle:focus-visible { outline-color: #fff; outline-offset: 2px; }
.ticker.is-animated .ticker-track { width: max-content; animation: ticker-travel 36s linear infinite; }
.ticker.is-animated .ticker-group { flex: none; flex-wrap: nowrap; justify-content: space-around; width: auto; min-width: 100vw; white-space: nowrap; }
.ticker.is-animated .ticker-copy { display: flex; }
.ticker[data-ticker-paused="true"] .ticker-track { animation-play-state: paused; }
@keyframes ticker-travel { to { transform: translateX(-50%); } }


/* Grids, promociones y sedes */
.split-heading { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); align-items: end; gap: 40px; margin-bottom: 36px; }
.split-heading > p { max-width: 470px; margin: 0 0 4px auto; font-size: .95rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.feature-card { min-height: 235px; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; }
.feature-index { color: var(--red); font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.feature-card h3 { margin-bottom: 12px; font-size: 1.3rem; }
.feature-card p { margin: 0; font-size: .9rem; }
.promo-panel { position: relative; min-height: 350px; display: grid; grid-template-columns: 1.15fr .85fr; overflow: hidden; color: #fff; background: var(--red); border-radius: var(--radius-lg); }
.promo-copy { z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(28px,4.5vw,64px); }
.promo-label, .badge { display: inline-flex; width: max-content; padding: 7px 10px; border-radius: 999px; font-size: .65rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.promo-label { color: var(--red); background: #fff; }
.promo-copy h2 { max-width: 700px; margin: 20px 0 18px; font-size: clamp(2.2rem,3.7vw,4rem); font-weight: 800; }
.promo-copy p { max-width: 55ch; color: #fff; }
.promo-art { position: relative; overflow: hidden; background: linear-gradient(135deg,var(--red),#760015); }
.promo-art::before { position: absolute; inset: -20%; content: "ROCA"; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.23); font-size: min(17vw, 230px); font-weight: 800; letter-spacing: -.1em; transform: rotate(-12deg); }
.location-card { position: relative; min-height: 450px; overflow: hidden; color: #fff; background: #111; border-radius: var(--radius); }
.location-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.location-card:hover > img { transform: scale(1.035); }
.location-card::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(0,0,0,.05) 24%, rgba(0,0,0,.86)); }
.location-copy { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; padding: 24px; }
.location-copy h3 { margin: 14px 0 12px; font-size: 1.8rem; }
.location-copy p { min-height: 66px; margin-bottom: 20px; color: #eee; font-size: .83rem; line-height: 1.6; }
.location-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { padding: 5px 9px; color: #fff; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.3); border-radius: 4px; font-size: .65rem; font-weight: 500; }

/* Planes */
.badge { color: var(--ink); background: var(--soft); }
.badge.red { color: #fff; background: var(--red); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 22px; }
.price strong { font-size: clamp(2rem,2.6vw,2.8rem); letter-spacing: -.05em; line-height: 1.2; }
.price span { color: var(--muted); font-size: .8rem; }
.ink-section .price span { color: rgba(255,255,255,.55); }
.check-list { display: grid; gap: 12px; margin: 0 0 26px; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 22px; color: var(--muted); font-size: .82rem; }
.ink-section .check-list li { color: #d2d3d8; }
.check-list li::before { position: absolute; left: 0; content: "✓"; color: var(--red); font-weight: 800; }

/* Tienda y productos */
.shop-stage { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); color: #fff; background: var(--ink); border-radius: var(--radius-lg); overflow: hidden; }
.shop-film { position: relative; min-height: 520px; overflow: hidden; }
.shop-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop-film::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.76)); }
.shop-film-copy { position: absolute; z-index: 2; right: 32px; bottom: 32px; left: 32px; }
.shop-film-copy p { color: rgba(255,255,255,.68); }
.shop-content { padding: clamp(24px,3.5vw,52px); }
.shop-content .title { max-width: 790px; }
.shop-content > p { max-width: 60ch; color: #d2d3d8; margin-top: 20px; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.home-featured-products { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: 32px; }
.product-card { min-width: 0; overflow: hidden; color: var(--ink); background: #fff; transition: box-shadow .2s,border-color .2s; }
.product-image { position: relative; aspect-ratio: 1; display: block; width: 100%; padding: 0; overflow: hidden; background: #f1f1ef; border: 0; cursor: pointer; }
.product-image img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .2s; }
.product-image.brand-placeholder img { width: 46%; height: 46%; margin: 27% auto; padding: 0; object-fit: contain; opacity: .85; }
.product-card:hover .product-image img { transform: scale(1.025); }
.product-badge { position: absolute; top: 12px; left: 12px; z-index: 2; max-width: calc(100% - 24px); padding: 5px 8px; color: #fff; background: var(--ink); border-radius: 4px; font-size: .65rem; font-weight: 600; }
.product-info { padding: 18px; }
.product-meta { color: var(--muted); font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.product-info h3 { min-height: 44px; margin: 9px 0; font-size: .97rem; line-height: 1.4; letter-spacing: -.025em; }
.stock { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font-size: .73rem; font-weight: 600; }
.stock::before { width: 6px; height: 6px; content: ""; background: currentColor; border-radius: 50%; }
.stock.out { color: var(--muted); }
.product-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.price-stack { display: grid; }
.product-price { font-size: 1.05rem; font-weight: 800; letter-spacing: -.04em; }
.compare-price { color: var(--muted); font-size: .7rem; text-decoration: line-through; }

/* Opiniones y formularios */
.review-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: start; }
.review-list { display: grid; gap: 16px; }
.review-card { padding: 26px; }
.stars { color: var(--red); letter-spacing: .12em; }
.review-card blockquote { margin: 18px 0; color: var(--ink); font-size: 1.05rem; font-weight: 600; }
.review-card footer { color: var(--muted); font-size: .72rem; }
.page-hero { padding: clamp(44px,6vw,86px) 0; background: var(--soft); border-bottom: 1px solid var(--line); }
.page-hero .display { max-width: 1080px; }
.page-hero .lede { margin-top: 24px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; color: var(--muted); font-size: .77rem; }
.breadcrumbs a:hover { color: var(--red); }
.branch-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.branch-nav button { min-height: 92px; padding: 18px; text-align: left; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: .9rem; font-weight: 700; }
.branch-nav button:last-child { border-right: 1px solid var(--line); }
.branch-nav button span { color: var(--muted); font-size: .74rem; font-weight: 400; }
.branch-nav button.active { color: #fff; background: var(--ink); border-color: var(--ink); box-shadow: inset 0 -3px var(--red); }
.branch-nav button.active span { color: rgba(255,255,255,.62); }
.signup-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(28px, 6vw, 90px); align-items: start; }
.signup-benefits { position: sticky; top: 118px; }
.number-list { display: grid; gap: 22px; margin-top: 36px; }
.number-row { display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.number-row span { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: var(--red); border-radius: 50%; font-size: .7rem; font-weight: 800; }
.number-row h3 { margin: 3px 0 5px; font-size: 1rem; }
.number-row p { margin: 0; font-size: .8rem; }
.form-card { padding: clamp(24px,3vw,40px); box-shadow: var(--shadow); }
.form-card > p { font-size: .85rem; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-block: 26px; }
.field-group { display: grid; gap: 8px; min-width: 0; }
.field-group.full { grid-column: 1 / -1; }
.field-group label, .field-label { color: var(--ink); font-size: .875rem; font-weight: 700; }
.field, .select, .textarea { width: 100%; min-width: 0; min-height: 50px; padding: 12px 14px; color: var(--ink); background: #fff; border: 1px solid #8a8e96; border-radius: 8px; font-size: 1rem; }
.textarea { min-height: 118px; resize: vertical; }
.field:focus, .select:focus, .textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(11,11,13,.08); }
.checkbox-row { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; color: var(--muted); font-size: .84rem; line-height: 1.6; }
.checkbox-row input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--red); }
.checkbox-row a { color: var(--ink); text-decoration: underline; }
.helper { margin: 0; color: var(--muted); font-size: .75rem; }
.form-status { min-height: 24px; margin: 16px 0 0; font-size: .85rem; font-weight: 500; overflow-wrap: anywhere; }
.form-status.success { color: var(--success); }
.form-status.error { color: var(--danger); }
.rating-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.rating-input input { position: absolute; opacity: 0; }
.rating-input label { display: grid; place-items: center; width: 44px; height: 44px; color: #858890; font-size: 1.8rem; cursor: pointer; }
.rating-input input:checked ~ label, .rating-input label:hover, .rating-input label:hover ~ label { color: var(--red); }

/* Portada de tienda */
.store-hero { position: relative; min-height: 560px; overflow: hidden; color: #fff; background: var(--ink); }
.store-hero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.store-hero::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.32) 100%); }
.store-hero-grid { position: relative; z-index: 2; min-height: inherit; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: center; padding-block: 64px; }
.store-hero-copy .display { max-width: 650px; font-size: clamp(2.8rem,4.3vw,4.8rem); text-transform: uppercase; }
.store-hero-copy .lede { margin-block: 26px; color: rgba(255,255,255,.72); }
.month-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.month-card { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; color: var(--ink); background: #fff; border-radius: var(--radius); border-top: 4px solid var(--red); }
.month-card img { width: 100%; height: 170px; object-fit: contain; margin-bottom: 20px; }
.month-card .product-meta { color: var(--red); }
.month-card h3 { min-height: 50px; margin: 10px 0; font-size: 1rem; line-height: 1.4; }
.store-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 32px; }
.search-wrap { min-width: min(100%, 340px); flex: 1; }
.search-wrap input { width: 100%; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-button { min-height: 44px; padding: 10px 16px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 6px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.filter-button.active { color: #fff; background: var(--ink); border-color: var(--ink); }

/* Roca Club */
.club-banner { display: grid; grid-template-columns: .7fr 1.3fr; min-height: 460px; overflow: hidden; color: #fff; background: var(--red); border-radius: var(--radius-lg); }
.club-visual { position: relative; overflow: hidden; background: #121214; }
.club-visual img { position: absolute; width: 54%; left: 23%; top: 15%; filter: drop-shadow(0 25px 30px rgba(0,0,0,.35)); }
.club-visual::after { position: absolute; right: -5%; bottom: -11%; content: "CLUB"; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.23); font-size: clamp(5rem, 11vw, 12rem); font-weight: 800; letter-spacing: -.08em; }
.club-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(28px,4vw,64px); }
.club-copy p { max-width: 60ch; color: #fff; margin-top: 20px; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-block: 30px; }
.benefit { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.35); }
.benefit strong { display: block; font-size: .82rem; }
.benefit span { color: #fff; font-size: .76rem; }
.auth-shell { min-height: 620px; display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; background: var(--soft); border-radius: var(--radius-lg); }
.auth-intro { padding: clamp(28px,4vw,60px); color: #fff; background: var(--ink); }
.auth-intro p { color: rgba(255,255,255,.65); }
.auth-box { padding: clamp(24px,4vw,60px); background: #fff; }
.member-dashboard { min-width: 0; padding: clamp(24px,4vw,52px); }
.status-pill { display: inline-flex; padding: 7px 10px; border-radius: 99px; font-size: .65rem; font-weight: 750; }
.status-pill.active, .status-pill.approved { color: #066447; background: #ddf7ed; }
.status-pill.pending, .status-pill.new { color: #8a5400; background: #fff2ce; }
.status-pill.rejected { color: #a10f27; background: #ffe3e8; }

/* Pedido y contenido informativo */
.checkout-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: start; }
.order-summary { position: sticky; top: 140px; min-width: 0; padding: 28px; color: #fff; background: var(--ink); border-radius: var(--radius); }
.summary-line { display: flex; justify-content: space-between; gap: 18px; padding-block: 16px; border-bottom: 1px solid rgba(255,255,255,.2); font-size: .85rem; }
.summary-line span { color: rgba(255,255,255,.68); }
.summary-total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 24px; font-size: 1.2rem; font-weight: 700; }
.story-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.story-film { overflow: hidden; background: #000; border-radius: var(--radius); }
.story-film video { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 72px; background: var(--line); border: 1px solid var(--line); }
.value-card { min-height: 240px; padding: 30px; background: #fff; }
.value-card span { color: var(--red); font-size: .7rem; font-weight: 800; }
.value-card h3 { margin: 70px 0 10px; font-size: 1.2rem; }
.value-card p { margin: 0; font-size: .76rem; }
.contact-grid { display: grid; grid-template-columns: .76fr 1.24fr; gap: clamp(28px, 6vw, 84px); }
.contact-list { display: grid; gap: 1px; margin-top: 36px; background: var(--line); border-block: 1px solid var(--line); }
.contact-item { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding-block: 22px; background: #fff; }
.contact-item b { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; background: var(--ink); border-radius: 50%; font-size: .7rem; }
.contact-item strong, .contact-item span { display: block; }
.contact-item strong { font-size: .85rem; }
.contact-item span { color: var(--muted); font-size: .75rem; }
.legal-layout { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: clamp(30px, 8vw, 120px); align-items: start; }
.legal-nav { position: sticky; top: 120px; display: grid; gap: 10px; }
.legal-nav a { color: var(--muted); font-size: .85rem; padding-block: 6px; }
.legal-nav a:hover { color: var(--red); }
.legal-copy section { padding-block: 30px; border-bottom: 1px solid var(--line); }
.legal-copy section:first-child { padding-top: 0; }
.legal-copy h2 { font-size: 1.5rem; }
.legal-copy h3 { margin-top: 26px; font-size: 1rem; }
.legal-copy p, .legal-copy li { color: var(--muted); font-size: .96rem; line-height: 1.8; }
.legal-copy ul { padding-left: 20px; }
.empty-state { grid-column: 1 / -1; padding: 32px; color: var(--ink); text-align: center; background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); }
.empty-state h3 { margin-bottom: 10px; }
.empty-state p { font-size: .82rem; }

/* Modales, carrito y consentimiento */
.modal-backdrop, .drawer-backdrop { position: fixed; inset: 0; z-index: 3000; display: none; background: rgba(0,0,0,.63); backdrop-filter: blur(6px); }
.modal-backdrop.open, .drawer-backdrop.open { display: block; }
.product-modal { width: min(920px,calc(100% - 32px)); max-height: calc(100dvh - 32px); display: grid; grid-template-columns: 1fr 1fr; position: absolute; top: 50%; left: 50%; overflow: auto; overscroll-behavior: contain; background: #fff; border-radius: 18px; transform: translate(-50%,-50%); }
.modal-media { min-height: 400px; display: grid; place-items: center; background: var(--soft); }
.modal-media img { width: 100%; height: 100%; max-height: 500px; object-fit: contain; padding: 24px; }
.modal-media.brand-placeholder img { width: 45%; height: 45%; object-fit: contain; }
.modal-copy { position: relative; min-width: 0; padding: 64px 28px 32px; }
.modal-copy .icon-button { position: absolute; top: 18px; right: 18px; }
.modal-copy h2 { margin: 14px 0; font-size: 2rem; }
.modal-price { margin-block: 22px; font-size: 1.7rem; font-weight: 800; }
.drawer { width: min(480px,100%); height: 100dvh; display: flex; flex-direction: column; margin-left: auto; background: #fff; overscroll-behavior: contain; }
.drawer-backdrop.open .drawer { transform: translateX(0); }
.drawer-head, .drawer-foot { padding: 24px; border-bottom: 1px solid var(--line); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-head h2 { margin: 0; font-size: 1.35rem; }
.drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 24px; }
.drawer-foot { border-top: 1px solid var(--line); border-bottom: 0; padding-bottom: max(24px,env(safe-area-inset-bottom)); }
.cart-item { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 14px; align-items: center; padding-block: 18px; border-bottom: 1px solid var(--line); }
.cart-item img { grid-row: span 2; width: 62px; height: 74px; object-fit: contain; background: var(--soft); border-radius: 8px; }
.cart-item h4 { margin: 0 0 5px; font-size: .9rem; line-height: 1.4; overflow-wrap: anywhere; }
.quantity { grid-column: 2; display: grid; grid-template-columns: 44px 36px 44px; align-items: center; text-align: center; justify-self: start; }
.quantity button { width: 44px; height: 44px; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.quantity span { font-size: .85rem; }
.cart-total { display: flex; justify-content: space-between; margin-bottom: 18px; font-weight: 800; }
.toast-stack { position: fixed; z-index: 5000; right: 20px; bottom: 86px; display: grid; gap: 9px; max-width: calc(100% - 40px); pointer-events: none; }
.toast { max-width: 380px; padding: 14px 18px; color: #fff; background: var(--ink); border-radius: 10px; box-shadow: var(--shadow); font-size: .85rem; }
.toast.error { background: var(--danger); }
.cookie-banner { position: fixed; z-index: 4500; right: 20px; bottom: 20px; width: min(450px,calc(100% - 40px)); max-height: calc(100dvh - 40px); overflow: auto; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 20px 70px rgba(0,0,0,.18); }
.cookie-banner h2 { margin-bottom: 9px; font-size: 1.05rem; }
.cookie-banner p { margin-bottom: 18px; font-size: .83rem; line-height: 1.6; }
.cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Pie de página */
.site-footer { padding: 72px 0 26px; color: #fff; background: var(--ink); }
.site-footer .brand-copy span { color: #c5c7ce; }
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3,1fr); gap: 36px; }
.footer-brand p { max-width: 350px; margin-top: 24px; color: #b9bbc2; font-size: .88rem; }
.footer-grid > div > strong { display: block; margin-bottom: 20px; font-size: .73rem; letter-spacing: .08em; text-transform: uppercase; }
.footer-links { display: grid; gap: 11px; }
.footer-links a, .footer-links span, .footer-links button { padding: 4px 0; color: #c5c7ce; background: none; border: 0; text-align: left; font-size: .85rem; cursor: pointer; }
.footer-links a:hover, .footer-links button:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 24px; color: #b9bbc2; border-top: 1px solid #3c3e44; font-size: .75rem; }
.floating-wa { position: fixed; z-index: 1200; right: 20px; bottom: max(20px,env(safe-area-inset-bottom)); width: 54px; height: 54px; display: grid; place-items: center; color: #fff; background: #08764b; border: 3px solid #fff; border-radius: 50%; box-shadow: var(--shadow); font-size: .75rem; font-weight: 700; }
[data-reveal] { opacity: 1; transform: none; }
[data-reveal].revealed { opacity: 1; transform: none; }

/* Páginas de sedes y suscripción */
.newsletter-section { padding-block: 0; background: var(--ink); }
.newsletter-panel { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(28px,4vw,60px); color: #fff; background: var(--red); border-radius: var(--radius-lg); }
.newsletter-panel p { max-width: 650px; margin: 16px 0 0; color: rgba(255,255,255,.76); }
.newsletter-panel .eyebrow { color: #fff; }
.branch-index-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 80% 20%,rgba(239,0,61,.28),transparent 28%),linear-gradient(135deg,#07080a,#17181d); }
.branch-index-hero p { color: rgba(255,255,255,.7); }
.branch-showcase { display: grid; gap: clamp(70px,9vw,140px); }
.branch-feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(28px,5vw,72px); }
.branch-feature.reverse .branch-feature-media { order: 2; border-radius: var(--radius-lg); }
.branch-feature-media { position: relative; height: 460px; overflow: hidden; background: var(--ink); border-radius: var(--radius-lg); }
.branch-feature-media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg,transparent 55%,rgba(0,0,0,.28)); }
.branch-feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.branch-feature-media:hover img { transform: scale(1.035); }
.branch-feature-copy h2 { margin: 0 0 22px; font-size: clamp(2.2rem,3.5vw,3.8rem); letter-spacing: -.05em; }
.branch-feature-copy > p { max-width: 60ch; font-size: 1.08rem; }
.branch-feature-copy dl { display: grid; gap: 0; margin: 34px 0; border-block: 1px solid var(--line); }
.branch-feature-copy dl div { display: grid; grid-template-columns: 120px 1fr; gap: 22px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.branch-feature-copy dl div:last-child { border: 0; }
.branch-feature-copy dt { color: var(--muted); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.branch-feature-copy dd { margin: 0; font-weight: 650; }
.location-loading { min-height: 70vh; display: grid; place-content: center; gap: 12px; text-align: center; background: #08090b; }
.location-loading p { color: rgba(255,255,255,.58); }
.loader-mark { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.38); font-size: clamp(5rem,15vw,12rem); font-weight: 800; letter-spacing: -.1em; line-height: .8; }
.location-hero { position: relative; min-height: 600px; display: grid; align-items: end; overflow: hidden; color: #fff; background: var(--ink); }
.location-hero-media,.location-hero-shade { position: absolute; inset: 0; }
.location-hero-media img,.location-hero-media video { width: 100%; height: 100%; object-fit: cover; }
.location-hero-shade { background: linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.2) 70%),linear-gradient(0deg,rgba(0,0,0,.72),transparent 55%); }
.location-hero-copy { position: relative; z-index: 2; padding-block: 80px; }
.location-hero-copy .display { max-width: 1000px; }
.location-hero-copy .lede { margin: 26px 0 30px; color: rgba(255,255,255,.78); }
.breadcrumbs.light,.breadcrumbs.light a { color: rgba(255,255,255,.72); }
.location-intro { background: #fff; }
.story-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(40px,9vw,150px); align-items: start; }
.story-grid p { max-width: 70ch; }
.location-gallery { display: grid; grid-template-columns: 1.2fr .8fr; grid-auto-rows: 440px; gap: 8px; padding: 8px; background: var(--ink); }
.location-gallery > * { width: 100%; height: 100%; object-fit: cover; }
.location-gallery > :only-child { grid-column: 1 / -1; }
.map-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(340px,.75fr); gap: clamp(34px,6vw,90px); align-items: center; }
.map-card { min-height: 560px; overflow: hidden; background: var(--soft); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.map-card iframe { width: 100%; height: 560px; border: 0; }
.map-copy > p { margin: 24px 0; font-size: 1.1rem; }
.location-facts { display: grid; gap: 1px; margin: 30px 0; background: var(--line); border-block: 1px solid var(--line); }
.location-facts div { display: grid; gap: 4px; padding: 18px 0; background: #fff; }
.location-facts span { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.subscribe-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.72fr); gap: clamp(42px,8vw,130px); align-items: start; }
.subscribe-card { position: sticky; top: calc(var(--header) + var(--announcement) + 20px); box-shadow: var(--shadow); }
.promo-subscribe-hero { background: var(--soft); }
.selected-plan-summary { display: grid; gap: 4px; padding: 18px 20px; color: #fff; background: linear-gradient(120deg,var(--ink),#24262c); border-left: 4px solid var(--red); border-radius: 12px; }
.selected-plan-summary span,.selected-plan-summary small { color: rgba(255,255,255,.62); }
.selected-plan-summary strong { font-size: 1.05rem; }
[data-dynamic-header] { position: sticky; top: 0; z-index: 1000; background: #fff; }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-ghost:hover { border-color: var(--ink); }
.hero-proof div:last-child { grid-column: 1 / -1; }
.hero-media::before { position: absolute; z-index: 2; top: 0; left: 0; width: 7px; height: 30%; content: ""; background: var(--red); }
.product-card:hover { border-color: #bfc0c5; box-shadow: var(--shadow); }
.branch-summary { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 0; margin-bottom: 16px; color: var(--muted); font-size: .85rem; }
.plan-type-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.plan-filter { min-height: 44px; padding: 9px 16px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 6px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.plan-filter.active { color: #fff; background: var(--red); border-color: var(--red); }
.rating-input input:focus-visible + label { outline: 3px solid var(--red); outline-offset: 2px; }
.summary-line strong { white-space: nowrap; }
.ink-section .empty-state p { color: var(--muted); }
.media-toggle { position: absolute; z-index: 4; right: 20px; top: 20px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #fff; color: #fff; background: rgba(0,0,0,.7); cursor: pointer; }
.content-notice { margin: 0; padding: 12px var(--gutter); color: #694400; background: #fff4db; font-size: .83rem; text-align: center; }
.offer-card { padding: 28px; }
.space-top { margin-top: 20px; }
.success-card { padding: 24px; margin-top: 20px; background: #edf8f2; border: 1px solid #a6d1b6; border-radius: var(--radius); }
.section-action { margin-top: 28px; }
.center-actions { justify-content: center; }
.center-lede { margin: 24px auto 30px; }
.light-text { color: #fff; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.flow-steps { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 28px 0 0; padding: 0; font-size: .8rem; font-weight: 600; }
.flow-steps li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.flow-steps span { color: var(--red); font-weight: 800; }

.summary-note { margin:18px 0 0;color:#c5c7ce; }
.plain-button { background:none;border:0;cursor:pointer; }
.dashboard-heading { display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;align-items:center; }
.member-status-card { padding:26px;margin-top:28px; }
.error-page { min-height:100svh;display:grid;place-items:center; }
.error-lede { margin:0 auto 28px; }
.store-note { margin-top:20px;color:#d2d3d8; }
.toolbar-spaced { margin-bottom:24px; }
.variant-spacing { margin:24px 0; }
.info-card { padding:24px;margin-top:26px; }
.contact-card { padding:26px; }
[data-header] { position:sticky;top:0;z-index:1000;background:#fff; }
.cookie-banner[inert] { visibility:hidden; }
.loading-message { grid-column:1 / -1;min-height:160px;display:grid;place-items:center;margin:0;color:var(--muted);background:var(--soft);border-radius:var(--radius);font-size:.9rem; }
@media (max-width: 1200px) {
  .brand-copy span { max-width:130px; }
  .main-nav { gap:14px; }
  .header-inner { gap:16px; }
  .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .home-featured-products { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-copy-panel { padding-block:48px; }
  .hero-proof { gap:16px; }
  .grid-4,.value-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .store-hero-grid { gap:32px; }
}
@media (max-width: 1280px) {
  .main-nav,.desktop-only { display:none; }
  .menu-toggle { display:grid;place-items:center; }
  .mobile-nav { display:none;position:absolute;top:100%;left:0;right:0;max-height:calc(100dvh - 120px);overflow:auto;padding:12px var(--gutter) 22px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow); }
  .mobile-nav.open { display:grid;gap:4px; }
  .mobile-nav a { padding:12px;min-height:48px;border-radius:6px;font-weight:600; }
  .mobile-nav a[aria-current="page"] { color:var(--red);background:var(--soft); }
  .home-hero { min-height:540px; }
  .hero-media { min-height:540px; }
  .hero-copy-inner .display { font-size:clamp(2.5rem,4.9vw,3.8rem); }
  .hero-actions .btn { padding-inline:18px; }
  .shop-stage,.club-banner { grid-template-columns:1fr; }
  .shop-film { min-height:400px; }
  .shop-content { padding:36px; }
  .home-featured-products { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-3 > :last-child:nth-child(odd) { grid-column:1 / -1; }
  .location-card { min-height:460px; }
  .signup-layout,.contact-grid,.review-layout,.story-layout,.auth-shell,.checkout-layout,.story-grid,.map-layout,.subscribe-layout { grid-template-columns:1fr;gap:32px; }
  .signup-benefits,.order-summary,.subscribe-card { position:static; }
  .store-hero-grid { grid-template-columns:1fr; }
  .month-products { max-width:620px; }
  .club-visual { min-height:240px; }
  .club-visual img { width:160px;left:calc(50% - 80px);top:28px; }
  .club-visual::after { font-size:10rem; }
  .auth-intro .title { font-size:2rem; }
  .auth-intro .number-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .legal-layout { grid-template-columns:1fr;gap:30px; }
  .legal-nav { position:static;display:flex;flex-wrap:wrap;gap:10px 22px; }
  .branch-feature { gap:28px; }
  .branch-feature-copy dl div { grid-template-columns:1fr;gap:4px; }
  .newsletter-panel { align-items:flex-start;flex-direction:column; }
}
@media (max-width: 720px) {
  .container,.narrow { width:calc(100% - 40px); }
  .site-header { height:72px; }
  .announcement { font-size:.66rem; }
  .brand img { width:42px;height:42px; }
  .brand-copy span { max-width:none;font-size:.54rem; }
  .home-hero { grid-template-columns:1fr; }
  .hero-copy-panel { padding:40px 20px 32px; }
  .hero-copy-inner .display { max-width:12ch;font-size:clamp(2.65rem,9.8vw,4rem); }
  .hero-copy-inner .lede { max-width:42ch;margin:20px 0; }
  .hero-proof { grid-template-columns:1fr 1fr;margin-top:26px; }
  .hero-proof div:last-child { grid-column:1 / -1; }
  .hero-media { min-height:300px;aspect-ratio:4 / 3; }
  .hero-watermark { font-size:5.5rem;top:24px; }
  .hero-video-meta { left:20px;right:20px;bottom:20px; }
  .split-heading { grid-template-columns:1fr;gap:18px;margin-bottom:28px; }
  .split-heading > p { margin:0; }
  .grid-3,.grid-4,.value-grid { grid-template-columns:1fr; }
  .promo-panel { grid-template-columns:1fr; }
  .promo-art { min-height:160px; }
  .promo-copy { padding:32px 24px; }
  .promo-copy h2 { font-size:2.5rem; }
  .location-card { min-height:460px; }
  .feature-card { min-height:200px; }
  .branch-nav { grid-template-columns:1fr;gap:8px; }
  .branch-nav button { min-height:76px;padding:14px 18px; }
  .shop-film { min-height:380px; }
  .shop-content { padding:28px 20px; }
  .product-grid,.home-featured-products { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
  .product-info { padding:14px 12px; }
  .product-info h3 { min-height:58px;font-size:.84rem; }
  .product-row { gap:8px; }
  .product-row .btn { width:100%; }
  .product-badge { font-size:.58rem;top:8px;left:8px;max-width:calc(100% - 16px); }
  .product-price { font-size:1rem; }
  .form-grid { grid-template-columns:1fr;gap:18px; }
  .field-group.full { grid-column:auto; }
  .form-card { padding:24px 20px; }
  .store-hero-grid { padding-block:44px;gap:36px; }
  .store-hero-copy .display { font-size:clamp(2.65rem,9vw,3.8rem); }
  .month-card { padding:14px; }
  .month-card img { height:110px; }
  .month-card h3 { min-height:58px;font-size:.85rem; }
  .store-toolbar { align-items:stretch; }
  .store-toolbar > div { width:100%; }
  .filter-row,.plan-type-filters { flex-wrap:wrap; }
  .filter-button,.plan-filter { flex:none; }
  .benefit-grid { grid-template-columns:1fr;gap:12px;margin-block:20px; }
  .club-copy { padding:32px 24px; }
  .auth-intro .number-list { grid-template-columns:1fr; }
  .product-modal { grid-template-columns:1fr; }
  .modal-media { min-height:190px;height:220px; }
  .modal-media img { max-height:220px; }
  .modal-copy { padding:58px 24px 24px; }
  .modal-copy h2 { font-size:1.6rem; }
  .footer-grid { grid-template-columns:1fr;gap:30px; }
  .footer-bottom { flex-direction:column; }
  .footer-brand { grid-column:auto; }
  .branch-feature { grid-template-columns:1fr; }
  .branch-feature.reverse .branch-feature-media { order:initial; }
  .branch-feature-media { height:340px; }
  .location-hero { min-height:550px; }
  .location-hero-copy { padding-block:52px; }
  .location-gallery { grid-template-columns:1fr;grid-auto-rows:320px; }
  .map-card,.map-card iframe { min-height:360px;height:360px; }
  .page-hero .lede { margin-bottom:0; }
  .page-hero .hero-actions { margin-top:24px; }
  .cookie-banner { right:12px;bottom:12px;width:calc(100% - 24px);padding:20px; }
}
@media (max-width: 430px) {
  .header-actions { gap:4px; }
  .header-inner { gap:8px; }
  .brand { gap:8px; }
  .brand-copy strong { font-size:.85rem; }
  .hero-actions { gap:10px; }
  .hero-actions .btn { width:100%; }
  .hero-proof { gap:16px 12px; }
  .hero-proof span { font-size:.7rem; }
  .month-products { gap:10px; }
  .cookie-actions { grid-template-columns:1fr; }
  .cookie-actions .btn { width:100%; }
  .drawer-head,.drawer-foot { padding:20px; }
  .drawer-body { padding-inline:20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker.is-animated .ticker-track { width:100%;transform:none; }
  .ticker.is-animated .ticker-group { width:100%;min-width:0;flex-wrap:wrap;white-space:normal;justify-content:center; }
  .ticker.is-animated .ticker-copy,.ticker-toggle { display:none; }
  *,*::before,*::after { scroll-behavior:auto !important;animation:none !important;transition:none !important; }
}
@media print {
  [data-dynamic-header],.site-footer,.floating-wa,.cookie-banner,.toast-stack,.drawer-backdrop,.modal-backdrop,[data-print-claim],[data-download-claim] { display:none !important; }
  .page-hero { padding:20px 0; }
  .section { padding:20px 0; }
  body { font-size:12pt;color:#000;background:#fff; }
}

/* V7: full-bleed media, fluid typography and readable content at 320–3840+ CSS px. */
html { font-size: clamp(16px, .53vw, 22px); }
body { overflow-wrap: break-word; }
main, .container, .grid-3 > *, .plans-grid > *, .header-inner > *, .form-grid > * { min-width: 0; }
.section { padding-block: clamp(48px, 5vw, 120px); }
.title { font-size: clamp(1.9rem, 3vw, 3.25rem); letter-spacing: -.045em; }
.lede { max-width: 52ch; font-size: clamp(1rem, 1.12vw, 1.2rem); }
.main-nav a { font-size: .88rem; }
.btn { font-size: .92rem; border-radius: 6px; }
.btn-sm { font-size: .83rem; }
.eyebrow { font-size: .76rem; }
.announcement { font-size: .76rem; }
.header-inner { gap: 24px; }
.brand-copy span { font-size: .65rem; }
.site-header { height: auto; min-height: var(--header); }
.header-inner { min-height: var(--header); }

/* The media fills the complete viewport width, independent of the text container. */
.home-hero.cinematic-hero { position: relative; isolation: isolate; display: flex; min-height: clamp(640px, 82svh, 1540px); color: #fff; background: #111216; overflow: hidden; }
.cinematic-hero .hero-media { position: absolute; inset: 0; min-height: 0; aspect-ratio: auto; overflow: hidden; }
.cinematic-hero .hero-media video { width: 100%; height: 100%; object-fit: cover; filter: none; transform: none; }
.cinematic-hero .hero-media::before { display: none; }
.cinematic-hero .hero-media::after { z-index: 1; background: linear-gradient(90deg,rgba(7,9,12,.86) 0%,rgba(7,9,12,.52) 46%,rgba(7,9,12,.09) 100%),linear-gradient(0deg,rgba(7,9,12,.6),transparent 42%); }
.cinematic-hero .hero-copy-panel { position: relative; z-index: 2; padding: clamp(56px,5vw,150px) 0 96px; pointer-events: none; }
.cinematic-hero .hero-copy-inner { max-width: 58%; pointer-events: auto; }
.cinematic-hero .hero-copy-inner .display { max-width: 13ch; font-size: clamp(3rem,5.65vw,10rem); line-height: 1.015; letter-spacing: -.06em; }
.cinematic-hero .eyebrow { color: #fff; }
.cinematic-hero .eyebrow::before { color: var(--red); width: 40px; }
.cinematic-hero .hero-copy-inner .lede { color: #eee; max-width: 44ch; margin: 24px 0 30px; }
.cinematic-hero .btn-outline, .membership-hero .btn-outline { color: #fff; border-color: #ffffff85; background: #11111130; }
.cinematic-hero .btn-outline:hover, .membership-hero .btn-outline:hover { background: #fff; color: var(--ink); }
.cinematic-hero .hero-proof { display: grid; grid-template-columns: 1fr 1.15fr .9fr; max-width: 770px; gap: 24px; margin-top: 36px; border-color: #ffffff38; }
.cinematic-hero .hero-proof div:last-child { grid-column: auto; }
.cinematic-hero .hero-proof strong { font-size: .85rem; }
.cinematic-hero .hero-proof span { font-size: .76rem; color: #dedee1; }
.cinematic-hero .hero-watermark { z-index: 2; top: auto; right: 3vw; bottom: 98px; font-size: clamp(5rem,17vw,26rem); opacity: .28; -webkit-text-stroke: 1px #fff; }
.cinematic-hero .hero-video-meta { z-index: 4; left: auto; right: var(--gutter); bottom: 28px; gap: 28px; }
.video-controls button, .media-toggle { min-width: 44px; min-height: 44px; touch-action: manipulation; }
.cinematic-hero .video-controls button { background: #0a0a0a60; }

/* Compact editable membership cover. */
.membership-hero { position: relative; isolation: isolate; overflow: hidden; color: white; background: var(--ink); padding-block: clamp(32px,3.2vw,90px); border: 0; }
.membership-hero > video, .membership-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.membership-hero-shade { background: linear-gradient(90deg,rgba(9,10,13,.89),rgba(9,10,13,.6) 50%,rgba(9,10,13,.17)); }
.membership-hero > .container { position: relative; z-index: 2; pointer-events: none; }
.membership-hero > .container > * { pointer-events: auto; }
.membership-hero .display { max-width: 16ch; font-size: clamp(2.5rem,4.4vw,5.5rem); }
.membership-hero .eyebrow { color: #fff; }
.membership-hero .eyebrow::before { color: var(--red); }
.membership-hero .breadcrumbs, .membership-hero .lede { color: #e6e6e8; }
.membership-hero .breadcrumbs { margin-bottom: 24px; }
.membership-hero .lede { max-width: 53ch; margin: 18px 0 24px; }
.membership-hero .flow-steps { margin-top: 24px; gap: 18px; }
.membership-hero .flow-steps li { color: #fff; background: transparent; border: 0; padding: 0; }
.membership-hero .flow-steps span { background: var(--red); color: #fff; width: 27px; height: 27px; display: inline-grid; place-items: center; border-radius: 50%; font-size: .65rem; }
.membership-hero .media-toggle { top: auto; bottom: 22px; right: var(--gutter); }
#planes.section { padding-top: clamp(36px,4vw,88px); }
#planes .split-heading { margin-bottom: 28px; }
.branch-nav { gap: 16px; }
.branch-nav .branch-option { display: flex; position: relative; align-items: center; gap: 16px; overflow: hidden; padding: 12px; border-radius: 10px; min-height: 120px; transition: border-color .2s, background .2s, box-shadow .2s; }
.branch-option > img { width: 88px; height: 92px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.branch-nav .branch-option-copy { display: grid; gap: 5px; padding-right: 26px; min-width: 0; }
.branch-nav .branch-option-copy small { font-size: .62rem; font-weight: 700; letter-spacing: .09em; color: var(--red); }
.branch-option-copy strong { font-size: .91rem; color: var(--ink); line-height: 1.25; }
.branch-nav .branch-option-copy > span { font-size: .75rem; line-height: 1.5; }
.branch-nav .branch-option.active { background: var(--ink); box-shadow: inset 0 -3px 0 var(--red); }
.branch-nav .branch-option.active strong { color: #fff; }
.branch-nav .branch-option.active small { color: #ff6676; }
.branch-nav .branch-option.active span > span { color: #e2e2e7; }
.branch-check { position: absolute; right: 13px; top: 13px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: .76rem; color: var(--muted); }
.active .branch-check { background: var(--red); color: #fff; }
.branch-tools { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 6px 0 16px; }
.branch-summary { margin: 0; font-size: .83rem; }
.branch-tools .text-link { flex-shrink: 0; font-size: .8rem; }
.plan-type-filters { gap: 8px; margin-bottom: 24px; }
.plan-filter { min-height: 44px; padding: 10px 16px; font-size: .85rem; }
.position-center { object-position: center; }.position-top { object-position: top; }.position-bottom { object-position: bottom; }.position-left { object-position: left; }.position-right { object-position: right; }
.selected-plan-summary { border-left: 4px solid var(--red); }
.signup-layout { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
.signup-benefits > p, .split-heading > p { max-width: 48ch; }

/* Contact and WhatsApp: clear destination and branch-aware messages. */
.contact-card { overflow: hidden; }
.contact-card > .contact-photo { width: calc(100% + 52px); max-width: none; height: 190px; object-fit: cover; margin: -26px -26px 24px; }
.contact-card .contact-hours { font-size: .84rem; color: var(--ink); }
.whatsapp-dock { position: fixed; z-index: 1200; right: max(20px,env(safe-area-inset-right)); bottom: max(20px,env(safe-area-inset-bottom)); }
.whatsapp-dock .floating-wa { position: relative; inset: auto; display: flex; gap: 9px; width: auto; height: 54px; min-width: 54px; padding: 0 18px; border: 2px solid #fff; border-radius: 100px; cursor: pointer; font-size: .82rem; box-shadow: 0 6px 25px #0002; }
.whatsapp-dock summary { list-style: none; }
.whatsapp-dock summary::-webkit-details-marker { display: none; }
.whatsapp-dock svg { width: 26px; height: 26px; flex: 0 0 auto; }
.whatsapp-panel { position: absolute; right: 0; bottom: 68px; width: min(340px,calc(100vw - 40px)); padding: 24px; color: var(--ink); background: #fff; box-shadow: var(--shadow-lg); border: 1px solid var(--line); border-radius: 14px; }
.whatsapp-panel h2 { font-size: 1.3rem; margin: 0 0 8px; }
.whatsapp-panel p { font-size: .85rem; }
.whatsapp-panel .select { margin-bottom: 14px; }
.whatsapp-panel .btn { margin-top: 8px; }
.whatsapp-panel label { display: block; font-size: .8rem; margin-bottom: 6px; }
.whatsapp-panel .wa-close { position: absolute; right: 12px; top: 7px; width: 32px; height: 32px; border: 0; background: transparent; font-size: 1.4rem; cursor: pointer; }
body:has(.cookie-banner) .whatsapp-dock { bottom: 22px; }
.location-hero .media-toggle { z-index: 5; }
.location-hero-copy { pointer-events: none; }
.location-hero-copy a { pointer-events: auto; }

/* Motion never gates visibility; reduced motion gets the final state. */
@media (prefers-reduced-motion: no-preference) {
  .drawer-backdrop.open, .modal-backdrop.open { animation: roca-fade .2s ease both; }
  .drawer-backdrop.open .drawer { animation: roca-drawer .25s ease both; }
  .whatsapp-dock[open] .whatsapp-panel { animation: roca-enter .2s ease both; }
}
@keyframes roca-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes roca-enter { from { opacity: .3; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes roca-drawer { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .branch-option:hover { border-color: var(--red); }
}
@media (min-width: 2100px) {
  .hero-copy-inner { max-width: 58%; }
  .location-card { min-height: 32rem; }
  .header-inner, .site-header { min-height: 100px; }
}
@media (max-width: 1250px) and (min-width: 1041px) {
  .brand-copy span { display: none; }
  .main-nav { gap: 13px; }
  .main-nav a { font-size: .8rem; }
  .header-inner { gap: 14px; }
}
@media (max-width: 1040px) {
  .main-nav { display: none; }
  .header-inner { gap: 12px; }
  .cinematic-hero .hero-copy-inner { max-width: 80%; }
  .cinematic-hero .hero-copy-inner .display { font-size: clamp(3rem,7vw,5rem); }
  .branch-option > img { width: 58px; height: 86px; }
  .branch-nav .branch-option { gap: 10px; }
  .branch-nav .branch-option-copy { padding-right: 6px; }
  .branch-check { top: 4px; right: 5px; }
  .signup-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .container { width: calc(100% - 40px); }
  .home-hero.cinematic-hero { min-height: 690px; }
  .cinematic-hero .hero-copy-panel { padding: 56px 0 clamp(156px,calc(546px - 100vw),226px); align-items: center; }
  .cinematic-hero .hero-copy-inner { max-width: 100%; }
  .cinematic-hero .hero-copy-inner .display { font-size: clamp(2.7rem,10.3vw,4.4rem); max-width: 12ch; }
  .cinematic-hero .hero-copy-inner .lede { margin: 22px 0; font-size: 1rem; }
  .cinematic-hero .hero-media::after { background: linear-gradient(90deg,#0a0c0fe6,#0a0c0f62),linear-gradient(0deg,#0a0c0fcc,transparent); }
  .cinematic-hero .hero-proof { gap: 16px; grid-template-columns: 1fr 1fr; margin-top: 28px; }
  .cinematic-hero .hero-proof div:last-child { display: none; }
  .cinematic-hero .hero-watermark { display: none; }
  .cinematic-hero .hero-video-meta { left: 20px; right: 20px; bottom: 24px; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { width: auto; padding-inline: 17px; }
  .membership-hero { padding-block: 28px 68px; }
  .membership-hero .display { font-size: clamp(2.3rem,9vw,3.5rem); }
  .membership-hero .flow-steps { gap: 12px; font-size: .7rem; }
  .membership-hero .breadcrumbs { margin-bottom: 20px; }
  .branch-nav { grid-template-columns: 1fr; gap: 10px; }
  .branch-nav .branch-option { min-height: 94px; padding: 10px; gap: 14px; }
  .branch-option > img { width: 70px; height: 70px; }
  .branch-nav .branch-option-copy { padding-right: 22px; }
  .branch-tools { align-items: flex-start; flex-direction: column; gap: 0; }
  .plan-type-filters { flex-wrap: wrap; }
  .whatsapp-dock .floating-wa { padding: 0 14px; }
  .whatsapp-dock .floating-wa > span { display: none; }
  .contact-card > .contact-photo { height: 180px; }
}
@media (max-width: 520px) {
  .membership-hero .flow-steps { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .whatsapp-dock { right: 14px; bottom: 14px; }
  .cookie-banner { left: 12px; bottom: 80px; width: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media print {
  .whatsapp-dock, .hero-media, .membership-hero > video, .membership-hero-shade { display: none; }
  .cinematic-hero, .membership-hero { background: white; color: black; }
}
.story-film { position: relative; }
@media (max-width: 720px) { .cookie-banner { left: 12px; bottom: 80px; width: calc(100% - 24px); } }

/* V7 refined shell: the home video reaches the top edge. */
.brand-copy { min-width: 0; }
.brand-copy [data-brand-motto] { display: block; max-width: 37ch; white-space: normal; line-height: 1.45; }
/* Clear the shared white wrapper too: otherwise translucent navigation turns silver. */
body[data-page="inicio"]:not(.solid-home-header) > :is([data-header],[data-dynamic-header]) { position: fixed; z-index: 1400; inset: 0 0 auto; width: 100%; background: transparent; }
body[data-page="inicio"]:not(.solid-home-header) .site-header { color: #fff; background: transparent; border-color: transparent; box-shadow: none; transition: background-color .25s ease,border-color .25s ease,box-shadow .25s ease; }
body[data-page="inicio"]:not(.solid-home-header) .site-header.scrolled { background: #0c0d10; border-color: #ffffff14; box-shadow: 0 8px 24px #0003; }
body[data-page="inicio"]:not(.solid-home-header) .site-header .brand-copy span { color: #e7e7e9; }
body[data-page="inicio"]:not(.solid-home-header) .site-header .cart-button { color: #fff; background: #ffffff0d; border-color: #ffffff50; }
body[data-page="inicio"]:not(.solid-home-header) .menu-toggle { color: #fff; }
body[data-page="inicio"]:not(.solid-home-header) .announcement { background: #0c0d10; }
/* A soft shade belongs to the video, so there is no rectangular band below the menu. */
body[data-page="inicio"]:not(.solid-home-header) .cinematic-hero .hero-media::before { display: block; inset: 0 0 auto; z-index: 2; width: 100%; height: clamp(240px,30vh,460px); background: linear-gradient(180deg,rgba(5,6,9,.88),rgba(5,6,9,.58) 42%,rgba(5,6,9,0)); pointer-events: none; }
body[data-page="inicio"]:not(.solid-home-header) .mobile-nav { color: #fff; background: #0c0d10; border-color: #ffffff14; box-shadow: 0 16px 32px #0004; }
body[data-page="inicio"]:not(.solid-home-header) .mobile-nav a:not(.btn):hover { background: #ffffff0d; }
body[data-page="inicio"]:not(.solid-home-header) .mobile-nav a[aria-current="page"] { color: #fff; background: #ed002d24; box-shadow: inset 3px 0 var(--red); }
body[data-page="inicio"]:not(.solid-home-header) .home-hero.cinematic-hero { min-height: 100svh; }
body[data-page="inicio"]:not(.solid-home-header) .cinematic-hero .hero-copy-panel { padding-top: clamp(166px,12vw,270px); padding-bottom: 120px; }
.cinematic-hero .hero-media { background: radial-gradient(ellipse at 75% 25%,#292d32 0,#111316 50%,#08090b 100%); }
.cinematic-hero .hero-title-red { color: #f12a41; text-shadow: 0 2px 35px #0005; }
.cinematic-hero .hero-video-meta { left: var(--gutter); right: var(--gutter); justify-content: flex-start; gap: 20px; }
.video-caption { margin-right: 0; display: grid; gap: 3px; }
.hero-video-meta .video-caption > span { font-size: .65rem; letter-spacing: .12em; }
.video-caption small { font-size: .68rem; letter-spacing: 0; color: #d7d7dd; max-width: 35ch; }
.video-chapters { display: flex; flex-wrap: wrap; max-width: 100%; gap: 6px; }
.video-chapter { position: relative; min-width: 44px; height: 44px; color: #ffffffb5; background: transparent; border: 0; border-bottom: 2px solid #ffffff40; cursor: pointer; font-size: .68rem; font-weight: 700; overflow: hidden; }
.video-chapter::after { content: ""; position: absolute; inset: auto 0 -2px; height: 4px; background: #ff334b; transform-origin: left; transform: scaleX(var(--video-progress,0)); }
.video-chapter[aria-pressed="true"] { color: white; border-bottom-color: #fff; }
.video-chapter:disabled { opacity: .3; text-decoration: line-through; cursor: not-allowed; }
.footer-socials { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 22px; }
.footer-socials a { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; border-bottom: 1px solid #ffffff40; color: #fff; font-size: .78rem; }
.footer-socials a > span { color: #ff4055; }
.footer-socials a:hover { border-color: #ff4055; }
.wa-email { display: block; text-align: center; padding: 12px 0 0; color: #51545e; font-size: .78rem; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }

/* Product photographs keep their full frame; the second view is a preview. */
.product-card { border-radius: 8px; border-color: transparent; }
.product-image { aspect-ratio: 4 / 5; background: #f2f2f0; }
.product-image img { padding: clamp(12px,1.5vw,28px); transition: opacity .3s,transform .45s; }
.product-image .product-back-view { position: absolute; inset: 0; opacity: 0; background: #f2f2f0; }
.product-view-count { position: absolute; right: 12px; bottom: 12px; padding: 5px 10px; border-radius: 40px; background: #fff; color: #26272b; font-size: .66rem; box-shadow: 0 3px 14px #0001; }
.product-name-link { padding: 0; background: transparent; border: 0; text-align: left; font: inherit; font-weight: 700; color: inherit; cursor: pointer; }
.product-name-link:hover { color: var(--red); }
.product-info h3 { min-height: 0; margin-bottom: 9px; font-size: 1.1rem; }
.product-sizes { margin: 0 0 8px; font-size: .72rem; color: #666971; }
.product-row .btn { justify-content: space-between; }
.product-row .btn > span { margin-left: 10px; }
.product-modal { width: min(1240px,calc(100% - 40px)); grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); border-radius: 12px; max-height: calc(100dvh - 40px); }
.modal-copy { padding: clamp(40px,4vw,76px) clamp(24px,3vw,56px); }
.modal-copy > p[data-modal-description] { white-space: pre-line; font-size: .92rem; }
.modal-media { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 0; padding: 22px; background: #f3f3f1; }
.gallery-stage { width: 100%; height: clamp(280px,51svh,680px); overflow: auto; touch-action: pan-y; border-radius: 5px; }
.gallery-stage > img { width: 100%; height: 100%; padding: 12px; max-height: none; object-fit: contain; }
.modal-media.brand-placeholder .gallery-stage > img { width: 100%; height: 100%; padding: 25%; }
.is-zoomed .gallery-stage { touch-action: pan-x pan-y; }
.is-zoomed .gallery-stage > img { width: 180%; height: 180%; max-width: none; object-fit: contain; }
.gallery-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gallery-toolbar > span { margin: 0 auto; text-align: center; font-size: .74rem; color: #5c5e65; }
.gallery-arrow { min-width: 44px; height: 44px; background: transparent; border: 1px solid #d3d4d7; border-radius: 50%; font-size: 1.05rem; cursor: pointer; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.gallery-thumb { aspect-ratio: 4/5; min-width: 0; padding: 3px; border: 1px solid transparent; border-radius: 4px; background: #e9e9e7; cursor: pointer; }
.modal-media .gallery-thumb img { width: 100%; height: 100%; max-height: 95px; object-fit: contain; padding: 0; }
.gallery-thumb[aria-pressed="true"] { border: 2px solid var(--red); background: #fff; }
.gallery-tools { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 8px; }
.gallery-tools button { min-height: 44px; padding: 8px 0; border: 0; background: transparent; font-size: .72rem; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.size-guide { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 24px; }
.size-guide summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding-block: 10px; cursor: pointer; font-size: .88rem; font-weight: 600; }
.size-guide summary::-webkit-details-marker { display: none; }
.size-guide[open] summary > span { rotate: 45deg; }
.size-guide p { font-size: .75rem; }
.size-guide-scroll { overflow: auto; margin-bottom: 16px; }
.size-guide table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.size-guide th,.size-guide td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.size-guide th { color: var(--ink); }
.modal-copy [data-variant-status] { margin: 14px 0 8px; }
.modal-dismiss { position: absolute; z-index: 6; top: 12px; right: 12px; }
.product-modal .modal-dismiss { position: absolute; top: 12px; right: 12px; }

@media (hover:hover) {
  .has-back-view:hover .product-back-view,.has-back-view:focus-visible .product-back-view { opacity: 1; }
}
@media (prefers-reduced-motion:no-preference) {
  .cinematic-hero .hero-copy-inner > .eyebrow { animation: roca-enter .55s ease both; }
  .cinematic-hero .hero-copy-inner > .display { animation: roca-enter .65s .05s ease both; }
  .cinematic-hero .hero-copy-inner > .lede { animation: roca-enter .65s .1s ease both; }
  .cinematic-hero .hero-actions { animation: roca-enter .65s .15s ease both; }
  .filter-button,.plan-filter { transition: background .2s,color .2s,border-color .2s; }
  .product-card:hover { translate: 0 -3px; }
  .product-card { transition: box-shadow .25s,border-color .25s,translate .25s; }
}
@media (min-width: 2300px) { .product-grid { grid-template-columns: repeat(auto-fill,minmax(18rem,1fr)); gap: 28px; } }
@media (max-width: 1250px) and (min-width: 1041px) { .brand-copy [data-brand-motto] { max-width: 29ch; font-size: .6rem; } .header-inner { gap: 14px; } }
@media (max-width: 1040px) { .brand-copy [data-brand-motto] { display: block; } .product-modal { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  body[data-page="inicio"]:not(.solid-home-header) .home-hero.cinematic-hero { min-height: max(740px,100svh); }
  body[data-page="inicio"]:not(.solid-home-header) .cinematic-hero .hero-copy-panel { padding-top: 152px; padding-bottom: clamp(156px,calc(546px - 100vw),226px); }
  .cinematic-hero .hero-video-meta { left: 20px; right: 84px; flex-wrap: wrap; gap: 8px 14px; bottom: 20px; }
  .video-caption { flex-basis: 100%; }
  .video-chapters { margin-right: auto; gap: 3px; }
  .video-chapter { min-width: 30px; }
  .video-controls { gap: 5px; }
  .cinematic-hero .video-controls button { width: 40px; min-width: 40px; }
  .hero-video-meta .video-caption > span { font-size: .59rem; }
  .product-modal { width: calc(100% - 24px); max-height: calc(100dvh - 24px); grid-template-columns: 1fr; }
  .modal-media { height: auto; min-height: 0; padding: 16px; }
  .gallery-stage { height: clamp(270px,45svh,420px); }
  .modal-media .gallery-stage img { max-height: none; }
  .modal-copy { padding: 30px 24px; }
  .gallery-thumbs { gap: 5px; }
  .modal-media .gallery-thumb img { max-height: 75px; }
  .product-info h3 { font-size: .94rem; }
}
@media (max-width: 520px) {
  .site-header .brand { gap: 8px; }
  .site-header .brand img { width: 36px; height: 36px; }
  .site-header .brand-copy strong { font-size: .83rem; }
  .site-header .brand-copy [data-brand-motto] { max-width: 145px; font-size: .58rem; }
  .site-header .header-inner { gap: 8px; min-height: 82px; }
  .site-header .header-actions { gap: 4px; }
  .site-header .cart-button,.site-header .menu-toggle { width: 38px; height: 44px; }
  .footer-brand .brand-copy [data-brand-motto] { max-width: 30ch; }
}
@media (max-width: 359px) { .site-header .brand-copy [data-brand-motto] { max-width: 120px; } }

.site-footer .brand-copy [data-brand-motto] { color: #c5c7ce; }

/* V7.5 · One presentation for the same plan in Home, Memberships and locations. */
.plans-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(20px,1.7vw,44px); align-items: stretch; padding-block: 12px; }
.plan-card, .ink-section .plan-card { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; padding: 0; color: var(--ink); background: #fff; border: 1px solid #dbdce2; border-radius: clamp(22px,2vw,36px); min-height: clamp(440px,32vw,680px); transition: transform .25s,box-shadow .25s,border-color .25s; }
.plan-card-content { position: relative; z-index: 2; display: flex; flex: 1; flex-direction: column; align-items: stretch; padding: clamp(26px,2.5vw,70px); }
.plan-card .plan-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s ease; }
.plan-has-image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,rgba(8,9,12,.68),rgba(8,9,12,.56) 42%,rgba(8,9,12,.9)); }
.plan-card.plan-has-image { color: #fff; background: #0c0d10; border-color: #34353b; }
.plan-card.featured, .ink-section .plan-card.featured { color: white; background: #0d0d10; border-color: #25252a; box-shadow: 0 24px 65px #08090b2e; }

.plan-card-topline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; min-height: 30px; }
.plan-location-label { color: #565962; font-size: clamp(.65rem,.7vw,.85rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
:is(.featured,.plan-has-image) .plan-location-label { color: #c2c2cb; }
.plan-card .badge { border-radius: 99px; font-size: clamp(.62rem,.7vw,.8rem); letter-spacing: .04em; text-transform: uppercase; padding: 8px 13px; }
.plan-card h3 { margin: 24px 0 10px; font-size: clamp(1.2rem,1.65vw,2.1rem); letter-spacing: .045em; text-transform: uppercase; }
.plan-card .plan-subtitle { min-height: 1.6em; margin: 0 0 22px; font-size: clamp(.83rem,.95vw,1.2rem); color: #656973; }
:is(.featured,.plan-has-image) .plan-subtitle { color: #b6b8c0; }
.plan-card .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; margin: 12px 0 32px; line-height: 1; }
.plan-card .price strong { font-size: clamp(3rem,4.8vw,6.5rem); letter-spacing: -.065em; line-height: 1.15; overflow-wrap: anywhere; }
.plan-card .price .plan-currency { align-self: flex-start; padding-top: .7em; font-weight: 800; font-size: clamp(.95rem,1.2vw,1.6rem); color: inherit; }
.plan-card .price .plan-period { color: #656973; font-size: clamp(.85rem,1vw,1.25rem); }
.plan-card:is(.featured,.plan-has-image) .price .plan-period { color: #b6b8c0; }
.plan-card .check-list { width: 100%; gap: 0; margin: 0 0 42px; border-top: 1px solid #cfd0d8; }
.plan-card .check-list li { margin: 0; padding: 17px 0 17px 27px; border-bottom: 1px solid #cfd0d8; color: #272931; font-size: clamp(.88rem,1vw,1.3rem); line-height: 1.6; }
.plan-card .check-list li::before { top: 17px; color: var(--red); }
.plan-card:is(.featured,.plan-has-image) .check-list { border-color: #ffffff26; }
.plan-card:is(.featured,.plan-has-image) .check-list li { color: #f1f1f4; border-color: #ffffff26; }
.plan-card .plan-choose { margin-top: auto; min-height: 56px; padding-inline: 24px; justify-content: center; border-radius: 99px; border-color: #b4b6c0; font-size: clamp(.8rem,.9vw,1.1rem); text-transform: uppercase; letter-spacing: .025em; }
.plan-card .plan-choose span { transition: transform .2s; }
.plan-card:is(.featured,.plan-has-image) .plan-choose { color: #fff; border-color: var(--red); box-shadow: 0 14px 30px #ed002d1c; }
.plan-card.is-selected { border-color: var(--red); box-shadow: 0 0 0 3px #ed002d30; }
@media(hover:hover) { .plan-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }.plan-card:hover .plan-background { transform: scale(1.025); }.plan-choose:hover span { transform: translateX(3px); } }
@media(min-width:1800px) { .plan-card .plan-choose { min-height: 68px; }.plan-card .check-list li { padding-block: 22px; }.plan-card .check-list li::before { top: 22px; } }
@media(max-width:1100px) { .plans-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.plan-card { min-height: 520px; }.plan-card .price strong { font-size: 3.5rem; } }
@media(max-width:640px) { .plans-grid { grid-template-columns: minmax(0,1fr); gap: 22px; }.plan-card, .ink-section .plan-card { min-height: 480px; }.plan-card-content { padding: 28px; }.plan-card .price strong { font-size: clamp(3rem,13vw,4rem); }.plan-card h3 { font-size: 1.35rem; } }

/* Canva artwork is an ordinary, uncropped image; never a faded CSS background. */
.plan-card.plan-poster, .ink-section .plan-card.plan-poster { min-height: 0; align-self: start; }
.plan-poster-image { display: block; width: 100%; height: auto; max-width: 100%; }
.plan-poster-footer { display: grid; gap: 14px; padding: clamp(18px,1.5vw,32px); }
.plan-poster-footer .badge { justify-self: start; }
.plan-image-error { padding: 32px; min-height: 240px; }
.plan-image-error h3 { margin-top: 0; }.plan-card .plan-image-error p { color: inherit; font-size: 1.5rem; font-weight: 700; }
.plan-card [hidden] { display: none !important; }

/* V7 · Roca Club / private weekly programs. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.member-program-entry { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 22px; padding: 28px; border-radius: 20px; color: #fff; background: linear-gradient(120deg,#17171d,#08080b); border-left: 5px solid var(--red); }
.member-program-entry > span { display: grid; gap: 7px; }.member-program-entry small { color: #ff6b80; font-size: .68rem; letter-spacing: .12em; }.member-program-entry strong { font-size: 1.4rem; line-height: 1.3; }.member-program-entry span > span { font-size: .85rem; color: #d0d1d9; }.member-program-entry b { color: #ff284a; font-size: 2.5rem; }
.program-hero { position: relative; isolation: isolate; overflow: hidden; padding: 28px 0 clamp(50px,5vw,100px); color: #fff; background: #101014; }
.program-hero::before { position: absolute; inset: 0; z-index: -2; content: ""; background: linear-gradient(110deg,#0c0d10,#19131a); }
.program-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 90% 120%,#ed002d50,transparent 55%); }
.program-hero .breadcrumbs, .program-hero p { color: #d4d4dd; }.program-hero .eyebrow { color: #ff6b80; }.program-hero .display { max-width: 15ch; }.program-hero .display > span { color: #ff2045; }.program-hero-copy { position: relative; z-index: 1; padding-top: clamp(25px,4vw,65px); }.program-hero-copy p { font-size: clamp(.95rem,1.2vw,1.5rem); margin: 28px 0 0; }.program-hero-mark { position: absolute; right: 2%; bottom: -.22em; color: transparent; -webkit-text-stroke: 1px #ffffff21; font-weight: 800; font-size: clamp(8rem,27vw,54rem); line-height: 1.2; letter-spacing: -.075em; pointer-events: none; }
.program-gate { padding: clamp(28px,4vw,70px); max-width: 880px; margin: auto; border-top: 4px solid var(--red); }.program-gate p { margin: 20px 0 28px; }
.program-toolbar { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-end; padding-bottom: 35px; border-bottom: 1px solid var(--line); }.program-toolbar > label { display: grid; flex: 1 1 280px; max-width: 600px; gap: 8px; font-size: .85rem; font-weight: 600; }.program-toolbar .select { width: 100%; }.program-heading { margin-top: 44px; }.program-heading .lede { margin-top: 20px; }
.program-metadata { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin: 30px 0; padding: 1px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--line); }.program-metadata > div { padding: 22px; background: #fff; min-width: 0; }.program-metadata dt { margin-bottom: 8px; text-transform: uppercase; font-size: .65rem; font-weight: 700; letter-spacing: .09em; color: #686b74; }.program-metadata dd { margin: 0; font-size: clamp(.88rem,1vw,1.2rem); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.program-day-nav { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 10px; margin: 35px 0 28px; }.program-day-nav button { position: relative; display: grid; gap: 12px; min-width: 0; padding: 20px 16px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 14px; text-align: left; cursor: pointer; transition: color .2s,background .2s,transform .2s; }.program-day-nav small { color: var(--red); font-weight: 700; font-size: .7rem; }.program-day-nav span { font-size: clamp(.8rem,1.1vw,1.4rem); font-weight: 700; }.program-day-nav b { font-size: .64rem; font-weight: 500; }.program-day-nav button[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: white; box-shadow: 0 10px 24px #ed002d25; }.program-day-nav button[aria-pressed="true"] small { color: white; }.program-day-nav button:disabled { cursor: default; color: #72747a; background: #ededf0; }
.training-progress { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0 32px; border-bottom: 1px solid var(--line); }.training-progress p { margin: 0; color: var(--ink); font-size: .85rem; font-weight: 600; }.training-progress p.small { margin-top: 5px; font-size: .73rem; font-weight: 400; color: var(--muted); }.training-progress progress { width: min(30%,360px); height: 7px; accent-color: var(--red); border: none; background: #e1e1e5; border-radius: 99px; overflow: hidden; }.training-progress progress::-webkit-progress-bar { background: #e1e1e5; }.training-progress progress::-webkit-progress-value { background: var(--red); }.training-progress progress::-moz-progress-bar { background: var(--red); }
.training-session { padding-top: 40px; }.training-session-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }.training-session-heading .eyebrow { margin-bottom: 12px; }.session-count { flex: none; background: #e4e4e9; padding: 8px 13px; border-radius: 99px; font-size: .75rem; font-weight: 600; }.session-schedule { font-size: .88rem; }
.warmup-note { display: flex; align-items: flex-start; gap: 18px; padding: 22px 25px; background: #fff; border-left: 3px solid var(--red); border-radius: 0 12px 12px 0; margin-bottom: 26px; }.warmup-note > span { color: var(--red); font-size: 1.7rem; line-height: 1.3; }.warmup-note strong { font-size: .9rem; }.warmup-note p { margin: 5px 0 0; font-size: .86rem; }
.exercise-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(16px,1.5vw,36px); }.exercise-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; transition: border-color .2s,box-shadow .2s; }.exercise-card-content { padding: clamp(22px,2vw,48px); }.exercise-card-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 25px; }.exercise-index { font-weight: 800; color: var(--red); font-size: 1.3rem; }.exercise-complete { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: .7rem; color: #646670; cursor: pointer; }.exercise-complete input { width: 20px; height: 20px; accent-color: var(--red); flex: none; }.exercise-card h3 { min-height: 2.8em; margin-bottom: 25px; font-size: clamp(1.15rem,1.4vw,2rem); line-height: 1.4; letter-spacing: -.025em; }.exercise-prescription { display: grid; grid-template-columns: .75fr 1.3fr .9fr; gap: 8px; margin: 0; padding-top: 20px; border-top: 1px solid var(--line); }.exercise-prescription dt { color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-size: .57rem; }.exercise-prescription dd { margin: 7px 0 0; font-size: clamp(1.25rem,1.8vw,2.6rem); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }.exercise-prescription small { font-size: .7rem; font-weight: 400; }.exercise-note { margin: 20px 0 0; font-size: .83rem; line-height: 1.6; }.exercise-card .text-link { margin-top: 14px; font-size: .8rem; }.exercise-card.is-complete { border-color: var(--red); box-shadow: inset 0 3px var(--red); }.exercise-card.is-complete .exercise-complete { color: #b80023; }.exercise-image { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #f5f5f7; border-bottom: 1px solid var(--line); }
@media(max-width:1200px) { .exercise-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.program-day-nav { grid-template-columns: repeat(4,minmax(0,1fr)); }.program-metadata { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) { .exercise-grid { grid-template-columns: minmax(0,1fr); }.program-day-nav { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.program-day-nav button { padding: 14px; gap: 6px; }.program-day-nav span { font-size: .9rem; }.program-metadata > div { padding: 16px; }.program-metadata dd { font-size: .8rem; }.training-progress { display: grid; }.training-progress progress { width: 100%; }.training-session-heading { flex-wrap: wrap; }.exercise-card h3 { min-height: 0; }.program-toolbar .hero-actions { width: 100%; }.program-hero .display { font-size: clamp(2.7rem,10vw,4rem); } }
@media(prefers-reduced-motion:reduce) { .plan-card,.plan-card *, .program-day-nav button,.exercise-card { animation: none !important; transition: none !important; transform: none !important; } }
@media print { body[data-page="programas"] { font-size: 11px; }body[data-page="programas"] [data-dynamic-header],body[data-page="programas"] .program-hero,body[data-page="programas"] .site-footer,body[data-page="programas"] .whatsapp-dock,.program-toolbar,.program-day-nav,.training-progress { display: none; }body[data-page="programas"] .section { padding: 0; }body[data-page="programas"] .container { width: 100%; }.exercise-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.exercise-card { break-inside: avoid; }.exercise-card-content { padding: 16px; }.exercise-card h3 { min-height: 0; font-size: 14px; }.exercise-prescription dd { font-size: 17px; }.exercise-complete { display: none; } }