/* ============================================================= comparacafeteras.es · hoja de estilos única 1. Tokens · 2. Reset · 3. Utilidades · 4. Tipografía 5. Componentes · 6. Secciones · 7. Efectos · 8. Responsive 9. Reduced-motion ============================================================= */ /* ============================================================= 1. Tokens ============================================================= */ :root { /* Fondo blanco hueso FRÍO — nada de crema. */ --bg: #F1F1EE; --surface: #FFFFFF; --surface-2: #E7E8E2; --ink: #101512; --ink-2: #39403B; --muted: #626A64; --rule: #D9DAD3; --rule-2: #C1C3B9; /* Verde botella de rótulo de cafetería: cabecera, pie y marca. */ --brand: #15452F; --brand-2: #1C5A3D; --brand-ink: #EDEFE9; --brand-ink-2:#B9C6BC; /* Bermellón: reservado a comprar y a los precios. Nada más. */ --accent: #C4361F; --accent-hi: #A82D18; --accent-ink: #FFFFFF; /* Verde medio: todo lo que sea valoración nuestra. */ --evalua: #1E7A4F; --ok: #1E7A4F; --aviso: #2B302C; /* series del comparador — paleta validada (contraste y daltonismo) */ --s1: #C4361F; --s2: #2F66C4; --s3: #1E7A4F; --s4: #8A4FA0; --display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif; --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --gutter: clamp(18px, 4vw, 40px); --maxw: 1180px; --radius: 4px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --shadow-sm: 0 1px 2px rgba(16,21,18,.05); --shadow: 0 1px 2px rgba(16,21,18,.05), 0 10px 30px -22px rgba(16,21,18,.4); --shadow-lg: 0 2px 6px rgba(16,21,18,.06), 0 24px 60px -34px rgba(16,21,18,.45); } /* ============================================================= 2. Reset & base ============================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; } html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; scroll-padding-top: 80px; } body { font-family: var(--sans); font-size: 16px; line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg, 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; } h1, h2, h3, h4 { text-wrap: balance; line-height: 1.12; letter-spacing: -0.02em; font-weight: 600; } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); } .skip-link { position: fixed; top: -100px; left: 1rem; padding: .6rem 1rem; background: var(--ink); color: var(--bg); z-index: 9999; border-radius: 6px; font-weight: 500; } .skip-link:focus { top: 1rem; } /* ============================================================= 3. Utilidades ============================================================= */ .container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .narrow { max-width: 68ch; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .dim { color: var(--muted); } .center { text-align: center; } /* ============================================================= 4. Tipografía ============================================================= */ .eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .h-display { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 5.6vw, 60px); letter-spacing: -.035em; line-height: 1.02; } .h-2 { font-family: var(--display); font-weight: 700; font-size: clamp(25px, 3.4vw, 36px); letter-spacing: -.028em; } .h-3 { font-size: clamp(19px, 2.2vw, 23px); letter-spacing: -.015em; } .lede { font-size: clamp(17px, 2vw, 19.5px); line-height: 1.6; color: var(--ink-2); } .prose p { margin-bottom: 1.1em; } .prose h3 { margin: 1.8em 0 .5em; } .prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; } .prose li { margin-bottom: .5em; } .prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; } /* ============================================================= 5. Componentes ============================================================= */ /* --- aviso de datos de muestra --- */ .demo-bar { background: var(--aviso); color: #E4E7E3; font-family: var(--mono); font-size: 12px; letter-spacing: .02em; text-align: center; padding: 7px 16px; line-height: 1.4; } /* --- barra de afiliados (obligatoria) --- */ .aff-strip { background: var(--surface-2); border-bottom: 1px solid var(--rule); font-size: 12.5px; color: var(--muted); padding: 7px 0; line-height: 1.4; } .aff-strip a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; } /* --- cabecera --- */ /* Barra sólida verde: la referencia es un rótulo esmaltado de cafetería. */ .site-header { position: sticky; top: 0; z-index: 60; background: var(--brand); } .nav { display: flex; align-items: center; gap: 26px; height: 64px; } .brand { display: flex; align-items: baseline; gap: 7px; font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -.03em; color: var(--brand-ink); } .brand b { color: #E8B24A; font-weight: 700; } .nav-links { display: flex; align-items: center; gap: 22px; margin-left: auto; } .nav-links a { font-size: 14.5px; color: var(--brand-ink-2); padding: 6px 0; border-bottom: 1.5px solid transparent; transition: color .2s var(--ease-out), border-color .2s var(--ease-out); } .nav-links a:hover { color: var(--brand-ink); border-bottom-color: #E8B24A; } /* E.2 — el botón dentro del nav debe reafirmar su color con el ancestro */ .nav-links a.nav-cta, .nav-links a.nav-cta:hover { background: var(--accent); color: var(--accent-ink); padding: 8px 15px; border-radius: var(--radius); border-bottom-color: transparent; } .nav-links a.nav-cta:hover { background: var(--accent-hi); } .nav-toggle { display: none; } /* --- botones --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 20px; border-radius: var(--radius); font-weight: 500; font-size: 15px; border: 1px solid transparent; transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out); } .btn svg { width: 1.05em; height: 1.05em; flex: none; } .btn-amazon { background: var(--accent); color: var(--accent-ink); width: 100%; font-size: 16px; padding: 14px 22px; } .btn-amazon:hover { background: var(--accent-hi); } .btn-ghost { border-color: var(--rule-2); color: var(--ink-2); background: var(--surface); } .btn-ghost:hover { border-color: var(--ink); color: var(--ink); } .btn-dark { background: var(--brand); color: var(--brand-ink); } .btn-dark:hover { background: var(--brand-2); } /* --- chips / etiquetas --- */ .chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .02em; padding: 3px 9px; border-radius: 2px; border: 1px solid var(--rule-2); color: var(--muted); background: var(--surface); } .chip svg { width: 1.05em; height: 1.05em; flex: none; } .chip-accent { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 32%, transparent); background: color-mix(in srgb, var(--brand) 7%, transparent); font-weight: 500; } .chip-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); } /* --- estrellas --- */ .stars { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 13px; color: var(--ink-2); } .stars-ico { display: inline-flex; gap: 1px; } .stars-ico svg { width: 14px; height: 14px; flex: none; fill: #C98A16; } .stars-ico svg.off { fill: var(--rule-2); } /* --- precio --- */ .price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .price-now { font-family: var(--mono); font-size: 27px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .price-old { font-family: var(--mono); font-size: 15px; color: var(--muted); text-decoration: line-through; } .price-off { font-family: var(--mono); font-size: 11.5px; background: var(--ok); color: #fff; padding: 2px 7px; border-radius: 2px; } .price-note { font-size: 12px; color: var(--muted); margin-top: 5px; } /* --- tarjeta de producto --- */ .grid-cards { display: grid; grid-template-columns: 1fr; gap: 20px; } .card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out); } .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .card-media { background: var(--surface-2); padding: 18px; display: grid; place-items: center; border-bottom: 1px solid var(--rule); } .card-media img { max-height: 190px; width: auto; } .card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .card-brand { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .card h3 { font-size: 17.5px; line-height: 1.28; } .card h3 a:hover { color: var(--brand); } .card-specs { display: flex; flex-wrap: wrap; gap: 6px; } .card-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 12px; } .card-rank { position: absolute; top: 12px; left: 12px; font-family: var(--mono); font-size: 12px; font-weight: 600; background: var(--brand); color: var(--brand-ink); padding: 4px 9px; border-radius: 2px; } /* La tarjeta debe ocupar toda la altura de su celda: si un producto tiene menos etiquetas que otro, las tarjetas siguen alineadas. */ .card-wrap { position: relative; display: flex; } .card-wrap > .card { flex: 1; } /* --- tabla de specs --- */ .spec-group { margin-bottom: 26px; } .spec-group h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 9px; } .spec-table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .spec-table th, .spec-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule); } .spec-table th { font-weight: 400; color: var(--muted); width: 52%; } .spec-table td { font-family: var(--mono); font-variant-numeric: tabular-nums; } .spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; } /* --- panel --- */ .panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); } .panel-flat { background: var(--surface-2); border-color: var(--rule); box-shadow: none; } /* --- pros / contras --- */ .pc { display: grid; gap: 18px; } .pc-col h4 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 10px; } .pc-col h4 svg { width: 1.15em; height: 1.15em; flex: none; } .pc-col ul { list-style: none; padding: 0; display: grid; gap: 8px; } .pc-col li { display: flex; gap: 9px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); } .pc-col li svg { width: 1.1em; height: 1.1em; flex: none; margin-top: .3em; } .pc-pros h4 svg, .pc-pros li svg { fill: var(--ok); } .pc-cons h4 svg, .pc-cons li svg { fill: var(--muted); } /* --- radar --- */ .radar-wrap { display: grid; gap: 18px; align-items: center; } .radar-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; } .radar-legend span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); } .radar-legend i { width: 10px; height: 10px; border-radius: 2px; flex: none; } .radar-note { font-size: 12.5px; color: var(--muted); } .score-list { display: grid; gap: 9px; } .score-row { display: grid; grid-template-columns: 1fr 90px 28px; align-items: center; gap: 10px; font-size: 14px; } .score-bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; } .score-bar i { display: block; height: 100%; background: var(--evalua); border-radius: 3px; } .score-val { font-family: var(--mono); font-size: 13px; text-align: right; } /* --- comparador --- */ .cmp-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } /* E.3 — el aspa que sobresale no debe tener ancestro que recorte */ .slot-wrap { position: relative; overflow: visible; padding: 10px 10px 0 0; } .slot { border: 1px dashed var(--rule-2); border-radius: var(--radius); background: var(--surface); padding: 14px; min-height: 156px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; text-align: center; } .slot.filled { border-style: solid; } .slot .thumb { overflow: hidden; border-radius: 3px; background: var(--surface-2); width: 100%; display: grid; place-items: center; } .slot .thumb img { max-height: 72px; width: auto; } .slot-name { font-size: 13px; line-height: 1.3; font-weight: 500; } .slot-price { font-family: var(--mono); font-size: 13px; color: var(--muted); } .remove-badge { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font-size: 14px; line-height: 1; box-shadow: var(--shadow-sm); z-index: 2; } .cmp-table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); } .cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; } .cmp-table th, .cmp-table td { padding: 10px 14px; border-bottom: 1px solid var(--rule); text-align: left; } .cmp-table thead th { background: var(--surface-2); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; vertical-align: bottom; } .cmp-table tbody th { font-weight: 400; color: var(--muted); } .cmp-table td { font-family: var(--mono); font-variant-numeric: tabular-nums; } .cmp-table td.best { background: color-mix(in srgb, var(--ok) 10%, transparent); font-weight: 600; } .cmp-table td.best::after { content: " ●"; color: var(--ok); font-size: 9px; vertical-align: middle; } .cmp-picker { display: grid; gap: 10px; } .cmp-picker input[type="search"] { width: 100%; padding: 11px 14px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--surface); font: inherit; font-size: 15px; color: var(--ink); } .cmp-results { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; } .cmp-result { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); text-align: left; width: 100%; } .cmp-result:hover { border-color: var(--brand); } .cmp-result img { width: 34px; height: 34px; object-fit: contain; flex: none; } .cmp-result .n { font-size: 14px; line-height: 1.3; } .cmp-result .p { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--muted); } /* --- reseñas --- */ .reviews { display: grid; gap: 14px; } .review { border-left: 2px solid var(--rule-2); padding-left: 16px; } .review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; } .review-author { font-weight: 500; font-size: 14px; } .review-verified { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11px; color: var(--ok); } .review-verified svg { width: 1.05em; height: 1.05em; flex: none; fill: var(--ok); } .review p { font-size: 14.5px; color: var(--ink-2); } /* --- pie --- */ .site-footer { background: var(--brand); color: var(--brand-ink-2); margin-top: 70px; padding: 52px 0 34px; font-size: 14px; } .site-footer a { color: var(--brand-ink-2); } .site-footer a:hover { color: var(--brand-ink); } .footer-grid { display: grid; gap: 30px; margin-bottom: 34px; } .footer-grid h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8FA394; font-weight: 500; margin-bottom: 12px; } .footer-grid ul { list-style: none; padding: 0; display: grid; gap: 7px; } .footer-legal { border-top: 1px solid rgba(255,255,255,.13); padding-top: 22px; font-size: 12.5px; color: #8FA394; line-height: 1.6; } /* ============================================================= 6. Secciones ============================================================= */ .section { padding: 56px 0; } .section-head { margin-bottom: 30px; } .section-head .eyebrow { display: block; margin-bottom: 12px; } .section-head p { color: var(--muted); margin-top: 10px; max-width: 62ch; } /* --- hero --- */ .hero { padding: 64px 0 52px; border-bottom: 1px solid var(--rule); } .hero .eyebrow { display: block; margin-bottom: 20px; } .hero h1 { margin-bottom: 20px; } .hero .lede { max-width: 56ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .hero-facts { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-top: 40px; } .hero-fact { background: var(--bg); padding: 20px; } .hero-fact .n { font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: -.02em; } .hero-fact .l { font-size: 13.5px; color: var(--muted); margin-top: 6px; line-height: 1.45; } /* --- cómo elegimos --- */ .method { display: grid; gap: 18px; } .method-item { display: flex; gap: 14px; } .method-num { font-family: var(--mono); font-size: 12px; color: var(--brand); flex: none; padding-top: 3px; } .method-item h4 { font-size: 16px; margin-bottom: 4px; } .method-item p { font-size: 14.5px; color: var(--ink-2); } /* --- ficha --- */ .ficha-top { display: grid; gap: 30px; padding: 34px 0 20px; } .gallery { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 26px; display: grid; place-items: center; } .gallery img { max-height: 340px; width: auto; } .ficha-head h1 { font-family: var(--display); font-weight: 700; font-size: clamp(27px, 3.6vw, 38px); letter-spacing: -.03em; margin-bottom: 14px; } .ficha-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .ficha-buy { margin-top: 20px; padding: 20px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface-2); } .ficha-section { padding: 34px 0; border-top: 1px solid var(--rule); } .ficha-section > h2 { font-family: var(--display); font-weight: 700; font-size: clamp(21px, 2.6vw, 27px); letter-spacing: -.025em; margin-bottom: 20px; } .ideal-para { border-left: 3px solid var(--brand); padding: 4px 0 4px 18px; font-size: 17px; color: var(--ink-2); margin-top: 22px; } .related { display: grid; gap: 18px; } /* --- guía / artículo --- */ .article-head { padding: 48px 0 30px; border-bottom: 1px solid var(--rule); } .article-body { padding: 38px 0; } .toc { background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 34px; } .toc h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 10px; } .toc ol { margin: 0; padding-left: 1.2em; } .toc li { margin-bottom: 5px; font-size: 14.5px; } .toc a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; } .faq-item { border-bottom: 1px solid var(--rule); padding: 18px 0; } .faq-item h3 { font-size: 17px; margin-bottom: 8px; } .faq-item p { font-size: 15px; color: var(--ink-2); } /* --- vacío --- */ .empty { text-align: center; padding: 50px 20px; color: var(--muted); } /* ============================================================= 7. Efectos ============================================================= */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } .reveal.in { opacity: 1; transform: none; } .is-ready .reveal { will-change: opacity, transform; } /* Sin JS, todo visible: se anula desde el