/* ==========================================================================
   Los Doce del Tarot — sistema visual
   Paleta y tipografias segun la carpeta de marca (SIWOL, junio 2026).

   Principio rector: la unidad del sistema es LA CARTA. Marcos rectangulares de
   linea dorada, numeral romano arriba, cartela de nombre abajo. Todo modulo del
   sitio repite esa proporcion. La marca pide "pocos elementos, con precision y
   repeticion coherente": por eso no hay estrellas animadas, ni iconos de stock,
   ni degrades de colores fuera de paleta.

   El dorado es para filetes, numerales y botones. Nunca para texto corrido:
   #D6A84F sobre #1B1026 da 7.3:1 en titulo grande pero se vuelve ilegible en
   cuerpo de 17 px sobre fondos berenjena.
   ========================================================================== */

:root{
  /* ---- paleta aprobada ---- */
  --noche:#1B1026;
  --berenjena:#2A1438;
  --berenjena-alta:#341A45;
  --oro:#D6A84F;
  --oro-claro:#E7C271;
  --oro-hueso:#F0DDB4;
  --lavanda:#B99AD9;
  --marfil:#F7EEDC;
  --arena:#D9C7A3;

  /* texto de cuerpo: arena puro sobre berenjena da 8.1:1; se mantiene */
  --texto:#E4D8C0;
  --texto-tenue:#BCA98A;

  /* ---- tipografia ---- */
  --titulo:'Cinzel', 'Times New Roman', serif;
  --voz:'Cormorant Garamond', Georgia, serif;
  --cuerpo:'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- medidas ---- */
  --ancho:1200px;
  --ancho-texto:64ch;
  --canto:22px;                /* margen lateral en mobile */
  --carta:61 / 112;            /* proporcion de una carta de Marsella */
  --filete:rgba(214,168,79,.24);
  --filete-suave:rgba(214,168,79,.13);
  --curva:cubic-bezier(.22,.68,.28,1);
}

/* ---------- reset acotado ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0;
  background:var(--noche);
  color:var(--texto);
  font-family:var(--cuerpo);
  font-size:clamp(1.0625rem,.98rem + .35vw,1.1875rem); /* 17 → 19 px */
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.14; }
p,ul,ol{ margin:0; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--oro); color:var(--noche); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* foco visible real: el sitio anterior no tenia ninguno */
:focus-visible{
  outline:2px solid var(--oro-claro);
  outline-offset:3px;
  border-radius:2px;
}

.saltar{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--oro); color:var(--noche);
  padding:12px 20px; font-weight:700; font-size:.85rem;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  transition:top .2s var(--curva);
}
.saltar:focus{ top:12px; }

/* ---------- utilidades de layout ---------- */
.marco{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--canto); }
.seccion{ padding-block:clamp(72px,9vw,118px); position:relative; }
.fondo-bere{ background:var(--berenjena); }
.centrado{ text-align:center; margin-inline:auto; }

/* ---------- textura de papel antiguo ----------
   Un solo grano SVG de 160 px, sin costura, al 3.5 % de opacidad.
   Reemplaza a las 60 estrellas animadas del sitio anterior: mismo clima,
   cero trabajo de layout por frame. */
.grano::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:url("../assets/grano.svg");
  background-size:160px 160px;
  opacity:.05; mix-blend-mode:overlay;
}
.seccion > .marco{ position:relative; z-index:1; }

/* ---------- filete y epigrafes ---------- */
.epigrafe{
  display:inline-flex; align-items:center; gap:.75em;
  font-size:.72rem; font-weight:700; letter-spacing:.3em;
  text-transform:uppercase; color:var(--oro);
  margin:0 0 18px;
}
.epigrafe::before{
  content:""; width:32px; height:1px; background:var(--oro); opacity:.8; flex:none;
}
.centrado .epigrafe::after{
  content:""; width:32px; height:1px; background:var(--oro); opacity:.8; flex:none;
}
.regla{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg,transparent,var(--filete) 22%,var(--filete) 78%,transparent);
}

/* ---------- titulos ---------- */
.h-mayor{
  font-family:var(--titulo);
  font-size:clamp(2.5rem,1.6rem + 3.6vw,4rem);   /* 40 → 64 px */
  letter-spacing:.005em; color:var(--marfil); text-wrap:balance;
}
.h-seccion{
  font-family:var(--titulo);
  font-size:clamp(2rem,1.5rem + 2vw,2.625rem);   /* 32 → 42 px */
  color:var(--marfil); text-wrap:balance;
}
.h-menor{ font-family:var(--titulo); font-size:1.375rem; color:var(--marfil); }
.voz{
  font-family:var(--voz); font-style:italic; font-weight:500;
  font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem);  /* 22 → 28 px */
  line-height:1.35; color:var(--lavanda);
}
.bajada{ color:var(--texto-tenue); max-width:var(--ancho-texto); text-wrap:pretty; }
.centrado .bajada{ margin-inline:auto; }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--cuerpo); font-weight:700;
  font-size:clamp(.875rem,.84rem + .1vw,1rem);
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  padding:16px 30px; border:1px solid transparent; border-radius:2px;
  cursor:pointer; white-space:nowrap;
  transition:background .3s var(--curva), color .3s var(--curva),
             border-color .3s var(--curva), transform .3s var(--curva);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-oro{ background:var(--oro); color:var(--noche); }
