:root{
  --pink: #ff5ea8; /* acento rosado */
  --purple: #8a47ff; /* acento morado */
  --bg: #ffffff;
  --muted:#6b6b6b;
  --radius: 14px;
  --shadow: 0 8px 30px rgba(13,12,22,0.08);
  --glass: rgba(255,255,255,0.75);
}

*{box-sizing:border-box}

html,body{height:100%;margin:0;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:#111}

body{padding-top:80px}

a{color:inherit;text-decoration:none}

header{position:fixed;top:0;left:0;right:0;z-index:40;backdrop-filter: blur(6px);background:linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.5));border-bottom:1px solid rgba(0,0,0,0.04)}

.container{max-width:1100px;padding:24px;margin:0 auto}

/* NAV */
.nav{display:flex;align-items:center;gap:16px;justify-content:space-between}

.brand{display:flex;gap:12px;align-items:center}

.logo{width:56px;height:56px;display:grid;place-items:center}

nav ul{display:flex;gap:18px;align-items:center;margin:0;padding:0;list-style:none}

nav a{padding:8px 12px;border-radius:10px;font-weight:600}

nav a[href="#prices"]{background:linear-gradient(90deg,var(--pink),var(--purple));color:white;animation:navTwinkle 2s ease-in-out infinite}

nav a.cta{background:linear-gradient(90deg,var(--pink),var(--purple));color:white;animation:navTwinkle 2s ease-in-out infinite}

/* HERO */
.hero{display:grid;grid-template-columns:1fr 500px;gap:40px;align-items:center;padding:80px 0;min-height:70vh}

.hero-left h1{font-size:clamp(32px,5vw,52px);margin:0 0 20px;line-height:1.2;font-weight:700}

.lead{color:var(--muted);margin-bottom:32px;font-size:18px;line-height:1.6;max-width:600px}

.actions{display:flex;gap:16px;flex-wrap:wrap}

.btn{padding:16px 24px;border-radius:12px;border:0;font-weight:600;cursor:pointer;box-shadow:var(--shadow);font-size:16px;transition:all 0.3s ease}

.btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,0.15)}

.btn-primary{background:linear-gradient(90deg,var(--pink),var(--purple));color:white}

.btn-outline{background:white;border:2px solid var(--pink);color:var(--pink)}

.btn-outline:hover{background:var(--pink);color:white}

/* Botones del hero con animaciones atractivas */
.hero-btn-primary{animation:heroBounce 3s ease-in-out infinite}

.hero-btn-outline{animation:heroPulse 2.5s ease-in-out infinite}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}

.card{background:white;border-radius:12px;padding:14px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center}

.card img{width:64px;height:64px;border-radius:10px;object-fit:cover}

/* SECCIONES */
section{padding:64px 0}

.section-title{display:flex;align-items:end;gap:12px;margin-bottom:20px}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.service{background:linear-gradient(180deg, rgba(250,250,250,1), rgba(255,255,255,1));padding:18px;border-radius:12px;box-shadow:var(--shadow)}

/* Tarjetas de servicios mejoradas */
.service-card:hover{transform:translateY(-8px);box-shadow:0 25px 60px rgba(0,0,0,0.15)}

/* PRICING */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}

/* PRICING SLIDER */
.pricing-slider-container{position:relative;overflow:hidden;margin-top:40px;padding-top:30px;width:100%}

.pricing-slider{display:flex;transition:transform 0.5s ease;gap:24px;width:max-content}

.pricing-slider .price-card{flex:0 0 300px;margin:0 12px;width:300px;padding-top:35px}

/* Slider responsive base */
@media(max-width:768px){
  .pricing-slider-container{overflow-x:auto;padding-bottom:10px}
  .pricing-slider{width:max-content;padding-bottom:10px}
  
  /* Scroll suave en móviles */
  .pricing-slider-container::-webkit-scrollbar{height:4px}
  .pricing-slider-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:2px}
  .pricing-slider-container::-webkit-scrollbar-thumb{background:var(--pink);border-radius:2px}
  
  /* Ocultar controles en móviles para usar scroll */
  .slider-controls{display:none}
}

