/*
 * ============================================================
 *  Fundación Aprender sin Temer — temi.css
 *  Estilos exclusivos de la página Temi
 *  aprendersintemer.org/temi.html
 * ============================================================
 *
 *  Tabla de contenidos
 *  ─────────────────────────────────────────────────────────
 *   1.  Variables Temi
 *   2.  Navbar — enlace Temi activo
 *   3.  Logo / título Temi (letras de colores)
 *   4.  Hero
 *   5.  Sección ¿Qué es Temi?
 *   6.  Sección Video / Canción
 *   7.  Redes sociales (Temi)
 *   8.  Sección Para quién
 *   9.  Sección Lo que viene
 *  10.  Sección Newsletter
 *  11.  Responsive
 * ============================================================
 */


/* ============================================================
   1. VARIABLES TEMI
   ============================================================ */

:root {
  --temi-rojo:     #E63329;
  --temi-azul:     #1565C0;
  --temi-amarillo: #FDD835;
  --temi-verde:    #43A047;
  --temi-bg:       #FFFDF5;
  --temi-bg-gris:  #F0F4F8;
  --temi-aclaro:   #29B8E0;
  --temi-celeste:  #0096C7;  /* celeste visible para la letra i */
}


/* ============================================================
   2. NAVBAR — ENLACE TEMI ACTIVO
   ============================================================ */

.nav-link-temi {
  font-family: 'Fredoka One', sans-serif !important;
  font-size: 17px !important;
  letter-spacing: 1px;
  border-bottom: none !important;
}

/* Colores de las letras de Temi en el nav */
.temi-nav-t { color: #FDD835; transition: color 0.3s; } /* Amarillo */
.temi-nav-e { color: #1565C0; transition: color 0.3s; } /* Azul */
.temi-nav-m { color: #E63329; transition: color 0.3s; } /* Rojo */
.temi-nav-i { color: #29B8E0; transition: color 0.3s; } /* Celeste */

/* Efecto hover en el nav (rotamos los colores para un efecto divertido) */
.nav-link-temi:hover .temi-nav-t { color: #E63329; } /* Pasa a Rojo */
.nav-link-temi:hover .temi-nav-e { color: #FDD835; } /* Pasa a Amarillo */
.nav-link-temi:hover .temi-nav-m { color: #29B8E0; } /* Pasa a Celeste */
.nav-link-temi:hover .temi-nav-i { color: #1565C0; } /* Pasa a Azul */

.nav-link-active {
  position: relative;
}

.nav-link-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0; right: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--temi-rojo), var(--temi-azul),
    var(--temi-amarillo), var(--temi-celeste));
}


/* ============================================================
   3. LOGO / TÍTULO TEMI (LETRAS DE COLORES)
   ============================================================ */

.temi-logo-titulo {
  font-family: 'Fredoka One', sans-serif;
  font-size: clamp(72px, 14vw, 110px);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -2px;
}

.tl-t { color: var(--temi-amarillo); text-shadow: 0 2px 0 rgba(0,0,0,0.08); }
.tl-e { color: var(--temi-azul); }
.tl-m { color: var(--temi-rojo); }
.tl-i { color: var(--temi-celeste); }

/* Versión pequeña (navbar, footer) */
.temi-logo-sm {
  font-family: 'Fredoka One', sans-serif;
  font-size: 24px;
}

/* Corazón decorativo */
.temi-corazon {
  display: inline-block;
  animation: latido 1.4s ease-in-out infinite;
}

@keyframes latido {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.22); }
}


/* ============================================================
   4. HERO
   ============================================================ */

.temi-hero {
  background: var(--temi-bg);
  padding: 70px 0 60px;
  position: relative;
  overflow: hidden;
  min-height: 520px;
}

/* Blobs de fondo */
.temi-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.22;
}

.temi-blob--azul {
  width: 320px; height: 320px;
  background: var(--temi-azul);
  top: -80px; right: 10%;
  border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
  animation: blobMove 9s ease-in-out infinite;
}

.temi-blob--amarillo {
  width: 200px; height: 200px;
  background: var(--temi-amarillo);
  bottom: -40px; left: 5%;
  border-radius: 50%;
  animation: blobMove 7s ease-in-out infinite reverse;
}

.temi-blob--rojo {
  width: 100px; height: 100px;
  background: var(--temi-rojo);
  top: 30%; right: 3%;
  border-radius: 50%;
  opacity: 0.15;
}

@keyframes blobMove {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(20px, -20px) scale(1.05); }
}

.temi-hero-inner {
  display: flex;
  align-items: center;
  gap: 48px;
  position: relative;
  z-index: 1;
}

.temi-hero-text {
  flex: 1;
  min-width: 260px;
}

.temi-hero-sub {
  font-family: 'Fredoka One', sans-serif;
  font-size: clamp(20px, 3.5vw, 28px);
  color: var(--azul-oscuro);
  margin-bottom: 14px;
  font-weight: 400;
}

.temi-hero-desc {
  font-size: 17px;
  color: #555;
  line-height: 1.7;
  margin-bottom: 28px;
}

/* Botones del hero */
.temi-hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.temi-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 800;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s;
}

