diff --git a/public/shared/der.png b/public/shared/der.png
index c3be071..65a825f 100644
Binary files a/public/shared/der.png and b/public/shared/der.png differ
diff --git a/public/shared/dern.png b/public/shared/dern.png
index 10d81ed..9584fbc 100644
Binary files a/public/shared/dern.png and b/public/shared/dern.png differ
diff --git a/public/shared/logoDerPastel.png b/public/shared/logoDerPastel.png
new file mode 100644
index 0000000..1628085
Binary files /dev/null and b/public/shared/logoDerPastel.png differ
diff --git a/src/app/amparo/page.tsx b/src/app/amparo/page.tsx
index 69f0e72..10d61ae 100644
--- a/src/app/amparo/page.tsx
+++ b/src/app/amparo/page.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import Image from 'next/image'
 import { cartoons } from '../../../public/amparo'
 import amparoIcon from '../../../public/shared/amparo.png'
-import SiteMapFooter from '../components/SiteMapFooter'
+// import SiteMapFooter from '../components/SiteMapFooter'
 import { Metadata } from 'next'
 
 export const metadata: Metadata = {
@@ -143,7 +143,7 @@ const Amparo = () => {
         </div>
       </section>
       <section className='px-[5vw] mx-auto bg-der-black border-t-2 border-t-white'>
-        <SiteMapFooter/>
+        {/* <SiteMapFooter/> */}
       </section>
     </main>
   )
diff --git a/src/app/casos/[id]/page.tsx b/src/app/casos/[id]/page.tsx
index 73fb4a9..45863b9 100644
--- a/src/app/casos/[id]/page.tsx
+++ b/src/app/casos/[id]/page.tsx
@@ -38,18 +38,18 @@ const ID = ({ params }: { params: { id: string } }) => {
           ¿SABÍAS QUE EN ARGENTINA <br /> <span className="font-bold">HAY UNA MANERA SEGURA DE REPORTAR VULNERABILIDADES INFORMÁTICAS?</span>
         </h1>
         <div className="flex flex-row gap-4 text-lg my-3">
-          <a href="#reporta" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 my-2 bg-[#CC4356] text-white w-[300px] text-center font-extrabold">
-            ¿CÓMO REPORTAR?
+          <a href="#reporta" type="button" className="flex items-center justify-center border-2 border-[#CC4356] rounded-xl p-2 my-2 bg-[#CC4356] text-white w-[300px] text-center font-extrabold">
+            <p>¿QUÉ Y CÓMO REPORTAR?</p>
           </a>
-          <a href="#reporta" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 my-2 bg-[#2D2D2D] text-[#CC4356] w-[300px] text-center font-extrabold">
-            CASOS
+          <a href="#casos" type="button" className="flex items-center justify-center border-2 border-[#CC4356] rounded-xl p-2 my-2 bg-[#2D2D2D] text-[#CC4356] w-[300px] text-center font-extrabold">
+            <p>CASOS</p>
           </a>
         </div>
       </header>
 
       <section className='bg-[#F1F1F1] py-[3vh] h-4/6'>
-        <h2 className='font-nippo text-5xl bg-[#CC4356] py-4 pl-14 pr-5 inline-block font-extrabold'>LLEGÓ TARDE PARA ELLOS</h2>
-        <p className='font-nippo text-der-black text-xl pl-12 my-4 font-medium'>
+        <h2 className='font-nippo text-5xl bg-[#CC4356] py-4 pl-10 sm:pl-14 pr-5 inline-block font-extrabold text-white'>LLEGÓ TARDE PARA ELLOS</h2>
+        <p className='font-nippo text-der-black text-xl px-10 sm:pl-12 my-4 font-medium'>
           TE CONTAMOS QUIÉNES SON Y CUÁL ES SU HISTORIA
         </p>
         <CaseSelector cases={cases} id={id} />
diff --git a/src/app/casos/components/CaseSelector.tsx b/src/app/casos/components/CaseSelector.tsx
index dc0d96d..23c8def 100644
--- a/src/app/casos/components/CaseSelector.tsx
+++ b/src/app/casos/components/CaseSelector.tsx
@@ -14,18 +14,18 @@ const CaseSelector = ({ id, cases }: { id?: string, cases: any }) => {
   // }, [id])
 
   return (
-    <div className="flex flex-row flex-wrap justify-center">
+    <div className="flex flex-row flex-wrap justify-center" id="casos">
       {
         cases.map((c: any) => {
           return (
             <Link href={`/casos/${c.id}`} key={c.id} scroll={false} className={`grayscale hover:grayscale-0 ${id === c.id ? 'grayscale-0' : ''} m-2 shadow-lg rounded-lg overflow-hidden`}>
-              <div className="relative w-[385px] max-[390px]:w-[95%] ">
-                <p className='max-w-[385px] font-nippo z-10 absolute bottom-4 mx-5 text-3xl font-extrabold'>{c.name}</p>
+              <div className="relative w-[385px] max-[390px]:w-[88vw]">
+                <p className='flex justify-center absolute w-full font-nippo z-10 bottom-4 text-3xl font-extrabold text-center text-white'>{c.name}</p>
                 <Image
                   alt={c.name}
                   src={c.avatar}
                   placeholder="blur"
-                  className='min-h-full min-w-full'
+                  className='min-h-full min-w-full object-cover'
                 />
               </div>
             </Link>
diff --git a/src/app/casos/components/HowToReport.tsx b/src/app/casos/components/HowToReport.tsx
index 0172e5e..39de8d0 100644
--- a/src/app/casos/components/HowToReport.tsx
+++ b/src/app/casos/components/HowToReport.tsx
@@ -3,16 +3,16 @@ import { otherLogos } from '~/reporta/'
 
 const HowToReport = () => {
     return (
-        <section className='bg-[#2D2D2D] py-[3vh] h-4/6'>
-            <h2 className='font-nippo text-5xl bg-[#008BB4] py-4 pl-14 pr-5 inline-block font-extrabold w-[90%] max-[375px]:text-3xl lg:w-auto mb-12'>ENTONCES, <br />
+        <section className='bg-[#2D2D2D] py-[3vh] h-4/6'id='reporta'>
+            <h2 className='font-nippo text-5xl bg-[#008BB4] py-4 px-5 sm:pl-14 inline-block font-extrabold w-[90%] max-[375px]:text-3xl lg:w-auto mb-12'>ENTONCES, <br />
                 ¿QUÉ Y CÓMO PUEDO REPORTAR?
             </h2>
 
             <div className="flex flex-col justify-center items-center">
-                <p className='text-left w-[850px] text-xl max-[856px]:w-[600px] max-[610px]:w-[310px]'>
+                <p className='text-left w-[850px] text-xl max-[856px]:w-[600px] max-[610px]:w-[90vw] mx-auto'>
                 La Fundación Via Libre recibe informes sobre fallos en aplicaciones que puedan afectar los derechos de las personas, especialmente la seguridad de sus datos personales. Si encuentras vulnerabilidades, como la posibilidad de extracción o modificación no autorizada de datos, o identificas versiones obsoletas o inseguras de software, este es el lugar para informarlo.
                 </p>
-                <div className='w-[850px] h-auto bg-[#D9D9D9] flex flex-col items-center rounded-md my-10 p-6 max-[856px]:w-[600px] max-[610px]:w-[310px]'>
+                <div className='w-[850px] h-auto bg-[#D9D9D9] flex flex-col items-center rounded-md my-10 p-6 max-[856px]:w-[600px] max-[610px]:w-[90vw] mx-auto'>
                     <Image
                         src={otherLogos.lupa}
                         alt="Reportá logo"
@@ -20,12 +20,12 @@ const HowToReport = () => {
                         height={135}
                         className='my-8'
                     />
-                    <p className='uppercase text-2xl font-bold text-center px-4 text-der-black'>
+                    <p className='uppercase text-lg font-bold text-center px-4 text-der-black'>
                         Todos los esfuerzos técnicos son importantes para conservar datos personales a través de los reportes realizados
                     </p>
 
                     <a href="/reporta" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 mt-4 bg-[#CC4356] text-white w-[300px] text-center text-lg font-bold">
-                        ¿CÓMO REPORTAR?
+                        ¿QUÉ Y CÓMO REPORTAR?
                     </a>
                 </div>
             </div>
diff --git a/src/app/casos/page.tsx b/src/app/casos/page.tsx
index d8fdea4..99a8328 100644
--- a/src/app/casos/page.tsx
+++ b/src/app/casos/page.tsx
@@ -17,18 +17,18 @@ const Casos = () => {
           ¿SABÍAS QUE EN ARGENTINA <br /> <span className="font-bold">HAY UNA MANERA SEGURA DE REPORTAR VULNERABILIDADES INFORMÁTICAS?</span>
         </h1>
         <div className="flex flex-row gap-4 text-lg my-3">
-          <a href="#reporta" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 my-2 bg-[#CC4356] text-white w-[300px] text-center font-extrabold">
-            ¿CÓMO REPORTAR?
+          <a href="#reporta" type="button" className="flex items-center justify-center border-2 border-[#CC4356] rounded-xl p-2 my-2 bg-[#CC4356] text-white w-[300px] text-center font-extrabold">
+            <p>¿QUÉ Y CÓMO REPORTAR?</p>
           </a>
-          <a href="#reporta" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 my-2 bg-[#2D2D2D] text-[#CC4356] w-[300px] text-center font-extrabold flex items-center justify-center">
-            CASOS
+          <a href="#casos" type="button" className="flex items-center justify-center border-2 border-[#CC4356] rounded-xl p-2 my-2 bg-[#2D2D2D] text-[#CC4356] w-[300px] text-center font-extrabold">
+            <p>CASOS</p>
           </a>
         </div>
       </header>
 
       <section className='bg-[#F1F1F1] py-[3vh] h-4/6'>
-        <h2 className='font-nippo text-6xl bg-[#CC4356] py-4 pl-[4vw] md:pl-14 pr-5 inline-block font-extrabold max-[500px]:text-4xl max-[375px]:text-3xl'>LLEGÓ TARDE PARA ELLOS</h2>
-        <p className='font nippo text-der-black text-xl pl-12 my-4 font-medium'>
+        <h2 className='font-nippo text-5xl bg-[#CC4356] py-4 pl-10 sm:pl-14 pr-5 inline-block font-extrabold text-white'>LLEGÓ TARDE PARA ELLOS</h2>
+        <p className='font-nippo text-der-black text-xl px-10 sm:pl-12 my-4 font-medium'>
           TE CONTAMOS QUIÉNES SON Y CUÁL ES SU HISTORIA
         </p>
         <CaseSelector cases={cases} />
diff --git a/src/app/components/CollapseNavBar.tsx b/src/app/components/CollapseNavBar.tsx
new file mode 100644
index 0000000..3f4aae3
--- /dev/null
+++ b/src/app/components/CollapseNavBar.tsx
@@ -0,0 +1,45 @@
+'use client'
+
+import { useState } from "react"
+import NavLinks from "./NavLinks"
+import der from "~/shared/logoDerPastel.png"
+import Image from "next/image"
+import Link from "next/link"
+
+const CollapseNavBar = () => {
+    const [showMenu, setShowMenu] = useState(false)
+    let burgerMenuClass = 'hidden'
+    const navElemsSize = "w-8 h-8"
+
+    if (!showMenu) burgerMenuClass = 'hidden opacity-0'
+    else burgerMenuClass = 'flex flex-col items-center content-center z-20 fixed top-0 left-0 bg-der-black w-full h-[100vh] opacity-100'
+
+    return (
+        <>
+            <nav className="flex justify-between sm:hidden bg-black p-4">
+                <Link href={"/"} className={navElemsSize}>
+                    <Image src={der} alt="Inicio" />
+                </Link>
+                <button onClick={() => setShowMenu(prev => !prev)}>
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={navElemsSize}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+                    </svg>
+                </button>
+            </nav>
+            <div className={burgerMenuClass + ' transition-opacity delay-0 duration-500'} onClick={(event) => {
+                event.stopPropagation()
+                setShowMenu(false)
+            }}>
+                <button className="self-end p-4" onClick={() => setShowMenu(false)}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-7 h-7">
+                        <path fillRule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clipRule="evenodd" />
+                    </svg>
+                </button>
+                <ul className="font-raleway m-auto uppercase text-4xl [&_li]:mb-[3vh]">
+                    <NavLinks />
+                </ul>
+            </div>
+        </>
+    )
+}
+export default CollapseNavBar
\ No newline at end of file
diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
index 72f6768..d1d5367 100644
--- a/src/app/components/Footer.tsx
+++ b/src/app/components/Footer.tsx
@@ -13,29 +13,26 @@ const Footer = () => {
   const darkTheme = isDarkTheme(pathname)
 
   return (
-    <footer className={`${darkTheme ? 'bg-[#212121] text-white' : 'bg-[#F1F1F1] text-black'} flex flex-row justify-around flex-wrap gap-y-5 py-3 max-[425px]:flex-col max-[425px]:items-center`}>
-      <div>
-        <Link href="https://democraciaenred.org" target="_blank">
+    <footer className={`${darkTheme ? 'bg-[#212121] text-white' : 'bg-[#F1F1F1] text-black'} flex flex-row justify-around flex-wrap gap-y-5 py-3 max-[780px]:flex-col max-[780px]:items-center`}>
+      <Link href="https://democraciaenred.org" target="_blank">
+        <div className="w-full max-w-[300px] h-[54px] flex">
           {
             darkTheme ?
               <Image
                 alt="DER Logo"
                 src={sharedImages.der}
-                width={300}
-                height={54}
+                className="m-auto"
                 priority
               /> :
               <Image
                 alt="DER Logo"
                 src={sharedImages.dern}
-                width={300}
-                height={54}
+                className="m-auto"
                 priority
               />
           }
-        </Link>
-      </div>
-
+        </div>
+      </Link>
       <div className="flex flex-row gap-5 justify-center items-center content-center">
         <Link href="https://twitter.com/fundacionDER" target="_blank">
           <Image
diff --git a/src/app/components/LandingArticles.tsx b/src/app/components/LandingArticles.tsx
index 7387c69..c55ceee 100644
--- a/src/app/components/LandingArticles.tsx
+++ b/src/app/components/LandingArticles.tsx
@@ -30,7 +30,7 @@ const LandingArticles = async () => {
                         {articles.map((story: ISbStoryData) => <EventsCard key={story.id} story={story} />)}
                     </div>
                     <Link href="/novedades" type="button" className="block border-full border-[#CC4356] rounded-full py-4 px-16 bg-[#CC4356] text-white w-fit text-center uppercase text-lg mx-auto mt-[4vw]">
-                        <span className="uppercase">conocé todas las novedades</span>
+                        <span className="uppercase">Más novedades</span>
                     </Link>
                 </>)
             }
diff --git a/src/app/components/LandingTopics.tsx b/src/app/components/LandingTopics.tsx
index 04df0c0..88c331a 100644
--- a/src/app/components/LandingTopics.tsx
+++ b/src/app/components/LandingTopics.tsx
@@ -28,10 +28,10 @@ const Card = ({ backgroundColor, title, description }: { backgroundColor: string
 
 const LandingTopics = () => {
   return (
-    <div className='bg-white text-black text-center flex flex-col items-center justify-center py-12 w-full'>
+    <div className='bg-white text-black text-center flex flex-col items-center justify-center py-12 w-full border-t-[#CC4356] border-t-4'>
       <h2 className='font-bold text-4xl'>¿QUÉ ES #DATOSENFUGA?</h2>
       <p className='uppercase'>Cuidar tus datos no solo depende de que tengas una contraseña segura</p>
-      <div className='flex flex-row flex-wrap justify-around gap-4 my-12 text-white w-1/2'>
+      <div className='flex flex-row flex-wrap justify-around gap-4 my-12 text-white'>
         <div className="h-[260px] w-[389px]">
           <Card
             backgroundColor="#CC4356"
diff --git a/src/app/components/NavBar.tsx b/src/app/components/NavBar.tsx
index a3e844f..f1e04ca 100644
--- a/src/app/components/NavBar.tsx
+++ b/src/app/components/NavBar.tsx
@@ -1,12 +1,16 @@
+import CollapseNavBar from "./CollapseNavBar"
 import NavLinks from "./NavLinks"
 
 const NavBar = () => {
     return (
-        <nav className="bg-black p-4">
-            <ul className="flex justify-center flex-wrap gap-5 uppercase font-inter">
-                <NavLinks />
-            </ul>
-        </nav>
+        <>
+            <nav className="hidden sm:block bg-black p-4">
+                <ul className="flex justify-center flex-wrap gap-5 uppercase font-inter">
+                    <NavLinks />
+                </ul>
+            </nav>
+            <CollapseNavBar/>
+        </>
     )
 }
 export default NavBar
\ No newline at end of file
diff --git a/src/app/components/SiteMapFooter.tsx b/src/app/components/SiteMapFooter.tsx
index 25d83c0..8982da1 100644
--- a/src/app/components/SiteMapFooter.tsx
+++ b/src/app/components/SiteMapFooter.tsx
@@ -7,13 +7,13 @@ const SiteMapFooter = () => {
     return (
         <div className="flex flex-col gap-10 sm:justify-between sm:items-center sm:flex-row sm:gap-5 p-6">
             <div>
-                <p className='mb-4 text-xl font-roboto'>Un proyecto de</p>
+                <p className='mb-4 text-xl font-roboto text-white'>Un proyecto de</p>
                 <div className="flex flex-wrap items-center justify-between sm:justify-normal gap-7">
                     <Image src={derLogo} width={2724} height={742} alt='Democracia en Red' className='w-[176px]' />
                     <Image src={odiaLogo} width={130.35} height={29.61} alt='Democracia en Red' className='w-[130px]' />
                 </div>
             </div>
-            <ul className="grid grid-cols-3 sm:grid-cols-2 justify-items-center sm:justify-items-start capitalize text-lg whitespace-nowrap gap-4 sm:gap-x-14 md:mr-[10vw] lg:mr-[15vw]">
+            <ul className="grid grid-cols-3 sm:grid-cols-2 justify-items-center sm:justify-items-start capitalize text-lg whitespace-nowrap gap-4 sm:gap-x-14 md:mr-[10vw] lg:mr-[15vw] text-white">
                 <NavLinks />
             </ul>
         </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index fd81e88..8415d69 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -10,18 +10,18 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --foreground-rgb: 255, 255, 255;
+    /* --foreground-rgb: 255, 255, 255;
     --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0; */
+    --foreground-rgb: 0, 0, 0;
+    --background-start-rgb: 214, 219, 220;
+    --background-end-rgb: 255, 255, 255;
   }
 }
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
+  background: linear-gradient(to bottom,
       transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
+      rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3a72595..0007416 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -12,9 +12,9 @@ export default function Home() {
 
   return (
     <main className='bg-der-black'>
-      <div className="relative text-black">
-        <video className='w-full' autoPlay loop muted>
-          <source src={`https://democraciaenred.github.io/datosenfuga-next/home/background.mp4`} type="video/mp4" className='w-full' />
+      <div className="relative text-black h-[80vh]">
+        <video className='object-cover object-center w-full h-full' autoPlay loop muted>
+          <source src={`https://democraciaenred.github.io/datosenfuga-next/home/background.mp4`} type="video/mp4" />
         </video>
         <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full text-center">
           <h1 className="text-6xl font-extrabold mb-4 max-md:text-4xl">#DATOSENFUGA</h1>
@@ -82,12 +82,12 @@ export default function Home() {
         <div className="w-1/2 h-full bg-center bg-no-repeat bg-cover max-lg:w-full"  style={{ backgroundImage: `url(https://democraciaenred.github.io/datosenfuga-next/home/DER.png)`}}>
 
         </div>
-        <div className="w-full lg:w-[50%] py-2 my-11 px-11 max-lg:w-full">
+        <div className="flex flex-col justify-center gap-[2vw] w-full lg:w-[50%] max-lg:w-full p-[2vw]">
           <h2 className='text-4xl font-bold text-[#4C4C4E]'>Acerca de</h2>
-          <p className="text-sm my-8">
+          <p className="text-sm">
             Queremos que el Estado asegure estándares de ciberseguridad y que atienda a las alarmas que suenan por todos lados. Queremos que el Estado deje de perseguir penalmente a quienes identifican, denuncian y reportan vulnerabilidades informáticas.
           </p>
-          <Link href="/about" type="button" className="border-full border-[#CC4356] rounded-full py-4 px-16 bg-[#CC4356] text-white w-auto text-center uppercase text-lg">
+          <Link href="/about" type="button" className="self-start border-full border-[#CC4356] rounded-full py-4 px-16 bg-[#CC4356] text-white w-auto text-center uppercase text-lg">
             <span>Conocé más  </span>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className=" align-text-bottom inline w-5 h-5">
               <path fillRule="evenodd" d="M16.72 7.72a.75.75 0 011.06 0l3.75 3.75a.75.75 0 010 1.06l-3.75 3.75a.75.75 0 11-1.06-1.06l2.47-2.47H3a.75.75 0 010-1.5h16.19l-2.47-2.47a.75.75 0 010-1.06z" clipRule="evenodd" />
diff --git a/src/app/reporta/page.tsx b/src/app/reporta/page.tsx
index db93dee..d99658c 100644
--- a/src/app/reporta/page.tsx
+++ b/src/app/reporta/page.tsx
@@ -17,12 +17,12 @@ const Reportes = () => {
                     priority
                 />
                 <h1 className="text-3xl font-extrabold text-der-black my-5">¿ENCONTRASTE UNA FALLA DE SEGURIDAD Y TEMÉS REPORTARLA?</h1>
-                <a href="#reporta" type="button" target="_blank" rel="noopener noreferrer" className="border-2 border-black rounded-xl p-2 my-2 bg-[#212121] text-white w-[300px] text-center">
+                <a href="#reporta" type="button" target="_blank" rel="noopener noreferrer" className="border-2 border-black rounded-xl p-2 my-2 bg-[#212121] text-white w-full max-w-[270px] text-center">
                     ¿CÓMO REPORTAR SEGURO?
                 </a>
             </header>
             <section className="text-center bg-[#212121]" id="reporta">
-                <div className="w-[85vw] mx-auto py-[3vw]">
+                <div className="w-[85vw] mx-auto py-6 sm:py-[3vw]">
                     <p className="text-lg text-center max-w-[1000px] mx-auto">
                         El sitio desarrollado por <span className="font-extrabold">Fundación Via Libre</span> con un sistema basado en <span className="font-extrabold">GlobalLeaks</span>, permite informar de forma anónima y protegida sobre fallas en <span className="font-extrabold">sistemas informáticos</span> que afecten los derechos de las personas. Podés reportarlas acá para que sean reparadas.
                     </p>
@@ -51,7 +51,7 @@ const Reportes = () => {
                             )
                         })}
                     </div>
-                    <a href="https://reportes.vialibre.ngo" target="_blank" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 my-4 bg-[#CC4356] text-white w-[300px] text-center text-lg font-bold">
+                    <a href="https://reportes.vialibre.ngo" target="_blank" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 my-4 bg-[#CC4356] text-white w-full max-w-[270px] text-center text-lg font-bold">
                         REPORTÁ
                     </a>
 
@@ -82,7 +82,7 @@ const Reportes = () => {
                             )
                         })}
                     </div>
-                    <div className="w-[85vw] mx-auto text-start text-xl my-6">
+                    <div className="w-[75vw] sm:w-[85vw] mx-auto text-start text-xl my-6">
                         <ul className="list-disc">
                             <li>
                                 Aunque no conservemos datos identificatorios, <span className="font-extrabold">se recomienda encarecidamente usar el</span> <span className="font-extrabold underline">navegador TOR</span> <span className="font-extrabold">y acceder al sitio a través del URL dot-onion</span> para mayor anonimato.
@@ -110,9 +110,9 @@ const Reportes = () => {
                         </ul>
                     </div>
                 </div>
-                <div className="bg-[#D9D9D9] text-der-black py-[3vw]">
+                <div className="bg-[#D9D9D9] text-der-black py-6 sm:py-[3vw]">
                     <div className="w-[85vw] mx-auto">
-                        <h2 className="py-5 text-3xl font-extrabold uppercase">Entonces, ¿Qué y cómo podes reportar?</h2>
+                        <h2 className="mb-5 text-3xl font-extrabold uppercase">Entonces, ¿Qué y cómo reportar?</h2>
                         <p className="text-left text-xl">
                             La Fundación Via Libre se encarga de recibir reportes sobre defectos en aplicaciones empleadas por organizaciones públicas o privadas que afecten derechos de las personas. En particular, cuando se ponen en riesgo sus datos personales. Así, si encontraste una falla en una aplicación que permite que alguien no autorizado extraiga o modifique datos, tuyos o de otras personas, este es el lugar para poder informarlo. También sirve para informar sobre vulnerabilidades potenciales, por ejemplo si encontraste que un sitio está corriendo una versión obsoleta (por &quot;obsoleta&quot; entendemos una versión que ya no recibe soporte ni parches de seguridad) o insegura de software.
                         </p>
@@ -130,20 +130,20 @@ const Reportes = () => {
                                 </li>
                             </ol>
                         </div>
-                        <a href="https://reportes.vialibre.ngo" target="_blank" rel="noopener noreferrer" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 my-4 bg-[#CC4356] text-white w-[300px] text-center text-lg font-bold">
+                        <a href="https://reportes.vialibre.ngo" target="_blank" rel="noopener noreferrer" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 my-4 bg-[#CC4356] text-white w-full max-w-[300px] text-center text-lg font-bold">
                             HACÉ TU REPORTE ANÓNIMO
                         </a>
 
                         <hr className="border-black border-0.5 my-6" />
 
-                        <h2 className="py-5 text-3xl font-extrabold">¿QUÉ HACEMOS CON TUS REPORTES?</h2>
+                        <h2 className="mb-5 text-3xl font-extrabold">¿QUÉ SE HACE CON TUS REPORTES?</h2>
                         <p className="text-xl text-left w-[85vw] mx-auto">
                             La Fundación Via Libre se encarga de recibir reportes anónimos sobre fallas de ciberseguridad. Trabajamos para proteger la identidad de quienes nos informan y tomamos medidas para asegurarnos de que se les dé el seguimiento adecuado. En caso de ser relevante, presentamos los informes a organismos competentes, además de explorar mecanismos de reclamo judiciales. Tu seguridad y confidencialidad son nuestra prioridad.
                         </p>
                     </div>
                 </div>
-                <div className="bg-[#212121] py-[3vw]">
-                    <h2 className="py-5 text-3xl font-extrabold">SOBRE EL PROYECTO</h2>
+                <div className="bg-[#212121] py-6 sm:py-[3vw]">
+                    <h2 className="mb-5 text-3xl font-extrabold">SOBRE EL PROYECTO</h2>
                     <p className="text-xl text-left w-[85vw] mx-auto">
                         Desde Fundación Vía Libre, ODIA y Democracia en Red realizamos todos los esfuerzos técnicos para no conservar datos personales a través de los reportes recibidos. Tal como se puede consultar en la sección “¿Cómo te protegemos?”, la información que envíes es absolutamente anónima para nosotros: la plataforma está diseñada de forma tal que únicamente conserva el contenido presentado en la denuncia y genera en consecuencia un código único para identificarla, sin quedar asociada a quien la realiza. No accedemos a ni conservamos registros que permitan individualizar o identificar a quienes completan el formulario: no empleamos ningún mecanismo para trazar tu conexión ni guardamos registro de las direcciones de red desde las que te hayas conectado o cualquier otro metadato que pueda identificarte. De todas formas, recomendamos como precaución general no incluir información personal y, en lo posible, acceder a través del navegador TOR.
                     </p>