/* ========================================
   ESPACIO CUTU — centered compact portfolio
   U18067 / Pfleiderer Pastel Blue background: #CDE4F2
   ======================================== */

:root {
  --u18067: #CDE4F2;
  --u18067-soft: #DCECF6;
  --paper: #FFFDF8;
  --paper-soft: rgba(255, 253, 248, 0.74);
  --ink: #17232B;
  --ink-soft: #4C5D66;
  --project-black: #0E0E0E;
  --project-white: #FFFFFF;
  --project-muted: rgba(255, 255, 255, 0.76);
  --line: rgba(23, 35, 43, 0.14);
  --accent: #C55372;
  --accent-soft: #F2C6D4;
  --white: #FFFFFF;
  --whatsapp: #25D366;

  --font-logo: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-vogue: 'Bodoni Moda', 'Didot', 'Bodoni 72', 'Bodoni 72 Smallcaps', 'Times New Roman', serif;

  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--u18067); }
body {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink);
  background: var(--u18067);
  line-height: 1.45;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
a { text-decoration: none; color: inherit; }
.reveal, .reveal.visible { opacity: 1; transform: translateY(0); }

/* HERO */
.hero {
  min-height: 78vh;
  min-height: 78dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--u18067);
}
.hero__container {
  width: min(1080px, calc(100% - 28px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(56px, 9vw, 96px) 0 clamp(42px, 7vw, 72px);
}
.hero__deco-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: clamp(20px, 4vw, 34px);
}
.hero__line { width: clamp(42px, 10vw, 92px); height: 1px; background: rgba(23,35,43,0.34); }
.hero__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hero__title {
  font-family: var(--font-vogue);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(45px, 11.6vw, 128px);
  color: var(--ink);
  letter-spacing: -0.074em;
  text-transform: uppercase;
  text-align: center;
  line-height: 0.78;
  max-width: 1040px;
  margin-bottom: clamp(24px, 4vw, 38px);
  text-wrap: balance;
  transform: scaleX(0.9);
  transform-origin: center;
}
.hero__slogan {
  font-family: var(--font-logo);
  font-size: clamp(13px, 1.7vw, 18px);
  font-weight: 760;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.25;
  max-width: 760px;
  margin-bottom: 14px;
}
.hero__location {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-soft);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
  margin-bottom: 28px;
}
.hero__deco-bottom { width: 84px; height: 1px; background: rgba(23,35,43,0.28); }

/* INTRO BAND */
.intro { background: var(--u18067); padding: 0 18px 34px; text-align: center; }
.intro__band {
  width: min(860px, 100%);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.intro__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-soft);
  font-family: var(--font-logo);
  font-weight: 760;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  transition: transform 0.25s var(--ease-spring), background 0.25s ease;
}
.intro__cta:hover { transform: translateY(-1px); background: var(--paper); }
.intro__cta--soft { opacity: 0.82; }

/* ABOUT */
.about { padding: clamp(46px, 8vw, 78px) 1.2rem; background: var(--u18067); }
.about__container {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 34px;
  padding: clamp(34px, 6vw, 58px) clamp(22px, 5vw, 58px);
}
.about__fleur { display: block; font-size: 28px; color: var(--accent); margin-bottom: 8px; }
.about__line { width: 72px; height: 1px; background: rgba(23,35,43,0.22); margin: 0 auto 24px; }
.about__line:last-child { margin-top: 26px; margin-bottom: 0; }
.about__title {
  font-family: var(--font-logo);
  font-weight: 820;
  font-size: clamp(32px, 6vw, 58px);
  color: var(--ink);
  letter-spacing: -0.07em;
  line-height: 0.92;
  margin-bottom: 1.2rem;
}
.about__text { font-size: clamp(17px, 2.2vw, 22px); line-height: 1.42; color: var(--ink-soft); margin-bottom: 0.85rem; }
.about__text strong { color: var(--ink); font-weight: 760; }

/* SHARED SECTION */
.section-header { text-align: center; margin-bottom: clamp(24px, 5vw, 42px); }
.section-label {
  font-family: var(--font-logo);
  font-size: 12px;
  color: var(--accent);
  font-weight: 820;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}
.section-title {
  font-family: var(--font-logo);
  font-weight: 820;
  font-size: clamp(38px, 7vw, 72px);
  color: var(--ink);
  letter-spacing: -0.075em;
  line-height: 0.9;
}
.section-copy { max-width: 660px; margin: 0.9rem auto 0; color: var(--ink-soft); font-size: clamp(16px, 2vw, 20px); line-height: 1.42; }

