.elementor-15 .elementor-element.elementor-element-5463982{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-15 .elementor-element.elementor-element-a5b8dd4{width:var( --container-widget-width, 0.569% );max-width:0.569%;--container-widget-width:0.569%;--container-widget-flex-grow:0;}.elementor-15 .elementor-element.elementor-element-a5b8dd4.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-15 .elementor-element.elementor-element-5e359af{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-15 .elementor-element.elementor-element-5e359af.elementor-element{--order:-99999 /* order start hack */;}/* Start custom CSS *//* ═══════════════════════════
   VARIABLES — dark (default) / light
═══════════════════════════ */
:root {
  --bg: #000;
  --bg2: #0a0a0a;
  --bg3: #050505;
  --fg: #fff;
  --fg2: rgba(255,255,255,.6);
  --fg3: rgba(255,255,255,.35);
  --border: rgba(255,255,255,.1);
  --border2: rgba(255,255,255,.08);
  --hover-bg: rgba(255,255,255,.05);
  --cursor-c: #fff;
  --transition-speed: .35s;
}
body.light {
  --bg: #fff;
  --bg2: #f5f5f5;
  --bg3: #efefef;
  --fg: #000;
  --fg2: rgba(0,0,0,.6);
  --fg3: rgba(0,0,0,.35);
  --border: rgba(0,0,0,.1);
  --border2: rgba(0,0,0,.08);
  --hover-bg: rgba(0,0,0,.04);
  --cursor-c: #000;
}

/* FIX: Añadido -webkit-tap-highlight-color global para iOS */
*, *::before, *::after {
  margin:0; padding:0; box-sizing:border-box;
  -webkit-tap-highlight-color:transparent !important;
  outline:none;
}
html {
  overflow:hidden !important;
  height:100% !important;
  width:100% !important;
}

body {
  background:var(--bg) !important;
  overflow:hidden !important;
  height:100% !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  font-family:Arial,sans-serif;
  cursor:none;
  color:var(--fg);
  /* FIX: corregido --transition-speed (antes había un typo --transitionspeed en el PDF) */
  transition:background var(--transition-speed) ease, color var(--transition-speed) ease;
}

/* ═══════════════════════════
   HEADER MÓVIL
═══════════════════════════ */
.mobile-header {
  display:none;
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:44px !important;
  background:var(--bg) !important;
  border-bottom:1px solid var(--border) !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:800 !important;
  padding:0 16px !important;
  /* FIX: corregido --transition-speed (typo en original) */
  transition:background var(--transition-speed), border-color var(--transition-speed);
}
.mobile-logo {
  font-size:1rem !important;
  font-weight:700 !important;
  letter-spacing:4px !important;
  text-transform:uppercase !important;
  color:var(--fg) !important;
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
}
.mobile-theme {
  position:absolute !important;
  right:16px !important;
}

/* ═══════════════════════════
   ELEMENTOR RESET
═══════════════════════════ */
.e-con, .e-con-inner, .e-container, .elementor-section,
.elementor-container, .elementor-row, .elementor-column,
.elementor-column-wrap, .elementor-widget-wrap,
.elementor-widget-container, .elementor-top-section {
  padding:0 !important;
  margin:0 !important;
  max-width:100% !important;
  width:100% !important;
  height:100% !important;
  border:none !important;
  background:transparent !important;
  --padding-block-start:0px !important;
  --padding-block-end:0px !important;
  --padding-inline-start:0px !important;
  --padding-inline-end:0px !important;
  --margin-block-start:0px !important;
  --margin-block-end:0px !important;
}

/* ═══════════════════════════
   CURSOR
═══════════════════════════ */
#cursor {
  width:6px; height:6px;
  background:var(--cursor-c);
  border-radius:50%; position:fixed; top:0; left:0;
  pointer-events:none; z-index:99999;
  transform:translate(-50%,-50%);
  /* FIX: corregido --transition-speed (typo en original) */
  transition:width .25s, height .25s, opacity .25s, background var(--transition-speed);
  opacity:.9;
}
#cursor-ring {
  width:32px; height:32px;
  border:1px solid var(--cursor-c);
  border-radius:50%; position:fixed; top:0; left:0;
  pointer-events:none; z-index:99998;
  transform:translate(-50%,-50%);
  transition:left .08s ease, top .08s ease,
             width .35s cubic-bezier(.25,.46,.45,.94),
             height .35s cubic-bezier(.25,.46,.45,.94),
             opacity .35s, border-color var(--transition-speed);
  opacity:.5;
}
body.cur-hover #cursor { width:4px; height:4px; opacity:.4; }
body.cur-hover #cursor-ring { width:48px; height:48px; opacity:.2; }

