:root {
  --of-ink-950:#15140f;
  --of-ink-800:#2e2b21;
  --of-ink-600:#585647;
  --of-ink-400:#918d78;
  --of-ink-300:#b3ae97;
  --of-ink-200:#d1ccb6;
  --of-gold-50:#f8f2e4;
  --of-gold-100:#eee0bd;
  --of-gold-200:#e0c98c;
  --of-gold-300:#d0b163;
  --of-gold-500:#ac8531;
  --of-gold-600:#8f6b26;
  --of-gold-700:#70521d;
  --of-paper:#faf8f1;
  --of-paper-2:#f4f1e6;
  --of-card:#ffffff;
  --of-border:#d1ccb6;
  --of-border-strong:#918d78;
  --of-danger:#a8443a;
  --of-success:#4d6b45;
  --of-shadow-s:0 1px 2px rgba(21,20,15,.08);
  --of-shadow-m:0 4px 12px rgba(21,20,15,.10);
  --of-shadow-l:0 12px 32px rgba(21,20,15,.14);
  --of-radius-s:4px;
  --of-radius-m:8px;
  --of-radius-l:14px;
  --of-container:1200px;
  --of-transition:160ms cubic-bezier(.2,.6,.3,1);
}

* { box-sizing:border-box; }
html { background:var(--of-paper); }
body { margin:0; background:var(--of-paper); color:var(--of-ink-950); }

/* Links and focus */
a { transition:color var(--of-transition), background-color var(--of-transition), border-color var(--of-transition); }
main a:not(.wp-element-button):not(.orofacil-whatsapp):hover,
footer a:hover { color:var(--of-gold-700); text-decoration:underline; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline:2px solid var(--of-gold-500) !important;
  outline-offset:1px;
}

/* Header */
.orofacil-header {
  position:sticky;
  top:0;
  z-index:100;
  background:var(--of-card);
  border-bottom:1px solid var(--of-border);
}
.admin-bar .orofacil-header { top:32px; }
.orofacil-header-inner {
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  min-height:74px;
  padding-left:28px !important;
  padding-right:28px !important;
  gap:24px;
}
.orofacil-brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--of-ink-950) !important;
  text-decoration:none !important;
  white-space:nowrap;
}
.orofacil-brand-mark {
  display:block;
  width:37px;
  height:30px;
  flex:0 0 37px;
  background:url('../images/logo-alt-2-mark.png') center/contain no-repeat;
}
.orofacil-brand-word {
  font-family:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size:20px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1;
}
.orofacil-brand-word .gold { color:var(--of-gold-500); }
.orofacil-nav { flex:1 1 auto; }
.orofacil-nav .wp-block-navigation-item__content {
  color:var(--of-ink-600) !important;
  padding:25px 0 20px;
  border-bottom:2px solid transparent;
  transition:color var(--of-transition), border-color var(--of-transition);
}
.orofacil-nav .wp-block-navigation-item__content:hover { color:var(--of-ink-950) !important; }
.orofacil-nav .current-menu-item > .wp-block-navigation-item__content,
.orofacil-nav .current-menu-ancestor > .wp-block-navigation-item__content {
  color:var(--of-ink-950) !important;
  border-bottom-color:var(--of-gold-500);
}
.orofacil-header-actions { gap:16px; }
.orofacil-header-phone {
  margin:0;
  white-space:nowrap;
  font-family:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size:15px;
  font-weight:600;
}
.orofacil-header-phone a { color:var(--of-ink-950); text-decoration:none; }
.orofacil-header-cta .wp-element-button { padding:11px 18px; min-height:44px; }

