/* ============================================================
   AGADIRYOU PREMIUM — Pages Interactive CSS
   ============================================================ */

/* ── TIMELINE ─────────────────────────────────────────────── */
.ay-timeline{position:relative;padding:0}
.ay-timeline-line{
  position:absolute;left:28px;top:40px;bottom:40px;
  width:2px;background:linear-gradient(to bottom,var(--gold),rgba(201,162,39,.1));
  border-radius:2px;
}
@media(min-width:700px){
  .ay-timeline-line{left:50%;transform:translateX(-50%)}
}
.ay-timeline-steps{display:flex;flex-direction:column;gap:0;position:relative;z-index:1}
.ay-timeline-step{
  display:grid;grid-template-columns:56px 1fr;gap:20px;
  padding-bottom:56px;position:relative;align-items:start;
}
@media(min-width:700px){
  .ay-timeline-step{
    grid-template-columns:1fr 56px 1fr;
    text-align:right;gap:32px;
  }
  .ay-timeline-step:nth-child(even){
    direction:rtl;text-align:right;
  }
  .ay-timeline-step:nth-child(even) .ay-tl-content{
    direction:ltr;text-align:left;
  }
  .ay-timeline-step:nth-child(odd) .ay-tl-content{
    direction:ltr;text-align:left;
  }
  .ay-timeline-step:nth-child(odd) .ay-tl-empty{display:block}
  .ay-timeline-step:nth-child(even) .ay-tl-empty{display:block}
}
.ay-tl-empty{display:none}
@media(min-width:700px){.ay-tl-empty{display:block}}

.ay-tl-node{
  width:56px;height:56px;flex-shrink:0;
  border-radius:50%;
  background:var(--card);
  border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:900;color:var(--text);
  box-shadow:var(--shadow);
  position:relative;z-index:2;
  transition:all .4s var(--ease);
  cursor:default;
}
.ay-tl-node--active{
  background:var(--gold);border-color:var(--gold);color:#fff;
  box-shadow:0 0 0 6px rgba(201,162,39,.15),var(--shadow-md);
  transform:scale(1.08);
}
.ay-tl-node svg{
  width:22px;height:22px;stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}
.ay-tl-content{}
.ay-tl-step-num{
  font-size:9px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:5px;
  display:flex;align-items:center;gap:6px;
}
.ay-tl-step-num::before{
  content:'';width:16px;height:1.5px;
  background:var(--gold);border-radius:1px;flex-shrink:0;
}
.ay-tl-title{
  font-size:20px;font-weight:800;letter-spacing:-.03em;
  color:var(--text);margin:0 0 8px;
}
.ay-tl-desc{font-size:14px;color:var(--muted);line-height:1.7;margin:0 0 14px}
.ay-tl-tags{display:flex;flex-wrap:wrap;gap:6px}
.ay-tl-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:var(--r-pill);
  font-size:11px;font-weight:600;
  background:var(--gold-light);color:#92400e;
  border:1px solid var(--gold-border);
}
.ay-tl-tag svg{
  width:11px;height:11px;stroke:currentColor;fill:none;
  stroke-width:2.5;stroke-linecap:round;flex-shrink:0;
}

/* ── HORIZONTAL TIMELINE (process bar) ───────────────────── */
.ay-process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-bottom:0}
@media(max-width:700px){.ay-process{grid-template-columns:1fr 1fr;gap:0}}
@media(max-width:400px){.ay-process{grid-template-columns:1fr}}
.ay-process-line{
  position:absolute;top:36px;left:12.5%;right:12.5%;
  height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-dk));
  border-radius:1px;z-index:0;
}
@media(max-width:700px){.ay-process-line{display:none}}
.ay-process-step{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:0 16px;position:relative;z-index:1;
  cursor:default;
}
.ay-process-num{
  width:72px;height:72px;border-radius:50%;
  background:var(--card);border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;box-shadow:var(--shadow);
  transition:all .35s var(--ease);
  position:relative;
}
.ay-process-step:hover .ay-process-num,
.ay-process-step.active .ay-process-num{
  background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 0 8px rgba(201,162,39,.12),var(--shadow-md);
  transform:scale(1.06);
}
.ay-process-num svg{
  width:26px;height:26px;stroke:var(--gold);fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .35s;
}
.ay-process-step:hover .ay-process-num svg,
.ay-process-step.active .ay-process-num svg{stroke:#fff}
.ay-process-num-badge{
  position:absolute;top:-4px;right:-4px;
  width:22px;height:22px;border-radius:50%;
  background:var(--sidebar);color:#fff;
  font-size:10px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--card);
}
.ay-process-title{font-size:14px;font-weight:800;color:var(--text);margin-bottom:5px}
.ay-process-desc{font-size:12px;color:var(--muted);line-height:1.65;max-width:160px;margin-inline:auto;margin-top:4px}
.ay-process-detail{
  max-height:0;overflow:hidden;
  transition:max-height .4s var(--ease),opacity .3s;
  opacity:0;width:100%;
}
.ay-process-step:hover .ay-process-detail,
.ay-process-step.active .ay-process-detail{
  max-height:120px;opacity:1;
}
.ay-process-detail-inner{
  margin-top:10px;padding:10px 14px;
  background:var(--gold-light);border:1px solid var(--gold-border);
  border-radius:var(--r-md);font-size:11px;color:#92400e;line-height:1.6;
}

/* ── HERO PAGE (inner pages) ─────────────────────────────── */
.ay-page-hero-dark{
  background:var(--sidebar);
  padding:56px 0 48px;
  position:relative;overflow:hidden;
}
.ay-page-hero-dark::before{
  content:'';position:absolute;
  top:-50%;right:-10%;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.06) 0%,transparent 65%);
  pointer-events:none;
}
.ay-page-hero-dark .kicker{color:var(--gold)}
.ay-page-hero-dark .kicker::before{background:var(--gold)}
.ay-page-hero-dark .sec-title{color:#fff}
.ay-page-hero-dark .sec-desc{color:rgba(255,255,255,.55)}

/* ── REASONS GRID ─────────────────────────────────────────── */
.ay-reasons-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
@media(min-width:900px){.ay-reasons-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.ay-reasons-grid{grid-template-columns:1fr}}
.ay-reason-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:24px 22px;
  box-shadow:var(--shadow);
  transition:all .3s var(--ease);
  position:relative;overflow:hidden;cursor:default;
}
.ay-reason-card::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:3px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.ay-reason-card:hover{
  box-shadow:var(--shadow-md);transform:translateY(-4px);
  border-color:var(--gold-border);
}
.ay-reason-card:hover::before{transform:scaleX(1)}
.ay-reason-num{
  font-size:11px;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px;
  display:flex;align-items:center;gap:6px;
}
.ay-reason-num::after{
  content:'';flex:1;height:1px;background:var(--border);
}
.ay-reason-icon{
  width:40px;height:40px;border-radius:10px;
  background:var(--bg);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
  transition:background .3s,border-color .3s;
}
.ay-reason-card:hover .ay-reason-icon{
  background:var(--gold-light);border-color:var(--gold-border);
}
.ay-reason-icon svg{
  width:18px;height:18px;stroke:var(--gold);fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}
.ay-reason-title{font-size:15px;font-weight:800;color:var(--text);margin-bottom:7px;line-height:1.2}
.ay-reason-desc{font-size:12px;color:var(--muted);line-height:1.65;margin:0}

/* ── ASSISTANCE PAGE ─────────────────────────────────────── */
.ay-assist-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:20px;
}
@media(min-width:900px){.ay-assist-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:500px){.ay-assist-grid{grid-template-columns:1fr}}
.ay-assist-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:28px 24px;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:14px;
  transition:all .3s var(--ease);cursor:default;
}
.ay-assist-card:hover{
  box-shadow:var(--shadow-md);transform:translateY(-3px);
  border-color:var(--gold-border);
}
.ay-assist-icon{
  width:48px;height:48px;border-radius:14px;
  background:var(--gold-light);border:1px solid var(--gold-border);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ay-assist-icon svg{
  width:22px;height:22px;stroke:var(--gold);fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}
.ay-assist-title{font-size:16px;font-weight:800;color:var(--text);margin:0}
.ay-assist-desc{font-size:13px;color:var(--muted);line-height:1.7;margin:0}
.ay-assist-badge{
  margin-top:auto;display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:var(--r-pill);
  font-size:10px;font-weight:700;
  background:#d1fae5;color:#065f46;border:1px solid #a7f3d0;
  align-self:flex-start;
}
.ay-assist-badge svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.5;flex-shrink:0}

