/* ============================================================
   MUTUAL CHACRA — style.css
   CSS autocontenido que reemplaza el CDN de Tailwind
   ============================================================ */

/* --- 1. Reset / Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
strong { font-weight: 700; }
iframe { border: 0; }

/* --- 2. Design Tokens --- */
:root {
  --color-primary:               #004324;
  --color-on-primary:            #ffffff;
  --color-primary-container:     #1a5c38;
  --color-on-primary-container:  #90d2a5;
  --color-primary-fixed:         #aef2c2;
  --color-primary-fixed-dim:     #93d5a7;
  --color-on-primary-fixed:      #00210f;
  --color-on-primary-fixed-var:  #0b522f;
  --color-secondary:             #4a5d8d;
  --color-on-secondary:          #ffffff;
  --color-surface:               #f7f9fb;
  --color-surface-muted:         #f1f5f9;
  --color-surface-container-low: #ffffff;
  --color-surface-variant:       #e0e3e5;
  --color-on-surface:            #191c1e;
  --color-on-surface-variant:    #404941;
  --color-outline-variant:       #c0c9bf;
  --color-ocean-deep:            #111e3b;
  --color-forest-dark:           #134228;
  --color-amber-vibrant:         #f59e0b;
  --color-on-tertiary-fixed:     #2a1700;
  --color-error:                 #ba1a1a;
  --color-error-container:       #ffdad6;
  --color-on-error-container:    #93000a;
  --color-whatsapp-green:        #25d366;
  --color-inverse-surface:       #2d3133;
  --spacing-margin-mobile:       16px;
  --spacing-gutter:              24px;
  --spacing-section-padding:     80px;
  --spacing-container-max:       1200px;
  --spacing-stack-md:            24px;
  --font-heading:  'Hanken Grotesk', sans-serif;
  --font-body:     'Source Sans 3', sans-serif;
}

/* --- 3. Base Styles --- */
body {
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  font-size: 16px;
  overflow-x: hidden;
}

/* --- 4. Typography Scale --- */
.font-display-lg, .text-display-lg {
  font-family: var(--font-heading);
  font-size: 48px;
  line-height: 56px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.font-headline-lg, .text-headline-lg {
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
}
.font-headline-md, .text-headline-md {
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}
.text-body-lg { font-family: var(--font-body); font-size: 18px; line-height: 28px; font-weight: 400; }
.text-body-md, .font-body-md { font-family: var(--font-body); font-size: 16px; line-height: 24px; }
.font-label-md, .text-label-md {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.font-button, .text-button { font-family: var(--font-body); font-size: 16px; line-height: 24px; font-weight: 700; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-xl   { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem; line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem; line-height: 2.5rem; }

/* --- 5. Color Utilities --- */
.text-primary            { color: var(--color-primary); }
.text-secondary          { color: var(--color-secondary); }
.text-on-secondary       { color: var(--color-on-secondary); }
.text-on-surface         { color: var(--color-on-surface); }
.text-on-surface-variant { color: var(--color-on-surface-variant); }
.text-primary-fixed      { color: var(--color-primary-fixed); }
.text-primary-fixed-dim  { color: var(--color-primary-fixed-dim); }
.text-surface-variant    { color: var(--color-surface-variant); }
.text-error              { color: var(--color-error); }
.text-error-container    { color: var(--color-on-error-container); }
.text-on-tertiary-fixed  { color: var(--color-on-tertiary-fixed); }
.text-amber-vibrant      { color: var(--color-amber-vibrant); }
.text-on-primary-container { color: var(--color-on-primary-container); }
.text-on-secondary       { color: #ffffff; }

.bg-surface                   { background-color: var(--color-surface); }
.bg-surface-muted             { background-color: var(--color-surface-muted); }
.bg-surface-container-lowest  { background-color: var(--color-surface-container-low); }
.bg-white                     { background-color: #ffffff; }
.bg-ocean-deep                { background-color: var(--color-ocean-deep); }
.bg-forest-dark               { background-color: var(--color-forest-dark); }
.bg-primary                   { background-color: var(--color-primary); }
.bg-secondary                 { background-color: var(--color-secondary); }
.bg-amber-vibrant             { background-color: var(--color-amber-vibrant); }
.bg-whatsapp-green            { background-color: var(--color-whatsapp-green); }
.bg-primary-container         { background-color: var(--color-primary-container); }
.bg-error-container\/10       { background-color: rgba(255,218,214,0.10); }
.bg-on-primary-fixed-variant\/20 { background-color: rgba(11,82,47,0.20); }
.bg-primary-container\/20     { background-color: rgba(26,92,56,0.20); }
.bg-white\/10                 { background-color: rgba(255,255,255,0.10); }
.bg-surface\/90               { background-color: rgba(247,249,251,0.90); }
.bg-surface\/95               { background-color: rgba(247,249,251,0.95); }

/* Gradients */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to)); }
.bg-gradient-to-r  { background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to)); }
.from-primary      { --tw-gradient-from: var(--color-primary); }
.from-forest-dark  { --tw-gradient-from: var(--color-forest-dark); }
.to-ocean-deep     { --tw-gradient-to: var(--color-ocean-deep); }
.to-primary        { --tw-gradient-to: var(--color-primary); }

