.page { --paper: #f8f2e8; --cream: #f2eadb; --ink: #1f251d; --red: #9f2f21; --olive: #46543a; --line: rgba(31,37,29,.22); min-height: 100vh; overflow: hidden; background: var(--paper); color: var(--ink); }
.page * { box-sizing: border-box; }
.page a { color: inherit; text-decoration: none; }
.page img { display: block; max-width: 100%; }
.page a:focus-visible { outline: 3px solid #d9a46d; outline-offset: 4px; }
.header { min-height: 104px; padding: 10px 5vw; display: flex; align-items: center; justify-content: space-between; gap: 32px; border-bottom: 1px solid var(--line); background: var(--paper); }
.brand img { width: auto; height: 72px; max-width: 190px; object-fit: contain; }
.header nav { display: flex; align-items: center; gap: clamp(22px,3vw,46px); }
.header nav a { padding: 7px 0; border-bottom: 1px solid transparent; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.header nav a:hover { color: var(--red); border-color: var(--red); }
.header nav .back { border-color: var(--line); }
.hero { min-height: calc(100vh - 104px); display: grid; grid-template-columns: 1.08fr .92fr; background: var(--ink); color: white; }
.heroImage { min-height: 720px; background: url("../assets/images/pane.jpg") center/cover no-repeat; }
.heroCopy { padding: clamp(80px,9vw,145px) 7vw; display: flex; flex-direction: column; justify-content: center; }
.eyebrow,.eyebrowDark { margin: 0 0 26px; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow { color: #f4d7b6; }
.eyebrowDark { color: var(--red); }
.hero h1,.page h2 { margin: 0; font: 500 clamp(66px,7.1vw,112px)/.84 Georgia,"Times New Roman",serif; letter-spacing: -.055em; }
.hero h1 em,.page h2 em { font-weight: 400; }
.heroCopy > p:not(.eyebrow) { max-width: 540px; margin: 34px 0 0; color: rgba(255,255,255,.78); font: 17px/1.72 Georgia,serif; }
.heroActions { margin-top: 36px; display: flex; align-items: center; gap: 30px; }
.page .buttonLight { min-height: 50px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: space-between; gap: 34px; border: 1px solid white; background: white; color: var(--ink); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; transition: .2s ease; }
.page .buttonLight:hover { background: var(--red); border-color: var(--red); color: white; }
.textLink { padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.55); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.intro { padding: 130px 7vw 105px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 10vw; align-items: end; }
.intro h2,.daily h2 { font-size: clamp(58px,6.5vw,100px); }
.introText { padding-bottom: 8px; }
.introText p { max-width: 570px; margin: 0; color: #53584e; font: 18px/1.72 Georgia,serif; }
.introText p + p { margin-top: 22px; }
.families { padding: 0 4vw 125px; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.families article { min-height: 330px; padding: 34px 32px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--paper); }
.families h3 { margin: 0 0 18px; font: 500 36px/1.08 Georgia,serif; letter-spacing: -.025em; }
.families p { min-height: 70px; margin: 0; padding-top: 17px; border-top: 1px solid var(--line); color: #5b6056; font-size: 13px; line-height: 1.65; }
.process { min-height: 780px; display: grid; grid-template-columns: 1.05fr .95fr; background: var(--olive); color: white; }
.processImage { min-height: 780px; background: url("../assets/images/laboratorio.jpg") center 35%/cover no-repeat; filter: saturate(.8); }
.processCopy { padding: 100px 7vw; align-self: center; }
.processCopy h2 { font-size: clamp(55px,5.8vw,88px); }
.processLead { max-width: 570px; margin: 32px 0; color: rgba(255,255,255,.76); font: 16px/1.7 Georgia,serif; }
.process ol { margin: 34px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.25); }
.process li { padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.25); }
.process li strong { display: block; margin-bottom: 5px; font: 500 21px Georgia,serif; }
.process li p { margin: 0; color: rgba(255,255,255,.68); font-size: 12px; line-height: 1.55; }
.daily { padding: 130px 7vw; background: var(--cream); }
.daily > div { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10vw; align-items: end; }
.daily > div > p { max-width: 520px; margin: 0 0 8px; color: #555b50; font: 18px/1.72 Georgia,serif; }
.contact { padding: 110px 7vw; display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; align-items: end; background: var(--ink); color: white; }
.contact h2 { font-size: clamp(52px,5.5vw,84px); }
.contactLinks { border-top: 1px solid rgba(255,255,255,.4); }
.contactLinks a { padding: 24px 0; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 18px; border-bottom: 1px solid rgba(255,255,255,.25); }
.contactLinks a:hover { color: #f4d7b6; }
.contactLinks span { grid-column: 1 / -1; color: #f4d7b6; font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.contactLinks strong { overflow-wrap: anywhere; font: 500 clamp(21px,2.25vw,34px)/1.15 Georgia,serif; }
.contactLinks small { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.footer { min-height: 230px; padding: 52px 7vw 36px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 6vw; align-items: start; border-top: 1px solid var(--line); }
.footer img { width: 190px; height: auto; }
.footer p { margin: 7px 0 0; color: #62685d; font: italic 17px/1.5 Georgia,serif; }
.footer a { margin-top: 9px; padding-bottom: 5px; border-bottom: 1px solid var(--line); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
@media (max-width: 900px) {
  .header nav > a:not(.back) { display: none; }
  .hero { grid-template-columns: 1fr; }
  .heroImage { min-height: 58vh; }
  .heroCopy { padding: 85px 7vw 95px; }
  .intro,.daily > div,.contact { grid-template-columns: 1fr; gap: 48px; }
  .families { grid-template-columns: 1fr; }
  .families article { min-height: 270px; }
  .process { grid-template-columns: 1fr; }
  .processImage { min-height: 560px; }
  .footer { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .header { min-height: 84px; padding-inline: 6vw; }
  .brand img { height: 58px; max-width: 150px; }
  .heroImage { min-height: 430px; }
  .hero h1 { font-size: clamp(56px,18vw,78px); }
  .heroActions { align-items: flex-start; flex-direction: column; }
  .intro,.daily,.contact { padding: 85px 6vw; }
  .intro h2,.daily h2 { font-size: clamp(45px,13vw,60px); }
  .families { padding: 0 6vw 80px; }
  .families article { padding: 28px 22px; }
  .processImage { min-height: 430px; }
  .processCopy { padding: 85px 6vw; }
  .processCopy h2,.contact h2 { font-size: clamp(44px,13vw,59px); }
  .contactLinks a { grid-template-columns: 1fr; }
  .footer { padding-inline: 6vw; }
}
@media (prefers-reduced-motion: reduce) { .buttonLight { transition: none; } }