.btn-oro:hover{ background:var(--oro-claro); }
.btn-linea{ background:transparent; color:var(--oro-hueso); border-color:var(--filete); }
.btn-linea:hover{ border-color:var(--oro); background:rgba(214,168,79,.08); }
.btn svg{ width:1.1em; height:1.1em; flex:none; }

.acciones{ display:flex; flex-wrap:wrap; gap:14px; }
.centrado .acciones{ justify-content:center; }

/* ==========================================================================
   Cabecera
   ========================================================================== */
.cabecera{
  position:fixed; inset:0 0 auto; z-index:100;
  background:rgba(20,11,29,.62);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border-bottom:1px solid var(--filete-suave);
  transition:background .4s var(--curva), border-color .4s var(--curva);
}
.cabecera.fija{ background:rgba(18,10,26,.94); border-bottom-color:var(--filete); }
.cabecera-caja{
  display:flex; align-items:center; gap:24px;
  height:82px; transition:height .4s var(--curva);
}
.cabecera.fija .cabecera-caja{ height:70px; }

/* sello XII: el recurso propio que pide la carpeta de marca */
.sello{ display:inline-flex; align-items:center; gap:13px; text-decoration:none; margin-right:auto; }
.sello-disco{
  position:relative; width:44px; height:44px; flex:none;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(214,168,79,.5);
  transition:transform .6s var(--curva);
}
.sello-disco::after{
  content:""; position:absolute; inset:4px; border-radius:50%;
  border:1px solid rgba(214,168,79,.22);
}
.sello:hover .sello-disco{ transform:rotate(-12deg); }
.sello-disco span{
  font-family:var(--titulo); font-weight:600; font-size:.66rem;
  letter-spacing:.02em; color:var(--oro); line-height:1;
}
.sello-texto{ display:flex; flex-direction:column; line-height:1.08; }
.sello-nombre{
  font-family:var(--titulo); font-weight:600; font-size:.95rem;
  letter-spacing:.11em; color:var(--marfil);
}
.sello-sub{
  font-family:var(--voz); font-style:italic; font-size:.85rem;
  color:var(--lavanda); letter-spacing:.02em;
}

.menu{ display:flex; gap:34px; }
.menu a{
  font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--arena); text-decoration:none; padding:8px 0; position:relative;
  transition:color .3s var(--curva);
}
.menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--oro); transform:scaleX(0); transform-origin:center;
  transition:transform .35s var(--curva);
}
.menu a:hover{ color:var(--marfil); }
.menu a:hover::after,
.menu a[aria-current="page"]::after{ transform:scaleX(1); }
.menu a[aria-current="page"]{ color:var(--marfil); }

.cabecera-cta .btn{ padding:12px 22px; font-size:.72rem; letter-spacing:.14em; }

