/* ====== Importa las fuentes desde Google Fonts ====== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Open+Sans:wght@400;500;700&display=swap');

/* ====== RESET BÁSICO ====== */

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

/* ====== VARIABLES GLOBALES ====== */

:root {
  --first-color: #F66035;
  --second-color: #9FCBE6;
  --third-color: #2D373B;
  --background: #ffffff;
  --text-color: #ffffff;
}

/* ====== ESTILOS BASE ====== */

html,
body {
  overflow-x: hidden;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--text);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  padding: var(--space-md);
}

.open-sans {
  font-family: 'Open Sans', sans-serif;
}

p {
  font-family: 'Open Sans', sans-serif;
}

/************************* styles fast **************************/

header {
  width: 100%;
  background: #ffffff;
  padding: 0 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  position: fixed;
  top: 0;
  left: 0;
  height: 60px;
  z-index: 1000;
}

header img {
  height: 60px;
}

/* ====== ESTILOS ABOUT ====== */
section {
  width: 100vw;
  height: 100vh;
}

.about {
  display: flex;
  height: 100vh;
  position: relative;
}

.about .about-left {
  width: 52%;
  background: var(--background);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 60px 0px 60px;
}

.about .about-left .text-icon {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  gap: 30px;
  width: 80%;
}

.about .about-left .text-icon p {
  font-size: 70px;
  font-weight: 700;
}

.about .about-left .text-icon img {
  transform: translateY(-36px);
}

.about .about-left .text-about {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 60px;
}

.about .about-left .text-about h2 {
  font-size: 32px;
  letter-spacing: 1.5px;
  padding-bottom: 10px;
}

.about .about-left .text-about p {
  font-size: 22px;
  letter-spacing: 1.2px;
}

.about-right {
  width: 48%;
  background: var(--second-color);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 40px;
}

.circle-img {
  width: 750px;
  height: 750px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  bottom: -90px;
  right: -120px;
  border: 20px solid #deeef5;
}

.circle-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% -10px;
  transition: 0.3s ease;
}

.about-line {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 62%;
  height: 38px;
  background: var(--first-color);
  z-index: 20;
}

/* ====== ESTILOS "Que hacemos" ====== */
.info-about {
  display: flex;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.info-about .info-left {
  width: 20%;
  background: var(--second-color);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.info-about .info-left p {
  font-size: 58px;
  color: white;
  font-weight: 900;
  white-space: nowrap;
  transform: rotate(-90deg);
  top: 28%;
  transform-origin: center;
  position: absolute;
}

.info-about .info-center {
  width: 76%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.info-about .info-center .col {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.info-about .info-center .icon-text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.info-about .info-center .icon-text img {
  width: 35%;
  filter: invert(78%) sepia(6%) saturate(813%) hue-rotate(173deg) brightness(94%) contrast(89%);
  margin-bottom: 30px;
}

.info-about .info-center .icon-text p {
  font-size: 30px;
  font-weight: 600;
}

.info-about .info-right {
  width: 4%;
  height: 66%;
  background: var(--first-color);
}

.info-circle-img {
  width: 750px;
  height: 750px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  bottom: -520px;
  left: -350px;
  border: 20px solid #deeef5;
}

.info-circle-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% -60px;
  transition: 0.3s ease;
}

/* ====== ESTILOS "Fabrica de Software" ====== */
.desing-web {
  display: flex;
  height: 100vh;
  position: relative;
}

.desing-web .desing-web-text {
  position: absolute;
  top: 40px;
  left: 5%;
  font-size: 55px;
  font-weight: 700;
  color: #deeef5;
}

.desing-web .desing-web-left {
  width: 52%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 30px;
}

.desing-web .desing-web-right {
  width: 48%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 30px 90px 0 30px;
}

.desing-web .desing-web-right h2 {
  font-size: 70px;
}

.desing-web .desing-web-right h3 {
  font-size: 34px;
  padding: 10px 90px 0 0;
}

.desing-web .desing-web-right .desing-web-right-text {
  font-size: 22px;
  letter-spacing: 0.8px;
  padding: 10px 50px 0 0;
}

/* ====== ESTILOS "Servicios Web" ====== */
.servicies {
  display: flex;
  height: 100vh;
  position: relative;
}

.servicies .servicies-left {
  width: 83%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 0 0 90px 90px;
  gap: 10px;
}

.servicies .servicies-left .servicies-left-text {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding-bottom: 20px;
}

.servicies .servicies-left .servicies-info {
  display: flex;
  gap: 40px;
}

.servicies .servicies-left .servicies-info img {
  width: 6%;
}

.servicies .servicies-left .servicies-info .services-info-text {
  letter-spacing: 1.2px;
}

.servicies .services-right {
  width: 17%;
  background: var(--second-color);
}

.servicies .services-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 62%;
  height: 38px;
  background: var(--first-color);
  z-index: 20;
}

/* ====== ESTILOS "Software" ====== */
.software {
  display: flex;
  height: 100vh;
  position: relative;
}

.software .line-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 62%;
  height: 38px;
  background: #deeef5;
  z-index: 20;
}

.software .software-left {
  width: 16%;
  background: var(--second-color);
  margin-top: 80px;
}

.software .software-center {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 0 110px 0 50px;
}

.software .software-center h2 {
  font-size: 70px;
}

.software .software-center h3 {
  font-size: 34px;
  letter-spacing: 1.5px;
}

.software .software-center p {
  font-size: 22px;
  letter-spacing: 0.8px;
}

.software .software-right {
  width: 44%;
}

.software .software-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 20%;
  transition: 0.3s ease;
}

