/* ============================================================
   Royal Studios — Styles
   Design tokens are imported first; landing-specific rules live below.
   ============================================================ */

@import url('./tokens/fonts.css');
@import url('./tokens/colors.css');
@import url('./tokens/typography.css');
@import url('./tokens/spacing.css');
@import url('./tokens/effects.css');
@import url('./tokens/base.css');

/* ============================================================
   Royal Studios — Landing styles
   ============================================================ */

    /* ---- Layout primitives ---- */
    .wrap { max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }
    .mono { font: var(--mono-label); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }

    /* ---- Eyebrow (mono, accent rule) ---- */
    .ey { display:inline-flex; align-items:center; gap:10px; font: var(--mono-label); letter-spacing: var(--tracking-eyebrow); text-transform:uppercase; color: var(--indigo-500); padding-bottom:8px; border-bottom:1px solid var(--green-500); }
    .ey::before { content:"▸"; color: var(--green-600); }
    .ey.on-dark { color:#fff; border-color: var(--green-500); }
    .ey.on-dark::before { color: var(--green-400); }

    /* ---- Buttons ---- */
    .btn { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:.1em; text-transform:uppercase; padding:15px 26px; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:background var(--duration-base) var(--ease-mech), color var(--duration-base) var(--ease-mech), border-color var(--duration-base) var(--ease-mech); }
    .btn .ar { font-family:var(--font-mono); font-weight:400; }
    .btn-primary { background:var(--indigo-500); color:#fff; }
    .btn-primary:hover { background:var(--indigo-600); color:#fff; }
    .btn-line { background:transparent; color:var(--indigo-500); border-color:var(--color-border-strong); }
    .btn-line:hover { border-color:var(--indigo-500); color:var(--indigo-600); }
    .btn-accent { background:var(--green-500); color:var(--black); }
    .btn-accent:hover { background:var(--green-400); }
    .btn-ghost-dark { background:transparent; color:#fff; border-color:var(--color-border-dark); }
    .btn-ghost-dark:hover { border-color:var(--green-500); color:var(--green-400); }

    /* ---- Topbar / letterbox ---- */
    .topbar { border-bottom:1px solid var(--color-border); }
    .topbar-in { display:flex; align-items:center; justify-content:space-between; height:34px; color:var(--text-muted); }
    .topbar .dot { color:var(--green-600); }
    .blink { animation: blink 1.4s steps(1) infinite; }
    .sep { color:var(--neutral-300); }

    /* ---- Nav ---- */
    nav { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--color-border); }
    .nav-in { display:flex; align-items:center; justify-content:space-between; height:72px; }
    .brand { display:flex; align-items:center; gap:12px; }
    .brand img { height:46px; }
    .nav-links { display:flex; gap:34px; align-items:center; }
    .nav-links a { color:var(--neutral-600); font:var(--weight-medium) 13px var(--font-body); letter-spacing:.02em; }
    .nav-links a:hover { color:var(--indigo-500); }
    .nav-links .idx { font-family:var(--font-mono); font-size:11px; color:var(--neutral-400); }
    .nav-links a.btn-primary { color:var(--green-400); }
    .nav-links a.btn-primary:hover { color:var(--green-300); background:var(--indigo-600); }

    /* ---- Viewfinder frame ---- */
    .frame { position:relative; overflow:hidden; }
    .frame img.shot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
    .frame .tick { position:absolute; width:18px; height:18px; border:0 solid var(--green-500); z-index:2; }
    .frame .t1{top:10px;left:10px;border-top-width:2px;border-left-width:2px}
    .frame .t2{top:10px;right:10px;border-top-width:2px;border-right-width:2px}
    .frame .t3{bottom:10px;left:10px;border-bottom-width:2px;border-left-width:2px}
    .frame .t4{bottom:10px;right:10px;border-bottom-width:2px;border-right-width:2px}
    .frame .meta{position:absolute;left:0;bottom:0;z-index:2;display:flex;gap:14px;padding:16px;width:100%;justify-content:space-between;font:var(--mono-label);letter-spacing:.16em;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(11,8,32,.6))}

    /* ---- Hero ---- */
    .hero { position:relative; overflow:hidden; background-color:#281d76; background-image:url('/assets/background-gradient.png'); background-size:cover; background-position:center; background-repeat:no-repeat; border-bottom:1px solid var(--indigo-800); }
    .hero .wrap { position:relative; z-index:1; }
    .hero-grid { display:grid; grid-template-columns:1.04fr .96fr; gap:var(--space-9); align-items:center; padding-top:var(--space-9); padding-bottom:var(--space-9); }
    .hero h1 { color:#fff; font-family:var(--font-display); font-stretch:125%; font-weight:800; font-size:clamp(2.6rem,5.6vw,5rem); line-height:1; letter-spacing:-.02em; margin:28px 0 30px; text-transform:uppercase; }
    .hero h1 em { color:var(--green-400); font-style:normal; }
    .hero p.sub { color:rgba(255,255,255,.74); font:var(--body-lg); max-width:40ch; }
    .hero-cta { display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
    .loc { display:inline-flex; align-items:center; gap:10px; margin-top:26px; padding:9px 16px; border:1px solid var(--color-border-dark); font:var(--mono-label); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.8); }
    .loc .pin { color:var(--green-400); }
    .hero-shot { aspect-ratio:4/4.4; border:1px solid var(--color-border-dark); background:linear-gradient(140deg,#33297a,#0d0a26); }

    /* ---- Statbar ---- */
    .specbar { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--color-border-cinema); border-bottom:1px solid var(--color-border-cinema); }
    .specbar div { padding:22px 0 22px var(--space-5); border-left:1px solid var(--color-border-cinema); }
    .specbar div:first-child{ border-left:0; padding-left:0; }
    .specbar .k { display:block; font:var(--mono-label); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); }
    .specbar .v { display:block; margin-top:8px; font-family:var(--font-display); font-stretch:125%; font-weight:700; font-size:26px; color:#fff; }
    .specbar .v span{ color:var(--green-400); }

    /* ---- Section scaffolding ---- */
    section.block { padding-block: var(--section-y); scroll-margin-top: 90px; }
    .block + .block { border-top: 1px solid var(--color-border); }
    .seclabel { display:flex; align-items:baseline; gap:18px; margin-bottom:var(--space-6); }
    .seclabel .idx { font:var(--mono-label); letter-spacing:.16em; color:var(--indigo-400); }
    h2.title { font-family:var(--font-display); font-stretch:125%; font-weight:800; font-size:clamp(2rem,4vw,3.2rem); line-height:1.02; letter-spacing:-.015em; text-transform:uppercase; color:var(--indigo-500); }
    h2.title em{ color:var(--green-600); font-style:normal; }
    .lede { font:var(--body-lg); color:var(--text-body); max-width:58ch; margin-top:18px; }

    /* ---- Intro (01): copy · video · feature blocks ---- */
    .intro-grid { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:var(--space-7); align-items:center; margin-top:var(--space-6); }
    .feat-col { display:grid; gap:14px; align-content:center; }
    .feat-card { position:relative; padding:18px 20px; transition:border-color var(--duration-base) var(--ease-mech), transform var(--duration-base) var(--ease-mech); }
    .feat-card::before { content:""; position:absolute; left:-1px; top:-1px; width:14px; height:14px; border-top:2px solid var(--green-500); border-left:2px solid var(--green-500); opacity:0; transition:opacity var(--duration-base) var(--ease-mech); }
    .feat-card:hover { border-color:var(--color-border-strong); transform:translateY(-2px); }
    .feat-card:hover::before { opacity:1; }
    .feat-card .num { font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; color:var(--green-600); }
    .feat-card h3 { font-family:var(--font-display); font-stretch:112%; font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.01em; color:var(--indigo-500); margin:10px 0 6px; }
    .feat-card p { font:var(--body-sm); color:var(--text-body); margin:0; }
    .video-frame { aspect-ratio:9/16; height:min(68vh,540px); min-width:340px; background:#0d0a26; justify-self:center; }
    .video-frame video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
    .vsound { position:absolute; right:12px; top:12px; z-index:3; display:inline-flex; align-items:center; gap:8px; padding:8px 13px; background:rgba(11,8,32,.5); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.28); color:#fff; font:var(--mono-label); letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:border-color var(--duration-base) var(--ease-mech); }
    .vsound:hover { border-color:var(--green-500); }
    .vsound .dot { width:8px; height:8px; border:1px solid var(--green-400); background:transparent; transition:background var(--duration-base) var(--ease-mech), box-shadow var(--duration-base) var(--ease-mech); }
    .vsound.on .dot { background:var(--green-400); box-shadow:0 0 8px var(--green-400); }

    /* ---- Spaces intro — copy + Lottie illustration on the right ---- */
    .spaces-intro { display:grid; grid-template-columns: 1fr 1fr; gap:var(--space-8); }
    .spaces-illu { justify-self:center; width:100%; max-width:420px; }
    .spaces-illu .lottie { aspect-ratio:1/1; width:100%; filter: hue-rotate(20deg); -webkit-filter: hue-rotate(20deg); }
    .spaces-illu .lottie svg { display:block; }

    /* ---- Spaces — alternating 50/50 ---- */
    .space { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); align-items:center; padding-block:var(--space-7); border-top:1px solid var(--color-border); }
    .space.rev .col-media{ order:2; }
    .sframe { aspect-ratio:4/3; border:1px solid var(--color-border); }
    .sframe.c1{ background:linear-gradient(135deg,#e7e7f2,#c3c2da); }
    .sframe.c2{ background:linear-gradient(135deg,#e6dccb,#c2ab8c); }
    .sframe.c3{ background:linear-gradient(135deg,#2a2160,#0e0b24); }
    .space .kicker { font:var(--mono-label); letter-spacing:.16em; text-transform:uppercase; color:var(--green-600); }
    .space h3.sp { font-family:var(--font-display); font-stretch:125%; font-weight:800; font-size:clamp(1.7rem,3vw,2.4rem); text-transform:uppercase; letter-spacing:-.01em; color:var(--indigo-500); margin:12px 0 14px; }
    .big { font-family:var(--font-display); font-stretch:125%; font-weight:800; font-size:clamp(2.4rem,5vw,4rem); color:var(--indigo-500); line-height:.95; letter-spacing:-.02em; margin:10px 0 0; }
    .big span{ color:var(--green-600); }
    .space p { font:var(--body-base); color:var(--text-body); margin-top:16px; }
    .speclist { list-style:none; padding:18px 0 0; margin:0; display:grid; }
    .speclist li { display:grid; grid-template-columns:26px 1fr; gap:12px; padding:11px 0; border-top:1px solid var(--color-border); font:var(--body-sm); color:var(--text-body); align-items:baseline; }
    .speclist li .n { font-family:var(--font-mono); font-size:11px; color:var(--indigo-400); }
    .subhead { font-family:var(--font-display); font-stretch:112%; font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.02em; color:var(--indigo-500); margin-top:20px; }
    .benelist { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:14px; }
    .benelist li { border-top:1px solid var(--color-border); padding-top:12px; }
    .benelist h4 { font-family:var(--font-display); font-stretch:112%; font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.02em; color:var(--indigo-500); margin:0 0 5px; }
    .benelist p { font:var(--body-sm); color:var(--text-body); margin:0; }

    /* Espacios intro — value blocks */
    .prompt { font:var(--body-base); color:var(--text-body); margin-top:20px; max-width:42ch; }
    .prompt strong { color:var(--indigo-500); font-weight:700; }
    .bene-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7); margin-top:var(--space-6); }
    .bene { border-top:2px solid var(--green-500); padding-top:16px; }
    .bene h3 { font-family:var(--font-display); font-stretch:112%; font-weight:700; font-size:18px; text-transform:uppercase; letter-spacing:.01em; color:var(--indigo-500); margin:0 0 8px; }
    .bene p { font:var(--body-sm); color:var(--text-body); margin:0; }

    /* ---- Services — numbered steps ---- */
    .steps { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--color-border); margin-top:var(--space-8); }
    .step { padding:var(--space-6); border-left:1px solid var(--color-border); }
    .step:first-child{ border-left:0; }
    .step-icon { width:100%; aspect-ratio:16/10; min-height:140px; margin-bottom:8px; filter: hue-rotate(20deg); transition:filter var(--duration-slow,.45s) var(--ease-mech); -webkit-filter: hue-rotate(20deg); }
    .step:hover .step-icon { filter:grayscale(0) hue-rotate(20deg) saturate(1.1); -webkit-filter:grayscale(0) hue-rotate(20deg) saturate(1.1); }
    .step-icon svg { display:block; }
    .step .num { font-family:var(--font-mono); font-size:13px; color:var(--green-600); letter-spacing:.1em; }
    .step h3 { color:var(--indigo-500); font-family:var(--font-display); font-stretch:112%; font-weight:700; font-size:18px; text-transform:uppercase; margin:16px 0 8px; }
    .step p { color:var(--text-body); font:var(--body-sm); }

    /* ---- Gallery intro ---- */
    .gallery-intro { position: relative; z-index: 9;}

    /* ---- Gallery — Swiper coverflow + reactive ambilight ---- */
    .carousel { position:relative; margin-top:var(--space-7); z-index: 0; }
    .carousel-glow { position:absolute; top:-60px; bottom:-60px; left:50%; width:100vw; transform:translateX(-50%); z-index:0; pointer-events:none; }
    .g-layer { position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(74px) saturate(2) brightness(1.06); opacity:0; transform:scale(1.12); transition:opacity .7s var(--ease-mech); will-change:opacity; }
    .g-layer.on { opacity:.82; }
    .rs-swiper { position:relative; z-index:1; padding-block:46px; overflow:hidden; -webkit-tap-highlight-color:transparent; }
    .rs-swiper .swiper-slide { width:min(64vw,620px); height:auto; }
    .cframe { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--neutral-100); }
    .cframe img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .cframe::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 58%, rgba(11,8,32,.5)); }
    .cframe .cap { position:absolute; left:14px; bottom:13px; z-index:3; font:var(--mono-label); letter-spacing:.14em; text-transform:uppercase; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.55); }
    .carousel-nav { position:relative; z-index:2; display:flex; gap:12px; justify-content:center; margin-top:16px; }
    .cbtn { width:54px; height:46px; display:inline-flex; align-items:center; justify-content:center; background:var(--green-500); border:1px solid var(--green-500); color:var(--black); font-family:var(--font-mono); font-size:18px; line-height:1; cursor:pointer; transition:background var(--duration-base) var(--ease-mech), border-color var(--duration-base) var(--ease-mech); }
    .cbtn:hover { background:var(--green-400); border-color:var(--green-400); }
    .cbtn.swiper-button-disabled { opacity:.4; cursor:default; }

    /* ---- Contact — white bg, indigo cards ---- */
    .contact { background:var(--paper); }
    .contact-grid { display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--space-7); margin-top:var(--space-8); align-items:stretch; }
    .fachada { min-height:440px; }
    .cc-col { display:grid; gap:var(--space-5); align-content:start; }
    .cc { display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; padding:var(--space-6); background:var(--indigo-500); color:#fff; }
    .cc-icon { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(21,217,138,.42); color:var(--green-400); background:rgba(255,255,255,.04); }
    .cc-icon svg { width:24px; height:24px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .cc-icon svg circle { fill:currentColor; stroke:none; }
    .cc-icon-whatsapp::before { content:""; width:26px; height:26px; display:block; background:currentColor; mask:url('/assets/icons/whatsapp.png') center/contain no-repeat; -webkit-mask:url('/assets/icons/whatsapp.png') center/contain no-repeat; }
    .cc-content { min-width:0; }
    .cc .k { font:var(--mono-label); letter-spacing:.16em; text-transform:uppercase; color:var(--green-400); }
    .cc h4 { color:rgba(255,255,255,.72); font-family:var(--font-display); font-stretch:112%; font-weight:700; font-size:16px; line-height:1.12; text-transform:uppercase; margin:12px 0 8px; }
    .cc p { color:rgba(255,255,255,.78); font:var(--body-sm); }
    .cc-copy { color:rgba(255,255,255,.68); font:var(--body-sm); }
    .cc a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
    .cc-link { display:inline-block; margin-top:10px; color: white; font-family:var(--font-display); font-stretch:120%; font-weight:500; font-size:18px; line-height:1.08; letter-spacing:-.01em; text-transform:none; word-break:break-word; }
    .cc-link:hover { color:var(--green-400); }

    /* ---- Footer ---- */
    footer { background-color:#281d76; background-image:url('/assets/background-gradient.png'); background-size:cover; background-position:center bottom; background-repeat:no-repeat; border-top:1px solid var(--color-border-cinema); }
    .foot-in { display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); padding-block:var(--space-6); color:rgba(255,255,255,.45); }
    .foot-in .mono{ color:rgba(255,255,255,.72); }
    .foot-copy { white-space:nowrap; }
    .foot-meta { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
    .foot-links { display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:flex-end; }
    .foot-links a { color:rgba(255,255,255,.68); font:var(--mono-label); letter-spacing:.12em; text-transform:uppercase; }
    .foot-links a:hover { color:var(--green-400); }
    .foot-bottom { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
    .lang-switch { display:inline-flex; align-items:center; gap:8px; font:var(--mono-label); letter-spacing:.12em; text-transform:uppercase; }
    .lang-switch a { color:rgba(255,255,255,.5); }
    .lang-switch a:hover { color:var(--green-400); }
    .lang-switch a[aria-current="true"] { color:var(--green-400); }
    .lang-switch .sep { color:rgba(255,255,255,.28); }

    /* ---- Legal pages ---- */
    .legal-main { background:var(--paper); }
    .legal-hero { padding-block:clamp(3.5rem,8vw,7rem); background:#281d76; background-image:url('/assets/background-gradient.png'); background-size:cover; background-position:center; color:#fff; }
    .legal-hero .ey { color:#fff; border-color:var(--green-500); }
    .legal-hero h1 { max-width:12ch; margin-top:24px; color:#fff; font-family:var(--font-display); font-stretch:125%; font-weight:800; font-size:clamp(2.5rem,6vw,5rem); line-height:1; letter-spacing:-.02em; text-transform:uppercase; }
    .legal-hero p { max-width:62ch; margin-top:22px; color:rgba(255,255,255,.74); font:var(--body-lg); }
    .legal-content { padding-block:var(--section-y); }
    .legal-document { max-width:920px; margin-inline:auto; background:#fff; border:1px solid var(--color-border); padding:clamp(1.5rem,4vw,3.5rem); }
    .legal-document section + section { margin-top:var(--space-7); padding-top:var(--space-6); border-top:1px solid var(--color-border); }
    .legal-document h2 { color:var(--indigo-500); font-family:var(--font-display); font-stretch:112%; font-weight:800; font-size:clamp(1.2rem,2.4vw,1.7rem); line-height:1.12; letter-spacing:-.01em; text-transform:uppercase; margin-bottom:14px; }
    .legal-document p,
    .legal-document li { color:var(--text-body); font:var(--body-base); }
    .legal-document p + p,
    .legal-document ul + p,
    .legal-document p + ul { margin-top:14px; }
    .legal-document ul { margin:14px 0 0; padding-left:1.15rem; display:grid; gap:8px; }
    .legal-document a { color:var(--indigo-500); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
    .legal-note { margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--color-border); color:var(--text-muted); font:var(--body-sm); }

    /* ---- 404 ---- */
    .notfound { background:var(--indigo-950); }
    .notfound-frame { position:relative; overflow:hidden; min-height:calc(100vh - 72px); background:#0d0a26; }
    .notfound-shot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform-origin:60% 40%; will-change:transform; animation:rs-kenburns 22s var(--ease-mech) infinite alternate; }
    .notfound-overlay { position:absolute; inset:0; z-index:2; display:flex; align-items:center; background:linear-gradient(90deg, rgba(11,8,32,.9) 0%, rgba(11,8,32,.62) 52%, rgba(11,8,32,.22) 100%); }
    .notfound-inner { max-width:640px; }
    .notfound-code { display:inline-flex; align-items:center; gap:10px; font:var(--mono-label); letter-spacing:.16em; text-transform:uppercase; color:var(--green-400); }
    .notfound-title { color:#fff; font-family:var(--font-display); font-stretch:125%; font-weight:800; font-size:clamp(2.8rem,7vw,5.5rem); line-height:.98; letter-spacing:-.02em; text-transform:uppercase; margin:22px 0 20px; }
    .notfound-title em { color:var(--green-400); font-style:normal; }
    .notfound-copy { color:rgba(255,255,255,.8); font:var(--body-lg); max-width:46ch; }
    .notfound-cta { display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
    @keyframes rs-kenburns { from { transform:scale(1.06); } to { transform:scale(1.2) translate(-2%, -1.5%); } }
    @media (prefers-reduced-motion: reduce) { .notfound-shot { animation:none; transform:scale(1.06); } }

    /* ---- Cookie consent ---- */
    .cookie-banner { position:fixed; left:24px; bottom:24px; z-index:50; width:min(390px, calc(100vw - 32px)); padding:18px; background:rgba(18,14,48,.96); color:#fff; border:1px solid rgba(21,217,138,.28); box-shadow:0 18px 54px rgba(7,6,15,.28); backdrop-filter:blur(10px); opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .25s var(--ease-mech), transform .25s var(--ease-mech); }
    .cookie-banner.is-visible { opacity:1; transform:none; pointer-events:auto; }
    .cookie-banner .cookie-title { color:#fff; font-family:var(--font-display); font-stretch:112%; font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.02em; margin:0 0 8px; }
    .cookie-banner p { color:rgba(255,255,255,.74); font:var(--body-sm); margin:0; }
    .cookie-banner a { color:var(--green-400); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
    .cookie-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
    .cookie-btn { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:10px 14px; border:1px solid rgba(255,255,255,.24); background:transparent; color:#fff; font:var(--mono-label); letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:background var(--duration-base) var(--ease-mech), border-color var(--duration-base) var(--ease-mech), color var(--duration-base) var(--ease-mech); }
    .cookie-btn:hover { border-color:var(--green-400); color:var(--green-400); }
    .cookie-btn.accept { background:var(--green-500); border-color:var(--green-500); color:var(--black); }
    .cookie-btn.accept:hover { background:var(--green-400); border-color:var(--green-400); color:var(--black); }
    .cookie-btn.ghost { background:transparent; border-color:transparent; text-decoration:underline; text-underline-offset:3px; }
    .cookie-categories[hidden], .cookie-actions[hidden] { display:none; }
    .cookie-categories { display:grid; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.14); }
    .cookie-cat { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.82); font:var(--body-sm); cursor:pointer; }
    .cookie-cat input { width:16px; height:16px; accent-color:var(--green-500); }
    .cookie-cat em { color:rgba(255,255,255,.5); font-style:normal; }

    #rs-cookie-manage { background:none; border:0; padding:0; color:rgba(255,255,255,.68); font:var(--mono-label); letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
    #rs-cookie-manage:hover { color:var(--green-400); }

    /* ---- Lock background scroll while the lead modal is open ---- */
    html.rs-no-scroll, html.rs-no-scroll body { overflow:hidden; }

    /* ---- Contact form (inline + popup) ---- */
    .contact-form-wrap { margin-top:var(--space-7); padding:clamp(1.5rem,4vw,3rem); background:var(--indigo-500); }
    .form-title { color:#fff; font-family:var(--font-display); font-stretch:125%; font-weight:800; font-size:clamp(1.5rem,2.6vw,2rem); text-transform:uppercase; letter-spacing:-.01em; margin:16px 0 8px; }
    .form-copy { color:rgba(255,255,255,.74); font:var(--body-base); margin-bottom:var(--space-6); }
    .rs-form { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-5); }
    .field { display:grid; gap:8px; }
    .field label { color:var(--green-400); font:var(--mono-label); letter-spacing:.14em; text-transform:uppercase; }
    .field input, .field textarea { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.24); color:#fff; padding:13px 14px; font:var(--body-base); transition:border-color var(--duration-base) var(--ease-mech); }
    .field input::placeholder, .field textarea::placeholder { color:rgba(255,255,255,.4); }
    .field input:focus, .field textarea:focus { outline:none; border-color:var(--green-500); }
    .field input.is-invalid, .field textarea.is-invalid { border-color:var(--danger); }
    .field textarea { width:100%; min-height:110px; resize:vertical; }
    .field-wide { grid-column:1 / -1; }
    .field-hp { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; left:-9999px; }
    .field-check { grid-column:1 / -1; display:flex; align-items:flex-start; gap:10px; color:rgba(255,255,255,.78); font:var(--body-sm); cursor:pointer; }
    .field-check input { margin-top:3px; width:16px; height:16px; flex:none; accent-color:var(--green-500); }
    .field-check a { color:var(--green-400); text-decoration:underline; text-underline-offset:3px; }
    .rs-form-actions { grid-column:1 / -1; display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:6px; }
    .form-msg { color:rgba(255,255,255,.72); font:var(--body-sm); margin:0; min-height:1.2em; }

    /* ---- Lead popup (modal) ---- */
    .lead-modal { position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .25s var(--ease-mech); }
    .lead-modal.is-open { opacity:1; pointer-events:auto; }
    .lead-modal-backdrop { position:absolute; inset:0; background:rgba(7,6,15,.72); backdrop-filter:blur(4px); }
    .lead-modal-dialog { position:relative; z-index:1; width:min(640px, 100%); max-height:calc(100vh - 48px); overflow-y:auto; background:var(--indigo-500); padding:clamp(1.5rem,4vw,3rem); transform:translateY(16px); transition:transform .25s var(--ease-mech); }
    .lead-modal.is-open .lead-modal-dialog { transform:none; }
    .lead-modal-close { position:absolute; top:16px; right:16px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid rgba(255,255,255,.24); color:#fff; cursor:pointer; transition:border-color var(--duration-base) var(--ease-mech), color var(--duration-base) var(--ease-mech); }
    .lead-modal-close:hover { border-color:var(--green-500); color:var(--green-400); }

    /* ---- Back-to-top ---- */
    .btt { position:fixed; right:24px; bottom:24px; z-index:40; width:50px; height:50px; display:inline-flex; align-items:center; justify-content:center; background:var(--indigo-500); color:var(--green-400); border:1px solid var(--indigo-500); font-family:var(--font-mono); font-size:18px; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .3s var(--ease-mech), transform .3s var(--ease-mech), background var(--duration-base) var(--ease-mech), color var(--duration-base) var(--ease-mech); }
    .btt:hover { background:var(--indigo-600); color:var(--green-300); }
    .btt.is-visible { opacity:1; transform:none; pointer-events:auto; }

    /* ---- Accessibility: skip link + visible keyboard focus ---- */
    .skip { position:fixed; left:12px; top:12px; z-index:60; background:var(--indigo-500); color:#fff; padding:10px 16px; font:var(--mono-label); letter-spacing:.1em; text-transform:uppercase; transform:translateY(-160%); transition:transform .2s var(--ease-mech); }
    .skip:focus { transform:none; }
    a:focus-visible, button:focus-visible { outline:2px solid var(--green-500); outline-offset:2px; }
    #contenido:focus { outline:none; }

  @keyframes blink { 50%{ opacity:.25; } }

    /* ============================================================
       Responsive — mobile-first overrides (the layout above is the
       wide-desktop baseline; these queries adapt it downwards).
       ============================================================ */

    /* ---- Tablet (≤1024px): collapse the widest grids ---- */
    @media (max-width: 1024px) {
      .intro-grid { grid-template-columns: 1fr; gap: var(--space-7); }
      .video-frame { justify-self: center; }
      .feat-col { grid-template-columns: repeat(3, 1fr); gap: 14px; }

      .steps { grid-template-columns: repeat(2, 1fr); }
      .step { border-top: 1px solid var(--color-border); }
      .step:nth-child(odd) { border-left: 0; }
      .step:nth-child(1), .step:nth-child(2) { border-top: 0; }

      .hero-grid { gap: var(--space-7); }
    }

    /* loc has a full + short variant; short is desktop-hidden by default */
    .loc-short { display: none; }

    /* ---- Mobile (≤768px): single-column stack ---- */
    @media (max-width: 768px) {
      /* Topbar is decorative chrome — drop it on phones */
      .topbar { display: none; }

      /* Nav: keep only the reserve CTA, navigation by scroll */
      .nav-links .idx,
      .nav-links a:not(.btn-primary) { display: none; }
      .nav-in { height: 60px; }
      .brand img { height: 38px; }
      nav .btn-primary { padding: 12px 18px; }
      section.block { scroll-margin-top: 70px; }

      /* Hero: stack copy over media; CTAs hidden (nav CTA + scroll covers it) */
      .hero-cta { display: none; }
      .hero-grid { grid-template-columns: 1fr; padding-top: var(--space-7); padding-bottom: var(--space-7); }
      .hero h1 { margin: 22px 0 22px; }
      .hero-shot { aspect-ratio: 4/3.2; }

      /* Specbar: 2×2; values pinned to the bottom so a 2-line label
         (e.g. "Sets en un mismo espacio") doesn't shove its number out of line */
      .specbar { grid-template-columns: repeat(2, 1fr); }
      .specbar div { padding: 18px 0 18px var(--space-4); display: flex; flex-direction: column; }
      .specbar .v { margin-top: auto; }
      .specbar div:nth-child(odd) { border-left: 0; padding-left: 0; }
      .specbar div:nth-child(n+3) { border-top: 1px solid var(--color-border-cinema); }

      /* Intro features back to a single column under the video */
      .feat-col { grid-template-columns: 1fr; }
      .video-frame { min-width: 0; width: min(78vw, 300px); height: auto; }

      /* Spaces intro: stack, illustration centred under the copy */
      .spaces-intro { grid-template-columns: 1fr; gap: var(--space-6); }
      .spaces-illu { justify-self: center; max-width: 320px; }

      /* Spaces: stack, media always first */
      .space { grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-6); }
      .space.rev .col-media { order: 0; }

      /* Services & value blocks: single column */
      .steps { grid-template-columns: 1fr; }
      .step { border-left: 0; }
      .step:nth-child(1) { border-top: 0; }
      .step:nth-child(n+2) { border-top: 1px solid var(--color-border); }
      .bene-grid { grid-template-columns: 1fr; }

      /* Gallery: wider single slide, comfortable tap targets */
      .rs-swiper .swiper-slide { width: 82vw; }
      .cbtn { width: 56px; height: 48px; }

      /* Contact: stack, shorter facade */
      .contact-grid { grid-template-columns: 1fr; }
      .fachada { min-height: 280px; }
      .rs-form { grid-template-columns: 1fr; }
      .lead-modal { padding: 12px; }

      /* Footer */
      .foot-in { flex-direction: column; gap: 14px; text-align: center; }
      .foot-meta { align-items: center; }
      .foot-links { justify-content: center; }
      .foot-copy { font-size:10px; letter-spacing:.08em; line-height:1.2; }
      .cookie-banner { left:16px; right:16px; bottom:16px; width:auto; }

      /* Back-to-top out of thumb's way */
      .btt { right: 16px; bottom: 16px; width: 46px; height: 46px; }
    }

    /* ---- Small phones (≤480px): tighten type & chrome ---- */
    @media (max-width: 480px) {
      /* Location chip: shorter copy so it stays on one line */
      .loc-full { display: none; }
      .loc-short { display: inline; }

      /* Frame caption: keep only the left label, drop the technical readout */
      .frame .meta span:nth-child(2) { display: none; }

      .specbar .v { font-size: 22px; }
      .frame .meta { padding: 12px; gap: 8px; }
      .seclabel { gap: 12px; }
      .foot-copy { font-size:9px; letter-spacing:.04em; }
    }

    /* ---- Guard against accidental horizontal scroll ---- */
    @media (max-width: 1024px) {
      body { overflow-x: clip; }
    }

  /* Motion (GSAP): initial states; JS reveals them. Active only with .rs-anim. */
  .rs-anim .hero .ey,
  .rs-anim .hero h1,
  .rs-anim .hero p.sub,
  .rs-anim .hero .loc,
  .rs-anim .hero .hero-cta,
  .rs-anim .specbar div,
  .rs-anim .seclabel,
  .rs-anim .block .ey,
  .rs-anim h2.title,
  .rs-anim .lede,
  .rs-anim .feat-card,
  .rs-anim .bene,
  .rs-anim .step,
  .rs-anim .cc,
  .rs-anim .fachada,
  .rs-anim .carousel,
  .rs-anim .video-frame,
  .rs-anim .spaces-illu,
  .rs-anim .space > div { opacity:0; transform:translateY(26px); }
  .rs-anim .hero .hero-shot { opacity:0; transform:translateX(40px); }