@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&family=Nunito:wght@400;500;600;700;800&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ---------- Design tokens ----------
   "Sitio opción 2": diseño alterno inspirado en la plantilla "Artora"
   (artora.framer.website), fondo crema, franja de utilidad superior,
   tarjetas con caption fija, y azul marino como color de contraste (en
   vez del vinotinto del sitio original). Sistema tipográfico de 3 niveles:
   Lora (títulos), Nunito (subtítulos/encabezados de componente) e Inter
   (párrafos y texto de interfaz).
------------------------------------- */
:root {
  --font-title: "Lora", Georgia, serif;
  --font-subtitle: "Nunito", ui-sans-serif, system-ui, sans-serif;
  --font-paragraph: "Inter", ui-sans-serif, system-ui, sans-serif;

  --color-cream-light: #FDFAF0;
  --color-cream: #F3ECD8;
  --color-cream-dark: #E6DCC0;
  --color-ink: #1E1712;
  --color-ink-soft: #4A3D33;

  --color-accent: #1B3A5C;
  --color-accent-dark: #12283F;
  --color-accent-light: #5C82A6;

  --utility-height: 2.25rem;
  --header-height-desktop: 5rem;
  --header-height-mobile: 5.75rem;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-paragraph);
  background-color: var(--color-cream-light);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

.container { max-width: 72rem; margin: 0 auto; padding: 0 2rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-subtitle);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.85rem;
}
.eyebrow-line { width: 1.5rem; height: 1px; background: var(--color-accent); display: inline-block; }
.eyebrow-on-dark { color: #AFC6DA; }
.eyebrow-on-dark .eyebrow-line { background: #AFC6DA; }

.section-head { margin-bottom: 3rem; max-width: 38rem; }
.section-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1.15;
  color: var(--color-ink);
}
.section-sub { font-size: 0.92rem; line-height: 1.7; color: rgba(30,23,18,.65); margin-top: 0.9rem; max-width: 34rem; }

.section {
  width: 100%;
  padding: 6rem 0 5rem;
  scroll-margin-top: calc(var(--utility-height) + var(--header-height-desktop));
}
.section-flush { padding-top: 0; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  background: var(--color-accent);
  color: var(--color-cream-light);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .25s, color .25s, transform .2s;
}
/* Efecto "wipe": una segunda capa de color se desliza desde la izquierda al hacer hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent-dark);
  transform: translateX(-100%);
  transition: transform .4s cubic-bezier(.65,0,.35,1);
  z-index: -1;
}
.btn:hover::before { transform: translateX(0); }
.btn:hover { border-color: var(--color-accent-dark); color: var(--color-cream-light); transform: translateY(-1px); }
.btn svg { transition: transform .3s cubic-bezier(.65,0,.35,1); }
.btn:hover svg { transform: translateX(3px); }

.btn-outline {
  background: transparent;
  color: var(--color-ink);
  border-color: rgba(30,23,18,.22);
  transition: border-color .25s, background-color .25s, color .25s, transform .2s;
}
.btn-outline::before { background: rgba(30,23,18,.06); }
.btn-outline:hover { border-color: var(--color-ink); color: var(--color-ink); }
.btn-white {
  background: var(--color-cream-light); color: var(--color-accent); border-color: var(--color-cream-light);
  transition: border-color .25s, color .25s, transform .2s;
}
.btn-white::before { background: #fff; }
.btn-white:hover { color: var(--color-accent-dark); border-color: #fff; transform: translateY(-1px); }
.btn-sm { padding: 0.6rem 1.15rem; font-size: 0.8rem; }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn:disabled:hover::before { transform: translateX(-100%); }

/* ---------- Utility bar ---------- */
.utility-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 41;
  height: var(--utility-height);
  background: var(--color-cream);
  color: rgba(30,23,18,.68);
  border-bottom: 1px solid rgba(30,23,18,.08);
}
.utility-inner {
  max-width: 80rem;
  height: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
}
.utility-item { display: inline-flex; align-items: center; gap: 0.45rem; color: inherit; transition: color .2s; }
a.utility-item:hover { color: var(--color-accent); }
.utility-right { display: flex; gap: 2rem; }

/* ---------- Header / nav ---------- */
.site-header {
  position: fixed;
  top: var(--utility-height);
  left: 0; right: 0;
  z-index: 40;
  background: rgba(253,250,240,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(30,23,18,.1);
}
.site-header .header-inner {
  max-width: 80rem;
  margin: 0 auto;
  height: var(--header-height-desktop);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; text-align: left; background: none; border: none; padding: 0; }
.brand-name {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--color-ink);
  line-height: 1;
}

.main-nav { display: flex; align-items: center; gap: 2.75rem; }
.nav-links { display: flex; align-items: center; gap: 1.75rem; }
.nav-link {
  position: relative;
  background: none;
  border: none;
  padding: 0.5rem 0;
  font-family: var(--font-paragraph);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(30,23,18,.68);
  transition: color .25s;
}
.nav-link:hover { color: var(--color-ink); }
.nav-link.active { color: var(--color-ink); }
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: -1px;
  height: 1.5px;
  background: var(--color-accent);
  transition: left .3s ease, right .3s ease;
}
.nav-link:hover::after, .nav-link.active::after { left: 0; right: 0; }

.nav-actions { display: flex; align-items: center; gap: 1.25rem; }

.mobile-header { display: none; }

@media (max-width: 1024px) {
  .utility-bar { display: none; }
  .site-header { top: 0; }
  .site-header .header-inner { display: none; }
  .mobile-header { display: block; }
  .mobile-top {
    height: 3.5rem;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(30,23,18,.08);
  }
  .mobile-nav-scroll {
    width: 100%;
    overflow-x: auto;
    border-bottom: 1px solid rgba(30,23,18,.08);
    background: var(--color-cream-light);
  }
  .mobile-nav-scroll::-webkit-scrollbar { display: none; }
  .mobile-nav-list {
    display: flex;
    gap: 1rem;
    padding: 0.6rem 0.75rem;
    white-space: nowrap;
    justify-content: center;
    width: max-content;
    min-width: 100%;
  }
  .mobile-nav-list .nav-link { font-size: 0.6rem; }
}

