:root {
  --cream:        #efe6d3;
  --cream-light:  #f7f0df;
  --cream-shadow: #e2d4b6;
  --teal:         #1a7b76;
  --teal-glow:    rgba(26, 123, 118, 0.28);
  --gold:         #a67c3f;
  --gold-glow:    rgba(166, 124, 63, 0.28);
  --ink:          #4a3d29;
  --ink-soft:     rgba(74, 61, 41, 0.55);
  --pb:           clamp(28px, 6vh, 72px);   /* relleno inferior del stage = hueco bajo el footer */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  min-height: 100dvh;
  background: var(--cream);
  color: var(--ink);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
body { position: relative; isolation: isolate; }

.stage-bg {
  position: fixed;
  inset: 0;
  z-index: -4;
  /* Radial: blanco en el centro que se difumina hacia marfil hacia los bordes. */
  background:
    radial-gradient(
      ellipse at 50% 42%,
      #efe7d6  0%,
      #ede3cf 34%,
      var(--cream) 58%,
      var(--cream-shadow) 100%
    );
  animation: bg-drift 26s ease-in-out infinite alternate;
}
@keyframes bg-drift {
  0%   { background-position: 50% 42%; background-size: 100% 100%; }
  100% { background-position: 50% 42%; background-size: 108% 108%; }
}

/* Mandala 2 canvas de fondo — sutil, 20 % overlay
   El canvas SIEMPRE es cuadrado (lado = max(vw, vh)) y se centra en el
   viewport. Así el fractal del shader nunca se ve achatado en móvil
   ni en desktop — conserva su redondez. */
.mandala-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.20;
  mix-blend-mode: overlay;
  overflow: hidden;
}
.mandala-bg canvas {
  /* Estado inicial cuadrado (100vmax) para que en el primer paint del
     navegador —antes de que mandala-2.js se ejecute— ya salga cuadrado.
     JS luego sobreescribe canvas.style.width/height con píxeles exactos
     de visualViewport (más precisos en iOS Safari). */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:  100vmax;
  height: 100vmax;
  display: block;
}

.stage-vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 42%,
    rgba(74, 61, 41, 0.05) 78%,
    rgba(74, 61, 41, 0.12) 100%
  );
}
.stage-grain {
  position: fixed;
  inset: -50%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.29  0 0 0 0 0.24  0 0 0 0 0.16  0 0 0 0.55 0'/></filter><rect width='260' height='260' filter='url(%23n)'/></svg>");
  background-size: 260px 260px;
}

.aura {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, 92vw);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 0;
}
.aura::before,
.aura::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  filter: blur(32px);
  animation: aura-breathe 5.5s ease-in-out infinite;
}
.aura::before {
  background: radial-gradient(
    circle at center, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.22) 45%, transparent 72%
  );
}
.aura::after {
  inset: 2%;
  background: radial-gradient(
    circle at center, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.10) 45%, transparent 72%
  );
  filter: blur(46px);
  animation-duration: 7s;
  animation-delay: -1.5s;
}
@keyframes aura-breathe {
  0%, 100% { transform: scale(0.9);  opacity: 0.55; }
  50%      { transform: scale(1.1);  opacity: 1;    }
}

.stage {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: var(--pb) clamp(20px, 5vw, 60px);
  gap: clamp(24px, 5vh, 60px);
}
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3.6vh, 40px);
  text-align: center;
  max-width: min(920px, 94vw);
}

