/* =========================================================
   DBC DESIGN — Boutique Branding Studio
   Editorial, refined, design-studio aesthetic
   ========================================================= */

/* ============== TIPOGRAFÍAS LOCALES ============== */
@font-face{
  font-family:"Boulan";
  src:url("../assets/fonts/Boulan.ttf") format("truetype");
  font-weight:400;font-style:normal;
  font-display:swap;
}

/* Regla de marca: Boulan SIEMPRE se renderiza en mayúscula.
   Cubre todas las clases que usan font-family:var(--f-display). */
.hero-title, .hero-title *,
.welcome-title,
.section-title,
.page-title,
.project-title,
.stat-num,
.marquee-track > span,
.mobile-link, .mobile-link span,
.gallery-card-special .gc-name,
.gc-overlay .gc-name,
.invest-amount,
.facade-text,
.recent-cta-title,
.cta-bar-text{
  text-transform:uppercase;
}

/* FOUT control: hasta que las fuentes carguen, los elementos display permanecen
   invisibles (visibility:hidden). Cuando JS detecta que las fuentes están listas,
   agrega .fonts-ready al body y se vuelven visibles instantáneamente. */
.hero-title, .welcome-title, .page-title,
.section-title, .project-title,
.facade-text, .marquee-track > span{
  visibility:hidden;
}
body.fonts-ready .hero-title,
body.fonts-ready .welcome-title,
body.fonts-ready .page-title,
body.fonts-ready .section-title,
body.fonts-ready .project-title,
body.fonts-ready .facade-label,
body.fonts-ready .marquee-track > span{
  visibility:visible;
}
/* Fallback: si JS no corre o tarda, después de 0.3s se hacen visibles igual.
   Con las fuentes preloaded con crossorigin, esto cubre el caso borde donde
   Font Loading API no responde, sin causar delay perceptible. */
@keyframes show-text-fallback{to{visibility:visible}}
.hero-title, .welcome-title, .page-title,
.section-title, .project-title,
.facade-text, .marquee-track > span{
  animation:show-text-fallback 0s .3s forwards;
}
body.fonts-ready .hero-title,
body.fonts-ready .welcome-title,
body.fonts-ready .page-title,
body.fonts-ready .section-title,
body.fonts-ready .project-title,
body.fonts-ready .facade-label,
body.fonts-ready .marquee-track > span{
  animation:none;
}

@font-face{font-family:"Mansfield";src:url("../assets/fonts/Mansfield Thin.ttf") format("truetype");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"Mansfield";src:url("../assets/fonts/Mansfield Thin Italic.ttf") format("truetype");font-weight:100;font-style:italic;font-display:swap}
@font-face{font-family:"Mansfield";src:url("../assets/fonts/Mansfield Extra Light.ttf") format("truetype");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Mansfield";src:url("../assets/fonts/Mansfield Extra Light Italic.ttf") format("truetype");font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:"Mansfield";src:url("../assets/fonts/Mansfield Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Mansfield";src:url("../assets/fonts/Mansfield Light Italic.ttf") format("truetype");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Mansfield";src:url("../assets/fonts/Mansfield.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Mansfield";src:url("../assets/fonts/Mansfield Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Mansfield";src:url("../assets/fonts/Mansfield Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Mansfield";src:url("../assets/fonts/Mansfield Medium Italic.ttf") format("truetype");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Mansfield";src:url("../assets/fonts/Mansfield Semi Bold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Mansfield";src:url("../assets/fonts/Mansfield Semi Bold Italic.ttf") format("truetype");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Mansfield";src:url("../assets/fonts/Mansfield Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Mansfield";src:url("../assets/fonts/Mansfield Bold Italic.ttf") format("truetype");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Mansfield";src:url("../assets/fonts/Mansfield Extra Bold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Mansfield";src:url("../assets/fonts/Mansfield Extra Bold Italic.ttf") format("truetype");font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:"Mansfield";src:url("../assets/fonts/Mansfield Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Mansfield";src:url("../assets/fonts/Mansfield Black Italic.ttf") format("truetype");font-weight:900;font-style:italic;font-display:swap}


:root{
  /* Ancho mínimo de la ilustración — sirve en pantallas estrechas */
  --illustration-min-width: 225px;
  /* Ancho máximo de la ilustración (editable con el slider del editor visual) */
  --illustration-max-width: 1200px;
  /* Ancho preferido en vw (porcentaje del viewport). Sube/baja con el slider.
     Útil para reducir el tamaño de la ilustración en móviles. */
  --illustration-vw: 76;
  /* Tamaños de las letras del tag global (al hover de hotspots)
     relativos al ancho de la ilustración. Editables desde el editor. */
  --tag-num-cqh: 18;
  --tag-text-cqh: 24;
  /* Tamaño mínimo de BOUTIQUE (editable con slider) — sirve en pantallas pequeñas */
  --boutique-min: 41px;
  /* Tamaño máximo de BOUTIQUE (editable con slider) */
  --boutique-max: 142px;
  /* Escala del bloque BOUTIQUE+claim como unidad. 1 = tamaño normal,
     0.5 = mitad, 2 = doble. El claim escala proporcional porque va en em. */
  --boutique-scale: 1.12;
  /* Ratio del claim respecto a BOUTIQUE (decimal, ej. 0.15 = 15%) */
  --claim-ratio: 0.15;
  /* Interlineado del claim como multiplicador sin unidad — escala con BOUTIQUE
     para que las proporciones del bloque (BOUTIQUE + claim) siempre se mantengan */
  --claim-line-height: 1.2;
  /* Distancia horizontal (X) entre BOUTIQUE y el claim — en em (proporcional) */
  --claim-gap: 0.12em;
  /* Dimensiones del rectángulo naranja detrás de BOUTIQUE (todas en em) */
  --band-top: -0.01em;
  --band-bottom: -0.2em;
  --band-left: -0.32em;
  /* Posición vertical del claim (alinear visualmente con BOUTIQUE) */
  --meta-top: 0.38em;
  /* Ancho real de la ilustración — escala con viewport, capped al max-width.
     Los shifts del hero-tag y hero-title se calculan como porcentaje de este ancho.
     clamp() garantiza que nunca baje del mínimo ni suba del máximo.
     El valor preferido sale de --illustration-vw (en vw, editable). */
  --illustration-width: clamp(
    var(--illustration-min-width),
    calc(var(--illustration-vw) * 1vw),
    var(--illustration-max-width)
  );

  /* ============== PALETA OFICIAL DBC DESIGN ==============
     #fffbf7  paper (off-white cálido)
     #d6cbc1  beige / taupe claro — acentos, borders, marquee band
     #8c857b  gris-marrón medio — muted text, secondary ink
     #2d2a28  negro cálido — ink principal y secciones dark
     ====================================================== */
  --bg:#FFFBF7;                /* paper */
  --bg-soft:#F8F2E9;           /* derivado: paper más cálido para inputs/zonas */
  --bg-paper:#F2EBE0;          /* banda marquee marcas */
  --ink:#2D2A28;               /* texto principal */
  --ink-2:#3D3936;             /* texto secundario (leve elevación del ink) */
  --ink-mute:#8C857B;          /* muted, captions, labels */
  --hairline:rgba(45,42,40,.12);
  --hairline-strong:rgba(45,42,40,.26);

  /* dark sections — usan el ink como fondo */
  --dark:#2D2A28;
  --dark-2:#363230;
  --dark-soft:#403A36;
  --cream-on-dark:#FFFBF7;

  /* acentos */
  --accent:#D6CBC1;            /* beige/taupe oficial */
  --accent-2:#8C857B;           /* gris-marrón oficial */
  --highlight:#FF4500;          /* naranja vivo — para resaltar palabras al hacer scroll */

  /* Paleta de categorías del portafolio.
     Para cambiar la paleta global, modifica estas 3 variables y se aplica
     automáticamente en overlays, pills, dots y filter buttons. */
  --cat-ilustracion:#FF4500;    /* Naranja (el accent del sitio) */
  --cat-full-branding:#0022FF;  /* Azul eléctrico */
  --cat-mercadeo:#FF9B00;       /* Ámbar / naranja cálido */
  /* Aliases legacy — para compatibilidad con CSS que aún use los nombres viejos */
  --cat-branding: var(--cat-ilustracion);
  --cat-redes:    var(--cat-mercadeo);
  --cat-3d:       var(--cat-full-branding);

  /* fonts — locales (Boulan + Mansfield).
     Fallbacks similares para evitar reflows visibles si la fuente custom falla. */
  --f-display:"Boulan","Archivo Black","Impact",sans-serif;
  --f-body:"Mansfield",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-serif:"Mansfield",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"Mansfield","SF Mono",Menlo,monospace;

  /* layout */
  --max:1320px;
  --pad:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  font-size:16px;
}
/* Textura paper compartida: misma para body y para el tab del header,
   con attachment:fixed para que la textura quede anclada al viewport
   y ambas superficies muestren exactamente la misma porción del gradiente.
   Sin esto, el tab y el body tendrían tintes ligeramente distintos. */
:root{
  --paper-texture:
    radial-gradient(circle at 22% 16%, rgba(214,203,193,.22), transparent 42%),
    radial-gradient(circle at 78% 72%, rgba(140,133,123,.06), transparent 40%);
}

html{ overflow-x:hidden; max-width:100%; }
body{
  margin:0;
  font-family:var(--f-body);
  font-weight:400;
  color:var(--ink);
  background-color:var(--bg);
  background-image:var(--paper-texture);
  background-attachment:fixed;
  line-height:1.65;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  max-width:100%;
  /* opentype features: kerning, ligatures, oldstyle nums */
  font-feature-settings:"kern","liga","calt","ss01";
}

/* Tightening tipográfico para titulares Boulan
   Display fonts en tamaño grande se ven mejor con tracking negativo.
   Aplicamos un sistema de "optical sizing" manual. */
.hero-title,
.welcome-title,
.page-title,
.section-title,
.project-title{
  font-feature-settings:"kern","liga","ss01";
  text-wrap:balance;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;padding:0}

.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* selección de texto */
::selection{background:var(--ink);color:var(--bg)}

/* scroll bar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--ink);border-radius:0}


/* ============================ HEADER ============================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:18px var(--pad);
  background:transparent;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(239,234,224,.92);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  padding:12px var(--pad);
  border-bottom-color:var(--hairline);
}

.header-inner{
  max-width:1440px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;
}

/* Logo en caja oscura (fiel al PDF). Imagen tal cual, sin deformación. */
.brand{
  display:inline-flex;align-items:center;justify-content:center;
  height:50px;
  padding:0 22px;
  background:var(--ink);
  border-radius:2px;
  transition:background .3s var(--ease), transform .3s var(--ease);
  flex-shrink:0;
}
.brand:hover{background:var(--accent-2)}
.brand:active{transform:scale(.98)}
.brand-logo{
  height:22px;width:auto;display:block;
  transition:height .3s var(--ease);
}
.site-header.scrolled .brand{height:44px}
.site-header.scrolled .brand-logo{height:20px}

/* Grupo derecho con botones boxed */
.header-right{
  display:flex;align-items:center;gap:8px;
}
.main-nav{
  display:flex;align-items:center;gap:8px;
}
.nav-link{
  display:inline-flex;align-items:center;justify-content:center;
  height:50px;padding:0 26px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.28em;font-weight:500;
  text-transform:uppercase;
  color:var(--ink);
  border:1px solid var(--ink);
  background:transparent;
  border-radius:2px;
  position:relative;overflow:hidden;
  transition:color .35s var(--ease);
}
.nav-link::before{
  content:"";position:absolute;inset:0;
  background:var(--ink);
  transform:translateY(101%);
  transition:transform .4s var(--ease);
  z-index:-1;
}
.nav-link:hover{color:var(--bg)}
.nav-link:hover::before{transform:translateY(0)}
.site-header.scrolled .nav-link{height:44px}

/* Switch idioma — toggle visible con dos botones que se llenan */
.lang-switch{
  display:inline-flex;align-items:center;
  height:50px;
  border:1px solid var(--ink);border-radius:2px;
  overflow:hidden;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.28em;font-weight:500;
}
.lang-btn{
  height:100%;
  padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);
  background:transparent;
  border:none;
  cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease);
  position:relative;
}
.lang-btn + .lang-btn{border-left:1px solid var(--ink)}
.lang-btn.active{background:var(--ink);color:var(--bg)}
.lang-btn:not(.active):hover{background:rgba(26,24,23,.08)}
.site-header.scrolled .lang-switch{height:44px}

.menu-toggle{
  display:none;
  width:50px;height:50px;
  position:relative;
  border:1px solid var(--ink);
  background:var(--bg-soft);
  border-radius:2px;
  transition:background .3s var(--ease);
}
.menu-toggle:hover{background:var(--ink)}
.menu-toggle:hover span{background:var(--bg)}
.menu-toggle span{
  position:absolute;left:13px;right:13px;height:1.5px;background:var(--ink);
  transition:transform .35s var(--ease), opacity .25s var(--ease), top .35s var(--ease), background .3s var(--ease);
}
.menu-toggle span:nth-child(1){top:18px}
.menu-toggle span:nth-child(2){top:24px}
.menu-toggle span:nth-child(3){top:30px}
.menu-toggle.open{background:var(--ink)}
.menu-toggle.open span{background:var(--bg)}
.menu-toggle.open span:nth-child(1){top:24px;transform:rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.menu-toggle.open span:nth-child(3){top:24px;transform:rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;
  background:var(--bg);
  padding:120px 32px 40px;
  display:flex;flex-direction:column;
  gap:8px;
  transform:translateY(-100%);
  transition:transform .55s var(--ease);
  z-index:40;
}
.mobile-menu.open{transform:translateY(0)}
/* Botón X de cierre dentro del menú móvil */
.mobile-close{
  position:absolute;top:24px;right:24px;
  width:48px;height:48px;
  background:transparent;border:1px solid var(--ink);
  border-radius:3px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s var(--ease);
}
.mobile-close:hover{background:var(--ink)}
.mobile-close:hover span{background:var(--bg)}
.mobile-close span{
  position:absolute;left:12px;right:12px;height:1.5px;
  background:var(--ink);
  transition:background .25s var(--ease);
}
.mobile-close span:nth-child(1){transform:rotate(45deg)}
.mobile-close span:nth-child(2){transform:rotate(-45deg)}
.mobile-link{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:26px 0;
  font-family:var(--f-display);font-size:54px;letter-spacing:-.04em;line-height:.88;
  border-bottom:1px solid var(--hairline);
  color:var(--ink);
}
.mobile-link span{font-family:var(--f-display);font-weight:400}
.mobile-link span:last-child{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.32em;font-weight:500;
  color:var(--ink-mute);
}
.mobile-lang{
  margin-top:36px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;font-weight:500;
  display:flex;gap:0;justify-content:center;
}


/* ============================ HEADER ============================
   Header oscuro plano. Logo cream a la izquierda, nav inline en el centro-derecha
   con separadores tipo pipe, toggle ESPAÑOL/ENGLISH tipo pill a la derecha.
*/
:root{
  /* Altura del header — editable para fine-tuning visual */
  --archivo-h: 110px;
}

.archivo-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:var(--archivo-h);
  background:var(--ink);
}

/* === Logo cream sobre fondo oscuro (sin tab) === */
.archivo-logo{
  position:absolute;left:max(32px, 4vw);top:50%;
  transform:translateY(-50%);
  z-index:3;
  text-decoration:none;
  display:inline-flex;align-items:center;
}
.archivo-logo-img{
  height:clamp(40px, 4.4vw, 56px);
  width:auto;display:block;
  transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s ease;
  transform-origin: left center;
}
.archivo-logo:hover .archivo-logo-img,
.archivo-logo:focus-visible .archivo-logo-img{
  transform: scale(1.06);
  opacity: .9;
}
.archivo-logo:active .archivo-logo-img{
  transform: scale(1.02);
}

/* === Nav inline (texto + pipes) a la derecha === */
.archivo-nav{
  position:absolute;top:50%;right:clamp(240px, 22vw, 340px);
  transform:translateY(-50%);
  display:flex;align-items:center;gap:24px;
  z-index:2;
}
.archivo-nav-link{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.32em;font-weight:600;
  text-transform:uppercase;
  color:var(--bg);
  text-decoration:none;
  padding:8px 4px;
  transition:color .25s var(--ease), opacity .25s var(--ease);
  position:relative;
}
.archivo-nav-link:hover{color:var(--highlight)}
.archivo-nav-link.is-active{color:var(--bg)}
.archivo-nav-link.is-active::after{
  content:"";position:absolute;left:4px;right:4px;bottom:0;
  height:1.5px;background:var(--highlight);
}
/* Separadores tipo pipe (líneas verticales finas) entre los links */
.archivo-nav-sep{
  display:inline-block;
  width:1px;height:18px;
  background:var(--bg);opacity:.35;
}

/* === Lang switch tipo pill ESPAÑOL / ENGLISH === */
.archivo-lang{
  position:absolute;top:50%;right:max(32px, 3vw);
  transform:translateY(-50%);
  display:flex;align-items:stretch;
  border:1px solid var(--bg);
  border-radius:3px;
  overflow:hidden;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;font-weight:600;
  z-index:4;
}
.archivo-lang .lang-btn{
  background:transparent;border:none;
  color:var(--bg);
  padding:10px 18px;cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease);
  display:inline-flex;align-items:center;justify-content:center;
}
.archivo-lang .lang-btn.active{
  background:var(--bg);
  color:var(--ink);
}
.archivo-lang .lang-btn:not(.active):hover{
  background:rgba(255,251,247,.12);
}
/* Anular border-left dark heredado del estilo antiguo de .lang-btn */
.archivo-lang .lang-btn + .lang-btn{border-left:none}

/* === Menu toggle (móvil) === */
/* Solo las 3 líneas — sin caja, sin borde */
.archivo-menu-toggle{
  display:none;
  position:absolute;right:18px;top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:32px;height:24px;
  background:transparent;border:none;
  padding:0;
  cursor:pointer;
}
.archivo-menu-toggle span{
  position:absolute;left:0;right:0;height:1.5px;
  background:var(--bg);
  transition:transform .35s var(--ease), opacity .25s var(--ease), top .35s var(--ease);
}
.archivo-menu-toggle span:nth-child(1){top:4px}
.archivo-menu-toggle span:nth-child(2){top:11px}
.archivo-menu-toggle span:nth-child(3){top:18px}
.archivo-menu-toggle.open span:nth-child(1){top:11px;transform:rotate(45deg)}
.archivo-menu-toggle.open span:nth-child(2){opacity:0}
.archivo-menu-toggle.open span:nth-child(3){top:11px;transform:rotate(-45deg)}

/* Header sin sombras ni degradados al hacer scroll — borde plano. */
.archivo-header.scrolled{
  box-shadow: none;
}

/* === Responsive: en móvil colapsa a logo + hamburguesa === */
@media (max-width:900px){
  :root{--archivo-h:90px}
  .archivo-nav{display:none}
  .archivo-lang{display:none}
  .archivo-menu-toggle{display:block}
  .archivo-logo{left:22px}
  .archivo-logo-img{height:40px}
}


/* ============================ HERO ============================ */
.hero{
  position:relative;
  padding:140px 0 60px;
  text-align:center;
  overflow:hidden;
}
.hero-inner{
  /* sin max-width: para permitir que la ilustración tenga el ancho que necesite */
  position:relative;
  margin:0 auto;
}
/* contenido textual constreñido al ancho legible */
.hero-meta,
.hero-tag,
.hero-title,
.hero-claim,
.hero-text,
.hero-text-expanded,
.btn-readmore-wrap{
  max-width:1100px;
  margin-left:auto;margin-right:auto;
  padding-left:var(--pad);padding-right:var(--pad);
}
.btn-readmore-wrap{display:flex;justify-content:center}

/* Editorial meta bar */
.hero-meta{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding:16px 0;margin-bottom:54px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.28em;font-weight:500;
  color:var(--ink-mute);text-transform:uppercase;
}
.hero-meta span{display:inline-flex;align-items:center;gap:8px}
.hero-meta .dot{
  width:5px;height:5px;background:var(--accent);border-radius:50%;display:inline-block;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}

.hero-tag{
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:.32em;font-weight:500;
  color:var(--ink-mute);
  margin:0 auto 32px;
  text-transform:uppercase;
  line-height:1.8;
  text-align:center;
  /* Shift proporcional al ancho de la ilustración (161/1500 = 0.1073, -5/1500 = -0.0033) */
  position:relative;
  top:calc(var(--illustration-width) * 0.1073);
  left:calc(var(--illustration-width) * -0.0033);
}

.hero-title{
  font-family:var(--f-display);
  /* font-size proporcional al ancho de la ilustración: 157px / 880px = 0.1784 */
  font-size:calc(var(--illustration-width) * 0.1784);
  line-height:.82;letter-spacing:-.035em;
  margin:0 auto 36px;
  color:var(--ink);
  font-weight:400;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  /* Shift proporcional al ancho de la ilustración: 88/880 = 0.1, -4/880 = -0.0045 */
  position:relative;
  top:calc(var(--illustration-width) * 0.1);
  left:calc(var(--illustration-width) * -0.0045);
}
.hero-title .line{
  display:flex;
  justify-content:center;
  width:100%;
  /* overflow:visible para no cortar el SVG del circle-mark */
  overflow:visible;
}
.hero-title .line > span{
  display:inline-block;
  opacity:0;
  transform:translateY(36px);
  animation:reveal-up 1.1s var(--ease) forwards;
  text-align:center;
}
.hero-title .line-1 > span{animation-delay:.05s}
.hero-title .line-2 > span{animation-delay:.18s}
.hero-title .line-3 > span{animation-delay:.31s}
@keyframes reveal-up{to{opacity:1;transform:translateY(0)}}

/* Fachada — elemento principal del home, ocupa casi todo el ancho.
   La imagen es vertical (1928×2600, ratio 0.74) por lo que privilegiamos width.
   Margin negativo para que la ilustración se superponga ligeramente al título.
   `container-type: inline-size` permite que elementos hijos (textos de carteles)
   usen unidades `cqw` proporcionales al ancho real de la ilustración. */
.facade-wrap{
  position:relative;
  width:var(--illustration-width);
  aspect-ratio: 1928 / 2600;
  /* Overlap proporcional al ancho de la ilustración: a más grande,
     más margen negativo. Esto mantiene la relación visual ilustración-título
     consistente entre desktop y móvil. -8% ≈ -96px a 1200px de ancho. */
  margin:calc(var(--illustration-width) * -0.08) auto 40px;
  opacity:0;
  animation:fade-in 1.4s var(--ease) .55s forwards;
  container-type:inline-size;
  container-name:facade;
}
/* Mix-blend para que el fondo crema de la ilustración no oculte el título */
.facade-img{
  mix-blend-mode:multiply;
}
@keyframes fade-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.facade-img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 28px 60px rgba(20,19,15,.18))
         drop-shadow(0 8px 16px rgba(20,19,15,.10));
  transition:transform .8s var(--ease-out);
}
/* En móvil el overlap ya se calcula proporcional al ancho de la ilustración
   (ver .facade-wrap margin) — no hace falta sobreescribirlo. */
