/* ============ TOKENS (marca CuponOnline.es) ============ */
  :root{
    --purple-900:#2c0866;
    --purple-700:#5e0fc4;
    --purple-500:#8033e8;
    --purple-300:#b088f5;
    --purple-100:#f2ecfd;

    --pink-700:#c81355;
    --pink-500:#f82c62;
    --pink-300:#ff7a9c;
    --pink-100:#ffeaf1;

    --amber-400:#ffb703;
    --amber-300:#ffcb47;

    --ink-900:#211a2e;
    --ink-600:#5a5268;
    --ink-400:#948da3;
    --line:#e9e4f1;
    --paper:#faf8fc;
    --white:#ffffff;

    --radius-s:6px;
    --radius-m:12px;
    --radius-l:20px;

    --font-display: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-code: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    --shadow-card: 0 1px 2px rgba(44,8,102,.06), 0 8px 24px -12px rgba(44,8,102,.20);
    --shadow-lift: 0 4px 10px rgba(44,8,102,.10), 0 16px 32px -14px rgba(44,8,102,.28);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink-900);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}
  .wrap{
    max-width:1080px;
    margin:0 auto;
    padding:0 24px;
  }
  :focus-visible{
    outline:3px solid var(--amber-400);
    outline-offset:2px;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
    html{scroll-behavior:auto;}
  }

  /* ============ TOPBAR ============ */
  .topbar{
    background:var(--white);
    border-bottom:1px solid var(--line);
  }
  .topbar-inner{
    max-width:1080px;
    margin:0 auto;
    padding:12px 24px;
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
  }
  .brand{ display:flex; align-items:center; }
  .brand img{ height:100px; width:auto; }
  .topbar-note{
    font-size:12.5px;
    color:var(--ink-400);
  }

  /* ============ HERO ============ */
  .hero{
    position:relative;
    background-image:
      linear-gradient(120deg, rgba(44,8,102,.86), rgba(200,19,85,.72)),
      url('/assets/header-bg.webp');
    background-size:cover;
    background-position:center;
    color:var(--white);
    padding:52px 0 96px;
    overflow:hidden;
  }
  .hero-inner{
    max-width:1080px;
    margin:0 auto;
    padding:0 24px;
    position:relative;
    z-index:1;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--purple-100);
    margin-bottom:18px;
  }
  .eyebrow .dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--amber-400);
    display:inline-block;
  }
  .store-head{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:14px;
    flex-wrap:wrap;
  }
  .store-logo{
    background:var(--white);
    border-radius:var(--radius-m);
    padding:10px 16px;
    box-shadow:var(--shadow-lift);
  }
  .store-logo img{
    height:40px;
    width:auto;
    display:block;
  }
  .hero h1{
    font-family:var(--font-display);
    font-weight:800;
    letter-spacing:-.03em;
    font-size:clamp(32px, 5vw, 48px);
    line-height:1.04;
    margin:0;
  }
  .hero p.lead{
    font-size:17px;
    color:var(--purple-100);
    max-width:560px;
    margin:14px 0 28px;
  }
  .hero-stats{
    display:flex;
    flex-wrap:wrap;
    gap:28px;
  }
  .hero-stat b{
    display:block;
    font-family:var(--font-display);
    font-size:28px;
    font-weight:800;
    letter-spacing:-.02em;
  }
  .hero-stat span{
    font-size:13px;
    color:var(--purple-100);
  }

  /* ============ FEATURED CODE STRIP (ticket) ============ */
  .featured-wrap{
    max-width:1080px;
    margin:0 auto;
    padding:0 24px;
    transform:translateY(-38px);
  }
  .ticket{
    background:linear-gradient(120deg, var(--purple-700), var(--pink-700));
    border-radius:var(--radius-l);
    box-shadow:var(--shadow-lift);
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    position:relative;
    overflow:hidden;
  }
  .ticket-main{
    padding:26px 28px;
    color:var(--white);
  }
  .ticket-tag{
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.9;
    margin-bottom:6px;
    color:var(--amber-300);
  }
  .ticket-title{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(19px,2.6vw,24px);
    letter-spacing:-.01em;
    margin:0 0 4px;
  }
  .ticket-sub{
    font-size:13.5px;
    opacity:.92;
  }
  .ticket-stub{
    position:relative;
    padding:22px 30px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    border-left:2px dashed rgba(255,255,255,.55);
    min-width:210px;
  }
  .ticket-stub::before,
  .ticket-stub::after{
    content:"";
    position:absolute;
    left:-13px;
    width:26px;height:26px;
    border-radius:50%;
    background:var(--paper);
  }
  .ticket-stub::before{ top:-13px; }
  .ticket-stub::after{ bottom:-13px; }
  .code-chip{
    font-family:var(--font-code);
    font-weight:700;
    font-size:18px;
    letter-spacing:.05em;
    background:rgba(255,255,255,.16);
    border:1.5px dashed rgba(255,255,255,.7);
    color:var(--white);
    padding:9px 18px;
    border-radius:var(--radius-s);
    white-space:nowrap;
    cursor:pointer;
    user-select:none;
  }
  .reveal-btn{
    font-family:var(--font-body);
    font-size:13px;
    font-weight:700;
    color:var(--purple-700);
    background:var(--amber-400);
    border:none;
    padding:9px 18px;
    border-radius:999px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .reveal-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 14px -6px rgba(0,0,0,.35); }
  .reveal-btn svg{ width:14px; height:14px; }
  .reveal-btn[data-revealed="true"]{ background:var(--white); color:var(--purple-700); }

  @media (max-width:560px){
    .ticket{grid-template-columns:1fr;}
    .ticket-stub{border-left:none; border-top:2px dashed rgba(255,255,255,.55); flex-direction:row; justify-content:space-between; min-width:0;}
    .ticket-stub::before{ top:-13px; left:calc(50% - 13px); }
    .ticket-stub::after{ display:none; }
  }

  /* ============ SECTION HEADINGS ============ */
  .section{ padding:56px 0 8px; }
  .section-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    margin-bottom:24px;
    flex-wrap:wrap;
  }
  .section-head h2{
    font-family:var(--font-display);
    font-size:24px;
    font-weight:800;
    letter-spacing:-.01em;
    margin:0;
    color:var(--purple-900);
  }
  .section-head p{
    font-size:14px;
    color:var(--ink-400);
    margin:0;
  }

  /* ============ COUPON LIST ============ */
  .coupon-list{
    display:flex;
    flex-direction:column;
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    overflow:hidden;
    background:var(--white);
  }
  .coupon-row{
    display:flex;
    align-items:center;
    gap:16px;
    padding:16px 20px;
    border-bottom:1px solid var(--line);
  }
  .coupon-row:last-child{ border-bottom:none; }
  .coupon-icon{
    flex:0 0 auto;
    width:38px;height:38px;
    border-radius:10px;
    background:var(--purple-100);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--purple-700);
    font-family:var(--font-display);
    font-weight:800;
    font-size:12.5px;
  }
  .coupon-body{ flex:1 1 auto; min-width:0; }
  .coupon-body h4{
    margin:0 0 2px;
    font-size:14.5px;
    font-weight:700;
    letter-spacing:-.005em;
  }
  .coupon-body .valid{ font-size:12.5px; color:var(--ink-400); }
  .coupon-right{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .code-mask{
    font-family:var(--font-code);
    font-size:13px;
    font-weight:700;
    letter-spacing:.14em;
    color:var(--ink-400);
    border:1.5px dashed var(--line);
    background:var(--paper);
    padding:7px 12px;
    border-radius:var(--radius-s);
    min-width:96px;
    text-align:center;
  }
  .btn-reveal{
    font-size:13px;
    font-weight:700;
    color:var(--white);
    background:var(--purple-700);
    border:none;
    padding:9px 16px;
    border-radius:var(--radius-s);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
    text-decoration:none;
    white-space:nowrap;
    transition:background .12s ease, transform .12s ease;
  }
  .btn-reveal:hover{ background:var(--purple-900); transform:translateY(-1px); }
  .btn-reveal svg{ width:13px; height:13px; }
  .btn-reveal[data-revealed="true"]{ background:var(--pink-500); }

  @media (max-width:640px){
    .coupon-row{ flex-wrap:wrap; }
    .coupon-right{ margin-left:54px; width:100%; }
  }

  /* ============ CONDITIONS / FOOTER ============ */
  .conditions{
    margin-top:56px;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:22px 24px;
    font-size:13px;
    color:var(--ink-600);
  }
  .conditions h5{
    margin:0 0 8px;
    font-size:13px;
    font-weight:700;
    color:var(--ink-900);
    text-transform:uppercase;
    letter-spacing:.05em;
  }
  .conditions p{ margin:0 0 8px; }
  .conditions p:last-child{ margin-bottom:0; }

  footer{
    margin-top:48px;
    border-top:1px solid var(--line);
    padding:28px 0 40px;
  }
  .footer-inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-size:12.5px;
    color:var(--ink-400);
  }
  .footer-inner a{ color:var(--purple-700); text-decoration:none; font-weight:600; }



  /* ============ CATALOG PAGE ============ */
  body > h1{
    font-family:var(--font-display);
    font-size:28px;
    font-weight:800;
    color:var(--purple-900);
    max-width:1080px;
    margin:32px auto 20px;
    padding:0 24px;
  }
  .store-grid{
    max-width:1080px;
    margin:0 auto 60px;
    padding:0 24px;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
    gap:14px;
  }
  .store-tile{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:18px 14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--ink-900);
    text-align:center;
    box-shadow:var(--shadow-card);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .store-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
  .store-tile img{ height:36px; width:auto; max-width:100%; object-fit:contain; }
  .store-tile span{ font-size:13px; font-weight:700; }

  /* ============ CONTENIDO EDITORIAL ============ */
  .editorial{
    max-width:760px;
    padding-bottom:0;
  }
  .editorial p{
    font-size:15.5px;
    line-height:1.65;
    color:var(--ink-600);
    margin:0 0 16px;
  }
  .editorial h2{
    font-family:var(--font-display);
    font-size:20px;
    font-weight:800;
    color:var(--purple-900);
    margin:28px 0 12px;
  }
  .editorial h2:first-child{ margin-top:0; }

  .editorial a{ color:var(--purple-700); font-weight:700; text-decoration:underline; }

  /* ============ HOME: HERO-TICKET ============ */
  .home-hero{
    position:relative;
    background-image:
      linear-gradient(120deg, rgba(44,8,102,.90), rgba(200,19,85,.78)),
      url('/assets/header-bg.webp');
    background-size:cover;
    background-position:center;
    color:var(--white);
    padding:60px 0 0;
    overflow:hidden;
  }
  .home-hero-inner{
    max-width:1080px;
    margin:0 auto;
    padding:0 24px 46px;
    text-align:center;
  }
  .home-hero h1{
    font-family:var(--font-display);
    font-weight:800;
    letter-spacing:-.03em;
    font-size:clamp(30px, 5vw, 46px);
    line-height:1.08;
    margin:0 auto 16px;
    max-width:720px;
  }
  .home-hero p.lead{
    font-size:17px;
    color:var(--purple-100);
    max-width:560px;
    margin:0 auto 30px;
  }
  .search-box{
    max-width:480px;
    margin:0 auto;
    display:flex;
    gap:8px;
    position:relative;
  }
  .search-box input{
    flex:1 1 auto;
    font-family:var(--font-body);
    font-size:15px;
    padding:14px 18px;
    border-radius:999px;
    border:none;
    outline:none;
    background:var(--white);
    color:var(--ink-900);
  }
  .search-box button{
    font-family:var(--font-body);
    font-size:14px;
    font-weight:700;
    color:var(--purple-700);
    background:var(--amber-400);
    border:none;
    padding:0 22px;
    border-radius:999px;
    cursor:pointer;
    white-space:nowrap;
  }
  .search-results{
    position:absolute;
    top:calc(100% + 8px);
    left:0; right:0;
    background:var(--white);
    border-radius:var(--radius-m);
    box-shadow:var(--shadow-lift);
    overflow:hidden;
    text-align:left;
    display:none;
    max-height:320px;
    overflow-y:auto;
    z-index:5;
  }
  .search-results.open{ display:block; }
  .search-results a{
    display:block;
    padding:11px 18px;
    font-size:14px;
    color:var(--ink-900);
    text-decoration:none;
    border-bottom:1px solid var(--line);
  }
  .search-results a:last-child{ border-bottom:none; }
  .search-results a:hover{ background:var(--purple-100); }
  .search-empty{ padding:14px 18px; font-size:13.5px; color:var(--ink-400); }

  /* ticket stub reaprovechado como franja de estadísticas del sitio */
  .home-stats-wrap{
    max-width:1080px;
    margin:0 auto;
    padding:0 24px;
    transform:translateY(-30px);
  }
  .home-stats{
    background:linear-gradient(120deg, var(--purple-700), var(--pink-700));
    border-radius:var(--radius-l);
    box-shadow:var(--shadow-lift);
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
    padding:22px 20px;
    position:relative;
  }
  .home-stats::before,
  .home-stats::after{
    content:"";
    position:absolute;
    top:50%;
    width:26px;height:26px;
    border-radius:50%;
    background:var(--paper);
    transform:translateY(-50%);
  }
  .home-stats::before{ left:-13px; }
  .home-stats::after{ right:-13px; }
  .home-stat{ text-align:center; padding:6px 16px; }
  .home-stat b{
    display:block;
    font-family:var(--font-display);
    font-size:26px;
    font-weight:800;
    color:var(--white);
  }
  .home-stat span{ font-size:12.5px; color:var(--purple-100); }

  /* ============ HOME: OFERTAS DESTACADAS ============ */
  .offer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(230px,1fr));
    gap:16px;
  }
  .offer-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:10px;
    box-shadow:var(--shadow-card);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .offer-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
  .offer-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .offer-card img{ height:26px; width:auto; max-width:110px; object-fit:contain; }
  .offer-badge{
    font-family:var(--font-display);
    font-weight:800;
    font-size:14px;
    background:linear-gradient(135deg, var(--amber-300), var(--amber-400));
    padding:4px 10px;
    border-radius:var(--radius-s);
    color:var(--purple-900);
    white-space:nowrap;
  }
  .offer-card h4{
    margin:0;
    font-size:14.5px;
    font-weight:700;
    line-height:1.35;
    color:var(--ink-900);
  }

  /* ============ HOME: CATEGORÍAS ============ */
  .category-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
    gap:12px;
  }
  .category-tile{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:16px 18px;
    text-decoration:none;
    color:var(--purple-900);
    font-weight:700;
    font-size:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .category-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card); background:var(--purple-100); }
  .category-tile svg{ width:15px; height:15px; flex:0 0 auto; color:var(--purple-500); }


  /* ============ SUBSECCIONES / AVISOS / AJUSTES (build 29-09-2026) ============ */
  .subsection-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
    gap:12px;
  }
  .subsection-tile{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:14px 16px;
    text-decoration:none;
    color:var(--purple-900);
    font-weight:700;
    font-size:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .subsection-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card); background:var(--purple-100); }
  .subsection-tile svg{ width:15px; height:15px; flex:0 0 auto; color:var(--purple-500); }
  .empty-note{
    background:var(--white);
    border:1px dashed var(--line);
    border-radius:var(--radius-m);
    padding:22px 24px;
    font-size:14px;
    color:var(--ink-600);
  }
  /* store-grid dentro de .wrap (catálogo y secciones): sin doble padding */
  .wrap .store-grid{ padding:0; margin:0 0 20px; max-width:none; }
  /* tarjetas de la home */
  .offer-card .valid{ font-size:12.5px; color:var(--ink-400); }
  .offer-card-cta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:auto; }
  .offer-card-cta .code-mask{ min-width:0; flex:1 1 auto; }
  a.reveal-btn, a.btn-reveal{ text-decoration:none; }