.software .line-software {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 22%;
  background: #deeef56b;
  z-index: 12;
}

.software .line-software .line-software-content {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  padding-right: 40px;
}

.software .line-software .line-software-content .tags {
  width: 8%;
  font-size: 22px;
  padding: 2px 0;
  text-align: center;
  background: #e3f1f6;
}

/* ====== ESTILOS "Diseño APPs" ====== */
.desing-app {
  display: flex;
  height: 100vh;
  position: relative;
}

.desing-app .line-top-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 62%;
  height: 38px;
  background: #deeef5;
  z-index: 20;
}

.desing-app .desing-app-left {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
}

.desing-app .desing-app-left img {
  width: 62%;
  height: auto;
  object-fit: cover;
  transition: 0.3s ease;
  z-index: 30;
}

.desing-app .desing-app-right {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 0 110px 0 50px;
}

.desing-app .desing-app-right h2 {
  font-size: 70px;
}

.desing-app .desing-app-right h3 {
  font-size: 34px;
  letter-spacing: 1.5px;
}

.desing-app .desing-app-right p {
  font-size: 24px;
  letter-spacing: 0.8px;
}

.desing-app .line-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 4%;
  height: 62%;
  background: var(--first-color);
  z-index: 20;
}

.desing-app .line-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 20%;
  background: #2d373b;
  z-index: 20;
}

/* ====== ESTILOS "Redes Social" ====== */
.social {
  display: flex;
  height: 100vh;
  position: relative;
}

.social .line-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 62%;
  height: 38px;
  background: #deeef5;
  z-index: 20;
}

.social .social-left {
  width: 16%;
  background: var(--first-color);
  margin-top: 80px;
}

.social .social-center {
  width: 49%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 0 110px 0 50px;
}

.social .social-center h2 {
  font-size: 70px;
}

.social .social-center h3 {
  font-size: 34px;
  letter-spacing: 1.5px;
}

.social .social-center p {
  font-size: 22px;
  letter-spacing: 0.8px;
}

.social .social-right {
  width: 35%;
}

.social .social-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 20%;
  transition: 0.3s ease;
}

.social .line-social {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 22%;
  background: #deeef56b;
  z-index: 12;
}

.social .line-social .line-social-content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  padding-right: 40px;

}

.social .line-social .line-social-content .tags {
  width: 7.5%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-content: center;
}

.social .line-social .line-social-content .tags img {
  width: 70%;
}

/* ====== ESTILOS "Facturación" ====== */
.billing {
  display: flex;
  height: 100vh;
  position: relative;
}

.billing .line-top-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 62%;
  height: 38px;
  background: #deeef5;
  z-index: 20;
}

