/* ChaChing Panel 2 — hoja de estilos única del sitio estático.
 * Paleta del producto (docs/paneles-spec.md): el sitio hereda la identidad del panel.
 * Dark-first deliberado: el objeto vive encendido en una mesa, la web también. */

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

:root {
  --bg: #0C110E;          /* negro verdoso, mismo fondo que el panel */
  --bg2: #111813;
  --bg3: #16201A;
  --border: #1F2B23;
  --emerald: #17C177;     /* positivo / ventas */
  --emerald-dim: rgba(23, 193, 119, 0.14);
  --brass: #D4AF6A;       /* marca, marcos */
  --brass-dim: rgba(212, 175, 106, 0.14);
  --ink: #F2F5F1;         /* cifras / texto principal */
  --muted: #8A968E;       /* etiquetas */
  --muted2: #7B877F;      /* subido desde #5C675F: daba 3.3:1 sobre el fondo (falla AA) */
  --red: #E0684B;
  --radius: 14px;
  --max-w: 1080px;
  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
}

html { scroll-behavior: smooth; }

/* La nav es fixed: sin esto, al saltar a #pricing o #faq el rótulo de la
 * sección queda escondido detrás de la barra. */
section[id] { scroll-margin-top: 88px; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* height:auto es obligatorio: sin él, un <img> con width/height en el HTML se
 * deforma en cuanto max-width lo encoge (la altura se queda con el valor fijo). */
img, svg { max-width: 100%; height: auto; }

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

/* ── NAV ── */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background: rgba(12, 17, 14, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.logo {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.logo em { font-style: normal; color: var(--emerald); }
.logo small { font-weight: 600; color: var(--brass); font-size: 0.8em; }

.nav-links { display: flex; gap: 22px; align-items: center; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }

.lang-switch { display: flex; gap: 2px; align-items: center; font-size: 0.8rem; }
.lang-switch a, .lang-switch span {
  color: var(--muted);
  text-decoration: none;
  padding: 3px 7px;
  border-radius: 6px;
}
.lang-switch a:hover { color: var(--ink); background: var(--bg3); }
.lang-switch .current { color: var(--brass); font-weight: 700; }

.nav-cta {
  background: var(--emerald);
  color: #06251A !important;
  padding: 8px 18px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s;
}
.nav-cta:hover { transform: translateY(-1px); }
.nav-cta.is-pending { background: var(--brass); color: #241C08 !important; }

/* ── HERO ── */
.hero {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 130px 28px 70px;
  text-align: center;
}

.hero-badge {
  display: inline-block;
  background: var(--brass-dim);
  color: var(--brass);
  border: 1px solid rgba(212, 175, 106, 0.35);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 26px;
}

.hero h1 {
  font-size: 3.6rem;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1.04;
  max-width: 780px;
  margin: 0 auto 22px;
}
.hero h1 em { font-style: normal; color: var(--emerald); }

.hero .sub {
  color: var(--muted);
  font-size: 1.18rem;
  max-width: 600px;
  margin: 0 auto 38px;
}

.hero-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.btn-primary {
  display: inline-block;
  background: var(--emerald);
  color: #06251A;
  padding: 15px 38px;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(23, 193, 119, 0.3); }

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--ink);
  padding: 15px 38px;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border);
  transition: border-color 0.2s;
}
.btn-secondary:hover { border-color: var(--brass); }

/* Hueco del render (F4 lo sustituye por las imágenes reales) */
.hero-render {
  max-width: 620px;
  margin: 60px auto 0;
  padding: 32px;
  border-radius: var(--radius);
  background: radial-gradient(ellipse at 50% 80%, rgba(23, 193, 119, 0.08), transparent 65%), var(--bg2);
  border: 1px solid var(--border);
}
.hero-render figcaption { color: var(--muted2); font-size: 0.8rem; margin-top: 14px; }

/* ── SECCIONES ── */
section { max-width: var(--max-w); margin: 0 auto; padding: 90px 28px; }

.section-label {
  color: var(--brass);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-title {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 14px;
  line-height: 1.12;
}

.section-subtitle {
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 620px;
  margin-bottom: 48px;
}

/* ── DEMO DE PANTALLA (hueco ui-captures) ── */
.ui-captures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Maqueta CSS 320×240 hasta que lleguen las capturas reales del firmware */
.screen {
  aspect-ratio: 4 / 3;
  background: #080C0A;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8% 9%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.screen .label {
  color: var(--muted);
  font-size: clamp(0.55rem, 1.4vw, 0.75rem);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.screen .big {
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
  margin: 4px 0;
}
.screen .delta {
  display: inline-block;
  align-self: flex-start;
  font-size: clamp(0.6rem, 1.5vw, 0.8rem);
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 12px;
}
.screen .delta.up { color: var(--emerald); background: var(--emerald-dim); }
.screen .delta.down { color: var(--red); background: rgba(224, 104, 75, 0.14); }
.screen .spark {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 28%;
  opacity: 0.85;
}
.screen-caption { color: var(--muted2); font-size: 0.8rem; margin-top: 10px; text-align: center; }

/* Capturas reales del firmware (320×240). Se muestran a tamaño natural o menos:
 * ampliarlas emborrona el texto antialiaseado del panel. */
.shot {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #080C0A;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.shot img { display: block; width: 100%; height: auto; }
.captures-note {
  color: var(--muted2);
  font-size: 0.82rem;
  margin-top: 26px;
  text-align: center;
}

/* ── FEATURES ── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.feature-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: border-color 0.2s, transform 0.2s;
}
.feature-card:hover { border-color: var(--brass); transform: translateY(-2px); }
/* Pila de fuentes de emoji explícita: sin ella, un glifo que la fuente de texto
 * sí tiene (₿, ✓…) se dibuja como letra y desentona al lado de los emoji. */
.feature-card .icon {
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: 12px;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.feature-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.feature-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.6; }

/* ── SPECS ── */
.specs-table, .compare-table { width: 100%; border-collapse: collapse; }

/* Las tablas pueden no caber en pantallas muy estrechas. El scroll horizontal
 * ya estaba, pero sin señal: se veía una columna cortada y nadie adivina que
 * hay más a la derecha. Sombras de scroll clásicas (con background-attachment
 * local) que sólo aparecen cuando de verdad hay contenido oculto. */
.table-wrap {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--bg) 30%, rgba(12, 17, 14, 0)) left center / 24px 100% no-repeat,
    linear-gradient(to left, var(--bg) 30%, rgba(12, 17, 14, 0)) right center / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) left center / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) right center / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.specs-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.specs-table td:first-child { color: var(--muted); width: 40%; }
.specs-table td:last-child { color: var(--ink); font-weight: 600; }

/* ── COMPARATIVA v1 → v2 ── */
.compare-table th, .compare-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  text-align: left;
}
.compare-table th { color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1.5px; }
.compare-table th.v2, .compare-table td.v2 { color: var(--emerald); font-weight: 600; }
.compare-table td:first-child { color: var(--muted); }