/* ---------- Layout ---------- */
main { padding-top: calc(var(--utility-height) + var(--header-height-desktop)); }
@media (max-width: 1024px) { main { padding-top: var(--header-height-mobile); } .section { scroll-margin-top: var(--header-height-mobile); } }

/* ---------- Hero / Inicio ---------- */
.hero { padding-top: 0; padding-bottom: 1rem; }
.hero-copy { max-width: 44rem; margin: 0 auto; padding-top: 3.5rem; text-align: center; }
.hero-copy .eyebrow { justify-content: center; }

/* Reveal de texto escalonado: cada línea del titular entra por separado, seguida
   del resto del bloque, para que la entrada del hero se sienta como una secuencia
   en vez de un solo golpe de opacidad. */
.hero-copy .eyebrow,
.hero-heading .line,
.hero-lede,
.hero-actions {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.hero-copy.in-view .eyebrow { opacity: 1; transform: translateY(0); transition-delay: .05s; }
.hero-copy.in-view .hero-heading .line:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: .18s; }
.hero-copy.in-view .hero-heading .line:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: .3s; }
.hero-copy.in-view .hero-lede { opacity: 1; transform: translateY(0); transition-delay: .42s; }
.hero-copy.in-view .hero-actions { opacity: 1; transform: translateY(0); transition-delay: .52s; }
.hero-heading {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 3.6rem;
  line-height: 1.12;
  color: var(--color-ink);
  margin-bottom: 1.5rem;
}
.hero-heading .line { display: block; }
.hero-heading em {
  font-style: italic;
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: rgba(27,58,92,.35);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4rem;
}
.hero-lede {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(30,23,18,.68);
  max-width: 34rem;
  margin: 0 auto 2rem;
}
.hero-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

.hero-image-wrap { position: relative; padding: 2.5rem 2rem 3.5rem; }
.hero-image {
  --parallax-y: 0px;
  max-width: 68rem;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(30,23,18,.4);
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
}
.hero-image.in-view { opacity: 1; transform: scale(1); }
.hero-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transform: translateY(var(--parallax-y));
  will-change: transform;
}

.scroll-down-btn {
  position: absolute;
  left: 50%; bottom: -1.1rem;
  transform: translateX(-50%);
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  border: 4px solid var(--color-cream-light);
  background: var(--color-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 25px rgba(27,58,92,.35);
  animation: bounce-down 2.4s ease-in-out infinite;
}
@keyframes bounce-down {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

.hero-footer {
  max-width: 72rem;
  margin: 1rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(30,23,18,.12);
  text-align: center;
}
.hero-footer .location {
  font-family: var(--font-paragraph);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(30,23,18,.55);
  font-weight: 600;
  display: block;
  margin-bottom: 1rem;
}
.hero-footer .socials { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.hero-footer .socials a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(30,23,18,.72);
}
.hero-footer .socials a:hover { color: var(--color-accent); }
.dot { color: rgba(30,23,18,.25); }

@media (max-width: 1024px) {
  .hero-heading { font-size: 2.35rem; }
}

@media (max-width: 640px) {
  .hero-image img { aspect-ratio: 4 / 5; object-position: center 22%; }
}

@media (max-width: 560px) {
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .hero-actions .btn { width: 100%; min-width: 0; justify-content: center; white-space: normal; text-align: center; }
}

/* ---------- Portfolio grid: masonry (tamaños naturales, sin recorte forzado),
   inspirado en la visualización de artworkarchive.com/profile/juan-andres-marin —
   columnas CSS en vez de una grilla uniforme, y border-radius:0 en todo. ---------- */
.bento-grid { columns: 3 18rem; column-gap: 1.75rem; }
.bento-item { cursor: pointer; break-inside: avoid; margin-bottom: 1.75rem; }
.bento-media {
  position: relative;
  overflow: hidden;
  background: var(--color-cream-dark);
  border: 1px solid rgba(30,23,18,.12);
}
.bento-media img { width: 100%; height: auto; display: block; transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .5s ease; }
.bento-item:hover .bento-media img, .bento-item:focus-visible .bento-media img { transform: scale(1.04); opacity: 0.2; }
.bento-featured-tag {
  position: absolute; top: 0.75rem; left: 0.75rem; z-index: 1;
  background: var(--color-accent); color: #fff;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 0.3rem 0.6rem;
}

@media (max-width: 620px) {
  .bento-grid { columns: 1; }
}

/* ---------- Modal (artwork / lightbox) ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20,16,12,.78);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}
.modal-backdrop[hidden] { display: none; }
.modal-card {
  position: relative;
  background: var(--color-cream-light);
  max-width: 60rem; width: 100%;
  border: 1px solid rgba(30,23,18,.25);
  overflow: hidden;
  box-shadow: 0 25px 60px -12px rgba(0,0,0,.4);
  display: grid;
  grid-template-columns: 7fr 5fr;
  max-height: 90vh;
}
.modal-media {
  background: var(--color-cream-dark);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.modal-media img { width: 100%; height: 100%; object-fit: contain; max-height: 85vh; padding: 0.5rem; }
.modal-gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid rgba(30,23,18,.2);
  background: var(--color-cream-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink);
  transition: border-color .2s, color .2s;
}
.modal-gallery-arrow:hover { border-color: var(--color-accent); color: var(--color-accent); }
.modal-gallery-arrow.prev { left: 0.75rem; }
.modal-gallery-arrow.next { right: 0.75rem; }
.modal-gallery-count {
  position: absolute; bottom: 0.75rem; left: 50%; transform: translateX(-50%);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--color-ink); background: var(--color-cream-light);
  border: 1px solid rgba(30,23,18,.2); border-radius: 999px;
  padding: 0.2rem 0.7rem;
}
.modal-body {
  padding: 2rem;
  border-left: 1px solid rgba(30,23,18,.15);
  background: #fff;
  overflow-y: auto;
  display: flex; flex-direction: column; justify-content: space-between;
}
.modal-close {
  /* Fijo dentro de la tarjeta (no dentro de .modal-body, que hace scroll propio) para
     que siempre quede visible y toqueable sin importar cuánto contenido/scroll haya —
     antes, en móvil, quedaba enterrado al fondo del panel de texto y no se veía. */
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 5;
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(253,250,240,.95); border: 1px solid rgba(30,23,18,.2);
  color: var(--color-ink);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.modal-close:hover { color: var(--color-accent); }

.order-modal-card { display: block; max-width: 32rem; max-height: 85vh; overflow-y: auto; }
.order-modal-body { padding: 2.5rem 2rem 2rem; }
.order-modal-body .modal-title { margin-top: 0.5rem; font-size: 1.4rem; }
.order-modal-body .mc-card-note { margin: 0.75rem 0 1.5rem; }
.order-modal-body form { margin-top: 0.5rem; }
.modal-kicker {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-accent);
}
.modal-title { font-family: var(--font-subtitle); font-size: 1.9rem; font-weight: 600; margin-top: 0.5rem; }
.modal-specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  border-top: 1px solid rgba(30,23,18,.15); border-bottom: 1px solid rgba(30,23,18,.15);
  padding: 1rem 0; margin: 1.25rem 0; font-size: 0.75rem;
}
.modal-specs .label { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: rgba(30,23,18,.4); display: block; margin-bottom: 0.15rem; }
.modal-specs .value { font-weight: 600; }
.modal-desc { font-size: 0.85rem; line-height: 1.75; color: rgba(30,23,18,.75); white-space: pre-line; }
.modal-footer { border-top: 1px solid rgba(30,23,18,.15); padding-top: 1.25rem; margin-top: 1.25rem; }
.modal-footer p { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(30,23,18,.5); text-align: center; margin-bottom: 0.75rem; }
.modal-footer .btn { width: 100%; justify-content: center; }

