/* Yafun — experiencia mobile (pantallas táctiles de hasta 960 px).
   Se carga después de los estilos de cada página; la versión de escritorio no se ve afectada. */
@media (max-width:960px){
  /* Encabezado fijo: transparente sobre el banner, compacto y sólido al bajar */
  .y .nav{position:fixed!important;top:0;left:0;right:0;transition:background-color .3s ease,box-shadow .3s ease}
  .y .nav-in{transition:height .3s ease,min-height .3s ease}
  .m-scrolled .y .nav{background:rgba(11,59,54,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
  .m-scrolled .y .nav-in{height:64px!important;min-height:64px!important}
  .m-scrolled .y .nav-in>a img{height:30px!important}
  .m-scrolled .y .nav-in .lang,.m-scrolled .y .mobile-toggle{min-height:42px}
  /* Sin desenfoque con el menú abierto: si no, el menú fijo se mediría contra la barra */
  html:has(.mobile-menu) .y .nav{background:#0B3B36;-webkit-backdrop-filter:none;backdrop-filter:none}
  .y [id]{scroll-margin-top:76px}
  .y .tools{top:64px!important}

  /* Menú a pantalla completa */
  html:has(.mobile-menu){overflow:hidden}
  .y .mobile-menu{position:fixed!important;top:var(--m-nav,80px)!important;left:0!important;right:0!important;bottom:0;max-height:none!important;display:flex!important;flex-direction:column;padding:20px 20px calc(24px + env(safe-area-inset-bottom))!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow-y:auto}
  .m-scrolled .y .mobile-menu{--m-nav:64px}
  .y .mobile-menu>a:not(.btn){min-height:58px!important;font-size:20px!important;font-family:'Plus Jakarta Sans','Helvetica Neue',sans-serif;letter-spacing:-.01em}
  .y .mobile-menu .btn{min-height:54px;margin-top:24px!important;font-size:16px}
  @media (prefers-reduced-motion:no-preference){
    .y .mobile-menu{animation:mmIn .28s cubic-bezier(.2,.7,.2,1) both}
    .y .mobile-menu>*{animation:mmItem .4s cubic-bezier(.2,.7,.2,1) both}
    .y .mobile-menu>:nth-child(2){animation-delay:.03s}.y .mobile-menu>:nth-child(3){animation-delay:.06s}
    .y .mobile-menu>:nth-child(4){animation-delay:.09s}.y .mobile-menu>:nth-child(5){animation-delay:.12s}
    .y .mobile-menu>:nth-child(6){animation-delay:.15s}.y .mobile-menu>:nth-child(7){animation-delay:.18s}
    .y .mobile-menu>:nth-child(n+8){animation-delay:.21s}
  }
  @keyframes mmIn{from{opacity:0}to{opacity:1}}
  @keyframes mmItem{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  /* Botones flotantes: WhatsApp siempre a mano, sin tapar formularios */
  .y .float .up{display:none!important}
  .y .float{right:16px!important;transition:opacity .25s ease}
  .y .wa{width:54px!important;height:54px!important}
  .y:has(input:focus,textarea:focus) .float{opacity:0;pointer-events:none}

  /* Ritmo general y tipografía */
  .y section{padding-top:64px!important;padding-bottom:64px!important}
  .y #productos{padding-top:0!important}
  .y section h2{font-size:30px!important;line-height:1.15!important;text-wrap:balance}
  .y p{text-wrap:pretty}

  /* Formularios: 16 px para que el teclado no haga zoom */
  .y input,.y textarea,.y select:not(.lang),.y .in{font-size:16px!important}
  .y .in{min-height:54px}
  .y form .btn[type=submit]{width:100%;min-height:54px}

  /* Objetivos táctiles */
  .y .crumbs .back{min-height:44px!important}
  .y footer .fl{display:inline-flex;align-items:center;min-height:44px}
  .y .soc{width:46px;height:46px}

  /* Respuesta al tocar (las pantallas táctiles no tienen hover) */
  @media (hover:none){
    .y .btn:active,.y .ficha-link:active,.y .chip2:active,.y .tab:active{transform:scale(.97)}
    .y .btn,.y .ficha-link,.y .chip2,.y .tab{transition:transform .15s ease,background-color .2s ease}
    .y .cat:active,.y .pc:active,.y .work:active,.y .line:active,.y .faq-q:active{opacity:.92}
    .y .cat .go{opacity:1!important;transform:none!important;width:36px;height:36px;flex-basis:36px}
    .y a,.y button{-webkit-tap-highlight-color:transparent}
  }

  /* Animaciones de entrada más cortas y livianas */
  @supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
    .y .rv{animation-name:rvm;animation-range:entry 0% entry 30%}
    .y .open{animation:none}
  }}
  @keyframes rvm{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

  /* ——— Home ——— */
  .y .hero{height:100svh!important;min-height:580px!important;max-height:780px}
  .y .hero h1{font-size:34px!important;line-height:1.12!important;text-wrap:balance;max-width:none!important}
  .y .hero h1 .mask,.y .hero h1 .mask>span{display:inline;animation:none!important}
  .y .hero h1 .mask::after{content:" "}
  @media (prefers-reduced-motion:no-preference){.y .hero h1{animation:fadeUp .9s .45s cubic-bezier(.2,.7,.2,1) both}}
  .y .hero-sub{font-size:17px!important;margin-top:16px!important}
  .y .hero-cta{flex-direction:column;margin-top:28px!important}
  .y .hero-cta .btn{width:100%;min-height:54px}

  .y section[aria-label="Respaldo"] p.hd{font-size:21px!important;line-height:1.45!important;text-align:left!important}
  .y section[aria-label="Respaldo"] .stack{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:32px 12px!important;margin-top:40px!important}
  .y section[aria-label="Respaldo"] .st{padding:0!important;text-align:left!important}
  .y section[aria-label="Respaldo"] .st p{margin-left:0!important;max-width:none!important}
  .y section[aria-label="Respaldo"] .st .hd{font-size:44px!important}
  .y section[aria-label="Respaldo"] .st p:last-child{font-size:14px!important;margin-top:8px!important}

  .y .line{height:440px!important;padding:24px!important;border-radius:20px}
  .y .line h3{font-size:28px!important}
  .y .line p{font-size:15px!important}
  .y .line>div{margin-top:20px!important}
  .y .line .btn{flex:1 1 auto;min-height:50px}
  .y #productos .rv[style*="space-between"]{flex-wrap:wrap;gap:8px 16px!important;margin:48px 0 18px!important}
  .y #productos h3[style*="28px"]{font-size:22px!important}
  .y .cats{gap:12px!important}
  .y .cat{border-radius:16px}
  .y .cat .ph{padding:14px!important}
  .y .cat .ft{padding:0 12px 14px 14px!important;gap:8px!important}
  .y .cat .ft .hd{font-size:15px!important}

  .y .works{display:flex!important;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;margin:32px -20px 0!important;padding:0 20px 6px;scroll-padding-inline:20px;scrollbar-width:none;overscroll-behavior-x:contain}
  .y .works::-webkit-scrollbar{display:none}
  .y .works>.work{flex:0 0 84%;height:360px;border-radius:18px;scroll-snap-align:start}
  .y .work figcaption{left:20px;right:20px;bottom:20px}
  .y .s2{margin-top:44px!important}
  .y .s2 ol{gap:0!important}
  .y .s2 li{position:relative;display:grid!important;grid-template-columns:48px minmax(0,1fr);column-gap:16px;padding-bottom:28px}
  .y .s2 li:last-child{padding-bottom:0}
  .y .s2 li:not(:last-child)::before{content:"";position:absolute;left:23px;top:54px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(#4CAF50,#D6F24A)}
  .y .s2-n{grid-row:span 2}
  .y .s2-t{margin-top:10px!important;font-size:19px!important}
  .y .s2-d{grid-column:2}
  .y #especiales .btn,.y #empresa>.wrap>.btn,.y section[aria-labelledby="rep"] .btn{width:100%;min-height:54px}

  .y #empresa .wipe-up{height:240px!important;border-radius:18px;animation:none!important;clip-path:none!important}
  .y #empresa .wrap>.stack:first-child{margin-bottom:48px!important}
  .y #empresa .wipe-up+.stack{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px 16px!important;margin-top:32px!important}
  .y #empresa .wipe-up+.stack h3{font-size:17px!important}
  .y #empresa .wipe-up+.stack p{font-size:14px!important}
  .y .clients{margin-top:48px!important;padding-top:28px!important}

  .y .faq-q{padding:18px 18px!important;font-size:16px!important;gap:14px!important;min-height:60px}
  .y .faq-a p{padding:0 18px 20px!important;font-size:15px!important}

  .y footer{padding-top:48px!important}
  .y footer .stack{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 20px!important}
  .y footer .stack>:first-child,.y footer .stack>:last-child{grid-column:1/-1!important}
  .y footer .stack>nav{grid-column:auto!important}
  .y footer ul{gap:0!important;margin-top:10px!important}
  .y .legal{margin-top:28px!important;padding-bottom:96px!important}

  /* ——— Catálogos ——— */
  .y .lh-txt>div{flex-direction:column}
  .y .lh-txt .btn{width:100%;min-height:52px;font-size:15px!important}
  .y .tabs{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  /* Tarjeta horizontal: foto + modelo arriba, datos y botones abajo */
  .y .pgrid{grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
  .y .pc{display:grid!important;grid-template-columns:132px minmax(0,1fr);column-gap:14px;padding:14px;border-radius:18px}
  .y .pc>div{display:contents!important}
  .y .pc .ph{grid-column:1;grid-row:1/span 2;align-self:start;border:0!important;border-radius:12px;aspect-ratio:4/3!important}
  .y .pc .hd{grid-column:2;grid-row:1;align-self:end;font-size:19px!important}
  .y .pc .pname{grid-column:2;grid-row:2;align-self:start;margin-top:4px!important;font-size:15px!important;height:auto!important}
  .y .pc .specs{grid-column:1/-1;margin-top:12px!important}
  .y .pc .pbtns{grid-column:1/-1;padding-top:12px!important;margin-top:0!important}
  .y .pc .pbtns a{min-height:48px}
  /* Detalle: barra de consulta fija */
  .y .pd2-info>div:last-child{position:fixed;left:0;right:0;bottom:0;z-index:15;display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;margin:0!important;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid #DCE3DE;box-shadow:0 -12px 30px -22px rgba(11,59,54,.6)}
  .y .pd2 .pd2-info>div:last-child{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)!important;gap:10px!important;margin-top:0!important}
  .y .pd2-info>div:last-child .btn{width:100%;min-height:50px!important;padding:0 10px;gap:6px;font-size:13px!important;line-height:1.2;text-align:center}
  .y .pd2-info>div:last-child .btn svg{width:16px;height:16px;flex-shrink:0}
  .y:has(.pd2){padding-bottom:78px}
  .y:has(.pd2) .float{bottom:96px!important}
  .y .gal{border-radius:18px;overflow:hidden}

  /* ——— Contacto ——— */
  .y .cbox fieldset>div{flex-wrap:nowrap!important;overflow-x:auto;margin:0 -20px;padding:2px 20px 6px;scrollbar-width:none}
  .y .cbox fieldset>div::-webkit-scrollbar{display:none}
  .y .chip2{flex:0 0 auto;white-space:nowrap}
  .y .stack>[style*="justify-content: flex-end"]{justify-content:flex-start!important}
}
@media (max-width:600px){
  .y .wrap{padding-left:20px;padding-right:20px}
  .y .works{margin-left:-20px!important;margin-right:-20px!important}
  .y #contacto form{grid-template-columns:minmax(0,1fr)!important}
  .y #contacto form>div{grid-column:1/-1!important}
}