/* ===========================================
   RESPONSIVE.CSS — COMPLETO (LIMPIO + CORREGIDO)
   ✅ Sin duplicados / sin conflictos
   ✅ Mobile (<=760px) centrado real
   ✅ Portfolio thumbs sin recorte
   ✅ Modal responsive
   ✅ Navbar burger + panel (UN solo sistema con body.nav-open)
=========================================== */


/* =========================
   MOBILE ONLY (<= 760px)
========================= */
@media (max-width: 760px){
 
  /* 0) Anti overflow (scroll horizontal) */
  html, body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  * , *::before, *::after{ box-sizing: border-box; }
  img, svg{ max-width: 100%; height: auto; }


  /*--------------------------------------------------------
    FOOTER
  --------------------------------------------------------*/
  .footer{
    padding: 64px 18px 26px;
    text-align: center;
  }

  .footer-wrap{ width: 100%; }

  .footer-top{
    grid-template-columns: 1fr;
    gap: 28px;
    justify-items: center;
    align-items: center;
  }

  .footer-brand,
  .footer-col,
  .footer-col-wide{
    width: 100%;
    max-width: 520px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
  }

  .footer-col-wide{
    border-left: none;
    padding-left: 0;
    margin-top: 0;
  }

  .footer-brand-link{
    width: auto;
    justify-content: center;
  }

  .footer-logo-img{ margin: 0 auto; }

  .footer-slogan{
    margin-left: auto;
    margin-right: auto;
    max-width: 34ch;
  }

  .footer-title{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .footer-link{
    width: auto;
    text-align: center;
  }
  .footer-link:hover{ transform: none; }

  .footer-contact{ align-items: center; }
  .footer-meta{ align-items: center; }

  .footer-meta-row{
    justify-content: center;
    text-align: center;
  }

  .footer-cta{
    width: 100%;
    max-width: 420px;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-news{
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-news input,
  .footer-news button{ width: 100%; }

  .footer-trust{ justify-content: center; }

  .footer-bottom{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
  }

  .footer-line{ margin: 34px 0 16px; }


  /*--------------------------------------------------------
    ABOUT (Head + centrados)
  --------------------------------------------------------*/
  .about-head{
    padding-inline: 10px;
    max-width: 560px;
    margin: 0 auto 30px;
    text-align: center;
  }

  .about-kicker{
    font-size: 11px;
    letter-spacing: .30em;
  }

  .about-title{
    font-size: clamp(34px, 10.5vw, 46px);
    line-height: 1.06;
    letter-spacing: .02em;

    max-width: 16ch;
    margin: 10px auto 0;

    overflow-wrap: anywhere;
    word-break: break-word;
    text-wrap: balance;
    text-align: center;
  }

  .about-title::after{
    inset: -12px;
    filter: blur(22px);
    opacity: .75;
  }

  .about-subtitle{
    font-size: 11px;
    letter-spacing: .20em;
    margin-top: 10px;
    text-align: center;
  }

  .about-head::after{
    margin-top: 16px;
    width: min(420px, 86%);
  }

  .about-head::before{
    width: min(420px, 86%);
    height: 34px;
    bottom: -18px;
    filter: blur(26px);
    opacity: .8;
  }

  /* ✅ Centrado real del texto y párrafos */
  .about-text,
  .about-text p{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* ✅ Contadores perfectamente centrados */
  .about .counters{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    justify-items: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .about .counter{
    width: 100% !important;
    max-width: 520px !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  .about .counter-num{
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
    justify-self: center !important;
    align-self: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .about .counter-label{
    width: 100% !important;
    text-align: center !important;
    justify-self: center !important;
  }


  /*--------------------------------------------------------
    SPIN RING (CLIENTS)
  --------------------------------------------------------*/
  .clients{ padding: 64px 18px 84px; }

  .clients-orbit{
    width: min(520px, 100%);
    aspect-ratio: 1 / 1;
  }

  .clients-center{
    width: clamp(210px, 58vw, 260px);
    height: clamp(210px, 58vw, 260px);
    padding: 14px;
  }

  .clients-head{
    max-width: 260px;
    margin: 0;
    text-align: center;
  }

  .clients-kicker{
    padding-top: 0;
    margin-bottom: 8px;
    font-size: 9px;
    letter-spacing: .28em;
  }

  .clients-title{
    font-size: clamp(18px, 6.8vw, 26px);
    line-height: 1.06;
    letter-spacing: .04em;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .clients-subtitle{
    font-size: 9px;
    letter-spacing: .16em;
    line-height: 1.45;
    max-width: 24ch;
    margin: 0 auto;
  }

  .clients-head::after{
    width: min(240px, 86%);
    margin-top: 14px;
  }

  .clients-head::before{
    width: min(240px, 86%);
    height: 30px;
    bottom: -16px;
    filter: blur(26px);
  }

  .clients-ring{ animation-duration: 22s; }
  .client-rot{ animation-duration: 22s; }

  .client-item{
    width: clamp(62px, 16vw, 78px);
    height: clamp(62px, 16vw, 78px);
    margin: calc(clamp(62px, 16vw, 78px) / -2);
    --radius: clamp(150px, 36vw, 210px);
  }

  .client-item:hover .client-inner{ transform: scale(1.12); }

  .client-item::after{
    font-size: 9px;
    letter-spacing: .12em;
    padding: 6px 9px;
    bottom: -10px;
    max-width: 80vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  /*--------------------------------------------------------
    CAROUSEL
  --------------------------------------------------------*/
  .v-carousel{ padding: 64px 18px 84px; }

  .v-carousel-head{
    margin: 0 auto 26px;
    max-width: 520px;
    text-align: center;
  }

  .v-carousel-kicker{
    font-size: 10px;
    letter-spacing: .28em;
  }

  .v-carousel-title{
    font-size: clamp(40px, 12vw, 58px);
    line-height: 1.04;
    letter-spacing: .05em;
    text-align: center;
  }

  .v-carousel-subtitle{
    font-size: 10px;
    letter-spacing: .18em;
  }

  .v-carousel-head::after{
    width: min(320px, 86%);
    margin-top: 14px;
  }

  .v-carousel-head::before{
    width: min(320px, 86%);
    height: 30px;
    bottom: -16px;
  }

  .v-carousel-shell{
    padding: 12px;
    border-radius: 22px;
  }

  .v-carousel-viewport{
    padding: 0;
    border-radius: 18px;
  }

  .v-carousel-track{
    padding: 10px 8px;
    gap: 12px;
    grid-auto-columns: 72%;
    align-items: center;
  }

  .v-card{
    border-radius: 18px;
    aspect-ratio: 3 / 4;
    max-height: 460px;
    box-shadow: 0 16px 42px rgba(0,0,0,.38);
    opacity: .90;
  }

  .v-card.is-active{
    transform: translateY(-1px) scale(1);
    box-shadow: 0 22px 62px rgba(0,0,0,.48);
  }

  

  .v-carousel-dots{
    margin-top: 12px;
    gap: 8px;
  }
  .v-dot{
    width: 7px;
    height: 7px;
  }


  /*--------------------------------------------------------
    HERO (título más grande en móvil)
  --------------------------------------------------------*/
  .hero-title{
    font-size: clamp(52px, 14vw, 74px) !important;
    line-height: 1.02 !important;
    letter-spacing: .02em !important;
    text-align: center;
  }


  /*--------------------------------------------------------
    CONTACT (centrado + tamaño título)
  --------------------------------------------------------*/
  .contact-title{
    font-size: clamp(34px, 8.2vw, 48px);
    line-height: 1.06;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .contact-head{
    text-align: center;
  }

  .contact-info .info-card{
    text-align: center;
    align-items: center;
  }
  .contact-info .info-title{
    text-align: center;
    width: 100%;
  }
  .contact-info .info-text,
  .contact-info .info-link{
    text-align: center;
    width: 100%;
    display: block;
  }

  .contact-info .socials{
    display: grid;
    gap: 12px;
    justify-items: center;
  }
  .contact-info .social{
    width: 100%;
    justify-content: center;
  }


  /*--------------------------------------------------------
    PORTFOLIO THUMBS (✅ sin recorte)
  --------------------------------------------------------*/
  .pf-card .pf-media{
    position: relative !important;
    display: block !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    height: auto !important;
  }

  .pf-card .pf-media::before{
    content: "" !important;
    display: block !important;
    height: clamp(200px, 56vw, 300px) !important;
    border-radius: 18px !important;
    background: rgba(0,0,0,.35) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
  }

  .pf-card .pf-media > img{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    background: rgba(0,0,0,.35) !important;
  }

  .pf-card .pf-chip{
    position: absolute !important;
    z-index: 5 !important;
    top: 12px !important;
    left: 12px !important;
  }


  /*--------------------------------------------------------
    PORTFOLIO MODAL (centrado + media contain)
  --------------------------------------------------------*/
  .pf-modal{
    align-items: center;
    justify-content: center;
    padding: 18px;
  }

  .pf-modal.is-open{ display: flex; }

  .pf-modal-card{
    width: min(980px, 92vw);
    max-height: 88vh;
    border-radius: 22px;
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.14);
    background: rgba(10,10,14,.62);
    backdrop-filter: blur(14px);
    box-shadow: 0 40px 120px rgba(0,0,0,.70);

    display: flex;
    flex-direction: column;
  }

  .pf-modal-title{
    margin: 0;
    padding: 16px 56px 12px 16px;
    font-size: 13px;
    letter-spacing: .18em;
    line-height: 1.35;
    background: linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,0));
  }

  .pf-modal-media,
  #pfModalMedia{
    padding: 14px;
    display: grid;
    place-items: center;
    max-height: calc(88vh - 62px);
  }

  #pfModalMedia .pf-modal-image{
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: calc(88vh - 86px);
    object-fit: contain;
    border-radius: 16px;
    background: rgba(0,0,0,.45);
    outline: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 22px 60px rgba(0,0,0,.55);
  }

  #pfModalMedia iframe,
  #pfModalMedia video{
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 16px;
    background: #000;
    outline: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 22px 60px rgba(0,0,0,.55);
    max-height: calc(88vh - 86px);
  }

  .pf-modal-close{
    top: 12px;
    right: 12px;
  }



  /* 1) HERO: título MÁS grande en móvil */
.hero-title{
  font-size: clamp(56px, 14.5vw, 76px) !important;
  line-height: 1.00 !important;
  letter-spacing: .02em !important;
  text-align: center !important;
}

/* 2) ABOUT: contadores centrados (número + texto) */
.about .counters{
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-items: center !important;
  text-align: center !important;
}

.about .counter{
  width: 100% !important;
  max-width: 520px !important;
  display: grid !important;
  justify-items: center !important;
  align-items: center !important;
  text-align: center !important;
}

.about .counter-num,
.about .counter-label{
  width: 100% !important;
  text-align: center !important;
  justify-self: center !important;
}

/* 3) CAROUSEL: aumenta título "DOBLE B" */
.v-carousel-title{
  font-size: clamp(46px, 13vw, 68px) !important;
  line-height: 1.03 !important;
  letter-spacing: .06em !important;
  text-align: center !important;
}

/* 4) CONTACT: reduce título principal */
.contact-title{
  font-size: clamp(26px, 7.2vw, 36px) !important;
  line-height: 1.08 !important;
  letter-spacing: .02em !important;
  text-align: center !important;
}

/* 5) CONTACT: centrar "Respuesta rápida", "Email", "Redes" */
.contact-info{
  width: 100%;
}

.contact-info .info-card{
  text-align: center !important;
  align-items: center !important;
}

.contact-info .info-title{
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.contact-info .info-text,
.contact-info .info-link{
  width: 100% !important;
  text-align: center !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* redes: botones centrados */
.contact-info .socials{
  display: grid !important;
  justify-items: center !important;
  gap: 12px;
}

.contact-info .social{
  width: 100%;
  justify-content: center !important;
}

/* 6) CONTACT: centrar el contenedor highlight "Doble B / Contenido que conecta" */
.contact-info .info-card.highlight{
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
}

.contact-info .info-card.highlight .info-title,
.contact-info .info-card.highlight .info-text{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}




/* =========================
   EXTRA: MUY PEQUEÑO (<= 380px)
========================= */


  .clients-center{
    width: 200px;
    height: 200px;
  }

  .client-item{ --radius: 145px; }

  .clients-title{ font-size: 18px; }

  .v-carousel-track{ grid-auto-columns: 78%; }

  .v-card{ max-height: 420px; }




/* =========================
   MODAL EXTRA (<= 560px)
========================= */


  .pf-modal{ padding: 12px; }

  .pf-modal-card{
    width: calc(100% - 0px);
    max-height: 90vh;
    border-radius: 18px;
  }

  .pf-modal-title{
    font-size: 12px;
    padding: 14px 52px 10px 14px;
    letter-spacing: .16em;
  }

  #pfModalMedia{
    padding: 12px;
    max-height: calc(90vh - 58px);
  }

  #pfModalMedia .pf-modal-image,
  #pfModalMedia iframe,
  #pfModalMedia video{
    border-radius: 14px;
    max-height: calc(90vh - 92px);
  }

  .pf-modal-close{
    width: 36px;
    height: 36px;
    font-size: 20px;
  }




/* ===============================
   NAVBAR — MOBILE BURGER + PANEL
   ✅ UN SOLO SISTEMA (body.nav-open)
================================ */

/* Burger base (desktop apagado) */
.navbar-burger{
  display:none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,14,.55);
  backdrop-filter: blur(10px);
  cursor: pointer;
  position: relative;
  z-index: 10001;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.navbar-burger:hover{
  transform: scale(1.04);
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.06);
}

.navbar-burger span{
  position:absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow:
    0 0 12px rgba(255,255,255,.10),
    0 0 22px rgba(221,132,72,.10),
    0 0 22px rgba(42,167,255,.08);
  transition: transform .25s ease, top .25s ease, opacity .2s ease;
}

.navbar-burger span:nth-child(1){ top: 15px; }
.navbar-burger span:nth-child(2){ top: 22px; }
.navbar-burger span:nth-child(3){ top: 29px; }


/* lock scroll */



/* ===============================
   MOBILE LAYOUT (<= 900px)
================================ */


  /* navbar por encima */
  .navbar{ z-index: 10000; }

  /* grid simple: logo + burger */
  .navbar-wrap{
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
  }

  /* oculta CTA en barra (si la tienes) */
  .navbar-cta{ display:none; }

  /* muestra burger */
  .navbar-burger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* panel flotante */
  .navbar-links{
    position: fixed;
    left: 14px;
    right: 14px;
    top: calc(72px + 12px);

    display: flex;
    flex-direction: column;
    gap: 6px;

    padding: 14px;
    border-radius: 22px;

    border: 1px solid rgba(255,255,255,.14);
    background: rgba(10,10,14,.72);
    backdrop-filter: blur(14px);

    box-shadow: 0 30px 90px rgba(0,0,0,.55);
    z-index: 9999;

    opacity: 0;
    transform: translateY(-10px) scale(.98);
    pointer-events: none;

    transition: opacity .22s ease, transform .22s ease;
  }

  /* abrir panel */
  body.nav-open .navbar-links{
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  /* links tocables */
  .navbar-links .nav-link{
    width: 100%;
    padding: 14px 12px;
    border-radius: 14px;

    font-size: 12px;
    letter-spacing: .22em;
    text-align: left;

    color: rgba(255,255,255,.90);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);

    transition: transform .18s ease, background .18s ease, border-color .18s ease;
  }

  .navbar-links .nav-link:active{ transform: scale(.98); }

  /* en mobile quitamos halos/subrayados */
  .navbar-links .nav-link::before,
  .navbar-links .nav-link::after{
    content:none !important;
    display:none !important;
  }


/* burger animación a X cuando está abierto */
body.nav-open .navbar-burger span:nth-child(1){
  top: 22px;
  transform: rotate(45deg);
}
body.nav-open .navbar-burger span:nth-child(2){
  opacity: 0;
}
body.nav-open .navbar-burger span:nth-child(3){
  top: 22px;
  transform: rotate(-45deg);
}
/* =========================================
   FIX: Portfolio thumbs (quita "ovalo blur" raro)
   + Modal imagen SIEMPRE completa (sin recorte)
   PÉGALO AL FINAL de responsive.css
========================================= */



  /* ---------------------------
     1) QUITAR EL "OVALO / BLUR"
     (suele venir de ::after en pf-media o de ::before/::after en pf-card)
  --------------------------- */

  /* mata overlays raros de la card */
  .pf-card::before,
  .pf-card::after{
    content: none !important;
    display: none !important;
    filter: none !important;
    backdrop-filter: none !important;
  }

  /* ✅ este es el más típico del “ovalo blur” */
  .pf-card .pf-media::after{
    content: none !important;
    display: none !important;
    filter: none !important;
    backdrop-filter: none !important;
  }

  /* tu caja “placeholder” (la que da altura) la dejamos en ::before,
     pero SIN efectos raros */
  .pf-card .pf-media::before{
    filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important; /* opcional */
  }

  /* asegura que la imagen esté arriba de cualquier overlay */
  .pf-card .pf-media > img{
    z-index: 2 !important;
  }



  /* ---------------------------
     2) MODAL: imagen SIEMPRE completa (sin recorte)
     - Si es vertical y muy alta: scroll dentro del modal
  --------------------------- */

  /* el área de media debe permitir scroll (no recortar) */
  .pf-modal-media,
  #pfModalMedia{
    overflow: auto !important;
    max-height: calc(88vh - 62px) !important; /* respeta tu título */
    -webkit-overflow-scrolling: touch;
  }

  /* 🔥 regla súper fuerte para ganarle a cualquier cover/height:100% */
  .pf-modal .pf-modal-media img.pf-modal-image,
  .pf-modal #pfModalMedia img.pf-modal-image{
    width: 100% !important;
    height: auto !important;

    /* si es muy grande, que se ajuste por ancho y haga scroll si hace falta */
    max-width: 100% !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center !important;

    display: block !important;
  }


/* (opcional) También en desktop, por si alguna regla te pisa ahí */
.pf-modal .pf-modal-media img.pf-modal-image,
.pf-modal #pfModalMedia img.pf-modal-image{
  object-fit: contain !important;
  object-position: center !important;
  height: auto !important;
}


/* =========================================
   FIX ÓVALO EN MOBILE — PORTFOLIO CARDS
   (pegar AL FINAL del responsive.css)
========================================= */


  /* 1) Quitar highlight/outline nativo del button (el óvalo típico) */
  .pf-service-card{
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }
  .pf-service-card:focus,
  .pf-service-card:active,
  .pf-service-card:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }
  .pf-service-card::-moz-focus-inner{ border: 0 !important; }

  /* 2) Si el óvalo viene de pseudo-elementos (blur/halo) los apagamos en mobile */
  .pf-service-card::before,
  .pf-service-card::after{
    content: none !important;
    display: none !important;
  }

  /* 3) Si el óvalo viene del SVG eléctrico/filters en mobile, neutraliza filtros */
  .pf-service-card .service-electric{
    filter: none !important;
    opacity: 1 !important;
  }
  .pf-service-card .service-electric__stroke{
    animation: none !important;
    stroke-dasharray: none !important;
  }

     /* Elimina la pastilla/óvalo del título */
  .pf-service-card .service-name::after{
    content: none !important;
    display: none !important;
  }


