:root{

--comun-bg:#edf4dd;

--comun-accent:#7ea14a;

--raro-bg:#e6f1fb;

--raro-accent:#4d87c8;

--legendario-bg:#efe6fb;

--legendario-accent:#8d5ac5;

--papel:#fbf8f1;

--verde:#184f31;

--texto:#253126;

--sombra:0 15px 35px rgba(0,0,0,.12);

}

body{

background:#f4efe5;

font-family:system-ui,sans-serif;

color:var(--texto);

}

/* CONTENEDOR */

.gt-wrapper{

max-width:900px;

margin:auto;

padding:30px 20px;

}

/* CARTA */

.gt-card{

border-radius:30px;

overflow:hidden;

box-shadow:var(--sombra);

position:relative;

}

.gt-animal-card.comun{

background:linear-gradient(

180deg,

var(--comun-bg),

#f9fcf3

);

}

.gt-animal-card.raro{

background:linear-gradient(

180deg,

var(--raro-bg),

#fbfdff

);

}

.gt-animal-card.legendario{

background:linear-gradient(

180deg,

var(--legendario-bg),

#fcfaff

);

}

/* LOGO AGUA */

.gt-watermark{

position:absolute;

top:20px;

right:20px;

width:90px;

opacity:.12;

mix-blend-mode:multiply;

z-index:2;

}

/* RIBBON RAREZA */

.gt-ribbon{

position:absolute;

top:0;

left:0;

padding:18px 18px 22px;

border-bottom-right-radius:25px;

color:white;

z-index:3;

}

.gt-animal-card.comun .gt-ribbon{

background:var(--comun-accent);

}

.gt-animal-card.raro .gt-ribbon{

background:var(--raro-accent);

}

.gt-animal-card.legendario .gt-ribbon{

background:var(--legendario-accent);

}

.num{

display:block;

font-size:34px;

font-weight:800;

line-height:1;

}

.tier{

font-weight:700;

}

/* INTERIOR */

.gt-card-inner{

padding:35px;

}

/* TITULO */

.gt-title{

padding-left:110px;

padding-right:100px;

margin-bottom:25px;

}

.gt-title h1{

margin:0;

font-size:56px;

line-height:1;

color:var(--verde);

}

/* ILUSTRACION */

.gt-hero{

background:rgba(255,255,255,.45);

border-radius:30px;

padding:35px;

display:flex;

justify-content:center;

align-items:center;

min-height:350px;

}

.gt-hero img{

max-width:360px;

max-height:320px;

object-fit:contain;

}

/* TEXTO */

.gt-body{

padding-top:30px;

}

.gt-body p{

font-size:20px;

line-height:1.7;

margin-bottom:25px;

}

/* CURIOSIDAD */

.gt-curiosity{

display:flex;

gap:15px;

background:white;

padding:22px;

border-radius:22px;

border:2px solid rgba(0,0,0,.06);

}

.gt-curiosity .icon{

width:58px;

height:58px;

border-radius:18px;

background:#dce8c5;

display:grid;

place-items:center;

font-size:28px;

flex-shrink:0;

}

.gt-curiosity strong{

display:block;

font-size:24px;

margin-bottom:8px;

color:#537136;

}

/* BADGE */

.gt-footer-badge{

display:inline-block;

margin-top:25px;

padding:14px 22px;

border-radius:999px;

font-weight:700;

color:white;

}

.gt-animal-card.comun .gt-footer-badge{

background:var(--comun-accent);

}

.gt-animal-card.raro .gt-footer-badge{

background:var(--raro-accent);

}

.gt-animal-card.legendario .gt-footer-badge{

background:var(--legendario-accent);

}

/* BOTON COLECCION */

.gt-back-link{

display:inline-block;

margin-top:20px;

padding:14px 22px;

background:var(--verde);

color:white;

border-radius:999px;

text-decoration:none;

font-weight:700;

}

/* =========================
ÁLBUM DE CROMOS - ESTABLE
========================= */