/* Cada hotspot es un área clickeable absoluta sobre la ilustración.
   Contiene opcionalmente un texto traducible (.facade-label) y un círculo SVG animado. */
.facade-hotspot{
  position:absolute;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}

/* Texto sobre los carteles "GALERÍA" y "RECEPCIÓN" — posicionado de forma
   absoluta e independiente del hotspot del círculo. */
.facade-text{
  position:absolute;
  /* z-index bajo: queda detrás del hotspot (z-index:2). El texto siempre
     está al 100% — el rectángulo naranja semi-transparente del hotspot
     se ve encima en estado normal, dándole un tinte. */
  z-index:1;
  font-family:var(--f-display);
  color:var(--ink);
  letter-spacing:.02em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  text-decoration:none;
  display:inline-block;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.facade-text > span{display:inline-block}

/* Posiciones de cada hotspot sobre la ilustración (ratio ≈ 0.74:1).
   Coordenadas ajustadas con el editor visual (Cmd/Ctrl+E para activar). */
.facade-hs-galeria      { top:36.2%; left:14.3%; width:39.7%; height:8.0%;  }
.facade-hs-recepcion    { top:62.8%; left:21.8%; width:49.5%; height:7.7%;  }
.facade-hs-instagram    { top:17.7%; left:80.0%; width:11.2%; height:7.0%;  }
.facade-hs-behance      { top:24.3%; left:79.9%; width:11.7%; height:7.1%;  }
.facade-hs-phone        { top:64.1%; left:11.0%; width:13.7%; height:16.4%; }
.facade-hs-contratando  { top:34.7%; left:82.6%; width:7.0%;  height:19.3%; }
.facade-hs-creador      { top:73.7%; left:74.8%; width:14.4%; height:9.5%;  }

/* Textos sobre los carteles (top/left = centro del elemento).
   font-size en cqw: 1cqw = 1% del ancho de .facade-wrap, así el texto
   siempre conserva la misma proporción visual con la ilustración. */
.facade-lt-galeria      { top:40.3%; left:34.8%; font-size:5.25cqw; }
.facade-lt-recepcion    { top:67.2%; left:46.7%; font-size:4.67cqw; }

/* CONTRATANDO — texto rotado 90° en sentido horario (la "C" queda ARRIBA,
   se lee de arriba hacia abajo). */
.facade-lt-contratando  { top:44.1%; left:86.1%; font-size:3.17cqw;
                          transform: translate(-50%, -50%) rotate(90deg);
                          transform-origin: center center; }

/* CREADOR DE LOGOS CON IA — texto horizontal en 2 líneas, centrado */
.facade-lt-creador      { top:58.1%; left:71.3%; font-size:2.58cqw;
                          text-align:center; line-height:1.05;
                          white-space:normal; }

/* ============== HOTSPOTS RECTANGULARES (estilo UI) ==============
   Default: borde punteado + bg semi-transparente + label arriba/abajo.
   Hover: bg naranja sólido + borde sólido oscuro + barra que sale al viewport. */
.facade-hotspot{
  background:rgba(255,69,0,.18);
  border:1.5px dashed var(--highlight);
  border-radius:2px;
  opacity:0;
  /* z-index alto para quedar DELANTE del texto del cartel
     (que tiene z-index:1 y opacidad baja en estado normal) */
  z-index:2;
  transition:opacity .5s var(--ease),
             background .25s var(--ease),
             border .25s var(--ease);
}
.facade-hotspot.ready{opacity:1}
/* Al hacer hover: el hotspot mismo se hace INVISIBLE — el rectángulo naranja
   que se ve es la barra (.hotspot-active-tag) que se expande detrás de la
   ilustración cubriendo el área del hotspot y extendiéndose al viewport. */
.facade-hotspot:hover{
  background:transparent;
  border-color:transparent;
}
.facade-hotspot:hover .hotspot-label{
  opacity:0;
}
.facade-text{transition:color .25s var(--ease)}

/* ============== TAG GLOBAL ==============
   Rectángulo que aparece detrás de la ilustración al hover sobre un hotspot.
   - position:absolute → se mueve junto con la página al hacer scroll
   - z-index:0 + insertado al inicio del body → queda detrás de la ilustración
   - Sin animación de barrido, solo fade simple para que aparezca limpio */
.hotspot-active-tag{
  position:absolute;
  top:0;
  width:0;
  background:var(--highlight);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0;
  line-height:1.15;
  font-family:var(--f-mono);
  font-weight:600;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
  z-index:0;
  opacity:0;
  transform:translateY(-50%);
  transition:opacity .15s var(--ease);
  /* establece contexto de container query — los hijos usarán cqh para que
     su font-size escale proporcional al alto del rectángulo. */
  container-type:size;
}
.hotspot-active-tag.from-left{
  left:0;
  right:auto;
  align-items:flex-start;
  padding:0 4vw;
}
.hotspot-active-tag.from-right{
  left:auto;
  right:0;
  align-items:flex-end;
  text-align:right;
  padding:0 4vw;
}
.hotspot-active-tag.is-visible{
  opacity:1;
}
/* font-size relativo al ANCHO DE LA ILUSTRACIÓN (no al rectángulo individual)
   para que todos los labels tengan el mismo tamaño, sin importar el tamaño
   del hotspot. --tag-num-cqh y --tag-text-cqh ahora representan
   "% de 100 del ancho ilustración" (es decir, multiplicador * 0.01). */
.hotspot-active-tag .tag-num,
.hotspot-active-tag-text .tag-num{
  font-size:clamp(9px, calc(var(--illustration-width) * var(--tag-num-cqh, 22) / 1000), 18px);
  letter-spacing:.22em;
  opacity:.9;
}
.hotspot-active-tag .tag-text,
.hotspot-active-tag-text .tag-text{
  font-size:clamp(12px, calc(var(--illustration-width) * var(--tag-text-cqh, 36) / 1000), 28px);
  letter-spacing:.3em;
}
@media (max-width:720px){
  .hotspot-active-tag,
  .hotspot-active-tag-text{padding:0 5vw}
  .hotspot-active-tag .tag-text,
  .hotspot-active-tag-text .tag-text{letter-spacing:.22em}
}

/* === Texto del tag global — al FRENTE de la ilustración ===
   Mismo posicionamiento que la barra, pero z-index alto para quedar
   sobre la ilustración. Sin background — solo el texto blanco. */
.hotspot-active-tag-text{
  position:absolute;
  top:0;
  width:0;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0;
  line-height:1.15;
  font-family:var(--f-mono);
  font-weight:600;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
  z-index:5;
  opacity:0;
  transform:translateY(-50%);
  transition:opacity .15s var(--ease);
  /* isolation:isolate evita que cualquier blend-mode externo afecte al texto */
  isolation:isolate;
  /* establece contexto de container query — los hijos usan cqh para escalar
     proporcional al alto del rectángulo del tag. */
  container-type:size;
}
.hotspot-active-tag-text.from-left{
  left:0;
  right:auto;
  align-items:flex-start;
  padding:0 4vw;
}
.hotspot-active-tag-text.from-right{
  left:auto;
  right:0;
  align-items:flex-end;
  text-align:right;
  padding:0 4vw;
}
.hotspot-active-tag-text.is-visible{
  opacity:1;
}

/* Label superior (PORTAFOLIO, INSTAGRAM, etc.) — centrado SOBRE la línea
   punteada del hotspot (la mitad arriba, la mitad abajo del borde superior). */
.hotspot-label{
  position:absolute;
  bottom:100%;
  left:12px;
  transform:translateY(50%);
  z-index:2;
  background:var(--highlight);
  color:#fff;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.22em;
  font-weight:600;
  padding:3px 8px;
  border-radius:1px;
  white-space:nowrap;
  text-transform:uppercase;
  pointer-events:none;
}
/* Variante: label centrado sobre la línea punteada INFERIOR del hotspot */
.hotspot-label.hotspot-label-bottom{
  bottom:auto;
  top:100%;
  transform:translateY(-50%);
}

@media (max-width:720px){
  .hotspot-label{font-size:8px;letter-spacing:.18em;padding:2px 6px}
}

/* Claim line — Mansfield Light Italic editorial */
.hero-claim{
  font-family:var(--f-serif);
  font-style:italic;
  font-size:clamp(22px,2.6vw,32px);
  line-height:1.4;font-weight:300;
  margin:0 auto 30px;
  max-width:680px;
  color:var(--ink);
  letter-spacing:-.012em;
  text-wrap:balance;
}
.hero-claim em{
  font-style:italic;font-weight:600;     /* Mansfield Semi Bold Italic para énfasis */
  font-family:var(--f-serif);
  letter-spacing:-.012em;
}

.hero-text,
.hero-text-expanded{
  max-width:600px;margin:0 auto;
  font-size:15px;line-height:1.75;
  color:var(--ink-2);
  font-weight:400;
  letter-spacing:.005em;
}
.hero-text strong{font-weight:600;color:var(--ink);letter-spacing:.005em}

/* hero-extended sit dentro de .home-more */
.hero-extended{
  padding:30px var(--pad) 80px;
  text-align:center;
}
.hero-extended-inner{max-width:560px;margin:0 auto}
.hero-text-expanded{margin:0 auto}
.hero-text-expanded p{margin:0 0 18px}

/* ============== HOME-MORE ==============
   Wrapper que oculta/revela welcome+news+recent
   y la sección extendida del hero al hacer click en "Leer más" */
.home-more{
  display:none;
  opacity:0;
  transform:translateY(-12px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.home-more.open{
  display:block;
}
.home-more.appear{
  opacity:1;
  transform:translateY(0);
}

.btn-readmore{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:34px;padding:14px 26px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);
  border:1px solid var(--ink);
  background:transparent;
  position:relative;overflow:hidden;
  transition:color .35s var(--ease);
  /* Animación "nudge" — doble rebote vertical cada 3s para invitar al clic */
  animation:btn-readmore-nudge 3s ease-in-out 1s infinite;
}
/* Pausa al hover, abierto u oculto */
.btn-readmore:hover,
.btn-readmore.open,
.btn-readmore.is-hidden{
  animation:none !important;
}
@keyframes btn-readmore-nudge{
  0%, 100%   { transform:translateY(0); }
  40%        { transform:translateY(0); }
  50%        { transform:translateY(10px); }
  60%        { transform:translateY(0); }
  70%        { transform:translateY(5px); }
  80%, 90%   { transform:translateY(0); }
}
/* Respeta preferencias de movimiento reducido del sistema */
@media (prefers-reduced-motion:reduce){
  .btn-readmore{ animation:none; }
}
.btn-readmore::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(100%);transition:transform .45s var(--ease);
  z-index:-1;
}
.btn-readmore:hover{color:var(--bg)}
.btn-readmore:hover::before{transform:translateY(0)}
.btn-readmore svg{transition:transform .35s var(--ease)}
.btn-readmore.open svg{transform:rotate(180deg)}
/* Estado "oculto": después de hacer click el botón desaparece definitivamente */
.btn-readmore.is-hidden{
  opacity:0;
  pointer-events:none;
  transform:translateY(-12px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}


/* ============================ MARQUEE ============================ */
/* Label arriba de la cinta de servicios */
.marquee-label{
  background:var(--dark);
  color:var(--cream-on-dark);
  padding:28px 0 0;
  text-align:center;
}
.marquee-label p{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:500;
  opacity:.72;
  margin:0;
}

.marquee{
  overflow:hidden;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  background:transparent;
}
.marquee-dark{
  background:var(--dark);
  border-color:var(--dark);
  color:var(--cream-on-dark);
  padding:18px 0 22px;
}
/* Cuando el marquee viene directamente después del label, eliminamos el
   borde superior para que se vean como un solo bloque oscuro */
.marquee-label + .marquee{ border-top:none; }
.marquee-track{
  display:flex;white-space:nowrap;gap:0;
  animation:scroll 48s linear infinite;
  will-change:transform;
}
.marquee-track > span{
  font-family:var(--f-display);
  font-size:24px;letter-spacing:.02em;
  flex-shrink:0;
  display:inline-flex;align-items:center;gap:0;
  text-transform:uppercase;
}
/* Separador entre repeticiones del marquee — interpunct con espaciado natural */
.marquee-track > span::after{
  content:"·";
  display:inline-block;
  margin:0 .35em;
  font-family:inherit;
  font-size:inherit;
  color:inherit;
  vertical-align:baseline;
}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}


/* ============================ WELCOME ============================ */
.welcome{
  padding:140px 0 120px;
  position:relative;
}
.welcome .container{text-align:center}

.section-label{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.32em;font-weight:500;
  color:var(--ink-mute);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:16px;
  margin-bottom:36px;
}
.section-label::before,
.section-label::after{
  content:"";width:36px;height:1px;background:var(--hairline-strong);
}

.welcome-title{
  font-family:var(--f-display);
  font-size:clamp(72px,12vw,180px);
  letter-spacing:-.035em;line-height:.85;
  margin:0;font-weight:400;
}
.welcome-subtitle{
  font-family:var(--f-serif);font-style:italic;font-weight:300;
  font-size:clamp(18px,2vw,24px);letter-spacing:-.005em;
  color:var(--ink-2);
  margin:18px 0 70px;
  line-height:1.4;
}

.stats-grid{
  list-style:none;margin:0 0 80px;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--hairline-strong);
  border-bottom:1px solid var(--hairline-strong);
}
.stats-grid li{
  padding:34px 14px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  border-right:1px solid var(--hairline);
  position:relative;
}
.stats-grid li:last-child{border-right:none}
.stat-num{
  font-family:var(--f-display);
  font-size:clamp(40px,4.5vw,64px);line-height:1;
  font-weight:400;
  letter-spacing:-.035em;
}
.stat-label{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.32em;font-weight:500;
  color:var(--ink-mute);text-transform:uppercase;
}

