:root { --ink:#22211f; --cream:#f8f3ec; --paper:#fffdfa; --coral:#d97960; --olive:#58614d; --line:rgba(34,33,31,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"DM Sans",sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.site-header { align-items:center; display:flex; justify-content:space-between; padding:22px 5vw; position:absolute; width:100%; z-index:2; }
.brand { align-items:center; display:flex; font-size:14px; gap:12px; letter-spacing:.02em; }
.brand strong { font-family:"Playfair Display",serif; font-size:26px; font-weight:600; letter-spacing:.01em; }
.brand span { align-items:center; background:var(--ink); border-radius:50%; color:#fff; display:inline-flex; font-family:"Playfair Display",serif; font-size:13px; height:33px; justify-content:center; width:33px; }
.brand-logo { display:block; height:96px; width:auto; }
.brand-logo-footer { height:70px; }
.main-nav { display:flex; gap:28px; font-size:14px; }
.main-nav a:hover, .text-link:hover { color:var(--coral); }
.menu-toggle { background:none; border:0; color:var(--ink); display:none; font:inherit; }
.hero { display:grid; grid-template-columns:1.05fr .95fr; min-height:720px; }
.hero-copy { align-self:center; padding:140px 8vw 80px; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:.18em; margin:0 0 20px; }
h1,h2,h3 { font-family:"Playfair Display",serif; font-weight:500; line-height:1.1; margin:0; }
h1 { font-size:clamp(44px,5.3vw,82px); max-width:720px; }
h2 { font-size:clamp(34px,4vw,58px); }
h3 { font-size:31px; }
.hero-text { font-size:18px; max-width:530px; margin:26px 0 34px; }
.hero-actions { align-items:center; display:flex; flex-wrap:wrap; gap:26px; }
.button { display:inline-block; padding:14px 22px; }
.button-dark { background:var(--ink); color:#fff; }
.button-dark:hover { background:var(--coral); }
.text-link { border-bottom:1px solid currentColor; font-size:14px; padding-bottom:3px; }
.text-link span { margin-left:5px; }
.hero-image-wrap { min-height:600px; position:relative; }
.hero-image { height:100%; object-fit:cover; object-position:center top; width:100%; }
.image-note { background:var(--paper); bottom:38px; font-family:"Playfair Display",serif; font-size:19px; font-style:italic; margin:0; padding:13px 21px; position:absolute; right:0; }
.section { padding:120px 8vw; }
.intro { background:var(--paper); }
.intro-grid { display:grid; gap:12vw; grid-template-columns:1.2fr .8fr; }
.intro-grid h2 { max-width:690px; }
.intro-grid p { margin:0 0 20px; }
.intro-closing { font-family:"Playfair Display",serif; font-size:20px; font-style:italic; font-weight:600; }
.services { background:#ede4d8; }
.section-heading { max-width:720px; }
.section-heading h2 { margin-bottom:48px; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.service-card { display:flex; flex-direction:column; justify-content:flex-end; min-height:380px; padding:27px; }
.service-card p { align-self:flex-start; margin:0 0 auto; }
.service-card span { font-size:13px; margin-top:10px; }
.service-photo { background:linear-gradient(0deg,rgba(20,15,12,.6),rgba(20,15,12,.05)),url("assets/maquillaje-estilismo-yelika.jpg") center/cover; color:#fff; }
.service-plain { background:linear-gradient(0deg,rgba(75,21,13,.62),rgba(75,21,13,.06)),url("assets/fotografia-yelika.jpg") center/cover; color:#fff; }
.service-olive { background:linear-gradient(0deg,rgba(16,15,10,.72),rgba(16,15,10,.08)),url("assets/marketing-yelika.jpg") center/cover; color:#fff; }
.portfolio { background:var(--paper); }
.portfolio-heading { align-items:end; display:flex; justify-content:space-between; max-width:none; }
.portfolio-heading p:last-child { max-width:300px; }
.portfolio-grid { display:grid; gap:18px; grid-template-columns:1fr 1.35fr; grid-template-rows:310px 230px; }
.work { margin:0; overflow:hidden; position:relative; }
.work img { height:100%; object-fit:cover; transition:transform .5s ease; width:100%; }
.work:hover img { transform:scale(1.04); }
.work-tall { grid-row:span 2; }.work-small { grid-column:2; }
figcaption { background:var(--paper); bottom:0; display:flex; font-size:13px; justify-content:space-between; left:0; padding:10px 13px; position:absolute; width:62%; }
.quote { background:var(--coral); color:#fff; padding:84px 8vw; text-align:center; }
.quote p { font-family:"Playfair Display",serif; font-size:clamp(28px,3vw,48px); font-style:italic; margin:0 auto; max-width:830px; }
.contact { align-items:end; background:var(--ink); color:#fff; display:grid; gap:10vw; grid-template-columns:1fr 1fr; }
.contact h2 { margin-bottom:23px; }.contact p:last-child { max-width:440px; }
.contact-location { font-size:14px; letter-spacing:.04em; margin-top:18px; opacity:.72; }
.contact-links { border-top:1px solid rgba(255,255,255,.35); }
.contact-links a { border-bottom:1px solid rgba(255,255,255,.35); display:flex; font-family:"Playfair Display",serif; font-size:24px; justify-content:space-between; padding:17px 0; }
.contact-links a:hover { color:#e9a18e; }.site-footer { align-items:center; background:var(--ink); border-top:1px solid rgba(255,255,255,.2); color:#fff; display:flex; justify-content:space-between; padding:24px 5vw; }.site-footer .brand span { background:var(--cream); color:var(--ink); }.site-footer p { font-size:12px; margin:0; }
.whatsapp-float { align-items:center; background:#25d366; border-radius:50%; bottom:24px; box-shadow:0 8px 22px rgba(0,0,0,.22); color:#fff; display:flex; height:58px; justify-content:center; position:fixed; right:24px; transition:transform .25s ease, box-shadow .25s ease; width:58px; z-index:50; }
.whatsapp-float:hover { box-shadow:0 12px 28px rgba(0,0,0,.3); color:#fff; transform:scale(1.08); }
.whatsapp-float:focus-visible { outline:3px solid #fff; outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .whatsapp-float { transition:none; } .whatsapp-float:hover { transform:none; } }
@media (max-width:760px) { .site-header { padding:18px 6vw; }.menu-toggle { display:block; }.main-nav { background:var(--paper); box-shadow:0 12px 25px #0002; display:none; flex-direction:column; gap:0; padding:12px 20px; position:absolute; right:5vw; top:67px; }.main-nav.open { display:flex; }.main-nav a { padding:9px 0; }.hero { display:block; }.hero-copy { padding:130px 7vw 65px; }.hero-image-wrap { height:460px; }.section { padding:80px 7vw; }.intro-grid, .contact { gap:40px; grid-template-columns:1fr; }.service-grid { grid-template-columns:1fr; }.service-card { min-height:275px; }.portfolio-heading { align-items:start; display:block; }.portfolio-grid { grid-template-columns:1fr; grid-template-rows:360px 270px 270px; }.work-tall,.work-small { grid-column:auto; grid-row:auto; } figcaption { width:68%; }.site-footer { align-items:start; flex-direction:column; gap:18px; }.brand-logo { height:66px; }.brand-logo-footer { height:56px; }.brand strong { font-size:21px; } }