:root {
  --bg: #2f2f31;
  --surface: #3a3a3c;
  --text: #e6e6e7;
  --muted: #b5b5b8;
  --accent: #ff7e39;
  --panel-border: #4a4a4d;
  --panel-label-bg: #3b3b3d;
  --radius: 10px;
  --shadow: 0 12px 28px rgba(0, 0, 0, .32);
  --maxw: 1600px;
  --logo-h: 40px;
  --logo-h-mobile: 32px;
  --menu-font-size: 14px;
  --menu-font-weight: 400;
  --left-width: 52%;
  --right-width: 40%;
  --right-align: flex-end;
  --right-gap: 12px;
  --header-gap: 12px;
  --icon-size: 16px;
  --icon-gap: 8px;
  --bp-2cols: 920px;
  --bp-mobile: 620px
}

* {
  box-sizing: border-box
}

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

.top-spacer {
  height: 40px;
  width: 100%;
  display: block;
}

body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6
}

img {
  max-width: 100%;
  height: auto;
  display: block
}

a {
  color: inherit;
  text-decoration: none
}

a:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}

.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  background: #000;
  color: #fff;
  padding: 8px 12px;
  z-index: 999
}

.skip-link:focus {
  left: 12px;
  top: 12px
}

.site-header {
  position: relative;
  top: 0;
  z-index: 60;
  background: var(--bg)
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--header-gap);
  padding-block: 10px
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 var(--left-width);
  align-items: flex-start !important;
  /* Mantiene el logo QUIETO a la izquierda */
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.logo {
  height: var(--logo-h);
  width: auto;
  margin-left: -2px !important;
  display: block;
}

.brand-sub {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: 40px !important;
  /* El "escaln" esttico */
}

.brand-sub .sep {
  opacity: .6
}

.brand-sub-link {
  color: var(--muted);
  text-transform: lowercase;
  padding: 2px 6px;
  border-radius: 6px;
  transition: .15s ease
}

.brand-sub-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08)
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: var(--right-align);
  gap: var(--right-gap);
  flex: 0 0 var(--right-width)
}

.menu-link {
  display: inline-flex;
  align-items: center;
  font-size: var(--menu-font-size);
  font-weight: var(--menu-font-weight);
  padding: 10px 12px;
  border-radius: 8px
}

.ico {
  width: var(--icon-size);
  height: var(--icon-size);
  margin-right: var(--icon-gap);
  display: inline-block;
  vertical-align: -2px;
  color: currentColor
}

.link-presupuesto {
  font-weight: 300;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px dashed transparent
}

.link-presupuesto:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-color: var(--accent)
}

.header-phones {
  display: flex;
  gap: 8px;
  align-items: center
}

.header-phones .sep {
  opacity: .6
}

.phone.menu-link {
  padding: 6px 8px;
  border-radius: 6px
}

.phone.menu-link:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff
}

.nav-toggle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden
}

.nav-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer
}

.menu-text {
  font-weight: 600;
  letter-spacing: .3px
}

.burger {
  width: 22px;
  height: 16px;
  position: relative
}

.burger::before,
.burger::after,
.burger span {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #e6e6e7;
  transition: .2s ease
}

.burger::before {
  top: 0
}

.burger::after {
  bottom: 0
}

.burger span {
  top: 50%;
  transform: translateY(-50%)
}

.nav-toggle-label:hover .burger::before,
.nav-toggle-label:hover .burger::after,
.nav-toggle-label:hover .burger span {
  background: var(--accent)
}

#nav-toggle:checked~.header-row .nav-toggle-label .burger span {
  opacity: 0
}

#nav-toggle:checked~.header-row .nav-toggle-label .burger::before {
  transform: translateY(7px) rotate(45deg)
}

#nav-toggle:checked~.header-row .nav-toggle-label .burger::after {
  transform: translateY(-7px) rotate(-45deg)
}


