/**
 * Páginas de texto: sobre nosotros, aviso legal y términos y condiciones.
 *
 * Las tres comparten estructura -cabecera con migas, un bloque de contenido y,
 * en dos de ellas, un lateral-, así que comparten hoja. El objetivo es que se
 * lean: ancho de línea contenido, jerarquía clara y el mismo lenguaje que el
 * resto del sitio.
 */

/* ------------------------------------------------------------------ cabecera

   Era una banda ámbar con el título en blanco encima, que a ese tamaño se leía
   regular. Pasa a fondo oscuro, como las bandas del resto de la web, con el
   ámbar reservado para el acento. */

.pagina-cabecera {
    padding: 44px 0 40px;
    background: #0f1216 !important;
    border: 0;
}

.pagina-cabecera .container {
    padding: 0;
}

.pagina-cabecera h1 {
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.15;
    text-transform: none;
}

.pagina-cabecera h1::after {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    margin-top: 16px;
    background: #fab300;
    border-radius: 999px;
}

.pagina-cabecera .breadcrumbs {
    margin: 14px 0 0;
    padding: 0;
}

.pagina-cabecera .breadcrumbs ul,
.pagina-cabecera .breads {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagina-cabecera .breadcrumbs li {
    margin: 0;
    padding: 0;
    color: #8a949e;
    font-size: 13.5px;
    list-style: none;
}

/* La plantilla dibuja las viñetas con un ::before, no con list-style. */
.pagina-cabecera .breadcrumbs li::before {
    content: none;
    display: none;
}

.pagina-cabecera .breadcrumbs li + li::after {
    content: none;
}

.pagina-cabecera .breadcrumbs a {
    color: #b9c2cb;
    text-decoration: none;
}

.pagina-cabecera .breadcrumbs a:hover {
    color: #fab300;
}

/* -------------------------------------------------------------- el contenido */

.pagina-texto {
    padding: 44px 0 56px;
    color: #22282f;
    font-family: 'Montserrat', sans-serif;
}

.pagina-texto > .row {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    margin: 0;
}

.pagina-texto .content {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 0;
    float: none;
}

.pagina-texto aside.sidebar {
    flex: 0 0 300px;
    width: 300px;
    padding: 0;
    float: none;
}

@media (max-width: 900px) {
    .pagina-texto > .row {
        flex-direction: column;
        gap: 24px;
    }

    .pagina-texto aside.sidebar {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* El texto largo se lee mejor con la línea corta. */
.pagina-texto .content p,
.pagina-texto .content li {
    max-width: 72ch;
    margin: 0 0 16px;
    padding: 0;
    color: #4a555f;
    font-family: 'Montserrat', sans-serif;
    font-size: 15.5px;
    line-height: 1.7;
}

.pagina-texto .content p.lead {
    max-width: 72ch;
    margin: 0 0 22px;
    color: #191f26;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
}

.pagina-texto .content a {
    color: #191f26;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pagina-texto .content a:hover {
    color: #191f26;
    text-decoration-color: #fab300;
    text-decoration-thickness: 2px;
}

.pagina-texto .content ul,
.pagina-texto .content ol {
    margin: 0 0 18px;
    padding: 0 0 0 22px;
}

.pagina-texto .content li {
    margin-bottom: 8px;
}

/* --------------------------------------------------------------- el lateral */

.pagina-texto .widget {
    float: none;
    width: 100%;
    margin: 0;
    padding: 24px;
    background: #fff;
    border: 1px solid #e6eaee;
    border-radius: 18px;
    box-shadow: none;
}

.pagina-texto .widget h4 {
    margin: 0 0 16px;
    padding: 0;
    background: none;
    border-radius: 0;
    color: #191f26;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.2px;
    text-transform: none;
}

.pagina-texto .widget .textwidget {
    padding: 0;
}

.pagina-texto .widget h5 {
    margin: 0 0 4px;
    padding: 0;
    color: #191f26;
    font-family: 'Montserrat', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
}

.pagina-texto .widget h5 + p {
    margin: 0 0 16px;
}

.pagina-texto .widget p:last-child {
    margin-bottom: 0;
}

.pagina-texto .widget p {
    color: #6b757f;
    font-size: 14px;
    line-height: 1.55;
}

/* ------------------------------------------------- las ventajas del pie

   Nueve bloques con un icono de sprite, sueltos sobre el fondo. Pasan a ser
   tarjetas en rejilla, que es como se presentan en el resto de la web. */

.services.iconic.white {
    padding: 46px 0 52px;
    background: #f7f9fb;
}

.services.iconic.white .row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}

.services.iconic.white .one-third {
    width: auto;
    margin: 0;
    padding: 24px 22px;
    background: #fff;
    border: 1px solid #e6eaee;
    border-radius: 18px;
    float: none;
    text-align: left;
}

.services.iconic.white .circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0 0 14px;
    background: #fff5da;
    border: 0;
    border-radius: 50%;
}

.services.iconic.white h3 {
    margin: 0 0 8px;
    padding: 0;
    color: #191f26;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.2px;
    text-transform: none;
}

.services.iconic.white p {
    margin: 0;
    padding: 0;
    color: #6b757f;
    font-size: 14.5px;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .services.iconic.white .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .services.iconic.white .row {
        grid-template-columns: minmax(0, 1fr);
    }

    .pagina-cabecera h1 {
        font-size: 26px;
    }

    .pagina-texto {
        padding: 32px 0 44px;
    }
}

/* =========================================== términos y condiciones

   Son 138 párrafos seguidos: casi 9.500px de una tirada. Lo que más ayuda es
   poder saltar a lo que se busca, así que arriba va el índice y cada apartado
   se ve venir. */

.pagina-texto .terminos-indice {
    margin: 0 0 34px;
    padding: 24px 26px;
    background: #f7f9fb;
    border: 1px solid #e6eaee;
    border-radius: 18px;
}

.pagina-texto .terminos-indice-titulo {
    margin: 0 0 14px !important;
    padding: 0;
    color: #191f26;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.2px;
}

.pagina-texto .terminos-indice ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 22px;
    margin: 0;
    padding: 0;
    counter-reset: none;
    list-style: none;
}

