/*
 * docuprivado.es · estilos de la portada, las guías y las páginas de texto.
 *
 * Van aparte de styles.css porque las páginas de herramienta no los necesitan y
 * su primera carga tiene que quedar por debajo de 150 KB (docs/PROMPT_INICIAL.md
 * §13.5). Las páginas que lo necesitan enlazan este archivo después del común.
 */

/* 1. Portada */
.hero { max-width: var(--w-text); padding-top: 16px; }
.hero__lead {
  margin-top: 12px;
  font-size: 1.1rem;
  color: var(--c-muted);
}
.page--texto, .page--portada { padding-bottom: 8px; }
.page--texto .content, .page--texto .faq { max-width: var(--w-text); }

/* --- portada */
.hero__badges {
  list-style: none;
  padding: 0;
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  color: var(--c-muted);
  font-size: .9rem;
}
.hero__badges li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-surface);
}
.hero__badges li::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: var(--c-ok);
  clip-path: polygon(14% 47%, 0 61%, 40% 100%, 100% 22%, 85% 10%, 38% 72%);
}

.seccion-herramientas { margin-top: 40px; }
.tool-cards {
  list-style: none;
  padding: 0;
  margin-top: 16px;
  display: grid;
  gap: 16px;
}
.tool-cards__link {
  display: grid;
  gap: 8px;
  height: 100%;
  padding: 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
}
.tool-cards__link:hover { border-color: var(--c-primary); }
.tool-cards__link:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; }
.tool-cards__icon { color: var(--c-primary); }
.tool-cards__icon svg { width: 40px; height: 40px; }
.tool-cards__name { font-size: 1.25rem; font-weight: 600; }
.tool-cards__desc { color: var(--c-muted); }
.tool-cards__cta {
  margin-top: 6px;
  align-self: start;
  padding: 10px 18px;
  border-radius: var(--radius-btn);
  background: var(--c-action);
  color: var(--c-action-text);
  font-weight: 600;
}
.tool-cards__link:hover .tool-cards__cta { background: var(--c-action-hover); }

.pasos-confianza { margin-top: 48px; }
.pasos-confianza__lista {
  list-style: none;
  padding: 0;
  margin-top: 16px;
  display: grid;
  gap: 16px;
  counter-reset: paso;
}
.pasos-confianza__lista li {
  padding: 18px 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  background: var(--c-surface);
}
.pasos-confianza__lista h3 { font-size: 1.05rem; margin-bottom: 6px; }
.pasos-confianza__lista p { color: var(--c-muted); }
.pasos-confianza__enlace { margin-top: 14px; }

.seccion-guias { margin-top: 48px; }
.lista-guias { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 16px; }
.lista-guias + .actualizado { margin-top: 24px; }
.guia-tarjeta {
  padding: 18px 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  background: var(--c-surface);
}
.guia-tarjeta h2, .guia-tarjeta h3 { font-size: 1.1rem; margin: 0 0 6px; }
.guia-tarjeta p { color: var(--c-muted); }
.guia-tarjeta a { text-decoration: none; }
.guia-tarjeta a:hover { text-decoration: underline; }

/* --- guías y páginas de texto */
.guia-meta { color: var(--c-muted); font-size: .9rem; margin-top: 10px; }
.indice {
  max-width: var(--w-text);
  margin-top: 32px;
  padding: 16px 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  background: var(--c-surface);
}
.indice h2 { font-size: 1rem; margin-bottom: 6px; }
.indice ol { margin: 0; padding-left: 1.2em; }
.indice li + li { margin-top: 4px; }

.cta-herramienta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 20px 0;
  padding: 16px 18px;
  border: 1px solid var(--c-primary-soft);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--radius-card);
  background: var(--c-primary-soft);
}
.cta-herramienta span { color: var(--c-text); font-size: .95rem; }

.fuentes, .otras-guias { max-width: var(--w-text); margin-top: 40px; }
.fuentes h2, .otras-guias h2 { font-size: 1.15rem; margin-bottom: 8px; }
.fuentes ul, .otras-guias ul { padding-left: 1.2em; }
.fuentes li + li, .otras-guias li + li { margin-top: 6px; }
.fuentes { font-size: .95rem; color: var(--c-muted); }
.fuentes a { color: var(--c-text); }

kbd {
  padding: 1px 6px;
  border: 1px solid var(--c-border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--c-surface);
  font-size: .85em;
  font-family: inherit;
}

