/* ---------- Tokens ---------- */
:root{
  --navy:#0A192F;
  --aqua:#00BFA6;
  --accent: #00BFA6;
  --white:#FFFFFF;
  --gray:#E5E7EB;

  --text:#0A192F;
  --bg:#FFFFFF;
  --card:#FFFFFF;
  --border:#E5E7EB;

  --radius:16px;
  --shadow:0 10px 30px rgba(10,25,47,.08);
  --transition:220ms cubic-bezier(.2,.6,.2,1);
}

.dark{
  --text:#E5E7EB;
  --bg:#0A192F;
  --card:#0F223F;
  --border:#11314f;
  --shadow:0 12px 36px rgba(0,0,0,.35);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html:focus-within{scroll-behavior:auto}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important}
}

body{
  margin:0;
  font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

h1,h2,h3{
  font-family:'Montserrat','Open Sans',sans-serif;
  line-height:1.2;
  margin:0 0 .6rem;
}
h1{font-weight:700; font-size:clamp(30px,5vw,56px)}
h2{font-weight:700; font-size:clamp(22px,3.2vw,36px)}
h3{font-weight:600; font-size:clamp(18px,2.2vw,24px)}
p{margin:0 0 .75rem}

.container{width:min(1120px,92%); margin:0 auto}
.narrow{max-width:760px; margin-inline:auto}
.subtitle{color:color-mix(in oklab, var(--text) 75%, var(--gray))}

/* ---------- A11y ---------- */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:12px; top:12px; width:auto; height:auto; padding:8px 12px; background:var(--aqua); color:#002a24; border-radius:10px; z-index:1000;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
  background:color-mix(in oklab, var(--bg) 85%, transparent);
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.logo{width:40px; height:40px; border-radius:12px; object-fit:cover}
.logo.small{width:32px; height:32px}


/* Papa Noel al lado derecho del logo */
.brand-text{
  position: relative;
  display: inline-block;
  padding-right: 2.2rem; /* espacio para el emoji */
}

.brand-text::after{
  content: "🎅";
  position: absolute;
  right: 0rem;       /* al borde derecho del texto */
  top: -0.1rem;      /* ligeramente arriba, pero no tapa nada */
  font-size: 1.7rem;
  transform: rotate(12deg); /* inclinación hacia la derecha */
  pointer-events: none;
  z-index: 5;        /* encima del fondo, debajo del menú si aplica */
}

@media (max-width: 640px){
  .brand-text{
    padding-right: 1.8rem;
  }

  .brand-text::after{
    right: -0.1rem;
    top: -0.2rem;
    font-size: 1.5rem;
  }
}


.menu{display:flex; gap:22px}
.menu a{
  color:inherit; text-decoration:none; padding:8px 10px; border-radius:10px;
  transition:background var(--transition), color var(--transition), outline var(--transition);
}
.menu a:hover{background:color-mix(in oklab, var(--border) 40%, transparent)}
.menu a[aria-current="page"]{outline:2px solid color-mix(in oklab, var(--aqua) 40%, var(--navy)); outline-offset:2px}

.menu-toggle{
  display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--border); background:transparent; cursor:pointer;
}
.menu-toggle span{display:block; width:20px; height:2px; background:var(--text); margin:4px auto}
@media (max-width:840px){
  .menu{position:fixed; inset:auto 0 0 0; background:var(--bg); padding:20px; border-top:1px solid var(--border); display:none; flex-direction:column}
  .menu.open{display:flex}
  .menu-toggle{display:block}
}

/* ---------- Buttons ---------- */
.btn-primary,.btn-secondary,.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 18px; border-radius:12px; text-decoration:none; cursor:pointer;
  border:1px solid transparent; transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}
