/* Guardian Reader — shared styles */
:root {
  --bg: #0b0a1c;
  --panel: #110f28;
  --panel-2: #171434;
  --border: #272352;
  --text: #f0effa;
  --muted: #a8a4cc;
  --muted-2: #706c96;
  --gold: #ffb833;
  --gold-deep: #e09a1f;
  --radius: 20px;
  --serif: "New York", "Iowan Old Style", Georgia, "Palatino Linotype", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--text); }

h1, h2, h3, .brand { font-family: var(--serif); }

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

::selection { background: var(--gold); color: #1c1204; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,10,28,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; letter-spacing: .01em; text-decoration: none; font-size: 18px;
}
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.site-nav { display: flex; align-items: center; gap: 26px; font-family: var(--sans); }
.site-nav a {
  color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500;
  transition: color .15s ease;
}
.site-nav a:hover { color: var(--gold); }
.site-nav .nav-cta {
  color: #1c1204; background: var(--gold); padding: 9px 18px; border-radius: 999px;
  font-weight: 700;
}
.site-nav .nav-cta:hover { background: var(--text); color: #1c1204; }
/* ---------- Language switcher ---------- */
.langselect {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--text);
  background-color: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 30px 7px 14px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffb833' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  cursor: pointer; transition: border-color .15s;
}
.langselect:hover { border-color: var(--gold); }
.langselect option { background: var(--panel-2); color: var(--text); }

/* language toggle visibility: body[data-active] decides which spans show */
[data-lang] { display: none; }
body[data-active="en"] [data-lang="en"] { display: revert; }
body[data-active="es"] [data-lang="es"] { display: revert; }

/* ---------- Mobile burger menu ---------- */
.nav-toggle { display: none; }
.nav-burger { display: none; }
@media (max-width: 1023px) {
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 10px;
    cursor: pointer; border: 1px solid var(--border); border-radius: 12px;
  }
  .nav-burger span {
    display: block; width: 100%; height: 2px; background: var(--text);
    border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
  }
  .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 8px 24px 20px;
    box-shadow: 0 24px 40px rgba(0,0,0,.5);
  }
  .site-nav a { display: block; padding: 14px 0; font-size: 16px; border-bottom: 1px solid var(--border); }
  .site-nav .nav-cta { margin-top: 14px; text-align: center; padding: 13px 18px; border-bottom: none; }
  .site-nav .langselect { margin-top: 14px; align-self: flex-start; }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--gold); color: #1c1204; text-decoration: none;
  font-family: var(--sans); font-weight: 700; font-size: 17px;
  padding: 15px 30px; border-radius: 999px;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { background: var(--text); color: #1c1204; transform: translateY(-1px); }
.btn-outline {
  background: transparent; color: var(--text); border: 1px solid #38326b;
}
.btn-outline:hover { background: var(--gold); color: #1c1204; border-color: var(--gold); }

/* App Store badge */
.appstore-badge {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--gold); color: #1c1204; text-decoration: none;
  border-radius: 14px; padding: 10px 22px 10px 18px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.appstore-badge:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(255,184,51,.25); }
.appstore-badge svg { width: 28px; height: 34px; flex: none; }
.appstore-badge .badge-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; font-family: var(--sans); }
.appstore-badge .badge-text small { font-size: 11.5px; font-weight: 500; letter-spacing: .02em; }
.appstore-badge .badge-text strong { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }

/* ---------- Device mockup ----------
   Un solo marco de iPhone compartido (PNG con la pantalla transparente) que se
   superpone a la captura o al video. La pantalla real del marco mide
   1290x2796 dentro de una imagen de 1530x3036, de ahi los porcentajes. */
.device { display: block; position: relative; margin: 0 auto; }
.device .device-frame {
  position: relative; z-index: 2;
  width: 100%; height: auto; display: block;
  pointer-events: none;
}
.device .device-screen {
  position: absolute; z-index: 1;
  left: 7.843%;      /* 120 / 1530 */
  top: 3.953%;       /* 120 / 3036 */
  width: 84.314%;    /* 1290 / 1530 */
  height: 92.095%;   /* 2796 / 3036 */
  object-fit: cover;
  border-radius: 12.8% / 5.9%;   /* ~165px en ambos ejes a tamano real */
  background: #0b0a1c;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 84px 0 40px;
  text-align: center;
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(255,184,51,.12), transparent 65%),
    radial-gradient(800px 400px at 88% 5%, rgba(100,89,238,.12), transparent 60%);
  overflow: hidden;
}
.hero .eyebrow {
  display: inline-block; font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(255,184,51,.4); border-radius: 999px;
  padding: 7px 16px; margin-bottom: 26px;
}
.hero h1 {
  font-size: clamp(42px, 6.6vw, 74px);
  font-weight: 700; line-height: 1.04; letter-spacing: -.015em;
  max-width: 880px; margin: 0 auto 22px;
}
.hero h1 .accent { color: var(--gold); font-style: italic; }
.hero .sub {
  font-size: clamp(18px, 2.4vw, 21px); color: var(--muted);
  max-width: 660px; margin: 0 auto 36px;
}
.hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; align-items: center; }
.hero .micro {
  margin-top: 18px; font-size: 14px; color: var(--muted-2);
}
.hero-phone {
  margin: 56px auto 0; max-width: 320px;
  filter: drop-shadow(0 30px 70px rgba(255,184,51,.16));
}

