/* ================= Tech & Media Page ================= */

/* Variables de diseño */
:root{
  --card-radius: 12px;
  --shadow-1: 0 6px 18px rgba(0,0,0,.10);
  --shadow-2: 0 12px 22px rgba(0,0,0,.16);
  --border-1: 1px solid rgba(2,6,23,.10);   /* azul muy oscuro con baja opacidad */
  --ink-1: #0b1220;                          /* texto principal (alto contraste) */
  --ink-2: #020202;                             /* texto secundario */
  --accent: #0c61ff;                         /* enlaces/acentos */
  --bg-soft: #f7f8fb;                        /* fondos suaves */
}

/* ===== Hero / Major (encabezado de la página) ===== */
#main header.major{
  background: linear-gradient(135deg, #ffffff 0%, #edf3ff 60%, #ffffff 100%);
  color: var(--ink-1);
  padding: clamp(36px, 6vw, 56px) 20px;
  border-radius: var(--card-radius);
  border: var(--border-1);                   /* borde para separar del fondo global */
  box-shadow: var(--shadow-1);
  text-align: center;
  margin: 0 0 18px;
  transition: transform .3s, box-shadow .3s;
}
#main header.major:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); }
#main header.major h2{
  color: var(--ink-1);
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  margin: 0 0 10px;
}
#main header.major p{
  color: var(--ink-2);
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  max-width: 760px;
  margin: 0 auto;
}

/* ===== Contenedor de sección (YouTube / TikTok) ===== */
#main .content-section{
  background: #fff;                          /* alto contraste con texto oscuro */
  color: var(--ink-1);
  padding: 26px 16px 24px;
  margin: 12px 0 18px;
  border-radius: var(--card-radius);
  border: var(--border-1);                   /* borde visible (pedido) */
  box-shadow: var(--shadow-1);
}
#main .content-section h2{
  color: var(--ink-1);
  margin: 0 0 18px;
  font-size: clamp(1.5rem, 3vw, 1.8rem);
}
#main .content-section a{
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
#main .content-section a:hover{ text-decoration: underline; }

/* ===== Grid YouTube ===== */
.youtube-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  place-items: center;
}
@media (min-width: 980px){
  .youtube-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tarjeta YouTube */
.youtube-card{
  width: 100%;
  max-width: 900px;
  background: #fff;
  color: var(--ink-1);
  border-radius: var(--card-radius);
  border: var(--border-1);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  text-align: center;
  transition: transform .35s, box-shadow .35s;
}
.youtube-card:hover{ transform: translateY(-6px) scale(1.01); box-shadow: var(--shadow-2); }

/* Marco 16:9 fluido */
.media-frame{
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;                          /* evita parpadeo en carga */
  overflow: hidden;
}
.media-frame iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.youtube-card h3{
  margin: 12px 12px 6px;
  font-size: 1.1rem;
  color: var(--ink-1);
}
.youtube-card p{
  margin: 0 16px 16px;
  font-size: .98rem;
  color: var(--ink-2);
}

/* ===== Grid TikTok ===== */
.tiktok-grid{
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}

/* Tarjeta TikTok */
.tiktok-card{
  background: #fff;
  color: var(--ink-1);
  border-radius: var(--card-radius);
  border: var(--border-1);
  overflow: hidden;
  text-align: center;
  box-shadow: var(--shadow-1);
  transition: transform .35s, box-shadow .35s;
}
.tiktok-card:hover{ transform: translateY(-6px) scale(1.01); box-shadow: var(--shadow-2); }

/* Reserva de espacio para evitar CLS antes del embed */
.tiktok-card .tiktok-embed{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 9 / 16;                      /* alto aproximado del video vertical */
  background: #000;
}

.tiktok-card h3{
  margin: 12px 12px 6px;
  font-size: 1.08rem;
  color: var(--ink-1);
}
.tiktok-card p{
  margin: 0 14px 16px;
  font-size: .95rem;
  color: black;
}

/* CTA centrado */
.center-text{ text-align: center; margin-top: 10px; }
.center-text a{
  font-weight: 600;
  text-decoration: none;
}
.center-text a:hover{ color: #0849bd; transform: translateY(-1px); }

/* ===== Reveal ===== */
.reveal{
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.reveal.visible{
  opacity: 1;
  transform: translateY(0);
}

/* ===== Accesibilidad / Reduce motion ===== */
@media (prefers-reduced-motion: reduce){
  .youtube-card:hover,
  .tiktok-card:hover{ transform: none; }
  .reveal{ transition: none; opacity: 1; transform: none; }
}

/* Responsive */
@media (max-width: 768px){
  #main .content-section{ padding: 20px 12px 18px; }
}
/* CTA de TikTok en negro */
.tiktok-cta{
  text-align: center;
  color:#000 !important;
  font-weight:600;
  margin: .25rem 0 .5rem;
}