/* cielomilanocaffe.com — Mejores Casinos Online (es) | shared stylesheet
   Café brand re-skin v2: cream + dark-brown #1f1a15 + gold, Bodoni Moda (serif) +
   Allura (script logo) + Lato (body). More attractive layout pass: reformatted navbar,
   button-free editorial heroes, accented headings, badge ranks, card hover-lift.
   Two-colour lock (brown + gold) + neutrals. */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,700;0,6..96,900;1,6..96,400;1,6..96,700&family=Allura&family=Lato:wght@400;600;700;900&display=swap');
:root{
  --brown:#1f1a15; --brown-soft:#3a3128; --gold:#b8902f; --gold-soft:#caa84e; --gold-deep:#9a7415;
  --cream:#faf6f0; --tan:#f1e7d8; --card:#ffffff; --border:#e8dfce;
  --text:#2a241d; --text-muted:#7a6f60;
  --primary:#1f1a15; --primary-light:#3a3128;
  --radius:14px; --maxw:1140px;
  --amber-bg:#FBEFC9; --amber-text:#7a5610;
  --shadow:0 10px 30px rgba(31,26,21,.08); --shadow-sm:0 2px 12px rgba(31,26,21,.06);
  --font:'Lato',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:'Bodoni Moda',Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--cream);color:var(--text);line-height:1.75;font-size:16.5px}
a{color:var(--gold-deep);text-decoration:none}
.content-block a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.2rem}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.18;font-weight:700;color:var(--brown)}
h1{font-weight:900;letter-spacing:-.01em}
h2{font-size:1.75rem;margin:2.6rem 0 1rem;position:relative}
/* editorial accent rule under section H2s in the content body */
.content-block>section>h2::after,.toplist-section>h2::after{content:"";display:block;width:54px;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-soft));border-radius:3px;margin-top:.55rem}
h3{font-size:1.25rem;margin:1.5rem 0 .6rem}
h4{font-size:1.05rem;margin:1rem 0 .4rem}
p{margin:.7rem 0}
section{padding:.4rem 0}
.content-block{max-width:var(--maxw);margin:0 auto;padding:0 1.2rem}
ul,ol{margin:.6rem 0 .6rem 1.2rem}
li{margin:.25rem 0}

/* ---------- Navbar (reformatted) ---------- */
.nav{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.92);backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--border);box-shadow:0 2px 18px rgba(31,26,21,.06)}
.nav::before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft),var(--gold))}
.nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:68px;padding:0 1.2rem}
.nav-logo{font-family:var(--serif);font-weight:700;font-size:1.45rem;color:var(--brown);display:flex;align-items:baseline;gap:.3rem;letter-spacing:.01em}
.nav-logo .chip{font-family:'Allura',cursive;background:none;color:var(--gold);padding:0;font-size:2.2rem;line-height:.9;position:relative;top:.18rem}
.nav-logo b{color:var(--brown);font-weight:700}
.nav-logo-img{height:46px;width:auto;display:block}
@media(max-width:480px){.nav-logo-img{height:38px}}
.footer-logo-img{height:46px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.92;margin-bottom:.2rem}
.nav-links{display:flex;gap:.3rem;align-items:center;list-style:none;margin:0}
.nav-links li{margin:0}
.nav-links a{position:relative;color:var(--brown);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:.55rem .55rem;border-radius:8px;transition:color .15s}
.nav-links a::after{content:"";position:absolute;left:.55rem;right:.55rem;bottom:.28rem;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav-links a:hover{color:var(--gold-deep);text-decoration:none}
.nav-links a:hover::after{transform:scaleX(1)}
/* dropdown (transactional spokes grouped under "Casinos") */
.has-dropdown{position:relative}
.has-dropdown>a .caret{font-size:.7em;margin-left:.25rem;color:var(--gold)}
.dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:240px;background:var(--card);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:.4rem;
  display:flex;flex-direction:column;gap:.1rem;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .15s,transform .15s,visibility .15s;z-index:1001}
