/*
 * E-Iure — página Members (maqueta «Members — C»). Se carga después de home.css e inner.css (comunes).
 */


/* HOW IT WORKS */
.eh .modus{background:var(--sand);padding:64px 0}
.eh .modusgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}
.eh .modus h2{font-size:clamp(26px,3.4vw,40px);margin-top:10px}
.eh .modustext p{font-size:17px;color:#4a4a44}

/* DIRECTORIO */
.eh .directory{padding:0 0 90px}
.eh .mfilters{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding-top:34px}
.eh .msearch input{font:15px var(--sans);padding:13px 22px;border:2px solid var(--green);border-radius:60px;background:#fff;color:var(--ink);min-width:260px;outline:none}
.eh .msearch input:focus{box-shadow:0 0 0 4px rgba(122,201,86,.25)}

.eh .mlwrap{padding:44px 0 0}
/* Mapa: estático, centrado encima de la lista */
.eh .mapbox{position:static;background:var(--sand);border:1px solid var(--line);border-radius:20px;padding:14px;max-width:900px;margin:0 auto 30px}
.eh .members-map{height:460px;border-radius:12px;background:#f4efe3;z-index:0}
/* Mapa algo más apagado para que case con la paleta crema (solo el fondo, no las chinchetas) */
.eh .members-map .leaflet-tile-pane{filter:saturate(.5) sepia(.1) brightness(1.03)}
.eh .members-map .leaflet-control-attribution{font-size:10px}
.eh .members-map .leaflet-control-attribution a{text-decoration:underline}
/* Chincheta */
.eh .eh-pin svg{display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));transition:transform .15s}
.eh .eh-pin path{fill:var(--green-deep);stroke:#fff;stroke-width:1.5}
.eh .eh-pin circle{fill:#fff}
.eh .eh-pin:hover svg,.eh .eh-pin.on svg,.eh .eh-pin:focus-visible svg{transform:translateY(-3px) scale(1.12)}
.eh .eh-pin.on path,.eh .eh-pin:hover path{fill:var(--gold)}
.eh .eh-pin:focus-visible{outline:none}
/* Globo de la chincheta */
.eh .members-map .leaflet-popup-content-wrapper{border-radius:12px}
.eh .members-map .leaflet-popup-content{margin:14px 16px;font:14px/1.45 var(--sans);color:var(--ink)}
.eh .eh-pop{display:flex;flex-direction:column;gap:3px}
.eh .eh-pop strong{font-size:15px}
.eh .eh-pop span{color:#5a554b}
.eh .eh-pop small{color:#8a8478;font-size:12px}
.eh .eh-pop button{margin-top:8px;align-self:flex-start;font:600 13px var(--sans);padding:7px 14px;border-radius:60px;border:1.6px solid var(--green);background:var(--green);color:var(--ink);cursor:pointer}
.eh .eh-pop button:hover{background:var(--green-light);border-color:var(--green-light)}

/* Lista en dos columnas */
.eh .clist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.eh .clist.js-limit .crow-item.beyond,.eh .crow-item.hide{display:none}
.eh .crow{width:100%;display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);border-radius:14px;cursor:pointer;transition:.15s;background:#fff;font:inherit;color:inherit;text-align:left}
.eh .crow:hover,.eh .crow.on,.eh .crow[aria-expanded="true"]{border-color:var(--green);box-shadow:0 8px 20px rgba(0,0,0,.06)}
.eh .crow .cl{width:60px;height:46px;border-radius:8px;background:var(--cream);display:flex;align-items:center;justify-content:center;flex:none;padding:6px}
.eh .crow .cl.dark{background:#20262b}
.eh .crow .cl img{width:100%;height:100%;object-fit:contain}
.eh .crow .info{min-width:0}
.eh .crow .firm{display:block;font-weight:700;font-size:15px;line-height:1.3}
.eh .crow small{display:flex;align-items:center;gap:7px;color:#5a554b;font-size:13px}
.eh .flag{width:20px;height:15px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08);flex:none;display:inline-block}
.eh .crow .go{margin-left:auto;color:var(--green-deep);font-weight:700;font-size:13px;white-space:nowrap}
.eh .empty{padding:20px 0;color:#8a8478;text-align:center}
.eh .showall{display:flex;justify-content:center;margin-top:22px}

/* Detalle: debajo, centrado y a lo ancho */
.eh .detail{max-width:860px;margin:30px auto 0;scroll-margin-top:96px}
.eh .detail:focus{outline:none}
.eh .dcard{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.eh .dinner{display:grid;grid-template-columns:200px 1fr;gap:34px;padding:36px;align-items:start}
.eh .dcard .logo{height:120px;border-radius:14px;background:var(--cream);display:flex;align-items:center;justify-content:center;padding:22px}
.eh .dcard .logo.dark{background:#20262b}
.eh .dcard .logo img{width:100%;height:100%;object-fit:contain}
.eh .dcard .country{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.eh .dcard h3{font-size:28px;margin:6px 0 10px}
.eh .dcard h3 a{transition:.2s}
.eh .dcard h3 a:hover,.eh .dcard h3 a:focus-visible{color:var(--green-deep)}
.eh .ddesc p{font-size:15px;color:#4a4a44;max-width:62ch}
.eh .ddesc p+p{margin-top:10px}
.eh .dcard .actions{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}

@media(max-width:900px){
  .eh .clist{grid-template-columns:1fr}
  .eh .modusgrid{grid-template-columns:1fr;gap:16px}
}
@media(max-width:640px){
  .eh .dinner{grid-template-columns:1fr;padding:24px;gap:20px}
  .eh .dcard .logo{max-width:240px}
  .eh .msearch,.eh .msearch input{width:100%;min-width:0}
  .eh .mapbox{padding:8px}
  .eh .members-map{height:340px}
}

/* Aviso que sustituye al mapa mientras no se aceptan las cookies (las teselas son de OpenStreetMap). */
.eh .members-map{position:relative}
.eh .map-consent{position:absolute;inset:0;z-index:500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:24px;text-align:center;background:var(--sand);border-radius:12px;border:1px solid var(--line)}
.eh .map-consent p{margin:0;max-width:34ch;color:var(--muted);font-size:15px;line-height:1.5}

/* ---------------------------------------------------------------------------
   MEMBERS EN MÓVIL
   Las medidas de arriba son para pantalla grande. Aquí se recortan huecos y se
   recoloca la lista, SIN quitar contenido. Todo por debajo de 560 px: el
   escritorio y el corte de 640 px se quedan exactamente como están.
   --------------------------------------------------------------------------- */
@media(max-width:560px){
	/* ----- Cabecera ----- */
	.eh .members-page .mhero{padding:54px 0 40px}
	.eh .members-page .mhero h1{font-size:38px}
	.eh .members-page .mhero p{font-size:15.5px;line-height:1.55;margin-top:12px}
	.eh .members-page .mstats{display:grid;grid-template-columns:repeat(3,1fr);gap:0 10px;margin-top:22px}
	.eh .members-page .mstats b{font-size:26px}
	.eh .members-page .mstats small{font-size:10.5px;letter-spacing:.06em}

	/* ----- How it works ----- */
	.eh .modus{padding:42px 0}
	.eh .modusgrid{gap:10px}
	.eh .modus h2{font-size:23px;margin-top:7px}
	.eh .modustext p{font-size:14.5px;line-height:1.6}

	/* ----- Filtros y buscador -----
	   Los cinco continentes no caben en un renglón y partían en dos. En tira que
	   se arrastra con el dedo caben todos en una línea, con el último asomando
	   por el borde para que se vea que hay más. */
	.eh .directory{padding:0 0 42px}
	.eh .mfilters{display:block;padding-top:20px}
	.eh .chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
		scrollbar-width:none;margin:0 -16px;padding:0 16px}
	.eh .chips::-webkit-scrollbar{display:none}
	.eh .chip{flex:none;font-size:12.5px;padding:7px 14px}
	.eh .msearch{margin-top:10px}
	.eh .msearch input{font-size:14px;padding:10px 16px}

	/* ----- Mapa ----- */
	.eh .mlwrap{padding:20px 0 0}
	.eh .mapbox{padding:6px;border-radius:14px;margin-bottom:18px}
	.eh .members-map{height:280px;border-radius:10px}

	/* ----- Lista de firmas: dos por fila -----
	   Medidas las dos opciones con las 21 firmas desplegadas: a una columna
	   compacta la lista ocupa 1354 px y a dos columnas 1210 px. Además de ser
	   más corta, la rejilla aprovecha el ancho (a una columna sobraba medio
	   renglón vacío en los nombres cortos) y da más presencia a los logos.
	   La ficha pasa a vertical: logo arriba, nombre y país debajo. */
	.eh .clist{grid-template-columns:1fr 1fr;gap:8px}
	.eh .crow{flex-direction:column;align-items:flex-start;gap:7px;padding:10px;
		border-radius:12px;height:100%}
	.eh .crow .cl{width:44px;height:32px;padding:4px;border-radius:6px}
	.eh .crow .info{width:100%}
	.eh .crow .firm{font-size:12.5px;line-height:1.25}
	.eh .crow small{font-size:11px;gap:4px;align-items:flex-start;line-height:1.3}
	/* «View →» es decorativo (aria-hidden) y la ficha entera ya es el botón:
	   en vertical solo robaría ancho al nombre. */
	.eh .crow .go{display:none}
	.eh .flag{width:15px;height:11px;margin-top:1px}
	.eh .showall{margin-top:16px}
	.eh .showall .btn{padding:12px 24px;font-size:14px}

	/* ----- Ficha desplegada al tocar una firma ----- */
	.eh .detail{margin-top:20px}
	.eh .dinner{padding:18px;gap:14px}
	.eh .dcard .logo{height:88px;padding:16px;border-radius:12px;max-width:200px}
	.eh .dcard h3{font-size:22px;margin:5px 0 8px}
	.eh .ddesc p{font-size:14px;line-height:1.6}
	/* Los tres botones a todo el ancho, uno debajo de otro: sueltos quedaban
	   escalonados con anchos distintos y se tocan peor. */
	.eh .dcard .actions{margin-top:14px;gap:10px}
	.eh .dcard .actions .btn{flex:1 1 100%;justify-content:center}
}