*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;color:#000;padding-top:100px}
.container{max-width:1200px;width:90%;margin:auto}

/* HEADER */
.header{position:fixed;top:0;width:100%;height:100px;background:#fff;border-bottom:1px solid #e5e5e5;z-index:1000}
.header-inner{height:100%;display:flex;justify-content:space-between;align-items:center}
.logo img{height:80px;padding:4px 0}

/* NAV */
.nav{display:flex;align-items:center}
.nav a{margin-left:20px;text-decoration:none;color:#000;position:relative}
.nav a:not(.btn):hover{color:#00a4d1}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:#00a4d1;transition:.3s}
.nav a:not(.btn):hover::after{width:100%}
.btn-header{color:#fff!important}

/* BUTTONS */
.btn{background:#d8006a;color:#fff;padding:10px 22px;text-decoration:none;display:inline-block;transition:.25s}
.btn:hover{background:#00a4d1;transform:translateY(-2px)}
.btn.secondary{background:#fff;color:#000;border:1px solid #000}

/* HERO */
.hero{padding:40px 0 40px}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.hero-text h1{margin-bottom:40px}
.hero-text p{margin-bottom:16px}

/* HERO CAROUSEL */
.hero-carousel{position:relative;height:320px;background:#000;overflow:hidden}
.carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s}
.carousel-slide.active{opacity:1}
.carousel-slide img{width:100%;height:100%;object-fit:cover}

/* SECTIONS */
.section{padding:40px 0;scroll-margin-top:120px}
.section h2{margin-bottom:48px}
.section-alt{background:rgba(0,164,209,.1)}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.service-card{cursor:pointer;text-align: center;}
.service-card h3{margin-bottom:12px;font-size:1rem}
.service-img{
  width:100%;
  aspect-ratio:4/3;
  background-size:cover;
  background-position:center;
}

/* PROJECTS */
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.projects-grid img{
  width:100%;aspect-ratio:4/3;
  object-fit:cover;cursor:pointer;
  transition:transform .3s,border-radius .3s
}
.projects-grid img:hover{transform:scale(1.05);border-radius:20px}

/* LIGHTBOX */
#lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,.85);
  display:none;align-items:center;justify-content:center;
  opacity:0;transition:.3s;z-index:2000
}
#lightbox.open{opacity:1}

/* SERVICE MODAL */
#service-modal{
  position:fixed;inset:0;background:rgba(0,0,0,.85);
  display:none;align-items:center;justify-content:center;
  z-index:3000
}
#service-modal.open{display:flex}
.service-modal-content{
  background:#fff;
  max-width:900px;width:90%;
  padding:40px
}

/* SERVICE CAROUSEL */
.service-carousel{
  position:relative;
  height:300px;
  overflow:hidden;
}
.service-carousel .carousel-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .6s ease;
}
.service-carousel .carousel-slide.active{opacity:1}
.service-carousel img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* CONTACT */
.columns{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.contact-grid{display:grid;grid-template-columns:1.2fr 1.6fr 1.2fr;gap:28px}
.contact-map iframe{width:100%;height:300px;border:0}
.form h3{margin-bottom:24px}
.form input,.form textarea{width:100%;padding:10px;margin-bottom:15px;border:1px solid #ccc}
.form button{border:none}

/* FOOTER */
.footer{padding:40px 0;text-align:center;border-top:1px solid #e5e5e5}

/* MOBILE */
.menu-toggle{display:none;background:none;border:none}
.menu-toggle span{display:block;width:26px;height:3px;background:#000;margin:5px 0}

@media(max-width:900px){
  body{padding-top:90px}
  .header{height:90px}
  .menu-toggle{display:block}
  .nav{
    position:absolute;top:90px;left:0;width:100%;
    background:#fff;flex-direction:column;padding:20px;
    opacity:0;pointer-events:none;transform:translateY(-10px);
    transition:.25s
  }
  .nav.open{opacity:1;pointer-events:auto;transform:none}
  .nav a{margin:6px 0;padding:4px 0}
  .hero-inner,.services-grid,.projects-grid,.columns,.contact-grid{
    grid-template-columns:1fr
  }
  .hero-carousel{height:240px}
}
@media (max-width: 768px) {
  .service-prev {
    left: 8px !important;
  }

  .service-next {
    right: 8px !important;
  }
}

/* ESPACIADO MODAL SERVICIOS */
.service-modal-content h2 {
  margin-bottom: 24px;
}

#service-text {
  margin-bottom: 40px;
}

.service-carousel {
  margin-top: 20px;
}
/* HOVER SERVICIOS (IGUAL QUE PROYECTOS) */
.service-img {
  transition: transform .3s, border-radius .3s;
}

.service-card:hover .service-img {
  transform: scale(1.05);
  border-radius: 20px;
}
/* SECCIÓN EMPRESAS Y AGENCIAS */
#partner h3 {
  margin-bottom: 28px;
}

#partner p {
  margin-bottom: 18px;
  line-height: 1.6;
}

#partner p:last-child {
  margin-bottom: 0;
}
.contact-info .btn-visit {
  margin-top: 24px;
  display: inline-block;
}
/* TELÉFONO COMO ENLACE DE MENÚ */
.contact-info a[href^="tel"] {
  color: #000;
  text-decoration: none;
  position: relative;
}

.contact-info a[href^="tel"]:hover {
  color: #00a4d1;
}

.contact-info a[href^="tel"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: #00a4d1;
  transition: .3s;
}

.contact-info a[href^="tel"]:hover::after {
  width: 100%;
}
.contact-info p {
  margin-bottom: 20px;
}
/* === MODAL CONFIRMACIÓN (FORZADO) === */
#form-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;

  background: rgba(0,0,0,0.75);
  display: none !important;
  align-items: center;
  justify-content: center;

  z-index: 99999 !important;
}

#form-modal.open {
  display: flex !important;
}

.form-modal-content {
  background: #fff;
  padding: 40px;
  max-width: 420px;
  width: 90%;
  border-radius: 16px;
  text-align: center;
}
.hero .btn.secondary:hover {
  background: #f2f2f2;
}
.hero a.btn.secondary {
  background-color: #fff !important;
  color: #000 !important;
  border: 1px solid #fff !important;
}
/* MODAL CONFIRMACIÓN — FORZADO */
#form-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;

  display: none !important;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.75);
  z-index: 99999 !important;
}

