/* ------------------------------------------------------------------
   Masajes.red — capa de tema y sistema visual.
   Se carga DESPUES del CSS heredado: no hay que tocar el tema viejo y
   volver atras es borrar este archivo y su <link> en header.php.

   Contiene, en este orden:
     1. fichas (tokens)      5. controles
     2. fondo de la pagina   6. botones
     3. neutros y color      7. foco
     4. tipografia           8. elevacion, forma y movimiento
   ------------------------------------------------------------------ */

/* ---------- 1. fichas ---------- */
:root{
  /* color */
  --c-fondo:#e6ede1;                 /* fondo de toda la pagina: verde salvia */
  --c-sup:#fff;                      /* superficie: tarjetas, formularios, comentarios */
  --c-sup2:#f2f6ef;                  /* superficie apenas despegada del fondo */
  --c-borde:#d8e1d2;                 /* bordes y separadores, misma familia que el fondo */
  --c-borde-control:#74836c;         /* bordes de campos: 4,03:1 sobre blanco y 3,37:1 sobre el fondo */
  --c-texto:#2b2b2b; --c-texto2:#55604f;
  --c-marca:#9b3a2d; --c-marca-h:#82301f;
  --c-accion:#0e7a4a; --c-accion-h:#0b6139; --c-accion-s:#e7f2ec;
  --c-error:#8a1f14; --c-error-s:#fdecea;
  /* forma: 10 en controles y fotos, 14 en superficies, pastilla en chips y carteles */
  --r-control:10px; --r-sup:14px; --r-pill:999px;
  /* elevacion: 1 reposo, 2 hover, 3 capas flotantes */
  --s1:0 1px 2px rgba(45,64,38,.05),0 2px 8px rgba(45,64,38,.07);
  --s2:0 6px 18px rgba(45,64,38,.14);
  --s3:0 10px 32px rgba(30,44,26,.22);
  /* movimiento: una sola curva */
  --t:.18s ease;
}
::selection{background:#ecd3cd;color:var(--c-texto)}

/* ---------- 2. fondo en toda la pagina, arriba y abajo incluidos ---------- */
html,body{background:var(--c-fondo)}
/* el fondo del contenedor, del pie y de las barras de arriba ya viene de base.css (--c-fondo, tanda 8: antes se pisaba
   aca con !important). Aca, solo la linea de abajo de las barras. El panel del menu desplegable queda blanco a proposito */
.white-menu .wsmainfull{border-bottom:1px solid var(--c-borde)}
.wsmobileheader{background-color:var(--c-fondo);border-bottom:1px solid var(--c-borde)}

/* ---------- 3. neutros: el tema viejo los tenia calidos (rosados) y sobre verde desentonan ---------- */
/* las variables cortas que usan listas.css y perfil.css salen de las fichas: es el unico lugar donde se definen */
.hm,.pf{background:var(--c-fondo);
  --txt:var(--c-texto);--txt2:var(--c-texto2);--terra:var(--c-marca);
  --borde:var(--c-borde);--suave:var(--c-sup2);
  --verde:var(--c-accion);--verde-h:var(--c-accion-h);--verde-s:var(--c-accion-s)}
.den{border-color:var(--c-borde)}
.texto-legal code{background:var(--c-sup2);border-radius:6px}
.den .nota{color:var(--c-texto2)}
/* cabecera: logo y menu con los colores del sistema */
/* los colores ya vienen de base.css; aca solo que el logo no cambie al pasar el mouse (a:hover del tema viejo) y el
   hover de los titulos del menu, con peso suficiente para ganarle a .navbar-dark ... > a */
.type__logo:hover,.type__logo:focus{color:var(--c-texto)}
.wsmenu>.wsmenu-list>li>a{transition:color var(--t)}
.wsmenu>.wsmenu-list>li>a:hover{color:var(--c-marca)}

/* ---------- 4. tipografia: H1 32/40 · H2 24 · H3 18-20 · cuerpo 16 · apoyo 14/13/12 ---------- */
/* el tema viejo usa Roboto Light (300) hasta en 13px: ilegible sobre fondo con color */
.hm,.pf{font-weight:400}
:where(.hm,.pf,footer.bg-color-01,.texto-legal) p,
:where(.hm,.pf) li,:where(.hm,.pf) small{font-weight:400}
.pf-h1{font-size:32px}
.pf-h2{font-size:24px;line-height:1.2}
@media (min-width:992px){.pf-h1{font-size:40px}}
/* la linea de texto no puede cruzar los 1100px de ancho: se vuelve incomoda de leer */
.hm-intro h2,.hm-intro p{max-width:62ch;margin-left:auto;margin-right:auto}
/* paginas legales */
.texto-legal h2{font-family:Lustria,Georgia,serif;font-size:20px;font-weight:400;color:var(--c-texto)}
.texto-legal h3{font-size:16px;font-weight:500;color:var(--c-texto)}
.texto-legal,.texto-legal p,.texto-legal li{color:#3c4438}
/* el enlace heredaba el gris del contenedor .txt-color-05 (#808080): 3,3:1 sobre el fondo */
.texto-legal a{color:var(--c-marca);text-decoration:underline;text-underline-offset:2px}
/* bloque de texto de home y barrios: venia con titulos grises en negrita y cuerpo Light de 19px */
.texto-seo h2{font-family:Lustria,Georgia,serif;font-size:24px;line-height:1.2;font-weight:400;color:var(--c-texto);margin-bottom:10px}
.texto-seo h3{font-family:Lustria,Georgia,serif;font-size:18px;line-height:1.3;font-weight:400;color:var(--c-texto);margin:22px 0 6px}
.texto-seo p,.texto-seo li{font-size:16px;line-height:1.65;font-weight:400;color:var(--c-texto2);max-width:70ch}
.texto-seo a{color:var(--c-marca);text-decoration:underline;text-underline-offset:2px}
/* pagina de error: mismos titulos y mismo cuerpo que el resto */
section.bg-color-01 h1.txt-color-01,section.bg-color-01 h2.txt-color-01{font-family:Lustria,Georgia,serif;font-weight:400;color:var(--c-texto)}
section.bg-color-01 h1.txt-color-01{font-size:32px;line-height:1.15}
section.bg-color-01 h2.txt-color-01{font-size:24px;line-height:1.2}
section.bg-color-01 p.p-lg.txt-color-05{font-size:16px;font-weight:400;color:var(--c-texto2)}
@media (min-width:768px){section.bg-color-01 h1.txt-color-01{font-size:40px}}
/* aviso +18: edad-cookies.js arma el cuadro y su estilo vive aca entero (hasta la tanda 10 lo inyectaba el JS con
   otra paleta y esto lo pisaba). En .chico, 400 y no el 300 del tema viejo: marketing.md lo prohibe en texto chico */
#mr-aviso{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,16,18,.72);backdrop-filter:blur(3px)}
#mr-aviso .caja{background:var(--c-sup);color:var(--c-texto);max-width:420px;width:100%;border-radius:10px;padding:28px 24px 22px;box-shadow:0 12px 40px rgba(0,0,0,.3);font-size:15px;line-height:1.55;text-align:center}
#mr-aviso h2{font-size:20px;margin:0 0 10px;color:var(--c-texto)}
#mr-aviso p{margin:0 0 18px}
#mr-aviso .chico{font-size:12px;font-weight:400;color:var(--c-texto2);margin:16px 0 0}
#mr-aviso .chico a{font-size:12px;font-weight:400;color:var(--c-marca);text-decoration:underline}
#mr-aviso button{display:block;width:100%;margin:10px 0 0;padding:14px 16px;border-radius:6px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:.2px}
#mr-aviso .si{background:var(--c-marca);color:#fff;border:2px solid var(--c-marca);border-radius:var(--r-control);transition:background var(--t),box-shadow var(--t)}
#mr-aviso .si:hover,#mr-aviso .si:focus{background:var(--c-marca-h);border-color:var(--c-marca-h);outline:none}
#mr-aviso .si:focus-visible{outline:3px solid var(--c-texto);outline-offset:2px}
#mr-aviso .no{background:var(--c-sup);color:var(--c-texto);border:1px solid var(--c-borde-control);font-weight:500}
#mr-aviso .no:hover,#mr-aviso .no:focus{border-color:var(--c-texto);color:var(--c-texto);outline:none}
html.mr-bloqueado,body.mr-bloqueado{overflow:hidden}
/* pie: mismo escalon que el texto de apoyo, y una sola linea separadora */
footer.bg-color-01 p,footer.bg-color-01 a{font-size:14px;line-height:1.5}
/* la segunda linea del pie (antes con un style en linea en pie.php, que esto pisaba con !important) */
footer.bg-color-01 .footer-copyright p+p{font-size:13px;margin-top:6px}
footer.bg-color-01,footer.bg-color-01 p,footer.bg-color-01 li{color:var(--c-texto2)}
footer.bg-color-01 a{color:var(--c-marca);font-weight:500}
footer.bg-color-01 .bottom-footer{border-top:0}
footer.bg-color-01{border-top:1px solid var(--c-borde);padding-top:6px}

/* ---------- 5. controles: un borde, un foco, una altura ---------- */
.hm-barrios a,.hm-filtros button,.pf a.pf-chip,.hm-marca,.pf-barra .pf-cta,.pf-lb-cta .pf-cta{border-radius:var(--r-pill)}
.hm-barrios a,.hm-filtros button{min-height:44px}
/* el borde de un control tiene que llegar a 3:1 contra lo que tiene al lado, que aca es el fondo */
.hm-filtros button{border-width:1px;border-color:var(--c-borde-control)}
.pf a.pf-chip{border-width:1px;min-height:44px}
/* 44 px de alto en todo lo que se toca. El listado del tema viejo daba 42 por 12px de relleno */
.btn.btn-sm{padding-top:13px;padding-bottom:13px}
.pf-leer,.pf-bajar{min-height:44px}
/* "Ver todas las masajistas en X": es un boton de verdad, no un enlace dentro de un parrafo */
.pf-mas a{display:inline-block;padding:12px 0}
/* migas y enlaces del pie: se agranda el area de toque con relleno y se compensa con margen
   negativo, asi el area crece pero la linea no se mueve */
.pf-migas a,.hm-migas a{display:inline-block;padding:14px 7px;margin:-14px 0}
footer p.first-list-link a,footer p.last-li a{display:inline-block;padding:13px 6px;margin:-13px 0}
.pf-campo input,.pf-campo textarea,.den select,.den input,.den textarea{
  border-color:var(--c-borde-control);border-radius:var(--r-control);transition:border-color var(--t),box-shadow var(--t)}
.pf-campo input:focus,.pf-campo textarea:focus,.den select:focus,.den input:focus,.den textarea:focus{
  outline:0;border-color:var(--c-marca);box-shadow:0 0 0 3px rgba(155,58,45,.18)}
.pf-campo input::placeholder,.pf-campo textarea::placeholder,.den input::placeholder,.den textarea::placeholder{color:#7d8877}
/* fila de barrios: sin barra de scroll cruda, con aviso de que sigue */
.hm-barrios{scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.hm-barrios::-webkit-scrollbar{display:none}
/* Con el dedo deslizar es natural; con mouse no hay nada que agarrar, porque la barra
   esta oculta. Donde hay puntero fino, listas.js envuelve la fila y le pone dos flechas.
   El degradado de la derecha se queda: sigue avisando que hay mas. */
.hm-fila{position:relative}
.hm-flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:var(--r-pill);
  border:1px solid var(--c-borde-control);background:var(--c-sup);color:var(--c-texto);
  font-size:18px;line-height:1;cursor:pointer;box-shadow:var(--s1);
  display:flex;align-items:center;justify-content:center;
  transition:opacity var(--t),border-color var(--t),background var(--t)}
.hm-flecha:hover{border-color:var(--c-marca);color:var(--c-marca)}
.hm-flecha[hidden]{display:none}
.hm-flecha-izq{left:0}
.hm-flecha-der{right:0}
/* El degradado se dibuja del lado que tiene mas para mostrar, y lo decide listas.js.
   Sin esto la flecha tapa de golpe el primer chip y parece que estuviera roto; asi el
   contenido se desvanece por debajo y se lee como que sigue. */
.hm-fila .hm-barrios{-webkit-mask-image:none;mask-image:none}
.hm-fila.mas-der .hm-barrios{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent)}
.hm-fila.mas-izq .hm-barrios{
  -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 64px),transparent);
  mask-image:linear-gradient(to left,#000 calc(100% - 64px),transparent)}
.hm-fila.mas-izq.mas-der .hm-barrios{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 64px,#000 calc(100% - 64px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 64px,#000 calc(100% - 64px),transparent)}

/* ---------- 6. botones: primario (marca), accion (verde), secundario (blanco con borde) ---------- */
.pf-enviar,.den button{border-radius:var(--r-control);transition:background var(--t),box-shadow var(--t)}
.pf-enviar:hover,.den button:hover{background:var(--c-marca-h)}
.pf-cta,.pf a.pf-cta{transition:background var(--t)}
/* botones que todavia pintaba el tema viejo en rosa salmon: pagina de error y "ver mas" */
/* el boton de la pagina de error y "Leer mas": sus colores ya vienen de base.css (tanda 8); aca los estados */
.btn.btn-color-02:hover{background-color:var(--c-marca-h);border-color:var(--c-marca-h)}
.hm .paginacion a.btn{background:#fff;color:var(--c-marca);border:1px solid var(--c-borde);border-radius:var(--r-control);font-weight:500}
.hm .paginacion a.btn:hover,.btn.btn-tra-01:hover{border-color:var(--c-marca);background:#fff;color:var(--c-marca)}
/* .btn:focus del tema viejo lo pone blanco (antes lo tapaba un !important) */
.btn.btn-tra-01:focus{color:var(--c-marca)}
p.p-lg>.btn.btn-tra-01{border-radius:var(--r-pill);color:var(--c-texto);font-weight:400}

/* ---------- 7. foco: el mismo anillo en todo lo que se puede tocar ---------- */
/* Va con :is() y no con :where() a proposito. pink-theme.css tiene a:focus{outline:none},
   que pesa 0,1,1; :where() aporta cero y perdia en todo enlace suelto: en el 404 y en la
   paginada no se veia el foco en ninguna parada de Tab. :is() toma el peso de su argumento
   mas especifico ([tabindex], 0,1,0) y queda en 0,2,0, que gana.
   El arreglo no puede ir en pink-theme.css: ese archivo lo sirve tambien produccion.
   Sin border-radius: el anillo ya sigue la esquina del elemento, y fijarlo aca pisaba
   el radio de las tarjetas mientras estaban enfocadas. */
:is(a,button,[tabindex],summary):focus-visible{outline:2px solid var(--c-texto);outline-offset:2px}
/* el menu heredado apaga el anillo con mas peso que :is(): hay que igualarle la cadena */
.wsmenu .wsmenu-list li a:focus-visible{outline:2px solid var(--c-texto);outline-offset:-2px}
.hm-grilla>a:focus-visible,.pf-foto:focus-visible,.pf-otra:focus-visible{outline:2px solid var(--c-texto);outline-offset:3px}

/* ---------- 8. elevacion, forma y movimiento ---------- */
/* tarjetas de los listados: panel blanco que flota sobre el fondo */
.hm-grilla>a{background:var(--c-sup);border-radius:var(--r-sup);padding:8px 8px 12px;
  box-shadow:var(--s1);transition:box-shadow var(--t),transform var(--t)}
.hm-grilla>a:hover{transform:translateY(-2px);box-shadow:var(--s2)}
.hm-grilla>a .hm-foto{border-radius:9px}
.hm-grilla>a .hm-nombre{margin-top:10px;line-height:1.25}
.hm-grilla>a .hm-zona{margin-top:2px}
.hm-grilla>a .hm-resenas{margin-top:3px}
.hm-foto{background:var(--c-sup2)}
/* el cartel "Nueva" tiene que leerse igual sobre una foto clara */
.hm-marca{box-shadow:0 1px 4px rgba(0,0,0,.25)}
/* identidad verificada: tilde verde sobre la portada, abajo a la izquierda para no chocar
   con "Nueva", que va arriba a la derecha. Circulo blanco para que se lea sobre cualquier foto */
.hm-foto{position:relative}
.hm-tick{position:absolute;left:6px;bottom:6px;z-index:1;
  width:22px;height:22px;border-radius:var(--r-pill);
  background:#fff;color:var(--c-accion);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.28)}
/* en el celular la tarjeta es solo la foto, en 9:16, con el nombre y el barrio encima (propuesta
   C2, elegida el 27/09). Sin panel blanco: esos 16 px van a la foto, que pasa de 157x220 a 179x318.
   En tablet vertical (768 a 1023) es la misma tarjeta en 3 columnas: la foto pasa de 167 a 237 px.
   El recorte lo hace object-fit sobre la foto 384:538 de siempre (ver IMG_SIZES_TARJETA): asi el
   HTML no crece. La cantidad de comentarios no entra; el filtro "Con comentarios" sigue estando */
@media (max-width:767px){
  .hm-grilla{gap:8px;margin:0 -4px}
}
@media (min-width:768px) and (max-width:1023px){
  .hm-grilla{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  /* los bloques vienen de a 4, 8 o 12 (pensados para 4 columnas): la ultima fila incompleta no se
     muestra (4 -> 3, 8 -> 6). Ni en el listado paginado ni con un filtro puesto, para no esconder
     un resultado. Sin :has(), la regla se ignora y solo queda la fila incompleta */
  .hm-grilla:not(.js-lista):not(:has(.hm-oculta))>a:nth-child(3n+4):last-child,
  .hm-grilla:not(.js-lista):not(:has(.hm-oculta))>a:nth-child(3n+4):nth-last-child(2),
  .hm-grilla:not(.js-lista):not(:has(.hm-oculta))>a:nth-child(3n+4):nth-last-child(2)+a{display:none}
}
@media (max-width:1023px){
  .hm-grilla>a{position:relative;background:none;padding:0;box-shadow:none;border-radius:12px;overflow:hidden}
  .hm-grilla>a:hover{transform:none;box-shadow:none}
  .hm-grilla>a .hm-foto{border-radius:12px}
  .hm-grilla .hm-foto img{aspect-ratio:9/16}
  .hm-grilla .hm-foto::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;pointer-events:none;
    background:linear-gradient(to top,rgba(18,26,16,.88),rgba(18,26,16,.5) 45%,rgba(18,26,16,0))}
  .hm-grilla .hm-tick{top:8px;left:8px;bottom:auto}
  .hm-grilla .hm-marca{left:auto;right:8px;top:8px;z-index:1}
  /* el nombre crece hacia arriba si ocupa dos lineas; el barrio queda fijo abajo */
  .hm-grilla>a .hm-nombre,.hm-grilla>a .hm-zona{position:absolute;left:12px;right:12px;margin:0;color:#fff;z-index:1}
  .hm-grilla>a .hm-nombre{bottom:31px;font-size:16px;line-height:1.2}
  .hm-grilla>a .hm-zona{bottom:12px;font-size:13px;line-height:17px;color:rgba(255,255,255,.9);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hm-grilla>a .hm-resenas{display:none}
}
/* en el perfil, una linea y nada mas */
.pf-verificada{margin:2px 0 12px;font-size:14px;color:var(--c-texto2)}
.pf-verificada .pf-tick{color:var(--c-accion);font-weight:700;margin-right:2px}
/* una sola idea de superficie en todo el sitio: blanco, 1px de borde y esquina redondeada */
.pf-com{background:var(--c-sup);border:1px solid var(--c-borde);border-radius:var(--r-sup)}
.pf-wa-aviso{border-radius:var(--r-sup);box-shadow:var(--s3)}
.pf-barra{box-shadow:0 -4px 16px rgba(45,64,38,.10)}
@media (min-width:992px){.pf-barra{box-shadow:var(--s3)}}
/* toda foto que se puede tocar responde igual: se levanta apenas */
.pf-otra{display:block;transition:transform var(--t),box-shadow var(--t)}
.pf-otra:hover{transform:translateY(-2px);box-shadow:var(--s2)}
.hm-barrios a,.hm-filtros button,.pf a.pf-chip,.hm-mas{transition:border-color var(--t),background var(--t),color var(--t)}
.hm-mas:hover{border-color:var(--c-marca)}
/* ritmo entre secciones: las fotos son grandes y necesitan aire */
.hm-sec+.hm-sec{margin-top:46px}
/* los bloques por barrio ya se distinguen por su encabezado: el tinte extra ensuciaba */
.hm-sec-zona{background:none;padding:0}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important;animation-duration:.01ms !important}}