.coleccion{
  max-width:1100px;
  margin:30px auto;
  padding:35px;
  background:linear-gradient(#fbf7ef,#f4ecdf);
  border-radius:34px;
  box-shadow:0 20px 45px rgba(0,0,0,.12);
  border:4px solid #efe2c8;
}

.coleccion h1{
  text-align:center;
  font-size:54px;
  margin:0;
  color:#184f31;
  letter-spacing:-1px;
}

.coleccion h1:after{
  content:"Bestiario de Gea y Truyols";
  display:block;
  font-size:20px;
  font-weight:500;
  margin-top:8px;
  color:#6c6b55;
}

#gt-collection-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:18px;
  margin-top:35px;
}

.cromo{
  perspective:1000px;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  min-height:230px!important;
}

.cromo-inner{
  position:relative;
  width:100%;
  height:230px;
  transform-style:preserve-3d;
  transition:transform .8s ease;
}

.cromo.found .cromo-inner{
  transform:rotateY(180deg);
}

.cromo-front,
.cromo-back{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:22px;
  padding:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.cromo-front{
  background:linear-gradient(180deg,#efe3cf,#e4d6be);
  border:3px solid #c9b38c;
}

.cromo-back{
  background:linear-gradient(180deg,#eef5dd,#dce8c5);
  border:3px solid #7ea14a;
  transform:rotateY(180deg);
  overflow:hidden;
}

.cromo img,
.cromo .placeholder-icon{
  width:82px!important;
  height:82px!important;
  max-width:82px!important;
  object-fit:contain!important;
  margin:0 auto 12px!important;
  display:grid!important;
  place-items:center!important;
}

.placeholder-icon{
  border-radius:50%;
  background:#d8ccba;
  font-size:38px;
}

.cromo p{
  margin:0!important;
  line-height:1.35!important;
  color:#184f31!important;
}

.cromo-front p{
  color:#6a5f4c!important;
}

.cromo p strong{
  font-size:20px;
}

#gt-progress{
  margin:30px auto;
  max-width:520px;
  background:#184f31;
  color:white;
  padding:22px 28px;
  border-radius:999px;
  text-align:center;
  font-size:20px;
  font-weight:700;
  box-shadow:0 8px 18px rgba(0,0,0,.15);
  line-height:1.4;
}

.trofeo-final{
  margin-top:30px;
  padding:28px;
  background:linear-gradient(180deg,#fff7d6,#ffefb2);
  border:3px solid #d9b85a;
  border-radius:26px;
  text-align:center;
  font-size:22px;
  color:#2f2a17 !important;
  box-shadow:0 10px 22px rgba(0,0,0,.08);
}

.boton-trofeo{
  display:inline-block;
  margin-top:18px;
  padding:15px 28px;
  background:#184f31;
  color:white;
  font-weight:800;
  border-radius:999px;
  text-decoration:none;
}

/* FOIL SOLO LEGENDARIO */

.cromo.legendario.found .cromo-back{
  background:linear-gradient(135deg,#f5ecff,#fff7d9,#e7f7ff,#f7e6ff);
  border-color:#8d5ac5;
}

.cromo.legendario.found .cromo-back::before{
  content:"";
  position:absolute;
  inset:-80%;
  background:linear-gradient(
    115deg,
    transparent 35%,
    rgba(255,255,255,.25) 43%,
    rgba(255,255,255,.9) 50%,
    rgba(255,255,255,.25) 57%,
    transparent 65%
  );
  animation:legendFoil 3s ease-in-out infinite;
  z-index:2;
  pointer-events:none;
}

.cromo.legendario.found .cromo-back::after{
  content:"✦ ✧ ✦";
  position:absolute;
  top:12px;
  right:14px;
  color:#8d5ac5;
  font-size:18px;
  opacity:.85;
  z-index:3;
}

.cromo.legendario.found .cromo-back img,
.cromo.legendario.found .cromo-back p,
.cromo.legendario.found .cromo-back .placeholder-icon{
  position:relative;
  z-index:4;
}

@keyframes legendFoil{
  0%{transform:translateX(-60%) rotate(18deg);opacity:0;}
  30%{opacity:.9;}
  60%{transform:translateX(60%) rotate(18deg);opacity:.7;}
  100%{transform:translateX(60%) rotate(18deg);opacity:0;}
}

/* HOLOGRÁFICO LEGENDARIO PRO */

.cromo.legendario.found .cromo-back{

background:
linear-gradient(
135deg,
#f5ecff 0%,
#fff7d6 22%,
#e7f7ff 45%,
#ffe7fa 70%,
#efe6fb 100%
);

box-shadow:
0 0 0 3px #8d5ac5 inset,
0 0 22px rgba(141,90,197,.35);

}

.cromo.legendario.found{
animation:legendPulse 4s infinite;
}

@keyframes legendPulse{

0%,100%{
transform:
translateY(-4px)
scale(1.02);
}

50%{
transform:
translateY(-7px)
scale(1.035);
}

}

/* partículas brillantes */

.cromo.legendario .cromo-back::after{
content:"✦ ✧ ✦";
letter-spacing:6px;
font-size:18px;
}

/* SIDEBAR */

body.single-animal aside,
body.single-animal .sidebar,
body.single-animal #secondary,
body.single-animal .widget-area,
body.page-id-675 aside:not(.gt-howto),
body.page-id-675 .sidebar,
body.page-id-675 #secondary,
body.page-id-675 .widget-area{
  display:none !important;
}

body.single-animal .content-area,
body.single-animal #primary,
body.single-animal main,
body.page-id-675 .content-area,
body.page-id-675 #primary,
body.page-id-675 main{
  width:100% !important;
  max-width:100% !important;
}

/* MÓVIL */

@media(max-width:768px){
  .coleccion{
    padding:18px;
  }

  .coleccion h1{
    font-size:34px;
  }

  #gt-collection-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }

  .cromo,
  .cromo-inner{
    min-height:210px!important;
    height:210px;
  }

  .gt-title{
    padding-left:0;
    padding-right:75px;
    padding-top:75px;
  }

  .gt-title h1{
    font-size:42px;
  }

  .gt-card-inner{
    padding:25px;
  }

  .gt-body p{
    font-size:18px;
  }

  .gt-hero{
    min-height:260px;
  }

  .gt-hero img{
    max-width:260px;
  }

  .gt-watermark{
    width:70px;
  }

  .trofeo-final{
    font-size:18px;
    padding:18px;
  }

  .boton-trofeo{
    font-size:16px;
    padding:12px 20px;
  }
}
.gt-album-layout{
  max-width:1300px;
  margin:30px auto;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 360px;
  gap:26px;
  align-items:start;
}

.gt-album-main{
  min-width:0;
}

.gt-howto{
  background:linear-gradient(#fbf7ef,#f4ecdf);
  border:4px solid #efe2c8;
  border-radius:34px;
  padding:28px;
  box-shadow:0 20px 45px rgba(0,0,0,.12);
  position:sticky;
  top:24px;
}

.gt-howto h2{
  margin:0 0 24px;
  color:#184f31;
  font-size:34px;
  text-align:center;
}

.gt-howto-step{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:16px;
  align-items:center;
  margin-bottom:24px;
}

.gt-howto-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  background:#5f8f54;
  color:white;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:20px;
}

.gt-howto-step:nth-child(3) .gt-howto-icon{
  background:#d9b85a;
  color:#3b351f;
}

.gt-howto-step:nth-child(4) .gt-howto-icon{
  background:#184f31;
}

.gt-howto h3{
  margin:0 0 4px;
  color:#184f31;
  font-size:22px;
}

.gt-howto p{
  margin:0;
  line-height:1.4;
}

.gt-howto-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px;
}

.gt-howto-badges span{
  background:white;
  border-radius:999px;
  padding:8px 12px;
  font-weight:700;
  font-size:14px;
}

@media(max-width:980px){
  .gt-album-layout{
    display:block;
  }

  .gt-howto{
    margin-top:24px;
    position:static;
  }
}
/* ARREGLO LAYOUT COLECCIÓN + PANEL DERECHO */

body.page-id-675 .entry-content,
body.page-id-675 .post-content,
body.page-id-675 .single-post-content,
body.page-id-675 .content-area,
body.page-id-675 #primary{
  width:100% !important;
  max-width:1400px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

body.page-id-675 .gt-album-layout{
  width:100% !important;
  max-width:1400px !important;
  margin:30px auto !important;
  padding:0 20px !important;
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) 360px !important;
  gap:26px !important;
}

body.page-id-675 .coleccion{
  width:100% !important;
  max-width:none !important;
}

@media(max-width:980px){
  body.page-id-675 .gt-album-layout{
    display:block !important;
    padding:0 12px !important;
  }
}
/* FORZAR BLOQUE INFO DEBAJO (desactiva grid lateral) */

.gt-album-layout{
display:block !important;
max-width:1100px !important;
margin:30px auto !important;
}

.gt-album-main{
width:100% !important;
}

.gt-howto{
display:block !important;
max-width:900px;
margin:35px auto 0 !important;
position:static !important;
}
/* ===== FIX LAYOUT ALBUM + PANEL DERECHO ===== */

.gt-album-layout{
display:grid !important;
grid-template-columns:minmax(0,1fr) 360px !important;
gap:32px !important;
max-width:1400px !important;
margin:40px auto !important;
align-items:start !important;
}

.gt-album-main{
width:100% !important;
min-width:0 !important;
}

.gt-album-main .coleccion{
max-width:none !important;
width:100% !important;
margin:0 !important;
}

.gt-howto{
display:block !important;
width:100% !important;
}

@media(max-width:980px){

.gt-album-layout{
grid-template-columns:1fr !important;
}

.gt-howto{
margin-top:30px !important;
}

}
/* FIX DEFINITIVO PANEL CÓMO FUNCIONA */

body.page-id-675 .gt-howto,
body.single-animal .gt-howto{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

body.page-id-675 aside.gt-howto,
body.single-animal aside.gt-howto{
  display:block !important;
}

.gt-album-layout{
  max-width:1400px !important;
  margin:40px auto !important;
  padding:0 20px !important;
  display:grid !important;
  grid-template-columns:minmax(820px,1fr) 340px !important;
  gap:32px !important;
  align-items:start !important;
}

.gt-album-main{
  width:100% !important;
  min-width:0 !important;
}

.gt-howto{
  background:linear-gradient(#fbf7ef,#f4ecdf) !important;
  border:4px solid #efe2c8 !important;
  border-radius:34px !important;
  padding:28px !important;
  box-shadow:0 20px 45px rgba(0,0,0,.12) !important;
}

@media(max-width:980px){
  .gt-album-layout{
    display:block !important;
  }

  .gt-howto{
    margin-top:30px !important;
  }
.gt-howto{
transform:translateY(18px);
}

.gt-howto h2{
font-size:42px;
}

.gt-howto-step h3{
font-size:26px;
}
/* MODO ESTABLE: PANEL DEBAJO DEL ÁLBUM */

.gt-album-layout{
  display:block !important;
  max-width:1100px !important;
  width:100% !important;
  margin:30px auto !important;
  padding:0 20px !important;
}

.gt-album-main,
.gt-album-main .coleccion{
  width:100% !important;
  max-width:100% !important;
}

.gt-howto{
  max-width:900px !important;
  width:100% !important;
  margin:35px auto 0 !important;
  position:static !important;
}
.gt-howto-badges{
justify-content:center;
gap:14px;
margin-top:24px;
}

.gt-howto-badges span{
padding:10px 16px;
font-size:15px;
box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.gt-howto-badges span:nth-child(1){
background:#eef5dd;
}

.gt-howto-badges span:nth-child(2){
background:#e6f1fb;
}

.gt-howto-badges span:nth-child(3){
background:#efe6fb;
}
}