#form-modal.open {
  display: flex !important;
}
.form-modal-content p {
  margin-bottom: 32px;
}
/* CERRAR MODAL SERVICIOS */
.service-modal-content {
  position: relative;
}

.service-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;

  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #000;
}

.service-modal-close:hover {
  opacity: 0.6;
}
/* FLECHAS NAVEGACIÓN SERVICIOS */
.service-modal-content {
  position: relative;
}

.service-nav {
  background: rgba(255,255,255,0.9);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  transition: transform .2s ease, background .2s ease;
}

.service-prev {
  left: -20px;
}

.service-next {
  right: -20px;
}

.service-nav:hover {
  transform: translateY(-50%) scale(1.08);
  background: #fff;
}
/* ANIMACIÓN CAMBIO SERVICIO */
#service-title,
#service-text,
#service-carousel {
  transition: opacity .25s ease, transform .25s ease;
}

.service-fade-out {
  opacity: 0;
  transform: translateY(6px);
}

.service-fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* FLECHAS LATERALES — POSICIÓN DEFINITIVA */
.service-modal-content {
  position: relative;
}

.service-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  font-size: 48px !important;
  padding: 8px 16px !important;
  line-height: 1;

  background: rgba(255,255,255,0.9);
  border-radius: 12px;
  cursor: pointer;
  z-index: 10;
}

/* IZQUIERDA */
.service-prev {
  left: -56px !important;
}

/* DERECHA */
.service-next {
  right: -56px !important;
}

/* HOVER */
.service-nav:hover {
  background: #fff;
}
/* FLECHAS LATERALES — DESKTOP */
.service-prev {
  left: -56px;
}

.service-next {
  right: -56px;
}

/* AJUSTE MÓVIL */
@media (max-width: 768px) {
  .service-nav {
    font-size: 40px;
    padding: 6px 12px;
  }

  .service-prev {
    left: 12px !important;
  }

  .service-next {
    right: 12px !important;
  }
}
/* FLECHAS SERVICIOS — ESTILO LIGERO */
.service-nav {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  font-size: 48px;
  padding: 0 8px;
  line-height: 1;
  color: #000;
  cursor: pointer;

  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.service-nav:hover {
  opacity: 0.6;
}

/* DESKTOP: un poco más hacia fuera */
.service-prev {
  left: -72px;
}

.service-next {
  right: -72px;
}

/* MÓVIL: dentro pero pegadas al borde */
@media (max-width: 768px) {
  .service-nav {
    font-size: 40px;
  }

  .service-prev {
    left: 8px;
  }

  .service-next {
    right: 8px;
  }
}
/* AJUSTE FINO: +10px hacia fuera */
.service-prev {
  left: -82px; /* antes -72px */
}

.service-next {
  right: -82px; /* antes -72px */
}
/* FLECHAS SERVICIOS — POSICIÓN FINAL FORZADA */
#service-modal .service-modal-content .service-prev {
  left: -5px !important;
}

#service-modal .service-modal-content .service-next {
  right: -5px !important;
}
/* CONTENEDOR */
.service-modal-content {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}

/* ESTADOS DE ANIMACIÓN */
.service-slide-out-left {
  animation: slideOutLeft .35s ease forwards;
}

.service-slide-in-right {
  animation: slideInRight .35s ease forwards;
}

.service-slide-out-right {
  animation: slideOutRight .35s ease forwards;
}

.service-slide-in-left {
  animation: slideInLeft .35s ease forwards;
}

/* KEYFRAMES */
@keyframes slideOutLeft {
  to { transform: translateX(-100%); opacity: 0; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
  to { transform: translateX(100%); opacity: 0; }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
/* APERTURA MODAL */
.service-zoom-in {
  animation: zoomIn .35s ease forwards;
}

@keyframes zoomIn {
  from {
    transform: scale(0.92);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* CIERRE MODAL */
.service-zoom-out {
  animation: zoomOut .3s ease forwards;
}

@keyframes zoomOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.92);
    opacity: 0;
  }
}
#lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:none;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .3s ease;
  z-index:2000;
}

#lightbox.open{
  opacity:1;
}

#lightbox img{
  max-width:90%;
  max-height:90%;
}


#lightbox .lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 48px;
  padding: 12px 18px;
  background: rgba(0,0,0,0.4);
  border-radius: 0%;
  border: none;
  color: #fff;
  cursor: pointer;
  z-index: 10;
}

#lightbox .lightbox-nav.prev {
  left: 16px;
}

#lightbox .lightbox-nav.next {
  right: 16px;
}

/* MÓVIL */
@media (max-width: 768px) {
  #lightbox .lightbox-nav {
    font-size: 40px;
    padding: 10px 14px;
  }
}
/* BOTÓN MENÚ MÓVIL — MÁS ÁREA TÁCTIL */
@media (max-width: 768px) {
  .nav a.btn-header {
    display: block;
    width: 100%;
    padding: 14px 20px;   /* ← más padding vertical */
    margin-top: 12px;
    text-align: center;
    font-size: 1rem;
  }
}