.has-dropdown:hover .dropdown-menu,.has-dropdown:focus-within .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu a{text-transform:none;letter-spacing:0;font-size:.88rem;font-weight:600;padding:.55rem .7rem;border-radius:8px;color:var(--brown)}
.dropdown-menu a::after{display:none}
.dropdown-menu a:hover{background:var(--tan);color:var(--gold-deep)}
.nav-toggle{display:none;background:none;border:0;width:46px;height:46px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--brown);margin:5px auto;border-radius:2px;transition:.2s}
.nav-panel{display:contents}
@media(max-width:980px){
  .nav-toggle{display:block}
  .nav-panel{display:block;position:fixed;inset:71px 0 auto 0;background:var(--card);border-bottom:1px solid var(--border);
    max-height:0;overflow:hidden;transition:max-height .28s ease;z-index:999;box-shadow:var(--shadow)}
  .nav-toggle[aria-expanded="true"]+.nav-panel{max-height:84vh;overflow:auto}
  .nav-links{flex-direction:column;align-items:stretch;padding:.6rem 1.2rem 1rem;gap:0;width:100%}
  .nav-links a{display:block;width:100%;padding:.85rem .2rem;border-bottom:1px solid var(--border);border-radius:0;font-size:.9rem}
  .nav-links a::after{display:none}
  /* dropdown becomes an inline indented sub-list on mobile */
  .dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;display:flex;box-shadow:none;
    border:0;background:transparent;padding:0 0 0 1rem;min-width:0}
  .dropdown-menu a{font-size:.85rem;color:var(--text-muted);padding:.6rem .2rem}
}

/* ---------- Hero (button-free, editorial) ---------- */
.hero{position:relative;background:radial-gradient(1200px 400px at 80% -10%,rgba(184,144,47,.14),transparent 60%),linear-gradient(135deg,var(--cream) 0%,var(--tan) 100%);
  padding:3rem 0 2.4rem;border-bottom:1px solid var(--border);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.45fr .85fr;grid-template-areas:"head card" "body card";gap:0 2rem;align-items:start}
.hero-head{grid-area:head}.hero-body{grid-area:body}.hero-card{grid-area:card;align-self:center}
.hero .wrap:not(:has(.hero-card)){grid-template-columns:1fr;grid-template-areas:"head" "body"}
.breadcrumb{font-size:.8rem;color:var(--text-muted);margin-bottom:.7rem;letter-spacing:.02em}
.breadcrumb a{color:var(--text-muted)}
.hero h1{font-size:3rem;margin:.1rem 0 .2rem}
.hero h1 .accent{color:var(--gold-deep);font-style:italic}
.hero h1::after{content:"";display:block;width:70px;height:4px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft));border-radius:4px;margin:.7rem 0 .9rem}
.hero-subtitle{font-size:1.12rem;color:var(--brown-soft);max-width:48ch}
.byline{display:flex;align-items:center;gap:.6rem;margin:1rem 0 0;font-size:.88rem;color:var(--text-muted)}
.byline-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--gold-soft);flex:0 0 auto}
.byline a{color:var(--gold-deep);font-weight:700}
.review-head .byline-avatar{width:72px;height:72px}
.trust-strip{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.trust-strip span{background:rgba(255,255,255,.7);border:1px solid var(--border);border-radius:999px;padding:.35rem .8rem;font-size:.8rem;color:var(--text-muted)}
.trust-strip b{color:var(--brown)}
.disclosure{font-size:.78rem;color:var(--text-muted);font-style:italic;margin:.9rem 0 0}
.hero-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:1.3rem 1.4rem;box-shadow:var(--shadow)}
.hero-card h2{font-family:var(--serif);font-size:1.15rem;margin:0 0 .8rem;color:var(--brown)}
.hero-card h2::after{content:"";display:block;width:40px;height:3px;background:var(--gold);border-radius:3px;margin-top:.4rem}
.hero-card ul{list-style:none;margin:0}
.hero-card li{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px dashed var(--border);font-size:.92rem}
.hero-card li:last-child{border:0}
.hero-card .b{color:var(--amber-text);background:var(--amber-bg);border-radius:6px;padding:.1rem .5rem;font-weight:700;font-size:.8rem;white-space:nowrap}
/* featured single-brand hero card (with CTA) */
.featured-card{text-align:center}
.featured-flag{display:inline-block;background:linear-gradient(135deg,var(--gold),var(--gold-soft));color:var(--brown);font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;padding:.32rem .8rem;border-radius:999px;margin-bottom:.9rem}
.featured-card .toplist-logo{display:block;margin:.1rem auto .7rem;width:180px;height:90px}
.featured-card h3{margin:.1rem 0;font-size:1.45rem}
.featured-rating{color:var(--gold-deep);font-weight:800;font-family:var(--serif);font-size:1.25rem;margin:.15rem 0 .4rem}
.featured-tagline{font-size:.92rem;color:var(--brown-soft);margin:.2rem 0 1rem;line-height:1.5}
.featured-bonus{background:var(--amber-bg);color:var(--amber-text);font-weight:800;padding:.55rem .85rem;border-radius:8px;margin:.5rem 0 1rem;font-size:.96rem}
.featured-note{display:block;font-size:.72rem;color:var(--text-muted);margin-top:.7rem}
@media(max-width:900px){.hero{padding:1.6rem 0 1.4rem}
  .hero .wrap{grid-template-columns:1fr;grid-template-areas:"head" "card" "body";gap:1rem}
  .hero h1{font-size:2.05rem}
  .hero-head{margin-bottom:.2rem}}

