/* ===== Fuente global ===== */
html, body{
  font-family:"Plus Jakarta Sans", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===== Base ===== */
*{box-sizing:border-box}
:root{
  --header-h:64px;
  --blue:#0e223a;
  --gold:#d4af37;
  --gold-soft:#f3e6a0;
  --text:#0b1e3a;
  --bg:#0b1220;
}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;color:var(--text);background:#0b1220}
img{max-width:100%;display:block}
.container{width:min(1120px,92%);margin:0 auto}
.center{text-align:center}
.muted{opacity:.65}

a{color:inherit}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:30;background:var(--blue);color:#fff;transition:box-shadow .25s}
.site-header.is-scrolled{box-shadow:0 8px 30px rgba(0,0,0,.25)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand-img{height:44px;object-fit:contain}
.menu a{color:#dbeafe;text-decoration:none;font-weight:700;margin-left:18px;position:relative}
.menu a:after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--gold);transition:width .25s}
.menu a:hover:after{width:100%}

/* ===== Hero ===== */
.hero{
  position:relative;
  color:#fff;
  min-height:calc(100vh - var(--header-h));
  display:grid;
  align-items:center;
  padding:0;
  background-image:
    radial-gradient(1200px 420px at 18% -40%, rgba(212,175,55,.18), transparent 65%),
    url("assets/Banner_Clixenda2.jpg");
  background-repeat:no-repeat,no-repeat;
  background-size:auto,cover;
  background-position:center,58% center;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background:rgba(0,0,0,.55);
  animation:heroUnveil 1.6s ease-out forwards;
  pointer-events:none;
}
@keyframes heroUnveil{0%{opacity:1}100%{opacity:.30}}
.hero-inner{
  position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:calc(var(--header-h)+16px) 0 72px;gap:14px;
}
.hero h1{margin:0;font-weight:800;letter-spacing:.2px;font-size:clamp(32px,5.2vw,56px);text-shadow:0 2px 18px rgba(0,0,0,.25)}
.hero .gold{color:var(--gold)}
.hero-sub{
  max-width: 780px;
  font-size: clamp(16px, 1.1vw + 10px, 20px);  /* ← más pequeño */
  line-height: 1.6;
  opacity: .95;
}

/* ===== Botones ===== */
.cta{display:flex;gap:14px;align-items:center}
.btn-primary,.btn-secondary{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:0 18px;border-radius:12px;font-weight:800;text-decoration:none;cursor:pointer;line-height:1;
}
.btn-primary{border:2px solid transparent;color:#0b0b0b;background:linear-gradient(135deg,var(--gold),var(--gold-soft));box-shadow:0 10px 30px rgba(0,0,0,.18);overflow:hidden}
.btn-primary:before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:0;height:0;border-radius:50%;background:rgba(255,255,255,.35);transition:width .35s,height .35s}
.btn-primary:hover:before{width:260px;height:260px}
.btn-secondary{border:2px solid var(--gold);color:var(--text);background:#fff}

/* ===== Secciones ===== */
.section{padding:64px 0;background:#ffffff;scroll-margin-top:calc(var(--header-h) + 12px)}
.section.alt{background:linear-gradient(180deg,#f6f6fb,#eef2f7);border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}

.section-blue{background:var(--blue);color:#eef4ff}
.section-blue .section-title-lg{color:#fff}
.section-title-lg{font-size:clamp(28px,3.8vw,44px);margin:0 0 12px;font-weight:800}

/* ===== CLIXENDA SOCIAL ===== */
#social{background:var(--blue);border:none}
#social h2{color:var(--gold);font-weight:900;letter-spacing:.2px}
#social .social-lead{color:#e9d48b;line-height:1.65;letter-spacing:.1px}
#social .social-card h3{margin:0 0 6px;color:#0b1e3a}
#social .social-card{padding:20px}

/* ===== Sobre nosotros (oscuro + dorado) ===== */
#sobre{background:var(--blue);border:none}
#sobre h2{color:var(--gold);font-size:clamp(26px,3vw,36px);margin:0 0 12px;font-weight:900;letter-spacing:.2px}
#sobre p{color:#e9d48b;text-align:justify;text-justify:inter-word;line-height:1.65;letter-spacing:.1px;hyphens:auto;overflow-wrap:anywhere}
.about-grid{align-items:center}
#sobre .card{box-shadow:none;background:transparent;border:0;padding:0}
#sobre .card img{width:100%;height:100%;object-fit:cover;border-radius:18px;box-shadow:none}

/* Animaciones sobre */
.anim-up,.anim-zoom{will-change:transform,opacity}
.anim-up{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.anim-up.is-in{opacity:1;transform:none}
.anim-zoom{opacity:0;transform:scale(.96);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.anim-zoom.is-in{opacity:1;transform:scale(1)}
#sobre .stagger-1{transition-delay:.06s}
#sobre .stagger-2{transition-delay:.14s}
#sobre .stagger-3{transition-delay:.22s}
#sobre .stagger-4{transition-delay:.30s}
#sobre .card img:hover{transform:scale(1.01);transition:transform .35s cubic-bezier(.2,.7,.2,1)}

/* layout extra */
.about-grid{grid-template-columns:1.2fr 1fr}
.about-copy{padding-right:12px}
.about-media{max-height:520px}

/* ===== Pricing ===== */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.price-card{
  display:flex;flex-direction:column;height:460px;background:#fff;border-radius:18px;
  box-shadow:0 16px 40px rgba(2,8,23,.14);overflow:hidden;transform:translateY(0);
  transition:transform .3s, box-shadow .3s;
}
.price-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(2,8,23,.18)}
.price-card .pc-head{padding:18px;border-bottom:1px solid #e5e7eb;color:#0b1220}
.pc-head h4{margin:0 0 6px;font-size:18px}
.price{font-weight:900;font-size:20px;color:#082032}
.pc-body{flex:1;overflow:auto;padding:14px 18px 14px 18px;padding-right:12px;-webkit-overflow-scrolling:touch}
.price-card .pc-body::-webkit-scrollbar{width:8px}
.price-card .pc-body::-webkit-scrollbar-thumb{background:#c9a94a;border-radius:8px}
.price-card .pc-body{scrollbar-width:thin;scrollbar-color:#c9a94a #f1f5f9}
.pc-body.rich p{margin:0 0 6px}
.pc-body .bullets{margin:6px 0 8px 18px}
.pc-body .bullets li{margin:4px 0}
.pc-foot{padding:16px 18px 20px}
.price-card.badge{position:relative}
.pc-badge{position:absolute;top:12px;right:-6px;background:#fde68a;color:#8a6200;font-weight:900;padding:6px 10px;border-radius:999px;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.price-card.silver .pc-head{background:linear-gradient(135deg,#8e9eab,#eef2f3)}
.price-card.gold .pc-head{background:linear-gradient(135deg,var(--gold),#f7e7a9)}
.price-card.diamond .pc-head{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#082032}

/* ===== Clientes ===== */
.clients-bar{display:flex;gap:32px;align-items:center;justify-content:center;padding:18px 0;overflow-x:auto}
.client-logo{height:64px;object-fit:contain;filter:grayscale(.1);opacity:.95;transition:transform .25s,filter .25s,opacity .25s}
.client-logo:hover{transform:scale(1.06);filter:none;opacity:1}
.case{padding:18px;margin-top:14px}

/* ===== Contacto (oscuro y compacto) ===== */
.contact-dark{background:#0b0b0b;color:#fff}
.contact-dark .link{color:#c9e2ff}
.contact-grid{align-items:flex-start}
.contact-copy p{margin:10px 0}

/* Caja de redes */
.socials-box{display:flex;gap:20px;align-items:center;justify-content:center;width:max-content;padding:14px 28px;justify-self:center;align-self:center;margin:0 auto}
.socials-box .social-icon{width:28px;height:28px;object-fit:contain}
@media (max-width:900px){
  .socials-box{gap:16px;padding:12px 22px}
  .socials-box .social-icon{width:24px;height:24px}
}

/* ===== Footer ===== */
.footer{background:var(--blue);color:#cbd5e1;padding:18px 0}
.footer-inner{display:flex;align-items:center;justify-content:center}

/* ===== WhatsApp FAB ===== */
.wa-float{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;z-index:40;display:grid;place-items:center;background:#22c55e;box-shadow:0 16px 40px rgba(0,0,0,.35);transition:transform .2s}
.wa-float img{width:30px;height:30px}
.wa-float:hover{transform:translateY(-3px) scale(1.05)}

/* ===== Reveal genérico ===== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s,transform .5s}
.reveal.visible{opacity:1;transform:none}

/* ===== Tabs ===== */
.tabs .tabbar{display:flex;gap:12px;justify-content:center;margin:18px 0 22px}
.tabs .tab{border:none;padding:10px 18px;border-radius:16px;background:#e9eef5;font-weight:800;cursor:pointer;color:var(--text)}
.tabs .tab.active{background:linear-gradient(135deg,var(--gold),#f7e7a9);color:var(--text);box-shadow:0 10px 24px rgba(212,175,55,.35)}
.tabs .tabpanel{display:none}
.tabs .tabpanel.active{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===== Formularios ===== */
.form-wrap{background:#f8fafc;border:1px solid #e5e7eb;border-radius:18px;padding:20px;box-shadow:0 10px 20px rgba(2,6,23,.06)}
.field{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.field input,.field select{padding:12px;border-radius:12px;border:1px solid #cbd5e1;outline:none}
.field input:focus,.field select:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(212,175,55,.18)}
.actions{margin-top:8px}

/* ===== Responsive ===== */
.grid-2{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
.card{background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.18);overflow:hidden}
.card>img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr;gap:16px}
  .menu{display:none}
  .about-media{max-height:none}
}

/* ===== Scroll snap ===== */
.snap{scroll-snap-align:start}
html{scroll-snap-type:y proximity}

/* ========== FIX LEGIBILIDAD — PLANES ========== */
#planes{background:#0e223a}
#planes h2{color:#fff}
#planes .price-card{background:#fff;color:#0b1e3a}
#planes .price-card .pc-head h4,
#planes .price-card .price,
#planes .price-card .pc-body,
#planes .price-card .pc-body p,
#planes .price-card .pc-body li{color:#0b1e3a !important}
#planes .price-card .muted{color:#475569 !important}
#planes .price-card .pc-body,#planes .price-card .pc-body *{opacity:1 !important;filter:none !important}

/* ========== FIX LEGIBILIDAD — COTIZACIONES ========== */
#cotizaciones{background:#0e223a}
#cotizaciones h2{color:#fff}
#cotizaciones .form-wrap{background:#f8fafc;color:#0b1e3a}
#cotizaciones label{color:#0b1e3a;font-weight:600}
#cotizaciones input,#cotizaciones select,#cotizaciones textarea{color:#0b1e3a;caret-color:#0b1e3a}
#cotizaciones ::placeholder{color:#64748b;opacity:1}

/* ========== CLIENTES — Título y Logos ========== */
#clientes h2{font-size:clamp(28px,3.8vw,44px);font-weight:800}
#clientes .clients-bar{gap:40px;padding:22px 0}
#clientes .client-logo{height:128px;width:auto;object-fit:contain}
@media (max-width:900px){
  #clientes .client-logo{height:80px}
}

/* Quitar línea blanca entre Planes y Cotizaciones */
#cotizaciones.section.alt{border-top:0 !important}

/* Planes: interlineado y sangría */
#planes .price-card .pc-body{padding:20px 26px 22px 32px;line-height:1.6}
#planes .price-card .pc-body ul{margin:0;padding-left:18px}
#planes .price-card .pc-body li{margin:6px 0;line-height:1.6}
@media (max-width:900px){
  #planes .price-card .pc-body{padding:16px 20px 18px 26px;line-height:1.55}
  #planes .price-card .pc-body ul{padding-left:16px}
}

/* ============================================
   Clixenda Social — Forzar texto oscuro en el
   cuadro de contacto (card) para máxima legibilidad
   ============================================ */
#social .social-card,
#social .social-card *{
  color:#0b1e3a !important;   /* texto oscuro */
}

#social .social-card a{
  color:#0b1e3a !important;   /* links oscuros */
}

#social .social-card input,
#social .social-card select,
#social .social-card textarea{
  color:#0b1e3a;
}

#social .social-card ::placeholder{
  color:#64748b;
  opacity:1;
}

/* Si accidentalmente tiene 'contact-dark', neutralizarlo aquí */
#social .social-card.contact-dark{
  background:#ffffff !important;
  color:#0b1e3a !important;
}
/* Clixenda Social — justificar texto */
#social .social-lead,
#social p{
  text-align: justify;
  text-justify: inter-word;  /* mejora el espaciado en justificado */
  text-align-last: left;     /* la última línea queda alineada a la izquierda */
  hyphens: auto;             /* cortes de palabra automáticos */
  overflow-wrap: anywhere;   /* evita desbordes en palabras largas */
}
/* ===== CLIXENDA SOCIAL — Layout actualizado ===== */
#social{ background: var(--blue); border: none; }
#social h2{ color: var(--gold); font-weight: 900; letter-spacing: .2px; }
#social .social-lead{
  color: #e9d48b;
  line-height: 1.65;
  letter-spacing: .1px;
  text-align: justify;
  text-justify: inter-word;
  text-align-last: left;
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* Grid y columnas */
.social-grid{ grid-template-columns: 1.2fr 1fr; align-items: start; gap: 28px; }
.social-left{ display: grid; gap: 16px; align-content: start; }
.social-right{ display: grid; align-content: start; }

/* Imagen centrada y responsiva */
.social-figure{
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 280px;
  padding: 12px;
}
.social-figure img{
  max-width: 92%;
  max-height: 440px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.25));
  border-radius: 12px;
  background: #0d1b2a; /* leve fondo por si la imagen tiene transparencia */
}

/* Tarjeta de contacto con texto oscuro (sobre fondo blanco) */
#social .social-card{
  background: #ffffff;
  color: #0b1e3a;
  padding: 20px;
}
#social .social-card h3{ margin: 0 0 8px; color: #0b1e3a; }
#social .social-card p,
#social .social-card a{ color: #0b1e3a; }

/* Responsive */
@media (max-width: 900px){
  .social-grid{ grid-template-columns: 1fr; gap: 20px; }
  .social-figure{ min-height: 200px; }
  .social-figure img{ max-height: 320px; }
}
/* ===== CLIXENDA SOCIAL — ajustes de título y botones ===== */

/* Hacer que el h2 de Social use el mismo tamaño/grosor que los títulos grandes */
#social .section-title-lg{
  color: var(--gold);     /* sobre azul, en dorado */
  letter-spacing: .2px;
}

/* Tarjeta de contacto con texto oscuro y fila de botones */
#social .social-card{
  background: #ffffff;
  color: #0b1e3a;
  padding: 20px;
}
#social .social-card h3{ margin: 0 0 8px; color: #0b1e3a; }
#social .social-card p,
#social .social-card a{ color: #0b1e3a; }

.btn-row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px; /* refuerza el espacio sobre los botones */
}