/* ============================================================
   COMPONENTS — header/nav, footer, botones, cards, formularios,
   whatsapp flotante, carrusel, franja de confianza, badges.
   Usado por las 9 páginas del sitio.
   ============================================================ */

/* ---------- BARRA SUPERIOR (redes) ---------- */
.topbar{ width:100%; padding: var(--space-1) 0; background: var(--navy-950); text-align:center; }
.topbar ul{ display:flex; justify-content:center; align-items:center; gap: var(--space-3); flex-wrap:wrap; }
.topbar li{ font-size: var(--step--1); }
.topbar i{ color: var(--cta); margin-right:6px; }
.topbar a{ color: var(--white); transition:.3s; }
.topbar a:hover{ color: var(--cta); }

/* ---------- NAV PRINCIPAL (sticky) ---------- */
.site-header{ position: sticky; top:0; z-index:50; background: var(--navy-800); transition: box-shadow .3s ease, padding .3s ease; }
/* Difumina el borde inferior del header en vez de un corte duro de color */
.site-header::after{
  content:''; position:absolute; left:0; right:0; top:100%; height:56px; pointer-events:none;
  background: linear-gradient(to bottom, rgba(4,8,31,.28), rgba(4,8,31,0));
}
.site-header.scrolled{ box-shadow: 0 16px 32px -18px rgba(4,8,31,.6); }
.nav-bar{ width:100%; padding: var(--space-2) var(--space-3); display:flex; justify-content:space-between; align-items:center; gap: var(--space-3); }
.nav-bar .logo{ width:140px; max-width:40vw; }
.nav-links{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap: 4px; }
.nav-links a{
  display:inline-block; color: var(--white); font-family: var(--font-nav);
  font-size: var(--step--1); letter-spacing:.02em; padding:10px 14px; border-radius: var(--radius-sm);
  transition: background .25s ease, color .25s ease;
}
.nav-links a:hover, .nav-links a.active{ background: var(--cta); color: var(--ink); }
.nav-toggle{
  display:none; border:2px solid var(--white); color:var(--white); width:44px; height:40px;
  align-items:center; justify-content:center; border-radius: var(--radius-sm); font-size:1.4rem; cursor:pointer;
}

@media (max-width: 1023px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:absolute; left:0; top:100%; width:100%; flex-direction:column; align-items:stretch;
    background: var(--navy-800); max-height:0; overflow:hidden; transition: max-height .35s ease;
  }
  .nav-links.active{ max-height:600px; padding-bottom: var(--space-2); }
  .nav-links a{ text-align:center; margin:4px var(--space-3); }
  .nav-bar{ position:relative; flex-wrap:wrap; }
}

/* ---------- BOTONES / CTA ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-family: var(--font-nav);
  text-transform:uppercase; letter-spacing:.03em; font-size: var(--step--1);
  padding: 14px 28px; border-radius: 999px; transition: transform .25s var(--ease), box-shadow .25s ease, background .25s ease;
  box-shadow: var(--shadow-sm);
}
.btn:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn:active{ transform: translateY(-1px); }
.btn-cta{ background: var(--cta); color: var(--ink); }
.btn-cta:hover{ background: var(--cta-hover); }
.btn-whatsapp{ background: var(--whatsapp); color: var(--white); }
.btn-whatsapp:hover{ background: var(--whatsapp-hover); }
.btn-ghost{ background: transparent; color: var(--white); border:2px solid rgba(255,255,255,.55); box-shadow:none; }
.btn-ghost:hover{ background: rgba(255,255,255,.12); border-color:#fff; }
.btn-card{ background: var(--green-700); color:var(--white); font-size: var(--step--1); }
.btn-card:hover{ background: var(--green-800); }

/* ---------- FRANJA DE CONFIANZA (contadores) ---------- */
.trust-strip{ background: var(--white); padding: var(--space-6) 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trust-grid{ display:grid; grid-template-columns:1fr; gap: var(--space-5); max-width:1100px; margin:0 auto; text-align:center; }
@media (min-width:768px){ .trust-grid{ grid-template-columns:repeat(3,1fr); } }
.trust-item img{ width:56px; height:56px; margin:0 auto var(--space-2); object-fit:contain; }
.trust-number{ font-family: var(--font-display); font-size: var(--step-3); color: var(--green-800); display:block; }
.trust-label{ font-size: var(--step-0); color: var(--body-text); }

/* ---------- CARDS PROBLEMA / SOLUCIÓN ---------- */
.card{ background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow:hidden; transition: transform .3s ease, box-shadow .3s ease; }
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.card--problema{ border-left:5px solid var(--problema); }
.card--solucion{ border-top:5px solid var(--solucion); }
.card-media{ width:100%; height:200px; overflow:hidden; background: var(--earth-100); }
.card-media img{ width:100%; height:100%; object-fit:cover; }
.card-body{ padding: var(--space-4); }
.card-body h3{ font-size: var(--step-1); margin-bottom: var(--space-1); }
.card-body h4.tag--problema{ color: var(--problema); text-transform:uppercase; font-family:var(--font-nav); font-size:var(--step--1); letter-spacing:.04em; margin-bottom:6px; }
.card-body h4.tag--solucion{ color: var(--solucion); text-transform:uppercase; font-family:var(--font-nav); font-size:var(--step--1); letter-spacing:.04em; margin-bottom:6px; }

/* Card de producto por marca (tilt 3D via vanilla-tilt en [data-tilt]) */
.brand-card{ background:var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow:hidden; position:relative; will-change: transform; }
.brand-card .card-media{ height:220px; }
.brand-card .card-body{ padding: var(--space-4); }
.brand-card .tag--problema{ color: var(--problema); font-family:var(--font-nav); text-transform:uppercase; font-size:var(--step--1); letter-spacing:.03em; }
.brand-card h3{ font-size: var(--step-1); margin:8px 0 10px; }
.brand-card p{ margin-bottom: var(--space-3); }
.badge-nuevo{
  position:absolute; top:14px; right:14px; background: var(--cta); color: var(--ink);
  font-family: var(--font-nav); text-transform:uppercase; font-size:.72rem; letter-spacing:.05em;
  padding:6px 12px; border-radius:999px; box-shadow: var(--shadow-sm); z-index:2;
}
.badge-placeholder{
  display:inline-block; margin-top:8px; font-size:.72rem; font-family:var(--font-nav);
  text-transform:uppercase; letter-spacing:.04em; color: var(--earth-700); background: var(--earth-100);
  padding:4px 10px; border-radius:999px;
}
.img-producto--placeholder{ border:2px dashed var(--border); background: var(--earth-100); display:flex; align-items:center; justify-content:center; }

/* ---------- FORMULARIOS ---------- */
.form-field{ margin-bottom: var(--space-3); text-align:left; }
.form-field label{ display:block; font-size: var(--step--1); margin-bottom:6px; font-family: var(--font-nav); }
.form-field input, .form-field textarea{
  width:100%; padding:12px 14px; border:2px solid var(--border); border-radius: var(--radius-sm);
  background: var(--white); font-size: var(--step-0); transition: border-color .2s ease;
}
.form-field input:focus, .form-field textarea:focus{ border-color: var(--cta); }
.form-field textarea{ resize:none; height:110px; }
.form-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- WHATSAPP FLOTANTE ---------- */
.whatsapp-float{
  position:fixed; right:20px; bottom:20px; z-index:80; width:60px; height:60px;
  border-radius:50%; background:var(--whatsapp); display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-md); transition: transform .25s ease, background .25s ease;
}
.whatsapp-float:hover{ transform:scale(1.08); background:var(--whatsapp-hover); }
.whatsapp-float i{ color:#fff; font-size:1.9rem; }
@media (max-width:600px){ .whatsapp-float{ width:52px; height:52px; right:14px; bottom:14px; } .whatsapp-float i{ font-size:1.6rem; } }

/* ---------- CARRUSEL GENÉRICO (js/carousel.js) ---------- */
[data-carousel]{ position:relative; width:100%; height:100%; overflow:hidden; }
[data-carousel] img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition: opacity 1s ease; }
[data-carousel] img.is-active{ opacity:1; }
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:42px; height:42px;
  border-radius:50%; background:rgba(0,0,0,.35); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; transition: background .2s ease;
}
.carousel-arrow:hover{ background:rgba(0,0,0,.55); }
.carousel-arrow--prev{ left:16px; }
.carousel-arrow--next{ right:16px; }