/* Buttons — design system uses weight 600 (not 700). */
.wp-element-button,
.wp-block-button__link,
.wpcf7-submit {
  min-height:44px;
  font-weight:600 !important;
  transition:background-color var(--of-transition), color var(--of-transition), border-color var(--of-transition);
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.wpcf7-submit:hover { background:var(--of-gold-600) !important; color:var(--of-ink-950) !important; }
.orofacil-secondary .wp-element-button {
  background:transparent !important;
  color:var(--of-ink-950) !important;
  border:1px solid var(--of-border-strong);
}
.orofacil-secondary .wp-element-button:hover { background:var(--of-paper-2) !important; }
.orofacil-dark-button .wp-element-button { background:var(--of-ink-950) !important; color:var(--of-paper) !important; }
.orofacil-dark-button .wp-element-button:hover { background:var(--of-ink-800) !important; color:var(--of-paper) !important; }

/* Common page rhythm */
.orofacil-hero {
  padding:96px 32px 64px !important;
}
.orofacil-eyebrow {
  margin-bottom:12px !important;
  color:var(--of-gold-600);
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.orofacil-display {
  width:min(940px, calc(100vw - 64px)) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-wrap:balance;
}
.orofacil-lead {
  max-width:670px;
  margin-left:auto !important;
  margin-right:auto !important;
  color:var(--of-ink-600);
}
.orofacil-page-intro { padding-top:80px !important; padding-left:32px !important; padding-right:32px !important; }
.orofacil-page-intro > h1 { font-size:clamp(32px,4.5vw,52px) !important; }
.orofacil-section {
  margin-bottom:88px !important;
  padding-left:32px !important;
  padding-right:32px !important;
}
.orofacil-section-tight { margin-bottom:56px !important; }
.orofacil-narrow { max-width:760px; margin-left:auto; margin-right:auto; }

/* Wide sections: keep introductory copy narrow, then open visual/content sections to the real wide size.
   This is intentionally not scoped to body.home because the WordPress editor/theme preview does not
   always add that body class. Force both the alignwide group and its direct children to use 1200px. */
.orofacil-section.alignwide:not(.orofacil-narrow) {
  width:min(1200px, calc(100vw - 64px)) !important;
  max-width:1200px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.orofacil-section.alignwide:not(.orofacil-narrow) > :where(:not(.alignfull)) {
  width:100% !important;
  max-width:100% !important;
}

/* Cards */
.orofacil-card,
.orofacil-form-card,
.orofacil-price-list {
  background:var(--of-card);
  border:1px solid var(--of-border);
  border-radius:var(--of-radius-l);
  box-shadow:var(--of-shadow-m);
}
.orofacil-card { padding:28px !important; height:100%; }
.orofacil-step-number {
  margin:0;
  color:var(--of-gold-600);
  font-family:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size:32px;
  font-weight:700;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.orofacil-step-detail .orofacil-step-number { font-size:40px; min-width:58px; }
.orofacil-step-detail { gap:22px !important; align-items:flex-start !important; }

/* Image slots: editor-friendly Cover blocks, deliberately text-free on the public site */
.orofacil-photo-slot {
  overflow:hidden;
  border:1px dashed var(--of-border-strong);
  border-radius:var(--of-radius-l);
  background:var(--of-paper-2);
}
.orofacil-photo-slot .wp-block-cover__background { background:var(--of-paper-2) !important; }
.orofacil-photo-slot img { object-fit:cover; }
.orofacil-photo-ready { border:0; background:transparent; }

/* Price teaser and table */
.orofacil-price-grid {
  overflow:hidden;
  background:var(--of-card);
  border:1px solid var(--of-border);
  border-radius:var(--of-radius-l);
  box-shadow:var(--of-shadow-m);
}
.orofacil-price-grid > .wp-block-column { padding:22px 26px; margin:0 !important; min-width:160px; }
.orofacil-price-grid > .wp-block-column + .wp-block-column { border-left:1px solid var(--of-border); }
.orofacil-price-label {
  margin:0 !important;
  color:var(--of-ink-600);
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.orofacil-price-value {
  margin:4px 0 0 !important;
  font-family:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size:26px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.orofacil-price-list { overflow:hidden; padding:0 !important; }
.orofacil-price-row { padding:18px 28px !important; border-bottom:1px solid var(--of-border); }
.orofacil-price-row:last-child { border-bottom:0; }
.orofacil-price-row p { margin:0; }
.orofacil-price-row strong {
  font-family:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size:20px;
  font-variant-numeric:tabular-nums;
}

/* Trust chips */
.orofacil-tag {
  display:inline-block;
  margin:0;
  padding:7px 13px;
  border:1px solid var(--of-gold-200);
  border-radius:999px;
  background:var(--of-gold-50);
  color:var(--of-ink-600);
  font-size:13px;
  font-weight:600;
}

/* Dark CTA */
.orofacil-dark-cta {
  padding:72px 32px !important;
  background:var(--of-ink-950);
  color:var(--of-paper);
}
.orofacil-dark-cta h2 { color:var(--of-paper); }
.orofacil-dark-cta p { color:var(--of-ink-200); }

/* Contact */
.orofacil-contact-columns { gap:48px !important; }
.orofacil-contact-columns > .wp-block-column { min-width:300px; }
.orofacil-map-card {
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  text-align:center;
  background:var(--of-paper-2);
  border:1px solid var(--of-border);
  border-radius:var(--of-radius-l);
}
.orofacil-map-card a { color:var(--of-ink-950) !important; font-weight:600; }

/* Forms */
.orofacil-form-wrap { max-width:620px; margin-left:auto; margin-right:auto; }
.orofacil-form-card { padding:32px !important; }
.wpcf7-form { display:flex; flex-direction:column; gap:18px; }
.wpcf7-form p { margin:0; }
.wpcf7-form label {
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--of-ink-600);
  font-size:15px;
  font-weight:500;
}
.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
  width:100%;
  min-height:46px;
  padding:11px 14px;
  border:1px solid var(--of-border) !important;
  border-radius:var(--of-radius-m) !important;
  background:var(--of-card) !important;
  color:var(--of-ink-950) !important;
  font:inherit !important;
  box-shadow:none !important;
}
.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):focus {
  outline:2px solid var(--of-gold-500) !important;
  outline-offset:1px;
  border-color:var(--of-gold-500) !important;
}
.wpcf7-textarea { min-height:118px; resize:vertical; }
.wpcf7-submit {
  width:100%;
  padding:14px 26px !important;
  border:0 !important;
  border-radius:var(--of-radius-m) !important;
  background:var(--of-gold-500) !important;
  color:var(--of-ink-950) !important;
  font-family:"Space Grotesk", ui-sans-serif, system-ui, sans-serif !important;
  font-size:16px !important;
  font-weight:600 !important;
  cursor:pointer;
}
.wpcf7-form.submitting .wpcf7-submit { opacity:.65; cursor:wait; }
.wpcf7-not-valid-tip { margin-top:5px; color:var(--of-danger) !important; font-size:13px !important; }
.wpcf7 form .wpcf7-response-output { margin:8px 0 0 !important; padding:12px 14px; border-radius:var(--of-radius-m); }
.orofacil-consent { color:var(--of-ink-600); font-size:13px; }
/* Contact Form 7 acceptance field: keep checkbox and copy on one line/row.
   The generic CF7 label rule is column-based for normal fields, so this must override it. */
.orofacil-consent .wpcf7-acceptance .wpcf7-list-item {
  margin:0 !important;
}
.orofacil-consent .wpcf7-acceptance .wpcf7-list-item > label {
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  gap:9px !important;
  color:var(--of-ink-600);
  font-size:13px;
  font-weight:400;
  line-height:1.45;
  cursor:pointer;
}
.orofacil-consent .wpcf7-acceptance input[type="checkbox"] {
  width:16px !important;
  height:16px !important;
  min-height:0 !important;
  flex:0 0 16px;
  margin:2px 0 0 !important;
  padding:0 !important;
}
.orofacil-consent .wpcf7-list-item-label { display:inline; }
.orofacil-form-fallback { padding:20px; border:1px solid var(--of-border); border-radius:var(--of-radius-m); background:var(--of-paper-2); }
.orofacil-form-success { text-align:center; padding:18px 4px 8px; }
.orofacil-form-success__icon {
  width:48px; height:48px; margin:0 auto 18px; border:2px solid var(--of-gold-600); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--of-gold-600); font-size:26px; font-weight:700;
}
.orofacil-form-success h3 { margin:0 0 8px; font-size:24px; }
.orofacil-form-success p { margin:0 0 22px; color:var(--of-ink-600); }
.orofacil-form-reset {
  min-height:44px; padding:11px 18px; border:1px solid var(--of-border-strong); border-radius:var(--of-radius-m);
  background:transparent; color:var(--of-ink-950); font-family:"Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-weight:600; cursor:pointer;
}
.orofacil-form-reset:hover { background:var(--of-paper-2); }

/* FAQ */
.orofacil-faq { margin-bottom:12px; }
.orofacil-faq summary {
  cursor:pointer;
  list-style:none;
  font-family:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  font-weight:600;
}
.orofacil-faq summary::-webkit-details-marker { display:none; }
.orofacil-faq summary::after { content:'+'; float:right; margin-left:20px; color:var(--of-gold-600); font-size:20px; line-height:1; }
.orofacil-faq[open] summary::after { content:'–'; }
.orofacil-faq p { margin-bottom:0; color:var(--of-ink-600); }

/* Template-part rhythm: WordPress applies the global blockGap between <main> and
   the footer template part. On pages ending in a full-width dark CTA this appeared
   as an unintended strip of paper above the footer. */
.wp-site-blocks > main + footer,
.wp-site-blocks > main + .wp-block-template-part,
.wp-site-blocks > main + * .orofacil-footer {
  margin-block-start:0 !important;
}
main.wp-block-group { margin-bottom:0 !important; }

/* Footer */
.orofacil-footer { padding:48px 32px !important; background:var(--of-ink-950); color:var(--of-ink-200); font-size:14px; }
.orofacil-footer .wp-block-columns { max-width:var(--of-container); margin-left:auto; margin-right:auto; }
.orofacil-footer a { color:var(--of-ink-200) !important; }
.orofacil-footer h3 { color:var(--of-paper); }
.orofacil-footer .orofacil-brand { color:var(--of-paper) !important; }
.orofacil-footer-note { max-width:280px; color:var(--of-ink-400); }
.orofacil-whatsapp {
  position:fixed;
  right:26px;
  bottom:26px;
  z-index:110;
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--of-gold-500);
  color:var(--of-ink-950) !important;
  box-shadow:var(--of-shadow-l);
  text-decoration:none !important;
}
.orofacil-whatsapp:hover { background:var(--of-gold-600); color:var(--of-ink-950) !important; text-decoration:none !important; }
.orofacil-whatsapp svg { width:26px; height:26px; }


/* Prototype-accurate logo sizing in the footer */
.orofacil-footer .orofacil-brand { gap:8px; }
.orofacil-footer .orofacil-brand-mark { width:29px; height:24px; flex-basis:29px; }
.orofacil-footer .orofacil-brand-word { font-size:18px; }

/* Lucide-style icons on contact actions (decorative, text remains editable in Gutenberg). */
.orofacil-icon-message .wp-element-button,
.orofacil-icon-map .wp-element-button { display:inline-flex; align-items:center; gap:9px; }
.orofacil-icon-message .wp-element-button::before,
.orofacil-icon-map .wp-element-button::before { content:""; width:18px; height:18px; flex:0 0 18px; background:currentColor; mask-repeat:no-repeat; mask-position:center; mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain; }
.orofacil-icon-message .wp-element-button::before { mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3C/svg%3E"); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3C/svg%3E"); }
.orofacil-icon-map .wp-element-button::before { mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }

