/* ========================================================= ShopWithCarlos — Unified Styles (Home, Stores, Legal) styles.css • v7 ========================================================= */ /* -------- Reset & base -------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } img { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font: inherit; color: inherit; } /* -------- Design tokens -------- */ :root{ --bg: #fff; --surface: #fff; --surface-alt: #f6f8fb; --text: #111827; /* carbón */ --muted: #4b5563; /* secundario */ --border: #e5e7eb; /* borde claro */ --shadow: 0 10px 28px rgba(0,0,0,.06); --link: #0b5fff; /* azul accesible */ --link-hover: #0041d0; --btn-bg: #111827; /* primario oscuro */ --btn-text: #fff; --btn-hover: #0b5fff; --radius-sm: 10px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --container: 1080px; } /* -------- Base -------- */ body{ font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } a{ color: var(--link); text-decoration: none; transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; word-break: break-word; } a:hover, a:focus{ color: var(--link-hover); text-decoration: underline; } a:focus{ outline: 2px solid var(--link-hover); outline-offset: 2px; } .container{ width: 100%; max-width: var(--container); margin-inline: auto; padding: 1.25rem; } /* -------- Utilities -------- */ .visually-hidden{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* -------- Global Header (hero) -------- */ .header{ background: linear-gradient(180deg, #fff 0%, var(--surface-alt) 100%); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); border-radius: var(--radius-xl); margin: 0 0 1rem 0; padding: 2rem 1rem; text-align: center; } .header .logo{ margin-inline: auto; background: #fff; /* fondo blanco para PNGs con transparencia */ border: 1px solid #eef0f4; border-radius: var(--radius-md); padding: 14px; max-width: min(180px, 60vw); height: auto; } .header .header-content{ margin-top: .75rem; } .header h1{ font-weight: 600; font-size: clamp(1.6rem, 2.4vw, 2.15rem); line-height: 1.2; color: var(--text); margin: .5rem auto .35rem; max-width: 90%; } .header p{ color: var(--muted); font-weight: 300; font-size: clamp(.98rem, 1.1vw, 1.05rem); } /* “Verified on …” & monthly badge (compatible con tu JS) */ .seal{ display: inline-block; margin-top: .6rem; padding: .35rem .6rem; border: 1px dashed #cbd5e1; border-radius: var(--radius-sm); background: #f8fafc; color: #475569; font-size: .9rem; } .seal-inline{ display: inline-block; font-size: .95rem; font-weight: 600; color: #334155; background: #eef2ff; border: 1px solid #e0e7ff; padding: .15rem .45rem; border-radius: 999px; vertical-align: middle; margin-left: .25rem; } /* ========================================================= HOME (listado de tiendas) — requiere ========================================================= */ .home .page-title { font-size: clamp(1.6rem, 2.5vw, 2.25rem); margin: 0.5rem 0 0.25rem; } .home .subtitle { color:#444; margin:0 0 1rem; } .home .meta { font-size:.9rem; color:#666; } .home .search-wrap{ position: sticky; top: 0; background: #fff; padding: .75rem 0; border-bottom: 1px solid #eee; z-index: 5; } .home .searchbar{ width:100%; padding:.75rem 1rem; border:1px solid #ddd; border-radius:12px; font-size:1rem; } .home .searchbar::placeholder{ color:#6b7280; } .home .filters{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.5rem 0 1rem; } .home .pill{ border:1px solid #ddd; border-radius:999px; padding:.35rem .75rem; font-size:.9rem; cursor:pointer; user-select:none; background:#fff; color: var(--text); } .home .pill.active{ background:#111; color:#fff; border-color:#111; } .home .grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* antes 260px */ gap: .75rem; justify-items: center; } .home .store-card{ display:block; } .home .store-link{ display:flex; flex-direction:column; gap:.5rem; text-decoration:none; border:1px solid #eee; border-radius:16px; padding:1rem; background:#fff; transition:transform .06s ease, box-shadow .2s ease; color: inherit; /* evita forzar azul en todo el bloque */ } .home .store-link:hover{ transform: translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.06); } /* Estilo base de logos dentro de tarjetas */ .store-logo{ background:#fff; border:1px solid #eef0f4; border-radius:12px; padding:16px; object-fit:contain; } /* Tamaño de logos en la home */ .home .store-logo{ width: 200px; /* ajusta 160–200 a gusto */ max-height: 80px; height: auto; margin: .5rem auto 1rem; } .home .store-title{ margin:.25rem 0; color: var(--text); } .home .store-offer, .home .store-code{ margin:.15rem 0; color:#333; } .home .store-cta{ margin:.15rem 0; color: var(--link); font-weight:600; } .home .store-link:hover .store-cta{ color: var(--link-hover); text-decoration: underline; } .home .store-details{ margin:.35rem 0 .1rem; font-size:.95rem; } .home .store-details a{ text-decoration: underline; } /* ========================================================= STORE PAGES (fichas de tienda) ========================================================= */ .main-container{ width: 100%; max-width: var(--container); margin-inline: auto; padding: 1.25rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } /* Tarjetas */ .card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; } .card:hover, .card:focus-within{ transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,0,0,.10); } .card h2{ font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.35rem); margin-bottom: .5rem; color: var(--text); } .card p{ color: #374151; font-weight: 300; margin-bottom: .5rem; } .card strong{ color: var(--text); } /* Imágenes/logos dentro de cards (heredan de .store-logo) */ .card img{ border-radius: var(--radius-md); } /* Listas & tipografía adicional */ ol, ul{ padding-left: 1.25rem; } li{ margin: .4rem 0; } code{ background: #f3f4f6; color: #111827; border: 1px solid #e5e7eb; border-radius: 6px; padding: .08rem .45rem; font-size: .95em; font-weight: 600; } /* Blockquote (reseñas) */ blockquote{ background: #f8fafc; border-left: 4px solid #e5e7eb; border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: .9rem 1rem; color: #374151; } blockquote cite{ display: block; margin-top: .35rem; color: #6b7280; font-style: normal; font-size: .95rem; } /* CTA centrado cuando es un hijo directo del grid */ .main-container > a.button, .main-container > .button{ grid-column: 1 / -1; justify-self: center; } /* -------- Buttons -------- */ .button, a.button, button.button{ display: inline-block; background: var(--btn-bg); color: var(--btn-text); padding: .66rem 1.15rem; border-radius: 28px; font-weight: 600; border: none; cursor: pointer; text-align: center; transition: background-color .2s ease, transform .07s ease, box-shadow .2s ease; } .button:hover, .button:focus{ background: var(--btn-hover); transform: translateY(-1px); text-decoration: none; outline: none; } .button--ghost{ background: #fff; color: var(--text); border: 1px solid var(--border); } .button--ghost:hover{ background: #f3f4f6; } /* ========================================================= LEGAL PAGES (privacy, terms) ========================================================= */ .legal h1, .legal h2{ text-align: center; margin-bottom: .75rem; } .legal h1{ font-size: clamp(1.6rem, 2.2vw, 2rem); font-weight: 600; } .legal h2{ font-size: clamp(1.2rem, 1.6vw, 1.4rem); font-weight: 600; color: var(--text); } .legal p{ color:#374151; margin:.6rem 0; } .legal ul{ padding-left: 1.25rem; margin:.6rem 0; } .legal li{ margin:.35rem 0; } /* Si no usas clase .legal, al menos centra el primer heading dentro del .container de esas páginas */ .container.legal-center h1{ text-align:center; } /* -------- Footer -------- */ .footer{ background: var(--bg); border-top: 1px solid var(--border); text-align: center; padding: 1rem; color: #6b7280; font-size: .95rem; } .footer p.small { font-size: .9rem; color:#555; } .footer-links a{ color: #374151; margin: 0 .5rem; font-weight: 300; } .footer-links a:hover, .footer-links a:focus{ color: var(--link-hover); text-decoration: underline; } /* -------- Responsive -------- */ @media (max-width: 768px){ .header{ padding: 1.5rem 1rem; } .card{ padding: 1rem; } } @media (max-width: 480px){ body{ font-size: .96rem; } .header h1{ font-size: 1.35rem; } .header .logo{ max-width: 150px; padding: 12px; } .button{ font-size: .92rem; padding: .55rem 1rem; } .home .store-logo{ width: 120px; max-height: 72px; } } /* ========================= Breadcrumbs ========================= */ .breadcrumbs{max-width:1200px;margin:0 auto .25rem;padding:0 1rem;} .breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;color:#6b7280;font-size:.875rem;margin:0;padding:0;} .breadcrumbs li{display:flex;align-items:center;} .breadcrumbs li+li::before{content:"›";margin:0 .25rem;opacity:.6;} .breadcrumbs a{color:inherit;text-decoration:none;} .breadcrumbs a:hover{text-decoration:underline;} .breadcrumbs [aria-current="page"]{font-weight:600;opacity:.9;} /* si el header viene inmediatamente después del breadcrumb */ .breadcrumbs + .header{ margin-top:0; padding-top:.5rem; } /* si NO es inmediato (hay algo entre medio) */ .breadcrumbs ~ .header{ margin-top:0; padding-top:.5rem; } /* móvil */ @media (max-width: 768px){ .breadcrumbs + .header, .breadcrumbs ~ .header{ padding-top: .25rem; } } /* Force styling for nav[aria-label="Breadcrumb"] */ nav[aria-label="Breadcrumb"] ol{ list-style: none !important; padding-left: 0 !important; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; color: #6b7280; font-size: .875rem; } nav[aria-label="Breadcrumb"] li{ display:flex; align-items:center; } nav[aria-label="Breadcrumb"] li + li::before{ content: "›"; margin: 0 .25rem; opacity: .6; } nav[aria-label="Breadcrumb"] a{ color: inherit; text-decoration: none; } nav[aria-label="Breadcrumb"] a:hover{ text-decoration: underline; } nav[aria-label="Breadcrumb"] [aria-current="page"]{ font-weight: 600; opacity:.9; } /* ========================= Categories: hub list ========================= */ #category-list.stores { list-style: none; margin: 1rem 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; } #category-list.stores li a { display: block; padding: 0.75rem 0.9rem; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; text-decoration: none; color: #111827; line-height: 1.25; transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; } #category-list.stores li a:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,0.08); border-color: #d1d5db; } /* ========================= Categories: "More categories" ========================= */ .more-categories { margin-top: 2rem; } .more-categories h2 { font-size: 1.125rem; margin: 0 0 0.75rem; color: #111827; } .more-categories ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; } .more-categories li a { display: block; padding: 0.65rem 0.8rem; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #1f2937; text-decoration: none; transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; } .more-categories li a:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,0.08); border-color: #d1d5db; } /* ========================= Categories: footer link ========================= */ .category-footer { margin-top: 2rem; } .category-footer a { display: inline-block; padding: 0.6rem 0.9rem; border-radius: 999px; border: 1px solid #e5e7eb; background: #f9fafb; color: #111827; text-decoration: none; transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease; } .category-footer a:hover { background: #fff; border-color: #d1d5db; box-shadow: 0 8px 18px rgba(0,0,0,0.08); transform: translateY(-1px); } /* ========================= Accesibilidad y dark mode ========================= */ @media (prefers-reduced-motion: reduce) { .breadcrumbs a, #category-list.stores li a, .more-categories li a, .category-footer a { transition: none !important; transform: none !important; } } @media (prefers-color-scheme: dark) { .breadcrumbs { color: #9ca3af; } #category-list.stores li a, .more-categories li a, .category-footer a { background: #0b0f14; color: #e5e7eb; border-color: #26313c; } #category-list.stores li a:hover, .more-categories li a:hover, .category-footer a:hover { border-color: #334155; box-shadow: 0 8px 18px rgba(0,0,0,0.35); } } /* ===== Callout (Code not working / neutral) ===== */ :root{ --callout-bg: #f9fafb; --callout-border: #0ea5e9; --callout-text: #0f172a; --callout-muted: #475569; --radius-2xl: 1rem; --shadow-sm: 0 6px 18px rgba(2, 6, 23, 0.06); } .callout{ display: grid; grid-template-columns: 1fr; /* título + lista en una columna */ gap: 1rem; align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.25rem; margin: 1rem 0 2rem; } .callout--neutral .callout__icon { display: none; } .callout__title{ margin: 0 0 .5rem 0; font-size: clamp(1.15rem, 1.6vw, 1.35rem); color: var(--text); } .callout__body{ color: var(--callout-muted); } .checklist{ list-style: disc; padding-left: 1.25rem; margin: 0; } .checklist li{ margin: .45rem 0; } /* Modo oscuro opcional */ @media (prefers-color-scheme: dark){ :root{ --callout-bg: #0b1220; --callout-text: #e5e7eb; --callout-muted: #cbd5e1; --shadow-sm: 0 6px 18px rgba(0,0,0,.35); } } /* ========================= Guías (layout tipo artículo) ========================= */ .guide{ max-width: 820px !important; /* lectura cómoda */ margin-inline: auto; } .guide section{ margin-block: 1.25rem 1.75rem; } .guide h1{ margin: 0 0 .75rem; } .guide h2{ margin: 1.25rem 0 .5rem; } .guide h3{ margin: 1rem 0 .4rem; } .guide p{ margin: .6rem 0 .9rem; line-height: 1.75; color: #374151; } .guide ul, .guide ol{ margin: .4rem 0 1.1rem 1.25rem; } .guide li{ margin: .35rem 0; } .guide li > ul, .guide li > ol{ margin-top: .35rem; } .guide img{ display: block; margin: .75rem auto 1.25rem; border-radius: 10px; } .guide .button{ margin: .4rem 0 1.1rem; } .guide table{ width: 100%; border-collapse: collapse; margin: .5rem 0 1.25rem; font-size: .98rem; } .guide th, .guide td{ padding: .7rem .75rem; border: 1px solid #e5e7eb; vertical-align: top; } .guide thead th{ background: #f9fafb; font-weight: 600; } .guide hr{ border: 0; height: 1px; background: #e5e7eb; margin: 1.25rem 0; } /* ========================= Store pages — flat layout ========================= */ .store{ max-width: 820px; margin-inline: auto; padding: 1.25rem; } .store section{ margin-block: 1.5rem 2rem; } .store h2{ font-size: clamp(1.15rem, 1.6vw, 1.35rem); margin: 1.25rem 0 .6rem; font-weight: 600; color: var(--text); } .store p{ margin: .65rem 0 1rem; line-height: 1.75; color: #374151; } .store ul, .store ol{ margin: .5rem 0 1.25rem 1.25rem; } .store li{ margin: .4rem 0; } .store blockquote{ background: #f8fafc; border-left: 4px solid #e5e7eb; border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: .9rem 1rem; color: #374151; margin: 1rem 0 1.5rem; } .store blockquote cite{ display: block; margin-top: .35rem; color: #6b7280; font-style: normal; font-size: .95rem; } .store > a.button{ display: inline-block; margin: .75rem 0 1.5rem; } /* FAQ plano */ .store details{ border: 1px solid var(--border); border-radius: var(--radius-md); padding: .75rem .9rem; margin: .6rem 0; background: #fff; } .store summary{ cursor: pointer; font-weight: 600; color: var(--text); } .store details[open]{ box-shadow: 0 6px 18px rgba(0,0,0,.06); } .store .faq{ background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0; margin: 1.5rem 0 2rem; } .store .faq h2 { margin-bottom: .75rem; } .store .faq details { border: 1px solid var(--border); border-radius: var(--radius-md); padding: .75rem .9rem; margin: .6rem 0; background: #fff; } /* ========================================================= Freno de mano: asegurar centrado del hero ========================================================= */ .header { text-align: center !important; } .header .page-title, .header .subtitle { text-align: inherit !important; margin-left: auto; margin-right: auto; } footer { background-color: #111111; color: #ffffff; padding: 30px 20px; text-align: center; } .footer-container { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 15px; } .footer-socials { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; } .footer-socials a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 20px; background-color: #222222; color: #ffffff; text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: all 0.2s ease; } .footer-socials a:hover { background-color: #333333; transform: translateY(-2px); color: #0070f3; } .footer-socials { display: flex; justify-content: center; align-items: center; gap: 1.25rem; margin: 1.25rem 0; flex-wrap: wrap; } .footer-socials a { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: #334155; font-weight: 500; font-size: 0.9rem; padding: 0.4rem 0.8rem; border-radius: 6px; background-color: #f8fafc; border: 1px solid #e2e8f0; transition: all 0.2s ease; } .footer-socials a:hover { background-color: #f1f5f9; border-color: #cbd5e1; color: #0f172a; transform: translateY(-1px); } .footer-socials img { display: block; width: 18px; height: 18px; }