/*
Theme Name: gretabrandoffice-theme
Author: www.icarochaparrop.com
Author URI: www.icarochaparrop.com
Version: 04.26
.
General comments/License Statement if any.
.
*/

@font-face { font-family: 'Neue Haas Grotesk Display Pro'; src: url('fonts/Neue Haas Grotesk Display Pro/HaasGrotDisp-55Roman.woff') format('woff'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Neue Haas Grotesk Display Pro'; src: url('fonts/Neue Haas Grotesk Display Pro/HaasGrotDisp-75Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: block; }

:root {
    /* colors */
    --yellow: #EDE172; 
    --black: #0F0F0F;
    --white: #EBECE9;

    /* typography */
    --NHG55-extrasmall: 400 1rem/1.25 'Neue Haas Grotesk Display Pro', sans-serif;
    --NHG55-medium: 400 1.375rem/1.25 'Neue Haas Grotesk Display Pro', sans-serif;
    --NHG55-large: 400 2.5rem/1.125 'Neue Haas Grotesk Display Pro', sans-serif;
    --NHG55-extralarge: 400 4rem/1 'Neue Haas Grotesk Display Pro', sans-serif;
    --NHG75-medium: 700 1.5rem/1.25 'Neue Haas Grotesk Display Pro', sans-serif;
    --NHG75-large: 700 2rem/1.25 'Neue Haas Grotesk Display Pro', sans-serif;
    --NHG75-extralarge: 700 4rem/1 'Neue Haas Grotesk Display Pro', sans-serif;

    /* spacing */
    --xs: .25rem; 
    --s: .5rem; 
    --m: 1rem; 
    --l: 2rem; 
    --xl: 4rem;
    --xxl: 6rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
*::selection{background-color: var(--black); color: var(--white);}
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
img { display: block; }
body { background-color: var(--white); --bg: var(--white);overflow-x: hidden; }
body, body * { cursor: url('img/ico/cursor.svg') 0 0, auto !important; }
a, a *, [href], [href] * { cursor: url('img/ico/cursor-pointer.svg') 0 0, default !important; }
.header__icons, .header__icons * { cursor: url('img/ico/cursor-pointer.svg') 0 0, default !important; }
.footer__credit a, .footer__credit a * { cursor: url('img/ico/cursor-pointer.svg') 0 0, default !important; }
.office__slider-zone--prev, .office__slider-zone--prev * { cursor: url('img/ico/cursor-prev.png') 16 16, w-resize !important; }
.office__slider-zone--next, .office__slider-zone--next * { cursor: url('img/ico/cursor-next.png') 16 16, e-resize !important; }
h1, h2, h3, h4, h5, h6, p, li, span, button, input, textarea { font: var(--NHG55-medium); }
.is-office { background-color: var(--yellow); --bg: var(--yellow); }

main{min-height: calc(100dvh - 40px - 64px - 76px - 64px  )}

section:first-of-type{margin-top: calc(var(--xxl) * 2);}
section { margin-bottom: calc(var(--xxl) * 3); }

.link {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 100% 92.5%;
    background-repeat: no-repeat;
    background-size: 100% 1.75px;
    /* transition: background-size .3s ease-in-out; */
    font: var(--NHG55-medium);
}
.link:hover { background-size: 0% 1.75px; }

.btn { background: var(--black); color: var(--bg); padding: var(--m) var(--l); border-radius: 9999px; display: inline-block; border: 1.75px solid var(--black); transition: all 0s ease-in-out; font: var(--NHG55-medium); }
.btn:hover { background: transparent; color: var(--black); }

header { display: flex; align-items: center; justify-content: space-between; padding: var(--l); position: sticky; top: 0; z-index: 50; }
header.is-hidden { transform: translateY(-100%); }

.header__nav { display: flex; justify-content: space-between; width: 100%; }

.header__logo-img { display: none; height: auto; width: calc(100vw - var(--l) - var(--l) ); }
.header__logo-text { font: var(--NHG75-large); text-transform: uppercase; }

.header__links { display: flex; gap: var(--m); }
.header__links li { font: var(--NHG75-large); text-transform: uppercase;}

#menu-header { display: flex; align-items: center; gap: var(--l); }
#menu-header li a {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 0px;
}
#menu-header li a:hover { background-size: 100% 3.5px; }

.header__icons { display: flex; gap: var(--m); flex-direction: row; }

.header__icons svg { width: 36px; height: 36px;  transition: all .3s ease-in-out; flex-shrink: 0; }
.header__icons:hover { opacity: .5; }

.header__idiom { position: relative; display: inline-flex; width: 36px; height: 36px; flex-shrink: 0; }
.header__idiom-svg { width: 36px; height: 36px; }
.header__idiom-current, .header__idiom-other { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font: var(--NHG75-medium);font-size: 12px;  white-space: nowrap; pointer-events: none; }
.header__idiom-other { opacity: 0; }
.header__idiom:hover .header__idiom-current { opacity: 0; }
.header__idiom:hover .header__idiom-other { opacity: 1; pointer-events: auto; }
.header__idiom-other:hover { opacity: 1 !important; }

footer { display: flex; align-items: flex-end; justify-content: space-between; padding: var(--l);  }
footer p, footer li, footer a{ font:var(--NHG55-extrasmall) ;}

.footer__cols { display: flex; gap: var(--xl); align-items: flex-start; }

.footer__col { display: flex; flex-direction: column; gap: var(--s); }

.footer__col--info p:first-child { font-weight: 500; }

.footer__col ul { display: flex; flex-direction: column; gap: var(--s); }

.footer__col a {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 92.5%;
    background-repeat: no-repeat;
    background-size: 0% 0px;
}
.footer__col a:hover { background-size: 100% 0.75px; }

.footer__col--contact a,
.footer__col--social a { display: inline-flex; align-items: center; gap: 0.2em; background-image: none; }

.footer__credit { font: var(--NHG55-extrasmall); white-space: nowrap; text-align: end; display: flex; gap: var(--s); align-items: baseline; flex-direction: column ; align-items: end; opacity: .5; }

.work{padding: 0 var(--l); max-width: 1880px; margin: 0 auto; margin-bottom: var(--xxl); margin-top: var(--xxl);}
.work__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s); }
.work__card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: rgba(15,15,15,.025); transition: all .3s ease-in-out; }
.work__grid:has(.work__card:hover) .work__card:not(:hover) { opacity: .5; filter: saturate(0); }
.work__grid.has-playing .work__card:not(.is-playing) { opacity: .5; filter: saturate(0); }
.work__card-media { display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 3/4; }
.work__card-video, .work__card-image { width: 100%; height: auto; max-height: 87.5%; object-fit: cover; display: block; }
.work__card-image {object-fit: contain ;}
.work__card--locked { cursor: default; pointer-events: none; }
.work__card-cat-label { font: var(--NHG55-large); text-align: center; padding: var(--m); }
.work__card-info { display: flex; flex-direction: column; gap: 0; padding: var(--m); overflow: hidden; transition: all .3s ease-in-out; }
.work__card-cats { opacity: .5; }
.work__card-extra { display: flex; flex-direction: column; gap: var(--xs); max-height: 0; overflow: hidden; transform: translateY(8px); opacity: 0; transition: all .3s ease-in-out;}
.work__card:hover .work__card-extra { transform: translateY(0); opacity: 1; }

