/* === ARTICLE === */
.article{padding:var(--space-3) 0 var(--space-5)}
.article__head{margin-bottom:var(--space-4)}
.article__subtitle{font-size:1.1rem;color:var(--color-text-soft);margin:0 0 var(--space-3)}
.article__meta{display:flex;gap:.5rem;flex-wrap:wrap;font-size:.85rem}
.tag{background:var(--color-bg-muted);color:var(--color-primary);padding:.2rem .6rem;border-radius:99px;text-decoration:none;font-weight:500}
.tag:hover{background:var(--color-primary);color:#fff}
.article__body{font-size:1.05rem;line-height:1.65;max-width:68ch}
.article__body p{margin-bottom:var(--space-3)}
.article__body img{margin:var(--space-3) 0;border-radius:var(--radius-md)}

/* === FACT CARD === */
.fact-card{background:var(--color-bg-elev);border:1px solid var(--color-border);border-left:4px solid var(--color-accent);border-radius:var(--radius-md);padding:var(--space-4);margin:var(--space-4) 0;float:right;width:min(360px,100%);margin-left:var(--space-4)}
@media (max-width:720px){.fact-card{float:none;width:100%;margin-left:0}}
.fact-card__title{font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-soft);margin:0 0 var(--space-3)}
.fact-card__grid{display:grid;grid-template-columns:auto 1fr;column-gap:var(--space-3);row-gap:var(--space-2);margin:0;font-size:.92rem}
.fact-card__grid dt{color:var(--color-text-faint);font-weight:500}
.fact-card__grid dd{margin:0;color:var(--color-text)}
.fact-card__grid code{background:var(--color-bg-muted);padding:.1rem .3rem;border-radius:var(--radius-sm);font-size:.85em}
.fact-card__map{margin-top:var(--space-3)}

/* === GALLERY === */
.article__gallery{margin-top:var(--space-5);clear:both}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-2)}
.gallery-grid__item{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-md);background:var(--color-bg-muted)}
.gallery-grid__item{margin:0;position:relative}
.gallery-grid__item a{display:block;height:100%;width:100%}
.gallery-grid__item img{width:100%;height:100%;object-fit:cover;transition:transform .25s;background:var(--color-bg-muted)}
.gallery-grid__item:hover img{transform:scale(1.04)}
.gallery-grid__item figcaption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.65),transparent);color:#fff;font-size:.72rem;padding:1.2rem .6rem .4rem;line-height:1.3;opacity:0;transition:opacity .15s}
.gallery-grid__item:hover figcaption{opacity:1}

/* === FAQ === */
.article__faq{margin-top:var(--space-5);clear:both}
.faq-item{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3);margin-bottom:var(--space-2);background:var(--color-bg-elev)}
.faq-item summary{font-weight:600;cursor:pointer;list-style:none;padding-right:1.5rem;position:relative}
.faq-item summary::after{content:"+";position:absolute;right:0;top:0;font-size:1.25rem;line-height:1}
.faq-item[open] summary::after{content:"−"}
.faq-item > div{padding-top:var(--space-2);color:var(--color-text-soft)}

/* === CARDS / LISTING === */
.cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-3)}
.card{background:var(--color-bg-elev);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.06)}
.card a{display:block;text-decoration:none;color:var(--color-text)}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--color-bg-muted)}
.card__placeholder{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:3/2;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-soft) 60%,var(--color-accent) 100%);color:#fff;font-family:var(--font-stack-display);font-size:3rem;font-weight:700;letter-spacing:-.04em;text-shadow:0 2px 12px rgba(0,0,0,.18)}
.card__title{display:block;padding:var(--space-3);font-weight:600;font-size:.95rem;line-height:1.35}
.card__meta{padding:0 var(--space-3) var(--space-3);font-size:.82rem;color:var(--color-text-faint)}

/* === HOMEPAGE === */
.hero{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-soft) 100%);color:#fff;padding:var(--space-6) 0}
.hero__inner{max-width:740px}
.hero h1{color:#fff;font-size:clamp(2rem,5vw,3.25rem);margin:0 0 var(--space-3)}
.hero p{font-size:1.15rem;color:rgba(255,255,255,.92);margin:0}
.hero__cta{display:flex;gap:var(--space-2);margin-top:var(--space-4);flex-wrap:wrap}
.btn{display:inline-block;padding:.7rem 1.4rem;border-radius:var(--radius-md);font-weight:600;text-decoration:none;border:0}
.btn--primary{background:var(--color-accent);color:#1b1c1f}
.btn--primary:hover{background:var(--color-accent-soft);color:#1b1c1f}
.btn--ghost{background:rgba(255,255,255,.12);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.2);color:#fff}

/* === TOOL PAGES === */
.tool{background:var(--color-bg-elev);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);margin:var(--space-4) 0}
.tool input[type="search"],.tool input[type="text"]{width:100%;padding:.7rem 1rem;border:2px solid var(--color-border);border-radius:var(--radius-md);font-size:1rem;background:var(--color-bg)}
.tool input[type="search"]:focus,.tool input[type="text"]:focus{border-color:var(--color-primary);outline:0}
.tool__result{margin-top:var(--space-4);padding:var(--space-3);background:var(--color-bg-muted);border-radius:var(--radius-md);font-size:1rem}
.tool__result--big{font-size:1.5rem;font-weight:700}
.tool table{width:100%;border-collapse:collapse;margin-top:var(--space-3)}
.tool th,.tool td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid var(--color-border)}
.tool th{background:var(--color-bg-muted);font-weight:600;font-size:.9rem;color:var(--color-text-soft)}

/* === MAP === */
#mapa-container{height:70vh;min-height:480px;border-radius:var(--radius-md);overflow:hidden}

/* === LIST PAGE === */
.list-head{padding:var(--space-4) 0;border-bottom:1px solid var(--color-border);margin-bottom:var(--space-4)}
.list-head h1{margin:0 0 var(--space-2)}
.list-head p{margin:0;color:var(--color-text-soft)}