/* ═══════════════════════════════════════════════════════════════
   PÁGINAS PÚBLICAS

   Lo que ve quien todavía no ha entrado: el landing y, cuando
   existan, privacidad, condiciones y precios.

   Deliberadamente separado de estilos.css, que es de la app. Una
   página de venta no debe arrastrar los estilos de un formulario
   de pañales, igual que no carga Supabase ni Chart.js.

   Los colores de marca vienen de marca.css, que se carga antes.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --papel:   #ffffff;
  --papel2:  #faf8fd;
  --tinta:   #1a1024;
  --tinta2:  #5f5870;
  --linea:   #e9e3f2;
  --sombra:  0 10px 30px rgba(76, 29, 149, .10);
  --r:       16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel:  #140e1f;
    --papel2: #1c1430;
    --tinta:  #f4f0fa;
    --tinta2: #a79fb8;
    --linea:  #342a4d;
    --sombra: 0 10px 30px rgba(0, 0, 0, .35);
  }
}

:root[data-theme="dark"] {
  --papel:  #140e1f;
  --papel2: #1c1430;
  --tinta:  #f4f0fa;
  --tinta2: #a79fb8;
  --linea:  #342a4d;
  --sombra: 0 10px 30px rgba(0, 0, 0, .35);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  background: var(--papel);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}

/* Gutter de 16 px en móvil: sin esto el texto toca el borde */
.contenedor { max-width: 940px; margin: 0 auto; padding: 0 16px; }

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

/* ═══════════════════════════════════════════
   CABECERA
   ═══════════════════════════════════════════ */
.cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
}

.cab .logo-txt { font-size: 1.1rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 0.95rem;
  font-weight: 620;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn-pri {
  background: var(--m-700);
  color: #fff;                    /* 7,1:1 sobre el 700 */
}
.btn-pri:hover { background: var(--m-800); }

.btn-sec {
  background: transparent;
  color: var(--marca);
  border-color: var(--linea);
}
.btn-sec:hover { border-color: var(--marca); }

.btn-grande { padding: 14px 28px; font-size: 1.02rem; }

/* En oscuro el 700 pierde fuelle como fondo: sube un paso */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-pri { background: var(--m-600); }
  :root:not([data-theme="light"]) .btn-pri:hover { background: var(--m-700); }
}
:root[data-theme="dark"] .btn-pri { background: var(--m-600); }
:root[data-theme="dark"] .btn-pri:hover { background: var(--m-700); }

/* ═══════════════════════════════════════════
   PORTADA
   ═══════════════════════════════════════════ */
.hero { text-align: center; padding: 42px 0 54px; }

.hero-logo {
  display: block;
  margin: 0 auto 22px;
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(109, 40, 217, .3);
}

.hero h1 {
  font-size: clamp(1.9rem, 6vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 720;
  margin-bottom: 14px;
}

.hero h1 em { font-style: normal; color: var(--marca); }

.hero p {
  font-size: clamp(1rem, 2.6vw, 1.14rem);
  color: var(--tinta2);
  max-width: 580px;
  margin: 0 auto 26px;
}

.hero-botones {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.aviso-obra {
  display: inline-block;
  margin-top: 26px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--marca-lavado);
  border: 1px solid var(--marca-borde);
  color: var(--tinta2);
  font-size: 0.84rem;
}

/* ═══════════════════════════════════════════
   LO QUE HACE
   ═══════════════════════════════════════════ */
.rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding-bottom: 54px;
}

@media (min-width: 680px) {
  .rejilla { grid-template-columns: repeat(2, 1fr); }
}

.ficha {
  background: var(--papel2);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 22px;
}

.ficha-icono {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 12px;
  display: block;
}

.ficha h2 {
  font-size: 1.04rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin-bottom: 7px;
}

.ficha p { font-size: 0.92rem; color: var(--tinta2); }

/* ═══════════════════════════════════════════
   PIE
   ═══════════════════════════════════════════ */
.pie {
  border-top: 1px solid var(--linea);
  padding: 26px 0 40px;
  font-size: 0.85rem;
  color: var(--tinta2);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
}

.pie-enlaces { display: flex; gap: 18px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════
   PÁGINA SIMPLE (404 y, más adelante, las legales)
   ═══════════════════════════════════════════ */
.simple { padding: 56px 0 70px; max-width: 680px; }

.simple h1 {
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}

.simple p { color: var(--tinta2); margin-bottom: 18px; }

/* ═══════════════════════════════════════════
   PÁGINAS LEGALES
   ═══════════════════════════════════════════ */
.legal { max-width: 720px; padding: 10px 0 60px; }

.legal h1 {
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  letter-spacing: -0.025em;
  margin-bottom: 6px;
}

.legal .actualizado {
  color: var(--tinta2);
  font-size: 0.85rem;
  margin-bottom: 30px;
}

.legal h2 {
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 32px 0 10px;
}

.legal p, .legal li, .legal dd { color: var(--tinta2); }
.legal p  { margin-bottom: 12px; }
.legal ul { margin: 0 0 12px 20px; }
.legal li { margin-bottom: 7px; }

.legal strong { color: var(--tinta); font-weight: 620; }

.legal dl { margin-bottom: 12px; }
.legal dt { font-weight: 620; color: var(--tinta); margin-top: 12px; }
.legal dd { margin-left: 0; }

/* El aviso de que esto es un borrador. Deliberadamente imposible de
   pasar por alto: un texto legal a medias que parezca definitivo es
   peor que no tener ninguno. */
.borrador {
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #7c2d12;
  border-radius: var(--r);
  padding: 15px 18px;
  margin-bottom: 30px;
  font-size: 0.88rem;
  line-height: 1.55;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .borrador {
    background: #2b1a0c; border-color: #7c4a1d; color: #fcd9b6;
  }
}
:root[data-theme="dark"] .borrador {
  background: #2b1a0c; border-color: #7c4a1d; color: #fcd9b6;
}

/* Los huecos sin rellenar, imposibles de confundir con texto real */
.pendiente {
  display: inline-block;
  background: var(--marca-lavado);
  border: 1px dashed var(--marca);
  color: var(--marca);
  border-radius: 7px;
  padding: 1px 8px;
  font-size: 0.86em;
  font-weight: 560;
}

.pendiente-nota { font-size: 0.86rem; }

/* El bloque de «esto no es un producto sanitario» */
.aviso-fuerte {
  background: var(--marca-lavado);
  border-left: 4px solid var(--marca);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 16px 18px;
  margin: 14px 0 18px;
}

.aviso-fuerte p:last-child { margin-bottom: 0; }

.pie-enlaces a { text-decoration: none; }
.pie-enlaces a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════
   DE DÓNDE SALE EL NOMBRE
   ═══════════════════════════════════════════ */
.historia {
  max-width: 620px;
  padding: 0 16px 56px;
  text-align: center;
}

.historia h2 {
  font-size: 1.12rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}

.historia p { color: var(--tinta2); font-size: 0.95rem; }