.office { max-width: 1024px; margin: 0 auto; }
.main-home{padding: 0 var(--l);}
.main-home{height: calc(100dvh - 40px - 64px - 76px - 64px  );display: flex ; align-items: center;}

.home__title{font: var(--NHG55-extralarge); font-size: 6.25vw ;text-wrap: pretty; width: 82.5%;}
.home__title strong{font: var(--NHG75-extralarge); font-size: 6.25vw }
.home__title-char { opacity: 0; font: inherit; }

.office__hero-title { font: var(--NHG55-extralarge); text-wrap: pretty; }
.office__hero-ctas , .single__last-ctas { display: flex; align-items: center; gap: var(--m); margin-top: var(--xl) ; justify-content: center; }
.single__last-ctas {margin-bottom: calc(var(--xxl) * 1.5);margin-top: 0;}
.office__hero-img { width: 100%; height: auto; margin-top: calc(var(--xxl) * 2); }

.office__servicios-grid { display: flex; gap: var(--l); }
.office__servicios-titulo { flex: 1; }
.office__servicios-col { display: flex; flex-direction: column; gap: calc( var(--l) + var(--m)); flex: 1; }
.office__servicios-grupo { display: flex; flex-direction: column; gap: var(--s); }
.office__servicios-grupo h3 { text-decoration: underline; }
.office__servicios-grupo p { white-space: pre-line; }

