:root {
    --orange:        #E4A85A;
    --orange-deep:   #D6953F;
    --orange-light:  #ECBC7C;
    --forest:        #3D5234;
    --forest-deep:   #2D4226;
    --forest-darker: #213018;
    --gold:          #D4B85A;
    --gold-bright:   #E6CD78;
    --gold-pale:     #EED999;
    --terracotta:    #B1774F;
    --terracotta-d:  #8E5933;
    --terracotta-l:  #C58860;
    --cream:         #F5EFE0;
    --cream-warm:    #EFE5C8;
    --cream-pale:    #FAF6EA;
    --ink:           #2A241E;
    --ink-soft:      #5A4F45;
    --ink-light:     #7A6E60;
    --sage:          #5A6B4B;
    --sage-dark:     #3A463A;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    line-height: 1.7;
    color: var(--ink);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img { max-width: 100%; display: block; }

  /* ---------- TYPOGRAPHY ---------- */
  .serif { font-family: 'Cormorant Garamond', serif; font-weight: 400; }
  .italic { font-family: 'Lora', serif; font-style: italic; font-weight: 400; }
  .kicker {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 24px;
  }

  /* ---------- SECTION LAYOUT ---------- */
  section { padding: clamp(70px, 12vw, 130px) clamp(24px, 6vw, 70px); }
  .container { max-width: 760px; margin: 0 auto; }
  .container-wide { max-width: 1080px; margin: 0 auto; }
  .center { text-align: center; }

  h1, h2, h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    margin: 0;
    line-height: 1.05;
    letter-spacing: -0.005em;
  }

  /* Ornament */
  .orn {
    display: inline-flex; align-items: center;
    gap: 12px; margin: 18px auto;
    color: var(--gold);
  }
  .orn::before, .orn::after {
    content: ""; display: block;
    width: 60px; height: 1px;
    background: currentColor; opacity: 0.6;
  }
  .orn .d {
    width: 7px; height: 7px;
    transform: rotate(45deg);
    border: 1px solid currentColor;
    position: relative;
  }
  .orn .d::after { content: ""; position: absolute; inset: 2px; background: currentColor; }

  /* Underline accent */
  .underline {
    display: inline-block;
    width: 60px; height: 1px;
    background: currentColor;
    opacity: 0.6;
    margin: 16px 0;
  }

  /* Reveal animation */
  .reveal {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.85s ease, transform 0.85s ease;
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }

  /* ============================================ */
  /* PAGE 1 — COVER (orange w/ green logo card)   */
  /* ============================================ */
  .cover {
    min-height: 100vh;
    background:
      radial-gradient(circle at 8% 18%, var(--orange-light) 0%, transparent 38%),
      radial-gradient(circle at 92% 72%, var(--orange-light) 0%, transparent 32%),
      var(--orange);
    color: var(--ink);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 70px clamp(24px, 6vw, 70px);
    position: relative;
  }
  .cover .top-label {
    font-size: 13px;
    letter-spacing: 0.45em;
    color: var(--terracotta-d);
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: clamp(40px, 6vw, 70px);
    text-align: center;
  }
  .brand-card {
    background: var(--forest);
    padding: clamp(40px, 7vw, 80px) clamp(40px, 8vw, 90px);
    border-radius: 4px;
    text-align: center;
    color: var(--cream);
    box-shadow: 0 24px 48px rgba(45, 66, 38, 0.18);
    max-width: 460px;
    width: 100%;
    animation: fadeUp 1s ease 0.2s both;
  }
  .brand-card .sun {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(212, 184, 90, 0.35);
    margin: 0 auto 36px;
    position: relative;
  }
  .brand-card .sun::after {
    content: "";
    position: absolute; inset: 14px;
    background: var(--gold-pale);
    border-radius: 50%;
  }
  .brand-card .name {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(56px, 9vw, 84px);
    line-height: 0.95;
    margin: 0;
  }
  .brand-card .name .ser { display: block; font-weight: 400; color: var(--cream); }
  .brand-card .name .ena {
    display: block; font-style: italic;
    color: var(--gold-pale);
    margin-top: -6px;
  }
  .brand-card .divider {
    width: 40px; height: 1px;
    background: var(--cream); opacity: 0.6;
    margin: 22px auto;
  }
  .brand-card .sub {
    font-size: 11px;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--cream);
    opacity: 0.85;
  }
  .cover .tagline {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(34px, 6vw, 54px);
    line-height: 1.2;
    color: var(--terracotta-d);
    text-align: center;
    margin: clamp(50px, 7vw, 80px) auto 0;
    animation: fadeUp 1s ease 0.5s both;
  }
  .cover .tag-divider {
    width: 50px; height: 1px;
    background: var(--terracotta-d);
    opacity: 0.5;
    margin: 30px auto 18px;
  }
  .cover .encuentros {
    font-size: 12px;
    letter-spacing: 0.45em;
    color: var(--terracotta-d);
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    animation: fadeUp 1s ease 0.7s both;
  }
  .cover-footer {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 20px clamp(24px, 6vw, 70px);
    display: flex; justify-content: space-between;
    border-top: 1px solid rgba(142, 89, 51, 0.25);
    font-size: 14px;
    color: var(--terracotta-d);
  }
  .cover-footer a { color: inherit; text-decoration: none; }
  .cover-footer a:hover { text-decoration: underline; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ============================================ */
  /* PAGE 2 — ¿QUÉ ES SER EN ARTE?                */
  /* ============================================ */
  .que-es { background: var(--cream-warm); color: var(--ink); }
  .que-es .kicker { color: var(--terracotta-d); }
  .que-es h2 {
    font-size: clamp(52px, 8vw, 82px);
    color: var(--ink);
    margin-bottom: 24px;
  }
  .que-es h2 em { font-style: italic; font-weight: 500; }
  .que-es .quote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(28px, 4.5vw, 42px);
    line-height: 1.35;
    color: var(--terracotta-d);
    margin: 50px auto 60px;
    max-width: 540px;
    text-align: center;
  }
  .que-es .body {
    text-align: left;
    max-width: 620px;
    margin: 0 auto;
  }
  .que-es .body p {
    font-size: 17px;
    line-height: 1.85;
    color: var(--ink-soft);
    margin: 22px 0;
  }
  .que-es .body .intro {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 22px;
    color: var(--ink);
    line-height: 1.5;
    text-align: center;
    margin-bottom: 36px;
  }
  .que-es .body .closing {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 22px;
    color: var(--terracotta-d);
    text-align: center;
    margin-top: 40px;
    line-height: 1.5;
  }

  /* ============================================ */
  /* PAGE 3 — CUATRO MOMENTOS                     */
  /* ============================================ */
  .momentos {
    background: var(--cream);
    color: var(--ink);
  }
  .momentos .kicker { color: var(--terracotta-d); }
  .momentos h2 {
    font-size: clamp(52px, 8vw, 80px);
    color: var(--ink);
  }
  .momentos h2 em { font-style: italic; }
  .momentos .intro {
    text-align: center;
    color: var(--ink-soft);
    max-width: 560px;
    margin: 28px auto 64px;
    font-size: 17px;
  }
  .momentos .list {
    max-width: 820px; margin: 0 auto;
  }
  .momento-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 30px;
    padding: 30px 0;
    border-top: 1px solid rgba(142, 89, 51, 0.2);
    align-items: start;
  }
  .momento-row:last-child { border-bottom: 1px solid rgba(142, 89, 51, 0.2); }
  .momento-row .num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 56px;
    color: var(--terracotta);
    line-height: 1;
    font-weight: 400;
  }
  .momento-row h3 {
    font-size: 28px;
    color: var(--ink);
    margin-bottom: 8px;
    line-height: 1.2;
  }
  .momento-row p {
    font-size: 16px;
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.65;
  }
  @media (max-width: 600px) {
    .momento-row {
      grid-template-columns: 70px 1fr;
      gap: 18px;
    }
    .momento-row .num { font-size: 44px; }
    .momento-row h3 { font-size: 22px; }
  }

  /* ============================================ */
  /* PAGE 4 — ¿QUÉ TE LLEVÁS?                     */
  /* ============================================ */
  .llevas { background: var(--cream-warm); }
  .llevas .kicker { color: var(--terracotta-d); }
  .llevas h2 {
    font-size: clamp(52px, 8vw, 82px);
    color: var(--ink);
  }
  .llevas h2 em { font-style: italic; }
  .llevas .lead {
    text-align: center;
    color: var(--ink-soft);
    max-width: 640px;
    margin: 30px auto 50px;
    font-size: 17px;
    line-height: 1.75;
  }
  .llevas .pull {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(30px, 5vw, 44px);
    text-align: center;
    color: var(--terracotta-d);
    margin: 50px auto;
    line-height: 1.3;
  }
  .llevas .pull .q {
    color: var(--ink);
    display: block;
    margin-top: 6px;
  }
  .llevas .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 860px;
    margin: 50px auto 0;
  }
  @media (max-width: 600px) {
    .llevas .grid { grid-template-columns: 1fr; }
  }
  .benefit {
    background: var(--cream-pale);
    padding: 32px 28px;
    border-radius: 4px;
    border-top: 3px solid var(--terracotta);
  }
  .benefit h4 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 12px;
    line-height: 1.2;
  }
  .benefit p {
    font-size: 15px;
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.65;
  }

  /* ============================================ */
  /* PAGE 5 — ¿QUIÉNES SOMOS?                     */
  /* ============================================ */
  .somos { background: var(--cream); }
  .somos .kicker { color: var(--terracotta-d); }
  .team {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 50px;
    margin-top: 60px;
    max-width: 980px;
    margin-left: auto; margin-right: auto;
  }
  @media (max-width: 700px) {
    .team { grid-template-columns: 1fr; gap: 60px; }
  }
  .person { text-align: center; }
  .person .photo {
    width: 220px; height: 220px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 28px;
    box-shadow: 0 12px 32px rgba(58, 70, 58, 0.22);
  }
  .person .role {
    font-size: 11px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--terracotta-d);
    margin-bottom: 6px;
    font-weight: 500;
  }
  .person h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 38px;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 22px;
  }
  .person ul {
    list-style: none; padding: 0; margin: 0;
    text-align: left;
    max-width: 360px;
    margin: 0 auto;
  }
  .person li {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.65;
    margin-bottom: 14px;
    padding-left: 16px;
    position: relative;
  }
  .person li::before {
    content: "—";
    position: absolute; left: 0;
    color: var(--terracotta);
  }
  .joint-quote {
    background: var(--cream-warm);
    padding: 36px 40px;
    margin: 70px auto 0;
    max-width: 720px;
    border-left: 3px solid var(--terracotta);
  }
  .joint-quote p {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 21px;
    line-height: 1.55;
    margin: 0;
    color: var(--ink);
  }

  /* ============================================ */
  /* PAGE 6 — EL ESPACIO / TEMPLO DEL TESORO     */
  /* ============================================ */
  .templo {
    background: var(--terracotta);
    color: var(--cream);
  }
  .templo .kicker { color: var(--cream-warm); }
  .templo h2 {
    font-size: clamp(52px, 8.5vw, 86px);
    color: var(--cream);
    margin-bottom: 28px;
  }
  .templo h2 em {
    font-style: italic;
    color: var(--gold-pale);
  }
  .templo .lead {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(22px, 3.8vw, 30px);
    line-height: 1.5;
    color: var(--cream);
    max-width: 720px;
    margin: 0 auto 24px;
  }
  .templo .desc {
    color: var(--cream-warm);
    font-size: 15.5px;
    line-height: 1.75;
    max-width: 700px;
    margin: 0 auto;
  }
  .templo .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: 1080px;
    margin: 50px auto;
  }
  .templo .gallery img {
    width: 100%; height: 100%; object-fit: cover;
    aspect-ratio: 3/4; border-radius: 8px;
  }
  @media (max-width: 700px) {
    .templo .gallery { grid-template-columns: 1fr; max-width: 380px; }
  }

  .templo-logo {
    text-align: center;
    margin: 60px auto 30px;
  }
  .templo-logo img {
    width: clamp(260px, 32vw, 360px);
    height: auto;
    margin: 0 auto;
    display: block;
  }
  @media (max-width: 600px) {
  }
  .templo .signoff {
    text-align: center;
    margin-top: 50px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 16px;
    color: var(--cream-warm);
  }

  /* ============================================ */
  /* PAGE 7 — DEL MISTERIO                        */
  /* ============================================ */
  .misterio {
    background: var(--forest-deep);
    color: var(--cream);
  }
  .misterio .sea-logo {
    width: 90px; margin: 0 auto 24px;
    display: block;
  }
  .misterio .kicker { color: var(--gold-bright); text-align: center; }
  .misterio h2 {
    font-size: clamp(56px, 9vw, 90px);
    color: var(--cream);
    text-align: center;
  }
  .misterio h2 em { font-style: italic; color: var(--gold-bright); }
  .misterio .h2-sub {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(30px, 5vw, 46px);
    color: var(--cream);
    text-align: center;
    font-weight: 300;
    margin-top: -4px;
  }
  .misterio .question {
    margin: 36px 0 40px;
    text-align: center;
  }
  .misterio .question .a {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(22px, 3.5vw, 28px);
    color: var(--cream);
    opacity: 0.85;
  }
  .misterio .question .b {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(24px, 4vw, 32px);
    color: var(--gold-bright);
    margin-top: 6px;
  }
  .misterio .body {
    max-width: 660px; margin: 0 auto;
    text-align: center;
  }
  .misterio .body p {
    font-size: 16.5px;
    color: var(--cream);
    line-height: 1.85;
    margin: 22px 0;
  }
  .misterio .stanza {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    text-align: center;
    margin: 36px auto;
    max-width: 600px;
  }
  .misterio .stanza p {
    font-size: 20px;
    margin: 8px 0;
    color: var(--cream);
    opacity: 0.95;
    line-height: 1.5;
  }
  .misterio .pillars {
    list-style: none; padding: 0;
    margin: 50px auto;
    max-width: 600px;
  }
  .misterio .pillars li {
    margin: 24px 0;
    text-align: center;
    color: var(--cream);
  }
  .misterio .pillars li .label-row {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    color: var(--cream);
    font-weight: 500;
  }
  .misterio .pillars li .label-row::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--gold-bright);
    flex-shrink: 0;
  }
  .misterio .pillars .sep { display: none; }
  .misterio .pillars .value {
    display: block;
    margin-top: 6px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--gold-bright);
    font-size: 22px;
    line-height: 1.3;
  }
  .misterio .closing {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(28px, 4.4vw, 38px);
    color: var(--gold-bright);
    text-align: center;
    margin: 30px 0 0;
  }
  .misterio .signoff {
    text-align: center;
    margin-top: 50px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 15px;
    color: var(--cream);
    opacity: 0.8;
  }

  /* ============================================ */
  /* INSCRIPCIÓN / FORM                           */
  /* ============================================ */
  .inscripcion {
    background: var(--cream-warm);
    color: var(--ink);
  }
  .inscripcion .kicker { color: var(--terracotta-d); text-align: center; }
  .inscripcion h2 {
    text-align: center;
    font-size: clamp(48px, 7.5vw, 76px);
    color: var(--ink);
  }
  .inscripcion h2 em { font-style: italic; color: var(--terracotta); }
  .inscripcion .event-card {
    background: var(--cream-pale);
    border-left: 3px solid var(--terracotta);
    padding: 28px 32px;
    max-width: 620px;
    margin: 40px auto 50px;
    text-align: left;
  }
  .inscripcion .event-card .when {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 24px;
    color: var(--terracotta-d);
    margin: 0 0 6px;
  }
  .inscripcion .event-card .where {
    font-size: 15px;
    color: var(--ink-soft);
    margin: 0;
  }
  .form-wrap {
    max-width: 660px;
    margin: 0 auto;
    background: var(--cream-pale);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(58, 47, 35, 0.1);
  }
  .form-wrap iframe {
    width: 100%;
    min-height: 1100px;
    border: 0;
    display: block;
  }
  .form-fallback {
    text-align: center;
    margin-top: 22px;
    font-size: 14px;
    color: var(--ink-soft);
  }
  .form-fallback a {
    color: var(--terracotta-d);
    font-weight: 500;
    text-decoration: underline;
  }

  /* ============================================ */
  /* FOOTER                                       */
  /* ============================================ */
  footer {
    background: var(--forest-darker);
    color: var(--cream);
    text-align: center;
    padding: 60px 24px 40px;
  }
  footer .logo-foot { width: 70px; margin: 0 auto 18px; opacity: 0.92; }
  footer .name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    color: var(--cream);
  }
  footer .name em { font-style: italic; color: var(--gold-bright); }
  footer .tag {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 15px;
    opacity: 0.85;
    margin-top: 6px;
  }
  footer .links {
    margin-top: 28px;
    display: flex; gap: 28px; justify-content: center;
    flex-wrap: wrap;
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
  }
  footer .links a {
    color: var(--cream); text-decoration: none; opacity: 0.85;
    transition: opacity 0.2s, color 0.2s;
  }
  footer .links a:hover { opacity: 1; color: var(--gold-bright); }
  footer .copy {
    margin-top: 30px;
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    opacity: 0.4;
  }