/* Uvamejai · guías interactivas: «Encuentra tu cristal» y «El regalo justo» */

.guia-cabeza{padding:calc(var(--alto-cabecera) + clamp(40px,8vh,90px)) var(--lado) clamp(30px,5vh,56px);
  background:radial-gradient(55% 70% at 80% 30%,rgba(122,59,156,.38),transparent 70%),radial-gradient(40% 50% at 5% 100%,rgba(227,178,76,.1),transparent 70%),var(--noche)}
.guia-cabeza h1{font-size:clamp(2.6rem,6.4vw,5.2rem);line-height:1;letter-spacing:-.02em;margin:0 0 20px;max-width:14ch}
.guia-cabeza h1 em{font-weight:300}
.guia-cabeza .bajada{max-width:56ch;font-size:clamp(1.05rem,1.5vw,1.2rem)}
.guia{padding:10px var(--lado) clamp(80px,10vh,130px);max-width:1180px;margin:0 auto}

.guia-barra{display:flex;gap:8px;margin:0 0 26px}
.guia-barra span{height:4px;flex:1;border-radius:4px;background:rgba(242,235,242,.14);transition:background-color .3s}
.guia-barra .hecho{background:var(--oro)}
.guia-barra .actual{background:var(--oro-claro);box-shadow:0 0 12px rgba(241,205,120,.6)}
.guia-paso h2{font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:1.05;margin:0 0 26px;font-weight:400;letter-spacing:-.01em}
.guia-paso h2 em{font-weight:300}
.guia-paso .a-mano{margin:0 0 6px;font-size:19px;color:var(--oro)}
.guia-atras{background:none;border:0;color:var(--crema-suave);cursor:pointer;font:500 14px var(--texto);padding:0;margin:0 0 14px}
.guia-atras:hover{color:var(--crema)}
.guia-nota{font-size:14.5px;color:var(--crema-suave);margin:0 0 16px;max-width:60ch}

.opciones{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px}
.opcion{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;cursor:pointer;padding:20px 22px;border-radius:20px;
  color:var(--crema);background:rgba(42,25,54,.7);border:1px solid var(--linea);transition:transform .25s var(--curva),border-color .25s,background-color .25s,box-shadow .25s}
.opcion b{font-family:var(--display);font-weight:500;font-size:1.2rem}
.opcion small{font-size:13.5px;color:var(--crema-suave)}
.opcion:hover{transform:translateY(-3px);border-color:rgba(227,178,76,.6);background:var(--ciruela-3)}
.opcion:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
.opcion[aria-pressed="true"]{border-color:var(--oro);box-shadow:0 0 0 1px var(--oro) inset}
.opcion-elem{align-items:center;text-align:center;gap:8px;padding:28px 18px}
.opcion-elem svg{margin-bottom:6px;filter:drop-shadow(0 0 10px var(--c))}
.opcion-elem:hover{border-color:var(--c)}
textarea,.regalo-otro input{width:100%;font:400 16px var(--texto);color:var(--crema);background:rgba(20,11,27,.7);border:1px solid var(--linea);border-radius:16px;padding:14px 16px;resize:vertical}
textarea:focus,.regalo-otro input:focus{outline:2px solid var(--oro);outline-offset:2px}
.guia-acciones{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}

/* el respiro */
.guia-respiro{text-align:center;display:flex;flex-direction:column;align-items:center}
.guia-respiro .guia-atras{align-self:flex-start}
.guia-respiro .guia-nota{margin-inline:auto}
.aro{position:relative;width:min(70vw,260px);aspect-ratio:1;border:0;background:none;cursor:pointer;padding:0;margin:18px 0 10px;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:50%}
.aro:focus-visible{outline:2px solid var(--oro);outline-offset:6px}
.aro svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.aro-fondo{fill:none;stroke:rgba(242,235,242,.14);stroke-width:5}
.aro-avance{fill:none;stroke:var(--oro);stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(227,178,76,.8))}
.aro-centro{position:absolute;inset:14%;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-style:italic;font-size:1.25rem;color:var(--crema);
  background:radial-gradient(circle at 50% 40%,rgba(122,59,156,.55),rgba(42,25,54,.9) 70%);box-shadow:0 0 40px rgba(122,59,156,.5);transition:box-shadow .4s}
