/* ===== Variables ===== */
:root {
  --bg: linear-gradient(160deg, #10584f 0%, #1d9987 50%, #0a332c 100%);;
  --texto: #fff;
  --radio: 25px;
}

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

html, body { height: 100%; }

body {
  font-family: 'Montserrat', system-ui, sans-serif;
  background: var(--bg);
  color: var(--texto);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ===== Contenedor ===== */
.contenedor {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: calc(32px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

/* ===== Encabezado ===== */
.encabezado { text-align: center; margin-bottom: 32px; }

.franja {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 18px;
}
.franja span {
  width: 36px; height: 6px; border-radius: 6px;
  transform: scaleX(0);
  animation: crecer .6s ease forwards;
}
.franja span:nth-child(1) { background: var(--rojo); }
.franja span:nth-child(2) { background: var(--amarillo); animation-delay: .15s; }
.franja span:nth-child(3) { background: var(--verde);    animation-delay: .3s; }

@keyframes crecer { to { transform: scaleX(1); } }

h1 {
  font-size: clamp(3rem, 8vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.1;
}
h1 span {
  background: linear-gradient(90deg, var(--rojo), var(--amarillo), var(--verde));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subtitulo {
  margin-top: 10px;
  color: var(--texto-suave);
  font-size: 0.95rem;
  font-weight: 500;
}

/* ===== Grid de tarjetas ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.tarjeta {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radio);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  transform: translateY(30px) scale(.95);
  transition: transform .25s ease, box-shadow .25s ease;
}

.tarjeta.visible {
  animation: entrar .6s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes entrar {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Brillo diagonal */
.tarjeta::before {
  content: "";
  position: absolute;
  top: -50%; left: -60%;
  width: 50%; height: 200%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent);
  transform: rotate(20deg);
  animation: brillo 4s ease-in-out infinite;
}
@keyframes brillo {
  0%, 70% { left: -60%; }
  100%    { left: 130%; }
}

.tarjeta i {
  font-size: clamp(2.6rem, 13vw, 3.4rem);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.3));
  transition: transform .3s ease;
}

.nombre {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: .5px;
}

/* Colores de cada red */
.facebook  { background: linear-gradient(145deg, #0166e2, #18adfe); }
.instagram { background: linear-gradient(45deg, #fd02c4, #9708f6, #ff0c4c, #ffc500); }
.youtube   { background: linear-gradient(145deg, #db0405, #e45859); }
.tiktok    { background: linear-gradient(145deg, #111, #000); }
.tiktok i  { text-shadow: 2px 2px 0 #fe2c55, -2px -2px 0 #25f4ee; }

/* Interacción */
.tarjeta:active { transform: scale(.94); }

@media (hover: hover) {
  .tarjeta:hover { transform: translateY(-6px); box-shadow: 0 18px 35px rgba(0,0,0,.45); }
  .tarjeta:hover i { transform: scale(1.12) rotate(-6deg); }
}

/* Efecto onda al tocar */
.onda {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  animation: onda .0.5s ease-out forwards;
  pointer-events: none;
}
@keyframes onda { to { transform: scale(4); opacity: 0; } }

/* Enlace sin configurar */
.tarjeta.sin-link { filter: grayscale(.6); }

/* ===== Pie ===== */
.pie {
  margin-top: auto;
  padding-top: 32px;
  text-align: center;
  font-size: .8rem;
  color: var(--texto-suave);
}

/* ===== Pantallas muy pequeñas ===== */
@media (max-width: 340px) {
  .grid { gap: 12px; }
  .nombre { font-size: .85rem; }
}

/* ===== Accesibilidad: menos animación ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
  .tarjeta { opacity: 1; transform: none; }
}