/* ========================================================================== EL SOCIO — base.css Sistema de diseño compartido (tokens, reset, nav, footer, botones). Cárgalo SIEMPRE antes de estilos.css o catalogo.css. ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root { /* Color — paleta "horno & kraft" */ --horno: #150f0d; /* fondo base, marrón tostado casi negro */ --corteza: #211815; /* superficie elevada */ --corteza-2: #2e211c; /* superficie hover / bordes suaves */ --kraft: #efe3d0; /* texto principal, papel de saco */ --miga: #a3937f; /* texto secundario */ --yema: #f6b93b; /* acento primario, yema de huevo */ --yema-hover: #ffcb5c; --hoja: #7bae8e; /* disponible */ --ladrillo: #d2604a; /* agotado */ --linea: rgba(239, 227, 208, 0.12); --linea-fuerte: rgba(239, 227, 208, 0.22); /* Tipografía */ --display: "Bricolage Grotesque", "Arial Black", sans-serif; --texto: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace; --t-xs: 0.72rem; --t-sm: 0.84rem; --t-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem); --t-lg: clamp(1.1rem, 1rem + 0.6vw, 1.35rem); --t-titulo: clamp(1.9rem, 1.35rem + 2.6vw, 3.4rem); --t-hero: clamp(2.6rem, 1.6rem + 6.4vw, 5.5rem); /* Espacio y forma */ --gap: clamp(0.7rem, 0.4rem + 1.4vw, 1.15rem); --seccion: clamp(2.6rem, 1.6rem + 3.6vw, 4.2rem); --ancho: 1240px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-full: 999px; --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7); --sombra-alta: 0 2px 4px rgba(0, 0, 0, .4), 0 22px 48px -18px rgba(0, 0, 0, .85); --nav-h: 60px; --alto-cuerpo: 5.6rem; /* alto fijo del cuerpo de la tarjeta: evita saltos de layout */ --ease: cubic-bezier(.22, .61, .36, 1); } /* ---------- 2. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Respaldo por si el JS no corre. El cálculo fino lo hace script.js. */ scroll-padding-top: calc(var(--nav-h) + 14px); } /* Safari móvil aplica mal scroll-padding en cuando el scroll es suave. scroll-margin en el propio destino sí es fiable. */ section[id], [id].ancla { scroll-margin-top: calc(var(--nav-h) + 14px); } body { font-family: var(--texto); font-size: var(--t-base); line-height: 1.6; color: var(--kraft); background: var(--horno); -webkit-font-smoothing: antialiased; overflow-x: hidden; /* trama sutil de papel, no imagen: cuesta 0 bytes */ background-image: radial-gradient(1200px 600px at 78% -8%, rgba(246, 185, 59, .07), transparent 62%), radial-gradient(900px 500px at 8% 108%, rgba(123, 174, 142, .05), transparent 60%); background-attachment: fixed; } img, svg, picture { display: block; max-width: 100%; } button, input, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5 { font-family: var(--display); font-weight: 700; line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { outline: 2px solid var(--yema); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--yema); color: var(--horno); } /* ---------- 3. Utilidades ---------- */ .contenedor { width: min(100% - 2.2rem, var(--ancho)); margin-inline: auto; } .eyebrow { font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--yema); display: flex; align-items: center; gap: .6rem; } .eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--linea-fuerte); } .solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Encabezado de sección compartido */ .seccion-head { margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.8rem); } .seccion-head h2 { font-size: var(--t-titulo); margin-top: .5rem; } .seccion-head p { color: var(--miga); max-width: 52ch; margin-top: .7rem; font-size: var(--t-lg); } /* ---------- 4. Botones ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.5rem; border-radius: var(--r-full); font-weight: 600; font-size: var(--t-sm); letter-spacing: .01em; line-height: 1; min-height: 46px; transition: transform .18s var(--ease), background-color .18s, border-color .18s, color .18s; } .btn:active { transform: scale(.97); } .btn-primario { background: var(--yema); color: #241704; box-shadow: 0 6px 20px -8px rgba(246, 185, 59, .8); } .btn-primario:hover { background: var(--yema-hover); } .btn-fantasma { border: 1px solid var(--linea-fuerte); color: var(--kraft); background: rgba(239, 227, 208, .04); } /* Verde de WhatsApp: se reconoce sin leer y contrasta con el amarillo de la marca, así el ojo no confunde acento con acción. */ .btn-wa { background: #1faa53; color: #fff; } .btn-wa:hover { background: #25c261; color: #fff; } .btn-wa svg { width: 18px; height: 18px; fill: currentColor; flex: none; } .btn-fantasma:hover { border-color: var(--yema); color: var(--yema); } /* ---------- 5. Navegación ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; background: rgba(21, 15, 13, .72); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; } .nav.desplazado { border-bottom-color: var(--linea); background: rgba(21, 15, 13, .92); } .nav__inner { width: min(100% - 2.2rem, var(--ancho)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .marca { display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.02em; } .marca img { width: 34px; height: 34px; object-fit: contain; } .nav__links { display: none; } /* Botón hamburguesa: caja definida para que se vea como un botón y no como tres rayas sueltas. Las barras se posicionan en absoluto respecto al centro, así la X queda perfectamente cruzada al abrir. */ .nav__toggle { position: relative; display: block; width: 46px; height: 46px; margin-right: -6px; border-radius: 12px; border: 1px solid var(--linea-fuerte); background: rgba(239, 227, 208, .05); transition: border-color .25s, background-color .25s; } .nav__toggle:hover { border-color: var(--yema); background: rgba(246, 185, 59, .1); } .nav__toggle span { position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; margin-left: -10px; background: var(--kraft); border-radius: 2px; transition: transform .32s var(--ease), opacity .18s, width .32s var(--ease); } .nav__toggle span:nth-child(1) { transform: translateY(-7px); } .nav__toggle span:nth-child(2) { transform: translateY(0); width: 14px; margin-left: -10px; /* la del medio más corta: detalle que lo hace ver dibujado, no genérico */ } .nav__toggle span:nth-child(3) { transform: translateY(5px); } /* Abierto: X perfecta, ambas barras cruzadas en el mismo punto */ .nav__toggle[aria-expanded="true"] { border-color: var(--yema); background: rgba(246, 185, 59, .12); } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(-1px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; margin-left: 0; } .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-1px) rotate(-45deg); } /* Cajón móvil */ .menu { position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 99; background: var(--corteza); border-bottom: 1px solid var(--linea); padding: .5rem 0 1.4rem; transform: translateY(-104%); visibility: hidden; transition: transform .38s var(--ease), visibility .38s; box-shadow: var(--sombra-alta); } .menu.abierto { transform: translateY(0); visibility: visible; } .menu a { display: flex; align-items: center; justify-content: space-between; padding: .95rem 0; border-bottom: 1px solid var(--linea); font-size: 1.15rem; font-weight: 500; } /* La flecha solo va en los enlaces de navegación, NO en el botón de acción */ .menu a:not([class*="menu__cta"])::after { content: "→"; color: var(--miga); transition: transform .2s var(--ease), color .2s; } .menu a:not([class*="menu__cta"]):hover::after, .menu a:not([class*="menu__cta"])[aria-current="page"]::after { color: var(--yema); transform: translateX(4px); } .menu a[aria-current="page"] { color: var(--yema); } /* Botón de WhatsApp del menú. OJO con el selector: tiene que ser `.menu a.menu__cta` y no `.menu__cta`. La regla `.menu a` de arriba pesa más que una clase sola, así que su `justify-content: space-between` ganaba y mandaba el logo a un extremo y el texto al otro. Con `a.menu__cta` recuperamos el control. */ .menu a.menu__cta { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 1.3rem; width: 100%; padding: .95rem 1.4rem; border-bottom: 0; border-radius: var(--r-full); background: #1faa53; color: #fff; font-size: 1rem; font-weight: 600; min-height: 54px; box-shadow: 0 8px 24px -10px rgba(31, 170, 83, .9); } .menu a.menu__cta:hover { background: #25c261; color: #fff; } .menu a.menu__cta svg { width: 21px; height: 21px; fill: currentColor; flex: none; } .velo { position: fixed; inset: 0; z-index: 98; background: rgba(10, 7, 6, .6); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .velo.activo { opacity: 1; visibility: visible; } @media (min-width: 900px) { :root { --nav-h: 72px; } .nav__toggle, .menu, .velo { display: none; } .nav__links { display: flex; align-items: center; gap: .3rem; } .nav__links a { padding: .5rem .9rem; border-radius: var(--r-full); font-size: .95rem; font-weight: 500; color: var(--miga); transition: color .2s, background-color .2s; } .nav__links a:hover { color: var(--kraft); background: rgba(239, 227, 208, .06); } .nav__links a[aria-current="page"] { color: var(--yema); } /* Botón de la barra: verde con el logo de WhatsApp. El amarillo se confundía con los títulos y no se leía. */ .nav__links .btn-wa { margin-left: .6rem; padding: .55rem 1.15rem; min-height: 42px; gap: .5rem; background: #1faa53; color: #fff; font-weight: 600; box-shadow: 0 6px 18px -8px rgba(31, 170, 83, .85); } .nav__links .btn-wa:hover { background: #25c261; color: #fff; transform: translateY(-1px); } .nav__links .btn-wa svg { width: 18px; height: 18px; fill: currentColor; flex: none; } .marca { font-size: 1.25rem; } .marca img { width: 40px; height: 40px; } } /* ---------- 6. Etiqueta de stock (elemento firma) ---------- */ .stock { display: inline-flex; align-items: center; gap: .38rem; font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .55rem; border-radius: var(--r-sm); background: rgba(21, 15, 13, .82); backdrop-filter: blur(6px); border: 1px solid var(--linea-fuerte); white-space: nowrap; } .stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); } .stock--si { color: var(--hoja); } .stock--no { color: var(--ladrillo); } /* ---------- 7. Pie de página ---------- */ .pie { border-top: 1px solid var(--linea); background: var(--corteza); padding: clamp(2.5rem, 1.5rem + 4vw, 4rem) 0 2rem; margin-top: var(--seccion); } .pie__grid { display: grid; gap: 2.2rem; } .pie h3 { font-size: 1.5rem; margin-bottom: .5rem; } .pie__lema { color: var(--miga); max-width: 34ch; } .pie__titulo { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--yema); margin-bottom: .9rem; } .pie__lista { display: grid; gap: .5rem; color: var(--miga); font-size: var(--t-sm); } .pie__lista a:hover { color: var(--yema); } .redes { display: flex; gap: .55rem; margin-top: 1.1rem; } .redes a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-full); border: 1px solid var(--linea-fuerte); color: var(--miga); transition: all .2s var(--ease); } .redes a:hover { color: var(--horno); background: var(--yema); border-color: var(--yema); transform: translateY(-2px); } .pie__fin { /* Espacio extra abajo en móvil: si no, el botón flotante de WhatsApp se sienta encima del texto de copyright. */ margin-bottom: 6.5rem; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; justify-content: space-between; font-family: var(--mono); font-size: var(--t-xs); color: var(--miga); letter-spacing: .04em; } @media (min-width: 760px) { .pie__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } .pie__fin { margin-bottom: 0; } } /* ---------- 8. Botones flotantes (WhatsApp + carrito) ---------- Se apilan en columna en la esquina inferior derecha. Van bastante arriba del borde porque en el celular la barra de direcciones y la barra de gestos se comen los últimos ~60 px de pantalla. */ .flotantes, .wa { position: fixed; right: clamp(.9rem, 3vw, 1.6rem); /* En celular sube bastante: la barra de direcciones y la de gestos tapan los últimos ~60 px. En escritorio no hace falta tanto (ver más abajo). */ bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); z-index: 90; } @media (min-width: 900px) { .flotantes, .wa { bottom: 2rem; } } .flotantes { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; } /* Dentro del contenedor el botón deja de posicionarse solo */ .flotantes .wa { position: static; bottom: auto; right: auto; } .wa { display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.25rem; border-radius: var(--r-full); background: #1faa53; color: #fff; font-weight: 600; font-size: var(--t-sm); min-height: 50px; box-shadow: 0 10px 30px -10px rgba(31, 170, 83, .9), 0 2px 6px rgba(0, 0, 0, .35); transition: transform .22s var(--ease), box-shadow .22s; } .wa:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -10px rgba(31, 170, 83, 1); } .wa:active { transform: scale(.96); } .wa svg { width: 21px; height: 21px; fill: currentColor; flex: none; } /* El texto se muestra SIEMPRE, también en celular: un botón verde suelto sin palabras no dice qué hace. */ .wa span { display: inline; white-space: nowrap; } /* En pantallas muy angostas se acorta el texto en vez de esconderlo */ @media (max-width: 359px) { .wa { padding: .8rem 1rem; font-size: .78rem; } } /* ---------- 9. Revelado al hacer scroll ---------- */ .revelar { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .revelar.visible { opacity: 1; transform: none; } /* ---------- 10. Accesibilidad: menos movimiento ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .revelar { opacity: 1; transform: none; } } /* ========================================================================== RENDIMIENTO — dibujar solo lo que se ve `content-visibility: auto` le dice al navegador que se salte el trabajo de maquetar y pintar lo que está fuera de pantalla. IMPORTANTE: NO se aplica a las secciones de la portada. Esas son destino de los enlaces del menú, y como el navegador solo ESTIMA su altura mientras no se ven, el desplazamiento aterrizaría en el lugar equivocado. El beneficio ahí sería mínimo (son 3 secciones); el riesgo, un menú que no cae donde debe. Se usa donde de verdad importa: las tarjetas de producto, que son cientos. ========================================================================== */ .tarjeta { content-visibility: auto; /* Alto aproximado de una tarjeta: reserva el espacio para que la barra de desplazamiento no dé saltos al bajar. */ contain-intrinsic-size: auto 280px; } .servicio, .agencia { content-visibility: auto; contain-intrinsic-size: auto 380px; }