/* =========================================================================
   MILFERS · KIT DE AVISOS LEGALES — banner de cookies + modal con pestañas
   Re-cableado a los tokens reales del sitio (colors_and_type.css).
   ========================================================================= */
:root{
  --kit-accent:        var(--milfers-ruby);
  --kit-accent-hover:  #E59CB3;
  --kit-surface:       #FFFFFF;
  --kit-fg-1:          #1c2c29;
  --kit-fg-2:          #4a5b57;
  --kit-fg-3:          #8a9a96;
  --kit-border:        rgba(33,58,53,.14);
  --kit-deep:          #152624;
  --kit-ease:          var(--ease-out);
}

body.no-scroll{ overflow:hidden; }

/* ---------- Botón flotante WhatsApp (inferior izquierda) ---------- */
.wa-fab{
  position:fixed;
  right:clamp(16px,2.4vw,28px); bottom:clamp(16px,2.4vw,28px);
  z-index:1100;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--milfers-ruby); color:var(--milfers-concrete);
  box-shadow:0 10px 28px -8px rgba(33,58,53,.55), 0 0 0 0 rgba(212,127,154,.5);
  text-decoration:none;
  transition:transform .18s var(--ease-out), background .18s var(--ease-out), bottom .28s var(--ease-out), box-shadow .18s var(--ease-out);
}
.wa-fab:hover{ background:#E59CB3; transform:translateY(-3px) scale(1.04); }
.wa-fab:active{ transform:translateY(0) scale(.98); }
.wa-fab-glyph{ width:32px; height:32px; }
@media (max-width:560px){
  .wa-fab{ width:52px; height:52px; }
  .wa-fab-glyph{ width:29px; height:29px; }
}
@media (prefers-reduced-motion:no-preference){
  .wa-fab{ animation:waFabPulse 2.6s var(--ease-out) infinite; }
  @keyframes waFabPulse{
    0%,100%{ box-shadow:0 10px 28px -8px rgba(33,58,53,.55), 0 0 0 0 rgba(212,127,154,.5); }
    60%{ box-shadow:0 10px 28px -8px rgba(33,58,53,.55), 0 0 0 12px rgba(212,127,154,0); }
  }
}

/* ---------- Disparadores legales (pie de página) ---------- */
.legal-trigger{
  background:none; border:none; padding:0;
  font:inherit; color:inherit; cursor:pointer;
  border-bottom:1px solid transparent;
  transition:border-color .15s var(--kit-ease), color .15s var(--kit-ease);
}
.legal-trigger:hover{ color:var(--milfers-concrete); border-bottom-color:var(--kit-accent); }

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed;
  left:clamp(12px,2vw,24px); right:auto; bottom:clamp(12px,2vw,24px);
  z-index:1200; max-width:560px;
  background:var(--kit-deep); color:var(--milfers-concrete);
  padding:18px 20px;
  box-shadow:0 16px 40px -16px rgba(0,0,0,.5);
  border-left:3px solid var(--kit-accent);
  display:block;
  opacity:0; transform:translateY(10px);
  transition:opacity .26s var(--kit-ease), transform .26s var(--kit-ease);
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner.is-visible{ opacity:1; transform:translateY(0); }
.cookie-inner{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.cookie-copy{ flex:1; min-width:220px; }
.cookie-copy strong{
  display:block; font-family:var(--font-body);
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--kit-accent); margin-bottom:6px;
}
.cookie-copy p{ margin:0; font-family:var(--font-body); font-size:13px; line-height:1.5; color:rgba(241,242,242,.85); }
.cookie-copy p a{ color:var(--milfers-concrete); border-bottom:1px solid var(--kit-accent); padding-bottom:1px; text-decoration:none; cursor:pointer; }
.cookie-copy p a:hover{ color:var(--kit-accent); }
.cookie-actions{ display:flex; gap:8px; flex-shrink:0; }
.cookie-btn{
  font-family:var(--font-body);
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  padding:11px 16px; border:1px solid rgba(241,242,242,.3);
  background:transparent; color:var(--milfers-concrete); cursor:pointer;
  transition:background .15s var(--kit-ease), color .15s var(--kit-ease), border-color .15s var(--kit-ease);
}
.cookie-btn.ghost:hover{ border-color:var(--milfers-concrete); background:rgba(241,242,242,.08); }
.cookie-btn.primary{ background:var(--kit-accent); border-color:var(--kit-accent); color:var(--milfers-black); }
.cookie-btn.primary:hover{ background:var(--kit-accent-hover); border-color:var(--kit-accent-hover); }
@media (max-width:560px){
  .cookie-banner{ left:8px; right:8px; bottom:8px; padding:14px 16px; max-width:none; }
  .cookie-actions{ width:100%; }
  .cookie-actions .cookie-btn{ flex:1; }
}

/* ---------- Modal legal ---------- */
.legal-modal{
  position:fixed; inset:0; z-index:1300;
  display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; transition:opacity .22s var(--kit-ease);
}
.legal-modal.is-open{ opacity:1; }
.legal-modal[hidden]{ display:none; }
.legal-modal-backdrop{ position:absolute; inset:0; background:rgba(10,18,16,.72); backdrop-filter:blur(4px); }
.legal-shell{
  position:relative; background:var(--kit-surface);
  width:100%; max-width:800px; max-height:88vh; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 20px 80px -20px rgba(0,0,0,.55);
  transform:translateY(8px); transition:transform .22s var(--kit-ease);
}
.legal-modal.is-open .legal-shell{ transform:translateY(0); }
.legal-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:28px 32px 22px; border-bottom:1px solid var(--kit-border);
}
.legal-head .eyebrow{
  font-family:var(--font-body); font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--kit-accent); margin:0;
}
.legal-head h3{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(28px,3vw,38px); line-height:1; letter-spacing:.005em;
  text-transform:uppercase; color:var(--kit-fg-1); margin:8px 0 0;
}
.legal-close{
  flex-shrink:0; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--kit-border); background:#fff; color:var(--kit-fg-1);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s var(--kit-ease), color .15s var(--kit-ease), border-color .15s var(--kit-ease);
}
.legal-close:hover{ background:var(--kit-accent); color:var(--milfers-black); border-color:var(--kit-accent); }
.legal-close svg{ width:16px; height:16px; }

