/* ==========================================================================
   Juana Casa — estilos base
   Compartidos por todas las páginas: tipografías, tokens de diseño, reset
   y componentes comunes (navegación, botones, footer, botones flotantes,
   modales). Los estilos propios de cada página van en su propio archivo.
   ========================================================================== */

/* Tipografías ------------------------------------------------------------- */
@font-face { font-family: 'Cera Pro'; src: url('../fonts/cera-pro-light.woff2') format('woff2'); font-weight: 300 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cera Pro'; src: url('../fonts/cera-pro-medium.woff2') format('woff2'); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cera Pro'; src: url('../fonts/cera-pro-bold.woff2') format('woff2'); font-weight: 700 900; font-style: normal; font-display: swap; }

/* Tokens de diseño -------------------------------------------------------- */
:root {
  --sage-light: #C5DEB0;
  --sage-glow: #D8ECC6;
  --sage-mid: #8FA876;
  --sage-deep: #5A6A4C;
  --forest: #3A4A30;
  --forest-dark: #2A371F;
  --charcoal: #15170F;
  --charcoal-2: #1F2218;
  --charcoal-3: #282C20;
  --cream: #FAF7F0;
  --cream-2: #F2EDDF;
  --beige: #E8E2D3;
  --ink: #1A1A1A;
  --white: #FFFFFF;
  --text-muted: #5D5D57;
  --font-body: 'Cera Pro', sans-serif;
  --font-display: 'Cera Pro', sans-serif;
  --font-accent: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(.16,1,.3,1);
}

/* Reset y base ------------------------------------------------------------ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--sage-mid); outline-offset: 3px; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* Aparición al hacer scroll (la clase .visible la agrega assets/js/comun.js) */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Etiqueta sobre los títulos ---------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: .74rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; color: var(--sage-deep); margin-bottom: 18px;
}
.eyebrow::before { content: ''; width: 26px; height: 1.5px; background: var(--sage-mid); }
.eyebrow.on-dark { color: var(--sage-light); }
.eyebrow.on-dark::before { background: var(--sage-light); }

/* Botones ----------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; letter-spacing: .01em; border-radius: 100px; border: none; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .25s; font-size: .98rem; padding: 15px 30px; white-space: nowrap; }
.btn svg { transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--sage-light); color: var(--forest-dark); box-shadow: 0 8px 26px rgba(197,222,176,.28); }
.btn-primary:hover { background: var(--sage-glow); transform: translateY(-2px); box-shadow: 0 14px 36px rgba(197,222,176,.42); }
.btn-dark { background: var(--forest-dark); color: var(--white); box-shadow: 0 10px 26px rgba(20,26,14,.22); }
.btn-dark:hover { background: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(20,26,14,.3); }
.btn-ghost { background: rgba(255,255,255,.07); color: var(--white); border: 1.5px solid rgba(255,255,255,.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.75); transform: translateY(-2px); }
.btn-primary.pulse { position: relative; }
.btn-primary.pulse::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--sage-light); pointer-events: none; z-index: -1; animation: pulseRing 2.6s ease-out infinite; }
@keyframes pulseRing { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.4); opacity: 0; } }

/* Navegación (base) --------------------------------------------------------
   Variantes: inicio.css (transparente sobre el hero) y galerias.css (clara). */
.topnav { z-index: 100; }
.topnav-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.topnav-logo { height: 32px; width: auto; }
.topnav-cta { background: var(--forest-dark); color: var(--white); font-size: .82rem; font-weight: 600; padding: 10px 22px; border-radius: 100px; transition: background .2s, transform .15s; }
.topnav-cta:hover { background: var(--ink); transform: translateY(-1px); }

/* Footer ------------------------------------------------------------------ */
.footer { background: var(--ink); color: rgba(255,255,255,.6); padding: 64px 0 46px; text-align: center; font-size: .82rem; border-top: 1px solid rgba(255,255,255,.08); }
.footer a { color: var(--sage-light); transition: color .2s; }
.footer a:hover { color: var(--sage-glow); }
.footer-team { width: 100%; max-width: 1000px; height: auto; margin: 0 auto 30px; display: block; border-radius: 16px; }
.footer-logo { height: 32px; width: auto; margin: 0 auto 16px; }

/* Botones flotantes (agenda + WhatsApp) ----------------------------------- */
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: inline-flex; align-items: center; gap: 10px; background: #25D366; color: #fff; font-weight: 600; font-size: .9rem; padding: 13px 20px; border-radius: 100px; box-shadow: 0 8px 28px rgba(37,211,102,.42); transition: transform .15s, box-shadow .2s; }
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(37,211,102,.52); }
.wa-float svg { width: 22px; height: 22px; flex-shrink: 0; }
.agenda-float { position: fixed; right: 22px; bottom: 80px; z-index: 200; display: inline-flex; align-items: center; gap: 9px; background: var(--sage-light); color: var(--forest-dark); font-weight: 600; font-size: .9rem; padding: 13px 20px; border-radius: 100px; box-shadow: 0 8px 28px rgba(0,0,0,.28); transition: transform .15s, box-shadow .2s, background .2s; }
.agenda-float:hover { background: var(--sage-glow); transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0,0,0,.34); }
.agenda-float svg { width: 20px; height: 20px; flex-shrink: 0; }
@media (max-width: 600px) {
  .wa-float span, .agenda-float span { display: none; }
  .wa-float { padding: 15px; right: 16px; bottom: 16px; }
  .agenda-float { padding: 15px; right: 16px; bottom: 78px; }
}

/* Modales (video, foto, tour 360°) -----------------------------------------
   Se abren y cierran con Modal.open / Modal.close (assets/js/comun.js). */
.modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal.open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal-content { position: relative; width: 100%; max-width: 1100px; z-index: 1; }
.modal-frame { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.modal-close { position: absolute; top: -52px; right: 0; width: 42px; height: 42px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, transform .15s; }
.modal-close:hover { background: rgba(255,255,255,.22); transform: scale(1.08); }
body.modal-open { overflow: hidden; }
@media (max-width: 768px) {
  .modal { padding: 12px; }
  .modal-close { top: -44px; width: 36px; height: 36px; }
}

/* Respeta a quienes desactivan las animaciones en el sistema operativo ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}