@media (max-width: 800px) {
  /* En una sola columna, la imagen y la ficha se apilan como dos filas del grid
     sin alto definido: la imagen (con su propio max-height) se comía casi todo
     el espacio y la ficha quedaba recortada por el overflow:hidden de la tarjeta,
     sin nada que hacer scroll porque nunca llegaba a tener una altura asignada.
     Fijamos la altura de la tarjeta y repartimos filas explícitas para que la
     ficha siempre tenga espacio propio con scroll. */
  .modal-card {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 42vh) minmax(0, 1fr);
    height: 90vh;
  }
  .modal-media { min-height: 0; }
  .modal-media img { max-height: 100%; }
  .modal-body { border-left: none; border-top: 1px solid rgba(30,23,18,.15); min-height: 0; }
}

/* ---------- Blog ---------- */
.blog-list { display: flex; flex-direction: column; gap: 2rem; }
.blog-card {
  background: #fff; border: 1px solid rgba(30,23,18,.14);
  border-radius: 8px; overflow: hidden;
  display: grid; grid-template-columns: 5fr 7fr;
  height: 260px;
  cursor: pointer; transition: box-shadow .3s, border-color .3s;
}
.blog-card:hover { box-shadow: 0 10px 25px rgba(30,23,18,.1); border-color: rgba(27,58,92,.3); }
.blog-card-media { position: relative; height: 100%; overflow: hidden; background: var(--color-cream-dark); }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.blog-card:hover .blog-card-media img { transform: scale(1.04); }
.blog-card-tag {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--color-accent); color: #fff;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.3rem 0.65rem;
}
.blog-card-body { padding: 1.75rem 2rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; overflow: hidden; }
.blog-card-body .meta { font-size: 0.66rem; font-weight: 500; color: rgba(30,23,18,.5); display: flex; gap: 1rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: .04em; }
.blog-card-body h3 {
  font-family: var(--font-subtitle); font-size: 1.4rem; font-weight: 600; margin-bottom: 0.5rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.25;
}
.blog-card-body .summary {
  font-size: 0.82rem; color: rgba(30,23,18,.65); line-height: 1.6;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.blog-card-footer { border-top: 1px solid rgba(30,23,18,.1); padding-top: 1rem; display: flex; justify-content: space-between; align-items: center; }
.read-more { font-family: var(--font-subtitle); font-size: 0.85rem; font-weight: 600; color: var(--color-accent); }

.article { background: #fff; border: 1px solid rgba(30,23,18,.14); border-radius: 8px; padding: 2.5rem; }
.article-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(30,23,18,.1); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.back-link { background: none; border: none; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(30,23,18,.55); }
.back-link:hover { color: var(--color-accent); }
.article-tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.6rem; font-weight: 700; background: var(--color-accent); color: #fff;
  padding: 0.3rem 0.65rem; text-transform: uppercase;
  margin-bottom: 1rem;
}
.article-title { font-family: var(--font-title); font-size: 2.5rem; font-weight: 600; line-height: 1.2; margin-bottom: 1rem; }
.article-author { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.article-author img { width: 2rem; height: 2rem; object-fit: cover; border: 1px solid rgba(30,23,18,.15); border-radius: 50%; }
.article-author .name { display: block; font-size: 0.8rem; font-weight: 700; }
.article-author .date { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(30,23,18,.4); margin-top: 2px; }
.article-image { border: 1px solid rgba(30,23,18,.2); max-height: 420px; overflow: hidden; margin-bottom: 1.5rem; background: var(--color-cream-dark); }
.article-image img { width: 100%; height: 100%; object-fit: cover; max-height: 420px; }
.article-body { font-size: 0.98rem; line-height: 1.8; max-width: 42rem; margin: 0 auto; }
.article-body p { margin-bottom: 1.25rem; }
.article-body p.quote { font-family: var(--font-paragraph); font-style: italic; font-size: 1.15rem; color: var(--color-accent); border-left: 2px solid var(--color-accent); padding-left: 1.1rem; }

.article-comments { max-width: 42rem; margin: 2.5rem auto 0; border-top: 1px solid rgba(30,23,18,.14); padding-top: 2rem; }
.article-comments h4 { font-family: var(--font-subtitle); font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }
.comment { border-bottom: 1px solid rgba(30,23,18,.06); padding-bottom: 1.1rem; margin-bottom: 1.1rem; }
.comment:last-child { border-bottom: none; margin-bottom: 0; }
.comment-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem; }
.comment-author { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 600; }
.comment-author.is-artist { color: var(--color-accent); }
.badge-artist { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; background: rgba(27,58,92,.1); color: var(--color-accent); border: 1px solid rgba(27,58,92,.3); padding: 1px 5px; margin-left: 0.4rem; }
.comment-date { font-size: 0.6rem; color: rgba(30,23,18,.4); }
.comment-text { font-size: 0.8rem; color: rgba(30,23,18,.72); line-height: 1.6; padding-left: 1.6rem; }
.comments-cta { text-align: center; font-size: 0.72rem; color: rgba(30,23,18,.55); margin-top: 1.5rem; }
.comments-cta a { text-decoration: underline; color: var(--color-accent); }

/* ---------- Lector de artículo (overlay de pantalla completa) ---------- */
.article-reader { position: fixed; inset: 0; z-index: 70; background: var(--color-cream-light); }
.article-reader[hidden] { display: none; }
.article-reader-scroll { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.article-reader-inner { max-width: 56rem; margin: 0 auto; padding: 2.5rem 2rem 5rem; }
.article-reader-close {
  position: fixed; top: 1.25rem; right: 1.5rem; z-index: 71;
  background: var(--color-cream-light); border: 1px solid rgba(30,23,18,.2);
  padding: 0.6rem; color: var(--color-ink); box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.article-reader-close:hover { border-color: var(--color-accent); color: var(--color-accent); }

@media (max-width: 800px) {
  .blog-card { grid-template-columns: 1fr; height: auto; }
  .blog-card-media { height: 200px; }
  .article { padding: 1.5rem; }
  .article-title { font-size: 1.9rem; }
}

/* ---------- Store ---------- */

/* Grilla masonry (igual criterio que el portafolio): cada obra se ve completa, en
   su proporción natural, sin recorte. La info completa se revela al hover/focus
   sobre una capa oscura encima de la imagen; al hacer click se abre la ficha
   completa (mismo modal del portafolio) con los botones de compra. */
.store-grid { columns: 3 16rem; column-gap: 1.75rem; }
.store-card {
  position: relative;
  break-inside: avoid;
  margin-bottom: 1.75rem;
  cursor: pointer;
  overflow: hidden;
  background: var(--color-cream-dark);
  border: 1px solid rgba(30,23,18,.12);
}
.store-card img { width: 100%; height: auto; display: block; transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .5s ease; }
.store-card:hover img, .store-card:focus-visible img { transform: scale(1.04); opacity: 0.2; }
.status-badge { position: absolute; top: 1rem; right: 1rem; z-index: 1; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.6rem; border: 1px solid; }
.status-badge.disponible { background: #ecfdf5; color: #065f46; border-color: rgba(16,185,129,.4); }
/* Hover tipo "ficha de galería" (obra + tienda): la obra se desvanece y una capa
   clara con la info básica (título, técnica, medidas) aparece centrada encima —
   mismo tratamiento en portafolio y tienda para que se sientan una sola familia. */
.artwork-overlay {
  position: absolute; inset: 0;
  background: rgba(253,250,240,.55);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: 0.35rem;
  padding: 1.75rem;
  opacity: 0;
  transition: opacity .3s ease;
}
.store-card:hover .artwork-overlay, .store-card:focus-visible .artwork-overlay,
.bento-item:hover .artwork-overlay, .bento-item:focus-visible .artwork-overlay { opacity: 1; }
.artwork-overlay h3 { font-family: var(--font-title); font-style: italic; font-size: 1.3rem; font-weight: 600; color: var(--color-ink); }
.artwork-overlay .technique-label { font-size: 0.78rem; color: rgba(30,23,18,.7); }
.artwork-overlay .dimensions-label { font-size: 0.76rem; color: rgba(30,23,18,.55); margin-bottom: 0.4rem; }
.artwork-overlay .desc { font-size: 0.74rem; color: rgba(30,23,18,.65); line-height: 1.5; max-width: 20rem; margin-bottom: 0.5rem; }
.artwork-overlay .edition-badge { margin-bottom: 0.5rem; }
.artwork-overlay .price-line { font-family: var(--font-subtitle); font-size: 0.82rem; font-weight: 700; color: var(--color-accent); margin-bottom: 0.6rem; }
.modal-prices { display: grid; gap: 0.5rem; margin-bottom: 1.1rem; }
.modal-prices div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(30,23,18,.12); }
.modal-prices .label { font-size: 0.76rem; color: rgba(30,23,18,.65); }
.modal-prices .value { font-family: var(--font-subtitle); font-size: 1rem; font-weight: 700; color: var(--color-accent); white-space: nowrap; }
.artwork-cta {
  display: inline-flex; align-items: center; gap: 0.35rem; width: fit-content;
  font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-accent); border-bottom: 1px solid var(--color-accent); padding-bottom: 2px;
}
.edition-badge {
  display: inline-block;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-accent); background: rgba(27,58,92,.08);
  border: 1px solid rgba(27,58,92,.2); padding: 0.25rem 0.55rem;
}
.modal-footer-actions { display: flex; gap: 0.6rem; }
.modal-footer-actions .btn { flex: 1; padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.76rem; }
.modal-edition-note { text-align: center; font-size: 0.68rem; color: rgba(30,23,18,.5); margin-top: 0.75rem; }

.store-info { margin-top: 3.5rem; background: #fff; border: 1px solid rgba(30,23,18,.14); border-radius: 8px; padding: 2rem; }
.store-info h3 { font-family: var(--font-subtitle); font-size: 1.4rem; font-weight: 600; border-bottom: 1px solid rgba(30,23,18,.1); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.store-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; font-size: 0.78rem; color: rgba(30,23,18,.68); line-height: 1.6; }
.store-info-grid strong { display: block; font-family: var(--font-subtitle); font-size: 0.95rem; color: var(--color-ink); margin-bottom: 0.4rem; font-weight: 600; }

@media (max-width: 700px) {
  .store-grid { columns: 1; }
  .store-info-grid { grid-template-columns: 1fr; }
}

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 4rem; align-items: flex-start; }
.about-photo-frame { background: #fff; border: 1px solid rgba(30,23,18,.14); border-radius: 8px; padding: 0.75rem; }
.about-photo { aspect-ratio: 1/1; background: var(--color-cream-dark); overflow: hidden; position: relative; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-photo-caption { position: absolute; bottom: 1rem; left: 1rem; background: var(--color-ink); color: var(--color-cream-light); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.4rem 0.7rem; }
.about-specs { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid rgba(30,23,18,.1); display: flex; justify-content: space-between; font-size: 0.72rem; color: rgba(30,23,18,.6); }
.about-specs span { display: inline-flex; align-items: center; gap: 0.4rem; }
.about-social-card { margin-top: 1.5rem; background: var(--color-cream); border: 1px solid rgba(30,23,18,.14); border-radius: 8px; padding: 1.5rem; }
.about-social-card h4 { font-family: var(--font-subtitle); font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; }
.about-social-card a { display: flex; align-items: center; gap: 0.6rem; font-size: 0.75rem; color: rgba(30,23,18,.7); margin-bottom: 0.5rem; }
.about-social-card a:hover { color: var(--color-accent); }

.manifest { font-family: var(--font-title); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.35; margin-bottom: 1.25rem; color: var(--color-ink); }
.bio-copy { font-size: 0.92rem; line-height: 1.75; }
.bio-copy p { margin-bottom: 1rem; }
.bio-copy strong { color: var(--color-accent); }

@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }

/* ---------- Mail Club (banda "About") ---------- */
/* Banner-teaser en index.html: solo foto + titular + botón que enlaza a la página
   dedicada postales.html (que reutiliza estas mismas clases para su propio banner).
   align-items:center evita el desajuste que había antes entre la foto (alto fijo por
   aspect-ratio) y una columna de texto que podía quedar más alta o más baja según
   el contenido. */
.mc-banner { background: var(--color-accent); color: #fff; position: relative; overflow: hidden; padding: 4.5rem 0; margin-bottom: 3rem; }
.mc-banner::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 8% 10%, rgba(255,255,255,.09), transparent 55%); pointer-events: none; }
.mc-banner-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 3rem;
  align-items: center;
}
.mc-banner-photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}
.mc-banner-photo img { width: 100%; height: 100%; object-fit: contain; }

