@import url("/css/components.css");

/* Compartido por Sobre la marca, Nutrición y Ciencia, y Contacto (Módulos 4 y 5) */
.content-page { max-width: 880px; margin: 0 auto; padding: 72px 40px 90px; }
.content-page--narrow { max-width: 720px; }
.content-page--center { text-align: center; }

.content-eyebrow { font: 700 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: oklch(60% 0.14 55); }
.content-title { font: 400 44px var(--font-display); margin: 12px 0 20px; color: oklch(14% 0 0); }
.content-title--lg { font-size: 46px; margin-bottom: 26px; }
.content-intro p { font: 17px/1.75 var(--font-body); color: oklch(32% 0.01 140); margin: 0 0 20px; }
.content-intro p:last-child { margin-bottom: 0; }

/* Cards de "Sobre la marca" */
.about-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 44px 0; }
.about-card { border-radius: var(--radius-card); padding: 26px; }
.about-card--green { background: oklch(96% 0.03 142); }
.about-card--orange { background: oklch(97% 0.02 55); }
.about-card--gray { background: oklch(94% 0 0); }
.about-card h2 { font: 700 15px var(--font-body); margin: 0 0 8px; }
.about-card--green h2 { color: oklch(30% 0.13 142); }
.about-card--orange h2 { color: oklch(45% 0.13 55); }
.about-card--gray h2 { color: oklch(20% 0 0); }
.about-card p { font: 14px/1.6 var(--font-body); color: oklch(35% 0.01 140); margin: 0; }

.content-closing-title { font: 400 24px var(--font-display); margin: 40px 0 14px; color: oklch(14% 0 0); }
.content-closing-text { font: 16px/1.7 var(--font-body); color: oklch(32% 0.01 140); margin: 0; }

/* Párrafo introductorio con más espaciado (Nutrición y Contacto) */
.content-lead { font: 17px/1.7 var(--font-body); color: oklch(32% 0.01 140); margin: 0 0 44px; }

/* Bloques informativos de "Nutrición y Ciencia" */
.nutrition-blocks { display: flex; flex-direction: column; gap: 36px; }
.nutrition-block h2 { font: 400 24px var(--font-display); margin: 0 0 10px; color: oklch(14% 0 0); }
.nutrition-block p { font: 15px/1.75 var(--font-body); color: oklch(35% 0.01 140); margin: 0; }

.nutrition-callout { margin-top: 56px; background: oklch(96% 0.03 142); border-radius: var(--radius-card-lg); padding: 30px 32px; }
.nutrition-callout h2 { font: 700 14px var(--font-body); margin: 0 0 8px; color: oklch(30% 0.13 142); }
.nutrition-callout p { font: 14px/1.6 var(--font-body); color: oklch(35% 0.01 140); margin: 0; }

/* Cards de "Contacto" */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; text-align: left; }
.contact-card { background: #fff; border: 1px solid var(--color-card-border); border-radius: var(--radius-card); padding: 24px; }
.contact-card h2 { font: 700 13px var(--font-body); text-transform: uppercase; letter-spacing: .05em; color: oklch(50% 0.01 140); margin: 0 0 8px; }
.contact-card a, .contact-card p { font: 16px var(--font-body); font-weight: 600; margin: 0; }