/* ── PRECIO ── */
.pricing-card {
  max-width: 460px;
  margin: 0 auto;
  background: var(--bg2);
  border: 2px solid var(--brass);
  border-radius: 18px;
  padding: 40px 36px;
  text-align: center;
}
.pricing-card .price {
  font-size: 3.6rem;
  font-weight: 900;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}
.pricing-card .price-note { color: var(--muted); font-size: 0.95rem; margin-bottom: 14px; }

/* Equivalente orientativo en $/£. El mercado principal es EEUU/UK: si el dato va
 * en el gris más flojo y a 0.85rem, el cliente que decide por precio no lo lee.
 * Sube a texto normal y con las cifras en latón. */
.price-fx {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.price-fx strong { color: var(--brass); font-weight: 700; }

.price-approx { color: var(--muted2); font-size: 0.85rem; margin-bottom: 26px; }
.pricing-card .btn-primary {
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  font-size: clamp(0.95rem, 3.6vw, 1.05rem);
  white-space: nowrap;
}

/* Aviso mientras el checkout de Shopify aún no está publicado (lo activa main.js
 * solo si config.js sigue con el variant-id de plantilla). */
.buy-pending {
  display: none;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(212, 175, 106, 0.4);
  background: var(--brass-dim);
  border-radius: 10px;
  color: var(--brass);
  font-size: 0.86rem;
  line-height: 1.5;
}
.checkout-pending .buy-pending { display: block; }
.checkout-pending .buy-pending a { color: var(--brass); }
.pricing-includes {
  list-style: none;
  text-align: left;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pricing-includes li { color: var(--muted); font-size: 0.88rem; display: flex; align-items: baseline; gap: 9px; }
.pricing-includes li::before { content: "✓"; color: var(--emerald); font-weight: 800; }

/* ── FAQ ── */
.faq-list { max-width: 720px; display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 600;
  text-align: left;
  padding: 19px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: inherit;
}
.faq-q::after { content: "+"; font-size: 1.4rem; color: var(--brass); flex-shrink: 0; }
.faq-item.open .faq-q::after { content: "−"; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; }
.faq-item.open .faq-a { max-height: 300px; padding-bottom: 19px; }
.faq-a p { color: var(--muted); font-size: 0.93rem; line-height: 1.7; }

/* ── BANNER CTA ── */
.cta-banner { text-align: center; padding: 70px 28px 110px; max-width: var(--max-w); margin: 0 auto; }
.cta-banner h2 { font-size: 2.2rem; font-weight: 800; letter-spacing: -1px; margin-bottom: 14px; }
.cta-banner p { color: var(--muted); font-size: 1.08rem; margin-bottom: 30px; }

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--border);
  padding: 38px 28px;
  color: var(--muted2);
  font-size: 0.85rem;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: var(--muted2); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--muted); }

