/* 04.1 Integración — según la referencia: video a sangre con título grande, nota abajo a la izquierda y tres pilares. */
.intg{position:relative;z-index:2;display:flex;flex-direction:column;min-height:max(440px,calc(54.7vw - 120px));color:#fff;overflow:hidden;isolation:isolate;background:#10181b}
.intg__bg{position:absolute;inset:0;z-index:-2}
.intg__bg video{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.intg__tint{position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),linear-gradient(90deg,rgba(4,10,15,.12),rgba(4,10,15,0) 60%),linear-gradient(0deg,rgba(4,10,15,.22),rgba(4,10,15,0) 40%),rgba(4,10,15,.3)}
.intg .sec-bar{border-top:0}
.intg__title{margin:2vw var(--m) 0;max-width:15em;text-shadow:0 1px 40px rgba(4,10,15,.25)}   /* mismo tamaño (--t1) que «La ola como motor de valor» */
.intg__note{position:absolute;left:var(--m);bottom:3vw;max-width:37vw}
.intg__note>.cap{margin-bottom:12px}
.intg__note p:not(.cap){font:400 var(--t4)/1.55 var(--f-b);text-shadow:0 1px 14px rgba(4,10,15,.5)}

/* Pilares / Convivir / Surfista: formato 04.3 (.duo__c: encabezado con filete, bajada, lista numerada) en 3 columnas */
@media(min-width:1001px){.duo--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* encabezado, bajada y lista comparten filas entre las 3 columnas (primer renglón de cada lista a la misma altura) */
@media(min-width:1001px){@supports (grid-template-rows:subgrid){.duo--3{grid-template-rows:auto 1fr auto}.duo--3>.duo__c{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}.duo--3 .rows{margin-top:0}}}
.duo--3 .duo__p{max-width:34ch}
@media(max-width:1000px){.intg{min-height:max(440px,calc(max(78svh,560px) - 120px))}.intg__title{margin-top:28px;max-width:none}.intg__note{max-width:min(46ch,calc(100% - 2*var(--m)));bottom:28px}}
@media(max-width:600px){.intg__note{bottom:24px}}
@media(max-width:1000px){.intg__note br{display:none}}
@media(max-width:600px){.intg .sec-bar span:first-child{white-space:nowrap}.intg .sec-bar span:nth-child(2){text-align:right;white-space:nowrap}}
@media(max-width:420px){.intg .sec-bar span:nth-child(2){display:none}}