/* ==========================================================================
   Hydrowick® — Tecnología aplicada a las telas
   Hoja de estilos principal
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Superficies e ink */
  --surface-0: #ffffff;
  --surface-1: #f6f7f9;
  --surface-2: #eceff3;
  --surface-inv: #0b1620;
  --border: #dde2e9;
  --border-strong: #c3ccd7;

  --text-primary: #0d1720;
  --text-secondary: #4a5764;
  /* Dos puntos más oscuro que antes (#78838f). No alcanza con que pase sobre
     blanco: este gris también se usa sobre las superficies grises del sitio,
     y ahí el fondo sube. Éste pasa el mínimo (4.5) contra la más clara. */
  --text-muted: #646d78;

  /* El celeste de marca sirve para pintar, pero como LETRA sobre los grises
     claros se quedaba en 4.4. Éste es el mismo celeste un poco más hundido,
     para cuando el color va en el texto. */
  --brand-texto: #0b6a86;
  --text-on-inv: #f2f6fa;

  /* Marca */
  --brand: #0e7c9b;
  --brand-strong: #0a5f78;
  --brand-soft: #e2f2f7;

  /* Series de datos (paleta validada — ver README) */
  --series-1: #2a78d6;   /* Hydrowick® */
  --series-2: #eb6834;   /* Algodón */
  --series-3: #1baf7a;   /* Elastano (composición) */
  --series-1-soft: rgba(42, 120, 214, .14);
  --series-2-soft: rgba(235, 104, 52, .14);

  /* Grid y ejes: siempre recesivos */
  --grid: #e4e8ee;
  --axis: #c3ccd7;

  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --shadow-s: 0 1px 2px rgba(13, 23, 32, .06), 0 1px 3px rgba(13, 23, 32, .04);
  --shadow-m: 0 4px 12px rgba(13, 23, 32, .07), 0 12px 32px rgba(13, 23, 32, .06);

  --maxw: 1160px;
  --gutter: clamp(20px, 5vw, 48px);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-0: #0e1319;
    --surface-1: #151b23;
    --surface-2: #1c242e;
    --surface-inv: #060b10;
    --border: #26303b;
    --border-strong: #37434f;

    --text-primary: #f0f4f8;
    --text-secondary: #b3bfcb;
    --text-muted: #8493a1;
    --text-on-inv: #f0f4f8;

    --brand: #35b3d3;
    --brand-strong: #6fd0e8;
    --brand-soft: #10303c;

    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-1-soft: rgba(57, 135, 229, .18);
    --series-2-soft: rgba(217, 89, 38, .18);

    --grid: #232d38;
    --axis: #3a4652;

    --shadow-s: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-m: 0 4px 14px rgba(0, 0, 0, .45), 0 16px 40px rgba(0, 0, 0, .35);
  }
}

:root[data-theme="dark"] {
  --surface-0: #0e1319;
  --surface-1: #151b23;
  --surface-2: #1c242e;
  --surface-inv: #060b10;
  --border: #26303b;
  --border-strong: #37434f;

  --text-primary: #f0f4f8;
  --text-secondary: #b3bfcb;
  --text-muted: #8493a1;
  --text-on-inv: #f0f4f8;

  --brand: #35b3d3;
  --brand-strong: #6fd0e8;
  --brand-soft: #10303c;

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-1-soft: rgba(57, 135, 229, .18);
  --series-2-soft: rgba(217, 89, 38, .18);

  --grid: #232d38;
  --axis: #3a4652;

  --shadow-s: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-m: 0 4px 14px rgba(0, 0, 0, .45), 0 16px 40px rgba(0, 0, 0, .35);
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.12rem, 1.9vw, 1.35rem); }
h4 { font-size: 1rem; }
p  { margin: 0 0 1em; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------- layout -- */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

section { padding-block: clamp(56px, 9vw, 104px); }
section.tight { padding-block: clamp(40px, 6vw, 72px); }
.alt { background: var(--surface-1); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brand-texto); margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
}

.lead { font-size: clamp(1.02rem, 1.6vw, 1.17rem); color: var(--text-secondary); max-width: 64ch; }
.section-head { max-width: 72ch; margin-bottom: clamp(32px, 5vw, 52px); }

