/* ============================================================
   WaterGo · logo.css · /personalizacion (la página única, 14/11/2026;
   antes el logo tenía su página, que ahora redirige aquí)

   El mismo mundo que el estudio (estudio.css): papel cerámico,
   tinta del logotipo, pastillas de 20 px, hojas blancas. La botella
   arriba y siempre a la vista; los pasos debajo; el precio y el
   botón pegados abajo.

   Móvil primero (390 px manda). Desde 900 px, dos columnas: la
   botella a la izquierda a toda altura y el panel a la derecha,
   que scrollea por dentro.
   ============================================================ */

.cl [hidden] { display: none !important; }

.cl {
  --borde: color-mix(in srgb, var(--tinta) 12%, transparent);
  --borde-fuerte: color-mix(in srgb, var(--tinta) 30%, transparent);
  --suave: color-mix(in srgb, var(--tinta) 64%, transparent);
  --alto-accion: 72px;
  min-height: 100dvh;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-display);
}

/* ---------- la cima: barra, pasos y visor ---------- */

.cl__cima {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--papel);
}

.cl__barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) 16px 4px;
}

.cl__volver {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 999px;
  color: var(--tinta);
  background: var(--blanco);
  border: 1.5px solid var(--borde);
}
.cl__volver:active { scale: .94; }

.cl__titulo { font-size: 1.02rem; line-height: 1.1; letter-spacing: -.01em; }
.cl__ante {
  display: block;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--suave);
  margin-bottom: 2px;
}

.cl__cinta {
  margin: 4px 16px 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--tinta);
  color: #F7F3F0;
  font-size: .82rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.cl__cinta-cod { font-family: var(--f-mono); font-weight: 500; letter-spacing: .06em; }

/* Los pasos: cuatro botones en fila. El número va en un disco; el
   paso actual se rellena de tinta, los hechos se quedan con borde. */
.cl__pasos ol {
  list-style: none;
  margin: 0;
  padding: 6px 12px 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.cl__pasos button {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 2px;
  border: 0;
  background: none;
  font-size: .84rem;
  font-weight: 600;
  color: var(--suave);
  cursor: pointer;
  border-radius: 999px;
}
.cl__pasos b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1.5px solid var(--borde-fuerte);
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 500;
}
.cl__pasos button[aria-current="step"] { color: var(--tinta); }
.cl__pasos button[aria-current="step"] b { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.cl__pasos button[data-hecho="si"] { color: var(--tinta); }
.cl__pasos button[data-hecho="si"] b { border-color: var(--tinta); }
.cl__pasos button:disabled, .cl__pasos button[aria-disabled="true"] { cursor: default; opacity: .55; }
.cl__pasos button:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; }

/* El visor: la misma luz de estudio que /personalizacion. */
.cl__visor {
  position: relative;
  height: clamp(250px, 40svh, 460px);
  background:
    radial-gradient(78% 46% at 50% 96%, rgba(29, 29, 27, .07), rgba(29, 29, 27, 0) 72%),
    radial-gradient(120% 68% at 50% 12%, #FFFFFF, rgba(255, 255, 255, 0) 64%),
    linear-gradient(180deg, #FCFAF8 0%, #F2ECE6 100%);
  border-bottom: 1px solid var(--borde);
}
.cl__lienzo {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;        /* el dedo en vertical sigue moviendo la página */
  cursor: grab;
}
.cl__lienzo:active { cursor: grabbing; }

/* Los dos visores en la misma caja: el 3D encima, que aparece con un
   fundido cuando ha cargado. Con la foto delante, el 3D no recibe
   el dedo; con el 3D delante, las herramientas de la foto (cotas y
   encuadre) se apartan porque no le aplican. */
.cl__lienzo--3d {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease-out);
}
.cl__visor[data-vista="3d"] .cl__lienzo--3d { opacity: 1; pointer-events: auto; }
.cl__visor[data-vista="3d"] .cl__herr:not(.cl__herr--3d) { display: none; }
.cl__visor:not([data-vista="3d"]) .cl__herr--3d,
.cl__visor:not([data-vista="3d"]) .cl__cara,
.cl[data-paso="botella"] .cl__herr--3d { display: none; }
.cl__visor[data-vista="3d"] .cl__lienzo:not(.cl__lienzo--3d) { visibility: hidden; }
.cl__lienzo:focus-visible { outline: 2px solid var(--tinta); outline-offset: -4px; }

.cl__herr {
  position: absolute;
  top: 10px;
  right: 12px;
  display: grid;
  gap: 8px;
}
.cl__icono {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1.5px solid var(--borde);
  background: color-mix(in srgb, var(--blanco) 84%, transparent);
  color: var(--tinta);
  cursor: pointer;
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out);
}
.cl__icono::after { content: ""; position: absolute; inset: -4px; }
.cl__icono[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.cl__icono:active { scale: .93; }

.cl__pista {
  position: absolute;
  left: 12px;
  bottom: 10px;          /* abajo, sobre la sombra: arriba tapaba el asa y el tapón */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blanco) 82%, transparent);
  font-size: .74rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--tinta) 78%, transparent);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .3s var(--ease-out);
}
.cl__pista[data-fuera="si"] { opacity: 0; }

