/* Sistema "Bloque" de BridgePlay (DESIGN_SYSTEM.md del repo de la app):
   radio cero, borde de 2px solo en lo importante, verde = acción. */
:root {
  --bg:#0D0D0D; --surface:#1C1C1A; --surface2:#24241F; --border:#F5F3EE; --line:#3A3A36;
  --text:#F5F3EE; --dim:#A3A39C; --grass:#4C9A2A; --diamond:#3FD9C4; --gold:#E8B923;
  --head:'Barlow Condensed', 'Noto Sans JP', sans-serif;
  --body:'Barlow Condensed', 'Noto Sans JP', sans-serif;
  --mono:'JetBrains Mono', 'Noto Sans JP', monospace;
}
* { box-sizing:border-box; border-radius:0 !important; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text); font-family:var(--body); line-height:1.5;
  background-image:
    linear-gradient(rgba(245,243,238,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,243,238,.03) 1px, transparent 1px);
  background-size:34px 34px;
}
a { color:var(--diamond); }
.wrap { max-width:760px; margin:0 auto; padding:0 18px; }

/* Idiomas: solo se ve el bloque del idioma elegido (sin JS: español). */
html:not([data-lang]) [data-l]:not([data-l="es"]),
html[data-lang="es"] [data-l]:not([data-l="es"]),
html[data-lang="en"] [data-l]:not([data-l="en"]),
html[data-lang="ja"] [data-l]:not([data-l="ja"]) { display:none !important; }
html[data-lang="ja"] { --head:'Noto Sans JP', sans-serif; --body:'Noto Sans JP', sans-serif; }
html[data-lang="ja"] body { line-height:1.7; }
/* Japonés: cortar líneas por frases, no a mitad de palabra (Chrome; Safari lo ignora). */
html[data-lang="ja"] h1, html[data-lang="ja"] h2, html[data-lang="ja"] summary, html[data-lang="ja"] .perk h3 { word-break:auto-phrase; }

/* Barra superior */
.top { position:sticky; top:0; z-index:5; background:rgba(13,13,13,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; justify-content:space-between; height:60px; gap:12px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.brand img { width:32px; height:32px; }
.brand b { font-family:'Barlow Condensed', sans-serif; font-weight:900; font-size:24px; letter-spacing:1px; }
.brand b span { color:var(--grass); }
.langs { display:flex; border:1px solid var(--line); }
.langs button { appearance:none; background:none; border:0; color:var(--dim); cursor:pointer;
  font-family:var(--mono); font-size:13px; padding:8px 11px; }
.langs button + button { border-left:1px solid var(--line); }
.langs button[aria-pressed="true"] { background:var(--text); color:var(--bg); font-weight:700; }
.langs button:focus-visible { outline:2px solid var(--diamond); outline-offset:-2px; }

/* Portada */
.hero { padding:44px 0 8px; display:grid; grid-template-columns:1.25fr .75fr; gap:28px; align-items:center; }
@media (max-width:640px) { .hero { grid-template-columns:1fr; padding-top:30px; } .hero .phone { display:none; } }
h1 { font-family:var(--head); font-weight:900; font-size:46px; line-height:1.02; margin:0 0 14px;
  text-transform:uppercase; letter-spacing:.3px; }
html[data-lang="ja"] h1 { font-size:34px; line-height:1.3; text-transform:none; letter-spacing:0; }
h1 em { font-style:normal; color:var(--grass); }
.lead { font-size:21px; font-weight:600; margin:0 0 22px; color:var(--text); }
html[data-lang="ja"] .lead { font-size:17px; font-weight:500; }
.phone img { width:100%; max-width:250px; display:block; margin-left:auto; border:1px solid var(--line); }

.get { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:420px) { .get { grid-template-columns:1fr; } }
.cta { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text);
  background:var(--surface); border:2px solid var(--border); border-left:8px solid var(--grass); padding:14px 16px; }
.cta:hover { background:var(--surface2); }
.cta .t1 { font-family:var(--head); font-weight:900; font-size:24px; line-height:1.1; }
.cta .t2 { font-family:var(--mono); font-size:12px; color:var(--dim); }
.note { font-family:var(--mono); font-size:12px; color:var(--dim); margin:12px 0 0; }

/* Secciones */
.label { font-family:var(--mono); font-size:13px; letter-spacing:2px; text-transform:uppercase;
  color:var(--dim); margin:48px 0 14px; }
html[data-lang="ja"] .label { letter-spacing:1px; }
.steps { list-style:none; margin:0; padding:0; counter-reset:s; }
.steps li { display:grid; grid-template-columns:38px 1fr; gap:14px; align-items:start; padding:10px 0;
  font-size:19px; font-weight:600; counter-increment:s; }
html[data-lang="ja"] .steps li { font-size:16px; font-weight:500; }
.steps li::before { content:counter(s); width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--grass); color:var(--grass); font-family:var(--mono); font-weight:700; }
.steps small { display:block; color:var(--dim); font-weight:500; font-size:16px; }
html[data-lang="ja"] .steps small { font-size:14px; }