.office__feedback-header { display: flex; align-items: center; gap: var(--m); margin-bottom: var(--l); justify-content: space-between;}
.office__slider-counter-current { opacity: 1; }
.office__slider-counter-total { opacity: .5; }

.office__slider { position: relative; overflow: hidden; }
.office__slider-zone { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1; }
.office__slider-zone--prev { left: 0; }
.office__slider-zone--next { right: 0; }

.office__slide { display: none; gap: var(--l); width: 100%; }
.office__slide:first-of-type,
.office__slide.is-active { display: flex; align-items: center; }
.office__slide:has(.office__slide-img):first-of-type,
.office__slide:has(.office__slide-img).is-active { align-items: center; }
.office__slide-figure{display: flex; justify-content: center; flex: 0 0 160px;}
.office__slide-img { width: 100%; height: auto; object-fit: cover; filter: grayscale(1); aspect-ratio: 7/9; }
.office__slide-content { display: flex; flex-direction: column; gap: var(--l); }
.office__slide-texto{font:var(--NHG55-medium);text-wrap: pretty;}
.office__slide-texto::before { content: '\201C';font: var(--NHG55-medium); }
.office__slide-texto::after { content: '\201D';font: var(--NHG55-medium); }
.office__slide-author { display: flex; gap: var(--s); }
.office__slide-cliente::before { content: '\2014';font: var(--NHG55-medium);padding-right: var(--xs); }
.office__slide-cargo { opacity: .5; }

.office__feedback--large .office__slide-texto { font: var(--NHG55-large); text-wrap: pretty; }
.office__feedback--large .office__slide-texto::before { content: '\201C'; font: var(--NHG55-large); }
.office__feedback--large .office__slide-texto::after { content: '\201D'; font: var(--NHG55-large); }

.office__cta-textual {font: var(--NHG55-extralarge);text-wrap: pretty;}
.office__cta-textual .link{font: var(--NHG55-extralarge);background-size:100% 4px}
.office__cta-textual :hover { background-size: 0% 4px}

.header__toggle { display: none; position: fixed; bottom: var(--l); left: 50%; transform: translateX(-50%); z-index: 100; background: none; border: none; font: inherit; font: var(--NHG75-large); text-transform: uppercase; z-index: 999; color: inherit; }
body.menu-open .header__toggle,
body.menu-open .header__logo-img,
body.menu-open .header__links { color: var(--black); fill: var(--black); }
body.menu-open .header__logo-img { display: block; }

.menu-hover-overlay { display: none; position: fixed; inset: 0; z-index: 9999; pointer-events: none; align-items: center; justify-content: center; }
.menu-hover-overlay.is-visible { display: flex; }
.menu-hover-overlay__img { max-width: 100vw; max-height: 100vh; object-fit: contain; }

.entrada { max-width: 1024px; margin: 0 auto; }

.entrada__hero { display: flex; flex-direction: column; gap: var(--m); }
section.entrada__hero{margin-bottom: var(--m);}
.entrada__titular { font: var(--NHG55-extralarge); text-wrap: pretty; margin-bottom: var(--xl);}
.entrada__meta { display: flex; gap: var(--m); align-items: baseline; }
.entrada__categorias { opacity: .5; }
.entrada__hero-media { width: 100%; height: auto; }

.entrada__seccion { display: flex; flex-direction: column; gap: var(--l); }
.entrada__seccion-header { display: flex; gap: var(--xl); }
.entrada__seccion-titulo { flex: 1; opacity: .5; }
.entrada__seccion-cuerpo { flex: 2; white-space: pre-line; }

.entrada__galeria { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m); }
.entrada__galeria-img { width: 100%; height: auto; object-fit: cover; }
.entrada__galeria-img:nth-child(3n+1) { grid-column: 1 / -1; }

.entrada__cita { display: flex; flex-direction: column; gap: var(--l); }
.entrada__cita-texto { font: var(--NHG55-large); text-wrap: pretty; }
.entrada__cita-texto::before { content: '\201C'; font: var(--NHG55-large); }
.entrada__cita-texto::after { content: '\201D'; font: var(--NHG55-large); }
.entrada__cita-author { display: flex; gap: var(--s); align-items: baseline; }
.entrada__cita-autor::before { content: '\2014'; padding-right: var(--xs); }
.entrada__cita-cargo { opacity: .5; }