/* ---------- Sections ---------- */
section { padding: 96px 0; }
.section-panel { background: var(--panel); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.section-head .kicker {
  font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
}
.section-head h2 {
  font-size: clamp(30px, 4.4vw, 44px); font-weight: 700;
  letter-spacing: -.01em; line-height: 1.1; margin-bottom: 16px;
}
.section-head p { color: var(--muted); font-size: 18px; }

/* ---------- Feature rows ---------- */
.feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: center; padding: 44px 0;
}
.feature-row + .feature-row { border-top: 1px solid var(--border); }
.feature-row .shot {
  max-width: 320px; margin: 0 auto;
  filter: drop-shadow(0 24px 56px rgba(0,0,0,.55));
}
.feature-row.flip .shot { order: 2; }
.feature-copy .feature-kicker {
  color: var(--gold); font-family: var(--sans); font-weight: 700; font-size: 12.5px;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px;
}
.feature-copy h3 {
  font-size: clamp(24px, 3.2vw, 33px); font-weight: 700;
  letter-spacing: -.01em; line-height: 1.15; margin-bottom: 14px;
}
.feature-copy p { color: var(--muted); font-size: 17px; }
.feature-copy .feature-link {
  display: inline-block; margin: 18px -6px 0; padding: 2px 6px 3px; border-radius: 4px;
  color: var(--text); font-family: var(--sans); font-weight: 600; text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold)), linear-gradient(rgba(255,184,51,.3), rgba(255,184,51,.3));
  background-size: 0% 100%, 100% 2px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size .4s cubic-bezier(.25,.8,.25,1), color .2s ease;
}
.feature-copy .feature-link:hover { color: #1c1204; background-size: 100% 100%, 100% 2px; }
@media (max-width: 820px) {
  .feature-row { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .feature-row.flip .shot { order: 0; }
  .feature-row .shot { max-width: 260px; }
}

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px 26px;
  transition: transform .18s ease, border-color .18s ease;
}
.step:hover { transform: translateY(-4px); border-color: rgba(255,184,51,.5); }
.step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--gold); color: #1c1204; font-family: var(--serif);
  font-weight: 700; font-size: 19px;
  margin-bottom: 18px;
}
.step h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 15px; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Guides ---------- */
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.guide-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease;
}
.guide-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.guide-card .tag {
  align-self: flex-start;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(255,184,51,.4);
  padding: 4px 10px; border-radius: 999px;
}
.guide-card h3 { font-size: 19px; font-weight: 700; line-height: 1.3; }
.guide-card p { color: var(--muted); font-size: 14.5px; flex: 1; font-family: var(--sans); }
.guide-card .read { color: var(--text); font-family: var(--sans); font-size: 14px; font-weight: 700; }
.guide-card .read::after { content: " →"; color: var(--gold); }
@media (max-width: 900px) { .guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .guide-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--panel-2); margin-bottom: 12px; overflow: hidden;
}
.faq-item summary {
  cursor: pointer; list-style: none;
  padding: 20px 24px; font-family: var(--sans); font-weight: 600; font-size: 17px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; color: var(--gold); font-size: 26px; font-weight: 400; line-height: 1;
  transition: transform .2s ease; flex: none;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 24px 22px; color: var(--muted); font-size: 16px; }
