diff --git a/css/styles.css b/css/styles.css
index e0f7b05..5f11c3f 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -119,6 +119,22 @@ html[data-theme="dark"] {
   color-scheme: dark;
 }
 
+.logo-light {
+  display: block;
+}
+
+.logo-dark {
+  display: none;
+}
+
+[data-theme="dark"] .logo-light {
+  display: none;
+}
+
+[data-theme="dark"] .logo-dark {
+  display: block;
+}
+
 /* ============================================================
    Reset
    ============================================================ */
diff --git a/partials/footer.html b/partials/footer.html
index 776b85d..0794280 100644
--- a/partials/footer.html
+++ b/partials/footer.html
@@ -3,13 +3,9 @@
     <div class="foot-grid">
       <div>
         <div class="logo-mark" style="color:var(--c-mist);">
-          <svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="height:30px;">
-            <path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
-            <path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
-          </svg>
-          <span class="wordmark" style="color:var(--c-mist);">amor&amp;roma</span>
+          <img src="./assets/logos/logo-claro.svg" alt="Amor y Roma — inicio" style="height:80px; width:auto;">
         </div>
-        <p style="margin-top:1.5rem; color:#c9c2d6; font-style:italic; font-family:var(--font-display);">Marcas con esencia, construidas con estrategia.</p>
+        <p style="margin-top:0.5rem; color:#c9c2d6; font-style:italic; font-family:var(--font-display);">Marcas con esencia, construidas con estrategia.</p>
       </div>
       <div>
         <h5>Navegación</h5>
diff --git a/partials/header.html b/partials/header.html
index 4d4c0db..372dbb1 100644
--- a/partials/header.html
+++ b/partials/header.html
@@ -1,11 +1,8 @@
 <header class="site-header">
   <div class="container nav-row">
     <a href="index.html" class="logo-mark" aria-label="Amor y Roma — inicio">
-      <svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-        <path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
-        <path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
-      </svg>
-      <span class="wordmark">amor&amp;roma</span>
+      <img class="logo-light" src="./assets/logos/logo-ciruela.svg" alt="Amor y Roma — inicio" style="height:50px; width:auto;">
+      <img class="logo-dark" src="./assets/logos/logo-claro.svg" alt="Amor y Roma — inicio" style="height:50px; width:auto;">
     </a>
     <nav class="nav-links" aria-label="Navegación principal">
       <a href="index.html" aria-current="page">Inicio</a>