/* ============================================================
   1. VARIABLES — PALETA GLOBAL
============================================================ */
:root{
  --blue-deep: #0A3D62;
  --blue-mid:  #3C6382;
  --gold:      #C8A951;
  --bg:        #F8F9FA;
  --text:      #2F3640;
  --muted:     #6B7280;
  --card:      #FFFFFF;
}

/* Modo oscuro */
:root[data-theme="dark"]{
  --bg: #0A3D62;
  --text: #F5F7FA;
  --card: rgba(255,255,255,0.04);
  --gold: #C8A951;
  --muted: rgba(245,247,250,0.8);
}

/* ============================================================
   2. RESET Y BASE GLOBAL
============================================================ */
*{box-sizing:border-box}

html,body{
  margin:0;padding:0;
  font-family:'Poppins', system-ui, -apple-system, "Segoe UI", Roboto;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased;
  -webkit-touch-callout: none;
}

a{color:var(--blue-deep); text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:20px}

.section{padding:56px 0}

/* ============================================================
   3. HEADER + NAVEGACIÓN  —  (OPTIMIZADO)
   Transparent header with blur (Option A). Mobile: hamburger
   left, logo next, actions right. Language first, theme last.
============================================================ */

/* Header base */
.header{
  background:transparent;
  position:sticky;
  top:0;
  z-index:100;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Header inner wrapper */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 20px;
}

/* Logo */
.logo{display:flex;align-items:center;gap:8px}
.logo img{height:48px;display:block}

/* Menu toggle (hamburger) */
.menu-toggle{
  display:none;
  background:transparent;border:none;
  font-size:26px;cursor:pointer;color:var(--text);
  padding:6px 8px;border-radius:8px;
}

/* Primary nav (desktop) */
.nav{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:center;
  flex:1;
}

/* nav links */
.nav a{
  color:var(--text);
  font-weight:600;
  position:relative;
  transition:color 0.3s ease;
  padding:6px 8px;
}
.nav a::after{
  content:"";
  position:absolute;left:0;bottom:-3px;
  width:0;height:2px;background-color:var(--gold);
  transition:width 0.3s ease;
}
.nav a:hover{color:var(--gold)}
.nav a:hover::after{width:100%}

/* Actions container (languages + theme) */
.actions{
  display:flex;
  gap:12px;
  align-items:center;
  min-width:0;
  /* don't push it unless mobile rules ask it */
}

/* Ensure the language switch comes first and theme second regardless of HTML order */
.actions .lang-switch{ order: 1; display:flex; gap:8px; align-items:center; }
.actions .theme-toggle{ order: 2; }

/* FIX: theme toggle icons horizontal */
.theme-toggle{
  cursor:pointer;
  padding:8px 10px;
  border-radius:8px;
  background:var(--card);
  border:1px solid var(--muted);
  display:flex;
  flex-direction:row; /* ← ESTO ES LO QUE LO HACE HORIZONTAL */
  align-items:center;
  gap:6px;            /* Espacio entre sol y luna */
  justify-content:center;
}

.theme-toggle {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Language switch default style */
.lang-switch{
  font-weight:700;padding:6px 8px;border-radius:6px;
  color:var(--muted); display:flex; gap:6px; align-items:center;
}
.lang-switch a{color:inherit;padding:6px 6px}

/* ============================================================
   4. HERO PRINCIPAL
   (Mantenido tal cual)
============================================================ */
.hero{
  display:flex;align-items:center;justify-content:space-between;
  padding:4rem 2rem; max-width:1200px; margin:0 auto; gap:2rem;
}

.hero-left{
  flex:1 1 55%;min-width:300px;
  display:flex;flex-direction:column;gap:12px;
}

.kicker{
  display:inline-block;padding:6px 10px;background:var(--card);
  border-radius:999px;color:var(--muted);font-weight:700;
}
.h1{font-size:34px;line-height:1.05;margin-bottom:8px}
.lead{font-size:18px;color:var(--muted)}

.hero-buttons{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;
}

.cta{
  display:inline-block;padding:12px 18px;border-radius:10px;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue-mid));
  color:white;font-weight:700;
  box-shadow:0 6px 18px rgba(10,61,98,0.12);
  transition:0.3s;
}
.cta:hover{
  background:var(--gold);color:var(--blue-deep);
}

