/* ============================================================
   Tarot con alma — hoja de estilos del catálogo
   Paleta y tipografía tomadas de las fichas originales.
   ============================================================ */

:root{
  --fondo:        #FAF1ED;
  --papel:        #FDF8F5;
  --panel:        #F4E4DE;
  --panel-suave:  #FAEBE5;
  --malva:        #A6687F;
  --malva-claro:  #C99AAB;
  --vino:         #5E2540;
  --ciruela:      #6B2A5E;
  --tinta:        #3E2230;
  --tinta-suave:  #75505F;
  --oro:          #C39B52;
  --oro-claro:    #E4CE9C;
  --linea:        rgba(94,37,64,.15);
  --sombra:       0 20px 45px -28px rgba(94,37,64,.55);
  --sombra-carta: 0 26px 50px -30px rgba(94,37,64,.65);
  --radio:        20px;

  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --texto:   "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --ancho: 1120px;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--texto);
  font-size:clamp(16px,.55vw + 14.4px,17.5px);
  line-height:1.7;
  color:var(--tinta);
  background-color:var(--fondo);
  background-image:
    radial-gradient(60% 45% at 12% 0%,  rgba(255,255,255,.85), transparent 70%),
    radial-gradient(55% 40% at 88% 8%,  rgba(233,196,205,.55), transparent 70%),
    radial-gradient(70% 50% at 50% 100%, rgba(246,225,215,.9),  transparent 75%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:var(--vino); }

.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
}

/* ---------- Tipografía ---------- */

h1,h2,h3{
  font-family:var(--display);
  font-weight:500;
  color:var(--vino);
  line-height:1.08;
  margin:0;
  letter-spacing:.005em;
}

.titular{
  font-size:clamp(2.9rem,7.5vw,5.1rem);
}
.titular em{
  font-style:italic;
  color:var(--malva);
}

.epigrafe{
  font-family:var(--texto);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--malva);
  margin:0 0 18px;
}

.entradilla{
  font-size:1.08rem;
  color:var(--tinta-suave);
  max-width:56ch;
}

.lema{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.5rem,3.2vw,2.1rem);
  color:var(--malva);
}

/* ---------- Estrella divisoria (motivo de las fichas) ---------- */

.estrella{
  display:flex;
  align-items:center;
  gap:16px;
  margin:34px 0;
  color:var(--oro);
}
.estrella::before,
.estrella::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--oro-claro),transparent);
}
.estrella svg{ width:18px; height:18px; flex:none; }

.estrella.corta{ max-width:280px; margin-inline:0; }

/* ---------- Cabecera ---------- */

.cabecera{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(10px);
  background:rgba(250,241,237,.82);
  border-bottom:1px solid var(--linea);
}
.cabecera .contenedor{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:68px;
}
.marca{
  font-family:var(--display);
  font-style:italic;
  font-size:1.5rem;
  color:var(--ciruela);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.marca svg{ width:15px; height:15px; color:var(--oro); }

.menu{
  display:flex;
  gap:clamp(14px,2.5vw,30px);
  font-size:.74rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.menu a{
  color:var(--tinta-suave);
  text-decoration:none;
  padding-block:6px;
  border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.menu a:hover,
.menu a:focus-visible{ color:var(--vino); border-color:var(--oro); }

/* ---------- Portada ---------- */

.portada{
  padding:clamp(60px,10vw,110px) 0 clamp(30px,5vw,50px);
  text-align:center;
}
.portada .entradilla{ margin-inline:auto; }
.portada .lema{ margin-top:26px; }

/* ---------- La tirada (rejilla de servicios) ---------- */

.tirada{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(26px,3.5vw,40px);
  padding-bottom:clamp(50px,8vw,90px);
}

.carta{
  --giro:0deg;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:14px 14px 22px;
  box-shadow:var(--sombra);
  transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s, border-color .45s;
}
.carta:hover,
.carta:focus-visible{
  transform:translateY(-10px) rotate(var(--giro));
  box-shadow:var(--sombra-carta);
  border-color:var(--oro-claro);
  outline:none;
}
.carta:focus-visible{ outline:2px solid var(--malva); outline-offset:4px; }

.carta .lamina{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:3/4;
  background:var(--panel);
  box-shadow:inset 0 0 0 1px rgba(195,155,82,.5);
}
.carta .lamina img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1);
}
.carta:hover .lamina img{ transform:scale(1.05); }

.carta h2{
  font-size:1.62rem;
  margin-top:20px;
}
.carta p{
  margin:8px 0 0;
  font-size:.94rem;
  color:var(--tinta-suave);
}
.pie-carta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--linea);
}
.precio-min{
  font-family:var(--display);
  font-size:1.85rem;
  color:var(--ciruela);
  white-space:nowrap;
}
.ver{
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--malva);
}

/* Reparto de cartas al cargar */
@media (prefers-reduced-motion:no-preference){
  .revelar{ opacity:0; transform:translateY(26px) rotate(-1.5deg) scale(.97); }
  .revelar.dentro{
    animation:reparte .95s cubic-bezier(.2,.75,.25,1) forwards;
    animation-delay:calc(var(--i,0) * 110ms);
  }
}
@keyframes reparte{
  to{ opacity:1; transform:none; }
}

