/* ===================================================================== Tipografias. Todo servido desde el propio servidor: ni una peticion a Google, que ademas era el unico punto de la pagina que enviaba la IP del visitante a un tercero antes de que aceptara nada. Tres familias, todas en WOFF2 y por subconjuntos: Roboto 300 y 400 textos, etiquetas, botones Instrument Serif 400 y 400i titulares y la definicion Noto Serif JP 200 y 400 los diez kanji GT Super NO esta instalada en pages.balfego.com, asi que Instrument Serif hace su papel: es el equivalente con el que se aprobo el diseno. Cuando lleguen los .woff2 de GT Super, descomenta el bloque de mas abajo y toma el relevo sola, porque la pila ya la pide primero. ===================================================================== */ /* --- Instrument Serif, para los titulares -------------------------- */ @font-face{ font-family:"Instrument Serif"; src:url("fonts/instrument-serif-regular-latin.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Instrument Serif"; src:url("fonts/instrument-serif-regular-latin-ext.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:"Instrument Serif"; src:url("fonts/instrument-serif-italic-latin.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Instrument Serif"; src:url("fonts/instrument-serif-italic-latin-ext.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Descomenta cuando los archivos esten en bricks-child/fonts/ @font-face{ font-family:"GT Super Display"; src:url("fonts/GT-Super-Display-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"GT Super Display"; src:url("fonts/GT-Super-Display-Regular-Italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; } @font-face{ font-family:"GT Super Text"; src:url("fonts/GT-Super-Text-Light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; } @font-face{ font-family:"GT Super Text"; src:url("fonts/GT-Super-Text-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"GT Super Text"; src:url("fonts/GT-Super-Text-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } */ /* ===================================================================== Reset del contenedor de Bricks. Automatic.css trae esta regla: section > div:where(:not(.bricks-shape-divider)){ display:flex; flex-direction:column; align-items:flex-start; gap:var(--content-gap); } El elemento que envuelve el marcado -Code o Shortcode, segun como este montado- es un div hijo de una section, asi que la hereda. Se cubren las dos clases: al pasar de Code a Shortcode, .brxe-code desaparece del DOM y con ella se iria todo este blindaje. En una columna flex, align-items:flex-start hace que cada hijo mida su max-content en lugar del ancho del padre: como el carrusel de finalistas son unos 2700px, todo lo de dentro se calcula sobre ese ancho y los contenedores centrados se van a la derecha. La regla de ACSS tiene especificidad (0,0,2); una clase la gana. Los .wrap se defienden solos mas abajo, donde declaran su display. ===================================================================== */ /* ===================================================================== Contenedores nativos de Bricks. Al construir la pagina con elementos nativos (section / container / block) hay que neutralizar los valores por defecto de BRICKS, que van en su frontend-layer.min.css y no en ACSS: .brxe-section { display:flex; flex-direction:column; align-items:center; width:100% } .brxe-container{ display:flex; flex-direction:column; align-items:flex-start; width:1100px } .brxe-block { display:flex; flex-direction:column; align-items:flex-start; width:100% } Lo que mas duele es flex-direction: hay 20 reglas propias con display:flex que no declaran direccion porque row es el valor por defecto de CSS -.nav__in, .brand, .hero__top, .marquee__track...- y con el column de Bricks se apilan. El nav pasaba de 81 a 516 px. Tambien importa el width:1100px de los contenedores. Van en @layer, asi que cualquier regla sin capa les gana: no hace falta !important. Esto lo neutraliza con una clase, (0,1,0), sin !important: las clases propias de mas abajo -.wrap, .hero__in, .ed__grid...- declaran su display y su gap y ganan por orden de carga, que es lo que se quiere. El :has() de arriba mira solo hijos directos a proposito: un SVG dentro de .hero__top no debe descuadrar el padding de la seccion. ===================================================================== */ .brxe-section{ display:block; flex-direction:row; align-items:stretch; gap:0; width:100%; max-width:none; min-width:0; margin-inline:0; padding:0; } /* width:auto, no 100%: un div normal llena a su padre en flujo y mide su contenido cuando es item flex, que es contra lo que se diseno la pagina. Con width:100% el conmutador de idiomas -.langs, item flex del nav- pasaba de 85 a 1225 px y desbordaba a lo ancho. Y max-width:none porque el max-width:100% de Bricks capa el width:max-content de .marquee__track: la tira quedaba en 1369 px y el texto se pisaba a si mismo. */ .brxe-container, .brxe-block{ display:block; flex-direction:row; align-items:stretch; gap:0; width:auto; max-width:none; min-width:0; margin-inline:0; padding:0; } /* display:revert devuelve a cada etiqueta su valor del navegador -block para p, h2 y div; inline para span, b, i, em; inline-block para button-, que es contra lo que se diseno la pagina. Bricks los pone todos en flex, y entonces: - el de .brand__txt se vuelve item flex y la marca sale en una linea de 248 px en vez de dos - cada enlace del nav es un contenedor flex y el texto parte en dos lineas: 52 px de alto en vez de 26 Las clases propias que SI quieren flex -.btn, .brand, .hero__top...- lo declaran mas abajo y ganan por orden de carga. */ .brxe-text-basic, .brxe-text-link, .brxe-heading, .brxe-button{ display:revert; flex-direction:row; align-items:stretch; gap:0; max-width:none; min-width:0; } a:where(.brxe-text-link){ color:inherit; } /* El estilo de enlaces del tema pesa (0,1,0) y le gana a la regla de arriba. Con dos clases se gana sin pisar nada: ninguna regla propia declara el color de .brand. Sin esto el sello del nav sale azul. */ .nav .brand, .mnav .brand, .foot .brand{ color:inherit; } :where(.brxe-text-basic, .brxe-heading) a{ color:inherit; } .brxe-code, .brxe-shortcode{ display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; gap:0 !important; } .brxe-code > *, .brxe-shortcode > *{ align-self:stretch !important; min-width:0 !important; max-width:100% !important; } .brxe-section:has(> .brxe-code), .brxe-section:has(> .brxe-shortcode), .brxe-container:has(> .brxe-code), .brxe-container:has(> .brxe-shortcode), .brxe-block:has(> .brxe-code), .brxe-block:has(> .brxe-shortcode){ display:block !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; gap:0 !important; } /* ===================================================================== Elementos semanticos. Automatic.css los estiliza directamente (p, figcaption, b, dl...) y esas reglas ganan alli donde nuestras clases no declaran nada. El efecto medido en produccion era un interlineado de 1.32 en vez de 1.72 -texto un 23%% mas apretado en toda la pagina- y el figcaption de la sede a 15.3px y en gris. El :where() hace que el selector pese (0,0,1): lo justo para ganar a las reglas de elemento del host por orden de carga, y sin llegar a pisar nuestras propias clases, que son (0,1,0). ===================================================================== */ p:where(.brxe-text-basic){ margin:0; line-height:1.72; } figcaption:where(.brxe-text-basic){ font-size:inherit; color:inherit; line-height:inherit; } h1:where(.brxe-heading), h2:where(.brxe-heading), h3:where(.brxe-heading), h4:where(.brxe-heading), h5:where(.brxe-heading), h6:where(.brxe-heading){ margin:0; } b:where(.brxe-text-basic), strong:where(.brxe-text-basic), em:where(.brxe-text-basic), i:where(.brxe-text-basic), small:where(.brxe-text-basic), span:where(.brxe-text-basic){ font-size:inherit; line-height:inherit; } dl:where(.brxe-block), dt:where(.brxe-text-basic), dd:where(.brxe-text-basic){ margin:0; } button:where(.brxe-button){ font-size:inherit; line-height:inherit; } :where(.brxe-code, .brxe-shortcode) p{ margin:0; line-height:1.72; } :where(.brxe-code, .brxe-shortcode) figcaption{ font-size:inherit; color:inherit; line-height:inherit; } :where(.brxe-code, .brxe-shortcode) h1, :where(.brxe-code, .brxe-shortcode) h2, :where(.brxe-code, .brxe-shortcode) h3, :where(.brxe-code, .brxe-shortcode) h4{ margin:0; } :where(.brxe-code, .brxe-shortcode) b, :where(.brxe-code, .brxe-shortcode) strong, :where(.brxe-code, .brxe-shortcode) em, :where(.brxe-code, .brxe-shortcode) i, :where(.brxe-code, .brxe-shortcode) small{ font-size:inherit; line-height:inherit; } :where(.brxe-code, .brxe-shortcode) dl, :where(.brxe-code, .brxe-shortcode) dt, :where(.brxe-code, .brxe-shortcode) dd{ margin:0; } :where(.brxe-code, .brxe-shortcode) img, :where(.brxe-code, .brxe-shortcode) svg{ border-radius:0; } /* ============================================================ ITAMAE BALFEGO 2026 - hoja de estilos de la landing Pegar en Bricks > Settings > Custom code > Custom CSS, o encolar este archivo desde el child theme. ============================================================ */ /* ============================================================ ITAMAE BALFEGÓ 2026 — landing Committed dark visual world (event poster). Every colour is painted explicitly so the page never borrows the host theme. ============================================================ */ :root{ /* --- ground: the sea at depth, derived from Balfegó navy #0C2340 --- */ --ink: #070E19; --ink-2: #0A1526; --navy: #0C2340; /* corporate */ --navy-2: #102B4C; --navy-3: #16385F; /* --- ink on dark: sushi rice, warm but not cream --- */ --rice: #F2EFE9; --rice-2: #E6E1D7; /* --- knife steel: the secondary voice --- */ --steel: #94A7BD; --steel-dim: #7A8EA6; /* --- the single bold moment: akami, deep bluefin red --- */ --akami: #A8151E; --akami-lift: #C8232E; --line: rgba(190,209,232,.15); --line-strong: rgba(190,209,232,.32); --line-rice: rgba(12,35,64,.28); --f-display: "GT Super Display","GT Super Text","Instrument Serif",Georgia,"Times New Roman",serif; --f-body: "Roboto","Helvetica Neue",Arial,sans-serif; --f-ui: "Roboto","Helvetica Neue",Arial,sans-serif; --f-jp: "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif; --pad: clamp(1.25rem, 5vw, 6rem); --rail: 3.5rem; --maxw: 1480px; --sec-y: clamp(5rem, 11vw, 10.5rem); } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } body{ margin:0; background:var(--ink); color:var(--fg); font-family:var(--f-body); font-size:1.0625rem; line-height:1.72; font-optical-sizing:auto; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg{ max-width:100%; display:block; } a{ color:inherit; } /* La selecció de text, en blau i no en vermell. Abans era «background:var(--akami)», el vermell de marca. I no era per caprici: la pàgina té seccions fosques (fons #070E19) i seccions clares (crema o blanc), i aquell vermell és dels pocs tons que es distingeixen dels dos fons alhora. Per això no es pot canviar per un sol blau. El blau corporatiu #0C2340 sobre el fons fosc dóna 1,6:1 de contrast: la selecció seria invisible justament a la meitat de la pàgina. Van dos blaus, un per context, i tots dos són de la paleta: seccions fosques → fons --steel amb text --ink 7,9:1 seccions clares → fons --navy amb text --rice 13,8:1 El segon és el blau corporatiu de debò. El primer és el blau clar de la mateixa família, l'únic que es veu sobre un fons gairebé negre. */ ::selection{ background:var(--steel); color:var(--ink); } #edicion ::selection, #jurado ::selection, #jornada ::selection, #patrocinadores ::selection{ background:var(--navy); color:var(--rice); } :focus-visible{ outline:2px solid var(--steel); outline-offset:3px; border-radius:1px; } /* ---------- fine grain over the whole page ---------- */ .grain{ position:fixed; inset:0; z-index:80; pointer-events:none; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- shared shells ---------- */ /* Los frameworks del host (Automatic.css, Bricks) convierten section, div y figure en contenedores flex con el eje transversal centrado o en flex-start. Entonces cada hijo mide su fit-content en lugar del ancho disponible, y lo que no tiene tamano intrinseco -como el hueco de imagen de la sede, que solo lleva aspect-ratio- colapsa a unos pocos pixeles. Declarar display y width nos hace inmunes a todo eso. Las variantes con display propio (.nav__in, .hero__in, .live__in) se declaran mas abajo y siguen mandando. */ .hero, .sec, .foot{ display:block; } .wrap{ display:block; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); } .sec{ padding-block:var(--sec-y); position:relative; } .sec + .sec{ border-top:1px solid var(--rule); } section[id]{ scroll-margin-top:5.25rem; } .eyebrow{ font-family:var(--f-ui); font-weight:300; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-2); margin:0; } h1,h2,h3,h4{ font-family:var(--f-display); font-weight:400; margin:0; text-wrap:balance; line-height:1; } .h-sec{ font-size:clamp(2.15rem, 5.4vw, 4.5rem); letter-spacing:-.015em; line-height:.98; } .h-sec em{ font-style:italic; } .lede{ font-family:var(--f-body); font-weight:200; font-size:clamp(1.3rem, 2.35vw, 2rem); line-height:1.36; letter-spacing:-.01em; color:var(--fg); margin:0; text-wrap:pretty; } .body{ color:var(--fg-2); max-width:62ch; margin:0; } .body strong{ color:var(--fg); font-weight:400; } .body + .body{ margin-top:1.1rem; } /* hairline divider. hr collapses to nothing inside a flex column unless width/align-self are stated, so state them. */ .rule{ height:1px; width:100%; flex:0 0 1px; align-self:stretch; background:var(--rule); border:0; margin:0; padding:0; } /* ---------- vertical rail ---------- */ .rail{ position:fixed; top:0; left:0; bottom:0; width:var(--rail); z-index:40; display:none; border-right:1px solid var(--rule); background:linear-gradient(180deg,var(--ink),rgba(7,14,25,.35)); backdrop-filter:blur(6px); } .rail span{ position:absolute; left:50%; bottom:2.25rem; transform:translateX(-50%); writing-mode:vertical-rl; text-orientation:mixed; font-family:var(--f-ui); font-size:.66rem; font-weight:300; letter-spacing:.34em; text-transform:uppercase; color:var(--fg-3); white-space:nowrap; } .rail b{ position:absolute; left:50%; top:1.5rem; transform:translateX(-50%); font-family:var(--f-jp); font-weight:200; font-size:1.05rem; color:var(--fg-3); } @media (min-width:1180px){ .rail{ display:block; } body{ padding-left:var(--rail); } } /* ---------- nav ---------- */ .nav{ position:sticky; top:0; z-index:50; border-bottom:1px solid transparent; transition:background .35s ease, border-color .35s ease; } .nav.is-stuck{ background:rgba(7,14,25,.88); backdrop-filter:blur(14px) saturate(1.2); border-bottom-color:var(--rule); } .nav__in{ display:flex; align-items:center; gap:clamp(.85rem,1.8vw,1.6rem); min-height:5rem; } .nav__in > .brand, .nav__in > .btn, .nav__in > .langs, .nav__in > .burger{ flex:0 0 auto; } .brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; flex:0 0 auto; } .brand .seal{ width:40px; height:40px; color:inherit; } .brand__txt{ font-family:var(--f-ui); font-weight:400; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg); line-height:1.25; } .brand__txt i{ display:block; font-style:normal; color:var(--fg-3); letter-spacing:.16em; } .nav__links{ display:none; gap:clamp(.8rem,1.5vw,1.5rem); margin-inline:auto; flex:0 1 auto; font-family:var(--f-ui); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:400; } .nav__links a{ text-decoration:none; color:var(--fg-2); padding-block:.35rem; position:relative; transition:color .25s; } .nav__links a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--rice); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; } .nav__links a:hover{ color:var(--fg); } .nav__links a:hover::after{ transform:scaleX(1); } @media (min-width:1024px){ .nav__links{ display:flex; } } .langs{ display:none; gap:.55rem; font-family:var(--f-ui); font-size:.68rem; letter-spacing:.14em; } @media (min-width:1024px){ .nav__in > .langs{ display:flex; } } .mnav .langs{ display:flex; font-size:.82rem; gap:1rem; } .langs a{ text-decoration:none; color:var(--fg-3); } .langs a[aria-current]{ color:var(--fg); } .langs a:hover{ color:var(--fg); } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.7rem; font-family:var(--f-ui); font-size:.74rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; padding:.95rem 1.5rem; border:1px solid var(--rule-2); color:var(--fg); background:transparent; cursor:pointer; white-space:nowrap; transition:background .3s, border-color .3s, color .3s; } .btn:hover{ background:var(--rice); border-color:var(--fg); color:var(--ink); } .btn__dot{ width:6px; height:6px; border-radius:50%; background:var(--akami-lift); flex:0 0 auto; animation:pulse 2.4s ease-out infinite; } @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(200,35,46,.65) } 70%{ box-shadow:0 0 0 9px rgba(200,35,46,0) } 100%{ box-shadow:0 0 0 0 rgba(200,35,46,0) } } .btn:hover .btn__dot{ background:var(--akami); } .btn--solid{ background:var(--rice); border-color:var(--rice); color:var(--ink); } .btn--solid:hover{ background:transparent; color:var(--rice); border-color:var(--rice); } .btn--ink{ background:var(--ink); border-color:var(--ink); color:var(--rice); } .btn--ink:hover{ background:transparent; border-color:rgba(255,255,255,.6); color:#fff; } /* Automatic.css captura CUALQUIER clase que contenga "btn--" con el selector comodin [class*="btn--"]:not(.btn--none, .wp-block-button). Eso alcanza a .btn--ink y .btn--solid, y su especificidad (0,2,0) gana a la nuestra (0,1,0): impone su sistema de botones y el boton del formulario sale con fondo transparente, borde de 2px y 28px de tipo. Restauramos con dos clases y peso explicito, para no depender del orden en que se carguen las hojas. */ .btn.btn--ink, .btn.btn--solid{ font-family:var(--f-ui) !important; font-size:.74rem !important; font-weight:400 !important; letter-spacing:.2em !important; text-transform:uppercase !important; padding:.95rem 1.5rem !important; border-width:1px !important; border-style:solid !important; min-inline-size:0 !important; min-width:0 !important; line-height:normal !important; } .btn.btn--ink{ background:var(--ink) !important; border-color:var(--ink) !important; color:var(--rice) !important; } .btn.btn--ink:hover{ background:transparent !important; border-color:rgba(255,255,255,.6) !important; color:#fff !important; } .btn.btn--solid{ background:var(--rice) !important; border-color:var(--rice) !important; color:var(--ink) !important; } .btn.btn--solid:hover{ background:transparent !important; border-color:var(--rice) !important; color:var(--rice) !important; } .nav .btn{ margin-left:auto; padding:.7rem .9rem; font-size:.66rem; letter-spacing:.16em; } @media (min-width:760px){ .nav .btn{ padding:.95rem 1.5rem; font-size:.74rem; letter-spacing:.2em; } } /* ---------- mobile drawer ---------- */ .burger{ display:grid; gap:5px; place-content:center; flex:0 0 auto; width:2.75rem; height:2.75rem; padding:0; background:transparent; border:1px solid var(--rule-2); cursor:pointer; } .burger span{ display:block; width:18px; height:1px; background:var(--rice); transition:transform .3s ease, opacity .2s ease; } .burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); } .burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); } @media (min-width:1024px){ .burger{ display:none; } } .mnav{ position:fixed; inset:0; z-index:70; background:rgba(7,14,25,.97); backdrop-filter:blur(18px); display:flex; flex-direction:column; justify-content:center; gap:.35rem; padding:5.5rem var(--pad) var(--pad); overflow-y:auto; } .mnav[hidden]{ display:none; } .mnav a.mnav__l{ font-family:var(--f-display); font-size:clamp(1.9rem,8vw,3rem); line-height:1.18; color:var(--fg); text-decoration:none; padding-block:.25rem; border-bottom:1px solid var(--rule); } .mnav a.mnav__l:last-of-type{ border-bottom:0; } .mnav__foot{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:1.25rem 2rem; align-items:center; } /* ---------- seal mark ---------- */ /* ===================================================================== El sello. Es el logotipo real, art plano de un solo color con transparencia. En lugar de dos ficheros -uno azul y uno blanco- se pinta con currentColor a traves de una mascara: la mascara solo lee el canal alfa, asi que **un unico fichero sirve para fondo oscuro y para fondo claro** y se recolorea con la propiedad color, que es justo la que ya declaraban .brand .seal, .hero__top .seal y .foot .seal. Con la alternancia de secciones claras y oscuras eso deja de ser un problema. Fuera del @supports queda transparente y no un cuadrado solido, que es el fallo bonito si algun navegador no soporta mascaras. Las tres reglas .seal-top / .seal-jp / .seal-bot de abajo son de la version dibujada a mano del sello. Ya no encuentran nada, pero se dejan por si alguna vez se vuelve al SVG. ===================================================================== */ .seal{ display:block; flex:0 0 auto; aspect-ratio:1; background:transparent; } @supports (mask-image:url("logos/itamae-seal.webp")) or (-webkit-mask-image:url("logos/itamae-seal.webp")){ .seal{ background-color:currentColor; -webkit-mask:url("logos/itamae-seal.webp") center/contain no-repeat; mask:url("logos/itamae-seal.webp") center/contain no-repeat; } } .seal-top{ font-family:var(--f-ui); font-weight:700; font-size:27px; letter-spacing:1.6px; fill:currentColor; } .seal-jp{ font-family:var(--f-jp); font-weight:400; font-size:66px; fill:currentColor; } .seal-bot{ font-family:var(--f-display); font-size:23px; letter-spacing:1.4px; fill:currentColor; } /* ============================================================ HERO — the thesis: a poster. Giant vertical 板前 as architecture. ============================================================ */ .hero{ position:relative; overflow:hidden; isolation:isolate; } .hero__bg{ display:block; position:absolute; inset:0; z-index:-2; background: radial-gradient(120% 80% at 12% 0%, rgba(22,56,95,.55), transparent 60%), radial-gradient(90% 70% at 92% 100%, rgba(16,43,76,.5), transparent 62%), linear-gradient(180deg,#08101D 0%, #070E19 55%, #060C15 100%); } .hero__kanji{ display:block; position:absolute; z-index:-1; right:-.06em; top:50%; transform:translateY(-50%); writing-mode:vertical-rl; text-orientation:upright; white-space:nowrap; font-family:var(--f-jp); font-weight:200; font-size:clamp(13rem, 27vw, 31rem); line-height:.84; color:rgba(148,167,189,.05); user-select:none; pointer-events:none; letter-spacing:-.05em; } .hero__in{ min-height:min(92svh, 900px); /* align-items declarado a proposito: el host lo pone en flex-start y entonces los hijos miden su fit-content, con lo que el bloque de la fecha se encoge y el indicador de scroll pierde su sitio a la derecha. */ display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; padding-top:clamp(3rem,10vw,7rem); padding-bottom:clamp(2rem,5vw,3.25rem); gap:clamp(1.75rem,4vw,3rem); } .hero__top{ display:flex; align-items:flex-start; gap:1.35rem; } .hero__top .seal{ width:clamp(62px,7vw,88px); height:auto; color:inherit; flex:0 0 auto; } .hero__labels{ display:flex; flex-direction:column; gap:.4rem; padding-top:.35rem; } .hero__labels .n{ font-family:var(--f-ui); font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--fg-3); } .hero h1{ font-size:clamp(2.65rem, 8.4vw, 8rem); line-height:.9; letter-spacing:-.025em; max-width:16ch; } .hero h1 em{ font-style:italic; } .hero__cutline{ height:1px; background:var(--rule-2); transform-origin:left; } .has-js .hero__cutline{ transform:scaleX(0); } .hero.is-ready .hero__cutline{ transform:scaleX(1); transition:transform 1.6s cubic-bezier(.16,1,.3,1) .4s; } .hero__meta{ display:grid; gap:1.5rem 3rem; grid-template-columns:1fr; } @media (min-width:760px){ .hero__meta{ grid-template-columns:auto auto 1fr; align-items:end; } } .meta__k{ font-family:var(--f-ui); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-3); margin-bottom:.5rem; } .meta__v{ font-family:var(--f-ui); font-weight:300; font-size:clamp(1.1rem,2.1vw,1.6rem); letter-spacing:.06em; text-transform:uppercase; color:var(--fg); line-height:1.1; } .meta__v b{ font-weight:400; } .meta__sub{ display:block; font-size:.72em; color:var(--fg-2); } .hero__scroll{ justify-self:end; align-self:end; display:none; text-align:center; } @media (min-width:760px){ .hero__scroll{ display:block; } } .hero__scroll span{ font-family:var(--f-ui); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-3); } .hero__scroll i{ display:block; width:1px; height:3.25rem; background:linear-gradient(180deg,var(--steel-dim),transparent); margin:.75rem auto 0; } /* ---------- reveal ---------- */ /* Progressive enhancement: without JS everything is simply visible. */ .has-js .rise{ opacity:0; transform:translateY(26px); } .has-js .is-ready .rise, .has-js .rise.in{ opacity:1; transform:none; transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); } .hero__in > .rise:nth-child(2){ transition-delay:.10s; } .hero__in > .rise:nth-child(4){ transition-delay:.20s; } @media (prefers-reduced-motion:reduce){ .has-js .rise{ opacity:1; transform:none; } .hero.is-ready .hero__cutline{ transform:scaleX(1); transition:none; } .hero .hero__cutline{ transform:scaleX(1); } } /* ---------- marquee ---------- */ .marquee{ display:block; width:100%; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--ink-2); overflow:hidden; padding-block:1.05rem; } .marquee__track{ display:flex; width:max-content; animation:slide 48s linear infinite; } .marquee__track > div{ display:flex; } .marquee span{ font-family:var(--f-ui); font-size:.76rem; font-weight:400; letter-spacing:.28em; text-transform:uppercase; color:var(--fg-2); padding-inline:1.5rem; white-space:nowrap; display:flex; align-items:center; gap:3rem; } .marquee span::after{ content:"·"; color:var(--fg-3); } .marquee .jp{ font-family:var(--f-jp); letter-spacing:.2em; color:var(--fg-2); } @keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } } @media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } } /* ============================================================ § ¿QUÉ ES ITAMAE? ============================================================ */ .about__grid{ display:grid; gap:clamp(2rem,5vw,4.5rem); grid-template-columns:1fr; } @media (min-width:960px){ .about__grid{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:start; } } .about__head{ display:flex; flex-direction:column; gap:clamp(1.5rem,3vw,2.5rem); } /* four pillars — the words themselves are the design */ .pillars{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--rule); margin-top:clamp(3rem,7vw,6rem); } @media (min-width:900px){ .pillars{ grid-template-columns:repeat(4,minmax(0,1fr)); } } .pillar{ --pl:clamp(1rem,2vw,2rem); padding:clamp(1.5rem,3vw,2.5rem) clamp(1rem,2vw,2rem); border-bottom:1px solid var(--rule); border-left:1px solid var(--rule); padding-left:var(--pl); display:flex; flex-direction:column; gap:.85rem; } .pillar:nth-child(2n+1){ border-left:0; padding-left:0; } @media (min-width:900px){ .pillar{ border-bottom:0; border-left:1px solid var(--rule); padding-left:var(--pl); } .pillar:nth-child(2n+1){ border-left:1px solid var(--rule); padding-left:var(--pl); } .pillar:nth-child(4n+1){ border-left:0; padding-left:0; } } .pillar__jp{ font-family:var(--f-jp); font-weight:400; font-size:clamp(1.6rem,3vw,2.35rem); color:var(--fg-3); line-height:1; } .pillar__es{ font-family:var(--f-display); font-size:clamp(1.4rem,2.6vw,2.1rem); line-height:1.05; color:var(--fg); } .pillar__ro{ font-family:var(--f-ui); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-2); } /* ============================================================ § IV EDICIÓN — una sola narrativa vertical: titular → texto + cifras → la sede a sangre → remate. Sin dos títulos compitiendo, y en móvil se apila solo. ============================================================ */ .edition{ background:linear-gradient(180deg,var(--ink) 0%, #081221 100%); } .ed__h{ max-width:20ch; margin-bottom:clamp(2.25rem,4.5vw,3.5rem); } .ed__h em{ font-style:italic; } .ed__grid{ display:grid; gap:clamp(2.25rem,4vw,4.5rem); grid-template-columns:1fr; align-items:start; } @media (min-width:900px){ .ed__grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); } } .ed__copy{ display:flex; flex-direction:column; gap:1.15rem; } /* Las cifras como tabla, no como columnas: se leen igual en cualquier ancho. */ .ed__figs{ margin:0; padding:0; display:flex; flex-direction:column; border-top:1px solid var(--rule-2); } .fig{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; padding-block:clamp(.9rem,1.9vw,1.4rem); border-bottom:1px solid var(--rule); } .fig__n{ margin:0; font-family:var(--f-display); font-weight:400; font-size:clamp(2.5rem,5.5vw,4rem); line-height:.85; color:var(--fg); font-variant-numeric:tabular-nums; } .fig__l{ margin:0; font-family:var(--f-ui); font-size:.7rem; font-weight:400; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-2); } /* image slot — art-direction frame, honest about being a slot */ .frame{ position:relative; border:1px solid var(--rule); overflow:hidden; background: radial-gradient(80% 60% at 30% 20%, rgba(22,56,95,.6), transparent 65%), linear-gradient(150deg,#0D1F36 0%, #0A1729 48%, #0C2340 100%); } .frame::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E"); opacity:.09; mix-blend-mode:overlay; } .frame--wide{ aspect-ratio:16/10; } .frame--tall{ aspect-ratio:4/5; } .frame__tag{ position:absolute; left:1rem; top:1rem; z-index:2; font-family:var(--f-ui); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-2); background:rgba(7,14,25,.6); border:1px solid var(--rule); padding:.4rem .6rem; backdrop-filter:blur(4px); } .frame__x{ position:absolute; inset:0; display:grid; place-items:center; } .frame__x svg{ width:34px; height:34px; color:rgba(148,167,189,.3); } /* ---------- la sede ---------- */ /* El figure no tiene tamano intrinseco: su unico hijo con tamano es un div con aspect-ratio. Si el host lo trata como flex item se encoge a unos pocos pixeles y el rotulo, que va en absolute, se superpone. */ .venue{ display:block; width:100%; position:relative; margin:clamp(3.5rem,8vw,7rem) 0 0; } .venue__img{ display:block; width:100%; aspect-ratio:4/5; border-left:0; border-right:0; } @media (min-width:560px){ .venue__img{ aspect-ratio:16/10; } } @media (min-width:760px){ .venue__img{ aspect-ratio:16/9; } } @media (min-width:1200px){ .venue__img{ aspect-ratio:2.4/1; } } /* La foto va por CSS y no en el marcado, para no tener que reeditar el elemento Code y volver a firmarlo en Bricks. Si algun dia se toca el HTML, lo suyo es sustituir el bloque por un con su alt. El degradado hace dos cosas: apaga el cielo -la parte mas clara de la foto, y la que peor convive con el fondo oscuro de la pagina- y asienta el pie, donde se apoyan la fecha y el lugar. La foto es 16:9 y el hueco 2.4:1, asi que se recorta: con el foco al 42% de la altura el edificio queda centrado y solo se pierde cielo. */ .venue__img{ /* La URL sale a una variable para poder cambiar de tamano por breakpoint sin repetir el degradado. WordPress ya genera los recortes, asi que en movil se descargan 122 KB en lugar de 656. */ --venue-photo:url("/wp-content/uploads/2026/09/instalacions-balfego-1024x576.jpg"); background-image: linear-gradient(180deg, rgba(7,14,25,.62) 0%, rgba(7,14,25,.18) 38%, rgba(7,14,25,.30) 72%, rgba(7,14,25,.55) 100%), var(--venue-photo); background-size:cover, cover; background-position:center center, center 42%; background-repeat:no-repeat; } @media (min-width:700px){ .venue__img{ --venue-photo:url("/wp-content/uploads/2026/09/instalacions-balfego-1536x864.jpg"); } } @media (min-width:1200px){ .venue__img{ --venue-photo:url("/wp-content/uploads/2026/09/instalacions-balfego-2048x1152.jpg"); } } @media (min-width:1700px){ .venue__img{ --venue-photo:url("/wp-content/uploads/2026/09/instalacions-balfego.jpg"); } } /* NOTA del 7 de setembre. A la tarda es va provar de canviar la foto per «nau-balfego-itamae-2026» -la nau amb les banderoles del campionat- i despres es va tornar enrere. La foto es la de sempre. De la marxa enrere queden dues coses apreses que val la pena no perdre, perque la propera vegada estalvien una estona: 1. ELS NOMS DE LES TALLES NO ES PODEN ENDEVINAR. Aquesta foto es 2560x1440 -16:9 exacte- i WordPress en genera -1024x576, -1536x864 i -2048x1152. La que es va provar feia 2056x1148, ratio 1.791, i generava -1024x572, -1536x858 i -2048x1144: tres noms diferents. Una URL equivocada aqui NO dona cap error visible: nomes es veu el degradat blau fosc del .frame de sota, i sembla un problema de disseny. S'han de llegir de la biblioteca de mitjans, o del REST: /wp-json/wp/v2/media?search=. 2. SON QUATRE URL, NO TRES. La quarta es mes avall, dins d'una optimitzacio que entre 1200 i 1499 px serveix la talla petita, i va DESPRES d'aquestes tres. Oblidar-la vol dir que en aquell tram d'amplades segueix sortint la foto anterior, i costa de veure perque nomes falla alli. */ /* el punto de mira y la etiqueta eran los marcadores del hueco vacio */ .venue__img .frame__x, .venue__img .frame__tag{ display:none; } .venue__cap{ position:absolute; inset:auto 0 0 0; margin:0; padding-block:clamp(2rem,5vw,3.5rem); background:linear-gradient(0deg, rgba(6,12,21,.94) 0%, rgba(6,12,21,.62) 58%, rgba(6,12,21,0) 100%); } .venue__capin{ display:flex; flex-direction:column; gap:.75rem; } .venue__h{ font-size:clamp(1.75rem,4vw,3.1rem); line-height:1.02; letter-spacing:-.015em; color:var(--fg); } .venue__h em{ font-style:italic; } .venue__when{ margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem 1.1rem; font-family:var(--f-ui); text-transform:uppercase; } .venue__when b{ font-weight:400; font-size:clamp(1.15rem,2.2vw,1.6rem); letter-spacing:.04em; color:var(--fg); } .venue__when span{ font-size:.7rem; letter-spacing:.22em; color:var(--fg-2); } /* Remate desplazado a la derecha: rompe la alineación a izquierda del resto. */ .venue__body{ margin-top:clamp(2rem,4vw,3.25rem); display:flex; flex-direction:column; gap:1.15rem; } @media (min-width:900px){ .venue__body{ max-width:56ch; margin-left:auto; } } /* ============================================================ § JURADO Y FINALISTAS ============================================================ */ .people__head{ display:flex; flex-direction:column; gap:clamp(1.25rem,3vw,2rem); max-width:66ch; } .group{ margin-top:clamp(3rem,7vw,6rem); } .group__bar{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--rule-2); margin-bottom:clamp(1.5rem,3vw,2.5rem); } .group__t{ font-family:var(--f-ui); font-size:.78rem; font-weight:400; letter-spacing:.26em; text-transform:uppercase; color:var(--fg); } .group__c{ font-family:var(--f-ui); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); font-variant-numeric:tabular-nums; } .people{ display:grid; gap:clamp(1rem,2vw,1.75rem); grid-template-columns:repeat(2,minmax(0,1fr)); } @media (min-width:720px){ .people{ grid-template-columns:repeat(4,minmax(0,1fr)); } } @media (min-width:1180px){ .people{ grid-template-columns:repeat(7,minmax(0,1fr)); } } .card{ display:flex; flex-direction:column; gap:.9rem; text-align:left; } .card__ph{ position:relative; aspect-ratio:3/4; overflow:hidden; border:1px solid var(--rule); background:linear-gradient(165deg,#12293F 0%, #0A1526 55%, #0C2340 100%); transition:border-color .4s ease; } .card:hover .card__ph{ border-color:var(--rule-2); } .card__ph::before{ content:""; position:absolute; inset:0; background:radial-gradient(70% 55% at 50% 32%, rgba(148,167,189,.16), transparent 70%); } .card__badge{ position:absolute; top:.6rem; left:.6rem; z-index:2; font-family:var(--f-ui); font-size:.55rem; letter-spacing:.2em; text-transform:uppercase; color:var(--steel-dim); border:1px solid var(--line); padding:.25rem .45rem; background:rgba(7,14,25,.5); } .card__name{ font-family:var(--f-display); font-size:clamp(1.05rem,1.6vw,1.35rem); line-height:1.1; color:var(--fg); } .card__meta{ font-family:var(--f-ui); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); line-height:1.5; } .card__meta b{ display:block; color:var(--fg-2); font-weight:400; } /* finalists — horizontal drag carousel */ .rail-h{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(212px,1fr); gap:clamp(1rem,2vw,1.75rem); overflow-x:auto; padding-bottom:1.25rem; margin-right:calc(var(--pad) * -1); padding-right:var(--pad); scroll-padding-right:var(--pad); scrollbar-width:thin; scrollbar-color:var(--rule-2) transparent; cursor:grab; } @media (min-width:900px){ .rail-h{ grid-auto-columns:minmax(238px,1fr); } } .rail-h.is-dragging{ cursor:grabbing; } /* Snapping is a touch affordance. On pointer devices it fights the arrow buttons, which land on exact offsets of their own. */ @media (hover:none) and (pointer:coarse){ .rail-h{ scroll-snap-type:x proximity; } .rail-h > *{ scroll-snap-align:start; } } .rail-h::-webkit-scrollbar{ height:2px; } .rail-h::-webkit-scrollbar-track{ background:var(--rule); } .rail-h::-webkit-scrollbar-thumb{ background:var(--steel-dim); } .rail-nav{ display:flex; gap:.5rem; } .rail-nav button{ width:2.6rem; height:2.6rem; border:1px solid var(--rule-2); background:transparent; color:var(--fg); cursor:pointer; display:grid; place-items:center; transition:background .25s, color .25s, border-color .25s; } .rail-nav button:hover{ background:var(--rice); color:var(--ink); border-color:var(--fg); } .rail-nav svg{ width:14px; height:14px; } /* ============================================================ § EN DIRECTO — the one red moment ============================================================ */ .live{ background:var(--akami); color:#fff; position:relative; overflow:hidden; border-top:0; } .live::before{ content:""; position:absolute; inset:0; background:radial-gradient(90% 120% at 85% 10%, rgba(0,0,0,.34), transparent 60%); } .live__in{ position:relative; display:grid; gap:clamp(2.25rem,5vw,4.5rem); grid-template-columns:1fr; align-items:start; } .live__copy{ display:flex; flex-direction:column; gap:clamp(1.15rem,2.5vw,1.75rem); } @media (min-width:960px){ .live__in{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); } } .live .eyebrow{ color:rgba(255,255,255,.72); display:flex; align-items:center; gap:.6rem; } .live__dot{ width:7px; height:7px; border-radius:50%; background:#fff; animation:blink 1.8s steps(1,end) infinite; } @keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:.25} } @media (prefers-reduced-motion:reduce){ .live__dot{ animation:none; } } .live h2{ font-size:clamp(2.2rem,5.6vw,4.6rem); line-height:.96; letter-spacing:-.02em; color:#fff; } .live p{ color:rgba(255,255,255,.85); max-width:52ch; } .live__note{ font-family:var(--f-ui); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); } .form{ display:flex; flex-direction:column; gap:1.1rem; } .field{ display:flex; flex-direction:column; gap:.45rem; } .field label{ font-family:var(--f-ui); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.72); } .field input, .field select{ font-family:var(--f-body); font-size:1rem; line-height:1.6; color:#fff; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.42); padding:.6rem 0; border-radius:0; appearance:none; width:100%; transition:border-color .25s; } .field select{ padding-right:1.4rem; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23ffffff' stroke-width='1.3'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .1rem center; } .field select option{ color:#111; } .field input::placeholder{ color:rgba(255,255,255,.45); } .field input:focus, .field select:focus{ outline:0; border-bottom-color:#fff; } .field input:focus-visible, .field select:focus-visible{ outline:2px solid #fff; outline-offset:4px; } .form__row{ display:grid; gap:1.1rem; grid-template-columns:1fr; } @media (min-width:560px){ .form__row{ grid-template-columns:1fr 1fr; } } .consent{ display:flex; gap:.7rem; align-items:flex-start; font-family:var(--f-ui); font-size:.72rem; line-height:1.55; color:rgba(255,255,255,.78); } .consent input{ margin-top:.2rem; accent-color:#fff; width:1rem; height:1rem; flex:0 0 auto; } .consent a{ text-decoration:underline; text-underline-offset:2px; } .form .btn{ align-self:flex-start; } .form__ok{ display:none; gap:.75rem; align-items:center; border:1px solid rgba(255,255,255,.5); padding:1rem 1.1rem; font-family:var(--f-ui); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; } .form.is-sent .form__ok{ display:flex; } .form.is-sent .form__fields{ display:none; } /* ============================================================ § LA JORNADA ============================================================ */ .day__grid{ display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr; } @media (min-width:960px){ .day__grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } } .programme{ display:flex; flex-direction:column; border-top:1px solid var(--rule-2); } .prog{ display:grid; gap:.45rem 2.5rem; grid-template-columns:1fr; padding-block:clamp(1.35rem,2.6vw,2rem); border-bottom:1px solid var(--rule); } @media (min-width:620px){ .prog{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:baseline; } } .prog__n{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.08; color:var(--fg); margin:0; } .prog__d{ color:var(--fg-2); font-size:.98rem; margin:0; max-width:56ch; } .prog:last-child{ border-bottom:0; } .soon{ margin-top:clamp(2rem,4vw,3rem); padding-top:1.35rem; border-top:1px solid var(--rule-2); } .soon__t{ font-family:var(--f-display); font-size:clamp(1.15rem,2vw,1.5rem); color:var(--fg); } /* ============================================================ § PATROCINADORES — ground shifts to paper ============================================================ */ .partners{ background:var(--rice); color:var(--navy); border-top:0; } .partners .eyebrow{ color:rgba(12,35,64,.55); } .partners h2{ color:var(--navy); } .partners__head{ display:flex; flex-direction:column; gap:1rem; max-width:52ch; margin-bottom:clamp(2.5rem,6vw,4.5rem); } .partners__p{ margin:0; color:rgba(12,35,64,.72); max-width:56ch; } .pgroup + .pgroup{ margin-top:clamp(3rem,7vw,5.5rem); } .pgroup__bar{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; border-bottom:1px solid var(--rule); padding-bottom:.85rem; margin-bottom:clamp(1.75rem,3.5vw,2.75rem); } .pgroup__t{ font-family:var(--f-ui); font-size:.76rem; font-weight:400; letter-spacing:.26em; text-transform:uppercase; color:var(--navy); } .pgroup__c{ font-family:var(--f-ui); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); font-variant-numeric:tabular-nums; } .logos{ display:grid; gap:.5rem; } .logos--main{ grid-template-columns:repeat(2,minmax(0,1fr)); } @media (min-width:640px){ .logos--main{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .logos--sub{ grid-template-columns:repeat(2,minmax(0,1fr)); } @media (min-width:560px){ .logos--sub{ grid-template-columns:repeat(4,minmax(0,1fr)); } } @media (min-width:1000px){ .logos--sub{ grid-template-columns:repeat(7,minmax(0,1fr)); } } .logo{ background:#fff; border:1px solid var(--rule); display:grid; place-items:center; padding:clamp(1.35rem,2.6vw,2.25rem) clamp(.9rem,1.8vw,1.5rem); transition:border-color .3s ease, box-shadow .3s ease; /* Los logos van con loading="lazy" y alto variable, asi que sin una altura reservada la seccion salta al cargarlos. */ min-height:calc(64px * var(--lsc,1) + 2 * clamp(1.35rem,2.6vw,2.25rem)); } .logos--sub .logo{ min-height:calc(64px * var(--lsc,1) + 2 * clamp(1.1rem,2.1vw,1.6rem)); } .logo:hover{ border-color:rgba(12,35,64,.32); box-shadow:0 2px 14px rgba(12,35,64,.07); } /* --mh is set per logo by optical weight, not by raw pixel height, so a wide wordmark and a tall badge read at the same size. */ .logo img{ width:auto; max-width:100%; max-height:calc(var(--mh,56) * var(--lsc) * 1px); } .logos--main{ --lsc:.7; } .logos--sub{ --lsc:.58; } @media (min-width:640px){ .logos--main{ --lsc:.86; } .logos--sub{ --lsc:.68; } } @media (min-width:1000px){ .logos--main{ --lsc:1; } .logos--sub{ --lsc:.78; } } .logos--sub .logo{ padding-block:clamp(1.1rem,2.1vw,1.6rem); } /* ============================================================ FOOTER ============================================================ */ .foot{ background:var(--ink); border-top:1px solid var(--rule); padding-block:clamp(3rem,6vw,5rem) 2rem; } .foot__grid{ display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr; } @media (min-width:820px){ .foot__grid{ grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr)); } } .foot .seal{ width:74px; height:74px; color:inherit; margin-bottom:1.25rem; } .foot__claim{ margin:0; color:var(--fg-2); font-size:1rem; max-width:44ch; } .foot__k{ font-family:var(--f-ui); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-3); margin-bottom:1rem; } .foot__list{ display:flex; flex-direction:column; gap:.6rem; font-family:var(--f-ui); font-size:.82rem; letter-spacing:.04em; } .foot__list a{ text-decoration:none; color:var(--fg-2); transition:color .25s; } .foot__list a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; } .foot__bar{ margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.5rem; border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center; font-family:var(--f-ui); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); } /* ---------- utilities ---------- */ .sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } .skip{ position:absolute; left:.75rem; top:-3rem; z-index:99; background:var(--rice); color:var(--ink); padding:.6rem 1rem; font-family:var(--f-ui); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; transition:top .2s; } .skip:focus{ top:.75rem; } /* ---------- placeholder numeral inside person cards ---------- */ .card__no{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--f-display); font-size:clamp(3.2rem,7vw,4.6rem); line-height:1; color:rgba(148,167,189,.16); font-variant-numeric:tabular-nums; user-select:none; transition:-webkit-text-stroke-color .4s ease; } @supports (-webkit-text-stroke: 1px black){ .card__no{ color:transparent; -webkit-text-stroke:1px rgba(148,167,189,.34); } } .card:hover .card__no{ -webkit-text-stroke-color:rgba(242,239,233,.55); } .card__ratio{ position:absolute; right:.55rem; bottom:.55rem; z-index:2; font-family:var(--f-ui); font-size:.55rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(148,167,189,.55); } /* ---------- retrato real, cuando la ficha ya tiene foto ---------- Ligeramente desaturado para que las diecisiete convivan aunque vengan de sesiones distintas; a pleno color al pasar por encima. */ .card__ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 28%; filter:saturate(.82) contrast(1.04); transition:filter .5s ease, transform .8s cubic-bezier(.16,1,.3,1); } .card:hover .card__ph img{ filter:saturate(1) contrast(1); transform:scale(1.03); } @media (prefers-reduced-motion:reduce){ .card:hover .card__ph img{ transform:none; } } /* con foto, el numero y la proporcion sobran */ .card__ph:has(img) .card__no, .card__ph:has(img) .card__ratio{ display:none; } /* ===================================================================== AJUSTES PEDIDOS · 03.09.2026 Van al final a proposito: a igual especificidad gana la regla que carga despues, asi que esto pisa lo de arriba sin tocarlo. ===================================================================== */ /* ---- 1. La marca del nav, en dos lineas ---------------------------- Bricks pone display:flex a los elementos de texto y entonces el se vuelve item flex: la marca salia en una sola linea de 248 px, y eso estrujaba los enlaces del menu a ~100 px hasta partirlos en dos lineas. Medido: con esto pasa a 125x29 y los enlaces a 108x32. Hacen falta dos clases; con una sola no gana. */ .brand .brand__txt{ display:block; } .nav__links a{ white-space:nowrap; } /* ---- 2. Finalistas: dos filas de cinco en escritorio --------------- Con diez fichas, deslizar en escritorio no aporta nada: se ven todas sin tocar nada. El carrusel se queda para pantallas pequenas, donde diez fichas apiladas harian una seccion eterna. */ @media (min-width:900px){ .rail-h{ grid-auto-flow:row; grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-columns:auto; overflow-x:visible; margin-right:0; padding-right:0; padding-bottom:0; } /* sin deslizamiento no hacen falta flechas */ .rail-nav{ display:none; } } /* ---- 3. Una ficha por pantalla, solo en movil de verdad ------------ El corte esta en 640: por encima, una tableta ensena dos fichas y media y no hace falta pasarlas de una en una -a 753 px una sola ficha media 630 px, que es absurdo-. El 82vw deja ver un trozo de la siguiente: es lo que avisa de que hay mas sin necesidad de flechas, y el snap centrado hace que pare en su sitio. */ @media (max-width:899px){ .rail-nav{ display:none; } } @media (max-width:639px){ .people, .rail-h{ grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:minmax(82vw,1fr); overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad); } .people > *, .rail-h > *{ scroll-snap-align:center; } /* el sangrado al borde y la barra de scroll, como los finalistas */ .people{ padding-bottom:1.25rem; margin-right:calc(var(--pad) * -1); padding-right:var(--pad); } .people::-webkit-scrollbar{ height:2px; } .people::-webkit-scrollbar-track{ background:var(--rule); } .people::-webkit-scrollbar-thumb{ background:var(--steel-dim); } } /* ---- 4. Patrocinadores en blanco ---------------------------------- Los logotipos son sin fondo, asi que las tarjetas dejan de tener un fondo propio y toda la seccion queda de un blanco continuo: lo unico que separa los logos es el filete. */ .partners{ background:#fff; } .logo{ background:transparent; } /* ---- 5. Fuera el rail vertical ------------------------------------- Solo existia a partir de 1180 px -en movil y tableta ya estaba oculto-, y era decorativo: la marca de agua 板前 y la fecha en vertical. Con secciones claras se veia como una tira oscura pegada al borde, y con la alternancia claro/oscuro iba a molestar en cada una. Se gana el ancho que ocupaba, 56 px. Para recuperarlo, borrar este bloque: la regla de 1180 px de mas arriba sigue intacta. */ @media (min-width:1180px){ .rail{ display:none; } body{ padding-left:0; } } /* ===================================================================== Contextos de color. En lugar de un color fijo, tres roles de texto y dos de filete. La seccion declara su fondo con una clase y todo lo de dentro se invierte solo, porque las variables personalizadas se heredan. Es lo que convierte «alternar claro y oscuro» en poner UNA clase, en vez de repasar las 103 declaraciones de color de la hoja una por una. Para una seccion nueva basta con ponerle .bg--ink, .bg--navy, .bg--rice o .bg--white desde Bricks. Las cuatro secciones que pidio marketing van aplicadas por id mas abajo, para no tener que tocar nada en el constructor. ===================================================================== */ :root{ --fg: var(--rice); --fg-2: var(--steel); --fg-3: var(--steel-dim); --rule: rgba(190,209,232,.15); --rule-2: rgba(190,209,232,.32); --own-bg: var(--ink); } /* contextos oscuros */ .bg--ink, .bg--navy{ --fg: var(--rice); --fg-2: var(--steel); --fg-3: var(--steel-dim); --rule: rgba(190,209,232,.15); --rule-2: rgba(190,209,232,.32); } .bg--ink{ background:var(--ink); --own-bg:var(--ink); color:var(--fg); } .bg--navy{ background:var(--navy); --own-bg:var(--navy); color:var(--fg); } /* contextos claros: el texto pasa al azul corporativo y los filetes a su version sobre papel */ .bg--rice, .bg--white{ --fg: var(--navy); --fg-2: rgba(12,35,64,.72); --fg-3: rgba(12,35,64,.63); --rule: rgba(12,35,64,.28); --rule-2: rgba(12,35,64,.42); } .bg--rice{ background:var(--rice); --own-bg:var(--rice); color:var(--fg); } .bg--white{ background:#fff; --own-bg:#fff; color:var(--fg); } /* Los botones tambien tienen que invertir: el de contorno toma el color del texto de su seccion, y el macizo intercambia fondo y letra. */ .btn{ color:var(--fg); border-color:var(--rule-2); } .btn:hover{ background:var(--fg); border-color:var(--fg); color:var(--own-bg); } /* El anillo de foco, con el contraste de su contexto. */ :focus-visible{ outline-color:var(--fg-2); } /* ===================================================================== Las cuatro secciones que pidio marketing (puntos 5, 7, 8 y 10). Van por id para que funcionen sin tocar Bricks. Para cambiar una, basta con editar su linea de aqui, o ponerle la clase .bg--* en el constructor. ===================================================================== */ /* 5. La IV edicion: invertida */ #edicion{ background:var(--rice); --fg:var(--navy); --fg-2:rgba(12,35,64,.72); --fg-3:rgba(12,35,64,.63); --rule:rgba(12,35,64,.28); --rule-2:rgba(12,35,64,.42); --own-bg:var(--rice); color:var(--fg); } /* 7. Jurado y finalistas: blanco */ #jurado{ background:#fff; --fg:var(--navy); --fg-2:rgba(12,35,64,.72); --fg-3:rgba(12,35,64,.63); --rule:rgba(12,35,64,.28); --rule-2:rgba(12,35,64,.42); --own-bg:#fff; color:var(--fg); } /* el numeral de las fichas vacias, sobre papel */ #jurado .card__no{ color:rgba(12,35,64,.28); } @supports (-webkit-text-stroke: 1px black){ #jurado .card__no{ color:transparent; -webkit-text-stroke:1px rgba(12,35,64,.46); } } #jurado .card:hover .card__no{ -webkit-text-stroke-color:rgba(12,35,64,.62); } #jurado .card__ph{ background:rgba(12,35,64,.04); } #jurado .card__badge{ background:rgba(12,35,64,.06); color:var(--navy); } /* 8. En directo: de rojo a azul. El akami sobrevive en el boton de enviar, que era la condicion para no perder el color de la marca. */ #directo{ background:var(--navy); --own-bg:var(--navy); color:var(--fg); } #directo .live__dot{ background:var(--akami); } #directo .gform_button, #directo button[type="submit"]{ background:var(--akami); border-color:var(--akami); color:#fff; } #directo .gform_button:hover, #directo button[type="submit"]:hover{ background:var(--akami-lift); border-color:var(--akami-lift); } /* 10. La jornada: crema, no blanco puro. Con los patrocinadores en blanco justo debajo, dos blancos seguidos se leerian como un solo bloque largo. */ #jornada{ background:var(--rice); --fg:var(--navy); --fg-2:rgba(12,35,64,.72); --fg-3:rgba(12,35,64,.63); --rule:rgba(12,35,64,.28); --rule-2:rgba(12,35,64,.42); --own-bg:var(--rice); color:var(--fg); } /* 11. Patrocinadores: ya estaba en blanco, ahora por rol */ #patrocinadores{ background:#fff; --fg:var(--navy); --fg-2:rgba(12,35,64,.72); --fg-3:rgba(12,35,64,.63); --rule:rgba(12,35,64,.28); --rule-2:rgba(12,35,64,.42); --own-bg:#fff; color:var(--fg); } /* estas tres declaraban el color a mano y ahora estorban al rol */ .partners .eyebrow, .partners h2, .partners__p{ color:inherit; } .partners .eyebrow{ color:var(--fg-3); } .partners__p{ color:var(--fg-2); } /* ===================================================================== Punto 4: la definicion de diccionario del titulo. El que puso el cliente en el Heading es el gancho: pasa a linea propia, a un tercio del cuerpo del titular y en el gris secundario, que es como se lee una entrada de diccionario. Sin esto sale a 57 px, casi el tamano del titulo. ===================================================================== */ .h-sec small em{ font-style:italic; } /* ===================================================================== Puntos 1, 2 y 6: centrar. El hero pasa a composicion centrada -sello, etiquetas, titular y la fila de fecha y sede- y el sello crece de 88 a 124 px en pantallas grandes. Centrar solo el sello y dejar el titular a la izquierda se leeria como un descuadre, no como una decision. ===================================================================== */ .hero__in{ align-items:center; text-align:center; } /* el sello se apila sobre las etiquetas: asi queda en el centro exacto. De lado quedaba desplazado a la izquierda dentro de una composicion centrada, que se lee como un descuadre. */ .hero__top{ flex-direction:column; align-items:center; gap:1.1rem; } .hero__top .seal{ width:clamp(84px,9vw,124px); } .hero__labels{ align-items:center; gap:.3rem; padding-top:0; } .hero h1{ margin-inline:auto; } .hero__cutline{ margin-inline:auto; } .hero__meta{ justify-items:center; text-align:center; } @media (min-width:760px){ .hero__meta{ grid-template-columns:1fr auto 1fr; align-items:end; } /* el indicador de scroll se queda a la derecha, como estaba */ .hero__scroll{ justify-self:end; } } /* punto 6: el pie de la foto de la sede y el parrafo de debajo */ .venue__capin{ text-align:center; } .venue__capin .eyebrow{ justify-content:center; } .venue__body{ text-align:center; margin-inline:auto; } /* ===================================================================== CORRECCIONES · puntos 3, 4, 5, 7, 8 y 9 ===================================================================== */ /* ---- 3, 5 y 8: los titulares de seccion -------------------------- La propiedad color se hereda por su valor YA CALCULADO: el color:var(--fg) de body se resuelve una sola vez y todos los descendientes heredan ese color concreto, asi que el --fg de cada seccion no llegaba a los titulares. Las fichas del jurado si invertian porque declaran su propio color. Ahora lo declaran tambien el titular, la entradilla y el cuerpo, y con ellos las tres secciones que no se leian: la IV edicion, el jurado y la jornada. */ .h-sec, .eyebrow, .lede, .body, .about__p, .people__head p, .partners__p, .day__p{ color:var(--fg); } .eyebrow{ color:var(--fg-3); } .lede, .body, .people__head p, .partners__p, .day__p{ color:var(--fg-2); } .h-sec{ color:var(--fg); } /* ---- 4: el pie de la foto de la sede ----------------------------- Va sobre la fotografia, asi que necesita el contexto oscuro pase lo que pase: hereda el claro de #edicion, que es la seccion que lo contiene, y salia azul marino sobre la foto. */ .venue__cap{ --fg:var(--rice); --fg-2:rgba(242,239,233,.78); --fg-3:rgba(242,239,233,.6); --rule:rgba(255,255,255,.22); color:var(--fg); } .venue__cap .eyebrow{ color:var(--fg-3); } .venue__h{ color:var(--fg); } .venue__when{ justify-content:center; align-items:baseline; } .venue__when b{ color:var(--fg); } .venue__when span{ color:var(--fg-2); } /* ---- 7: el formulario de Gravity Forms sobre el azul ------------- GF trae su propio tema y pinta las etiquetas y los campos con sus colores, que sobre el azul marino no se leen. Esto lo trae a la linea del diseno: etiqueta en versalitas, campo sin caja y con filete solo abajo. */ #directo .gform_wrapper{ color:#fff; } #directo .gform_wrapper .gfield_label, #directo .gform_wrapper legend{ font-family:var(--f-ui); font-size:.66rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:.5rem; } #directo .gform_wrapper .gfield_required{ color:var(--akami-lift); } #directo .gform_wrapper input[type="text"], #directo .gform_wrapper input[type="email"], #directo .gform_wrapper input[type="tel"], #directo .gform_wrapper input[type="number"], #directo .gform_wrapper textarea, #directo .gform_wrapper select{ background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.4); border-radius:0; padding:.55rem 0; color:#fff; font-family:var(--f-body); font-size:1rem; box-shadow:none; } #directo .gform_wrapper select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .2rem center; padding-right:1.6rem; } #directo .gform_wrapper option{ color:#111; } #directo .gform_wrapper input:focus, #directo .gform_wrapper textarea:focus, #directo .gform_wrapper select:focus{ outline:none; border-bottom-color:#fff; } #directo .gform_wrapper input::placeholder, #directo .gform_wrapper textarea::placeholder{ color:rgba(255,255,255,.45); } #directo .gform_wrapper .gfield_consent_label, #directo .gform_wrapper .gchoice label, #directo .gform_wrapper .ginput_counter, #directo .gform_wrapper .gform_required_legend{ font-family:var(--f-body); font-size:.82rem; text-transform:none; letter-spacing:0; color:rgba(255,255,255,.8); } #directo .gform_wrapper a{ color:#fff; text-decoration:underline; } /* ---- 9: los logos, flotando --------------------------------------- Sin caja ni filete: los logotipos no llevan fondo, asi que la seccion queda de un blanco continuo y los logos flotan. Y los seis patrocinadores en una sola linea, como los colaboradores. */ .logo{ border:0; background:transparent; } .logo:hover{ background:transparent; box-shadow:none; } @media (min-width:1000px){ .logos--main{ grid-template-columns:repeat(6,minmax(0,1fr)); --lsc:.62; } } @media (min-width:640px) and (max-width:999px){ .logos--main{ grid-template-columns:repeat(3,minmax(0,1fr)); --lsc:.7; } } .logos{ gap:clamp(1rem,2.4vw,2.25rem); } /* ===================================================================== El boton de enviar del formulario. CORRECCION: el diagnostico anterior era erroneo. Se dijo que Automatic.css pintaba este boton con su --primary; se ha comprobado que la cadena 'gform_button' aparece CERO veces en automatic.css y en las cuatro hojas de Gravity Forms. El color venia del framework de GF, que lo pinta con especificidad (0,4,0), y '#directo .gform_button' es (1,1,0): un ID gana siempre, sin importar el orden de carga. Los !important de aqui abajo NO hacen falta. Se dejan hasta despues del evento (28.09.2026) a proposito: hoy el boton renderiza correcto -rgb(168,21,30), texto #fff, sin radio- y a veinticinco dias no se toca lo que funciona. Retirarlos es limpieza de despues. Y de paso se le da la forma del boton del diseno: versalitas condensadas, sin radio y con el akami, que era la condicion para no perder el rojo de la marca al pasar la seccion a azul. ===================================================================== */ #directo .gform_wrapper .gform_footer button, #directo .gform_wrapper .gform_footer input[type="submit"], #directo .gform_wrapper .gform-footer button, #directo .gform_button, #directo button[type="submit"]{ background-color:var(--akami) !important; background-image:none !important; border:1px solid var(--akami) !important; border-radius:0 !important; color:#fff !important; font-family:var(--f-ui) !important; font-size:.74rem !important; font-weight:400 !important; letter-spacing:.2em !important; text-transform:uppercase !important; padding:.95rem 1.75rem !important; width:auto !important; height:auto !important; line-height:1.2 !important; box-shadow:none !important; transition:background-color .3s, border-color .3s; } #directo .gform_wrapper .gform_footer button:hover, #directo .gform_wrapper .gform_footer input[type="submit"]:hover, #directo .gform_wrapper .gform-footer button:hover, #directo .gform_button:hover, #directo button[type="submit"]:hover{ background-color:var(--akami-lift) !important; border-color:var(--akami-lift) !important; } /* ===================================================================== AUDITORIA · 03.09.2026 Arreglos medidos, no supuestos. Cada uno lleva su cifra. ===================================================================== */ /* ---- BLOQUEA: el anillo de foco del formulario ------------------- La regla de mas arriba ponia outline:none en los cinco campos y borraba el --gf-ctrl-outline-width-focus de Gravity Forms. Medido en el campo del nombre: outline 'solid 0px rgba(0,0,0,0)'. En la casilla de consentimiento era peor -appearance:none, fondo #fff, y el unico cambio al enfocar era border-bottom-color:#fff: blanco sobre blanco, indicador cero-. Recuperar el anillo azul de GF no vale: rgba(32,76,229,.65) sobre el navy compone a rgb(25,62,171) y da 1.8:1. Va en blanco. */ #directo .gform_wrapper input:focus-visible, #directo .gform_wrapper textarea:focus-visible, #directo .gform_wrapper select:focus-visible{ outline:2px solid #fff !important; outline-offset:3px !important; } #directo .gform_wrapper input:not([type="checkbox"]):not([type="radio"]):focus{ border-bottom-color:#fff; } /* ---- El estado de error del formulario, que no estaba estilado ---- GF lo pinta con --gf-color-danger #c02b0a, que sobre el navy da 2.69:1: el resumen entero -titulo, lista, borde e icono- resuelve a ese color. Se cambia la variable en lugar de escribir reglas para cada pieza, y con una linea quedan las cuatro. 12.19:1. */ #directo .gform_wrapper{ --gf-color-danger:#FFD9DC; --gf-color-danger-rgb:255,217,220; } /* el marcador de campo obligatorio estaba a 2.8:1; el rojo no se salva -para 4.5:1 habria que llegar a un rosa- asi que se lee como parte de la etiqueta, que es lo que es: 8.7:1 */ #directo .gform_wrapper .gfield_required{ color:rgba(255,255,255,.72); } /* ---- La silueta del boton de enviar: 2.1:1 contra el navy --------- El texto esta perfecto (7.5:1); es el contorno lo que no se veia. */ #directo .gform_wrapper .gform_footer button, #directo .gform_button, #directo button[type="submit"]{ border:1px solid rgba(255,255,255,.34) !important; } /* ---- El rotulo de las fichas del jurado, sobre las fotos ---------- Las siete imagenes no son retratos limpios: son publicaciones de redes con tipografia quemada encima, y dentro del mismo rotulo el contraste oscila entre 1.0:1 y 15.8:1. No hay color de texto que aguante eso: hace falta un chip claro y opaco. 12.5:1 sobre las zonas oscuras y 15.8:1 sobre las letras blancas. */ #jurado .card__badge{ background:rgba(255,255,255,.88); color:var(--navy); border:0; } /* ---- El rotulo «La sede» del pie de la foto: 3.7:1 ---------------- Cae en la parte alta del degradado, donde aun no ha cerrado. Los otros tres renglones pasan de sobra (12.2, 15.0 y 9.5:1). */ .venue__cap{ --fg-3:rgba(242,239,233,.72); } /* ---- Separar las secciones claras entre si ----------------------- El crema y el blanco se diferencian en 1.1:1, asi que alternarlos no separa nada; el filete que deberia hacerlo estaba a 1.4:1. Se sube solo el separador entre secciones -3.0:1- y se deja --rule para los filetes internos, que son otra cosa. */ .sec + .sec{ border-top-color:rgba(12,35,64,.48); } /* ---- La sexta animacion, que no tenia salvaguarda ---------------- Habia cinco bloques de prefers-reduced-motion y seis animaciones. */ @media (prefers-reduced-motion:reduce){ .btn__dot{ animation:none; } } /* ---- 146 KB de tipografia para una sola frase -------------------- La Newsreader italic pesa 146.872 B -el 25% de toda la carga tipografica- y la pedia unicamente el de la definicion de diccionario del titular de «Que es ITAMAE». La cursiva sintetica del navegador es indistinguible a ese tamaño y ahorra la cara entera. Los de los titulares grandes SI la siguen usando: ahi se nota. */ .h-sec small em{ font-style:normal; font-synthesis:style; } .h-sec small{ font-style:italic; } /* ---- El grano, que mantenia el compositor ocupado ---------------- mix-blend-mode:overlay sobre una capa fija a pantalla completa (inset:0, z-index:80) obliga a recomponer todo el viewport en cada frame. Al 5% de opacidad el blend no se distingue. */ .grain{ mix-blend-mode:normal; } /* ---- La foto de la sede: 173 KB de regalo ------------------------- Es background-image, asi que no acepta loading="lazy" ni fetchpriority: es la unica imagen de la pagina que no se puede diferir. Subiendo el corte del 2048 de 1200 a 1500 px, entre 1200 y 1499 sirve el de 1536 (258 KB) en lugar del de 2048 (416 KB), y a 1440 DPR1 cubre de sobra. Arreglo bueno, para despues del evento: pasarla a con el degradado en un ::before. NOM ACTUALITZAT el 7 de setembre amb la foto nova. Aquesta regla es la CINQUENA referencia a la foto, i va DESPRES de les altres: si te l'antiga, guanya ella i entre 1200 i 1499 px es veu la foto vella. Que es exactament el que ha passat en canviar la imatge i el que m'ha fet trobar-la. Si algun dia es torna a canviar la foto, son QUATRE URL i no tres. */ @media (min-width:1200px) and (max-width:1499px){ .venue__img{ --venue-photo:url("/wp-content/uploads/2026/09/instalacions-balfego-1536x864.jpg"); } } /* ---- El «Descubre» fuera y la fila de fecha centrada ------------- Con el indicador de scroll en la tercera columna, la rejilla era 1fr auto 1fr y la fecha caia en la primera pista: el par fecha+sede quedaba descentrado a la izquierda. Sin el indicador, dos pistas auto con justify-content:center centran el grupo entero. */ .hero__scroll{ display:none; } @media (min-width:760px){ .hero__meta{ grid-template-columns:auto auto; justify-content:center; gap:1.5rem clamp(2.5rem,6vw,5rem); } } /* ===================================================================== El boton del menu movil, ya como