/* --- páginas legales */
.datos-legales { margin: 12px 0; }
.datos-legales dt { font-weight: 600; margin-top: 10px; }
.datos-legales dd { margin: 2px 0 0; padding-left: 0; }
.datos-legales .pendiente {
  display: inline-block;
  padding: 2px 10px;
  border: 1px dashed var(--c-warn);
  border-radius: 6px;
  background: var(--c-warn-soft);
  color: var(--c-warn);
  font-size: .9rem;
}
.cita-fuente {
  padding: 12px 16px;
  border-left: 4px solid var(--c-border-strong);
  background: var(--c-bg);
  font-style: italic;
}
.contacto-correo { margin: 8px 0 4px; }

.tabla-envoltorio { overflow-x: auto; margin: 16px 0; }
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th, .tabla td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
}
.tabla th { font-weight: 600; white-space: nowrap; }

@media (min-width: 720px) {
  .tool-cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .pasos-confianza__lista { grid-template-columns: repeat(3, 1fr); }
  .lista-guias { grid-template-columns: 1fr 1fr; }
}

/* Estudio del tachado: columna «Resultado» de la tabla */
.tabla-estudio { min-width: 44rem; }
.tabla-estudio th[scope=row] { width: 26%; }
.resultado { font-weight: 600; white-space: nowrap; }
.resultado--no { color: var(--c-error); }
.resultado--depende { color: var(--c-warn); }
.resultado--si { color: var(--c-primary); }

/* Conecta con Claude (hito 9, CLAUDE.md §14): la franja de la portada y la página /claude/ */
.banda-claude {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 20px 22px;
  border-radius: var(--radius-card);
  background: var(--c-primary);
  color: var(--c-on-primary);
}
.banda-claude__sello, .claude-sello { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 600; }
.banda-claude__titulo { margin: 0; font-size: 1.35rem; color: inherit; }
.banda-claude__chat { display: grid; gap: 4px; padding: 10px 14px; border-radius: var(--radius-btn); background: var(--c-surface); color: var(--c-text); }
.banda-claude__frase { font-weight: 600; }
.banda-claude__hecho { color: var(--c-ok); }
.banda-claude__hecho::before { content: "✓ "; }
.banda-claude__accion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.banda-claude__accion span { font-size: .95rem; }
.claude-sello { color: var(--c-primary); }

.descarga { margin-top: 20px; }
.descarga__datos, .nota, .aviso-marca { color: var(--c-muted); font-size: .9rem; }
.descarga__datos { margin-top: 8px; }
.descarga__huella { margin-top: 10px; max-width: var(--w-text); }
.descarga__huella summary { cursor: pointer; color: var(--c-primary); font-weight: 600; }
.descarga__huella p { margin-top: 8px; font-size: .95rem; }
.descarga__sha { word-break: break-all; }
.descarga__movil { display: none; max-width: var(--w-text); }
.descarga__movil .btn { margin-top: 10px; }
@media (max-width: 719.98px), (hover: none) and (pointer: coarse) {
  .descarga__ordenador { display: none; }
  .descarga__movil { display: block; }
}

.comparativa { display: grid; gap: 14px; margin: 16px 0 8px; }
.comparativa__tarea { padding: 16px 18px; border: 1px solid var(--c-border); border-radius: var(--radius-card); background: var(--c-surface); }
.comparativa__tarea h3 { margin: 0 0 8px; font-size: 1.05rem; }
.comparativa__fila { display: grid; grid-template-columns: 6rem 1fr auto; align-items: center; gap: 10px; margin: 6px 0 0; font-size: .95rem; }
.comparativa__tiempo { white-space: nowrap; }
.comparativa__barra { height: 12px; border-radius: 999px; background: var(--c-bg); }
.comparativa__barra::before { content: ""; display: block; width: var(--parte); height: 100%; border-radius: inherit; background: var(--c-border-strong); }
.comparativa__fila--claude { font-weight: 600; }
.comparativa__fila--claude .comparativa__barra::before { background: var(--c-primary); }

.chat { display: grid; gap: 10px; margin: 20px 0; padding: 16px 18px; border: 1px solid var(--c-border); border-radius: var(--radius-card); background: var(--c-bg); }
.chat__rotulo { color: var(--c-muted); font-size: .85rem; }
.chat__yo { justify-self: end; max-width: 85%; margin: 0; padding: 8px 14px; border: 1px solid var(--c-border); border-radius: 14px; background: var(--c-surface); }
.chat__respuesta { padding-left: 14px; border-left: 3px solid var(--c-primary); }
.chat__respuesta p { margin: 0 0 6px; overflow-wrap: anywhere; }
.chat__herramienta { display: inline-flex; align-items: center; gap: 6px; color: var(--c-muted); font-size: .85rem; font-weight: 600; }

.frases__grupo h3 { margin: 18px 0 8px; font-size: 1.05rem; }
.frases ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.frase { padding: 12px 16px; border: 1px solid var(--c-border); border-radius: var(--radius-card); background: var(--c-surface); }
.frase__texto { margin: 0; font-weight: 600; }
.frase__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0 0; color: var(--c-muted); font-size: .9rem; }
.frase__copiar { min-height: 36px; padding: 6px 14px; font-size: .9rem; }

