/* Página pública de reservas · Armonía Spa · GlowPro by SysArk
   ---------------------------------------------------------------
   PIEL: el diseño de Santy (3-diseno/propuestas-visuales/reserva-armonia-E-natural.html
   y las láminas DISEÑO AGENDAMIENTO CLIENTAS). De ahí salen la fotografía de
   portada, el fondo noche, la paleta cobre y las tipografías.

   RELIEVE: el acabado de la versión que está publicada (v1.7), que Santy pidió
   conservar. Es lo que hace que la página no se vea plana: sombras cálidas en
   dos alturas, degradado en lo que está elegido, y el gesto de levantarse al
   pasar el cursor o el dedo. La regla es gastar el relieve solo en lo que se
   toca —caminos, servicios, días, horas, botones— y dejar el resto sobre el
   papel. Si todo lleva sombra, nada destaca.

     noche #2E2B29 · crema #F6F0EC · sup #FBF7F3 · borde #E9DED2
     cobre #BE7549 · cobre-d #A85F35 · cobre-dd #8C4A26 · corall #F2E2D4
     salvia #DDE4DA · arena #EAE0D3
     tinta #2B2724 · tinta2 #7E736A · tinta3 #A79C92

   Las sombras van en marrón cálido, no en gris: sobre un papel crema una
   sombra gris se ve sucia.

   EL ENCABEZADO NO SE TOCA. Santy lo aprobó tal cual y pidió expresamente
   dejarlo con sus tipografías y tamaños de antes: el titular y el lema en la
   serif, y el subtítulo, los datos de contacto y la firma en la sans, con sus
   pesos y tamaños originales. La unificación de tipografía vale de la onda
   hacia abajo, no arriba.

   PESOS EN LA ZONA DE AGENDAMIENTO: UNO SOLO, el 600. Ni 400, ni 500, ni 700.
   Se comprobó en el navegador de Santy que los cuatro pesos de la familia
   cargan bien, así que el problema no era de carga sino de diseño: con los
   títulos en 700 y el texto de apoyo en 600, esta serif de trazo muy fino se
   lee como si fueran dos letras distintas. Con un solo peso eso no puede
   pasar. La jerarquía la marcan el TAMAÑO y el COLOR: títulos grandes en
   tinta, texto de apoyo más chico en tinta2.

   No volver a introducir un segundo peso aquí. Si un título necesita más
   presencia, se le sube el tamaño, no el grosor.

   Sin estilos en línea, a propósito: la política de contenido del sitio
   prohíbe el CSS embebido. */
:root{
  --noche:#2E2B29; --crema:#F6F0EC; --sup:#FBF7F3;
  --borde:#E9DED2; --borde2:#F0E7DD; --borde3:#E3D4C4; --borde4:#E3CDBB;
  --cobre:#BE7549; --cobre-d:#A85F35; --cobre-dd:#8C4A26;
  --cobre-l:#D08D63; --corall:#F2E2D4; --corallx:#FAF1E9;
  --salvia:#DDE4DA; --salvia-t:#5C6B57; --arena:#EAE0D3;
  --tinta:#2B2724; --tinta2:#7E736A; --tinta3:#A79C92; --apagado:#CBC0B5;
  --danger:#A8503C; --danger-l:#F6E3DE;

  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --curva:cubic-bezier(.2,.7,.3,1);

  /* Dos alturas de sombra, en marrón. La baja es el estado de reposo; la
     alta aparece solo cuando algo se levanta. */
  --sombra:0 1px 2px rgba(74,56,42,.04),0 10px 24px -14px rgba(74,56,42,.30);
  --sombra-alta:0 2px 5px rgba(74,56,42,.06),0 22px 40px -18px rgba(74,56,42,.42);
  --sombra-cobre:0 10px 22px -8px rgba(140,74,38,.48);
  --sombra-cobre-alta:0 16px 30px -8px rgba(140,74,38,.58);
}
*{box-sizing:border-box;margin:0;padding:0}
/* El fondo va también en <html>, no solo en <body>: es lo que se ve si la
   página se estira de más al arrastrar en el celular, y lo que evita que
   asome el blanco de fábrica en cualquier momento. arranque-v1.js lo pinta
   antes incluso de que llegue esta hoja. */
