/*
 * QUAD Studio — Main CSS (Purified Master Version)
 * Design system completo: 100% Dinámico, Single Source of Truth.
 *
 * ═══════════════════════════════════════════════════════
 * MAPA DE BREAKPOINTS (todos cubiertos, ninguno genérico)
 * ═══════════════════════════════════════════════════════
 * [Tu mapa de dispositivos se mantiene intacto aquí...]
 * ═══════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES — BASE DINÁMICA (WEB 3.0)
═══════════════════════════════════════════════════════ */
:root {
  /* Estas variables son re-escritas por el Master Panel (PHP), aquí actúan de fallback seguro */
  --bg:           #f2f0eb;
  --ink:          #1a1a1a;
  --accent:       #802ed7;
  --f:            'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-heading:    'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-mono:       'DM Mono', monospace;

  /* 
   * CÁLCULO DINÁMICO DE OPACIDADES Y VARIANTES 
   * Mezclamos tu color base con 'transparent' para generar UI de cristal.
   * Si cambias --bg a negro, los menús se vuelven oscuros automáticamente.
   */
  --muted:          color-mix(in srgb, var(--ink) 55%, transparent);
  --line:           color-mix(in srgb, var(--ink) 12%, transparent);
  --line-hover:     color-mix(in srgb, var(--ink) 22%, transparent);
  --accent-soft:    color-mix(in srgb, var(--accent) 15%, transparent);
  
  --pill-bg:        color-mix(in srgb, var(--bg) 45%, transparent);
  --pill-hover:     color-mix(in srgb, var(--bg) 70%, transparent);
  --nav-bg:         color-mix(in srgb, var(--bg) 92%, transparent);
  --nav-pill-bg:    color-mix(in srgb, var(--bg) 55%, transparent);
  --nav-pill-hover: color-mix(in srgb, var(--bg) 85%, transparent);

  /* Elementos Rígidos sobre Imágenes (Siempre deben contrastar, ignoran el tema base) */
  --over-img-text:  #ffffff;
  --over-img-bg:    rgba(0, 0, 0, 0.45);
  --over-img-hover: rgba(0, 0, 0, 0.75);

  /* Configuración Base */
  --ease:           cubic-bezier(.16,1,.3,1);
  --nav-h:          44px;
  --foot-h:         44px;
  --gutter:         12px;
  --radius-card:    0px;
  --dvh:            1dvh;
}

/* ═══════════════════════════════════════════════════════
   RESET & TYPOGRAPHY
═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  height: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

img {
  max-width: 100%;
  height: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: none;
  user-select: none;
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
}

@media (hover: none) {
  body { cursor: auto; }
  #quad-cursor { display: none !important; }
}

/* ═══════════════════════════════════════════════════════
   CUSTOM CURSOR
═══════════════════════════════════════════════════════ */
#quad-cursor {
  position: fixed; top: 0; left: 0;
  width: 10px; height: 10px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%,-50%);
  transition: width .18s var(--ease), height .18s var(--ease),
              background .18s, border-color .18s;
}
#quad-cursor.on {
  width: 32px; height: 32px;
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════
   PILL (base)
═══════════════════════════════════════════════════════ */
.pill {
  display: inline-flex; align-items: center;
  padding: 5px 10px;
  background: var(--pill-bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 10px;
  font-family: var(--f);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .2s, border-color .2s;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-height: 36px;
}
.pill:hover {
  background: var(--pill-hover);
  border-color: var(--line-hover);
}

/* ═══════════════════════════════════════════════════════
   NAV — UNIFICADO
═══════════════════════════════════════════════════════ */
#quad-nav {
  height: var(--nav-h);
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  padding-left:  max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  border-bottom: none;
  pointer-events: none;
}
#quad-nav > * { pointer-events: auto; }

body.home        #quad-app,
body.front-page  #quad-app,
body.single-quad_proyecto #quad-app { padding-top: 0; }

body.page-template-default #quad-app,
body.page-la-marca         #quad-app,
body.page                  #quad-app,
body.single:not(.single-quad_proyecto) #quad-app,
body.archive               #quad-app,
body.search                #quad-app,
body.error404              #quad-app { padding-top: var(--nav-h); }

.nav-left, .nav-right { display: flex; gap: 6px; align-items: center; }

#quad-nav .pill {
  background: var(--nav-pill-bg);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: var(--ink);
  font-weight: 500;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
#quad-nav .pill:hover { background: var(--nav-pill-hover); border-color: var(--line-hover); }
#quad-nav .pill:active { transform: scale(0.97); }

.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown .pill::after {
  content: ' ↓'; font-size: 8px; margin-left: 4px; color: var(--muted); display: inline-block; transition: transform .2s;
}
.nav-dropdown.open .pill::after,
.nav-dropdown:hover .pill::after { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute; top: 100%; left: 0;
  background: var(--nav-bg);
  border: 1px solid var(--line); border-radius: 12px;
  min-width: 160px; flex-direction: column; z-index: 99999;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  padding: 8px 0 6px; display: none; margin-top: 0;
}

.nav-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 8px; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open  .nav-dropdown-menu { display: flex; }

.nav-dropdown-item {
  padding: 8px 14px; font-size: 10px; letter-spacing: .08em; color: var(--ink); cursor: pointer;
  display: flex; align-items: center; gap: 8px; transition: background .15s, color .15s; min-height: 44px;
}
.nav-dropdown-item::before { content: '—'; font-size: 8px; color: var(--accent); }
.nav-dropdown-item:hover { background: var(--pill-bg); color: var(--accent); }

.nav-breadcrumb {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  background: var(--nav-pill-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding: 5px 12px; border-radius: 20px; border: 1px solid var(--line);
}
.nav-breadcrumb span { color: var(--ink); }
.nav-breadcrumb .sep { opacity: .35; }

.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: var(--nav-pill-bg); border: 1px solid var(--line);
  border-radius: 50%; cursor: pointer; padding: 0; touch-action: manipulation;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background .2s ease;
}
.nav-hamburger:hover { background: var(--nav-pill-hover); }
.nav-hamburger span {
  display: block; width: 18px; height: 1.5px; background: var(--ink);
  transition: transform .3s var(--ease), opacity .3s; transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile-drawer {
  position: fixed; inset: var(--nav-h) 0 0 0; background: var(--bg); z-index: 900;
  padding: 32px 20px; padding-bottom: max(32px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; border-top: 1px solid var(--line);
  transform: translateX(-100%); transition: transform .45s var(--ease);
  overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.nav-mobile-drawer.open { transform: translateX(0); }

.nav-mobile-item {
  font-size: 22px; font-family: var(--f-heading); font-weight: 700; letter-spacing: -.01em;
  text-transform: uppercase; padding: 16px 0; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: color .2s; display: flex; align-items: center; gap: 10px; min-height: 56px;
}
.nav-mobile-item::before { content: '—'; font-size: 14px; color: var(--accent); }
.nav-mobile-item:hover { color: var(--accent); }

.nav-mobile-sub { padding-left: 24px; display: flex; flex-direction: column; }
.nav-mobile-sub .nav-mobile-item { font-size: 16px; color: var(--muted); padding: 12px 0; }
.nav-mobile-sub .nav-mobile-item::before { color: var(--muted); }
.nav-mobile-sub .nav-mobile-item:hover { color: var(--accent); }

/* ═══════════════════════════════════════════════════════
   QUAD LOGO FIJO
═══════════════════════════════════════════════════════ */
#quad-logo-fixed {
  position: fixed; bottom: var(--foot-h); left: 50%; transform: translateX(-50%);
  z-index: 600; pointer-events: auto; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: opacity .2s;
}
#quad-logo-fixed:hover { opacity: .6; }
#quad-logo-fixed svg, #quad-logo-fixed img { height: 48px; width: auto; display: block; object-fit: contain; }

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
#quad-footer {
    position: fixed; bottom: 0; left: 0; right: 0; height: var(--foot-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--gutter);
    padding-left:  max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
    padding-bottom: env(safe-area-inset-bottom);
    border-top: none !important; background: transparent !important; z-index: 500;
    opacity: 0; pointer-events: none; transform: translateY(10px);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
}
#quad-footer.visible { 
    opacity: 1 !important; 
    pointer-events: auto !important; 
    transform: translateY(0) !important;
}

/* ═══════════════════════════════════════════════════════
   PAGE COUNTER
═══════════════════════════════════════════════════════ */
#quad-page-counter {
  position: fixed; bottom: 20px; right: var(--gutter); font-size: 9px; color: var(--muted); z-index: 600;
}

