* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}
h1 {
  font-size: 2.5rem; /* o el valor que quieras */
  font-weight: 900;
  margin-bottom: 1rem;
}

h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

section h1 {
  font-size: 2.5rem;
}



.wrapper {
  max-inline-size: 1158px;
  padding-inline-end: 16px;
  padding-inline-start: 16px;
  margin: auto;
}

html,
body {
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #161616;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Menú desplegable a pantalla completa */
.fullscreen-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1a1a1a;
  color: #fff;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  transition: opacity 0.3s ease;
}

.fullscreen-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.fullscreen-menu li {
  margin: 20px 0;
  font-size: 2rem;
  position: relative;
}

.fullscreen-menu a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  position: relative;
  padding-bottom: 5px;
  transition: color 0.3s;
}

.fullscreen-menu a:hover {
  color: #ff6347;
  /* Color al hacer hover */
}

.fullscreen-menu a::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  background: #ff6347;
  left: 0;
  bottom: 0;
  transition: width 0.3s ease;
}

.fullscreen-menu a:hover::after {
  width: 100%;
}

/* OPTIMIZACIÓN GPU - Forzar aceleración por hardware */
.text-contents,
.text-contents>div,
.work,
.ideas,
.services,
.service-box,
.footer,
.s-icon,
.work-item,
.btn {
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  perspective: 1000px;
}

.header {
  background-color: #ff512f;
  padding-top: 5rem;
  padding: 2rem;
  text-align: left;
  animation: fadeInDown 0.6s ease-out;
  display: flex;
  align-items: center;
}

.header section {
  margin-left: auto;
}

.logo {
  height: 90px;
}

.hero-container {
  background: radial-gradient(circle at bottom left, #7b0fd5 12%, #ff512f 50%);
}


.fullscreen-menu {
  opacity: 0;
  pointer-events: none;
}

.fullscreen-menu.show {
  display: flex;
  opacity: 1;
  pointer-events: all;
}

.hero {
  padding: 8rem 2rem;
  text-align: center;
  overflow: hidden;
  min-height: 110vh;
}

.s-icon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  height: auto;
  z-index: 1;
  opacity: 0.9;
  display: flex;
  justify-content: center;
}

.s-icon img {
  margin-top: 30px;
  height: 80vh;
  object-fit: cover;
  opacity: 0.8;
}