.billing .billing-left {
  width: 34%;
}

.billing .billing-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s ease;
}

.billing .billing-right {
  width: 66%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 0 0 0 140px;
}

.billing .billing-right h2 {
  font-size: 70px;
}

.billing .billing-right h3 {
  font-size: 34px;
  letter-spacing: 1.5px;
}

.billing .billing-right p {
  font-size: 24px;
  letter-spacing: 0.8px;
}

.billing .line-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 4%;
  height: 62%;
  background: var(--first-color);
  z-index: 20;
}

.billing .line-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 66%;
  height: 22%;
  background: #deeef5;
  z-index: 12;
}

/* ====== ESTILOS "Identidad Corporativa" ====== */
.identity {
  display: flex;
  height: 100vh;
  position: relative;
}

.identity .identity-text {
  position: absolute;
  top: 40px;
  left: 5%;
  font-size: 55px;
  font-weight: 700;
  color: #deeef5;
}

.identity .identity-left {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
}

.identity .identity-left img {
  width: 60%;
  height: auto;
  object-fit: cover;
  transition: 0.3s ease;
  z-index: 30;
}

.identity .identity-right {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 100px 0 0 50px;
}

.identity .identity-right h2 {
  font-size: 70px;
}

.identity .identity-right h3 {
  font-size: 34px;
  letter-spacing: 1.5px;
}

.identity .identity-right p {
  font-size: 24px;
  letter-spacing: 0.8px;
}

.identity .line-left {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 4%;
  height: 62%;
  background: #deeef5;
  z-index: 20;
}

.identity .line-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 62%;
  height: 38px;
  background: var(--second-color);
  z-index: 20;
}

/* ====== ESTILOS "Tarjetas" ====== */
.cards {
  display: flex;
  height: 100vh;
  position: relative;
}

.cards .cards-left {
  width: 35%;
}

.cards .cards-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s ease;
}

.cards .cards-line {
  width: 3%;
  height: 62%;
  background: #deeef5;
}

.cards .cards-right {
  width: 62%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 0 0 0 16%;
}

.cards .cards-right h2 {
  font-size: 70px;
}

.cards .cards-right h3 {
  font-size: 34px;
  letter-spacing: 1.5px;
}

.cards .cards-right p {
  font-size: 24px;
  letter-spacing: 0.8px;
}

.cards .line-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 35%;
  height: 22%;
  background: #deeef56b;
  z-index: 12;
}

.cards .line-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 62%;
  height: 38px;
  background: var(--second-color);
  z-index: 20;
}

/* ====== ESTILOS "Papelería Corporativa" ====== */
.stationery {
  display: flex;
  height: 100vh;
  position: relative;
}

.stationery .stationery-left {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 0 0 90px 90px;
  gap: 10px;
}

.stationery .stationery-left .stationery-left-text {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding-bottom: 20px;
}

.stationery .stationery-left .stationery-info {
  display: flex;
  gap: 40px;
}

.stationery .stationery-left .stationery-info img {
  width: 6%;
}

.stationery .stationery-left .stationery-info .stationery-info-text {
  letter-spacing: 1.2px;
}

.stationery .stationery-line {
  width: 3%;
  height: 62%;
  background: var(--first-color);
}

.stationery .stationery-right {
  width: 17%;
  background: var(--second-color);
}

.stationery .stationery-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 62%;
  height: 38px;
  background: var(--second-color);
  z-index: 20;
}

/* ====== ESTILOS "Redes Social" ====== */
.kit {
  display: flex;
  height: 100vh;
  position: relative;
}

.kit .line-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 62%;
  height: 38px;
  background: var(--first-color);
  z-index: 20;
}

.kit .kit-left {
  width: 16%;
  background: #deeef5;
  margin-top: 80px;
}

.kit .kit-center {
  width: 49%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 0 110px 0 50px;
}

.kit .kit-center h2 {
  font-size: 70px;
}

.kit .kit-center h3 {
  font-size: 34px;
  letter-spacing: 1.5px;
}

.kit .kit-center p {
  font-size: 22px;
  letter-spacing: 0.8px;
}