.faq-item .faq-body a {
  color: var(--text); font-weight: 600; text-decoration: none; padding: 1px 4px; margin: 0 -4px; border-radius: 3px;
  background-image: linear-gradient(var(--gold), var(--gold)), linear-gradient(rgba(255,184,51,.3), rgba(255,184,51,.3));
  background-size: 0% 100%, 100% 2px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background-size .4s cubic-bezier(.25,.8,.25,1), color .2s ease;
}
.faq-item .faq-body a:hover { color: #1c1204; background-size: 100% 100%, 100% 2px; }

/* ---------- CTA ---------- */
.cta {
  text-align: center;
  background:
    radial-gradient(900px 400px at 50% 130%, rgba(255,184,51,.16), transparent 70%);
  border-top: 1px solid var(--border);
}
.cta blockquote {
  font-family: var(--serif);
  font-size: clamp(34px, 5.6vw, 60px); font-weight: 700; letter-spacing: -.01em;
  line-height: 1.12; max-width: 860px; margin: 0 auto 18px;
}
.cta blockquote .accent { color: var(--gold); font-style: italic; }
.cta .cta-sub { color: var(--muted); font-size: 18px; margin-bottom: 40px; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 56px 0 40px; color: var(--muted-2); font-size: 14px;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px;
}
.footer-grid h4 {
  color: var(--text); font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px;
}
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid a { color: var(--muted); text-decoration: none; font-size: 14.5px; }
.footer-grid a:hover { color: var(--gold); }
.footer-about p { max-width: 320px; color: var(--muted-2); margin-top: 12px; }
.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Article / guide pages ---------- */
.article-hero { padding: 72px 0 36px; }
.breadcrumbs { font-family: var(--sans); font-size: 13.5px; color: var(--muted-2); margin-bottom: 26px; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--gold); }
.breadcrumbs span { margin: 0 8px; color: #3a3468; }
.article-hero .tag {
  display: inline-block; font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(255,184,51,.4); border-radius: 999px;
  padding: 5px 14px; margin-bottom: 20px;
}
.article-hero h1 {
  font-size: clamp(32px, 5vw, 52px); font-weight: 700;
  letter-spacing: -.015em; line-height: 1.08; margin-bottom: 18px;
}
.article-hero .lede { font-size: 19px; color: var(--muted); max-width: 680px; }
.article-hero .meta { font-family: var(--sans); font-size: 13.5px; color: var(--muted-2); margin-top: 14px; }

.article { padding: 24px 0 80px; }
.article h2 {
  font-size: clamp(24px, 3.4vw, 31px); font-weight: 700;
  margin: 52px 0 16px; line-height: 1.18;
}
.article h3 { font-size: 21px; font-weight: 700; margin: 34px 0 10px; }
.article p { color: #cdc9e6; margin-bottom: 18px; }
.article ul, .article ol { color: #cdc9e6; margin: 0 0 18px 22px; }
.article li { margin-bottom: 10px; }
.article li::marker { color: var(--gold); font-weight: 700; }
.article strong { color: var(--text); }
.article p a, .article li a {
  color: var(--text); font-weight: 600; text-decoration: none; padding: 1px 4px; margin: 0 -4px; border-radius: 3px;
  background-image: linear-gradient(var(--gold), var(--gold)), linear-gradient(rgba(255,184,51,.3), rgba(255,184,51,.3));
  background-size: 0% 100%, 100% 2px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background-size .4s cubic-bezier(.25,.8,.25,1), color .2s ease;
}
.article p a:hover, .article li a:hover { color: #1c1204; background-size: 100% 100%, 100% 2px; }
.article blockquote {
  border-left: 3px solid var(--gold); padding: 6px 0 6px 22px;
  margin: 28px 0; font-family: var(--serif); font-size: 21px; font-weight: 600;
  color: var(--text); line-height: 1.45; font-style: italic;
}
.article .shot-inline {
  max-width: 300px; margin: 36px auto;
  filter: drop-shadow(0 20px 46px rgba(0,0,0,.5));
}
.article .shot-inline figcaption {
  text-align: center; font-family: var(--sans); font-size: 13.5px; color: var(--muted-2); margin-top: 12px;
}
.how-box {
  background: var(--panel-2); border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 16px; padding: 26px 28px; margin: 32px 0;
}
.how-box h3 { margin-top: 0; }
.article-cta {
  text-align: center; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 44px 32px; margin-top: 56px;
}
.article-cta h2 { margin: 0 0 10px; font-size: 27px; }
.article-cta p { color: var(--muted); margin-bottom: 26px; }
.related { margin-top: 64px; }
.related h2 { font-size: 23px; margin-bottom: 20px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .related-grid { grid-template-columns: 1fr; } }

/* utility */
.center { text-align: center; }
.mt-40 { margin-top: 40px; }

/* Cortes de línea en CJK.
   El coreano se corta entre eojeol, nunca dentro de una palabra: keep-all en
   todo el texto. El japonés sí corta dentro de la línea en texto corrido, pero
   en los títulos parte palabras katakana por la mitad, así que ahí lo evitamos.
   overflow-wrap deja escapar a una tirada más larga que la línea en vez de
   desbordar. El chino ya corta bien por defecto y no se toca. */
:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }

.nowrap { white-space: nowrap; }