.btn-primary{background:var(--aqua); color:#002a24; border-color:var(--aqua); box-shadow:0 8px 20px rgba(0,191,166,.25)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,191,166,.35)}
.btn-primary:focus-visible{outline:3px solid color-mix(in oklab, var(--aqua) 60%, white); outline-offset:3px}

.btn-secondary{background:transparent; color:var(--aqua); border-color:color-mix(in oklab, var(--aqua) 55%, var(--navy))}
.btn-secondary:hover{background:color-mix(in oklab, var(--aqua) 14%, transparent)}

.btn-outline{background:transparent; color:var(--text); border-color:var(--border)}
.btn-outline:hover{border-color:var(--aqua); box-shadow:0 0 16px rgba(0,191,166,.25)}

.small{padding:10px 14px; font-size:14px}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:64vh; display:flex; align-items:center; overflow:hidden; border-bottom:1px solid var(--border)}
.hero #techCanvas{position:absolute; inset:0; width:100%; height:100%}
.hero-content{position:relative; padding:60px 0}
.hero .subtitle{font-size:clamp(16px,2.2vw,18px); margin-bottom:18px}

/* ---------- Sections & Cards ---------- */
.section{padding:56px 0}
.grid{display:grid; gap:18px}
.cards-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.cards-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.cards-4{grid-template-columns:repeat(4, minmax(0,1fr))}
@media (max-width:980px){.cards-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards-3,.cards-2,.cards-4{grid-template-columns:1fr}}

.card,.plan{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover,.plan:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.22); border-color:color-mix(in oklab, var(--aqua) 30%, var(--border))}

/* Plan destacado – Profesional con fondo de luces y marco navideño */
.plan-featured{
  position: relative;
  border-color: color-mix(in oklab, var(--aqua) 55%, var(--border));
  box-shadow: 0 18px 50px rgba(0,191,166,.45);
  background:
    radial-gradient(circle at 0% 0%, rgba(56,189,248,0.20), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(248,250,252,0.12), transparent 60%),
    var(--card);
}

/* Cinta superior "Recomendado" */
.plan-ribbon{
  position:absolute;
  top:12px;
  right:14px;
  background:linear-gradient(135deg, #dc2626, #f97316);
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

/* Esferas de luz navideña alrededor del plan */
.plan-navidad::before,
.plan-navidad::after{
  content:"";
  position:absolute;
  border-radius:999px;
  filter:blur(6px);
  opacity:.9;
  pointer-events:none;
}

.plan-navidad::before{
  width:38px;
  height:38px;
  top:-8px;
  left:12px;
  background:radial-gradient(circle at 30% 30%, #fff, #22c55e, #14532d);
  animation:xmasOrb 11s linear infinite;
}

.plan-navidad::after{
  width:32px;
  height:32px;
  bottom:-10px;
  right:18px;
  background:radial-gradient(circle at 30% 30%, #fff, #f97316, #b91c1c);
  animation:xmasOrbReverse 13s linear infinite;
}

/* Animaciones suaves de flotación de las esferas */
@keyframes xmasOrb{
  0%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(6px, -4px, 0); }
  100%{ transform:translate3d(0,0,0); }
}
@keyframes xmasOrbReverse{
  0%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(-6px, 4px, 0); }
  100%{ transform:translate3d(0,0,0); }
}

/* Marco/navideño tipo laurel sutil en todas las tarjetas de planes */
.plan{
  position:relative;
  overflow:hidden;
}

/* Esquinas suaves decoradas */
.plan::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px dashed color-mix(in oklab, var(--aqua) 35%, var(--border));
  opacity:.35;
  pointer-events:none;
}

/* En el plan destacado, un poco más de brillo en el marco */
.plan-featured::before{
  border-style:solid;
  border-color:color-mix(in oklab, var(--aqua) 55%, var(--border));
  opacity:.7;
}


.icon svg{
  width:28px;
  height:28px;
  stroke-width:1.6;
}

.features{
  list-style:none;
  padding:0;
  margin:12px 0 0;
}

.features li{
  margin:6px 0;
  padding-left:18px;
  position:relative;
}

/* Papa Noel al lado derecho del logo */
.brand-text{
  position: relative;
  display: inline-block;
  padding-right: 2rem; /* espacio para el emoji */
}

.brand-text::after{
  content: "🎅";
  position: absolute;
  right: -0.2rem;     /* pega al borde derecho del texto */
  top: -0.8rem;       /* levanta el emoji */
  font-size: 1.8rem;
  transform: rotate(12deg); /* inclinado hacia la derecha */
  pointer-events: none;
}

@media (max-width: 640px){
  .brand-text{
    padding-right: 1.6rem;
  }

  .brand-text::after{
    right: -0.3rem;
    top: -0.6rem;
    font-size: 1.5rem;
  }
}



/*::before{content:""; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%; background:var(--aqua)}
.price{margin-top:14px; font-weight:700; color:var(--aqua)}*/

.events{background:color-mix(in oklab, var(--border) 20%, transparent); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}

.divider{height:1px; background:var(--border); margin:24px 0}
.benefit blockquote{margin:.5rem 0 0; padding-left:14px; border-left:3px solid var(--aqua); color:color-mix(in oklab, var(--text) 80%, var(--gray))}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border); padding:20px 0}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:18px; align-items:center}
.footer-nav{display:flex; flex-wrap:wrap; gap:12px}
.footer-nav a{text-decoration:none; color:inherit}
.footer-copy{font-size:14px; color:color-mix(in oklab, var(--text) 70%, var(--gray))}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr; text-align:center}}