/* boton hamburguesa: el sitio anterior no tenia navegacion en mobile */
.hamburguesa{
  display:none; width:44px; height:44px; flex:none;
  background:none; border:1px solid var(--filete); border-radius:2px;
  cursor:pointer; padding:0;
  /* flex con gap fijo: con grid las filas se estiran y las barras quedan a
     15,8 px una de otra, con lo que la cruz al abrir no cierra */
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.hamburguesa span{
  display:block; width:19px; height:1.5px; background:var(--oro-hueso);
  transition:transform .3s var(--curva), opacity .2s var(--curva);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.cajon{
  /* colgado de la cabecera, no en una coordenada fija: la cabecera se achica
     al hacer scroll y con top:82px quedaba una franja de pagina asomando */
  position:absolute; top:100%; left:0; right:0; z-index:99;
  /* opaco y sin backdrop-filter propio: anidado dentro de la cabecera, que ya
     tiene uno, Chrome compone mal y se transparenta el contenido de atras */
  background:var(--noche);
  border-bottom:1px solid var(--filete);
  padding:8px var(--canto) 28px;
  display:none;
}
.cajon[data-abierto="true"]{ display:block; }
.cajon a{
  display:flex; align-items:baseline; gap:14px;
  padding:17px 2px; text-decoration:none;
  border-bottom:1px solid var(--filete-suave);
  font-family:var(--titulo); font-size:1.05rem; letter-spacing:.06em; color:var(--marfil);
}
.cajon a .num{
  font-size:.7rem; letter-spacing:.14em; color:var(--oro); flex:none; min-width:2.4em;
}
.cajon .btn{ width:100%; margin-top:24px; }

/* ==========================================================================
   Portada
   ========================================================================== */
.portada{
  position:relative; overflow:clip;
  padding-top:clamp(122px,16vw,168px); padding-bottom:clamp(64px,7vw,96px);
  background:
    radial-gradient(96% 72% at 76% 6%, rgba(58,28,76,.9) 0%, rgba(27,16,38,0) 62%),
    linear-gradient(180deg, var(--noche) 62%, var(--berenjena) 100%);
}
/* anillo astral unico: reemplaza a la grilla + 60 estrellas del sitio anterior */
.anillo{
  position:absolute; z-index:0; pointer-events:none;
  width:min(820px,88vw); aspect-ratio:1; right:-10%; top:-16%;
  border:1px solid rgba(214,168,79,.18); border-radius:50%;
  mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);
}
.anillo::before,.anillo::after{
  content:""; position:absolute; border:1px solid var(--filete-suave); border-radius:50%;
}
.anillo::before{ inset:9%; }
.anillo::after{ inset:22%; border-style:dashed; opacity:.55; }

.portada-caja{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(24px,4vw,56px); align-items:center;
}
.portada-texto{ max-width:36em; }
.portada h1{ font-family:var(--titulo); color:var(--marfil); text-wrap:balance;
  font-size:clamp(2.5rem,1.5rem + 3.9vw,4rem); }
.portada h1 .oro{ color:var(--oro); display:block; }
.portada .voz{ margin-top:16px; }
.portada .bajada{ margin-top:20px; font-size:1.05em; }
.portada .acciones{ margin-top:34px; }

.portada-firma{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:34px;
  padding-top:22px; border-top:1px solid var(--filete-suave);
  font-size:.82rem; color:var(--texto-tenue);
}
.portada-firma span{ display:inline-flex; align-items:center; gap:.5em; }
.portada-firma span::before{ content:""; width:5px; height:5px; background:var(--oro); flex:none;
  transform:rotate(45deg); }

.portada-figura{ position:relative; justify-self:end; width:100%; max-width:540px; }
.portada-figura img{
  width:100%;
  filter:drop-shadow(0 34px 62px rgba(0,0,0,.55));
  mask-image:linear-gradient(180deg,#000 87%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 87%,transparent 100%);
}
.portada-figura::after{
  content:""; position:absolute; inset:auto 0 0; height:56%; z-index:-1;
  background:radial-gradient(58% 78% at 50% 100%, rgba(214,168,79,.15), transparent 70%);
}

/* ==========================================================================
   La carta: unidad del sistema
   ========================================================================== */
.carta{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(168deg, rgba(52,26,69,.55), rgba(27,16,38,.5));
  border:1px solid var(--filete);
  padding:34px 30px 30px;
  transition:border-color .4s var(--curva), transform .4s var(--curva), background .4s var(--curva);
}
.carta::before{
  content:""; position:absolute; inset:6px; border:1px solid var(--filete-suave);
  pointer-events:none;
}
.carta:hover{ border-color:rgba(214,168,79,.55); transform:translateY(-3px); }

/* numeral romano en cartela, como en el borde de una carta de Marsella */
.numeral{
  position:absolute; top:-1px; left:50%; transform:translate(-50%,-50%);
  background:var(--berenjena); padding:2px 14px;
  font-family:var(--titulo); font-weight:600; font-size:.8rem;
  letter-spacing:.16em; color:var(--oro); line-height:1.6;
}
.fondo-bere .numeral{ background:var(--berenjena); }
.seccion:not(.fondo-bere) .numeral{ background:var(--noche); }

/* ---------- las cuatro rutas ---------- */
.rutas{
  display:grid; gap:22px; margin-top:52px;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
}
.ruta{ text-decoration:none; color:inherit; }
.ruta .emblema{ width:74px; color:var(--oro); margin-bottom:20px; }
.ruta h3{ font-family:var(--titulo); font-size:1.3rem; color:var(--marfil);
  min-height:2.3em; display:flex; align-items:flex-end; }
.ruta .para{
  font-family:var(--voz); font-style:italic; font-size:1.05rem;
  color:var(--lavanda); margin-top:6px;
}
.ruta p{ margin-top:14px; font-size:.97rem; color:var(--texto-tenue); flex:1; }
.ruta .pie{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--filete-suave);
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--oro); display:inline-flex; align-items:center; gap:.6em;
}
.ruta .pie::after{ content:"→"; transition:transform .3s var(--curva); }
.ruta:hover .pie::after{ transform:translateX(5px); }

/* ==========================================================================
   El metodo: tres pasos
   ========================================================================== */