/* Gutenberg editor: make empty photo slots easy to see/select without public instructions. */
.editor-styles-wrapper .orofacil-photo-slot { min-height:140px; }

@media (max-width:782px) {
  .admin-bar .orofacil-header { top:46px; }
  .orofacil-header-inner {
    min-height:64px;
    padding:10px 20px !important;
    flex-wrap:wrap !important;
    gap:12px;
  }
  .orofacil-brand-word { font-size:20px; }
  .orofacil-brand-mark { width:32px; height:26px; flex-basis:32px; }
  .orofacil-header-actions { width:100%; justify-content:space-between; gap:10px; }
  .orofacil-header-phone { font-size:14px; }
  .orofacil-header-cta .wp-element-button { padding:10px 14px; }
  .orofacil-nav .wp-block-navigation-item__content { padding:8px 0; border-bottom:0; }
  .orofacil-hero { padding:64px 20px 48px !important; }
  .orofacil-page-intro { padding-top:64px !important; padding-left:20px !important; padding-right:20px !important; }
  .orofacil-section { margin-bottom:64px !important; padding-left:20px !important; padding-right:20px !important; }
  .orofacil-dark-cta { padding:56px 20px !important; }
  .orofacil-footer { padding:48px 20px !important; }
  .orofacil-price-grid > .wp-block-column + .wp-block-column { border-left:0; border-top:1px solid var(--of-border); }
  .orofacil-step-detail { flex-direction:column !important; gap:12px !important; }
  .orofacil-contact-columns { gap:32px !important; }
  .orofacil-whatsapp { right:18px; bottom:18px; }
}