/* =============================================================================
   Los Caseros — Home (Fase 3)
   Hero · CategoryGrid · BrandValues · LeafDivider · PromoBanner · Newsletter
   Traducción de Hero.jsx + Sections.jsx del prototipo.
   ============================================================================= */

/* =============================== HERO ===================================== */
.lc-hero {
	position: relative;
	overflow: hidden;
	background: #0E3A05;
	isolation: isolate;
	min-height: calc(100vh - 170px);
	max-height: 880px;
	display: flex;
	align-items: center;
	/* CTA amber (no usar verde de marca sobre el video verde) */
	--lc-accent: #C8861D;
	--lc-accent-ink: #1B1A12;
	--lc-accent-hover: #E0993E;
}
.lc-hero-video-wrap {
	position: absolute;
	inset: -4% -2%;
	z-index: 0;
	transform: scale(1.06);
}
.lc-hero-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(1.05);
	transition: filter 1200ms var(--lc-ease-organic);
}
/* En slides de producto, el video se difumina para que resalte el producto. */
.lc-hero.is-product-slide .lc-hero-video { filter: blur(7px) saturate(1.05); }
.lc-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(100deg,
			rgba(14, 58, 5, 0.72) 0%,
			rgba(14, 58, 5, 0.52) 40%,
			rgba(14, 58, 5, 0.32) 72%,
			rgba(14, 58, 5, 0.48) 100%),
		radial-gradient(120% 90% at 0% 50%,
			rgba(0, 0, 0, 0.32) 0%,
			rgba(0, 0, 0, 0.10) 45%,
			rgba(0, 0, 0, 0.00) 75%);
}
.lc-hero-vignette {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(140% 100% at 50% 100%, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 60%);
}
.lc-hero-leaf {
	position: absolute;
	z-index: 2;
	pointer-events: none;
}
.lc-hero-leaf--top { top: -40px; right: -40px; width: 280px; height: 280px; opacity: 0.18; transform: rotate(20deg); }
.lc-hero-leaf--bottom { bottom: -50px; left: -30px; width: 200px; height: 200px; opacity: 0.10; transform: rotate(-30deg); }

.lc-hero-stage {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 96px 24px 120px;
}
/* Carrusel: slides apilados en la misma área, con cross-fade. */
.lc-hero-slides { position: relative; min-height: 520px; }
.lc-hero-slide {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 640ms var(--lc-ease-organic), transform 640ms var(--lc-ease-organic);
	pointer-events: none;
}
.lc-hero-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.lc-hero-content { max-width: 680px; }