/* ---------- Buttons / CTA ---------- */
.btn{display:inline-block;border-radius:10px;font-weight:800;text-align:center;cursor:pointer;border:0;font-family:var(--font);
  transition:transform .08s,box-shadow .15s,filter .15s;letter-spacing:.01em}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-soft) 100%);color:var(--brown);padding:.85rem 1.5rem;font-size:1rem;font-weight:900;
  box-shadow:0 0 16px rgba(184,144,47,.5),0 4px 14px rgba(184,144,47,.32)}
.btn-primary:hover{box-shadow:0 0 26px rgba(184,144,47,.75),0 8px 22px rgba(184,144,47,.45);filter:brightness(1.05)}
.btn-sm{padding:.58rem 1.05rem;font-size:.88rem}
.btn-lg{padding:1rem 2.2rem;font-size:1.12rem}
/* glowing, larger toplist + featured CTAs */
@keyframes ctaGlow{0%,100%{box-shadow:0 0 14px rgba(184,144,47,.45),0 4px 14px rgba(184,144,47,.3)}50%{box-shadow:0 0 26px rgba(184,144,47,.8),0 4px 14px rgba(184,144,47,.3)}}
.toplist-table .col-cta .btn,.featured-card .btn{font-size:1rem;font-weight:900;letter-spacing:.02em;padding:.72rem 1.25rem;animation:ctaGlow 2.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.toplist-table .col-cta .btn,.featured-card .btn{animation:none}}
.btn-block{display:block;width:100%}
.cta-block{text-align:center;margin:1.6rem 0}