.logo-wrap {
  position: relative;
  width: min(560px, 84vw);
  filter:
    drop-shadow(0 14px 32px rgba(74,61,41,0.22))
    drop-shadow(0 0 22px rgba(26,123,118,0.16));
  opacity: 0;
  transform: translateY(24px) scale(0.94);
  animation: logo-in 2.2s cubic-bezier(.16,.84,.22,1) 0.5s forwards;
}
.logo-wrap img {
  /* Sin filter, sin image-rendering forzado. El navegador usa
     bicubic por defecto, que es lo más nítido para downscales. */
  display: block;
  width: 100%;
  height: auto;
}
@keyframes logo-in {
  0%   { opacity: 0; transform: translateY(30px) scale(0.92); filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.rule {
  width: clamp(80px, 18vw, 160px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(166,124,63,0) 6%,
    rgba(166,124,63,0.75) 50%,
    rgba(166,124,63,0) 94%,
    transparent 100%
  );
  opacity: 0;
  transform: scaleX(0.3);
  transform-origin: center;
  animation: rule-in 1.4s cubic-bezier(.2,.7,.2,1) 1.7s forwards;
}
@keyframes rule-in { to { opacity: 1; transform: scaleX(1); } }

.tagline {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(19.6px, 2.45vw, 30px);
  line-height: 1.28;
  font-weight: 500;
  color: #6a4a1e;
  letter-spacing: 0.005em;
  opacity: 0;
  transform: translateY(10px);
  animation: tag-in 1.4s cubic-bezier(.16,.84,.22,1) 2.9s forwards;
  padding-inline: 12px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
@keyframes tag-in { to { opacity: 1; transform: translateY(0); } }

.sub {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  /* +20% y luego +30% adicional */
  font-size: clamp(17px, 1.72vw, 20.8px);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: #3d3527;
  text-indent: 0.5em;
  opacity: 0;
  animation: sub-in 1.4s ease 2.1s forwards;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
@keyframes sub-in { to { opacity: 1; } }
.sub .sep {
  color: #00C1BC;
  font-size: 1.5em;
  line-height: 0;
  vertical-align: -0.12em;
  letter-spacing: 0;
  display: inline-block;
  transform: scaleX(0.8);
}

.foot {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #3d3527;
  padding-block: 4px;
  opacity: 0;
  animation: sub-in 1.4s ease 3.3s forwards;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
.foot span { color: var(--teal); }

/* --- MENÚ SUPERIOR (variante 2: píldora expandible animada) ---
   `env(safe-area-inset-top)` empuja el nav por debajo del notch/URL bar
   en iPhones. Fallback explícito para navegadores muy viejos donde
   env() falle. */
#nav-pill {
  position: fixed;
  top: 22px;                                                              /* fallback universal */
  top: calc(env(safe-area-inset-top, 0px) + clamp(16px, 2.6vh, 26px));    /* iPhone-safe */
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sin gap por defecto: si el <ul> tiene width:0, un gap flex haría
     que el toggle quedara desplazado a la derecha. Sólo damos gap
     cuando el menú está abierto (para que respire entre items). */
  gap: 0;
  background: #ffffff;
  padding: 10.5px 12px;
  width: 47px;
  height: 47px;
  border-radius: 999px;
  box-shadow:
    0 10px 26px rgba(74, 61, 41, 0.16),
    0 0 0 1px rgba(166, 124, 63, 0.22);
  transition: width 0.55s cubic-bezier(.16,.84,.22,1),
              gap  0.4s ease,
              padding 0.4s ease;
  overflow: hidden;
}
#nav-pill.is-open {
  width: min(460px, 92vw);
  gap: 4px;
}

#nav-pill ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  /* Sin padding cuando está cerrado — así ocupa 0 real y no empuja al
     toggle fuera de centro. */
  padding: 0;
  width: 0;
  overflow: hidden;
  transition: width 0.7s ease, padding 0.4s ease;
}
#nav-pill.is-open ul {
  width: 100%;
  padding: 0 8px 0 0;
}
#nav-pill li {
  transform: scale(0.6);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(.16,.84,.22,1), opacity 0.55s ease;
}
#nav-pill.is-open li { transform: scale(1); opacity: 1; }
#nav-pill.is-open li:nth-child(1) { transition-delay: 0.10s; }
#nav-pill.is-open li:nth-child(2) { transition-delay: 0.18s; }
#nav-pill.is-open li:nth-child(3) { transition-delay: 0.26s; }
#nav-pill.is-open li:nth-child(4) { transition-delay: 0.34s; }

#nav-pill a {
  display: inline-block;
  color: #3d3527;
  font-family: "Cormorant Garamond", serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  transition: color 0.22s, background 0.22s;
  white-space: nowrap;
}
#nav-pill a:hover,
#nav-pill a:focus-visible {
  color: var(--teal);
  background: rgba(26, 123, 118, 0.08);
  outline: none;
}