/* SERVICES */
.services { padding: clamp(48px, 8vw, 78px) 1.2rem; background: var(--u18067); }
.services__container { max-width: 1080px; margin: 0 auto; }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.service-card {
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(22px, 3vw, 32px);
  min-height: 228px;
  background: var(--paper-soft);
  text-align: center;
  transition: transform 0.35s var(--ease-out), background 0.35s ease;
}
.service-card:hover { transform: translateY(-3px); background: var(--paper); }
.service-card__num { display: block; font-family: var(--font-logo); color: var(--accent); font-size: 12px; font-weight: 820; letter-spacing: 0.16em; margin-bottom: 28px; }
.service-card h3 { font-family: var(--font-logo); color: var(--ink); font-size: clamp(24px, 3vw, 34px); font-weight: 820; letter-spacing: -0.06em; line-height: 0.95; margin-bottom: 0.9rem; }
.service-card p { color: var(--ink-soft); font-size: 16px; line-height: 1.42; }

/* PROJECTS */
.projects { padding: clamp(48px, 8vw, 82px) 1.2rem; background: var(--u18067); }
.projects__container { max-width: 1040px; margin: 0 auto; }
.project-showcase {
  display: grid;
  grid-template-columns: minmax(280px, 520px) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  background: var(--project-black);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 26px;
  margin-bottom: 16px;
}
.project-showcase__image {
  position: relative;
  overflow: hidden;
  min-height: 0;
  aspect-ratio: 1 / 1;
  background: var(--project-black);
}
.project-showcase__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: var(--project-black);
}
.project-showcase__tag {
  position: absolute;
  left: 14px;
  top: 14px;
  font-family: var(--font-logo);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--project-black);
  background: var(--project-white);
  border-radius: 999px;
  padding: 8px 12px;
}
.project-showcase__body { padding: clamp(26px, 5vw, 46px); display: flex; flex-direction: column; justify-content: center; text-align: center; background: var(--project-black); color: var(--project-white); }
.project-showcase__kicker { font-family: var(--font-logo); font-size: 12px; font-weight: 760; color: var(--u18067); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.75rem; }
.project-showcase__title { font-family: var(--font-logo); color: var(--project-white); font-weight: 820; font-size: clamp(36px, 5.2vw, 62px); line-height: 0.9; letter-spacing: -0.075em; margin-bottom: 1rem; }
.project-showcase__text { color: var(--project-muted); font-size: clamp(16px, 2vw, 20px); line-height: 1.42; margin-bottom: 1.25rem; }
.project-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.project-link, .project-live {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  font-family: var(--font-logo);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--project-white);
  transition: transform 0.25s var(--ease-spring), background 0.25s ease;
}
.project-link { background: var(--project-white); color: var(--project-black); }
.project-live { color: var(--project-white); background: transparent; }
.project-link:hover, .project-live:hover { transform: translateY(-1px); }
.project-live:hover { background: rgba(255,255,255,0.12); }

.projects__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.project-card { background: var(--project-black); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 24px; overflow: hidden; text-align: center; transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease; }
.project-card:hover { transform: translateY(-3px); box-shadow: 0 18px 52px rgba(14,14,14,0.18); }
.project-card__image-wrap { position: relative; aspect-ratio: 4 / 5; background: var(--project-black); overflow: hidden; }
.project-card__image-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: center center; background: var(--project-black); }
.play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(23, 35, 43, 0.82);
  box-shadow: 0 16px 48px rgba(23,35,43,0.22);
  transition: transform 0.25s var(--ease-spring), background 0.25s ease;
}
.play-button::before {
  content: "";
  position: absolute;
  left: 29px;
  top: 22px;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 22px solid var(--u18067);
}
.play-button:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--accent); }
.play-button--large { width: 84px; height: 84px; }
.play-button--large::before { left: 34px; top: 26px; border-top-width: 16px; border-bottom-width: 16px; border-left-width: 24px; }
.project-card__badge { position: absolute; top: 10px; left: 10px; font-family: var(--font-logo); font-size: 10px; font-weight: 820; text-transform: uppercase; letter-spacing: 0.12em; padding: 6px 9px; border-radius: 999px; background: var(--project-white); color: var(--project-black); }
.project-card__info { padding: 20px 16px 22px; background: var(--project-black); color: var(--project-white); }
.project-card__date { display: block; font-family: var(--font-logo); font-size: 11px; font-weight: 760; letter-spacing: 0.12em; text-transform: uppercase; color: var(--u18067); margin-bottom: 0.55rem; }
.project-card__name { font-family: var(--font-logo); font-weight: 820; font-size: clamp(22px, 2.4vw, 28px); line-height: 0.96; letter-spacing: -0.065em; color: var(--project-white); margin-bottom: 0.65rem; }
.project-card__caption { color: var(--project-muted); font-size: 14px; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.9rem; }
.project-card__link { font-family: var(--font-logo); font-size: 11px; font-weight: 820; letter-spacing: 0.1em; text-transform: uppercase; color: var(--project-white); }

