<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tacozilla Dark Theme</title>
  <style>
    /* 🌑 Tacozilla Dark Theme - Enhanced Utilities */

    /* Fondo general */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #0a0a0a;
      color: #f5f5f5;
      line-height: 1.6;
    }

    /* Scrollbar (Webkit: Chrome, Edge, Safari) */
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #262626, #1a1a1a);
      border-radius: 9999px;
      border: 2px solid #0a0a0a;
    }
    ::-webkit-scrollbar-track {
      background: #0a0a0a;
    }

    /* Scrollbar (Firefox) */
    * {
      scrollbar-width: thin;
      scrollbar-color: #262626 #0a0a0a;
    }

    /* Selección de texto */
    ::selection {
      background: #22d3ee55;
      color: #ffffff;
    }

    /* Fondo y efecto de imágenes */
    img {
      background: linear-gradient(180deg, #0a0a0a, #111827);
      border-radius: 0.5rem;
      padding: 2px;
      transition: filter 0.3s;
      display: block;
      margin: 1rem auto;
      max-width: 300px;
    }
    img:hover {
      filter: brightness(1.05);
    }

    /* Enlaces */
    a {
      color: #22d3ee;
      transition: color 0.3s;
    }
    a:hover {
      color: #0ea5e9;
    }

    /* Contenedor con scroll forzado */
    .scroll-box {
      height: 200px;
      overflow-y: scroll;
      border: 1px solid #262626;
      padding: 1rem;
      margin: 2rem;
      background: #111827;
      border-radius: 0.5rem;
    }
  </style>
</head>
<body>

  <h1>🌮 Bienvenido a Tacozilla</h1>
  <p>
    Selecciona este texto para ver el <strong>efecto de selección</strong>.  
    Además, baja en la caja de scroll para ver el diseño del <em>scrollbar</em>.
  </p>

  <!-- Imagen con transparencia para ver el fondo -->
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/38/PNG_transparency_demonstration_1.png" alt="Ejemplo de imagen con transparencia">

  <!-- Caja con mucho contenido para mostrar scrollbar -->
  <div class="scroll-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Suspendisse potenti. Nullam eget ligula vitae velit fermentum.</p>
    <p>Aliquam erat volutpat. Morbi tristique dictum odio.</p>
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.</p>
    <p>Praesent non justo nec justo convallis malesuada.</p>
    <p>Vivamus luctus leo vel sem porta, sed dapibus ligula facilisis.</p>
    <p>Cras vel urna non nunc ultricies tincidunt.</p>
    <p>Nam nec leo ut velit finibus ultrices.</p>
    <p>Integer venenatis eros a sapien finibus, vel fermentum magna blandit.</p>
    <p>Sed dictum sapien vel ligula sodales, in placerat nisl luctus.</p>
    <p>Donec ut orci eget eros pretium dapibus.</p>
    <p>Curabitur nec magna ut erat posuere varius.</p>
    <p>Ut imperdiet eros at libero ullamcorper, vel dictum odio facilisis.</p>
  </div>

  <p>
    Aquí tienes un <a href="#">enlace de ejemplo</a> para ver el estilo en modo oscuro.
  </p>

</body>
</html>