/* ── PÁGINAS LEGALES ── */
.legal-content { max-width: 780px; margin: 0 auto; padding: 120px 28px 80px; }
.legal-content h1 { font-size: 2.1rem; font-weight: 800; letter-spacing: -1px; margin-bottom: 8px; }
.legal-content .updated { color: var(--muted2); font-size: 0.9rem; margin-bottom: 38px; }
.legal-content h2 { font-size: 1.2rem; font-weight: 700; margin-top: 38px; margin-bottom: 12px; }
.legal-content p { color: var(--muted); font-size: 0.95rem; margin-bottom: 16px; }
.legal-content ul { color: var(--muted); font-size: 0.95rem; margin-bottom: 16px; padding-left: 24px; }
.legal-content ul li { margin-bottom: 8px; }
.legal-content strong { color: var(--ink); }

/* ── RESPONSIVE ── */
@media (max-width: 820px) {
  .nav-links a.nav-plain { display: none; }
  .hero { padding: 110px 20px 56px; }
  .hero h1 { font-size: 2.4rem; letter-spacing: -1px; }
  .hero .sub { font-size: 1rem; }
  section { padding: 56px 20px; }
  .section-title { font-size: 1.8rem; }
  .features-grid { grid-template-columns: 1fr; }
  .ui-captures { grid-template-columns: 1fr; }
  .cta-banner h2 { font-size: 1.7rem; }
  .legal-content { padding: 100px 20px 60px; }
  .legal-content h1 { font-size: 1.6rem; }
}

/* Móvil estrecho: sin esto la nav se sale de la pantalla y el botón de compra
 * queda cortado por la derecha (peor en ES/FR, que son más largos). */
@media (max-width: 600px) {
  .nav-inner { padding: 12px 16px; gap: 10px; }
  .logo { font-size: 1.05rem; }   /* "Panel 2" se queda: es la señal de que es la v2 */
  .nav-links { gap: 10px; min-width: 0; }
  .lang-switch { gap: 0; font-size: 0.75rem; }
  .lang-switch a, .lang-switch span { padding: 3px 5px; }
  .nav-cta { padding: 8px 14px; font-size: 0.82rem; }
  .nav-cta-price { display: none; }   /* deja "Buy" / "Comprar" / "Acheter" */

  /* La comparativa v1→v2 se salía 25 px y recortaba la columna de la v2,
   * que es justo el mensaje de la sección. Con menos padding cabe entera. */
  .compare-table th, .compare-table td { padding: 12px 8px; font-size: 0.86rem; }
  .specs-table td { padding: 12px 8px; font-size: 0.86rem; }
}

/* Móvil de 320 px (iPhone SE 1ª gen, portada del Fold): medido, el botón de
 * compra se salía 8 px por la derecha en francés ("Acheter" es la palabra más
 * larga de los tres idiomas). Se recorta de todo un poco en vez de esconder
 * "Panel 2", que es la señal de que esto es la v2. */
@media (max-width: 380px) {
  .nav-inner { padding: 12px 12px; gap: 6px; }
  .logo { font-size: 0.95rem; }
  .nav-links { gap: 6px; }
  .lang-switch a, .lang-switch span { padding: 3px 4px; }
  .nav-cta { padding: 8px 10px; font-size: 0.78rem; }
}

/* Medido en francés a 320 px: la comparativa pedía 295 px en un hueco de 280 y
 * cortaba 15 px de la columna de la v2, que es el mensaje de la sección. A 375
 * cabía justo (335 de 335), sin margen para una fuente de reserva distinta, así
 * que el apretón entra ya en 400. */
@media (max-width: 400px) {
  .compare-table th, .compare-table td { padding: 11px 5px; font-size: 0.8rem; }
  .compare-table th { font-size: 0.68rem; letter-spacing: 1px; }
  .specs-table td { padding: 11px 5px; font-size: 0.82rem; }
}