/* ── 24H HERO BLOCK ──────────────────────────────────────── */
.ay-24h-hero{
  background:var(--sidebar);border-radius:var(--r-lg);
  padding:48px;position:relative;overflow:hidden;
  text-align:center;
}
.ay-24h-hero::before{
  content:'24H';
  position:absolute;right:-20px;top:50%;transform:translateY(-50%);
  font-size:180px;font-weight:900;color:rgba(255,255,255,.03);
  line-height:1;pointer-events:none;letter-spacing:-.05em;
}
.ay-24h-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(201,162,39,.15);border:1px solid rgba(201,162,39,.3);
  border-radius:var(--r-pill);padding:8px 20px;
  font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);margin-bottom:20px;
}
.ay-24h-badge-dot{
  width:8px;height:8px;border-radius:50%;background:var(--gold);
  animation:pulse 2s infinite;flex-shrink:0;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.ay-24h-hero h2{color:#fff;font-size:clamp(2rem,5vw,3.5rem);margin-bottom:14px}
.ay-24h-hero p{color:rgba(255,255,255,.55);font-size:16px;max-width:520px;margin:0 auto 28px}
.ay-24h-contacts{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
}

/* ── INCIDENT TYPES ──────────────────────────────────────── */
.ay-incidents{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:700px){.ay-incidents{grid-template-columns:repeat(3,1fr)}}
.ay-incident{
  display:flex;align-items:flex-start;gap:10px;
  padding:14px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-md);font-size:13px;color:var(--text);
  transition:border-color .2s,background .2s;cursor:default;
}
.ay-incident:hover{border-color:var(--gold-border);background:var(--gold-light)}
.ay-incident-icon{
  width:28px;height:28px;flex-shrink:0;border-radius:7px;
  background:var(--bg);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.ay-incident-icon svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round}
.ay-incident:hover .ay-incident-icon{background:rgba(201,162,39,.15)}
.ay-incident-text{font-size:12px;font-weight:600;line-height:1.4}

/* ── DEPOSIT/INSURANCE PAGE ──────────────────────────────── */
.ay-deposit-hero{
  background:linear-gradient(135deg,var(--sidebar) 0%,#263548 100%);
  border-radius:var(--r-lg);padding:40px 44px;
  position:relative;overflow:hidden;
}
.ay-deposit-hero::after{
  content:'';position:absolute;top:-80px;right:-80px;
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.08),transparent 70%);
  pointer-events:none;
}
.ay-insurance-table{
  width:100%;border-collapse:collapse;font-size:13px;
}
.ay-insurance-table thead tr{background:var(--sidebar)}
.ay-insurance-table thead th{
  padding:12px 16px;color:#fff;font-size:10px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;text-align:left;
}
.ay-insurance-table tbody td{
  padding:13px 16px;border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.ay-insurance-table tbody tr:last-child td{border-bottom:none}
.ay-insurance-table tbody tr:hover td{background:#fafbfd}
.ay-ins-type{font-weight:700;color:var(--text)}
.ay-ins-price{font-weight:900;color:var(--gold-dk);font-size:15px;white-space:nowrap}
.ay-ins-covers{font-size:12px;color:var(--muted)}
.ay-ins-check{color:var(--success);font-size:14px}
.ay-ins-cross{color:#ccc;font-size:14px}
.ay-ins-recommended{
  background:var(--gold-light);
  border-left:3px solid var(--gold);
}
.ay-ins-recommended .ay-ins-type{color:var(--gold-dk)}

.ay-scenario-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:680px){.ay-scenario-grid{grid-template-columns:1fr}}
.ay-scenario-card{
  border-radius:var(--r-lg);padding:22px;text-align:center;
}
.ay-scenario-card--bad{background:#fef2f2;border:1.5px solid #fca5a5}
.ay-scenario-card--good{background:#f0fdf4;border:1.5px solid #86efac}
.ay-scenario-card--best{background:var(--gold-light);border:1.5px solid var(--gold-border)}
.ay-scenario-card .sc-icon{font-size:32px;margin-bottom:12px}
.ay-scenario-card h4{font-size:14px;font-weight:800;margin-bottom:8px}
.ay-scenario-card p{font-size:12px;line-height:1.6;margin:0}
.ay-scenario-card--bad h4{color:#991b1b}
.ay-scenario-card--bad p{color:#7f1d1d}
.ay-scenario-card--good h4{color:#065f46}
.ay-scenario-card--good p{color:#064e3b}
.ay-scenario-card--best h4{color:#92400e}
.ay-scenario-card--best p{color:#78350f}

/* ── DESTINATIONS ─────────────────────────────────────────── */
.ay-dest-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
@media(max-width:900px){.ay-dest-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.ay-dest-grid{grid-template-columns:1fr}}
.ay-dest-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow);
  transition:all .3s var(--ease);cursor:default;
}
.ay-dest-card:hover{
  box-shadow:var(--shadow-md);transform:translateY(-4px);
  border-color:var(--gold-border);
}
.ay-dest-card-img{
  aspect-ratio:16/10;background:linear-gradient(135deg,var(--sidebar),#263548);
  display:flex;align-items:center;justify-content:center;
  font-size:48px;position:relative;overflow:hidden;
}
.ay-dest-card-img svg{
  width:48px;height:48px;stroke:rgba(255,255,255,.2);fill:none;stroke-width:1;
}
.ay-dest-card-img-overlay{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(to top,rgba(15,23,42,.8),transparent);
  padding:14px;
}
.ay-dest-distance{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:700;color:var(--gold);
  background:rgba(201,162,39,.15);border:1px solid rgba(201,162,39,.3);
  border-radius:var(--r-pill);padding:3px 9px;
}
.ay-dest-card-body{padding:18px 20px}
.ay-dest-name{font-size:18px;font-weight:800;letter-spacing:-.03em;color:var(--text);margin-bottom:5px}
.ay-dest-sub{font-size:12px;color:var(--gold);font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:5px}
.ay-dest-sub svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.ay-dest-desc{font-size:12px;color:var(--muted);line-height:1.65;margin:0}
.ay-dest-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.ay-dest-tag{
  padding:3px 8px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-pill);font-size:10px;font-weight:600;color:var(--muted);
}

/* ── FAQ ─────────────────────────────────────────────────── */
.ay-faq{display:flex;flex-direction:column;gap:8px}
.ay-faq-item{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow);transition:border-color .25s;
}
.ay-faq-item.open{border-color:var(--gold-border)}
.ay-faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;cursor:pointer;
  font-size:15px;font-weight:700;color:var(--text);
  user-select:none;background:none;border:none;
  width:100%;text-align:left;font-family:var(--font);
}
.ay-faq-q:hover{color:var(--gold)}
.ay-faq-item.open .ay-faq-q{color:var(--gold-dk)}
.ay-faq-q-icon{
  width:30px;height:30px;flex-shrink:0;border-radius:50%;
  background:var(--bg);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  transition:all .25s;
}
.ay-faq-q-icon svg{
  width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:2;transition:transform .3s;
}
.ay-faq-item.open .ay-faq-q-icon{background:var(--gold-light);border-color:var(--gold-border)}
.ay-faq-item.open .ay-faq-q-icon svg{transform:rotate(45deg);stroke:var(--gold-dk)}
.ay-faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .4s cubic-bezier(.4,0,.2,1);
}
.ay-faq-item.open .ay-faq-a{max-height:600px}
.ay-faq-a-inner{
  padding:0 22px 20px;
  font-size:14px;color:var(--muted);line-height:1.75;
  border-top:1px solid var(--border);padding-top:16px;
}
.ay-faq-a-inner p{margin-bottom:.8em}
.ay-faq-a-inner ul{margin:0 0 .8em 1.2em;list-style:disc}
.ay-faq-a-inner ul li{margin-bottom:.3em}

/* ── GIFT CARD ───────────────────────────────────────────── */
.ay-gift-card{
  background:linear-gradient(135deg,var(--gold-dk),var(--gold),#f5c842);
  border-radius:var(--r-lg);padding:32px 36px;
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.ay-gift-card::before{
  content:'GRATIS';
  position:absolute;right:-10px;top:-10px;
  font-size:100px;font-weight:900;
  color:rgba(255,255,255,.07);letter-spacing:-.05em;
  pointer-events:none;line-height:1;
}
.ay-gift-card-left h3{color:#000;font-size:22px;font-weight:900;margin-bottom:6px}
.ay-gift-card-left p{color:rgba(0,0,0,.6);font-size:14px;margin:0}
.ay-gift-items{display:flex;flex-direction:column;gap:8px;min-width:200px}
.ay-gift-item{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.25);border-radius:var(--r-sm);
  padding:10px 14px;backdrop-filter:blur(8px);
}
.ay-gift-item svg{width:16px;height:16px;stroke:#000;fill:none;stroke-width:2;flex-shrink:0}
.ay-gift-item span{font-size:13px;font-weight:700;color:#000}

/* ── ABOUT SPLIT SECTION ─────────────────────────────────── */
.ay-about-stat{
  display:flex;flex-direction:column;gap:4px;padding:18px 20px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow);transition:all .25s;
}
.ay-about-stat:hover{border-color:var(--gold-border);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.ay-about-stat-val{font-size:32px;font-weight:900;letter-spacing:-.04em;color:var(--text);line-height:1}
.ay-about-stat-val span{color:var(--gold)}
.ay-about-stat-lbl{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* ── HIGHLIGHT CARD ──────────────────────────────────────── */
.ay-hl-card{
  background:var(--sidebar);border-radius:var(--r-lg);
  padding:32px;display:flex;align-items:flex-start;gap:20px;
  border-left:4px solid var(--gold);
}
.ay-hl-card-icon{
  width:44px;height:44px;flex-shrink:0;
  background:rgba(201,162,39,.15);border-radius:12px;
  display:flex;align-items:center;justify-content:center;
}
.ay-hl-card-icon svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.75;stroke-linecap:round}
.ay-hl-card h3{color:#fff;font-size:16px;font-weight:800;margin-bottom:6px}
.ay-hl-card p{color:rgba(255,255,255,.55);font-size:13px;line-height:1.7;margin:0}

/* ── INTERACTIVE HOVER EFFECTS ───────────────────────────── */
.ay-hover-lift{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.ay-hover-lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}

.ay-reveal{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.ay-reveal.visible{opacity:1;transform:none}
.ay-reveal-d1{transition-delay:.1s}
.ay-reveal-d2{transition-delay:.2s}
.ay-reveal-d3{transition-delay:.3s}
.ay-reveal-d4{transition-delay:.4s}

/* ── MOBILE OVERFLOW FIXES ────────────────────────────────── */
.ay-timeline,.ay-timeline-steps{overflow:hidden}
.ay-process{overflow:hidden}
.ay-dest-grid,.ay-assist-grid,.ay-reasons-grid,.ay-incidents,.ay-scenario-grid{
  overflow:hidden;
}
@media(max-width:700px){
  .ay-timeline-step{grid-template-columns:40px 1fr;gap:16px}
  .ay-timeline-line{left:20px}
  .ay-tl-node{width:40px;height:40px}
  .ay-process{grid-template-columns:1fr 1fr!important}
  .ay-process-line{display:none}
  .ay-process-step{padding:0 8px}
  .ay-process-num{width:56px;height:56px}
  .ay-dest-grid{grid-template-columns:1fr!important}
  .ay-reasons-grid{grid-template-columns:1fr!important}
  .ay-scenario-grid{grid-template-columns:1fr!important}
  .ay-assist-grid{grid-template-columns:1fr!important}
  .ay-incidents{grid-template-columns:1fr!important}
  .ay-24h-hero{padding:28px 20px}
  .ay-gift-card{flex-direction:column;gap:16px}
  .ay-faq-q{font-size:13px;padding:14px 16px}
  [style*="grid-template-columns:repeat(3,1fr)"]{
    grid-template-columns:repeat(2,1fr)!important;
  }
}
@media(max-width:480px){
  .ay-process{grid-template-columns:1fr!important}
  .ay-dest-grid,.ay-reasons-grid{grid-template-columns:1fr!important}
  [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important;
  }
}

/* ── INSURANCE TABLE MOBILE ───────────────────────────────── */
@media(max-width:700px){
  .ay-insurance-table{font-size:11px}
  .ay-insurance-table th,.ay-insurance-table td{padding:9px 10px}
  .ay-insurance-table thead th:nth-child(n+4),.ay-insurance-table td:nth-child(n+4){
    display:none;
  }
}

/* ── FAQ SIDEBAR MOBILE ───────────────────────────────────── */
@media(max-width:900px){
  .c>[style*="grid-template-columns:2fr 1fr"]{
    grid-template-columns:1fr!important;
  }
  .c>[style*="grid-template-columns:2fr 1fr"]>div:last-child{
    position:static!important;
  }
}

/* ============================================================
   PAGES MOBILE FIXES v4
   ============================================================ */

/* All ay-reveal always visible — safety net */
.ay-reveal,
.anim { opacity: 1 !important; transform: none !important; }

/* Reasons grid — 1 col on mobile */
@media (max-width: 640px) {
  .ay-reasons-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}
@media (max-width: 900px) {
  .ay-reasons-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Assist grid — 1 col on small mobile */
@media (max-width: 480px) {
  .ay-assist-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  .ay-assist-grid { grid-template-columns: 1fr 1fr !important; }
}

/* Dest grid */
@media (max-width: 600px) {
  .ay-dest-grid { grid-template-columns: 1fr !important; }
}

/* Incidents grid */
@media (max-width: 480px) {
  .ay-incidents { grid-template-columns: 1fr !important; }
}

/* Scenario grid */
@media (max-width: 640px) {
  .ay-scenario-grid { grid-template-columns: 1fr !important; }
}

/* Timeline steps — ensure content visible */
.ay-tl-node, .ay-tl-content { opacity: 1 !important; transform: none !important; }

/* Process steps — all visible */
.ay-process-step, .ay-process-num, .ay-process-detail-inner {
  opacity: 1 !important;
  transform: none !important;
}
/* Always show process detail text on mobile */
@media (max-width: 760px) {
  .ay-process-detail {
    max-height: 200px !important;
    opacity: 1 !important;
  }
}

/* FAQ — bigger tap targets on mobile */
@media (max-width: 640px) {
  .ay-faq-q {
    padding: 16px 18px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  .ay-faq-a-inner {
    padding: 0 18px 18px !important;
    font-size: 13px !important;
  }
}

/* Gift card mobile */
@media (max-width: 560px) {
  .ay-gift-card { flex-direction: column !important; padding: 24px 20px !important; }
  .ay-gift-items { width: 100% !important; }
}

/* Process bar section on mobile */
@media (max-width: 640px) {
  .ay-process { padding: 0 !important; }
  .ay-process-step { padding: 0 8px 0 8px !important; }
}

/* Dark feat cards on mobile — ensure text wraps */
@media (max-width: 640px) {
  .feat-card { min-width: 0 !important; }
  .feat-desc { word-break: break-word !important; }
}

/* ============================================================
   EXTRAS SELECTOR
   ============================================================ */
.ay-extras-section{margin-bottom:14px}
.ay-extras-label{
  font-size:10px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.4);
  margin-bottom:10px;display:flex;align-items:center;gap:6px;
}
.ay-extras-label svg{width:13px;height:13px;stroke:var(--gold);fill:none;stroke-width:2;flex-shrink:0}
.ay-extras-grid{display:flex;flex-direction:column;gap:7px}
.ay-extra-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:9px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  cursor:pointer;transition:all .2s;
}
.ay-extra-item:hover{background:rgba(255,255,255,.08);border-color:rgba(201,162,39,.3)}
.ay-extra-item input[type=checkbox]{display:none}
.ay-extra-item.selected{background:rgba(201,162,39,.1);border-color:rgba(201,162,39,.4)}
.ay-extra-icon{
  width:28px;height:28px;border-radius:7px;
  background:rgba(255,255,255,.07);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.ay-extra-item.selected .ay-extra-icon{background:rgba(201,162,39,.2)}
.ay-extra-icon svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:1.75}
.ay-extra-body{flex:1;min-width:0}
.ay-extra-name{display:block;font-size:12px;font-weight:600;color:rgba(255,255,255,.8)}
.ay-extra-price{display:block;font-size:11px;color:rgba(255,255,255,.4);margin-top:1px}
.ay-extra-check-icon{
  width:20px;height:20px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.ay-extra-item.selected .ay-extra-check-icon{background:var(--gold);border-color:var(--gold)}
.ay-extra-check-icon svg{width:10px;height:10px;stroke:#000;fill:none;stroke-width:3;opacity:0;transition:opacity .2s}
.ay-extra-item.selected .ay-extra-check-icon svg{opacity:1}
.ay-extras-total{
  display:flex;justify-content:space-between;
  padding:10px 13px;background:rgba(201,162,39,.08);
  border:1px solid rgba(201,162,39,.2);border-radius:var(--r-sm);
  margin-top:8px;font-size:12px;color:rgba(255,255,255,.6);
}
.ay-extras-total strong{color:var(--gold);font-weight:800}

/* Season badge */
.ay-season-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:var(--r-pill);
  font-size:10px;font-weight:700;margin-left:8px;
  vertical-align:middle;
}
.ay-season-badge svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}

/* WhatsApp quote button */
.ay-wa-quote-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px;background:rgba(37,211,102,.12);
  border:1px solid rgba(37,211,102,.3);border-radius:var(--r-sm);
  font-size:12px;font-weight:700;color:#25D366;
  text-decoration:none;transition:all .2s;margin-top:8px;
}
.ay-wa-quote-btn:hover{background:rgba(37,211,102,.2);color:#1db954}
.ay-wa-quote-btn svg{width:14px;height:14px;fill:currentColor;stroke:none;flex-shrink:0}

/* Payment section */
.ay-payment-section{
  margin-bottom:14px;padding:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-sm);
}
.ay-payment-section h4{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:12px}
.ay-payment-tabs{display:flex;gap:6px;margin-bottom:12px}
.ay-pay-tab{flex:1;padding:8px;border:1px solid rgba(255,255,255,.12);border-radius:7px;background:transparent;color:rgba(255,255,255,.5);font-size:11px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .2s;text-align:center}
.ay-pay-tab.active{border-color:var(--gold);color:var(--gold);background:rgba(201,162,39,.1)}
.ay-pay-panel{display:none}.ay-pay-panel.active{display:block}
#ay-stripe-element{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:12px}

/* Customer portal */
.ay-portal-login{
  display:flex;justify-content:center;padding:20px 0 60px;
}
.ay-portal-login-box{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:36px;
  box-shadow:var(--shadow-lg);width:100%;max-width:420px;
  text-align:center;
}
.ay-portal-login-icon{
  width:56px;height:56px;border-radius:50%;
  background:var(--gold-light);border:2px solid var(--gold-border);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;color:var(--gold);
}
.ay-portal-login-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.75}
.ay-portal-login-box h2{font-size:20px;font-weight:800;margin-bottom:8px}
.ay-portal-login-box p{color:var(--muted);font-size:13px;margin-bottom:24px;line-height:1.6}

.ay-portal-dash{}
.ay-portal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.ay-portal-greeting{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:3px}
.ay-portal-email{font-size:18px;font-weight:800;color:var(--text)}
.ay-portal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
@media(max-width:480px){.ay-portal-stats{grid-template-columns:1fr}}
.ay-portal-stat{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:16px;text-align:center;box-shadow:var(--shadow)}
.ay-portal-stat span{display:block;font-size:24px;font-weight:900;color:var(--gold-dk);letter-spacing:-.04em;margin-bottom:4px}
.ay-portal-stat p{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:600;margin:0}
.ay-portal-booking{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:18px 20px;
  margin-bottom:10px;box-shadow:var(--shadow);
  transition:box-shadow .2s;
}
.ay-portal-booking:hover{box-shadow:var(--shadow-md)}
.ay-portal-booking-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ay-portal-booking-id{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-right:8px}
.ay-portal-vehicle{font-size:15px;font-weight:800;color:var(--text)}
.ay-portal-booking-info{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:13px;color:var(--muted)}
.ay-portal-booking-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ============================================================
   TARGETED MOBILE FIXES — v5 patch
   ============================================================ */

/* ── 1. Timeline wrapper — always full width, clean ────────── */
.ay-timeline-wrap {
  max-width: 680px;
  margin: 0 auto;
}
.ay-timeline-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding-bottom: 48px;
  position: relative;
  align-items: start;
}
/* Remove the desktop alternating layout that breaks on mobile */
@media (min-width: 900px) {
  .ay-timeline-wrap {
    max-width: 720px;
  }
}

/* ── 2. WhatsApp FAB — remove text label ────────────────────── */
@media (max-width: 959px) {
  .ay-bar-cta-lbl { display: none !important; }
  .ay-bar-cta { padding-bottom: 8px; }
}

/* ── 3. Home search bar — vertical stack on mobile only ──────── */
@media (max-width: 640px) {
  .ay-search-bar-inner {
    flex-direction: column !important;
    border-radius: var(--r-lg) !important;
    gap: 0 !important;
  }
  .ay-search-field {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    width: 100% !important;
    padding: 14px 16px !important;
  }
  .ay-search-field:last-of-type {
    border-bottom: 1px solid var(--border) !important;
  }
  .ay-search-submit {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
  }
}

/* ── 4. Por qué elegirnos — 1 col on mobile ─────────────────── */
@media (max-width: 640px) {
  .ay-reasons-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .ay-reason-card {
    padding: 20px !important;
  }
}

/* ── 5. Asistencia 24h — fix "1" line and canales grid ──────── */
/* Remove the process line on mobile */
@media (max-width: 640px) {
  .ay-steps-3 [style*="position:absolute"] {
    display: none !important;
  }
  /* The numbered circles step — remove the line crossing the number */
  [style*="top:40px"] {
    display: none !important;
  }
}

/* Canales de contacto — 1 col on mobile */
@media (max-width: 640px) {
  .ay-assist-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .ay-assist-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
}

/* ── 6. Seguro y depósito — Insurance table responsive ──────── */
@media (max-width: 700px) {
  /* Hide less important columns */
  .ay-insurance-table thead th:nth-child(n+4),
  .ay-insurance-table tbody td:nth-child(n+4) {
    display: none !important;
  }
  .ay-insurance-table thead th,
  .ay-insurance-table tbody td {
    padding: 10px 8px !important;
    font-size: 12px !important;
  }
  .ay-ins-type { font-size: 12px !important; }
  .ay-ins-price { font-size: 13px !important; }
}

/* Redesign: insurance as cards on mobile */
@media (max-width: 560px) {
  /* Hide table entirely, show cards */
  .ay-insurance-table-wrap { display: none !important; }
  .ay-insurance-cards-mobile { display: flex !important; }
}
.ay-insurance-cards-mobile {
  display: none;
  flex-direction: column;
  gap: 12px;
}
.ay-ins-card-mobile {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
.ay-ins-card-mobile.recommended {
  border-color: var(--gold-border);
  background: var(--gold-light);
}
.ay-ins-card-mobile h4 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ay-ins-card-mobile .price {
  font-size: 22px;
  font-weight: 900;
  color: var(--gold-dk);
  margin-bottom: 10px;
}
.ay-ins-card-mobile .features {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ay-ins-card-mobile .feat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.ay-ins-card-mobile .feat svg {
  width: 14px; height: 14px; flex-shrink: 0;
  fill: none; stroke-width: 2.5; stroke-linecap: round;
}
.ay-ins-card-mobile .feat.yes { color: var(--text); }
.ay-ins-card-mobile .feat.yes svg { stroke: var(--success); }
.ay-ins-card-mobile .feat.no svg { stroke: #ccc; }

/* Fix the gold highlight card on deposit page mobile */
@media (max-width: 560px) {
  [style*="display:flex;align-items:center;gap:16px;flex-wrap:wrap"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .ay-deposit-hero {
    padding: 24px 20px !important;
  }
  .ay-deposit-hero h2 { font-size: 1.5rem !important; }
}

/* ── 7. General overflow prevention ─────────────────────────── */
@media (max-width: 640px) {
  .sec { overflow-x: hidden !important; }
  .ay-page-hero-dark { overflow: hidden !important; }
  .c { overflow: hidden !important; }
}

/* ── Assistance steps connector line — hide on mobile ──────── */
@media (max-width: 640px) {
  .ay-steps-connector-line { display: none !important; }
  .ay-steps-3 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .ay-steps-3 > div {
    text-align: left !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .ay-steps-3 > div > div:first-child {
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
}

/* ── Timeline clean — no alternating sides ─────────────────── */
.ay-timeline-step {
  grid-template-columns: 56px 1fr !important;
  text-align: left !important;
  direction: ltr !important;
}
.ay-timeline-step:nth-child(even) {
  direction: ltr !important;
  text-align: left !important;
}
.ay-timeline-step:nth-child(even) .ay-tl-content {
  direction: ltr !important;
  text-align: left !important;
}
.ay-tl-empty { display: none !important; }
.ay-timeline-line {
  left: 28px !important;
  transform: none !important;
}

/* ── Todo riesgo process steps on deposit page ──────────────── */
@media (max-width: 640px) {
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 380px) {
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}
/* Sidebar dark hero in todo riesgo */
@media (max-width: 760px) {
  [style*="grid-template-columns:1fr 1fr"][style*="align-items:center"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   LA DIFERENCIA — Premium section
   ============================================================ */
.ay-diferencia-section { background: var(--sidebar); overflow: hidden; }
.ay-diferencia-section .kicker { color: var(--gold); }
.ay-diferencia-section .kicker::before { background: var(--gold); }
.ay-diferencia-section .sec-title { color: #fff; }
.ay-diferencia-section .sec-desc  { color: rgba(255,255,255,.55); max-width: 480px; }

.ay-diferencia-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.ay-diferencia-ctas { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }

.ay-diferencia-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
@media (max-width: 900px) { .ay-diferencia-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .ay-diferencia-grid { grid-template-columns: 1fr; gap: 10px; } }

.ay-diferencia-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  transition: background .25s, border-color .25s, transform .25s;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.ay-diferencia-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--dc, var(--gold));
  border-radius: 2px 2px 0 0;
  transition: height .25s;
}
.ay-diferencia-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
  transform: translateY(-3px);
}
.ay-diferencia-card:hover::before { height: 3px; }

.ay-diferencia-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  flex-shrink: 0;
  transition: background .25s;
}
.ay-diferencia-card:hover .ay-diferencia-card-icon {
  background: rgba(255,255,255,.1);
}
.ay-diferencia-card-icon svg {
  width: 20px; height: 20px;
  stroke: var(--dc, var(--gold));
  fill: none; stroke-width: 1.75; stroke-linecap: round;
}
.ay-diferencia-card-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -.02em;
}
.ay-diferencia-card-desc {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  line-height: 1.7;
  margin: 0;
}

/* Image strip */
.ay-diferencia-image-strip {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  height: 180px;
}
.ay-diferencia-image-strip img {
  width: 100%; height: 100%; object-fit: cover;
}
.ay-diferencia-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15,23,42,.85) 0%, rgba(15,23,42,.3) 60%, transparent 100%);
  display: flex;
  align-items: center;
  padding: 0 32px;
}
.ay-diferencia-image-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ay-diferencia-image-text span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gold);
}
.ay-diferencia-image-text strong {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.03em;
}
@media (max-width: 540px) {
  .ay-diferencia-header { flex-direction: column; align-items: flex-start; }
  .ay-diferencia-image-strip { height: 120px; }
  .ay-diferencia-image-text strong { font-size: 15px; }
}

/* ============================================================
   LOYALTY PROGRAM — Premium Visual System
   ============================================================ */

/* Hero card */
.ay-loyalty-wrap { display:flex; flex-direction:column; gap:24px; }
.ay-loyalty-hero {
  background: var(--sidebar);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.07);
  position: relative;
  overflow: hidden;
}
.ay-loyalty-hero::before {
  content: '★';
  position: absolute;
  right: -10px;
  bottom: -20px;
  font-size: 140px;
  color: rgba(255,255,255,.02);
  pointer-events: none;
  line-height: 1;
}
@media (max-width: 600px) {
  .ay-loyalty-hero { grid-template-columns: 1fr; gap: 20px; padding: 22px; }
}
.ay-loyalty-tier-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.ay-loyalty-tier-icon { font-size: 32px; line-height: 1; }
.ay-loyalty-tier-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: rgba(255,255,255,.4); display: block; margin-bottom: 2px;
}
.ay-loyalty-tier-name {
  font-size: 18px; font-weight: 900; color: var(--tier-color, var(--gold));
  letter-spacing: -.02em;
}
.ay-loyalty-pts-display { margin-bottom: 12px; }
.ay-loyalty-pts-num {
  font-size: 52px; font-weight: 900; color: #fff;
  letter-spacing: -.06em; line-height: 1; display: block;
}
.ay-loyalty-pts-lbl {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.4);
  text-transform: uppercase; letter-spacing: .1em;
}
.ay-loyalty-bonus-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(16,185,129,.15); border: 1px solid rgba(16,185,129,.3);
  color: #6ee7b7; border-radius: var(--r-pill);
  padding: 5px 12px; font-size: 11px; font-weight: 700;
}
.ay-loyalty-bonus-badge svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; }
.ay-loyalty-total { margin-bottom: 16px; }
.ay-loyalty-total-num {
  font-size: 28px; font-weight: 900; color: rgba(255,255,255,.6);
  letter-spacing: -.04em; display: block;
}
.ay-loyalty-total-lbl {
  font-size: 10px; font-weight: 600; color: rgba(255,255,255,.35);
  text-transform: uppercase; letter-spacing: .08em;
}
.ay-loyalty-progress-info {
  display: flex; justify-content: space-between;
  font-size: 10px; color: rgba(255,255,255,.4); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}
.ay-loyalty-progress-bar {
  height: 6px; background: rgba(255,255,255,.1);
  border-radius: 3px; overflow: hidden;
}
.ay-loyalty-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tier-color, var(--gold)), #fff8);
  border-radius: 3px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.ay-loyalty-gold-badge {
  background: rgba(201,162,39,.15); border: 1px solid rgba(201,162,39,.3);
  color: var(--gold); border-radius: var(--r-pill); padding: 7px 14px;
  font-size: 12px; font-weight: 800; display: inline-block;
}

/* Section titles */
.ay-loyalty-section-title {
  font-size: 13px; font-weight: 800; color: var(--text);
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 16px; display: flex; align-items: center; gap: 7px;
}
.ay-loyalty-section-title svg { width:16px; height:16px; stroke:var(--gold); fill:none; stroke-width:2; flex-shrink:0; }

/* Earn section */
.ay-loyalty-earn-section, .ay-loyalty-rewards-section,
.ay-loyalty-tiers-section, .ay-loyalty-history,
.ay-loyalty-active-rewards {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow);
}
.ay-loyalty-earn-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
}
@media (max-width: 640px) {
  .ay-loyalty-earn-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

.ay-loyalty-earn-card {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-top: 3px solid var(--ec, var(--gold));
  border-radius: var(--r-lg);
  padding: 20px 16px;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.ay-loyalty-earn-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ay-loyalty-earn-pts {
  font-size: 36px; font-weight: 900; color: var(--ec, var(--gold));
  line-height: 1; margin-bottom: 4px; letter-spacing: -.04em;
}
.ay-loyalty-earn-pts small { font-size: 14px; font-weight: 600; }
.ay-loyalty-earn-label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.ay-loyalty-earn-type { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.ay-loyalty-earn-examples { font-size: 11px; color: var(--muted); }

/* Rewards catalog */
.ay-loyalty-rewards-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
}
@media (max-width: 540px) { .ay-loyalty-rewards-grid { grid-template-columns: 1fr; } }
.ay-loyalty-reward-card {
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.ay-loyalty-reward-card::before {
  content: '';
  position: absolute; top:0; left:0; right:0;
  height: 3px;
  background: var(--rc, var(--gold));
  transition: height .25s;
}
.ay-loyalty-reward--ready {
  border-color: var(--rc, var(--gold));
  background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 4%, white), white);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--rc) 12%, transparent);
}
.ay-loyalty-reward--ready::before { height: 4px; }
.ay-loyalty-reward-icon { font-size: 28px; line-height: 1; }
.ay-loyalty-reward-title { font-size: 15px; font-weight: 800; color: var(--text); margin: 0; }
.ay-loyalty-reward-desc { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0; flex: 1; }
.ay-loyalty-reward-cost {
  font-size: 13px; font-weight: 800; color: var(--rc, var(--gold));
  background: color-mix(in srgb, var(--rc) 10%, transparent);
  padding: 4px 10px; border-radius: var(--r-pill); display: inline-block; align-self: flex-start;
}
.ay-loyalty-reward-progress { margin-top: 4px; }
.ay-loyalty-reward-prog-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 4px; }
.ay-loyalty-reward-prog-fill { height: 100%; background: var(--rc, var(--gold)); border-radius: 2px; }
.ay-loyalty-reward-missing { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ay-loyalty-redeem-btn {
  padding: 10px 14px; border-radius: var(--r-md); font-size: 12px; font-weight: 700;
  cursor: pointer; border: none; font-family: var(--font); transition: all .2s;
  width: 100%; text-align: center;
}
.ay-loyalty-redeem-btn--active {
  background: var(--rc, var(--gold)); color: #fff;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--rc) 30%, transparent);
}
.ay-loyalty-redeem-btn--active:hover { opacity: .9; transform: translateY(-1px); }
.ay-loyalty-redeem-btn--disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; }