/* ---------- FOOTER ---------- */
.site-footer{ background: var(--navy-800); color: var(--white); padding: var(--space-7) 0 var(--space-5); position:relative; }
.site-footer::before{
  content:''; position:absolute; left:0; right:0; bottom:100%; height:56px; pointer-events:none;
  background: linear-gradient(to top, rgba(12,22,80,.22), rgba(12,22,80,0));
}
.footer-grid{ display:grid; grid-template-columns:1fr; gap: var(--space-6); }
@media (min-width:900px){ .footer-grid{ grid-template-columns:repeat(3,1fr); } }
.footer-col h4{ color:#fff; font-size: var(--step-1); margin-bottom: var(--space-3); }
.footer-col ul li{ margin-top: var(--space-2); }
.footer-col a{ color: rgba(255,255,255,.85); transition:.25s; }
.footer-col a:hover{ color: var(--cta); }
.footer-col i{ color: var(--cta); margin-right:10px; }
.footer-contact li{ display:flex; align-items:flex-start; gap:10px; margin-bottom: var(--space-2); }
.footer-bottom{ text-align:center; margin-top: var(--space-6); padding-top: var(--space-4); border-top:1px solid rgba(255,255,255,.15); font-size: var(--step--1); color: rgba(255,255,255,.6); }

/* ---------- PAGE HERO (encabezado de páginas internas) ---------- */
.page-hero{ background: var(--navy-800); color:#fff; padding: var(--space-7) 0 var(--space-6); }
.page-hero .eyebrow{ color: var(--cta); }
.page-hero h1{ color:#fff; }
.page-hero p{ color: rgba(255,255,255,.85); max-width:700px; margin-top: var(--space-2); }

/* ---------- INTRO DE SECCIÓN (imagen + texto) ---------- */
.intro-grid{ display:grid; grid-template-columns:1fr; gap: var(--space-5); align-items:center; }
@media (min-width:900px){ .intro-grid{ grid-template-columns:1fr 1fr; } }
.intro-media{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-md); aspect-ratio:4/3; }
.intro-media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- EQUIPO (avatares placeholder con iniciales) ---------- */
.team-grid{ display:grid; grid-template-columns:1fr; gap: var(--space-4); }
@media (min-width:700px){ .team-grid{ grid-template-columns:repeat(3,1fr); } }
.team-card{ background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--space-4); text-align:center; transition: transform .3s ease, box-shadow .3s ease; }
.team-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.team-avatar{ width:84px; height:84px; border-radius:50%; margin:0 auto var(--space-2); display:flex; align-items:center; justify-content:center; font-family:var(--font-nav); font-size:1.4rem; color:#fff; }
.team-card h3{ font-size: var(--step-1); }
.team-card h4{ font-size: var(--step--1); color: var(--earth-700); font-family: var(--font-nav); text-transform:uppercase; letter-spacing:.03em; margin:4px 0 8px; }

/* ---------- UTILIDADES DE ANIMACIÓN ---------- */
[data-parallax]{ will-change: transform; }