/* =========================================================================
   MENSORA — Home visual (4 secciones con fondos del paquete).
   Texto e interfaz como overlay HTML/CSS; nada se incrusta en las fotos.
   ========================================================================= */
:root{
  --m-ink:#0B0C0E; --m-gold:#D2A33C; --m-gold-light:#F0C55E;
  --m-ivory:#F7F4EE; --m-white:#FFFFFF; --m-border:rgba(210,163,60,.45);
}

/* Tipografía: serif elegante para títulos, sans limpia para texto/botones */
.m-serif{font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;}
.m-home{font-family:"Inter",system-ui,Arial,sans-serif;}

/* ---- Sección visual ---- */
.m-vsec{position:relative;min-height:760px;display:flex;align-items:center;
  background-size:cover;background-repeat:no-repeat;overflow:hidden;}
.m-vsec__inner{position:relative;z-index:2;width:100%;max-width:1440px;margin:0 auto;
  padding:96px 6vw;display:flex;}
.m-col{max-width:620px;width:100%;}
.m-col--right{margin-left:auto;}

/* Overlays para legibilidad según la zona segura de cada foto */
.m-vsec--darkleft{background-position:right center;}
.m-vsec--darkleft::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, rgba(11,12,14,.80) 0%, rgba(11,12,14,.52) 28%, rgba(11,12,14,.12) 50%, rgba(11,12,14,0) 66%);}
.m-vsec--lightleft{background-position:right center;}
.m-vsec--lightleft::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, rgba(247,244,238,.90) 0%, rgba(247,244,238,.64) 30%, rgba(247,244,238,.14) 52%, rgba(247,244,238,0) 68%);}
.m-vsec--darkright{background-position:left center;}
.m-vsec--darkright::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(270deg, rgba(11,12,14,.82) 0%, rgba(11,12,14,.55) 32%, rgba(11,12,14,.14) 54%, rgba(11,12,14,0) 70%);}

/* ---- Texto ---- */
.m-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--m-gold);margin:0 0 16px;}
.m-eyebrow::before{content:"";width:30px;height:1.5px;background:var(--m-gold);}
.m-title{font-weight:600;line-height:1.06;font-size:clamp(2.1rem,4.6vw,3.6rem);margin:0 0 18px;letter-spacing:.005em;}
.m-title .g{color:var(--m-gold-light);}
.m-body{font-size:1.06rem;line-height:1.65;margin:0 0 26px;max-width:54ch;}
.m-note{font-size:.8rem;line-height:1.55;margin:18px 0 0;opacity:.8;}

