/* Mobile fix: .team-box (main.css, @media max-width:768px) sets
   width:56vh — using viewport HEIGHT for a WIDTH is almost certainly a
   typo for 56vw. On a typical phone that makes the card wider than the
   screen itself, so it overflows its owl-carousel slide and the
   neighboring slide peeks in. Let it just fill the slide instead. */
@media (max-width: 768px) {
    .team-box {
        width: 100%;
    }
}

/* Áreas de práctica cards: .v-align-row (main.css) sets align-items:center,
   which vertically centers each column instead of stretching it — so a
   card whose title wraps to more lines than its siblings keeps its own
   (taller) natural height while the others stay short beside it. Stretch
   every card to the row's full height instead, and pin the hr/dots footer
   to the bottom so titles of different lengths don't throw off card size. */
.multiple-row.v-align-row {
    align-items: stretch;
}

/* Card columns only (col-lg-4 col-md-6) — NOT the heading's .col-12 row
   above them. Turning .col-12 into a flex container too made its child
   .block-heading (and its <hr>) shrink to content width instead of
   filling the row, since flex items default to shrink-to-fit on the
   main axis. */
.multiple-row.v-align-row > .col-lg-4 {
    display: flex;
}

.multiple-row.v-align-row .col-wrap {
    width: 100%;
}

.multiple-row.v-align-row .ico-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.multiple-row.v-align-row .ico-box .des {
    flex: 1 1 auto;
}

/* Logo */

.logo-size{
    height: 3.9rem;
}

/* NavBar */

.navBar a:hover{
    color:#558A5A !important;
}

.navBar a.selected{
    color:#67a06d !important;
}

/* Lawyer */

.lawyer-background{
    border-radius: 4px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(104, 104, 104, 0.15) 0%, rgba(217, 217, 217, 0) 100%);


} 
/* "Acerca de ..." link relies on the :hover state (main.css's
   .caption-fade-up) to slide figcaption up so the readMore link clears
   .lawyer-background's overflow:hidden. Touch devices have no hover, so
   the link stayed permanently clipped off-screen. Force that same
   slid-up position by default wherever there's no hover to discover it. */
@media (hover: none) {
    .team-box.caption-fade-up figcaption {
        transform: translate(0, -6.429rem);
    }

    /* .readMore's 7vh margin-top (below) exists to push the link back
       down to the box's visible bottom edge after the hover-slide above
       shrinks the empty space beneath it. Here the slide is static, not
       reactive to a hover reveal, so that push-down is just a big gap
       between the email and the link — bring it back to a normal one. */
    .team-box.caption-fade-up .readMore {
        margin-top: 1rem;
    }
}

/* Image container size */

.image-container{
    height: 28rem;
}

@media (min-width:768px) and (max-width:1200px){
    .image-container{
        height: 23rem;
    }
}

/* texts */
.mb-0{
    letter-spacing: normal;
    font-size: 1.2rem;
    line-height: 1.5rem;
    font-weight: 300;
}

.small-note{
    font-size: .5;
    font-variant: small-caps;
    font-weight: 600;
}

.bold-m{
    font-weight: 500;
}

.sub {
    color: #fff;
    opacity: .5;
}
/* Read more */
.readMore{
    margin-top: 7vh;
    text-align: right;
    opacity: 1;
    transition: all .2s ease-in-out; 
    margin-bottom: -1rem !important;
    padding-right: .5rem;

}
@media (min-width: 768px) {
    .readMore {
      margin-top: 6vh;
    }
}
@media (min-width: 1036px) {
    .readMore {
      margin-top: 6vh;
    }
}
.readMore:hover{
    cursor: pointer;
    transform: scale(1.1); 

}

/* ESTILOS MODAL TRAYECTORIA ABOGADOS */

/* Same treatment as the team carousel's .owl-nav arrows (main.css):
   plain icon, no button chrome, gray at rest, brand green on hover. */
.btn-previous,
.btn-next{
    height: auto;
    width: auto;
    padding: 0 .5rem;
    border: none;
    outline: none;
    background: transparent;
    color: #c1c5cd;
    font-size: 1.75rem;
    transition: 250ms ease-in;
    border-radius: 0;
}

.font-size-m{
    font-size: 1rem;
}

.font-size-2{
    font-size: .9rem;
}



.modal-footer {
    display: flex;
    justify-content: space-between;
}

.buttons-back-forth{
    margin-left: 1.8rem;
}

.first-name{
    margin-right: 1.8rem;
    color: #04a587;
}

.first-name:hover{
    color: #037a64;
}

/* On narrow screens, shrink the arrows/margins/link text just enough that
   the arrows and "Ponte en contacto con <name>" / "Get in touch with
   <name>" still fit on one row instead of wrapping. */
@media (max-width: 480px) {
    .modal-footer {
        flex-wrap: nowrap;
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .buttons-back-forth {
        margin-left: 0;
        flex-shrink: 0;
    }

    .btn-previous,
    .btn-next {
        font-size: 1.25rem;
        padding: 0 .25rem;
    }

    .first-name {
        margin-right: 0;
        font-size: .7rem;
        white-space: nowrap;
    }
}
  




.btn-previous:hover,
.btn-next:hover{
    border: none;
    outline: none;
    background: transparent;
    color: #67a06d;
    cursor: pointer;
}

.content-modalm {
    margin: 2rem 5rem 2rem 5rem;
}

/* The 5rem (80px) side margins above are sized for desktop. On a ~370px-wide
   phone modal that leaves only ~210px for the lawyer bio text, wrapping it
   into a tall, narrow column. Shrink it on small screens. Placed after the
   rule above (same specificity) so it actually wins in the cascade. */
@media (max-width: 768px) {
    .content-modalm {
        margin: 1.5rem 1rem;
    }
}

.dots-style{
    opacity: .3;
    font-size: 1.1rem !important;
}

svg:hover {
    fill: #04a587 !important;
}


.icon-container object {
    width:4rem; /* Establece el tamaño deseado */
    opacity: .8;
}

.padding-custom-left{
    padding-left: 1.5rem !important;
}

.padding-custom{
    padding-right: 2rem !important;
}

#exampleModalLongTitle{
    margin-left: 1.5rem;
    opacity: .5;
}


