/* Erku Tarot · estilos comunes y de la portada */
@font-face{font-family:"Cormorant";src:url(../fuentes/cormorant-garamond-latin-500-normal.woff2?v=edfa21ab) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cormorant";src:url(../fuentes/cormorant-garamond-latin-600-normal.woff2?v=a65fe668) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Cormorant";src:url(../fuentes/cormorant-garamond-latin-500-italic.woff2?v=384df4e1) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url(../fuentes/jost-latin-400-normal.woff2?v=cd0ebcef) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url(../fuentes/jost-latin-500-normal.woff2?v=98e6d384) format("woff2");font-weight:500;font-display:swap}

:root{
  --noche:#120a1c; --noche-2:#1b0f29; --morado-osc:#26122E; --morado:#5C3968; --lavanda:#A988A4;
  --oro:#CCA275; --oro-claro:#E8C990; --crema:#EFE8DD; --texto:#EDE4F2; --texto-2:#C9B8D4;
  --curva:cubic-bezier(.16,1,.3,1);
  --serif:"Cormorant",Georgia,"Times New Roman",serif; --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark}
body{margin:0;background:var(--noche);color:var(--texto);font:400 1.0625rem/1.65 var(--sans);overflow-x:hidden}
img,video,canvas{display:block;max-width:100%}
a{color:var(--oro-claro)}
:focus-visible{outline:2px solid var(--oro-claro);outline-offset:3px;border-radius:4px}
.solo-lectores{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Cabecera y menú de cartas ── */
.cabecera{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:flex-start;justify-content:space-between;
  padding:clamp(12px,2.2vw,28px) clamp(16px,3vw,40px);pointer-events:none}
.cabecera>*{pointer-events:auto}
.cabecera__logo img{width:clamp(150px,15vw,230px);height:auto;filter:drop-shadow(0 4px 18px rgba(0,0,0,.5))}
.cartas-menu{display:flex;gap:2px;margin:0;padding:6px 6px 0;list-style:none}
.cartas-menu li{--giro:0deg;transform:rotate(var(--giro));transform-origin:50% 120%;transition:transform .5s var(--curva)}
.cartas-menu li:nth-child(1){--giro:-9deg}.cartas-menu li:nth-child(3){--giro:9deg}
.carta-enlace{display:block;text-decoration:none;color:var(--texto);text-align:center;perspective:600px}
.carta-enlace__giro{position:relative;display:block;width:clamp(52px,5vw,74px);aspect-ratio:640/954;transform-style:preserve-3d;
  transition:transform .7s var(--curva)}
.carta-enlace__cara{position:absolute;inset:0;backface-visibility:hidden;border-radius:6px;overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 0 1px rgba(232,201,144,.25)}
.carta-enlace__cara img{width:100%;height:100%;object-fit:cover}
.carta-enlace__cara--frente{transform:rotateY(180deg)}
.carta-enlace__nombre{display:block;margin-top:8px;font:500 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto-2);transition:color .3s}
.cartas-menu li:hover,.cartas-menu li:focus-within{transform:rotate(0deg) translateY(-6px)}
.carta-enlace:hover .carta-enlace__giro,.carta-enlace:focus-visible .carta-enlace__giro,.carta-enlace[aria-current] .carta-enlace__giro{transform:rotateY(180deg)}
.carta-enlace:hover .carta-enlace__nombre,.carta-enlace[aria-current] .carta-enlace__nombre{color:var(--as-enlace-hover)}

/* ── Botones ── */
.botones{display:flex;flex-wrap:wrap;gap:12px}
.boton{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:999px;text-decoration:none;
  font:500 1rem/1.1 var(--sans);letter-spacing:.02em;transition:transform .2s var(--curva),box-shadow .3s,background .3s}
.boton svg{width:20px;height:20px;flex:none}
.boton--oro{background:linear-gradient(135deg,#E8C990,#CCA275);color:#2a1433;box-shadow:0 8px 28px rgba(204,162,117,.28)}
.boton--oro:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(204,162,117,.42)}
.boton--claro{background:rgba(255,255,255,.06);color:var(--texto);border:1px solid rgba(232,201,144,.45);backdrop-filter:blur(6px)}
.boton--claro:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}