/* Mostrar controles en desktop */
@media(min-width:769px){
  .slider-controls{display:flex}
}

/* Slider controls */
.slider-btn:hover{background:var(--purple) !important;transform:scale(1.1)}

.dot:hover{transform:scale(1.2)}

.price-card{border-radius:20px;padding:28px;text-align:center;border:1px solid rgba(0,0,0,0.06);background:white;box-shadow:0 10px 30px rgba(0,0,0,0.08);transition:all 0.3s ease;position:relative;overflow:hidden}

.price-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,0.15)}

.price-card h3{margin:6px 0;font-size:20px}

.price{font-size:28px;font-weight:700;margin:10px 0}

/* Efecto de titilado para las tarjetas de precios */
.twinkle-card{animation:cardTwinkle 3s ease-in-out infinite}

@keyframes cardTwinkle {
  0%, 100% {
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transform:scale(1);
  }
  50% {
    box-shadow:0 15px 40px rgba(255,94,168,0.2);
    transform:scale(1.02);
  }
}

/* Tarjeta destacada (dosis media) */
.twinkle-card:nth-child(2){
  animation:cardTwinkleHighlight 2.5s ease-in-out infinite;
}

@keyframes cardTwinkleHighlight {
  0%, 100% {
    box-shadow:0 15px 40px rgba(255,94,168,0.3);
    transform:scale(1.05);
  }
  50% {
    box-shadow:0 20px 50px rgba(138,71,255,0.4);
    transform:scale(1.08);
  }
}

/* FAQ */
.faq .item{background:rgba(250,250,250,0.9);padding:14px;border-radius:12px;margin-bottom:10px;cursor:pointer}

.faq .content{max-height:0;overflow:hidden;transition:max-height .36s ease}

/* FAQ mejorado */
.faq .item:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.1)}

.faq .item .content{max-height:0;overflow:hidden;transition:max-height 0.4s ease}

.faq .item.open .content{max-height:300px}

/* Ajustes para FAQ con imagen */
#faq .faq .item{margin-bottom:15px}

#faq .faq .item .content{max-height:0;overflow:hidden;transition:max-height 0.4s ease;padding:0 !important}

#faq .faq .item.open .content{max-height:200px;padding:15px 18px !important}

/* INTERSECCIÓN (CTA central con overlay) */
.intersection{position:relative;margin-top:40px}

.intersection .card-cta{position:relative;transform:translateY(-30px);margin:0 auto;max-width:880px;background:linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));border-radius:20px;padding:26px;box-shadow:0 20px 50px rgba(138,71,255,0.12);display:flex;gap:18px;align-items:center}

.badge{background:linear-gradient(90deg,var(--pink),var(--purple));color:white;padding:8px 12px;border-radius:999px;font-weight:700}

/* TESTIMONIOS */
.testimonials{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.t-card{padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,1), rgba(250,250,255,1));box-shadow:var(--shadow)}

/* FOOTER */
footer{border-top:1px solid rgba(0,0,0,0.04);padding:28px 0;margin-top:36px}

/* WhatsApp flotante */
.whatsapp-float{position:fixed;right:18px;bottom:18px;width:62px;height:62px;border-radius:50%;z-index:60;display:grid;place-items:center;background:#25D366;box-shadow:0 8px 30px rgba(37,211,102,0.3);animation:twinkle 2s ease-in-out infinite}

.whatsapp-float img{width:36px;height:36px}

/* Animación de titilado para WhatsApp */
@keyframes twinkle {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 30px rgba(37,211,102,0.3);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 12px 40px rgba(37,211,102,0.5);
  }
}

@keyframes navTwinkle {
  0%, 100% {
    transform: scale(1) translateY(0);
    box-shadow: 0 8px 30px rgba(255,94,168,0.3);
  }
  25% {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 12px 40px rgba(255,94,168,0.4);
  }
  50% {
    transform: scale(1.1) translateY(-4px);
    box-shadow: 0 16px 50px rgba(255,94,168,0.5);
  }
  75% {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 12px 40px rgba(255,94,168,0.4);
  }
}