/* ----- Slides de producto ----- */
.lc-hero-product-title { font-family: var(--lc-font-display); font-weight: 400; font-size: clamp(36px, 5.4vw, 64px); line-height: 1; color: var(--lc-cream-100); letter-spacing: -0.01em; margin: 0 0 18px; text-wrap: balance; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.32); }
.lc-hero-product-desc { font-family: var(--lc-font-body); font-size: 15px; line-height: 1.55; color: rgba(251, 246, 236, 0.88); margin: 0 0 24px; max-width: 460px; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28); }
.lc-hero-product-prices { display: flex; align-items: baseline; gap: 14px; margin-bottom: 28px; }
.lc-hero-product-price { font-family: var(--lc-font-body); font-size: 32px; font-weight: var(--lc-w-extrabold); color: var(--lc-cream-100); letter-spacing: -0.01em; }
.lc-hero-product-oldprice { font-family: var(--lc-font-body); font-size: 16px; font-weight: var(--lc-w-medium); color: rgba(251, 246, 236, 0.55); text-decoration: line-through; }
.lc-hero-product-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.lc-hero-product-chip { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: var(--lc-radius-pill); background: rgba(251, 246, 236, 0.10); border: 1px solid rgba(251, 246, 236, 0.22); color: rgba(251, 246, 236, 0.92); font-family: var(--lc-font-body); font-size: 11px; font-weight: var(--lc-w-semibold); letter-spacing: 0.04em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lc-hero-product-visual { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 460px; margin-left: auto; }
.lc-hero-product-bubble { position: absolute; inset: 0; border-radius: 58% 42% 53% 47% / 48% 58% 42% 52%; overflow: hidden; background: rgba(251, 246, 236, 0.08); box-shadow: 0 32px 80px rgba(0, 0, 0, 0.36); border: 1px solid rgba(251, 246, 236, 0.22); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.lc-hero-product-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-hero-product-tag { position: absolute; top: 18px; left: 18px; z-index: 2; background: var(--lc-cream-50); color: var(--lc-green-800); font-family: var(--lc-font-body); font-size: 11px; font-weight: var(--lc-w-bold); text-transform: uppercase; letter-spacing: 0.10em; padding: 7px 12px; border-radius: var(--lc-radius-pill); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); }

/* ----- Paginación (flechas + dots animados) ----- */
.lc-hero-pagination { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: rgba(14, 58, 5, 0.32); border: 1px solid rgba(251, 246, 236, 0.16); border-radius: var(--lc-radius-pill); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lc-hero-dots { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.lc-hero-arrow { width: 32px; height: 32px; padding: 0; border-radius: var(--lc-radius-pill); border: none; background: rgba(251, 246, 236, 0.10); color: var(--lc-cream-100); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 180ms ease, transform 180ms ease; }
.lc-hero-arrow svg { width: 20px; height: 20px; }
.lc-hero-arrow:hover { background: rgba(251, 246, 236, 0.22); transform: scale(1.06); }
.lc-hero-arrow:active { transform: scale(0.94); }
.lc-hero-dot { position: relative; width: 28px; height: 4px; border-radius: var(--lc-radius-pill); background: rgba(251, 246, 236, 0.28); border: none; padding: 0; cursor: pointer; overflow: hidden; transition: width 280ms ease; }
.lc-hero-dot.is-active { width: 56px; background: rgba(251, 246, 236, 0.22); }
.lc-hero-dot.is-active::after { content: ''; position: absolute; inset: 0; background: var(--lc-cream-100); transform-origin: left; animation: lc-hero-progress 6000ms linear forwards; }
.lc-hero.is-paused .lc-hero-dot.is-active::after { animation-play-state: paused; }
@keyframes lc-hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.lc-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(251, 246, 236, 0.16);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--lc-cream-100);
	padding: 8px 16px;
	border-radius: var(--lc-radius-pill);
	font-size: 12px;
	font-weight: var(--lc-w-semibold);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-family: var(--lc-font-body);
	margin-bottom: 24px;
	border: 1px solid rgba(251, 246, 236, 0.22);
}
.lc-hero-title {
	font-family: var(--lc-font-display);
	font-weight: 400;
	font-size: clamp(44px, 7.4vw, 92px);
	line-height: 0.98;
	color: var(--lc-cream-100);
	margin: 0;
	letter-spacing: -0.02em;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.32);
	max-width: 14ch;
}
.lc-hero-title-accent { color: #C6E5A6; display: block; }
.lc-hero-lede {
	font-family: var(--lc-font-body);
	font-size: clamp(15px, 1.25vw, 19px);
	line-height: 1.55;
	color: rgba(251, 246, 236, 0.92);
	margin: 24px 0 36px;
	max-width: 540px;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.32);
}
.lc-hero-lede strong { color: var(--lc-cream-100); font-weight: var(--lc-w-semibold); }

