/* ============================================================
   Ocosingo.mx — Global Classes (Fase 3)
   Reglas reutilizables. Consumen EXCLUSIVAMENTE var(--dm-*).
   Ningun color/tamano/fuente hardcodeado.
   ============================================================ */

/* ---------- Layout utilitario ---------- */
.dm-wrap{ max-width:1140px; margin-inline:auto; padding-inline:var(--dm-sp-5); }
.dm-section{ padding-block:var(--dm-sp-12); }
.dm-grid{ display:grid; gap:var(--dm-sp-5); }
.dm-grid.g2{ grid-template-columns:repeat(2,1fr); }
.dm-grid.g3{ grid-template-columns:repeat(3,1fr); }
.dm-grid.g4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1024px){ .dm-grid.g3,.dm-grid.g4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px){ .dm-grid.g2,.dm-grid.g3,.dm-grid.g4{ grid-template-columns:1fr; } }

/* ---------- Botones ---------- */
.dm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--dm-sp-2);
  font-family:var(--dm-font-display); font-weight:var(--dm-weight-semibold);
  font-size:var(--dm-text-base); line-height:1;
  padding:var(--dm-sp-3) var(--dm-sp-5); border-radius:var(--dm-radius-pill);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:background-color .15s,color .15s,border-color .15s,box-shadow .15s;
}
.dm-btn:focus-visible{ outline:none; box-shadow:var(--dm-ring); }
.dm-btn-primary{ background:var(--dm-primary); color:var(--dm-text-on-primary); }
.dm-btn-primary:hover{ background:var(--dm-primary-hover); }
.dm-btn-secondary{ background:var(--dm-secondary); color:var(--dm-text-on-dark); }
.dm-btn-accent{ background:var(--dm-accent); color:var(--dm-text-on-primary); }
.dm-btn-outline{ background:transparent; color:var(--dm-primary); border-color:var(--dm-border-strong); }
.dm-btn-outline:hover{ border-color:var(--dm-primary); background:var(--dm-primary-soft); }
.dm-btn-ghost{ background:transparent; color:var(--dm-text); }
.dm-btn-ghost:hover{ background:var(--dm-secondary-soft); }
.dm-btn-wa{ background:var(--dm-whatsapp); color:#fff; }
.dm-btn-wa:hover{ background:var(--dm-whatsapp-hover); }
.dm-btn-sm{ padding:var(--dm-sp-2) var(--dm-sp-4); font-size:var(--dm-text-sm); }
.dm-btn-lg{ padding:var(--dm-sp-4) var(--dm-sp-8); font-size:var(--dm-text-md); }
.dm-btn-block{ display:flex; width:100%; }

/* ---------- Tarjeta ---------- */
.dm-card{
  background:var(--dm-surface); border:1px solid var(--dm-border);
  border-radius:var(--dm-radius-lg); box-shadow:var(--dm-shadow-sm);
  overflow:hidden; transition:box-shadow .2s,transform .2s;
}
.dm-card:hover{ box-shadow:var(--dm-shadow); transform:translateY(-2px); }
.dm-card-media{ aspect-ratio:16/9; overflow:hidden; }
.dm-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.dm-card-body{ padding:var(--dm-sp-5); display:flex; flex-direction:column; gap:var(--dm-sp-3); }
.dm-card-cat{ font-family:var(--dm-font-display); font-size:var(--dm-text-xs); font-weight:var(--dm-weight-semibold); letter-spacing:.08em; text-transform:uppercase; color:var(--dm-primary); }
.dm-card-title{ font-family:var(--dm-font-display); font-size:var(--dm-text-lg); font-weight:var(--dm-weight-bold); color:var(--dm-secondary); margin:0; }
.dm-card-desc{ font-size:var(--dm-text-base); color:var(--dm-text-muted); margin:0; }
.dm-card-foot{ display:flex; align-items:center; gap:var(--dm-sp-3); padding-top:var(--dm-sp-3); border-top:1px solid var(--dm-border); }

/* ---------- Badges ---------- */
.dm-badge{ display:inline-flex; align-items:center; gap:var(--dm-sp-1); font-size:var(--dm-text-xs); font-weight:var(--dm-weight-semibold); padding:var(--dm-sp-1) var(--dm-sp-3); border-radius:var(--dm-radius-pill); background:var(--dm-secondary-soft); color:var(--dm-secondary); }
.dm-badge-premium{ background:var(--dm-accent-soft); color:var(--dm-accent); }
.dm-badge-sponsor{ background:color-mix(in srgb,var(--dm-sponsor) 15%,#fff); color:var(--dm-sponsor); }
.dm-badge-new{ background:var(--dm-primary-soft); color:var(--dm-primary); }

/* ---------- Tags / meta ---------- */
.dm-tag{ display:inline-flex; font-size:var(--dm-text-xs); padding:var(--dm-sp-1) var(--dm-sp-3); border-radius:var(--dm-radius-pill); background:var(--dm-bg-alt); color:var(--dm-text-muted); border:1px solid var(--dm-border); }
.dm-tag-row{ display:flex; flex-wrap:wrap; gap:var(--dm-sp-2); }
.dm-meta{ display:inline-flex; align-items:center; gap:var(--dm-sp-2); font-size:var(--dm-text-sm); color:var(--dm-text-muted); }
.dm-meta-row{ display:flex; flex-wrap:wrap; gap:var(--dm-sp-4); }

/* ---------- Chips ---------- */
.dm-chip{ display:inline-flex; align-items:center; gap:var(--dm-sp-2); font-size:var(--dm-text-sm); font-weight:var(--dm-weight-medium); padding:var(--dm-sp-2) var(--dm-sp-4); border-radius:var(--dm-radius-pill); background:var(--dm-surface); border:1px solid var(--dm-border); color:var(--dm-text); cursor:pointer; }
.dm-chip:hover{ border-color:var(--dm-primary); color:var(--dm-primary); }
.dm-chip.active{ background:var(--dm-primary); color:var(--dm-text-on-primary); border-color:var(--dm-primary); }

/* ---------- Encabezado de seccion ---------- */
.dm-sechead{ display:flex; flex-direction:column; gap:var(--dm-sp-2); margin-bottom:var(--dm-sp-6); }
.dm-sechead .eyebrow{ font-family:var(--dm-font-display); font-size:var(--dm-text-xs); font-weight:var(--dm-weight-semibold); letter-spacing:.1em; text-transform:uppercase; color:var(--dm-accent); }
.dm-sechead h2{ font-family:var(--dm-font-display); font-size:var(--dm-text-2xl); font-weight:var(--dm-weight-bold); color:var(--dm-secondary); margin:0; }
.dm-sechead p{ font-size:var(--dm-text-md); color:var(--dm-text-muted); margin:0; max-width:60ch; }

/* ---------- Buscador ---------- */
.dm-search{ display:flex; align-items:center; gap:var(--dm-sp-2); background:var(--dm-surface); border:1px solid var(--dm-border-strong); border-radius:var(--dm-radius-pill); padding:var(--dm-sp-2) var(--dm-sp-3); box-shadow:var(--dm-shadow-sm); }
.dm-search-field{ flex:1; border:0; outline:0; background:transparent; font-size:var(--dm-text-base); color:var(--dm-text); }

/* ---------- Estrellas / placeholder ---------- */
.dm-stars{ display:inline-flex; gap:2px; color:var(--dm-star); }
.dm-ph{ display:flex; align-items:center; justify-content:center; background:var(--dm-secondary-soft); color:var(--dm-text-faint); font-size:var(--dm-text-sm); aspect-ratio:16/9; }

/* ---------- Footer (Fase 5 · dev nativo) ---------- */
.dm-footer{ background:var(--dm-secondary); color:var(--dm-text-on-dark); padding:var(--dm-sp-16) var(--dm-sp-5) var(--dm-sp-6); }
.dm-footer-inner{ max-width:1140px; margin-inline:auto; display:grid; grid-template-columns:1.7fr 1fr 1fr 1.1fr; gap:var(--dm-sp-10); }
.dm-footer-brand{ display:flex; flex-direction:column; gap:var(--dm-sp-4); align-items:flex-start; }
.dm-footer-brandrow{ display:flex; align-items:center; gap:var(--dm-sp-3); }
.dm-footer-logo{ width:40px; height:40px; border-radius:var(--dm-radius-sm); background:var(--dm-primary) center/22px 22px no-repeat; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); flex:0 0 auto; }
.dm-footer-name{ font-family:var(--dm-font-display); font-weight:var(--dm-weight-bold); font-size:var(--dm-text-xl); color:#fff; margin:0; }
.dm-footer-tagline{ color:var(--dm-text-on-dark); opacity:.78; font-size:var(--dm-text-sm); line-height:1.6; max-width:38ch; margin:0; }
.dm-footer-social{ display:flex; gap:var(--dm-sp-3); margin-top:var(--dm-sp-2); }
.dm-soc{ width:38px; height:38px; border-radius:var(--dm-radius-pill); background-color:rgba(255,255,255,.08); background-position:center; background-repeat:no-repeat; background-size:18px 18px; transition:background-color .15s; }
.dm-soc:hover{ background-color:var(--dm-accent); }
.dm-soc-fb{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M13 22v-8h2.7l.4-3H13V9c0-.9.2-1.5 1.5-1.5H16V4.8c-.3 0-1.2-.1-2.2-.1-2.2 0-3.8 1.4-3.8 4V11H7.5v3H10v8h3z'/%3E%3C/svg%3E"); }
.dm-soc-ig{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2c2.7 0 3 0 4.1.1 1 .1 1.6.2 2 .4.5.2.9.5 1.3.9.4.4.7.8.9 1.3.2.4.3 1 .4 2 .1 1.1.1 1.4.1 4.1s0 3-.1 4.1c-.1 1-.2 1.6-.4 2a3.6 3.6 0 0 1-2.2 2.2c-.4.2-1 .3-2 .4-1.1.1-1.4.1-4.1.1s-3 0-4.1-.1c-1-.1-1.6-.2-2-.4a3.6 3.6 0 0 1-2.2-2.2c-.2-.4-.3-1-.4-2C3 15 3 14.7 3 12s0-3 .1-4.1c.1-1 .2-1.6.4-2A3.6 3.6 0 0 1 5.7 3.7c.4-.2 1-.3 2-.4C8.8 2 9.1 2 12 2zm0 5.4A4.6 4.6 0 1 0 12 16.6 4.6 4.6 0 0 0 12 7.4zm0 7.6a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm4.8-7.9a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2z'/%3E%3C/svg%3E"); }
.dm-soc-tt{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M16.5 3c.3 2.1 1.7 3.7 3.5 4v3c-1.3 0-2.5-.4-3.5-1v6a5.5 5.5 0 1 1-5.5-5.5c.3 0 .6 0 .9.1v3.1A2.4 2.4 0 1 0 13 15V3h3.5z'/%3E%3C/svg%3E"); }
.dm-soc-yt{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M23 12s0-3.2-.4-4.7c-.2-.9-.9-1.5-1.7-1.8C19.4 5.2 12 5.2 12 5.2s-7.4 0-8.9.3c-.8.3-1.5.9-1.7 1.8C1 8.8 1 12 1 12s0 3.2.4 4.7c.2.9.9 1.5 1.7 1.8 1.5.3 8.9.3 8.9.3s7.4 0 8.9-.3c.8-.3 1.5-.9 1.7-1.8C23 15.2 23 12 23 12zM9.8 14.9V9.1l5.2 2.9-5.2 2.9z'/%3E%3C/svg%3E"); }
.dm-footer-col{ display:flex; flex-direction:column; gap:var(--dm-sp-3); }
.dm-footer-title{ font-family:var(--dm-font-display); font-size:var(--dm-text-xs); font-weight:var(--dm-weight-bold); letter-spacing:.1em; text-transform:uppercase; color:var(--dm-accent); margin:0 0 var(--dm-sp-1); }
.dm-footer-links{ display:flex; flex-direction:column; gap:var(--dm-sp-2); }
.dm-footer-link{ color:var(--dm-text-on-dark); text-decoration:none; font-size:var(--dm-text-sm); transition:color .15s; }
.dm-footer-link:hover{ color:var(--dm-accent); }
.dm-footer-bottom{ max-width:1140px; margin:var(--dm-sp-10) auto 0; padding-top:var(--dm-sp-5); border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; gap:var(--dm-sp-4); align-items:center; justify-content:space-between; }
.dm-footer-copy{ color:var(--dm-text-faint); font-size:var(--dm-text-xs); margin:0; }
.dm-footer-legal{ display:flex; gap:var(--dm-sp-5); flex-wrap:wrap; }
.dm-footer-legal .dm-footer-link{ font-size:var(--dm-text-xs); }
@media (max-width:1024px){ .dm-footer-inner{ grid-template-columns:1fr 1fr; } }
@media (max-width:767px){ .dm-footer-inner{ grid-template-columns:1fr; } .dm-footer-bottom{ flex-direction:column; align-items:flex-start; } }