/* =========================================================
   NEOTROPIC — HOME (CSS depurado)
   ========================================================= */

/* ---------- Variables y base ---------- */
:root{
  --text:#1a2b3b;
  --muted:#4b5b6b;
  --link:#0d6efd;
  --border:#e9edf2;
  --bg-card:#fff;
  --shadow:0 6px 18px rgba(0,0,0,0.04);
  --radius:14px;
  --container:1200px;
}
*{box-sizing:border-box}
img{max-width:100%;display:block}
section{padding:24px 0}

/* =========================================================
   HERO (compacto)
   ========================================================= */
.home-header{
  display:grid;
  grid-template-columns: 1fr 0.95fr;
  gap:18px;
  align-items:center;
  padding:30px 20px 34px;
  background:#e7f3ff;
}
.home-header-content{ max-width:640px; margin:0 auto; }
.home-header-title-top{ margin:0 0 4px; font-size:28px; color:var(--text); }
.home-header-title-bottom{ margin:0 0 8px; font-size:38px; line-height:1.15; color:var(--text); }
.home-header-explanation{ margin:0 0 8px; font-size:20px; line-height:1.3; text-align: justify; text-justify: inter-word; }
.home-header-emphasis{ font-weight: bold;  padding-left: 3px; padding-right: 3px; background-color: var(--border);}
.home-header p{ margin:6px 0; color:var(--muted); }
.cta-group{ display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }
.btn-primary,.btn-secondary,.text-link{ font-weight:600; text-decoration:none; border-radius:10px; display:inline-block; }
.btn-primary{ background:var(--text); color:#fff; padding:10px 14px; }
.btn-secondary{ background:#eef2f7; color:#0d1b2a; padding:10px 14px; }
.text-link{ color:var(--link); border-bottom:1px solid currentColor; }
.home-header-graphic{ max-width:520px; justify-self:end; }
.home-header-graphic img{ width:100%; height:auto; }

/* =========================================================
   PRODUCTS — 1 columna (Kuwaiba → Orquestación → Tiuquin)
   ========================================================= */
.home-products{
  display:grid;
  grid-template-columns: 1fr;       /* todas full-width */
  gap:28px;
  max-width:var(--container);
  width:100%;
  margin:40px auto;
  padding:0 20px;
}
.home-products .product{
  display:flex;
  flex-direction:row;               /* texto + imagen lado a lado */
  align-items:center;
  gap:20px;
  padding:22px 24px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.home-products .product.reverse{ flex-direction:row-reverse; }
.home-products .product .product-content{ width:62%; }
.home-products .product img{
  width:38%;
  max-width:440px;
  height:auto;
  object-fit:cover;
  border-radius:8px;
  margin:0;
}
/* Tipografía dentro de productos */
.home-products .product .product-content h2{
  margin:6px 0 10px; font-size:26px; line-height:1.25; color:var(--text);
}
.home-products .product .product-content p{ color:var(--muted); margin:0 0 8px; }
.home-products .product .product-content ul{ margin:8px 0 10px 18px; }
.home-products .product .product-content li{ margin:4px 0; }

.home-products .section-title{
  text-align:center;
  margin-bottom:24px;
  font-size:28px;
  color:var(--text);
}

/* === Marco azul para GIFs en Kuwaiba page === */
#views .product img {
  border: 4px solid #0a4662;      /* azul oscuro de la paleta */
  border-radius: 10px;            /* bordes suaves */
  background-color: #e5eef2;      /* azul grisáceo claro de fondo */
  padding: 4px;                   /* margen interno */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* sutil sombra */
  display: block;
  max-width: 100%;
  height: auto;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#views .product img:hover {
  border-color: #195b7e;          /* azul intermedio al pasar el mouse */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}



/* =========================================================
   SERVICES — grilla 4 íconos
   ========================================================= */
.services{ padding:28px 20px 44px; }
.services h2{ text-align:center; margin-bottom:16px; }
.service-container{
  display:grid;
  /* de 4 fijas  →  auto-fit para que 3 items queden centrados y responsivos */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  justify-items: center;   /* centra cada tarjeta dentro de su celda */
  gap:28px;
  max-width:var(--container);
  margin:0 auto;
}
.service-item{ text-align:center; }
.service-item img{ width:56px; height:56px; object-fit:contain; margin:0 auto 10px; }

/* =========================================================
   LICENSES — livianas y centradas (opcional)
   ========================================================= */
.licenses{ padding:40px 20px 60px; max-width:1100px; margin:0 auto; }
.licenses .section-title{ text-align:center; margin-bottom:24px; font-size:26px; color:var(--text); }
.licenses .license-container{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:32px;
}
.licenses .license-card{
  background:#f8fafc; border:1px solid #e9edf2; border-radius:10px;
  text-align:center; padding:22px 20px; box-shadow:none;
}
.licenses .license-card img{ width:48px; height:48px; opacity:.9; margin:0 auto 8px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .home-header{ grid-template-columns:1fr; }
  .home-header-graphic{ order:2; justify-self:center; max-width:520px; }
}
@media (max-width:860px){
  .home-products{ gap:24px; }
  .home-products .product,
  .home-products .product.reverse{
    flex-direction:column;
    text-align:left;
  }
  .home-products .product .product-content,
  .home-products .product img{
    width:100%; max-width:none;
  }
  .service-container{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:768px){
  .licenses .license-container{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .service-container{ grid-template-columns:1fr; }
  .home-header-title-bottom{ font-size:32px; }
}

/* ================= 
Por qué elegir Neotropic
 ================= */
.why-neotropic{
  padding: 40px 20px 60px;
  max-width: var(--container);
  margin: 0 auto;
}
.why-title{
  text-align:center;
  font-size: 32px;
  color: var(--text);
  margin: 0 0 8px;
}
.why-sub{
  text-align:center;
  color: var(--muted);
  margin: 0 auto 22px;
  max-width: 820px;
}

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

.why-card{
  background: #f8fafc;
  border: 1px solid #e9edf2;
  border-radius: 12px;
  box-shadow: none;
  padding: 22px 20px;
  text-align: center;
}

.why-card img{
  width: 56px; height: 56px;
  object-fit: contain;
  margin: 2px auto 10px;
  opacity: .95;
}
.why-card h3{
  margin: 6px 0 8px;
  color: var(--text);
  font-size: 18px;
}
.why-card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.why-quote {
  text-align: center;
  margin: 2em 0;
  font-style: italic;
  font-size: 1.1em;
  color: #222;
}


/* Responsive */
@media (max-width: 960px){
  .why-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .why-grid{ grid-template-columns: 1fr; }
  .why-title{ font-size: 28px; }
}

/* ===== HERO v5 — copy final y ritmo visual ===== */
.home-hero-v5 { gap: 18px; padding: 30px 20px 34px; }

.home-hero-v5 .home-header-title-bottom{
  font-size: 38px;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 10px;
}

.home-hero-v5 .hero-sub{
  margin: 6px 0 16px;
  color: var(--muted);
  max-width: 60ch;
  font-size: 17px;
}

.home-hero-v5 .home-header-graphic{
  max-width: 520px;
  justify-self: end;
}

.home-hero-v5 .home-header-graphic img{
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 900px){
  .home-hero-v5 { grid-template-columns: 1fr; }
  .home-hero-v5 .home-header-graphic{ order: 2; justify-self: center; }
}