/* ============================================================
   Collarada — capa de marca (direccion "solvencia sobria")
   Piedra / azul Pirineo. El azul posee regiones deliberadas
   (navbar, footer, boton primario, enlaces); el lienzo es piedra
   calida. El oro solo marca el foco de teclado y micro-destaques.
   Se aplica SOBRE Bootstrap 4.3.1 (este fichero carga despues).
   Contrastes verificados AA: cuerpo >= 4.5:1, grandes/controles >= 3:1.

   Sistema tipografico (una sola familia: la pila de sistema, sin
   webfonts — cero reflow, cobertura es/en/fr):
     cuerpo 1rem/400, lh 1.6  (medida capada a 38rem en columnas anchas)
     lead   1.25rem/400, lh 1.6, max 46rem
     h6     1rem/600 | h5 1.125/600 | h4 1.25/600
     h3     1.375/600 (subsecciones y tarjetas de servicio)
     h2     1.75/600 (secciones; aire encima 2.25rem, reset :first-child)
     h1     2.25/600 (titular de pagina)
     precio 2.25/700 (rol propio de tarjeta, antes .display-4 light)
     roles especiales declarados: h2.h4 = llamada de cierre (1.25/700),
     h2.h5 = nombre de plan en tarjetas (1.125/600).
     movil <=575px: h1 1.875, h2 1.5, h3 1.25, precio 2rem.
   ============================================================ */

:root {
    --collarada-azul-900: #16304F;   /* hover / estados oscuros */
    --collarada-azul-800: #1E3A5F;   /* primario: nav, footer, acciones */
    --collarada-azul-100: #E8EEF5;   /* tintes claros (hover de menus) */
    --collarada-piedra-50: #F6F5F2;  /* lienzo */
    --collarada-piedra-200: #E3E0D9; /* bordes */
    --collarada-piedra-700: #6C6A65; /* boton secundario, texto atenuado */
    --collarada-tinta: #2E2C29;      /* titulares */
    --collarada-cuerpo: #44423E;     /* texto corrido */
    --collarada-oro: #A8833C;        /* foco de teclado (3.5:1 sobre blanco) */
    --collarada-whatsapp: #1E7E34;   /* verde de canal (5.1:1 con blanco, AA) */
    --collarada-whatsapp-oscuro: #176128; /* hover (7.5:1) */
}

/* ---------- base ---------- */

body {
    background-color: var(--collarada-piedra-50);
    color: var(--collarada-cuerpo);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--collarada-tinta);
}

a {
    color: var(--collarada-azul-800);
}

a:hover {
    color: var(--collarada-azul-900);
}

/* foco de teclado visible y coherente (oro legible sobre claro y oscuro) */
a:focus, button:focus, .btn:focus, .nav-link:focus, .dropdown-item:focus {
    outline: 2px solid var(--collarada-oro);
    outline-offset: 2px;
}

::selection {
    background: #D7E2EE;
    color: var(--collarada-tinta);
}

/* ---------- tipografia: escalera y roles ---------- */

h1, .h1 {
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 1rem;
}

h2, .h2 {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 2.25rem 0 0.875rem;
}

/* el aire superior de h2 se resetea al inicio de bloque */
h2:first-child,
h2.h4,
h2.h5 {
    margin-top: 0;
}

h3, .h3 {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.35;
}

h4, .h4 {
    font-size: 1.25rem;
    font-weight: 600;
}

h5, .h5 {
    font-size: 1.125rem;
    font-weight: 600;
}

h6, .h6 {
    font-size: 1rem;
    font-weight: 600;
}

/* llamada de cierre en cajas (bg-light): rol declarado, peso 700 */
h2.h4 {
    font-weight: 700;
    margin-bottom: 0.75rem;
}

/* nombre de plan en las tarjetas de honorarios: rol declarado */
h2.h5 {
    font-weight: 600;
}

/* precio protagonista de su tarjeta (antes .display-4 en peso light) */
.display-4 {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--collarada-tinta);
}

.lead {
    color: #55524E;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.6;
    max-width: 46rem;
}

/* linea discreta bajo los CTAs del hero: precio y WhatsApp en el primer pliegue */
.hero-extra {
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-top: 1rem;
    color: #55524E;
}

/* medida de lectura en columnas anchas (45-75ch) */
main .col-12 > p:not(.lead),
main .col-12 > ul {
    max-width: 38rem;
}

main li {
    margin-bottom: 0.375rem;
}

/* telefono: que no se parta entre digitos */
a[href^="tel:"] {
    white-space: nowrap;
}

/* texto atenuado de marca (el gris de fabrica no pasa AA sobre piedra) */
.text-muted {
    color: var(--collarada-piedra-700) !important;
}

.form-text {
    font-size: 0.875rem;
}

label {
    font-size: 0.9375rem;
    font-weight: 600;
}

