/*CSS Areas*/
.areas-sectores
{
    width: 100%;
    max-width:1580px ;
    margin: 30px auto 100px auto;
}
.areas-sectores__layout
{
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 3px;
}

.areas-sectores__layout .areas-sectores__col
{
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 531px;
}

.area-card
{
    --area-overlay-color: #fe0507;
    --area-overlay-opacity: .52;
    display:flex;
    flex-direction:column;
    width:100%;
    box-sizing:border-box;
    position: relative;
    isolation: isolate;
    padding-top: 30px;
    padding-bottom: 23px;
    padding-right:15px;
    padding-left: 15px;
    color: #fff;
    cursor: pointer;
}

.areas-sectores__col--2 > .area-card {
    flex: 1 1 0;
    min-height: 0;
}

.area-card--promocion-inmobiliaria {
    background-color: #69C4EA;
    --area-overlay-color: #69C4EA;
    --area-overlay-opacity: .8;
}


.area-card--promocion-inmobiliaria .area-card__icon img {
    display: block;
    width: auto;
    max-width: 72px;
    max-height: 72px;
    object-fit: contain;
}

.area-card .area-card__title
{
    color: #FFF;
    margin-top: 0;
    margin-bottom: 16px;
    font-size: clamp(18px, 1.23vw, 23px);
    font-family: "Spartan-Light";
    line-height: 1.2;
    font-weight: 300;
}

.areas-sectores__row
{
    display:flex;
    gap:3px;
    min-height: 0;
}

.area-card__inner{
  display:flex;
  flex-direction:column;
  height:100%;
  position: relative;
  z-index: 1;
}

.area-card__toggle{
  margin-top:auto;
}

.area-card__inner > :not(.area-card__media)
{
    position: relative;
    z-index: 1;
}

