/* =========================================================
   MOLDURAS MX — estilos globales (todo el sitio)
   La tipografía global (carga de fuentes, cuerpo y títulos) la define
   Blocksy en Personalizar → Typography. Aquí solo se nombran las familias
   en los componentes propios (cabecera, pie, home).
   1 Tokens · 2 Base · 3 Layout · 4 Botones
   5 Cabecera · 6 Pie
   ========================================================= */

/* 1. TOKENS */
:root{
  --mx-green:#0b7668;
  --mx-green-dark:#07564e;
  --mx-deep:#073f39;
  --mx-ink:#202a28;
  --mx-muted:#52625b;
  --mx-paper:#faf9f6;
  --mx-mint:#f0f6f2;
  --mx-line:#d8e2dd;

  /* Solo nombres: estas familias las carga Blocksy, no el child theme. */
  --mx-font-body:'DM Sans',sans-serif;
  --mx-font-head:'Montserrat',sans-serif;

  --mx-wrap:1330px;
  --mx-gutter:32px;

  /* Blocksy lee estos valores: botones, enlaces y texto de todo el sitio
     (incluido WooCommerce) siguen la misma paleta. */
  --theme-text-color:var(--mx-ink);
  --theme-headings-color:var(--mx-ink);
  --theme-link-initial-color:var(--mx-green);
  --theme-link-hover-color:var(--mx-green-dark);
  --theme-button-background-initial-color:var(--mx-green);
  --theme-button-background-hover-color:var(--mx-green-dark);
  --theme-button-text-initial-color:#fff;
  --theme-button-text-hover-color:#fff;
  --theme-button-border-radius:0;
}
@media (max-width:760px){:root{--mx-gutter:12px}}

/* 2. BASE */
body{background:var(--mx-paper);color:var(--mx-ink)}
:focus-visible{outline:3px solid var(--mx-green);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 3. LAYOUT */
.mx-wrap{width:min(var(--mx-wrap),calc(100% - 2 * var(--mx-gutter)));margin-inline:auto}

/* 4. BOTONES */
.mx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 28px;border:1px solid var(--mx-green);background:var(--mx-green);color:#fff;font:600 14px/1.2 var(--mx-font-body);text-decoration:none;cursor:pointer;transition:background-color .2s,border-color .2s}
.mx-btn:hover{background:var(--mx-green-dark);border-color:var(--mx-green-dark);color:#fff}

/* 5. CABECERA — medidas del Home aprobado
   Franja 34px / texto 10px · fila principal 90px · logo 29px · buscador 52px
   acciones 11px · menú 46px / texto 12px · móvil: franja 8px, menú 11px */
.mx-topnote{display:flex;align-items:center;justify-content:center;height:34px;margin:0;padding:0 15px;background:var(--mx-green);color:#fff;text-align:center;font:700 10px/1.4 var(--mx-font-body);letter-spacing:.09em}
.mx-header{background:#fff;border-bottom:1px solid #e4e9e5}
.mx-header__bar{display:grid;grid-template-columns:235px minmax(260px,1fr) auto;align-items:center;gap:30px;min-height:90px}

.mx-logo{display:block;color:var(--mx-ink);font:500 29px/1 var(--mx-font-head);letter-spacing:-.08em;white-space:nowrap;text-decoration:none}
.mx-logo:hover{color:var(--mx-ink)}
.mx-logo small{display:block;margin-top:6px;color:#61736d;font:600 9px/1 var(--mx-font-body);letter-spacing:.12em}
.mx-logo__image{display:block;width:100%;height:auto;object-fit:contain}

.mx-search{display:flex;height:52px;margin:0;border:1px solid #cddbd5;background:#f7faf8}
.mx-search:focus-within{outline:3px solid var(--mx-green);outline-offset:1px}
.mx-search input[type="search"]{flex:1;min-width:0;height:100%;padding:0 17px;border:0;border-radius:0;background:transparent;box-shadow:none;outline:0;color:var(--mx-ink);font:400 14px var(--mx-font-body)}
.mx-search input[type="search"]::placeholder{color:#60736c;opacity:1}
.mx-search button{display:grid;place-items:center;width:56px;flex:none;padding:0;border:0;border-radius:0;background:var(--mx-green);color:#fff;cursor:pointer}
.mx-search button:hover{background:var(--mx-green-dark)}
.mx-search button svg{width:19px;height:19px}

.mx-actions{display:flex;align-items:center;gap:18px}
.mx-action{display:inline-flex;align-items:center;gap:6px;color:#24312c;font:400 11px/1 var(--mx-font-body);text-decoration:none;white-space:nowrap}
.mx-action svg{width:20px;height:20px;flex:none}
.mx-action:hover{color:var(--mx-green)}

.mx-nav{border-top:1px solid #edf0ed}
.mx-menu{display:flex;align-items:center;justify-content:space-between;gap:19px;min-height:46px;margin:0;padding:0;list-style:none}
.mx-menu li{margin:0}
.mx-menu a{display:block;color:#25322d;font:600 12px/1 var(--mx-font-body);text-decoration:none;white-space:nowrap}
.mx-menu a:hover,
.mx-menu .current-menu-item>a{color:var(--mx-green)}

@media (max-width:1100px){
  .mx-header__bar{grid-template-columns:190px 1fr;gap:15px;padding-block:14px}
  .mx-actions{grid-column:1/-1;justify-content:flex-end}
  .mx-menu{justify-content:flex-start;gap:25px;overflow-x:auto;scrollbar-width:none}
}
@media (max-width:760px){
  .mx-topnote{height:auto;min-height:34px;padding:7px 10px;font-size:8px}
  .mx-header__bar{grid-template-columns:1fr auto;min-height:0;gap:10px}
  .mx-logo{font-size:23px}
  .mx-search{grid-column:1/-1;grid-row:2;height:46px}
  .mx-actions{grid-column:2;grid-row:1;gap:12px}
  .mx-action__label{display:none}
  .mx-menu{min-height:44px;gap:20px}
  .mx-menu a{font-size:11px}
}

/* 6. PIE */
.mx-footer{padding:65px 0 27px;background:var(--mx-deep);color:#fff}
.mx-footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:35px}
.mx-logo--light,.mx-logo--light:hover{color:#fff}
.mx-logo--light{display:block;width:100%;max-width:310px;padding:5px 9px;background:#fff;border-radius:2px}
.mx-logo--light .mx-logo__image{display:block;width:100%;height:auto}
.mx-logo--light small{color:#a8ebd0}
.mx-footer__brand p{max-width:350px;margin:18px 0 0;color:#d1e6db;font-size:14px;line-height:1.55}
.mx-footer__title{margin:0 0 22px;color:#fff;font:600 15px/1.3 var(--mx-font-head);letter-spacing:-.01em}
.mx-footer__menu{margin:0;padding:0;list-style:none}
.mx-footer__menu li{margin:9px 0;color:#d1e6db;font-size:14px;line-height:1.55}
.mx-footer a{color:#fff;text-decoration:none}
.mx-footer__menu a:hover,
.mx-footer__legal a:hover{text-decoration:underline}
.mx-footer__base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 22px;margin-top:45px;padding-top:21px;border-top:1px solid rgb(255 255 255 / .33);color:#d1e6db;font-size:13px}
.mx-footer__base p{margin:0}
.mx-footer__legal{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0;padding:0;list-style:none}
.mx-footer__legal a{font-size:13px}
@media (max-width:760px){
  .mx-footer__grid{grid-template-columns:repeat(2,1fr);gap:22px}
  .mx-footer__brand{grid-column:1/-1}
}