@keyframes heroBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 8px 30px rgba(255,94,168,0.3);
  }
  25% {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 15px 40px rgba(255,94,168,0.4);
  }
  50% {
    transform: translateY(-12px) scale(1.1);
    box-shadow: 0 20px 50px rgba(255,94,168,0.5);
  }
  75% {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 15px 40px rgba(255,94,168,0.4);
  }
}

@keyframes heroPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 30px rgba(255,94,168,0.2);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 12px 40px rgba(255,94,168,0.4);
  }
}


/* ANIMACIONES SCROLL */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:all 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* Animaciones específicas para diferentes elementos */
.price-card{
  opacity:0;
  transform:translateY(40px) scale(0.95);
  transition:all 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}

.price-card.show{
  opacity:1;
  transform:translateY(0) scale(1);
}

.service-card{
  opacity:0;
  transform:translateY(35px) scale(0.98);
  transition:all 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}

.service-card.show{
  opacity:1;
  transform:translateY(0) scale(1);
}

.faq .item{
  opacity:0;
  transform:translateX(-20px);
  transition:all 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
}

.faq .item.show{
  opacity:1;
  transform:translateX(0);
}

/* Animaciones para secciones principales */
section{
  transition:all 0.8s ease-out;
}

section:nth-child(even){
  transform:translateX(-20px);
  opacity:0.8;
}

section:nth-child(odd){
  transform:translateX(20px);
  opacity:0.8;
}

section.show{
  transform:translateX(0);
  opacity:1;
}

/* Animación especial para el hero */
.hero{
  opacity:0;
  transform:translateY(50px);
  transition:all 1s cubic-bezier(0.25,0.46,0.45,0.94);
}

.hero.show{
  opacity:1;
  transform:translateY(0);
}

/* Animación para títulos de sección */
.section-title h2{
  opacity:0;
  transform:translateY(25px);
  transition:all 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}

.section-title.show h2{
  opacity:1;
  transform:translateY(0);
}

/* Animación para imágenes */
img{
  transition:all 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}

img:hover{
  transform:scale(1.02);
}

/* Animación para botones */
.btn{
  transition:all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
}

.btn:hover{
  transform:translateY(-3px) scale(1.05);
}

/* Animación para cards con efecto parallax sutil */
.price-card:hover,
.service-card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

/* Animaciones específicas para secciones con scroll */
.scroll-section{
  opacity:0;
  transform:translateY(60px);
  transition:all 1s cubic-bezier(0.25,0.46,0.45,0.94);
}

.scroll-section.show{
  opacity:1;
  transform:translateY(0);
}

/* Animación escalonada para elementos dentro de secciones */
.scroll-section .reveal{
  opacity:0;
  transform:translateY(40px);
  transition:all 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}

.scroll-section.show .reveal{
  opacity:1;
  transform:translateY(0);
}

/* Animación especial para el hero section */
.hero{
  opacity:0;
  transform:translateY(80px);
  transition:all 1.2s cubic-bezier(0.25,0.46,0.45,0.94);
}

.hero.show{
  opacity:1;
  transform:translateY(0);
}

/* Animación para el footer */
footer{
  opacity:0;
  transform:translateY(50px);
  transition:all 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}

footer.show{
  opacity:1;
  transform:translateY(0);
}

/* Efecto de parallax sutil para imágenes */
.scroll-section img{
  transition:all 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}

.scroll-section.show img{
  transform:scale(1);
}

/* Animación para títulos de sección con efecto especial */
.section-title h2{
  opacity:0;
  transform:translateY(30px) scale(0.95);
  transition:all 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}