/* escala movil: absorbe la expansion de los titulares fr/en */
@media (max-width: 575.98px) {
    h1, .h1 { font-size: 1.875rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }
    .display-4 { font-size: 2rem; }

    /* hero: texto y CTAs en el primer pliegue, foto despues */
    main.container {
        padding-top: 0.75rem !important;
    }

    .jumbotron {
        padding: 1.5rem 1.25rem 2rem;
    }

    .jumbotron .btn-lg {
        display: block;
        width: 100%;
    }

    .jumbotron .btn-lg + .btn-lg {
        margin-top: 0.75rem;
        margin-left: 0;
    }

    /* la foto vertical en su tamano nativo, centrada (evita un muro de 460px) */
    .hero-photo {
        display: block;
        max-width: min(100%, 280px);
        margin: 0.75rem auto 0;
    }

    /* enlaces del hero con area tactil >= 44px (precio y WhatsApp) */
    .hero-extra a {
        display: inline-block;
        padding: 0.75rem 0.25rem;
        margin: -0.25rem 0;
    }
}

/* ---------- navegacion ---------- */

.navbar.bg-dark {
    background-color: var(--collarada-azul-800) !important;
}

.navbar-brand {
    color: #F6F5F2;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.navbar-brand:hover {
    color: #FFFFFF;
}

.navbar-brand img {
    display: inline-block;
    height: 30px;
    width: auto;
    margin-right: 0.5rem;
    vertical-align: -7px;
}

.nav-link,
.dropdown-item {
    font-size: 0.9375rem;
    font-weight: 500;
}

.navbar-dark .navbar-nav .nav-link {
    color: #DCE6F0;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #FFFFFF;
}

/* pagina actual en la navegacion: texto blanco + subrayado dorado */
.navbar-dark .navbar-nav .nav-link.active {
    color: #FFFFFF;
    box-shadow: inset 0 -2px 0 var(--collarada-oro);
}

.dropdown-item.active {
    background-color: var(--collarada-azul-100);
    color: var(--collarada-azul-900);
}

.dropdown-menu {
    border: 1px solid var(--collarada-piedra-200);
}

.dropdown-item {
    color: var(--collarada-azul-800);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--collarada-azul-100);
    color: var(--collarada-azul-900);
}

/* ---------- botones ---------- */

.btn {
    font-weight: 600;
}

.btn-primary {
    background-color: var(--collarada-azul-800);
    border-color: var(--collarada-azul-800);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--collarada-azul-900);
    border-color: var(--collarada-azul-900);
}

.btn-secondary {
    background-color: var(--collarada-piedra-700);
    border-color: var(--collarada-piedra-700);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #575550;
    border-color: #575550;
}

/* WhatsApp: verde de canal propio (el de fabrica, 3.13:1, no pasaba AA) */
.btn-success {
    background-color: var(--collarada-whatsapp);
    border-color: var(--collarada-whatsapp);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--collarada-whatsapp-oscuro);
    border-color: var(--collarada-whatsapp-oscuro);
}

/* foco de botones oscuros: anillo doble (claro sobre el boton, oscuro sobre
   el fondo) — el oro no contrastaba ni con el verde ni con el gris piedra */
.btn-secondary:focus,
.btn-success:focus {
    outline: 2px solid #F6F5F2;
    box-shadow: 0 0 0 5px var(--collarada-azul-800);
}

/* ---------- formularios ---------- */

.form-control:focus {
    border-color: var(--collarada-azul-800);
    box-shadow: 0 0 0 0.2rem rgba(30, 58, 95, 0.25);
}

/* ---------- superficies ---------- */

.jumbotron {
    background-color: #FFFFFF;
    border: 1px solid var(--collarada-piedra-200);
    border-radius: 0.5rem;
}

.card {
    border-color: var(--collarada-piedra-200);
}

/* tarjeta de plan recomendado y su insignia (honorarios) */
.card-recomendada {
    border-color: var(--collarada-azul-800);
    border-width: 2px;
}

.plan-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    background-color: var(--collarada-azul-800);
    border-radius: 1rem;
}

.hero-photo {
    border: 1px solid var(--collarada-piedra-200);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(22, 48, 79, 0.16);
    /* nunca por encima de su resolucion nativa (280px): centrada y nitida */
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.sello {
    width: 140px;
    height: auto;
}

/* ---------- pie ---------- */

.site-footer {
    margin-top: 2.5rem;
    padding: 2rem 0 1.75rem;
    background-color: var(--collarada-azul-800);
    color: #E8EEF5;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.site-footer a {
    color: #A8C3E0;
}

.site-footer a:hover {
    color: #FFFFFF;
}

.site-footer-brand {
    margin-bottom: 0.35rem;
    font-weight: 700;
    font-size: 1.125rem;
    color: #FFFFFF;
}

.site-footer-links {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.9;
}

.footer-logo {
    height: 22px;
    width: auto;
    margin-right: 0.5rem;
    vertical-align: -5px;
}

.site-footer-nap {
    margin-bottom: 0;
}