.services-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--hairline);
}
.services-grid li{
  padding:30px 16px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;font-weight:500;
  text-transform:uppercase;
  text-align:center;
  border-right:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  color:var(--ink-2);
  cursor:default;
}
/* Los items de services-grid NO son botones — sin hover ni transición. */
.services-grid li:nth-child(4n){border-right:none}


/* ============================ NEWS ============================ */
.news{
  background:var(--dark);
  color:var(--cream-on-dark);
  padding:140px 0 140px;
  position:relative;
}
.news .container{max-width:1180px}
.news .section-label{color:rgba(255,251,247,.55)}
.news .section-label::before,
.news .section-label::after{background:rgba(255,251,247,.3)}

.section-title{
  font-family:var(--f-display);
  font-size:clamp(56px,9vw,140px);
  margin:0;line-height:.84;letter-spacing:-.035em;
  font-weight:400;
}
.section-title.big{
  font-size:clamp(64px,10vw,140px);
  text-align:left;line-height:.82;letter-spacing:-.035em;
}
.news-headline{
  font-family:var(--f-serif);font-style:italic;font-weight:300;
  font-size:clamp(20px,2.2vw,28px);
  margin:20px 0 48px;
  color:rgba(255,251,247,.85);
  letter-spacing:-.01em;
  line-height:1.4;
  max-width:780px;
  text-wrap:balance;
}
.news-headline strong{color:#fff;font-weight:600;font-style:italic}

/* Texto introductorio compartido — bloque único arriba del grid,
   con max-width para line length cómoda de leer. */
.news-intro{
  max-width:760px;
  margin:0 0 64px;
}
.news-intro p{
  font-size:16px;line-height:1.75;
  color:rgba(255,251,247,.78);
  margin:0 0 16px;
  letter-spacing:.005em;
}
.news-intro p:last-child{margin-bottom:0}

.news-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:32px;
}
.news-card{
  padding:32px;
  border:1px solid rgba(255,251,247,.14);
  border-radius:1px;
  background:rgba(255,255,255,.015);
}
.news-card-media{position:relative}
.news-card-media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:1px;
  filter:saturate(.95);
}
/* Las news-card NO son clickables, no llevan hover. */
.news-card-tag{margin-top:16px}
.tag-title{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;font-weight:600;
  color:#fff;margin:0;text-transform:uppercase;
}
.tag-sub{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.26em;font-weight:400;
  color:rgba(255,251,247,.55);margin:4px 0 18px;text-transform:uppercase;
}
.btn-ghost{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 20px;
  background:transparent;
  border:1px solid rgba(255,251,247,.4);
  color:var(--cream-on-dark);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;font-weight:500;
  text-transform:uppercase;
  border-radius:1px;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn-ghost::after{
  content:"→";display:inline-block;transition:transform .35s var(--ease);
}
.btn-ghost:hover{background:var(--cream-on-dark);color:var(--ink);border-color:var(--cream-on-dark)}
.btn-ghost:hover::after{transform:translateX(4px)}

.news-instagram{
  margin-top:16px;
  display:flex;flex-direction:column;gap:14px;
  padding-top:16px;
  border-top:1px solid rgba(255,251,247,.14);
}
.ig-link{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 20px;
  border:1px solid rgba(255,251,247,.4);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;font-weight:500;
  text-transform:uppercase;
  border-radius:1px;
  align-self:flex-start;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.ig-link:hover{background:var(--cream-on-dark);color:var(--ink)}


/* ============================ RECENT ============================ */
.recent{
  padding:140px 0 120px;
}
.recent-top{
  display:grid;grid-template-columns:1fr auto;align-items:end;
  gap:32px;margin-bottom:60px;
  padding-bottom:32px;border-bottom:1px solid var(--hairline);
}
.recent-top h2{margin:0}
.recent-top .section-subtitle{
  font-family:var(--f-serif);font-style:italic;font-weight:300;
  font-size:clamp(18px,2vw,22px);
  color:var(--ink-2);
  margin:16px 0 0;letter-spacing:-.01em;
  line-height:1.4;
}
.recent-link{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;font-weight:500;
  text-transform:uppercase;color:var(--ink);
  display:inline-flex;align-items:center;gap:10px;
  padding-bottom:8px;border-bottom:1px solid var(--ink);
  transition:gap .35s var(--ease);
}
.recent-link:hover{gap:16px}
.recent-link::after{content:"→"}

.projects-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.project-card{
  position:relative;
}
.project-link{
  position:relative;display:block;
  aspect-ratio:3/2;overflow:hidden;
  background:var(--bg-soft);
}
.project-link img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease-out), filter .6s var(--ease-out);
}
.project-card:hover .project-link img{
  transform:scale(1.06);
}
.project-meta{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:18px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.24em;font-weight:500;
  text-transform:uppercase;
}
.project-name{color:var(--ink);font-weight:600;letter-spacing:.16em}
.project-year{color:var(--ink-mute);font-weight:500}
.project-cat{
  display:block;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.28em;font-weight:400;
  color:var(--ink-mute);margin-top:6px;text-transform:uppercase;
}

/* Overlay sobre la tarjeta de proyecto — cobertura total naranja con
   número arriba-derecha y nombre/tags/año abajo-izquierda.
   Toda la tipografía usa Mansfield (var(--f-body)) en mayúsculas. */
.project-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:30px 32px;
  background:var(--highlight);
  color:#fff;
  opacity:0;
  transition:opacity .4s var(--ease);
}
.project-card:hover .project-overlay{opacity:1}

.project-overlay-num{
  align-self:flex-end;
  font-family:var(--f-body);
  font-size:15px;
  letter-spacing:.2em;
  font-weight:600;
  text-transform:uppercase;
  line-height:1;
}
.project-overlay-info{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.project-overlay-name{
  font-family:var(--f-body);
  font-size:24px;
  letter-spacing:.14em;
  font-weight:700;
  text-transform:uppercase;
  margin:0;
  line-height:1.15;
}
.project-overlay-tags{
  font-family:var(--f-body);
  font-size:14px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  margin:0;
  line-height:1.4;
}
.project-overlay-year{
  font-family:var(--f-body);
  font-size:14px;
  letter-spacing:.16em;
  font-weight:500;
  text-transform:uppercase;
  margin:0;
  line-height:1.4;
}

/* Responsive: en móvil reducir padding y tamaño */
@media (max-width:560px){
  .project-overlay{padding:20px 20px}
  .project-overlay-info{gap:14px}
  .project-overlay-name{font-size:18px;letter-spacing:.1em}
  .project-overlay-tags,
  .project-overlay-year{font-size:12px}
  .project-overlay-num{font-size:12px}
}


/* ============================ BRANDS ============================ */
.brands{
  padding:90px 0 0;
  border-top:1px solid var(--hairline);
}
.brands-title{
  text-align:center;
  font-family:var(--f-mono);
  font-size:10px;letter-spacing:.32em;font-weight:500;
  color:var(--ink-mute);
  margin:0 0 50px;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:18px;
  width:100%;justify-content:center;
}
.brands-title::before,
.brands-title::after{
  content:"";width:40px;height:1px;background:var(--hairline-strong);
}
.marquee-brands{
  position:relative;
  padding:48px 0;
  background:var(--bg-paper);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  /* fade en los bordes para integración elegante */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.brands-track{
  display:flex;align-items:center;gap:64px;
  animation:scroll 60s linear infinite;
  will-change:transform;
}
/* Cada logo ocupa el mismo "marco" visual (mismo ancho y alto).
   El logo se ajusta proporcionalmente dentro del marco con object-fit:contain,
   de modo que horizontales y compactos tengan el mismo protagonismo visual. */
.brands-track img{
  width:140px;height:60px;
  object-fit:contain;object-position:center;
  flex-shrink:0;
  opacity:.78;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.brands-track img:hover{
  opacity:1;
  transform:scale(1.08);
}
.marquee-brands:hover .brands-track{animation-play-state:paused}


/* ============================ FOOTER ============================ */
.site-footer{
  background:var(--dark);
  color:var(--cream-on-dark);
  position:relative;
  padding:100px var(--pad) 36px;
  margin-top:0;
}
.footer-inner{
  max-width:var(--max);margin:0 auto;
}

/* Masthead: logo + status editorial */
.footer-masthead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
  padding-bottom:48px;
  margin-bottom:54px;
  border-bottom:1px solid rgba(255,251,247,.14);
  flex-wrap:wrap;
}
.footer-logo{
  display:inline-block;
  max-width:220px;
  flex-shrink:0;
}
.footer-logo img{width:100%;height:auto;display:block}

/* Bloque de status — pequeño, editorial, en mono y serif */
.footer-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  text-align:right;
}
.footer-meta-status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-weight:500;
  color:rgba(255,251,247,.82);
}
.footer-meta-status .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--highlight);
  animation:pulse 2.4s ease-in-out infinite;
}
.footer-meta-since{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:300;
  font-size:13px;
  letter-spacing:.005em;
  color:rgba(255,251,247,.55);
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:48px;
  padding-bottom:54px;
  border-bottom:1px solid rgba(255,251,247,.14);
}
.footer-addr{ margin-top:14px; }

