/* ───────────────────────────────────────────────────────────────────────────
   Umbrella — base theme CSS (tokens, gradients, keyframes, component glue).
   Tailwind utilities provide the layout; this file holds what config can't.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
	--umbrella-blue: #144C86;
	--umbrella-sky: #3E95CA;
	--umbrella-ink: #26242F;
	--umbrella-cloud: #DCE3E7;
	--umbrella-white: #FFFFFF;
	--umbrella-soft: #F7F9FB;
	--umbrella-rose-light: #F1C8CE;
	--umbrella-rose: #C77881;
	--umbrella-rose-deep: #7E3E49;
	--umbrella-sun: #F6C04A;

	--shadow-card: 0 4px 16px rgba(20, 76, 134, .08);
	--shadow-modal: 0 8px 32px rgba(20, 76, 134, .12);
	--shadow-lift: 0 12px 28px rgba(20, 76, 134, .14);
}

html { scroll-behavior: smooth; }
body {
	font-family: 'Barlow', system-ui, sans-serif;
	color: var(--umbrella-ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

/* Typography helpers */
.label-eyebrow {
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 12px;
}

/* Focus ring (WCAG) */
.focus-ring:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--umbrella-sky);
	outline-offset: 2px;
}

/* Scroll fade-in */
.fade-in { opacity: 0; transform: translateY(16px); transition: opacity .6s ease-out, transform .6s ease-out; }
.fade-in.visible { opacity: 1; transform: none; }

/* Hover lift */
.hover-lift { transition: transform .2s ease-out, box-shadow .2s ease-out; }
.hover-lift:hover { transform: translateY(-4px) scale(1.01); }

/* Thin scrollbar */
.scrollbar-thin::-webkit-scrollbar { height: 8px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--umbrella-cloud); border-radius: 999px; }

/* Hidden scrollbar (carousels driven by arrows/thumbs/swipe) */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Gradients */
.hero-gradient { background: linear-gradient(135deg, #F7F9FB 0%, #DCE3E7 100%); }
.face-gradient { background: linear-gradient(160deg, #F1C8CE22 0%, #ffffff 60%, #F7F9FB 100%); }
.body-gradient { background: linear-gradient(160deg, #DCE3E7 0%, #ffffff 60%, #F7F9FB 100%); }
.ink-gradient  { background: linear-gradient(135deg, #144C86 0%, #26242F 100%); }

/* Packshot placeholder */
.packshot-stripes {
	background:
		repeating-linear-gradient(45deg, rgba(20, 76, 134, 0.06) 0 6px, transparent 6px 14px),
		linear-gradient(180deg, #ffffff 0%, #F7F9FB 100%);
}

/* Skip link */
.skip-link {
	position: absolute; left: -9999px; top: 8px; z-index: 100;
	background: var(--umbrella-blue); color: #fff; padding: 8px 16px; border-radius: 999px;
}
.skip-link:focus { left: 8px; }

/* Pulse ring (WhatsApp FAB) */
@keyframes pulse-ring {
	0% { box-shadow: 0 0 0 0 rgba(62, 149, 202, 0.4); }
	70% { box-shadow: 0 0 0 12px rgba(62, 149, 202, 0); }
	100% { box-shadow: 0 0 0 0 rgba(62, 149, 202, 0); }
}
.pulse-ring { animation: pulse-ring 2s infinite; }

/* Legal prose */
.legal-prose ul { list-style: disc; padding-left: 1.4em; }
.legal-prose li { margin: 0.4em 0; }
.legal-prose a { word-break: break-word; }

/* Line clamp (fallback when the Tailwind plugin isn't compiled in) */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ─── Animation library ─────────────────────────────────────────────────── */
@keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes fade-in-scale { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes drawer-item-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes mega-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes spin { to { transform: rotate(360deg); } }

.anim-backdrop { animation: backdrop-in .25s ease-out both; }
.anim-drawer { animation: drawer-in .34s cubic-bezier(.22, .61, .36, 1) both; }
.anim-drawer-item { animation: drawer-item-in .4s cubic-bezier(.22, .61, .36, 1) both; }
.anim-mega { animation: mega-in .22s ease-out both; }
.anim-pop { animation: fade-in-scale .28s ease-out both; }
.anim-hero { animation: fade-in-up .7s cubic-bezier(.22, .61, .36, 1) both; }
.float-y { animation: float-y 5s ease-in-out infinite; }
.anim-spin-slow { animation: spin 30s linear infinite; }
.anim-bar { transition: width 1s ease-out; }

/* Accordion (native <details>) */
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details[open] summary .chev { transform: rotate(180deg); }
.chev { transition: transform .2s ease; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.fade-in, .anim-backdrop, .anim-drawer, .anim-drawer-item, .anim-mega,
	.anim-pop, .anim-hero, .float-y, .anim-spin-slow, .pulse-ring, .anim-bar {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Tap targets ≥44px on interactive controls inside menus/carousels */
[data-carousel-prev], [data-carousel-next],
[data-testimonial-prev], [data-testimonial-next] { min-width: 44px; min-height: 44px; }

/* WhatsApp FAB: cuando la sticky buy bar de la ficha está visible, se eleva por
   encima de la barra para no cruzarse (se usa `bottom` para no pisar el hover-scale). */
.umbrella-wa-fab { transition: bottom .25s ease, transform .2s ease-out; }
body.has-buybar .umbrella-wa-fab { bottom: 92px; }
@media (prefers-reduced-motion: reduce) {
	.umbrella-wa-fab { transition: none; }
}

/* ─── WordPress nav menus (Apariencia → Menús) ──────────────────────────── */
/* Navbar secondary links (location: primary) */
.umbrella-nav-menu { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.umbrella-nav-menu li { margin: 0; }
.umbrella-nav-menu a {
	display: inline-block; padding: .5rem .75rem; font-size: 15px; font-weight: 500;
	color: var(--umbrella-ink); border-radius: .375rem; text-decoration: none; transition: color .15s ease;
}
.umbrella-nav-menu a:hover, .umbrella-nav-menu .current-menu-item > a { color: var(--umbrella-blue); }

/* Footer "Productos" column (location: footer_productos) */
.umbrella-footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
.umbrella-footer-menu li { margin: 0; }
.umbrella-footer-menu a { color: rgba(255,255,255,.9); text-decoration: none; font-size: .875rem; transition: color .15s ease; }
.umbrella-footer-menu a:hover { color: #fff; }

/* Mobile drawer secondary links (location: primary) */
.umbrella-drawer-menu { list-style: none; margin: 0; padding: 0; }
.umbrella-drawer-menu li { margin: 0; }
.umbrella-drawer-menu a {
	display: block; padding: .75rem 0; font-size: 1.125rem; color: var(--umbrella-ink);
	border-bottom: 1px solid rgba(220,227,231,.6); text-decoration: none; transition: color .15s ease, padding-left .15s ease;
}
.umbrella-drawer-menu a:hover { color: var(--umbrella-blue); padding-left: .5rem; }