/* ---------- Forms ---------- */
.form{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:640px){.form-row{grid-template-columns:1fr}}
.form-group{display:flex; flex-direction:column; gap:6px}
label{font-weight:600}
input,select,textarea{
  padding:12px; border-radius:12px; border:1px solid var(--border); background:var(--bg); color:var(--text);
  outline:none; transition:border var(--transition), box-shadow var(--transition);
}
input:focus,select:focus,textarea:focus{border-color:var(--aqua); box-shadow:0 0 0 4px color-mix(in oklab, var(--aqua) 25%, transparent)}
.form-actions{margin-top:12px}
.form-note{font-size:13px; color:color-mix(in oklab, var(--text) 65%, var(--gray)); margin-top:8px}
.quick-links{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.quick-link{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; border:1px solid var(--border); text-decoration:none; color:inherit}
.quick-link:hover{border-color:var(--aqua); box-shadow:0 0 14px rgba(0,191,166,.25)}
.ql-icon{font-size:18px}

/* ---------- WhatsApp Float ---------- */
.wa-float{
  position:fixed; right:18px; bottom:18px; width:52px; height:52px; border-radius:16px;
  background:linear-gradient(180deg, var(--aqua), color-mix(in oklab, var(--aqua) 70%, #007f6f));
  box-shadow:0 12px 30px rgba(0,191,166,.35);
  display:inline-flex; align-items:center; justify-content:center; color:#002a24; z-index:60;
}
.wa-float svg{width:26px; height:26px}
.wa-float:hover{transform:translateY(-2px)}

.social-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  color: var(--aqua);
  transition: all 0.3s ease;
  background: var(--card);
  box-shadow: var(--shadow);
}

.social-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.6;
}

.social-icon:hover {
  background: var(--aqua);
  color: #002a24;
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(0,191,166,0.35);
}

/* Estilos específicos */
.social-icon.instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  color: #fff;
  box-shadow: 0 0 20px rgba(253,89,73,0.5);
}

.social-icon.whatsapp:hover {
  background: #25D366;
  color: #fff;
  box-shadow: 0 0 20px rgba(37,211,102,0.4);
}

/* ===== Internas con el mismo look del Home ===== */