.margins-sections{
    margin-right: 4rem;
    margin-left: 4rem;
}

#myModal{
    position: absolute !important;
    height: 100vh !important;
}

#myModal .modal-dialog {
   position: relative !important;
   margin: 0 auto;
   top: 50%; /* Move the element down by 50% of its parent's height */
   transform: translateY(-50%); /* Move the element up by 50% of its own height */

}

/* Reduce the gap between "THE LIFE SIZE / BRAND STORY" and "Áreas de práctica".
   .content-block's own padding-top/bottom (from main.css) grows up to 7.5rem
   per side on large screens, leaving ~240px of blank space between them.
   Overriding by id keeps every other .content-block section on the site
   at its default spacing. */
#brand-story {
    padding-bottom: 3.5rem;
}

#services-block {
    padding-top: 3.5rem;
}

/* Stretch the location map to touch the viewport's side edges.
   .map-container (main.css) caps its parent at width:90%; this breaks
   just the map out of that constraint with the full-bleed technique,
   leaving the "UBICACIÓN." heading at its normal, centered width. */
#map-full {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* .btn.btn-primary (main.css) is white text on a transparent background,
   meant for buttons over a dark hero image. Inside the light-colored
   contact modal that makes the label invisible, so give this button its
   own solid background using the site's brand green. */
#btn_sent {
    background: #04a587;
    border-color: #04a587;
    border-image: none;
    color: #fff;
}

#btn_sent:hover {
    background: #038a70;
    border-color: #038a70;
    border-image: none;
    color: #fff;
}

#btn_sent,
#btn_sent:focus,
#btn_sent:active,
#btn_sent.focus,
#btn_sent.active {
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Firefox draws its own dotted focus ring inside <button> elements via this
   pseudo-element; it ignores outline/box-shadow entirely. */
#btn_sent::-moz-focus-inner {
    border: 0;
}

/* Netlify Forms honeypot field: must stay in the DOM (and reachable by tab
   for real screen-reader users would be bad, hence tabindex="-1" on the
   input itself) so spam bots fill it in, but hidden from sighted users. */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

#contact_form_message {
    margin-top: .75rem;
    font-size: .875rem;
    min-height: 1.25rem;
}

#contact_form_message.is-error {
    color: #d9534f;
}

/* Trim the contact form down a little on mobile so it fits more
   comfortably: smaller field spacing/padding, a shorter message box, and
   less dead space between the message field and the Send button (its
   .form-group margin-bottom plus the empty #contact_form_message's
   reserved height added up to ~50px of nothing). */
@media (max-width: 480px) {
    #contact_form .form-group {
        margin-bottom: .75rem;
    }

    #contact_form .form-control {
        padding: .5rem .75rem;
        font-size: .8125rem;
    }

    #contact_form textarea.form-control {
        min-height: 100px;
        padding-top: .625rem;
    }

    .form-group:has(#con_message) {
        margin-bottom: .375rem;
    }

    #contact_form_message {
        margin-top: 0;
        min-height: 0;
        font-size: .75rem;
    }
}

/* Replaces the form entirely on a successful submission (see contact-form.js);
   hidden by default via the [hidden] attribute on the element itself. */
.contact-form-success {
    text-align: center;
    padding: 2.5rem 1rem;
}

.contact-form-success-icon {
    font-size: 2.75rem;
    color: #04a587;
    margin-bottom: 1rem;
    display: block;
}

.contact-form-success-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #04a587;
    margin-bottom: .5rem;
}

/* Footer language switcher (i18n.js) */
.lang-switcher {
    margin-top: .75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    font-size: .6875rem;
    letter-spacing: .04em;
}

.lang-switcher-label {
    color: #7d7d7d;
    text-transform: uppercase;
}

.lang-switcher-btn {
    background: none;
    border: none;
    padding: 0;
    color: rgba(255, 255, 255, .55);
    font-size: .6875rem;
    letter-spacing: .04em;
    cursor: pointer;
    transition: color 250ms ease-in;
}

.lang-switcher-btn:hover {
    color: #67a06d;
}

.lang-switcher-btn,
.lang-switcher-btn:focus,
.lang-switcher-btn:active {
    outline: none !important;
    box-shadow: none !important;
}

.lang-switcher-btn::-moz-focus-inner {
    border: 0;
}

.lang-switcher-btn.active {
    color: #04a587;
    font-weight: 600;
}

.lang-switcher-sep {
    color: #444;
}

/* Team carousel swipe indicator (dots).
   The carousel doesn't use the owl-theme skin, so owl.js's default
   dots (generated because `dots` isn't disabled in jquery.main.js)
   render with no size/color — invisible. This gives them a visible
   style so mobile users see they can swipe between items. Hidden from
   991px up, where the carousel switches to loop:false + arrow nav. */
.team-container .owl-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
}

.team-container .owl-dots .owl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c1c5cd;
    cursor: pointer;
    transition: background 250ms ease-in, transform 250ms ease-in;
}

.team-container .owl-dots .owl-dot span {
    display: none;
}

.team-container .owl-dots .owl-dot:hover {
    background: #67a06d;
}

.team-container .owl-dots .owl-dot.active {
    background: #04a587;
    transform: scale(1.2);
}

@media (min-width: 991px) {
    .team-container .owl-dots {
        display: none;
    }
}