/* ===================================================================
   FUNDISVAL · Marca sobre Crafto (elder-care)
   Sobrescribe variables y utilidades de color/tipografía.
   Cargar SIEMPRE después de css/style.css y demos/elder-care/elder-care.css
   Colores del logo: naranja #ff6000 · verde #60a800 · gris #787878
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap');

:root {
    /* Tipografía */
    --alt-font: 'Poppins', sans-serif;      /* titulares */
    --primary-font: 'Open Sans', sans-serif; /* cuerpo / nav / botones */

    /* Marca */
    --base-color: #ff6000;        /* naranja principal (fills, acentos) */
    --base-color-dark: #e05400;   /* hover del naranja */
    --brand-orange-text: #c2410c; /* naranja oscuro AA para texto sobre blanco */
    --brand-green: #60a800;       /* verde secundario (fills) */
    --brand-green-dark: #4e8a00;  /* hover del verde */
    --brand-green-text: #3f6f00;  /* verde oscuro AA para texto sobre blanco */

    /* Neutros */
    --dark-gray: #232a24;         /* texto principal / titulares */
    --medium-gray: #5f6b6a;
}

/* ---- Header: logo a tamaño moderado (evita que el header quede muy alto y el desplegable caiga muy abajo) ---- */
header .navbar .navbar-brand img { max-height: 78px; height: auto; }

/* Menú: un punto más compacto en desktop para que quepan los 6 ítems sin apretar */
@media (min-width: 992px) {
    header .navbar .navbar-nav .nav-link { padding-left: 14px; padding-right: 14px; white-space: nowrap; }
    header .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 > .nav-link { padding-right: 4px; }
    /* Subir los submenús para que no queden tan separados del texto */
    header .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu { margin-top: -24px !important; }
}
/* En portátiles (992-1199px) el menú va más justo: texto algo menor para que "Qué puedes hacer"
   no salte de línea y se monte sobre el siguiente ítem. */
@media (min-width: 992px) and (max-width: 1199px) {
    header .navbar .navbar-nav .nav-link { font-size: 13px; padding-left: 10px; padding-right: 10px; }
}

/* ---- Tipografía base ---- */
body { font-family: var(--primary-font); }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.alt-font { font-family: var(--alt-font); }

/* ---- Naranja: hover más oscuro para contraste ---- */
.btn.btn-base-color:hover,
.btn.btn-base-color:active,
.btn.btn-box-shadow.btn-base-color:hover,
.btn.btn-box-shadow.btn-base-color:active {
    background-color: var(--base-color-dark);
    border-color: var(--base-color-dark);
}

/* Texto en naranja sobre fondo claro -> usar variante AA */
.text-base-color,
.btn-link.text-base-color { color: var(--brand-orange-text) !important; }

/* ---- Verde secundario: clases utilitarias propias ---- */
.bg-brand-green { background-color: var(--brand-green) !important; }
.text-brand-green { color: var(--brand-green-text) !important; }
.border-brand-green { border-color: var(--brand-green) !important; }

.btn.btn-brand-green {
    background-color: #457a00;   /* verde oscurecido: blanco encima cumple AA texto grande */
    border-color: #457a00;
    color: #fff;
}
.btn.btn-brand-green:hover,
.btn.btn-brand-green:active {
    background-color: var(--brand-green-text);
    border-color: var(--brand-green-text);
    color: #fff;
}

/* Botón contorno naranja */
.btn.btn-outline-base {
    background: transparent;
    border: 2px solid var(--base-color);
    color: var(--brand-orange-text);
}
.btn.btn-outline-base:hover {
    background: var(--base-color);
    color: #fff;
}

/* ---- Enlaces de contenido ---- */
a { color: var(--brand-orange-text); }
a:hover { color: var(--base-color-dark); }
.text-dark-gray a:hover { color: var(--base-color-dark); }

