/* ============================================================
   BRANDING BOARD — TTOYCO Asia Pacific Co., Limited (托蒂科亞太有限公司)
   Entidad de Hong Kong que replica el modelo de The Toy Company (MX),
   reposicionada como hub internacional de sourcing y mayoreo de
   figuras de coleccion y juguetes.
   Paleta "Sunset Trade" (elegida por el cliente): atardecer comercial —
   ciruela crepuscular + coral/naranja + ambar dorado. Tipografia DM Sans
   (cliente) + DM Mono (specs/numeros). Cambiar este archivo re-skinea
   toda la web sin tocar los bloques.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

:root{
  /* Paleta Sunset Trade */
  --brand-1:oklch(0.26 0.058 350);   /* ciruela crepuscular (nav/footer/hero/bandas oscuras) */
  --brand-2:oklch(0.40 0.105 18);    /* borgona calido */
  --brand-3:oklch(0.66 0.165 32);    /* coral atardecer */
  --brand-4:oklch(0.80 0.125 70);    /* ambar dorado */
  --brand-5:oklch(0.95 0.022 64);    /* crema durazno (superficie calida) */

  /* Acento coral */
  --accent:oklch(0.67 0.180 38);     /* coral-naranja brillante (botones/rellenos) */
  --accent-ink:oklch(0.22 0.040 350);/* texto sobre el coral (ciruela casi negra) */
  --accent-text:oklch(0.46 0.150 33);/* coral profundo para texto chico sobre claro (AA >=4.5) */
  --gold:oklch(0.78 0.125 72);       /* ambar de realce (datos/eyebrow secundario) */
  --gold-text:oklch(0.52 0.105 66);  /* ambar para texto chico (AA) */

  /* Roles derivados */
  --ink:oklch(0.27 0.022 350);
  --ink-soft:oklch(0.47 0.020 348);
  --ink-faint:oklch(0.60 0.016 346);
  --surface:oklch(0.992 0.004 70);
  --surface-2:oklch(0.972 0.010 64);
  --card:oklch(1 0 0);
  --line:oklch(0.90 0.012 60);

  /* Personalidad — calida, premium, coleccionista */
  --font-display:'DM Sans','PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
  --font-body:'DM Sans','PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
  --font-wordmark:'DM Sans',system-ui,sans-serif;
  --font-mono:'DM Mono',ui-monospace,SFMono-Regular,monospace;
  --radius:8px;                      /* premium-amable (no el 16px uniforme de slop, no el sharp tecnico) */
  --maxw:1200px;
  --shadow:0 22px 56px -28px oklch(0.30 0.08 350 / 0.55);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
}

/* ---- Overrides de marca: contraste AA del coral/ambar sobre claro ---- */
.eyebrow{color:var(--accent-text)}
.statc__c .delta,.tl span,.svert__step b{color:var(--accent-text)}
/* datos/specs en mono */
.statc__c b,.stats b,.hero__meta b,.spectable td b,.pdetail__media .herox__badge b{font-family:var(--font-mono);letter-spacing:-0.01em}

/* ============================================================ NAV (wordmark TTOYCO) */
.nav__logo{gap:11px;letter-spacing:-0.01em}
.nav__logo .mk{width:30px;height:30px;flex:0 0 auto;border-radius:9px;display:block}
.nav__logo .wm{font-family:var(--font-wordmark);font-weight:800;font-size:20px;letter-spacing:-0.02em;line-height:1}
.nav__logo .wm i{color:var(--accent);font-style:normal}
/* nav blanco sobre heroes oscuros (brand-1); al hacer scroll, fondo claro -> texto oscuro */
.nav.scrolled{background:color-mix(in oklab,var(--surface),transparent 4%);box-shadow:0 1px 0 var(--line),0 12px 32px -26px oklch(0.30 0.08 350/.5)}
.nav.scrolled .nav__logo,.nav.scrolled .nav__links a{color:var(--ink)}
.nav.scrolled .nav__links a.active{color:var(--accent-text)}
.nav.scrolled .lang{color:var(--ink)}
/* ---- Selector de idioma EN/ES: visible sobre hero oscuro y sobre nav claro (scrolled) ---- */
.nav__cta .lang{display:inline-flex;align-items:center;gap:12px;background:none;padding:0;opacity:1}
.nav .lang button{color:#fff;background:none;border:0;font:600 13px/1 var(--font-body);cursor:pointer;
  opacity:.7;padding:3px 0;transition:opacity .2s,color .2s,border-color .2s}
