:root{
  --ink:#16213A; --ink-2:#4A5468; --muted:#5B6475; --bg:#F6F5F2; --white:#FFFFFF;
  --line:#E4E2DC; --dark:#16213A; --dark-2:#24314F; --accent:#F07A8C; --wa:#1B7A43;
  --foot:#0F1729; --foot-ink:#C3CAD8;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:Inter,system-ui,sans-serif; line-height:1.6; }
h1,h2,h3{ font-family:Poppins,sans-serif; font-weight:700; margin:0; }
h2{ font-size:clamp(28px,4vw,36px); }
a{ color:var(--ink); }
a:hover{ color:#C8394F; }
svg path{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.wrap{ max-width:1200px; margin:0 auto; padding-inline:24px; }
.section{ padding-block:80px; display:flex; flex-direction:column; gap:40px; }
.section__head{ display:flex; flex-direction:column; gap:12px; max-width:720px; }
.section__head p{ margin:0; font-size:18px; color:var(--ink-2); }

/* botones */
.btn{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; font-size:16px; padding:16px 28px; border-radius:8px; border:1px solid transparent; cursor:pointer; font-family:inherit; transition:transform .15s ease, opacity .15s ease; }
.btn:active{ transform:scale(.97); }
.btn--dark{ background:var(--dark); color:#fff; }
.btn--dark:hover{ color:#fff; opacity:.9; }
.btn--accent{ background:var(--accent); color:var(--ink); }
.btn--accent:hover{ color:var(--ink); opacity:.92; }
.btn--ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.btn--ghost:hover{ color:#fff; background:rgba(255,255,255,.08); }
.btn--wa{ background:var(--wa); color:#fff; align-self:flex-start; padding:14px 22px; }
.btn--wa:hover{ color:#fff; opacity:.92; }
.btn--sm{ font-size:15px; padding:12px 20px; }

/* encabezado */
.topbar{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.topbar__in{ padding-block:16px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand__logo{ height:48px; width:auto; display:block; }
.brand__tag{ font-family:Poppins,sans-serif; font-size:13px; font-weight:600; letter-spacing:.12em; color:var(--muted); }
.nav{ display:flex; flex-wrap:wrap; align-items:center; gap:24px; font-size:15px; font-weight:500; }
.nav a{ text-decoration:none; }
.nav .btn{ padding:12px 20px; font-size:15px; }
.menu-btn{ display:none; background:none; border:0; color:var(--ink); width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer; }
@media (max-width:900px){
  .menu-btn{ display:inline-flex; }
  .nav{ display:none; width:100%; flex-direction:column; align-items:stretch; gap:4px; padding-bottom:8px; }
  .nav.open{ display:flex; }
  .nav a{ padding:12px 4px; }
  .nav .btn{ justify-content:center; margin-top:8px; }
}

/* hero */
.hero{ background:var(--dark); color:#fff; }
.hero__in{ padding-block:80px; display:flex; flex-wrap:wrap; align-items:center; gap:48px; }
.hero__copy{ flex:1 1 480px; min-width:0; display:flex; flex-direction:column; gap:24px; }
.pill{ align-self:flex-start; font-size:13px; font-weight:600; letter-spacing:.1em; border:1px solid rgba(255,255,255,.4); padding:6px 12px; border-radius:999px; }
.hero h1{ font-size:clamp(36px,5.5vw,52px); line-height:1.1; }
.hero p{ margin:0; font-size:19px; color:#D9DEE8; max-width:560px; }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:16px; }
.hero__media{ flex:1 1 400px; min-width:0; position:relative; aspect-ratio:16/10; border-radius:16px; background:var(--dark-2); border:1px dashed rgba(255,255,255,.35); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.hero__placeholder{ color:#C3CAD8; padding:24px; text-align:center; }
.hero__media.has-video .hero__placeholder{ display:none; }
.hero__media:not(.has-video) .hero__video{ display:none; }

/* tarjetas */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; }
.card{ background:#fff; border-radius:16px; overflow:hidden; border:1px solid var(--line); display:flex; flex-direction:column; scroll-margin-top:96px; }
.card__img{ height:200px; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; font-size:15px; }
.card__img--blue{ background:#E3EBF8; color:#2B4A80; }
.card__img--amber{ background:#FBEBD3; color:#7A4C0E; }
.card__img--pink{ background:#FBE2E6; color:#8C2436; }
.card__img img{ width:100%; height:100%; object-fit:cover; }
.card__body{ padding:28px; display:flex; flex-direction:column; gap:14px; flex-grow:1; }
.card__body h3{ font-size:26px; }
.card__body p{ margin:0; color:var(--ink-2); }
.card__body .btn{ margin-top:auto; align-self:flex-start; }
.card__kicker{ font-size:13px; font-weight:600; letter-spacing:.08em; }
.c-blue{ color:#2F5FB3; } .c-amber{ color:#9A5F0C; } .c-pink{ color:#B03048; }

/* carrusel Mercado Libre */
.carousel{ position:relative; }
.carousel__track{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,260px); gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 4px 16px; scrollbar-width:thin; }
.ml{ scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.ml__img{ aspect-ratio:1; background:#FBE2E6; color:#8C2436; display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; font-size:14px; }
.ml__img img{ width:100%; height:100%; object-fit:cover; }
.ml__body{ padding:16px; display:flex; flex-direction:column; gap:8px; flex-grow:1; }
.ml__body b{ font-family:Poppins,sans-serif; font-size:16px; line-height:1.3; }
.ml__body p{ margin:0; font-size:14px; color:var(--ink-2); }
.ml__price{ font-family:Poppins,sans-serif; font-weight:700; font-size:18px; }
.ml__body .btn{ margin-top:auto; justify-content:center; }
.carousel__btn{ position:absolute; top:40%; z-index:2; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 14px rgba(22,33,58,.12); }
.carousel__btn.prev{ left:-14px; } .carousel__btn.next{ right:-14px; }
@media (max-width:700px){ .carousel__btn{ display:none; } }

/* nosotros */
.band{ background:#fff; border-block:1px solid var(--line); }
.why{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:32px; }
.why > div{ display:flex; flex-direction:column; gap:10px; }
.why p{ margin:0; color:var(--ink-2); }
.big{ font-family:Poppins,sans-serif; font-size:44px; font-weight:700; color:var(--dark); }
.why__award{ background:var(--dark); color:#fff; border-radius:16px; padding:28px; }
.why__award p{ color:#D9DEE8; }
.why__kicker{ font-size:13px; font-weight:600; letter-spacing:.1em; color:var(--accent); }
.why__title{ font-family:Poppins,sans-serif; font-size:32px; font-weight:700; }

/* trabajos */
.works{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.work{ height:240px; border-radius:12px; background:#ECEAE4; color:var(--ink-2); display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; overflow:hidden; }
.work img{ width:100%; height:100%; object-fit:cover; }

/* contacto */
.contact{ flex-direction:row; flex-wrap:wrap; gap:48px; scroll-margin-top:80px; }
.contact__copy{ flex:1 1 360px; min-width:0; display:flex; flex-direction:column; gap:16px; }
.contact__copy > p{ margin:0; font-size:17px; color:var(--ink-2); }
.ally{ margin-top:16px; background:#E3EBF8; border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:8px; }
.ally b{ font-family:Poppins,sans-serif; font-size:20px; }
.ally p{ margin:0; color:#2B3A55; }
.ally__link{ align-self:flex-start; font-weight:600; text-decoration:none; border-bottom:2px solid var(--ink); padding:4px 0; }
.form{ flex:1 1 480px; min-width:0; background:#fff; border:1px solid var(--line); border-radius:16px; padding:32px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.form label{ display:flex; flex-direction:column; gap:8px; font-size:14px; font-weight:600; }
.form input,.form select,.form textarea{ font:inherit; font-weight:400; padding:12px; border:1px solid #C9C6BE; border-radius:8px; background:#fff; color:var(--ink); }
.form input:focus,.form select:focus,.form textarea:focus{ outline:2px solid var(--dark); outline-offset:1px; }
.form .invalid{ border-color:#C8394F; }
.full{ grid-column:1/-1; }
.full-start{ grid-column:1/-1; justify-self:start; }
.form__status{ margin:0; font-size:14px; min-height:1em; }
.form__status.ok{ color:var(--wa); } .form__status.err{ color:#B03048; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; }

/* pie */
.footer{ background:var(--foot); color:var(--foot-ink); }
.footer__in{ padding-block:48px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px; font-size:15px; }
.footer__col{ display:flex; flex-direction:column; gap:8px; flex:1 1 200px; }
.footer__col b{ color:#fff; }
.footer__col a{ color:var(--foot-ink); }
.footer__logo{ height:44px; width:auto; align-self:flex-start; margin-bottom:4px; }

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .btn{ transition:none; } }