/* ============================================================ vt.css — animaciones, microinteracciones y páginas de producto Vet Technologies Argentina S.A. Reemplaza animate.css + wow.js. Solo transform y opacity. ============================================================ */ :root{ --vt-ink:#06192B; --vt-deep:#0B2C48; --vt-green:#12A47C; --vt-green-btn:#0A8060; --vt-green-ink:#06664C; --vt-mist:#F2F6F9; --vt-line:#DCE6ED; --vt-muted:#59707F; --vt-ease:cubic-bezier(.22,.61,.36,1); } /* ---------- 1. Scroll reveal ---------- Solo se oculta si hay JS (clase .vt-js en ). Sin JS el contenido se ve completo: nunca una página en blanco. */ .vt-js .vt-reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--vt-ease), transform .6s var(--vt-ease); will-change:opacity, transform; } .vt-js .vt-reveal.vt-in{opacity:1; transform:none} /* stagger dentro de una misma sección */ .vt-js .vt-reveal[data-d="1"]{transition-delay:.08s} .vt-js .vt-reveal[data-d="2"]{transition-delay:.16s} .vt-js .vt-reveal[data-d="3"]{transition-delay:.24s} .vt-js .vt-reveal[data-d="4"]{transition-delay:.32s} .vt-js .vt-reveal[data-d="5"]{transition-delay:.40s} .vt-js .vt-reveal[data-d="6"]{transition-delay:.48s} /* variantes laterales */ .vt-js .vt-reveal-left{transform:translateX(-44px)} .vt-js .vt-reveal-right{transform:translateX(44px)} .vt-js .vt-reveal-scale{transform:translateY(18px) scale(.96)} .vt-js .vt-reveal-left.vt-in, .vt-js .vt-reveal-right.vt-in, .vt-js .vt-reveal-scale.vt-in{transform:none} /* stagger largo para grillas de muchos items (catalogo) */ .vt-js .vt-reveal[data-d="7"]{transition-delay:.56s} .vt-js .vt-reveal[data-d="8"]{transition-delay:.64s} /* El segundo slide repetía el mismo texto en un

: dos h1 en la página. Ahora es un

y hereda el mismo aspecto que #home h1. */ #home .vt-h1{ font-size:80px; font-weight:bold; line-height:1em; letter-spacing:2px; padding-top:10px; margin:0 0 10px; text-transform:uppercase; } @media (max-width:1024px){#home .vt-h1{font-size:40px}} @media (max-width:600px){#home .vt-h1{font-size:30px}} .vt-spacer{margin:0} /* ---------- 2. Header con estado al scrollear ---------- */ .custom-navbar{ transition:background-color .35s var(--vt-ease), box-shadow .35s var(--vt-ease), padding .35s var(--vt-ease); } .custom-navbar.vt-stuck{ background-color:rgba(255,255,255,.96) !important; box-shadow:0 1px 18px rgba(6,25,43,.10); backdrop-filter:saturate(160%) blur(8px); } .custom-navbar.vt-stuck .navbar-brand img{transform:scale(.9)} .custom-navbar .navbar-brand img{transition:transform .35s var(--vt-ease)} /* underline animado en el menú */ .custom-navbar .navbar-nav > li > a{position:relative; transition:color .25s var(--vt-ease)} .custom-navbar .navbar-nav > li > a::after{ content:""; position:absolute; left:15px; right:15px; bottom:8px; height:2px; background:var(--vt-green); transform:scaleX(0); transform-origin:left center; transition:transform .35s var(--vt-ease); } .custom-navbar .navbar-nav > li > a:hover::after, .custom-navbar .navbar-nav > li > a:focus-visible::after{transform:scaleX(1)} /* ---------- 3. Barras de progreso: animan al entrar en viewport ---------- */ .progress{overflow:hidden} .progress-bar{ transform-origin:left center; transition:transform 1.15s var(--vt-ease); } .vt-js .progress-bar{transform:scaleX(0)} .vt-js .vt-in .progress-bar, .vt-js .progress-bar.vt-in{transform:scaleX(1)} .vt-js .vt-bars .progress:nth-of-type(2) .progress-bar{transition-delay:.12s} .vt-js .vt-bars .progress:nth-of-type(3) .progress-bar{transition-delay:.24s} /* ---------- 3.b Contadores ---------- */ .vt-count{font-variant-numeric:tabular-nums; font-weight:700} .vt-stat{ font-size:15px; color:var(--vt-muted); letter-spacing:.02em; margin:0 0 6px; } .vt-stat .vt-count{ font-size:44px; line-height:1; color:var(--vt-green-ink); letter-spacing:-.03em; margin-right:8px; vertical-align:-4px; } /* ---------- 4. Microinteracciones ---------- */ /* Bloques "¿Quiénes somos?" y "Política de calidad" */ #service .media{ padding:26px 24px; border:1px solid transparent; border-radius:3px; transition:transform .35s var(--vt-ease), box-shadow .35s var(--vt-ease), border-color .35s var(--vt-ease), background-color .35s var(--vt-ease); will-change:transform; } #service .media:hover{ transform:translateY(-4px); background:#fff; border-color:var(--vt-line); box-shadow:0 18px 44px rgba(6,25,43,.12); } #service .media-heading{transition:color .3s var(--vt-ease)} #service .media:hover .media-heading{color:var(--vt-green-ink)} /* Galería: velo y zoom al pasar el cursor */ .portfolio-thumb{position:relative; overflow:hidden} .portfolio-thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,25,43,0) 40%, rgba(6,25,43,.72) 100%); opacity:0; transition:opacity .45s var(--vt-ease); pointer-events:none; } .portfolio-thumb:hover::after{opacity:1} /* Barras: se resaltan al pasar por el bloque */ .vt-bars .progress{transition:box-shadow .35s var(--vt-ease)} .vt-bars:hover .progress{box-shadow:0 0 0 1px rgba(18,164,124,.35)} /* Enlaces de texto del cuerpo: subrayado que crece */ #contact a:not(.btn), .vt-faq-item a{ text-decoration:none; background-image:linear-gradient(var(--vt-green),var(--vt-green)); background-size:0% 2px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .35s var(--vt-ease), color .3s var(--vt-ease); } #contact a:not(.btn):hover, .vt-faq-item a:hover{background-size:100% 2px} /* FAQ: la fila se levanta apenas */ .vt-faq-item{ padding-left:0; transition:padding-left .35s var(--vt-ease), border-color .35s var(--vt-ease); } .vt-faq-item:hover{padding-left:14px; border-color:var(--vt-green)} /* --- Botones --- El template los dejaba en rgba(0,0,0,.6): un rectangulo gris translucido. Se rehacen enteros manteniendo las clases del HTML. */ .btn, .btn-default, .templatemo-slider-btn, #home .btn, #home .btn-default, .divider .btn, .divider .templatemo-slider-btn{ position:relative; overflow:hidden; display:inline-block; background:var(--vt-green-btn) !important; color:#fff !important; border:0 !important; border-radius:3px !important; padding:15px 34px !important; font-size:14px !important; font-weight:700 !important; letter-spacing:.06em; text-transform:uppercase; text-shadow:none !important; box-shadow:0 4px 14px rgba(6,25,43,.18); transition:transform .28s var(--vt-ease), background-color .28s var(--vt-ease), box-shadow .28s var(--vt-ease) !important; will-change:transform; } /* brillo que barre el boton al pasar el cursor */ .btn::before, .templatemo-slider-btn::before{ content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%; background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 100%); transform:skewX(-18deg); transition:left .55s var(--vt-ease); pointer-events:none; } .btn:hover::before, .templatemo-slider-btn:hover::before{left:125%} .btn:hover, .btn-default:hover, .templatemo-slider-btn:hover, #home .btn:hover, #home .btn-default:hover{ background:#08725A !important; color:#fff !important; transform:translateY(-3px); box-shadow:0 14px 30px rgba(10,128,96,.38); } .btn:active, .templatemo-slider-btn:active{transform:translateY(-1px)} /* el boton del hero respira un poco mas */ #home .templatemo-slider-btn{padding:17px 40px !important; font-size:15px !important} .about-wrapper{ transition:transform .3s var(--vt-ease), box-shadow .3s var(--vt-ease); will-change:transform; } .about-wrapper:hover{transform:translateY(-5px); box-shadow:0 18px 40px rgba(6,25,43,.13)} .portfolio-thumb{overflow:hidden} .portfolio-thumb img{transition:transform .6s var(--vt-ease), filter .5s var(--vt-ease)} .portfolio-thumb:hover img{transform:scale(1.045)} .media-object i{ display:inline-block; transition:transform .35s var(--vt-ease), color .35s var(--vt-ease); } .media:hover .media-object i{transform:translateY(-3px) scale(1.06); color:var(--vt-green)} /* foco visible: accesibilidad por teclado */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible{ outline:3px solid var(--vt-green); outline-offset:3px; border-radius:2px; } /* WhatsApp flotante */ .whatsapp img, .whatsapp-sm img{transition:transform .3s var(--vt-ease)} .whatsapp:hover img{transform:translateY(-3px) scale(1.05)} /* ---------- 4.b Footer ---------- El template estila .social-icon li con cajas fijas de 40x40 px, pensadas para iconos de fuente. Con texto adentro, desborda y se superpone. Los enlaces del footer llevan clase propia. */ .vt-footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; list-style:none; padding:0; margin:0 0 18px; } .vt-footer-links li{width:auto; height:auto; display:block} .vt-footer-links a{ position:relative; display:inline-block; color:#fff; text-decoration:none; font-size:14px; font-weight:600; letter-spacing:.02em; line-height:1.5; padding-bottom:3px; transition:color .3s var(--vt-ease); } .vt-footer-links a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--vt-green); transform:scaleX(0); transform-origin:left center; transition:transform .35s var(--vt-ease); } .vt-footer-links a:hover{color:var(--vt-green); text-decoration:none} .vt-footer-links a:hover::after{transform:scaleX(1)} /* ---------- 5. Grilla de productos (home y /productos/) ---------- */ .vt-products{padding:0; margin:0; list-style:none; display:grid; grid-template-columns:1fr; gap:14px; } @media (min-width:600px){.vt-products{grid-template-columns:repeat(2,1fr)}} @media (min-width:900px){.vt-products{grid-template-columns:repeat(3,1fr)}} .vt-product-card{ display:block; height:100%; padding:22px 24px; background:#fff; border:1px solid var(--vt-line); border-top:3px solid var(--vt-deep); text-decoration:none; color:var(--vt-ink); transition:transform .3s var(--vt-ease), box-shadow .3s var(--vt-ease), border-top-color .3s var(--vt-ease); will-change:transform; } .vt-product-card:hover, .vt-product-card:focus-visible{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(6,25,43,.13); border-top-color:var(--vt-green); text-decoration:none; color:var(--vt-ink); } .vt-product-card b{ display:block; font-size:19px; font-weight:700; letter-spacing:-.01em; line-height:1.25; margin-bottom:6px; } .vt-product-card span{display:block; font-size:13px; color:var(--vt-muted); line-height:1.5} .vt-product-card em{ display:inline-block; margin-top:12px; font-style:normal; font-size:13px; font-weight:600; color:var(--vt-green-ink); } .vt-product-card em::after{content:" →"; transition:transform .3s var(--vt-ease); display:inline-block} .vt-product-card:hover em::after{transform:translateX(4px)} /* ---------- 6. Página de producto ---------- */ .vt-page{background:#fff} .vt-page-hero{ background:var(--vt-ink); color:#fff; padding:150px 0 60px; } .vt-page-hero h1{ font-size:clamp(30px,4.5vw,52px); font-weight:800; letter-spacing:-.03em; line-height:1.1; margin:0 0 16px; color:#fff; } .vt-kicker{ font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--vt-green); margin:0 0 14px; } .vt-page-hero p{font-size:17px; line-height:1.65; color:rgba(255,255,255,.84); max-width:62ch; margin:0} .vt-crumbs{font-size:13px; color:rgba(255,255,255,.6); margin:0 0 22px; padding:0; list-style:none} .vt-crumbs li{display:inline} .vt-crumbs li+li::before{content:" / "; opacity:.5} .vt-crumbs a{color:rgba(255,255,255,.82); text-decoration:none} .vt-crumbs a:hover{color:#fff; text-decoration:underline} .vt-section{padding:64px 0} .vt-section--mist{background:var(--vt-mist)} .vt-section h2{ font-size:clamp(23px,2.6vw,32px); font-weight:800; letter-spacing:-.025em; margin:0 0 20px; color:var(--vt-ink); } .vt-section h3{font-size:19px; font-weight:700; margin:0 0 10px; color:var(--vt-ink)} .vt-section p{font-size:16px; line-height:1.7; color:#33454F; margin:0 0 16px} .vt-section p:last-child{margin-bottom:0} .vt-answer{ border-left:4px solid var(--vt-green); background:var(--vt-mist); padding:20px 24px; margin:0 0 32px; } .vt-answer p{margin:0; font-size:17px; line-height:1.65; color:var(--vt-ink)} .vt-facts{list-style:none; padding:0; margin:0; display:grid; gap:1px; background:var(--vt-line); border:1px solid var(--vt-line)} .vt-facts li{background:#fff; padding:16px 20px; display:grid; gap:4px} @media (min-width:600px){.vt-facts li{grid-template-columns:200px 1fr; gap:20px; align-items:baseline}} .vt-facts dt, .vt-facts b{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--vt-muted); } .vt-facts span{font-size:16px; color:var(--vt-ink); line-height:1.55} .vt-cta{ background:var(--vt-ink); color:#fff; padding:36px 32px; display:grid; gap:22px; align-items:center; } @media (min-width:768px){.vt-cta{grid-template-columns:1fr auto}} .vt-cta h2{color:#fff; margin:0 0 8px} .vt-cta p{color:rgba(255,255,255,.74); margin:0; font-size:15px} .vt-cta-actions{display:flex; flex-wrap:wrap; gap:12px} .vt-btn{ display:inline-block; padding:14px 26px; font-size:15px; font-weight:700; letter-spacing:-.01em; text-decoration:none; border:2px solid transparent; border-radius:3px; transition:transform .25s var(--vt-ease), background-color .25s var(--vt-ease), border-color .25s var(--vt-ease), box-shadow .25s var(--vt-ease); will-change:transform; } .vt-btn--solid{background:var(--vt-green-btn); color:#fff} .vt-btn--solid:hover, .vt-btn--solid:focus-visible{ background:#08725A; color:#fff; text-decoration:none; transform:translateY(-2px); box-shadow:0 10px 24px rgba(10,128,96,.34); } .vt-btn--ghost{border-color:rgba(255,255,255,.42); color:#fff} .vt-btn--ghost:hover, .vt-btn--ghost:focus-visible{ border-color:#fff; background:rgba(255,255,255,.08); color:#fff; text-decoration:none; transform:translateY(-2px); } .vt-faq{border-top:1px solid var(--vt-line)} .vt-faq-item{border-bottom:1px solid var(--vt-line); padding:22px 0} .vt-faq-item h3{margin:0 0 8px; font-size:17px; color:var(--vt-ink)} .vt-faq-item p{margin:0; font-size:15.5px; line-height:1.65; color:#43555F} .vt-related{margin-top:12px} .vt-note{ margin-top:26px; padding:14px 18px; border-left:3px solid #C98A17; background:#FFF8EC; font-size:14px; line-height:1.6; color:#6B4E14; } /* footer propio de las subpáginas */ .vt-foot{background:#04121F; color:rgba(255,255,255,.62); padding:44px 0; font-size:14px} .vt-foot a{color:var(--vt-green); text-decoration:none} .vt-foot a:hover{text-decoration:underline} .vt-foot p{margin:0 0 6px} /* skip link */ .vt-skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--vt-ink); color:#fff; padding:12px 20px; font-weight:600} .vt-skip:focus{left:0; color:#fff} /* ---------- 7. Accesibilidad: respetar prefers-reduced-motion ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0ms !important; scroll-behavior:auto !important; } .vt-js .vt-reveal{opacity:1; transform:none} .vt-js .progress-bar{transform:scaleX(1)} .btn:hover, .templatemo-slider-btn:hover, .about-wrapper:hover, .vt-product-card:hover, .vt-btn:hover{transform:none} .portfolio-thumb:hover img{transform:none} }