.secondary-cta{
  padding:10px 14px;border-radius:10px;border:1px solid var(--muted);
  background:transparent;color:var(--text);font-weight:700;
  transition:0.3s;
}
.secondary-cta:hover{
  border-color:var(--gold);color:var(--gold);
}

/* Imagen */
.hero-right{
  flex:1 1 40%;max-width:500px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.hero-image{
  width:100%;border-radius:16px;
  object-fit:cover;box-shadow:0 4px 20px rgba(0,0,0,0.1);
}

/* ============================================================
   5. SECCIONES (SERVICIOS, FEATURED NEWS, POR QUÉ AIS)
============================================================ */

/* --- Títulos de secciones con hover dorado --- */
.section h2{
  font-size:26px;font-weight:800;margin-bottom:16px;
  transition:0.3s;
}
.section h2:hover{color:var(--gold)}

/* --- Cards generales --- */
.cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.card{
  background:var(--card);
  border-radius:12px;padding:20px;
  border:1px solid var(--muted);
  box-shadow:0 6px 18px rgba(10,61,98,0.04);
}

/* ========= FEATURED NEWS ========== */
.featured-news{
  max-width:1100px;margin:0 auto;
  padding:60px 20px 40px;text-align:left;
}

.featured-news-card{
  background:var(--card);
  border-radius:14px;padding:24px 26px;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
  transition:0.25s ease;
}
.featured-news-card:hover{
  border-color:var(--gold);
  box-shadow:0 12px 26px rgba(0,0,0,0.12);
  transform:translateY(-4px);
}

.featured-news-card h3{margin:0 0 12px;font-size:20px;font-weight:700}
.featured-news-card h3 a{color:var(--text)}
.featured-news-card h3 a:hover{color:var(--gold)}
.featured-news-card .excerpt{color:var(--muted);font-size:15px}

/* Skeleton */
.skeleton-featured{
  width:100%;height:110px;border-radius:12px;
  background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5 50%,#e0e0e0 75%);
  background-size:200% 100%;animation:shimmer 1.6s infinite;
}

/* Botón destacado */
.featured-button{
  display:inline-block;margin-top:20px;
  padding:12px 18px;border-radius:10px;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue-mid));
  color:white;font-weight:700;transition:.3s;
}
.featured-button:hover{
  background:var(--gold);color:var(--blue-deep);
}

/* ========= BOTÓN SECCIONES ========= */
.section-button{
  padding:12px 18px;border-radius:10px;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue-mid));
  color:white;font-weight:700;
  box-shadow:0 6px 18px rgba(10,61,98,0.12);
  display:inline-block;
  transition:0.3s;
}
.section-button:hover{
  background:var(--gold);color:var(--blue-deep);
}

/* ============================================================
   6. BLOG + TARJETAS DE NOTICIAS
============================================================ */

.blog-card{
  background:var(--card);
  border-radius:14px;padding:22px;
  box-shadow:0 4px 14px rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.06);
  transition:0.25s;
}
.blog-card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 26px rgba(0,0,0,0.12);
  border-color:var(--gold);
}
.blog-card h3 a:hover{color:var(--gold)}

/* ============================================================
   7. FOOTER
============================================================ */
.footer{
  padding:28px 0;margin-top:40px;
  border-top:1px solid var(--muted);
}
.footer-inner{
  display:flex;justify-content:space-between;gap:20px
}
.footer .links{display:flex;gap:12px;flex-wrap:wrap}
.small{font-size:13px;color:var(--muted)}

