:root {
 
  --verde-oscuro:    #0a130a;
  --verde-medio:     #142314;
  --verde-tarjeta:   #1a2e1a;
  --verde-acento:    #3ddc84;
  --verde-suave:     #2a5c3a;
  --verde-texto:     #c8ecd4;
  --verde-subtexto:  #6aaa80;


  --azul-fondo:      #f0f4f9;
  --azul-tarjeta:    #ffffff;
  --azul-acento:     #007aff;
  --azul-suave:      #e8f0fb;
  --azul-texto:      #1c1c1e;
  --azul-subtexto:   #6e6e73;

  --inicio-fondo:    #0c0e15;
  --inicio-texto:    #f0f0f6;
  --inicio-sub:      #7a7a9a;

  --borde-radio:     14px;
  --fuente-titulo:   'Syne', sans-serif;
  --fuente-texto:    'DM Sans', sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fuente-texto);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}


/* index */

.pagina-inicio {
  background-color: var(--inicio-fondo);
  color: var(--inicio-texto);
  overflow: hidden;
}

.fondo-inicio {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.orbe {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.15;
}

.orbe-verde {
  width: 500px;
  height: 500px;
  background: #3ddc84;
  top: -180px;
  left: -150px;
  animation: flotar 14s ease-in-out infinite;
}

.orbe-azul {
  width: 450px;
  height: 450px;
  background: #007aff;
  bottom: -180px;
  right: -150px;
  animation: flotar 18s ease-in-out infinite reverse;
}

@keyframes flotar {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(30px, 25px); }
}

.cuadricula {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 50px 50px;
}


.inicio-contenido {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem 4rem;
  gap: 3rem;
  text-align: center;
}


.inicio-titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(3rem, 11vw, 6.5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--inicio-texto);
}

.inicio-botones {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
  max-width: 420px;
}

.btn-plataforma {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.6rem 1.75rem;
  border-radius: var(--borde-radio);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: left;
}

.btn-plataforma:hover {
  transform: translateY(-4px);
}

.btn-plataforma:active {
  transform: translateY(0) scale(0.98);
}