html{background:var(--crema)}
/* UNA SOLA FAMILIA en toda la página, a pedido de Santy: la misma de
   "Reserve su cita" y "Todo lo que tu cuerpo y tu piel necesita". Lo que
   cambia de un sitio a otro es el tamaño y el grosor, no la letra.
   Consecuencia obligada: los textos chicos suben de tamaño y de grosor. Una
   serif con este contraste de trazo a 12 px y grosor 300 no se lee en un
   celular; el mismo texto en 14 px y grosor 500 sí. El bloque de marca
   SysArk conserva su propia tipografía, que es de otra marca. */
body{font-family:var(--serif);color:var(--tinta);background:var(--crema);line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh;position:relative;overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--cobre-d)}

/* Las dos texturas de fondo de la versión publicada, retonadas a la paleta
   nueva. Van muy suaves: dan aire al papel sin llamar la atención. */
.aur{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aur span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.42;
  animation:flota 26s ease-in-out infinite}
.aur span:nth-child(1){width:560px;height:560px;background:#EBD4BE;top:20%;left:-190px}
.aur span:nth-child(2){width:460px;height:460px;background:#DFE6DB;bottom:-170px;right:-140px;
  animation-delay:-9s}
.aur span:nth-child(3){width:360px;height:360px;background:#F3E3D2;top:58%;left:56%;
  animation-delay:-17s}
@keyframes flota{0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(28px,-32px) scale(1.08)}
  66%{transform:translate(-22px,24px) scale(.95)}}
/* El grano del diseño, sobre todo lo demás. */
.malla{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='150' height='150' filter='url(%23n)' opacity='0.05'/></svg>")}

/* ================= encabezado =================
   Fondo noche, la fotografía ocupando el 44 % de la derecha, un velo que la
   funde con el fondo, y la onda crema que cierra abajo. */
.top{position:relative;z-index:2;overflow:hidden;background:var(--noche);color:#FBF8F4;
  padding:clamp(24px,6.5vw,38px) clamp(20px,5.6vw,30px) clamp(46px,11vw,64px)}
.top .foto{position:absolute;right:0;top:0;bottom:0;width:44%;
  background:url('../portada-armonia.jpg') no-repeat left center/cover}
.top .velo{position:absolute;right:41%;top:0;bottom:0;width:16%;
  background:linear-gradient(90deg,var(--noche),rgba(46,43,41,0))}
/* Una sombra interior en el borde inferior: separa el encabezado del papel
   en vez de dejarlo pegado. */
.top::after{content:'';position:absolute;left:0;right:0;bottom:0;height:70px;z-index:2;
  background:linear-gradient(180deg,rgba(20,18,17,0),rgba(20,18,17,.35));pointer-events:none}
.onda{position:absolute;left:0;right:0;bottom:-1px;z-index:3;
  width:100%;height:clamp(28px,7vw,42px);display:block}

/* La firma de la marca, arriba a la derecha del encabezado.

   OJO, no "arreglar": la firma es un <p> dentro de .top, así que el tamaño y
   el peso se los impone la regla .top p, que pesa más en el cascade. De aquí
   solo mandan las mayúsculas, el espaciado, el color y la posición. Así se ve
   desde el principio y así lo aprobó Santy. Subirle la especificidad para que
   respete su propio tamaño CAMBIARÍA cómo se ve.

   Cae encima de la fotografía, que ahí tiene hojas oscuras y tela clara según
   el ancho de la pantalla. Por eso va en claro con una sombra oscura detrás:
   es lo único que se lee sobre las dos. En tinta oscura desaparecía. */
.firma{position:absolute;top:clamp(15px,4.4vw,24px);right:clamp(14px,4vw,22px);z-index:3;
  margin:0;text-align:right;text-transform:uppercase;
  font-family:var(--sans);
  font-size:clamp(7.5px,2.1vw,9px);font-weight:500;letter-spacing:.2em;line-height:1.9;
  color:#F4EAE0;text-shadow:0 1px 3px rgba(24,20,18,.9),0 0 12px rgba(24,20,18,.75)}

/* El logotipo va centrado sobre la zona oscura, no sobre todo el ancho:
   la mitad derecha la ocupa la foto. */
.top img{position:relative;z-index:2;display:block;height:auto;
  width:clamp(112px,31vw,146px);margin-left:max(0px,calc(37% - 73px));
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));
  animation:entra .8s var(--curva) both}
