diff --git a/templates/componentes/carrousel_peliculas.html b/templates/componentes/carrousel_peliculas.html
index 8977974..d3f2300 100644
--- a/templates/componentes/carrousel_peliculas.html
+++ b/templates/componentes/carrousel_peliculas.html
@@ -46,6 +46,12 @@
         this .tarxeta.inactive>#descripcion {
             display: none;
         }
+
+        @media md- {
+            this .tarxeta.inactive {
+                display: none;
+            }
+        }
     </style>
 
     {% for pelicula in peliculas %}
diff --git a/templates/nav.html b/templates/nav.html
index 228ba4d..60402e0 100644
--- a/templates/nav.html
+++ b/templates/nav.html
@@ -9,6 +9,7 @@
 
             padding: 0 calc(var(--spacing) * 2);
             background-color: var(--bg-darker);
+            z-index: 30;
 
             animation-timeline: scroll(root);
             animation-timing-function: linear;
@@ -22,7 +23,6 @@
 
             height: var(--nav-height);
             border-bottom: 1px solid var(--bg-lighter);
-            z-index: 30;
         }
 
         this span {
@@ -70,8 +70,8 @@
         this #banner {
             position: fixed;
             top: calc(var(--spacing) * 0.5);
-            width: 20rem;
-            left: calc(50% - 10rem);
+            left: calc(50% - 12rem);
+            width: 24rem;
 
             background-color: var(--fg);
             color: var(--bg);
@@ -81,6 +81,14 @@
             border-radius: calc(var(--radius) * 2);
         }
 
+        this #menu-toggle {
+            display: none;
+            height: 1.2rem;
+            width: 1.2rem;
+            border: none;
+            background-color: var(--fg);
+        }
+
         @keyframes logo_hover {
             50% {
                 color: var(--fg);
@@ -93,95 +101,149 @@
                 color: var(--accent);
             }
         }
+
+        @media lg- {
+            body {
+                margin-top: calc(
+                    var(--nav-height) + var(--spacing) * 0.5 + 1.2rem
+                );
+            }
+
+            this {
+                padding-top: calc(var(--spacing) * 0.5 + 1.2rem);
+                height: calc(var(--nav-height) + var(--spacing) * 0.5 + 1.2rem);
+            }
+
+            this #banner {
+                border-radius: 0;
+                top: 0;
+                left: 0;
+                width: 100%;
+                padding: calc(var(--spacing) * 0.5);
+            }
+        }
+
+        @media md- {
+            this > div,
+            #menu {
+                flex-direction: column;
+            }
+
+            this #menu {
+                display: none;
+            }
+
+            this > div > div {
+                display: none;
+            }
+
+            this #menu-toggle {
+                display: block;
+                position: absolute;
+                top: calc(var(--spacing) + 2.2rem);
+                right: calc(var(--spacing) * 0.5);
+            }
+
+            #menu-toggle:checked + #menu {
+                display: flex;
+                background-color: var(--bg);
+                width: 100vw;
+                height: auto;
+                padding: 2.5rem;
+            }
+        }
     </style>
 
     <div>
+        <a id="banner" href="/cine_barato">Descubre o festival Cine Barato</a>
         <a href="/">
             <h1>CineMa<span id="alt">zarelos</span></h1>
         </a>
         <span></span>
-        <a href="/peliculas">Películas</a>
-        <!-- TODO: Blog <a href="/blog">Blog</a> -->
-        <a href="/sobre_nos">Sobre nós</a>
-        <a
-            href="https://www.instagram.com/cinemazarelos"
-            target="_blank"
-            aria-label="Instagram"
-        >
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="icon icon-tabler icon-tabler-brand-instagram"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                stroke-width="2"
-                stroke="currentColor"
-                fill="none"
-                stroke-linecap="round"
-                stroke-linejoin="round"
+        <input type="checkbox" id="menu-toggle" />
+        <div id="menu">
+            <a href="/peliculas">Películas</a>
+            <!-- TODO: Blog <a href="/blog">Blog</a> -->
+            <a href="/sobre_nos">Sobre nós</a>
+            <a
+                href="https://www.instagram.com/cinemazarelos"
+                target="_blank"
+                aria-label="Instagram"
             >