.entrada__info { display: flex; gap: var(--xl); }
.entrada__info-col { display: flex; flex-direction: column; gap: var(--m); flex: 1; }
.entrada__info-lista { white-space: pre-line; text-wrap: balance; }
.entrada__info-lista a{transition: all .3s ease-in-out;}
.entrada__info-lista a:hover{opacity: .5;}
.entrada__equipo-item { display: flex; gap: var(--s); }
.entrada__equipo-rol::after { content: '\2014'; padding-left: var(--xs); }
.entrada__equipo-nombre { opacity: .5; }

.entrada__contenido { display: flex; flex-direction: column; gap: var(--s); }
.entrada__contenido .wp-block-group,
.entrada__contenido .wp-block-columns { margin: 0 !important; }
.entrada__contenido figure { margin: 0; }
.entrada__contenido figure img,
.entrada__contenido figure video { width: 100%; height: 100%; object-fit: cover; display: block; }

.entrada__bloque-texto { display: flex; gap: var(--xl); padding: var(--xxl) 0; }
.wp-block-column p { margin-top: var(--s); text-indent: var(--xl); }
.wp-block-column p:first-child { margin-top: 0; text-indent: 0; }
.entrada__bloque-titulo { flex: 1; }
.entrada__bloque-cuerpo { flex: 2; white-space: pre-line; }

.entrada__video-slot { position: relative; width: 100%; aspect-ratio: 4/5; }
.entrada__video-slot iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.entrada__bloque-media--col-doble .entrada__video-slot { overflow: hidden; }
.entrada__bloque-media--izq-doble .wp-block-column:not(.entrada__bloque-media--col-doble) .entrada__video-slot,
.entrada__bloque-media--der-doble .wp-block-column:not(.entrada__bloque-media--col-doble) .entrada__video-slot { overflow: hidden; }
@media (min-width: 782px) {
    .wp-block-column .entrada__video-slot { flex: 1; min-height: 0; aspect-ratio: unset !important; display: flex; flex-direction: column; position: static; }
    .wp-block-column .entrada__video-slot iframe { position: static; flex: 1; min-height: 0; width: 100%; }
}

.entrada__bloque-media { gap: var(--s) !important; }
.entrada__bloque-media--1col img,
.entrada__bloque-media--1col video { width: 100%; height: 100%; object-fit: cover; display: block; }
.entrada__bloque-media--2col.wp-block-columns { gap: var(--s) !important; align-items: stretch; }
.entrada__bloque-media--2col .wp-block-column { overflow: hidden; display: flex; flex-direction: column; }
.entrada__bloque-media--2col .wp-block-column .wp-block-image,
.entrada__bloque-media--2col .wp-block-column .wp-block-video { flex: 1; min-height: 0; }
.entrada__bloque-media--2col .wp-block-column img,
.entrada__bloque-media--2col .wp-block-column video { width: 100%; height: 100%; object-fit: cover; display: block; }
.entrada__bloque-media--izq-doble.wp-block-columns,
.entrada__bloque-media--der-doble.wp-block-columns { gap: var(--s) !important; align-items: stretch; }
.entrada__bloque-media--izq-doble .wp-block-column,
.entrada__bloque-media--der-doble .wp-block-column { display: flex; flex-direction: column; gap: var(--s); overflow: hidden; min-height: 0; }
.entrada__bloque-media--col-doble .wp-block-image,
.entrada__bloque-media--col-doble .wp-block-video { flex: 1; min-height: 0; overflow: hidden; }
.entrada__bloque-media--col-doble .wp-block-image img,
.entrada__bloque-media--col-doble .wp-block-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.entrada__bloque-media--izq-doble .wp-block-column:not(.entrada__bloque-media--col-doble),
.entrada__bloque-media--der-doble .wp-block-column:not(.entrada__bloque-media--col-doble) { flex: 1; }
.entrada__bloque-media--izq-doble .wp-block-column:not(.entrada__bloque-media--col-doble) .wp-block-image,
.entrada__bloque-media--izq-doble .wp-block-column:not(.entrada__bloque-media--col-doble) .wp-block-video,
.entrada__bloque-media--der-doble .wp-block-column:not(.entrada__bloque-media--col-doble) .wp-block-image,
.entrada__bloque-media--der-doble .wp-block-column:not(.entrada__bloque-media--col-doble) .wp-block-video { flex: 1; min-height: 0; overflow: hidden; }
.entrada__bloque-media--izq-doble .wp-block-column:not(.entrada__bloque-media--col-doble) img,
.entrada__bloque-media--izq-doble .wp-block-column:not(.entrada__bloque-media--col-doble) video,
.entrada__bloque-media--der-doble .wp-block-column:not(.entrada__bloque-media--col-doble) img,
.entrada__bloque-media--der-doble .wp-block-column:not(.entrada__bloque-media--col-doble) video { width: 100%; height: 100%; object-fit: cover; display: block; }
.entrada__bloque-media .wp-block-video { margin: 0; }
.entrada__bloque-media .wp-block-video video { width: 100%; height: 100%; object-fit: cover; display: block; }