.content .instalar { list-style: none; padding: 0; display: grid; gap: 12px; counter-reset: paso; }
.instalar__paso { display: grid; grid-template-columns: 28px 1fr; gap: 2px 14px; padding: 16px 18px; border: 1px solid var(--c-border); border-radius: var(--radius-card); background: var(--c-surface); counter-increment: paso; }
.instalar__paso svg { grid-row: span 2; color: var(--c-primary); }
.instalar__paso h3 { margin: 2px 0 0; font-size: 1.05rem; }
.instalar__paso h3::before { content: counter(paso) ". "; }
.instalar__paso p { margin: 0; color: var(--c-muted); }
.aviso-instalar { margin: 12px 0; padding: 12px 16px; border: 1px solid var(--c-error); border-left-width: 4px; border-radius: var(--radius-btn); background: var(--c-error-soft); }
.aviso-instalar p { margin: 0; }
.page--claude .cambios, .page--claude .aviso-marca { max-width: var(--w-text); margin-top: 32px; }
.cambios h3 { margin: 10px 0 4px; font-size: 1.05rem; }

/* Comprobar la huella del archivo de la extensión (/claude/, js/comprobar-huella.js) */
.huella { margin: 12px 0; }
.huella__resultado { margin-top: 12px; padding: 12px 16px; border-radius: var(--radius-btn); border: 1px solid var(--c-border); }
.huella__resultado p { margin: 0; }
.huella__resultado p + p { margin-top: 6px; }
.huella__resultado code { word-break: break-all; font-size: .85rem; }
.huella__resultado--ok { background: var(--c-ok-soft); border-color: var(--c-ok); }
.huella__resultado--mal { background: var(--c-error-soft); border-color: var(--c-error); }
.huella__resultado--aviso { background: var(--c-warn-soft); border-color: var(--c-warn); }