.cl__visor-estado {
  position: absolute;
  left: 12px;
  top: 12px;
  max-width: calc(100% - 80px);
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .02em;
  color: var(--suave);
}

/* ---------- el panel ---------- */

.cl__panel {
  padding: 22px 16px calc(var(--alto-accion) + 28px + env(safe-area-inset-bottom));
  outline: none;
}
.cl__paso[hidden] { display: none; }
.cl__paso { animation: cl-entra .32s var(--ease-out); }
@keyframes cl-entra { from { opacity: 0; translate: 0 8px; } }

.cl__h2 { font-size: 1.5rem; letter-spacing: -.025em; margin-bottom: 16px; }
/* El título del paso recibe el foco al cambiar de paso (para el
   lector de pantalla); no es un control: sin marco. */
.cl__h2[tabindex="-1"]:focus { outline: none; }
.cl__h3 { font-size: 1rem; letter-spacing: -.01em; margin-bottom: 10px; }

.cl__nota {
  margin-top: 10px;
  font-family: var(--f-body);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--gris-70);
}

/* Las tallas: filas anchas, como las hojas del estudio. */
.cl__opciones { display: grid; gap: 10px; }
.cl__opcion, .cl__color, .cl__tecnica {
  position: relative;
  width: 100%;
  text-align: left;
  border: 1.5px solid var(--borde);
  border-radius: var(--r-m);
  background: var(--blanco);
  color: var(--tinta);
  cursor: pointer;
  transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.cl__opcion:active, .cl__color:active, .cl__tecnica:active { scale: .985; }
.cl__opcion[aria-checked="true"], .cl__color[aria-checked="true"], .cl__tecnica[aria-checked="true"] {
  border-color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--tinta);
}
.cl__opcion:focus-visible, .cl__color:focus-visible, .cl__tecnica:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

.cl__opcion {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 14px 16px;
}
.cl__opcion-nombre { font-size: 1.12rem; font-weight: 700; letter-spacing: -.015em; }
.cl__opcion-dato { font-family: var(--f-mono); font-size: .76rem; color: var(--suave); align-self: center; justify-self: end; }
.cl__opcion-texto { grid-column: 1 / -1; font-family: var(--f-body); font-size: .9rem; color: var(--gris-70); }
.cl__opcion-precio { grid-column: 1 / -1; font-size: .86rem; font-weight: 600; }
.cl__opcion-precio:empty { display: none; }

/* Los colores: tres campos grandes del color de la botella. El color
   del producto es la calidez de la marca (tokens.css, v2). */
.cl__colores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cl__color {
  display: grid;
  gap: 2px;
  padding: 10px 10px 12px;
}
.cl__color-muestra {
  display: block;
  height: 76px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: var(--c);
  box-shadow: inset 0 -10px 18px rgba(29, 29, 27, .07), inset 0 8px 14px rgba(255, 255, 255, .45);
}
.cl__color-nombre { font-weight: 700; }
.cl__color-texto { font-family: var(--f-body); font-size: .82rem; color: var(--gris-70); }

/* ---------- subir ---------- */

.cl__segmento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tinta) 6%, transparent);
}
.cl__segmento button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-weight: 600;
  cursor: pointer;
}
.cl__segmento button[aria-selected="true"] { background: var(--blanco); box-shadow: var(--sombra-s); }
/* En «Pedir»: comprarla ya o pedir presupuesto (fase 2). */
.cl__segmento--pedir { margin: 20px 0 18px; }
.cl__segmento[hidden] { display: none; }

