/* ===== WhatsApp Floating Action Button ===== */
/* Globito del FAB */
.wa-fab{ position:fixed; right:18px; bottom:18px; width:64px; height:64px;
  border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.18); z-index:2147483647; overflow:visible; /* permite que salga el label */
}
.fa-whatsapp{ font-size:32px; }

.wa-fab:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 18px 36px rgba(37,211,102,.45); }

/* Pulso */
.wa-fab::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(37,211,102,.35); animation:wa-pulse 2s ease-out infinite; pointer-events:none;
}
@keyframes wa-pulse{ 0%{transform:scale(1);opacity:.75} 100%{transform:scale(1.6);opacity:0} }

/* ===== Label ===== */
.wa-label{
  position:absolute; right:76px; /* 64px del botón + 12px de separación */
  top:50%; transform:translate(8px,-50%); /* arranca un poco corrido */
  background:#ff2e93; color:#fff; padding:.5rem .9rem; border-radius:16px;
  white-space:nowrap; font-weight:700; font-size:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:2;
}
.wa-label::after{ /* piquito */
  content:""; position:absolute; right:-6px; top:50%; width:12px; height:12px;
  background:#ff2e93; transform:translateY(-50%) rotate(45deg); border-radius:2px;
}
.wa-fab:hover .wa-label{ opacity:1; transform:translate(0,-50%); }

/* Mobile / pantallas sin hover: ocultar el label */
@media (max-width:575.98px), (hover:none){
  .wa-label{ display:none; }
}

/****************************************************
  VARIABLES DE TEMA
*****************************************************/
:root{
  /* Colores base */
  --color-primary: #1a73e8;     /* azul secundario */
  --color-dark:   #212529;
  --color-light:  #f8f9fa;
  --color-white:  #ffffff;

  /* Paleta “Clubox” para el nav */
  --color-brand-green:       #009944; 
  --color-brand-green-hover: #009b52;

  /* Tipografía y efectos */
  --font-base:  'Open Sans', Arial, sans-serif;
  --transition: 0.3s ease-in-out;

  --menu-accent: #ff1f8b;
  --menu-line-h: 3px;          /* grosor de la línea */
  --menu-line-offset: -8px;    /* distancia por encima del link */
  --menu-radius: 12px;
  --menu-shadow: 0 18px 45px rgba(0,0,0,.16);
}

/****************************************************
  RESET Y BASE
*****************************************************/
*{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family:var(--font-base);
  color:var(--color-dark);
  background:var(--color-light);
  line-height:1.6;
}

a{ text-decoration:none; color:inherit; }

/****************************************************
  CONTENEDOR CENTRAL
*****************************************************/
.container{
  width:90%;
  max-width:1200px;
  margin:0 auto;
}

/****************************************************
  HEADER / NAVBAR  (logo + menú fijo)
*****************************************************/
header.site-header{
  background:var(--color-white);
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
  position:fixed;                /* barra siempre visible */
  top:0; left:0; width:100%;
  z-index:1050;
}

/* Compensa la altura del header para evitar solape */
body{ padding-top:84px; }         /* ajusta si tu header es más alto */

header .container{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:1rem 1rem;  /* padding horizontal añadido */
  position: relative;  /* para posicionar el selector de idioma */
}

/* Logo */
.logo img{ height:52px; display:block; }
.logo{ margin-right:1rem; margin-left: 0; } 

/****************************************************
  MENÚ PRINCIPAL (horizontal)
*****************************************************/
.site-header{ position: relative; z-index: 5; overflow: visible; }
.main-nav{ position: relative; z-index: 6; }
.main-nav nav > ul.menu > li{ position: relative; }
.main-nav nav > ul.menu > li > a{
  position: relative;
  display: inline-block;
}
.main-nav nav > ul.menu{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:.9rem;
  padding:0;
  margin:0;
  margin-right: auto; /* asegura que el menú se mantenga a la izquierda */
  list-style:none;
}
.main-nav nav > ul.menu > li{ position:relative; list-style:none; margin:0; }
.main-nav nav > ul.menu > li > a{
  position:relative;
  display:inline-block;
  padding:.5rem .3rem;
  font-weight:bolder;
  font-size:1rem;
  line-height:1;
  color:var(--color-brand-green);
  text-decoration:none;
  transition:color .18s ease;
}
.main-nav nav > ul.menu > li > a:hover{ color:var(--color-brand-green-hover); }