.footer .links a{
  position:relative;transition:color .3s;
}
.footer .links a::after{
  content:"";position:absolute;left:0;bottom:-3px;
  width:0;height:2px;background:var(--gold);
  transition:width .3s;
}
.footer .links a:hover{color:var(--gold)}
.footer .links a:hover::after{width:100%}

.footer-bottom{
  margin-top:10px;padding-top:8px;text-align:center;
  font-size:12px;color:var(--muted);
}

/* ============================================================
   8. RESPONSIVO
============================================================ */

/* Desktop -> tablet breakpoint adjustments */
@media (max-width:900px){
  .cards{grid-template-columns:1fr}
  .hero{flex-direction:column;text-align:center;padding:3rem 1.5rem}
  .hero-right{width:100%}
  .menu-toggle{display:block}
  /* Mobile nav hidden by default */
  .nav{
    display:none;
    flex-direction:column;
    background:var(--card);
    position:absolute;
    top:70px;
    left:0;
    right:0;
    padding:16px 20px;
    border-top:1px solid var(--muted);
    box-shadow:0 6px 10px rgba(0,0,0,0.08);
    align-items:flex-start;
    z-index:9998;
  }
  .nav.show{display:flex}
  /* Make nav links block on mobile to align left */
  .nav a{
    display:block;
    width:100%;
    padding:10px 0;
    text-align:left;
    color:var(--text);
  }
  /* Ensure nav underline effect still works */
  .nav a::after{left:0;right:auto}
}

/* Small phones */
@media (max-width:600px){
  .hero-buttons{flex-direction:column;align-items:center}
}

/* ============================================================
   9. Redes sociales oficiales con animación premium
============================================================ */

.social-links {
  display: flex;
  gap: 16px;
  align-items: center;
}

.social-links a {
  display: flex;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  padding: 6px;
  align-items: center;
  justify-content: center;
  background: var(--card);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform .28s ease, box-shadow .28s ease, opacity .28s ease;
  opacity: 0.92;
}

/* Animación al entrar (fade-in) */
.social-links a {
  animation: fadeInUp 0.6s ease forwards;
}

.social-links a:nth-child(1){animation-delay: .1s;}
.social-links a:nth-child(2){animation-delay: .2s;}
.social-links a:nth-child(3){animation-delay: .3s;}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hover con bounce */
.social-links a:hover {
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  opacity: 1;
}

