/* ============================================
   ELECTROFIX — Estilos globales
   Estética: industrial moderna / naranja + negro
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root {
  /* Mantenemos los nombres para que no se rompa nada, pero con los colores del logo AV */
  --naranja: #A11122;           /* El rojo principal del logo */
  --negro: #111111;             /* El negro/gris oscuro del logo */
  
  --gris-oscuro: #1E1E1E;
  --gris-medio: #333333;
  --gris-claro: #F8F8F8;
  --blanco: #FFFFFF;
  
  --texto: #222222;
  --texto-suave: #666666;
  --borde: #E0E0E0;
  
  /* Actualizamos la sombra para que tenga un tinte rojizo sutil */
  --sombra: 0 4px 24px rgba(0,0,0,0.10);  
  
  /* Ajustamos el radio a 4px para que sea más "filoso" como el logo */
  --radio: 4px; 
  --transicion: 0.25s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Barlow', sans-serif;
  background: var(--gris-claro);
  color: var(--texto);
  line-height: 1.6;
  min-height: 100vh;
}

/* ——— HEADER / NAV ——— */
.header {
  background: white;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 3px solid var(--naranja);
}

.nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* Elimina o comenta los estilos viejos de .logo-icono y .logo-texto si ya no los usas */

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  height: 100%; /* Para que ocupe el alto del nav */
}

.logo-img {
  height: 160px; /* Ajustá este valor según prefieras el tamaño */
  width: auto;  /* Mantiene la proporción */
  display: block;
  /* Si el logo tiene fondo blanco y el nav es negro, 
     podés usar 'filter: brightness(1.2)' si hace falta, 
     pero lo ideal es que la imagen sea un PNG transparente */
}

/* Ajuste para el logo en el footer (suele ir un poco más grande) */
.footer-logo .logo-img {
  height: 60px;
  margin-bottom: 16px;
}

.nav-links {
  display: flex;
  gap: 8px;
  list-style: none;
}

.nav-links a {
  color: #252525;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 6px 14px;
  border-radius: var(--radio);
  transition: var(--transicion);
  letter-spacing: 0.3px;
}

.nav-links a:hover,
.nav-links a.activo {
  color: rgba(0, 0, 0, 0.808);
  background: rgba(70, 70, 70, 0.2);
}

.btn-contacto-nav {
  background: var(--naranja) !important;
  color: var(--blanco) !important;
  padding: 8px 18px !important;
}


.menu-mobile {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.menu-mobile span {
  display: block;
  width: 24px;
  height: 2px;
  background: black;
  margin: 5px 0;
  transition: var(--transicion);
}

/* ——— BANNER SUPERIOR ——— */
.banner-top {
  font-family: Poppins, sans-serif;
  background: var(--naranja);
  text-align: center;
  padding: 9px 24px;
  font-size: 11px;
  font-weight: 600;
  color: var(--blanco);
  letter-spacing: 0.5px;
}

/* ——— HERO ——— */
.hero {
  background: var(--negro);
  color: var(--blanco);
  padding: 80px 24px 90px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(255,90,0,0.13) 0%, transparent 70%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 30px,
      rgba(255,255,255,0.015) 30px,
      rgba(255,255,255,0.015) 31px
    );
  pointer-events: none;
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  position: relative;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(80, 80, 79, 0.767); 
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 22px;
  letter-spacing: -0.5px;
}

.hero h1 em {
  font-style: normal;
  color: var(--naranja);
}

.hero-desc {
  color: #AAA;
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 480px;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-primario {
  background: var(--naranja);
  color: var(--blanco);
  padding: 14px 28px;
  border-radius: var(--radio);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transicion);
  border: none;
  cursor: pointer;
  letter-spacing: 0.3px;
}

.btn-primario:hover {
  background: var(--naranja);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 0, 0, 0.35);
}

.btn-secundario {
  background: transparent;
  color: var(--blanco);
  padding: 14px 28px;
  border-radius: var(--radio);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid rgba(255,255,255,0.25);
  transition: var(--transicion);
  cursor: pointer;
}

.btn-secundario:hover {
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.07);
}

.hero-stats {
  display: flex;
  gap: 32px;
  margin-top: 44px;
}

.stat { text-align: left; }
.stat-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: var(--naranja);
  line-height: 1;
}
.stat-label { font-size: 13px; color: #888; margin-top: 2px; }

/* Contenedor principal de la imagen en el Hero */
.hero-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px; /* Ajuste de altura para que quepan bien */
}

.hero-productos-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Estilo base para los productos flotantes */
.prod-hero {
  position: absolute;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.5)); /* Sombra para dar profundidad */
  transition: transform 0.5s ease;
}

