.portafolio-page{
  display:none;
  position:relative;
  width:100%;
  min-height:100vh;
  background:#ffffff;
  box-sizing:border-box;
  padding:0 0 60px;
  overflow:visible;
}

.portafolio-page.show{
  display:block;
}

/* USA EL MISMO HERO DE INICIO */
.portafolio-banner.home-hero{
  margin-bottom:clamp(70px, 10vw, 120px);
}

/* BOTÓN VER PDF */
#openPdfBtn{
  position:relative;
}

/* ESCRITORIO */
@media (min-width:769px){

  .portafolio-banner .home-hero-content{
    width:var(--home-hero-content-width);
  }

  .portafolio-banner .home-hero-title{
    position: relative;
    font-size:var(--home-hero-title-size-desktop);
    line-height:var(--home-title-line-height);
  }

  .portafolio-banner .home-hero-content p{
    position:relative;
    top:var(--home-subtitle-top-desktop);
    left:var(--home-subtitle-left-desktop);
    max-width:var(--home-subtitle-width-desktop);
    font-size:var(--home-subtitle-size-desktop);
    line-height:var(--home-subtitle-line-height);
  }

  .portafolio-banner .home-hero-actions{
    position:relative;
    top:var(--home-btn-top-desktop);
    left:var(--home-btn-left-desktop);
    margin-top:0;
  }

  #openPdfBtn{
    width:var(--home-btn-width-desktop);
    height:var(--home-btn-height-desktop);
    padding:0 var(--home-btn-padding-x-desktop);
    font-size:var(--home-btn-font-size-desktop);
  }

  #openPdfBtn .btn-eye-icon{
    width:var(--home-btn-icon-size-desktop);
    height:var(--home-btn-icon-size-desktop);
  }
}

/* MÓVIL */
@media (max-width:768px){

  .portafolio-banner.home-hero{
  overflow:visible;
  height:auto;
  min-height:var(--home-hero-height-mobile);
  padding-bottom:clamp(160px, 38vw, 240px);
}

  .portafolio-banner .home-hero-content{
    width:100%;
  }

  .portafolio-banner .home-hero-title{
    top:var(--home-title-mobile-top);
    left:var(--home-title-mobile-left);
    width:var(--home-title-mobile-width);
    font-size:var(--home-title-mobile-size);
  }

  .portafolio-banner .home-hero-content p{
    top:var(--home-subtitle-top-mobile);
    left:var(--home-subtitle-left-mobile);
    max-width:var(--home-subtitle-width-mobile);
    font-size:var(--home-subtitle-size-mobile);
  }

.portafolio-banner .home-hero-actions{
  position:relative;
  top:var(--home-btn-top-mobile);
  left:var(--home-btn-left-mobile);

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;

  margin-top:0;
  z-index:5;
}

#openPdfBtn,
#downloadPdfBtn{
  width:var(--home-btn-width-mobile);
  height:var(--home-btn-height-mobile);
  padding:0 var(--home-btn-padding-x-mobile);
  font-size:var(--home-btn-font-size-mobile);
  flex-shrink:0;
}
}

.portafolio-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--home-btn-gap);
}

#openPdfBtn,
#downloadPdfBtn{
  text-decoration:none;
}

#openPdfBtn .btn-eye-icon,
#downloadPdfBtn .btn-eye-icon{
  object-fit:contain;
  position:relative;
}

#openPdfBtn .btn-text,
#downloadPdfBtn .btn-text{
  font-size:inherit;
  line-height:1.05;
  font-weight:900;
  text-align:center;
}

@media (min-width:769px){
  #openPdfBtn .btn-eye-icon,
  #downloadPdfBtn .btn-eye-icon{
    width:var(--home-btn-icon-size-desktop);
    height:var(--home-btn-icon-size-desktop);
  }
}

@media (max-width:768px){
  #openPdfBtn .btn-eye-icon,
  #downloadPdfBtn .btn-eye-icon{
    width:var(--home-btn-icon-size-mobile);
    height:var(--home-btn-icon-size-mobile);
  }
}

.pdf-viewer-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.72);
  padding:clamp(14px, 3vw, 36px);
  box-sizing:border-box;
}

.pdf-viewer-modal.show{
  display:flex;
  align-items:center;
  justify-content:center;
}

.pdf-viewer-content{
  width:min(96vw, 1180px);
  height:min(92vh, 820px);
  background:#ffffff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 25px 70px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
}

