/* Base: reset, tipografía, utilidades, botones, header, footer. Mobile-first. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--boll-header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--boll-color-bg);
	color: var(--boll-color-text);
	font-family: var(--boll-font-body);
	font-size: var(--boll-fs-body);
	line-height: var(--boll-lh-body);
	overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
/* Los iconos son SVG inline sin width/height propios: sin este tamaño por defecto el navegador les da 300x150.
   Las reglas por componente son más específicas y mandan sobre esta. */
svg { display: block; width: 1em; height: 1em; flex-shrink: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--boll-color-primary); outline-offset: 3px; }

.boll-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.boll-skip { position: absolute; left: -999px; top: 8px; z-index: 200; padding: .6rem 1rem; background: var(--boll-color-primary); color: var(--boll-color-text); border-radius: var(--boll-radius-sm); }
.boll-skip:focus { left: 8px; }

/* Piezas comunes de sección (las usan todos los widgets) */
.boll-section { position: relative; padding-block: var(--boll-space-section); background: var(--boll-color-bg); }
.boll-section--alt { background: var(--boll-color-bg-alt); }
.boll-inner { width: min(100% - 2 * var(--boll-gutter), var(--boll-container)); margin-inline: auto; position: relative; z-index: 1; }

.boll-eyebrow {
	display: inline-flex; align-items: center; gap: .6rem;
	font-size: var(--boll-fs-small); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--boll-color-primary); margin-bottom: 1rem;
}
.boll-eyebrow::before { content: ''; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }

.boll-h2 {
	font-family: var(--boll-font-display); font-weight: var(--boll-fw-display); text-transform: uppercase;
	font-size: var(--boll-fs-h2); line-height: var(--boll-lh-display); letter-spacing: .01em;
}
.boll-h2 em, .boll-hero__title em { font-style: normal; color: var(--boll-color-primary); }
.boll-lead { font-size: var(--boll-fs-lead); color: var(--boll-color-muted); max-width: 62ch; margin-top: 1.1rem; }
.boll-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.boll-head--center { text-align: center; }
.boll-head--center .boll-lead { margin-inline: auto; }

/* Botones */
.boll-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	padding: .95rem 1.7rem; border-radius: var(--boll-radius-pill); border: 1.5px solid transparent;
	background: var(--boll-color-primary); color: var(--boll-color-text); font-weight: 700; font-size: 1rem; line-height: 1.25;
	cursor: pointer; transition: transform .25s var(--boll-ease), box-shadow .25s var(--boll-ease), background .25s, border-color .25s;
	box-shadow: var(--boll-glow);
}
.boll-btn svg { width: 1.1rem; height: 1.1rem; transition: transform .25s var(--boll-ease); }
.boll-btn:hover { background: var(--boll-color-primary-dark); transform: translateY(-2px); }
.boll-btn:hover svg { transform: translateX(3px); }
.boll-btn--ghost { background: transparent; border-color: var(--boll-color-border-strong); box-shadow: none; }
.boll-btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: var(--boll-color-text); }
.boll-btn--sm { padding: .6rem 1.2rem; font-size: .92rem; }
.boll-btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* Animación de entrada. Sin JS o con movimiento reducido, todo visible. */
.boll-js .boll-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--boll-ease), transform .7s var(--boll-ease); transition-delay: var(--boll-delay, 0s); }
.boll-js .boll-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.boll-js .boll-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Header ---------- */
.boll-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--boll-header-h); display: flex; align-items: center; transition: background .3s, backdrop-filter .3s, border-color .3s; border-bottom: 1px solid transparent; }
.boll-header.is-scrolled { background: rgba(5, 5, 5, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--boll-color-border); }
.boll-header__inner { width: min(100% - 2 * var(--boll-gutter), var(--boll-container)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.boll-header__logo img { height: 48px; width: auto; }
.boll-nav { display: none; }
.boll-nav ul { display: flex; gap: 2rem; }
.boll-nav a { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--boll-color-muted); transition: color .2s; padding-block: .4rem; position: relative; }
.boll-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--boll-color-primary); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--boll-ease); }
.boll-nav a:hover, .boll-nav .current-menu-item > a { color: var(--boll-color-text); }
.boll-nav a:hover::after, .boll-nav .current-menu-item > a::after { transform: scaleX(1); }
.boll-header__actions { display: none; align-items: center; gap: .9rem; }
.boll-social { display: flex; gap: .5rem; }
.boll-social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--boll-color-muted); transition: color .2s, background .2s; }
.boll-social a:hover { color: var(--boll-color-text); background: rgba(255, 255, 255, .1); }
.boll-social svg { width: 1.15rem; height: 1.15rem; }