.cl__derechos {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 4px 0 14px;
  font-family: var(--f-body);
  font-size: .9rem;
  line-height: 1.45;
  cursor: pointer;
}
.cl__derechos input, .cl__interruptor input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--tinta);
}
.cl__derechos a { text-underline-offset: 3px; }

.cl__subir {
  position: relative;
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
  padding: 26px 18px;
  border: 1.5px dashed var(--borde-fuerte);
  border-radius: var(--r-m);
  background: var(--blanco);
  cursor: pointer;
  transition: border-color .18s var(--ease-out), background-color .18s var(--ease-out);
}
.cl__subir:hover, .cl__subir[data-encima="si"] { border-color: var(--tinta); background: var(--ceramica); }
.cl__subir:focus-within { outline: 2px solid var(--tinta); outline-offset: 2px; }
.cl__subir[data-estado="cargado"] { border-style: solid; padding: 14px 18px; }
.cl__fichero { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cl__subir-tit { font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }
.cl__subir-texto { font-family: var(--f-body); font-size: .86rem; color: var(--gris-70); }

.cl__error {
  margin-top: 8px;
  font-family: var(--f-body);
  font-size: .88rem;
  color: var(--color-destructive);
}
.cl__error[hidden] { display: none; }

/* ---------- el análisis ---------- */

.cl__analisis { display: grid; gap: 26px; margin-top: 22px; }
.cl__analisis[hidden] { display: none; }

.cl__tecnicas { display: grid; gap: 10px; }
.cl__tecnica { display: grid; gap: 6px; padding: 14px 16px; }
.cl__tecnica:disabled { cursor: not-allowed; }
.cl__tecnica-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cl__tecnica-cab b { font-size: 1.05rem; }
.cl__reco {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--papel);
  font-size: .72rem;
  font-weight: 600;
}
.cl__reco[hidden] { display: none; }
.cl__tecnica-texto { font-family: var(--f-body); font-size: .88rem; color: var(--gris-70); line-height: 1.45; }

/* La aptitud: la cifra, una barra fina y la palabra. La barra es un
   dato (0-100), no un adorno. */
.cl__apto {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.cl__apto-num { font-family: var(--f-mono); font-size: .9rem; font-weight: 500; min-width: 2.2ch; }
.cl__apto-barra { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--tinta) 10%, transparent); overflow: hidden; }
.cl__apto-barra i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--nivel, var(--tinta)); transition: width .4s var(--ease-out); }
.cl__apto-txt { font-size: .8rem; font-weight: 600; color: var(--nivel, var(--tinta)); }
.cl__apto[data-nivel="verde"] { --nivel: var(--color-success); }
.cl__apto[data-nivel="ambar"] { --nivel: var(--color-warning); }
.cl__apto[data-nivel="rojo"]  { --nivel: var(--color-destructive); }

.cl__avisos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.cl__avisos li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  font-family: var(--f-body);
  font-size: .9rem;
  line-height: 1.45;
}
.cl__avisos svg { margin-top: 2px; }
.cl__avisos [data-tipo="mal"] svg { color: var(--color-destructive); }
.cl__avisos [data-tipo="ojo"] svg { color: var(--color-warning); }
.cl__avisos [data-tipo="info"] svg { color: var(--gris-55); }

.cl__rango {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 14px;
}
.cl__rango label { font-size: .92rem; font-weight: 600; }
.cl__rango output { font-family: var(--f-mono); font-size: .9rem; }
.cl__rango input {
  grid-column: 1 / -1;
  width: 100%;
  height: 32px;
  margin: 0;
  accent-color: var(--tinta);
}

.cl__interruptor {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 6px 0;
  font-size: .92rem;
  line-height: 1.4;
  cursor: pointer;
}

.cl__fichas { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.cl__ficha {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px 6px 6px;
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  background: var(--blanco);
  font-family: var(--f-mono);
  font-size: .78rem;
  cursor: pointer;
}
.cl__ficha i {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--c);
  border: 1px solid var(--borde);
}
.cl__ficha[aria-pressed="false"] { opacity: .5; }
.cl__ficha[aria-pressed="false"] i { background: repeating-linear-gradient(-45deg, var(--c) 0 4px, transparent 4px 8px); }
.cl__ficha[aria-pressed="true"] { border-color: var(--tinta); }

/* ---------- pedir ---------- */

.cl__resumen {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 0 0 22px;
  padding: 16px;
  border-radius: var(--r-m);
  background: var(--blanco);
  border: 1.5px solid var(--borde);
}
.cl__resumen dt { font-size: .84rem; color: var(--suave); }
.cl__resumen dd { margin: 0; font-size: .92rem; font-weight: 600; text-align: right; }