/* ---- Foco visible accesible (WCAG) ---- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--brand-green);
    outline-offset: 2px;
}

/* ---- Franja/acentos de marca ---- */
.brand-gradient {
    background: linear-gradient(120deg, var(--base-color) 0%, var(--brand-green) 100%);
}
.brand-rule {
    width: 60px; height: 4px; border: 0;
    background: var(--base-color); border-radius: 4px; opacity: 1;
}

/* ---- Iconos de features en verde/naranja ---- */
.icon-brand-orange { color: var(--base-color); }
.icon-brand-green  { color: var(--brand-green); }

/* ---- Utilidades propias ---- */
.text-white-transparent { color: rgba(255, 255, 255, .7) !important; }
.text-white-transparent:hover { color: #fff !important; }
.transition-all { transition: all .25s ease; }
.card-hover-lift { transition: transform .25s ease, box-shadow .25s ease; }
.card-hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(35, 42, 36, .12);
}
.min-vh-90 { min-height: 90vh; }
.brand-rule-center { margin-left: auto; margin-right: auto; }

/* Listas con check de marca */
.list-check { list-style: none; padding-left: 0; }
.list-check li {
    position: relative; padding-left: 34px; margin-bottom: 14px; line-height: 1.6;
}
.list-check li::before {
    content: "\F26E"; /* bi-check-lg */
    font-family: "bootstrap-icons";
    position: absolute; left: 0; top: 1px;
    color: #fff; background: var(--brand-green);
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
}

/* ---- Páginas legales ---- */
.legal-content p { line-height: 1.75; margin-bottom: 16px; color: var(--dark-gray); }
.legal-content h3 { font-size: 22px; margin-bottom: 14px; }
.legal-content ul.list-check li { margin-bottom: 10px; }
.legal-content a:not(.btn) { text-decoration: underline; }
.legal-content .table th { color: var(--dark-gray); font-family: var(--alt-font); }

/* ---- Banner de cookies ---- */
.cookie-banner {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1055;
    background: #fff; border-radius: 12px;
    box-shadow: 0 12px 40px rgba(35, 42, 36, .22);
    border: 1px solid rgba(35, 42, 36, .08);
    opacity: 0; transform: translateY(20px);
    transition: opacity .25s ease, transform .25s ease;
    max-width: 920px; margin: 0 auto;
}
.cookie-banner.is-visible { opacity: 1; transform: translateY(0); }
.cookie-banner-inner {
    display: flex; align-items: center; gap: 24px;
    padding: 20px 24px; flex-wrap: wrap;
}
.cookie-banner-text { flex: 1 1 340px; }
.cookie-banner-actions { display: flex; gap: 12px; flex: 0 0 auto; }
.cookie-banner-actions .btn { margin: 0; }
@media (max-width: 575px) {
    .cookie-banner-inner { padding: 18px; }
    .cookie-banner-actions { width: 100%; }
    .cookie-banner-actions .btn { flex: 1; }
}

/* ---- Panel de preferencias de cookies ---- */
.cookie-prefs-overlay {
    position: fixed; inset: 0; z-index: 1060;
    background: rgba(35, 42, 36, .55);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; transition: opacity .25s ease;
}
.cookie-prefs-overlay.is-visible { opacity: 1; }
.cookie-prefs-panel {
    background: #fff; border-radius: 12px; max-width: 560px; width: 100%;
    padding: 32px; position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    transform: translateY(16px); transition: transform .25s ease;
    max-height: 90vh; overflow-y: auto;
}
.cookie-prefs-overlay.is-visible .cookie-prefs-panel { transform: translateY(0); }
.cookie-prefs-close {
    position: absolute; top: 14px; right: 16px; border: 0; background: transparent;
    font-size: 28px; line-height: 1; color: var(--medium-gray); cursor: pointer;
}
.cookie-cat {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 18px 0; border-top: 1px solid rgba(35, 42, 36, .1);
}
.cookie-prefs-actions {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px;
    padding-top: 20px; border-top: 1px solid rgba(35, 42, 36, .1);
}
.cookie-prefs-actions .btn { margin: 0; }
/* Interruptor */
.cookie-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.cookie-switch input { opacity: 0; width: 0; height: 0; }
.cookie-slider {
    position: absolute; cursor: pointer; inset: 0; background: #c9d0c6;
    transition: .25s; border-radius: 26px;
}
.cookie-slider::before {
    content: ""; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px;
    background: #fff; transition: .25s; border-radius: 50%;
}
.cookie-switch input:checked + .cookie-slider { background: var(--brand-green); }
.cookie-switch input:checked + .cookie-slider::before { transform: translateX(20px); }
.cookie-switch input:disabled + .cookie-slider { opacity: .7; cursor: not-allowed; }

