/* ============================================================= CORDEROS ARGENTINOS — styles.css Editorial de campo. 4 temas curados, todos validados WCAG AA. El tema se aplica con data-theme en . ============================================================= */ /* ============================================================= 0. Tipografías alojadas en el propio sitio Variables (un archivo cubre todos los pesos) y sin depender de Google: el sitio se ve igual sin conexión y carga antes. Licencia OFL — ver assets/fonts/LICENSE-*.txt ============================================================= */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("assets/fonts/fraunces-latin-wght-italic.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================= 1. Temas ============================================================= */ :root, [data-theme="campo"] { --bg: #f7f3ea; --bg-alt: #efe8da; --surface: #fffcf6; --ink: #191510; --ink-mute: #6c6153; --accent: #8e2f1c; --accent-ink: #fff8ef; --accent-2: #4e5a38; --gold: #a87c3c; --dark-bg: #191510; --dark-ink: #f2ebdd; --dark-mute: #b3a692; --line: rgba(25, 21, 16, .14); --line-soft: rgba(25, 21, 16, .07); --shadow: rgba(25, 21, 16, .13); } [data-theme="tierra"] { --bg: #f6efe6; --bg-alt: #ede1d3; --surface: #fffaf3; --ink: #201710; --ink-mute: #75604c; --accent: #a8461c; --accent-ink: #fff6ed; --accent-2: #6b5136; --gold: #b0813e; --dark-bg: #241a12; --dark-ink: #f5ead9; --dark-mute: #bba88f; --line: rgba(32, 23, 16, .15); --line-soft: rgba(32, 23, 16, .08); --shadow: rgba(32, 23, 16, .14); } [data-theme="pastura"] { --bg: #f3f3ea; --bg-alt: #e6e8d9; --surface: #fcfcf6; --ink: #14170f; --ink-mute: #5f6653; --accent: #46662b; --accent-ink: #f6faef; --accent-2: #8e4a2c; --gold: #9c8a38; --dark-bg: #1a1e13; --dark-ink: #edf0e1; --dark-mute: #a9b096; --line: rgba(20, 23, 15, .14); --line-soft: rgba(20, 23, 15, .07); --shadow: rgba(20, 23, 15, .13); } [data-theme="nocturno"] { --bg: #141210; --bg-alt: #1c1916; --surface: #221e1a; --ink: #f3ede2; --ink-mute: #a79b89; --accent: #e0714e; --accent-ink: #17110d; --accent-2: #93a06e; --gold: #c99b50; --dark-bg: #0e0c0a; --dark-ink: #f3ede2; --dark-mute: #a79b89; --line: rgba(243, 237, 226, .16); --line-soft: rgba(243, 237, 226, .08); --shadow: rgba(0, 0, 0, .5); } :root { --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --ease: cubic-bezier(.22, 1, .36, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); --nav-h: 74px; --container: 1180px; --radius: 6px; --section: clamp(4.5rem, 9vw, 8rem); } /* ============================================================= 2. Reset y base ============================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--sans); font-size: 16px; line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, picture, video { display: block; max-width: 100%; } img { height: auto; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } a { color: inherit; text-decoration: none; } p { text-wrap: pretty; } ul, ol { list-style: none; padding: 0; } h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } [data-theme="nocturno"] :focus-visible { outline-color: var(--gold); } .skip-link { position: fixed; top: -100px; left: 1rem; z-index: 200; background: var(--ink); color: var(--bg); padding: .7rem 1.1rem; border-radius: var(--radius); font-size: .9rem; font-weight: 600; transition: top .2s var(--ease); } .skip-link:focus { top: 1rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================= 3. Utilidades ============================================================= */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; } @media (min-width: 720px) { .container { padding-inline: 2rem; } } @media (min-width: 1240px) { .container { padding-inline: 2.5rem; } } .kicker { display: inline-flex; align-items: center; gap: .6rem; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55; flex: none; } .section-head { max-width: 40rem; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); } .section-head h2 { font-size: clamp(1.95rem, 4.2vw, 3.1rem); margin-top: .85rem; } .section-head p { color: var(--ink-mute); margin-top: 1.05rem; font-size: 1.06rem; max-width: 34rem; } .rule { height: 1px; background: var(--line); border: 0; } /* Grano sutil, solo en temas claros */ .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .3; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); } [data-theme="nocturno"] .grain { mix-blend-mode: screen; opacity: .12; } /* ---- Botones ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .92rem 1.55rem; border-radius: var(--radius); font-size: .95rem; font-weight: 600; letter-spacing: .005em; transition: background-color .25s var(--ease-soft), color .25s var(--ease-soft), border-color .25s var(--ease-soft), transform .25s var(--ease); will-change: transform; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn svg { width: 18px; height: 18px; flex: none; } .btn { white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { background: var(--ink); color: var(--bg); } .btn-ghost { border: 1px solid var(--line); color: var(--ink); background: transparent; } .btn-ghost:hover { border-color: var(--ink); background: var(--surface); } .btn-solid { background: var(--ink); color: var(--bg); } .btn-solid:hover { background: var(--accent); color: var(--accent-ink); } .btn-on-dark { background: var(--dark-ink); color: var(--dark-bg); } .btn-on-dark:hover { background: var(--accent); color: var(--accent-ink); } .btn-sm { padding: .62rem 1.05rem; font-size: .87rem; } /* Enlace con subrayado animado */ .link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-size: .92rem; font-weight: 600; color: var(--accent); padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color .25s var(--ease-soft), gap .25s var(--ease); } .link-arrow:hover { border-color: currentColor; gap: .7rem; } /* ============================================================= 4. Navegación ============================================================= */ .nav { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h); display: flex; align-items: center; transition: background-color .3s var(--ease-soft), box-shadow .3s var(--ease-soft), border-color .3s var(--ease-soft); border-bottom: 1px solid transparent; } .nav.is-solid { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom-color: var(--line-soft); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .nav-brand { display: flex; align-items: center; gap: .6rem; } .brand-mark { display: block; } .brand-mark img { width: 100%; height: auto; } .brand-mark-light { display: none; } [data-theme="nocturno"] .brand-mark-dark { display: none; } [data-theme="nocturno"] .brand-mark-light { display: block; } .nav-brand .brand-mark { width: 34px; } .nav-brand-text { font-family: var(--serif); font-weight: 600; font-size: .96rem; line-height: 1.1; letter-spacing: -.01em; } .nav-brand-text span { display: block; font-family: var(--sans); font-weight: 500; font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-mute); margin-top: 2px; } /* En pantallas angostas el nombre cede lugar al boton de contacto */ @media (max-width: 560px) { .nav-brand-text { display: none; } .nav-brand .brand-mark { width: 38px; } .nav-cta .btn-sm { padding: .6rem .9rem; } } .nav-links { display: none; align-items: center; gap: 1.9rem; } .nav-links a { position: relative; white-space: nowrap; font-size: .89rem; font-weight: 500; color: var(--ink-mute); transition: color .22s var(--ease-soft); } .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: var(--accent); transition: right .3s var(--ease); } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { right: 0; } @media (min-width: 1000px) { .nav-links { display: flex; } } .nav-cta { display: flex; align-items: center; gap: .55rem; } .nav-phone { display: none; } @media (min-width: 620px) { .nav-phone { display: inline-flex; } } @media (min-width: 1000px) { .nav-mobile { display: none; } } /* Menú móvil con
— funciona sin JS */ .nav-mobile { position: relative; } .nav-mobile summary { list-style: none; cursor: pointer; width: 42px; height: 42px; display: grid; place-content: center; gap: 5px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .nav-mobile summary::-webkit-details-marker { display: none; } .nav-mobile summary span { width: 17px; height: 1.5px; background: var(--ink); display: block; transition: transform .3s var(--ease), opacity .2s var(--ease-soft); } .nav-mobile[open] summary span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-mobile[open] summary span:nth-child(2) { opacity: 0; } .nav-mobile[open] summary span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .nav-mobile nav { position: absolute; right: 0; top: calc(100% + .6rem); min-width: 230px; padding: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 26px 50px -18px var(--shadow); display: grid; gap: 1px; } .nav-mobile nav a { padding: .78rem .9rem; border-radius: 5px; font-size: .93rem; font-weight: 500; transition: background-color .2s var(--ease-soft); } .nav-mobile nav a:hover { background: var(--bg-alt); } .nav-mobile nav .is-cta { color: var(--accent); font-weight: 600; } /* ============================================================= 5. Hero ============================================================= */ .hero { position: relative; padding-top: calc(var(--nav-h) + clamp(2.5rem, 7vw, 5rem)); padding-bottom: clamp(3rem, 7vw, 5.5rem); overflow: hidden; } .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-soft); } .hero-inner { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); align-items: center; } @media (min-width: 980px) { .hero-inner { grid-template-columns: 1.03fr .97fr; gap: clamp(3rem, 5vw, 4.5rem); } } .hero-eyebrow { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .hero-badge { display: inline-flex; align-items: center; gap: .45rem; font-size: .73rem; font-weight: 600; letter-spacing: .04em; padding: .34rem .75rem; border: 1px solid var(--line); border-radius: 100px; color: var(--ink-mute); } .hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); flex: none; } .hero-title { font-size: clamp(2.5rem, 6.2vw, 4.35rem); line-height: 1.02; letter-spacing: -.025em; } .hero-title em { font-style: italic; font-weight: 500; color: var(--accent); display: block; } .hero-sub { margin-top: 1.5rem; font-size: clamp(1.02rem, 1.5vw, 1.13rem); color: var(--ink-mute); max-width: 33rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; } .hero-facts { display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; margin-top: 2.6rem; padding-top: 1.7rem; border-top: 1px solid var(--line-soft); } .hero-fact { display: flex; flex-direction: column; gap: .1rem; } .hero-fact strong { font-family: var(--serif); font-size: 1.42rem; font-weight: 600; letter-spacing: -.01em; } .hero-fact span { font-size: .8rem; color: var(--ink-mute); line-height: 1.35; } /* Figura fotográfica del hero */ .hero-figure { position: relative; } .hero-figure img { width: 100%; border-radius: 10px; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 34px 64px -30px var(--shadow); } .hero-figure figcaption { margin-top: .85rem; font-size: .78rem; color: var(--ink-mute); display: flex; align-items: center; gap: .5rem; } .hero-figure figcaption::before { content: ""; width: 18px; height: 1px; background: var(--line); flex: none; } /* ============================================================= 6. Marquesina ============================================================= */ .marquee { overflow: hidden; background: var(--ink); color: var(--bg); padding-block: .95rem; } [data-theme="nocturno"] .marquee { background: var(--accent); color: var(--accent-ink); } .marquee-track { display: flex; width: max-content; animation: marquee 44s linear infinite; } .marquee-track span { display: inline-flex; align-items: center; padding-inline: 1.6rem; font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; } .marquee-track span::after { content: "◆"; margin-left: 1.6rem; opacity: .4; font-size: .6rem; } @keyframes marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* ============================================================= 7. Bifurcación mayorista / minorista ============================================================= */ .audiences { padding-block: var(--section); background: var(--bg); } .audiences-grid { display: grid; gap: 1.2rem; } @media (min-width: 860px) { .audiences-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } } .audience { display: flex; flex-direction: column; padding: clamp(1.7rem, 3.2vw, 2.4rem); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: border-color .3s var(--ease-soft), box-shadow .35s var(--ease), transform .35s var(--ease); } .audience:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 28px 50px -28px var(--shadow); transform: translateY(-3px); } .audience-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .audience h3 { font-size: clamp(1.35rem, 2.4vw, 1.72rem); margin-top: .75rem; } .audience > p { color: var(--ink-mute); margin-top: .85rem; font-size: .99rem; } .audience ul { margin-top: 1.4rem; display: grid; gap: .68rem; } .audience li { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; color: var(--ink-mute); } .audience li svg { width: 16px; height: 16px; margin-top: .28rem; flex: none; color: var(--accent-2); } .audience .btn { margin-top: auto; padding-top: .92rem; align-self: flex-start; } .audience ul { margin-bottom: 1.9rem; } /* ============================================================= 8. Nosotros ============================================================= */ .about { padding-block: var(--section); background: var(--bg-alt); } .about-grid { display: grid; gap: clamp(2.2rem, 5vw, 3.6rem); align-items: center; } @media (min-width: 940px) { .about-grid { grid-template-columns: 1fr 1fr; } } .about-lead { font-family: var(--serif); font-size: clamp(1.55rem, 3.3vw, 2.35rem); line-height: 1.16; letter-spacing: -.02em; margin-top: 1rem; text-wrap: balance; } .about-body p { color: var(--ink-mute); font-size: 1.01rem; margin-top: 1.15rem; } .about-signature { display: flex; align-items: center; gap: .85rem; margin-top: 2.1rem; padding-top: 1.6rem; border-top: 1px solid var(--line); } .about-signature-mark { width: 46px; flex: none; } .about-signature strong { font-size: .95rem; display: block; } .about-signature span { font-size: .82rem; color: var(--ink-mute); } .about-figure img { width: 100%; border-radius: 10px; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: 0 30px 56px -30px var(--shadow); } .about-figure figcaption { margin-top: .85rem; font-size: .78rem; color: var(--ink-mute); display: flex; align-items: center; gap: .5rem; } .about-figure figcaption::before { content: ""; width: 18px; height: 1px; background: var(--line); flex: none; } /* ============================================================= 9. Banda con cita ============================================================= */ .quote { position: relative; padding-top: 0; padding-bottom: var(--section); background: var(--bg-alt); } .about + .quote { margin-top: calc(var(--section) * -0.45); } .quote-band { position: relative; overflow: hidden; border-radius: 14px; min-height: clamp(300px, 34vw, 420px); display: grid; align-items: end; } .quote-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .quote-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 10, 8, .88) 0%, rgba(12, 10, 8, .55) 45%, rgba(12, 10, 8, .18) 100%); } .quote-content { position: relative; z-index: 1; padding: clamp(1.7rem, 4vw, 3.2rem); max-width: 44rem; } .quote-content blockquote { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.25rem, 2.8vw, 2rem); line-height: 1.28; letter-spacing: -.015em; color: #f6f1e7; text-wrap: balance; } .quote-author { margin-top: 1.3rem; display: flex; align-items: center; gap: .7rem; } .quote-author::before { content: ""; width: 26px; height: 1px; background: rgba(246, 241, 231, .5); } .quote-author strong { color: #f6f1e7; font-size: .92rem; font-weight: 600; } .quote-author span { color: rgba(246, 241, 231, .68); font-size: .82rem; } /* ============================================================= 10. Productos ============================================================= */ .products { padding-block: var(--section); background: var(--bg); } .products-grid { display: grid; gap: 1.1rem; } @media (min-width: 640px) { .products-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .products-grid { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } } .product { position: relative; display: flex; flex-direction: column; padding: 1.7rem 1.5rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; transition: border-color .3s var(--ease-soft), box-shadow .35s var(--ease), transform .35s var(--ease); } .product:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 26px 46px -26px var(--shadow); transform: translateY(-3px); } .product-num { position: absolute; top: 1.2rem; right: 1.3rem; font-family: var(--serif); font-style: italic; font-size: .92rem; color: var(--ink-mute); opacity: .5; } .product-icon { width: 46px; height: 46px; margin-bottom: 1.15rem; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); } .product-icon svg { width: 23px; height: 23px; color: var(--accent); } .product h3 { font-size: 1.22rem; } .product p { margin-top: .65rem; color: var(--ink-mute); font-size: .93rem; } .product .link-arrow { margin-top: 1.5rem; align-self: flex-start; } .product p + .link-arrow { margin-top: auto; padding-top: 1.5rem; } /* ============================================================= 10b. Referencia de cortes ============================================================= */ .cuts { padding-block: var(--section); background: var(--bg-alt); } .cuts-grid { display: grid; gap: 1.3rem; grid-template-columns: 1fr; } @media (min-width: 900px) { .cuts-grid { grid-template-columns: 1fr 1.55fr .85fr; align-items: start; gap: 1.6rem; } .cuts-grid > div { grid-column: 1; align-self: center; } .cuts-diagram { grid-column: 2; } .cuts-photo { grid-column: 3; } } .cuts-diagram, .cuts-photo { border-radius: 10px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); } .cuts-diagram img { width: 100%; height: auto; } .cuts-photo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; } .cuts-photo figcaption { padding: .85rem 1.05rem; font-size: .8rem; color: var(--ink-mute); border-top: 1px solid var(--line); } /* ============================================================= 11. Por qué elegirnos ============================================================= */ .pillars { padding-block: var(--section); background: var(--bg-alt); } .pillars-figure { margin-bottom: clamp(2.5rem, 5vw, 3.6rem); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 56px -32px var(--shadow); } .pillars-figure img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; } .pillars-grid { display: grid; gap: 2.4rem; } @media (min-width: 860px) { .pillars-grid { grid-template-columns: repeat(3, 1fr); gap: 2.2rem; } } .pillar { padding-top: 1.5rem; border-top: 2px solid var(--ink); } .pillar-num { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--accent); } .pillar h3 { font-size: 1.24rem; margin-top: .7rem; } .pillar p { color: var(--ink-mute); margin-top: .6rem; font-size: .96rem; } /* ============================================================= 12. Cómo pedir ============================================================= */ .steps { padding-block: var(--section); background: var(--bg); } .steps-list { display: grid; gap: 1.1rem; } @media (min-width: 860px) { .steps-list { grid-template-columns: repeat(3, 1fr); gap: 1.3rem; } } .step { position: relative; padding: 1.8rem 1.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; } .step-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: .85rem; font-weight: 700; margin-bottom: 1.1rem; } .step h3 { font-family: var(--sans); font-weight: 700; font-size: 1.06rem; letter-spacing: -.005em; } .step p { color: var(--ink-mute); margin-top: .5rem; font-size: .93rem; } .step-arrow { display: none; position: absolute; top: 50%; right: -1rem; transform: translateY(-50%); color: var(--ink-mute); opacity: .4; font-size: 1rem; } @media (min-width: 860px) { .step:not(:last-child) .step-arrow { display: block; } } /* ============================================================= 13. Preguntas frecuentes ============================================================= */ .faq { padding-block: var(--section); background: var(--bg-alt); } .faq-grid { display: grid; gap: clamp(2rem, 4vw, 3.4rem); align-items: start; } @media (min-width: 940px) { .faq-grid { grid-template-columns: .8fr 1.2fr; } } .faq-list { display: grid; } .faq-item { border-top: 1px solid var(--line); } .faq-item:last-child { border-bottom: 1px solid var(--line); } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; padding: 1.35rem 0; font-size: 1.02rem; font-weight: 600; transition: color .22s var(--ease-soft); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--accent); } .faq-icon { position: relative; flex: none; width: 20px; height: 20px; margin-top: .22rem; } .faq-icon::before, .faq-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .3s var(--ease), opacity .25s var(--ease-soft); } .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; } .faq-answer { padding-bottom: 1.5rem; } .faq-answer p { color: var(--ink-mute); font-size: .97rem; max-width: 44rem; } .faq-aside { padding: clamp(1.6rem, 3vw, 2.1rem); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; } .faq-aside h3 { font-size: 1.15rem; } .faq-aside p { color: var(--ink-mute); font-size: .95rem; margin-top: .7rem; } .faq-aside .btn { margin-top: 1.4rem; width: 100%; } /* ============================================================= 14. Contacto ============================================================= */ .contact { padding-block: var(--section); background: var(--dark-bg); color: var(--dark-ink); } .contact .kicker { color: var(--gold); } .contact .section-head h2 { color: var(--dark-ink); } .contact .section-head p { color: var(--dark-mute); } .contact-grid { display: grid; gap: 1.3rem; } @media (min-width: 900px) { .contact-grid { grid-template-columns: 1.05fr .95fr; gap: 1.6rem; } } .contact-card, .contact-note { padding: clamp(1.7rem, 3.2vw, 2.4rem); border-radius: 12px; border: 1px solid rgba(255, 255, 255, .13); } .contact-card { background: rgba(255, 255, 255, .045); display: flex; flex-direction: column; } .contact-note { background: transparent; } .contact-owner { display: flex; align-items: center; gap: .85rem; } .contact-owner-avatar { width: 48px; flex: none; } .contact-owner-avatar img { width: 100%; height: auto; } .contact-owner strong { display: block; font-size: .98rem; } .contact-owner span { font-size: .82rem; color: var(--dark-mute); } .contact-details { display: grid; gap: .6rem; margin-top: 1.8rem; } .contact-detail { display: flex; align-items: center; gap: .9rem; padding: .95rem 1.05rem; border-radius: 8px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09); transition: background-color .25s var(--ease-soft), border-color .25s var(--ease-soft); } a.contact-detail:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); } .contact-detail svg { width: 19px; height: 19px; flex: none; color: var(--gold); } .contact-detail strong { display: block; font-size: .95rem; } .contact-detail span { font-size: .8rem; color: var(--dark-mute); } .contact-card .btn { margin-top: 1.8rem; } .contact-note h3 { font-size: 1.12rem; color: var(--dark-ink); } .contact-note ul { margin-top: 1.3rem; display: grid; gap: .8rem; } .contact-note li { display: flex; gap: .7rem; align-items: flex-start; font-size: .94rem; color: var(--dark-mute); } .contact-note li svg { width: 16px; height: 16px; margin-top: .27rem; flex: none; color: var(--gold); } .contact-hours { margin-top: 1.9rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .13); } .contact-hours strong { display: block; font-size: .88rem; } .contact-hours span { font-size: .88rem; color: var(--dark-mute); } /* ============================================================= 15. Pie ============================================================= */ .footer { background: var(--dark-bg); color: var(--dark-mute); border-top: 1px solid rgba(255, 255, 255, .1); padding-block: clamp(2.6rem, 5vw, 3.6rem); } .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 1.8rem; text-align: center; } @media (min-width: 800px) { .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; } } .footer-logo { flex: none; } .footer-logo img { width: 200px; height: auto; opacity: .92; } .footer-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem; font-size: .85rem; } .footer-meta a { transition: color .22s var(--ease-soft); } .footer-meta a:hover { color: var(--dark-ink); } /* ============================================================= 16. Animaciones de entrada ============================================================= */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .75s var(--ease), transform .75s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } .reveal:nth-child(2) { transition-delay: .07s; } .reveal:nth-child(3) { transition-delay: .14s; } .reveal:nth-child(4) { transition-delay: .21s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .btn:hover, .product:hover, .audience:hover { transform: none; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ============================================================= 17. Selector de tema (solo vista previa — se quita en producción) ============================================================= */ .theme-switch { position: fixed; right: 1rem; bottom: 1rem; z-index: 120; display: flex; align-items: center; gap: .4rem; padding: .45rem .55rem; background: var(--surface); border: 1px solid var(--line); border-radius: 100px; box-shadow: 0 14px 32px -14px var(--shadow); font-size: .72rem; } .theme-switch span { padding-left: .45rem; padding-right: .2rem; color: var(--ink-mute); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .theme-switch button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .theme-switch button:hover { transform: scale(1.12); } .theme-switch button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink); } @media (max-width: 700px) { .theme-switch { bottom: .7rem; right: .7rem; padding: .35rem .45rem; } }