/* ============================================================
   Call Harmony — Portada
   ------------------------------------------------------------
   Sólo lo propio de index.html. Las fichas, la tipografía, la
   roseta y los componentes compartidos viven en ch.css, que
   debe cargarse ANTES que esta hoja.
   ============================================================ */

/* ============================================================
   EL UMBRAL — la primera pantalla
   ============================================================ */
.umbral {
  position: relative;
  overflow: hidden;
  padding: var(--e-16) 0 var(--e-24);
  /* El resplandor de la vela + el cielo de ciruela detrás */
  background:
    radial-gradient(
      42rem 32rem at 78% 34%,
      rgba(212, 175, 55, 0.11),
      transparent 68%
    ),
    radial-gradient(
      50rem 38rem at 88% 12%,
      rgba(74, 54, 99, 0.34),
      transparent 72%
    );
}

/* La roseta grande, sangrando por el borde derecho */
.umbral__roseta {
  top: -22%;
  right: -16%;
  width: 72vw;
  max-width: 720px;
  opacity: 0.2;
}

.umbral__texto {
  position: relative;
  max-width: 40rem;
}

.umbral h1 {
  margin: var(--e-4) 0 var(--e-4);
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  font-weight: 500;
}

/* La palabra que carga el significado, en el oro */
.umbral h1 em {
  font-style: italic;
  color: var(--oro);
}

.umbral__entrada {
  max-width: 34rem;
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  color: var(--tinta-2);
}

.umbral__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-8);
}

/* La línea de confianza: hechos, no adornos */
.umbral__fe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-6);
  margin-top: var(--e-8);
  padding-top: var(--e-6);
  border-top: 1px solid var(--filo-suave);
  font-size: 0.875rem;
  color: var(--tinta-3);
}

.umbral__fe span {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}

.punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--salvia);
  flex: none;
}

/* ============================================================
   LA FRANJA — la carta del día (la muestra gratuita)
   ============================================================ */
.franja {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--e-6);
  padding: var(--e-8);
  border: 1px solid var(--filo);
  border-radius: var(--r-lg);
  background: linear-gradient(105deg, var(--carta), #241d12 62%);
}

.franja__roseta {
  top: 50%;
  right: -6%;
  width: 300px;
  transform: translateY(-50%);
  opacity: 0.28;
  color: var(--llama);
}

.franja__texto {
  position: relative;
  max-width: 32rem;
}

.franja h2 {
  margin: var(--e-3) 0 var(--e-2);
}

.franja p {
  color: var(--tinta-2);
}

.franja .btn {
  margin-top: var(--e-6);
}

@media (min-width: 720px) {
  .franja {
    padding: var(--e-12);
  }
}

/* ============================================================
   LAS CARTAS — los servicios, boca abajo
   ============================================================ */
.baraja {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.carta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--e-8) var(--e-6) var(--e-6);
  border: 1px solid var(--filo);
  border-radius: var(--r-md);
  background: var(--carta);
  text-align: center;
  transition:
    background 0.24s var(--paso),
    border-color 0.24s var(--paso),
    transform 0.24s var(--paso);
}

/* Al alargar la mano, la carta capta la luz de la vela */
.carta:hover,
.carta:focus-within {
  background: var(--carta-alzada);
  border-color: var(--filo-vivo);
  transform: translateY(-2px);
}

.carta:hover .roseta,
.carta:focus-within .roseta {
  opacity: 0.42;
}

/* La roseta ocupa la carta entera, como la filigrana del reverso.
   Girada media división (11.25° de 22.5°) para que ningún rayo
   caiga horizontal y tache la línea "DESDE". */
.carta__roseta {
  top: 50%;
  left: 50%;
  width: 86%;
  transform: translate(-50%, -50%) rotate(11.25deg);
  opacity: 0.13;
}

.carta__glifo {
  position: relative;
  margin: 0 auto var(--e-4);
}

.carta h3 {
  position: relative;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta);
}

.carta__nota {
  position: relative;
  margin-top: var(--e-2);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--tinta-3);
}