.lc-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.lc-hero-ctas .lc-btn--primary {
	background: var(--lc-accent);
	color: var(--lc-accent-ink);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.lc-hero-ctas .lc-btn--primary:hover {
	background: var(--lc-accent-hover);
	color: var(--lc-accent-ink);
	transform: translateY(-1px);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
}
.lc-hero-ctas .lc-btn--ghost {
	background: rgba(251, 246, 236, 0.10);
	color: var(--lc-cream-100);
	box-shadow: inset 0 0 0 1px rgba(251, 246, 236, 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.lc-hero-ctas .lc-btn--ghost:hover { background: rgba(251, 246, 236, 0.22); }

.lc-hero-trust {
	margin-top: 40px;
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
	color: rgba(251, 246, 236, 0.82);
	font-family: var(--lc-font-body);
	font-size: 13px;
	font-weight: var(--lc-w-medium);
}
.lc-hero-trust > span { display: inline-flex; align-items: center; gap: 8px; }
.lc-hero-trust .lc-icon { color: #C6E5A6; }

@media (max-width: 980px) {
	.lc-hero-slides { min-height: 720px; }
	.lc-hero-slide { grid-template-columns: 1fr; gap: 28px; }
	.lc-hero-product-visual { order: -1; max-width: 320px; margin: 0 auto; }
	.lc-hero-leaf--bottom { display: none; }
}
@media (max-width: 760px) {
	.lc-hero { min-height: calc(100vh - 120px); }
	.lc-hero-stage { padding: 72px 24px 110px; }
	.lc-hero-trust { gap: 16px; font-size: 12px; }
}
@media (max-width: 640px) {
	.lc-hero-slides { min-height: 680px; }
	.lc-hero-product-visual { max-width: 260px; }
	.lc-hero-product-price { font-size: 28px; }
}

/* =========================== SECTION HEADINGS ============================= */
.lc-section { padding: 64px 0; background: var(--lc-cream-100); }
.lc-section__head { text-align: center; margin-bottom: 48px; }
.lc-section__eyebrow {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: var(--lc-w-semibold);
	color: var(--lc-green-700);
	font-family: var(--lc-font-body);
}
.lc-section__title {
	font-family: var(--lc-font-display);
	font-weight: 400;
	font-size: 48px;
	color: var(--lc-green-800);
	margin: 8px 0 12px;
	letter-spacing: -0.02em;
	line-height: 1;
}
.lc-section__sub {
	font-family: var(--lc-font-body);
	font-size: 15px;
	color: var(--lc-ink-500);
	margin: 0 auto;
	max-width: 520px;
}

/* ============================ CATEGORY GRID ============================== */
.lc-cat-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 22px;
}
.lc-cat-tile {
	border: 0;
	background: transparent;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 12px 4px;
	border-radius: 18px;
	text-decoration: none;
	font-family: var(--lc-font-body);
	transition: transform 220ms var(--lc-ease-organic);
}
.lc-cat-tile:hover { transform: translateY(-4px); }
.lc-cat-tile__photo {
	width: 132px;
	height: 132px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--lc-cream-200);
	position: relative;
	border: 3px solid transparent;
	box-shadow: 0 4px 12px rgba(60, 38, 3, 0.06);
	transition: all 240ms var(--lc-ease-organic);
}
.lc-cat-tile:hover .lc-cat-tile__photo {
	border-color: var(--lc-green-800);
	box-shadow: 0 18px 40px rgba(60, 38, 3, 0.14);
}
.lc-cat-tile__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 540ms var(--lc-ease-organic);
}
.lc-cat-tile:hover .lc-cat-tile__photo img { transform: scale(1.08); }
.lc-cat-tile__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: inset 0 0 0 3px rgba(251, 246, 236, 0.7);
	pointer-events: none;
}
.lc-cat-tile__badge {
	position: absolute;
	bottom: 6px;
	right: 6px;
	width: 30px;
	height: 30px;
	border-radius: var(--lc-radius-pill);
	background: var(--lc-cream-50);
	color: var(--lc-green-800);
	border: 1px solid var(--lc-border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 200ms var(--lc-ease);
}
.lc-cat-tile:hover .lc-cat-tile__badge { background: var(--lc-green-800); color: var(--lc-cream-100); }
.lc-cat-tile__name { font-weight: var(--lc-w-semibold); font-size: 15px; color: var(--lc-ink-900); text-align: center; text-wrap: balance; }

@media (max-width: 980px) { .lc-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .lc-cat-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================ BRAND VALUES =============================== */
.lc-values-section { padding: 72px 0 32px; background: var(--lc-cream-100); }
/* minmax(0, 1fr) y no 1fr: `1fr` nunca baja del ancho mínimo del contenido, así
   que con una palabra larga la columna se plantaba y el grid empujaba la página
   a lo ancho (aparecía scroll horizontal en tablet). */
.lc-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.lc-value-card {
	background: var(--lc-cream-50);
	border-radius: 20px;
	padding: 26px 24px;
	box-shadow: var(--lc-shadow-sm);
	display: flex;
	gap: 16px;
	align-items: flex-start;
	font-family: var(--lc-font-body);
	transition: transform 220ms var(--lc-ease-organic), box-shadow 220ms var(--lc-ease);
}
.lc-value-card:hover { transform: translateY(-4px); box-shadow: var(--lc-shadow-lg); }
.lc-value-card__icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--lc-green-100);
	color: var(--lc-green-800);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
/* El bloque de texto va junto al icono, que no se encoge: sin min-width:0 el
   texto impone su ancho mínimo y arrastra a la tarjeta. */
.lc-value-card > div { min-width: 0; }
.lc-value-card__title { font-weight: var(--lc-w-bold); font-size: 15px; color: var(--lc-ink-900); overflow-wrap: break-word; }
.lc-value-card__sub { font-size: 13.5px; color: var(--lc-ink-500); margin-top: 6px; line-height: 1.45; overflow-wrap: break-word; }

/* A 900px y no 760px: en tablet (768) las 4 columnas dejaban unos 165px por
   tarjeta, y con el icono de 52px el texto quedaba en una tira ilegible. */
@media (max-width: 900px) { .lc-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lc-values { grid-template-columns: 1fr; } }

/* ============================ LEAF DIVIDER ============================== */
.lc-leaf-divider {
	background: var(--lc-cream-100);
	display: flex;
	justify-content: center;
}
.lc-leaf-divider svg { color: var(--lc-green-800); max-width: 96vw; }

/* ============================ PROMO BANNER ============================== */
.lc-promo-section { padding: 64px 0; background: var(--lc-cream-100); }
.lc-promo {
	background: var(--lc-green-800);
	border-radius: 28px;
	overflow: hidden;
	color: var(--lc-cream-100);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(420px, auto);
}
.lc-promo__leaf { position: absolute; bottom: -50px; right: 20px; opacity: 0.12; transform: rotate(40deg); pointer-events: none; color: var(--lc-cream-100); z-index: 3; }

/* Slides apilados en la misma celda 1x1 → el contenedor crece al más alto y no salta. */
.lc-promo-slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	opacity: 0;
	transform: scale(0.985);
	transition: opacity 280ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
	pointer-events: none;
	z-index: 1;
}
.lc-promo-slide.is-active {
	opacity: 1;
	transform: none;
	transition: opacity 500ms cubic-bezier(0.22, 0.61, 0.36, 1) 250ms, transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1) 250ms;
	pointer-events: auto;
	z-index: 2;
}
.lc-promo-slide__image { position: relative; background: var(--lc-green-900); overflow: hidden; min-height: 320px; }
/* La imagen va absolute para llenar la celda sin empujar la altura del slide
   (si no, su tamaño natural inflaba el banner). La altura la marca el copy / minmax(420). */
