*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --black:#111;
  --white:#fff;
  --accent:#ECD06F;
  --gray:#888;
  --fs: clamp(80px, 12vw, 180px);
}
html{scroll-behavior:smooth;}
body{background:var(--white);color:var(--black);font-family:'Figtree',sans-serif;overflow-x:hidden;cursor:none;}

.cursor{position:fixed;width:8px;height:8px;background:var(--black);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .18s,height .18s,background .18s;}
.cursor.big{width:48px;height:48px;background:var(--accent);mix-blend-mode:multiply;}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:22px 48px;transition:background .3s,border-color .3s;border-bottom:1px solid transparent;}
nav.scrolled{background:rgba(255,255,255,.93);backdrop-filter:blur(14px);border-color:rgba(0,0,0,.08);}
.logo{font-size:28px;font-weight:900;letter-spacing:-1px;text-decoration:none;color:var(--black);}
.logo-dot{color:var(--accent);}
.nav-links{display:flex;align-items:center;gap:36px;list-style:none;}
.nav-links a{text-decoration:none;font-size:16px;font-weight:500;color:var(--black);opacity:.6;transition:opacity .2s;}
.nav-links a:hover{opacity:1;}
.nav-email{background:var(--black)!important;color:var(--white)!important;opacity:1!important;padding:10px 20px;border-radius:6px;font-size:14px!important;}

/* ═══ HERO ═══
   Estructura idéntica a Bazil:
   - intro: texto pequeño centrado, ~20% desde arriba
   - bloque tipo: centrado verticalmente en ~40-55% de altura
   - foto: position absolute, centrada, height 100vh, object-position top
   - bottom row: absolute bottom con location + stack
   - CTAs: absolute, justo encima del bottom row
*/
.hero{
  position:relative;
  height:100vh;
  min-height:640px;
  overflow:hidden;
  background:var(--white);
}

/* FOTO — cubre toda la altura, centrada horizontalmente */
/* FOTO */
.hero-photo{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:clamp(320px,38vw,600px);
  height:92vh;
  z-index:3;
  pointer-events:none;
  will-change:transform;
  transition:transform .1s ease-out;
}
.hero-photo img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:bottom center;
  display:block;
  -webkit-mask-image:linear-gradient(to bottom, black 62%, transparent 97%);
  mask-image:linear-gradient(to bottom, black 62%, transparent 97%);
}

/* INTRO */
.hero-intro{
  display:block;
  text-align:center;
  font-size:clamp(14px,1.1vw,17px);
  font-weight:400;
  color:#333;
  margin-bottom:5px;
  position:relative;
  z-index:30;
}

/* BLOQUE TIPOGRÁFICO */
.hero-type{
  position:absolute;
  top:50%;
  left:0; right:0;
  transform:translateY(-52%);
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Línea 1 — sólida negra, delante de la foto (z:5 > foto z:3) */
.hero-line1{
  display:block;
  font-size:var(--fs);
  font-weight:900;
  letter-spacing:-3px;
  line-height:.92;
  width:100%;
  text-align:center;
  position:relative;
  z-index:5;
  color:var(--black);
}

/* Línea 2 — outline, detrás de la foto (z:1 < foto z:3) */
.hero-line2{
  display:block;
  font-size:var(--fs);
  font-weight:900;
  letter-spacing:-3px;
  line-height:.92;
  width:100%;
  text-align:center;
  position:relative;
  z-index:1;
  color:transparent;
  -webkit-text-stroke:2.5px var(--black);
}

/* BOTTOM ROW — pegado al borde inferior */
.hero-bottom{
  position:absolute;
  bottom:28px;
  left:48px;right:48px;
  z-index:20;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}
.hero-location{font-size:17px;font-weight:400;color:#333;}
.hero-stack{display:flex;align-items:center;gap:24px;}
.hero-stack span{font-size:15px;font-weight:700;color:var(--black);opacity:.32;}

/* CTAs — encima del bottom row */
.hero-ctas{
  position:absolute;
  bottom:76px;
  left:50%;
  transform:translateX(-50%);
  display:flex;gap:12px;
  z-index:20;
  white-space:nowrap;
}
.btn{padding:14px 30px;border-radius:6px;font-size:16px;font-weight:600;font-family:'Figtree',sans-serif;text-decoration:none;transition:all .22s;cursor:pointer;border:none;display:inline-flex;align-items:center;}
.btn-dark{background:var(--black);color:var(--white);border:2px solid var(--black);}
.btn-dark:hover{background:transparent;color:var(--black);}
.btn-outline{background:transparent;color:var(--black);border:2px solid var(--black);}
.btn-outline:hover{background:var(--black);color:var(--white);}

/* MARQUEE */
.marquee-strip{overflow:hidden;background:var(--black);padding:14px 0;}
.marquee-track{display:flex;gap:56px;animation:marquee 22s linear infinite;width:max-content;}
.marquee-item{font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.4);white-space:nowrap;display:flex;align-items:center;gap:56px;}
.marquee-item::after{content:'✦';color:var(--accent);font-size:7px;}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* PROYECTOS */
.section{padding:80px 64px;}
.section-label{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--gray);font-weight:700;margin-bottom:48px;display:flex;align-items:center;gap:12px;}
.section-label::before{content:'';width:24px;height:1px;background:var(--gray);}
.projects-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1.5px solid #e0e0e0;padding-bottom:28px;}
.projects-title{font-size:clamp(48px,5.5vw,88px);font-weight:900;letter-spacing:-2px;line-height:1;}
.projects-num{font-size:16px;color:var(--gray);font-weight:500;}

