/* ===========================
   Paleta específica Personal
=========================== */
:root{
    --left-bg:#2A3A1C;    
    --right-bg:#EFECD1;    
    --rail-bg:#2A3A1C;     
    --rail-accent:#F8C747; 
    --orange:#F8C747;      
    --ink:#0F1A10;
    --radius:14px;
    /* TAMAÑOS ADAPTATIVOS (clamps) */
    --gap: clamp(10px, 1.8vw, 18px);
    --pad: clamp(12px, 2.4vw, 28px);

    --hero-max: clamp(110px, 22svh, 260px);
  }
  
  html,body{height:100%}
  body{
    margin:0;
    color:var(--ink);
    background:var(--right-bg);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  }
  
  /* ===========================
     Layout 50/50
  =========================== */
  .pc{
    display:grid;
    grid-template-columns: 1fr 1fr;
    height:100svh; 
  }
  
  /* ===========================
     IZQUIERDA (banner)
  =========================== */
  .pc-left{
    position:relative;
    background:var(--left-bg);
    color:#fff;
    overflow:hidden; 
  }
  .left-inner{
    height:100%;
    padding:var(--pad);
    display:grid;
    grid-template-rows: auto auto 1fr; 
    gap:var(--gap);
    min-height:0; 
  }

  .pc-hero-svg{
    width:100%;
    height:auto;
    max-height:var(--hero-max);
    object-fit:contain;
    display:block;
    align-self:start;
  }
  .top-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
  }
  .btn{
    --btn-font: clamp(12px, 1.05vw, 16px);
    font-family:"Gotham Black",system-ui,sans-serif;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.3px;
    border:0; cursor:pointer;
    padding:10px 16px;
    background:#ddd; color:#111;
    box-shadow:0 6px 0 rgba(0,0,0,.10);
    transition:transform .18s, box-shadow .18s, filter .18s, background-color .18s;
    font-size:var(--btn-font);
    text-decoration:none;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .btn-square{ border-radius:0 }
  .btn-cta{  background:var(--orange); color:#1a1a1a }
  .btn-home{ background:#0E1A10; color:#fff }
  .btn:hover{
    transform:translateY(-1px) scale(1.02);
    box-shadow:0 10px 0 rgba(0,0,0,.12);
    filter:brightness(1.03);
  }
  
  .left-illustration-wrap{
    min-height:0;              
    display:grid;
    place-items:center;
    overflow:visible;          
  }
  .pc-illustration{
    max-width: min(92%, 720px); 
    max-height: 100%;          
    width:auto;
    height:auto;
    object-fit:contain;        
    user-select:none; pointer-events:none;
  }
  
  /* ===========================
     DERECHA (galería + rail)
  =========================== */
  .pc-right{
    position:relative;
    background:var(--right-bg);
    overflow:hidden; 
    padding:var(--pad);
  }
  
  #gallery{
    height:100%;
    overflow:auto;
    padding-right:52px;     
    scrollbar-width:none;    
  }
  #gallery::-webkit-scrollbar{ width:0; height:0 }
  
  /* Rail personalizado */
  .pc-rail{
    position:absolute;
    top:var(--gap);
    right:clamp(10px,2vw,16px);
    bottom:var(--gap);
    width:40px;
    background:var(--rail-bg);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
    display:grid;
    grid-template-rows:40px 1fr 40px;
    align-items:center; justify-items:center;
    z-index:5;
  }
  .pc-rail__btn{
    width:40px; height:40px; background:var(--rail-bg);
    border:0; border-radius:0; cursor:pointer; position:relative;
  }
  .pc-rail__btn::before{
    content:""; position:absolute; inset:0; margin:auto; width:0; height:0;
    border-left:8px solid transparent; border-right:8px solid transparent;
  }
  .pc-rail__btn--up::before   { border-bottom:14px solid var(--rail-accent) }
  .pc-rail__btn--down::before { border-top:   14px solid var(--rail-accent) }
  .pc-rail__track{
    position:relative; width:14px; height:100%; margin:6px auto; background:var(--rail-bg);
  }
  .pc-rail__thumb{
    position:absolute; left:50%; transform:translateX(-50%);
    width:12px; min-height:38px; background:var(--rail-accent); border-radius:0;
    cursor:grab;
  }
  .pc-rail__thumb:active{ cursor:grabbing }
  
  /* ===========================
     TARJETAS
  =========================== */
  .gallery{
    max-width: 780px;
    margin: 0 auto;
    display: grid;
    gap: clamp(20px, 3.4vw, 32px);
  }
  .card{
    display:grid;
    grid-template-columns: 60px 1fr; 
    align-items:stretch;
    background:transparent;
  }
  .card-label{
    background:#2A3A1C;
    color:#EFECD1;
    display:flex; align-items:center; justify-content:center;
    border-radius:0;
    padding:10px 0;
    font-family:"Gotham Ultra","Gotham Black",system-ui,sans-serif;
    font-weight:900;
    writing-mode:vertical-rl; text-orientation:mixed;
    letter-spacing:.5px;
  
    height:100%;
    box-sizing:border-box;   
    overflow:hidden;
    white-space:normal;
    word-break:break-word;
    line-height:1.05;
    font-size: clamp(12px, 1.1vw, 18px);
  
    position:relative;
  }
  .card-label::before{
    content: attr(data-title);  
    display:block;
  }
  .card-media{
    position: relative;
    background:#fff;
    border-radius:0;
    overflow:hidden;
    box-shadow:none;
    aspect-ratio: 636 / 400;      
  }
  .card-media img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; display:block;
  }

.pc-left .left-inner{ position: relative; }

.starfield{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.star{
  position:absolute;
  top:100%;
  font-size:18px;
  opacity:0;
  transform:translate3d(0,0,0) scale(var(--s,1)) rotate(var(--r,0deg));
  animation:rise var(--dur,4s) ease-out forwards;
  color:#FFD166;
  text-shadow:0 0 8px rgba(242,140,40,.45);
}

@keyframes rise{
  10%{opacity:1}
  100%{
    transform:translate3d(0,-120%,0) scale(var(--s,1)) rotate(var(--r,0deg));
    opacity:0;
  }
}

.pc-left .sparkle{
  position:absolute;
  width: clamp(14px, 1.8vw, 24px);  
  height:auto;
  opacity:0;
  transform: translate(-50%, -50%) scale(.6) rotate(0deg);
  animation: sparkle-pop var(--t,1200ms) ease-out forwards;
  filter: drop-shadow(0 0 6px rgba(255,215,100,.45));
}

@keyframes sparkle-pop{
  0%   { opacity:0; transform: translate(-50%,-50%) scale(.6)  rotate(0deg) }
  20%  { opacity:1; transform: translate(-50%,-50%) scale(1)   rotate(8deg) }
  70%  { opacity:1 }
  100% { opacity:0; transform: translate(-50%,-50%) scale(1.25) rotate(-6deg) }
}
  /* ===========================
     RESPONSIVE
  =========================== */
  
  @media (max-height: 760px){
    :root{ --hero-max: clamp(90px, 18svh, 220px); }
  }
  @media (max-height: 640px){
    :root{ --hero-max: clamp(80px, 16svh, 200px); }
  }
  
  /* 900px y abajo: columna única + carrusel horizontal */
  @media (max-width: 900px){
    .pc{ grid-template-columns:1fr; height:auto }

    .card{ grid-template-columns: 50px 1fr; }  /* como fxc */
    .card-label{ font-size: clamp(14px, 3.5vw, 18px) }
    .card-label::before{ content: attr(data-abbr); }
  
    /* Compactar paddings y gaps para más área útil */
    :root{
      --gap: clamp(8px, 1.6vw, 14px);
      --pad: clamp(10px, 2vw, 22px);
      --hero-max: clamp(90px, 24svh, 220px);
    }
  
    .left-illustration-wrap{
      padding-block: 8px 4px;
    }
    .pc-illustration{
      max-width: 88%;
      max-height: 42vh;
    }
  
    /* Galería: carrusel horizontal */
    #gallery{
      height:auto;
      overflow-x:auto; overflow-y:hidden;
      padding-right:0; padding-bottom:16px;
      scrollbar-width:none;
    }
    #gallery::-webkit-scrollbar{ width:0; height:0 }
    .pc-rail{ display:none }
  
    .gallery{
      max-width:none;
      display:flex; gap: clamp(14px, 3vw, 22px);
      padding: 6px 12px;
    }
    .card{
      min-width: 86vw;
      grid-template-columns: 50px 1fr;
    }
    .card-label{ font-size: clamp(14px, 3.5vw, 18px) }

    .gallery{
        display:flex;
        gap: clamp(14px, 3vw, 22px);        
        column-gap: clamp(14px, 3vw, 22px);  
        padding: 6px 12px;
      }

      .gallery > .card + .card{
        margin-left: clamp(30px, 3vw, 22px);
      }
  }
  
  /* 600px y abajo: slides un poco más anchos para lectura */
  @media (max-width: 600px){
    .card{ min-width: 92vw; }
  }