.pasos{ counter-reset:paso; display:grid; gap:2px; margin-top:52px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.paso{
  counter-increment:paso; position:relative;
  padding:38px 30px 34px; background:rgba(27,16,38,.42);
  outline:1px solid var(--filete-suave);
}
.paso::before{
  content:counter(paso,upper-roman);
  font-family:var(--titulo); font-weight:600; font-size:.78rem;
  letter-spacing:.2em; color:var(--oro); display:block; margin-bottom:16px;
}
.paso h3{ font-family:var(--titulo); font-size:1.2rem; color:var(--marfil); }
.paso p{ margin-top:12px; font-size:.97rem; color:var(--texto-tenue); }

/* ==========================================================================
   Sobre Fabiana
   ========================================================================== */
.retrato-doble{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,72px); align-items:center;
}
.retrato{ position:relative; padding:13px; }
.retrato img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 18%; }
.retrato .esquina{ position:absolute; width:42px; height:42px; border:1px solid var(--oro); opacity:.8; }
.retrato .ti{ top:0; left:0; border-right:0; border-bottom:0; }
.retrato .td{ top:0; right:0; border-left:0; border-bottom:0; }
.retrato .bi{ bottom:0; left:0; border-right:0; border-top:0; }
.retrato .bd{ bottom:0; right:0; border-left:0; border-top:0; }
.retrato figcaption{
  margin-top:16px; font-size:.8rem; color:var(--texto-tenue); letter-spacing:.04em;
}
.cita{
  font-family:var(--voz); font-style:italic; font-weight:500;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.65rem); line-height:1.38; color:var(--marfil);
  border-left:2px solid var(--oro); padding:2px 0 2px 24px; margin:26px 0;
}
.texto-largo > * + *{ margin-top:18px; }
.texto-largo p{ max-width:var(--ancho-texto); text-wrap:pretty; }

/* ==========================================================================
   Testimonios
   Texto tomado literal del sitio anterior. NO llevan marcado Review /
   AggregateRating en JSON-LD a proposito: Google exige que las resenas
   marcadas sean genuinas y recolectadas, y estas todavia no estan verificadas
   con la clienta. Cuando lleguen los originales, se agrega el schema.
   ========================================================================== */
.testimonios{
  display:grid; gap:22px; margin-top:52px;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
}
.testimonio{
  position:relative; display:flex; flex-direction:column;
  padding:38px 32px 32px;
  background:linear-gradient(168deg, rgba(52,26,69,.45), rgba(27,16,38,.4));
  border:1px solid var(--filete);
  transition:border-color .4s var(--curva), transform .4s var(--curva);
}
.testimonio::before{
  content:""; position:absolute; inset:6px;
  border:1px solid var(--filete-suave); pointer-events:none;
}
.testimonio:hover{ border-color:rgba(214,168,79,.5); transform:translateY(-3px); }
.testimonio .sello-cita{
  color:var(--oro); letter-spacing:.5em; font-size:.6rem; margin-bottom:20px;
}
.testimonio blockquote{
  margin:0; flex:1;
  font-family:var(--voz); font-style:italic; font-weight:500;
  font-size:1.2rem; line-height:1.45; color:var(--marfil); text-wrap:pretty;
}
.testimonio figcaption{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--filete-suave);
}
.testimonio .quien{ font-weight:700; color:var(--oro); letter-spacing:.04em; font-size:.95rem; }
.testimonio .donde{ color:var(--texto-tenue); font-size:.86rem; margin-top:3px; }

/* ==========================================================================
   Preguntas frecuentes
   ========================================================================== */
.faq{ max-width:var(--ancho-texto); margin-top:44px; }
.faq details{ border-bottom:1px solid var(--filete-suave); }
.faq summary{
  list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative;
  font-family:var(--titulo); font-size:1.06rem; color:var(--marfil); line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:11px;
  border-right:1px solid var(--oro); border-bottom:1px solid var(--oro);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .3s var(--curva);
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq .respuesta{ padding:0 0 24px; color:var(--texto-tenue); font-size:.98rem; }
.faq .respuesta > * + *{ margin-top:12px; }

/* ==========================================================================
   Cierre / contacto
   ========================================================================== */
.cierre{ position:relative; overflow:clip; text-align:center; }
.cierre-xii{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); z-index:0;
  font-family:var(--titulo); font-weight:600; line-height:.78;
  font-size:clamp(260px,38vw,560px);
  color:transparent; -webkit-text-stroke:1px rgba(214,168,79,.13);
  pointer-events:none; user-select:none;
}
.cierre .marco{ position:relative; z-index:2; }
.cierre .bajada{ max-width:46ch; }

/* ==========================================================================
   Pie
   ========================================================================== */
.pie-sitio{ background:var(--noche); border-top:1px solid var(--filete-suave); padding-block:52px 34px; }
.pie-rejilla{
  display:grid; gap:36px;
  grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
}
.pie-sitio h2{
  font-family:var(--cuerpo); font-size:.72rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--oro); margin-bottom:16px;
}
.pie-sitio ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:11px; }
.pie-sitio a{ color:var(--texto-tenue); text-decoration:none; font-size:.94rem;
  transition:color .3s var(--curva); }