.footer-col h4{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.32em;
  color:rgba(255,251,247,.5);font-weight:500;
  margin:0 0 24px;text-transform:uppercase;
}
.footer-col p,
.footer-col a{
  font-size:14px;line-height:1.75;color:var(--cream-on-dark);
  margin:0 0 8px;display:block;
  letter-spacing:.003em;
  transition:color .3s var(--ease);
}
.footer-col p strong{color:#fff;font-weight:600;letter-spacing:.005em}
.footer-col a:hover{color:#fff}

.footer-social{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.social-row{
  display:inline-flex;align-items:center;gap:12px;
  font-size:14px;letter-spacing:.005em;color:rgba(255,251,247,.85);
  font-weight:400;
  transition:color .3s var(--ease);
}
.social-row svg{flex-shrink:0;color:rgba(255,251,247,.7);transition:color .3s var(--ease)}
.social-row:hover{color:#fff}
.social-row:hover svg{color:var(--accent)}

.footer-bottom{
  padding-top:36px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;font-weight:500;
  text-transform:uppercase;
  color:rgba(255,251,247,.5);
}
.footer-bottom .copy{text-align:left}
.footer-bottom .legal{display:flex;gap:32px;justify-content:flex-end}
.footer-bottom a{color:rgba(255,251,247,.65);transition:color .3s var(--ease)}
.footer-bottom a:hover{color:#fff}
.footer-bottom .timestamp{display:inline-flex;align-items:center;gap:8px}
.footer-bottom .timestamp .dot{
  width:5px;height:5px;background:var(--accent);border-radius:50%;
  animation:pulse 2.4s ease-in-out infinite;
}


/* ============================ REVEAL ON SCROLL ============================ */
.reveal{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease), transform 1s var(--ease)}
.reveal.show{opacity:1;transform:translateY(0)}

.reveal-mask{position:relative;overflow:hidden}
.reveal-mask > *{
  display:block;
  transform:translateY(102%);
  transition:transform 1s var(--ease);
}
.reveal-mask.show > *{transform:translateY(0)}

/* ============================ PROJECT PAGE — sin reveal ============================
   En las páginas de detalle de proyecto las imágenes deben aparecer
   inmediatamente (sin fade-in) para que la lectura del proyecto sea
   fluida al hacer scroll. Anulamos el efecto reveal/reveal-mask. */
body[data-page="project"] .reveal,
body[data-page="project"] .reveal-mask,
body[data-page="project"] .reveal-mask > *{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}


/* ============================ HIGHLIGHT (MARKER) ============================
   Efecto editorial: una franja naranja se "dibuja" detrás de palabras clave.
   Técnica: background-image gradient con background-size animado.
   El texto SIEMPRE va delante porque es contenido inline del propio elemento
   — el background nunca puede cubrirlo, está garantizado por el modelo de caja.
   ========================================================================== */
.hl{
  display:inline-block;
  /* el "marker" es un background lineal del color highlight.
     Se inicia en 0% width (invisible) y se expande hasta 100% cuando is-marked. */
  background-image:linear-gradient(var(--highlight), var(--highlight));
  background-repeat:no-repeat;
  background-size:0% 88%;
  background-position:0 60%;
  /* padding sutil para que el highlight se extienda un poco más allá del texto */
  padding:0 .12em;
  margin:0 -.12em;
  transition:background-size .95s cubic-bezier(.5,.05,.15,1);
  /* Regla de diseño: Naranja solo = texto negro en negrilla, sin itálica */
  color:var(--ink);
  font-weight:700;
  font-style:normal;
}
.hl.is-marked{background-size:100% 88%}

/* Regla de diseño: Naranja + Negrita = texto crema sobre el rectángulo naranja.
   Cubre los tres modos posibles de combinación:
     <strong class="hl">              — bold con clase hl en el mismo elemento
     <strong>...<em class="hl">...    — hl dentro de strong
     <em class="hl">...<strong>...    — strong dentro de hl */
strong.hl,
strong .hl,
.hl strong{color:var(--bg)}

/* variante: underline solamente (1/3 del alto) */
.hl.hl-underline{
  background-size:0% 30%;
  background-position:0 92%;
}
.hl.hl-underline.is-marked{background-size:100% 30%}

/* variante: cubre solo la mitad inferior (estilo Kristian Designs) */
.hl.hl-half{
  background-size:0% 50%;
  background-position:0 78%;
}
.hl.hl-half.is-marked{background-size:100% 50%}


/* ============================ WORD BAND ============================
   Banda naranja editorial detrás de "BOUTIQUE".
   - BOUTIQUE va CENTRADO igual que BRANDING y STUDIO
   - El claim "Solo los equipos..." va a la DERECHA de BOUTIQUE como elemento
     absoluto (no afecta el centrado), alineado arriba con BOUTIQUE
   - Ambos textos en color crema (#fffbf7), solo se ven sobre el bg naranja
   - Todo en em → escala proporcional al tamaño de BOUTIQUE */

/* Selector con mayor especificidad (0,3,0) para vencer a
   `.hero-title .line > span` (0,2,1) que aplica display:inline-block */
.hero-title .line > .word-band{
  position:relative;
  display:inline-flex;
  flex-direction:row;
  align-items:flex-start;
  /* gap horizontal editable desde el slider (X) */
  gap:var(--claim-gap);
  /* Escala uniforme: multiplico el clamp completo por --boutique-scale
     para que el bloque entero (BOUTIQUE + claim, que va en em) crezca/encoja
     manteniendo proporciones. */
  font-size:clamp(
    calc(var(--boutique-min) * var(--boutique-scale)),
    calc(8vw * var(--boutique-scale)),
    calc(var(--boutique-max) * var(--boutique-scale))
  );
  line-height:.85;
}
/* Orden explícito: BOUTIQUE a la izquierda, claim a la derecha */
.band-text{order:1}
.band-meta{order:2}
.band-bg{
  position:absolute;
  /* dimensiones controlables desde el editor */
  top:var(--band-top);
  bottom:var(--band-bottom);
  left:var(--band-left);
  width:100vw;
  background:var(--highlight);
  z-index:-1;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 1s cubic-bezier(.5,.1,.15,1);
}
.band-text{
  position:relative;
  z-index:1;
  /* siempre color crema (mismo que el fondo). Solo se ve sobre el bg naranja */
  color:var(--bg);
}
.band-meta{
  position:relative;
  z-index:1;
  /* flujo natural en columna con interlineado FIJO en px (no se estira) */
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  text-align:left;
  padding-top:var(--meta-top);
  /* font-size SIEMPRE proporcional a BOUTIQUE — sin clamp para que la
     relación de tamaño entre BOUTIQUE y el claim nunca se rompa, ni
     siquiera en pantallas extremas. */
  font-size:calc(var(--claim-ratio) * 1em);
  font-family:var(--f-mono);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  /* interlineado FIJO en px — independiente del tamaño de BOUTIQUE */
  line-height:var(--claim-line-height);
  white-space:nowrap;
  color:var(--bg);
  opacity:0;
  transform:translateX(-0.4em);
  transition:opacity .5s var(--ease) .35s, transform .5s var(--ease) .35s;
}
/* cada línea del claim ocupa exactamente --claim-line-height de alto */
.band-meta > span{display:block;line-height:var(--claim-line-height)}
.word-band.is-active .band-bg{transform:scaleX(1)}
.word-band.is-active .band-meta{opacity:1;transform:translateX(0)}
@media (max-width:720px){
  .circle-mark path{stroke-width:10}
}


/* ============================ RESPONSIVE ============================ */
@media (max-width:960px){
  .header-right .main-nav,
  .header-right .lang-switch{display:none}
  .menu-toggle{display:inline-flex}

  .services-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid li:nth-child(4n){border-right:1px solid var(--hairline)}
  .services-grid li:nth-child(2n){border-right:none}

  .recent-top{grid-template-columns:1fr;align-items:start}
  .recent-link{justify-self:start}

  .news-intro{margin-bottom:48px}
  .news-intro p{font-size:15px}
  .news-grid{grid-template-columns:1fr;gap:18px}
  .news-card{padding:24px}

  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .footer-brand-col{grid-column:1/-1}
  .footer-bottom{grid-template-columns:1fr;text-align:center;gap:14px}
  .footer-bottom .copy,
  .footer-bottom .legal{text-align:center;justify-content:center}
}

@media (max-width:720px){
  :root{--pad:22px}
  .hero{padding:120px 22px 60px}
  .hero-meta{font-size:10px;letter-spacing:.15em;padding:12px 0;margin-bottom:32px}
  .hero-meta span:nth-child(2){display:none}

  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid li:nth-child(1),
  .stats-grid li:nth-child(2){border-bottom:1px solid var(--hairline)}
  .stats-grid li:nth-child(2n){border-right:none}

  .projects-grid{grid-template-columns:1fr;gap:32px}

  .marquee-track > span{font-size:16px;gap:36px}

  /* Marquee de MARCAS en móvil:
     - Logos más grandes (de 96x42 a 140x60)
     - Scroll horizontal con el dedo (sin auto-animación)
     - Sin set duplicado (suficiente con un set para swipear) */
  .marquee-brands{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -webkit-mask-image:none;
            mask-image:none;
    padding:32px 0;
  }
  .marquee-brands::-webkit-scrollbar{ display:none; }
  .brands-track{
    animation:none;
    gap:48px;
    padding:0 24px;
    width:max-content;
  }
  .brands-track img{
    width:140px;
    height:60px;
    opacity:1;
    flex-shrink:0;
  }
  /* En móvil mantenemos los sets duplicados visibles — el JS
     (brands-infinite-scroll.js) los usa para crear el efecto de loop infinito
     al hacer swipe horizontal. */

  /* Label arriba del marquee: tracking más cerrado y padding lateral en móvil */
  .marquee-label{ padding:22px 16px 0; }
  .marquee-label p{
    font-size:9px;
    letter-spacing:.2em;
    line-height:1.5;
  }
  .marquee-dark{ padding:14px 0 18px; }

  /* Hero tag (Graphic Design · Illustration · Marketing · Branding · Audiovisual)
     en móvil: tipografía más pequeña y tracking cerrado para que quede en 2 líneas.
     Sin offset positivo para que se mantenga en flujo natural arriba del título. */
  .hero-tag{
    font-size:9px;
    letter-spacing:.22em;
    line-height:1.5;
    padding:0 12px;
    margin-bottom:14px;
    top:0;
    left:0;
  }

  /* Hero title en móvil: sin margin-bottom y sin offset para que la
     ilustración pueda subir y solaparse con la palabra "STUDIO". */
  .hero-title{
    margin-bottom:0;
    top:0;
  }

  /* Ilustración sube notablemente — la cinta del techo (con plantas) queda
     POR ENCIMA del trazo inferior de "STUDIO" para crear el solape editorial. */
  .facade-wrap{
    margin-top:calc(var(--illustration-width) * -0.14);
    margin-bottom:24px;
  }

  /* Ilustración más grande en móvil — sube de 76vw a 95vw */
  :root{ --illustration-vw: 95; }

  /* Hotspot labels (rectángulos naranjas INSTAGRAM, PORTAFOLIO, etc.):
     20% más pequeños que la media-query base. */
  .hotspot-label{
    font-size:6.5px;
    letter-spacing:.14em;
    padding:1.5px 5px;
  }

  /* Page titles (RECEPCIÓN, CONTACT, CONTRATANDO, BIENVENIDO, etc.):
     en móvil, calibrado para que la palabra más larga (CONTRATANDO, 11 letras)
     quepa en una línea con el menor ancho de iPhone. Boulan es display ancha,
     por eso bajamos a ~8vw con tracking cerrado. */
  .page-title{
    font-size:clamp(20px, 7vw, 38px);
    letter-spacing:-.06em;
    line-height:.95;
    white-space:nowrap;
    overflow:visible;
  }
  /* Padding lateral mínimo para dar el máximo ancho al título */
  .page-hero{
    padding:90px 10px 40px;
  }

  .footer-grid{grid-template-columns:1fr;gap:36px}
  .footer-bottom .legal{flex-direction:column;gap:10px}
}

@media (max-width:480px){
  .mobile-link{font-size:36px;padding:18px 0}
  .hero-title{font-size:64px;letter-spacing:-.02em}
  .welcome-title{font-size:60px}
  .section-title{
    font-size:clamp(34px, 11vw, 54px);
    letter-spacing:-.04em;
    overflow-wrap:break-word;
    hyphens:auto;
  }
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.reveal-mask > *{opacity:1!important;transform:none!important}
}


/* =========================================================
   PORTAFOLIO / GALERÍA
   ---------------------------------------------------------
   ✏️ EDITAR TAMAÑOS DE FUENTE — TÍTULO Y SUBTÍTULO
   Modifica las variables de abajo para cambiar los tamaños
   del título (GALERÍA) y del subtítulo en escritorio y móvil.
   Los valores `clamp(min, fluido, max)` se adaptan al ancho
   de pantalla. Cambia solo los números — no toques las unidades.
   ========================================================= */
:root{
  /* Título "GALERÍA" / "RECEPCIÓN" / "CONTRATANDO" — Escritorio */
  --page-title-size:        clamp(96px, 16vw, 240px);
  /* Título — Tablet / móvil (≤ 720px) — +30% */
  --page-title-size-mobile: clamp(57px, 16vw, 94px);
  /* Título — Móvil pequeño (≤ 480px) — +30% */
  --page-title-size-sm:     clamp(49px, 14vw, 103px);
  /* Título — Móvil muy pequeño (≤ 380px) — +30% */
  --page-title-size-xs:     clamp(42px, 14vw, 81px);

  /* Subtítulo (texto bajo el título) — Escritorio */
  --page-subtitle-size:        10px;
  /* Subtítulo — Móvil (≤ 720px) */
  --page-subtitle-size-mobile: 8px;
  /* Espaciado de letras y altura de línea del subtítulo */
  --page-subtitle-tracking:    .32em;
  --page-subtitle-line:        1.5;
  /* Ancho máximo (encuadre) del subtítulo galería */
  --page-subtitle-max-width:        420px;  /* Escritorio */
  --page-subtitle-max-width-mobile: 280px;  /* Móvil ≤ 720px */

  /* -------------------------------------------------------
     Subtítulo de BIENVENIDA (Cotizar / Contratando)
     Línea 1 = cursiva serif ("Bienvenido a DBC Design")
     Línea 2 = mono mayúscula ("Por favor completa...")
     ------------------------------------------------------- */
  /* Línea 1 — cursiva — Escritorio */
  --welcome-lead-size:        21px;
  /* Línea 1 — cursiva — Móvil (≤ 720px) */
  --welcome-lead-size-mobile: 14px;
  /* Línea 2 — mono mayúscula — Escritorio */
  --welcome-detail-size:        13px;
  /* Línea 2 — mono mayúscula — Móvil (≤ 720px) */
  --welcome-detail-size-mobile: 8px;
  --welcome-detail-tracking:    .22em;
  /* Ancho máximo del bloque de bienvenida (encuadre) */
  --welcome-max-width:          500px;
  /* Ancho máximo en móvil */
  --welcome-max-width-mobile:   340px;

  /* -------------------------------------------------------
     Separación del hero respecto al HEADER (top) y al
     contenido siguiente (bottom). Aumenta el top si el
     título queda muy pegado al header fijo.
     ------------------------------------------------------- */
  --page-hero-top:           220px;  /* Escritorio */
  --page-hero-bottom:         80px;
  --page-hero-top-mobile:    120px;  /* ≤ 720px */
  --page-hero-bottom-mobile:  50px;
}

.page-hero{
  padding:var(--page-hero-top) var(--pad) var(--page-hero-bottom);
  text-align:center;
  border-bottom:1px solid var(--hairline);
}
.page-title{
  font-family:var(--f-display);
  font-size:var(--page-title-size);
  letter-spacing:-.04em;line-height:.82;
  margin:0;font-weight:400;
}
.page-mark{
  display:flex;justify-content:center;margin:16px 0 28px;
}
.page-mark img{height:72px;width:auto;display:block}
.page-subtitle{
  font-family:var(--f-mono);
  font-size:var(--page-subtitle-size);
  letter-spacing:var(--page-subtitle-tracking);
  font-weight:500;
  text-transform:uppercase;color:var(--ink-mute);
  margin:0 auto;
  max-width:var(--page-subtitle-max-width);
  line-height:var(--page-subtitle-line);
}

/* ---- Variante de BIENVENIDA (Cotizar / Contratando) ---- */
.page-subtitle--welcome{
  font-family:var(--f-serif);
  font-style:italic;
  font-size:var(--welcome-lead-size);
  letter-spacing:0;
  text-transform:none;
  color:var(--ink-2);
  font-weight:300;
  max-width:var(--welcome-max-width);
}
.page-subtitle--welcome .page-subtitle__detail{
  display:block;          /* ← evita que el outline del editor se parta en varias cajas */
  margin-top:6px;
  font-family:var(--f-mono);
  font-size:var(--welcome-detail-size);
  letter-spacing:var(--welcome-detail-tracking);
  text-transform:uppercase;
  color:var(--ink-mute);
  font-style:normal;
  font-weight:400;
}

/* =========================================================
   Section label dentro del .page-hero (Portafolio / Cotizar)
   Equivalente al "LET'S TALK" del contact-hero.
   ========================================================= */
.page-hero .section-label{
  margin-bottom:24px;
}

/* =========================================================
   Page titles en MÓVIL — override final (cascade)
   ---------------------------------------------------------
   Esta regla viene DESPUÉS de las definiciones de .page-title
   y .contact-hero .page-title para asegurar que en móvil
   el título se reduzca y no se corte fuera del viewport.
   ========================================================= */
@media (max-width:720px){
  .page-title,
  .contact-hero .page-title{
    font-size:var(--page-title-size-mobile);
    letter-spacing:-.04em;
    line-height:.92;
    text-align:center;
    white-space:nowrap;
    overflow:visible;
    margin-left:auto;margin-right:auto;
  }
  .page-subtitle{
    font-size:var(--page-subtitle-size-mobile);
    max-width:var(--page-subtitle-max-width-mobile);
  }
  .page-subtitle--welcome{
    font-size:var(--welcome-lead-size-mobile);
    max-width:var(--welcome-max-width-mobile);
  }
  .page-subtitle--welcome .page-subtitle__detail{
    font-size:var(--welcome-detail-size-mobile);
  }
  .page-hero{
    padding:var(--page-hero-top-mobile) 16px var(--page-hero-bottom-mobile);
    text-align:center;
  }
  .contact-hero .container{
    text-align:center;
  }
  .page-hero .section-label,
  .contact-hero .section-label{
    margin-bottom:18px;
    font-size:9px;
    letter-spacing:.26em;
  }
  .page-hero .section-label::before,
  .page-hero .section-label::after,
  .contact-hero .section-label::before,
  .contact-hero .section-label::after{
    width:24px;
  }
}
@media (max-width:480px){
  .page-title,
  .contact-hero .page-title{
    font-size:var(--page-title-size-sm);
  }
}
@media (max-width:380px){
  .page-title,
  .contact-hero .page-title{
    font-size:var(--page-title-size-xs);
  }
}

/* Filtros */
.filters{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:14px;padding:30px var(--pad);
  border-bottom:1px solid var(--hairline);
}
.filter-group{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.filter-btn{
  display:inline-flex;align-items:center;gap:10px;
  height:40px;padding:0 18px;
  border:1px solid var(--ink);
  background:var(--bg-soft);
  color:var(--ink);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;font-weight:500;
  text-transform:uppercase;
  border-radius:2px;
  cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.filter-btn .count{
  font-size:9px;
  padding:2px 7px;border-radius:99px;
  background:var(--ink);color:var(--bg);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.filter-btn:hover{background:var(--ink);color:var(--bg)}
.filter-btn:hover .count{background:var(--bg);color:var(--ink)}
.filter-btn.active{background:var(--ink);color:var(--bg)}
.filter-btn.active .count{background:var(--bg);color:var(--ink)}
/* color de los pills de categoría según tipo */
.filter-btn[data-cat="ilustracion"]   .count{background:var(--cat-ilustracion);color:#fff}
.filter-btn[data-cat="full-branding"] .count{background:var(--cat-full-branding);color:#fff}
.filter-btn[data-cat="mercadeo"]      .count{background:var(--cat-mercadeo);color:#fff}
.filter-btn[data-cat="ilustracion"].active{background:var(--cat-ilustracion);border-color:var(--cat-ilustracion);color:#fff}
.filter-btn[data-cat="full-branding"].active{background:var(--cat-full-branding);border-color:var(--cat-full-branding);color:#fff}
.filter-btn[data-cat="mercadeo"].active{background:var(--cat-mercadeo);border-color:var(--cat-mercadeo);color:#fff}
.filter-btn[data-cat="ilustracion"]:hover{background:var(--cat-ilustracion);border-color:var(--cat-ilustracion);color:#fff}
.filter-btn[data-cat="full-branding"]:hover{background:var(--cat-full-branding);border-color:var(--cat-full-branding);color:#fff}
.filter-btn[data-cat="mercadeo"]:hover{background:var(--cat-mercadeo);border-color:var(--cat-mercadeo);color:#fff}

/* leyenda lateral */
.filter-legend{
  display:flex;gap:22px;align-items:center;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.3em;font-weight:500;
  text-transform:uppercase;color:var(--ink-mute);
}
.legend-item{display:inline-flex;align-items:center;gap:8px}
.legend-dot{
  width:10px;height:10px;display:inline-block;border-radius:2px;
}
.legend-dot.ilustracion{background:var(--cat-ilustracion)}
.legend-dot.full-branding{background:var(--cat-full-branding)}
.legend-dot.mercadeo{background:var(--cat-mercadeo)}

/* Grid */
.gallery{
  padding:50px var(--pad) 60px;
}
.gallery-grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.gallery-card{
  position:relative;
  aspect-ratio: 2600 / 2044; /* proporción del logo Toscana — ligeramente apaisada */
  overflow:hidden;
  background:var(--bg-soft);
  display:block;
  border-radius:2px;
}
.gallery-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease-out), filter .6s var(--ease-out);
}
.gallery-card:hover img{transform:scale(1.06)}

/* Card with colored bg block (per category) */
.gallery-card-special{
  display:flex;flex-direction:column;justify-content:space-between;
  padding:24px;color:#fff;
}
.gallery-card-special.cat-ilustracion{background:var(--cat-ilustracion)}
.gallery-card-special.cat-full-branding{background:var(--cat-full-branding)}
.gallery-card-special.cat-mercadeo{background:var(--cat-mercadeo)}
.gallery-card-special .gc-cat{
  font-family:var(--f-serif);font-style:italic;font-size:14px;font-weight:400;
}
.gallery-card-special .gc-name{
  font-family:var(--f-display);font-size:32px;line-height:1;letter-spacing:-.01em;
}

/* Overlay con info al hover — cobertura total con el color de la categoría.
   Mismo lenguaje visual que el overlay del home, pero coloreado según cat. */
.gc-overlay{
  position:absolute;inset:0;
  padding:24px 26px;
  display:flex;flex-direction:column;justify-content:space-between;
  color:#fff;
  opacity:0;
  transition:opacity .4s var(--ease);
}
.gallery-card:hover .gc-overlay{opacity:1}

/* Background del overlay — siempre negro semi-transparente, uniforme
   en TODAS las tarjetas independiente de la categoría. */
.gallery-card .gc-overlay{background:rgba(45,42,40,.92)}

/* Etiqueta de categoría arriba a la derecha */
.gc-overlay-cat{
  align-self:flex-end;
  font-family:var(--f-body);
  font-size:11px;
  letter-spacing:.2em;
  font-weight:600;
  text-transform:uppercase;
  line-height:1;
}
.gc-overlay-info{
  display:flex;flex-direction:column;gap:14px;
}
.gc-overlay-name{
  font-family:var(--f-body);
  font-size:20px;
  letter-spacing:.14em;
  font-weight:700;
  text-transform:uppercase;
  margin:0;line-height:1.15;
}
.gc-overlay-tags{
  font-family:var(--f-body);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  margin:0;line-height:1.4;
}
.gc-overlay-year{
  font-family:var(--f-body);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  margin:0;
}

/* Responsive: en móvil reducir tamaños */
@media (max-width:560px){
  .gc-overlay{padding:18px 18px}
  .gc-overlay-name{font-size:16px;letter-spacing:.1em}
  .gc-overlay-tags,
  .gc-overlay-year,
  .gc-overlay-cat{font-size:10px}
}

/* ============================ FOOTER CTA ============================
   Doble columna editorial. En el home aparece encima de la cinta de
   marcas; en el resto de páginas, encima del footer.
   Tipo "ticket" — fondo crema, dos columnas tappable claramente.
   ==================================================================== */
.footer-cta-section{
  background:var(--bg);
}
.footer-cta{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  background:var(--bg);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  max-width:1440px;
  margin:0 auto;
}
.footer-cta-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  padding:42px clamp(24px, 3.5vw, 44px) 36px;
  text-decoration:none;
  color:var(--ink);
  background:var(--bg);
  transition:background .4s var(--ease), color .4s var(--ease);
  overflow:hidden;
  cursor:pointer;
  min-height:240px;
}
.footer-cta-card + .footer-cta-card{
  border-left:1px solid var(--hairline);
}

/* Fila superior de cada card: número a la izquierda + flecha a la derecha */
.footer-cta-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}
.footer-cta-num{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.32em;
  font-weight:700;
  color:var(--highlight);
  transition:color .4s var(--ease);
}
.footer-cta-eyebrow{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-mute);
  font-weight:500;
  transition:color .4s var(--ease);
  margin-top:auto;
}
.footer-cta-title{
  font-family:var(--f-display);
  font-size:clamp(30px, 3vw, 44px);
  letter-spacing:-.025em;
  line-height:.95;
  text-transform:uppercase;
  color:var(--ink);
  transition:color .4s var(--ease);
  margin:0;
}
.footer-cta-arrow-wrap{
  flex-shrink:0;
  width:44px;height:44px;
  border:1.5px solid var(--ink);
  border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.footer-cta-arrow{
  transition:transform .4s var(--ease);
}

/* Hover: card se invierte (fondo oscuro + texto crema) */
.footer-cta-card:hover{
  background:var(--ink);
  color:var(--bg);
}
.footer-cta-card:hover .footer-cta-eyebrow{
  color:rgba(255,251,247,.55);
}
.footer-cta-card:hover .footer-cta-title{
  color:var(--bg);
}
.footer-cta-card:hover .footer-cta-num{
  color:var(--highlight);
}
.footer-cta-card:hover .footer-cta-arrow-wrap{
  background:var(--highlight);
  color:#fff;
  border-color:var(--highlight);
  transform:rotate(-12deg) scale(1.08);
}
.footer-cta-card:hover .footer-cta-arrow{
  transform:translate(2px, -2px);
}
.home-cta-btn{
  display:inline-flex;align-items:center;gap:14px;
  min-width:220px;
  padding:18px 28px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:600;
  text-decoration:none;
  border-radius:2px;
  position:relative;
  overflow:hidden;
  transition:transform .35s var(--ease), color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  justify-content:space-between;
}
.home-cta-btn svg{
  transition:transform .35s var(--ease);
  flex-shrink:0;
}
.home-cta-btn:hover svg{
  transform:translateX(6px);
}
/* Primario: fondo oscuro */
.home-cta-btn-primary{
  background:var(--ink);
  color:var(--bg);
  border:1.5px solid var(--ink);
}
.home-cta-btn-primary:hover{
  background:var(--highlight);
  border-color:var(--highlight);
  color:#fff;
}
/* Secundario: outline */
.home-cta-btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--ink);
}
.home-cta-btn-ghost:hover{
  background:var(--ink);
  color:var(--bg);
}

/* Responsive footer CTA */
@media (max-width:720px){
  .footer-cta{
    grid-template-columns:1fr;
  }
  .footer-cta-card + .footer-cta-card{
    border-left:none;
    border-top:1px solid var(--hairline);
  }
  .footer-cta-card{
    /* En móvil reducimos la altura y el padding para que no se sientan
       enormes apilados verticalmente. */
    min-height:0;
    padding:24px clamp(20px, 5vw, 28px) 26px;
    gap:10px;
  }
  .footer-cta-num{ font-size:10px; }
  .footer-cta-eyebrow{ font-size:9px; letter-spacing:.26em; }
  .footer-cta-title{ font-size:clamp(26px, 7vw, 34px); }
  .footer-cta-arrow-wrap{ width:38px;height:38px; }
  .footer-cta-arrow{ width:16px;height:16px; }
}

/* Responsive footer general */
@media (max-width:900px){
  .footer-masthead{
    gap:32px;
    padding-bottom:40px;
    margin-bottom:40px;
  }
  .footer-logo{ max-width:180px; }
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:36px;
  }
}
@media (max-width:560px){
  .site-footer{ padding:70px var(--pad) 30px; }
  .footer-masthead{
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
    padding-bottom:32px;
    margin-bottom:32px;
  }
  .footer-logo{ max-width:140px; }
  .footer-meta{
    align-items:flex-start;
    text-align:left;
  }
  .footer-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .footer-bottom{
    grid-template-columns:1fr;
    gap:16px;
    text-align:center;
  }
  .footer-bottom .copy,
  .footer-bottom .timestamp,
  .footer-bottom .legal{
    justify-content:center;
    text-align:center;
  }
}


/* CTA Cotizar bar (al final del portafolio) */
.cta-bar{
  padding:60px var(--pad);
  border-top:1px solid var(--hairline);
}
.cta-bar-inner{
  max-width:var(--max);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.cta-bar-text{
  font-family:var(--f-serif);font-style:italic;font-size:clamp(20px,2.4vw,30px);
  font-weight:300;color:var(--ink-2);margin:0;
  letter-spacing:-.015em;line-height:1.4;
}
.cta-bar-btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:18px;
  min-width:300px;
  padding:20px 28px;
  border:1px solid var(--ink);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;font-weight:500;
  text-transform:uppercase;
  color:var(--ink);
  position:relative;overflow:hidden;
  transition:color .35s var(--ease);
}
.cta-bar-btn::before{
  content:"";position:absolute;inset:0;
  background:var(--ink);
  transform:translateY(101%);
  transition:transform .4s var(--ease);
  z-index:-1;
}
.cta-bar-btn:hover{color:var(--bg)}
.cta-bar-btn:hover::before{transform:translateY(0)}
.cta-bar-btn::after{content:"›";font-size:18px}

/* Quote claim block (portafolio) */
.portfolio-quote{
  padding:90px var(--pad);
  text-align:center;
  border-top:1px solid var(--hairline);
}
.portfolio-quote .pq-claim{
  font-family:var(--f-serif);font-style:italic;font-size:clamp(22px,2.8vw,34px);
  font-weight:300;color:var(--ink);
  margin:0 auto 28px;max-width:720px;line-height:1.4;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.portfolio-quote .pq-claim em{font-style:italic;font-weight:600}
.portfolio-quote .pq-text{
  max-width:620px;margin:0 auto;
  font-size:15px;line-height:1.8;color:var(--ink-2);
  letter-spacing:.005em;
}


/* =========================================================
   COTIZAR / RECEPCIÓN
   ========================================================= */
.quote-wrap{
  padding:60px 0 100px;
}
.quote-form{
  max-width:740px;margin:0 auto;
  padding:0 var(--pad);
}

.field{
  margin-bottom:36px;
  position:relative;
}
.field label.field-label,
.field legend{
  display:block;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;font-weight:500;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:16px;
  padding-bottom:16px;
  border-bottom:1px solid var(--hairline);
}
.field-label .req,
.field legend .req{color:var(--accent);margin-left:2px}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea{
  width:100%;
  padding:18px 20px;
  background:transparent;
  border:1px solid var(--hairline-strong);
  border-radius:2px;
  font-family:var(--f-body);
  font-size:15px;color:var(--ink);
  letter-spacing:.005em;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder{
  color:var(--ink-mute);opacity:.55;
}
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--ink);
  background:var(--bg-soft);
}
.field-error{
  display:none;
  margin-top:8px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.26em;font-weight:500;
  text-transform:uppercase;
  color:#C0431F;
}
.field.has-error .field-error{display:block}
.field.has-error input,
.field.has-error textarea{border-color:#C0431F}

/* Radios y checkboxes con estilo de casillas cuadradas como el PDF */
.choices{display:flex;flex-direction:column;gap:10px}
.choice{
  position:relative;
  display:flex;align-items:center;gap:14px;
  padding:8px 0;
  cursor:pointer;
  user-select:none;
}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice .box{
  width:18px;height:18px;
  border:1.5px solid var(--ink);
  border-radius:2px;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .25s var(--ease);
}
.choice .box svg{opacity:0;transition:opacity .2s var(--ease)}
.choice input:checked + .box{background:var(--ink)}
.choice input:checked + .box svg{opacity:1}
.choice span.label{
  font-size:15px;color:var(--ink-2);line-height:1.4;
  letter-spacing:.005em;font-weight:400;
}
.choice:hover .box{background:rgba(26,24,23,.08)}
.choice input:focus-visible + .box{outline:2px solid var(--accent);outline-offset:2px}

/* Slider de inversión */
.invest{
  padding:30px 0 10px;
  text-align:center;
}
.invest-scale{
  display:flex;justify-content:space-between;align-items:flex-start;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;font-weight:500;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:24px;
}
.invest-scale .col{display:flex;flex-direction:column;gap:6px}
.invest-scale .col.center{align-items:center}
.invest-scale .col.right{align-items:flex-end;text-align:right}
.invest-scale .lab{color:var(--ink);font-weight:600}
.invest-scale .sub{opacity:.7;font-size:9px;font-weight:400;letter-spacing:.22em}

.invest-track{
  position:relative;
  height:48px;
  display:flex;align-items:center;
}
.invest-track::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--hairline-strong);
}
.invest-dots{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  pointer-events:none;
  z-index:2;
}
.invest-dots span{
  width:8px;height:8px;border-radius:50%;background:var(--hairline-strong);
}
.invest-input{
  position:absolute;inset:0;
  width:100%;
  appearance:none;-webkit-appearance:none;
  background:transparent;
  z-index:3;
  margin:0;
}
.invest-input::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:0;height:0;
  border-left:13px solid transparent;border-right:13px solid transparent;
  border-bottom:22px solid var(--ink);
  cursor:grab;
  margin-top:-8px;
}
.invest-input::-moz-range-thumb{
  width:0;height:0;background:transparent;border:none;
  border-left:13px solid transparent;border-right:13px solid transparent;
  border-bottom:22px solid var(--ink);
  cursor:grab;
}
.invest-input:active::-webkit-slider-thumb{cursor:grabbing}

.invest-readout{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;margin-top:26px;
}
.invest-amount{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 32px;background:var(--ink);color:var(--bg);
  font-family:var(--f-display);font-size:26px;letter-spacing:-.01em;
  border-radius:2px;
}
.invest-amount .currency-suffix{
  font-family:var(--f-mono);
  font-size:10px;margin-left:8px;letter-spacing:.3em;font-weight:500;
  opacity:.7;
}
.currency-switch{
  display:inline-flex;align-items:center;
  border:1px solid var(--hairline-strong);border-radius:2px;overflow:hidden;
}
.currency-btn{
  padding:6px 12px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.25em;font-weight:500;
  text-transform:uppercase;
  color:var(--ink-mute);background:transparent;
  cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease);
  border:none;
}
.currency-btn + .currency-btn{border-left:1px solid var(--hairline-strong)}
.currency-btn:hover{color:var(--ink)}
.currency-btn.active{background:var(--ink);color:var(--bg)}

.terms-block{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:16px;
  padding-bottom:16px;
  border-bottom:1px solid var(--hairline);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;font-weight:500;
  text-transform:uppercase;
}
.terms-block .read-link{
  color:var(--ink-mute);text-decoration:underline;font-size:10px;
  letter-spacing:.26em;font-weight:400;
}
.terms-block .read-link:hover{color:var(--ink)}

.submit-row{
  display:flex;justify-content:center;
  margin-top:50px;
}
.btn-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-width:300px;
  padding:22px 40px;
  background:var(--ink);color:var(--bg);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.34em;font-weight:600;
  text-transform:uppercase;
  border-radius:2px;border:none;cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.btn-submit:hover{background:var(--accent-2);transform:translateY(-1px)}
.btn-submit:disabled{opacity:.5;cursor:not-allowed}

/* "Otro servicio" — input condicional */
.interest-other-wrap{
  margin-top:16px;
  padding-top:14px;
  border-top:1px dashed var(--hairline);
  animation: interestOtherIn .35s var(--ease);
}
.interest-other-wrap[hidden]{ display:none }
.interest-other-wrap input{
  width:100%;
  padding:12px 16px;
  background:transparent;
  border:none;border-bottom:1px solid var(--hairline-strong);
  font-family:var(--f-mono);font-size:13px;color:var(--ink);
  letter-spacing:.02em;
  transition:border-color .25s var(--ease);
}
.interest-other-wrap input:focus{ outline:none; border-bottom-color:var(--ink) }
.interest-other-wrap input::placeholder{ color:var(--ink-mute); font-style:italic }
@keyframes interestOtherIn{
  from{ opacity:0; transform:translateY(-4px) }
  to  { opacity:1; transform:translateY(0) }
}

/* Mensaje de éxito */
.quote-success{
  display:none;
  margin-top:40px;
  padding:36px;text-align:center;
  border:1px solid var(--ink);
  background:var(--bg-soft);
}
.quote-success.show{display:block}
.quote-success-msg{
  font-family:var(--f-serif);font-style:italic;font-size:20px;font-weight:300;
  letter-spacing:-.01em;line-height:1.5;
  margin:0 0 18px;
}
.quote-success-extra{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:400;
  margin:0 0 20px;line-height:1.6;
}
.quote-success-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 28px;
  background:#25D366;color:#fff;
  text-decoration:none;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  border-radius:2px;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.quote-success-btn:hover{ background:#1ebd5b; transform:translateY(-1px) }

/* Contacto directo */
.direct-contact{
  padding:60px var(--pad) 0;
  text-align:center;
  border-top:1px solid var(--hairline);
  margin-top:40px;
}
.direct-contact .label{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.32em;font-weight:500;
  text-transform:uppercase;
  color:var(--ink-mute);margin:0 0 28px;
}
.direct-contact .links{
  display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
}
.direct-contact a{
  display:inline-flex;align-items:center;gap:12px;
  padding:18px 24px;
  background:var(--ink);color:var(--bg);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;font-weight:500;
  text-transform:uppercase;
  border-radius:2px;
  transition:background .3s var(--ease);
}
.direct-contact a:hover{background:var(--accent-2)}


/* =========================================================
   DETALLE DE PROYECTO
   ========================================================= */
.project-hero{
  padding:150px var(--pad) 40px;
  text-align:center;
}
.project-back{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;font-weight:500;
  text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:36px;
  transition:color .3s var(--ease);
}
.project-back:hover{color:var(--ink)}
.project-back::before{content:"←"}

/* =========================================================
   Botón flotante "← Portafolio" — centrado debajo del header
   Aparece cuando se hace scroll dentro de un proyecto, para
   que el usuario nunca tenga que volver al inicio para regresar.
   Posicionado claramente DEBAJO del header (que tiene z-index 50).
   ========================================================= */
.project-back-float{
  position:fixed;
  top:150px;         /* claramente separado del header */
  left:50%;
  z-index:60;        /* SOBRE el header por si los anchos se mueven */
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px 11px 16px;
  background:var(--highlight);          /* naranja oficial #FF4500 */
  color:var(--cream-on-dark);            /* texto crema */
  font-family:var(--f-mono);
  font-size:10px;letter-spacing:.22em;font-weight:600;
  text-transform:uppercase;
  border-radius:100px;
  text-decoration:none;
  opacity:0;
  transform:translate(-50%, -10px);     /* centrado horizontal + slide vertical */
  transition:opacity .35s var(--ease), transform .35s var(--ease), background-color .25s ease, box-shadow .25s ease;
  pointer-events:none;       /* no clickeable hasta que aparezca */
  box-shadow:0 6px 22px rgba(255,69,0,.32);
}
.project-back-float.is-visible{
  opacity:1;
  transform:translate(-50%, 0);
  pointer-events:auto;
}
.project-back-float:hover{
  background:#E63E00;                    /* naranja un punto más oscuro */
  color:var(--cream-on-dark);
  box-shadow:0 10px 28px rgba(255,69,0,.42);
}
.project-back-float-icon{
  display:inline-block;
  font-size:14px;
  line-height:1;
  transition:transform .25s var(--ease);
}
.project-back-float:hover .project-back-float-icon{
  transform:translateX(-3px);
}
@media (max-width:720px){
  .project-back-float{
    top:120px;
    padding:10px 18px 10px 14px;
    font-size:9px;
    letter-spacing:.2em;
  }
  .project-back-float-icon{ font-size:13px; }
}
.project-title{
  font-family:var(--f-display);
  font-size:clamp(60px,11vw,160px);
  letter-spacing:-.035em;line-height:.85;
  margin:0 0 28px;font-weight:400;
}
.project-meta{
  display:inline-flex;gap:36px;flex-wrap:wrap;justify-content:center;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;font-weight:500;
  text-transform:uppercase;
  color:var(--ink-mute);
  padding-bottom:38px;border-bottom:1px solid var(--hairline);
}
.project-meta dt{display:inline;color:var(--ink-mute);font-weight:400}
.project-meta dd{display:inline;margin:0 0 0 8px;color:var(--ink);font-weight:600}
.project-cover{
  max-width:1320px;margin:60px auto 0;padding:0 var(--pad);
}
.project-cover img{
  width:100%;height:auto;border-radius:2px;display:block;
}
/* Descripción del proyecto — texto principal + aside con tools/behance */
.project-description{
  padding:80px var(--pad);
}
.project-description-inner{
  max-width:1180px;margin:0 auto;
  display:grid;
  grid-template-columns:1fr 280px;
  gap:80px;
  align-items:start;
}
.project-description-text{
  display:flex;flex-direction:column;gap:28px;
}
.project-brief{
  font-family:var(--f-serif);font-style:italic;font-weight:300;
  font-size:clamp(22px,2.4vw,28px);
  line-height:1.4;letter-spacing:-.01em;
  color:var(--ink);
  margin:0;
}
.project-long{
  font-size:16px;line-height:1.75;
  color:var(--ink-2);
  letter-spacing:.005em;
}
.project-long strong{color:var(--ink);font-weight:600}
.project-long p{margin:0 0 16px}
.project-long p:last-child{margin-bottom:0}

/* Aside con tools + link a Behance */
.project-side{
  display:flex;flex-direction:column;gap:36px;
  padding-top:8px;
  border-top:1px solid var(--hairline);
}
.project-side-block[hidden]{display:none}
.project-side-label{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;font-weight:500;
  text-transform:uppercase;
  color:var(--ink-mute);margin:24px 0 14px;
}
.project-tools{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:8px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.05em;font-weight:500;
  color:var(--ink);
}
.project-tools li{padding:0}
.project-side-link{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;font-weight:600;
  text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding-bottom:6px;
  width:fit-content;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.project-side-link:hover{color:var(--highlight);border-bottom-color:var(--highlight)}
.project-side-link svg{transition:transform .25s var(--ease)}
.project-side-link:hover svg{transform:translate(2px,-2px)}

/* Galería de imágenes */
.project-gallery-wrap{
  padding:0 var(--pad) 80px;
}
.project-gallery{
  max-width:1320px;margin:0 auto;
  display:flex;flex-direction:column;gap:14px;
}
.project-gallery img,
.project-gallery video,
.project-gallery iframe,
.project-gallery .gal-cell{
  width:100%;height:auto;border-radius:2px;
  display:block;
}
.project-gallery .gal-cell img,
.project-gallery .gal-cell video,
.project-gallery .gal-cell iframe{width:100%;height:auto;display:block;border-radius:2px}
.project-gallery video{background:#000}

/* YouTube iframe como "imagen en movimiento": aspect-ratio 16:9 */
.project-gallery iframe.yt-as-image{
  aspect-ratio: 16 / 9;
  background: #000;
  border: 0;
}

/* =========================================================
   Videos "imagen en movimiento" — sin controles, sin
   interacción del usuario. Se comportan como un GIF.
   ========================================================= */
.project-gallery video.as-image,
.project-gallery iframe.as-image,
.project-gallery .gal-cell video.as-image,
.project-gallery .gal-cell iframe.as-image{
  cursor:default;
  pointer-events:none;        /* nada de clicks / hover / long-press */
  -webkit-user-select:none;
  user-select:none;
  outline:none;
}
.project-gallery video.as-image::-webkit-media-controls,
.project-gallery video.as-image::-webkit-media-controls-enclosure,
.project-gallery video.as-image::-webkit-media-controls-panel,
.project-gallery video.as-image::-webkit-media-controls-start-playback-button{
  display:none !important;
  -webkit-appearance:none;
  appearance:none;
}

/* En modo edición, los videos pierden sus controles nativos para que los botones del editor sean los que reciban los clicks. */
body.gal-editor-on .project-gallery .gal-cell.is-video video{ pointer-events:none }

/* Next project link */
.next-project{
  padding:80px var(--pad);
  border-top:1px solid var(--hairline);
}
.next-project a{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  max-width:var(--max);margin:0 auto;
  font-family:var(--f-display);
  font-size:clamp(36px,6vw,80px);
  line-height:.88;letter-spacing:-.03em;
  text-transform:uppercase;
  color:var(--ink);
  transition:color .3s var(--ease);
}
.next-project a:hover{color:var(--highlight)}
.next-project .next-label{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.32em;font-weight:500;
  text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:16px;display:block;
}
.next-project .next-arrow{
  font-size:.55em;
  transition:transform .35s var(--ease);
}
.next-project a:hover .next-arrow{transform:translateX(10px)}

/* =========================================================
   RESPONSIVE EXTRA
   ========================================================= */
@media (max-width:960px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .filters{flex-direction:column;align-items:stretch}
  .filter-legend{justify-content:center;flex-wrap:wrap}
  .cta-bar-inner{flex-direction:column;align-items:stretch;text-align:center}
  .cta-bar-btn{justify-content:space-between}
  .invest-amount{font-size:18px;padding:12px 20px}
  .terms-block{flex-direction:column;align-items:flex-start;gap:8px}
  .project-description-inner{grid-template-columns:1fr;gap:48px}
  .project-side{border-top:1px solid var(--hairline);padding-top:24px}
  .project-gallery{gap:10px}
}
@media (max-width:560px){
  .gallery-grid{grid-template-columns:1fr;gap:14px}
  .invest-scale{font-size:9px}

  /* Filtros en móvil: grid 2 columnas + Todo full-width arriba */
  .filter-group{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    width:100%;
  }
  .filter-group .filter-btn{
    width:100%;
    justify-content:center;
    padding:0 10px;
    height:42px;
    font-size:10px;
    letter-spacing:.16em;
  }
  /* El primer botón "Todo" se extiende a todo el ancho */
  .filter-group .filter-btn:first-child{
    grid-column:1 / -1;
  }
  /* La leyenda lateral es redundante en móvil — los chips ya muestran color */
  .filter-legend{display:none}
}

/* =========================================================
   PÁGINA DE CONTACTO
   ========================================================= */
.contact-page{
  padding:60px 0 0;
}
.contact-hero{
  padding:60px var(--pad) 90px;
}
.contact-hero .container{
  max-width:var(--max);margin:0 auto;
  text-align:center;
}
.contact-hero .section-label{margin-bottom:28px}
.contact-hero .page-title{
  margin:0 0 28px;
}
.contact-subtitle{
  font-family:var(--f-serif);font-style:italic;font-weight:300;
  font-size:clamp(20px,2.2vw,28px);
  color:var(--ink-2);
  max-width:680px;
  margin:0 auto;
  line-height:1.4;
  letter-spacing:-.005em;
}

.contact-info{
  padding:60px var(--pad) 100px;
}
.contact-info .container{
  max-width:var(--max);margin:0 auto;
}
/* Grid asimétrico: 3 columnas × 2 filas. El mapa ocupa 2 columnas
   en la segunda fila para crear un foco visual. */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--hairline);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.contact-block{
  background:var(--bg);
  padding:40px 32px;
  min-height:200px;
  display:flex;
  flex-direction:column;
}
.contact-block-label{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.32em;font-weight:500;
  color:var(--ink-mute);
  text-transform:uppercase;
  margin:0 0 18px;
}
.contact-block-content{
  font-family:var(--f-serif);font-style:italic;font-weight:300;
  font-size:19px;line-height:1.45;
  color:var(--ink);
  margin:0;
  letter-spacing:-.005em;
}
.contact-block-link{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-body);
  font-size:16px;font-weight:500;
  color:var(--ink);
  text-decoration:none;
  margin-bottom:8px;
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), color .25s var(--ease);
  width:fit-content;
}
.contact-block-link:hover{
  color:var(--highlight);
  border-bottom-color:var(--highlight);
}
.contact-block-link svg{
  flex-shrink:0;
  transition:transform .25s var(--ease);
}
.contact-block-link:hover svg{
  transform:translate(2px, -2px);
}
.contact-social-list{
  display:flex;flex-direction:column;gap:10px;
}

/* Sección de mapa — ancho completo, debajo del grid de contacto */
.contact-map-section{
  padding:0 var(--pad) 80px;
  background:var(--bg);
}
.contact-map-frame{
  position:relative;
  width:100%;
  height:clamp(320px, 50vw, 520px);
  overflow:hidden;
  border:1px solid var(--hairline);
  background:var(--bg-soft);
}
.contact-map-frame iframe{
  width:100%;
  height:100%;
  display:block;
  filter:saturate(.92);
}
.contact-map-link{
  position:absolute;
  bottom:16px;
  right:16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--ink);
  color:var(--bg);
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.22em;
  font-weight:600;
  text-transform:uppercase;
  text-decoration:none;
  padding:10px 16px;
  transition:background .2s ease, color .2s ease;
  box-shadow:0 6px 18px -6px rgba(45,42,40,.3);
}
.contact-map-link:hover{
  background:var(--highlight);
  color:#FFFBF7;
}
.contact-map-link svg{
  transition:transform .2s ease;
}
.contact-map-link:hover svg{
  transform:translate(2px, -2px);
}

@media (max-width:560px){
  .contact-map-section{padding:0 16px 60px}
  .contact-map-frame{height:280px}
}

/* Responsive */
@media (max-width:960px){
  .contact-hero{padding:40px var(--pad) 60px}
  .contact-info{padding:40px var(--pad) 70px}
  .contact-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .contact-block{padding:32px 24px;min-height:160px}
}
@media (max-width:560px){
  .contact-grid{grid-template-columns:1fr}
  .contact-block-content{font-size:17px}
}


/* =========================================================
   EDITOR VISUAL DE TEXTOS (i18n)
   Identidad: mono / dark / naranja #ff4500 — match hotspot-editor
   ========================================================= */

/* Botón flotante para activar (idéntica identidad al hotspot toggle) */
#txtEdToggleBtn{
  position: fixed;
  bottom: 20px; right: 20px;
  background: rgba(45,42,40,.85);
  color: #fff;
  padding: 8px 14px;
  border-radius: 2px;
  border: none;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 9998;
  backdrop-filter: blur(8px);
  transition: background-color .15s ease;
}
#txtEdToggleBtn:hover{ background: #ff4500; }
#txtEdToggleBtn.is-on{ background: #ff4500; }

/* Resalte de nodos editables cuando el modo está activo */
body.txt-editor-on [data-i18n],
body.txt-editor-on [data-i18n-html],
body.txt-editor-on [data-i18n-placeholder]{
  outline: 1px dashed rgba(255, 69, 0, .45);
  outline-offset: 2px;
  cursor: text !important;
  transition: outline-color .12s ease, background-color .12s ease;
}
body.txt-editor-on [data-i18n]:hover,
body.txt-editor-on [data-i18n-html]:hover,
body.txt-editor-on [data-i18n-placeholder]:hover{
  outline: 2px solid #ff4500;
  background-color: rgba(255, 69, 0, .08);
}
body.txt-editor-on .txt-ed-active{
  outline: 2px solid #ff4500 !important;
  background-color: rgba(255, 69, 0, .14) !important;
}

/* Toolbar flotante (visible cuando el editor está activo) */
.txt-editor-toolbar{
  position: fixed;
  right: 20px; bottom: 64px;
  z-index: 9999;
  background: rgba(45,42,40,.96);
  color: #fff;
  padding: 16px 18px;
  border-radius: 2px;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; line-height: 1.5;
  letter-spacing: .04em;
  display: none;
  width: 320px;
  max-width: calc(100vw - 40px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 40px rgba(0,0,0,.4);
  box-sizing: border-box;
}
.txt-editor-toolbar.on{ display: block; }
.txt-editor-toolbar .txt-ed-row{
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.txt-editor-toolbar .txt-ed-row:last-child{ margin-bottom: 0; }
.txt-editor-toolbar .txt-ed-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff4500;
  box-shadow: 0 0 0 4px rgba(255,69,0,.18);
  display: inline-block;
}
.txt-editor-toolbar strong{
  font-weight: 600;
  font-size: 11px;
  color: #ff4500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.txt-editor-toolbar .txt-ed-count{
  margin-left: auto;
  font-size: 10px;
  color: rgba(255,255,255,.55);
  padding: 2px 6px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
}
.txt-editor-toolbar .txt-ed-btn{
  font: inherit;
  padding: 8px 12px;
  border-radius: 2px;
  border: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  transition: filter .15s ease, background-color .15s ease;
}
.txt-editor-toolbar .txt-ed-btn:hover{ filter: brightness(1.15); }
.txt-editor-toolbar .txt-ed-btn.primary{
  background: #ff4500; color: #fff;
}
.txt-editor-toolbar .txt-ed-btn.ghost{
  background: transparent;
  color: rgba(255,255,255,.55);
}
.txt-editor-toolbar .txt-ed-btn.ghost:hover{ color: #fff; background: rgba(255,255,255,.06); }
.txt-editor-toolbar .txt-ed-hint{
  margin: 8px 0 0; font-size: 10px;
  color: rgba(255,255,255,.5); line-height: 1.5;
}
.txt-editor-toolbar kbd{
  background: rgba(255,255,255,.1);
  padding: 1px 5px; border-radius: 2px;
  font: inherit; font-size: 9px;
}

/* =========================================================
   Panel de TAMAÑOS (📏) — abre desde la toolbar del editor
   ========================================================= */
.txt-sizes-panel{
  position: fixed;
  right: 360px; bottom: 64px;
  z-index: 9999;
  width: 380px;
  max-height: 78vh;
  overflow-y: auto;
  background: rgba(45,42,40,.97);
  color: #fff;
  border-radius: 2px;
  padding: 16px 18px;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.4;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 40px rgba(0,0,0,.4);
  box-sizing: border-box;
}
@media (max-width: 820px){
  .txt-sizes-panel{
    right: 12px; left: 12px; bottom: 12px;
    width: auto; max-height: 70vh;
  }
}
.txt-sizes-panel .txt-sizes-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding-bottom:10px; margin-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.txt-sizes-panel .txt-sizes-head strong{
  color:#ff4500; font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
}
.txt-sizes-panel .txt-sizes-x{
  background:transparent; color:rgba(255,255,255,.55);
  border:none; cursor:pointer; font-size:20px; line-height:1;
  padding:0 4px; transition:color .15s ease;
}
.txt-sizes-panel .txt-sizes-x:hover{ color:#fff; }
.txt-sizes-panel .txt-sizes-hint{
  margin:0 0 14px; font-size:10px;
  color:rgba(255,255,255,.5); line-height:1.5;
}
.txt-sizes-panel .txt-sizes-group{
  margin-bottom:16px;
}
.txt-sizes-panel .txt-sizes-group:last-of-type{ margin-bottom:8px; }
.txt-sizes-panel .txt-sizes-group h4{
  margin:0 0 8px; font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.txt-sizes-panel .txt-sizes-row{
  display:grid;
  grid-template-columns: 1fr 90px 56px 16px 22px;
  gap:6px; align-items:center;
  margin-bottom:6px;
  padding:4px 0;
}
.txt-sizes-panel .txt-sizes-label{
  font-size:10px; color:rgba(255,255,255,.85);
  letter-spacing:.04em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.txt-sizes-panel input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:3px; background:rgba(255,255,255,.18);
  border-radius:2px; outline:none; cursor:pointer;
}
.txt-sizes-panel input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:13px; height:13px; border-radius:50%;
  background:#ff4500; cursor:pointer;
  box-shadow: 0 0 0 3px rgba(255,69,0,.18);
}
.txt-sizes-panel input[type="range"]::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%;
  background:#ff4500; border:none; cursor:pointer;
}
.txt-sizes-panel input[type="number"]{
  font: inherit;
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:2px;
  padding:4px 6px;
  font-size:11px;
  text-align:right;
  width:100%;
  box-sizing:border-box;
  -moz-appearance:textfield;
}
.txt-sizes-panel input[type="number"]::-webkit-outer-spin-button,
.txt-sizes-panel input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none; margin: 0;
}
.txt-sizes-panel input[type="number"]:focus{
  outline:none; border-color:#ff4500;
}
.txt-sizes-panel .txt-sizes-unit{
  font-size:9px; color:rgba(255,255,255,.45);
  text-align:left;
}
.txt-sizes-panel .txt-sizes-reset{
  background:transparent; color:rgba(255,255,255,.4);
  border:none; cursor:pointer; font-size:13px;
  padding:0; line-height:1;
  transition:color .15s ease, transform .2s ease;
}
.txt-sizes-panel .txt-sizes-reset:hover{
  color:#ff4500; transform:rotate(-90deg);
}
.txt-sizes-panel .txt-sizes-foot{
  padding-top:10px; margin-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:right;
}

/* Panel de edición flotante */
.txt-editor-panel{
  position: absolute;
  width: 380px;
  background: rgba(45,42,40,.97);
  color: #fff;
  border-radius: 2px;
  box-shadow: 0 8px 40px rgba(0,0,0,.4);
  z-index: 9999;
  padding: 16px 18px;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  backdrop-filter: blur(10px);
  box-sizing: border-box;
}
.txt-editor-panel .txt-ed-panel-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.txt-editor-panel .txt-ed-tag{
  display: inline-block;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.7);
  padding: 2px 6px; border-radius: 2px;
  margin-right: 8px;
}
.txt-editor-panel .txt-ed-key{
  font-family: inherit;
  font-size: 10px;
  color: #ff4500;
  letter-spacing: .04em;
}
.txt-editor-panel .txt-ed-x{
  background: none; border: none; font-size: 18px; line-height: 1;
  cursor: pointer; color: rgba(255,255,255,.55); padding: 0 4px;
}
.txt-editor-panel .txt-ed-x:hover{ color: #fff; }
.txt-editor-panel .txt-ed-field{
  display: flex; flex-direction: column; gap: 8px;
}
.txt-editor-panel .txt-ed-lang{
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* Barra de formato */
.txt-editor-panel .txt-ed-fmt-bar{
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.txt-editor-panel .fmt-btn{
  font: inherit; font-size: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px;
  background: rgba(255,255,255,.08);
  color: #fff;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: .08em;
  transition: filter .12s ease, background-color .12s ease;
}
.txt-editor-panel .fmt-btn:hover{ background: #ff4500; }
.txt-editor-panel .fmt-btn.is-active{
  background: #ff4500;
  box-shadow: 0 0 0 2px rgba(255,69,0,.4);
}
.txt-editor-panel .fmt-btn .fmt-label{
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase; opacity: .85;
}
.txt-editor-panel .fmt-hl-preview{
  display: inline-block;
  background: #ff4500; color: #fffbf7;
  font-weight: 700; font-size: 11px;
  padding: 1px 6px;
  border-radius: 1px;
  line-height: 1.1;
  font-family: "Helvetica Neue", Arial, sans-serif;
}
.txt-editor-panel .fmt-btn strong{
  font-weight: 800; font-size: 12px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}
.txt-editor-panel .fmt-hint{
  font-size: 9.5px; color: rgba(255,255,255,.4);
  margin-left: auto; font-style: italic;
}

/* Área de edición (contenteditable / input) — fondo claro para leer bien */
.txt-editor-panel .txt-ed-editable,
.txt-editor-panel .txt-ed-plain{
  width: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 2px;
  background: rgba(255,255,255,.96);
  color: #2d2a28;
  line-height: 1.5;
  box-sizing: border-box;
  min-height: 38px;
  outline: none;
  letter-spacing: 0;
}
.txt-editor-panel .txt-ed-editable.tall{
  min-height: 110px; max-height: 240px; overflow-y: auto;
}
.txt-editor-panel .txt-ed-editable:focus,
.txt-editor-panel .txt-ed-plain:focus{
  border-color: #ff4500;
  box-shadow: 0 0 0 2px rgba(255,69,0,.3);
}
.txt-editor-panel .txt-ed-editable em.hl{
  background: linear-gradient(transparent 12%, #ff4500 12% 88%, transparent 88%);
  color: #fffbf7;
  font-style: normal;
  padding: 0 2px;
  border-radius: 1px;
}
.txt-editor-panel .txt-ed-editable strong{ font-weight: 700; }
.txt-editor-panel .txt-ed-editable strong.hl{ color: #fffbf7; }

/* Preview EN */
.txt-editor-panel .txt-ed-en-preview{
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.05);
  border: 1px dashed rgba(255,255,255,.15);
  border-radius: 2px;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255,255,255,.75);
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: baseline;
}
.txt-editor-panel .txt-ed-en-label{
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: #ff4500; font-weight: 600;
}
.txt-editor-panel .txt-ed-en-value{
  flex: 1 1 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-style: italic;
}
.txt-editor-panel .txt-ed-en-status{
  width: 100%;
  font-size: 9.5px;
  color: rgba(255,255,255,.5);
}

/* Footer del panel */
.txt-editor-panel .txt-ed-panel-foot{
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  gap: 8px;
}
.txt-editor-panel .txt-ed-btn{
  font: inherit; font-size: 9.5px; font-weight: 600;
  padding: 6px 10px;
  background: rgba(255,255,255,.08);
  color: #fff;
  border: none;
  border-radius: 2px; cursor: pointer;
  letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .12s ease;
}
.txt-editor-panel .txt-ed-btn:hover{ background: #ff4500; }
.txt-editor-panel .txt-ed-btn.ghost{
  background: transparent; color: rgba(255,255,255,.5);
}
.txt-editor-panel .txt-ed-btn.ghost:hover{ background: rgba(255,69,0,.3); color: #fff; }
.txt-editor-panel .txt-ed-saveinfo{
  font-size: 9.5px; color: rgba(255,255,255,.4); font-style: italic;
}

/* =========================================================
   MODO INLINE: elementos editables en la página
   ========================================================= */
/* En modo edición, forzamos que el highlight .hl esté SIEMPRE visible
   (en runtime normal, un IntersectionObserver añade .is-marked solo
   cuando el elemento entra al viewport — pero los wrappers recién creados
   por el editor no pasan por ese observer). */
body.txt-editor-on .hl{
  background-size: 100% 88% !important;
  transition: none !important;
}
body.txt-editor-on .hl.hl-underline{
  background-size: 100% 30% !important;
}

body.txt-editor-on [data-txt-ed-inline="1"]{
  outline: 1px dashed rgba(255,69,0,.4);
  outline-offset: 3px;
  cursor: text;
  transition: outline-color .12s ease, background-color .12s ease;
  /* Cursor visible al editar dentro */
  caret-color: #ff4500;
}
body.txt-editor-on [data-txt-ed-inline="1"]:hover{
  outline-color: rgba(255,69,0,.7);
  background-color: rgba(255,69,0,.04);
}
body.txt-editor-on [data-txt-ed-inline="1"]:focus{
  outline: 2px solid #ff4500;
  background-color: rgba(255,69,0,.06);
}

/* Selección de texto cuando el modo está activo */
body.txt-editor-on [data-txt-ed-inline="1"]::selection{
  background: rgba(255,69,0,.35);
  color: inherit;
}
body.txt-editor-on [data-txt-ed-inline="1"] *::selection{
  background: rgba(255,69,0,.35);
  color: inherit;
}

/* Mini-toolbar flotante que aparece sobre la selección */
.txt-ed-float-toolbar{
  position: absolute;
  z-index: 99999;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: rgba(45,42,40,.97);
  border-radius: 3px;
  box-shadow: 0 6px 24px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.2);
  backdrop-filter: blur(8px);
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  animation: txtEdFloatIn .12s ease-out;
}
@keyframes txtEdFloatIn{
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Triángulo apuntando hacia abajo (a la selección) */
.txt-ed-float-toolbar::after{
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(45,42,40,.97);
}
.txt-ed-float-toolbar .fmt-btn{
  font: inherit; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 30px;
  background: rgba(255,255,255,.08);
  color: #fff;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .12s ease;
  padding: 0;
}
.txt-ed-float-toolbar .fmt-btn:hover{ background: #ff4500; }
.txt-ed-float-toolbar .fmt-btn.is-active{
  background: #ff4500;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.txt-ed-float-toolbar .fmt-hl-preview{
  display: inline-block;
  background: #ff4500; color: #fffbf7;
  font-weight: 700; font-size: 12px;
  padding: 1px 6px;
  border-radius: 1px;
  line-height: 1.1;
  font-family: "Helvetica Neue", Arial, sans-serif;
}
.txt-ed-float-toolbar .fmt-btn.is-active .fmt-hl-preview{
  background: #fff; color: #ff4500;
}
.txt-ed-float-toolbar .fmt-btn strong{
  font-weight: 800; font-size: 14px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* Responsive en móvil */
@media (max-width: 560px){
  .txt-editor-panel{
    position: fixed !important;
    left: 8px !important; right: 8px !important;
    width: auto !important; top: auto !important;
    bottom: 130px;
  }
  .txt-editor-toolbar{
    left: 8px; right: 8px;
    width: auto;
    bottom: 70px;
  }
  #txtEdToggleBtn{
    left: 8px; right: 8px; bottom: 8px;
    text-align: center;
  }
}


/* =========================================================
   EDITOR DE GALERÍA — misma identidad visual que el de textos
   ========================================================= */

/* Botón flotante para activar el editor de galería (abajo-izquierda
   en proyecto.html — donde no hay hotspot editor). */
#galEdToggleBtn{
  position: fixed;
  bottom: 20px; left: 20px;
  background: rgba(45,42,40,.85);
  color: #fff;
  padding: 8px 14px;
  border-radius: 2px;
  border: none;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 9998;
  backdrop-filter: blur(8px);
  transition: background-color .15s ease;
}
#galEdToggleBtn:hover{ background: #ff4500; }
#galEdToggleBtn.is-on{ background: #ff4500; }

/* Toolbar flotante del editor de galería */
.gal-editor-toolbar{
  position: fixed;
  left: 20px; bottom: 64px;
  z-index: 9999;
  background: rgba(45,42,40,.96);
  color: #fff;
  padding: 16px 18px;
  border-radius: 2px;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; line-height: 1.5;
  letter-spacing: .04em;
  display: none;
  width: 320px;
  max-width: calc(100vw - 40px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 40px rgba(0,0,0,.4);
  box-sizing: border-box;
}
.gal-editor-toolbar.on{ display: block; }
.gal-editor-toolbar .gal-ed-row{
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.gal-editor-toolbar .gal-ed-row:last-child{ margin-bottom: 0; }
.gal-editor-toolbar .gal-ed-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff4500;
  box-shadow: 0 0 0 4px rgba(255,69,0,.18);
  display: inline-block;
}
.gal-editor-toolbar strong{
  font-weight: 600;
  font-size: 11px;
  color: #ff4500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.gal-editor-toolbar .gal-ed-count{
  margin-left: auto;
  font-size: 10px;
  color: rgba(255,255,255,.55);
  padding: 2px 6px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  white-space: nowrap;
}
.gal-editor-toolbar .gal-ed-btn{
  font: inherit;
  padding: 8px 12px;
  border-radius: 2px;
  border: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  transition: filter .15s ease, background-color .15s ease;
}
.gal-editor-toolbar .gal-ed-btn:hover{ filter: brightness(1.15); }
.gal-editor-toolbar .gal-ed-btn.primary{
  background: #ff4500; color: #fff;
}
.gal-editor-toolbar .gal-ed-btn.ghost{
  background: transparent;
  color: rgba(255,255,255,.55);
}
.gal-editor-toolbar .gal-ed-btn.ghost:hover{ color: #fff; background: rgba(255,255,255,.06); }
.gal-editor-toolbar .gal-ed-hint{
  margin: 8px 0 0; font-size: 10px;
  color: rgba(255,255,255,.5); line-height: 1.5;
}
.gal-editor-toolbar kbd{
  background: rgba(255,255,255,.1);
  padding: 1px 5px; border-radius: 2px;
  font: inherit; font-size: 9px;
}

/* ----- Decoración por celda de galería (solo en modo edición) ----- */
body.gal-editor-on .project-gallery .gal-cell{
  position: relative;
  outline: 1px dashed rgba(255,69,0,.45);
  outline-offset: 2px;
  transition: outline-color .12s ease, background-color .12s ease;
}
body.gal-editor-on .project-gallery .gal-cell:hover{
  outline: 2px solid #ff4500;
}
body.gal-editor-on .project-gallery .gal-cell.is-cover{
  outline: 2px solid #ff4500;
}
body.gal-editor-on .project-gallery .gal-cell.is-cover::before{
  content: "PORTADA";
  position: absolute; top: 12px; left: 12px; z-index: 4;
  background: #ff4500; color: #fff;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: .18em; font-weight: 600;
  padding: 5px 9px; border-radius: 2px;
}
body.gal-editor-on .project-gallery .gal-cell-idx{
  position: absolute; top: 12px; right: 12px; z-index: 4;
  background: rgba(45,42,40,.92);
  color: rgba(255,255,255,.7);
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: .18em;
  padding: 5px 9px; border-radius: 2px;
  pointer-events: none;
}

/* Hover overlay con los botones de acción */
.gal-cell-overlay{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; gap: 6px; justify-content: center; align-items: center;
  padding: 12px;
  background: linear-gradient(180deg, transparent 0%, rgba(45,42,40,.92) 100%);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
body.gal-editor-on .gal-cell:hover .gal-cell-overlay{
  opacity: 1; pointer-events: auto;
}
.gal-cell-overlay .gal-btn{
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: .12em; font-weight: 600;
  text-transform: uppercase;
  background: rgba(255,255,255,.12); color: #fff;
  border: none; border-radius: 2px;
  padding: 8px 11px; cursor: pointer;
  transition: filter .15s ease, background-color .15s ease;
  backdrop-filter: blur(6px);
}
.gal-cell-overlay .gal-btn:hover{ filter: brightness(1.18) }
.gal-cell-overlay .gal-btn.primary{ background: #ff4500; }
.gal-cell-overlay .gal-btn.danger{  background: rgba(220,90,80,.92); }
.gal-cell-overlay .gal-btn[disabled]{ opacity: .35; cursor: not-allowed; }

/* Cover hero también responde al modo edición — sin ser interactivo, solo informativo */
body.gal-editor-on .project-cover{
  outline: 1px dashed rgba(255,69,0,.45);
  outline-offset: 2px;
  position: relative;
}

/* Responsive móvil */
@media (max-width: 560px){
  .gal-editor-toolbar{
    left: 8px; right: 8px;
    width: auto;
    bottom: 70px;
  }
  #galEdToggleBtn{
    left: 8px; right: 8px; bottom: 8px;
    text-align: center;
  }
  .gal-cell-overlay{
    flex-wrap: wrap;
  }
}


/* =========================================================
   EDITOR DE ORDEN DEL PORTAFOLIO — misma identidad visual
   ========================================================= */

/* Botón flotante para activar (abajo-izquierda en portafolio.html). */
#pfEdToggleBtn{
  position: fixed;
  bottom: 20px; left: 20px;
  background: rgba(45,42,40,.85);
  color: #fff;
  padding: 8px 14px;
  border-radius: 2px;
  border: none;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 9998;
  backdrop-filter: blur(8px);
  transition: background-color .15s ease;
}
#pfEdToggleBtn:hover{ background: #ff4500; }
#pfEdToggleBtn.is-on{ background: #ff4500; }

/* Toolbar flotante */
.pf-editor-toolbar{
  position: fixed;
  left: 20px; bottom: 64px;
  z-index: 9999;
  background: rgba(45,42,40,.96);
  color: #fff;
  padding: 16px 18px;
  border-radius: 2px;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; line-height: 1.5;
  letter-spacing: .04em;
  display: none;
  width: 320px;
  max-width: calc(100vw - 40px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 40px rgba(0,0,0,.4);
  box-sizing: border-box;
}
.pf-editor-toolbar.on{ display: block; }
.pf-editor-toolbar .pf-ed-row{
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.pf-editor-toolbar .pf-ed-row:last-child{ margin-bottom: 0; }
.pf-editor-toolbar .pf-ed-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff4500;
  box-shadow: 0 0 0 4px rgba(255,69,0,.18);
  display: inline-block;
}
.pf-editor-toolbar strong{
  font-weight: 600;
  font-size: 11px;
  color: #ff4500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pf-editor-toolbar .pf-ed-count{
  margin-left: auto;
  font-size: 10px;
  color: rgba(255,255,255,.55);
  padding: 2px 6px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  white-space: nowrap;
}
.pf-editor-toolbar .pf-ed-btn{
  font: inherit;
  padding: 8px 12px;
  border-radius: 2px;
  border: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  transition: filter .15s ease, background-color .15s ease;
}
.pf-editor-toolbar .pf-ed-btn:hover{ filter: brightness(1.15); }
.pf-editor-toolbar .pf-ed-btn.primary{ background: #ff4500; color: #fff; }
.pf-editor-toolbar .pf-ed-btn.ghost{ background: transparent; color: rgba(255,255,255,.55); }
.pf-editor-toolbar .pf-ed-btn.ghost:hover{ color: #fff; background: rgba(255,255,255,.06); }
.pf-editor-toolbar .pf-ed-hint{
  margin: 8px 0 0; font-size: 10px;
  color: rgba(255,255,255,.5); line-height: 1.5;
}
.pf-editor-toolbar kbd{
  background: rgba(255,255,255,.1);
  padding: 1px 5px; border-radius: 2px;
  font: inherit; font-size: 9px;
}

/* ----- Decoración de cada tarjeta en modo edición ----- */
body.pf-editor-on .gallery-card{
  cursor: grab !important;
  outline: 1px dashed rgba(255,69,0,.45);
  outline-offset: 2px;
  transition: outline-color .12s ease, opacity .15s ease;
  position: relative;
  user-select: none;
}
body.pf-editor-on .gallery-card:hover{ outline: 2px solid #ff4500; }
body.pf-editor-on .gallery-card:active{ cursor: grabbing !important; }
body.pf-editor-on .gallery-card .gc-overlay{ opacity: 0 !important; }
body.pf-editor-on .gallery-card img{ pointer-events: none; }

/* Tarjeta que se está arrastrando */
body.pf-editor-on .gallery-card.is-dragging{
  opacity: .35;
  outline-color: rgba(255,69,0,.25);
}

/* Indicador de drop: la tarjeta destino se pone negra mientras
   el cursor está sobre ella. Eso indica claramente "si suelto aquí,
   el proyecto que arrastro quedará en este lugar". */
body.pf-editor-on .gallery-card.drop-target{
  outline: 2px solid #000 !important;
}
body.pf-editor-on .gallery-card.drop-target::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  animation: pf-drop-pulse .9s ease-in-out infinite;
}
body.pf-editor-on .gallery-card.drop-target::after{
  content: "Soltar aquí";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
  color: #fff;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .22em; font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
@keyframes pf-drop-pulse{
  0%, 100%{ background: #000; }
  50%    { background: #1a1a1a; }
}
/* El chip de posición debe seguir visible sobre el negro */
body.pf-editor-on .gallery-card.drop-target .pf-cell-pos{
  z-index: 8;
}

/* Botones del overlay deben tener cursor normal (no grab) */
body.pf-editor-on .pf-cell-overlay .pf-btn{ cursor: pointer; }

.pf-cell-pos{
  position: absolute; top: 10px; left: 10px; z-index: 4;
  background: #ff4500; color: #fff;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: .18em; font-weight: 600;
  padding: 5px 9px; border-radius: 2px;
  pointer-events: none;
}

.pf-cell-overlay{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; align-items: stretch;
  padding: 14px;
  background: linear-gradient(180deg, transparent 0%, rgba(45,42,40,.92) 100%);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
body.pf-editor-on .gallery-card:hover .pf-cell-overlay{
  opacity: 1; pointer-events: auto;
}
.pf-cell-overlay .pf-cell-cats,
.pf-cell-overlay .pf-cell-actions{
  display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap;
}
.pf-cell-overlay .pf-btn{
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: .12em; font-weight: 600;
  background: rgba(255,255,255,.12); color: #fff;
  border: none; border-radius: 2px;
  padding: 8px 11px; cursor: pointer;
  transition: filter .15s ease, background-color .15s ease;
  backdrop-filter: blur(6px);
  min-width: 36px;
}
.pf-cell-overlay .pf-btn:hover{ filter: brightness(1.18) }
.pf-cell-overlay .pf-btn.ghost{ background: rgba(255,69,0,.65); }
.pf-cell-overlay .pf-btn.danger{ background: rgba(225,75,75,.88); }
.pf-cell-overlay .pf-btn.danger:hover{ background: #c63030; filter: none; }
.pf-cell-overlay .pf-btn[disabled]{ opacity: .35; cursor: not-allowed; }

/* Toggles de categoría — chip style, color en estado activo según categoría */
.pf-cell-overlay .pf-chip{
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: .14em; font-weight: 600;
  text-transform: uppercase;
  background: rgba(255,255,255,.10); color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.22);
  padding: 6px 10px; border-radius: 99px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  backdrop-filter: blur(4px);
}
.pf-cell-overlay .pf-chip:hover{ background: rgba(255,255,255,.18); color: #fff }
.pf-cell-overlay .pf-chip.is-on.cat-ilustracion{
  background: var(--cat-ilustracion); border-color: var(--cat-ilustracion); color: #fff;
}
.pf-cell-overlay .pf-chip.is-on.cat-full-branding{
  background: var(--cat-full-branding); border-color: var(--cat-full-branding); color: #fff;
}
.pf-cell-overlay .pf-chip.is-on.cat-mercadeo{
  background: var(--cat-mercadeo); border-color: var(--cat-mercadeo); color: #fff;
}

/* En modo edición, ocultar filtros y "Ver más" porque no aplican */
body.pf-editor-on .filters,
body.pf-editor-on #btnViewMore{ display: none !important; }

/* ===== Papelera del editor del portafolio ===== */
.pf-editor-toolbar .pf-ed-trash{
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 4px;
  background: rgba(0,0,0,.18);
}
.pf-editor-toolbar .pf-ed-trash[hidden]{ display: none; }
.pf-editor-toolbar .pf-ed-trash-head{
  display: flex; align-items: center; justify-content: space-between;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 8px;
}
.pf-editor-toolbar .pf-ed-trash-empty{
  font-family: inherit;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  background: transparent; color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 2px;
  padding: 3px 8px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.pf-editor-toolbar .pf-ed-trash-empty:hover{
  color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06);
}
.pf-editor-toolbar .pf-ed-trash-list{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 180px; overflow-y: auto;
}
.pf-editor-toolbar .pf-ed-trash-list li{
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  background: rgba(255,255,255,.04);
  border-radius: 2px;
  font-size: 12px;
}
.pf-editor-toolbar .pf-ed-trash-name{
  color: #fff; font-weight: 500; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-editor-toolbar .pf-ed-trash-slug{
  color: rgba(255,255,255,.45);
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: .06em;
}
.pf-editor-toolbar .pf-ed-restore{
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: .14em; font-weight: 600;
  background: rgba(255,69,0,.22); color: #ff8a4d;
  border: 1px solid rgba(255,69,0,.45);
  border-radius: 2px;
  padding: 4px 8px; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.pf-editor-toolbar .pf-ed-restore:hover{
  background: #ff4500; color: #fff;
}

/* Responsive móvil */
@media (max-width: 560px){
  .pf-editor-toolbar{
    left: 8px; right: 8px;
    width: auto;
    bottom: 70px;
  }
  #pfEdToggleBtn{
    left: 8px; right: 8px; bottom: 8px;
    text-align: center;
  }
}


/* =========================================================
   ANIMACIONES GLOBALES (js/animations.js)
   ========================================================= */

/* 1) Cursor magnético — transición suave cuando el hotspot se mueve hacia
       el cursor. El transform lo aplica JS; solo definimos el easing. */
.facade-hotspot{
  transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .6s ease;
  will-change: transform;
}
.facade-hotspot.is-magnet-near{
  transition: transform .12s cubic-bezier(.22,1,.36,1);
}

/* 2) Reveal con stagger — usa la clase .reveal/.show ya existente del sitio,
       solo añadimos delays via JS y un pequeño refinamiento. */

/* 3) Parallax sutil en cards — el zoom/desplazamiento lo aplica JS, aquí
       le damos la transición y aseguramos overflow:hidden + transición de la
       imagen. (Ya hay overflow:hidden en .project-link, así que no rompe nada.)
       NOTA: news-card NO entra aquí porque no son clickables. */
.project-card .project-link img,
.gallery-card img{
  transition: transform .55s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.project-card.is-parallax-hover .project-link img,
.gallery-card.is-parallax-hover img{
  transition: transform .12s cubic-bezier(.22,1,.36,1);
}

/* Respeta reduce-motion para todo lo de arriba */
@media (prefers-reduced-motion: reduce){
  .facade-hotspot,
  .project-card .project-link img,
  .gallery-card img,
  .archivo-logo-img{
    transition: none !important;
  }
}


/* =========================================================
   CURSOR PERSONALIZADO — "burbuja con etiqueta"
   (js/cursor.js lo monta solo en desktop con mouse)
   ========================================================= */
.dbc-cursor{
  position: fixed;
  top: 0; left: 0;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--highlight);
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  transition: width .28s cubic-bezier(.22,1,.36,1),
              height .28s cubic-bezier(.22,1,.36,1),
              background-color .25s ease,
              opacity .2s ease,
              border-radius .25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
.dbc-cursor.is-visible{ opacity: 1; }

/* Estado soft: crece al doble (sin label). Se usa en el hero del home
   y sobre inputs/textareas (donde tradicionalmente sale la "I"). */
.dbc-cursor.is-soft{
  width: 28px; height: 28px;
}

/* Estado activo: crece y muestra la etiqueta */
.dbc-cursor.is-active{
  width: 84px; height: 84px;
}
.dbc-cursor-label{
  font-family: var(--f-mono, "Courier New", monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #FFFBF7;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .2s ease, transform .25s cubic-bezier(.22,1,.36,1);
  white-space: nowrap;
  padding: 0 6px;
}
.dbc-cursor.is-active .dbc-cursor-label{
  opacity: 1;
  transform: scale(1);
}

/* Click feedback — pulsación leve */
.dbc-cursor.is-press{
  transform-origin: center;
  filter: brightness(.9);
}
.dbc-cursor.is-press.is-active{
  width: 76px; height: 76px;
}
.dbc-cursor.is-press.is-soft{
  width: 24px; height: 24px;
}
.dbc-cursor.is-press:not(.is-active):not(.is-soft){
  width: 10px; height: 10px;
}

/* Ocultar el cursor nativo cuando el custom está montado.
   Sobre inputs / textareas dejamos que SE VEA el caret, pero no la
   flecha — usando cursor:text mantiene el caret pero la "I" pequeña;
   como queremos UX consistente, mantenemos cursor:none también ahí. */
html.has-dbc-cursor,
html.has-dbc-cursor *{
  cursor: none !important;
}
/* Excepciones: en inputs y textareas mantenemos el caret-text visible.
   El truco es usar caret-color y volver el cursor texto. */
html.has-dbc-cursor input,
html.has-dbc-cursor textarea,
html.has-dbc-cursor [contenteditable="true"]{
  cursor: text !important;
}

/* En modo edición del editor de hotspots, ocultamos el cursor custom y
   volvemos al cursor del sistema para que el usuario pueda ver el cursor
   "move"/"crosshair" del editor con precisión. */
body.hotspot-edit-mode .dbc-cursor{
  display: none !important;
}
html.has-dbc-cursor body.hotspot-edit-mode,
html.has-dbc-cursor body.hotspot-edit-mode *{
  cursor: auto !important;
}
/* El editor pone cursor:move sobre hotspots/textos — que vuelva a aplicar. */
html.has-dbc-cursor body.hotspot-edit-mode .facade-hotspot,
html.has-dbc-cursor body.hotspot-edit-mode .facade-text,
html.has-dbc-cursor body.hotspot-edit-mode .hero-meta,
html.has-dbc-cursor body.hotspot-edit-mode .hero-tag,
html.has-dbc-cursor body.hotspot-edit-mode .hero-title{
  cursor: move !important;
}

/* ============ FIX: textos del cartel son clickeables EN MODO EDICIÓN ============
   Los textos como GALERÍA, RECEPCIÓN, CONTRATANDO, etc. tienen
   pointer-events:none por diseño (para que los clicks pasen a los hotspots
   que están debajo). Pero en modo edición esto impide seleccionarlos y
   arrastrarlos. Lo invertimos solo cuando el editor está activo. */
body.hotspot-edit-mode .facade-text{
  pointer-events: auto !important;
}
body.hotspot-edit-mode .facade-text *{
  pointer-events: none; /* El span hijo no captura — solo el contenedor */
}

/* En móvil / touch / reduce-motion, no se monta el cursor — el navegador
   usa el nativo. Esto se controla en JS, pero por seguridad ocultamos
   el elemento si la media query falla. */
@media (pointer: coarse), (hover: none), (prefers-reduced-motion: reduce){
  .dbc-cursor{ display: none !important; }
  html.has-dbc-cursor,
  html.has-dbc-cursor *{ cursor: auto !important; }
}


/* =========================================================
   PÁGINAS LEGALES — Términos y Privacidad
   Estructura: dos bloques de contenido (ES/EN) que se muestran según
   el atributo lang del <html> (lo gestiona i18n).
   IMPORTANTE: limitado a .legal-page para no afectar a otros elementos
   con data-lang (como los botones del switcher de idioma).
   ========================================================= */
html[lang="es"] .legal-page [data-lang="en"]{ display: none !important; }
html[lang="en"] .legal-page [data-lang="es"]{ display: none !important; }

.legal-page{
  padding: calc(var(--archivo-h) + 60px) max(22px, 4vw) 120px;
  background: var(--bg);
  min-height: 100vh;
}
.legal-inner{
  max-width: 760px;
  margin: 0 auto;
}
.legal-meta{
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 28px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.legal-meta a{
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color .2s ease;
}
.legal-meta a:hover{ color: var(--ink); }

.legal-page .page-title{
  font-size: clamp(48px, 6vw, 88px);
  margin: 12px 0 8px;
}
.legal-updated{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 64px;
}

.legal-body h2{
  font-family: var(--f-serif);
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  margin: 56px 0 14px;
  letter-spacing: 0;
  text-transform: none;
}
.legal-body h2:first-of-type{ margin-top: 0; }
.legal-body p{
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0 0 16px;
  font-weight: 300;
}
.legal-body p strong{ color: var(--ink); font-weight: 500; }
.legal-body a{
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal-body ul{
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.legal-body ul li{
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
  font-weight: 300;
  padding-left: 22px;
  position: relative;
  margin-bottom: 6px;
}
.legal-body ul li::before{
  content: "—";
  position: absolute;
  left: 0;
  color: var(--highlight);
}
.legal-body hr{
  border: 0;
  border-top: 1px solid rgba(45,42,40,.18);
  margin: 56px 0;
}

@media (max-width: 720px){
  .legal-page{ padding: calc(var(--archivo-h) + 40px) 20px 80px; }
  .legal-body h2{ font-size: 19px; margin-top: 44px; }
  .legal-body p, .legal-body ul li{ font-size: 15px; line-height: 1.7; }
}


/* =========================================================
   LETRERITO DE IDIOMA — primera visita (debajo del lang switcher)
   (js/lang-toast.js) — solo texto, sin caja, sin flecha.
   ========================================================= */
.dbc-lang-hint{
  position: fixed;
  top: 0; right: 0;
  z-index: 9000;
  max-width: 280px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s ease, transform .42s cubic-bezier(.22,1,.36,1);
  text-align: right;
  padding-right: 4px;
}
.dbc-lang-hint.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.dbc-lang-hint-line{
  display: block;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(45, 42, 40, .68);
  font-weight: 400;
  letter-spacing: 0;
}
.dbc-lang-hint-line.dbc-lang-hint-en{
  color: rgba(45, 42, 40, .42);
  margin-top: 1px;
}

@media (max-width: 900px){
  .dbc-lang-hint{ max-width: 240px; }
  .dbc-lang-hint-line{ font-size: 11px; }
}


/* =========================================================
   MODAL DE MANTENIMIENTO — Logo Maker
   (js/maintenance-modal.js)
   ========================================================= */
.dbc-maint-overlay{
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(45, 42, 40, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .3s ease;
}
.dbc-maint-overlay.is-visible{ opacity: 1; }

.dbc-maint-box{
  background: var(--bg, #FFFBF7);
  color: var(--ink);
  max-width: 460px;
  width: 100%;
  padding: 36px 36px 28px;
  position: relative;
  transform: scale(.94);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
  box-shadow: 0 24px 48px -12px rgba(45,42,40,.4);
}
.dbc-maint-overlay.is-visible .dbc-maint-box{
  transform: scale(1);
}

.dbc-maint-close{
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  font-family: var(--f-serif);
  font-size: 22px;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 0;
  transition: color .2s ease;
}
.dbc-maint-close:hover{ color: var(--ink); }

.dbc-maint-eyebrow{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .3em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--highlight);
  margin: 0 0 14px;
}
.dbc-maint-title{
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: 0;
  text-transform: none;
}
.dbc-maint-body{
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 24px;
  font-weight: 300;
}
.dbc-maint-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dbc-maint-btn{
  flex: 1;
  min-width: 140px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  font-weight: 600;
  text-transform: uppercase;
  padding: 12px 16px;
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid var(--ink);
  transition: background .2s ease, color .2s ease;
  background: transparent;
}
.dbc-maint-btn-primary{
  background: var(--ink);
  color: var(--bg, #FFFBF7);
}
.dbc-maint-btn-primary:hover{
  background: var(--highlight);
  border-color: var(--highlight);
  color: #FFFBF7;
}
.dbc-maint-btn-ghost{
  color: var(--ink);
}
.dbc-maint-btn-ghost:hover{
  background: var(--ink);
  color: var(--bg, #FFFBF7);
}

@media (max-width: 560px){
  .dbc-maint-box{ padding: 28px 22px 22px; }
  .dbc-maint-title{ font-size: 22px; }
  .dbc-maint-body{ font-size: 14px; }
  .dbc-maint-actions{ flex-direction: column; }
}


/* =========================================================
   FORMULARIO DE CONTRATANDO — hint debajo de un input
   ========================================================= */
.hiring-field-hint{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 8px 0 0;
  font-weight: 400;
}


/* =========================================================
   PANEL ADMIN — /pages/admin.html
   ========================================================= */
.admin-body{
  background: #f6f1e8;
  color: #2d2a28;
  font-family: var(--f-body);
}

/* ----- AUTH GATE ----- */
.admin-gate{
  position: fixed;
  inset: 0;
  background: #1c1a18;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  z-index: 100;
}
.admin-login{
  width: 100%;
  max-width: 380px;
  background: #fffbf7;
  padding: 44px 36px 32px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,.45);
}
.admin-login-eyebrow{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--highlight);
  text-transform: uppercase;
  margin: 0 0 18px;
  font-weight: 600;
}
.admin-login-title{
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: 0;
  text-transform: none;
}
.admin-login-sub{
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mute);
  margin: 0 0 26px;
  font-weight: 300;
}
.admin-login-input{
  width: 100%;
  padding: 14px 16px;
  background: #f8f2e9;
  border: 1px solid rgba(45,42,40,.18);
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 14px;
  border-radius: 0;
  outline: none;
  transition: border-color .2s ease;
}
.admin-login-input:focus{ border-color: var(--highlight); }
.admin-login-btn{
  background: var(--ink);
  color: var(--bg);
  border: none;
  padding: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .26em;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
}
.admin-login-btn:hover{ background: var(--highlight); }
.admin-login-error{
  margin: 14px 0 0;
  color: #c0392b;
  font-size: 13px;
  font-family: var(--f-body);
}
.admin-login-back{
  margin-top: 24px;
  color: var(--ink-mute);
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  transition: color .2s ease;
}
.admin-login-back:hover{ color: var(--ink); }


/* ----- APP ----- */
.admin-app{
  min-height: 100vh;
  padding-bottom: 80px;
}
.admin-header{
  background: #1c1a18;
  color: #f2ede3;
  padding: 28px 0;
}
.admin-header-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.admin-header-eyebrow{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--highlight);
  text-transform: uppercase;
  margin: 0 0 4px;
  font-weight: 600;
}
.admin-header-title{
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
}
.admin-header-actions{
  display: flex;
  gap: 16px;
  align-items: center;
}
.admin-link-out{
  background: transparent;
  border: 1px solid #4a433d;
  color: #f2ede3;
  padding: 10px 16px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.admin-link-out:hover{ border-color: var(--highlight); color: var(--highlight); }


/* ----- TABS ----- */
.admin-tabs{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  border-bottom: 1px solid rgba(45,42,40,.18);
  display: flex;
  gap: 4px;
  overflow-x: auto;
}
.admin-tab{
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 18px 22px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
.admin-tab:hover{ color: var(--ink); }
.admin-tab.is-active{
  color: var(--ink);
  border-bottom-color: var(--highlight);
}


/* ----- PANELS ----- */
.admin-panel{ padding: 40px 0; }
.admin-panel-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
.admin-panel-header{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.admin-panel-title{
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  margin: 0 0 4px;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.admin-panel-sub{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin: 0;
}
.admin-panel-sub code{
  background: rgba(45,42,40,.08);
  padding: 2px 6px;
  font-size: 10px;
}


/* ----- BUTTONS ----- */
.admin-btn{
  display: inline-block;
  padding: 12px 18px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid var(--ink);
  transition: background .2s ease, color .2s ease;
}
.admin-btn-ghost{
  background: transparent;
  color: var(--ink);
}
.admin-btn-ghost:hover{
  background: var(--ink);
  color: var(--bg);
}


/* ----- STATS ROW ----- */
.admin-stats-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: rgba(45,42,40,.18);
  margin-bottom: 32px;
}
.admin-stat{
  background: #fffbf7;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-stat-val{
  font-family: var(--f-display, Georgia);
  font-size: 36px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
}
.admin-stat-lbl{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}


/* ----- TABLE ----- */
.admin-table-wrap{
  background: #fffbf7;
  border: 1px solid rgba(45,42,40,.12);
  overflow-x: auto;
}
.admin-empty{
  padding: 60px 20px;
  text-align: center;
  color: var(--ink-mute);
  font-family: var(--f-serif);
  font-style: italic;
  margin: 0;
}
.admin-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-table th{
  text-align: left;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(45,42,40,.18);
  background: #f8f2e9;
}
.admin-table td{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(45,42,40,.08);
  font-family: var(--f-body);
  color: var(--ink);
  vertical-align: top;
}
.admin-table tr:last-child td{ border-bottom: none; }
.admin-table tr:hover td{ background: rgba(255,69,0,.04); }
.admin-table a{ color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.admin-table a:hover{ color: var(--highlight); }

.admin-badge{
  display: inline-block;
  padding: 3px 10px;
  background: rgba(255,69,0,.12);
  color: var(--highlight);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
}


/* ----- SETUP CARDS ----- */
.admin-setup-card{
  background: #fffbf7;
  border: 1px solid rgba(45,42,40,.12);
  padding: 28px;
}
.admin-setup-title{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--highlight);
  margin: 0 0 14px;
  font-weight: 600;
}
.admin-setup-body{
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 14px;
  font-weight: 300;
}
.admin-setup-body code{
  font-family: var(--f-mono);
  background: rgba(45,42,40,.08);
  padding: 2px 6px;
  font-size: 13px;
}
.admin-setup-body a{
  color: var(--highlight);
  text-decoration: underline;
}
.admin-setup-list{
  font-family: var(--f-serif);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 14px;
  padding-left: 22px;
}
.admin-setup-list li{ margin-bottom: 4px; }


/* ----- EDIT GRID ----- */
.admin-edit-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: rgba(45,42,40,.18);
  margin-bottom: 32px;
}
.admin-edit-card{
  background: #fffbf7;
  padding: 28px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: background .2s ease;
}
.admin-edit-card:hover{
  background: #f8f2e9;
}
.admin-edit-kind{
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--highlight);
  margin: 0 0 10px;
  font-weight: 600;
}
.admin-edit-title{
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  margin: 0 0 10px;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.admin-edit-desc{
  font-family: var(--f-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 18px;
  font-weight: 300;
  flex: 1;
}
.admin-edit-cta{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin-top: auto;
}
.admin-edit-card:hover .admin-edit-cta{ color: var(--highlight); }


/* ----- TIP ----- */
.admin-tip{
  margin-top: 24px;
  padding: 16px 20px;
  background: rgba(255,69,0,.08);
  border-left: 3px solid var(--highlight);
}
.admin-tip p{
  margin: 0;
  font-family: var(--f-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 300;
}


/* ----- Responsive ----- */
@media (max-width: 720px){
  .admin-header-inner, .admin-tabs, .admin-panel-inner{ padding: 0 20px; }
  .admin-header-title{ font-size: 24px; }
  .admin-panel-title{ font-size: 22px; }
  .admin-stat-val{ font-size: 28px; }
  .admin-table{ font-size: 12px; }
  .admin-table th, .admin-table td{ padding: 10px 12px; }
}