.cl__muestra { margin-bottom: 22px; }
.cl__enlace {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.cl__codigo-fila { display: flex; gap: 8px; }
.cl__codigo-fila .cl__campo { flex: 1; font-family: var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.cl__secundario {
  min-height: 48px;
  padding: 0 18px;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  background: var(--blanco);
  font-weight: 600;
  cursor: pointer;
}

.cl__form { display: grid; gap: 14px; }
.cl__form[hidden] { display: none; }
.cl__campos { display: grid; grid-template-columns: 1fr; gap: 12px; }
.cl__f { display: grid; gap: 5px; }
.cl__et { font-size: .86rem; font-weight: 600; }
.cl__et small { font-weight: 400; color: var(--suave); }
.cl__campo {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: 12px;
  background: var(--blanco);
  color: var(--tinta);
  font: 500 16px/1.3 var(--f-display);   /* 16 px: el iPhone no hace zoom al tocar */
}
textarea.cl__campo { resize: vertical; min-height: 88px; }
.cl__campo:focus { outline: 2px solid var(--tinta); outline-offset: 1px; border-color: var(--tinta); }
.cl__campo[aria-invalid="true"] { border-color: var(--color-destructive); }
.cl__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.cl__hecho {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 22px 0;
  outline: none;
}
.cl__hecho[hidden] { display: none; }
.cl__hecho svg { color: var(--color-success); }
.cl__hecho p { font-family: var(--f-body); font-size: 1rem; color: var(--gris-70); }

/* ---------- la barra de abajo ---------- */

.cl__accion {
  position: fixed;
  z-index: 8;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--alto-accion);
  padding: 11px 16px max(11px, env(safe-area-inset-bottom));
  background: var(--blanco);
  border-top: 1px solid color-mix(in srgb, var(--tinta) 8%, transparent);
  box-shadow: 0 -8px 24px rgba(29, 29, 27, .05);
}
.cl__precio { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.cl__total { font-size: 1.36rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
/* Hasta dos líneas: a 390 px «botella · marcado en el presupuesto» no
   cabe en una y se cortaba con puntos suspensivos. */
.cl__detalle {
  font-family: var(--f-mono);
  font-size: .68rem;
  line-height: 1.3;
  color: var(--suave);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cl__siguiente {
  flex: 0 0 auto;
  min-height: 50px;
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--blanco);
  font-weight: 600;
  cursor: pointer;
  transition: opacity .18s var(--ease-out);
}
.cl__siguiente:active { scale: .97; transition-duration: 90ms; }
.cl__siguiente:disabled { opacity: .45; cursor: not-allowed; }
/* Sin estar listo, se ve apagado pero se puede tocar: dice qué falta. */
.cl__siguiente[aria-disabled="true"] { opacity: .55; }

/* Lo que falta, encima del botón (en el móvil la barra es fija). */
.cl__falta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(100% + 8px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 10px 10px 14px;
  border: 1px solid color-mix(in srgb, var(--color-destructive) 45%, transparent);
  border-radius: 14px;
  background: var(--blanco);
  box-shadow: 0 8px 24px rgba(29, 29, 27, .10);
  font-family: var(--f-body);
}
.cl__falta[hidden] { display: none; }
.cl__falta p { margin: 0; font-size: .92rem; font-weight: 600; color: var(--color-destructive); }
.cl__falta button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--tinta);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font-weight: 600;
  cursor: pointer;
}
.cl__falta button[hidden] { display: none; }
.cl__falta button:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.cl__siguiente:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.cl__siguiente[data-cargando="si"] { opacity: .7; cursor: progress; }

/* ============================================================
   La página única (plan /personalizar único, B6a, 14/11/2026)
   ============================================================ */

.cl__h3--sep { margin-top: 26px; }

/* «Nombre · cara opuesta ↻»: abajo a la derecha, lejos de la pista. */
.cl__cara {
  position: absolute;
  right: 12px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: 999px;
  background: color-mix(in srgb, var(--blanco) 92%, transparent);
  color: var(--tinta);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}
.cl__cara::after { content: ""; position: absolute; inset: -6px; }
.cl__cara:active { scale: .96; }
.cl__cara:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* Los chips (logo y nombre) y «Tu logo · + Añadir nombre». */
.cl__elementos { margin: 0 0 18px; }
[data-grupo-uno] .cl__nota { margin-top: 8px; }
.cl__uno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 4px 14px;
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  background: var(--blanco);
}
.cl__uno-tit { font-weight: 700; font-size: .95rem; }
.cl__anadir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--blanco);
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  cursor: pointer;
}
.cl__anadir:active { scale: .97; }
.cl__anadir:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

