/* uiux-fix-20261019 · Element Clinic
   Correcciones sobre el CSS original (Tailwind). Cada bloque cita la regla que corrige.
   Se puede quitar entero sin romper nada: el sitio vuelve a verse como el original. */

/* D-01 · RUI-C07: texto secundario #8A7B72 daba 3.63-3.84:1 sobre crema/lino.
   Mismo hue, mas oscuro: #70635B da 5.17:1 sobre #F7F1EA y 5.47:1 sobre #FBF8F3. */
.text-stone { color: #70635B; }

/* D-02 · LUX-02: boton de menu movil media 28x11 px. Area tactil 44x44 sin cambiar el icono. */
.ec-burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
  min-width: 44px; min-height: 44px; margin-right: -8px; }
@media (min-width: 768px) { .ec-burger { display: none; } }
.ec-burger[aria-expanded="true"] span:first-child { transform: translateY(5px) rotate(45deg) !important; }
.ec-burger[aria-expanded="true"] span:last-child { transform: translateY(-5px) rotate(-45deg) !important; }
#mobile-menu a.text-lg { display: inline-flex; min-height: 44px; align-items: center; }

/* D-03 · LUX-02 + DMMT: chips de categoria median 35 px de alto y se perdian al bajar.
   44 px de alto y fijos debajo del encabezado: la persona siempre ve donde esta y salta a otra categoria. */
.ec-chips a { display: inline-flex; align-items: center; min-height: 44px; padding-left: 1.1rem; padding-right: 1.1rem; background: #FBF8F3; }
.ec-chips a.is-active { border-color: #8E5F4C; color: #8E5F4C; background: #F7F1EA; }
.ec-chips-bar { background: #FBF8F3; padding-bottom: 1.5rem; }
@media (max-width: 767px) {
  .ec-chips-bar { position: sticky; top: var(--header-h); z-index: 30; padding: .6rem 0; border-bottom: 1px solid #E6DCD2; }
  .ec-chips { flex-wrap: nowrap; overflow-x: auto; margin-left: -1.25rem; margin-right: -1.25rem;
    padding: 0 1.25rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ec-chips::-webkit-scrollbar { display: none; }
  .ec-chips a { flex: 0 0 auto; }
}
main section[id] { scroll-margin-top: calc(var(--header-h) + 64px); }
@media (min-width: 768px) { main section[id] { scroll-margin-top: calc(var(--header-h) + 8px); } }

/* D-04 · RUI-I01 + LUX-03: en movil cada tarjeta medía ~493 px y 7 de 12 eran un cuadro vacio con el monograma.
   12 tratamientos = 16 pantallas de scroll. Tarjeta horizontal compacta: miniatura + nombre + precio. */
@media (max-width: 639px) {
  .ec-card { display: grid; grid-template-columns: 88px 1fr; column-gap: 16px; align-items: center;
    min-height: 88px; padding: 4px 0; }
  .ec-card > .card-media { grid-row: 1 / span 2; width: 88px; height: 88px; aspect-ratio: 1 / 1; border-radius: 12px; }
  .ec-card > .card-media img { width: 100%; height: 100%; object-fit: cover; }
  .ec-card > .card-media .media-placeholder img { width: 44px; height: 44px; object-fit: contain; }
  .ec-card > div.mt-4 { margin-top: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
  .ec-card h3 { font-size: 1.25rem; line-height: 1.2; }
  .ec-card > p { margin-top: 0; grid-column: 2; }
  main .grid.gap-y-12 { row-gap: 1.25rem; }
  main section[id] > div { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

/* D-05 · RUI-I01: en la ficha de tratamiento movil, el cuadro vacio con monograma ocupaba una pantalla
   despues del boton. Se oculta solo cuando no hay foto real. */
@media (max-width: 767px) {
  main > div:first-child .card-media.rounded-2xl:has(.media-placeholder) { display: none; }
}

/* D-06 · LUX-02: links del footer median 21 px de alto. */
footer ul a { display: inline-flex; min-height: 44px; align-items: center; }
footer ul.space-y-2 > li + li { margin-top: 0; }
footer a[href^="tel"], footer a[href^="mailto"], footer a[href*="instagram"] { display: inline-flex; min-height: 44px; align-items: center; }

/* D-07 · RUI-T07: links dentro de texto se distinguen por subrayado, no solo color. */
main p a:not(.btn) { text-decoration: underline; text-underline-offset: 4px; }

/* Preguntas frecuentes (GEO): misma tipografia y colores del sitio. */
.ec-faq { background: #F7F1EA; }
.ec-faq-list { margin-top: 2.5rem; max-width: 52rem; border-top: 1px solid #E6DCD2; }
.ec-faq-item { border-bottom: 1px solid #E6DCD2; }
.ec-faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem;
  align-items: center; min-height: 56px; padding: .9rem 0; font-family: var(--font-garamond), serif; font-size: 1.375rem; line-height: 1.3; }
.ec-faq-item summary::-webkit-details-marker { display: none; }
.ec-faq-item summary::after { content: "+"; font-family: var(--font-jost), sans-serif; font-size: 1.5rem; color: #8E5F4C; flex: 0 0 auto; }
.ec-faq-item[open] summary::after { content: "–"; }
.ec-faq-item p { padding: 0 0 1.25rem; max-width: 65ch; font-size: 1.0625rem; line-height: 1.6; color: #2B221E; }
.ec-faq-item summary:focus-visible { outline: 2px solid #8E5F4C; outline-offset: 4px; }

/* Formulario de contacto: estados y errores visibles junto al campo (LUX-05, LUX-10). */
.ec-form-hint { margin-top: .75rem; font-size: 14px; color: #70635B; }
.ec-field-error { margin-top: .35rem; font-size: 14px; color: #A3361F; }
#contact-form input[aria-invalid="true"] { border-color: #A3361F; }
#contact-form button[type="submit"] { min-height: 48px; }

/* Botones: alto minimo uniforme. */
.btn { min-height: 44px; }

/* Agenda: mensaje mientras carga cal.com (LUX-10). */
#cal-inline:empty::before { content: "Cargando calendario…"; display: block; padding: 2rem; color: #70635B; font-size: 15px; }

/* overflow-x:hidden en html/body convierte al body en contenedor de scroll y rompe position:sticky.
   clip evita el scroll horizontal igual, sin romper sticky. */
html, body { overflow-x: clip; }

/* D-08 · LUX-02: tocables que quedaban bajo 44 px (logo 36, migas 21, links sueltos 21-39). */
header a[aria-label="Element Clinic, inicio"] { min-height: 44px; }
main > div:first-child > p.text-\[14px\] a,
main a.inline-block, main p > a, main div > a.font-serif, main div > a[href^="mailto"],
main a.underline { display: inline-flex; align-items: center; min-height: 44px; }
main p > a { display: inline-block; padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; }
/* D-09 · LUX-02: links del menu de escritorio median 23 px de alto. */
header nav[aria-label="Principal"] > a, header nav[aria-label="Principal"] > div > a { display: inline-flex; align-items: center; min-height: 44px; }