.lc-promo-slide__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.86; }

/* Testimonio sobre la imagen (hardcodeado en el primer slide). */
.lc-promo-quote {
	position: absolute;
	bottom: 24px;
	left: 24px;
	right: 24px;
	z-index: 2;
	background: rgba(251, 246, 236, 0.96);
	backdrop-filter: blur(8px);
	border-radius: 18px;
	padding: 16px 18px;
	color: var(--lc-ink-900);
	font-family: var(--lc-font-body);
	box-shadow: 0 14px 36px rgba(14, 58, 5, 0.30);
}
.lc-promo-quote__stars { display: flex; align-items: center; gap: 4px; color: var(--lc-warning); margin-bottom: 8px; }
.lc-promo-quote__stars .lc-icon { fill: var(--lc-warning); }
.lc-promo-quote p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--lc-ink-900); }
.lc-promo-quote__author { margin-top: 10px; font-size: 12px; color: var(--lc-ink-500); }
.lc-promo-quote__author strong { color: var(--lc-ink-900); }
/* ====================== TESTIMONIOS (slider del home) ====================== */
/* La sección reusa .lc-rail-section / .lc-rail-head / [data-rail] (flechas y
   scroll-snap del JS de rieles); aquí solo el estilo de las cards de quote. */
.lc-testi-rail { padding-top: 4px; }
.lc-testi-card {
	flex: 0 0 400px;
	width: 400px;
	scroll-snap-align: start;
	background: var(--lc-cream-50);
	border: 1px solid var(--lc-border);
	border-radius: 18px;
	padding: 22px 24px;
	font-family: var(--lc-font-body);
	color: var(--lc-ink-900);
	box-shadow: var(--lc-shadow-sm);
	display: flex;
	flex-direction: column;
}
.lc-testi-card__stars { display: flex; align-items: center; gap: 4px; color: var(--lc-warning); margin-bottom: 10px; }
.lc-testi-card__stars .lc-icon { fill: var(--lc-warning); }
.lc-testi-card__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--lc-ink-900); }
.lc-testi-card__author { margin-top: auto; padding-top: 12px; font-size: 12px; color: var(--lc-ink-500); }
.lc-testi-card__author strong { color: var(--lc-ink-900); }