.grid { display: grid; gap: clamp(18px, 2.6vw, 28px); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ------------------------------------------------------------ header -- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--surface-0) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.site-header.is-stuck { border-bottom-color: var(--border); box-shadow: var(--shadow-s); }
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 66px; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; color: var(--text-primary); }
.brand:hover { text-decoration: none; }
.brand svg { flex: none; }
.brand small { display: block; font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 8px 12px; border-radius: var(--radius-s);
  font-size: .9rem; font-weight: 500; color: var(--text-secondary);
}
.nav a:hover { background: var(--surface-2); color: var(--text-primary); text-decoration: none; }

/* El botón de la tienda vive adentro de .nav, y ".nav a" (que pesa más que
   ".btn-primary") le pisaba el blanco con el gris de los enlaces: quedaba
   gris sobre celeste, con 1.54 de contraste. Prácticamente no se leía, y
   estaba así en el encabezado de todas las páginas. */
.nav a.btn-primary { color: #fff; }
.nav a.btn-primary:hover { color: #fff; }
.nav a.btn-ghost { color: var(--text-primary); }

.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--surface-0); color: var(--text-secondary); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-grid; margin-left: auto; }
  .nav {
    position: fixed; inset: 66px 0 auto; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface-0); border-bottom: 1px solid var(--border);
    padding: 10px var(--gutter) 20px; box-shadow: var(--shadow-m);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 4px; border-bottom: 1px solid var(--border); }
  .nav .btn { margin-top: 14px; justify-content: center; }
}

/* ------------------------------------------------------------ botones -- */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: 999px;
  font-size: .94rem; font-weight: 650; line-height: 1;
  border: 1px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-s); }
.btn-primary:hover { background: var(--brand-strong); box-shadow: var(--shadow-m); }
.btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 9px 16px; font-size: .85rem; }

/* -------------------------------------------------------------- hero -- */

.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(56px, 8vw, 96px) clamp(56px, 8vw, 100px);
  background:
    radial-gradient(1100px 520px at 78% -12%, var(--brand-soft), transparent 62%),
    var(--surface-0);
}
.hero-grid { display: grid; gap: clamp(32px, 5vw, 56px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }

.hero h1 .hl {
  background: linear-gradient(96deg, var(--brand) 10%, var(--series-1) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lead { font-size: clamp(1.05rem, 1.8vw, 1.22rem); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--border);
}
.hero-stats .n {
  display: block; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800;
  letter-spacing: -.03em; color: var(--text-primary); line-height: 1.1;
}
.hero-stats .l { font-size: .78rem; color: var(--text-muted); line-height: 1.35; display: block; margin-top: 4px; }

.hero-visual {
  position: relative; border-radius: var(--radius-l);
  background: var(--surface-1); border: 1px solid var(--border);
  padding: 18px; box-shadow: var(--shadow-m);
}
.hero-visual figcaption { font-size: .78rem; line-height: 1.5; color: var(--text-muted); margin-top: 14px; padding-inline: 4px; }

/* --------------------------------------------------------------- card -- */

.card {
  background: var(--surface-0); border: 1px solid var(--border);
  border-radius: var(--radius-m); padding: clamp(20px, 2.6vw, 28px);
  box-shadow: var(--shadow-s);
}
.alt .card { background: var(--surface-0); }
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.card .ico {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px;
  border-radius: 11px; background: var(--brand-soft); color: var(--brand);
}

/* ------------------------------------------------------------- pasos -- */

.steps { counter-reset: step; display: grid; gap: 14px; }
.step {
  display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start;
  padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-m);
  background: var(--surface-0);
}
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand); color: #fff; font-weight: 800; font-size: .9rem; letter-spacing: -.02em;
}
.step h3 { margin: 8px 0 4px; font-size: 1.06rem; }
.step p { margin: 0; color: var(--text-secondary); font-size: .95rem; }

/* ------------------------------------------------------------ figuras -- */

