/* Locally hosted typefaces recommended by the brand identity kit. */
@font-face {
  font-family: 'Allison';
  src: url('assets/fonts/allison.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('assets/fonts/cinzel.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/cormorant-garamond.ttf') format('truetype');
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/montserrat.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Parisienne';
  src: url('assets/fonts/parisienne.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
/* Brand palette supplied in the Name The Design identity kit. */
:root {
  --cream: #ffffff;
  --paper: #ffffff;
  --ink: #18171d;
  --muted: #65626b;
  --rose: #cecbd8;
  --rose-dark: #6c657b;
  --sage: #6c657b;
  --line: #e7e5ec;
  --shadow: 0 26px 80px #56528a14;
}
body { background: #ffffff; font-family: 'Montserrat', Arial, sans-serif; }
button, input, textarea, select { font-family: inherit; }
h1, h2, .brand > span, .footer-brand > span, .dossier-preview strong {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0;
}
.brand small, .footer-brand small { font-family: 'Allison', cursive; }
.promise p, .footer-main p { font-family: 'Montserrat', sans-serif; font-size: 34px; font-weight: 400; font-style: normal; line-height: 1.25; }
h2 { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 34px; line-height: 1.25; }
body:not(.panel-body) h3,
body:not(.panel-body) .nav,
body:not(.panel-body) .eyebrow,
body:not(.panel-body) .kicker,
body:not(.panel-body) .button,
body:not(.panel-body) .header-action,
body:not(.panel-body) .contact-shortcuts a { font-weight: 400; letter-spacing: 0; }
.footer-brand > span, .dossier-preview strong { font-size: 24px; }
.site-header { background: #ffffffed; padding-block: 10px; }
.brand small, .footer-brand small { display: block; margin-top: 5px; font-size: 21px; line-height: 1.2; font-weight: 400; text-transform: none; letter-spacing: 0; }
.brand span { font-size: 14px; }
.brand-signature { display: block; margin-top: 12px; padding-block: 4px; font-family: 'Allison', cursive; font-weight: 400; font-size: 52px; line-height: 1.35; font-style: normal; letter-spacing: 0; color: #343039; }
.brand-signature { filter: url(#signature-fine); font-synthesis: none; }
.hero h1 { font-size: 48px; line-height: 1.2; margin-bottom: 24px; }
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 36px;
  align-items: center;
  min-height: 86svh;
  padding: 64px 4%;
  overflow: hidden;
  background: #ffffff;
}
.hero-curtain {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: url('assets/hero-tela-hd.png') center / cover no-repeat;
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-curtain { animation: curtain-settle 4.8s cubic-bezier(.2,.65,.25,1) both; }
  .hero-copy { animation: hero-arrive 1s ease-out .1s both; }
  .hero-logo { animation: hero-arrive 1.3s ease-out .25s both; }
}
@keyframes curtain-settle {
  from { transform: scale(1.08) translateX(-1%); }
  to { transform: scale(1) translateX(0); }
}
@keyframes hero-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-curtain, .hero-copy, .hero-logo { animation: none; transform: none; }
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .7);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, #fff, transparent 16%, transparent 64%, #fff);
}
.hero-copy { max-width: 620px; width: 100%; justify-self: center; text-align: center; }
.hero-copy h1, .hero-copy .lead { margin-inline: auto; }
.hero-copy .hero-actions, .hero-copy .contact-shortcuts { justify-content: center; }
.hero .eyebrow { font-size: 10px; letter-spacing: 0; color: #37323d; line-height: 1.7; }
.hero .lead { max-width: 480px; color: #3e3948; font-size: 15px; line-height: 1.85; }
.hero .button { min-height: 42px; padding: 11px 18px; font-size: 10px; letter-spacing: 0; }
.hero .contact-shortcuts a { font-size: 10px; letter-spacing: 0; }
.hero .contact-shortcuts a { color: #393442; }
.hero-logo { display: grid; place-items: center; min-height: 0; width: 100%; background: transparent; border: 0; }
.hero-logo img { width: 100%; max-width: 660px; height: auto; filter: saturate(.65); }
[data-theme="dark"] .hero::after { background: rgba(24, 23, 29, .76); }
[data-theme="dark"] .hero::before { background: linear-gradient(to bottom, #18171d, transparent 16%, transparent 64%, #18171d); }
[data-theme="dark"] .hero .eyebrow,
[data-theme="dark"] .brand-signature { color: #e2deeb; }
[data-theme="dark"] .hero .lead,
[data-theme="dark"] .hero .contact-shortcuts a { color: #e2deeb; }
[data-theme="dark"] .hero .button-light { background: #25232fe6; }
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 24px; }
  .hero-logo { width: min(100%, 540px); justify-self: center; }
}
@media (max-width: 640px) {
  .hero { min-height: 82svh; padding: 56px 24px; }
  .hero-curtain { background-position: 42% center; }
}
.hero-logo::before { display: none; }
.hero-logo img { border-radius: 4px; }
/* Feather the watercolor where it meets the image boundary. */
img[src="assets/name-the-design-original-sin-fondo.png"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  border-radius: 0;
}
.story-row div::before { background: linear-gradient(135deg, #e7e5ee, #aaa7bc); }
.contact-form { border-color: var(--line); }
.button-dark, .header-action { background: #dedbe6; color: #18171d; }
.instagram-strip a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0;
}
.instagram-strip a:first-child { background: var(--ink); color: var(--paper); }
.instagram-strip a:hover { border-color: var(--rose-dark); }
.instagram-strip a:focus-visible { outline: 2px solid var(--rose-dark); outline-offset: 3px; }
.demo-points a { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--muted); font-size: 11px; line-height: 1.5; }
.demo-points a:hover { border-color: var(--rose-dark); }
.demo-points a:focus-visible, .story-row a:focus-visible, .demo-photo:focus-visible { outline: 2px solid var(--rose-dark); outline-offset: 3px; }
.story-row a { display: grid; gap: 7px; place-items: center; color: var(--muted); font-size: 11px; }
.story-row a::before { content: ''; display: block; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--rose); background: #eeecf4; }
[data-theme="dark"] .story-row a::before { background: #302c40; }
#perfil-optimizado, #metricas { scroll-margin-top: 180px; }
.demo-photo { display: block; }
#instagram, #reels, #stories, #calendario-editorial, #comunidad { scroll-margin-top: 180px; }
.package-grid article { display: flex; flex-direction: column; min-width: 0; }
.package-grid article > .button { align-self: flex-start; margin-top: auto; }
.package-grid ul { margin-bottom: 28px; }
.plan-inclusions { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.plan-inclusions p { max-width: 960px; color: var(--muted); line-height: 1.8; }
.package-grid .featured .button-light { background: transparent; color: #f2f0ff; border-color: #d2cff0; }
.button-light, .demo-points span, .instagram-strip span,
.work-grid article, .comparison-grid article, .testimonial-grid article,
.service-grid article, .package-grid article, .faq details { background: #fff; }
.instagram-work, .method, .faq, .site-footer { background: #fbfafc; }
.transformation, .testimonials, .instagram-strip { background: #fff; }
.method-logo, .dossier-preview { background: #faf9fc; }
.method { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; }
.method .method-logo { min-height: 0; border: 0; border-radius: 0; background: transparent; }
.method .method-logo img { width: 100%; max-width: 660px; height: auto; filter: none; }
[data-theme="dark"] .method .method-logo { background: transparent; }
[data-theme="dark"] .method .method-logo img { background: transparent; filter: invert(1) hue-rotate(180deg) saturate(.65); }
@media (max-width: 980px) {
  .method { grid-template-columns: 1fr; gap: 24px; }
  .method .method-logo { width: min(100%, 540px); justify-self: center; }
}
.profile-row img, .profile-stats div, .insight-card { background: #f8f7fa; }
.instagram-phone, input, textarea { background: #fff; }
.package-grid .featured, .comparison-grid .after, .dossier { background: #292735; color: #fff; }
.package-grid .featured .price-label { color: #d2cff0; }
.package-grid .featured p, .package-grid .featured li,
.comparison-grid .after li, .comparison-grid .after .kicker,
.dossier-copy p:not(.eyebrow) { color: #e1dfee; }
.dossier-preview { color: #18171d; }
.dossier-preview span, .dossier-preview small { color: #615e70; }
html[data-theme="dark"] {
  --cream: #18171d;
  --paper: #25232f;
  --ink: #f2f0ff;
  --muted: #c4c1d4;
  --rose: #a3a6db;
  --rose-dark: #c0c0e8;
  --sage: #c0c0e8;
  --line: #464155;
}
[data-theme="dark"] .site-header { background: #18171df2; }
[data-theme="dark"] body { background: #18171d; }
[data-theme="dark"] .button-dark, [data-theme="dark"] .header-action { background: #a3a6db; color: #18171d; }
[data-theme="dark"] .instagram-work, [data-theme="dark"] .method,
[data-theme="dark"] .faq, [data-theme="dark"] .site-footer,
[data-theme="dark"] .transformation, [data-theme="dark"] .testimonials { background: #201e28; }
[data-theme="dark"] .package-grid .featured,
[data-theme="dark"] .comparison-grid .after,
[data-theme="dark"] .dossier { background: #302c40; }
[data-theme="dark"] .hero-logo img,
[data-theme="dark"] .method-logo img,
[data-theme="dark"] .dossier-preview img,
[data-theme="dark"] .brand img,
[data-theme="dark"] .footer-brand img { background: transparent; filter: invert(1) hue-rotate(180deg) saturate(.65); }
[data-theme="dark"] .instagram-strip { background: #18171d; }
[data-theme="dark"] .dossier-preview { color: #f2f0ff; }
[data-theme="dark"] .dossier-preview span, [data-theme="dark"] .dossier-preview small { color: #c4c1d4; }
@media (max-width: 640px) {
  .hero h1 { font-size: 34px; }
  .brand-signature { font-size: 40px; }
  body:not(.panel-body) .nav {
    flex-wrap: wrap;
    gap: 10px 18px;
    width: 100%;
    overflow: visible;
    font-size: 10px;
    line-height: 1.6;
  }
}