*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Lato', 'Open Sans', sans-serif;
color: #333;
background: #fff;
font-size: 16px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; } .container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
} #site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out, height 0.4s ease-in-out;
} #site-header.transparent {
background: transparent;
} #site-header.scrolled {
background: rgba(252, 252, 252, 0.97);
box-shadow: 0 1px 0 rgba(0,0,0,0.12);
}
#site-header.scrolled .main-nav a {
color: #333;
}
#site-header.scrolled .main-nav a:hover,
#site-header.scrolled .main-nav a.current {
color: #cca049;
} #site-header.page-header.scrolled .main-nav a {
color: #fff;
}
#site-header.page-header.scrolled .main-nav a:hover,
#site-header.page-header.scrolled .main-nav a.current {
color: #cca049;
}
#site-header.scrolled .lang-switcher a {
color: rgba(0,0,0,0.6);
border-color: rgba(0,0,0,0.25);
}
#site-header.scrolled .lang-switcher a:hover,
#site-header.scrolled .lang-switcher a.active {
color: #333;
border-color: #333;
background: rgba(0,0,0,0.06);
} #site-header.page-header.scrolled .lang-switcher a {
color: rgba(255,255,255,0.7);
border-color: rgba(255,255,255,0.4);
}
#site-header.page-header.scrolled .lang-switcher a:hover,
#site-header.page-header.scrolled .lang-switcher a.active {
color: #fff;
border-color: #fff;
background: rgba(255,255,255,0.1);
}
#site-header.scrolled .nav-toggle span {
background: #333;
} #site-header.page-header {
background: rgba(0, 0, 0, 0.88);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
height: 105px;
transition: height 0.4s ease-in-out;
}
#site-header.scrolled .header-inner {
height: 70px;
} .logo-dark { display: none; }
.logo-light { display: block; }
#site-header.scrolled .logo-light,
#site-header.page-header .logo-light { display: none; }
#site-header.scrolled .logo-dark,
#site-header.page-header .logo-dark { display: block; }
.site-logo img {
height: 72px;
width: auto;
transition: height 0.4s ease-in-out, opacity 0.4s ease-in-out;
}
#site-header.scrolled .site-logo img {
height: 48px;
}
.main-nav {
display: flex;
align-items: center;
gap: 0;
}
.main-nav a {
color: #fff;
font-family: 'Poppins', 'Lato', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
padding: 8px 14px;
text-transform: uppercase;
white-space: nowrap;
transition: color 0.3s;
}
.main-nav a:hover,
.main-nav a.current {
color: #cca049;
}
.main-nav a.external::after {
content: ' ↗';
font-size: 10px;
opacity: 0.7;
}
.header-right {
display: flex;
align-items: center;
gap: 16px;
}
.lang-switcher {
display: flex;
gap: 6px;
align-items: center;
}
.lang-switcher a {
color: rgba(255,255,255,0.7);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
padding: 4px 8px;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 3px;
transition: all 0.2s;
}
.lang-switcher a:hover,
.lang-switcher a.active {
color: #fff;
border-color: #fff;
background: rgba(255,255,255,0.15);
} .nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
flex-direction: column;
gap: 5px;
padding: 4px;
}
.nav-toggle span {
display: block;
width: 24px;
height: 2px;
background: #fff;
transition: all 0.3s;
} .hero-slider {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
background: #000;
}
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1s ease;
display: flex;
align-items: center;
justify-content: center;
}
.hero-slide.active { opacity: 1; }
.hero-slide video,
.hero-slide .slide-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-slide .slide-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.35);
}
.hero-slide .slide-content {
position: relative;
z-index: 2;
text-align: center;
color: #fff;
padding: 0 20px;
}
.hero-slide .slide-content h1,
.hero-slide .slide-content h2 {
font-family: 'Lato', sans-serif;
font-size: clamp(2rem, 5vw, 4.5rem);
font-weight: 700;
letter-spacing: 4px;
text-shadow: 0 2px 20px rgba(0,0,0,0.5);
margin-bottom: 16px;
}
.hero-slide .slide-content p {
font-size: clamp(1rem, 2vw, 1.4rem);
font-weight: 600;
opacity: 0.9;
text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}
.hero-dots {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.hero-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255,255,255,0.5);
cursor: pointer;
border: none;
transition: background 0.3s;
}
.hero-dot.active { background: #fff; }
.hero-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background: rgba(255,255,255,0.15);
border: none;
color: #fff;
font-size: 24px;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
transition: background 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.hero-arrow:hover { background: rgba(255,255,255,0.3); }
.hero-arrow.prev { left: 20px; }
.hero-arrow.next { right: 20px; } .page-hero-banner {
background: #000;
padding: 100px 0 28px;
text-align: left;
}
.page-hero-banner h1 {
color: #fff;
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 700;
letter-spacing: 6px;
text-transform: uppercase;
} .icons-strip {
background: #fff;
padding: 60px 0;
}
.icons-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
align-items: center;
justify-items: center;
}
.icon-item {
text-align: center;
}
.icon-item img {
max-width: 200px;
width: 100%;
height: auto;
margin: 0 auto;
transition: transform 0.3s;
}
.icon-item img:hover { transform: scale(1.05); } .products-section {
padding: 60px 0 80px;
background: #f9f9f9;
}
.products-section .section-title {
text-align: center;
font-size: 1.6rem;
font-weight: 700;
color: #000;
margin-bottom: 50px;
letter-spacing: 2px;
}
.product-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 900px;
margin: 0 auto;
}
.product-card {
text-align: center;
transition: transform 0.3s;
}
.product-card:hover { transform: translateY(-8px); }
.product-card img {
max-width: 220px;
margin: 0 auto 20px;
}
.btn-gold {
display: inline-block;
background: linear-gradient(135deg, #cca049, #dbb96f);
color: #fff;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
padding: 10px 28px;
border-radius: 5px;
border: 1px solid #ccaf84;
box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
transition: background 0.2s, transform 0.2s;
}
.btn-gold:hover {
background: linear-gradient(135deg, #b8893a, #cca049);
transform: translateY(-1px);
} .factory-section {
position: relative;
height: 500px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.factory-section .factory-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.factory-section .factory-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.55);
}
.factory-section .factory-content {
position: relative;
z-index: 2;
text-align: center;
color: #fff;
padding: 0 20px;
}
.factory-section h2 {
font-size: clamp(1.5rem, 3vw, 2.5rem);
font-weight: 300;
letter-spacing: 4px;
margin-bottom: 12px;
}
.factory-section .cursive {
font-family: 'Kaushan Script', cursive;
font-size: clamp(1.2rem, 2.5vw, 2rem);
color: #cca049;
} .section-black {
background: #000;
color: #fff;
}
.section-white {
background: #fff;
color: #333;
}
.section-light {
background: #f5f5f5;
color: #333;
}
.text-center { text-align: center; }
.text-gold { color: #cca049; }
.section-pad {
padding: 56px 0;
}
.section-heading {
font-size: clamp(1.4rem, 2.5vw, 2rem);
font-weight: 700;
letter-spacing: 3px;
margin-bottom: 16px;
}
.section-subheading {
font-size: 1rem;
color: #999;
letter-spacing: 1px;
margin-bottom: 50px;
} .tabs-nav {
display: flex;
justify-content: center;
gap: 0;
border-bottom: 2px solid #e0e0e0;
margin-bottom: 28px;
}
.tab-btn {
background: none;
border: none;
padding: 16px 32px;
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
cursor: pointer;
color: #666;
position: relative;
transition: color 0.2s;
}
.tab-btn::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 3px;
background: #cca049;
transform: scaleX(0);
transition: transform 0.2s;
}
.tab-btn.active {
color: #000;
}
.tab-btn.active::after {
transform: scaleX(1);
}
.tab-content { display: none; }
.tab-content.active { display: block; }
.tab-intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
margin-bottom: 36px;
padding: 20px 0;
}
.tab-intro img {
max-width: 300px;
margin: 0 auto;
}
.tab-intro-text h3 {
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 16px;
color: #000;
}
.tab-intro-text p {
color: #555;
line-height: 1.8;
margin-bottom: 12px;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
}
.product-item {
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
transition: box-shadow 0.3s;
background: #fff;
}
.product-item:hover {
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.product-item img {
width: 100%;
height: 220px;
object-fit: cover;
}
.product-item-body {
padding: 20px;
}
.product-item-body h4 {
font-size: 1rem;
font-weight: 700;
color: #000;
margin-bottom: 12px;
}
.product-spec {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
color: #666;
padding: 6px 0;
border-bottom: 1px solid #f0f0f0;
}
.product-spec:last-child { border-bottom: none; }
.product-spec span:first-child { color: #999; }
.product-spec span:last-child { font-weight: 600; color: #333; }
.catalog-cta {
text-align: center;
margin-top: 36px;
padding-top: 24px;
border-top: 1px solid #eee;
}
.catalog-cta p {
font-size: 1.1rem;
color: #333;
margin-bottom: 20px;
} .pig-types {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
text-align: center;
padding: 30px 0;
}
.pig-type img {
max-width: 200px;
margin: 0 auto 20px;
}
.pig-type h3 {
font-size: 1.2rem;
font-weight: 700;
color: #000;
margin-bottom: 12px;
}
.pig-type p {
font-size: 0.9rem;
color: #666;
line-height: 1.7;
}
.nutrition-attrs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
padding: 30px 0;
}
.nutrition-attr {
display: flex;
gap: 20px;
align-items: flex-start;
}
.nutrition-attr img {
width: 60px;
height: 60px;
object-fit: contain;
flex-shrink: 0;
}
.nutrition-attr-text h4 {
font-size: 1rem;
font-weight: 700;
color: #000;
margin-bottom: 8px;
}
.nutrition-attr-text p {
font-size: 0.875rem;
color: #666;
line-height: 1.7;
} .about-hero {
position: relative;
overflow: hidden;
}
.about-text-block {
max-width: 800px;
margin: 0 auto;
}
.about-text-block p {
font-size: 1rem;
color: #555;
line-height: 1.9;
margin-bottom: 20px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
text-align: center;
padding: 60px 0;
}
.feature-item img {
width: 80px;
height: 80px;
object-fit: contain;
margin: 0 auto 16px;
}
.feature-item h4 {
font-size: 0.9rem;
font-weight: 700;
color: #000;
margin-bottom: 8px;
}
.feature-item p {
font-size: 0.8rem;
color: #666;
line-height: 1.6;
}
.grupo-fuertes {
display: grid;
grid-template-columns: 200px 1fr;
gap: 60px;
align-items: center;
padding: 60px 0;
border-top: 1px solid #e0e0e0;
}
.grupo-fuertes img {
max-width: 180px;
} .contact-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
padding: 60px 0;
align-items: stretch; } .contact-form-wrap {
display: flex;
flex-direction: column;
gap: 0;
}
.contact-form {
flex: 1;
display: flex;
flex-direction: column;
} .contact-form p.textarea-field {
flex: 1;
display: flex;
flex-direction: column;
margin-bottom: 16px;
}
.contact-form p.textarea-field textarea {
flex: 1;
height: auto;
min-height: 90px;
}
.contact-form p.submit-field { margin-bottom: 0; } .contact-right-wrap {
display: flex;
flex-direction: column;
gap: 24px;
} .contact-info-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 24px;
margin-bottom: 16px;
align-items: stretch;
}
.contact-info-left-stack {
display: flex;
flex-direction: column;
gap: 14px;
}
.contact-wechat-col {
display: flex;
flex-direction: column;
align-items: center;
}
.wechat-handle-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.wechat-handle-row .wechat-handle {
font-size: 0.82rem;
color: #555;
}
.wechat-qr {
flex: 1;
width: 100%;
max-width: 100%;
aspect-ratio: 1;
object-fit: contain;
border-radius: 8px;
display: block;
min-height: 0;
}
.contact-form-wrap h2,
.contact-info-wrap h2 {
font-size: 1.4rem;
font-weight: 700;
color: #000;
margin-bottom: 24px;
letter-spacing: 2px;
} .contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
font-family: inherit;
color: #333;
background: #fafafa;
transition: border-color 0.2s;
box-sizing: border-box;
}
.contact-form input:focus,
.contact-form textarea:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus {
outline: none;
border-color: #cca049;
background: #fff;
}
.contact-form textarea,
.wpcf7 textarea { height: 120px; resize: vertical; }
.contact-form p,
.wpcf7 p {
margin-bottom: 16px;
}
.contact-form label,
.wpcf7 label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: #333;
margin-bottom: 6px;
letter-spacing: 0.5px;
}
.contact-form input[type="submit"],
.wpcf7 input[type="submit"] {
background: #000;
color: #fff;
border: none;
padding: 14px 40px;
font-size: 14px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
border-radius: 4px;
transition: background 0.2s;
}
.contact-form input[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover { background: #333; }
.contact-info-item {
display: flex;
gap: 12px;
align-items: flex-start;
}
.contact-info-icon {
width: 36px;
height: 36px;
background: #cca049; color: #000;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 15px;
} .contact-info-icon.wechat-icon {
background: #07c160;
}
.contact-info-icon.wechat-icon img {
width: 20px;
height: 20px;
filter: brightness(0) invert(1);
}
.contact-info-text h4 {
font-size: 0.85rem;
font-weight: 700;
color: #999;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 4px;
}
.contact-info-text p,
.contact-info-text a {
font-size: 0.95rem;
color: #333;
line-height: 1.6;
}
.contact-logos {
display: flex;
gap: 30px;
align-items: center;
justify-content: center;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #eee;
}
.contact-logos img {
max-height: 65px;
width: auto;
}
.contact-map {
border-radius: 8px;
overflow: hidden;
border: 1px solid #eee;
flex: 1; min-height: 240px;
}
.contact-map iframe {
width: 100%;
height: 100%;
display: block;
border: none;
} .video-section {
position: relative;
width: 100%;
background: #000;
}
.video-section video {
width: 100%;
max-height: 600px;
object-fit: cover;
display: block;
}
.process-steps {
padding: 80px 0;
}
.process-steps h2 {
text-align: center;
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 60px;
color: #000;
letter-spacing: 3px;
}
.steps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
text-align: center;
}
.step-item {
padding: 30px 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
transition: border-color 0.3s, box-shadow 0.3s;
}
.step-item:hover {
border-color: #cca049;
box-shadow: 0 4px 20px rgba(204, 160, 73, 0.15);
}
.step-number {
width: 50px;
height: 50px;
background: #000;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 700;
margin: 0 auto 20px;
}
.step-item h4 {
font-size: 1rem;
font-weight: 700;
color: #000;
margin-bottom: 10px;
}
.step-item p {
font-size: 0.875rem;
color: #666;
line-height: 1.7;
} #site-footer {
background: #000;
color: #fff;
padding: 60px 0 30px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 50px;
}
.footer-logo {
margin-bottom: 24px;
}
.footer-logo img {
height: 45px;
width: auto;
}
.footer-tagline {
font-family: 'Kaushan Script', cursive;
font-size: 1.1rem;
color: #cca049;
margin-bottom: 20px;
}
.footer-address {
font-size: 0.85rem;
color: rgba(255,255,255,0.6);
line-height: 1.8;
}
.footer-col h4 {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
margin-bottom: 20px;
}
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
font-size: 0.875rem;
color: rgba(255,255,255,0.75);
}
.footer-contact-label {
font-size: 0.75rem;
color: rgba(255,255,255,0.4);
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 4px;
}
.footer-contact-text {
font-size: 0.85rem;
color: rgba(255,255,255,0.65);
line-height: 1.7;
}
a.footer-contact-text {
font-size: 0.9rem;
transition: color 0.2s;
}
a.footer-contact-text:hover { color: #fff; } .footer-contact-icon {
width: 32px;
height: 32px;
min-width: 32px;
background: #cca049;
color: #000;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
} .footer-wechat-handle {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.footer-wechat-icon {
width: 32px;
height: 32px;
min-width: 32px;
background: #07c160;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.footer-wechat-icon img {
filter: brightness(0) invert(1);
}
.footer-wechat-name {
font-size: 0.9rem;
color: rgba(255,255,255,0.75);
}
.footer-wechat-qr {
width: 130px;
height: 130px;
border-radius: 8px;
display: block;
}
.footer-nav {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-nav a {
font-size: 0.875rem;
color: rgba(255,255,255,0.65);
transition: color 0.2s;
}
.footer-nav a:hover { color: #fff; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
color: rgba(255,255,255,0.4);
flex-wrap: wrap;
gap: 12px;
}
.footer-bottom a {
color: rgba(255,255,255,0.4);
transition: color 0.2s;
}
.footer-bottom a:hover { color: rgba(255,255,255,0.7); }
.footer-bottom-links {
display: flex;
gap: 20px;
} .cta-section {
background: #000;
color: #fff;
padding: 52px 0;
text-align: center;
}
.cta-section h2 {
font-size: clamp(1.4rem, 3vw, 2.2rem);
font-weight: 700;
margin-bottom: 10px;
letter-spacing: 3px;
}
.cta-section .cursive {
font-family: 'Kaushan Script', cursive;
font-size: clamp(1.2rem, 2.5vw, 1.8rem);
color: #cca049;
} .page-products .section-pad {
padding-top: 32px;
}  .page-content {
padding: 80px 0;
}
.page-content h2 {
font-size: 1.6rem;
font-weight: 700;
color: #000;
margin-bottom: 20px;
margin-top: 40px;
}
.page-content h2:first-child { margin-top: 0; }
.page-content p {
color: #555;
line-height: 1.9;
margin-bottom: 16px;
} .legal-content {
max-width: 800px;
margin: 0 auto;
}
.legal-content h2 {
font-size: 1.15rem;
font-weight: 700;
color: #000;
margin-top: 36px;
margin-bottom: 12px;
letter-spacing: 0.5px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
font-size: 1rem;
font-weight: 700;
color: #222;
margin-top: 28px;
margin-bottom: 10px;
}
.legal-content p {
color: #555;
line-height: 1.9;
margin-bottom: 14px;
font-size: 0.95rem;
}
.legal-content ul {
margin: 0 0 16px 20px;
padding: 0;
}
.legal-content ul li {
color: #555;
line-height: 1.8;
margin-bottom: 8px;
font-size: 0.95rem;
}
.legal-content a { color: #cca049; }
.legal-content a:hover { text-decoration: underline; } @media (max-width: 1024px) {
.features-grid { grid-template-columns: repeat(3, 1fr); }
.steps-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.tab-intro { grid-template-columns: 1fr; }
.tab-intro img { max-width: 200px; }
}
@media (max-width: 768px) {
.header-inner { padding: 0 20px; height: 65px; }
.main-nav {
display: none;
position: fixed;
top: 65px;
left: 0;
right: 0;
background: rgba(0,0,0,0.97);
flex-direction: column;
padding: 20px;
gap: 4px;
}
.main-nav.open { display: flex; }
.main-nav a { font-size: 14px; padding: 12px 16px; width: 100%; }
.nav-toggle { display: flex; }
.hero-slider { height: 100svh; }
.icons-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.icon-item img { max-width: 140px; }
.product-cards { grid-template-columns: 1fr; gap: 40px; max-width: 280px; }
.factory-section { height: 350px; background-attachment: scroll; }
.factory-section .factory-bg { background-attachment: scroll; }
.pig-types { grid-template-columns: 1fr; }
.nutrition-attrs { grid-template-columns: 1fr; }
.features-grid { grid-template-columns: repeat(2, 1fr); }
.steps-grid { grid-template-columns: 1fr; }
.contact-layout { grid-template-columns: 1fr; gap: 40px; }
.contact-info-cols { grid-template-columns: 1fr; }
.contact-map { min-height: 300px; flex: none; aspect-ratio: 4 / 3; }
.grupo-fuertes { grid-template-columns: 1fr; text-align: center; }
.grupo-fuertes img { margin: 0 auto; }
.footer-grid { grid-template-columns: 1fr; gap: 30px; }
.footer-bottom { flex-direction: column; text-align: center; }
.page-hero-banner { padding: 90px 0 22px; }
.page-hero-banner h1 { font-size: 1.6rem; }
.tab-btn { padding: 12px 16px; font-size: 13px; }
.product-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.icons-grid { grid-template-columns: repeat(2, 1fr); }
.hero-arrow { display: none; }
}  .will-roll {
opacity: 0;
transform: rotateZ(360deg) scale(0.6);
transform-origin: center center;
transition: none;
} .will-roll.rolling {
animation: elpozo-roll 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes elpozo-roll {
0% {
opacity: 0;
transform: rotateZ(360deg) scale(0.6);
transform-origin: center center;
}
60% {
opacity: 1;
transform: rotateZ(-8deg) scale(1.05);
transform-origin: center center;
}
80% {
transform: rotateZ(4deg) scale(0.98);
}
100% {
opacity: 1;
transform: rotateZ(0deg) scale(1);
transform-origin: center center;
}
} .will-roll:nth-child(1) { animation-delay: 0ms; }
.will-roll:nth-child(2) { animation-delay: 150ms; }
.will-roll:nth-child(3) { animation-delay: 300ms; }
.will-roll:nth-child(4) { animation-delay: 450ms; } .will-bounce {
opacity: 0;
transform: translateY(40px);
}
.will-bounce.bouncing {
animation: elpozo-bounce 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
@keyframes elpozo-bounce {
0%   { opacity: 0; transform: translateY(40px); }
60%  { opacity: 1; transform: translateY(-10px); }
80%  { transform: translateY(5px); }
100% { opacity: 1; transform: translateY(0); }
} .product-card:nth-child(1) .will-bounce { animation-delay: 0ms; }
.product-card:nth-child(2) .will-bounce { animation-delay: 200ms; }
.product-card:nth-child(3) .will-bounce { animation-delay: 400ms; } .will-fade {
opacity: 0;
transform: translateY(20px);
}
.will-fade.fading {
animation: elpozo-fade 0.7s ease forwards;
}
@keyframes elpozo-fade {
to { opacity: 1; transform: translateY(0); }
} .page-hero-banner {
padding-top: 120px;
}
@media (max-width: 768px) {
.header-inner { height: 72px !important; }
#site-header.scrolled .header-inner { height: 60px !important; }
.site-logo img { height: 46px !important; }
#site-header.scrolled .site-logo img { height: 38px !important; }
.page-hero-banner { padding-top: 92px; padding-bottom: 18px; }
} .lang-zh_hans body,
.lang-zh_hans h1,
.lang-zh_hans h2,
.lang-zh_hans h3,
.lang-zh_hans h4,
.lang-zh_hans h5,
.lang-zh_hans h6,
.lang-zh_hans p,
.lang-zh_hans a,
.lang-zh_hans li,
.lang-zh_hans span,
.lang-zh_hans button,
.lang-zh_hans input,
.lang-zh_hans textarea,
.lang-zh_hans label {
font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.lang-zh_hans .main-nav a,
.lang-zh_hans .footer-nav a {
font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
letter-spacing: 0.02em;
}.lazy-hidden,.entry img.lazy-hidden, img.thumbnail.lazy-hidden {
background-color: #ffffff;
background-image: url(//elpozo.cn/wp-content/plugins/a3-lazy-load/assets/css/loading.gif);
background-repeat: no-repeat;
background-position: 50% 50%;
}
figure.wp-block-image img.lazy-hidden {
min-width: 150px;
}
picture source[type="image/webp"] {
display: block;
}