/* ==========================================================================
   ChaChaChat — Landing Page
   Paleta: #ffbf00 #6752e0 #f0f1ff #e52b50 #31af70 #ca27d0 #ec7a3d
   ========================================================================== */

:root {
  --bg: #141414;
  --bg-alt: #1a1b2e;
  --surface: #1e1e30;
  --surface-2: #22203a;
  --border: #2e2e40;
  --text: #f0f1ff;
  --text-muted: #a9a9c2;

  --purple: #6752e0;
  --purple-soft: rgba(103, 82, 224, 0.15);
  --amber: #ffbf00;
  --red: #e52b50;
  --green: #31af70;
  --magenta: #ca27d0;
  --orange: #ec7a3d;

  --gradient-brand: linear-gradient(135deg, var(--purple), var(--magenta));
  --gradient-warm: linear-gradient(135deg, var(--orange), var(--amber));

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --shadow-glow: 0 20px 60px -20px rgba(103, 82, 224, 0.55);
  --container: 1160px;

  --font: "Josefin Sans", "Segoe UI", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-weight: 600;
  letter-spacing: .3px;
}

p {
  margin: 0 0 1em;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 12px;
}

.section-head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.section-head p {
  color: var(--text-muted);
  font-size: 1.05rem;
}

section {
  padding: 96px 0;
}

/* -------------------------------------------------------------------- */
/* Buttons                                                               */
/* -------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: .98rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
  box-shadow: 0 24px 70px -18px rgba(202, 39, 208, 0.6);
}

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--purple);
  background: var(--purple-soft);
}

.btn-block {
  width: 100%;
}

/* -------------------------------------------------------------------- */
/* Navbar                                                                */
/* -------------------------------------------------------------------- */

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
}

/* El fondo + desenfoque van en un pseudo-elemento separado del elemento
   sticky: Chrome en Android tiene un bug conocido donde combinar
   position:sticky y backdrop-filter en el MISMO elemento deja un hueco /
   artefacto visual por encima tras animar la barra de direcciones. */
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(20, 20, 20, 0.75);
  backdrop-filter: blur(12px);
}

.navbar .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .5px;
}

.brand-logo {
  height: 40px;
  width: auto;
}

.navbar .brand-logo {
  height: 52px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-links a:not(.btn) {
  color: var(--text-muted);
  font-weight: 500;
  transition: color .15s ease;
}

.nav-links a:not(.btn):hover {
  color: var(--text);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.3rem;
}

/* -------------------------------------------------------------------- */
/* Hero                                                                  */
/* -------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 96px 0 60px;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 620px;
  background:
    radial-gradient(420px 420px at 15% 20%, rgba(103, 82, 224, .35), transparent 70%),
    radial-gradient(380px 380px at 85% 10%, rgba(202, 39, 208, .25), transparent 70%),
    radial-gradient(320px 320px at 60% 60%, rgba(255, 191, 0, .12), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
}

.hero-content h1 {
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1.12;
}

.hero-content h1 .highlight {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-content p {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 480px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.hero-note {
  margin-top: 18px;
  font-size: .88rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-note .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(49, 175, 112, .18);
}

/* Phone mockup made entirely of CSS/HTML, no external screenshots needed */
.phone-mock {
  position: relative;
  margin: 0 auto;
  width: 300px;
  height: 610px;
  border-radius: 44px;
  padding: 14px;
  background: linear-gradient(160deg, #24243d, #17172a);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-glow);
}

.phone-mock::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 20px;
  background: #0c0c14;
  border-radius: var(--radius-full);
  z-index: 2;
}

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  background: var(--bg-alt);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.phone-screen .chat-header {
  padding: 26px 18px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.phone-screen .chat-header .avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gradient-brand);
  flex-shrink: 0;
}

.phone-screen .chat-header strong {
  font-size: .92rem;
}

.phone-screen .chat-header small {
  display: block;
  color: var(--green);
  font-size: .72rem;
}

