/* DotFive · CSS de la portada (tanda de arreglos del 07/10/2026). Une en un archivo el CSS del tema de WordPress que usaba la página (antes, 7 archivos y un estilo en línea: abajo se dice de dónde sale cada parte, en el mismo orden). Sin la hoja de mCustomScrollbar (04eab9ba…) y sin las reglas que no pueden aplicarse nunca porque solo nombran clases que no salen ni en el HTML ni en el JavaScript de la página (las genera la herramienta css.mjs de la tanda; la lista de lo quitado está en FASE_B_INFORME.md, «Tanda de arreglos»). Las fuentes van en /glassy/fuentes.css. Después de este archivo se cargan /glassy/glassy.css (kit) y /glassy/tema.css. Dentro de las reglas del tema hay cinco cambios, marcados en el informe: los menús (sus span son ahora enlaces), el color del hover del menú a pantalla completa (D03: var(--green) no existía; ahora var(--gray)), el subrayado de «Contact us» en móvil (D08) y el margen de los títulos que pasan de h3 a h2. Y uno quitado: la cortinilla blanca (.loadingpage::before), decisión de Rubén del 08/10/2026; en su lugar, el fundido de entrada del final. Al final, lo nuevo de la tanda (accesibilidad y desplegables). */ /* ---------- estilo en línea wp-block-library de WordPress (lo que se usa) ---------- */ .screen-reader-text{word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal!important} .screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000} html :where(img[class*=wp-image-]){height:auto;max-width:100%} /* ---------- wp-content/litespeed/css/8328a697… (sin la @font-face: las fuentes van en /glassy/fuentes.css, con font-display: swap) ---------- */ h1,h2,h3,h4,h5,.sh1,.sh2,.sh3{font-family:'financier',serif;margin-top:0;margin-bottom:0;font-weight:300} /* ---------- wp-content/litespeed/css/9cbb85e2… (rejilla) ---------- */ :root{--gap:12px} *[class^="row"]:after{content:"";display:table;clear:both} *[class^="col"]{min-height:1px} *[class^="col"] img{width:100%} *[class^="row"]{min-height:1px;position:relative} .row{margin-left:var(--gap);margin-right:var(--gap);margin:auto} .row10{--gap:5px} .rowmargined *[class^="col"] .cinner{margin-left:var(--gap);margin-right:var(--gap)} .rowmargined{margin-left:calc(0px - var(--gap))} .contentxxlarge{max-width:2400px;margin:auto} .contentxlarge{max-width:1900px;margin:auto} .col100{width:100%} .col70{width:70%} .col66{width:66.66666666666667%} .col60{width:60%} .col50{width:50%} .col40{width:40%} .col33{width:33.33333333333333%} .col30{width:30%} *[class^="col"]{float:left} .row *[class^="col"] .cinner{height:100%;box-sizing:border-box} .row{display:flex;flex-wrap:wrap} /* ---------- wp-content/themes/dotfive/css/slick.css ---------- */ .slick-slider{position: relative;display: block;box-sizing: border-box;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y;touch-action: pan-y;-webkit-tap-highlight-color: transparent} .slick-list{position: relative;display: block;margin: 0;padding: 0} .slick-list:focus{outline: none} .slick-list.dragging{cursor: pointer;cursor: hand} .slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)} .slick-track{position: relative;top: 0;left: 0;display: block;margin-left: auto;margin-right: auto} .slick-track:before,.slick-track:after{display: table;content: ''} .slick-track:after{clear: both} .slick-loading .slick-track{visibility: hidden} .slick-slide{display: none;float: left;height: 100%;min-height: 1px} [dir='rtl'] .slick-slide{float: right} .slick-slide img{display: block} .slick-slide.slick-loading img{display: none} .slick-slide.dragging img{pointer-events: none} .slick-initialized .slick-slide{display: block} .slick-loading .slick-slide{visibility: hidden} .slick-vertical .slick-slide{display: block;height: auto;border: 1px solid transparent} .slick-arrow.slick-hidden{display: none} /* ---------- wp-content/litespeed/css/3173c976… (estilos del tema) ---------- */ :root{--color1:#fff;--text:#000;--gray:#3A3D40;--border:#AAAAAA;--background:#DBDCDE;--lightgray:#F0F0F0;--sectionmargin:8.2vw;--fontsmall:16px;--paddings:60px;--paddingslow:24px;--cardpaddings:60px;--stroke:var(--gray)} *::-webkit-scrollbar{width:8px} *::-webkit-scrollbar-track{border-radius:0;background-color:var(--lightgray)} *::-webkit-scrollbar-thumb{height:56px;border-radius:0;border:0 solid #fff0;background-clip:content-box;background-color:var(--color1)} *::-webkit-scrollbar-thumb:hover{background-color:#555} .jqswaitem,.jqswaitemer>*{-webkit-transition:all 0.7s ease-in-out;-moz-transition:all 0.7s ease-in-out;-o-transition:all 0.7s ease-in-out;transition:all 0.7s ease-in-out} .jqswa .jqswaitem,.jqswaitemer>*{transform:translateY(80px)} .jqswa .jqswaitem,.jqswaitemer>*{opacity:0} .jqswa .jqswaitem{opacity:0} .jqswa.scrollingwayfinish .jqswaitem,.jqswa.scrollingwayfinish .jqswaitemer>*{transform:translateY(0) translateX(0)} .jqswa.scrollingwayfinish .jqswaitem,.jqswa.scrollingwayfinish .jqswaitemer>*{opacity:1} .loadingajax{display:none} .jqloadingajax .loadingajax{display:block} .loadingajax .loader{position:absolute;top:0;left:0;height:100%;width:100%;z-index:999} .loadingajaxfixed .loader{position:fixed} .loader::before{content:"";position:absolute;top:0;left:0;height:100%;width:100%;background:#000;opacity:.2} .lds-ripple{display:inline-block;position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);width:80px;height:80px} .lds-ripple div{position:absolute;border:4px solid #fff;opacity:1;border-radius:50%;animation:lds-ripple 1s cubic-bezier(0,.2,.8,1) infinite} .lds-ripple div:nth-child(2){animation-delay:-0.5s} @keyframes lds-ripple{0%{top:36px;left:36px;width:0;height:0;opacity:0}4.9%{top:36px;left:36px;width:0;height:0;opacity:0}5%{top:36px;left:36px;width:0;height:0;opacity:1}100%{top:0;left:0;width:72px;height:72px;opacity:0}} .marginTop10{margin-top:10px} .marginTop40{margin-top:40px} .marginTop50{margin-top:50px} .textcenter{text-align:center} .cvcenter{display:table;height:100%;width:100%} .cvcenterinner{display:table-cell;vertical-align:middle} .clear{clear:both} .clear{width:100%} body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#000} body{margin:0} body,input,textarea,a,select{font-size:18px;line-height:1.4;font-weight:300;color:#fff;font-family:'modern gothic',serif} textarea:focus,input:focus,select{outline:none} img{border:0 none} a{text-decoration:none} a:hover{text-decoration:none} body,a,.iinputdefault,.iinputdefault::placeholder,input,textarea,select{color:#fff} .sline{position:relative} .sline::before{position:absolute;bottom:-7px;left:0;width:100%;border-bottom:1px solid var(--color1);content:"";-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out} .slinehover{cursor:pointer} .slinehover:hover::before{width:0} .zoominout{overflow:hidden} .iinputdefault,select{background:#fff0;border:0;width:100%;box-sizing:border-box;border-bottom:1px solid var(--stroke);padding-bottom:16px;padding-top:16px;margin-bottom:20px} .csectionmargin{height:var(--sectionmargin)} .csectionmarginmid{height:calc(var(--sectionmargin)/2)} .cpopupwrap{position:fixed;top:0;left:0;height:100%;width:100%;z-index:950;display:none} .cpopupimage .cpopupinner{padding:0} .cpopupimage img{display:block} .cpopupimage img,.cpopupimage video{max-width:90vw;max-height:90vh} .cpopupimage .cpopup{max-width:none;width:auto} .cpopupopa{position:fixed;top:0;left:0;height:100%;width:100%;background-color:#000;opacity:.7;z-index:940} .cpopup{position:absolute;background-color:#fff;z-index:960;max-width:1200px;width:90%;text-align:center;top:50%;left:50%;transform:translate(-50%,-50%);margin-top:-40px;opacity:0;-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out} .cpopupclose{position:absolute;top:0;right:0;height:90px;width:90px;background-image:url(/wp-content/themes/dotfive/img/elementos/i-popupclose.svg?v=812d12cb);background-position:center;background-repeat:no-repeat;background-size:40px;cursor:pointer;z-index:20} .cpopupinner{position:relative;padding:60px} .showpopup .cpopup{opacity:1;margin-top:0} .clegalwrap,.clegalwrap a{font-size:12px;line-height:1.8em} input,textarea,select{width:100%;display:block} .cpopup .sh3{margin-bottom:20px} .scheck{display:inline-block;width:13px;height:13px;vertical-align:middle;margin-right:10px;border:1px solid #fff;top:2px;left:0;position:absolute} .icheckbox{padding-left:26px;position:relative} .ccheckboxeslegal{position:relative} .ccheckboxeslegal input{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:20px;opacity:0} .ccheckboxeslegal{margin-top:15px;margin-bottom:5px} .scheck:before{content:"";display:block;position:absolute;top:52%;left:50%;transform:translateY(-50%) translateX(-50%) rotate(45deg);width:80%;height:2px;background:#fff;opacity:0} .scheck:after{content:"";display:block;position:absolute;top:52%;left:50%;transform:translateY(-50%) translateX(-50%) rotate(-45deg);width:80%;height:2px;background:#fff;opacity:0} .icheckbox.selected .scheck:after,.icheckbox.selected .scheck:before{opacity:1} .icheckbox{display:block;margin-bottom:5px;cursor:pointer} .ccheckboxeslegal,.clegalwrap{margin-top:0;margin-bottom:15px} .csection{position:relative} .csectionwhite{color:#fff} .csectionwhite h1,.csectionwhite h2,.csectionwhite h3,.csectionwhite h4,.csectionwhite h5,.csectionwhite .sh1,.csectionwhite .sh2,.csectionwhite .sh3,.csectionwhite a{color:#fff} .csectionopa{position:absolute;top:0;left:0;height:100%;width:100%;background:#000;z-index:100;opacity:0;-webkit-transition:all 1.2s ease-in-out;-moz-transition:all 1.2s ease-in-out;-o-transition:all 1.2s ease-in-out;transition:all 1.2s ease-in-out} .csectionbg{position:absolute;top:0;left:0;height:100%;width:100%;background-position:center;background-size:cover;z-index:90} .scrollingwayfinish .csectionopa{opacity:.8} .csectiontext{position:relative;z-index:150} .csectionfullscreen{height:100vh;padding-top:0;padding-bottom:0} .csectionfullscreen .csectiontext{height:100%} .csectionbgvideo{overflow:hidden} .csectionbgvideo video{position:absolute;top:0;left:0;display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover} .cburger{position:absolute;top:50%;left:0;transform:translateY(-50%);width:42px;z-index:} .cburgerinner{position:relative} .cbar{width:100%;height:2px;background:var(--color1);margin-top:8px;margin-bottom:8px} .cheader{position:fixed;top:0;left:0;width:100%;z-index:700;height:100px;padding:var(--paddings);box-sizing:border-box} .cheaderinner{position:relative;height:100%} p{margin-top:0;margin-bottom:32px} p:last-child{margin-bottom:0} .relative{position:relative} .slide{height:100%;width:100%} .slide{background-position:center;background-size:cover} h1,.sh1{font-size:80px;line-height:.9} h2,.sh2{font-size:64px;line-height:1;color:var(--color1)} h3,.sh3{font-size:40px;line-height:1;color:var(--color1)} h4{font-size:calc(20px + .45vw);line-height:1.4} h5{font-size:calc(20px + .2vw);line-height:1.4} .cta{cursor:pointer;border:0;width:fit-content;display:block;border-radius:30px;background:var(--color1);color:#000;text-transform:uppercase;font-size:var(--fontsmall);padding:16px;padding-left:32px;padding-right:32px;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out} .cta:hover{background:var(--gray);color:#fff} .ctoptasty{position:relative;height:100vh} .csectionopa{background:linear-gradient(180deg,#fff0 0%,rgb(0 0 0 / .4) 100%),linear-gradient(0deg,rgb(0 0 0 / .4) 0%,rgb(0 0 0 / .4) 100%)} .scrollingwayfinish .csectionopa{opacity:.4} .cheader{text-align:right} .cmenutop{position:absolute;top:50%;width:85%;transform:translateY(-50%);right:0} .cmenutop a{color:var(--color1);cursor:pointer;margin-left:var(--paddingslow);-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out} .scrolled .cmenutop a{color:#000} .scrolled .cmenutop .sline::before{border-color:#000} .cmarquesina{width:100%;font-size:var(--fontsmall);padding-bottom:var(--paddings);padding-top:var(--paddings);box-sizing:border-box;text-transform:uppercase;background:var(--gray)} .cmarqueeitem span{margin-left:var(--paddingslow);margin-right:var(--paddingslow)} .scolor{color:var(--color1)} .contentxlarge{max-width:1600px} .citemproyecto video{display:block;width:100%;height:auto;object-fit:cover} .citemproyectosquare img{display:block;width:28vw;height:auto;aspect-ratio:1/1;object-fit:cover} .citemproyecto .cinner{position:relative} .sdescproyecto{opacity:.5} .cheader::before{content:"";display:block;position:absolute;top:0;left:0;height:100%;width:100%;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;background:#fff;transform:translateY(-104%);opacity:0} .scrolled .cheader::before{opacity:1;transform:translateY(0%)} .cheaderlogo{position:absolute;top:50%;left:0;transform:translateY(-50%);-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out} .cheaderlogo svg *{-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out} .scrolled .cheaderlogo svg *{fill:#000} .cburger{display:none} .ctext h3,.ctext h2.sh3{margin-bottom:30px} .ccheckboxeslegal{margin-top:30px;margin-bottom:30px} footer,footer *{font-size:var(--fontsmall)} textarea{height:160px} .ctextform{padding-right:5vw} .ctextform a{text-decoration:underline} .ctextform a:hover{text-decoration:none} .cheaderlogo a{display:block} .cbannertoptext>.cinner{max-width:850px} .csectionbannerdefault .csectiontext{height:auto;bottom:0;top:auto;position:absolute;box-sizing:border-box;width:100%;padding:var(--paddings)} .citemproyecto video{aspect-ratio:16/9;width:auto;height:auto;max-height:55vh;max-width:calc(100vw - var(--paddingslow) - var(--paddingslow));margin-bottom:var(--paddingslow);object-fit:cover} .citemproyecto .cinner{padding-left:calc(var(--paddingslow) / 2);padding-right:calc(var(--paddingslow) / 2)} .cbordertop{border-top:1px solid var(--stroke)} .csectionservice .cinner{padding-right:var(--paddings)} .csectionimages .cinner{position:relative} .csectionimages img{height:70vh;width:100%;display:block;object-fit:cover} .csecimg1 img{height:100%;position:absolute} .cimgsquared .cinner{padding:60px} .cimgsquared .cinner{border-right:1px solid var(--stroke)} .citembottomed{padding:60px} .cglassylogo{position:absolute;right:0;top:var(--sectionmargin)} footer{border-top:1px solid var(--stroke);padding-top:var(--paddingslow);padding-bottom:calc(var(--paddingslow) * 2)} footer .contentxxxlarge{padding-left:var(--paddings);padding-right:var(--paddings)} .cheaderlogo a,.cheaderlogo svg{display:block} .showmenuresponsive .cheader::before{transform:translateY(-101%);opacity:0} .cmenutop{-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;z-index:10} .showmenuresponsive .cburger .cbar{background:#000} .showmenuresponsive .cburger .cbar{margin-top:12px!important;margin-bottom:12px!important} .scrolled .cmenutop a{color:black!important} .showmenuresponsive .cmenutop a{color:black!important} .showmenuresponsive .cheaderlogo svg *{fill:black!important} .showmenuresponsive .cmenutop .sline::before{border-color:black!important} .scrolled .cburger .cbar{background:black!important} .cburger{cursor:pointer;z-index:40} .cburger .cbar{-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out} .csupermenu{position:fixed;z-index:10;top:0;right:0;height:100%;width:100%;background:var(--color1);transform:translateX(102%);-webkit-transition:all 0.9s ease-in-out;-moz-transition:all 0.9s ease-in-out;-o-transition:all 0.9s ease-in-out;transition:all 0.9s ease-in-out} .csupermenuinner,.csupermenuinnerinner,.csupermenuinner1{height:100%;text-align:left} .csupermenuinner1 a{display:block;text-align:left!important;padding:var(--paddings);color:#000;padding-top:0;padding-bottom:0;cursor:pointer;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out} .csupermenuinner1 a:hover{color:var(--gray)} .cheaderlogo{z-index:30} .cheaderlogo svg *{-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out} .showmenuresponsive .csupermenu{transform:translateX(0%)} .csupermenuopa{position:fixed;top:0;left:0;height:100%;width:100%;background:#000;z-index:8;opacity:0!important;pointer-events:none;-webkit-transition:all 1.2s ease-in-out;-moz-transition:all 1.2s ease-in-out;-o-transition:all 1.2s ease-in-out;transition:all 1.2s ease-in-out} .showmenuresponsive .csupermenuopa{opacity:.3;pointer-events:all} .csupermenuinner1 a{float:left;width:64%;display:block;box-sizing:border-box} .sh2:nth-child(1),.sh2:nth-child(3),.sh2:nth-child(5){width:35%} .cpopupimage .cpopup{width:100%;height:100%;background:#fff0} .cpopupimage .cpopupinner{position:relative;width:100%;height:100%} .cpopupimage .cpopupinner iframe{max-width:1920px;max-height:1080px;width:95vw;height:95vh;aspect-ratio:16/9;border:0;background:#fff0} .csectionworks,.csectionglassy{overflow:hidden;position:relative} .ccontrol{position:absolute;z-index:500;top:50%;transform:translateY(-80%);cursor:pointer;opacity:0;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;transition-delay:0.5s} .ccontrolleft{left:var(--paddings)} .ccontrolright{right:var(--paddings)} .ccontrol svg{width:60px} .csectionworks:hover .ccontrol{opacity:1;transition-delay:0s} /* ---------- wp-content/themes/dotfive/basics.css ---------- */ .marginTop10{margin-top: 10px} .marginTop40{margin-top: 40px} .marginTop50{margin-top: 50px} .rightcol{display: flex;justify-content: flex-end;align-items: flex-end} /* ---------- wp-content/themes/dotfive/css/estil-responsive.css ---------- */ @media (max-width: 1800px){ .contentxlarge{max-width: 1500px} } @media (max-width: 1700px){ .contentxlarge{max-width: 1400px} } @media (max-width: 1500px){ .contentxlarge{max-width: 1300px} } @media (max-width: 1400px){ .contentxlarge{max-width: 1200px} h2,.sh2{font-size: 54px} h3,.sh3{font-size: 30px} body,input,textarea,a,select{font-size: 16px} :root{--fontsmall:14px} } @media (max-width: 1300px){ .contentxlarge{max-width: 1000px;padding-left: var(--paddings);padding-right: var(--paddings)} } @media (max-width: 1000px){ .ccontrolleft{left: calc(var(--paddings) * 1.5);opacity: 1!important} .ccontrolright{right: calc(var(--paddings) * 1.5);opacity: 1!important} .ccontrol svg{width: 40px} .cmenutop a{display: none} .cmenutop .slinehover{display:inline-block} .cmenutop{right: 70px} .cburger{display: block;left: auto;right: 0px} .csectionimages img{position: relative;aspect-ratio:1/1!important;height: auto;margin-bottom: var(--paddings)} .cimgsquared .cinner,.citembottomed{padding: 0px;border: 0px} .cimgsquared .cinner{padding-top: var(--paddings);padding-bottom: var(--paddings)} .citembottomed{padding-bottom: 40px} .citemproyectosquare img{width: 50vw} .ctext h3,.ctext h2.sh3{margin-bottom: 10px} :root{--paddings:24px} .csectionservice .cinner{padding-right: 0px;margin-bottom: var(--paddings)} h1,.sh1{font-size: 54px} h2,.sh2{font-size: 44px} h3,.sh3{font-size: 28px} .cmarqueeitem span{margin-left: calc(var(--paddings) / 2);margin-right: calc(var(--paddings) / 2)} *[class^="col"]{width: 100%} .ccolfirsttext{margin-bottom: 40px} .marginTop40{margin-top: 20px} .cheaderlogo svg{max-height: 35px;width: auto} .cheader{height: 80px} .cform{margin-top: 40px} .ccheckboxeslegal{margin-top: 10px;margin-bottom: 20px} } /* ---------- Tanda del 07/10/2026: accesibilidad (WCAG 2.2 AA), sin cambiar el aspecto ---------- */ /* Elementos que eran div o span y ahora son botones o enlaces (hamburguesa, flechas del carrusel, título de cada trabajo, aspa del vídeo, opciones del menú, «Let's talk!»...): sin el aspecto de botón del navegador. */ button.cburger, button.ccontrol, button.stitleproyecto, button.cpopupclose { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; border-radius: 0; background-color: transparent; color: inherit; font: inherit; line-height: inherit; letter-spacing: inherit; word-spacing: inherit; text-transform: inherit; text-align: inherit; text-indent: 0; text-shadow: none; } .cburgerinner, .cbar, .ccontrolcircle { display: block; } button.stitleproyecto { display: block; width: 100%; cursor: pointer; } /* Menú superior (b03) y menú a pantalla completa (b02): sus span son ahora enlaces (las reglas del tema, arriba, ya dicen «a»). El color del hover (D03) y el subrayado de «Contact us» en móvil (D08) también están arriba. Con el teclado, la opción con el foco toma el color del hover. */ .cheader .csupermenuinner1 a:focus-visible { color: var(--gray); outline: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } /* El menú a pantalla completa, cerrado, está fuera de la pantalla: que tampoco se pueda llegar a él con el tabulador. */ .csupermenu { visibility: hidden; } .showmenuresponsive .csupermenu { visibility: visible; } /* Hamburguesa: el color de sus rayas, para que el contorno de foco (currentColor) se vea igual que ellas. */ .cburger { color: var(--color1); } .scrolled .cburger, .showmenuresponsive .cburger { color: #000; } /* D04: el menú superior es blanco y fino sobre el vídeo de portada, y en algunos fotogramas claros bajaba a 1,5:1. Un degradado oscuro de 180 px arriba, solo mientras se ve la portada (sin scroll), lo deja por encima de 4,5:1. */ .cheader::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 180px; background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, 0)); pointer-events: none; z-index: -1; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; } .scrolled .cheader::after, .showmenuresponsive .cheader::after { opacity: 0; } /* Foco visible (2.4.7), solo con el teclado: un contorno del color del texto, como el pie del kit. */ .cheader a:focus-visible, .cheader button:focus-visible, main a:focus-visible, main button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } /* El título de cada trabajo ocupa todo el ancho del carrusel, que recorta lo que sobresale: se subraya. */ button.stitleproyecto:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } /* Las flechas y el aspa son círculos blancos sobre vídeo: contorno doble (negro y blanco), que se ve sobre cualquier fondo. */ /* (el SVG de la flecha mide 60 × 100 y el círculo va en medio: el anillo se dibuja aparte, alrededor del círculo) */ .ccontrol:focus-visible { outline: none; } .ccontrol:focus-visible::after { content: ""; position: absolute; left: 50%; top: 50px; width: calc(100% + 4px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff; pointer-events: none; } .cpopupclose:focus-visible { outline: 2px solid #fff; outline-offset: -23px; border-radius: 50%; } /* Las flechas solo aparecen al pasar el ratón por los trabajos (escritorio): también cuando el foco está dentro. */ .csectionworks:focus-within .ccontrol { opacity: 1; transition-delay: 0s; } /* Campos del formulario: la raya de abajo pasa a blanca y más gruesa (sin mover nada). */ .cformdefault .iinputdefault:focus-visible, .cselect select:focus-visible { border-bottom-color: #fff; box-shadow: 0 1px 0 #fff; } .icheckbox input:focus-visible + .scheck { outline: 2px solid #fff; outline-offset: 3px; } .cformdefault .cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* Destinos de los enlaces internos (secciones, párrafo, formulario) y avisos: reciben el foco sin ser controles. */ main[tabindex="-1"]:focus, section[tabindex="-1"]:focus, p[tabindex="-1"]:focus, form[tabindex="-1"]:focus, .cformgracias:focus { outline: none; } /* «Skip to content» (b01): oculto hasta que le llega el foco con el tabulador. */ .cskip { position: fixed; left: 16px; top: 16px; z-index: 9500; padding: 10px 18px; border-radius: 30px; background: #fff; color: #000; font-size: var(--fontsmall); line-height: 1.4; text-transform: uppercase; text-decoration: none; cursor: pointer; } .cskip:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; padding: 0; margin: -1px; } .cskip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 2px #000; } /* Botón de pausa (b04, WCAG 2.2.2; decisión de Rubén del 08/10/2026, el mismo en DotFive, Tasty y KONTENT): siempre visible, abajo a la derecha de la portada, a 24 px de los bordes (16 px en móvil). Círculo de 44 px, fondo negro al 45 %, borde blanco al 50 % e icono blanco: dos barras (pausar) o un triángulo (reanudar, con data-pausado; desde el 08/10/2026 sin aria-pressed: solo cambia el aria-label, «Pause motion» o «Play motion»). «bottom» suma 100vh − 100svh: la portada mide 100vh, y en el móvil, con la barra del navegador a la vista, su parte de abajo queda fuera de la pantalla; así el botón se ve desde el principio (en escritorio la resta es 0). */ .ctoptasty { --pausa-margen: 24px; } button.cpausa { -webkit-appearance: none; appearance: none; position: absolute; right: var(--pausa-margen); bottom: var(--pausa-margen); bottom: calc(100vh - 100svh + var(--pausa-margen)); z-index: 200; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer; transition: background-color var(--gl-hover), border-color var(--gl-hover); } button.cpausa svg { display: block; width: 18px; height: 18px; } button.cpausa .cpausa-reanudar, button.cpausa[data-pausado] .cpausa-pausar { display: none; } button.cpausa[data-pausado] .cpausa-reanudar { display: block; } @media (hover: hover) { button.cpausa:hover { background-color: rgba(0, 0, 0, .7); border-color: #fff; } } /* Foco: el mismo cambio que el hover y un anillo doble (negro y blanco), que se ve sobre cualquier fotograma. */ button.cpausa:focus-visible { background-color: rgba(0, 0, 0, .7); border-color: #fff; outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 2px #000; } /* Hasta 1000 px el texto de la portada ocupa todo el ancho: sube lo que ocupa el botón (44 px y 16 de aire) para que el botón no lo tape. */ @media (max-width: 1000px) { .ctoptasty .csectiontext { padding-bottom: calc(var(--pausa-margen) + 60px); padding-bottom: calc(100vh - 100svh + var(--pausa-margen) + 60px); } } @media (max-width: 767px) { .ctoptasty { --pausa-margen: 16px; } } /* G10: el enlace «privacy policy» de la casilla se distinguía del texto solo por ser enlace (1.4.1). */ .icheckbox a { text-decoration: underline; text-underline-offset: 2px; } /* G17: al enviar con campos vacíos, el navegador lleva el foco al primero: que no se quede debajo de la cabecera fija. */ html { scroll-padding-top: 130px; } @media (max-width: 999px) { html { scroll-padding-top: 100px; } } /* Resultado del envío (G11): el de error, con el correo. */ .cformerror { margin-top: 20px; } .cformerror a { text-decoration: underline; } /* Póster de la portada (b04): una imagen debajo del vídeo, con el mismo encuadre (cover), en vez del atributo poster, para que el móvil en vertical baje solo el centro 9:16 (lo único que se ve; 58 KB en vez de 199 KB). Cuando el vídeo tiene fotograma, lo tapa. Desde el 08/10/2026 el vídeo hace lo mismo: en vertical, video-movil.mp4 (ese centro). */ .csectionbgvideo .cposter img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* Entrada de la página (decisión de Rubén del 08/10/2026): sin cortinilla blanca. La portada ya no espera al JavaScript para aparecer (antes su fondo, el título y la entradilla salían de opacidad 0 cuando el JS añadía scrollingwayfinish): se pinta tal cual queda, con la capa oscura (.csectionopa) al 40 %, y la cabecera y el contenido entran con un fundido de CSS de 0,5 s desde opacidad 0,6. Al empezar en 0,6 el póster cuenta como pintado desde el primer momento (el LCP no espera al fundido). Con «reducir movimiento», sin fundido. Las demás secciones siguen apareciendo al bajar. */ .ctoptasty .jqswa .jqswaitem { opacity: 1; transform: none; } .ctoptasty .csectionopa { opacity: .4; } @keyframes df-entrada { from { opacity: .6; } } @media (prefers-reduced-motion: no-preference) { .cheader, main { animation: df-entrada .5s ease-out; } } /* Subtítulo de la portada (b04, textos aprobados por Rubén el 08/10/2026): debajo del H1, con la letra de los títulos (financier) al tamaño de .sh3 (40 px; 30 px por debajo de 1.400 y 28 px por debajo de 1.000). Es un párrafo, no un título: el H1 sigue siendo el único y el orden de los títulos no cambia. */ .ctoptasty .csubtitulo { margin: 12px 0 6px; } /* G03: con «reducir movimiento», las apariciones al hacer scroll son solo un fundido (sin desplazamiento). */ @media (prefers-reduced-motion: reduce) { .jqswa .jqswaitem, .jqswaitemer > * { transform: none !important; } } /* Desplegables «Select city to shoot» y «Select type of shoot» (b13):