/* ============================================================
   NIDO™ — Hoja de Estilos Global
   Control Parental · v1.0 · 2025
   ============================================================
   Índice
   1. Tokens (variables)
   2. Reset y base
   3. Tipografía
   4. Layout
   5. Navegación
   6. Hero
   7. Secciones y contenedores
   8. Componentes
      8a. Cards genéricas
      8b. Noticias
      8c. Charlas
      8d. Tutoriales (index)
      8e. Tutoriales (página dedicada)
      8f. Diccionario
      8g. Habla con tu hijo
      8h. FAQ
      8i. Badges y tags
      8j. Botones
   9. Banner separador
  10. Footer
  11. Responsive
   ============================================================ */


/* ============================================================
   1. TOKENS
   ============================================================ */

:root {
  /* Colores de marca */
  --color-dark:    #1C353B;
  --color-lime:    #DBFF0C;
  --color-mint:    #88FFD5;
  --color-bg:      #f5f5f5;
  --color-white:   #ffffff;

  /* Texto */
  --color-text:        #111111;
  --color-text-muted:  #666666;
  --color-text-faint:  #aaaaaa;
  --color-text-mid:    #555555;

  /* Bordes */
  --color-border:      #dddddd;
  --color-border-light:#eeeeee;

  /* Plataformas */
  --color-tiktok:    #1C353B;
  --color-instagram: #c13584;
  --color-youtube:   #ff0000;
  --color-whatsapp:  #25d366;
  --color-facebook:  #1877f2;
  --color-snapchat:  #fffc00;

  /* Tags de tipo */
  --tag-slang-bg:      #e6fff7;
  --tag-emoji-bg:      #e8f5e9;
  --tag-meme-bg:       #fffde0;
  --tag-meme-text:     #5a4800;
  --tag-app-bg:        #e3f2fd;
  --tag-app-text:      #1565c0;

  /* Tags de tutorial */
  --tag-config-bg:     #e6fff7;
  --tag-privacidad-bg: #e8fff0;
  --tag-tiempo-bg:     #fffde0;
  --tag-tiempo-text:   #5a4800;
  --tag-contenido-bg:  #e3f2fd;
  --tag-contenido-text:#1565c0;

  /* Tipografía */
  --font:    'Archivo Expanded', sans-serif;

  /* Espaciado */
  --gap-xs:  8px;
  --gap-sm:  12px;
  --gap-md:  16px;
  --gap-lg:  24px;
  --gap-xl:  40px;

  /* Radios */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-pill: 20px;
  --radius-circle: 50%;
}


/* ============================================================
   2. RESET Y BASE
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Expanded:ital,wght@0,100..900;1,100..900&display=swap');

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

body {
  font-family: var(--font);
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
}


/* ============================================================
   3. TIPOGRAFÍA
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--font);
  margin-top: 0;
}

h1 { font-size: 34px; font-weight: 800; line-height: 1.2; }
h2 { font-size: 22px; font-weight: 800; }
h3 { font-size: 14px; font-weight: 700; }
h4 { font-size: 13px; font-weight: 700; }

p  { font-size: 13px; color: var(--color-text-muted); margin: 0; }
small { font-size: 11px; color: var(--color-text-faint); }


/* ============================================================
   4. LAYOUT
   ============================================================ */

section {
  padding: 40px 30px;
  max-width: 1000px;
  margin: 0 auto;
}

section h2 {
  color: var(--color-dark);
  border-left: 4px solid var(--color-lime);
  padding-left: 10px;
  margin-bottom: 20px;
}

.bg-white {
  background: var(--color-white);
  max-width: 100%;
  padding: 40px 0;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 30px;
}


/* ============================================================
   5. NAVEGACIÓN
   ============================================================ */