.nav .lang button:hover{opacity:1}
.nav .lang button.on{opacity:1;color:var(--brand-4);border-bottom:2px solid var(--accent);padding-bottom:2px}
.nav.scrolled .lang button{color:var(--ink)}
.nav.scrolled .lang button.on{color:var(--accent-text)}

/* header movil compacto */
@media(max-width:860px){
  .nav__cta{gap:10px}
  .nav__cta .btn--primary{padding:9px 14px;font-size:13px;border-radius:var(--radius)}
}
/* en teléfonos angostos: ocultar el botón CTA del header (se llega por el menú y por el hero)
   para que logo + EN/ES + menú no se amontonen; el selector de idioma se mantiene visible */
@media(max-width:600px){
  .nav__cta .btn--primary{display:none}
  .nav__cta{gap:0}
}
@media(max-width:400px){
  .nav__logo .wm{font-size:17px}
  .nav__logo .mk{width:26px;height:26px}
}

/* ============================================================ HERO showcase (oscuro + foto de coleccionables) */
.hero{min-height:96vh}
/* .hero es flex; sin esto el .container se encoge a su contenido y se centra,
   desalineando el h1 respecto del logo del nav. Forzar ancho completo. */
.hero .container{width:100%}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.62}
/* scrim sunset: oscurece izquierda+base para legibilidad, deja ver las piezas a la derecha */
.hero__bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(102deg,var(--brand-1) 26%,color-mix(in oklab,var(--brand-1),transparent 42%) 72%,transparent 100%),
    linear-gradient(180deg,transparent 38%,var(--brand-1) 100%)}
