/* ============================================================
   JELLY 2026 — global.css
   Base + componentes compartidos por TODAS las páginas:
   reset, header/hamburguesa, overlay de menú, logo sticky,
   back-to-top, cursor personalizado y footer.
   Los tokens de color viven en variables.css.
   ============================================================ */

/* ── BASE / RESET ── */
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ width:100%; background:var(--negro); overflow-x:hidden; font-family:'DM Sans',sans-serif; }

/* ── FADE DE PÁGINA (entrada/salida) ── */
body{ opacity:0; transition:opacity 0.45s ease; }
body.loaded{ opacity:1; }

/* ── HAMBURGER ── */
.hamburger{
  background:none; border:none;
  width:40px; padding:0; z-index:9998;
  display:flex; flex-direction:column; gap:8px;
  position:fixed; top:31px; right:56px;
  mix-blend-mode:difference;
  cursor:none;
}

/* ── NAV OVERLAY ── */
.nav-overlay{
  position:fixed; inset:0; z-index:900;
  visibility:hidden; pointer-events:none;
}
.nav-overlay.open{ visibility:visible; pointer-events:auto; }

.nav-bg{
  position:absolute; inset:0;
  background:rgba(0,0,0,0.45); opacity:0;
}

.nav-panels{
  position:absolute; top:0; right:0;
  width:455px; height:100%;
  display:flex; flex-direction:column;
  gap:17px; padding:20px;
  overflow-y:auto;
}

/* Panel base — todos empiezan fuera */
.nav-panel{ border-radius:12px; transform:translateX(110%); }

/* Panel 1 — crema, ocupa el espacio disponible */
.panel-links{
  background:var(--crema);
  flex:1; min-height:350px;
  display:flex; flex-direction:column;
  padding:31px 36px 50px 42px;
  gap:43px;
}
.panel-links-top{ display:flex; justify-content:flex-end; }

/* X — DENTRO del panel crema, igual que Figma */
.btn-close{
  background:none; border:none; cursor:pointer;
  width:40px; height:34px; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.btn-close svg{ display:block; pointer-events:none; }

.nav-list{ list-style:none; display:flex; flex-direction:column; gap:26px; align-items:flex-start; }
.nav-link{
  font-family:'Unbounded',sans-serif; font-weight:500;
  font-size:28px; line-height:1; color:#252525;
  text-decoration:none; display:inline-block;
  opacity:0; transform:translateX(-20px);
  overflow:hidden;
  position:relative;
}
.nav-link .nav-text{
  display:flex;
  flex-direction:column;
  transition:transform .3s cubic-bezier(.76,0,.24,1);
}
.nav-link .nav-text span{
  display:block;
  line-height:1.1;
}
.nav-link .nav-text span:last-child{
  position:absolute;
  top:100%;
  left:0;
}
.nav-link:hover .nav-text{
  transform:translateY(-100%);
}

/* Panel 2 — rojo, blog */
.panel-blog{
  background:var(--rojo); flex-shrink:0;
  border-radius:12px;
  padding:24px 19px 23px 27px;
  display:flex; flex-direction:column; gap:14px;
}
.blog-header{
  display:flex; align-items:stretch;
  border:1px solid var(--negro);
  cursor:pointer; text-decoration:none;
  transition:border-color 0.2s;
}
.blog-header:hover{ border-color:var(--blanco); }
.blog-header:hover .blog-label{ color:var(--blanco); }
.blog-header:hover .blog-btn{ background:var(--blanco); color:var(--negro); }
.blog-label{
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:13px;
  color:var(--negro); padding:0 8px;
  display:flex; align-items:center; flex:1;
  transition:color 0.2s;
}
.blog-btn{
  background:var(--negro); color:var(--blanco);
  font-family:'DM Sans',sans-serif; font-weight:500; font-size:14px;
  border:none; padding:0 16px; height:44px;
  white-space:nowrap; display:flex; align-items:center;
  transition:background 0.2s,color 0.2s;
}
.blog-title{
  font-family:'Unbounded',sans-serif; font-weight:500; font-size:20px;
  color:var(--blanco);
}
.blog-desc{
  font-family:'DM Sans',sans-serif; font-size:13px;
  color:var(--blanco); line-height:1.4;
}
.blog-link{
  font-family:'DM Sans',sans-serif; font-weight:500; font-size:14px;
  color:var(--blanco); text-decoration:none; display:inline-block;
}
.blog-link:hover{ text-decoration:underline; }

.blog-content{
  display:flex; flex-direction:column; gap:14px;
  text-decoration:none; cursor:pointer;
}
.blog-content:hover .blog-link{ text-decoration:underline; }

/* Panel 3 — negro, quote de data publicitaria */
.panel-contact{
  background:var(--negro); border:1px solid #404040;
  border-radius:12px; flex-shrink:0;
  padding:27px 27px 20px;
  display:flex; flex-direction:column;
  justify-content:space-between; gap:16px;
  opacity:0;
}
.quote-label{
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:13px;
  color:#a3a3a3; text-transform:uppercase; letter-spacing:0.04em;
}
.quote-stat{
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:40px;
  line-height:1.1; color:var(--blanco);
}
.quote-desc{
  font-family:'DM Sans',sans-serif; font-size:13px;
  color:#a3a3a3; line-height:1.4;
}
.quote-source{
  font-family:'DM Sans',sans-serif; font-weight:500;
  font-size:12px; color:#404040; text-align:right;
}

/* ── LOGO STICKY ── */
#logo-sticky{
  position:fixed;
  top:28px;
  left:56px;
  z-index:9997;
  width:80px;
  height:auto;
  opacity:1;
  pointer-events:auto;
  transition:opacity .3s ease;
}
#logo-sticky.visible{ opacity:1; }

