/* ============================================================
   MAKEARTE — Sistema de diseño editorial de lujo
   Autor: programación a medida (no template)
   Mobile-first · CSS3 puro · 0 dependencias
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Marca */
  --c-red: #C8102E;
  --c-red-soft: #FBE9EC;
  --c-black: #0A0A0A;
  --c-ink: #161616;
  --c-white: #FFFFFF;
  --c-grey-1: #F4F2EF;     /* off-white cálido editorial */
  --c-grey-2: #E5E1DC;     /* divisor sutil */
  --c-grey-3: #8A8580;     /* texto secundario cálido */
  --c-grey-4: #555555;     /* caption */

  /* Tipografía */
  --f-display: "Cormorant Garamond", "Times New Roman", serif;   /* editorial italic */
  --f-sans: "Inter Tight", "Gill Sans", "Helvetica Neue", Arial, sans-serif; /* títulos */
  --f-body: "Inter", "Montserrat", "Helvetica Neue", Arial, sans-serif;     /* cuerpo */

  /* Escalas tipográficas (mobile-first) */
  --fs-mega: clamp(3rem, 12vw, 9rem);     /* H1 hero */
  --fs-xl: clamp(2rem, 6vw, 4.5rem);       /* section title */
  --fs-l: clamp(1.5rem, 3.5vw, 2.5rem);
  --fs-m: clamp(1.125rem, 2vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-mini: 0.75rem;

  /* Espaciado */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-py: clamp(4rem, 10vw, 8rem);
  --maxw: 1440px;
  --maxw-text: 720px;

  /* Otros */
  --ease: cubic-bezier(.2,.7,.2,1);
  --transition: 600ms var(--ease);
  --header-h: 76px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: transparent; cursor: pointer; color: inherit; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--c-red); outline-offset: 3px; }
::selection { background: var(--c-red); color: #fff; }

/* ---------- 3. BASE ---------- */
html { font-size: 16px; }
body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Tipografía */
h1, h2, h3, h4 { font-family: var(--f-sans); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--c-black); }
.serif-it { font-family: var(--f-display); font-style: italic; font-weight: 400; letter-spacing: 0; }
.eyebrow {
  font-family: var(--f-sans);
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-red);
}
.lead { font-size: var(--fs-m); line-height: 1.4; color: var(--c-grey-3); font-weight: 300; }

/* Layout helpers */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container-text { max-width: var(--maxw-text); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-py); position: relative; }
.section--dark { background: var(--c-black); color: var(--c-grey-1); }
.section--dark h1,.section--dark h2,.section--dark h3 { color: var(--c-white); }
.section--cream { background: var(--c-grey-1); }
.divider-red { width: 56px; height: 2px; background: var(--c-red); margin: 1.25rem 0; }
.center { text-align: center; }
.center .divider-red { margin-inline: auto; }

