/* ========================================================= 
   INTERTORNILLOS KIOSCO - STYLES (PRO + LLAMATIVO)
   TEMA: CLARO PROFESIONAL VERDE + BLANCO + ACENTOS
   ========================================================= */
/* ANARANJADO
:root{

  --brand:#ea580c;
  --brand2:#fb923c;
  --accent:#2563eb;
  --accent2:#ef4444;

  --bg0:#fff5ef;
  --bg1:#ffe9dc;
  --bg2:#ffffff;
  --bg3:#ffd9c2;

  --panel: rgba(255,255,255,.85);
  --glass: rgba(255,255,255,.65);
  --glass2: rgba(255,255,255,.82);
  --border: rgba(234,88,12,.15);

  --text:#2b1b14;
  --muted: rgba(43,27,20,.75);
  --muted2: rgba(43,27,20,.55);

  --shadow:0 20px 50px rgba(234,88,12,.15);
  --shadow2:0 35px 90px rgba(234,88,12,.20);

  --radius:50px;
  --radius2:50px;
}

FIN DE ANARANJADO */
/* VERDE*/
:root{

  --brand:#16a34a;
  --brand2:#22c55e;
  --accent:#2563eb;
  --accent2:#ef4444;

  --bg0:#eefbf4;
  --bg1:#e0f7ea;
  --bg2:#ffffff;
  --bg3:#c8f1d8;

  --panel: rgba(255,255,255,.86);
  --glass: rgba(255,255,255,.65);
  --glass2: rgba(255,255,255,.82);
  --border: rgba(22,163,74,.14);

  --text:#1d2c23;
  --muted: rgba(29,44,35,.75);
  --muted2: rgba(29,44,35,.55);

  --shadow:0 20px 50px rgba(22,163,74,.15);
  --shadow2:0 35px 90px rgba(22,163,74,.20);

  --radius:18px;
  --radius2:26px;
}

/*FIN DE VERDE*/

/* ************************ Fondo general */
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);

  background:
    radial-gradient(900px 500px at 0% 0%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(700px 420px at 100% 20%, rgba(14,165,233,.16), transparent 60%),
    radial-gradient(600px 400px at 50% 100%, rgba(245,158,11,.12), transparent 60%),
    linear-gradient(140deg, var(--bg0), var(--bg1));

  background-attachment: fixed;
}

.is-hidden{ display:none !important; }
.app{ min-height:100%; padding: 18px; max-width: 1200px; margin: 0 auto; }

/* ===== Buttons ===== */
.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 900;
  transition: transform .12s ease, box-shadow .14s ease, background .14s ease, opacity .14s ease;
  user-select:none;
  display:inline-flex;
  align-items:center;
  gap: 10px;
}
.btn:active{ transform: translateY(1px); }
.btn--xl{ padding: 14px 18px; border-radius: 16px; font-size: 16px; }

.btn--primary{
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 14px 32px rgba(22,163,74,.22);
}
.btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(22,163,74,.28);
}

.btn--ghost{
  background: rgba(255,255,255,.72);
  color: var(--text);
  border: 1px solid rgba(22,163,74,.16);
}
.btn--ghost:hover{
  background: rgba(255,255,255,.95);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
}

/* ===== Topbar ===== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(22,163,74,.12);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
}
.brand__logo{
  height: 44px;
  width: auto;
  border-radius: 12px;
  background: #fff;
  padding: 8px 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.brand__text{ display:flex; flex-direction:column; line-height: 1.1; }
.brand__name{ font-weight: 950; color: var(--text); }
.brand__sub{ color: var(--muted2); font-size: 12px; margin-top: 4px; }

.topbar__actions{ display:flex; gap: 10px; flex-wrap: wrap; }

/* ===== Hero ===== */
.hero{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  align-items: start;
  gap: 28px;
  margin-top: 18px;
}

.hero__left{ min-width: 0; }

.hero__right{
  width: 100%;
  max-width: 420px;
  justify-self: end;
}

@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .hero__right{
    max-width: 100%;
    justify-self: stretch;
  }
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.20);
  color: #166534;
  font-weight: 900;
  letter-spacing:.2px;
}

.hero h1{
  margin: 12px 0 8px;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.05;
  color: #102117;
}

.hero p{
  margin:0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
  max-width: 65ch;
}