/* ── BACK TO TOP ── */
#back-to-top{
  position:fixed;
  bottom:31px;
  right:56px;
  z-index:899;
  width:44px;
  height:44px;
  border-radius:50%;
  border:2px solid #ffffff;
  background:none;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  mix-blend-mode:difference;
}
#back-to-top.visible{
  opacity:1;
  pointer-events:all;
}
#back-to-top.hidden{
  opacity:0 !important;
  pointer-events:none;
}
#back-to-top svg{
  width:16px;
  height:16px;
}

/* ── CUSTOM CURSOR ── */
*{ cursor: none !important; }
#js-cursor{
  position: fixed;
  top: 0; left: 0;
  width: 20px; height: 20px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  mix-blend-mode: difference;
  transition: width .45s cubic-bezier(.25,.1,.25,1), height .45s cubic-bezier(.25,.1,.25,1);
  will-change: transform;
}
#js-cursor.is-hovering{
  width: 52px;
  height: 52px;
}

/* ── FOOTER ── */
.site-footer{
  position:relative;
  width:100%;
  background:var(--rojo);
  padding:64px 56px 32px;
}
.footer-top{
  padding-top:32px;
  margin-bottom:64px;
}
.footer-email{
  font-family:'Unbounded',sans-serif; font-weight:700;
  font-size:clamp(40px,6vw,96px);
  line-height:1.05;
  color:var(--negro);
  text-decoration:none;
  text-transform:lowercase;
  word-break:break-all;
  display:inline-block;
  transition:opacity 0.2s;
}
.footer-email:hover{ opacity:0.7; }
.footer-mid{
  display:flex;
  gap:80px;
  margin-bottom:48px;
  flex-wrap:wrap;
}
.footer-col{
  display:flex; flex-direction:column; gap:10px;
  min-width:180px;
}
.footer-label{
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:12px;
  color:var(--negro); text-transform:uppercase; letter-spacing:0.04em;
  margin-bottom:4px;
}
.footer-line{
  font-family:'DM Sans',sans-serif; font-size:14px;
  color:var(--negro); line-height:1.4;
}
.footer-link{
  font-family:'DM Sans',sans-serif; font-weight:500; font-size:14px;
  color:var(--negro); text-decoration:none;
  transition:opacity 0.2s;
}
.footer-link:hover{ opacity:0.6; text-decoration:underline; }
.footer-bottom{
  border-top:1px solid var(--negro);
  padding-top:20px;
  display:flex; justify-content:flex-end;
}
.footer-copy{
  font-family:'DM Sans',sans-serif; font-weight:500; font-size:13px;
  color:var(--negro);
}

/* ══════════════════════════════════════
   MOBILE — breakpoint 768px (componentes globales)
   ══════════════════════════════════════ */
@media (max-width:768px){
  /* Cursor personalizado desactivado en táctil */
  #js-cursor, #custom-cursor{ display:none !important; }
  *{ cursor:auto !important; }

  /* Logo sticky — alinear con hamburger */
  #logo-sticky{
    left:24px !important;
    top:24px !important;
  }
  #logo-sticky.menu-open{
    opacity:0 !important;
    pointer-events:none;
  }

  /* Hamburger */
  .hamburger{ right:24px; top:28px; }

  /* Nav overlay */
  .nav-panels{ width:100%; padding:16px; }

  /* Footer */
  .site-footer{ padding:48px 24px 28px; }
  .footer-top{ margin-bottom:40px; }
  .footer-email{
    font-size:clamp(16px,4.8vw,22px) !important;
    white-space:nowrap !important;
    display:block;
    overflow:visible;
    text-decoration:underline;
  }
  .footer-mid{ flex-direction:column; gap:32px; margin-bottom:32px; }
  .footer-col{ min-width:0; }
  .footer-link{ text-decoration:underline !important; }
  .footer-link:hover{ text-decoration:underline !important; }
  a.footer-email{ text-decoration:underline !important; }
}