nav {
  background-color: var(--color-dark);
  padding: 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav .logo img {
  height: 36px;
  display: block;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}

nav ul li a {
  color: #ccc;
  text-decoration: none;
  font-size: 13px;
}

nav ul li a:hover {
  color: var(--color-mint);
}


/* ============================================================
   6. HERO
   ============================================================ */

.hero {
  background-color: var(--color-dark);
  color: var(--color-white);
  display: flex;
  align-items: center;
  gap: var(--gap-xl);
  padding: 50px 40px;
}

.hero-text { flex: 1; }

.hero h1  { color: var(--color-white); margin-bottom: 12px; }
.hero p   { font-size: 15px; color: #aaa; margin-bottom: 20px; }

.hero-img {
  flex: 1;
  max-width: 480px;
}

.hero-img img {
  width: 100%;
  border-radius: var(--radius-xl);
  display: block;
}


/* ============================================================
   8. COMPONENTES
   ============================================================ */

/* --- 8a. Cards genéricas --- */

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
}

.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  flex: 1 1 200px;
}

.card h3 { color: var(--color-dark); }
.card p  { font-size: 13px; }


/* --- 8b. Noticias --- */

.noticia {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 14px;
}

.noticia span {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-dark);
  text-transform: uppercase;
}

.noticia h3 {
  margin: 6px 0;
  font-size: 14px;
  color: var(--color-text);
}

.noticia p  { margin-bottom: 6px; }


/* --- 8c. Charlas --- */

.charla {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: var(--gap-sm);
  display: flex;
  align-items: center;
  gap: 20px;
}

.charla-fecha {
  background-color: var(--color-dark);
  color: var(--color-mint);
  text-align: center;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  min-width: 50px;
}

.charla-fecha .dia {
  font-size: 22px;
  font-weight: 700;
  display: block;
}

.charla-fecha .mes {
  font-size: 11px;
  display: block;
}

.charla-info h3 {
  margin: 0 0 4px;
  font-size: 13px;
}

.charla-info p {
  font-size: 12px;
  color: #888;
}


/* --- 8d. Tutoriales (widget del index) --- */

.plataformas {
  display: flex;
  gap: var(--gap-xs);
  margin-bottom: var(--gap-md);
  flex-wrap: wrap;
}

.plataformas button {
  background: var(--color-white);
  border: 1px solid #ccc;
  padding: 7px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font);
}

.plataformas button.activo {
  background: var(--color-dark);
  color: var(--color-mint);
  border-color: var(--color-dark);
  font-weight: 700;
}

.tutorial-box {
  background: #f9f9f9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--gap-md);
}

.pasos        { display: none; }
.pasos.activo { display: block; }

.paso {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-light);
  align-items: flex-start;
}

.paso:last-child { border-bottom: none; }

.paso-num {
  background: var(--color-lime);
  color: var(--color-dark);
  width: 26px;
  height: 26px;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.paso h4 { margin: 0 0 3px; }
.paso p  { font-size: 13px; }


/* --- 8e. Tutoriales (página dedicada) --- */

.plat-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.plat-btn {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 14px;
  font-family: var(--font);
  font-weight: 600;
  color: #333;
}

.plat-btn.activo {
  background: var(--color-dark);
  color: var(--color-mint);
  border-color: var(--color-dark);
}

.plat-btn.activo .plat-icon {
  outline: 2px solid var(--color-mint);
}

.plat-icon {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-white);
}

/* Colores de íconos de plataforma */
.icon-tiktok    { background: var(--color-tiktok); }
.icon-instagram { background: var(--color-instagram); }
.icon-youtube   { background: var(--color-youtube); }
.icon-whatsapp  { background: var(--color-whatsapp); }
.icon-fb        { background: var(--color-facebook); }
.icon-snap      { background: var(--color-snapchat); color: #000; }

.tutorial-layout { display: none; gap: var(--gap-lg); }
.tutorial-layout.activo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-lg);
}