/* MEN LATERAL */
.offcanvas {
  /* Fija el panel lateral a la ventana, pegado a la derecha y arriba */
  position: fixed;
  right: 0;
  top: 0;

  /* Ocupa toda la altura visible (incluye barras en mviles) y ancho del panel */
  height: 100dvh;
  width: 320px;

  /* Estilos base del panel cerrado (fondo oscuro y texto claro) */
  background: #2f2f31;
  color: var(--text);

  /* Lnea sutil que separa el panel del contenido */
  border-left: 1px solid rgba(255, 255, 255, .08);

  /* Lo "saca" de pantalla hacia la derecha (estado cerrado) */
  transform: translateX(100%);

  /* Transiciones suaves al abrir/cerrar y al invertir colores al abrir */
  transition: transform .25s ease, background .2s ease, color .2s ease;

  /* Sombra para dar profundidad, padding interno y layout vertical con scroll si hace falta */
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
     z-index: 9999;
}


/* Cuando el checkbox #nav-toggle est marcado (men abierto):
   - trae el panel a la vista (translateX(0))
   - invierte a fondo claro y texto oscuro para contraste */
#nav-toggle:checked~.offcanvas {
  transform: translateX(0);
  background: #fff;
  color: #222
}

/* Botn de cierre (la "X") posicionado arriba a la derecha, hereda color, sin borde */
.offcanvas .offcanvas-close {
  position: absolute;
  right: 14px;
  top: 12px;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 22px;
  cursor: pointer
}

/* Lista vertical del men dentro del panel: sin vietas, con espaciado entre items */
.offcanvas .menu {
  list-style: none;
  margin: 36px 0 20px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
      z-index: 10; /* ✅ Mayor que los banners, pero no excesivo */
}

/* Estado hover de cada enlace del men en el panel:
   fondo sutil y color de texto en #b32e0a (tu color de hover) */
.menu-link:hover {
  background: rgba(0, 0, 0, .06);
  color: #b32e0a
}

/* Contenedor del submen:
   se oculta por defecto y se muestra en columna con pequeo gap cuando est abierto */
.submenu {
  list-style: none;
  margin: 6px 0 0;
  padding-left: 12px;
  display: none;
  flex-direction: column;
  gap: 6px
}

/* Botn/cabecera que despliega el submen:
   ocupa todo el ancho, hereda color, usa variables para tipografa del men
   y aade transicin y borde redondeado */
.submenu-toggle {
  width: 100%;
  background: transparent;
  border: none;
  color: inherit;
  font-size: var(--menu-font-size);
  font-weight: var(--menu-font-weight);
  padding: 10px 12px;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: .15s ease;
  position: relative
}

/* Chevron (▸) del submen: se coloca a la derecha, centrado verticalmente, color atenuado */
.submenu-toggle::after {
  content: "▸";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted)
}

/* Cuando el elemento padre tiene la clase .open:
   - muestra el submen (display:flex) */
.has-submenu.open .submenu {
  display: flex
}

/* .y rota el chevron 90 (apuntando hacia abajo),
   adems lo pinta con el color de acento */
.has-submenu.open .submenu-toggle::after {
  transform: translateY(-50%) rotate(90deg);
  color: var(--accent)
}


/* Utility Classes */
.heading {
  margin: 0 0 .6em
}

.heading-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px dashed transparent;
  color: var(--muted);
  transition: .15s ease
}

.heading-link .ico {
  width: 14px;
  height: 14px;
  margin-left: 6px;
  color: currentColor;
  opacity: .8;
  transition: .15s ease
}

.heading-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-color: var(--accent)
}

.heading-link:hover .ico {
  color: var(--accent);
  opacity: 1
}

.intro-text {
  color: var(--muted)
}

.hero-figure {
  width: 100%;
  margin: 0;
  overflow: hidden;
}

.hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* H1/H2/texto enlaces tipo Presupuesto + icono NE */
.heading {
  margin: 0 0 .6em
}

.heading-link {
  display: inline-block;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-weight: 300;
  border-radius: 999px;
  border: 1px dashed transparent;
  color: var(--muted);
  transition: .15s ease
}

.heading-link .ico {
  width: 14px;
  height: 14px;
  margin-left: 6px;
  color: currentColor;
  opacity: .8;
  transition: .15s ease
}

.heading-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-color: var(--accent)
}

.heading-link:hover .ico {
  color: var(--accent);
  opacity: 1
}

.intro-text {
  color: var(--muted)
}

/* Banners 6:7 usando panel-media */
.panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 20px 24px;
    
}

