/* ═══════════════════════════════════════════════════════════════════ AGUA Y PIEDRA Sistema de diseño de Almavi Alimentos. Una sola idea gobierna todo: la página desciende. No con un fondo oscuro decorativo, sino con una rampa de tinta que va de la nieve al producto. Cada tramo toma un escalón de esa rampa y el color del texto se calcula solo por luminancia, para que nunca haya un tramo ilegible. Tres reglas de contención, que es lo que evita el ruido: 1 · CADA COLOR TIENE UN SOLO TRABAJO. Aqua es el agua y nada más: el hilo, la gota, el enlace que te lleva más abajo. Verde es lo vivo: producto y marcas. Miel es exclusivamente lo que falta. Ningún color hace dos cosas. 2 · NO HAY NADA MEDIANO. Un titular enorme por pantalla, cuerpo de 1.05rem y etiquetas de .64rem. Se eliminó todo lo que vivía en medio, que era lo que aplanaba la página. 3 · UNA SOLA IDEA DE MOVIMIENTO. Todo llega llenándose desde abajo, como sube un nivel de agua. Cero fade-up: ése es el gesto que delata a una página hecha con plantilla. ═══════════════════════════════════════════════════════════════════ */ :root{ /* rampa de tinta, de la nieve al producto */ /* Rampa aprobada: crema y teal del kit, con dos mezclas exactas entre ellos. Nada inventado. */ --n1:#F3F1EA; --n2:#D8DBD4; --n3:#B0BAB3; --n4:#B0BAB3; --n5:#143A33; --n6:#143A33; /* acentos, un trabajo cada uno */ --agua:#25B8C9; /* el hilo, la gota, bajar */ --vivo:#239E70; /* producto y marcas */ --falta:#E9A23A; /* lo que está pendiente */ /* ══ ACENTOS DEL MANUAL, con su trabajo ══ Aqua es acción: botones y enlaces. Miel es calidez comercial. Medido: aqua y miel dan 2.12 y 1.92 contra crema — como texto sobre fondo claro son ilegibles. Por eso la acción sobre claro va en píldora rellena con tinta encima (7.17 y 7.91), y sólo sobre teal el acento puede ser el texto (5.22 y 5.76). */ --accion:#25B8C9; --calor:#E9A23A; --miel:#E9A23A; /* etiqueta natural */ --carmin:#A8324A; /* etiqueta jamaica */ --rosa:#D98BA6; /* etiqueta pétalos de rosas */ --tinta:#0B1F1A; --papel:#F3F1EA; --max:1180px; /* ══ ESCALA TIPOGRÁFICA ══ Siete pasos desde 1.06 rem con razón 1.25. Piso duro: nada por debajo de .85 rem en ninguna pantalla. Debajo de eso el texto deja de leerse como diseño y empieza a leerse como letra chica de contrato. Toda pantalla nueva se compone con estos pasos y con ningún otro. */ --t-rotulo: .85rem; /* etiquetas en versalitas */ --t-pie: .95rem; /* dato secundario */ --t-cuerpo: 1.06rem; /* base de lectura */ --t-dato: clamp(1.15rem,1.9vw,1.4rem); /* dato compuesto */ --t-rubro: clamp(1.35rem,2.2vw,1.75rem); /* rótulo de sección */ --t-seccion:clamp(1.9rem,3.6vw,2.6rem); /* título de sección */ --t-titulo: clamp(2.4rem,6.4vw,5.2rem); /* titular de página */ --linea:currentColor; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip} body{background:#143A33;color:var(--papel); transition:color 1.4s cubic-bezier(.4,0,.2,1); font-family:Newsreader,Georgia,"Times New Roman",serif;font-weight:300; font-size:1.05rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit} :focus-visible{outline:2px solid var(--agua);outline-offset:4px;border-radius:2px} ::selection{background:var(--agua);color:var(--n6)} .dig{display:inline-flex;overflow:hidden;height:1em;vertical-align:baseline; align-items:flex-end} .dig i{display:block;font-style:normal;transition:transform 1.1s cubic-bezier(.16,1,.3,1)} .dig s{display:block;text-decoration:none;height:1em;line-height:1; font-variant-numeric:tabular-nums} [data-a]{display:inline-flex;align-items:flex-end} .firma{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start; margin-top:clamp(2.6rem,6vh,4.2rem);padding-top:1.5rem;max-width:100%; border-top:1px solid color-mix(in srgb,currentColor 20%,transparent)} .firma .linea{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;display:block; line-height:1.08;will-change:font-size,letter-spacing} .firma .sitio{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 500,'wdth' 70;font-size:var(--t-rotulo);letter-spacing:.16em; text-transform:uppercase;opacity:.42} .rs-pie{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 400,'wdth' 82;font-size:var(--t-rotulo);opacity:.55; margin-top:.5rem;letter-spacing:-.005em} .wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 clamp(1.4rem,5vw,5rem)} /* Tipografía: Archivo para todo lo estructural, Newsreader sólo para párrafos de lectura. La serif nunca toca etiquetas ni cifras. */ .disp{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 200,'wdth' 100;letter-spacing:-.045em;line-height:.95} h2.disp{font-variation-settings:'wght' 240,'wdth' 100} h3.disp,h4.disp{font-variation-settings:'wght' 300,'wdth' 96;letter-spacing:-.033em;line-height:1.04} .et{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wght' 600,'wdth' 70; font-size:var(--t-rotulo);letter-spacing:.16em;text-transform:uppercase;opacity:.5} /* Medida de lectura del sistema: 62 caracteres el cuerpo, 46 las bajadas. */ .tramo p,.nosotros p{max-width:62ch} .bajada p,.puerta p{max-width:46ch} h2,h3,h4{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:400} /* ══ altímetro ══ Sustituye al hilo con la gota, que era un recurso ya usado en otro sitio del grupo y además genérico: una barra de avance vertical la tiene cualquiera. Esto en cambio sólo le sirve a esta empresa. La página desciende de verdad, del deshielo a la planta, y el altímetro lo dice en cifras — que es el idioma de una empresa que vive de tolerancias y de lotes. Chico, sin color y sin caja: se lee como instrumento, no como efecto. */ /* ══ EL SALÓN ══ Los nombres son el contenido: es lo que la empresa posee y lo que el mercado reconoce. El producto es el premio — aparece al señalar, grande, y el acento de esa marca baña la pantalla entera. Así el peso no lo cargan las fotos, que son packshots de tienda, sino la tipografía, que sí controlamos. */ .bifurca{position:relative;min-height:100svh;display:flex;align-items:center; padding:clamp(7rem,15vh,9.5rem) 0 clamp(4rem,10vh,6.5rem);z-index:1;overflow:hidden} .bifurca .wrap{width:100%} .rubro{max-width:none;font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 500,'wdth' 88;font-size:clamp(1.05rem,1.75vw,1.45rem); letter-spacing:-.015em;line-height:1.2;margin-bottom:clamp(1.6rem,4.5vh,2.8rem); opacity:.9} .salon{display:grid;grid-template-columns:1fr minmax(300px,44%); gap:clamp(2rem,5vw,4.5rem);align-items:stretch} .listado{display:flex;flex-direction:column;justify-content:center} .renglon{display:block;text-decoration:none;padding:clamp(1rem,2.4vh,1.7rem) 0; border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)} .renglon:last-of-type{border-bottom:1px solid color-mix(in srgb,currentColor 16%,transparent)} /* ── las tres marcas están, siempre ── Antes descansaban a .42 y su descriptor vivía en max-height:0. O sea que dos de las tres se veían como un nombre gris y nada debajo, que no es contención: es una página que parece rota o un enlace deshabilitado. Ahora las tres existen siempre y lo que distingue a la activa es el énfasis, no la existencia. Tres señales a la vez, ninguna de ellas apagar a las otras: sube el peso y el ancho de la letra, sube el contraste, y el filete de arriba se enciende en el acento de esa marca —el mismo hilo que la amarra con el producto que está a la derecha. */ .rot{display:block;font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' var(--np),'wdth' var(--nw); font-size:clamp(1.8rem,4.6vw,3.6rem);letter-spacing:-.042em;line-height:1.02; opacity:.72;transition:opacity .55s cubic-bezier(.4,0,.2,1), font-variation-settings .55s cubic-bezier(.4,0,.2,1)} .renglon.viva .rot{opacity:1;font-variation-settings:'wght' calc(var(--np) + 120),'wdth' var(--nw)} .pie{display:block;font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 450,'wdth' 92;font-size:var(--t-rotulo);letter-spacing:-.005em; margin-top:.5rem;opacity:.5;transition:opacity .45s cubic-bezier(.4,0,.2,1)} .renglon.viva .pie{opacity:.82} .renglon{transition:border-color .55s cubic-bezier(.4,0,.2,1)} .renglon.viva{border-top-color:var(--ac)} .listado .remate{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 420,'wdth' 96;font-size:.92rem; opacity:.55;margin-top:clamp(1.3rem,3.2vh,2rem);max-width:34ch; border-top:0;padding-top:0} /* ── la vitrina de Inicio ── Se retiró el plano de fondo: un rectángulo de color detrás del producto no se lee como sitio, se lee como diapositiva. Aquí tampoco va filete: el filete existe para relacionar varios objetos entre sí, y aquí sólo hay uno a la vez. La pieza se apoya en el aire de la retícula y lo único que la asienta es su sombra. */ .tarima{position:relative;color:inherit; min-height:clamp(21rem,58svh,34rem); display:flex;align-items:center;justify-content:center} .tarima img{position:absolute;left:50%;top:50%; transform:translate(-50%,-50%) scale(.97); max-height:96%;max-width:62%;width:auto;opacity:0; filter:drop-shadow(0 30px 34px rgba(0,0,0,.34)) drop-shadow(0 8px 12px rgba(0,0,0,.2)); transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)} .tarima img.viva{opacity:1;transform:translate(-50%,-50%) scale(1)} .tarima img.placa{max-height:42%;max-width:60%; filter:drop-shadow(0 20px 30px rgba(0,0,0,.3))} .tarima .simbolo{position:absolute;left:50%;top:50%; transform:translate(-50%,-50%) scale(.97);width:32%;aspect-ratio:4/3; -webkit-mask:var(--m) no-repeat center/contain;mask:var(--m) no-repeat center/contain; background:currentColor;opacity:0; transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)} .tarima .simbolo.viva{opacity:1;transform:translate(-50%,-50%) scale(1)} @media(max-width:900px){ .salon{grid-template-columns:1fr;gap:2.4rem} .tarima{min-height:clamp(14rem,36svh,20rem);order:-1}} /* ══ el fondo, una sola capa ══ Aquí estaba el error: le había puesto fondo a cada tramo, y eso produce bloques con costura. La versión que funcionaba tenía UNA capa fija para toda la página que cambia de color despacio. No se percibe el cambio porque no hay borde donde percibirlo: cambia el aire, no el bloque. El texto viaja con el mismo tiempo y la misma curva, así que la página entera hace una sola disolvencia. */ #fondo{position:fixed;inset:0;z-index:-2;background:#143A33; transition:background 1.2s cubic-bezier(.4,0,.2,1)} #riel,#gota{display:none} /* ══ barra ══ Silenciosa a propósito. La estructura se entiende por los nombres, no por la mecánica. */ /* ══ barra ══ La navegación agrupada es la tesis del sitio hecha menú: llegan tres personas distintas y cada una ve de inmediato cuál es su columna, sin tener que leer seis palabras sueltas y adivinar. No es adorno — es lo que quita el trabajo de elegir. */ header{position:fixed;top:0;left:0;right:0;z-index:60;color:var(--tinta); transition:color 1.4s cubic-bezier(.4,0,.2,1),background .6s,border-color .6s;border-bottom:1px solid transparent} header.pegado{background:color-mix(in srgb,var(--bg-actual,#F3F1EA) 92%,transparent); backdrop-filter:blur(16px);border-bottom-color:color-mix(in srgb,currentColor 12%,transparent)} header.enclaro{color:var(--papel)} header .barra{max-width:var(--max);margin:0 auto; padding:1.05rem clamp(1.4rem,5vw,5rem);display:flex;align-items:flex-start;gap:2rem} /* El lockup completo, no sólo ALMAVI: abajo el pie dice ALMAVI ALIMENTOS y arriba decía nada más ALMAVI. A 44px «ALIMENTOS» todavía se lee y la marca gana el peso que le faltaba frente al menú de dos renglones —que es quien manda el alto de la barra, así que esto no la estira. */ header nav svg{height:clamp(32px,3.1vw,44px);width:auto;display:block} /* ══ LA MARCA DE LA BARRA SE CONTRAE ══ Al fondo de una página corta se veían dos lockups idénticos en la misma pantalla —el de la barra y el del pie— a doscientos píxeles de distancia. Repetir la marca no la refuerza, la gasta. Pasado el primer scroll la barra se queda con el símbolo «A», que el manual reserva justo para esto: app, favicon, gafetes y sellos. La «A» no se mueve —es la misma letra, en el mismo lugar y al mismo tamaño—; lo que se disuelve es el resto de la palabra. Abajo, el pie conserva el lockup completo y vuelve a ser el único de la pantalla. */ .wm{--h:clamp(32px,3.1vw,44px);position:relative;display:block;margin-top:-.28rem; height:var(--h);width:calc(var(--h) * 2.402); transition:width .55s cubic-bezier(.4,0,.2,1)} .wm svg{position:absolute;left:0;top:0;height:100%;width:auto; transition:opacity .38s ease} .wm .wm-mini{opacity:0} body.contraida .wm{width:calc(var(--h) * .678)} body.contraida .wm .wm-full{opacity:0} body.contraida .wm .wm-mini{opacity:1} /* En Inicio quien se ve en la barra es el logotipo en vuelo, no el del menú. Al contraerse se hace el relevo: el que voló se retira y aparece el símbolo, en el mismo punto donde estaba su «A». */ body.contraida #vuelo{opacity:0} body.contraida .wm{visibility:visible} @media(prefers-reduced-motion:reduce){.wm,.wm svg{transition:none}} /* Cada punto del menú lleva su descriptor debajo. Todo lo que se ve es parte de un enlace, así que se acaba la duda de qué se puede tocar — que era el problema de las etiquetas de grupo, que parecían opciones y no lo eran. El descriptor además dice para quién es cada sección. */ /* Acotado a header: antes esta regla decía «nav» a secas y alcanzaba también a los enlaces del pie —los acostaba en fila y, peor, los apagaba enteros abajo de 1040px. */ header nav{margin-left:auto;display:flex;gap:clamp(1.1rem,2.6vw,2.3rem);align-items:flex-start} header nav a{display:block;text-decoration:none;opacity:.7;padding-bottom:3px; border-bottom:1px solid transparent;transition:opacity .3s,border-color .3s} header nav a:hover{opacity:1} header nav a.on{opacity:1;border-bottom-color:currentColor} header nav a b{display:block;font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wdth' 86;font-weight:500;font-size:.95rem;letter-spacing:-.008em} header nav a span{display:block;font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wdth' 74;font-weight:500;font-size:var(--t-rotulo);letter-spacing:.15em; text-transform:uppercase;opacity:.6;margin-top:.32rem;white-space:nowrap} @media(max-width:1040px){header nav{display:none}.wm{padding-top:0} header .barra{align-items:center;padding-bottom:.75rem}} .navmovil{display:none} @media(max-width:1040px){ .navmovil{display:flex;gap:1.35rem;overflow-x:auto; padding:0 clamp(1.4rem,5vw,5rem) .85rem;scrollbar-width:none} .navmovil::-webkit-scrollbar{display:none} .navmovil a{display:block;text-decoration:none;opacity:.62;white-space:nowrap;flex:none} .navmovil a.on{opacity:1} .navmovil a b{display:block;font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wdth' 84;font-weight:500;font-size:var(--t-rotulo)} .navmovil a span{display:block;font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wdth' 72;font-weight:500;font-size:var(--t-rotulo);letter-spacing:.16em; text-transform:uppercase;opacity:.5;margin-top:.2rem} } /* Debajo de 460px los tres destinos ya no caben con su descriptor: medido a 360px, «Nosotros / la empresa» terminaba en 388 y se cortaba a media palabra contra el borde. La fila desliza, pero un destino cortado no se lee como que hay más: se lee como que el sitio está roto. Se van los descriptores —tres puertas enteras dicen más que dos y media. */ @media(max-width:460px){ .navmovil{gap:1.7rem} .navmovil a span{display:none} .navmovil a b{font-size:.92rem;font-variation-settings:'wdth' 88} } /* ══ páginas ══ */ .pagina{display:none} .pagina.activa{display:block} .pagina:not(#p-inicio){padding-top:5.6rem} @media(max-width:960px){.pagina:not(#p-inicio){padding-top:7.2rem}} /* ══ el movimiento: una sola idea ══ Todo llega llenándose desde abajo, como sube un nivel de agua. Se hace con clip-path sobre el propio elemento, sin envoltorio y sin opacidad: el fade-up es justo el gesto que delata una plantilla. */ .rev{clip-path:inset(100% 0 0 0);transform:translateY(16px); transition:clip-path 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)} .rev.visto{clip-path:inset(0 0 0 0);transform:none} /* ══ portada ══ Casi vacía a propósito: un titular enorme, una línea, y aire. Las cotas se fueron a su propio momento más abajo, donde son lo único en pantalla y por fin pesan. */ /* Sólo el eje vertical. El atajo de cuatro valores ponía 0 a los lados y mataba el padding lateral que .wrap ya trae. En escritorio no se notaba porque el ancho máximo centra la caja y sobra margen; en teléfono no hay ancho máximo que sobre, y el titular quedaba pegado a los dos bordes de la pantalla. */ .portada{min-height:100svh;position:relative;display:flex;flex-direction:column; justify-content:flex-start; padding-top:clamp(5rem,14vh,9rem);padding-bottom:clamp(3.4rem,7vh,5rem)} /* el hueco que ocupa el logotipo mientras está en la portada */ #ancla-logo{height:clamp(3rem,7.5vw,6.5rem);margin-bottom:clamp(2.6rem,7vh,5rem)} /* una sola pieza: empieza a tamaño de portada y aterriza en el menú */ #vuelo{position:fixed;z-index:70;pointer-events:none;color:var(--tinta); transition:color 1.4s cubic-bezier(.4,0,.2,1),opacity .38s ease} #vuelo svg{height:100%;width:auto;display:block} header.enclaro ~ #vuelo,#vuelo.enclaro{color:var(--papel)} .wm{visibility:hidden} /* ══ LOS TRES VERBOS ══ Antes eran un pie de página: doce píxeles en gris al fondo del cuadro, o sea lo menos importante de la pantalla. Pero son la tesis de la empresa —la integración vertical es exactamente esto— así que ahora son la estructura de la portada y no su remate, y cada uno dice qué hay detrás. La pareja tipográfica es deliberada y es lo que le da masa a una pantalla que sólo tiene letras: el titular va grande y ligero (240), los verbos van chicos, pesados y anchos (620/108). Antes el elemento más pesado de toda la primera pantalla era el letrerito de 12px: el titular pesaba menos que su propio pie. */ .riel{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3.5vw,3rem); margin-top:auto;padding-top:clamp(1.1rem,2.6vh,1.6rem); border-top:1px solid color-mix(in srgb,currentColor 26%,transparent)} .paso b{display:block;font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 620,'wdth' 108;font-weight:400; font-size:clamp(1.02rem,2.25vw,1.85rem);letter-spacing:-.028em;line-height:1.04} .paso span{display:block;font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 380,'wdth' 92;font-size:var(--t-pie); line-height:1.42;margin-top:.55rem;max-width:26ch;opacity:.64} /* En vertical tres columnas se vuelven tres renglones apretados: mejor una lista con filete, que es la misma idea de secuencia leída hacia abajo. */ @media(max-width:720px){ .riel{grid-template-columns:1fr;gap:0} .paso{padding:clamp(.75rem,2vh,1.05rem) 0; border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent)} .paso:last-child{border-bottom:0;padding-bottom:0} .paso span{margin-top:.25rem}} .montana{display:none} .portada h1{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 240,'wdth' 92;font-size:clamp(1.9rem,5vw,4.2rem); line-height:1.05;letter-spacing:-.042em;max-width:min(100%,64rem)} .portada h1 span{display:block;overflow:hidden;padding-bottom:.06em} .portada h1 i{display:block;font-style:normal;transform:translateY(102%); animation:nivel 1.15s cubic-bezier(.16,1,.3,1) forwards} .portada h1 span:nth-child(2) i{animation-delay:.12s} @keyframes nivel{to{transform:none}} .bajada{margin-top:clamp(1.8rem,4.5vh,2.8rem);max-width:46ch;overflow:hidden} .bajada>.coord{display:none} .bajada>div{display:block;transform:translateY(102%); animation:nivel 1s .5s cubic-bezier(.16,1,.3,1) forwards} .bajada p{opacity:.82;font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.55} .coord{display:none} /* ══ cotas: su propia pantalla ══ */ .cotas{min-height:78svh;display:flex;flex-direction:column;justify-content:center;gap:0} .cota{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:baseline; padding:1.5rem 0;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)} .cota:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 16%,transparent)} .cota b{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 88; font-weight:300;font-size:clamp(2.6rem,8.5vw,6.4rem);letter-spacing:-.05em;line-height:.85; font-variant-numeric:tabular-nums} .cota .k{max-width:24ch;opacity:.62;font-size:.98rem} /* ══ tramos ══ */ .tramo{position:relative;padding:clamp(5rem,16vh,11rem) 0;z-index:1} .marca-tramo{display:flex;align-items:baseline;gap:1.1rem;margin-bottom:clamp(2rem,6vh,3.4rem)} .marca-tramo .n{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wdth' 74;font-weight:600;font-size:var(--t-rotulo);opacity:.4} h2{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 90; font-weight:300;font-size:clamp(2.2rem,6.6vw,5.4rem);letter-spacing:-.048em; line-height:.94;max-width:14ch;text-wrap:balance} .mitad{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2.5rem,7vw,6rem)} @media(max-width:900px){.mitad{grid-template-columns:1fr;gap:2.2rem}} .txt,.bloque-txt{max-width:42ch;opacity:.76} .txt p,.bloque-txt p{margin-bottom:1.15rem} .txt p:last-child,.bloque-txt p:last-child{margin-bottom:0} .corta,.remate{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wdth' 90;font-weight:300;letter-spacing:-.035em; font-size:clamp(1.35rem,3vw,2.1rem);line-height:1.12;margin-top:2rem;max-width:26ch} .remate{margin-top:clamp(2.5rem,7vh,4rem);padding-top:clamp(1.6rem,4vh,2.2rem); border-top:1px solid color-mix(in srgb,currentColor 16%,transparent);max-width:40ch} .entrada-nosotros{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 90; font-weight:300;font-size:clamp(1.2rem,2.6vw,1.85rem);line-height:1.28;letter-spacing:-.025em; max-width:24ch;margin-top:1.5rem;opacity:.8} .sub-et{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 74; font-weight:600;font-size:var(--t-rotulo);letter-spacing:.16em;text-transform:uppercase; opacity:.5;margin-bottom:1.2rem;display:block} .cabecera{padding:clamp(3.5rem,11vh,7rem) 0 clamp(2rem,5vh,3rem)} .cabecera .bajo{margin-top:1.7rem;max-width:42ch;opacity:.76} .dosc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,7vw,6rem); margin-top:clamp(3rem,8vh,4.5rem);padding-top:clamp(2rem,5vh,3rem); border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)} @media(max-width:900px){.dosc{grid-template-columns:1fr;gap:2.5rem}} /* ══ tres puertas ══ Tres bloques planos. La horquilla se queda, muy tenue: si se nota, es un truco; si apenas se intuye, es un detalle. */ .bifurca{position:relative;min-height:100svh;display:flex;align-items:center; padding:clamp(4rem,10vh,6.5rem) 0;z-index:1} .bifurca .wrap{width:100%} .des{display:block;font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 400,'wdth' 96;font-size:.88rem;opacity:.68;margin-top:.35rem} .cred{display:block;font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 600,'wdth' 72;font-size:var(--t-rotulo);letter-spacing:.16em; text-transform:uppercase;margin-top:.9rem; color:color-mix(in srgb,var(--ac) 62%,currentColor)} .bifurca .wrap{width:100%} .puerta{display:flex;flex-direction:column;height:100%} .nombres{list-style:none;margin:clamp(1.4rem,3vh,2.2rem) 0 0; border-top:1px solid color-mix(in srgb,currentColor 20%,transparent)} .nombres li{border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)} .nombres a{display:block;text-decoration:none;padding:clamp(.7rem,1.6vh,1.15rem) 0; font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 300,'wdth' 96; font-size:clamp(1.5rem,3.2vw,2.7rem);letter-spacing:-.036em;line-height:1.06; transition:font-variation-settings .45s cubic-bezier(.4,0,.2,1),opacity .35s;opacity:.9} .nombres a:hover{font-variation-settings:'wght' 560,'wdth' 90;opacity:1} .puerta .ir{margin-top:auto;padding-top:clamp(1.6rem,4vh,2.6rem)} .horquilla{display:none} .puertas{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.8rem,5vw,5rem);align-items:start} @media(max-width:820px){.puertas{grid-template-columns:1fr;gap:2.6rem}} .puerta .quien{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 74; font-weight:600;font-size:var(--t-rotulo);letter-spacing:.16em;text-transform:uppercase; color:var(--agua);margin-bottom:1rem;display:block} .puerta p{font-size:clamp(1.02rem,1.7vw,1.24rem);line-height:1.42;max-width:26ch;opacity:.82} .puerta .ir{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.5rem;text-decoration:none; font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 84; font-weight:500;font-size:var(--t-rotulo);color:var(--agua);transition:gap .35s} .puerta .ir:hover{gap:1.05rem} .puerta .ir span{width:22px;height:1px;background:currentColor;display:block} .mini{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.4rem} .mini i{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 74; font-style:normal;font-weight:500;font-size:var(--t-rotulo);letter-spacing:.14em;text-transform:uppercase; padding:.26rem .62rem;border:1px solid color-mix(in srgb,currentColor 22%,transparent); border-radius:99px;opacity:.6} /* ══ tarjetas de marca ══ */ .tres{display:grid;grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid color-mix(in srgb,currentColor 14%,transparent); border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent); margin-top:clamp(2rem,6vh,3rem)} @media(max-width:820px){.tres{grid-template-columns:1fr}} .tarjeta{display:block;border-left:1px solid color-mix(in srgb,currentColor 14%,transparent);text-decoration:none;padding:2rem 1.6rem 1.8rem;position:relative; transition:background .45s} .tarjeta:hover{background:color-mix(in srgb,var(--vivo) 12%,transparent)} .tres>.tarjeta:first-child{border-left:0} .tarjeta .pun{width:10px;height:10px;border-radius:50%;background:var(--vivo);display:block;margin-bottom:1.6rem} .tarjeta h3{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 90; font-weight:300;letter-spacing:-.04em;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1} .tarjeta .cat{margin-top:.6rem;font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wdth' 74;font-weight:500;font-size:var(--t-rotulo);letter-spacing:.14em; text-transform:uppercase;opacity:.5} .tarjeta .ver{margin-top:1.8rem;display:block;font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wdth' 84;font-weight:500;font-size:var(--t-rotulo);color:var(--agua)} /* ══ diagrama retirado ══ */ .nosotros{position:relative;z-index:1} .diagrama{display:flex;flex-direction:column;align-items:center;margin-top:clamp(2rem,6vh,3.5rem)} .nodo{display:block;text-decoration:none;text-align:center;position:relative;transition:opacity .35s} .nodo .rot{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 74; font-weight:600;font-size:var(--t-rotulo);letter-spacing:.16em;text-transform:uppercase;opacity:.42; display:block;margin-bottom:.55rem} .nodo .nom{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 90; font-weight:300;letter-spacing:-.035em;line-height:1;display:block} .nodo .sub{font-size:var(--t-rotulo);opacity:.55;margin-top:.55rem;display:block} .raiz .nom{font-size:clamp(.92rem,1.7vw,1.12rem);font-weight:500;letter-spacing:0;opacity:.72} .hub{padding:1.5rem 2.4rem;border:1px solid color-mix(in srgb,var(--agua) 45%,transparent);border-radius:2px} .hub .nom{font-size:clamp(1.6rem,3.6vw,2.6rem)} a.hub:hover{background:color-mix(in srgb,var(--agua) 7%,transparent)} .cable{width:1px;background:var(--agua);opacity:.5;transform:scaleY(0);transform-origin:top; transition:transform .8s cubic-bezier(.2,.7,.3,1)} .visto .cable{transform:scaleY(1)} .c1{height:clamp(1.8rem,4vh,3rem)} .c2{height:clamp(2rem,4.5vh,3.2rem)} .horca{width:min(74%,46rem);height:clamp(2rem,4.5vh,3.2rem);opacity:.5; border-top:1px solid var(--agua);border-left:1px solid var(--agua);border-right:1px solid var(--agua); border-radius:2px 2px 0 0;transform:scaleX(0);transition:transform .9s .25s cubic-bezier(.2,.7,.3,1)} .visto .horca{transform:scaleX(1)} .ramas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,8vw,6rem);width:min(74%,46rem)} @media(max-width:820px){.ramas{grid-template-columns:1fr;gap:2.5rem;width:100%} .horca{display:none}.diagrama{align-items:flex-start}.nodo{text-align:left}} .rama-col{text-align:center} @media(max-width:820px){.rama-col{text-align:left}} .rama-col>.nodo .nom{font-size:clamp(1.1rem,2vw,1.45rem)} .hijos{list-style:none;margin-top:1.5rem;display:inline-block;text-align:left; border-left:1px solid color-mix(in srgb,currentColor 18%,transparent);padding-left:1.1rem} .hijos li{position:relative;padding:.42rem 0} .hijos li::before{content:"";position:absolute;left:-1.1rem;top:50%;width:.7rem;height:1px; background:color-mix(in srgb,currentColor 18%,transparent)} .hijos a{text-decoration:none;font-size:.94rem;opacity:.68;transition:opacity .25s,padding-left .3s;display:block} .hijos a:hover{opacity:1;padding-left:.3rem} .hijos .marca-hija a{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wdth' 88;font-weight:400;font-size:1.02rem;letter-spacing:-.02em} .pista{margin-top:clamp(2.5rem,7vh,4rem);text-align:center;max-width:46ch; margin-left:auto;margin-right:auto;opacity:.55;font-size:.95rem} /* ══ valores ══ */ .valores{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2.5rem,7vw,6rem); margin-top:clamp(2.5rem,7vh,4rem)} @media(max-width:820px){.valores{grid-template-columns:1fr}} .valor{padding:1.8rem 0;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)} .valor h3{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 88; font-weight:400;font-size:clamp(1.08rem,2vw,1.34rem);letter-spacing:-.02em;line-height:1.2} .valor p{margin-top:.7rem;font-size:.96rem;line-height:1.55;opacity:.65;max-width:38ch} /* ══ marcas desplegables ══ */ .colgadas{display:grid;gap:0} .colgada{border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)} .colgada:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 16%,transparent)} .cabeza{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;width:100%; background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer; padding:clamp(1.8rem,4.5vh,2.8rem) 0;transition:padding-left .45s cubic-bezier(.2,.7,.3,1)} .cabeza:hover{padding-left:.7rem} .cabeza h3{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 90; font-weight:300;font-size:clamp(1.9rem,5vw,3.6rem);letter-spacing:-.05em;line-height:.95} .cabeza .cat{margin-top:.55rem;font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wdth' 74;font-weight:500;font-size:var(--t-rotulo);letter-spacing:.14em; text-transform:uppercase;opacity:.5} .cabeza .dime{margin-top:1rem;opacity:.66;font-size:.98rem;max-width:44ch} .obj{display:flex;align-items:center;gap:clamp(1rem,3vw,2rem)} .disco{display:none} .mas{width:32px;height:32px;border-radius:50%;flex:none;position:relative; border:1px solid color-mix(in srgb,currentColor 28%,transparent); transition:transform .5s cubic-bezier(.2,.7,.3,1),border-color .3s} .mas::before,.mas::after{content:"";position:absolute;top:50%;left:50%;background:currentColor; transform:translate(-50%,-50%);transition:transform .5s cubic-bezier(.2,.7,.3,1)} .mas::before{width:11px;height:1px} .mas::after{width:1px;height:11px} .cabeza:hover .mas{border-color:currentColor} .colgada.abierta .mas{transform:rotate(180deg)} .colgada.abierta .mas::after{transform:translate(-50%,-50%) scaleY(0)} @media(max-width:700px){.cabeza{grid-template-columns:1fr;gap:1.4rem}.obj{justify-content:flex-end}} .ficha{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.2,.7,.3,1)} .colgada.abierta .ficha{grid-template-rows:1fr} .ficha>div{overflow:hidden} .ficha-in{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,5vw,4.5rem); padding:0 0 clamp(2.2rem,5.5vh,3.5rem)} @media(max-width:820px){.ficha-in{grid-template-columns:1fr;gap:2rem}} .ficha h4{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 74; font-weight:600;font-size:var(--t-rotulo);letter-spacing:.16em;text-transform:uppercase; opacity:.45;margin-bottom:1rem} .presenta{list-style:none;font-size:.98rem;opacity:.78} .presenta li{padding:.36rem 0;border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)} .canal{margin-top:1.9rem;font-size:.98rem;opacity:.78} .canal em{font-style:normal;opacity:.6;font-size:.85rem;display:block;margin-top:.55rem} /* ══ tablas técnicas ══ */ .tab{width:100%;border-collapse:collapse;font-size:.94rem} .tab th,.tab td{text-align:left;padding:.72rem 0;vertical-align:top; border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)} .tab th{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 78; font-weight:500;font-size:var(--t-rotulo);letter-spacing:.12em;text-transform:uppercase; opacity:.5;width:46%;padding-right:1.4rem} .tab td{opacity:.85;font-variant-numeric:tabular-nums} .falta{color:var(--falta);opacity:1} /* ══ rejillas de razones ══ */ .razones{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); border-top:1px solid color-mix(in srgb,currentColor 16%,transparent); border-bottom:1px solid color-mix(in srgb,currentColor 16%,transparent); margin-top:clamp(2.5rem,7vh,4rem)} .razon{padding:1.8rem 1.5rem 1.8rem 0;position:relative; border-left:1px solid color-mix(in srgb,currentColor 12%,transparent);padding-left:1.5rem} .razon:first-child{border-left:0;padding-left:0} @media(max-width:640px){.razon{border-left:0;padding-left:0; border-top:1px solid color-mix(in srgb,currentColor 12%,transparent)} .razon:first-child{border-top:0}} .razon .n{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 74; font-weight:600;font-size:var(--t-rotulo);opacity:.38} .razon h4{margin-top:.8rem;font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wdth' 88;font-weight:400;font-size:1.06rem;line-height:1.2;letter-spacing:-.02em} .razon p{margin-top:.7rem;font-size:.94rem;opacity:.62;line-height:1.5} /* ══ sí / no ══ */ .filtro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);margin-top:clamp(2.5rem,7vh,3.5rem)} @media(max-width:760px){.filtro{grid-template-columns:1fr}} .lado{padding-top:1.3rem;border-top:1px solid currentColor} .lado.si{color:var(--vivo)} .lado.no{opacity:.4} .lado span{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 74; font-weight:600;font-size:var(--t-rotulo);letter-spacing:.16em;text-transform:uppercase} .lado ul{list-style:none;margin-top:1.1rem;color:inherit} .lado.si ul{color:var(--tinta)} .oscuro .lado.si ul{color:var(--papel)} .lado li{padding:.5rem 0;font-size:1rem; border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)} /* ══ cinco líneas ══ */ .abanico{display:grid;grid-template-columns:repeat(5,1fr); margin-top:clamp(2.5rem,7vh,3.5rem); border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)} .rama{padding:1.6rem 1rem 1.4rem 0;position:relative;min-height:clamp(9rem,20vh,13rem); border-left:1px solid color-mix(in srgb,currentColor 12%,transparent);padding-left:1rem} .rama:first-child{border-left:0;padding-left:0} .rama .num{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 74; font-weight:600;font-size:var(--t-rotulo);opacity:.38} .rama h4{margin-top:.9rem;font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wdth' 88;font-weight:400;font-size:clamp(.96rem,1.4vw,1.14rem); line-height:1.16;letter-spacing:-.02em} .rama .quien-corre{position:absolute;left:1rem;right:1rem;bottom:1.2rem; font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 74; font-weight:500;font-size:var(--t-rotulo);letter-spacing:.14em;text-transform:uppercase;opacity:.42} .rama:first-child .quien-corre{left:0} .rama.abierta .quien-corre{color:var(--vivo);opacity:1} @media(max-width:900px){.abanico{grid-template-columns:1fr} .rama{min-height:auto;border-left:0;padding-left:0;padding-bottom:1.2rem; border-top:1px solid color-mix(in srgb,currentColor 12%,transparent)} .rama:first-child{border-top:0} .rama .quien-corre{position:static;margin-top:.9rem;left:auto;right:auto}} /* ══ cifras ══ */ .numeros{border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)} .numero{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:baseline;padding:1.4rem 0; border-bottom:1px solid color-mix(in srgb,currentColor 16%,transparent)} .numero .v{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 88; font-weight:300;font-size:clamp(2.8rem,9vw,7rem);letter-spacing:-.055em;line-height:.82; font-variant-numeric:tabular-nums} .numero .k{text-align:right;font-size:.94rem;opacity:.58;padding-bottom:.5rem;max-width:26ch;justify-self:end} /* ══ cierres ══ */ .cierre{margin-top:clamp(3rem,9vh,5rem);padding-top:clamp(2rem,6vh,3rem); border-top:1px solid color-mix(in srgb,currentColor 16%,transparent); display:flex;gap:2rem;flex-wrap:wrap;align-items:flex-end} .cierre h3{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 90; font-weight:300;letter-spacing:-.045em;font-size:clamp(1.5rem,3.6vw,2.5rem); line-height:1;max-width:18ch} .boton{display:inline-block;margin-left:auto;text-decoration:none; font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-variation-settings:'wdth' 84; font-weight:500;font-size:var(--t-rotulo);padding:.8rem 1.6rem;border-radius:99px; border:1px solid color-mix(in srgb,currentColor 30%,transparent); transition:background .35s,border-color .35s} .boton:hover{border-color:currentColor;background:color-mix(in srgb,currentColor 8%,transparent)} /* ══ pie ══ */ .contra{padding:clamp(4rem,11vh,7rem) 0 3rem;position:relative;z-index:1; background:var(--n6);color:var(--papel)} .contra .fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem; padding-top:1.7rem;border-top:1px solid rgba(243,241,234,.18)} .contra dd{margin-top:.55rem;font-size:.92rem;opacity:.68;line-height:1.5} /* ══ pendientes ══ */ .marcaje{display:inline-block;font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wdth' 74;font-weight:600;font-size:var(--t-rotulo);letter-spacing:.16em; text-transform:uppercase;color:var(--falta);border:1px solid currentColor;border-radius:99px; padding:.28rem .8rem;margin-bottom:1.4rem} .gib{opacity:.35;user-select:none} /* ══ tramos oscuros ══ */ .oscuro{color:var(--papel)} .oscuro .lado.si{color:#7FD8E4} @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .sube,.portada h1 i,.bajada>div{transform:none!important} .desl{transform:none!important;opacity:1!important} .cable{transform:scaleY(1)!important} .horca{transform:scaleX(1)!important} } /* ═══════════════════════════════════════════════════════════════════ FICHA DE MARCA · todo va acotado a #p-marca-tera La ficha comparte el sistema del sitio —retícula, tipografía, rampa, revelado, capa de fondo— y sólo agrega lo suyo. Va acotada a propósito: ninguna regla de aquí puede alcanzar la portada de Inicio, que está sellada. ═══════════════════════════════════════════════════════════════════ */ #p-marca-tera .encabeza{min-height:88svh;display:flex;align-items:center; padding:clamp(2rem,6vh,4rem) 0 clamp(3rem,8vh,5rem)} #p-marca-tera .encabeza .wrap{width:100%} #p-marca-tera .dosf{display:grid;grid-template-columns:1fr minmax(300px,44%); gap:clamp(2rem,5vw,4.5rem);align-items:stretch} @media(max-width:900px){#p-marca-tera .dosf{grid-template-columns:1fr;gap:2.4rem}} #p-marca-tera .ident{display:flex;flex-direction:column;justify-content:center} .pagina:not(#p-inicio) h1{font-weight:400} /* El pie viejo repite la firma y además explica los dos nombres. Fuera de Inicio no se muestra: la ficha ya cierra con su colofón. */ body[data-ruta]:not([data-ruta="inicio"]) .contra{display:none} #p-marca-tera h1.disp{font-size:var(--t-titulo); font-variation-settings:'wght' 220,'wdth' 98;line-height:1} #p-marca-tera .ident .bajo{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 320,'wdth' 94;margin-top:1.4rem;max-width:40ch; letter-spacing:-.02em;font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.45;opacity:.82} /* La vitrina no lleva fondo ni mancha: la botella se apoya en el aire de la retícula y lo único que la asienta es su sombra. */ #p-marca-tera .plano{position:relative;min-height:clamp(22rem,62svh,38rem)} #p-marca-tera .plano img{position:absolute;z-index:1;left:50%;top:50%; transform:translate(-50%,-50%) scale(.97);max-height:96%;max-width:74%;width:auto;opacity:0; filter:drop-shadow(0 42px 46px rgba(0,0,0,.32)) drop-shadow(0 10px 16px rgba(20,58,51,.12)); transition:opacity .9s cubic-bezier(.4,0,.2,1),transform .9s cubic-bezier(.4,0,.2,1)} #p-marca-tera .plano img.viva{opacity:1;transform:translate(-50%,-50%) scale(1)} @media(max-width:900px){ #p-marca-tera .plano{min-height:clamp(18rem,48svh,25rem);order:-1}} #p-marca-tera .tramo{padding:clamp(3.4rem,8.5vh,5.4rem) 0} #p-marca-tera .encabeza + .tramo{padding-top:clamp(1.2rem,3vh,2rem)} /* Los datos del producto se componen, no se narran. Cada uno lleva su rótulo y ocupa su columna: se leen de un vistazo y ninguno se cuelga de otro con una «y». Los sabores y los formatos no entran aquí porque los enseña Presentaciones. */ #p-marca-tera .rasgos{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,4vw,3.5rem);border-top:1px solid color-mix(in srgb,currentColor 18%,transparent); padding-top:clamp(1.4rem,3.5vh,2rem)} @media(max-width:760px){#p-marca-tera .rasgos{grid-template-columns:1fr;gap:1.8rem}} #p-marca-tera .rasgo .et{margin-bottom:.85rem} #p-marca-tera .rasgo p{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 300,'wdth' 94;font-size:var(--t-dato); letter-spacing:-.025em;line-height:1.25;max-width:22ch} #p-marca-tera .lee{max-width:62ch;font-size:1.06rem;line-height:1.62} #p-marca-tera .lee + .lee{margin-top:1.1rem} /* ── presentaciones · el anaquel ── Las tres botellas de pie sobre un mismo filete y a escala real entre ellas: el natural es de 280 ml y se ve más bajo que los de 475. La estructura la dan la línea y la sombra de contacto. Sin manchas de luz: cualquier degradado que sobresalga de su columna lo recorta el clip-path del revelado y sale rectángulo — ése era el defecto. */ #p-marca-tera .anaquel{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,3rem);align-items:end;margin-top:clamp(2.4rem,6vh,3.6rem); border-bottom:1px solid color-mix(in srgb,currentColor 28%,transparent)} #p-marca-tera .frasco{display:flex;align-items:flex-end;justify-content:center; height:clamp(15rem,40vh,24rem)} #p-marca-tera .frasco img{max-height:100%;max-width:100%;width:auto; filter:drop-shadow(0 11px 13px rgba(0,0,0,.32))} #p-marca-tera .frasco.chica img{max-height:80%} #p-marca-tera .rotulos{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,3rem);padding-top:clamp(.9rem,2.4vh,1.3rem)} #p-marca-tera .rotulos h3{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 480,'wdth' 94;font-weight:400; font-size:var(--t-dato);letter-spacing:-.02em} #p-marca-tera .rotulos .dato{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 420,'wdth' 88;font-size:var(--t-pie); opacity:.62;margin-top:.42rem} @media(max-width:760px){ #p-marca-tera .frasco{height:clamp(9rem,26vh,14rem)} #p-marca-tera .anaquel,#p-marca-tera .rotulos{gap:.8rem} #p-marca-tera .rotulos h3{font-size:var(--t-pie)} #p-marca-tera .rotulos .dato{font-size:var(--t-rotulo)}} /* el cierre es un colofón, no una sección: los dos nombres se firman y el color lo pone la capa única, nunca un fondo propio */ /* ══ EL SELLO ══ la firma al pie de una ficha: símbolo y nombre, nada más. No pide media pantalla; un sello ocupa lo que ocupa un sello. */ .rubrica{padding:clamp(3.4rem,9vh,5.5rem) 0 clamp(4rem,11vh,6.5rem)} .sello{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.15rem)} .sello .simbolo{display:block;height:clamp(34px,4.4vw,50px);width:auto;color:var(--vivo)} .sello .rs{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 520,'wdth' 76;font-size:var(--t-rotulo); letter-spacing:.2em;text-transform:uppercase;opacity:.62} /* ══ LA SEÑAL ══ Navegación dentro del sitio: rótulo y flecha, sin subrayado. El subrayado dibuja una caja alrededor del texto y ella ya dijo que no le convencen los delineados; la flecha dice a dónde va sin encerrar nada. Se mueve sólo la flecha —el rótulo se queda quieto, que es lo que hace que se sienta fino y no un botón de plantilla. */ .senal{display:inline-flex;align-items:baseline;gap:.6rem; margin-top:clamp(2.4rem,6vh,3.4rem); font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 520,'wdth' 80;font-size:var(--t-cuerpo); letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:inherit} .senal .fl{flex:0 0 auto;width:1.45rem;height:auto;transform:translateY(.16em); transition:transform .4s cubic-bezier(.4,0,.2,1)} .senal:hover .fl{transform:translateY(.16em) translateX(.5rem)} /* Sobre teal el acento sí alcanza contraste (5.22 medido), así que ahí la flecha se enciende en aqua. Sobre crema no —2.12— y se queda en tinta. */ .senal.viva .fl{color:var(--accion)} .senal.corta{margin-top:clamp(1.6rem,4vh,2.4rem)} /* Estado, no acción: una ficha que todavía no existe no se disfraza de enlace. Sin flecha, sin color, sin subrayado. */ .pendiente{display:inline-block;margin-top:clamp(1.6rem,4vh,2.4rem); font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 440,'wdth' 80;font-size:var(--t-rotulo); letter-spacing:.18em;text-transform:uppercase;opacity:.55} .porhacer{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 400,'wdth' 92;font-size:1rem;max-width:44ch; margin-top:1.6rem;opacity:.6} /* Fuera de Inicio no hay aterrizaje: el logotipo en vuelo se retira y el del menú, que en Inicio vive oculto debajo, toma su lugar. */ body[data-ruta]:not([data-ruta="inicio"]) #vuelo{opacity:0;pointer-events:none} body[data-ruta]:not([data-ruta="inicio"]) .wm{visibility:visible} /* ══ ÍNDICE DE MARCAS ══ Una banda por marca, cada una con su escalón de la rampa. La pantalla de Inicio es una lista que se enciende al señalar; aquí cada marca ocupa su propio momento y la banda entera es el enlace. */ #p-marcas .banda{min-height:76svh;display:flex;align-items:center} #p-marcas .tira{display:block;width:100%;text-decoration:none} #p-marcas .dosf{display:grid;grid-template-columns:1fr minmax(280px,42%); gap:clamp(2rem,5vw,4.5rem);align-items:center; padding:clamp(2.5rem,7vh,4.5rem) 0} @media(max-width:900px){#p-marcas .dosf{grid-template-columns:1fr;gap:2rem}} #p-marcas .ident{display:flex;flex-direction:column;justify-content:center} #p-marcas .titulo-marca{font-size:var(--t-titulo);margin-top:0 !important; font-variation-settings:'wght' 240,'wdth' 98;line-height:1;margin-top:1rem} #p-marcas .bajo{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 320,'wdth' 94;font-size:var(--t-dato); letter-spacing:-.02em;margin-top:1.1rem;opacity:.8} /* En el índice el fondo YA es el acento, así que la señal no puede ir en acento —se perdería. Va en el color del texto de la banda y es la flecha la que corre cuando la banda entera se señala. */ #p-marcas .senal{margin-top:clamp(1.8rem,4.5vh,2.6rem)} #p-marcas .tira:hover .senal .fl{transform:translateY(.16em) translateX(.5rem)} #p-marcas .campo-marca{position:relative;display:flex;align-items:center; justify-content:center;height:clamp(16rem,46svh,28rem)} #p-marcas .campo-marca img{position:relative;z-index:1;max-height:100%;max-width:74%; width:auto;height:auto;filter:drop-shadow(0 26px 34px rgba(0,0,0,.32)) drop-shadow(0 6px 10px rgba(20,58,51,.1)); transform:scale(.985);transition:transform .7s cubic-bezier(.4,0,.2,1)} #p-marcas .campo-marca img.placa-marca{max-height:42%;max-width:72%} /* El ícono suelto de Parama era un recorte del logotipo, no el logotipo. La palabra completa es ancha —siete a uno— así que no puede compartir la caja cuadrada del símbolo: lleva su propia proporción y su propio ancho. */ #p-marcas .palabra-marca{width:80% !important;aspect-ratio:1400/199 !important} #p-marcas .simbolo-marca{position:relative;z-index:1;width:46%;aspect-ratio:4/3; -webkit-mask:var(--m) no-repeat center/contain;mask:var(--m) no-repeat center/contain; background:currentColor;opacity:.9;transform:scale(.985); transition:transform .7s cubic-bezier(.4,0,.2,1)} #p-marcas .tira:hover .campo-marca img, #p-marcas .tira:hover .simbolo-marca{transform:scale(1)} /* ══ NOSOTROS ══ acotado a #p-nosotros Fondos sobre la rampa aprobada, de crema a teal: la página desciende. Sin bloques ni manchas — el mismo criterio que el resto del sitio. */ #p-nosotros .tramo{padding:clamp(4rem,11vh,7rem) 0} #p-nosotros .cabeza-nosotros{min-height:82svh;display:flex;align-items:center; padding-top:clamp(6rem,14vh,9rem)} #p-nosotros .cabeza-nosotros .wrap{width:100%} #p-nosotros h1.disp{font-size:var(--t-titulo);font-variation-settings:'wght' 220,'wdth' 98; line-height:1;margin-top:1rem;font-weight:400} #p-nosotros .entrada{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 320,'wdth' 94;font-size:var(--t-dato); letter-spacing:-.02em;line-height:1.35;margin-top:1.2rem;max-width:34ch;opacity:.82} #p-nosotros .rubro-nosotros{font-size:var(--t-seccion);font-variation-settings:'wght' 260,'wdth' 98; line-height:1.04;margin-top:1.1rem;max-width:22ch;font-weight:400} #p-nosotros .et.sub{margin-top:clamp(2.6rem,7vh,4rem);display:block} #p-nosotros .et.sub + .lee-nosotros{margin-top:clamp(1.2rem,3vh,1.8rem)} #p-nosotros .lee-nosotros{max-width:62ch;margin-top:clamp(1.8rem,4.5vh,2.6rem)} #p-nosotros .lee-nosotros p{font-size:var(--t-cuerpo);line-height:1.62} #p-nosotros .lee-nosotros p + p{margin-top:1.05rem} /* la pila de valores: la mecánica de esta página */ #p-nosotros .pila{margin-top:clamp(2.4rem,6vh,3.6rem); border-top:1px solid color-mix(in srgb,currentColor 20%,transparent)} #p-nosotros .valor-nosotros{padding:clamp(1.6rem,4.5vh,2.8rem) 0; border-bottom:1px solid color-mix(in srgb,currentColor 16%,transparent); display:grid;grid-template-columns:minmax(9rem,32%) 1fr;gap:clamp(1.2rem,3vw,2.6rem); align-items:baseline;opacity:.4; transition:opacity .6s cubic-bezier(.4,0,.2,1)} @media(max-width:760px){#p-nosotros .valor-nosotros{grid-template-columns:1fr;gap:.6rem}} #p-nosotros .valor-nosotros h3{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 300,'wdth' 96;font-weight:400; font-size:var(--t-rubro);letter-spacing:-.03em;line-height:1.06; transition:font-variation-settings .6s cubic-bezier(.4,0,.2,1)} #p-nosotros .valor-nosotros p{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 400,'wdth' 92;font-size:var(--t-cuerpo); line-height:1.5;max-width:46ch} #p-nosotros .valor-nosotros.enfoco{opacity:1} #p-nosotros .valor-nosotros.enfoco h3{font-variation-settings:'wght' 480,'wdth' 96} @media(prefers-reduced-motion:reduce){#p-nosotros .valor-nosotros{opacity:.85}} /* ══ CONTACTO ══ acotado a #p-contacto Sin mecánica y sin formulario. Las tres rutas son el contenido: cada una dice a quién sirve, con qué dirección y qué mandar. La dirección va grande porque es lo que la gente viene a buscar. */ #p-contacto .tramo{padding:clamp(4rem,11vh,7rem) 0} #p-contacto .abre-contacto{min-height:64svh;display:flex;align-items:center; padding-top:clamp(6rem,14vh,9rem)} #p-contacto .abre-contacto .wrap{width:100%} #p-contacto h1.disp{font-size:var(--t-titulo);font-variation-settings:'wght' 220,'wdth' 98; line-height:1;margin-top:1rem;font-weight:400} #p-contacto .entrada{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 320,'wdth' 94;font-size:var(--t-dato); letter-spacing:-.02em;line-height:1.35;margin-top:1.2rem;max-width:36ch;opacity:.82} #p-contacto .rutas{border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)} #p-contacto .ruta{display:grid;grid-template-columns:minmax(10rem,26%) 1fr; gap:clamp(1rem,3vw,2.4rem);align-items:baseline;text-decoration:none; padding:clamp(1.8rem,5vh,3rem) 0; border-bottom:1px solid color-mix(in srgb,currentColor 16%,transparent)} @media(max-width:760px){#p-contacto .ruta{grid-template-columns:1fr;gap:.7rem}} #p-contacto .ruta .et{padding-top:.5rem} #p-contacto .dir{display:block;font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 300,'wdth' 96;font-size:var(--t-seccion); letter-spacing:-.035em;line-height:1.05; border-bottom:1px solid color-mix(in srgb,currentColor 0%,transparent); transition:border-color .45s,font-variation-settings .45s} #p-contacto .ruta:hover .dir{border-bottom-color:color-mix(in srgb,currentColor 45%,transparent); font-variation-settings:'wght' 400,'wdth' 96} #p-contacto .cuerpo-ruta{min-width:0} #p-contacto .pie-ruta{display:block;font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 400,'wdth' 92;font-size:var(--t-cuerpo); line-height:1.5;max-width:52ch;margin-top:.9rem;opacity:.7} #p-contacto .donde{margin-top:clamp(3rem,8vh,4.5rem); display:grid;grid-template-columns:minmax(10rem,26%) 1fr;gap:clamp(1rem,3vw,2.4rem)} @media(max-width:760px){#p-contacto .donde{grid-template-columns:1fr;gap:.7rem}} #p-contacto .donde p{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 400,'wdth' 92;font-size:var(--t-cuerpo); line-height:1.5;max-width:52ch;opacity:.8} /* ═══════════════════════════════════════════════════════════════════ NOSOTROS · sellada 27 ago 2026 — todo acotado a #p-nosotros Ritmo: ninguna pantalla se arma igual. Portada tipográfica, dos columnas, columna centrada, una a sangre, una frase sola, tres bloques, firma. ═══════════════════════════════════════════════════════════════════ */ #p-nosotros #aire{position:fixed;inset:-20%;z-index:-2;pointer-events:none;filter:blur(110px); opacity:var(--aire,0);transition:opacity 1.2s cubic-bezier(.4,0,.2,1)} #p-nosotros #aire i{position:absolute;display:block;border-radius:50%;mix-blend-mode:soft-light} #p-nosotros #aire .a{width:60vw;height:60vw;left:-8vw;top:4vh;background:var(--agua);animation:d1 54s ease-in-out infinite alternate} #p-nosotros #aire .b{width:46vw;height:46vw;right:-6vw;top:36vh;background:var(--vivo);animation:d2 68s ease-in-out infinite alternate} #p-nosotros #aire .c{width:38vw;height:38vw;left:26vw;bottom:-8vh;background:var(--miel);animation:d3 61s ease-in-out infinite alternate} @keyframes d1{to{transform:translate3d(6vw,10vh,0) scale(1.14)}} @keyframes d2{to{transform:translate3d(-8vw,-12vh,0) scale(1.2)}} @keyframes d3{to{transform:translate3d(10vw,-8vh,0) scale(.88)}} @media(prefers-reduced-motion:reduce){#p-nosotros #aire i{animation:none}} #p-nosotros .abre{min-height:90svh;display:flex;align-items:center;padding:14vh 0 8vh} #p-nosotros .abre h1{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:210; font-stretch:100%;font-size:var(--t-titulo);letter-spacing:-.05em;line-height:.96; margin-top:1.2rem;max-width:15ch} #p-nosotros .abre .baja{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:330; font-stretch:94%;font-size:var(--t-dato);letter-spacing:-.025em;margin-top:1.8rem; max-width:34ch;opacity:.72} #p-nosotros .quienes{padding:10vh 0} #p-nosotros .quienes .wrap{display:grid;grid-template-columns:1fr minmax(240px,38%); gap:clamp(2rem,6vw,5rem);align-items:center} @media(max-width:820px){#p-nosotros .quienes .wrap{grid-template-columns:1fr;gap:2.5rem}} #p-nosotros .relato{padding:12vh 0 16vh;position:relative} #p-nosotros .relato .col{max-width:52ch;margin:0 auto;text-align:left} #p-nosotros .margen{position:sticky;top:40svh;height:0;float:left; margin-left:calc(-1 * clamp(5rem,13vw,12rem))} @media(max-width:900px){#p-nosotros .margen{position:static;float:none;margin:0 auto 2.5rem; height:auto;max-width:52ch}} #p-nosotros .anio{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:300; font-stretch:88%;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1;letter-spacing:-.035em; display:flex;font-variant-numeric:tabular-nums;opacity:.85} #p-nosotros .dig{display:block;width:.56em;height:1em;overflow:hidden;position:relative} #p-nosotros .dig i{position:absolute;inset:0;display:block;font-style:normal; transition:transform .7s cubic-bezier(.32,.72,.24,1)} #p-nosotros .dig b{display:block;height:1em;font-weight:inherit;text-align:center} #p-nosotros .margen .et{margin-top:.6rem;font-size:.72rem;opacity:.36} #p-nosotros .momento{--k:0;margin-bottom:clamp(2.4rem,6vh,3.8rem); font-family:Newsreader,Georgia,"Times New Roman",serif;font-weight:300; font-size:clamp(1.14rem,1.6vw,1.34rem);line-height:1.64;max-width:none; opacity:calc(.26 + var(--k) * .74);filter:blur(calc((1 - var(--k)) * .9px)); transition:opacity .5s linear,filter .5s linear} #p-nosotros .sangre{position:relative;min-height:86svh;display:flex;align-items:flex-end; padding:0 0 clamp(3rem,9vh,6rem)} #p-nosotros .sangre .wrap{position:relative;z-index:2;width:100%} #p-nosotros .sangre h2{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:240; font-stretch:98%;font-size:var(--t-seccion);letter-spacing:-.04em;line-height:1.06; max-width:20ch;margin-top:.9rem} #p-nosotros .filo{min-height:76svh;display:flex;align-items:center;text-align:center} #p-nosotros .filo .wrap{width:100%} #p-nosotros .filo h2{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:230; font-stretch:98%;font-size:clamp(1.9rem,4.2vw,3.1rem);letter-spacing:-.045em; line-height:1.04;max-width:20ch;margin:1.2rem auto 0} #p-nosotros .apoyo{max-width:50ch;margin:clamp(2rem,5vh,3rem) auto 0;text-align:left} #p-nosotros .vals{padding:10vh 0 16vh} #p-nosotros .tres{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,4vw,3.4rem); margin-top:clamp(2.4rem,6vh,3.6rem); border-top:1px solid color-mix(in srgb,currentColor 22%,transparent); padding-top:clamp(1.6rem,4vh,2.4rem)} @media(max-width:820px){#p-nosotros .tres{grid-template-columns:1fr;gap:2.4rem}} #p-nosotros .val{--k:0} #p-nosotros .val h3{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-weight:calc(280 + var(--k) * 220);font-stretch:calc(72% + var(--k) * 40%); font-size:clamp(1.4rem,2.6vw,2.1rem);letter-spacing:calc(-.012em - var(--k) * .026em); line-height:1.02;transition:font-weight .5s linear,font-stretch .5s linear} #p-nosotros .val p{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:400; font-stretch:92%;font-size:var(--t-cuerpo);line-height:1.5;margin-top:.9rem;max-width:32ch; opacity:calc(.42 + var(--k) * .58);transition:opacity .5s linear} #p-nosotros .cierra{min-height:66svh;display:flex;align-items:center;padding:8vh 0 12vh} #p-nosotros .cierra .wrap{display:grid;grid-template-columns:1fr minmax(220px,32%); gap:clamp(2rem,6vw,5rem);align-items:center} @media(max-width:820px){#p-nosotros .cierra .wrap{grid-template-columns:1fr;gap:2.5rem}} #p-nosotros .cierra h2{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:250; font-stretch:98%;font-size:var(--t-seccion);letter-spacing:-.04em;line-height:1.08; margin-top:1rem;max-width:24ch} #p-nosotros .cierra p{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:400; font-stretch:92%;font-size:var(--t-cuerpo);line-height:1.5;max-width:46ch; margin-top:1.3rem;opacity:.72} /* huecos de fotografía: cada uno dice qué va y qué no puede salir */ #p-nosotros .foto{position:relative;display:flex;flex-direction:column;justify-content:flex-end; border:1px dashed color-mix(in srgb,currentColor 34%,transparent); background:color-mix(in srgb,currentColor 6%,transparent);padding:clamp(1rem,2.5vw,1.6rem)} #p-nosotros .foto.vert{aspect-ratio:3/4} #p-nosotros .foto.llena{position:absolute;inset:0;border-left:0;border-right:0;z-index:1; justify-content:center;align-items:center;text-align:center} #p-nosotros .foto .num{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:600; font-stretch:74%;font-size:var(--t-rotulo);letter-spacing:.18em;text-transform:uppercase;opacity:.6} #p-nosotros .foto .que{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:400; font-stretch:92%;font-size:var(--t-pie);line-height:1.4;margin-top:.5rem;opacity:.62;max-width:34ch} #p-nosotros .foto.llena .que{margin-left:auto;margin-right:auto} /* ══ PIE ══ La señalética del manual es: marca, filete a todo lo ancho, destino en versalitas con flecha, y el destino a la misma escala que la marca —no en letra chica. Ese patrón se aplica aquí a lo único que el pie tiene y la barra de arriba no puede tener: el correo. Teal porque el manual dice teal para fondos, y el hilo miel vertical de la firma de correo ancla el bloque legal. */ #pie{padding:clamp(5rem,13vh,8rem) 0 clamp(1.8rem,4.5vh,2.8rem); background:var(--n5);color:var(--n1)} #pie .marca-pie{--marca:url("data:image/svg+xml,"); display:block;width:min(100%,clamp(12rem,26vw,19rem)); margin-bottom:clamp(2.6rem,7vh,4rem)} #pie .wm-pie{display:block;width:100%;height:auto} /* Un pie no es un segundo menú. La barra de arriba es fija y lleva las tres páginas siempre a la vista, así que repetirlas abajo —con los mismos rótulos y los mismos descriptores— no agrega un solo destino: sólo obliga a leer dos veces lo mismo. Lo que el pie sí tiene y la barra no puede tener es el contacto, que por decisión no es página. Así que el pie ES el contacto: marca, la dirección de correo a escala de letrero, y la firma legal. La dirección es el dato, no el rótulo; por eso lo grande es el correo y «Escríbenos» queda arriba como etiqueta. */ #pie .contacto{border-top:1px solid color-mix(in srgb,currentColor 22%,transparent); border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent); padding:clamp(1.8rem,4.5vh,2.6rem) 0} #pie .contacto .et{display:block;opacity:.5;margin-bottom:clamp(.7rem,1.8vh,1rem)} /* El correo es un dato, no un destino. Enlazarlo lo convierte en «te llevo a otro lado», que es justo lo que no queremos: el pie no manda al contacto, el pie ES el contacto. Se lee, se copia, se acabó. */ #pie .correo{display:block; font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:400; font-variation-settings:'wght' 480,'wdth' 80; font-size:clamp(1.1rem,3.1vw,2.15rem);letter-spacing:.02em; overflow-wrap:anywhere} #pie .base{display:flex;justify-content:space-between;align-items:flex-start; gap:1.5rem 2.5rem;flex-wrap:wrap;margin-top:clamp(2.4rem,6vh,3.4rem); font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 400,'wdth' 88;font-size:var(--t-pie)} /* Columna flex, no bloques sueltos: con display:block los saltos de línea del HTML se vuelven cajas anónimas y empujaban el primer renglón 29px hacia abajo, así que el hilo miel arrancaba antes que el texto. */ #pie .base .entidad{display:flex;flex-direction:column;gap:.2rem; border-left:2px solid var(--calor);padding-left:1rem;opacity:.62} #pie .base a{text-decoration:none;color:inherit;opacity:.62;transition:opacity .3s} #pie .base a:hover{opacity:1} /* ══ MAQUILA ══ Los datos se componen, no se narran: cada uno su rótulo y su columna, se leen de un vistazo. Cuatro son los que el cliente pregunta antes de levantar el teléfono —formato, mínimo, arranque, qué corre la línea— y publicarlos filtra al prospecto antes de la primera llamada. Nada de merma, de limpieza de línea ni de cómo se ajusta la máquina: eso es operación, no argumento de venta. */ #p-envasado .datos{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,4vw,3.5rem); border-top:1px solid color-mix(in srgb,currentColor 18%,transparent); padding-top:clamp(1.4rem,3.5vh,2rem)} @media(max-width:900px){#p-envasado .datos{grid-template-columns:repeat(2,1fr);gap:2rem 2.5rem}} @media(max-width:560px){#p-envasado .datos{grid-template-columns:1fr;gap:1.8rem}} #p-envasado .dato .et{margin-bottom:.85rem} #p-envasado .dato p{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 300,'wdth' 94;font-size:var(--t-dato); letter-spacing:-.025em;line-height:1.25;max-width:20ch} #p-envasado .lee{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 320,'wdth' 94;font-size:var(--t-dato); letter-spacing:-.02em;line-height:1.4;max-width:34ch;margin-top:1.3rem;opacity:.8} /* ══ MAQUILA EN INICIO ══ Las cifras van pesadas y anchas, el mismo par tipográfico que los verbos de la portada: el dato es lo que pesa y el rótulo sólo lo nombra. Es la primera vez en todo Inicio que aparece un número, y un número es lo único que un cliente de maquila necesita ver para saber si le sirves. */ #p-inicio .maq-inicio{min-height:78svh;display:flex;align-items:center; padding:clamp(4rem,10vh,7rem) 0} #p-inicio .maq-inicio .wrap{width:100%} #p-inicio .maq-inicio h2{font-size:var(--t-seccion); font-variation-settings:'wght' 240,'wdth' 98;letter-spacing:-.04em; line-height:1.04;margin-top:1.1rem;max-width:20ch} #p-inicio .maq-inicio .lee{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 330,'wdth' 94;font-size:var(--t-dato); letter-spacing:-.02em;line-height:1.35;max-width:34ch;margin-top:1.2rem;opacity:.82} #p-inicio .datos-inicio{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,4vw,3.5rem);margin-top:clamp(2.4rem,6.5vh,3.6rem); border-top:1px solid color-mix(in srgb,currentColor 24%,transparent); padding-top:clamp(1.3rem,3.2vh,1.9rem)} @media(max-width:820px){#p-inicio .datos-inicio{grid-template-columns:1fr;gap:1.6rem}} #p-inicio .datos-inicio .et{display:block;margin-bottom:.65rem;opacity:.55} #p-inicio .datos-inicio p{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 560,'wdth' 104;font-weight:400; font-size:clamp(1.02rem,2.05vw,1.58rem);letter-spacing:-.03em; line-height:1.15;max-width:22ch;text-wrap:balance} /* Una cifra no se parte: «De 30 gramos a 1 / kilo» deja la unidad sola en el segundo renglón y el dato deja de leerse de un golpe. */ #p-inicio .datos-inicio p .junto{white-space:nowrap} /* ══ NOSOTROS EN INICIO ══ */ #p-inicio .nos-inicio{min-height:72svh;display:flex;align-items:center; padding:clamp(3.5rem,9vh,6rem) 0} #p-inicio .nos-inicio .wrap{width:100%} #p-inicio .nos-inicio .dosf{display:grid; grid-template-columns:1fr minmax(240px,36%); gap:clamp(2rem,6vw,5rem);align-items:center} @media(max-width:860px){#p-inicio .nos-inicio .dosf{grid-template-columns:1fr;gap:2.4rem}} #p-inicio .nos-inicio h2{font-size:var(--t-seccion); font-variation-settings:'wght' 240,'wdth' 98;letter-spacing:-.04em; line-height:1.04;margin-top:1.1rem;max-width:16ch} #p-inicio .nos-inicio .lee{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 330,'wdth' 94;font-size:var(--t-dato); letter-spacing:-.02em;line-height:1.35;max-width:32ch;margin-top:1.2rem;opacity:.82} /* El hueco de foto se marca, no se rellena con banco de imágenes: una pantalla sin foto se lee como contención, una con foto de archivo se lee como que no hay planta. */ #p-inicio .nos-inicio .hueco{border:1px dashed color-mix(in srgb,currentColor 34%,transparent); aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end; padding:clamp(1.1rem,2.6vw,1.6rem);gap:.5rem} #p-inicio .nos-inicio .hueco p{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 400,'wdth' 92;font-size:var(--t-pie); line-height:1.4;opacity:.6;max-width:30ch} /* ══ LA BARRA NO PUEDE COMERSE LOS RÓTULOS ══ El encabezado es fijo y mide entre 90 y 118px según la pantalla. Las secciones de Inicio centran su contenido, así que cuando el bloque crece el primer rótulo se acomoda justo en la banda de la barra y desaparece debajo. Medido en teléfono: Marcas aterrizaba en y=93, Maquila en 90 y Nosotros en 82, con la barra terminando en 94 — los tres tapados. Va al final a propósito: las reglas de arriba fijan el relleno con el atajo de dos valores, que reescribe el lado superior completo. */ @media(max-width:960px){ #p-inicio .bifurca,#p-inicio .maq-inicio,#p-inicio .nos-inicio{ padding-top:clamp(8.5rem,19vh,11rem)} } /* Los atributos width y height del HTML existen para reservar el espacio mientras la imagen carga, pero el navegador los toma como medidas fijas. Sin height:auto, max-width y max-height recortan por separado y deforman. Esto lo cierra para todo el sitio. */ img[width]{height:auto} /* ══ FOCO DE TECLADO ══ Antes era el anillo por defecto del navegador. Va en currentColor porque el sitio cambia de fondo en cada tramo: el color del texto siempre contrasta con el suelo donde está parado, así que el anillo también. Sólo :focus-visible, para que no aparezca al hacer clic con el ratón. */ :focus{outline:none} :focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:3px} .pildora:focus-visible{outline-color:var(--tinta);outline-offset:5px} /* ══ MOVIMIENTO REDUCIDO ══ Había 45 reglas de transición y animación y sólo cuatro bloques que las apagaban. Quien pidió menos movimiento en su sistema recibía casi todo el recorrido igual. Esto lo apaga completo, incluido el desplazamiento suave del ancla y las animaciones de revelado. */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important} html{scroll-behavior:auto !important} } /* ══ ACENTOS DEL MANUAL ══ Aqua es acción, miel es calidez comercial. Medido: aqua da 2.12 y miel 1.92 contra crema, así que como texto sobre fondo claro son ilegibles. Por eso la acción sobre claro va en píldora rellena con tinta encima (7.17 y 7.91), y sólo sobre teal el acento puede ser el texto (5.22). */ .pildora{display:inline-flex;align-items:center;gap:.7rem;align-self:flex-start; width:fit-content; font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 520,'wdth' 94;font-size:var(--t-cuerpo); letter-spacing:-.01em;text-decoration:none; background:var(--accion);color:var(--tinta) !important; padding:.9rem 1.7rem;border-radius:99px; transition:transform .35s cubic-bezier(.4,0,.2,1),filter .35s} .pildora .fl{flex:0 0 auto;width:1.4rem;height:auto; transition:transform .35s cubic-bezier(.4,0,.2,1)} .pildora:hover{transform:translateY(-2px);filter:brightness(1.06)} .pildora:hover .fl{transform:translateX(.3rem)} .pildora.calida{background:var(--calor)} .enlace-accion{color:var(--accion);text-decoration:none; font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-variation-settings:'wght' 480,'wdth' 92;transition:opacity .3s} .enlace-accion:hover{opacity:.75} /* ══ EL DESTELLO ══ El reflejo que cruza la marca una sola vez al llegar a ella. Primer intento: una banda blanca con mix-blend-mode sobre la caja. No se veía —lo comprobé cuadro por cuadro. La razón es simple: sobre teal el overlay apenas sube el fondo de 20 a 40, y sobre las letras, que ya son crema, sumar blanco no hace nada. Un reflejo no ilumina el aire alrededor de un letrero; recorre el letrero. Así que la banda se recorta con la forma del logotipo (la misma máscara del kit) y lleva borde oscuro y núcleo blanco: al pasar, la letra baja un instante hacia el teal y destella. Eso sí es un reflejo especular. */ .destello{position:relative} .destello::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0; background:linear-gradient(100deg, transparent 30%, rgba(20,58,51,.46) 42%, #ffffff 50%, rgba(20,58,51,.46) 58%, transparent 70%); background-size:260% 100%;background-position:-80% 0;background-repeat:no-repeat; -webkit-mask:var(--marca) no-repeat left center/contain; mask:var(--marca) no-repeat left center/contain} .destello.brilla::after{animation:cruza 1.5s cubic-bezier(.36,.1,.3,1) .35s both} @keyframes cruza{ 0% {background-position:-80% 0;opacity:0} 12% {opacity:1} 88% {opacity:1} 100%{background-position:180% 0;opacity:0}} @media(prefers-reduced-motion:reduce){.destello.brilla::after{animation:none}}