/* ========================================================================== CANDELA OFFICE — sistema del sitio Papel en blanco, tinta negra, Clarendon. Todas las medidas salen de los PDF de layout: escritorio medido sobre 1366×768, móvil sobre 1125×2436 (≡375 CSS). ========================================================================== */ /* WOFF2 primero: pesa la mitad que el OTF (24 KB frente a 45 KB). El head de cada página los precarga, así que la descarga arranca con el HTML y no después de leer este archivo. Con `block` el texto espera a la fuente buena en lugar de pintarse con la de respaldo y cambiar a la vista: eso era el parpadeo de tipografía al entrar y al cambiar de página. */ @font-face{ font-family:"Clarendon"; src:url("/assets/fonts/ClarendonSerial-Light.woff2") format("woff2"), url("/assets/fonts/ClarendonSerial-Light.otf") format("opentype"); font-weight:300 400; font-style:normal; font-display:block; } @font-face{ font-family:"Clarendon"; src:url("/assets/fonts/ClarendonSerial-Medium.woff2") format("woff2"), url("/assets/fonts/ClarendonSerial-Medium.otf") format("opentype"); font-weight:500 700; font-style:normal; font-display:block; } :root{ --bg:#fbfaf8; --ink:#12100e; --mute:#8a847a; --pad:clamp(18px,2.64vw,42px); /* 36 px a 1366 */ --fila:51%; /* altura de la fila de navegación */ --txt:clamp(10px,.805vw,13px); /* 11 px a 1366, medido contra el PDF */ --marca:clamp(30px,2.955vw,49px); /* 40 px a 1366: 305 px de ancho */ --hueco:6px; /* separación entre fotos del carrusel */ --ease:cubic-bezier(.16,1,.3,1); --serif:"Clarendon",Georgia,"Times New Roman",serif; } *{box-sizing:border-box;} html,body{margin:0;height:auto;min-height:100%;overflow-anchor:none;scroll-behavior:auto;} body{background:var(--bg);color:var(--ink);font-family:var(--serif);font-weight:400; font-size:var(--txt);line-height:1.35;-webkit-font-smoothing:antialiased; overflow-x:hidden;overscroll-behavior-y:none;} a{color:inherit;text-decoration:none;} p{margin:0;} h1,h2,h3{font-size:inherit;font-weight:500;margin:0;} /* Grano de carrete, coherente con el shooting analógico */ body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none; opacity:.045;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} /* ========================================================================== CHROME — lo que no cambia nunca de sitio ========================================================================== */ .chrome{position:fixed;inset:0;z-index:30;pointer-events:none;} .chrome a,.chrome button{pointer-events:auto;} /* El bloque de la derecha tiene dos líneas —la ciudad y debajo la hora— y el de la izquierda una. Lo que se alinea a la altura de la fila es la PRIMERA línea de los dos, no el centro de la caja: por eso no se centra el bloque entero, se sube media línea y la hora queda colgando. */ .nav{position:absolute;top:var(--fila);left:0;right:0;transform:translateY(-.675em); display:flex;justify-content:space-between;align-items:flex-start;padding:0 var(--pad);} .nav .izq{display:flex;gap:clamp(26px,7.83vw,130px);} /* 107 px a 1366 */ .nav .der{display:flex;align-items:flex-start; gap:clamp(18px,2.86vw,48px);text-align:right;} /* 39 px */ .nav .der .lugar{display:block;line-height:1.35;} .nav .izq a{position:relative;} .nav .izq a::after{content:"";position:absolute;left:0;right:100%;bottom:1px; height:1px;background:var(--ink);transition:right .45s var(--ease);} .nav .izq a[aria-current]::after{right:0;} /* El subrayado al pasar por encima, SÓLO donde hay un ratón de verdad. En un móvil el :hover se queda pegado después de tocar y el rótulo se quedaba subrayado junto al de la página en la que estás. */ @media (hover:hover) and (pointer:fine){ .nav .izq a:hover::after{right:0;} } /* Contact sólo existe como botón en móvil: en escritorio el correo, Instagram y la ciudad están siempre a la vista arriba a la derecha. El enlace sigue en el HTML de todas las páginas, así que la página nunca queda huérfana. */ .nav .izq a.solo-movil{display:none;} /* Con una ficha de cliente abierta, el bloque de contacto caería justo encima del proyecto. En el PDF no aparece ahí: se retira. */ body.proyecto .nav .der{opacity:0;pointer-events:none;} /* Presente para buscadores y lectores de pantalla, invisible en pantalla. */ .solo-lectores{position:absolute!important;width:1px;height:1px;margin:-1px; padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;} /* line-height 1.3 y no 1: con 1 la caja medía justo 1 em y la parte alta de la C, la O y las astas sobresalía de ella. Safari de iPhone pinta los elementos fijos de las páginas con scroll (Home, Info, Services) en una capa propia y RECORTA lo que se sale de la caja: por eso la C y la O salían cortadas por arriba allí y no en Contact ni Clients. El .15em que se resta al bottom es el medio interlineado que se añade por abajo: la línea base queda exactamente donde estaba. */ .marca{position:absolute;left:var(--pad);bottom:calc(clamp(26px,5.4vh,48px) - .15em); font-weight:400;font-size:var(--marca);line-height:1.3;white-space:nowrap;} .marca a{display:inline-block;} .rights{position:absolute;right:var(--pad);bottom:clamp(24px,4.95vh,42px); display:flex;gap:15px;white-space:nowrap;} .idioma .otro{color:var(--mute);} /* Mientras no exista el árbol /es/ el rótulo se enseña pero no enlaza a una página que daría 404. Al montarlo, este span pasa a ser un . */ /* La home nace tapada desde el propio HTML. Si se ocultara desde JavaScript se vería el carrusel un instante antes de que el script llegue a esconderlo. */ body.entrando .nav, body.entrando .rights, body.entrando .col{opacity:0 !important;} body.entrando #marca{visibility:hidden;} .nav,.rights,.col{transition:opacity .9s var(--ease);} /* El nombre se escribe en su sitio definitivo —abajo a la izquierda— sobre la página en blanco. No viaja desde el centro: al acabar de teclearse aparecen el menú y el carrusel, y él ya está anclado donde se queda. */ .marca .ch{display:inline-block;} .marca .caret{display:inline-block;width:.045em;height:.78em;background:var(--ink); margin-left:.07em;vertical-align:baseline;animation:parpadeo .9s steps(1) infinite;} @keyframes parpadeo{0%,49%{opacity:1}50%,100%{opacity:0}} /* ========================================================================== HOME — la columna de fotografías, en bucle ========================================================================== */ .col{position:relative;z-index:1;display:flex;flex-direction:column; align-items:center;gap:var(--hueco);} .col figure{margin:0;position:relative;will-change:transform;} .col img,.col video{display:block;width:100%;height:auto;} /* ========================================================================== PANELES DE SECCIÓN — Info, Services, Clients, Contact El carrusel queda detrás, velado. En Clients y Contact ni se construye. ========================================================================== */ body.seccion .col{opacity:.14;transition:opacity .7s var(--ease);} .panel{position:fixed;inset:0;z-index:12;pointer-events:none;} .panel > *{pointer-events:auto;} body.seccion{overflow:hidden;height:100%;} .cerrar{position:fixed;right:var(--pad);top:clamp(10px,2.2vh,20px);z-index:14; font-size:.73em;} .cerrar .p{display:inline-block;transition:transform .3s var(--ease);} .cerrar:hover .p.l{transform:translateX(-4px);} .cerrar:hover .p.r{transform:translateX(4px);} /* --- Info: el texto bajo la nav, la dirección bajo el bloque de contacto --- */ .info-txt{position:fixed;top:calc(var(--fila) + 37px);left:var(--pad); max-width:59vw;z-index:12;line-height:1.25;} .info-dir{position:fixed;top:calc(var(--fila) + 54px);right:var(--pad); text-align:right;z-index:12;line-height:1.25;} /* --- Services: tres bloques centrados, títulos en Medium --- */ .serv{position:absolute;inset:0;overflow:hidden;padding:4vh 0 6vh;text-align:center; display:flex;flex-direction:column;justify-content:center; font-size:clamp(9px,1.61vh,14px);line-height:1.135;} .serv section{margin:0 0 45px;} .serv section:last-child{margin-bottom:0;} .serv h2{margin:0 0 17px;} .serv ul{margin:0;padding:0;} .serv li{list-style:none;} /* --- Clients: tres columnas —nombre, servicios, sector— --- */ .cli{position:absolute;inset:0;} .cli-lista{position:absolute;top:var(--pad);left:34.8%;display:grid; grid-template-columns:max-content max-content max-content; column-gap:clamp(16px,2.5vw,36px);line-height:1.2;} .cli-lista a{display:contents;} .cli-lista .n,.cli-lista .s,.cli-lista .x{white-space:nowrap;} .cli-lista a:hover .n,.cli-lista a:hover .s,.cli-lista a:hover .x, .cli-lista a[aria-current] .n,.cli-lista a[aria-current] .s,.cli-lista a[aria-current] .x{ text-decoration:underline;text-underline-offset:1px;} /* --- Ficha de cliente: cuarta columna a la derecha --- */ /* Los rótulos, el párrafo, los números y el título no se mueven: lo único que hace scroll es la tira de fotografías. */ .proy{position:absolute;top:var(--pad);left:67.7%;right:var(--pad); bottom:clamp(16px,3vh,28px);display:flex;flex-direction:column;overflow:hidden;} /* «Digital» y «Creative Services» van en Light, no en Medium (layouts del 19-sep). Los rótulos de Services siguen en Medium: eso es otra página. */ .proy-h{margin:0;font-weight:400;} .proy-fila{display:flex;justify-content:space-between;align-items:baseline;} .proy-fila .proy-nums{margin:0;} .proy-copy{margin:7px 0 0;text-align:justify;line-height:1.12;} .proy-copy + .proy-fila{margin-top:24px;} .proy-nums{margin:19px 0 0;display:flex;gap:1.5em;} .proy-nums button{background:none;border:0;padding:0;cursor:pointer; font:inherit;color:inherit;opacity:.42;transition:opacity .3s var(--ease);} .proy-nums button[aria-current],.proy-nums button:hover{opacity:1;} .proy-caso{display:flex;flex-direction:column;flex:1;min-height:0;} .proy-caso[hidden]{display:none;} /* Título y pie van ANTES de las fotografías, como en el PDF. */ .proy-rot{flex:none;margin:9px 0 6px;line-height:1.3;font-size:.73em;} .proy-titulo,.proy-pie{margin:0;font-weight:400;} .proy-visor{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;} .proy-flechas{display:none;} .proy-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;} .proy-scroll::-webkit-scrollbar{display:none;} /* Cada pieza lleva su propio ancho de columna escrito en el HTML (--w), tal y como está medido en el PDF del proyecto: no todas van a sangre. */ /* El hueco entre piezas es el MISMO que entre las fotos de la home. */ .proy-fotos{display:flex;flex-direction:column;align-items:flex-start;gap:var(--hueco);} .proy-fotos .pz{display:block;width:calc(var(--w,1) * 100%);height:auto;} /* La foto de la parte Digital: 405 x 541 bajo el texto (layouts del 19-sep, 44 px de tinta a foto). La caja ocupa el alto que queda y la foto se ajusta dentro sin recortarse: si la pantalla es baja, encoge entera. */ .proy-dig{flex:1 1 0;min-height:0;margin:43px 0 0;container-type:size;} .proy-dig .pz{display:block;width:auto;max-width:100%; height:min(100cqh, calc(100cqw / var(--ar)));object-fit:cover;} /* --- Contact: misma composición centrada que en móvil --- */ .cont{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:14px;text-align:center; padding:calc(var(--pad) + 30px) var(--pad);line-height:1.5;} .cont-linea a{text-decoration:underline;text-underline-offset:2px;} .cont-foto{display:block;width:auto;height:auto; max-width:min(300px,34vw);max-height:46vh;margin:6px 0 0;} .cont-pie{line-height:1.35;} .cont-pie p:last-child{margin-top:14px;} /* El layout del PDF está calculado para 1366. Por debajo, la lista de clientes acabaría metiéndose en la ficha: se estrecha la separación y se recolocan. */ @media(max-width:1200px){ .cli-lista{left:28%;column-gap:clamp(14px,2.4vw,30px);} .proy{left:62%;} } @media(max-width:1000px){ .cli-lista{left:24%;column-gap:clamp(12px,1.9vw,22px);} .proy{left:57%;} } @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition-duration:1ms !important;} } /* ========================================================================== MÓVIL — nada de aquí afecta al escritorio. Medido sobre web_mobile.pdf (1125×2436 ≡ 375 CSS px). El menú sube arriba y gana Contact; el nombre baja a pie de pantalla, muy grande, con las fotografías pasando por detrás. No hay bandas blancas. ========================================================================== */ @media(max-width:860px){ /* ------------------------------------------------------------------ MÓVIL — medido sobre WEB VERTICAL.pdf (375 x 812 CSS px). Todas las cifras de los comentarios son la TINTA medida en el PDF. ------------------------------------------------------------------ */ /* --pie: en el layout la tira de fotos de la ficha acaba 20 px por encima del nombre (y739 / y759). El nombre bajó 10 px el 19-sep y la tira con él. */ /* Un píxel más que el layout, decisión del 20-sep: a 11 px se leía justo. El nombre (--marca) no cambia. */ :root{--pad:12px; --txt:12px; --marca:12.2vw; --hueco:6px; --pie:calc(var(--marca) + 17px);} /* --- El menú, arriba, en una sola fila y sobre la fotografía --- PDF: tinta en y 12-22, de x12 a x362. */ /* 10 px más abajo que el layout (feedback del 19-sep): en el iPhone quedaba pegado al borde superior. */ .nav{position:fixed;top:19px;transform:none;padding:0 var(--pad);} .nav .izq{flex:1;justify-content:space-between;gap:0;white-space:nowrap;} .nav .izq a.solo-movil{display:inline;} /* El correo, Instagram y la hora tienen su propia página: aquí sobran. */ .nav .der{display:none;} /* --- El nombre, a pie de pantalla y a casi todo el ancho --- PDF: tinta en y 759-794, de x13 a x361 (348 de ancho, el 92,8%). */ /* 10 px más abajo que en el layout (feedback del 19-sep, visto en iPhone: Safari deja la barra flotante debajo y el nombre quedaba alto). */ .marca{left:var(--pad);right:var(--pad);bottom:calc(-4px - .15em);} /* El copyright vive en Contact, no en el chrome. */ .rights{display:none;} /* --- El carrusel ocupa el alto entero: sin bandas, el menú y el nombre flotan encima. Tres piezas en pantalla, el ancho lo pone el JS. --- */ .col{padding:0;} .col figure{flex:none;} /* --- Paneles de sección --- */ /* El ( Close ) sólo sale en la ficha de cliente: ahí va suelto a la derecha, debajo del listado. PDF: tinta en y 253-261, hasta x362. */ .cerrar{position:static;align-self:flex-end;margin:32px 0 0;z-index:16;} /* Info: el bloque de texto va centrado en la pantalla. PDF: tinta de y356 a y451, de margen a margen. */ .info-txt{position:fixed;top:50%;transform:translateY(-50%); left:var(--pad);right:var(--pad);max-width:none;text-align:center;line-height:1.3;} .info-dir{display:none;} /* la dirección está en Contact */ /* Services: los tres rótulos caen en y67, y355 y y557, y la última línea acaba en y710. El hueco rótulo->lista es de 13 y el de bloque a bloque de 41 (medidos de caja a caja, no de tinta a tinta). */ /* Centrado en alto en la página, como Info (feedback del 19-sep). Si en un móvil bajo no cabe, hace scroll dentro sin pisar ni el menú ni el nombre. */ .serv{position:absolute;top:50%;bottom:auto;left:0;right:0;inset-inline:0; transform:translateY(-50%);height:auto; max-height:calc(100% - 2 * (var(--marca) + 34px)); overflow-y:auto;scrollbar-width:none; padding:0 var(--pad);justify-content:flex-start; font-size:12px;line-height:1.18;} .serv::-webkit-scrollbar{display:none;} .serv section{margin:0 0 41px;} .serv section:last-child{margin-bottom:0;} .serv h2{margin:0 0 13px;} /* --- Contact --- CONTACTMOBILE.pdf del 20-sep, tinta medida sobre 375 x 812: línea 1 y137-146 x45-324 -> IZQUIERDA, con margen de 45 línea 2 y151-160 x46-137 -> pegada a la anterior foto y179-577 x45-329 -> 285 x 399, proporción 0,714 dirección y584-607 x46-219 -> IZQUIERDA, justo bajo la foto copyright y655-668 x46-209 -> IZQUIERDA Todo el bloque va sangrado 45 px; el menú y el nombre no se mueven. */ .cont{position:absolute;inset:min(120px, 11.5vh) 45px calc(var(--marca) + 8px) 45px; text-align:left;display:flex;flex-direction:column;align-items:stretch; justify-content:flex-start;gap:0;padding:0; overflow:hidden;line-height:1.35;} .cont::-webkit-scrollbar{display:none;} .cont-linea a{text-decoration:underline;text-underline-offset:2px;} /* Las dos líneas van seguidas, sin aire entre ellas. */ .cont-linea + .cont-linea{margin-top:0;} /* En un móvil como el del layout se ve entera, 285 x 399. En uno más bajo —con la barra de Safari arriba el alto útil se queda en unos 680— no cabe a todo lo ancho: entonces la fotografía ENCOGE ENTERA, conservando su proporción, en vez de recortarse. «contain» la dibuja al alto que quepa y «left» la deja alineada con el texto, que es como está el layout. */ .cont-foto{display:block;width:100%;max-width:none;max-height:none; height:auto;aspect-ratio:285/399;object-fit:contain;object-position:left top; margin:13px 0 0;flex:0 1 auto;min-height:0;} .cont-pie{margin:5px 0 0;line-height:1.35;text-align:left;} /* El copyright sale del bloque y se pone DE PIE en el margen derecho, como en el layout del 20-sep (PHOTO-2026-09-20-16-05-47): girado, leyéndose de abajo arriba, y centrado entre el menú y el nombre —el mismo aire arriba que abajo—. Va en «fixed» para que el recorte de .cont no se lo coma, y el banda va de la TINTA de la nav (30 px) a la del wordmark (0,929 del cuerpo de --marca, medido con las métricas reales de la Clarendon), y los 7 px que se suman y restan corrigen que la caja de una línea vertical no queda centrada sobre su propia tinta. */ .cont-pie .cont-dchos{position:fixed; right:13px; margin:0; top:23px; bottom:calc(var(--marca) * .929 + 7px); display:grid; place-content:center; writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap;} /* --- Clientes: la lista arriba, la ficha debajo --- PDF: el listado ocupa de y66 a y219 (11 filas), con los nombres en x12 y los servicios en x211 (199 px = 56,7% del ancho útil). */ .cli{position:absolute;inset:63px var(--pad) var(--pie); display:flex;flex-direction:column;overflow:hidden;} .cli-lista{position:static;flex:none;line-height:1.29; grid-template-columns:56.7% 1fr;column-gap:0;} /* El sector es la tercera columna de escritorio: en 375 px no cabe y el PDF de móvil tampoco lo pone. */ .cli-lista .x{display:none;} /* PDF: rótulo del servicio en y287, párrafo en y309-364, la fila con «Creative Services» y los números en y392, y el título del proyecto en y421-438, ya en cuerpo pequeño. */ .proy{position:static;flex:1;min-height:0;display:flex;flex-direction:column; padding-top:22px;} .proy-h,.proy-copy,.proy-nums{flex:none;} .proy-copy{margin-top:10px;} .proy-copy + .proy-fila{margin-top:24px;} .proy-nums{gap:1.9em;} .proy-caso{flex:1;min-height:0;} /* La tira de fotografías es HORIZONTAL en móvil, al revés que en escritorio: las piezas van en fila y se desliza de lado. El título y el pie vuelven a leerse en horizontal, encima de la tira. */ .proy-caso{flex-direction:column;align-items:stretch;gap:0;} .proy-rot{order:1;margin:16px 0 0;writing-mode:horizontal-tb;transform:none; align-self:auto;max-height:none;overflow:visible;line-height:1.3;} /* 12 px de aire entre el pie del proyecto y la foto más alta, como en el layout (pie en y437, fotos desde y450). */ .proy-visor{order:2;flex:1;min-height:0;min-width:0;flex-direction:column;margin:11px 0 0;} /* container-type:size deja que cada pieza mida su alto contra el de la tira (unidades cqh), que es lo que evita recortarla. */ .proy-scroll{flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;container-type:size; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;} /* Se alinean por ABAJO: en el layout todas las piezas acaban en la misma línea y lo que varía es la altura, según la proporción de cada una. */ .proy-fotos{flex-direction:row;align-items:flex-end;gap:var(--hueco);height:100%;} /* En el layout de móvil la fracción se mide sobre la PANTALLA entera, no sobre la columna: con w=0,81 la primera de Bags 01 mide 306 px de 375. El tope evita que una pieza a sangre se salga por el margen derecho. */ /* Regla del layout de móvil (20-sep): la PRIMERA foto de cada proyecto lleva el alto que marca su layout —las horizontales se quedan en 294 px de ancho (Simuero 294x195) y las verticales llenan la tira—, y TODAS las que van detrás, horizontales o verticales, van al mismo alto: el de la tira. El ancho sale del alto y de --ar, así que no se recorta nada. */ .proy-fotos .pz{flex:none;width:auto;max-width:none;height:100cqh; object-fit:cover;scroll-snap-align:start;} .proy-fotos .pz:first-child, .proy-fotos.iguales .pz{ height:min(calc(var(--hm,1) * 100cqh), calc(var(--cap,.936) * 100vw / var(--ar)));} /* En la ficha de un cliente la tira de fotografías llega hasta abajo, así que el nombre lleva detrás un filete blanco para que la foto no se le meta por debajo. En la home NO lo lleva: allí la fotografía pasa por detrás del nombre a propósito. El z-index:-1 es imprescindible: un ::after se pinta DESPUÉS de todos los hijos del elemento, así que sin él el filete taparía al propio nombre. */ body.proyecto .chrome::after{content:"";position:fixed;left:0;right:0; bottom:0;height:var(--pie);background:var(--bg);z-index:-1;} /* Las flechas servían para el desplazamiento vertical: con la tira horizontal sobran, se arrastra con el dedo. */ .proy-flechas{display:none;} } /* -------------------------------------------------------------------------- Páginas legales (cookies y privacidad) Texto corrido, que no existe en el diseño de las cinco páginas: columna estrecha, con scroll propio dentro del panel, y el menú subido arriba para que no cruce el texto (en las demás páginas va a media altura). OJO: el lleva la clase «legal» y el
lleva «legal-doc». Son distintas a propósito: con el mismo nombre, el body se llevaba las reglas de posición del contenedor y acababa desplazado 58 px. -------------------------------------------------------------------------- */ body.legal .nav{top:34px;transform:none;} .legal-doc{position:absolute;left:var(--pad);right:var(--pad); top:86px;bottom:calc(var(--marca) + 22px); overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:12;} .legal-doc::-webkit-scrollbar{width:0;} .legal-cuerpo{max-width:620px;margin:0 auto;line-height:1.5;padding-bottom:24px;} .legal-tit{margin:0 0 18px;} .legal-doc h2{font-size:1em;font-weight:400;margin:24px 0 5px; text-decoration:underline;text-underline-offset:3px;} .legal-doc p{margin:0 0 8px;} .legal-doc ul{margin:0 0 8px;padding-left:15px;} .legal-doc li{margin:0 0 4px;} .legal-doc table{border-collapse:collapse;width:100%;margin:7px 0 14px;font-size:.92em;} .legal-doc th,.legal-doc td{text-align:left;vertical-align:top;padding:5px 12px 5px 0; border-bottom:1px solid rgba(18,16,14,.14);} .legal-doc th{font-weight:400;color:var(--mute);} .legal-ck{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer; text-decoration:underline;text-underline-offset:2px;} @media(max-width:860px){ .legal-doc{top:58px;bottom:calc(var(--marca) + 12px);left:var(--pad);right:var(--pad);} .legal-cuerpo{max-width:none;} /* Las tablas no caben a lo ancho de un móvil: se deslizan ellas solas. */ .legal-doc table{display:block;overflow-x:auto;white-space:nowrap;} .legal-doc td,.legal-doc th{white-space:normal;min-width:104px;} }