/* ════════════════════════════════════════════════════════════════
   COMO EN CASA · Páginas de texto
   (documentos legales, sobre nosotros, preguntas frecuentes, 404)

   Estas páginas son documentos para leer, no piezas de marketing: no
   necesitan el CSS de la portada ni del marketplace. Aquí solo están
   los tokens de marca y lo necesario para que un texto largo se lea
   cómodo.
   ════════════════════════════════════════════════════════════════ */

:root{
  --ff-display:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --ff-ui:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;

  --dorado:#c9a84c; --dorado-claro:#e2c47a; --dorado-oscuro:#9e7a2e;
  --negro:#070706; --negro-suave:#0e0e0d; --negro-card:#121211; --negro-elev:#191917;
  --blanco:#f5f0e8; --blanco-suave:#e8e0d0;
  --gris:#a8a49c; --gris-fuerte:#c4bfb5; --gris-tenue:#8d8981;
  --gris-linea:#26251f; --gris-linea-fuerte:#35342c;

  --r-sm:6px; --r-md:12px; --r-pill:999px;
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--negro);
  color:var(--gris-fuerte);
  font-family:var(--ff-ui);
  font-weight:400;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ── Cabecera ── */
.doc-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.1rem 6%;
  background:rgba(7,7,6,0.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--gris-linea);
}
.doc-logo{
  font-family:var(--ff-display); font-size:1.15rem; font-weight:700;
  color:var(--dorado); letter-spacing:0.03em; text-decoration:none;
  line-height:1.1;
}
.doc-logo span{
  display:block; font-size:0.54rem; letter-spacing:0.3em;
  text-transform:uppercase; color:var(--gris-tenue);
  font-weight:600; margin-top:3px;
}
.doc-volver{
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.6rem 1.2rem; border-radius:var(--r-pill);
  border:1px solid var(--gris-linea-fuerte);
  color:var(--blanco); text-decoration:none;
  font-size:0.74rem; font-weight:600; letter-spacing:0.06em;
  white-space:nowrap;
  transition:border-color .15s ease, color .15s ease;
}
.doc-volver:hover{border-color:var(--dorado); color:var(--dorado);}

/* ── Cuerpo del documento ──
   65 caracteres de ancho es lo que mejor se lee en textos largos. */
.doc{
  max-width:68ch;
  margin:0 auto;
  padding:3.5rem 6% 5rem;
}
.doc-eyebrow{
  font-size:0.66rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--dorado); font-weight:700; margin-bottom:1rem;
}
.doc h1{
  font-family:var(--ff-display);
  font-size:clamp(1.9rem,5vw,2.9rem); font-weight:700; line-height:1.12;
  color:var(--blanco); letter-spacing:-0.02em; margin-bottom:0.9rem;
}
.doc-fecha{
  font-size:0.76rem; color:var(--gris-tenue);
  padding-bottom:1.6rem; margin-bottom:2.4rem;
  border-bottom:1px solid var(--gris-linea);
}
.doc h2{
  font-family:var(--ff-display);
  font-size:1.32rem; font-weight:700; line-height:1.3;
  color:var(--blanco); margin:2.8rem 0 0.9rem;
  scroll-margin-top:5rem;
}
.doc h3{
  font-size:1rem; font-weight:700; color:var(--blanco-suave);
  margin:1.8rem 0 0.6rem;
}
.doc p{margin-bottom:1.1rem; font-size:0.92rem;}
.doc ul,.doc ol{margin:0 0 1.2rem 1.3rem;}
.doc li{margin-bottom:0.55rem; font-size:0.92rem;}
.doc strong{color:var(--blanco);}
.doc a{color:var(--dorado); text-decoration:underline; text-underline-offset:3px;}
.doc a:hover{color:var(--dorado-claro);}

/* ── Tablas ── */
.doc-tabla-wrap{overflow-x:auto; margin-bottom:1.6rem;}
.doc table{
  width:100%; border-collapse:collapse;
  font-size:0.82rem; min-width:420px;
}
.doc th,.doc td{
  text-align:left; padding:0.7rem 0.9rem;
  border-bottom:1px solid var(--gris-linea);
  vertical-align:top;
}
.doc th{
  color:var(--dorado); font-weight:700;
  font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  border-bottom-color:var(--gris-linea-fuerte);
}

/* ── Recuadro de aviso ── */
.doc-nota{
  background:var(--negro-card);
  border:1px solid var(--gris-linea-fuerte);
  border-left:3px solid var(--dorado);
  border-radius:var(--r-sm);
  padding:1.1rem 1.3rem;
  margin:1.8rem 0;
  font-size:0.86rem;
}
.doc-nota p:last-child{margin-bottom:0;}