.entrada__cta { display: flex; justify-content: end; }




@media (max-width: 1260px) {
    .header__toggle { display: block; }
    .header__logo-text { display: none; }
    .header__logo-img { display: block; }
    .header__links { display: none; }
    body.menu-open header { z-index: 91; }
    body.menu-open .header__logo { position: relative; z-index: 92; display: block; }
    body.menu-open .header__logo-img { display: block; }
    body.menu-open .header__links {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        position: fixed;
        inset: 0;
        overflow-y: auto;
        padding: calc(var(--xxl) * 2) var(--l) var(--xxl);
        background: var(--yellow);
        z-index: 90;
    }
    body.menu-open #menu-header { flex-direction: column; align-items: flex-start; gap: calc(var(--m) + var(--s)); text-align: start; }

    .header__icons svg , .header__idiom, .header__idiom-svg { width: 42px; height: 42px; }
    .header__idiom-current, .header__idiom-other{font-size: 16px;}


    .entrada__bloque-media--izq-doble .wp-block-column,
    .entrada__bloque-media--der-doble .wp-block-column { min-height: auto; }
    .entrada__bloque-media--col-doble .wp-block-image { flex: none; }
    .entrada__bloque-media img,
    .entrada__bloque-media video { height: auto; }
}

@media (max-width: 1260px) {
    .work__grid { grid-template-columns: repeat(2, 1fr); }

    .office, .work, .main-home { padding: 0 var(--l); }
    .main-home{height: auto;}

    .office__servicios-grid { flex-direction: column; gap: var(--xl); }
    .office__servicios-titulo { flex: none; }
    .office__servicios-col { flex-direction: row; flex-wrap: wrap; gap: var(--xl); }
    .office__servicios-grupo { flex: 1; min-width: 40%; }

    .entrada { padding: 0 var(--l); }
    .entrada__seccion-header { flex-direction: column; gap: var(--m); }
    .entrada__seccion-titulo { opacity: .5; }
    .entrada__info { flex-direction: column; gap: var(--xl); }
}

@media (max-width: 860px) {
    footer { flex-direction: column; align-items: flex-start; gap: calc(var(--xxl) * 2); margin-top: var(--xxl); }
    .footer__cols { flex-wrap: wrap; column-gap: var(--l); row-gap: var(--xl); width: 100%;}
    .footer__col { flex: 1; }
    .footer__credit{align-items: start;}
}

@media (max-width: 680px) {

    .home__title { width: 100%; }

    .work__grid { grid-template-columns: 1fr; }

    .office__servicios-col { flex-direction: column; }
    .office__servicios-grupo { min-width: 100%; }

    .office__slide:has(.office__slide-img):first-of-type,
    .office__slide:has(.office__slide-img).is-active { grid-template-columns: 1fr; }
    .office__slide-author { flex-direction: column; gap: var(--xs); }

    .office__slide{flex-direction: column;}
    .office__slide-figure{max-width: 160px;}
    .office__slide-content {width: 100%;}

    .footer__col--social, .footer__col--contact { width: 100%; flex: none; }
}

@media (max-width: 480px) {
    .home__title { font: var(--NHG55-large);  font-size: 7.5vw}
    .home__title strong { font: var(--NHG75-large); font-size: 7.5vw }
    .office, .work, .main-home { padding: 0 var(--m); }
    .entrada { padding: 0 var(--m); }
    footer { padding: var(--m); }
    header { padding: var(--m); }
    .header__logo-img { width: calc(100vw - var(--m) - var(--m) ); }
}