/*
Theme Name: CyB Portada
Description: Market root page for Cupones & Beneficios — the "#Cuponlover" ticket chooser listing every active club of the market. No builder, no dependencies: the whole page is front-page.php plus this stylesheet.
Version: 2.5.5
Author: Cupones & Beneficios
Text Domain: cyb-portada
*/

/* Self-hosted faces. Latin subset only: every string this page renders is
   Spanish. */
@font-face{
  font-family:'Asap';
  src:url('assets/fonts/asap-var.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

:root{
  --amarillo:#F0B800;   /* canvas, the brand's yellow */
  --azul:#00457A;       /* links on pages */
  --blanco:#ffffff;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  font-family:'Asap', ui-sans-serif, system-ui, sans-serif;
  /* The yellow IS the page, edge to edge. Two soft radial lights add depth
     without introducing a new colour. */
  background:
    radial-gradient(60% 40% at 18% 8%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(50% 36% at 85% 90%, rgba(140,96,0,.10), transparent 70%),
    var(--amarillo);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

/* ════════════════════════════════════════════════════════════════════
   The "#Cuponlover" ticket chooser — the approved design, shared by both
   markets. Ink is warm dark brown, the accent is toasted gold; each card
   takes its brand colour through the --marca custom property.
   ════════════════════════════════════════════════════════════════════ */
.pa{
  --pa-tinta:#2B2313;
  --pa-oro:#A16D00;
  --cyb-azul:#0B519C;   /* the brand blue, straight from the official SVG */
  --pa-suave:rgba(43,35,19,.62);
  max-width:1280px;
  margin-inline:auto;
  padding:10px clamp(20px,4vw,44px) 40px;
  color:var(--pa-tinta);
}
/* Top bar: shared container; Colombia paints it the brand blue and the
   state text flips to the logo's yellow so it reads on the dark ground. */
.topbar{ padding-block:16px; }
.topbar__in{
  max-width:1280px; margin-inline:auto;
  padding-inline:clamp(20px,4vw,44px);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.topbar--azul{ background:var(--barra,#0B519C); box-shadow:0 4px 14px rgba(11,81,156,.25); }
.topbar--azul .pa__logo{ height:var(--logo-h,46px); width:auto; }
.topbar--azul .pa__estado{ color:#FFFFFF; }
.topbar--azul .pa__punto{ background:#FFC300; }
.pa__logo{ width:190px; height:auto; }
.pa__estado{
  margin:0; font-size:13px; font-weight:700; letter-spacing:.14em;
  color:var(--pa-oro); display:flex; align-items:center; gap:8px;
}
.pa__punto{ width:8px; height:8px; border-radius:50%; background:var(--pa-oro); }

.pa__cabeza{
  display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:end;
  margin:clamp(30px,5vw,64px) 0 clamp(22px,3vw,36px);
}
.pa__cabeza h1{
  margin:0; font-size:clamp(30px,4.4vw,52px); font-weight:800; line-height:1.08;
  color:var(--pa-tinta); letter-spacing:-.01em;
}
.pa__cabeza h1 em{ font-style:normal; color:var(--cyb-azul); }
.pa__lede{ margin:0; font-size:16.5px; line-height:1.55; color:var(--pa-suave); max-width:38ch; }

.pa__planes{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.tiquete{
  display:grid; grid-template-columns:.72fr auto 1fr;
  background:var(--blanco); border-radius:18px;
  box-shadow:0 12px 30px rgba(43,35,19,.16);
  overflow:hidden;
  min-height:230px;
}
/* An odd last card sits centred under the pair, like the approved page. */
.tiquete:last-child:nth-child(odd){
  grid-column:1 / -1;
  width:min(100%,calc(50% - 12px));
  margin-inline:auto;
}
/* The art panel NEVER crops the plaque: contain, on the exact tint the
   panel image was baked with, so the letterbox is invisible. */
.tiquete__foto{ position:relative; background:var(--tinte,#fff); }
.tiquete__foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
/* The perforation: a dashed rule with a punched notch at each end, the
   ticket-edge device of the approved design. */
.tiquete__borde{
  position:relative; width:0;
  border-left:2px dashed rgba(43,35,19,.16);
}
.tiquete__borde::before,
.tiquete__borde::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:22px; height:22px; border-radius:50%;
  background:var(--amarillo);
}
.tiquete__borde::before{ top:-11px; }
.tiquete__borde::after{ bottom:-11px; }
.tiquete__info{ position:relative; padding:clamp(18px,2.4vw,28px); display:flex; flex-direction:column; gap:8px; }
.tiquete__pill{
  position:absolute; top:16px; right:16px;
  background:var(--pa-tinta); color:var(--blanco);
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px;
}
.tiquete__n{ margin:0; font-size:15px; color:var(--pa-suave); }
.tiquete__n b{ font-size:34px; line-height:1; color:var(--marca); margin-right:4px; }
.tiquete__info h2{ margin:0; font-size:19px; font-weight:700; color:var(--pa-tinta); line-height:1.2; }
.tiquete__desc{ margin:0; font-size:15px; line-height:1.5; color:var(--pa-suave); flex:1; }
.tiquete__ahorro{
  margin:0; align-self:flex-start;
  font-size:13px; font-weight:700; letter-spacing:.02em;
  color:var(--marca);
  background:color-mix(in srgb, var(--marca) 9%, var(--blanco));
  border:1px solid color-mix(in srgb, var(--marca) 25%, var(--blanco));
  padding:5px 12px; border-radius:999px;
}
.tiquete__ahorro b{ font-size:14.5px; }
.tiquete--agotado .tiquete__ahorro{ color:var(--pa-suave); background:rgba(43,35,19,.06); border-color:rgba(43,35,19,.14); }
.tiquete__pie{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.tiquete__precio{ margin:0; color:var(--pa-tinta); }
.tiquete__precio b{ font-size:26px; }
.tiquete__precio span{ font-size:13px; color:var(--pa-suave); }
.tiquete__cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--marca); color:var(--blanco);
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:12px 20px; border-radius:8px; text-decoration:none;
  transition:transform .15s ease, filter .15s ease;
}
.tiquete__cta:hover{ transform:translateY(-2px); filter:brightness(1.08); }
/* "Ver el club" wears the CyB brand blue (sampled from the logo mark), by
   the client's order; "Ver el plan" keeps each brand's own colour. */
.tiquete__cta--club{ background:var(--cyb-azul); }
.tiquete__cta:focus-visible{ outline:3px solid var(--pa-tinta); outline-offset:3px; }
.tiquete__pronto{ font-size:14.5px; font-weight:600; color:var(--pa-suave); }
.tiquete--agotado{ box-shadow:0 8px 20px rgba(43,35,19,.10); }
.tiquete--agotado .tiquete__foto img{ filter:grayscale(.9) opacity(.55); }
.tiquete--agotado .tiquete__n b,
.tiquete--agotado .tiquete__info h2,
.tiquete--agotado .tiquete__precio b{ color:var(--pa-suave); }

.pa__pie{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:clamp(34px,5vw,60px);
  padding-top:20px;
  border-top:1px solid rgba(43,35,19,.16);
  font-size:14px; color:var(--pa-suave);
}
.pa__pie p{ margin:0; }
.pa__pie nav{ display:flex; gap:18px; flex-wrap:wrap; }
.pa__pie a{ color:var(--pa-suave); text-decoration:none; font-weight:600; }
.pa__pie a:hover{ color:var(--pa-tinta); text-decoration:underline; }

@media (max-width:900px){
  .pa__cabeza{ grid-template-columns:1fr; align-items:start; }
  .pa__planes{ grid-template-columns:1fr; }
  .tiquete:last-child:nth-child(odd){ width:100%; }
}
@media (max-width:600px){
  .tiquete{ grid-template-columns:1fr; min-height:0; }
  .tiquete__foto{ height:250px; }
  .tiquete__borde{ display:none; }
  .pa__logo{ width:150px; }
  .topbar--azul .pa__logo{ height:min(var(--logo-h,46px),44px); width:auto; }
  .topbar__in{ flex-wrap:wrap; row-gap:6px; }
  .pa__estado{ font-size:11.5px; letter-spacing:.1em; }
  .pa__cabeza h1{ font-size:clamp(28px,8vw,36px); }
  .tiquete__pie{ flex-wrap:wrap; }
}

/* ---- Ordinary pages (the privacy policy): a white card on the canvas ---- */
.pagina{ padding:40px 20px 60px; }
.pagina__carta{
  max-width:840px;
  margin:0 auto;
  background:var(--blanco);
  border-radius:18px;
  box-shadow:0 14px 34px rgba(31,26,3,.20);
  padding:clamp(26px,4vw,54px);
  color:#333333;
  line-height:1.65;
}
.pagina__volver{
  display:inline-block;
  margin-bottom:18px;
  font-weight:700;
  color:var(--azul);
  text-decoration:none;
}
.pagina__volver:hover{ text-decoration:underline; }
.pagina__carta h1{ color:var(--azul); font-size:clamp(24px,3vw,34px); margin:0 0 18px; }
.pagina__carta h2,.pagina__carta h3,.pagina__carta h4{ color:var(--azul); margin:26px 0 10px; }
.pagina__carta p{ margin:0 0 14px; }
.pagina__carta ul,.pagina__carta ol{ margin:0 0 14px; padding-left:24px; }
.pagina__carta a{ color:var(--azul); }