/* ================================================================
   420Crea LTDLF Mega Footer — v1.0.0
   Sistema de diseño: farmacia green (#3f7c6d)
   Compatible con el Mega Menu v3.8.0
================================================================ */

/* ── CSS Variables (defaults, se sobreescriben por widget ID) ── */
:root {
    --c420mf-accent:     #3f7c6d;
    --c420mf-bg:         #1a2a27;
    --c420mf-bg-bottom:  #111e1b;
    --c420mf-text:       #c8d8d4;
    --c420mf-heading:    #ffffff;
    --c420mf-link:       #a8c8c0;
    --c420mf-link-hover: #ffffff;
    --c420mf-font:       inherit;
    --c420mf-text-size:  14px;
    --c420mf-cols-gap:   48px;
    --c420mf-border:     rgba(255,255,255,.08);
}

/* ── Base ────────────────────────────────────────────────────── */
.c420-mf {
    font-family:  var(--c420mf-font);
    font-size:    var(--c420mf-text-size);
    color:        var(--c420mf-text);
    background:   var(--c420mf-bg);
    line-height:  1.6;
}
.c420-mf *,
.c420-mf *::before,
.c420-mf *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.c420-mf a {
    color:           var(--c420mf-link);
    text-decoration: none;
    transition:      color .2s;
}
.c420-mf a:hover {
    color: var(--c420mf-link-hover);
}

/* ── Cuerpo principal ────────────────────────────────────────── */
.c420-mf-body {
    padding: 56px 24px 40px;
}
.c420-mf-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--c420mf-cols-gap);
    align-items: start;
}

/* ── Columnas ────────────────────────────────────────────────── */
.c420-mf-col-title {
    font-size:     13px;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:         var(--c420mf-heading);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--c420mf-accent);
}

/* ── Columna marca ───────────────────────────────────────────── */
.c420-mf-col--brand {
    grid-column: span 1;
}
.c420-mf-logo-link { display: inline-block; }
.c420-mf-logo { display: block; max-width: 100%; height: auto; margin-bottom: 16px; }
.c420-mf-site-name {
    font-size:   22px;
    font-weight: 700;
    color:       var(--c420mf-heading);
    display:     block;
    margin-bottom: 12px;
}
.c420-mf-brand-text {
    font-size:   13px;
    line-height: 1.7;
    color:       var(--c420mf-text);
    margin-bottom: 20px;
}

/* ── Redes sociales ──────────────────────────────────────────── */
.c420-mf-social {
    display:    flex;
    gap:        10px;
    flex-wrap:  wrap;
    margin-bottom: 24px;
}
.c420-mf-social-link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:  36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    color:      var(--c420mf-text);
    transition: background .2s, color .2s, transform .2s;
}
.c420-mf-social-link svg { width: 18px; height: 18px; }
.c420-mf-social-link:hover {
    background: var(--c420mf-accent);
    color:      #fff;
    transform:  translateY(-2px);
}

/* ── Badges de confianza ─────────────────────────────────────── */
.c420-mf-badges {
    display:   grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.c420-mf-badge {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   12px;
    color:       var(--c420mf-text);
}
.c420-mf-badge-icon { font-size: 16px; flex-shrink: 0; }
.c420-mf-badge-label { line-height: 1.3; }

/* ── Listas de enlaces ───────────────────────────────────────── */
.c420-mf-links {
    list-style: none;
}
.c420-mf-links li {
    border-bottom: 1px solid var(--c420mf-border);
}
.c420-mf-links li:last-child { border-bottom: 0; }
.c420-mf-links a {
    display:   block;
    padding:   7px 0;
    font-size: 13px;
}
.c420-mf-links a:hover { padding-left: 4px; }

/* Sub-links (categorías hijas) */
.c420-mf-links--sub { padding-left: 12px; }
.c420-mf-links--sub a {
    font-size: 12px;
    color: rgba(255,255,255,.5);
    padding: 4px 0;
}
.c420-mf-links--sub a:hover { color: var(--c420mf-link-hover); }

/* ── Newsletter ──────────────────────────────────────────────── */
.c420-mf-nl-subtitle {
    font-size:     13px;
    color:         var(--c420mf-text);
    margin-bottom: 16px;
    line-height:   1.6;
}
.c420-mf-nl-row {
    display:   flex;
    gap:       0;
    border-radius: 6px;
    overflow:  hidden;
    border:    1px solid rgba(255,255,255,.15);
}
.c420-mf-nl-input {
    flex:        1;
    min-width:   0;
    background:  rgba(255,255,255,.06);
    border:      0;
    color:       #fff;
    font-size:   13px;
    padding:     10px 14px;
    outline:     none;
    transition:  background .2s;
}
.c420-mf-nl-input::placeholder { color: rgba(255,255,255,.4); }
.c420-mf-nl-input:focus { background: rgba(255,255,255,.1); }
.c420-mf-nl-btn {
    background:  var(--c420mf-accent);
    border:      0;
    color:       #fff;
    font-size:   13px;
    font-weight: 700;
    padding:     10px 18px;
    cursor:      pointer;
    white-space: nowrap;
    transition:  background .2s;
    flex-shrink: 0;
}
.c420-mf-nl-btn:hover { filter: brightness(1.12); }
.c420-mf-nl-btn:disabled { opacity: .6; cursor: not-allowed; }
.c420-mf-nl-msg {
    font-size:  12px;
    margin-top: 8px;
    min-height: 18px;
    transition: color .2s;
}
.c420-mf-nl-msg.is-success { color: #6ee7b7; }
.c420-mf-nl-msg.is-error   { color: #fca5a5; }
.c420-mf-nl-legal {
    font-size:  11px;
    color:      rgba(255,255,255,.3);
    margin-top: 10px;
    line-height: 1.5;
}

/* ── Barra inferior ──────────────────────────────────────────── */
.c420-mf-bottom {
    background: var(--c420mf-bg-bottom);
    padding:    16px 24px;
    border-top: 1px solid var(--c420mf-border);
}
.c420-mf-bottom-inner {
    max-width:   1280px;
    margin:      0 auto;
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         16px;
    justify-content: space-between;
}
.c420-mf-copyright {
    font-size: 12px;
    color:     rgba(255,255,255,.4);
}

/* Menú legal */
.c420-mf-legal-links {
    display:  flex;
    flex-wrap: wrap;
    gap:      0;
    list-style: none;
}
.c420-mf-legal-links li + li::before {
    content: '·';
    margin:  0 8px;
    color:   rgba(255,255,255,.2);
}
.c420-mf-legal-links a {
    font-size: 12px;
    color:     rgba(255,255,255,.4);
}
.c420-mf-legal-links a:hover { color: #fff; }

/* Iconos de pago */
.c420-mf-payment-icons {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}
.c420-mf-payment-icon svg {
    height:       22px;
    width:        auto;
    border-radius: 3px;
    opacity:      .7;
    transition:   opacity .2s;
}
.c420-mf-payment-icon svg:hover { opacity: 1; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    .c420-mf-inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .c420-mf-col--brand { grid-column: span 2; }
}

@media (max-width: 600px) {
    .c420-mf-body { padding: 40px 16px 32px; }
    .c420-mf-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .c420-mf-col--brand { grid-column: span 1; }
    .c420-mf-badges { grid-template-columns: 1fr 1fr; }
    .c420-mf-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .c420-mf-nl-row { flex-direction: column; border-radius: 6px; }
    .c420-mf-nl-btn { border-radius: 0 0 5px 5px; text-align: center; }
    .c420-mf-nl-input { border-radius: 5px 5px 0 0; }
}