@import url('/libros-corporativos/css/rectificaciones.css');
@import url('/escritura/css/portada-pestanas.css');
/* Communication uses the established timeline and editorial identity. */
footer::before{content:'Comunicación'}
.hero__editorial-line--one{font-size:clamp(32px,4.3vw,66px)}
.hero__editorial-line--two{font-size:clamp(34px,4.5vw,68px);margin-left:0}
.hero__editorial-line--three{font-size:clamp(23px,2.7vw,40px);line-height:1.15;margin-left:0}
.communication-audio{display:grid;gap:12px;max-width:520px;margin-bottom:28px}
.communication-audio audio{display:block;width:100%;height:42px}
.communication-original-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
.communication-original-gallery .loop-item{margin:0;overflow:hidden}
.communication-original-gallery img,.communication-original-gallery video{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line)}
.communication-original-gallery .loop-item-label{font-size:12px;color:var(--accent);line-height:1.5;margin-top:10px}
.communication-original-gallery .loop-link-btn{display:inline-flex;width:28px;height:28px;margin-top:8px;color:var(--accent)}
.communication-original-gallery .loop-link-btn svg{width:18px;height:18px}
#servicios .book-index__selectors{grid-template-columns:repeat(3,minmax(0,1fr))}
#servicios .book-index__page p{max-width:850px}
@media(max-width:900px){
.hero__editorial-line--one{font-size:clamp(27px,6.7vw,43px)}
.hero__editorial-line--two{font-size:clamp(30px,7.7vw,48px);line-height:1.06}
.hero__editorial-line--three{font-size:clamp(21px,5vw,30px)}
}
@media(max-width:760px){
.hero__editorial{padding-top:111px;min-height:301px}
.communication-original-gallery{grid-template-columns:1fr;gap:28px}
#servicios .book-index__number{font-size:clamp(40px,12vw,66px)}
#servicios .book-index__name{font-size:11px}
}

.communication-audio>.small-title{font-family:var(--font-editorial);font-size:24px;letter-spacing:0;text-transform:none;color:var(--accent)}.hero .communication-audio+.hero__actions{margin-top:22px;margin-bottom:32px}

/* A panoramic About banner, using the available compositions until replacement. */
#quien-soy .communication-about-picture{display:block;width:100%;aspect-ratio:1920/600;overflow:hidden}
#quien-soy .communication-about-picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:760px){#quien-soy .communication-about-picture{aspect-ratio:1080/600}}
/* Keep the concise mobile headline together; retain the existing supporting lines. */
@media(max-width:760px){
.hero__title .hero__editorial-line--one{white-space:nowrap;font-size:clamp(21px,5.9vw,43px);letter-spacing:-.065em}
.hero__title .hero__editorial-line--two{font-size:clamp(28px,7.3vw,44px);line-height:1.08}
.communication-original-gallery img,.communication-original-gallery video{aspect-ratio:1080/600}
}
/* Move the white opening number towards the timeline, clear of the headline. */
@media(min-width:901px){#hero .hero__editorial-number{transform:translate(calc(-1 * clamp(110px,11vw,180px)),-50%)}}
/* The opening zero masks the timeline through its interior on desktop. */
@media(min-width:901px){
#hero .hero__editorial-glyph--zero::before{content:'';position:absolute;inset:0 -5px;z-index:-1;background:#fff;border-radius:48%;filter:none}
}
/* Each project opens its complete image or video in an accessible lightbox. */
.portfolio-lightbox-trigger{display:block;position:relative;width:100%;padding:0;border:0;background:transparent;text-align:left;color:var(--accent);cursor:pointer;font:inherit}
.portfolio-lightbox-trigger>img,.portfolio-lightbox-trigger>video{pointer-events:none}
.portfolio-lightbox-cue{position:absolute;right:10px;bottom:10px;padding:7px 10px;background:rgba(255,255,255,.93);color:#3b4953;font-size:10px;line-height:1.4;letter-spacing:.025em;border:1px solid rgba(59,73,83,.14);backdrop-filter:blur(8px)}
.portfolio-lightbox-trigger:focus-visible{outline:2px solid #3b4953;outline-offset:5px}
.communication-lightbox{position:fixed;width:min(1120px,94vw);max-height:92svh;margin:auto;padding:18px 22px 15px;background:white;color:#3b4953;border:1px solid rgba(59,73,83,.2);box-shadow:0 24px 100px #0005;overflow:auto}
.communication-lightbox::backdrop{background:rgba(20,28,35,.82);backdrop-filter:blur(5px)}
.communication-lightbox__header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:14px}
.communication-lightbox__header h2{font:350 19px/1.4 var(--font-main);letter-spacing:-.02em;margin:0}
.communication-lightbox__close{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(59,73,83,.2);background:white;color:#3b4953;border-radius:50%;font:300 27px/1 var(--font-main);cursor:pointer}
.communication-lightbox__media{min-width:0;text-align:center;line-height:0}
.communication-lightbox__media img,.communication-lightbox__media video{display:block;width:auto;max-width:100%;height:auto;max-height:72svh;object-fit:contain;margin:auto}
.communication-lightbox__media video{width:100%;background:#111}
.communication-lightbox__hint{font:350 11px/1.5 var(--font-main);color:#64717a;margin:14px 0 0}
#servicios .book-index__pages{display:block}
#servicios .book-index__page{display:none}
#servicios .book-index__page.is-active{display:block}
@media(max-width:760px){#servicios>.chapter__body{padding-bottom:24px}.communication-lightbox{width:96vw;max-height:92svh;padding:12px}.communication-lightbox__header h2{font-size:16px}.communication-lightbox__media img,.communication-lightbox__media video{max-height:72svh}.portfolio-lightbox-cue{font-size:10px}}
/* Desktop lightbox reserves a separate column for editable project copy. */
.communication-lightbox{width:min(1280px,94vw)}
.communication-lightbox__layout{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(240px,1fr);gap:30px;align-items:center}
.communication-lightbox__description{font:350 14px/1.8 var(--font-main);color:#3b4953;padding:18px 10px 18px 24px;border-left:1px solid rgba(59,73,83,.18)}
.communication-lightbox__description p{margin:0 0 16px}
.communication-lightbox__description p:last-child{margin-bottom:0}
.portfolio-project-description[hidden]{display:none!important}
@media(max-width:760px){.communication-lightbox{width:96vw}.communication-lightbox__layout{display:block}.communication-lightbox__description{display:none}}