/* =========================================================
   OPTILAND — BASE (global)
   Variables de marca. Completar con el manual de marca.
   Prefijo de clases: .opt-
========================================================= */

:root {
  /* Marca OPTILAND (muestreados del logo) */
  --opt-red: #e62b24;          /* rojo vivo: acentos, íconos, detalles */
  --opt-red-dark: #c01921;     /* rojo profundo: botones con texto blanco, hover */
  --opt-wine: #78181f;         /* vino: fondos oscuros de acento, hover fuerte */
  --opt-orange: #ea5d0b;       /* naranja: acento secundario, badges */
  --opt-yellow: #f7a715;       /* amarillo: destacados, ofertas, estrellas */
  --opt-accent: var(--opt-red-dark);       /* acento por defecto (botón primario) */
  --opt-accent-dark: var(--opt-wine);

  /* Neutros */
  --opt-ink: #12120e;          /* negro del logo: títulos, hero oscuro */
  --opt-text: #2c2c28;
  --opt-muted: #66665f;
  --opt-line: #e6e4df;
  --opt-soft: #f6f5f2;
  --opt-white: #ffffff;

  /* Layout */
  --opt-max: 1280px;
  --opt-gutter: 24px;
  --opt-radius: 12px;
  --opt-ease: 0.2s ease;
  --opt-out: cubic-bezier(.2, .7, .2, 1);
  --opt-font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

body.opt-site,
body.opt-site button,
body.opt-site input,
body.opt-site select,
body.opt-site textarea {
  font-family: var(--opt-font);
}

body.opt-site {
  color: var(--opt-text);
  -webkit-font-smoothing: antialiased;
}

[class*="opt-"],
[class*="opt-"]::before,
[class*="opt-"]::after {
  box-sizing: border-box;
}

/* Sticky no funciona con overflow-x:hidden; clip evita el scroll lateral */
html,
body {
  overflow-x: clip;
}

[hidden] {
  display: none !important;
}

.opt-container {
  max-width: var(--opt-max);
  margin: 0 auto;
  padding: 0 var(--opt-gutter);
}

.opt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* =========================================================
   Movimiento: aparición al hacer scroll + parallax suave
   optiland.js agrega .opt-js al <html> y activa .is-in al entrar en pantalla.
   Sin JS (o con movimiento reducido) todo se ve normal.
   Uso:  class="opt-reveal"  style="--opt-d:.1s" (retraso opcional)
         data-opt-parallax="0.15" (velocidad)
========================================================= */

html.opt-js .opt-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--opt-out), transform 0.8s var(--opt-out);
  transition-delay: var(--opt-d, 0s);
}

html.opt-js .opt-reveal.is-in {
  opacity: 1;
  transform: none;
}

html.opt-js .opt-reveal--left  { transform: translateX(-36px); }
html.opt-js .opt-reveal--right { transform: translateX(36px); }
html.opt-js .opt-reveal--zoom  { transform: scale(0.94); }

[data-opt-parallax] {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html.opt-js .opt-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-opt-parallax] { transform: none !important; }
}