/* ==========================================================================
   Murdok London — pre-opening landing
   Ported from reference/MurdokLondon_Preapertura_Actualizada.html.

   Mobile-first. Unprefixed rules are the phone layout; each breakpoint block
   only adds or overrides what changes from that width up.

   | Name | Media query                 | Use                         |
   |------|-----------------------------|-----------------------------|
   | base | (none)                      | mobile                      |
   | sm   | @media (min-width: 640px)   | large phone / small tablet  |
   | md   | @media (min-width: 768px)   | tablet                      |
   | lg   | @media (min-width: 1024px)  | laptop                      |
   | xl   | @media (min-width: 1280px)  | desktop                     |

   To add a responsive rule, write the mobile value in the base section and the
   override inside the block of the smallest breakpoint where it changes, under
   the same section comment. Blocks stay in order base → sm → md → lg → xl, then
   the motion-preference queries.
   ========================================================================== */

/* ---------- Fonts (self-hosted variable fonts, fontsource latin subset) ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   base — mobile (no media query)
   ========================================================================== */

/* ---------- Global ---------- */
/* Class-level display rules must not defeat the hidden attribute. */
[hidden] { display: none !important; }
body { margin: 0; background: #F5F1EB; }
a { color: #654336; }
a:hover { color: #39180F; }
summary::-webkit-details-marker { display: none; }
:focus-visible { outline: 2px solid #8F6B5A; outline-offset: 3px; }

@keyframes ml-rotate { to { transform: rotate(360deg); } }
@keyframes ml-rise { from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: 0 0; } }
@keyframes ml-halo { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes ml-sheen { 0%, 55% { transform: translateX(0); } 100% { transform: translateX(475%); } }

/* ---------- Shared ---------- */
.ml-root { font-family: 'Hanken Grotesk', 'Helvetica Neue', sans-serif; color: #1C1A19; background: #F5F1EB; width: 100%; }
.abs-fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.m0 { margin: 0; }

.h2 { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 600; letter-spacing: -0.02em; font-size: clamp(38px, 4.8vw, 66px); line-height: 1.02; color: #1C1A19; }
.h2--narrow { max-width: 12ch; }

.eyebrow { margin: 0; display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #654336; }
.eyebrow--light { color: #EAC5A4; }
.eyebrow--wide { letter-spacing: 0.22em; }

.body-text { margin: 0; font-size: 17px; line-height: 1.6; max-width: 62ch; color: #4A4644; }

/* Ornament: line · diamond · line */
.orn { display: flex; align-items: center; gap: 10px; }
.orn-line { width: 48px; height: 1px; background: #C9A962; }
.orn-dia { width: 6px; height: 6px; transform: rotate(45deg); background: #C9A962; }
.orn--card .orn-line { width: 40px; background: #8F6B5A; }
.orn--card .orn-dia { background: #8F6B5A; }

/* Plaque CTA (link) */
.plaque { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 340px; max-width: 100%; height: 64px; box-sizing: border-box; padding: 0 32px; text-decoration: none; color: #FBF9F6; font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.plaque-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
.plaque-label { position: relative; }
.ml-plaque { transition: color .3s ease, transform .25s ease; }
.ml-plaque .ml-plaque-fill { fill: rgba(234,197,164,0); transition: fill .3s ease; }
.ml-plaque:hover { color: #1C1A19; transform: translateY(-2px); }
.ml-plaque:hover .ml-plaque-fill { fill: #EAC5A4; }

/* Text links */
.ml-link { text-decoration: none; transition: color .25s ease; }
.ml-link:hover { color: #8F6B5A; }

/* Entrance and scroll-reveal animations */
.ml-load { animation: ml-rise 1.1s cubic-bezier(.2,.7,.2,1) both; }
.ml-d1 { animation-delay: .1s; }
.ml-d2 { animation-delay: .3s; }
.ml-d3 { animation-delay: .5s; }
.ml-d4 { animation-delay: .7s; }
@supports (animation-timeline: view()) {
  .ml-reveal { animation: ml-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
}

/* ---------- Hero ---------- */
.m-hero { position: relative; overflow: hidden; min-height: auto; box-sizing: border-box; padding: 40px clamp(20px, 3vw, 40px) 32px; display: flex; flex-direction: column; justify-content: flex-start; gap: 40px; background: #1C1A19 url(/img/hero-poster.webp) center / cover no-repeat; color: #FBF9F6; }
.hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: sepia(0.85) saturate(1.2) hue-rotate(-8deg) contrast(1.06) brightness(0.88); opacity: 0; transition: opacity .6s ease; }
.hero-video.is-playing { opacity: 1; }
.hero-overlay { z-index: 0; background: radial-gradient(ellipse at 50% 45%, rgba(74,34,22,0.35) 0%, rgba(57,24,15,0.6) 55%, rgba(36,16,10,0.88) 100%); }
.hero-brand { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.hero-lockup { display: flex; align-items: center; gap: 12px; }
/* Sized by width (48px tall × 219/240) so WebKit never derives width from height in the flex row. */
.hero-logo { width: 43.8px; height: auto; object-fit: contain; display: block; }
.hero-wordmark { font-family: 'Archivo', sans-serif; font-stretch: 120%; font-weight: 600; font-size: 14px; letter-spacing: 4px; }
.m-hero-title { position: relative; z-index: 1; width: 100%; align-self: center; margin-top: auto; display: flex; flex-direction: column; gap: 16px; }
.hero-kicker { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #EAC5A4; text-align: center; }
.hero-h1 { margin: 0; display: flex; flex-direction: column; font-family: 'Archivo', sans-serif; font-stretch: 112%; font-weight: 800; font-size: clamp(44px, 10.5vw, 150px); line-height: 0.84; letter-spacing: -0.04em; text-transform: uppercase; color: #FBF9F6; }
.hero-h1-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.15em; margin-top: 0.14em; }
.hero-h1-small { font-family: "Hanken Grotesk", sans-serif; font-size: 0.32em; font-weight: 500; letter-spacing: 0; line-height: 1; text-transform: none; color: rgb(234, 197, 164); padding-right: 0.2em; }
.hero-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; margin-bottom: auto; padding-bottom: 72px; }
.hero-copy { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 620px; }
.hero-lead { margin: 0; font-size: 18px; line-height: 1.5; color: #FBF9F6; }
.hero-sub { margin: 0; font-size: 16px; line-height: 1.55; color: #DCD7D1; }
.hero-meta { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #DCD7D1; }

/* ---------- Intro (London → Madrid) ---------- */
.sec-intro { position: relative; overflow: hidden; padding: 80px clamp(20px, 4vw, 56px); box-sizing: border-box; }
.m-sello { position: absolute; left: -150px; top: -60px; width: 440px; height: 440px; margin-top: 0; z-index: 0; opacity: 0.1; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.sello-ring { position: absolute; top: 0; left: 0; width: 440px; height: 440px; animation: ml-rotate 40s linear infinite; }
.sello-text { font-family: 'Hanken Grotesk', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 4px; fill: #654336; }
.sello-logo { position: relative; width: 152px; height: auto; display: block; }
.intro-grid { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.m-lmcol { position: relative; flex: 1 1 440px; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.intro-h2 { position: relative; z-index: 1; }
.intro-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding-top: 8px; }
.intro-lead { margin: 0; font-size: 19px; line-height: 1.55; color: #1C1A19; }
.intro-quote { margin: 16px 0 0; padding-top: 24px; border-top: 1px solid #EAC5A4; font-family: 'Archivo', sans-serif; font-weight: 500; letter-spacing: -0.01em; font-size: 31px; line-height: 1.25; color: #39180F; }

/* ---------- Services ---------- */
.sec-light { padding: 80px clamp(20px, 4vw, 56px); box-sizing: border-box; background: #FBF9F6; }
.services-wrap { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 56px; }
.services-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }
.services-head-main { display: flex; flex-direction: column; gap: 24px; max-width: 680px; }
.text-brown { color: #654336; }
.services-intro { max-width: 400px; display: flex; flex-direction: column; gap: 12px; font-size: 17px; line-height: 1.55; color: #4A4644; }
.services-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 32px; }
.service-card { margin-top: 0px; flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.service-media { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #1C1A19; }
.img-warm { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(0.45) saturate(0.9) contrast(1.04); }
.service-frame { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border: 1px solid rgba(212,183,122,0.75); border-radius: 6px; pointer-events: none; }
.service-body { display: flex; flex-direction: column; gap: 10px; }
.service-title { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 22px; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.06em; color: #1C1A19; }
.service-text { margin: 0; font-size: 16px; line-height: 1.55; color: #4A4644; }
.ml-zoom img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.ml-zoom:hover img { transform: scale(1.05); }

/* ---------- The House ---------- */
.m-house { position: relative; overflow: hidden; min-height: auto; padding: 80px clamp(20px, 4vw, 56px); box-sizing: border-box; display: flex; align-items: center; color: #FBF9F6; background-color: #1c1a19; }
.house-bg { object-fit: cover; object-position: 50% 55%; z-index: 0; filter: grayscale(1) contrast(1.08) brightness(0.9); }
.house-overlay { z-index: 0; background: radial-gradient(ellipse at 60% 40%, rgba(28,26,25,0) 30%, rgba(15,14,13,0.55) 100%), linear-gradient(90deg, rgba(20,19,18,0.9) 0%, rgba(28,26,25,0.4) 50%, rgba(28,26,25,0.5) 100%), linear-gradient(0deg, rgba(20,19,18,0.75) 0%, rgba(28,26,25,0) 50%); }
.house-grid { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 48px; }
.house-main { flex: 1 1 440px; min-width: 0; max-width: 720px; display: flex; flex-direction: column; gap: 24px; }
.house-h2 { margin: 0; font-family: 'Archivo', sans-serif; font-stretch: 112%; font-weight: 800; font-size: clamp(36px, 4.6vw, 64px); line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; color: #FBF9F6; max-width: 100%; }
.house-text { margin: 0; font-size: 17px; line-height: 1.6; color: #DCD7D1; max-width: min(631px, 100%); }
.house-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 20px; border-top: 1px solid rgba(201,169,98,0.45); font-size: 13px; line-height: 1.5; color: #DCD7D1; }
.house-meta-strong { color: #FBF9F6; font-weight: 600; }
.house-cards { flex: 0 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.house-card { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 16px; align-items: center; padding: 16px 16px 16px 20px; border-radius: 12px; background: rgba(28,26,25,0.6); border: 1px solid rgba(201,169,98,0.45); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.house-card-text { display: flex; flex-direction: column; gap: 8px; }
.house-card-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #FBF9F6; }
.house-card-sub { margin: 0; font-size: 15px; line-height: 1.45; color: #DCD7D1; }
.house-card-media { position: relative; height: 96px; border-radius: 8px; overflow: hidden; background: #1C1A19; }
.house-card-img { object-fit: cover; object-position: center; filter: grayscale(1) contrast(1.08) brightness(0.9); }
.house-card-img--top { object-position: 70% 30%; }

/* ---------- The London List / The Club ---------- */
.sec-club { position: relative; overflow: hidden; padding: 80px clamp(20px, 4vw, 56px); box-sizing: border-box; background: radial-gradient(ellipse at 50% 42%, #4A2216 0%, #39180F 45%, #24100A 100%); color: #F5F1EB; border-top: 3px double #C9A962; border-bottom: 3px double #C9A962; }
.club-inner { position: relative; max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.club-h2 { margin: 0; max-width: 16ch; font-family: 'Archivo', sans-serif; font-weight: 600; letter-spacing: -0.02em; font-size: clamp(40px, 5.4vw, 76px); line-height: 1.02; color: #FBF9F6; }
.club-intro { max-width: 58ch; display: flex; flex-direction: column; gap: 12px; font-size: 18px; line-height: 1.6; color: #DCD7D1; }
.strong-white { color: #FBF9F6; }
.strong-gold { color: #EAC5A4; }
.card-stage { position: relative; width: 100%; max-width: 580px; margin: 48px 0 24px; }
.card-halo { position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(234,197,164,0.28), rgba(234,197,164,0) 60%); animation: ml-halo 7s ease-in-out infinite; pointer-events: none; }
.charter-card { position: relative; container-type: inline-size; aspect-ratio: 560 / 350; border-radius: 14px; overflow: hidden; background: url(/img/paper-texture.webp), linear-gradient(160deg, #F4EEE2 0%, #EADFCB 100%); box-shadow: 0 60px 120px rgba(0,0,0,0.55), 0 18px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.7); color: #39180F; }
.ml-membership { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.charter-svg { filter: drop-shadow(0 1px 0 rgba(255,255,255,0.75)) drop-shadow(0 -1px 0 rgba(101,67,54,0.18)); }
.charter-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12% 16%; }
.charter-brand { margin: 0; font-size: clamp(9px, 1.4vw, 12px); font-weight: 600; letter-spacing: 0.32em; color: #654336; text-shadow: 0 1px 0 rgba(255,255,255,0.75), 0 -1px 0 rgba(57,24,15,0.18); }
/* 13% of the content box (card minus 2 × 16% padding) = 8.84cqw of the card. A % width here
   breaks WebKit: in this column flexbox with % padding it derives a far taller height. 31px: fallback without cqw. */
.charter-logo { width: 31px; width: 8.84cqw; height: auto; object-fit: contain; display: block; filter: drop-shadow(0 1px 0 rgba(255,255,255,0.8)) drop-shadow(0 -1px 0 rgba(57,24,15,0.2)); }
.charter-title { margin: 4px 0 0; font-family: 'Archivo', sans-serif; font-weight: 600; letter-spacing: -0.02em; font-size: clamp(24px, 5.2vw, 46px); line-height: 1; color: #39180F; text-shadow: 0 1px 0 rgba(255,255,255,0.75), 0 -1px 0 rgba(57,24,15,0.18); }
.charter-edition { margin: 0; font-size: clamp(9px, 1.3vw, 11px); font-weight: 600; letter-spacing: 0.28em; color: #654336; text-shadow: 0 1px 0 rgba(255,255,255,0.75), 0 -1px 0 rgba(57,24,15,0.18); }
.charter-sheen { position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%); animation: ml-sheen 7s ease-in-out infinite; pointer-events: none; }
.club-offer { margin: 0; max-width: 52ch; font-size: 18px; line-height: 1.6; color: #F5F1EB; }
.club-tagline { margin: 0; max-width: 40ch; font-family: 'Archivo', sans-serif; font-weight: 500; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.35; color: #EAC5A4; }
.club-block { width: 100%; margin-top: 56px; padding-top: 56px; border-top: 1px solid rgba(201,169,98,0.35); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.club-h3 { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 600; letter-spacing: -0.02em; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; color: #FBF9F6; }
.club-text { margin: 0; max-width: 52ch; font-size: 17px; line-height: 1.6; color: #DCD7D1; }
.benefits { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; text-align: left; margin-top: 16px; }
.benefit { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(201,169,98,0.55); }
.benefit-num { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; color: #C9A962; }
.benefit-text { font-size: 17px; line-height: 1.5; color: #F5F1EB; }
.club-cta { margin-top: 40px; }

/* ---------- Registration ---------- */
.sec-register { position: relative; padding: 80px clamp(20px, 4vw, 56px); box-sizing: border-box; background: #F5F1EB; }
.split { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 64px; }
.split--center { align-items: center; }
.register-main { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.register-text { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.6; color: #4A4644; }
.steps { display: flex; flex-direction: column; max-width: 440px; }
.step { display: flex; gap: 20px; align-items: baseline; padding: 14px 0; border-top: 1px dashed rgba(201,169,98,0.6); }
.step--last { border-bottom: 1px dashed rgba(201,169,98,0.6); }
.step-num { min-width: 28px; font-family: 'Archivo', sans-serif; font-weight: 600; letter-spacing: -0.02em; font-size: 15px; color: #B8975A; }
.step-text { font-size: 16px; line-height: 1.5; color: #1C1A19; }

.m-formcard { position: relative; flex: 1 1 500px; min-width: 0; box-sizing: border-box; padding: 64px 24px 48px; border-radius: 6px; background: linear-gradient(160deg, #FBF9F6 0%, #F1E9DA 100%); border: 1px solid #C9A962; box-shadow: 0 40px 90px rgba(57,24,15,0.14), 0 8px 20px rgba(57,24,15,0.06); }
.formcard-frame { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border: 1px solid rgba(201,169,98,0.6); border-radius: 3px; pointer-events: none; }
.corner { position: absolute; width: 40px; height: 40px; pointer-events: none; }
.corner--tl { top: 14px; left: 14px; transform: none; }
.corner--tr { top: 14px; right: 14px; transform: scaleX(-1); }
.corner--bl { bottom: 14px; left: 14px; transform: scaleY(-1); }
.corner--br { bottom: 14px; right: 14px; transform: scale(-1,-1); }

.form { position: relative; display: flex; flex-direction: column; gap: 24px; }
.form-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.form-kicker { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #654336; }
.form-title { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 600; letter-spacing: -0.02em; font-size: 26px; line-height: 1.1; color: #39180F; }
.form-note { margin: 0; font-size: 13px; color: #4A4644; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #654336; }
.field-input { height: 48px; padding: 0 4px; font-size: 17px; font-family: inherit; border: none; border-bottom: 1px solid #8F6B5A; border-radius: 0; background: transparent; color: #1C1A19; }
.fieldset { margin: 0; padding: 0; border: none; display: flex; flex-direction: column; gap: 10px; }
.legend { padding: 0; margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #654336; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { flex: 1 1 110px; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 14px; box-sizing: border-box; border-radius: 6px; border: 1px solid rgba(28,26,25,0.18); background: transparent; font-size: 15px; font-weight: 600; letter-spacing: 0.06em; color: #1C1A19; cursor: pointer; }
.chip.is-active { border-color: #C9A962; background: rgba(201,169,98,0.14); }
.chip-radio { width: 16px; height: 16px; margin: 0; accent-color: #39180F; }
.ml-chip { transition: border-color .25s ease, background .25s ease; }
/* Same specificity as .chip.is-active: declared after it so hover wins. */
.ml-chip:hover { border-color: #8F6B5A; }
.wa-row { display: flex; align-items: center; border-bottom: 1px solid #8F6B5A; }
.wa-prefix { padding: 0 10px 0 4px; font-size: 17px; color: #654336; }
.wa-input { flex: 1; min-width: 0; height: 48px; padding: 0 4px; font-size: 17px; font-family: inherit; border: none; background: transparent; color: #1C1A19; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 4px; }
.consent-box { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: #39180F; }
.consent-label { font-size: 13px; line-height: 1.55; color: #4A4644; }
.form-error { margin: 0; font-size: 14px; font-weight: 600; color: #39180F; }
.plaque2 { position: relative; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 340px; max-width: 100%; height: 64px; padding: 0 32px; border: none; background: none; cursor: pointer; font-family: inherit; color: #FBF9F6; font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; }
.plaque2:disabled { cursor: progress; opacity: 0.7; }
.ml-plaque2 { transition: color .3s ease, transform .25s ease; }
.ml-plaque2 .ml-plaque2-fill { fill: #39180F; transition: fill .3s ease; }
.ml-plaque2:hover { color: #1C1A19; transform: translateY(-2px); }
.ml-plaque2:hover .ml-plaque2-fill { fill: #C9A962; }
.form-foot { margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; letter-spacing: 0.08em; color: #4A4644; }
.form-foot-dia { width: 5px; height: 5px; transform: rotate(45deg); background: #C9A962; }
/* Spam traps: out of view and out of the flex flow (no extra gap). */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.turnstile-slot { position: absolute; left: 0; bottom: 0; }

.thanks { position: relative; display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; padding: 24px 0; }
.thanks-logo { width: 64px; height: auto; }
.thanks-title { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 600; letter-spacing: -0.02em; font-size: clamp(26px, 3vw, 32px); line-height: 1.1; color: #39180F; }
.thanks-text { margin: 0; max-width: 380px; font-size: 16px; line-height: 1.6; color: #4A4644; }

/* ---------- Follow the opening ---------- */
.follow-main { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.follow-tagline { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 500; letter-spacing: -0.01em; font-size: 20px; color: #39180F; }
.social-list { display: flex; flex-direction: column; border-bottom: 1px solid rgba(28,26,25,0.14); margin-top: 8px; }
.social-row { display: flex; justify-content: space-between; align-items: center; padding: 18px 8px; border-top: 1px solid rgba(28,26,25,0.14); text-decoration: none; font-family: 'Archivo', sans-serif; font-weight: 600; letter-spacing: -0.02em; font-size: 24px; color: #1C1A19; }
/* After .ml-link: both set transition on .social-row and this one wins. */
.ml-row { transition: padding .35s ease; }
.ml-row:hover { padding-left: 16px; }
.social-arrow { font-size: 20px; color: #8F6B5A; }
.follow-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 15px; color: #4A4644; }
.follow-handle { color: #1C1A19; letter-spacing: 0.06em; }
.mosaic { flex: 1 1 440px; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tile { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #1C1A19; }
.tile--paper { background: #F5F1EB; border: 1px solid rgba(28,26,25,0.08); }
.tile--brown { background: #39180F; }
/* height:auto added: the reference img had no height and now carries a height attribute. */
.tile-logo { position: absolute; left: 50%; top: 50%; width: 46%; height: auto; transform: translate(-50%, -50%); }
.tile-quote { position: absolute; left: 14%; right: 14%; top: 50%; transform: translateY(-50%); margin: 0; font-family: 'Archivo', sans-serif; font-weight: 600; letter-spacing: -0.02em; font-size: clamp(14px, 1.4vw, 18px); line-height: 1.2; color: #39180F; }
.tile-label-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.tile-rule { width: 56%; height: 1px; background: #EAC5A4; }
.tile-label { font-size: clamp(10px, 1vw, 13px); font-weight: 600; letter-spacing: 0.24em; color: #EAC5A4; }

/* ---------- FAQ ---------- */
.sec-faq { padding: 80px clamp(20px, 4vw, 56px); box-sizing: border-box; }
.faq-head { flex: 1 1 320px; display: flex; flex-direction: column; gap: 24px; }
.faq-list { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid rgba(28,26,25,0.14); }
.faq-item--last { border-bottom: 1px solid rgba(28,26,25,0.14); }
.faq-q { width: 100%; display: flex; gap: 24px; align-items: baseline; padding: 22px 0; border: none; background: none; cursor: pointer; text-align: left; font-family: inherit; font-size: 18px; font-weight: 600; line-height: 1.4; color: #1C1A19; }
.ml-faq-q:hover { color: #654336; }
.faq-q-text { flex: 1; }
.faq-icon { flex-shrink: 0; align-self: center; width: 14px; height: 14px; position: relative; transition: transform .4s cubic-bezier(.2,.7,.2,1); transform: rotate(0deg); }
.faq-icon-h { position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: #8F6B5A; }
.faq-icon-v { position: absolute; left: 6px; top: 0; width: 1.5px; height: 14px; background: #8F6B5A; }
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1); }
.faq-clip { overflow: hidden; }
.faq-a { padding: 0 40px 24px 0; font-size: 16px; line-height: 1.6; color: #4A4644; opacity: 0; transition: opacity .35s ease; }
.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }
.faq-item.is-open .faq-a { opacity: 1; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }

/* ---------- Footer ---------- */
/* Centered single column on phones; every footer div centers its content. */
.m-foot { padding: 88px clamp(20px, 4vw, 56px) 32px; box-sizing: border-box; background: #1C1A19; color: #DCD7D1; border-top: 3px double #C9A962; text-align: center; }
.foot-inner { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 56px; }
.foot-top { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center; gap: 48px; }
.foot-brand { flex: 1 1 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.foot-logo { width: 240px; height: auto; display: block; margin: 0 auto; }
.foot-tag { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; color: #EAC5A4; }
.foot-claim { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 500; letter-spacing: -0.01em; font-size: 18px; color: #F5F1EB; }
.foot-grid { flex: 2 1 560px; display: grid; grid-template-columns: 1fr; align-items: center; justify-content: center; gap: 32px; }
.foot-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.foot-heading { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; color: #EAC5A4; }
.foot-text { margin: 0; font-size: 15px; line-height: 1.6; }
.foot-mail { font-size: 15px; line-height: 1.6; color: #DCD7D1; overflow-wrap: anywhere; justify-content: center; }
.foot-social { color: inherit; justify-content: center; }
.foot-handle { margin: 0; font-size: 15px; }
.foot-bottom { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(201,169,98,0.45); font-size: 13px; color: #A39C96; }
.foot-policy { font-size: 13px; color: #EAC5A4; justify-content: center; }

/* ---------- Sticky mobile CTA ---------- */
.ml-mobile-cta { display: flex; }
.mobile-cta { position: sticky; bottom: 0; z-index: 5; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; background: rgba(28,26,25,0.92); border-top: 1px solid rgba(234,197,164,0.3); justify-content: center; }

/* ---------- Data policy page (politica-de-datos.html) ---------- */
.legal-header { padding: 32px clamp(20px, 4vw, 56px) 0; display: flex; justify-content: center; }
.legal-home { display: inline-flex; }
.legal-logo { width: 56px; height: auto; display: block; }
.legal-main { max-width: 70ch; margin: 0 auto; padding: 48px clamp(20px, 4vw, 56px) 96px; font-size: 17px; line-height: 1.65; color: #4A4644; }
.legal-main h1 { margin: 12px 0 8px; font-family: 'Archivo', sans-serif; font-weight: 600; letter-spacing: -0.02em; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.05; color: #1C1A19; }
.legal-main h2 { margin: 48px 0 12px; font-family: 'Archivo', sans-serif; font-weight: 600; letter-spacing: -0.01em; font-size: 22px; line-height: 1.25; color: #39180F; }
.legal-main p, .legal-main ul { margin: 0 0 16px; }
.legal-main ul { padding-left: 1.25em; }
.legal-main li { margin-bottom: 8px; }
.legal-main strong { color: #1C1A19; }
.legal-meta { font-size: 14px; color: #654336; }
.legal-mail { overflow-wrap: anywhere; }
.legal-main .orn { margin: 24px 0 8px; }
.legal-foot { padding: 32px clamp(20px, 4vw, 56px); background: #1C1A19; color: #A39C96; border-top: 3px double #C9A962; font-size: 13px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.legal-foot a { color: #EAC5A4; }

/* ---------- Beneficios ---------- */
.ben-root { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.ben-page { position: relative; flex: 1 0 auto; }
.ben-intro { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px clamp(20px, 4vw, 56px) 36px; box-sizing: border-box; text-align: center; background: radial-gradient(ellipse at 50% 42%, #4A2216 0%, #39180F 45%, #24100A 100%); color: #F5F1EB; border-bottom: 3px double #C9A962; }
.ben-home { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 8px; color: #FBF9F6; text-decoration: none; }
.ben-home:hover { color: #EAC5A4; }
/* Sized by width, like .hero-logo: WebKit never derives width from height in the flex row. */
.ben-logo { width: 36.5px; height: auto; object-fit: contain; display: block; }
.ben-title { margin: 0; max-width: 16ch; font-family: 'Archivo', sans-serif; font-weight: 600; letter-spacing: -0.02em; font-size: clamp(34px, 5vw, 60px); line-height: 1.04; color: #FBF9F6; }
.ben-text { margin: 0; max-width: 42ch; font-size: 16px; line-height: 1.55; color: #DCD7D1; }
.ben-main { padding: 24px 16px 48px; }
.ben-card { padding-top: 48px; }
.ben-contact { display: flex; flex-direction: column; gap: 16px; }
.ben-chips .chip { flex-basis: 84px; gap: 8px; padding: 0 8px; }

/* ==========================================================================
   sm — min-width: 640px
   ========================================================================== */
@media (min-width: 640px) {
  /* Hero */
  .m-hero { min-height: 920px; padding-top: 64px; padding-bottom: 40px; }
  .m-hero-title { width: 80%; }

  /* Intro */
  .sec-intro { padding-top: 104px; padding-bottom: 120px; }
  .m-sello { left: -110px; top: 50%; width: 660px; height: 660px; margin-top: -330px; }
  .sello-ring { width: 660px; height: 660px; }
  .sello-logo { width: 228px; }
  .m-lmcol { min-height: 420px; }

  /* Services */
  .sec-light { padding-top: 120px; padding-bottom: 120px; }
  .service-card--offset { margin-top: 72px; }

  /* The House */
  .m-house { min-height: 780px; padding-top: 96px; padding-bottom: 96px; }

  /* The Club */
  .sec-club { padding-top: 140px; padding-bottom: 140px; }
  .ml-membership:hover { transform: perspective(1200px) rotateX(5deg) rotateY(-7deg) translateY(-4px); }

  /* Registration */
  .sec-register { padding-top: 128px; padding-bottom: 128px; }
  .m-formcard { padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px); }
  .corner { width: 64px; height: 64px; }

  /* FAQ */
  .sec-faq { padding-top: 120px; padding-bottom: 120px; }

  /* Footer */
  .m-foot { text-align: start; }
  .foot-inner, .foot-brand, .foot-grid, .foot-col { align-items: normal; justify-content: normal; }
  .foot-top, .foot-bottom { flex-direction: row; align-items: normal; justify-content: space-between; }
  .foot-logo { margin: 0; }
  .foot-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .foot-mail, .foot-social, .foot-policy { justify-content: normal; }

  /* Beneficios */
  .ben-main { padding: 40px clamp(20px, 4vw, 56px) 64px; }
  .ben-card { max-width: 560px; margin: 0 auto; }
}

/* ==========================================================================
   md — min-width: 768px
   ========================================================================== */
@media (min-width: 768px) {
  /* Sticky mobile CTA */
  .ml-mobile-cta { display: none; }
}

/* ==========================================================================
   lg — min-width: 1024px
   ========================================================================== */
@media (min-width: 1024px) {
  /* Beneficios */
  .ben-page { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .ben-intro { justify-content: center; padding: 64px clamp(32px, 4vw, 72px); border-bottom: none; border-right: 3px double #C9A962; }
  .ben-main { display: flex; align-items: center; padding: 64px clamp(32px, 4vw, 72px); }
}

/* ==========================================================================
   xl — min-width: 1280px
   ========================================================================== */
@media (min-width: 1280px) {
  /* Available for desktop-and-up rules. */
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .ml-video { display: none; }
}