*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Georgia,'Times New Roman',serif;background:#faf8f4;color:#2b2620;line-height:1.7}
.wrap{max-width:760px;margin:0 auto;padding:0 18px}
.wrap.wide{max-width:1060px}
main{padding:36px 0}
.grid{display:grid;grid-template-columns:1fr;gap:18px}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid #e4ded2;border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .18s,transform .18s}
.card:hover{box-shadow:0 6px 22px rgba(43,38,32,.13);transform:translateY(-2px)}
.card img{width:100%;height:150px;object-fit:cover;display:block;transition:transform .35s}
.card:hover img{transform:scale(1.045)}
.cardtext{padding:16px 20px 18px;flex:1}
.card h3{font-size:1.15rem;color:#2e4a2d;margin-bottom:6px}
.card p{font-size:.95rem;color:#5a5248}
.card.hero{grid-column:1/-1;flex-direction:row}
.card.hero img{width:46%;align-self:stretch;height:auto;min-height:250px;object-fit:cover}
.card.hero .cardtext{padding:30px 36px;display:flex;flex-direction:column;justify-content:center}
.card.hero h3{font-size:1.55rem;margin-bottom:10px}
.card.hero p{font-size:1rem}
.cat{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#6f6658;margin-bottom:6px}
footer{border-top:1px solid #e4ded2;padding:26px 0;font-size:.85rem;color:#8a8175;margin-top:24px}
footer a{color:#3d5a3c}
article img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;border-radius:8px;margin:18px 0}
article h1{font-size:1.7rem;margin-bottom:6px}
.meta{color:#8a8175;font-size:.85rem;margin-bottom:20px}
article h2{margin:26px 0 10px;font-size:1.25rem;color:#2e4a2d}
article p,article li{margin-bottom:12px}
article ul{padding-left:22px}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0}
table{border-collapse:collapse;width:100%;margin:0;font-size:.92rem}
th,td{border:1px solid #ddd5c8;padding:8px 10px;text-align:left}
th{background:#efe9dd}
@media (min-width:720px){
  .grid{grid-template-columns:1fr 1fr;align-items:start;gap:14px}
  /* la última de cada fila, ligeramente más baja: se ve cuál cierra la fila */
  .grid .card:nth-child(2n){margin-top:26px}
}
@media (max-width:600px){
  .tablewrap table{display:block}
  .tablewrap thead{display:none}
  .tablewrap tr:has(th){display:none}
  .tablewrap tr{display:block;border:1px solid #ddd5c8;border-radius:6px;margin-bottom:10px;padding:10px 12px;background:#fff}
  .tablewrap td{display:inline-block;border:none;padding:2px 8px 2px 0;margin:0}
  .tablewrap td::before{content:attr(data-label) ": ";font-weight:700;color:#3d5a3c}
  header{padding:32px 0 26px}
  header h1{font-size:1.5rem}
  article h1{font-size:1.35rem}
  article h2{font-size:1.1rem}
  th,td{padding:6px 8px;font-size:.85rem}
  .cardtext{padding:14px 16px 16px}
  .card.hero{flex-direction:column}
  .card.hero img{width:100%;height:150px;min-height:0}
  .card.hero .cardtext{padding:14px 16px 16px}
  .card.hero h3{font-size:1.25rem}
}
a.back{display:inline-block;margin-bottom:14px;color:#3d5a3c;text-decoration:none}
.credits{font-size:.78rem;color:#9a9181;margin-top:26px;border-top:1px dashed #ddd5c8;padding-top:10px}

/* Cabecera compacta en artículos y créditos */
.sitehead{background:#3d5a3c;color:#f5f1e8;padding:14px 0}
.sitehead .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.sitehead .brand{color:#f5f1e8;text-decoration:none;font-weight:700;font-size:1.15rem}
.mainnav{display:flex;align-items:center;gap:18px}
.mainnav>a,.drop>summary{color:#f5f1e8;opacity:.85;text-decoration:none;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em}
.mainnav>a:hover,.drop>summary:hover{opacity:1}
.drop{position:relative}
.drop>summary{cursor:pointer;list-style:none}
.drop>summary::-webkit-details-marker{display:none}
.drop>summary::after{content:" ▾";font-size:.7em}
.sub{display:none;position:absolute;top:calc(100% + 10px);left:-6px;background:#fff;border:1px solid #e4ded2;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.14);min-width:150px;padding:6px 0;z-index:30}
.sub a{display:block;color:#2e4a2d;padding:8px 14px;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;text-decoration:none}
.sub a:hover{background:#f5f1e8}
.drop:hover .sub,.drop[open] .sub{display:block}
/* Chip de filtro en portada */
.filterchip{margin:14px 0 0;font-size:.9rem;color:#6f6658}
.filterchip a{color:#2e7d32}
/* Artículos relacionados al final */
.related{margin-top:36px;border-top:1px dashed #ddd5c8;padding-top:20px}
.related h2{font-size:1.15rem;color:#2e4a2d;margin:0 0 14px}
.relgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.relgrid a{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid #e4ded2;border-radius:8px;overflow:hidden;transition:transform .15s,box-shadow .15s}
.relgrid a:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.07)}
.relgrid img{width:100%;height:95px;object-fit:cover;display:block}
.relgrid span{display:block;padding:9px 11px 11px;font-size:.84rem;color:#2e4a2d;font-weight:bold;line-height:1.3}
@media (max-width:720px){
  .relgrid{grid-template-columns:1fr}
  .relgrid img{height:130px}
  /* cabecera en una sola línea también en móvil */
  .sitehead{padding:10px 0}
  .sitehead .brand{font-size:.95rem}
  .mainnav{gap:10px}
  .mainnav>a,.drop>summary{font-size:.74rem;letter-spacing:.04em;padding:4px 8px}
  .sub{min-width:140px}
  .sub a{font-size:.72rem;padding:9px 14px}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Pie de sitio */
.sitefoot{background:#3d5a3c;color:#f5f1e8;padding:16px 0;margin-top:40px;font-size:.8rem;text-align:center}
.sitefoot a{color:#f5f1e8;opacity:.85;text-decoration:none;padding:0 10px;display:inline-block}
.sitefoot a:hover{opacity:1}
/* Caja de afiliación en artículos */
.afiliate{background:#f7f4ec;border:1px solid #e4ded2;border-radius:8px;padding:14px 16px;margin:20px 0;font-size:.92rem}
.afiliate h3{margin:0 0 8px;font-size:.95rem;color:#2e4a2d}
.afiliate ul{margin:6px 0 10px;padding-left:20px}
.afiliate a{color:#2e7d32}
.afiliate .note{font-size:.78rem;color:#6f6658}

/* Tarjetas de producto (afiliado) — estilo flat, tarjetas sueltas tipo relgrid */
.prodcards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin:20px 0}
.prodcard{background:#fff;border:1px solid #e4ded2;border-radius:8px;overflow:hidden;position:relative;transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column}
.prodcard:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.07)}
.prodcard .badge{position:absolute;top:10px;right:10px;background:#e11d48;color:#fff;font-size:10px;font-weight:700;padding:4px 10px;border-radius:999px;z-index:1}
.prodcard .pimg{height:135px;display:flex;align-items:center;justify-content:center;background:#fff}
.prodcard .pimg img{max-height:120px;max-width:75%;object-fit:contain}
.prodcard .meta{display:flex;align-items:center;gap:6px;margin:10px 12px 6px}
.prodcard .ic{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px}
.ic.g{background:#e5e7eb}.ic.b{background:#dbeafe}.ic.o{background:#ffedd5}.ic.v{background:#dcfce7}
.prodcard .rate{margin-left:auto;color:#6b7280;font-size:12px}
.prodcard .rate b{color:#65a30d}
.prodcard .brand{text-transform:uppercase;letter-spacing:.08em;color:#6b7280;font-size:10px;font-weight:600;margin:0 12px}
.prodcard h4{margin:4px 12px 6px;font-size:16px;color:#1e3a5f;font-weight:600;line-height:1.25}
.prodcard p.desc{color:#6b7280;font-size:12.5px;line-height:1.5;margin:0 12px 12px}
.prodcard .buy{display:block;background:#2563eb;color:#fff;border-radius:10px;padding:9px 12px;text-decoration:none;text-align:center;margin:0 12px 12px;margin-top:auto}
.prodcard .buy:hover{background:#1d4ed8}
.prodcard .buy .shop{display:block;font-size:10px;opacity:.85;letter-spacing:.06em;text-transform:uppercase}
.prodcard .buy .pr{font-size:16px;font-weight:700}
@media(max-width:720px){.prodcards{grid-template-columns:1fr}.prodcard .pimg{height:150px}}
.prodcards:has(.prodcard:only-child){grid-template-columns:1fr}
.prodcards:has(.prodcard:nth-child(2):last-child){grid-template-columns:1fr 1fr}
.prods-note{font-size:.78rem;color:#6f6658;margin:8px 0 0}