/* Flechita ▼ (automática con :has, fallback con .has-sub) */
.main-nav nav > ul.menu > li:has(> ul) > a::after,
.main-nav nav > ul.menu > li.has-sub > a::after{
  content:"▾";
  font-size:.75rem;
  margin-left:.4rem;
  display:inline-block;
  transform:translateY(-1px);
  transition:transform .18s ease;
}
.main-nav nav > ul.menu > li:hover > a::after{ transform:translateY(-1px) rotate(180deg); }

/* Línea superior al hover */
.main-nav nav > ul.menu > li > a::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top: var(--menu-line-offset);
  height: var(--menu-line-h);
  border-radius: var(--menu-line-h);
  background: var(--menu-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

.main-nav nav > ul.menu > li:hover > a::before,
.main-nav nav > ul.menu > li:focus-within > a::before{
  transform:scaleX(1);
}

/* ===== Submenús (ul anidados) ===== */
/* Muy importante: resetear layout en los ul hijos */
.main-nav nav > ul.menu ul{
  display:block;                 /* ya NO flex */
  padding:10px 0;
  margin:0;
  list-style:none;
  border-radius: 5px;
  box-shadow:2px 2px 2px 4px rgba(0, 0, 0, 0.055);
}

.main-nav li > ul{
  position:absolute;
  top:calc(100% + 5px);
  left:50%;
  transform:translate(-50%, 10px);
  min-width:220px;
  background:#fff;
  border-radius:var(--menu-radius);
  box-shadow:var(--menu-shadow);
  text-align:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}

/* Mostrar al pasar el puntero */
.main-nav li:hover > ul{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translate(-50%, 0);
}

/* Flechita del dropdown */
.main-nav li > ul::before{
  content:"";
  position:absolute;
  top:-8px; left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:25px; height:25px;
  background:#ffffff;
  box-shadow:-2px -2px 4px rgba(0,0,0,.03);
  z-index: -10;
}

/* Items del submenú */
.main-nav li ul li{ list-style:none; }
.main-nav li ul a{
  display:block;
  padding:.6rem 1.25rem;
  white-space:nowrap;
  color:var(--color-dark, #2b2b2b);
  font-weight:600;
  text-decoration:none;
  border-radius:6px;            /* para el hover */
}
.main-nav li ul a:hover{
  background:var(--color-light, #f5f7f9);
  color:var(--color-brand-green-hover, #19924b);
}

/****************************************************
  SELECTOR DE IDIOMA
*****************************************************/
.site-header .container {
  column-gap: 1rem;
}

/* === Language switcher con estilo del menú principal === */
.oc-lang {
  position: fixed;
  right: 20px;
  top: 18px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.98);
  border: 2px solid var(--menu-accent);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(255, 31, 139, 0.12);
  transition: all 0.3s ease;
  z-index: 2147483647;
}

.oc-lang:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 31, 139, 0.18);
}

.oc-lang__btn {
  /* reset del botón y adopta estilo de tu <a> del menú */
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .3rem;
  font-weight: bolder;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-brand-green);
}


/* flechita ▼ como tus items con submenú */
.oc-lang__btn::after {
  content: "▾";
  font-size: .75rem;
  margin-left: .4rem;
  transform: translateY(-1px);
  transition: transform .18s ease;
}

.oc-lang:hover .oc-lang__btn::after,
.oc-lang.show .oc-lang__btn::after {
  transform: translateY(-1px) rotate(180deg);
}