/* ---- Contenido enriquecido de artículos (bloques de Editor.js) ---- */
.article-body p { margin-bottom: 20px; }
.article-body h2, .article-body h3, .article-body h4 {
    font-family: var(--alt-font, inherit); font-weight: 700; color: var(--dark-gray, #232323);
    margin-top: 40px; margin-bottom: 16px; line-height: 1.3;
}
.article-body h2 { font-size: 26px; }
.article-body h3 { font-size: 21px; }
.article-body h4 { font-size: 18px; }
.article-body ul, .article-body ol { margin-bottom: 20px; padding-left: 24px; }
.article-body li { margin-bottom: 8px; }
.article-body a { color: var(--brand-green); text-decoration: underline; }

.article-body .article-list li::marker { color: var(--base-color); font-weight: 700; }

.article-body .article-checklist { list-style: none; padding-left: 4px; }
.article-body .article-checklist li { display: flex; align-items: flex-start; gap: 10px; }
.article-body .article-checklist input[type="checkbox"] { margin-top: 5px; accent-color: var(--base-color); }

.article-body .article-figure { margin: 28px 0; text-align: center; }
.article-body .article-figure img {
    max-width: 100%; height: auto; border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.article-body .article-figure.is-bordered img { border: 1px solid #e6e6e6; box-shadow: none; }
.article-body .article-figure.is-boxed { background: var(--very-light-gray, #f7f7f7); padding: 20px; border-radius: 10px; }
.article-body .article-figure.is-stretched img { width: 100%; }
.article-body .article-figure figcaption { margin-top: 10px; font-size: 14px; color: #7a7a7a; font-style: italic; }

.article-body .article-quote {
    margin: 28px 0; padding: 20px 28px; border-left: 4px solid var(--base-color);
    background: var(--very-light-gray, #f7f7f7); font-style: italic; color: #444;
}
.article-body .article-quote p { margin-bottom: 8px; }
.article-body .article-quote cite { display: block; font-style: normal; font-weight: 600; color: var(--dark-gray, #232323); }

.article-body .article-embed { margin: 28px 0; }
.article-body .article-embed-ratio { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; }
.article-body .article-embed-ratio iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.article-body .article-embed-caption { margin-top: 10px; font-size: 14px; color: #7a7a7a; font-style: italic; text-align: center; }

.article-body .article-table-wrap { overflow-x: auto; margin: 28px 0; }
.article-body .article-table { width: 100%; border-collapse: collapse; }
.article-body .article-table th, .article-body .article-table td {
    border: 1px solid #e6e6e6; padding: 10px 14px; text-align: left; font-size: 15px;
}
.article-body .article-table th { background: var(--very-light-gray, #f7f7f7); font-weight: 700; }

.article-body .article-delimiter { border: none; text-align: center; margin: 40px 0; height: auto; }
.article-body .article-delimiter::before { content: "* * *"; letter-spacing: 8px; color: #bbb; font-size: 18px; }

.article-body .article-code {
    margin: 24px 0; padding: 18px 20px; background: #232323; color: #f5f5f5; border-radius: 8px;
    overflow-x: auto; font-size: 14px;
}
.article-body .article-code code { font-family: 'Consolas', monospace; white-space: pre; }

/* ---- Respeta reduce-motion ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

h1, h2, h3 {
    line-height: 1.3;
}