/* =============================
   SEFAH — Stylesheet v2 (refactor)
   ============================= */
:root{
  --bg:#FFFFFF;     /* fondo blanco corporativo */
  --ink:#0B0D12;    /* texto principal */
  --muted:#5B616E;  /* texto secundario */
  --brand:#FFC107;  /* amarillo SEFAH */
  --brand-600:#E0A800;
  --line:#E6E8EC;   /* bordes sutiles */
  --card:#FCFCFD;   /* panel suave */
  --shadow:0 8px 24px rgba(18, 23, 35, .08);
  --radius:14px;
  --container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial}
img{max-width:100%; display:block}
.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 20px}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:40;
  background:#fff; border-bottom:1px solid var(--line);
  --header-h:64px;           /* alto fijo del header */
  overflow:visible;          /* permite que el logo sobresalga sin cortar */
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h); padding:0; /* bloqueamos el alto aquí */
}

/* Reserva ancho real para la marca para que el menú no la invada */
.brand{
  position:relative;
  width:220px;                               /* AJUSTA 200–260px según tu logo */
  height:calc(var(--header-h) - 6px);
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:inherit;
}

/* LOGO grande sin crecer el header */
.brand-logo{
  position:absolute; top:50%; left:0; transform:translateY(-50%);
  height:86px;                               /* AJUSTA 72–96px a gusto */
  width:auto; display:block; z-index:2;
}

/* Responsivo: en móviles reduce un poco */
@media (max-width:880px){
  .site-header{ --header-h:58px; }
  .brand{ width:180px; }
  .brand-logo{ height:72px; }
}

