/* ---------------------------------------------------------------------------
   B'Connect - Actualizacion 2026
   Estilos de los bloques nuevos de la portada y de contacto.

   Por que un archivo aparte y autocontenido:
   el CSS del tema (wp-content/themes/bconnect/dist/css/main.min4e44.css) NO
   trae el grid de Bootstrap: .row, .col-lg-*, .d-flex y las utilidades de
   espaciado no estan definidas en ningun archivo que la pagina cargue, aunque
   el HTML heredado las use y el bundle.js si traiga el JS de Bootstrap. Por
   eso los bloques nuevos no dependen de esas clases: traen su propio layout
   con flexbox y se apilan solos en celular.

   Se carga DESPUES del main.min para poder ganar por orden sin usar
   !important, y todo va prefijado con .bc- para no colisionar con el tema.
   --------------------------------------------------------------------------- */

:root {
    --bc-max: 1140px;
    --bc-gap: 1.75rem;
    --bc-radius: 14px;
    /* Paleta tomada del tema (main.min4e44.css), para no desentonar:
       #48a1a8 es el color de marca, con 60 usos, y #686868 el del texto. */
    --bc-marca: #48a1a8;
    --bc-texto: #686868;
    --bc-suave: #686868;
    --bc-linea: #d9ebec;
    --bc-fondo-alt: #f3fafa;
}

.bc-seccion {
    padding: 3.5rem 0;
}

.bc-seccion--alt {
    background: var(--bc-fondo-alt);
}

.bc-contenedor {
    width: 100%;
    max-width: var(--bc-max);
    margin: 0 auto;
    /* 16px de aire a los lados en celular, para que el texto no toque el borde */
    padding: 0 16px;
    box-sizing: border-box;
}

.bc-seccion__titulo {
    color: var(--bc-marca);
    font-weight: 700;
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
    line-height: 1.25;
    margin: 0 0 1rem;
}

.bc-seccion__intro {
    color: var(--bc-suave);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 62ch;
    margin: 0 0 2rem;
}

/* --- Rejilla de tarjetas: 1 columna en celular, 2 desde 768px --------------- */

.bc-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bc-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bc-grid > .bc-card {
    flex: 1 1 100%;
}

@media (min-width: 768px) {
    .bc-grid > .bc-card {
        /* dos columnas, descontando el gap */
        flex: 1 1 calc(50% - (var(--bc-gap) / 2));
    }
}

@media (min-width: 992px) {
    .bc-grid--tres > .bc-card {
        flex: 1 1 calc(33.333% - (var(--bc-gap) * 2 / 3));
    }
}

.bc-card {
    background: #fff;
    border: 1px solid var(--bc-linea);
    border-radius: var(--bc-radius);
    padding: 1.6rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.bc-card__titulo {
    color: var(--bc-marca);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.35;
    margin: 0 0 .6rem;
}

.bc-card__texto {
    color: var(--bc-suave);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
}

/* El enlace se pega abajo para que las tarjetas de una fila terminen igual */
.bc-card__cta {
    margin-top: auto;
    padding-top: 1.1rem;
}

/* --- Botonera -------------------------------------------------------------- */

.bc-botonera {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 1.6rem;
}

/* Minimo 44px de alto: objetivo tactil comodo en celular */
.bc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px de alto minimo: objetivo tactil comodo en celular */
    min-height: 44px;
    padding: .9em 2.5em;
    border: 3px solid var(--bc-marca);
    border-radius: 50px;
    font-weight: 700;
    font-size: .9em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.bc-btn--primario {
    background: var(--bc-marca);
    color: #fff;
}

.bc-btn--primario:hover,
.bc-btn--primario:focus {
    background: #fff;
    color: var(--bc-marca);
}

.bc-btn--secundario {
    background: #fff;
    color: var(--bc-marca);
}

.bc-btn--secundario:hover,
.bc-btn--secundario:focus {
    background: var(--bc-marca);
    color: #fff;
}

/* Foco visible para quien navega con teclado */
.bc-btn:focus-visible,
.bc-card__cta a:focus-visible {
    outline: 3px solid #14728d;
    outline-offset: 2px;
}

/* En celular los botones ocupan el ancho: mas faciles de tocar */
@media (max-width: 575px) {
    .bc-botonera .bc-btn {
        flex: 1 1 100%;
    }
}

/* --- Bloque de dos columnas (texto + figura) ------------------------------- */

.bc-dos {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
}

.bc-dos__texto,
.bc-dos__figura {
    flex: 1 1 100%;
}

@media (min-width: 992px) {
    .bc-dos__texto {
        flex: 1 1 58%;
    }
    .bc-dos__figura {
        flex: 1 1 34%;
    }
}

.bc-dos__figura img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 50%;
}

/* --- Avisos del formulario ------------------------------------------------- */

.bc-aviso {
    border-radius: 10px;
    padding: 1rem 1.15rem;
    margin: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1.6;
}

.bc-aviso--ok {
    background: #e7f6ec;
    border: 1px solid #a8ddba;
    color: #1b5e33;
}

.bc-aviso--error {
    background: #fdecec;
    border: 1px solid #f3b5b5;
    color: #8a1f1f;
}

/* El campo antispam queda fuera de la vista y del foco, pero sigue en el DOM */
.bc-antispam {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}


/* --- Formulario de contacto ------------------------------------------------
   Al reemplazar Contact Form 7 se perdieron los estilos del tema, que colgaban
   todos de .wpcf7 (.page-contacto .wpcf7 label, .wpcf7-form-control...).
   Aqui se replican con el mismo lenguaje visual: etiqueta en versalitas color
   marca y campo de borde grueso redondeado.
   --------------------------------------------------------------------------- */

.bc-form p {
    margin: 0 0 1.25rem;
}

.bc-form label {
    display: inline-block;
    color: var(--bc-marca);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: .5em;
}

.bc-form input[type="text"],
.bc-form input[type="email"],
.bc-form textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 2px solid var(--bc-marca);
    border-radius: 20px;
    color: var(--bc-marca);
    padding: 1em;
    font: inherit;
    background: #fff;
}

.bc-form textarea {
    /* el radio grande se ve raro en una caja alta */
    border-radius: 14px;
    resize: vertical;
}

.bc-form input::placeholder,
.bc-form textarea::placeholder {
    color: #9bc5c8;
}

.bc-form input:focus,
.bc-form textarea:focus {
    outline: 3px solid #14728d;
    outline-offset: 1px;
}

/* En celular el boton ocupa el ancho; en pantalla ancha, solo lo que necesita */
.bc-form button[type="submit"] {
    width: 100%;
}

@media (min-width: 576px) {
    .bc-form button[type="submit"] {
        width: auto;
    }
}


/* --- Titulo de la portada --------------------------------------------------
   El tema estiliza .slider__content h2 y h3, pero no h1, asi que el titulo
   nuevo salia sin color ni peso. Aqui se le da exactamente el mismo
   tratamiento que al h2 de la segunda lamina del carrusel, incluida la media
   query de 600px, y el <strong> toma el color de marca igual que ahi.
   Se mantiene h1 por jerarquia: es el unico de la pagina.
   --------------------------------------------------------------------------- */

.slider__content h1 {
    color: #686868;
    font-size: 3em;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: .3em;
}

.slider__content h1 strong {
    color: var(--bc-marca);
    font-weight: 900;
}

@media (max-width: 600px) {
    .slider__content h1 {
        font-size: 2.4em;
    }
}