/* ============================================================
   Fundo Ninhue — 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-behavior: auto; }
}

/* ---------- 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 scroll en móvil es continuo: cada sección ocupa el alto que necesita
     y conserva el padding de .pad, igual que en escritorio.

     Antes había scroll-snap vertical obligatorio (scroll-snap-type: y mandatory
     con scroll-snap-stop: always) que forzaba una pantalla completa por
     sección. En el teléfono peleaba con el scroll natural del dedo: la página
     saltaba de golpe y no dejaba parar a media sección. */
  .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; }
}

/* ============================================================
   PAGINAS LEGALES  ·  privacidad.html y terminos.html
   ------------------------------------------------------------
   Documento para leer, no para vender: una columna estrecha, mucho
   interlineado y ningun elemento que compita con el texto. La medida
   ronda los 70 caracteres por linea, que es donde el ojo deja de
   perder el renglon al saltar.
   ============================================================ */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(110px, 14vh, 160px) 24px clamp(64px, 9vh, 110px);
  font-family: var(--sans);
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.78;
}

.legal-head { margin-bottom: 52px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.legal-head .eyebrow { margin-bottom: 14px; }
.legal-head h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 6vw, 50px);
  font-weight: 600;
  line-height: 1.12;
  color: var(--olive-2);
  margin-bottom: 12px;
}
.legal-fecha { font-size: 14px; color: var(--muted); }

.legal section { margin-bottom: 42px; }
.legal h2 {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  color: var(--olive-2);
  margin-bottom: 14px;
  line-height: 1.3;
}
.legal p { margin-bottom: 15px; }
.legal p:last-child { margin-bottom: 0; }

.legal ul { margin: 0 0 15px; padding-left: 0; list-style: none; }
.legal li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 11px;
}
/* Vineta propia: el disco por defecto queda pesado a este tamaño de
   texto y desalineado respecto a la primera linea. */
.legal li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.legal strong { font-weight: 700; color: var(--olive-2); }
.legal em { font-style: italic; }
.legal a { color: var(--olive); font-weight: 600; border-bottom: 1px solid rgba(63,98,47,.32); }
.legal a:hover { border-bottom-color: var(--olive); }
.legal code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .88em;
  background: var(--sand);
  padding: 1px 6px;
  border-radius: 4px;
}

.legal-nav {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
}
.legal-nav a { color: var(--olive); border-bottom: none; }
.legal-nav a:hover { color: var(--olive-2); }

/* Los enlaces legales del pie, en la linea de abajo del todo. */
.footer-legal { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.footer-legal a { opacity: .85; }
.footer-legal a:hover { opacity: 1; text-decoration: underline; }
.footer-legal .dot { opacity: .45; }

@media (max-width: 640px) {
  .legal { font-size: 16px; padding-top: 96px; }
  .legal-nav { flex-direction: column; gap: 12px; }
}