.mc-banner-text { max-width: 34rem; }
.mc-banner-text .eyebrow { margin-bottom: 1.25rem; }
.mc-banner-text h2 { font-family: var(--font-title); font-weight: 700; font-size: 2.1rem; line-height: 1.3; margin-bottom: 1.25rem; }
.mc-banner-text p { font-size: 0.95rem; line-height: 1.75; color: rgba(255,255,255,.8); }
.pill { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); border-radius: 100px; padding: 0.4rem 0.8rem; margin: 0 0 1.75rem; }
.mc-banner-text .pill { display: flex; width: fit-content; margin-bottom: 2rem; }

/* Cupos del mes + cifras de impacto: mismo contenido que antes vivía en el banner
   azul, reubicado en una tarjeta clara dentro de postales.html. */
.mc-info-card { max-width: 68rem; margin: 0 auto 2.5rem; background: #fff; border: 1px solid rgba(30,23,18,.14); padding: 1.75rem 2rem; }
.mc-countdown-label { font-size: 0.78rem; color: rgba(30,23,18,.6); }
.mc-countdown-clock { display: flex; gap: 1.25rem; margin-top: 0.75rem; }
.mc-countdown-clock > div { text-align: center; }
.mc-countdown-clock .num { display: block; font-family: var(--font-subtitle); font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-accent); }
.mc-countdown-clock .unit { display: block; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(30,23,18,.5); margin-top: 0.15rem; }