.figure {
  background: var(--surface-0); border: 1px solid var(--border);
  border-radius: var(--radius-m); padding: clamp(18px, 2.4vw, 26px); margin: 0;
  box-shadow: var(--shadow-s);
}
.figure .fig-title { font-size: 1.02rem; font-weight: 700; margin: 0 0 2px; letter-spacing: -.015em; }
.figure .fig-sub { font-size: .84rem; color: var(--text-secondary); margin: 0 0 18px; }
.figure figcaption { font-size: .8rem; color: var(--text-muted); margin-top: 16px; line-height: 1.5; }
.figure .scroller { overflow-x: auto; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 14px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--text-secondary); }
.legend i { width: 11px; height: 11px; border-radius: 3px; flex: none; }

.tag-note {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); background: var(--surface-2);
  border-radius: 999px; padding: 4px 10px; margin-bottom: 14px;
}

/* Tabla de datos alternativa (accesibilidad) */
.data-toggle {
  background: none; border: 0; padding: 0; margin-top: 14px; cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--brand);
  text-decoration: underline; text-underline-offset: 3px;
}
table.data {
  width: 100%; border-collapse: collapse; margin-top: 14px; font-size: .85rem;
}
table.data caption { text-align: left; font-size: .8rem; color: var(--text-muted); padding-bottom: 8px; }
table.data th, table.data td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); }
table.data th { font-weight: 650; color: var(--text-secondary); }
table.data td { font-variant-numeric: tabular-nums; }

/* Tooltip de los gráficos */
.viz-tip {
  position: fixed; z-index: 300; pointer-events: none; opacity: 0;
  transform: translate(-50%, -118%); transition: opacity .12s;
  background: var(--surface-inv); color: var(--text-on-inv);
  border-radius: 8px; padding: 8px 11px; font-size: .8rem; line-height: 1.45;
  box-shadow: var(--shadow-m); max-width: 240px;
}
.viz-tip.is-on { opacity: 1; }
.viz-tip b { display: block; font-size: .82rem; margin-bottom: 2px; }
.viz-tip .k { color: #9fb3c4; }

.hit { fill: transparent; cursor: pointer; }
.hit:hover + .mark, .mark.is-hot { filter: brightness(1.08); }

/* --------------------------------------------------------- comparativa -- */

.vs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.vs-col { border: 1px solid var(--border); border-radius: var(--radius-m); padding: 22px; background: var(--surface-0); }
.vs-col.win { border-color: color-mix(in srgb, var(--series-1) 45%, var(--border)); }
.vs-col h3 { display: flex; align-items: center; gap: 9px; font-size: 1.02rem; }
.vs-col h3 i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.vs-col ul { list-style: none; padding: 0; margin: 14px 0 0; }
.vs-col li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: .92rem; color: var(--text-secondary); }
.vs-col li:first-child { border-top: 0; }
.vs-col li svg { flex: none; margin-top: 3px; }

/* --------------------------------------------------------- beneficios -- */

.benefit { display: flex; gap: 14px; align-items: flex-start; }
.benefit .ico {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 10px; background: var(--brand-soft); color: var(--brand);
}
.benefit h3 { font-size: 1rem; margin-bottom: .25em; }
.benefit p { font-size: .92rem; color: var(--text-secondary); margin: 0; }

/* ------------------------------------------------------------ deportes -- */

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; font-size: .9rem; font-weight: 550;
  background: var(--surface-0); border: 1px solid var(--border); color: var(--text-secondary);
}

/* ------------------------------------------------------------ productos -- */

.prod-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }

.prod {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius-m);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.prod:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); border-color: var(--border-strong); text-decoration: none; }

/* Slot de foto: si la imagen no existe se muestra el marcador de reemplazo */
.photo {
  position: relative; aspect-ratio: 4 / 5; background: var(--surface-2); overflow: hidden;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo .ph-mark {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; padding: 16px; color: var(--text-muted);
  background:
    repeating-linear-gradient(45deg, transparent 0 9px, color-mix(in srgb, var(--border) 60%, transparent) 9px 10px),
    var(--surface-2);
}
.photo .ph-mark code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem;
  background: var(--surface-0); border: 1px solid var(--border);
  border-radius: 5px; padding: 3px 7px; word-break: break-all;
}
/* opacity, no display:none: la imagen tiene que poder cargar (lazy load)
   para que el marcador desaparezca solo cuando el archivo exista. */