.pagina-texto .terminos-indice li {
    margin: 0;
    padding: 0;
    max-width: none;
    list-style: none;
}

/* La plantilla dibuja la viñeta con un ::before. */
.pagina-texto .terminos-indice li::before {
    content: none;
    display: none;
}

.pagina-texto .terminos-indice a {
    display: block;
    padding: 5px 0;
    color: #4a555f;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    text-decoration: none;
}

.pagina-texto .terminos-indice a:hover {
    color: #191f26;
    text-decoration: underline;
    text-decoration-color: #fab300;
    text-underline-offset: 3px;
}

/* ------------------------------------------------------- los apartados */

.pagina-texto h2.title-terms {
    margin: 38px 0 14px;
    padding: 0 0 12px;
    max-width: none;
    border-bottom: 1px solid #eef1f4;
    color: #191f26;
    font-family: 'Montserrat', sans-serif;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.4px;
    line-height: 1.3;
    text-transform: none;
    /* Sitio para que la cabecera fija no tape el título al saltar desde el
       índice. */
    scroll-margin-top: 100px;
}

.pagina-texto h2.title-terms:first-of-type {
    margin-top: 0;
}

.pagina-texto .terms-content {
    max-width: 72ch;
    margin: 0 0 14px;
    color: #4a555f;
    font-size: 15.5px;
    line-height: 1.7;
}

@media (max-width: 700px) {
    .pagina-texto .terminos-indice ol {
        grid-template-columns: minmax(0, 1fr);
    }

    .pagina-texto .terminos-indice {
        padding: 20px 18px;
    }

    .pagina-texto h2.title-terms {
        font-size: 17px;
    }
}

/* ============================== ganando a la plantilla

   Esta hoja se registra desde la vista, así que carga antes que style.css: a
   igualdad de peso gana la plantilla. Lo que sigue repite lo de arriba con un
   nivel más para poder aplicarse. */

/* El contenido conservaba el 75% de ancho de la rejilla del tema y dejaba una
   franja muerta a su derecha. */
.pagina-texto > .row > .content,
.pagina-texto > .row > .content.three-fourth,
.pagina-texto > .row > .full-width.content {
    flex: 1 1 auto;
    width: auto !important;
    max-width: none;
}

/* La caja del lateral, con las esquinas del resto del sitio. */
.pagina-texto aside.sidebar .widget {
    float: none;
    width: 100%;
    margin: 0;
    padding: 24px;
    background: #fff;
    border: 1px solid #e6eaee;
    border-radius: 18px;
    box-shadow: none;
}