.mc-info-divider { height: 1px; background: rgba(30,23,18,.1); margin: 1.5rem 0; }

.mc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.mc-stat .num { display: block; font-family: var(--font-subtitle); font-size: 1.9rem; font-weight: 700; color: var(--color-ink); }
.mc-stat .label { display: block; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(30,23,18,.5); margin-top: 0.35rem; }
.mc-stats-note { font-size: 0.68rem; color: rgba(30,23,18,.45); font-style: italic; margin-top: 0.85rem; }

.mc-postal-note {
  display: flex; gap: 1rem; align-items: flex-start;
  max-width: 68rem; margin: -2rem auto 2.5rem;
  background: #fff; border: 1px solid rgba(30,23,18,.14);
  padding: 1.25rem 1.5rem; color: var(--color-accent);
}
.mc-postal-note strong { display: block; font-family: var(--font-subtitle); font-size: 0.95rem; color: var(--color-ink); margin-bottom: 0.25rem; }
.mc-postal-note p { font-size: 0.8rem; color: rgba(30,23,18,.65); line-height: 1.55; }

/* Subtítulo reutilizado por los bloques dentro de Postales por Colombia (Qué
   recibes, Impacto) — mismo patrón eyebrow+título que el resto del sitio, a menor
   escala porque viven dentro de una sección ya rotulada. */