.pie-sitio a:hover{ color:var(--marfil); }
.pie-sitio .lema{ font-family:var(--voz); font-style:italic; font-size:1.1rem;
  color:var(--lavanda); margin-top:14px; max-width:30ch; }
.pie-legal{
  margin-top:40px; padding-top:22px; border-top:1px solid var(--filete-suave);
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between;
  font-size:.8rem; color:var(--texto-tenue);
}
.pie-legal a{ font-size:.8rem; }

/* ==========================================================================
   Aparicion al hacer scroll
   ========================================================================== */
/* Base = visible. La ocultacion la activa el propio JS agregando .js al <html>,
   asi el contenido nunca queda invisible si el script falla o no corre. */
.aparece{ opacity:1; transform:none; }
.js .aparece{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--curva), transform .8s var(--curva);
}
.js .aparece.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .aparece{ opacity:1; transform:none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1040px){
  .portada-caja{ grid-template-columns:1fr; gap:36px; }
  .portada-figura{ justify-self:center; max-width:380px; margin-top:8px; }
  .retrato-doble{ grid-template-columns:1fr; gap:40px; }
  .pie-rejilla{ grid-template-columns:1fr 1fr; }
}
/* 1000 y no 860: con seis entradas, el menu completo mas el boton de la
   cabecera no entran por debajo de los 1000 px y el boton se salia del
   viewport. Debajo de ese ancho manda el cajon y la barra fija. */
@media (max-width:1000px){
  .menu{ display:none; }
  .hamburguesa{ display:flex; }
  .cabecera-cta{ display:none; }
  .sello-sub{ display:none; }
}
@media (max-width:560px){
  .sello-nombre{ font-size:.86rem; letter-spacing:.08em; }
  .sello-disco{ width:40px; height:40px; }
  .carta{ padding:30px 22px 26px; }
  .paso{ padding:30px 22px; }
  .acciones .btn{ width:100%; }
  .pie-rejilla{ grid-template-columns:1fr; gap:28px; }
  .pie-legal{ justify-content:flex-start; }
}

@media print{
  .cabecera,.cajon,.hamburguesa,.anillo,.cierre-xii,.grano::before{ display:none !important; }
  body{ background:#fff; color:#1B1026; }
  .aparece{ opacity:1 !important; transform:none !important; }
}

/* ==========================================================================
   EL ATLAS DE LOS 22 ARCANOS
   Las 22 fichas estan siempre en el HTML y siempre visibles: el filtro por
   septenario es una accion del usuario, no una condicion para que exista el
   contenido. Asi la pagina indexa completa aunque el buscador no ejecute JS.
   ========================================================================== */

/* ---------- la carta ---------- */
.carta-marsella{
  position:relative; aspect-ratio:var(--carta);
  display:grid; grid-template-rows:auto 1fr auto; gap:6px;
  padding:12px 10px 10px;
  background:linear-gradient(172deg, rgba(51,25,67,.5), rgba(27,16,38,.5)), var(--berenjena);
  border:1px solid rgba(214,168,79,.45);
  color:var(--oro);
  transition:border-color .35s var(--curva), transform .35s var(--curva),
             box-shadow .35s var(--curva);
}
.carta-marsella::before{
  content:""; position:absolute; inset:5px;
  border:1px solid rgba(214,168,79,.25); pointer-events:none;
}
.carta-marsella .cm-num{
  font-family:var(--titulo); font-weight:600; font-size:.68rem;
  letter-spacing:.14em; text-align:center; line-height:1.4;
  color:var(--oro); min-height:1.4em;
}
.carta-marsella .cm-arte{ display:grid; place-items:center; padding:2px 4px; min-height:0; }
.carta-marsella .cm-arte svg{ width:100%; height:auto; max-height:100%; }
.carta-marsella .cm-nombre{
  font-family:var(--titulo); font-weight:600; font-size:.6rem;
  letter-spacing:.1em; text-align:center; text-transform:uppercase;
  color:var(--oro-hueso); line-height:1.25;
  padding-top:6px; border-top:1px solid rgba(214,168,79,.25);
  overflow-wrap:anywhere;
}

/* ---------- rejilla indice ---------- */
.atlas-rejilla{
  display:grid; gap:14px; margin-top:40px;
  grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
}
.atlas-rejilla a{ text-decoration:none; display:block; }
.atlas-rejilla a:hover .carta-marsella,
.atlas-rejilla a:focus-visible .carta-marsella{
  border-color:var(--oro); transform:translateY(-5px);
  box-shadow:0 20px 40px -22px rgba(0,0,0,.85);
}
.atlas-rejilla .carta-marsella{ padding:10px 7px 8px; }
.atlas-rejilla .cm-nombre{ font-size:.55rem; letter-spacing:.07em; }

/* filtro por septenario */
.fichas-filtro{ display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.fichas-filtro button{
  background:transparent; border:1px solid var(--filete); border-radius:50px;
  /* min-height 44: el objetivo tactil minimo. Con padding 9px quedaban en 39 */
  padding:12px 20px; min-height:44px; cursor:pointer;
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--texto-tenue);
  transition:color .3s var(--curva), border-color .3s var(--curva), background .3s var(--curva);
}
.fichas-filtro button:hover{ color:var(--marfil); border-color:var(--oro); }
.fichas-filtro button[aria-pressed="true"]{
  background:var(--oro); border-color:var(--oro); color:var(--noche);
}
html:not(.js) .fichas-filtro{ display:none; }

/* ---------- ficha larga de cada arcano ---------- */
.ficha{
  display:grid; grid-template-columns:190px minmax(0,1fr);
  gap:clamp(24px,4vw,48px); align-items:start;
  padding-block:clamp(38px,5vw,56px);
  border-top:1px solid var(--filete-suave);
  scroll-margin-top:100px;
}
.ficha:target .carta-marsella{ border-color:var(--oro); box-shadow:0 0 0 4px rgba(214,168,79,.14); }
.ficha[hidden]{ display:none; }
.ficha-arte{ position:sticky; top:104px; }
.ficha-arte .cm-num{ font-size:.82rem; }
.ficha-arte .cm-nombre{ font-size:.68rem; }
.ficha-frances{
  margin-top:12px; text-align:center;
  font-family:var(--voz); font-style:italic; font-size:1rem; color:var(--lavanda);
}
.ficha h3{ font-family:var(--titulo); font-size:clamp(1.5rem,1.2rem + 1vw,2rem); color:var(--marfil); }
.ficha .clave{
  font-family:var(--voz); font-style:italic; font-weight:500;
  font-size:clamp(1.2rem,1.05rem + .6vw,1.45rem); color:var(--lavanda); margin-top:8px;
}
.ficha dl{ margin:26px 0 0; display:grid; gap:20px; }
.ficha dt{
  font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--oro); margin-bottom:6px;
}
.ficha dd{ margin:0; color:var(--texto-tenue); font-size:.98rem; text-wrap:pretty; }
.ficha .ojo{ border-left:2px solid var(--oro); padding-left:18px; }
.ficha .ojo dd{ color:var(--texto); }

