/*
 * Info-Coste — «La red».
 * El blog de las tiendas Infocoste: el turquesa del rótulo de las tiendas, la plata y el melocotón de la mascota
 * voladora (con su USB en el pecho) y una red de nodos que une a las tiendas. Rubik, redonda y técnica, para todo.
 */

:root {
  --turquesa: #00a98d;
  --turquesa-claro: #7fd9c8;
  --turquesa-suave: #e3f4f0;
  --turquesa-oscuro: #006f5d;
  --profundo: #073b33;
  --profundo-2: #0b4d43;
  --tinta: #0d2420;
  --tenue: #4d615d;
  --plata: #cfd5dc;
  --plata-oscura: #8a96a3;
  --melocoton: #fcd09f;
  --papel: #f4f8f7;
  --blanco: #fff;
  --borde: #d5e2df;

  --fuente: 'Rubik', 'Segoe UI', system-ui, sans-serif;
  --e-1: .5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2rem;
  --e-5: 3rem;
  --e-6: 4rem;
  --e-7: 6rem;
  --margen: clamp(1.25rem, 4vw, 2.5rem);
  --ancho: 74rem;
  --medida: 40rem;
  --radio: 14px;

  --ancho-texto: var(--medida);
  --color-texto: var(--tinta);
  --color-fondo: var(--papel);
  --color-suave: var(--turquesa-suave);
  --color-borde: var(--borde);
  --color-acento: var(--turquesa-oscuro);
  --color-acento-texto: #fff;
  --color-tenue: var(--tenue);
  --fuente-texto: var(--fuente);
  --fuente-titulos: var(--fuente);
  color-scheme: light;
  accent-color: var(--turquesa-oscuro);
  scrollbar-color: var(--turquesa-oscuro) var(--papel);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 1.0625rem/1.6 var(--fuente); -webkit-font-smoothing: antialiased; }