/* 1) Hero de páginas (estilo y altura consistentes con Inicio) */
.page-hero{
  position: relative;
  min-height: 48vh;                  /* igual “presencia” visual */
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.page-hero::after{
  content:"";
  position:absolute; inset:0;
  /* solo dejamos el brillo radial tech; quitamos el linear-gradient que hacía el fade */
  background:
    radial-gradient(1200px 600px at 90% 110%,
      color-mix(in oklab, var(--aqua) 10%, transparent),
      transparent 60%);
  pointer-events:none;
}
.page-hero #techCanvas{ position:absolute; inset:0; width:100%; height:100% }
.page-hero .hero-content{ position:relative; padding:60px 0 } /* mismo padding que .hero */
.page-hero h1{ font-size:clamp(30px,5vw,56px); font-weight:700 } /* mismo tamaño que Home */
.page-hero .subtitle{ font-size:clamp(16px,2.2vw,18px); margin-bottom:18px }

/* 2) Anchos: que las internas usen el mismo ancho que Inicio */
.page .container {
  width: min(1240px, 95%);
}

.page .narrow,
.page .form {
  max-width: 920px;
}

/* 3) Ritmo vertical alineado al Home */
.page .section:first-of-type{ padding-top: 48px }   /* después del mini-hero */
.page .section h2{ margin-bottom: .6rem }
.page .divider{ height:1px; background:var(--border); margin:24px 0 }

/* 4) Tarjetas y planes con la misma “flotación” y hover */
.page .card, .page .plan{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.page .card:hover, .page .plan:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
  border-color: color-mix(in oklab, var(--aqua) 30%, var(--border));
}

/* 5) Formularios al mismo ancho visual que las cards del Home */
.page .form{ max-width: 820px; margin-inline:auto }


/* Asegura que el botón quede por encima del canvas o del fondo animado */
.nav-toggle {
  position: relative;
  z-index: 1001;
}

/* Oculta el menú en modo móvil por defecto */
.nav-menu {
  display: none;
  flex-direction: column;
  gap: 16px;
  background: rgba(10, 25, 47, 0.97);
  backdrop-filter: blur(6px);
  position: absolute;
  top: 100%;
  right: 0;
  width: 200px;
  padding: 1rem;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 1000;
}

/* Cuando el menú está activo (por JS) */
.nav-menu.active {
  display: flex;
  animation: slideDown 0.25s ease;
}

/* Animación del desplegado */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Evita que el canvas animado tape el menú en móviles */
header, nav {
  position: relative;
  z-index: 1000;
}
/* ===== Nav responsive: móvil (corregido) ===== */
@media (max-width: 991px) {
  .site-header { z-index: 2000; }        /* encima del canvas */
  .site-header .nav { position: relative; }

  /* Dropdown móvil: fondo sólido y ancho completo */
  .menu {
    display: none;                       /* lo abre JS con .is-open */
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;                             /* ← ocupa todo el header */
    width: 100vw;                        /* ← color cubre todo */
    margin: 0 calc(-50vw + 50%);         /* estira a los bordes de la pantalla */
    padding: 12px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: #0A192F;                 /* ← fondo sólido sin transparencia */
    box-shadow: 0 12px 28px rgba(0,0,0,.45);
    z-index: 2100;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .menu.is-open { display: flex; animation: slideDown .22s ease; }

  .menu a {
    display: block;
    width: 92%;
    padding: 12px 14px;
    border-radius: 10px;
    text-align: center;
    color: var(--text);
    text-decoration: none;
    background: transparent;
    outline: none;                       /* evita outline heredado */
  }

  .menu a:hover {
    background: color-mix(in oklab, var(--aqua) 18%, transparent);
    color: var(--aqua);
  }

  .menu a[aria-current="page"] {
    outline: none !important;
    background: color-mix(in oklab, var(--aqua) 12%, #0A192F);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--aqua) 25%, #0A192F);
  }

  /* Botón hamburguesa visible y por encima */
  .actions { display: block; }
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border-radius: 12px; border: 1px solid var(--border);
    background: color-mix(in oklab, var(--card) 90%, transparent);
    box-shadow: var(--shadow); cursor: pointer; z-index: 2200;
    transition: box-shadow .2s ease, background .2s ease, transform .2s ease;
  }
  .menu-toggle:hover { box-shadow: 0 0 18px rgba(0,191,166,.35); }
  .menu-toggle:active { transform: translateY(1px); }

  /* Evita scroll del body con menú abierto */
  body.nav-open { overflow: hidden; }
}

/* Desktop: menú visible y hamburguesa oculta */
@media (min-width: 992px) {
  .menu {
    display: flex; position: static; width: auto; margin: 0; padding: 0;
    background: transparent; box-shadow: none; border: 0; border-radius: 0;
  }
  .actions, .menu-toggle { display: none; }
}

/* Animación del dropdown (sin paréntesis extra) */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Iconitos navideños en títulos */
.xmas-icon {
  font-size: 0.9em;
  margin-left: 0.35rem;
  vertical-align: middle;
}

/* Banner de promo navideña */
.xmas-promo {
  position: relative;
  z-index: 900;
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.95), rgba(234, 179, 8, 0.95));
  color: #fff;
  text-align: center;
  font-size: 0.92rem;
  padding: 0.55rem 0.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  letter-spacing: 0.03em;
}