/* Botón Android */
.btn-android {
  background: linear-gradient(145deg, #0d1e0d, #152a15);
  border-color: rgba(61, 220, 132, 0.25);
  box-shadow: 0 4px 28px rgba(61, 220, 132, 0.08);
}

.btn-android:hover {
  border-color: rgba(61, 220, 132, 0.5);
  box-shadow: 0 10px 40px rgba(61, 220, 132, 0.18);
}

/* Botón iOS */
.btn-ios {
  background: linear-gradient(145deg, #0d1420, #101a30);
  border-color: rgba(0, 122, 255, 0.25);
  box-shadow: 0 4px 28px rgba(0, 122, 255, 0.08);
}

.btn-ios:hover {
  border-color: rgba(0, 122, 255, 0.5);
  box-shadow: 0 10px 40px rgba(0, 122, 255, 0.18);
}

.btn-emoji {
  font-size: 2.2rem;
  flex-shrink: 0;
}

.btn-nombre {
  font-family: var(--fuente-titulo);
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: block;
}

.btn-android .btn-nombre { color: #3ddc84; }
.btn-ios .btn-nombre     { color: #5ac8fa; }


.btn-plataforma:hover .btn-flecha {
  opacity: 1;
  transform: translateX(4px);
}

.inicio-pie {
  font-size: 0.75rem;
  color: var(--inicio-sub);
  letter-spacing: 0.06em;
}




.pagina-android { background-color: var(--verde-oscuro); }
.pagina-ios     { background-color: var(--azul-fondo); }

.fondo-tl {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.fondo-android {
  background: radial-gradient(ellipse at top left, #0f2010 0%, #0a130a 60%);
}

.fondo-ios {
  background: linear-gradient(160deg, #f0f4f9 0%, #e4edf8 100%);
}


.tl-cabecera {
  position: relative;
  z-index: 2;
  padding: 1.5rem 1.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}


.btn-volver {
  display: inline-block;
  width: fit-content;
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  transition: all 0.2s ease;
}

.volver-android {
  background: rgba(61, 220, 132, 0.08);
  border-color: rgba(61, 220, 132, 0.2);
  color: #3ddc84;
}

.volver-android:hover {
  background: rgba(61, 220, 132, 0.18);
  border-color: rgba(61, 220, 132, 0.5);
  transform: translateX(-3px);
}

.volver-ios {
  background: rgba(0, 122, 255, 0.07);
  border-color: rgba(0, 122, 255, 0.2);
  color: #007aff;
}

.volver-ios:hover {
  background: rgba(0, 122, 255, 0.14);
  border-color: rgba(0, 122, 255, 0.4);
  transform: translateX(-3px);
}


.cab-titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.cab-android .cab-titulo { color: var(--verde-texto); }
.cab-ios     .cab-titulo { color: var(--azul-texto); }

.cab-titulo em {
  font-style: italic;
  font-weight: 400;
}

.cab-android .cab-titulo em { color: var(--verde-acento); }
.cab-ios     .cab-titulo em { color: var(--azul-acento); }





.tl-lista {
  position: relative;
  z-index: 2;
  padding: 0 1.25rem 6rem;
  max-width: 660px;
  margin: 0 auto;
}

.tl-lista::before {
  content: '';
  position: absolute;
  left: calc(1.25rem + 11px);
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
}

.pagina-android .tl-lista::before {
  background: linear-gradient(to bottom, var(--verde-acento), transparent);
  opacity: 0.3;
}

.pagina-ios .tl-lista::before {
  background: linear-gradient(to bottom, var(--azul-acento), transparent);
  opacity: 0.25;
}

.version-item {
  position: relative;
  padding-left: 50px;
  margin-bottom: 2.25rem;
  animation: entrar 0.4s ease both;
}

.version-item:nth-child(1)  { animation-delay: 0.04s; }
.version-item:nth-child(2)  { animation-delay: 0.08s; }
.version-item:nth-child(3)  { animation-delay: 0.12s; }
.version-item:nth-child(4)  { animation-delay: 0.16s; }
.version-item:nth-child(5)  { animation-delay: 0.20s; }
.version-item:nth-child(6)  { animation-delay: 0.24s; }
.version-item:nth-child(7)  { animation-delay: 0.28s; }
.version-item:nth-child(8)  { animation-delay: 0.32s; }
.version-item:nth-child(9)  { animation-delay: 0.36s; }
.version-item:nth-child(10) { animation-delay: 0.40s; }
.version-item:nth-child(11) { animation-delay: 0.44s; }
.version-item:nth-child(12) { animation-delay: 0.48s; }
.version-item:nth-child(13) { animation-delay: 0.52s; }
.version-item:nth-child(14) { animation-delay: 0.56s; }
.version-item:nth-child(15) { animation-delay: 0.60s; }
.version-item:nth-child(16) { animation-delay: 0.64s; }
.version-item:nth-child(17) { animation-delay: 0.68s; }
.version-item:nth-child(18) { animation-delay: 0.72s; }

@keyframes entrar {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Punto en la línea */
.version-punto {
  position: absolute;
  left: 4px;
  top: 1.4rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid;
  z-index: 1;
}

.punto-android {
  border-color: var(--verde-acento);
  background: var(--verde-oscuro);
  box-shadow: 0 0 8px rgba(61, 220, 132, 0.3);
}

.punto-ios {
  border-color: var(--azul-acento);
  background: var(--azul-fondo);
  box-shadow: 0 0 8px rgba(0, 122, 255, 0.2);
}

/* Punto especial para la versión más reciente */
.punto-reciente {
  width: 22px;
  height: 22px;
  left: 2px;
  background: var(--verde-acento) !important;
  box-shadow: 0 0 16px rgba(61, 220, 132, 0.6) !important;
  animation: parpadear-verde 2.5s ease-in-out infinite;
}

.punto-ios-reciente {
  width: 22px;
  height: 22px;
  left: 2px;
  background: var(--azul-acento) !important;
  box-shadow: 0 0 16px rgba(0, 122, 255, 0.5) !important;
  animation: parpadear-azul 2.5s ease-in-out infinite;
}

@keyframes parpadear-verde {
  0%, 100% { box-shadow: 0 0 16px rgba(61, 220, 132, 0.6); }
  50%       { box-shadow: 0 0 28px rgba(61, 220, 132, 0.9); }
}

@keyframes parpadear-azul {
  0%, 100% { box-shadow: 0 0 16px rgba(0, 122, 255, 0.5); }
  50%       { box-shadow: 0 0 28px rgba(0, 122, 255, 0.8); }
}



.version-tarjeta {
  border-radius: var(--borde-radio);
  padding: 1.4rem;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.version-tarjeta:hover {
  transform: translateY(-2px);
}

/* Android */
.tarjeta-android {
  background: var(--verde-tarjeta);
  border-color: rgba(61, 220, 132, 0.1);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}

.tarjeta-android:hover {
  border-color: rgba(61, 220, 132, 0.28);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

/* iOS */
.tarjeta-ios {
  background: var(--azul-tarjeta);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

.tarjeta-ios:hover {
  border-color: rgba(0, 122, 255, 0.2);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}

/* Tarjeta de la versión más reciente */
.tarjeta-reciente-android {
  border-color: rgba(61, 220, 132, 0.35) !important;
  box-shadow: 0 4px 24px rgba(61, 220, 132, 0.1) !important;
}

.tarjeta-reciente-ios {
  border-color: rgba(0, 122, 255, 0.28) !important;
  box-shadow: 0 4px 24px rgba(0, 122, 255, 0.08) !important;
}

.etiqueta-android {
  background: var(--verde-acento);
  color: var(--verde-oscuro);
  font-weight: 700;
}

.etiqueta-ios {
  background: var(--azul-acento);
  color: #fff;
  font-weight: 700;
}



.version-encabezado {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.version-numero {
  font-family: var(--fuente-titulo);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.65rem;
  border-radius: 6px;
}

.tarjeta-android .version-numero {
  background: rgba(61, 220, 132, 0.12);
  color: var(--verde-acento);
}

.ios-numero {
  background: rgba(0, 122, 255, 0.08) !important;
  color: var(--azul-acento) !important;
}

.version-fecha {
  font-size: 0.78rem;
}

.tarjeta-android .version-fecha { color: var(--verde-subtexto); }
.tarjeta-ios     .version-fecha { color: var(--azul-subtexto); }


.version-nombre {
  font-family: var(--fuente-titulo);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1.1rem;
}

.tarjeta-android .version-nombre { color: var(--verde-texto); }
.tarjeta-ios     .version-nombre { color: var(--azul-texto); }


.imagen-placeholder {
  width: 100%;
  height: 150px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  font-size: 0.82rem;
  font-style: italic;
  border: 2px dashed;
}
.imagen-placeholder img {
  max-width: 100%;   
  max-height: 100%;  
  object-fit: contain; 
  border-radius: 8px; 
}

.android-img {
  background: rgba(61, 220, 132, 0.04);
  border-color: rgba(61, 220, 132, 0.2);
  color: var(--verde-subtexto);
}

.ios-img {
  background: rgba(0, 122, 255, 0.03);
  border-color: rgba(0, 122, 255, 0.2);
  color: var(--azul-subtexto);
}




.novedades {
  border-top: 1px solid;
  padding-top: 0.9rem;
}

.tarjeta-android .novedades { border-color: rgba(61, 220, 132, 0.1); }
.tarjeta-ios     .novedades { border-color: rgba(0, 0, 0, 0.06); }


.btn-novedades {
  cursor: pointer;
  list-style: none;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.45rem 1rem;
  border-radius: 8px;
  display: inline-block;
  user-select: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.btn-novedades::-webkit-details-marker { display: none; }

.btn-nov-android {
  background: rgba(61, 220, 132, 0.08);
  color: var(--verde-acento);
  border: 1px solid rgba(61, 220, 132, 0.2);
}

.btn-nov-android:hover {
  background: rgba(61, 220, 132, 0.18);
}

.btn-nov-ios {
  background: rgba(0, 122, 255, 0.07);
  color: var(--azul-acento);
  border: 1px solid rgba(0, 122, 255, 0.2);
}

.btn-nov-ios:hover {
  background: rgba(0, 122, 255, 0.14);
}


.novedades-lista {
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.novedades-lista li {
  font-size: 0.88rem;
  line-height: 1.55;
  padding-left: 1.1rem;
  position: relative;
}

.novedades-lista li::before {
  content: '·';
  position: absolute;
  left: 0;
  font-size: 1.3rem;
  line-height: 1;
}

.tarjeta-android .novedades-lista li       { color: var(--verde-subtexto); }
.tarjeta-android .novedades-lista li::before { color: var(--verde-acento); }

.tarjeta-ios .novedades-lista li           { color: var(--azul-subtexto); }
.tarjeta-ios .novedades-lista li::before   { color: var(--azul-acento); }



@media (min-width: 600px) {

 
  .inicio-botones {
    flex-direction: row;
    max-width: 600px;
  }

  .btn-plataforma {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 1.75rem;
  }

  .btn-flecha {
    align-self: flex-end;
  }

  .tl-cabecera {
    padding: 2rem 2rem 2rem;
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .btn-volver {
    align-self: flex-start;
  }

  .cab-info {
    flex: 1;
  }

  .tl-lista {
    padding: 0 2rem 8rem;
  }

  .tl-lista::before {
    left: calc(2rem + 11px);
  }

  .version-item {
    padding-left: 58px;
  }

  .imagen-placeholder {
    height: 190px;
  }
}

@media (min-width: 900px) {

  .inicio-titulo {
    font-size: 7.5rem;
  }

  .inicio-botones {
    max-width: 680px;
  }

  .tl-lista {
    padding: 0 2.5rem 8rem;
  }

  .tl-lista::before {
    left: calc(2.5rem + 11px);
  }

  .version-tarjeta {
    padding: 1.75rem 2rem;
  }

  .imagen-placeholder {
    height: 210px;
  }
}