/* ============================================================
   SWALU — common.css
   ============================================================
   Reglas CSS comunes a todas las páginas, extraídas de los 10
   archivos originales para eliminar duplicación SEGURA.

   Regla de extracción aplicada:
   - Una regla se movió aquí SOLO si aparece IDÉNTICA en 3 o más
     archivos originales Y ningún archivo tiene una variante con
     definición distinta para ese selector.
   - Cuando un selector tenía variantes (ej: :root con variables
     distintas en algunos archivos), se conservó en cada archivo
     específico tal como estaba en el original.

   Esto se carga en TODAS las páginas (desde el layout) ANTES del
   CSS específico de cada página, para que la cascada funcione.
   ============================================================ */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
    list-style: none;
    text-decoration: none;
    scroll-behavior: smooth;
}

body {
    background: var(--bg-color);
    color: var(--text-color);

    left: 0;
    margin: 0;
    padding: 0;
    font-size: 16px;
}

.logo img {
    width: auto;
    height: auto;
}

#navbar, #navbar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#navbar {
    width: auto;
    margin: auto auto;
    background-color: rgb(255, 255, 255);
    border-radius: 6px;
}

#navbar::before,
#navbar::after {
    content: '';
    display: table;
}

#navbar::after {
    clear: both;
}

#navbar li {
    float: left;
    box-shadow: 1px 0 0 #444;
    position: relative;
}

#navbar a {
    float: left;
    padding: 12px 30px;
    font-weight: 600;
    text-decoration:none;
    color: var(--main-color);
}

#navbar li:hover > a {
    color:#c72424;
    font-weight:900;
}

#navbar ul {
    margin: 20px 0 0 0;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 46px;
    left: 0;
    z-index: 1;
    background: #ffffff;
    border-radius: 3px;
    transition: all .3s ease-in-out;
}

#navbar li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}

#navbar ul ul {
    top: 0;
    left: 252px;
    margin: 0 0 0 20px;
}

#navbar ul li {
    float: none;
    display: block;
    border: 0;
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#navbar ul li:last-child {
    box-shadow: none;
}

#navbar ul a {
    padding: 10px;
    width: 250px;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: uppercase;
}

#navbar ul a:hover {
    background-color: #c72424;
    color: #dddddd;
}

#navbar ul li:first-child > a {
    border-radius: 3px 3px 0 0;
}

#navbar ul li:first-child > a::before {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px #fff;
}

#navbar ul li:first-child > a::after {
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #fff;
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0;
}

#navbar ul li:first-child > a:hover::after {
    border-bottom-color: #fff;
}

#navbar ul ul li:first-child > a:hover::after {
    border-right-color: #fff;
    border-bottom-color: transparent;
}

#navbar ul li:last-child > a {
    border-radius: 0 0 3px 3px;
}

#menu-icon {
    font-size: 36px;
    color: var(--text-color);
    z-index: 10001;
    cursor: pointer;
    display: none;
}

.slideshow {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
}

.slideshow li {
    position: absolute;
    width: 100%;
    height: 100%;
}

.slideshow li span {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: imageAnimation 30s linear infinite 0s;
}

span {
    color: var(--other-color-1);
}

.inicio-text h4 {
    color: var(--main-color);
    font-size: 30px;
    font-weight: 600;
}

.inicio-text h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 3rem;
    text-shadow: #000000 4px 0 4px;
}

.btn {
    display: inline-block;
    padding: 7px 35px;
    border-radius: 0.5rem;
    font-size: 17px;
    font-weight: bold;
    background: var(--main-color);
    color: var(--text-color);
    
    transition: all .40s ease;
}

.btn:hover {
    transform: scale(1.01) translateY(-5px);
    background: var(--other-color-1);
    font-weight: bold;
    color: var(--text-color);
    border: 5px solid var(--other-color-1);
}

header.sticky {
    padding: 10px auto;
    
    background: rgb(255, 255, 255);
    box-shadow: 0 3px 0 #06335779;
    border-bottom: 1px solid #fafafa;
    transition:  .5s;
}

input {
    display:grid;
}

input:checked + label {
    width: 500px;
}

input:checked + label .descripcion {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.card[for="c1"] {
    background-image: url('../img/rectangulos/marketing.jpg');
}

.card[for="c2"] {
    background-image: url('../img/rectangulos/software.jpg');
}

.card[for="c3"] {
    background-image: url('../img/rectangulos/branding.jpg');
}

.card[for="c4"] {
    background-image: url('../img/rectangulos/consulting.jpg');
}

.main-text {
    text-align: center;
}

.main-text h4 {
    color:  var(--main-color);
    font-size: 24px;
    font-weight: 600;
}

#textswalu {
    animation: escribir-y-eliminar 5s infinite;
    overflow: hidden;
    white-space: nowrap;
}