.mc-subhead { max-width: 68rem; margin: 0 auto 1.5rem; text-align: center; }
.mc-subtitle { font-family: var(--font-title); font-size: 1.5rem; font-weight: 700; color: var(--color-ink); margin-top: 0.5rem; }

.mc-contents { max-width: 68rem; margin: 0 auto 3rem; }
.mc-contents-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.mc-content-item {
  background: #fff; border: 1px solid rgba(30,23,18,.14); padding: 1.5rem 1.25rem;
}
.mc-step-n { display: block; font-family: var(--font-subtitle); font-size: 0.72rem; font-weight: 700; color: var(--color-accent); letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.mc-content-item svg { color: var(--color-accent); margin-bottom: 0.85rem; }
.mc-content-item strong { display: block; font-family: var(--font-subtitle); font-size: 0.92rem; font-weight: 600; color: var(--color-ink); margin-bottom: 0.4rem; }
.mc-content-item p { font-size: 0.76rem; line-height: 1.6; color: rgba(30,23,18,.62); }

.pill-outline { background: rgba(27,58,92,.06); border-color: rgba(27,58,92,.25); color: var(--color-accent); margin: 0; }

/* Impacto: 40% + objetivos del proyecto, entre los planes y el formulario */
.mc-impact {
  max-width: 68rem; margin: 0 auto 3rem;
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 0;
  background: #fff; border: 1px solid rgba(30,23,18,.14);
}
.mc-impact-stat { padding: 2.25rem 2rem; border-right: 1px solid rgba(30,23,18,.1); }
.mc-impact-number { display: block; font-family: var(--font-title); font-size: 3.5rem; font-weight: 700; color: var(--color-accent); line-height: 1; margin-bottom: 0.75rem; }
.mc-impact-stat > p:first-of-type { font-size: 0.92rem; line-height: 1.6; color: var(--color-ink); margin-bottom: 1rem; }
.mc-impact-goals { padding: 2.25rem 2rem; }
.mc-goals-list { list-style: none; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: 1.25rem; }
.mc-goals-list li { display: flex; gap: 1rem; align-items: flex-start; }
.mc-goals-list .mc-step-n { margin-bottom: 0; flex-shrink: 0; }
.mc-goals-list strong { display: block; font-family: var(--font-subtitle); font-size: 0.9rem; font-weight: 600; color: var(--color-ink); margin-bottom: 0.25rem; }
.mc-goals-list p { font-size: 0.78rem; line-height: 1.6; color: rgba(30,23,18,.62); }

@media (max-width: 900px) {
  .mc-contents-grid { grid-template-columns: 1fr 1fr; }
  .mc-impact { grid-template-columns: 1fr; }
  .mc-impact-stat { border-right: none; border-bottom: 1px solid rgba(30,23,18,.1); }
}
@media (max-width: 560px) {
  .mc-contents-grid { grid-template-columns: 1fr; }
}

.mc-selected-plan {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.4rem;
  background: var(--color-cream); border: 1px solid rgba(30,23,18,.12);
  padding: 0.85rem 1rem; margin: 1rem 0 0.5rem;
}
.mc-selected-plan .label { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(30,23,18,.5); }
.mc-selected-plan .value { font-family: var(--font-subtitle); font-size: 0.95rem; font-weight: 600; color: var(--color-accent); }

.mc-success { text-align: center; padding: 1.5rem 0.5rem; }
.mc-success svg { margin: 0 auto 1rem; }
.mc-success p { font-size: 0.88rem; line-height: 1.7; color: rgba(30,23,18,.75); }

@media (max-width: 700px) {
  .mc-banner-inner { grid-template-columns: 1fr; gap: 2rem; }
  .mc-banner-photo { max-width: 16rem; margin: 0 auto; }
}

/* ---------- postales.html: layout tipo página de producto ---------- */
/* Inspirado en la estructura de una página de producto de e-commerce (imagen fija a
   la izquierda, panel de compra a la derecha con selector de plan tipo radio, aviso
   destacado y CTA) en vez del acordeón de la vuelta anterior — más info se movió a
   un acordeón real con transición de max-height (ver .mc-accordion) para que abrir
   cada bloque se sienta suave en vez de aparecer de golpe. */

/* Entrada de la página: fade + slide-up con easing tipo "ease-out-expo" (curva usada
   en la mayoría de componentes de entrada pulidos, tipo los de 21st.dev) en vez de
   una transición linear — se nota mucho más suave. Como esta página no carga
   js/main.js, es una animación de una sola vez al cargar, no un scroll-reveal. */
@keyframes mc-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.mc-notice-bar, .mc-product-media, .mc-product-panel, .mc-form-card {
  animation: mc-fade-up .7s cubic-bezier(.16,1,.3,1) both;
}
.mc-product-media { animation-delay: .05s; }
.mc-product-panel { animation-delay: .15s; }
.mc-form-card { animation-delay: .05s; }
@media (prefers-reduced-motion: reduce) {
  .mc-notice-bar, .mc-product-media, .mc-product-panel, .mc-form-card { animation: none; }
}

.mc-notice-bar {
  background: rgba(27,58,92,.07); border-bottom: 1px solid rgba(27,58,92,.14);
  padding: 0.7rem 1.25rem; text-align: center;
  font-family: var(--font-paragraph); font-size: 0.8rem; font-weight: 600; color: var(--color-accent-dark);
}
.mc-notice-bar .mc-countdown-clock { display: inline-flex; gap: 0.15rem; margin-left: 0.6rem; vertical-align: middle; }
.mc-notice-bar .mc-countdown-clock > div { display: inline-flex; align-items: baseline; gap: 0.15rem; margin-right: 0.55rem; }
.mc-notice-bar .mc-countdown-clock .num { font-family: var(--font-subtitle); font-weight: 700; font-variant-numeric: tabular-nums; }
.mc-notice-bar .mc-countdown-clock .unit { font-size: 0.6rem; text-transform: uppercase; opacity: .65; }

.mc-product {
  max-width: 76rem; margin: 3rem auto; padding: 0 2rem;
  display: grid; grid-template-columns: minmax(280px, 32rem) 1fr; gap: 3.5rem; align-items: start;
}
.mc-product-media { position: sticky; top: calc(var(--utility-height) + var(--header-height-desktop) + 1.5rem); }
.mc-product-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid rgba(30,23,18,.12); }

