/* Adrián De Antoni · página de perfil de What's in Cabo (borrador 0.1.0, 2026-09-25). Base WIC (crema, navy, dorado, cromo; WIC Display + WIC Sans; arco y esquina de ficha) + capa de película hecha en código (grano, perforaciones de 35 mm, números de borde) solo en la sala de proyectos, las cintas separadoras y los marcos de póster. Nunca grano sobre crema. Todo cuelga de #wic-adr: un ID gana a las reglas del tema sin !important. Sin JS o con prefers-reduced-motion todo se ve completo y quieto; los deslizantes se desplazan a mano. */ @font-face { font-family:"WIC Display"; src:url("/partners-deck/mapa3d/fonts/fraunces-600.woff2") format("woff2"); font-display:swap; font-style:normal; font-weight:600; } @font-face { font-family:"WIC Display"; src:url("/partners-deck/mapa3d/fonts/fraunces-400i.woff2") format("woff2"); font-display:swap; font-style:italic; font-weight:400; } @font-face { font-family:"WIC Sans"; src:url("/partners-deck/mapa3d/fonts/switzer-400.woff2") format("woff2"); font-display:swap; font-style:normal; font-weight:400; } @font-face { font-family:"WIC Sans"; src:url("/partners-deck/mapa3d/fonts/switzer-600.woff2") format("woff2"); font-display:swap; font-style:normal; font-weight:600; } @font-face { font-family:"WIC Sans"; src:url("/partners-deck/mapa3d/fonts/switzer-700.woff2") format("woff2"); font-display:swap; font-style:normal; font-weight:700; } /* Nombre de Adrián en la cofirma «What's in Cabo × Adrián De Antoni» (Iván, 13-oct-2026): pidieron ITC Stone Sans II Pro Condensed Semibold «o variantes muy cercanas… que se vea su nombre un poco más National Geographic». Esa familia es de pago (Monotype) y no hay licencia web, así que va la variante LIBRE más cercana: PT Sans Narrow Bold (ParaType, licencia OFL), recortada a las letras del nombre (2 KB) y renombrada como pide su licencia (fuentes/LICENCIA-…txt). Si se compra la licencia de la Stone Sans, basta poner su .woff2 aquí. */ @font-face { font-family:"WIC Nombre"; src:url("/wp-content/mu-plugins/wic-adrian-de-antoni-assets/fuentes/wic-nombre-narrow-700.woff2") format("woff2"); font-display:swap; font-style:normal; font-weight:700; } /* El pie del tema es transparente arriba: arena con la textura de curvas, igual que el cierre de la página. */ body.wic-adrian-page { background-color:#f4efe6; background-image:url("/wp-content/mu-plugins/wic-beaches-landing-assets/wic-tex/wic-contour.webp"); background-size:260px 260px; } html:has(body.wic-adrian-page) { scroll-behavior:smooth; } #wic-adr { --crema:#FAF7F2; --arena:#F4EFE6; --sand:#ece4d8; --navy:#062C53; --navy2:#0a1f36; --tinta:#4a5d70; --dorado:#E8A24C; --oro:#b97f35; --teal:#006974; --cromo:#086380; --pelicula:#f7ead2; --serif:"WIC Display",Georgia,serif; --sans:"WIC Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --r:14px; --arco:999px 999px 14px 14px; --ficha:0 clamp(18px,2.9vw,44px) 0 0; --gut:32px; --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-.7'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"); --perf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='20' viewBox='0 0 22 20'%3E%3Crect x='6.5' y='3.5' width='9' height='13' rx='1.8'/%3E%3C/svg%3E"); --perfv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'%3E%3Crect x='3.5' y='6.5' width='13' height='9' rx='1.8'/%3E%3C/svg%3E"); --cab:89px; background:var(--crema); color:var(--navy); font:400 17px/1.7 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:clip; text-align:left; } #wic-adr *, #wic-adr *::before, #wic-adr *::after { box-sizing:border-box; } #wic-adr :where(h1,h2,h3,h4,p,ol,ul,li,figure,figcaption,form,label,small,blockquote,fieldset,legend,details,summary) { margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; letter-spacing:inherit; text-transform:none; list-style:none; } #wic-adr :where(b,strong) { font-weight:700; color:inherit; } #wic-adr :where(em) { font-style:italic; color:inherit; } #wic-adr :where(a) { color:inherit; text-decoration:none; border:0; box-shadow:none; } #wic-adr :where(a:hover,a:focus) { color:inherit; } #wic-adr :where(img) { display:block; max-width:100%; height:auto; border:0; border-radius:0; box-shadow:none; } #wic-adr :where(button,input,select,textarea) { font:inherit; color:inherit; } #wic-adr :where(h1,h2,h3,h4) { font-family:var(--serif); font-weight:600; letter-spacing:-.02em; line-height:1.06; color:var(--navy); } #wic-adr :where(h1,h2,h3) em { font-style:italic; font-weight:400; color:var(--oro); } /* Al saltar a una sección: debajo de la cabecera del sitio y de la barra pegajosa (adrian.js mide --margen). */ #wic-adr [id] { scroll-margin-top:var(--margen,150px); } #wic-adr :focus-visible { outline:3px solid var(--cromo); outline-offset:3px; } #wic-adr .screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } #wic-adr .adr-wrap { max-width:1256px; margin:0 auto; padding:0 var(--gut); width:100%; } #wic-adr .adr-sec { padding:clamp(64px,8vw,112px) 0; } #wic-adr .adr-sec h2 { font-size:clamp(34px,4.4vw,56px); margin:0 0 16px; } #wic-adr .adr-kicker { display:flex; align-items:center; gap:12px; margin:0 0 14px; font:700 12px/1.3 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--teal); } #wic-adr .adr-kicker::before { content:""; flex:none; width:28px; height:2px; border-radius:2px; background:var(--dorado); } #wic-adr .adr-lede { max-width:680px; font-size:clamp(17px,1.5vw,19.5px); line-height:1.65; color:var(--tinta); } #wic-adr .adr-h3 { font-size:clamp(24px,2.3vw,31px); margin:0 0 6px; } #wic-adr .adr-h3 span { white-space:nowrap; font:600 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--tinta); margin-left:10px; vertical-align:middle; } #wic-adr .adr-link { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:700; font-size:15px; color:var(--teal); border-bottom:0; } #wic-adr .adr-link:hover { color:var(--navy); text-decoration:underline; text-underline-offset:4px; } #wic-adr .adr-nota { display:inline-block; vertical-align:middle; margin:6px 0; background:#FFF6B8; color:#5a4a00; border:1px dashed #b99a00; border-radius:8px; padding:4px 9px; font:700 11.5px/1.35 var(--sans); letter-spacing:0; text-transform:none; font-style:normal; } /* ---------- botones (píldoras del sitio) ---------- */ #wic-adr .adr-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:13px 24px; border:1.5px solid transparent; border-radius:999px; font:700 15px/1.15 var(--sans); letter-spacing:.02em; text-align:center; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease; } #wic-adr .adr-btn:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(6,44,83,.18); } #wic-adr .adr-btn svg { flex:none; } #wic-adr .adr-btn--gold, #wic-adr .adr-btn--gold:hover { background:var(--dorado); color:var(--navy); } #wic-adr .adr-btn--ghost, #wic-adr .adr-btn--ghost:hover { background:rgba(6,44,83,.18); border-color:rgba(255,255,255,.85); color:#fff; } #wic-adr .adr-btn--navy, #wic-adr .adr-btn--navy:hover { background:var(--navy); color:#fff; } #wic-adr .adr-btn--chromo, #wic-adr .adr-btn--chromo:hover { background:var(--cromo); color:#fff; } #wic-adr .adr-btn--line, #wic-adr .adr-btn--line:hover { background:transparent; border-color:rgba(6,44,83,.3); color:var(--navy); } #wic-adr .adr-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; } /* ---------- crédito reutilizable «Photo: Adrián De Antoni» (11 px mínimo, fondo navy para cielos claros) ---------- */ .wic-credit-chip { position:absolute; left:12px; bottom:12px; z-index:2; display:inline-flex; align-items:center; padding:5px 10px; border-radius:999px; background:rgba(6,44,83,.74); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); font:700 11px/1.2 "WIC Sans",system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#fff; pointer-events:none; } .wic-credit-chip a { color:#fff; pointer-events:auto; text-decoration:underline; text-underline-offset:3px; } .wic-credit-line { font-size:13px; color:#4a5d70; } .wic-credit-line a { color:#006974; } /* ---------- película ---------- */ #wic-adr .adr-perf { position:absolute; left:-36px; right:-36px; z-index:4; height:16px; pointer-events:none; background:var(--hueco,var(--crema)); -webkit-mask:var(--perf) 0 0/18px 16px repeat-x; mask:var(--perf) 0 0/18px 16px repeat-x; will-change:transform; } /* Iván, 25-sep: «que la cinta esté corriendo». 18 px (un agujero) cada 0.6 s = 30 px/s; las letras van a la misma velocidad (adrian.js ajusta su duración). Solo corre en pantalla (.rueda). */ .adr-js #wic-adr .adr-cinta .adr-perf { animation:adr-rueda .6s linear infinite; animation-play-state:paused; } /* running con más especificidad que la regla de pausa de la portada (esa iba después y ganaba: nunca corrían). */ .adr-js #wic-adr .adr-hero.rueda .adr-perf, .adr-js #wic-adr .adr-cinta.rueda .adr-perf { animation-play-state:running; } @keyframes adr-rueda { from { transform:translate3d(0,0,0); } to { transform:translate3d(-18px,0,0); } } #wic-adr .adr-perf--t { top:5px; } #wic-adr .adr-perf--b { bottom:5px; } #wic-adr .adr-cinta::after { content:""; position:absolute; inset:-120px; z-index:1; pointer-events:none; background:var(--grano) 0 0/200px 200px; opacity:.2; mix-blend-mode:overlay; } .adr-js #wic-adr .adr-cinta.en-vista::after { animation:adr-grano 1s steps(6) 5; } @keyframes adr-grano { 0%{transform:translate3d(0,0,0)} 17%{transform:translate3d(-38px,21px,0)} 33%{transform:translate3d(27px,-44px,0)} 50%{transform:translate3d(-19px,-12px,0)} 67%{transform:translate3d(46px,33px,0)} 83%{transform:translate3d(-51px,40px,0)} 100%{transform:translate3d(0,0,0)} } /* Iván, 26-sep: 10 % más gruesa (52 → 57 px) y el degradado del header al revés: #062C53 → #086380. */ #wic-adr .adr-cinta { position:relative; isolation:isolate; overflow:hidden; height:57px; background:linear-gradient(90deg,#062C53 0%,#086380 100%); --hueco:var(--crema); } #wic-adr .adr-cinta .adr-perf { height:12px; -webkit-mask-size:18px 12px; mask-size:18px 12px; } #wic-adr .adr-cinta .adr-perf--t { top:3px; } #wic-adr .adr-cinta .adr-perf--b { bottom:3px; } #wic-adr .adr-cinta__txt { position:absolute; left:0; right:0; top:50%; z-index:2; transform:translateY(-50%); white-space:nowrap; overflow:hidden; font:700 10.5px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:rgba(247,234,210,.9); } #wic-adr .adr-cinta__txt b { margin-right:.6em; color:var(--dorado); font-weight:700; } #wic-adr .adr-cinta__rollo { display:inline-flex; will-change:transform; } #wic-adr .adr-cinta__rollo > span { flex:none; padding-right:0; } .adr-js #wic-adr .adr-cinta__rollo { animation:adr-rollo var(--rollo,40s) linear infinite; animation-play-state:paused; } .adr-js #wic-adr .adr-cinta.rueda .adr-cinta__rollo { animation-play-state:running; } @keyframes adr-rollo { from { transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } } /* ---------- portada: sin velo (Iván, 25-sep). La foto mide 132 % del ancho del marco: la marca Huella MAJA (empieza al 83 % del ancho) queda siempre fuera; la foto no se edita. PC: la gaviota y las ballenas arriba y el nombre abajo a la izquierda, sin taparlas; botones a la derecha. Hasta 1024 px: la foto completa arriba y el nombre en una banda del azul del mar, debajo. ---------- */ #wic-adr .adr-hero { position:relative; isolation:isolate; display:flex; align-items:flex-end; min-height:min(90vh,940px); overflow:hidden; background:#0b2c52; color:#fff; } #wic-adr .adr-hero__foto { position:absolute; inset:0; z-index:0; overflow:hidden; } #wic-adr .adr-hero__foto picture { position:absolute; top:0; bottom:0; left:0; width:132%; display:block; } #wic-adr .adr-hero__img { width:100%; height:100%; max-width:none; object-fit:cover; object-position:0% 100%; transform-origin:18% 72%; } .adr-js #wic-adr .adr-hero__img { transform:scale(1); transition:transform 20s linear; } .adr-js #wic-adr .adr-hero.is-on .adr-hero__img { transform:scale(1.05); } #wic-adr .adr-hero__body { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:20px 40px; padding-top:120px; padding-bottom:84px; text-shadow:0 2px 22px rgba(2,20,40,.6), 0 1px 3px rgba(2,20,40,.55); } #wic-adr .adr-hero__eyebrow { font:700 13px/1.3 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:#fff; } #wic-adr .adr-hero h1 { margin:12px 0 12px; font-size:clamp(50px,7.4vw,106px); line-height:.98; letter-spacing:-.035em; color:#fff; } #wic-adr .adr-hero__sub { max-width:760px; font:600 clamp(18px,1.7vw,23px)/1.4 var(--sans); color:#fff; } #wic-adr .adr-hero__sub em { font-family:var(--serif); font-weight:400; font-size:1.12em; color:#FFE3B3; } #wic-adr .adr-hero .adr-ctas { flex-direction:column; align-items:stretch; margin:0; } #wic-adr .adr-hero .adr-btn { text-shadow:none; } #wic-adr .adr-hero__credit { left:auto; right:16px; bottom:34px; } #wic-adr .adr-hero > .adr-nota { position:absolute; left:24px; top:16px; z-index:3; max-width:560px; margin:0; } #wic-adr .adr-hero .adr-perf { --hueco:var(--crema); z-index:3; } .adr-js #wic-adr .adr-hero .adr-perf { animation:adr-rueda .6s linear infinite; animation-play-state:paused; } /* ---------- Portada v2 (Iván, 28-sep): perforaciones arriba y abajo que corren, y un alto que deja ver la franja de logos en la primera pantalla (la gente no lee: que vea de entrada con quién ha trabajado). ---------- */ #wic-adr .adr-hero--v2 { min-height:clamp(440px, calc(100svh - var(--cab,89px) - 226px), 820px); } #wic-adr .adr-hero--v2 .adr-hero__body { padding-top:92px; padding-bottom:62px; } #wic-adr .adr-hero--v2 .adr-perf--t { top:5px; } /* ---------- Portada con video (Iván, 29-sep) ---------- */ #wic-adr .adr-hero--video .adr-hero__img, #wic-adr .adr-hero__video { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 50%; } .adr-js #wic-adr .adr-hero--video .adr-hero__img, .adr-js #wic-adr .adr-hero--video.is-on .adr-hero__img { transform:none; transition:none; } #wic-adr .adr-hero__video { z-index:1; opacity:0; transition:opacity .8s ease; background:transparent; } #wic-adr .adr-hero__video.corre { opacity:1; } #wic-adr .adr-hero--video .adr-hero__credit { z-index:3; } #wic-adr .adr-hero__pausa { position:absolute; z-index:3; left:16px; bottom:34px; display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:6px 12px; border:0; border-radius:999px; background:rgba(4,18,34,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font:600 12px/1.2 var(--sans); letter-spacing:.04em; color:#fff; cursor:pointer; } #wic-adr .adr-hero__pausa[hidden] { display:none; } #wic-adr .adr-hero__pausa::before { content:""; width:8px; height:10px; border-left:2.5px solid currentColor; border-right:2.5px solid currentColor; } #wic-adr .adr-hero__pausa[data-pausado="1"]::before { width:0; height:0; border:0; border-left:9px solid currentColor; border-top:5.5px solid transparent; border-bottom:5.5px solid transparent; } #wic-adr .adr-hero__pausa:focus-visible { outline:3px solid #FFE3B3; outline-offset:2px; } @media (min-width:1025px) { #wic-adr .adr-hero--v2.adr-hero--video .adr-hero__pausa { top:32px; bottom:auto; left:24px; } } @media (max-width:1024px) { #wic-adr .adr-hero__pausa { left:12px; bottom:12px; } } /* Menú de accesos con línea arriba y abajo (Iván, 28-sep). */ #wic-adr .adr-bar--v2 { border-top:1px solid rgba(6,44,83,.14); border-bottom-color:rgba(6,44,83,.14); } /* Galería unida: sin el espacio de abajo; el crédito va a la derecha, encima del último cuadro. */ #wic-adr .adr-gallery { position:relative; } #wic-adr .adr-mosaico__cred.adr-mosaico__cred--sobre { position:absolute; right:12px; bottom:12px; z-index:3; margin:0; padding:4px 10px; border-radius:999px; background:rgba(6,44,83,.62); font-size:12px; line-height:1.3; color:#fff; pointer-events:none; } @media (max-width:1023px) { #wic-adr .adr-mosaico__cred.adr-mosaico__cred--sobre { right:6px; bottom:6px; max-width:118px; padding:4px 8px; font-size:11px; line-height:1.25; text-align:right; border-radius:10px; } } @media (min-width:1280px) { #wic-adr .adr-mosaico__cred.adr-mosaico__cred--sobre { right:84px; } } /* Franja «Trusted by» justo debajo de la portada, antes del menú de accesos. */ #wic-adr .adr-logos--arriba { padding:clamp(20px,2.4vw,30px) 0 0; background:var(--crema); } #wic-adr .adr-logos__cab { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; gap:8px clamp(24px,4vw,56px); } #wic-adr .adr-logos--arriba .adr-logos__h { font-size:clamp(26px,2.45vw,36px); line-height:1.06; letter-spacing:-.025em; text-wrap:balance; } #wic-adr .adr-logos__sub { max-width:600px; padding-left:clamp(20px,2.4vw,32px); border-left:2px solid var(--dorado); font-size:15.5px; line-height:1.55; color:var(--tinta); } #wic-adr .adr-logos--arriba .adr-marquesina--logos { padding:10px 0 18px; } #wic-adr .adr-logos--arriba .adr-logo { height:84px; } @media (max-width:1024px) { #wic-adr .adr-hero { display:block; min-height:0; background:#062C53; } #wic-adr .adr-hero__foto { position:relative; inset:auto; height:clamp(300px,56svh,600px); } #wic-adr .adr-hero__img { object-position:0% 62%; } #wic-adr .adr-hero__body { grid-template-columns:minmax(0,1fr); gap:24px; padding-top:28px; padding-bottom:56px; text-shadow:none; } #wic-adr .adr-hero .adr-ctas { flex-direction:row; flex-wrap:wrap; } #wic-adr .adr-hero__credit { right:12px; bottom:12px; } #wic-adr .adr-hero > .adr-nota { position:static; display:block; margin:-24px 16px 44px; max-width:none; } } /* ---------- migas + accesos: se quedan PEGADOS arriba al bajar (Iván, 26-sep) y marcan la sección en la que vas. top lo pone adrian.js siguiendo el borde de la cabecera del tema, que se esconde al bajar. ---------- */ #wic-adr .adr-bar { position:sticky; top:0; z-index:40; background:rgba(250,247,242,.96); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid rgba(6,44,83,.1); transition:box-shadow .3s ease; } #wic-adr .adr-bar.pegada { box-shadow:0 8px 20px -14px rgba(6,44,83,.45); } #wic-adr .adr-migas-movil { display:none; } #wic-adr .adr-jump a.activo { color:var(--oro); box-shadow:inset 0 -2px 0 var(--dorado); border-radius:0; } #wic-adr .adr-bar__in { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 24px; min-height:56px; } #wic-adr .adr-crumbs { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--tinta); } #wic-adr .adr-crumbs a { display:inline-flex; align-items:center; min-height:44px; color:var(--teal); } #wic-adr .adr-crumbs a:hover { text-decoration:underline; } #wic-adr .adr-jump { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; } #wic-adr .adr-jump::-webkit-scrollbar { display:none; } #wic-adr .adr-jump a { flex:none; display:inline-flex; align-items:center; min-height:44px; padding:0 12px; font:700 13px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--navy); border-radius:999px; } #wic-adr .adr-jump a:hover { background:var(--arena); } #wic-adr .adr-jump a.activo:hover { background:transparent; } /* Tablet: los 7 accesos caben sin cortarse (601–900 px). */ @media (min-width:761px) and (max-width:900px) { #wic-adr .adr-jump a { padding:0 7px; letter-spacing:.03em; font-size:12.5px; } } /* ---------- deslizantes (scroll-snap; flechas y contador con JS) ---------- */ #wic-adr .adr-ctrl { display:flex; align-items:center; gap:14px; margin-top:16px; } #wic-adr .adr-ctrl[hidden] { display:none; } #wic-adr .adr-ctrl__b { display:grid; place-items:center; width:46px; height:46px; padding:0; border:1.5px solid rgba(6,44,83,.22); border-radius:50%; background:#fff; color:var(--navy); cursor:pointer; transition:background-color .2s ease, color .2s ease, opacity .2s ease; } #wic-adr .adr-ctrl__b:hover { background:var(--navy); color:#fff; } #wic-adr .adr-ctrl__b:disabled { opacity:.35; cursor:default; background:#fff; color:var(--navy); } #wic-adr .adr-ctrl__n { font:600 13px/1 var(--sans); letter-spacing:.14em; color:var(--tinta); font-variant-numeric:tabular-nums; } #wic-adr .adr-ctrl__n b { color:var(--navy); } #wic-adr .adr-ctrl__prog { display:block; width:120px; height:3px; border-radius:2px; background:rgba(6,44,83,.14); overflow:hidden; } #wic-adr .adr-ctrl__prog i { display:block; height:100%; background:var(--dorado); transform:scaleX(0); transform-origin:0 50%; } #wic-adr .adr-ctrl__prog.corre i { animation:adr-llena var(--intervalo,4s) linear forwards; } /* ---------- About ---------- */ /* La columna de fotos + «What he does» se queda fija mientras se lee la bio (Iván, 25-sep), solo si cabe en la pantalla. */ /* El arco se achica con la altura de la pantalla para que foto + servicios quepan juntos. */ #wic-adr .adr-retratos__tira { display:flex; height:100%; will-change:transform; } #wic-adr .adr-retrato { position:relative; flex:0 0 100%; height:100%; margin:0; } .adr-js #wic-adr .adr-retratos__tira.anima { transition:transform .9s cubic-bezier(.65,0,.25,1); } #wic-adr .adr-retratos__barras { display:flex; gap:6px; width:min(100% - 7px, max(250px, calc((100vh - var(--cab) - 400px) * .8))); margin-top:12px; } #wic-adr .adr-retratos__barras[hidden] { display:none; } #wic-adr .adr-barra { flex:1; height:22px; padding:9px 0; border:0; background:none; cursor:pointer; } #wic-adr .adr-barra i { display:block; height:3px; border-radius:2px; background:rgba(6,44,83,.16); overflow:hidden; position:relative; } #wic-adr .adr-barra i::after { content:""; position:absolute; inset:0; background:var(--dorado); transform:scaleX(0); transform-origin:0 50%; } #wic-adr .adr-barra.vista i::after { transform:scaleX(1); } #wic-adr .adr-barra.actual i::after { animation:adr-llena var(--intervalo,3.5s) linear forwards; } #wic-adr .adr-retratos.pausa .adr-barra.actual i::after { animation-play-state:paused; } @keyframes adr-llena { from { transform:scaleX(0); } to { transform:scaleX(1); } } #wic-adr .adr-bio { max-width:66ch; } #wic-adr .adr-bio p { margin:0 0 1.05em; font-size:17px; line-height:1.72; color:var(--tinta); } #wic-adr .adr-bio .adr-bio__lead { font-size:clamp(19px,1.6vw,21px); line-height:1.6; color:var(--navy); } #wic-adr .adr-bio em { color:var(--navy); } #wic-adr .adr-quote { margin:30px 0 30px; padding:4px 0 4px 22px; border-left:3px solid var(--dorado); } #wic-adr .adr-quote p { margin:0; font:400 italic clamp(24px,2.4vw,32px)/1.3 var(--serif); color:var(--navy); } #wic-adr .adr-hace { margin-top:22px; } #wic-adr .adr-hace .adr-h3 { font-size:22px; margin-bottom:8px; } #wic-adr .adr-servicios { display:grid; grid-template-columns:1fr; gap:0; } #wic-adr .adr-servicios li { position:relative; padding:8px 0 8px 18px; border-top:1px solid rgba(6,44,83,.12); font-size:13.5px; line-height:1.45; color:var(--tinta); } #wic-adr .adr-servicios li::before { content:"▸"; position:absolute; left:0; top:8px; color:var(--dorado); } #wic-adr .adr-servicios b { color:var(--navy); } /* ---------- Projects (Iván, 26-sep): fondo D04 «Secciones de cardón» de la biblioteca (cover, sin repetir, papel #f5f1e8) + carrete de película vertical: baja entero (póster y perforaciones) y sigue sin regresar. ---------- */ #wic-adr .adr-projects { position:relative; } #wic-adr .adr-projects__top { padding:clamp(64px,8vw,112px) 0 clamp(64px,8vw,104px); background-color:#f5f1e8; background-image:url("/partners-deck/herramientas/texturas/cardon-cross-sections-exact.webp"); background-position:center; background-repeat:no-repeat; background-size:cover; } #wic-adr .adr-projects h2 { font-size:clamp(34px,4.4vw,56px); margin:0 0 16px; } #wic-adr .adr-projects .adr-lede { margin-bottom:44px; } #wic-adr .adr-carrete { --cw:340px; --ch:calc((var(--cw) - 60px) * 1.4141 + 46px); display:grid; grid-template-columns:var(--cw) minmax(0,1fr); grid-template-areas:"ventana textos" "ventana ctrl"; column-gap:clamp(28px,5vw,80px); row-gap:18px; align-items:center; } #wic-adr .adr-carrete__ventana { grid-area:ventana; position:relative; width:var(--cw); height:var(--ch); overflow:hidden; border-radius:4px; background:var(--navy2); box-shadow:0 30px 60px -24px rgba(6,44,83,.55); } #wic-adr .adr-carrete__tira { will-change:transform; } .adr-js #wic-adr .adr-carrete__tira.anima { transition:transform 1s cubic-bezier(.65,0,.25,1); } #wic-adr .adr-cuadro { position:relative; height:var(--ch); padding:12px 30px 34px; background:var(--navy2); box-shadow:inset 0 -2px 0 #050e18; } #wic-adr .adr-cuadro::before, #wic-adr .adr-cuadro::after { content:""; position:absolute; top:0; bottom:0; width:16px; background:rgba(247,234,210,.92); -webkit-mask:var(--perfv) 0 2px/16px 18px repeat-y; mask:var(--perfv) 0 2px/16px 18px repeat-y; } #wic-adr .adr-cuadro::before { left:7px; } #wic-adr .adr-cuadro::after { right:7px; } #wic-adr .adr-cuadro__poster { height:100%; border-radius:3px; overflow:hidden; background:#0d2238; } #wic-adr .adr-cuadro__poster img { width:100%; height:100%; object-fit:cover; } #wic-adr .adr-cuadro__n { position:absolute; left:30px; right:30px; bottom:12px; display:flex; justify-content:space-between; font:600 9px/1 var(--sans); letter-spacing:.22em; color:rgba(247,234,210,.72); } #wic-adr .adr-cuadro__n b { color:var(--dorado); } #wic-adr .adr-carrete__textos { grid-area:textos; } #wic-adr .adr-carrete__txt + .adr-carrete__txt { margin-top:36px; padding-top:36px; border-top:1px solid rgba(6,44,83,.12); } #wic-adr .adr-carrete.listo .adr-carrete__textos { display:grid; } #wic-adr .adr-carrete.listo .adr-carrete__txt { grid-area:1 / 1; margin:0; padding:0; border:0; opacity:0; visibility:hidden; transform:translate3d(0,-16px,0); transition:opacity .45s ease, transform .6s ease, visibility 0s linear .6s; } #wic-adr .adr-carrete.listo .adr-carrete__txt.activa { opacity:1; visibility:visible; transform:none; transition:opacity .7s ease .25s, transform .8s cubic-bezier(.2,.7,.2,1) .25s, visibility 0s; } #wic-adr .adr-carrete .adr-ctrl { grid-area:ctrl; align-self:start; margin-top:0; } #wic-adr .adr-poster__cat { font:700 12px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--teal); } #wic-adr .adr-poster__t { margin:12px 0 10px; font-size:clamp(32px,3.6vw,52px); } #wic-adr .adr-poster__meta { font:600 14px/1.5 var(--sans); color:var(--navy); } #wic-adr .adr-poster__d { margin-top:14px; max-width:58ch; font-size:17px; line-height:1.7; color:var(--tinta); } #wic-adr .adr-poster__links { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; } /* ---------- la sala (Renan Ozturk): foto fija a pantalla completa; lo que se desliza son los títulos. Solo los proyectos que NO están en el carrete, cada uno con una foto real de Adrián de un lugar relacionado (Iván, 26-sep). Las fotos verticales se ven completas a la derecha sobre su propio desenfoque. Sin película aquí. ---------- */ #wic-adr .adr-sala { position:relative; background:#0a1520; color:#fff; } /* Pegada arriba del todo: la cabecera del tema se esconde al bajar (con top:var(--cab) quedaba una franja oscura). */ #wic-adr .adr-sala__escena { position:sticky; top:0; height:100vh; overflow:hidden; background:#0a1520; } #wic-adr .adr-sala__capa { position:absolute; inset:0; opacity:0; transition:opacity .9s ease; } #wic-adr .adr-sala__foto { width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 50%; } #wic-adr .adr-sala__capa.on { opacity:1; } #wic-adr .adr-sala__escena.tenue .adr-sala__capa.on { opacity:.28; } #wic-adr .adr-sala__alta { overflow:hidden; } #wic-adr .adr-sala__difuso { position:absolute; inset:-60px; width:calc(100% + 120px); height:calc(100% + 120px); max-width:none; object-fit:cover; filter:blur(40px) saturate(1.12) brightness(.62); } #wic-adr .adr-sala__nitida { position:absolute; right:clamp(24px,8vw,150px); top:50%; width:auto; height:min(86%,780px); max-width:none; transform:translateY(-50%); border-radius:var(--ficha); box-shadow:0 40px 80px -30px rgba(0,0,0,.7); } #wic-adr .adr-sala__escena::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,rgba(6,16,28,.72) 0%,rgba(6,16,28,.44) 38%,rgba(6,16,28,.08) 70%,rgba(6,16,28,0) 100%); } #wic-adr .adr-sala__cap { position:absolute; right:20px; bottom:18px; z-index:2; max-width:min(440px,70%); padding:6px 11px; border-radius:999px; background:rgba(6,16,28,.66); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); font-size:12px; line-height:1.35; color:#fff; opacity:0; transition:opacity .4s ease; } #wic-adr .adr-sala__cap.on { opacity:1; } @media (min-width:761px) { #wic-adr .adr-sala__cap { right:84px; } } /* lejos del botón «volver arriba» del tema */ #wic-adr .adr-sala__lista { position:relative; z-index:1; margin-top:-100vh; padding:16vh 0 30vh; } #wic-adr .adr-sala__creditos { display:none; margin:5vh 0 0; font-size:12px; line-height:1.5; color:rgba(255,255,255,.78); } #wic-adr .adr-sala__h { margin:0 0 12px; font-size:clamp(38px,4.6vw,64px); color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.45); } #wic-adr .adr-sala__h em { color:#f0c989; } #wic-adr .adr-sala__sub { max-width:560px; margin-bottom:5vh; font-size:16.5px; line-height:1.6; color:rgba(255,255,255,.88); text-shadow:0 1px 10px rgba(0,0,0,.55); } #wic-adr .adr-sala__cat { margin:8vh 0 1vh; font:700 12px/1.3 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--dorado); text-shadow:0 1px 8px rgba(0,0,0,.5); } #wic-adr .adr-sala__cat span { color:rgba(255,255,255,.7); margin-left:6px; } #wic-adr .adr-row { max-width:720px; } #wic-adr .adr-row summary { display:grid; grid-template-columns:44px minmax(0,1fr); gap:0 14px; align-items:baseline; padding:3.6vh 0; cursor:pointer; list-style:none; } #wic-adr .adr-row summary::-webkit-details-marker { display:none; } #wic-adr .adr-row__n { grid-row:1 / span 2; font:600 12px/1.8 var(--sans); letter-spacing:.16em; color:var(--dorado); } #wic-adr .adr-row__tags { font:600 11px/1.45 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.82); text-shadow:0 1px 8px rgba(0,0,0,.55); } #wic-adr .adr-row__t { margin-top:6px; font:600 clamp(28px,3.2vw,46px)/1.08 var(--serif); letter-spacing:-.02em; color:rgba(255,255,255,.5); text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:.24em; text-shadow:0 2px 20px rgba(0,0,0,.45); transition:color .4s ease, text-decoration-color .4s ease; } #wic-adr .adr-row.lit .adr-row__t, #wic-adr .adr-row summary:focus-visible .adr-row__t, #wic-adr .adr-row[open] .adr-row__t { color:#fff; text-decoration-color:var(--dorado); } #wic-adr .adr-row summary:focus-visible { outline-color:var(--dorado); } #wic-adr .adr-row__body { padding:0 0 3vh 58px; max-width:680px; } #wic-adr .adr-row__body p { font-size:16px; line-height:1.7; color:rgba(255,255,255,.92); text-shadow:0 1px 10px rgba(0,0,0,.6); } #wic-adr .adr-row__links { display:flex; flex-wrap:wrap; gap:4px 20px; margin-top:8px; } #wic-adr .adr-row__links a { display:inline-flex; align-items:center; min-height:44px; font-weight:700; font-size:14.5px; color:#f5c985; } #wic-adr .adr-row__links a:hover { color:#fff; text-decoration:underline; text-underline-offset:4px; } /* ---------- Press (Iván, 26-sep: «más movimiento, se ve muy plano»): banda salvia (1 de 2 permitidas), laureles que se dibujan al entrar y dos cintas de recortes que corren en sentidos opuestos. ---------- */ #wic-adr .adr-press { background:linear-gradient(180deg,#F4EFE6 0%,#DCE7E3 46%,#DCE7E3 60%,#F4EFE6 100%); } /* Reconocimientos (maqueta de Iván «animacion-reconocimientos-v6», 26-sep): 4 columnas con escena animada, año grande, recorrido con punto dorado que salta de 01 a 04 cada 3.2 s. 2025 aplauso = dos manos «clap clap»; 2026 = corte de listón. Celular: apiladas y se enciende la que cruza el centro de la pantalla. */ #wic-adr .adr-press__top { display:grid; grid-template-columns:1.25fr .75fr; gap:28px; align-items:end; margin-bottom:34px; } #wic-adr .adr-press__top h2 { margin:0; } #wic-adr .adr-press__intro { font-size:15.5px; line-height:1.6; color:var(--tinta); } #wic-adr .adr-rec { --rr:rgba(6,44,83,.18); } #wic-adr .adr-rec__item { position:relative; display:flex; flex-direction:column; min-width:0; padding:24px 22px 26px; border-left:1px solid var(--rr); cursor:pointer; transition:background-color .45s ease, transform .45s ease, box-shadow .45s ease; } #wic-adr .adr-rec__item:last-child { border-right:1px solid var(--rr); } #wic-adr .adr-rec__item::after { content:""; position:absolute; left:22px; bottom:0; width:54px; height:3px; background:var(--cromo); transform:scaleX(0); transform-origin:0 50%; transition:transform .45s ease; } #wic-adr .adr-rec__item.is-activa { background:#fff; transform:translateY(-5px); box-shadow:0 22px 40px -28px rgba(6,44,83,.45); } #wic-adr .adr-rec__item.is-activa::after { transform:scaleX(1); } #wic-adr .adr-rec__anio { margin-bottom:18px; font:600 42px/1 var(--serif); color:rgba(6,44,83,.3); transition:color .45s ease; } #wic-adr .adr-rec__item.is-activa .adr-rec__anio { color:var(--oro); } /* trofeo + confeti */ /* boleto + destellos */ /* aplauso: dos manos que chocan «clap clap» (dos golpes y pausa), con el golpe y la palabra en cada choque */ /* listón (2026, inauguración de la muestra; Iván, 26-sep): tijeras entran, cortan al centro, las mitades caen y se rearma. Ciclo de 3.4 s. Quieto (sin JS, movimiento reducido o tarjeta no activa): cinta entera y tijeras en reposo. */ /* tijeras: volteadas (mangos a la derecha, puntas a la izquierda); las hojas giran sobre el eje (12,12) para cortar */ /* Al cortar, cada mitad se encoge hacia su poste y queda colgando: las puntas se separan (se lee «cortado», no «cuerda floja»). */ /* recorrido */ #wic-adr .adr-rec__lleno { position:absolute; left:0; top:33.5px; width:12.5%; height:2px; background:var(--dorado); transition:width .7s cubic-bezier(.25,.85,.25,1); } #wic-adr .adr-rec__punto { position:absolute; left:12.5%; top:26px; z-index:1; width:18px; height:18px; border:3px solid #f3f0e9; border-radius:50%; background:var(--dorado); transform:translateX(-50%); transition:left .7s cubic-bezier(.25,.85,.25,1); } #wic-adr .adr-rec__punto.salta { animation:adr-salto .7s cubic-bezier(.25,.85,.25,1); } @keyframes adr-salto { 0% { margin-top:0; } 45% { margin-top:-9px; transform:translateX(-50%) scale(1.25); } 100% { margin-top:0; transform:translateX(-50%); } } #wic-adr .adr-rec__estado { font-size:12.5px; color:var(--tinta); } #wic-adr .adr-rec__play { min-height:44px; padding:0 4px; border:0; background:none; font:700 13px/1 var(--sans); color:var(--teal); cursor:pointer; } #wic-adr .adr-rec__play:hover { text-decoration:underline; text-underline-offset:4px; } /* Más reconocimientos en texto (FICCMa, FEICCA, premios…) */ /* Siempre simétrico (Iván, 26-sep): 4 en una fila; en pantallas medianas, 2 + 2. En celular va la lista sencilla. */ @media (max-width:900px) { #wic-adr .adr-press__top { grid-template-columns:1fr; gap:12px; align-items:start; } #wic-adr .adr-rec__item { border-bottom:1px solid var(--rr); } #wic-adr .adr-rec__item:nth-child(2) { border-right:1px solid var(--rr); } } @media (max-width:600px) { #wic-adr .adr-rec__item { border-left:0; border-right:0 !important; padding:20px 4px 22px; } #wic-adr .adr-rec__item.is-activa { padding-left:14px; padding-right:14px; } #wic-adr .adr-rec__item::after { left:14px; } #wic-adr .adr-rec__anio { font-size:36px; margin-bottom:12px; } } #wic-adr .adr-press__head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 24px; margin:clamp(48px,6vw,72px) 0 18px; } #wic-adr .adr-press__hint { font-size:14.5px; color:var(--tinta); max-width:560px; } /* Cintas que corren (marquesina): JS duplica el contenido; -50 % = una vuelta exacta (margen a la derecha, no gap). */ #wic-adr .adr-marquesina { position:relative; overflow:hidden; padding:10px 0 22px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); } #wic-adr .adr-marquesina__pista { display:flex; width:max-content; margin:0; padding:0 0 0 var(--gut); list-style:none; will-change:transform; } #wic-adr .adr-marquesina__pista > * { flex:none; margin-right:22px; } .adr-js #wic-adr .adr-marquesina.listo .adr-marquesina__pista { padding-left:0; animation:adr-marq var(--dur,60s) linear infinite; animation-play-state:paused; } .adr-js #wic-adr .adr-marquesina.listo[data-dir="derecha"] .adr-marquesina__pista { animation-direction:reverse; } .adr-js #wic-adr .adr-marquesina.listo.corre .adr-marquesina__pista { animation-play-state:running; } @keyframes adr-marq { from { transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } } #wic-adr .adr-marquesina:not(.listo) { overflow-x:auto; -webkit-mask-image:none; mask-image:none; } #wic-adr .adr-clip { width:380px; display:flex; flex-direction:column; border-radius:var(--r); background:#fff; border:1px solid rgba(6,44,83,.08); overflow:hidden; box-shadow:0 16px 34px -26px rgba(6,44,83,.5); transition:transform .3s ease; } #wic-adr .adr-clip:hover { transform:translateY(-4px); } #wic-adr .adr-clip__shot { position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:#eef1f4; border-bottom:1px solid rgba(6,44,83,.08); } #wic-adr .adr-clip__shot img { width:100%; height:100%; object-fit:cover; object-position:50% 0; transition:transform .5s ease; } #wic-adr .adr-clip__shot:hover img { transform:scale(1.03); } #wic-adr .adr-clip__body { display:flex; flex-direction:column; gap:8px; padding:16px 18px 8px; flex:1; } #wic-adr .adr-clip__medio { font-size:12.5px; line-height:1.4; letter-spacing:.02em; color:var(--tinta); } #wic-adr .adr-clip__medio b { color:var(--navy); } #wic-adr .adr-clip__t { flex:1; font:600 19px/1.3 var(--serif); color:var(--navy); } #wic-adr .adr-gob__item { width:520px; } #wic-adr .adr-gob__shot { position:relative; display:block; aspect-ratio:1280/390; overflow:hidden; border-radius:10px; background:#1c1f24; box-shadow:0 12px 26px -16px rgba(6,44,83,.55); transition:transform .3s ease; } #wic-adr .adr-gob__shot:hover { transform:translateY(-3px); } #wic-adr .adr-gob__shot img { width:100%; height:100%; object-fit:cover; } #wic-adr .adr-gob__txt { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; margin-top:10px; font-size:15px; line-height:1.4; color:var(--navy); } #wic-adr .adr-gob__txt span { font-size:12.5px; letter-spacing:.06em; color:var(--tinta); } #wic-adr .adr-gob__txt .adr-link { min-height:36px; font-size:14px; } .adr-js #wic-adr .adr-mas .adr-rv { transition-delay:calc(var(--d,0) * 110ms); } #wic-adr .adr-mas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; } #wic-adr .adr-mas a { display:flex; flex-direction:column; gap:2px; padding:14px 0; border-top:1px solid rgba(6,44,83,.12); } #wic-adr .adr-mas__m { font-size:12.5px; color:var(--tinta); } #wic-adr .adr-mas__m b { color:var(--navy); } #wic-adr .adr-mas__t { font-weight:600; font-size:15.5px; line-height:1.4; color:var(--teal); transition:transform .3s ease; } #wic-adr .adr-mas a:hover .adr-mas__t { color:var(--navy); transform:translateX(4px); } /* More coverage: las 10 más nuevas y «Show all» (sin JS se ven todas). */ .adr-js #wic-adr .adr-mas.recortada > li:nth-child(n/**/+11) { display:none; } /* ---------- Gallery = mosaico tipo renanozturk.com/work en filas justificadas (Iván, 26-sep): a sangre, sin espacios; cada pieza con su proporción real (--r) y flex-grow = --r, así toda la fila tiene el mismo alto y ninguna foto se recorta. Movimiento: aparece por piezas; al pasar el mouse, pie y crédito sobre la foto. ---------- */ #wic-adr .adr-gallery { background:#fff; padding-bottom:0; } #wic-adr .adr-gallery .adr-lede { margin-bottom:34px; } #wic-adr .adr-mosaico { background:#0a1520; } #wic-adr .adr-mosaico__fila { display:flex; align-items:flex-start; } /* Base proporcional a --r (no 0) y sin relleno en la caja: así el espacio se reparte en proporción exacta y todas las piezas de la fila tienen el mismo alto (sin recorte). El relleno del texto va en .adr-tesela__in. */ #wic-adr .adr-tesela { position:relative; display:block; flex:var(--r) 1 calc(var(--r) * 40px); min-width:0; aspect-ratio:var(--r); overflow:hidden; background:#0d1b2a; } #wic-adr a.adr-tesela img { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease; } #wic-adr a.adr-tesela:hover img, #wic-adr a.adr-tesela:focus-visible img { transform:scale(1.03); filter:brightness(.7); } #wic-adr .adr-tesela__velo { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px; text-align:center; opacity:0; transition:opacity .45s ease; } #wic-adr a.adr-tesela:hover .adr-tesela__velo, #wic-adr a.adr-tesela:focus-visible .adr-tesela__velo { opacity:1; } #wic-adr .adr-tesela__pie { max-width:30ch; font:600 clamp(13px,1.1vw,17px)/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.5); } #wic-adr .adr-tesela__cred { font:600 10.5px/1.2 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.85); } #wic-adr a.adr-tesela:focus-visible { outline:3px solid var(--dorado); outline-offset:-3px; } #wic-adr .adr-tesela .adr-nota { position:absolute; left:10px; top:10px; z-index:2; margin:0; } #wic-adr .adr-tesela--texto { display:flex; text-align:left; } #wic-adr .adr-tesela__in { display:flex; flex-direction:column; justify-content:center; gap:10px; width:100%; padding:clamp(14px,2vw,32px); } #wic-adr .adr-tesela__cej { font:700 clamp(9.5px,.8vw,11px)/1.35 var(--sans); letter-spacing:.22em; text-transform:uppercase; } #wic-adr .adr-tesela__frase { font:600 clamp(15px,1.4vw,22px)/1.28 var(--serif); letter-spacing:-.01em; } #wic-adr .adr-tesela--navy { background:#062C53; color:#f7ead2; } #wic-adr .adr-tesela--navy .adr-tesela__cej { color:var(--dorado); } #wic-adr .adr-tesela--arena { background:#F4EFE6; color:var(--navy); } #wic-adr .adr-tesela--arena .adr-tesela__cej { color:var(--teal); } #wic-adr .adr-tesela--cromo { background:#086380; color:#fff; } #wic-adr .adr-tesela--cromo .adr-tesela__cej { color:#f5c985; } #wic-adr .adr-tesela--dorado { background:#FAF7F2; color:var(--navy); box-shadow:inset 0 0 0 1px rgba(232,162,76,.55); } #wic-adr .adr-tesela--dorado .adr-tesela__cej { color:var(--oro); } #wic-adr .adr-tesela__in::before { content:""; width:28px; height:2px; border-radius:2px; background:currentColor; opacity:.35; } .adr-js #wic-adr .adr-mosaico .adr-tesela { opacity:0; transform:scale(.97); transition:opacity .8s ease calc(var(--d,0) * 45ms), transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--d,0) * 45ms); } .adr-js #wic-adr .adr-mosaico.in .adr-tesela, .adr-safe #wic-adr .adr-mosaico .adr-tesela { opacity:1; transform:none; } #wic-adr .adr-mosaico__cred { padding:14px 0 clamp(56px,7vw,96px); font-size:13px; color:var(--tinta); } /* Celular: el texto de cada fila pasa a una franja a todo el ancho arriba de sus fotos; las fotos siguen justificadas. */ @media (max-width:700px) { #wic-adr .adr-mosaico__fila { flex-wrap:wrap; } #wic-adr .adr-tesela--texto { order:-1; flex:1 1 100%; aspect-ratio:auto; } #wic-adr .adr-tesela__in { padding:16px; } #wic-adr .adr-tesela__in::before { display:none; } #wic-adr .adr-tesela__frase { font-size:17px; } #wic-adr .adr-tesela__velo { display:none; } } /* Tablet (revisión en vivo, 26-sep): entre 701 y 900 px las teselas de texto son angostas (hasta 700 van a todo el ancho); letra y relleno más chicos para que quepa todo. */ @media (min-width:701px) and (max-width:900px) { #wic-adr .adr-tesela__in { padding:14px; gap:8px; } #wic-adr .adr-tesela__frase { font-size:14px; line-height:1.3; } } /* ---------- Collaborators (Iván, 26-sep): los 12 logos, más grandes y limpios (sin cajas), en una fila que corre. ---------- */ #wic-adr .adr-logos { background:var(--crema); } #wic-adr .adr-logos .adr-lede { margin-bottom:10px; } #wic-adr .adr-marquesina--logos { padding:26px 0 34px; } #wic-adr .adr-marquesina--logos .adr-marquesina__pista > * { margin-right:clamp(52px,6vw,96px); } #wic-adr .adr-logo { position:relative; display:flex; align-items:center; justify-content:center; height:96px; } #wic-adr .adr-logo img { width:auto; height:56px; max-width:240px; object-fit:contain; } #wic-adr .adr-logo--copa img { height:32px; } #wic-adr .adr-logo--los-cabos img { height:30px; } #wic-adr .adr-logo--natgeo img { height:46px; } #wic-adr .adr-logo--maja img { height:40px; } #wic-adr .adr-logo--lifestyle img { height:40px; } #wic-adr .adr-logo--conanp img { height:54px; } #wic-adr .adr-logo--wahu img { height:62px; } #wic-adr .adr-logo--subaru img { height:64px; } #wic-adr .adr-logo--uabcs-aves img, #wic-adr .adr-logo--sectur-bcs img, #wic-adr .adr-logo--coparmex img, #wic-adr .adr-logo--pronatura img { height:80px; } #wic-adr .adr-logo .adr-nota { position:absolute; left:50%; bottom:-16px; transform:translateX(-50%); margin:0; white-space:nowrap; font-size:10px; padding:2px 6px; } /* ---------- HD (Iván, 26-sep): formulario simple, sin miniaturas; «Work with Adrián» aparte. ---------- */ #wic-adr .adr-hd { padding:clamp(64px,8vw,104px) 0; background-color:var(--arena); background-image:url("/wp-content/mu-plugins/wic-beaches-landing-assets/wic-tex/wic-contour.webp"); background-size:260px 260px; } #wic-adr .adr-hd__in { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,5vw,72px); align-items:start; } #wic-adr .adr-hd__intro h2 { font-size:clamp(32px,3.4vw,46px); margin:0 0 14px; } #wic-adr .adr-hd__lede { font-size:16.5px; line-height:1.65; color:var(--tinta); } #wic-adr .adr-license { margin-top:18px; padding-top:14px; border-top:1px solid rgba(6,44,83,.14); font-size:13px; line-height:1.5; color:var(--tinta); } #wic-adr .adr-trabajo-card { margin-top:28px; padding:20px 22px; border-radius:14px; background:#fff; border:1px solid rgba(6,44,83,.1); border-left:4px solid var(--dorado); box-shadow:0 16px 30px -26px rgba(6,44,83,.45); } #wic-adr .adr-trabajo-card__t { margin-bottom:4px; font:600 21px/1.25 var(--serif); color:var(--navy); } #wic-adr .adr-trabajo-card p { font-size:15px; line-height:1.55; color:var(--tinta); } #wic-adr .adr-trabajo-card .adr-btn { margin-top:14px; } #wic-adr .adr-form { display:grid; gap:14px; padding:clamp(22px,3vw,34px); border-radius:18px; background:#fff; border:1px solid rgba(6,44,83,.1); box-shadow:0 26px 50px -34px rgba(6,44,83,.45); } #wic-adr .adr-form__2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; } #wic-adr .adr-form label { display:grid; gap:6px; font:700 13.5px/1.3 var(--sans); color:var(--navy); } #wic-adr .adr-form small { font-weight:400; color:var(--tinta); } #wic-adr .adr-form .adr-l { display:block; } #wic-adr .adr-form :where(input[type=text],input[type=email],select,textarea) { width:100%; min-height:48px; padding:11px 14px; border:1.5px solid rgba(6,44,83,.2); border-radius:10px; background:#fff; font:400 16px/1.4 var(--sans); color:var(--navy); } #wic-adr .adr-form textarea { min-height:88px; resize:vertical; } #wic-adr .adr-form ::placeholder { color:#8a97a5; } #wic-adr .adr-form :where(input,select,textarea):focus { outline:none; border-color:var(--cromo); box-shadow:0 0 0 3px rgba(8,99,128,.2); } #wic-adr .adr-check { display:flex !important; grid-template-columns:none; align-items:flex-start; gap:10px !important; min-height:44px; font-weight:400 !important; font-size:14.5px !important; line-height:1.45 !important; color:var(--navy); } #wic-adr .adr-check > span { display:block; } #wic-adr .adr-check input { flex:none; width:20px; height:20px; margin-top:1px; accent-color:var(--cromo); } #wic-adr .adr-check a { color:var(--teal); text-decoration:underline; } #wic-adr .adr-form__hp { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; } #wic-adr .adr-form .adr-btn { justify-self:start; margin-top:4px; } #wic-adr .adr-form__msg { font-weight:700; font-size:14.5px; color:var(--teal); } #wic-adr .adr-form__msg.error { color:#9b2c0c; } #wic-adr .adr-form.resalta { animation:adr-resalta 1.4s ease; } @keyframes adr-resalta { 0%,100% { box-shadow:0 26px 50px -34px rgba(6,44,83,.45); } 30% { box-shadow:0 0 0 4px rgba(232,162,76,.55), 0 26px 50px -34px rgba(6,44,83,.45); } } /* ---------- Contact (Iván, 26-sep): foto de su trabajo + TODA su info y redes en el mismo panel, sin repetir. ---------- */ #wic-adr .adr-contact { background:var(--arena); } #wic-adr .adr-contact__band { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); background:#fff; } #wic-adr .adr-contact__foto { position:relative; min-height:480px; overflow:hidden; background:#1c2b40; } #wic-adr .adr-contact__foto img { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 6%; } #wic-adr .adr-contact__panel { display:flex; flex-direction:column; justify-content:center; gap:14px; padding:clamp(36px,4vw,64px) clamp(24px,4vw,56px); background:#f6f4f1; } #wic-adr .adr-contact__panel .adr-kicker { margin:0; } #wic-adr .adr-contact__panel h2 { font-size:clamp(30px,3vw,42px); } #wic-adr .adr-contact__lede { max-width:40ch; font-size:16px; line-height:1.6; color:var(--tinta); } #wic-adr .adr-redes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:4px 0; } #wic-adr .adr-redes a { display:grid; grid-template-columns:24px minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; align-items:center; min-height:52px; padding:7px 12px; border-radius:12px; background:#fff; border:1px solid rgba(6,44,83,.1); color:var(--navy); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } #wic-adr .adr-redes a:hover { transform:translateY(-2px); border-color:rgba(8,99,128,.4); box-shadow:0 10px 22px rgba(6,44,83,.12); } #wic-adr .adr-redes svg { grid-row:1 / span 2; color:var(--cromo); } #wic-adr .adr-redes__n { font-weight:700; font-size:14.5px; line-height:1.2; } #wic-adr .adr-redes__h { font-size:12.5px; line-height:1.25; color:var(--tinta); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #wic-adr .adr-contact__acc { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; } /* ---------- «Work with Adrián»: dos filtros y la salida a sus canales ---------- */ #wic-adr .adr-trabajo { width:min(560px,calc(100vw - 24px)); max-height:calc(100vh - 24px); margin:auto; padding:0; border:0; border-radius:20px; background:#fff; color:var(--navy); box-shadow:0 40px 90px -30px rgba(3,18,31,.6); } #wic-adr .adr-trabajo::backdrop { background:rgba(3,18,31,.62); } #wic-adr .adr-trabajo__in { position:relative; padding:34px clamp(20px,4vw,34px) 26px; } #wic-adr .adr-trabajo__x { position:absolute; top:8px; right:8px; width:44px; height:44px; border:0; border-radius:50%; background:none; color:var(--navy); font-size:28px; line-height:1; cursor:pointer; } #wic-adr .adr-trabajo__pasos { display:flex; gap:6px; margin:0 40px 16px 0; } #wic-adr .adr-trabajo__pasos span { flex:1; height:3px; border-radius:2px; background:rgba(6,44,83,.12); transition:background-color .3s ease; } #wic-adr .adr-trabajo__pasos span.on { background:var(--dorado); } #wic-adr .adr-trabajo__paso[hidden] { display:none; } #wic-adr .adr-trabajo h2 { margin:4px 0 18px; font-size:clamp(24px,3vw,30px); } #wic-adr .adr-op { min-height:52px; padding:12px 16px; border:1.5px solid rgba(6,44,83,.16); border-radius:12px; background:#fff; text-align:left; font:600 15.5px/1.35 var(--sans); color:var(--navy); cursor:pointer; transition:border-color .2s ease, background-color .2s ease, transform .2s ease; } #wic-adr .adr-op:hover, #wic-adr .adr-op:focus-visible { border-color:var(--cromo); background:#f2f7f9; transform:translateX(3px); } #wic-adr .adr-trabajo__chips { display:flex; flex-wrap:wrap; gap:8px; } #wic-adr .adr-trabajo__chips .adr-op { min-height:44px; padding:10px 16px; border-radius:999px; font-size:14.5px; } #wic-adr .adr-trabajo__chips .adr-op:hover, #wic-adr .adr-trabajo__chips .adr-op:focus-visible { transform:none; } #wic-adr .adr-op[aria-pressed="true"] { border-color:var(--cromo); background:var(--cromo); color:#fff; } #wic-adr .adr-trabajo__txt { font-size:15.5px; line-height:1.6; color:var(--tinta); } #wic-adr .adr-trabajo__salidas { display:grid; gap:10px; margin-top:16px; } #wic-adr .adr-trabajo__salidas .adr-btn { justify-content:flex-start; } #wic-adr .adr-trabajo__nota { margin-top:16px; font-size:14px; color:var(--tinta); } #wic-adr .adr-trabajo__nota a { color:var(--teal); text-decoration:underline; } #wic-adr .adr-trabajo__atras { min-height:44px; margin-top:12px; padding:0; border:0; background:none; font-weight:700; font-size:14px; color:var(--teal); cursor:pointer; } /* ---------- visor de fotos ---------- */ #wic-adr .adr-lb { width:100vw; max-width:100vw; height:100vh; max-height:100vh; margin:0; padding:0; border:0; background:#03121f; color:#fff; } #wic-adr .adr-lb::backdrop { background:#03121f; } #wic-adr .adr-lb__in { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; height:100%; padding:56px 72px 24px; } #wic-adr .adr-lb__fig { display:flex; flex-direction:column; align-items:center; gap:12px; max-width:100%; min-height:0; flex:1; justify-content:center; } #wic-adr .adr-lb__fig img { max-width:100%; max-height:calc(100vh - 210px); width:auto; height:auto; object-fit:contain; border-radius:4px; } #wic-adr .adr-lb__fig figcaption { max-width:760px; text-align:center; font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.88); } #wic-adr .adr-lb__x { position:absolute; top:10px; right:14px; width:48px; height:48px; border:0; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; font-size:30px; line-height:1; cursor:pointer; } #wic-adr .adr-lb__nav { position:absolute; top:50%; width:52px; height:52px; margin-top:-26px; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:34px; line-height:1; cursor:pointer; } #wic-adr .adr-lb__nav--prev { left:12px; } #wic-adr .adr-lb__nav--next { right:12px; } #wic-adr .adr-lb__nav[hidden] { display:none; } #wic-adr .adr-lb__acc { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; } #wic-adr .adr-lb__acc [hidden] { display:none; } /* ---------- aparición ---------- */ .adr-js #wic-adr .adr-rv { opacity:0; transform:translateY(18px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); } .adr-js #wic-adr .adr-rv.in, .adr-safe #wic-adr .adr-rv { opacity:1; transform:none; } /* ---------- tablet ---------- */ @media (max-width:900px) { #wic-adr .adr-retratos__barras { width:calc(100% - 7px); } #wic-adr .adr-carrete { --cw:300px; grid-template-columns:1fr; grid-template-areas:"ventana" "ctrl" "textos"; } /* Iván, 26-sep: el póster al centro de la pantalla, con sus controles debajo. */ #wic-adr .adr-carrete__ventana, #wic-adr .adr-carrete .adr-ctrl { justify-self:center; } #wic-adr .adr-hd__in, #wic-adr .adr-contact__band { grid-template-columns:1fr; } #wic-adr .adr-contact__foto { min-height:0; aspect-ratio:16/9; } } @media (max-width:1024px) { #wic-adr .adr-hero--v2 { min-height:0; } #wic-adr .adr-hero--v2 .adr-hero__foto { height:clamp(220px,36svh,500px); } #wic-adr .adr-hero--v2 .adr-hero__body { padding-top:20px; padding-bottom:34px; } } /* Tablet: los botones al lado del nombre (como en PC) para que la franja de logos entre en la primera pantalla. */ @media (min-width:761px) and (max-width:1024px) { #wic-adr .adr-hero.adr-hero--v2 .adr-hero__body { grid-template-columns:minmax(0,1fr) auto; align-items:end; } #wic-adr .adr-hero.adr-hero--v2 .adr-ctas { flex-direction:column; flex-wrap:nowrap; align-items:stretch; } } @media (max-width:760px) { /* svh = alto con las barras del navegador a la vista: así los logos asoman también en un teléfono real. */ #wic-adr .adr-hero--v2 .adr-hero__foto { height:clamp(170px,28svh,380px); } #wic-adr .adr-hero--v2 .adr-hero__body { gap:14px; padding-top:16px; padding-bottom:30px; } #wic-adr .adr-logos--arriba .adr-logo { height:64px; } /* zoom (no transform) para que el logo ocupe menos ancho y quepan 3–4 en la pantalla. */ #wic-adr .adr-logos--arriba .adr-logo img { transform:none; zoom:.68; } #wic-adr .adr-logos--arriba .adr-marquesina--logos .adr-marquesina__pista > * { margin-right:30px; } #wic-adr .adr-hero--v2 h1 { margin:8px 0 8px; } #wic-adr .adr-hero.adr-hero--v2 .adr-ctas { flex-direction:row; flex-wrap:nowrap; align-items:stretch; gap:10px; } #wic-adr .adr-hero.adr-hero--v2 .adr-ctas .adr-btn { flex:1 1 0; min-width:0; padding:12px 10px; font-size:14px; } #wic-adr .adr-logos__cab { grid-template-columns:1fr; } #wic-adr .adr-logos--arriba .adr-logos__h { font-size:clamp(24px,6.6vw,28px); } #wic-adr .adr-logos__sub { display:none; } #wic-adr .adr-logos--arriba .adr-marquesina--logos { padding:4px 0 12px; } } /* iPhone con las barras de Safari a la vista (≈664 px de alto): la foto un poco más baja. */ @media (max-width:760px) and (max-height:700px) { #wic-adr .adr-hero--v2 .adr-hero__foto { height:clamp(140px,23svh,300px); } } /* Teléfonos de pantalla baja (iPhone SE con barras, 640 px o menos): todo más compacto para que asomen los logos. */ @media (max-width:760px) and (max-height:620px) { #wic-adr .adr-hero--v2 .adr-hero__foto { height:clamp(130px,24svh,200px); } #wic-adr .adr-hero--v2 .adr-hero__eyebrow { display:none; } #wic-adr .adr-hero--v2 h1 { font-size:clamp(34px,10.4vw,44px); } #wic-adr .adr-hero--v2 .adr-hero__body { padding-top:12px; padding-bottom:26px; } } /* Tablet: la gaviota entera (la marca de agua sigue fuera del encuadre). */ @media (min-width:761px) and (max-width:1024px) { #wic-adr .adr-hero--v2 .adr-hero__img { object-position:0% 72%; } } /* PC: el crédito arriba a la derecha, lejos de los botones. */ @media (min-width:1025px) { #wic-adr .adr-hero--v2 .adr-hero__credit { top:32px; bottom:auto; } } /* ---------- celular ---------- */ @media (max-width:760px) { #wic-adr { --gut:16px; font-size:16px; } #wic-adr .adr-hero__foto { height:clamp(280px,58svh,520px); } #wic-adr .adr-hero h1 { font-size:clamp(44px,13vw,60px); } #wic-adr .adr-hero__eyebrow { font-size:11.5px; } #wic-adr .adr-hero .adr-ctas { flex-direction:column; align-items:stretch; } #wic-adr .adr-cinta__txt { font-size:9.5px; } #wic-adr .adr-carrete { --cw:min(280px,74vw); } #wic-adr .adr-row summary { grid-template-columns:30px minmax(0,1fr); padding:3vh 0; } #wic-adr .adr-row__body { padding-left:44px; } #wic-adr .adr-sala__escena::after { background:linear-gradient(180deg,rgba(6,16,28,.38),rgba(6,16,28,.58)); } #wic-adr .adr-sala__nitida { inset:0; right:auto; top:0; width:100%; height:100%; object-fit:cover; transform:none; border-radius:0; box-shadow:none; } #wic-adr .adr-sala__cap { display:none; } #wic-adr .adr-sala__creditos { display:block; } #wic-adr .adr-contact__panel { padding-left:16px; padding-right:16px; } #wic-adr .adr-clip { width:78vw; } #wic-adr .adr-gob__item { width:86vw; } #wic-adr .adr-mas { grid-template-columns:1fr; } #wic-adr .adr-logo { height:80px; } #wic-adr .adr-logo img { transform:scale(.82); } #wic-adr .adr-form__2 { grid-template-columns:1fr; } #wic-adr .adr-form .adr-btn { justify-self:stretch; } #wic-adr .adr-lb__in { padding:56px 12px 16px; } #wic-adr .adr-lb__nav { top:auto; bottom:84px; margin-top:0; } } @media (max-width:480px) { #wic-adr .adr-redes { grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce) { html:has(body.wic-adrian-page) { scroll-behavior:auto; } #wic-adr *, #wic-adr *::before, #wic-adr *::after { animation:none !important; transition:none !important; } .adr-js #wic-adr .adr-hero__img, .adr-js #wic-adr .adr-hero.is-on .adr-hero__img { transform:none; } #wic-adr .adr-marquesina { overflow-x:auto; -webkit-mask-image:none; mask-image:none; } } @media (hover:none), (max-width:767px) { .adr-js #wic-adr .adr-cinta.en-vista::after { animation:none; } } /* ---------- Bio: «Read the full story» solo en celular (patrón de /transportation/: botón hermano del texto, sin «Read less»). Se muestran los 5 primeros párrafos; el quinto se desvanece. ---------- */ #wic-adr .adr-bio__mas { display:none; } #wic-adr .adr-bio__mas[hidden] { display:none !important; } @media (max-width:899px) { .adr-js #wic-adr .adr-bio.recortada > :nth-child(n/**/+6) { display:none; } .adr-js #wic-adr .adr-bio.recortada > :nth-child(5) { -webkit-mask-image:linear-gradient(180deg,#000 35%,transparent 100%); mask-image:linear-gradient(180deg,#000 35%,transparent 100%); } #wic-adr .adr-bio__mas { display:inline-flex; align-items:center; gap:10px; min-height:48px; margin:6px 0 0; padding:13px 20px; border:1px solid rgba(6,44,83,.22); border-radius:4px; background:#fff; font:600 15px/1.2 var(--sans); color:var(--navy); cursor:pointer; transition:background-color .2s ease, border-color .2s ease; } #wic-adr .adr-bio__mas::after { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); } #wic-adr .adr-bio__mas:hover { border-color:rgba(6,44,83,.4); } #wic-adr .adr-bio__mas:focus-visible { outline:3px solid var(--cromo); outline-offset:2px; } } /* ---------- Reconocimientos en celular (Iván, 26-sep): sin animación, solo la forma sencilla ---------- */ @media (max-width:760px) { #wic-adr .adr-rec { display:none; } } /* ---------- Barra en celular: solo los accesos (las migas van arriba, fuera de la barra) ---------- */ @media (max-width:760px) { #wic-adr .adr-migas-movil { display:block; background:var(--crema); } #wic-adr .adr-crumbs--pc { display:none; } #wic-adr .adr-bar__in { min-height:0; } #wic-adr .adr-bar .adr-jump { margin:0 -16px; padding:2px 8px; scroll-behavior:smooth; } } /* ================= More coverage, from many places (Iván, 28-sep: maqueta + especificación) ================= Mapa de puntos + 3 tarjetas que rotan + archivo ordenable. Solo paleta oficial v1.2.0: país = color de acento (México dorado, Argentina cromo, Uruguay teal, Estados Unidos navy); tarjetas blancas con borde; botón de acción en cromo. Letra: WIC Display (Fraunces) para país y títulos, WIC Sans (Switzer) para lo demás. */ #wic-adr .adr-cob { padding-top:clamp(44px,6vw,80px); } #wic-adr .adr-cob__head { max-width:880px; margin:0 0 clamp(26px,3.2vw,44px); } #wic-adr .adr-cob__eyebrow { display:flex; align-items:center; gap:14px; font:600 12px/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--teal); } #wic-adr .adr-cob__eyebrow::before { content:""; flex:none; width:44px; height:1px; background:var(--dorado); } #wic-adr .adr-cob__eyebrow span { font:italic 400 15px/1.3 var(--serif); letter-spacing:0; text-transform:none; color:var(--tinta); } #wic-adr .adr-cob__h { margin-top:14px; font-size:clamp(36px,4.8vw,66px); line-height:1.02; letter-spacing:-.035em; } /* Todo en navy, como la maqueta: el dorado #B97F35 sobre la banda salvia no llega a 3:1 (paleta: dorado-letra solo sobre blanco/crema). */ #wic-adr .adr-cob__h em { color:inherit; } #wic-adr .adr-cob__intro { margin-top:14px; max-width:720px; font-size:clamp(17px,1.5vw,20px); line-height:1.55; color:var(--tinta); } #wic-adr .adr-cob__grid { display:grid; grid-template-columns:minmax(260px,.78fr) minmax(0,2.4fr); gap:clamp(20px,2.6vw,40px); align-items:start; } #wic-adr .adr-cob__lado { display:grid; gap:clamp(16px,1.8vw,24px); min-width:0; } /* ---- mapa ---- */ #wic-adr .adr-cob__mapa { position:relative; align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; gap:18px; min-width:0; } #wic-adr .adr-cob__lienzo { position:relative; width:100%; aspect-ratio:490 / 657; } /* En pantallas anchas el mapa ocupa también parte del margen izquierdo (como en la maqueta), sin angostar las tarjetas. */ @media (min-width:1360px) { #wic-adr .adr-cob__lienzo { width:calc(100% + 64px); margin-left:-64px; } } #wic-adr .adr-cob__lienzo > img { width:100%; height:100%; } #wic-adr .adr-cob__guias { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; } #wic-adr .adr-cob__guias line { stroke:#007481; stroke-width:1.4; stroke-dasharray:3 3; vector-effect:non-scaling-stroke; } #wic-adr .adr-cob__real { position:absolute; left:var(--x); top:var(--y); width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:#007481; box-shadow:0 0 0 2px #fff; } #wic-adr .adr-cob__nota { position:relative; padding-bottom:14px; max-width:300px; font:italic 400 15.5px/1.5 var(--serif); color:var(--tinta); } #wic-adr .adr-cob__nota::after { content:""; position:absolute; left:0; bottom:0; width:32px; height:1px; background:var(--dorado); } /* Punto del mapa: gota con la punta en el lugar exacto (la forma del pin del logo). */ #wic-adr .adr-pin { --pc:var(--navy); position:absolute; left:var(--x); top:var(--y); z-index:2; width:44px; height:44px; margin:-33px 0 0 -22px; padding:0; border:0; border-radius:10px; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; } #wic-adr .adr-pin--mx { --pc:#B97F35; } #wic-adr .adr-pin--ar { --pc:#086380; } #wic-adr .adr-pin--uy { --pc:#007481; } #wic-adr .adr-pin--us { --pc:#062C53; } #wic-adr .adr-pin::before { content:""; position:absolute; left:50%; top:6px; width:22px; height:22px; margin-left:-11px; border:2px solid #fff; border-radius:50% 50% 50% 0; background:var(--pc); transform:rotate(-45deg); box-shadow:0 0 0 1.5px rgba(6,44,83,.55), -2px 3px 8px -2px rgba(6,44,83,.45); transition:transform .25s ease; } #wic-adr .adr-pin::after { content:""; position:absolute; left:50%; top:13px; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#fff; } @media (hover:hover) { #wic-adr .adr-pin:hover::before { transform:rotate(-45deg) scale(1.18); } } #wic-adr .adr-pin:focus-visible::before, #wic-adr .adr-pin.foco::before, #wic-adr .adr-pin[aria-expanded="true"]::before { transform:rotate(-45deg) scale(1.18); } #wic-adr .adr-pin:focus-visible { outline:3px solid var(--cromo); outline-offset:1px; } #wic-adr .adr-pin__onda { position:absolute; left:50%; top:33px; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; border:2px solid var(--pc); opacity:0; pointer-events:none; } #wic-adr .adr-pin.vivo .adr-pin__onda { animation:adr-onda 2.2s ease-out infinite; } @keyframes adr-onda { 0% { opacity:.7; transform:scale(.3); } 80%,100% { opacity:0; transform:scale(1.9); } } #wic-adr .adr-pin__tip { position:absolute; left:50%; bottom:calc(100% + 4px); padding:5px 10px; border-radius:6px; background:var(--navy); color:#fff; font:600 12.5px/1.3 var(--sans); white-space:nowrap; opacity:0; transform:translate(-50%,4px); pointer-events:none; transition:opacity .2s ease, transform .2s ease; } #wic-adr .adr-pin:focus-visible .adr-pin__tip, #wic-adr .adr-pin.foco .adr-pin__tip { opacity:1; transform:translate(-50%,0); } @media (hover:hover) { #wic-adr .adr-pin:hover .adr-pin__tip { opacity:1; transform:translate(-50%,0); } } #wic-adr .adr-pin[aria-expanded="true"] .adr-pin__tip { opacity:0; } /* Puntos cerca del borde izquierdo: la etiqueta crece hacia la derecha para no cortarse. */ #wic-adr .adr-pin--izq .adr-pin__tip { left:4px; transform:translate(0,4px); } #wic-adr .adr-pin--izq:focus-visible .adr-pin__tip, #wic-adr .adr-pin--izq.foco .adr-pin__tip { transform:translate(0,0); } @media (hover:hover) { #wic-adr .adr-pin--izq:hover .adr-pin__tip { transform:translate(0,0); } } /* Ventanita con las notas del lugar. */ #wic-adr .adr-cob__pop { position:absolute; z-index:5; width:min(340px,calc(100vw - 32px)); max-height:min(480px,calc(100vh - var(--margen,150px) - 24px)); overflow-y:auto; overscroll-behavior:contain; padding:16px 16px 12px; background:#fff; border:1px solid rgba(6,44,83,.12); border-radius:12px; box-shadow:0 18px 40px -18px rgba(6,44,83,.45); } #wic-adr .adr-cob__pop[hidden] { display:none; } #wic-adr .adr-cob__pop-h { padding-right:44px; font:600 18px/1.25 var(--serif); color:var(--navy); outline:0; } #wic-adr .adr-cob__pop-n { margin-top:2px; font-size:13px; color:var(--tinta); } #wic-adr .adr-cob__pop ul { margin-top:8px; list-style:none; } #wic-adr .adr-cob__pop li a { display:block; padding:9px 0; border-top:1px solid rgba(6,44,83,.1); } #wic-adr .adr-cob__pop .adr-mas__m { display:block; font-size:12px; line-height:1.4; color:var(--tinta); } #wic-adr .adr-cob__pop .adr-mas__t { display:block; font-size:14px; line-height:1.4; font-weight:600; color:var(--teal); } #wic-adr .adr-cob__pop-mas { display:inline-flex; align-items:center; min-height:44px; margin-top:4px; padding:0; border:0; background:none; font:600 14px/1.2 var(--sans); color:var(--cromo); cursor:pointer; } #wic-adr .adr-cob__pop-x { position:absolute; top:6px; right:6px; width:44px; height:44px; border:0; border-radius:50%; background:#F4EFE6; color:var(--navy); font:400 22px/1 var(--sans); cursor:pointer; } /* ---- tarjetas ---- */ #wic-adr .adr-cob__tarjetas { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px); } #wic-adr .adr-cob__card { --c:var(--navy); --b:var(--navy); container-type:inline-size; min-height:var(--alto,0); padding:22px clamp(18px,1.7vw,24px) 24px; background:#fff; border:1px solid rgba(6,44,83,.1); border-top:3px solid var(--b); border-radius:var(--r); box-shadow:0 1px 2px rgba(6,44,83,.05), 0 14px 30px -22px rgba(6,44,83,.35); transition:border-color .5s ease; } #wic-adr .adr-cob__card--mx { --c:#B97F35; --b:#E8A24C; } #wic-adr .adr-cob__card--ar { --c:#086380; --b:#086380; } #wic-adr .adr-cob__card--uy { --c:#006974; --b:#007481; } #wic-adr .adr-cob__card--us { --c:#062C53; --b:#062C53; } #wic-adr .adr-cob__in { display:flex; flex-direction:column; gap:10px; transition:opacity .45s ease, transform .45s ease; } #wic-adr .adr-cob__card.sale .adr-cob__in { opacity:0; transform:translateY(-10px); transition-duration:.35s; } #wic-adr .adr-cob__card.entra .adr-cob__in { opacity:0; transform:translateY(12px); transition:none; } /* El país es lo primero que se ve: grande, en mayúsculas, con su barra de color; su tamaño se ajusta para caber en una línea. */ /* El mismo tamaño en las tres tarjetas: el que deja caber ARGENTINA (el nombre de una palabra más largo) en una línea; «United States» baja a dos renglones. */ #wic-adr .adr-cob__pais { display:flex; align-items:flex-start; gap:.26em; font-family:var(--serif); font-weight:600; font-size:clamp(24px, calc((100cqi - 24px) / 6.9), 50px); line-height:.95; letter-spacing:-.01em; text-transform:uppercase; color:var(--c); } #wic-adr .adr-cob__pais::before { content:""; flex:none; width:.2em; height:.8em; margin-top:.04em; border-radius:3px; background:var(--b); } #wic-adr .adr-cob__chip { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:4px 11px 4px 8px; border-radius:999px; background:#F4EFE6; font:600 12.5px/1.3 var(--sans); color:var(--navy); } #wic-adr .adr-cob__chip::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--b); } #wic-adr .adr-cob__meta { font-size:13px; line-height:1.45; color:var(--tinta); } #wic-adr .adr-cob__meta b { font-weight:600; color:var(--navy); } #wic-adr .adr-cob__tit { font-size:clamp(18px,1.45vw,21px); line-height:1.22; letter-spacing:-.015em; } #wic-adr .adr-cob__tit a { color:var(--teal); transition:color .2s ease; } #wic-adr .adr-cob__tit a:hover { color:var(--navy); } #wic-adr .adr-cob__tit a:focus-visible { outline:3px solid var(--cromo); outline-offset:3px; border-radius:2px; } #wic-adr .adr-cob__ext { margin-top:4px; padding-top:12px; border-top:1px solid rgba(6,44,83,.1); font-size:14.5px; line-height:1.55; color:var(--tinta); } /* Pausa de la rotación (WCAG 2.2.2): pequeña, bajo las tarjetas. */ #wic-adr .adr-cob__ctrl { display:flex; justify-content:flex-end; margin-top:-6px; } #wic-adr .adr-cob__pausa { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 14px; border:0; border-radius:999px; background:none; font:600 13.5px/1.2 var(--sans); color:var(--tinta); cursor:pointer; } #wic-adr .adr-cob__pausa[hidden] { display:none; } #wic-adr .adr-cob__pausa::before { content:""; width:10px; height:12px; border-left:3px solid currentColor; border-right:3px solid currentColor; } #wic-adr .adr-cob__pausa[data-pausado="1"]::before { width:0; height:0; border:0; border-left:10px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent; } #wic-adr .adr-cob__pausa:hover { color:var(--navy); } #wic-adr .adr-cob__pausa:focus-visible { outline:3px solid var(--cromo); outline-offset:2px; } /* ---- Pie de las tarjetas (Iván, 29-sep): la frase y los dos botones en una fila; sin el panel «There’s more to discover». ---- */ #wic-adr .adr-cob__lado { align-content:start; } #wic-adr .adr-cob__lado > .adr-cob__ctrl { margin:0 0 -6px; justify-content:flex-end; } #wic-adr .adr-cob__pie { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 28px; padding-top:4px; } #wic-adr .adr-cob__pie .adr-cob__nota { flex:1 1 260px; max-width:360px; padding-bottom:12px; } #wic-adr .adr-cob__pie .adr-cob__acciones { margin-top:0; } #wic-adr .adr-cob__mapa { justify-content:flex-start; } /* ---- «There’s more to discover» ---- */ #wic-adr .adr-cob__acciones { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:20px; } #wic-adr .adr-cob__btn { display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:12px 22px; border-radius:6px; background:var(--cromo); color:#fff; font:600 15.5px/1.2 var(--sans); transition:background-color .2s ease; } #wic-adr .adr-cob__btn:hover, #wic-adr .adr-cob__btn:focus-visible { background:var(--navy); color:#fff; } #wic-adr .adr-cob__btn:focus-visible, #wic-adr .adr-cob__link:focus-visible { outline:3px solid var(--dorado); outline-offset:3px; } #wic-adr .adr-cob__link { display:inline-flex; align-items:center; gap:8px; min-height:44px; font:600 15px/1.2 var(--sans); color:var(--teal); text-decoration:underline; text-decoration-color:rgba(0,105,116,.35); text-underline-offset:4px; } #wic-adr .adr-cob__link:hover { color:var(--navy); text-decoration-color:currentColor; } /* Tarjetitas de adorno que se alejan (como el archivo), con el color de cada país. */ /* ---- archivo completo ---- */ #wic-adr .adr-cob__archivo { margin-top:clamp(18px,2.4vw,28px); padding:clamp(20px,2.6vw,36px); background:#fff; border:1px solid rgba(6,44,83,.1); border-radius:var(--r); outline:0; } #wic-adr .adr-cob__archivo[hidden] { display:none; } #wic-adr .adr-cob__archivo-cab { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 22px; } #wic-adr .adr-cob__archivo-h { font-size:clamp(24px,2.4vw,32px); } #wic-adr .adr-cob__archivo-h span { margin-left:8px; font:400 14px/1 var(--sans); letter-spacing:0; color:var(--tinta); } #wic-adr .adr-cob__orden { display:inline-flex; padding:4px; border-radius:999px; background:#F4EFE6; } #wic-adr .adr-cob__orden[hidden], #wic-adr .adr-cob__cerrar[hidden] { display:none; } #wic-adr .adr-cob__orden button { min-height:44px; padding:8px 16px; white-space:nowrap; border:0; border-radius:999px; background:none; font:600 14px/1.2 var(--sans); color:var(--navy); cursor:pointer; } #wic-adr .adr-cob__orden button[aria-pressed="true"] { background:var(--navy); color:#fff; } #wic-adr .adr-cob__orden button:focus-visible, #wic-adr .adr-cob__cerrar:focus-visible { outline:3px solid var(--cromo); outline-offset:2px; } #wic-adr .adr-cob__cerrar { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 14px; border:1px solid rgba(6,44,83,.2); border-radius:999px; background:#fff; font:600 14px/1.2 var(--sans); color:var(--navy); cursor:pointer; } #wic-adr .adr-cob__grupo { scroll-margin-top:var(--margen,150px); } #wic-adr .adr-cob__grupo h5 { display:flex; align-items:baseline; gap:10px; margin:26px 0 2px; font:600 12px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--teal); } #wic-adr .adr-cob__grupo h5 span { font-weight:400; letter-spacing:0; color:var(--tinta); } @media (max-width:1100px) { #wic-adr .adr-cob__grid { grid-template-columns:1fr; } #wic-adr .adr-cob__mapa { flex-direction:row; align-items:center; justify-content:flex-start; gap:clamp(24px,5vw,56px); } #wic-adr .adr-cob__lienzo { width:min(320px,42%); } #wic-adr .adr-cob__nota { max-width:300px; font-size:clamp(17px,2.2vw,21px); } } @media (max-width:900px) { #wic-adr .adr-cob__archivo-cab { display:grid; grid-template-columns:1fr auto; } #wic-adr .adr-cob__orden { grid-column:1 / -1; order:3; justify-self:start; } } @media (max-width:760px) { #wic-adr .adr-cob__mapa { flex-direction:column; align-items:center; } #wic-adr .adr-cob__lienzo { width:min(330px,100%); } /* Tarjetas en fila que se desliza con el dedo; siguen rotando solas. */ #wic-adr .adr-cob__tarjetas { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:86%; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(-1 * var(--gut,16px)); padding:4px var(--gut,16px) 14px; scroll-padding-inline:var(--gut,16px); scrollbar-width:none; overscroll-behavior-x:contain; } #wic-adr .adr-cob__tarjetas::-webkit-scrollbar { display:none; } #wic-adr .adr-cob__card { scroll-snap-align:start; scroll-snap-stop:always; } #wic-adr .adr-cob__btn { width:100%; justify-content:center; } #wic-adr .adr-cob__pop { position:relative; left:auto !important; top:auto !important; width:100%; max-height:none; margin-top:-4px; } #wic-adr .adr-cob__orden { width:100%; } #wic-adr .adr-cob__orden button { flex:1 1 auto; padding:8px 12px; } } /* Teléfono girado (poca altura, dedo): la ventanita va en el flujo, bajo el mapa, como en vertical; mapa más bajo. */ @media (max-height:520px) and (pointer:coarse) { #wic-adr .adr-cob__mapa { flex-wrap:wrap; } #wic-adr .adr-cob__lienzo { width:min(300px,42%); } #wic-adr .adr-cob__pop { position:relative; left:auto !important; top:auto !important; width:100%; max-height:none; flex:0 0 100%; order:3; } } @media (max-width:400px) { #wic-adr .adr-cob__eyebrow { flex-wrap:wrap; row-gap:4px; } #wic-adr .adr-cob__eyebrow span { flex-basis:100%; padding-left:58px; } } @media (prefers-reduced-motion:reduce) { #wic-adr .adr-pin.vivo .adr-pin__onda { animation:none; opacity:.5; transform:scale(1.3); } #wic-adr .adr-cob__in { transition:none; } } /* ================= About v2 (Iván, 28-sep): fondo de cine con sus fotos en fundido (10 s) y los logros primero ================= Mismo mecanismo que la sala de «More projects»: escena pegada a pantalla completa y el contenido corre encima. */ #wic-adr .adr-about2 { position:relative; background:#0a1a2b; color:#fff; } #wic-adr .adr-about2__escena { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; } #wic-adr .adr-about2__capa { position:absolute; inset:0; display:block; opacity:0; transition:opacity 1.8s ease; } #wic-adr .adr-about2__capa.on { opacity:1; } #wic-adr .adr-about2__capa img { width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 38%; } #wic-adr .adr-about2__velo { position:absolute; inset:0; background:linear-gradient(0deg, rgba(4,18,34,.94) 0%, rgba(4,18,34,.72) 34%, rgba(4,18,34,.2) 68%, rgba(4,18,34,.32) 100%); } #wic-adr .adr-about2__cont { position:relative; z-index:1; margin-top:-100vh; margin-top:-100svh; } #wic-adr .adr-about2__logros { display:flex; flex-direction:column; justify-content:flex-end; min-height:100vh; min-height:100svh; padding-top:calc(var(--margen,150px) + 24px); padding-bottom:clamp(36px,6vh,64px); } #wic-adr .adr-about2 .adr-kicker { color:#fff; } #wic-adr .adr-about2 h2 { max-width:15ch; font-size:clamp(40px,5vw,72px); line-height:1.02; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.35); } #wic-adr .adr-about2 h2 em { color:#FFE3B3; } /* Cifras grandes: el número primero (la gente no lee), con su fuente debajo. */ #wic-adr .adr-cifras { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:clamp(22px,4vh,40px); border-top:1px solid rgba(255,255,255,.28); list-style:none; } #wic-adr .adr-cifra { padding:18px 22px 6px; border-left:1px solid rgba(255,255,255,.18); } #wic-adr .adr-cifra:first-child { padding-left:0; border-left:0; } #wic-adr .adr-cifra__n { display:flex; align-items:flex-start; font:600 clamp(52px,5.4vw,86px)/.95 var(--serif); letter-spacing:-.03em; color:#fff; } #wic-adr .adr-cifra__suf { margin-left:2px; font-size:.6em; line-height:1; color:#FFE3B3; } #wic-adr .adr-cifra__t { margin-top:10px; max-width:26ch; font-size:15px; line-height:1.45; color:rgba(255,255,255,.9); } #wic-adr .adr-cifra__f { display:inline-flex; align-items:center; min-height:44px; padding:0; margin-top:0; font:600 11.5px/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:#FFE3B3; } #wic-adr a.adr-cifra__f:hover { text-decoration:underline; text-underline-offset:3px; } /* Credenciales: quién · qué · fuente, en tarjetas de vidrio. */ #wic-adr .adr-cifra__f:focus-visible { outline:3px solid #FFE3B3; outline-offset:3px; } #wic-adr .adr-about2__cred { align-self:flex-end; margin-top:16px; font:600 10.5px/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.62); } /* La bio en una tarjeta crema que sube sobre la foto. */ #wic-adr .adr-about2__carta-wrap { padding-top:clamp(24px,6vh,64px); padding-bottom:clamp(64px,12vh,140px); } /* La bio en un panel de vidrio centrado, como las credenciales (Iván: «muy vistoso», nada de bloque blanco). */ #wic-adr .adr-about2__carta { max-width:none; margin:0; padding:clamp(28px,4.4vw,60px) clamp(22px,5vw,72px); border:1px solid rgba(255,255,255,.26); border-radius:18px; background:rgba(6,30,54,.05); -webkit-backdrop-filter:blur(3px) saturate(1.1); backdrop-filter:blur(3px) saturate(1.1); color:#fff; box-shadow:0 40px 80px -40px rgba(0,0,0,.7); } #wic-adr .adr-about2__carta .adr-kicker { color:#FFE3B3; } #wic-adr .adr-about2__carta .adr-bio { max-width:none; } #wic-adr .adr-about2__carta .adr-bio p { color:rgba(255,255,255,.86); } #wic-adr .adr-about2__carta .adr-bio .adr-bio__lead { margin-bottom:.9em; font:400 clamp(22px,2.1vw,28px)/1.45 var(--serif); letter-spacing:-.01em; color:#fff; } #wic-adr .adr-about2__carta .adr-bio em { color:#FFE3B3; } #wic-adr .adr-about2__carta .adr-quote { border-left-color:#E8A24C; } #wic-adr .adr-about2__carta .adr-quote p { color:#FFE3B3; } /* Tres paneles con aire entre ellos (se ve la foto de atrás). */ #wic-adr .adr-about2__carta-wrap { display:grid; gap:clamp(40px,9vh,110px); } #wic-adr .adr-about2__carta .adr-hace { margin-top:0; padding-top:0; border-top:0; } #wic-adr .adr-about2__carta--cita { margin:0; padding-top:clamp(36px,5vw,64px); padding-bottom:clamp(36px,5vw,64px); text-align:center; } #wic-adr .adr-about2__carta--cita .adr-quote { margin:0; max-width:none; padding:0; border:0; } #wic-adr .adr-about2__carta--cita .adr-quote::before, #wic-adr .adr-about2__carta--cita .adr-quote::after, #wic-adr .adr-quote p::before { content:none; display:none; } #wic-adr .adr-about2__carta--cita .adr-quote p { max-width:21ch; margin:0 auto; font:400 italic clamp(30px,3.6vw,54px)/1.18 var(--serif); letter-spacing:-.01em; color:#FFE3B3; } #wic-adr .adr-about2__carta--cita figcaption { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:22px; font:700 12px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:#fff; } #wic-adr .adr-about2__carta--cita figcaption::before, #wic-adr .adr-about2__carta--cita figcaption::after { content:""; width:36px; height:1px; background:#E8A24C; } #wic-adr .adr-about2__carta .adr-hace .adr-h3 { color:#fff; } #wic-adr .adr-about2__carta .adr-servicios { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px; } #wic-adr .adr-about2__carta .adr-servicios li { border-top-color:rgba(255,255,255,.14); font-size:14.5px; color:rgba(255,255,255,.8); } #wic-adr .adr-about2__carta .adr-servicios b { color:#fff; } #wic-adr .adr-about2__carta .adr-bio__mas { border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.08); color:#fff; } #wic-adr .adr-about2__carta .adr-bio__mas:hover { border-color:#FFE3B3; } @media (max-width:1100px) { #wic-adr .adr-cifras { grid-template-columns:repeat(2,minmax(0,1fr)); } #wic-adr .adr-cifra:nth-child(3) { padding-left:0; border-left:0; } #wic-adr .adr-cifra:nth-child(n/**/+3) { border-top:1px solid rgba(255,255,255,.18); } } @media (max-width:760px) { #wic-adr .adr-about2 h2 { font-size:clamp(34px,10vw,44px); } #wic-adr .adr-about2__capa img { object-position:50% 30%; } #wic-adr .adr-cifra { padding:14px 12px 4px; } #wic-adr .adr-cifra__n { font-size:clamp(44px,13vw,56px); } #wic-adr .adr-cifra__t { font-size:14px; } #wic-adr .adr-about2__carta { border-radius:14px; } #wic-adr .adr-about2__carta .adr-servicios { grid-template-columns:1fr; } } /* Lema + «In the field»: qué hace como explorador y qué filma (Iván, 28-sep). */ #wic-adr .adr-about2__lema { max-width:44ch; margin-top:16px; font:400 clamp(18px,1.5vw,21px)/1.5 var(--sans); color:rgba(255,255,255,.92); text-shadow:0 1px 14px rgba(0,0,0,.35); } /* Con quién trabaja: 4 categorías en vidrio (medios, marcas, ciencia, gobiernos). */ #wic-adr .adr-trabaja__h { margin-top:clamp(28px,4vh,44px); font-size:clamp(24px,2.3vw,34px); color:#fff; } #wic-adr .adr-trabaja__h em { color:#FFE3B3; } #wic-adr .adr-trabaja { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:16px; list-style:none; } #wic-adr .adr-trabaja__cat { display:flex; flex-direction:column; gap:8px; padding:16px 16px 12px; border:1px solid rgba(255,255,255,.26); border-radius:12px; background:rgba(6,44,83,.07); -webkit-backdrop-filter:blur(4px) saturate(1.15); backdrop-filter:blur(4px) saturate(1.15); } #wic-adr .adr-trabaja__q { font:700 11.5px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#FFE3B3; } #wic-adr .adr-trabaja__n { font:600 18px/1.25 var(--serif); color:#fff; } #wic-adr .adr-trabaja__items { margin-top:2px; list-style:none; } #wic-adr .adr-trabaja__items li { border-top:1px solid rgba(255,255,255,.14); } #wic-adr .adr-trabaja__items a { display:flex; align-items:center; min-height:44px; padding:6px 0; font-size:13.5px; line-height:1.4; color:rgba(255,255,255,.86); } #wic-adr .adr-trabaja__items a:hover { color:#FFE3B3; } #wic-adr .adr-trabaja__items a:focus-visible { outline:3px solid #FFE3B3; outline-offset:2px; border-radius:2px; } @media (max-width:1100px) { #wic-adr .adr-trabaja { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:760px) { #wic-adr .adr-trabaja { grid-template-columns:1fr; } } /* PC: el título en la mitad derecha, para no tapar a Adrián (al centro en la foto de MAJA, a la izquierda en la de Subaru). */ /* Iván, 29-sep: título y cifras en el MISMO contenedor. El título, a la derecha con el mismo borde que el panel de cifras (430 px, texto a la derecha, 140 px abajo); las cifras al pie de la primera pantalla. «In the field» y lo demás, después. */ #wic-adr .adr-about2__mas { padding-top:clamp(28px,4vh,44px); } #wic-adr .adr-about2__mas .adr-about2__cred { text-align:right; } @media (min-width:1101px) { /* 140 px de aire arriba cuando la pantalla alcanza; en pantallas bajas se reduce para que las cifras no se salgan. */ #wic-adr .adr-about2__logros { justify-content:flex-start; min-height:calc(100vh - var(--margen,150px)); min-height:calc(100svh - var(--margen,150px)); padding-top:clamp(56px, calc(100vh - var(--margen,150px) - 640px), 140px); padding-top:clamp(56px, calc(100svh - var(--margen,150px) - 640px), 140px); padding-bottom:clamp(20px,3vh,40px); } #wic-adr .adr-about2__intro { align-self:flex-end; width:430px; max-width:100%; text-align:right; } #wic-adr .adr-about2__intro .adr-kicker { justify-content:flex-end; } #wic-adr .adr-about2__intro { margin-bottom:28px; } #wic-adr .adr-about2__intro h2 { max-width:none; font-size:clamp(42px,4vw,62px); } #wic-adr .adr-about2__intro .adr-about2__lema { max-width:none; margin-left:auto; } #wic-adr .adr-about2__logros > .adr-cifras { margin-top:auto; } } @media (min-width:901px) and (max-width:1100px) { #wic-adr .adr-about2__intro { align-self:flex-end; width:min(540px,52%); } } /* Pantallas de PC poco altas (≤ 900 px): título, lema y cifras más compactos para que todo entre en la primera pantalla. */ @media (min-width:1101px) and (max-height:920px) { #wic-adr .adr-about2__intro h2 { font-size:clamp(38px,3.4vw,52px); } #wic-adr .adr-about2__intro .adr-about2__lema { margin-top:10px; font-size:17px; line-height:1.45; } #wic-adr .adr-about2__intro .adr-kicker { margin-bottom:8px; } #wic-adr .adr-about2__logros > .adr-cifras .adr-cifra { padding-top:14px; } #wic-adr .adr-about2__logros > .adr-cifras .adr-cifra__n { font-size:clamp(44px,4.2vw,64px); } #wic-adr .adr-about2__logros > .adr-cifras .adr-cifra__t { margin-top:6px; font-size:14px; } } /* Tablet vertical: recorte vertical de la foto y los logros más abajo, como en celular. */ @media (min-width:761px) and (max-width:1100px) and (orientation:portrait) { #wic-adr .adr-about2__logros { justify-content:flex-start; padding-top:calc(var(--margen,120px) + 40svh); } #wic-adr .adr-about2__capa img { object-position:50% 30%; } } /* Contraste sobre la foto (revisor, 28-sep): velo más parejo y las cifras en un panel de vidrio. */ @media (min-width:761px) { #wic-adr .adr-about2__velo { background:linear-gradient(0deg,rgba(4,18,34,.5) 0%,rgba(4,18,34,.26) 40%,rgba(4,18,34,.1) 72%,rgba(4,18,34,.08) 100%); } #wic-adr .adr-cifras { padding:0 22px 8px; border:1px solid rgba(255,255,255,.26); border-radius:14px; background:rgba(6,30,54,.1); -webkit-backdrop-filter:blur(5px) saturate(1.15); backdrop-filter:blur(5px) saturate(1.15); } #wic-adr .adr-cifra:first-child { padding-left:0; } } #wic-adr .adr-about2 h2, #wic-adr .adr-about2__lema { text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 24px rgba(0,0,0,.5); } #wic-adr .adr-about2__logros p, #wic-adr .adr-about2__logros a, #wic-adr .adr-about2__logros li, #wic-adr .adr-about2__mas p, #wic-adr .adr-about2__mas a, #wic-adr .adr-about2__carta p, #wic-adr .adr-about2__carta li, #wic-adr .adr-about2__carta h3 { text-shadow:0 1px 2px rgba(0,0,0,.6), 0 1px 12px rgba(0,0,0,.45); } #wic-adr .adr-about2__cred { color:rgba(255,255,255,.85); font-size:11.5px; } @media (max-width:760px) { /* Celular: al entrar se ve la foto limpia; los logros suben al bajar, sobre un velo más oscuro. */ #wic-adr .adr-about2__logros { justify-content:flex-start; padding-top:calc(var(--margen,120px) + 46svh); } #wic-adr .adr-about2__velo { background:linear-gradient(0deg, rgba(4,18,34,.72) 0%, rgba(4,18,34,.5) 40%, rgba(4,18,34,.26) 72%, rgba(4,18,34,.16) 100%); } } @media (prefers-reduced-motion:reduce) { #wic-adr .adr-about2__capa { transition:none; } } /* ================= Prensa v2 · «Recognition journey» (Iván, 28-sep: maqueta + especificación) ================= Marfil y navy, dorado apagado para íconos y la línea, teal solo en etiquetas. Nunca rota solo. */ #wic-adr .adr-recor { margin-top:clamp(28px,4vw,48px); } #wic-adr .adr-recor__cab { display:flex; align-items:center; gap:20px; margin-bottom:18px; } #wic-adr .adr-recor__h { flex:none; font-size:clamp(24px,2.2vw,32px); color:var(--teal); } #wic-adr .adr-recor__linea { flex:1 1 auto; height:1px; background:rgba(6,44,83,.22); } #wic-adr .adr-recor__nav { display:flex; align-items:center; gap:6px; flex:none; } #wic-adr .adr-recor__nav[hidden] { display:none; } #wic-adr .adr-recor__hint { margin-right:8px; font:700 11px/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--navy); } #wic-adr .adr-recor__btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:none; font:400 22px/1 var(--sans); color:var(--navy); cursor:pointer; transition:background-color .2s ease; } #wic-adr .adr-recor__btn:hover { background:rgba(6,44,83,.07); } #wic-adr .adr-recor__btn:disabled { opacity:.3; cursor:default; background:none; } #wic-adr .adr-recor__btn:focus-visible { outline:3px solid var(--cromo); outline-offset:2px; } /* La vía: tarjetas unidas por una línea fina con un círculo en medio (el que llega a 2026, relleno). */ #wic-adr .adr-recor__via { --hueco:clamp(24px,3vw,72px); display:flex; gap:var(--hueco); margin:0; padding:6px 2px 16px; list-style:none; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; overscroll-behavior-x:contain; cursor:default; } #wic-adr .adr-recor__via::-webkit-scrollbar { display:none; } #wic-adr .adr-recor__via.arrastra { cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; user-select:none; } #wic-adr .adr-recor__hito { position:relative; flex:0 0 calc((100% - 3 * var(--hueco)) / 4); min-width:210px; scroll-snap-align:start; } #wic-adr .adr-recor__hito:not(:last-child)::after { content:""; position:absolute; top:50%; left:100%; width:var(--hueco); height:1.5px; background:rgba(185,127,53,.55); } #wic-adr .adr-recor__hito:not(:last-child)::before { content:""; position:absolute; z-index:1; top:calc(50% - 8px); left:calc(100% + var(--hueco) / 2 - 8px); width:16px; height:16px; border:1.5px solid #B97F35; border-radius:50%; background:#FAF7F2; } #wic-adr .adr-recor__hito--previo::before { background:#E8A24C !important; border-color:#E8A24C !important; } #wic-adr .adr-recor__card { display:flex; flex-direction:column; align-items:center; height:100%; padding:22px 20px 20px; border:1px solid rgba(185,127,53,.28); border-radius:14px; background:#FAF7F2; box-shadow:0 1px 2px rgba(6,44,83,.05), 0 16px 32px -26px rgba(6,44,83,.4); text-align:center; color:var(--navy); transition:transform .25s ease, box-shadow .25s ease, background-color .6s ease, border-color .6s ease; } #wic-adr .adr-recor__card * { transition:color .6s ease, background-color .6s ease, border-color .6s ease; } #wic-adr .adr-recor__hito:not(:last-child)::before, #wic-adr .adr-recor__hito:not(:last-child)::after { transition:background-color .6s ease, border-color .6s ease; } #wic-adr .adr-recor__card:hover { transform:translateY(-3px); box-shadow:0 1px 2px rgba(6,44,83,.05), 0 22px 40px -26px rgba(6,44,83,.5); } #wic-adr .adr-recor__card:focus-visible { outline:3px solid var(--cromo); outline-offset:-4px; } #wic-adr .adr-recor__ico { display:grid; place-items:center; width:74px; height:74px; border-radius:50%; background:rgba(232,162,76,.16); color:#B97F35; } #wic-adr .adr-recor__ico svg { width:40px; height:40px; } #wic-adr .adr-recor__anio { margin-top:14px; font:600 clamp(44px,4.2vw,62px)/.95 var(--serif); letter-spacing:-.03em; color:var(--tinta); } #wic-adr .adr-recor__tipo { margin-top:10px; font:700 11.5px/1.35 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--teal); } #wic-adr .adr-recor__raya { width:26px; height:2px; margin:12px 0; border-radius:2px; background:#E8A24C; } #wic-adr .adr-recor__tit { font:600 clamp(18px,1.5vw,21px)/1.22 var(--serif); letter-spacing:-.01em; color:var(--navy); } #wic-adr .adr-recor__obra { margin-top:8px; font-size:14.5px; line-height:1.45; color:var(--tinta); } #wic-adr .adr-recor__fuente { margin-top:auto; padding-top:12px; font:600 12.5px/1.3 var(--sans); color:var(--teal); } /* El más reciente: navy con acentos dorados. */ #wic-adr .adr-recor__hito--actual .adr-recor__card { border:1.5px solid #E8A24C; background:var(--navy); color:#fff; } #wic-adr .adr-recor__hito--actual .adr-recor__ico { background:none; border:1.5px solid rgba(232,162,76,.6); color:#E8A24C; } #wic-adr .adr-recor__hito--actual .adr-recor__anio { color:#FFE3B3; } #wic-adr .adr-recor__hito--actual .adr-recor__tipo, #wic-adr .adr-recor__hito--actual .adr-recor__tit { color:#fff; } #wic-adr .adr-recor__hito--actual .adr-recor__obra { color:rgba(255,255,255,.82); } #wic-adr .adr-recor__hito--actual .adr-recor__fuente { color:#FFE3B3; } /* More milestones: fichas compactas ícono + año + fuente. */ #wic-adr .adr-recor__cab--mas { margin-top:clamp(32px,4vw,52px); } #wic-adr .adr-recor__todos { flex:none; display:inline-flex; align-items:center; gap:10px; min-height:44px; font:600 17px/1.2 var(--serif); color:var(--teal); } #wic-adr .adr-recor__todos:hover { color:var(--navy); } #wic-adr .adr-recor__todos:focus-visible { outline:3px solid var(--cromo); outline-offset:3px; } #wic-adr .adr-recor__chips { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; list-style:none; } #wic-adr .adr-recor__chip { display:grid; grid-template-columns:auto auto minmax(0,1fr); align-items:center; gap:14px; height:100%; padding:14px 16px; border:1px solid rgba(6,44,83,.12); border-radius:12px; background:#FAF7F2; color:var(--navy); transition:border-color .2s ease; } #wic-adr .adr-recor__chip:hover { border-color:rgba(185,127,53,.55); } #wic-adr .adr-recor__chip:focus-visible { outline:3px solid var(--cromo); outline-offset:2px; } #wic-adr .adr-recor__chip-ico { display:grid; place-items:center; width:50px; height:50px; border-radius:50%; background:rgba(232,162,76,.16); color:#B97F35; } #wic-adr .adr-recor__chip-anio { align-self:stretch; display:flex; align-items:center; padding:0 14px; border-left:1px solid rgba(6,44,83,.12); border-right:1px solid rgba(6,44,83,.12); font:600 22px/1 var(--serif); color:#B97F35; } #wic-adr .adr-recor__chip-txt { display:flex; flex-direction:column; gap:3px; min-width:0; } #wic-adr .adr-recor__chip-tipo { font:700 10.5px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--teal); } #wic-adr .adr-recor__chip-tit { font:600 15.5px/1.25 var(--serif); color:var(--navy); } #wic-adr .adr-recor__chip-f { font-size:12.5px; color:var(--tinta); } /* Lista completa («View all recognition»): sin JS se ve; con JS se abre con el enlace. */ #wic-adr .adr-recor__lista { margin-top:18px; padding:8px 20px; border:1px solid rgba(6,44,83,.12); border-radius:12px; background:#FFFFFF; list-style:none; } #wic-adr .adr-recor__lista[hidden] { display:none; } #wic-adr .adr-recor__lista li { display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:16px; align-items:baseline; padding:12px 0; border-top:1px solid rgba(6,44,83,.08); } #wic-adr .adr-recor__lista li:first-child { border-top:0; } #wic-adr .adr-recor__lista-anio { font:600 18px/1.2 var(--serif); color:#B97F35; } #wic-adr .adr-recor__lista-txt { font-size:15px; line-height:1.45; color:var(--navy); } #wic-adr .adr-recor__lista-txt b { font-weight:700; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); } #wic-adr .adr-recor__lista a { display:inline-flex; align-items:center; min-height:44px; font:600 13px/1.2 var(--sans); color:var(--teal); white-space:nowrap; } /* Fichas: 4 en fila solo en pantallas anchas; si no, 2 + 2 (simétrico). */ @media (max-width:1500px) { #wic-adr .adr-recor__chips { grid-template-columns:repeat(2,minmax(0,1fr)); } #wic-adr .adr-recor__chip-tit { font-size:17px; } } /* Celular: línea vertical, lo más nuevo arriba; sin flechas. */ @media (max-width:760px) { #wic-adr .adr-recor__cab { flex-wrap:wrap; gap:10px 16px; } #wic-adr .adr-recor__cab .adr-recor__linea { display:none; } #wic-adr .adr-recor__nav { display:none !important; } #wic-adr .adr-recor__via { position:relative; flex-direction:column-reverse; gap:18px; overflow:visible; padding:4px 0 4px 30px; scroll-snap-type:none; } #wic-adr .adr-recor__hito:not(:first-child)::after { display:block !important; content:""; position:absolute; left:-21.75px; top:42px; width:1.5px; height:calc(100% + 18px); background:rgba(185,127,53,.55); } #wic-adr .adr-recor__hito { flex:none; min-width:0; } #wic-adr .adr-recor__hito:not(:last-child)::after { left:-21.75px; } #wic-adr .adr-recor__hito::before, #wic-adr .adr-recor__hito:not(:last-child)::before { content:""; position:absolute; z-index:1; top:34px; left:-29px; width:16px; height:16px; border:1.5px solid #B97F35; border-radius:50%; background:#FAF7F2; } #wic-adr .adr-recor__hito--actual::before { background:#E8A24C; border-color:#E8A24C; } #wic-adr .adr-recor__hito--previo::before { background:#FAF7F2 !important; border-color:#B97F35 !important; } #wic-adr .adr-recor__card { flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:14px; text-align:left; padding:16px; } #wic-adr .adr-recor__ico { width:52px; height:52px; } #wic-adr .adr-recor__ico svg { width:26px; height:26px; } #wic-adr .adr-recor__anio { margin-top:0; font-size:40px; } #wic-adr .adr-recor__tipo { flex:1 1 100%; margin-top:10px; } #wic-adr .adr-recor__raya { display:none; } #wic-adr .adr-recor__tit { flex:1 1 100%; margin-top:4px; } #wic-adr .adr-recor__obra { flex:1 1 100%; margin-top:4px; } #wic-adr .adr-recor__fuente { flex:1 1 100%; } #wic-adr .adr-recor__chips { grid-template-columns:1fr; gap:10px; } #wic-adr .adr-recor__lista { padding:4px 14px; } #wic-adr .adr-recor__lista li { grid-template-columns:52px minmax(0,1fr); } #wic-adr .adr-recor__lista a { grid-column:2; } } /* Prensa en PC (Iván, 30-sep, su imagen): sin tarjetas; ícono en aro dorado, tallo y punto sobre una ola que respira de orilla a orilla. Los puntos son anclas: no se mueven ni con el mouse. Celular y tablet no cambian. */ #wic-adr .adr-recor__nodo, #wic-adr .adr-recor__ola { display:none; } /* La ola lleva «hidden» para que la hoja de estilos anterior no la muestre; aquí se enciende en PC. */ @media (min-width:1025px) { #wic-adr .adr-recor { margin-top:clamp(64px,7vw,120px); } #wic-adr .adr-recor > .adr-recor__cab:first-child { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } #wic-adr .adr-recor__pista { position:relative; } #wic-adr .adr-recor__ola { display:block; position:absolute; z-index:0; top:50px; left:calc(50% - 50vw); width:100vw; height:120px; pointer-events:none; background:linear-gradient(#E8A24C,#E8A24C) 0 50% / 100% 2px no-repeat; } #wic-adr .adr-recor__ola.lista { background:none; } #wic-adr .adr-recor__ola svg { display:block; width:100%; height:100%; overflow:visible; } #wic-adr .adr-recor__ola path { fill:none; stroke:#E8A24C; stroke-width:2; vector-effect:non-scaling-stroke; } #wic-adr .adr-recor__via { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(24px,3vw,56px); padding:0; overflow:visible; scroll-snap-type:none; } #wic-adr .adr-recor__hito { min-width:0; } #wic-adr .adr-recor__hito::before, #wic-adr .adr-recor__hito::after { content:none !important; } #wic-adr .adr-recor__hito .adr-recor__card { padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:var(--navy); } #wic-adr .adr-recor__hito .adr-recor__card:hover { transform:none; box-shadow:none; } #wic-adr .adr-recor__hito .adr-recor__card:focus-visible { outline-offset:6px; } #wic-adr .adr-recor__hito .adr-recor__ico { width:78px; height:78px; border:1.5px solid #E8A24C; background:none; color:#E8A24C; } #wic-adr .adr-recor__hito .adr-recor__ico svg { width:42px; height:42px; stroke-width:1.7; } #wic-adr .adr-recor__nodo { display:block; position:relative; width:1.5px; height:32px; background:#E8A24C; } #wic-adr .adr-recor__nodo::after { content:""; position:absolute; left:50%; bottom:-10px; width:20px; height:20px; margin-left:-10px; box-sizing:border-box; border:3px solid #FAF7F2; border-radius:50%; background:#E8A24C; } #wic-adr .adr-recor__hito .adr-recor__anio { margin-top:38px; font-size:clamp(52px,4.3vw,66px); color:#B97F35; } #wic-adr .adr-recor__hito .adr-recor__tipo { margin-top:12px; font-size:12.5px; letter-spacing:.16em; color:var(--teal); } #wic-adr .adr-recor__hito .adr-recor__raya { width:30px; margin:14px 0 16px; } #wic-adr .adr-recor__hito .adr-recor__tit { font-size:clamp(22px,1.9vw,27px); line-height:1.2; color:var(--navy); transition:color .2s ease; } #wic-adr .adr-recor__hito .adr-recor__card:hover .adr-recor__tit { color:var(--teal); } #wic-adr .adr-recor__hito .adr-recor__obra { margin-top:10px; font-size:17.5px; line-height:1.45; color:var(--tinta); } #wic-adr .adr-recor__hito .adr-recor__fuente { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } #wic-adr .adr-recor__cab--mas { margin-top:clamp(64px,6vw,96px); margin-bottom:26px; gap:28px; } #wic-adr .adr-recor__cab--mas .adr-recor__h { font-size:clamp(32px,2.8vw,42px); color:var(--navy); } #wic-adr .adr-recor__cab--mas .adr-recor__linea { height:1.5px; background:#E8A24C; } #wic-adr .adr-recor__todos { font:500 19px/1.2 var(--sans); color:var(--cromo); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px; } #wic-adr .adr-recor__chips { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 0; } #wic-adr .adr-recor__chips > li { padding:0 22px; } #wic-adr .adr-recor__chips > li:nth-child(odd) { padding-left:0; } #wic-adr .adr-recor__chips > li:nth-child(even) { border-left:1px solid rgba(6,44,83,.16); } #wic-adr .adr-recor__chip { grid-template-columns:auto minmax(0,1fr); grid-template-areas:"ico anio" "ico txt"; align-items:start; gap:0 22px; height:auto; padding:0; border:0; border-radius:0; background:none; } #wic-adr .adr-recor__chip:hover .adr-recor__chip-tit { color:var(--teal); } #wic-adr .adr-recor__chip-ico { grid-area:ico; width:auto; height:auto; padding-top:4px; background:none; color:#E8A24C; } #wic-adr .adr-recor__chip-ico svg { width:44px; height:44px; stroke-width:1.6; } #wic-adr .adr-recor__chip-anio { grid-area:anio; align-self:auto; display:block; padding:0 0 0 22px; border:0; border-left:1px solid rgba(6,44,83,.16); font-size:25px; } #wic-adr .adr-recor__chip-txt { grid-area:txt; gap:4px; padding:6px 0 0 22px; border-left:1px solid rgba(6,44,83,.16); } #wic-adr .adr-recor__chip-tipo { font-size:11.5px; letter-spacing:.16em; } #wic-adr .adr-recor__chip-tit { font-size:20px; line-height:1.2; transition:color .2s ease; } #wic-adr .adr-recor__chip-f { font-size:15px; } } @media (min-width:1200px) { #wic-adr .adr-recor__chips { grid-template-columns:repeat(4,minmax(0,1fr)); } #wic-adr .adr-recor__chips > li:nth-child(odd) { padding-left:22px; } #wic-adr .adr-recor__chips > li:first-child { padding-left:0; } #wic-adr .adr-recor__chips > li + li { border-left:1px solid rgba(6,44,83,.16); } } @media (min-width:1101px) { #wic-adr .adr-about2__carta .adr-bio { column-count:2; column-gap:56px; } #wic-adr .adr-about2__carta .adr-bio > p { break-inside:avoid; } #wic-adr .adr-about2__carta .adr-bio .adr-bio__lead, #wic-adr .adr-about2__carta .adr-quote { column-span:all; } } /* ================= Field notes · What's in Cabo × Adrián De Antoni (Iván, 29-sep: maqueta + código) ================= Banda navy. #E8A24C solo en líneas y detalles; #B97F35 en los números grandes. Textura oficial «Corrientes entrelazadas» (blanco sobre oscuro, fusión screen) al 12 %: atmósfera, nunca protagonista. */ #wic-adr .adr-notas { background:#062C53; color:#fff; padding:clamp(56px,7vw,104px) 0; } #wic-adr .adr-notas__in { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:center; gap:clamp(32px,5vw,80px); } #wic-adr .adr-notas__marcas { display:flex; align-items:center; gap:18px; margin-bottom:clamp(28px,3.4vw,44px); } #wic-adr .adr-notas__marcas img { width:auto; height:clamp(46px,4.2vw,62px); } #wic-adr .adr-notas__x { font:400 22px/1 var(--sans); color:rgba(255,255,255,.6); } #wic-adr .adr-notas__nombre { font:700 clamp(26px,2.7vw,40px)/1 "WIC Nombre","Arial Narrow",Arial,sans-serif; letter-spacing:.07em; text-transform:uppercase; color:#fff; } #wic-adr .adr-notas__kicker { color:#FFE3B3; } #wic-adr .adr-notas h2 { font-size:clamp(38px,4.4vw,64px); line-height:1.04; color:#fff; } #wic-adr .adr-notas h2 em { color:#B97F35; } #wic-adr .adr-notas__lede { margin-top:18px; max-width:56ch; font-size:clamp(17px,1.4vw,19px); line-height:1.6; color:rgba(255,255,255,.88); } #wic-adr .adr-notas__caja { position:relative; isolation:isolate; overflow:hidden; padding:36px 42px 28px; border:1px solid rgba(255,255,255,.22); border-radius:26px; background:rgba(6,44,83,.42); } #wic-adr .adr-notas__caja::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:url("img/textura-corrientes-blancas.webp") center / cover no-repeat; mix-blend-mode:screen; opacity:.12; } #wic-adr .adr-notas__caja > * { position:relative; z-index:1; } #wic-adr .adr-notas__cab { display:flex; align-items:center; gap:16px; margin-bottom:22px; font:700 12.5px/1 var(--sans); letter-spacing:.19em; text-transform:uppercase; color:#E8A24C; } #wic-adr .adr-notas__cab::after { content:""; flex:1; height:2px; background:#E8A24C; } #wic-adr .adr-nota-campo { display:grid; grid-template-columns:92px 1fr; gap:20px; align-items:center; padding:20px 0; border-top:2px solid rgba(232,162,76,.9); } #wic-adr .adr-nota-campo:first-of-type { border-top:0; padding-top:0; } #wic-adr .adr-nota-campo__num { padding-right:18px; border-right:2px solid #E8A24C; font:600 clamp(48px,4vw,70px)/.82 var(--serif); color:#B97F35; } #wic-adr .adr-nota-campo h3 { margin:0 0 7px; font:700 15.5px/1.2 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:#fff; } #wic-adr .adr-nota-campo p { margin:0; font-size:16px; line-height:1.45; color:rgba(255,255,255,.88); } @media (max-width:1000px) { #wic-adr .adr-notas__in { grid-template-columns:1fr; } } @media (max-width:680px) { #wic-adr .adr-notas__caja { padding:28px 22px; border-radius:18px; } #wic-adr .adr-nota-campo { grid-template-columns:58px 1fr; gap:14px; } #wic-adr .adr-nota-campo__num { padding-right:12px; font-size:40px; } #wic-adr .adr-notas__marcas { gap:12px; } #wic-adr .adr-notas__nombre { font-size:clamp(18px,5.6vw,22px); white-space:nowrap; } #wic-adr .adr-notas__marcas img { height:40px; } } /* ================= Celular (Iván, 29-sep) ================= Premios: una lista sencilla con la corona de olivo (sin recorrido ni fichas). More coverage: sin las tarjetas que rotan; solo el mapa y «See all 30 mentions» para desplegar el archivo. */ #wic-adr .adr-recor__movil { display:none; } @media (max-width:760px) { #wic-adr .adr-recor > .adr-recor__cab, #wic-adr .adr-recor__via, #wic-adr .adr-recor__chips, #wic-adr .adr-recor__lista { display:none !important; } #wic-adr .adr-recor__movil { display:grid; gap:10px; margin-top:22px; list-style:none; } #wic-adr .adr-recor__movil a { display:grid; grid-template-columns:56px minmax(0,1fr); align-items:center; gap:14px; padding:14px 16px 14px 12px; border:1px solid rgba(185,127,53,.3); border-radius:14px; background:#FAF7F2; color:var(--navy); } #wic-adr .adr-recor__movil li:first-child a { border-color:#E8A24C; background:var(--navy); color:#fff; } #wic-adr .adr-recor__movil-ico { display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:rgba(232,162,76,.14); color:#B97F35; } #wic-adr .adr-recor__movil-ico svg { width:44px; height:44px; } #wic-adr .adr-recor__movil li:first-child .adr-recor__movil-ico { background:none; border:1.5px solid rgba(232,162,76,.6); color:#E8A24C; } #wic-adr .adr-recor__movil-txt { display:flex; flex-direction:column; gap:3px; min-width:0; } #wic-adr .adr-recor__movil-anio { font:700 11px/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--teal); } #wic-adr .adr-recor__movil li:first-child .adr-recor__movil-anio { color:#FFE3B3; } #wic-adr .adr-recor__movil-tit { font:600 17px/1.25 var(--serif); } #wic-adr .adr-recor__movil-obra { font-size:13px; line-height:1.4; color:var(--tinta); } #wic-adr .adr-recor__movil li:first-child .adr-recor__movil-obra { color:rgba(255,255,255,.8); } #wic-adr .adr-cob__tarjetas, #wic-adr .adr-cob__lado > .adr-cob__ctrl, #wic-adr .adr-cob__pie .adr-cob__btn { display:none !important; } #wic-adr .adr-cob__pie { justify-content:center; text-align:center; } #wic-adr .adr-cob__pie .adr-cob__nota { max-width:none; padding-bottom:14px; } #wic-adr .adr-cob__pie .adr-cob__nota::after { left:50%; margin-left:-16px; } #wic-adr .adr-cob__pie .adr-cob__acciones { width:100%; justify-content:center; } #wic-adr .adr-cob__pie .adr-cob__link { justify-content:center; width:100%; min-height:52px; padding:12px 20px; border-radius:6px; background:var(--cromo); color:#fff; text-decoration:none; font-size:15.5px; } } /* His story y el principio de About, aún más transparentes (Iván, 29-sep: PC y celular). */ #wic-adr .adr-about2__carta { background:rgba(6,30,54,.012); -webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px); border-color:rgba(255,255,255,.24); } #wic-adr .adr-about2__carta p, #wic-adr .adr-about2__carta li, #wic-adr .adr-about2__carta h3, #wic-adr .adr-about2__carta figcaption { text-shadow:0 1px 2px rgba(0,0,0,.7), 0 1px 14px rgba(0,0,0,.55); } @media (min-width:761px) { #wic-adr .adr-cifras { background:rgba(6,30,54,.05); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); } } @media (max-width:760px) { #wic-adr .adr-about2__velo { background:linear-gradient(0deg, rgba(4,18,34,.6) 0%, rgba(4,18,34,.38) 40%, rgba(4,18,34,.18) 72%, rgba(4,18,34,.1) 100%); } }