/* ============================================================
   LA COLMENA LLAVES — Sistema de diseño compartido
   Editorial oscuro · Amarillo miel / Negro carbón / Blanco
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,800;1,900&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Sora:wght@400;600;700;800&display=swap');

:root{
  /* Paleta de marca (Documento Maestro) — tokenizada para Tweaks */
  --honey:        #F2C94C;   /* acento principal / CTA */
  --honey-deep:   #D9A300;   /* hover / detalles */
  --honey-soft:   #fbe9a8;
  --wa:           #25D366;   /* verde WhatsApp */
  --wa-deep:      #1EAE54;
  --ink:          #121212;   /* fondo de marca */
  --ink-2:        #191919;
  --ink-3:        #232323;
  --ink-line:     rgba(255,255,255,.10);
  --paper:        #FFFFFF;
  --paper-2:      #F5F1E8;   /* off-white cálido (herencia) */
  --paper-line:   rgba(18,18,18,.10);
  --text-dark:    #1A1A1A;
  --text-mut-d:   rgba(26,26,26,.62);   /* texto secundario sobre claro */
  --text-mut-l:   rgba(255,255,255,.64);/* texto secundario sobre oscuro */

  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Hanken Grotesk', system-ui, sans-serif;

  /* Textura de marca: candados teselados (simula un panal de abejas) */
  --keys-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='80' viewBox='0 0 64 80'%3E%3Cg fill='none' stroke='%23F2C94C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='14' y='18' width='36' height='24' rx='5'/%3E%3Cpath d='M22 18 V9 a10 10 0 0 1 20 0 V18'/%3E%3Ccircle cx='32' cy='28' r='3'/%3E%3Cpath d='M32 31 V36'/%3E%3Crect x='-18' y='58' width='36' height='24' rx='5'/%3E%3Cpath d='M-10 58 V49 a10 10 0 0 1 20 0 V58'/%3E%3Ccircle cx='0' cy='68' r='3'/%3E%3Cpath d='M0 71 V76'/%3E%3Crect x='46' y='58' width='36' height='24' rx='5'/%3E%3Cpath d='M54 58 V49 a10 10 0 0 1 20 0 V58'/%3E%3Ccircle cx='64' cy='68' r='3'/%3E%3Cpath d='M64 71 V76'/%3E%3C/g%3E%3C/svg%3E");

  --maxw: 1240px;
  --radius: 16px;
  --radius-lg: 26px;
  --shadow: 0 24px 60px -28px rgba(0,0,0,.45);
  --shadow-honey: 0 18px 44px -16px rgba(217,163,0,.55);

  --bg-intensity: 1; /* tweak: 0.6 (suave) .. 1.15 (profundo) */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--body);
  background:var(--ink);
  color:var(--paper);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
