:root {
  --solar: #4CAF50;
  --azure: #2196F3;
}

/* Utilidades ligeras para complementar Tailwind */
.brand-gradient {
  background: radial-gradient(1200px 600px at -10% -10%, var(--azure), transparent 60%),
              radial-gradient(1200px 600px at 110% 110%, var(--solar), transparent 60%),
              linear-gradient(135deg, var(--azure), var(--solar));
}

.section { padding: 64px 0; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }
.h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 800; margin-bottom: .75rem; }
.h3 { font-weight: 700; margin-bottom: .5rem; }

.card {
  background: #fff;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 6px 20px rgba(15,23,42,.06);
}
.shadow-soft { box-shadow: 0 8px 26px rgba(15,23,42,.08); }
.caption { margin-top: .5rem; font-size: .8rem; color: #64748b; }

.th { text-align: left; padding: .75rem 1rem; font-weight: 700; }
.td { padding: .75rem 1rem; vertical-align: top; }




/* Footer enhancements */
.footer-title { font-weight: 700; margin-bottom: .5rem; }
.footer-list { display: grid; gap: .35rem; font-size: .95rem; color: #f1f5f9; }
.footer-list a { color: inherit; }
.footer-list a:hover { color: var(--azure); }



/* Footer layout safety after removing 'Legal' column */
footer .container > .grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 768px) {
  footer .container > .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ====== MENÚ: enlaces con subrayado animado + CTA ====== */
.nav-link {
  position: relative;
  padding-bottom: 2px;
  transition: color .25s ease, transform .2s ease;
  font-weight: 600;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--azure), var(--solar));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
  border-radius: 2px;
}
.nav-link:hover { color: var(--azure); transform: translateY(-1px); }
.nav-link:hover::after { transform: scaleX(1); }

.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem .9rem;
  border-radius: .75rem;
  background: linear-gradient(135deg, var(--azure), var(--solar));
  color: #fff; font-weight: 700;
  box-shadow: 0 10px 24px rgba(33,150,243,.25);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  will-change: transform;
}
.nav-cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
.nav-cta:active { transform: translateY(0); }

.mobile-link {
  display: block;
  margin: .35rem .5rem;
  padding: .65rem .9rem;
  border-radius: .9rem;
  background: #fff;
  box-shadow: 0 1px 0 1px rgba(100,116,139,.12), 0 6px 16px rgba(15,23,42,.06);
  color: #0f172a;
  font-weight: 600;
}
.mobile-link:hover { color: var(--azure); box-shadow: 0 0 0 2px var(--azure) inset; }

.mobile-cta {
  display: block;
  margin: .6rem .5rem 0;
  text-align: center;
  padding: .75rem 1rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--azure), var(--solar));
  color: #fff; font-weight: 800;
}