.scroll-section.show .section-title h2{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Animación para el slider de precios */
.pricing-slider-container{
  opacity:0;
  transform:translateY(40px);
  transition:all 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}

.scroll-section.show .pricing-slider-container{
  opacity:1;
  transform:translateY(0);
}

/* Animación para FAQ con efecto de deslizamiento */
.faq .item{
  opacity:0;
  transform:translateX(-30px);
  transition:all 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}

.scroll-section.show .faq .item{
  opacity:1;
  transform:translateX(0);
}

/* Efecto de brillo sutil en hover para elementos interactivos */
.price-card:hover,
.service-card:hover,
.btn:hover{
  box-shadow:0 15px 35px rgba(255,94,168,0.2);
}

/* Animación de entrada para el formulario de contacto */
#contactForm{
  opacity:0;
  transform:translateY(30px) scale(0.98);
  transition:all 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}

.scroll-section.show #contactForm{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Responsive Design */

/* Tablets grandes y laptops pequeñas */
@media(max-width:1200px){
  .container{max-width:900px;padding:20px}
  .hero{grid-template-columns:1fr 400px;gap:30px}
  .hero-left h1{font-size:clamp(28px,4vw,48px)}
}

/* Tablets */
@media(max-width:980px){
  .container{max-width:700px;padding:18px}
  
  /* Hero section */
  .hero{grid-template-columns:1fr;gap:40px;padding:60px 0;min-height:60vh}
  .hero-left h1{font-size:clamp(26px,5vw,42px);margin-bottom:16px}
  .lead{font-size:16px;margin-bottom:28px}
  .actions{gap:12px;justify-content:center}
  .btn{padding:14px 20px;font-size:15px}
  
  /* Navigation */
  .nav{gap:12px}
  nav ul{gap:12px}
  nav a{padding:6px 10px;font-size:14px}
  
  /* Cards y grids */
  .cards{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  
  /* About section */
  #about div[style*="grid-template-columns:400px 1fr"]{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }
  #about div[style*="grid-template-columns:400px 1fr"] img{
    height:300px !important;
  }
  
  /* Pricing slider */
  .pricing-slider-container{padding-top:20px}
  .pricing-slider .price-card{flex:0 0 280px;width:280px;margin:0 8px}
  
  /* Services section */
  .service-card{padding:20px;margin-bottom:16px}
  
  /* FAQ section */
  #faq div[style*="grid-template-columns:400px 1fr"]{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }
  #faq div[style*="grid-template-columns:400px 1fr"] img{
    height:300px !important;
  }
}

/* Móviles grandes */
@media(max-width:768px){
  .container{padding:16px}
  body{padding-top:70px}
  
  /* Header */
  header{padding:12px 0}
  .brand{gap:8px}
  .logo{width:48px;height:48px}
  .brand div:last-child{font-size:12px}
  .brand div:first-child{font-size:14px}
  
  /* Navigation */
  nav ul{gap:8px;flex-wrap:wrap}
  nav a{padding:6px 8px;font-size:13px;border-radius:8px}
  
  /* Hero section */
  .hero{padding:40px 0;min-height:50vh}
  .hero-left h1{font-size:clamp(24px,6vw,36px);line-height:1.3}
  .lead{font-size:15px;line-height:1.5;margin-bottom:24px}
  .actions{flex-direction:column;gap:10px;align-items:stretch}
  .btn{padding:12px 18px;font-size:14px;text-align:center}
  
  /* Hero image */
  .hero aside div{max-width:100%}
  .hero aside div div{
    top:15px !important;
    right:15px !important;
    padding:8px 16px !important;
    font-size:14px !important;
  }
  
  /* Section titles */
  .section-title h2{font-size:clamp(24px,5vw,32px)}
  
  /* About section */
  #about div[style*="grid-template-columns:400px 1fr"] img{
    height:250px !important;
  }
  #about h3{font-size:20px !important;margin-bottom:16px !important}
  #about p{font-size:14px !important;line-height:1.6 !important}
  
  /* Pricing section */
  .pricing-slider-container{padding-top:15px}
  .pricing-slider .price-card{
    flex:0 0 260px;
    width:260px;
    margin:0 6px;
    padding:20px;
  }
  .price-card h3{font-size:18px !important}
  .price{font-size:24px !important}
  .price-card p{font-size:13px !important}
  
  /* Services section */
  .service-card{padding:16px;margin-bottom:12px}
  .service-card h3{font-size:18px !important;margin-bottom:12px !important}
  .service-card p{font-size:13px !important;line-height:1.5 !important}
  
  /* FAQ section */
  #faq div[style*="grid-template-columns:400px 1fr"] img{
    height:250px !important;
  }
  .faq .item{margin-bottom:16px !important}
  .faq .item h4{font-size:16px !important;padding:12px 16px !important}
  .faq .item .content{font-size:14px !important;line-height:1.5 !important}
  
  /* WhatsApp button */
  .whatsapp-float{width:56px;height:56px;right:15px;bottom:15px}
  .whatsapp-float img{width:32px;height:32px}
}