#textswalu1 {
    animation: escribir-y-eliminar 5s infinite;
    overflow: hidden;
    white-space: nowrap;
}

.scale-up-center:hover {
    -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.separador1-container {
    width: 100%; 
    overflow: hidden;
}

.whatsapp-button img {
    width: 100%;  
height: 100%;  
object-fit: contain;  
color: transparent;
}

footer .redes-sociales {
    margin-bottom: 10px;
}

footer .redes-sociales a {
    margin-right: 10px;
}

footer .redes-sociales img {
    height: 10px;
}

.logo {
    animation: changeLogoColor 10s infinite linear;
}

.footer-container {
    display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px;
  background-color: #f4f4f4;
  color: #282828;
}

.footer-column {
    display: flex;
  align-items: center;
}

.footer-column p {
    margin-right: 5px;
    font-size: 15px;
    font-weight: 700;
}

.footer-column a {
    color: #000000; 
  text-decoration: none;
}

.brand-container {
    display: flex;
  align-items: center;
}

.brand-text {
    margin-right: 10px;
}

.brand-image {
    width: 180px;  
  height: auto;
}

.img-container {
    flex: 0 1 450px; 
    height: auto;
}

.img-container img {
    width: 100%; 
    height: auto; 
    border-radius: 20%;
    padding: 30px;
}

main {
    flex: 1; 
    text-align: justify;
}

.logo-link {
    text-decoration: none;  
    display: inline-block;
}

.logo-animation img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    animation: fadeInOut 10s infinite;
    opacity: 0;
}

.logo-animation img:first-child {
    animation-delay: -7s;
}

.containerF2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    border-radius: 10px;
    background-color: #f4f4f4;
    color: #333;
    font-size: 16px;
}

.company-infoF2 {
    flex: 1;
    padding: 20px;
    border-right: 2px solid #ddd;
}

.company-infoF2 h2 {
    margin-bottom: 15px;
    color: #0056b3;
}

.company-infoF2 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.company-infoF2 li {
    margin-bottom: 10px;
}

.form-containerF2 {
    flex: 2;
    padding: 20px;
}

.form-groupF2 {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #0056b3;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
}

.buttonF2 {
    background-color: #0056b3;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    display: block;
    width: 100%;
    margin-top: 10px;
}

.buttonF2:hover {
    background-color: #003580;
}

.chat-iconA {
    position: fixed;
    bottom: 65px;
    right: 7px;
    width: 120px;
    cursor: pointer;
    z-index: 1000;
}

.chat-iconA img {
    width: 100%;
    border-radius: 40%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.chat-boxA {
    position: fixed;
    bottom: 150px;
    right: 128px;
    width: 300px;
    background: rgb(0, 0, 0);
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display:flex;
    flex-direction: column;
    color: #ffffff;
}

.chat-headerA {
    padding: 10px;
    background-color: #929292;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    border-radius: 10px 10px 0 0;
    border-bottom: 2px solid #00ffff
}

.chat-contentA {
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    border-top: px solid #00ffff;
    border-bottom: 2px solid #00ffff;
}

.chat-contentA p {
    color: white;
}

.formA {
    display: flex;
    align-items: center;
    padding: 10px;
}

.inputA[type="text"] {
    flex: 1;
    padding: 5px;
    border: 2px solid #00ffff;
    border-radius: 5px;
    margin-right: 10px;
}

.buttonA {
    background-color: #ffffff;
    color: rgb(4, 0, 79);
    padding: 5px 10px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.buttonA:hover {
    background-color: #02d9ff;
}

.close-btnA {
    cursor: pointer;
    font-size: 20px;
    color: #00ffff;
}

#customAlert {
    display: none; 
    position: fixed; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    width: 300px; 
    padding: 20px; 
    background-color: #000000; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    border-radius: 10px; 
    text-align: center; 
    z-index: 1000;
}

#alertMessage {
    margin-top: 60px;
}

.column4:first-child {
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
}

.column4:first-child p {
    margin: 0; 
    padding: 5px;
}

.carousel {
    position: relative;
    overflow: hidden;
    height: 50%;
}