/* Tiers table */
.ay-loyalty-tiers-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
}
@media (max-width: 600px) { .ay-loyalty-tiers-grid { grid-template-columns: 1fr; } }
.ay-loyalty-tier-card {
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 16px;
  text-align: center;
  position: relative;
  transition: all .25s;
}
.ay-loyalty-tier-card--active {
  border-color: var(--tc, var(--gold));
  background: linear-gradient(to bottom, color-mix(in srgb, var(--tc) 6%, white), white);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--tc) 15%, transparent);
}
.ay-loyalty-tier-current-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--tc, var(--gold)); color: #fff;
  font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.ay-loyalty-tier-icon { font-size: 36px; margin-bottom: 8px; line-height: 1; }
.ay-loyalty-tier-card-name { font-size: 18px; font-weight: 900; color: var(--tc, var(--text)); margin-bottom: 4px; }
.ay-loyalty-tier-range { font-size: 10px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 14px; }
.ay-loyalty-tier-perks { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.ay-loyalty-tier-perk {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 11px; color: var(--muted); line-height: 1.4;
}
.ay-loyalty-tier-perk svg { width:11px; height:11px; stroke:var(--success); fill:none; stroke-width:3; flex-shrink:0; margin-top:2px; }

/* History */
.ay-loyalty-history-list { display: flex; flex-direction: column; gap: 8px; }
.ay-loyalty-history-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--bg); border-radius: var(--r-sm);
}
.ay-loyalty-history-icon {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
}
.ay-loyalty-history-icon.earn { background: #d1fae5; color: #065f46; }
.ay-loyalty-history-icon.redeem { background: #fef3c7; color: #92400e; }
.ay-loyalty-history-info { flex: 1; min-width: 0; }
.ay-loyalty-history-desc { display: block; font-size: 12px; font-weight: 600; color: var(--text); }
.ay-loyalty-history-date { font-size: 10px; color: var(--muted); }
.ay-loyalty-history-pts { font-size: 14px; font-weight: 900; flex-shrink: 0; }
.ay-loyalty-history-pts.earn { color: var(--success); }
.ay-loyalty-history-pts.redeem { color: var(--gold-dk); }

/* Active rewards */
.ay-loyalty-active-reward {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px; background: var(--gold-light); border: 1px solid var(--gold-border);
  border-radius: var(--r-md); margin-bottom: 10px;
}
.ay-loyalty-active-reward:last-child { margin-bottom: 0; }
.ay-loyalty-code-badge {
  background: var(--sidebar); color: var(--gold); font-size: 16px; font-weight: 900;
  letter-spacing: .2em; padding: 8px 16px; border-radius: var(--r-sm);
  font-family: 'Courier New', monospace; flex-shrink: 0;
}

@media (max-width: 800px) {
  
}

.ay-loyalty-home-reward:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(201,162,39,.2);
}

/* ── Portal Profile Card ─────────────────────────────────── */
.ay-portal-profile-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.ay-portal-profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  flex-wrap: wrap;
}
.ay-portal-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-dk), var(--gold));
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900; color: #000;
  flex-shrink: 0;
}
.ay-portal-profile-name {
  font-size: 18px; font-weight: 800; color: var(--text);
  margin: 0 0 3px;
}
.ay-portal-profile-email {
  font-size: 12px; color: var(--muted); margin: 0;
}
.ay-portal-profile-header > .btn { margin-left: auto; }
@media (max-width: 480px) {
  .ay-portal-profile-header > .btn { margin-left: 0; width: 100%; justify-content: center; }
}

