/*
 * Agendate — el perfil público de un negocio y el directorio (08-10-2026).
 * La misma piel del formulario de reserva: fondo claro, tinta azul oscura, azul del sitio, Poppins en los títulos.
 * Todo cuelga de body.agdt-dir. En el teléfono no hay caja blanca de fondo: lo blanco es cada pieza.
 *
 * 360:  una columna con 16 de margen; el botón principal del perfil queda fijo abajo.
 * 768:  tarjetas de a dos.
 * 1280: columna de hasta 1240 (el ancho del sitio); perfil en dos columnas (contenido + ficha fija de 360), tarjetas de a tres.
 */
/* (Los colores y la letra cuelgan de .agdt-dir, que puede ser el <body> de nuestras páginas o una caja suelta: la tira
   de negocios que va dentro de la portada y las páginas comerciales.) */
.agdt-dir {
  --suelo: #EDF2FA; --papel: #ffffff; --tinta: #12233D; --gris: #4a5a70; --tenue: #6f7d92; --linea: #d6deeb;
  --azul: #2283CF; --azul-tinta: #1a6fb3; --azul-suave: #e3effa; --wsp: #128C4B;
  --rotulo: #2c3d57; --lectura: #64728a;
  --abierto: #0f7a4a; --aviso: #8a5a00; --aviso-suave: #fff4d9;
  --titulo: "Poppins", "Segoe UI", system-ui, sans-serif; --texto: "Roboto", system-ui, -apple-system, sans-serif;
  --sombra: 0 14px 34px -18px rgba(18, 35, 61, .35); --salida: cubic-bezier(.23, 1, .32, 1);
  color: var(--tinta); font: 400 16px/1.5 var(--texto); -webkit-tap-highlight-color: transparent;
}
body.agdt-dir { margin: 0; background: var(--suelo); -webkit-text-size-adjust: 100%; }
.agdt-dir *, .agdt-dir *::before, .agdt-dir *::after { box-sizing: border-box; }
.agdt-dir h1, .agdt-dir h2, .agdt-dir h3, .agdt-dir p { margin: 0; }
.agdt-dir h1, .agdt-dir h2, .agdt-dir h3 { font-family: var(--titulo); text-wrap: balance; letter-spacing: -.01em; color: var(--tinta); }
.agdt-dir a { color: var(--azul-tinta); }
.agdt-dir button, .agdt-dir input { font: inherit; color: inherit; }
.agdt-dir button { touch-action: manipulation; cursor: pointer; }
.agdt-dir :focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.agdt-dir svg { display: block; flex: none; }
.agdt-dir img { max-width: 100%; }
.agdt-dir [hidden] { display: none !important; }

/* El contenido mide hasta 1240, el ancho de siempre del sitio (el dueño, 08-10-2026: «el ancho que veníamos manejando
   cuando yo construía con Elementor es de 1240»). 1272 = 1240 + los 16 de margen de cada lado. */
.agdt-dir .hoja { box-sizing: border-box; max-width: 1272px; margin: 0 auto; padding-inline: 16px; padding-block: calc(16px + env(safe-area-inset-top, 0px)) 32px; }
.agdt-dir .marca { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.agdt-dir .marca .sitio { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
/* El logo de Agendate, con el tamaño que tiene en las demás páginas propias (ingresar, registro): 176, y 208 desde 600.
   El dueño, 08-10-2026: «el logotipo del encabezado está muy chico» (medía 109). */
.agdt-dir { --logo-ancho: 176px; --letra-titulo: clamp(28px, 7vw, 40px); }
@media (min-width: 600px) { .agdt-dir { --logo-ancho: 208px; } }
/* El DIBUJO del logo empieza donde empieza lo de abajo. La imagen trae 18 de sus 400 de ancho en aire transparente a la
   izquierda (4,5 %): se corre eso hacia afuera. Y en el directorio, donde debajo va el título, se suma el hombro de su
   primera letra (Poppins 700: 6,2 % del tamaño de la letra), así quedan tinta con tinta.
   El dueño, 08-10-2026: «el borde del logo … no está alineado con donde empieza la letra E … me enoja muchísimo». */
.agdt-dir .marca .sitio img { display: block; width: var(--logo-ancho); max-width: none; height: auto; }
/* (El corrimiento va en el enlace, no en la imagen: con margen negativo la imagen se achicaba.) */
.agdt-dir .marca .sitio { margin-left: calc(var(--logo-ancho) * -0.045); }
.agdt-dir-directorio .marca .sitio { margin-left: calc(var(--letra-titulo) * 0.062 - var(--logo-ancho) * 0.045); }
.agdt-dir .marca .sitio b { display: flex; align-items: center; gap: 8px; color: var(--tinta); font: 700 20px/1 var(--titulo); }
.agdt-dir .marca .sitio b i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--azul); color: #fff; font: 700 16px/1 var(--titulo); font-style: normal; }
.agdt-dir .marca .enlace { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/1.2 var(--texto); text-decoration: none; }
.agdt-dir .pie-sitio { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linea); color: var(--gris); font-size: 14px; }
.agdt-dir .pie-sitio a { display: inline-flex; align-items: center; min-height: 44px; }
.agdt-dir .pie-sitio span { margin-right: auto; }
/* El botón fijo del perfil tapa el final de la página: se le deja lugar. */
.agdt-dir-perfil .hoja { padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }

/* —— Piezas compartidas —— */
.agdt-dir .pildora { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: var(--azul-suave); color: var(--azul-tinta); font: 500 13px/1.2 var(--texto); }
.agdt-dir .pildora.abierto { background: #dff3e8; color: var(--abierto); }
.agdt-dir .pildora.cerrado { background: #e9edf4; color: var(--gris); }
.agdt-dir .pildora.sin { background: var(--aviso-suave); color: var(--aviso); }
.agdt-dir .pildora i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.agdt-dir .principal { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 56px; border: 0; border-radius: 99px; background: var(--azul); color: #fff; font: 600 17px/1.2 var(--titulo); text-align: center; text-decoration: none; box-shadow: 0 14px 26px -14px rgba(34, 131, 207, .9); transition: transform 140ms var(--salida); }
.agdt-dir .principal::after { content: ""; position: absolute; right: 8px; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a6fb3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px no-repeat; }
.agdt-dir .principal.wsp { background: var(--wsp); box-shadow: 0 14px 26px -14px rgba(18, 140, 75, .9); }
.agdt-dir .principal.wsp::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23128C4B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); }
.agdt-dir .principal:active, .agdt-dir .chico:active, .agdt-dir .tarjeta:active { transform: scale(.98); }
.agdt-dir .chico { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--linea); border-radius: 99px; background: var(--papel); color: var(--tinta); font: 500 14px/1.2 var(--texto); text-decoration: none; white-space: nowrap; transition: transform 140ms var(--salida); }
.agdt-dir .chico.azul { border-color: var(--azul); background: var(--azul); color: #fff; }
.agdt-dir .seccion { padding: 20px; border-radius: 22px; background: var(--papel); }
.agdt-dir .seccion > h2 { margin-bottom: 14px; font-size: 19px; font-weight: 600; line-height: 1.3; }
.agdt-dir .logo { flex: none; display: block; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--papel); box-shadow: 0 0 0 1px var(--linea); }
.agdt-dir .logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.agdt-dir .logo.sin { display: grid; place-items: center; background: var(--azul-suave); color: var(--azul-tinta); font: 600 20px/1 var(--titulo); }
.agdt-dir .logo.grande { width: 92px; height: 92px; box-shadow: 0 0 0 3px var(--papel), var(--sombra); font-size: 30px; }

