/*
 * Marca Don Detalle — hoja compartida por las dos caras públicas del carwash:
 *   agenda.dondetalle.cl   (pedir hora)
 *   clientes.dondetalle.cl (portal del socio)
 *
 * Vive en el dashboard (pymesimple/assets/) y los dos subdominios la enlazan
 * con URL absoluta: una sola copia, y cambiarle un color acá se ve en ambos.
 *
 * Nada que ver con app.css: eso es el panel de gestión, esto es la marca que ve
 * el cliente. Negro, verde lima y titulares gruesos en mayúsculas, sacados del
 * material gráfico del taller. Todas las clases van con prefijo ddm-.
 *
 * Es una paleta OSCURA a propósito y no cambia con el tema del sistema: la
 * marca es negra, y una versión clara sería otra marca.
 */

:root{
  --ddm-negro:   #0b0b0b;
  --ddm-panel:   #141414;
  --ddm-panel2:  #1b1b1b;
  --ddm-lima:    #a3d82c;
  --ddm-lima-2:  #8bbf1f;
  --ddm-blanco:  #f4f6f2;
  --ddm-gris:    #9aa096;
  --ddm-gris-2:  #6c726a;
  --ddm-linea:   rgba(255,255,255,.10);
  --ddm-rojo:    #ff6b5e;
  --ddm-radio:   14px;
  /* Titulares: Anton es el equivalente libre más cercano al condensado pesado
     del material gráfico. Si no carga, la cascada cae en las condensadas del
     sistema antes de rendirse con la sans normal. */
  --ddm-display: Anton, 'Arial Narrow', 'Helvetica Neue Condensed', 'Roboto Condensed', Impact, sans-serif;
  --ddm-texto:   Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--ddm-negro);
  color: var(--ddm-blanco);
  font-family: var(--ddm-texto);
  font-size:16px;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}

/* Las franjas diagonales del fondo. Van en un pseudo-elemento fijo para que no
   se muevan con el scroll y no participen del layout.
   Corren de derecha a izquierda, sin parar.

   El desplazamiento no es un número cualquiera: el patrón se repite cada 78px
   MEDIDOS PERPENDICULARES a las franjas, y como están a 115°, para volver al
   mismo punto hay que correrse 78 / sen(115°) = 86,06px en horizontal. Se usan
   dos períodos (172,12px) para que el ciclo dure lo suficiente. Con cualquier
   otro valor la animación daría un salto en cada vuelta. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: repeating-linear-gradient(
    115deg,
    transparent 0 37px,
    rgba(255,255,255,.06) 37px 40px,
    transparent 40px 78px
  );
  animation: ddm-franjas 18s linear infinite;
}
@keyframes ddm-franjas{
  from{ background-position: 0 0; }
  to{ background-position: -172.12px 0; }
}

/* Columna única: en el teléfono ocupa todo, en pantalla grande se queda
   angosta y centrada. La landing NO es un sitio de escritorio. */
.ddm-app{
  position:relative; z-index:1;
  max-width:480px; margin:0 auto; min-height:100vh;
  display:flex; flex-direction:column;
}
.ddm-pad{ padding:0 20px; }

/* ---------------------------------------------------------------- titulares */
.ddm-display{
  font-family: var(--ddm-display);
  font-weight:400;              /* Anton solo trae un peso, y ya es pesadísimo */
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.94;
  margin:0;
}
.ddm-h1{ font-size:clamp(38px, 13vw, 58px); }
.ddm-h2{ font-size:clamp(24px, 7.5vw, 32px); }
.ddm-h3{ font-size:19px; }

/* Blanco con el degradado plateado del material gráfico. El color plano va
   primero: si el navegador no soporta el recorte, el texto igual se lee. */
