:root{ --tinta:#16151e; --tinta-2:#26242f; --oro:#b08d57; --oro-claro:#c9ac7d; --oro-texto:#7b6239; /* mismo tono y saturación que --oro, bajado a L36% para llegar a 4.5:1 sobre marfil y sobre marfil-2: el oro del manual da 2.74:1 y es acento gráfico, no color de texto pequeño */ --arena:#d6cdc0; --marfil:#f5f1e8; --marfil-2:#efe9dd; --texto:#3a3742; --texto-2:#67626e; /* mismo tono; a #6f6a76 el texto secundario daba 4.34:1 sobre --marfil-2 y no llegaba al mínimo AA */ --linea:#e2dbcd; --linea-osc:rgba(245,241,232,.14); --display:'Cormorant Garamond',Garamond,serif; --sans:'Montserrat',system-ui,sans-serif; --t:.42s cubic-bezier(.32,.72,0,1); --t-r:.26s cubic-bezier(.32,.72,0,1); --t-lento:.62s cubic-bezier(.32,.72,0,1); } *{box-sizing:border-box;margin:0;padding:0} /* `scroll-behavior:smooth` en anima TODO desplazamiento del documento y en una página larga se siente como si la rueda arrastrara: el gesto no responde de inmediato. Se quita de aquí y el suavizado queda solo para los saltos de ancla, que es para lo que sirve (lo hace gretta.js). */ html{color-scheme:light;overflow-x:clip} body{background:var(--marfil);color:var(--texto);font-family:var(--sans);font-weight:400;font-size:17.5px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} /* Toque: sin el retardo de 300ms del doble tap y con el destello de Android puesto a propósito (el azul del sistema no pertenece a la paleta). */ a,button,summary,input,label,.filtro,.op,.talla{touch-action:manipulation;-webkit-tap-highlight-color:rgba(176,141,87,.18)} button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit} :focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:2px} .wrap{max-width:1320px;margin:0 auto; padding-inline:max(clamp(20px,4vw,60px),env(safe-area-inset-left),env(safe-area-inset-right))} h1,h2,h3{font-family:var(--display);font-weight:700;color:var(--tinta);text-wrap:balance;letter-spacing:0} /* La serif del manual encabeza; la sans en Light sostiene los subtítulos. */ .obra h3,.visor h3,.marca .g,.cita-marca p,.p404 .num{font-family:var(--display)} .kicker,.med-h p,.col-h p,.serv p.sub,.esp-h p,.testi-h p,.rel p.sub,.muro-h p,.fmt-t{font-weight:300} section[id]{scroll-margin-top:92px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .skip{position:absolute;left:-9999px;background:var(--tinta);color:var(--marfil);padding:12px 22px;z-index:200} .skip:focus{left:12px;top:12px} .kicker{display:inline-flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--oro-texto);font-weight:600} .kicker::before{content:"";width:28px;height:1px;background:var(--oro)} .kicker.solo::before{display:none} /* ═══════ NAV — portal: dos columnas que enmarcan ═══════ */ /* La barra baja con el lector y, al despegarse del borde, se encoge y se vuelve translúcida — el mismo recurso de nausocieta.com, en la paleta de la casa. Todo lo que se anima aquí (top, width, radio, fondo) transiciona con la misma cadencia para que no se vea por partes. */ .nav{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;z-index:100; border:1px solid transparent;padding:8px 0; transition:top .45s ease,width .45s ease,border-radius .45s ease,padding .45s ease, background var(--t),border-color var(--t),box-shadow var(--t)} .nav.pegada{top:12px;width:min(94%,1200px);border-radius:3px;padding:0; background:rgba(245,241,232,.82);backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); border-color:var(--linea);box-shadow:0 12px 34px rgba(22,21,30,.12)} .nav .in{display:flex;align-items:center;justify-content:space-between;gap:24px; padding-block:14px;transition:padding-block .45s ease; padding-inline:max(clamp(20px,4vw,60px),env(safe-area-inset-left),env(safe-area-inset-right))} .nav.pegada .in{padding-block:9px;padding-inline:clamp(18px,2.4vw,30px)} @media(max-width:760px){ /* en pantalla estrecha la píldora no cabe: vuelve a barra a sangre */ .nav.pegada{top:0;width:100%;border-radius:0;box-shadow:none; border-color:transparent;border-bottom-color:var(--linea)} } .marca{display:flex;align-items:baseline;gap:12px} /* Un solo logotipo en todo el sitio: el lockup GRETTA + BY LLAMAS. El bloque completo mide 2.35:1, no 3.86:1 como el wordmark suelto que había antes, así que la barra se dimensiona para él: por debajo de 34px de alto la bajada deja de leerse y el logo se vuelve una mancha. */ .marca img{height:clamp(34px,3.6vw,46px);width:auto;display:block;transition:opacity var(--t-r)} @media(max-width:600px){.marca img{height:31px}} .marca:hover img{opacity:.68} .marca .g{font-family:var(--display);font-size:26px;letter-spacing:.3em;color:var(--tinta);font-weight:400;text-indent:.3em} .marca .b{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--texto-2)} .nav ul{display:flex;gap:clamp(18px,2.4vw,36px);list-style:none} .nav ul a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-2);font-weight:500;position:relative;padding-bottom:3px;transition:color var(--t-r)} .nav ul a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--oro);transition:right var(--t)} .nav ul a:hover{color:var(--tinta)} .nav ul a:hover::after{right:0} /* la página en la que estás, marcada también visualmente */ .nav ul a[aria-current="page"]{color:var(--tinta)} .nav ul a[aria-current="page"]::after{right:0} .nav.n-oscuro:not(.pegada) ul a[aria-current="page"]{color:var(--marfil)} .nav-wa{display:inline-flex;flex:0 0 auto;align-items:center;gap:9px;border:1px solid var(--tinta);padding:11px 22px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;transition:background var(--t-r),color var(--t-r)} .nav-wa:hover{background:var(--tinta);color:var(--marfil)} .nav-wa svg{width:14px;height:14px;fill:currentColor} /* En móvil el menú no se esconde: se pasa a una segunda línea deslizable. Antes se ocultaba con display:none y no había forma de llegar a Colección, Acerca, Preguntas ni Contacto desde el teléfono. */ @media(max-width:900px){ .marca .b{display:none} .nav .in{flex-wrap:wrap;row-gap:9px;padding-top:11px;padding-bottom:9px;column-gap:14px} /* el hijo directo del flex es