/*
Theme Name: Unicorp Theme
Description: Tema para WordPress.
Author: Unicorp
version: 2.8.1
Tags: tema
*/

* {
      box-sizing: border-box;
    }

    body {
      /* FONT-WEIGHT: 600; */
      margin: 0;
      font-family: "Montserrat", sans-serif;
      background: linear-gradient(to bottom right, #100037 40%,      #f92a82 100%); /* fucsia termina en 100% */
    }
.container {
    
}

    /* Barra de navegacion */
    .navbar {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      background-color: rgb(0 0 0 / 0%);
      padding: 3rem 8rem;
      gap: 2rem;
      color: white;
      position: absolute;
      width: 100%;
      top: 0;
      z-index: 999;
    }

    /* Ícono de WhatsApp */
    .whatsapp {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: white;
      /* font-size: 1rem; */
      text-decoration: none;
    }

    .whatsapp i {
      color: #25d366;
      font-size: 1.3rem;
    }

    /* Botón Cotizar */
    .quote-button {
      background-color: #f92a82;
      color: white;
      padding: 1rem 2rem;
      border: none;
      cursor: pointer;
      border-radius: 50px;
      font-size: 1rem;
      transition: background-color 0.3s;
      text-transform: uppercase;
    }

    .quote-button:hover {
      background-color: #100037;
    }

    /* Icono hamburguesa en */
    .menu-circle {
      width: 45px;
      height: 45px;
      background-color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .hamburger {
      width: 22px;
      height: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .hamburger div {
      background-color: #000;
      height: 3px;
      border-radius: 2px;
    }

    /* Menu pantalla completa */
    .fullscreen-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.95);
      color: white;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      text-align: center;
      padding: 2rem;
    }

    .fullscreen-menu.active {
      display: flex;
    }

    .fullscreen-menu a {
      color: white;
      text-decoration: none;
      font-size: 2rem;
      margin: 1rem 0;
      transition: color 0.3s;
    }

    .fullscreen-menu a:hover {
      color: #f92a82;
    }

    .close-btn {
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 3rem;
      cursor: pointer;
    }

    

    /* Estilo del video */
    #MainVideo {
      position: relative;
		object-fit: cover; 
    }
video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

    /* Contenido sobre el video */
    .contenido-banner {
      position: absolute;
      top: 0;
      z-index: 1;
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: white;
      padding: 2rem;
      background-color: rgba(0, 0, 0, 0.3); /* opcional, oscurece un poco el fondo */
    }

    .contenido-banner h1 {
      font-size: 2.5rem;
      text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
    }
	.logo-container img {
	  height: auto;
	  width: 30%;
	}
.text-container h1 {
	  font-size: 5rem;
	  font-weight: normal;
	  color: #ffff;
	  text-align: left;
	  text-transform: uppercase;
	  font-family: "Montserrat";
	}
.logo-container {
    width: 50%;
    text-align: center;
    padding: 22vh 2vw;
    border-top: 2px solid #f92a82;
}
.text-container {width: 50%;border-bottom: 2px solid #F92A82;padding: 12vh 2vw;}
img.img-header {
    position: absolute;
    left: -5%;
    bottom: 9%;
    width: 25%;
}
img.img-header2 {
    position: absolute;
    right: -5%;
    top: 9%;
    width: 25%;
}
.section2-container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 0 4vw;
}

.section2-text {
    width: 50%;
    text-align: left;
    padding-right: 7rem;
}

.section2-img {
    width: 50%;
}

.section2-text h2 {
    font-size: 4rem;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0;
}

p {}

.section2-text p {
    font-size: 18px;
    font-weight: 400;
}
#section3-container {background: url(images/bag-section3.png)center center no-repeat fixed;padding: 230px 0;text-align: center;}
div#section3-container h2 {
    font-size: 2rem;
    text-transform: uppercase;
    color: #fff;
    font-weight: 400;
}
/* Galería */
.buttons {
      text-align: center;
      margin: 2vw 0;
    }

    .buttons button {
      padding: 1vw;
      margin: 5px;
      background-color: transparent;
      color: white;
      cursor: pointer;
      transition: background 0.3s;
      text-transform: uppercase;
      font-family: 'Montserrat';
      font-size: 1.3rem;
      border: 2px solid transparent;
    }

    .buttons button:hover {
    border: 2px solid #f92a82;
    transition: 0.3s;
    }

    .gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      justify-content: center;
      transition: 0.3s;
    }

    .gallery-item {
      width: 32vw;
      height: 20vw;
      background-size: cover;
      background-position: center;
      cursor: pointer;
      transition: 0.3s;
    }

    /* Lightbox */
    .lightbox {
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.9);
      display: none;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      z-index: 1000;
    }

    .lightbox img {
      max-width: 90%;
      max-height: 80vh;
      border-radius: 10px;
    }

    .lightbox .controls {
      margin-top: 20px;
      display: flex;
      gap: 20px;
    }

    .lightbox button {
      padding: 10px 15px;
      font-size: 16px;
      background: #8A2BE2;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .close-btn {
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 30px;
      color: white;
      cursor: pointer;
    }