/* Posicionamiento de la Heladera (Principal) */
.prod-hero.heladera {
  width: 280px;
  z-index: 2;
  left: 10%;
  top: 0;
}

.prod-hero.heladera img {
  width: 100%;
  height: auto;
  border-radius: 8px; /* Opcional, según la foto */
}

/* Posicionamiento de la TV (Secundaria, por detrás) */
.prod-hero.tv {
  width: 450px;
  z-index: 1;
  right: -5%;
  bottom: 10%;
  opacity: 0.8; /* Un toque de transparencia para profundidad */
  filter: drop-shadow(0 15px 40px rgba(0,0,0,0.4)) brightness(0.8);
}

.prod-hero.tv img { 
  height: auto;
  border-radius: 4px;
}

/* Efecto de flotación suave (opcional para más nivel) */
@keyframes flotar {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

.prod-hero.heladera {
  animation: flotar 6s ease-in-out infinite;
}

.prod-hero.tv {
  animation: flotar 6s ease-in-out infinite;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
  .hero-img {
    height: 400px;
    margin-top: 40px;
  }
  .prod-hero.heladera { width: 180px; left: 5%; }
  .prod-hero.tv { width: 300px; right: 0; }
}

@media (max-width: 600px) {
  .hero-img { display: none; } /* En móviles muy chicos mejor ocultarlas para que no tapen el texto */
}

/* ——— SECCIONES ——— */
.seccion {
  padding: 72px 24px;
}

.seccion-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.seccion-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 16px;
  flex-wrap: wrap;
}

.seccion-titulo {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.1;
}

.seccion-titulo .linea-naranja {
  display: block;
  color: var(--naranja);
}

.ver-todo {
  color: var(--naranja);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: var(--transicion);
}
.ver-todo:hover { gap: 8px; }

/* ——— TARJETAS DE PRODUCTO ——— */
.grilla-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}

.tarjeta {
  background: var(--blanco);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: var(--transicion);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borde);
  text-decoration: none;
  color: inherit;
}

.tarjeta:hover {
  transform: translateY(-4px); 
  border-color: rgba(255,90,0,0.25);
}

.tarjeta-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #f0eee9;
}

.tarjeta-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.tarjeta:hover .tarjeta-img img {
  transform: scale(1.05);
}

.badge-reacondicionado {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--negro);
  color: var(--blanco);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.badge-oferta {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--naranja);
  color: var(--blanco);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 4px;
}

.badge-sin-stock {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tarjeta-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tarjeta-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--naranja);
  margin-bottom: 6px;
}

.tarjeta-nombre {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 12px;
  color: var(--texto);
}

.tarjeta-precios {
  margin-top: auto;
  margin-bottom: 14px;
}

.precio-antes {
  font-size: 13px;
  color: var(--texto-suave);
  text-decoration: line-through;
  line-height: 1;
}

.precio-actual {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--texto);
  line-height: 1.1;
}

.btn-mp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #009EE3;
  color: var(--blanco);
  padding: 11px 18px;
  border-radius: var(--radio);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: var(--transicion);
  border: none;
  cursor: pointer;
  width: 100%;
  letter-spacing: 0.3px;
}

.btn-mp:hover {
  background: #0082BE;
  transform: translateY(-1px);
}

.btn-mp.deshabilitado {
  background: #CCC;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-ver-mas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: var(--texto);
  padding: 10px 18px;
  border-radius: var(--radio);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: 1.5px solid var(--borde);
  transition: var(--transicion);
  margin-bottom: 8px;
  width: 100%;
}

.btn-ver-mas:hover {
  border-color: var(--naranja);
  color: var(--naranja);
}

/* ——— SERVICIOS ——— */
.seccion-servicios {
  background: var(--negro);
  color: var(--blanco);
}

.grilla-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.servicio-card {
  background: var(--gris-medio);
  border-radius: 10px;
  padding: 28px 24px;
  border: 1px solid rgba(255,255,255,0.07);
  transition: var(--transicion);
}

.servicio-card:hover {
  border-color: rgba(255,90,0,0.4);
  transform: translateY(-3px);
}

.servicio-icono {
  font-size: 36px;
  margin-bottom: 16px;
  display: block;
}

.servicio-nombre {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--blanco);
}

.servicio-desc { font-size: 14px; color: #999; line-height: 1.6; }

/* ——— CTA CENTRAL ——— */
.seccion-cta {
  background: var(--naranja);
  padding: 64px 24px;
  text-align: center;
}

.seccion-cta h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 800;
  color: var(--blanco);
  margin-bottom: 14px;
}