.kit .kit-right {
  width: 35%;
}

.kit .kit-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transition: 0.3s ease;
}

/* ====== ESTILOS "Artes Gráficas" ====== */
.art {
  display: flex;
  height: 100vh;
  position: relative;
}

.art .art-text {
  position: absolute;
  top: 40px;
  left: 5%;
  font-size: 55px;
  font-weight: 700;
  color: #deeef5;
}

.art .art-left {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  margin-left: 50px;
}

.art .art-left img {
  width: 74%;
  height: auto;
  object-fit: cover;
  transition: 0.3s ease;
  z-index: 30;

}

.art .art-right {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 100px 0 0 0;
}

.art .art-right h2 {
  font-size: 70px;
}

.art .art-right h3 {
  font-size: 34px;
  letter-spacing: 1.5px;
}

.art .art-right p {
  font-size: 24px;
  letter-spacing: 0.8px;
}

.art .line-left {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 4%;
  height: 62%;
  background: var(--first-color);
  z-index: 20;
}

.art .line-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 62%;
  height: 38px;
  background: var(--second-color);
  z-index: 20;
}

/* ====== ESTILOS "Técnicas de impresión" ====== */
.technique {
  display: flex;
  height: 100vh;
  position: relative;
}

.technique-info {
  width: 100%;
  background: #deeef5;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  padding: 60px 0;
}

.technique .card {
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  background: transparent;
  border: none;
}

.technique .card .card-circle {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  overflow: hidden;
  border: 16px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
}

.technique .card .card-circle img {
  width: 58%;
  height: auto;
  object-fit: contain;
}

.technique .card h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--first-color);
}

.technique .card p {
  font-size: 15px;
  line-height: 1.6;
  color: #2d373b;
  max-width: 280px;
}

.technique .technique-text {
  position: absolute;
  bottom: 40px;
  right: 5%;
  font-size: 75px;
  font-weight: 700;
  color: #2d373b;
}

.technique .line-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 4%;
  height: 62%;
  background: var(--first-color);
  z-index: 20;
}

/* ====== ESTILOS "Artículos Promocionales" ====== */
.article {
  display: flex;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.article .line-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 62%;
  height: 38px;
  background: #deeef5;
  z-index: 20;
}

.article .article-text {
  position: absolute;
  top: 40px;
  left: 5%;
  font-size: 55px;
  font-weight: 700;
  color: #deeef5;
}

.article .article-left {
  width: 16%;
  background: var(--second-color);
  margin-top: 21rem;
}

.article .article-center {
  width: 49%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 0 110px 0 50px;
}

.article .article-center h2 {
  font-size: 70px;
}

.article .article-center h3 {
  font-size: 34px;
  letter-spacing: 1.5px;
}

.article .article-center p {
  font-size: 22px;
  letter-spacing: 0.8px;
}

.article .article-right {
  width: 35%;
}

.article .article-right img {
  width: 90%;
  height: 90%;
  object-fit: cover;
  object-position: 60% 20%;
  transition: 0.3s ease;
}

.article .line-article {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 22%;
  background: #deeef56b;
  z-index: 12;
}

.article .line-article .line-article-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-right: 40px;
}

/* ====== ESTILOS "Artículos Promocionales 2" ====== */
.article2 {
  display: flex;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.article2 .line-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 62%;
  height: 38px;
  background: #deeef5;
  z-index: 20;
}

.article2 .article2-left {
  width: 54%;
}

.article2 .article2-left img {
  width: 98%;
  height: 98%;
  object-fit: cover;
  object-position: 60% 20%;
  transition: 0.3s ease;
}

.article2 .article2-center {
  width: 29%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 25px;
  padding: 0 45px 100px;
}

.article2 .article2-center p {
  font-size: 24px;
  text-align: justify;
  letter-spacing: 0.8px;
}

.article2 .article2-right {
  width: 17%;
  background: var(--second-color);
  margin-bottom: 22rem;
}

.article2 .article2-center,
.article2 .article2-left,
.article2 .article2-right {
  position: relative;
  z-index: 5;
}

.article2 .line-article2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 22%;
  background: #deeef56b;
  z-index: 12;
}