.pdf-viewer-header{
  height:64px;
  padding:0 clamp(18px, 3vw, 34px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid rgba(7,26,68,.12);
  background:#ffffff;
}

.pdf-viewer-header h3{
  margin:0;
  color:#071a44;
  font-size:clamp(16px, 2vw, 24px);
  font-weight:900;
  text-transform:uppercase;
}

.pdf-viewer-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

.pdf-viewer-download{
  color:#0072ff;
  font-size:14px;
  font-weight:900;
  text-decoration:none;
  text-transform:uppercase;
}

.pdf-viewer-close{
  width:42px;
  height:42px;
  border:none;
  background:transparent;
  color:#071a44;
  font-size:36px;
  line-height:1;
  cursor:pointer;
}

.pdf-viewer-frame{
  width:100%;
  height:100%;
  border:none;
  background:#ffffff;
}

@media (max-width:768px){

  .pdf-viewer-modal{
    padding:10px;
  }

  .pdf-viewer-content{
    width:100%;
    height:92vh;
    border-radius:12px;
  }

  .pdf-viewer-header{
    height:auto;
    min-height:58px;
    padding:12px 14px;
  }

  .pdf-viewer-header h3{
    font-size:15px;
  }

  .pdf-viewer-download{
    font-size:12px;
  }

  .pdf-viewer-close{
    width:34px;
    height:34px;
    font-size:30px;
  }
}

:root{
  --portfolio-services-width-desktop:calc(100% - 12vw);
  --portfolio-services-margin-top-desktop:clamp(-40px, -3vw, -20px);
  --portfolio-services-title-size-desktop:clamp(18px, 2vw, 26px);
  --portfolio-services-card-padding-desktop:clamp(18px, 2vw, 26px);
  --portfolio-services-icon-size-desktop:clamp(42px, 4vw, 62px);
  --portfolio-services-card-title-size-desktop:clamp(13px, 1.1vw, 16px);
  --portfolio-services-card-text-size-desktop:clamp(11px, .9vw, 14px);

  --portfolio-services-width-mobile:calc(100% - 48px);
  --portfolio-services-margin-top-mobile:clamp(-60px, -12vw, -30px);
  --portfolio-services-title-size-mobile:clamp(18px, 5vw, 24px);
  --portfolio-services-icon-size-mobile:46px;
  --portfolio-services-card-title-size-mobile:15px;
  --portfolio-services-card-text-size-mobile:13px;
}

.portfolio-services{
  width:var(--portfolio-services-width-desktop);
  margin:var(--portfolio-services-margin-top-desktop) auto 70px;
}

.portfolio-services-title{
  margin:0 0 28px;
  text-align:center;
  color:#071a44;
  font-size:var(--portfolio-services-title-size-desktop);
  font-weight:900;
  text-transform:uppercase;
}

.portfolio-services-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px, 1.5vw, 22px);
}

.portfolio-service-card{
  min-width:0;
  background:#ffffff;
  border:1px solid rgba(0,114,255,.12);
  border-radius:14px;
  padding:var(--portfolio-services-card-padding-desktop);
  text-align:center;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
}

.portfolio-service-icon{
  width:var(--portfolio-services-icon-size-desktop);
  height:var(--portfolio-services-icon-size-desktop);
  object-fit:contain;
  margin:0 auto 14px;
  display:block;
}

.portfolio-service-info{
  min-width:0;
}

.portfolio-service-title{
  margin:0 0 10px;
  color:#071a44;
  font-size:var(--portfolio-services-card-title-size-desktop);
  font-weight:900;
  text-transform:uppercase;
}

.portfolio-service-text{
  margin:0;
  color:#334155;
  font-size:var(--portfolio-services-card-text-size-desktop);
  line-height:1.45;
}

/* CONTROL INDEPENDIENTE - ESCRITORIO */

.service-web-icon{ width:62px; height:62px; position:relative; top:0; left:0; }
.service-publicidad-icon{ width:62px; height:62px; position:relative; top:0; left:0; }
.service-catalogo-icon{ width:62px; height:62px; position:relative; top:0; left:0; }
.service-whatsapp-icon{ width:98px; height:78px; position:relative; top:0; left:0; }
.service-formulario-icon{ width:62px; height:62px; position:relative; top:0; left:0; }
.service-comunidad-icon{ width:62px; height:62px; position:relative; top:0; left:0; }
.service-soporte-icon{ width:62px; height:62px; position:relative; top:0; left:0; }
.service-seo-icon{ width:120px; height:78px; position:relative; top:0; left:0; }

.service-web-title,
.service-publicidad-title,
.service-catalogo-title,
.service-whatsapp-title,
.service-formulario-title,
.service-comunidad-title,
.service-soporte-title,
.service-seo-title{
  position:relative;
  top:0;
  left:0;
}