/* --- 6. Layout --- */
/* --- Hero Section --- */
.hero {
  position: relative;
  background-image: url('fotooficina.jpg');
  background-size: cover;
  background-position: center;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-on-primary);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.4));
}
.hero-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.hero-text h1 {
  color: #fff;
}
.hero-text p {
  color: rgba(255,255,255,0.9);
}
.hero-card {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  padding: 1.5rem;
  border-radius: 1rem;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
}
@media (min-width: 768px) {
  .hero {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .hero-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .hero-card {
    margin-top: 0;
    max-width: 20rem;
  }
}
@media (max-width: 767px) {
  .hero-card {
    margin-top: 2rem;
    width: 100%;
  }
}
.max-w-container-max { max-width: var(--spacing-container-max); }
.max-w-3xl   { max-width: 48rem; }
.max-w-2xl   { max-width: 42rem; }
.max-w-xl    { max-width: 36rem; }
.max-w-4xl   { max-width: 56rem; }
.max-w-sm    { max-width: 24rem; }
.mx-auto     { margin-left: auto; margin-right: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-hidden   { overflow: hidden; }

/* --- 7. Flexbox --- */
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

/* --- 8. Grid --- */
.grid        { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col-span-2  { grid-column: span 2 / span 2; }

/* --- 9. Gap / Spacing --- */
.gap-1       { gap: 0.25rem; }
.gap-2       { gap: 0.5rem; }
.gap-3       { gap: 0.75rem; }
.gap-4       { gap: 1rem; }
.gap-5       { gap: 1.25rem; }
.gap-8       { gap: 2rem; }
.gap-12      { gap: 3rem; }
.gap-gutter  { gap: var(--spacing-gutter); }
.gap-stack-md { gap: var(--spacing-stack-md); }
.space-y-4 > * + * { margin-top: 1rem; }

/* --- 10. Padding / Margin --- */
.p-3   { padding: 0.75rem; }
.p-4   { padding: 1rem; }
.p-6   { padding: 1.5rem; }
.p-8   { padding: 2rem; }
.px-4  { padding-left: 1rem;   padding-right: 1rem; }
.px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.px-12 { padding-left: 3rem;   padding-right: 3rem; }
.py-2  { padding-top: 0.5rem;  padding-bottom: 0.5rem; }
.py-5  { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6  { padding-top: 1.5rem;  padding-bottom: 1.5rem; }
.py-10 { padding-top: 2.5rem;  padding-bottom: 2.5rem; }
.py-20 { padding-top: 5rem;    padding-bottom: 5rem; }
.pb-6  { padding-bottom: 1.5rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-12 { padding-bottom: 3rem; }
.pt-20 { padding-top: 5rem; }
.py-section-padding { padding-top: var(--spacing-section-padding); padding-bottom: var(--spacing-section-padding); }
.px-margin-mobile   { padding-left: var(--spacing-margin-mobile);  padding-right: var(--spacing-margin-mobile); }
.px-gutter          { padding-left: var(--spacing-gutter);         padding-right: var(--spacing-gutter); }
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }

/* --- 11. Sizing --- */
.w-full  { width: 100%; }
.w-10    { width: 2.5rem; }
.w-12    { width: 3rem; }
.w-16    { width: 4rem; }
.w-20    { width: 5rem; }
.w-1\/3  { width: 33.3333%; }
.h-10    { height: 2.5rem; }
.h-12    { height: 3rem; }
.h-16    { height: 4rem; }
.h-20    { height: 5rem; }
.h-48    { height: 12rem; }
.h-full  { height: 100%; }
.min-h-\[85vh\] { min-height: 85vh; }

/* --- 12. Border / Radius --- */
.rounded-full { border-radius: 9999px; }
.rounded-lg   { border-radius: 0.5rem; }
.rounded-xl   { border-radius: 0.75rem; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-t-xl { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; }
.border                    { border: 1px solid; }
.border-b                  { border-bottom: 1px solid; }
.border-outline-variant\/10 { border-color: rgba(192,201,191,0.10); }
.border-outline-variant\/20 { border-color: rgba(192,201,191,0.20); }
.border-outline-variant\/30 { border-color: rgba(192,201,191,0.30); }
.border-white\/20          { border-color: rgba(255,255,255,0.20); }
.border-error\/20          { border-color: rgba(186,26,26,0.20); }

/* --- 13. Shadow --- */
.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 rgba(0,0,0,0.1); }
.shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px rgba(0,0,0,0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
.shadow-\[0_4px_20px_rgba\(26\2c 47\2c 92\2c 0\.08\)\]  { box-shadow: 0 4px 20px rgba(26,47,92,0.08); }
.shadow-\[0_-4px_20px_rgba\(26\2c 47\2c 92\2c 0\.08\)\] { box-shadow: 0 -4px 20px rgba(26,47,92,0.08); }

/* --- 14. Position / Z-index --- */
.fixed    { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.top-0    { top: 0; }
.top-20   { top: 5rem; }
.left-0   { left: 0; }
.right-0  { right: 0; }
.right-6  { right: 1.5rem; }
.bottom-0  { bottom: 0; }
.bottom-20 { bottom: 5rem; }
.z-50      { z-index: 50; }
.z-\[60\]  { z-index: 60; }

/* --- 15. Display --- */
.hidden       { display: none; }
.block        { display: block; }
.inline-block { display: inline-block; }

/* --- 16. Object Fit --- */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/* --- 17. Text Utilities --- */
.text-center   { text-align: center; }
.text-left     { text-align: left; }
.italic        { font-style: italic; }
.font-bold     { font-weight: 700; }
.uppercase     { text-transform: uppercase; }
.tracking-wider  { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.leading-tight   { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.opacity-60  { opacity: 0.60; }
.opacity-80  { opacity: 0.80; }
.opacity-90  { opacity: 0.90; }
.opacity-40  { opacity: 0.40; }
.opacity-0   { opacity: 0; }
.opacity-100 { opacity: 1; }
.text-surface-variant\/50  { color: rgba(224,227,229,0.50); }
.text-surface-variant\/70  { color: rgba(224,227,229,0.70); }
.text-primary-fixed\/70    { color: rgba(174,242,194,0.70); }
.text-error-container\/40  { color: rgba(255,218,214,0.40); }

/* --- 18. Transitions / Transforms --- */
.transition-all       { transition: all 150ms ease; }
.transition-colors    { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
.transition-transform { transition: transform 150ms ease; }
.duration-1000        { transition-duration: 1000ms; }
.translate-y-0        { transform: translateY(0); }
.translate-y-10       { transform: translateY(2.5rem); }
.grayscale            { filter: grayscale(100%); }
.backdrop-blur-md     { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* --- 19. Hover / Active States --- */
.hover\:text-primary:hover       { color: var(--color-primary); }
.hover\:text-primary-fixed:hover { color: var(--color-primary-fixed); }
.hover\:opacity-90:hover         { opacity: 0.9; }
.hover\:scale-105:hover          { transform: scale(1.05); }
.hover\:scale-110:hover          { transform: scale(1.10); }
.hover\:underline:hover          { text-decoration: underline; }
.hover\:bg-primary-fixed:hover   { background-color: var(--color-primary-fixed); }
.hover\:text-primary:hover       { color: var(--color-primary); }
.hover\:translate-y-\[-8px\]:hover { transform: translateY(-8px); }
.active\:scale-95:active         { transform: scale(0.95); }

/* Group hover */
.group:hover .group-hover\:bg-primary-fixed { background-color: var(--color-primary-fixed); }
.group:hover .group-hover\:text-primary     { color: var(--color-primary); }

/* Details open state for accordion */
details[open] .group-open\:rotate-180 { transform: rotate(180deg); }

/* --- 20. Custom Components --- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

.whatsapp-pulse { animation: pulse-animation 2s infinite; }
@keyframes pulse-animation {
  0%   { box-shadow: 0 0 0 0px   rgba(37,211,102,0.7); }
  100% { box-shadow: 0 0 0 20px  rgba(37,211,102,0); }
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* Shadows with commas (Tailwind class names) */
.shadow-\[0_4px_20px_rgba\(26\,47\,92\,0\.08\)\]  { box-shadow: 0 4px 20px rgba(26,47,92,0.08); }
.shadow-\[0_-4px_20px_rgba\(26\,47\,92\,0\.08\)\] { box-shadow: 0 -4px 20px rgba(26,47,92,0.08); }

/* --- 21. Responsive Breakpoints --- */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:flex        { display: flex; }
  .md\:hidden      { display: none; }
  .md\:block       { display: block; }
  .md\:static      { position: static; }
  .md\:w-auto      { width: auto; }
  .md\:flex-row    { flex-direction: row; }
  .md\:bg-transparent { background-color: transparent; }
  .md\:shadow-none { box-shadow: none; }
  .md\:p-0         { padding: 0; }
  .md\:col-span-2  { grid-column: span 2 / span 2; }
  .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\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:px-gutter   { padding-left: var(--spacing-gutter); padding-right: var(--spacing-gutter); }
  .md\:text-left   { text-align: left; }
  .md\:text-display-lg { font-size: 48px; line-height: 56px; }
  .md\:bottom-8    { bottom: 2rem; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:col-span-1  { grid-column: span 1 / span 1; }
}

@media (min-width: 1280px) {
  .xl\:block { display: block; }
}

/* --- Enhancements --- */
.watermark-bg {
  position: relative;
  overflow: hidden;
}
.watermark-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("watermark.webp") center / 600px no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.watermark-bg > * {
  position: relative;
  z-index: 10;
}

.badge-icon {
  background: var(--color-primary-container);
  color: var(--color-primary);
  border-radius: 9999px;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

/* --- Required Utility Classes --- */
.absolute { position: absolute; }
.relative { position: relative; }
.w-full { width: 100%; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.overflow-hidden { overflow: hidden; }

/* --- Personal Presentation Section --- */
.presentation-section {
    padding-top: 64px;
    padding-bottom: 40px;
    background-color: var(--color-surface-container-low);
}

.presentation-container {
    max-width: var(--spacing-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-margin-mobile);
    padding-right: var(--spacing-margin-mobile);
}

@media (min-width: 768px) {
    .presentation-container {
        padding-left: var(--spacing-gutter);
        padding-right: var(--spacing-gutter);
    }
}

.presentation-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
}

@media (min-width: 768px) {
    .presentation-flex {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 64px;
        text-align: left;
    }
}

.presentation-image-wrapper {
    flex-shrink: 0;
    width: 260px;
    height: 260px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    border: 4px solid #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (min-width: 768px) {
    .presentation-image-wrapper {
        width: 320px;
        height: 320px;
    }
}

.presentation-image-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.12), 0 10px 15px -5px rgba(0, 0, 0, 0.08);
}

.presentation-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.presentation-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.presentation-field {
    line-height: 1.3;
}

.presentation-label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-secondary);
    display: block;
    margin-bottom: 4px;
}

.presentation-name {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 800;
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .presentation-name {
        font-size: 40px;
    }
}

.presentation-role {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-on-surface-variant);
}

@media (min-width: 768px) {
    .presentation-role {
        font-size: 24px;
    }
}

.presentation-location {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-on-surface-variant);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

@media (min-width: 768px) {
    .presentation-location {
        font-size: 18px;
    }
}

/* ============================================================
   MUTUAL CHACRA — NAVBAR & LAYOUT CUSTOM RULES
   ============================================================ */

/* Header adjustments */
header {
  height: 80px !important;
  border-bottom: 1px solid rgba(192, 201, 191, 0.2);
}

.h-12 {
  height: 3rem !important;
}

/* Desktop Navigation Layout & Spacing */
@media (min-width: 768px) {
  #nav-menu {
    display: flex !important;
    flex: 1 1 0% !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: static !important;
    width: auto !important;
    background-color: transparent !important;
    flex-direction: row !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }
  
  #nav-menu > div {
    display: flex !important;
    flex-direction: row !important;
    gap: 2rem !important; /* md:gap-8 = 32px */
    align-items: center !important;
    margin-left: 3rem !important; /* md:ml-12 = 48px */
  }
  
  #nav-menu a.bg-secondary {
    align-self: auto !important;
    width: auto !important;
  }
}

/* Mobile Dropdown Floating Card Layout */
@media (max-width: 767px) {
  #nav-menu.flex {
    display: flex !important;
  }
  #nav-menu {
    display: none;
    position: absolute !important;
    top: 80px !important; /* top-20 */
    right: 16px !important; /* right-4 */
    width: 16rem !important; /* w-64 */
    background-color: #ffffff !important;
    flex-direction: column !important;
    gap: 1.5rem !important; /* gap-6 */
    padding: 1.5rem !important; /* p-6 */
    border-radius: 1rem !important; /* rounded-2xl */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; /* shadow-xl */
    border: 1px solid rgba(192, 201, 191, 0.2) !important; /* border-outline-variant/10 */
    z-index: 50 !important;
  }
  
  #nav-menu > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important; /* gap-6 */
    align-items: flex-end !important;
  }
  
  #nav-menu a.bg-secondary {
    align-self: stretch !important;
    width: 100% !important;
    text-align: center !important;
  }
}

