/* ==========================================================================
   ELENA HAIRLOVER — La carta en tarjetas (2026-10-01) [COMÚN]
   ---------------------------------------------------------------------------
   Es el §5 «La carta» de css/editorial.css de Elegance by Stoica, y SOLO eso
   (ni las cabeceras, ni la portada, ni las pestañas, ni los testimonios, ni
   el contacto, ni los flotantes). Tarjetas limpias: una columna en el móvil
   y DOS desde 1024 px, con la lista de 980 px como mucho.
   Va DESPUÉS de css/tailwind.css en index.html. Los `html` delante de cada
   selector son a propósito: ganan a Tailwind y a las reglas de siempre sin
   necesitar !important (salvo donde las de antes ya lo usaban).
   El ancho de la lista y su sitio entre 768 y 1279 px siguen siendo los de
   css/web.css: en Elena dejan libre la franja de los botones flotantes, que
   aquí van en columna a la derecha. Lo único nuevo es el tope de 980 px.
   ========================================================================== */

/* Aire arriba y abajo de la sección (2026-10-01): sin él, el título «Nuestra
   Carta de Precios» pegaba con la foto de la portada y la última tarjeta con
   la sección siguiente. El mismo que la galería y las transformaciones:
   100 px, y 80 por debajo de 992 px (--space-section-mob). */
html .servicios { padding: var(--space-section) 0; }

@media (min-width: 768px) {
  html #public-services-list { max-width: 980px; }
}

html #public-services-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 1024px) { html #public-services-list { grid-template-columns: 1fr 1fr; gap: 12px 24px; } }

/* La ficha (2026-10-04, lo pidió el propietario con tres capturas): a la
   izquierda, el nombre arriba y la duración y el precio debajo; a la derecha,
   UN botón corto «Reservar» / «Book» a la altura de las dos líneas. Igual en
   todas las pantallas (antes el botón bajaba a su propia línea y en el móvil
   ocupaba todo el ancho, y la duración y el precio iban arriba a la derecha).
   Rejilla de dos columnas: el nombre largo se parte sin empujar al botón. */
html #public-services-list .service-item,
html #public-services-list .service-item:hover {
  background: var(--color-superficie-suave); border: 1px solid transparent; border-radius: 2px;
  box-shadow: none; transform: none; padding: 14px 16px 14px 18px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nombre boton" "meta boton";
  align-items: center !important; text-align: left !important;
  column-gap: 16px !important; row-gap: 4px !important;
}
html #public-services-list .service-item:hover { border-color: var(--color-linea-fuerte); }
/* Sin botón (agenda externa: lo esconde css/web.css), el nombre y la duración
   y el precio usan todo el ancho */
html[data-agenda="externa"] #public-services-list .service-item {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "nombre" "meta";
}

html #public-services-list .service-item__name {
  grid-area: nombre; align-self: end; min-width: 0; font-weight: 500; font-size: 0.9rem; white-space: normal; line-height: 1.35;
  overflow-wrap: break-word; margin: 0;
}
html #public-services-list .service-item__dots { display: none !important; }
html #public-services-list .service-item__meta {
  grid-area: meta; align-self: start;
  display: flex !important; align-items: baseline; justify-content: flex-start; gap: 14px; margin: 0;
}
html #public-services-list .service-item__desc {
  margin: 0 !important; flex: none; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted); white-space: nowrap !important; text-align: left;
}
html #public-services-list .service-item__price {
  flex: none; margin: 0 !important; font-size: 1.25rem !important; line-height: 1 !important; white-space: nowrap;
  align-self: baseline !important; text-align: left !important;
}
/* La ⓘ que abre la explicación */
html .service-item__ver { color: var(--color-gold-text); }
html .service-item__ver:hover { color: var(--color-text-light); }

/* El botón «Reservar» de cada ficha (solo con la agenda propia; con la
   externa lo esconde css/web.css). A la derecha, centrado entre las dos
   filas y de su alto (46 px); con un nombre de tres renglones no se estira
   (llegaba a 83 px en el móvil y pesaba demasiado). Los
   !important ganan a los de css/web-responsivo.css e index.html, que lo
   centraban y le daban 140-180 px de ancho mínimo en el móvil. */
html #public-services-list .service-item__btn {
  grid-area: boton; align-self: center !important; justify-self: end;
  margin: 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important;
  min-height: 46px !important; padding: 6px 16px !important;
  font-size: 0.66rem !important; letter-spacing: 0.12em !important; white-space: nowrap;
  border-radius: 2px !important;
}

/* La explicación del servicio (panel → «¿En qué consiste?») va DENTRO de su
   ficha, en su propia línea (js/main.js y css/web.css). */
html #public-services-list .service-item__explicacion {
  font-size: 0.86rem !important; line-height: 1.6; color: var(--color-text-suave);
}
@media (min-width: 1024px) {
  /* Con una explicación abierta, su ficha crece y la vecina de la misma fila
     se queda de su tamaño y en su sitio (si no, se estiraría hasta el alto de
     la otra). En dos columnas, la ficha impar es la de la izquierda. */
  html #public-services-list .service-item:nth-child(odd):has(> .service-item__explicacion:not([hidden])) + .service-item,
  html #public-services-list .service-item:nth-child(odd):has(+ .service-item > .service-item__explicacion:not([hidden])) { align-self: start; }
}
/* En el móvil, el botón más estrecho (en el dibujo del propietario ocupa
   solo el borde derecho de la ficha): así el nombre tiene sitio. */
@media (max-width: 767px) {
  html #public-services-list .service-item,
  html #public-services-list .service-item:hover { column-gap: 12px !important; padding: 12px 12px 12px 14px !important; }
  html #public-services-list .service-item__btn { padding: 6px 10px !important; font-size: 0.6rem !important; letter-spacing: 0.08em !important; }
}