@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* Ceccone Header Pro - Front styles (clean) */
.cec-header{
  --cec-topbar-bg:#F7F8FB;
  --cec-bg: rgba(255,255,255,.86);
  --cec-bd: rgba(15,23,42,.10);
  --cec-txt:#0F172A;
  --cec-muted: rgba(15,23,42,.70);
  --cec-hover: rgba(15,23,42,.04);

  --props-bg1:#1F2937;
  --props-bg2:#0B1220;
  --props-h1:#243246;
  --props-h2:#0B1220;

  --wa-g1:#7CFFB2;
  --wa-g2:#25D366;
  --wa-g3:#12B557;

  --logo-w:160px;

  width:100%;
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--cec-txt);
  position: relative;
  z-index: 9999;
}

/* hidden by default */
.cec-mobileMenu{ display:none; }

/* Mobile nav toggle checkbox (used by burger menu) */
.cec-navToggle{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* =========================
   TOPBAR
========================= */
.cec-topbar{
  background: var(--cec-topbar-bg);
  border-bottom:1px solid var(--cec-bd);
}
.cec-topbar__inner{
  max-width:1200px;
  margin:0 auto;
  padding:8px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.cec-topbar__left,
.cec-topbar__right{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  font-size:13px;
  color: var(--cec-muted);
}
.cec-toplink{
  color: var(--cec-muted);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.cec-toplink:hover{ color: var(--cec-txt); }
.cec-toplink--static{ cursor:default; }

/* =========================
   MAINBAR
========================= */
.cec-mainbar{
  background: var(--cec-bg);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--cec-bd);
}
.cec-mainbar__inner{
  max-width:1200px;
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.cec-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:180px;
}
.cec-logo{
  width: var(--logo-w);
  height:auto;
  display:block;
}

/* =========================
   NAV (desktop)
========================= */
.cec-nav{
  display:flex;
  align-items:center;
  gap:4px;
}
.cec-nav a{
  color: rgba(15,23,42,.84);
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  padding:10px 12px;
  border-radius:14px;
  transition: background .18s ease, transform .18s ease, color .18s ease;
}
.cec-nav a:hover{
  background: var(--cec-hover);
  transform: translateY(-1px);
  color: var(--cec-txt);
}

/* =========================
   CTAs (desktop)
========================= */
.cec-cta{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
}
.cec-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  text-decoration:none !important;
  font-weight:900;
  letter-spacing:.2px;
  white-space:nowrap;
  transition: transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
}

/* Props button */
.cec-btn--props{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:999px;
  background: linear-gradient(180deg, var(--props-bg1) 0%, var(--props-bg2) 100%) !important;
  border: 1px solid rgba(15,23,42,.18) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.18), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.cec-btn--props:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, var(--props-h1) 0%, var(--props-h2) 100%) !important;
  box-shadow: 0 14px 28px rgba(2,6,23,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.cec-propsIcon{
  width:18px;
  height:18px;
  fill: currentColor;
  opacity:.95;
}

/* WhatsApp */
.cec-btn--whatsapp{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:999px;
  background: radial-gradient(120% 120% at 30% 20%, var(--wa-g1) 0%, var(--wa-g2) 55%, var(--wa-g3) 100%) !important;
  border: 1px solid rgba(18,181,87,.28);
  color:#fff !important;
  box-shadow: 0 14px 30px rgba(37,211,102,.26), inset 0 0 0 1px rgba(255,255,255,.22);
}
.cec-btn--whatsapp:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(37,211,102,.32), inset 0 0 0 1px rgba(255,255,255,.28);
  filter: brightness(1.02);
}
.cec-btn--whatsapp span{
  font-weight:900;
  letter-spacing:.2px;
  font-size:14px;
}
.cec-waIcon{
  width:18px;
  height:18px;
  display:block;
  fill: currentColor;
}