.hero__cta{
  display:flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.mini{
  display:flex;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.mini__item{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(22,163,74,.12);
  color: var(--text);
}

.dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
}

.dot--ok{
  background:#22c55e;
  box-shadow: 0 0 0 6px rgba(34,197,94,.14);
}

/* Hero right card */
.hero-card{
  width: 100%;
  border-radius: var(--radius2);
  background:
    radial-gradient(600px 260px at 30% 10%, rgba(34,197,94,.10), transparent 55%),
    radial-gradient(500px 260px at 85% 70%, rgba(249,115,22,.08), transparent 55%),
    rgba(255,255,255,.75);
  border: 1px solid rgba(22,163,74,.12);
  box-shadow: var(--shadow);
  padding: 16px;
}

.hero-card__top{
  padding: 8px 6px 12px;
}

.hero-card__title{
  font-weight: 950;
  font-size: 16px;
  color: var(--text);
}

.hero-card__sub{
  margin-top: 6px;
  color: var(--muted2);
  font-size: 13px;
}

.hero-card__mascot{
  margin-top: 6px;
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(22,163,74,.10);
}
.note__title{ font-weight: 950; color: var(--text); }
.note__sub{ margin-top: 4px; color: var(--muted2); font-size: 12px; }

.glass{
  margin-top: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(22,163,74,.10);
}
.glass__body{ color: var(--text); line-height: 1.35; }

/* ===== Mascot ===== */
.mascot{
  width: 92px;
  height: 92px;
  border-radius: 20px;
  background: rgba(34,197,94,.08);
  padding: 14px;
  object-fit: contain;
}

/* ===== Panels ===== */
.main{ margin-top: 18px; }

.panel{
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,252,249,.92));
  border: 1px solid rgb(233, 132, 0);
  box-shadow: var(--shadow);
  padding: 16px;
}

.panel__header h2{ 
  margin:0; 
  font-size:18px; 
  color: var(--text);
}
.panel__header p{ 
  margin:6px 0 0; 
  color: var(--muted2); 
}
.panel__header--spaced{ margin-top: 18px; }

/* ===== Toggle Kits ===== */
.kits-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  user-select: none;
}

.kits-toggle__text{
  flex: 1;
}

.kits-toggle__arrow{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(22,163,74,.14);
  background: rgba(255,255,255,.80);
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .22s ease, background .18s ease, box-shadow .18s ease;
}

.kits-toggle__arrow:hover{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  box-shadow: 0 10px 24px rgba(163, 71, 22, 0.24);
}

.kits-toggle.is-open .kits-toggle__arrow{
  transform: rotate(180deg);
}

/* contenedor colapsable */
.kits-wrap{
  overflow: hidden;
  max-height: 1200px;
  opacity: 1;
  transition: max-height .35s ease, opacity .22s ease, margin-top .22s ease;
}