.aro.activo .aro-centro{box-shadow:0 0 70px rgba(227,178,76,.5)}
.aro.listo .aro-centro{box-shadow:0 0 100px rgba(241,205,120,.8)}
.guia-saltar{margin-top:14px}
.enlace{background:none;border:0;font:500 14px var(--texto);color:var(--crema-suave);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.enlace:hover{color:var(--crema)}

/* resultado del cristal */
.resultado{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,5vw,70px);align-items:start;animation:aparece .8s var(--curva) both}
.resultado-gema{position:relative;display:grid;place-items:center;padding:30px;border-radius:32px;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--c) 45%,transparent),transparent 70%),var(--ciruela-2);border:1px solid var(--linea);min-height:300px}
.resultado-gema .halo{position:absolute;inset:18%;border-radius:50%;background:var(--b);opacity:.25;filter:blur(46px);animation:late 4s ease-in-out infinite}
.resultado-gema svg{position:relative;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5));animation:flota 6s ease-in-out infinite}
.resultado-texto .a-mano{margin:0;font-size:20px;color:var(--oro)}
.resultado-texto h2{font-size:clamp(2.2rem,5vw,3.8rem);line-height:1;margin:4px 0 10px;font-weight:400}
.resultado-frase{font-family:var(--display);font-style:italic;font-size:1.25rem;color:var(--oro-claro);margin:0 0 12px}
.resultado-porque{padding:10px 14px;border-left:2px solid var(--oro);background:rgba(227,178,76,.07);border-radius:0 12px 12px 0;color:var(--crema)}
.resultado-texto p{line-height:1.65}
.resultado-bloques{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
.resultado-bloques section{padding:16px 18px;border-radius:16px;background:rgba(242,235,242,.05);border:1px solid var(--linea)}
.resultado-bloques h3{margin:0 0 6px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--oro);font-family:var(--texto);font-weight:700}
.resultado-bloques p{margin:0;font-size:14.5px;color:var(--crema-suave)}
.resultado-otras{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px;font-size:14px;color:var(--crema-suave)}
.resultado-piezas{margin-top:clamp(50px,8vh,90px)}
.resultado-piezas h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:400;margin:0 0 26px}
.resultado-piezas h2 em{font-weight:300;color:var(--oro-claro)}
@media (max-width:860px){.resultado{grid-template-columns:1fr}.resultado-gema{min-height:240px}.resultado-bloques{grid-template-columns:1fr}}
@keyframes aparece{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes flota{50%{transform:translateY(-10px) rotate(1.5deg)}}
@keyframes late{50%{opacity:.4;transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.resultado,.resultado-gema svg,.resultado-gema .halo{animation:none}}

/* el regalo justo */
.regalo-form{display:grid;gap:30px}
.regalo-form fieldset{border:0;padding:0;margin:0;min-width:0}
.regalo-form legend{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.7rem);margin:0 0 14px;padding:0}
.regalo-form legend small{font:400 13px var(--texto);color:var(--crema-suave);margin-left:8px}
.regalo-form legend .a-mano{color:var(--oro);margin-right:8px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.regalo-otro{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:14px;font-size:14.5px;color:var(--crema-suave)}
.regalo-otro input{width:170px;padding:10px 14px;border-radius:999px}
.regalo-error{color:#ffb4a3;margin:0}
.regalo-salida{margin-top:clamp(50px,8vh,90px);padding-top:30px;border-top:1px solid var(--linea);animation:aparece .7s var(--curva) both}
.regalo-salida>.a-mano{margin:0;font-size:20px;color:var(--oro)}
.regalo-salida h2{font-size:clamp(1.9rem,4.2vw,3.2rem);font-weight:400;margin:4px 0 24px;line-height:1.05}
.regalo-salida h2 em{font-weight:300}
.regalo-sub{font-family:var(--display);font-weight:400;font-size:1.5rem;margin:46px 0 20px}
.regalo-principal{max-width:340px}
.idea{display:flex;flex-direction:column;gap:10px;position:relative}
.idea-porque{margin:0;font-size:13.5px;line-height:1.5;color:var(--oro-claro);min-height:2.9em}
.idea-sello{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--oro);color:var(--tinta)}
.regalo-extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;margin-top:54px}
.extra{display:flex;flex-direction:column;gap:4px;padding:20px 22px;border-radius:20px;text-decoration:none;color:var(--crema);background:var(--ciruela-2);border:1px dashed rgba(227,178,76,.5);transition:transform .25s var(--curva),border-color .25s}
.extra b{font-family:var(--display);font-weight:500;font-size:1.15rem;color:var(--oro-claro)}
.extra span{font-size:14px;color:var(--crema-suave)}
.extra:hover{transform:translateY(-3px);border-color:var(--oro)}

/* tarjetas de las guías dentro de la tienda */
.guias-tienda{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;padding:0 var(--lado) 40px}
.guia-tarjeta{position:relative;display:flex;flex-direction:column;gap:4px;padding:22px 26px 22px 64px;border-radius:22px;text-decoration:none;color:var(--crema);
  background:radial-gradient(60% 140% at 0% 0%,rgba(122,59,156,.4),transparent 70%),var(--ciruela-2);border:1px solid var(--linea);transition:transform .25s var(--curva),border-color .25s}
.guia-tarjeta:hover{transform:translateY(-3px);border-color:var(--oro)}
.guia-tarjeta b{font-family:var(--display);font-weight:500;font-size:1.3rem}
.guia-tarjeta small{font-size:14px;color:var(--crema-suave)}
.guia-num{position:absolute;left:22px;top:22px;font-size:26px;color:var(--oro)}

/* ---------- respiración guiada (lenta, con consciencia) ---------- */
.respiro{position:relative;width:min(72vw,280px);aspect-ratio:1;margin:26px auto 8px;display:grid;place-items:center}
.respiro-aura{position:absolute;inset:6%;border-radius:50%;background:var(--iris);filter:blur(34px);opacity:.18;animation:girar 24s linear infinite;transition:opacity 4s ease}
.respiro.activo .respiro-aura{opacity:.32}
.respiro[data-fase="inhala"] .respiro-aura,.respiro[data-fase="sosten"] .respiro-aura{opacity:.5}
.respiro-circulo{position:relative;width:62%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;padding:12px;
  font-family:var(--display);font-style:italic;font-size:1.2rem;color:var(--crema);
  background:radial-gradient(circle at 50% 38%,rgba(181,143,208,.5),rgba(42,25,54,.95) 72%);
  box-shadow:0 0 0 1px rgba(227,178,76,.35),0 0 60px rgba(122,59,156,.45);
  transition-property:transform;transition-timing-function:cubic-bezier(.45,.05,.35,1)}
.respiro-circulo span{transition:opacity .35s ease}
.respiro-circulo span.cambia{opacity:0}
.respiro.listo .respiro-circulo{box-shadow:0 0 0 1px var(--oro),0 0 90px rgba(241,205,120,.65)}
.respiro-cuenta{min-height:1.4em;text-align:center;font-family:var(--pluma);font-size:19px;color:var(--oro)}
.guia-respiro .guia-acciones{justify-content:center}

/* ---------- ideas para crear con una piedra ---------- */
.resultado-ideas{text-align:center}
.resultado-ideas h2,.resultado-piezas h2{font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:400;margin:4px 0 12px}
.resultado-ideas h2 em,.resultado-piezas h2 em{font-weight:300;color:var(--oro-claro)}
.resultado-ideas .guia-nota{margin:0 auto 30px}
.resultado-piezas .a-mano,.resultado-ideas .a-mano{margin:0;font-size:19px;color:var(--oro)}
.ideas-piedra{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 22px}
.idea-piedra{--emblema-fondo:var(--ciruela-2);flex:0 1 230px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 20px 20px;text-decoration:none;color:var(--crema);
  border-radius:120px 120px 26px 26px;background:radial-gradient(circle at 50% 22%,rgba(122,59,156,.35),transparent 62%),var(--ciruela-2);
  transition:transform .4s var(--curva)}
.idea-piedra:nth-child(even){translate:0 22px}
.idea-piedra:hover{transform:translateY(-6px)}
.idea-emblema{width:96px;display:block;margin-bottom:6px}
.idea-piedra b{font-family:var(--display);font-weight:500;font-size:1.15rem;line-height:1.2}
.idea-piedra small{font-size:13.5px;color:var(--crema-suave);line-height:1.45}
.idea-ir{margin-top:8px;font-size:13px;font-weight:600;color:var(--oro-claro)}
.ideas-mas{margin:50px 0 0}
@media (max-width:560px){.idea-piedra{flex-basis:calc(50% - 12px);padding:18px 12px}.idea-piedra:nth-child(even){translate:0 14px}.idea-emblema{width:72px}}

/* emblema grande en la cabeza de una guía */
.cabeza-emblema{max-width:250px!important;--emblema-fondo:var(--noche)}
.cabeza-emblema .emblema{filter:drop-shadow(0 0 30px rgba(227,178,76,.22));animation:flota 8s ease-in-out infinite}

/* piezas personalizadas sugeridas (regalo) */
.medida-ideas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.medida-idea{--emblema-fondo:var(--ciruela-2);display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;padding:20px 22px;border-radius:26px;text-decoration:none;color:var(--crema);
  background:radial-gradient(70% 120% at 0% 0%,rgba(122,59,156,.3),transparent 70%),var(--ciruela-2);transition:transform .4s var(--curva)}
.medida-idea:nth-child(2){translate:0 18px}
.medida-idea:hover{transform:translateY(-5px)}
.medida-emblema{width:96px}
.medida-texto{display:flex;flex-direction:column;gap:3px}
.medida-texto small{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.medida-texto b{font-family:var(--display);font-weight:500;font-size:1.2rem}
.medida-texto span{font-size:13.5px;color:var(--crema-suave);line-height:1.45}
.medida-texto em{font-style:normal;font-weight:600;color:var(--oro-claro);margin-top:4px}
.medida-texto .idea-ir{color:var(--oro-claro);font-weight:600;font-size:13px}
@media (max-width:640px){.medida-idea:nth-child(2){translate:none}.medida-idea{grid-template-columns:72px 1fr}.medida-emblema{width:72px}}

/* ---------- imagina tu pieza ---------- */
.guia-centro{justify-content:center}
.guia-paso .guia-saltar{text-align:center;color:var(--crema-suave);margin-top:22px}
.puertas{display:flex;flex-wrap:wrap;justify-content:center;gap:22px 30px;margin-top:10px}
.puerta{--emblema-fondo:var(--ciruela-2);flex:0 1 280px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:30px 24px 26px;cursor:pointer;color:var(--crema);border:0;
  border-radius:160px 160px 28px 28px;background:radial-gradient(circle at 50% 25%,rgba(122,59,156,.4),transparent 65%),var(--ciruela-2);transition:transform .4s var(--curva)}
.puerta:nth-child(2){translate:0 26px}
.puerta:hover{transform:translateY(-6px)}
.puerta-emblema{width:130px;display:block;margin-bottom:8px}
.puerta b{font-family:var(--display);font-weight:500;font-size:1.4rem}
.puerta small{font-size:14px;color:var(--crema-suave)}
@media (max-width:560px){.puerta:nth-child(2){translate:none}}

.tu-idea{display:grid;gap:22px}
.idea-final{--emblema-fondo:var(--ciruela-2);display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center;padding:24px 26px;border-radius:28px;background:var(--ciruela-2)}
.idea-final-emblema{width:120px}
.idea-final-texto small{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.idea-final-texto h3{font-family:var(--display);font-weight:400;font-size:1.25rem;line-height:1.3;margin:4px 0 8px}
.idea-final-base{font-size:14px;color:var(--crema-suave);margin:0 0 4px}
.idea-final-precio{font-weight:600;color:var(--oro-claro);margin:0 0 14px}
.idea-grande{grid-template-columns:200px 1fr;padding:clamp(24px,4vw,44px);background:radial-gradient(60% 120% at 0% 0%,rgba(122,59,156,.42),transparent 70%),var(--ciruela-2)}
.idea-grande .idea-final-emblema{width:200px}
.idea-grande .a-mano{margin:0;font-size:21px;color:var(--oro)}
.idea-grande h3{font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.2}
.ideas-alternas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:18px}
.tu-idea-piedra{display:flex;align-items:center;gap:14px;padding:12px 18px;border-radius:999px;background:rgba(242,235,242,.05);border:1px solid var(--linea);justify-self:start}
.tu-idea-piedra p{margin:0;font-size:14.5px;color:var(--crema-suave)}
.tu-idea-piedra b{color:var(--crema)}
.tu-idea-nota{margin-top:6px}
.regalo-sub em{font-weight:300;color:var(--oro-claro)}
@media (max-width:640px){.idea-final,.idea-grande{grid-template-columns:1fr;text-align:center}.idea-final-emblema,.idea-grande .idea-final-emblema{width:120px;margin:0 auto}}

.invita-hongo{--emblema-fondo:var(--ciruela-3);display:grid;grid-template-columns:130px 1fr;gap:26px;align-items:center;max-width:760px;margin:0 auto;padding:26px 30px;border-radius:999px 40px 40px 999px;text-decoration:none;color:var(--crema);
  background:radial-gradient(80% 140% at 0% 50%,rgba(184,64,47,.3),transparent 70%),var(--ciruela-3);transition:transform .4s var(--curva)}
.invita-hongo:hover{transform:translateY(-5px)}
.invita-emblema{width:130px}
.invita-hongo small{display:block;font-family:var(--pluma);font-size:19px;color:var(--oro)}
.invita-hongo b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3vw,2.3rem);margin:2px 0 6px}
.invita-hongo span span{font-size:14.5px;color:var(--crema-suave)}
@media (max-width:640px){.invita-hongo{grid-template-columns:1fr;text-align:center;border-radius:40px}.invita-emblema{margin:0 auto;width:110px}}