/* Links Underline Hover Animation */
#nav-menu a.relative::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background-color: var(--color-primary) !important;
  transform: scaleX(0) !important;
  transition: transform 0.3s ease !important;
  transform-origin: left !important;
}

#nav-menu a.relative:hover::after {
  transform: scaleX(1) !important;
}

/* Portal Socios Button Premium Styles */
#nav-menu a.bg-secondary {
  background-color: var(--color-secondary) !important;
  color: var(--color-on-secondary) !important;
  padding: 0.625rem 1.5rem !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(74, 93, 141, 0.2) !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.375rem !important;
}

#nav-menu a.bg-secondary:hover {
  box-shadow: 0 6px 20px rgba(74, 93, 141, 0.3) !important;
  transform: translateY(-2px) !important;
}

#nav-menu a.bg-secondary:active {
  transform: scale(0.95) !important;
}

/* --- SCROLL REVEAL ANIMATIONS --- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- 7. Carrousel Coverflow Premium de Flyers --- */
.text-white {
  color: #ffffff !important;
}
.text-white\/90 {
  color: rgba(255, 255, 255, 0.9) !important;
}

.flyers-section {
  background: radial-gradient(circle at 50% 30%, #063c23 0%, #021e11 55%, #010d07 100%);
}

#flyers-carousel-container {
  min-height: 460px;
  width: 100%;
}

