/* Variables de marca */
    :root {
      --sky-blue:       #59d2ec;
      --viridian-green: #029e99;
      --chinese-black:  #161616;
      --yankees-blue:   #0af89b;
      --snow:           #fbfaf7;
      --bg-light:       var(--snow);
      --text-light:     var(--chinese-black);
      --bg-dark:        var(--chinese-black);
      --text-dark:      var(--snow);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: Arial, sans-serif;
      background-color: var(--bg-light);
      color: var(--text-light);
      transition: background-color .3s, color .3s;
    }
    .dark-mode { background-color: var(--bg-dark); color: var(--text-dark); }
    header {
      background: var(--chinese-black);
      color: var(--snow);
      padding: 1rem;
      text-align: center;
      position: relative;
    }
    header img { height: 50px; vertical-align: middle; }
    header h1 {
      display: inline-block;
      margin-left: 0.5rem;
      font-size: 1.75rem;
      font-weight: bold;
    }
    /* Buttons */
    #theme-toggle, #translate-toggle {
      position: absolute;
      top: 1rem;
      background: var(--sky-blue);
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      color: #fff;
      cursor: pointer;
    }
    #theme-toggle { right: 1rem; }
    #translate-toggle { right: 8rem; }
    /* Translate widget (hidden by default) */
    #google_translate_element { 
      display: none;
      position: absolute;
      top: 3.5rem;
      right: 1rem;
      z-index: 1000;
    }
    /* Estilos introduccion */
    .intro {
      max-width: 1100px;
      margin: 1.5rem auto;
      padding: 1rem 1.5rem;
      border-left: 4px solid var(--viridian-green);
      background: rgba(2,158,153,0.1);
      text-indent: 1.5rem;
      line-height: 1.6;
      border-radius: 4px;
    }
    /* Grid */
    .expressions-grid { padding: 2rem 1rem; }
    .card-container { perspective: 1000px; margin-bottom: 2rem; }
    .card {
      position: relative; transform-style: preserve-3d;
      transition: transform .6s;
      min-height: 680px;
      background: var(--bg-light);
    }
    .dark-mode .card { background: var(--bg-dark); }
    .card.flipped { transform: rotateY(180deg); }
    .card-face {
      position: absolute; width: 100%; height: 100%;
      backface-visibility: hidden;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      padding: 1rem;
      background: var(--bg-light);
      color: var(--text-light);
      transition: background-color .3s, color .3s;
    }
    .dark-mode .card-face { background: var(--bg-dark); color: var(--text-dark); }
    .card-face.back { transform: rotateY(180deg); }
    .card-face img { width: 300px; height: 300px; object-fit: cover; border-radius: 4px; margin-bottom: 0.75rem; }
    .card-face h3 { margin-bottom: 0.5rem; color: var(--chinese-black); }
    .card-face p { text-align: center; margin-bottom: 0.75rem; }
    .card-face button {
      margin: 0.25rem;
      background: var(--viridian-green);
      color: var(--snow);
      border: none;
      padding: 0.4rem 0.8rem;
      border-radius: 4px;
      font-size: 0.9rem;
      cursor: pointer;
    }
    .card-face button:hover { background: var(--sky-blue); }
    .card-face .flip-back { background: var(--chinese-black); }
    header .logo {
    height: 100px;
    max-width: 100%;
    }

    /* ---------------- ESTILOS DEL BOTON "¿TE ATREVES?" -------------------- */

          
.button {
  cursor: pointer;
  font-size: 1.4rem;
  border-radius: 16px;
  border: none;
  padding: 2px;
  background: radial-gradient(circle 80px at 80% -10%, #ffffff, #181b1b);
  position: relative;
  transition:
    background 0.3s,
    transform 0.3s;
}

.button:hover {
  /*background: radial-gradient(circle 80px at 80% -10%, #181b1b, #000);*/
  transform: scale(0.98);
}

.button::after {
  content: "";
  position: absolute;
  width: 65%;
  height: 60%;
  border-radius: 120px;
  top: 0;
  right: 0;
  box-shadow: 0 0 20px #ffffff38;
  z-index: -1;
  transition: box-shadow 0.3s;
}

.button:hover::after {
  box-shadow: 0 0 10px #ffffff18;
}

.blob1 {
  position: absolute;
  width: 70px;
  height: 100%;
  border-radius: 16px;
  bottom: 0;
  left: 0;
  background: radial-gradient(
    circle 60px at 0% 100%,
    #3fe9ff,
    #0000ff80,
    transparent
  );
  box-shadow: -10px 10px 30px #0051ff2d;
  transition:
    background 0.3s,
    box-shadow 0.3s;
}

.button:hover .blob1 {
  /*  background: radial-gradient(circle 60px at 0% 100%, #181b1b, #000);*/
  box-shadow: -5px 5px 20px #000;
}

.inner {
  padding: 14px 25px;
  border-radius: 14px;
  color: #fff;
  z-index: 3;
  position: relative;
  background: radial-gradient(circle 80px at 80% -50%, #777777, #0f1111);
  transition: background 0.3s;
}

.button:hover .inner {
  background: radial-gradient(circle 80px at 80% -50%, #333333, #0f0f0f);
}

.inner::before {
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 14px;
  background: radial-gradient(
    circle 60px at 0% 100%,
    #00e1ff1a,
    #0000ff11,
    transparent
  );
  position: absolute;
  transition: opacity 0.3s;
}

.button:hover .inner::before {
  opacity: 0;
}

/* ------------------------- ESTILOS BOTON VIDEO ----------------------------- */


.btnVideo-button {
  font-size: 1.4em;
  padding: 0.6em 0.8em;
  border-radius: 0.5em;
  border: none;
  background-color: #000;
  color: #fff;
  cursor: pointer;
  box-shadow: 2px 2px 3px #000000b4;
}

.btnVideo-container {
  position: relative;
  padding: 3px;
  background: linear-gradient(90deg, #03a9f4, #f441a5);
  border-radius: 0.9em;
  transition: all 0.4s ease;
  display: inline-block; 
}

.btnVideo-container::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 0.9em;
  z-index: -10;
  filter: blur(0);
  transition: filter 0.4s ease;
}

.btnVideo-container:hover::before {
  background: linear-gradient(90deg, #03a9f4, #f441a5);
  filter: blur(1.2em);
}

.btnVideo-container:active::before {
  filter: blur(0.2em);
}