/* ---------- síntomas (dueño de casa) ---------- */
.syms{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
/* .sym es ahora la tarjeta entera convertida en <a> (crearTarjetaSintoma,
   bloque 10 de app.js) — display:block/color:inherit/text-decoration:none
   para que no se vea ni se comporte como un enlace de texto suelto, el
   color y el tipo de letra los siguen dando .sym-b h4/p tal cual. */
.sym{background:#fff;border:1px solid var(--line);border-radius:5px;overflow:hidden;
  display:block;color:inherit;text-decoration:none;
  transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}
.sym:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(10,36,34,.12)}
.sym:focus-visible{outline:2px solid var(--glow-aa);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.sym:hover{transform:none}}
/* Mismo tratamiento que .card-img: imagen de fondo cubriendo la franja. */
.sym-img{height:78px;background-position:center;background-size:cover}
.sym-b{padding:18px}
.sym-b h4{font-size:17px;font-weight:700;margin-bottom:7px}
.sym-b p{font-size:14px;color:var(--ink-mid);margin-bottom:0}

/* ---------- mantenimiento.html: foto sticky + lista completa de
   síntomas (misma fuente que #casa: SINTOMAS/crearTarjetaSintoma en
   app.js) ---------- */
body.pg-mant .mant-layout{display:grid;grid-template-columns:1fr 1fr}
/* top:var(--top-h) para quedar pegada justo debajo del header (que ya es
   sticky por su cuenta); align-self:start para no estirarse al alto de
   la columna derecha — así el navegador tiene espacio de sobra para
   recorrerla mientras la derecha hace scroll. */
body.pg-mant .mant-photo{position:sticky;top:var(--top-h,70px);align-self:start;
  height:calc(100svh - var(--top-h,70px));
  background:var(--deep-2) url('../assets/mantenimiento/hero.png') center/cover no-repeat}
/* La foto se funde con .mant-list (--stone) en vez de cortar en línea
   recta: degradado ancho porque agua.jpg, de por sí muy contrastada,
   necesita más recorrido del que parece a primera vista para leerse
   como transición intencional y no como una mancha. Overlay, no
   mask-image: un ::after es más simple de ajustar/mantener. */
body.pg-mant .mant-photo::after{content:'';position:absolute;top:0;right:0;bottom:0;
  width:42%;background:linear-gradient(to right,transparent,var(--stone))}
body.pg-mant .mant-list{background:var(--stone)}
body.pg-mant .mant-list-in{padding:56px var(--wrap-pad);max-width:640px}
body.pg-mant .mant-head{margin-bottom:28px}
body.pg-mant .mant-head h1{font-size:clamp(28px,3.6vw,40px);font-weight:700;margin:0 0 12px}
body.pg-mant .mant-head p{color:var(--ink-mid);max-width:52ch}
/* En columna, no en rejilla como .syms de index.html: aquí no hay nada
   a los lados con quien repartirse el ancho, y la lista puede crecer a
   más de 4 síntomas sin rediseñarse. */
body.pg-mant .mant-syms{display:flex;flex-direction:column;gap:16px}
@media(max-width:880px){
  body.pg-mant .mant-layout{display:block}
  /* position:relative, no static: sigue sin desplazarse (sin top/left
     declarados es idéntico a static en el flujo), pero mantiene a
     .mant-photo como contenedor de posición para su ::after — con
     static, el degradado se saldría a buscar el ancestro posicionado
     más cercano en vez de encajar en la franja. */
  body.pg-mant .mant-photo{position:relative;top:auto;height:220px}
  /* Misma fusión que en escritorio, girada: la franja ya no tiene un
     lado derecho que fundir con la columna de al lado, tiene un borde
     inferior que fundir con la lista que sigue debajo. */
  body.pg-mant .mant-photo::after{top:auto;left:0;right:0;width:auto;height:55%;
    background:linear-gradient(to bottom,transparent,var(--stone))}
}