/* ==============================================================
FUENTE Y VARIABLES
============================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
:root{
--gold-primary:#d4af37;
--gold-light:#f7eabc;
--gold-dark:#b8860b;
--dark:#222;
--light:#ffffff;
--gray:#f6f6f6;
}
/* ==============================================================
RESET
============================================================== */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Montserrat',sans-serif;}
html{scroll-behavior:smooth;overflow-x:clip;}
body{background:var(--light);overflow-x:hidden;width:100%;}
/* ==============================================================
LAYOUT
============================================================== */
.container{max-width:1200px;width:100%;margin:0 auto;padding:0 15px;}
/* ==============================================================
HEADER
============================================================== */
.header{
position:fixed;top:0;left:0;width:100%;
background:transparent;box-shadow:none;
z-index:1000;transition:all .3s ease;padding:10px 0;
}
.header.scrolled{
background:rgba(255,255,255,.95);
box-shadow:0 2px 10px rgba(0,0,0,.1);
padding:5px 0;
}
.header-container{
max-width:1200px;margin:0 auto;padding:0 15px;
display:flex;justify-content:space-between;align-items:center;
}
/* ---------- Logo ---------- */
.logo{display:flex;align-items:center;}
.logo-img{height:60px;margin-right:8px;border-radius:20%;}
.logo-text{font-size:22px;font-weight:700;color:var(--light);}
.logo-text span{color:var(--gold-primary);}
.header.scrolled .logo-text{color:var(--dark);}
/* ---------- Navegación de escritorio ---------- */
.nav-menu{display:flex;list-style:none;}
.nav-item{margin-left:25px;}
.nav-link{
position:relative;color:var(--light);text-decoration:none;
font-weight:500;font-size:15px;transition:color .3s ease;
}
.nav-link:hover{color:var(--gold-primary);}
.header.scrolled .nav-link{color:var(--dark);}
.header.scrolled .nav-link:hover{color:var(--gold-primary);}
.nav-link::after{
content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;
background:var(--gold-primary);transition:width .3s ease;
}
/* Eliminar la línea animada debajo de los enlaces */
.nav-link::after {
display: none !important; /* Oculta completamente el pseudoelemento */
content: none !important; /* Alternativa para mayor compatibilidad */
}
.nav-link:hover::after{width:100%;}
/* ---------- Botón Cerrar (off-canvas) ---------- */
.close-menu{
display:none;position:absolute;top:10px;right:15px;font-size:24px;
padding:10px;cursor:pointer;color:var(--dark);z-index:1001;
}
.nav-menu.active .close-menu{display:block;}
/* ---------- Botón Hamburguesa ---------- */
.hamburger{display:none;cursor:pointer;background:none;border:none;padding:10px;z-index:1002;}
.bar{width:25px;height:3px;margin:5px auto;display:block;background:var(--light);transition:all .3s ease;}
.header.scrolled .bar{background:var(--dark);}
/* ---------- Dropdown (escritorio) ---------- */
.dropdown{position:relative;}
.submenu{
position:absolute;left:0;top:110%;min-width:230px;list-style:none;
background:var(--light);border:1px solid #eee;border-radius:6px;
box-shadow:0 8px 25px rgba(0,0,0,.08);
opacity:0;visibility:hidden;transform:translateY(10px);
transition:all .25s;z-index:999;
}
.dropdown:hover .submenu{opacity:1;visibility:visible;transform:none;}
.submenu li a{display:block;padding:12px 18px;font-size:14px;color:var(--dark);text-decoration:none;}
.submenu li a:hover{background:var(--gray);color:var(--gold-primary);}
/* ==============================================================
HERO
============================================================== */
.hero{
width:100%;height:60vh;
background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
url('../Imagenes/tac_maquina.png') center/cover no-repeat;
display:flex;align-items:center;justify-content:center;
text-align:center;color:var(--light);
}
.hero-content{max-width:800px;width:90%;padding:0 15px;opacity:0;transform:translateY(50px);animation:fadeInUp 1s forwards .5s;}
.hero-title{
font-size:clamp(28px,4vw,40px);font-weight:700;margin-bottom:20px;
background:linear-gradient(to right,var(--gold-light),var(--gold-primary),var(--gold-dark));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 2px 10px rgba(0,0,0,.2);
}
.hero-subtitle{font-size:clamp(14px,2.5vw,18px);margin-bottom:25px;}
.btn{
display:inline-block;padding:12px 25px;border-radius:50px;
background:var(--gold-primary);color:var(--light);
border:2px solid var(--gold-primary);font-weight:600;text-transform:uppercase;
letter-spacing:1px;transition:all .3s ease;
}
.btn:hover{background:transparent;color:var(--gold-primary);transform:translateY(-5px);box-shadow:0 10px 20px rgba(212,175,55,.3);}
/* ==============================================================
ABOUT TAC
============================================================== */
.about-tac{padding:80px 0;background:var(--light);}
.section-title{
position:relative;font-size:clamp(28px,4vw,36px);font-weight:700;
text-align:center;margin-bottom:40px;color:var(--dark);
}
.section-title::after{
content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);
width:80px;height:3px;background:var(--gold-primary);
}
.about-content{display:flex;flex-wrap:wrap;gap:20px;align-items:center;}
.about-image{flex:1;min-width:280px;opacity:0;transform:translateX(-50px);}
.about-image.animate{animation:fadeInLeft 1s forwards;}
.about-image img{width:100%;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.1);}
.about-text{flex:1;min-width:280px;padding:0 15px;opacity:0;transform:translateX(50px);}
.about-text.animate{animation:fadeInRight 1s forwards;}
.about-text h3{font-size:28px;font-weight:600;margin-bottom:15px;color:var(--dark);}
.about-text p{font-size:15px;line-height:1.7;margin-bottom:15px;color:#555;}
.highlight{color:var(--gold-primary);font-weight:700;}
.observation-list{list-style:none;margin-bottom:20px;}
.observation-list li{position:relative;padding-left:20px;font-size:15px;color:#555;margin-bottom:10px;}
.observation-list li::before{content:'•';position:absolute;left:0;top:0;font-size:20px;color:var(--gold-primary);}
/* ==============================================================
VENTAJAS
============================================================== */
.ventajas{padding:80px 0;background:#f0f0f0;}
.ventajas-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:25px;justify-items:center;}
.ventaja-card{
width:100%;max-width:280px;overflow:hidden;border-radius:10px;background:var(--light);
box-shadow:0 10px 30px rgba(0,0,0,.15);transition:all .3s ease;animation:fadeInUp .8s ease forwards;
}
.ventaja-card:hover{transform:translateY(-10px);box-shadow:0 15px 40px rgba(212,175,55,.25);}
.ventaja-icon{height:80px;display:flex;align-items:center;justify-content:center;background:var(--gold-light);}
.ventaja-icon i{font-size:36px;color:var(--gold-primary);}
.ventaja-content{text-align:center;padding:20px;}
.ventaja-title{font-size:18px;font-weight:600;margin-bottom:12px;color:var(--dark);}
.ventaja-text{font-size:13px;color:#555;line-height:1.6;}
/* ==============================================================
GALERÍA
============================================================== */
.gallery{padding:80px 0;background:var(--dark);position:relative;overflow:hidden;}
.gallery::before{
content:'';position:absolute;inset:0;background:url('/api/placeholder/100/100') center/30px repeat;
opacity:.03;
}
.section-subtitle{text-align:center;font-size:16px;color:var(--gold-primary);margin-bottom:40px;max-width:700px;margin-inline:auto;}
.gallery .section-title{color:var(--light);}
.gallery-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:40px;}
.gallery-item{
position:relative;height:220px;border-radius:10px;overflow:hidden;
box-shadow:0 15px 30px rgba(0,0,0,.2);opacity:0;transform:scale(.95);transition:all .5s ease;
}
.gallery-item.animate{animation:zoomIn .8s forwards;}
.gallery-image{position:relative;width:100%;height:100%;}
.gallery-image img{width:100%;height:100%;object-fit:cover;transition:all .5s ease;}
.gallery-image .hover-img{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;}
.gallery-image .primary-img{position:relative;z-index:1;transition:opacity .5s ease;}
.gallery-item:hover .primary-img{opacity:0;}
.gallery-item:hover .hover-img{opacity:1;}
.gallery-overlay{
position:absolute;inset:0;display:flex;align-items:flex-end;
background:linear-gradient(to top,rgba(0,0,0,.8),transparent);
opacity:0;transition:opacity .3s ease;
}
.gallery-item:hover .gallery-overlay{opacity:1;}
.gallery-item:hover .gallery-image img{transform:scale(1.1);}
.gallery-info{padding:15px;width:100%;transform:translateY(20px);transition:all .3s ease;}
.gallery-item:hover .gallery-info{transform:translateY(0);}
.gallery-info h3{color:var(--gold-primary);font-size:16px;font-weight:600;margin-bottom:5px;}
.gallery-info p{color:var(--light);font-size:13px;}
/* ==============================================================
CTA
============================================================== */
.cta{padding:60px 0;text-align:center;background:var(--light);}
.cta-text{font-size:16px;line-height:1.7;color:#555;max-width:700px;margin:0 auto 20px;}
/* ==============================================================
FOOTER
============================================================== */
.footer{background:var(--dark);padding:40px 0 0;color:var(--light);position:relative;}
.footer::before{
content:'';position:absolute;top:0;left:0;width:100%;height:5px;
background:linear-gradient(to right,var(--gold-dark),var(--gold-primary),var(--gold-light),var(--gold-primary),var(--gold-dark));
}
.footer-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;}
.footer-logo .logo-text{font-size:22px;font-weight:700;}
.footer-logo .logo-text span{color:var(--gold-primary);}
.footer-text{max-width:280px;font-size:13px;line-height:1.7;color:#999;margin-bottom:15px;}
.footer-title{font-size:18px;font-weight:600;margin-bottom:15px;color:var(--light);}
.footer-menu{list-style:none;}
.footer-menu li{margin-bottom:8px;}
.footer-menu a{color:#999;text-decoration:none;font-size:13px;transition:all .3s ease;}
.footer-menu a:hover{color:var(--gold-primary);padding-left:5px;}
.newsletter-form{display:flex;}
.newsletter-input{flex:1;padding:10px 12px;background:#333;border:none;color:var(--light);font-size:13px;border-radius:5px 0 0 5px;}
.newsletter-btn{background:var(--gold-primary);color:var(--light);border:none;padding:0 15px;border-radius:0 5px 5px 0;cursor:pointer;transition:all .3s ease;}
.newsletter-btn:hover{background:var(--gold-dark);}
.copyright{text-align:center;padding:15px 0;margin-top:20px;font-size:13px;color:#888;border-top:1px solid #333;}
.copyright .highlight{color:var(--gold-primary);font-weight:700;}
/* ==============================================================
BACK-TO-TOP
============================================================== */
.back-to-top{
position:fixed;bottom:15px;right:15px;width:45px;height:45px;border-radius:50%;
background:var(--gold-primary);color:var(--light);display:flex;align-items:center;justify-content:center;
opacity:0;visibility:hidden;transition:all .3s ease;z-index:999;
}
.back-to-top.active{opacity:1;visibility:visible;}
.back-to-top:hover{background:var(--gold-dark);transform:translateY(-5px);}
/* ==============================================================
ANIMACIONES
============================================================== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-50px);}to{opacity:1;transform:none;}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(50px);}to{opacity:1;transform:none;}}
@keyframes zoomIn{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:none;}}
@keyframes fadeIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
/* ==============================================================
BREAKPOINTS
============================================================== */
/* ---------- Tablets ≤ 991 px ---------- */
@media (max-width:991px){
/* estructura */
.about-image,.about-text{flex:100%;padding:0;text-align:center;}
.about-image{margin-bottom:30px;}
.ventajas-container{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
/* hamburguesa y animación */
.header .hamburger{display:block;margin-left:10px;}
.hamburger.active .bar:nth-child(2){opacity:0;}
.hamburger.active .bar:nth-child(1){transform:translateY(8px) rotate(45deg);}
.hamburger.active .bar:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
/* off-canvas desde la derecha */
.header .nav-menu{
position:fixed;inset:0;width:100vw;height:100vh;background:var(--light);
flex-direction:column;align-items:center;justify-content:flex-start;
padding:60px 0;transform:translateX(100%);transition:transform .35s ease;
box-shadow:0 10px 20px rgba(0,0,0,.1);z-index:1000;
}
.header .nav-menu.active{transform:translateX(0);}
.header .nav-item{margin:15px 0;}
.header .nav-link{color:var(--dark);font-size:1.1rem;}
.close-menu{display:block;}
/* dropdown acordeón */
.dropdown .submenu{
position:static;width:100%;max-width:100%;text-align:center;margin:0 auto;
padding:0;background:transparent;border:none;box-shadow:none;
max-height:0;overflow:hidden;transition:max-height .3s;
}
.dropdown.open .submenu{
max-height:600px;padding:10px 0;animation:fadeIn .3s ease-in-out;
}
/* flecha */
.dropdown-toggle::after{content:'▸';margin-left:6px;vertical-align:middle;transition:transform .3s;}
.dropdown.open .dropdown-toggle::after{transform:rotate(90deg);}
/* centrar texto + flecha */
.nav-item.dropdown{width:auto;}
.dropdown-toggle{display:inline-flex;gap:6px;align-items:center;justify-content:center;margin:0 auto;width:auto;}
/* ajuste secciones */
.hero{height:50vh;}
.footer-container{grid-template-columns:1fr;text-align:center;}
.footer-logo,.footer-links,.footer-newsletter{margin-bottom:20px;}
.social-links{justify-content:center;}
.gallery-container{grid-template-columns:1fr;}
}
/* ---------- Móviles ≤ 768 px ---------- */
@media (max-width:768px){
.hamburger{display:block;margin-left:10px;}
.hamburger.active .bar:nth-child(2){opacity:0;}
.hamburger.active .bar:nth-child(1){transform:translateY(8px) rotate(45deg);}
.hamburger.active .bar:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
.nav-menu{
position:fixed;left:-100%;top:0;flex-direction:column;
background:var(--light);width:100%;height:100vh;text-align:center;
transition:left .3s ease;box-shadow:0 10px 20px rgba(0,0,0,.1);
padding:60px 0;z-index:1000;
}
.nav-menu.active{left:0;}
.nav-item{margin:15px 0;}
.nav-link{color:var(--dark);font-size:16px;}
.nav-link:hover{color:var(--gold-primary);}
.dropdown .submenu{
position:static;opacity:1;visibility:visible;transform:none;
background:transparent;border:none;box-shadow:none;
max-height:0;overflow:hidden;transition:max-height .3s;
}
.dropdown.open .submenu{max-height:600px;}
/* flecha — corrección: reseteamos la rotación heredada */
.dropdown-toggle::after{
content:'▸';
margin-left:6px;
transform:none; /* ← evita que se quede vertical */
}
.dropdown.open .dropdown-toggle::after{
content:'▾';
transform:none; /* ← flecha abajo sin giro extra */
}
.hero{height:50vh;}
.footer-container{grid-template-columns:1fr;text-align:center;}
.footer-logo,.footer-links,.footer-newsletter{margin-bottom:20px;}
.social-links{justify-content:center;}
.gallery-container{grid-template-columns:1fr;}
}
/* ---------- Teléfonos pequeños ≤ 576 px ---------- */
@media (max-width:576px){
.logo-img{height:50px;}
.logo-text{font-size:18px;}
.hero{height:40vh;}
.hero-title{font-size:clamp(24px,6vw,32px);}
.hero-subtitle{font-size:clamp(12px,3vw,16px);}
.btn{padding:10px 20px;font-size:14px;}
.about-tac,.ventajas,.gallery,.cta{padding:60px 0;}
.section-title{font-size:clamp(24px,3.5vw,30px);}
.ventaja-card{max-width:100%;}
}
/* ==============================================================
APPLICATIONS 3D SECTION
============================================================== */
.applications-3d {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.applications-3d::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.applications-content {
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: center;
position: relative;
z-index: 2;
}
.applications-image {
flex: 1;
min-width: 300px;
position: relative;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
transform: translateX(-30px);
opacity: 0;
animation: slideInLeft 1s ease forwards 0.3s;
}
.applications-image img {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
}
.applications-image:hover img {
transform: scale(1.05);
}
.image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
padding: 20px;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.applications-image:hover .image-overlay {
transform: translateY(0);
}
.overlay-content h3 {
color: var(--gold-primary);
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
}
.overlay-content p {
color: var(--light);
font-size: 14px;
margin: 0;
}
.applications-text {
flex: 1;
min-width: 300px;
padding: 0 20px;
transform: translateX(30px);
opacity: 0;
animation: slideInRight 1s ease forwards 0.5s;
}
.applications-text h3 {
font-size: 28px;
font-weight: 700;
color: var(--dark);
margin-bottom: 20px;
position: relative;
}
.applications-text h3::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 60px;
height: 3px;
background: var(--gold-primary);
}
.applications-text > p {
font-size: 16px;
line-height: 1.7;
color: #555;
margin-bottom: 30px;
}
.applications-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.application-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 20px;
background: var(--light);
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
transform: translateY(20px);
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
}
.application-item:nth-child(1) { animation-delay: 0.7s; }
.application-item:nth-child(2) { animation-delay: 0.9s; }
.application-item:nth-child(3) { animation-delay: 1.1s; }
.application-item:nth-child(4) { animation-delay: 1.3s; }
.application-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(212, 175, 55, 0.2);
}
.app-icon {
font-size: 24px;
width: 50px;
height: 50px;
background: var(--gold-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.app-content h4 {
font-size: 16px;
font-weight: 600;
color: var(--dark);
margin-bottom: 8px;
}
.app-content p {
font-size: 14px;
color: #666;
line-height: 1.5;
margin: 0;
}
.applications-footer {
font-size: 15px;
line-height: 1.7;
color: #555;
margin-bottom: 25px;
font-style: italic;
padding-left: 20px;
border-left: 3px solid var(--gold-primary);
}
/* Animaciones adicionales */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ==============================================================
RESPONSIVE DESIGN
============================================================== */
/* Tablets ≤ 991px */
@media (max-width: 991px) {
.applications-content {
flex-direction: column;
text-align: center;
}
.applications-image,
.applications-text {
flex: none;
width: 100%;
transform: none;
animation: fadeInUp 1s ease forwards;
}
.applications-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}
/* Móviles ≤ 768px */
@media (max-width: 768px) {
.applications-3d {
padding: 60px 0;
}
.applications-content {
gap: 30px;
}
.applications-text {
padding: 0;
}
.applications-text h3 {
font-size: 24px;
}
.applications-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.application-item {
padding: 15px;
}
.app-icon {
width: 40px;
height: 40px;
font-size: 20px;
}
}
/* Móviles pequeños ≤ 576px */
@media (max-width: 576px) {
.applications-text h3 {
font-size: 22px;
}
.applications-text > p,
.applications-footer {
font-size: 14px;
}
.application-item {
flex-direction: column;
text-align: center;
gap: 10px;
}
.app-content h4 {
font-size: 15px;
}
.app-content p {
font-size: 13px;
}
}
/* ==============================================================
APPLICATIONS 3D SECTION
============================================================== */
.applications-3d {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.applications-3d::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.applications-content {
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: center;
position: relative;
z-index: 2;
}
.applications-image {
flex: 1;
min-width: 300px;
position: relative;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
transform: translateX(-30px);
opacity: 0;
animation: slideInLeft 1s ease forwards 0.3s;
}
.applications-image img {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
}
.applications-image:hover img {
transform: scale(1.05);
}
.image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
padding: 20px;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.applications-image:hover .image-overlay {
transform: translateY(0);
}
.overlay-content h3 {
color: var(--gold-primary);
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
}
.overlay-content p {
color: var(--light);
font-size: 14px;
margin: 0;
}
.applications-text {
flex: 1;
min-width: 300px;
padding: 0 20px;
transform: translateX(30px);
opacity: 0;
animation: slideInRight 1s ease forwards 0.5s;
}
.applications-text h3 {
font-size: 28px;
font-weight: 700;
color: var(--dark);
margin-bottom: 20px;
position: relative;
text-align: center;
}
.applications-text h3::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: var(--gold-primary);
}
.applications-intro {
font-size: 16px;
line-height: 1.7;
color: #555;
margin-bottom: 30px;
text-align: center;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.applications-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.application-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 25px;
background: var(--light);
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
transform: translateY(20px);
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
}
.application-item:nth-child(1) { animation-delay: 0.7s; }
.application-item:nth-child(2) { animation-delay: 0.9s; }
.application-item:nth-child(3) { animation-delay: 1.1s; }
.application-item:nth-child(4) { animation-delay: 1.3s; }
.application-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(212, 175, 55, 0.2);
}
.app-icon {
font-size: 24px;
width: 50px;
height: 50px;
background: var(--gold-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.app-content h4 {
font-size: 16px;
font-weight: 600;
color: var(--dark);
margin-bottom: 8px;
}
.app-content p {
font-size: 15px;
color: #666;
line-height: 1.6;
margin: 0;
}
.applications-footer {
font-size: 15px;
line-height: 1.7;
color: #555;
margin-bottom: 25px;
font-style: italic;
padding-left: 20px;
border-left: 3px solid var(--gold-primary);
}
/* Animaciones adicionales */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ==============================================================
RESPONSIVE DESIGN
============================================================== */
/* Tablets ≤ 991px */
@media (max-width: 991px) {
.applications-content {
flex-direction: column;
text-align: center;
}
.applications-image,
.applications-text {
flex: none;
width: 100%;
transform: none;
animation: fadeInUp 1s ease forwards;
}
.applications-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}
/* Móviles ≤ 768px */
@media (max-width: 768px) {
.applications-3d {
padding: 60px 0;
}
.applications-content {
gap: 30px;
}
.applications-text {
padding: 0;
}
.applications-text h3 {
font-size: 24px;
}
.applications-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.application-item {
padding: 15px;
}
.app-icon {
width: 40px;
height: 40px;
font-size: 20px;
}
}
/* Móviles pequeños ≤ 576px */
@media (max-width: 576px) {
.applications-text h3 {
font-size: 22px;
}
.applications-text > p,
.applications-footer {
font-size: 14px;
}
.application-item {
flex-direction: column;
text-align: center;
gap: 10px;
}
.app-content h4 {
font-size: 15px;
}
.app-content p {
font-size: 13px;
}
}