/* equal height (desktop) */
.cec-btn--props,
.cec-btn--whatsapp{
  height:44px;
  padding-top:0 !important;
  padding-bottom:0 !important;
  line-height:44px;
}
.cec-btn--props svg,
.cec-btn--whatsapp svg{
  position:relative;
  top:-0.5px;
}

/* =========================
   BURGER (mobile)
========================= */
.cec-burger{
  display:none;
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  flex: 0 0 auto;
}
.cec-burger span{
  width:18px;
  height:2px;
  background:var(--cec-txt);
  display:block;
  position:relative;
}
.cec-burger span::before,
.cec-burger span::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:var(--cec-txt);
}
.cec-burger span::before{ top:-6px; }
.cec-burger span::after{ top: 6px; }

/* =========================================================
   MOBILE (single source of truth)
========================================================= */
@media (max-width: 900px){

  /* anti overflow dentro del header */
  #cecHeader, #cecHeader *{ box-sizing:border-box; max-width:100%; }
  #cecHeader{ overflow-x:hidden; }

  /* topbar compacto */
  .cec-topbar__right{ display:none; }
  .cec-nav{ display:none; }

  /* esconder CTAs desktop (se muestran dentro del menú) */
  .cec-cta > a{ display:none !important; }

  /* burger siempre visible */
  .cec-burger{
    display:inline-flex !important;
    margin-left:auto !important;
  }

  /* layout: que no empuje afuera */
  .cec-mainbar__inner{
    width:100%;
    padding:12px 12px;
    gap:12px;
    justify-content:space-between;
  }
  .cec-brand{ min-width:0; flex:1 1 auto; }
  .cec-logo{ width:128px; height:auto; }

  /* abrir menú */
  .cec-mainbar .cec-navToggle:checked ~ .cec-mobileMenu{ display:block; }

  /* dropdown */
  .cec-mobileMenu{
    background:#fff;
    border-top:1px solid var(--cec-bd);
    border-bottom:1px solid var(--cec-bd);
  }
  .cec-mobileMenu__inner{
    max-width:1200px;
    margin:0 auto;
    padding:12px 18px 22px; /* + aire abajo */
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  /* links del menú */
  .cec-mobileMenu a{
    padding:12px 12px;
    border-radius:14px;
    background: rgba(15,23,42,.04);
    border: 1px solid rgba(15,23,42,.10);
    color: var(--cec-txt);
    text-decoration:none;
    font-weight:900;
  }

  /* =========================
     Mobile CTAs inside menu
  ========================= */
  .cec-mobileCtas{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:18px;         /* más aire respecto a links */
    padding-top:16px;
    border-top:1px solid rgba(15,23,42,.10);
  }

  /* override fuerte para que NO hereden el “gris” del menú */
  .cec-mobileMenu a.cec-mbtn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    padding:12px 14px !important;
    border-radius:16px !important;
    text-decoration:none !important;
    font-weight:900 !important;
    letter-spacing:.2px !important;
    border:0 !important;
    background:transparent !important; /* lo setea cada variante */
  }
  .cec-mbtnIcon{
    width:22px;
    display:inline-flex;
    justify-content:center;
  }
  .cec-mobileMenu a.cec-mbtn--props{
    background: linear-gradient(180deg, #1F2937 0%, #0B1220 100%) !important;
    color: rgba(255,255,255,.92) !important;
    box-shadow: 0 10px 22px rgba(2,6,23,.18) !important;
  }
  .cec-mobileMenu a.cec-mbtn--wa{
    background: radial-gradient(120% 120% at 30% 20%, #7CFFB2 0%, #25D366 55%, #12B557 100%) !important;
    color:#fff !important;
    box-shadow: 0 14px 30px rgba(37,211,102,.26) !important;
  }
  .cec-mobileMenu a.cec-mbtn:active{ transform: translateY(1px); }
}

@media (max-width: 520px){
  .cec-topbar{ display:none; }
  .cec-mainbar__inner{ padding:12px 14px; }
  .cec-logo{ width:115px; }
}