.top h1{position:relative;z-index:2;font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,9.6vw,46px);line-height:1.05;color:#FBF8F4;letter-spacing:.004em;
  text-shadow:0 2px 14px rgba(0,0,0,.30);
  animation:entra .8s var(--curva) .09s both}
.top h1::before{content:'';display:block;width:44px;height:1px;
  background:rgba(190,117,73,.7);margin:clamp(10px,3vw,14px) 0 clamp(8px,2.4vw,11px)}
.top p{position:relative;z-index:2;margin-top:3px;line-height:1.5;
  font-family:var(--sans);font-weight:300;
  font-size:clamp(11.5px,3vw,13px);color:rgba(251,248,244,.8);
  text-shadow:0 1px 8px rgba(0,0,0,.35);
  animation:entra .8s var(--curva) .16s both}
.top .lema{display:block;margin-top:2px;font-family:var(--serif);font-weight:500;
  font-size:clamp(17px,4.9vw,21px);line-height:1.2;color:var(--cobre-l);letter-spacing:.005em}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Contacto: el icono dentro de un círculo de vidrio, no un contorno suelto. */
.pills{position:relative;z-index:2;display:grid;gap:7px;
  margin-top:clamp(13px,3.6vw,18px);animation:entra .8s var(--curva) .24s both}
.pill{display:flex;align-items:center;gap:10px;line-height:1.4;
  font-family:var(--sans);font-weight:300;
  font-size:clamp(11px,3vw,12.5px);color:rgba(251,248,244,.9);text-decoration:none;
  text-shadow:0 1px 8px rgba(0,0,0,.4);transition:color .24s var(--curva)}
.pill:hover{color:#fff}
.pill .ic{width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(190,117,73,.8);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  box-shadow:0 2px 8px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.14);
  transition:all .26s var(--curva)}