/* ═══════════════════════════════════════════════════════
   PRELOADER
═══════════════════════════════════════════════════════ */
#quad-preloader {
  position: fixed; inset: 0; background: var(--ink); z-index: 9999999;
  display: flex; align-items: center; justify-content: center; opacity: 1;
  transition: opacity .7s cubic-bezier(.16,1,.3,1);
}
#quad-preloader.hide { opacity: 0; pointer-events: none; }

#pre-stage { position: relative; display: flex; align-items: center; gap: 0px; }
#pre-logo {
  display: flex; align-items: center; flex-shrink: 0; opacity: 0; transform: translateX(0);
  transition: opacity .55s var(--ease), transform .85s var(--ease), margin-right .85s var(--ease);
}
#pre-logo.show  { opacity: 1; }
#pre-logo.shift { margin-right: 28px; }
#pre-logo svg, #pre-logo img { width: 52px; height: 52px; display: block; object-fit: contain; }

#pre-text {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--bg); line-height: 1.75; width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  transition: opacity .3s ease, width .01s;
}
#pre-text.show { opacity: 1; }
#pre-cursor {
  display: inline-block; width: 1px; height: 1em; background: var(--accent); vertical-align: text-bottom; margin-left: 2px;
  animation: quad-blink .7s step-end infinite;
}
@keyframes quad-blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ═══════════════════════════════════════════════════════
   HOME — FULLSCREEN GRID
═══════════════════════════════════════════════════════ */
#quad-app { display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
#quad-viewport { flex: 1; position: relative; }
#quad-strip    { position: relative; top: 0; left: 0; right: 0; }

#quad-viewport::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(var(--line) 1px, transparent 1px) center / 100% 50%,
              linear-gradient(90deg, var(--line) 1px, transparent 1px) center / 50% 100%;
  background-position: center center;
}

.quad-page {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  height: 100dvh; width: 100%; position: relative;
}

.quad-card {
  position: relative; overflow: hidden; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer;
}
.quad-card:nth-child(2n)                         { border-right: none; }
.quad-card:nth-child(3), .quad-card:nth-child(4) { border-bottom: none; }

.quad-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom right, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + .5px), transparent calc(50% + .5px));
  pointer-events: none; z-index: 1; transition: opacity .35s;
}
.quad-card:hover::before { opacity: 0; }

.quad-card-base-bg { position: absolute; inset: 0; z-index: 0; }
.quad-card .quad-card-img, .quad-card .quad-card-img-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1 !important; z-index: 1;
  transition: opacity 0.5s ease, transform 0.8s ease;
}
.quad-card-bg-blur {
  position: absolute; inset: -20px; background-size: cover; background-position: center;
  filter: blur(25px) grayscale(100%); mix-blend-mode: screen; opacity: 0; z-index: 2; pointer-events: none;
  transition: opacity 0.6s ease-in-out;
}
.quad-card-overlay {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0); z-index: 3; transition: background 0.5s ease;
}
.quad-card:hover .quad-card-img, .quad-card:hover .quad-card-img-bg { opacity: 0.8 !important; }
.quad-card:hover .quad-card-bg-blur { opacity: 0.7 !important; }
.quad-card:hover .quad-card-overlay { background: rgba(0, 0, 0, 0.3); }

.quad-card-num, .quad-card-meta { z-index: 10; position: relative; }
.quad-card-num {
  position: absolute; top: 10px; left: 12px; font-size: 9px; color: var(--muted); z-index: 4; transition: opacity .3s;
}
.quad-card:hover .quad-card-num { opacity: 0; }

.quad-card-meta {
  position: absolute; z-index: 600; display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .4s var(--ease);
  pointer-events: none; align-items: flex-start;
}
.quad-card-meta.active { opacity: 1; transform: translateY(0); }

.quad-card-meta[data-slot="1"] { bottom: calc(50% + 14px); left:  14px; }
.quad-card-meta[data-slot="2"] { bottom: calc(50% + 14px); right: 14px; align-items: flex-end; }
.quad-card-meta[data-slot="3"] { bottom: calc(var(--foot-h) + 24px); left:  14px; }
.quad-card-meta[data-slot="4"] { bottom: calc(var(--foot-h) + 24px); right: 14px; align-items: flex-end; }

/* Etiquetas siempre contrastadas (sobre las fotos) */
.label-client, .label-title, .label-type {
  display: inline-flex; padding: 6px 12px; border-radius: 20px; 
  background: var(--over-img-bg); 
  border: 1px solid rgba(255, 255, 255, 0.15); 
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  white-space: nowrap; letter-spacing: .08em; line-height: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 4px;
}
.label-client { font-size: 9px; color: var(--accent); text-transform: uppercase; filter: brightness(1.5); }
.label-title { font-size: 11px; color: var(--over-img-text); font-weight: 500; }
.label-type { font-size: 9px; color: rgba(255, 255, 255, 0.8); }

.quad-card:hover .label-client, 
.quad-card:hover .label-title, 
.quad-card:hover .label-type {
  background: var(--over-img-hover); border-color: rgba(255, 255, 255, 0.25);
}

/* ═══════════════════════════════════════════════════════
   PÁGINA DE PROYECTO (single-quad_proyecto)
═══════════════════════════════════════════════════════ */
.quad-project-page { min-height: 100dvh; display: flex; flex-direction: column; }
.quad-project-hero { position: relative; width: 100%; height: 70vh; overflow: hidden; background: #000; }
.quad-project-hero-img, .quad-project-hero video, .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
.quad-project-hero-gradient { position: absolute; inset: 0; width: 100%; height: 100%; }
.quad-project-hero-overlay {
  position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.55) 100%); z-index: 1;
}
.quad-project-hero-content { position: absolute; bottom: 40px; left: 40px; z-index: 2; display: flex; flex-direction: column; gap: 10px; }

.quad-project-header {
  padding: 48px 40px 32px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; border-bottom: 1px solid var(--line);
}
.quad-project-title { font-family: var(--f-heading); font-size: clamp(28px, 6vw, 80px); font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; line-height: 1.0; color: var(--ink); }
.quad-project-tagline { font-size: clamp(12px, 1.5vw, 18px); font-family: var(--f-mono); text-transform: none; letter-spacing: .02em; color: var(--muted); margin-top: 16px; max-width: 600px; line-height: 1.6; }
.quad-project-meta-grid { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.quad-project-meta-item { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.quad-project-meta-label { font-size: 8px; color: var(--muted); letter-spacing: .12em; }
.quad-project-meta-value { font-size: 11px; color: var(--ink); letter-spacing: .06em; }

.quad-project-body { padding: 48px 40px 120px; max-width: 900px; }
.quad-project-body p { font-size: 14px; font-family: var(--f-mono); text-transform: none; letter-spacing: .01em; line-height: 1.8; color: var(--ink); margin-bottom: 24px; }

.quad-project-gallery { padding: 0 40px 120px; }
.quad-project-gallery-title { font-size: 9px; letter-spacing: .14em; color: var(--muted); margin-bottom: 24px; text-transform: uppercase; }
.quad-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px; }
.quad-gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; display: block; transition: transform .4s var(--ease), opacity .3s; }
.quad-gallery-grid img:hover { transform: scale(1.02); opacity: .9; }

/* ═══════════════════════════════════════════════════════
   PÁGINA LA MARCA (About)
═══════════════════════════════════════════════════════ */
.quad-marca-page { min-height: 100dvh; display: flex; flex-direction: column; position: relative; }
.logo-float { position: fixed; left: 50%; width: clamp(240px, 42vw, 560px); pointer-events: none; z-index: 0; filter: grayscale(1); will-change: transform; }
.logo-float svg { width: 100%; height: auto; display: block; fill: var(--ink); }
.logo-float:nth-child(1) { opacity: .13; }
.logo-float:nth-child(2) { opacity: .10; }
.logo-float:nth-child(3) { opacity: .12; }
.logo-float:nth-child(4) { opacity: .09; }
.logo-float:nth-child(5) { opacity: .11; }
.logo-float:nth-child(6) { opacity: .08; }

.quad-marca-content { position: relative; z-index: 1; padding: 0 8px 120px; flex: 1; }
.block-text { font-family: var(--f-heading); font-size: clamp(22px, 5.5vw, 72px); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); padding: clamp(32px,7vh,100px) 0 clamp(24px,5vh,80px); }
.section-label { font-family: var(--f-heading); font-size: clamp(18px, 3.5vw, 48px); font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; padding: clamp(20px,4vh,60px) 0 clamp(10px,2vh,28px); line-height: 1.1; }
.contact-list { list-style: none; padding-bottom: clamp(32px,5vh,80px); }
.contact-list li { font-family: var(--f-heading); font-size: clamp(16px, 3vw, 42px); font-weight: 700; line-height: 1.35; letter-spacing: -.01em; text-transform: uppercase; }
.contact-list a { color: var(--ink); transition: color .2s; }
.contact-list a:hover { color: var(--accent); }
.social-big { display: block; font-family: var(--f-heading); font-size: clamp(22px, 5.5vw, 72px); font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; padding: clamp(20px,4vh,60px) 0; color: var(--ink); transition: color .2s; }
.social-big:hover { color: var(--accent); }