/* (opcionales si usas sello tipográfico) */
.brand-mark{width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg, var(--brand), #FFE082); display:grid; place-items:center; font-weight:900}
.brand-text strong{display:block; font-size:18px; letter-spacing:.4px}
.brand-text span{display:block; font-size:12px; color:var(--muted)}

.nav-toggle{display:none; background:transparent; border:0; font-size:22px}
.site-nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
.site-nav a{display:block; padding:10px 12px; text-decoration:none; color:inherit; font-weight:600; border-radius:10px}
.site-nav a:hover{background:var(--card)}
@media (max-width:880px){
  .nav-toggle{display:block}
  .site-nav{position:absolute; inset:60px 0 auto 0; background:#fff; border-bottom:1px solid var(--line); transform:translateY(-120%); transition:.2s ease; padding:12px 0}
  .site-nav.open{transform:translateY(0)}
  .site-nav ul{flex-direction:column; gap:0}
  .site-nav a{padding:14px 20px}
}

/* ===== Variante header oscuro para logo blanco/amarillo ===== */
.site-header.dark{
  background:#0B0D12;
  border-bottom:1px solid #111;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.site-header.dark .site-nav a{color:#EAECEF}
.site-header.dark .site-nav a:hover{background:rgba(255,255,255,.06)}
.site-header.dark .nav-toggle{color:#EAECEF}

/* ===== Hero ===== */
.hero{padding:76px 0; background:
  radial-gradient(900px 400px at 95% -5%, rgba(255,193,7,.16) 0%, rgba(255,193,7,0) 60%),
  linear-gradient(180deg, #fff 0%, #fff 60%, #FBFBFD 100%);
}
.hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center}
.hero h1{font-size:42px; line-height:1.15; margin:0 0 12px}
/* Highlight tipo marcador sin franja negra */
.hero .hi{
  background:none;
  box-shadow: inset 0 -0.6em #FFE082;
  display:inline;
}
.hero .lead{font-size:18px; color:#2D333A}
.hero-ctas{display:flex; gap:12px; margin-top:18px}
.slogan{margin-top:16px; font-size:13px; color:var(--muted)}

/* Hero tiles */
.hero-art{position:relative; height:280px}
.tile{position:absolute; border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow)}
.tile.t1{inset:0 20% 34% 0}
.tile.t2{inset:20% 0 0 24%}
.tile.t3{inset:auto 10% 0 10%; height:110px}
@media (max-width:880px){ .hero-inner{grid-template-columns:1fr} .hero-art{order:-1; height:180px} .hero h1{font-size:34px}}

/* ===== Sections ===== */
.section-head{margin-bottom:18px}
.section-head h2{margin:0 0 6px; font-size:26px}
.muted{color:var(--muted)}
.small{font-size:13px}

/* ===== Cards & grids ===== */
.cards{display:grid; grid-template-columns:repeat(12, 1fr); gap:22px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.cards>.card{grid-column:span 12}
@media (min-width:760px){ .cards>.card{grid-column:span 6} }
@media (min-width:1040px){ .cards>.card{grid-column:span 3} }

.grid-2{display:grid; grid-template-columns:1fr; gap:22px}
@media (min-width:900px){ .grid-2{grid-template-columns:1fr 1fr} }
.solution-box{background:var(--card); border:1px dashed var(--line); border-radius:14px; padding:20px}

/* ===== Quote ===== */
.quote p{font-size:16px; margin:0 0 8px}
.quote footer{color:var(--muted); font-size:13px}

/* ===== Buttons ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:12px; border:2px solid var(--brand); font-weight:800; text-decoration:none; transition:transform .06s ease, background .2s ease, border-color .2s}
.btn.primary{background:var(--brand); color:#111}
.btn.primary:hover{background:var(--brand-600)}
.btn.ghost{background:transparent; color:#111}
.btn.ghost:hover{background:rgba(255,193,7,.12)}

/* ===== Logos ===== */
.logo-row{display:grid; grid-template-columns:repeat(5, 1fr); gap:18px}
.logo{height:56px; border:1px solid var(--line); border-radius:12px; display:grid; place-items:center; color:#9AA0A6; background:#fff}
@media (max-width:780px){ .logo-row{grid-template-columns:repeat(3, 1fr)} }

/* ===== CTA ===== */
.cta{padding:40px 0; background:#111; color:#fff; border-top:4px solid var(--brand); border-bottom:1px solid #000}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.cta .btn{border-color:#000}
@media (max-width:760px){ .cta-inner{flex-direction:column; align-items:flex-start} }

/* ===== Contacto ===== */
.contact{padding:50px 0}
.form-grid{display:grid; grid-template-columns:1fr; gap:16px}
.form-grid.cols-2>.full{grid-column:span 1}
@media (min-width:820px){ .form-grid.cols-2{grid-template-columns:1fr 1fr} .form-grid.cols-2>.full{grid-column:1 / -1} }
input, textarea{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fff}
label{display:block; font-weight:700; font-size:14px; margin-bottom:6px}
.form-actions{display:flex; align-items:center; gap:12px; margin-top:10px}

/* ===== Footer ===== */
.site-footer{background:#0B0D12; color:#D1D5DB; padding:28px 0}
.footgrid{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.site-footer a{color:#FDE68A; text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* Ocultar créditos heredados del builder */
.builder-credit, .b12-credit, a[href*="b12" i], a[href*="website builder" i], a[href*="Web design" i]{display:none !important}

/* ===== Accesibilidad ===== */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== Spacing utilities ===== */
section{padding:56px 0}
.center{text-align:center}
.mt-24{margin-top:24px}

/* ===== Tiles con imagen (hero) ===== */
/* Fondo por variable CSS: style="--img:url('...')" */
.tile-img{
  background:#fff center/cover no-repeat;
  background-image:var(--img);
  overflow:hidden; /* respeta el borde redondeado */
}
/* Sutil borde interno y protección de contraste */
.tile-img::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow: inset 0 0 0 1px rgba(230,232,236,.9);
}
/* Overlay ligero para que no “queme” */
.tile-img::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(180deg, rgba(11,13,18,.02), rgba(11,13,18,.06));
  pointer-events:none;
}
/* Micro-animación (opcional) */
.tile{ transition: transform .2s ease; }
.tile:hover{ transform: translateY(-2px); }