.area-card__media
{
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .45s ease;
    background-image: var(--area-bg-image, none);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.area-card__media::after
{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--area-overlay-color, #fe0507);
    opacity: var(--area-overlay-opacity, .8);
}

/* Columnas */
.areas-sectores__col--1
{
    flex: 1.93;
}

.areas-sectores__col--2
{
    flex: 1.94;
}

.areas-sectores__col--3
{
    flex: 1.95;
}

.areas-sectores__col--4
{
    flex: 1.08;
}

/* Columna 1 */
.areas-sectores__col--1 > .area-card--medioambiental
{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

.areas-sectores__col--1 > .areas-sectores__row--col-1-bottom
{
    flex-grow: 2;
    flex-shrink: 1;
    flex-basis: 0;
}

.areas-sectores__col--1 > .areas-sectores__row--col-1-bottom > .area-card
{
    flex: 2;
}

.area-card__inner .area-card__toggle
{
    margin-top: auto;
}

/* Fondo de cada tecnología */
.area-card--medioambiental
{
    --area-bg-image: url("/wp-content/uploads/2026/04/hozono-global-medioambiente-scaled.webp");
    background-color: #041E29;
    --area-overlay-color:#041E29;
    --area-overlay-opacity:.8;
}

.area-card--servicios-urbanos
{
    --area-bg-image: url("/wp-content/uploads/2026/04/hozono-global-servicios-urbanos.webp");
    background-color: #69C4EA;
    --area-overlay-color:#006680;
}

.area-card--reciclaje
{
    --area-bg-image: url("/wp-content/uploads/2026/04/hozono-global-reciclaje.webp");
    background-color: #CCDB12;
    --area-overlay-color:#CCDB12;
}

.area-card--construccion
{
    --area-bg-image: url("/wp-content/uploads/2026/04/hozono-global-construccion.webp");
    background-color: #006680;
    --area-overlay-color:#006680;
}

.area-card--promocion-inmobiliaria
{
    --area-bg-image: url("/wp-content/uploads/2026/08/hozono-global-area-promocion-inmobiliaria.webp");
    background-color: #041E29;
    --area-overlay-color:#041E29;
}
.area-card--promocion-inmobiliaria .area-card__icon img
{
    filter: brightness(0) invert(1);
    width: 90px;
    height: auto;
    max-width: inherit;
}
.area-card--energia
{
    --area-bg-image: url("/wp-content/uploads/2026/04/hozono-global-energia-scaled.webp");
    background-color: #041E29;
    --area-overlay-color:#041E29;
    flex-grow: 1;
}

.area-card--tecnologia
{
    --area-bg-image: url("/wp-content/uploads/2026/04/hozono-global-tecnologia.webp");
    background-color: #CCDB12;
    --area-overlay-color:#CCDB12;
}

.area-card--turismo
{
    --area-bg-image: url("/wp-content/uploads/2026/04/hozono-global-turismo.webp");
    background-color: #69C4EA;
    --area-overlay-color:#69C4EA;
}

.area-card--sanidad
{
    --area-bg-image: url("/wp-content/uploads/2026/04/hozono-global-sanidad.webp");
    background-color: #69C4EA;
    --area-overlay-color:#69C4EA;
}

.area-card--agua
{
    --area-bg-image: url("/wp-content/uploads/2026/04/hozono-global-agua-scaled.webp");
    background-color: #006680;
    --area-overlay-color:#006680;
}

/* Columna 3 */
.areas-sectores__row.areas-sectores__row--col-3-top
{
    flex: 1.6;
}
.areas-sectores__row.areas-sectores__row--col-3-top .area-card.area-card--energia
{
    width: 69%;
}
.areas-sectores__row.areas-sectores__row--col-3-top .area-card.area-card--tecnologia,
.areas-sectores__row.areas-sectores__row--col-3-top .area-card.area-card--tecnologia
{
    width: 100%;
}
.areas-sectores__row.areas-sectores__row--col-3-top .area-card.area-card--tecnologia .area-card__header .area-card__title
{
    color: #041E29;
}
.area-card.area-card--reciclaje .area-card__header .area-card__title
{
    color: #041E29;
}
.area-card.area-card--reciclaje .area-card__toggle, .area-card.area-card--tecnologia .area-card__toggle
{
    border-color: #041E29;
}
 .area-card.area-card--tecnologia.is-active .area-card__inner .area-card__content .area-card__text, .area-card.area-card--reciclaje.is-active .area-card__inner .area-card__content .area-card__text
{
    color:#041E29;
}
/* Columna 4 */
.areas-sectores__col--4 .area-card--sanidad
{
    flex: 2.3;
    min-width: auto;
}

.areas-sectores__col--4 .area-card--agua .area-card__inner
{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.areas-sectores__col--4 .area-card--agua
{
    flex: 1 1 0;
    padding-top: 17px;
    min-height: 0;
}
.areas-sectores__col--4 .area-card--agua .area-card__inner
{
    flex-direction: row;
}

/* Contenido oculto */
.area-card__content
{
    display: none;
}

.area-card__close
{
    display: none;
}

/* Botón + */
.area-card__toggle
{
    width: fit-content;
    border: 1px solid white;
    padding: 1rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    margin-left: auto;
    object-fit: cover;
}

.area-card__toggle img
{
    max-width: 30px;
    max-height: 30px;
    height: 100%;
    object-fit: cover;
}

/* Construcción */
.area-card--construccion .area-card__inner,
.area-card--construccion .area-card__inner
{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
}

.area-card--construccion .area-card__toggle,
.area-card--construccion .area-card__toggle
{
    margin-top: auto;
}

/* Estados de expansión (controlados por JS) */
.areas-sectores.is-expanded .areas-sectores__layout
{
    overflow: hidden;
}

.areas-sectores.is-expanded:not(.is-mobile-expanded) .areas-sectores__layout
{
    display: flex;
    align-items: stretch;
    gap: 0;
}

.areas-sectores.is-expanded:not(.is-mobile-expanded) .areas-sectores__col,
.areas-sectores.is-expanded:not(.is-mobile-expanded) .areas-sectores__row
{
    display: contents;
}

.areas-sectores.is-expanded:not(.is-mobile-expanded) .area-card
{
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    flex-basis: var(--puzzle-width, 100%);
    width: var(--puzzle-width, 100%);
    height: var(--puzzle-height, 100%);
    margin-top: var(--puzzle-top, 0px);
    margin-right: 0;
    margin-bottom: 0;
    margin-left: var(--puzzle-overlap, 0px);
    align-self: flex-start;
    outline: 1.5px solid #f1f1f1;
    outline-offset: -1.5px;
    overflow: hidden;
    transition:
        flex-basis .45s ease,
        width .45s ease,
        margin-top .45s ease,
        margin-left .45s ease,
        height .45s ease,
        filter .25s ease;
}

.areas-sectores.is-expanded .area-card__inner
{
    height: 100%;
}

.areas-sectores.is-expanded .area-card.is-active
{
    z-index: 3;
    padding: 0;
}

.areas-sectores.is-expanded .area-card.is-active .area-card__inner
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: clamp(24px, 2.2vw, 40px) clamp(20px, 2.2vw, 42px);
}

.areas-sectores.is-expanded .area-card.is-active .area-card__media
{
    opacity: 1;
    background-size: cover;
    background-position: center;
}

.areas-sectores.is-expanded .area-card.is-active .area-card__toggle
{
    display: none;
}

.areas-sectores.is-expanded .area-card.is-active .area-card__content
{
    display: block;
    margin-top: 18px;
    max-width: min(900px, 78%);
}

.areas-sectores.is-expanded .area-card .area-card__close
{
    display: none;
}

.areas-sectores.is-expanded .area-card.is-active .area-card__close
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: static;
    margin-top: auto;
    margin-left: auto;
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 1px solid #fff;
    background: transparent;
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
    color: #fff;
}
.areas-sectores.is-expanded .area-card.is-active .area-card__cta
{
  background-color: #FFFFFF;
  color: #006680;
  padding: 11px 29px;
  border-radius: 48px;
  font-family: "Spartan-Medium";
}
.areas-sectores.is-expanded .area-card.is-strip
{
    padding: 0;
    z-index: 1;
}

.areas-sectores.is-expanded .area-card.is-strip .area-card__header,
.areas-sectores.is-expanded .area-card.is-strip .area-card__content,
.areas-sectores.is-expanded .area-card.is-strip .area-card__media
{
    display: none;
}

.areas-sectores.is-expanded:not(.is-mobile-expanded) .area-card.is-strip .area-card__header
{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    min-height: 0;
    overflow: hidden;
}

.areas-sectores.is-expanded:not(.is-mobile-expanded) .area-card.is-strip .area-card__icon
{
    display: none;
}

.areas-sectores.is-expanded:not(.is-mobile-expanded) .area-card.is-strip .area-card__title
{
    margin: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    line-height: 1;
    font-size: clamp(11px, 0.8vw, 16px);
    max-height: 100%;
    text-overflow: ellipsis;
}

.areas-sectores.is-expanded .area-card.is-strip .area-card__inner
{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 4px 12px;
}

.areas-sectores.is-expanded .area-card.is-strip .area-card__toggle
{
    margin: 0;
    width: 38px;
    height: auto;
    padding: 0.5rem;
}

.areas-sectores.is-expanded:not(.is-mobile-expanded) .area-card.is-strip .area-card__inner
{
    justify-content: space-between;
    align-items: center;
    padding: 8px 2px 10px;
    flex-direction: column;
}

.areas-sectores.is-expanded .area-card.is-strip .area-card__toggle img
{
    max-width: 20px;
    max-height: 20px;
}

.areas-sectores.is-expanded.is-mobile-expanded .area-card
{
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
}

.areas-sectores.is-expanded.is-mobile-expanded .area-card + .area-card
{
    margin-top: 3px;
}

.areas-sectores.is-expanded.is-mobile-expanded .area-card:not(.is-active) .area-card__content
{
    display: none;
}

.areas-sectores.is-expanded.is-mobile-expanded .area-card.is-active .area-card__content
{
    display: block;
    margin-top: 16px;
}

.areas-sectores.is-expanded.is-mobile-expanded .area-card.is-active .area-card__close
{
    position: static;
    display: inline-flex;
    margin-top: 16px;
    margin-left: auto;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    font-size: 2rem;
}

.areas-sectores.is-expanded.is-mobile-expanded .area-card.is-active .area-card__toggle
{
    display: none;
}

.areas-sectores.is-expanded.is-mobile-expanded .area-card.is-strip
{
    padding-top: 35px;
    padding-bottom: 23px;
    padding-right: 30px;
    padding-left: 20px;
}

.areas-sectores.is-expanded.is-mobile-expanded .area-card.is-strip .area-card__header,
.areas-sectores.is-expanded.is-mobile-expanded .area-card.is-strip .area-card__media
{
    display: block;
}

.areas-sectores.is-expanded.is-mobile-expanded .area-card.is-strip .area-card__inner
{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
}

.areas-sectores.is-expanded.is-mobile-expanded .area-card.is-strip .area-card__toggle
{
    display: flex;
}

.areas-sectores.is-expanded.is-mobile-expanded .area-card.is-strip .area-card__toggle img
{
    max-width: 38px;
    max-height: 38px;
}
@media(width < 1235px)
{
    .areas-sectores
    {
        margin: 0 auto;
        margin-bottom: 70px;
    }
}
@media(width < 768px)
{
    .areas-sectores
    {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 70px;
    }
    .areas-sectores__layout
    {
        flex-direction: column;
    }
    .areas-sectores__col--4 .area-card--agua
    {
        flex: 1 1 auto;
        padding-top: 17px;
        min-height: inherit;
    }
    .areas-sectores__row.areas-sectores__row--col-3-top
    {
        flex-direction: column;
    }
    .areas-sectores__row.areas-sectores__row--col-3-top .area-card.area-card--energia
    {
        width: 100%;
    }
    .areas-sectores__col--1 > .areas-sectores__row--col-1-bottom
    {
        flex-grow: 1;
        flex-basis: auto;
        flex-direction: column;
    }
    .areas-sectores__layout .areas-sectores__col
    {
        height: auto;
    }
}