.ddm-plata{
  color: var(--ddm-blanco);
  background: linear-gradient(178deg, #ffffff 0%, #e8ebe6 42%, #9ba09a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .ddm-plata{ background:none; -webkit-text-fill-color: currentColor; }
}
.ddm-lima{ color: var(--ddm-lima); }

.ddm-kicker{
  font-family: var(--ddm-display); text-transform:uppercase;
  font-size:13.5px; letter-spacing:.10em; color:var(--ddm-blanco);
}
.ddm-sub{ margin:0; color:var(--ddm-gris); font-size:14.5px; line-height:1.55; }

/* La rayita lima que separa el logo del titular. */
.ddm-regla{ width:64px; height:3px; background:var(--ddm-lima); border:0; margin:16px auto; }

/* ------------------------------------------------------------------ bloques */
.ddm-card{
  background: var(--ddm-panel);
  border:1px solid var(--ddm-linea);
  border-radius: var(--ddm-radio);
  padding:18px;
  margin-bottom:14px;
}
.ddm-card.plana{ background:transparent; border:0; padding:0; }

/* El logo trae su propia rayita lima abajo, asi que se dibuja un poco mas ancho
   que un isotipo suelto: la proporcion es 1,34:1 contando esa linea. */
.ddm-logo{ display:block; margin:0 auto 4px; width:190px; max-width:62%; height:auto; }

/* -------------------------------------------------------------- formularios */
.ddm-campo{ display:block; margin-bottom:15px; }
.ddm-campo > span{
  display:block; margin-bottom:7px;
  font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ddm-gris);
}
.ddm-campo input,
.ddm-campo select,
.ddm-campo textarea{
  width:100%;
  background: var(--ddm-panel2);
  border:1px solid var(--ddm-linea);
  border-radius:12px;
  padding:14px;
  color:var(--ddm-blanco);
  font:inherit;
  font-size:16px;              /* menos de 16px y iOS hace zoom al enfocar */
}
.ddm-campo textarea{ min-height:76px; resize:vertical; }
.ddm-campo input::placeholder,
.ddm-campo textarea::placeholder{ color:var(--ddm-gris-2); }
.ddm-campo input:focus,
.ddm-campo select:focus,
.ddm-campo textarea:focus{
  outline:2px solid var(--ddm-lima);
  outline-offset:1px;
  border-color:transparent;
}
.ddm-ayuda{ margin:6px 0 0; font-size:12.5px; color:var(--ddm-gris-2); line-height:1.45; }

/* El honeypot: invisible para la gente, apetecible para un bot. No usa
   display:none porque varios bots lo detectan y saltan justo esos campos. */
