/* Olive Café Wellness — Brand CSS v2 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Jost:wght@300;400;500&display=swap');

:root {
  --cream:      #F8F4E7;
  --cream-mid:  #F1EACF;
  --olive:      #959B5F;
  --deep:       #1F3A34;
  --charcoal:   #242424;
  --white:      #FFFFFF;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--charcoal);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

/* Elementor: quitar padding que agrega al body */
body.elementor-page { padding-top: 0 !important; }
.elementor-section.elementor-section-full_width { padding: 0; }

/* ── NAV ── */
nav#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 4rem;
  transition: background .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
nav#nav.scrolled {
  background: rgba(248,244,231,.96);
  border-bottom-color: rgba(149,155,95,.2);
  backdrop-filter: blur(8px);
}
.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--deep); text-decoration: none;
}
.nav-links { display: flex; gap: 2.8rem; list-style: none; }
.nav-links a {
  font-size: .68rem; font-weight: 400; letter-spacing: .2em;
  text-transform: uppercase; color: var(--charcoal);
  text-decoration: none; opacity: .55; transition: opacity .2s;
}
.nav-links a:hover { opacity: 1; }
.nav-cta {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  padding: .5rem 1.5rem; border: 1px solid var(--deep);
  color: var(--deep); background: transparent; text-decoration: none;
  transition: background .2s, color .2s;
}
.nav-cta:hover { background: var(--deep); color: var(--cream); }
@media (max-width: 768px) {
  nav#nav { padding: 1rem 1.5rem; }
  .nav-links { display: none; }
}

/* ── MARQUEE ── */
.oc-marquee {
  background: var(--charcoal); padding: .85rem 0; overflow: hidden;
}
.oc-marquee-inner {
  display: flex; white-space: nowrap;
  animation: oc-ticker 32s linear infinite;
}
.oc-mi {
  font-size: .6rem; letter-spacing: .38em; text-transform: uppercase;
  color: rgba(248,244,231,.45); padding: 0 2.5rem;
}
.oc-md { color: var(--olive); padding: 0 .3rem; font-size: .75rem; }
@keyframes oc-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── BOTONES ── */
.oc-btn-dark {
  display: inline-block;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  padding: .75rem 2.2rem; background: var(--deep); color: var(--cream);
  border: none; cursor: pointer; text-decoration: none;
  transition: background .2s;
}
.oc-btn-dark:hover { background: var(--charcoal); color: var(--cream); }

.oc-btn-outline {
  display: inline-block;
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  padding: .65rem 1.8rem; border: 1px solid var(--deep);
  color: var(--deep); background: transparent; text-decoration: none;
  transition: background .2s, color .2s;
}
.oc-btn-outline:hover { background: var(--deep); color: var(--cream); }

.oc-btn-olive {
  display: inline-block;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  padding: .8rem 2rem; background: var(--olive); color: var(--cream);
  border: none; cursor: pointer; text-decoration: none;
  transition: background .2s;
}
.oc-btn-olive:hover { background: var(--deep); color: var(--cream); }

/* ── TIPOGRAFÍA AUXILIAR ── */
.oc-serif { font-family: 'Cormorant Garamond', serif; }
.oc-label {
  font-size: .62rem; letter-spacing: .38em; text-transform: uppercase;
  color: var(--olive); display: block; margin-bottom: 1.2rem;
}
.oc-divider-line {
  height: 1px; background: rgba(149,155,95,.2);
  border: none; margin: 2rem 0;
}

/* ── RITUAL DIVIDER ── */
.oc-ritual {
  padding: 2.8rem 5rem;
  display: flex; align-items: center; gap: 2.5rem;
  border-top: 1px solid rgba(149,155,95,.18);
  border-bottom: 1px solid rgba(149,155,95,.18);
}
.oc-ritual-line { flex: 1; height: 1px; background: rgba(149,155,95,.2); }
.oc-ritual-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: .9rem; font-style: italic;
  color: var(--olive); white-space: nowrap;
}

/* ── FOOTER ── */
footer {
  background: var(--charcoal);
  padding: 5.5rem 5rem 3rem;
}
.footer-top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 4rem; padding-bottom: 3rem;
  border-bottom: 1px solid rgba(248,244,231,.07);
  margin-bottom: 2.5rem;
}
.footer-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem; font-weight: 300;
  color: var(--cream); letter-spacing: .06em; margin-bottom: .3rem;
}
.footer-brand-script {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 1.5rem;
  color: var(--olive); display: block;
  margin-bottom: 1.2rem; line-height: 1.2;
}
.footer-desc {
  font-size: .73rem; line-height: 1.9;
  color: rgba(248,244,231,.28); max-width: 28ch;
}
.footer-contact-item {
  font-size: .7rem; color: rgba(248,244,231,.3);
  display: block; text-decoration: none; margin-top: .6rem;
  letter-spacing: .04em; transition: color .2s;
}
.footer-contact-item:hover { color: rgba(248,244,231,.7); }
.footer-col-t {
  font-size: .58rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(149,155,95,.5); margin-bottom: 1.4rem;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: .65rem; }
.footer-links a {
  font-size: .73rem; color: rgba(248,244,231,.3);
  text-decoration: none; letter-spacing: .04em; transition: color .2s;
}
.footer-links a:hover { color: rgba(248,244,231,.7); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
}
.footer-copy {
  font-size: .6rem; letter-spacing: .1em; color: rgba(248,244,231,.18);
}
.footer-estd {
  font-family: 'Cormorant Garamond', serif;
  font-size: .78rem; font-style: italic; color: rgba(149,155,95,.35);
}
@media (max-width: 768px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  footer { padding: 4rem 1.5rem 2rem; }
  .oc-ritual { padding: 2rem 1.5rem; flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; }
}