/* ═══════════════════════════════════════════════════════
   PÁGINA GENÉRICA (page.php)
═══════════════════════════════════════════════════════ */
.quad-generic-page { min-height: 100dvh; padding: 48px 40px 120px; }
.quad-generic-page h1, .quad-generic-page h2, .quad-generic-page h3 { font-family: var(--f-heading); text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 16px; }
.quad-generic-page p { font-family: var(--f-mono); text-transform: none; letter-spacing: .01em; line-height: 1.8; margin-bottom: 16px; }

/* ═══════════════════════════════════════════════════════
   WP ADMIN BAR OFFSET
═══════════════════════════════════════════════════════ */
.admin-bar #quad-nav { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar #quad-nav { top: 46px; } }

/* ═══════════════════════════════════════════════════════
   SINGLE PROYECTO — HERO FULLBLEED
═══════════════════════════════════════════════════════ */
.quad-single-project { overflow-x: hidden; }
.hero { height: 100dvh; position: relative; overflow: hidden; display: grid; grid-template-rows: 1fr auto; }
.hero-img { position: absolute; inset: 0; transform: scale(1.05); transition: transform 6s var(--ease); }
.hero-img.loaded { transform: scale(1); }
.hero-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.85) 100%); pointer-events: none; }
.hero-bottom { position: relative; z-index: 2; padding: 0 clamp(12px,3vw,40px) clamp(24px,4vh,48px); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.hero-title { font-family: var(--f-heading) !important; font-size: clamp(32px, 8vw, 120px); font-weight: 900; line-height: .88; letter-spacing: -.01em; text-transform: uppercase; color: var(--over-img-text); flex: 1; }
.hero-info { display: flex; flex-direction: column; gap: 0; align-items: flex-end; padding-bottom: 4px; }
.hero-info span { font-family: var(--f-heading) !important; font-size: clamp(14px, 3vw, 22px); font-weight: 900; line-height: .88; letter-spacing: -.01em; text-transform: uppercase; color: var(--over-img-text); display: block; text-align: right; }

/* ═══════════════════════════════════════════════════════
   BLOQUES DE DISPLAY — db-1, db-2, db-3
═══════════════════════════════════════════════════════ */
.db-cell { position: relative; overflow: hidden; height: 100%; }
.db-cell img, .db-cell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.db-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; }

.db-1 { height: 100dvh; border-bottom: 1px solid var(--line); }
.db-2 { height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.db-2 .db-cell { border-right: 1px solid var(--line); }
.db-2 .db-cell:last-child { border-right: none; }

.db-3 { height: 100dvh; display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid var(--line); }
.db-3 .db-cell { border-right: 1px solid var(--line); }
.db-3 .db-cell:last-child { border-right: none; }

/* ── Carrusel ── */
.db-carousel { position: absolute; inset: 0; display: flex; overflow: hidden; }
.db-carousel-track { display: flex; width: 100%; height: 100%; transition: transform .55s var(--ease); }
.db-carousel-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; }
.db-carousel-slide img, .db-carousel-slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
.db-carousel-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 10; }
.db-carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer; transition: background .2s, transform .2s; border: none; padding: 0; min-width: 28px; min-height: 28px; display: flex; align-items: center; justify-content: center; }
.db-carousel-dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: inherit; display: block; }
.db-carousel-dot.active { background: #ffffff; transform: scale(1.3); }

.db-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.28); border: none; color: #ffffff; font-size: 18px; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; opacity: 0; transition: opacity .2s, background .2s; touch-action: manipulation; }
.db-cell:hover .db-carousel-btn { opacity: 1; }
.db-carousel-btn:hover { background: rgba(0,0,0,.55); }
.db-carousel-btn.prev { left: 12px; }
.db-carousel-btn.next { right: 12px; }

@media (hover: none) { .db-carousel-btn { opacity: .7; } }

/* ── Reveal ── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════
   SECCIÓN DESCRIPCIÓN — imagen izq / texto der
═══════════════════════════════════════════════════════ */
.s-desc { display: grid; grid-template-columns: 1fr 1fr; height: 100dvh; border-bottom: 1px solid var(--line); }
.s-desc-media { position: relative; overflow: hidden; border-right: 1px solid var(--line); }
.s-desc-media img, .s-desc-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.s-desc-media-placeholder, .s-desc-media .db-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; }

