/*
Theme Name: Maria Paula Cortes
Theme URI: https://mariapaulacortes.com
Author: CMB Marketing Digital
Description: Theme a medida para Maria Paula Cortes (UGC, Modelo & Manejo de Redes Sociales). Contenido pre-cargado y 100% editable con Elementor: haz click en cualquier texto o imagen para reemplazarlo.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: mpc
*/

:root{
  --mpc-cream:#fdfcf9;
  --mpc-ink:#1b1712;
  --mpc-ink-soft:#55503f;
  --mpc-ink-mute:#8a8272;
  --mpc-pink:#F283AF;
  --mpc-pink-soft:#f7d9e6;
  --mpc-pink-hover:#e9b8ca;
  --mpc-blush-bg:#fdf1f6;
  --mpc-sand-bg:#f6ede8;
  --mpc-line:rgba(23,20,16,0.1);
  --mpc-font-display:'Poppins',sans-serif;
  --mpc-font-serif:'Lora',serif;
  --mpc-font-body:'Work Sans',sans-serif;
}

body{
  margin:0;
  background:var(--mpc-cream);
  color:var(--mpc-ink);
  font-family:var(--mpc-font-body);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
a:hover{opacity:0.8;}
img{max-width:100%;height:auto;display:block;}
.mpc-wrap{max-width:1240px;margin:0 auto;padding:0 20px;}

/* Header */
.mpc-header{position:sticky;top:0;z-index:999;background:rgba(253,252,249,0.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--mpc-line);}
.mpc-header-inner{max-width:1240px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.mpc-cta{display:inline-flex;align-items:center;gap:6px;background:var(--mpc-pink-soft);color:var(--mpc-ink);padding:9px 16px;border-radius:24px;font-size:12px;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;white-space:nowrap;}
.mpc-cta:hover{background:var(--mpc-pink-hover);opacity:1;}
.mpc-cta.large{padding:14px 30px;font-size:13.5px;border-radius:28px;}
.mpc-logo{display:flex;align-items:center;gap:10px;}
.mpc-logo-mark{width:38px;height:38px;flex:none;border:1.5px solid var(--mpc-ink);display:flex;align-items:center;justify-content:center;font-family:var(--mpc-font-display);font-weight:700;font-size:12px;letter-spacing:0.02em;}
.mpc-logo-name{font-family:var(--mpc-font-display);font-weight:700;font-size:14px;letter-spacing:-0.01em;white-space:nowrap;}
.mpc-nav{display:none;}
.mpc-burger{display:flex;width:38px;height:38px;flex:none;border:1px solid rgba(23,20,16,0.18);flex-direction:column;align-items:center;justify-content:center;gap:4px;background:none;}
.mpc-burger span{width:16px;height:1.5px;background:var(--mpc-ink);display:block;}
.mpc-mobile-nav{display:none;border-top:1px solid var(--mpc-line);background:var(--mpc-cream);}
.mpc-mobile-nav.open{display:block;}
.mpc-mobile-nav a{display:block;padding:14px 20px;font-size:15px;border-bottom:1px solid rgba(23,20,16,0.06);}
.mpc-logo-name{display:none;}

@media (min-width:600px){
  .mpc-logo-name{display:block;}
}

/* Desktop: show inline nav, hide burger + mobile drawer entirely */
@media (min-width:900px){
  .mpc-nav{display:flex;align-items:center;gap:30px;}
  .mpc-burger{display:none;}
  .mpc-mobile-nav{display:none !important;}
  .mpc-header-inner{padding:14px 20px;gap:14px;}
  .mpc-cta{padding:10px 18px;font-size:12.5px;}
}

/* Footer */
.mpc-footer{border-top:1px solid var(--mpc-line);background:var(--mpc-cream);}
.mpc-footer-grid{max-width:1240px;margin:0 auto;padding:56px 20px 32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px;}
.mpc-footer-col p{font-size:13.5px;line-height:1.6;color:var(--mpc-ink-mute);margin:0 0 10px;}
.mpc-footer-col-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin:0 0 8px;}
.mpc-footer-col a{display:block;font-size:14px;color:var(--mpc-ink-soft);padding:4px 0;}
.mpc-footer-col a:hover{color:var(--mpc-pink);}
.mpc-social{display:flex;gap:10px;margin-top:6px;}
.mpc-social span,.mpc-social a{width:32px;height:32px;border:1px solid rgba(23,20,16,0.18);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:9.5px;color:var(--mpc-ink-soft);}
.mpc-footer-bottom{max-width:1240px;margin:0 auto;padding:20px 20px 28px;border-top:1px solid rgba(23,20,16,0.08);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;}
.mpc-footer-bottom p,.mpc-footer-bottom a{font-size:12.5px;color:var(--mpc-ink-mute);}

/* Elementor placeholder tag helper (front-end badge on editable placeholder images) */
.mpc-editable-hint{font-family:ui-monospace,monospace;}

/* Elementor editor: expose brand fonts/colors nicely (visual only, safe if Elementor absent) */
.elementor-widget-heading h1,.elementor-widget-heading h2,.elementor-widget-heading h3{font-family:var(--mpc-font-display);}

/* ------------------------------------------------------------------
 * Note: the responsive grid override CSS (previously hardcoded here
 * with .mpc-grid-* class selectors) is now generated dynamically per
 * page in PHP and printed in <head> for that specific page — see
 * mpc_grid() in inc/elementor-builders.php and mpc_print_page_css()
 * in functions.php. That approach targets each section's own
 * `.elementor-element-{id}` class, which Elementor always renders,
 * instead of the "CSS Classes" advanced field (which didn't reliably
 * apply in testing). Nothing static needed here for that anymore.
 * ------------------------------------------------------------------ */

/* Portfolio filter chips (Portafolio → UGC) — mpc-filter.js toggles this class directly on Elementor's own element wrapper. */
.mpc-chip-active .elementor-button{background-color:#F283AF !important;color:#fdfaf7 !important;border-color:#F283AF !important;}

/* Marcas Aliadas marquee (Home) */
.mpc-marquee-wrap{overflow:hidden;}
.mpc-marquee-track{display:flex;gap:20px;width:max-content;animation:mpcMarquee 26s linear infinite;}
.mpc-marquee-wrap:hover .mpc-marquee-track{animation-play-state:paused;}
@keyframes mpcMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.mpc-marquee-pill{flex:none;display:flex;align-items:center;justify-content:center;padding:16px 30px;border:1px solid rgba(23,20,16,0.12);background:#fdfcf9;border-radius:12px;font-family:ui-monospace,monospace;font-size:12px;letter-spacing:0.03em;color:#6b6659;white-space:nowrap;}