.chat-body {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* -------------------------------------------------------------------- */
/* Mock chat animation (phone hero visual)                              */
/* Adapted from https://codepen.io/DanielProl/pen/wvGdKQe — endless      */
/* skeleton-style chat lines, scaled down to fit the phone screen and    */
/* recolored to the brand palette instead of the original rainbow hues.  */
/* See js/mock-chat.js for the generator logic.                          */
/* -------------------------------------------------------------------- */

.mc-chat {
  position: absolute;
  left: 16px;
  right: -44px; /* 80px más ancho: extiende el borde derecho del bloque */
  top: 16px;
  bottom: 16px;
  /* padding-left grande: desplaza el bloque entero de burbujas (fondo
     incluido) hacia la derecha, no solo el contenido dentro de la caja. */
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}

.mc-line-container {
  overflow: hidden;
  border-radius: 10px;
  max-height: 0;
  opacity: 0;
  transform: translateX(-40px) scale(.85);
  transition: margin-top .2s, max-height .4s, opacity .15s, transform .25s;
  transition-timing-function: ease-out;
}

.mc-line-container:not(:first-child) {
  margin-top: 8px;
}

.mc-line {
  padding: 8px;
  background: var(--surface-2);
}

.mc-inner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.mc-avatar {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
}

.mc-body {
  flex: 1;
  min-width: 0;
}

.mc-name,
.mc-text {
  height: 7px;
  border-radius: 4px;
  background: var(--border);
}

.mc-name {
  margin-bottom: 6px;
  max-width: 55%;
}

.mc-text:not(:last-child) {
  margin-bottom: 5px;
}

.mc-avatar,
.mc-name,
.mc-text {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s, transform .2s;
}

.chat-input {
  margin: 12px 16px 18px;
  height: 42px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 8px 0 16px;
  gap: 8px;
  color: var(--text-muted);
  font-size: .78rem;
}

.chat-input .send {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--gradient-brand);
  flex-shrink: 0;
}

.floating-chip {
  position: absolute;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .6);
  z-index: 3;
}

.floating-chip.chip-a { top: 18%; left: -34px; color: var(--amber); }
.floating-chip.chip-b { bottom: 14%; right: -30px; color: var(--green); }
.floating-chip.chip-c { top: 65%; left: -34px; transform: translateY(-50%); color: var(--purple); }
.floating-chip.chip-d { top: 38%; right: -30px; color: var(--magenta); }

.floating-chip .dot-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* -------------------------------------------------------------------- */
/* Stats                                                                 */
/* -------------------------------------------------------------------- */

.stats {
  padding: 48px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.stats .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

.stat h3 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 4px;
}

.stat p {
  margin: 0;
  color: var(--text-muted);
  font-size: .92rem;
}

.stat:nth-child(1) h3 { color: var(--purple); }
.stat:nth-child(2) h3 { color: var(--amber); }
.stat:nth-child(3) h3 { color: var(--green); }
.stat:nth-child(4) h3 { color: var(--magenta); }

/* -------------------------------------------------------------------- */
/* Features                                                              */
/* -------------------------------------------------------------------- */

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  padding: 32px 26px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform .2s ease, border-color .2s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  border-color: var(--card-accent, var(--purple));
}

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 20px;
  background: color-mix(in srgb, var(--card-accent, var(--purple)) 18%, transparent);
  color: var(--card-accent, var(--purple));
}

.feature-card h3 {
  font-size: 1.15rem;
}

.feature-card p {
  color: var(--text-muted);
  font-size: .95rem;
  margin: 0;
}

/* -------------------------------------------------------------------- */
/* How it works                                                         */
/* -------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 32px 24px 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -18px;
  left: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .95rem;
}

.step h3 {
  margin-top: 8px;
  font-size: 1.1rem;
}

.step p {
  color: var(--text-muted);
  margin: 0;
  font-size: .94rem;
}

/* -------------------------------------------------------------------- */
/* Testimonials                                                         */
/* -------------------------------------------------------------------- */

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonial-card {
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.testimonial-card .stars {
  color: var(--amber);
  letter-spacing: 2px;
  margin-bottom: 12px;
  font-size: .9rem;
}

.testimonial-card p {
  color: var(--text-muted);
  font-size: .95rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.testimonial-author .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-brand);
  flex-shrink: 0;
}