.ay-profile-form {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.4,0,.2,1);
  border-top: 0px solid var(--border);
}
.ay-profile-form--open {
  max-height: 600px;
  border-top: 1px solid var(--border);
}
.ay-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 20px 24px 0;
}
@media (max-width: 540px) { .ay-profile-grid { grid-template-columns: 1fr; } }
.ay-profile-form > .btn { margin: 0 24px 20px; width: calc(100% - 48px); }

/* Portal Day Pass cards */
@media (max-width: 640px) {
  [style*="grid-template-columns:repeat(3,1fr)"].ay-dp-portal-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Portal Stats — 4 stat grid ────────────────────────────── */
.ay-portal-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
@media (max-width: 640px) { .ay-portal-stats { grid-template-columns: repeat(2,1fr); } }
.ay-portal-stat--dp .ay-portal-stat-icon,
.ay-portal-stat--dp span { color: #ec4899 !important; }
.ay-portal-stat--pts span { color: var(--gold-dk) !important; }

/* ── Portal Day Pass Row ─────────────────────────────────────── */
.ay-portal-dp-list { display: flex; flex-direction: column; gap: 8px; }
.ay-portal-dp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--dpc, var(--gold));
  border-radius: var(--r-md);
  transition: background .15s;
}
.ay-portal-dp-row:hover { background: var(--bg); }
.ay-portal-dp-row-icon { font-size: 24px; flex-shrink: 0; }
.ay-portal-dp-row-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.ay-portal-dp-row-info strong { font-size: 13px; font-weight: 700; color: var(--text); }
.ay-portal-dp-row-info span { font-size: 11px; color: var(--muted); }
.ay-portal-dp-row-right {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: flex-end;
}
.ay-portal-dp-row-pts {
  font-size: 10px; font-weight: 800;
  background: rgba(236,72,153,.08);
  border: 1px solid rgba(236,72,153,.2);
  color: #be185d;
  padding: 2px 7px; border-radius: 99px;
}
@media (max-width: 480px) {
  .ay-portal-dp-row { flex-direction: column; align-items: flex-start; }
  .ay-portal-dp-row-right { justify-content: flex-start; }
}