.legal-tabs{ display:flex; gap:0; border-bottom:1px solid var(--kit-border); padding:0 32px; flex-shrink:0; }
.legal-tab{
  background:none; border:none; padding:14px 18px;
  font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--kit-fg-2); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .15s var(--kit-ease), border-color .15s var(--kit-ease);
}
.legal-tab:first-child{ padding-left:0; }
.legal-tab:hover{ color:var(--kit-fg-1); }
.legal-tab.is-active{ color:var(--kit-accent); border-bottom-color:var(--kit-accent); }

.legal-body{ padding:24px 32px; overflow:auto; flex:1; }
.legal-pane{ display:none; }
.legal-pane.is-active{ display:block; }
.legal-pane h4{
  font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--kit-accent); margin:22px 0 8px;
}
.legal-pane h4:first-child{ margin-top:0; }
.legal-pane p{ font-family:var(--font-body); font-size:14px; line-height:1.65; color:var(--kit-fg-2); margin:0 0 12px; text-wrap:pretty; }
.legal-pane p em{ font-style:italic; color:var(--kit-fg-1); }
.legal-pane p strong{ color:var(--kit-fg-1); font-weight:600; }
.legal-pane a{ color:var(--kit-fg-1); border-bottom:1px solid var(--kit-accent); padding-bottom:1px; text-decoration:none; cursor:pointer; }
.legal-pane a:hover{ color:var(--kit-accent); }
.legal-list{ list-style:none; margin:0 0 14px; padding:0; }
.legal-list li{ font-family:var(--font-body); font-size:14px; line-height:1.6; color:var(--kit-fg-2); padding:6px 0 6px 18px; position:relative; }
.legal-list li::before{ content:""; position:absolute; left:0; top:13px; width:6px; height:1px; background:var(--kit-accent); }
.legal-list li strong{ color:var(--kit-fg-1); font-weight:600; }
.legal-foot{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:18px 32px 22px; border-top:1px solid var(--kit-border); flex-shrink:0;
  font-family:var(--font-body); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--kit-fg-3);
}
@media (max-width:600px){
  .legal-head, .legal-foot{ padding-left:22px; padding-right:22px; }
  .legal-tabs{ padding:0 22px; gap:4px; overflow-x:auto; }
  .legal-tab{ padding:12px 12px; font-size:10px; letter-spacing:.18em; white-space:nowrap; }
  .legal-body{ padding:20px 22px; }
}

/* =========================================================================
   CARTA MODAL — fullscreen iframe con la carta digital
   ========================================================================= */
.mf-carta-modal {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: stretch; justify-content: center;
  animation: cartaFadeIn 200ms ease both;
}
@keyframes cartaFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mf-carta-modal-bg {
  position: absolute; inset: 0;
  background: rgba(21,38,36,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none; cursor: pointer; width: 100%; height: 100%;
}
.mf-carta-modal-card {
  position: relative; z-index: 1;
  width: min(960px, 96vw);
  margin: 20px auto;
  border-radius: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,0.55);
  animation: cartaSlideUp 280ms cubic-bezier(0.2,0.8,0.2,1) both;
}
@keyframes cartaSlideUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.mf-carta-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 10;
  width: 36px; height: 36px;
  background: var(--milfers-ruby);
  color: var(--milfers-black);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 160ms;
}
.mf-carta-modal-close:hover { background: #E59CB3; }
.mf-carta-modal-iframe {
  flex: 1; width: 100%; height: calc(100vh - 40px);
  border: none; display: block;
  background: #152624;
}
@media (max-width: 600px) {
  .mf-carta-modal-card { width: 100%; margin: 0; height: 100%; }
  .mf-carta-modal-iframe { height: 100vh; }
}