/* ============================================================ Momentos Artesanales — Hoja de estilos compartida Paleta cálida artesanal + acento verde para la línea liviana ============================================================ */ :root{ --cream: #FBF5EA; --cream-2: #F4E9D8; --paper: #FFFDF9; --ink: #2B2118; --ink-soft: #5B4B3B; --line: #E7D9C2; --trad: #D90616; /* rojo de marca (logo oficial) — línea tradicional */ --trad-dark: #A6040F; --trad-light: #F7D9D6; --sano: #5C8A5B; /* verde salvia — línea liviana/saludable */ --sano-dark: #3E6A3E; --sano-light: #DCEAD8; --honey: #E3A72B; /* acento dorado */ --radius-lg: 28px; --radius-md: 18px; --radius-sm: 12px; --shadow: 0 12px 32px -12px rgba(43,33,24,0.25); --shadow-soft: 0 6px 18px -8px rgba(43,33,24,0.18); --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --sidebar-w: 262px; /* Franja "siempre oscura" (pie de página, sección Seguinos): a diferencia de --ink/--cream, estas NO se invierten en modo oscuro -- son la franja de marca que ya era oscura en modo claro, y tiene que seguir viéndose igual en los dos temas. Antes estas secciones usaban var(--ink)/var(--cream) directo, que en modo oscuro se invertían y el fondo quedaba claro con texto claro encima (casi invisible). */ --band-bg: #2B2118; --band-ink: #FBF5EA; } /* ---------- Modo oscuro ---------- Se activa por preferencia del sistema (prefers-color-scheme) O por el interruptor manual del header, que guarda la elección en localStorage y la aplica escribiendo data-theme="dark"/"light" en (ver el script inline en el de cada página, que lo hace ANTES de pintar para que no se vea un flash con el tema equivocado). Un data-theme explícito siempre gana por sobre la preferencia del sistema. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --cream: #1C1712; --cream-2: #241E17; --paper: #2A2319; --ink: #F3EBDD; --ink-soft: #C9BBA6; --line: #3A3025; --trad: #F0424F; --trad-dark: #FF8892; --trad-light: #3D2020; --sano: #7BAF79; --sano-dark: #9BD498; --sano-light: #1E2E1E; --honey: #F0BA4C; --shadow: 0 12px 32px -12px rgba(0,0,0,0.55); --shadow-soft: 0 6px 18px -8px rgba(0,0,0,0.45); } } :root[data-theme="dark"]{ --cream: #1C1712; --cream-2: #241E17; --paper: #2A2319; --ink: #F3EBDD; --ink-soft: #C9BBA6; --line: #3A3025; --trad: #F0424F; --trad-dark: #FF8892; --trad-light: #3D2020; --sano: #7BAF79; --sano-dark: #9BD498; --sano-light: #1E2E1E; --honey: #F0BA4C; --shadow: 0 12px 32px -12px rgba(0,0,0,0.55); --shadow-soft: 0 6px 18px -8px rgba(0,0,0,0.45); } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; overflow-x: hidden; } body{ margin:0; font-family: var(--font-body); color: var(--ink); background: var(--cream); transition: background-color .25s ease, color .25s ease; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ---------- Lluvia de fondo (chocolates y masitas) ---------- Capa decorativa fija detrás de todo el contenido (z-index negativo). La posición de cada emoji la calcula JS cuadro a cuadro (ver js/main.js) porque además esquivan el cursor del mouse/dedo como un mini juego -- por eso no hay @keyframes acá, todo es un solo "transform" que arma el JS. Sutil a propósito: opacidad baja y caída lenta. Se desactiva sola si el usuario tiene activado "reducir movimiento" en su sistema. */ .choco-rain{ position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .choco-rain-item{ position: absolute; top: 0; left: 0; line-height: 1; will-change: transform; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; margin:0 0 .5em; line-height:1.1; } p{ margin:0 0 1em; line-height:1.65; color: var(--ink-soft); } .container{ width:100%; max-width:1600px; margin:0 auto; padding:0 32px; } section{ padding: 88px 0; } @media (max-width:720px){ section{ padding: 56px 0; } } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color: var(--trad-dark); margin-bottom:14px; } .eyebrow.sano{ color: var(--sano-dark); } .eyebrow::before{ content:''; width:22px; height:2px; background: currentColor; display:inline-block; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 15px 28px; border-radius: 999px; font-weight:600; font-size:15.5px; border:2px solid transparent; cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; white-space:nowrap; } .btn:hover{ transform: translateY(-2px); } .btn-trad{ background: var(--trad); color:#fff; box-shadow: var(--shadow-soft); } .btn-trad:hover{ background: var(--trad-dark); } .btn-sano{ background: var(--sano); color:#fff; box-shadow: var(--shadow-soft); } .btn-sano:hover{ background: var(--sano-dark); } .btn-outline{ background: transparent; border-color: var(--ink); color: var(--ink); } .btn-outline:hover{ background: var(--ink); color: var(--paper); } .btn-wa{ background:#25D366; color:#fff; box-shadow: var(--shadow-soft); } .btn-wa:hover{ background:#1DA851; } /* Cualquier botón que lleve a WhatsApp (data-wa-msg) se ve siempre como WhatsApp, sin importar si además lleva la clase de línea trad/sano. */ .btn[data-wa-msg]{ background:#25D366; color:#fff; } .btn[data-wa-msg]:hover{ background:#1DA851; } .btn-sm{ padding:10px 18px; font-size:14px; } /* Botón del asistente con IA en el header: es la opción PRINCIPAL, por eso va primero y con el mismo verde flúor que la burbuja de chat. */ .btn-chat-header{ background:#39FF14; color:#123B12; box-shadow: var(--shadow-soft); } .btn-chat-header:hover{ background:#2ee00f; } .btn-chat-header svg{ width:18px; height:18px; } /* WhatsApp en el header queda como ÚLTIMA opción: mismo lugar, pero con estilo secundario/outline en vez del verde WhatsApp sólido. */ .btn-wa-secondary[data-wa-msg]{ background:transparent; border-color:#25D366; color:#128C4A; } .btn-wa-secondary[data-wa-msg]:hover{ background:#25D366; color:#fff; } /* Botón "Pedir" de las tarjetas de producto (menu.html): solo el ícono de WhatsApp, sin texto -- así no compite en espacio con el contador +/- del carrito cuando el producto tiene precio fijo (ver js/cart.js, que lo oculta vía [data-wa-msg] apenas hay precio cargado). */ .btn-wa-icon{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:34px; height:34px; border-radius:50%; background:#25D366; color:#fff; box-shadow: var(--shadow-soft); transition: background .15s ease, transform .15s ease; } .btn-wa-icon:hover{ background:#1DA851; transform: translateY(-1px); } .btn-wa-icon svg{ width:17px; height:17px; } /* ---------- Header ---------- */ .site-header{ position: sticky; top:0; z-index: 90; /* color-mix (no un rgba() fijo) para que este fondo traslúcido respete --cream del tema activo -- antes quedaba hardcodeado al valor claro y en modo oscuro el menú vertical (que reusa .site-header como barra lateral, ver @media min-width:901px más abajo) se veía con un fondo claro pegado a texto claro (var(--ink) en oscuro), casi invisible. */ background: color-mix(in srgb, var(--cream) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .site-header .bar{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1180px; margin:0 auto; } .brand{ display:flex; align-items:center; gap:12px; } .brand-mark{ width:48px; height:48px; flex-shrink:0; object-fit:contain; } .brand-name{ font-family: var(--font-display); font-size:20px; font-weight:600; line-height:1.05; } .brand-name small{ display:block; font-family: var(--font-body); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft); } .nav-links{ display:flex; align-items:center; gap:34px; } .nav-links a{ font-weight:600; font-size:15px; position:relative; padding:4px 0; } .nav-links a.active, .nav-links a:hover{ color: var(--trad); } .nav-links a::after{ content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: var(--trad); transform: scaleX(0); transition: transform .2s ease; } .nav-links a.active::after, .nav-links a:hover::after{ transform: scaleX(1); } /* Solo se muestra en el panel mobile (ver @media más abajo) -- en desktop el acceso interno sigue siendo el candado 🔒 del header. */ .nav-admin-link{ display:none; } .header-actions{ display:flex; align-items:center; gap:14px; } .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line); background: var(--paper); color: var(--ink); cursor:pointer; flex-shrink:0; padding:0; transition: border-color .18s ease, transform .18s ease; } .theme-toggle:hover{ border-color: var(--trad); transform: translateY(-1px); } .theme-toggle svg{ width:19px; height:19px; } .theme-toggle .icon-moon{ display:none; } :root[data-theme="dark"] .theme-toggle .icon-sun{ display:none; } :root[data-theme="dark"] .theme-toggle .icon-moon{ display:block; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-toggle .icon-sun{ display:none; } :root:not([data-theme="light"]) .theme-toggle .icon-moon{ display:block; } } .admin-access-link{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; text-decoration:none; font-size:15px; line-height:1; opacity:.35; transition:opacity .15s ease; } .admin-access-link:hover{ opacity:.8; } .nav-toggle{ display:none; flex-direction:column; align-items:center; justify-content:center; width:44px; height:44px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0; } .nav-toggle span{ display:block; width:26px; height:2px; background: var(--ink); margin:6px 0; transition: all .2s ease; } .nav-toggle.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2){ opacity:0; } .nav-toggle.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); } @media (max-width: 900px){ .nav-links{ position:fixed; top:80px; left:0; right:0; height:calc(100vh - 80px); background: var(--cream); flex-direction:column; justify-content:flex-start; padding: 40px 24px; gap: 26px; transform: translateX(100%); transition: transform .28s ease; z-index: 80; overflow-y:auto; } .nav-links.open{ transform: translateX(0); } body.nav-open{ overflow:hidden; } .nav-links a{ font-size:20px; padding:10px 2px; display:block; } .nav-toggle{ display:flex; } .header-actions{ gap:8px; } .header-actions .btn-wa span.txt, .header-actions .btn-wa-secondary span.txt, .header-actions .btn-chat-header span.txt{ display:none; } /* El candado de acceso interno y el botón de WhatsApp del header no entran junto al resto en una pantalla angosta -- el de WhatsApp sigue accesible por el resto de los botones de WhatsApp de la página, y el acceso interno pasa al pie del propio menú hamburguesa (ver .nav-admin-link). */ .header-actions .admin-access-link, .header-actions .btn-wa-secondary{ display:none; } /* margin-top:auto lo empuja al fondo del panel sin importar cuántos links haya arriba -- por eso no hace falta calcular alturas. */ .nav-admin-link{ display:block; margin-top:auto; padding-top:20px; border-top:1px solid var(--line); font-size:14px !important; color: var(--ink-soft); opacity:.7; } } /* ---------- Menú vertical (barra lateral izquierda, escritorio) ---------- Arriba de 900px el header deja de ser una barra horizontal arriba de la página y pasa a ser una columna fija pegada al borde izquierdo, con los links como botones apilados. Por debajo de 900px sigue exactamente igual que antes (barra superior + menú hamburguesa a pantalla completa). */ @media (min-width: 901px){ body{ margin-left: var(--sidebar-w); } .site-header{ position: fixed; top:0; left:0; bottom:0; width: var(--sidebar-w); border-bottom:none; border-right:1px solid var(--line); overflow-y:auto; } .site-header .bar{ flex-direction:column; align-items:stretch; justify-content:flex-start; height:100%; max-width:none; padding: 28px 18px 22px; gap:8px; } .brand{ padding: 4px 6px 18px; } .nav-links{ display:flex; flex-direction:column; align-items:stretch; gap:5px; } .nav-links a{ display:flex; align-items:center; gap:12px; padding: 13px 16px; border-radius: var(--radius-sm); border:1.5px solid transparent; font-size:15px; transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease; } .nav-links a::before{ font-size:17px; line-height:1; flex-shrink:0; } .nav-links a[href="index.html"]::before{ content:'🏠'; } .nav-links a[href="menu.html"]::before{ content:'🥐'; } .nav-links a[href="nosotros.html"]::before{ content:'👩‍🍳'; } .nav-links a[href="recetas.php"]::before{ content:'📖'; } .nav-links a[href="alimentacion-saludable.html"]::before{ content:'🥗'; } .nav-links a[href="trabaja-con-nosotros.html"]::before{ content:'💼'; } .nav-links a[href="contacto.html"]::before{ content:'✉️'; } .nav-links a::after{ display:none; } .nav-links a:hover{ background: var(--cream-2); border-color: var(--line); transform: translateX(3px); color: var(--ink); } .nav-links a.active{ background: var(--trad); border-color: var(--trad); color:#fff; box-shadow: var(--shadow-soft); } .nav-links a.active:hover{ background: var(--trad-dark); border-color: var(--trad-dark); transform:none; } .nav-admin-link{ display:none; } .header-actions{ display:flex; flex-wrap:wrap; align-items:stretch; gap:10px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); } .header-actions .admin-access-link, .header-actions .theme-toggle{ flex:0 0 auto; opacity:.6; } .header-actions .admin-access-link:hover, .header-actions .theme-toggle:hover{ opacity:1; } .header-actions .btn-chat-header, .header-actions .btn-wa-secondary{ flex:1 1 100%; width:100%; } .header-actions .btn-wa span.txt, .header-actions .btn-wa-secondary span.txt, .header-actions .btn-chat-header span.txt{ display:inline; } } /* ---------- Hero ---------- */ .hero{ position:relative; padding: 72px 0 40px; overflow:hidden; } .hero .container{ display:grid; grid-template-columns: 1.05fr .95fr; gap:56px; align-items:center; } .hero-blob{ position:absolute; z-index:0; opacity:.55; pointer-events:none; } :root[data-theme="dark"] .hero-blob{ opacity:.18; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hero-blob{ opacity:.18; } } .hero-blob.b1{ top:-140px; right:-160px; width:520px; } .hero-blob.b2{ bottom:-160px; left:-180px; width:420px; } .hero-copy{ position:relative; z-index:1; } .hero h1{ font-size: clamp(34px, 5vw, 56px); } .hero h1 .accent-trad{ color: var(--trad); } .hero h1 .accent-sano{ color: var(--sano); } .hero-lede{ font-size:18px; max-width:520px; } .hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; } .hero-stats{ display:flex; gap:34px; margin-top:44px; } .hero-stats div strong{ display:block; font-family:var(--font-display); font-size:26px; } .hero-stats div span{ font-size:13px; color: var(--ink-soft); } .hero-visual{ position:relative; z-index:1; display:grid; grid-template-columns: 1fr 1fr; gap:18px; } .hero-visual .media:nth-child(1){ grid-column: 1 / 2; grid-row: 1 / 3; aspect-ratio: 3/4; } .hero-visual .media:nth-child(2){ aspect-ratio: 1/1; } .hero-visual .media:nth-child(3){ aspect-ratio: 1/1; } @media (max-width: 900px){ .hero .container{ grid-template-columns: 1fr; } .hero-visual{ order:-1; } } /* ---------- Media / image placeholder system ---------- Real photo: drop a file at images/ matching the src. Until then, a designed placeholder (gradient + icon + label) shows automatically. */ .media{ position:relative; border-radius: var(--radius-md); overflow:hidden; background: linear-gradient(155deg, var(--trad-light), var(--cream-2)); box-shadow: var(--shadow-soft); } .media.sano{ background: linear-gradient(155deg, var(--sano-light), var(--cream-2)); } .media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .media .ph{ position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:14px; text-align:center; color: var(--trad-dark); } .media.is-empty .ph{ display:flex; } .media.sano .ph{ color: var(--sano-dark); } .media .ph svg{ width:34%; max-width:64px; opacity:.75; } .media .ph span{ font-size:12.5px; font-weight:600; opacity:.8; max-width:80%; } .media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .media .play{ position:absolute; inset:0; margin:auto; width:58px; height:58px; border-radius:50%; background: rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-soft); } .media .play svg{ width:20px; height:20px; margin-left:3px; } /* ---------- Promo asistente con IA ---------- */ .ai-promo{ background: linear-gradient(135deg, #eef7ec, #fdf3f0); padding:36px 0; } :root[data-theme="dark"] .ai-promo{ background: linear-gradient(135deg, #1e2e1e, #2e1c1c); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ai-promo{ background: linear-gradient(135deg, #1e2e1e, #2e1c1c); } } .ai-promo-inner{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; } .ai-promo-icon{ flex-shrink:0; width:52px; height:52px; border-radius:50%; background:#39FF14; color:#123B12; display:flex; align-items:center; justify-content:center; } .ai-promo-icon svg{ width:26px; height:26px; } .ai-promo-copy{ flex:1; min-width:220px; } .ai-promo-copy h3{ font-size:20px; margin:0 0 4px; } .ai-promo-copy p{ margin:0; color: var(--ink-soft); font-size:15px; } .ai-promo-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; } .ai-promo-alt{ font-size:13px; color: var(--ink-soft); text-decoration:underline; cursor:pointer; } @media (max-width:700px){ .ai-promo-actions{ align-items:stretch; } .ai-promo-actions .btn{ text-align:center; } } /* ---------- Dos líneas (tradicional / saludable) ---------- */ .paths{ background: var(--paper); } .paths-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:28px; } .path-card{ border-radius: var(--radius-lg); padding:40px; position:relative; overflow:hidden; background: var(--trad-light); border: 1px solid var(--line); } .path-card.sano{ background: var(--sano-light); } .path-card h3{ font-size:28px; } .path-card .tag{ display:inline-block; padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:.04em; margin-bottom:16px; background:#fff; } /* Colores fijos (no las variables --trad-dark/--sano-dark, que se aclaran en modo oscuro) porque esta píldora siempre tiene fondo blanco sólido, sea cual sea el tema del sitio. */ .path-card.trad .tag{ color:#A6040F; } .path-card.sano .tag{ color:#3E6A3E; } .path-list{ margin: 18px 0 26px; display:flex; flex-wrap:wrap; gap:10px; } .path-list li{ background: rgba(255,255,255,.65); border-radius:999px; padding:7px 14px; font-size:13.5px; font-weight:600; } @media (max-width:820px){ .paths-grid{ grid-template-columns:1fr; } } /* ---------- Destacados / product grid ---------- */ .products-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; } .product-card{ background: var(--paper); border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--line); transition: transform .2s ease, box-shadow .2s ease; } .product-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow); } .product-card .media{ aspect-ratio: 4/3; border-radius:0; } .product-card .info{ padding:18px 18px 20px; } .product-card h4{ font-size:17px; margin-bottom:4px; } .product-card p{ font-size:14px; margin-bottom:12px; } .product-card .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .price{ font-weight:700; font-family: var(--font-display); font-size:16px; } /* ---------- Skeletons (mientras carga contenido por fetch) ---------- Usado por js/menu-catalogo.js, js/destacados.js y js/price-list.js mientras esperan la respuesta de la API, en vez de dejar la sección en blanco o con un simple "Cargando...". */ @keyframes skeleton-shimmer{ 0%{ background-position: -400px 0; } 100%{ background-position: 400px 0; } } .skeleton{ background: linear-gradient(90deg, var(--cream-2) 25%, var(--line) 37%, var(--cream-2) 63%); background-size: 800px 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; border-radius: var(--radius-sm); display:block; } .skeleton-card{ background: var(--paper); border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--line); } .skeleton-card .skeleton-media{ aspect-ratio:4/3; border-radius:0; } .skeleton-card .skeleton-info{ padding:18px; display:flex; flex-direction:column; gap:10px; } .skeleton-line{ height:13px; border-radius:6px; } .skeleton-line.w-40{ width:40%; } .skeleton-line.w-60{ width:60%; } .skeleton-line.w-90{ width:90%; } .skeleton-row{ height:46px; margin-bottom:10px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce){ .skeleton{ animation: none; opacity:.6; } } .price.tbd{ font-size:12.5px; font-weight:600; color: var(--ink-soft); font-family: var(--font-body); } .badge{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:6px; } .badge.trad{ background: var(--trad-light); color: var(--trad-dark); } .badge.sano{ background: var(--sano-light); color: var(--sano-dark); } @media (max-width:980px){ .products-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width:520px){ .products-grid{ grid-template-columns: 1fr 1fr; gap:14px; } .product-card .info{ padding:12px; } } .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:40px; flex-wrap:wrap; } .section-head h2{ font-size: clamp(26px,3.4vw,38px); max-width:560px; } /* ---------- Instagram strip ---------- */ .insta{ background: var(--band-bg); color: var(--band-ink); } .insta .section-head h2, .insta p{ color: var(--band-ink); } .insta p{ opacity:.75; } .insta-follow{ margin-top:34px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .social-row-embeds{ margin-top:48px; display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; align-items:start; } .social-col{ background: rgba(251,245,234,.06); border: 1px solid rgba(251,245,234,.1); border-radius:20px; padding:26px; } .social-col h3{ color: var(--band-ink); font-size:18px; margin:0 0 16px; } .social-col p{ color: var(--band-ink); opacity:.75; font-size:14.5px; } .social-col .fb-page{ width:100%; max-width:100%; } .social-col-insta{ display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:center; gap:14px; min-height:420px; } .social-col-insta svg{ width:52px; height:52px; color: var(--band-ink); opacity:.85; } /* Carrusel de YouTube: un solo frame, los 3 videos apilados por encima uno del otro (position:absolute) y se muestra solo el que tiene .active. */ .yt-carousel-frame{ position:relative; width:100%; max-width:380px; aspect-ratio:380/420; margin:0 auto; border-radius:14px; overflow:hidden; background:#000; } .yt-embed{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .35s ease; } .yt-embed.active{ opacity:1; pointer-events:auto; z-index:1; } .yt-embed iframe{ width:100%; height:100%; border:0; display:block; pointer-events:none; } .yt-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:36px; height:36px; border-radius:50%; border:none; cursor:pointer; background:rgba(0,0,0,.45); color:#fff; font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .15s ease; } .yt-nav:hover{ background:rgba(0,0,0,.7); } .yt-nav.prev{ left:10px; } .yt-nav.next{ right:10px; } .yt-dots{ display:flex; justify-content:center; gap:8px; margin-top:14px; } .yt-dot{ width:9px; height:9px; padding:0; border-radius:50%; border:none; cursor:pointer; background:rgba(251,245,234,.3); transition:background .15s ease; } .yt-dot.active{ background: var(--band-ink); } @media (max-width:1080px){ .social-row-embeds{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .social-row-embeds{ grid-template-columns:1fr; } } /* ---------- Values / why us ---------- */ .values-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; } .value-card{ padding:30px 26px; border-radius: var(--radius-md); background: var(--cream-2); } .value-card svg{ width:34px; height:34px; color: var(--trad); margin-bottom:16px; } .value-card h4{ font-size:18px; } @media (max-width:820px){ .values-grid{ grid-template-columns:1fr; } } /* ---------- Vacantes (trabaja-con-nosotros.html) ---------- */ .jobs-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:26px; margin-bottom:40px; } .job-card{ display:flex; flex-direction:column; gap:14px; background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg); padding:32px 30px; box-shadow: var(--shadow-soft); } .job-card-head{ display:flex; align-items:center; gap:16px; } .job-icon{ width:54px; height:54px; flex-shrink:0; border-radius:16px; display:flex; align-items:center; justify-content:center; background: var(--trad-light); color: var(--trad-dark); } .job-card.sano .job-icon{ background: var(--sano-light); color: var(--sano-dark); } .job-icon svg{ width:28px; height:28px; } .job-card h3{ font-size:20px; margin-bottom:2px; } .job-tag{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color: var(--ink-soft); } .job-card > p{ margin-bottom:0; } .job-list{ margin:0; padding-left:20px; } .job-list li{ font-size:14.5px; color: var(--ink-soft); margin-bottom:5px; line-height:1.5; } .job-card .btn{ align-self:flex-start; margin-top:6px; } @media (max-width:860px){ .jobs-grid{ grid-template-columns:1fr; } } /* ---------- CTA banda ---------- */ .cta-band{ background: linear-gradient(120deg, var(--trad), var(--sano)); color:#fff; border-radius: var(--radius-lg); padding: 54px 48px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; } .cta-band h3{ color:#fff; font-size: clamp(24px,3vw,32px); max-width:480px; } .cta-band p{ color: rgba(255,255,255,.88); max-width:480px; } .cta-band .btn-outline{ border-color:#fff; color:#fff; } .cta-band .btn-outline:hover{ background:#fff; color: var(--ink); } /* ---------- Footer ---------- */ .site-footer{ background: var(--band-bg); color: var(--band-ink); padding: 64px 0 28px; } .footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap:40px; margin-bottom:46px; } .footer-grid h5{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; color: var(--honey); } .footer-grid p, .footer-grid a{ color: rgba(251,245,234,.75); font-size:14.5px; } .footer-grid ul li{ margin-bottom:10px; } .footer-grid a:hover{ color:#fff; } .footer-brand p{ max-width:280px; } .social-row{ display:flex; gap:12px; margin-top:16px; } .social-row a{ width:38px; height:38px; border-radius:50%; background: rgba(251,245,234,.1); display:flex; align-items:center; justify-content:center; } .social-row a:hover{ background: var(--trad); } .social-row svg{ width:17px; height:17px; } .footer-bottom{ border-top:1px solid rgba(251,245,234,.15); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; color: rgba(251,245,234,.55); } @media (max-width:820px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width:520px){ .footer-grid{ grid-template-columns: 1fr; } } /* ---------- Page hero (inner pages) ---------- */ .page-hero{ padding: 62px 0 20px; text-align:center; } .page-hero h1{ font-size: clamp(32px,5vw,48px); } .page-hero p{ max-width:560px; margin:0 auto; font-size:17px; } .breadcrumbs{ font-size:13px; color: var(--ink-soft); margin-bottom:18px; } .breadcrumbs a{ font-weight:600; color: var(--trad); } /* ---------- Recetas (recetas.php / receta.php) ---------- */ .origin-filters{ margin-bottom:40px; } .origin-filters .category-filter-btn.is-active{ background: var(--trad); border-color: var(--trad); color:#fff; } .recetas-grid .receta-card{ display:block; position:relative; } .receta-media-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:52px; background: var(--cream-2); } .receta-badge-destacada{ position:absolute; top:12px; left:12px; } .receta-meta{ font-size:13px; color: var(--ink-soft); gap:14px; } .receta-hero h1{ font-size: clamp(28px,4.4vw,40px); } .receta-detalle{ max-width:900px; } .receta-foto{ width:100%; max-height:420px; object-fit:cover; border-radius: var(--radius-lg); margin-bottom:6px; } .receta-foto-credito{ font-size:11.5px; color: var(--ink-soft); opacity:.65; margin:0 0 36px; text-align:right; } .receta-columnas{ display:grid; grid-template-columns: 1fr 1.6fr; gap:48px; align-items:start; } .receta-ingredientes h3, .receta-pasos h3{ font-size:20px; margin-bottom:18px; } .receta-lista-check{ display:flex; flex-direction:column; gap:10px; } .receta-lista-check li{ padding-left:26px; position:relative; font-size:15px; color: var(--ink-soft); } .receta-lista-check li::before{ content:'✓'; position:absolute; left:0; color: var(--sano-dark); font-weight:700; } .receta-lista-pasos{ list-style:none; counter-reset: paso; display:flex; flex-direction:column; gap:18px; } .receta-lista-pasos li{ counter-increment: paso; padding-left:42px; position:relative; font-size:15.5px; line-height:1.65; color: var(--ink-soft); } .receta-lista-pasos li::before{ content: counter(paso); position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%; background: var(--trad); color:#fff; font-family: var(--font-display); font-weight:600; font-size:13px; display:flex; align-items:center; justify-content:center; } .recetas-relacionadas{ margin-top:56px; } .recetas-relacionadas h3{ font-size:22px; margin-bottom:20px; } @media (max-width:760px){ .receta-columnas{ grid-template-columns:1fr; gap:32px; } } /* ---------- Alimentación saludable ---------- */ .salud-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:22px; } .salud-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-md); padding:26px 24px; transition: transform .2s ease, box-shadow .2s ease; } .salud-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-soft); } .salud-card-icon{ font-size:30px; display:block; margin-bottom:10px; } .salud-card h3{ font-size:19px; margin-bottom:14px; } .salud-card ul{ display:flex; flex-direction:column; gap:9px; } .salud-card li{ font-size:14px; line-height:1.5; color: var(--ink-soft); padding-left:18px; position:relative; } .salud-card li::before{ content:'•'; position:absolute; left:0; color: var(--sano); font-weight:700; } .swap-table{ background: var(--paper); border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--line); } .swap-row{ display:grid; grid-template-columns: 1fr 32px 1fr; gap:16px; align-items:center; padding:16px 22px; border-bottom:1px solid var(--line); } .swap-row:last-child{ border-bottom:none; } .swap-row span:first-child{ color: var(--ink-soft); font-size:14.5px; } .swap-row span:nth-child(2){ text-align:center; color: var(--sano-dark); font-weight:700; } .swap-row span:last-child{ font-weight:600; font-size:14.5px; } .swap-row.swap-head{ background: var(--sano-light); font-weight:700; text-transform:uppercase; font-size:12px; letter-spacing:.04em; color: var(--sano-dark); } .swap-row.swap-head span{ font-weight:700; } @media (max-width:640px){ .swap-row{ grid-template-columns: 1fr; gap:4px; text-align:left; } .swap-row span:nth-child(2){ display:none; } .swap-row.swap-head{ display:none; } } .salud-disclaimer{ background: var(--cream-2); border-left:4px solid var(--sano); border-radius: var(--radius-sm); padding:18px 22px; margin-top:10px; } .salud-disclaimer p{ margin:0; font-size:14px; color: var(--ink-soft); } /* ---------- Menu / catálogo tabs ---------- */ .menu-tabs{ display:flex; justify-content:center; gap:14px; margin: 8px 0 46px; flex-wrap:wrap; } .menu-tab{ padding:13px 26px; border-radius:999px; font-weight:700; font-size:15px; background: var(--cream-2); border:2px solid transparent; cursor:pointer; } .menu-tab.is-active[data-tab="tradicional"]{ background: var(--trad); color:#fff; } .menu-tab.is-active[data-tab="saludable"]{ background: var(--sano); color:#fff; } .menu-category{ margin-bottom: 56px; } .menu-category > h3{ font-size:22px; display:flex; align-items:center; gap:12px; margin-bottom:22px; } .menu-category > h3::after{ content:''; flex:1; height:1px; background: var(--line); } .menu-panel{ display:none; } .menu-panel.is-active{ display:block; } .menu-note{ background: var(--cream-2); border-radius: var(--radius-md); padding:22px 26px; font-size:14.5px; margin-top: 10px; } .menu-search{ position:relative; max-width:480px; margin:0 auto 28px; } .menu-search input{ width:100%; font-family: var(--font-body); font-size:15px; padding:14px 46px; border-radius:999px; border:1.5px solid var(--line); background: var(--cream); } .menu-search input:focus{ outline:none; border-color: var(--trad); } .menu-search input::-webkit-search-cancel-button{ display:none; } .menu-search svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:19px; height:19px; color: var(--ink-soft); pointer-events:none; } .menu-search-clear{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; border:none; background: var(--cream-2); color: var(--ink-soft); cursor:pointer; font-size:18px; line-height:1; display:none; align-items:center; justify-content:center; } .menu-search-clear.is-visible{ display:flex; } .menu-search-status{ text-align:center; font-size:13.5px; color: var(--ink-soft); margin:-8px 0 30px; } .product-card.is-hidden, .menu-category.is-hidden{ display:none !important; } body.search-mode .menu-tabs{ display:none; } /* ---------- Filtro por categoría (dentro de cada panel) ---------- */ .category-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; } .category-filter-btn{ padding:9px 18px; border-radius:999px; font-size:13.5px; font-weight:700; background: var(--paper); border:1.5px solid var(--line); color: var(--ink-soft); cursor:pointer; white-space:nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease; } .category-filter-btn:hover{ border-color: var(--trad); color: var(--ink); } .menu-panel[data-panel="tradicional"] .category-filter-btn.is-active{ background: var(--trad); border-color: var(--trad); color:#fff; } .menu-panel[data-panel="saludable"] .category-filter-btn.is-active{ background: var(--sano); border-color: var(--sano); color:#fff; } body.search-mode .category-filters{ display:none; } body.search-mode .menu-panel{ display:block !important; } /* ---------- Filtro Salado/Dulce (dentro de cada panel, arriba del de categoría) ---------- */ .sabor-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; } .sabor-filter-btn{ padding:9px 20px; border-radius:999px; font-size:13.5px; font-weight:700; background: var(--paper); border:1.5px solid var(--line); color: var(--ink-soft); cursor:pointer; white-space:nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease; } .sabor-filter-btn:hover{ border-color: var(--honey); color: var(--ink); } .sabor-filter-btn.is-active{ background: var(--honey); border-color: var(--honey); color:#fff; } body.search-mode .sabor-filters{ display:none; } /* ---------- Nosotros ---------- */ .story-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap:56px; align-items:center; } .story-grid .media{ aspect-ratio: 4/5; } .timeline{ margin-top:20px; display:flex; flex-direction:column; gap:22px; } .timeline li{ display:flex; gap:18px; } .timeline .dot{ width:12px; height:12px; border-radius:50%; background: var(--trad); margin-top:6px; flex-shrink:0; } @media (max-width:900px){ .story-grid{ grid-template-columns:1fr; } } /* ---------- Contacto ---------- */ .contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:start; } .contact-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg); padding:38px; } .contact-item{ display:flex; gap:16px; align-items:flex-start; margin-bottom:24px; } .contact-item svg{ width:22px; height:22px; color: var(--trad); flex-shrink:0; margin-top:2px; } .contact-item strong{ display:block; font-size:15px; margin-bottom:2px; } .contact-item span, .contact-item a{ font-size:14.5px; color: var(--ink-soft); } .map-frame{ border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line); aspect-ratio: 4/3; } .map-frame iframe{ width:100%; height:100%; border:0; } .contact-form{ display:flex; flex-direction:column; gap:14px; } .contact-form input, .contact-form textarea{ font-family: var(--font-body); font-size:15px; padding:14px 16px; border-radius: var(--radius-sm); border:1.5px solid var(--line); background: var(--cream); resize:vertical; } .contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color: var(--trad); } .contact-form label{ font-size:13px; font-weight:700; margin-bottom:-8px; } @media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } } /* ---------- reveal on scroll ---------- Progressive enhancement: content is visible by default (works with JS off, JS failing to load, or search engine crawlers). Only once JS confirms it can animate does it add ".pre" to hide-then-reveal on scroll. */ .reveal{ opacity:1; transform:none; } .reveal.pre{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .reveal.pre.is-visible{ opacity:1; transform:none; } /* ---------- Legal pages (privacidad, términos, arrepentimiento) ---------- */ .legal-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg); padding:44px; max-width:860px; margin:0 auto; } .legal-card h2{ font-size:22px; margin-top:1.6em; } .legal-card h2:first-child{ margin-top:0; } .legal-card h3{ font-size:17px; margin-top:1.4em; } .legal-card p, .legal-card li{ font-size:15px; line-height:1.7; color: var(--ink-soft); } .legal-card ul, .legal-card ol{ margin:0 0 1.2em; padding-left:22px; } .legal-card ul{ list-style:disc; } .legal-card ol{ list-style:decimal; } .legal-card li{ margin-bottom:8px; } .legal-card a{ color: var(--trad-dark); font-weight:600; text-decoration:underline; } .legal-updated{ font-size:13px; color: var(--ink-soft); margin-bottom:30px; } .legal-placeholder{ background: var(--trad-light); border:2px dashed var(--trad); color: var(--trad-dark); font-weight:700; padding:14px 18px; border-radius: var(--radius-sm); display:inline-block; margin:4px 0; } .legal-callout{ background: var(--sano-light); border-radius: var(--radius-md); padding:22px 26px; margin:1.4em 0; } .legal-callout p:last-child{ margin-bottom:0; } /* ---------- Footer legal links row ---------- */ .footer-legal{ display:flex; flex-wrap:wrap; gap:6px 10px; justify-content:center; font-size:13px; color: rgba(251,245,234,.55); margin-top:14px; padding-top:14px; border-top:1px solid rgba(251,245,234,.15); } .footer-legal a{ color: rgba(251,245,234,.75); } .footer-legal a:hover{ color:#fff; } .footer-legal .sep{ color: rgba(251,245,234,.35); } /* ---------- AFIP Data Fiscal ---------- */ .afip-data-fiscal{ display:inline-flex; align-items:center; } .afip-data-fiscal img{ height:42px; width:auto; vertical-align:middle; border-radius:4px; } /* ---------- Catálogo con fotos (página principal, js/price-list.js) ---------- Se pinta 100% desde api/catalogo_publico.php: nunca hay números ni fotos hardcodeadas acá, así esta grilla siempre refleja lo que está cargado en admin/precios.php. Reusa .product-card/.media/.info del resto del sitio para que se vea igual que menu.html. */ .price-list-section{ background: var(--cream-2); } .price-list-group{ margin-bottom:44px; } .price-list-group:last-child{ margin-bottom:0; } .price-list-group h3{ font-size:19px; margin-bottom:20px; padding-bottom:8px; border-bottom:2px solid var(--trad-light); } .price-list-card .row{ align-items:center; flex-wrap:wrap; gap:8px; } .price-list-add-btn{ width:34px; height:34px; flex-shrink:0; border-radius:50%; border:none; background: var(--trad); color:#fff; font-size:20px; line-height:1; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: background .15s ease, transform .15s ease; } .price-list-add-btn:hover{ background: var(--trad-dark); transform: scale(1.08); } .price-list-add-btn--wa{ background: #25D366; } .price-list-add-btn--wa:hover{ background: #128C4A; } .price-list-note{ text-align:center; margin-top:28px; } /* ============================================================ Formulario de postulación ("Trabajá con nosotros") — reemplaza Google Forms. Guarda todo (foto y CV incluidos) directo en la base, vía api/postulacion_guardar.php. ============================================================ */ .apply-section{ background: var(--cream-2); } .apply-wizard{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 44px; max-width: 840px; margin: 0 auto; box-shadow: var(--shadow-soft); } @media (max-width:600px){ .apply-wizard{ padding:28px 20px; } } .apply-progress-wrap{ margin-bottom:30px; } .apply-progress{ height:8px; background: var(--cream-2); border-radius:999px; overflow:hidden; } .apply-progress-bar{ height:100%; width:16.6%; border-radius:999px; background: linear-gradient(90deg, var(--trad), var(--sano)); transition: width .3s ease; } .apply-step-label{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-soft); margin:12px 0 0; } .apply-step h3{ font-size: clamp(20px,2.6vw,26px); margin-bottom:6px; } .apply-step-intro{ margin-bottom:26px; } .apply-field{ margin-bottom:18px; } .apply-field label{ display:block; font-weight:700; font-size:13.5px; margin-bottom:7px; } .apply-field .apply-hint{ font-weight:500; font-size:12.5px; color: var(--ink-soft); margin-top:5px; margin-bottom:0; } .apply-field input[type=text], .apply-field input[type=email], .apply-field input[type=tel], .apply-field input[type=number], .apply-field select, .apply-field textarea{ width:100%; font-family: var(--font-body); font-size:15px; padding:13px 14px; border-radius: var(--radius-sm); border:1.5px solid var(--line); background: var(--cream); color: var(--ink); } .apply-field input:focus, .apply-field select:focus, .apply-field textarea:focus{ outline:none; border-color: var(--trad); } .apply-field textarea{ resize:vertical; min-height:96px; } .apply-row{ display:flex; gap:16px; flex-wrap:wrap; } .apply-row .apply-field{ flex:1; min-width:220px; } .apply-check-group{ display:flex; gap:10px; flex-wrap:wrap; } .apply-check-pill{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; border:1.5px solid var(--line); background: var(--cream); cursor:pointer; font-size:13.5px; font-weight:600; transition: border-color .15s ease, background .15s ease; } .apply-check-pill input{ accent-color: var(--trad); } .apply-check-pill.is-checked{ border-color: var(--trad); background: var(--trad-light); } .likert{ padding:16px 0; border-bottom:1px solid var(--line); } .likert:last-child{ border-bottom:none; } .likert-question{ font-weight:600; font-size:15px; margin-bottom:14px; } .likert-scale{ display:flex; align-items:center; gap:12px; } .likert-endpoint{ font-size:11.5px; color: var(--ink-soft); flex:0 0 84px; line-height:1.3; } .likert-endpoint.right{ text-align:right; } .likert-options{ display:flex; gap:10px; flex:1; justify-content:center; } .likert-option{ display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; } .likert-option input{ width:22px; height:22px; accent-color: var(--trad); cursor:pointer; } .likert-option span{ font-size:11px; color: var(--ink-soft); } .apply-upload{ border:2px dashed var(--line); border-radius: var(--radius-md); padding:22px; text-align:center; background: var(--cream); } .apply-upload + .apply-upload{ margin-top:18px; } .apply-upload input[type=file]{ margin-top:10px; font-size:13.5px; } .apply-foto-preview{ width:120px; height:120px; object-fit:cover; border-radius:50%; margin:14px auto 0; border:3px solid var(--paper); box-shadow: var(--shadow-soft); } .apply-cv-nombre{ font-size:13px; font-weight:600; color: var(--trad-dark); margin-top:8px; } .apply-consent{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; margin:24px 0 0; color: var(--ink-soft); } .apply-consent input{ margin-top:4px; accent-color: var(--trad); flex-shrink:0; } .apply-consent a{ font-weight:600; color: var(--trad-dark); text-decoration:underline; } .apply-actions{ display:flex; justify-content:space-between; gap:12px; margin-top:30px; } .apply-actions .btn{ flex-shrink:0; } @media (max-width:480px){ .apply-actions{ flex-direction:column-reverse; } .apply-actions .btn{ width:100%; } } .apply-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .apply-success{ text-align:center; padding:10px 0; } .apply-success svg{ width:56px; height:56px; color: var(--sano); margin-bottom:18px; } .apply-success h3{ font-size:24px; } .apply-error{ background: var(--trad-light); color: var(--trad-dark); border:1px solid var(--trad); border-radius: var(--radius-sm); padding:14px 18px; margin-top:20px; font-weight:600; font-size:14.5px; }