/* SOBRE MÍ */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;padding:100px 48px;background:#f7f6f2;}
.about-title{font-size:clamp(44px,5vw,80px);font-weight:900;letter-spacing:-1.5px;line-height:1.05;}
.about-title .outline-t{-webkit-text-stroke:2px var(--black);color:transparent;}
.about-text{font-size:18px;line-height:1.8;opacity:.65;margin-bottom:24px;}
.skills-wrap{display:grid;grid-template-columns:1fr 1fr;gap:1px;border:1px solid #ddd;border-radius:10px;overflow:hidden;background:#ddd;margin-top:32px;}
.skill-cell{background:#f7f6f2;padding:22px 26px;}
.skill-cell strong{font-size:15px;font-weight:700;display:block;margin-bottom:4px;}
.skill-cell span{font-size:14px;color:var(--gray);}

/* CONTACTO */
.contact-section{padding:80px 64px;background:var(--black);color:var(--white);display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.contact-title{font-size:clamp(44px,6.5vw,96px);font-weight:900;letter-spacing:-2.5px;line-height:.95;}
.contact-title .outline-w{-webkit-text-stroke:2px rgba(255,255,255,.2);color:transparent;}
.contact-body{display:flex;flex-direction:column;gap:28px;}
.contact-text{font-size:18px;line-height:1.75;opacity:.55;}
.contact-email{font-size:clamp(22px,2.5vw,36px);font-weight:800;text-decoration:none;color:var(--white);border-bottom:2px solid var(--accent);padding-bottom:3px;display:inline-block;transition:color .2s;}
.contact-email:hover{color:var(--accent);}
.social-row{display:flex;gap:20px;}
.soc{font-size:14px;color:rgba(255,255,255,.4);letter-spacing:2px;text-transform:uppercase;font-weight:700;text-decoration:none;transition:color .2s;}
.soc:hover{color:var(--white);}

footer{background:var(--black);color:var(--white);padding:18px 48px;display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.07);}
footer span{font-size:14px;opacity:.3;}

.fade{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease;}
.fade.in{opacity:1;transform:none;}
.fd1{transition-delay:.08s;}.fd2{transition-delay:.16s;}.fd3{transition-delay:.24s;}.fd4{transition-delay:.32s;}

@media(max-width:860px){
  nav,footer{padding:18px 20px;}
  .hero-bottom{left:20px;right:20px;}
  .section,.about-grid,.contact-section{padding:70px 20px;}
  .about-grid,.contact-section{grid-template-columns:1fr;gap:40px;}
  .project-row{grid-template-columns:52px 1fr auto;}.p-year{display:none;}
  footer{flex-direction:column;gap:6px;text-align:center;}
}

/* ═══ ACORDEÓN PROYECTOS ═══ */
.project-item { border-bottom: 1px solid #e8e8e8; }

.project-row {
  display: grid;
  grid-template-columns: 72px 1fr auto 160px;
  align-items: center;
  gap: 28px;
  padding: 32px 0;
  color: var(--black);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  border-bottom: none;
  transition: background .25s;
}
.project-row::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0;
  background: var(--black);
  transition: height .38s cubic-bezier(.4,0,.2,1);
  z-index: 0;
}
.project-item.open .project-row::before,
.project-row:hover::before { height: 100%; }
.project-row > * { position: relative; z-index: 1; transition: color .25s; }
.project-item.open .p-num,
.project-item.open .p-name,
.project-item.open .p-type,
.project-item.open .p-year,
.project-item.open .p-arrow,
.project-row:hover .p-num,
.project-row:hover .p-name,
.project-row:hover .p-type,
.project-row:hover .p-year { color: var(--white); }

.p-num { font-size: 14px; color: var(--gray); font-weight: 700; letter-spacing: 1px; }
.p-name { font-size: clamp(24px,2.8vw,40px); font-weight: 900; letter-spacing: -.5px; }
.p-type { font-size: 16px; color: var(--gray); }
.p-year { font-size: 12px; color: var(--gray); text-align: right; font-weight: 600; }

.p-arrow {
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 20px; z-index: 1;
  transition: color .25s, transform .35s cubic-bezier(.4,0,.2,1);
}
.project-item.open .p-arrow { transform: translateY(-50%) rotate(45deg); color: var(--white); }
.project-row:hover .p-arrow { color: var(--white); }

/* PANEL DESPLEGABLE */
.project-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.4,0,.2,1);
  background: #f7f6f2;
}
.project-item.open .project-panel {
  grid-template-rows: 1fr;
}
.project-panel-inner {
  overflow: hidden;
}
.project-panel-content {
  padding: 52px 48px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* Columna izquierda: info */
.panel-info {}
.panel-tag {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel-tag::before { content: ''; width: 20px; height: 1px; background: var(--gray); display: inline-block; }
.panel-title {
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1;
  margin-bottom: 24px;
}
.panel-desc {
  font-size: 17px;
  line-height: 1.75;
  color: #444;
  margin-bottom: 36px;
  max-width: 480px;
}
.panel-techs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}
.panel-tech {
  padding: 8px 16px;
  border: 1.5px solid #ddd;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  letter-spacing: .3px;
}
.panel-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
  transition: opacity .2s;
}
.panel-link:hover { opacity: .65; }