.testimonial-author strong {
  display: block;
  font-size: .92rem;
}

.testimonial-author span {
  display: block;
  font-size: .8rem;
  color: var(--text-muted);
}

/* -------------------------------------------------------------------- */
/* CTA / Download                                                       */
/* -------------------------------------------------------------------- */

.cta {
  padding: 96px 0;
}

.cta-box {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 64px 40px;
  text-align: center;
  background: var(--gradient-brand);
}

.cta-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(300px 200px at 10% 20%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(260px 200px at 90% 80%, rgba(255,255,255,.14), transparent 60%);
}

.cta-box * {
  position: relative;
  z-index: 1;
}

.cta-box h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: #fff;
}

.cta-box p {
  color: rgba(255,255,255,.85);
  max-width: 480px;
  margin: 0 auto 28px;
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cta .btn-primary {
  background: #fff;
  color: var(--purple);
  box-shadow: none;
}

.cta .btn-ghost {
  border-color: rgba(255,255,255,.5);
  color: #fff;
}

.cta .btn-ghost:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
}

/* -------------------------------------------------------------------- */
/* Footer                                                                */
/* -------------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 48px;
}

.footer-brand p {
  color: var(--text-muted);
  font-size: .92rem;
  max-width: 280px;
}

.footer-col h4 {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col ul a {
  color: var(--text);
  font-size: .92rem;
  opacity: .85;
  transition: opacity .15s ease, color .15s ease;
}

.footer-col ul a:hover {
  opacity: 1;
  color: var(--purple);
}

.social-icons {
  display: flex;
  gap: 12px;
}

.social-icons a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  transition: border-color .15s ease, color .15s ease;
}

.social-icons a:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.footer-bottom {
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .85rem;
  color: var(--text-muted);
}

.footer-bottom a {
  color: var(--text-muted);
}

.footer-bottom a:hover {
  color: var(--text);
}

/* -------------------------------------------------------------------- */
/* Scroll reveal                                                        */
/* -------------------------------------------------------------------- */

/* Only hide [data-reveal] content when JS actually runs (html.js, set by an
   inline script in <head>). Without JS the content stays visible — no
   animation, but nothing is ever permanently hidden. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------------------- */
/* Cookie banner                                                        */
/* -------------------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  max-width: 620px;
  margin: 0 auto;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px -16px rgba(0,0,0,.6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  transform: translateY(140%);
  transition: transform .4s ease;
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

.cookie-banner p {
  margin: 0;
  font-size: .86rem;
  color: var(--text-muted);
  flex: 1 1 260px;
}

.cookie-banner p a {
  color: var(--purple);
  text-decoration: underline;
}

.cookie-actions {
  display: flex;
  gap: 10px;
}

.cookie-actions .btn {
  padding: 10px 18px;
  font-size: .86rem;
}

/* -------------------------------------------------------------------- */
/* Legal pages (privacidad.html / terminos.html)                        */
/* -------------------------------------------------------------------- */

.legal-hero {
  padding: 70px 0 20px;
  border-bottom: 1px solid var(--border);
}

.legal-hero .eyebrow {
  color: var(--purple);
}

.legal-hero p {
  color: var(--text-muted);
}

.legal-content {
  padding: 56px 0 96px;
}

.legal-content .container {
  max-width: 820px;
}

.legal-content h2 {
  font-size: 1.4rem;
  margin-top: 2.4em;
  padding-top: .2em;
  color: var(--text);
}

.legal-content h2:first-of-type {
  margin-top: 0;
}

.legal-content h3 {
  font-size: 1.1rem;
  margin-top: 1.6em;
  color: var(--amber);
}

.legal-content p,
.legal-content li {
  color: var(--text-muted);
  font-size: .98rem;
}

.legal-content ul,
.legal-content ol {
  margin: 0 0 1em;
  padding-left: 1.3em;
}