.ddm-trampa{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

/* ------------------------------------------------------------------ botones */
.ddm-btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-height:52px; padding:14px 18px;
  border:0; border-radius:12px; cursor:pointer; text-decoration:none;
  background: var(--ddm-lima); color:#0a1400;
  font-family: var(--ddm-display); font-size:19px; text-transform:uppercase; letter-spacing:.04em;
}
.ddm-btn:active{ background: var(--ddm-lima-2); }
.ddm-btn.ghost{
  background:transparent; color:var(--ddm-lima);
  border:2px solid var(--ddm-lima);
}
.ddm-btn.gris{
  background:transparent; color:var(--ddm-blanco);
  border:1px solid var(--ddm-linea);
  font-family:var(--ddm-texto); font-size:15px; text-transform:none; letter-spacing:0; font-weight:700;
}
.ddm-btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* --------------------------------------------------------- bloques de hora */
.ddm-horas{ display:grid; grid-template-columns:repeat(auto-fill, minmax(84px,1fr)); gap:9px; }
.ddm-hora{ position:relative; }
.ddm-hora input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.ddm-hora span{
  display:flex; align-items:center; justify-content:center;
  min-height:48px; border-radius:11px;
  background:var(--ddm-panel2); border:1px solid var(--ddm-linea);
  font-weight:800; font-size:15px; color:var(--ddm-blanco);
}
.ddm-hora input:checked + span{ background:var(--ddm-lima); color:#0a1400; border-color:var(--ddm-lima); }
.ddm-hora input:focus-visible + span{ outline:2px solid var(--ddm-lima); outline-offset:2px; }
/* Ocupada: se muestra pero no se puede elegir. Tacharla explica más que
   esconderla —el cliente ve que ese horario existe y que ya se tomó. */
.ddm-hora.ocupada span{ color:var(--ddm-gris-2); text-decoration:line-through; background:transparent; }
.ddm-hora.ocupada input{ cursor:not-allowed; }

/* ------------------------------------------------------------------ avisos */
.ddm-aviso{
  border-radius:12px; padding:13px 15px; margin-bottom:15px;
  font-size:14px; line-height:1.5;
  background:rgba(163,216,44,.12); border:1px solid rgba(163,216,44,.35); color:#dff0b6;
}
.ddm-aviso.mal{ background:rgba(255,107,94,.10); border-color:rgba(255,107,94,.35); color:#ffc4bd; }
.ddm-aviso a{ color:inherit; font-weight:800; }

.ddm-tag{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  background:rgba(255,255,255,.08); color:var(--ddm-gris);
}
.ddm-tag.ok{ background:rgba(163,216,44,.16); color:var(--ddm-lima); }
.ddm-tag.espera{ background:rgba(255,196,84,.14); color:#ffc454; }

/* --------------------------------------------------------------- pie y links */
.ddm-pie{
  margin-top:auto; padding:26px 20px calc(26px + env(safe-area-inset-bottom, 0px));
  text-align:center; color:var(--ddm-gris-2); font-size:12.5px; line-height:1.6;
}
.ddm-pie a{ color:var(--ddm-gris); }

.ddm-lista{ list-style:none; margin:0; padding:0; }
.ddm-lista li{
  display:flex; gap:12px; align-items:center;
  padding:13px 0; border-bottom:1px solid var(--ddm-linea);
}
.ddm-lista li:last-child{ border-bottom:0; }

/* ==========================================================================
   PEDIR HORA — piezas compartidas por la landing (agenda.dondetalle.cl) y el
   portal del socio (clientes.dondetalle.cl).

   Vivían inline en la landing. Se subieron acá cuando el portal pasó a usar el
   MISMO flujo: la tira de días, la hoja de servicios y sus fichas tienen que
   verse y comportarse igual en las dos puertas, y con dos copias del CSS la
   primera diferencia aparece a la semana siguiente.

   Lo que sigue viviendo inline en cada página es lo suyo propio: el hero y la
   pantalla de transferencia de la landing, la tarjeta de socio del portal.
   ========================================================================== */

/* --- Tira de días --------------------------------------------------------
   Se arrastra con el dedo. scroll-snap deja cada ficha calzada al soltar,
   que es lo que evita la sensación de lista a medio camino. */
.lp-dias{
  display:flex; gap:9px; overflow-x:auto; padding:2px 0 8px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.lp-dias::-webkit-scrollbar{ display:none; }
.lp-dia{ position:relative; flex:0 0 auto; scroll-snap-align:start; }
.lp-dia input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.lp-dia span{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:60px; padding:9px 0 8px; border-radius:12px;
  background:var(--ddm-panel2); border:2px solid var(--ddm-linea);
  color:var(--ddm-blanco);
}
.lp-dia em{ font-style:normal; font-size:11px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ddm-gris); }
.lp-dia b{ font-family:var(--ddm-display); font-size:23px; line-height:1.1; }
.lp-dia i{ font-style:normal; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ddm-gris); }
.lp-dia input:checked + span{
  background:rgba(163,216,44,.13); border-color:var(--ddm-lima); color:var(--ddm-lima);
}
.lp-dia input:checked + span em,
.lp-dia input:checked + span i{ color:var(--ddm-lima); }
.lp-dia input:focus-visible + span{ outline:2px solid var(--ddm-lima); outline-offset:2px; }

/* --- Selector de servicios -------------------------------------------
   El botón que abre la hoja. Muestra lo elegido, no un "Elige…" mudo. */
.lp-elegir{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding:14px 16px; border-radius:12px; cursor:pointer;
  background:var(--ddm-panel2); border:1px solid var(--ddm-linea);
  color:var(--ddm-blanco); font:inherit; text-align:left;
}
.lp-elegir[aria-expanded="true"]{ border-color:var(--ddm-lima); }
.lp-elegir-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.lp-elegir-txt b{ font-size:15.5px; font-weight:800; }
.lp-elegir-txt small{ font-size:12.5px; color:var(--ddm-gris); }
.lp-elegir.puesto .lp-elegir-txt small{
  font-family:var(--ddm-display); font-size:20px; color:var(--ddm-lima); letter-spacing:.01em;
}
/* Flecha dibujada con bordes: un carácter ">" se ve distinto en cada
   sistema y acá el detalle importa. */
.lp-flecha{
  flex:0 0 auto; width:9px; height:9px; margin-right:4px;
  border-right:2px solid var(--ddm-lima); border-bottom:2px solid var(--ddm-lima);
  transform:rotate(45deg); transition:transform .18s;
}

/* La hoja. Sin JS queda en línea (data-hoja ausente) y todo funciona igual;
   con JS pasa a ser una hoja que sube desde abajo. */
.lp-hoja[data-hoja]{
  position:fixed; inset:0; z-index:40; display:none;
  align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.66); padding:0;
}
.lp-hoja[data-hoja].abierta{ display:flex; }
.lp-hoja[data-hoja] .lp-hoja-caja{
  width:100%; max-width:480px; max-height:86vh;
  display:flex; flex-direction:column;
  background:var(--ddm-panel); border-top:2px solid var(--ddm-lima);
  border-radius:18px 18px 0 0;
  animation:lp-subir .22s ease-out;
}
@keyframes lp-subir{ from{ transform:translateY(14%); opacity:.4 } to{ transform:none; opacity:1 } }

.lp-hoja-barra{ display:none; align-items:center; justify-content:space-between;
  padding:16px 18px 10px; border-bottom:1px solid var(--ddm-linea); }
.lp-hoja[data-hoja] .lp-hoja-barra{ display:flex; }
.lp-cerrar{ background:none; border:0; color:var(--ddm-gris); font-size:30px; line-height:1;
  cursor:pointer; padding:0 4px; }
.lp-volver{
  background:none; border:0; color:var(--ddm-lima); font-family:var(--ddm-texto);
  font-size:14px; font-weight:700; cursor:pointer; padding:0 10px 0 0;
}
.lp-hoja-scroll{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 0; }
/* Barra de scroll fina que solo se nota mientras se usa: transparente en
   reposo, visible al pasar el mouse o mientras se arrastra, y se desvanece
   de nuevo sola. Firefox no tiene forma de animar su scrollbar-color, así
   que ahí queda fina pero fija (scrollbar-width ya la adelgaza). */
.lp-hoja-scroll{ scrollbar-width:thin; scrollbar-color:transparent transparent; }
.lp-hoja-scroll:hover, .lp-hoja-scroll:focus-within, .lp-hoja-scroll.lp-scrolleando{
  scrollbar-color:rgba(255,255,255,.28) transparent;
}
.lp-hoja-scroll::-webkit-scrollbar{ width:5px; }
.lp-hoja-scroll::-webkit-scrollbar-track{ background:transparent; }
.lp-hoja-scroll::-webkit-scrollbar-thumb{
  background:transparent; border-radius:4px;
  transition:background-color .5s ease;
}
.lp-hoja-scroll:hover::-webkit-scrollbar-thumb,
.lp-hoja-scroll:focus-within::-webkit-scrollbar-thumb,
.lp-hoja-scroll.lp-scrolleando::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.28);
  transition:background-color .15s ease;
}
/* Sin padding-top: position:sticky ancla su "top:0" al borde del padding,
   no al borde donde el overflow recorta — con padding-top acá quedaba una
   rendija de esos px donde el título de la ficha que viene scrolleando
   alcanzaba a asomar ANTES de que el título de sección lo tapara (se veía
   el nombre de la ficha montado sobre el título verde). El aire de arriba
   ahora lo pone el propio título (ver margin-top de .lp-grupo). */