.carousel img {
    position: absolute;
    top: 0;
    left: 100%; 
    transition: left 0.5s ease;
    padding-top: 5px;
    padding-bottom: 5px;
}

.carousel img.active {
    left: 0;
}

.column {
    flex: 1; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    opacity: 0; 
    padding: 20px; 
    transition: opacity 0.5s ease-out;
}

.container:hover .column {
    opacity: 1;
}

.column5 {
    background-color: white;
    border-radius: 15px;
    position: relative;
    flex: 0 0 70%; 
    text-align: center; 
    color: #000000;
    margin-left: 10px;
}

.column5 h3 {
    text-align: justify;
    font-family: 'Poppins', sans-serif;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    font-size: 3vw; 
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    white-space: collapse balance;
    color: rgb(254,153,0);
    color: linear-gradient(90deg, rgba(254,153,0,1) 0%, rgba(181,113,10,1) 100%);
}

.column5 h4 {
    text-align: justify; font-size: 20PX;
    font-size: 20px;
    
    background-color: white;
    border-radius: 10px;
    font-size: 1.5vw; 
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    white-space: collapse balance;
    padding-left: 30px;
    padding-right: 30px;
}

.containerM {
    display: flex;
    justify-content: space-between;
    margin: 20px;
    padding-left: 20px;
    padding-right: 20px;
    align-items: stretch; 
    gap: 20px;
}

.columnM {
    text-align: center;
    overflow: hidden; 
    position: relative;
    background: #fcfcfc; 
    color: #000000;
    border-radius: 10px;
    transition: transform 0.5s ease;
    padding: 10px;
    flex: 1; 
    display: flex;
    flex-direction: column; 
    justify-content: space-between; 
    height: 350px;
}

.image-containerM {
    position: relative;
    overflow: hidden;
    flex-grow: 1; 
    border-radius: 25px;
}

.image-containerM img {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.5s ease;
}

.overlay-textM {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5); 
    color: white;
    padding: 10px 0; 
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.columnM:hover img {
    transform: translateY(-15%);
}

.columnM:hover .info-button,
.columnM:hover .overlay-textM {
    opacity: 1;
    visibility: visible;
}

h3 {
    padding: 10px;
    margin: 0;
}

.image-marquee {
    width: 100%;
    height: 150px; 
    overflow: hidden;
    position: relative;
    background: rgba(250, 250, 250, 0.2);
}

.marquee-track {
    display: flex;
    animation: marquee 20s linear infinite;
}

.contener {
    display: flex;
    align-items: center;
}

.title {
    margin-left: 10px;
    align-items: center;  
    align-content: center;
}

.title h3 {
    font-family: 'OCR A Extended', monospace;
    font-size: 40px;
    margin: 0;
    margin-bottom: -25px;
    color: #000000;
}

.pump {
    animation: pump 0.6s ease-in-out infinite;
}

.bouncing-ball {
    position: absolute;
    top: 50%; 
    left: 50%; 
    width: 5px; 
    height: 5px; 
    background-color: blue; 
    border-radius: 50%; 
    transform: translate(-50%, -50%); 
    animation: bounce 5s infinite;
}

.services-section {
    padding: 50px 20px;
    background-color: #ffffff;
}

.elementor-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.elementor-widget {
    margin-bottom: 30px;
}

.elementor-heading-title {
    font-size: 32px;
    color: #333333;
    margin-bottom: 40px;
}

.elementor-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.elementor-column {
    flex: 0 0 48%; 
    margin-bottom: 30px;
}

.elementor-icon-box-wrapper {
    display: flex;
    align-items: center;
    text-align: left;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.elementor-icon-box-wrapper:hover {
    transform: translateY(-10px);
}

.elementor-icon-box-title {
    font-size: 20px;
    color: #333333;
    margin-bottom: 10px;
}

.elementor-icon-box-description {
    font-size: 16px;
    color: #666666;
    margin: 0;
}

.elementor-widget-spacer {
    margin-top: 30px;
}

.elementor-spacer-inner {
    height: 20px;
}

.about-text h4 {
    margin: 10px 0;
    color: var(--main-color);
    font-size: 20px;
    font-weight: 600;
    text-align: justify; 
    width: 100%; 
    padding-left: 90px;
    padding-right: 90px;
    padding-bottom: 40px;
}

.about-text p {
    color: var(--second-color);
    font-size: var(--p-font);
    line-height: 30px;
    margin-bottom: 2rem;
    width: 100%;
}

.main-text h1 {
    font-size: 20px;
    color: #111;
    margin-bottom: 10px;
}