.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }

.legal-content li {
  margin-bottom: .5em;
}

.legal-content strong {
  color: var(--text);
}

.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0 2em;
  font-size: .92rem;
}

.legal-content th,
.legal-content td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
  color: var(--text-muted);
  vertical-align: top;
}

.legal-content th {
  color: var(--text);
  background: var(--surface);
}

.legal-toc {
  padding: 20px 24px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 40px;
}

.legal-toc h4 {
  margin: 0 0 12px;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.legal-toc ol {
  columns: 2;
  padding-left: 1.2em;
}

.legal-toc a {
  color: var(--text);
  font-size: .92rem;
}

.legal-toc a:hover {
  color: var(--purple);
}

.placeholder-notice {
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 191, 0, .1);
  border: 1px solid rgba(255, 191, 0, .35);
  color: var(--amber);
  font-size: .9rem;
  margin-bottom: 40px;
}

/* -------------------------------------------------------------------- */
/* Responsive                                                           */
/* -------------------------------------------------------------------- */

@media (max-width: 960px) {
  .hero .container {
    grid-template-columns: 1fr;
  }
  .hero-content {
    text-align: center;
  }
  .hero-content p {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-actions {
    justify-content: center;
  }
  .hero-note {
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-note .dot {
    margin-top: 6px;
    flex-shrink: 0;
  }
  .phone-mock {
    margin-top: 32px;
  }
  .features-grid,
  .steps,
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .stats .container {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
  }
}

@media (max-width: 720px) {
  .nav-links {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;
    /* -130% es relativo a la altura del propio panel; con pocos enlaces
       esa altura es pequeña y el borde inferior se queda asomando por
       encima del navbar en vez de salir del todo de la pantalla. Un
       offset fijo adicional garantiza que quede fuera siempre,
       independientemente de cuánto contenido tenga el menú. */
    transform: translateY(calc(-100% - 100px));
    transition: transform .3s ease;
  }
  .nav-links.is-open {
    transform: translateY(0);
  }
  .nav-toggle {
    display: flex;
  }
  .nav-actions .btn-ghost {
    display: none;
  }
  .features-grid,
  .steps,
  .testimonials-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .legal-toc ol {
    columns: 1;
  }
  section {
    padding: 64px 0;
  }
}

/* -------------------------------------------------------------------- */
/* Datos identificativos ofuscados (Aviso Legal) — clic para revelar     */
/* -------------------------------------------------------------------- */

.reveal-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.reveal-field .reveal-mask {
  letter-spacing: 1px;
}

/* El ancho de columnas de esta tabla no debe depender del contenido:
   si no, al revelar el dato real (más ancho que la máscara de puntos)
   la columna se ensancha y la tabla "salta". table-layout: fixed hace
   que el ancho lo decida solo la 1ª fila (ver <colgroup>), no el texto. */
.legal-content table.id-table {
  table-layout: fixed;
}

.legal-content table.id-table col.id-col-label {
  width: 150px;
}

@media (max-width: 720px) {
  /* En móvil no hay sitio para 2 columnas lado a lado sin que el valor
     (p.ej. el nombre completo) se quede sin ancho y salte de línea. Se
     apila etiqueta encima y valor debajo, usando el ancho completo. */
  .legal-content table.id-table,
  .legal-content table.id-table tbody,
  .legal-content table.id-table tr,
  .legal-content table.id-table th,
  .legal-content table.id-table td {
    display: block;
    width: 100%;
  }
  .legal-content table.id-table tr {
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .legal-content table.id-table th {
    border: none;
    padding: 10px 12px 2px;
    font-size: .8rem;
    font-weight: 600;
    opacity: .7;
  }
  .legal-content table.id-table td {
    border: none;
    padding: 0 12px 10px;
  }
}

.reveal-field .reveal-eye {
  flex-shrink: 0;
  opacity: .45;
  transition: opacity 120ms;
}

.reveal-field:hover .reveal-eye {
  opacity: 1;
}

.reveal-field.revealed .reveal-eye {
  opacity: .25;
}