.service-web-text,
.service-publicidad-text,
.service-catalogo-text,
.service-whatsapp-text,
.service-formulario-text,
.service-comunidad-text,
.service-soporte-text,
.service-seo-text{
  position:relative;
  top:0;
  left:0;
}

@media (max-width:768px){

  .portfolio-services{
    width:var(--portfolio-services-width-mobile);
    margin:var(--portfolio-services-margin-top-mobile) auto 60px;
  }

  .portfolio-services-title{
    font-size:var(--portfolio-services-title-size-mobile);
  }

  .portfolio-services-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

.portfolio-service-card{
  display:flex;
  align-items:center;
  gap:16px;
  text-align:left;
  padding:18px;
  min-width:0;
}

.portfolio-service-info{
  min-width:0;
  flex:1;
}

  .portfolio-service-icon{
    flex:0 0 var(--portfolio-services-icon-size-mobile);
    width:var(--portfolio-services-icon-size-mobile);
    height:var(--portfolio-services-icon-size-mobile);
    margin:0;
  }

  .portfolio-service-title{
    font-size:var(--portfolio-services-card-title-size-mobile);
    margin:0 0 6px;
  }

  .portfolio-service-text{
    font-size:var(--portfolio-services-card-text-size-mobile);
  }

/* CONTROL INDEPENDIENTE - MÓVIL */

.service-web-icon{ flex:0 0 46px; width:46px; height:46px; position:relative; top:0; left:0; }
.service-publicidad-icon{ flex:0 0 46px; width:46px; height:46px; position:relative; top:0; left:0; }
.service-catalogo-icon{ flex:0 0 46px; width:46px; height:46px; position:relative; top:0; left:0; }
.service-whatsapp-icon{ flex:0 0 58px; width:88px; height:58px; position:relative; top:0; left:-15px; }
.service-formulario-icon{ flex:0 0 46px; width:46px; height:46px; position:relative; top:0; left:0; }
.service-comunidad-icon{ flex:0 0 46px; width:46px; height:46px; position:relative; top:0; left:0; }
.service-soporte-icon{ flex:0 0 46px; width:46px; height:46px; position:relative; top:0; left:0; }
.service-seo-icon{ flex:0 0 58px; width:100px; height:58px; position:relative; top:0; left:-20px; }
.service-web-title,
.service-publicidad-title,
.service-catalogo-title,
.service-whatsapp-title,
.service-formulario-title,
.service-comunidad-title,
.service-soporte-title,
.service-seo-title{
  position:relative;
  top:0;
  left:0;
}

.service-web-text,
.service-publicidad-text,
.service-catalogo-text,
.service-whatsapp-text,
.service-formulario-text,
.service-comunidad-text,
.service-soporte-text,
.service-seo-text{
  position:relative;
  top:0;
  left:0;
}
}

:root{
  --portfolio-preview-width-desktop:calc(100% - 12vw);
  --portfolio-preview-margin-top-desktop:clamp(20px, 4vw, 60px);
  --portfolio-preview-title-size-desktop:clamp(18px, 2vw, 26px);

  --portfolio-preview-img-width-desktop:clamp(90px, 8vw, 130px);
  --portfolio-preview-img-height-desktop:clamp(120px, 11vw, 170px);
  --portfolio-preview-gap-desktop:clamp(12px, 1.4vw, 22px);

  --portfolio-preview-width-mobile:calc(100% - 48px);
  --portfolio-preview-margin-top-mobile:clamp(25px, 8vw, 50px);
  --portfolio-preview-title-size-mobile:clamp(18px, 5vw, 24px);

  --portfolio-preview-img-width-mobile:120px;
  --portfolio-preview-img-height-mobile:160px;
  --portfolio-preview-gap-mobile:14px;
}

.portfolio-preview{
  width:var(--portfolio-preview-width-desktop);
  margin:var(--portfolio-preview-margin-top-desktop) auto 70px;
}

.portfolio-preview-title{
  margin:0 0 28px;
  text-align:center;
  color:#071a44;
  font-size:var(--portfolio-preview-title-size-desktop);
  font-weight:900;
  text-transform:uppercase;
}

.portfolio-preview-carousel{
  position:relative;
  width:100%;
}

.portfolio-preview-track{
  display:flex;
  gap:var(--portfolio-preview-gap-desktop);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:8px 6px 18px;
}

.portfolio-preview-track::-webkit-scrollbar{
  height:8px;
}