/* ==========================================================================
   LA MESA DE LECTURA
   Tres cartas al azar que NO predicen nada: muestran como se estructura una
   tirada. Es coherente con la posicion de Fabiana ("no adivino") y con la voz
   de marca de la carpeta ("evitar promesas absolutas").
   ========================================================================== */
.mesa{
  border:1px solid var(--filete); padding:clamp(26px,4vw,44px);
  background:linear-gradient(168deg, rgba(52,26,69,.45), rgba(27,16,38,.45));
  margin-top:44px; position:relative;
}
.mesa-tapete{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,2.4vw,26px); margin-top:28px;
  /* sin tope, en escritorio cada carta pasa de 600 px de alto */
  max-width:700px;
}
.puesto{ display:flex; flex-direction:column; }
.puesto-rotulo{
  font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--oro); text-align:center; margin-bottom:12px; min-height:3.4em;
}
.puesto-rotulo small{ display:block; font-weight:400; letter-spacing:.03em;
  text-transform:none; color:var(--texto-tenue); font-size:.92em; margin-top:3px; }

/* volteo */
.volteo{ perspective:1200px; }
.volteo-cara{
  position:relative; aspect-ratio:var(--carta);
  transform-style:preserve-3d;
  transition:transform .85s var(--curva);
}
.puesto[data-visible="true"] .volteo-cara{ transform:rotateY(180deg); }
.volteo-dorso,.volteo-frente{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.volteo-frente{ transform:rotateY(180deg); }
.volteo-dorso{
  border:1px solid rgba(214,168,79,.4);
  background:var(--berenjena) url("../assets/dorso.svg") center/56px 56px repeat;
}
.volteo-dorso::after{
  content:"XII"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--titulo); font-weight:600; font-size:.9rem; letter-spacing:.2em;
  color:rgba(214,168,79,.8);
  background:radial-gradient(closest-side, rgba(27,16,38,.94) 34%, transparent 72%);
}
.volteo-cara .carta-marsella{ width:100%; height:100%; }

.puesto-lectura{
  margin-top:16px;
  opacity:0; transition:opacity .5s var(--curva) .4s;
}
.puesto[data-visible="true"] .puesto-lectura{ opacity:1; }
.puesto-lectura .nombre{
  font-family:var(--titulo); font-size:.95rem; color:var(--marfil); letter-spacing:.04em;
}
.puesto-lectura .clave{ font-family:var(--voz); font-style:italic; color:var(--lavanda);
  font-size:1.02rem; margin-top:2px; }
.puesto-lectura p{ font-size:.9rem; color:var(--texto-tenue); margin-top:10px; }
.puesto-lectura a{ color:var(--oro-hueso); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--filete); font-size:.85rem; }
.puesto-lectura a:hover{ text-decoration-color:var(--oro); }