/* Huecos por rellenar antes de publicar: se ven a propósito.
   Sin `nowrap`: algunos son frases largas y en móvil se salían del
   ancho de la pantalla. `box-decoration-break` mantiene el borde
   correcto cuando el texto ocupa varias líneas. */
.doc-pendiente{
  background:rgba(201,168,76,0.14);
  border:1px dashed var(--dorado-oscuro);
  border-radius:3px;
  padding:0.1rem 0.4rem;
  color:var(--dorado-claro);
  font-size:0.86em; font-weight:600;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* ── Índice de contenidos ── */
.doc-indice{
  background:var(--negro-card);
  border:1px solid var(--gris-linea);
  border-radius:var(--r-md);
  padding:1.3rem 1.5rem;
  margin-bottom:2.6rem;
}
.doc-indice h2{
  margin:0 0 0.8rem; font-size:0.7rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--gris-tenue); font-family:var(--ff-ui);
}
.doc-indice ol{margin:0 0 0 1.1rem;}
.doc-indice li{margin-bottom:0.35rem; font-size:0.85rem;}

/* ── Preguntas frecuentes ── */
.faq-grupo{margin-bottom:2.6rem;}
.faq-item{
  border-bottom:1px solid var(--gris-linea);
}
.faq-item summary{
  cursor:pointer; list-style:none;
  padding:1.1rem 2rem 1.1rem 0; position:relative;
  font-weight:600; color:var(--blanco); font-size:0.94rem;
  transition:color .15s ease;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--dorado);}
.faq-item summary::after{
  content:'+'; position:absolute; right:0; top:50%;
  transform:translateY(-50%);
  color:var(--dorado); font-size:1.3rem; font-weight:400; line-height:1;
}
.faq-item[open] summary::after{content:'−';}
.faq-item[open] summary{color:var(--dorado);}
.faq-respuesta{padding:0 0 1.2rem;}
.faq-respuesta p:last-child{margin-bottom:0;}

/* ── Pie ── */
.doc-pie{
  border-top:1px solid var(--gris-linea);
  padding:2.4rem 6% 3rem;
  text-align:center;
}
.doc-pie-logo{
  font-family:var(--ff-display); font-size:1.1rem; font-weight:700;
  color:var(--dorado); margin-bottom:0.5rem;
}
.doc-pie p{font-size:0.72rem; color:var(--gris-tenue); margin-bottom:1rem;}
.doc-pie ul{
  list-style:none; display:flex; flex-wrap:wrap;
  gap:0.5rem 1.6rem; justify-content:center; margin:0;
}
.doc-pie a{
  color:var(--gris); text-decoration:none; font-size:0.72rem;
  transition:color .15s ease;
}
.doc-pie a:hover{color:var(--dorado);}

/* ── Página 404 ── */
.err{
  min-height:72vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:3rem 6%;
}
.err-num{
  font-family:var(--ff-display); font-weight:800;
  font-size:clamp(4.5rem,17vw,9rem); line-height:1;
  color:var(--dorado); letter-spacing:-0.03em;
}
.err h1{
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(1.4rem,4.5vw,2.1rem); color:var(--blanco);
  margin:0.8rem 0 0.9rem;
}
.err p{max-width:46ch; margin-bottom:2rem; font-size:0.92rem;}
.err-acciones{display:flex; gap:0.8rem; flex-wrap:wrap; justify-content:center;}
.btn-oro,.btn-linea{
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.95rem 2rem; border-radius:var(--r-pill);
  font-size:0.76rem; font-weight:700; letter-spacing:0.08em;
  text-decoration:none; cursor:pointer;
  transition:background .15s ease, border-color .15s ease,
             color .15s ease, transform .15s ease;
}
.btn-oro{background:var(--dorado); color:#1a1508; border:none;}
.btn-oro:hover{background:var(--dorado-claro); transform:translateY(-2px);}
.btn-linea{
  border:1px solid var(--gris-linea-fuerte); color:var(--blanco);
  background:rgba(255,255,255,0.03);
}
.btn-linea:hover{border-color:var(--dorado); color:var(--dorado); transform:translateY(-2px);}

/* ── Accesibilidad ── */
:focus-visible{outline:2px solid var(--dorado); outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
  .btn-oro:hover,.btn-linea:hover{transform:none;}
}

@media(max-width:600px){
  .doc{padding:2.4rem 6% 3.5rem;}
  .doc-nav{padding:0.9rem 6%;}
  .doc-volver{padding:0.5rem 0.9rem; font-size:0.68rem;}
}