@media (max-width: 640px) {
	.lc-testi-card { flex: 0 0 84%; width: 84%; }
}

.lc-promo-slide__copy { padding: 56px 56px 88px 48px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
.lc-promo-slide__eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: var(--lc-w-semibold); color: var(--lc-green-200); font-family: var(--lc-font-body); margin-bottom: 14px; }
.lc-promo-slide__title { font-family: var(--lc-font-display); font-weight: 400; font-size: 52px; line-height: 1; margin: 0 0 18px; color: var(--lc-cream-100); letter-spacing: -0.02em; text-wrap: balance; }
.lc-promo-slide__title span { color: var(--lc-green-200); }
.lc-promo-slide__body { font-family: var(--lc-font-body); font-size: 16px; line-height: 1.6; color: var(--lc-green-100); margin: 0 0 28px; max-width: 460px; }
.lc-promo-slide__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.lc-promo-slide__shipping { font-family: var(--lc-font-body); font-size: 13px; color: var(--lc-green-200); display: inline-flex; align-items: center; gap: 6px; }

/* Navegación: flechas + contador "0X / 0Y" */
.lc-promo-nav {
	position: absolute;
	right: 28px;
	bottom: 22px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: rgba(14, 58, 5, 0.55);
	backdrop-filter: blur(6px);
	border-radius: var(--lc-radius-pill);
	padding: 6px;
}
.lc-promo-nav__btn {
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: var(--lc-radius-pill);
	border: 1px solid rgba(251, 246, 236, 0.45);
	background: rgba(251, 246, 236, 0.16);
	color: var(--lc-cream-100);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--lc-dur-fast) var(--lc-ease), border-color var(--lc-dur-fast) var(--lc-ease);
}
.lc-promo-nav__btn:hover { background: rgba(251, 246, 236, 0.32); border-color: rgba(251, 246, 236, 0.7); }
/* El padding heredado del reset de button recortaba el icono vía max-width:100% (base.css).
   Con padding:0 el chevron se aprecia. */
.lc-promo-nav__btn svg { width: 22px; height: 22px; }
.lc-promo-count { font-family: var(--lc-font-body); font-size: 13px; font-weight: var(--lc-w-semibold); color: var(--lc-cream-100); font-variant-numeric: tabular-nums; padding: 0 8px; min-width: 52px; text-align: center; }
.lc-promo-count b { font-weight: var(--lc-w-extrabold); }

.lc-btn--tertiary { background: var(--lc-cream-200); color: var(--lc-ink-900); box-shadow: none; }
.lc-btn--tertiary:hover { background: var(--lc-cream-300); color: var(--lc-ink-900); }

@media (max-width: 760px) {
	.lc-promo { grid-template-rows: minmax(0, auto); }
	.lc-promo-slide { grid-template-columns: 1fr; }
	.lc-promo-slide__image { min-height: 220px; aspect-ratio: 4 / 3; }
	.lc-promo-slide__copy { padding: 32px 24px 76px; }
	.lc-promo-slide__title { font-size: 34px; }
	.lc-promo-nav { right: 50%; transform: translateX(50%); bottom: 16px; }
}

/* ============================== NEWSLETTER =============================== */
.lc-newsletter-section { padding: 42px 0 0; background: var(--lc-cream-100); }
.lc-newsletter {
	background: var(--lc-cream-200);
	border-radius: 28px;
	padding: 56px;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 36px;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.lc-newsletter__leaf { position: absolute; top: -30px; right: -20px; opacity: 0.18; transform: rotate(-12deg); pointer-events: none; color: var(--lc-green-800); }
.lc-newsletter__copy { position: relative; z-index: 1; }
.lc-newsletter__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: var(--lc-w-bold);
	color: var(--lc-green-800);
	font-family: var(--lc-font-body);
	padding: 7px 14px;
	border-radius: var(--lc-radius-pill);
	background: var(--lc-green-100);
	border: 1px solid var(--lc-green-200);
}
.lc-newsletter__title { font-family: var(--lc-font-display); font-weight: 400; font-size: 44px; color: var(--lc-green-800); margin: 10px 0 14px; letter-spacing: -0.02em; line-height: 1.02; text-wrap: balance; }
.lc-newsletter__title span { color: var(--lc-sale); }
.lc-newsletter__text { font-family: var(--lc-font-body); font-size: 15px; line-height: 1.6; color: var(--lc-ink-700); margin: 0; max-width: 480px; }
.lc-newsletter__form-wrap { position: relative; z-index: 1; }
.lc-newsletter__note { font-family: var(--lc-font-body); font-size: 12px; color: var(--lc-ink-500); text-align: center; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; }

