:root{
  --navy:#1b2a6b; --ink:#26306b; --orange:#ff8a00; --yellow:#ffd400; --pink:#ff3d9a; --cyan:#19b5ff; --purple:#7b2cbf; --green:#22c55e; --red:#ef4444;
  --bg:#fffaf0; --card:#fff; --line:#e6e9f7; --muted:#6b7399;
  --grad:linear-gradient(90deg,#ff8a00,#ff3d9a);
  --shadow:0 10px 30px rgba(27,42,107,.12);
  --r:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Nunito',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5;font-size:17px}
img{max-width:100%}
h1,h2,h3,h4{font-family:'Fredoka','Nunito',sans-serif;margin:0 0 .4em;line-height:1.15;color:var(--navy)}
a{color:inherit}
.wrap{max-width:1560px;margin:0 auto;padding:0 clamp(16px,3.2vw,56px)}
.center{text-align:center}.muted{color:var(--muted)}.small{font-size:.9rem;color:var(--muted);margin:.3rem 0}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;padding:12px 22px;border-radius:999px;text-decoration:none;transition:transform .15s,box-shadow .15s,filter .15s;color:#fff}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn-primary{background:var(--grad);box-shadow:0 8px 20px rgba(255,61,154,.35)}
.btn-wa{background:linear-gradient(90deg,#25d366,#12a84f);box-shadow:0 8px 20px rgba(37,211,102,.35)}
.btn-blue{background:linear-gradient(90deg,#19b5ff,#1b6cff)}
.btn-purple{background:linear-gradient(90deg,#7b2cbf,#c13cff)}
.btn-ghost{background:#fff;color:var(--navy);border:2px solid var(--line)}
.btn-danger{background:linear-gradient(90deg,#ef4444,#c81e5b)}
.btn-sm{padding:8px 16px;font-size:.92rem}.btn-lg{padding:15px 30px;font-size:1.15rem}.btn-block{width:100%}

/* Barra superior */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:3px solid transparent;border-image:linear-gradient(90deg,#ff8a00,#ff3d9a,#19b5ff,#ffd400) 1}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-photo{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:top;border:3px solid var(--yellow);box-shadow:0 3px 10px rgba(0,0,0,.15)}
.brand-name{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.2rem;color:var(--navy);line-height:1}
.brand-name small{display:block;font-size:.8rem;font-weight:600;color:var(--pink)}
.nav{display:flex;align-items:center;gap:18px;font-weight:700}
.nav a:not(.btn){text-decoration:none;color:var(--navy)}
.nav a:not(.btn):hover{color:var(--pink)}

/* Hero */
.hero{position:relative;overflow:hidden;text-align:center;padding:36px 0 54px;background:
  radial-gradient(circle at 15% 20%,#ffe9a8 0,transparent 40%),radial-gradient(circle at 85% 10%,#ffd1ea 0,transparent 40%),radial-gradient(circle at 70% 90%,#c9ecff 0,transparent 45%),#fffaf0}
.hero-in{position:relative;z-index:2}
.hero-logo{width:min(760px,96%);height:auto;filter:drop-shadow(0 12px 18px rgba(27,42,107,.25));animation:float 4s ease-in-out infinite}
.hero-sub{max-width:640px;margin:6px auto 22px;font-size:1.15rem;font-weight:600;color:var(--ink)}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.bubble{position:absolute;border-radius:50%;opacity:.55;z-index:1;animation:float 6s ease-in-out infinite}
.b1{width:90px;height:90px;background:var(--yellow);left:5%;top:20%}.b2{width:60px;height:60px;background:var(--pink);right:8%;top:30%;animation-delay:1s}
.b3{width:120px;height:120px;background:var(--cyan);right:14%;bottom:-30px;animation-delay:2s}.b4{width:50px;height:50px;background:var(--orange);left:14%;bottom:12%;animation-delay:.5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* Secciones */
.section{padding:56px 0}.section.tight{padding:24px 0 120px}
.section-alt{background:linear-gradient(180deg,#fff,#fff0f8)}
.title{font-size:clamp(1.9rem,4.5vw,2.7rem);text-align:center;margin-bottom:28px}

/* Tarjetas de rifas */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px}
.card{background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);border-top:8px solid var(--c);transition:transform .2s}
.card:hover{transform:translateY(-6px)}
.c-orange{--c:var(--orange)}.c-pink{--c:var(--pink)}.c-blue{--c:var(--cyan)}.c-purple{--c:var(--purple)}
.card-img{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#ffe9a8,#ffd1ea)}
.card-img img{width:100%;height:100%;object-fit:cover;display:block}
.card-img-ph{display:grid;place-items:center;height:100%;font-size:4rem}
.badge{position:absolute;top:12px;right:12px;padding:5px 13px;border-radius:999px;font-weight:800;font-size:.85rem;color:#fff}
.badge-ok{background:var(--green)}.badge-off{background:#8b93b8}
.card-body{padding:18px}
.card-body h3{font-size:1.45rem}
.prize{margin:.2rem 0 .6rem;font-weight:800;color:var(--purple)}.prize.big{font-size:1.25rem}
.meta{display:flex;justify-content:space-between;gap:8px;margin:8px 0;font-weight:700}
.meta b{color:var(--pink);font-size:1.2rem}
.bar{height:12px;border-radius:99px;background:#eef0fb;overflow:hidden;margin:10px 0 4px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#ffd400,#ff8a00,#ff3d9a);border-radius:99px;transition:width .6s}
.card .btn{margin-top:12px}
.empty{max-width:520px;margin:0 auto;text-align:center;background:#fff;border-radius:var(--r);padding:36px;box-shadow:var(--shadow)}
.empty-emoji{font-size:3.5rem}

/* Pasos */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.step{background:#fff;border-radius:var(--r);padding:24px;text-align:center;box-shadow:var(--shadow)}
.step-n{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto 10px;color:#fff;font-family:'Fredoka';font-size:1.7rem;font-weight:700}
.n1{background:var(--orange)}.n2{background:var(--pink)}.n3{background:var(--cyan)}.n4{background:var(--purple)}
.step h3{font-size:1.2rem}.step p{margin:0;color:var(--muted);font-weight:600}
.note{text-align:center;margin-top:24px;font-weight:700;color:var(--navy);background:#fff6cc;border-radius:14px;padding:14px;max-width:700px;margin-left:auto;margin-right:auto}

/* Ganadores */
.winners{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.winner{background:#fff;border-radius:var(--r);padding:20px;text-align:center;box-shadow:var(--shadow);border-bottom:6px solid var(--yellow)}
.winner-num{font-family:'Fredoka';font-size:2.6rem;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.winner h4{font-size:1.05rem}.winner p{margin:.2rem 0}

/* Cabecera de rifa */
.raffle-head{background:linear-gradient(135deg,#fff0c2,#ffd9ee 55%,#cfeeff);padding:26px 0 30px}
.raffle-head-in{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:26px;align-items:center}
.raffle-head-in:not(:has(.raffle-img)){grid-template-columns:1fr}
.raffle-img{width:100%;border-radius:var(--r);box-shadow:var(--shadow);border:6px solid #fff;aspect-ratio:4/3;object-fit:cover}
.raffle-head h1{font-size:clamp(1.8rem,4.5vw,2.8rem)}
.back{display:inline-block;margin-bottom:8px;font-weight:800;color:var(--purple);text-decoration:none}
.desc{font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{padding:7px 14px;border-radius:99px;font-weight:800;font-size:.95rem;color:#fff}
.chip.c1{background:var(--pink)}.chip.c2{background:var(--purple)}.chip.c3{background:#1b6cff}
.winner-banner{margin-top:14px;padding:14px 18px;background:var(--navy);color:#fff;border-radius:14px;font-family:'Fredoka';font-size:1.3rem}
.winner-banner b{color:var(--yellow);font-size:1.7rem}.winner-banner.closed{background:#8b93b8;font-size:1.05rem}

/* Tablero */
.board-top{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-bottom:14px}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-weight:800;font-size:.95rem}
.lg{display:inline-block;width:18px;height:18px;border-radius:6px;vertical-align:-3px;margin-right:4px}
.lg.free{background:#d9f8e3;border:2px solid #22c55e}.lg.sel{background:var(--pink)}.lg.res{background:var(--yellow)}.lg.sold{background:var(--red)}
.live{font-weight:700;color:var(--muted);font-size:.92rem}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--green);margin-right:5px;animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}100%{box-shadow:0 0 0 10px rgba(34,197,94,0)}}
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:14px}
.tool{background:#fff;border-radius:16px;padding:12px 14px;box-shadow:var(--shadow)}
.tool label{display:block;font-weight:800;font-size:.9rem;margin-bottom:6px}
.row{display:flex;gap:8px}
input,select,textarea{font-family:inherit;font-size:1rem;color:var(--ink);border:2px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;width:100%}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,61,154,.15)}
.pager{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;justify-content:center}
.pg{border:2px solid var(--line);background:#fff;color:var(--navy);font-weight:800;border-radius:10px;padding:7px 12px;cursor:pointer;font-family:inherit}
.pg.on{background:var(--grad);color:#fff;border-color:transparent}
.pg-sel{width:auto;min-width:170px;font-weight:800}
.grid{display:grid;grid-template-columns:repeat(10,1fr);gap:7px;background:#fff;padding:14px;border-radius:var(--r);box-shadow:var(--shadow)}
.cell{font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(.78rem,2.7vw,1.15rem);padding:11px 0;border-radius:11px;border:2px solid transparent;cursor:pointer;transition:transform .1s,background .15s;user-select:none}
.cell.free{background:#d9f8e3;border-color:#22c55e;color:#0b6b2e}
.cell.free:hover{transform:scale(1.12);background:#b6f0c9}
.cell.sel{background:var(--pink);color:#fff;border-color:#c81e7a;transform:scale(1.05);box-shadow:0 4px 12px rgba(255,61,154,.5)}
.cell.res{background:var(--yellow);color:#7a5b00;border-color:#e6b800;cursor:not-allowed}
.cell.sold{background:var(--red);color:#fff;cursor:not-allowed;text-decoration:line-through;opacity:.85}
.cell[disabled]{cursor:not-allowed}
.cell.flash{animation:flash 1.2s 2}
@keyframes flash{50%{transform:scale(1.4);box-shadow:0 0 0 6px rgba(25,181,255,.6)}}
.grid.d3 .cell,.grid.d4 .cell,.grid.d5 .cell{font-size:clamp(.7rem,2.3vw,1rem)}

/* Carrito */
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:4px solid var(--pink);box-shadow:0 -10px 30px rgba(27,42,107,.18);padding:10px 0;animation:up .25s}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.cartbar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cart-info{flex:1;min-width:220px}
.cart-line{font-family:'Fredoka';font-size:1.2rem;color:var(--navy)}.cart-line b{color:var(--pink)}
.cart-chips{display:flex;gap:5px;overflow-x:auto;padding:4px 0;max-height:70px;flex-wrap:wrap}
.cchip{background:#ffe3f1;color:#b3125f;font-weight:800;padding:2px 9px;border-radius:99px;font-size:.85rem;cursor:pointer;white-space:nowrap}
.cart-actions{display:flex;gap:8px;align-items:center}
body.has-cart .wa-float{bottom:130px}

/* Modales */
.modal{position:fixed;inset:0;background:rgba(20,26,70,.55);z-index:100;display:grid;place-items:center;padding:16px;overflow:auto}
.modal[hidden]{display:none}
.modal-box{position:relative;background:#fff;border-radius:24px;padding:26px;width:min(480px,100%);box-shadow:0 20px 60px rgba(0,0,0,.35);animation:pop .25s}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
.modal-x{position:absolute;top:10px;right:14px;border:0;background:none;font-size:2rem;line-height:1;cursor:pointer;color:var(--muted)}
.modal-box label{display:block;font-weight:800;margin:12px 0 4px}
.sum{background:linear-gradient(135deg,#fff6cc,#ffe3f1);border-radius:16px;padding:12px 16px;margin-bottom:6px}
.sum div{display:flex;justify-content:space-between;gap:12px;padding:3px 0}.sum b{text-align:right;word-break:break-word;max-width:65%}
.sum-total{border-top:2px dashed #f0b3d4;margin-top:6px;padding-top:8px!important;font-size:1.25rem;font-family:'Fredoka'}.sum-total b{color:var(--pink)}
.hint{font-size:.9rem;color:var(--muted);margin:12px 0}
.form-err{background:#ffe3e3;color:#b00020;border-radius:10px;padding:10px 12px;font-weight:700}
.done-emoji{font-size:3.5rem}.code{background:#e8ecff;padding:2px 10px;border-radius:8px;font-family:monospace;font-size:1.1em}
.countdown{font-size:1.2rem;font-weight:800}.countdown b{color:var(--red);font-family:'Fredoka';font-size:1.6rem}
.done-nums{font-family:'Fredoka';font-size:1.3rem;color:var(--pink);word-break:break-word}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 20px;border-radius:14px;z-index:120;font-weight:700;max-width:92%;text-align:center;box-shadow:var(--shadow)}
.toast[hidden]{display:none}

/* Footer */
.footer{background:var(--navy);color:#dfe4ff;padding:12px 0;font-size:.9rem}
.footer-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 16px}
.footer-links a{color:var(--yellow);font-weight:800;text-decoration:none}.footer-small{opacity:.8}
body.has-cart .footer{padding-bottom:120px}
.wa-float{position:fixed;right:16px;bottom:18px;width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 8px 22px rgba(37,211,102,.55);z-index:55;transition:bottom .2s}

@media(max-width:760px){
  body{font-size:16px}
  .nav a:not(.btn){display:none}
  .raffle-head-in{grid-template-columns:1fr}
  .grid{gap:5px;padding:8px}
  .cell{padding:10px 0}
  .brand-name{font-size:1.05rem}
  .cart-actions{width:100%}.cart-actions .btn-lg{flex:1}
}

.hero-logo-box{display:block}
.logo-fallback{font-family:'Fredoka',sans-serif;font-size:clamp(2.6rem,9vw,5rem);color:var(--navy);margin:0 0 10px}
.logo-fallback span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-fallback small{display:block;font-size:clamp(1.1rem,3.5vw,1.8rem);color:var(--pink)}
.hero-logo{width:min(560px,92%);height:auto}

.hero-msg-box{display:block;margin:0 auto 22px}
.hero-msg{width:min(640px,94%);height:auto;filter:drop-shadow(0 8px 14px rgba(27,42,107,.25))}
.hero-logo{width:min(480px,86%)}
.hero{padding:28px 0 44px}

.footer .admin-link{margin-left:10px;font-size:.75rem;font-weight:600;color:#dfe4ff;opacity:.35;transition:opacity .2s}
.footer .admin-link:hover{opacity:1;color:var(--yellow)}

/* Fondo de la portada */
.hero{background:#0b2a8f url('../img/fondo.jpg') center bottom/cover no-repeat}
@supports (background-image:image-set(url('x.webp') 1x)){
  .hero{background-image:image-set(url('../img/fondo.webp') type('image/webp'),url('../img/fondo.jpg') type('image/jpeg'))}
}
.bubble{display:none}
.hero-logo,.hero-msg{filter:drop-shadow(0 6px 18px rgba(0,0,20,.45))}
.hero .btn-ghost{border-color:#fff;box-shadow:0 8px 20px rgba(0,0,40,.35)}
.hero .btn-primary{box-shadow:0 8px 24px rgba(255,138,0,.55)}

/* Difuminado inferior de la portada (sin línea dura) */
.hero{padding-bottom:96px}
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,250,240,0) 0%,rgba(255,250,240,.55) 55%,#fffaf0 100%)}

/* ====== Sección "Rifas disponibles" (estilo vistoso) ====== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sec-rifas{position:relative;padding:70px 0 80px;color:#fff;
  background:
    radial-gradient(55% 45% at 0% 0%,rgba(25,210,255,.85) 0,transparent 65%),
    radial-gradient(50% 45% at 100% 100%,rgba(225,29,217,.75) 0,transparent 65%),
    radial-gradient(45% 40% at 0% 100%,rgba(30,70,230,.9) 0,transparent 70%),
    radial-gradient(40% 40% at 100% 0%,rgba(110,40,255,.8) 0,transparent 70%),
    linear-gradient(135deg,#2a1590,#4a1bb5 50%,#33129a)}
.sec-rifas::before,.sec-rifas::after{content:'';position:absolute;left:0;right:0;height:90px;z-index:0;pointer-events:none}
.sec-rifas::before{top:0;background:linear-gradient(to bottom,#fffaf0,rgba(255,250,240,0))}
.sec-rifas::after{bottom:0;background:linear-gradient(to top,#fff,rgba(255,255,255,0))}
.sec-rifas .wrap{position:relative;z-index:1}
.raffles-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"art cards";align-items:start;column-gap:10px}
.art-col{grid-area:art;position:sticky;top:84px;align-self:start}
.art{display:block;margin:0}
.art img{display:block;width:100%;height:auto}
.art img{ /* se difuminan los bordes para fundirse con el fondo */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 100%);mask-composite:intersect}
.art-bottom img{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 88%,transparent 100%),linear-gradient(to bottom,#000 0,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 88%,transparent 100%),linear-gradient(to bottom,#000 0,#000 88%,transparent 100%)}
.rcards{grid-area:cards;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,400px));justify-content:center;gap:26px;align-content:start}
.sec-rifas .empty{color:var(--ink);grid-column:1/-1}

.rcard{border-radius:32px;padding:4px;background:linear-gradient(135deg,#ffe36b,#ff9a1f 45%,#ff3d9a);box-shadow:0 0 0 3px rgba(255,255,255,.12),0 18px 44px rgba(10,5,60,.55),0 0 38px rgba(255,170,40,.45);transition:transform .2s}
.rcard:hover{transform:translateY(-6px)}
.rcard-in{background:#fff;border-radius:28px;overflow:hidden;color:var(--ink)}
.rcard-img{position:relative;aspect-ratio:16/10;background:radial-gradient(circle at 50% 70%,#fff2a8 0,#ffb347 32%,#d34bff 72%,#6a2cd8 100%);overflow:hidden}
.rcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.rcard-img-ph{display:grid;place-items:center;height:100%;font-size:4.2rem}
.rbadge{position:absolute;top:12px;right:12px;padding:6px 16px;border-radius:999px;font-family:'Fredoka',sans-serif;font-weight:700;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.3);border:2px solid rgba(255,255,255,.7)}
.rbadge.ok{background:linear-gradient(#2bd35a,#0f9d3a)}.rbadge.off{background:linear-gradient(#9aa3c7,#6b739a)}
.rcard-body{padding:16px 18px 20px;text-align:center}
.rtitle{display:flex;align-items:center;justify-content:center;gap:8px;font-size:1.45rem;color:var(--navy);margin:0 0 12px}
.rtitle i{font-style:normal;color:var(--pink);font-size:.9rem}
.rpills{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.rpills:has(.rp-price:only-child){grid-template-columns:1fr}
.rp-prize,.rp-price{border-radius:16px;padding:7px 10px;display:flex;align-items:center;justify-content:center;gap:6px;line-height:1.1;min-height:58px}
.rp-prize{background:linear-gradient(135deg,#b3125f,#e11d74);color:#fff;text-align:left}
.rp-prize small,.rp-price small{display:block;font-size:.72rem;font-weight:800;opacity:.95}
.rp-prize b{font-family:'Fredoka';font-size:1.25rem;color:var(--yellow);word-break:break-word}
.rp-ico{font-size:1.6rem}
.rp-price{background:#ffe3f1;color:#b3125f;flex-direction:column;gap:2px}
.rp-price b{font-family:'Fredoka';font-size:1.45rem;color:var(--pink)}
.rp-digits{display:inline-block;background:var(--navy);color:#fff;font-family:'Fredoka';font-weight:600;padding:6px 18px;border-radius:99px;margin-bottom:10px}
.rinfo{display:flex;align-items:center;justify-content:center;gap:8px;background:#e3f1ff;color:#1b3a8a;border-radius:14px;padding:9px 12px;font-weight:700;font-size:.95rem;text-align:left;margin-bottom:12px}
.rbar{height:14px;border-radius:99px;background:#dfe3f7;overflow:hidden;margin:4px 0 6px;box-shadow:inset 0 2px 4px rgba(0,0,0,.12)}
.rbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(#5be37f,#16a34a);box-shadow:0 0 8px rgba(34,197,94,.7)}
.rleft{margin:0 0 12px;font-weight:700;color:var(--navy);font-size:.95rem}
.rleft mark{background:var(--yellow);color:var(--navy);border-radius:8px;padding:1px 8px;font-family:'Fredoka';font-weight:700}
.rcta{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.3rem;padding:14px 18px;border-radius:999px;
  background:linear-gradient(#ff3d6e,#c8105a);box-shadow:0 6px 0 #8f0b43,0 12px 22px rgba(200,16,90,.45);transition:transform .12s,box-shadow .12s}
.rcta:hover{transform:translateY(2px);box-shadow:0 4px 0 #8f0b43,0 8px 16px rgba(200,16,90,.45);filter:brightness(1.06)}
.rcta .hand{font-size:1.4rem}

@media(max-width:860px){
  .raffles-wrap{grid-template-columns:1fr;grid-template-areas:"top" "cards" "bottom";row-gap:6px}
  .art-col{display:contents}
  .art-top{grid-area:top}.art-bottom{grid-area:bottom}
  .art-top{max-width:520px;margin:0 auto}.art-bottom{max-width:520px;margin:10px auto 0}
  .art-top img{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 86%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 86%,transparent 100%)}
  .art-bottom img{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 14%,#000 88%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 14%,#000 88%,transparent 100%)}
  .sec-rifas{padding:56px 0 64px}
  .rcards{grid-template-columns:minmax(0,420px)}
}

/* Aprovechar pantallas anchas */
.art{max-width:780px;margin-left:auto;margin-right:auto}
.cards{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.steps{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.winners{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.raffle-head-in{grid-template-columns:minmax(0,420px) 1fr}
@media(min-width:1500px){body{font-size:18px}}
@media(max-width:760px){.raffle-head-in{grid-template-columns:1fr}}
.rcards{grid-template-columns:repeat(auto-fit,minmax(290px,1fr));justify-content:stretch}
.rcards .rcard{width:100%;max-width:440px;justify-self:center}
.raffles-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
@media(max-width:860px){.raffles-wrap{grid-template-columns:1fr}.rcards{grid-template-columns:minmax(0,440px);justify-content:center}}
.wrap{max-width:1800px}
.rcards{align-items:start}

/* Foto de Triple Papito en la portada */
.hero-person{display:block;position:relative;z-index:2;width:min(320px,72%);margin:8px auto -64px;pointer-events:none}
.hero-person img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 26px rgba(0,0,40,.5))}
@media(min-width:1280px){
  .hero-person{position:absolute;right:clamp(12px,2vw,40px);bottom:0;width:clamp(250px,calc(50vw - 385px),620px);margin:0;z-index:0}
  .hero{min-height:640px}
}

/* Botones de imagen de la portada */
.hero-cta{align-items:center;gap:4px 8px}
.img-btn{display:block;width:min(340px,44vw);transition:transform .15s,filter .15s}
.img-btn img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,40,.4))}
.img-btn:hover{transform:translateY(-4px) scale(1.04);filter:brightness(1.06)}
.img-btn:active{transform:scale(.98)}
@media(max-width:600px){.img-btn{width:min(300px,84vw)}.hero-cta{flex-direction:column}}

/* Foto del carro (lado izquierdo, solo en pantallas anchas) */
.hero-person-left{display:none}
@media(min-width:1280px){
  .hero-person-left{display:block;position:absolute;left:clamp(12px,2vw,40px);bottom:0;width:clamp(250px,calc(50vw - 385px),620px);z-index:0;pointer-events:none}
  .hero-person-left img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 26px rgba(0,0,40,.5))}
}

/* Tarjetas del mismo alto y alineadas */
.rcards{align-items:stretch;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.rcards .rcard{display:flex;height:100%;max-width:440px;width:100%;justify-self:center}
.rcard-in{display:flex;flex-direction:column;width:100%}
.rcard-body{flex:1;display:flex;flex-direction:column}
.rtitle{min-height:3.4rem;line-height:1.15}
.rtitle span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rp-prize b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rinfo.soon{opacity:.75}
.rinfo{min-height:48px}
.rcta{margin-top:auto}
.rleft{margin-bottom:14px}
.rp-digits{align-self:center}
.rp-prize,.rp-price{min-height:70px}
.rpills{align-items:stretch}

/* ====== Página de la rifa: estilo "Rifa Virtual" ====== */
body.page-rifa{background:
  repeating-conic-gradient(from 0deg at 50% -8%,rgba(120,190,255,.16) 0 5deg,transparent 5deg 10deg),
  radial-gradient(ellipse 90% 50% at 50% 0%,#3d8bff 0,transparent 70%),
  linear-gradient(180deg,#0a2fb8 0,#0142c7 45%,#0a52dc 100%);background-color:#0a52dc}
.page-rifa .raffle-head{background:none;padding:22px 0 6px}
.page-rifa .raffle-head-in{background:#fff;border-radius:28px;padding:20px;border:4px solid #f6c445;box-shadow:0 0 0 3px rgba(255,255,255,.25),0 14px 40px rgba(0,15,80,.5)}
.page-rifa .raffle-img{border:4px solid #fff}
.page-rifa .section.tight{padding:10px 0 130px}
.board-art{display:block;margin:0 auto 8px;max-width:1100px}
.board-art img{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%),linear-gradient(to right,transparent 0,#000 3%,#000 97%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,#000 70%,transparent 100%),linear-gradient(to right,transparent 0,#000 3%,#000 97%,transparent 100%);mask-composite:intersect}
.page-rifa .board-top{margin-bottom:12px;align-items:center}
.page-rifa .legend{background:linear-gradient(#fff,#e9f1ff);border:3px solid #f6c445;border-radius:999px;padding:8px 20px;color:var(--navy);box-shadow:0 6px 16px rgba(0,15,80,.35)}
.page-rifa .legend span{display:inline-flex;align-items:center;gap:6px}
.page-rifa .lg{width:22px;height:22px;border-radius:50%;margin:0;border:0;box-shadow:inset 0 -3px 5px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.3)}
.page-rifa .lg.free{background:radial-gradient(circle at 35% 30%,#d6ffd9,#2ecb5a 55%,#0f8a35)}
.page-rifa .lg.sel{background:radial-gradient(circle at 35% 30%,#ffd0ea,#ff3d9a 55%,#b3125f)}
.page-rifa .lg.res{background:radial-gradient(circle at 35% 30%,#fff3b0,#ffc400 55%,#c28a00)}
.page-rifa .lg.sold{background:radial-gradient(circle at 35% 30%,#ffc2bb,#ef2b2b 55%,#a30f0f)}
.page-rifa .live{background:linear-gradient(#10267a,#081a5c);color:#fff;border:3px solid #f6c445;border-radius:999px;padding:8px 18px;box-shadow:0 6px 16px rgba(0,15,80,.35)}
.page-rifa .live b{color:var(--yellow);font-family:'Fredoka';font-size:1.35rem}
.page-rifa .dot{box-shadow:0 0 0 0 rgba(34,197,94,.6)}
.tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;background:linear-gradient(#fff,#e7f0ff);border:4px solid #f6c445;border-radius:26px;padding:12px 18px;margin-bottom:16px;box-shadow:0 8px 22px rgba(0,15,80,.4)}
.tools .tool{display:flex;align-items:center;gap:10px;flex:1;min-width:300px;background:none;box-shadow:none;padding:0;border-radius:0}
.tools .tool label{margin:0;white-space:nowrap;font-family:'Fredoka';font-size:1.15rem;color:var(--navy)}
.tools .tool input{flex:1;min-width:70px;border:3px solid #c9d6f5;border-radius:999px;background:#fff;font-family:'Fredoka';font-weight:600;font-size:1.2rem;padding:8px 16px;box-shadow:inset 0 3px 6px rgba(0,0,0,.12)}
.t-ico{font-size:2rem;line-height:1}
.tool-sep{width:3px;align-self:stretch;background:linear-gradient(transparent,#2a55c4,transparent);border-radius:3px}
.gbtn{border:0;cursor:pointer;color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.05rem;padding:10px 22px;border-radius:999px;white-space:nowrap;border-bottom:4px solid rgba(0,0,0,.28);text-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .1s,filter .15s}
.gbtn.blue{background:linear-gradient(#3da2ff,#1257e0)}
.gbtn.purple{background:linear-gradient(#c05bff,#7b22c9)}
.gbtn:hover{filter:brightness(1.1);transform:translateY(-1px)}.gbtn:active{transform:translateY(2px);border-bottom-width:2px}
.page-rifa .pg{border:3px solid #f6c445;background:#fff}
.page-rifa .pg.on{border-color:#f6c445;background:linear-gradient(#ff8a00,#ff3d9a);color:#fff}
.page-rifa .pg-sel{border:3px solid #f6c445;border-radius:999px}
.page-rifa .grid{background:linear-gradient(#f6fbff,#e1efff);padding:16px;border-radius:26px;gap:8px;border:4px solid #fff;box-shadow:0 0 0 4px #f6c445,0 0 0 8px rgba(184,134,11,.45),0 16px 44px rgba(0,10,70,.55)}
.page-rifa .cell{position:relative;font-family:'Fredoka',sans-serif;font-weight:700;border-radius:14px;border:2px solid;border-bottom-width:4px;padding:10px 0;text-shadow:0 1px 0 rgba(255,255,255,.45);transition:transform .1s,filter .15s}
.page-rifa .cell::after{content:'';position:absolute;left:8%;right:8%;top:4px;height:38%;border-radius:10px;background:linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,0));pointer-events:none}
.page-rifa .cell.free{background:linear-gradient(#c7fbd0,#7be298 55%,#58cf7d);border-color:#2fa05a;color:#0b5a2a}
.page-rifa .cell.free:hover{transform:translateY(-2px) scale(1.08);filter:brightness(1.07)}
.page-rifa .cell.sel{background:linear-gradient(#ff9ad0,#ff3d9a 60%,#d81b78);border-color:#a80f5c;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);transform:scale(1.06);box-shadow:0 0 0 3px rgba(255,255,255,.9),0 6px 14px rgba(255,61,154,.6)}
.page-rifa .cell.res{background:linear-gradient(#fff2a0,#ffd21f 60%,#f2b300);border-color:#c28a00;color:#6b4a00}
.page-rifa .cell.sold{background:linear-gradient(#ff8c80,#ef2b2b 60%,#c71414);border-color:#8f0d0d;color:#fff;text-decoration:none;opacity:1;text-shadow:0 1px 2px rgba(0,0,0,.4)}
@media(max-width:700px){
  .tools .tool{min-width:100%;flex-wrap:wrap}.tool-sep{display:none}
  .tools .tool label{flex:1 1 60%}
  .page-rifa .legend{padding:8px 12px;font-size:.85rem;gap:8px 12px}
  .page-rifa .grid{padding:8px;gap:5px}
  .page-rifa .cell{border-radius:10px;padding:9px 0;border-bottom-width:3px}
}

.page-rifa .raffle-head-in{width:calc(100% - 2*clamp(16px,3.2vw,56px));max-width:1800px;margin:0 auto}

/* ====== Tarjeta de información de la rifa (estilo banner) ====== */
.page-rifa .raffle-head .raffle-head-in{position:relative;display:grid;grid-template-columns:minmax(220px,390px) 1fr;gap:clamp(18px,3vw,48px);align-items:center;
  padding:clamp(18px,2.4vw,34px) clamp(18px,3vw,44px);border-radius:40px;border:6px solid #1b57dc;
  background:radial-gradient(circle at 14% 50%,#dff3ff 0,rgba(223,243,255,0) 38%),linear-gradient(90deg,#fffdf8,#fff6e2);
  box-shadow:inset 0 0 0 4px #ffc83d,inset 0 0 0 6px rgba(255,255,255,.7),0 0 0 3px rgba(255,255,255,.25),0 16px 40px rgba(0,15,80,.5)}
.page-rifa .raffle-head .raffle-head-in.no-media{grid-template-columns:1fr}
.rh-media{position:relative;display:grid;place-items:center}
.rh-media::before{content:'';position:absolute;inset:-6% -10%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0,rgba(190,228,255,.7) 45%,rgba(190,228,255,0) 72%)}
.rh-media::after{content:'';position:absolute;top:-4%;right:-2%;width:64px;height:64px;z-index:2;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g stroke='%23ffb400' stroke-width='7' stroke-linecap='round'><path d='M12 36 L22 14'/><path d='M30 38 L38 10'/><path d='M46 42 L60 26'/></g></svg>") no-repeat center/contain}
.page-rifa .rh-media .raffle-img{position:relative;z-index:1;width:100%;border:0;border-radius:26px;box-shadow:0 12px 26px rgba(0,40,120,.3)}
.page-rifa .back{display:inline-block;background:#ece6ff;color:#6a1fb5;border-radius:999px;padding:6px 18px;font-family:'Fredoka',sans-serif;font-weight:600;margin-bottom:12px;text-decoration:none}
.page-rifa .raffle-head h1{font-size:clamp(2rem,4.4vw,3.6rem);color:#14216b;margin:0 0 8px;line-height:1.05;
  text-shadow:2px 0 #ffc83d,-2px 0 #ffc83d,0 2px #ffc83d,0 -2px #ffc83d,1.5px 1.5px #ffc83d,-1.5px -1.5px #ffc83d,1.5px -1.5px #ffc83d,-1.5px 1.5px #ffc83d,0 5px 6px rgba(20,33,107,.25)}
.page-rifa .raffle-head h1::after{content:'';display:block;height:7px;width:min(72%,620px);margin:10px 0 0 6%;border-radius:99px;background:linear-gradient(90deg,transparent,#ffb400 15%,#ffc83d 85%,transparent);transform:rotate(-.6deg)}
.rh-prize{display:inline-flex;align-items:center;gap:8px;margin:8px 0 14px;padding:4px 26px 4px 8px;background:linear-gradient(90deg,#fff1b8,#fff8dc);border-radius:999px;font-family:'Fredoka',sans-serif}
.rh-prize .trophy{font-size:2.6rem;line-height:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
.rh-prize b{font-size:clamp(1.8rem,3.2vw,2.6rem);color:#14216b}
.page-rifa .raffle-head .desc{margin:0 0 12px}
.page-rifa .chips{gap:12px}
.page-rifa .chip{display:inline-flex;align-items:center;gap:0;padding:0 22px 0 0;border-radius:999px;color:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(1rem,1.5vw,1.3rem);height:56px;border:3px solid rgba(255,255,255,.85);border-bottom-color:rgba(0,0,0,.2);box-shadow:0 6px 14px rgba(0,30,100,.3);position:relative;overflow:hidden}
.page-rifa .chip::after{content:'';position:absolute;left:0;right:0;top:0;height:46%;background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,0));pointer-events:none}
.page-rifa .chip i{font-style:normal;font-size:1.6rem;width:58px;height:100%;display:grid;place-items:center;border-right:2px solid rgba(255,255,255,.55);margin-right:14px}
.page-rifa .chip em{font-style:normal;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.page-rifa .chip.c1{background:linear-gradient(90deg,#ff7a1a,#ff3d7a)}
.page-rifa .chip.c2{background:linear-gradient(90deg,#8b2fd6,#5b1fb0)}
.page-rifa .chip.c3{background:linear-gradient(90deg,#2d8cff,#1b57dc)}
@media(max-width:760px){
  .page-rifa .raffle-head .raffle-head-in{grid-template-columns:1fr;border-radius:30px;border-width:5px}
  .rh-media{max-width:300px;margin:0 auto}
  .page-rifa .chip{height:50px;width:100%}
  .page-rifa .raffle-head h1::after{margin-left:0}
}
.page-rifa .chip{font-size:clamp(.95rem,1.2vw,1.15rem);padding-right:18px;height:54px}
.page-rifa .chip i{width:52px;margin-right:12px}

/* ====== Números: botones largos y brillantes (como el modelo) ====== */
.page-rifa .grid{gap:8px 9px;padding:14px 16px}
.page-rifa .cell{display:flex;align-items:center;justify-content:center;aspect-ratio:3.3/1;padding:0;border-radius:13px;border:2px solid;border-bottom-width:3px;
  font-family:'Fredoka','Nunito',sans-serif;font-weight:700;font-style:italic;font-size:clamp(1.05rem,1.9vw,1.75rem);letter-spacing:.5px;line-height:1;text-shadow:none}
.page-rifa .cell::after{left:10%;right:6%;top:3px;height:34%;border-radius:99px;background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.05))}
.page-rifa .cell.free{background:linear-gradient(#8bf59b 0,#44dc6c 55%,#22b950 100%);border-color:#17993f;color:#0b1b10;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.page-rifa .cell.sel{background:linear-gradient(#ff9fd3 0,#ff4aa0 55%,#e0207f 100%);border-color:#a80f5c;color:#fff;
  text-shadow:-1.5px 0 #7a0a42,1.5px 0 #7a0a42,0 -1.5px #7a0a42,0 1.5px #7a0a42,1px 1px #7a0a42,-1px -1px #7a0a42,1px -1px #7a0a42,-1px 1px #7a0a42}
.page-rifa .cell.res{background:linear-gradient(#fff3a6 0,#ffd51f 55%,#f0ae00 100%);border-color:#c28a00;color:#4a3300;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.page-rifa .cell.sold{background:linear-gradient(#ff6b60 0,#ec1c1c 55%,#c20f0f 100%);border-color:#8f0d0d;color:#fff;
  text-shadow:-1.5px 0 #4a0505,1.5px 0 #4a0505,0 -1.5px #4a0505,0 1.5px #4a0505,1px 1px #4a0505,-1px -1px #4a0505,1px -1px #4a0505,-1px 1px #4a0505}
@media(max-width:1000px){.page-rifa .cell{aspect-ratio:2.6/1}}
@media(max-width:700px){
  .page-rifa .grid{grid-template-columns:repeat(5,1fr)!important;gap:7px;padding:10px}
  .page-rifa .cell{aspect-ratio:2.2/1;font-size:1.25rem;border-radius:11px}
}
.page-rifa .grid.d3 .cell,.page-rifa .grid.d4 .cell,.page-rifa .grid.d5 .cell{font-size:clamp(1rem,1.7vw,1.55rem)}
@media(max-width:700px){.page-rifa .grid.d3 .cell,.page-rifa .grid.d4 .cell,.page-rifa .grid.d5 .cell{font-size:1.05rem}}

/* ¿Cómo participar? */
.como-title{display:block;max-width:760px;margin:0 auto 18px}
.como-title img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.csteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:10px}
.cstep{--c1:#ff7a00;--c2:#ffd9a0;--bg:#fff8ec;position:relative;text-align:center;padding:46px 18px 22px;border-radius:26px;border:3px solid var(--c1);
  background:linear-gradient(#fff,var(--bg));box-shadow:0 10px 26px color-mix(in srgb,var(--c1) 30%,transparent)}
.cstep.k2{--c1:#ff3d9a;--bg:#fff0f7}.cstep.k3{--c1:#2d7bff;--bg:#eef5ff}.cstep.k4{--c1:#7b2cbf;--bg:#f6efff}
.cnum{position:absolute;top:-22px;left:-10px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:'Fredoka';font-weight:700;font-size:2rem;background:var(--c1);border:4px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.cico{position:absolute;top:-26px;right:16px;font-size:3.2rem;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25))}
.cstep h3{display:inline-block;margin:14px 0 10px;padding:8px 20px;border-radius:999px;color:#fff;font-size:1.15rem;background:var(--c1);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.cstep p{margin:0;font-weight:600;color:#26306b}
.cnote{display:flex;align-items:center;gap:14px;max-width:780px;margin:26px auto 0;padding:14px 24px;border-radius:22px;background:linear-gradient(#fff6d6,#ffeeb8);border:3px solid #ffd76a;box-shadow:0 8px 20px rgba(255,180,0,.25)}
.cnote span{font-size:2.4rem}.cnote p{margin:0;font-weight:700;color:#14216b}
.como-title{display:block;max-width:900px;margin:0 auto 30px}
.como-title img{display:block;width:100%;height:auto;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to bottom,#000 90%,transparent),linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,#000 90%,transparent),linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);mask-composite:intersect}