:root{
  --fucsia:#FF3D7F;
  --fucsia-suave:#FFE3ED;
  --amarillo:#FFD23F;
  --amarillo-suave:#FFF6DA;
  --texto:#1A1A1A;
  --texto-suave:#6B6B6B;
  --linea:#EDEDED;
  --fondo:#FFFFFF;
  --radio:16px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--fondo); color:var(--texto); font-family:var(--fuente);
  line-height:1.55;
}
a{color:var(--fucsia); text-decoration:none}
a:hover{text-decoration:underline}
.envoltorio{max-width:1000px; margin:0 auto; padding:0 20px}
h1,h2,h3{font-weight:800; letter-spacing:-.01em; margin:0 0 .4em}

header.cabecera{border-bottom:2px solid var(--linea); padding:18px 0}
header.cabecera .envoltorio{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.logo{font-size:1.5rem; font-weight:900; color:var(--texto)}
.logo span{color:var(--fucsia)}
.btn{
  display:inline-flex; align-items:center; gap:6px; border:2px solid var(--texto); background:var(--texto);
  color:#fff; padding:10px 18px; border-radius:999px; font-weight:700; cursor:pointer; font-size:.95rem;
}
.btn.fucsia{background:var(--fucsia); border-color:var(--fucsia)}
.btn.amarillo{background:var(--amarillo); border-color:var(--amarillo); color:var(--texto)}
.btn.linea{background:#fff; color:var(--texto)}
.btn.pequeno{padding:6px 12px; font-size:.82rem}
.btn:hover{filter:brightness(.95); text-decoration:none}

.hero{padding:40px 0 20px}
.hero p.lead{color:var(--texto-suave); max-width:56ch; font-size:1.08rem}

.chips{display:flex; gap:8px; margin:20px 0; flex-wrap:wrap}
.chip{
  border:2px solid var(--linea); background:#fff; color:var(--texto); padding:8px 16px; border-radius:999px;
  font-weight:700; font-size:.9rem;
}
.chip.activo{background:var(--texto); border-color:var(--texto); color:#fff}

.destacados{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:22px 0 34px}
.destacado{
  background:var(--amarillo-suave); border:2px solid var(--amarillo); border-radius:var(--radio); padding:16px;
  display:flex; gap:12px; align-items:center;
}
.destacado img{width:64px; height:64px; object-fit:cover; border-radius:50%; border:3px solid #fff}
.destacado .etq{font-weight:800}
.destacado .sub{color:var(--texto-suave); font-size:.82rem}

.galeria{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; margin:20px 0 40px}
.tarjeta{border:2px solid var(--linea); border-radius:var(--radio); overflow:hidden; background:#fff; display:flex; flex-direction:column}
.tarjeta .foto{aspect-ratio:1; width:100%; object-fit:cover; background:var(--fucsia-suave)}
.tarjeta .cuerpo{padding:14px}
.tarjeta .etiqueta{font-weight:800; font-size:1.05rem; display:flex; align-items:center; gap:6px}
.badge-cat{font-size:.68rem; font-weight:800; text-transform:uppercase; padding:2px 8px; border-radius:999px; background:var(--fucsia-suave); color:var(--fucsia)}
.badge-cat.chico{background:#E6F2FF; color:#1E6FD9}

.estrellas{display:inline-flex; gap:2px; font-size:1.3rem; cursor:pointer; user-select:none}
.estrellas .estrella{color:var(--linea)}
.estrellas .estrella.activa{color:var(--amarillo)}
.media-valoracion{color:var(--texto-suave); font-size:.82rem; margin-top:4px}

.acciones-tarjeta{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}

/* Modal de mensajes */
dialog.modal{border:none; border-radius:20px; padding:0; width:min(520px,92vw); max-height:85vh}
dialog.modal::backdrop{background:rgba(26,26,26,.55)}
.modal-cabecera{display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:2px solid var(--linea)}
.modal-cuerpo{padding:18px 22px; overflow-y:auto; max-height:50vh}
.modal-pie{padding:16px 22px; border-top:2px solid var(--linea)}
.mensaje{padding:10px 0; border-bottom:1px solid var(--linea)}
.mensaje:last-child{border-bottom:none}
.mensaje .autor{font-weight:800; font-size:.8rem; color:var(--fucsia)}
.mensaje .autor.besucon{color:var(--texto)}
.mensaje .fecha{color:var(--texto-suave); font-size:.72rem}
.mensaje .texto{margin-top:2px}
.mensaje .denunciar-link{font-size:.72rem; color:var(--texto-suave)}

.emoji-picker{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px}
.emoji-picker button{
  border:none; background:var(--fucsia-suave); border-radius:8px; font-size:1.1rem; padding:4px 6px; cursor:pointer;
}

textarea, input[type=text], input[type=email], input[type=date]{
  width:100%; border:2px solid var(--linea); border-radius:10px; padding:10px 12px; font-family:var(--fuente); font-size:.95rem;
}
textarea{min-height:70px; resize:vertical}
label{font-weight:700; font-size:.88rem; display:block; margin:14px 0 6px}
.ayuda{color:var(--texto-suave); font-size:.8rem; margin-top:4px}
.aviso{background:var(--fucsia-suave); border:2px solid var(--fucsia); border-radius:12px; padding:14px 16px; margin:16px 0}
.aviso.ok{background:var(--amarillo-suave); border-color:var(--amarillo)}
.caja-consentimiento{background:#FAFAFA; border:2px solid var(--linea); border-radius:12px; padding:14px 16px; margin:16px 0}
.caja-consentimiento label{display:flex; align-items:flex-start; gap:10px; font-weight:500; margin:8px 0}
.caja-consentimiento input[type=checkbox]{margin-top:3px; width:18px; height:18px}

footer.pie{border-top:2px solid var(--linea); margin-top:50px; padding:24px 0; color:var(--texto-suave); font-size:.85rem}
footer.pie a{color:var(--texto-suave); text-decoration:underline}

.token-caja{background:var(--texto); color:#fff; border-radius:14px; padding:18px 20px; margin:20px 0}
.token-caja code{background:rgba(255,255,255,.12); padding:8px 10px; border-radius:8px; display:block; margin:10px 0; word-break:break-all; font-size:.85rem}

@media (max-width:520px){
  .galeria{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}