/* ---------- El formulario es de Contact Form 7 ----------------------------
   Lo que antes era un <form> estático (y no guardaba nada) ahora es un CF7,
   para que cada suscripción quede registrada en Flamingo. CF7 mete su propia
   estructura alrededor de los campos, así que la píldora se arma sobre ella:

     div.wpcf7 > form.lc-newsletter__cf7
       fieldset.hidden-fields-container   ← campos internos, sin pintar
       div.lc-news
         div.lc-news__pill                ← la píldora crema (flex)
           svg.lc-icon
           span.wpcf7-form-control-wrap   ← CF7 envuelve el input: un nivel más
             input[type=email]
           input[type=submit]
           span.wpcf7-spinner
         div.lc-news__accept              ← casilla de la Política de Privacidad
       div.wpcf7-response-output          ← aviso de éxito o error

   `forms.css` no se carga en el inicio (solo se encola en páginas con el
   shortcode en el contenido), así que aquí no hay nada heredado: la piel del
   formulario se define entera en este bloque. */

.lc-newsletter__cf7 { margin: 0; }
.lc-newsletter__cf7 .hidden-fields-container { display: none; }

.lc-news__pill {
	background: var(--lc-cream-50);
	border-radius: 20px;
	padding: 8px 8px 8px 22px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 6px 18px rgba(60, 38, 3, 0.08);
	font-family: var(--lc-font-body);
}
.lc-news__pill .lc-icon { color: var(--lc-green-700); flex-shrink: 0; }

/* El input ya no es hijo directo del flex: quien tiene que estirarse es el
   envoltorio que le pone CF7. `min-width: 0` para que pueda encogerse por
   debajo de su ancho intrínseco y no desborde la píldora. */
.lc-news__pill .wpcf7-form-control-wrap { flex: 1; min-width: 0; }
.lc-news__pill input[type="email"] {
	border: 0;
	outline: none;
	background: transparent;
	width: 100%;
	font-size: 15px;
	padding: 12px 0;
	font-family: var(--lc-font-body);
	color: var(--lc-ink-900);
	min-width: 0;
}

/* El submit lleva las clases lc-btn/lc-btn--primary desde el shortcode, pero
   `_s` estiliza input[type="submit"] (elemento + atributo gana a una clase
   suelta) y le devolvería el gris con esquinas de 3px. Mismo remedio que en
   forms.css: repetir los valores del botón primario con esa especificidad. */
.lc-news__pill input[type="submit"].wpcf7-submit {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--lc-font-body);
	font-weight: var(--lc-w-semibold);
	font-size: var(--lc-text-base);
	line-height: 1;
	padding: 14px 26px;
	border: 0;
	border-radius: var(--lc-radius-pill);
	background: var(--lc-green-800);
	color: var(--lc-fg-on-green);
	box-shadow: var(--lc-shadow-sm);
	cursor: pointer;
	transition: transform var(--lc-dur-fast) var(--lc-ease),
		background-color var(--lc-dur-fast) var(--lc-ease),
		box-shadow var(--lc-dur-fast) var(--lc-ease);
}
.lc-news__pill input[type="submit"].wpcf7-submit:hover {
	background: var(--lc-green-900);
	box-shadow: var(--lc-shadow-md);
}
.lc-news__pill input[type="submit"].wpcf7-submit:active { transform: scale(0.98); box-shadow: var(--lc-shadow-xs); }
.lc-news__pill input[type="submit"].wpcf7-submit:disabled { opacity: 0.6; cursor: default; }

/* CF7 inserta el spinner como hermano del botón, dentro de la píldora: ocupa
   24px y la descuadraría. Se oculta — el aviso de abajo y el botón inhabilitado
   ya dicen que se está enviando. */
.lc-newsletter__cf7 .wpcf7-spinner { display: none; }

