/* ============================================================
   Hacienda Los Aromos — Estilos base compartidos
   ------------------------------------------------------------
   Aquí va SOLO lo que usan dos o más secciones. Si una clase la
   usa una sola sección, vive en el <style> de su componente.
   Los colores deben coincidir con window.SITE.COLORS de index.html.
   ============================================================ */

:root {
  color-scheme: light;

  --olive:     #3f622f;
  --olive-2:   #2b451f;
  --leaf:      #60933e;
  --leaf-2:    #7aad52;
  --emerald:   #14833f;
  --lake:      #3f7d86;
  --lake-2:    #62a5ad;
  --gold:      #ae9044;
  --gold-2:    #cdaa57;
  --gold-soft: #eeddb2;
  --cream:     #f6f3ea;
  --sand:      #ece2ce;
  --ink:       #1b2417;
  --muted:     #5e6b53;
  --white:     #ffffff;
  --line:      rgba(63, 98, 47, 0.15);
  --shadow:    0 28px 80px rgba(37, 60, 27, 0.22);
  --shadow-sm: 0 14px 36px rgba(37, 60, 27, 0.13);
  --radius:    24px;
  --radius-sm: 15px;
  --max:       1200px;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Manrope", ui-sans-serif, system-ui, sans-serif;

  /* Intensidad de la capa negra sobre la foto del banner.
     Subir si el titular se sigue perdiendo, bajar si queda muy oscuro. */
  --hero-veil: 0.15;
}

/* ---------- Reset y tipografía ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--gold); color: var(--olive-2); }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.02; letter-spacing: -0.005em; }

.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 26px; border-radius: 999px;
  font-weight: 700; font-size: 15px; letter-spacing: 0.01em;
  cursor: pointer; border: none; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--olive-2); }

/* ---------- Botón destacado: resplandor + barrido ----------
   Se aplica a .btn-primary, que es la acción principal en todo el sitio.
   Dos efectos que trabajan juntos:
   · el resplandor late despacio y marca dónde queremos el clic;
   · el barrido es ese destello que cruza el botón cada pocos segundos,
     el mismo recurso de las historias de redes sociales.
   El barrido se recorta con overflow, por eso el resplandor va en
   box-shadow (que sí escapa del recorte) y no en un pseudo-elemento. */
.btn-primary {
  position: relative;
  overflow: hidden;
  animation: btnResplandor 2.8s ease-in-out infinite;
}
.btn-primary:hover { transform: translateY(-3px); filter: brightness(1.06); }

@keyframes btnResplandor {
  0%, 100% { box-shadow: 0 14px 30px rgba(174,144,68,.34), 0 0 0 0 rgba(205,170,87,0); }
  50%      { box-shadow: 0 16px 36px rgba(174,144,68,.48), 0 0 22px 3px rgba(205,170,87,.58); }
}

.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -140%;
  width: 55%; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: btnBarrido 3.6s ease-in-out infinite;
}
/* La pausa larga al inicio evita que el destello canse: cruza una vez
   cada ciclo y se queda quieto el resto del tiempo. */
@keyframes btnBarrido {
  0%, 64% { left: -140%; }
  100%    { left: 160%; }
}
.btn-dark { background: var(--olive); color: #fff; }
.btn-dark:hover { transform: translateY(-3px); background: var(--olive-2); }
.btn-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.btn-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; transform: translateY(-3px); }
.btn-ghost { background: rgba(63,98,47,.08); color: var(--olive); }
.btn-ghost:hover { background: rgba(63,98,47,.14); transform: translateY(-3px); }
/* Estado enviando: lo usan el formulario de cotización y el de brochure */
.btn[disabled] { opacity: .65; cursor: wait; pointer-events: none; }

/* ---------- Marca (la usan el header y el footer) ---------- */
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { height: 44px; width: 44px; border-radius: 12px; background: var(--olive); display: grid; place-items: center; flex: none; transition: height .3s, width .3s; box-shadow: 0 6px 16px rgba(37,60,27,.22); }
.brand-mark img { height: 30px; width: auto; }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--olive-2); line-height: .95; }
.brand-name span { display: block; font-family: var(--sans); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-top: 4px; }

/* ---------- Envoltorio de sección ---------- */
section { position: relative; }
.pad { padding: clamp(70px, 9vw, 130px) 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--gold); }
.section-title { font-size: clamp(34px, 4.8vw, 58px); margin: 14px 0; color: var(--olive-2); max-width: 20ch; font-weight: 600; }
.section-title em { font-style: italic; color: var(--leaf); }
.section-lead { font-size: 17.5px; color: var(--muted); max-width: 60ch; }
.center { text-align: center; }
.center .eyebrow, .center .section-title, .center .section-lead { margin-left: auto; margin-right: auto; }
.center .eyebrow::before { display: none; }