/* —— Directorio —— */
.agdt-dir .dir h1 { font-size: var(--letra-titulo); font-weight: 700; line-height: 1.12; }
.agdt-dir .dir .bajada { margin-top: 8px; max-width: 46ch; color: var(--gris); }
.agdt-dir .busca { position: relative; margin-top: 20px; }
.agdt-dir .busca input { width: 100%; height: 56px; margin: 0; padding: 0 18px 0 50px; border: 1px solid var(--linea); border-radius: 99px; background: var(--papel); color: var(--tinta); font-size: 16px; -webkit-appearance: none; appearance: none; }
.agdt-dir .busca svg { position: absolute; left: 18px; top: 17px; color: var(--tenue); pointer-events: none; }
.agdt-dir .rubros { display: flex; gap: 8px; margin: 14px -16px 0; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.agdt-dir .rubros::-webkit-scrollbar { display: none; }
.agdt-dir .rubros a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--linea); border-radius: 99px; background: var(--papel); color: var(--gris); font: 500 14px/1 var(--texto); text-decoration: none; white-space: nowrap; }
.agdt-dir .rubros a[aria-current="page"] { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.agdt-dir .modo { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin: 18px 0 12px; }
.agdt-dir .modo > span { color: var(--gris); font-size: 14px; }
.agdt-dir .tira { display: inline-flex; padding: 4px; border-radius: 99px; background: #dbe4f1; }
.agdt-dir .tira button { min-height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: 99px; background: transparent; color: var(--gris); font: 500 14px/1 var(--texto); }
.agdt-dir .tira button[aria-pressed="true"] { background: var(--papel); color: var(--tinta); box-shadow: 0 1px 3px rgba(18, 35, 61, .16); }
/* Todas las tarjetas del mismo alto, también entre renglones (pedido del dueño, 08-10-2026): cada renglón mide lo que la más alta. */
.agdt-dir .lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.agdt-dir .tarjeta { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border-radius: 22px; background: var(--papel); color: var(--tinta); text-decoration: none; transition: transform 140ms var(--salida); }
.agdt-dir .tarjeta .cab { display: flex; align-items: center; gap: 12px; min-width: 0; }
.agdt-dir .tarjeta .quien { display: block; min-width: 0; }
.agdt-dir .tarjeta .nombre { display: block; font: 600 17px/1.25 var(--titulo); overflow-wrap: anywhere; }
/* Debajo del nombre, el rubro y la ciudad: un rótulo (más peso y más tinta). La descripción, más abajo, es lectura: más
   chica y más clara. El dueño, 08-10-2026: «se confunde y se pierde con el subtítulo … esos dos textos quedan muy parecidos». */
.agdt-dir .tarjeta small { display: block; margin-top: 3px; color: var(--rotulo); font-size: 14px; font-weight: 500; line-height: 1.3; }
/* (Sin recorte: el resumen llega del servidor como una frase entera de hasta 120 letras, o no llega.) */
.agdt-dir .tarjeta .resumen { color: var(--lectura); font-size: 13.5px; font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }
.agdt-dir .tarjeta .pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.agdt-dir .tarjeta .desde { font: 600 15px/1.2 var(--titulo); white-space: nowrap; }
.agdt-dir .tarjeta .desde small { display: inline; margin: 0; font: 400 13px/1 var(--texto); }
.agdt-dir .vacio { display: grid; gap: 4px; padding: 36px 20px; border: 1px dashed #b9c6da; border-radius: 22px; color: var(--gris); text-align: center; }
.agdt-dir .vacio b { color: var(--tinta); font-weight: 500; }

/* —— Mapa —— */
.agdt-dir .mapa { height: min(60vh, 480px); min-height: 320px; border-radius: 22px; overflow: hidden; background: #dbe6f3; }
.agdt-dir .mapa.mini { height: 220px; min-height: 0; margin-top: 14px; border-radius: 16px; }
/* «Ver todo»: sobre el mapa, arriba a la izquierda, sólo cuando la persona se acercó o se movió. */
.agdt-dir .mapa-marco { position: relative; }
.agdt-dir .mapa-marco .agdt-ver-todo { position: absolute; top: 12px; left: 12px; z-index: 2; box-shadow: var(--sombra); }
.agdt-dir .mapa-marco .mapa.mini + .agdt-ver-todo { top: 26px; }
.agdt-dir .ficha { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px; border-radius: 18px; background: var(--papel); }
.agdt-dir .ficha .logo { width: 48px; height: 48px; }
.agdt-dir .ficha div { flex: 1; min-width: 0; }
.agdt-dir .ficha b { display: block; font: 600 16px/1.25 var(--titulo); overflow-wrap: anywhere; }
.agdt-dir .ficha small { display: block; color: var(--gris); font-size: 14px; overflow-wrap: anywhere; }

/* —— Perfil —— */
.agdt-dir .portada { height: clamp(150px, 34vw, 230px); border-radius: 26px; background: linear-gradient(135deg, #1d3a63, #2283CF 62%, #7cc0f0) center / cover no-repeat; }
.agdt-dir .cabeza { display: flex; flex-direction: column; gap: 12px; margin: -44px 0 0; padding: 0 4px; }
.agdt-dir .cabeza .logo { margin-left: 12px; }
.agdt-dir .cabeza h1 { font-size: clamp(26px, 6.4vw, 36px); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.agdt-dir .cabeza .datos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--gris); font-size: 15px; }
.agdt-dir .cuerpo { display: grid; gap: 12px; margin-top: 20px; }
.agdt-dir .cuerpo > * { min-width: 0; }
.agdt-dir .columna { display: grid; gap: 12px; align-content: start; }
.agdt-dir .reserva { display: none; }
.agdt-dir .cat { margin: 18px 0 4px; color: var(--tenue); font: 600 13px/1.2 var(--titulo); letter-spacing: .06em; text-transform: uppercase; }
.agdt-dir .seccion > h2 + .cat { margin-top: 0; }
.agdt-dir .serv { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e8eef6; }
.agdt-dir .serv:last-of-type { border-bottom: 0; }
.agdt-dir .serv > div { flex: 1; min-width: 0; }
.agdt-dir .serv b { display: block; font: 500 16px/1.3 var(--texto); overflow-wrap: anywhere; }
.agdt-dir .serv small { display: block; color: var(--gris); font-size: 14px; }
.agdt-dir .mas { width: 100%; margin-top: 8px; }
.agdt-dir .fotos { display: flex; gap: 10px; margin: 0 -20px; padding: 0 20px 2px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.agdt-dir .fotos::-webkit-scrollbar { display: none; }
.agdt-dir .fotos img { flex: none; width: min(78%, 360px); height: auto; aspect-ratio: 4 / 3; border-radius: 16px; object-fit: cover; scroll-snap-align: start; background: #e3eaf5; }
.agdt-dir .lugar { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e8eef6; }
.agdt-dir .lugar:last-of-type { border-bottom: 0; }
.agdt-dir .lugar > div { flex: 1; min-width: 0; }
.agdt-dir .lugar b { display: block; font: 500 16px/1.3 var(--texto); overflow-wrap: anywhere; }
.agdt-dir .lugar small { display: block; color: var(--gris); font-size: 14px; overflow-wrap: anywhere; }
.agdt-dir .horas { display: grid; gap: 2px; }
.agdt-dir .horas div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 12px; border-radius: 10px; color: var(--gris); font-variant-numeric: tabular-nums; }
.agdt-dir .horas div.hoy { background: var(--azul-suave); color: var(--tinta); font-weight: 500; }
.agdt-dir .sobre { max-width: 65ch; color: var(--gris); white-space: pre-line; overflow-wrap: anywhere; }
.agdt-dir .contacto { display: grid; gap: 4px; }
.agdt-dir .contacto a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; }
.agdt-dir .contacto svg { color: var(--azul-tinta); }
.agdt-dir .aviso { display: grid; gap: 14px; padding: 20px; border-radius: 22px; background: var(--aviso-suave); color: #5c3d00; }
.agdt-dir .aviso h2 { font-size: 19px; font-weight: 600; line-height: 1.3; color: #4a3100; }
.agdt-dir .aviso p { margin-top: 6px; }
.agdt-dir .globo { justify-self: start; max-width: 100%; padding: 10px 14px; border-radius: 4px 18px 18px 18px; background: #fff; color: var(--tinta); font-size: 15px; box-shadow: 0 1px 2px rgba(18, 35, 61, .14); }
.agdt-dir .globo small { display: block; margin-bottom: 2px; color: var(--tenue); font-size: 12.5px; }
.agdt-dir .otros { display: grid; gap: 12px; padding-top: 8px; }
.agdt-dir .otros h2 { padding: 0 4px; font-size: 19px; font-weight: 600; line-height: 1.3; }
.agdt-dir .fijo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(237, 242, 250, 0), var(--suelo) 34%); }
.agdt-dir .fijo > * { max-width: 560px; margin: 0 auto; }
@media (min-width: 900px) {
  .agdt-dir .cuerpo { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 16px; }
  .agdt-dir .aparte { position: sticky; top: 16px; }
  .agdt-dir .reserva { display: grid; gap: 12px; }
  .agdt-dir .fijo { display: none; }
  .agdt-dir .hoja, .agdt-dir-perfil .hoja { padding-block: 24px 48px; }
}
@media (hover: hover) and (pointer: fine) {
  .agdt-dir .tarjeta:hover { box-shadow: var(--sombra); }
  .agdt-dir .chico:hover { border-color: var(--tenue); }
  .agdt-dir .chico.azul:hover, .agdt-dir .principal:hover { filter: brightness(1.06); }
}
@media (prefers-reduced-motion: reduce) { .agdt-dir * { transition: none !important; } }

/* —— La tira de negocios dentro de otras páginas (portada y páginas comerciales) —— */
.agdt-dir.agdt-carrusel { min-width: 0; max-width: 100%; }
.agdt-dir.agdt-carrusel .lista { display: flex; grid-template-columns: none; gap: 12px; margin: 0; padding: 4px 2px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.agdt-dir.agdt-carrusel .lista::-webkit-scrollbar { display: none; }
.agdt-dir.agdt-carrusel .tarjeta { flex: 0 0 min(84%, 320px); scroll-snap-align: start; box-shadow: 0 0 0 1px var(--linea); text-align: left; }
.agdt-dir.agdt-carrusel .todos { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font: 500 15px/1.2 var(--texto); }