/* Smile V2 — Legal CMS pages (Términos, Privacidad, Devoluciones, etc.)
   Scoped to body.cms-legal (set in templates/cms/page.tpl for whitelisted ids). */

body.cms-id-3, body.cms-id-6, body.cms-id-8, body.cms-id-10 { background: #F1EAE2; }

/* Kill legacy container constraints (cms-page.css ships a .page-content card with max-width:760px). */
body.cms-id-3 #wrapper,
body.cms-id-6 #wrapper,
body.cms-id-8 #wrapper,
body.cms-id-10 #wrapper,
body.cms-id-3 .container,
body.cms-id-6 .container,
body.cms-id-8 .container,
body.cms-id-10 .container,
body.cms-id-3 #main,
body.cms-id-6 #main,
body.cms-id-8 #main,
body.cms-id-10 #main { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; background: transparent !important; }

body.cms-id-3 .page-content,
body.cms-id-6 .page-content,
body.cms-id-8 .page-content,
body.cms-id-10 .page-content { max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }


/* hide PS native page header on legal pages (no duplicate H1) */
.cmsleg-page header.page-header,
.cmsleg-page ~ header.page-header,
body:has(.cmsleg-page) > #wrapper > .breadcrumb,
body:has(.cmsleg-page) > main > .breadcrumb { display: none !important; }

/* PS legacy heading inside CMS body — also hidden, replaced by .cmsleg-head h1 */
.cmsleg-content > h1,
.cmsleg-content > .page-heading { display: none !important; }

/* header band */
.cmsleg-head { border-bottom: 1px solid #E3D8CC; background: #F1EAE2; }
.cmsleg-head-in { max-width: 1100px; margin: 0 auto; padding: 52px 32px 40px; }
.cmsleg-crumb { font-size: 12px; letter-spacing: .06em; color: #9A928B; }
.cmsleg-crumb a { color: #9A928B; text-decoration: none; }
.cmsleg-crumb a:hover { color: #5C5550; }
.cmsleg-crumb b { color: #5C5550; font-weight: 500; }
.cmsleg-kick { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.cmsleg-kick .ln { width: 32px; height: 1px; background: #B8924F; }
.cmsleg-kick span { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #B8924F; font-weight: 600; }
.cmsleg-head h1 { font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: clamp(38px, 5vw, 58px); line-height: 1.04; letter-spacing: -0.015em; color: #241F1D; margin: 14px 0 0; }
.cmsleg-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; font-size: 13.5px; color: #5C5550; }
.cmsleg-meta .it { display: flex; align-items: center; gap: 8px; }
.cmsleg-meta svg { width: 15px; height: 15px; color: #B8924F; flex-shrink: 0; }
.cmsleg-meta a { color: #6B2C2C; text-decoration: none; }

/* layout */
.cmsleg-wrap { max-width: 1100px; margin: 0 auto; padding: 40px 32px 90px; display: grid; grid-template-columns: 248px 1fr; gap: 56px; align-items: start; }

/* sticky index */
.cmsleg-toc { position: sticky; top: 28px; }
.cmsleg-toc .t { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #B8924F; font-weight: 600; margin-bottom: 14px; }
.cmsleg-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.cmsleg-toc li { margin: 0; }
.cmsleg-toc a { display: flex; gap: 10px; padding: 8px 0; text-decoration: none; color: #5C5550; font-size: 13.5px; line-height: 1.4; border-left: 2px solid transparent; padding-left: 14px; margin-left: -2px; transition: color .2s, border-color .2s; }
.cmsleg-toc a:hover { color: #241F1D; }
.cmsleg-toc a.on { color: #6B2C2C; border-left-color: #B8924F; font-weight: 500; }
.cmsleg-toc a .num { color: #9A928B; font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* content */
.cmsleg-content { max-width: 680px; font-family: "Inter", sans-serif; color: #241F1D; }
.cmsleg-content > .lead,
.cmsleg-content > p:first-of-type {
  font-size: 16px; line-height: 1.7; color: #5C5550;
  padding: 22px 24px; background: #FAF7F2; border: 1px solid #E3D8CC;
  border-radius: 12px; margin: 0;
}
.cmsleg-content > .lead a,
.cmsleg-content > p:first-of-type a { color: #6B2C2C; text-decoration: underline; text-underline-offset: 2px; }
.cmsleg-content > .lead b,
.cmsleg-content > p:first-of-type b { color: #241F1D; font-weight: 600; }

.cmsleg-content section { padding-top: 46px; scroll-margin-top: 24px; }
.cmsleg-content section h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 25px; color: #241F1D; margin: 0; display: flex; align-items: baseline; gap: 14px; letter-spacing: -0.01em; }
.cmsleg-content section h2 .n { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; color: #B8924F; letter-spacing: .06em; background: #F4ECDF; border: 1px solid #E3D8CC; border-radius: 7px; padding: 4px 9px; flex-shrink: 0; }
.cmsleg-content section .rule { height: 1px; background: #E3D8CC; margin: 18px 0 0; }
.cmsleg-content section p { font-size: 15.5px; line-height: 1.75; color: #5C5550; margin: 18px 0 0; text-wrap: pretty; }
.cmsleg-content section p b { color: #241F1D; font-weight: 600; }
.cmsleg-content section ul { margin: 16px 0 0; padding-left: 0; list-style: none; }
.cmsleg-content section ul li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.7; color: #5C5550; margin: 10px 0; }
.cmsleg-content section ul li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: #B8924F; }

/* legacy content fallback (when CMS body still uses <p class="celeste"><b>N. TITULO</b></p>) */
.cmsleg-content p.celeste { font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 25px; color: #241F1D; margin: 46px 0 0; padding-top: 46px; scroll-margin-top: 24px; letter-spacing: -0.01em; border-top: 1px solid transparent; }
.cmsleg-content p.celeste b { font-weight: 500; }
.cmsleg-content p.celeste + p { margin-top: 18px; padding-top: 0; }

/* back-to-top */
.cmsleg-backtop { display: inline-flex; align-items: center; gap: 8px; margin-top: 60px; font-size: 13px; color: #5C5550; text-decoration: none; border: 1px solid #E3D8CC; border-radius: 999px; padding: 10px 18px; background: #FAF7F2; }
.cmsleg-backtop:hover { color: #241F1D; }
.cmsleg-backtop svg { width: 14px; height: 14px; color: #6B2C2C; }

/* help card */
.cmsleg-help { margin-top: 40px; background: linear-gradient(110deg, #6B2C2C, #501F1F); border-radius: 14px; padding: 28px 30px; color: #fff; }
.cmsleg-help h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 20px; margin: 0; }
.cmsleg-help p { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .85); margin: 8px 0 0; }
.cmsleg-help a { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; background: #fff; color: #6B2C2C; text-decoration: none; border-radius: 999px; padding: 11px 20px; font-size: 13px; font-weight: 600; }

/* mobile */
@media (max-width: 840px) {
  .cmsleg-wrap { grid-template-columns: 1fr; gap: 0; padding: 24px 22px 70px; }
  .cmsleg-toc { position: static; margin-bottom: 8px; background: #FAF7F2; border: 1px solid #E3D8CC; border-radius: 12px; padding: 16px 18px; }
  .cmsleg-toc ol { columns: 2; column-gap: 20px; }
  .cmsleg-toc a { border-left: 0; padding-left: 0; }
  .cmsleg-toc a.on { border-left: 0; }
  .cmsleg-content { max-width: none; }
  .cmsleg-head-in { padding: 36px 22px 28px; }
}

/* ---- Specificity bumps to beat legacy cms-page.css (`body.page-cms .page-content X`) ---- */
body.page-cms .cmsleg-content > p:first-of-type { margin: 0; }
body.page-cms .cmsleg-content section h2 { display: flex; align-items: baseline; gap: 14px; font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 25px; color: #241F1D; margin: 0; padding: 0; border: 0; line-height: 1.2; }
body.page-cms .cmsleg-content section p { margin: 18px 0 0; padding: 0; color: #5C5550; }
body.page-cms .cmsleg-content section a { color: #6B2C2C; }

body.page-cms .cmsleg-help { margin-top: 40px; background: linear-gradient(110deg, #6B2C2C, #501F1F); border-radius: 14px; padding: 28px 30px; color: #fff; }
body.page-cms .cmsleg-help h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 20px; margin: 0; padding: 0; border: 0; color: #fff; line-height: 1.25; }
body.page-cms .cmsleg-help p { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .85); margin: 8px 0 0; padding: 0; }
body.page-cms .cmsleg-help a { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; background: #fff; color: #6B2C2C; text-decoration: none; border-radius: 999px; padding: 11px 20px; font-size: 13px; font-weight: 600; }
body.page-cms .cmsleg-help a:hover { color: #501F1F; text-decoration: none; }

body.page-cms .cmsleg-backtop { display: inline-flex; align-items: center; gap: 8px; margin-top: 60px; font-size: 13px; color: #5C5550; text-decoration: none; border: 1px solid #E3D8CC; border-radius: 999px; padding: 10px 18px; background: #FAF7F2; }
body.page-cms .cmsleg-backtop:hover { color: #241F1D; text-decoration: none; }

/* ---- ToC link reset (legacy cms-page.css makes all <a> in .page-content underlined burgundy) ---- */
body.page-cms .cmsleg-toc a { color: #5C5550; text-decoration: none; border-left: 2px solid transparent; padding-left: 14px; margin-left: -2px; font-size: 13.5px; line-height: 1.4; display: flex; gap: 10px; padding-top: 8px; padding-bottom: 8px; }
body.page-cms .cmsleg-toc a:hover { color: #241F1D; text-decoration: none; }
body.page-cms .cmsleg-toc a.on { color: #6B2C2C; border-left-color: #B8924F; font-weight: 500; text-decoration: none; }
body.page-cms .cmsleg-toc a .num { color: #9A928B; font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* Hide empty paragraphs inserted by the legacy CMS editor (Word-style empty <p></p>). */
body.page-cms .cmsleg-content p:empty { display: none; }
body.page-cms .cmsleg-content p:has(> br:only-child) { display: none; }
body.page-cms .cmsleg-content p > span:empty { display: none; }
