/* =====================================================================
   ANTOJITO DE MODA · Personalización de marca + TEMA CLARO/OSCURO
   (no toca style.css del tema)
   Claro:  blanco → oro muy sutil · textos oscuros
   Oscuro: negro  → gris fuerte    · textos blancos
   El color es un TINTE translúcido sobre el video, para que sus
   efectos se noten y los textos sigan legibles.
   ===================================================================== */

/* ---------- Fondo del héroe según tema ---------- */
html[data-theme="light"] .base-layer {
    background: linear-gradient(160deg, #FFFFFF 0%, #FFFEFB 42%, #F3E6C4 100%);
}
html[data-theme="dark"] .base-layer {
    background: linear-gradient(160deg, #000000 0%, #1C1C1C 48%, #3D3D3D 100%);
}

/* Tinte translúcido SOBRE el video (deja ver sus efectos) */
.base-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
html[data-theme="light"] .base-layer::after {
    background: linear-gradient(160deg, rgba(255, 255, 255, .50) 0%, rgba(243, 230, 196, .40) 100%);
}
html[data-theme="dark"] .base-layer::after {
    background: linear-gradient(160deg, rgba(0, 0, 0, .55) 0%, rgba(61, 61, 61, .40) 100%);
}

/* ---------- Logo sobre medallón claro ---------- */
.brand img {
    max-width: 300px;
    width: 80%;
    height: auto;
    background: linear-gradient(180deg, #ffffff, #f6efe8);
    padding: 18px 26px;
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 0 1px rgba(217, 184, 92, .35);
}
/*
.brand[data-theme="dark"] img {
    max-width: 300px;
    width: 80%;
    height: auto;
    background: linear-gradient(180deg, #000000, #8f8f8f);
    padding: 18px 26px;
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 0 1px rgba(217, 184, 92, .35);
}
*/
html[data-theme="light"] .brand img {
    box-shadow: 0 12px 34px rgba(124, 90, 28, .18), 0 0 0 1px rgba(217, 184, 92, .35);
}

/* ---------- Textos del héroe según tema ---------- */
#content .heading h1 { font-weight: 600; letter-spacing: .2px; }
#content .heading p { opacity: .95; }

html[data-theme="light"] #content h1,
html[data-theme="light"] #content h2,
html[data-theme="light"] #content h3,
html[data-theme="light"] #content p {
    color: #2C1F1B;
}
html[data-theme="dark"] #content h1,
html[data-theme="dark"] #content h2,
html[data-theme="dark"] #content h3,
html[data-theme="dark"] #content p {
    color: #FFFFFF;
}

/* ---------- Contador ---------- */
html[data-theme="light"] .count-down .countdown-row .countdown-amount { color: #B0862F; text-shadow: none; }
html[data-theme="light"] .count-down .countdown-row .countdown-period { color: #5A443D; }
html[data-theme="dark"]  .count-down .countdown-row .countdown-amount { color: #EAD08A; text-shadow: 0 2px 14px rgba(0,0,0,.4); }
html[data-theme="dark"]  .count-down .countdown-row .countdown-period { color: #F3E9E1; }

/* ---------- Botones ---------- */
.btn.btn-default {
    background-color: #E27D90; border-color: #E27D90; color: #fff;
}
.btn.btn-default:hover, .btn.btn-default:focus, .btn.btn-default:active {
    background-color: #d56a7e; border-color: #d56a7e; color: #fff;
}
html[data-theme="light"] .btn.btn-border { border-color: #B0862F; color: #5A443D; }
html[data-theme="light"] .btn.btn-border:hover { background-color: rgba(176,134,47,.12); border-color: #B0862F; color: #2C1F1B; }
html[data-theme="dark"]  .btn.btn-border { border-color: rgba(234,208,138,.8); color: #F3E9E1; }
html[data-theme="dark"]  .btn.btn-border:hover { background-color: rgba(234,208,138,.15); border-color: #EAD08A; color: #fff; }

.modal .btn.btn-primary { background-color: #E27D90; border-color: #E27D90; }
.modal .btn.btn-primary:hover { background-color: #d56a7e; border-color: #d56a7e; }

.sub-msg { margin: 12px 0 0; font-size: 14px; min-height: 18px; }

/* ---------- WhatsApp ---------- */
.btn-whatsapp {
    display: inline-block; background: #25D366; color: #fff !important;
    padding: 10px 18px; border-radius: 999px; font-weight: 500; text-decoration: none;
}
.btn-whatsapp:hover { background: #1ebe57; }

/* ---------- Botón conmutador de tema (arriba a la derecha) ---------- */
.tema {
    position: fixed; top: 18px; right: 18px; z-index: 6000;
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: 1px solid; font-size: 18px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: transform .25s ease, background-color .35s ease, color .35s ease, border-color .35s ease;
}
.tema:hover { transform: rotate(18deg) scale(1.06); }
html[data-theme="light"] .tema { background: rgba(255,255,255,.7); border-color: rgba(176,134,47,.5); color: #7C5A1C; }
html[data-theme="dark"]  .tema { background: rgba(255,255,255,.1); border-color: rgba(234,208,138,.5); color: #EAD08A; }
.tema .ico-sol { display: none; }
.tema .ico-luna { display: inline; }
html[data-theme="dark"] .tema .ico-luna { display: none; }
html[data-theme="dark"] .tema .ico-sol { display: inline; }