.s-desc-text { display: flex; align-items: center; justify-content: flex-end; padding: clamp(40px,7vw,100px) clamp(32px,7vw,120px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.s-desc-text-inner { max-width: 420px; width: 100%; }
.s-desc-eyebrow { font-family: var(--f); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 32px; display: block; }
.s-desc-body { font-family: var(--f); font-size: 13px; line-height: 1.9; color: var(--ink); letter-spacing: .01em; text-transform: none; font-weight: 400; }
.s-desc-body p + p { margin-top: 1.6em; }
.s-desc-body p { text-transform: none; letter-spacing: .01em; font-size: 13px; }

/* ═══════════════════════════════════════════════════════
   SECCIÓN SIGUIENTE PROYECTO
═══════════════════════════════════════════════════════ */
.s-next { display: flex; align-items: stretch; border-top: 1px solid var(--line); min-height: clamp(140px, 22vw, 280px); overflow: hidden; cursor: pointer; padding-bottom: calc(var(--foot-h) + 60px); }
.s-next-left { flex: 1; padding: clamp(24px,4vw,52px) clamp(12px,3vw,40px); display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); gap: 16px; }
.s-next-label { font-family: var(--f); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.s-next-title { font-family: var(--f-heading) !important; font-size: clamp(40px, 8vw, 130px); font-weight: 900; text-transform: uppercase; line-height: .88; letter-spacing: -.01em; color: var(--ink); transition: color .2s; display: block; word-break: break-word; overflow-wrap: break-word; }
.s-next:hover .s-next-title { color: var(--accent); }
.s-next-arrow { width: clamp(52px, 9vw, 120px); display: flex; align-items: center; justify-content: center; font-size: clamp(20px, 3vw, 36px); color: var(--ink); transition: background .25s, color .25s; flex-shrink: 0; text-decoration: none; }
.s-next:hover .s-next-arrow { background: var(--ink); color: var(--bg); }

/* ╔═══════════════════════════════════════════════════════╗
   ║                 RESPONSIVE ULTRA COMPLETO             ║
   ╚═══════════════════════════════════════════════════════╝ */

/* [Tus bloques @media query EXACTOS para móviles se mantienen sin alteraciones aquí para no afectar tu estructura, solo limpian herencia de fuentes] */

/* ── iPhone SE 1ª gen — 320 px ── */
@media (max-width: 320px) {
  :root { --nav-h: 48px; --foot-h: 48px; --gutter: 10px; }
  body { font-size: 10px; }
  #pre-logo svg, #pre-logo img { width: 40px; height: 40px; }
  #pre-text { font-size: 9px; }
  .pill { padding: 4px 8px; font-size: 9px; min-height: 34px; }
  .nav-left  { display: none; }
  .nav-right { display: flex; }
  .nav-hamburger { display: flex; }
  .quad-page { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .quad-card { border-right: none !important; border-bottom: none !important; padding: 16px 10px 12px; gap: 14px; flex-direction: column; align-items: center; justify-content: center; display: flex; }
  .quad-card-img-box { width: 100%; flex: 1; position: relative; overflow: hidden; border-radius: 6px; min-height: 0; }
  .quad-card-img-box .quad-card-img, .quad-card-img-box .quad-card-img-bg { position: absolute; inset: 0; opacity: 1; transform: scale(1); width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .quad-label-mobile { display: flex; flex-direction: column; gap: 3px; width: 100%; }
  .lm-title { font-family: var(--f-heading); font-size: 12px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
  .lm-sub   { font-family: var(--f); font-size: 9px; color: var(--muted); letter-spacing: .07em; text-transform: uppercase; }
  #quad-viewport::after { display: none; }
  #quad-logo-fixed  { bottom: calc(var(--foot-h) + 6px); }
  #quad-logo-fixed svg, #quad-logo-fixed img { height: 36px; }
  #quad-page-counter { bottom: calc(var(--foot-h) + 6px); }
  .quad-project-hero { height: 38vh; }
  .quad-project-hero-content { bottom: 14px; left: 14px; }
  .quad-project-header { padding: 20px 14px; grid-template-columns: 1fr; }
  .quad-project-meta-grid { align-items: flex-start; }
  .quad-project-meta-item { align-items: flex-start; }
  .quad-project-body     { padding: 20px 14px 90px; }
  .quad-project-gallery { padding: 0 14px 90px; }
  .quad-gallery-grid    { grid-template-columns: 1fr; }
  .db-1 { height: auto; aspect-ratio: 16 / 9; }
  .db-1 .db-cell { height: 100%; }
  body.single-quad_proyecto .s-desc { grid-template-columns: 1fr 1fr !important; height: auto; }
  body.single-quad_proyecto .s-desc-media { height: 50vw; border-right: 1px solid var(--line); border-bottom: none; }
  body.single-quad_proyecto .s-desc-text  { justify-content: flex-start; padding: 15px 10px; overflow-y: visible; }
  body.single-quad_proyecto .s-desc-body p { font-size: 10px !important; }
  .s-desc-text-inner { max-width: 100%; }
  .s-next-arrow { width: 44px; }
  .hero-title { font-size: clamp(24px, 9vw, 48px); }
  .hero-bottom { padding-bottom: clamp(18px, 3vh, 32px); }
  .block-text   { font-size: clamp(18px, 6vw, 32px); padding: 28px 0 20px; }
  .section-label{ font-size: clamp(14px, 5vw, 24px); }
  .contact-list li { font-size: clamp(14px, 5vw, 24px); }
  .social-big   { font-size: clamp(18px, 6vw, 32px); }
  .nav-mobile-item { font-size: 18px; }
  body.single-quad_proyecto { overflow-x: hidden; }
}

/* ── Galaxy A/S base — 360 px ── */
@media (min-width: 321px) and (max-width: 374px) {
  :root { --nav-h: 48px; --foot-h: 48px; --gutter: 10px; }
  .nav-left        { display: none; }
  .nav-right       { display: flex; }
  .nav-hamburger { display: flex; }
  .quad-page { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .quad-card { border-right: none !important; border-bottom: none !important; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 12px 14px; gap: 16px; }
  .quad-card-img-box { width: 100%; flex: 1; position: relative; overflow: hidden; border-radius: 8px; min-height: 0; }
  .quad-card-img-box .quad-card-img, .quad-card-img-box .quad-card-img-bg { position: absolute; inset: 0; opacity: 1; transform: scale(1); width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .quad-label-mobile { display: flex; flex-direction: column; gap: 4px; width: 100%; }
  .lm-title { font-family: var(--f-heading); font-size: 13px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
  .lm-sub   { font-family: var(--f); font-size: 9px; color: var(--muted); letter-spacing: .08em; }
  #quad-viewport::after { display: none; }
  #quad-logo-fixed { bottom: calc(var(--foot-h) + 8px); }
  #quad-logo-fixed svg, #quad-logo-fixed img { height: 40px; }
  #quad-page-counter { bottom: calc(var(--foot-h) + 8px); }
  .foot-right { display: none; }
  .quad-project-hero { height: 40vh; }
  .quad-project-hero-content { bottom: 16px; left: 16px; }
  .quad-project-header { padding: 22px 16px; grid-template-columns: 1fr; }
  .quad-project-meta-grid { align-items: flex-start; }
  .quad-project-meta-item { align-items: flex-start; }
  .quad-project-body     { padding: 22px 16px 96px; }
  .quad-project-gallery { padding: 0 16px 96px; }
  .quad-gallery-grid    { grid-template-columns: 1fr 1fr; }
  .db-1 { height: auto; aspect-ratio: 16 / 9; }
  .db-1 .db-cell { height: 100%; }
  body.single-quad_proyecto .s-desc { grid-template-columns: 1fr 1fr !important; height: auto; }
  body.single-quad_proyecto .s-desc-media { height: 55vw; border-right: 1px solid var(--line); border-bottom: none; }
  body.single-quad_proyecto .s-desc-text  { justify-content: flex-start; padding: 20px 15px; overflow-y: visible; }
  body.single-quad_proyecto .s-desc-body p { font-size: 11px !important; }
  .s-desc-text-inner { max-width: 100%; }
  .hero-title   { font-size: clamp(26px, 9vw, 52px); }
  .block-text   { font-size: clamp(20px, 6vw, 36px); }
  .section-label{ font-size: clamp(16px, 5vw, 28px); }
  .contact-list li { font-size: clamp(16px, 5vw, 28px); }
  .social-big   { font-size: clamp(20px, 6vw, 36px); }
  body.single-quad_proyecto { overflow-x: hidden; }
}

/* ── iPhone 6/7/8/X/12mini/SE2/SE3 — 375 px ── */
@media (min-width: 375px) and (max-width: 389px) {
  :root { --nav-h: 48px; --foot-h: 48px; --gutter: 12px; }
  .nav-left        { display: none; }
  .nav-right       { display: flex; }
  .nav-hamburger { display: flex; }
  .quad-page { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .quad-card { border-right: none !important; border-bottom: none !important; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 14px 14px; gap: 18px; }
  .quad-card-img-box { width: 100%; flex: 1; position: relative; overflow: hidden; border-radius: 8px; min-height: 0; }
  .quad-card-img-box .quad-card-img, .quad-card-img-box .quad-card-img-bg { position: absolute; inset: 0; opacity: 1; transform: scale(1); width: 100%; height: 100%; object-fit: cover; }
  .quad-label-mobile { display: flex; flex-direction: column; gap: 4px; width: 100%; }
  .lm-title { font-family: var(--f-heading); font-size: 14px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
  .lm-sub   { font-family: var(--f); font-size: 10px; color: var(--muted); letter-spacing: .08em; }
  #quad-viewport::after { display: none; }
  #quad-logo-fixed { bottom: calc(var(--foot-h) + 8px); }
  #quad-page-counter { bottom: calc(var(--foot-h) + 8px); }
  .foot-right { display: none; }
  .quad-project-hero { height: 42vh; }
  .quad-project-hero-content { bottom: 18px; left: 18px; }
  .quad-project-header { padding: 24px 18px; grid-template-columns: 1fr; }
  .quad-project-meta-grid { align-items: flex-start; }
  .quad-project-meta-item { align-items: flex-start; }
  .quad-project-body     { padding: 24px 18px 100px; }
  .quad-project-gallery { padding: 0 18px 100px; }
  .quad-gallery-grid    { grid-template-columns: 1fr 1fr; }
  .db-1 { height: auto; aspect-ratio: 16 / 9; }
  .db-1 .db-cell { height: 100%; }
  body.single-quad_proyecto .s-desc { grid-template-columns: 1fr 1fr !important; height: auto; }
  body.single-quad_proyecto .s-desc-media { height: 56vw; border-right: 1px solid var(--line); border-bottom: none; }
  body.single-quad_proyecto .s-desc-text  { justify-content: flex-start; padding: 25px 15px; overflow-y: visible; }
  body.single-quad_proyecto .s-desc-body p { font-size: 11px !important; }
  .s-desc-text-inner { max-width: 100%; }
  .hero-title   { font-size: clamp(28px, 9.5vw, 56px); }
  .block-text   { font-size: clamp(20px, 5.8vw, 38px); }
  .section-label{ font-size: clamp(17px, 4.5vw, 28px); }
  body.single-quad_proyecto { overflow-x: hidden; }
}

/* ── iPhone 14 / Galaxy S23 — 390 – 392 px ── */
@media (min-width: 390px) and (max-width: 392px) {
  :root { --nav-h: 48px; --foot-h: 48px; --gutter: 12px; }
  .nav-left        { display: none; }
  .nav-right       { display: flex; }
  .nav-hamburger { display: flex; }
  .quad-page { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .quad-card { border-right: none !important; border-bottom: none !important; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 14px 14px; gap: 18px; }
  .quad-card-img-box { width: 100%; flex: 1; position: relative; overflow: hidden; border-radius: 8px; min-height: 0; }
  .quad-card-img-box .quad-card-img, .quad-card-img-box .quad-card-img-bg { position: absolute; inset: 0; opacity: 1; transform: scale(1); width: 100%; height: 100%; object-fit: cover; }
  .quad-label-mobile { display: flex; flex-direction: column; gap: 4px; width: 100%; }
  .lm-title { font-family: var(--f-heading); font-size: 14px; font-weight: 700; text-transform: uppercase; }
  .lm-sub   { font-family: var(--f); font-size: 10px; color: var(--muted); }
  #quad-viewport::after { display: none; }
  #quad-logo-fixed { bottom: calc(var(--foot-h) + 8px); }
  #quad-page-counter { bottom: calc(var(--foot-h) + 8px); }
  .foot-right { display: none; }
  .quad-project-hero { height: 44vh; }
  .quad-project-hero-content { bottom: 18px; left: 18px; }
  .quad-project-header { padding: 26px 20px; grid-template-columns: 1fr; }
  .quad-project-meta-grid { align-items: flex-start; }
  .quad-project-meta-item { align-items: flex-start; }
  .quad-project-body     { padding: 26px 20px 100px; }
  .quad-project-gallery { padding: 0 20px 100px; }
  .quad-gallery-grid    { grid-template-columns: 1fr 1fr; }
  .db-1 { height: auto; aspect-ratio: 16 / 9; }
  .db-1 .db-cell { height: 100%; }
  body.single-quad_proyecto .s-desc { grid-template-columns: 1fr 1fr !important; height: auto; }
  body.single-quad_proyecto .s-desc-media { height: 56vw; border-right: 1px solid var(--line); border-bottom: none; }
  body.single-quad_proyecto .s-desc-text  { justify-content: flex-start; padding: 25px 20px; overflow-y: visible; }
  body.single-quad_proyecto .s-desc-body p { font-size: 11px !important; }
  .s-desc-text-inner { max-width: 100%; }
  body.single-quad_proyecto { overflow-x: hidden; }
}

/* ── iPhone 14 Pro / 15 / 16 — 393 – 401 px ── */
@media (min-width: 393px) and (max-width: 401px) {
  :root { --nav-h: 48px; --foot-h: 48px; --gutter: 14px; }
  .nav-left        { display: none; }
  .nav-right       { display: flex; }
  .nav-hamburger { display: flex; }
  .quad-page { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .quad-card { border-right: none !important; border-bottom: none !important; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 16px 14px; gap: 18px; }
  .quad-card-img-box { width: 100%; flex: 1; position: relative; overflow: hidden; border-radius: 8px; min-height: 0; }
  .quad-card-img-box .quad-card-img, .quad-card-img-box .quad-card-img-bg { position: absolute; inset: 0; opacity: 1; transform: scale(1); width: 100%; height: 100%; object-fit: cover; }
  .quad-label-mobile { display: flex; flex-direction: column; gap: 4px; width: 100%; }
  .lm-title { font-family: var(--f-heading); font-size: 14px; font-weight: 700; text-transform: uppercase; }
  .lm-sub   { font-family: var(--f); font-size: 10px; color: var(--muted); }
  #quad-viewport::after { display: none; }
  #quad-logo-fixed { bottom: calc(var(--foot-h) + 8px); }
  #quad-page-counter { bottom: calc(var(--foot-h) + 8px); }
  .foot-right { display: none; }
  .quad-project-hero { height: 45vh; }
  .quad-project-header { padding: 28px 20px; grid-template-columns: 1fr; }
  .quad-project-meta-grid { align-items: flex-start; }
  .quad-project-meta-item { align-items: flex-start; }
  .quad-project-body     { padding: 28px 20px 100px; }
  .quad-project-gallery { padding: 0 20px 100px; }
  .quad-gallery-grid    { grid-template-columns: 1fr 1fr; }
  .db-1 { height: auto; aspect-ratio: 16 / 9; }
  .db-1 .db-cell { height: 100%; }
  body.single-quad_proyecto .s-desc { grid-template-columns: 1fr 1fr !important; height: auto; }
  body.single-quad_proyecto .s-desc-media { height: 56vw; border-right: 1px solid var(--line); border-bottom: none; }
  body.single-quad_proyecto .s-desc-text  { justify-content: flex-start; padding: 25px 20px; overflow-y: visible; }
  body.single-quad_proyecto .s-desc-body p { font-size: 11px !important; }
  .s-desc-text-inner { max-width: 100%; }
  body.single-quad_proyecto { overflow-x: hidden; }
}

/* ── iPhone 16 Pro — 402 – 411 px ── */
@media (min-width: 402px) and (max-width: 411px) {
  :root { --nav-h: 48px; --foot-h: 48px; --gutter: 14px; }
  .nav-left        { display: none; }
  .nav-right       { display: flex; }
  .nav-hamburger { display: flex; }
  .quad-page { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .quad-card { border-right: none !important; border-bottom: none !important; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 16px 14px; gap: 18px; }
  .quad-card-img-box { width: 100%; flex: 1; position: relative; overflow: hidden; border-radius: 8px; min-height: 0; }
  .quad-card-img-box .quad-card-img, .quad-card-img-box .quad-card-img-bg { position: absolute; inset: 0; opacity: 1; transform: scale(1); width: 100%; height: 100%; object-fit: cover; }
  .quad-label-mobile { display: flex; flex-direction: column; gap: 4px; width: 100%; }
  .lm-title { font-family: var(--f-heading); font-size: 14px; font-weight: 700; text-transform: uppercase; }
  .lm-sub   { font-family: var(--f); font-size: 10px; color: var(--muted); }
  #quad-viewport::after { display: none; }
  #quad-logo-fixed { bottom: calc(var(--foot-h) + 8px); }
  #quad-page-counter { bottom: calc(var(--foot-h) + 8px); }
  .foot-right { display: none; }
  .quad-project-hero { height: 44vh; }
  .quad-project-header { padding: 28px 20px; grid-template-columns: 1fr; }
  .quad-project-meta-grid { align-items: flex-start; }
  .quad-project-meta-item { align-items: flex-start; }
  .quad-project-body     { padding: 28px 20px 100px; }
  .quad-project-gallery { padding: 0 20px 100px; }
  .quad-gallery-grid    { grid-template-columns: 1fr 1fr; }
  .db-1 { height: auto; aspect-ratio: 16 / 9; }
  .db-1 .db-cell { height: 100%; }
  body.single-quad_proyecto .s-desc { grid-template-columns: 1fr 1fr !important; height: auto; }
  body.single-quad_proyecto .s-desc-media { height: 56vw; border-right: 1px solid var(--line); border-bottom: none; }
  body.single-quad_proyecto .s-desc-text  { justify-content: flex-start; padding: 25px 20px; overflow-y: visible; }
  body.single-quad_proyecto .s-desc-body p { font-size: 11px !important; }
  .s-desc-text-inner { max-width: 100%; }
  body.single-quad_proyecto { overflow-x: hidden; }
}

/* ── Galaxy S21/S22/S23+ · Pixel 4-8 — 412 – 413 px ── */
@media (min-width: 412px) and (max-width: 413px) {
  :root { --nav-h: 48px; --foot-h: 48px; --gutter: 14px; }
  .nav-left        { display: none; }
  .nav-right       { display: flex; }
  .nav-hamburger { display: flex; }
  .quad-page { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .quad-card { border-right: none !important; border-bottom: none !important; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 16px 14px; gap: 18px; }
  .quad-card-img-box { width: 100%; flex: 1; position: relative; overflow: hidden; border-radius: 8px; min-height: 0; }
  .quad-card-img-box .quad-card-img, .quad-card-img-box .quad-card-img-bg { position: absolute; inset: 0; opacity: 1; transform: scale(1); width: 100%; height: 100%; object-fit: cover; }
  .quad-label-mobile { display: flex; flex-direction: column; gap: 4px; width: 100%; }
  .lm-title { font-family: var(--f-heading); font-size: 14px; font-weight: 700; text-transform: uppercase; }
  .lm-sub   { font-family: var(--f); font-size: 10px; color: var(--muted); }
  #quad-viewport::after { display: none; }
  #quad-logo-fixed { bottom: calc(var(--foot-h) + 8px); }
  #quad-page-counter { bottom: calc(var(--foot-h) + 8px); }
  .foot-right { display: none; }
  .quad-project-hero { height: 44vh; }
  .quad-project-header { padding: 28px 20px; grid-template-columns: 1fr; }
  .quad-project-meta-grid { align-items: flex-start; }
  .quad-project-meta-item { align-items: flex-start; }
  .quad-project-body     { padding: 28px 20px 100px; }
  .quad-project-gallery { padding: 0 20px 100px; }
  .quad-gallery-grid    { grid-template-columns: 1fr 1fr; }
  .db-1 { height: auto; aspect-ratio: 16 / 9; }
  .db-1 .db-cell { height: 100%; }
  body.single-quad_proyecto .s-desc { grid-template-columns: 1fr 1fr !important; height: auto; }
  body.single-quad_proyecto .s-desc-media { height: 56vw; border-right: 1px solid var(--line); border-bottom: none; }
  body.single-quad_proyecto .s-desc-text  { justify-content: flex-start; padding: 25px 20px; overflow-y: visible; }
  body.single-quad_proyecto .s-desc-body p { font-size: 11px !important; }
  .s-desc-text-inner { max-width: 100%; }
  body.single-quad_proyecto { overflow-x: hidden; }
}

/* ── iPhone 6+/7+/8+/XR/11 · Galaxy S20 FE — 414 – 427 px ── */
@media (min-width: 414px) and (max-width: 427px) {
  :root { --nav-h: 48px; --foot-h: 48px; --gutter: 16px; }
  .nav-left        { display: none; }
  .nav-right       { display: flex; }
  .nav-hamburger { display: flex; }
  .quad-page { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .quad-card { border-right: none !important; border-bottom: none !important; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 16px 14px; gap: 18px; }
  .quad-card-img-box { width: 100%; flex: 1; position: relative; overflow: hidden; border-radius: 8px; min-height: 0; }
  .quad-card-img-box .quad-card-img, .quad-card-img-box .quad-card-img-bg { position: absolute; inset: 0; opacity: 1; transform: scale(1); width: 100%; height: 100%; object-fit: cover; }
  .quad-label-mobile { display: flex; flex-direction: column; gap: 4px; width: 100%; }
  .lm-title { font-family: var(--f-heading); font-size: 14px; font-weight: 700; text-transform: uppercase; }
  .lm-sub   { font-family: var(--f); font-size: 10px; color: var(--muted); }
  #quad-viewport::after { display: none; }
  #quad-logo-fixed { bottom: calc(var(--foot-h) + 8px); }
  #quad-page-counter { bottom: calc(var(--foot-h) + 8px); }
  .foot-right { display: none; }
  .quad-project-hero { height: 44vh; }
  .quad-project-header { padding: 28px 20px; grid-template-columns: 1fr; }
  .quad-project-meta-grid { align-items: flex-start; }
  .quad-project-meta-item { align-items: flex-start; }
  .quad-project-body     { padding: 28px 20px 100px; }
  .quad-project-gallery { padding: 0 20px 100px; }
  .quad-gallery-grid    { grid-template-columns: 1fr 1fr; }
  .db-1 { height: auto; aspect-ratio: 16 / 9; }
  .db-1 .db-cell { height: 100%; }
  body.single-quad_proyecto .s-desc { grid-template-columns: 1fr 1fr !important; height: auto; }
  body.single-quad_proyecto .s-desc-media { height: 56vw; border-right: 1px solid var(--line); border-bottom: none; }
  body.single-quad_proyecto .s-desc-text  { justify-content: flex-start; padding: 25px 20px; overflow-y: visible; }
  body.single-quad_proyecto .s-desc-body p { font-size: 11px !important; }
  .s-desc-text-inner { max-width: 100%; }
  body.single-quad_proyecto { overflow-x: hidden; }
}

/* ── iPhone 12/13 Pro Max · 14 Plus — 428 – 429 px ── */
@media (min-width: 428px) and (max-width: 429px) {
  :root { --nav-h: 48px; --foot-h: 48px; --gutter: 16px; }
  .nav-left        { display: none; }
  .nav-right       { display: flex; }
  .nav-hamburger { display: flex; }
  .quad-page { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .quad-card { border-right: none !important; border-bottom: none !important; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 18px 16px; gap: 20px; }
  .quad-card-img-box { width: 100%; flex: 1; position: relative; overflow: hidden; border-radius: 10px; min-height: 0; }
  .quad-card-img-box .quad-card-img, .quad-card-img-box .quad-card-img-bg { position: absolute; inset: 0; opacity: 1; transform: scale(1); width: 100%; height: 100%; object-fit: cover; }
  .quad-label-mobile { display: flex; flex-direction: column; gap: 4px; width: 100%; }
  .lm-title { font-family: var(--f-heading); font-size: 15px; font-weight: 700; text-transform: uppercase; }
  .lm-sub   { font-family: var(--f); font-size: 10px; color: var(--muted); }
  #quad-viewport::after { display: none; }
  #quad-logo-fixed { bottom: calc(var(--foot-h) + 8px); }
  #quad-page-counter { bottom: calc(var(--foot-h) + 8px); }
  .foot-right { display: none; }
  .quad-project-hero { height: 45vh; }
  .quad-project-header { padding: 28px 20px; grid-template-columns: 1fr; }
  .quad-project-meta-grid { align-items: flex-start; }
  .quad-project-meta-item { align-items: flex-start; }
  .quad-project-body     { padding: 28px 20px 100px; }
  .quad-project-gallery { padding: 0 20px 100px; }
  .quad-gallery-grid    { grid-template-columns: 1fr 1fr; }
  .db-1 { height: auto; aspect-ratio: 16 / 9; }
  .db-1 .db-cell { height: 100%; }
  body.single-quad_proyecto .s-desc { grid-template-columns: 1fr 1fr !important; height: auto; }
  body.single-quad_proyecto .s-desc-media { height: 56vw; border-right: 1px solid var(--line); border-bottom: none; }
  body.single-quad_proyecto .s-desc-text  { justify-content: flex-start; padding: 30px 20px; overflow-y: visible; }
  body.single-quad_proyecto .s-desc-body p { font-size: 11px !important; }
  .s-desc-text-inner { max-width: 100%; }
  body.single-quad_proyecto { overflow-x: hidden; }
}

/* ── iPhone 14/15/16 Pro Max · Galaxy S24+ — 430 – 439 px ── */
@media (min-width: 430px) and (max-width: 439px) {
  :root { --nav-h: 48px; --foot-h: 48px; --gutter: 16px; }
  .nav-left        { display: none; }
  .nav-right       { display: flex; }
  .nav-hamburger { display: flex; }
  .quad-page { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .quad-card { border-right: none !important; border-bottom: none !important; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 18px 16px; gap: 20px; }
  .quad-card-img-box { width: 100%; flex: 1; position: relative; overflow: hidden; border-radius: 10px; min-height: 0; }
  .quad-card-img-box .quad-card-img, .quad-card-img-box .quad-card-img-bg { position: absolute; inset: 0; opacity: 1; transform: scale(1); width: 100%; height: 100%; object-fit: cover; }
  .quad-label-mobile { display: flex; flex-direction: column; gap: 4px; width: 100%; }
  .lm-title { font-family: var(--f-heading); font-size: 15px; font-weight: 700; text-transform: uppercase; }
  .lm-sub   { font-family: var(--f); font-size: 10px; color: var(--muted); }
  #quad-viewport::after { display: none; }
  #quad-logo-fixed { bottom: calc(var(--foot-h) + 8px); }
  #quad-page-counter { bottom: calc(var(--foot-h) + 8px); }
  .foot-right { display: none; }
  .quad-project-hero { height: 45vh; }
  .quad-project-header { padding: 28px 20px; grid-template-columns: 1fr; }
  .quad-project-meta-grid { align-items: flex-start; }
  .quad-project-meta-item { align-items: flex-start; }
  .quad-project-body     { padding: 28px 20px 100px; }
  .quad-project-gallery { padding: 0 20px 100px; }
  .quad-gallery-grid    { grid-template-columns: 1fr 1fr; }
  .db-1 { height: auto; aspect-ratio: 16 / 9; }
  .db-1 .db-cell { height: 100%; }
  body.single-quad_proyecto .s-desc { grid-template-columns: 1fr 1fr !important; height: auto; }
  body.single-quad_proyecto .s-desc-media { height: 56vw; border-right: 1px solid var(--line); border-bottom: none; }
  body.single-quad_proyecto .s-desc-text  { justify-content: flex-start; padding: 30px 20px; overflow-y: visible; }
  body.single-quad_proyecto .s-desc-body p { font-size: 11px !important; }
  .s-desc-text-inner { max-width: 100%; }
  body.single-quad_proyecto { overflow-x: hidden; }
}

/* ── iPhone 16 Pro Max · Galaxy S24 Ultra — 440 – 479 px ── */
@media (min-width: 440px) and (max-width: 479px) {
  :root { --nav-h: 48px; --foot-h: 48px; --gutter: 18px; }
  .nav-left        { display: none; }
  .nav-right       { display: flex; }
  .nav-hamburger { display: flex; }
  .quad-page { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .quad-card { border-right: none !important; border-bottom: none !important; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 18px 16px; gap: 20px; }
  .quad-card-img-box { width: 100%; flex: 1; position: relative; overflow: hidden; border-radius: 10px; min-height: 0; }
  .quad-card-img-box .quad-card-img, .quad-card-img-box .quad-card-img-bg { position: absolute; inset: 0; opacity: 1; transform: scale(1); width: 100%; height: 100%; object-fit: cover; }
  .quad-label-mobile { display: flex; flex-direction: column; gap: 4px; width: 100%; }
  .lm-title { font-family: var(--f-heading); font-size: 15px; font-weight: 700; text-transform: uppercase; }
  .lm-sub   { font-family: var(--f); font-size: 10px; color: var(--muted); }
  #quad-viewport::after { display: none; }
  #quad-logo-fixed { bottom: calc(var(--foot-h) + 8px); }
  #quad-page-counter { bottom: calc(var(--foot-h) + 8px); }
  .foot-right { display: none; }
  .quad-project-hero { height: 45vh; }
  .quad-project-header { padding: 28px 22px; grid-template-columns: 1fr; }
  .quad-project-meta-grid { align-items: flex-start; }
  .quad-project-meta-item { align-items: flex-start; }
  .quad-project-body     { padding: 28px 22px 100px; }
  .quad-project-gallery { padding: 0 22px 100px; }
  .quad-gallery-grid    { grid-template-columns: 1fr 1fr; }
  .db-1 { height: auto; aspect-ratio: 16 / 9; }
  .db-1 .db-cell { height: 100%; }
  body.single-quad_proyecto .s-desc { grid-template-columns: 1fr 1fr !important; height: auto; }
  body.single-quad_proyecto .s-desc-media { height: 56vw; border-right: 1px solid var(--line); border-bottom: none; }
  body.single-quad_proyecto .s-desc-text  { justify-content: flex-start; padding: 30px 20px; overflow-y: visible; }
  body.single-quad_proyecto .s-desc-body p { font-size: 11px !important; }
  .s-desc-text-inner { max-width: 100%; }
  body.single-quad_proyecto { overflow-x: hidden; }
}

/* ── Galaxy Z Flip landscape / large Android — 480 – 539 px ── */
@media (min-width: 480px) and (max-width: 539px) {
  :root { --nav-h: 48px; --foot-h: 48px; --gutter: 18px; }
  .nav-left        { display: none; }
  .nav-right       { display: flex; }
  .nav-hamburger { display: flex; }
  .quad-page { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .quad-card { border-right: 1px solid var(--line) !important; border-bottom: none !important; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 14px 14px; gap: 16px; }
  .quad-card:nth-child(2n) { border-right: none !important; }
  .quad-card-img-box { width: 100%; flex: 1; position: relative; overflow: hidden; border-radius: 8px; min-height: 0; }
  .quad-card-img-box .quad-card-img, .quad-card-img-box .quad-card-img-bg { position: absolute; inset: 0; opacity: 1; transform: scale(1); width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .quad-label-mobile { display: flex; flex-direction: column; gap: 4px; width: 100%; }
  .lm-title { font-family: var(--f-heading); font-size: 13px; font-weight: 700; text-transform: uppercase; }
  .lm-sub   { font-family: var(--f); font-size: 9px; color: var(--muted); }
  #quad-viewport::after { display: none; }
  #quad-logo-fixed { bottom: calc(var(--foot-h) + 8px); }
  #quad-page-counter { bottom: calc(var(--foot-h) + 8px); }
  .foot-right { display: none; }
  .quad-project-hero { height: 40vh; }
  .quad-project-header { padding: 28px 22px; grid-template-columns: 1fr; }
  .quad-project-meta-grid { align-items: flex-start; }
  .quad-project-meta-item { align-items: flex-start; }
  .quad-project-body     { padding: 28px 22px 100px; }
  .quad-project-gallery { padding: 0 22px 100px; }
  .quad-gallery-grid    { grid-template-columns: 1fr 1fr; }
  .db-1 { height: auto; aspect-ratio: 16 / 9; }
  .db-1 .db-cell { height: 100%; }
  body.single-quad_proyecto .s-desc { grid-template-columns: 1fr 1fr !important; height: auto; }
  body.single-quad_proyecto .s-desc-media { height: 40vh; border-right: 1px solid var(--line); border-bottom: none; }
  body.single-quad_proyecto .s-desc-text  { justify-content: flex-start; padding: 25px 20px; overflow-y: visible; }
  body.single-quad_proyecto .s-desc-body p { font-size: 11px !important; }
  .s-desc-text-inner { max-width: 100%; }
  body.single-quad_proyecto { overflow-x: hidden; }
}

/* ── Galaxy Z Fold externo — 540 – 599 px ── */
@media (min-width: 540px) and (max-width: 599px) {
  :root { --nav-h: 48px; --foot-h: 48px; --gutter: 20px; }
  .nav-left        { display: none; }
  .nav-right       { display: flex; }
  .nav-hamburger { display: flex; }
  .quad-page { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .quad-card { border-right: 1px solid var(--line) !important; border-bottom: none !important; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 16px 14px; gap: 16px; }
  .quad-card:nth-child(2n) { border-right: none !important; }
  .quad-card-img-box { width: 100%; flex: 1; position: relative; overflow: hidden; border-radius: 8px; min-height: 0; }
  .quad-card-img-box .quad-card-img, .quad-card-img-box .quad-card-img-bg { position: absolute; inset: 0; opacity: 1; transform: scale(1); width: 100%; height: 100%; object-fit: cover; }
  .quad-label-mobile { display: flex; flex-direction: column; gap: 4px; width: 100%; }
  .lm-title { font-family: var(--f-heading); font-size: 13px; font-weight: 700; text-transform: uppercase; }
  .lm-sub   { font-family: var(--f); font-size: 9px; color: var(--muted); }
  #quad-viewport::after { display: none; }
  #quad-logo-fixed { bottom: calc(var(--foot-h) + 8px); }
  #quad-page-counter { bottom: calc(var(--foot-h) + 8px); }
  .foot-right { display: none; }
  .quad-project-hero { height: 42vh; }
  .quad-project-header { padding: 28px 22px; grid-template-columns: 1fr; }
  .quad-project-meta-grid { align-items: flex-start; }
  .quad-project-meta-item { align-items: flex-start; }
  .quad-project-body     { padding: 28px 22px 100px; }
  .quad-project-gallery { padding: 0 22px 100px; }
  .quad-gallery-grid    { grid-template-columns: 1fr 1fr; }
  .db-1 { height: auto; aspect-ratio: 16 / 9; }
  .db-1 .db-cell { height: 100%; }
  body.single-quad_proyecto .s-desc { grid-template-columns: 1fr 1fr !important; height: auto; }
  body.single-quad_proyecto .s-desc-media { height: 40vh; border-right: 1px solid var(--line); border-bottom: none; }
  body.single-quad_proyecto .s-desc-text  { justify-content: flex-start; padding: 25px 22px; overflow-y: visible; }
  body.single-quad_proyecto .s-desc-body p { font-size: 11px !important; }
  .s-desc-text-inner { max-width: 100%; }
  body.single-quad_proyecto { overflow-x: hidden; }
}

/* ── Tablets ── */
@media (min-width: 600px) and (max-width: 767px) {
  body.single-quad_proyecto .hero-title { font-size: clamp(36px, 7vw, 72px); }
  body.single-quad_proyecto .hero-bottom { padding-bottom: calc(var(--foot-h) + 72px); }
  body.single-quad_proyecto .db-1 { height: 100dvh; height: 100svh; aspect-ratio: unset; }
  body.single-quad_proyecto .db-1 .db-cell { height: 100%; }
  body.single-quad_proyecto .s-desc { grid-template-columns: 1fr 1fr !important; height: auto; }
  body.single-quad_proyecto .s-desc-media { height: 50vw; border-right: 1px solid var(--line); border-bottom: none; }
  body.single-quad_proyecto .s-desc-text { justify-content: flex-start; padding: 30px 24px; overflow-y: visible; }
  body.single-quad_proyecto .s-desc-text-inner { max-width: 100%; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.single-quad_proyecto .hero-title { font-size: clamp(48px, 8vw, 90px); }
  body.single-quad_proyecto .hero-bottom { padding-bottom: calc(var(--foot-h) + 80px); }
  body.single-quad_proyecto .db-2 { grid-template-columns: 1fr 1fr !important; }
  body.single-quad_proyecto .db-3 { grid-template-columns: 1fr 1fr 1fr !important; }
  body.single-quad_proyecto .s-desc { grid-template-columns: 1fr 1fr !important; height: 100dvh; height: 100svh; }
  body.single-quad_proyecto .s-desc-text { overflow-y: auto; }
  body.single-quad_proyecto .s-desc-text-inner { max-width: 380px; }
  body.single-quad_proyecto .s-next-title { font-size: clamp(48px, 8vw, 96px); word-break: break-word; overflow-wrap: break-word; }
}

/* ══════════════════════════════════════════════════════════════════
   FIX ESPECÍFICO WORDPRESS
══════════════════════════════════════════════════════════════════ */
body.single-quad_proyecto { --wp-extra-offset: 0px; }
body.single-quad_proyecto .hero {
  height: calc(100dvh - var(--wp-extra-offset));
  height: calc(100svh - var(--wp-extra-offset));
}

body.home #quad-app,
body.front-page #quad-app,
#quad-viewport {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* =========================================================================
   QUAD Studio — Ajuste Editorial Mobile
   ========================================================================= */
.quad-mobile-full-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    z-index: 1; pointer-events: none; display: none;
}

.quad-mobile-overlay-container {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: var(--gutter);
}

.quad-mobile-square-button {
    width: 65vw; max-width: 290px; aspect-ratio: 1 / 1 !important;
    overflow: hidden; border-radius: 0px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    margin-bottom: 16px; cursor: pointer; transition: transform 0.2s var(--ease);
}
.quad-mobile-square-button:active { transform: scale(0.97); }
.quad-mobile-square-img, .quad-mobile-square-img-fallback { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0px !important; }

/* ═══════════════════════════════════════════════════════════
   QUAD Studio — Ajuste de Legibilidad de Etiquetas Móviles
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .quad-mobile-full-bg { display: block; }
    #quad-viewport::after { display: none !important; }
    .quad-card { border: none !important; background: transparent !important; }
    .quad-card-img-box, .quad-label-mobile, .quad-mobile-blur-bg, .quad-mobile-content-wrap { display: none !important; }
}

/* =========================================================================
   QUAD Studio — Bloque Unificado de Optimización Móvil Global (< 768px)
   ========================================================================= */
@media (max-width: 767px) {
    
    /* ── 1. HERO BOTTOM: Alineación Izquierda + Elevación Anti-Solapamiento Logo ── */
    .single-quad_proyecto .hero-bottom {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        gap: 12px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        padding-bottom: 150px !important; 
    }

    .single-quad_proyecto .hero-title {
        max-width: 70% !important;
        text-align: left !important;
        flex: none !important;
        font-size: calc(1.8rem + 2vw) !important;
        line-height: 1.1 !important;
        margin: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important; 
    }

    .single-quad_proyecto .hero-info {
        align-items: flex-start !important;
        padding-bottom: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .single-quad_proyecto .hero-info span {
        display: block !important;
        text-align: left !important;
        margin-bottom: 4px !important;
        font-size: 0.75rem !important;
    }

    /* ── 2. SECCIONES EDITORIALES: Conversión de db-2 y db-3 a Ancho Completo Vertical ── */
    body.single-quad_proyecto .db-2,
    body.single-quad_proyecto .db-3 {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        grid-template-columns: none !important;
    }
    
    body.single-quad_proyecto .db-2 .db-cell,
    body.single-quad_proyecto .db-3 .db-cell {
        width: 100% !important;
        height: 65vh !important; 
        position: relative !important;
        border-right: none !important;
        border-bottom: 1px solid var(--line) !important;
    }
    
    body.single-quad_proyecto .db-3 .db-cell:last-child {
        border-bottom: none !important;
    }

    /* ── 3. SECCIÓN DESCRIPCIÓN: Texto arriba (ancho completo) y Video abajo ── */
    body.single-quad_proyecto .s-desc {
        display: flex !important;
        flex-direction: column !important; 
        height: auto !important;           
    }

    body.single-quad_proyecto .s-desc-text {
        order: 1 !important;                
        width: 100% !important;
        padding: 48px 24px 32px !important; 
        justify-content: center !important;
    }

    body.single-quad_proyecto .s-desc-text-inner {
        max-width: 100% !important;
        width: 100% !important;
    }

    body.single-quad_proyecto .s-desc-media {
        order: 2 !important;                
        width: 100% !important;
        height: 55vh !important;
        border-right: none !important;
        border-top: 1px solid var(--line) !important;
        border-bottom: 1px solid var(--line) !important;
    }

    /* ── 4. PRELOADER MÓVIL: Isotipo apilado verticalmente ENCIMA del texto ── */
    #pre-stage {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    #pre-logo.shift {
        margin-right: 0 !important;
        margin-bottom: 20px !important;
    }

    #pre-text {
        text-align: center !important;
    }

    /* ── 5. CAJA MÓVIL EXCLUSIVA ── */
    .quad-mobile-meta-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important; text-align: left !important; margin: 12px auto 0 !important;
        cursor: pointer; width: 65vw !important; max-width: 290px !important; padding: 14px 18px !important;
        background: var(--nav-pill-bg) !important; 
        border: 1px solid var(--line) !important; border-radius: 0px !important; 
        backdrop-filter: blur(14px) saturate(140%) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    .quad-mobile-brand-title,
    .quad-mobile-service-type {
        display: block !important; background: transparent !important; border: none !important;
        border-radius: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        box-shadow: none !important; padding: 0 !important; width: 100% !important; text-align: left !important;
    }

    .quad-mobile-brand-title {
        font-family: var(--f-heading) !important; font-size: 11px !important;
        font-weight: 700 !important; letter-spacing: .06em !important; color: var(--ink) !important;
    }

    .quad-mobile-service-type {
        font-family: var(--f) !important; font-size: 9px !important;
        font-weight: 500 !important; color: var(--muted) !important; letter-spacing: .08em !important;
    }
}

/* =========================================================================
   QUAD Studio — ESCUDO DEFINITIVO: Ocultar Paginación
   ========================================================================= */
.swiper-pagination, #fp-nav, .fp-slidesNav, .slick-dots, .pg-pips, .pageable-nav,
.quad-pagination, .pagination, .quad-dots, #quad-pagination, .quad-page-dots,
.quad-nav-dots, .strip-dots, .viewport-dots, .dots, .bullets,
main.home [class*="dots"], main.home [id*="dots"], body.home [class*="pagination"],
body.home [id*="pagination"], #quad-viewport [class*="nav"], #quad-viewport [class*="dots"],
ul[class*="dots"], ol[class*="dots"] {
    display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════
   MODO EDITOR DE ELEMENTOR: REVELAR SIN ROMPER EL DISEÑO
═══════════════════════════════════════════════════════════ */
body.elementor-editor-active .reveal { opacity: 1 !important; visibility: visible !important; transform: none !important; }
body.elementor-editor-active .fade-carousel img { display: none !important; }
body.elementor-editor-active .fade-carousel img:first-child { display: block !important; opacity: 1 !important; position: relative !important; width: 100%; height: auto; }
body.elementor-editor-active [data-carousel] .db-carousel-track { transform: none !important; }

/* ═══════════════════════════════════════════════════════════
   BLOQUEO DE PROPORCIONES (CAJAS RÍGIDAS)
═══════════════════════════════════════════════════════════ */
.single-quad_proyecto .db-2:not(.s-desc) .db-cell { aspect-ratio: 1 / 1 !important; }
.single-quad_proyecto .db-3 .db-cell { aspect-ratio: 4 / 5 !important; }
.single-quad_proyecto .db-carousel-container { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; }
.single-quad_proyecto .db-carousel-track { display: flex !important; width: 100% !important; height: 100% !important; align-items: stretch !important; }
.single-quad_proyecto .db-carousel-slide { flex: 0 0 100% !important; width: 100% !important; height: 100% !important; position: relative !important; }
.single-quad_proyecto .db-carousel-slide img, .single-quad_proyecto .db-cell > img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; }

/* ═══════════════════════════════════════════════════════════
   RESETEO TOTAL DE ELEMENTOR Y MAQUETADO FLEXBOX (INFALIBLE)
═══════════════════════════════════════════════════════════ */
.single-quad_proyecto .elementor-section .elementor-container { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
.single-quad_proyecto .elementor-section, .single-quad_proyecto .elementor-column, .single-quad_proyecto .elementor-widget-wrap, .single-quad_proyecto .elementor-widget-container { padding: 0 !important; margin: 0 !important; gap: 0 !important; }
.single-quad_proyecto .db-2, .single-quad_proyecto .db-3 { display: flex !important; flex-wrap: wrap !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }

@media (min-width: 768px) {
    .single-quad_proyecto .db-2 .db-cell { flex: 0 0 50% !important; max-width: 50% !important; height: 100vh !important; }
    .single-quad_proyecto .db-3 .db-cell { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; height: 100vh !important; }
}
@media (max-width: 767px) {
    .single-quad_proyecto .db-2 .db-cell, .single-quad_proyecto .db-3 .db-cell { flex: 0 0 100% !important; max-width: 100% !important; height: 65vh !important; border-right: none !important; border-bottom: 1px solid var(--line) !important; }
}
.single-quad_proyecto .db-cell img, .single-quad_proyecto .db-cell video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; margin: 0 !important; padding: 0 !important; }