.oc-lang:hover .oc-lang__btn span::before,
.oc-lang.show .oc-lang__btn span::before {
  transform: scaleX(1);
}

/* menú desplegable igual a tus submenús */
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: -2px;
  transform: translateY(10px);
  min-width: 180px;
  background: #fff;
  border-radius: var(--menu-radius);
  box-shadow: var(--menu-shadow);
  padding: 10px 0;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 1200;
  border: 1px solid rgba(255, 31, 139, 0.1);
}

.lang-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 20px;
  transform: rotate(45deg);
  width: 16px;
  height: 16px;
  background: #fff;
  box-shadow: -2px -2px 4px rgba(0, 0, 0, .03);
  z-index: -10;
  border-left: 1px solid rgba(255, 31, 139, 0.1);
  border-top: 1px solid rgba(255, 31, 139, 0.1);
}

/* mostrar solo con la clase .show (al dar clic) */
.oc-lang.show .lang-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* items del selector (idénticos a tus submenús) */
.lang-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: .6rem 1.25rem;
  white-space: nowrap;
  color: var(--color-dark, #2b2b2b);
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
}

.lang-item:hover {
  background: var(--color-light, #f5f7f9);
  color: var(--color-brand-green-hover, #19924b);
}

/* tamaño/posición del dropdown */
.site-header .dropdown-menu {
  z-index: 2000;
}

/* ajuste visual de banderas */
.oc-lang .fi {
  line-height: 1;
}

#lang-select.form-select option:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

#lang-select.form-select option:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom: none;
}

#lang-select.form-select option:hover,
#lang-select.form-select option:focus {
  background-color: rgba(25, 146, 75, 0.08) !important;
  color: var(--color-brand-green, #19924b) !important;
}

#lang-select.form-select option:checked {
  background: linear-gradient(45deg, rgba(25, 146, 75, 0.12), rgba(25, 146, 75, 0.08)) !important;
  color: var(--color-brand-green, #19924b) !important;
  font-weight: 600;
}

/* Personalización del dropdown */
#lang-select.form-select:focus option {
  outline: none;
  box-shadow: 0 2px 8px rgba(25, 146, 75, 0.1);
}

/* Estado deshabilitado */
#lang-select.form-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(40%);
  background-color: rgba(255, 255, 255, 0.8) !important;
}

#lang-select.form-select:disabled option {
  color: #9ca3af;
  cursor: not-allowed;
}

/* Ocultar flecha nativa en IE */
#lang-select.form-select::-ms-expand {
  display: none;
}

/* Mejora visual al abrir el select */
#lang-select.form-select:focus {
  border-radius: 999px 999px 16px 16px;
}

/* Responsivo con ajustes suaves */
@media (max-width: 768px) {
  #lang-select.form-select {
    width: 128px;
    height: 34px;
    top: 12px;
    padding: 0 2.1rem 0 2rem;
    background-position: .7rem center, right .6rem center !important;
    font-size: 0.9rem;
  }
}



/* Oculta el banner/tooltip del widget de Google Translate */
  .goog-te-banner-frame.skiptranslate,
  .goog-te-banner-frame,
  #goog-gt-tt { display:none !important; }

  /* Google intenta empujar el body hacia abajo: lo anulamos */
  html body { top: 0 !important; }

  /* Asegura tu header por encima de cualquier cosa */
  header.site-header { 
    position: fixed; 
    z-index: 2147483647 !important; 
    left:0; right:0; 
    top:0; }
/****************************************************
  CARRUSEL
*****************************************************/
.carousel-container{ margin:2rem 0; position:relative; }
#homepageCarousel{ overflow:hidden; }

.carousel-inner{ display:flex; transition:transform 0.6s ease-in-out; }
.carousel-item{ min-width:70%; position:relative; }
.carousel-item img{
  width:100%; height:90vh; 
  object-fit:cover; 
  display:block;
}