.cl__chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--tinta) 6%, transparent);
}
.cl__chip {
  display: grid;
  gap: 1px;
  min-height: 52px;
  min-width: 0;
  padding: 7px 12px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
}
.cl__chip[aria-selected="true"] { background: var(--blanco); box-shadow: var(--sombra-s); }
.cl__chip:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; }
.cl__chip-nombre { font-weight: 700; font-size: .95rem; }
.cl__chip-dato {
  font-family: var(--f-mono);
  font-size: .7rem;
  color: var(--suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* «¿Qué quieres poner?» y la orientación: segmentos con radio. */
.cl__segmento button[aria-checked="true"] { background: var(--blanco); box-shadow: var(--sombra-s); }
.cl__segmento--que { margin-bottom: 20px; }
.cl__segmento--que button { min-height: 48px; font-size: 1rem; }
.cl__segmento--ori { margin-bottom: 0; }
.cl__segmento--ori button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; }
.cl__segmento button:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; }

.cl__grupo + .cl__grupo, [data-panel-diseno] + .cl__grupo--tecnica { margin-top: 24px; }
.cl__grupo--tecnica { margin-top: 22px; }

/* Los tres avisos del DTF, dentro de su tarjeta. */
.cl__dtf-avisos {
  display: grid;
  gap: 6px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--borde);
}
.cl__dtf-avisos span {
  position: relative;
  padding-left: 14px;
  font-family: var(--f-body);
  font-size: .84rem;
  line-height: 1.45;
  color: var(--gris-70);
}
.cl__dtf-avisos span::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-warning);
}

/* La cara: dos tarjetas con el dibujo de la botella. */
.cl__posiciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cl__posicion {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 112px;
  padding: 14px 10px 12px;
  border: 1.5px solid var(--borde);
  border-radius: var(--r-m);
  background: var(--blanco);
  color: var(--tinta);
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.cl__posicion svg { color: var(--suave); }
.cl__posicion[aria-checked="true"] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.cl__posicion[aria-checked="true"] svg { color: var(--tinta); }
.cl__posicion:active { scale: .985; }
.cl__posicion:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* El deslizador del nombre, traído del editor (personalizar-nombre.css). */
.cl__pn-medidas { gap: 10px; }

.cl__quitar {
  min-height: 44px;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-destructive);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* El aviso que se deshace, encima de la barra de abajo. */
.cl__toast {
  position: fixed;
  z-index: 9;
  left: 16px;
  right: 16px;
  bottom: calc(var(--alto-accion) + 12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 440px;
  margin: 0 auto;
  padding: 8px 8px 8px 16px;
  border-radius: 14px;
  background: var(--tinta);
  color: var(--blanco);
  font-size: .9rem;
  box-shadow: 0 10px 28px rgba(29, 29, 27, .22);
  animation: cl-entra .24s var(--ease-out);
}
.cl__toast button {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blanco) 14%, transparent);
  color: var(--blanco);
  font-weight: 600;
  cursor: pointer;
}

/* Guardar diseño */
.cl__guardar {
  display: grid;
  gap: 10px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--borde);
}
.cl__guardar .cl__h3, .cl__guardar .cl__nota { margin: 0; }
.cl__contacto summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.cl__contacto summary small { font-weight: 400; color: var(--suave); margin-left: 4px; }
.cl__contacto .cl__campos { margin: 6px 0 12px; }
.cl__secundario--ancho { width: 100%; }
.cl__secundario[data-cargando="si"] { opacity: .7; cursor: progress; }