/* ── Portal Contact Block ────────────────────────────────────── */
.ay-portal-contact-block {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.ay-portal-wa-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #128c7e, #25d366);
  border-radius: var(--r-lg);
  text-decoration: none;
  margin-bottom: 16px;
  transition: all .25s;
  box-shadow: 0 4px 20px rgba(37,211,102,.3);
}
.ay-portal-wa-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,211,102,.4); }
.ay-portal-wa-icon { width: 36px; height: 36px; fill: #fff; flex-shrink: 0; }
.ay-portal-wa-label { display: block; font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 2px; letter-spacing: -.02em; }
.ay-portal-wa-sub { display: block; font-size: 11px; color: rgba(255,255,255,.75); }
.ay-portal-wa-arr { width: 18px; height: 18px; color: rgba(255,255,255,.6); margin-left: auto; flex-shrink: 0; }

.ay-portal-contact-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 480px) { .ay-portal-contact-cards { grid-template-columns: 1fr; } }
.ay-portal-contact-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: all .2s;
}
a.ay-portal-contact-card:hover { border-color: var(--gold-border); background: var(--gold-light); }
.ay-portal-contact-card-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--gold-dk);
}
.ay-portal-contact-card-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.ay-portal-contact-card-label { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 2px; }
.ay-portal-contact-card-value { display: block; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ay-portal-contact-footer {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  font-size: 11px; color: var(--muted);
  padding: 12px 0;
}
.ay-portal-contact-footer span { display: flex; align-items: center; }

@media (max-width: 360px) {
  /* Only collapse to vertical on very tiny screens */
  
}

/* ── Loyalty earn grid — 4 cols desktop, 2 cols mobile ──────── */
/* earn-grid responsive — see rule below */

.ay-section-divider {
  background: var(--sidebar);
  padding: 0;
  overflow: hidden;
}
.ay-section-divider-inner {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.ay-section-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,.4), transparent);
}
.ay-section-divider-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.ay-section-divider-icon::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: rgba(201,162,39,.08);
  border: 1px solid rgba(201,162,39,.2);
}
.ay-section-divider-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--gold);
  fill: rgba(201,162,39,.2);
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  
}
@media (max-width: 320px) {
  
}