/* Flechas personalizadas (opcional) */
.carousel-control-prev,
.carousel-control-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:3rem; height:3rem;
  background:rgba(0,0,0,0.4);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background var(--transition);
}
.carousel-control-prev:hover,
.carousel-control-next:hover{ background:rgba(0,0,0,0.6); }
.carousel-control-prev{ left:1rem; }
.carousel-control-next{ right:1rem; }
.carousel-control-prev::after,
.carousel-control-next::after{
  content:none;
  border-width:0.25rem 0.25rem 0 0; padding:0.4rem;
}
.carousel-control-prev::after{ transform:rotate(-135deg); }
.carousel-control-next::after{ transform:rotate(45deg); }

/****************************************************
  CONTENIDO PRINCIPAL
*****************************************************/
main[role="main"]{
  background:var(--color-white);
  margin-bottom:2rem;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
  border-radius:4px;
  font-family: Montserrat;
}

/* ———————— Top-sellers section ———————— */
.category-card{ 
    border:15px solid #fff; 
    transition:transform .2s, filter .3s;
 }
.category-card:hover{ transform:translateY(-4px); }           /* sutil lift */
.category-img      { filter:grayscale(100%); transition:filter .3s; }
.category-card:hover .category-img{ filter:none; }             /* pasa a color */
.category-label    { text-shadow:0 2px 4px rgba(0,0,0,.6); }


/* === Featured products section =============================== */
.retailer-logo{
  margin-bottom: 15px;
  max-height:50px; 
  padding:0 6.5%;      
  filter:grayscale(100%)  
         brightness(0.6)         /* ajusta la luminosidad total    */
         contrast(0.9);          /* opcional: suaviza los bordes   */
  opacity:.8;                    /* ligera transparencia uniforme  */
  transition:filter .25s,opacity .25s;
}
.retailer-logo:hover{
  opacity:1;                     /* un poco más visible al hover   */
  filter:grayscale(0%);          /* (opcional) vuelve a color real */
}

.product-card{
  background:#fff;
  transition:transform .2s,box-shadow .2s;
}
.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 .5rem 1rem rgba(0,0,0,.15);
}
.product-img{
  aspect-ratio:1/1;
  object-fit:contain;
  padding:1rem;
  height: 15rem;
}
.product-title{color:#333;}
/* ============================================================= */

.locker-card{
  --fucsia:#ff1f8b;
  --radius:16px;
  position:relative;
  border-radius:var(--radius);
  background:#fff;
  overflow:hidden;                 /* importante para redondeo */
  border:1px solid #efefef;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.locker-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;                            /* grosor del borde “glow” */
  background:linear-gradient(135deg, var(--fucsia), #ff9ec9, var(--fucsia));
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;        /* deja sólo el borde */
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}

.locker-card::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120% 60% at 50% -20%, rgba(255,255,255,.8), transparent 60%);
  opacity:.0; pointer-events:none;
  transition:opacity .25s ease;
}

@media (hover:hover){
  .locker-card:hover{
    transform:translateY(-6px);
    box-shadow:
      0 16px 32px rgba(27,43,65,.16),
      0 3px 10px rgba(27,43,65,.08);
    border-color:#f6d2e7;
  }
  .locker-card:hover::before{ opacity:1; }
  .locker-card:hover::after{  opacity:.8; }
}

/* Teclado: que también se vea al tabular al link/botón */
.locker-card:focus-within{
  transform:translateY(-6px);
  box-shadow:
    0 16px 32px rgba(27,43,65,.16),
    0 3px 10px rgba(27,43,65,.08);
  border-color:#f6d2e7;
}
.locker-card:focus-within::before{ opacity:1; }
.locker-card:focus-within::after{  opacity:.8; }

/* Micro-movimiento del hex y una sombra sutil */
.country-card-head .country-badge{
  transition:transform .28s cubic-bezier(.2,.8,.2,1), filter .28s ease;
  will-change: transform;
}
@media (hover:hover){
  .locker-card:hover .country-badge{
    transform: translateY(-2px) rotate(2deg) scale(1.02);
    filter: drop-shadow(0 3px 6px rgba(16,24,40,.20));
  }
}