.photo.is-empty img { opacity: 0; }
.photo.is-empty .ph-mark { display: flex; }

.prod-body { padding: 15px 17px 18px; display: flex; flex-direction: column; flex: 1; }
.prod .cat { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.prod h3 { font-size: .97rem; margin: 6px 0 8px; color: var(--text-primary); }
.prod p { font-size: .84rem; color: var(--text-secondary); margin: 0 0 14px; }
.prod .go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: .84rem; font-weight: 650; color: var(--brand);
}
.prod:hover .go svg { transform: translateX(3px); }
.prod .go svg { transition: transform .18s; }

.badge-hw {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  background: color-mix(in srgb, var(--surface-inv) 82%, transparent); color: #fff;
  font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px; backdrop-filter: blur(6px);
}

/* ------------------------------------------------------------ cuidados -- */

.care { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.care-item {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface-0);
}
.care-item svg { flex: none; margin-top: 2px; }
.care-item strong { display: block; font-size: .93rem; }
.care-item span { font-size: .85rem; color: var(--text-secondary); }
.care-yes svg { color: var(--series-1); }
.care-no svg { color: var(--series-2); }

/* ----------------------------------------------------------------- faq -- */

.faq { max-width: 78ch; }
.faq details {
  border: 1px solid var(--border); border-radius: var(--radius-m);
  background: var(--surface-0); margin-bottom: 10px;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 17px 20px;
  font-weight: 650; font-size: 1rem; display: flex; align-items: center; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; font-size: 1.4rem; font-weight: 400;
  color: var(--brand); line-height: 1; transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-body { padding: 0 20px 18px; color: var(--text-secondary); font-size: .95rem; }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ cta -- */

.cta-band {
  background: linear-gradient(135deg, var(--brand-strong), var(--series-1));
  color: #fff; border-radius: var(--radius-l); padding: clamp(32px, 5vw, 56px); text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .9); max-width: 58ch; margin-inline: auto; }
.cta-band .btn-primary { background: #fff; color: var(--brand-strong); }
.cta-band .btn-primary:hover { background: #eef8fb; }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .5); }
.cta-band .btn-ghost:hover { background: rgba(255, 255, 255, .12); }

/* --------------------------------------------------------------- footer -- */

.site-footer {
  background: var(--surface-inv); color: var(--text-on-inv);
  padding-block: clamp(40px, 6vw, 64px) 28px; margin-top: 0;
}
.site-footer a { color: #a9d7e6; }
.site-footer .cols { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.site-footer h4 { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #7f93a3; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; font-size: .9rem; }
.site-footer .fine {
  margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .8rem; color: #8ba0b0; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between;
}

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

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .drop, .flow { animation: none !important; }
}

/* Gotas animadas del diagrama de transporte capilar */
@keyframes riseFade {
  0%   { opacity: 0; transform: translateY(0); }
  15%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-58px); }
}
.drop { animation: riseFade 3.4s linear infinite; }
@keyframes dashFlow { to { stroke-dashoffset: -120; } }
.flow { stroke-dasharray: 5 7; animation: dashFlow 2.6s linear infinite; }

@media print {
  .site-header, .cta-band, .nav-toggle { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   La palabra escondida
   ==========================================================================
   Cada juego esconde una, y no sirven para nada adentro del juego donde
   están: sirven en el Hydrogacha, en el pasillo de las nueve puertas. Cuando
   aparece, lo único que tiene que pasar es que la leas bien y la anotes, así
   que va grande, monoespaciada y separada del resto.
   ========================================================================== */
.palabra-secreta {
  /* block porque a veces va en un <p> y a veces en un <span> adentro de un
     párrafo, y en los dos casos tiene que quedar sola en su renglón */
  display: block;
  font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
  font-size: clamp(1.5rem, 6vw, 2.4rem) !important;
  letter-spacing: .26em; text-indent: .26em;
  font-weight: 700; line-height: 1.2;
  color: #e8c24a !important;
  margin: .7rem 0 !important;
}