@import url('publica_copy.css');
:root {
    --primary-color: #009ab2;
    --secondary-color: #00656b;
    --tertiary-color: #81bfce;
    --crisp-green: #ABC53E;
    --cyan-light: #E5F4F7;
    --cyan-pastel: #c0dfe7;
}

.h1 {
    font-size: 2.2rem;
}

a { color: var(--primary-color); }
a:hover { color: var(--secondary-color); }
.nav-link { color: var(--primary-color); }
.nav-link:hover { color: var(--secondary-color); }
h1, h2, h3, h4, h5 { font-weight: 400; }
p { line-height: 1.5em; }
li { line-height: 1.5em; }
b, strong, label { font-weight: 600; }
small { color: #777; }

section:nth-child(2n) { background-color: #fff; }
section > h2 { text-align: center; }

.section-first {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 85vh;
}

.container-first h1 { line-height: 1; }

.section-first-sm {
    min-height: 45vh;
}

.section-hero {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
}

.hero-box {
    padding: 3rem;
    background-color: rgba(255,255,255,0.85);
    min-height: 45vh;
}



#tresBloques > div {
    padding: 0 40px;
}

.lista-check {
  list-style: none;
  padding-left: 0;
}

.lista-check li {
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1rem;
  line-height: 1.6;
  min-height: 25px;
}

.lista-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;              /* ajusta fino si quieres */
  width: 25px;
  height: 25px;
  background: url("/css/img/check.png") no-repeat center/contain;
}

.circle-logo {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
}

/*address { padding-left: 1em; font-weight: 300; }*/

.carousel-indicators li { display: inline-block; width: 12px; height: 12px; margin: 1px; text-indent: -999px; cursor: pointer; background-color: transparent; border: 1px solid var(--tertiary-color); border-radius: 6px; }
.carousel-indicators [data-bs-target] { display: inline-block; width: 10px; height: 10px; margin: 5px; text-indent: -999px; cursor: pointer; background-color: transparent; border: 1px solid var(--tertiary-color); border-radius: 6px; }
.carousel-indicators .active { background-color: var(--tertiary-color); }