/* ---------- Toplist table ---------- */
.toplist-section{margin-top:.5rem}
.toplist-section .table-wrapper{overflow-x:auto}
.toplist-lead{color:var(--text-muted);max-width:76ch;font-size:1.02rem}
.toplist-table{width:100%;border-collapse:separate;border-spacing:0;margin:1.2rem 0;background:var(--card);border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.toplist-table thead th{text-align:left;padding:.9rem 1rem;background:var(--brown);color:var(--cream);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.toplist-table tbody td{padding:1rem;border-bottom:1px solid var(--border);vertical-align:middle}
.toplist-table tbody tr:last-child td{border-bottom:0}
.toplist-table tbody tr{transition:background .15s}
.toplist-table tbody tr:hover{background:#fcf8f0}
.toplist-row.highlight-row{background:#fdf8ea}
.toplist-row.highlight-row:hover{background:#fbf3df}
.toplist-table .col-rank{width:54px}
.toplist-table .col-rank strong{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:var(--tan);color:var(--brown);font-family:var(--serif);font-weight:700;font-size:1rem;border:1px solid var(--border)}
.toplist-row.highlight-row .col-rank strong{background:linear-gradient(135deg,var(--gold),var(--gold-soft));color:var(--brown);border-color:var(--gold)}
.toplist-table .col-logo{display:flex;align-items:center;gap:1rem;min-width:270px}
.toplist-logo{width:128px;height:68px;object-fit:contain;background:#1b2030;padding:8px 12px;border-radius:10px;border:1px solid #2c3450;box-shadow:0 0 16px rgba(184,144,47,.5);transition:box-shadow .2s,transform .2s}
.toplist-logo.logo-on-light{background:#1b2030;border-color:#2c3450}
.toplist-row:hover .toplist-logo{box-shadow:0 0 26px rgba(184,144,47,.78);transform:translateY(-1px)}
.logo-chip{width:128px;height:68px;display:flex;align-items:center;justify-content:center;background:#686e76;color:#fff;border-radius:10px;font-weight:700;font-size:1rem;text-align:center;line-height:1.05;padding:4px;font-family:var(--serif);border:1px solid #565c64}
.toplist-brand{display:flex;flex-direction:column;line-height:1.25}
.toplist-brand strong{color:var(--brown);font-size:1.02rem}
.toplist-descriptor{font-size:.78rem;color:var(--text-muted)}
.toplist-bonus{display:inline-block;background:linear-gradient(135deg,#FCEFC4 0%,#F6DC92 100%);color:var(--amber-text);font-weight:900;font-size:1.12rem;line-height:1.3;padding:.5rem .9rem;border-radius:9px;border:1px solid #eccf7e;box-shadow:0 1px 5px rgba(184,144,47,.2)}
.toplist-rating{color:var(--gold-deep);font-weight:800;font-family:var(--serif);font-size:1.05rem}
.toplist-table .col-cta{width:165px;text-align:right}
.toplist-table .col-cta .btn{white-space:nowrap}
.toplist-review-link{display:block;font-size:.76rem;margin-top:.35rem;color:var(--text-muted)}
@media(max-width:768px){
  .toplist-table{box-shadow:none;border:0;background:transparent}
  .toplist-table thead{display:none}
  .toplist-table,.toplist-table tbody,.toplist-table tr,.toplist-table td{display:block;width:100%}
  .toplist-table tr{border:1px solid var(--border);border-radius:16px;margin-bottom:.85rem;padding:1rem .9rem;background:var(--card);text-align:center;box-shadow:var(--shadow-sm)}
  .toplist-row.highlight-row{border:2px solid var(--gold);background:#fdf8ea}
  .toplist-table td{border:none;padding:.32rem 0;text-align:center}
  .toplist-table .col-rank strong{margin-bottom:.2rem}
  .toplist-table .col-logo{flex-direction:column;min-width:0;gap:.45rem;align-items:center}
  .toplist-logo,.logo-chip{width:170px;height:90px}
  .toplist-table .col-cta{width:100%;text-align:center}
  .toplist-table .col-cta .btn{display:block;width:100%}
}

/* ---------- Generic tables ---------- */
.data-table{width:100%;border-collapse:collapse;margin:1.1rem 0;background:var(--card);border-radius:14px;overflow:hidden;font-size:.93rem;border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.data-table th,.data-table td{padding:.75rem .9rem;border-bottom:1px solid var(--border);text-align:left}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table thead th{background:var(--tan);color:var(--brown);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
.data-table .bonus{color:var(--amber-text);font-weight:700}
.table-wrapper{overflow-x:auto}
/* mobile-optimised data tables — reflow header tables into label/value cards on phones */
@media(max-width:600px){
  .data-table.has-labels{border:0;box-shadow:none;background:transparent}
  .data-table.has-labels thead{display:none}
  .data-table.has-labels,.data-table.has-labels tbody,.data-table.has-labels tr,.data-table.has-labels td{display:block;width:100%}
  .data-table.has-labels tr{border:1px solid var(--border);border-radius:12px;margin-bottom:.7rem;background:var(--card);box-shadow:var(--shadow-sm);overflow:hidden}
  .data-table.has-labels td{border:none;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.55rem .85rem;text-align:right}
  .data-table.has-labels tr td:last-child{border-bottom:0}
  .data-table.has-labels td[data-label]::before{content:attr(data-label);font-weight:700;color:var(--brown);text-align:left;flex:0 0 42%}
  .data-table.has-labels td:not([data-label]){background:var(--tan);font-weight:800;color:var(--brown);justify-content:flex-start;font-family:var(--serif)}
}

/* ---------- Bonus highlight (review pages) ---------- */
.bonus-highlight{background:linear-gradient(135deg,#FBEFC9,#F3DF9E);color:var(--amber-text);font-weight:800;
  padding:.9rem 1.2rem;border-radius:12px;border-left:5px solid var(--gold);margin:1.3rem 0;box-shadow:var(--shadow-sm)}
.casino-shot{width:100%;height:auto;border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow);margin:.6rem 0;display:block}

/* ---------- Reviews / cards ---------- */
.review-block{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.2rem 1.3rem;margin:1.1rem 0;box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .15s}
.review-block:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.review-head{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.review-head .logo-chip,.review-head .toplist-logo{width:112px;height:60px}
.review-head .rating{margin-left:auto;color:var(--gold-deep);font-weight:800;font-size:1.15rem;font-family:var(--serif)}
.review-block h3{margin:.2rem 0}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:.8rem 0}
.proscons ul{list-style:none;margin:0}
.proscons li{padding:.25rem 0;font-size:.92rem}
.pros li::before{content:"\2713 ";color:#2e7d32;font-weight:800}
.cons li::before{content:"\2715 ";color:#b3261e;font-weight:800}
@media(max-width:600px){.proscons{grid-template-columns:1fr}}

/* ---------- Category grid (links to spokes) ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin:1.2rem 0}
.cat-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.2rem;box-shadow:var(--shadow-sm);
  transition:transform .12s,box-shadow .15s,border-color .15s;border-top:3px solid transparent}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-top-color:var(--gold)}
.cat-card h3{margin:.1rem 0 .35rem;font-size:1.1rem}
.cat-card a{font-weight:700;color:var(--gold-deep)}

/* ---------- FAQ ---------- */
.faq details{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.5rem 1.1rem;margin:.6rem 0;box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;font-weight:700;padding:.55rem 0;color:var(--brown);font-family:var(--serif);font-size:1.04rem}
.faq summary::marker{color:var(--gold)}

/* ---------- Responsible gambling / disclosure ---------- */
.rg-banner{background:var(--tan);border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:12px;padding:.9rem 1.1rem;font-size:.86rem;color:var(--text-muted);margin:1.4rem 0}
.rg-banner b{color:var(--brown)}

/* ---------- Footer ---------- */
.footer{background:var(--brown);border-top:3px solid var(--gold);margin-top:3rem;padding:2.4rem 0 1.3rem;font-size:.88rem;color:var(--cream)}
.footer h4{color:#fff;font-size:.98rem;margin-bottom:.7rem;font-family:var(--serif)}
.footer .nav-logo{font-size:1.3rem}
.footer .nav-logo .chip{color:var(--gold-soft)}
.footer .nav-logo b{color:#fff}
.footer ul{list-style:none;margin:0}
.footer li{padding:.22rem 0}
.footer a{color:#d8ccba}
.footer a:hover{color:var(--gold-soft)}
.footer p{color:#c4b69f}
.footer-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:1.6rem}
.footer-bottom{border-top:1px solid #3a3128;margin-top:1.6rem;padding-top:1.1rem;color:#a89a82;font-size:.8rem}
.age-badge{display:inline-block;border:2px solid var(--gold-soft);color:var(--gold-soft);border-radius:50%;width:34px;height:34px;line-height:30px;text-align:center;font-weight:800;font-size:.8rem;margin-right:.5rem}
@media(max-width:760px){.footer-cols{grid-template-columns:1fr;gap:1.2rem}}