.mesa-pie{
  margin-top:32px; padding-top:24px; border-top:1px solid var(--filete-suave);
  display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between;
}
.mesa-aviso{
  font-family:var(--voz); font-style:italic; font-size:1.05rem;
  color:var(--lavanda); max-width:46ch;
}
.mesa-sinjs{
  margin-top:24px; padding:18px 20px; border:1px dashed var(--filete);
  font-size:.92rem; color:var(--texto-tenue);
}
.js .mesa-sinjs{ display:none; }

@media (max-width:860px){
  .ficha{ grid-template-columns:1fr; }
  .ficha-arte{ position:static; max-width:200px; margin-inline:auto; }
  .atlas-rejilla{ grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
}
@media (max-width:560px){
  .mesa-tapete{ gap:9px; }
  .puesto-rotulo{ font-size:.56rem; letter-spacing:.08em; min-height:4em; }
  .carta-marsella{ padding:8px 5px 7px; }
  .carta-marsella .cm-num{ font-size:.56rem; }
  .carta-marsella .cm-nombre{ font-size:.48rem; letter-spacing:.04em; }
  .puesto-lectura .nombre{ font-size:.82rem; }
  .puesto-lectura .clave{ font-size:.9rem; }
  .puesto-lectura p{ font-size:.82rem; }
}

/* ==========================================================================
   PRIORIDAD CELULAR
   Ajustes medidos sobre un viewport de 390 px, que es donde vive la mayoría
   del tráfico de este sitio.
   ========================================================================== */

/* El anillo astral se sale del marco por diseño. En .portada y .cierre ya
   estaba recortado; en cualquier otra sección que lo use, faltaba, y en
   celular eso genera scroll horizontal. */
.seccion:has(.anillo){ overflow:clip; }

/* Barra de contacto fija en celular.
   Todo el sitio cierra en WhatsApp: tener el botón siempre a mano evita que
   alguien tenga que volver hasta arriba para escribir. */
.barra-movil{
  position:fixed; inset:auto 0 0; z-index:98;
  display:none; padding:10px var(--canto) calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(18,10,26,.72), rgba(18,10,26,.97) 42%);
  border-top:1px solid var(--filete);
}
.barra-movil .btn{ width:100%; padding:15px 20px; }
.cajon[data-abierto="true"] ~ .barra-movil,
body:has(.cajon[data-abierto="true"]) .barra-movil{ display:none; }

@media (max-width:1000px){
  .barra-movil{ display:block; }
  body{ padding-bottom:80px; }
}

/* --------------------------------------------------------- mesa de lectura */
/* En 390 px, tres columnas dejaban cada carta en 92 px y el texto de la
   lectura en una columna de 92 px de ancho por 395 de alto: ilegible.
   Debajo de 680 px cada puesto pasa a ser una fila: carta chica y texto al
   lado, que es como se leería en una mesa de verdad. */
@media (max-width:680px){
  .mesa-tapete{ grid-template-columns:1fr; gap:0; max-width:none; }
  .puesto{
    display:grid;
    grid-template-columns:96px minmax(0,1fr);
    grid-template-areas:"rotulo rotulo" "carta texto";
    column-gap:16px; row-gap:10px;
    align-items:start;
    padding-block:22px;
    border-top:1px solid var(--filete-suave);
  }
  .puesto:first-child{ border-top:0; padding-top:6px; }
  .puesto-rotulo{
    grid-area:rotulo; text-align:left; min-height:0; margin-bottom:0;
    font-size:.62rem; letter-spacing:.14em;
  }
  .puesto-rotulo small{ display:inline; margin-left:.6em; letter-spacing:.02em; }
  .volteo{ grid-area:carta; }
  .puesto-lectura{ grid-area:texto; margin-top:0; }
  .puesto-lectura .nombre{ font-size:.95rem; }
  .puesto-lectura .clave{ font-size:1.05rem; }
  .puesto-lectura p{ font-size:.88rem; margin-top:8px; }
  .mesa-pie{ display:block; }
  .mesa-pie .btn{ width:100%; margin-top:18px; }
  .mesa-aviso{ max-width:none; }
}

/* ------------------------------------------------------- cartas de Marsella */
/* El nombre de la carta en la rejilla del atlas quedaba en 7,7 px. */
@media (max-width:560px){
  .carta-marsella .cm-num{ font-size:.62rem; letter-spacing:.1em; }
  .carta-marsella .cm-nombre{ font-size:.6rem; letter-spacing:.05em; }
  .atlas-rejilla{ grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:12px; }
  .atlas-rejilla .cm-nombre{ font-size:.66rem; letter-spacing:.03em; }
}

/* ---------------------------------------------------------------- portada */
@media (max-width:1040px){
  /* la foto quedaba enorme y flotando, con mucho aire arriba y abajo */
  .portada-figura{ max-width:290px; margin-top:0; }
  .portada-caja{ gap:26px; }
}
@media (max-width:560px){
  .portada{ padding-bottom:clamp(40px,6vw,64px); }
  /* los tres datos de confianza se apilaban en tres renglones sueltos */
  .portada-firma{ gap:8px 18px; margin-top:26px; padding-top:18px; font-size:.78rem; }
  .portada-figura{ max-width:250px; }
}