/* ═══════════════════════════
   POPUP
═══════════════════════════ */
.popup {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.92);
  justify-content:center; align-items:center; z-index:9000;
}
/* FIX: En móvil el popup era muy grande (660x490px fijo).
   Ahora es responsivo con max-width/max-height */
.popup-box {
  background:var(--bg); border:1px solid var(--border);
  border-radius:10px; width:660px; height:490px; overflow:hidden;
  animation:popIn .45s cubic-bezier(.34,1.56,.64,1) both;
  max-width:90vw;
  max-height:80dvh;
}
.popup-box video { width:100%; height:100%; object-fit:cover; }

@keyframes popIn {
  from { transform:scale(.9); opacity:0; }
  to   { transform:scale(1);  opacity:1; }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes shimmer {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}

/* ═══════════════════════════
   SCROLL CONTAINER — DESKTOP
═══════════════════════════ */
.scroll-container {
  display:flex !important;
  flex-direction:row !important;
  width:600% !important;
  height:100vh !important;
  overflow:hidden !important;
  transition:transform .9s cubic-bezier(.77,0,.175,1) !important;
  position:relative !important;
  z-index:1 !important;
  padding:0 !important;
  margin:0 !important;
  will-change:transform !important;
}

/* ═══════════════════════════
   GRID — DESKTOP
═══════════════════════════ */
.grid-container {
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  grid-template-rows:repeat(2,1fr) !important;
  gap:0 !important;
  width:100% !important;
  height:calc(100vh - 72px) !important;
  flex:0 0 calc(100% / 6) !important;
  overflow:hidden !important;
  padding:0 !important;
  margin:0 !important;
  background:var(--bg) !important;
}

.grid-item {
  position:relative !important;
  background:var(--bg) !important;
  border:none !important;
  overflow:hidden !important;
  cursor:pointer !important;
  margin:0 !important;
  z-index:1 !important;
  filter:blur(0px);
  transition:transform .45s cubic-bezier(.25,.46,.45,.94),
             box-shadow .45s ease, filter .45s ease;
}
.grid-item:hover {
  transform:scale(1.01) !important;
  z-index:100 !important;
  box-shadow:0 0 40px rgba(0,0,0,.8) !important;
}
.grid-container:has(.grid-item:hover) .grid-item:not(:hover) { filter:blur(2px); }
.grid-item::after {
  content:''; position:absolute; inset:0;
  border:none; z-index:20 !important; pointer-events:none;
}

/* ═══════════════════════════
   PLACEHOLDER
═══════════════════════════ */
.ph {
  width:100%; height:100%;
  background:linear-gradient(135deg,#141414 0%,#1c1c1c 50%,#141414 100%);
  background-size:200% 200%;
  animation:shimmer 2.5s ease-in-out infinite;
  position:absolute; inset:0; z-index:0;
}
body.light .ph {
  background:linear-gradient(135deg,#e8e8e8 0%,#f0f0f0 50%,#e8e8e8 100%);
  background-size:200% 200%;
}

/* ═══════════════════════════
   BOTÓN PLAY
═══════════════════════════ */
.vid-icon {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:52px; height:52px;
  border:1.5px solid rgba(255,255,255,.6); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  z-index:3; background:rgba(0,0,0,.3);
  pointer-events:none; opacity:0;
  transition:opacity .35s ease, border-color .3s,
             background .3s, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.vid-icon::after {
  content:''; width:0; height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-left:15px solid rgba(255,255,255,.75);
  margin-left:4px; transition:border-left-color .3s;
}
.grid-item:hover .vid-icon {
  opacity:1; border-color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.08);
  transform:translate(-50%,-50%) scale(1.15);
}
.grid-item:hover .vid-icon::after { border-left-color:#fff; }

/* ═══════════════════════════
   OVERLAY TÍTULO
═══════════════════════════ */
.overlay {
  position:absolute; bottom:0; left:0; width:100%;
  padding:40px 14px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,transparent 100%);
  display:flex; flex-direction:column; gap:4px;
  z-index:15; transform:translateY(12px); opacity:0;
  transition:transform .38s cubic-bezier(.25,.46,.45,.94), opacity .38s;
}
.grid-item:hover .overlay { transform:translateY(0); opacity:1; }
.ov-title {
  color:#fff; font-size:.95rem; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
}
.ov-cat {
  color:rgba(255,255,255,.45); font-size:.58rem;
  letter-spacing:3px; text-transform:uppercase;
}
.wide { grid-column:span 2 !important; }
.tall { grid-row:span 2 !important; }

/* ═══════════════════════════
   FOOTER
═══════════════════════════ */
.footer {
  position:fixed !important; bottom:0 !important;
  left:0 !important; right:0 !important;
  height:72px !important; background:var(--bg) !important;
  border-top:1px solid var(--border);
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;
  padding:0 32px !important;
  z-index:800 !important;
  /* FIX: corregido --transition-speed (typo en original) */
  transition:background var(--transition-speed), border-color var(--transition-speed);
}
.f-logo {
  font-size:1.25rem; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--fg);
  transition:color .35s; cursor:default; justify-self:start;
}
.f-logo:hover { color:var(--fg2); }
.f-nav { display:flex; justify-self:center; }
.f-nav-link {
  color:var(--fg2); background:transparent !important;
  border:none; border-right:1px solid var(--border);
  padding:0 26px; height:34px;
  font-size:.72rem; font-family:Arial,sans-serif;
  letter-spacing:3px; text-transform:uppercase;
  cursor:pointer; position:relative; overflow:hidden;
  transition:color .32s cubic-bezier(.77,0,.175,1);
  -webkit-appearance:none; appearance:none; outline:none;
  box-shadow:none !important;
}
.f-nav-link:first-child { border-left:1px solid var(--border); }
.f-nav-link:hover,
.f-nav-link:focus,
.f-nav-link:active {
  background:transparent !important;
  box-shadow:none !important;
  outline:none !important;
  color:var(--fg);
}
.f-nav-link::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:1.5px; background:var(--fg);
  transition:width .38s cubic-bezier(.77,0,.175,1);
}
.f-nav-link::before {
  content:''; position:absolute; inset:0;
  background:transparent; transition:background .32s; z-index:-1;
}
.f-nav-link:hover::after { width:100%; }
.f-nav-link:hover::before { background:var(--hover-bg); }

/* ═══════════════════════════
   THEME TOGGLE
═══════════════════════════ */
.f-theme-toggle {
  width:32px; height:32px;
  background:transparent; border:none;
  border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--fg) !important;
  transition:color .2s, transform .2s;
  flex-shrink:0; padding:0;
  outline:none; box-shadow:none !important;
  -webkit-appearance:none; appearance:none;
  -webkit-tap-highlight-color:transparent !important;
}
.f-theme-toggle:hover { transform:scale(1.1); }
.f-theme-toggle:focus,
.f-theme-toggle:active,
.f-theme-toggle:focus-visible,
.f-theme-toggle:visited {
  outline:none !important;
  box-shadow:none !important;
  background:transparent !important;
  background-color:transparent !important;
  color:var(--fg) !important;
}
.f-theme-toggle svg {
  width:12px; height:12px; stroke:currentColor;
  fill:none !important;
  pointer-events:none;
  filter:drop-shadow(0 0 0px rgba(128,128,128,.5));
  transition:opacity .3s, transform .4s cubic-bezier(.34,1.2,.64,1);
}
.f-theme-toggle .icon-sun  { display:block; opacity:1; }
.f-theme-toggle .icon-moon { display:none;  opacity:0; }
body.light .f-theme-toggle .icon-sun  { display:none;  opacity:0; }
body.light .f-theme-toggle .icon-moon { display:block; opacity:1; }
body.light .f-theme-toggle {
  background:transparent !important;
  color:#000 !important;
  -webkit-tap-highlight-color:transparent !important;
}
body.light .f-theme-toggle:hover,
body.light .f-theme-toggle:active,
body.light .f-theme-toggle:focus,
body.light .f-theme-toggle:focus-visible {
  background:transparent !important;
  outline:none !important;
  box-shadow:none !important;
 
}
body.light .f-theme-toggle svg {
  filter:drop-shadow(0 0 3px rgba(0,0,0,.3)) !important;
}