.article2 .line-article2 .line-article2-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-right: 40px;
}

.article2 .article2-img {
  width: 700px;
  height: 700px;
  overflow: hidden;
  position: absolute;
  bottom: -320px;
  right: -350px;
  z-index: 1;
}

.article2 .article2-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% -60px;
  transition: 0.3s ease;
}

/* ====== ESTILOS "Hardware" ====== */
.hardware {
  display: flex;
  height: 100vh;
  position: relative;
}

.hardware .hardware-text {
  position: absolute;
  top: 40px;
  left: 5%;
  font-size: 55px;
  font-weight: 700;
  color: #deeef5;
}

.hardware .hardware-left {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 50px;
}

.hardware .hardware-left img {
  width: 80%;
  height: auto;
  object-fit: cover;
  transition: 0.3s ease;
  z-index: 30;
  background: #fbfbfb;
}

.hardware .hardware-right {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 25px;
}

.hardware .hardware-right h2 {
  font-size: 70px;
}

.hardware .hardware-right h3 {
  font-size: 34px;
  letter-spacing: 1.5px;
}

.hardware .hardware-right p {
  font-size: 22px;
  letter-spacing: 0.8px;
}

.hardware .line-hardware {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 22%;
  background: var(--second-color);
}

.hardware .line-hardware .hardware-content {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: justify;
  height: 100%;
  padding: 0 160px 0;
}

.hardware .line-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 4%;
  height: 62%;
  background: #2d373b;
  z-index: 20;
}

/* ====== ESTILOS "Servicios" ====== */
.servicies2 {
  display: flex;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.servicies2 .line-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 62%;
  height: 38px;
  background: #2d373b;
  z-index: 20;
}

.servicies2 .servicies2-left {
  width: 16%;
  background: var(--second-color);
  margin-top: 80px;
}

.servicies2 .servicies2-center {
  width: 49%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 0 110px 0 50px;
}

.servicies2 .servicies2-center h2 {
  font-size: 70px;
}

.servicies2 .servicies2-center h3 {
  font-size: 34px;
  letter-spacing: 1.5px;
}

.servicies2 .servicies2-center p {
  font-size: 22px;
  letter-spacing: 0.8px;
}

.servicies2 .servicies2-right {
  width: 35%;
}

.servicies2 .servicies2-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 18% 50%;
  transition: 0.3s ease;
}

.servicies2 .line-servicies2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 22%;
  background: #deeef56b;
  z-index: 12;
}

/* ====== ESTILOS "Contactanos" ====== */
.contact {
  display: flex;
  height: 100vh;
  position: relative;
}

.contact-left {
  width: 16%;
  background: var(--first-color);
  margin-top: 90px;
}

.contact-center {
  width: 68%;
  background: white;
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.contact-center h2 {
  font-size: 54px;
  font-weight: 700;
  color: #2d373b;
  margin-bottom: 40px;
}

.contact-columns {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.contact-info h3 {
  font-size: 22px;
  font-weight: 700;
  color: #2d373b;
  margin-bottom: 6px;
}

.contact-info p {
  font-size: 20px;
  margin-bottom: 8px;
}

.contact-phone {
  display: flex;
  align-items: center;
  gap: 12px;
}

.whatsapp-icon {
  width: 28px;
}

.contact-social h3 {
  font-size: 22px;
  font-weight: 700;
  color: #2d373b;
  margin-bottom: 15px;
}

.social-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.social-icon {
  width: 35px;
}

.contact-right {
  width: 16%;
  background: #deeef5;
  position: relative;
  overflow: hidden;
}

/* ====== ESTILOS "Footer" ====== */
.footer-end {
  width: 100vw;
  height: 100vh;
  background: #deeef5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  padding-bottom: 80px;
}

.footer-dots {
  display: flex;
  gap: 22px;
}

.footer-dots .dot {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}

.footer-dots .orange {
  background: var(--first-color);
}

.footer-dots .blue {
  background: var(--second-color);
}

.footer-end .footer-link {
  font-size: 26px;
  font-weight: 500;
  color: #2d373b;
  margin-top: 10px;
}