.ay-loyalty-home-section,
section[aria-label="Programa de fidelización"] {
  overflow: hidden !important;
}

.ay-loyalty-home-reward > div {
  min-width: 0 !important;
  overflow: hidden;
}
.ay-loyalty-home-reward > span:last-child {
  flex-shrink: 0;
  white-space: nowrap;
}
/* All sections — prevent horizontal overflow */
section {
  overflow-x: hidden;
}

/* ============================================================
   LOYALTY HOME SECTION — Mobile-first, overflow-safe
   ============================================================ */

/* Section container */
.ay-loyalty-home-section {
  overflow: hidden !important;
}

/* Two-column grid — stacks to 1 col below 800px */
.ay-loyalty-home-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}
@media (max-width: 800px) {
  .ay-loyalty-home-wrap {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Left/right columns: never overflow */
.ay-loyalty-home-left,
.ay-loyalty-home-right {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* Points grid — 2x2 on all screens, responsive */
.ay-loyalty-home-pts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
}

/* Individual point card */
.ay-loyalty-home-pt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 14px 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-md);
  text-align: center;
  min-width: 0;
  overflow: hidden;
}

/* CTAs — always side by side */
.ay-loyalty-home-ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.ay-loyalty-home-ctas .btn {
  justify-content: center;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  padding-left: 8px;
  padding-right: 8px;
}

