/* ==========================================================================
   Casino Kun Aguero AR
   ========================================================================== */

@font-face{font-family:Montserrat;font-display:swap;font-weight:100 900;font-style:normal;
  src:url(../fonts/montserrat-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-display:swap;font-weight:100 900;font-style:normal;
  src:url(../fonts/montserrat-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --page:#0b0a08;
  --panel:#15120d;
  --panel-2:#1e1a13;
  --panel-3:#272117;
  --accent:#dcaa68;
  --accent-btn:#c0904e;
  --accent-hover:#f0c684;
  --white:#efe6d8;
  --dim:#b3a894;
  --hairline:rgba(220,170,104,.16);
  --veil:linear-gradient(180deg,rgba(11,10,8,.4) 13.62%,rgba(11,10,8,.88) 80%);
  --veil-tile:linear-gradient(180deg,rgba(11,10,8,.05) 0%,rgba(11,10,8,.4) 40%,rgba(11,10,8,.78) 60%,rgba(11,10,8,1) 100%);
  --ease:all .2s ease-in-out 0s;
  --font:Montserrat,"Segoe UI",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{height:100%;min-width:320px;scroll-padding-top:80px}
body{
  margin:0;padding:60px 0 0;
  font-family:var(--font);font-size:14px;line-height:1.5;
  color:var(--white);background-color:var(--page);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:var(--ease)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:130%}
h1{font-size:52px}
h2{font-size:44px}
p{margin:0}
:focus-visible{outline:2px solid var(--accent-hover);outline-offset:2px}

.shell{max-width:78.125rem;margin:0 auto;padding:0 2.5rem}
.t-l{font-size:24px;line-height:24px}
.t-m{font-size:18px;line-height:22px}
.t-s{font-size:14px;line-height:20px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- botones ---------- */
.act{
  display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;max-width:230px;height:44px;padding:12px 28px;
  border:1px solid var(--accent-btn);border-radius:11px;
  background-color:var(--accent-btn);color:#14110c;
  font-size:12px;line-height:14px;font-weight:700;text-transform:uppercase;
  transition:var(--ease);
}
.act:hover{background-color:var(--accent);border-color:var(--accent)}
.act--hollow{background-color:transparent;border-color:var(--accent);color:var(--accent)}
.act--hollow:hover{background-color:var(--accent);color:var(--page)}
.act--auto{max-width:none;width:auto}
.act--center{margin-inline:auto}

/* ---------- cabecera ---------- */
.masthead{position:fixed;inset:0 0 auto;z-index:50;background-color:var(--panel)}
.masthead__row{display:flex;align-items:center;justify-content:space-between;column-gap:32px;padding:8px 0}
.masthead__left{display:flex;align-items:center;column-gap:24px}
.masthead__logo{flex-shrink:0}
.masthead__logo img{height:42px;width:auto}
.masthead__right{display:flex;align-items:center;column-gap:32px}

.mainmenu ul{display:flex;align-items:center;column-gap:24px}
.mainmenu a{white-space:nowrap;font-size:12px;line-height:150%;font-weight:700;text-transform:uppercase;color:var(--dim)}
.mainmenu a:hover,.mainmenu a.current{color:var(--accent)}

.masthead__acts{display:flex;align-items:center;column-gap:12px}
.masthead__acts .act{height:38px;padding:10px 18px;max-width:140px}

.burger{display:none;width:38px;height:38px;border-radius:6px;background-color:var(--panel-2);place-items:center}
.burger i,.burger i::before,.burger i::after{display:block;width:18px;height:2px;border-radius:2px;background:var(--white)}
.burger i{position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;transition:var(--ease)}
.burger i::before{top:-6px}
.burger i::after{top:6px}
.burger.open i{background:transparent}
.burger.open i::before{transform:translateY(6px) rotate(45deg)}
.burger.open i::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- portada ---------- */
.cover{position:relative;padding:60px 0;overflow:hidden}
.cover__pic{position:absolute;inset:0}
.cover__pic img{width:100%;height:100%;object-fit:cover}
.cover__pic::after{content:"";position:absolute;inset:0;background-image:var(--veil);z-index:1}
.cover__body{position:relative;z-index:2;min-height:400px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.cover__body h1{color:var(--accent);margin-bottom:24px}
.cover__body p{margin-bottom:24px;max-width:780px;margin-inline:auto}
.cover__body .act{margin-inline:auto}

/* ---------- barra de filtros ---------- */
.sift{padding:48px 0 32px}
.sift__bar{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:16px;border-radius:8px;background-color:var(--panel);
}
.sift__tabs{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.sift__tab{
  padding:11px 12.5px;border-radius:6px;
  font-size:14px;font-weight:700;letter-spacing:.2px;text-transform:uppercase;
  color:var(--dim);transition:var(--ease);
}
.sift__tab:hover{color:var(--accent)}
.sift__tab[aria-pressed="true"]{background-color:rgba(220,170,104,.16);color:var(--accent)}
.sift__side{display:flex;align-items:center;column-gap:12px;flex-shrink:0}
.sift__count{font-size:12px;font-weight:700;text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap}

/* ---------- rejilla de juegos ---------- */
.reel{margin-bottom:48px}
.reel__head{font-weight:700;opacity:.3}
.reel__grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:24px 16px;margin-top:24px}

.card{
  position:relative;display:block;min-height:180px;padding:8px;
  border-radius:8px;overflow:hidden;background-color:var(--panel);
}
.card__pic{position:absolute;inset:0}
.card__pic img{width:100%;height:100%;object-fit:cover}
.card::after{content:"";position:absolute;inset:0;background-image:var(--veil-tile);z-index:1}
.card__meta{
  position:absolute;inset:auto 8px 8px;z-index:2;
  text-align:center;font-weight:700;text-transform:uppercase;
}
.card__name{
  font-size:16px;line-height:120%;margin-bottom:2px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.card__by{font-size:9px;color:var(--dim);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.card__veil{position:absolute;inset:0;z-index:2;background-color:rgba(11,10,8,.72);opacity:0;visibility:hidden;transition:var(--ease);display:grid;place-items:center}
.card:hover .card__veil{opacity:1;visibility:visible}
.card__veil span{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background-color:var(--accent-btn);
}
.card__veil span::before{content:"";border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #14110c;margin-left:3px}
.reel__more{margin:32px auto 0}

/* ---------- proveedores ---------- */
.brands{margin-bottom:48px}
.brands__head{display:flex;align-items:center;justify-content:space-between;column-gap:32px}
.brands__head h2{font-weight:700;opacity:.3}
.brands__row{margin-top:24px;display:flex;align-items:stretch;justify-content:center;gap:16px;flex-wrap:wrap}
.brands__item{
  display:flex;align-items:center;justify-content:center;
  padding:7px 8px;border-radius:6px;background:var(--panel);transition:var(--ease);
}
.brands__item:hover{opacity:.6}
.brands__item img{width:102px;height:auto;object-fit:contain}

/* ---------- bloque de contenido ---------- */
.paper{margin-bottom:48px}
.paper__inner{background-color:var(--panel);border-radius:6px;padding:32px 74px 56px}
.paper h2{font-size:24px;line-height:130%;margin:32px 0 16px;text-transform:inherit}
.paper h3{font-size:18px;line-height:130%;margin:24px 0 12px}
.paper p{margin:0 0 16px;color:var(--dim);font-size:16px;line-height:1.7}
.paper p:last-child{margin-bottom:0}
.paper strong{color:var(--white);font-weight:700}
.paper a{color:var(--accent);text-decoration:underline}
.paper a:hover{color:var(--accent-hover)}

.paper ul{margin:0 0 16px}
.paper ul li{position:relative;margin:0 0 10px;padding:0 0 0 26px;color:var(--dim);font-size:16px}
.paper ul li::before{content:"";position:absolute;left:6px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.paper ol{margin:0 0 16px 20px;list-style:decimal}
.paper ol li{margin:0 0 10px;padding-left:4px;color:var(--dim);font-size:16px}
.paper ol li::marker{color:var(--accent);font-weight:700}

.paper table{
  width:100%;border-collapse:collapse;margin:28px 0;
  background:rgba(255,255,255,.03);border-radius:12px;overflow:hidden;
  font-size:16px;color:var(--white);
}
.paper caption{padding:0 0 12px;text-align:left;font-size:14px;color:rgba(255,255,255,.45)}
.paper th,.paper td{padding:12px 16px;border:1px solid var(--hairline);text-align:left;vertical-align:top}
.paper thead th{background:rgba(255,255,255,.10);color:var(--accent);font-weight:700;border-bottom:2px solid var(--accent)}
.paper tbody th{font-weight:700}
.paper tbody td{color:var(--dim)}
.paper tbody tr:nth-child(even) td,.paper tbody tr:nth-child(even) th{background:rgba(255,255,255,.04)}
.paper tbody tr:hover td,.paper tbody tr:hover th{background:rgba(255,255,255,.08)}
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}

.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:28px 0}
.shots figure{margin:0}
.shots img{width:100%;height:auto;border-radius:6px;background-color:var(--page)}
.shots figcaption{margin-top:8px;font-size:13px;color:rgba(255,255,255,.45)}

.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin:28px 0}
.duo h3{margin-top:0}

/* ---------- ofertas disponibles ---------- */
/* se anulan las viñetas heredadas de .paper ul li */
.paper .deals{margin:28px 0 0;padding:0;display:grid;gap:16px;list-style:none}
.paper .deals__item{
  margin:0;padding:16px;
  display:grid;grid-template-columns:220px minmax(0,1fr) auto;gap:24px;align-items:center;
  border-radius:8px;background-color:var(--panel-2);
  border:1px solid transparent;transition:var(--ease);
}
.paper .deals__item::before{content:none}
.paper .deals__item:hover{border-color:var(--accent-btn)}
.deals__pic{border-radius:6px}
.deals__pic img{width:100%;aspect-ratio:423/283;object-fit:contain}
.paper .deals__title{margin:0 0 8px;font-size:18px;line-height:1.3;font-weight:700;color:var(--white)}
.paper .deals__text{margin:0;font-size:15px;line-height:1.6;color:var(--dim)}
.paper .deals__text strong{color:var(--white);font-weight:700}
.paper .deals__go .act,.paper .deals__go .act:hover{
  color:#000;
  text-decoration:none;
}

@media (max-width:61.99875em){
  .paper .deals__item{grid-template-columns:180px minmax(0,1fr);grid-template-areas:"pic body" "pic go"}
  .deals__pic{grid-area:pic;align-self:start}
  .deals__body{grid-area:body}
  .deals__go{grid-area:go;justify-self:start;align-self:start}
}
@media (max-width:47.99875em){
  .paper .deals__item{grid-template-columns:minmax(0,1fr);grid-template-areas:"pic" "body" "go";gap:16px}
  .deals__pic{max-width:260px}
  .deals__go .act{max-width:none}
}

/* ---------- preguntas frecuentes ---------- */
.qa{margin-bottom:48px}
.qa__inner{background-color:var(--panel);color:var(--dim);border-radius:6px;padding:32px 74px 56px}
.qa__inner h2{font-size:24px;line-height:130%;color:var(--white);text-transform:inherit;margin-bottom:32px}
.qa__list{display:grid;gap:8px;margin-top:32px}
.qa__item{background:var(--panel-2);border-radius:4px}
.qa__q{
  display:flex;align-items:center;justify-content:space-between;flex-direction:row-reverse;
  column-gap:16px;width:100%;padding:.625rem .9375rem;border-radius:.3125rem;
  text-align:left;cursor:pointer;list-style:none;transition:var(--ease);
}
.qa__q::-webkit-details-marker{display:none}
.qa__q h3{font-size:16px;line-height:22px;font-weight:700;text-transform:inherit;color:var(--white)}
.qa__q::before{
  content:"";flex-shrink:0;width:40px;height:40px;
  background:no-repeat center/12px 8px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23efe6d8' stroke-width='2'/%3E%3C/svg%3E");
  transition:var(--ease);
}
.qa__item[open] .qa__q::before{transform:rotate(-180deg)}
.qa__a{background:var(--page);color:var(--dim);margin:6px;padding:10px 30px;border-radius:4px}
.qa__a p{font-size:15px;line-height:1.6}

/* ---------- pie ---------- */
.footline{background-color:var(--panel);padding:42px 0}
.footline__main{display:flex;align-items:flex-start;justify-content:space-between;column-gap:48px}
.footline__logo{flex-shrink:0}
.footline__logo img{height:42px;width:auto}
.footline__nav{width:100%;display:flex;align-items:flex-start;justify-content:space-between;column-gap:48px}
.footline__label{font-size:16px;line-height:1.5;font-weight:700;margin:0 0 16px}
.footline__nav li:not(:last-child){margin:0 0 12px}
.footline__nav a{font-weight:700;font-size:14px;color:var(--dim)}
.footline__nav a:hover{color:var(--accent)}

.footline__bottom{display:flex;align-items:flex-start;justify-content:space-between;column-gap:20px;margin-top:32px;flex-wrap:wrap;row-gap:20px}
.footline__pay{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.footline__pay img{height:24px;width:auto;opacity:1;filter:none}
.footline__legal{display:flex;align-items:flex-start;column-gap:12px;max-width:640px}
.footline__legal img{width:33px;flex-shrink:0}
.footline__legal p{font-size:12px;line-height:18px;color:rgba(255,255,255,.45)}

/* ---------- adaptaciones ---------- */
@media (max-width:78.125em){
  .reel__grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:61.99875em){
  h1{font-size:44px}
  h2{font-size:38px}
  .reel__grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .paper__inner,.qa__inner{padding:32px 32px 56px}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}

  .burger{display:grid}
  .mainmenu{
    position:fixed;inset:60px 0 auto;z-index:49;
    padding:16px 2.5rem 24px;background-color:var(--panel);
    transform:translateY(-120%);transition:transform .25s ease;
  }
  .mainmenu.open{transform:translateY(0)}
  .mainmenu ul{flex-direction:column;align-items:flex-start;row-gap:16px}
  .mainmenu a{font-size:14px}
  .masthead__right{column-gap:12px}
  .masthead__acts .act--hollow{display:none}
}
@media (max-width:47.99875em){
  h1{font-size:38px}
  h2{font-size:28px}
  .t-l{font-size:18px;line-height:22px}
  .shell{padding:0 1.25rem}
  .mainmenu{padding-inline:1.25rem}

  .cover{padding:40px 0}
  .cover__body{min-height:320px}
  .sift{padding:32px 0 24px}
  .sift__bar{flex-direction:column;row-gap:24px}
  .sift__tabs{width:100%;justify-content:center}
  .sift__tab{padding:8px;font-size:13px}
  .reel__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .paper__inner,.qa__inner{padding:32px 16px}
  .shots{grid-template-columns:minmax(0,1fr);gap:24px}
  .paper h2{font-size:20px}
  .paper p,.paper li{font-size:15px}
  .paper table{display:block;overflow-x:auto;min-width:0}
  .duo{grid-template-columns:minmax(0,1fr);gap:24px}
  .qa__a{padding:10px 15px}

  .footline__main{flex-direction:column;row-gap:32px}
  .footline__nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 16px}

  .brands .shell{padding-right:0}
  .brands__row{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    padding-right:1.25rem;
    scrollbar-width:thin;
  }
  .brands__item{flex:0 0 auto}
}
@media (max-width:29.99875em){
  h1{font-size:30px}
  h2{font-size:24px}
  .shell{padding:0 1rem}
  .mainmenu{padding-inline:1rem}
  .reel__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{min-height:150px}
  .card__name{font-size:14px}
  .masthead__logo img{height:34px}
  .qa__a{padding:10px}
  .footline__nav{gap:20px 12px}
  .footline__label{font-size:14px;margin-bottom:12px}
  .footline__nav a{font-size:13px;line-height:1.45}
  .footline__nav li:not(:last-child){margin:0 0 10px}
  .brands__row{padding-right:1rem}
}
.lost{min-height:calc(100vh - 220px);display:flex;align-items:center;padding:80px 0 60px}
.lost__inner{max-width:640px;text-align:center;margin:0 auto}
.lost h1{color:var(--accent);margin-bottom:16px}
.lost p{color:var(--dim);margin-bottom:24px;font-size:16px}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}