:root{
  --vinotinto:#240411; --ladrillo:#BD4B59; --empolvado:#E4B9BA;
  --marron:#523D3D; --crema:#FFF9F9; --neon:#FF007F;
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --sans:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --radio:14px; --ancho:1080px;
  --ok:#1c7a4a; --error:#a32020;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);background:var(--crema);color:var(--vinotinto);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;padding-top:var(--demoH,44px)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,7vw,3.2rem)}
h2{font-size:clamp(1.5rem,5vw,2.1rem)}
h3{font-size:1.12rem}
p{margin:0 0 1em}
a{color:var(--ladrillo)}
img{max-width:100%;display:block}
button{font-family:inherit;font-size:1rem;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:1rem;width:100%;padding:.7rem .8rem;
  border:1.5px solid #e3d3d4;border-radius:10px;background:#fff;color:var(--vinotinto)}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:3px solid var(--ladrillo);outline-offset:2px}
label{display:block;font-size:.86rem;font-weight:600;margin:0 0 .35rem;color:var(--marron)}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 20px}
.pila>*+*{margin-top:1rem}
.mini{font-size:.82rem;color:var(--marron)}

#demo{position:fixed;top:0;left:0;right:0;z-index:70;background:var(--vinotinto);color:#fff;
  padding:.45rem .6rem;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;font-size:.78rem;
  border-bottom:2px solid var(--neon)}
#demo strong{font-weight:600;letter-spacing:.02em}
#demo .sep{flex:1 1 auto}
.chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;
  border-radius:999px;padding:.35rem .7rem;font-size:.78rem;min-height:32px}
.chip[aria-pressed="true"]{background:var(--neon);border-color:var(--neon);font-weight:600}