/* Color del texto por variante */
.m-on-dark .m-title,.m-on-dark .m-body{color:var(--m-ivory);}
.m-on-dark .m-body{color:#E3DFD6;}
.m-on-dark .m-note{color:#BDB7AE;}
/* Sombra para mantener legibilidad con overlay más ligero (fotos más visibles) */
.m-on-dark .m-title,.m-on-dark .m-body,.m-on-dark .m-eyebrow,.m-on-dark .m-iconrow .it,.m-on-dark .m-note{
  text-shadow:0 2px 16px rgba(0,0,0,.62), 0 1px 3px rgba(0,0,0,.5);}
.m-on-light .m-title,.m-on-light .m-body{text-shadow:0 1px 10px rgba(247,244,238,.7);}
.m-on-light .m-title{color:var(--m-ink);}
.m-on-light .m-body{color:#3A3A3A;}
.m-on-light .m-note{color:#6B6B6B;}

/* Logo (imagen del paquete) */
.m-logo{height:96px;width:auto;display:block;margin:0 0 22px;}
@media (max-width:560px){ .m-logo{height:74px;} }

/* Logo / wordmark (alternativa de texto) */
.m-wordmark{display:inline-flex;align-items:baseline;gap:.5rem;margin:0 0 22px;}
.m-wordmark .mark{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:1.8rem;letter-spacing:.28em;
  color:var(--m-white);}
.m-on-light .m-wordmark .mark{color:var(--m-ink);}
.m-wordmark .dot{width:7px;height:7px;border-radius:50%;background:var(--m-gold);align-self:center;}

/* ---- Botones ---- */
.m-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.m-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:10px;font-weight:600;font-size:.98rem;cursor:pointer;
  text-decoration:none;transition:transform .06s,filter .15s,background .15s,color .15s;border:1.5px solid transparent;}
.m-btn:hover{text-decoration:none;}
.m-btn:active{transform:translateY(1px);}
.m-btn-gold{background:linear-gradient(90deg,var(--m-gold),var(--m-gold-light));color:#231703;}
.m-btn-gold:hover{filter:brightness(1.07);color:#231703;}
.m-btn-outline{background:transparent;border-color:var(--m-border);color:var(--m-gold-light);}
.m-btn-outline:hover{background:rgba(210,163,60,.12);color:var(--m-gold-light);}
.m-on-light .m-btn-outline{color:#7a5d12;border-color:rgba(210,163,60,.6);}

/* ---- Icon feature row ---- */
.m-iconrow{display:flex;gap:26px;flex-wrap:wrap;margin:6px 0 26px;}
.m-iconrow .it{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;}
.m-iconrow .it svg{width:20px;height:20px;flex:none;color:var(--m-gold);}
.m-on-dark .m-iconrow .it{color:var(--m-ivory);}
.m-on-light .m-iconrow .it{color:var(--m-ink);}

/* ---- Icon cards (solicitud) ---- */
.m-icards{display:flex;gap:14px;flex-wrap:wrap;margin:4px 0 26px;}
.m-icard{flex:1 1 150px;min-width:150px;border:1px solid var(--m-border);border-radius:14px;padding:16px;
  background:rgba(255,255,255,.55);}
.m-on-dark .m-icard{background:rgba(255,255,255,.05);}
.m-icard .ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:rgba(210,163,60,.16);color:var(--m-gold);margin-bottom:10px;}
.m-icard .ico svg{width:18px;height:18px;}
.m-icard h4{margin:0;font-size:.95rem;font-weight:600;}
.m-on-light .m-icard h4{color:var(--m-ink);}
.m-on-dark .m-icard h4{color:var(--m-ivory);}

/* ---- CRM cards (seguimiento, lado derecho, puramente visuales) ---- */
.m-crmcol{max-width:420px;width:100%;margin-left:auto;display:flex;flex-direction:column;gap:16px;}
.m-crmcard{border:1px solid var(--m-border);border-radius:14px;padding:16px 18px;background:rgba(11,12,14,.55);
  backdrop-filter:blur(2px);}
.m-crmcard .row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.m-crmcard .dot{width:8px;height:8px;border-radius:50%;background:var(--m-gold);}
.m-crmcard .tag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--m-gold-light);font-weight:600;}
.m-crmcard .ln{height:9px;border-radius:5px;background:rgba(247,244,238,.18);margin:7px 0;}
.m-crmcard .ln.s{width:60%;} .m-crmcard .ln.m{width:85%;}

/* =========================================================================
   Responsive (tablet / móvil)
   ========================================================================= */
@media (max-width:980px){
  .m-vsec{min-height:auto;}
  .m-vsec__inner{padding:84px 7vw;flex-direction:column;}
  .m-col,.m-crmcol{max-width:680px;margin:0;}
  .m-crmcol{margin-top:26px;}
  /* En móvil reforzamos el overlay (cubre toda la foto) para legibilidad
     y evitamos recortar el rostro: la foto queda como textura de fondo. */
  .m-vsec--darkleft::before,.m-vsec--darkright::before{
    background:linear-gradient(180deg, rgba(11,12,14,.42) 0%, rgba(11,12,14,.62) 55%, rgba(11,12,14,.78) 100%);}
  .m-vsec--lightleft::before{
    background:linear-gradient(180deg, rgba(247,244,238,.55) 0%, rgba(247,244,238,.78) 55%, rgba(247,244,238,.9) 100%);}
  .m-vsec--darkleft,.m-vsec--darkright,.m-vsec--lightleft{background-position:center center;}
}
@media (max-width:560px){
  .m-vsec__inner{padding:64px 22px;}
  .m-ctas{flex-direction:column;align-items:stretch;}
  .m-btn{width:100%;}
  .m-iconrow{gap:16px;}
  .m-icards{flex-direction:column;}
}