/* ---------- 4. HEADER ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  padding-inline: var(--gutter);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.header--scrolled { background: rgba(255,255,255,.98); border-color: var(--c-grey-2); }
.header--dark { background: rgba(10,10,10,.7); }
.header--dark .nav__link,
.header--dark .brand { color: var(--c-white); }

.header__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 2rem; max-width: var(--maxw); margin-inline: auto; }
.brand { font-family: var(--f-sans); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.04em; color: var(--c-black); }
.brand span { color: var(--c-red); }

.nav { display: none; }
.nav__list { display: flex; gap: 2.25rem; }
.nav__link {
  font-family: var(--f-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-black);
  position: relative;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--c-red); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease);
}
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

.header__cta {
  font-family: var(--f-sans);
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.75rem 1.25rem;
  border: 1px solid currentColor;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.header__cta:hover { background: var(--c-red); border-color: var(--c-red); color: #fff; }

.burger { display: inline-flex; flex-direction: column; gap: 5px; padding: 8px; }
.burger span { width: 22px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Menú móvil overlay */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--c-black); color: var(--c-white);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  display: flex; flex-direction: column; gap: 1rem;
  transform: translateY(-100%); transition: transform 500ms var(--ease);
  visibility: hidden;
}
.mobile-menu.is-open { transform: translateY(0); visibility: visible; }
.mobile-menu a {
  font-family: var(--f-sans); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em;
  padding-block: 0.75rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.mobile-menu .mobile-cta { background: var(--c-red); padding: 1rem; text-align: center; margin-top: auto; border-bottom: 0; font-size: 0.875rem; letter-spacing: 0.2em; text-transform: uppercase; }

@media (min-width: 1024px) {
  .nav { display: block; }
  .burger { display: none; }
}

/* ---------- 5. HERO ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  color: var(--c-white);
  padding-block: 6rem 3rem;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -1; background: var(--c-black); }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.85) 100%);
}
.hero__media img,
.hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); animation: heroZoom 14s var(--ease) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }

.hero__inner { width: 100%; }
.hero__eyebrow { color: var(--c-red); margin-bottom: 1rem; }
.hero__title {
  font-size: var(--fs-mega);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--c-white);
  max-width: 18ch;
  margin-bottom: 1.5rem;
}
.hero__title em { font-family: var(--f-display); font-style: italic; font-weight: 400; color: var(--c-red); letter-spacing: -0.01em; }
.hero__sub { max-width: 50ch; font-size: var(--fs-m); color: rgba(255,255,255,.85); margin-bottom: 2.5rem; line-height: 1.4; font-weight: 300; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hero__scroll {
  position: absolute; bottom: 1.5rem; right: var(--gutter);
  font-size: var(--fs-mini); letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,.7);
  display: inline-flex; align-items: center; gap: 0.75rem;
}
.hero__scroll::after { content: ""; width: 1px; height: 40px; background: rgba(255,255,255,.4); animation: scrollLine 2.4s var(--ease) infinite; }
@keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- 6. BOTONES ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--f-sans);
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 1.1rem 2rem;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform 300ms var(--ease);
  cursor: pointer; user-select: none;
  border: 1px solid transparent;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--c-red); color: #fff; border-color: var(--c-red); }
.btn--primary:hover { background: #a90d24; border-color: #a90d24; }
.btn--ghost-light { color: #fff; border-color: rgba(255,255,255,.7); }
.btn--ghost-light:hover { background: #fff; color: var(--c-black); border-color: #fff; }
.btn--ghost-dark { color: var(--c-black); border-color: var(--c-black); }
.btn--ghost-dark:hover { background: var(--c-black); color: #fff; }
.btn--link {
  padding: 0; border: 0; background: transparent; color: var(--c-black);
  border-bottom: 1px solid var(--c-black); padding-bottom: 4px;
  letter-spacing: 0.2em; transform: none !important;
}
.btn--link:hover { color: var(--c-red); border-color: var(--c-red); }

/* ---------- 7. MANIFIESTO ---------- */
.manifesto { padding-block: var(--section-py); text-align: center; }
.manifesto__eyebrow { margin-bottom: 2rem; }
.manifesto__text {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 26ch;
  margin-inline: auto;
  color: var(--c-white);
}
.manifesto__text strong { font-style: normal; font-family: var(--f-sans); color: var(--c-red); font-weight: 700; letter-spacing: -0.02em; }
.manifesto__signature { margin-top: 3rem; font-size: var(--fs-mini); letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,.6); }