.xmas-promo strong {
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .xmas-promo {
    font-size: 0.82rem;
    padding-inline: 0.6rem;
  }
}


/* =====================
   MODO NAVIDAD – NIEVE
   ===================== */

.snow-container{
  pointer-events:none;
  position:fixed;
  inset:0;
  overflow:hidden;
  z-index:10; /* debajo del header (50) y del botón de WhatsApp (60) */
}

.snowflake{
  position:absolute;
  top:-10px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,0.95);
  box-shadow:0 0 8px rgba(255,255,255,0.7);
  opacity:0.9;
  animation-name:snowFall;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

.snowflake.large{
  width:8px;
  height:8px;
  opacity:0.8;
}

@keyframes snowFall{
  0%{
    transform:translate3d(0, -10vh, 0);
  }
  100%{
    transform:translate3d(15px, 110vh, 0);
  }
}

@media (max-width: 575.98px){
  .snowflake{
    width:4px;
    height:4px;
  }
  .snowflake.large{
    width:6px;
    height:6px;
  }
}

/* Botón "Ver sitio" dentro de las tarjetas del portfolio */
.btn-portfolio{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:0.9rem;
  padding:0.45rem 0.9rem;
  border-radius:999px;
  font-size:0.85rem;
  font-weight:600;
  text-decoration:none;
  color:var(--accent);
  border:1px solid color-mix(in oklab, var(--accent) 70%, var(--border));
  background:rgba(15,23,42,0.75);
  box-shadow:0 8px 18px rgba(0,0,0,0.6);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease;
}

.btn-portfolio::after{
  content:"↗";
  font-size:0.8em;
}

.btn-portfolio:hover{
  transform:translateY(-1px);
  color:#fff;
  background:linear-gradient(135deg, var(--accent), #22c55e);
  box-shadow:0 13px 30px rgba(0,0,0,0.85);
}
/* Tema festivo suave para la sección de eventos (no navideño explícito) */
.section.events{
  position:relative;
  overflow:hidden;
}

/* Esferas/destellos de color en el fondo */
.section.events::before,
.section.events::after{
  content:"";
  position:absolute;
  border-radius:999px;
  filter:blur(18px);
  opacity:0.28;
  pointer-events:none;
}

.section.events::before{
  width:180px;
  height:180px;
  top:-40px;
  left:-30px;
  background:radial-gradient(circle at 30% 30%, #fff, #22c55e, #14532d);
}

.section.events::after{
  width:220px;
  height:220px;
  bottom:-60px;
  right:-40px;
  background:radial-gradient(circle at 30% 30%, #fff, #38bdf8, #0f172a);
}

/* Dos esferas animadas flotando (tema festivo genérico) */
.events-orb{
  position:absolute;
  width:26px;
  height:26px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, #eab308, #854d0e);
  opacity:0.9;
  filter:blur(1px);
  pointer-events:none;
  animation:eventsOrbFloat 12s ease-in-out infinite;
  box-shadow:0 0 12px rgba(250, 250, 210, .8);
}

.events-orb:nth-child(1){
  top:16%;
  left:12%;
}

.events-orb:nth-child(2){
  bottom:18%;
  right:18%;
  animation-duration:14s;
  animation-direction:reverse;
}

@keyframes eventsOrbFloat{
  0%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(10px,-10px,0); }
  100%{ transform:translate3d(0,0,0); }
}

@media (max-width: 640px){
  .events-orb{
    width:18px;
    height:18px;
  }
}