.section4-container h2 {
    text-align: center;
    text-transform: uppercase;
    color: white;
    font-size: 4rem;
    padding: 0 4vw;
    margin: 0;
}
.buttons button.active {
   /* un morado más oscuro */
   border: 2px solid #f92a82;
   color: #f92a82;
   transition: 0.3s;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gallery-item {
  animation: fadeInUp 0.5s ease forwards;
}
/*Seccion 5*/
.section5-container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 2rem;
    height: 90vh;
    box-sizing: border-box;
    place-items: center;
}
.img-section5 {
    width: 50%;
    text-align: right;
    box-sizing: border-box;
    height: 100%;
    border-top: 2px solid #F92A82;
}

.text-section5 {
    width: 50%;
    padding: 20vh 26vh 0 5vh;
    height: 100%;
    border-bottom: 2px solid #F92A82;
}

.text-section5 h2 {
    font-size: 4rem;
    margin: 0;
}

.text-section5 p {
    font-weight: 400;
    font-size: 1rem;
}

.img-section5 img {
}
img.img2 {
    position: absolute;
    bottom: -3%;
    left: -5%;
    width: 25%;
}
img.img1 {
    object-fit: cover;
    height: 100%;
}
.productos-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        padding: 30px;
    }

    .producto {
        background: #1c1c1c;
        text-align: center;
        width: 19%;
        padding: 100px 0;
        text-decoration: none;
        color: white;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .producto:hover {
        transform: translateY(-20px);
        box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
    }

    .producto img {
        width: 40%;
        height: auto;
        margin-bottom: 10px;
    }

    .producto h3 {
        font-size: 1.5rem;
        margin: 0;
        font-weight: 400;
    }
.section6-container h2 {
    text-align: center;
    text-transform: uppercase;
    color: white;
    font-size: 4rem;
    padding: 0px 4vw;
    margin: 0px;
}

.section6-container {
    padding: 4vw 0px;
}
.swiper {
        width: 100%;
        margin: 50px 0;
    }

    .swiper-slide {
        background-size: cover;
        background-position: center;
        position: relative;
        height: 672px!important;
        width: 506px!important;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        transform: skew(-5deg);
        overflow: hidden;
        margin: 0 -155px;
    }

    .swiper-slide::before {
        content: "";
        position: absolute;
        inset: 0;
         /* Color rosa semitransparente */
        z-index: 1;
    }

    .nombre {
        position: absolute;
        z-index: 2;
        font-weight: bold;
        font-size: 18px;
        padding: 10px;
        bottom: 5%;
        left: 20%;
    }
.section7-container, .section8-container  {
    text-align: center;
    color: #fff;
    font-weight: 400;
    padding: 2vw 0;
}

.section7-container h2, .section8-container h2 {
    font-size: 4rem;
    margin: 0;
}
.section7-container p, .section8-container p {
    margin: 0;
}
.clientes-container img {
    vertical-align: middle;
    text-align: center;
    display: inline-block;
    margin: 0 40px;
}

.clientes-container {
    margin: 50px 0;
}
:root{
    --bg:#0e0e10;
    --muted:#ffff;
    --brand:#ff2e83; /* cámbialo por el color de SONIDEC */
    --text:#f5f5f7;
    --card:#151518;
    --radius:18px;
  }
  .footer{
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  }
  .footer a{ color: var(--text); text-decoration: none; }
  .footer a:hover{ color: var(--brand); }

  .footer__inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 20px 32px;
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 32px;
    align-items: center;
    vertical-align: middle;
    font-weight: 400;
  }

  /* Marca */
  .footer__brand{ display:inline-flex; align-items:center; margin-bottom:14px; }
  .footer__logo{
    font-weight: 800; letter-spacing: .5px;
    font-size: clamp(26px, 2.4vw, 34px);
  }
  .footer__logo span{ color: var(--brand); }

  /* Listas */
  .footer__list{ list-style:none; padding:0; margin:10px 0 0; display:grid; gap:10px; }
  .footer__item{ display:flex; gap:12px; align-items:flex-start; color: var(--muted); }
  .footer__item a{ color: var(--muted); }
  .footer__item a:hover{ color: var(--brand); }

  /* Iconos base */
  .icon{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; }
  .icon svg{ width:22px; height:22px; fill: var(--brand); }

  /* Redes */
  .footer__social{
    display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:14px;
  }
  .social__btn{
    width:54px; height:54px; border-radius:50%;
    background: var(--card);
    display:inline-flex; align-items:center; justify-content:center;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
  }
  .social__btn:hover{ transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
  .social__btn svg{ width:24px; height:24px; fill: var(--text); }

  /* Enlaces legales */
  .footer__links{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
  .footer__links a{ color: var(--muted); }
  .footer__links a::after{
    content:""; display:block; height:1px; width:0; background: var(--brand);
    transition: width .2s ease;
  }
  .footer__links a:hover::after{ width:100%; }

  /* Centro y derecha */
  .footer__center{ text-align:center; }
  .footer__right{ justify-self:end; }

  /* Franja inferior */
  .footer__bottom{
    border-top:1px solid rgba(255,255,255,.06);
    text-align:center;
    padding:18px 12px 28px;
    color: var(--muted);
    font-size: 14px;
  }
.footer__col img {
    width: 41%;
    box-sizing: border-box;
}
.footer__inner a {
    text-decoration: none;
}
    /* Responsivo */
    @media (max-width: 768px) {

      .navbar {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #111;
      padding: 3rem 2rem;
      gap: 2rem;
      color: white;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 999;
      height: auto;
    }
      .whatsapp i {
    color: #25d366;
    font-size:3rem;
      }
      .quote-button {
      background-color: #f92a82;
      color: white;
      padding: 2rem 3rem;
      border: none;
      cursor: pointer;
      border-radius: 50px;
      font-size: 2rem;
      transition: background-color 0.3s;
      text-transform: uppercase;
    }
      .hamburger {
      width: 50px;
      height: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
      .menu-circle {
      width: 100px;
      height: 100px;
      background-color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
      .hamburger div {
    background-color: #000;
    height: 5px;
    border-radius: 2px;
}
      .whatsapp span {
        display: none;
      }

      .fullscreen-menu a {
        font-size: 1.5rem;
      }
    }
.section4-container p {
    text-align: center;
    color: white;
    font-weight: 400;
    font-size: 1rem;
    margin: 0;
}
.section4-container {
    padding: 4vw 0;
}
@media (max-width: 480px) {
      .fullscreen-menu a {
        font-size: 1.3rem;
      }

      .close-btn {
        font-size: 1.8rem;
        top: 15px;
        right: 20px;
      }
	.navbar {
    width: 100%;
    text-align: center;
    height: auto;
    padding: 1rem 0rem;
}

button.quote-button {
    font-size: 0.9rem;
    padding: 1rem 1rem;
    font-family: "Montserrat", sans-serif;
    text-align: center;
}

.menu-circle {
    width: 50px;
    height: 50px;
}

.hamburger {
    width: 30px;
    height: 20px;
}
video {
    height: 80vh;
}

div#MainVideo {
}

.logo-container {
    width: 100%;
}

.text-container {
    width: 100%;
}

.contenido-banner {
    display: inline-block;
    padding: 8rem 1rem;
    height: 90vh;
}

.logo-container {
    padding: 1rem 0rem;
    border: none;
}

.text-container {
    padding: 0;
    font-size: 1rem;
    border: none;
}

.text-container h1 {
    font-size: 2rem;
    text-align: center;
}

img.img-header {
    display: none;
}
	.section2-container {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    padding: 2rem 1rem;
}

.section2-text {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    text-align: center;
}

.section2-img {
    width: 100%;
    box-sizing: border-box;
    width: 100%;
}

.section2-img img {
    width: 100%;
}

.img-section5 img {
    width: 100%;
}

.footer__inner {
    display: inline-block;
    padding: 2rem 1rem;
}

.section7-container {
    width: 100%;
    box-sizing: border-box;
}

.section7-container h2 {
    box-sizing: border-box;
    font-size: 2rem;
}

.section5-container {
    display: block;
    max-width: 100%;
    height: auto;
    padding: 2rem 1rem;
}
	.img-section5 {
    width: 100%;
}

.text-section5 {
    width: 100%;
    padding: 2rem 0rem;
    text-align: center;
}

img.img2 {
    display: none;
}

.text-section5 h2 {
    font-size: 3rem;
}

.text-section5 p {
    text-align: center;
}

h2 {
    font-size: 2rem!important;
    text-align: center!important;
    margin-bottom: 1rem!important;
}

div#section3-container {
    padding: 6rem 1rem;
}

.section4-container {
    padding: 2rem 1rem;
}

.buttons button {width: 42%;margin: 5px;padding: 1rem;font-size: 1rem;}

div#galeria {
    display: inline-block;
    width: 100%;
    text-align: center;
}

div#galeria img {
}

.gallery-item {
    width: 45%;
    height: 150px;
    display: inline-block;
    margin: 5px;
}
	a.producto {
    width: 49%;
    padding: 50px 0;
}

.productos-container {
    padding: 0;
}

.section6-container {
    padding: 2rem 1rem;
}
	.swiper {
    margin: 10px;
}

.section8-container {
    padding: 2rem 1rem;
}

.clientes-container img {
    width: 43%;
    margin: 10px;
}

.footer__col {
    text-align: center;
    justify-self: normal;
    padding: 1rem 0;
    display: inline-block;
    width: 100%;
}
	a.footer__brand {
    display: inline-block;
}

ul.footer__list {
    display: inline-block;
}

nav.footer__links {
    text-align: center;
    display: inline-block;
}

li.footer__item {
    margin: 0.5rem;
}
		
    }
footer#footer {
    background: #111111;
}
.producto h3 {
    font-size: 1.1rem;
}