.cl__dialogo {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 20px;
  border: 0;
  border-radius: var(--r-m);
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-display);
  box-shadow: 0 24px 60px rgba(29, 29, 27, .28);
}
.cl__dialogo::backdrop { background: rgba(29, 29, 27, .45); }
.cl__dialogo-img {
  display: block;
  width: 100%;
  max-height: 46dvh;
  object-fit: contain;
  margin: 4px 0 6px;
  border-radius: 12px;
  background: var(--blanco);
}
.cl__dialogo .cl__codigo-fila { margin: 6px 0 16px; }
.cl__codigo-fila .cl__campo--enlace { text-transform: none; letter-spacing: 0; }
.cl__campo--enlace { font-family: var(--f-mono); font-size: 16px; min-width: 0; text-overflow: ellipsis; }
.cl__dialogo-botones { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Con el aviso de cookies abierto, que no tape la barra. */
body:has(.cookies:not([hidden])) .cookies { bottom: calc(var(--alto-accion) + 10px + env(safe-area-inset-bottom, 0px)); }

/* ---------- 320 px ---------- */
@media (max-width: 359px) {
  .cl__pasos button { font-size: 0; gap: 0; }
  .cl__pasos b { font-size: .72rem; }
  .cl__pasos button[aria-current="step"] { font-size: .8rem; gap: 4px; }
  .cl__colores { gap: 6px; }
  .cl__color-muestra { height: 58px; }
  .cl__siguiente { padding: 13px 16px; }
  .cl__total { font-size: 1.2rem; }
}

/* ---------- ordenador ---------- */
@media (min-width: 900px) {
  .cl {
    height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 470px);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .cl__cima {
    position: relative;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--borde);
  }
  .cl__barra { padding: 18px 28px 6px; }
  .cl__titulo { font-size: 1.2rem; }
  .cl__pasos ol { padding: 8px 24px 12px; max-width: 560px; }
  .cl__cinta { margin: 6px 28px 0; align-self: flex-start; }
  /* min-height: 0: sin él, el visor (flex) crecía con su lienzo y se
     salía 60 px por debajo de la pantalla, encima del bloque de texto
     que va debajo del configurador (14/11/2026). */
  .cl__visor { flex: 1 1 auto; height: auto; border-bottom: 0; min-height: 0; }
  .cl__panel {
    grid-column: 2;
    grid-row: 1;
    overflow-y: auto;
    padding: 30px 28px 32px;
  }
  .cl__accion {
    position: static;
    grid-column: 2;
    grid-row: 2;
    padding: 14px 28px;
    box-shadow: none;
  }
  .cl__campos { grid-template-columns: 1fr 1fr; }
  .cl__f--ancho { grid-column: 1 / -1; }
  body:has(.cookies:not([hidden])) .cookies { bottom: 20px; }
}

/* En el ordenador la barra no es fija: el aviso se ancla a ella. */
@media (min-width: 900px) {
  .cl__accion { position: relative; }
  .cl__falta { left: 28px; right: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .cl__paso, .cl__toast { animation: none; }
  .cl__apto-barra i { transition: none; }
}

/* ---------- debajo del configurador: lo que contaba la informativa ----------
   /personalizacion era una página de texto; el configurador la sustituye
   (14/11/2026) y este bloque guarda lo que sigue siendo cierto. En el
   móvil la barra de abajo es fija: el relleno inferior deja leer la
   última pregunta por encima de ella. */
.cl-info {
  background: var(--papel);
  color: var(--tinta);
  border-top: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent);
  padding: 48px 16px calc(72px + 40px + env(safe-area-inset-bottom));
}
.cl-info__cuerpo { max-width: 68ch; margin: 0 auto; }
.cl-info__titulo {
  font-family: var(--f-display);
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 40px 0 16px;
}
.cl-info__titulo:first-child { margin-top: 0; }
.cl-info h3 { font-family: var(--f-display); font-size: 1.08rem; margin: 0 0 8px; }
.cl-info p, .cl-info dd {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gris-70);
  margin: 0 0 10px;
}
.cl-info a { color: var(--tinta); text-underline-offset: 3px; }
.cl-info__tecnicas { display: grid; gap: 24px; }
.cl-info__datos { display: grid; gap: 0; margin: 0; }
.cl-info__datos div {
  display: grid;
  grid-template-columns: minmax(0, 10em) minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--tinta) 10%, transparent);
}
.cl-info__datos dt { font-family: var(--f-display); font-weight: 700; font-size: .95rem; }
.cl-info__datos dd { margin: 0; }
.cl-info__pregunta { border-bottom: 1px solid color-mix(in srgb, var(--tinta) 10%, transparent); }
.cl-info__pregunta summary {
  cursor: pointer;
  padding: 14px 0;
  min-height: 44px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.02rem;
}
.cl-info__pregunta p { margin: 0 0 16px; }

@media (min-width: 900px) {
  .cl-info { padding: 72px 28px 80px; }
  .cl-info__tecnicas { grid-template-columns: 1fr 1fr; gap: 40px; }
}