/* Móviles pequeños */
@media(max-width:480px){
  .container{padding:12px}
  body{padding-top:65px}
  
  /* Header */
  .brand{gap:6px}
  .logo{width:40px;height:40px}
  .brand div:last-child{font-size:10px}
  .brand div:first-child{font-size:12px}
  
  /* Navigation */
  nav ul{gap:6px}
  nav a{padding:5px 6px;font-size:12px}
  
  /* Hero section */
  .hero{padding:30px 0;min-height:45vh}
  .hero-left h1{font-size:clamp(20px,7vw,28px)}
  .lead{font-size:14px;margin-bottom:20px}
  .btn{padding:10px 16px;font-size:13px}
  
  /* Hero image overlay */
  .hero aside div div{
    top:10px !important;
    right:10px !important;
    padding:6px 12px !important;
    font-size:12px !important;
  }
  
  /* Section titles */
  .section-title h2{font-size:clamp(20px,6vw,28px)}
  
  /* About section */
  #about div[style*="grid-template-columns:400px 1fr"] img{
    height:200px !important;
  }
  #about h3{font-size:18px !important}
  #about p{font-size:13px !important}
  
  /* Pricing section */
  .pricing-slider .price-card{
    flex:0 0 240px;
    width:240px;
    margin:0 4px;
    padding:16px;
  }
  .price-card h3{font-size:16px !important}
  .price{font-size:20px !important}
  .price-card p{font-size:12px !important}
  
  /* Services section */
  .service-card{padding:14px;margin-bottom:10px}
  .service-card h3{font-size:16px !important}
  .service-card p{font-size:12px !important}
  
  /* FAQ section */
  #faq div[style*="grid-template-columns:400px 1fr"] img{
    height:200px !important;
  }
  .faq .item h4{font-size:14px !important;padding:10px 14px !important}
  .faq .item .content{font-size:13px !important}
  
  /* WhatsApp button */
  .whatsapp-float{width:50px;height:50px;right:12px;bottom:12px}
  .whatsapp-float img{width:28px;height:28px}
}

/* Móviles muy pequeños */
@media(max-width:360px){
  .container{padding:10px}
  
  /* Hero section */
  .hero{padding:25px 0}
  .hero-left h1{font-size:clamp(18px,8vw,24px)}
  .lead{font-size:13px}
  .btn{padding:8px 14px;font-size:12px}
  
  /* Navigation */
  nav ul{flex-direction:column;gap:4px;align-items:stretch}
  nav a{text-align:center;padding:8px 6px}
  
  /* Pricing cards */
  .pricing-slider .price-card{
    flex:0 0 220px;
    width:220px;
    padding:14px;
  }
  
  /* Section spacing */
  .section-title{margin-bottom:20px}
  .section-title h2{font-size:clamp(18px,7vw,22px)}
}

/* Mejoras adicionales para responsive */

/* Asegurar que las imágenes sean responsive */
img{max-width:100%;height:auto}


/* Mejorar la navegación en pantallas muy pequeñas */
@media(max-width:480px){
  .nav{flex-direction:column;gap:10px;align-items:center}
  .brand{margin-bottom:10px}
  nav ul{width:100%;justify-content:center}
}