.lp-hoja[data-hoja] .lp-hoja-scroll{ padding:0 14px 8px; }
.lp-hoja-pie{ display:none; padding:12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--ddm-linea); }
.lp-hoja[data-hoja] .lp-hoja-pie{ display:block; }

/*
 * El título de la categoría manda sobre su lista.
 *
 * Antes era una línea chica en lima, del mismo peso que cualquier dato de la
 * ficha: se leía como una etiqueta suelta y no como el encabezado de lo que
 * viene abajo. Con la tipografía de titulares, el tamaño de un título de sección
 * y una línea que cruza el ancho, la hoja se entiende de un vistazo — hay
 * grupos, y cada uno tiene servicios debajo.
 *
 * Y va PEGADO arriba mientras se rueda (sticky): en una lista larga, saber en
 * qué categoría se está mirando es justo lo que se pierde al bajar. El fondo
 * opaco no es decoración: sin él las fichas se verían pasar por debajo del
 * texto.
 */
.lp-grupo{
  position:sticky; top:0; z-index:3;
  margin:22px 0 10px; padding:6px 0 7px;
  background:var(--ddm-panel);
  font-family:var(--ddm-display); font-size:17px; font-weight:400;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ddm-blanco);
  border-bottom:1px solid var(--ddm-linea);
  display:flex; align-items:baseline; gap:8px;
}
/* Ojo: .lp-grupo siempre es primer hijo de SU .lp-bloque, así que
   ":first-child" a secas calzaba con todos los títulos, no solo el de
   arriba de la hoja — cada sección quedaba con 2px de separación en vez
   de 22px, y sin ese respiro el traspaso sticky entre un título y el
   siguiente no alcanzaba a limpiarse durante el scroll. */