/* Fila de botones: la usan el hero, los splits y el CTA final */
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ---------- Split (lo usan "somos" y "conecta") ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.split.reverse { grid-template-columns: 1fr 1.05fr; }
.split.reverse .split-media { order: -1; }
.split-media { position: relative; }
.split-media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4/3.1; object-fit: cover; }
.split-media .badge {
  position: absolute; bottom: -22px; right: -10px; background: var(--white);
  border-radius: 18px; padding: 18px 22px; box-shadow: var(--shadow-sm); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px;
}
.split-media .badge .b-num { font-family: var(--serif); font-size: 36px; color: var(--olive); line-height: 1; font-weight: 600; }
.split-media .badge .b-txt { font-size: 12.5px; font-weight: 700; color: var(--muted); line-height: 1.3; }
.split-text p { color: var(--muted); font-size: 16.5px; margin-top: 16px; }
.split-text .feature-list { list-style: none; margin-top: 26px; display: grid; gap: 14px; }
.split-text .feature-list li { display: flex; align-items: flex-start; gap: 13px; font-weight: 600; color: var(--olive-2); }
.split-text .feature-list .tick { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--olive); color: var(--gold-soft); display: grid; place-items: center; margin-top: 1px; }
.split-text .feature-list .tick svg { width: 13px; height: 13px; }

/* ---------- Formularios (cotización y brochure) ---------- */
.form-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(26px, 3vw, 40px); border: 1px solid var(--line); }
.form-card h3 { font-size: 30px; color: var(--olive-2); font-weight: 600; }
.form-card .fhint { color: var(--muted); font-size: 14px; margin: 6px 0 22px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 700; color: var(--olive-2); margin-bottom: 7px; letter-spacing: .01em; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--cream); transition: border-color .25s, box-shadow .25s, background .25s; font-size: 15px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--leaf); background: #fff; box-shadow: 0 0 0 4px rgba(96,147,62,.14); }
.field textarea { resize: vertical; min-height: 84px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-card .btn { width: 100%; justify-content: center; margin-top: 8px; font-size: 16px; padding: 16px; }
.form-foot { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 14px; }

/* Honeypot anti-bot: invisible para personas, visible para bots */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* Confirmación dentro del formulario */
.form-done { text-align: center; padding: 18px 4px 6px; }
.form-done .fd-ic { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; background: rgba(63,98,47,.12); color: var(--olive); }
.form-done .fd-ic svg { width: 30px; height: 30px; }
.form-done h4 { font-family: var(--serif); font-size: 25px; color: var(--olive-2); font-weight: 600; margin-bottom: 10px; }
.form-done p { color: var(--muted); font-size: 15px; line-height: 1.65; }
.form-done .fd-alt { margin-top: 18px; font-size: 13px; }
.form-done .fd-alt a { color: var(--olive); font-weight: 700; text-decoration: underline; }

/* ---------- Aviso flotante (lo crea core.js) ---------- */
.toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 120px); opacity: 0; pointer-events: none; background: var(--olive); color: #fff; padding: 15px 24px; border-radius: 14px; font-weight: 600; font-size: 15px; box-shadow: var(--shadow); z-index: 210; display: flex; align-items: center; gap: 10px; transition: transform .45s cubic-bezier(.2,.9,.2,1), opacity .3s ease; }
.toast.active { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast svg { width: 20px; height: 20px; color: var(--gold-2); }

/* ---------- Animaciones al entrar en pantalla ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-snap-type: none; }
}

/* ---------- Sin JavaScript ---------- */
.noscript-aviso {
  background: var(--olive-2); color: #fff; text-align: center;
  padding: 28px 20px; font-size: 15.5px; line-height: 1.6;
}
.noscript-aviso h1 { font-size: 26px; margin-bottom: 10px; color: #fff; }
.noscript-aviso a { color: var(--gold-2); font-weight: 700; text-decoration: underline; }

/* ---------- Responsive compartido ---------- */
@media (max-width: 900px) {
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .split-media .badge { right: 12px; }
}

@media (max-width: 640px) {
  /* El recorrido en móvil avanza sección por sección.
     Cada componente monta su <section> dentro de su contenedor, por eso
     hace falta el selector "main > div > section" además del directo. */
  html { scroll-snap-type: y mandatory; }
  main > section, main > div > section, footer {
    scroll-snap-align: start; scroll-snap-stop: always;
    min-height: 100svh; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: 66px !important; padding-bottom: 88px !important;
  }
  .container { width: calc(100% - 44px); }

  .section-title { font-size: clamp(28px, 8vw, 36px); margin: 8px 0; }
  .section-lead { font-size: 15px; }
  .eyebrow { font-size: 11.5px; }

  .split, .split.reverse { gap: 14px; text-align: center; }
  .split-media { display: none; }
  .split-text p { font-size: 14.5px; margin-top: 10px; }
  .split-text .hero-actions { justify-content: center; margin-top: 18px !important; }
  .split-text .feature-list { text-align: left; margin-top: 16px; gap: 9px; }

  .frow { grid-template-columns: 1fr 1fr; }
  .form-card { padding: 20px 18px; }
  .form-card h3 { font-size: 24px; }
  .form-card .fhint { margin: 5px 0 15px; }
  .field { margin-bottom: 11px; }
  .field textarea { min-height: 60px; }
  .form-card .btn { margin-top: 4px; padding: 14px; }
  .form-foot { margin-top: 10px; }

  /* Deja espacio para la barra fija de acciones */
  body { padding-bottom: 70px; }
}