/* Ajustes para landscape en móviles */
@media(max-width:768px) and (orientation:landscape){
  .hero{min-height:40vh;padding:20px 0}
  .hero-left h1{font-size:clamp(20px,4vw,28px)}
  .lead{font-size:14px;margin-bottom:16px}
  .actions{flex-direction:row;gap:8px}
}

/* Mejorar la legibilidad en pantallas pequeñas */
@media(max-width:480px){
  .price-card .price{font-size:18px !important}
  .price-card h3{font-size:14px !important}
  .service-card h3{font-size:14px !important}
  .faq .item h4{font-size:13px !important}
}

/* Asegurar que los botones sean táctiles en móviles */
@media(max-width:768px){
  .btn{min-height:44px;min-width:44px}
  nav a{min-height:36px;display:flex;align-items:center;justify-content:center}
  .whatsapp-float{min-width:44px;min-height:44px}
}

/* FOOTER STYLES */
footer{background:linear-gradient(180deg, rgba(250,250,250,1), rgba(245,245,250,1));border-top:1px solid rgba(0,0,0,0.05)}

footer a:hover{color:var(--pink) !important}

/* Footer responsive */

/* Tablets grandes */
@media(max-width:1200px){
  footer .container > div{grid-template-columns:1fr 1.5fr 1fr;gap:30px}
}

/* Tablets */
@media(max-width:980px){
  footer .container > div{
    grid-template-columns:1fr;
    gap:30px;
    text-align:center;
    padding:35px 0;
  }
  footer .brand{justify-content:center;margin-bottom:20px}
  footer nav{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:20px}
  footer h4{font-size:16px;margin-bottom:16px}
}

/* Móviles grandes */
@media(max-width:768px){
  footer .container > div{
    padding:30px 0;
    gap:25px;
  }
  footer .brand{
    flex-direction:column;
    text-align:center;
    gap:12px;
    margin-bottom:25px;
  }
  footer .brand .logo{margin:0 auto}
  footer nav{
    flex-direction:column;
    gap:12px;
    margin-bottom:20px;
  }
  footer nav a{
    justify-content:center;
    padding:8px 0;
  }
  footer h4{font-size:15px;margin-bottom:12px}
  footer a, footer span{font-size:14px}
  
  /* Línea inferior responsive */
  footer .container > div:last-child{
    flex-direction:column;
    text-align:center;
    gap:8px;
  }
}

/* Móviles pequeños */
@media(max-width:480px){
  footer .container > div{
    padding:25px 0;
    gap:20px;
  }
  footer .brand{
    gap:10px;
    margin-bottom:20px;
  }
  footer .brand .logo{width:40px;height:40px}
  footer .brand > div:first-child{font-size:16px}
  footer .brand > div:last-child{font-size:11px}
  footer nav{gap:10px;margin-bottom:15px}
  footer nav a{font-size:13px;padding:6px 0}
  footer h4{font-size:14px !important;margin-bottom:10px}
  footer a, footer span{font-size:12px !important}
  footer p{font-size:12px !important;line-height:1.5}
  
  /* Información de contacto más compacta */
  footer .container > div > div:last-child > div{
    gap:6px;
    margin-bottom:8px;
  }
  
  /* Línea inferior más compacta */
  footer .container > div:last-child{
    padding:15px 0;
    font-size:11px !important;
  }
}

/* Móviles muy pequeños */
@media(max-width:360px){
  footer .container{padding:12px}
  footer .container > div{padding:20px 0;gap:15px}
  footer .brand .logo{width:36px;height:36px}
  footer .brand > div:first-child{font-size:14px}
  footer .brand > div:last-child{font-size:10px}
  footer nav a{font-size:12px;padding:4px 0}
  footer h4{font-size:13px !important}
  footer a, footer span{font-size:11px !important}
  footer p{font-size:11px !important}
  footer .container > div:last-child{font-size:10px !important;padding:12px 0}
}