::selection { background: var(--melocoton); color: var(--tinta); }
img { max-width: 100%; height: auto; }
a { color: var(--turquesa-oscuro); text-underline-offset: .2em; text-decoration-thickness: 1px; transition: color .18s ease; }
a:hover { color: var(--profundo); }
:focus-visible { outline: 3px solid var(--profundo); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
main { display: block; outline: none; }
.envoltorio { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
[hidden] { display: none !important; }
.x-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icono { flex: none; }
.saltar { position: absolute; left: var(--e-2); top: -4rem; z-index: 100; padding: .75rem 1.25rem; background: var(--profundo); color: #fff; font-weight: 600; border-radius: 999px; }
.saltar:focus { top: var(--e-2); color: #fff; }

.antetitulo { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 var(--e-2); font: 600 .9375rem/1.3 var(--fuente); letter-spacing: .06em; text-transform: uppercase; color: var(--turquesa-oscuro); }
.antetitulo .icono { width: 18px; height: 18px; }
.antetitulo a { color: inherit; text-decoration: none; }
.antetitulo-oscuro { color: var(--profundo); }
.antetitulo-claro { color: var(--turquesa-claro); }

.boton, .contenido .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 50px; padding: .7rem 1.4rem;
  border: 2px solid var(--profundo); border-radius: 999px; background: var(--profundo); color: #fff;
  font: 600 1rem/1.1 var(--fuente); text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.boton:hover, .contenido .boton:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(7, 59, 51, .7); }
.boton .icono { width: 19px; height: 19px; }
.boton:hover .icono-flecha { transform: translateX(3px); }
.boton .icono-flecha { transition: transform .2s ease; }
.boton-borde { background: transparent; color: var(--profundo); }
.boton-borde:hover { background: var(--profundo); color: #fff; }
.boton-claro { background: var(--blanco); border-color: var(--blanco); color: var(--profundo); }
.boton-claro:hover { background: var(--melocoton); border-color: var(--melocoton); color: var(--tinta); }

.red-fondo { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(7, 59, 51, .22); pointer-events: none; }

/* ------------------------------------------------------------------ cabecera */

.cabecera { position: sticky; top: 0; z-index: 50; background: var(--blanco); border-bottom: 1px solid var(--borde); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 64px; }
.marca { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; color: var(--tinta); text-decoration: none; }
.marca:hover { color: var(--tinta); }
.marca-mascota { flex: none; width: 64px; }
.marca-mascota img { display: block; width: 100%; transition: transform .35s ease; }
.marca:hover .marca-mascota img { transform: translateX(4px) rotate(-4deg); }
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-nombre { font: 800 1.375rem/1 var(--fuente); letter-spacing: .02em; }
.marca-sub { display: none; margin-top: .25rem; font: 500 .8125rem/1.2 var(--fuente); color: var(--tenue); letter-spacing: .01em; }
@media (min-width: 64rem) { .marca-sub { display: block; } .ficha { position: sticky; top: 7rem; } }

.menu-boton { display: inline-flex; align-items: center; gap: .5rem; min-width: 44px; min-height: 44px; padding: 0 1rem; margin-right: -.5rem; border: 0; border-radius: 999px; background: var(--turquesa-suave); color: var(--profundo); font: 600 .9375rem/1 var(--fuente); cursor: pointer; }
.menu-boton:hover { background: var(--turquesa-claro); }
.menu-boton-icono { display: inline-grid; }
.menu-boton-icono .icono { grid-area: 1 / 1; }
.menu-boton .icono-cerrar, .menu-boton-cerrar { display: none; }
.menu-boton[aria-expanded="true"] .icono-cerrar, .menu-boton[aria-expanded="true"] .menu-boton-cerrar { display: inline; }
.menu-boton[aria-expanded="true"] .icono-menu, .menu-boton[aria-expanded="true"] .menu-boton-abrir { display: none; }
.navegacion .menu { list-style: none; margin: 0; padding: 0; }
.navegacion a { text-decoration: none; }
.navegacion-correo { display: none; }

@media (max-width: 63.99rem) {
  .navegacion { position: fixed; inset: 64px 0 0 0; z-index: 40; display: none; flex-direction: column; gap: var(--e-3); padding: var(--e-3) var(--margen) calc(var(--e-5) + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--turquesa); }
  .navegacion.abierto { display: flex; animation: aparecer .2s ease; }
  html.menu-abierto, html.menu-abierto body { overflow: hidden; }
  .navegacion .menu a { display: flex; align-items: center; min-height: 60px; border-bottom: 2px dashed rgba(7, 59, 51, .25); font: 700 1.625rem/1.1 var(--fuente); color: var(--tinta); }
  .navegacion .menu a[aria-current] { color: var(--profundo); box-shadow: inset 5px 0 0 var(--melocoton); padding-left: .9rem; }
  .navegacion-buscar, .navegacion-correo { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; border-radius: 999px; font: 600 1.0625rem/1 var(--fuente); }
  .navegacion-buscar { background: var(--profundo); color: #fff; }
  .navegacion-correo { background: var(--blanco); color: var(--profundo); }
}
@media (min-width: 64rem) {
  .cabecera-fila { min-height: 80px; }
  .marca-mascota { width: 80px; }
  .marca-nombre { font-size: 1.5rem; }
  .menu-boton { display: none; }
  .navegacion { display: flex; align-items: center; gap: var(--e-2); }
  .navegacion .menu { display: flex; gap: .25rem; }
  .navegacion .menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; font: 500 .9375rem/1 var(--fuente); color: var(--tinta); transition: background-color .18s ease, color .18s ease; }
  .navegacion .menu a:hover { background: var(--turquesa-suave); color: var(--profundo); }
  .navegacion .menu a[aria-current] { background: var(--turquesa-suave); color: var(--profundo); font-weight: 600; }
  .navegacion-buscar { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; background: var(--profundo); color: #fff; font: 600 .9375rem/1 var(--fuente); transition: background-color .18s ease; }
  .navegacion-buscar:hover { background: var(--tinta); color: #fff; }
}
@keyframes aparecer { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ portada */

.portada { position: relative; overflow: hidden; background: var(--turquesa); color: var(--tinta); padding-block: var(--e-5) var(--e-6); }
.portada-fila { position: relative; display: grid; gap: var(--e-3); align-items: center; }
@media (min-width: 56rem) { .portada-fila { grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: var(--e-6); padding-block: var(--e-3); } }
.portada-mascota { width: min(78%, 25rem); justify-self: center; }
.portada-mascota img { display: block; width: 100%; filter: drop-shadow(0 22px 26px rgba(7, 59, 51, .35)); }
@media (prefers-reduced-motion: no-preference) { .portada-mascota img { animation: vuelo 6s ease-in-out infinite; } }
@keyframes vuelo { 50% { transform: translate(6px, -10px) rotate(-1.5deg); } }
.portada-titulo { margin: 0 0 var(--e-3); font: 800 clamp(2.5rem, 1.4rem + 4.4vw, 4.75rem)/1 var(--fuente); letter-spacing: -.02em; color: var(--tinta); }
.portada-intro { margin: 0 0 var(--e-4); max-width: 36rem; font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height: 1.55; color: var(--tinta); }
.portada-botones { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.portada .boton-borde { border-color: var(--tinta); color: var(--tinta); }
.portada .boton-borde:hover { background: var(--tinta); color: #fff; }
.portada .buscador { margin-bottom: var(--e-3); }

.cifras { background: var(--profundo); color: #dbeee9; padding-block: var(--e-4); }
.cifras-fila { display: grid; gap: var(--e-3); }
@media (min-width: 48rem) { .cifras-fila { grid-template-columns: repeat(3, 1fr); } }
.cifra { display: flex; align-items: center; gap: var(--e-2); margin: 0; }
.cifra strong { font: 800 clamp(2.5rem, 2rem + 2vw, 3.5rem)/1 var(--fuente); color: var(--turquesa-claro); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cifra span { max-width: 14rem; font-size: 1rem; line-height: 1.35; }

.bloque-cabecera { margin-bottom: var(--e-4); }
.bloque-cabecera--fila { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e-3); }
.bloque-titulo { margin: 0; font: 800 clamp(2rem, 1.5rem + 2vw, 3rem)/1.05 var(--fuente); letter-spacing: -.015em; color: var(--tinta); }

.propuestas { padding-block: var(--e-6); }
.propuestas-lista { display: grid; gap: var(--e-3); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; counter-reset: propuesta; }
@media (min-width: 40rem) { .propuestas-lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .propuestas-lista li { flex-direction: row; align-items: flex-start; gap: var(--e-3); padding: var(--e-4); } .propuestas-lista p { font-size: 1.125rem; padding-right: var(--e-3); } }
.propuestas-lista li { position: relative; display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-4) var(--e-3) var(--e-3); background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); counter-increment: propuesta; }
.propuestas-lista li::after { content: counter(propuesta, decimal-leading-zero); position: absolute; top: var(--e-3); right: var(--e-3); font: 700 .875rem/1 var(--fuente); color: var(--plata-oscura); }
.propuesta-icono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--turquesa-suave); color: var(--turquesa-oscuro); }
.propuesta-icono .icono { width: 26px; height: 26px; }
.propuestas-lista p { margin: 0; font-size: 1.0625rem; line-height: 1.55; }
.propuestas-cierre { margin: var(--e-5) auto 0; max-width: 46rem; text-align: center; font: 700 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.35 var(--fuente); color: var(--profundo); }

.red { position: relative; background: var(--profundo); color: #dbeee9; padding-block: var(--e-6); }
.red .bloque-titulo { color: var(--blanco); }
.red-muro { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.red-muro a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid rgba(127, 217, 200, .35); border-radius: 999px; color: #e9f6f3; font-size: .9375rem; text-decoration: none; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.red-muro a:hover { background: var(--turquesa); border-color: var(--turquesa); color: var(--tinta); }
.red-pie { margin: var(--e-4) 0 0; }
.red-pie a { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; color: var(--turquesa-claro); font-weight: 600; text-decoration: none; }
.red-pie a:hover { color: var(--blanco); }
.red :focus-visible { outline-color: var(--melocoton); }
.red-corta { padding-block: var(--e-5); }
.red-corta .bloque-cabecera { margin: 0; }

/* tienda presentada */
.tienda { padding-block: var(--e-6); }
.tienda-fila { display: grid; gap: var(--e-5); align-items: center; }
@media (min-width: 56rem) { .tienda-fila { grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: var(--e-6); } }
.tienda-foto { position: relative; margin: 0; max-width: 25rem; justify-self: center; }
.tienda-foto img { display: block; width: 100%; border-radius: var(--radio); box-shadow: 0 24px 40px -26px rgba(7, 59, 51, .7); }
.tienda-foto figcaption { position: absolute; left: var(--e-2); bottom: calc(var(--e-2) * -1); display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: 999px; background: var(--melocoton); color: var(--tinta); font: 600 .9375rem/1.2 var(--fuente); box-shadow: 0 8px 16px -10px rgba(7, 59, 51, .6); }
.tienda-nombre { margin: 0 0 var(--e-3); font: 800 clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem)/1 var(--fuente); letter-spacing: -.02em; color: var(--tinta); }
.tienda-lema { margin: 0 0 var(--e-4); padding: 0 0 0 var(--e-3); border-left: 4px solid var(--turquesa); }
.tienda-lema p { margin: 0; font: 500 clamp(1.25rem, 1.05rem + .8vw, 1.625rem)/1.35 var(--fuente); color: var(--profundo); font-style: italic; }
.tienda-datos { display: grid; gap: .25rem; list-style: none; margin: 0 0 var(--e-4); padding: 0; }
.tienda-datos li { display: flex; align-items: center; gap: .75rem; min-height: 44px; }
.tienda-datos .icono { width: 22px; height: 22px; color: var(--turquesa-oscuro); }
.tienda-datos a { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.tienda-datos a:hover { text-decoration: underline; }

/* llamada a las tiendas */
.cta { background: var(--blanco); border-top: 1px solid var(--borde); padding-block: var(--e-6); }
.cta-fila { display: grid; gap: var(--e-5); align-items: start; }
@media (min-width: 56rem) { .cta-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-6); } }
.cta-texto { position: relative; }
.cta-titulo { margin: 0 0 var(--e-3); font: 700 clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem)/1.2 var(--fuente); letter-spacing: -.015em; color: var(--tinta); }
.cta-cierre { margin: 0 0 var(--e-4); color: var(--tenue); max-width: 36rem; }
.cta-botones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 0; }
.cta-correo { font-weight: 600; color: var(--profundo); }
.mascota-pulgares { display: block; width: 184px; height: 200px; overflow: hidden; margin-bottom: var(--e-3); }
.mascota-pulgares img { display: block; width: 1200px; max-width: none; height: auto; }
.cta-lista { padding: var(--e-4); background: var(--turquesa-suave); border-radius: var(--radio); }
.cta-lista-titulo { margin: 0 0 var(--e-2); font: 600 .875rem/1.3 var(--fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--turquesa-oscuro); }
.cta-lista ol { list-style: none; margin: 0; padding: 0; }
.cta-lista li { display: flex; gap: var(--e-2); align-items: baseline; padding: .7rem 0; border-top: 2px dashed rgba(0, 111, 93, .22); font-size: 1.0625rem; line-height: 1.4; }
.cta-lista li:first-child { border-top: 0; }
.cta-num { flex: none; font: 700 .875rem/1 var(--fuente); color: var(--turquesa-oscuro); font-variant-numeric: tabular-nums; }
.ejemplo { padding-top: var(--e-6); }
.ejemplo + .tienda { padding-top: var(--e-4); }

/* ------------------------------------------------------------------ páginas, entradas, listados */

.pagina-cabecera { position: relative; overflow: hidden; background: var(--turquesa); color: var(--tinta); padding-block: var(--e-5); }
.pagina-cabecera .envoltorio { position: relative; }
.pagina-titulo { margin: 0 0 var(--e-2); font: 800 clamp(2.25rem, 1.5rem + 3vw, 4rem)/1.02 var(--fuente); letter-spacing: -.02em; color: var(--tinta); overflow-wrap: anywhere; }
.pagina-intro { margin: 0 0 var(--e-3); max-width: 38rem; font-size: 1.1875rem; }
.pagina-meta { margin: 0; font-size: .9375rem; color: var(--tinta); }
.pagina-cabecera .buscador { margin-top: var(--e-3); }

.articulo-fila { display: grid; gap: var(--e-5); padding-block: var(--e-5) var(--e-6); }
.articulo-fila.con-ficha { align-items: start; }
@media (min-width: 64rem) { .articulo-fila.con-ficha { grid-template-columns: minmax(0, var(--medida)) 22rem; justify-content: space-between; } }
.contenido { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.7; }
.articulo-texto { padding-inline: 0; }
.articulo-fila:not(.con-ficha) .articulo-texto > * { max-width: var(--medida); margin-left: 0; }
.contenido > * { max-width: var(--medida); margin-left: 0; }
.contenido p { margin-block: 0 1.15em; }
.contenido h2 { margin: 1.8em 0 .6em; font: 700 1.75rem/1.15 var(--fuente); color: var(--tinta); }
.contenido h3 { margin: 1.6em 0 .5em; font: 700 1.3125rem/1.2 var(--fuente); }
.contenido img.aligncenter, .contenido p > img { display: block; margin: var(--e-3) auto var(--e-3) 0; border-radius: 10px; }
.contenido ul { padding-left: 1.3em; }
.contenido li::marker { color: var(--turquesa-oscuro); }
.ficha { padding: var(--e-4); background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); }
.ficha-titulo { margin: 0 0 var(--e-2); font: 600 .875rem/1.3 var(--fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--turquesa-oscuro); }
.ficha .tienda-datos { margin-bottom: var(--e-3); }
.tienda-lema--ficha { margin: 0; }
.tienda-lema--ficha p { font-size: 1.1875rem; }
.vecinos { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2); padding-bottom: var(--e-5); }
.vecino { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 1.25rem; border: 1px solid var(--borde); border-radius: 999px; background: var(--blanco); color: var(--tinta); text-decoration: none; font-weight: 600; }
.vecino:hover { border-color: var(--turquesa-oscuro); }

.lista { padding-block: var(--e-5) var(--e-6); }
.tarjetas { display: grid; gap: var(--e-3); }
.tarjeta { display: grid; gap: var(--e-3); padding: var(--e-3); background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); }
@media (min-width: 48rem) { .tarjeta { grid-template-columns: 18rem minmax(0, 1fr); align-items: center; padding: var(--e-3) var(--e-4) var(--e-3) var(--e-3); } }
.tarjeta-foto { display: block; overflow: hidden; border-radius: 10px; max-width: 25rem; }
.tarjeta-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.tarjeta:hover .tarjeta-foto img { transform: scale(1.03); }
.tarjeta-texto .pagina-meta { color: var(--tenue); margin-bottom: .35rem; }
.tarjeta-titulo { margin: 0 0 .5rem; font: 700 1.625rem/1.15 var(--fuente); }
.tarjeta-titulo a { color: var(--tinta); text-decoration: none; }
.tarjeta-titulo a:hover { color: var(--turquesa-oscuro); text-decoration: underline; }
.tarjeta-extracto { margin: 0; color: var(--tenue); }
.vacio { margin: 0 0 var(--e-4); font-size: 1.25rem; font-weight: 500; }

/* directorio */
.directorio { padding-block: var(--e-5) var(--e-6); }
.directorio-filtro { display: grid; gap: .5rem; max-width: 30rem; margin-bottom: var(--e-4); }
.directorio-filtro[hidden] { display: none; }
.directorio-filtro label { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.directorio-filtro input { width: 100%; min-height: 52px; padding: .7rem 1.1rem; border: 2px solid var(--borde); border-radius: 999px; background: var(--blanco); font: 400 1.0625rem/1.2 var(--fuente); color: var(--tinta); }
.directorio-filtro input:focus { outline: none; border-color: var(--turquesa-oscuro); box-shadow: 0 0 0 4px rgba(0, 169, 141, .2); }
.directorio-cuenta { margin: 0; min-height: 1.5em; color: var(--tenue); font-size: .9375rem; }
.directorio-letras { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: var(--e-4); }
.directorio-letras a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blanco); border: 1px solid var(--borde); color: var(--profundo); font-weight: 700; text-decoration: none; transition: background-color .18s ease, color .18s ease; }
.directorio-letras a:hover { background: var(--profundo); color: #fff; }
.directorio-grupos { columns: 1; column-gap: var(--e-4); }
@media (min-width: 40rem) { .directorio-grupos { columns: 2; } }
@media (min-width: 64rem) { .directorio-grupos { columns: 3; } }
.directorio-grupo { break-inside: avoid; margin-bottom: var(--e-3); }
.directorio-letra { display: flex; align-items: center; gap: .75rem; margin: 0 0 .5rem; font: 800 1.75rem/1 var(--fuente); color: var(--turquesa-oscuro); }
.directorio-letra::after { content: ""; flex: 1; border-bottom: 2px dashed var(--borde); }
.directorio-grupo ul { list-style: none; margin: 0; padding: 0; }
.directorio-grupo a { display: flex; align-items: center; gap: .6rem; min-height: 46px; padding: 0 .25rem; border-bottom: 1px solid var(--borde); color: var(--tinta); text-decoration: none; font-weight: 500; }
.directorio-grupo a span { flex: 1; }
.directorio-grupo a .icono { width: 18px; height: 18px; color: var(--plata-oscura); }
.directorio-grupo a .icono-facebook { color: var(--turquesa-oscuro); }
.directorio-grupo a:hover { color: var(--turquesa-oscuro); }
.directorio-grupo a:hover .icono-externo { color: var(--turquesa-oscuro); }
.directorio-vacio { font-size: 1.125rem; font-weight: 500; }
.directorio-aviso { margin-top: var(--e-4); color: var(--tenue); font-size: .9375rem; }

/* buscador */
.x-buscador { display: flex; gap: .5rem; max-width: 34rem; }
.x-buscador label { flex: 1; }
.x-buscador input { width: 100%; min-height: 52px; padding: .7rem 1.2rem; border: 2px solid transparent; border-radius: 999px; background: var(--blanco); font: 400 1.0625rem/1.2 var(--fuente); color: var(--tinta); }
.x-buscador input:focus { outline: none; border-color: var(--profundo); }
.x-buscador button { min-height: 52px; padding: 0 1.4rem; border: 0; border-radius: 999px; background: var(--profundo); color: #fff; font: 600 1rem/1 var(--fuente); cursor: pointer; }
.x-buscador button:hover { background: var(--tinta); transform: none; box-shadow: none; }

.paginacion { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2); margin-top: var(--e-4); }
.paginacion a, .paginacion span[aria-current] { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 1rem; border-radius: 999px; text-decoration: none; }
.paginacion a { border: 1px solid var(--borde); background: var(--blanco); color: var(--tinta); }
.paginacion span[aria-current] { background: var(--profundo); color: #fff; }

/* ------------------------------------------------------------------ pie */

.pie { position: relative; overflow: hidden; background: var(--tinta); color: #b8cdc8; padding-block: var(--e-6) var(--e-3); }
.pie-red { color: rgba(127, 217, 200, .09); height: 18rem; bottom: auto; }
.pie .envoltorio { position: relative; }
.pie a { color: #e6f3f0; text-decoration: none; }
.pie a:hover { color: var(--melocoton); }
.pie :focus-visible { outline-color: var(--melocoton); }
.pie-cabeza { display: grid; gap: var(--e-2); justify-items: start; padding-bottom: var(--e-5); }
.pie-marca { margin: 0; font: 800 clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem)/1 var(--fuente); color: var(--turquesa-claro); letter-spacing: -.01em; }
.pie-lema { margin: 0; max-width: 34rem; font-size: 1.125rem; color: #d3e3df; }
.pie .boton-claro { color: var(--profundo); }
.pie .boton-claro:hover { color: var(--tinta); }
.pie-columnas { display: grid; gap: var(--e-4); padding-block: var(--e-4); border-top: 1px solid rgba(255, 255, 255, .12); }
@media (min-width: 48rem) { .pie-columnas { grid-template-columns: repeat(3, 1fr); } }
.pie-titulo { margin: 0 0 var(--e-2); font: 600 .875rem/1.3 var(--fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--turquesa-claro); }
.pie-lista { list-style: none; margin: 0; padding: 0; }
.pie-lista li { display: flex; align-items: center; gap: .5rem; }
.pie-lista a { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; }
.pie-ficha li { align-items: flex-start; padding-block: .6rem; }
.pie-ficha li:has(a) { padding-block: 0; align-items: center; }
.pie-ficha .icono { width: 18px; height: 18px; color: var(--turquesa-claro); margin-top: .15rem; }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-1) var(--e-3); padding-top: var(--e-3); border-top: 1px solid rgba(255, 255, 255, .12); font-size: .9375rem; }
.pie-legal p { margin: 0; }
.pie-frase { font-style: italic; color: var(--melocoton); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .cabecera, .pie, .cta, .menu-boton, .saltar, .red-fondo, .vecinos { display: none !important; }
  .pagina-cabecera, .portada { background: #fff; }
  .ficha { position: static; }
}