.kits-wrap.is-collapsed{
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

.kits-wrap .categories{
  margin-top: 14px;
}

/* ===== Categories ===== */
.categories{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1100px){ .categories{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px){ .categories{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card{
  text-align:left;
  border-radius: 18px;
  padding: 16px;
  background:
    radial-gradient(320px 160px at 20% 0%, rgba(34,197,94,.04), transparent 60%),
    rgba(255,255,255,.72);
  border: 1px solid rgba(22,163,74,.12);
  color: var(--text);
  cursor:pointer;
  transition: transform .12s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
  position: relative;
  overflow:hidden;
}
.card:hover{
  transform: translateY(-2px);
  background:
    radial-gradient(320px 160px at 20% 0%, rgba(34,197,94,.08), transparent 60%),
    rgba(255,255,255,.92);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}
.card--active{
  border-color: rgb(205, 125, 14);
  box-shadow: 0 16px 40px rgba(34,197,94,.14);
  background:
    radial-gradient(520px 220px at 30% 0%, rgba(34,197,94,.15), transparent 60%),
    radial-gradient(420px 220px at 90% 90%, rgba(249,115,22,.08), transparent 60%),
    rgba(255,255,255,.95);
}
.card__icon{ font-size: 22px; }
.card__title{ margin-top: 10px; font-weight: 950; color: var(--text); }
.card__sub{ margin-top: 4px; color: var(--muted2); font-size: 13px; }

/* ===== Grid for detail/map ===== */
.grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 1000px){ .grid{ grid-template-columns: 1fr; } }
.panel--sticky{ position: sticky; top: 86px; align-self: start; }

/* ===== Detail ===== */
.detail{
  margin-top: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgb(0, 0, 0);
  padding: 16px;
  min-height: 260px;
}
.detail__empty{ text-align:center; padding: 18px 14px; }
.detail__emoji{ font-size: 34px; }
.detail__title{ font-weight: 950; margin-top: 8px; color: var(--text); }
.detail__text{ margin-top: 6px; color: var(--muted); }

.detail__kicker{ color: var(--muted2); font-weight: 900; font-size: 12px; }
.detail__head .detail__title{ font-size: 22px; margin-top: 4px; }
.detail__meta{ margin-top: 10px; display:flex; gap: 10px; flex-wrap: wrap; }

.tag{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(22,163,74,.08);
  border: 1px solid rgba(22,163,74,.12);
  color: #166534;
  font-weight: 900;
  font-size: 12px;
}

.detail__section{ margin-top: 14px; }
.detail__label{ font-weight: 950; margin-bottom: 8px; color: var(--text); }

.chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(22,163,74,.10);
  font-weight: 900;
  font-size: 12px;
  color: var(--text);
}

.list{ margin: 8px 0 0; padding-left: 18px; color: var(--text); }
.list li{ margin: 6px 0; }

/* ===== Acciones ===== */
.actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.actions .btn{
  justify-content: center;
  border-radius: 18px;
}
@media (max-width: 560px){
  .actions{ grid-template-columns: 1fr; }
}

.hint{
  margin-top: 10px;
  color: var(--muted2);
  font-size: 12px;
  line-height: 1.35;
}

/* ===== Detail image ===== */
.detail__img{
  margin: 14px 0 8px;
  display:flex;
  justify-content:center;
}
.detail__img img{
  width: 260px;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: contain;
  background: #ffffff;
  border: 1px solid rgba(22,163,74,.10);
  padding: 10px;
}

/* ===== Map ===== */
.map{ margin-top: 12px; }
.map__legend{ display:flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

.pill{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: 900;
  font-size: 12px;
  color: var(--text);
}

.swatch{ width:10px; height:10px; border-radius:999px; display:inline-block; }
.swatch--active{ background: var(--brand); box-shadow: 0 0 0 6px rgba(34,197,94,.16); }
.swatch--normal{ background: rgba(0,0,0,.28); }

.map__grid{ display:grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }

.cell{
  border: 1px solid rgba(0, 0, 0, 0.38);
  background:
    radial-gradient(220px 120px at 20% 0%, rgba(34,197,94,.04), transparent 60%),
    rgba(255,255,255,.82);
  border-radius: 16px;
  padding: 14px 12px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: transform .12s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
  min-height: 72px;
}
.cell:hover{
  transform: translateY(-2px);
  background:
    radial-gradient(220px 120px at 20% 0%, rgba(34,197,94,.08), transparent 60%),
    rgba(255,255,255,.95);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}

.cell__num{ font-weight: 950; color: var(--text); }
.cell__sub{ margin-top: 4px; font-size: 12px; color: var(--muted2); }

/* ===== Modal ===== */
.modal{ display:none; }
.modal--open{ display:block; }

.modal__backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(6px);
  z-index: 200;
}

.modal__card{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 24px));
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0, 0, 0, 0.74);
  border-radius: 18px;
  z-index: 210;
  box-shadow: 0 24px 60px rgba(0,0,0,.16);
  overflow: hidden;
}

.modal__top{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 16px;
  border-bottom: 1px solid rgba(22,163,74,.10);
}

.modal__title{ font-weight: 950; font-size: 18px; color: var(--text); }
.modal__sub{ margin-top: 4px; color: var(--muted2); font-size: 13px; }

.iconbtn{
  background: rgba(255,255,255,.82);
  color: var(--text);
  border: 1px solid rgba(34, 34, 34, 0.79);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
}

.modal__content{ padding: 16px; display:grid; gap: 12px; }

.option{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(248,252,249,.95);
  border: 1px solid rgba(5, 5, 5, 0.97);
}

.option__left{ display:flex; gap: 12px; align-items:center; }
.option__icon{ font-size: 22px; }
.option__title{ font-weight: 950; color: var(--text); }
.option__sub{ color: var(--muted2); font-size: 13px; margin-top: 3px; }

.divider{ height: 1px; background: rgba(22,163,74,.10); margin: 2px 0; }
.small{ color: var(--muted2); font-size: 12px; line-height: 1.35; }

/* =========================================================
   SPLASH "PORTADA"
   ========================================================= */
.splash{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 26px;
  overflow: auto;
  background: rgba(255,255,255,.30);
  backdrop-filter: blur(5px);
}

.splash2{
  width: min(520px, 96vw);
}

.splash2__frame{
  position: relative;
  border-radius: 28px;
  padding: 22px 18px 18px;
  text-align: center;

  background:
    radial-gradient(900px 360px at 50% 0%, rgba(34,197,94,.14), transparent 55%),
    radial-gradient(420px 260px at 50% 40%, rgba(249,115,22,.12), transparent 60%),
    rgba(255,255,255,.82);

  border: 1px solid rgba(22,163,74,.12);
  box-shadow:
    0 24px 80px rgba(0,0,0,.12),
    0 0 0 1px rgba(34,197,94,.05) inset;
  overflow: hidden;
}