/* ── Pie de AS ── */
.pie-as{margin:0;font:400 .78rem/1.5 var(--sans);color:var(--texto-2);text-align:center}
.pie-legal{font:400 .78rem/1.5 var(--sans);text-align:center;margin:0 0 4px}
.pie-legal a{color:var(--texto-2)}

/* ══ PORTADA ══ */
.portada{background:radial-gradient(120% 80% at 50% 20%,#2a1640 0%,#170c25 55%,#0d0716 100%)}
.escena{position:relative;width:100%;height:100svh;overflow:hidden}
.escena__marco{position:absolute;left:0;top:0;width:100vw;height:56.25vw;will-change:transform}
.escena__marco video,.escena__marco img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#astros{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#cielo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.velo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.escena__nombre{position:absolute;pointer-events:none;font:italic 500 1.15rem/1 var(--serif);color:var(--crema);letter-spacing:.04em;
  opacity:0;transform:translate(-50%,-50%);transition:opacity .4s;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.escena__nombre.visible{opacity:1}

.mensaje{position:absolute;z-index:20;transition:opacity .15s linear;left:50%;top:clamp(70px,9vh,110px);transform:translateX(-50%);width:min(760px,92vw);text-align:center}
.mensaje h1{margin:0;font:500 clamp(1.8rem,3vw,2.7rem)/1.05 var(--serif);letter-spacing:.01em;color:var(--crema);
  text-shadow:0 2px 24px rgba(10,4,20,.8)}
.mensaje h1 em{display:block;font-style:italic;color:var(--oro-claro);font-size:.62em;margin-top:.35em}
.mensaje p{margin:.6rem auto 1rem;max-width:34em;color:var(--texto);font-size:clamp(.98rem,1.15vw,1.1rem);text-shadow:0 1px 14px rgba(10,4,20,.9)}
.mensaje .botones{justify-content:center}
.portada .pie{position:relative;z-index:1}
.portada .pie-as{text-shadow:0 1px 8px #000}

/* Entrada a la habitación */
.entrada{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#0b0613;
  clip-path:circle(150% at 50% 55%);transition:clip-path 1.6s var(--curva),opacity .4s 1.4s}
.entrada img{width:min(260px,52vw);height:auto;opacity:0;transform:translateY(10px);animation:aparece 1s .15s var(--curva) forwards}
.entrada span{position:absolute;bottom:14vh;left:0;right:0;text-align:center;font:500 .8rem/1 var(--sans);letter-spacing:.3em;
  text-transform:uppercase;color:var(--texto-2);opacity:0;animation:aparece 1s .6s var(--curva) forwards}
.entrada.abriendo{clip-path:circle(0% at 50% 55%);opacity:0}
.entrada.oculta{display:none}
.escena.entrando .escena__marco{transform:scale(1.12);filter:blur(6px)}
.escena .escena__marco{transition:transform 2.2s var(--curva),filter 1.8s var(--curva)}
@keyframes aparece{to{opacity:1;transform:none}}

/* Móvil en vertical: el vídeo abajo y el cielo encima */
@media (orientation:portrait){
  .cabecera{align-items:center;padding-top:10px;padding-bottom:18px}
  .cabecera__logo img{width:132px}
  .carta-enlace__giro{width:38px}
  .carta-enlace__nombre{font-size:.7rem;letter-spacing:.08em;margin-top:5px}
  .carta-enlace{min-width:46px}
  .cartas-menu{gap:6px}
  .mensaje{top:auto;bottom:auto;top:clamp(120px,19vh,170px)}
  .mensaje p{font-size:.98rem}
}
@media (max-height:620px) and (orientation:landscape){.mensaje p{display:none}.mensaje{top:70px}}

/* ══ PÁGINAS INTERIORES ══ */
.interior{background:radial-gradient(120% 60% at 50% 0%,#2a1640 0%,#170c25 50%,#0d0716 100%) fixed}
.interior #cielo{position:fixed;inset:0;z-index:0}
.contenido{position:relative;z-index:1}
.seccion{width:min(1080px,92vw);margin:0 auto;padding:clamp(56px,9vw,120px) 0}
.etiqueta{font:500 .78rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}
.titulo{margin:.5rem 0 1rem;font:500 clamp(2.2rem,5vw,4rem)/1.05 var(--serif);color:var(--crema)}
.titulo em{color:var(--oro-claro)}
.subtitulo{margin:0 0 .8rem;font:500 clamp(1.6rem,3vw,2.3rem)/1.15 var(--serif);color:var(--crema)}
.texto-grande{font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--texto)}
.texto-2{color:var(--texto-2)}
.dos-col{display:grid;grid-template-columns:1fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (min-width:860px){.dos-col{grid-template-columns:1fr 1fr}}
.foto-erku{border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(232,201,144,.25)}
.foto-erku img{width:100%;height:auto}

/* Cartas que se dan la vuelta al bajar */
.tirada{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;margin-top:28px}
.carta-flip{perspective:900px}
.carta-flip__giro{position:relative;aspect-ratio:640/954;transform-style:preserve-3d;transition:transform 1.1s var(--curva);transform:rotateY(0deg)}
.carta-flip.vista .carta-flip__giro{transform:rotateY(180deg)}
.carta-flip__cara{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 1px rgba(232,201,144,.3)}
.carta-flip__cara img{width:100%;height:100%;object-fit:cover}
.carta-flip__cara--frente{transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;gap:10px;padding:22px;
  background:linear-gradient(160deg,#3a1d52,#1d0e2b);border:1px solid rgba(232,201,144,.4);text-align:center}
.carta-flip__cara--frente h3{margin:0;font:600 1.5rem/1.15 var(--serif);color:var(--oro-claro)}
.carta-flip__cara--frente p{margin:0;font-size:.98rem;color:var(--texto)}
.carta-flip__cara--frente .numero{font:500 .8rem/1 var(--sans);letter-spacing:.25em;color:var(--oro)}
.precio{font:600 2.6rem/1 var(--serif)!important;color:var(--crema)!important}

.lista-limpia{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lista-limpia li{padding-left:28px;position:relative}
.lista-limpia li::before{content:"✦";position:absolute;left:0;top:0;color:var(--oro)}
.recuadro{padding:clamp(22px,3vw,34px);border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(232,201,144,.25)}
.pie{padding:36px 16px 22px;border-top:1px solid rgba(232,201,144,.15);position:relative;z-index:1}
.interior .cabecera{position:sticky;background:linear-gradient(to bottom,rgba(13,7,22,.92),rgba(13,7,22,0))}

/* Contacto */
.contacto-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:26px}
.contacto-tarjeta{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:16px;text-decoration:none;color:var(--texto);
  background:rgba(255,255,255,.045);border:1px solid rgba(232,201,144,.28);transition:transform .3s var(--curva),background .3s}
.contacto-tarjeta:hover{transform:translateY(-4px);background:rgba(255,255,255,.08)}
.contacto-tarjeta strong{font:600 1.35rem/1.2 var(--serif);color:var(--oro-claro)}
.contacto-tarjeta span{color:var(--texto-2);font-size:.95rem}
.pasos{counter-reset:paso;list-style:none;padding:0;margin:0;display:grid;gap:14px}
.pasos li{counter-increment:paso;padding-left:48px;position:relative}
.pasos li::before{content:counter(paso);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font:600 1.1rem/1 var(--serif);color:#2a1433;background:var(--oro)}
.legal h2{font:600 1.5rem/1.2 var(--serif);color:var(--crema);margin:2rem 0 .5rem}

/* Animación de entrada de bloques */
.revela{opacity:0;transform:translateY(20px);transition:opacity .8s var(--curva),transform .8s var(--curva)}
.revela.vista{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .revela{opacity:1;transform:none}
}
.contenido>.seccion:first-child{padding-top:clamp(16px,3vw,40px)}

/* Botones WhatsApp y Llamar: a la derecha bajo las cartas; en el móvil, anclados abajo (Walter) */
.cabecera__derecha{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.acciones{flex-direction:column;align-items:stretch;gap:10px;width:max-content;min-width:200px}
.acciones .boton{white-space:nowrap}
.acciones .boton{justify-content:center;min-height:44px;padding:10px 18px;font-size:.95rem}
@media (max-width:760px),(orientation:portrait) and (max-width:1024px){
  .acciones{position:fixed;left:0;right:0;bottom:0;z-index:45;width:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(13,7,22,.88);backdrop-filter:blur(10px);
    border-top:1px solid rgba(232,201,144,.2)}
  .acciones .boton{min-height:48px}
  .acciones .ancho{display:none}
  .portada{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .interior{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}
.boton .ancho{margin-right:-10px}
/* Botones que relucen como estrellas */
.boton{position:relative;overflow:visible}
.boton:hover{box-shadow:0 0 0 1px rgba(255,236,190,.7),0 0 22px rgba(255,214,140,.55),0 0 46px rgba(204,162,117,.35)}
.boton--claro:hover{border-color:rgba(255,236,190,.85)}
.destello{position:absolute;width:var(--t,8px);height:var(--t,8px);pointer-events:none;transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,#fff 0 18%,rgba(255,236,190,.95) 30%,rgba(255,214,140,0) 70%);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter:drop-shadow(0 0 4px rgba(255,220,150,.9));animation:destello 900ms var(--curva) forwards}
@keyframes destello{0%{transform:translate(-50%,-50%) scale(0) rotate(0deg);opacity:0}
  35%{transform:translate(-50%,-50%) scale(1.25) rotate(25deg);opacity:1}
  100%{transform:translate(-50%,-50%) scale(0) rotate(70deg);opacity:0}}

/* Estrella fugaz que cruza «Erku Tarot» cada 5 s y enciende las letras al pasar (Walter) */
.titulo-luz{position:relative;display:inline-block}
.titulo-luz::after{content:attr(data-texto);position:absolute;inset:0;color:transparent;pointer-events:none;
  background:linear-gradient(100deg,transparent 42%,rgba(255,244,214,.9) 47.5%,#ffe2a0 50%,rgba(255,244,214,.9) 52.5%,transparent 58%);
  background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 10px rgba(255,214,140,.85));animation:titulo-destello 5s 1.2s linear infinite}
@keyframes titulo-destello{0%,3%{background-position:100% 0}25%,100%{background-position:0% 0}}
.fugaz-titulo{--largo:clamp(70px,9vw,130px);position:absolute;left:-35%;top:-40%;width:var(--largo);margin-left:calc(-1 * var(--largo));height:2px;border-radius:2px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(255,240,210,0),rgba(255,236,190,.55) 60%,#fff);transform:rotate(16deg);transform-origin:100% 50%;
  filter:drop-shadow(0 0 6px rgba(255,220,150,.9));animation:titulo-fugaz 5s 1.2s cubic-bezier(.35,.1,.3,1) infinite}
.fugaz-titulo::after{content:"";position:absolute;right:-4px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 35%,rgba(255,226,160,.9) 50%,rgba(255,214,140,0) 75%);box-shadow:0 0 14px 4px rgba(255,226,160,.75)}
@keyframes titulo-fugaz{
  0%{left:-35%;top:-45%;opacity:0}
  3%{opacity:1}
  22%{left:108%;top:85%;opacity:1}
  27%{left:122%;top:110%;opacity:0}
  100%{left:122%;top:110%;opacity:0}}
@media (prefers-reduced-motion:reduce){.titulo-luz::after,.fugaz-titulo{animation:none;display:none}}

/* Enlaces sin subrayado en todas las páginas; al pasar el cursor cambian de color (Walter) */
a{text-decoration:none;transition:color .25s}
.contacto-tarjeta:hover strong{color:var(--as-enlace-hover)}
.carta-enlace:hover{color:inherit}
.boton--oro:hover{color:#2a1433}.boton--claro:hover{color:var(--texto)}

/* Móvil en vertical: solo el título, para que el sol, la luna y el eclipse se vean limpios */
@media (orientation:portrait) and (max-width:600px){
  .mensaje{top:clamp(96px,13vh,120px)}
  .mensaje p{display:none}
}

/* ==========================================================================
   AS Digital Intelligence · Enlaces sin subrayado y crédito del pie con destello
   Norma de Walter (04/11/2026), para TODAS las webs de AS (hechas y futuras).
   Se pega al FINAL de la hoja de estilos principal de cada web (o se importa).
   Detalle: 00 BOVEDA CLAUDE/04 CONOCIMIENTO/Pie de página de las webs AS.md

   1. Ningún enlace lleva subrayado (ni en reposo ni al pasar el cursor).
      Se distinguen por color, peso o forma de botón, nunca por la raya.
   2. «Diseño web por AS Digital Intelligence» (y sus traducciones):
      - mismo tamaño, peso y letra que el resto de la línea del pie;
      - Azul Señal #0074FE, también sobre pie oscuro;
      - al pasar el cursor, un destello eléctrico cruza el texto de izquierda
        a derecha (el de Sala AS: blanco con halo cian) y no se queda encima;
      - con «reducir movimiento», sin animación (solo un halo suave).
   HTML del crédito:
   <a class="as-credito" href="https://www.asdigitalintelligence.es" target="_blank" rel="noopener">Diseño web por AS Digital Intelligence</a>
   ========================================================================== */

a,
a:hover,
a:focus,
a:active,
a:visited {
  text-decoration: none !important;
}

/* 1 bis. Al pasar el cursor, todo enlace de texto CAMBIA DE COLOR al acento de la
   web y se ilumina un poco (Walter, 04/11/2026). Cada web pone su acento en
   --as-enlace-hover (en :root y, si hace falta contraste, otro valor en sus
   zonas oscuras: pie, cabecera sobre foto, bloques negros).
   ¡OBLIGATORIO DEFINIRLO EN CADA WEB! Si falta, el enlace NO conserva su color:
   toma el del texto de alrededor (comprobado en Chrome, 04/11/2026; ningún valor
   de reserva lo evita). Comprobar siempre al pasar el cursor.
   (Sin valor por defecto en :root: este CSS va el último y pisaría el de la web.)
   Este archivo es común: solo lo cambia el coordinador; los ajustes de cada web,
   en su propio CSS.
   Los enlaces con forma de BOTÓN o TARJETA llevan la clase «as-boton»: no cambian
   el color del texto (desaparecería sobre su fondo) y conservan su propio efecto.

   1 ter. SIEMPRE SE ENCIENDE, NUNCA SE APAGA (Walter, 04/11/2026: «el color se
   opaca; este acto tiene que llamar la atención; los pequeños detalles son lo más
   importante»). --as-enlace-hover es el acento VIVO de la web, nunca una versión
   oscura; los botones pasan a un tono más claro, nunca a su «-osc». Aquí: halo
   visible en los enlaces y, en todo «as-boton», más luz y color, y se eleva 2 px.
   Cada web puede añadir en su CSS el halo de su color en botones y tarjetas.  */
a:not(.as-credito):not(.as-boton) {
  transition: color .2s ease, text-shadow .2s ease, filter .2s ease;
}
@media (hover: hover) {
  a:not(.as-credito):not(.as-boton):hover,
  a:not(.as-credito):not(.as-boton):focus-visible {
    color: var(--as-enlace-hover); /* la web DEBE definir --as-enlace-hover (ver arriba) */
    text-shadow: 0 0 .45em color-mix(in srgb, currentColor 55%, transparent),
                 0 0 1.1em color-mix(in srgb, currentColor 35%, transparent);
  }
}

.as-boton {
  transition: transform .2s ease, box-shadow .25s ease, filter .25s ease,
              background-color .25s ease, color .25s ease, border-color .25s ease;
}
@media (hover: hover) {
  .as-boton:hover,
  .as-boton:focus-visible {
    filter: brightness(1.12) saturate(1.2);
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .as-boton:hover,
  .as-boton:focus-visible { transform: none; }
}

/* 1 quater. DESTELLO EN TODOS LOS BOTONES (Walter, 06/11/2026: «quiero que todos
   los botones tengan el efecto eléctrico de izquierda a derecha»). Al pasar el
   cursor, una franja de luz (blanco con halo cian, la del crédito y Sala AS) cruza
   todo «as-boton» de izquierda a derecha, una sola vez, y no se queda encima.
   Usa el ::before del botón: si una web ya usa ::before en un «as-boton», ese
   botón lleva su efecto en otro elemento (un <span> interior) o se ajusta en su CSS.
   La posición y el recorte van con :where() (peso cero): si la web da otra
   posición a su botón, manda la suya. Con «reducir movimiento», sin destello.  */
:where(.as-boton) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Un <button> no hereda la letra de la web: sale en Arial y más bajo que los
   enlaces con forma de botón (Michelin, 06/11/2026). Peso cero: la web manda. */
:where(button.as-boton) {
  font-family: inherit;
  line-height: inherit;
}
.as-boton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(105deg,
    transparent 0%, transparent 40%,
    rgba(127, 227, 255, .6) 46%, rgba(255, 255, 255, .95) 50%, rgba(127, 227, 255, .6) 54%,
    transparent 60%, transparent 100%) no-repeat;
  background-size: 250% 100%;
  background-position: 100% 0;
  opacity: 0;
}
@media (hover: hover) {
  .as-boton:hover::before,
  .as-boton:focus-visible::before {
    opacity: 1;
    animation: as-destello-electrico .7s ease-out 1 both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .as-boton::before { display: none; }
}

.as-credito {
  color: #0074FE !important;
  font: inherit !important;          /* mismo tamaño, peso y letra que lo demás */
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  text-decoration: none !important;
  white-space: nowrap;
  background: none;
}

@keyframes as-destello-electrico {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

@media (hover: hover) {
  .as-credito:hover,
  .as-credito:focus-visible {
    background-image: linear-gradient(105deg,
      #0074FE 0%, #0074FE 40%,
      #7FE3FF 46%, #FFFFFF 50%, #7FE3FF 54%,
      #0074FE 60%, #0074FE 100%);
    background-size: 250% 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 6px rgba(0, 211, 255, .55));
    animation: as-destello-electrico .7s ease-out 1 both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .as-credito:hover,
  .as-credito:focus-visible {
    animation: none;
    background-image: none;
    -webkit-text-fill-color: #0074FE;
    filter: drop-shadow(0 0 4px rgba(0, 211, 255, .45));
  }
}

/* Acento VIVO de los enlaces al pasar el cursor (norma de Walter 04/11/2026; el bloque común no se toca) */
:root{--as-enlace-hover:#FFD98A}
.boton.as-boton:hover,.boton.as-boton:focus-visible{box-shadow:0 0 0 1px rgba(255,236,190,.9),0 0 26px rgba(255,214,140,.65),0 0 52px rgba(204,162,117,.4)}
.boton--oro.as-boton:hover{background:#F3CF98}
.contacto-tarjeta.as-boton:hover,.contacto-tarjeta.as-boton:focus-visible{border-color:#FFD98A;box-shadow:0 0 0 1px #FFD98A,0 0 28px rgba(255,214,140,.45)}
.cabecera__logo.as-boton:hover,.carta-enlace.as-boton:hover{filter:brightness(1.12) saturate(1.2) drop-shadow(0 0 12px rgba(255,214,140,.7))}

/* ── Mejoras de la Oficina AS (Salomé, 11/11/2026) ── */
/* El destello común de AS: los botones dejan salir sus estrellas doradas (brillo.js) y las cartas del menú y el
   logo conservan su propio efecto, sin recortes ni franja encima */
.boton.as-boton{overflow:visible}
.carta-enlace.as-boton,.cabecera__logo.as-boton{overflow:visible}
.carta-enlace.as-boton::before,.cabecera__logo.as-boton::before{display:none}
/* A1 · en las interiores, cartas y botones en fila: la cabecera baja de 304 a unos 150 px */
@media (min-width:761px) and (orientation:landscape),(min-width:1025px){
  .interior .cabecera__derecha{flex-direction:row;align-items:center;gap:22px}
  .interior .acciones{flex-direction:row;width:auto;min-width:0}
  .interior .acciones .boton{padding:10px 16px}
}
/* A2 · la cabecera fija del móvil ya no pisa el texto al bajar */
@media (max-width:760px),(orientation:portrait) and (max-width:1024px){
  .interior .cabecera{background:rgba(13,7,22,.96);border-bottom:1px solid rgba(232,201,144,.15)} /* sin backdrop-filter: haría que la barra fija de abajo se pegara a la cabecera */
}
/* A3 · cartas de barajas y precios de dos en dos en el móvil */
@media (max-width:600px){
  .tirada{grid-template-columns:repeat(2,1fr);gap:14px}
  .carta-flip__cara--frente{padding:14px;gap:6px}
  .carta-flip__cara--frente h3{font-size:1.2rem}
  .carta-flip__cara--frente p{font-size:.9rem}
  .carta-flip__cara--frente .numero{font-size:.7rem;letter-spacing:.16em}
  .precio{font-size:2rem!important}
}
/* M2 · saltar al contenido con el teclado */
.salto{position:absolute;left:12px;top:-80px;z-index:100;padding:10px 16px;background:var(--oro-claro);color:#2a1433;border-radius:10px;font:500 .95rem/1 var(--sans)}
.salto:focus{top:12px}
/* M3 · enlaces del pie más fáciles de pulsar con el dedo */
.pie a{display:inline-block;padding:12px 6px}
.pie a.as-credito{padding:12px 0}
@media (max-width:760px){.pie-as,.pie-legal{font-size:.82rem}}
/* M5 · tableta en horizontal: el texto de la portada no toca los botones */
@media (min-width:761px) and (max-width:1180px) and (orientation:landscape){.mensaje{width:calc(100vw - 560px)}}
/* Preguntas frecuentes (Contacto) */
.preguntas{display:grid;gap:12px;margin-top:22px}
.preguntas details{border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(232,201,144,.22);padding:0 20px}
.preguntas summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;position:relative;font:600 1.2rem/1.3 var(--serif);color:var(--crema)}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"✦";position:absolute;right:0;top:16px;color:var(--oro);transition:transform .3s var(--curva)}
.preguntas details[open] summary::after{transform:rotate(45deg)}
.preguntas summary:hover,.preguntas summary:focus-visible{color:var(--as-enlace-hover)}
.preguntas details p{margin:0 0 16px;color:var(--texto-2)}
/* La etiqueta de /erku/ forma parte del H1 (SEO) y se ve igual que antes */
.etiqueta--h1{display:block;margin:0 0 .9rem}
/* Al saltar a un apartado (#preguntas-frecuentes), la cabecera fija no tapa su título */
.seccion[id]{scroll-margin-top:170px}
@media (max-width:760px),(orientation:portrait) and (max-width:1024px){.seccion[id]{scroll-margin-top:110px}}

/* Portada con scroll (Walter, 12/11/2026): debajo de la habitación de los gatos, mis barajas y la lectura */
.portada-contenido{position:relative;z-index:1;background:radial-gradient(120% 50% at 50% 0%,#2a1640 0%,#170c25 45%,#0d0716 100%)}
.portada-contenido>.seccion:first-child{padding-top:clamp(56px,8vw,96px)}
.portada .cabecera{transition:background .35s}
.portada .cabecera.con-fondo{background:rgba(13,7,22,.94);border-bottom:1px solid rgba(232,201,144,.15)}
.bajar{position:absolute;z-index:21;left:50%;bottom:clamp(18px,4vh,40px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;
  font:500 .78rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--crema);text-shadow:0 1px 10px #000}
.bajar span{white-space:nowrap}
.bajar svg{width:28px;height:28px;animation:bajar 2.2s ease-in-out infinite}
.bajar:hover,.bajar:focus-visible{color:var(--as-enlace-hover)}
@keyframes bajar{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(6px);opacity:1}}
@media (prefers-reduced-motion:reduce){.bajar svg{animation:none}}
@media (max-width:760px),(orientation:portrait) and (max-width:1024px){.bajar{bottom:calc(86px + env(safe-area-inset-bottom))}}
/* Al bajar, la cabecera de la portada se compacta en una fila (como en las interiores) para no tapar los textos */
@media (min-width:761px) and (orientation:landscape),(min-width:1025px){
  .portada .cabecera.con-fondo{align-items:center;padding-top:10px;padding-bottom:10px}
  .portada .cabecera.con-fondo .cabecera__derecha{flex-direction:row;align-items:center;gap:22px}
  .portada .cabecera.con-fondo .acciones{flex-direction:row;width:auto;min-width:0}
  .portada .cabecera.con-fondo .acciones .boton{padding:10px 16px}
  .portada .cabecera.con-fondo .carta-enlace__giro{width:44px}
  .portada .cabecera.con-fondo .cabecera__logo img{width:150px}
}
.portada .cabecera .carta-enlace__giro,.portada .cabecera .cabecera__logo img{transition:width .35s var(--curva)}