.pagina-texto aside.sidebar .widget h4 {
    margin: 0 0 16px;
    padding: 0;
    background: none;
    border-radius: 0;
    color: #191f26;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.2px;
    text-transform: none;
}

.pagina-texto aside.sidebar .widget .textwidget {
    padding: 0;
}

/* --------------------------------------------- el círculo de cada ventaja

   Medía 88px y flotaba a la izquierda con 30px de margen inferior, lo que
   estiraba la tarjeta a casi 300px para dos líneas de texto. */

.services.iconic.white .one-third .circle {
    float: none;
    width: 46px;
    height: 46px;
    margin: 0 0 14px;
    border: 0;
    border-radius: 50%;
    line-height: 46px;
}

.services.iconic.white .one-third .circle .ico {
    height: 24px;
    background-size: contain;
}

.services.iconic.white h3 {
    padding: 0 0 8px;
    font-size: 16px;
    text-transform: none;
}

.services.iconic.white .one-third > p {
    font-size: 14.5px !important;
}

/* El tema deja el bloque con un relleno pensado para otra maqueta. */
.services.iconic.white {
    padding: 46px 0 52px;
}

/* ------------------------------------------------------ nada de puntitos

   La plantilla dibuja la viñeta de cada <li> con un ::before que lleva un
   punto -ul > li:before-, así que ponerle list-style:none no la quita: hay
   que apagar el pseudo-elemento. Vale para toda la página. */

.pagina-texto li::before,
.pagina-cabecera li::before {
    content: none !important;
    display: none !important;
}

.pagina-texto ul,
.pagina-texto ol {
    list-style: none;
}

/* Los datos de empresa del aviso legal son pares de etiqueta y valor, no una
   enumeración: se presentan como filas. */
.pagina-texto .content ul > li {
    position: relative;
    margin: 0;
    padding: 11px 0;
    border-bottom: 1px solid #f1f4f6;
}

.pagina-texto .content ul > li:last-child {
    border-bottom: 0;
}

.pagina-texto .content ul {
    margin: 0 0 22px;
    padding: 0;
}

/* Los apartados de cualquiera de estas páginas, con el mismo aspecto que los
   de términos y condiciones. */

.pagina-texto .content h2,
.pagina-texto .content h3 {
    margin: 34px 0 14px;
    padding: 0 0 12px;
    max-width: none;
    border-bottom: 1px solid #eef1f4;
    color: #191f26;
    font-family: 'Montserrat', sans-serif;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.4px;
    line-height: 1.3;
    text-transform: none;
    scroll-margin-top: 100px;
}

.pagina-texto .content h2:first-child,
.pagina-texto .content h3:first-child {
    margin-top: 0;
}

/* El tema afina el tamaño con .single .entry-content h2, que pesa más. */
.pagina-texto .single .entry-content h2,
.pagina-texto .single .entry-content h3,
.pagina-texto .content .entry-content h2 {
    font-size: 19px;
    padding: 0 0 12px;
}

/* El índice que trae el propio documento: una lista ordenada al principio con
   un enlace por apartado. Se presenta como tal, en dos columnas. */

.pagina-texto .entry-content > ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 22px;
    margin: 0 0 34px;
    padding: 24px 26px;
    background: #f7f9fb;
    border: 1px solid #e6eaee;
    border-radius: 18px;
    counter-reset: apartado;
    list-style: none;
}

.pagina-texto .entry-content > ol > li {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 5px 0;
    max-width: none;
    border: 0;
    counter-increment: apartado;
    list-style: none;
}

.pagina-texto .entry-content > ol > li::before {
    content: counter(apartado) "." !important;
    display: block !important;
    position: static;
    flex: 0 0 auto;
    color: #b9c2cb;
    font-size: 14px;
    font-weight: 700;
}

.pagina-texto .entry-content > ol a {
    color: #4a555f;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    text-decoration: none;
}

.pagina-texto .entry-content > ol a:hover {
    color: #191f26;
    text-decoration: underline;
    text-decoration-color: #fab300;
    text-underline-offset: 3px;
}

@media (max-width: 700px) {
    .pagina-texto .entry-content > ol {
        grid-template-columns: minmax(0, 1fr);
        padding: 20px 18px;
    }
}