.embed-modal { position: fixed; inset: 0; z-index: 200; pointer-events: none; visibility: hidden; }
.embed-modal.open { pointer-events: auto; visibility: visible; }
.embed-modal__backdrop { position: absolute; inset: 0; background: rgba(23,35,43,0.58); opacity: 0; transition: opacity 0.25s ease; }
.embed-modal.open .embed-modal__backdrop { opacity: 1; }
.embed-modal__dialog { position: absolute; left: 50%; top: 50%; width: min(660px, calc(100vw - 28px)); max-height: min(820px, calc(100vh - 34px)); overflow: auto; transform: translate(-50%, -46%) scale(0.96); opacity: 0; background: var(--paper); padding: 1rem; border-radius: 24px; transition: transform 0.28s var(--ease-out), opacity 0.28s var(--ease-out); }
.embed-modal.open .embed-modal__dialog { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.embed-modal__close { position: sticky; top: 0; margin-left: auto; display: flex; width: 38px; height: 38px; align-items: center; justify-content: center; background: var(--ink); color: var(--u18067); border-radius: 999px; font-size: 1.35rem; z-index: 3; }
.embed-modal__body .instagram-media { min-width: 0 !important; max-width: 100% !important; width: 100% !important; }

/* CONTACT */
.contact { background: var(--u18067); color: var(--ink); padding: clamp(52px, 8vw, 84px) 1.2rem; text-align: center; }
.contact__container { max-width: 760px; margin: 0 auto; background: var(--paper-soft); border: 1px solid var(--line); border-radius: 36px; padding: clamp(34px, 6vw, 58px) clamp(22px, 5vw, 56px); }
.contact__label { font-family: var(--font-logo); color: var(--accent); font-size: 12px; font-weight: 820; letter-spacing: 0.16em; text-transform: uppercase; display: block; margin-bottom: 10px; }
.contact__title { font-family: var(--font-logo); font-weight: 820; font-size: clamp(38px, 7vw, 70px); line-height: 0.9; letter-spacing: -0.075em; margin-bottom: 1rem; }
.contact__text { color: var(--ink-soft); font-size: clamp(16px, 2vw, 20px); line-height: 1.42; margin-bottom: 1.4rem; }
.contact__button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 20px; border-radius: 999px; background: var(--whatsapp); color: #0B2314; font-family: var(--font-logo); font-weight: 820; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; transition: transform 0.25s var(--ease-spring), background 0.25s ease; }
.contact__button:hover { transform: translateY(-2px); background: #1ebe5d; }
.contact__phone { margin-top: 1rem; color: var(--ink-soft); font-family: var(--font-body); font-weight: 650; letter-spacing: 0.08em; }

/* FOOTER */
.footer { background: var(--u18067); color: var(--ink); padding: 10px 1.2rem 42px; }
.footer__top { width: min(980px, 100%); height: 1px; background: rgba(23,35,43,0.22); margin: 0 auto; }
.footer__container { max-width: 820px; margin: 0 auto; padding: 34px 0 0; text-align: center; }
.footer h2 { font-family: var(--font-vogue); font-optical-sizing: auto; font-weight: 700; font-size: clamp(42px, 8.5vw, 88px); letter-spacing: -0.074em; line-height: 0.78; margin-bottom: 14px; transform: scaleX(0.9); transform-origin: center; }
.footer p { font-family: var(--font-logo); color: var(--ink-soft); letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; font-weight: 760; }

@media (max-width: 980px) {
  .services__grid, .project-showcase { grid-template-columns: 1fr; }
  .projects__grid { grid-template-columns: repeat(2, 1fr); }
  .project-showcase__image { aspect-ratio: 1 / 1; }
}

@media (max-width: 560px) {
  .hero { min-height: 70vh; min-height: 70dvh; }
  .hero__container { width: min(100% - 22px, 1080px); }
  .hero__title { font-size: clamp(43px, 12.5vw, 54px); letter-spacing: -0.078em; }
  .hero__slogan { font-size: 12px; }
  .intro { padding-bottom: 24px; }
  .intro__cta { min-height: 44px; font-size: 11px; padding: 0 14px; }
  .about, .services, .projects, .contact { padding-left: 0.85rem; padding-right: 0.85rem; }
  .services__grid, .projects__grid { grid-template-columns: 1fr; }
  .project-card__image-wrap { aspect-ratio: 1 / 1; }
  .project-showcase, .project-card, .about__container, .contact__container { border-radius: 26px; }
  .project-showcase__body { padding: 24px 18px 28px; }
  .project-showcase__tag { left: 12px; top: 12px; font-size: 10px; }
  .footer h2 { font-size: clamp(46px, 15vw, 66px); }
}