/* Imágenes de contenido (reemplazan al editor <image-slot>) */
.photo-brief img, .hero-photo img{ width:100%; height:auto; display:block; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:800; line-height:1.02; margin:0; letter-spacing:-.02em; }
p{ margin:0; }
::selection{ background:var(--honey); color:#1a1a1a; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,48px); }

/* ---------- Eyebrow / kicker ---------- */
.eyebrow{
  font-family:var(--display);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.7em;
  color:var(--honey-deep);
}
.eyebrow.on-dark{ color:var(--honey); }
.eyebrow::before{
  content:"";
  width:30px; height:2px;
  background:currentColor;
  display:inline-block;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6em;
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.01em;
  border:none;
  border-radius:999px;
  padding:1em 1.6em;
  font-size:1.02rem;
  transition:transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn svg{ width:1.25em; height:1.25em; }
.btn-call{
  background:var(--honey);
  color:#1a1a1a;
  box-shadow:var(--shadow-honey);
}
.btn-call:hover{ background:var(--honey-deep); transform:translateY(-2px); }
.btn-wa{
  background:var(--wa);
  color:#fff;
  border:1.5px solid transparent;
  box-shadow:0 16px 38px -18px rgba(37,211,102,.7);
}
.btn-wa:hover{ background:var(--wa-deep); color:#fff; transform:translateY(-2px); }
.btn-wa svg{ stroke-width:2; }
/* botón neutro (no WhatsApp) */
.btn-ghost{ background:transparent; color:var(--text-dark); border:1.5px solid rgba(18,18,18,.28); }
.btn-ghost:hover{ border-color:var(--honey-deep); color:var(--honey-deep); transform:translateY(-2px); }
.btn-ghost.on-dark{ color:var(--paper); border-color:rgba(255,255,255,.34); }
.btn-ghost.on-dark:hover{ color:var(--honey); border-color:var(--honey); }
.btn-lg{ padding:1.15em 2em; font-size:1.12rem; }
.btn-block{ width:100%; }

/* ---------- Sticky top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:200;
  background:rgba(18,18,18,.86);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--ink-line);
}
.topbar-inner{
  display:flex; align-items:center; gap:18px;
  height:74px;
}
.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; flex:none; }
.brand img{ width:48px; height:48px; }
.brand-text{ line-height:1.05; }
.brand-text .b1{ display:block; white-space:nowrap; font-family:var(--display); font-weight:900; font-size:1.04rem; letter-spacing:.02em; }
.brand-text .b2{ display:block; white-space:nowrap; font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; color:var(--honey); font-weight:700; margin-top:3px; }
.nav{ display:flex; gap:26px; align-items:center; margin-right:8px; }
.nav a{ font-size:.95rem; font-weight:600; color:var(--text-mut-l); transition:color .15s; }
.nav a:hover, .nav a.active{ color:var(--paper); }
.topbar .btn{ padding:.7em 1.15em; font-size:.92rem; }
.topbar-cta{ display:flex; gap:10px; }
.menu-toggle{ display:none; background:none; border:none; color:var(--paper); padding:6px; }
.menu-toggle svg{ width:28px; height:28px; }

/* ---------- Section scaffolding ---------- */
section{ position:relative; }
.sec{ padding:clamp(64px,9vw,120px) 0; }
.sec-dark{ background:var(--ink); color:var(--paper); }
.sec-ink2{ background:var(--ink-2); color:var(--paper); }
.sec-dark, .sec-ink2{ position:relative; isolation:isolate; }
.sec-dark::before, .sec-ink2::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--keys-bg); background-size:70px 88px; opacity:.06;
}
.sec-paper{ background:var(--paper-2); color:var(--text-dark); }
.sec-paper h2, .sec-paper h3{ color:var(--text-dark); }

.sec-head{ max-width:760px; margin-bottom:clamp(36px,5vw,60px); }
.sec-head h2{
  font-size:clamp(2.1rem,5vw,3.6rem);
  margin-top:.4em;
  text-wrap:balance;
}
.sec-head p{ margin-top:1em; font-size:1.12rem; color:var(--text-mut-l); max-width:60ch; }
.sec-paper .sec-head p{ color:var(--text-mut-d); }

/* ---------- Footer ---------- */
.footer{ background:#0d0d0d; color:var(--paper); padding:80px 0 40px; border-top:3px solid var(--honey); position:relative; isolation:isolate; }
.footer::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--keys-bg); background-size:70px 88px; opacity:.05;
}
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; }
.footer h4{ font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--honey); margin-bottom:18px; font-weight:700; }
.footer a, .footer p{ color:var(--text-mut-l); font-size:.98rem; line-height:1.9; }
.footer a:hover{ color:var(--honey); }
.footer-brand img{ width:64px; height:64px; margin-bottom:16px; }
.footer-bottom{
  margin-top:54px; padding-top:26px; border-top:1px solid var(--ink-line);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:.85rem; color:rgba(255,255,255,.42);
}

/* ---------- Floating mobile call/WA dock ---------- */
.dock{ display:none; }

