/* ====== Paleta (negro/dorado del logo) ====== */
:root{
  --bg: #0b0b0d;
  --surface: #111316;
  --surface-2:#14161a;
  --line: #1f2126;
  --text: #f5f5f5;
  --muted:#c9c9c9;
  --gold:#d4af37;
  --gold-soft:#e8c85e;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; scroll-behavior:smooth; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* Utils */
.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }
.text-gold{ color:var(--gold); }
.muted{ color:var(--muted); }
.center{ text-align:center; }
.link-gold{ color:var(--gold); }

/* ====== Navbar ====== */
.nav{ position:sticky; top:0; z-index:50; backdrop-filter: blur(8px); background:rgba(11,11,13,.6); border-bottom:1px solid var(--line);}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand__logo{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.08); }
.brand__title{ font-weight:800; letter-spacing:.5px; color:var(--gold); }
.brand__subtitle{ display:block; font-size:12px; color:#d0d0d0; margin-top:2px; }
.nav__links{ display:flex; gap:22px; align-items:center; }
.nav__links a{ opacity:.95; }
.nav__links a:hover{ opacity:1; }
.nav__toggle{ display:none; background:none; color:var(--text); border:0; font-size:22px; }

/* ====== Botones ====== */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:16px; font-weight:700; border:0; cursor:pointer; transition: transform .15s ease, box-shadow .15s ease; }
.btn--gold{ background:var(--gold); color:var(--bg); box-shadow:0 4px 20px rgba(212,175,55,.25); }
.btn--gold:hover{ transform:translateY(-1px); box-shadow:0 6px 26px rgba(212,175,55,.35); }

/* ====== Hero ====== */
.hero{ position:relative; background-image:url('assets/taller.webp'); background-size:cover; background-position:center; }
.hero__overlay{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,11,13,.88) 0%, rgba(11,11,13,.78) 40%, rgba(11,11,13,.6) 100%); }
.hero__content{ position:relative; padding:96px 0 120px; max-width:820px; }
.hero h1{ font-size: clamp(32px, 4.6vw, 64px); line-height:1.1; font-weight:800; margin:0; }
.hero p{ margin-top:16px; font-size: clamp(16px, 1.5vw, 20px); color:var(--muted); }
.hero__cta{ margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; }
.hero__kpis{ font-size:14px; color:var(--muted); }

/* ====== KPIs ====== */
.kpis{ padding:40px 0; }
.kpis__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.kpi{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px; }
.kpi__value{ font-size:32px; font-weight:800; }
.kpi__label{ color:var(--muted); margin-top:4px; }

