/* ============================================================ CUMAGI — Landing Page Styles ¿Qué cocino hoy? Vol. 1 Versión polish final — Marzo 2026 ============================================================ Fuentes (en ): https://fonts.googleapis.com/css2?family=Cormorant+Garamond: ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=DM+Sans: wght@300;400;500&display=swap ============================================================ */ /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── VARIABLES ── */ :root { --cream: #F5F0E8; --cream-dark: #EDE6D6; --olive: #4A5240; --olive-light: #6B7460; --terra: #C4714A; --terra-light: #D4896A; --ink: #1E1F1A; --ink-soft: #3A3B35; --sage: #8FA688; --sand: #D9CDB8; --white: #FEFCF8; --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'DM Sans', sans-serif; --max-w: 1140px; --section-pad: clamp(52px, 7vw, 100px); } /* ── BASE ── */ html { scroll-behavior: smooth; } body { background: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1000; opacity: 0.5; } .container { max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); } /* ── KEYFRAMES ── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(-0.8deg); } 50% { transform: translateY(-14px) rotate(0.8deg); } } @keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ══ NAV ══ */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 12px clamp(28px, 5vw, 68px); background: rgba(245, 240, 232, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(74, 82, 64, 0.1); transition: box-shadow 0.3s ease; } .nav-logo { text-decoration: none; display: flex; align-items: center; } .nav-logo img { height: 110px; width: auto; display: block; } .nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--olive); color: var(--cream); font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none; padding: 11px 24px; border-radius: 2px; transition: all 0.25s ease; white-space: nowrap; } .nav-cta:hover { background: var(--ink); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(74,82,64,0.25); } /* ══ HERO ══ */ .hero { min-height: 100svh; padding-top: 72px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; overflow: hidden; position: relative; } .hero::before { content: ''; position: absolute; top: -80px; right: -160px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(143,166,136,0.18) 0%, transparent 70%); pointer-events: none; } .hero-left { padding: clamp(36px, 5vw, 80px) clamp(20px, 4vw, 56px); animation: fadeUp 0.85s ease both; } .pill { display: inline-flex; align-items: center; gap: 6px; background: var(--terra); color: var(--white); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; margin-bottom: 24px; animation: fadeIn 1s ease 0.2s both; } .pill-dot { width: 5px; height: 5px; background: var(--white); border-radius: 50%; animation: pulse-soft 2s infinite; } .hero-h1 { font-family: var(--font-display); font-size: clamp(48px, 6.2vw, 88px); font-weight: 300; line-height: 0.98; color: var(--ink); margin-bottom: 22px; animation: fadeUp 0.85s ease 0.08s both; } .hero-h1 em { font-style: italic; color: var(--terra); } .hero-h1 strong { font-weight: 600; display: block; } .hero-sub { font-size: clamp(15px, 1.5vw, 17px); color: var(--ink-soft); max-width: 400px; line-height: 1.72; margin-bottom: 36px; font-weight: 300; animation: fadeUp 0.85s ease 0.16s both; } .hero-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; animation: fadeUp 0.85s ease 0.24s both; } .btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--terra); color: var(--white); font-family: var(--font-body); font-size: 15px; font-weight: 500; text-decoration: none; padding: 16px 36px; border-radius: 2px; transition: all 0.3s ease; position: relative; overflow: hidden; letter-spacing: 0.02em; } .btn-primary::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.1); opacity: 0; transition: opacity 0.2s; } .btn-primary:hover { background: var(--ink); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(196,113,74,0.3); } .btn-primary:hover::after { opacity: 1; } .btn-arrow { font-size: 18px; transition: transform 0.25s; } .btn-primary:hover .btn-arrow { transform: translateX(4px); } .hero-trust { font-size: 12px; color: var(--olive-light); letter-spacing: 0.04em; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .hero-trust span { display: flex; align-items: center; gap: 5px; } .hero-trust svg { opacity: 0.6; } .hero-right { position: relative; height: 100%; min-height: 640px; background: var(--olive); display: flex; align-items: center; justify-content: center; overflow: hidden; animation: fadeIn 1s ease 0.3s both; } .hero-right::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--olive) 0%, #2A3026 100%); } .hero-bg-pattern { position: absolute; inset: 0; opacity: 0.07; background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23F5F0E8' fill-rule='evenodd'%3E%3Ccircle cx='40' cy='40' r='2'/%3E%3Ccircle cx='0' cy='0' r='2'/%3E%3Ccircle cx='80' cy='0' r='2'/%3E%3Ccircle cx='0' cy='80' r='2'/%3E%3Ccircle cx='80' cy='80' r='2'/%3E%3C/g%3E%3C/svg%3E"); } /* Wrapper del libro */ .hero-book-wrap { position: relative; z-index: 2; width: 100%; max-width: 640px; margin: auto; animation: float 6s ease-in-out infinite; } .hero-book { display: block; width: 100%; height: auto; transform: translateY(-10px); filter: drop-shadow(-10px 16px 28px rgba(0,0,0,0.35)) drop-shadow(0 48px 72px rgba(0,0,0,0.5)); } .hero-corner-text { position: absolute; bottom: 36px; left: 36px; z-index: 2; writing-mode: vertical-rl; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.15em; color: rgba(245,240,232,0.14); text-transform: uppercase; } /* ══ MARQUEE ══ */ .marquee-strip { background: var(--ink); color: var(--cream); padding: 13px 0; overflow: hidden; white-space: nowrap; } .marquee-track { display: inline-flex; animation: marquee 24s linear infinite; } .marquee-item { font-family: var(--font-display); font-size: 15px; font-style: italic; font-weight: 300; letter-spacing: 0.04em; padding: 0 36px; } .marquee-sep { color: var(--terra); font-size: 16px; padding: 0 6px; } /* ══ SHARED ══ */ .section-eyebrow { font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--terra); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; } .section-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: var(--terra); flex-shrink: 0; } .section-h2 { font-family: var(--font-display); font-size: clamp(34px, 4.2vw, 60px); font-weight: 300; line-height: 1.06; color: var(--ink); margin-bottom: 20px; } .section-h2 em { font-style: italic; color: var(--olive); } .section-body { font-size: clamp(14px, 1.4vw, 16px); color: var(--ink-soft); line-height: 1.75; font-weight: 300; margin-bottom: 22px; max-width: 520px; } /* ══ PROBLEM ══ */ .problem { padding: var(--section-pad) 0; background: var(--white); } .problem .container { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px, 5vw, 80px); align-items: center; } .pain-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .pain-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 14.5px; color: var(--ink-soft); padding: 14px 18px; background: var(--cream); border-radius: 4px; border-left: 3px solid var(--sand); line-height: 1.5; transition: border-color 0.2s, transform 0.2s; } .pain-list li:hover { border-color: var(--terra); transform: translateX(3px); } .pain-icon { font-size: 17px; flex-shrink: 0; margin-top: 1px; } .solution-card { background: var(--olive); border-radius: 16px; padding: clamp(32px, 4vw, 52px) clamp(28px, 4vw, 52px); color: var(--cream); position: relative; overflow: hidden; min-height: 240px; display: flex; flex-direction: column; justify-content: center; } .solution-card::before { content: ''; position: absolute; top: -50px; right: -50px; width: 180px; height: 180px; background: rgba(143,166,136,0.18); border-radius: 50%; } .solution-card-label { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage); margin-bottom: 16px; } .solution-card-h3 { font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 38px); font-weight: 300; line-height: 1.12; margin-bottom: 16px; } .solution-card-h3 em { font-style: italic; color: var(--terra-light); } .solution-card p { font-size: 14.5px; line-height: 1.7; opacity: 0.82; font-weight: 300; } /* ══ HOW ══ */ .how { padding: var(--section-pad) 0; background: var(--cream); } .how-header { text-align: center; margin-bottom: clamp(32px, 4vw, 56px); } .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--sand); border-radius: 8px; overflow: hidden; } .step { background: var(--white); padding: clamp(22px, 2.5vw, 34px) 24px; transition: background 0.3s; } .step:hover { background: var(--cream); } .step-num { font-family: var(--font-display); font-size: 56px; font-weight: 300; color: var(--sand); line-height: 1; margin-bottom: 12px; transition: color 0.3s; } .step:hover .step-num { color: var(--terra); } .step-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--ink); margin-bottom: 8px; } .step-desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.58; font-weight: 300; } /* ══ INCLUDES ══ */ .includes { padding: var(--section-pad) 0; background: var(--cream-dark); } .includes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: start; } .includes-items { display: flex; flex-direction: column; gap: 0; } .include-item { display: flex; align-items: flex-start; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--sand); cursor: default; transition: all 0.2s; } .include-item:first-child { border-top: 1px solid var(--sand); } .include-item:hover { padding-left: 6px; } .include-num { font-family: var(--font-display); font-size: 13px; font-style: italic; color: var(--terra); flex-shrink: 0; padding-top: 2px; min-width: 22px; } .include-text strong { display: block; font-size: 14.5px; font-weight: 500; color: var(--ink); margin-bottom: 3px; } .include-text span { font-size: 13px; color: var(--olive-light); line-height: 1.5; font-weight: 300; } .for-whom-card { background: var(--olive); border-radius: 16px; padding: clamp(28px, 4vw, 52px) clamp(28px, 4vw, 56px); position: sticky; top: 88px; min-height: 260px; display: flex; flex-direction: column; justify-content: center; } .for-whom-label { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); margin-bottom: 16px; } .for-whom-title { font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 32px); font-weight: 300; color: var(--cream); margin-bottom: 20px; line-height: 1.15; } .for-whom-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .for-whom-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; color: rgba(245,240,232,0.82); line-height: 1.5; font-weight: 300; } .check { width: 17px; height: 17px; background: var(--terra); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; margin-top: 2px; } /* ══ TESTIMONIALS ══ */ .testimonials { padding: var(--section-pad) 0; padding-bottom: clamp(56px, 8vw, 112px); background: var(--white); text-align: center; } .testimonials .section-eyebrow { justify-content: center; } .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; } .testimonial { background: var(--cream); padding: 26px 24px; border-radius: 6px; text-align: left; border: 1px solid var(--sand); transition: transform 0.25s, box-shadow 0.25s; position: relative; } .testimonial:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.07); } .testimonial::before { content: '"'; font-family: var(--font-display); font-size: 64px; color: var(--terra); opacity: 0.18; line-height: 1; position: absolute; top: 10px; left: 18px; } .testimonial p { font-family: var(--font-display); font-size: 16px; font-style: italic; color: var(--ink); line-height: 1.6; margin-bottom: 16px; padding-top: 16px; } .testimonial-author { display: flex; align-items: center; gap: 10px; } .testimonial-avatar { width: 34px; height: 34px; background: var(--olive); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 14px; color: var(--cream); font-weight: 600; flex-shrink: 0; } .testimonial-name { font-size: 12.5px; font-weight: 500; color: var(--olive-light); line-height: 1.3; } .testimonial-stars { font-size: 10px; color: var(--terra); letter-spacing: 1px; } /* ══ PRICING ══ */ .pricing { padding: var(--section-pad) 0; background: var(--ink); color: var(--cream); text-align: center; position: relative; overflow: hidden; } .pricing::before { content: ''; position: absolute; top: -180px; left: 50%; transform: translateX(-50%); width: 560px; height: 560px; background: radial-gradient(circle, rgba(143,166,136,0.1) 0%, transparent 70%); pointer-events: none; } .pricing-eyebrow { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--terra-light); margin-bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 12px; } .pricing-eyebrow::before, .pricing-eyebrow::after { content: ''; display: block; width: 36px; height: 1px; background: var(--terra-light); opacity: 0.35; } .pricing-h2 { font-family: var(--font-display); font-size: clamp(38px, 4.8vw, 68px); font-weight: 300; line-height: 1.06; margin-bottom: 14px; } .pricing-h2 em { font-style: italic; color: var(--terra-light); } .pricing-sub { font-size: 15.5px; opacity: 0.58; max-width: 460px; margin: 0 auto 44px; font-weight: 300; line-height: 1.62; } .price-card { display: inline-flex; flex-direction: column; align-items: center; background: rgba(245,240,232,0.05); border: 1px solid rgba(245,240,232,0.12); border-radius: 10px; padding: clamp(32px, 4vw, 52px) clamp(32px, 4.5vw, 64px); backdrop-filter: blur(10px); max-width: 460px; width: 100%; transition: border-color 0.3s; } .price-card:hover { border-color: rgba(196,113,74,0.38); } .price-amount-wrap { display: flex; align-items: flex-start; gap: 5px; margin-bottom: 6px; } .price-currency { font-family: var(--font-display); font-size: 20px; margin-top: 14px; opacity: 0.55; } .price-amount { font-family: var(--font-display); font-size: clamp(72px, 9vw, 108px); font-weight: 300; line-height: 1; color: var(--cream); } .price-period { font-size: 11.5px; opacity: 0.45; letter-spacing: 0.07em; margin-bottom: 28px; text-transform: uppercase; } .btn-buy { display: inline-flex; align-items: center; gap: 10px; background: var(--terra); color: white; font-family: var(--font-body); font-size: 16px; font-weight: 600; text-decoration: none; padding: 18px 44px; border-radius: 2px; letter-spacing: 0.03em; transition: all 0.3s ease; width: 100%; justify-content: center; margin-bottom: 20px; } .btn-buy:hover { background: #D4805A; transform: translateY(-3px); box-shadow: 0 24px 56px rgba(196,113,74,0.35); } .price-perks { display: flex; flex-direction: column; gap: 9px; width: 100%; } .perk { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(245,240,232,0.56); font-weight: 300; } .perk-icon { color: var(--sage); font-size: 13px; } .urgency-note { margin-top: 24px; font-size: 11.5px; color: rgba(245,240,232,0.38); letter-spacing: 0.06em; text-transform: uppercase; } .urgency-note strong { color: var(--terra-light); } /* ══ FAQ ══ */ .faq { padding: var(--section-pad) 0; background: var(--cream-dark); } .faq .section-eyebrow { justify-content: center; } .faq-header { text-align: center; margin-bottom: clamp(28px, 4vw, 50px); } .faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 820px; margin: 0 auto; } .faq-item { background: var(--white); padding: 22px 24px 22px 28px; border-radius: 6px; border-left: 3px solid var(--terra); transition: transform 0.2s, box-shadow 0.2s; } .faq-item:hover { transform: translateX(5px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); } .faq-item strong { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 8px; } .faq-item p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.62; font-weight: 300; } /* ══ COLLECTION — portadas reales ══ */ .collection { padding: var(--section-pad) 0; background: var(--cream); } .collection-header { text-align: center; margin-bottom: clamp(32px, 4.5vw, 56px); } .collection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; } /* Base card */ .vol-card { border-radius: 8px; overflow: hidden; background: var(--white); box-shadow: 0 8px 24px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04); transition: transform 0.32s ease, box-shadow 0.32s ease; } /* Vol. 1 disponible — protagonista */ .vol-card--active { box-shadow: 0 16px 52px rgba(0,0,0,0.18); transform: translateY(-8px) scale(1.03); } .vol-card--active:hover { transform: translateY(-14px) scale(1.03); box-shadow: 0 28px 64px rgba(0,0,0,0.22); } /* Vol. 2 y 3 próximamente — desaturados */ .vol-card--soon { opacity: 0.80; } .vol-card--soon:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); opacity: 0.9; } .vol-card--soon .vol-img { filter: grayscale(100%); opacity: 0.85; transition: filter 0.4s ease, transform 0.4s ease; } .vol-card--soon:hover .vol-img { filter: grayscale(80%); opacity: 0.9; } .vol-cover { aspect-ratio: 3/4; position: relative; overflow: hidden; } .vol-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.4s ease; } .vol-card:hover .vol-img { transform: scale(1.03); } .vol-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 14px 14px; /* Solo sombra suave abajo para el estado, sin cubrir la portada */ background: linear-gradient(to bottom, rgba(20,21,18,0.45) 0%, transparent 28%), linear-gradient(to top, rgba(20,21,18,0.35) 0%, transparent 22%); } .vol-status { position: absolute; top: 16px; right: 16px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; font-weight: 500; backdrop-filter: blur(6px); } .status-available { background: var(--terra); color: white; } .status-soon { background: rgba(245,240,232,0.18); color: rgba(245,240,232,0.8); border: 1px solid rgba(245,240,232,0.2); } .vol-num { font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,240,232,0.75); margin-bottom: 0; } .vol-title { font-family: var(--font-display); font-size: clamp(18px, 1.8vw, 24px); font-weight: 300; color: var(--cream); line-height: 1.15; } .vol-title em { font-style: italic; color: var(--terra-light); } .vol-footer { padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--sand); } .vol-footer-label { font-size: 12.5px; color: var(--olive-light); font-weight: 300; } .vol-cta { font-size: 12px; font-weight: 500; color: var(--terra); text-decoration: none; letter-spacing: 0.04em; display: flex; align-items: center; gap: 5px; transition: gap 0.2s; } .vol-cta:hover { gap: 9px; } .vol-cta--disabled { font-size: 12px; font-weight: 400; color: var(--sand); cursor: default; letter-spacing: 0.04em; } /* ══ CREDIBILIDAD ══ */ .credibility { background: var(--white); border-bottom: 1px solid var(--sand); padding: 22px 0; } .credibility-inner { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; } .credibility-item { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; } .credibility-num { font-family: var(--font-display); font-size: clamp(18px, 2vw, 22px); font-weight: 600; color: var(--ink); } .credibility-label { font-size: 11px; color: var(--olive-light); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 300; } .credibility-sep { font-size: 20px; color: var(--sand); } .credibility-author .credibility-num { font-size: clamp(15px, 1.6vw, 18px); } /* ══ ANTI-OBJECIONES ══ */ .antiobj { padding: var(--section-pad) 0; background: var(--ink); color: var(--cream); } .antiobj-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(36px, 5vw, 80px); align-items: start; } .antiobj .section-eyebrow { color: var(--terra-light); } .antiobj .section-eyebrow::before { background: var(--terra-light); } .antiobj .section-h2 { color: var(--cream); } .antiobj .section-h2 em { color: var(--terra-light); } .antiobj-list { display: flex; flex-direction: column; gap: 0; } .antiobj-item { display: flex; align-items: flex-start; gap: 18px; padding: 20px 0; border-bottom: 1px solid rgba(245,240,232,0.08); } .antiobj-item:first-child { border-top: 1px solid rgba(245,240,232,0.08); } .antiobj-check { color: var(--terra-light); font-size: 14px; flex-shrink: 0; margin-top: 3px; } .antiobj-item strong { display: block; font-size: 15px; font-weight: 500; color: var(--cream); margin-bottom: 5px; } .antiobj-item p { font-size: 13.5px; color: rgba(245,240,232,0.6); line-height: 1.6; font-weight: 300; margin: 0; } /* ══ VIDA REAL ══ */ .reallife { padding: var(--section-pad) 0; background: var(--cream); } .reallife-inner { max-width: 740px; } .reallife-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; } .reallife-item { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-soft); font-weight: 300; padding: 14px 16px; background: var(--white); border-radius: 4px; border-left: 3px solid var(--terra); } .reallife-icon { color: var(--terra); font-size: 13px; flex-shrink: 0; } /* ══ ABOUT CHEF ══ */ .about-chef { padding: var(--section-pad) 0; background: var(--white); } .about-chef-grid { display: grid; grid-template-columns: 240px 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; } .about-chef-photo img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; object-position: center top; display: block; box-shadow: 0 12px 40px rgba(0,0,0,0.12); border: 4px solid var(--cream); outline: 1px solid var(--sand); } .about-chef-bio { font-size: clamp(14px, 1.4vw, 16px); color: var(--ink-soft); line-height: 1.75; font-weight: 300; margin-bottom: 14px; max-width: 520px; } .about-chef-bio strong { color: var(--ink); font-weight: 500; } .btn-follow { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--olive); border: 1.5px solid var(--olive); font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 11px 24px; border-radius: 2px; margin-top: 8px; transition: all 0.25s ease; } .btn-follow:hover { background: var(--olive); color: var(--cream); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(74,82,64,0.2); } /* ══ FOOTER ══ */ footer { background: var(--ink); color: var(--cream); padding: 52px 0 40px; } .footer-inner { display: flex; align-items: center; justify-content: space-between; padding-bottom: 28px; border-bottom: 1px solid rgba(245,240,232,0.1); margin-bottom: 24px; } .footer-logo { height: 70px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.9; } .footer-tagline { font-size: 14px; color: rgba(245,240,232,0.45); font-style: italic; font-family: var(--font-display); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: rgba(245,240,232,0.28); letter-spacing: 0.04em; } /* ══ MOBILE CTA ══ */ .mobile-buy { display: none; position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--terra); color: white; padding: 14px 30px; border-radius: 100px; font-weight: 500; font-size: 14.5px; letter-spacing: 0.02em; z-index: 999; box-shadow: 0 12px 36px rgba(196,113,74,0.5); text-decoration: none; white-space: nowrap; transition: all 0.25s; } .mobile-buy:hover { background: var(--ink); transform: translateX(-50%) translateY(-2px); } /* ══ SCROLL REVEAL ══ */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease, transform 0.65s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } /* ══ RESPONSIVE 900px ══ */ @media (max-width: 900px) { .hero { grid-template-columns: 1fr; min-height: auto; } .hero-right { min-height: 420px; order: -1; } .hero-left { padding: 32px 20px 44px; } .hero-corner-text { display: none; } .problem .container { grid-template-columns: 1fr; } .steps-grid { grid-template-columns: 1fr 1fr; } .includes-grid { grid-template-columns: 1fr; } .for-whom-card { position: static; } .collection-grid { grid-template-columns: 1fr 1fr; } .dishes-grid { grid-template-columns: 1fr 1fr; } .antiobj-inner { grid-template-columns: 1fr; } .reallife-grid { grid-template-columns: 1fr; } .about-chef-grid { grid-template-columns: 1fr; text-align: center; } .footer-inner { flex-direction: column; gap: 16px; text-align: center; } .footer-bottom { flex-direction: column; gap: 8px; text-align: center; } } /* ══ RESPONSIVE 700px ══ */ @media (max-width: 700px) { .mobile-buy { display: block; } .testimonials-grid { grid-template-columns: 1fr; } .faq-grid { grid-template-columns: 1fr; } .hero-book { max-width: 420px; width: 90%; } .nav-logo img { height: 54px; } } /* ══ RESPONSIVE 560px ══ */ @media (max-width: 560px) { .steps-grid { grid-template-columns: 1fr; } .collection-grid { grid-template-columns: 1fr; } .about-chef-photo { display: flex; justify-content: center; } .dishes-grid { grid-template-columns: 1fr; } .price-card { padding: 26px 20px; } .hero-actions { align-items: stretch; } .btn-primary { justify-content: center; } }