/* =============================================================================
   La Caja (page-la-caja.php y single-gusto_box.php). Los campos del regalo reutilizan giftcard.css (gc-*).
   ========================================================================== */

/* Portada */
.la-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.la-hero .ey, .la-gift .ey { color: var(--gold); }
.la-hero .ey::before, .la-gift .ey::before { background: var(--gold); }
.la-hero h1 { margin: 16px 0 20px; font-size: clamp(40px, 5.2vw, 74px); font-weight: 200; letter-spacing: -.05em; line-height: 1; color: #fff; text-wrap: balance; }
.la-hero h1 b { font-weight: 600; color: #F1DDB4; }
.la-hero-txt > p { max-width: 520px; margin: 0; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: #C9D0DC; text-wrap: pretty; }
.la-hero-txt > p.la-price { margin-top: 28px; font-size: 17px; color: #fff; }
.la-price b { font-size: 46px; font-weight: 300; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.la-price span { color: #C9D0DC; font-size: 15px; }
.la-hero .woocommerce-notices-wrapper:not(:empty) { margin-top: 20px; }
.la-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.la-start { margin: 0; }
.la-ctas .lnk { font-weight: 600; color: #fff; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.la-ticks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 14px; color: #C9D0DC; }
.la-ticks li::before { content: "◆"; margin-right: 8px; font-size: 9px; color: var(--gold); vertical-align: 2px; }

/* La caja ilustrada con los dos vinos del mes */
.la-hero-box { display: flex; justify-content: center; }
.la-crate { position: relative; width: min(100%, 460px); aspect-ratio: 1 / 1.02; }
.la-bottles { position: absolute; left: 7%; right: 7%; top: 0; bottom: 34%; display: flex; justify-content: center; align-items: flex-end; overflow: hidden; border-radius: 22px 22px 0 0; background: linear-gradient(180deg, #F6EAD2, #E9D7B2); }
.la-bottles img { width: 64%; height: auto; margin: 0 -10% -30%; mix-blend-mode: multiply; } /* Fotos con fondo claro: se funden con la caja */
.la-crate-front { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.8vw, 30px); overflow: hidden; border-radius: 22px; background: linear-gradient(135deg, #2A4170 0%, #16243F 55%, #0A0A0C 100%); border: 1px solid rgba(218, 191, 137, .5); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8); }
.la-crate-front::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(218, 191, 137, .08) 0 1px, transparent 1px 11px); }
.la-crate-front > * { position: relative; }
.la-crate-logo { width: 104px; color: #F4EBDD; }
.la-crate-logo svg { display: block; width: 100%; height: auto; }
.la-crate-ttl { align-self: end; font-size: clamp(34px, 3.6vw, 46px); font-weight: 200; letter-spacing: -.05em; line-height: 1; color: #fff; }
.la-crate-ttl b { font-weight: 600; color: #F1DDB4; }
.la-crate-month { margin-top: 8px; overflow: hidden; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); white-space: nowrap; text-overflow: ellipsis; }

/* Cómo funciona y por qué */
.steps.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.la-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.la-why > div { padding: 26px 26px 28px; border-radius: 22px; background: var(--paper); }
.la-why b { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.la-why b::before { content: ""; width: 9px; height: 9px; transform: rotate(45deg); background: var(--gold); }
.la-why p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }

/* La caja de este mes */
.la-month .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.la-cat { display: inline-flex; margin-bottom: 14px; padding: 5px 14px; border-radius: var(--r-pill); background: var(--gold-soft); color: var(--gold-ink); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; }
.la-month h2 { margin: 0 0 14px; font-size: clamp(32px, 3.8vw, 52px); font-weight: 200; letter-spacing: -.04em; line-height: 1.04; }
.la-month-txt p { max-width: 460px; margin: 0 0 26px; font-size: 17px; color: var(--muted); }
.prod-grid.la-wines { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }

/* Fichas */
.la-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.la-cats-item { padding: 24px 22px; border-top: 3px solid var(--gold); border-radius: 4px 4px 18px 18px; background: var(--paper); }
.la-cats-item--variedad { border-top-color: var(--royal); }
.la-cats-item--estilo { border-top-color: var(--navy); }
.la-cats-item--momentos { border-top-color: var(--gold-ink); }
.la-cats-item b { font-size: 21px; font-weight: 300; letter-spacing: -.02em; }
.la-cats-item p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* Envíos */
.la-ship { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.la-ship-table { width: 100%; margin: 0 0 22px; border-collapse: collapse; }
.la-ship-table th, .la-ship-table td { padding: 16px 4px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.la-ship-table th { font-size: 16px; font-weight: 500; }
.la-ship-table td { font-size: 20px; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.la-ship-table td span { font-size: 13px; font-weight: 400; color: var(--muted); }
.la-cal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.la-cal li { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; background: var(--bg); }
.la-cal b { font-size: 18px; font-weight: 600; color: var(--navy); }
.la-cal span { font-size: 14px; color: var(--muted); }

/* Regalo */
.la-gift .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.la-gift h2 { margin: 16px 0 18px; font-size: clamp(32px, 3.8vw, 52px); font-weight: 200; letter-spacing: -.04em; line-height: 1.04; color: #fff; }
.la-gift h2 b { font-weight: 600; color: #F1DDB4; }
.la-gift-txt > p { max-width: 460px; margin: 0; font-size: 17px; line-height: 1.6; color: #C9D0DC; }
.la-gift-form { color: var(--ink); }
.la-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.la-month-opt { position: relative; cursor: pointer; }
.la-month-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.la-month-opt > span { position: relative; display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 14px; transition: border-color var(--t), background var(--t), color var(--t); }
.la-month-opt b { font-size: 15px; font-weight: 600; }
.la-month-opt em { font-style: normal; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.la-month-opt i { position: absolute; top: 10px; right: 10px; padding: 2px 7px; border-radius: var(--r-pill); background: var(--gold-soft); color: var(--gold-ink); font-size: 11.5px; font-style: normal; font-weight: 700; }
.la-month-opt:hover > span { border-color: var(--ink); }
.la-month-opt input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.la-month-opt input:checked + span em { color: #C9D0DC; }
.la-month-opt input:focus-visible + span { box-shadow: var(--ring); }
.la-gift-form.is-js .gc-date:not(.is-on) { display: none; }

/* Activar y ediciones */
.la-activate { padding-block: clamp(40px, 5vw, 64px); }
.la-editions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.la-edition { display: grid; align-content: start; gap: 6px; padding: 24px 24px 26px; border-radius: 20px; background: var(--paper); transition: transform var(--t), box-shadow var(--t); }
.la-edition:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.la-edition-meta { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.la-edition b { margin-bottom: 6px; font-size: 21px; font-weight: 400; letter-spacing: -.02em; line-height: 1.2; }
.la-edition-wine { font-size: 14.5px; color: var(--muted); }
.la-edition-wine::before { content: "◆"; margin-right: 8px; font-size: 8px; color: var(--gold); vertical-align: 2px; }

/* Ficha de una caja (single-gusto_box.php) */
.box-hero { padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 64px); background: radial-gradient(55% 120% at 100% 0%, rgba(218, 191, 137, .24), transparent 62%), var(--bg); }
.box-hero h1 { max-width: 16ch; margin: 14px 0 14px; font-size: clamp(40px, 5.2vw, 72px); font-weight: 200; letter-spacing: -.045em; line-height: 1.02; }
.box-hero p { max-width: 620px; margin: 0; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; font-weight: 300; color: var(--muted); }
.box-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.box-ficha { max-width: 680px; font-size: 17px; line-height: 1.75; }
.box-ficha h2 { margin: 36px 0 8px; font-size: 24px; font-weight: 400; letter-spacing: -.02em; }
.box-ficha h2:first-child { margin-top: 0; }
.box-side { position: sticky; top: 120px; display: grid; gap: 18px; }
.box-side .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.box-cta { padding: 22px 24px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, var(--navy-2), var(--navy) 60%, var(--ink)); }
.box-cta b { display: block; margin-bottom: 4px; font-size: 19px; font-weight: 500; }
.box-cta p { margin: 0 0 14px; font-size: 14.5px; color: #C9D0DC; }
.box-demo { margin-top: 32px; }

@media (max-width: 1000px) {
	.steps.steps--4, .la-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.la-hero .wrap, .la-month .wrap, .la-ship, .la-gift .wrap, .box-body { grid-template-columns: minmax(0, 1fr); }
	.la-crate { width: min(100%, 320px); }
	.la-editions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.box-side { position: static; }
}
@media (max-width: 600px) {
	.steps.steps--4, .la-why, .la-cats, .la-editions, .la-cal { grid-template-columns: minmax(0, 1fr); }
	.la-months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.la-price b { font-size: 38px; }
}