/* Rewards list */
.ay-loyalty-home-rewards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  overflow: hidden;
}

/* Individual reward row */
.ay-loyalty-home-reward {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-md);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.ay-loyalty-home-reward:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(201,162,39,.2);
}
.ay-loyalty-home-reward-icon {
  font-size: 20px;
  flex-shrink: 0;
}

/* Text block inside reward — key: min-width:0 prevents flex overflow */
.ay-loyalty-reward-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.ay-loyalty-reward-text strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ay-loyalty-reward-text span {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Points badge — never shrink */
.ay-loyalty-reward-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  background: rgba(201,162,39,.1);
  border: 1px solid rgba(201,162,39,.25);
  padding: 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
}

/* ── Section divider ─────────────────────────────────────── */
.ay-section-divider {
  background: var(--sidebar);
  overflow: hidden;
}
.ay-section-divider-inner {
  display: flex;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.ay-section-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,.4), transparent);
}
.ay-section-divider-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.ay-section-divider-icon::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: rgba(201,162,39,.08);
  border: 1px solid rgba(201,162,39,.2);
}
.ay-section-divider-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--gold);
  fill: rgba(201,162,39,.2);
  position: relative;
  z-index: 1;
}

/* ── Global overflow protection ──────────────────────────── */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}
section {
  overflow-x: hidden;
  max-width: 100%;
}

/* ============================================================
   BLOG / GUIDE SINGLE — Layout & Day Pass Banners
   ============================================================ */

/* Container: 2-col desktop, 1-col mobile with proper padding */
.ay-guide-container {
  padding-top: 40px;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .ay-guide-container {
    grid-template-columns: 1fr;
    padding-top: 24px;
    padding-bottom: 48px;
  }
  .ay-guide-container > aside { display: none; }
}

/* Article content — ensure left/right padding on mobile */
.ay-guide-container article {
  min-width: 0;
  max-width: 100%;
}

