/* ==========================================================================
   SACRED GEOMETRY — Flower-of-Life / Hexagonal background (subtle)
   ========================================================================== */
.bg-hex {
    background-image:
        radial-gradient(circle at 25% 25%, rgba(22, 163, 74, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(22, 163, 74, 0.03) 0%, transparent 50%),
        repeating-linear-gradient(60deg,
            transparent, transparent 13px,
            rgba(21, 128, 61, 0.015) 13px, rgba(21, 128, 61, 0.015) 14px),
        repeating-linear-gradient(-60deg,
            transparent, transparent 13px,
            rgba(21, 128, 61, 0.015) 13px, rgba(21, 128, 61, 0.015) 14px);
}

/* Flower-of-Life inspired accent ring — positioned on hero */
.floret {
    position: absolute;
    width: 89px;
    height: 89px;
    border-radius: 50%;
    border: 2px solid rgba(22, 163, 74, 0.08);
    pointer-events: none;
    background: transparent;
}
.floret::before,
.floret::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: inherit;
    top: 0; left: 0;
}
.floret::before { transform: rotate(60deg); }
.floret::after  { transform: rotate(-60deg); }

/* --- RESET & BASE (Tailwind Preflight) --- */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; scroll-behavior: smooth; }
body { margin: 0; line-height: inherit; }
img, video { max-width: 100%; height: auto; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
a { color: inherit; text-decoration: inherit; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; }
h1, h2 { font-weight: 700; }
h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
p { margin: 0; }
::-moz-focus-inner { border-style: none; padding: 0; }
svg { pointer-events: none; }
.icon-inline { display: inline; width: 1em; height: 1em; vertical-align: -0.125em; }

/* ==========================================================================
   PHI (GOLDEN RATIO) & FIBONACCI — DESIGN SYSTEM
   ========================================================================== */
:root {
    /* Fibonacci spacing scale (px) */
    --phi: 1.618;
    --space-5: 5px;
    --space-8: 8px;
    --space-13: 13px;
    --space-21: 21px;
    --space-34: 34px;
    --space-55: 55px;
    --space-89: 89px;
    --space-144: 144px;

    /* Typography — practical φ-inspired scale (keeps visual close to original design) */
    --text-xs: 13px;          /* F₇: closely matches 12px original */
    --text-sm: 14px;
    --text-body: 16px;        /* base */
    --text-lg: 18px;          /* original match */
    --text-xl: 21px;          /* F₈: modest bump from 20px orig */
    --text-2xl: 24px;         /* original match */
    --text-3xl: 30px;         /* original match */
    --text-4xl: 36px;         /* original match */
    --text-5xl: 55px;         /* F₁₀: new — hero desktop heading */
    --text-6xl: 60px;         /* original match */

    /* Golden container */
    --container-max: 1200px;
    --container-narrow: 742px;    /* 1200 × 0.618 */
    --phi-content: 61.8%;
    --phi-sidebar: 38.2%;
}

/* --- CUSTOM UTILITIES --- */
.glass-effect {
    background: rgba(255,255,255,.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.25);
}
.bg-mesh {
    background-color: #f8fafc;
    background-image: radial-gradient(at 0% 0%,rgba(187,247,208,.3) 0px,transparent 50%),
                      radial-gradient(at 50% 0%,rgba(191,219,254,.2) 0px,transparent 50%);
}
.blob {
    position: absolute; width: 500px; height: 500px;
    background: rgba(187,247,208,.4); filter: blur(80px);
    -webkit-filter: blur(80px); border-radius: 50%; z-index: -1;
}
.mobile-link { display: block; }

/* --- CONTAINER (golden) --- */
.max-w-6xl { max-width: var(--container-max); }
.max-w-6xl\:narrow { max-width: var(--container-narrow); }
.max-w-2xl { max-width: 432px; }
.max-w-xl  { max-width: 396px; }
.max-w-lg  { max-width: 332px; }
.max-w-md  { max-width: 448px; }
.max-w-xs  { max-width: 320px; }
.max-w-\[280px\] { max-width: 280px; }
.mx-auto   { margin-left: auto; margin-right: auto; }

/* --- DISPLAY --- */
.hidden { display: none; }
.block  { display: block; }
.inline-block { display: inline-block; }
.inline-flex  { display: inline-flex; }
.flex    { display: flex; }
.grid    { display: grid; }

/* --- POSITION --- */
.fixed   { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.static  { position: static; }
.overflow-hidden { overflow: hidden; }

/* --- INSET --- */
.inset-0 { inset: 0; }
.top-0   { top: 0; }
.top-6   { top: 24px; }
.bottom-0 { bottom: 0; }
.bottom-6 { bottom: 24px; }
.right-6  { right: 24px; }
.-left-20 { left: -80px; }
.-left-6  { left: -24px; }
.-right-20 { right: -80px; }
.-bottom-6 { bottom: -24px; }

/* --- Z-INDEX --- */
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* --- FLEXBOX --- */
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.flex-shrink-0 { flex-shrink: 0; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-start   { justify-content: flex-start; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-stretch   { align-items: stretch; }

/* --- GRID --- */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-phi-lg { grid-template-columns: 61.8fr 38.2fr; }  /* golden split */

/* --- GAP (Fibonacci) --- */
.gap-1  { gap: 5px; }
.gap-2  { gap: var(--space-8); }
.gap-3  { gap: var(--space-13); }
.gap-4  { gap: 16px; }
.gap-5  { gap: var(--space-21); }
.gap-6  { gap: var(--space-21); }
.gap-8  { gap: var(--space-34); }
.gap-10 { gap: var(--space-55); }
.gap-12 { gap: 48px; }
.gap-13 { gap: var(--space-55); }
.gap-21 { gap: var(--space-89); }

/* --- SPACE (flex/grid children gap — Fibonacci) --- */
.space-y-2 > * + * { margin-top: var(--space-8); }
.space-y-3 > * + * { margin-top: var(--space-13); }
.space-y-5 > * + * { margin-top: var(--space-21); }
.space-y-8 > * + * { margin-top: var(--space-34); }
.space-y-13 > * + * { margin-top: var(--space-55); }

/* --- ORDER --- */
.order-first { order: -9999; }

/* --- SIZING --- */
.w-full { width: 100%; }
.w-5  { width: 20px; }
.w-12 { width: 48px; }
.w-14 { width: 56px; }
.w-16 { width: 64px; }
.h-full { height: 100%; }
.h-5  { height: 20px; }
.h-8  { height: 32px; }
.h-12 { height: 48px; }
.h-14 { height: 56px; }
.h-16 { height: 64px; }
.min-h-screen { min-height: 100vh; }

/* --- ASPECT RATIO --- */
.aspect-\[9\/16\] { aspect-ratio: 9/16; }

/* --- PADDING (Fibonacci + legacy) --- */
.p-2  { padding: var(--space-8); }
.p-3  { padding: var(--space-13); }
.p-4  { padding: 16px; }
.p-5  { padding: var(--space-21); }
.p-6  { padding: var(--space-21); }
.p-8  { padding: var(--space-34); }
.p-10 { padding: var(--space-34); }
.p-13 { padding: var(--space-55); }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-5 { padding-left: var(--space-21); padding-right: var(--space-21); }
.px-6 { padding-left: var(--space-21); padding-right: var(--space-21); }
.px-8 { padding-left: var(--space-34); padding-right: var(--space-34); }
.py-1 { padding-top: 5px; padding-bottom: 5px; }
.py-2 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-3 { padding-top: var(--space-13); padding-bottom: var(--space-13); }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-5 { padding-top: var(--space-21); padding-bottom: var(--space-21); }
.py-6 { padding-top: var(--space-21); padding-bottom: var(--space-21); }
.py-8 { padding-top: var(--space-34); padding-bottom: var(--space-34); }
.py-13 { padding-top: var(--space-55); padding-bottom: var(--space-55); }
.py-21 { padding-top: var(--space-89); padding-bottom: var(--space-89); }
.py-34 { padding-top: var(--space-144); padding-bottom: var(--space-144); }
.pt-13 { padding-top: var(--space-55); }
.pt-21 { padding-top: var(--space-89); }
.pb-1\.5 { padding-bottom: 6px; }

/* --- MARGIN (Fibonacci) --- */
.mb-1  { margin-bottom: 5px; }
.mb-2  { margin-bottom: var(--space-8); }
.mb-3  { margin-bottom: var(--space-13); }
.mb-4  { margin-bottom: 16px; }
.mb-5  { margin-bottom: var(--space-21); }
.mb-6  { margin-bottom: var(--space-21); }
.mb-8  { margin-bottom: var(--space-34); }
.mb-13 { margin-bottom: var(--space-55); }
.mb-21 { margin-bottom: var(--space-89); }
.mt-1  { margin-top: 5px; }
.mt-2  { margin-top: var(--space-8); }
.mt-3  { margin-top: var(--space-13); }
.mt-5  { margin-top: var(--space-21); }
.mt-8  { margin-top: var(--space-34); }
.mt-auto { margin-top: auto; }

/* --- TYPOGRAPHY (φ-inspired scale) --- */
.font-serif { font-family: Georgia, 'Times New Roman', serif; }
.font-bold      { font-weight: 700; }
.font-semibold  { font-weight: 600; }
.font-medium    { font-weight: 500; }
.text-xs   { font-size: var(--text-xs); line-height: 1.4; }
.text-sm   { font-size: var(--text-sm); line-height: 1.5; }
.text-base { font-size: var(--text-body); line-height: 1.5; }
.text-lg   { font-size: var(--text-lg); line-height: 1.5; }
.text-xl   { font-size: var(--text-xl); line-height: 1.4; }
.text-2xl  { font-size: var(--text-2xl); line-height: 1.3; }
.text-3xl  { font-size: var(--text-3xl); line-height: 1.25; }
.text-4xl  { font-size: var(--text-4xl); line-height: 1.2; }
.text-5xl  { font-size: 55px; line-height: 1.1; }   /* F₁₀ — hero heading */
.text-6xl  { font-size: var(--text-6xl); line-height: 1; }
.leading-tight   { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.tracking-wider  { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.uppercase { text-transform: uppercase; }
.italic    { font-style: italic; }
.text-left   { text-align: left; }
.text-center { text-align: center; }

/* --- TEXT COLORS --- */
.text-white        { color: #fff; }
.text-slate-400    { color: #94a3b8; }
.text-slate-500    { color: #64748b; }
.text-slate-600    { color: #475569; }
.text-slate-700    { color: #334155; }
.text-slate-800    { color: #1e293b; }
.text-slate-900    { color: #0f172a; }
.text-green-600    { color: #16a34a; }
.text-green-700    { color: #15803d; }
.text-green-700\/20 { color: rgba(21,128,61,0.2); }
.text-green-800    { color: #166534; }
.text-green-900    { color: #14532d; }
.text-blue-600     { color: #2563eb; }
.text-pink-500     { color: #ec4899; }
.text-red-400      { color: #f87171; }
.text-yellow-400   { color: #facc15; }

/* --- BACKGROUNDS --- */
.bg-white   { background-color: #fff; }
.bg-white\/10 { background-color: rgba(255,255,255,0.1); }
.bg-white\/95 { background-color: rgba(255,255,255,0.95); }
.bg-green-100 { background-color: #dcfce7; }
.bg-green-500 { background-color: #22c55e; }
.bg-green-600 { background-color: #16a34a; }

/* --- BACKDROP --- */
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

/* --- BORDERS --- */
.border     { border-width: 1px; }
.border-t   { border-top-width: 1px; }
.border-b   { border-bottom-width: 1px; }
.border-slate-100 { border-color: #f1f5f9; }
.border-slate-200 { border-color: #e2e8f0; }

/* --- BORDER RADIUS --- */
.rounded-full { border-radius: 9999px; }
.rounded-2xl  { border-radius: 16px; }
.rounded-3xl  { border-radius: 24px; }
.rounded-xl   { border-radius: 12px; }

/* --- SHADOWS --- */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); }

/* --- OBJECT FIT --- */
.object-cover { object-fit: cover; }

/* --- CURSOR --- */
.cursor-default { cursor: default; }

/* --- OPACITY --- */
.opacity-60 { opacity: 0.6; }

/* ==========================================================================
   TRANSITIONS
   ========================================================================== */
.transition       { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.transition-all   { transition-property: all; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }

/* --- TRANSFORMS (applied directly to avoid requiring .transform class) --- */
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
.hover\:translate-y-\[-4px\]:hover { transform: translateY(-4px); }

/* ==========================================================================
   HOVER STATES
   ========================================================================== */
.hover\:bg-green-600:hover   { background-color: #16a34a; }
.hover\:bg-green-700:hover   { background-color: #15803d; }
.hover\:bg-white\/50:hover   { background-color: rgba(255,255,255,0.5); }
.hover\:bg-white\/60:hover   { background-color: rgba(255,255,255,0.6); }
.hover\:border-blue-400:hover  { border-color: #60a5fa; }
.hover\:border-pink-400:hover  { border-color: #f472b6; }
.hover\:border-yellow-300:hover { border-color: #fde047; }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }
.hover\:text-green-700:hover { color: #15803d; }

/* --- FOCUS --- */
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }

/* ==========================================================================
   RESPONSIVE — sm (640px+)
   ========================================================================== */
@media (min-width: 640px) {
    .sm\:block  { display: block; }
    .sm\:flex-row { flex-direction: row; }
    .sm\:gap-3 { gap: 12px; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   RESPONSIVE — md (768px+)
   ========================================================================== */
@media (min-width: 768px) {
    .md\:flex     { display: flex; }
    .md\:flex-row { flex-direction: row; }
    .md\:hidden   { display: none; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:mb-0   { margin-bottom: 0; }
    .md\:order-none { order: 0; }
    .md\:text-hero { font-size: 55px; line-height: 1.1; }
    .md\:text-4xl { font-size: var(--text-4xl); line-height: 1.1; }
    .md\:text-6xl { font-size: var(--text-6xl); line-height: 1; }
    .md\:text-left { text-align: left; }
    .md\:w-auto  { width: auto; }
}

/* ==========================================================================
   RESPONSIVE — lg (1024px+)
   ========================================================================== */
@media (min-width: 1024px) {
    .lg\:col-span-5  { grid-column: span 5 / span 5; }
    .lg\:col-span-7  { grid-column: span 7 / span 7; }
    .lg\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .lg\:grid-cols-phi { grid-template-columns: 61.8fr 38.2fr; }
    .lg\:justify-start { justify-content: flex-start; }
    .lg\:mx-0 { margin-left: 0; margin-right: 0; }
    .lg\:text-left { text-align: left; }
}

/* ==========================================================================
   COOKIE CONSENT BANNER
   ========================================================================== */
.cookie-consent {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999;
    padding: 16px; transform: translateY(100%); opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease; pointer-events: none;
}
.cookie-consent--visible {
    transform: translateY(0); opacity: 1; pointer-events: auto;
}
.cookie-consent__content {
    max-width: 720px; margin: 0 auto;
    background: rgba(255,255,255,0.95); backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.3); border-radius: 16px;
    padding: 20px 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    display: flex; flex-direction: column; gap: 16px;
}
@media (min-width: 640px) {
    .cookie-consent__content { flex-direction: row; align-items: center; }
}
.cookie-consent__text {
    display: flex; align-items: flex-start; gap: 12px; flex: 1;
}
.cookie-consent__text p {
    font-size: 14px; line-height: 1.5; color: #475569; margin: 0;
}
.cookie-consent__link { color: #15803d; text-decoration: underline; font-weight: 500; }
.cookie-consent__link:hover { color: #166534; }
.cookie-consent__actions {
    display: flex; gap: 8px; flex-shrink: 0;
}
.cookie-consent__btn {
    padding: 10px 20px; border-radius: 9999px; font-size: 14px;
    font-weight: 600; cursor: pointer; border: none;
    transition: background 0.2s, color 0.2s;
}
.cookie-consent__btn--primary { background: #16a34a; color: white; }
.cookie-consent__btn--primary:hover { background: #15803d; }
.cookie-consent__btn--secondary { background: transparent; color: #64748b; border: 1px solid #cbd5e1; }
.cookie-consent__btn--secondary:hover { background: #f1f5f9; }

/* ==========================================================================
   PRIVACY MODAL
   ========================================================================== */
.privacy-modal {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.privacy-modal.hidden { display: none; }
.privacy-modal--visible { display: flex; }
.privacy-modal__overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
}
.privacy-modal__content {
    position: relative; background: white; border-radius: 20px; max-width: 640px;
    width: 100%; max-height: 80vh; overflow-y: auto; padding: 32px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}
.privacy-modal__close {
    position: absolute; top: 16px; right: 16px; width: 40px; height: 40px;
    border-radius: 50%; border: none; background: #f1f5f9; color: #64748b;
    font-size: 18px; cursor: pointer; display: flex; align-items: center;
    justify-content: center; transition: background 0.2s;
}
.privacy-modal__close:hover { background: #e2e8f0; }
.privacy-modal__content h2 {
    font-size: 24px; font-weight: 700; color: #0f172a;
    margin-bottom: 20px; padding-right: 40px;
}
.privacy-modal__body h3 {
    font-size: 16px; font-weight: 600; color: #15803d;
    margin-top: 20px; margin-bottom: 8px;
}
.privacy-modal__body p {
    font-size: 14px; line-height: 1.6; color: #475569; margin-bottom: 8px;
}
.privacy-modal__body ul { margin: 8px 0 12px 20px; padding: 0; }
.privacy-modal__body ul li {
    font-size: 14px; color: #475569; line-height: 1.6; margin-bottom: 4px; list-style: disc;
}

/* ==========================================================================
   MOBILE FIXES
   ========================================================================== */
@media (max-width: 767px) {
    body { padding-top: 8px; }
    #inicio { padding-top: 120px; }
}

/* ==========================================================================
   SAFETY OVERRIDES
   ========================================================================== */
html, body { overflow-x: hidden; position: relative; width: 100%; }
.fixed.bottom-6.right-6 { z-index: 9999 !important; }
#mobile-menu { z-index: 10000 !important; }