/* ------------------------------------------------------ tarjetas de ruta */
@media (max-width:560px){
  .ruta .emblema{ width:56px; margin-bottom:14px; }
  .ruta h3{ min-height:0; }
  .rutas{ gap:16px; }
}

/* --------------------------------------------------------- objetivos táctiles */
/* Los enlaces del pie medían 18 px de alto. En celular eso es un blanco
   difícil de acertar con el pulgar. */
@media (max-width:1000px){
  .pie-sitio ul{ gap:2px; }
  .pie-sitio ul a{ display:inline-flex; align-items:center; min-height:44px; }
  .pie-legal{ gap:14px 22px; }
  .pie-legal a{ display:inline-flex; align-items:center; min-height:36px; }
  .faq summary{ padding-block:20px; }
}

/* --------------------------------------------------- acortar la home en celular
   Medido en 390 px: las cuatro tarjetas de ruta ocupaban 1.929 px y los tres
   testimonios 1.587. Entre las dos cosas, casi un tercio de la página. */

@media (max-width:560px){
  /* La tarjeta de ruta pasa de bloque apilado a fila: emblema a la izquierda y
     texto al lado. Además de ocupar la mitad, se recorre más rápido con el
     pulgar, que es de lo que se trata un menú de cuatro caminos. */
  .ruta{
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    column-gap:16px;
    align-items:start;
    padding:28px 20px 22px;
  }
  .ruta .emblema{ grid-column:1; grid-row:1 / span 4; width:46px; margin:3px 0 0; }
  .ruta h3,
  .ruta .para,
  .ruta p,
  .ruta .pie{ grid-column:2; }
  .ruta h3{ grid-row:1; font-size:1.1rem; min-height:0; }
  .ruta .para{ grid-row:2; font-size:.98rem; }
  .ruta p{ grid-row:3; margin-top:10px; font-size:.92rem; }
  .ruta .pie{ grid-row:4; margin-top:16px; padding-top:14px; }
}

@media (max-width:680px){
  /* Tres testimonios apilados son 1.587 px que casi nadie recorre entero.
     Pasan a una tira que se desliza con el dedo: siguen los tres en el HTML,
     pero ocupan una sola altura. */
  .testimonios{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:84%;
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    margin-inline:calc(var(--canto) * -1);
    padding:4px var(--canto) 16px;
    scrollbar-width:none;
  }
  .testimonios::-webkit-scrollbar{ display:none; }
  .testimonio{ scroll-snap-align:center; padding:30px 24px 26px; }
  .testimonio blockquote{ font-size:1.08rem; }
  .pista-lateral{ display:block; }
}
.pista-lateral{
  display:none; margin-top:14px; text-align:center;
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-tenue);
}
.pista-lateral::after{ content:" →"; color:var(--oro); }

/* Un poco menos de aire entre secciones, solo en pantallas chicas. */
@media (max-width:560px){
  .seccion{ padding-block:60px; }
}

@media (max-width:560px){
  /* En la home, la sección ya presenta la mesa con su propio título y bajada;
     el encabezado interno de la mesa repetía lo mismo dos veces seguidas.
     Se oculta solo acá: en la página del curso y en el atlas sí hace falta. */
  #mesa .mesa > .epigrafe,
  #mesa .mesa > .bajada{ display:none; }
  #mesa .mesa > .h-menor{ margin-top:0; }

  /* El retrato en 4:5 a ancho completo son 432 px de alto. */
  .retrato img{ aspect-ratio:1 / 1; }
}

/* Con seis entradas el menú se apretaba y partía "Los 22 arcanos" en dos
   renglones, que desalineaba toda la cabecera. */
.menu{ gap:clamp(18px,2.4vw,34px); }
.menu a{ white-space:nowrap; }
.sello-nombre{ white-space:nowrap; }

/* Entre 861 y 1100 px la cabecera no entra: sello + seis entradas de menú + el
   botón sumaban 1.014 px en una caja de 980, y el botón se salía del viewport.
   No se veía como scroll horizontal porque la cabecera es fixed. */
@media (max-width:1100px){
  .cabecera-cta .btn{ padding:11px 15px; font-size:.66rem; letter-spacing:.08em; }
  .sello-nombre{ font-size:.86rem; letter-spacing:.07em; }
  .sello-disco{ width:40px; height:40px; }
  .menu{ gap:clamp(14px,1.9vw,34px); }
  .menu a{ font-size:.7rem; letter-spacing:.13em; }
}

/* La pista de "deslizá" quedaba tapada por su propia regla base, que estaba
   escrita despues del media query. */
@media (max-width:680px){
  .pista-lateral{ display:block; }
}