/*
Theme Name: CUBOX
Theme URI: https://cubox.gt
Author: CUBOX
Description: Tema de bloques para CUBOX Guatemala: casillero en Miami, compras por internet y carga aérea y marítima. Todo el contenido se edita desde Apariencia → Editor.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cubox
*/

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
.wp-site-blocks { padding: 0; }
a:focus-visible, .wp-element-button:focus-visible { outline: 3px solid var(--wp--preset--color--oro); outline-offset: 3px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 96px; }

/* ---------- Header ---------- */
.cubox-header-wrap { position: sticky; top: 0; z-index: 50; }
.admin-bar .cubox-header-wrap { top: 32px; }
@media (max-width: 782px) { .admin-bar .cubox-header-wrap { top: 46px; } }
@media (max-width: 600px) { .admin-bar .cubox-header-wrap { top: 0; } }
.cubox-header {
	background: var(--wp--preset--color--blanco);
	border-bottom: 1px solid rgba(22, 50, 79, .08);
	padding: 14px clamp(20px, 5vw, 64px);
}
.cubox-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1200px; margin: 0 auto; }
.cubox-logo { margin: 0 !important; }
.cubox-logo img { width: 150px; height: auto; display: block; }
.cubox-header .wp-block-navigation { font-weight: 600; font-size: .95rem; gap: 28px; }
.cubox-header .wp-block-navigation a:hover { color: var(--wp--preset--color--azul); }
.cubox-header__actions { display: flex; align-items: center; gap: 24px; }
@media (max-width: 900px) { .cubox-header__cta { display: none; } }

/* ---------- Sections ---------- */
.cubox-section { padding: clamp(64px, 9vw, 120px) clamp(20px, 5vw, 64px); }
.cubox-section > * { max-width: 1200px; margin-left: auto !important; margin-right: auto !important; }
.cubox-lede { font-size: 1.15rem; max-width: 60ch; }

/* ---------- Hero ---------- */
.cubox-hero { margin: 0 !important; gap: 0 !important; }
.cubox-hero > .wp-block-column { margin: 0 !important; }
.cubox-hero__text { padding: clamp(48px, 7vw, 104px) clamp(20px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.cubox-hero__text > * { max-width: 34rem; }
.cubox-hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: .98; letter-spacing: -0.045em; margin: 0 0 24px; }
.cubox-hero__photo { margin: 0 !important; height: 100%; }
.cubox-hero__photo img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; object-position: 40% 60%; display: block; }
.cubox-hero .wp-block-buttons { margin-top: 32px; }
.cubox-hero__note { font-size: .9rem; margin-top: 16px; }
@media (max-width: 781px) {
	.cubox-hero__photo-col { order: -1; }
	.cubox-hero__photo img { min-height: 240px; max-height: 320px; }
}

/* ---------- About ---------- */
.cubox-about .wp-block-columns { gap: clamp(32px, 6vw, 96px); }
.cubox-about h2 { max-width: 14ch; }

/* ---------- Services: each card takes a face of the cube ---------- */
.cubox-services h2 { margin-bottom: 48px; }
.cubox-services .wp-block-columns { gap: 24px; }
.cubox-card {
	background: var(--wp--preset--color--blanco);
	border-radius: 4px 4px 16px 16px;
	padding: 36px 32px 32px;
	border-top: 10px solid var(--wp--preset--color--azul);
	align-self: stretch;
}
.cubox-card--celeste { border-top-color: var(--wp--preset--color--celeste); }
.cubox-card--oro { border-top-color: var(--wp--preset--color--oro); }
.cubox-card h3 { font-size: 1.4rem; margin: 0 0 12px; }
.cubox-card p { margin: 0; }

/* ---------- How it works: a real sequence, so it is numbered ---------- */
.cubox-steps { counter-reset: paso; }
.cubox-steps .wp-block-columns { gap: 40px; margin-top: 48px; }
.cubox-step { counter-increment: paso; border-top: 2px solid rgba(255,255,255,.35); padding-top: 24px; }
.cubox-step::before {
	content: counter(paso);
	display: block;
	font-weight: 800; font-size: 3.5rem; line-height: 1; letter-spacing: -0.04em;
	color: var(--wp--preset--color--oro);
	margin-bottom: 16px;
}
.cubox-step h3 { color: var(--wp--preset--color--blanco); font-size: 1.3rem; margin: 0 0 10px; }
.cubox-steps .wp-block-buttons { margin-top: 56px; }

/* ---------- Te lo compramos ---------- */
.cubox-buy .wp-block-columns { align-items: center; gap: 48px; }
.cubox-buy h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.035em; line-height: 1.05; }
.cubox-buy__cube { margin: 0 !important; }
.cubox-buy__cube img { width: min(220px, 60%); height: auto; display: block; margin: 0 auto; }
@media (max-width: 781px) { .cubox-buy__cube { display: none; } }

/* ---------- Contact ---------- */
.cubox-contact .wp-block-columns { gap: 48px; margin-top: 40px; }
.cubox-contact h3 { font-size: 1.1rem; margin: 0 0 8px; color: var(--wp--preset--color--azul); }
.cubox-contact p { margin: 0 0 6px; }
.cubox-contact a { color: inherit; }

/* ---------- Footer ---------- */
.cubox-footer { background: var(--wp--preset--color--niebla); padding: 56px clamp(20px, 5vw, 64px) 40px; }
.cubox-footer__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }
.cubox-footer__logo { margin: 0 !important; }
.cubox-footer__logo img { width: 120px; height: auto; display: block; }
.cubox-footer p { margin: 0 0 4px; font-size: .9rem; }
.cubox-footer a { color: inherit; }
.cubox-stripe { display: flex; height: 8px; }
.cubox-stripe span { flex: 1; }

/* ---------- Buttons ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link { border: 2px solid currentColor; background: transparent; color: var(--wp--preset--color--tinta); }
.cubox-btn-oro > .wp-block-button__link { background: var(--wp--preset--color--oro); color: var(--wp--preset--color--tinta); }
.cubox-btn-oro > .wp-block-button__link:hover { background: var(--wp--preset--color--durazno); }
.wp-block-button__link { transition: background-color .15s ease; }

/* ---------- Inner pages ---------- */
.cubox-page { padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px); }