.lp-bloque:first-child > .lp-grupo{ margin-top:2px; }
/* La rayita lima de la marca, delante del nombre: es lo que lo ata al resto de
   la papelería sin pintar el texto entero de un color que no se lee. */
.lp-grupo::before{
  content:''; flex:0 0 auto; width:14px; height:3px; background:var(--ddm-lima);
  align-self:center;
}
.lp-grupo-nota{
  font-family:var(--ddm-texto); font-size:11.5px; font-weight:600; text-transform:none;
  letter-spacing:0; color:var(--ddm-gris); margin-left:auto;
}
.lp-grupo[hidden]{ display:none; }

/* Ficha de servicio: el precio a la derecha, grande, porque es lo que la
   gente viene a mirar. */
.lp-servicio{ display:block; position:relative; margin-bottom:9px; }
.lp-servicio[hidden]{ display:none; }
.lp-servicio input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.lp-servicio-caja{
  display:flex; align-items:center; gap:13px;
  padding:13px 15px; border-radius:13px;
  background:var(--ddm-panel2); border:2px solid var(--ddm-linea);
}
/* La casilla, dibujada: la nativa no se puede pintar de lima en todos los
   navegadores y acá tiene que verse marcada de un vistazo. */
.lp-tick{
  flex:0 0 auto; width:22px; height:22px; border-radius:7px;
  border:2px solid var(--ddm-gris-2); position:relative;
}
.lp-tick::after{
  content:""; position:absolute; left:6px; top:2px; width:5px; height:10px;
  border-right:2.5px solid #0a1400; border-bottom:2.5px solid #0a1400;
  transform:rotate(45deg) scale(0); transition:transform .12s;
}
.lp-servicio-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.lp-servicio-txt b{ font-size:15px; font-weight:800; color:var(--ddm-blanco); }
.lp-servicio-txt small{ font-size:12.5px; color:var(--ddm-gris); line-height:1.35; }
.lp-servicio-txt em{ font-style:normal; font-size:11.5px; color:var(--ddm-gris-2); }

/* --- Descripción larga con "Ver más" -----------------------------------
   El texto vive dentro del <summary>: plegado se recorta a dos líneas y
   abierto se muestra entero. Así no hay que repetir el texto dos veces en
   el HTML, y sin JavaScript sigue funcionando. */
.lp-desc{ margin:2px 0 0; }
.lp-desc summary{ list-style:none; cursor:pointer; display:block; }
/* La flechita que el navegador dibuja solo no calza con la marca. */
.lp-desc summary::-webkit-details-marker{ display:none; }
.lp-desc summary::marker{ content:''; }
.lp-desc-txt{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}
.lp-desc[open] .lp-desc-txt{ display:block; overflow:visible; }
/*
 * El z-index NO es decorativo: sin él este enlace no funciona.
 *
 * El checkbox del servicio es un <input> invisible con position:absolute e
 * inset:0, o sea un rectángulo que cubre la ficha entera para que se pueda
 * tocar en cualquier parte. Al estar posicionado, se pinta por encima del
 * texto y se queda con TODOS los clics, incluido el de "Ver más": la ficha
 * se marcaba y la descripción no se abría nunca.
 */
.lp-vermas{
  display:inline-block; margin-top:3px;
  color:var(--ddm-lima); font-size:12px; font-weight:800;
  letter-spacing:.02em;
  position:relative; z-index:2;
}
/* El rótulo lo pone el CSS y no el HTML: así el mismo marcado sirve para
   los dos estados y no hace falta JavaScript para cambiar la palabra. */
.lp-vermas::after{ content:'Ver más'; }
.lp-desc[open] .lp-vermas::after{ content:'Ver menos'; }
.lp-desc summary:focus-visible .lp-vermas{ outline:2px solid var(--ddm-lima); outline-offset:2px; }

/* El precio es lo que la gente viene a mirar: se le da el peso de un
   titular, no el de un dato al margen. */
.lp-servicio-precio{
  flex:0 0 auto; font-family:var(--ddm-display); font-size:26px; color:var(--ddm-lima);
  letter-spacing:.01em; line-height:1;
}
.lp-servicio-monto{ flex:0 0 auto; text-align:right; display:flex; flex-direction:column; gap:3px; align-items:flex-end; }
/* Oferta: el precio de lista tachado, chico y apagado, encima del que se
   cobra. Nunca al revés: el número grande es el que la persona paga. */