/* =========================================
   FIX NUCLEAR: ÓVALO (tap/focus/ring/glow) EN MÓVIL
   Pegar AL FINAL del responsive.css
   Si el óvalo está en otra sección, cambia .services por tu contenedor real
========================================= */


  /* Quita highlight nativo de tap (óvalo típico en móviles) */
  .services, .services *{
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
  }

  /* Mata cualquier ring/outline/box-shadow de focus/active */
  .services *:focus,
  .services *:active,
  .services *:focus-visible{
    outline: none !important;
    box-shadow: none !important;
    filter: none !important; /* por si el “óvalo” viene de un glow */
  }

  /* Si hay botones/links dentro, elimina estilos nativos */
  .services button,
  .services a,
  .services input,
  .services select,
  .services textarea{
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* Si el óvalo viene de SVG glow/filter, esto lo neutraliza */
  .services svg,
  .services svg *{
    filter: none !important;
  }

  /* el tag (texto) sin “pill/ovalo” */
  .pf-chip,
  .pf-tag,
  .pf-badge{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* por si el óvalo viene de pseudo-elementos */
  .pf-chip::before,
  .pf-chip::after,
  .pf-tag::before,
  .pf-tag::after,
  .pf-badge::before,
  .pf-badge::after{
    content: none !important;
    display: none !important;
  }

  /* extra: si algún overlay del media está creando forma rara */
  .pf-media::before,
  .pf-media::after{
    content: none !important;
    display: none !important;
  }

  /* =========================
   FIX: quitar óvalos decorativos en tarjetas (móvil)
   (los que aparecen sobre la imagen en "Diseño gráfico / Edición de video / Foto & Video")
========================= */
.service-media::before,
.service-media::after,
.pf-media::before,
.pf-media::after{
  content: none !important;
  display: none !important;
}





 /* contenedor: horizontal */
  .hero-electric .hero-cta{
    display:flex !important;
    flex-direction: row !important;   /* 👈 uno al lado del otro */
    gap: 10px !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  /* base: más pequeños */
  .hero-electric .hero-cta a.btn{
    padding: 8px 12px !important;
    font-size: 10px !important;
    letter-spacing: .18em !important;
    min-height: 34px !important;

    width: auto !important;           /* 👈 evita que se estiren */
    max-width: 170px !important;
    white-space: nowrap !important;   /* 👈 no se parten */
  }

  /* ✅ para que NO tengan el mismo tamaño */
  .hero-electric .hero-cta a.btn.primary{
    padding: 9px 14px !important;     /* un poquito más grande */
    max-width: 190px !important;
  }

  .hero-electric .hero-cta a.btn.ghost{
    padding: 7px 11px !important;     /* un poquito más pequeño */
    max-width: 160px !important;
    opacity: .95 !important;
  }


 /* =========================================
   PF FILTER — FIX TOTAL (no activa todas + no deformes)
   PON ESTO AL FINAL DE responsive.css
========================================= */

/* Base: que NO parezcan activas */
.page-portfolio .pf-service-card{
  position: relative;
  transform: none;
}

/* El borde eléctrico (SVG) en estado normal: MUY sutil */
.page-portfolio .pf-service-card .service-electric{
  opacity: .25;
  transform: none;
  transition: opacity .25s ease, transform .25s ease;
}

/* Stroke normal suave */
.page-portfolio .pf-service-card .service-electric__stroke{
  stroke-width: 1.4;
  filter: none;
}

/* Estado ACTIVO: SOLO esta debe verse “encendida” */
.page-portfolio .pf-service-card.is-active .service-electric{
  opacity: 1;
}

.page-portfolio .pf-service-card.is-active .service-electric__stroke{
  stroke-width: 2.2;
  filter:
    drop-shadow(0 0 8px var(--electric))
    drop-shadow(0 0 18px color-mix(in srgb, var(--electric) 55%, transparent));
}

/* Activo SIN deformar (quita scale/translate de tus bloques anteriores) */
.page-portfolio .pf-service-card.is-active{
  transform: none !important;
  animation: none !important;
  border-color: color-mix(in srgb, var(--electric) 70%, #fff 30%);
  box-shadow:
    0 22px 55px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.12),
    0 0 16px color-mix(in srgb, var(--electric) 30%, transparent);
}

/* Evita taps raros por capas */
.page-portfolio .pf-service-card .service-electric,
.page-portfolio .pf-service-card .service-electric *{
  pointer-events: none !important;
}

/* =========================================
   MOBILE: 4 en fila + tamaño compacto + sin deformes
========================================= */


  .page-portfolio .pf-services-grid{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .page-portfolio .pf-service-card{
    width: auto !important;
    min-width: 0 !important;
    padding: 10px 8px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    text-align: center !important;
  }

  /* Mantén proporción bonita (evita “aplastadas”) */
  .page-portfolio .pf-service-card{
    aspect-ratio: 1 / 1; /* cuadradas */
    display: grid;
    grid-template-rows: auto 1fr auto;
    place-items: center;
  }

  .page-portfolio .pf-service-card .service-media{
    width: 34px !important;
    height: 34px !important;
    margin: 0 auto 6px !important;
  }

  .page-portfolio .pf-service-card .service-media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
    pointer-events: none !important;
  }

  .page-portfolio .pf-service-card .service-name{
    font-size: 9px !important;
    line-height: 1.12 !important;
    letter-spacing: .10em !important;
    margin: 0 !important;

    /* recorte pro para que no se reviente */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

   /* contenedor mini */
  .blog-filter-cards--mini{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 10px !important;
  }

  /* 🔥 ALTURA CLAVE */
  .blog-filter-cards--mini .blog-filter-card{
    height: auto !important;
    aspect-ratio: 1 / 1 !important;   /* cuadradas */
    max-height: 120px !important;
    min-height: 90px !important;
    padding: 6px !important;
  }

  /* imagen dominante */
  .blog-filter-card .service-media{
    height: 70px !important;
    border-radius: 12px !important;
    margin: 0 auto !important;

    display:flex;
    align-items:center;
    justify-content:center;
  }

  .blog-filter-card .service-media img{
    width: 64px !important;
    height: 64px !important;
    max-width: 100% !important;
    transform:none !important;
  }

  /* texto más fino */
  .blog-filter-card .service-name{
    font-size: 9px !important;
    letter-spacing:.10em !important;
    margin: 6px auto 0 !important;
  }

  .blog-filter-cards--mini{
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  /* CARD: compacta */
  .blog-filter-cards--mini .blog-filter-card{
    aspect-ratio: 1 / 0.85 !important;   /* 👈 clave */
    min-height: 96px !important;
    max-height: 110px !important;
    padding: 6px !important;
    border-radius: 18px !important;
  }

  /* borde eléctrico más contenido */
  .blog-filter-card .service-electric{
    inset: 6px !important;
    opacity: .85;
  }

  /* MEDIA: icono protagonista */
  .blog-filter-card .service-media{
    height: 58px !important;
    margin: 6px auto 0 !important;
    border-radius: 12px !important;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .blog-filter-card .service-media img{
    width: 52px !important;
    height: 52px !important;
    max-width: 100%;
    max-height: 100%;
    transform: none !important;
  }

  /* TEXTO */
  .blog-filter-card .service-name{
    font-size: 9px !important;
    letter-spacing: .12em !important;
    margin: 6px 0 4px !important;
    line-height: 1.1;
  }

  /* estado activo: sutil (no estira) */
  .blog-filter-card.is-active{
    transform: translateY(-2px) scale(1.03) !important;
  }



  /* vuelve a habilitar flechas (estaban en display:none) */
  .v-prev, .v-next{
    display: flex !important;
    pointer-events: auto !important;
    opacity: .95;
  }

  /* tamaño/posición para móvil (más estético) */
  .v-carousel-btn{
    width: 42px;
    height: 42px;
    z-index: 20;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; /* tap rápido */
  }

  .v-prev{ left: 10px; }
  .v-next{ right: 10px; }

  /* evita que el viewport “tape” los botones en algunos iPhone */
  .v-carousel-viewport{
    position: relative;
    z-index: 1;
  }

  .v-carousel-shell{
    position: relative;
  }

  /* fuerza visible aunque exista un display:none antes */
  .v-carousel .v-prev,
  .v-carousel .v-next{
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  /* posicionarlas encima del carrusel */
  .v-carousel .v-carousel-btn{
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 42px;
    height: 42px;
    border-radius: 999px;

    z-index: 9999 !important; /* por si algo las tapa */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .v-carousel .v-prev{ left: 10px !important; }
  .v-carousel .v-next{ right: 10px !important; }

  /* por si el viewport está arriba en stacking */
  .v-carousel-viewport{
    position: relative;
    z-index: 1;
  }

  .v-carousel .v-carousel-btn{
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
  backdrop-filter: blur(10px);
}

/* ✅ FLECHAS ACTIVAS EN MOBILE (<=760px) */
.v-carousel-shell{
  position: relative;
  overflow: visible; /* clave para que no se corten */
}

.v-carousel .v-prev,
.v-carousel .v-next{
  display: flex !important;
  align-items: center;
  justify-content: center;
  pointer-events: auto !important;
  opacity: 1 !important;
  z-index: 9999 !important;
}

.v-carousel .v-carousel-btn{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 42px;
  height: 42px;
  border-radius: 999px;

  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;

  backdrop-filter: blur(10px);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.v-carousel .v-prev{ left: 10px !important; }
.v-carousel .v-next{ right: 10px !important; }

/* por si algo tapa encima */
.v-carousel-viewport{
  position: relative;
  z-index: 1;
}





/* ✅ permite scroll vertical normal aunque el carrusel tenga drag */
.v-carousel-viewport{
  touch-action: pan-y;
}

.hero-electric .hero-cta{
    display: flex !important;
    flex-direction: column !important;  /* ✅ uno debajo del otro */
    gap: 12px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-electric .hero-cta a.btn{
    width: min(260px, 86vw) !important; /* ✅ mismo ancho y centrados */
    max-width: 320px !important;
    white-space: nowrap !important;
  }

  /* opcional: el principal un pelín más “pro” */
  .hero-electric .hero-cta a.btn.primary{
    padding: 10px 16px !important;
  }

  .hero-electric .hero-cta a.btn.ghost{
    padding: 9px 16px !important;
    opacity: .98 !important;
  }


  /* =========================
     TITULOS DE SECCIÓN – GLOW MOBILE
  ========================= */

  .about-title,
  .services-title,
  .clients-title,
  .v-carousel-title,
  .contact-title,
  .blog-title,
  .portfolio-title {
    
    /* Glow fuerte visible en móvil */
    text-shadow:
      0 0 12px rgba(255,255,255,.55),
      0 0 28px rgba(221,132,72,.65),
      0 0 60px rgba(42,167,255,.55),
      0 0 110px rgba(42,167,255,.45);
  }

   .about-kicker,
  .services-kicker,
  .clients-kicker,
  .blog-kicker,
  .portfolio-kicker {

    text-shadow:
      0 0 10px rgba(255,255,255,.45),
      0 0 26px rgba(221,132,72,.45),
      0 0 44px rgba(42,167,255,.35);
  }
}




/* ✅ BLOG FILTERS: 4 EN UNA FILA (MOBILE) — override final */
@media (max-width: 768px){
  .blog-filter-cards--mini{
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  /* opcional: compactar un poco para que quepan 4 */
  .blog-filter-cards--mini .blog-filter-card{
    min-width: 0 !important;
    padding: 8px 6px !important;
    min-height: 92px !important;
  }
}


@media (max-width: 760px){
  .services .btn-portfolio{
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
    color: #fff !important;
    display: inline-flex !important;
  }
  .services .btn-portfolio:link,
  .services .btn-portfolio:visited{
    color: #fff !important;
  }
  .services .btn-portfolio .btn-text{
    color: #fff !important;
    text-decoration: none !important;
  }
}


/* =========================================
   CLIENTS — TOOLTIP FIX (DESKTOP + MOBILE)
   ✅ Tooltip en .client-rot (queda SIEMPRE recto)
   ✅ Desktop: hover
   ✅ Mobile: tap (focus/active + clase .is-tip)
========================================= */

/* 1) Apaga el tooltip viejo si todavía existiera en .client-item */
.client-item::after{
  content: none !important;
  display: none !important;
}

/* 2) Tooltip NUEVO: vive en .client-rot */
.client-rot{
  position: relative;
}

/* tooltip base */
.client-rot::after{
  content: attr(data-name);
  position: absolute;
  left: 50%;
  bottom: -14px;

  /* ✅ SIEMPRE recto */
  transform: translateX(-50%) translateY(8px) rotate(0deg);
  transform-origin: center;

  white-space: nowrap;
  pointer-events: none;

  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;

  padding: 8px 12px;
  border-radius: 999px;

  color: rgba(255,255,255,.92);
  background: rgba(10,10,14,.78);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);

  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 16px 36px rgba(0,0,0,.45);

  /* evita rarezas de iOS con texto */
  -webkit-font-smoothing: antialiased;
}

/* 3) Desktop: hover normal */
@media (hover:hover) and (pointer:fine){
  .client-item:hover .client-rot::after{
    opacity: 1;
    transform: translateX(-50%) translateY(12px) rotate(0deg);
  }
}

/* 4) Mobile: mostrar con tap (active/focus) */
@media (hover:none) and (pointer:coarse){
  /* cuando el link/tap cae encima, iOS suele activar :active */
  .client-item:active .client-rot::after,
  .client-item:focus-within .client-rot::after,
  .client-item.is-tip .client-rot::after{
    opacity: 1;
    transform: translateX(-50%) translateY(12px) rotate(0deg);
  }

  /* ajustes mobile (más chico y que no se corte) */
  .client-rot::after{
    font-size: 9px;
    letter-spacing: .12em;
    padding: 6px 9px;
    bottom: -10px;
    max-width: 80vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}