.boll-burger { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--boll-color-border-strong); border-radius: 50%; background: transparent; cursor: pointer; }
.boll-burger span, .boll-burger span::before, .boll-burger span::after { content: ''; display: block; width: 18px; height: 2px; background: var(--boll-color-text); border-radius: 2px; transition: transform .3s var(--boll-ease), background .2s; }
.boll-burger span { position: relative; }
.boll-burger span::before { position: absolute; top: -6px; }
.boll-burger span::after { position: absolute; top: 6px; }
.boll-burger[aria-expanded="true"] span { background: transparent; }
.boll-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.boll-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.boll-drawer { position: fixed; inset: 0; z-index: 99; background: rgba(5, 5, 5, .97); padding: calc(var(--boll-header-h) + 1.5rem) var(--boll-gutter) 2rem; display: flex; flex-direction: column; gap: 2rem; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .3s, transform .3s var(--boll-ease), visibility .3s; overflow-y: auto; }
.boll-drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.boll-drawer ul { display: grid; gap: .25rem; }
.boll-drawer li a { display: block; padding: .8rem 0; font-family: var(--boll-font-display); font-weight: var(--boll-fw-display); font-size: 2.25rem; text-transform: uppercase; border-bottom: 1px solid var(--boll-color-border); }
.boll-drawer__cta { display: grid; gap: .75rem; }
.boll-drawer__cta .boll-btn { width: 100%; }
body.boll-no-scroll { overflow: hidden; }

@media (min-width: 1025px) {
	.boll-nav { display: block; }
	.boll-header__actions { display: flex; }
	.boll-burger, .boll-drawer { display: none; }
}

/* ---------- Footer ---------- */
.boll-footer { background: var(--boll-color-bg); border-top: 1px solid var(--boll-color-border); padding-top: clamp(3rem, 7vw, 5rem); }
.boll-footer__top { width: min(100% - 2 * var(--boll-gutter), var(--boll-container)); margin-inline: auto; display: grid; gap: 2.5rem; text-align: center; justify-items: center; }
.boll-footer__logo img { height: 64px; width: auto; }
.boll-footer__label { font-size: var(--boll-fs-small); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--boll-color-faint); margin-bottom: .9rem; }
.boll-flags { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.boll-flags img { width: 40px; height: 27px; object-fit: cover; border-radius: 4px; }
.boll-footer__mail a { color: var(--boll-color-text); font-weight: 600; border-bottom: 1px solid var(--boll-color-border-strong); transition: border-color .2s, color .2s; }
.boll-footer__mail a:hover { color: var(--boll-color-primary); border-color: var(--boll-color-primary); }
.boll-footer__menu ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: center; }
.boll-footer__menu a { color: var(--boll-color-muted); font-size: .9rem; }
.boll-footer__menu a:hover { color: var(--boll-color-text); }
.boll-footer__copy { margin-top: clamp(2.5rem, 6vw, 4rem); padding-block: 1.5rem; border-top: 1px solid var(--boll-color-border); text-align: center; color: var(--boll-color-faint); font-size: var(--boll-fs-small); }

/* ---------- WhatsApp flotante (apagado por defecto; se enciende en el Personalizador) ---------- */
.boll-wa { position: fixed; bottom: 1.25rem; z-index: 90; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: #25D366; /* verde de la marca WhatsApp, no del tema */ color: var(--boll-color-text); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); transition: transform .2s var(--boll-ease); }
.boll-wa--derecha { right: 1.25rem; }
.boll-wa--izquierda { left: 1.25rem; }
.boll-wa:hover { transform: translateY(-3px) scale(1.05); }
.boll-wa svg { width: 1.75rem; height: 1.75rem; }
@media (max-width: 767px) { .boll-wa--solo-desktop { display: none; } }

/* ---------- Contenido genérico (páginas, entradas, 404) ---------- */
.boll-page { padding-top: calc(var(--boll-header-h) + clamp(2rem, 6vw, 4rem)); padding-bottom: var(--boll-space-section); }
.boll-page__inner { width: min(100% - 2 * var(--boll-gutter), 820px); margin-inline: auto; }
.boll-page__title { font-family: var(--boll-font-display); font-weight: var(--boll-fw-display); text-transform: uppercase; font-size: var(--boll-fs-h2); line-height: var(--boll-lh-display); margin-bottom: 1.5rem; }
.boll-prose { color: var(--boll-color-muted); font-size: 1.075rem; }
.boll-prose > * + * { margin-top: 1.25em; }
.boll-prose h2, .boll-prose h3 { color: var(--boll-color-text); font-weight: 800; line-height: 1.25; margin-top: 2em; }
.boll-prose h2 { font-size: 1.75rem; }
.boll-prose h3 { font-size: 1.35rem; }
.boll-prose a { color: var(--boll-color-primary); text-decoration: underline; text-underline-offset: 3px; }
.boll-prose ul { list-style: disc; padding-left: 1.4rem; }
.boll-prose ol { list-style: decimal; padding-left: 1.4rem; }
.boll-prose li + li { margin-top: .4em; }
.boll-prose img { border-radius: var(--boll-radius-sm); }
.boll-prose blockquote { border-left: 3px solid var(--boll-color-primary); padding-left: 1.2rem; color: var(--boll-color-text); }
.boll-meta { color: var(--boll-color-faint); font-size: var(--boll-fs-small); margin-bottom: 2rem; }
.boll-404 { text-align: center; min-height: 70vh; display: grid; place-content: center; gap: 1rem; padding: calc(var(--boll-header-h) + 2rem) var(--boll-gutter) 3rem; }
.boll-404 h1 { font-family: var(--boll-font-display); font-weight: var(--boll-fw-display); font-size: clamp(6rem, 22vw, 14rem); line-height: .9; color: var(--boll-color-primary); font-weight: 400; }