/* ── Mid-article Day Pass Banner ─────────────────────────── */
.ay-guide-dp-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--sidebar);
  border: 1.5px solid rgba(255,255,255,.07);
  border-left: 4px solid var(--dpb-color, var(--gold));
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin: 36px 0;
  text-decoration: none;
  overflow: hidden;
  position: relative;
}
.ay-guide-dp-banner::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 120px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.02));
  pointer-events: none;
}
.ay-guide-dp-banner-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.ay-guide-dp-banner-emoji {
  font-size: 36px;
  flex-shrink: 0;
  line-height: 1;
}
.ay-guide-dp-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ay-guide-dp-banner-label {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--dpb-color, var(--gold));
  display: block;
}
.ay-guide-dp-banner-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  display: block;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ay-guide-dp-banner-sub {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ay-guide-dp-banner-pills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.ay-guide-dp-banner-pills span {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.5);
  white-space: nowrap;
}
.ay-guide-dp-banner-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.ay-guide-dp-banner-price {
  text-align: right;
  line-height: 1;
}
.ay-guide-dp-banner-price span {
  font-size: 22px;
  font-weight: 900;
  color: var(--dpb-color, var(--gold));
  letter-spacing: -.04em;
}
.ay-guide-dp-banner-price small {
  font-size: 10px;
  color: rgba(255,255,255,.4);
  font-weight: 500;
  display: block;
}
.ay-guide-dp-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: var(--dpb-color, var(--gold));
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #000;
  text-decoration: none;
  transition: opacity .2s, transform .2s;
  white-space: nowrap;
}
.ay-guide-dp-banner-btn svg { width:13px; height:13px; stroke:#000; stroke-width:2.5; }
.ay-guide-dp-banner-btn:hover { opacity: .9; transform: scale(1.02); }
.ay-guide-dp-banner-wa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #25D366;
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 12px;
  border: 1px solid rgba(37,211,102,.25);
  border-radius: 7px;
  background: rgba(37,211,102,.06);
}
.ay-guide-dp-banner-wa svg { width:13px; height:13px; fill:#25D366; }
@media (max-width: 600px) {
  .ay-guide-dp-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
  }
  .ay-guide-dp-banner-left { width: 100%; }
  .ay-guide-dp-banner-right {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ── End-of-article Day Pass CTA section ─────────────────── */
.ay-guide-dp-end {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 700px) {
  .ay-guide-dp-end { grid-template-columns: 1fr; gap: 28px; }
}
.ay-guide-dp-end-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ay-guide-dp-end-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid var(--dpe, var(--gold));
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background .2s;
  min-width: 0;
}
.ay-guide-dp-end-card:hover { background: rgba(255,255,255,.08); }
.ay-guide-dp-end-emoji { font-size: 22px; flex-shrink: 0; line-height: 1; }
.ay-guide-dp-end-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ay-guide-dp-end-info strong {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ay-guide-dp-end-info span {
  font-size: 11px;
  color: rgba(255,255,255,.45);
}
.ay-guide-dp-end-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  background: linear-gradient(135deg, #128c7e, #25d366);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: opacity .2s, transform .2s;
}
.ay-guide-dp-end-wa:hover { opacity: .9; transform: translateY(-1px); }

/* ============================================================
   BLOG — Car Rental Mid-Article Banner
   Full-width hero on mobile, premium on desktop
   ============================================================ */

.ay-guide-car-banner {
  position: relative;
  background: var(--sidebar);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 36px 0;
  border: 1px solid rgba(255,255,255,.06);
}
.ay-guide-car-banner-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 50%, rgba(201,162,39,.12) 0%, transparent 60%),
    radial-gradient(circle at 10% 80%, rgba(16,185,129,.06) 0%, transparent 50%);
  pointer-events: none;
}
.ay-guide-car-banner-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
}
.ay-guide-car-banner-left {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  flex: 1;
}
.ay-guide-car-banner-icon {
  width: 52px;
  height: 52px;
  background: rgba(201,162,39,.12);
  border: 1.5px solid rgba(201,162,39,.25);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ay-guide-car-banner-icon svg {
  width: 24px; height: 24px;
  stroke: var(--gold);
}
.ay-guide-car-banner-eyebrow {
  display: block;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--gold);
  margin-bottom: 3px;
}
.ay-guide-car-banner-title {
  display: block;
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.03em;
  margin-bottom: 4px;
}
.ay-guide-car-banner-sub {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,.5);
}
.ay-guide-car-banner-ctas {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ay-guide-car-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--gold);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
  color: #000;
  text-decoration: none;
  transition: all .2s;
  white-space: nowrap;
}
.ay-guide-car-banner-btn svg { width:13px; height:13px; stroke:#000; stroke-width:2.5; }
.ay-guide-car-banner-btn:hover { background: var(--gold-dk); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(201,162,39,.35); }
.ay-guide-car-banner-wa {
  width: 40px;
  height: 40px;
  background: #25D366;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all .2s;
  flex-shrink: 0;
}
.ay-guide-car-banner-wa:hover { background: #128c7e; transform: translateY(-1px); }
.ay-guide-car-banner-wa svg { width:18px; height:18px; stroke:none; fill:#fff; }

/* Mobile: full width hero */
@media (max-width: 640px) {
  .ay-guide-car-banner {
    margin-left: calc(-1 * var(--c-pad, 24px));
    margin-right: calc(-1 * var(--c-pad, 24px));
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .ay-guide-car-banner-content {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 20px;
    gap: 16px;
  }
  .ay-guide-car-banner-ctas {
    width: 100%;
  }
  .ay-guide-car-banner-btn {
    flex: 1;
    justify-content: center;
    padding: 12px 16px;
    font-size: 14px;
  }
  /* Day Pass banner also full-width on mobile */
  .ay-guide-dp-banner {
    margin-left: calc(-1 * var(--c-pad, 24px));
    margin-right: calc(-1 * var(--c-pad, 24px));
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-left: 4px solid var(--dpb-color, var(--gold));
  }
}

/* ============================================================
   ARTICLE BANNERS — Light theme (Day Pass + Car Rental)
   ============================================================ */

.ay-art-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  border-radius: var(--r-lg);
  padding: 20px 24px;
  margin: 32px 0;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
}
.ay-art-banner--dp {
  background: var(--ab-bg, #fef9ec);
  border: 1.5px solid color-mix(in srgb, var(--ab-color, #c9a227) 25%, transparent);
  border-left: 4px solid var(--ab-color, var(--gold));
}
.ay-art-banner--car {
  background: #f0fdf4;
  border: 1.5px solid rgba(16,185,129,.2);
  border-left: 4px solid #10b981;
}

/* Left side */
.ay-art-banner-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.ay-art-banner-emoji { font-size: 32px; flex-shrink: 0; line-height: 1; }
.ay-art-banner-icon-wrap {
  width: 48px; height: 48px;
  background: rgba(16,185,129,.12);
  border: 1.5px solid rgba(16,185,129,.25);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #065f46;
}
.ay-art-banner-icon-wrap svg { width:22px; height:22px; }
.ay-art-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ay-art-banner-eyebrow {
  font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .14em;
  color: #059669; /* default green; overridden inline for DP */
}
.ay-art-banner--dp .ay-art-banner-eyebrow { color: var(--ab-color, var(--gold)); }
.ay-art-banner-title {
  font-size: 15px; font-weight: 800; letter-spacing: -.02em;
  color: #065f46; /* default green; overridden inline for DP */
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ay-art-banner--dp .ay-art-banner-title { color: var(--ab-dark, var(--gold-dk)); }
.ay-art-banner-sub {
  font-size: 12px; color: #374151; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ay-art-banner-pills {
  display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px;
}
.ay-art-banner-pills span {
  font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 99px;
  background: color-mix(in srgb, var(--ab-color, #c9a227) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ab-color, #c9a227) 25%, transparent);
  color: var(--ab-dark, var(--gold-dk));
  white-space: nowrap;
}

/* Right side */
.ay-art-banner-right {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 8px; flex-shrink: 0;
}
.ay-art-banner-price {
  font-size: 22px; font-weight: 900; letter-spacing: -.04em; line-height: 1;
}
.ay-art-banner-price small {
  font-size: 10px; color: #6b7280; font-weight: 500; display: block; text-align: right;
}

/* Buttons */
.ay-art-banner-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 16px; border-radius: 9px;
  font-size: 13px; font-weight: 800;
  text-decoration: none;
  transition: filter .2s, transform .2s;
  white-space: nowrap;
}
.ay-art-banner-btn:hover { filter: brightness(.9); transform: translateY(-1px); }
/* Day Pass btn: colored background, black text */
/* Car btn: green background, white text */
.ay-art-banner-btn--car {
  background: #10b981 !important;
  color: #fff !important;
}
.ay-art-banner-btn--car svg { stroke: #fff !important; }
.ay-art-banner-btn--car:hover { filter: brightness(.9); color: #fff !important; }

.ay-art-banner-wa {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 700;
  color: #065f46; background: rgba(37,211,102,.1);
  border: 1px solid rgba(37,211,102,.3); text-decoration: none;
  transition: background .2s; white-space: nowrap;
}
.ay-art-banner-wa:hover { background: rgba(37,211,102,.2); color: #064e3b; }
.ay-art-banner-wa svg { fill: #25D366; }

/* Mobile: stack vertically, full width */
@media (max-width: 600px) {
  .ay-art-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 16px;
    border-radius: var(--r-md);
    margin: 24px 0;
  }
  .ay-art-banner-right {
    width: 100%; flex-direction: row;
    align-items: center; justify-content: space-between;
    gap: 8px;
  }
  .ay-art-banner-btn { flex: 1; justify-content: center; padding: 11px 14px; }
}

/* ── Article kicker — dark, clean, proper spacing ───────────── */
.ay-guide-kicker {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 99px;
  padding: 4px 12px;
  margin-bottom: 16px;
}

/* ══════════════════════════════════════════════════
   PORTAL — Day Pass cards (stacked rows)
═══════════════════════════════════════════════════ */
.ay-portal-dp-card-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--dpc, var(--gold));
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: background .15s, box-shadow .15s;
}
.ay-portal-dp-card-row:hover {
  background: var(--gold-light);
  box-shadow: 0 2px 12px rgba(201,162,39,.12);
}
.ay-portal-dp-card-row-icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
}
.ay-portal-dp-card-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ay-portal-dp-card-row-info h4 {
  font-size: 13px;
  font-weight: 800;
  color: var(--dpdk, var(--gold-dk));
  letter-spacing: -.01em;
}
.ay-portal-dp-card-row-info p {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.ay-portal-dp-card-row-info span {
  font-size: 10px;
  color: var(--muted);
}
.ay-portal-dp-card-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.ay-portal-dp-card-row-price {
  font-size: 18px;
  font-weight: 900;
  color: var(--dpdk, var(--gold-dk));
  letter-spacing: -.04em;
  line-height: 1;
}
.ay-portal-dp-card-row-price small {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
}
@media (max-width: 480px) {
  .ay-portal-dp-card-row { flex-wrap: wrap; }
  .ay-portal-dp-card-row-right { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}

/* ══════════════════════════════════════════════════
   PORTAL — Documents section
═══════════════════════════════════════════════════ */
.ay-portal-docs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
@media (max-width: 600px) { .ay-portal-docs-grid { grid-template-columns: 1fr; } }

.ay-portal-doc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color .15s;
}
.ay-portal-doc-card--rental { border-left: 3px solid var(--gold); }
.ay-portal-doc-card--insurance { border-left: 3px solid #7c3aed; }
.ay-portal-doc-card:hover { border-color: var(--gold-border); }

.ay-portal-doc-card-icon {
  width: 40px; height: 40px;
  background: var(--gold-light);
  border: 1.5px solid var(--gold-border);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ay-portal-doc-card--insurance .ay-portal-doc-card-icon {
  background: rgba(124,58,237,.06);
  border-color: rgba(124,58,237,.2);
}
.ay-portal-doc-card-icon svg {
  width: 18px; height: 18px;
  stroke: var(--gold-dk); fill: none; stroke-width: 1.75;
}
.ay-portal-doc-card--insurance .ay-portal-doc-card-icon svg { stroke: #7c3aed; }

.ay-portal-doc-card-info { flex: 1; min-width: 0; }
.ay-portal-doc-card-info strong { font-size: 12px; font-weight: 700; color: var(--text); display: block; }
.ay-portal-doc-card-info span { font-size: 10px; color: var(--muted); display: block; margin-top: 2px; }

/* Download button */
.ay-portal-doc-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  background: var(--gold);
  border: none;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  color: #000;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
  flex-shrink: 0;
}
.ay-portal-doc-btn:hover { background: var(--gold-dk); transform: translateY(-1px); }
.ay-portal-doc-btn--purple {
  background: #7c3aed;
  color: #fff;
}
.ay-portal-doc-btn--purple:hover { background: #6d28d9; }
.ay-portal-doc-btn--invoice {
  background: var(--sidebar);
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.08);
}
.ay-portal-doc-btn--invoice:hover { background: #334155; color: #fff; }

/* Invoice rows */
.ay-portal-invoices-list { display: flex; flex-direction: column; gap: 8px; }
.ay-portal-invoice-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.ay-portal-invoice-row:hover { background: var(--bg); }
.ay-portal-invoice-row-left {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.ay-portal-invoice-ref {
  font-size: 11px; font-weight: 800; color: var(--text);
  letter-spacing: .02em;
}
.ay-portal-invoice-vehicle {
  font-size: 12px; color: var(--text); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ay-portal-invoice-dates { font-size: 10px; color: var(--muted); }
.ay-portal-invoice-row-right {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.ay-portal-invoice-amount {
  font-size: 14px; font-weight: 800; color: var(--gold-dk);
}
.ay-portal-invoice-status {
  font-size: 9px; font-weight: 700; padding: 2px 8px;
  border-radius: 99px; border: 1px solid; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .06em;
}
@media (max-width: 500px) {
  .ay-portal-invoice-row { flex-direction: column; align-items: flex-start; }
  .ay-portal-invoice-row-right { width: 100%; justify-content: space-between; }
}

/* ── Portal contracts — stacked 1 per row ─────────────────── */
.ay-portal-docs-grid--stack {
  grid-template-columns: 1fr !important;
}