.lp-servicio-antes{
  display:flex; align-items:center; gap:6px;
  font-size:14px; font-weight:600; color:var(--ddm-gris-2);
}
.lp-servicio-antes s{ text-decoration:line-through; }
/* La rebaja se grita ACÁ y no con el número viejo: el porcentaje es lo que
   se entiende sin hacer la resta y lo que se ve desde lejos en el teléfono. */
.lp-servicio-baja{
  background:var(--ddm-lima); color:#0b0b0b; border-radius:999px;
  padding:2px 7px; font-size:11.5px; font-weight:800; letter-spacing:.02em;
  white-space:nowrap;
}
.lp-servicio-antes[hidden]{ display:none; }
.lp-servicio input:checked + .lp-servicio-caja{
  border-color:var(--ddm-lima); background:rgba(163,216,44,.12);
}
.lp-servicio input:checked + .lp-servicio-caja .lp-tick{
  background:var(--ddm-lima); border-color:var(--ddm-lima);
}
.lp-servicio input:checked + .lp-servicio-caja .lp-tick::after{ transform:rotate(45deg) scale(1); }
.lp-servicio input:focus-visible + .lp-servicio-caja{ outline:2px solid var(--ddm-lima); outline-offset:2px; }

/* Total, en el pie de la hoja: al marcar varios servicios la suma tiene que
   estar a la vista, no al final del formulario. */
.lp-total{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:0 4px 12px; gap:12px;
}
.lp-total span{ font-size:12px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ddm-gris); }
.lp-total b{ font-family:var(--ddm-display); font-size:32px; color:var(--ddm-lima); line-height:1; }

/* "Quitar todo": deshace la selección entera sin recorrer la lista. Va en el
   pie, que está siempre a la vista, y con el peso de una salida —no compite con
   "Listo", que es lo que la gente viene a apretar. */
.lp-limpiar{
  display:block; width:100%; margin:0 0 8px; padding:9px 12px;
  background:transparent; border:1px solid var(--ddm-linea); border-radius:var(--ddm-radio);
  color:var(--ddm-gris); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
}
.lp-limpiar:active{ background:rgba(255,255,255,.06); }
.lp-limpiar[hidden]{ display:none; }

/* Salida por WhatsApp cuando la hora que se necesita no está en la grilla.
   Va en LIMA sólido, como los botones de la marca: sobre el fondo negro es
   lo que se ve, y quien no encuentra su hora tiene que verlo. */
.lp-wsp{
  display:flex; align-items:center; gap:12px; margin-top:10px;
  padding:13px 15px; border-radius:var(--ddm-radio);
  background:var(--ddm-lima); color:#0a1400; text-decoration:none;
}
.lp-wsp:active{ background:var(--ddm-lima-2); }
/* 🔑 display:flex de la clase le gana al display:none que el navegador le da
   a [hidden], así que esconderlo con la propiedad hidden no hacía nada. Hay
   que decirlo explícito. */
.lp-wsp[hidden]{ display:none; }
.lp-wsp i{ font-style:normal; font-size:22px; flex:0 0 auto; }
.lp-wsp b{ display:block; font-size:14.5px; }
.lp-wsp small{ display:block; margin-top:2px; font-size:12.5px; line-height:1.4; opacity:.78; }

/*
 * Lo que aporta el PORTAL DEL SOCIO: qué le cubre su membresía.
 *
 * La ficha del servicio es la misma de la landing; lo que cambia es que acá
 * hay un plan detrás, y el socio necesita ver de un vistazo cuáles de estos
 * servicios ya los tiene pagados y cuántos le quedan.
 */
.lp-plan-tag{
  display:inline-block; margin-top:3px; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.02em;
  background:rgba(163,216,44,.16); color:var(--ddm-lima);
}
.lp-plan-tag.gastado{ background:rgba(255,255,255,.07); color:var(--ddm-gris-2); }
/* "Incluido" ocupa el lugar del precio, así que se escribe con el mismo peso
   visual: es la respuesta a "¿cuánto me sale?". */
.lp-servicio-precio.incluido{ font-size:17px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .lp-hoja[data-hoja] .lp-hoja-caja{ animation:none; }
}