/*
 Theme Name: Astra Child
 Template: astra
 Text Domain: astra-child
 Version: 1.0
*/

/* ===============================
   0) BASE / RESETS SUAVES
   =============================== */
:root{
  --gutter: 8px;                 /* hueco entre imágenes del masonry */
  /* Offsets del logo usados en Work */
  --logo-x: 40px;
  --logo-y: 24px;
  --logo-size: 48px;
  --clear-under-logo: calc(var(--logo-y) + var(--logo-size) + 24px);

  /* Posición/tamaño del logo del header */
  --logo-top: 18px;
  --logo-left: 24px;
  --logo-size-header: 48px;
}

html, body { margin:0; padding:0; background:#000; }
img { max-width:100%; height:auto; display:block; }
a { color:#c6e2ff; text-decoration:none; }
a:hover { color:#fff; }

/* contenedor para transiciones si luego reactivas PJAX */
#pjax-container { opacity:1; transition: opacity .25s ease; }

/* ===============================
   1) THEME OSCURO (header, body, footer)
   =============================== */
.site, .ast-container, .site-content, .entry-content { background:#000; }
body, .entry-content, .site-main { color:#e5e5e5; }

/* Header Astra */
.ast-site-header, .main-header-bar { background:#000; border-bottom:0; }
.ast-desktop .menu-link, .ast-header-custom-item, .ast-builder-menu-1 .menu-item > a { color:#fff; }
.ast-desktop .menu-link:hover { color:#cfcfcf; }

/* Footer */
.site-footer { background:#000; color:#a8a8a8; }
.site-footer a { color:#ddd; }
.site-footer a:hover { color:#fff; }

/* ===============================
   2) HEADER ancho completo + padding lateral
   =============================== */
.site-header .ast-container{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  padding:0 24px !important;
}

/* header/branding por encima de contenido (no del cursor) */
.site-header{ position:relative; z-index:10040; }
.site-branding{ position:relative; z-index:10050; }
.site-branding img{ display:block; margin-left:0 !important; }

/* Títulos de página pegados a la izquierda (si se usan) */
.entry-title{ margin-left:0 !important; padding-left:0 !important; }

/* ===============================
   3) CURSOR CIRCULAR (modo negativo)
   =============================== */
#cursor{
  position: fixed; left:0; top:0; width:30px; height:30px;
  border-radius:50%; pointer-events:none; z-index:10100;
  mix-blend-mode:difference; background:#fff; opacity:.9;
  transform: translate(-50%, -50%);
  transition: width .2s ease, height .2s ease, opacity .2s ease;
}
#cursor.big{ width:72px; height:72px; }

/* ===============================
   4) WORK (Masonry CSS sin huecos en bordes)
   =============================== */
.page-id-90 .ast-container,
.page-id-90 .entry-content,
.page-id-90 .site-content,
.page-id-90 .work-wrap{
  max-width:none !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
}

/* Wrapper a 100vw pegado a bordes */
.page-id-90 .work-wrap.fullbleed{
  width:100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Masonry sin hueco en extremos (padding interno por brick) */
.masonry{ column-gap:0; margin-left: calc(-1 * var(--gutter)); }
.brick{ break-inside:avoid; padding-left:var(--gutter); margin:0 0 var(--gutter) 0; }
.brick img{ width:100%; height:auto; }

/* Nº de columnas responsivo */
@media (min-width: 0px)   { .masonry{ columns: 1; } }  /* móvil */
@media (min-width:1000px) { .masonry{ columns: 2; } }
@media (min-width:2000px) { .masonry{ columns: 3; } }
@media (min-width:3000px) { .masonry{ columns: 4; } }

/* Offsets del logo fijo afectando a Work */
.site-branding{
  position:fixed;
  top:var(--logo-y);
  left:var(--logo-x);
  z-index:10080;
}
.site-branding img,
.site-branding svg{ max-height:var(--logo-size); height:auto; width:auto; }

/* Empuja el grid hacia abajo con padding (no margin) */
.page-id-90 .work-wrap{ padding-top: var(--clear-under-logo) !important; }

/* Ajuste móvil del logo/offsets */
@media (max-width:768px){
  :root{
    --logo-x:24px;
    --logo-y:18px;
    --logo-size:40px;
    --clear-under-logo: calc(var(--logo-y) + var(--logo-size) + 18px);
  }
}

/* Quita cualquier padding-top previo si se reusa wrapper */
.page-id-90 .work-wrap{ padding-top:0 !important; }

/* Separación proporcional bajo el logo (grid) */
.page-id-90 .work-wrap.fullbleed .masonry,
.page-id-90 .masonry{ padding-top: var(--logo-y) !important; }

/* Sin línea blanca del header */
.main-header-bar,
.ast-header-break-point .main-header-bar,
.ast-above-header-wrap,
.ast-below-header-wrap{ border-bottom:0 !important; box-shadow:none !important; }

.page-id-90 .site-content,
.page-id-90 .ast-container,
.page-id-90 .entry-content{ border-top:0 !important; margin-top:0 !important; }

/* Ajustes finos de separación por tamaños */
@media (min-width:768px){
  .page-id-90 .masonry{ padding-top: calc(var(--logo-y) + var(--logo-size)*.18) !important; }
}
@media (min-width:920px){
  .page-id-90 .masonry{ padding-top: calc(var(--logo-y) + var(--logo-size)*.32) !important; }
  body.page-id-90 .work-wrap.fullbleed{
    padding-top: calc(clamp(24px, 2vw, 96px) + 40px) !important;
  }
}
@media (min-width:1600px){
  .page-id-90 .masonry{ padding-top: calc(var(--logo-y) + var(--logo-size)*.40) !important; }
}

/* ===============================
   5) MENÚ OVERLAY (hamburger siempre)
   =============================== */

/* Oculta el menú nativo Astra (usamos el overlay) */
.ast-builder-menu-1, .main-header-menu { display:none !important; }

/* Botón hamburger (círculo perfecto, ☰ ↔ X) */
.hamburger{
  position:fixed; top:14px; right:18px;
  z-index:10060; width:44px; height:44px; aspect-ratio:1/1;
  border-radius:9999px; border:0; padding:0; background:#000; color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-sizing:border-box;
}
.hamburger:hover, .hamburger:focus{ background:#000; outline:none; }
.hamburger span{
  position:absolute; left:50%; width:22px; height:2px; background:#fff;
  transform:translateX(-50%); transition: transform .25s ease, opacity .2s ease, width .25s ease;
}
.hamburger span:nth-child(1){ transform: translate(-50%, -7px) rotate(0); }
.hamburger span:nth-child(2){ transform: translate(-50%, 0) rotate(0); }
.hamburger span:nth-child(3){ transform: translate(-50%, 7px) rotate(0); }
.hamburger.is-open span:nth-child(1){ transform: translate(-50%, 0) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; width:0; }
.hamburger.is-open span:nth-child(3){ transform: translate(-50%, 0) rotate(-45deg); }

/* Overlay (velo + barra superior) */
.menu-overlay{
  position:fixed; inset:0; display:none;
  z-index:9980; background:rgba(0,0,0,.55);
}
body.menu-open .menu-overlay{ display:block; }

.menu-topbar{
  position:relative; background:#000; color:#fff;
  padding:clamp(20px, 3vw, 32px);
  display:grid; grid-template-columns:1fr auto; gap:clamp(24px, 5vw, 64px);
  align-items:start; transform:translateY(-100%); opacity:0;
  transition: transform .35s ease, opacity .35s ease;
}
body.menu-open .menu-topbar{ transform:translateY(0); opacity:1; }

/* Columna izquierda: info + logo del overlay (oculto) */
.menu-topbar .brand{ position:absolute; left:20px; top:12px; display:none !important; }
.menu-topbar .brand img{ max-height:48px; width:auto; height:auto; }
.menu-left{ display:flex; flex-direction:column; gap:12px; padding-top:64px; color:#fff; }
.menu-contact{ font-size:14px; line-height:1.5; opacity:.9; }
.menu-contact a{ color:#fff; border-bottom:1px solid transparent; }
.menu-contact a:hover{ border-bottom-color:#fff; }
.socials{ margin-top:6px; font-size:13px; opacity:.75; }

/* Nav derecha */
.overlay-menu{ list-style:none; margin:0; padding: clamp(8px, 1vw, 12px) 0; }
.overlay-menu > li{ margin:6px 0; }
.overlay-menu a{ display:block; color:#fff; font-size:clamp(24px, 3.2vw, 40px); line-height:1.1; }
.overlay-menu a:hover{ opacity:.75; }

/* Móvil: menú a pantalla completa */
@media (max-width:768px){
  .menu-overlay{ background:#000; }
  .menu-topbar{ grid-template-columns:1fr; min-height:100svh; padding-top:84px; }
  .overlay-menu a{ font-size:clamp(28px, 9vw, 44px); }
  .menu-topbar .brand img{ max-height:40px; }
}

/* Desaturar lo que hay detrás cuando el menú abre (solo contenido) */
body.menu-open .site-main{ filter:saturate(.9) brightness(.85); transition:.2s; }

/* Cursor por encima de todo, sin bloquear clicks */
#cursor{ pointer-events:none; z-index:10100 !important; }

/* ===== Overlay: contacto abajo (desktop) y al fondo (móvil) ===== */
.menu-left .menu-contact,
.menu-left .socials{ position:static !important; }

@media (min-width:769px){
  .menu-topbar{ align-items:end; min-height:auto !important; height:auto !important;
                padding-top:clamp(12px, 1.8vw, 28px); padding-bottom:clamp(12px, 1.8vw, 28px); }
  .menu-left{ display:flex; flex-direction:column; gap:10px; padding-bottom:10px; }
  .menu-left .brand{ margin-bottom:auto; }
  .menu-left .menu-contact{ margin-top:auto; margin-bottom:6px; }
  .menu-left .socials{ margin:0; }
}
@media (max-width:768px){
  .menu-topbar{ min-height:100svh !important; grid-template-columns:1fr; }
  .menu-right{ order:1; }
  .menu-left{ order:2; display:flex; flex-direction:column; justify-content:flex-end;
              padding-bottom:clamp(16px, 4vw, 32px); }
}

/* ===============================
   6) LOGO DEL HEADER SIEMPRE POR DELANTE
   =============================== */

/* Quita barra/linea del header cuando el menú está abierto */
body.menu-open .site-header,
body.menu-open .main-header-bar,
body.menu-open .ast-above-header-wrap,
body.menu-open .ast-below-header-wrap{
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
body.menu-open .site-header::before,
body.menu-open .main-header-bar::before,
body.menu-open .main-header-bar::after{ content:none !important; }

/* El header no tapa el overlay; logo/hamburger sí son clicables */
body.menu-open .site-header{ z-index:1 !important; pointer-events:none; }
body.menu-open .site-branding,
body.menu-open .ast-site-identity,
body.menu-open .hamburger{ pointer-events:auto; z-index:10090 !important; }

/* Wrapper del logo: no tapar, solo el enlace clicable */
.site-branding{ display:inline-block; width:auto; pointer-events:none; }
.site-branding a{ pointer-events:auto; display:inline-block; }

/* Logo del header: fijo y por encima del overlay (debajo del cursor) */
.site-branding,
.ast-site-identity{
  position:fixed !important;
  top:var(--logo-top);
  left:var(--logo-left);
  z-index:2147483000 !important;            /* aseguramos prioridad */
  margin:0 !important;
}
.site-branding img,
.site-branding svg,
.ast-site-identity img,
.ast-site-identity svg{
  display:block;
  max-height:var(--logo-size-header);
  height:auto; width:auto; color:#fff;
}

/* Overlay y barra por debajo del logo (y debajo del cursor) */
.menu-overlay{ z-index:9999 !important; }
.menu-topbar{  z-index:10000 !important; }
.hamburger{    z-index:2147482000 !important; } /* debajo del logo, encima del overlay */
#cursor{       z-index:2147483600 !important; }

/* Ajuste móvil del logo del header */
@media (max-width:768px){
  :root{
    --logo-top:16px;
    --logo-left:20px;
    --logo-size-header:40px;
  }
}

/* Logo del header: SIEMPRE delante de todo (menos el cursor) */
.site-branding,
.ast-site-identity{
  position: fixed !important;
  top: var(--logo-top);
  left: var(--logo-left);
  z-index: 2147483000 !important; /* prioritario */
  margin: 0 !important;
  pointer-events: none;            /* evita que el wrapper bloquee */
}
.site-branding a,
.ast-site-identity a{
  pointer-events: auto;            /* el enlace sí clicable */
  display: inline-block;
}

/* Asegura que nada del header “tape” al abrir el overlay */
/* El header NO baja de z-index al abrir el menú */
body.menu-open .site-header{ z-index:10040 !important; pointer-events:none; }
body.menu-open .site-branding,
body.menu-open .ast-site-identity,
body.menu-open .hamburger{ pointer-events: auto; z-index: 2147483000 !important; }

/* Cualquier overlay/menú/modal del tema, por debajo del logo */
.menu-overlay{ z-index: 9999 !important; }
.menu-topbar { z-index: 10000 !important; }
.hamburger   { z-index: 2147482000 !important; }

/* Defensa extra por si algún plugin trae z-index enormes */
[class*="modal"], [class*="drawer"], [class*="offcanvas"]{
  z-index: 12000 !important; /* aún por debajo del logo */
}

/* ——— Quitar por completo cualquier fondo del header cuando el menú está abierto ——— */
body.menu-open .site-header,
body.menu-open .site-header *,
body.menu-open .main-header-bar,
body.menu-open .ast-primary-header-bar,
body.menu-open .ast-above-header-bar,
body.menu-open .ast-below-header-bar,
body.menu-open .ast-mobile-header-wrap,
body.menu-open .ast-desktop .main-header-bar,
body.menu-open .ast-header-break-point .main-header-bar,
body.menu-open [class*="header"] {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  /* El header no intercepta clics del menú */
  pointer-events: none !important;
}

/* El logo y el botón (hamburger/cerrar) siguen clicables */
body.menu-open .site-branding a,
body.menu-open .ast-site-identity a,
body.menu-open .hamburger {
  pointer-events: auto !important;
}

/* Si el tema inyecta barras/velos con pseudos encima del header, los anulamos */
body.menu-open .site-header::before,
body.menu-open .site-header::after,
body.menu-open .main-header-bar::before,
body.menu-open .main-header-bar::after,
body.menu-open .ast-primary-header-bar::before,
body.menu-open .ast-primary-header-bar::after,
body.menu-open [class*="header"]::before,
body.menu-open [class*="header"]::after {
  content: none !important;
  background: transparent !important;
}

/* Mobile: el bloque de info (menu-left) pegado al borde inferior */
@media (max-width: 768px){
  .menu-topbar{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr auto !important; /* fila 1: menú · fila 2: contacto */
    min-height: 100svh !important;
    padding-top: 84px !important; /* ya lo usabas */
  }
  .menu-right{ grid-row: 1 !important; align-self: start !important; }
  .menu-left { grid-row: 2 !important; align-self: end !important;
               padding-bottom: calc(env(safe-area-inset-bottom,0) + 24px) !important; }
}
/* Overlay siempre en block para que pueda animar */
#menu-overlay{ display:block !important; }

/* Cerrado (por aria-hidden o sin .menu-open) */
#menu-overlay[aria-hidden="true"]{
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
#menu-overlay[aria-hidden="true"] .menu-topbar{
  transform: translateY(-16px);
  opacity:0;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
}

/* Abierto */
#menu-overlay[aria-hidden="false"]{
  opacity:1; visibility:visible; pointer-events:auto;
  transition: opacity .35s ease;
}
#menu-overlay[aria-hidden="false"] .menu-topbar{
  transform:none; opacity:1;
}

/* Respaldo por si algún estilo antiguo depende de .menu-open */
body.menu-open #menu-overlay{ opacity:1; visibility:visible; pointer-events:auto; }
body.menu-open #menu-overlay .menu-topbar{ transform:none; opacity:1; }

/* Stagger suave para los items del menú (opcional) */
#menu-overlay .menu-right li{
  opacity:0; transform:translateY(8px);
  transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
}
#menu-overlay[aria-hidden="false"] .menu-right li{
  opacity:1; transform:none;
}
#menu-overlay .menu-right li:nth-child(1){ transition-delay:.05s; }
#menu-overlay .menu-right li:nth-child(2){ transition-delay:.10s; }
#menu-overlay .menu-right li:nth-child(3){ transition-delay:.15s; }
#menu-overlay .menu-right li:nth-child(4){ transition-delay:.20s; }

@media (prefers-reduced-motion: reduce){
  #menu-overlay, #menu-overlay .menu-topbar, #menu-overlay .menu-right li{
    transition:none !important; transform:none !important; opacity:1 !important; visibility:visible !important;
  }
}
body:not(.menu-open) #menu-overlay{ display:block !important; }


/* ===== HERO FULLSCREEN (home) ===== */

/* Quita cualquier padding/margen que meta el tema arriba */
.home .site-content,
.home .content-area,
.home .entry-content,
.home .ast-container{
  margin: 0 !important;
  padding: 0 !important;
}

/* Sección hero a ANCHO COMPLETO aunque esté dentro del container */
.home #hero-showreel{
  position: relative;
  height: 100svh;                 /* ocupa toda la ventana, mobile-safe */
  width: 100vw;                   /* ancho completo del viewport */
  left: 50%;
  transform: translateX(-50%);    /* centra fuera del container */
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 1;                     /* por debajo del header */
}

/* El vídeo rellena la sección tocando los 4 bordes */
#hero-showreel #hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  background: #000;
}

/* Header superpuesto y transparente en home */
.home .site-header,
.home .main-header-bar,
.home .ast-primary-header-bar{
  position: absolute !important;
  top: 0; left: 0; right: 0;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 1000;                  /* por encima del hero */
}

/* La primera sección tras el hero no añade hueco extra */
.home #hero-showreel + *{ margin-top: 0 !important; }

/* Si estás logueado (barra de admin), ajusta en escritorio */
@media (min-width: 782px){
  .admin-bar .home .site-header{ top: 32px; }
  .admin-bar .home #hero-showreel{ margin-top: 32px; height: calc(100svh - 32px); }
}

/* ====== HERO FULLSCREEN – FIX DESKTOP ====== */

/* 0) El contenedor de Astra no debe meter ancho/márgenes en la home */
.home .site-content,
.home .content-area,
.home .entry-content,
.home .ast-container{
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

/* 1) Hero a ancho de viewport, sin translate, y “full-bleed” con márgenes vw */
.home #hero-showreel{
  position: relative !important;
  height: 100vh;           /* usa 100vh en desktop */
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  /* full-bleed: saca la sección del container centrado */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  background: #000;
  overflow: hidden;
  box-sizing: border-box;
  top: 0;
}

/* 2) El video rellena la sección al 100% sin deformar, centrado */
#hero-showreel #hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* recorta para cubrir */
  object-position: center;     /* centrado real */
  display: block;
  background: #000;
}

/* 3) Header superpuesto y transparente en home (sin banda negra arriba) */
.home .site-header,
.home .main-header-bar,
.home .ast-primary-header-bar{
  position: absolute !important;
  top: 0; left: 0; right: 0;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 1000;
}

/* 4) La sección siguiente empieza justo debajo del hero */
.home #hero-showreel + *{ margin-top: 0 !important; }

/* 5) Evita scroll horizontal si algún layout empuja 1px */
html, body{ overflow-x: hidden; }

/* 6) Si estás logueado, ajusta la barra de admin en escritorio */
@media (min-width: 782px){
  .admin-bar .home .site-header{ top: 32px; }
  .admin-bar .home #hero-showreel{
    margin-top: 32px;
    height: calc(100vh - 32px);
  }
}

/* 7) En móviles, mantenemos 100svh (mejor con barras dinámicas) */
@media (max-width: 1024px){
  .home #hero-showreel{ height: 100svh; }
}

/* HOME: header siempre transparente (desktop/tablet/móvil) */
.home .site-header,
.home .main-header-bar,
.home .ast-primary-header-bar,
.home .ast-above-header-bar,
.home .ast-below-header-bar{
  background: transparent !important;
  box-shadow: none !important;
}

/* Variante desktop de Astra */
@media (min-width: 921px){
  .home .ast-desktop .main-header-bar,
  .home .ast-desktop .ast-primary-header-bar{
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* Quita pseudo-elementos que pintan la banda */
.home .main-header-bar:before,
.home .main-header-bar:after,
.home .ast-primary-header-bar:before,
.home .ast-primary-header-bar:after{
  content: none !important;
  display: none !important;
}

/* Contenedores internos del header sin fondo */
.home .site-header .ast-container,
.home .site-header .ast-container *{
  background-color: transparent !important;
}

/* Si el header sticky se activa, que siga transparente en home */
.home .ast-sticky-header-active .ast-header-sticky{
  background: transparent !important;
  box-shadow: none !important;
}

/* Mantenlo superpuesto sobre el vídeo */
.home .site-header{ position: absolute !important; top:0; left:0; right:0; z-index:1000; }

/* El cursor custom no debe interceptar clics */
#cursor{
  pointer-events: none;
}

/* Ocultar en móviles / pantallas táctiles */
@media (hover: none), (pointer: coarse){
  #cursor{ display: none !important; }
}

/* ===== Logo más grande en móvil y tablet ===== */
/* — Reset por defecto (desktop) — */
.site-header .ast-site-identity img,
.site-header .ast-site-identity .custom-logo,
.site-header .ast-logo-svg,
.site-header .ast-site-identity svg {
  transform: none !important;
}

/* — Móvil/Tablet EXACTO: solo cuando Astra activa su breakpoint — */
body.ast-header-break-point .site-header .ast-site-identity img,
body.ast-header-break-point .site-header .ast-site-identity .custom-logo,
body.ast-header-break-point .ast-logo-svg,
body.ast-header-break-point .site-header .ast-site-identity svg,
body.ast-header-break-point .ast-mobile-header-wrap .ast-site-identity img,
body.ast-header-break-point .ast-mobile-header-wrap .ast-site-identity svg {
  transform: scale(1.5) !important;   /* 50% más grande */
  transform-origin: center left !important; /* cambia a center center si lo prefieres */
}

/* (Opcional) Si el header sticky encoge el logo, no le sumes el “zoom” */
body.ast-header-break-point .ast-sticky-shrunk .ast-site-identity img,
body.ast-header-break-point .ast-sticky-shrunk .ast-site-identity .custom-logo,
body.ast-header-break-point .ast-sticky-shrunk .ast-logo-svg,
body.ast-header-break-point .ast-sticky-shrunk .ast-site-identity svg {
  transform: none !important;
}

/* Reset general (por si quedó algo antiguo) */
.site-header .ast-site-identity img,
.site-header .ast-site-identity .custom-logo,
.site-header .ast-logo-svg,
.site-header .ast-site-identity svg {
  transform: none !important;
}

/* ⛔️ Nunca magnificar por encima de 921px, aunque el body tenga la clase */
@media (min-width: 922px){
  body.ast-header-break-point .site-header .ast-site-identity img,
  body.ast-header-break-point .site-header .ast-site-identity .custom-logo,
  body.ast-header-break-point .ast-logo-svg,
  body.ast-header-break-point .site-header .ast-site-identity svg,
  body.ast-header-break-point .ast-mobile-header-wrap .ast-site-identity img,
  body.ast-header-break-point .ast-mobile-header-wrap .ast-site-identity svg {
    transform: none !important;
  }
}

/* ✅ Magnificar solo en móvil/tablet real: ≤ 921px y con header móvil activo */
@media (max-width: 921px){
  body.ast-header-break-point .site-header .ast-site-identity img,
  body.ast-header-break-point .site-header .ast-site-identity .custom-logo,
  body.ast-header-break-point .ast-logo-svg,
  body.ast-header-break-point .site-header .ast-site-identity svg,
  body.ast-header-break-point .ast-mobile-header-wrap .ast-site-identity img,
  body.ast-header-break-point .ast-mobile-header-wrap .ast-site-identity svg {
    transform: scale(1.5) !important;   /* 50% más grande */
    transform-origin: center left !important; /* o center center si prefieres */
  }
}

/* H1 oculto para SEO y accesibilidad */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== HERO overlay: layout, colores y animaciones ===== */
#hero-showreel { position: relative; }

.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16vh 6vw 10vh;       /* desktop por defecto (vertical ajustado) */
  text-align: center;
  pointer-events: none;
}
.hero-overlay > *{ pointer-events: auto; }

/* Colores y sombras */
.hero-tagline, .hero-subtitle, .cta-intro{
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}

/* Títulos: una sola línea y centrados */
.hero-tagline,
.hero-subtitle{
  display:block;
  white-space:nowrap;
  line-height:1.15;
  margin:0 auto;
  text-align:center;
}

/* Espaciado entre bloques */
.hero-tagline{  margin-bottom:.8rem; }
.hero-subtitle{ margin-bottom:2.6rem; }
.cta-intro{     margin-bottom:.6rem; }

/* CTA */
.awe-cta{
  display:inline-block;
  padding:16px 36px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#fff;
  font-weight:500;
  font-size:17px;
  letter-spacing:.3px;
  backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.30);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.awe-cta:hover{ transform:translateY(-2px); background:rgba(255,255,255,.20); border-color:rgba(255,255,255,.60); }

/* Animación fade-up (stagger) */
@keyframes hero-fade-up{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:translateY(0); }
}
.hero-tagline{ animation: hero-fade-up .9s ease both .15s; }
.hero-subtitle{ animation: hero-fade-up .9s ease both .30s; }
.cta-intro   { animation: hero-fade-up .9s ease both .45s; }
.awe-cta     { animation: hero-fade-up .9s ease both .60s; }

/* ===== Tamaños tipográficos (continuos y sin saltos) ===== */
/* Desktop grande */
@media (min-width:1280px){
  .hero-tagline { font-size:60px; }   /* ≈ 3.8rem */
  .hero-subtitle{ font-size:24px; }   /* ≈ 1.5rem */
}
/* Desktop medio */
@media (min-width:1024px) and (max-width:1279px){
  .hero-tagline { font-size:52px; }
  .hero-subtitle{ font-size:21px; }
}
/* Tablet (fija valores que están funcionando bien) */
@media (min-width:768px) and (max-width:1023px){
  .hero-tagline { font-size:40px; }
  .hero-subtitle{ font-size:18px; }
  .hero-overlay { padding:20vh 6vw 8vh; } /* baja un poco el bloque */
}
/* Móvil (continuidad exacta desde 768px y hacia abajo solo disminuye) */
@media (max-width:767px){
  .hero-tagline { font-size:5.2083vw; }  /* 40px en 768px → continuidad */
  .hero-subtitle{ font-size:2.3438vw; }  /* 18px en 768px */
  .hero-overlay { padding:28vh 7vw 4vh; }/* más bajo y aire lateral */
}
/* Móvil muy estrecho (compacta aún más) */
@media (max-width:360px){
  .hero-tagline { font-size:4.9vw; }
  .hero-subtitle{ font-size:2.2vw; }
  .hero-tagline, .hero-subtitle{ letter-spacing:.01em; }
}

/* Fondo negro global: evita cualquier “flash” blanco en iOS */
html, body, #page, .site, .site-content, .hfeed, .ast-container {
  background:#000 !important;
}

/* El header de Astra a transparente (también su pseudo-elemento) */
.site-header, .main-header-bar, .ast-primary-header-bar { 
  background: transparent !important; 
}
.main-header-bar::before { background: transparent !important; }

/* La hero también negra por si tarda el vídeo */
#hero-showreel { background:#000; }

/* Variables de safe-area (iOS notch / Dynamic Island) */
:root{
  --sat: env(safe-area-inset-top);
  --sal: env(safe-area-inset-left);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
}

/* Aplica safe-area SOLO al contenido (no al vídeo) */
@supports (padding: max(0px)) {
  .hero-overlay{
    padding-top: calc(var(--sat) + 28vh) !important;
    padding-left:  max(6vw, var(--sal));
    padding-right: max(6vw, var(--sar));
    padding-bottom: max(4vh, var(--sab));
  }

  /* Logo y hamburguesa, fuera del notch */
  #fixed-logo, #hamburger {
    top: calc(16px + var(--sat)) !important;
  }
}

/* ===== Calendly: el contenido debe ocupar TODO el popup ===== */

/* Capa oscura y cuadro centrado (por si tu tema los pisa) */
.calendly-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  background: rgba(0,0,0,.6) !important;
}

.calendly-popup{
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2147483647 !important;
  width: min(720px, 96vw) !important;
  height: min(90vh, 720px) !important;   /* alto real del cuadro */
  background: #fff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;              /* << clave para que el contenido crezca */
  flex-direction: column !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.35) !important;
}

/* El contenedor interno ocupa todo… */
.calendly-popup .calendly-popup-content{
  flex: 1 1 auto !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* …y el iframe también, sin límites de altura heredados */
.calendly-popup iframe,
.calendly-iframe,
.calendly-popup .calendly-popup-iframe{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;     /* neutraliza reglas globales tipo “iframe {max-height:…}” */
  border: 0 !important;
}

/* Botón de cerrar siempre visible encima */
.calendly-popup-close{
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 2147483648 !important;
}

/* ===== Calendly modal: tamaños para 2 columnas en desktop ===== */
.calendly-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  background: rgba(0,0,0,.6) !important;
}

.calendly-popup{
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2147483647 !important;

  /* Tamaño base (móvil/tablet) -> 1 columna, sin desbordes */
  width: min(720px, 96vw) !important;
  height: min(90vh, 760px) !important;

  background: #fff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.35) !important;
}

/* En desktop ancho activar 2 columnas: subir a ~1040px */
@media (min-width: 1200px){
  .calendly-popup{
    width: min(1040px, 94vw) !important;   /* > ~980px → 2 columnas */
    height: min(92vh, 900px) !important;   /* más altura para evitar scroll interno */
  }
}

/* Asegurar que el contenido e iframe llenan todo el popup */
.calendly-popup .calendly-popup-content{
  flex: 1 1 auto !important;
  height: 100% !important;
  overflow: hidden !important;
}
.calendly-popup iframe{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  border: 0 !important;
}

/* Botón de cerrar, por encima */
.calendly-popup-close{
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 2147483648 !important;
}

/* ===== BOTÓN DE CIERRE PERSONALIZADO ===== */
.calendly-close-btn {
  position: fixed !important;
  top: 24px !important;
  right: 28px !important;
  width: 32px !important;
  height: 32px !important;
  z-index: 2147483648 !important;
  border: none !important;
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 30px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  backdrop-filter: blur(8px) !important;
  transition: background 0.25s ease;
}
.calendly-close-btn:hover {
  background: rgba(255,255,255,0.35) !important;
}

/* === Work overlay — Móvil por defecto (texto DEBAJO) === */
.brick{ position: relative; }
.brick-link{ display:block; color:inherit; text-decoration:none; }
.brick-link img{
  display:block;
  transition: filter .25s ease, transform .25s ease;
}

/* En móvil / pantallas sin hover, el texto va debajo de la foto */
.brick-overlay{
  position: static;
  padding: 10px 6px 0;
  background: none;
  opacity: 1;
  transform: none;
  text-align: left;
}
.brick-overlay .meta-top{
  color: rgba(255,255,255,.8);
  font-size: 12px; letter-spacing:.06em; text-transform:uppercase;
  margin-bottom: .3rem;
}
.brick-overlay .meta-title{
  color:#fff; font-weight:500; font-size: 20px; line-height:1.15; margin:0 .0 .25rem 0;
}
.brick-overlay .meta-client{
  color: rgba(255,255,255,.9); font-size: 13px;
}

/* === Desktop (con hover): texto SUPERPUESTO y la imagen se oscurece === */
@media (hover: hover) and (pointer: fine){
  .brick{ overflow: hidden; }

  /* el overlay pasa a cubrir la imagen y está oculto hasta el hover */
  .brick-overlay{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;      /* o center si lo prefieres */
    padding: 16px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
  }
  .brick-overlay .meta-top{ font-size: 12px; }
  .brick-overlay .meta-title{ font-size: 24px; }
  .brick-overlay .meta-client{ font-size: 13px; }

  /* al pasar el ratón: aparece overlay y la foto se “nubla” */
  .brick-link:hover .brick-overlay,
  .brick-link:focus .brick-overlay{
    opacity: 1;
    transform: translateY(0);
  }
  .brick-link:hover img,
  .brick-link:focus img{
    filter: brightness(.55) contrast(1.05) saturate(.9);
  }
}

/* ===== WORK · Móvil: línea única bajo la foto ===== */
@media (max-width: 767px){

  /* un poco más de aire entre proyectos */
  .brick{
    margin-bottom: calc(var(--gutter, 8px) + 14px);
  }

  /* la banda inferior (debajo de la imagen) con todo en una línea */
  .brick-overlay{
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 8px 12px;
    background: #000;                         /* banda negra clara */
    border-top: 1px solid rgba(255,255,255,.07);
    text-align: left;
    opacity: 1;                               /* visible siempre en móvil */
    transform: none;
  }

  /* Título izquierda */
  .brick-overlay .meta-title{
    margin: 0;
    font-weight: 500;
    font-size: clamp(16px, 5.4vw, 22px);
    line-height: 1.1;
    color: #fff;
  }

  /* Ubicación — año — categoría a la derecha */
  .brick-overlay .meta-top{
    order: 2;
    margin-left: auto;                        /* empuja a la derecha */
    white-space: nowrap;                      /* una sola línea */
    font-size: clamp(10px, 3.4vw, 13px);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
  }

  /* En móvil ocultamos el cliente (opcional) */
  .brick-overlay .meta-client{
    display: none;
  }
}

/* Mantener proporciones como las imágenes del masonry */
.brick-media { position: relative; overflow: hidden; }
.brick-media img,
.brick-media video {
  width: 100%;
  height: auto;       /* conserva el aspecto natural del vídeo */
  display: block;
}

/* Si prefieres que siempre “cubran” el tile, usa:  */
/* .brick-media img, .brick-media video { height: 100%; object-fit: cover; } */
/* …pero en masonry suele ir mejor height:auto para que no descuadre. */

/* ——— Layout y centrado ——— */
.project-hero{ display:flex; justify-content:center; }
.carousel-viewport{
  position:relative;
  width:min(92vw, 1600px);
  margin-inline:auto;
  aspect-ratio: 16/9;               /* da una caja estable mientras carga */
  background:#000;                  /* por si el slide no ocupa todo */
  overflow:hidden;
  border-radius: 4px;
}
.carousel-track{
  height:100%;
  display:flex;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.carousel-track figure{ 
  width:100%; height:100%; flex:0 0 100%;
  margin:0; position:relative; overflow:hidden;
}
.carousel-track img,
.carousel-track video{
  width:100%; height:100%;
  object-fit:cover;                 /* puedes cambiar a contain si prefieres */
  display:block;
}

/* ——— Zonas clicables invisibles (laterales) ——— */
.hit-zone{
  position:absolute; top:0; bottom:0; width:50%;
  background:transparent; border:0; padding:0; margin:0;
  cursor:none;                      /* ocultamos cursor propio del botón */
}
.hit-left { left:0; }
.hit-right{ right:0; }

/* ——— Dots pequeños, redondos, FUERA de la imagen ——— */
.carousel-dots{
  display:flex; justify-content:center; gap:8px;
  margin:10px 0 18px;
}
.carousel-dots button{
  width:7px; height:7px; border-radius:50%;
  border:0; background:rgba(255,255,255,.35);
  transition:transform .2s ease, background .2s ease;
}
.carousel-dots button.active{
  background:#fff; transform:scale(1.15);
}

/* ——— Cursor → flecha en zonas laterales ——— */
/* Usamos tu #cursor existente. Sólo añadimos “skins” */
body.cursor-arrow-left  #cursor::after,
body.cursor-arrow-right #cursor::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:40%; height:40%;
  border: solid 2px #fff; border-left:0; border-top:0;
  transform: rotate(45deg);          /* base → flecha “›” */
}
body.cursor-arrow-left  #cursor::after{ transform: rotate(225deg); } /* “‹” */

body.cursor-arrow-left  #cursor,
body.cursor-arrow-right #cursor{
  width:64px; height:64px;          /* lo haces “big” como querías */
}

/* Asegúrate de que #cursor siga por encima de todo */
#cursor{ z-index:2147483600 !important; }

/* ===== Project hero centrado y proporcionado ===== */
.project-carousel {
  background:#000;
}

/* Contenedor visible del carrusel */
.carousel-viewport{
  position:relative;
  width: min(92vw, 1600px);     /* centra y limita en desktop grande */
  margin: 0 auto;
  aspect-ratio: 16 / 10;        /* sensación “lámina”; cambia a 16/9 si prefieres */
  max-height: 86vh;             /* nunca sobrepasa el viewport */
  height: auto;                 /* se rige por aspect-ratio */
  overflow: hidden;
  display: grid;                /* para que los elementos llenen el área */
}

/* Pista de slides */
.carousel-track{
  display:flex;
  height: 100%;
  transition: transform .6s ease;
}

/* Cada slide ocupa todo el viewport visual del carrusel */
.carousel-viewport .slide{
  flex: 0 0 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.carousel-viewport img,
.carousel-viewport video{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Zonas de click invisibles (no ponemos botones ni iconos) */
.carousel-viewport .hit-left,
.carousel-viewport .hit-right{
  position:absolute; top:0; height:100%;
  width: 18%;                 /* margen cómodo de interacción */
  z-index: 4; cursor: none;   /* usamos nuestro cursor custom */
}
.carousel-viewport .hit-left { left:0; }
.carousel-viewport .hit-right{ right:0; }

/* Puntos: muy pequeños, redondos y FUERA del media */
.project-dots{
  display:flex; gap:8px; justify-content:center; align-items:center;
  margin: 14px 0 6px;
}
.project-dots button{
  width:6px; height:6px; border-radius:50%;
  border:0; background:rgba(255,255,255,.45);
  padding:0; line-height:0;
  transition: transform .15s ease, background .15s ease;
}
.project-dots button.active{
  background:#fff; transform: scale(1.15);
}

/* Título + meta: un poco más cerca del carrusel */
.project-meta{
  padding-top: 6px !important;
}

/* ===== Cursor: círculo que se convierte en flecha ===== */
body.cursor-arrow-left  #cursor,
body.cursor-arrow-right #cursor{
  width: 56px; height: 56px; opacity: .95;
}

#cursor::after{ content:''; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.25);
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
}

/* dibujamos la cabeza de flecha con bordes */
#cursor::before{
  content:''; position:absolute; top:50%; left:50%;
  width:12px; height:12px; border-top:2px solid #fff; border-right:2px solid #fff;
  transform-origin:center;
}

/* ← */
body.cursor-arrow-left  #cursor::before{
  transform: translate(-40%,-50%) rotate(-135deg);
}
/* → */
body.cursor-arrow-right #cursor::before{
  transform: translate(-60%,-50%) rotate(45deg);
}