/* Lupo Rooms — Directorio de ciudades por país.
   Lo usan el directorio europeo y las páginas de cada país (Italia, España,
   Portugal, Reino Unido, Polonia). Estaba en línea dentro de la página de
   Italia; se saca aquí para no repetirlo en cinco sitios. */

/* ── Directorio de países ─────────────────────────────────────────── */
.dir-tabs { display:flex; flex-wrap:nowrap; gap:10px; overflow-x:auto; scrollbar-width:none;
            padding:0 .5rem 4px; margin-bottom:1.5rem; }
.dir-tabs::-webkit-scrollbar { display:none; }
.dir-tab { flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
           background:#fff; border:1.5px solid rgba(0,0,0,.10); border-radius:999px;
           padding:10px 18px; font-weight:700; font-size:.95rem; color:#1a1a1a;
           transition:border-color .15s, background .15s, color .15s; }
.dir-tab small { background:rgba(0,0,0,.07); border-radius:999px; padding:1px 8px; font-size:.75rem; font-weight:700; }
.dir-tab:hover { border-color:#b81f22; color:#b81f22; }
.dir-tab.is-on { background:#b81f22; border-color:#b81f22; color:#fff; }
.dir-tab.is-on small { background:rgba(255,255,255,.25); color:#fff; }
.dir-panel.dir-off { display:none; }
.dir-hub { display:inline-block; background:#b81f22; color:#fff !important; font-weight:700;
           padding:11px 24px; border-radius:999px; text-decoration:none; margin:0 .5rem 1.25rem;
           transition:background .15s; }
.dir-hub:hover { background:#781c1c; }
.dir-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; padding:0 .5rem; }
@media (min-width:640px){ .dir-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .dir-grid { grid-template-columns:repeat(5,1fr); } }
.dir-city { display:flex; flex-direction:column; gap:8px; min-width:0; }
.dir-city-main { text-decoration:none; display:block; }
.dir-thumb { position:relative; aspect-ratio:3/4; border-radius:14px; overflow:hidden;
             background-size:cover; background-position:center; background-color:#e5dccb;
             display:flex; align-items:flex-end; padding:14px;
             box-shadow:0 2px 12px rgba(0,0,0,.08); transition:transform .2s, box-shadow .2s; }
.dir-thumb::after { content:''; position:absolute; inset:0;
                    background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0) 60%); }
.dir-thumb--plain { background:linear-gradient(135deg,#b81f22,#781c1c);
                    align-items:center; justify-content:center; flex-direction:column; gap:6px; text-align:center; }
.dir-thumb--plain::after { background:none; }
.dir-pin { color:rgba(255,255,255,.55); font-size:2.2rem; line-height:1; }
.dir-thumb--plain .dir-city-name { font-size:1rem; }
.dir-city-main:hover .dir-thumb { transform:translateY(-4px); box-shadow:0 12px 30px rgba(184,31,34,.18); }
.dir-city-name { position:relative; z-index:1; color:#fff; font-weight:800; font-size:1.05rem; line-height:1.2; }
.dir-subs > summary { cursor:pointer; list-style:none; font-size:.8rem; font-weight:700;
                      color:#781c1c; padding:2px 4px; }
.dir-subs > summary::-webkit-details-marker { display:none; }
.dir-subs > summary::before { content:'▾ '; }
.dir-subs[open] > summary::before { content:'▴ '; }
.dir-chips { display:flex; flex-wrap:wrap; gap:6px; padding:6px 2px 0; }
.dir-chips a { display:inline-block; background:#fff; border:1px solid #ebd9ba; color:#781c1c;
               font-size:.78rem; font-weight:600; padding:4px 10px; border-radius:999px; text-decoration:none; }
.dir-chips a:hover { background:#f3e8d6; }
@media (prefers-color-scheme: dark) {
    .dir-tab { background:rgba(255,255,255,.06); color:#f5f5f5; border-color:rgba(255,255,255,.14); }
    .dir-chips a { background:rgba(255,255,255,.06); color:#f0d9d9; border-color:rgba(255,255,255,.14); }
}

/* Sección cuando el panel va dentro de la página de un país.
   box-sizing explícito: no todas las plantillas traen el reset global, y
   width:100% MÁS relleno sumaba 40 px y desbordaba la página en móvil. */
.dir-section, .dir-section *, .dir-tabs, .dir-tabs *, .dir-grid, .dir-grid * { box-sizing:border-box; }
.dir-section { max-width:1400px; margin:2.5rem auto; padding:0 1.25rem; width:100%;
               font-family:'Montserrat',sans-serif; }
.dir-h2 { color:#b81f22; font-weight:800; font-size:1.6rem; line-height:1.3; margin:0 0 .5rem; }
.dir-p  { color:#4a4a4a; line-height:1.7; margin:0 0 1.5rem; max-width:820px; }
.dir-section .dir-grid { padding:0; }

/* ── Portada del directorio europeo ───────────────────────────────────────
   Sin foto de archivo: en una página de 5 países, una imagen de una ciudad
   concreta despista. Fondo de marca + las cifras reales del directorio. */
.eu-hero { background:linear-gradient(135deg,#781c1c 0%,#b81f22 55%,#d13a3d 100%);
           border-radius:1.25rem; margin:1.5rem auto 2rem; max-width:1400px;
           padding:3rem 1.5rem; position:relative; overflow:hidden; box-sizing:border-box; }
.eu-hero::after { content:''; position:absolute; right:-90px; top:-90px; width:320px; height:320px;
                  border-radius:50%; background:rgba(255,255,255,.07); }
.eu-hero-in { position:relative; z-index:1; max-width:820px; margin:0 auto; text-align:center;
              font-family:'Montserrat',sans-serif; }
.eu-kicker { display:inline-block; background:rgba(255,255,255,.18); color:#fff;
             border-radius:999px; padding:5px 16px; font-size:.75rem; font-weight:800;
             letter-spacing:.12em; text-transform:uppercase; margin-bottom:1rem; }
.eu-hero h1 { color:#fff; font-size:2.1rem; line-height:1.12; font-weight:900; margin:0 0 .75rem; }
.eu-hero p  { color:rgba(255,255,255,.9); font-size:1.05rem; line-height:1.6; margin:0 auto 1.75rem; max-width:620px; }
.eu-stats { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
.eu-stat { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
           border-radius:.9rem; padding:.85rem 1.4rem; min-width:104px; }
.eu-stat strong { display:block; color:#fff; font-size:1.7rem; font-weight:900; line-height:1; }
.eu-stat span   { display:block; color:rgba(255,255,255,.82); font-size:.78rem; font-weight:600;
                  margin-top:.35rem; text-transform:uppercase; letter-spacing:.05em; }
.eu-flags { margin-top:1.5rem; font-size:1.6rem; letter-spacing:.35rem; line-height:1; }
@media (min-width:768px){ .eu-hero { padding:4rem 2rem; } .eu-hero h1 { font-size:3rem; } }