/* Las fuentes se cargan con un unico en el de cada pagina. Antes habia aqui un @import de Cormorant, que encadenaba una segunda peticion a Google Fonts despues de descargar este archivo. */ /* ============================================================= Inma Navarro Nutrición — Shared stylesheet Editorial wellness UI · modern Iberian palette ============================================================= */ /* ── Tokens ─────────────────────────────────────────────────── */ :root{ /* Colors — "Fresco y vibrante": papel cálido + verde hoja + tomate */ --bone: #FAF5EA; --bone-2: #F2EAD8; --cream: #ECE1C9; --cream-deep: #E2D2B0; --forest: #1E4D35; --moss: #2E5A38; /* #527A5C se quedaba en 4.49/4.08/3.77 sobre bone/bone-2/cream: justo por debajo de AA en el texto de cuerpo. #476B50 da 5.54/5.03/4.64. */ --moss-soft: #476B50; --sage: #3F9E5B; --sage-soft: #BFE0C2; --clay: #E8552B; --clay-soft: #F6C7AE; --leaf: #3F9E5B; --leaf-soft: #CDE9D0; --gold: #E0A92E; --rust: #C2401C; /* Version legible del clay para texto pequeno (WCAG AA sobre bone y bone-2) */ --clay-ink: #B03A16; --ink: #14191A; /* #8A8268 daba 3.53/3.20/2.96 sobre bone/bone-2/cream: fallaba WCAG AA en todo el texto pequeno que lo usa. #6B6450 da 5.42/4.92/4.54. */ --muted: #6B6450; --rule: rgba(22, 39, 27, .14); --rule-soft: rgba(22, 39, 27, .07); --shadow-1: 0 1px 2px rgba(22,39,27,.04), 0 8px 24px rgba(22,39,27,.07); --shadow-2: 0 2px 6px rgba(22,39,27,.06), 0 24px 60px rgba(22,39,27,.12); /* Type */ --serif: "Bricolage Grotesque", "Manrope", system-ui, sans-serif; /* display */ --sans: "Manrope", ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif; --serif-italic: "Cormorant Garamond", Georgia, "Times New Roman", serif; /* italic accents */ /* Layout */ --pad: clamp(20px, 4.5vw, 56px); --max: 1280px; --max-wide: 1440px; /* Motion */ --ease: cubic-bezier(.2,.7,.2,1); --ease-spring: cubic-bezier(.16,1,.3,1); /* spring out — for reveals */ } /* ── Foco de teclado ──────────────────────────────────────────── El stack no definia ninguno: quien navega con tabulador no veia donde estaba. :focus-visible solo se muestra con teclado, no al hacer clic con raton. */ :where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{ outline:2px solid var(--clay-ink); outline-offset:3px; border-radius:2px} /* Sobre fondos oscuros (hero, footer, cabecera de articulo) el clay no destaca lo suficiente: se usa el crema de marca. */ .hero :focus-visible,footer :focus-visible,.post-head :focus-visible, .tst :focus-visible,.mobile-menu :focus-visible,.ig-band :focus-visible{ outline-color:var(--bone)} /* Visible solo para lectores de pantalla: da titulo a secciones que visualmente no lo necesitan, para no romper el orden de encabezados. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Salto al contenido para lectores de pantalla y teclado */ .skip-link{position:absolute;left:-9999px;top:0;z-index:100; background:var(--forest);color:var(--bone);padding:12px 20px; font-size:14px;font-weight:600;border-radius:0 0 4px 0} .skip-link:focus{left:0} /* ── Reset ──────────────────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} html,body{background:var(--bone);color:var(--forest);font-family:var(--sans);font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body{overflow-x:hidden;min-height:100vh} a{color:inherit;text-decoration:none} img,svg,video{display:block;max-width:100%} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ul,ol{list-style:none} ::selection{background:var(--forest);color:var(--bone)} /* ── Typography ─────────────────────────────────────────────── */ .serif{font-family:var(--serif)} .h-display{font-family:var(--serif);font-weight:600;font-size:clamp(54px, 9vw, 128px);line-height:1.0;letter-spacing:-0.028em;color:var(--forest);padding-bottom:4px} .h-1{font-family:var(--serif);font-weight:600;font-size:clamp(38px,5.2vw,72px);line-height:1.02;letter-spacing:-0.025em;color:var(--forest)} .h-2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.4vw,48px);line-height:1.06;letter-spacing:-0.02em;color:var(--forest)} .h-3{font-family:var(--serif);font-weight:600;font-size:clamp(21px,1.9vw,27px);line-height:1.18;letter-spacing:-0.012em;color:var(--forest)} /* accent word — Cormorant italic for contrast against the sans display */ .h-display .em,.h-1 .em,.h-2 .em{ font-family:var(--serif-italic); font-style:italic !important; font-weight:400; color:inherit !important; font-size:1.07em; letter-spacing:-0.015em} .h-3 .em{font-style:italic !important;color:inherit !important} .lede{font-family:var(--sans);font-weight:400;font-size:clamp(17px,1.4vw,21px);line-height:1.55;color:var(--moss);max-width:46ch} .body{font-family:var(--sans);font-weight:400;font-size:clamp(15px,1.04vw,17px);line-height:1.7;color:var(--moss-soft);max-width:60ch} .body p+p{margin-top:1em} .eyebrow{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--clay-ink);display:inline-flex;align-items:center;gap:10px} .eyebrow::before{content:"";width:24px;height:1px;background:currentColor;display:inline-block} .eyebrow.no-bar::before{display:none} .num{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.18em;color:var(--muted);font-variant-numeric:tabular-nums} /* ── Container / section ────────────────────────────────────── */ .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)} .wrap-wide{max-width:var(--max-wide);margin:0 auto;padding-inline:var(--pad)} section{padding-block:clamp(72px, 10vh, 132px)} .section-head{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:clamp(48px,7vh,80px);align-items:end} @media(min-width:820px){.section-head{grid-template-columns:1fr 1fr;gap:64px}} .section-head .title{margin-top:18px} /* ── Buttons ────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px; padding:14px 26px;border-radius:999px;font-size:14px;letter-spacing:.01em;font-weight:500; border:1px solid var(--forest);color:var(--forest);background:transparent;cursor:pointer; transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .25s var(--ease)} .btn .arr{transition:transform .35s var(--ease)} .btn:hover{background:var(--forest);color:var(--bone)} .btn:hover .arr{transform:translateX(4px)} .btn--solid{background:var(--forest);color:var(--bone);border-color:var(--forest)} .btn--solid:hover{background:var(--moss);border-color:var(--moss);color:var(--bone)} .btn--ghost{border-color:var(--rule);color:var(--forest)} .btn--ghost:hover{border-color:var(--forest);background:transparent;color:var(--forest)} .btn--wa{background:#0F7A6C;color:#fff;border-color:#0F7A6C} .btn--wa:hover{background:#0B655A;border-color:#0B655A;color:#fff} .btn--lg{padding:16px 32px;font-size:15px} .btn svg{flex-shrink:0} .text-link{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.04em; text-transform:uppercase;color:var(--forest);padding-bottom:4px;border-bottom:1px solid var(--forest); transition:gap .3s var(--ease), opacity .25s} .text-link:hover{gap:14px;opacity:.7} /* ── Nav ────────────────────────────────────────────────────── */ .nav{position:fixed;top:0;left:0;right:0;z-index:50; padding:18px var(--pad); display:flex;align-items:center;justify-content:space-between;gap:24px; transition:background .35s var(--ease), backdrop-filter .35s var(--ease), padding .35s var(--ease), border-color .35s var(--ease); border-bottom:1px solid transparent} .nav.scrolled{ background:rgba(245,240,230,.86); backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom-color:var(--rule-soft); padding-top:12px;padding-bottom:12px} .brand{display:flex;align-items:center;gap:12px} .brand-logo{height:44px;width:44px;display:block} .brand .mark{ width:38px;height:38px;border-radius:50%;background:var(--forest);color:var(--bone); font-family:var(--serif);font-size:20px;font-style:italic;font-weight:400; display:flex;align-items:center;justify-content:center;line-height:1;padding-bottom:2px} .brand .word{display:flex;flex-direction:column;line-height:1.05} .brand .word strong{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:.005em;color:var(--forest)} .brand .word small{font-family:var(--sans);font-weight:500;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:3px} .nav-links{display:flex;gap:32px;align-items:center} .nav-links a{position:relative;font-size:14px;font-weight:500;color:var(--forest);padding:6px 0; transition:color .25s var(--ease)} .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--forest);transition:right .35s var(--ease)} .nav-links a:hover::after,.nav-links a.active::after{right:0} .nav-links a.active{color:var(--forest)} .nav-cta{font-family:var(--sans);font-size:13px;font-weight:500;padding:10px 20px;border:1px solid var(--forest);border-radius:999px; transition:background .3s, color .3s; letter-spacing:.01em;background:var(--forest);color:var(--bone)} .nav-cta:hover{background:var(--moss);border-color:var(--moss)} .nav-burger{display:none;width:36px;height:36px;align-items:center;justify-content:center;position:relative} .nav-burger span,.nav-burger span::before,.nav-burger span::after{display:block;width:20px;height:1.5px;background:var(--forest);position:relative;transition:transform .3s var(--ease)} .nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0} .nav-burger span::before{top:-7px}.nav-burger span::after{top:7px} .mobile-menu{position:fixed;inset:0;background:var(--bone);z-index:60;display:none;flex-direction:column; padding:88px var(--pad) 40px;opacity:0;transition:opacity .35s var(--ease)} .mobile-menu.open{display:flex;opacity:1} .mobile-menu a{font-family:var(--serif);font-size:36px;font-weight:400;padding:14px 0;border-bottom:1px solid var(--rule-soft);color:var(--forest)} .mobile-menu .close{position:absolute;top:22px;right:var(--pad);font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--forest);font-weight:500} .mobile-menu .cta-row{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:12px} /* ── Photo helpers ─────────────────────────────────────────── */ .photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center} .photo-wrap{position:relative;overflow:hidden;background:var(--cream)} .photo-wrap.tall{aspect-ratio:3/4} .photo-wrap.portrait{aspect-ratio:4/5} .photo-wrap.landscape{aspect-ratio:5/3} .photo-wrap.wide{aspect-ratio:16/7} .photo-wrap.square{aspect-ratio:1} .photo-wrap img{transition:transform 1.2s var(--ease-spring)} .photo-wrap:hover img{transform:scale(1.04)} /* El hero de la home vive en el