/* Columna derecha: imágenes */
.panel-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.panel-img {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #ddd;
}
.panel-img:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16/9;
}
.panel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.panel-img:hover img { transform: scale(1.04); }

/* Placeholder cuando no hay imagen */
.panel-img-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8e7e3 0%, #d4d3cf 100%);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #999;
  font-weight: 600;
}

@media(max-width: 860px) {
  .project-panel-content {
    grid-template-columns: 1fr;
    padding: 36px 20px 48px;
    gap: 40px;
  }
  .panel-images { grid-template-columns: 1fr; }
  .panel-img:first-child { grid-column: 1; }
  .project-row { grid-template-columns: 52px 1fr auto; }
  .p-year { display: none; }
}


.about-grid{display:block;padding:80px 64px;background:#f7f6f2;}
.about-top{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start;margin-bottom:56px;}
.about-skills{border-top:1px solid #d8d7d3;padding-top:40px;}
.skills-wide{grid-template-columns:repeat(3,1fr)!important;}
.p-year{display:none!important;}
.project-row{grid-template-columns:64px 1fr 1fr!important;padding-left:20px!important;padding-right:48px!important;}
@media(max-width:960px){
  .about-top{grid-template-columns:1fr;gap:40px;}
  .skills-wide{grid-template-columns:repeat(2,1fr)!important;}
}



/* ═══ HERO INTRO — más aire respecto a la foto en pantallas normales.
   No se toca en monitores grandes: a partir de 2200px ya entra el
   zoom proporcional de abajo, que compensa el espacio solo. ═══ */
@media(max-width:2199px){
  .hero-intro{ padding-bottom:40px; }
}

/* ═══ PANTALLAS GRANDES — zoom proporcional ═══
   html zoom escala todo, pero el hero necesita
   compensación para seguir siendo exactamente 100vh visual
*/
@media(min-width:2200px){
  html{ zoom: 1.25; }
  /* 100vh / 1.25 = 80vh compensa el zoom → el hero ocupa exactamente la pantalla */
  .hero{ height: calc(100vh / 1.25) !important; min-height: calc(640px / 1.25) !important; }
}
@media(min-width:3200px){
  html{ zoom: 1.6; }
  .hero{ height: calc(100vh / 1.6) !important; min-height: calc(640px / 1.6) !important; }
}
@media(min-width:3840px){
  html{ zoom: 2; }
  .hero{ height: calc(100vh / 2) !important; min-height: calc(640px / 2) !important; }
}

/* ═══ HAMBURGER MENU ═══ */
.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px;height:36px;
  cursor:pointer;
  background:none;border:none;
  padding:4px;
  z-index:300;
}
.hamburger span{
  display:block;
  width:24px;height:2px;
  background:var(--black);
  border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
  transform-origin:center;
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile nav overlay */
.mobile-nav{
  display:none;
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:var(--black);
  z-index:250;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:40px;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.mobile-nav.open{
  opacity:1;
  pointer-events:all;
}
.mobile-nav a{
  font-family:'Figtree',sans-serif;
  font-size:clamp(28px,8vw,48px);
  font-weight:900;
  color:var(--white);
  text-decoration:none;
  letter-spacing:-1px;
  transition:color .2s;
}
.mobile-nav a:hover{color:var(--accent);}
.mobile-nav .mobile-email{
  font-size:clamp(13px,3.5vw,16px);
  font-weight:500;
  color:rgba(255,255,255,.5);
  letter-spacing:.5px;
  margin-top:8px;
}

/* ═══ MOBILE RESPONSIVE ═══ */
@media(max-width:768px){
  /* Cursor off */
  .cursor{display:none;}

  /* NAV */
  .nav-links{display:none;}
  .hamburger{display:flex;}
  nav{padding:16px 20px;}
  .logo{font-size:22px;}

  /* ── HERO MOBILE ── */
  .hero{
    height:96svh!important;
    min-height:500px!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:120px 0 0 0!important;
  }

  .hero-type{
    position:relative!important;
    top:auto!important;left:auto!important;right:auto!important;
    transform:none!important;
    width:100%!important;
    order:2;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
  }
  .hero-intro{
    position:relative!important;
    top:auto!important;
    order:0!important;
    margin-bottom:2px!important;
    font-size:14px!important;
    padding:0 20px!important;
    text-align:center!important;
    width:100%!important;
  }
  .hero-line1{ order:1!important; }
  .hero-line2{ order:2!important; }
  .hero-line1{
    font-size:clamp(46px,13vw,78px)!important;
    letter-spacing:-2px!important;
    line-height:.90!important;
    text-align:center!important;
    padding:0 16px!important;
    position:relative!important;
    color:var(--black)!important;
    -webkit-text-stroke:0!important;
    z-index:1!important;
  }
  .hero-line2{
    font-size:clamp(46px,13vw,78px)!important;
    letter-spacing:-2px!important;
    line-height:.90!important;
    text-align:center!important;
    padding:0 16px!important;
    position:relative!important;
    color:transparent!important;
    -webkit-text-stroke:2px var(--black)!important;
    z-index:1!important;
  }

  .hero-bottom{
    position:relative!important;
    bottom:auto!important;left:auto!important;right:auto!important;
    order:3;
    width:100%!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:2px!important;
    padding:6px 20px 0!important;
  }
  .hero-location{font-size:15px;text-align:center;}
  .hero-stack{
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:10px!important;
  }
  .hero-stack span{font-size:13px!important;}

  .hero-ctas{
    position:relative!important;
    bottom:auto!important;left:auto!important;
    transform:none!important;
    order:4;
    flex-direction:column!important;
    width:calc(100% - 40px)!important;
    margin:8px 20px 0!important;
    gap:8px!important;
  }
  .btn{
    width:100%!important;
    justify-content:center!important;
    padding:13px 20px!important;
    font-size:16px!important;
    border-radius:8px!important;
  }

  /* Foto al final, cabe entera en el hero */
  .hero-photo{
    position:relative!important;
    left:auto!important;bottom:auto!important;
    transform:none!important;
    order:5;
    width:100%!important;
    height:auto!important;
    aspect-ratio:unset!important;
    margin:0 auto!important;
    z-index:1!important;
    display:block!important;
    flex-shrink:1!important;
  }
  .hero-photo img{
    width:100%!important;
    height:auto!important;
    margin:0 auto!important;
    display:block!important;
    object-fit:contain!important;
    object-position:bottom center!important;
    -webkit-mask-image:linear-gradient(to bottom, black 62%, transparent 96%)!important;
    mask-image:linear-gradient(to bottom, black 62%, transparent 96%)!important;
  }

  /* Marquee */
  .marquee-item{font-size:10px;letter-spacing:2px;}

  /* Proyectos */
  .section{padding:60px 20px!important;}
  .projects-head{flex-direction:column;align-items:flex-start;gap:8px;}
  .projects-title{font-size:clamp(40px,11vw,60px)!important;}
  .project-row{
    grid-template-columns:36px 1fr!important;
    padding:20px 12px!important;
    gap:8px!important;
    align-items:start!important;
  }
  .p-name{font-size:clamp(18px,5vw,28px)!important;display:block!important;}
  .p-type{font-size:13px!important;white-space:nowrap!important;width:250px!important;}
  .p-num{font-size:12px!important;padding-top:4px!important;}
  .project-panel-content{
    grid-template-columns:1fr!important;
    padding:28px 16px 40px!important;
    gap:32px!important;
  }
  .panel-images{grid-template-columns:1fr!important;}
  .panel-img:first-child{grid-column:1!important;}

  /* Sobre mí */
  .about-grid{padding:60px 20px!important;}

  /* About extra — formación/idiomas/aptitudes */
  .about-extra{
    grid-template-columns:1fr!important;
    gap:32px!important;
    overflow:hidden!important;
  }
  .about-extra span{
    word-break:break-word!important;
    max-width:100%!important;
  }
  .about-top{grid-template-columns:1fr!important;gap:40px!important;}
  .about-title{font-size:clamp(40px,11vw,60px)!important;}
  .about-text{font-size:16px!important;}
  .skills-wide{grid-template-columns:repeat(2,1fr)!important;}

  /* Contacto */
  .contact-section{
    padding:60px 20px!important;
    grid-template-columns:1fr!important;
    gap:36px!important;
  }
  .contact-title{font-size:clamp(44px,12vw,68px)!important;}
  .contact-email{font-size:clamp(16px,4.5vw,22px)!important;word-break:break-all!important;}

  /* Footer */
  footer{padding:14px 20px;flex-direction:column;gap:4px;text-align:center;}
}

@media(max-width:480px){
  .skills-wide{grid-template-columns:1fr!important;}
}

/* Fix scroll horizontal global */
html, body{ overflow-x:hidden!important; max-width:100vw; }
nav{ max-width:100vw; }

/* ═══ PRELOADER ═══ */
.preloader{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--black);
  overflow:hidden;
}
.preloader-logo{
  position:relative;
  z-index:2;
  font-size:32px;
  font-weight:900;
  letter-spacing:-1px;
  color:var(--white);
  opacity:1;
  transition:opacity .4s ease;
}
.preloader-logo span{ color:var(--accent); }

.preloader-panel{
  position:fixed;
  left:0;
  right:0;
  height:55%;
  background:#1e1e1e;
  z-index:1;
  transform-origin:center;
}
.preloader-panel.top{
  top:0;
  transform:translateY(0) skewY(0deg);
  border-bottom:1px solid #333;
}
.preloader-panel.bottom{
  bottom:0;
  transform:translateY(0) skewY(0deg);
  border-top:1px solid #333;
}

/* Estado animando: paneles se separan con skew */
.preloader.animate .preloader-panel.top{
  transform:translateY(-100%) skewY(-8deg);
  transition:transform .8s cubic-bezier(.76,0,.24,1);
}
.preloader.animate .preloader-panel.bottom{
  transform:translateY(100%) skewY(-8deg);
  transition:transform .8s cubic-bezier(.76,0,.24,1);
}
.preloader.animate .preloader-logo{
  opacity:0;
  transition:opacity .3s ease;
}

/* Ocultar del todo al terminar */
.preloader.done{
  visibility:hidden;
  pointer-events:none;
}