#flyers-track {
  height: 360px;
}

.flyer-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 340px;
  transition: transform 850ms ease-in-out, 
              opacity 850ms ease-in-out, 
              filter 850ms ease-in-out;
  will-change: transform, opacity, filter;
}

@media (min-width: 768px) {
  #flyers-carousel-container {
    min-height: 520px;
  }
  #flyers-track {
    height: 440px;
  }
  .flyer-item {
    width: 320px;
    height: 420px;
  }
}

.flyer-item .flyer-card-inner {
  border-radius: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  transition: box-shadow 750ms ease, border-color 750ms ease;
  backface-visibility: hidden;
}

.flyer-item.is-center {
  z-index: 30 !important;
}

.flyer-item.is-center .flyer-card-inner {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.7), 0 0 35px rgba(74, 163, 114, 0.35);
}

.flyer-dot {
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.3) !important;
  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.flyer-dot:hover {
  background-color: rgba(255, 255, 255, 0.6) !important;
}

.flyer-dot.active {
  background-color: var(--color-amber-vibrant) !important;
  width: 2rem !important;
  opacity: 1 !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5) !important;
}

/* Lightbox Modal */
#flyer-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 300ms ease-in-out;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#flyer-modal.active {
  display: flex !important;
  opacity: 1 !important;
}