/* ---------- 8. VERTICALES (3 tarjetas) ---------- */
.verticals { padding-block: var(--section-py); }
.verticals__head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 2rem; margin-bottom: 3rem; }
.verticals__head h2 { font-size: var(--fs-xl); max-width: 22ch; }
.verticals__grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .verticals__grid { grid-template-columns: repeat(3, 1fr); }
}
.vcard {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 2rem; color: #fff; background: var(--c-black);
  isolation: isolate;
  transition: transform 500ms var(--ease);
}
.vcard__bg {
  position: absolute; inset: 0; z-index: -1;
  background-position: center; background-size: cover;
  transform: scale(1.05); transition: transform 800ms var(--ease), filter 800ms var(--ease);
  filter: brightness(.65) saturate(1.05);
}
.vcard::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 75%, rgba(0,0,0,.95) 100%);
}
.vcard:hover .vcard__bg { transform: scale(1); filter: brightness(.55) saturate(1.1); }
.vcard__num { font-family: var(--f-display); font-style: italic; font-size: 1rem; color: rgba(255,255,255,.6); margin-bottom: 1rem; }
.vcard__title { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 0.75rem; letter-spacing: -0.025em; }
.vcard__desc { font-size: 0.9375rem; color: rgba(255,255,255,.8); margin-bottom: 1.5rem; max-width: 32ch; line-height: 1.5; }
.vcard__cta { font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; padding-bottom: 4px; border-bottom: 1px solid #fff; display: inline-block; transition: color .3s var(--ease), border-color .3s var(--ease); }
.vcard:hover .vcard__cta { color: var(--c-red); border-color: var(--c-red); }
.vcard__bg--eventos  { background-image: linear-gradient(135deg, #2a0a0c, #5b1118); }
.vcard__bg--bodas    { background-image: linear-gradient(135deg, #1a1a1a, #4a3a35); }
.vcard__bg--privados { background-image: linear-gradient(135deg, #1a1a1a, #5e1a26); }

/* ---------- 9. FEATURE / CASE STUDY ---------- */
.feature { display: grid; grid-template-columns: 1fr; gap: 0; align-items: stretch; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; min-height: 80vh; }
}
.feature__media { background: var(--c-black); min-height: 360px; position: relative; overflow: hidden; }
.feature__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #2a0a0c, #5b1118); }
.feature__body { background: var(--c-grey-1); padding: clamp(2rem, 5vw, 5rem); display: flex; flex-direction: column; justify-content: center; }
.feature__body h2 { font-size: var(--fs-xl); margin-block: 1.25rem 1.5rem; }
.feature__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-block: 2rem; }
.stat__num { font-family: var(--f-display); font-style: italic; font-size: clamp(2rem, 5vw, 3.5rem); color: var(--c-red); line-height: 1; }
.stat__label { font-size: var(--fs-mini); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-grey-3); margin-top: 0.5rem; }

/* ---------- 10. EQUIPO TEASER ---------- */
.team-teaser__head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.team-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x mandatory; }
.team-rail::-webkit-scrollbar { height: 2px; }
.team-rail::-webkit-scrollbar-thumb { background: var(--c-red); }
.team-card { scroll-snap-align: start; }
.team-card__img { aspect-ratio: 3/4; background: var(--c-black) linear-gradient(135deg, #1a1a1a, #2e2e2e); margin-bottom: 1rem; }
.team-card h4 { font-size: 1.25rem; }
.team-card p { font-size: var(--fs-small); color: var(--c-grey-3); }

/* ---------- 11. TESTIMONIOS ---------- */
.testimonials { background: var(--c-grey-1); }
.testi-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } }
.testi {
  background: #fff;
  padding: 2.5rem 2rem;
  border-top: 2px solid var(--c-red);
  display: flex; flex-direction: column; gap: 1.25rem;
}
.testi__quote { font-family: var(--f-display); font-style: italic; font-size: 1.25rem; line-height: 1.45; color: var(--c-black); }
.testi__author { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.testi__name { font-weight: 600; font-size: 0.9375rem; }
.testi__role { font-size: var(--fs-mini); letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-grey-4); }

/* ---------- 12. NEWSLETTER ---------- */
.newsletter { background: var(--c-black); color: var(--c-grey-1); text-align: center; }
.newsletter__title { font-size: var(--fs-xl); color: #fff; margin-block: 1rem 0.75rem; }
.newsletter__desc { max-width: 50ch; margin-inline: auto; color: rgba(255,255,255,.75); margin-bottom: 2.5rem; }
.newsletter__form {
  display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 540px; margin-inline: auto;
  border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 0.5rem;
}
.newsletter__form input[type="email"] {
  flex: 1; min-width: 0; padding: 0.9rem 0;
  background: transparent; border: 0; color: #fff;
  font-size: 1rem; letter-spacing: 0.02em;
}
.newsletter__form input[type="email"]::placeholder { color: rgba(255,255,255,.45); }
.newsletter__form button {
  font-family: var(--f-sans); font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--c-red); padding: 0.9rem 0.5rem; cursor: pointer;
}
.newsletter__legal { margin-top: 1rem; font-size: var(--fs-mini); color: rgba(255,255,255,.4); max-width: 50ch; margin-inline: auto; }
.newsletter__legal a { color: rgba(255,255,255,.65); border-bottom: 1px solid rgba(255,255,255,.3); }

/* ---------- 13. FOOTER ---------- */
.footer { background: var(--c-black); color: rgba(255,255,255,.6); padding-block: 3rem 2rem; border-top: 1px solid rgba(255,255,255,.08); }
.footer__top {
  display: grid; gap: 2.5rem; padding-bottom: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .footer__top { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}
.footer__brand { font-family: var(--f-sans); font-weight: 700; font-size: 1.5rem; color: #fff; letter-spacing: 0.04em; }
.footer__brand span { color: var(--c-red); }
.footer__desc { margin-top: 1rem; max-width: 32ch; font-size: var(--fs-small); }
.footer h5 { font-size: var(--fs-mini); letter-spacing: 0.25em; text-transform: uppercase; color: #fff; margin-bottom: 1.25rem; }
.footer a { font-size: var(--fs-small); display: block; padding-block: 0.35rem; }
.footer a:hover { color: var(--c-red); }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: var(--fs-mini); letter-spacing: 0.08em;
}

/* ---------- 14. WHATSAPP FLOTANTE ---------- */
.fab-wa {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  transition: transform 300ms var(--ease);
}
.fab-wa:hover { transform: scale(1.08); }
.fab-wa svg { width: 28px; height: 28px; fill: #fff; }

/* ---------- 15. PÁGINAS INTERNAS ---------- */
.page-hero {
  position: relative; min-height: 70svh;
  display: flex; align-items: end;
  color: #fff;
  padding: 8rem var(--gutter) 4rem;
  background: var(--c-black);
}
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.85)); }
.page-hero__bg { position: absolute; inset: 0; z-index: 0; background-position: center; background-size: cover; opacity: .65; }
.page-hero__inner { position: relative; z-index: 1; width: 100%; max-width: var(--maxw); margin-inline: auto; }
.page-hero__eyebrow { color: var(--c-red); }
.page-hero__title { font-size: clamp(2.5rem, 8vw, 6rem); max-width: 18ch; margin-block: 1rem 1.5rem; color: #fff; line-height: 0.98; letter-spacing: -0.03em; }
.page-hero__sub { max-width: 56ch; color: rgba(255,255,255,.85); font-size: var(--fs-m); line-height: 1.45; font-weight: 300; }

.page-hero__bg--eventos { background-image: linear-gradient(140deg, #1a0709 0%, #5b1118 60%, #2a0a0c 100%); }
.page-hero__bg--bodas    { background-image: linear-gradient(140deg, #1a1612 0%, #423025 60%, #2a201a 100%); }
.page-hero__bg--privados { background-image: linear-gradient(140deg, #15181c 0%, #2a1a22 60%, #5e1a26 100%); }

/* ---------- 16. BLOQUES DE CONTENIDO ---------- */
.split { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 0.9fr 1.1fr; gap: 5rem; } }
.split__intro h2 { font-size: var(--fs-xl); }
.split__intro p { color: var(--c-grey-3); margin-top: 1rem; }

.feature-list { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--c-grey-2); }
@media (min-width: 700px) { .feature-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .feature-list { grid-template-columns: repeat(3, 1fr); } }
.feature-item { padding: 2rem 1.5rem; border-bottom: 1px solid var(--c-grey-2); border-right: 1px solid var(--c-grey-2); display: flex; flex-direction: column; gap: 0.75rem; transition: background .3s var(--ease); }
.feature-item:hover { background: var(--c-grey-1); }
.feature-item__num { font-family: var(--f-display); font-style: italic; color: var(--c-red); font-size: 1.125rem; }
.feature-item h3 { font-size: 1.25rem; }
.feature-item p { font-size: var(--fs-small); color: var(--c-grey-3); }

/* Process steps */
.steps { display: grid; gap: 2rem; grid-template-columns: 1fr; counter-reset: step; margin-top: 2rem; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { counter-increment: step; position: relative; padding-top: 2.5rem; border-top: 2px solid var(--c-black); }
.step::before { content: counter(step, decimal-leading-zero); font-family: var(--f-display); font-style: italic; font-size: 1.5rem; color: var(--c-red); position: absolute; top: 0.75rem; left: 0; }
.step h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.step p { font-size: var(--fs-small); color: var(--c-grey-3); }

/* Packs (eventos privados) */
.packs { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .packs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .packs { grid-template-columns: repeat(3, 1fr); } }
.pack { background: var(--c-grey-1); padding: 2.5rem 2rem; border-top: 2px solid var(--c-red); display: flex; flex-direction: column; gap: 1rem; transition: transform .4s var(--ease), background .4s var(--ease); }
.pack:hover { transform: translateY(-4px); background: #fff; box-shadow: 0 24px 40px rgba(0,0,0,.06); }
.pack h3 { font-size: 1.5rem; }
.pack__desc { color: var(--c-grey-3); font-size: var(--fs-small); }
.pack ul { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.pack ul li { position: relative; padding-left: 1.25rem; font-size: var(--fs-small); }
.pack ul li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 8px; height: 1px; background: var(--c-red); }
.pack__cta { margin-top: auto; padding-top: 1rem; }

/* FAQ */
.faq { display: flex; flex-direction: column; }
.faq__item { border-bottom: 1px solid var(--c-grey-2); }
.faq__q { width: 100%; padding: 1.5rem 0; display: flex; justify-content: space-between; align-items: center; text-align: left; font-family: var(--f-sans); font-weight: 600; font-size: 1.0625rem; cursor: pointer; }
.faq__q::after { content: "+"; font-family: var(--f-display); font-style: italic; font-size: 1.5rem; color: var(--c-red); transition: transform .3s var(--ease); }
.faq__item.is-open .faq__q::after { content: "−"; }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); color: var(--c-grey-3); font-size: var(--fs-small); }
.faq__a > div { padding-bottom: 1.5rem; max-width: 60ch; }

/* Logo wall */
.logo-wall { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); align-items: center; }
@media (min-width: 700px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .logo-wall { grid-template-columns: repeat(6, 1fr); } }
.logo-wall__item { height: 60px; display: flex; align-items: center; justify-content: center; color: var(--c-grey-3); font-family: var(--f-sans); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.875rem; filter: grayscale(1); opacity: .55; transition: opacity .3s var(--ease), filter .3s var(--ease); }
.logo-wall__item:hover { opacity: 1; filter: grayscale(0); }

/* Formulario */
.form-block { background: var(--c-black); color: #fff; padding: clamp(2.5rem, 6vw, 5rem) var(--gutter); }
.form-block__inner { max-width: 880px; margin-inline: auto; }
.form-block h2 { color: #fff; font-size: var(--fs-xl); margin-bottom: 0.75rem; }
.form-block p { color: rgba(255,255,255,.7); margin-bottom: 2.5rem; max-width: 60ch; }
.form { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
.form .field--full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: var(--fs-mini); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.field input, .field select, .field textarea {
  background: transparent; color: #fff;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.3);
  padding: 0.75rem 0; font-size: 1rem;
  transition: border-color .3s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-red); outline: 0; }
.field select option { color: var(--c-black); }
.field textarea { min-height: 110px; resize: vertical; }
.field--check { flex-direction: row; align-items: flex-start; gap: 0.75rem; }
.field--check label { letter-spacing: 0.03em; text-transform: none; color: rgba(255,255,255,.7); font-size: var(--fs-small); }
.form__submit { margin-top: 1rem; }
@media (max-width: 700px) { .form { grid-template-columns: 1fr; } }

/* Portfolio grid */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.filter { padding: 0.5rem 1rem; border: 1px solid var(--c-grey-2); font-size: var(--fs-mini); letter-spacing: 0.2em; text-transform: uppercase; transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
.filter:hover, .filter.is-active { background: var(--c-black); color: #fff; border-color: var(--c-black); }
.gallery { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .gallery { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery__item { aspect-ratio: 3/4; background: var(--c-black); position: relative; overflow: hidden; }
.gallery__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.7)); opacity: 0; transition: opacity .4s var(--ease); }
.gallery__item:hover::after { opacity: 1; }
.gallery__caption { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; color: #fff; opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease); z-index: 2; }
.gallery__caption .eyebrow { color: var(--c-red); }
.gallery__caption h4 { color: #fff; font-size: 1.125rem; margin-top: 0.25rem; }
.gallery__item:hover .gallery__caption { opacity: 1; transform: translateY(0); }

/* Equipo grid */
.team-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-grid .team-card__img { aspect-ratio: 3/4; }
.team-grid h3 { font-size: 1.5rem; margin-top: 1rem; }
.team-grid p.role { font-size: var(--fs-mini); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-red); margin-top: 0.25rem; }
.team-grid p.bio { color: var(--c-grey-3); font-size: var(--fs-small); margin-top: 0.75rem; }

/* Diario grid */
.posts { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .posts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .posts { grid-template-columns: repeat(3, 1fr); } }
.post { display: flex; flex-direction: column; gap: 1rem; }
.post__img { aspect-ratio: 4/5; background: linear-gradient(135deg, #1a1a1a, #3a3a3a); }
.post__meta { display: flex; gap: 1rem; font-size: var(--fs-mini); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-red); }
.post h3 { font-size: 1.5rem; line-height: 1.15; }
.post p { color: var(--c-grey-3); font-size: var(--fs-small); }
.post__link { font-size: var(--fs-mini); letter-spacing: 0.25em; text-transform: uppercase; color: var(--c-black); padding-bottom: 4px; border-bottom: 1px solid var(--c-black); display: inline-block; align-self: flex-start; }
.post__link:hover { color: var(--c-red); border-color: var(--c-red); }

/* Pricing helper */
.pricing-line { display: flex; justify-content: space-between; padding: 1.25rem 0; border-bottom: 1px solid var(--c-grey-2); align-items: baseline; }
.pricing-line span:first-child { font-weight: 600; }
.pricing-line span:last-child { font-family: var(--f-display); font-style: italic; color: var(--c-red); font-size: 1.25rem; }

/* ---------- 17. UTIL / ANIMACIÓN ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}