.mc-product-panel .eyebrow { margin-bottom: 1rem; }
.mc-product-title { font-family: var(--font-title); font-size: 1.85rem; font-weight: 700; line-height: 1.3; color: var(--color-ink); margin-bottom: 1rem; }
.mc-product-panel .pill { margin: 0 0 1.75rem; }

.mc-plan-radio-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.mc-plan-radio {
  position: relative; display: flex; align-items: center; gap: 0.9rem;
  border: 1px solid rgba(30,23,18,.18); background: #fff;
  padding: 1rem 1.15rem; cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.mc-plan-radio:hover { border-color: var(--color-accent); }
.mc-plan-radio.selected { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.mc-plan-radio input[type="radio"] { width: 1.1rem; height: 1.1rem; accent-color: var(--color-accent); flex-shrink: 0; }
.mc-plan-radio-body { flex: 1; }
.mc-plan-radio-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.mc-plan-radio-name { font-family: var(--font-subtitle); font-size: 0.98rem; font-weight: 600; color: var(--color-ink); }
.mc-plan-radio-price { font-family: var(--font-subtitle); font-size: 1rem; font-weight: 700; color: var(--color-accent); }
.mc-plan-radio-note { font-size: 0.76rem; color: rgba(30,23,18,.55); margin-top: 0.25rem; }
.mc-plan-radio-tag {
  position: absolute; top: -0.6rem; left: 1rem;
  background: var(--color-accent); color: #fff;
  font-size: 0.56rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem;
}

.mc-callout {
  display: flex; gap: 0.75rem; align-items: flex-start;
  background: #fff9e8; border: 1px solid rgba(217,164,6,.3);
  padding: 0.9rem 1rem; font-size: 0.78rem; color: #6b5405; line-height: 1.55; margin-bottom: 1.5rem;
}
.mc-callout svg { flex-shrink: 0; margin-top: 0.1rem; color: #a8820a; }

.mc-feature-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; margin: 1.75rem 0 0.5rem; }
.mc-feature-list li { display: flex; gap: 0.85rem; align-items: flex-start; }
.mc-feature-list svg { flex-shrink: 0; color: var(--color-accent); margin-top: 0.15rem; }
.mc-feature-list strong { display: block; font-family: var(--font-subtitle); font-size: 0.88rem; font-weight: 600; color: var(--color-ink); }
.mc-feature-list p { font-size: 0.78rem; line-height: 1.55; color: rgba(30,23,18,.6); margin-top: 0.15rem; }

/* Acordeón: cada panel arranca en max-height:0 y JS calcula su scrollHeight real al
   abrir (ver setupAccordion en mail-club.js) — eso permite una transición fluida sin
   tener que fijar una altura arbitraria de antemano. */
.mc-accordion { border-top: 1px solid rgba(30,23,18,.14); margin-top: 2rem; }
.mc-accordion-item { border-bottom: 1px solid rgba(30,23,18,.14); }
.mc-accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 1.1rem 0.1rem; font-family: var(--font-subtitle); font-size: 0.92rem; font-weight: 600; color: var(--color-ink);
}
.mc-accordion-trigger svg { flex-shrink: 0; color: var(--color-accent); transition: transform .35s cubic-bezier(.4,0,.2,1); }
.mc-accordion-item.open .mc-accordion-trigger svg { transform: rotate(180deg); }
.mc-accordion-panel { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.4,0,.2,1); }
.mc-accordion-panel-inner { padding: 0 0.1rem 1.25rem; font-size: 0.82rem; line-height: 1.65; color: rgba(30,23,18,.68); }
.mc-accordion-panel-inner p + p { margin-top: 0.85rem; }
.mc-accordion-panel-inner .payment-methods,
.mc-accordion-panel-inner .mc-goals-list,
.mc-accordion-panel-inner .mc-stats { margin-top: 1.1rem; }

.mc-form-card {
  max-width: 40rem; margin: 1rem auto 3rem;
  background: #fff; border: 1px solid rgba(30,23,18,.14); border-radius: 8px; padding: 2rem;
}
.mc-form-card h3 { font-family: var(--font-subtitle); font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; }
.mc-card-note { font-size: 0.84rem; color: rgba(30,23,18,.65); line-height: 1.6; margin-bottom: 1rem; }
.mc-card-note a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.mc-card-note a:hover { color: var(--color-accent-dark); }

.mc-form-subhead { font-family: var(--font-subtitle); font-size: 1.1rem; font-weight: 700; color: var(--color-ink); margin-bottom: 0.4rem; }

.payment-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; margin: 1.1rem 0; }
.payment-methods li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; color: rgba(30,23,18,.78); }
.payment-method-icon {
  width: 1.9rem; height: 1.9rem; flex-shrink: 0; border-radius: 50%;
  background: var(--color-cream); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
}

.form-row { margin-bottom: 1.25rem; }
.form-row label { display: block; font-size: 0.64rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(30,23,18,.55); margin-bottom: 0.4rem; }
.form-row input[type="text"], .form-row input[type="email"], .form-row input[type="tel"], .form-row select, .form-row textarea {
  width: 100%; background: var(--color-cream); border: 1px solid rgba(30,23,18,.18);
  border-radius: 6px;
  padding: 0.75rem; font-size: 0.85rem; font-family: var(--font-paragraph); color: var(--color-ink);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--color-accent); }