/* Borde glow */
.splash2__frame::before{
  content:"";
  position:absolute;
  inset: -2px;
  border-radius: 30px;
  background:
    radial-gradient(400px 120px at 50% 0%, rgba(34,197,94,.26), transparent 65%),
    radial-gradient(420px 160px at 50% 100%, rgba(249,115,22,.16), transparent 70%),
    linear-gradient(90deg, rgba(34,197,94,.0), rgba(34,197,94,.16), rgba(34,197,94,.0));
  filter: blur(10px);
  opacity: .9;
  pointer-events:none;
}

/* Brillo diagonal */
.splash2__frame::after{
  content:"";
  position:absolute;
  inset:-45%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.18), transparent 62%);
  transform: rotate(10deg);
  pointer-events:none;
}

.splash2__brand{
  position: relative;
  z-index: 2;
  display:flex;
  justify-content:flex-start;
  margin-bottom: 12px;
}

.splash2__logo{
  width: min(120px, 45%);
  height: auto;
  border-radius: 14px;
  background: #ffffff;
  padding: 6px 10px;
  box-shadow: 0 12px 28px rgba(22,163,74,.12);
}

.splash2__mascotWrap{
  position: relative;
  z-index: 2;
  display:grid;
  place-items:center;
  margin: 8px 0 8px;
}

.splash2__mascotWrap::before{
  content:"";
  position:absolute;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 25%, rgba(34, 197, 94, 0.86), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(249,115,22,.16), transparent 62%);
  filter: blur(14px);
  opacity: .9;
}

.splash2__mascot{
  position: relative;
  width: 280px;
  height: 320px;
  object-fit: contain;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 26px;
  padding: 14px;
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
}

.splash2__title{
  position: relative;
  z-index: 2;
  margin-top: 10px;
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -.2px;
  color: var(--text);
}
.splash2__title span{
  color: #ffaa00db;
  text-shadow: 0 10px 24px rgba(34,197,94,.16);
}

.splash2__question{
  position: relative;
  z-index: 2;
  margin-top: 6px;
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}
.splash2__sub{
  position: relative;
  z-index: 2;
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted2);
}

.splash2__actions{
  position: relative;
  z-index: 2;
  display:grid;
  gap: 12px;
  margin-top: 18px;
}

.splash2__btn{
  border: 0;
  cursor: pointer;
  width: 100%;
  padding: 14px 16px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 16px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  transition: transform .12s ease, box-shadow .14s ease, background .14s ease;
  user-select: none;
}
.splash2__btn:active{ transform: translateY(1px); }

.splash2__btn--primary{
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow:
    0 14px 32px rgba(22,163,74,.22),
    0 0 0 1px rgba(255,255,255,.10) inset;
}
.splash2__btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(22,163,74,.28);
}

.splash2__btn--ghost{
  color: var(--text);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(22,163,74,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.splash2__btn--ghost:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.92);
}

.splash2__footer{
  position: relative;
  z-index: 2;
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted2);
}

/* Animación botón iniciar */
@keyframes splashPulse{
  0%{ box-shadow: 0 14px 32px rgba(22,163,74,.18); }
  50%{ box-shadow: 0 18px 54px rgba(22,163,74,.28); }
  100%{ box-shadow: 0 14px 32px rgba(22,163,74,.18); }
}
#btnEnter{ animation: splashPulse 1.6s ease-in-out infinite; }

/* =========================================================
   COLORES SÓLIDOS POR COLUMNA (cuando está activo)
   ========================================================= */
.cell--active{
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
}

.cell--active.cell--c1{ background:#6366f1 !important; border-color:#6366f1 !important; }
.cell--active.cell--c2{ background:#06b6d4 !important; border-color:#06b6d4 !important; }
.cell--active.cell--c3{ background:#f97316 !important; border-color:#f97316 !important; }
.cell--active.cell--c4{ background:#eab308 !important; border-color:#eab308 !important; }
.cell--active.cell--c5{ background:#22c55e !important; border-color:#22c55e !important; }
.cell--active.cell--c6{ background:#3b82f6 !important; border-color:#3b82f6 !important; }
.cell--active.cell--c7{ background:#0ea5e9 !important; border-color:#0ea5e9 !important; }

.cell--active .cell__sub{ color: rgba(255,255,255,.88) !important; }

/* =========================================================
   ANIMACIONES SUPERFICIES
   ========================================================= */

/* transición base */
.card{
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;
}

/* animación automática cuando no hay nada seleccionado */
.card.is-guide{
  animation: surfaceGuide 1.1s ease;
  border-color: rgba(249,115,22,.70);
  box-shadow: 0 14px 32px rgba(249,115,22,.18);
}

@keyframes surfaceGuide{
  0%{
    transform: translateY(0) scale(1);
  }
  25%{
    transform: translateY(-8px) scale(1.02);
  }
  50%{
    transform: translateY(0) scale(1);
  }
  75%{
    transform: translateY(-4px) scale(1.01);
  }
  100%{
    transform: translateY(0) scale(1);
  }
}