.text-content {
  background-color: transparent;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.text-contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  gap: 4rem;
  height: 600px;
  opacity: 0;
  transform: translate3d(0, 80px, 0);
  /* OPTIMIZACIÓN: Transición más rápida y suavizada */
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.text-contents-container {
  display: flex;
  justify-content: space-between;
  flex-direction: column;

}

.main-text {
  flex: 2.2;
}

.text-contents.animate {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.text-contents>div:first-child {
  text-align: left;
  opacity: 0;
  transform: translate3d(-100px, 0, 0);

  /* OPTIMIZACIÓN: Transición más rápida */
  transition: opacity 0.3s ease-out 0.1s, transform 0.3s ease-out 0.1s;
}

.text-contents.animate>div:first-child {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.text-contents>div:first-child h2 {
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.text-contents>div:last-child {
  flex: 1;
  text-align: left;
  opacity: 0;
  transform: translate3d(100px, 0, 0);
  /* OPTIMIZACIÓN: Transición más rápida */
  transition: opacity 0.3s ease-out 0.2s, transform 0.3s ease-out 0.2s;
}

.text-contents.animate>div:last-child {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.text-contents>div:last-child p {
  margin-bottom: 1.2rem;
  font-size: 1.2rem;
  line-height: 1.7;
  opacity: 0.9;
  font-weight: 400;
}

.text-contents>div:last-child p:last-child {
  margin-bottom: 0;
}

.bold {
  font-weight: 900;
}

.btn {
  background: #fff;
  color: #000;
  padding: 0.75rem 1.5rem;
  border: none;
  font-weight: bold;
  margin-top: 2rem;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: inline-block;
  text-align: center;
}

.btn:hover {
  background-color: #f0f0f0;
  color: #161616;
  transform: scale(1.05);
  /* Ahora sí se nota */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.work-item:hover {
  transform: translate3d(0, 0, 0) scale(1.05);
}

.work {
  margin-top: 4rem;
  background: #161616;
  padding: 4rem;
  min-height: 110vh;
  display: flex;
  flex-direction: column;
}

.work-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 290px 1fr;
  flex: 1;
  gap: 2rem;
  height: 100%;
}

.vertical-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: fit-content;
}

.vertical-title {
  transform: rotate(-90deg) translate3d(0, 0, 0);
  font-size: 6rem;
  font-weight: 900;
  color: #ff512f;
  white-space: nowrap;
  margin: 0;
}

.work-gallery {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-areas:
    "a b"
    "a c";
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-self: stretch;
}

.work-item {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.work-item::before,
.work-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 1s ease-in-out;
  z-index: 0;
}

.work-item::before {
  opacity: 1;
}

.work-item::after {
  opacity: 0;
}
.work-item::before {
  background-image: var(--bg-old);
}

.work-item::after {
  background-image: var(--bg-new);
}

.work-item.fade::before {
  opacity: 0;
}

.work-item.fade::after {
  opacity: 1;
}
.work-item.one{
    grid-area: a;
}




.btn {
  margin: 2rem auto;
  font-size: 2rem;
  border-radius: 25px;
  border: #ccc 7px solid;
  background-color: transparent;
  color: white;
}

.ideas {
  background: #161616;
  padding: 8rem 1rem;
  text-align: center;
  min-height: 60vh;
}

.ideas h2 {
  font-size: 6rem;
  font-weight: 900;
}

.light {
  text-shadow:
    rgb(255 255 255) 3px 0px 0px,
    rgb(255 255 255) 2.83487px 0.981584px 0px,
    rgb(255 255 255) 2.35766px 1.85511px 0px,
    rgb(255 255 255) 1.62091px 2.52441px 0px,
    rgb(255 255 255) 0.705713px 2.91581px 0px,
    rgb(255 255 255) -0.287171px 2.98622px 0px,
    rgb(255 255 255) -1.24844px 2.72789px 0px,
    rgb(255 255 255) -2.07227px 2.16926px 0px,
    rgb(255 255 255) -2.66798px 1.37182px 0px,
    rgb(255 255 255) -2.96998px 0.42336px 0px,
    rgb(255 255 255) -2.94502px -0.571704px 0px,
    rgb(255 255 255) -2.59586px -1.50383px 0px,
    rgb(255 255 255) -1.96093px -2.27041px 0px,
    rgb(255 255 255) -1.11013px -2.78704px 0px,
    rgb(255 255 255) -0.137119px -2.99686px 0px,
    rgb(255 255 255) 0.850987px -2.87677px 0px,
    rgb(255 255 255) 1.74541px -2.43999px 0px,
    rgb(255 255 255) 2.44769px -1.73459px 0px,
    rgb(255 255 255) 2.88051px -0.838247px 0px;
  color: #161616;
  font-size: clamp(2rem, 6vw, 6rem);
  font-weight: 700;
  display: block;
  text-align: center;
  line-height: 1.3;
  /* ✅ MÁS ESPACIO ENTRE LÍNEAS */
  padding: 0 1rem;
  margin-bottom: 1rem;
}


.light::selection {
  color: transparent;
}

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.services {
  padding: 3rem 0px;
  background-color: #161616;
  color: white;
}

.services-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem auto;
}

.services-header h2 {
  font-size: 4rem;
  /* color: rgb(255, 81, 47); */
  margin-bottom: 1rem;
  font-weight: 800;
}

.services-header p {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.75);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  justify-items: center;
}

.service-box {
  background: linear-gradient(145deg, #1a1a1a, #101010);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 2rem;
  width: 100%;
  max-width: 380px;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}



/* .service-box::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 160%;
  background: radial-gradient(circle at center, rgba(255, 82, 47, 0.05), transparent 70%);
  z-index: 0;
  transition: opacity 0.3s ease;
} */

.service-box:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.service-box h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: #ffffff;
  position: relative;
  z-index: 1;
}

.service-box p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  position: relative;
  z-index: 1;
}



.services.animate .service-box {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.services.animate .service-box:nth-child(1) {
  transition-delay: 0.05s;
}

.services.animate .service-box:nth-child(2) {
  transition-delay: 0.1s;
}

.services.animate .service-box:nth-child(3) {
  transition-delay: 0.15s;
}

.service-box:hover {
  /* OPTIMIZACIÓN: Usar translate3d y transición más rápida */
  transform: translate3d(0, -8px, 0) scale(1.02);
  transition: transform 0.2s ease-out;
}

.footer {
  padding: 1rem 0px;
  padding-top: 2rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px;
  border-top: 3px solid rgba(255, 255, 255, 0.8);
  color: rgba(255, 255, 255, 0.8);
  /* transform: translate3d(0, 60px, 0); */
  /* OPTIMIZACIÓN: Transición más rápida */
  /* transition: opacity 0.4s ease-out, transform 0.4s ease-out; */
}

.footer.animate {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.footer img {
  height: 60px;
}

.social-icons img {
  height: 20px;
  margin-left: 1rem;
  /* OPTIMIZACIÓN: Transición más rápida */
  transition: transform 0.2s ease-out;
}

.social-icons img:hover {
  transform: translate3d(0, 0, 0) scale(1.2);
}



/* OPTIMIZACIÓN: Animaciones más rápidas y suaves */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -30px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-50px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(50px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.ideas h2,
.ideas .light {
  opacity: 0;
  display: inline-block;
}

/* OPTIMIZACIÓN: Animaciones más rápidas */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translate3d(-200px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translate3d(-200px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.ideas.animate h2 {
  animation: slideInLeft 0.4s ease-out forwards;
}

.light.animate {
  animation: slideInRight 0.4s ease-out forwards;
}

/* Nueva sección de experiencia */
.experience {
  padding: 8rem 2rem;
  text-align: center;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.experience-container {
  max-width: 1200px;
  width: 100%;
  opacity: 0;
  transform: translate3d(0, 60px, 0);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.experience.animate .experience-container {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.experience-title {
  font-size: 5rem;
  font-weight: 900;
  margin-bottom: 3rem;
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity 0.3s ease-out 0.1s, transform 0.3s ease-out 0.1s;
}

.experience.animate .experience-title {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.experience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem;
  margin-top: 2rem;
}

.experience-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 3rem 2rem;
  text-align: center;
  opacity: 0;
  transform: translate3d(0, 60px, 0);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out, box-shadow 0.2s ease-out;
}

.experience.animate .experience-card:nth-child(1) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.2s;
}

.experience.animate .experience-card:nth-child(2) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.2s;
}

.experience.animate .experience-card:nth-child(3) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.2s;
}

.experience-card:hover {
  /* border: #000; */
  border: 1px solid rgba(236, 230, 230, 0.7);

  transform: translate3d(0, -13px, 0);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.experience-number {
  font-size: 4rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 1rem;
  display: block;
}

.experience-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.experience-description {
  font-size: 0.9rem;
  color: #fff;
  opacity: 0.7;
  margin-top: 0.5rem;
  line-height: 1.4;
}

.container {
  background: radial-gradient(circle at bottom left, #7b0fd5 10%, #ff512f 40%);

}


.contact-section {
  max-width: 1200px;
  margin: auto;
  padding: 60px 0px;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.contact-box {
  background: #1a1a1a;
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
  padding: 40px;
  flex: 1;
  min-width: 300px;
  max-width: 700px;
}

.contact-box h2 {
  font-size: 2.8rem;
  color: #ff512f;
  margin-bottom: 20px;
  text-align: center;
}

.contact-form label {
  font-weight: 500;
  margin-bottom: 5px;
  display: block;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 1rem;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: white;
  transition: 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  background: rgba(255, 255, 255, 0.1);
  outline: 2px solid #ff512f;
}

.contact-form textarea {
  resize: vertical;
  height: 100px;
}

.contact-form button {
  width: 100%;
  background: #ff512f;
  color: white;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.contact-form button:hover {
  background: #ff512f;
  transform: scale(1.02);
}

.contact-info {
  flex: 0.8;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  padding: 20px;
}

.contact-info h3 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.contact-info p {
  font-size: 1rem;
  margin: 4px 0;
}

.socials {
  margin-top: 1.5rem;
}

.socials h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.socials a {
  display: inline-block;
  margin-right: 10px;
  background: white;
  border-radius: 8px;
  padding: 6px;
}

.socials img {
  height: 24px;
  vertical-align: middle;
}

/* Botón hamburguesa */
.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 24px;
  width: 30px;
  padding: 0;
  z-index: 1101;
}

.menu-toggle .line {
  width: 100%;
  height: 3px;
  background-color: white;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Posición botón fuera del menú (icono hamburguesa) */
.outside-menu {
  position: absolute;
  top: 30px;
  right: 30px;
}

/* Posición botón dentro del menú (la X) */
.inside-menu {
  position: absolute;
  top: 30px;
  right: 30px;
}

/* Icono convertido a X */
.menu-toggle.open .line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.open .line:nth-child(2) {
  opacity: 0;
}

.menu-toggle.open .line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Fondo menú fullscreen */
.fullscreen-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #1a1a1a;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Mostrar el menú */
.fullscreen-menu.show {
  opacity: 1;
  pointer-events: auto;
}

/* Menú Links */
.fullscreen-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.fullscreen-menu li {
  margin: 20px 0;
  font-size: 2rem;
}

.fullscreen-menu a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  position: relative;
  padding-bottom: 5px;
  transition: color 0.3s;
}

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

.fullscreen-menu a::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  background: #ff6347;
  left: 0;
  bottom: 0;
  transition: width 0.3s ease;
}

.fullscreen-menu a:hover::after {
  width: 100%;
}

/* Bloquear scroll cuando el menú está activo */
body.menu-open {
  overflow: hidden;
}