/* ---------- Casilla de aceptación (Ley 29733) ---------- */
.lc-news__accept { margin-top: 12px; font-family: var(--lc-font-body); }
.lc-news__accept .wpcf7-list-item { margin: 0; }
.lc-news__accept .wpcf7-list-item-label { font-weight: var(--lc-w-regular); }
.lc-news__accept label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 12px;
	line-height: 1.5;
	font-weight: var(--lc-w-regular);
	color: var(--lc-ink-500);
	margin: 0;
	cursor: pointer;
}
.lc-news__accept input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid var(--lc-border-strong);
	border-radius: 6px;
	background: var(--lc-cream-50);
	cursor: pointer;
	position: relative;
	transition: background var(--lc-dur-fast) var(--lc-ease), border-color var(--lc-dur-fast) var(--lc-ease);
}
.lc-news__accept input[type="checkbox"]:checked {
	background: var(--lc-green-800);
	border-color: var(--lc-green-800);
}
/* Palomita dibujada con bordes: sin depender de fuentes ni de unicode. */
.lc-news__accept input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5.5px;
	top: 2px;
	width: 4px;
	height: 9px;
	border: solid var(--lc-fg-on-green, #fff);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.lc-news__accept input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: var(--lc-shadow-focus);
}
.lc-news__accept a { color: var(--lc-green-700); text-decoration: underline; text-underline-offset: 2px; }
.lc-news__accept a:hover { color: var(--lc-green-900); }

/* ---------- Turnstile, bajo la casilla de aceptación ----------
   El plugin trae dos márgenes negativos que descuadran el bloque: uno en línea
   sobre su envoltorio (`margin-bottom: -15px`) y otro en su hoja sobre el
   widget (`margin-left: -15px`), que lo sacaba 15px fuera de la columna por la
   izquierda. Se anulan los dos y el aire se pone aquí, con el mismo ritmo que
   el resto del bloque. `!important` porque uno es un atributo `style`. */
.lc-news__captcha { margin-top: 12px; }
.lc-news__captcha .cf7-cf-turnstile,
.lc-news__captcha .cf-turnstile { margin: 0 !important; }

/* ---------- Validación y aviso de respuesta ----------
   CF7 trae su propio recuadro azul con borde de 2px: se sustituye por la piel
   de marca. El aviso es hijo del <form>, así que hereda el ancho de la
   columna. */
.lc-newsletter__cf7 .wpcf7-not-valid-tip {
	color: var(--lc-sale);
	font-size: 12px;
	margin-top: 4px;
	font-family: var(--lc-font-body);
}
.lc-newsletter__cf7 input.wpcf7-not-valid { color: var(--lc-sale); }
.lc-newsletter__cf7 .wpcf7-response-output {
	margin: 12px 0 0;
	padding: 11px 16px;
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius-md, 14px);
	background: var(--lc-cream-200);
	color: var(--lc-ink-900);
	font-family: var(--lc-font-body);
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}
.lc-newsletter__cf7.sent .wpcf7-response-output {
	background: var(--lc-green-100);
	border-color: var(--lc-green-200);
	color: var(--lc-green-900);
}
.lc-newsletter__cf7.invalid .wpcf7-response-output,
.lc-newsletter__cf7.unaccepted .wpcf7-response-output,
.lc-newsletter__cf7.failed .wpcf7-response-output,
.lc-newsletter__cf7.aborted .wpcf7-response-output {
	background: #FBEDE9;
	border-color: #F0C9BE;
	color: #8A2B12;
}

/* Apilado desde tablet. Con las dos columnas (1.2fr / 1fr) la del formulario
   se queda en ~255px a 768px, y entre el botón y el icono al input le sobraban
   50px: mostraba "tu@c". Le pasaba igual al formulario estático anterior, así
   que no es cosa de Contact Form 7 — es que a ese ancho la píldora no cabe en
   media columna. Apilando, la píldora ocupa todo el ancho y respira. */
@media (max-width: 1024px) {
	.lc-newsletter { grid-template-columns: minmax(0, 1fr); padding: 32px 24px; gap: 22px; }
}
@media (max-width: 480px) {
	.lc-news__pill { flex-wrap: wrap; padding: 12px; gap: 8px 10px; }
	.lc-news__pill .wpcf7-form-control-wrap { flex: 1 1 0; min-width: 100px; }
	.lc-news__pill input[type="email"] { padding: 8px 4px; }
	/* Botón a todo el ancho: `flex-basis: 100%` y no solo width, para que ocupe
	   su propia línea dentro de la píldora. */
	.lc-news__pill input[type="submit"].wpcf7-submit { width: 100%; flex: 1 1 100%; }
}