:root {
–brand: #0E4A4F; /* verde petróleo */
–accent: #C5A46D; /* dorado suave */
–ink: #fff;
–bg: #0E4A4F; /* fondo verde */
–card-size: clamp(220px, 26vw, 280px);
–art-inset: clamp(6px, 2.5vw, 16px);
–art-scale: 0.88;
}

.gd * {
box-sizing: border-box;
text-transform: none; /* elimina capitalización */
}

.gd {
font-family: “Open Sans”, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(–ink);
background: var(–bg);
}

.gd-wrap {
max-width: 1200px;
margin: 0 auto;
padding: clamp(16px, 3vw, 32px);
}

.gd-title {
font-family: “Playfair Display”, serif;
font-weight: 600;
color: var(–ink);
font-size: clamp(24px, 4vw, 40px);
margin: 0 0 6px;
}

.gd-sub {
margin: 0;
opacity: 0.9;
font-size: clamp(14px, 2.4vw, 16px);
}

/* ====== GRID ====== */
.gd-grid {
display: grid;
gap: clamp(12px, 2.2vw, 20px);
justify-items: center;
margin-top: 22px;
grid-template-columns: repeat(auto-fit, minmax(var(–card-size), 1fr));
}

/* ====== TARJETA ====== */
.gd-card {
width: var(–card-size);
border-radius: 18px;
overflow: hidden;
text-decoration: none;
color: inherit;
outline: none;
background: #144f52;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.gd-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
background: var(–accent);
color: #000;
}

.gd-card:focus-visible {
box-shadow: 0 0 0 3px rgba(197, 164, 109, 0.55);
}

/* ====== ARTE ====== */
.gd-art {
width: 100%;
aspect-ratio: 1/1;
background-image: var(–img);
background-repeat: no-repeat;
background-position: center;
background-size: calc(100% * var(–art-scale)) auto;
padding: var(–art-inset);
}

/* ====== PIE ====== */
.gd-foot {
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
justify-content: center;
padding: 10px 12px;
border-top: 1px solid rgba(255,255,255,0.15);
background: transparent;
}

.gd-chip {
display: inline-block;
background: rgba(255, 255, 255, 0.1);
color: #fff;
border: 1px solid rgba(255,255,255,0.2);
padding: 6px 12px;
border-radius: 999px;
font-weight: 700;
letter-spacing: 0.2px;
font-size: 13px;
}

.gd-tag {
font-size: 12px;
color: #fff;
text-align: center;
min-height: 1.2em;
}

@media (max-width: 768px) {
:root {
–art-scale: 0.96;
}
}

@media (max-width: 480px) {
:root {
–art-scale: 1.02;
}
}

/* — Anula letra capital del tema SOLO dentro de .gd — */
.gd h1::first-letter,
.gd h2::first-letter,
.gd h3::first-letter,
.gd p::first-letter,
.gd li::first-letter,
.gd .gd-title::first-letter,
.gd .gd-sub::first-letter{
float: none !important;
font-size: inherit !important;
line-height: inherit !important;
padding: 0 !important;
margin: 0 !important;
color: inherit !important;
}

/* Por si el tema usa clases de dropcap */
.gd .dropcap,
.gd .cap,
.gd .firstcharacter{
float: none !important;
font-size: inherit !important;
line-height: inherit !important;
}