.panel {
  background: var(--surface);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color .15s ease, transform .15s ease;
       
      
}

.panel-link {
  display: block
}

.panel-figure {
  margin: 0
}

.panel-media {
  position: relative
      
}

.panel-media::before {
  content: '';
  display: block;
  aspect-ratio: 6/7
}

.panel-media>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #3a3a3c
}

.panel-label {
  background: var(--panel-label-bg);
  color: #fff;
  text-align: center;
  font-weight: 700;
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  transition: background .15s ease
}

.panel:hover {
  border-color: var(--accent);
  transform: translateY(-2px)
}

.panel:hover .panel-label {
  background: var(--accent)
}

/* Responsive */
@media (max-width: 920px) {
  .panels {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width: 620px) {
  .header-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px
  }

  .logo {
    height: var(--logo-h-mobile)
  }

  .brand-sub-link {
    font-size: 12px;
    padding: 2px 4px
  }

  .header-right {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px
  }

  .nav-toggle-label {
    width: 100%;
    justify-content: center
  }


  .panels {
    grid-template-columns: 1fr;
    gap: 16px
  }
}

/* ===== Hover del men en color #b32e0a ===== */
:root {
  /* Si quieres reutilizar en ms sitios, declara variable */
  --menu-hover-color: #fb7600;
}

/* Enlaces de men y submen (desktop + off-canvas) */
.menu-link:hover,
.submenu-toggle:hover,
.brand-sub-link:hover {
  color: var(--menu-hover-color) !important;
}

/* Off-canvas: anula el hover anterior que pona color #000 */
.offcanvas .menu-link:hover {
  color: var(--menu-hover-color) !important;
  /* opcional: mantn el fondo sutil si te gusta el feedback visual */
  background: rgba(0, 0, 0, .06);
}

/* Telfonos y botn Presupuesto en la cabecera */
.phone.menu-link:hover {
  color: var(--menu-hover-color) !important;
  background: rgba(255, 255, 255, .08);
  /* conserva tu esttica actual */
}

.link-presupuesto:hover {
  color: var(--menu-hover-color) !important;
  border-color: var(--menu-hover-color) !important;
  background: rgba(255, 255, 255, .08);
}

/* Iconos dentro de enlaces (si quieres que tambin cambien) */
.menu-link:hover .ico,
.submenu-toggle:hover .ico,
.phone.menu-link:hover .ico,
.link-presupuesto:hover .ico {
  color: var(--menu-hover-color);
}

/* (Opcional) Enlaces de H1/H2 y texto con icono NE, para coherencia visual */
.heading-link:hover,
.heading-link:hover .ico {
  color: var(--menu-hover-color);
}


/* ===================================================
   ESPACIO
   =================================================== */

.menaje-spacer {
  height: 50px;
}

.menaje-spacer2 {
  height: 300px;
}


/* Ajuste de precisin para alinear el logo con la imagen de abajo */
.header-left {
  padding-left: 0 !important;
  align-items: flex-start !important;
}

.logo {
  /* Si ves que el logo est un milmetro a la derecha de la imagen, 
     ajusta este valor (puedes probar -3px o -4px) */
  margin-left: -2px !important;
  display: block;
}

/* Ttulo recto y fino */
.seo-text .heading,
.seo-text .heading-link {
  font-weight: 300 !important;
  transform: none !important;
  display: inline !important;
  /* Se comporta como texto normal */
  border: none !important;
}

/* =========================================
   RESPONSIVE (MVIL Y TABLET) - VERSIN FINAL UNIFICADA
   ========================================= */

/* 1. AJUSTES PARA TABLETS (Pantallas medianas) */
@media (max-width: 1024px) {
    /* La rejilla de enlaces de Menaje pasa de 7 a 4 columnas */
    .menaje-links .ml-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }
}