#nav-toggle {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  position: relative;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
#nav-toggle .line {
  background-color: var(--teal);
  height: 2px;
  width: 15px;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center;
  transition: transform 0.55s cubic-bezier(.16,.84,.22,1);
}
#nav-toggle .line1 { top: 8px; }
#nav-toggle .line2 { bottom: 8px; }
#nav-pill.is-open #nav-toggle .line1 { transform: translateX(-50%) translateY(4px) rotate(-45deg); }
#nav-pill.is-open #nav-toggle .line2 { transform: translateX(-50%) translateY(-4px) rotate(45deg); }

/* --- Reglas responsivas móvil (extendidas hasta 768 px para cubrir
   iPhones grandes + tablets pequeñas en portrait) --- */
@media (max-width: 768px) {
  #nav-pill.is-open {
    width: 78vw;
    padding: 12px 12px;
    height: auto;
    flex-direction: column;
    /* Radio fijo en px cuando el menú se despliega en móvil (columna
       vertical). Sin esto, el 999px del estado píldora hace que las
       esquinas parezcan una esfera exagerada al crecer el alto. */
    border-radius: 22px !important;
  }
  #nav-pill ul { flex-direction: column; align-items: center; width: 100%; padding: 8px 0 0; gap: 2px; }
  #nav-pill.is-open ul { padding: 10px 0 4px; }
}

/* Blindaje adicional: aunque el ancho supere 768px (p.ej. tablets en
   portrait "grande"), si la orientación es vertical y el ancho es
   menor de 900px lo tratamos como móvil y forzamos radio fijo. */
@media (orientation: portrait) and (max-width: 900px) {
  #nav-pill.is-open {
    border-radius: 22px !important;
    flex-direction: column;
    height: auto;
  }
}

/* --- MÓVIL EN HORIZONTAL: menú (cerrado) arriba a la izquierda;
   al abrirse, el rectángulo se centra --- */
@media (orientation: landscape) and (max-height: 500px) {
  #nav-pill {
    left: calc(env(safe-area-inset-left, 0px) + 16px);
    transform: none;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    transition: width 0.55s cubic-bezier(.16,.84,.22,1),
                gap 0.4s ease,
                padding 0.4s ease,
                left 0.5s cubic-bezier(.16,.84,.22,1),
                transform 0.5s cubic-bezier(.16,.84,.22,1);
  }
  #nav-pill.is-open {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* --- BOTÓN "CONTACTA" CENTRADO ABAJO --- */
.cta-button {
  position: fixed;
  left: 50%;
  /* Centrado en el hueco entre el footer y la base: mitad del relleno
     inferior del stage menos la media altura del botón (~40px). */
  bottom: max(12px, calc(var(--pb) / 2 - 20px));
  transform: translateX(-50%);
  z-index: 5;

  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.4em;
  /* Compensa el espacio fantasma del letter-spacing final. */
  text-indent: 0.4em;
  text-transform: uppercase;
  color: var(--teal);
  padding: 12px 30px;
  border: 1.2px solid var(--teal);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: color 0.28s, background 0.28s, border-color 0.28s, transform 0.28s, box-shadow 0.28s;
  box-shadow: 0 4px 14px rgba(74, 61, 41, 0.10);
}
.cta-button:hover,
.cta-button:focus-visible {
  color: #ffffff;
  background: var(--teal);
  border-color: var(--teal);
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 10px 24px rgba(26, 123, 118, 0.32);
  outline: none;
}
.cta-button:active { transform: translateX(-50%) translateY(0); }

