/* Importar fuentes elegantes y modernas */
@import url('https://fonts.googleapis.com/css2?family=Clash+Display:wght@500;700&family=Manrope:wght@400;600&display=swap');

/* Estilos Globales */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Manrope", sans-serif; /* Fuente para párrafos */
}

    body {
      background: #0f172a;
      color: #f8fafc;
      line-height: 1.6; 
      
    }
h1, h2, h3, h4, h5, h6 {
  font-family: "Clash Display", sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
     color: #e2e8f0;
}


    /* === Portada con video === */
    .fondo {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }

    /* Overlay oscuro */
    .fondo::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.55);
      z-index: 1;
    }

    /* === SECCIÓN ¿QUIÉNES SOMOS? === */
    .sobre-nosotros {
      margin-top: 20px;
      /* espacio debajo del header */
      padding: 60px 20px;
      text-align: center;
    }

    .sobre-nosotros h2 {
      font-size: 2rem;
      margin-bottom: 20px;
      color: #00f5a0;
      text-shadow: 0 0 12px rgba(0, 255, 200, 0.25);
    }

    #beneficios h2,
    .titulo1 {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 20px;
      color: #00f5a0;
      text-shadow: 0 0 12px rgba(0, 255, 200, 0.25);
    }

    .sobre-nosotros p {
      font-size: 1.15rem;
      color:#e2e8f0;
      margin-bottom: 30px;
      line-height: 1.7;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    /* Botón "Más sobre nosotros" */
    .btn-conocenos {
      display: inline-block;
      padding: 12px 25px;
      background: linear-gradient(90deg, #00f5a0, #0061ff);
      color: #fff;
      font-weight: 600;
      border-radius: 12px;
      text-decoration: none;
      box-shadow: 0 0 12px rgba(0, 255, 200, 0.3);
      transition: all 0.3s ease;
    }

    .btn-conocenos:hover {
      transform: scale(1.08);
      box-shadow: 0 0 22px rgba(0, 255, 200, 0.5);
    }

    .video-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .video-container video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Texto centrado */
    .esencia-overlay {
      position: relative;
      z-index: 2;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      padding: 20px;
    }

    .esencia-overlay h1 {
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 15px;
      background: linear-gradient(90deg, #00f5a0, #00d9f5, #0061ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .esencia-overlay h1 span {
      color: #fff;
      -webkit-text-fill-color: #fff;
    }

    .esencia-overlay p {
      font-size: 1.3rem;
      margin-bottom: 25px;
      color: #f1f5f9;
    }

    /* Botón CTA */
    .btn-cotizaahora {
      display: inline-block;
      padding: 14px 28px;
      background: linear-gradient(90deg, #00f5a0, #0061ff);
      color: #fff;
      font-weight: 600;
      border-radius: 12px;
      text-decoration: none;
      box-shadow: 0 0 15px rgba(0, 255, 200, 0.4);
      transition: all 0.3s ease;
      font-size: 1.1rem;
    }

    .btn-cotizaahora:hover {
      transform: scale(1.08);
      box-shadow: 0 0 25px rgba(0, 255, 200, 0.7);
    }

    .btn-presupuesto {
      display: inline-block;
      padding: 14px 28px;
      background: linear-gradient(90deg, #00f5a0, #0061ff);
      color: #fff;
      font-weight: 600;
      border-radius: 12px;
      text-decoration: none;
      box-shadow: 0 0 15px rgba(0, 255, 200, 0.4);
      transition: all 0.3s ease;
      margin-left: 15px;
      font-size: 1.1rem;
    }

    .btn-presupuesto:hover {
      transform: scale(1.08);
      box-shadow: 0 0 25px rgba(0, 255, 200, 0.7);
    }




    /* === Sección ¿Qué ofrecemos? === */
.ofrecemos {
  text-align: center;
  padding: 80px 20px;
  border-top: 1px solid rgba(0, 255, 200, 0.1);
}

.ofrecemos h2 {
  font-size: 2.2rem;
  margin-bottom: 15px;
font-weight: bold;
      color: #00f5a0;
}

.ofrecemos p {
  font-size: 1.1rem;
  color: #d1d5db;
  margin-bottom: 45px;
}
.ofrecemos-grid {
  display: flex;
  flex-direction: column;   /* listado vertical */
  align-items: center;      /* centramos las cards */
  max-width: 900px;         /* controlamos el ancho total */
  margin: 0 auto;           /* centramos en la pantalla */
  gap: 20px;                /* espacio entre cards */
}


.card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 255, 200, 0.2);
  border-radius: 12px;
  padding: 20px 25px;
  width: 100%;              /* que ocupen todo el ancho del contenedor */
  max-width: 800px;         /* límite para que no se extiendan demasiado */
  display: flex;            /* ícono a la izquierda, texto a la derecha */
  align-items: center;
  gap: 18px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0, 255, 200, 0.2);
  border-color: rgba(0, 255, 200, 0.5);
}

.card .icono {
  font-size: 2rem;
  color: #00ffc8;
  flex-shrink: 0; /* el icono no se deforma */
}

.card h3 {
  font-size: 1.2rem;
  color: #00ffc8;
  margin-bottom: 5px;
}

.card p {
  font-size: 1rem;
  color: #d1d5db;
  margin: 0;
  line-height: 1.5;
}

  .btn-conocenos2 {
      display: inline-block;
      padding: 12px 25px;
      margin-top: 20px;
      background: linear-gradient(90deg, #00f5a0, #0061ff);
      color: #fff;
      font-weight: 600;
      border-radius: 12px;
      text-decoration: none;
      box-shadow: 0 0 12px rgba(0, 255, 200, 0.3);
      transition: all 0.3s ease;
    }

    .btn-conocenos2:hover {
      transform: scale(1.08);
      box-shadow: 0 0 22px rgba(0, 255, 200, 0.5);
    }


  

    .carrusel-container {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .carrusel {
      display: flex;
      transition: transform 0.7s ease-in-out;
    }

    .slide {
      min-width: 100%;
      position: relative;
    }

    .slide img {
      width: 100%;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .indicators {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
    }

    .dot {
      height: 10px;
      width: 10px;
      margin: 0 5px;
      background-color: rgba(255, 255, 255, 0.6);
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.3s ease, transform 0.3s ease;
      cursor: pointer;
    }

    .dot.active {
      background-color: #fff;
      transform: scale(1.2);
    }

    .dot:hover {
      background-color: rgba(255, 255, 255, 1);
      transform: scale(1.5);
    }

    .contenedor-principal {
      padding: 45px;
    }

    .subcontenedor_uno {
      width: 100%;
      height: auto
    }

    .categorias {

      margin-top: -30px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 50px;
      flex-wrap: wrap;

    }

    .titulo1 {
      text-align: center;
      padding: 25px;
    }

    .categoria {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      height: 340px;
    }

    .imagen {
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      width: 350px;
      height: 250px;
      transition: transform 0.3s ease;
      cursor: pointer;
    }

    .categorias1 {
      background-image: url('img/computadorslaptos.webp');
    }

    .categorias2 {
      background-image: url('img/tipos-de-software-100-removebg-preview.webp');
    }

    .imagen:hover {
      transform: scale(1.05);
    }

    .descripcion {
      margin-top: -22px;

    }

    #beneficios {
      padding: 50px 20px;
      border-top: 1px solid rgba(0, 255, 200, 0.1);

    }

    #beneficioss {
      background-color: #0f172a;
      margin-top: 15px;
      border-top: 1px solid rgba(0, 255, 200, 0.1);
    }


    .beneficios {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 30px;
      max-width: 1100px;
      margin: auto;
      padding-top: 20px;
     

    }

    .beneficio-card {
      background: #1e293b;
      padding: 25px;
      border-radius: 15px;
      box-shadow: 0 0 15px rgba(0, 255, 200, 0.08);
      transition: transform 0.3s, box-shadow 0.3s;
      text-align: center;
    }
    /* Scroll suave */
   html, body {
  overflow-x: hidden;
}
    .beneficio-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 10px 25px rgba(0, 255, 200, 0.2);
    }

    .beneficio-card .icono img {
      width: 60px;
      height: 60px;
      margin-bottom: 15px;
    }

 .beneficio-card h3 {
      margin: 10px 0 8px;
      color: #00f5a0;
      font-size: 20px;
    }

    .beneficio-card p {
      color: #cbd5e1;
    }

    .seccion-ofertas {
      padding: 60px 30px;
      text-align: center;
    }

    .titulo-ofertas {

      margin-bottom: 40px;
      color: #1d3557;
    }

    .contenedor-carrusel {
      position: relative;
      max-width: 100%;
      overflow: hidden;
      margin-top: 25px;
    }

    .vista-galeria {
      overflow: hidden;
      width: 100%;
    }

    .galeria-ofertas {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .tarjeta-producto {
      flex: 0 0 20%;
      padding: 15px;
      background: white;
      margin: 10px;
      border-radius: 15px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s;
    }

    .tarjeta-producto:hover {
      transform: translateY(-5px);
    }

    .tarjeta-producto img {
      width: 100%;
      height: 140px;
      object-fit: cover;
      border-radius: 10px;
      margin-bottom: 10px;
    }

    .tarjeta-producto h3 {

      color: #1d3557;
    }

    .precio-anterior {
      color: #999;
      text-decoration: line-through;
      margin: 4px 0;
    }

    .precio-oferta {
      color: #e63946;
      font-weight: bold;
    }

    .boton-ver {
      background: #1d3557;
      color: white;
      padding: 8px 14px;
      margin-top: 10px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }

    .boton-ver:hover {
      transform: scale(1.05);
      background-color: #1a1a1a;
    }


    .boton-carrusel {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.4);
      color: white;

      border: none;
      padding: 10px 15px;
      cursor: pointer;
      border-radius: 50%;
      z-index: 10;
    }

    .boton-carrusel.izquierda {
      left: 10px;
    }

    .boton-carrusel.derecha {
      right: 10px;
    }

   


    /* === Sección Testimonios === */
    .testimonials-section {
      background: #0f172a;
      color: #ffffff;
      padding: 80px 20px;
      text-align: center;
      border-top: 1px solid rgba(0, 255, 200, 0.1);
      position: relative;
    }

    /* Título */
    .testimonials-section h2 {
      font-size: 2rem;
      margin-bottom: 50px;

      letter-spacing: 2px;
      font-weight: bold;
      color: #00f5a0;
      text-shadow: 0 0 12px rgba(0, 255, 200, 0.25);
    }

    /* Carrusel */
    .carousel {
      overflow: hidden;
      max-width: 1000px;
      margin: 0 auto;
      position: relative;
    }

    .carousel-track {
       display: flex;
  flex-direction: row !important; /* Siempre horizontal */
    }

    /* Testimonio individual */
  .testimonial {
  min-width: 100%;
  box-sizing: border-box;
}
    .testimonial:hover {
      transform: translateY(-8px);
      box-shadow: 0 10px 25px rgba(0, 255, 200, 0.2);
    }

  /* Tamaño correcto del logo de empresa */
.testimonial img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
}
    .testimonial p {
      font-size: 1rem;
      line-height: 1.6;
      color: #e2e8f0;
      margin-bottom: 15px;
    }

    .testimonial span {
      display: block;
      font-size: 0.9rem;
      color: #00f5a0;
      font-weight: bold;
    }

    /* Botones del carrusel */
    .carousel-buttons {
      margin-top: 25px;
      display: flex;
      justify-content: center;
      gap: 20px;
    }

    .carousel-buttons button {
      background: rgba(0, 245, 160, 0.15);
      border: 1px solid rgba(0, 245, 160, 0.5);
      color: #00f5a0;
      font-size: 1.5rem;
      padding: 10px 20px;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .carousel-buttons button:hover {
      background: #00f5a0;
      color: #0f172a;
      box-shadow: 0 0 15px rgba(0, 255, 200, 0.6);
    }






    /* Contenedor para ambos botones flotantes */
    .floating-buttons {
      position: fixed;
      bottom: 25px;
      right: 25px;
      display: flex;
      gap: 15px;
      z-index: 999;
    }

    .whatsapp-float {
      text-decoration: none;
      /* elimina la rayita */
      display: none;
      /* oculto al cargar */
      position: fixed;
      bottom: 25px;
      right: 25px;
      z-index: 9999;
      width: 55px;
      height: 55px;
      background-color: #25d366;
      color: white;
      border-radius: 50%;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease;
    }

    .whatsapp-float:hover {
      transform: scale(1.1);
      background-color: #20c154;
    }


#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0f172a;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* Ocultar con fade-out */
#loader.fade-out {
  opacity: 0;
  visibility: hidden;
}

/* Spinner elegante */
.spinner {
  width: 80px;
  height: 80px;
  border: 6px solid rgba(0, 255, 200, 0.2);
  border-top: 6px solid #00ffc8;
  border-radius: 50%;
  animation: spin 1.2s linear infinite, glow 2s ease-in-out infinite alternate;
  box-shadow: 0 0 20px rgba(0, 255, 200, 0.4);
}

/* Animación de rotación */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Efecto de brillo intermitente */
@keyframes glow {
  from { box-shadow: 0 0 10px rgba(0, 255, 200, 0.4); }
  to { box-shadow: 0 0 30px rgba(0, 255, 200, 0.9); }
}

/* Texto elegante */
.loader-text {
  margin-top: 20px;
  font-size: 1.2rem;
  font-family: 'Clash Display', sans-serif;
  background: linear-gradient(90deg, #00ffc8, #007bff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fadeIn 1.5s ease-in-out infinite alternate;
  letter-spacing: 1px;
}

/* Animación del texto */
@keyframes fadeIn {
  from { opacity: 0.5; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(-3px); }
}

    .esencia {
      background: #f9f9f9;
      padding: 90px 40px;
      height: 350px;
      text-align: center;

    }

    .esencia-container {
      max-width: 800px;
      margin: 0 auto;
    }

    .esencia h2 {

      color: #2c3e50;
      margin-bottom: 20px;
      font-weight: 700;
    }

    .esencia p {

      color: #34495e;
      margin-bottom: 40px;
    }

    .esencia p span {
      color: #0077b6;
      font-weight: 600;
    }



    /* =================== NOVEDADES MODERNAS =================== */
    .novedades-modernas {
      padding: 50px 20px;
      text-align: center;
      border-top: 1px solid rgba(0, 255, 200, 0.1);
    }

    .titulo-novedades {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 50px;
      color: #00f5a0;
    }


    /* GRID */
    .grid-novedades {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 30px;
      max-width: 1200px;
      margin: auto;
    }

    /* CARD */
    .card-novedad {
      background: #1e293b;
      border-radius: 16px;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 4px 12px rgba(0, 255, 200, 0.1);
    }

    .card-novedad:hover {
      transform: translateY(-10px);
      box-shadow: 0 8px 24px rgba(0, 229, 255, 0.3);
    }

    .card-novedad img {
      width: 100%;
      max-height: 200px;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

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


    .contenido-novedad {
      padding: 20px;
      text-align: left;
    }

    .contenido-novedad h3 {
      font-size: 1.1rem;
      margin-bottom: 14px;
      color: #e2e8f0;
    }

    .contenido-novedad p {
      font-size: 0.95rem;
      line-height: 1.65;
      margin-bottom: 12px;
      color: #cbd5e1;
    }

    /* ==== Sección Noticias Tecnológicas ==== */



    /* === Noticias Tecnológicas === */
    .blog-tecnologia {
      background: #0f172a;
      /* mismo fondo que tu página */
      color: #ffffff;
      padding: 80px 20px;
      text-align: center;
      border-top: 1px solid rgba(0, 255, 200, 0.1);
    }

    .blog-tecnologia .titulo-blog {
      font-size: 2rem;
      margin-bottom: 40px;
      color: #00f5a0;
      /* resalta como tu header */
    
      letter-spacing: 2px;
    }

    .blog-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
      max-width: 1100px;
      margin: 0 auto;
    }

    .blog-card {
      background: rgba(255, 255, 255, 0.05);
      /* contraste suave */
      padding: 30px;
      border-radius: 16px;
      text-align: left;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border: 1px solid rgba(0, 255, 200, 0.15);
    }

    .blog-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 10px 25px rgba(0, 255, 200, 0.1);
    }

    .blog-icon {
      font-size: 2rem;
      margin-bottom: 15px;
    }

    .icon-azul {
      color: #00bfff;
    }

    .icon-rojo {
      color: #ff4d6d;
    }

    .blog-card h3 {
      font-size: 1.4rem;
      margin-bottom: 10px;
      color: #ffffff;
    }

    .blog-card p {
      font-size: 1rem;
      line-height: 1.6;
      color: #cbd5e1;
    }

    .btn-leer {
      display: inline-block;
      margin-top: 15px;
      color: #00ffc8;
      text-decoration: none;
      font-weight: bold;
      transition: color 0.3s ease;
    }

    .btn-leer:hover {
      color: #00bfff;
    }

    /* 🎨 Colores llamativos por categoría */
    .icon-azul {
      color: #3b82f6;
      /* azul fuerte */
    }

    .icon-rojo {
      color: #ef4444;
      /* rojo vivo */
    }

    .icon-verde {
      color: #10b981;
      /* verde esmeralda */
    }

    .icon-amarillo {
      color: #facc15;
      /* amarillo vibrante */
    }

    /* Overlay elegante */
    .overlay-newsletter {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      backdrop-filter: blur(6px);
      background-color: rgba(0, 0, 0, 0.4);
      z-index: 999;
      display: none;
    }

    /* Popup elegante */
    .popup-newsletter {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.95);
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      padding: 35px 30px;
      max-width: 400px;
      width: 90%;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
      z-index: 1000;
      display: none;
      font-family: "Segoe UI", sans-serif;
      text-align: center;
      animation: slideFadeIn 0.5s ease-out forwards;
    }

    @keyframes slideFadeIn {
      0% {
        opacity: 0;
        transform: translate(-50%, -60%) scale(0.95);
      }

      100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }

    .popup-newsletter h3 {
      font-size: 1.6rem;
      color: #333;
      margin-bottom: 10px;
    }

    .popup-newsletter p {
      font-size: 1rem;
      color: #555;
      margin-bottom: 20px;
    }

    .popup-newsletter input[type="email"] {
      width: 100%;
      padding: 12px;
      border-radius: 12px;
      border: 1px solid #ccc;
      font-size: 15px;
      box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.05);
      margin-bottom: 15px;
      outline: none;
      transition: border 0.3s;
    }

    .popup-newsletter input[type="email"]:focus {
      border-color: #ff4b2b;
    }

    .popup-newsletter button {
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, #ff416c, #ff4b2b);
      color: #fff;
      font-weight: bold;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      font-size: 16px;
      box-shadow: 0 5px 15px rgba(255, 75, 43, 0.3);
      transition: transform 0.2s, box-shadow 0.3s;
    }

    .popup-newsletter button:hover {
      transform: scale(1.03);
      box-shadow: 0 8px 20px rgba(255, 75, 43, 0.4);
    }

    .cerrar-popup {
      position: absolute;
      top: 12px;
      right: 15px;
      font-size: 22px;
      color: #999;
      cursor: pointer;
      transition: color 0.3s;
    }

    .cerrar-popup:hover {
      color: #333;
    }

    /* ================== RESPONSIVE ================== */

    /* Tablets y pantallas medianas */
    @media (max-width: 1024px) {
       .esencia-overlay h1{
      margin-top: 55px;
    }
      .fondo {
        height: 70vh;
      }

      .menu nav ul {
        gap: 15px;
      }

      /* ❌ quita esto: .card-novedad { width: 45%; } */
      .contenedor-productos {
        grid-template-columns: repeat(2, 1fr);
      }
         .tarjeta-producto {
        flex: 0 0 33.33%;
      }
      .esencia-overlay h1 {
    font-size: 2.5rem;
  }

  .ofrecemos-grid,
  .beneficios,
  .grid-novedades,
  .blog-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
    }


 @media (max-width: 500px) {
      .tarjeta-producto {
        flex: 0 0 100%;
      }
    }
    /* Celulares grandes */
    @media (max-width: 768px) {
       .titulo-novedades {
        font-size: 2rem;
      }

      .card-novedad img {
        height: 180px;
      }
     .esencia-overlay h1 {
    font-size: 1.8rem;
  }

      .esencia-overlay p {
    font-size: 1rem;
    margin-bottom: 20px;
  }

      .btn-conocenos {
        padding: 10px 20px;
        font-size: 0.95rem;
      }
      .fondo {
        height: 60vh;
      }

      .menu {
        flex-direction: column;
        gap: 10px;
      }

      .menu nav ul {
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }

      .titulo-novedades {
        font-size: 1.8rem;
      }

      /* ❌ quita esto también: .card-novedad { width: 100%; } */
      .contenedor-productos {
        grid-template-columns: repeat(1, 1fr);
      }

      footer {
        text-align: center;
        padding: 20px;
      }

      .grid-novedades {
        grid-template-columns: repeat(2, 1fr);
        /* ya controla columnas */
        gap: 20px;
      }

      .card-novedad img {
        max-height: 160px;
      }
   
  
  .btn-cotizaahora,
  .btn-presupuesto {
    display: block;
    width: 80%;
    margin: 10px auto;
  }
     .tarjeta-producto {
        flex: 0 0 50%;
      }
        .ofrecemos-grid,
  .beneficios,
  .grid-novedades,
  .blog-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
  }
   /* Carrusel */
  .contenedor-carrusel {
    flex-direction: column;
  }
  .vista-galeria {
    width: 100%;
  }
  .tarjeta-producto img {
    width: 100%;
    height: auto;
  }

  /* Categorías */
  .categorias {
    flex-direction: column;
    gap: 20px;
  }
  .categoria {
    width: 100%;
  }

  /* Testimonios */
  .carousel-track {
    flex-direction: column;
    gap: 20px;
  }
  .testimonial {
    width: 100%;
    text-align: center;
  }
    }

    /* Celulares pequeños */
    @media (max-width: 480px) {
       body {
    font-size: 14px;
  }
   h1, h2 {
    font-size: 1.4rem;
  }
   .esencia-overlay h1 {
    font-size: 1.6rem;
  }
  
  .btn-cotizaahora,
  .btn-presupuesto,
  .btn-conocenos,
  .btn-conocenos2 {
    font-size: 0.9rem;
    padding: 10px 16px;
  }

  .blog-card, .card-novedad {
    padding: 15px;
  }
      .fondo {
        height: 50vh;
      }

      .titulo-novedades {
        font-size: 1.8rem;
      }

      .menu nav ul {
        font-size: 0.9rem;
      }

      /* ❌ evita forzar width aquí */
      .grid-novedades {
        grid-template-columns: 1fr;
        /* 1 sola columna */
      }

      .card-novedad img {
        max-height: 140px;
      }

      .categoria {
        height: auto;
        margin-top: -15px;
      }


      .esencia-overlay p {
        font-size: 0.9rem;
      }
    }
  
    .esencia-overlay h1, 
.esencia-overlay p, 
.esencia-overlay a {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s ease forwards;
}
.esencia-overlay p { animation-delay: 0.3s; }
.esencia-overlay a { animation-delay: 0.6s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Ejemplo de jerarquía tipográfica */
h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.2rem;
}

h3 {
  font-size: 1.6rem;
}

/* Párrafos */
p {
  font-size: 1rem;
  font-weight: 400;
  color: #e2e8f0;
}

/* Botones */
button, .btn-cotizaahora {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.3px;
}


  @media (max-width: 360px) {
    .esencia-overlay h1{
      margin-top: 25px;
    }
  }