.hero__in .eyebrow{color:var(--brand-4)}
.hero h1{font-size:clamp(2.5rem,6vw,4.6rem);line-height:1.06;letter-spacing:-0.03em;max-width:16ch}
.hero h1 .hl{color:var(--accent);font-style:normal}
.hero p,.hero__sub{font-size:clamp(1.02rem,1.7vw,1.2rem);color:rgba(255,255,255,.86);max-width:52ch;margin-top:18px}
.hero__meta b{font-family:var(--font-mono);font-size:1.7rem;font-weight:500;display:block;color:#fff}
.hero__meta span{font-size:13px;color:rgba(255,255,255,.72);letter-spacing:.01em}
@media(max-width:640px){
  .hero{min-height:84vh}
  .hero .hero__in{padding:90px 0 32px}
  /* meta en una sola fila de 3 (no apilada) para que no caiga sobre la cookie bar */
  .hero__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
  .hero__meta b{font-size:1.12rem}
  .hero__meta span{font-size:10.5px;line-height:1.3}
  /* cookie bar compacta en móvil para que no tape el meta del hero (barra inferior fija) */
  .cookiebar{padding:9px 12px;font-size:12px;gap:9px;bottom:8px;left:8px;right:8px}
  .cookiebar .btn{padding:7px 12px;font-size:12.5px;white-space:nowrap}
}

/* ============================================================ STRIP / RIBBON marca */
.ribbon{background:linear-gradient(100deg,var(--brand-2),var(--accent) 60%,var(--brand-4))}
.ribbon__in{color:#fff;font-weight:600}

/* ============================================================ LICENSE MARQUEE (lmar) — marcas/licencias del modelo */
.lmar{padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lmar__item{color:var(--ink-faint);font-size:clamp(1.05rem,2vw,1.45rem);font-weight:800;letter-spacing:-0.01em;
  font-family:var(--font-display);opacity:.85;transition:color .2s}
.lmar__item b{color:var(--accent-text)}

/* ============================================================ SPECCARDS — pilares de sourcing/categorias */
.speccard{background:var(--card);transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.speccard:hover{transform:translateY(-3px);border-color:var(--brand-4);box-shadow:var(--shadow)}
.speccard__ic{background:linear-gradient(140deg,var(--brand-3),var(--brand-4));color:#fff}

/* ============================================================ PRODS — vitrina de coleccionables */
.prods{grid-template-columns:repeat(3,1fr)}
.prod{transition:transform .2s var(--ease),box-shadow .25s,border-color .2s}
.prod:hover{transform:translateY(-4px);border-color:var(--brand-4);box-shadow:var(--shadow)}
.prod__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.prod:hover .prod__img img{transform:scale(1.045)}
.prod__tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--brand-4);padding:4px 10px;border-radius:30px;margin-bottom:8px}
.prod__b h3{font-size:1.06rem;letter-spacing:-0.01em}
.prod__scale{font-family:var(--font-mono);font-size:12px;color:var(--accent-text);font-weight:500}
/* variante 2x2 para grupos de 4 tarjetas (evita la fila huérfana 3+1) */
.prods--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.prods{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.prods,.prods--2{grid-template-columns:1fr}}

/* ============================================================ STATC — datos del negocio */
.statc__c{background:var(--card)}
.statc__c b{font-family:var(--font-mono);font-weight:500;color:var(--brand-2)}
.statc--dark{margin-top:0}
.statc--dark .statc__c{background:color-mix(in oklab,var(--brand-1),transparent 8%);border-color:rgba(255,255,255,.14)}
.statc--dark .statc__c b{color:#fff}
.statc--dark .statc__c span{color:rgba(255,255,255,.72)}

/* ============================================================ ABOUT (nosotros) */
.about__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.about__points li,.about__points div{display:flex;gap:12px;align-items:flex-start;color:var(--ink-soft);font-size:15.5px}
.about__points .ck{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;
  background:color-mix(in oklab,var(--accent),transparent 84%);color:var(--accent-text);margin-top:1px;font-weight:700}
.value{transition:border-color .2s,transform .2s var(--ease)}
.value:hover{border-color:var(--brand-4);transform:translateY(-3px)}
.value__ic{font-size:24px}
.value h3{margin-top:12px;font-size:1.12rem}
.value p{color:var(--ink-soft);font-size:14.5px;margin-top:8px}

/* ============================================================ FZIG — proceso de sourcing / diferenciales */
.fzig__ic{background:linear-gradient(140deg,var(--accent),var(--brand-4));color:#fff}
.fzig__media img{width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;display:block}

/* ============================================================ PDETAIL — pieza destacada con specs */
.pdetail__media img{width:100%;height:100%;object-fit:cover;display:block}
.pdetail .eyebrow{color:var(--accent-text)}
.spectable td{padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:14.5px}
.spectable td:first-child{color:var(--ink-faint);width:42%}
.spectable td b{color:var(--ink);font-weight:600}

/* ============================================================ ACC — FAQ acordeon */
.acc__q{font-family:var(--font-display)}
.acc__item[open]{border-color:var(--brand-4)}
.acc__item summary::marker,.acc__item summary::-webkit-details-marker{color:var(--accent)}

/* ============================================================ CTAFORM / SUNSET cta */
.ctaform{background:linear-gradient(125deg,var(--brand-1) 0%,var(--brand-2) 55%,var(--brand-3) 120%);
  color:#fff;border-radius:calc(var(--radius)*2.2);padding:clamp(34px,5vw,60px);overflow:hidden}
.ctaform .eyebrow{color:var(--brand-4)}
.ctaform h2{color:#fff}
.ctaform p{color:rgba(255,255,255,.85)}
.ctaform__form{background:var(--card);color:var(--ink)}
.cta,.ctagrad{background:linear-gradient(125deg,var(--brand-1),var(--brand-2) 55%,var(--brand-3))}

/* ============================================================ CONTACT */
.contact__list a,.contact__list b{color:var(--ink)}
.form input:focus-visible,.form textarea:focus-visible,.ctaform__form input:focus-visible,.ctaform__form textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px}

/* ============================================================ CATÁLOGO real (grilla filtrable de productos) */
.cbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:32px}
.csearch{flex:1;min-width:220px;max-width:440px;padding:12px 18px;border:1.5px solid var(--line);border-radius:30px;
  font:inherit;font-size:14.5px;background:var(--card);color:var(--ink)}
.csearch:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.ccount{font-size:12.5px;color:var(--ink-faint);font-family:var(--font-mono)}
.cfilters{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cfilter{font:600 13px/1 var(--font-body);padding:8px 13px;border-radius:30px;border:1.5px solid var(--line);
  background:var(--card);color:var(--ink-soft);cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .12s}
.cfilter:hover{border-color:var(--brand-4);color:var(--ink)}
.cfilter:active{transform:scale(.97)}
.cfilter.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.cfilter i{font-style:normal;font-size:11px;opacity:.55;font-weight:600;margin-left:3px}
.cfilter.on i{opacity:.8}
.cg{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.cc{background:var(--card);border:1.5px solid var(--line);border-radius:calc(var(--radius)*1.4);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .25s,border-color .2s}
.cc:hover{transform:translateY(-3px);border-color:var(--brand-4);box-shadow:var(--shadow)}
.cc__img{aspect-ratio:1/1;background:#fff;display:grid;place-items:center;padding:10px;border-bottom:1px solid var(--line)}
.cc__img img{width:100%;height:100%;object-fit:contain;display:block}
.cc__b{padding:13px 14px 15px;display:flex;flex-direction:column;gap:6px;flex:1}
.cc__brand{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-text)}
.cc__name{font-size:12.5px;font-weight:600;line-height:1.32;color:var(--ink);letter-spacing:-0.01em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cc__price{margin-top:auto;display:flex;align-items:baseline;gap:8px;padding-top:8px}
.cc__price b{font-family:var(--font-mono);font-size:1.05rem;color:var(--brand-2);font-weight:500}
.cc__price span{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint)}
.cpager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin-top:34px}
.cpg{min-width:42px;height:42px;padding:0 13px;border:1.5px solid var(--line);background:var(--card);border-radius:11px;
  font:600 14px/1 var(--font-body);color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,color .15s,transform .12s}
.cpg:hover:not(:disabled){border-color:var(--brand-4);color:var(--ink)}
.cpg:active:not(:disabled){transform:scale(.96)}
.cpg.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.cpg:disabled{opacity:.38;cursor:default}
.cpg-dots{padding:0 4px;color:var(--ink-faint);font-weight:600}
.cnote{margin-top:24px;font-size:12.5px;color:var(--ink-faint);max-width:74ch;line-height:1.6}
.cc--hide{display:none}
@media(max-width:900px){.cg{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.cg{grid-template-columns:repeat(2,1fr)}.cbar{flex-direction:column;align-items:stretch}.csearch{max-width:none}}

/* ============================================================ LEGAL (privacidad / términos) */
.legal{display:grid;grid-template-columns:230px 1fr;gap:clamp(28px,5vw,56px);align-items:start;margin-top:8px}
.legal__toc{position:sticky;top:96px;font-size:14px}
.legal__toc a{display:block;padding:7px 0 7px 14px;color:var(--ink-soft);border-left:2px solid var(--line);transition:color .2s,border-color .2s}
.legal__toc a:hover{color:var(--accent-text);border-color:var(--accent)}
.legal__body h2{font-size:1.3rem;margin:34px 0 10px;scroll-margin-top:96px}
.legal__body h2:first-of-type{margin-top:0}
.legal__body p,.legal__body li{color:var(--ink-soft);font-size:15px;margin-top:10px;line-height:1.7}
.legal__body ul{margin-left:20px}
.legal__meta{font-size:13.5px;color:var(--ink-faint);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:22px}
@media(max-width:760px){.legal{grid-template-columns:1fr}.legal__toc{position:static}}

/* ============================================================ FOOT */
.foot__logo .wm i{color:var(--accent)}

/* foco visible global de marca */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}