/* Animaciones de las páginas de texto (hito de actualización 23) */
.aqui{display:grid;justify-items:center;gap:6px;margin:24px 0}
.aqui svg{max-width:100%;height:auto}
.aqui figcaption{text-align:center}
.aqui__pantalla{fill:var(--c-surface);stroke:var(--c-primary);stroke-width:4}
.aqui__base{fill:var(--c-primary)}
.aqui__hoja{fill:#fff;stroke:var(--c-action);stroke-width:3;stroke-linejoin:round}
.aqui__lineas{stroke:#8A989E;stroke-width:3;stroke-linecap:round}
.aqui__nube{fill:none;stroke:var(--c-muted);stroke-width:4;stroke-linejoin:round}
.aqui__raya{stroke:var(--c-error);stroke-width:5;stroke-linecap:round}
.hero .aqui{display:none}
@media(min-width:900px){.hero:has(.aqui){max-width:none;display:grid;grid-template-columns:minmax(0,var(--w-text)) auto;column-gap:48px;align-items:center}.hero>:not(.aqui){grid-column:1}.hero .aqui{display:grid;grid-column:2;grid-row:1/span 3;margin:0;color:var(--c-muted);font-size:.9rem}.hero .aqui figcaption{max-width:250px}}
.escribiendo{display:inline-flex;gap:3px;margin-left:6px;opacity:0}
.escribiendo i{width:5px;height:5px;border-radius:50%;background:currentColor}
.tool-cards>li:nth-child(2){--d:.15s}.tool-cards>li:nth-child(3){--d:.3s}.tool-cards>li:nth-child(4){--d:.45s}.tool-cards>li:nth-child(5){--d:.6s}.tool-cards>li:nth-child(6){--d:.75s}
@media(prefers-reduced-motion:no-preference){
.page--portada~* .logo__arco,body:has(.page--portada) .logo__arco{transform-box:fill-box;transform-origin:center bottom;animation:dp-arco .9s .3s cubic-bezier(.3,1.6,.5,1) both}
:is(.tool-cards__link:is(:hover,:focus-visible),.tool-cards.is-anima) :is(.i-tapa,.i-pop,.i-sube){transform-box:fill-box;animation:dp-tapa .45s var(--d,0s) cubic-bezier(.3,.7,.2,1) both}
:is(.tool-cards__link:is(:hover,:focus-visible),.tool-cards.is-anima) .i-pop{animation-name:dp-pop}
:is(.tool-cards__link:is(:hover,:focus-visible),.tool-cards.is-anima) .i-sube{animation-name:dp-sube}
:is(.tool-cards__link:is(:hover,:focus-visible),.tool-cards.is-anima) .i-tapa+.i-tapa{animation-delay:calc(var(--d,0s) + .12s)}
:is(.hero,.is-anima) .aqui__doc{animation:dp-entra 1.1s .2s cubic-bezier(.2,.8,.2,1) both}
:is(.hero,.is-anima) .aqui__raya{stroke-dasharray:80;animation:dp-raya .6s 1.3s ease-out both}
.is-anima [data-teclea]>[aria-hidden]>span{animation:dp-oculta 1ms calc(.4s + var(--n)*45ms) backwards}
.is-anima.banda-claude__chat .banda-claude__hecho{animation:dp-sube .4s calc(.6s + var(--total,40)*45ms) both}
.is-anima .comparativa__barra::before{transform-origin:left;animation:dp-tapa 2.4s linear both}
.is-anima .comparativa__fila--claude .comparativa__barra::before{animation-duration:.4s;animation-timing-function:ease-out}
.is-anima .chat__yo{animation:dp-dcha .45s both}
.is-anima .chat__herramienta{animation:dp-sube .35s .5s both}
.is-anima .escribiendo{animation:dp-ratito 1.1s .7s both}
.is-anima .escribiendo i{animation:dp-bota .55s .7s 2}
.is-anima .escribiendo i:nth-child(2){animation-delay:.85s}
.is-anima .escribiendo i:nth-child(3){animation-delay:1s}
.is-anima .chat__respuesta>:not(.chat__herramienta){animation:dp-sube .4s 1.8s both}
.is-anima .chat__respuesta>:nth-child(n+3){animation-delay:2s}
.is-anima .chat__respuesta>:nth-child(n+4){animation-delay:2.2s}}
@supports (animation-timeline:scroll()){@media(prefers-reduced-motion:no-preference){
body:has(.indice)::after{content:"";position:fixed;z-index:60;top:0;left:0;right:0;height:3px;background:var(--c-action);transform-origin:left;animation:dp-tapa linear both;animation-timeline:scroll(root)}}}
/* Donde los estilos no saben seguir el scroll (Firefox), la barra la pone y la mueve js/lectura.js */
@media(prefers-reduced-motion:no-preference){.lectura{position:fixed;z-index:60;top:0;left:0;right:0;height:3px;background:var(--c-action);transform-origin:left;transform:scaleX(0);pointer-events:none}}
@keyframes dp-arco{from{transform:translateY(-5px)}}
@keyframes dp-entra{from{opacity:.2;transform:translateX(-110px) rotate(-8deg)}}
@keyframes dp-raya{from{stroke-dashoffset:80}}
@keyframes dp-oculta{from,to{opacity:0}}
@keyframes dp-dcha{from{opacity:0;transform:translateX(24px)}}
@keyframes dp-ratito{15%,85%{opacity:1}}
@keyframes dp-bota{50%{transform:translateY(-3px)}}

/* El tachado falso se destapa (hito de actualización 23; también en la hoja del tachador, css/tachador.css) */
.content .falso{display:grid;gap:14px}
.falso__fila{display:grid;gap:6px;justify-items:start}
.content .falso p{margin:0}
.falso__cap{font-size:.85rem;font-weight:600;color:var(--c-muted)}
.falso__linea{justify-self:stretch;padding:10px 14px;border:1px solid #DDE3E6;border-radius:8px;background:#fff;color:#1B2429}
.falso__dato{position:relative;display:inline-block}
.falso__sel,.falso__caja{position:absolute;inset:-2px -4px;border-radius:2px}
.falso__sel{background:rgba(66,133,244,.35)}
.falso__caja{background:#111;transform:translate(118%,-8%) rotate(5deg);box-shadow:0 3px 8px rgba(0,0,0,.3)}
.falso__barra{display:inline-block;width:5.4em;height:1.1em;vertical-align:-3px;border-radius:2px;background:#111}
.falso__nota{padding:2px 10px;border-radius:999px;font-size:.8rem;font-weight:600}
.falso__nota--mal{background:#FDECEC;color:#B3261E}
.falso__nota--bien{background:#E6F4EC;color:#177A4C}
@media(prefers-reduced-motion:no-preference){
.is-anima .falso__caja{animation:dp-destapa .7s 1s cubic-bezier(.3,.7,.3,1) both}
.is-anima .falso__sel{animation:dp-aparece .3s 1.7s both}
.is-anima .falso__fila--mal .falso__nota{animation:dp-sube .35s 2s both}
.is-anima .falso__barra{transform-origin:left;animation:dp-tapa .45s 2.7s both}
.is-anima .falso__fila--bien .falso__nota{animation:dp-sube .35s 3.3s both}}
@keyframes dp-destapa{from{transform:none;box-shadow:none}}
@keyframes dp-aparece{from{opacity:0}}