-                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                <rect x="4" y="4" width="16" height="16" rx="4" />
-                <circle cx="12" cy="12" r="3" />
-                <line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
-            </svg>
-        </a>
-        <a
-            href="https://www.filmaffinity.com/es/userreviews.php?user_id=5661081"
-            target="_blank"
-            aria-label="Filmaffinity"
-        >
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="icon icon-tabler icon-tabler-brand-instagram"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                stroke-width="2"
-                stroke="currentColor"
-                fill="none"
-                stroke-linecap="round"
-                stroke-linejoin="round"
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="icon icon-tabler icon-tabler-brand-instagram"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    stroke-width="2"
+                    stroke="currentColor"
+                    fill="none"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <rect x="4" y="4" width="16" height="16" rx="4" />
+                    <circle cx="12" cy="12" r="3" />
+                    <line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
+                </svg>
+            </a>
+            <a
+                href="https://www.filmaffinity.com/es/userreviews.php?user_id=5661081"
+                target="_blank"
+                aria-label="Filmaffinity"
             >
-                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                <rect x="4" y="4" width="16" height="16" rx="2" />
-                <line x1="8" y1="4" x2="8" y2="20" />
-                <line x1="16" y1="4" x2="16" y2="20" />
-                <line x1="4" y1="8" x2="8" y2="8" />
-                <line x1="4" y1="16" x2="8" y2="16" />
-                <line x1="4" y1="12" x2="20" y2="12" />
-                <line x1="16" y1="8" x2="20" y2="8" />
-                <line x1="16" y1="16" x2="20" y2="16" />
-            </svg>
-        </a>
-        <a
-            href="https://letterboxd.com/cinemazarelos"
-            target="_blank"
-            aria-label="Letterboxd"
-        >
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="icon icon-tabler icon-tabler-brand-instagram"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                stroke-width="2"
-                stroke="currentColor"
-                fill="none"
-                stroke-linecap="round"
-                stroke-linejoin="round"
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="icon icon-tabler icon-tabler-brand-instagram"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    stroke-width="2"
+                    stroke="currentColor"
+                    fill="none"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <rect x="4" y="4" width="16" height="16" rx="2" />
+                    <line x1="8" y1="4" x2="8" y2="20" />
+                    <line x1="16" y1="4" x2="16" y2="20" />
+                    <line x1="4" y1="8" x2="8" y2="8" />
+                    <line x1="4" y1="16" x2="8" y2="16" />
+                    <line x1="4" y1="12" x2="20" y2="12" />
+                    <line x1="16" y1="8" x2="20" y2="8" />
+                    <line x1="16" y1="16" x2="20" y2="16" />
+                </svg>
+            </a>
+            <a
+                href="https://letterboxd.com/cinemazarelos"
+                target="_blank"
+                aria-label="Letterboxd"
             >
-                <g transform="matrix(1,0,0,1,0.28094,0.108175)">
-                    <circle cx="5.254" cy="11.892" r="4.395" />
-                </g>
-                <g transform="matrix(1,0,0,1,6.79829,0.108175)">
-                    <circle cx="5.254" cy="11.892" r="4.395" />
-                </g>
-                <g transform="matrix(1,0,0,1,13.3156,0.108175)">
-                    <circle cx="5.254" cy="11.892" r="4.395" />
-                </g>
-            </svg>
-        </a>
-        <a id="banner" href="/cine_barato">Descubre o festival Cine Barato</a>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="icon icon-tabler icon-tabler-brand-instagram"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    stroke-width="2"
+                    stroke="currentColor"
+                    fill="none"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <g transform="matrix(1,0,0,1,0.28094,0.108175)">
+                        <circle cx="5.254" cy="11.892" r="4.395" />
+                    </g>
+                    <g transform="matrix(1,0,0,1,6.79829,0.108175)">
+                        <circle cx="5.254" cy="11.892" r="4.395" />
+                    </g>
+                    <g transform="matrix(1,0,0,1,13.3156,0.108175)">
+                        <circle cx="5.254" cy="11.892" r="4.395" />
+                    </g>
+                </svg>
+            </a>
+        </div>
     </div>
 </div>
diff --git a/templates/paxinas/inicio.html b/templates/paxinas/inicio.html
index 6073513..f6f5500 100644
--- a/templates/paxinas/inicio.html
+++ b/templates/paxinas/inicio.html
@@ -19,7 +19,7 @@
             left: 0;
             height: 40rem;
             width: 100%;
-            z-index: -1;
+            z-index: -100;
         }
     </style>
 </div>
@@ -39,7 +39,7 @@
             flex: 50%;
         }
 
-        @media sm- {
+        @media md- {
             this { flex-direction: column; }
         }
     </style>