/* --- MODAL --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 15, 8, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.42s ease, visibility 0s linear 0.42s;
}
.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.42s ease, visibility 0s linear 0s;
}

.modal-card {
  position: relative;
  max-width: min(460px, 92vw);
  width: 100%;
  padding: clamp(32px, 5vw, 56px) clamp(28px, 5vw, 48px);
  background: linear-gradient(155deg, #19b0a8 0%, #139089 55%, #0f6c71 100%);
  color: #ffffff;
  border-radius: 22px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.10) inset,
    0 0 44px rgba(0, 193, 188, 0.38);
  text-align: center;
  transform: scale(0.92) translateY(12px);
  transition: transform 0.42s cubic-bezier(.16,.84,.22,1);
}
.modal-overlay.is-open .modal-card { transform: scale(1) translateY(0); }

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  font-weight: 400;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
  transition: background 0.22s, border-color 0.22s, transform 0.22s;
}
.modal-close:hover,
.modal-close:focus-visible {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.55);
  transform: rotate(90deg);
  outline: none;
}

.modal-title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(26px, 4.4vw, 36px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin: 0;
}
.modal-row {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  /* +25% */
  font-size: clamp(19px, 2.25vw, 22px);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.94);
  text-decoration: none;
  padding: 8px 0;
  transition: color 0.22s, transform 0.22s;
  word-break: break-word;
}
.modal-row + .modal-row {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 6px;
}
a.modal-row:hover,
a.modal-row:focus-visible {
  color: #ffffff;
  transform: translateY(-1px);
  outline: none;
}
.modal-rows {
  margin-top: clamp(18px, 3vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.modal-tagline {
  font-family: "Pinyon Script", cursive;
  font-size: clamp(20px, 2.4vw, 26px);
  color: rgba(255, 255, 255, 0.85);
  margin-top: clamp(20px, 3vw, 28px);
}

@media (max-width: 640px) {
  /* Aura y contenido bajados para centrar mejor en el viewport móvil */
  .aura       { top: 52%; }
  /* "Creando espacios…": +20% de tamaño y −20% de interlineado */
  .tagline    { font-size: clamp(18.6px, 5.4vw, 25.8px); line-height: 1.2; }
  /* "CONECTA / ◆ / CREA / ◆ / TRANSFORMA": una palabra por línea,
     con los rombos (más pequeños) intercalados entre ellas */
  .sub {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    letter-spacing: 0.32em;
    font-size: 15.5px;
  }
  .sub .w   { text-indent: 0.32em; }   /* compensa el letter-spacing para centrar */
  /* En móvil, los rombos se convierten en líneas finas y cortas */
  .sub .sep {
    font-size: 0;            /* oculta el glifo ◆ */
    width: 26px;
    height: 1.5px;
    transform: none;         /* anula el achatado del rombo */
    background: #00C1BC;
    border-radius: 2px;
    opacity: 0.9;
    margin: 3px 0;
  }
  .foot       { font-size: 10px; letter-spacing: 0.3em; }
  /* --- Layout inferior móvil (robusto): el .stage pasa a columna flex;
     el footer queda al fondo del contenido y debajo se reserva un hueco
     = 2·separación + altura del botón. El botón "Contacta" (fijo) se sitúa
     a una "separación" de la base, quedando EQUIDISTANTE entre el footer
     y la base, sin solaparse nunca. --- */
  :root {
    --m-gap:   clamp(14px, 3.4vh, 26px);   /* separación equidistante */
    --m-cta-h: 42px;                       /* altura aproximada del botón */
  }
  .stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: clamp(80px, 13vh, 130px); /* baja el bloque, sin desbordar */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + (var(--m-gap) * 2) + var(--m-cta-h));
    gap: clamp(18px, 3.2vh, 34px);
  }
  .card { flex: 1 1 auto; }               /* el logo+textos se centran en el hueco superior */
  .cta-button {
    font-size: 10.5px;
    padding: 11px 26px;
    letter-spacing: 0.35em;
    text-indent: 0.35em;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--m-gap));
  }
  .modal-card { padding: 32px 22px; border-radius: 18px; }
  .modal-row  { font-size: clamp(17px, 5.2vw, 21px); }
  .modal-title{ font-size: clamp(24px, 7vw, 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .stage-bg, .aura::before, .aura::after, .logo-wrap, .rule, .tagline, .sub, .foot { animation: none !important; }
  .logo-wrap, .rule, .tagline, .sub, .foot, .logo-wrap img { opacity: 1 !important; transform: none !important; }
}