/* GuiaViveros — botanical editorial */ /* Fonts are loaded via non-blocking in (see build.py head()). */ :root { --paper: #F5F1E8; --paper-2: #EDE7D8; --ink: #1A1410; --ink-2: #3C342B; --ink-3: #6B5F4F; --leaf: #2D4A2C; --leaf-2: #3F6438; --rust: #8B4513; --gold: #B8860B; --line: #C8BFA8; --line-soft: #DDD4BE; --shadow: rgba(45, 74, 44, 0.08); --font-display: 'Fraunces', Georgia, serif; --font-body: 'Newsreader', Georgia, serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; } * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 18px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; font-feature-settings: "kern", "liga", "onum"; background-image: radial-gradient(at 15% 8%, rgba(184, 134, 11, 0.04) 0px, transparent 50%), radial-gradient(at 85% 92%, rgba(45, 74, 44, 0.04) 0px, transparent 50%); min-height: 100vh; } /* ----- LAYOUT ----- */ .container { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; } .narrow { max-width: 760px; } .wide { max-width: 1320px; } /* ----- HEADER ----- */ .site-header { border-bottom: 1px solid var(--line); padding: 1.25rem 0; background: var(--paper); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); background-color: rgba(245, 241, 232, 0.92); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .brand { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.015em; color: var(--ink); text-decoration: none; font-variation-settings: "SOFT" 50, "WONK" 0; display: inline-flex; align-items: baseline; gap: 0.5rem; } .brand__mark { color: var(--leaf); font-style: italic; font-weight: 400; } .brand__tag { font-family: var(--font-body); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-3); font-weight: 500; } .nav { display: flex; gap: 2rem; align-items: center; } .nav a { font-family: var(--font-body); font-size: 0.875rem; color: var(--ink-2); text-decoration: none; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: all 0.2s; } .nav a:hover { color: var(--leaf); border-bottom-color: var(--leaf); } /* ----- HERO ----- */ .hero { padding: 5rem 0 4rem; border-bottom: 1px solid var(--line); position: relative; } .hero__eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.75rem; color: var(--leaf); font-weight: 600; margin-bottom: 1.5rem; } .hero__title { font-family: var(--font-display); font-size: clamp(2.8rem, 7vw, 5.5rem); line-height: 0.95; letter-spacing: -0.025em; color: var(--ink); font-weight: 350; font-variation-settings: "SOFT" 80, "WONK" 1; margin-bottom: 1.5rem; max-width: 14ch; } .hero__title em { font-style: italic; color: var(--leaf); font-weight: 400; } .hero__sub { font-size: 1.2rem; color: var(--ink-2); max-width: 56ch; line-height: 1.55; } .hero__stats { margin-top: 3rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 2rem; padding-top: 2rem; border-top: 1px dashed var(--line); } .stat__num { font-family: var(--font-display); font-size: 2.5rem; font-weight: 350; font-variation-settings: "WONK" 1; color: var(--leaf); line-height: 1; font-feature-settings: "tnum"; } .stat__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); margin-top: 0.4rem; } /* ----- SECTION ----- */ .section { padding: 4rem 0; } .section__eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; color: var(--rust); font-weight: 600; margin-bottom: 0.75rem; } .section__title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 400; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 1.5rem; line-height: 1.05; } /* ----- PROVINCE GRID ----- */ .prov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .prov-card { display: block; padding: 1.5rem 1.25rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); background: var(--paper); transition: background 0.2s; position: relative; } .prov-card:hover { background: var(--paper-2); } .prov-card:hover .prov-card__name { color: var(--leaf); } .prov-card__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 450; letter-spacing: -0.01em; transition: color 0.2s; } .prov-card__count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-3); margin-top: 0.4rem; font-feature-settings: "tnum"; } .prov-card__arrow { position: absolute; bottom: 1.25rem; right: 1.25rem; color: var(--ink-3); font-size: 1rem; transition: transform 0.2s, color 0.2s; } .prov-card:hover .prov-card__arrow { color: var(--leaf); transform: translateX(4px); } /* Featured province cards on the homepage — wider tiles with a thumbnail. */ .prov-grid--featured { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .prov-card--featured { padding: 0; display: flex; flex-direction: column; } .prov-card__thumb { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); } .prov-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .prov-card--featured:hover .prov-card__thumb img { transform: scale(1.04); } .prov-card--featured .prov-card__body { padding: 1.25rem 1.25rem 2.5rem; } .prov-card--featured .prov-card__arrow { bottom: 1rem; right: 1.25rem; } /* ----- HERO IMAGE (homepage) ----- */ .hero-image { margin: 3rem 0 0; border-radius: 14px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line-soft); } .hero-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .hero-image figcaption { font-family: var(--font-body); font-size: 0.78rem; color: var(--ink-3); padding: 0.5rem 1rem; text-align: right; border-top: 1px solid var(--line-soft); } .hero-image .img-credit a { color: var(--rust); text-decoration: none; border-bottom: 1px dotted var(--rust); } /* ----- SPECIES STRIP (homepage) ----- */ .species-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.9rem; margin: 0 0 2rem; } .species-strip__item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--ink); gap: 0.5rem; } .species-strip__item img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; border: 1px solid var(--line-soft); transition: transform 0.25s ease, border-color 0.25s ease; } .species-strip__item:hover img { transform: scale(1.04); border-color: var(--leaf); } .species-strip__label { font-family: var(--font-display); font-size: 0.95rem; font-weight: 400; letter-spacing: -0.01em; text-align: center; } .species-strip__item:hover .species-strip__label { color: var(--leaf); } /* ----- VIVERO CARD (province page) ----- */ .vivero-list { display: flex; flex-direction: column; } .vivero-card { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; padding: 1.75rem 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--ink); align-items: start; transition: padding-left 0.2s; } .vivero-card:hover { padding-left: 0.5rem; } .vivero-card:hover .vivero-card__name { color: var(--leaf); } .vivero-card__name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 450; letter-spacing: -0.01em; margin-bottom: 0.5rem; transition: color 0.2s; line-height: 1.2; } .vivero-card__meta { color: var(--ink-3); font-size: 0.92rem; display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; } .vivero-card__meta span:not(:first-child)::before { content: '·'; margin-right: 0.75rem; color: var(--line); } .vivero-card__code { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-3); white-space: nowrap; padding-top: 0.3rem; } /* ----- VIVERO DETAIL ----- */ .crumbs { font-family: var(--font-body); font-size: 0.82rem; color: var(--ink-3); letter-spacing: 0.02em; padding: 1.5rem 0 0; margin-bottom: -1rem; } .crumbs a { color: var(--ink-2); text-decoration: none; border-bottom: 1px dotted var(--line); } .crumbs a:hover { color: var(--leaf); border-bottom-color: var(--leaf); } .crumbs span { margin: 0 0.5rem; color: var(--line); } .vivero-hero { padding: 3rem 0 2.5rem; border-bottom: 1px solid var(--line); } .vivero-hero__eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.72rem; color: var(--rust); font-weight: 600; margin-bottom: 1rem; } .vivero-hero__title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 350; letter-spacing: -0.02em; font-variation-settings: "SOFT" 60; line-height: 1.05; margin-bottom: 1.25rem; max-width: 22ch; } .vivero-hero__location { font-size: 1.15rem; color: var(--ink-2); font-style: italic; } .data-sheet { margin: 3rem 0; background: var(--paper-2); border: 1px solid var(--line); padding: 2.25rem 2.5rem; border-radius: 2px; position: relative; } .data-sheet::before { content: 'Ficha oficial'; position: absolute; top: -0.6rem; left: 2rem; background: var(--paper); padding: 0 0.6rem; font-family: var(--font-body); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--leaf); font-weight: 600; } .data-sheet dl { display: grid; grid-template-columns: 12rem 1fr; row-gap: 1rem; column-gap: 1.5rem; } .data-sheet dt { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--ink-3); font-weight: 600; padding-top: 0.3rem; } .data-sheet dd { font-size: 1rem; color: var(--ink); line-height: 1.5; } .data-sheet dd code { font-family: var(--font-mono); font-size: 0.85rem; color: var(--leaf); } .grupo-tag { display: inline-block; margin: 0.15rem 0.35rem 0.15rem 0; padding: 0.15rem 0.55rem; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; font-size: 0.9rem; line-height: 1.5; } .grupo-tag code { font-family: var(--font-mono); font-size: 0.78rem; color: var(--leaf); margin-right: 0.35rem; } .source-note { font-size: 0.82rem; color: var(--ink-3); font-style: italic; padding: 1.25rem 0; border-top: 1px dashed var(--line); margin-top: 2rem; } .source-note a { color: var(--leaf); } /* ----- VARIETY ----- */ .variety-header { padding: 3.5rem 0 2.5rem; } .variety-header__species { display: inline-block; font-family: var(--font-mono); font-size: 0.85rem; color: var(--rust); text-transform: uppercase; letter-spacing: 0.15em; padding: 0.25rem 0.6rem; border: 1px solid var(--rust); border-radius: 3px; margin-bottom: 1.5rem; } .variety-header__name { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 350; letter-spacing: -0.03em; font-variation-settings: "WONK" 1, "SOFT" 30; line-height: 0.95; margin-bottom: 1.25rem; color: var(--ink); } .variety-header__name em { font-style: italic; color: var(--leaf); } .variety-header__lead { font-size: 1.18rem; color: var(--ink-2); max-width: 56ch; line-height: 1.55; } /* ----- PROSE ----- */ .prose { max-width: 64ch; } .prose h2 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 450; letter-spacing: -0.01em; margin: 2.5rem 0 1rem; color: var(--ink); } .prose h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 450; margin: 1.5rem 0 0.6rem; color: var(--ink); } .prose p { margin-bottom: 1rem; } .prose ul { margin: 0 0 1rem 1.25rem; } .prose li { margin-bottom: 0.4rem; } .prose strong { font-weight: 600; color: var(--ink); } .prose a { color: var(--leaf); border-bottom: 1px dotted var(--leaf-2); text-decoration: none; } .prose a:hover { border-bottom-style: solid; } .prose blockquote { border-left: 3px solid var(--leaf); padding: 0.5rem 0 0.5rem 1.5rem; font-style: italic; color: var(--ink-2); margin: 1.5rem 0; } /* ----- AD SLOTS ----- */ /* Use the .ad-slot class for AdSense container placements. Inside, paste the AdSense snippet later. */ .ad-slot { margin: 3rem 0; padding: 1.25rem; border: 1px dashed var(--line); background: var(--paper-2); display: flex; align-items: center; justify-content: center; min-height: 110px; position: relative; } .ad-slot::before { content: 'PUBLICIDAD'; position: absolute; top: -0.55rem; left: 1rem; background: var(--paper); padding: 0 0.5rem; font-family: var(--font-body); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-3); } .ad-slot__placeholder { font-family: var(--font-mono); color: var(--ink-3); font-size: 0.82rem; } .ad-slot--banner { min-height: 100px; } .ad-slot--inline { min-height: 280px; } .ad-slot--sidebar { min-height: 250px; } /* ----- AMAZON AFFILIATE MODULE ----- */ .affiliate { margin: 3rem 0; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: var(--paper); } .affiliate__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 450; font-style: italic; color: var(--ink); padding: 0.85rem 1.5rem; border-bottom: 1px solid var(--line); } .affiliate__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .aff-disclosure { display: block; padding: 0.55rem 1.5rem; border-top: 1px solid var(--line); background: var(--paper-2); font-family: var(--font-body); font-size: 0.75rem; font-style: italic; color: var(--ink-3); line-height: 1.4; } .aff-product { padding: 1.25rem; border-right: 1px solid var(--line); text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 0.6rem; transition: background 0.2s; } .aff-product:last-child { border-right: none; } .aff-product:hover { background: var(--paper-2); } .aff-product__img { background: var(--paper-2); height: 110px; border-radius: 2px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3); } .aff-product__name { font-family: var(--font-body); font-size: 0.92rem; font-weight: 500; line-height: 1.3; } .aff-product__price { font-family: var(--font-mono); font-size: 0.85rem; color: var(--leaf); font-feature-settings: "tnum"; } /* ----- FOOTER ----- */ .site-footer { background: var(--ink); color: var(--paper); padding: 4rem 0 2rem; margin-top: 6rem; } .site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(245, 241, 232, 0.15); } .site-footer h3 { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.72rem; color: rgba(245, 241, 232, 0.85); margin-bottom: 1rem; font-weight: 600; } .site-footer__brand { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; font-style: italic; margin-bottom: 0.75rem; } .site-footer__about { font-size: 0.92rem; color: rgba(245, 241, 232, 0.9); max-width: 32ch; line-height: 1.55; } .site-footer ul { list-style: none; } .site-footer li { margin-bottom: 0.5rem; } .site-footer a { color: rgba(245, 241, 232, 0.95); text-decoration: none; font-size: 0.92rem; transition: color 0.2s; } .site-footer a:hover { color: var(--paper); } .site-footer__bottom { padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: 0.78rem; color: rgba(245, 241, 232, 0.85); } /* ----- RESPONSIVE ----- */ @media (max-width: 800px) { .site-header__inner { flex-wrap: wrap; gap: 1rem; } .nav { gap: 1.25rem; } .data-sheet { padding: 1.5rem; } .data-sheet dl { grid-template-columns: 1fr; row-gap: 0.5rem; } .data-sheet dt { padding-top: 0.5rem; } .vivero-card { grid-template-columns: 1fr; } .vivero-card__code { padding-top: 0; } .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; } } @media (max-width: 480px) { html { font-size: 17px; } .hero { padding: 3rem 0; } .container { padding: 0 1rem; } } /* ----- Accessibility ----- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } :focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; } /* ----- COOKIE BANNER ----- Conforme a la Guía AEPD sobre el uso de cookies (julio 2023) y a las Directrices CEPD 03/2022 sobre dark patterns: Aceptar y Rechazar son visualmente idénticos (mismo color, tamaño, tipografía, padding y borde) y están al mismo nivel; rechazar requiere un solo clic. */ .cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 9999; background: var(--paper); color: var(--ink); border: 1px solid var(--leaf); border-radius: 14px; box-shadow: 0 12px 36px rgba(26, 20, 16, 0.18); font-family: var(--font-body); } .cookie-banner[hidden] { display: none !important; } .cookie-banner__inner { display: flex; flex-direction: column; align-items: stretch; gap: 0.85rem; padding: 1.1rem 1.25rem; max-width: 760px; margin: 0 auto; } .cookie-banner__text strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--leaf); margin-bottom: 0.25rem; } .cookie-banner__text p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); } .cookie-banner__text a { color: var(--leaf); border-bottom: 1px dotted var(--leaf); text-decoration: none; } .cookie-banner__actions { display: flex; gap: 0.6rem; } .cookie-banner__btn { flex: 1 1 0; min-width: 6.5rem; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; padding: 0.7rem 1.2rem; border-radius: 8px; border: 1px solid var(--leaf); background: var(--leaf); color: #fff; cursor: pointer; text-align: center; transition: background 0.15s ease, border-color 0.15s ease; } .cookie-banner__btn:hover { background: var(--leaf-2); border-color: var(--leaf-2); } .cookie-banner__btn:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; } .cookie-banner__config { background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.55rem; } .cookie-banner__config[hidden] { display: none !important; } .cookie-banner__config-title { margin: 0 0 0.35rem; font-size: 0.82rem; line-height: 1.5; color: var(--ink-2); } .cookie-banner__config-title code { font-family: var(--font-mono); font-size: 0.78rem; background: var(--paper); padding: 0 0.25rem; border-radius: 3px; } .cookie-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; padding: 0.6rem 0.75rem; border-radius: 8px; background: var(--paper); border: 1px solid var(--line-soft); cursor: pointer; } .cookie-toggle__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .cookie-toggle__name { font-size: 0.9rem; font-weight: 600; color: var(--ink); line-height: 1.3; } .cookie-toggle__desc { font-size: 0.78rem; color: var(--ink-3); line-height: 1.4; } .cookie-toggle__input { flex-shrink: 0; width: 1.15rem; height: 1.15rem; accent-color: var(--leaf); cursor: pointer; } .cookie-banner__btn--save { align-self: flex-start; flex: 0 0 auto; margin-top: 0.3rem; } @media (max-width: 560px) { .cookie-banner { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; } .cookie-banner__inner { padding: 0.85rem 1rem; } .cookie-banner__actions { flex-wrap: wrap; } .cookie-banner__btn { flex: 1 1 auto; } } /* ----- SPECIES IMAGE ----- */ .species-img { margin: 1.5rem 0; border-radius: 14px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line-soft); } .species-img--hero { margin: 2rem 0 0; } .species-img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .species-img figcaption { font-family: var(--font-body); font-style: italic; font-size: 0.85rem; color: var(--ink-3); padding: 0.55rem 1rem; text-align: right; border-top: 1px solid var(--line-soft); } /* ----- LEGAL DOC ----- */ .legal-meta { font-style: italic; color: var(--ink-3); font-size: 0.92rem; margin-bottom: 2rem; } .legal-doc h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--leaf); margin-top: 2.25rem; margin-bottom: 0.85rem; } .legal-doc h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); margin-top: 1.5rem; margin-bottom: 0.55rem; } .legal-doc p { margin-bottom: 0.85rem; line-height: 1.65; } .legal-doc ul { margin: 0.5rem 0 1rem 1.4rem; } .legal-doc li { margin-bottom: 0.35rem; } .legal-doc code { font-family: var(--font-mono); font-size: 0.85em; background: var(--paper-2); padding: 0.05em 0.35em; border-radius: 3px; } .legal-doc .table-wrap { overflow-x: auto; margin: 1rem 0 1.25rem; border: 1px solid var(--line-soft); border-radius: 8px; } .legal-doc table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .legal-doc th, .legal-doc td { text-align: left; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .legal-doc th { background: var(--paper-2); font-family: var(--font-body); font-weight: 600; color: var(--leaf); } .legal-doc tr:last-child td { border-bottom: 0; } /* ----- IMAGE CAPTION (disclaimer + Pexels credit) ----- */ .species-img figcaption { display: flex; flex-direction: column; gap: 0.2rem; text-align: left; } .species-img .img-disclaimer { font-style: italic; color: var(--ink-3); font-size: 0.82rem; } .species-img .img-credit { font-style: normal; color: var(--ink-3); font-size: 0.78rem; } .species-img .img-credit a { color: var(--rust); text-decoration: none; border-bottom: 1px dotted var(--rust); } /* ----- FOOTER AMAZON DISCLOSURE ----- */ .site-footer__disclosure { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed rgba(245, 241, 232, 0.2); font-size: 0.82rem; font-style: italic; color: rgba(245, 241, 232, 0.85); text-align: center; } /* ----- SPECIES EDITORIAL + NUTRITION ----- */ .species-editorial { margin: 2rem 0 1.5rem; } .species-editorial h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--leaf); margin-bottom: 0.4rem; letter-spacing: -0.01em; } .species-editorial__meta { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-3); margin-bottom: 1.1rem; letter-spacing: 0.02em; } .species-editorial .prose p { margin-bottom: 0.9rem; line-height: 1.65; } .nutrition { margin: 2rem 0; padding: 1.25rem 1.4rem 1rem; background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 12px; } .nutrition h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--leaf); margin-bottom: 0.75rem; } .nutrition__table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .nutrition__table th, .nutrition__table td { padding: 0.42rem 0.6rem; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: baseline; } .nutrition__table th { font-weight: 500; color: var(--ink-2); width: 55%; } .nutrition__table td { font-family: var(--font-mono); color: var(--ink); } .nutrition__table td:last-child { color: var(--ink-3); width: 18%; } .nutrition__table tr:last-child th, .nutrition__table tr:last-child td { border-bottom: 0; } .nutrition__source { font-size: 0.78rem; color: var(--ink-3); font-style: italic; margin-top: 0.7rem; } /* ----- VARIETY H1 WITH SPECIES PREFIX ----- */ .variety-header__species-prefix { display: inline; color: var(--ink-3); font-family: var(--font-body); font-style: italic; font-weight: 400; font-size: 0.55em; text-transform: uppercase; letter-spacing: 0.18em; vertical-align: middle; margin-right: 0.55rem; } /* ----- SPECIES STUB (variety not in EU Portal export) ----- */ .species-stub { margin: 2rem 0; padding: 1.5rem 1.75rem; background: var(--paper-2); border-left: 4px solid var(--rust); border-radius: 8px; } .species-stub h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--leaf); margin-bottom: 0.6rem; } .species-stub p { margin-bottom: 0.7rem; line-height: 1.6; } .species-stub a.cta { display: inline-block; margin-top: 0.6rem; padding: 0.55rem 1.1rem; background: var(--leaf); color: var(--paper); border-radius: 6px; text-decoration: none; font-weight: 500; } /* ----- DATA SHEET TERM LINKS (to glossary anchors) ----- */ .data-sheet dt a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line); cursor: help; } .data-sheet dt a:hover { border-bottom-color: var(--rust); color: var(--rust); } /* ----- NOTICIAS ----- */ .noticias-list { display: grid; gap: 2rem; margin-top: 2rem; } .noticia-card { border-top: 1px solid var(--line-soft); padding-top: 1.5rem; } .noticia-card__meta { display: flex; gap: 0.75rem; align-items: baseline; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; } .noticia-card__categoria { color: var(--leaf); font-weight: 600; } .noticia-card__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 450; letter-spacing: -0.01em; margin: 0 0 0.6rem; line-height: 1.25; } .noticia-card__title a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; } .noticia-card__title a:hover { border-bottom-color: var(--leaf); } .noticia-card__excerpt { color: var(--ink-2); margin-bottom: 0.6rem; max-width: 64ch; } .noticia-card__source { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-3); } .noticia-source { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); font-size: 0.95rem; color: var(--ink-2); } .noticia-source a { color: var(--leaf); border-bottom: 1px dotted var(--leaf-2); text-decoration: none; } .noticia-source a:hover { border-bottom-style: solid; } .noticia-disclaimer { margin-top: 0.75rem; font-size: 0.82rem; color: var(--ink-3); font-style: italic; }