
/* mezcla 5-oct: el mapa de OOH lista las campañas (las fotos están en la galería, debajo) */
.omap__panel .omap__row{display:grid;gap:2px;width:100%;text-align:left;padding:12px 14px;margin:0 0 8px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font:inherit;cursor:zoom-in;transition:background .2s,border-color .2s}
.omap__panel .omap__row:hover,.omap__panel .omap__row:focus-visible{background:rgba(193,215,46,.14);border-color:var(--lime);outline:none}
.omap__row .omap__kick{font-size:13.5px;font-weight:700;color:var(--lime)}
.omap__row .omap__t{font-size:16px;font-weight:700;line-height:1.25}
.omap__row .omap__loc{font-size:14px;color:rgba(255,255,255,.72)}
.omap__row .omap__open{font-size:14px;font-weight:700;color:var(--lime);margin-top:4px}
/* home: «Nuestro trabajo» con tres tarjetas y la cinta de logos dentro de la banda de campañas */
.wks--3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.wks--3 .wk{grid-column:auto!important;grid-row:auto!important}
.band--ooh .lgs--ooh{margin:0 0 26px;border-top:0;padding-top:0}
@media (max-width:900px){.wks--3{grid-template-columns:1fr!important}}

/* ===== 5-oct (2): planificador en una caja, mapa sin texto tapado, secciones a sangre sin costuras ===== */
.op__form{background:#fff;border:1px solid rgba(0,23,68,.1);border-radius:26px;padding:clamp(18px,2.6vw,30px);box-shadow:0 18px 44px rgba(0,23,68,.08);display:grid;gap:0}
.op__form>*{padding:16px 0;border-bottom:1px solid rgba(0,23,68,.08)}
.op__form>*:first-child{padding-top:0}
.op__form>*:last-child{border-bottom:0;padding-bottom:0}
.op__form .op__row{border-bottom:1px solid rgba(0,23,68,.08)}
.op__form .op__row>*{padding:0;border:0}
.op__chip{min-height:44px}
.op__chip[aria-pressed=true],.op__chip.is-on{background:#001744;color:#fff;border-color:#001744}
.omap__panel::after{display:none!important}
.omap__panel{padding-bottom:22px;contain:none!important;overflow:visible!important;max-height:none!important;align-self:start!important}
.omap__panel .omap__row:last-child{margin-bottom:0}
.t-aigocy main{margin:0!important;border-radius:0!important;overflow:clip}
.hero--dark{border-radius:0!important}
.sec+.sec,.sec+.band,.band+.sec,.band+.band{margin-top:0!important}
@media (max-width:720px){
  .op__form{border-radius:20px;padding:18px 16px}
  .op__chip{font-size:14px;padding:8px 13px}
  .omap__panel{max-height:none;contain:none;overflow:visible}
}

button[class*=sound],[class*=sound] button{min-height:44px}
@media (max-width:420px){
  .feat-row{grid-template-columns:1fr!important}
  .dmtool{padding:16px!important}
  .dmtool .tl-a,.dmtool--calc>*{margin-left:0!important;margin-right:0!important;max-width:100%!important}
}
@media (max-width:720px){
  .cph__cap,.gc__k,.gc__l,.omap__kick,.omap__loc,.gal__f{font-size:14px!important}
  .cph__ai,.gc__live,.lgs__fine,.tl-k{font-size:13px!important}
  .crmf__col{padding:10px 5px!important}
  .crmf__col span{font-size:10.5px!important;letter-spacing:0!important;white-space:nowrap}
  .crmf__card{padding:8px 7px!important}
  .crmf__card b{font-size:12.5px}
}

/* ===== 5-oct (3) ===== */
/* formatos: icono, título y texto centrados */
.card.card--fmt{display:block!important;text-align:center}
.card--fmt .card__ic{display:grid!important;place-items:center;width:44px!important;height:44px!important;border-radius:50%!important;margin:0 auto 12px!important;padding:0!important}
/* mapa: la lista se queda dentro de su caja (desplazable) */
.omap{align-items:stretch!important}
.omap__panel{contain:size!important;overflow:auto!important;align-self:stretch!important;scrollbar-width:thin;scrollbar-color:rgba(193,215,46,.6) transparent}
.omap__panel .omap__row{padding:10px 14px}
.omap__svg .pin--off .pin__lab{font-weight:700}
/* planificador: menús desplegables */
.op__form fieldset{border:0;margin:0;min-width:0}
.op__form legend{padding:0;margin-bottom:8px;font-weight:700;color:#001744}
.op__dd{position:relative}
.op__ddb{width:100%;min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px;border-radius:14px;border:1px solid rgba(0,23,68,.18);background:#fff;color:#5C6478;font:inherit;font-size:15.5px;text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.op__dd.has-val .op__ddb{color:#001744;font-weight:600}
.op__ddb:hover,.op__dd.is-open .op__ddb{border-color:#001744}
.op__ddb:focus-visible{outline:3px solid #C1D72E;outline-offset:2px}
.op__ddb svg{width:20px;height:20px;flex:none;transition:transform .25s}
.op__dd.is-open .op__ddb svg{transform:rotate(180deg)}
.op__ddv{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op__ddl{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;display:grid!important;gap:2px;max-height:300px;overflow:auto;padding:6px;border-radius:14px;background:#fff;border:1px solid rgba(0,23,68,.14);box-shadow:0 18px 40px rgba(0,23,68,.16)}
.op__ddl[hidden]{display:none!important}
.op__ddl .op__chip{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:8px 12px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:#001744!important;box-shadow:none!important;font-size:15px!important;text-align:left;transform:none!important}
.op__ddl .op__chip:hover{background:#F2F4F8!important}
.op__ddl .op__chip::before{content:"";flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(0,23,68,.35);background:#fff center/14px no-repeat}
.op__dd:not(.op__dd--multi) .op__ddl .op__chip::before{border-radius:50%}
.op__ddl .op__chip[aria-pressed=true]::before,.op__ddl .op__chip.is-on::before{background-color:#001744;border-color:#001744;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C1D72E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.op__ddl .op__chip[aria-pressed=true],.op__ddl .op__chip.is-on{font-weight:700}
.op__row{grid-template-columns:1fr 1fr!important;gap:16px!important}
.op__sel{min-height:50px}
@media (max-width:720px){
  .hsl__dots{display:none!important}
  .hsl__foot{min-height:0}
  .op__row{grid-template-columns:1fr!important}
  .op__ddl{max-height:260px}
  .omap__panel{contain:none!important;overflow:visible!important}
  .omap__map{padding:8px!important}
}

/* «Pruébalo tú mismo»: la mano apunta hacia abajo, a la herramienta */
.try-on::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001744' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 24) scale(1 -1)'%3E%3Cpath d='M22 14a8 8 0 0 1-8 8'/%3E%3Cpath d='M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2'/%3E%3Cpath d='M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1'/%3E%3Cpath d='M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10'/%3E%3Cpath d='M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/%3E%3C/g%3E%3C/svg%3E")!important}

/* tarjetas con icono + título: el icono va a la altura de la PRIMERA línea del título, no estirado al alto de la fila */
.card>.card__ic{align-self:start!important;height:auto!important;min-height:0!important;margin-top:0!important;line-height:0}
.card>.card__ic .ic{display:block}
.card>h3{align-self:start;line-height:1.2}
@media (max-width:720px){.sec--why .cards .card h3,.card h3{min-height:0!important}}

/* calculadora de Google Ads: nada se sale de su caja */
.dmtool,.dmtool *{min-width:0}
.dmtool input,.dmtool select{width:100%;max-width:100%;box-sizing:border-box}
.tl-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){.tl-fields{grid-template-columns:minmax(0,1fr)}}

/* OOH «por qué con nosotros» (feat-row): círculo de 40 px, título centrado con el círculo, texto en la segunda columna */
.cards.feat-row .card{grid-template-columns:40px minmax(0,1fr)!important;column-gap:14px!important;row-gap:6px!important;align-items:center!important}
.cards.feat-row .card>.card__ic{grid-column:1!important;grid-row:1!important;width:40px!important;height:40px!important;align-self:center!important;margin:0!important}
.cards.feat-row .card>h3{grid-column:2!important;grid-row:1!important;align-self:center!important;min-height:0!important;margin:0!important}
.cards.feat-row .card>p{grid-column:2!important;grid-row:2!important}

/* ===== 8-oct · móvil menos cargado: carruseles deslizables, servicios en 2 columnas, listas compactas ===== */
.m-rail__nav{display:none}
@media (max-width:760px){
  /* carril deslizable: se ve la tarjeta siguiente asomando, para que se entienda que se desliza */
  .m-rail{display:flex!important;grid-template-columns:none!important;flex-wrap:nowrap!important;gap:12px!important;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:18px;
    margin-inline:-18px!important;padding:4px 18px 10px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .m-rail::-webkit-scrollbar{display:none}
  .m-rail>*{flex:0 0 84%!important;width:84%!important;max-width:none!important;min-width:0;scroll-snap-align:start;margin:0!important;grid-column:auto!important}
  .m-rail>.rv{opacity:1!important;transform:none!important;filter:none!important}
  .m-rail__nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
  .m-rail__bar{flex:1;height:3px;border-radius:3px;background:rgba(127,127,127,.22);overflow:hidden}
  .m-rail__bar i{display:block;height:100%;width:0;border-radius:3px;background:currentColor;transition:width .2s ease}
  .m-rail__btns{display:flex;gap:8px}
  .m-rail__b{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(127,127,127,.35);background:transparent;color:inherit;cursor:pointer}
  .m-rail__b:disabled{opacity:.35}
  .m-rail__b svg{width:18px;height:18px}
  .tex-dark .m-rail__nav,.sec--dark .m-rail__nav,.band .m-rail__nav{color:#fff}
  /* las tarjetas de sector y de trabajos, algo más bajas dentro del carril */
  .ind.m-rail .ind__card{height:400px!important}
  .wks.m-rail .wk__ph{max-height:300px}

  /* servicios pequeños de la home: dos columnas en vez de siete tarjetas apiladas */
  .tiles--4{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .tiles--4>.tile{padding:16px 14px!important;border-radius:22px!important;gap:0!important}
  .tiles--4>.tile .tile__ic{margin-bottom:10px!important}
  .tiles--4>.tile .tile__fam{font-size:13px!important;margin:0 0 4px!important;line-height:1.3}
  .tiles--4>.tile h3{font-size:17px!important;line-height:1.2!important;margin:0 0 6px!important}
  .tiles--4>.tile h3+p{font-size:14px!important;line-height:1.4!important;margin:0 0 10px!important}
  .tiles--4>.tile .more{margin-top:auto!important;font-size:14px}
  .tiles--4>.tile--span2{grid-column:1/-1!important}

  /* «Por qué»: una sola superficie con separadores, no cuatro cajas sueltas */
  .sec--why .cards:not(.feat-row){gap:0!important;background:#fff;border-radius:24px;padding:4px 20px;
    box-shadow:0 8px 16px rgba(0,0,0,.06),0 3px 3px rgba(0,0,0,.06)}
  .sec--why .cards:not(.feat-row)>.card{background:none!important;box-shadow:none!important;border-radius:0!important;padding:18px 0!important}
  .sec--why .cards:not(.feat-row)>.card+.card{border-top:1px solid rgba(0,23,68,.1)!important}
  .sec--why .cards.feat-row{gap:18px!important}

  /* pasos: el número al lado del título, sin aire vacío */
  .steps.m-rail .step{padding:24px!important}
  .steps.m-rail .step h3{margin-top:12px!important}

  /* formatos: tarjetas más bajas */
  .cards--fmt{gap:10px!important}
  .cards--fmt>.card{padding:16px 10px!important;min-height:0!important}
  .cards--fmt>.card h3{font-size:16px!important;line-height:1.25!important}

  /* formulario de contacto: menos aire entre campos */
  .lead{padding:18px!important}
  .lead .f+.f{margin-top:-4px}
  .lead input,.lead select{height:48px!important}
}
@media (max-width:760px){
  /* galería de campañas: en carril, con la primera igual que las demás */
  .gal__grid.m-rail>.gc{flex-basis:80%!important;width:80%!important}
  .gal__grid.m-rail>.gc .gc__ph{aspect-ratio:4/3!important;height:auto!important}
  .gal__grid.m-rail>.gc.is-first{grid-row:auto!important}
}