.frases { font-family: 'Lora', serif; font-size: 1.5em; text-align: left; color: #777; }

.marca { display:block; margin-bottom:150px; }

iframe { border: 1px solid #ccc; }

.text-box { border-radius: 0.25rem; padding: 3em; margin-left: -3em; width: calc(50% + 3em); }

.box-left {
    background-color: var(--cyan-pastel);
    display: flex;
    justify-content: center; /* horizontal */
    align-items: center; /* vertical */
    line-height: 2rem;
}

.box-left div {
    font-size:1.1rem;
}

section .box-right .text-secondary {
    background-color: white;
    position: relative;
    background-image: url('/css/img/omega.png');
    background-repeat: no-repeat;
    /*background-origin: content-box;*/
    background-position: top right;
    background-size: 60px auto;
    text-align: right;
    padding-top: 5rem;
}

section .box-right > div {
    margin-top: 5rem;
}


.comillas { width: 70px; }

.market-access-steps {
    margin-top: -14rem;
    padding-top: 19rem;
}

.paso-card {
    min-height: 100%;
    box-shadow: 0 0 0 0 transparent; /* opcional */
}

.paso-numero {
    width: 150px;
    height: 150px;
    background: var(--tertiary-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6.5rem;
    font-weight: 400;
}


#sectionComentarios .panel { border-radius: 0; height: 600px; overflow: hidden; }

#servicios { background-color: var(--cyan-pastel); text-align: center; color: #000; }
#servicios ul { padding: 0; list-style: none; }
#servicios ul li { margin-bottom: 2em; }
#servicios ul li b { display: block; margin: 1em 0 0.5em; font-weight: 600; font-size: 1.3em; }

#herramientas { background-color: var(--primary-color); text-align: center; color: #fff; }
#herramientas ul { margin:0; padding: 0; list-style: none; }
#herramientas ul li { margin-bottom: 2em; padding: 15px 25px; font-size: 0.85em; }
#herramientas ul li a { color: #fff; }
#herramientas ul li b { display: block; margin: 1em 0 0.5em; font-weight: 600; font-size: 1.15em; }

.form-control { border: 2px solid var(--primary-color); border-radius: 0; background-color: #fff; }

#buzon { background-color: var(--cyan-light); color: #000; padding: 3rem 1rem; }
#buzon label, #contacto label { font-size:0.8em; font-weight: 400; text-transform: uppercase; }
#contacto .checkbox label { font-size:0.8em; font-weight: 400; text-transform:initial }
#buzon .checkbox label { text-transform: initial; }
#buzon .checkbox a { color: #000; text-decoration: underline; }
#buzon .btn-primary { background-color: #0098b0; text-transform: uppercase; padding: 0.8em 3em; font-size: 1em; border: none; }

/*.formulario p { margin-top:0; }
.checkbox label, .radio label { padding-left: 0px; cursor: pointer; }
.icheckbox_square-grey { margin-right: 12px; }

.nicescroll-cursors { background-color: #0b6262 !important; }*/

.cookies-alerta { position: fixed; z-index:10; bottom: 0; font-size:0.8em; color: #fff; background-color: #0b6262; width: 100%; padding:2em 0; display: block; }
    .cookies-alerta h4 { margin:0 0 1em;  }
    .cookies-alerta p { margin: 0; }
    .cookies-alerta a { color: #fff; font-weight:bold; }

/* COOKIES */

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.modal-content {
    max-height:80vh !important;
    overflow-y: auto;
}
#modal-cookies .modal-body{
    padding: 0 3rem;
}
#modal-cookies .modal-body h3 {
    border-bottom: 2px solid #0B6262;
    margin: 1em 0 1em;
}

#modal-cookies .btn-primary {
    background-color: #0B6262;
    border-color: #084b4b;
    margin-left: 1em;
}
#modal-cookies .btn-primary:hover {
    background-color: #084b4b;
}

/* COOKIES */

.custom-tabs {
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.custom-tabs .tab-content {
    padding: 30px;
}
    
.buttonTwitter h2 {
    border-bottom: 2px solid #0B6262;
}

.buttonTwitter h4 a {
    color: #0B6262 !important;
}
.btn-primary {
    color: white;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-primary:hover {
    color: white;
    background-color: var(--secondary-color);
}
.btn-outline-primary {
    color: var(--primary-color);
    background-color: transparent;
    border-color: var(--primary-color);
}
.btn-outline-primary:hover {
    color: white;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.dropdown-item.active, .dropdown-item:active { background-color: var(--primary-color); }

.border-primary { border-color: var(--primary-color) !important; }

.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-tertiary { color: var(--tertiary-color) !important; }
.text-crisp-green { color: var(--crisp-green) !important; }

.p-6 { padding: 4.5rem !important; }
.p-7 { padding: 6rem !important; }
.py-6 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
.py-7 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.pt-6 { padding-top: 4.5rem !important; }
.pt-7 { padding-top: 6rem !important; }
.pb-6 { padding-bottom: 4.5rem !important; }
.pb-7 { padding-bottom: 6rem !important; }

.m-6 { margin: 4.5rem !important; }
.m-7 { margin: 6rem !important; }
.mt-6 { margin-top: 4.5rem !important; }
.mt-7 { margin-top: 6rem !important; }
.mb-6 { margin-bottom: 4.5rem !important; }
.mb-7 { margin-bottom: 6rem !important; }
.my-6 { margin-top: 4.5rem !important; margin-bottom: 4.5rem !important; }
.my-7 { margin-top: 6rem !important; margin-bottom: 6rem !important; }

.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-tertiary { background-color: var(--tertiary-color) !important; }
.bg-cyan-light { background-color: var(--cyan-light) !important; }
.bg-cyan-pastel { background-color: var(--cyan-pastel) !important; }


/* cuando hay 3 columnas reales */
@media (min-width: 992px) {
    #tresBloques > div:not(:last-child) { border-right: 1px solid var(--primary-color); }
}

@media (max-width: 767.98px) {
    .jumbotron { padding: 1rem; }
    .text-box { height: auto; }

    #herramientas .container .row .fs-6 { font-size: 0.75rem !important; }
    #herramientas .container .row .h5 { font-size: 0.8rem !important; }
    #herramientas .container img { width: 56%; margin-top: 2rem; }
    #servicios .container .row .fs-6 { font-size: 0.75rem !important; }
    #servicios .container img { width: 56%; margin-top: 2rem; }

/*    .section-hero { background-position: 80% 20%; } */
    .section-hero { background-position: center center; }

    .section-first-sm { min-height: 75vh !important; }

    .hero-box { min-height: 35vh; /* que crezca según contenido */ padding: 2.8rem; /* menos padding que p-5 */ }
        /*.container-first {
        margin-top: 30vh;*/ /* baja el contenido media pantalla */
        /*}*/

        .hero-box img { height: 2.2rem; }
        .hero-box .fw-bold span { font-weight: 900 !important; font-size: 1rem; }
        .hero-box p { margin: 0 auto 2em; }
            .hero-box p small { font-size: 0.7rem !important; }
        .hero-box h1 { margin-top: 0rem !important; margin-bottom: 1rem; font-size: 2.3rem; }
        .hero-box .text-secondary.fs-4 { font-size: 0.94rem !important; margin-bottom: 2rem; }
        .hero-box .text-secondary { font-size: 0.94rem !important; }

    .box-left div { font-size: 0.8rem !important; line-height: 1.5rem; padding: 2rem !important; }
    section .box-right .text-secondary { 
        background-color: white; position: relative; background-image: url(/css/img/omega.png); background-repeat: no-repeat; background-position: top right; background-size: 60px auto; 
        text-align: right; padding-top: 5rem; margin-left: 15%; font-size: 1rem !important; margin-left: 20%; 
    }
    .pb-5 { padding-bottom: 0rem !important; }

    section#historia { padding: 4em 2em; }
        section#historia h2 { margin-bottom: 1.5rem; }
        section#historia p.fs-4 { font-size: .95rem !important; }

    section#grupo { padding: 4em 2em; font-size:0.95rem; }

}