/* SoulWever · sección "Cómo reservar" del inicio (franja compacta con los 4 pasos).
   La usan la página (app/vistas/parciales/como_reservar.php) y la vista previa del panel.
   Los colores son variables (--cr-…) que pone la propia sección con los valores del panel: aquí no hay colores fijos;
   las sombras y transparencias se mezclan a partir de esas variables. */
.cr{padding:clamp(28px,4vw,56px) clamp(14px,2.5vw,40px);scroll-margin-top:72px;font-family:'Jost','Inter Tight',system-ui,sans-serif}
#reservar{padding-bottom:0} /* en el inicio, el espacio hacia "Colección" lo pone el padding-top de #velas (--espacio-seccion) */
/* La franja se acomoda al ancho de su caja (no al de la pantalla): así la vista previa del panel muestra cada tamaño */
.cr-caja{container:cr / inline-size}
.cr-franja{position:relative;max-width:1400px;margin:0 auto;display:grid;grid-template-columns:minmax(260px,1.12fr) minmax(0,2.75fr);grid-template-areas:"texto pasos" "accion accion";column-gap:clamp(28px,3.4vw,60px);row-gap:clamp(18px,2vw,26px);padding:clamp(24px,2.6vw,40px) clamp(22px,3vw,48px) clamp(22px,2.4vw,34px);border-radius:14px;background:var(--cr-fondo);box-shadow:0 18px 44px -34px color-mix(in srgb,var(--cr-titulo) 60%,transparent)}

/* Texto (izquierda) */
.cr-texto{grid-area:texto;align-self:center;display:flex;flex-direction:column;gap:clamp(12px,1.3vw,18px);min-width:0}
.cr .cr-etiqueta{display:flex;align-items:center;gap:12px;margin:0;font-size:12px;font-weight:500;letter-spacing:.28em;line-height:1.4;text-transform:uppercase;color:var(--cr-etiqueta)}
.cr-etiqueta-linea{flex:none;width:36px;height:1px;background:var(--cr-etiqueta);transform-origin:left center}
.cr .cr-titulo{margin:0;font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(32px,3.05vw,48px);line-height:1.08;letter-spacing:-.01em;color:var(--cr-titulo)}
.cr-pal{position:relative;display:inline-block}
.cr-mascara{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em .12em;margin:0 -.04em -.12em}
.cr-sube{display:inline-block}
.cr-pal-destacada em{font-style:italic;color:var(--cr-destacada)}
.cr-trazo{position:absolute;left:-3%;bottom:-.16em;width:106%;height:.36em;overflow:visible;pointer-events:none}
.cr-trazo path{fill:none;stroke:var(--cr-trazo);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.cr .cr-frase{margin:0;max-width:36ch;font-size:14px;line-height:1.65;color:var(--cr-descripcion);text-wrap:pretty}

/* Pasos (derecha) */
.cr-pasos{grid-area:pasos;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.cr-paso{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 clamp(10px,1.2vw,20px);text-align:center;min-width:0}
/* línea divisoria fina entre pasos (se dibuja de arriba abajo al aparecer) */
.cr-paso+.cr-paso::before{content:"";position:absolute;left:0;top:14%;bottom:4%;width:1px;background:var(--cr-lineas);transform-origin:top center}
.cr-icono{position:relative;display:block;width:clamp(100px,8.4vw,124px);aspect-ratio:1;margin-bottom:8px}
.cr-icono-img{position:relative;z-index:1;display:block;width:100%;height:100%;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.cr-icono-img img{display:block;width:100%;height:100%;filter:drop-shadow(0 8px 10px color-mix(in srgb,var(--cr-titulo) 16%,transparent))}
/* sombra de apoyo: crece al pasar el cursor */
.cr-icono::after{content:"";position:absolute;left:14%;right:14%;bottom:-4%;height:14%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--cr-titulo) 28%,transparent),transparent);opacity:.55;transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .5s ease}
.cr-num{position:absolute;z-index:2;left:6%;top:4%;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--cr-punto-fondo);color:var(--cr-punto-numero);font-size:12px;font-weight:500;line-height:1;box-shadow:0 3px 8px -3px color-mix(in srgb,var(--cr-punto-fondo) 70%,transparent)}
.cr .cr-paso-titulo{margin:0;font-family:inherit;font-size:14.5px;font-weight:500;line-height:1.3;color:var(--cr-paso-titulo)}
.cr .cr-paso-texto{margin:0;max-width:24ch;font-size:12.5px;line-height:1.55;color:var(--cr-descripcion);text-wrap:balance}
@media (hover:hover){
  .cr-paso:hover .cr-icono-img{transform:translateY(-6px)}
  .cr-paso:hover .cr-icono::after{transform:scale(1.18);opacity:1}
}