.seccion-cta p {
  color: rgba(255,255,255,0.85);
  font-size: 17px;
  margin-bottom: 32px;
}

.btn-cta-blanco {
  background: var(--blanco);
  color: var(--naranja);
  padding: 15px 36px;
  border-radius: var(--radio);
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transicion);
}

.btn-cta-blanco:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.2);
}

/* ——— FOOTER ——— */
.footer {
  background: var(--negro);
  color: #AAA;
  padding: 56px 24px 28px;
  border-top: 3px solid var(--naranja);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-col h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--blanco);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.footer-col p { font-size: 14px; line-height: 1.7; color: #888; }

.footer-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-links a {
  text-decoration: none;
  color: #888;
  font-size: 14px;
  transition: var(--transicion);
}
.footer-links a:hover { color: var(--naranja); }

.footer-contacto { display: flex; flex-direction: column; gap: 10px; }
.footer-contacto-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #888;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #666;
  flex-wrap: wrap;
  gap: 12px;
}

/* ——— BREADCRUMB ——— */
.breadcrumb {
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
  padding: 12px 24px;
}

.breadcrumb-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--texto-suave);
}

.breadcrumb a {
  color: var(--texto-suave);
  text-decoration: none;
  transition: var(--transicion);
}

.breadcrumb a:hover { color: var(--naranja); }
.breadcrumb-sep { color: #CCC; }
.breadcrumb-actual { color: var(--texto); font-weight: 500; }

/* ——— PÁGINA DE CATÁLOGO ——— */
.catalogo-toolbar {
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
  padding: 16px 24px;
  position: sticky;
  top: 71px;
  z-index: 90;
}

.catalogo-toolbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.filtros {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.btn-filtro {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--borde);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--texto-suave);
  transition: var(--transicion);
  font-family: 'Barlow', sans-serif;
}

.btn-filtro:hover,
.btn-filtro.activo {
  border-color: var(--naranja);
  color: var(--naranja);
  background: rgba(255,90,0,0.06);
}

.catalogo-count {
  font-size: 13px;
  color: var(--texto-suave);
  white-space: nowrap;
}

/* ——— FICHA DE PRODUCTO ——— */
.ficha-hero {
  padding: 48px 24px;
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
}

.ficha-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.ficha-galeria img {
  width: 100%;
  border-radius: 12px;
  aspect-ratio: 4/3;
  object-fit: cover;
  border: 1px solid var(--borde);
}

.ficha-cat {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--naranja);
  margin-bottom: 10px;
}

.ficha-nombre {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
}

.ficha-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.ficha-estado.nuevo { background: #E8F5E9; color: #2E7D32; }
.ficha-estado.reacondicionado { background: #FFF3E0; color: #E65100; }

.ficha-precios {
  margin-bottom: 24px;
  padding: 20px;
  background: var(--gris-claro);
  border-radius: 8px;
}

.ficha-precio-antes {
  font-size: 15px;
  color: var(--texto-suave);
  text-decoration: line-through;
  margin-bottom: 4px;
}

.ficha-precio-actual {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  color: var(--texto);
}

.ficha-precio-cuotas {
  font-size: 14px;
  color: #009EE3;
  font-weight: 600;
  margin-top: 8px;
}

.ficha-desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--texto-suave);
  margin-bottom: 28px;
}

.ficha-acciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-mp-grande {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #009EE3;
  color: var(--blanco);
  padding: 16px 24px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  transition: var(--transicion);
}

.btn-mp-grande:hover {
  background: #0082BE;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,158,227,0.3);
}

.btn-consultar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #25D366;
  color: var(--blanco);
  padding: 14px 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: var(--transicion);
}

.btn-consultar:hover {
  background: #1DB954;
  transform: translateY(-2px);
}

.ficha-specs {
  padding: 48px 24px;
  background: var(--gris-claro);
}

.specs-tabla {
  max-width: 1100px;
  margin: 0 auto;
}

.specs-tabla h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 24px;
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.spec-item {
  background: var(--blanco);
  border-radius: 8px;
  padding: 14px 18px;
  border: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spec-key {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.spec-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--texto);
}

/* ——— RESPONSIVE ——— */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .menu-mobile { display: block; }

  .hero-inner { grid-template-columns: 1fr; }
  .hero-img { display: none; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .ficha-inner { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .hero { padding: 52px 24px 60px; }
  .hero-stats { gap: 20px; }

  .seccion { padding: 48px 16px; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ——— ANIMACIONES DE ENTRADA ——— */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animar {
  animation: fadeUp 0.5s ease both;
}

.animar-2 { animation-delay: 0.1s; }
.animar-3 { animation-delay: 0.2s; }
.animar-4 { animation-delay: 0.3s; }