/* ZONA SUPERIOR (TÍTULO + BANDERA) */
.locker-body {
  position: relative;
  padding: 1rem;
  text-align: left;
}

.locker-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #333333;
}

/* Hexágono */
.country-badge{
  --size: 72px;
  --ring-fuchsia: 4px;
  --ring-white: 3px;
  --fuchsia: #ff1f8b;
  --round: 0px;
  display:inline-block;
  width: var(--size);
  aspect-ratio: 1;
}
.country-badge .hex-outer,.country-badge .hex-inner{
  display:block; width:100%; height:100%;
  --hex: polygon(25% 5.77%, 75% 5.77%, 100% 50%, 75% 94.23%, 25% 94.23%, 0 50%);
  clip-path: var(--hex); border-radius: var(--round);
}
.country-badge .hex-outer{ background: var(--fuchsia); padding: var(--ring-fuchsia); }
.country-badge .hex-inner{ background:#fff; padding: var(--ring-white); }
.country-badge img{ display:block; width:100%; height:100%; object-fit: cover; clip-path: var(--hex); border-radius: var(--round); }
.country-badge.is-sm{ --size:56px; }
.country-badge.is-lg{ --size:88px; }

/* Cabecera del card */
.country-card-head{ display:flex; align-items:center; gap:.75rem; }
.country-card-title{ font-weight:700; line-height:1.1; }
.country-card-head .country-badge{ margin-left:auto; } /* empuja la bandera a la derecha */

@media (max-width: 480px){
  .country-badge{ --size:56px; }
}

/* BOTÓN FIJO ABAJO (sin cambios) */
.locker-btn{
  display:block;
  background:#068a43;
  color:#fff; text-decoration:none;
  padding:14px 12px;
  font-weight:600;
  border-top:1px solid rgba(0,0,0,.04);
}
.locker-btn:focus-visible{
  outline:2px solid var(--fucsia);
  outline-offset:2px;
}

/* Opcional: bordes redondeados en el botón para empatar el card */
.locker-card .locker-btn{
  border-bottom-left-radius:var(--radius);
  border-bottom-right-radius:var(--radius);
}

/* Respeta usuarios con movimiento reducido */
@media (prefers-reduced-motion: reduce){
  .locker-card,
  .country-badge{ transition:none !important; }
}

/* --- CLUBBOX – 6 PASOS ---------------------------------- */
:root{
  --clubbox-pink:#e500a4;
}

.step-card{
  max-width:180px;
  display:flex; 
  flex-direction:column; 
  align-items:center;
}

.step-icon{
  width:100%; 
  aspect-ratio:1/1;
  background:#fff;
  border:2px solid transparent;
  border-radius:1.25rem;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  padding:1rem;
  height: 12rem;
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s ease,
             border-color .25s ease,
             box-shadow .25s ease;
}

.step-card:hover .step-icon,
.step-card:focus-within .step-icon{     /* accesible con teclado */
  transform:translateY(-6px) scale(1.04);
  border-color:var(--clubbox-pink);
  box-shadow:
      0 0 0 3px rgba(229,0,164,.25),   /* halo fucsia suave */
      0 8px 22px rgba(0,0,0,.15);      /* sombra más profunda */
}

.step-caption{
  margin-top:.75rem;
  font-size:.95rem;
  font-weight:500;
  color:#6c757d;
  text-align:center;
}

@media (min-width:768px){
  .step-caption{ font-size:1rem; }
}

/* --- Video */
:root{
  --clubbox-pink:#e500a4;
  --clubbox-green:#009640;
  --clubbox-bg-light:#edf7e9;  /* fondo suave */
}

/* fondo de la sección */
.howitworks-section{ background:var(--clubbox-bg-light); }

/* Títulos */
.howitworks-title   { color:var(--clubbox-pink); font-weight:700; }
.howitworks-subtitle{ color:#343a40; }

/* Botón */
.btn-clubbox-cta{
  background:var(--clubbox-green);
  color:#fff;
  border-radius:.65rem;
  transition:background .25s ease, transform .2s ease;
}
.btn-clubbox-cta:hover,
.btn-clubbox-cta:focus{
  background:#007c35;
  transform:translateY(-2px);
}

/* Video: sombreado sutil ya lo da .shadow-sm */
.howitworks-video iframe{ border:0; }


/* -------- VENTAJAS -------------------------------------------------- */
:root{
  --clubbox-pink:#e500a4;
  --clubbox-green:#74d34e;
  --clubbox-green-dark:#55c346;
}

.advantages-title   { color:#495057; font-weight:700; }
.advantages-subtitle{ color:#495057; }

.adv-item           { align-items:flex-start; }

.adv-num            { display:flex; flex-direction:column; align-items:center; }
.adv-circle         {
  width:68px; height:68px; border-radius:50%;
  background:var(--clubbox-green-dark);
  /* degradé suave como en el mock */
  background:radial-gradient( circle at 30% 30%, var(--clubbox-green) 0%, var(--clubbox-green-dark) 100%);
  color:#fff; font-size:1.15rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.adv-line{
  width:3px; flex:1; margin-top:4px;
  background-image:repeating-linear-gradient(180deg,
                    var(--clubbox-pink) 0 10px, transparent 10px 20px);
}

@media (max-width: 991px){
  .advantages-mascot{ max-width:360px; }
}

/* --- DESTINOS / CALCULADORA ---------------------------------------- */
:root{
  --clubbox-pink:#e500a4;
}

.destinations-section h2{ color:#495057; }

.dest-hex{
  /* Ajustes rápidos */
  --size: 72px;            /* tamaño total del hex */
  --ring-fuchsia: 4px;     /* grosor borde fucsia */
  --ring-white: 3px;       /* grosor borde blanco */
  --fuchsia: #ff1f8b;      /* color borde externo */
  --round: 0px;            /* 0 = puntas nítidas (como la referencia) */

  display:inline-block;
  width: var(--size);
  aspect-ratio: 1;
}


.dest-hex .hex-outer,
.dest-hex .hex-inner{
  display:block;
  width: 100%;
  height: 100%;
  /* Hex regular: 120° */
  --hex: polygon(25% 5.77%, 75% 5.77%, 100% 50%, 75% 94.23%, 25% 94.23%, 0 50%);
  clip-path: var(--hex);
  border-radius: var(--round);
}

.dest-hex .hex-outer{
  background: var(--fuchsia);
  padding: var(--ring-fuchsia);
}
.dest-hex .hex-inner{
  background:#fff;
  padding: var(--ring-white);     
}
.dest-hex img{ 
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
  clip-path: var(--hex);
  border-radius: var(--round);
}

.dest-hex:hover .hex-outer,
.dest-hex:focus .hex-outer{
  transform:translateY(-3px);
  filter:drop-shadow(0 6px 14px rgba(229,0,164,.35));
}

/* Separación entre hexágonos en filas muy estrechas */
@media (max-width:576px){
  .dest-hex .hex-outer{ width:76px; }
}

/* (Opcional) 5 columnas exactas en >= md si tienes utilidades personalizadas */
.col-md-1-5{ flex:0 0 20%; max-width:20%; }


/* --- ARTÍCULOS DE TU INTERÉS -------------------------------------- */
:root{
  --clubbox-pink:#e500a4;
  --clubbox-green:#009640;
  --clubbox-bg-light:#edf7e9;
}
.articles-section{ background:var(--clubbox-bg-light); }

.article-title{ color:var(--clubbox-pink); }

.article-card{
  border:1px solid rgba(0,0,0,.06);
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.article-card:hover,
.article-card:focus-within{
  transform:translateY(-4px);
  border-color:rgba(229,0,164,.55);          /* fucsia */
  box-shadow:
    0 10px 24px rgba(0,0,0,.12),
    0 0 0 3px rgba(229,0,164,.12);           /* halo suave */
}

.article-title{                        /* gris elegante */
  transition:color .18s ease, text-decoration-color .18s ease;
}

.article-excerpt p{ margin-bottom:.75rem; }
.article-excerpt{ line-height:1.55; }

.article-card:hover .article-title,
.article-card:focus-within .article-title{
  color:var(--clubbox-pink);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:4px;
}

.article-media img{ transition:transform .25s ease; }
.article-card:hover .article-media img,
.article-card:focus-within .article-media img{ transform:scale(1.03); }
/* Botón inferior */
.btn-article{
  background:var(--clubbox-green);
  color:#fff;
  border-radius:0 0 1rem 1rem;      /* redondeo inferior como en el mockup */
  transition:background .2s ease, transform .15s ease;
}
.btn-article:hover,
.btn-article:focus{
  background:#80ca65;
  transform:translateY(-1px);
}



/* ===== FOOTER ======================================================= */
:root{
  --clubbox-pink:#e500a4;
  --clubbox-green:#009640;
}

.footer-top{ background:#f8f9fa; 
margin-top: -3%;}
.footer-h3{ 
  font-size: 24px;
  color:#3c4043; 
  font-weight:700; }

.support-title{ 
  font-size: 18px;
  font-weight:700; 
  color:#5a5f63; 
  margin-bottom:.25rem; }

.support-phones{
  margin-left: 10%;
  width: 55%;
}

.support-phones .phone-link{ 
  color:#6b7380; 
  text-decoration:none; }
.support-phones .phone-link:hover{ 
  color:#3c4043;}

.contact-link{ color:#5a5f63; text-decoration:underline; }
.contact-link:hover{ color:#3c4043; }

.wa-dot{
  display:inline-block; width:20px; height:20px; border-radius:50%;
  background:var(--clubbox-pink);
}

/* Iconos sociales */
.social-icon img{ display:block; width:19px; height:19px; }
.social-icon:hover{ transform:translateY(-2px); transition:transform .15s ease; }

/* Barra verde inferior con menú */
.footer-nav{ background:var(--clubbox-green); }
.footer-nav a{
  color:#fff; text-decoration:none; font-weight:400;
}
.footer-nav a:hover{ text-decoration:underline; }

/* ========== ESTILOS PARA BANNER DE POLÍTICAS ========== */
.doc-banner {
  padding: 40px 20px;
  text-align: center;
  color: #fff;
}

.doc-banner__image img {
  width: 300px;
  height: auto;
  display: block;
  margin: 0 auto 50px auto;
}

.doc-banner__content {
  background: #fff;
  color: #333;
  border-radius: 12px;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.doc-banner__content h2 {
  font-size: 1.8rem;
  font-weight: 900;
  margin: 0 0 20px;
  color: #444;
}

.doc-banner__content p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 15px;
}

.doc-banner__content a {
  color: var(--cb-green-2, #00a45e);
  font-weight: 600;
  text-decoration: none;
}

.doc-banner__content a:hover {
  text-decoration: underline;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .doc-banner {
    padding: 30px 15px;
  }
  .doc-banner__content {
    padding: 10px 50px;
    padding-left: max(var(--mobile-x), env(safe-area-inset-left, 0px));
  }
  .doc-banner__content h2 {
    font-size: 1.4rem;
  }
  .doc-banner__content p {
    font-size: 0.95rem;
  }
}


.category-card.is-active .category-img{ filter:none !important; }
.category-card.is-active{
  transform:translateY(-4px);
  box-shadow:0 .5rem 1rem rgba(0,0,0,.15);
}

.top-sellers .category-card.is-active,
.top-sellers .category-card[aria-pressed="true"]{
  transform: translateY(-4px);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

/* Quita el gris en el activo (gana a .category-img { filter:grayscale(100%) }) */
.top-sellers .category-card.is-active .category-img,
.top-sellers .category-card[aria-pressed="true"] .category-img{
  filter: none !important;
}