/* 2. AJUSTES PARA MVILES (Pantallas pequeas < 620px) */
@media (max-width: 620px) {

    /* --- A. HEADER (Comn para todas las pginas) --- */
    
    .header-row {
        flex-direction: column; /* Apilar todo verticalmente */
        gap: 12px;
        padding-bottom: 10px;
    }

    /* Forzamos al logo a CENTRARSE (anulando el estilo de izquierda de escritorio) */
    .header-left {
        width: 100%;
        align-items: center !important; 
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    .logo {
        margin-left: 0 !important; /* Quita el margen negativo */
        height: var(--logo-h-mobile);
    }

    .brand-sub {
        margin-left: 0 !important; /* Quita el escaln lateral */
        justify-content: center; /* Centra el texto */
        width: 100%;
        margin-top: 5px;
    }

    /* Reducimos un poco el texto de "maquinaria, muebles..." en mvil */
    .brand-sub-link {
        font-size: 12px;
        padding: 4px;
    }

    /* Zona derecha (Telfonos y Men) */
    .header-right {
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .header-phones {
        justify-content: center;
    }

    /* Botn MEN ms grande y fcil de pulsar */
    .nav-toggle-label {
        width: 100%;
        justify-content: center;
        padding: 8px;
        background: rgba(255,255,255,0.05);
        border-radius: 6px;
        margin-top: 5px;
    }

    /* --- B. CONTENIDO PGINA PRINCIPAL (Paneles) --- */
    
    .panels {
        grid-template-columns: 1fr; /* Una sola columna */
        padding: 20px 16px !important;
    }

    /* --- C. CONTENIDO PGINA MENAJE (Enlaces y Botones) --- */
    
    /* 1. Rejilla de enlaces (Bateras, Sartenes...): 2 columnas */
    .menaje-links .ml-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px 10px;
        padding: 0 10px;
    }

    .menaje-links .ml-item {
        align-items: center; /* Centrar items */
        text-align: center;
    }
    
    .menaje-links {
        margin-bottom: 60px;
    }

    /* 2. Botones Grises (Maquinaria, Muebles, Menaje): Uno debajo de otro */
    .menaje-cta .cta-row {
        grid-template-columns: 1fr !important;
        gap: 10px;
        padding: 0 20px;
    }

    .cta-btn {
        width: 100%;
        padding: 12px; /* Ms rea tctil */
    }

    /* --- D. TEXTOS SEO (Ttulos) --- */
    :is(article, aside, nav, section) h1.heading,
    :is(article, aside, nav, section) h2.heading {
        font-size: 22px; 
        text-align: center;
    }
    
    .intro-text {
        text-align: center;
        font-size: 14px;
        padding: 0 10px;
    }
}
/* --- Ajustes: SEO centrado --- */
.seo-text {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.seo-text .heading,
.seo-text .intro-text {
  text-align: left;
}
/* --- Ajustes: bloque SEO centrado y blanco --- */
.seo-text {
  background: #ffffff;
  max-width: 900px;
  margin: 3rem auto;
  padding: 3rem 1.5rem;
  text-align: left;
  box-sizing: border-box;
}

.seo-text .heading,
.seo-text .intro-text {
  text-align: left;
}
/* --- CTA botones (Accesos principales) --- */
.menaje-cta {
  margin: 40px 0;
  padding: 22px 0 28px;
}

.menaje-cta .cta-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 6px;
  background: #5b5b5d;
  color: #e6e6e7;
  text-transform: uppercase;
  letter-spacing: .4px;
  border: 1px solid rgba(255, 255, 255, .14);
}

.cta-btn:hover {
  color: #fff;
  border-color: var(--menu-hover-color, #fb7600);
  background: #6a6a6c;
}

.cta-btn.is-active {
  background: #3a3a3c;
  border-color: var(--menu-hover-color, #fb7600);
}

@media (max-width: 920px) {
  .menaje-cta .cta-row {
    grid-template-columns: 1fr;
  }
}
/* --- CTA centrados (igual que empresa/contacto) --- */
.menaje-cta {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}
/* --- Footer centrado (igual que empresa) --- */
.site-footer {
  text-align: center;
}

.site-footer .container {
  text-align: center;
}
.pasos-compra {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-bottom: 40px;
}

.paso {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
  border-left: 4px solid #ff8c00;
}

.paso-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #ff8c00;
  color: #000;
  font-weight: bold;
  font-size: 20px;
  border-radius: 50%;
  flex-shrink: 0;
}

.paso p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.paso a {
  color: #ff8c00;
  text-decoration: none;
  font-weight: 600;
}

.paso a:hover {
  text-decoration: underline;
}