/* Botón (abajo, centrado) */
.cr-accion{grid-area:accion;display:flex;justify-content:center}
/* Píldora en relieve con marco doble (borde crema + línea fina interior). Dos estilos elegidos en el panel
   (Cómo reservar › Estilo del botón): .cr-boton-oscuro (por defecto) y .cr-boton-claro. Sus colores son fijos y
   viven en estas variables (--crb-…), no en las del panel. */
.cr-boton,.cr-boton-oscuro{--crb-relleno:#744929;--crb-relleno-bajo:#6B4120;--crb-marco:#F7E7D3;--crb-linea:#9D7346;--crb-canto:#5A3519;--crb-texto:#F7E7D3;--crb-relieve:0 1px 1px rgba(40,20,6,.55),0 -1px 0 rgba(255,240,220,.12);--crb-sombra:rgba(46,29,16,.32);--crb-foco:#3E2410}
.cr-boton-claro{--crb-relleno:#EEE2D1;--crb-relleno-bajo:#E4D6C5;--crb-marco:#EEDAC3;--crb-linea:#976742;--crb-canto:#C8A57F;--crb-texto:#976742;--crb-relieve:0 1px 0 rgba(255,250,242,.85),0 -1px 0 rgba(90,55,25,.18);--crb-sombra:rgba(110,75,40,.28);--crb-foco:#5A3519}
.cr-boton{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:58px;min-width:232px;padding:0 38px;box-sizing:border-box;border:4px solid var(--crb-marco);border-radius:999px;background:linear-gradient(180deg,var(--crb-relleno),var(--crb-relleno-bajo));color:var(--crb-texto);-webkit-text-fill-color:var(--crb-texto);font-family:'Jost','Inter Tight',system-ui,sans-serif;font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;text-shadow:var(--crb-relieve);
  box-shadow:0 0 0 1px var(--crb-canto),inset 0 0 0 1.5px var(--crb-linea),inset 0 3px 5px -2px rgba(30,15,5,.22),0 6px 14px -8px var(--crb-sombra);
  transition:transform .2s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent}
.cr-boton:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--crb-canto),inset 0 0 0 1.5px var(--crb-linea),inset 0 3px 5px -2px rgba(30,15,5,.22),0 12px 24px -10px var(--crb-sombra)}
.cr-boton:active{transform:translateY(1px);box-shadow:0 0 0 1px var(--crb-canto),inset 0 0 0 1.5px var(--crb-linea),inset 0 4px 8px -2px rgba(30,15,5,.34),0 3px 8px -6px var(--crb-sombra)}
.cr-boton:focus-visible{outline:2px solid var(--crb-foco);outline-offset:4px}
/* Botón "Reservar ahora": píldora .boton-relieve de sitio.css (oscuro/claro según el panel); aquí solo su tamaño */
.cr-boton-accion{min-height:58px;min-width:232px;padding:0 38px;box-sizing:border-box;gap:14px;font-family:'Jost','Inter Tight',system-ui,sans-serif;font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.cr-flecha{display:inline-block;letter-spacing:0;font-size:1.25em;line-height:1;transition:transform .2s ease}
.cr-boton:hover .cr-flecha{transform:translateX(5px)}
/* Variante pequeña para las tarjetas de Talleres (inicio.php, .taller-reservar). Estilo elegido en el panel
   (Textos e Imágenes del Sitio › Talleres): claro (por defecto) u oscuro; colores propios en --crb-…. */
.cr-boton.taller-reservar{gap:6px;min-height:36px;min-width:0;padding:0 16px;border-width:2.5px;font-size:.85rem;font-weight:500;letter-spacing:.01em;text-transform:none;white-space:nowrap}
.taller-reservar.cr-boton-claro{--crb-relleno:#FAF5ED;--crb-relleno-bajo:#F7F3EA;--crb-marco:#E3C08F;--crb-linea:#8B5527;--crb-canto:#B98A55;--crb-texto:#8B5527;--crb-relieve:0 1px 0 rgba(255,252,246,.9),0 -1px 0 rgba(90,55,25,.15);--crb-sombra:rgba(110,75,40,.3);--crb-foco:#5A3519}
.taller-reservar.cr-boton-oscuro{--crb-relleno:#6D4326;--crb-relleno-bajo:#653C1F;--crb-marco:#F4E1C7;--crb-linea:#4A2A13;--crb-canto:#5A3519;--crb-texto:#F5E6CC;--crb-relieve:0 1px 1px rgba(40,20,6,.5),0 -1px 0 rgba(255,240,220,.12);--crb-sombra:rgba(46,29,16,.35);--crb-foco:#3E2410}
.taller-reservar .cr-flecha{font-size:1.1em}
@media (pointer:coarse){.cr-boton.taller-reservar{min-height:44px}}
@media (prefers-reduced-motion:reduce){.cr-boton.taller-reservar,.taller-reservar .cr-flecha{transition:none}.cr-boton.taller-reservar:hover,.cr-boton.taller-reservar:active,.taller-reservar:hover .cr-flecha{transform:none}}
html.mov-reducido .cr-boton.taller-reservar,html.mov-reducido .taller-reservar .cr-flecha{transition:none}
html.mov-reducido .cr-boton.taller-reservar:hover,html.mov-reducido .cr-boton.taller-reservar:active,html.mov-reducido .taller-reservar:hover .cr-flecha{transform:none}

/* Tableta: el texto arriba y los pasos en 2 columnas */
@container cr (max-width:1099.98px){
  .cr-franja{grid-template-columns:minmax(0,1fr);grid-template-areas:"texto" "pasos" "accion";row-gap:28px}
  .cr-texto{align-items:flex-start}
  .cr .cr-frase{max-width:60ch}
  .cr-pasos{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .cr-paso+.cr-paso::before{display:none}
  .cr-paso:nth-child(even)::after{content:"";position:absolute;left:0;top:14%;bottom:4%;width:1px;background:var(--cr-lineas);transform-origin:top center}
}
/* Celular: los pasos en una columna (ícono a la izquierda, texto a la derecha) */
@media (max-width:599.98px){.cr{padding-left:14px;padding-right:14px}}
@container cr (max-width:599.98px){
  .cr-franja{padding:26px 20px 24px;row-gap:22px}
  .cr .cr-titulo{font-size:clamp(30px,8.6vw,38px)}
  .cr-pasos{grid-template-columns:minmax(0,1fr);row-gap:0}
  .cr-paso,.cr-paso:nth-child(even){display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icono titulo" "icono texto";column-gap:16px;row-gap:2px;align-items:center;padding:14px 0;text-align:left}
  .cr-paso:nth-child(even)::after{display:none}
  .cr-paso+.cr-paso{border-top:1px solid var(--cr-lineas)}
  .cr-icono{grid-area:icono;width:88px;margin:0}
  .cr .cr-paso-titulo{grid-area:titulo;align-self:end;font-size:15px}
  .cr .cr-paso-texto{grid-area:texto;align-self:start;max-width:none;font-size:13px;text-wrap:pretty}
  .cr-boton,.cr-boton-accion{width:100%;min-width:0;min-height:54px;padding:0 24px}
}

/* Entrada (una sola vez, al aparecer en pantalla): assets/js/como_reservar.js pone .cr-espera y luego .cr-visible */
.cr.cr-espera .cr-etiqueta-linea{transform:scaleX(0)}
.cr.cr-espera .cr-sube{transform:translateY(110%)}
.cr.cr-espera .cr-trazo path{stroke-dashoffset:1}
.cr.cr-espera .cr-frase,.cr.cr-espera .cr-paso-titulo,.cr.cr-espera .cr-paso-texto,.cr.cr-espera .cr-accion{opacity:0}
.cr.cr-espera .cr-icono{opacity:0;transform:scale(.8)}
.cr.cr-espera .cr-num{opacity:0;transform:scale(.4)}
.cr.cr-espera .cr-paso::before,.cr.cr-espera .cr-paso::after{transform:scaleY(0)}
.cr.cr-anima .cr-etiqueta-linea{transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.cr.cr-anima .cr-sube{transition:transform .85s cubic-bezier(.2,.75,.25,1) calc(.15s + var(--i,0) * 75ms)}
.cr.cr-anima .cr-trazo path{transition:stroke-dashoffset 1.1s cubic-bezier(.45,0,.25,1) .9s}
.cr.cr-anima .cr-frase{transition:opacity .9s ease .7s}
.cr.cr-anima .cr-icono{transition:opacity .7s ease calc(.55s + var(--i) * .15s),transform .9s cubic-bezier(.25,1.25,.45,1) calc(.55s + var(--i) * .15s)}
.cr.cr-anima .cr-num{transition:opacity .4s ease calc(.95s + var(--i) * .15s),transform .55s cubic-bezier(.3,1.6,.5,1) calc(.95s + var(--i) * .15s)}
.cr.cr-anima .cr-paso-titulo,.cr.cr-anima .cr-paso-texto{transition:opacity .7s ease calc(.75s + var(--i) * .15s)}
.cr.cr-anima .cr-paso::before,.cr.cr-anima .cr-paso::after{transition:transform .9s cubic-bezier(.45,0,.25,1) calc(.6s + var(--i) * .15s)}
.cr.cr-anima .cr-accion{transition:opacity .8s ease 1.5s}

/* Movimiento reducido: sin desplazamientos */
html.mov-reducido .cr-paso:hover .cr-icono-img{transform:none}
html.mov-reducido .cr-boton:hover .cr-flecha,html.mov-reducido .cr-boton:hover,html.mov-reducido .cr-boton:active{transform:none}
@media (prefers-reduced-motion:reduce){.cr-boton,.cr-boton:hover,.cr-boton:active,.cr-boton:hover .cr-flecha{transform:none}}