.carta__precio {
  position: relative;
  margin-top: var(--e-6);
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--tinta);
  /* Cormorant trae cifras de texto por defecto: en un precio se leen
     mal. Forzamos versales alineadas y proporcionales. */
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1, "pnum" 1;
}

.carta__precio small {
  display: block;
  margin-bottom: var(--e-1);
  font-family: var(--texto);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-4);
}

/* Lo que compra: duración o cantidad. Es dato, no llamada a la acción
   — por eso va como metadato y no dentro del botón. */
.carta__medida {
  position: relative;
  margin-top: var(--e-2);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--tinta-4);
  font-variant-numeric: tabular-nums;
}

.carta__pie {
  position: relative;
  margin-top: auto;
  padding-top: var(--e-6);
}

/* ============================================================
   LA TIRADA — cómo funciona, en tres cartas puestas en fila
   ============================================================ */
.tirada {
  display: grid;
  gap: var(--e-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  counter-reset: paso;
}

.tirada__paso {
  position: relative;
  padding-top: var(--e-6);
  border-top: 1px solid var(--filo-suave);
  counter-increment: paso;
}

.tirada__paso::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  margin-bottom: var(--e-3);
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--oro);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.tirada__paso h3 {
  margin-bottom: var(--e-2);
}

.tirada__paso p {
  font-size: 0.9375rem;
  color: var(--tinta-3);
}

/* ============================================================
   LAS VOCES — testimonios
   ============================================================ */
.voces {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.voz {
  padding: var(--e-6);
  border: 1px solid var(--filo-suave);
  border-radius: var(--r-md);
  background: var(--carta);
}

.voz blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--tinta);
}

.voz figcaption {
  margin-top: var(--e-4);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-4);
}

/* ============================================================
   LAS DUDAS — FAQ
   ============================================================ */
.dudas {
  max-width: 46rem;
  border-top: 1px solid var(--filo-suave);
}

.duda {
  border-bottom: 1px solid var(--filo-suave);
}

.duda summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-6) 0;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
  transition: color 0.18s var(--paso);
}

.duda summary::-webkit-details-marker {
  display: none;
}

.duda summary:hover {
  color: var(--oro);
}

/* La cruz que gira a guion al abrirse */
.duda__signo {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--oro);
}

.duda__signo::before,
.duda__signo::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.24s var(--paso);
}

.duda__signo::after {
  transform: rotate(90deg);
}

.duda[open] .duda__signo::after {
  transform: rotate(0deg);
}

.duda p {
  padding: 0 0 var(--e-6);
  max-width: 40rem;
  color: var(--tinta-2);
}

/* ============================================================
   El disco de admin — antes era un círculo rojo que rompía
   la paleta. Sigue oculto salvo en modo admin.
   ============================================================ */
#telefonoCallHarmony {
  position: fixed;
  right: var(--e-6);
  bottom: var(--e-6);
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--filo-vivo);
  background: var(--carta-alzada);
  color: var(--oro);
  cursor: pointer;
}

/* ============================================================
   Ajustes finos
   ============================================================ */
@media (max-width: 719px) {
  .umbral {
    padding: var(--e-12) 0 var(--e-16);
  }

  /* En móvil la roseta se retira, pero no desaparece */
  .umbral__roseta {
    top: -10%;
    right: -46%;
    width: 118vw;
    opacity: 0.14;
  }

  .franja__roseta {
    top: -18%;
    right: -22%;
    width: 210px;
    transform: none;
    opacity: 0.2;
  }

  .umbral__acciones .btn {
    flex: 1 1 100%;
  }

  /* La línea de confianza pasa a lista: en línea partía por
     cualquier sitio y parecía texto suelto. */
  .umbral__fe {
    flex-direction: column;
    gap: var(--e-2);
  }

  .umbral__fe span::before {
    content: "";
    width: 3px;
    height: 3px;
    margin-right: var(--e-1);
    border-radius: 50%;
    background: var(--tinta-4);
    flex: none;
  }

  .umbral__fe span:first-child::before {
    display: none;
  }
}