.shots { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
.shots img { flex:0 0 auto; width:200px; scroll-snap-align:start; border:1px solid var(--line); }

.perks { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:560px) { .perks { grid-template-columns:1fr; } }
.perk { border:1px solid var(--line); padding:14px 16px; background:rgba(28,28,26,.6); }
.perk h3 { margin:0 0 4px; font-family:var(--head); font-size:19px; font-weight:700; text-transform:uppercase; }
html[data-lang="ja"] .perk h3 { font-size:16px; text-transform:none; }
.perk p { margin:0; font-size:16px; color:var(--dim); }
html[data-lang="ja"] .perk p { font-size:14px; }

/* Preguntas: temas que se abren al tocarlos (como la Ayuda de la app) */
details { border:1px solid var(--line); background:rgba(28,28,26,.6); margin:0 0 8px; }
details[open] { background:var(--surface); }
summary { list-style:none; cursor:pointer; padding:15px 48px 15px 16px; position:relative;
  font-family:var(--head); font-size:19px; font-weight:700; }
html[data-lang="ja"] summary { font-size:16px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:20px; color:var(--dim); }
details[open] summary::after { content:"−"; }
details > div { padding:0 16px 16px; color:var(--dim); font-size:17px; }
html[data-lang="ja"] details > div { font-size:15px; }
details > div p { margin:0 0 8px; }
details ol, details ul { margin:0 0 8px; padding-left:22px; }
details li { margin:4px 0; }
code { font-family:var(--mono); font-size:.86em; background:#000; border:1px solid var(--line); padding:1px 5px; color:var(--text); }

.card { background:var(--surface); border:1px solid var(--line); padding:18px; }
.card h2 { font-family:var(--head); font-size:22px; font-weight:900; text-transform:uppercase; margin:0 0 8px; }
html[data-lang="ja"] .card h2 { font-size:18px; text-transform:none; }
.card p, .card li { color:var(--dim); font-size:17px; }
html[data-lang="ja"] .card p, html[data-lang="ja"] .card li { font-size:15px; }
.mail { font-family:var(--mono); font-size:15px; }

/* Páginas de texto (guía, privacidad) */
.doc { padding-top:36px; }
@media (max-width:560px) { h1 { font-size:38px; } .doc h1 { font-size:32px; } }
.doc h1 { font-size:40px; }
html[data-lang="ja"] .doc h1 { font-size:28px; }
.doc .lead { font-size:19px; }
.doc .card { margin:0 0 12px; }
.essential { border:2px solid var(--border); border-left:8px solid var(--grass); background:var(--surface); padding:16px 18px; margin:0 0 24px; font-size:18px; font-weight:600; }
html[data-lang="ja"] .essential { font-size:15px; font-weight:500; }

.foot { font-family:var(--mono); font-size:12px; color:var(--dim); border-top:1px solid var(--line);
  margin-top:56px; padding:18px 0 40px; line-height:1.9; }
.foot a { color:var(--dim); }