/* ============================================================
   Ópticas CV+ — "Ve Más Lejos"
   Design tokens + estilos de la página de campaña.
   Cargado únicamente en /ve-mas-lejos, no afecta el resto del sitio.
   ============================================================ */

/* --- Web fonts (self-hosted, sin CDN) --- */
/* Bebas Neue oficial (Google Fonts, licencia OFL) - fuente provista por el cliente */
@font-face {
  font-family: 'VML Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/itcsiete_ve_mas_lejos/static/src/fonts/BebasNeue-Regular.woff2") format('woff2'),
       url("/itcsiete_ve_mas_lejos/static/src/fonts/BebasNeue-Regular.ttf") format('truetype');
}

@font-face { font-family: 'VML Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url("/itcsiete_ve_mas_lejos/static/src/fonts/Montserrat-400.ttf") format('truetype'); }
@font-face { font-family: 'VML Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url("/itcsiete_ve_mas_lejos/static/src/fonts/Montserrat-500.ttf") format('truetype'); }
@font-face { font-family: 'VML Montserrat'; font-style: italic; font-weight: 500; font-display: swap; src: url("/itcsiete_ve_mas_lejos/static/src/fonts/Montserrat-500-Italic.ttf") format('truetype'); }
@font-face { font-family: 'VML Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url("/itcsiete_ve_mas_lejos/static/src/fonts/Montserrat-600.ttf") format('truetype'); }
@font-face { font-family: 'VML Montserrat'; font-style: italic; font-weight: 600; font-display: swap; src: url("/itcsiete_ve_mas_lejos/static/src/fonts/Montserrat-600-Italic.ttf") format('truetype'); }
@font-face { font-family: 'VML Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url("/itcsiete_ve_mas_lejos/static/src/fonts/Montserrat-700.ttf") format('truetype'); }
@font-face { font-family: 'VML Montserrat'; font-style: italic; font-weight: 700; font-display: swap; src: url("/itcsiete_ve_mas_lejos/static/src/fonts/Montserrat-700-Italic.ttf") format('truetype'); }
@font-face { font-family: 'VML Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url("/itcsiete_ve_mas_lejos/static/src/fonts/Montserrat-800.ttf") format('truetype'); }
@font-face { font-family: 'VML Montserrat'; font-style: italic; font-weight: 800; font-display: swap; src: url("/itcsiete_ve_mas_lejos/static/src/fonts/Montserrat-800-Italic.ttf") format('truetype'); }
@font-face { font-family: 'VML Montserrat'; font-style: normal; font-weight: 900; font-display: swap; src: url("/itcsiete_ve_mas_lejos/static/src/fonts/Montserrat-900.ttf") format('truetype'); }
@font-face { font-family: 'VML Montserrat'; font-style: italic; font-weight: 900; font-display: swap; src: url("/itcsiete_ve_mas_lejos/static/src/fonts/Montserrat-900-Italic.ttf") format('truetype'); }

/* ------------------------------------------------------------
   Design tokens - con prefijo vml- para no chocar con otras
   variables (cv-, sol-, ink-) que ya pudieran existir en el
   tema del sitio.
   Paleta oficial: Blanco, Tiffany Blue, Celadon Blue,
   Ripe Mango, Onyx.
   ------------------------------------------------------------ */
#wrap.o_vml_page {
  --brand-white:        #FFFFFF;
  --brand-tiffany-blue: #00ABC8;
  --brand-celadon-blue: #0083AD;
  --brand-ripe-mango:   #FFC629;
  --brand-onyx:         #373A36;

  --vml-cyan-50:  #E5F6F9;
  --vml-cyan-100: #BCE8EF;
  --vml-cyan-200: #8DD8E2;
  --vml-cyan-300: #5DC7D5;
  --vml-cyan-400: #2EB8C9;
  --vml-cyan-500: #00ABC8;
  --vml-cyan-600: #0099B8;
  --vml-cyan-700: #0083AD;
  --vml-cyan-800: #006A8A;
  --vml-cyan-900: #004D66;

  --vml-sol-50:  #FFF8DC;
  --vml-sol-100: #FFEDA8;
  --vml-sol-200: #FFE17A;
  --vml-sol-300: #FFD44E;
  --vml-sol-400: #FFC629;
  --vml-sol-500: #E5AE16;
  --vml-sol-600: #B8870A;
  --vml-sol-700: #8A6307;

  --vml-ink-900: #373A36;
  --vml-ink-800: #45494E;
  --vml-ink-700: #595E64;
  --vml-ink-600: #6F747B;
  --vml-ink-500: #8A8F95;
  --vml-ink-400: #ADB1B6;
  --vml-ink-300: #CED1D5;
  --vml-ink-200: #E4E6E8;
  --vml-ink-100: #F1F2F4;
  --vml-ink-050: #F8F9FA;

  --vml-surface:        #FFFFFF;
  --vml-surface-alt:    #F8F9FA;
  --vml-surface-cyan:   #E6F6FA;
  --vml-surface-yellow: #FFF7DD;

  --vml-shadow-xs: 0 1px 2px rgba(31, 32, 36, 0.06);
  --vml-shadow-sm: 0 2px 6px rgba(31, 32, 36, 0.07);
  --vml-shadow-md: 0 6px 18px rgba(31, 32, 36, 0.08);
  --vml-shadow-lg: 0 14px 40px rgba(31, 32, 36, 0.12);
  --vml-shadow-cyan: 0 8px 24px rgba(0, 171, 200, 0.28);

  --vml-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --vml-font-display: 'VML Bebas Neue', 'Oswald', 'Anton', system-ui, sans-serif;
  --vml-font-body: 'VML Montserrat', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  font-family: var(--vml-font-body);
  color: var(--vml-ink-900);
  overflow-x: hidden;
  background: #fff;
}

#wrap.o_vml_page * { box-sizing: border-box; }
/* Todos los encabezados (h1-h4) usan Bebas Neue por defecto */
#wrap.o_vml_page h1,
#wrap.o_vml_page h2,
#wrap.o_vml_page h3,
#wrap.o_vml_page h4 { font-family: var(--vml-font-display); font-weight: 400; }
#wrap.o_vml_page a { text-decoration: none; }
#wrap.o_vml_page a:hover { text-decoration: underline; text-underline-offset: 3px; }

@keyframes vmlPop {
  0%   { transform: scale(.4) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes vmlFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.o_vml_page .vml-pop { animation: vmlPop .42s cubic-bezier(0.22, 1, 0.36, 1) both; }
.o_vml_page .vml-float { animation: vmlFloat 7s ease-in-out infinite; }

/* Botones con estados hover/press */
.o_vml_page .vml-btn { display: inline-flex; transition: transform .14s var(--vml-ease-out), box-shadow .14s var(--vml-ease-out); }
.o_vml_page .vml-btn:hover { transform: translateY(-2px); text-decoration: none; }

/* Tarjeta de actividad ("Gana stickers con estas actividades") */
.o_vml_page .vml-activity { transition: transform .18s var(--vml-ease-out), box-shadow .18s var(--vml-ease-out); }
.o_vml_page .vml-activity:hover { transform: translateY(-3px); box-shadow: var(--vml-shadow-md); }

/* Acordeón de bases y condiciones */
.o_vml_page .vml-accordion-item[data-open="1"] .vml-accordion-icon { transform: rotate(45deg); }
.o_vml_page .vml-accordion-body[hidden] { display: none; }