/* ====== Marcas ====== */
.marcas{ padding:70px 0; }
.marcas h2{ font-size:32px; margin:0 0 6px; }
.marcas__grid{ margin-top:18px; display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.chip{ background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:10px 12px; text-align:center; font-weight:600; transition: transform .12s ease; }
.chip:hover{ transform:translateY(-2px); }

/* ====== Features ====== */
.features{ padding:70px 0; }
.features__grid{ margin-top:26px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card{ background:#121419; border:1px solid var(--line); border-radius:18px; padding:20px; }
.card__icon{ width:42px; height:42px; display:grid; place-items:center; border-radius:12px; margin-bottom:10px; background:rgba(212,175,55,.12); color:var(--gold); font-size:20px; }

/* ====== Convenios ====== */
.convenios{ padding:70px 0; }
.convenios__box{ position:relative; background:linear-gradient(135deg, #111316, #0b0b0d); border:1px solid var(--line); border-radius:22px; padding:32px; overflow:hidden; }
.convenios__box::after{ content:\"\"; position:absolute; right:-60px; top:-60px; width:200px; height:200px; opacity:.08; background:radial-gradient(circle at center, var(--gold), transparent 60%); border-radius:50%; }

/* ====== Contacto ====== */
.contacto{ padding:80px 0; }
.contacto__box{ background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:40px; text-align:center; }
.contacto__grid{ margin-top:26px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; text-align:left; }
.contact-item{ display:flex; gap:12px; align-items:flex-start; background:#121419; border:1px solid var(--line); border-radius:16px; padding:16px; }
.contact-item__icon{ width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:rgba(212,175,55,.12); color:var(--gold); }
.contact-item__label{ color:var(--muted); font-size:14px; }
.contact-item__value{ font-weight:700; }

/* ====== Footer ====== */
.footer{ border-top:1px solid var(--line); }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; }

/* ====== FAB WhatsApp ====== */
.fab{ position:fixed; right:18px; bottom:18px; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:24px; background:var(--gold); color:var(--bg); box-shadow:0 10px 30px rgba(212,175,55,.35); transition: transform .15s ease; z-index:60; }
.fab:hover{ transform:scale(1.08); }

/* ====== Responsive ====== */
@media (max-width: 980px){
  .marcas__grid{ grid-template-columns:repeat(3,1fr); }
  .features__grid{ grid-template-columns:repeat(2,1fr); }
  .contacto__grid{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .nav__links{ display:none; }
  .nav__toggle{ display:block; }
  .kpis__grid{ grid-template-columns:1fr; }
  .marcas__grid{ grid-template-columns:repeat(2,1fr); }
}

/* ====== Brands (Trabajamos con Todas las Marcas) ====== */
.brands-blade{ padding:70px 0; position:relative; }
.brands-title{
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 18px;
  text-align: left;
  letter-spacing: .3px;
  color: var(--text);
  text-shadow:
    0 8px 24px rgba(0,0,0,.45),
    0 0 28px rgba(212,175,55,.15);
}
.brands-title span{
  background: linear-gradient(180deg, var(--gold), var(--gold-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 20px rgba(212,175,55,.18));
}

.brands-subtitle{
  display: inline-block;
  margin: 0 0 26px;
  padding: 10px 18px;
  border: 2px solid var(--gold);
  border-radius: 8px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .3px;
  backdrop-filter: blur(2px);
  box-shadow: 0 6px 24px rgba(212,175,55,.12);
}

.brands-frame{
  position: relative;
  padding: 22px;
  border-radius: 18px;
  border: 2px solid rgba(212,175,55,.55);
  background: radial-gradient(100% 100% at 0% 0%, rgba(212,175,55,.04), rgba(11,11,13,1));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 10px 40px rgba(212,175,55,.18);
}
.brands-canvas{
  background: #f5f5f5;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  padding: 10px;
}
.brands-canvas img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

.brands-caption{
  text-align: center;
  margin-top: 22px;
  color: var(--gold);
  font-weight: 600;
  text-shadow: 0 6px 18px rgba(212,175,55,.18);
}

/* Responsive refinements */
@media (max-width: 980px){
  .brands-title{ text-align:center; }
  .brands-subtitle{ display:block; margin-left:auto; margin-right:auto; }
}

/* --- Logo más grande en el header --- */
.brand__logo{
  width: 68px;      /* antes 40px */
  height: 68px;     /* antes 40px */
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
}

/* un poco más de alto al header para que respire */
.nav__inner{
  padding: 14px 0;  /* antes 12px 0 */
}

/* en pantallas grandes, aún más grande si quieres */
@media (min-width: 1024px){
  .brand__logo{ width: 76px; height: 76px; }
}

/* === Texto del branding arriba a la izquierda === */
.brand__title,
.brand__subtitle{
  color: var(--gold);     /* todo amarillo */
  font-size: 24px;        /* mismo tamaño */
  font-weight: 800;       /* mismo grosor que el título */
  line-height: 1.1;
  letter-spacing: .3px;
}

.brand__subtitle{
  margin-top: 0;          /* quita el espacio pequeño que tenía */
}

/* (opcional) ajusta la separación y alineación con el logo */
.brand{ gap: 14px; align-items: center; }

/* ===== FIX ROBUSTO: recorte perfecto del recuadro de contacto ===== */

.contacto__box{
  position: relative;
  background: var(--surface);
  border-radius: 18px;

  /* recorte duro que también corta sombras/hijos en Chrome Android */
  overflow: clip;               /* nuevo valor: mejor que hidden para clipping */
  /* fallbacks por si el navegador no soporta 'clip' */
  overflow: hidden;

  /* crea un nuevo contexto de pintura (evita "sangrados" raros) */
  contain: paint;
  isolation: isolate;
  transform: translateZ(0);
}

/* dibujamos el borde en una capa por encima, para que no se “coma” el clipping */
.contacto__box::before{
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  border-radius: inherit;
  pointer-events: none;
}

/* la grilla y las tarjetas nunca deben empujar el ancho */
.contacto__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 22px 0 0 0;
  padding: 0;
  max-width: 100%;
}

/* tarjetas internas sin sombras externas (las sombras externas suelen sobresalir) */
.contact-item{
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  box-shadow: none;
  box-sizing: border-box;
}

/* textos y botón sin romper el ancho */
.contacto__box .btn{ max-width: 100%; }
.contacto__box h2, .contacto__box p{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* margen lateral seguro en móvil */
.container{ padding-left: 16px; padding-right: 16px; }
html, body{ overflow-x: hidden; }

/* ajustes extra para teléfonos angostos */
@media (max-width: 480px){
  .contacto{ padding: 56px 0; }
  .contacto__box{ border-radius: 16px; }
}