.form-row-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.checkbox-row { display: flex; align-items: flex-start; gap: 0.6rem; }
.checkbox-row input { margin-top: 0.2rem; accent-color: var(--color-accent); flex-shrink: 0; }
.checkbox-row label { font-family: var(--font-paragraph); text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 0.78rem; color: rgba(30,23,18,.68); }
.file-row input[type="file"] { width: 100%; max-width: 100%; font-size: 0.78rem; }
.form-submit { width: 100%; justify-content: center; margin-top: 0.5rem; }
.form-note { font-size: 0.68rem; color: rgba(30,23,18,.45); margin-top: 0.75rem; text-align: center; }
.form-status { font-size: 0.8rem; margin-top: 1rem; padding: 0.75rem; text-align: center; display: none; }
.form-status.show { display: block; }
.form-status.success { background: #ecfdf5; color: #065f46; border: 1px solid rgba(16,185,129,.3); }
.form-status.error { background: #fef2f2; color: #991b1b; border: 1px solid rgba(220,38,38,.3); }

@media (max-width: 560px) {
  .payment-methods { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .form-row-inline { grid-template-columns: 1fr; }
  .mc-banner { padding: 3.5rem 0; }
  .mc-banner-text h2 { font-size: 2rem; }
  .mc-stats { grid-template-columns: repeat(2, 1fr); }
  .mc-countdown-clock { gap: 0.85rem; }
  .mc-postal-note { margin-left: 1rem; margin-right: 1rem; }
  .mc-product { grid-template-columns: 1fr; gap: 2rem; padding: 0 1.25rem; margin: 2rem auto; }
  .mc-product-media { position: static; }
  .mc-product-media img { aspect-ratio: 16 / 10; }
  .mc-form-card { margin-left: 1.25rem; margin-right: 1.25rem; padding: 1.5rem; }
}

@media (max-width: 560px) {
  .mc-product-title { font-size: 1.55rem; }
  .mc-plan-radio { padding: 0.85rem; }
  .mc-notice-bar { font-size: 0.72rem; padding: 0.6rem 1rem; }
}

@media (max-width: 480px) {
  .mc-banner-text h2 { font-size: 1.6rem; }
  .mc-stats { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .mc-stat .num { font-size: 1.5rem; }
  .mc-countdown-clock { gap: 0.6rem; }
  .mc-countdown-clock .num { font-size: 1.4rem; }
  .mc-plan-card { padding: 1.25rem; }
}

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 3.5rem; align-items: flex-start; }
.contact-card { background: #fff; border: 1px solid rgba(30,23,18,.14); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; }
.contact-card h3 { font-family: var(--font-subtitle); font-size: 1.15rem; font-weight: 700; border-bottom: 1px solid rgba(30,23,18,.1); padding-bottom: 0.75rem; margin-bottom: 1rem; }
.contact-info-item { display: flex; gap: 0.9rem; align-items: flex-start; margin-bottom: 1rem; font-size: 0.74rem; color: rgba(30,23,18,.68); line-height: 1.5; }
.contact-info-item .item-title { display: block; font-family: var(--font-subtitle); font-size: 0.85rem; font-weight: 700; color: var(--color-ink); }
.contact-channels { background: var(--color-cream); border: 1px solid rgba(30,23,18,.14); border-radius: 8px; padding: 1.5rem; }
.contact-channels h4 { font-family: var(--font-subtitle); font-size: 1rem; font-weight: 700; }
.contact-channels a { display: flex; align-items: center; gap: 0.6rem; font-size: 0.75rem; color: rgba(30,23,18,.72); margin-top: 0.75rem; }
.contact-channels a:hover { color: var(--color-accent); }
.contact-form-card { background: #fff; border: 1px solid rgba(30,23,18,.14); border-radius: 8px; padding: 2rem; }
.contact-form-title { font-family: var(--font-subtitle); font-size: 1.15rem; font-weight: 700; border-bottom: 1px solid rgba(30,23,18,.1); padding-bottom: 0.75rem; margin-bottom: 1.25rem; }
.success-state { text-align: center; padding: 2.5rem 1rem; display: none; }
.success-state.show { display: block; }
.success-state h3 { font-family: var(--font-subtitle); font-size: 1.5rem; font-weight: 700; margin: 1rem 0 0.5rem; }
.success-state p { font-size: 0.84rem; color: rgba(30,23,18,.6); max-width: 24rem; margin: 0 auto 1rem; line-height: 1.6; }
#contact-form.hidden { display: none; }

@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  min-height: 22rem;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
}
.site-footer-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site-footer-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,15,11,.5), rgba(18,40,63,.88)); }
.site-footer-inner { position: relative; padding: 3rem 1.5rem; }
.site-footer-name { font-family: var(--font-title); font-size: 1.3rem; font-weight: 700; }
.site-footer-socials { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 0.75rem; font-size: 0.8rem; color: rgba(255,255,255,.85); }
.site-footer-socials a:hover { color: #fff; }
.site-footer-socials .dot { color: rgba(255,255,255,.4); }
.site-footer-copy { margin-top: 1.5rem; font-size: 0.68rem; letter-spacing: 0.05em; color: rgba(255,255,255,.55); }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* Título de sección: entra con algo más de peso (translateY mayor + una pizca de
   escala) que el resto de .reveal, para que la jerarquía se sienta en el scroll:
   el titular "cae" primero y un poco más marcado, el contenido lo sigue más suave. */
.section-head.reveal {
  transform: translateY(40px) scale(0.98);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.section-head.reveal.in-view { transform: translateY(0) scale(1); }

.hidden-section { display: none; }

/* ---------- Accesibilidad: respeta "reducir movimiento" del sistema ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition-delay: 0ms !important; }
}