/* ============================================================
   PRODUCCIONES TORMENTA — hoja de estilos
   ============================================================ */

:root{
    --verde:#C6FF4D;
    --negro:#000000;
    --hueso:#FAFAF7;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{height:100%;overflow:hidden;}
  body{
    background:var(--verde);
    color:var(--negro);
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}

  /* ===== HEADER ===== */
  header{
    position:fixed;top:0;left:0;right:0;
    display:flex;justify-content:space-between;align-items:center;
    padding:28px 40px;
    z-index:50;
    mix-blend-mode:normal;
  }
  .logo{display:flex;align-items:center;gap:12px;}
  .logo img{height:44px;width:auto;display:block;}
  nav{display:flex;gap:36px;align-items:center;}
  nav a{
    font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    position:relative;overflow:hidden;display:inline-block;
  }
  nav a::after{
    content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
    background:var(--negro);transform:scaleX(0);transform-origin:right;
    transition:transform .35s cubic-bezier(.77,0,.18,1);
  }
  nav a:hover::after{transform:scaleX(1);transform-origin:left;}
  .burger{display:none;background:none;border:none;cursor:pointer;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--negro);}

  /* ===== HERO / STAGE ===== */
  #stage{position:fixed;inset:0;z-index:1;}
  #bolt-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}

  /* ===== ETIQUETA DE PROYECTO (hover) ===== */
  .project-label{
    position:fixed;bottom:110px;left:50%;transform:translate(-50%,6px);
    z-index:45;pointer-events:none;
    font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    background:var(--negro);color:var(--verde);
    padding:8px 14px;
    opacity:0;transition:opacity .25s, transform .25s;
  }
  .project-label.visible{opacity:1;transform:translate(-50%,0);}

  /* ===== CENTER TITLE ===== */
  .hero-title{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    z-index:5;text-align:center;pointer-events:none;
  }
  .hero-title h1{
    font-size:clamp(11px,1.1vw,14px);
    font-weight:700;letter-spacing:.35em;text-transform:uppercase;
  }

  /* ===== FOOTER ===== */
  footer{
    position:fixed;left:0;right:0;bottom:0;
    display:flex;justify-content:space-between;align-items:flex-end;
    padding:24px 40px;z-index:50;
    font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  }
  footer .works a{border-bottom:2px solid var(--negro);padding-bottom:2px;}
  .scroll-hint{
    position:fixed;bottom:70px;left:50%;transform:translateX(-50%);
    z-index:40;font-size:10px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;
    animation:pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}

  /* ===== OVERLAY PANELS (Estudio / Contacto) ===== */
  .panel{
    position:fixed;inset:0;z-index:100;
    background:var(--negro);color:var(--verde);
    display:flex;flex-direction:column;justify-content:center;
    padding:8vw;
    clip-path:inset(0 0 100% 0);
    transition:clip-path .7s cubic-bezier(.77,0,.18,1);
    overflow-y:auto;
  }
  .panel.open{clip-path:inset(0 0 0% 0);}
  .panel .close{
    position:absolute;top:28px;right:40px;
    background:none;border:none;color:var(--verde);cursor:pointer;
    font-size:14px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  }
  .panel h2{
    font-size:clamp(40px,8vw,110px);
    font-weight:900;text-transform:uppercase;font-style:italic;
    letter-spacing:-.02em;line-height:.95;margin-bottom:32px;
  }
  .panel p{max-width:620px;font-size:clamp(15px,1.4vw,19px);line-height:1.6;color:var(--hueso);}
  .panel .mail{
    display:inline-block;margin-top:40px;
    font-size:clamp(20px,3vw,36px);font-weight:900;font-style:italic;
    color:var(--verde);border-bottom:3px solid var(--verde);padding-bottom:4px;
  }

  /* ===== VISTA DE PROYECTO ===== */
  .project-view{
    position:fixed;inset:0;z-index:150;
    background:var(--verde);color:var(--negro);
    overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
    clip-path:inset(0 0 100% 0);
    transition:clip-path .65s cubic-bezier(.77,0,.18,1);
  }
  .project-view.open{clip-path:inset(0 0 0% 0);}
  .project-view .pv-close{
    position:fixed;top:24px;right:32px;z-index:160;
    background:var(--negro);color:var(--verde);border:none;cursor:pointer;
    font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
    padding:12px 18px;
    opacity:0;pointer-events:none;transition:opacity .3s .4s;
  }
  .project-view.open .pv-close{opacity:1;pointer-events:auto;}
  .pv-inner{padding:120px 6vw 0;}
  .pv-title{
    font-size:clamp(34px,9vw,150px);
    overflow-wrap:break-word;
    font-weight:900;font-style:italic;text-transform:uppercase;
    letter-spacing:-.02em;line-height:.9;
    margin-bottom:40px;
  }
  /* placeholder de imagen (mismo lenguaje que las tarjetas) */
  .img-ph{
    position:relative;width:100%;
    background:rgba(0,0,0,.05);
    border:1.5px solid var(--negro);
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
  .img-ph::before{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(to top right, transparent calc(50% - .75px), var(--negro) calc(50% - .75px), var(--negro) calc(50% + .75px), transparent calc(50% + .75px)),
      linear-gradient(to top left, transparent calc(50% - .75px), var(--negro) calc(50% - .75px), var(--negro) calc(50% + .75px), transparent calc(50% + .75px));
    opacity:.3;
  }
  .img-ph span{
    position:relative;z-index:2;
    font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    background:var(--verde);padding:6px 12px;border:1.5px solid var(--negro);
  }
  .pv-hero{aspect-ratio:16/8;margin-bottom:64px;}
  .pv-meta{
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;
    padding-bottom:56px;border-bottom:1.5px solid var(--negro);margin-bottom:56px;
  }
  .pv-meta h3{
    font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    margin-bottom:14px;opacity:.6;
  }
  .pv-meta .chip{
    display:inline-block;margin:0 8px 8px 0;padding:8px 14px;
    border:1.5px solid var(--negro);
    font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  }
  .pv-meta ul{list-style:none;}
  .pv-meta li{font-size:14px;font-weight:600;line-height:1.9;}
  .pv-meta .pv-year{font-size:14px;font-weight:700;}
  .pv-info{
    max-width:760px;font-size:clamp(17px,1.8vw,23px);line-height:1.55;font-weight:600;
    margin-bottom:72px;
  }
  .pv-info .tag{font-weight:700;letter-spacing:.1em;opacity:.6;margin-right:8px;}
  .pv-section{margin-bottom:72px;}
  .pv-section h2{
    font-size:clamp(28px,4vw,52px);font-weight:900;font-style:italic;text-transform:uppercase;
    letter-spacing:-.01em;margin-bottom:24px;
  }
  .pv-section p{max-width:700px;font-size:16px;line-height:1.65;margin-bottom:40px;}
  .pv-gallery{display:grid;gap:24px;margin-bottom:24px;}
  .pv-gallery.g2{grid-template-columns:1fr 1fr;}
  .pv-gallery .img-ph.wide{grid-column:1/-1;aspect-ratio:16/8;}
  .pv-gallery .img-ph{aspect-ratio:4/3;}
  .pv-next{
    margin:96px -6vw 0;background:var(--negro);color:var(--verde);
    padding:64px 6vw 72px;cursor:pointer;
  }
  .pv-next h3{font-size:12px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;margin-bottom:20px;opacity:.7;}
  .pv-next .pv-next-title{
    font-size:clamp(36px,6vw,84px);font-weight:900;font-style:italic;text-transform:uppercase;line-height:.95;
    margin-bottom:28px;
  }
  .pv-next .img-ph{max-width:420px;aspect-ratio:16/10;background:rgba(198,255,77,.08);border-color:var(--verde);}
  .pv-next .img-ph span{background:var(--negro);color:var(--verde);border-color:var(--verde);}
  .pv-next .pv-view{
    display:inline-block;margin-top:28px;
    font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    border-bottom:2px solid var(--verde);padding-bottom:4px;
  }
  @media (max-width:768px){
    .pv-meta{grid-template-columns:1fr;gap:24px;}
    .pv-gallery.g2{grid-template-columns:1fr;}
    .pv-inner{padding:100px 5vw 0;}
    .project-view .pv-close{top:16px;right:16px;}
  }

  /* ===== NOISE / GRAIN ===== */
  .grain{
    position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  @media (max-width:768px){
    header{padding:20px 20px;}
    footer{padding:18px 20px;font-size:9px;}
    nav{display:none;}
    .burger{display:block;}
    nav.open{
      display:flex;position:fixed;inset:0;background:var(--negro);
      flex-direction:column;justify-content:center;align-items:center;gap:28px;z-index:120;
    }
    nav.open a{color:var(--verde);font-size:22px;}
    nav.open .close-nav{display:block;position:absolute;top:24px;right:20px;background:none;border:none;color:var(--verde);font-weight:700;letter-spacing:.12em;font-size:13px;cursor:pointer;text-transform:uppercase;}
    .project-label{bottom:90px;font-size:10px;}
  }
  .close-nav{display:none;}

/* ===== IMÁGENES TEMPORALES EN PLACEHOLDERS ===== */
.img-ph img.tmp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.img-ph:has(img.tmp)::before{display:none;}
.img-ph:has(img.tmp) span{opacity:0;transition:opacity .25s;}
.img-ph:has(img.tmp):hover span{opacity:1;}