/* SexCita — prototipo estático (TASK-002). Tokens de diseño */
:root {
  /* Tema claro (D-012): marca en rosa con acento dorado para lo destacado/
     premium; verde reservado exclusivamente a verificación de confianza. */
  --fondo: #ffffff;
  --superficie: #fbf7f5;
  --superficie-alta: #f7eef0;
  --linea: #f0e0e3;
  --marfil: #201418;          /* texto principal */
  --marfil-suave: #6b5860;    /* texto secundario */
  --malva: #d6336c;           /* rosa de marca */
  --malva-suave: #f06595;
  --dorado: #b3872f;          /* dorado — solo para lo destacado/premium */
  --dorado-suave: #e7c878;
  --jade: #16a34a;            /* verde de verificación */
  --radio: 14px;
  --ancho: 1080px;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Karla", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--marfil);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--malva); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--malva); outline-offset: 3px; border-radius: 4px; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; }

/* ---------- Puerta de edad ---------- */
.puerta {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(21, 18, 45, .78);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.puerta[hidden] { display: none; }
.puerta-caja {
  max-width: 26rem; text-align: center;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 2.5rem 2rem;
}
.puerta-caja h1 { font-family: var(--serif); font-weight: 500; font-size: 1.9rem; margin: 0 0 .5rem; }
.puerta-caja p { color: var(--marfil-suave); font-size: .95rem; }
.puerta-acciones { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; }

/* ---------- Botones ---------- */
.boton {
  display: inline-block; padding: .8rem 1.6rem; border-radius: 999px;
  font-family: var(--sans); font-size: 1rem; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; text-align: center;
}
.boton:hover { text-decoration: none; }
.boton-primario { background: var(--malva); color: #ffffff; }
.boton-primario:hover { background: #b8265a; }
.boton-secundario { background: none; color: var(--marfil-suave); border-color: var(--linea); }
.boton-secundario:hover { color: var(--marfil); border-color: var(--malva-suave); }

/* CTA dorado premium (D-046): contraste ~10.5:1 fondo/texto, calculado —
   supera AA (4.5:1) y AAA (7:1) para texto normal. Reservado para el CTA
   principal de anunciantes, no usar en botones secundarios genéricos. */
.boton-dorado {
  background: #e3c176; color: #241109; border-color: transparent;
}
.boton-dorado:hover { background: #d9b25f; }
.boton-dorado:active { background: #c49f4d; }
.boton-dorado:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(227,193,118,.55); }
.boton-dorado:disabled { background: #a89264; color: rgba(36,17,9,.55); cursor: not-allowed; }

/* Botones de contacto externo compactos (solo icono, D-047): el chat interno
   conserva el texto porque es la acción estratégica principal; WhatsApp y
   Telegram quedan como accesos secundarios de 48x48 (mínimo táctil 44px). */
.boton-icono {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; cursor: pointer;
}
.boton-icono svg { width: 24px; height: 24px; }
.boton-icono-whatsapp { background: #25d366; color: #fff; }
.boton-icono-whatsapp:hover { background: #1fb457; }
.boton-icono-whatsapp:active { background: #189a4a; }
.boton-icono-telegram { background: #229ed9; color: #fff; }
.boton-icono-telegram:hover { background: #1d89bd; }
.boton-icono-telegram:active { background: #1875a2; }
.boton-icono:focus-visible { outline: 3px solid var(--malva); outline-offset: 2px; }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.boton-chatear { flex: 1; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; padding: .9rem 0; }
.marca { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--marfil); letter-spacing: .01em; }
.marca em { color: var(--malva); font-style: normal; }
.nav { display: flex; gap: 1.25rem; align-items: center; font-size: .95rem; }
.nav a,
.nav button { color: var(--marfil-suave); }
.nav button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.nav a:hover,
.nav button:hover { color: var(--marfil); text-decoration: none; }
.nav-cta {
  background: var(--malva); color: #fff !important; padding: .45rem 1rem; border-radius: 999px;
  font-weight: 700; font-size: .85rem;
}
.nav-cta:hover { background: #b8265a; color: #fff !important; }

@media (max-width: 640px) {
  .cabecera-fila { flex-wrap: wrap; gap: .5rem; padding: .75rem 0; }
  .nav { gap: .75rem .9rem; flex-wrap: wrap; font-size: .8rem; width: 100%; }
}

/* ---------- CTA flotante (D-069) ---------- */
/* Botón anclado al fondo del viewport mientras se lee una página larga
   (ej. /publicar/) — evita que quien no quiere leer todo tenga que llegar
   hasta el final para encontrar el CTA de registro. */
.cta-flotante {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: center;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--linea);
}
.cta-flotante .boton { width: 100%; max-width: 420px; text-align: center; }

/* ---------- Hero ---------- */
.hero-fondo {
  position: relative;
  background: linear-gradient(100deg, #150a10 0%, rgba(21,10,16,.88) 38%, rgba(21,10,16,.45) 68%, rgba(21,10,16,.15) 100%),
              url("hero-fondo.jpg");
  background-size: cover;
  background-position: center 25%;
}
.hero { padding: 6rem 0 5rem; position: relative; }
@media (max-width: 640px) {
  .hero-fondo {
    background-image: linear-gradient(180deg, rgba(21,10,16,.55) 0%, rgba(21,10,16,.94) 62%, #150a10 100%),
                       url("hero-fondo.jpg");
    background-position: center 15%;
  }
  .hero { padding: 3rem 0 2.25rem; }
}
.hero-eyebrow {
  color: var(--dorado-suave); font-size: .8rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}
.hero h1 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.12; margin: .6rem 0 1rem; max-width: 18ch; color: #fff;
}
.hero h1 em { font-style: italic; color: var(--malva-suave); }
.hero p { color: rgba(255,255,255,.82); max-width: 46ch; font-size: 1.05rem; }
.hero .puerta-acciones { margin-top: 1.5rem; }
.hero-microcopy { color: rgba(255,255,255,.6); font-size: .78rem; margin-top: 1rem; }
.franja-lanzamiento {
  background: var(--malva); color: #fff; text-align: center; font-size: .82rem;
  font-weight: 700; padding: .55rem 1rem;
}

/* ---------- Migas y secciones ---------- */
.migas { padding: 1.25rem 0 0; font-size: .85rem; color: var(--marfil-suave); }
.migas a { color: var(--marfil-suave); }
.volver-busqueda { margin: .85rem 0 0; }
.seccion { padding: 2.5rem 0; }
.seccion-titulo { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; margin: 0 0 .35rem; }
.seccion-nota { color: var(--marfil-suave); font-size: .95rem; margin: 0 0 1.5rem; }

/* ---------- Ciudades ---------- */
.ciudades { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ciudad {
  display: block; background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 1.4rem 1.5rem; color: var(--marfil);
  transition: border-color .2s ease, transform .2s ease;
}
.ciudad:hover { border-color: var(--malva-suave); transform: translateY(-2px); text-decoration: none; }
.ciudad h3 { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; margin: 0; }
.ciudad span { color: var(--marfil-suave); font-size: .85rem; }

/* ---------- Filtros de sector ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
/* D-071: en páginas de ciudad la lista de sectores crece con el tiempo
   (norte, sur, y lo que cada anunciante ponga) — en vez de agruparse en
   varias filas, se desplaza en una sola barra horizontal, como el carrusel
   de fotos. La búsqueda por palabra clave ya encuentra sectores que no
   están en esta lista corta (son solo accesos rápidos a los más comunes). */
.chips--desplazable {
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; touch-action: pan-x;
  -webkit-overflow-scrolling: touch; padding-bottom: .4rem;
}
.chips--desplazable .chip { flex: 0 0 auto; white-space: nowrap; }
.barra-filtros { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
.barra-filtros .chat-input { flex: 1 1 220px; min-width: 0; }
.barra-filtros select {
  flex: 0 1 190px; min-width: 0; padding: .6rem .8rem; border: 1px solid var(--linea);
  border-radius: 8px; font-family: var(--sans); font-size: .9rem; background: var(--superficie); color: var(--marfil);
}
.chip {
  padding: .35rem .95rem; border-radius: 999px; font-size: .85rem;
  border: 1px solid var(--linea); color: var(--marfil-suave); background: none; cursor: pointer; font-family: inherit;
}
.chip:hover { border-color: var(--malva-suave); color: var(--marfil); text-decoration: none; }
.chip-activo { border-color: var(--malva); color: var(--malva); }
.link-boton {
  background: none; border: 0; padding: 0; color: var(--malva); font: inherit;
  cursor: pointer; text-decoration: underline;
}

/* ---------- Selección de servicios (checkboxes tipo chip) ---------- */
.chips-seleccion { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.chip-seleccionable {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .35rem .9rem; border-radius: 999px; font-size: .85rem;
  border: 1px solid var(--linea); color: var(--marfil-suave); user-select: none;
}
.chip-seleccionable input { accent-color: var(--malva); }
.chip-seleccionable:has(input:checked) { border-color: var(--malva); color: var(--malva); background: var(--superficie-alta); }

/* ---------- Tarjetas de perfil (fila estilo listado clásico) ---------- */
.perfiles { display: flex; flex-direction: column; gap: 1rem; }
.tarjeta {
  box-shadow: 0 1px 3px rgba(21,33,41,.07);
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: var(--radio); overflow: hidden;
}
.tarjeta-fila { display: flex; gap: 0; align-items: stretch; }
/* D-046: +30% de presencia visual respecto al tamaño anterior (miniatura
   108px → 140px de ancho, con aspect-ratio fijo 4/5 en vez de depender del
   alto del contenido — antes la miniatura solo estiraba a lo que midiera el
   cuerpo, ahora fuerza una tarjeta más alta de forma consistente). */
.tarjeta-miniatura {
  flex: 0 0 160px; width: 160px; aspect-ratio: 4 / 5; position: relative; display: block;
  background-color: var(--superficie-alta); background-size: cover; background-position: center top;
  overflow: hidden;
}
.tarjeta-slider-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
  transition: opacity .22s ease; pointer-events: none; -webkit-user-drag: none;
}
.tarjeta-puntos-mini { position: absolute; bottom: .35rem; left: 0; right: 0; display: flex; justify-content: center; gap: .25rem; z-index: 2; }
.tarjeta-punto-mini { width: .3rem; height: .3rem; border-radius: 50%; background: rgba(255,255,255,.5); }
.tarjeta-punto-mini.activo { background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .tarjeta-slider-img { transition: none; }
}
.tarjeta-nota-fotos { font-size: .72rem; color: var(--marfil-suave); font-style: italic; }
.tarjeta-contador-fotos {
  position: absolute; bottom: .35rem; right: .35rem; font-size: .65rem;
  background: rgba(32,20,24,.65); color: #fff; border-radius: 4px; padding: .05rem .35rem; z-index: 2;
}
.tarjeta-cuerpo { padding: 1.15rem 1.4rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; min-width: 0; }
.tarjeta-nombre { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; margin: 0; line-height: 1.25; }
.tarjeta-nombre a { color: var(--malva); }
.tarjeta-descripcion {
  color: var(--marfil-suave); font-size: .85rem; margin: 0; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta-zona { color: var(--marfil-suave); font-size: .78rem; }
.tarjeta-pie { display: flex; justify-content: space-between; align-items: center; margin-top: .1rem; font-size: .8rem; }
.tarjeta-insignias { margin-top: auto; padding-top: .3rem; display: flex; gap: .5rem; }
.reportar { color: var(--marfil-suave); font-size: .8rem; }
.reportar:hover { color: var(--malva); }

/* ---------- Sello de verificación ---------- */
.sello {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--jade); font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.sello::before {
  content: "✓"; display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  border: 1.5px solid var(--jade); font-size: .7rem;
}
.sello-pendiente { color: var(--marfil-suave); }
.sello-pendiente::before { content: "⏳"; border: none; font-size: .8rem; }

/* ---------- Estado de conexión (D-074/D-075) ---------- */
/* Versión discreta para debajo del nombre en la ficha — texto liviano, sin
   negrita, para que no compita con el título. */
.estado-conexion {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 400; letter-spacing: .01em;
}
.estado-conexion::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; flex: 0 0 auto; }
.estado-conexion--en-linea { color: var(--jade); }
.estado-conexion--en-linea::before { background: var(--jade); }
.estado-conexion--desconectada { color: var(--marfil-suave); }
.estado-conexion--desconectada::before { background: var(--marfil-suave); }

/* Versión sobre la miniatura del listado — solo el punto, sin texto, con un
   aro claro para que se distinga sobre cualquier foto. */
.tarjeta-estado-conexion {
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  width: .55rem; height: .55rem; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.85);
}
.tarjeta-estado-conexion--en-linea { background: var(--jade); }
.tarjeta-estado-conexion--desconectada { background: rgba(255,255,255,.55); }

/* ---------- Franja de confianza ---------- */
.confianza { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.confianza-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding: 2.5rem 0; }
.confianza-item h3 { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; margin: 0 0 .35rem; }
.confianza-item p { color: var(--marfil-suave); font-size: .92rem; margin: 0; }

/* ---------- Ficha de perfil ---------- */
.ficha { display: grid; gap: 2rem; padding: 2.5rem 0 6rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .ficha { grid-template-columns: 380px 1fr; padding-bottom: 2.5rem; } }
.ficha-foto { border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); position: relative; }
.ficha h1 { font-family: var(--serif); font-weight: 500; font-size: 1.8rem; margin: .35rem 0 .25rem; }
.ficha-zona { color: var(--marfil-suave); margin-bottom: 1rem; }
.ficha-datos { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.25rem 0; padding: 0; list-style: none; font-size: .92rem; color: var(--marfil-suave); }
.ficha-datos strong { color: var(--marfil); font-weight: 700; }

/* ---------- Carrusel táctil de la ficha (con marca de agua anti-robo) ---------- */
.carrusel-ficha {
  position: relative; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea);
  background: var(--superficie-alta); aspect-ratio: 3 / 4;
}
.carrusel-vacio { display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; color: var(--marfil-suave); }
/* D-073: sin touch-action aquí a propósito — "pan-x" impedía además el
   scroll vertical de TODA la página cuando el dedo arrancaba sobre la
   imagen (el spec no lo delega al ancestro), y en móvil la imagen ocupa
   buena parte de la pantalla. overflow-y:hidden ya evita el mini-scroll
   vertical interno (D-068); el navegador delega el gesto vertical a la
   página automáticamente al no haber overflow-y en este elemento. */
.carrusel-pista {
  display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; height: 100%; }
.carrusel-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .25s ease; pointer-events: none; -webkit-user-drag: none;
}

/* ---------- Visor ampliado (lightbox) de la ficha ---------- */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: rgba(10,6,8,.94); align-items: center; justify-content: center;
}
.lightbox.abierto { display: flex; }
/* D-068: envoltorio que se ajusta exactamente al tamaño renderizado de la
   imagen (inline-block, sin ancho/alto propio) — así la marca de agua
   (position:absolute; inset:0 dentro de este marco) cae siempre sobre la
   imagen real y no sobre el letterboxing que deja object-fit:contain. */
.lightbox-marco { position: relative; display: inline-block; max-width: 92vw; max-height: 88vh; }
.lightbox-img {
  max-width: 92vw; max-height: 88vh; object-fit: contain; display: block;
  -webkit-user-drag: none;
}
.lightbox-cerrar {
  position: absolute; top: calc(.75rem + env(safe-area-inset-top)); right: .75rem;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; font-size: 1.2rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-cerrar:hover { background: rgba(255,255,255,.22); }
.lightbox-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; font-size: 1.6rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-flecha:hover { background: rgba(255,255,255,.22); }
.lightbox-anterior { left: .75rem; }
.lightbox-siguiente { right: .75rem; }
.lightbox-contador {
  position: absolute; bottom: calc(1rem + env(safe-area-inset-bottom)); left: 0; right: 0;
  text-align: center; color: rgba(255,255,255,.75); font-size: .82rem;
}
/* Marca de agua diagonal repetida: desalienta la reutilización de la foto
   aunque se capture la pantalla (no existe un bloqueo real de screenshot
   desde la web — ver D-039). */
.marca-agua {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    -30deg,
    transparent 0, transparent 90px,
    rgba(255,255,255,.16) 90px, rgba(255,255,255,.16) 91px
  );
}
.marca-agua::after {
  content: "SexCita"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 3.2rem; font-weight: 600; color: rgba(255,255,255,.14);
  transform: rotate(-30deg); white-space: nowrap; letter-spacing: .1em;
}
.carrusel-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 2.2rem; height: 2.2rem; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(32,20,24,.55); color: #fff; font-size: 1.3rem; line-height: 1;
}
.carrusel-anterior { left: .5rem; }
.carrusel-siguiente { right: .5rem; }
.carrusel-puntos { position: absolute; bottom: .6rem; left: 0; right: 0; display: flex; justify-content: center; gap: .35rem; z-index: 2; }
.carrusel-punto { width: .4rem; height: .4rem; border-radius: 50%; background: rgba(255,255,255,.5); }
.carrusel-punto.activo { background: #fff; }
.ficha-video { margin-top: 2rem; }

/* ---------- Barra de contacto: fija abajo en celular, fila estática en
   escritorio (antes en escritorio quedaba oculta y la ficha no tenía ningún
   botón de contacto — bug corregido en D-047). ---------- */
.barra-chat-flotante {
  display: flex; gap: .6rem; align-items: center; max-width: 480px; margin: 1.5rem 0;
}
@media (max-width: 719px) {
  .barra-chat-flotante {
    max-width: none; margin: 0; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background: var(--fondo); border-top: 1px solid var(--linea); box-shadow: 0 -2px 10px rgba(21,33,41,.08);
  }
  .barra-chat-flotante .boton { text-align: center; padding: .65rem .5rem; font-size: .9rem; }
}
.aviso {
  background: var(--superficie); border: 1px solid var(--linea);
  border-left: 3px solid var(--jade); border-radius: 8px;
  padding: .9rem 1.1rem; font-size: .88rem; color: var(--marfil-suave);
  margin-top: 1.5rem;
}

/* ---------- Etiqueta demo y pie ---------- */
.demo {
  display: inline-block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: #ffffff; background: var(--marfil-suave); border-radius: 4px;
  padding: .1rem .5rem; font-weight: 700;
}
.pie { border-top: 1px solid var(--linea); margin-top: 3rem; padding: 2rem 0 2.5rem; font-size: .85rem; color: var(--marfil-suave); }
.pie a { color: var(--marfil-suave); }
.pie-fila { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; }

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Tarifa y destacados (monetización, Fase 2) ---------- */
.tarjeta-tarifa { color: var(--marfil); font-size: .9rem; font-weight: 700; }
.tarjeta-tarifa small { color: var(--marfil-suave); font-weight: 400; }
.etiqueta-destacada {
  position: absolute; top: .6rem; left: .6rem; z-index: 2;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: #3d2e0a; background: linear-gradient(135deg, var(--dorado-suave), var(--dorado));
  border-radius: 4px; padding: .15rem .5rem;
}

/* ---------- Chat (maqueta TASK-007 / D-006) ---------- */
.chat-marco {
  max-width: 640px; margin: 2rem auto; border: 1px solid var(--linea);
  border-radius: var(--radio); background: var(--fondo); box-shadow: 0 2px 8px rgba(21,33,41,.08);
  display: flex; flex-direction: column; overflow: hidden; min-height: 70vh;
}
.chat-cabecera {
  display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--linea); background: var(--superficie-alta);
}
.chat-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: radial-gradient(120% 90% at 50% 100%, #f0b8cc, #fbeaf0);
}
.chat-quien h2 { font-family: var(--serif); font-size: 1.1rem; font-weight: 500; margin: 0; }
.chat-quien span { font-size: .8rem; color: var(--marfil-suave); }
.chat-quien h2 .demo { color: #fff; font-size: .72rem; }
.en-linea { color: var(--jade); font-weight: 700; }
.en-linea::before { content: "●"; margin-right: .3rem; font-size: .7rem; }
.chat-cuerpo { flex: 1; padding: 1.25rem 1.1rem; display: flex; flex-direction: column; gap: .75rem; overflow-y: auto; }
.burbuja {
  max-width: 78%; padding: .65rem 1rem; border-radius: 16px; font-size: .95rem;
  line-height: 1.45; animation: aparecer .3s ease both;
}
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } }
.de-ella { align-self: flex-start; background: var(--superficie-alta); border-bottom-left-radius: 4px; }
.de-cliente { align-self: flex-end; background: var(--malva); color: #ffffff; border-bottom-right-radius: 4px; }
.automatica { border: 1px dashed var(--malva-suave); background: none; }
.etiqueta-auto {
  display: block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--malva); font-weight: 700; margin-bottom: .3rem;
}
.chat-hora { font-size: .68rem; color: var(--marfil-suave); margin-top: .25rem; display: block; }
.escribiendo { align-self: flex-start; color: var(--marfil-suave); font-size: .85rem; font-style: italic; }
.tarjeta-numero {
  align-self: center; text-align: center; border: 1px solid var(--linea);
  border-radius: 12px; padding: 1rem 1.4rem; background: var(--superficie-alta);
  font-size: .9rem; color: var(--marfil-suave); max-width: 90%;
}
.tarjeta-numero strong { color: var(--jade); display: block; font-size: 1.05rem; margin-top: .35rem; letter-spacing: .05em; }
.chat-pie { display: flex; gap: .6rem; padding: .8rem 1rem; border-top: 1px solid var(--linea); }
.chat-input {
  flex: 1; background: var(--fondo); border: 1px solid var(--linea); border-radius: 999px;
  padding: .7rem 1.1rem; color: var(--marfil); font-family: var(--sans); font-size: .95rem;
}
.chat-input::placeholder { color: var(--marfil-suave); }
/* D-057 (TASK-039): compositor multilínea (Enter envía, Shift+Enter salto
   de línea) — mismo aspecto que el input de una línea que reemplaza. */
textarea.chat-input {
  border-radius: 18px; resize: none; max-height: 6.5rem; overflow-y: auto;
  font-family: var(--sans); line-height: 1.35;
}
/* D-060 (TASK-039): adjuntar foto en el chat — botón, vista previa antes
   de enviar, y la burbuja de imagen ya enviada. */
.chat-adjuntar {
  background: none; border: none; font-size: 1.3rem; cursor: pointer;
  flex: none; width: 2.2rem; height: 2.2rem; display: flex; align-items: center; justify-content: center;
  color: var(--marfil-suave); border-radius: 50%;
}
.chat-adjuntar:hover { background: var(--superficie-alta); color: var(--marfil); }
.chat-previa-foto {
  align-items: center; gap: .6rem; padding: .6rem 1rem; border-top: 1px solid var(--linea);
  flex-wrap: wrap;
}
.chat-previa-foto img { max-width: 90px; max-height: 90px; border-radius: 10px; object-fit: cover; }
.burbuja-foto { max-width: 100%; border-radius: 12px; display: block; }
.chat-avatar { display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.05rem; color: #6b3450; }
.etiqueta-temporal {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  color: var(--malva); border: 1px solid var(--malva-suave); border-radius: 999px; padding: .05rem .5rem; margin-left: .4rem;
}
.chat-mensaje-error { color: #dc2626; font-size: .72rem; margin-top: .2rem; }
.chat-reintentar { background: none; border: none; color: #dc2626; text-decoration: underline; font-size: .72rem; cursor: pointer; padding: 0; }

/* Bandeja de la anunciante */
.bandeja { display: flex; flex-direction: column; gap: 1rem; max-width: 680px; margin: 0 auto; }
.solicitud {
  box-shadow: 0 1px 3px rgba(21,33,41,.07);
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo);
  padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .6rem;
}
.solicitud-fila { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.cliente-id { font-family: var(--serif); font-size: 1.1rem; }
.reputacion { display: flex; flex-wrap: wrap; gap: .45rem; }
.rep {
  font-size: .78rem; padding: .2rem .7rem; border-radius: 999px; border: 1px solid var(--linea);
  color: var(--marfil-suave);
}
.rep-buena { border-color: var(--jade); color: var(--jade); }
.rep-mala { border-color: #ef4444; color: #dc2626; }
.solicitud-acciones { display: flex; gap: .6rem; margin-top: .35rem; }
.boton-mini { padding: .45rem 1.1rem; font-size: .85rem; }
.banner-push {
  display: flex; gap: .7rem; align-items: center; border: 1px solid var(--linea);
  border-left: 3px solid var(--malva); border-radius: 10px; padding: .8rem 1rem;
  background: var(--superficie-alta); font-size: .88rem; color: var(--marfil-suave);
  max-width: 680px; margin: 0 auto 1.25rem;
}

/* ---------- Protección de imágenes (D-008) ---------- */
.tarjeta-foto, .ficha-foto, .chat-avatar {
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.tarjeta-foto img, .ficha-foto img { pointer-events: none; -webkit-user-drag: none; }
.proteccion-aviso {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  background: var(--superficie-alta); border: 1px solid var(--malva-suave);
  color: var(--marfil); border-radius: 999px; padding: .6rem 1.3rem;
  font-size: .85rem; z-index: 60; animation: aparecer .25s ease both;
}

/* ---------- Anti-fraude: foto verificada / alerta de duplicado (D-010) ---------- */
.sello-foto {
  position: absolute; bottom: .6rem; right: .6rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(255,255,255,.92); color: #16a34a; font-weight: 700;
  font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px; padding: .25rem .6rem .25rem .5rem;
  box-shadow: 0 1px 4px rgba(21,33,41,.15);
}
.sello-foto svg { width: 12px; height: 12px; flex: none; }

.panel-moderacion { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.caso-moderacion {
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo);
  box-shadow: 0 1px 3px rgba(21,33,41,.07); padding: 1.1rem 1.25rem;
}
.caso-alerta { border-left: 4px solid #ef4444; }
.caso-ok { border-left: 4px solid #16a34a; }
.caso-fila { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.caso-comparacion { display: flex; gap: 1rem; margin: .9rem 0; align-items: center; flex-wrap: wrap; }
.miniatura {
  width: 96px; height: 128px; border-radius: 10px; flex: none;
  background: radial-gradient(120% 90% at 50% 100%, #f0b8cc, #fbeaf0);
  border: 1px solid var(--linea); position: relative; overflow: hidden;
}
.miniatura span {
  position: absolute; bottom: 0; left: 0; right: 0; text-align: center;
  font-size: .65rem; color: #3d3564; background: rgba(255,255,255,.7); padding: .15rem 0;
}
.comparacion-vs { font-family: var(--serif); font-style: italic; color: var(--marfil-suave); }
.porcentaje-match {
  font-family: var(--serif); font-size: 1.4rem; color: #dc2626; font-weight: 500;
}
.caso-acciones { display: flex; gap: .6rem; margin-top: .75rem; }

/* ---------- Cita segura (D-011) ---------- */
.cita-segura {
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo);
  box-shadow: 0 1px 3px rgba(21,33,41,.07); padding: 1.25rem 1.4rem; max-width: 480px; margin: 0 auto 1.5rem;
}
.cita-segura h3 { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; margin: 0 0 .3rem; }
.cita-campo { margin: .9rem 0; }
.cita-campo label { display: block; font-size: .85rem; color: var(--marfil-suave); margin-bottom: .35rem; }
.cita-campo input, .cita-campo select {
  width: 100%; padding: .6rem .8rem; border: 1px solid var(--linea); border-radius: 8px;
  font-family: var(--sans); font-size: .95rem; background: var(--superficie); color: var(--marfil);
}
.campo-whatsapp { display: flex; gap: .5rem; }
.campo-whatsapp .prefijo-whatsapp {
  flex: 0 0 auto; display: flex; align-items: center; padding: .6rem .7rem;
  border: 1px solid var(--linea); border-radius: 8px; background: var(--superficie-alta);
  color: var(--marfil-suave); font-size: .95rem; white-space: nowrap;
}
.campo-whatsapp input { flex: 1; min-width: 0; }

/* ---------- Formulario de acceso (D-067) ---------- */
/* Ámbito acotado a .acceso-form: no toca .cita-segura/.cita-campo base,
   usados por otros formularios (citas, contacto) que no deben verse
   afectados por este ajuste. */
.acceso-form { display: block; }
.acceso-form .cita-campo input { box-sizing: border-box; min-height: 44px; }
.acceso-form__ayuda { display: block; margin-top: .35rem; font-size: .78rem; color: var(--marfil-suave); }
.acceso-form__recuperacion {
  display: block; margin-top: .5rem; font-size: .85rem; text-align: right;
}
.acceso-form__error {
  background: #fef2f2; border: 1px solid #fecaca; border-left: 3px solid #dc2626;
  border-radius: 8px; padding: .8rem 1rem; font-size: .88rem; color: #991b1b; margin-bottom: 1rem;
}
.acceso-form__acciones { margin-top: 1.15rem; display: flex; flex-direction: column; gap: .75rem; }
.acceso-form__principal {
  width: 100%; box-sizing: border-box; min-height: 44px;
}
.acceso-form__principal:disabled { opacity: .7; cursor: not-allowed; }
.acceso-form__alternar { margin: 0; text-align: center; font-size: .9rem; color: var(--marfil-suave); }
.acceso-form__alternar .link-boton { margin-left: .3rem; }
.temporizador-activo {
  display: flex; align-items: center; gap: .6rem; background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: 10px; padding: .8rem 1rem; margin-top: 1rem; color: #166534; font-size: .9rem;
}
.temporizador-activo strong { font-variant-numeric: tabular-nums; }
.palabra-clave-chip {
  display: inline-flex; align-items: center; gap: .35rem; border: 1px dashed var(--malva-suave);
  border-radius: 999px; padding: .3rem .8rem; font-size: .8rem; color: var(--malva); background: none;
}

.chat-avatar, .miniatura { background-size: cover; background-position: center top; background-color: var(--superficie-alta); }

/* ---------- Toggle en línea (D-015) ---------- */
.toggle-linea { display: inline-flex; align-items: center; gap: .6rem; }
.toggle-switch {
  position: relative; width: 46px; height: 26px; border-radius: 999px;
  background: var(--linea); border: none; cursor: pointer; flex: none; padding: 0;
}
.toggle-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s ease;
}
.toggle-switch[aria-pressed="true"] { background: var(--jade); }
.toggle-switch[aria-pressed="true"]::after { transform: translateX(20px); }
.toggle-texto { font-size: .85rem; font-weight: 700; color: var(--marfil-suave); }
.toggle-switch[aria-pressed="true"] ~ .toggle-texto,
.toggle-linea:has(.toggle-switch[aria-pressed="true"]) .toggle-texto { color: #16a34a; }

/* ---------- Bandeja de mensajes: lista + conversación (D-015) ---------- */
.mensajeria {
  max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 300px 1fr;
  border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden;
  box-shadow: 0 1px 3px rgba(21,33,41,.07); min-height: 65vh; background: var(--fondo);
}
@media (max-width: 760px) { .mensajeria { grid-template-columns: 1fr; } }
.lista-conversaciones { border-right: 1px solid var(--linea); background: var(--superficie); overflow-y: auto; }
.chat-panel { display: flex; flex-direction: column; min-height: 0; }
/* D-057 (TASK-039): dentro de la bandeja de dos paneles, el .chat-marco
   reutilizado deja de ser una tarjeta centrada de ancho fijo (su estilo
   original, D-006/D-015) y pasa a ocupar todo el panel derecho. */
.chat-panel .chat-marco { max-width: none; margin: 0; height: 100%; box-shadow: none; border: none; border-radius: 0; }
.chat-vacio { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; padding: 2rem; }
.conversacion-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--linea); padding: .85rem 1rem; cursor: pointer;
}
.conversacion-item:hover { background: var(--superficie-alta); }
.conversacion-item.activa { background: var(--fondo); border-left: 3px solid var(--malva); }
.conversacion-fila { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; }
.conversacion-nombre { font-weight: 700; font-size: .9rem; }
.conversacion-hora { font-size: .72rem; color: var(--marfil-suave); }
.conversacion-preview { font-size: .82rem; color: var(--marfil-suave); margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversacion-noleido {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--malva); margin-left: .4rem;
}

/* ---------- Barra de tabs móvil del panel (D-017) ---------- */
.tabs-movil { display: none; }
body.con-tabs-movil { padding-bottom: 0; }
@media (max-width: 760px) {
  .tabs-movil {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
    background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--linea); padding: .4rem 0 calc(.4rem + env(safe-area-inset-bottom));
  }
  .tabs-movil a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem;
    font-size: .68rem; color: var(--marfil-suave); font-weight: 700; text-decoration: none;
  }
  .tabs-movil a span { font-size: 1.15rem; }
  .tabs-movil a.tab-activa { color: var(--malva); }
  body.con-tabs-movil { padding-bottom: 4.2rem; }
}

/* ---------- Chat en móvil: lista ⇄ conversación tipo WhatsApp (D-017) ---------- */
.btn-volver-lista { display: none; }
@media (max-width: 760px) {
  .btn-volver-lista {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; margin-right: .3rem; flex: none;
    background: none; border: none; font-size: 1.3rem; color: var(--malva); cursor: pointer;
  }
  .mensajeria .chat-panel { display: none; }
  .mensajeria.mostrando-chat .lista-conversaciones { display: none; }
  .mensajeria.mostrando-chat .chat-panel { display: flex; }
}

/* ---------- Galería de medios del perfil (D-018) ---------- */
.galeria-medios { margin: 1.5rem 0; }
.galeria-titulo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; }
.galeria-titulo label { font-size: .85rem; color: var(--marfil-suave); }
.galeria-contador { font-size: .78rem; color: var(--marfil-suave); }
.galeria-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
}
.galeria-item {
  aspect-ratio: 1; border-radius: 10px; overflow: hidden; position: relative;
  background: var(--superficie-alta); border: 1px solid var(--linea);
}
.galeria-item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.galeria-item { cursor: grab; }
.galeria-item.arrastrando { opacity: .4; }
.galeria-portada {
  position: absolute; top: .25rem; left: .25rem; z-index: 1; font-size: .62rem;
  background: var(--malva); color: #fff; padding: .12rem .4rem; border-radius: 4px;
}
.galeria-item .quitar {
  position: absolute; top: .25rem; right: .25rem; width: 1.3rem; height: 1.3rem;
  border-radius: 50%; background: rgba(32,20,24,.65); color: #fff; border: none;
  font-size: .75rem; line-height: 1; cursor: pointer;
}
.galeria-agregar {
  aspect-ratio: 1; border-radius: 10px; border: 1.5px dashed var(--linea);
  background: none; color: var(--marfil-suave); font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.galeria-agregar:hover { border-color: var(--malva-suave); color: var(--malva); }
.video-slot {
  aspect-ratio: 16/9; border-radius: 10px; border: 1.5px dashed var(--linea);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; color: var(--marfil-suave); font-size: .85rem; cursor: pointer; background: none; width: 100%;
}
.video-slot:hover { border-color: var(--malva-suave); color: var(--malva); }
.video-slot span:first-child { font-size: 1.6rem; }

/* ---------- Actividad diaria: racha e insignia (D-018) ---------- */
.racha-banner {
  display: flex; align-items: center; gap: .8rem; border: 1px solid var(--linea);
  border-left: 3px solid var(--dorado); border-radius: 10px; padding: .9rem 1.1rem;
  background: var(--superficie-alta); margin: 1.25rem 0;
}
.racha-emoji { font-size: 1.6rem; flex: none; }
.racha-texto strong { color: var(--dorado); }
.insignia-activa {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem;
  font-weight: 700; color: var(--dorado); background: #fbf3e2; border-radius: 999px;
  padding: .15rem .55rem;
}