/* ==========================================================================
   mym-diseno.css — capa de diseño de la web pública de MYM Asesores (#7836)
   Se carga la ÚLTIMA (después del tema): solo ajusta, no sustituye al tema.
   Paleta del tema: --primary-color #058283, --secondary-color #00a6a6,
   títulos #21333e, texto #606d75. Títulos Poppins, texto Montserrat.
   ========================================================================== */

/* 1. BLOG: el módulo usuario_blog pinta con variables --blog-* -------------- */
:root {
    --blog-fondo: #f4f7f7;
    --blog-fondo-foto: #dfe9e9;
    --blog-acento: #058283;
    --blog-acento-claro: #00a6a6;
    --blog-titulos: #21333e;
    --blog-texto: #55636b;
    --blog-texto-suave: #6f7c84;
    --blog-texto-articulo: #2f3b42;
    --blog-fuente-titulos: 'Poppins', sans-serif;
    --blog-fondo-cta: rgba(5, 130, 131, .09);
}

/* En la portada las tarjetas van sobre la sección oscura del tema */
.mym-blog-portada .blog-tarjeta { box-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
.mym-blog-portada article.blog-tarjeta .blog-tarjeta-titulo { font-size: 1.1rem; }

/* 2. BOTONES DE MARCA ------------------------------------------------------ */
.mym-btn-borde,
.mym-btn-borde:visited { display: inline-block; border: 2px solid var(--secondary-color, #00a6a6); color: var(--secondary-color, #00a6a6); background: transparent; padding: 10px 26px; border-radius: 4px; font-weight: 600; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.mym-btn-borde:hover,
.mym-btn-borde:focus { background: var(--secondary-color, #00a6a6); color: #fff; }

/* Botones Bootstrap "primary" de la parte pública, en el turquesa de la marca */
#cookie-banner .btn-primary,
.mym-contacto .btn-primary {
    --bs-btn-bg: #058283; --bs-btn-border-color: #058283;
    --bs-btn-hover-bg: #046b6c; --bs-btn-hover-border-color: #046b6c;
    --bs-btn-active-bg: #035a5b; --bs-btn-active-border-color: #035a5b;
    --bs-btn-disabled-bg: #058283; --bs-btn-disabled-border-color: #058283;
    --bs-btn-focus-shadow-rgb: 5, 130, 131;
    font-weight: 600;
}
#cookie-banner a { color: #058283; }

/* 3. PÁGINA 404 (programa del framework; aquí solo la vestimos con la marca) */
body .fw-zona.fw-zona .error404-container { padding: 4rem 1rem 5rem; font-family: 'Montserrat', sans-serif; }
body .fw-zona.fw-zona .error404-icon { color: var(--secondary-color, #00a6a6); font-size: clamp(3.5rem, 9vw, 5rem); }
body .fw-zona.fw-zona .error404-icon i { font-size: 1em !important; }
body .fw-zona.fw-zona .error404-icon .text-danger { color: inherit !important; }
body .fw-zona.fw-zona .error404-title { font-family: 'Poppins', sans-serif; color: #21333e; font-weight: 900; }
body .fw-zona.fw-zona .error404-subtitle { font-family: 'Poppins', sans-serif; color: #21333e; }
body .fw-zona.fw-zona .error404-text { color: #606d75; }
body .fw-zona.fw-zona .error404-button,
body .fw-zona.fw-zona a.error404-button:link,
body .fw-zona.fw-zona a.error404-button:visited { background: #058283; border-radius: 4px; font-weight: 600; }
body .fw-zona.fw-zona .error404-button:hover { background: #046b6c; }

/* 4. PORTADA --------------------------------------------------------------- */
/* Botones claros sobre fondo oscuro o turquesa */
.mym-btn-borde-claro,
.mym-btn-borde-claro:visited { display: inline-block; border: 2px solid rgba(255, 255, 255, .85); color: #fff; background: transparent; padding: 10px 24px; border-radius: 4px; font-weight: 600; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.mym-btn-borde-claro:hover,
.mym-btn-borde-claro:focus { background: #fff; color: #21333e; }
.mym-btn-blanco,
.mym-btn-blanco:visited { display: inline-block; background: #fff; color: #058283; border: 2px solid #fff; padding: 10px 28px; border-radius: 4px; font-weight: 700; text-decoration: none; }
.mym-btn-blanco:hover,
.mym-btn-blanco:focus { background: #21333e; border-color: #21333e; color: #fff; }

/* Acciones fijas sobre el carrusel (ordenador y tablet) */
.mym-hero-cta { position: absolute; left: 0; right: 0; bottom: 18%; z-index: 20; pointer-events: none; }
.mym-hero-cta .container { display: flex; gap: .75rem; flex-wrap: wrap; padding-left: 0; padding-right: 0; } /* misma caja que la cabecera: alineado con el logo y el título */
.mym-hero-cta .btn { pointer-events: auto; font-size: 1.05rem; padding: 12px 28px; }
@media (max-width: 1199.98px) { .mym-hero-cta { padding: 0 25px; } } /* como la barra de la cabecera */

/* Franja de confianza */
.mym-confianza { background: #058283; color: #fff; padding: 1.75rem 0; }
.mym-confianza-item { display: flex; align-items: center; gap: .9rem; }
.mym-confianza-item > i { font-size: 2rem; line-height: 1; color: #fff; opacity: .9; flex-shrink: 0; }
.mym-confianza-item strong { display: block; font-family: 'Poppins', sans-serif; font-size: 1.15rem; font-weight: 700; line-height: 1.2; color: #fff; }
.mym-confianza-item span { display: block; font-size: .88rem; line-height: 1.35; color: rgba(255, 255, 255, .85); }
@media (max-width: 575.98px) {
    .mym-confianza { padding: 1.25rem 0; }
    .mym-confianza-item { gap: .6rem; }
    .mym-confianza-item > i { font-size: 1.5rem; }
    .mym-confianza-item strong { font-size: 1rem; }
    .mym-confianza-item span { font-size: .8rem; }
}

/* Secciones de servicio: la etiqueta va alineada con su título */
.mym-servicio .pre-title { display: block; text-align: left; margin: 0; }

/* Banda final de contacto */
.mym-banda-final { background: linear-gradient(135deg, #058283 0%, #046b6c 55%, #21333e 100%); padding: 4rem 0; }
.mym-banda-final h2 { color: #fff; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem); margin: 0 0 .75rem; }
.mym-banda-final p { color: rgba(255, 255, 255, .9); font-size: 1.05rem; max-width: 640px; margin: 0 auto 1.75rem; }
.mym-banda-final-botones { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
@media (max-width: 575.98px) {
    .mym-banda-final { padding: 3rem 0; }
    .mym-banda-final-botones .btn { width: 100%; }
}

/* El tema centra un carrusel del 75vh dentro de una caja de 100vh-50px: en tablet y
   móvil quedaba una franja oscura arriba y abajo. El carrusel ocupa toda la caja. */
#slider .slider-h-auto { align-items: stretch; }
#slider .slider-h-auto .swiper-wrapper,
#slider .slider-h-auto .swiper-slide { min-height: 100%; height: auto; }

/* 5. CONTACTO -------------------------------------------------------------- */
.mym-contacto { background: #f4f7f7; padding: 3rem 0 4rem; }
.mym-contacto .container.header { padding-left: 16px; padding-right: 16px; }
.mym-contacto-cabecera { margin-bottom: 2rem; }
.mym-contacto-cabecera .pre-title { margin: 0 0 .4rem; }
.mym-contacto-cabecera h1 { font-family: 'Poppins', sans-serif; font-weight: 800; color: #21333e; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); line-height: 1.2; margin: 0 0 .5rem; }
.mym-contacto-cabecera p { color: #55636b; font-size: 1.05rem; margin: 0; }
.mym-contacto-cabecera p a { color: #058283; font-weight: 700; text-decoration: none; white-space: nowrap; }
.mym-contacto-tarjeta { background: #fff; border-radius: 12px; box-shadow: 0 2px 14px rgba(0, 0, 0, .07); padding: 2rem; }
.mym-contacto-nota { color: #6f7c84; font-size: .88rem; margin: 0 0 1.25rem; }
.mym-contacto .form-label { color: #21333e; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; }
.mym-contacto .form-control { background: #fff; border: 1px solid #ccd6d9; border-radius: 8px; padding: .7rem .9rem; color: #21333e; font-size: 1rem; }
.mym-contacto .form-control::placeholder { color: #9aa6ac; }
.mym-contacto .form-control:focus { border-color: #00a6a6; box-shadow: 0 0 0 .2rem rgba(0, 166, 166, .18); }
.mym-obligatorio { color: #c0392b; }
.mym-opcional { color: #8a979d; font-weight: 400; }
.mym-contacto-enviar { padding: .75rem 2rem; font-size: 1.05rem; }
.mym-contacto-privacidad { color: #6f7c84; font-size: .85rem; line-height: 1.5; margin: 1rem 0 0; }
.mym-contacto-privacidad a { color: #058283; }
.mym-contacto-datos { background: #21333e; color: rgba(255, 255, 255, .88); border-radius: 12px; padding: 2rem; }
.mym-contacto-datos h2 { font-family: 'Poppins', sans-serif; color: #fff; font-size: 1.35rem; font-weight: 700; margin: 0 0 1.25rem; }
.mym-contacto-datos ul { list-style: none; padding: 0; margin: 0; }
.mym-contacto-datos li { display: flex; gap: .9rem; padding: .9rem 0; border-top: 1px solid rgba(255, 255, 255, .1); line-height: 1.5; }
.mym-contacto-datos li:first-child { border-top: 0; padding-top: 0; }
.mym-contacto-datos li > i { color: #00a6a6; font-size: 1.25rem; line-height: 1.4; flex-shrink: 0; }
.mym-contacto-datos li span { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #00a6a6; margin-bottom: .1rem; }
.mym-contacto aside.mym-contacto-datos a { color: #fff; font-weight: 600; text-decoration: none; }
.mym-contacto aside.mym-contacto-datos a:hover { text-decoration: underline; }
.mym-contacto-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 767.98px) { .mym-contacto-dos { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) {
    .mym-contacto { padding: 2rem 0 3rem; }
    .mym-contacto-tarjeta, .mym-contacto-datos { padding: 1.4rem 1.15rem; }
}