.temi-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.16);
}

.temi-btn--rojo {
  background: var(--temi-rojo);
  color: #fff;
}

.temi-btn--outline {
  background: transparent;
  color: var(--azul-oscuro);
  border: 2px solid var(--azul-oscuro);
}

.temi-btn--youtube {
  background: #FF0000;
  color: #fff;
  margin-top: 20px;
}

.temi-play-ico {
  font-size: 12px;
  background: rgba(255,255,255,0.25);
  border-radius: 50%;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.temi-yt-ico {
  font-size: 13px;
}

/* Badge flotante */
.temi-badge {
  display: inline-block;
  background: #fff;
  border-radius: 16px;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--azul-oscuro);
  line-height: 1.5;
  box-shadow: 0 4px 20px rgba(27,46,122,0.14);
  border: 1.5px solid rgba(41,184,224,0.2);
  position: relative;
  max-width: 200px;
}

.temi-badge-corazon {
  position: absolute;
  bottom: -10px;
  right: 16px;
  font-size: 18px;
}

/* Imagen/ilustración del hero */
.temi-hero-img {
  flex: 0 0 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.temi-hero-img-placeholder {
  width: 300px; height: 300px;
  background: linear-gradient(135deg, var(--temi-azul), #29B8E0);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 48px rgba(21,101,192,0.3);
  animation: flotando 4s ease-in-out infinite;
}

/* 4. Estilos para que la imagen se vea grande y mantenga tu sombra original */
.temi-img-grande {
  width: 100%; /* Le decimos que ocupe todo el ancho disponible de su mitad */
  max-width: 600px; /* Evita que se vuelva inmensa en pantallas muy grandes */
  height: auto; /* Mantiene las proporciones correctas sin deformarse */
  filter: drop-shadow(0 8px 32px rgba(41,184,224,0.35)); /* Tu sombra intacta */
}

.temi-char-big { font-size: 120px; }

@keyframes flotando {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}


/* ============================================================
   5. SECCIÓN ¿QUÉ ES TEMI?
   ============================================================ */

.temi-quien-inner {
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
}

.temi-quien-img {
  flex: 0 0 280px;
  display: flex;
  justify-content: center;
}

.temi-char-circle {
  width: 260px; height: 260px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: flotando 5s ease-in-out infinite;
}

.temi-char-circle--amarillo {
  background: radial-gradient(circle, var(--temi-amarillo) 60%, #f9c200 100%);
  box-shadow: 0 8px 40px rgba(253,216,53,0.4);
}

.temi-char-med { font-size: 100px; }

.temi-quien-text {
  flex: 1;
  min-width: 260px;
}

.temi-quien-p {
  font-size: 16px;
  color: #444;
  line-height: 1.8;
  margin-bottom: 16px;
  max-width: 540px;
}

/* Chips de emociones */
.temi-emociones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.temi-emocion {
  padding: 7px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 800;
  border: 2px solid transparent;
}

.temi-emo--miedo      { background: #E3F2FD; color: #1565C0; border-color: #90CAF9; }
.temi-emo--tristeza   { background: #E8EAF6; color: #283593; border-color: #9FA8DA; }
.temi-emo--frustracion{ background: #FFF3E0; color: #E65100; border-color: #FFCC80; }
.temi-emo--amor       { background: #FCE4EC; color: #C62828; border-color: #F48FB1; }
.temi-emo--alegria    { background: #F9FBE7; color: #558B2F; border-color: #C5E1A5; }


/* ============================================================
   6. SECCIÓN VIDEO / CANCIÓN
   ============================================================ */

.temi-video-inner {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}

.temi-video-text {
  flex: 1;
  min-width: 260px;
}

.temi-video-titulo {
  font-size: clamp(22px, 3.5vw, 30px) !important;
  line-height: 1.25 !important;
}

.temi-cancion-titulo {
  color: var(--azul-oscuro);
}

.temi-video-desc {
  font-size: 15px;
  color: #555;
  line-height: 1.7;
  margin-top: 8px;
}

/* Frame del video */
.temi-video-embed {
  flex: 0 0 400px;
}

.temi-video-frame {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  aspect-ratio: 16 / 9;
  background: #1a1a2e;
  width: 100%;
}

.temi-video-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Placeholder visual cuando no hay embed real */
.temi-video-placeholder {
  width: 100%;
  height: 100%;
}

.temi-video-cover {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #0d1a4a 0%, #1B2E7A 60%, #29B8E0 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 24px;
}

.temi-video-titulo-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  margin-bottom: 20px;
}

.temi-vt-el, .temi-vt-que {
  font-family: 'Fredoka One', sans-serif;
  font-size: clamp(18px, 3.5vw, 26px);
  color: #fff;
}

.temi-vt-temi {
  font-family: 'Fredoka One', sans-serif;
  font-size: clamp(24px, 5vw, 36px);
}

.temi-vt-temi .tl-t { color: var(--temi-rojo); }
.temi-vt-temi .tl-e { color: #fff; }
.temi-vt-temi .tl-m { color: var(--temi-amarillo); }
.temi-vt-temi .tl-i { color: #fff; }

/* Botón play central */
.temi-play-btn {
  text-decoration: none;
}

.temi-play-circle {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}

.temi-play-btn:hover .temi-play-circle {
  background: var(--temi-rojo);
  transform: scale(1.1);
  border-color: var(--temi-rojo);
}

/* Barra de progreso decorativa */
.temi-video-barra {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.5);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.8);
  font-size: 13px;
}

.temi-barra-linea {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
  overflow: hidden;
}

.temi-barra-prog {
  height: 100%;
  width: 0%;
  background: var(--temi-rojo);
  border-radius: 3px;
}


/* ============================================================
   7. REDES SOCIALES (TEMI)
   ============================================================ */

.temi-social-row {
  margin-top: 28px;
}

.temi-social-label {
  font-size: 12px;
  font-weight: 800;
  color: #999;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.temi-social-icons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.temi-soc {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.temi-soc:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.temi-soc--yt { background: #FF0000; }
.temi-soc--fb { background: #1877F2; }
.temi-soc--ig { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.temi-soc--tk { background: #010101; border: 1px solid #333; }


/* ============================================================
   8. SECCIÓN PARA QUIÉN
   ============================================================ */

.temi-para-header {
  text-align: center;
  margin-bottom: 48px;
}

.temi-para-titulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(24px, 4vw, 32px) !important;
}

.temi-para-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.temi-para-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border-radius: 20px;
  padding: 24px 20px;
  box-shadow: 0 4px 20px rgba(27,46,122,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.temi-para-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(27,46,122,0.14);
}

.temi-para-ico {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
}

.temi-para-ico--rojo    { background: #FFEBEE; }
.temi-para-ico--amarillo{ background: #FFFDE7; }
.temi-para-ico--azul    { background: #E3F2FD; }

.temi-para-body { flex: 1; }

.temi-para-nombre {
  font-size: 16px;
  font-weight: 800;
  color: var(--azul-oscuro);
  margin-bottom: 4px;
  font-family: 'Nunito', sans-serif;
}

.temi-para-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}


/* ============================================================
   9. SECCIÓN LO QUE VIENE
   ============================================================ */

.temi-viene-inner {
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
}

.temi-viene-left {
  flex: 1;
  min-width: 260px;
}

.temi-viene-titulo {
  margin-bottom: 40px !important;
}

/* Roadmap horizontal */
.temi-roadmap {
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
}

.temi-roadmap-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 80px;
  text-align: center;
  position: relative;
}

.temi-roadmap-ico {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid rgba(41,184,224,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  box-shadow: 0 4px 16px rgba(27,46,122,0.10);
  transition: transform 0.2s, border-color 0.2s;
  position: relative;
  z-index: 1;
}

.temi-roadmap-item:hover .temi-roadmap-ico {
  transform: scale(1.1);
  border-color: var(--azul);
}

/* Línea conectora */
.temi-roadmap-linea {
  position: absolute;
  top: 35px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(41,184,224,0.5), rgba(27,46,122,0.3));
  z-index: 0;
}

.temi-roadmap-linea--last {
  display: none;
}

.temi-roadmap-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--azul-oscuro);
  line-height: 1.4;
  margin-top: 4px;
}

/* CTA derecho */
.temi-viene-cta {
  flex: 0 0 260px;
  background: var(--temi-amarillo);
  border-radius: 24px;
  padding: 36px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.temi-viene-cta-char {
  font-size: 72px;
  margin-bottom: 12px;
  display: block;
  animation: flotando 4s ease-in-out infinite;
}

.temi-viene-cta-texto {
  font-family: 'Fredoka One', sans-serif;
  font-size: clamp(20px, 3vw, 26px);
  color: var(--azul-oscuro);
  line-height: 1.3;
}


/* ============================================================
   10. SECCIÓN NEWSLETTER
   ============================================================ */

.temi-suscripcion {
  background: var(--azul-oscuro);
  padding: 36px 24px;
}

.temi-suscripcion-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.temi-sus-text {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 200px;
}

.temi-sus-ico {
  font-size: 40px;
  flex-shrink: 0;
}

.temi-sus-titulo {
  font-family: 'Fredoka One', sans-serif;
  font-size: 18px;
  color: #fff;
  margin-bottom: 4px;
}

.temi-sus-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.68);
}

/* Formulario */
.temi-sus-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  max-width: 440px;
}

.temi-sus-input {
  flex: 1;
  min-width: 200px;
  padding: 12px 20px;
  border-radius: 50px;
  border: 2px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 14px;
  font-family: 'Nunito', sans-serif;
  outline: none;
  transition: border-color 0.2s;
}

.temi-sus-input::placeholder {
  color: rgba(255,255,255,0.45);
}

.temi-sus-input:focus {
  border-color: rgba(255,255,255,0.55);
}

.temi-sus-btn {
  background: var(--temi-rojo);
  color: #fff;
  padding: 12px 24px;
  border-radius: 50px;
  border: none;
  font-size: 14px;
  font-weight: 800;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s, transform 0.18s;
}

.temi-sus-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}


/* ============================================================
   11. RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .temi-hero-inner {
    flex-direction: column;
    text-align: center;
  }

  .temi-hero-img {
    flex: none;
    order: -1;
  }

  .temi-hero-btns {
    justify-content: center;
  }

  .temi-badge {
    margin: 0 auto;
  }

  .temi-quien-inner {
    flex-direction: column;
    text-align: center;
  }

  .temi-quien-img {
    flex: none;
  }

  .temi-emociones {
    justify-content: center;
  }

  .temi-video-inner {
    flex-direction: column;
  }

  .temi-video-embed {
    flex: none;
    width: 100%;
  }

  .temi-social-icons {
    justify-content: center;
  }

  .temi-para-grid {
    grid-template-columns: 1fr;
  }

  .temi-viene-inner {
    flex-direction: column;
  }

  .temi-viene-cta {
    flex: none;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }

  .temi-suscripcion-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .temi-sus-text {
    justify-content: center;
  }

  .temi-sus-form {
    max-width: none;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .temi-logo-titulo {
    font-size: 72px;
  }

  .temi-hero {
    padding: 48px 0 40px;
  }

  .temi-hero-img-placeholder {
    width: 220px;
    height: 220px;
  }

  .temi-char-big {
    font-size: 90px;
  }

  .temi-roadmap {
    gap: 8px;
  }

  .temi-roadmap-ico {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }

  .temi-roadmap-linea {
    top: 28px;
  }

  .temi-para-card {
    flex-direction: column;
    text-align: center;
  }

  .temi-sus-form {
    flex-direction: column;
  }

  .temi-sus-btn {
    width: 100%;
  }
}