/* Colores oficiales */
.social-links a.instagram { color: #E1306C; }
.social-links a.tiktok    { color: #000000; }
.social-links a.linkedin  { color: #0A66C2; }

/* SVG */
.social-links svg {
  width: 24px;
  height: 24px;
}

/* Centrar título y redes */
.social-wrapper {
  text-align: center;
}

.social-title {
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

/* ============================================================
   10. Botón flotante de WhatsApp — versión moderna y elegante
============================================================ */

.whatsapp-float {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 999;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: 0.25s ease;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 26px rgba(0,0,0,0.32);
}

.whatsapp-float svg {
  width: 34px;
  height: 34px;
  stroke: white;
}

/* ============================================================
   Ocultar el enlace Casos del menú
============================================================ */

.nav a[href="casos.html"] {
  display: none;
}

/* Ocultar Casos solo en la versión en ingles */
html[lang="en"] .nav a[href="casos_en.html"] {
  display: none !important;
}

/* Ocultar Casos solo en la versión en mandarín */
html[lang="zh"] .nav a[href="casos_zh.html"] {
  display: none !important;
}

/* ============================================================
   Skeleton para blog
============================================================ */

.skeleton-blog {
  height: 200px;            /* alto aproximado de la card */
  background: #e0e0e0;      /* gris claro */
  border-radius: 8px;       /* esquinas redondeadas */
  margin-bottom: 20px;      /* separación entre skeletons */
  position: relative;
  overflow: hidden;
}

/* Animación de shimmer */
.skeleton-blog::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: -150px;
  height: 100%;
  width: 150px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: loading 1.2s infinite;
}

@keyframes loading {
  0% {
    left: -150px;
  }
  100% {
    left: 100%;
  }
}

/* ============================================================
   ESTILO BOTONES IDIOMAS
============================================================ */

.lang-switch {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  gap: 8px;
  align-items: center;
}

.lang-switch a {
  color: var(--text);
  text-decoration: none;
  transition: 0.2s;
}

.lang-switch a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.lang-switch .active {
  color: var(--primary);
  text-decoration: underline;
}

/* ============================================================
   FIX FOOTER MOBILE
============================================================ */

@media (max-width: 768px) {

  .footer-inner {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    flex-wrap: wrap;
  }

  .footer .social-links {
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
  }

  .footer .links {
    text-align: center;
  }

  footer img {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  /* Evita cualquier overflow horizontal */
  body, html {
    overflow-x: hidden !important;
  }
  
  .footer {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* ============================================================
   FIX SECCIÓN "¿Por qué elegir AIS?" — RESPONSIVE
============================================================ */
@media (max-width: 768px) {

  /* Forzar que la grilla pase de 2 columnas → 1 */
  .cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
  }

  /* Asegurar que cada card ocupe todo el ancho */
  .cards .card {
    width: 100% !important;
    text-align: center !important;
  }

  /* Centrar íconos o SVG dentro de las cards */
  .cards .card svg {
    margin: 0 auto !important;
    display: block !important;
  }
}

/* ============================================================
   FIX HEADER MOBILE — STICKY, ORDEN Y ESPACIADO
   (Mobile behaviors: hamburger left, logo next, actions right)
============================================================ */
@media (max-width: 768px) {

  /* header fixed on mobile with blur (follows scroll like desktop) */
  header,
  .header {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 9999;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: rgba(255,255,255,0.6);
  }

  /* spacing so content doesn't hide under fixed header */
  body {
    padding-top: 72px !important;
  }

  /* layout of header-inner */
  .header-inner {
    padding: 10px 14px !important;
    align-items:center;
    gap:10px;
  }

  /* show hamburger and place it first */
  .menu-toggle {
    display:block;
    order: 1;
    margin-right:6px;
  }

  /* logo second */
  .logo {
    order: 2;
    flex: 0 0 auto;
  }

  /* actions third (pushed to the right) */
  .actions {
    order: 3;
    flex: 1 1 auto;
    display:flex;
    align-items:center;
    gap:10px;
    justify-content:flex-end; /* push languages left side of actions and theme at far right */
  }

  /* ensure lang-switch is left inside actions and theme at extreme right */
  .actions .lang-switch { order: 1; margin-right: 8px; }
  .actions .theme-toggle { order: 2; margin-left: 6px; }

  /* make the language links vertical when needed (if you want that later) */
  .lang-switch.vertical { flex-direction:column; align-items:flex-start; gap:6px; }

  /* nav becomes full-width stacked and left-aligned when visible */
  .nav{
    position:absolute;
    top:72px;
    left:0;
    right:0;
    background:var(--card);
    padding:16px 20px;
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
    border-top:1px solid rgba(0,0,0,0.06);
    display:none;
    flex-direction:column;
    align-items:flex-start;
    z-index:9998;
  }

  .nav.show{ display:flex; }

  .nav a{
    display:block;
    width:100%;
    padding:10px 0;
    text-align:left;
    color:var(--text);
    font-weight:600;
  }

  /* ensure underline animation won't overflow */
  .nav a::after{ left:0; width:0; }

  /* slightly smaller logo on mobile if needed */
  .logo img{ height:42px; }

  /* reduce hero padding on small screens */
  .hero{ padding:2.2rem 1rem; }

  /* reduce footer top padding to fit mobile */
  .footer{ padding:20px 0; margin-top:34px; }

}

/* ============================================================
   Small final tweaks for accessibility and focus states
============================================================ */
.menu-toggle:focus,
.theme-toggle:focus,
.lang-switch a:focus,
.nav a:focus {
  outline: 3px solid rgba(200,169,81,0.18);
  outline-offset: 2px;
}