/* ---------- Floating WhatsApp button (tablet / escritorio) ---------- */
.wa-fab{
  position:fixed; right:clamp(18px,3vw,30px); bottom:clamp(18px,3vw,30px); z-index:260;
  width:60px; height:60px; border-radius:50%;
  background:var(--wa); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.7), 0 4px 12px rgba(0,0,0,.25);
  transition:transform .18s ease, background .2s ease;
}
.wa-fab svg{ width:32px; height:32px; stroke-width:2; }
.wa-fab:hover{ background:var(--wa-deep); transform:translateY(-3px) scale(1.04); }
/* En móvil manda el dock inferior; ocultamos el FAB para no solaparlos. */
@media (max-width:760px){ .wa-fab{ display:none; } }

/* ---------- Reveal animation ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in{ opacity:1; transform:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:1024px){
  .nav{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .nav.open{
    display:flex; flex-direction:column; gap:0; align-items:stretch;
    position:absolute; top:74px; left:0; right:0; margin:0;
    background:var(--ink-2); border-bottom:1px solid var(--ink-line);
    box-shadow:0 18px 40px -16px rgba(0,0,0,.5); padding:6px 0;
  }
  .nav.open a{ padding:14px clamp(20px,5vw,48px); border-top:1px solid var(--ink-line); }
  .nav.open a:first-child{ border-top:none; }
}
@media (max-width:760px){
  body{ font-size:17px; }
  .topbar-cta .btn-label-long{ display:none; }
  .footer-grid{ grid-template-columns:1fr; }
  /* floating dock */
  .dock{
    display:grid; grid-template-columns:1fr 1fr; gap:0;
    position:fixed; left:0; right:0; bottom:0; z-index:300;
    box-shadow:0 -10px 30px rgba(0,0,0,.4);
  }
  .dock a{
    display:flex; align-items:center; justify-content:center; gap:.5em;
    padding:16px; font-family:var(--display); font-weight:800; font-size:1.02rem;
  }
  .dock .d-call{ background:var(--honey); color:#1a1a1a; }
  .dock .d-wa{ background:var(--wa); color:#fff; }
  .dock svg{ width:1.2em; height:1.2em; }
  body{ padding-bottom:64px; }
}
/* ============================================================
   PARCHE MENÚ + BARRA SUPERIOR — La Colmena Llaves
   Pega TODO esto al FINAL de tu archivo styles.css
   (Si ya pegaste una versión anterior de este parche,
    BÓRRALA primero y reemplázala por esta.)
   ============================================================ */

/* Evita desbordamiento horizontal en móvil */
html, body{ overflow-x:hidden; max-width:100%; }
*{ min-width:0; }

/* Barra superior: logo a la izquierda, menú a la derecha */
.topbar{ position:relative; }
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.nav{ display:flex; align-items:center; gap:6px; }

/* Botón hamburguesa: oculto en escritorio */
.menu-toggle{
  display:none;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:8px;
  color:inherit;
  line-height:0;
  z-index:1001;
}
.menu-toggle .icon{ width:28px; height:28px; }

/* ---- MÓVIL: 900px o menos ---- */
@media (max-width:900px){

  /* Mostrar hamburguesa */
  .menu-toggle{ display:inline-flex; align-items:center; }

  /* Menú oculto por defecto; se despliega al tocar el hamburguesa */
  .nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:100%;
    flex-direction:column;
    gap:0;
    background:#1A1A1A;
    border-top:1px solid rgba(242,201,76,.25);
    padding:8px 0;
    box-shadow:0 12px 24px rgba(0,0,0,.4);
    z-index:1000;
  }

  /* Cuando tiene la clase 'open', se muestra (forzado con !important
     para ganarle a cualquier regla previa del styles.css) */
  .nav.open{ display:flex !important; }

  .nav a{
    display:block;
    width:100%;
    padding:14px 22px;
    font-size:1.05rem;
    border-bottom:1px solid rgba(255,255,255,.05);
  }

  /* Pequeño realce del botón al abrir */
  .menu-toggle.is-open{ color:var(--honey, #F2C94C); }

  /* Logo más compacto en móvil */
  .brand img{ max-height:46px; width:auto; }
  .brand-text .b1{ font-size:1rem; }
  .brand-text .b2{ font-size:.62rem; }
}