/* Panel info (izquierda) */
.tut-info {
  background: var(--color-dark);
  border-radius: var(--radius-xl);
  padding: 24px;
  color: var(--color-white);
}

.tut-info-header {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-md);
}

.tut-info-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  color: var(--color-white);
}

.tut-info h3 { color: var(--color-mint); font-size: 18px; margin: 0; }
.tut-info p  { font-size: 13px; color: #aaa; }

.tut-edad {
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #ccc;
}

.tut-edad strong {
  color: var(--color-mint);
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.tut-alerta {
  background: rgba(255,255,255,0.07);
  border-left: 3px solid var(--color-lime);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 12px 16px;
  margin-bottom: 14px;
}

.tut-alerta strong {
  color: var(--color-mint);
  font-size: 11px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

.tut-alerta ul {
  margin: 0;
  padding-left: 16px;
}

.tut-alerta ul li {
  font-size: 12px;
  color: #bbb;
  margin-bottom: 4px;
}

.tut-dificultad {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  margin-top: 14px;
}

.tut-dificultad span {
  font-size: 11px;
  color: #777;
  text-transform: uppercase;
}

.dif-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  background: rgba(255,255,255,0.15);
}

.dif-dot.activo { background: var(--color-lime); }

.dif-label {
  color: var(--color-lime);
  font-size: 12px;
}

/* Panel pasos (derecha) */
.tut-pasos {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.tut-paso {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.tut-paso-num {
  background: var(--color-lime);
  color: var(--color-dark);
  width: 30px;
  height: 30px;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.tut-paso-content h4 { font-size: 14px; color: var(--color-text); margin-bottom: 4px; }
.tut-paso-content p  { font-size: 13px; line-height: 1.5; }

.tut-tip {
  background: #f9f9f9;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: 14px 18px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.tut-tip p { font-size: 12px; line-height: 1.5; color: #555; }

.tut-tip-icon {
  background: var(--color-lime);
  color: var(--color-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  margin-top: 2px;
}

.tut-paso-tag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  align-self: flex-start;
}


/* --- 8f. Diccionario --- */

.buscador {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}

.buscador input {
  flex: 1;
  padding: 10px 16px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: var(--radius-md);
  font-family: var(--font);
  outline: none;
}

.buscador input:focus {
  border-color: var(--color-mint);
}

.filtros {
  display: flex;
  gap: var(--gap-xs);
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.filtros button {
  background: var(--color-white);
  border: 1px solid #ccc;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font);
}

.filtros button.activo {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-mint);
}

.dic-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
}

.dic-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  flex: 1 1 260px;
}

.dic-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.dic-palabra {
  font-size: 18px;
  font-weight: 900;
  color: var(--color-dark);
}

.dic-tipo {
  font-size: 10px;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

.dic-pronunciacion {
  font-size: 11px;
  color: var(--color-text-faint);
  margin-bottom: 8px;
  font-style: italic;
}

.dic-definicion {
  font-size: 13px;
  color: var(--color-text-mid);
  margin-bottom: 10px;
  line-height: 1.5;
}

.dic-ejemplo-label {
  font-size: 10px;
  font-weight: bold;
  color: var(--color-dark);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.dic-ejemplo {
  font-size: 12px;
  color: #777;
  background: var(--color-bg);
  border-left: 3px solid var(--color-mint);
  padding: 6px 10px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
}

.sin-resultados {
  display: none;
  color: var(--color-text-faint);
  font-size: 14px;
  padding: 20px 0;
}


/* --- 8g. Habla con tu hijo --- */

.habla-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
}

.habla-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  flex: 1 1 200px;
}

.habla-card h3 {
  color: var(--color-dark);
  border-left: 3px solid var(--color-lime);
  padding-left: 8px;
  font-size: 13px;
}

.habla-card ul {
  padding-left: 16px;
  margin: 0;
}

.habla-card ul li {
  font-size: 13px;
  color: var(--color-text-mid);
  margin-bottom: 5px;
}


/* --- 8h. FAQ --- */

.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  overflow: hidden;
}

.faq-pregunta {
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  font-family: var(--font);
}

.faq-pregunta:hover { background: var(--color-bg); }

.faq-item.abierto .faq-pregunta {
  background: var(--color-dark);
  color: var(--color-mint);
}

.faq-respuesta {
  display: none;
  padding: 0 18px 14px;
  font-size: 13px;
  color: var(--color-text-mid);
}

.faq-item.abierto .faq-respuesta { display: block; }


/* --- 8i. Badges y tags --- */

.badge {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-weight: 700;
}

.badge-online    { background: #e6fff7; color: var(--color-dark); }
.badge-presencial{ background: #e8fff0; color: var(--color-dark); }

.tipo-slang { background: var(--tag-slang-bg);    color: var(--color-dark); }
.tipo-emoji { background: var(--tag-emoji-bg);    color: var(--color-dark); }
.tipo-meme  { background: var(--tag-meme-bg);     color: var(--tag-meme-text); }
.tipo-app   { background: var(--tag-app-bg);      color: var(--tag-app-text); }

.tag-config    { background: var(--tag-config-bg);     color: var(--color-dark); }
.tag-privacidad{ background: var(--tag-privacidad-bg); color: var(--color-dark); }
.tag-tiempo    { background: var(--tag-tiempo-bg);     color: var(--tag-tiempo-text); }
.tag-contenido { background: var(--tag-contenido-bg);  color: var(--tag-contenido-text); }


/* --- 8j. Botones --- */

.hero button {
  background-color: var(--color-lime);
  color: var(--color-dark);
  border: none;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font);
}

.btn-inscribir {
  margin-left: auto;
  background: var(--color-dark);
  color: var(--color-mint);
  border: none;
  padding: 7px 14px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
}

.btn-inscribir:hover {
  background: var(--color-lime);
  color: var(--color-dark);
}


/* ============================================================
   9. BANNER SEPARADOR
   ============================================================ */

.bannerseparador {
  width: 100vw;
  max-width: none;
  margin: 0 calc(50% - 50vw);
  position: relative;
  padding: 0;
}

.bannerseparador-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.bannerseparador-cinta { display: none; }


/* ============================================================
   10. FOOTER
   ============================================================ */

footer {
  background-color: var(--color-dark);
  color: #aaa;
  text-align: center;
  padding: 30px 20px;
  font-size: 13px;
  margin-top: 40px;
}

footer .footer-logo img {
  height: 32px;
  margin-bottom: 8px;
}

.footer-links { margin-top: 16px; }

.footer-copy {
  margin-top: 16px;
  font-size: 11px;
  color: var(--color-mint);
  opacity: 0.5;
}


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

@media (max-width: 768px) {
  nav {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-sm);
  }

  nav ul {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  section,
  .bg-white {
    padding: 30px 20px;
  }

  .hero {
    flex-direction: column;
    gap: 20px;
    padding: 30px 20px;
    text-align: center;
  }

  .hero-img,
  .hero-text { width: 100%; }

  .cards,
  .habla-grid {
    flex-direction: column;
    gap: var(--gap-md);
  }

  .card,
  .habla-card,
  .noticia,
  .charla,
  .tutorial-box,
  .faq-item { width: 100%; }

  .charla {
    flex-direction: column;
    align-items: stretch;
  }

  .charla-info { width: 100%; }

  .btn-inscribir {
    margin-left: 0;
    width: 100%;
  }

  .paso {
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .paso-num {
    width: 30px;
    height: 30px;
  }

  .plataformas,
  .plat-nav { flex-direction: column; }

  .plataformas button,
  .plat-btn { width: 100%; }

  .bannerseparador { margin: 0; }

  .tutorial-layout.activo {
    grid-template-columns: 1fr;
  }

  .dic-grid { flex-direction: column; }
}