/* portales de las guías dentro de la tienda (en vez de tarjetas cuadradas) */
.guias-tienda{display:flex!important;flex-wrap:wrap;justify-content:center;gap:22px 34px;padding:10px var(--lado) 50px}
.portal{--emblema-fondo:var(--ciruela-2);flex:0 1 520px;display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center;padding:20px 30px 20px 20px;text-decoration:none;color:var(--crema);
  border-radius:999px 48px 48px 999px;background:radial-gradient(70% 140% at 0% 50%,rgba(122,59,156,.42),transparent 72%),var(--ciruela-2);transition:transform .45s var(--curva)}
.portal:nth-child(2){translate:0 28px;border-radius:48px 999px 999px 48px;grid-template-columns:1fr 150px;padding:20px 20px 20px 30px;background:radial-gradient(70% 140% at 100% 50%,rgba(27,166,188,.25),transparent 72%),var(--ciruela-2)}
.portal:nth-child(2) .portal-emblema{order:2}
.portal:hover{transform:translateY(-5px)}
.portal-emblema{width:150px;display:block}
.portal-emblema .emblema{filter:drop-shadow(0 0 18px rgba(227,178,76,.25))}
.portal-texto{display:flex;flex-direction:column;gap:3px}
.portal-texto small{font-family:var(--pluma);font-size:18px;color:var(--oro)}
.portal-texto b{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.4vw,1.9rem)}
.portal-texto span{font-size:14.5px;line-height:1.5;color:var(--crema-suave)}
@media (max-width:700px){
  .portal,.portal:nth-child(2){grid-template-columns:96px 1fr;border-radius:40px;padding:18px;translate:none}
  .portal:nth-child(2) .portal-emblema{order:0}
  .portal-emblema{width:96px}
}

/* ¿qué hongo serías? */
.resultado-hongo .resultado-gema{min-height:340px}
.dibujo-hongo{position:relative;width:min(100%,250px);height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5));animation:flota 7s ease-in-out infinite}
.hongo-cientifico{margin:-4px 0 10px;font-family:var(--display);font-size:1.15rem;color:var(--crema-suave)}
.hongo-ideas{max-width:900px;margin:0 auto;text-align:left}
.resultado-texto .guia-acciones a.boton{text-decoration:none}