/* Web de SS AI Designer: negro y dorado. Tipografías: Playfair Display (titulares, como las diapositivas) y Albert Sans (resto), en fuentes/. Medidas pensadas sobre las diapositivas de 1672 px: 1 px de diapositiva = 0,0598 vw. */ @font-face{font-family:"SSAI Serif";font-style:normal;font-weight:400 900;font-display:swap;src:url(fuentes/playfair-display-latin-var.woff2) format("woff2");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:"SSAI Serif";font-style:normal;font-weight:400 900;font-display:swap;src:url(fuentes/playfair-display-latin-ext-var.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:"SSAI Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/albert-sans-latin-400-normal.woff2) format("woff2");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:"SSAI Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/albert-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:"SSAI Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/albert-sans-latin-500-normal.woff2) format("woff2");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:"SSAI Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/albert-sans-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:"SSAI Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/albert-sans-latin-600-normal.woff2) format("woff2");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:"SSAI Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/albert-sans-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:"SSAI Sans";font-style:normal;font-weight:700;font-display:swap;src:url(fuentes/albert-sans-latin-700-normal.woff2) format("woff2");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:"SSAI Sans";font-style:normal;font-weight:700;font-display:swap;src:url(fuentes/albert-sans-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} :root{ --negro:#050301;--negro2:#0c0804;--blanco:#fff;--texto:#f3ece0; --oro1:#f7d27a;--oro2:#e5ab45;--oro3:#c88a33;--oro:#e8b24a; --degradado:linear-gradient(90deg,#fea72b 0%,#ffbc45 50%,#fea322 100%); /* D-SSAI-696 (puente 20-oct): ámbar saturado y horizontal de las diapositivas 8, 11, 12 y 15 (medido ≈254,167,43 → 255,188,69 → 254,163,34); antes degradado vertical pardo. Texto #171006/#1b1207 sobre él: contraste ≥ 9:1. Solo SS AI: Filmbase tiene su propio token. */ --letras:linear-gradient(180deg,#fff0b8 0%,#f5c453 55%,#e0a038 100%); --serif:"SSAI Serif","Playfair Display",Georgia,serif; --sans:"SSAI Sans","Albert Sans","Segoe UI",system-ui,sans-serif; --cab:clamp(60px,5.2vw,100px); --lado:clamp(16px,4vw,76px); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--negro);-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body.ssai{font-variant-numeric:lining-nums;margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--negro);color:var(--blanco);font-family:var(--sans);font-size:16px;line-height:1.5;overflow-x:hidden} body.ssai-menu-abierto{overflow:hidden} .ssai img{max-width:100%;height:auto;display:block} .ssai a{color:inherit} .ssai :focus-visible{outline:3px solid #ffd980;outline-offset:3px;border-radius:2px} .ssai-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .ssai-saltar{position:absolute;left:12px;top:-60px;z-index:100;background:#ffd980;color:#111;padding:10px 16px;font-weight:600;text-decoration:none} .ssai-saltar:focus{top:8px} .ssai a.ssai-saltar{color:#111} /* `.ssai a{color:inherit}` (0,1,1) ganaba a `.ssai-saltar` y salía blanco sobre #ffd980 (1,36:1); ahora #111, ≈14:1 (W8, S36) */ .ssai main{flex:1 0 auto;display:flex;flex-direction:column} .ssai em{text-shadow:none;-webkit-box-decoration-break:clone;box-decoration-break:clone;font-style:normal;background:var(--letras);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .ssai-ico{width:1.5em;height:1.5em;flex:none} .ssai-ico-flecha{width:1.6em;height:.9em} /* ---------- Cabecera ---------- */ .ssai-cab{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:1.5vw;height:var(--cab);padding:0 var(--lado) 0 calc(var(--lado) * .85);background:linear-gradient(180deg,#000 0%,#080503 100%);border-bottom:1px solid rgba(232,178,74,.16);flex:none} .ssai-logo{display:block;flex:none;line-height:0} .ssai-logo img{height:calc(var(--cab) * .88);width:auto;margin-top:0} /* D-SSAI-777 (diapositiva 1, 1440): con .94 y -4 % la S del logo se salía por arriba (top ≈ -0,75 px); ahora queda aire encima, como en la diapositiva */ .ssai-panel{display:flex;align-items:center;gap:clamp(12px,1.4vw,28px);flex:1;justify-content:flex-end} .ssai-menu ul{display:flex;gap:clamp(12px,1.55vw,30px);list-style:none;margin:0;padding:0} .ssai-menu a{display:block;position:relative;padding:.5em 0;text-decoration:none;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(11.5px,.9vw,16px);font-weight:400;white-space:nowrap;color:#fff} .ssai-menu a:hover{color:var(--oro1)} .ssai-menu a[aria-current=page]{color:var(--oro1)} .ssai-menu a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--degradado)} .ssai-btn{display:inline-flex;align-items:center;justify-content:center;gap:.75em;min-height:clamp(46px,3.5vw,66px);padding:0 clamp(18px,2.1vw,40px);border:1px solid rgba(255,226,150,.65);border-radius:3px;background:var(--degradado);color:#1b1207;font:600 clamp(12.5px,.98vw,18px)/1.15 var(--sans);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;cursor:pointer;box-shadow:0 0 22px rgba(232,170,62,.22),inset 0 1px 0 rgba(255,255,255,.45);transition:filter .15s,transform .15s} .ssai a.ssai-btn{color:#1b1207} .ssai-btn:hover{filter:brightness(1.1)} .ssai-btn:active{transform:translateY(1px)} .ssai-btn .ssai-ico{width:1.7em;height:1.7em} .ssai-btn .ssai-ico-flecha{width:1.5em;height:.85em} .ssai-btn-pildora{border-radius:999px} .ssai-btn-chico{min-height:clamp(36px,2.7vw,50px);font-size:clamp(11.5px,.86vw,16px);padding:0 clamp(16px,1.9vw,34px)} .ssai-solicitar{min-height:clamp(38px,2.7vw,50px);padding:0 clamp(14px,1.55vw,30px);font-size:clamp(11px,.86vw,15px);font-weight:600;letter-spacing:.1em;border-radius:2px;white-space:nowrap} .ssai-idiomas{display:flex;gap:.45em;align-items:center;font-size:clamp(12px,.92vw,16px);letter-spacing:.06em;white-space:nowrap} .ssai-idioma{text-decoration:none;color:#fff;padding:.35em .1em} .ssai-idioma[aria-current]{color:var(--oro1);font-weight:600} .ssai-idioma:hover{color:var(--oro1)} .ssai-idiomas span{color:rgba(255,255,255,.5)} .ssai-acceder{display:inline-flex;align-items:center;min-height:clamp(36px,2.5vw,46px);padding:0 clamp(14px,1.3vw,26px);border:1px solid var(--oro);border-radius:2px;color:var(--oro1);text-decoration:none;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(11px,.86vw,15px);font-weight:600;white-space:nowrap} .ssai-acceder:hover{background:rgba(232,178,74,.14)} .ssai-burger{display:none} .ssai-idioma-movil{display:none} /* ---------- Pie ---------- */ .ssai-pie{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:clamp(46px,4.1vw,76px);padding:0 var(--lado) 0 calc(var(--lado) * .85);background:rgba(8,6,3,.96);border-top:1px solid rgba(232,178,74,.22);flex:none;position:relative;z-index:5} .ssai-pie p{margin:0;text-transform:uppercase;font-size:clamp(11px,.98vw,17px);letter-spacing:.14em} /* ---------- Titulares ---------- */ .ssai-titulo{font-family:var(--serif);font-weight:700;text-transform:uppercase;margin:0;line-height:1.04;letter-spacing:-.005em;text-shadow:0 2px 14px rgba(0,0,0,.55)} .ssai-eyebrow{margin:0;color:var(--oro1);text-transform:uppercase;letter-spacing:.17em;font-size:clamp(11px,.98vw,18px);font-weight:400} /* ---------- Inicio ---------- */ .ssai-hero{position:relative;flex:1;display:flex;align-items:center;min-height:clamp(480px,calc(100svh - var(--cab) - clamp(46px,4.1vw,76px)),1100px);overflow:hidden;isolation:isolate} .ssai-hero-foto{position:absolute;inset:0;z-index:-2} .ssai-hero-foto img{width:100%;height:100%;object-fit:cover;object-position:70% 53%} .ssai-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,3,1,.88) 0%,rgba(5,3,1,.72) 28%,rgba(5,3,1,.4) 42%,rgba(5,3,1,.08) 56%,transparent 64%)} .ssai-hero-texto{padding:2vw var(--lado) 2vw calc(var(--lado) * .85);max-width:calc(43vw + var(--lado))} .ssai-hero .ssai-eyebrow{margin-bottom:clamp(14px,1.9vw,34px)} .ssai-hero .ssai-titulo{font-size:clamp(34px,4.5vw,86px);line-height:1.02;font-weight:500} .ssai-lead{margin:clamp(16px,1.7vw,32px) 0 0;max-width:23.5em;font-size:clamp(15px,1.28vw,23px);line-height:1.5;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.7)} .ssai-botones{display:flex;flex-wrap:wrap;gap:clamp(10px,.85vw,16px);margin-top:clamp(20px,2.3vw,44px)} /* Orden de Víctor 1190.: los cuatro del Inicio en DOS FILAS de dos (vídeos arriba; cómo funciona y planes debajo), mismo ancho por columna, a la izquierda; en ≤600 px, uno debajo de otro. */ @media (min-width:601px){.ssai-hero-texto .ssai-botones{display:grid;grid-template-columns:repeat(2,max-content);justify-content:start}.ssai-hero-texto .ssai-botones .ssai-btn{min-width:0}} /* Diapositiva 1 (VS 23:5x): las dos columnas del 2×2 igual de anchas (1fr dentro de un ancho de contenido: miden lo del botón más largo) */ @media (min-width:601px){.ssai-hero-texto .ssai-botones{grid-template-columns:repeat(2,1fr);width:max-content;max-width:calc(100vw - var(--lado) * 1.85)}} .ssai-btn-video{padding-left:clamp(14px,1.3vw,26px)} /* D-SSAI-868 (diapositiva 1: titular, párrafo, botones y pie en UNA pantalla): en pantallas muy anchas y bajas (≥1700 px y más de 2:1: 2560×1080, 2560×800, 3440×1440) el héroe medía 1180 px y botones y pie quedaban bajo el pliegue; sus tamaños se acotan también por la altura de la ventana. */ @media (min-width:1700px) and (min-aspect-ratio:2/1){ .ssai-hero{min-height:calc(100svh - var(--cab) - clamp(46px,4.1vw,76px))} /* sin el suelo de 480 px, que a 2560×800 (640 reales con el zoom) empujaba el pie bajo el pliegue */ .ssai-hero-texto{padding-top:1.9vh;padding-bottom:1.9vh} .ssai-hero .ssai-eyebrow{font-size:clamp(11px,min(.98vw,1.15vh),18px);margin-bottom:clamp(8px,min(1.9vw,1.9vh),34px)} .ssai-hero .ssai-titulo{font-size:clamp(30px,min(4.5vw,5.5vh),86px)} .ssai-hero .ssai-lead{font-size:clamp(13px,min(1.28vw,1.55vh),23px);margin-top:clamp(8px,min(1.7vw,1.7vh),32px)} .ssai-hero .ssai-botones{margin-top:clamp(12px,min(2.3vw,2.2vh),44px);gap:clamp(8px,min(.85vw,.9vh),16px)} .ssai-hero .ssai-btn{min-height:clamp(44px,min(3.5vw,4.1vh),66px)} /* puente 1755: 44 px de zona táctil como mínimo */ } /* ---------- Cómo funciona ---------- */ .ssai-como{width:100%;padding:clamp(8px,.7vw,14px) clamp(14px,3vw,56px) clamp(8px,.8vw,16px) clamp(14px,4.2vw,80px);background:radial-gradient(120% 60% at 50% 0%,#14100a 0%,var(--negro) 70%)} .ssai-como-cab .ssai-eyebrow{margin-left:.2vw} .ssai-como-cab .ssai-titulo{font-size:clamp(26px,4.2vw,80px);margin-top:.1vw;line-height:1} .ssai-sub{margin:-.1vw 0 0 .2vw;font-size:clamp(14px,1.43vw,26px);color:#fff} .ssai-tabs{display:flex;gap:clamp(4px,.48vw,10px);margin-top:clamp(10px,1vw,20px)} .ssai-tab{flex:auto;display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.5vw,28px);min-height:clamp(40px,3.1vw,58px);padding:0 clamp(8px,1vw,20px);border:1px solid rgba(232,178,74,.28);border-radius:5px;background:rgba(10,7,3,.7);color:#fff;font-family:var(--sans);cursor:pointer;text-transform:uppercase;transition:background .15s} .ssai-tab:hover{border-color:rgba(232,178,74,.7)} .ssai-tab-n{font-variant-numeric:lining-nums;font-family:var(--serif);font-weight:500;font-size:clamp(15px,1.6vw,30px);color:var(--oro);letter-spacing:.01em} .ssai-tab-t{font-size:clamp(9.5px,.82vw,15px);letter-spacing:.1em;font-weight:600} .ssai-tab[aria-selected=true]{background:var(--degradado);border-color:#ffe29a;color:#1b1207;box-shadow:0 0 22px rgba(232,170,62,.4)} .ssai-tab[aria-selected=true] .ssai-tab-n{color:#1b1207} .ssai-pasos{margin-top:clamp(10px,1vw,20px)} .ssai-paso{display:grid;grid-template-columns:minmax(0,27.2fr) minmax(0,72.8fr);column-gap:clamp(8px,.5vw,12px);align-items:center;position:relative} .ssai-paso-ancho{grid-template-columns:minmax(0,24fr) minmax(0,67fr)} .ssai-js .ssai-paso{display:none} .ssai-js .ssai-paso.is-activo{display:grid} .ssai-paso+.ssai-paso{margin-top:clamp(28px,4vw,70px)} .ssai-js .ssai-paso+.ssai-paso{margin-top:0} .ssai-paso-num{margin:0 0 clamp(8px,.9vw,16px);font-size:clamp(12px,1.2vw,22px);letter-spacing:.1em;text-transform:uppercase;color:var(--oro1)} .ssai-paso-num b{font-variant-numeric:lining-nums;font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.15vw,40px);letter-spacing:0;margin:0 .2em} .ssai-paso-num{color:var(--oro1)} .ssai-paso-texto .ssai-titulo{font-size:clamp(26px,4.15vw,80px);line-height:1.1} #paso-1 .ssai-paso-texto .ssai-titulo{font-size:clamp(26px,4.55vw,86px)} #paso-6 .ssai-paso-texto .ssai-titulo{font-size:clamp(24px,2.75vw,62px)} #paso-3 .ssai-paso-texto .ssai-titulo{font-size:clamp(26px,3.55vw,70px)} .ssai-paso-ancho .ssai-paso-texto .ssai-titulo{font-size:clamp(24px,3.25vw,70px)} .ssai-paso-ancho .ssai-paso-texto>p:not(.ssai-paso-num){font-size:clamp(14px,1.5vw,28px)} .ssai-paso-texto .ssai-btn-pildora{width:100%;font-size:clamp(12px,.98vw,19px);font-weight:700;letter-spacing:.05em} .ssai-paso-texto p{margin:0} .ssai-paso-texto>p:not(.ssai-paso-num){margin-top:clamp(12px,1.2vw,22px);font-size:clamp(14px,1.32vw,24px);line-height:1.45} .ssai-paso-texto .ssai-btn{margin-top:clamp(16px,1.9vw,36px)} .ssai-paso-texto .ssai-btn-pildora{min-height:clamp(46px,4vw,74px);font-size:clamp(12px,1vw,19px)} .ssai-tarjeta{position:relative;border:2px solid #f1c24f;border-radius:clamp(8px,.7vw,14px);background:radial-gradient(90% 90% at 50% 40%,#171109 0%,#080503 80%);box-shadow:0 0 28px rgba(241,194,79,.28),inset 0 0 40px rgba(241,194,79,.08);padding:clamp(10px,1.1vw,22px);overflow:hidden} .ssai-tarjeta:fullscreen{--z:1.5;zoom:var(--z);width:calc(100vw / var(--z));height:calc(100vh / var(--z));padding:2vw;overflow:auto;border-radius:0;align-content:center;justify-content:center;background:#050301} .ssai-t-iso:fullscreen,.ssai-t-materiales:fullscreen,.ssai-t-presupuesto:fullscreen{justify-content:center} .ssai-ampliar{position:absolute;right:.2vw;bottom:calc(-1 * clamp(34px,3vw,56px));display:inline-flex;align-items:center;gap:.6em;border:0;background:none;color:var(--oro1);font:400 clamp(11px,.96vw,17px)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:.5em} .ssai-ampliar .ssai-ico{width:1.1em;height:1.1em} .ssai-nav{display:flex;align-items:center;justify-content:center;gap:clamp(30px,5vw,96px);margin-top:clamp(22px,1.6vw,32px);color:var(--oro1)} .ssai-flecha{display:inline-flex;align-items:center;justify-content:center;width:clamp(44px,3.2vw,60px);height:clamp(44px,2.6vw,48px);border:0;background:none;color:var(--oro1);cursor:pointer;padding:0} .ssai-flecha .ssai-ico{width:clamp(26px,2.1vw,40px);height:auto} .ssai-flecha:hover{color:#fff} .ssai-contador{margin:0;font-size:clamp(15px,1.35vw,24px);letter-spacing:.06em;color:#fff} .ssai-contador span{color:#fff} .ssai-js .ssai-paso:not(.is-activo)~.x{display:none} /* Paso 1: la pantalla de «Sube el plano» */ .ssai-t-plano{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(10px,1.2vw,24px);padding:clamp(10px,1.3vw,26px)} .ssai-t-plano-izq{display:flex;flex-direction:column;align-items:flex-start;justify-content:center} .ssai-t-logo{width:clamp(80px,8.6vw,160px);margin:0 auto clamp(4px,.8vw,14px)}.ssai-t-logo img{width:100%;height:auto} .ssai-t-plano-izq .ssai-eyebrow{font-size:clamp(9px,.82vw,15px);margin-top:clamp(2px,.4vw,8px)} .ssai-t-plano-izq .ssai-titulo{font-size:clamp(17px,2.4vw,46px);line-height:1.07;margin-top:.5em} .ssai-t-texto{margin:.8em 0 0;font-size:clamp(10px,.9vw,16px);line-height:1.35} .ssai-t-plano-izq .ssai-btn{margin-top:clamp(10px,1.2vw,22px);min-height:clamp(32px,2.6vw,48px);padding:0 clamp(14px,1.6vw,30px);font-size:clamp(10px,.86vw,15px)} .ssai-t-plano-der{display:flex;flex-direction:column;align-items:center;border:1px solid rgba(241,194,79,.45);border-radius:6px;padding:clamp(8px,1vw,18px);background:rgba(255,255,255,.02)} .ssai-t-plano-cab{display:flex;align-items:center;gap:.9em;margin:0;align-self:center;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(10px,.88vw,16px);color:var(--oro1)} .ssai-t-plano-cab .ssai-ico{width:2.4em;height:2.8em;color:var(--oro1)} .ssai-t-plano-cab span{display:flex;flex-direction:column;color:#fff} .ssai-t-plano-cab b{font-weight:400} .ssai-t-plano-cab small{text-transform:none;letter-spacing:.02em;font-size:.85em} .ssai-t-plano-img{margin-top:clamp(6px,.8vw,14px);width:100%;border:1px dashed rgba(241,194,79,.55);padding:clamp(4px,.5vw,8px);background:#fff;border-radius:2px} .ssai-t-plano-img img{width:auto;max-width:100%;max-height:15.5vw;margin:0 auto;object-fit:contain} .ssai-t-archivo{margin-top:clamp(6px,.9vw,16px);display:block;width:min(100%,24em);text-align:center;border:1px solid var(--oro1);border-radius:999px;padding:.55em 1em;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(9px,.82vw,15px);text-decoration:none;color:#fff} .ssai-t-archivo:hover{background:rgba(232,178,74,.15)} .ssai-t-nota{margin:.4em 0 0;font-size:clamp(8px,.72vw,13px);text-align:center} /* Paso 2: la vista 3D */ .ssai-t-iso{display:flex;flex-direction:column;align-items:center;padding-bottom:clamp(10px,1.3vw,24px)} .ssai-t-iso-img{width:min(66%,640px)} .ssai-t-iso-img img{width:100%;height:auto;aspect-ratio:1110/883;max-height:clamp(220px,34vw,490px);object-fit:contain;filter:drop-shadow(0 12px 28px rgba(0,0,0,.6))} @media (min-width:701px) and (max-width:1100px){.ssai-t-iso-img img{max-height:clamp(340px,50vw,490px)}} /* D-SSAI-634: la casa llena la tarjeta a 768 (≥ 60 % del marco) */ .ssai-t-leyenda{margin:clamp(4px,.4vw,8px) 0 .5em;text-transform:uppercase;letter-spacing:.2em;font-size:clamp(11px,1.05vw,20px);text-align:center} .ssai-t-iso .ssai-btn{margin-top:clamp(5px,.55vw,10px);min-width:clamp(180px,21vw,400px);min-height:clamp(32px,2.55vw,48px);font-size:clamp(11px,.96vw,18px)} .ssai-t-iso .ssai-btn-chico{min-width:clamp(150px,21.6vw,360px);width:auto} /* Paso 3: presupuesto y sectores */ .ssai-t-presupuesto{padding:clamp(10px,1.3vw,24px) clamp(10px,1.2vw,22px) clamp(12px,1.2vw,22px)} .ssai-t-etiqueta{margin:0 0 .35em;text-transform:uppercase;letter-spacing:.13em;font-size:clamp(11px,1.08vw,20px)} .ssai-t-importe-fila{display:flex;align-items:center;gap:clamp(12px,1.9vw,36px);margin-bottom:clamp(8px,.9vw,16px)} .ssai-t-importe{margin:0;flex:0 1 clamp(180px,32.3vw,540px);padding:.08em 1.1em;border:2px solid #fff;border-radius:10px;font-size:clamp(24px,3.1vw,58px);line-height:1.4;letter-spacing:.02em;background:#000} .ssai-t-ayuda{margin:0;max-width:11em;font-size:clamp(11px,1.2vw,22px);line-height:1.3} .ssai-sectores{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(5px,.4vw,8px)} .ssai-sectores li{position:relative;aspect-ratio:1.44;border:1px solid rgba(255,255,255,.35);border-radius:4px;overflow:hidden;background:#000} .ssai-sectores img{width:100%;height:100%;object-fit:cover} .ssai-sectores span{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;min-height:32%;padding:.3em 12%;background:rgba(0,0,0,.78);font-weight:600;text-align:center;text-transform:uppercase;letter-spacing:.07em;font-size:clamp(8px,.86vw,15px);line-height:1.15} .ssai-t-generar{display:flex;width:max-content;margin:clamp(8px,.9vw,16px) 0 0 auto;min-height:clamp(34px,3vw,56px);font-size:clamp(11px,1.02vw,19px)} /* Paso 4: renders */ .ssai-t-renders-col{position:relative;padding-bottom:clamp(44px,3.8vw,70px)} .ssai-t-renders{display:grid;grid-template-columns:repeat(20,1fr);gap:clamp(5px,.55vw,10px);padding:clamp(5px,.5vw,9px)} .ssai-t-renders figure,.ssai-res-renders figure{position:relative;margin:0;overflow:hidden;border:1px solid rgba(241,194,79,.5);border-radius:3px;background:#000} .ssai-t-renders figure img,.ssai-res-renders figure img{width:100%;height:100%;object-fit:cover} .ssai-t-renders figure{grid-column:span 4;aspect-ratio:1.68} .ssai-t-renders figure:nth-of-type(n+7){grid-column:span 5;aspect-ratio:2.1} /* 631. con la revisión de la V7 frente a la diapositiva 5: la 1.ª arriba a todo lo ancho y panorámica (3,4:1, como en la diapositiva); debajo, 2-6 y 7-10 en dos filas del mismo alto (cinco de 4/20 y cuatro de 5/20, a 2,1:1 como las pequeñas de la diapositiva). Antes la 1.ª ocupaba 3×2, quedaban huecos negros a su derecha y la tarjeta se salía de la pantalla a 1440×900. */ .ssai-t-renders .ssai-r-grande{grid-column:1/-1;grid-row:auto;aspect-ratio:3.4} /* V7 (revisión A2): el pie de las pequeñas parte línea si no cabe; nunca cortado con «…» ni por debajo de 10 px. */ .ssai-t-renders figure:not(.ssai-r-grande) figcaption{max-width:100%;white-space:normal;line-height:1.25;font-size:clamp(10px,.62vw,12px);letter-spacing:.05em;padding:.3em .6em} .ssai-t-renders figcaption,.ssai-res-renders figcaption{position:absolute;left:0;bottom:0;padding:.35em .9em;background:rgba(0,0,0,.72);text-transform:uppercase;letter-spacing:.08em;font-size:clamp(9px,.9vw,16px)} .ssai-t-renders-pie{position:absolute;right:0;bottom:0;display:flex;align-items:center;gap:clamp(12px,2vw,34px)} .ssai-t-renders-pie .ssai-ampliar{position:static} .ssai-t-renders-pie .ssai-btn{min-width:clamp(160px,17.5vw,300px)} /* D-SSAI-061/068 (diapositiva 5; puente 1257.): en la tarjeta, la grande y tres miniaturas (Cocina, Dormitorio, Baño) con su rótulo corto; las otras seis siguen en el DOM y se ven en «Ampliar render» (pantalla completa) y en el visor de «Ver renders». */ .ssai-t-renders:not(:fullscreen){grid-template-columns:repeat(3,1fr)} .ssai-t-renders:not(:fullscreen) figure{grid-column:auto} .ssai-t-renders:not(:fullscreen) .ssai-r-grande{grid-column:1/-1;aspect-ratio:3} .ssai-t-renders:not(:fullscreen) figure.ssai-r-oculta{display:none} .ssai-t-renders:not(:fullscreen) figure.ssai-r-corta{grid-column:auto;aspect-ratio:2.2} .ssai-t-renders:not(:fullscreen) figure.ssai-r-corta figcaption{display:none} .ssai-t-renders .ssai-corto{position:absolute;left:0;bottom:0;padding:.3em .6em;background:rgba(0,0,0,.72);text-transform:uppercase;letter-spacing:.05em;font-size:clamp(10px,.62vw,12px);line-height:1.25} .ssai-t-renders:fullscreen .ssai-corto{display:none} /* V7 (A2, 5): en los baños 7-9 el lavabo y el inodoro van abajo de la foto; la miniatura se encuadra por ahí, como en la diapositiva. */ .ssai-t-renders figure:nth-of-type(n+7):nth-of-type(-n+9) img{object-position:center 75%} /* V7 (A2, 8): a 1440×900 la tarjeta empujaba el «← 04 / 06 →» bajo la pantalla. Como en la diapositiva 5, el pie sigue debajo de la tarjeta y la tarjeta es más baja desde 1201 px: la grande a 4:1 y las pequeñas menos altas (2:1 y 2,6:1); unos 80 px menos a 1440. */ @media (min-width:1201px){ .ssai-t-renders:fullscreen .ssai-r-grande{aspect-ratio:4} .ssai-t-renders:fullscreen figure:not(.ssai-r-grande){aspect-ratio:2} .ssai-t-renders:fullscreen figure:nth-of-type(n+7){aspect-ratio:2.6} .ssai-t-renders:not(:fullscreen) .ssai-r-grande{aspect-ratio:3.6} .ssai-t-renders:not(:fullscreen) figure.ssai-r-corta{aspect-ratio:2.4} } /* Paso 5: materiales */ .ssai-t-materiales{padding:clamp(6px,.6vw,12px) clamp(8px,.8vw,14px) clamp(5px,.5vw,9px)} .ssai-t-mat-cab{display:flex;align-items:flex-start;gap:clamp(8px,.8vw,14px);margin-bottom:clamp(2px,.3vw,6px)} .ssai-t-mat-cab>div{flex:1} .ssai-t-mat-cab>.ssai-filtro{flex:none} .ssai-t-mat-cab .ssai-titulo{font-size:clamp(17px,1.95vw,36px);line-height:1;white-space:nowrap} .ssai-t-mat-cab p{margin:.15em 0 0;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(8px,.9vw,16px);color:var(--oro1);font-weight:600} .ssai-t-mat-cab p b{font-weight:600} .ssai-filtro{position:relative;display:inline-flex;align-items:center;flex:none} .ssai-filtro select{appearance:none;-webkit-appearance:none;min-height:clamp(28px,2.4vw,44px);padding:0 2.4em 0 1.3em;border:1px solid rgba(255,226,150,.65);border-radius:3px;background:var(--degradado);color:#1b1207;font:600 clamp(9px,.78vw,14px)/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;cursor:pointer} .ssai-filtro select option{color:#111;background:#fff;text-transform:none} .ssai-filtro .ssai-ico{position:absolute;right:.9em;width:1em;height:.7em;color:#1b1207;pointer-events:none} .ssai-t-mat-cab .ssai-btn-descarga{flex:none;min-height:clamp(28px,2.4vw,44px);padding:0 clamp(10px,1.1vw,20px);font-size:clamp(9px,.78vw,14px);border-radius:3px;gap:.7em} .ssai-t-mat-cab .ssai-btn-descarga .ssai-ico{width:1.5em;height:1.5em} .ssai-tabla{width:100%;border-collapse:collapse;font-size:clamp(9px,.9vw,16px);border:1px solid rgba(241,194,79,.4);background:rgba(0,0,0,.4)} .ssai-tabla th,.ssai-tabla td{padding:0;border-bottom:1px solid rgba(255,255,255,.14);text-align:center;font-weight:400} .ssai-tabla thead th{padding:.3em 0;text-transform:uppercase;letter-spacing:.03em;font-size:.95em;color:#fff} .ssai-tabla tbody th{display:flex;align-items:center;gap:clamp(6px,.9vw,16px);text-align:left;text-transform:uppercase;font-size:.95em} .ssai-tabla tbody th img{width:clamp(70px,12vw,200px);height:clamp(24px,2.55vw,46px);object-fit:cover;flex:none} .ssai-tabla tbody td{padding:0 .4em} .ssai-tabla tr[hidden]{display:none} /* D-SSAI-064 (diapositiva 6; puente 1257.): cada sector lleva tres recortes de su foto (tercio izquierdo, central y derecho), como los tres mosaicos de la diapositiva. */ .ssai-mosaico{display:flex;flex:none;width:clamp(70px,12vw,200px);height:clamp(20px,2.15vw,38px);gap:clamp(2px,.25vw,4px);margin:clamp(2px,.2vw,4px) 0 clamp(2px,.2vw,4px) clamp(3px,.4vw,6px)} /* alto + márgenes = el alto de fila de antes */ /* D-SSAI-620 (diapositiva 6): tres recortes con su margen, hueco y esquinas redondeadas */ .ssai-mosaico i{display:block;flex:1;overflow:hidden;position:relative;border-radius:clamp(2px,.25vw,4px)} .ssai-tabla tbody th .ssai-mosaico img{position:absolute;top:0;height:100%;width:300%;max-width:none;object-fit:cover} .ssai-mosaico i:nth-child(1) img{left:0} .ssai-mosaico i:nth-child(2) img{left:-100%} .ssai-mosaico i:nth-child(3) img{left:-200%} .ssai-tabla thead th:first-child{padding-left:clamp(110px,16vw,260px);text-align:left} .ssai-tabla td:last-child,.ssai-tabla th:last-child{width:clamp(36px,5.6vw,100px)} .ssai-ficha{display:inline-flex;align-items:center;justify-content:center;width:clamp(20px,2.5vw,42px);height:clamp(20px,2.5vw,42px);border:1px solid var(--oro1);border-radius:4px;color:var(--oro1)} .ssai-ficha .ssai-ico{width:60%;height:60%} .ssai-totales{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(3px,.4vw,8px);border:1px solid rgba(241,194,79,.55);border-radius:5px;padding:clamp(3px,.4vw,8px) 0} .ssai-totales p{margin:0;display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.2vw,22px);text-transform:uppercase;letter-spacing:.08em;font-size:clamp(8px,.9vw,16px)} .ssai-totales p+p{border-left:1px solid rgba(255,255,255,.5)} .ssai-totales .ssai-ico{width:clamp(26px,3.4vw,60px);height:auto;color:var(--oro1)} .ssai-totales span{display:flex;flex-direction:column;line-height:1.1} .ssai-totales b{font-family:var(--sans);font-weight:700;font-size:2.1em;letter-spacing:0;color:var(--oro1);text-transform:none;line-height:1.1} .ssai-t-pie-nota{margin:.2em 0 0;text-align:center;font-size:clamp(7.5px,.76vw,14px)} /* Paso 6: resumen */ .ssai-t-resumen{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto;gap:clamp(5px,.5vw,9px);padding:clamp(6px,.7vw,12px) clamp(8px,.8vw,14px) clamp(8px,.8vw,14px)} .ssai-t-resumen .ssai-res-distribucion{grid-column:span 5}.ssai-t-resumen .ssai-res-renders{grid-column:span 7}.ssai-t-resumen .ssai-res-materiales,.ssai-t-resumen .ssai-res-video,.ssai-t-resumen .ssai-res-estimacion{grid-column:span 4} .ssai-t-resumen>.ssai-titulo{grid-column:1/-1;font-size:clamp(16px,1.95vw,36px);line-height:1.1} .ssai-t-resumen h4{margin:0;text-transform:uppercase;letter-spacing:.11em;font-size:clamp(8px,.9vw,16px);font-weight:400} .ssai-t-resumen>div{border:1px solid rgba(241,194,79,.55);border-radius:4px;padding:clamp(4px,.6vw,10px);background:rgba(0,0,0,.35);min-width:0} .ssai-res-vision{margin:0;text-transform:uppercase;letter-spacing:.1em;color:var(--oro1);font-size:clamp(8px,.9vw,16px)} .ssai-res-distribucion img{width:auto;max-width:92%;max-height:14.5vw;margin:0 auto} .ssai-res-renders>div{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(3px,.4vw,7px);margin-top:clamp(3px,.4vw,7px)} .ssai-res-renders figure{aspect-ratio:2.1} .ssai-res-renders .ssai-r-grande{grid-column:1/-1;aspect-ratio:3.8} .ssai-res-renders figcaption{position:static;display:block;text-align:center;background:rgba(0,0,0,.6);padding:.15em 0;font-size:clamp(7px,.72vw,13px)} .ssai-res-renders figure:not(.ssai-r-grande){aspect-ratio:auto;display:flex;flex-direction:column} .ssai-res-renders figure:not(.ssai-r-grande) img{aspect-ratio:2.4} .ssai-res-materiales ul{list-style:none;margin:clamp(3px,.4vw,7px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(3px,.35vw,6px)} .ssai-res-materiales img{width:100%;height:auto;aspect-ratio:1.5;object-fit:cover;border-radius:2px} .ssai-res-materiales p{margin:.4em 0 0;text-align:center;text-transform:uppercase;color:var(--oro1);letter-spacing:.07em;font-size:clamp(7.5px,.8vw,14px);line-height:1.25} .ssai-poster{position:relative;margin-top:clamp(3px,.4vw,7px);overflow:hidden;border-radius:3px} .ssai-poster img{width:100%;height:auto;aspect-ratio:2.1;object-fit:cover} .ssai-poster-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--oro1)} .ssai-poster-play .ssai-ico{width:20%;height:auto;filter:drop-shadow(0 2px 6px #000)} button.ssai-poster{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;font:inherit} button.ssai-poster:hover .ssai-poster-play,button.ssai-poster:focus-visible .ssai-poster-play{color:#fff} button.ssai-poster:focus-visible{outline:2px solid var(--oro1);outline-offset:2px} .ssai-res-video .ssai-btn{display:flex;width:max-content;margin:clamp(3px,.4vw,7px) auto 0;min-height:clamp(26px,2.2vw,40px);font-size:clamp(9px,.9vw,16px)} .ssai-res-estimacion .ssai-res-total{display:flex;align-items:center;gap:clamp(8px,1.5vw,28px);margin:clamp(4px,.7vw,12px) 0 .2em;padding-bottom:.3em;border-bottom:1px solid rgba(255,255,255,.55)} .ssai-res-estimacion .ssai-ico{width:clamp(24px,3.1vw,54px);height:auto;color:var(--oro1)} .ssai-res-estimacion b{font-size:clamp(17px,2.6vw,48px);color:var(--oro1);font-weight:700;line-height:1.1} .ssai-res-estimacion p{margin:0;font-size:clamp(8px,.92vw,17px)} .ssai-res-estimacion .ssai-res-total{font-size:1em} .ssai-res-estimacion .ssai-res-nota{margin-top:.5em;font-size:clamp(6.5px,.62vw,11px)} .ssai-t-resumen .ssai-res-distribucion{grid-row:2/3} .ssai-t-resumen .ssai-res-renders{grid-row:2/3} .ssai-t-resumen .ssai-res-materiales,.ssai-t-resumen .ssai-res-video,.ssai-t-resumen .ssai-res-estimacion{grid-row:3/4} /* ---------- Prensa ---------- */ .ssai-prensa-premio{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,50fr);gap:clamp(18px,2.6vw,50px);padding:clamp(14px,1.7vw,32px) var(--lado) clamp(14px,1.4vw,26px) calc(var(--lado) * .85);align-items:center;background:radial-gradient(90% 100% at 8% 90%,rgba(190,120,30,.22) 0%,transparent 55%)} .ssai-eyebrow-linea{display:flex;align-items:center;gap:1.2em} .ssai-eyebrow-linea::after{content:"";flex:1;max-width:14em;height:1px;background:var(--degradado)} .ssai-premios{margin:clamp(10px,1.2vw,22px) 0 0;text-transform:uppercase;letter-spacing:.26em;font-size:clamp(11px,1.4vw,26px)} /* D-SSAI-465/468/472: con ventana alta el bloque del premio absorbe el sobrante (su contenido queda centrado) y las próximas publicaciones van pegadas debajo, sin banda negra entre ambos. */ .ssai-prensa-premio{flex:1 0 auto} .ssai-prensa-texto .ssai-titulo{font-size:clamp(32px,4.9vw,92px);line-height:1.05;margin-top:.15em} .ssai-prensa-texto .ssai-lead{font-size:clamp(14px,1.55vw,28px);max-width:27em;margin-top:clamp(10px,1.1vw,20px)} .ssai-prensa-cuando{margin-top:clamp(10px,1.1vw,20px);padding-top:clamp(8px,.8vw,14px);border-top:1px solid rgba(232,178,74,.55)} .ssai-prensa-cuando p{margin:0} .ssai-fecha{font-family:var(--sans);font-weight:600;color:var(--oro1);text-transform:uppercase;letter-spacing:.07em;font-size:clamp(14px,1.55vw,28px);line-height:1.3} .ssai-lugar{text-transform:uppercase;letter-spacing:.12em;font-size:clamp(11px,1.28vw,23px);margin-top:.2em!important} .ssai-prensa-texto .ssai-botones{margin-top:clamp(12px,1.2vw,22px)} .ssai-prensa-texto .ssai-btn{min-height:clamp(42px,3vw,56px);font-size:clamp(12px,1.1vw,20px)} .ssai-prensa-imagen{margin:0;background:#fff;padding:0;border-radius:3px;box-shadow:0 0 40px rgba(0,0,0,.6)} .ssai-prensa-imagen img{width:100%;height:auto} .ssai-proximas{padding:clamp(10px,1vw,18px) var(--lado) clamp(14px,1.2vw,22px) calc(var(--lado) * .85);border-top:1px solid rgba(232,178,74,.5);margin-top:auto} .ssai-proximas .ssai-eyebrow{font-size:clamp(11px,1.1vw,20px);letter-spacing:.3em;font-weight:400} .ssai-proximas .ssai-eyebrow::after{max-width:20em} .ssai-proximas ul{list-style:none;margin:clamp(8px,1vw,18px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.3vw,24px)} .ssai-proximas li{border:1px solid rgba(241,194,79,.8);border-radius:6px;padding:clamp(8px,.9vw,16px) 1em;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent)} .ssai-proximas h3{margin:0;font-family:var(--serif);font-weight:700;text-transform:uppercase;font-size:clamp(18px,2.4vw,44px);line-height:1.15;padding-bottom:.15em;border-bottom:1px solid rgba(232,178,74,.4);margin-inline:6%} .ssai-proximas li p{margin:.5em 0 0;font-size:clamp(11px,1.05vw,19px)} /* ---------- Marcador de las páginas que hace la otra rama ---------- */ .ssai-marcador{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px var(--lado)} .ssai-marcador h1{font-family:var(--serif);font-size:clamp(30px,4vw,70px);text-transform:uppercase;margin:0 0 .4em} /* ---------- Vídeo en ventana ---------- */ .ssai-video{border:2px solid #f1c24f;border-radius:10px;padding:0;background:#000;width:min(94vw,1100px);max-height:92vh;overflow:visible} .ssai-video::backdrop{background:rgba(0,0,0,.85)} .ssai-video video{display:block;width:100%;max-height:88vh;background:#000} .ssai-video-cerrar{position:absolute;right:10px;top:10px;z-index:1;width:40px;height:40px;border:1px solid #f1c24f;border-radius:50%;background:#000;color:#f1c24f;font-size:26px;line-height:1;cursor:pointer} .ssai-visor{border:2px solid #f1c24f;border-radius:10px;padding:0;background:#000;width:auto;max-width:94vw;max-height:94vh;overflow:hidden;color:#fff} .ssai-visor::backdrop{background:rgba(0,0,0,.88)} .ssai-visor-foto{position:relative;display:table;margin:0 auto} .ssai-visor img{display:block;width:auto;height:auto;max-width:calc(94vw - 4px);max-height:calc(94vh - 74px);margin:auto} /* Visor de Prensa: la X queda en una franja negra encima de la foto y no tapa su esquina. */ #ssai-visor-imagen .ssai-visor-foto{padding-top:54px} #ssai-visor-imagen img{max-height:calc(94vh - 60px)} .ssai-visor-pie{margin:0;position:absolute;left:0;bottom:0;padding:.6em 1em;background:rgba(0,0,0,.6);font:400 clamp(11px,.9vw,16px)/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase} .ssai-visor-pie:empty{display:none} .ssai-visor .ssai-video-cerrar{top:10px;right:10px;z-index:1} .ssai-visor-nav{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2vw,40px);height:70px} .ssai-visor.es-una .ssai-visor-nav{display:none} .ssai-visor.es-una img{max-height:calc(94vh - 4px)} /* ---------- Pantallas medianas y móvil ---------- */ @media (max-width:1200px){ .ssai-burger{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid rgba(232,178,74,.6);border-radius:4px;background:#000;color:var(--oro1);cursor:pointer;padding:0;flex:none;margin-left:auto} .ssai-burger-rayas,.ssai-burger-rayas::before,.ssai-burger-rayas::after{display:block;width:22px;height:2px;background:currentColor;content:"";transition:transform .2s} .ssai-burger-rayas{position:relative} .ssai-burger-rayas::before{position:absolute;top:-7px} .ssai-burger-rayas::after{position:absolute;top:7px} .ssai-burger[aria-expanded=true] .ssai-burger-rayas{background:transparent} .ssai-burger[aria-expanded=true] .ssai-burger-rayas::before{transform:translateY(7px) rotate(45deg)} .ssai-burger[aria-expanded=true] .ssai-burger-rayas::after{transform:translateY(-7px) rotate(-45deg)} .ssai-cab{height:68px;padding:0 16px} .ssai-logo img{height:58px;margin:0} .ssai-panel{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:18px;padding:18px 16px 24px;background:#050301;border-bottom:1px solid rgba(232,178,74,.4);max-height:calc(100svh - 68px);overflow:auto} .ssai-panel.is-abierto{display:flex} .ssai-menu ul{flex-direction:column;gap:0} .ssai-menu a{padding:.9em 0;font-size:15px;border-bottom:1px solid rgba(255,255,255,.1)} .ssai-menu a[aria-current=page]::after{display:none} .ssai-solicitar{min-height:48px;font-size:14px} .ssai-idiomas{justify-content:center;font-size:15px} .ssai-idiomas-menu{display:none} .ssai-cab .ssai-idioma-movil{display:flex;align-items:center;gap:8px;margin-left:auto;padding:8px 4px;font-size:14px;line-height:1;color:#fff;text-decoration:none;letter-spacing:.06em} .ssai-idioma-movil svg{width:1.9em;height:1.9em;flex:none} .ssai-idioma-movil + .ssai-burger{margin-left:6px} .ssai-acceder{justify-content:center;min-height:48px;font-size:14px} .ssai-pie{justify-content:center;padding:12px 16px} } @media (max-width:900px){ .ssai-btn{min-height:48px;font-size:13px;padding:0 20px} .ssai-hero{min-height:calc(100svh - 68px - 52px);align-items:flex-end} .ssai-hero::before{background:linear-gradient(180deg,rgba(5,3,1,.12) 0%,rgba(5,3,1,.38) 38%,rgba(5,3,1,.9) 78%)} .ssai-hero-foto img{object-position:62% 85%} .ssai-t-plano-img img,.ssai-res-distribucion img{max-height:none} .ssai-hero-texto{max-width:none;padding:260px 16px 28px} .ssai-hero .ssai-titulo{font-size:clamp(34px,10.5vw,60px)} .ssai-lead{font-size:16px} .ssai-botones .ssai-btn{flex:1 1 100%} .ssai-como{padding:16px 16px 24px} .ssai-como-cab .ssai-titulo{font-size:clamp(26px,8vw,48px)} .ssai-eyebrow{font-size:12px} .ssai-sub{font-size:15px;margin-top:10px} .ssai-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:16px} .ssai-tab{flex-direction:column;gap:2px;padding:8px 4px;min-height:58px;text-align:center} .ssai-tab-n{font-size:20px} .ssai-tab-t{font-size:10px;letter-spacing:.06em} .ssai-paso{grid-template-columns:minmax(0,1fr);row-gap:18px;align-items:start} .ssai-paso-num{font-size:14px} .ssai-paso-num b{font-size:28px} .ssai-paso-texto .ssai-titulo{font-size:clamp(30px,9.5vw,50px)} .ssai-paso-texto>p:not(.ssai-paso-num){font-size:16px} .ssai-paso-texto .ssai-btn-pildora{min-height:50px;font-size:13px} .ssai-tarjeta{padding:12px} .ssai-ampliar{display:none} .ssai-nav{margin-top:22px;gap:40px} .ssai-t-plano{grid-template-columns:minmax(0,1fr)} .ssai-t-logo{width:120px} .ssai-t-plano-izq{align-items:center;text-align:center} .ssai-t-plano-izq .ssai-eyebrow{font-size:11px} .ssai-t-plano-izq .ssai-titulo{font-size:28px} .ssai-t-texto{font-size:14px} .ssai-t-plano-izq .ssai-btn{min-height:46px;font-size:13px} .ssai-t-plano-cab{font-size:12px} .ssai-t-archivo,.ssai-t-nota{font-size:11px} .ssai-t-iso-img{width:100%} .ssai-t-leyenda{font-size:12px} .ssai-t-iso .ssai-btn{min-width:0;width:100%;font-size:12px} .ssai-t-importe-fila{flex-direction:column;align-items:flex-start;gap:6px} .ssai-t-importe{flex:none;width:100%;font-size:32px} .ssai-t-etiqueta{font-size:12px} .ssai-t-ayuda{font-size:14px;max-width:none} .ssai-sectores{grid-template-columns:repeat(2,1fr);gap:6px} .ssai-sectores span{font-size:10px} .ssai-sectores span{padding:.3em 3%;letter-spacing:.02em;overflow-wrap:normal} .ssai-t-generar{width:100%;font-size:12px;min-height:46px} .ssai-t-renders-col{padding-bottom:0} .ssai-t-renders{grid-template-columns:repeat(2,1fr)} .ssai-t-renders:not(:fullscreen){grid-template-columns:repeat(3,1fr)} .ssai-t-renders figure,.ssai-t-renders figure:nth-of-type(n+7){grid-column:auto;aspect-ratio:4/3} .ssai-t-renders:not(:fullscreen) figure.ssai-r-corta{aspect-ratio:1} .ssai-t-renders .ssai-r-grande{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3} .ssai-t-renders figcaption,.ssai-t-renders figure:not(.ssai-r-grande) figcaption{font-size:10px} .ssai-t-renders-pie{position:static;margin-top:12px;justify-content:center} .ssai-t-renders-pie .ssai-btn{width:100%} .ssai-t-mat-cab{flex-wrap:wrap} .ssai-t-mat-cab>div{flex:1 1 100%} .ssai-t-mat-cab .ssai-titulo{font-size:24px} .ssai-t-mat-cab p{font-size:11px} .ssai-filtro select,.ssai-t-mat-cab .ssai-btn-descarga{flex:none;min-height:42px;font-size:11px} .ssai-tabla,.ssai-tabla tbody,.ssai-tabla tr,.ssai-tabla th,.ssai-tabla td{display:block} .ssai-tabla thead{display:none} .ssai-tabla{font-size:13px} .ssai-tabla tr{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.14)} .ssai-tabla tr[hidden]{display:none} .ssai-tabla tbody th{grid-column:1/-1;border:0;font-size:12px} .ssai-tabla tbody th img{width:90px;height:40px} .ssai-mosaico{width:90px;height:40px} .ssai-tabla td{border:0;text-align:left;padding:0 0 0 0} .ssai-tabla td:last-child{width:auto;grid-row:2;grid-column:2} .ssai-tabla td:nth-child(2){color:#fff} .ssai-tabla td:nth-child(3){color:var(--oro1)} .ssai-ficha{width:32px;height:32px} .ssai-totales{grid-template-columns:1fr;padding:6px 0} .ssai-totales p{justify-content:flex-start;padding:6px 14px;font-size:11px} .ssai-totales p+p{border-left:0;border-top:1px solid rgba(255,255,255,.3)} .ssai-t-pie-nota{font-size:10px;padding:4px} .ssai-t-resumen{grid-template-columns:1fr} .ssai-t-resumen>div{grid-column:1/-1!important} .ssai-t-resumen>.ssai-titulo{font-size:22px} .ssai-t-resumen .ssai-res-distribucion,.ssai-t-resumen .ssai-res-renders,.ssai-t-resumen .ssai-res-materiales,.ssai-t-resumen .ssai-res-video,.ssai-t-resumen .ssai-res-estimacion{grid-row:auto} .ssai-t-resumen h4,.ssai-res-vision{font-size:11px} .ssai-res-renders figcaption,.ssai-res-materiales p{font-size:10px} .ssai-res-estimacion p{font-size:13px} .ssai-res-estimacion b{font-size:34px} .ssai-res-estimacion .ssai-res-nota{font-size:10px} .ssai-res-video .ssai-btn{min-height:40px;font-size:12px} .ssai-prensa-premio{grid-template-columns:1fr;padding:20px 16px} .ssai-premios{font-size:13px} .ssai-prensa-texto .ssai-titulo{font-size:clamp(34px,10vw,56px)} .ssai-prensa-texto .ssai-lead{font-size:16px} .ssai-fecha{font-size:16px} .ssai-lugar{font-size:13px} .ssai-prensa-texto .ssai-btn{min-height:48px;font-size:13px} .ssai-proximas{padding:16px} .ssai-proximas .ssai-eyebrow{font-size:11px} .ssai-proximas ul{grid-template-columns:minmax(0,1fr)} /* D-SSAI-025/043: a 195 px (zoom 200 % a 390) «ARQUITECTURA» no cabe en la columna: se parte en vez de ensanchar la página. */ .ssai-proximas h3,.ssai-proximas li p{overflow-wrap:anywhere} .ssai-proximas h3{font-size:24px} .ssai-proximas li p{font-size:14px} } @media (max-width:600px){ /* D-SSAI-885: a 390 el borde claro de la mesa cruzaba el dorado «EN MINUTOS.» (p99 2,55): velo más oscuro en la franja del titular */ .ssai-hero::before{background:linear-gradient(180deg,rgba(5,3,1,.12) 0%,rgba(5,3,1,.38) 30%,rgba(5,3,1,.82) 50%,rgba(5,3,1,.9) 78%)} } @media (prefers-reduced-motion:reduce){*{transition:none!important}} /* ---------- Aviso de cookies (templates/publico/_cookies.html.twig) ---------- */ .ssai .aviso-cookies{position:fixed;inset:auto 0 0 0;z-index:60;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;padding:14px 16px;background:#050301;border-top:1px solid var(--oro);font-size:.95rem;color:#fff} /* D-SSAI-211: con zoom al 200 % el aviso cabe en la ventana y, si no, se desplaza dentro de ella (no tapa la página ni corta su principio). */ .ssai .aviso-cookies{max-height:100svh;overflow-y:auto;overscroll-behavior:contain} .ssai .aviso-cookies p{margin:0;max-width:46rem} .ssai .aviso-cookies a{color:var(--oro1)} .ssai .aviso-cookies form{margin:0} .ssai .aviso-cookies button{min-height:44px;padding:0 1.4rem;border:1px solid var(--oro);background:transparent;color:#fff;font:500 .8rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer} .ssai .aviso-cookies .aviso-cookies-configurar{font-size:.8rem;text-decoration:underline;white-space:nowrap} @media (max-width:900px){ .ssai-t-iso .ssai-btn{padding-top:.55em;padding-bottom:.55em;min-height:44px;line-height:1.25} } /* Mientras se ve el aviso de cookies (fijo abajo), la página deja sitio debajo para que el aviso no tape el final. */ body:has(.aviso-cookies){padding-bottom:90px} @media (max-width:1100px){body:has(.aviso-cookies){padding-bottom:180px}} @media (max-width:700px){body:has(.aviso-cookies){padding-bottom:280px}} /* D-SSAI-398/402: el aviso mide 227 px a 390 y 150 a 768: el pie queda libre al final del scroll */ /* D-SSAI-228: a ≤420 px el aviso mide ~228 px; el hueco y el scroll-padding del foco por Tab lo superan para que el campo enfocado no quede tapado. */ @media (max-width:420px){body:has(.aviso-cookies){padding-bottom:250px}} html:has(.aviso-cookies){scroll-padding-bottom:100px} @media (max-width:1100px){html:has(.aviso-cookies){scroll-padding-bottom:140px}} @media (max-width:700px){html:has(.aviso-cookies){scroll-padding-bottom:200px}} @media (max-width:420px){html:has(.aviso-cookies){scroll-padding-bottom:260px}} .ssai-pie-legal{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:clamp(10px,.8vw,14px);letter-spacing:.06em;text-transform:none} .ssai-pie-legal a{color:rgba(255,255,255,.7);text-decoration:none} .ssai-pie-legal a:hover,.ssai-pie-legal a:focus-visible{color:var(--oro1);text-decoration:underline} @media (max-width:1100px){.ssai-pie{flex-direction:column;gap:6px}.ssai-pie-legal{justify-content:center}} @media (max-width:1100px){.ssai-res-distribucion img{width:auto;max-width:min(100%,480px);max-height:none;margin:0 auto;display:block}} @media (min-width:701px) and (max-width:1100px){ .ssai-t-resumen{grid-template-columns:repeat(2,minmax(0,1fr))} .ssai-t-resumen>div{grid-column:auto!important;grid-row:auto!important} .ssai-t-resumen>.ssai-titulo{grid-column:1/-1!important} .ssai-t-resumen .ssai-res-renders{grid-column:1/-1!important;order:1} .ssai-t-resumen .ssai-res-distribucion{order:2}.ssai-t-resumen .ssai-res-estimacion{order:3} .ssai-t-resumen .ssai-res-materiales{order:4}.ssai-t-resumen .ssai-res-video{order:5} } @media (max-width:1100px){.ssai-res-distribucion picture{display:block;text-align:center}} @media (max-width:1100px){.ssai-res-distribucion{display:flex;flex-direction:column}.ssai-res-distribucion picture{flex:1;display:flex;align-items:center;justify-content:center}} /* D-SSAI-631: el isométrico centrado en el alto del panel, sin el hueco solo debajo */ /* D-SSAI-334/360 (diapositiva 7): a 701-1100 el layout elegido va ANTES que los renders, en la misma fila, y la estimación no deja hueco bajo su texto */ @media (min-width:901px) and (max-width:1100px){#paso-6.ssai-paso{align-items:start}} @media (min-width:701px) and (max-width:1100px){ .ssai-t-resumen .ssai-res-renders{grid-column:auto!important;order:2} .ssai-t-resumen .ssai-res-distribucion{order:1} .ssai-t-resumen .ssai-res-estimacion{order:3;align-self:start} .ssai-t-resumen .ssai-res-materiales{order:4} .ssai-t-resumen .ssai-res-video{order:5;grid-column:1/-1!important} } @media (min-width:701px) and (max-width:1100px){ .ssai-sectores{grid-template-columns:repeat(4,1fr)} .ssai-sectores span{font-size:11px} .ssai-botones .ssai-btn{flex:0 1 auto;min-width:340px} } /* Titulares de paso: la palabra más larga («WALKTHROUGH.») nunca pasa de su columna. */ @media (min-width:901px){ .ssai-paso-texto{container-type:inline-size} /* Título de la cabecera de Cómo funciona: en inglés (26,5 veces la letra) cabe en una línea, como el español de la diapositiva. */ .ssai-como-cab{container-type:inline-size} html[lang=en] .ssai-como-cab .ssai-titulo{font-size:min(clamp(26px,4.2vw,80px),3.7cqw)} html[lang=en] .ssai-paso-texto .ssai-titulo{font-size:min(clamp(26px,4.15vw,80px),11.6cqw)} html[lang=en] #paso-1 .ssai-paso-texto .ssai-titulo{font-size:min(clamp(26px,4.55vw,86px),11.6cqw)} html[lang=en] #paso-6 .ssai-paso-texto .ssai-titulo{font-size:min(clamp(24px,2.75vw,62px),11.6cqw)} html[lang=en] #paso-3 .ssai-paso-texto .ssai-titulo{font-size:min(clamp(26px,3.55vw,70px),11.6cqw)} html[lang=en] .ssai-paso-ancho .ssai-paso-texto .ssai-titulo{font-size:min(clamp(24px,3.25vw,70px),11.6cqw)} html[lang=es] .ssai-paso-texto .ssai-titulo{font-size:min(clamp(26px,4.15vw,80px),13.8cqw)} html[lang=es] #paso-1 .ssai-paso-texto .ssai-titulo{font-size:min(clamp(26px,4.55vw,86px),13.8cqw)} /* «TU ANTEPROYECTO,» en una línea que llena la columna, como en la diapositiva 7 (la frase mide 9,8 veces la letra). */ html[lang=es] #paso-6 .ssai-paso-texto .ssai-titulo{font-size:min(clamp(24px,2.75vw,62px),10cqw)} html[lang=es] #paso-3 .ssai-paso-texto .ssai-titulo{font-size:min(clamp(26px,3.55vw,70px),12.4cqw)} html[lang=es] .ssai-paso-ancho .ssai-paso-texto .ssai-titulo{font-size:min(clamp(24px,3.25vw,70px),13.8cqw)} #paso-6 .ssai-paso-texto .ssai-btn-pildora{font-size:clamp(11px,.88vw,17px);letter-spacing:.03em} } /* Titulares de los pasos 01, 02 y 04 de Cómo funciona (D-SSAI-068; puente 20-oct): a 1440×900 miden 52 px, el de la diapositiva (3,61vw; antes EN 38,7-41,9 y ES 46-50), y en 1101-1920 nunca bajan de lo que ya medían (max con la fórmula anterior); a ≤1100 y ≥2000 quedan idénticos. Los pasos 03, 05 y 06 y el 04 en inglés no cambian (límite medido: 03/05/06 no llegan a ≤3 líneas con la caja única; «WALKTHROUGH.» del 04 en EN no cabe en su columna por encima de 11,6cqw ≈ 40,6 px). */ @media (min-width:1101px){ html[lang=en] #paso-1 .ssai-paso-texto .ssai-titulo{font-size:max(min(clamp(26px,4.55vw,86px),11.6cqw),min(3.61vw,52px))} html[lang=es] #paso-1 .ssai-paso-texto .ssai-titulo{font-size:max(min(clamp(26px,4.55vw,86px),13.8cqw),min(3.61vw,52px))} html[lang=en] #paso-2 .ssai-paso-texto .ssai-titulo{font-size:max(min(clamp(26px,4.15vw,80px),11.6cqw),min(3.61vw,52px))} html[lang=es] #paso-2 .ssai-paso-texto .ssai-titulo{font-size:max(min(clamp(26px,4.15vw,80px),13.8cqw),min(3.61vw,52px))} html[lang=es] #paso-4 .ssai-paso-texto .ssai-titulo{font-size:max(min(clamp(24px,3.25vw,70px),13.8cqw),min(3.61vw,52px))} } /* Portada en inglés (escritorio): el titular es más largo; columna algo más ancha y degradado más extendido para que siga legible. */ @media (min-width:1101px){ html[lang=en] .ssai-hero-texto{max-width:calc(47vw + var(--lado))} html[lang=en] .ssai-hero::before{background:linear-gradient(90deg,rgba(5,3,1,.88) 0%,rgba(5,3,1,.74) 36%,rgba(5,3,1,.45) 50%,rgba(5,3,1,.1) 62%,transparent 70%)} } /* Textos legales (aviso legal, privacidad, cookies) dentro de la web de SS AI Designer */ .ssai-legal{width:100%;max-width:860px;margin:0 auto;padding:clamp(28px,5vw,72px) var(--lado) clamp(36px,6vw,90px);color:var(--texto);line-height:1.65} .ssai-legal h1{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.4vw,52px);line-height:1.12;margin:0 0 .7em;color:var(--oro1)} .ssai-legal h2{font-family:var(--serif);font-weight:500;font-size:clamp(20px,1.7vw,28px);margin:1.6em 0 .5em;color:var(--oro1)} .ssai-legal p,.ssai-legal li{font-size:clamp(15px,1.05vw,18px)} .ssai-legal a{color:var(--oro1);overflow-wrap:anywhere} /* Revisión de la A1 frente a las diapositivas (974., V1 1.ª pasada, 19-oct). Inicio = DIAPOSITIVA 1; Cómo funciona = DIAPOSITIVA 2. */ .ssai-hero .ssai-titulo em,.ssai-t-plano-izq .ssai-titulo em{white-space:nowrap} /* «en minutos.» no se parte (a 768 quedaba «ANTEPROYECTO EN / MINUTOS.») */ @media (min-width:1201px){ .ssai-hero .ssai-lead{max-width:27em} /* la entradilla en 3 líneas, como la diapositiva */ .ssai-t-plano-img img{max-height:17vw} } @media (min-width:901px){ /* los trazos del plano de la imagen de la 958. se ven detrás del texto, como en la diapositiva */ .ssai-hero::before,html[lang=en] .ssai-hero::before{background:linear-gradient(90deg,rgba(5,3,1,.6) 0%,rgba(5,3,1,.46) 28%,rgba(5,3,1,.26) 42%,rgba(5,3,1,.06) 56%,transparent 64%)} .ssai-t-plano{grid-template-columns:minmax(0,.75fr) minmax(0,1.65fr)} .ssai-t-plano-izq .ssai-titulo{max-width:8.3em;font-size:clamp(17px,2.1vw,40px)} /* «SUBE EL PLANO / DE TU / PROYECTO.» (con 2,4vw, «SUBE EL PLANO» no cabía en la columna) */ /* flecha izquierda al borde del marco, «01 / 06» al centro del marco y «Ampliar diapositiva» en la misma fila, a la derecha */ .ssai-nav{position:relative;padding-left:27.2%} .ssai-nav [data-ssai-prev]{position:absolute;left:27.2%} .ssai-ampliar{bottom:calc(-1 * (clamp(22px,1.6vw,32px) + clamp(22px,1.3vw,24px)) - 1em);z-index:2} /* por encima de la fila ssai-nav (position:relative y más tarde en el DOM), que se llevaba el clic */ } .ssai-paso-texto .ssai-btn-paso{width:100%;min-height:clamp(46px,4vw,74px);font-size:clamp(12px,1.12vw,20px);font-weight:700;letter-spacing:.05em} /* rectángulo, no píldora */ .ssai-btn-paso .ssai-ico{width:1.7em;height:1.7em} .ssai-t-plano-img{width:auto;max-width:100%;align-self:center;border:2px dotted rgba(241,194,79,.85);background:transparent;padding:clamp(3px,.35vw,6px)} /* el marco punteado de oro, pegado al plano */ .ssai-t-plano-img img{background:#fff} @media (max-width:1200px){ .ssai-panel.is-abierto{min-height:calc(100svh - 68px)} /* el menú del móvil tapa la página entera */ } @media (max-width:1200px){ .ssai-panel{justify-content:flex-start} /* W4-ssai-menu-movil-arriba (puente 17:3x y 18:16): en todo el tramo del menú de hamburguesa, las entradas justo bajo la cabecera, no al fondo del panel */ } @media (max-width:900px){ .ssai-paso-texto .ssai-btn-paso{min-height:50px;font-size:13px} .ssai-ampliar{display:inline-flex;position:static;justify-self:end;margin-top:-8px} /* también en el móvil */ } /* D-SSAI-035 (uso real, 390 y 768): zonas táctiles de 44 px y letra de 14 px como mínimo en móvil (las del pie, el aviso de cookies, el idioma, los botones y los rótulos). */ @media (max-width:900px){ .ssai .ssai-cab .ssai-idioma-movil{min-height:44px;box-sizing:border-box} .ssai .ssai-pie-legal a,.ssai .aviso-cookies a{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box} .ssai .aviso-cookies button{min-height:44px} /* W1-legales-detalles: el enlace dentro del texto del aviso guarda sus 44 px de zona táctil sin abrir hueco entre líneas (antes, a 390, la línea del enlace medía 44 px). */ .ssai .aviso-cookies p a{margin-block:calc(.5lh - 22px)} } /* D-SSAI-173 F2: a 701-768 px la letra de los botones del aviso de cookies también es de 14 px. */ @media (max-width:768px){.ssai .aviso-cookies button{font-size:14px}} /* D-SSAI-173 F1: con el menú abierto el aviso de cookies queda por debajo de la cabecera (z 30) y no tapa «Solicitar acceso» ni «Acceder». */ body.ssai-menu-abierto .aviso-cookies{z-index:20} @media (max-width:700px){ .ssai .ssai-eyebrow,.ssai .ssai-pie p,.ssai .ssai-pie-legal,.ssai .ssai-pie-legal a,.ssai .aviso-cookies button{font-size:14px} .ssai :is(a,button).ssai-btn{min-height:44px;font-size:14px} } /* W8 (20-oct, HALLAZGOS-PODS-1020 S30): en móvil (≤900) la letra, de 14 px como mínimo, y los toques, de 44 px de alto como mínimo, en Cómo funciona, el pie y el idioma. Las pestañas pasan a 2 columnas a ≤600 para que «Personalización» quepa a 14 px sin cortarse. */ @media (max-width:900px){ .ssai-btn{font-size:14px} .ssai-paso-texto .ssai-btn-pildora,.ssai-paso-texto .ssai-btn-paso,.ssai-t-plano-izq .ssai-btn{font-size:14px} .ssai-eyebrow,.ssai-t-plano-izq .ssai-eyebrow,.ssai-proximas .ssai-eyebrow{font-size:14px} .ssai-tab-t{font-size:14px;letter-spacing:.02em} .ssai-t-plano-cab,.ssai-t-plano-cab b,.ssai-t-plano-cab small{font-size:14px} .ssai-t-archivo,.ssai-t-nota,.ssai-t-pie-nota,.ssai-res-estimacion .ssai-res-nota{font-size:14px} .ssai-t-archivo{display:flex;align-items:center;justify-content:center;min-height:44px} .ssai-ampliar{font-size:14px;min-height:44px} .ssai-tabla,.ssai-tabla tbody th{font-size:14px} .ssai-pie p,.ssai-pie-legal{font-size:14px} .ssai-pie-legal a{display:inline-flex;align-items:center;min-height:44px} .ssai-cab .ssai-idioma-movil{min-height:44px} /* dentro de las tarjetas de los pasos (la simulación de la app): también 14 px y 44 px de alto */ .ssai-t-leyenda,.ssai-t-etiqueta,.ssai-t-iso .ssai-btn,.ssai-t-generar,.ssai-sectores span,.ssai-t-renders figcaption,.ssai-t-renders figure:not(.ssai-r-grande) figcaption,.ssai-t-mat-cab p,.ssai-filtro select,.ssai-t-mat-cab .ssai-btn-descarga,.ssai-totales p,.ssai-t-resumen h4,.ssai-res-vision,.ssai-res-renders figcaption,.ssai-res-materiales p,.ssai-res-estimacion p,.ssai-res-estimacion .ssai-res-nota,.ssai-res-video .ssai-btn,.ssai-t-pie-nota{font-size:14px} .ssai-btn-chico,.ssai-filtro select,.ssai-t-mat-cab .ssai-btn-descarga,.ssai-res-video .ssai-btn,.ssai-t-generar{min-height:44px} .ssai-t-mat-cab>div{min-width:0} .ssai-t-mat-cab .ssai-titulo{white-space:normal} .ssai-filtro,.ssai-filtro select{max-width:100%} } /* reflow a 320: la cabecera (logo, idioma y menú) cabe sin pasar del ancho */ @media (max-width:360px){ .ssai-logo img{height:44px} .ssai-cab{gap:4px} } /* a 1024 (901-1200) el título de «Materiales» ya no empuja a «Descargar informe» fuera de su tarjeta (S30, paso 5) */ @media (min-width:901px) and (max-width:1200px){ .ssai-t-mat-cab>div{min-width:0} .ssai-t-mat-cab .ssai-titulo{white-space:normal} } @media (max-width:600px){.ssai-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.ssai-tab{min-width:0}.ssai-tab-t{overflow-wrap:anywhere}} @media (max-width:260px){.ssai-hero .ssai-titulo em,.ssai-t-plano-izq .ssai-titulo em{white-space:normal}.ssai-t-plano-izq .ssai-titulo{font-size:22px;overflow-wrap:anywhere}} /* W8 (D-SSAI-025/043, zoom del 200 % a 390 = 195 px): la cabecera pasa a dos filas (logo, y debajo idioma y menú) en vez de salirse por la derecha */ @media (max-width:260px){ .ssai-cab{flex-wrap:wrap;height:auto;padding:6px 16px;row-gap:6px} .ssai-logo img{height:44px;max-width:100%} /* D-SSAI-225/167: el título del hero no se corta a 195 px: mínimo menor y la palabra larga se parte */ .ssai-hero-texto{min-width:0} .ssai-hero .ssai-titulo{font-size:clamp(18px,10vw,34px);overflow-wrap:anywhere} .ssai-hero .ssai-eyebrow{overflow-wrap:anywhere} /* D-SSAI-025/043 (Prensa): la columna única del premio no crece al contenido más largo (258/312 px) y el titular, los premios y la fecha parten la palabra larga */ .ssai-prensa-premio{grid-template-columns:minmax(0,1fr)} .ssai-prensa-texto{min-width:0} .ssai-prensa-texto .ssai-titulo{font-size:clamp(22px,10vw,34px);overflow-wrap:anywhere} .ssai-premios,.ssai-prensa-texto .ssai-lead,.ssai-fecha{overflow-wrap:anywhere} } /* W8 (D-SSAI-026): sin JavaScript (≤1200) el botón del menú no hace nada: se oculta y el panel del menú queda a la vista, debajo de la cabecera */ @media (max-width:1200px) and (scripting:none){ .ssai-burger{display:none} /* D-SSAI-229 (W30/W45): la cabecera deja de ser de 68 px fijos: el menú va en una fila bajo el logo y empuja la página, sin salirse por arriba ni tapar el titular */ .ssai-cab{flex-wrap:wrap;height:auto;padding-top:6px;padding-bottom:6px;row-gap:6px} .ssai-panel{display:flex;position:static;flex:1 1 100%;flex-basis:100%;max-height:none;overflow:visible} } /* W8 (D-SSAI-006, WCAG 2.5.8): en escritorio el selector ES/EN y los enlaces legales del pie, de 24 px como mínimo (en móvil, 44) */ @media (min-width:901px){ .ssai-idiomas a{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px} .ssai-pie-legal a{display:inline-flex;align-items:center;min-height:24px} } /* D-SSAI-081 (V10): con «Ejemplo de entrega» el menú tiene 8 entradas y a 1440 se salía de la cabecera (ES/EN y Acceder fuera, barra horizontal de 155 px en es y 17 en en): de 1201 a 1700 px el menú se compacta con medidas en vw. */ @media (min-width:1201px) and (max-width:1700px){ .ssai-menu ul{gap:.9vw} .ssai-menu a{font-size:max(10.5px,.86vw);letter-spacing:.02em} /* medido en el pod (1262.): el mayor que cabe en es es 10,5 px a 1201, 11 a 1280, 12 a 1366, 13 a 1440+ */ .ssai-panel{gap:.9vw} .ssai-solicitar{padding:0 .95vw;font-size:max(10.5px,.74vw);letter-spacing:.07em} .ssai-acceder{padding:0 .9vw;font-size:max(10.5px,.74vw)} } @media (min-width:1400px) and (max-width:1700px){.ssai-menu a{font-size:clamp(12px,.9vw,13px)}} /* V10 (1920, 20-oct): con 8 entradas el menú a ≥1701 px usaba los tamaños del escritorio ancho (16 px; Solicitar/Acceder 15 px) y salía 97 px de la cabecera (barra horizontal en es). Desde 1701 px (también a 2560) se queda con las medidas de 1700 (13 px, hueco 16 px), que caben con holgura. */ @media (min-width:1701px){ .ssai-menu ul{gap:16px} .ssai-menu a{font-size:13px} .ssai-panel{gap:16px} .ssai-solicitar{padding:0 16px;font-size:12.5px} .ssai-acceder{padding:0 16px;font-size:12.5px} } /* W7 (D-SSAI-117): Prensa de escritorio como la diapositiva 14: el artículo ocupa ~54 % del ancho (empieza al ~43 %) y el titular baja a ~4 vw para caber en su columna más estrecha */ @media (min-width:1101px){ .ssai-prensa-premio{grid-template-columns:minmax(0,39fr) minmax(0,57fr)} .ssai-prensa-texto .ssai-titulo{font-size:clamp(32px,4vw,76px)} } /* W7 (D-SSAI-178): la tabla de cookies de la política no ensancha la página a 390 px (llegaba a x=439): se desplaza dentro de su sección, sus nombres no se parten por la mitad de una palabra y las sombras de los bordes avisan de que hay más a la izquierda o a la derecha */ .ssai-legal .cookies-lista{overflow-x:auto;background:linear-gradient(90deg,#050301 30%,transparent) 0 0/36px 100% no-repeat local,linear-gradient(270deg,#050301 30%,transparent) 100% 0/36px 100% no-repeat local,linear-gradient(90deg,rgba(242,181,60,.45),transparent) 0 0/16px 100% no-repeat scroll,linear-gradient(270deg,rgba(242,181,60,.45),transparent) 100% 0/16px 100% no-repeat scroll} .ssai-legal .cookies-lista table{width:100%;min-width:32em;table-layout:fixed;border-collapse:collapse} .ssai-legal .cookies-lista th:nth-child(1){width:32%} .ssai-legal .cookies-lista th:nth-child(2){width:25%} .ssai-legal .cookies-lista th:nth-child(3){width:22%} .ssai-legal .cookies-lista th:nth-child(4){width:21%} .ssai-legal .cookies-lista th,.ssai-legal .cookies-lista td{text-align:left;vertical-align:top;padding:.5em .6em;border-bottom:1px solid rgba(255,255,255,.18)} .ssai-legal .cookies-lista th code{white-space:nowrap;font-size:.9em} /* D-SSAI-184/193/195: la tabla de cookies, en móvil, una ficha por cookie (cada dato con su rótulo) en vez de ensanchar la página */ @media (max-width:600px){ .ssai-legal .cookies-lista table,.ssai-legal .cookies-lista tbody{display:block;width:100%} .ssai-legal .cookies-lista table{min-width:0} /* D-SSAI-557: las fichas miden el ancho de la sección, no los 32 em de la tabla de escritorio */ .ssai-legal .cookies-lista thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .ssai-legal .cookies-lista tr{display:block;margin:0 0 1rem;padding:0 0 .8rem;border-bottom:1px solid rgba(242,181,60,.25)} .ssai-legal .cookies-lista th[scope=row],.ssai-legal .cookies-lista td{display:block;text-align:left;padding:.15rem 0;overflow-wrap:anywhere} .ssai-legal .cookies-lista td::before{content:attr(data-label) ": ";font-weight:600;color:var(--oro1)} } /* D-SSAI-227/229: sin JavaScript el menú va en flujo, en una fila (que se parte) bajo el logo y empuja la página: ni se sale por arriba ni tapa el titular */ @media (max-width:1200px) and (scripting:none){ .ssai-cab{flex-wrap:wrap;height:auto;padding-top:6px;padding-bottom:10px;row-gap:6px} .ssai-panel{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:6px 18px;padding:0;max-height:none;overflow:visible;border:0;background:none} } /* D-SSAI-201/212 (zoom 200 % = 195 px) sin JavaScript: el panel del menú en flujo no crece más que la ventana y «Solicitar acceso» parte la línea en vez de sobresalir (scrollWidth 201/215 > 195) */ @media (max-width:260px) and (scripting:none){ .ssai-panel{min-width:0;max-width:100%} .ssai-solicitar,.ssai-acceder{white-space:normal;max-width:100%;text-align:center} } /* D-SSAI-207: el aviso de cookies con «Configurar» de 44 px de alto y, de 1100 px para abajo, el texto arriba y los tres controles en una fila */ .ssai .aviso-cookies .aviso-cookies-configurar{display:inline-flex;align-items:center;min-height:44px;padding:0 .4rem} @media (max-width:1100px){ .ssai .aviso-cookies p{flex:1 1 100%;max-width:none;text-align:center} } @media (min-width:600px) and (max-width:1100px){.ssai .aviso-cookies{flex-wrap:wrap}} /* D-SSAI-387 (diapositiva 7): a 701-1100 px el recuadro «Renders» del paso 6 sigue la altura de su fila: el render grande ocupa lo que sobra (mín. 160 px; era una tira de 90 px con ~125 px vacíos debajo) y las tres miniaturas quedan pegadas debajo, sin hueco. */ @media (min-width:701px) and (max-width:1100px){ .ssai-t-resumen .ssai-res-renders{display:flex;flex-direction:column} .ssai-t-resumen .ssai-res-renders>div{flex:1 1 auto;grid-template-rows:minmax(160px,1fr) auto} .ssai-t-resumen .ssai-res-renders .ssai-r-grande{aspect-ratio:auto;min-height:160px} .ssai-t-resumen .ssai-res-renders .ssai-r-grande picture{display:block;height:100%} } /* D-SSAI-Resumen legible (VS 02:36): de 901 a 1440 px el «Resumen del anteproyecto» no baja de 12 px en rótulos y textos (la nota, de 11 px); antes escalaba en vw y llegaba a 6,5-9 px. La composición no cambia: solo suben los mínimos de los clamp. */ @media (min-width:901px) and (max-width:1440px){ .ssai-t-resumen h4,.ssai-res-vision{font-size:clamp(12px,.9vw,16px)} .ssai-res-renders figcaption{font-size:clamp(12px,.72vw,13px)} .ssai-res-materiales p{font-size:clamp(12px,.8vw,14px)} .ssai-res-estimacion p{font-size:clamp(12px,.92vw,17px)} .ssai-res-estimacion .ssai-res-nota{font-size:11px} .ssai-res-video .ssai-btn{font-size:clamp(12px,.9vw,16px)} } /* D-SSAI-337 (a 360 «Cocinas y electrodomésticos» medía 153 en 145): sin relleno lateral y letras algo más juntas en móviles estrechos (partir la palabra dejaba «OS» sola en la 2.ª línea) */ @media (max-width:380px){.ssai-sectores{margin:0 -7px}.ssai-sectores span{padding:.3em 1%;letter-spacing:-.02em}} /* D-SSAI-352/353 (móvil, «Ampliar» en pantalla completa): el contenido alto no se sale por arriba (safe center) y la fila del render grande no la tapan las miniaturas */ @media (max-width:600px){ .ssai-tarjeta:fullscreen{align-content:safe center;justify-content:safe center} .ssai-t-renders:fullscreen{grid-auto-rows:max-content;align-content:start} } /* D-SSAI-358 (diapositivas 3-7): a 768 el título y el texto de los seis pasos miden lo mismo (antes 35/50/27/25/25/24 px y 16/16/16/14/14/14) */ @media (min-width:701px) and (max-width:900px){ #paso-1 .ssai-paso-texto .ssai-titulo,#paso-2 .ssai-paso-texto .ssai-titulo,#paso-3 .ssai-paso-texto .ssai-titulo,#paso-4 .ssai-paso-texto .ssai-titulo,#paso-5 .ssai-paso-texto .ssai-titulo,#paso-6 .ssai-paso-texto .ssai-titulo{font-size:34px} .ssai-paso-ancho .ssai-paso-texto>p:not(.ssai-paso-num){font-size:16px} } /* D-SSAI-359 (diapositiva 6): a 768 la tabla de materiales conserva sus cuatro columnas con cabecera y filas de una línea; solo en móvil (≤700) se apila */ @media (min-width:701px) and (max-width:900px){ .ssai-tabla{display:table} .ssai-tabla thead{display:table-header-group} .ssai-tabla tbody{display:table-row-group} .ssai-tabla tr{display:table-row;padding:0;border-bottom:0} .ssai-tabla th,.ssai-tabla td{display:table-cell;border-bottom:1px solid rgba(255,255,255,.14);text-align:center;padding:0 .4em} .ssai-tabla tbody th{display:flex;border-bottom:1px solid rgba(255,255,255,.14);text-align:left;font-size:.95em;padding:0} .ssai-tabla tbody th img{width:clamp(70px,12vw,200px);height:clamp(24px,2.55vw,46px)} .ssai-tabla td:last-child{width:clamp(36px,5.6vw,100px)} } /* D-SSAI-456 (diapositivas 3 y 4, 1536): el texto de los pasos 02 y 03 queda a ≥ 28 px del marco del panel (antes 10-13 px) */ @media (min-width:1400px){ #paso-2 .ssai-paso-texto,#paso-3 .ssai-paso-texto{padding-right:28px} } /* D-SSAI-461 (diapositivas 5 y 7, 1920): el render grande del salón se encuadra más abajo (sofá entero con la mesa baja y suelo) sin tocar las miniaturas */ @media (min-width:1201px){ .ssai-t-renders .ssai-r-grande img,.ssai-res-renders .ssai-r-grande img{object-position:50% 72%} } /* D-SSAI-474 (diapositiva 7, 1440): el baño pequeño del resumen del paso 6 enseña espejo, grifo y lavabo (antes, con 50 % 50 %, una puerta y la ducha) */ .ssai-res-renders img[src*="render-bano"]{object-position:50% 70%} /* D-SSAI-424/426 (diapositiva 3, 1440×900; la 062 manda: la maqueta se queda en ≥600 px, puente): se recortan relleno del marco, aire bajo la maqueta y margen de la leyenda para subir los dos botones a la primera pantalla (el marco ya no baja de ~600 px: «≤540» se cierra como «diapositiva manda, 1193.») */ @media (min-width:1201px) and (max-height:940px){ .ssai-t-iso:not(:fullscreen){padding:8px 8px 6px} .ssai-t-iso .ssai-t-leyenda{margin:2px 0 .3em} } /* D-SSAI-445 (diapositiva 7, es 1024): la tarjeta «Estimación preliminar» mide lo que su vecina «Materiales» y su contenido se reparte con espacio alrededor (antes quedaban ~73 px vacíos debajo de la tarjeta) */ @media (min-width:701px) and (max-width:1100px){ .ssai-t-resumen .ssai-res-estimacion{align-self:stretch;display:flex;flex-direction:column;justify-content:space-around} } /* D-SSAI-462 (V9 W46t16, 390, paso 04): el render grande del salón no se recorta a 3:1 (se veía solo la franja del centro bajo el rótulo): 3:2 y encuadre por abajo, como en el resumen del paso 6 */ @media (max-width:600px){ .ssai-t-renders:not(:fullscreen) .ssai-r-grande{aspect-ratio:3/2} .ssai-t-renders .ssai-r-grande img{object-position:50% 70%} } /* D-SSAI-397 (diapositiva 4, en a 768): con letter-spacing -.005em las palabras en mayúsculas de los títulos de los pasos 03-06 se tocaban («SETYOUR BUDGETAND»): espacio entre palabras positivo */ @media (min-width:701px) and (max-width:900px){ #paso-3 .ssai-titulo,#paso-4 .ssai-titulo,#paso-5 .ssai-titulo,#paso-6 .ssai-titulo{word-spacing:.12em} } /* D-SSAI-506 (1280, paso 5): «DATA SHEET»/«FICHA» tocaba el borde derecho de la tabla de materiales (1 px): aire a la derecha de la última columna */ .ssai-tabla thead th:last-child,.ssai-tabla tbody td:last-child{padding-right:.7em} /* D-SSAI-536 (es, 768): en pantalla completa de más de 600 px, si la tarjeta es más alta que la pantalla el desborde superior era inalcanzable (paso 01 y=-87): safe center, el desborde solo sale por abajo y se recorre con scroll */ @media (min-width:601px){ .ssai-tarjeta:fullscreen{align-content:safe center;justify-content:safe center} } /* D-SSAI-512: a partir de 1200 px la foto de la portada empieza al 22 % del ancho y se funde con el fondo oscuro; así la lámpara de cobre queda libre, a la derecha del titular, como en la diapositiva 1 (a 1366 y 1440 «PRELIMINARY» la pisaba) */ @media (min-width:1200px){ .ssai-hero-foto{left:22%} .ssai-hero-foto img{object-position:0% 53%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)} } /* D-SSAI-588 (diapositiva 7, 1024): el resumen del paso 6 mantiene la rejilla de la diapositiva a 901-1100 px: fila 1 Distribución | Renders; fila 2 Materiales | Recorrido en vídeo | Estimación (antes el vídeo iba a ancho completo y Estimación antes que Materiales). */ @media (min-width:901px) and (max-width:1100px){ .ssai-t-resumen{grid-template-columns:repeat(12,minmax(0,1fr))} .ssai-t-resumen .ssai-res-distribucion{grid-column:span 5!important;order:0} .ssai-t-resumen .ssai-res-renders{grid-column:span 7!important;order:0} .ssai-t-resumen .ssai-res-materiales{grid-column:span 4!important;order:0} .ssai-t-resumen .ssai-res-video{grid-column:span 4!important;order:0} .ssai-t-resumen .ssai-res-estimacion{grid-column:span 4!important;order:0;align-self:stretch} } /* D-SSAI suelo 11 px (V10, puente 20-oct): de 1101 a 1439 px el pie legal, Solicitar acceso/Acceder, las pestañas, el eyebrow, «Seleccionar archivo» y las notas del paso 1 de Cómo funciona medían 9,2-10,5 px (medido en lo servido a 1280/1366). Solo font-size y solo en este tramo: a ≥1440 y ≤1100 quedan como estaban (la diapositiva manda en 1440). */ @media (min-width:1101px) and (max-width:1439px){ .ssai-pie-legal{font-size:max(11px,.8vw)} .ssai-solicitar,.ssai-acceder{font-size:max(11px,.74vw)} .ssai-t-plano-izq .ssai-eyebrow,.ssai-t-archivo{font-size:max(11px,.82vw)} .ssai-t-nota{font-size:11px} .ssai-t-plano-cab small{font-size:max(11px,.85em)} } /* Las pestañas de pasos con 11 px se parten en dos líneas por debajo de 1161 px (en inglés; medido en el pod con v10-tabs-1): ahí se quedan con su medida. */ @media (min-width:1161px) and (max-width:1439px){.ssai-tab-t{font-size:max(11px,.82vw)}} /* D-SSAI-628 (diapositiva 2-7, 1440×900; puente 1396./1414.): caja única en los 6 pasos y flechas con «0N / 06» dentro de la primera pantalla. Los pasos se apilan en la misma celda (el activo visible): la caja toma la altura del más alto y no cambia al pasar de uno a otro; el bloque de renders del paso 04 se estira con ella y el margen de las flechas baja a 4 px en pantallas bajas. Solo en pantallas de hasta 940 px de alto: a 1920×1080 la caja del paso 06 es más alta que la ventana y apilarlos haría crecer también el paso 02 por debajo del pliegue. */ @media (min-width:1201px) and (max-height:940px){ .ssai-js .ssai-pasos{display:grid} .ssai-js .ssai-paso,.ssai-js .ssai-paso.is-activo{display:grid;grid-area:1/1;visibility:hidden} .ssai-js .ssai-paso.is-activo{visibility:visible} .ssai-paso>.ssai-tarjeta,.ssai-paso>.ssai-t-renders-col{align-self:stretch} .ssai-paso>.ssai-t-renders-col{display:flex;flex-direction:column} .ssai-t-renders-col>.ssai-t-renders{flex:1 1 auto} } @media (min-width:1201px) and (max-height:940px){ .ssai-nav{margin-top:4px} .ssai-ampliar{bottom:calc(-1 * (4px + clamp(22px,1.3vw,24px)) - 1em)} /* sigue en la fila de las flechas con el margen nuevo (mismo cálculo que arriba) */ /* El paso 02 con la maqueta de ≥600 px (062) es el más alto (≈626 px): sus dos botones van en la misma fila para que la caja única no pase de ≈590 px y las flechas entren en la pantalla. */ .ssai-t-iso:not(:fullscreen){display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(8px,1vw,16px);justify-items:center} .ssai-t-iso:not(:fullscreen)>.ssai-t-iso-img,.ssai-t-iso:not(:fullscreen)>.ssai-t-leyenda{grid-column:1/-1} .ssai-t-iso:not(:fullscreen)>.ssai-btn:nth-of-type(1){justify-self:end} .ssai-t-iso:not(:fullscreen)>.ssai-btn:nth-of-type(2){justify-self:start} } /* D-SSAI-565 (diapositiva 7, 390): el render del salón del resumen del paso 6 era una tira de 318×82 (3,8:1): se le da ~2,2:1 como en la diapositiva (sala entera visible, miniaturas pegadas debajo) */ @media (max-width:600px){ .ssai-res-renders .ssai-r-grande{aspect-ratio:2.2} } /* D-SSAI-651/658/659/663/665/666/667 (diapositivas 2, 5 y 6; 1280-1440 de ancho y ≤940 de alto): la caja única de la 628 toma el alto del paso más alto y los pasos 01, 04 y 05 se quedaban con 60-150 px negros dentro del marco. Su contenido llena ahora la caja: en el 04 el render grande crece y las miniaturas van pegadas debajo; en el 01 el plano crece hasta el pie del panel; en el 05 la tabla se estira hasta los totales. El alto de la caja no cambia (las flechas siguen en la primera pantalla). */ @media (min-width:1201px) and (max-height:940px){ /* contain:size: el render grande y el plano no cuentan para el alto de la caja (lo sigue marcando el paso más alto); solo llenan lo que sobra */ .ssai-t-renders:not(:fullscreen){grid-template-rows:minmax(0,1fr) auto} .ssai-t-renders:not(:fullscreen) .ssai-r-grande{aspect-ratio:auto;min-height:0;contain:size} .ssai-t-plano-der .ssai-t-plano-img{flex:1 1 0;min-height:0;contain:size;display:flex;align-items:center;justify-content:center;width:100%;align-self:stretch;background:#fff} /* el marco punteado (581: width:auto) mediría 0 con contain:size: ocupa el ancho del panel, blanco como en la diapositiva 2 */ .ssai-t-plano-img picture{display:block;width:100%;height:100%} .ssai-t-plano-img img{width:100%;height:100%;max-height:none;object-fit:contain} /* con max-width en % dentro del picture encogido el plano medía 0 px de ancho */ .ssai-t-materiales:not(:fullscreen){display:flex;flex-direction:column} .ssai-t-materiales:not(:fullscreen) .ssai-tabla{flex:1 1 auto} /* al estirarse la tabla, la celda del sector sigue siendo celda (con display:flex su raya no seguía a la de la fila): mosaico y nombre en línea, centrados */ .ssai-t-materiales:not(:fullscreen) .ssai-tabla tbody th{display:table-cell;vertical-align:middle;white-space:nowrap} .ssai-t-materiales:not(:fullscreen) .ssai-tabla tbody th>.ssai-mosaico{display:inline-flex;vertical-align:middle} .ssai-t-materiales:not(:fullscreen) .ssai-tabla tbody th>span:not(.ssai-mosaico){display:inline-block;vertical-align:middle;white-space:normal;margin-left:clamp(6px,.9vw,16px);max-width:calc(100% - clamp(70px,12vw,200px) - clamp(3px,.4vw,6px) - clamp(6px,.9vw,16px) - 4px)} } /* D-SSAI-660 (en, 768, «Enlarge render» del paso 04): en pantalla completa de 601 a 900 px los 10 renders se pintaban encima unos de otros (filas de 104 px con figuras de 266): filas a la medida de cada figura, como ya se hacía a ≤600 (352/353) */ @media (min-width:601px) and (max-width:900px){ .ssai-t-renders:fullscreen{grid-auto-rows:max-content;align-content:start} } /* D-SSAI-680 (diapositivas 5-7, en 1440): el texto y el botón de la columna izquierda de los pasos 04-06 quedan a ≥ 20 px del marco, como los 01-03 (456); antes, 8-9 px */ @media (min-width:1400px){ /* en el texto y el botón, no en la columna: la columna es el contenedor de los cqw del título y su relleno lo encogía (774: el del 06 a 32,4 px) */ .ssai-paso-ancho .ssai-paso-texto>p:not(.ssai-paso-num){padding-right:26px} .ssai-paso-ancho .ssai-paso-texto>.ssai-btn{width:calc(100% - 26px)} } /* D-SSAI-676 (es 390, paso 03): «ELECTRODOMÉSTICOS» a 14 px tocaba los bordes de su tesela (0,6 px por lado): letras algo más juntas de 381 a 600 px (a ≤380 ya lo hace la 337) */ @media (min-width:381px) and (max-width:600px){ .ssai-sectores span{letter-spacing:-.015em} } /* D-SSAI-730 (diapositiva 7, es 1440×900): la isometría de «Distribución seleccionada» flotaba con ~30 px negros debajo; dentro de la caja única llena el alto libre de su tarjeta (contain). Más ancho (≥ 85 %) alargaría el paso 06 y las flechas saldrían de la pantalla: manda la 1416. */ @media (min-width:1201px) and (max-height:940px){ .ssai-t-resumen .ssai-res-distribucion{display:flex;flex-direction:column} .ssai-res-distribucion picture{flex:1 1 0;min-height:0;contain:size;display:block;width:100%} .ssai-res-distribucion img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain} } /* D-SSAI-805 (diapositiva 5, es 1440): bajo el marco del paso 04 «Ver recorrido en vídeo» va a la derecha y «Ampliar render» a su izquierda (estaban al revés); en móvil (≤900) siguen apilados como estaban */ @media (min-width:901px){ .ssai-t-renders-pie{flex-direction:row-reverse} } /* D-SSAI-826/828 (diapositivas 2 y 5, 1440×1000/1080): la caja única de 628/651/730 (y los ajustes del paso 02 de 424/426) solo valía hasta 940 px de alto; en pantallas más altas cada paso volvía a su alto natural: el 01 se encogía (465 px frente a 653 del 02, plano pequeño con hueco negro) y el render grande del 04 quedaba en 958×265 (sin la lámpara ni el cuadro). Donde el paso más alto cabe en la ventana (proporción ≤ 16:10, hasta 1999 px de ancho) se ve como a 1440×900. Medido en lo servido: 1440×1080 caja de 581 px en los 6 pasos, render 958×367, flechas en y=900; 1680×1050 flechas en 1034 (antes 1067, fuera de la pantalla). Tope de ancho: ≥2000 lo escala 814. */ @media (min-width:1201px) and (max-width:1999px) and (min-height:941px) and (max-aspect-ratio:16/10){ .ssai-t-iso:not(:fullscreen){padding:8px 8px 6px} .ssai-t-iso .ssai-t-leyenda{margin:2px 0 .3em} } @media (min-width:1201px) and (max-width:1999px) and (min-height:941px) and (max-aspect-ratio:16/10){ .ssai-js .ssai-pasos{display:grid} .ssai-js .ssai-paso,.ssai-js .ssai-paso.is-activo{display:grid;grid-area:1/1;visibility:hidden} .ssai-js .ssai-paso.is-activo{visibility:visible} .ssai-paso>.ssai-tarjeta,.ssai-paso>.ssai-t-renders-col{align-self:stretch} .ssai-paso>.ssai-t-renders-col{display:flex;flex-direction:column} .ssai-t-renders-col>.ssai-t-renders{flex:1 1 auto} } @media (min-width:1201px) and (max-width:1999px) and (min-height:941px) and (max-aspect-ratio:16/10){ .ssai-nav{margin-top:4px} .ssai-ampliar{bottom:calc(-1 * (4px + clamp(22px,1.3vw,24px)) - 1em)} .ssai-t-iso:not(:fullscreen){display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(8px,1vw,16px);justify-items:center} .ssai-t-iso:not(:fullscreen)>.ssai-t-iso-img,.ssai-t-iso:not(:fullscreen)>.ssai-t-leyenda{grid-column:1/-1} .ssai-t-iso:not(:fullscreen)>.ssai-btn:nth-of-type(1){justify-self:end} .ssai-t-iso:not(:fullscreen)>.ssai-btn:nth-of-type(2){justify-self:start} } @media (min-width:1201px) and (max-width:1999px) and (min-height:941px) and (max-aspect-ratio:16/10){ .ssai-t-renders:not(:fullscreen){grid-template-rows:minmax(0,1fr) auto} .ssai-t-renders:not(:fullscreen) .ssai-r-grande{aspect-ratio:auto;min-height:0;contain:size} .ssai-t-plano-der .ssai-t-plano-img{flex:1 1 0;min-height:0;contain:size;display:flex;align-items:center;justify-content:center;width:100%;align-self:stretch;background:#fff} .ssai-t-plano-img picture{display:block;width:100%;height:100%} .ssai-t-plano-img img{width:100%;height:100%;max-height:none;object-fit:contain} .ssai-t-materiales:not(:fullscreen){display:flex;flex-direction:column} .ssai-t-materiales:not(:fullscreen) .ssai-tabla{flex:1 1 auto} .ssai-t-materiales:not(:fullscreen) .ssai-tabla tbody th{display:table-cell;vertical-align:middle;white-space:nowrap} .ssai-t-materiales:not(:fullscreen) .ssai-tabla tbody th>.ssai-mosaico{display:inline-flex;vertical-align:middle} .ssai-t-materiales:not(:fullscreen) .ssai-tabla tbody th>span:not(.ssai-mosaico){display:inline-block;vertical-align:middle;white-space:normal;margin-left:clamp(6px,.9vw,16px);max-width:calc(100% - clamp(70px,12vw,200px) - clamp(3px,.4vw,6px) - clamp(6px,.9vw,16px) - 4px)} } @media (min-width:1201px) and (max-width:1999px) and (min-height:941px) and (max-aspect-ratio:16/10){ .ssai-t-resumen .ssai-res-distribucion{display:flex;flex-direction:column} .ssai-res-distribucion picture{flex:1 1 0;min-height:0;contain:size;display:block;width:100%} .ssai-res-distribucion img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain} } /* D-SSAI-830 (diapositiva 5, 2560×1080): a ≥2000 px de ancho y más de 940 de alto no hay caja única (628/826) y el render grande del paso 04 se quedaba en 3,6:1 (1752×485): sin la lámpara de cobre ni el cuadro. Va a 3:1, como ya sale a 2560×800 dentro de la caja única (1752×587). Sin vw: el bloque de la 814 no la repite. A 3:1 se ve el 44 % del alto de la foto (4:3); con el 72 % de la 461 la ventana empezaba en el 40 % y cortaba la pantalla de la lámpara (30-40 %). Como en la lámina (604×179, recorte por arriba), aquí va al 45 %: del 25 % al 69 %, lámpara, cuadro y sofá enteros (puente, 20-oct 12:4x). Alturas (puente 1609c, capturas t76; 1669, D-SSAI-860): el 45 % vale a ≥2000 a CUALQUIER alto (con la caja única, a 2560×800, el 72 % enseñaba del 37 al 86 % y cortaba la pantalla de la lámpara; t85) y no cambia ningún tamaño; por debajo de 2000 sigue el 72 % de la 461. El 3:1 solo desde 1041, porque a 2000×1000 con 3:1 las miniaturas y «Ver renders» bajaban de la pantalla (con 3,6:1 caben, como en lo servido) y a 2560×1080 ya no cabían en lo servido. Entre 1000 y 1080 de alto el punto exacto no está medido; 1041 es el primero por encima del caso de 2000×1000. A 3,6:1 y 45 % se ve del 28 % al 65 %. */ @media (min-width:2000px){ .ssai-t-renders:not(:fullscreen) .ssai-r-grande img{object-position:50% 45%} } @media (min-width:2000px) and (min-height:1041px){ .ssai-t-renders:not(:fullscreen) .ssai-r-grande{aspect-ratio:3} } /* D-SSAI-640 (W7, medido en lo servido a 1101/1161/1200): el paso 1 de Cómo funciona seguía con 10,0-10,8 px en el texto de la tarjeta, «Continuar» y el rótulo «Plano del proyecto» (las pestañas <1161 quedan como decidió V10). Mismo criterio: solo font-size, 1101-1439, ≥1440 y ≤1100 idénticos. */ @media (min-width:1101px) and (max-width:1439px){ #paso-1 .ssai-t-texto{font-size:max(11px,.9vw)} .ssai-t-plano-izq .ssai-btn{font-size:max(11px,.86vw)} .ssai-t-plano-cab{font-size:max(11px,.88vw)} /* D-SSAI-891 (W7): el paso 5 (solo visible al pulsarlo) tenía a 1280 la nota «Ejemplo orientativo…» a 9,73 px y «Descargar informe» a 9,98 px. */ #paso-5 .ssai-t-pie-nota{font-size:max(11px,.76vw)} #paso-5 .ssai-t-mat-cab .ssai-btn-descarga{font-size:max(11px,.78vw)} } /* Prensa, diapositivas 14 y 15 (PRIO 5473; V3): la revista abierta (imagen compuesta, sin folio blanco ni sombra de caja), el logo de los premios bajo el texto, sin el bloque de fecha y lugar, y «Otras publicaciones» en 2 columnas × 2 filas. En ≥2000 px el zoom del body se compensa con --pv (1vw / --zs), como el resto de Prensa. */ :root{--pv:1vw} @media (min-width:2000px){:root{--pv:calc(1vw / var(--zs))}} .ssai-prensa-imagen{background:none;box-shadow:none;border-radius:0} .ssai-prensa-logo{margin:clamp(10px,calc(1.7 * var(--pv)),34px) 0 0;line-height:0} .ssai-prensa-logo img{width:clamp(150px,calc(19.5 * var(--pv)),420px);height:auto;display:block} .ssai-prensa-texto .ssai-botones{margin-top:clamp(12px,calc(1.6 * var(--pv)),30px)} .ssai-otras{border-top:0;padding-top:clamp(14px,calc(1.4 * var(--pv)),30px);padding-bottom:clamp(20px,calc(2.4 * var(--pv)),50px);background:radial-gradient(80% 90% at 50% 100%,rgba(190,120,30,.2) 0%,transparent 60%)} .ssai-otras-titulo{font-size:clamp(30px,calc(5.1 * var(--pv)),110px);line-height:1.05;margin-top:.12em;background:linear-gradient(180deg,#fff2c4 0%,#f7d27a 38%,#e5ab45 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none} .ssai-otras ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,calc(1.3 * var(--pv)),26px);margin-top:clamp(12px,calc(1.7 * var(--pv)),34px)} .ssai-otras li{padding:clamp(14px,calc(1.9 * var(--pv)),38px) 1em clamp(12px,calc(1.7 * var(--pv)),34px)} .ssai-otras h3{font-size:clamp(20px,calc(2.95 * var(--pv)),64px);margin-inline:2%;white-space:nowrap} .ssai-otras li p{margin-top:clamp(8px,calc(1.2 * var(--pv)),24px);font-size:clamp(12px,calc(1.45 * var(--pv)),30px)} @media (min-width:1101px){ .ssai-prensa-imagen{margin-left:calc(-5.5 * var(--pv));margin-right:calc(-1.5 * var(--pv))} .ssai-prensa-texto{position:relative;z-index:2} .ssai-prensa-texto .ssai-titulo{font-size:clamp(32px,calc(5.1 * var(--pv)),110px)} .ssai-prensa-texto .ssai-lead{max-width:calc(34 * var(--pv))} .ssai-prensa-texto .ssai-btn{min-height:clamp(42px,calc(3.3 * var(--pv)),64px);font-size:clamp(12px,calc(1.25 * var(--pv)),24px)} } .ssai-prensa-texto .ssai-titulo em{background:linear-gradient(180deg,#fff3c9 0%,#f9d27a 30%,#f0a92f 70%,#d98a1f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none} @media (max-width:699.98px){.ssai-otras h3{white-space:normal;font-size:clamp(18px,6vw,26px)}.ssai-otras ul{grid-template-columns:minmax(0,1fr)}.ssai-otras-titulo{font-size:clamp(26px,9vw,40px);overflow-wrap:anywhere}} @media (min-width:2000px){.ssai-prensa-texto .ssai-lead{font-size:clamp(14px,calc(1.78 * var(--pv)),34px)}} /* V6: a 2356 la letra del párrafo era ≈0,85× de la diap. (cabía en 3 líneas, no 4) */ /* Prensa, diapositiva 15 (R1 V9, 23-oct): las tarjetas de «Otras publicaciones» llevan en la diapositiva un borde dorado más grueso y brillante y un velo dorado interior; antes, borde fino y tenue. Grosor medido en la diapositiva: 2 px a 1672 de ancho → .12vw (1,7 px a 1440, 2,8 a 2356), con box-shadow inset porque un border fraccionario se pinta a 1 px en DPR 1 (V16). */ .ssai-otras li{border:0;box-shadow:inset 0 0 0 clamp(1.5px,.12vw,3px) rgba(247,205,96,.95),inset 0 0 22px rgba(240,170,50,.16),0 0 10px rgba(240,170,50,.2);background:linear-gradient(180deg,rgba(255,214,120,.07),rgba(0,0,0,.35))} /* Prensa, diapositiva 14 nueva (R2 V6): el sello «XII Edición Premios Interiores» va CENTRADO bajo el párrafo (x 10-31 %; la columna del párrafo mide 34 pv) y el dorado del titular, más contrastado como en la diapositiva (blanco cálido arriba, naranja abajo en cada renglón). */ @media (min-width:1101px){.ssai-prensa-logo{max-width:calc(34 * var(--pv))}.ssai-prensa-logo img{margin-inline:auto}} .ssai-prensa-texto .ssai-titulo em{background:linear-gradient(180deg,#fffdf0 0%,#ffe9a0 24%,#f6b535 60%,#c9731a 100%);-webkit-background-clip:text;background-clip:text;box-decoration-break:clone;-webkit-box-decoration-break:clone} /* == D-SSAI-814: escalado ≥2000 px (generado por herramientas/ssai-escala-2000.py; no editar a mano) == */ @media (min-width:2000px){:root{--zs:1.0417}body.ssai{zoom:var(--zs)}} @media (min-width:2240px){:root{--zs:1.1667}} @media (min-width:2560px){:root{--zs:1.3333}} @media (min-width:2880px){:root{--zs:1.5}} @media (min-width:3200px){:root{--zs:1.6667}} @media (min-width:3840px){:root{--zs:2}} @media (min-width:2000px) and (min-aspect-ratio:2/1){.ssai-tarjeta:fullscreen{--z:1.3333}} @media (min-width:2000px) and (min-aspect-ratio:21/9){.ssai-tarjeta:fullscreen{--z:1.125}} @media (min-width:2000px){:root{--cab:clamp(60px,calc(5.2vw / var(--zs)),100px);--lado:clamp(16px,calc(4vw / var(--zs)),76px)}} @media (min-width:2000px){*,*::before,*::after{box-sizing:border-box}} @media (min-width:2000px){body.ssai{font-variant-numeric:lining-nums;margin:0;min-height:calc(100vh / var(--zs));min-height:calc(100svh / var(--zs));flex-direction:column;font-family:var(--sans);font-size:16px}} @media (min-width:2000px){.ssai img{max-width:100%;height:auto}} @media (min-width:2000px){.ssai :focus-visible{border-radius:2px}} @media (min-width:2000px){.ssai-oculto{width:1px;height:1px}} @media (min-width:2000px){.ssai-saltar{left:12px;top:-60px;padding:10px 16px;font-weight:600}} @media (min-width:2000px){.ssai-saltar:focus{top:8px}} @media (min-width:2000px){.ssai main{flex:1 0 auto;flex-direction:column}} @media (min-width:2000px){.ssai em{box-decoration-break:clone;font-style:normal}} @media (min-width:2000px){.ssai-ico{width:1.5em;height:1.5em;flex:none}} @media (min-width:2000px){.ssai-ico-flecha{width:1.6em;height:.9em}} @media (min-width:2000px){.ssai-cab{gap:calc(1.5vw / var(--zs));height:var(--cab);padding:0 var(--lado) 0 calc(var(--lado) * .85);border-bottom:1px solid rgba(232,178,74,.16);flex:none}} @media (min-width:2000px){.ssai-logo{flex:none}} @media (min-width:2000px){.ssai-logo img{height:calc(var(--cab) * .88);width:auto;margin-top:0}} @media (min-width:2000px){.ssai-panel{gap:clamp(12px,calc(1.4vw / var(--zs)),28px);flex:1}} @media (min-width:2000px){.ssai-menu ul{gap:clamp(12px,calc(1.55vw / var(--zs)),30px);margin:0;padding:0}} @media (min-width:2000px){.ssai-menu a{padding:.5em 0;font-size:clamp(11.5px,calc(.9vw / var(--zs)),16px);font-weight:400}} @media (min-width:2000px){.ssai-menu a[aria-current=page]::after{left:0;right:0;bottom:-2px;height:2px}} @media (min-width:2000px){.ssai-btn{gap:.75em;min-height:clamp(46px,calc(3.5vw / var(--zs)),66px);padding:0 clamp(18px,calc(2.1vw / var(--zs)),40px);border:1px solid rgba(255,226,150,.65);border-radius:3px;font:600 clamp(12.5px,calc(.98vw / var(--zs)),18px)/1.15 var(--sans);box-shadow:0 0 22px rgba(232,170,62,.22),inset 0 1px 0 rgba(255,255,255,.45)}} @media (min-width:2000px){.ssai-btn .ssai-ico{width:1.7em;height:1.7em}} @media (min-width:2000px){.ssai-btn .ssai-ico-flecha{width:1.5em;height:.85em}} @media (min-width:2000px){.ssai-btn-pildora{border-radius:999px}} @media (min-width:2000px){.ssai-btn-chico{min-height:clamp(36px,calc(2.7vw / var(--zs)),50px);font-size:clamp(11.5px,calc(.86vw / var(--zs)),16px);padding:0 clamp(16px,calc(1.9vw / var(--zs)),34px)}} @media (min-width:2000px){.ssai-solicitar{min-height:clamp(38px,calc(2.7vw / var(--zs)),50px);padding:0 clamp(14px,calc(1.55vw / var(--zs)),30px);font-size:clamp(11px,calc(.86vw / var(--zs)),15px);font-weight:600;border-radius:2px}} @media (min-width:2000px){.ssai-idiomas{gap:.45em;font-size:clamp(12px,calc(.92vw / var(--zs)),16px)}} @media (min-width:2000px){.ssai-idioma{padding:.35em .1em}} @media (min-width:2000px){.ssai-idioma[aria-current]{font-weight:600}} @media (min-width:2000px){.ssai-acceder{min-height:clamp(36px,calc(2.5vw / var(--zs)),46px);padding:0 clamp(14px,calc(1.3vw / var(--zs)),26px);border:1px solid var(--oro);border-radius:2px;font-size:clamp(11px,calc(.86vw / var(--zs)),15px);font-weight:600}} @media (min-width:2000px){.ssai-pie{gap:16px;min-height:clamp(46px,calc(4.1vw / var(--zs)),76px);padding:0 var(--lado) 0 calc(var(--lado) * .85);border-top:1px solid rgba(232,178,74,.22);flex:none}} @media (min-width:2000px){.ssai-pie p{margin:0;font-size:clamp(11px,calc(.98vw / var(--zs)),17px)}} @media (min-width:2000px){.ssai-titulo{font-family:var(--serif);font-weight:700;margin:0}} @media (min-width:2000px){.ssai-eyebrow{margin:0;font-size:clamp(11px,calc(.98vw / var(--zs)),18px);font-weight:400}} @media (min-width:2000px){.ssai-hero{flex:1;min-height:clamp(480px,calc(calc(100svh / var(--zs)) - var(--cab) - clamp(46px,calc(4.1vw / var(--zs)),76px)),1100px)}} @media (min-width:2000px){.ssai-hero-foto{inset:0}} @media (min-width:2000px){.ssai-hero-foto img{width:100%;height:100%}} @media (min-width:2000px){.ssai-hero::before{inset:0}} @media (min-width:2000px){.ssai-hero-texto{padding:calc(2vw / var(--zs)) var(--lado) calc(2vw / var(--zs)) calc(var(--lado) * .85);max-width:calc(calc(43vw / var(--zs)) + var(--lado))}} @media (min-width:2000px){.ssai-hero .ssai-eyebrow{margin-bottom:clamp(14px,calc(1.9vw / var(--zs)),34px)}} @media (min-width:2000px){.ssai-hero .ssai-titulo{font-size:clamp(34px,calc(4.5vw / var(--zs)),86px);font-weight:500}} @media (min-width:2000px){.ssai-lead{margin:clamp(16px,calc(1.7vw / var(--zs)),32px) 0 0;max-width:23.5em;font-size:clamp(15px,calc(1.28vw / var(--zs)),23px)}} @media (min-width:2000px){.ssai-botones{flex-wrap:wrap;gap:clamp(10px,calc(.85vw / var(--zs)),16px);margin-top:clamp(20px,calc(2.3vw / var(--zs)),44px)}} @media (min-width:2000px){@media (min-width:601px){.ssai-hero-texto .ssai-botones .ssai-btn{min-width:0}}} @media (min-width:2000px){@media (min-width:601px){.ssai-hero-texto .ssai-botones{width:max-content;max-width:calc(calc(100vw / var(--zs)) - var(--lado) * 1.85)}}} @media (min-width:2000px){.ssai-btn-video{padding-left:clamp(14px,calc(1.3vw / var(--zs)),26px)}} @media (min-width:2000px){@media (min-width:1700px) and (min-aspect-ratio:2/1){.ssai-hero{min-height:calc(calc(100svh / var(--zs)) - var(--cab) - clamp(46px,calc(4.1vw / var(--zs)),76px))}}} @media (min-width:2000px){@media (min-width:1700px) and (min-aspect-ratio:2/1){.ssai-hero-texto{padding-top:calc(1.9vh / var(--zs));padding-bottom:calc(1.9vh / var(--zs))}}} @media (min-width:2000px){@media (min-width:1700px) and (min-aspect-ratio:2/1){.ssai-hero .ssai-eyebrow{font-size:clamp(11px,min(calc(.98vw / var(--zs)),calc(1.15vh / var(--zs))),18px);margin-bottom:clamp(8px,min(calc(1.9vw / var(--zs)),calc(1.9vh / var(--zs))),34px)}}} @media (min-width:2000px){@media (min-width:1700px) and (min-aspect-ratio:2/1){.ssai-hero .ssai-titulo{font-size:clamp(30px,min(calc(4.5vw / var(--zs)),calc(5.5vh / var(--zs))),86px)}}} @media (min-width:2000px){@media (min-width:1700px) and (min-aspect-ratio:2/1){.ssai-hero .ssai-lead{font-size:clamp(13px,min(calc(1.28vw / var(--zs)),calc(1.55vh / var(--zs))),23px);margin-top:clamp(8px,min(calc(1.7vw / var(--zs)),calc(1.7vh / var(--zs))),32px)}}} @media (min-width:2000px){@media (min-width:1700px) and (min-aspect-ratio:2/1){.ssai-hero .ssai-botones{margin-top:clamp(12px,min(calc(2.3vw / var(--zs)),calc(2.2vh / var(--zs))),44px);gap:clamp(8px,min(calc(.85vw / var(--zs)),calc(.9vh / var(--zs))),16px)}}} @media (min-width:2000px){@media (min-width:1700px) and (min-aspect-ratio:2/1){.ssai-hero .ssai-btn{min-height:clamp(44px,min(calc(3.5vw / var(--zs)),calc(4.1vh / var(--zs))),66px)}}} @media (min-width:2000px){.ssai-como{width:100%;padding:clamp(8px,calc(.7vw / var(--zs)),14px) clamp(14px,calc(3vw / var(--zs)),56px) clamp(8px,calc(.8vw / var(--zs)),16px) clamp(14px,calc(4.2vw / var(--zs)),80px)}} @media (min-width:2000px){.ssai-como-cab .ssai-eyebrow{margin-left:calc(.2vw / var(--zs))}} @media (min-width:2000px){.ssai-como-cab .ssai-titulo{font-size:clamp(26px,calc(4.2vw / var(--zs)),80px);margin-top:calc(.1vw / var(--zs))}} @media (min-width:2000px){.ssai-sub{margin:calc(-.1vw / var(--zs)) 0 0 calc(.2vw / var(--zs));font-size:clamp(14px,calc(1.43vw / var(--zs)),26px)}} @media (min-width:2000px){.ssai-tabs{gap:clamp(4px,calc(.48vw / var(--zs)),10px);margin-top:clamp(10px,calc(1vw / var(--zs)),20px)}} @media (min-width:2000px){.ssai-tab{flex:auto;gap:clamp(8px,calc(1.5vw / var(--zs)),28px);min-height:clamp(40px,calc(3.1vw / var(--zs)),58px);padding:0 clamp(8px,calc(1vw / var(--zs)),20px);border:1px solid rgba(232,178,74,.28);border-radius:5px;font-family:var(--sans)}} @media (min-width:2000px){.ssai-tab:hover{border-color:rgba(232,178,74,.7)}} @media (min-width:2000px){.ssai-tab-n{font-variant-numeric:lining-nums;font-family:var(--serif);font-weight:500;font-size:clamp(15px,calc(1.6vw / var(--zs)),30px)}} @media (min-width:2000px){.ssai-tab-t{font-size:clamp(9.5px,calc(.82vw / var(--zs)),15px);font-weight:600}} @media (min-width:2000px){.ssai-tab[aria-selected=true]{border-color:#ffe29a;box-shadow:0 0 22px rgba(232,170,62,.4)}} @media (min-width:2000px){.ssai-pasos{margin-top:clamp(10px,calc(1vw / var(--zs)),20px)}} @media (min-width:2000px){.ssai-paso{column-gap:clamp(8px,calc(.5vw / var(--zs)),12px)}} @media (min-width:2000px){.ssai-paso+.ssai-paso{margin-top:clamp(28px,calc(4vw / var(--zs)),70px)}} @media (min-width:2000px){.ssai-js .ssai-paso+.ssai-paso{margin-top:0}} @media (min-width:2000px){.ssai-paso-num{margin:0 0 clamp(8px,calc(.9vw / var(--zs)),16px);font-size:clamp(12px,calc(1.2vw / var(--zs)),22px)}} @media (min-width:2000px){.ssai-paso-num b{font-variant-numeric:lining-nums;font-family:var(--serif);font-weight:500;font-size:clamp(20px,calc(2.15vw / var(--zs)),40px);margin:0 .2em}} @media (min-width:2000px){.ssai-paso-texto .ssai-titulo{font-size:clamp(26px,calc(4.15vw / var(--zs)),80px)}} @media (min-width:2000px){#paso-1 .ssai-paso-texto .ssai-titulo{font-size:clamp(26px,calc(4.55vw / var(--zs)),86px)}} @media (min-width:2000px){#paso-6 .ssai-paso-texto .ssai-titulo{font-size:clamp(24px,calc(2.75vw / var(--zs)),62px)}} @media (min-width:2000px){#paso-3 .ssai-paso-texto .ssai-titulo{font-size:clamp(26px,calc(3.55vw / var(--zs)),70px)}} @media (min-width:2000px){.ssai-paso-ancho .ssai-paso-texto .ssai-titulo{font-size:clamp(24px,calc(3.25vw / var(--zs)),70px)}} @media (min-width:2000px){.ssai-paso-ancho .ssai-paso-texto>p:not(.ssai-paso-num){font-size:clamp(14px,calc(1.5vw / var(--zs)),28px)}} @media (min-width:2000px){.ssai-paso-texto .ssai-btn-pildora{width:100%;font-size:clamp(12px,calc(.98vw / var(--zs)),19px);font-weight:700}} @media (min-width:2000px){.ssai-paso-texto p{margin:0}} @media (min-width:2000px){.ssai-paso-texto>p:not(.ssai-paso-num){margin-top:clamp(12px,calc(1.2vw / var(--zs)),22px);font-size:clamp(14px,calc(1.32vw / var(--zs)),24px)}} @media (min-width:2000px){.ssai-paso-texto .ssai-btn{margin-top:clamp(16px,calc(1.9vw / var(--zs)),36px)}} @media (min-width:2000px){.ssai-paso-texto .ssai-btn-pildora{min-height:clamp(46px,calc(4vw / var(--zs)),74px);font-size:clamp(12px,calc(1vw / var(--zs)),19px)}} @media (min-width:2000px){.ssai-tarjeta{border:2px solid #f1c24f;border-radius:clamp(8px,calc(.7vw / var(--zs)),14px);box-shadow:0 0 28px rgba(241,194,79,.28),inset 0 0 40px rgba(241,194,79,.08);padding:clamp(10px,calc(1.1vw / var(--zs)),22px)}} @media (min-width:2000px){.ssai-tarjeta:fullscreen{width:calc(calc(100vw / var(--zs)) / var(--z));height:calc(calc(100vh / var(--zs)) / var(--z));padding:calc(2vw / var(--zs));border-radius:0}} @media (min-width:2000px){.ssai-ampliar{right:calc(.2vw / var(--zs));bottom:calc(-1 * clamp(34px,calc(3vw / var(--zs)),56px));gap:.6em;border:0;font:400 clamp(11px,calc(.96vw / var(--zs)),17px)/1 var(--sans);padding:.5em}} @media (min-width:2000px){.ssai-ampliar .ssai-ico{width:1.1em;height:1.1em}} @media (min-width:2000px){.ssai-nav{gap:clamp(30px,calc(5vw / var(--zs)),96px);margin-top:clamp(22px,calc(1.6vw / var(--zs)),32px)}} @media (min-width:2000px){.ssai-flecha{width:clamp(44px,calc(3.2vw / var(--zs)),60px);height:clamp(44px,calc(2.6vw / var(--zs)),48px);border:0;padding:0}} @media (min-width:2000px){.ssai-flecha .ssai-ico{width:clamp(26px,calc(2.1vw / var(--zs)),40px);height:auto}} @media (min-width:2000px){.ssai-contador{margin:0;font-size:clamp(15px,calc(1.35vw / var(--zs)),24px)}} @media (min-width:2000px){.ssai-t-plano{gap:clamp(10px,calc(1.2vw / var(--zs)),24px);padding:clamp(10px,calc(1.3vw / var(--zs)),26px)}} @media (min-width:2000px){.ssai-t-plano-izq{flex-direction:column}} @media (min-width:2000px){.ssai-t-logo{width:clamp(80px,calc(8.6vw / var(--zs)),160px);margin:0 auto clamp(4px,calc(.8vw / var(--zs)),14px)}} @media (min-width:2000px){.ssai-t-logo img{width:100%;height:auto}} @media (min-width:2000px){.ssai-t-plano-izq .ssai-eyebrow{font-size:clamp(9px,calc(.82vw / var(--zs)),15px);margin-top:clamp(2px,calc(.4vw / var(--zs)),8px)}} @media (min-width:2000px){.ssai-t-plano-izq .ssai-titulo{font-size:clamp(17px,calc(2.4vw / var(--zs)),46px);margin-top:.5em}} @media (min-width:2000px){.ssai-t-texto{margin:.8em 0 0;font-size:clamp(10px,calc(.9vw / var(--zs)),16px)}} @media (min-width:2000px){.ssai-t-plano-izq .ssai-btn{margin-top:clamp(10px,calc(1.2vw / var(--zs)),22px);min-height:clamp(32px,calc(2.6vw / var(--zs)),48px);padding:0 clamp(14px,calc(1.6vw / var(--zs)),30px);font-size:clamp(10px,calc(.86vw / var(--zs)),15px)}} @media (min-width:2000px){.ssai-t-plano-der{flex-direction:column;border:1px solid rgba(241,194,79,.45);border-radius:6px;padding:clamp(8px,calc(1vw / var(--zs)),18px)}} @media (min-width:2000px){.ssai-t-plano-cab{gap:.9em;margin:0;font-size:clamp(10px,calc(.88vw / var(--zs)),16px)}} @media (min-width:2000px){.ssai-t-plano-cab .ssai-ico{width:2.4em;height:2.8em}} @media (min-width:2000px){.ssai-t-plano-cab span{flex-direction:column}} @media (min-width:2000px){.ssai-t-plano-cab b{font-weight:400}} @media (min-width:2000px){.ssai-t-plano-cab small{font-size:.85em}} @media (min-width:2000px){.ssai-t-plano-img{margin-top:clamp(6px,calc(.8vw / var(--zs)),14px);width:100%;border:1px dashed rgba(241,194,79,.55);padding:clamp(4px,calc(.5vw / var(--zs)),8px);border-radius:2px}} @media (min-width:2000px){.ssai-t-plano-img img{width:auto;max-width:100%;max-height:calc(15.5vw / var(--zs));margin:0 auto}} @media (min-width:2000px){.ssai-t-archivo{margin-top:clamp(6px,calc(.9vw / var(--zs)),16px);width:min(100%,24em);border:1px solid var(--oro1);border-radius:999px;padding:.55em 1em;font-size:clamp(9px,calc(.82vw / var(--zs)),15px)}} @media (min-width:2000px){.ssai-t-nota{margin:.4em 0 0;font-size:clamp(8px,calc(.72vw / var(--zs)),13px)}} @media (min-width:2000px){.ssai-t-iso{flex-direction:column;padding-bottom:clamp(10px,calc(1.3vw / var(--zs)),24px)}} @media (min-width:2000px){.ssai-t-iso-img{width:min(66%,640px)}} @media (min-width:2000px){.ssai-t-iso-img img{width:100%;height:auto;max-height:clamp(220px,calc(34vw / var(--zs)),490px)}} @media (min-width:2000px){.ssai-t-leyenda{margin:clamp(4px,calc(.4vw / var(--zs)),8px) 0 .5em;font-size:clamp(11px,calc(1.05vw / var(--zs)),20px)}} @media (min-width:2000px){.ssai-t-iso .ssai-btn{margin-top:clamp(5px,calc(.55vw / var(--zs)),10px);min-width:clamp(180px,calc(21vw / var(--zs)),400px);min-height:clamp(32px,calc(2.55vw / var(--zs)),48px);font-size:clamp(11px,calc(.96vw / var(--zs)),18px)}} @media (min-width:2000px){.ssai-t-iso .ssai-btn-chico{min-width:clamp(150px,calc(21.6vw / var(--zs)),360px);width:auto}} @media (min-width:2000px){.ssai-t-presupuesto{padding:clamp(10px,calc(1.3vw / var(--zs)),24px) clamp(10px,calc(1.2vw / var(--zs)),22px) clamp(12px,calc(1.2vw / var(--zs)),22px)}} @media (min-width:2000px){.ssai-t-etiqueta{margin:0 0 .35em;font-size:clamp(11px,calc(1.08vw / var(--zs)),20px)}} @media (min-width:2000px){.ssai-t-importe-fila{gap:clamp(12px,calc(1.9vw / var(--zs)),36px);margin-bottom:clamp(8px,calc(.9vw / var(--zs)),16px)}} @media (min-width:2000px){.ssai-t-importe{margin:0;flex:0 1 clamp(180px,calc(32.3vw / var(--zs)),540px);padding:.08em 1.1em;border:2px solid #fff;border-radius:10px;font-size:clamp(24px,calc(3.1vw / var(--zs)),58px)}} @media (min-width:2000px){.ssai-t-ayuda{margin:0;max-width:11em;font-size:clamp(11px,calc(1.2vw / var(--zs)),22px)}} @media (min-width:2000px){.ssai-sectores{margin:0;padding:0;gap:clamp(5px,calc(.4vw / var(--zs)),8px)}} @media (min-width:2000px){.ssai-sectores li{border:1px solid rgba(255,255,255,.35);border-radius:4px}} @media (min-width:2000px){.ssai-sectores img{width:100%;height:100%}} @media (min-width:2000px){.ssai-sectores span{left:0;right:0;bottom:0;min-height:32%;padding:.3em 12%;font-weight:600;font-size:clamp(8px,calc(.86vw / var(--zs)),15px)}} @media (min-width:2000px){.ssai-t-generar{width:max-content;margin:clamp(8px,calc(.9vw / var(--zs)),16px) 0 0 auto;min-height:clamp(34px,calc(3vw / var(--zs)),56px);font-size:clamp(11px,calc(1.02vw / var(--zs)),19px)}} @media (min-width:2000px){.ssai-t-renders-col{padding-bottom:clamp(44px,calc(3.8vw / var(--zs)),70px)}} @media (min-width:2000px){.ssai-t-renders{gap:clamp(5px,calc(.55vw / var(--zs)),10px);padding:clamp(5px,calc(.5vw / var(--zs)),9px)}} @media (min-width:2000px){.ssai-t-renders figure,.ssai-res-renders figure{margin:0;border:1px solid rgba(241,194,79,.5);border-radius:3px}} @media (min-width:2000px){.ssai-t-renders figure img,.ssai-res-renders figure img{width:100%;height:100%}} @media (min-width:2000px){.ssai-t-renders figure:not(.ssai-r-grande) figcaption{max-width:100%;font-size:clamp(10px,calc(.62vw / var(--zs)),12px);padding:.3em .6em}} @media (min-width:2000px){.ssai-t-renders figcaption,.ssai-res-renders figcaption{left:0;bottom:0;padding:.35em .9em;font-size:clamp(9px,calc(.9vw / var(--zs)),16px)}} @media (min-width:2000px){.ssai-t-renders-pie{right:0;bottom:0;gap:clamp(12px,calc(2vw / var(--zs)),34px)}} @media (min-width:2000px){.ssai-t-renders-pie .ssai-btn{min-width:clamp(160px,calc(17.5vw / var(--zs)),300px)}} @media (min-width:2000px){.ssai-t-renders .ssai-corto{left:0;bottom:0;padding:.3em .6em;font-size:clamp(10px,calc(.62vw / var(--zs)),12px)}} @media (min-width:2000px){.ssai-t-materiales{padding:clamp(6px,calc(.6vw / var(--zs)),12px) clamp(8px,calc(.8vw / var(--zs)),14px) clamp(5px,calc(.5vw / var(--zs)),9px)}} @media (min-width:2000px){.ssai-t-mat-cab{gap:clamp(8px,calc(.8vw / var(--zs)),14px);margin-bottom:clamp(2px,calc(.3vw / var(--zs)),6px)}} @media (min-width:2000px){.ssai-t-mat-cab>div{flex:1}} @media (min-width:2000px){.ssai-t-mat-cab>.ssai-filtro{flex:none}} @media (min-width:2000px){.ssai-t-mat-cab .ssai-titulo{font-size:clamp(17px,calc(1.95vw / var(--zs)),36px)}} @media (min-width:2000px){.ssai-t-mat-cab p{margin:.15em 0 0;font-size:clamp(8px,calc(.9vw / var(--zs)),16px);font-weight:600}} @media (min-width:2000px){.ssai-t-mat-cab p b{font-weight:600}} @media (min-width:2000px){.ssai-filtro{flex:none}} @media (min-width:2000px){.ssai-filtro select{min-height:clamp(28px,calc(2.4vw / var(--zs)),44px);padding:0 2.4em 0 1.3em;border:1px solid rgba(255,226,150,.65);border-radius:3px;font:600 clamp(9px,calc(.78vw / var(--zs)),14px)/1 var(--sans)}} @media (min-width:2000px){.ssai-filtro .ssai-ico{right:.9em;width:1em;height:.7em}} @media (min-width:2000px){.ssai-t-mat-cab .ssai-btn-descarga{flex:none;min-height:clamp(28px,calc(2.4vw / var(--zs)),44px);padding:0 clamp(10px,calc(1.1vw / var(--zs)),20px);font-size:clamp(9px,calc(.78vw / var(--zs)),14px);border-radius:3px;gap:.7em}} @media (min-width:2000px){.ssai-t-mat-cab .ssai-btn-descarga .ssai-ico{width:1.5em;height:1.5em}} @media (min-width:2000px){.ssai-tabla{width:100%;border-collapse:collapse;font-size:clamp(9px,calc(.9vw / var(--zs)),16px);border:1px solid rgba(241,194,79,.4)}} @media (min-width:2000px){.ssai-tabla th,.ssai-tabla td{padding:0;border-bottom:1px solid rgba(255,255,255,.14);font-weight:400}} @media (min-width:2000px){.ssai-tabla thead th{padding:.3em 0;font-size:.95em}} @media (min-width:2000px){.ssai-tabla tbody th{gap:clamp(6px,calc(.9vw / var(--zs)),16px);font-size:.95em}} @media (min-width:2000px){.ssai-tabla tbody th img{width:clamp(70px,calc(12vw / var(--zs)),200px);height:clamp(24px,calc(2.55vw / var(--zs)),46px);flex:none}} @media (min-width:2000px){.ssai-tabla tbody td{padding:0 .4em}} @media (min-width:2000px){.ssai-mosaico{flex:none;width:clamp(70px,calc(12vw / var(--zs)),200px);height:clamp(20px,calc(2.15vw / var(--zs)),38px);gap:clamp(2px,calc(.25vw / var(--zs)),4px);margin:clamp(2px,calc(.2vw / var(--zs)),4px) 0 clamp(2px,calc(.2vw / var(--zs)),4px) clamp(3px,calc(.4vw / var(--zs)),6px)}} @media (min-width:2000px){.ssai-mosaico i{flex:1;border-radius:clamp(2px,calc(.25vw / var(--zs)),4px)}} @media (min-width:2000px){.ssai-tabla tbody th .ssai-mosaico img{top:0;height:100%;width:300%;max-width:none}} @media (min-width:2000px){.ssai-mosaico i:nth-child(1) img{left:0}} @media (min-width:2000px){.ssai-mosaico i:nth-child(2) img{left:-100%}} @media (min-width:2000px){.ssai-mosaico i:nth-child(3) img{left:-200%}} @media (min-width:2000px){.ssai-tabla thead th:first-child{padding-left:clamp(110px,calc(16vw / var(--zs)),260px)}} @media (min-width:2000px){.ssai-tabla td:last-child,.ssai-tabla th:last-child{width:clamp(36px,calc(5.6vw / var(--zs)),100px)}} @media (min-width:2000px){.ssai-ficha{width:clamp(20px,calc(2.5vw / var(--zs)),42px);height:clamp(20px,calc(2.5vw / var(--zs)),42px);border:1px solid var(--oro1);border-radius:4px}} @media (min-width:2000px){.ssai-ficha .ssai-ico{width:60%;height:60%}} @media (min-width:2000px){.ssai-totales{margin-top:clamp(3px,calc(.4vw / var(--zs)),8px);border:1px solid rgba(241,194,79,.55);border-radius:5px;padding:clamp(3px,calc(.4vw / var(--zs)),8px) 0}} @media (min-width:2000px){.ssai-totales p{margin:0;gap:clamp(8px,calc(1.2vw / var(--zs)),22px);font-size:clamp(8px,calc(.9vw / var(--zs)),16px)}} @media (min-width:2000px){.ssai-totales p+p{border-left:1px solid rgba(255,255,255,.5)}} @media (min-width:2000px){.ssai-totales .ssai-ico{width:clamp(26px,calc(3.4vw / var(--zs)),60px);height:auto}} @media (min-width:2000px){.ssai-totales span{flex-direction:column}} @media (min-width:2000px){.ssai-totales b{font-family:var(--sans);font-weight:700;font-size:2.1em}} @media (min-width:2000px){.ssai-t-pie-nota{margin:.2em 0 0;font-size:clamp(7.5px,calc(.76vw / var(--zs)),14px)}} @media (min-width:2000px){.ssai-t-resumen{gap:clamp(5px,calc(.5vw / var(--zs)),9px);padding:clamp(6px,calc(.7vw / var(--zs)),12px) clamp(8px,calc(.8vw / var(--zs)),14px) clamp(8px,calc(.8vw / var(--zs)),14px)}} @media (min-width:2000px){.ssai-t-resumen>.ssai-titulo{font-size:clamp(16px,calc(1.95vw / var(--zs)),36px)}} @media (min-width:2000px){.ssai-t-resumen h4{margin:0;font-size:clamp(8px,calc(.9vw / var(--zs)),16px);font-weight:400}} @media (min-width:2000px){.ssai-t-resumen>div{border:1px solid rgba(241,194,79,.55);border-radius:4px;padding:clamp(4px,calc(.6vw / var(--zs)),10px);min-width:0}} @media (min-width:2000px){.ssai-res-vision{margin:0;font-size:clamp(8px,calc(.9vw / var(--zs)),16px)}} @media (min-width:2000px){.ssai-res-distribucion img{width:auto;max-width:92%;max-height:calc(14.5vw / var(--zs));margin:0 auto}} @media (min-width:2000px){.ssai-res-renders>div{gap:clamp(3px,calc(.4vw / var(--zs)),7px);margin-top:clamp(3px,calc(.4vw / var(--zs)),7px)}} @media (min-width:2000px){.ssai-res-renders figcaption{padding:.15em 0;font-size:clamp(7px,calc(.72vw / var(--zs)),13px)}} @media (min-width:2000px){.ssai-res-renders figure:not(.ssai-r-grande){flex-direction:column}} @media (min-width:2000px){.ssai-res-materiales ul{margin:clamp(3px,calc(.4vw / var(--zs)),7px) 0 0;padding:0;gap:clamp(3px,calc(.35vw / var(--zs)),6px)}} @media (min-width:2000px){.ssai-res-materiales img{width:100%;height:auto;border-radius:2px}} @media (min-width:2000px){.ssai-res-materiales p{margin:.4em 0 0;font-size:clamp(7.5px,calc(.8vw / var(--zs)),14px)}} @media (min-width:2000px){.ssai-poster{margin-top:clamp(3px,calc(.4vw / var(--zs)),7px);border-radius:3px}} @media (min-width:2000px){.ssai-poster img{width:100%;height:auto}} @media (min-width:2000px){.ssai-poster-play{inset:0}} @media (min-width:2000px){.ssai-poster-play .ssai-ico{width:20%;height:auto}} @media (min-width:2000px){button.ssai-poster{width:100%;padding:0;border:0;font:inherit}} @media (min-width:2000px){.ssai-res-video .ssai-btn{width:max-content;margin:clamp(3px,calc(.4vw / var(--zs)),7px) auto 0;min-height:clamp(26px,calc(2.2vw / var(--zs)),40px);font-size:clamp(9px,calc(.9vw / var(--zs)),16px)}} @media (min-width:2000px){.ssai-res-estimacion .ssai-res-total{gap:clamp(8px,calc(1.5vw / var(--zs)),28px);margin:clamp(4px,calc(.7vw / var(--zs)),12px) 0 .2em;padding-bottom:.3em;border-bottom:1px solid rgba(255,255,255,.55)}} @media (min-width:2000px){.ssai-res-estimacion .ssai-ico{width:clamp(24px,calc(3.1vw / var(--zs)),54px);height:auto}} @media (min-width:2000px){.ssai-res-estimacion b{font-size:clamp(17px,calc(2.6vw / var(--zs)),48px);font-weight:700}} @media (min-width:2000px){.ssai-res-estimacion p{margin:0;font-size:clamp(8px,calc(.92vw / var(--zs)),17px)}} @media (min-width:2000px){.ssai-res-estimacion .ssai-res-total{font-size:1em}} @media (min-width:2000px){.ssai-res-estimacion .ssai-res-nota{margin-top:.5em;font-size:clamp(6.5px,calc(.62vw / var(--zs)),11px)}} @media (min-width:2000px){.ssai-prensa-premio{gap:clamp(18px,calc(2.6vw / var(--zs)),50px);padding:clamp(14px,calc(1.7vw / var(--zs)),32px) var(--lado) clamp(14px,calc(1.4vw / var(--zs)),26px) calc(var(--lado) * .85)}} @media (min-width:2000px){.ssai-eyebrow-linea{gap:1.2em}} @media (min-width:2000px){.ssai-eyebrow-linea::after{flex:1;max-width:14em;height:1px}} @media (min-width:2000px){.ssai-premios{margin:clamp(10px,calc(1.2vw / var(--zs)),22px) 0 0;font-size:clamp(11px,calc(1.4vw / var(--zs)),26px)}} @media (min-width:2000px){.ssai-prensa-premio{flex:1 0 auto}} @media (min-width:2000px){.ssai-prensa-texto .ssai-titulo{font-size:clamp(32px,calc(4.9vw / var(--zs)),92px);margin-top:.15em}} @media (min-width:2000px){.ssai-prensa-texto .ssai-lead{font-size:clamp(14px,calc(1.55vw / var(--zs)),28px);max-width:27em;margin-top:clamp(10px,calc(1.1vw / var(--zs)),20px)}} @media (min-width:2000px){.ssai-prensa-cuando{margin-top:clamp(10px,calc(1.1vw / var(--zs)),20px);padding-top:clamp(8px,calc(.8vw / var(--zs)),14px);border-top:1px solid rgba(232,178,74,.55)}} @media (min-width:2000px){.ssai-prensa-cuando p{margin:0}} @media (min-width:2000px){.ssai-fecha{font-family:var(--sans);font-weight:600;font-size:clamp(14px,calc(1.55vw / var(--zs)),28px)}} @media (min-width:2000px){.ssai-lugar{font-size:clamp(11px,calc(1.28vw / var(--zs)),23px);margin-top:.2em!important}} @media (min-width:2000px){.ssai-prensa-texto .ssai-botones{margin-top:clamp(12px,calc(1.2vw / var(--zs)),22px)}} @media (min-width:2000px){.ssai-prensa-texto .ssai-btn{min-height:clamp(42px,calc(3vw / var(--zs)),56px);font-size:clamp(12px,calc(1.1vw / var(--zs)),20px)}} @media (min-width:2000px){.ssai-prensa-imagen{margin:0;padding:0;border-radius:3px;box-shadow:0 0 40px rgba(0,0,0,.6)}} @media (min-width:2000px){.ssai-prensa-imagen img{width:100%;height:auto}} @media (min-width:2000px){.ssai-proximas{padding:clamp(10px,calc(1vw / var(--zs)),18px) var(--lado) clamp(14px,calc(1.2vw / var(--zs)),22px) calc(var(--lado) * .85);border-top:1px solid rgba(232,178,74,.5);margin-top:auto}} @media (min-width:2000px){.ssai-proximas .ssai-eyebrow{font-size:clamp(11px,calc(1.1vw / var(--zs)),20px);font-weight:400}} @media (min-width:2000px){.ssai-proximas .ssai-eyebrow::after{max-width:20em}} @media (min-width:2000px){.ssai-proximas ul{margin:clamp(8px,calc(1vw / var(--zs)),18px) 0 0;padding:0;gap:clamp(10px,calc(1.3vw / var(--zs)),24px)}} @media (min-width:2000px){.ssai-proximas li{border:1px solid rgba(241,194,79,.8);border-radius:6px;padding:clamp(8px,calc(.9vw / var(--zs)),16px) 1em}} @media (min-width:2000px){.ssai-proximas h3{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(18px,calc(2.4vw / var(--zs)),44px);padding-bottom:.15em;border-bottom:1px solid rgba(232,178,74,.4);margin-inline:6%}} @media (min-width:2000px){.ssai-proximas li p{margin:.5em 0 0;font-size:clamp(11px,calc(1.05vw / var(--zs)),19px)}} @media (min-width:2000px){.ssai-marcador{flex:1;flex-direction:column;padding:64px var(--lado)}} @media (min-width:2000px){.ssai-marcador h1{font-family:var(--serif);font-size:clamp(30px,calc(4vw / var(--zs)),70px);margin:0 0 .4em}} @media (min-width:2000px){.ssai-video{border:2px solid #f1c24f;border-radius:10px;padding:0;width:min(calc(94vw / var(--zs)),1100px);max-height:calc(92vh / var(--zs))}} @media (min-width:2000px){.ssai-video video{width:100%;max-height:calc(88vh / var(--zs))}} @media (min-width:2000px){.ssai-video-cerrar{right:10px;top:10px;width:40px;height:40px;border:1px solid #f1c24f;border-radius:50%;font-size:26px}} @media (min-width:2000px){.ssai-visor{border:2px solid #f1c24f;border-radius:10px;padding:0;width:auto;max-width:calc(94vw / var(--zs));max-height:calc(94vh / var(--zs))}} @media (min-width:2000px){.ssai-visor-foto{margin:0 auto}} @media (min-width:2000px){.ssai-visor img{width:auto;height:auto;max-width:calc(calc(94vw / var(--zs)) - 4px);max-height:calc(calc(94vh / var(--zs)) - 74px);margin:auto}} @media (min-width:2000px){#ssai-visor-imagen .ssai-visor-foto{padding-top:54px}} @media (min-width:2000px){#ssai-visor-imagen img{max-height:calc(calc(94vh / var(--zs)) - 60px)}} @media (min-width:2000px){.ssai-visor-pie{margin:0;left:0;bottom:0;padding:.6em 1em;font:400 clamp(11px,calc(.9vw / var(--zs)),16px)/1.2 var(--sans)}} @media (min-width:2000px){.ssai-visor .ssai-video-cerrar{top:10px;right:10px}} @media (min-width:2000px){.ssai-visor-nav{gap:clamp(16px,calc(2vw / var(--zs)),40px);height:70px}} @media (min-width:2000px){.ssai-visor.es-una img{max-height:calc(calc(94vh / var(--zs)) - 4px)}} @media (min-width:2000px){.ssai .aviso-cookies{inset:auto 0 0 0;flex-wrap:wrap;gap:10px 16px;padding:14px 16px;border-top:1px solid var(--oro);font-size:.95rem}} @media (min-width:2000px){.ssai .aviso-cookies{max-height:calc(100svh / var(--zs))}} @media (min-width:2000px){.ssai .aviso-cookies p{margin:0;max-width:46rem}} @media (min-width:2000px){.ssai .aviso-cookies form{margin:0}} @media (min-width:2000px){.ssai .aviso-cookies button{min-height:44px;padding:0 1.4rem;border:1px solid var(--oro);font:500 .8rem/1 var(--sans)}} @media (min-width:2000px){.ssai .aviso-cookies .aviso-cookies-configurar{font-size:.8rem}} @media (min-width:2000px){body:has(.aviso-cookies){padding-bottom:90px}} @media (min-width:2000px){.ssai-pie-legal{flex-wrap:wrap;gap:4px 18px;font-size:clamp(10px,calc(.8vw / var(--zs)),14px)}} @media (min-width:2000px){@media (min-width:901px){html[lang=en] .ssai-como-cab .ssai-titulo{font-size:min(clamp(26px,calc(4.2vw / var(--zs)),80px),3.7cqw)}}} @media (min-width:2000px){@media (min-width:901px){html[lang=en] .ssai-paso-texto .ssai-titulo{font-size:min(clamp(26px,calc(4.15vw / var(--zs)),80px),11.6cqw)}}} @media (min-width:2000px){@media (min-width:901px){html[lang=en] #paso-1 .ssai-paso-texto .ssai-titulo{font-size:min(clamp(26px,calc(4.55vw / var(--zs)),86px),11.6cqw)}}} @media (min-width:2000px){@media (min-width:901px){html[lang=en] #paso-6 .ssai-paso-texto .ssai-titulo{font-size:min(clamp(24px,calc(2.75vw / var(--zs)),62px),11.6cqw)}}} @media (min-width:2000px){@media (min-width:901px){html[lang=en] #paso-3 .ssai-paso-texto .ssai-titulo{font-size:min(clamp(26px,calc(3.55vw / var(--zs)),70px),11.6cqw)}}} @media (min-width:2000px){@media (min-width:901px){html[lang=en] .ssai-paso-ancho .ssai-paso-texto .ssai-titulo{font-size:min(clamp(24px,calc(3.25vw / var(--zs)),70px),11.6cqw)}}} @media (min-width:2000px){@media (min-width:901px){html[lang=es] .ssai-paso-texto .ssai-titulo{font-size:min(clamp(26px,calc(4.15vw / var(--zs)),80px),13.8cqw)}}} @media (min-width:2000px){@media (min-width:901px){html[lang=es] #paso-1 .ssai-paso-texto .ssai-titulo{font-size:min(clamp(26px,calc(4.55vw / var(--zs)),86px),13.8cqw)}}} @media (min-width:2000px){@media (min-width:901px){html[lang=es] #paso-6 .ssai-paso-texto .ssai-titulo{font-size:min(clamp(24px,calc(2.75vw / var(--zs)),62px),10cqw)}}} @media (min-width:2000px){@media (min-width:901px){html[lang=es] #paso-3 .ssai-paso-texto .ssai-titulo{font-size:min(clamp(26px,calc(3.55vw / var(--zs)),70px),12.4cqw)}}} @media (min-width:2000px){@media (min-width:901px){html[lang=es] .ssai-paso-ancho .ssai-paso-texto .ssai-titulo{font-size:min(clamp(24px,calc(3.25vw / var(--zs)),70px),13.8cqw)}}} @media (min-width:2000px){@media (min-width:901px){#paso-6 .ssai-paso-texto .ssai-btn-pildora{font-size:clamp(11px,calc(.88vw / var(--zs)),17px)}}} @media (min-width:2000px){@media (min-width:1101px){html[lang=en] #paso-1 .ssai-paso-texto .ssai-titulo{font-size:max(min(clamp(26px,calc(4.55vw / var(--zs)),86px),11.6cqw),min(calc(3.61vw / var(--zs)),52px))}}} @media (min-width:2000px){@media (min-width:1101px){html[lang=es] #paso-1 .ssai-paso-texto .ssai-titulo{font-size:max(min(clamp(26px,calc(4.55vw / var(--zs)),86px),13.8cqw),min(calc(3.61vw / var(--zs)),52px))}}} @media (min-width:2000px){@media (min-width:1101px){html[lang=en] #paso-2 .ssai-paso-texto .ssai-titulo{font-size:max(min(clamp(26px,calc(4.15vw / var(--zs)),80px),11.6cqw),min(calc(3.61vw / var(--zs)),52px))}}} @media (min-width:2000px){@media (min-width:1101px){html[lang=es] #paso-2 .ssai-paso-texto .ssai-titulo{font-size:max(min(clamp(26px,calc(4.15vw / var(--zs)),80px),13.8cqw),min(calc(3.61vw / var(--zs)),52px))}}} @media (min-width:2000px){@media (min-width:1101px){html[lang=es] #paso-4 .ssai-paso-texto .ssai-titulo{font-size:max(min(clamp(24px,calc(3.25vw / var(--zs)),70px),13.8cqw),min(calc(3.61vw / var(--zs)),52px))}}} @media (min-width:2000px){@media (min-width:1101px){html[lang=en] .ssai-hero-texto{max-width:calc(calc(47vw / var(--zs)) + var(--lado))}}} @media (min-width:2000px){.ssai-legal{width:100%;max-width:860px;margin:0 auto;padding:clamp(28px,calc(5vw / var(--zs)),72px) var(--lado) clamp(36px,calc(6vw / var(--zs)),90px)}} @media (min-width:2000px){.ssai-legal h1{font-family:var(--serif);font-weight:500;font-size:clamp(28px,calc(3.4vw / var(--zs)),52px);margin:0 0 .7em}} @media (min-width:2000px){.ssai-legal h2{font-family:var(--serif);font-weight:500;font-size:clamp(20px,calc(1.7vw / var(--zs)),28px);margin:1.6em 0 .5em}} @media (min-width:2000px){.ssai-legal p,.ssai-legal li{font-size:clamp(15px,calc(1.05vw / var(--zs)),18px)}} @media (min-width:2000px){@media (min-width:1201px){.ssai-hero .ssai-lead{max-width:27em}}} @media (min-width:2000px){@media (min-width:1201px){.ssai-t-plano-img img{max-height:calc(17vw / var(--zs))}}} @media (min-width:2000px){@media (min-width:901px){.ssai-t-plano-izq .ssai-titulo{max-width:8.3em;font-size:clamp(17px,calc(2.1vw / var(--zs)),40px)}}} @media (min-width:2000px){@media (min-width:901px){.ssai-nav{padding-left:27.2%}}} @media (min-width:2000px){@media (min-width:901px){.ssai-nav [data-ssai-prev]{left:27.2%}}} @media (min-width:2000px){@media (min-width:901px){.ssai-ampliar{bottom:calc(-1 * (clamp(22px,calc(1.6vw / var(--zs)),32px) + clamp(22px,calc(1.3vw / var(--zs)),24px)) - 1em)}}} @media (min-width:2000px){.ssai-paso-texto .ssai-btn-paso{width:100%;min-height:clamp(46px,calc(4vw / var(--zs)),74px);font-size:clamp(12px,calc(1.12vw / var(--zs)),20px);font-weight:700}} @media (min-width:2000px){.ssai-btn-paso .ssai-ico{width:1.7em;height:1.7em}} @media (min-width:2000px){.ssai-t-plano-img{width:auto;max-width:100%;border:2px dotted rgba(241,194,79,.85);padding:clamp(3px,calc(.35vw / var(--zs)),6px)}} @media (min-width:2000px){@media (min-width:901px){.ssai-idiomas a{min-width:24px;min-height:24px}}} @media (min-width:2000px){@media (min-width:901px){.ssai-pie-legal a{min-height:24px}}} @media (min-width:2000px){@media (min-width:1701px){.ssai-menu ul{gap:16px}}} @media (min-width:2000px){@media (min-width:1701px){.ssai-menu a{font-size:13px}}} @media (min-width:2000px){@media (min-width:1701px){.ssai-panel{gap:16px}}} @media (min-width:2000px){@media (min-width:1701px){.ssai-solicitar{padding:0 16px;font-size:12.5px}}} @media (min-width:2000px){@media (min-width:1701px){.ssai-acceder{padding:0 16px;font-size:12.5px}}} @media (min-width:2000px){@media (min-width:1101px){.ssai-prensa-texto .ssai-titulo{font-size:clamp(32px,calc(4vw / var(--zs)),76px)}}} @media (min-width:2000px){.ssai-legal .cookies-lista table{width:100%;min-width:32em;border-collapse:collapse}} @media (min-width:2000px){.ssai-legal .cookies-lista th:nth-child(1){width:32%}} @media (min-width:2000px){.ssai-legal .cookies-lista th:nth-child(2){width:25%}} @media (min-width:2000px){.ssai-legal .cookies-lista th:nth-child(3){width:22%}} @media (min-width:2000px){.ssai-legal .cookies-lista th:nth-child(4){width:21%}} @media (min-width:2000px){.ssai-legal .cookies-lista th,.ssai-legal .cookies-lista td{padding:.5em .6em;border-bottom:1px solid rgba(255,255,255,.18)}} @media (min-width:2000px){.ssai-legal .cookies-lista th code{font-size:.9em}} @media (min-width:2000px){.ssai .aviso-cookies .aviso-cookies-configurar{min-height:44px;padding:0 .4rem}} @media (min-width:2000px){@media (min-width:1400px){#paso-2 .ssai-paso-texto,#paso-3 .ssai-paso-texto{padding-right:28px}}} @media (min-width:2000px){@media (min-width:1201px) and (max-height:940px){.ssai-t-iso:not(:fullscreen){padding:8px 8px 6px}}} @media (min-width:2000px){@media (min-width:1201px) and (max-height:940px){.ssai-t-iso .ssai-t-leyenda{margin:2px 0 .3em}}} @media (min-width:2000px){.ssai-tabla thead th:last-child,.ssai-tabla tbody td:last-child{padding-right:.7em}} @media (min-width:2000px){@media (min-width:1200px){.ssai-hero-foto{left:22%}}} @media (min-width:2000px){@media (min-width:1201px) and (max-height:940px){.ssai-paso>.ssai-t-renders-col{flex-direction:column}}} @media (min-width:2000px){@media (min-width:1201px) and (max-height:940px){.ssai-t-renders-col>.ssai-t-renders{flex:1 1 auto}}} @media (min-width:2000px){@media (min-width:1201px) and (max-height:940px){.ssai-nav{margin-top:4px}}} @media (min-width:2000px){@media (min-width:1201px) and (max-height:940px){.ssai-ampliar{bottom:calc(-1 * (4px + clamp(22px,calc(1.3vw / var(--zs)),24px)) - 1em)}}} @media (min-width:2000px){@media (min-width:1201px) and (max-height:940px){.ssai-t-iso:not(:fullscreen){column-gap:clamp(8px,calc(1vw / var(--zs)),16px)}}} @media (min-width:2000px){@media (min-width:1201px) and (max-height:940px){.ssai-t-renders:not(:fullscreen) .ssai-r-grande{min-height:0}}} @media (min-width:2000px){@media (min-width:1201px) and (max-height:940px){.ssai-t-plano-der .ssai-t-plano-img{flex:1 1 0;min-height:0;width:100%}}} @media (min-width:2000px){@media (min-width:1201px) and (max-height:940px){.ssai-t-plano-img picture{width:100%;height:100%}}} @media (min-width:2000px){@media (min-width:1201px) and (max-height:940px){.ssai-t-plano-img img{width:100%;height:100%;max-height:none}}} @media (min-width:2000px){@media (min-width:1201px) and (max-height:940px){.ssai-t-materiales:not(:fullscreen){flex-direction:column}}} @media (min-width:2000px){@media (min-width:1201px) and (max-height:940px){.ssai-t-materiales:not(:fullscreen) .ssai-tabla{flex:1 1 auto}}} @media (min-width:2000px){@media (min-width:1201px) and (max-height:940px){.ssai-t-materiales:not(:fullscreen) .ssai-tabla tbody th>span:not(.ssai-mosaico){margin-left:clamp(6px,calc(.9vw / var(--zs)),16px);max-width:calc(100% - clamp(70px,calc(12vw / var(--zs)),200px) - clamp(3px,calc(.4vw / var(--zs)),6px) - clamp(6px,calc(.9vw / var(--zs)),16px) - 4px)}}} @media (min-width:2000px){@media (min-width:1400px){.ssai-paso-ancho .ssai-paso-texto>p:not(.ssai-paso-num){padding-right:26px}}} @media (min-width:2000px){@media (min-width:1400px){.ssai-paso-ancho .ssai-paso-texto>.ssai-btn{width:calc(100% - 26px)}}} @media (min-width:2000px){@media (min-width:1201px) and (max-height:940px){.ssai-t-resumen .ssai-res-distribucion{flex-direction:column}}} @media (min-width:2000px){@media (min-width:1201px) and (max-height:940px){.ssai-res-distribucion picture{flex:1 1 0;min-height:0;width:100%}}} @media (min-width:2000px){@media (min-width:1201px) and (max-height:940px){.ssai-res-distribucion img{width:100%;height:100%;max-width:none;max-height:none}}} @media (min-width:2000px){@media (min-width:901px){.ssai-t-renders-pie{flex-direction:row-reverse}}} @media (min-width:2000px){:root{--pv:calc(1vw / var(--zs))}} @media (min-width:2000px){@media (min-width:2000px){:root{--pv:calc(calc(1vw / var(--zs)) / var(--zs))}}} @media (min-width:2000px){.ssai-prensa-imagen{box-shadow:none;border-radius:0}} @media (min-width:2000px){.ssai-prensa-logo{margin:clamp(10px,calc(1.7 * var(--pv)),34px) 0 0}} @media (min-width:2000px){.ssai-prensa-logo img{width:clamp(150px,calc(19.5 * var(--pv)),420px);height:auto}} @media (min-width:2000px){.ssai-prensa-texto .ssai-botones{margin-top:clamp(12px,calc(1.6 * var(--pv)),30px)}} @media (min-width:2000px){.ssai-otras{border-top:0;padding-top:clamp(14px,calc(1.4 * var(--pv)),30px);padding-bottom:clamp(20px,calc(2.4 * var(--pv)),50px)}} @media (min-width:2000px){.ssai-otras-titulo{font-size:clamp(30px,calc(5.1 * var(--pv)),110px);margin-top:.12em}} @media (min-width:2000px){.ssai-otras ul{gap:clamp(10px,calc(1.3 * var(--pv)),26px);margin-top:clamp(12px,calc(1.7 * var(--pv)),34px)}} @media (min-width:2000px){.ssai-otras li{padding:clamp(14px,calc(1.9 * var(--pv)),38px) 1em clamp(12px,calc(1.7 * var(--pv)),34px)}} @media (min-width:2000px){.ssai-otras h3{font-size:clamp(20px,calc(2.95 * var(--pv)),64px);margin-inline:2%}} @media (min-width:2000px){.ssai-otras li p{margin-top:clamp(8px,calc(1.2 * var(--pv)),24px);font-size:clamp(12px,calc(1.45 * var(--pv)),30px)}} @media (min-width:2000px){@media (min-width:1101px){.ssai-prensa-imagen{margin-left:calc(-5.5 * var(--pv));margin-right:calc(-1.5 * var(--pv))}}} @media (min-width:2000px){@media (min-width:1101px){.ssai-prensa-texto .ssai-titulo{font-size:clamp(32px,calc(5.1 * var(--pv)),110px)}}} @media (min-width:2000px){@media (min-width:1101px){.ssai-prensa-texto .ssai-lead{max-width:calc(34 * var(--pv))}}} @media (min-width:2000px){@media (min-width:1101px){.ssai-prensa-texto .ssai-btn{min-height:clamp(42px,calc(3.3 * var(--pv)),64px);font-size:clamp(12px,calc(1.25 * var(--pv)),24px)}}} @media (min-width:2000px){@media (max-width:699.98px){.ssai-otras h3{font-size:clamp(18px,calc(6vw / var(--zs)),26px)}}} @media (min-width:2000px){@media (max-width:699.98px){.ssai-otras-titulo{font-size:clamp(26px,calc(9vw / var(--zs)),40px)}}} @media (min-width:2000px){@media (min-width:2000px){.ssai-prensa-texto .ssai-lead{font-size:clamp(14px,calc(1.78 * var(--pv)),34px)}}} @media (min-width:2000px){.ssai-otras li{border:0;box-shadow:inset 0 0 0 clamp(1.5px,calc(.12vw / var(--zs)),3px) rgba(247,205,96,.95),inset 0 0 22px rgba(240,170,50,.16),0 0 10px rgba(240,170,50,.2)}} @media (min-width:2000px){@media (min-width:1101px){.ssai-prensa-logo{max-width:calc(34 * var(--pv))}}} @media (min-width:2000px){@media (min-width:1101px){.ssai-prensa-logo img{margin-inline:auto}}} @media (min-width:2000px){.ssai-prensa-texto .ssai-titulo em{box-decoration-break:clone}} /* == fin D-SSAI-814 == */