header.barra{position:sticky;top:0;z-index:50;background:rgba(255,249,249,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid #f0e2e3}
/* Encabezado bajo. En una pantalla de celular, cada píxel que ocupa esta barra
   es un píxel menos de foto. El piso son 40 px: más abajo, los botones dejan de
   ser tocables con el pulgar y la clienta le pifia al de reservar. */
.barra .contenedor{display:flex;align-items:center;gap:.75rem;min-height:40px}
.logo{font-family:var(--serif);font-weight:600;font-size:.98rem;line-height:1.1;
  min-width:0;padding:.15rem 0;text-align:left}
.logo .nom{white-space:nowrap}
.logo .nom span{color:var(--ladrillo)}
/* La bajada va a la derecha del nombre desde 600 px, que es donde sobra ancho.
   En celular, con el menú de la clienta al lado, no entra en la misma línea:
   ahí baja al renglón siguiente, igual de chica y liviana, y el encabezado
   sigue midiendo una sola fila. */
.logo em{display:block;font-family:var(--sans);font-style:normal;font-weight:300;
  font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--marron);
  opacity:.6;white-space:nowrap;line-height:1.2;margin-top:0}
@media(min-width:600px){
  .logo{display:flex;align-items:baseline;gap:.65rem;font-size:1.06rem}
  .logo em{margin-top:0;font-size:.6rem;padding-left:.65rem;
    border-left:1px solid rgba(82,61,61,.22);position:relative;top:-1px}
}
nav.principal{margin-left:auto;display:flex;gap:.25rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
nav.principal button{padding:.3rem .7rem;border-radius:999px;font-size:.83rem;min-height:32px}
nav.principal button[aria-current="page"]{background:var(--empolvado);color:var(--marron);font-weight:600}
@media(max-width:599px){
  .barra .contenedor{padding:0 15px;gap:.4rem}
  nav.principal{gap:.1rem}
  nav.principal button{padding:.3rem .5rem;font-size:.8rem}
  nav.principal .btn--chico{padding:.3rem .75rem}
}
.badge{display:inline-block;min-width:20px;padding:0 6px;margin-left:.35rem;border-radius:999px;
  background:var(--neon);color:#fff;font-size:.72rem;font-weight:700;line-height:20px;text-align:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;
  padding:.8rem 1.4rem;border-radius:999px;font-weight:600;text-decoration:none;transition:transform .06s ease}
.btn:active{transform:translateY(1px)}
.btn--neon{background:var(--neon);color:#fff}
.btn--vino{background:var(--vinotinto);color:#fff}
.btn--linea{border:1.6px solid currentColor;color:var(--vinotinto);background:transparent}
.btn--wa{background:#1f9c4d;color:#fff}
.btn--peligro{background:#fff;border:1.6px solid var(--error);color:var(--error)}
.btn--chico{min-height:40px;padding:.45rem .9rem;font-size:.86rem}
/* Dentro del encabezado va más chico: si mantiene los 40 px, arrastra la altura
   de toda la barra y no sirve de nada haberla bajado. */
.barra .btn--chico{min-height:32px;padding:.3rem .9rem;font-size:.83rem}
.btn[disabled]{opacity:.42;cursor:not-allowed}
.btn--ancho{width:100%}

section{padding:56px 0}
section.oscura{background:var(--vinotinto);color:var(--crema)}
section.oscura h2{color:#fff}
section.rosa{background:var(--empolvado);color:var(--marron)}
section.rosa h2{color:var(--vinotinto)}

.hero{position:relative;min-height:80vh;display:flex;align-items:flex-end;color:#fff;
  padding:0 0 44px;overflow:hidden;background:var(--vinotinto)}
.hero .fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,3,10,.92) 0%,rgba(24,4,12,.74) 48%,rgba(30,4,15,.44) 100%)}
.hero .contenedor{position:relative;z-index:2;width:100%}
.hero p.bajada{font-size:1.06rem;color:#f2dfe2;max-width:32ch}
.logo-hero{width:min(260px,62vw);height:auto;margin-bottom:1.1rem}
@media(min-width:720px){.logo-hero{width:300px}}
/* El h1 sigue existiendo para Google y los lectores de pantalla: el logo es
   una imagen, y una página sin encabezado de nivel 1 pierde en las dos cosas. */
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.hero .acciones{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.6rem 0 1.2rem}
.dir{font-size:.9rem;color:#e6c8cd}

.grilla{display:grid;gap:1rem}
@media(min-width:720px){.grilla.g3{grid-template-columns:repeat(3,1fr)}.grilla.g2{grid-template-columns:repeat(2,1fr)}}
.tarjeta{background:#fff;border:1px solid #f0e2e3;border-radius:var(--radio);padding:1.1rem;
  box-shadow:0 1px 3px rgba(36,4,17,.05)}
.tarjeta h3{margin-bottom:.3rem}
.tarjeta .foto{border-radius:10px;aspect-ratio:4/3;object-fit:cover;width:100%;margin-bottom:.7rem}
.precio{font-family:var(--serif);font-size:1.45rem;color:var(--ladrillo);font-weight:600}
.dur{font-size:.85rem;color:var(--marron);opacity:.85}
.etiqueta{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:.2rem .5rem;border-radius:6px;background:var(--empolvado);color:var(--marron)}
.etiqueta.demo{background:#ffe9c2;color:#7a5200}

/* carrusel de trabajos: cambia cada 3 s con fundido lento */
.carrusel{position:relative;aspect-ratio:1;max-width:520px;margin:0 auto;border-radius:18px;
  overflow:hidden;background:var(--vinotinto)}
.carrusel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s ease-in-out}
.carrusel img.visible{opacity:1}
/* El texto va DEBAJO de la foto, no encima. La franja oscura que estaba antes
   dibujaba una línea horizontal visible sobre cada trabajo: el degradado corta
   con un borde duro y el ojo lo lee como una raya que ensucia la foto. */
.pie-foto{max-width:520px;margin:.7rem auto 0;text-align:center;
  font-size:.88rem;color:var(--marron)}

/* Flechas para pasar las fotos a mano. Círculo translúcido: se ve sobre una
   foto clara y sobre una oscura sin tener que saber cuál es cuál. */
.carrusel .flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;border:0;
  background:rgba(20,3,10,.42);color:#fff;font-size:1.7rem;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  backdrop-filter:blur(3px);transition:background .15s}
.carrusel .flecha:hover{background:rgba(20,3,10,.68)}
.carrusel .flecha.izq{left:10px;padding-right:3px}
.carrusel .flecha.der{right:10px;padding-left:3px}
.puntos{display:flex;gap:6px;justify-content:center;margin-top:.9rem;flex-wrap:wrap}
.puntos button{width:9px;height:9px;border-radius:50%;background:rgba(82,61,61,.32);padding:0}
.puntos button[aria-current="true"]{background:var(--vinotinto);transform:scale(1.35)}
@media(prefers-reduced-motion:reduce){.carrusel img{transition:none}}

.pasos{display:flex;gap:.4rem;margin-bottom:1.4rem;font-size:.74rem}
.pasos div{flex:1;padding-top:.45rem;border-top:4px solid #eddcde;color:#b09a9c;font-weight:600}
.pasos div.activo{border-color:var(--neon);color:var(--vinotinto)}
.pasos div.hecho{border-color:var(--ladrillo);color:var(--ladrillo)}
.selservicio{display:flex;gap:.8rem;align-items:flex-start;background:#fff;border:1.5px solid #f0e2e3;
  border-radius:var(--radio);padding:.9rem;cursor:pointer;text-align:left;width:100%}
.selservicio[aria-pressed="true"]{border-color:var(--neon);background:#fff5fa}
.selservicio .tilde{flex:0 0 24px;height:24px;border-radius:6px;border:2px solid #d9c3c5;
  display:grid;place-items:center;font-size:.8rem;color:#fff;margin-top:2px}
.selservicio[aria-pressed="true"] .tilde{background:var(--neon);border-color:var(--neon)}
.selservicio img{width:64px;height:64px;border-radius:10px;object-fit:cover;flex:0 0 64px}
.resumen{position:sticky;bottom:0;background:#fff;border-top:1.5px solid #f0e2e3;
  padding:.9rem 20px calc(.9rem + env(safe-area-inset-bottom));margin:1.5rem -20px 0;z-index:20}
.resumen .fila{display:flex;justify-content:space-between;font-size:.92rem}
.resumen .senia{color:var(--ladrillo);font-weight:600}

.cal{background:#fff;border:1px solid #f0e2e3;border-radius:var(--radio);padding:1rem}
.cal .cabecera{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.cal .cabecera strong{font-family:var(--serif);font-size:1.1rem;text-transform:capitalize}
.cal .cabecera button{width:44px;height:44px;border-radius:50%;border:1.5px solid #e3d3d4;font-size:1.1rem}
.cal .dias,.cal .celdas{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .dias span{text-align:center;font-size:.7rem;color:#a98f92;font-weight:700;padding-bottom:.3rem}
.cal .celdas button{aspect-ratio:1;border-radius:10px;font-size:.92rem;display:flex;
  flex-direction:column;align-items:center;justify-content:center;border:1.5px solid transparent;line-height:1.1}
.cal .celdas button.libre{background:#fff5fa;color:var(--vinotinto);border-color:#f6d9e7;font-weight:600}
.cal .celdas button.cerrado{color:#cbb8ba;cursor:not-allowed}
.cal .celdas button[aria-pressed="true"]{background:var(--neon);color:#fff;border-color:var(--neon)}
.cal .celdas button .pt{font-size:.58rem;font-weight:600;opacity:.8;margin-top:2px}
.cal .celdas button.excep{background:#fdecec;border-color:#f0c9c9;color:#8a2a2a}
.cal .celdas button.especial{background:#eef6fb;border-color:#c3ddec;color:#14567a}
/* min-width:0 o el texto del horario ensancha la celda y desborda la grilla
   entera: en 390 px se iba 33 px para la derecha. */
.cal .celdas button{min-width:0;overflow:hidden;padding:2px}
.cal .celdas button .pt{display:none}
@media(min-width:460px){.cal .celdas button .pt{display:block}}
.leyenda{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.8rem;font-size:.76rem;color:var(--marron)}
.leyenda span{display:flex;align-items:center;gap:.35rem}
.resenia .autor{display:flex;gap:.6rem;align-items:center}
.resenia .ini{width:38px;height:38px;border-radius:50%;background:var(--empolvado);color:var(--marron);
  display:grid;place-items:center;font-family:var(--serif);font-weight:600;flex:0 0 38px}
.resenia .estr{color:#e8a13a;letter-spacing:2px;margin-top:.5rem}
.resenia.pend{border-left:5px solid #c9a227}
.leyenda i{width:13px;height:13px;border-radius:4px;border:1.5px solid;display:inline-block}
.dia-fila{display:flex;flex-direction:column;gap:.5rem}
.dia-fila .cab{display:flex;align-items:center;gap:.6rem}
.dia-fila .cab strong{flex:1}
.dia-fila .horas{display:flex;align-items:center;gap:.5rem}
.dia-fila .horas input{flex:1;min-width:0}
.horarios{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.5rem}
.horarios button{min-height:48px;border-radius:10px;border:1.5px solid #e3d3d4;background:#fff;font-weight:600}
.horarios button[aria-pressed="true"]{background:var(--neon);border-color:var(--neon);color:#fff}

.turno{background:#fff;border:1px solid #f0e2e3;border-left:5px solid var(--empolvado);
  border-radius:var(--radio);padding:1rem}
.turno.sol{border-left-color:#c9a227}
.turno.ace{border-left-color:var(--ladrillo)}
.turno.sen{border-left-color:#2d7fb8}
.turno.con{border-left-color:var(--ok)}
.turno.fin{border-left-color:#bdbdbd}
.estado{font-size:.82rem;font-weight:600;color:var(--marron)}
.acciones{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.acciones .btn{min-height:44px;padding:.6rem 1rem;font-size:.9rem}

.tabs{display:flex;gap:.3rem;overflow-x:auto;padding-bottom:.4rem;margin-bottom:1.2rem}
.tabs button{white-space:nowrap;padding:.6rem .9rem;border-radius:999px;font-size:.88rem;
  border:1.5px solid #e3d3d4;background:#fff;min-height:44px}
.tabs button[aria-selected="true"]{background:var(--vinotinto);color:#fff;border-color:var(--vinotinto);font-weight:600}
.aviso{border-radius:12px;padding:.85rem 1rem;font-size:.9rem;border:1.5px solid}
.aviso.info{background:#f2f8fc;border-color:#c6e0ef;color:#124e70}
.aviso.ok{background:#f1f9f4;border-color:#bfe3cd;color:#12603a}
.aviso.warn{background:#fff8e8;border-color:#f0dcae;color:#6d4c00}
.aviso.error{background:#fdf1f2;border-color:#efc4c8;color:#8c1c2b}
.vacio{text-align:center;padding:2.4rem 1rem;color:var(--marron)}
.vacio .grande{font-family:var(--serif);font-size:1.3rem;color:var(--vinotinto)}

.modal{position:fixed;inset:0;z-index:100;display:none;align-items:flex-end;justify-content:center;
  background:rgba(36,4,17,.55)}
.modal.abierto{display:flex}
.modal .caja{background:var(--crema);width:100%;max-width:560px;border-radius:18px 18px 0 0;
  padding:1.3rem 1.2rem calc(1.3rem + env(safe-area-inset-bottom));max-height:92vh;overflow:auto;position:relative}
@media(min-width:720px){.modal{align-items:center}.modal .caja{border-radius:18px}}
.modal h3{margin-bottom:.6rem;padding-right:52px}
.cerrar{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.92);font-size:1.2rem;line-height:1}

.buscador{position:relative;margin-bottom:1rem}
.ficha{display:flex;gap:.8rem;align-items:center}
.ficha .av{width:52px;height:52px;border-radius:50%;background:var(--empolvado);color:var(--marron);
  display:grid;place-items:center;font-family:var(--serif);font-size:1.2rem;font-weight:600;flex:0 0 52px}
.ficha .av{border-radius:50%}
/* Foto de perfil: el botón "Cambiar foto" cuelga del avatar en vez de ser una
   fila aparte, así se entiende de una que edita esa foto y no otra. */
.av-editable{position:relative;flex:0 0 auto;text-align:center}
.av-editable .cambiar{display:inline-block;margin-top:.35rem;font-size:.68rem;font-weight:700;
  color:var(--ladrillo);cursor:pointer;text-decoration:underline;line-height:1.2}
.enlace{background:none;border:0;padding:.2rem 0;color:var(--ladrillo);text-decoration:underline;
  cursor:pointer;font:inherit;min-height:auto}
input[readonly]{background:#f6eeee;color:#7d6467;cursor:default}

/* Editar web: la miniatura al lado del botón, para saber qué se está cambiando */
.foto-web{display:flex;gap:.9rem;align-items:flex-start;margin-top:.6rem}
.foto-web img{width:112px;height:84px;object-fit:cover;border-radius:10px;flex:0 0 112px;
  border:1px solid #f0e2e3}

/* Listado de clientas del panel de Flor */
.clienta-fila{display:flex;gap:.8rem;align-items:center;width:100%;text-align:left;
  background:#fff;border:1px solid #f0e2e3;border-radius:14px;padding:.8rem;min-height:64px}
.clienta-fila:hover{border-color:var(--empolvado)}
.clienta-fila .datos{min-width:0;flex:1}
.clienta-fila .datos strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cumple{display:inline-block;background:#fff0f6;color:#b8005f;border-radius:999px;
  padding:.1rem .5rem;font-size:.7rem;font-weight:700;margin-left:.4rem}

/* Pie en dos columnas: la dirección a la izquierda y el mapa al lado, chico.
   En celular se apilan solos porque la segunda columna no entra. */
.pie-cols{display:grid;gap:1.2rem;align-items:start}
@media(min-width:760px){.pie-cols{grid-template-columns:1fr 320px}}

/* Mapa: no cargamos el iframe hasta que lo piden. Un embed de Google en la
   portada agrega medio mega y cookies de terceros a todo el que entra. */
.mapa{position:relative;border-radius:14px;overflow:hidden;background:#2c0a17;
  border:1px solid rgba(232,204,209,.14);min-height:150px;display:grid;place-items:center}
#mapa-tapa{text-align:center;padding:1.1rem .9rem}
.mapa iframe{width:100%;height:190px;border:0;display:block;background:#efe4e6}
.mapa.cargado{display:block;min-height:0}
.mapa.cargado #mapa-tapa{padding:.7rem .9rem}
.check{display:flex;gap:.65rem;align-items:flex-start;cursor:pointer;line-height:1.45}
.check input{width:22px;height:22px;flex:0 0 22px;margin-top:.1rem;accent-color:var(--ladrillo)}

.gustos{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.gusto{background:#fff;border:1px solid #f0e2e3;border-radius:12px;padding:.6rem .8rem}
.gusto .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#a98f92;font-weight:700}
.gusto .v{font-weight:600;font-size:.95rem}
.tiras{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.tiras button{padding:0;border-radius:12px;overflow:hidden;width:88px;height:88px;flex:0 0 88px;
  border:1.5px solid #f0e2e3}
.tiras img{width:100%;height:100%;object-fit:cover}
.selfoto{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;max-height:220px;overflow:auto}
.selfoto button{padding:0;border-radius:8px;overflow:hidden;border:2.5px solid transparent;aspect-ratio:1}
.selfoto button[aria-pressed="true"]{border-color:var(--neon)}
.selfoto img{width:100%;height:100%;object-fit:cover}
/* Varias reglas de acá usan display, así que [hidden] necesita ganar. */
[hidden]{display:none !important}
.pie-legal{margin-top:1.4rem;padding-top:1rem;border-top:1px solid rgba(232,204,209,.16)}
.enlaces-legales{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .8rem;
  font-size:.69rem;line-height:1.4;color:#a8848d}
.enlaces-legales>*{min-height:32px;display:inline-flex;align-items:center}
.enlaces-legales button,.enlaces-legales a{background:none;border:0;padding:0;
  color:#c9a3ab;font:inherit;text-decoration:underline;cursor:pointer}
.enlaces-legales button:hover,.enlaces-legales a:hover{color:#fff}
/* El de arrepentimiento va chico pero no igual que el resto: la norma pide que
   se distinga a simple vista, así que conserva recuadro y versalitas. */
.boton-arrep{text-decoration:none !important;text-transform:uppercase;letter-spacing:.06em;
  font-size:.62rem;font-weight:700;color:#fff !important;padding:.28rem .6rem !important;
  border:1px solid rgba(255,255,255,.55) !important;border-radius:999px}
.boton-arrep:hover{background:rgba(255,255,255,.12)}
.pie .data-fiscal{background:#fff;color:#0a3d62;border-radius:4px;font-weight:700;
  padding:.2rem .45rem !important;text-decoration:none !important;font-size:.62rem}
.data-fiscal img{width:100%;height:auto}

/* El pie y la sección "Dónde estamos" son los dos oscuros y quedan pegados:
   sin esta línea se leen como un solo bloque con la dirección repetida. */
.pie{background:var(--vinotinto);color:#e8ccd1;padding:32px 0 28px;font-size:.88rem;
  border-top:1px solid rgba(232,204,209,.16)}
.pie a{color:#f5c9d6}
.redes{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.1rem 0 0}
.red{display:inline-flex;align-items:center;gap:.5rem;min-height:46px;padding:.6rem 1.1rem;
  border-radius:999px;text-decoration:none;font-weight:600;font-size:.9rem}
.red.wa{background:#1f9c4d;color:#fff}
.red.ig{background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888);color:#fff}
.red svg{flex:0 0 22px}
.red .largo{display:none}
@media(min-width:480px){.red .corto{display:none}.red .largo{display:inline}}
.firma{margin:1.4rem 0 0;padding-top:1.1rem;border-top:1px solid rgba(232,204,209,.16);
  font-size:.76rem;letter-spacing:.04em;color:#a8808a}
.firma strong{color:#e2b9c2;font-weight:600}
.firma a{text-decoration:none;border-bottom:1px solid rgba(226,185,194,.35)}
.firma a:hover strong{color:#fff}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:12px;top:12px;z-index:200;background:#fff;padding:.6rem 1rem;border-radius:8px}

/* --- Piezas que solo existen en el sitio real --- */

/* Mientras llegan los datos. Un texto quieto se lee como "se colgó"; el giro
   dice que algo está pasando. */
.cargando{display:flex;align-items:center;justify-content:center;gap:.7rem;
  min-height:60vh;color:var(--marron);font-size:.95rem}
.giro{width:22px;height:22px;border-radius:50%;border:2.5px solid #eeced2;
  border-top-color:var(--ladrillo);animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.giro{animation-duration:2.4s}}

/* Cuando algo falla de verdad y no hay nada que mostrar. */
.pantalla-error{max-width:34rem;margin:4rem auto;text-align:center;padding:0 1rem}

/* Entrar con Google */
.btn--google{background:#fff;color:#3c4043;border:1px solid #dadce0;font-weight:600}
.btn--google:hover{background:#f7f8f8}
.btn--google svg{width:18px;height:18px;flex:0 0 18px}

/* Foto del trabajo con su descripción al lado, en el detalle del turno */
.foto-desc{display:flex;gap:.7rem;align-items:flex-start;background:#fff;
  border:1px solid #f0e2e3;border-radius:12px;padding:.6rem}
.foto-desc img{width:72px;height:72px;flex:0 0 72px;object-fit:cover;border-radius:8px;
  background:#f3ecec}

/* Condiciones de cancelación: una sola línea chiquita que se despliega. */
.detalle-mini{margin-top:.6rem;font-size:.7rem;line-height:1.45;color:var(--marron)}
.detalle-mini>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;
  gap:.3rem;min-height:24px;text-decoration:underline;text-underline-offset:2px;
  opacity:.85}
.detalle-mini>summary::-webkit-details-marker{display:none}
.detalle-mini>summary::before{content:'▸';font-size:.65rem;transition:transform .15s}
.detalle-mini[open]>summary::before{transform:rotate(90deg)}
.detalle-mini>p{margin:.35rem 0 0;padding-left:.75rem;border-left:2px solid var(--empolvado)}

/* Volver: arriba de todo en las pantallas legales. Tiene que verse como un
   camino de salida, no como un botón más de acción. */
.volver{background:none;border:0;padding:.4rem 0;margin:0 0 .4rem;min-height:40px;
  display:inline-flex;align-items:center;gap:.35rem;color:var(--ladrillo);
  font-weight:600;font-size:.92rem;cursor:pointer}
.volver::before{content:'←';font-size:1.05rem;line-height:1}
.volver:hover{color:var(--vinotinto)}

/* Rubro de servicios (Uñas, Cejas, Pestañas). */
.rubro{margin:0;font-family:'Lora',Georgia,serif;font-size:1.25rem;
  color:var(--vinotinto);display:block}

/* Cada rubro se pliega. El `summary` es todo el renglón del título: el área de
   toque es la línea entera y no un triangulito de 10 px. La flecha es propia
   porque la del navegador cambia de forma en cada sistema. */
.rubro-plegable{margin-top:2rem;border-bottom:1.5px solid var(--empolvado)}
#servicios .rubro-plegable:first-of-type{margin-top:1.6rem}
.rubro-plegable>summary{cursor:pointer;list-style:none;display:flex;gap:.6rem;
  align-items:baseline;padding:.2rem 0 .5rem;min-height:44px}
.rubro-plegable>summary::-webkit-details-marker{display:none}
.rubro-plegable>summary::after{content:'▾';margin-left:auto;font-size:.9rem;
  color:var(--ladrillo);transition:transform .15s;align-self:center}
.rubro-plegable:not([open])>summary::after{transform:rotate(-90deg)}
.rubro-plegable>summary:hover .rubro{color:var(--ladrillo)}
.rubro-plegable .cuantos{font-size:.78rem;color:var(--marron);opacity:.75;
  white-space:nowrap}
.rubro-plegable>.grilla{margin:.4rem 0 1.6rem}
/* El navegador esconde los hijos de un `details` cerrado con un `display:none`
   de su hoja de estilos propia, y `.grilla` le gana con su `display:grid`: el
   rubro quedaba plegado en el título y con las tarjetas a la vista igual. Hay
   que apagarlo a mano. */
.rubro-plegable:not([open])>.grilla{display:none}

/* Descripción del servicio: dos líneas y "Ver más". Las tarjetas de la grilla
   quedan todas de la misma altura, que es lo que hace que se puedan comparar. */
.desc-serv .txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin:0}
.desc-serv.abierta .txt{-webkit-line-clamp:unset;overflow:visible}
.desc-serv .ver-mas{background:none;border:0;padding:.25rem 0 0;margin:0;min-height:28px;
  color:var(--ladrillo);font-size:.78rem;font-weight:600;cursor:pointer;text-decoration:underline;
  text-underline-offset:2px}
.desc-serv .ver-mas:hover{color:var(--vinotinto)}

/* Flechas para reordenar servicios en el panel. */
.mover{display:flex;flex-direction:column;gap:.3rem;flex:0 0 auto}
.mover .btn{min-height:34px;padding:.2rem .6rem;line-height:1}
.mover .btn[disabled]{opacity:.35;cursor:not-allowed}

/* Fotos del trabajo en el panel: una grilla de miniaturas y nada más. Flor
   sube la foto y listo; escribir una descripción por foto era un trabajo que
   no le servía a nadie. */
.galeria-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:.6rem;margin-bottom:.6rem}
.foto-trabajo{position:relative}
.foto-trabajo img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;
  background:#f4e9ea;display:block}
.foto-trabajo .btn{width:100%;margin-top:.3rem;padding:.25rem;font-size:.72rem;min-height:30px}
.foto-trabajo .marca{display:block;margin-top:.3rem;text-align:center;font-size:.7rem;
  color:var(--ladrillo);font-weight:600;min-height:30px;line-height:30px}

/* Promociones en la portada. */
.promos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:.7rem;margin-top:1rem}
.promo-tarjeta{background:linear-gradient(135deg,var(--vinotinto),#3d0a1e);color:#fff;
  border-radius:14px;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.15rem}
.promo-tarjeta .valor{font-family:'Lora',Georgia,serif;font-size:1.3rem;color:var(--neon)}
.promo-tarjeta .mini{color:rgba(255,255,255,.78)}

/* Resumen de la reserva con descuento. */
.resumen .fila.promo{color:var(--ladrillo);font-weight:600}
.resumen .tachado{text-decoration:line-through;opacity:.55}

/* Calendario de turnos del panel. La cuenta de turnos va como burbuja: el
   número del día y la cantidad son dos datos distintos y se leen mal juntos. */
.cal-turnos .celdas button{position:relative;background:#fdf7f8;border-color:#f3e6e8}
.cal-turnos .celdas button .n{font-size:.92rem;font-weight:600;color:var(--marron)}
.cal-turnos .celdas button.con{background:#fff5fa;border-color:#f6d9e7}
.cal-turnos .celdas button.con .n{color:var(--vinotinto)}
.cal-turnos .celdas button.hoy{box-shadow:inset 0 0 0 2px var(--empolvado)}
.cal-turnos .celdas button .cuenta{position:absolute;top:3px;right:3px;min-width:16px;height:16px;
  border-radius:8px;background:var(--ladrillo);color:#fff;font-size:.6rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1}
.cal-turnos .celdas button[aria-pressed="true"]{background:var(--neon);border-color:var(--neon)}
.cal-turnos .celdas button[aria-pressed="true"] .n{color:#fff}
.cal-turnos .celdas button[aria-pressed="true"] .cuenta{background:#fff;color:var(--neon)}
.dia-detalle{margin-top:1rem}

/* Turno con el plazo de la seña vencido. */
.turno.vencido{border-left-color:var(--error);background:#fdf6f7}

/* Tirar para actualizar. Vive fuera del flujo de la página para no empujar
   nada al aparecer. */
#tirar{position:fixed;top:-44px;left:50%;transform:translate(-50%,0);z-index:60;
  width:38px;height:38px;border-radius:50%;background:#fff;border:1.5px solid #f0e2e3;
  box-shadow:0 4px 14px rgba(36,4,17,.14);display:none;align-items:center;
  justify-content:center;pointer-events:none}
#tirar.visible{display:flex}
#tirar .giro{width:18px;height:18px;border-width:2px;opacity:.45}
#tirar.listo .giro{opacity:1;border-top-color:var(--neon)}
#tirar.cargando .giro{opacity:1;border-top-color:var(--neon)}
#tirar:not(.cargando) .giro{animation:none}

/* =============================================================================
   MÉTRICAS
   Barras de CSS: pesan cero y se dibujan al instante en un celular.
   ============================================================================= */
.rango-metricas{display:flex;gap:.4rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap}
.rango-metricas .btn[aria-pressed="true"]{background:var(--vinotinto);color:#fff;
  border-color:var(--vinotinto)}

.datos-grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.6rem;margin:.8rem 0 1.4rem}
.dato{background:#fff;border:1px solid #f0e2e3;border-radius:14px;padding:.9rem 1rem}
.dato .num{font-family:var(--serif);font-size:1.9rem;line-height:1.05;color:var(--vinotinto)}
.dato .tit{font-size:.82rem;font-weight:600;color:var(--marron);margin-top:.2rem}
.dato .ayuda{font-size:.72rem;color:#a98f92;margin-top:.1rem}

.h-met{margin:1.8rem 0 .3rem;font-family:var(--serif);font-size:1.15rem;
  color:var(--vinotinto)}
.gr{background:#fff;border:1px solid #f0e2e3;border-radius:14px;
  padding:.9rem 1rem;margin-top:.7rem}

/* Una fila = etiqueta, pista y valor. El valor va SIEMPRE escrito: así ningún
   dato depende de pasar el mouse, que en un celular no existe. */
.fila-barra{display:grid;grid-template-columns:minmax(78px,30%) 1fr auto;
  gap:.6rem;align-items:center;padding:.3rem 0}
.fila-barra .etiq{font-size:.78rem;color:var(--marron);line-height:1.25}
.fila-barra .pista{height:14px;background:#f7eef0;border-radius:4px;overflow:hidden}
/* Punta redondeada del lado del dato y recta sobre la línea de base. */
.fila-barra .marca{height:100%;border-radius:0 4px 4px 0;min-width:2px}
.fila-barra .valor{font-size:.76rem;font-weight:600;color:var(--vinotinto);
  white-space:nowrap}

.grupo-barras{padding:.5rem 0;border-bottom:1px solid #faf2f3}
.grupo-barras:last-child{border-bottom:0}
.etiq-grupo{font-weight:600;font-size:.9rem;color:var(--vinotinto);margin-bottom:.15rem}
/* Separación entre las dos barras del grupo: hueco del color del fondo, no un
   borde. Un borde agregaría tinta que no es dato. */
.grupo-barras .fila-barra + .fila-barra{margin-top:2px}

.ref-colores{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.6rem;
  font-size:.78rem;color:var(--marron)}
.ref-colores span{display:inline-flex;align-items:center;gap:.35rem}
.ref-colores i{width:11px;height:11px;border-radius:3px;display:inline-block}

@media(max-width:430px){
  .fila-barra{grid-template-columns:minmax(64px,34%) 1fr auto;gap:.4rem}
  .fila-barra .etiq{font-size:.72rem}
  .fila-barra .valor{font-size:.7rem}
}

/* Fila de "ya le toca volver": el nombre a la izquierda, el botón de escribirle
   a la derecha. En celular el botón baja y ocupa todo el ancho, porque un
   botón de 90 px al lado de dos líneas de texto se toca mal. */
.fila-volver{display:flex;gap:.6rem;align-items:center;justify-content:space-between;
  background:#fff;border:1px solid #f0e2e3;border-radius:12px;padding:.6rem .7rem}
.fila-volver .mini{margin-top:.15rem}
@media (max-width:520px){
  .fila-volver{flex-direction:column;align-items:stretch}
  .fila-volver .btn{width:100%}
}

/* Diagnóstico de los avisos: la cadena de eslabones, en orden. El primero en
   cruz es la causa; los de abajo son consecuencia. */
.diag{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.diag li{display:flex;gap:.5rem;align-items:flex-start;font-size:.85rem;line-height:1.35}
.diag li>span{flex:0 0 20px;width:20px;height:20px;border-radius:50%;display:grid;
  place-items:center;font-size:.72rem;font-weight:700;color:#fff;margin-top:.1rem}
.diag li.si>span{background:#3F7A3E}
.diag li.no>span{background:var(--ladrillo)}
.diag li.dud>span{background:#9C8B8B}
.diag li.no{color:var(--vinotinto)}

/* Casilla con su texto al lado, alineada y con área de toque de sobra. El
   `input` global es ancho al 100%; acá tiene que ser una casilla y nada más. */
.casilla{display:flex;gap:.5rem;align-items:center;font-weight:500;font-size:.9rem;
  min-height:40px;margin:0;cursor:pointer}
.casilla input[type=checkbox]{width:auto;min-height:0;margin:0;flex:0 0 auto}

/* =============================================================================
   Cartel de cookies

   Abajo, no en el medio: un cartel que tapa la pantalla en la primera visita es
   la forma más rápida de perder a quien venía a ver precios. Y los dos botones
   tienen el mismo tamaño a propósito — hacer que "Rechazar" sea chiquito o gris
   claro es un patrón oscuro, y además la AAIP pide que rechazar sea tan fácil
   como aceptar.
   ========================================================================== */
#cookies{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--vinotinto);color:var(--crema);
  padding:.9rem clamp(1rem,4vw,2rem);
  display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap;
  box-shadow:0 -8px 24px rgba(36,4,17,.18);
  transform:translateY(110%);transition:transform .25s ease-out}
#cookies.visible{transform:none}
#cookies .ck-texto{max-width:52ch;font-size:.82rem;line-height:1.45}
#cookies .ck-texto p{margin:.2rem 0 0}
#cookies .ck-texto strong{color:#fff}
#cookies .enlace{color:var(--empolvado);text-decoration:underline;
  text-underline-offset:2px;background:none;border:0;padding:0;font:inherit;cursor:pointer}
#cookies .ck-botones{display:flex;gap:.5rem;flex:0 0 auto}
#cookies .btn--linea{color:var(--crema);border-color:var(--empolvado)}
#cookies .btn--linea:hover{background:rgba(228,185,186,.16)}
@media (max-width:640px){
  #cookies{flex-direction:column;align-items:stretch;gap:.7rem}
  #cookies .ck-botones{display:grid;grid-template-columns:1fr 1fr}
  #cookies .ck-botones .btn{width:100%}
}
/* "Cookies" en el pie no necesita estilo propio: `.enlaces-legales button` ya
   le da la pinta de los demás enlaces legales. */