.portfolio-preview-track::-webkit-scrollbar-thumb{
  background:#c7d2e5;
  border-radius:20px;
}

.portfolio-preview-item{
  flex:0 0 auto;
  width:var(--portfolio-preview-img-width-desktop);
  text-align:center;
  scroll-snap-align:start;
}

.portfolio-preview-img{
  width:100%;
  height:var(--portfolio-preview-img-height-desktop);
  object-fit:cover;
  border-radius:8px;
  border:1px solid rgba(0,114,255,.18);
  box-shadow:0 10px 24px rgba(15,23,42,.10);
}

.portfolio-preview-item p{
  margin:8px 0 0;
  color:#071a44;
  font-size:clamp(10px, .9vw, 13px);
  font-weight:700;
}

.portfolio-preview-arrow{
  position:absolute;
  top:40%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  background:#ffffff;
  color:#071a44;
  font-size:32px;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(15,23,42,.18);
  z-index:3;
}

.portfolio-preview-arrow-left{
  left:-18px;
}

.portfolio-preview-arrow-right{
  right:-18px;
}

.portfolio-preview-main-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:clamp(260px, 30vw, 390px);
  height:52px;
  margin:24px auto 0;
  border:none;
  border-radius:8px;
  background:#0072ff;
  color:#ffffff;
  font-size:clamp(14px, 1.2vw, 17px);
  font-weight:900;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(0,114,255,.28);
}

@media (max-width:768px){

  .portfolio-preview{
    width:var(--portfolio-preview-width-mobile);
    margin:var(--portfolio-preview-margin-top-mobile) auto 60px;
  }

  .portfolio-preview-title{
    font-size:var(--portfolio-preview-title-size-mobile);
  }

  .portfolio-preview-track{
    gap:var(--portfolio-preview-gap-mobile);
    padding-bottom:16px;
  }

  .portfolio-preview-item{
    width:var(--portfolio-preview-img-width-mobile);
  }

  .portfolio-preview-img{
    height:var(--portfolio-preview-img-height-mobile);
  }

  .portfolio-preview-arrow{
    display:none;
  }

  .portfolio-preview-main-btn{
    width:100%;
    height:52px;
  }
}

.portfolio-preview-img{
  cursor:pointer;
}

.portfolio-image-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(0,0,0,.78);
  padding:clamp(12px, 3vw, 36px);
  box-sizing:border-box;
}

.portfolio-image-modal.show{
  display:flex;
  align-items:center;
  justify-content:center;
}

.portfolio-image-content{
  position:relative;
  width:min(96vw, 1180px);
  height:min(92vh, 820px);
  background:#ffffff;
  border-radius:14px;
  padding:clamp(10px, 2vw, 18px);
  box-shadow:0 25px 70px rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
}

.portfolio-image-full{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:10px;
}

.portfolio-image-close{
  position:absolute;
  top:10px;
  right:12px;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:#ffffff;
  color:#071a44;
  font-size:34px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  z-index:2;
}

@media (max-width:768px){
  .portfolio-image-modal{
    padding:10px;
  }

  .portfolio-image-content{
    width:100%;
    height:92vh;
    border-radius:12px;
    padding:8px;
  }

  .portfolio-image-close{
    width:36px;
    height:36px;
    font-size:30px;
  }
}

/* IMAGEN BANNER PORTAFOLIO */

.portafolio-banner{
  position:relative;
  overflow:hidden;
}

.portafolio-banner-image{
  position:absolute;
  width:var(--portafolio-img-width-desktop);
  right:var(--portafolio-img-right-desktop);
  top:var(--portafolio-img-top-desktop);
  transform:translateY(-50%);
  opacity:var(--portafolio-img-opacity-desktop);
  height:auto;
  object-fit:contain;
  pointer-events:none;
  max-width:52%;
}

/* CONTROLES */
:root{
  --portafolio-img-width-desktop:clamp(300px, 36vw, 520px);
  --portafolio-img-right-desktop:clamp(30px, 7vw, 100px);
  --portafolio-img-top-desktop:60%;
  --portafolio-img-opacity-desktop:1;

  --portafolio-img-width-mobile:clamp(120px, 75vw, 260px);
  --portafolio-img-right-mobile:10px;
  --portafolio-img-top-mobile:82%;
  --portafolio-img-opacity-mobile:1;
}

@media (max-width:768px){
  .portafolio-banner-image{
    width:var(--portafolio-img-width-mobile);
    right:var(--portafolio-img-right-mobile);
    top:var(--portafolio-img-top-mobile);
    opacity:var(--portafolio-img-opacity-mobile);
    max-width:none;
  }
}