.pill:hover .ic{background:rgba(190,117,73,.22);border-color:var(--cobre-l)}
.pill svg{width:12px;height:12px;stroke:var(--cobre-l);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* ================= cuerpo ================= */
.main{position:relative;z-index:1;max-width:560px;margin:0 auto;
  padding:clamp(18px,5vw,26px) clamp(18px,5.6vw,24px) clamp(34px,8vw,48px)}
.main::before{content:'TU BIENESTAR\A TAMBIÉN ES UN PLAN';white-space:pre;
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.16em;color:var(--tinta3);
  line-height:1.7;margin-bottom:clamp(12px,3.4vw,18px)}

/* ================= pasos ================= */
.pasos{display:flex;align-items:flex-start;margin-bottom:clamp(18px,5vw,26px)}
.paso{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.bol{width:clamp(42px,11.5vw,48px);height:clamp(42px,11.5vw,48px);border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(160deg,#FFFDFB,var(--sup));
  border:1px solid var(--borde4);color:var(--tinta2);
  font-family:var(--serif);font-size:clamp(20px,5.4vw,23px);font-weight:600;
  box-shadow:var(--sombra),inset 0 1px 0 rgba(255,255,255,.9);
  transition:all .3s var(--curva)}
.paso.on .bol{background:linear-gradient(140deg,var(--cobre-l),var(--cobre-d));
  border-color:transparent;color:#fff;transform:scale(1.06);
  box-shadow:var(--sombra-cobre),inset 0 1px 0 rgba(255,255,255,.28)}
.paso.on .txt{color:var(--cobre-d);font-weight:600}
.paso.hecho .bol{background:linear-gradient(160deg,#E8EEE5,var(--salvia));
  border-color:transparent;color:var(--salvia-t);
  box-shadow:0 4px 12px -4px rgba(92,107,87,.42),inset 0 1px 0 rgba(255,255,255,.6)}
.txt{font-size:clamp(14px,3.8vw,15px);font-weight:600;color:var(--tinta2)}
.lin{flex:1;height:2px;border-radius:2px;background:var(--borde4);
  margin-top:clamp(20px,5.6vw,23px)}

/* ================= bloques =================
   El contenido va sobre el papel, sin caja. El relieve se gasta en lo que se
   toca, no en el contenedor. */
.card{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;
  margin-bottom:clamp(16px,4.4vw,22px);animation:sube .55s var(--curva) both}
.card:last-child{margin-bottom:0}
@keyframes sube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.card-tit{display:flex;align-items:center;flex-wrap:wrap;gap:12px;
  margin-bottom:clamp(10px,2.8vw,14px)}
.card-tit .n{width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:var(--corall);color:var(--cobre-d);display:grid;place-items:center;
  font-family:var(--serif);font-size:14px;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(74,56,42,.08)}
.card-tit h2{font-family:var(--serif);font-weight:600;line-height:1.15;
  font-size:clamp(24px,6.4vw,29px)}
.card-tit .volver{margin-left:auto;font-size:14.5px;font-weight:600;color:var(--cobre-d);
  border-bottom:1px solid var(--cobre-d);padding-bottom:1px}
.card-tit::after{content:'';flex-basis:100%;height:2px;margin-top:-4px;border-radius:2px;
  background:linear-gradient(90deg,var(--cobre) 0 44px,transparent 44px)}

/* ================= los tres caminos =================
   Tarjeta con panel de icono a la izquierda. En reposo van apoyadas sobre el
   papel; al pasar por encima se levantan y aparece la franja de color, que es
   el gesto de la versión publicada. */
.caminos{display:grid;gap:11px}
.camino{position:relative;display:flex;align-items:stretch;width:100%;text-align:left;
  background:var(--sup);border:1px solid var(--borde);border-radius:14px;overflow:hidden;
  box-shadow:var(--sombra);transition:transform .28s var(--curva),
  box-shadow .28s var(--curva),border-color .28s var(--curva)}
.camino::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;z-index:2;
  background:var(--cobre);transform:scaleY(0);transform-origin:center;
  transition:transform .28s var(--curva)}
.camino.b::before{background:var(--salvia-t)} .camino.c::before{background:#8A7159}
.camino:hover,.camino:focus-visible{outline:none;transform:translateY(-3px);
  border-color:var(--borde4);box-shadow:var(--sombra-alta)}
.camino:hover::before,.camino:focus-visible::before{transform:scaleY(1)}
/* El panel del icono lleva su propio degradado y una línea de luz arriba:
   sin eso se ve como un rectángulo de color pegado. */
.camino .ic{width:66px;flex:0 0 66px;display:grid;place-items:center;align-self:stretch;
  border:0;border-radius:0;
  background:linear-gradient(150deg,#F8E9DC,var(--corall));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset -1px 0 0 rgba(74,56,42,.05);
  transition:transform .28s var(--curva)}
.camino.b .ic{background:linear-gradient(150deg,#E8EEE5,var(--salvia))}
.camino.c .ic{background:linear-gradient(150deg,#F2EAE0,var(--arena))}
.camino:hover .ic{transform:scale(1.04)}
.camino .ic svg{width:26px;height:26px;stroke:var(--cobre-d);fill:none;stroke-width:1.4}
.camino.b .ic svg{stroke:var(--salvia-t)} .camino.c .ic svg{stroke:#8A7159}
.camino .t{display:block;font-family:var(--serif);font-weight:600;line-height:1.2;
  font-size:clamp(17px,4.6vw,19px);padding:14px 12px 0 15px}
.camino .d{display:block;font-weight:600;line-height:1.5;color:var(--tinta2);
  font-size:clamp(15px,4vw,16px);padding:4px 12px 14px 15px}
.camino .fl{align-self:center;margin-left:auto;padding:0 15px;
  color:var(--tinta3);font-size:24px;font-weight:600;
  transition:transform .28s var(--curva),color .28s var(--curva)}
.camino:hover .fl{transform:translateX(4px);color:var(--cobre-d)}

/* ================= servicios ================= */
.lista-srv{display:grid;gap:9px}
.srv{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 15px;background:var(--sup);border:1px solid var(--borde);border-radius:12px;
  box-shadow:var(--sombra);transition:transform .24s var(--curva),
  box-shadow .24s var(--curva),border-color .24s var(--curva)}
.srv:hover{transform:translateY(-2px);border-color:var(--borde4);box-shadow:var(--sombra-alta)}
.srv.sel{border-color:var(--cobre);background:var(--corallx);
  box-shadow:inset 3px 0 0 0 var(--cobre),var(--sombra)}
.srv .t{font-family:var(--serif);font-weight:600;line-height:1.2;
  font-size:clamp(16px,4.3vw,18px)}
.srv .d{font-size:15px;font-weight:600;color:var(--tinta2);margin-top:2px}
.srv .m{margin-left:auto;font-size:15px;font-weight:600;color:var(--tinta3);white-space:nowrap}
.grupo{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:600;
  font-size:clamp(17px,4.6vw,19px);color:var(--tinta);
  margin:clamp(14px,3.8vw,20px) 0 9px}
.grupo::after{content:'';flex:1;height:1px;background:var(--borde3)}
.grupo:first-child{margin-top:0}

/* ================= resumen de lo elegido ================= */
.resumen{display:block;background:transparent;border:0;border-radius:0;
  border-top:1px solid var(--borde3);border-bottom:1px solid var(--borde3);
  padding:11px 0;margin-bottom:clamp(12px,3.2vw,16px);
  font-size:14px;font-weight:600;color:var(--tinta2);line-height:1.6}
.resumen b{font-weight:600;font-size:18px;color:var(--tinta)}

/* ================= días y horas ================= */
.dias{display:flex;gap:9px;overflow-x:auto;padding:4px 2px 14px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.dias::-webkit-scrollbar{height:0}
.dia{flex:0 0 auto;scroll-snap-align:start;min-width:76px;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:10px 6px;border-radius:13px;
  background:var(--sup);border:1px solid var(--borde);box-shadow:var(--sombra);
  transition:transform .26s var(--curva),box-shadow .26s var(--curva),
  border-color .26s var(--curva)}
.dia:hover{transform:translateY(-4px);border-color:var(--borde4);box-shadow:var(--sombra-alta)}
.dia .s{font-family:var(--serif);font-size:14px;color:var(--tinta2);text-transform:capitalize}
.dia .n{font-family:var(--serif);font-size:28px;font-weight:600;line-height:1}
.dia .m{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta3)}
.dia .c{font-size:12px;font-weight:600;color:var(--cobre-d);background:var(--corall);
  border-radius:9px;padding:2px 9px;margin-top:5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.dia.sel{background:linear-gradient(140deg,var(--cobre),var(--cobre-d));
  border-color:transparent;color:#fff;box-shadow:var(--sombra-cobre)}
.dia.sel .s,.dia.sel .m{color:rgba(255,255,255,.88)}
.dia.sel .c{background:rgba(255,255,255,.24);color:#fff;box-shadow:none}

.franja{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:600;
  font-size:clamp(17px,4.6vw,19px);color:var(--tinta);margin:clamp(14px,3.6vw,18px) 0 0}
.franja::after{content:'';flex:1;height:1px;background:var(--borde3)}
.horas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:11px}
.franja + .horas{margin-top:11px}
.hora{height:42px;border-radius:11px;display:grid;place-items:center;
  font-size:clamp(15px,4vw,16px);font-weight:600;
  background:var(--sup);border:1px solid var(--borde);box-shadow:var(--sombra);
  transition:transform .24s var(--curva),box-shadow .24s var(--curva),
  border-color .24s var(--curva)}
.hora:hover{transform:translateY(-3px);border-color:var(--borde4);box-shadow:var(--sombra-alta)}
.hora.sel{background:linear-gradient(140deg,var(--cobre),var(--cobre-d));
  border-color:transparent;color:#fff;font-weight:600;box-shadow:var(--sombra-cobre)}
@media(max-width:339px){.horas{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ================= formulario ================= */
.campos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:2px}
.campo{display:flex;flex-direction:column;gap:5px}
.campo.full{grid-column:1/-1}
.campo label{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta3)}
.campo input,.campo select{width:100%;height:48px;padding:0 14px;
  font-size:16px;font-weight:600;
  background:#fff;border:1px solid var(--borde);border-radius:11px;color:var(--tinta);
  box-shadow:inset 0 1px 2px rgba(74,56,42,.06);
  transition:border-color .2s,box-shadow .2s}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--cobre);
  box-shadow:0 0 0 3px rgba(190,117,73,.18),inset 0 1px 2px rgba(74,56,42,.04)}
.campo input::placeholder{color:var(--apagado)}
.campo input.malo{border-color:var(--danger);box-shadow:0 0 0 3px rgba(168,80,60,.16)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.robot{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  min-height:50px;padding:0 14px;background:var(--sup);border:1px solid var(--borde);
  border-radius:11px;margin:15px 0;font-size:15px;font-weight:600;box-shadow:var(--sombra);
  transition:transform .24s var(--curva),box-shadow .24s var(--curva),
  border-color .24s var(--curva)}
.robot:hover{transform:translateY(-2px);border-color:var(--borde4);box-shadow:var(--sombra-alta)}
.robot .ch{width:22px;height:22px;flex:0 0 22px;border-radius:6px;
  border:1.5px solid var(--borde4);background:#fff;display:grid;place-items:center;
  box-shadow:inset 0 1px 2px rgba(74,56,42,.08);transition:all .2s}
.robot.ok .ch{background:linear-gradient(140deg,var(--cobre),var(--cobre-d));
  border-color:transparent;box-shadow:0 3px 8px rgba(140,74,38,.4)}
.robot .ch svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;opacity:0}
.robot.ok .ch svg{opacity:1}

/* ================= botones =================
   El acabado de la versión publicada: degradado de tres paradas, sombra del
   propio color debajo, y el botón se levanta al tocarlo.
   .btn se usa en <button> y también en <a>. Sin display en bloque, el enlace
   queda en línea, el relleno se monta sobre lo de al lado y el texto se ve
   cortado. Pasó en la pantalla de "su cita quedó reservada". */
.btn{display:flex;align-items:center;justify-content:center;gap:12px;
  box-sizing:border-box;width:100%;min-height:54px;padding:12px 16px;
  text-align:center;text-decoration:none;border:0;border-radius:13px;
  font-family:var(--serif);font-weight:600;font-size:clamp(19px,4.9vw,21px);
  letter-spacing:.01em;color:#fff;
  background:linear-gradient(135deg,var(--cobre-l) 0%,var(--cobre) 52%,var(--cobre-d) 100%);
  box-shadow:var(--sombra-cobre),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .26s var(--curva),box-shadow .26s var(--curva)}
.btn:hover{transform:translateY(-2px);
  box-shadow:var(--sombra-cobre-alta),inset 0 1px 0 rgba(255,255,255,.28)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.55;cursor:progress;transform:none}
.btn.claro{background:var(--sup);color:var(--tinta);border:1px solid var(--borde);
  box-shadow:var(--sombra)}
.btn.claro:hover{border-color:var(--borde4);box-shadow:var(--sombra-alta)}
.btn + .btn{margin-top:10px}
.listo .btn{margin-top:22px}
.listo .btn + .btn{margin-top:10px}

.nota{font-size:13.5px;font-weight:600;color:var(--tinta2);text-align:center;
  margin-top:12px;line-height:1.55}
.aviso{padding:12px 15px;border-radius:11px;font-size:14.5px;font-weight:600;
  margin-bottom:12px;line-height:1.5;box-shadow:var(--sombra)}
.aviso.error{background:var(--danger-l);color:#8A3E2E}
.aviso.info{background:var(--corall);color:var(--cobre-dd)}
.aviso.ok{background:var(--salvia);color:var(--salvia-t)}
.cargando{color:var(--tinta3);text-align:center;padding:22px 0;font-size:15px;font-weight:600}
.vacio{text-align:center;color:var(--tinta2);padding:22px 6px;font-size:14.5px;
  font-weight:600;line-height:1.7}

/* ================= cita confirmada ================= */
.listo{text-align:center;padding:8px 4px}
.listo .tic{width:68px;height:68px;border-radius:50%;margin:0 auto 16px;
  background:linear-gradient(140deg,#F8E9DC,var(--corall));display:grid;place-items:center;
  box-shadow:0 0 0 8px rgba(190,117,73,.09),0 10px 24px -10px rgba(140,74,38,.35)}
.listo .tic svg{width:28px;height:28px;stroke:var(--cobre-d);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.listo h2{font-family:var(--serif);font-weight:600;line-height:1.15;margin-bottom:6px;
  font-size:clamp(25px,6.8vw,30px)}
/* Aquí la jerarquía va: el título, la fecha, y después el resto. Con el
   tamaño general de .nota (11,5 px) la fecha y el servicio quedaban del
   tamaño de un pie de página, que es justo lo contrario de lo que la clienta
   necesita ver de un vistazo. */
.listo .cuando{font-size:15px;font-weight:600;color:var(--tinta2);margin:16px 0 6px}
.listo .cuando b{display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(26px,7vw,32px);line-height:1.15;color:var(--cobre-d)}
.listo .nota{font-size:clamp(15px,4vw,16.5px);font-weight:600;color:var(--tinta2);
  margin-top:8px;line-height:1.6}
.listo p.nota:last-of-type{font-weight:600;
  font-size:clamp(17px,4.6vw,19px);color:var(--tinta);margin-top:2px}
.listo h2{margin-bottom:8px}

/* ================= pie ================= */
.pie{position:relative;z-index:1;text-align:center;background:transparent;color:var(--tinta2);
  padding:clamp(16px,4.4vw,24px) 22px clamp(22px,6vw,30px);margin-top:clamp(10px,3vw,16px);
  font-size:13.5px;font-weight:600;line-height:1.85;
  display:flex;flex-direction:column;align-items:center;gap:7px}
.pie .rulo{width:150px;height:14px;opacity:.75}
.pie a{color:var(--tinta2);text-decoration:none;font-weight:600}
.pie a:hover{color:var(--cobre-d)}
.pie b{font-weight:600;color:var(--tinta)}

@media(max-width:520px){.campos{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* En pantalla grande el encabezado se alinea con la columna del contenido,
   para que el logotipo y el titular no queden perdidos en una franja de
   1280 px. El diseño se hizo para el celular, que es donde reservan las
   clientas; esto solo evita que en el computador se vea desarmado. */
@media(min-width:660px){
  .top{padding-left:max(30px,calc((100% - 560px) / 2));
       padding-right:max(30px,calc((100% - 560px) / 2))}
  .top img{margin-left:0}
  .top .foto{width:38%} .top .velo{right:35%}
}

/* ================= marca SysArk =================
   Bloque institucional. No se toca: es el mismo en todos los sistemas. */
/* Si la portada ya se mostró en esta sesión, arranque-v1.js marca <html>
   con "sin-portada" antes de que se pinte nada y aquí no se dibuja. */
.sin-portada .sk-splash{display:none}
.sk-splash{position:fixed;inset:0;z-index:99999;padding:24px;transition:opacity .45s;
  background:radial-gradient(780px 480px at 50% 42%,#123067,#03102A);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;font-family:var(--sans)}
.sk-splash.fuera{opacity:0;pointer-events:none}
.sk-splash .sk-m{animation:sk-sube .6s cubic-bezier(.2,1.3,.4,1)}
.sk-splash .sk-m img{width:236px;max-width:74vw;height:auto;display:block}
@keyframes sk-sube{from{opacity:0;transform:translateY(14px) scale(.9)}}
.sk-splash .sk-w{font-size:25px;font-weight:600;letter-spacing:-.4px;color:#fff;text-align:center}
.sk-splash .sk-w i{font-style:normal;color:#52BB16}
.sk-splash .sk-t{font-size:12.4px;color:#8AA2C4;font-weight:500;text-align:center;line-height:1.6;margin-top:5px}
.sk-splash .sk-b{width:132px;height:3px;border-radius:3px;background:#173A72;overflow:hidden}
.sk-splash .sk-b i{display:block;height:100%;border-radius:3px;background:var(--cobre);
  animation:sk-barra 1.25s ease-in-out forwards}
@keyframes sk-barra{from{width:0}to{width:100%}}

.sk-badge{position:fixed;bottom:14px;right:14px;z-index:50;font-family:var(--sans)}
.sk-pill{display:flex;align-items:center;gap:8px;background:rgba(1,33,80,.92);-webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);color:#fff;border-radius:999px;padding:6px 13px 6px 8px;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 4px 18px rgba(1,20,50,.3);cursor:pointer;opacity:.72;transition:opacity .18s,transform .18s;font:inherit}
.sk-pill:hover,.sk-badge.on .sk-pill{opacity:1;transform:translateY(-1px)}
.sk-pill img{width:21px;height:auto;display:block;flex:0 0 auto}
.sk-l{font-size:11.4px;font-weight:600;white-space:nowrap;line-height:1.2}
.sk-l i{font-style:normal;color:#7FD84A}
.sk-card{position:absolute;bottom:calc(100% + 10px);right:0;width:330px;max-width:calc(100vw - 28px);
  max-height:min(76vh,540px);overflow-y:auto;background:#fff;border-radius:16px;
  box-shadow:0 18px 48px rgba(1,20,50,.26);border:1px solid #E4E9F0;padding:20px;display:none;
  animation:sk-sube .18s;text-align:left}
.sk-badge.on .sk-card{display:block}
.sk-card .sk-n{font-size:19px;font-weight:700;color:#08172F;letter-spacing:-.2px;line-height:1.2}
.sk-card .sk-n i{font-style:normal}
.sk-card .sk-c{font-size:12.6px;color:#6B7A90;margin-top:3px}
.sk-wa{display:flex;align-items:center;justify-content:center;gap:9px;background:#25D366;color:#fff;
  border-radius:12px;padding:13px;font-size:15.5px;font-weight:700;text-decoration:none;margin:16px 0 15px}
.sk-wa:hover{background:#1FAF52}
.sk-ic{width:17px;height:17px;border-radius:50%;background:#fff;flex:0 0 17px;opacity:.95;
  clip-path:polygon(0 0,100% 0,100% 72%,62% 72%,38% 100%,38% 72%,0 72%)}
.sk-lineas{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px;font-size:11.8px;color:#6B7A90;line-height:1.4}
.sk-lineas b{color:#08172F;font-weight:700;font-size:12.4px}
.sk-ojo{font-size:11px;color:#6B7A90;line-height:1.5;margin-top:15px;padding-top:12px;border-top:1px solid #E9EDF2}
.sk-ojo a{color:#08172F;font-weight:700;text-decoration:none;white-space:nowrap}
@media(max-width:640px){.sk-badge{bottom:10px;right:10px}.sk-l{display:none}.sk-pill{padding:7px}}
@media print{.sk-badge,.sk-splash{display:none!important}}