.footer-brand {
  border-top: 0;
  background: #6b7280;
  color: #f3f4f6;
}
.footer-brand .container { padding-top: 2rem; padding-bottom: 2rem; }
.footer-brand a { color: #f3f4f6; }
.footer-brand a:hover { color: #ffffff; }

.footer-title { color: #ffffff; letter-spacing: .2px; }
.footer-list { color: #f1f5f9; }



.footer-cta {
  display: flex; gap: 1rem;
  align-items: center; justify-content: center;
  padding: 1rem .75rem;
  background: linear-gradient(90deg, var(--azure), var(--solar));
  color: #fff; font-weight: 700;
}
.footer-cta p { margin: 0; text-align: center; }
.footer-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .55rem .9rem; border-radius: .75rem;
  background: rgba(0,0,0,.18);
  color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.15);
  transition: transform .15s ease, background .2s ease;
}
.footer-cta-btn:hover { background: rgba(0,0,0,.28); transform: translateY(-1px); }

footer .container > .grid { gap: 2rem; }
@media (min-width: 768px) {
  footer .container > .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== Mobile menu vertical design ===== */
#mobileMenu {
  flex-direction: column;
  gap: .5rem;
  padding: .75rem 0;
  background: #fff;
  border-radius: .75rem;
  box-shadow: 0 6px 20px rgba(15,23,42,.1);
}

.mobile-link {
  display: block;
  width: 100%;
  padding: .9rem 1.2rem;
  border-radius: .5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  background: #fff;
  transition: background .2s, color .2s;
}
.mobile-link:hover {
  background: #f1f5f9;
  color: var(--azure);
}

.mobile-cta {
  display: block;
  width: 100%;
  margin-top: .5rem;
  padding: 1rem 1.25rem;
  text-align: center;
  border-radius: .75rem;
  background: linear-gradient(135deg, var(--azure), var(--solar));
  font-weight: 700;
  color: #fff;
  box-shadow: 0 4px 14px rgba(33,150,243,.3);
}

/* === Fix: imagen casa-solar responsiva y centrada en móvil === */
#que-es img.casa-solar-img{
  display:block;
  width:100%;
  max-width:560px; /* límite visual cómodo en móviles y tablets */
  height:auto;
  margin-left:auto;
  margin-right:auto;
  object-fit:cover;
}
#que-es figure{ text-align:center; }
@media (min-width:768px){
  #que-es img.casa-solar-img{ max-width:720px; }
}


/* === Unified brand logo sizing — same size mobile & desktop, responsive === */
:root{
  /* Control points (desktop-calibrated) */
  --logo-h-min: 22px;
  --logo-h-fluid: calc(1.08vw + 11px);
  --logo-h-max: 36px;
}

.brand-link { 
  display: flex; 
  align-items: center; 
  justify-content: center;           
  width: 100%;
  padding: .25rem 0;
}

.brand-logo {
  height: clamp(var(--logo-h-min), var(--logo-h-fluid), var(--logo-h-max));
  width: auto;
  max-height: 40px;       /* techo duro para pantallas 4K */
  object-fit: contain;
  margin: 0 auto;
  image-rendering: auto;
}

/* Desktop: alinear a la izquierda si el layout lo requiere */
@media (min-width: 1024px){
  .brand-link { justify-content: flex-start; width: auto; }
  .brand-logo { margin: 0; }
}

/* Footer: mismo tamaño que header para coherencia visual */
.footer-brand .brand-link { justify-content: flex-start; width: 100%; }
.footer-brand .brand-logo { height: clamp(var(--logo-h-min), var(--logo-h-fluid), var(--logo-h-max)); }

/* === Footer overrides for Tailwind text-slate-* inside dark footer === */
.footer-brand .text-slate-600,
.footer-brand .text-slate-700,
.footer-brand .text-slate-800,
.footer-brand .text-gray-500,
.footer-brand .text-gray-600 {
  color: #f3f4f6 !important; /* ensure readable text on medium-gray footer */
}
.footer-brand .hover\:text-azure:hover { color: #ffffff !important; }

.footer-legal {
  color: #f3f4f6;
  font-weight: 500;
}


/* === Unified legal strip === */
.footer-legal {
  background: #6b7280;         /* same medium gray as footer */
  color: #f3f4f6;              /* readable on gray */
  font-weight: 400;            /* same base weight as body in footer */
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 0.75rem 1rem;
}
.footer-legal a { color: #f3f4f6; text-decoration: none; }
.footer-legal a:hover, .footer-legal a:focus { color: #ffffff; text-decoration: underline; }
.footer-legal .muted, .footer-legal small { color: #e5e7eb; }

/* Layout helpers if legal strip has two sides (e.g., © | Volver arriba) */
.footer-legal .legal-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

@media (max-width: 640px) {
  .footer-legal { text-align: center; }
  .footer-legal .legal-inner { 
    flex-direction: column; 
    gap: 0.25rem;
  }
}


/* === Footer optimization (columns & spacing) === */
.footer-brand .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.footer-brand .brand-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  justify-content: flex-start; /* keep logo left-aligned */
  width: 100%;
}

/* Bottom row: copyright + back-to-top */
.footer-brand .footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem; /* ~mt-10 */
  font-size: .95rem;
}

/* Fine-tune text colors for consistency */
.footer-brand p,
.footer-brand .footer-bottom { color: #e5e7eb; }
.footer-brand a:hover { color: #ffffff; }

/* Responsive: stack columns neatly on mobile */
@media (max-width: 768px) {
  .footer-brand .grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .footer-brand .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }
}


/* Footer tagline: clamp to 3 lines */
.footer-brand .footer-tagline {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* === Brand logo sizing — Optimizado para que móvil y web tengan misma medida (responsive) === */
.brand-link { 
  display: flex; 
  align-items: center; 
  justify-content: center;
  width: 100%;
  padding: .25rem 0;
}

.brand-logo {
  /* Igual medida en móvil y desktop, pero responsive */
  height: clamp(22px, 1.08vw + 11px, 36px);
  width: auto;
  max-height: 40px;
  object-fit: contain;
  margin: 0 auto;
  image-rendering: auto;
}

/* Tablet (mantiene proporcionalidad) */
@media (min-width: 640px) and (max-width: 1023.98px){
  .brand-logo { height: clamp(22px, 1.08vw + 11px, 36px); }
}

/* Desktop */
@media (min-width: 1024px){
  .brand-link { justify-content: flex-start; width: auto; }
  .brand-logo { margin: 0; }
}

/* Footer: mismo ajuste pero un poco mayor para legibilidad */
.footer-brand .brand-link { justify-content: flex-start; width: 100%; }
.footer-brand .brand-logo { height: clamp(26px, 1.2vw + 12px, 42px); }