/* ---------- Página de servicio ---------- */

.volver{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:34px;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--malva);
  text-decoration:none;
}
.volver:hover{ color:var(--vino); }

.ficha{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,64px);
  align-items:start;
  padding:clamp(28px,4vw,44px) 0 clamp(50px,7vw,80px);
}
@media (max-width:880px){
  .ficha{ grid-template-columns:1fr; }
}

.ficha .titular{ font-size:clamp(2.5rem,6vw,4.2rem); }
.ficha .entradilla{ margin-top:20px; }

.lamina-grande{
  position:sticky;
  top:100px;
  border-radius:var(--radio);
  overflow:hidden;
  border:1px solid var(--oro-claro);
  box-shadow:var(--sombra-carta);
  background:var(--panel-suave);
}
@media (max-width:880px){
  .lamina-grande{ position:static; }
}

.bloque{
  margin-top:38px;
  background:rgba(253,248,245,.78);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:clamp(22px,3.5vw,34px);
}
.bloque h2{
  font-size:1.75rem;
  margin-bottom:6px;
}
.bloque h3{
  font-size:1.2rem;
  font-family:var(--texto);
  font-weight:500;
  letter-spacing:.02em;
  color:var(--ciruela);
  margin-top:22px;
}
.bloque p{ color:var(--tinta-suave); }

.lista{
  list-style:none;
  margin:18px 0 0;
  padding:0;
}
.lista li{
  position:relative;
  padding:14px 0 14px 34px;
  border-top:1px solid var(--linea);
}
.lista li:first-child{ border-top:none; padding-top:4px; }
.lista li::before{
  content:"✦";
  position:absolute;
  left:2px;
  top:14px;
  color:var(--oro);
  font-size:.95rem;
}
.lista li:first-child::before{ top:4px; }

.lista.simple li{ border-top:none; padding-block:6px; }
.lista.simple li::before{ top:6px; }

/* Datos de entrega */
.entrega{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
  padding:0;
  list-style:none;
}
.entrega li{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:var(--panel-suave);
  border:1px solid var(--linea);
  border-radius:999px;
  padding:9px 18px;
  font-size:.83rem;
  color:var(--vino);
}
.entrega svg{ width:15px; height:15px; color:var(--malva); flex:none; }

/* Precio */
.precio{
  margin-top:32px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(16px,3vw,34px);
  background:linear-gradient(135deg,var(--panel),var(--panel-suave));
  border:1px solid var(--oro-claro);
  border-radius:var(--radio);
  padding:clamp(20px,3vw,28px) clamp(22px,3.5vw,34px);
}
.precio .etiqueta{
  font-size:.68rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--malva);
  display:block;
  margin-bottom:2px;
}
.precio .cifra{
  font-family:var(--display);
  font-size:clamp(2.6rem,6vw,3.6rem);
  line-height:1;
  color:var(--ciruela);
}
.precio-doble{ display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,44px); }

.boton{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--malva);
  color:#fff;
  text-decoration:none;
  border-radius:999px;
  padding:14px 30px;
  font-size:.76rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  transition:background .3s, transform .3s;
  border:none;
  cursor:pointer;
}
.boton:hover,
.boton:focus-visible{ background:var(--vino); transform:translateY(-2px); }
.boton.linea{
  background:transparent;
  color:var(--vino);
  border:1px solid var(--malva);
}
.boton.linea:hover{ background:var(--malva); color:#fff; }

.acciones{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
}

.aviso{
  font-size:.86rem;
  color:var(--tinta-suave);
  border-left:2px solid var(--oro-claro);
  padding-left:16px;
  margin-top:24px;
}

/* ---------- Testimonios ---------- */

.testimonios{
  margin:clamp(40px,7vw,80px) 0 clamp(60px,9vw,100px);
  background:linear-gradient(140deg,rgba(244,228,222,.95),rgba(253,248,245,.9));
  border:1px solid var(--oro-claro);
  border-radius:calc(var(--radio) + 8px);
  padding:clamp(34px,6vw,68px);
  text-align:center;
  box-shadow:var(--sombra);
}
.testimonios h2{ font-size:clamp(2rem,4.5vw,3rem); }
.testimonios .entradilla{ margin:18px auto 0; }
.testimonios .boton{ margin-top:30px; }
.testimonios .estrella{ max-width:220px; margin-inline:auto; }

/* ---------- Pie ---------- */

.pie{
  border-top:1px solid var(--linea);
  padding:38px 0 54px;
  font-size:.85rem;
  color:var(--tinta-suave);
}
.pie .contenedor{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  justify-content:space-between;
  align-items:center;
}
.pie a{ color:var(--malva); text-decoration:none; }
.pie a:hover{ color:var(--vino); }

/* ---------- Accesibilidad ---------- */

:focus-visible{ outline:2px solid var(--malva); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
  .revelar{ opacity:1; transform:none; }
}

/* ---------- Correcciones finales ---------- */

[hidden]{ display:none !important; }

.precio .cifra{ display:block; }

.entrega li span{ line-height:1.35; }

@media (max-width:520px){
  .precio{ flex-direction:column; align-items:flex-start; }
  .acciones .boton{ width:100%; justify-content:center; }
}