/* Dcolección — blocksy-child/assets/dcol.css
   Paleta verificada: --theme-palette-color-1 #2872fa (blanco encima = 4.31:1, REPRUEBA AA)
                      --theme-palette-color-2 #1559ed (blanco encima = 5.70:1, PASA AA)  <- se usa esta
                      --theme-palette-color-4 #192a3d (footer oscuro) */

/* ---------- CSS adicional migrado del Customizer (NO borrar) ---------- */
.final-sale-home-cta .product{--theme-text-color:rgba(255,255,255,.5);--theme-heading-color:#fff}

/* ---------- Accesibilidad: foco de teclado (el tema no declara ni un outline) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #1559ed;outline-offset:2px;border-radius:2px}

/* ---------- HERO ---------- */
.dcol-hero{background:linear-gradient(135deg,#192a3d 0%,#3A4F66 100%);color:#fff;padding:clamp(24px,4vw,52px) clamp(18px,4vw,48px);border-radius:8px;display:grid;gap:clamp(18px,3vw,40px)}
@media(min-width:1000px){.dcol-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}}
.dcol-hero__eyebrow{margin:0 0 6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.dcol-hero__h1{margin:0 0 10px;color:#fff;font-size:clamp(26px,6vw,44px);line-height:1.12}
.dcol-hero__sub{margin:0 0 16px;font-size:clamp(14px,3.6vw,17px);opacity:.92;line-height:1.5}
.dcol-hero__cta{display:flex;gap:10px;flex-wrap:wrap}
.dcol-btn{display:inline-block;padding:11px 20px;border-radius:5px;background:var(--theme-palette-color-2,#1559ed);color:#fff!important;font-weight:600;font-size:15px;text-decoration:none}
.dcol-btn--ghost{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.dcol-rail__label{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;opacity:.8}
.dcol-rail{display:grid;grid-auto-flow:column;grid-auto-columns:52vw;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px}
@media(min-width:1000px){.dcol-rail{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);grid-auto-columns:auto;overflow:visible}}
.dcol-rail .dcol-card{scroll-snap-align:start}

/* ---------- TARJETA DE PRODUCTO ----------
   3:2 + contain replica la regla que el sitio YA aplica en mu-plugins/fix-image-crop.php.
   Con cover se recortaría ~37% del ancho del billete (país y denominación). */
.dcol-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--theme-palette-color-5,#e0e5eb);border-radius:6px;overflow:hidden;text-decoration:none;color:var(--theme-palette-color-3,#3A4F66)}
.dcol-card__img{display:block;background:#fff}
.dcol-card__img img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#fff}
.dcol-card__t{padding:8px 10px 0;font-size:13px;line-height:1.3;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dcol-card__p{padding:4px 10px 10px;font-weight:700;color:var(--theme-palette-color-4,#192a3d);margin-top:auto}

/* ---------- CONFIANZA ---------- */
.dcol-trust{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:32px 0}
@media(min-width:900px){.dcol-trust{grid-template-columns:repeat(4,1fr)}}
.dcol-trust__i span{font-size:22px;display:block;margin-bottom:4px}
.dcol-trust__i strong{display:block;font-size:15px;color:var(--theme-palette-color-4,#192a3d)}
.dcol-trust__i p{margin:4px 0 0;font-size:13px;line-height:1.45}

/* ---------- CONTINENTES ---------- */
.dcol-conts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0 40px}
@media(min-width:760px){.dcol-conts{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.dcol-conts{grid-template-columns:repeat(6,1fr)}}
.dcol-cont{display:flex;flex-direction:column;align-items:center;gap:2px;padding:18px 10px;border:1px solid var(--theme-palette-color-5,#e0e5eb);border-radius:8px;text-decoration:none;background:var(--theme-palette-color-7,#f7f8f9)}
.dcol-cont:hover{border-color:var(--theme-palette-color-2,#1559ed)}
.dcol-cont__e{font-size:30px;line-height:1}
.dcol-cont__n{font-weight:600;color:var(--theme-palette-color-4,#192a3d)}
.dcol-cont__c{font-size:12px;opacity:.75}
.dcol-cont--hot{background:var(--theme-palette-color-2,#1559ed);border-color:var(--theme-palette-color-2,#1559ed)}
.dcol-cont--hot .dcol-cont__e,.dcol-cont--hot .dcol-cont__n,.dcol-cont--hot .dcol-cont__c{color:#fff;opacity:1}

/* ---------- SECCIONES Y REJILLA ---------- */
.dcol-sec{margin:40px 0}
.dcol-sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.dcol-sec__head h2{margin:0;font-size:clamp(19px,4vw,26px)}
.dcol-sec__head a{font-size:14px;white-space:nowrap}
.dcol-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:760px){.dcol-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- PAÍSES (landings de continente) ---------- */
.dcol-paises{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 34px}
.dcol-paises a{padding:6px 12px;border:1px solid var(--theme-palette-color-5,#e0e5eb);border-radius:16px;font-size:14px;text-decoration:none;background:#fff}
.dcol-paises a:hover{border-color:var(--theme-palette-color-2,#1559ed)}
.dcol-paises a span{opacity:.6;font-size:12px}

/* ---------- FACETAS ---------- */
.dcol-facets{margin:0 0 22px;padding:14px 16px;background:var(--theme-palette-color-7,#f7f8f9);border:1px solid var(--theme-palette-color-5,#e0e5eb);border-radius:8px}
.dcol-facets__h{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;opacity:.7}
.dcol-facet{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:10px}
.dcol-facet__l{flex:0 0 110px;font-size:13px;font-weight:600;color:var(--theme-palette-color-4,#192a3d)}
.dcol-facet__v{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 240px}
.dcol-chip{padding:5px 11px;border:1px solid var(--theme-palette-color-5,#e0e5eb);border-radius:15px;background:#fff;font-size:13px;text-decoration:none;line-height:1.3}
.dcol-chip span{opacity:.55;font-size:11px}
.dcol-chip:hover{border-color:var(--theme-palette-color-2,#1559ed)}
.dcol-chip.is-on{background:var(--theme-palette-color-2,#1559ed);border-color:var(--theme-palette-color-2,#1559ed);color:#fff}
.dcol-chip.is-on span{opacity:.85;color:#fff}
.dcol-facet__clear{margin:6px 0 0;font-size:13px}
@media(max-width:600px){.dcol-facet__l{flex:0 0 100%}}

/* ---------- BÚSQUEDA / BREADCRUMBS ---------- */
.dcol-searchcats{margin:0 0 22px;padding:12px 14px;background:var(--theme-palette-color-7,#f7f8f9);border-radius:6px;font-size:14px}
.dcol-searchcats a{display:inline-block;margin:4px 6px 0 0;padding:4px 10px;background:#fff;border:1px solid var(--theme-palette-color-5,#e0e5eb);border-radius:14px;text-decoration:none}
.dcol-searchcats a span{opacity:.6}
.dcol-crumbs{margin:0 0 16px;font-size:13px}
.dcol-crumbs .ct-breadcrumbs{opacity:.85}

/* ---------- 404 ---------- */
.dcol-404{padding:40px 0 60px;max-width:900px;margin:0 auto}
.dcol-404 h1{margin-bottom:8px}
.dcol-404__links{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 30px}
.dcol-404__help{margin-top:26px;font-size:14px}

/* ---------- FOOTER ---------- */
.dcol-footer{background:var(--theme-palette-color-4,#192a3d);color:#c7d2dd;padding:44px 0 28px;margin-top:56px;font-size:14px}
.dcol-footer__cols{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:760px){.dcol-footer__cols{grid-template-columns:1.4fr 1fr 1fr 1.1fr}}
.dcol-footer__brand{font-size:19px;font-weight:700;color:#fff;margin:0 0 8px}
.dcol-footer h3{color:#fff;font-size:14px;margin:0 0 10px;text-transform:uppercase;letter-spacing:.06em}
.dcol-footer ul{list-style:none;margin:0;padding:0}
.dcol-footer li{margin-bottom:6px}
.dcol-footer a{color:#c7d2dd;text-decoration:none}
.dcol-footer a:hover,.dcol-footer a:focus-visible{color:#fff;text-decoration:underline}
.dcol-footer__legal{margin:30px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;opacity:.8}
/* Oculta la fila de copyright de Blocksy, que ya quedó vacía por el filtro PHP. */
.ct-footer [data-row="bottom"]{display:none}

/* ---------- MEGA-MENÚ ---------- */
@media (min-width:1000px){
  #header [data-device="desktop"] [data-row="middle"] > .ct-container{position:relative}
  /* CRÍTICO: Blocksy inyecta data-submenu por JS con
     [class*=animated-submenu][data-submenu]{position:relative} (0,2,0).
     Sin !important gana Blocksy y el panel sale de 100px de ancho. */
  .dcol-mega{position:static!important}
  .dcol-mega > .sub-menu{left:0!important;right:0!important;width:auto!important;max-width:none!important;padding:22px 26px 26px;column-count:5;column-gap:26px;border-radius:0 0 6px 6px;border-top:3px solid var(--theme-palette-color-2,#1559ed)}
  .dcol-mega.dcol-mega-oceania > .sub-menu{column-count:3}
  .dcol-mega > .sub-menu > li{border-top:none!important;break-inside:avoid}
  /* SIN nowrap/ellipsis: bajo 1200px "Republica Dominicana" pide 200px y solo hay 149px. */
  .dcol-mega > .sub-menu > li > .ct-menu-link{padding:4px 0!important;font-size:14px;line-height:1.45;display:block}
  .dcol-hot > .ct-menu-link::after{content:"nuevo";margin-left:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--theme-palette-color-2,#1559ed);color:#fff;padding:2px 5px;border-radius:3px;vertical-align:middle}
}
/* Móvil: grid, NO column-count — Blocksy anima el acordeón con transition:height
   + overflow:hidden y las columnas CSS re-fluyen durante la animación. */
@media (max-width:999.98px){
  .mobile-menu .dcol-mega > .sub-menu{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .mobile-menu .dcol-mega > .sub-menu > li{border-top:none!important}
  .mobile-menu .dcol-mega > .sub-menu > li > .ct-menu-link{font-size:14px;padding:6px 0!important}
}

/* ------------------------------------------------------------------ *
 * Mega-menú de continentes
 * Un desplegable de 47 países en una sola columna se sale de la
 * pantalla. Se usa `column-count` (no `display`) a propósito: Blocksy
 * anima el mostrar/ocultar con display+opacity, y sobreescribir
 * `display` rompería ese hover. `column-count` convive sin tocarlo.
 * Se revierte borrando este bloque.
 * ------------------------------------------------------------------ */
@media (min-width: 1000px) {
	.header-menu-1 .menu-item-has-children > .sub-menu,
	#menu-main-menu .menu-item-has-children > .sub-menu {
		column-count: 3;
		column-gap: 8px;
		width: min(620px, 90vw);
		max-height: min(70vh, 640px);
		overflow-y: auto;
		padding-block: 10px;
	}

	/* Un país no debe partirse entre dos columnas. */
	.header-menu-1 .menu-item-has-children > .sub-menu > li,
	#menu-main-menu .menu-item-has-children > .sub-menu > li {
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
		width: 100%;
	}

	.header-menu-1 .menu-item-has-children > .sub-menu a,
	#menu-main-menu .menu-item-has-children > .sub-menu a {
		font-size: 14px;
		padding-block: 5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Oceanía solo trae 7 países: con 3 columnas se ve raro. */
@media (min-width: 1000px) {
	#menu-main-menu > li:nth-last-child(4) > .sub-menu { column-count: 1; width: auto; }
}

/* ------------------------------------------------------------------ *
 * Breadcrumbs: Blocksy los pinta sin separador cuando el tema hijo
 * no hereda su variable, y salen pegados ("INICIOTIENDA").
 * Se añade el separador y el espaciado. Revertir = borrar este bloque.
 * ------------------------------------------------------------------ */
.ct-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	line-height: 1.6;
}

.ct-breadcrumbs > *:not(:last-child)::after {
	content: "/";
	margin-inline-start: 6px;
	opacity: .45;
}

.ct-breadcrumbs a { text-decoration: none; }
.ct-breadcrumbs a:hover { text-decoration: underline; }