#close-flyer-modal {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 150ms ease;
  z-index: 1010;
}

#close-flyer-modal:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

#flyer-modal-content {
  position: relative;
  max-width: 56rem;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#flyer-modal-content img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Accesibilidad: Fallback a grilla estática si se prefiere movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  #flyers-track {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 2.5rem !important;
    height: auto !important;
    overflow: visible !important;
    perspective: none !important;
    transform-style: flat !important;
    padding: 2rem 0 !important;
  }
  .flyer-item {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }
  #flyers-dots {
    display: none !important;
  }
  .flyers-section p.text-white\/90 {
    display: none !important;
  }
}

/* --- Formulario de Contacto --- */
.form-grid-row { margin-bottom: 1.5rem; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.form-label { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--color-on-surface); }
.form-input, .form-textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--color-outline-variant); border-radius: 0.5rem; background-color: #fff; color: var(--color-on-surface); font-family: var(--font-body); font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; }
.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 67, 36, 0.1); }
.form-input.is-invalid, .form-textarea.is-invalid { border-color: var(--color-error); }
.form-input.is-valid, .form-textarea.is-valid { border-color: var(--color-whatsapp-green); }
.form-textarea { min-height: 120px; resize: vertical; }
.form-field-error { font-size: 0.75rem; color: var(--color-error); display: none; margin-top: 0.25rem; }
.form-field-error.visible { display: block; }
.form-checkbox-label { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; color: var(--color-on-surface-variant); cursor: pointer; }
.form-checkbox { margin-top: 0.25rem; width: 1.25rem; height: 1.25rem; accent-color: var(--color-primary); cursor: pointer; }
.form-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background-color: var(--color-primary); color: #fff; padding: 1rem 2rem; border-radius: 9999px; font-weight: 700; font-size: 1.125rem; transition: background-color 0.2s, transform 0.2s; box-shadow: 0 4px 12px rgba(0,67,36,0.2); width: 100%; }
.form-submit-btn:hover { background-color: var(--color-primary-container); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,67,36,0.3); }
.form-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.feedback-container { padding: 1rem; border-radius: 0.75rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; }
.feedback-success { background-color: rgba(37,211,102,0.1); color: #0f5132; border: 1px solid rgba(37,211,102,0.3); }
.feedback-error { background-color: rgba(186,26,26,0.1); color: var(--color-error); border: 1px solid rgba(186,26,26,0.3); }
.feedback-container:empty { display: none; }
.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* --- Formulario de Contacto --- */
.form-grid-row { margin-bottom: 1.5rem; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.form-label { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--color-on-surface); }
.form-input, .form-textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--color-outline-variant); border-radius: 0.5rem; background-color: #fff; color: var(--color-on-surface); font-family: var(--font-body); font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; }
.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 67, 36, 0.1); }
.form-input.is-invalid, .form-textarea.is-invalid { border-color: var(--color-error); }
.form-input.is-valid, .form-textarea.is-valid { border-color: var(--color-whatsapp-green); }
.form-textarea { min-height: 120px; resize: vertical; }
.form-field-error { font-size: 0.75rem; color: var(--color-error); display: none; margin-top: 0.25rem; }
.form-field-error.visible { display: block; }
.form-checkbox-label { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; color: var(--color-on-surface-variant); cursor: pointer; }
.form-checkbox { margin-top: 0.25rem; width: 1.25rem; height: 1.25rem; accent-color: var(--color-primary); cursor: pointer; }
.form-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background-color: var(--color-primary); color: #fff; padding: 1rem 2rem; border-radius: 9999px; font-weight: 700; font-size: 1.125rem; transition: background-color 0.2s, transform 0.2s; box-shadow: 0 4px 12px rgba(0,67,36,0.2); width: 100%; }
.form-submit-btn:hover { background-color: var(--color-primary-container); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,67,36,0.3); }
.form-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.feedback-container { padding: 1rem; border-radius: 0.75rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; }
.feedback-success { background-color: rgba(37,211,102,0.1); color: #0f5132; border: 1px solid rgba(37,211,102,0.3); }
.feedback-error { background-color: rgba(186,26,26,0.1); color: var(--color-error); border: 1px solid rgba(186,26,26,0.3); }
.feedback-container:empty { display: none; }
.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }