/* Bodas de ejemplo: barra fija que avisa de que es un ejemplo, y listado de las cinco. */
body { margin: 0; background: var(--color-neutral-bg); }
.e-barra { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: .7rem; padding: .55rem 1rem;
  background: color-mix(in srgb, #F3F4EF 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid #D6DBD4;
  font: 400 .84rem/1.35 'Albert Sans', system-ui, sans-serif; color: #1E3D33; }
.e-barra-logo img { display: block; }
.e-barra p { margin: 0; flex: 1; min-width: 0; }
.e-barra nav { display: flex; gap: .6rem; align-items: center; white-space: nowrap; }
.e-barra a { color: #1E3D33; font-weight: 600; }
.e-barra-boton { padding: .4rem .9rem; border-radius: 999px; background: #1E3D33; color: #F3F4EF !important; text-decoration: none; }
.e-barra a:focus-visible { outline: 3px solid #9A4A52; outline-offset: 2px; border-radius: 6px; }
@media (max-width: 34rem) { .e-barra nav a:not(.e-barra-boton) { display: none; } .e-barra p { font-size: .78rem; } }

/* Listado */
.e-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.25rem; }
.e-cabecera img { display: block; width: 136px; height: auto; }
.e-cabecera a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.e-listado { max-width: 72rem; margin: 0 auto; padding: 3rem 1.25rem 4rem; display: grid; gap: 2.2rem; }
.e-listado h1 { font-size: clamp(2rem, 7vw, 3rem); }
.e-tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.e-tarjetas a { display: grid; gap: .3rem; text-decoration: none; color: var(--color-neutral-fg); }
.e-tarjetas img { width: 100%; height: auto; aspect-ratio: 1 / 2; object-fit: cover; object-position: top; border-radius: 22px;
  border: 5px solid #1b1d1c; box-shadow: var(--sombra-alta); transition: transform .35s var(--suave); }
.e-tarjetas a:hover img { transform: translateY(-6px); }
.e-tarjetas a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; border-radius: 22px; }
.e-nombres { font: 1.35rem var(--font-display); margin-top: .5rem; }
.e-detalle { font-size: .9rem; color: var(--color-neutral-muted); }

/* Barra de acciones fija abajo (a mano del pulgar en el móvil; también en el ordenador) */
body:has(.e-acciones) { padding-bottom: 4.6rem; }
.e-acciones { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: .6rem; justify-content: center;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, #F3F4EF 94%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid #D6DBD4; box-shadow: 0 -6px 20px rgb(30 61 51 / .08);
  font: 600 .95rem/1 'Albert Sans', system-ui, sans-serif; }
.e-acciones a { flex: 1; max-width: 16rem; display: grid; place-items: center; min-height: 46px; border-radius: 999px;
  border: 1.5px solid #1E3D33; color: #1E3D33; text-decoration: none; }
.e-acciones-boton { background: #1E3D33; color: #F3F4EF !important; }
.e-acciones a:focus-visible { outline: 3px solid #9A4A52; outline-offset: 2px; }
.e-barra p { font-size: .82rem; }

/* Símbolo de la marca en un círculo verde botella (como las redes): se ve sobre cualquier fondo */
.e-barra-logo { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: #1E3D33; box-shadow: 0 4px 12px rgb(30 61 51 / .25); transition: background .2s, transform .2s; }
.e-barra-logo:hover { background: #9A4A52; transform: translateY(-1px); }
.e-barra-logo img { width: 24px; height: 24px; }