/* ------------------------------------------------------------------
   Masajes Murcia — hoja de estilos única (sin frameworks, ~8 KB)
   Paleta: verde salvia + gris cálido
   ------------------------------------------------------------------ */

:root{
  --verde:#2f6f5e;
  --verde-osc:#24564a;
  --verde-claro:#e8f2ef;
  --naranja:#e07a3f;
  --texto:#1f2723;
  --suave:#6b7770;
  --linea:#e2e6e3;
  --fondo:#f6f7f6;
  --radio:10px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fondo);color:var(--texto);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
img{max-width:100%;display:block}
a{color:var(--verde);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25;margin:0 0 .5em}
h1{font-size:1.6rem}
h2{font-size:1.25rem}
.cont{max-width:1120px;margin:0 auto;padding:0 16px}

/* ---------- Cabecera ---------- */
.cab{background:var(--verde);color:#fff}
.cab-in{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.logo{color:#fff;font-size:1.35rem;font-weight:700;letter-spacing:-.5px;text-decoration:none}
.logo span{color:#ffd9a8;font-weight:400}
.buscador{flex:1 1 320px;display:flex;min-width:220px}
.buscador input{
  flex:1;border:0;border-radius:var(--radio) 0 0 var(--radio);
  padding:10px 12px;font-size:.95rem;min-width:0;
}
.buscador button{
  border:0;background:var(--verde-osc);color:#fff;padding:0 16px;
  border-radius:0 var(--radio) var(--radio) 0;cursor:pointer;font-size:.9rem;
}
.cab-nav{display:flex;align-items:center;gap:14px}
.cab-link{color:#dff0ea;font-size:.9rem}
.btn-cta{
  background:var(--naranja);color:#fff;padding:9px 16px;border-radius:var(--radio);
  font-weight:600;font-size:.9rem;white-space:nowrap;
}
.btn-cta:hover{background:#c9682f;text-decoration:none}

/* ---------- Barra de servicios ---------- */
.barra-serv{background:#fff;border-bottom:1px solid var(--linea)}
.barra-serv-in{display:flex;gap:18px;overflow-x:auto;padding-top:10px;padding-bottom:10px;font-size:.87rem;white-space:nowrap}
.barra-serv-in a{color:var(--suave)}
.barra-serv-in a:hover{color:var(--verde)}
.barra-serv-in .mas{color:var(--naranja);font-weight:600}

/* ---------- Bloques ---------- */
main{padding:22px 16px 40px}
.hero{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:22px;margin-bottom:22px;
}
.hero h1{margin-bottom:6px}
.hero p{margin:0;color:var(--suave)}
.hero .btn-cta{display:inline-block;margin-top:14px}

.panel{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:18px;margin-bottom:22px}
.panel h2{margin-bottom:12px;font-size:1.05rem}
.sub{color:var(--suave);font-size:.9rem}

/* ---------- Rejilla de zonas ---------- */
.zonas{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px 14px;font-size:.9rem}
.zonas a{display:block;padding:3px 0;color:#3b4b44}
.zonas a .n{color:var(--suave);font-size:.8rem}

/* ---------- Tarjetas ---------- */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.tarjeta{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;display:flex;flex-direction:column;
}
.tarjeta:hover{border-color:var(--verde);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.tarjeta .foto{aspect-ratio:3/4;background:var(--verde-claro);overflow:hidden}
.tarjeta .foto img{width:100%;height:100%;object-fit:cover}
.tarjeta .sinfoto{
  display:flex;align-items:center;justify-content:center;height:100%;
  font-size:2.4rem;color:#9dbdb2;
}
.tarjeta .cuerpo{padding:12px;flex:1;display:flex;flex-direction:column;gap:5px}
.tarjeta h3{margin:0;font-size:1rem}
.tarjeta h3 a{color:var(--texto)}
.tarjeta .zona{font-size:.8rem;color:var(--naranja);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.tarjeta .txt{font-size:.87rem;color:var(--suave);margin:0}
.tarjeta .pie-t{margin-top:auto;padding-top:8px;display:flex;gap:8px}

.etq{
  display:inline-block;background:var(--verde-claro);color:var(--verde-osc);
  border-radius:20px;padding:2px 10px;font-size:.78rem;margin:0 4px 4px 0;
}

/* Sello de campo verificado por el admin (fotos, dirección, contacto…) */
.sello{
  display:inline-block;color:var(--verde);border:1px solid var(--verde);
  border-radius:20px;padding:0 8px;font-size:.72rem;font-weight:600;vertical-align:middle;
}

/* Insignias de etiquetas (Verificado, Destacado, Top…). El color lo pone
   cada etiqueta desde /admin como style inline. */
.insignia{
  display:inline-block;color:#fff;font-weight:600;
  border-radius:20px;padding:2px 10px;font-size:.75rem;margin:0 4px 6px 0;
}

/* Fichas de destacados de la portada: foto arriba, título debajo */
.fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.ficha-mini{display:block;text-align:center;color:var(--texto)}
.ficha-mini img,.ficha-mini .sinfoto{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radio);
  display:flex;align-items:center;justify-content:center;background:var(--verde-claro);
}
.ficha-mini .sinfoto{font-size:2.2rem}
.ficha-mini .fm-titulo{display:block;margin-top:7px;font-weight:600;font-size:.92rem}
.ficha-mini .fm-insignias{display:block;margin-top:3px}
.ficha-mini:hover{text-decoration:none}
.ficha-mini:hover .fm-titulo{color:var(--verde)}

/* Filas del listado general: foto izquierda, texto derecha */
.fila{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--linea)}
.fila:last-of-type{border-bottom:0}
.fila-foto img,.fila-foto .sinfoto{
  width:96px;height:128px;object-fit:cover;border-radius:var(--radio);
  display:flex;align-items:center;justify-content:center;background:var(--verde-claro);font-size:2rem;
}
.fila-texto{flex:1;min-width:0}
.fila-texto h3{margin:0 0 2px;font-size:1.02rem}
.fila-texto h3 a{color:var(--texto)}
.fila-texto .zona{font-size:.8rem;color:var(--naranja);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.fila-texto p{margin:4px 0 0;font-size:.88rem;color:var(--suave)}
@media (max-width:520px){
  .fila-foto img,.fila-foto .sinfoto{width:84px;height:112px}
}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;background:var(--verde);color:#fff;border:0;
  padding:10px 16px;border-radius:var(--radio);font-size:.92rem;cursor:pointer;
  text-align:center;font-family:inherit;
}
.btn:hover{background:var(--verde-osc);text-decoration:none}
.btn-wa{background:#25d366}
.btn-wa:hover{background:#1eb355}
.btn-sec{background:#fff;color:var(--verde);border:1px solid var(--verde)}
.btn-sec:hover{background:var(--verde-claro);color:var(--verde-osc)}
.btn-peq{padding:6px 12px;font-size:.85rem}

/* ---------- Ficha ---------- */
.ficha{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:820px){.ficha{grid-template-columns:1.4fr 1fr}}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.galeria img{border-radius:var(--radio);width:100%;aspect-ratio:3/4;object-fit:cover}
.datos dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.4px;color:var(--suave);margin-top:12px}
.datos dd{margin:2px 0 0}
.acciones{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.migas{font-size:.85rem;color:var(--suave);margin-bottom:14px}

/* ---------- Formularios ---------- */
.form label{display:block;margin:14px 0 4px;font-weight:600;font-size:.9rem}
.form input[type=text],.form input[type=tel],.form input[type=email],
.form input[type=password],.form select,.form textarea{
  width:100%;padding:10px;border:1px solid var(--linea);border-radius:8px;
  font:inherit;font-size:.95rem;background:#fff;
}
.form textarea{min-height:130px;resize:vertical}
.form .ayuda{font-size:.82rem;color:var(--suave);margin:3px 0 0}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px;margin-top:6px}
.checks label{font-weight:400;margin:0;display:flex;gap:7px;align-items:center;font-size:.9rem}
.checks input{margin:0}
.aviso{background:#fff6ec;border:1px solid #f0d3b4;border-radius:var(--radio);padding:14px;font-size:.9rem}
.error{background:#fdecec;border:1px solid #f2bcbc;border-radius:var(--radio);padding:12px;margin-bottom:16px;font-size:.9rem}
.ok{background:#e9f6ef;border:1px solid #b6dfc7;border-radius:var(--radio);padding:12px;margin-bottom:16px;font-size:.9rem}

/* ---------- Pie ---------- */
.pie{background:#242c28;color:#c3cec8;margin-top:30px;font-size:.88rem}
.pie-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px;padding-top:28px;padding-bottom:20px}
.pie-col strong{display:block;color:#fff;margin-bottom:8px}
.pie-col a{display:block;color:#c3cec8;padding:2px 0}
.pie-col p{margin:0;color:#9aa8a1}
.pie-nota{border-top:1px solid #38423d;padding-top:14px;padding-bottom:22px;color:#8b968f;font-size:.8rem}

/* ---------- Tablas (admin) ---------- */
table.tb{width:100%;border-collapse:collapse;font-size:.88rem;background:#fff}
table.tb th,table.tb td{border-bottom:1px solid var(--linea);padding:8px;text-align:left;vertical-align:top}
table.tb th{background:var(--verde-claro);font-size:.8rem;text-transform:uppercase;letter-spacing:.4px}

/* ---------- Móvil (la prioridad del sitio) ---------- */
@media(max-width:640px){
  .cab-in{gap:10px}
  .buscador{order:3;flex-basis:100%}
  h1{font-size:1.35rem}
  main{padding:16px 12px 30px}
  .panel,.hero{padding:14px}
  /* Dos columnas para que los listados de zonas no ocupen media pantalla */
  .zonas{grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:2px 10px;font-size:.85rem}
  .rejilla{grid-template-columns:repeat(2,1fr);gap:10px}
  .tarjeta .cuerpo{padding:9px}
  .tarjeta .pie-t{flex-direction:column}
  /* Destacados: 2 fichas verticales por pantalla, como apps de móvil */
  .fichas{grid-template-columns:repeat(2,1fr);gap:10px}
  /* Galería de la ficha: 2 fotos verticales por fila */
  .galeria{grid-template-columns:repeat(2,1fr)}
  /* Botones de contacto a ancho completo, fáciles de pulsar */
  .acciones .btn{width:100%;padding:13px 16px;font-size:1rem}
  .btn-cta{display:block;text-align:center}
  .cab-nav{margin-left:auto}
}