/* ═══════════════════════════
   SOCIALS
═══════════════════════════ */
.f-socials {
  display:flex; gap:10px; align-items:center; justify-self:end;
}
.f-soc {
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  color:var(--fg2); text-decoration:none;
  border:1px solid var(--border);
  transition:color .3s, border-color .3s, background .3s;
}
/* FIX: corregido --hover-bg (typo --hoverbg en el PDF original) */
.f-soc:hover { color:var(--fg); border-color:var(--fg); background:var(--hover-bg); }
.f-soc svg { width:14px; height:14px; fill:currentColor; }

/* ═══════════════════════════
   INDICADORES
═══════════════════════════ */
.dot {
  width:10px; height:10px; border-radius:50%;
  background:transparent; border:1.5px solid var(--border);
  cursor:pointer; display:block;
  transition:background .35s, border-color .35s,
             transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
}
.dot.dot-active {
  background:var(--fg); border-color:var(--fg);
  transform:scale(1.15);
  box-shadow:0 0 12px rgba(128,128,128,.4);
}
.dot.dot-hover {
  background:var(--fg2); border-color:var(--fg);
  transform:scale(1.3);
}

/* ═══════════════════════════
   ABOUT OVERLAY
═══════════════════════════ */
.about-wrap {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.92); z-index:8000;
}
body.light .about-wrap { background:rgba(255,255,255,0.92); }
.about-inner {
  display:grid; grid-template-columns:1fr 1fr;
  height:90vh; border-bottom:1px solid var(--border);
  animation:popIn .4s cubic-bezier(.34,1.2,.64,1) both;
}
.about-portrait {
  border-right:1px solid var(--border); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg2);
}
.about-portrait img { width:100%; height:100%; object-fit:cover; }
.portrait-ph {
  font-size:.7rem; letter-spacing:4px;
  text-transform:uppercase; opacity:.2; color:var(--fg);
}
.about-text {
  padding:56px 52px; display:flex; flex-direction:column;
  justify-content:center; gap:20px; overflow-y:auto;
  background:var(--bg);
}
.ab-eyebrow {
  font-size:.65rem; letter-spacing:5px;
  text-transform:uppercase; opacity:.45; color:var(--fg);
}
.ab-name {
  font-size:clamp(2.4rem,5vw,4.8rem); font-weight:700;
  text-transform:uppercase; line-height:.92;
  letter-spacing:2px; color:var(--fg);
}
.ab-name em { font-style:normal; opacity:.22; }
.ab-role {
  font-size:.8rem; letter-spacing:3px; text-transform:uppercase;
  border-left:2px solid var(--border); padding-left:12px;
  opacity:.7; color:var(--fg);
}
.ab-bio { font-size:.88rem; line-height:1.9; color:var(--fg2); max-width:440px; }
.ab-tags { display:flex; flex-wrap:wrap; gap:8px; }
.ab-tag {
  font-size:.6rem; letter-spacing:2px; text-transform:uppercase;
  border:1px solid var(--border); border-radius:20px;
  padding:4px 12px; cursor:default; color:var(--fg);
  transition:background .2s, color .2s, border-color .2s;
}
.ab-tag:hover { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.ab-close {
  font-size:.65rem; letter-spacing:3px; text-transform:uppercase;
  opacity:.35; cursor:pointer; transition:opacity .2s; color:var(--fg);
}
.ab-close:hover { opacity:.8; }
.ab-socials {
  display:flex; gap:10px; align-items:center; margin-top:4px;
}
.ab-soc {
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  color:var(--fg2); border:1px solid var(--border);
  text-decoration:none;
  transition:color .3s, border-color .3s, background .3s;
}
/* FIX: En el HTML del about (widget 8) había class="absoc" sin guión — corregir en HTML también */
.ab-soc:hover { color:var(--fg); border-color:var(--fg); background:var(--hover-bg); }

/* ═══════════════════════════
   CONTACT OVERLAY
═══════════════════════════ */
.contact-wrap {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px); /* FIX: necesario para Safari iOS */
  justify-content:center; align-items:center; z-index:8000;
}
body.light .contact-wrap { background:rgba(255,255,255,0.85); }
.contact-box {
  display:grid; grid-template-columns:1fr 1fr;
  width:min(860px,90vw); min-height:480px;
  animation:popIn .45s cubic-bezier(.34,1.2,.64,1) both;
  position:relative;
}
.contact-left {
  background:var(--bg2); padding:56px 48px;
  display:flex; flex-direction:column; justify-content:space-between;
  border:1px solid var(--border2); border-right:none;
}
.contact-tag {
  font-size:.55rem; letter-spacing:5px; text-transform:uppercase;
  color:var(--fg2); display:block; margin-bottom:20px;
}
.contact-heading {
  font-size:clamp(1.6rem,3vw,2.6rem); font-weight:700;
  text-transform:uppercase; letter-spacing:2px;
  color:var(--fg); line-height:1.1;
}
.contact-sub {
  font-size:.72rem; line-height:1.9; color:var(--fg3);
  margin-top:20px; max-width:260px;
}
.contact-email-link {
  font-size:.68rem; letter-spacing:3px; text-transform:uppercase;
  color:var(--fg2); text-decoration:none; opacity:.7;
  transition:opacity .25s, color .25s;
  display:inline-flex; align-items:center; gap:8px;
}
.contact-email-link:hover { opacity:1; color:var(--fg); }
.contact-email-link::before {
  content:''; display:inline-block;
  width:20px; height:1px; background:var(--fg2);
}
.contact-right {
  background:var(--bg3); padding:56px 48px;
  display:flex; flex-direction:column;
  justify-content:center; gap:14px;
  border:1px solid var(--border2);
}
.contact-field { position:relative; }
.contact-field input,
.contact-field textarea {
  width:100%; background:transparent; color:var(--fg);
  border:none; border-bottom:1px solid var(--border);
  padding:14px 0 10px; font-size:.82rem;
  font-family:Arial,sans-serif; outline:none;
  transition:border-color .3s; letter-spacing:1px;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color:var(--fg3); font-size:.72rem;
  letter-spacing:3px; text-transform:uppercase;
}
.contact-field input:focus,
.contact-field textarea:focus { border-bottom-color:var(--fg); }
.contact-field textarea { height:100px; resize:none; margin-top:8px; }
.contact-submit {
  margin-top:10px; display:flex; align-items:center;
  background:transparent !important; border:none; cursor:pointer;
  padding:0; width:100%;
  /* FIX TAREA 3: evitar color rojo de Elementor */
  color:var(--fg2) !important;
  -webkit-tap-highlight-color:transparent !important;
  outline:none !important;
  box-shadow:none !important;
  -webkit-appearance:none; appearance:none;
}
.contact-submit:hover,
.contact-submit:focus,
.contact-submit:active,
.contact-submit:focus-visible,
.contact-submit:visited {
  background:transparent !important;
  outline:none !important;
  box-shadow:none !important;
  color:var(--fg2) !important;
}
.contact-submit-text {
  flex:1; font-size:.65rem; letter-spacing:5px; text-transform:uppercase;
  color:var(--fg2); background:transparent; border:1px solid var(--border);
  padding:14px 20px; transition:background .3s, color .3s, border-color .3s;
  text-align:left;
}
.contact-submit-arrow {
  width:48px; height:48px; background:var(--fg);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background .3s, transform .3s;
}
.contact-submit-arrow svg {
  width:16px; height:16px; fill:none;
  stroke:var(--bg); stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.contact-submit:hover .contact-submit-text {
  background:var(--hover-bg); border-color:var(--fg); color:var(--fg);
}
.contact-submit:hover .contact-submit-arrow {
  opacity:.85; transform:translateX(3px);
}
.contact-close {
  position:absolute; top:-16px; right:-16px;
  width:36px; height:36px; border-radius:50%;
  background:var(--bg2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:10;
  transition:background .25s, border-color .25s;
}
.contact-close:hover { background:var(--fg); }
.contact-close:hover svg { stroke:var(--bg); }
.contact-close svg {
  width:12px; height:12px; fill:none;
  stroke:var(--fg); stroke-width:2.5; stroke-linecap:round;
}

/* ═══════════════════════════
   VIDEO
═══════════════════════════ */
.gi-video {
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  object-fit:cover; object-position:center top !important;
  filter:brightness(.75) saturate(.85);
  transition:filter .45s ease; z-index:1;
}
.grid-item:hover .gi-video { filter:brightness(1) saturate(1.05); }

/* ═══════════════════════════
   TRANSICIÓN PÁGINAS
═══════════════════════════ */
.page-transition {
  position:fixed; inset:0; background:var(--bg);
  z-index:99000; opacity:0; pointer-events:none;
  transition:opacity .5s ease;
}
.page-transition.fade-in  { opacity:1; pointer-events:all; }
.page-transition.fade-out { opacity:0; pointer-events:none; }

/* ═══════════════════════════
   GRID MÓVIL — base oculta
═══════════════════════════ */
.scroll-container-mobile {
  display:none;
}

/* ═══════════════════════════
   SWIPE HINT
   TAREA 1: Visible al 100% desde el primer frame, centrado en pantalla.
   La opacidad la controla JS directamente para evitar conflictos con Elementor.
═══════════════════════════ */
.swipe-hint {
  position:fixed !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  bottom:auto !important;
  right:auto !important;
  z-index:99999 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:14px !important;
  pointer-events:none !important;
  /* Empieza invisible — JS lo hace visible inmediatamente */
  opacity:0;
  transition:opacity .4s ease;
}
/* Fondo oscuro semitransparente para legibilidad sobre cualquier video */

.swipe-hint-icon {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.swipe-hint-icon svg {
  display:block !important;
  width:72px !important;
  height:72px !important;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.7)) !important;
  animation:swipeFingerMove 1s ease-in-out infinite !important;
}
.swipe-hint-text {
  font-size:.58rem !important;
  letter-spacing:7px !important;
  text-transform:uppercase !important;
  color:#fff !important;
  white-space:nowrap !important;
  text-shadow:0 1px 6px rgba(0,0,0,.8) !important;
  font-family:Arial,sans-serif !important;
}
.swipe-hint-line  { display:none !important; }
.swipe-hint-arrow { display:none !important; }

@keyframes swipeFingerMove {
  0%   { transform:translateX(-12px); }
  50%  { transform:translateX(12px); }
  100% { transform:translateX(-12px); }
}

/* Móvil: mismo diseño */
@media (max-width:768px) {
  .swipe-hint { z-index:99999 !important; }
  .swipe-hint-line  { display:none !important; }
  .swipe-hint-arrow { display:none !important; }
}

/* ═══════════════════════════
   RESPONSIVE — MÓVIL
═══════════════════════════ */
@media (max-width:768px) {

  /* ── Ocultar desktop ── */
  #scrollContainer { display:none !important; }
  #indicators { display:none !important; }

  /* ── Cursor ── */
  body { cursor:auto !important; }
  #cursor, #cursor-ring { display:none !important; }

  /* ─────────────────────────────────────────────
     FIX CRÍTICO: width + height del contenedor
     móvil. Sin esto el grid colapsa y aparece
     el contenido como texto plano.
  ───────────────────────────────────────────── */
  .scroll-container-mobile {
    display:flex !important;
    flex-direction:row !important;
    position:fixed !important;
    top:44px !important;
    left:0 !important;
    /* FIX: width y height explícitos con dvh para iOS Safari */
    width:100vw !important;
    height:calc(100dvh - 44px - 56px) !important;
    overflow:hidden !important;
    transition:transform .5s cubic-bezier(.77,0,.175,1) !important;
    z-index:1 !important;
    will-change:transform !important;
  }

  /* ─────────────────────────────────────────────
     FIX: cada página del grid móvil necesita
     dimensiones explícitas para que los videos
     se rendericen correctamente.
  ───────────────────────────────────────────── */
  .mgrid,
  .mgrid-4,
  .mgrid-2wide,
  .mgrid-p5 {
    display:grid !important;
    flex:none !important;
    /* FIX: width y height explícitos */
    width:100vw !important;
    height:calc(100dvh - 44px - 56px) !important;
    overflow:hidden !important;
    background:var(--bg) !important;
  }

  .mgrid {
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:1fr 1fr !important;
  }
  .mgrid-4 {
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:1fr 1fr !important;
  }
  .mgrid-2wide {
    grid-template-columns:1fr !important;
    grid-template-rows:1fr 1fr !important;
  }
  .mgrid-p5 {
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:1fr 1fr !important;
  }
  .mgrid-p5 .mtall {
    grid-row:span 2 !important;
    grid-column:1 !important;
  }
  .mgrid-p5 .mwide {
    grid-column:2 !important;
    grid-row:1 !important;
  }
  .mgrid-p5 .mgrid-item:last-child {
    grid-column:2 !important;
    grid-row:2 !important;
  }
  .mgrid-item {
    position:relative !important;
    background:var(--bg) !important;
    overflow:hidden !important;
    cursor:pointer !important;
    /* FIX: touch-action para swipe horizontal sin bloquear el scroll vertical */
    touch-action:pan-y !important;
  }
  .mtall { grid-row:span 2 !important; }
  .mwide { grid-column:span 2 !important; }

  /* ── Header móvil ── */
  .mobile-header {
    display:flex !important;
    position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important;
    height:44px !important;
    background:var(--bg) !important;
    border-bottom:1px solid var(--border) !important;
    align-items:center !important;
    justify-content:center !important;
    z-index:800 !important;
    padding:0 16px !important;
  }
  .mobile-logo {
    font-size:1rem !important;
    font-weight:700 !important;
    letter-spacing:4px !important;
    text-transform:uppercase !important;
    color:var(--fg) !important;
  }
  .mobile-theme {
    position:absolute !important;
    right:16px !important;
  }

  /* ── Footer móvil ── */
  .footer {
    height:56px !important;
    padding:0 16px !important;
    grid-template-columns:1fr auto !important;
    justify-items:center !important;
  }
  .f-logo { display:none !important; }
  .f-nav { justify-self:center !important; }
  .f-nav-link {
    padding:0 8px !important;
    font-size:.55rem !important;
    letter-spacing:2px !important;
  }
  .f-socials { display:none !important; }
  .f-theme-toggle {
    display:flex !important;
    width:24px !important;
    height:24px !important;
    justify-self:end !important;
  }
  .f-theme-toggle svg {
    width:11px !important;
    height:11px !important;
  }

  /* ── Overlay título en móvil — siempre visible ── */
  .mgrid-item .overlay {
    opacity:0 !important;
    transform:translateY(6px) !important;
    animation:overlayFadeUp .6s ease forwards !important;
    animation-delay:.3s !important;
    padding:20px 8px 8px !important;
  }
  @keyframes overlayFadeUp {
    to { opacity:1; transform:translateY(0); }
  }

  /* ── About móvil ── */
  .about-wrap[style*="flex"] {
  display:flex !important;
  align-items:flex-end !important;
  padding:0 !important;
}
  /* FIX: about-wrap sigue display:none por defecto vía JS,
     este display:flex solo aplica cuando está activo (el JS pone style.display='flex') */
  .about-wrap[style*="flex"] {
    display:flex !important;
  }
  .about-inner {
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:unset !important;
    /* FIX: dvh en lugar de vh para iOS Safari */
    height:92dvh !important;
    width:100vw !important;
    border-radius:20px 20px 0 0 !important;
    overflow:hidden !important;
    position:relative !important;
    animation:slideUp .4s cubic-bezier(.34,1.2,.64,1) both !important;
  }
  @keyframes slideUp {
    from { transform:translateY(60px); opacity:0; }
    to   { transform:translateY(0);    opacity:1; }
  }
  .about-portrait {
    width:100% !important;
    /* FIX: dvh en lugar de vh */
    height:45dvh !important;
    flex-shrink:0 !important;
    border-right:none !important;
    border-bottom:none !important;
    overflow:hidden !important;
    position:relative !important;
    padding:0 !important;
  }
  .about-portrait img {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 20% !important;
    display:block !important;
  }
  .about-portrait::after {
    content:'' !important;
    position:absolute !important;
    bottom:0 !important; left:0 !important; right:0 !important;
    height:60% !important;
    background:linear-gradient(to bottom, transparent, var(--bg)) !important;
    pointer-events:none !important;
  }
  .about-text {
    flex:1 !important;
    padding:20px 28px 40px !important;
    gap:14px !important;
    overflow-y:auto !important;
    background:var(--bg) !important;
  }
  .ab-eyebrow { font-size:.55rem !important; }
  .ab-name { font-size:clamp(1.8rem,9vw,2.8rem) !important; }
  .ab-role {
    border-left:none !important;
    padding-left:0 !important;
    border-top:1px solid var(--border) !important;
    padding-top:10px !important;
    font-size:.65rem !important;
  }
  .ab-bio { font-size:.8rem !important; max-width:100% !important; }
  .ab-tags { flex-wrap:wrap !important; }
  .ab-close { margin-top:4px !important; }

  /* ── Contact móvil ── */
  .contact-wrap {
    align-items:flex-end !important;
    padding:0 !important;
  }
  .contact-box {
    grid-template-columns:1fr !important;
    width:100vw !important;
    min-height:auto !important;
    border-radius:16px 16px 0 0 !important;
    overflow:hidden !important;
    /* FIX: dvh en lugar de vh */
    max-height:85dvh !important;
    overflow-y:auto !important;
  }
  .contact-left {
    padding:24px 20px !important;
    border-right:none !important;
    border-bottom:1px solid var(--border2) !important;
  }
  .contact-right { padding:24px 20px !important; }
  .contact-heading { font-size:1.4rem !important; }
  /* FIX: contact-close reposicionado para que no quede fuera del borde redondeado */
  .contact-close {
    top:12px !important;
    right:12px !important;
    position:absolute !important;
  }
  /* ── Swipe hint MÓVIL — igual que desktop, sin overrides adicionales ── */

} /* fin @media (max-width:768px) *//* End custom CSS */