/* ============ Útiles en una sola pantalla (propuesta del 8-oct-2026, activada el mismo día) ============
   En el ordenador, lo importante cabe en la primera pantalla: a la izquierda
   el icono, el título, para qué sirve y las garantías; a la derecha, la
   herramienta lista para usar.

   Solo en las fichas de las listas UNA_PANTALLA (scripts/seo-utiles.mjs y
   scripts/seo-conversiones.mjs), medidas con Playwright a 1200×800,
   1280×800 y 1440×900 (scripts/medir-una-pantalla.mjs): todos los controles
   de la herramienta y su botón principal quedan dentro de la primera
   pantalla; solo la letra pequeña (notas y privacidad) puede seguir debajo.
   En los altos (editor de diseño, currículum, facturas…) la columna
   izquierda quedaría vacía y la herramienta, estrecha: esos siguen con el
   héroe arriba y la herramienta a todo lo ancho.

   Nada se esconde: «Cómo se usa», las preguntas y los demás útiles siguen
   debajo, visibles, como en el resto de útiles. En el teléfono manda el
   héroe corto de utiles-pagina.css, igual para todos.
   Se activa con <body class="utl-una"> (lo pone el generador). */

/* ---- Ordenador: dos columnas en la primera pantalla (desde 1200 px; por
   debajo, la herramienta necesita todo el ancho) ----
   La herramienta de la derecha es la primera .utl-herramienta de la página
   (`:not(.utl-herramienta~.utl-herramienta)`). Si hubiera más (las pruebas
   de la tanda 8 montan varias en una ficha), las siguientes van debajo, a
   todo lo ancho, sin taparse. */
@media (min-width:1200px){
 body.utl-una main#contenido{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(32px,4vw,64px);align-items:start}
 body.utl-una main#contenido>*{grid-column:1/-1}
 /* Izquierda: el porqué, quieto mientras se usa la herramienta. */
 body.utl-una main#contenido>.utl-hero{grid-column:1;grid-row:2;align-self:start;position:sticky;top:calc(var(--f-alto-cabecera) + 24px);margin:0;padding:clamp(16px,2vw,40px) 0 0}
 body.utl-una main#contenido>.utl-herramienta:not(.utl-herramienta~.utl-herramienta){grid-column:2;grid-row:2;margin:8px 0 0;padding:22px 24px}
 /* El héroe en una sola columna (utiles-pagina.css lo reparte en tres). */
 body.utl-una main#contenido>.utl-hero{grid-template-columns:auto minmax(0,1fr)}
 body.utl-una .utl-hero>.utl-hero-ico+.eyebrow{grid-column:2}
 body.utl-una .utl-hero>:is(h1,.lead,.utl-chips){grid-column:1/-1;grid-row:auto;padding-inline-start:0}
 /* Palabras muy largas (alemán: «Schwangerschaftsrechner») se parten con guion antes que salirse. */
 body.utl-una .utl-hero h1{max-width:22ch;font-size:clamp(2rem,2.9vw,2.875rem);margin-block:var(--f-e-5) var(--f-e-4);overflow-wrap:break-word;hyphens:auto}
 body.utl-una .utl-hero .lead{font-size:1rem;line-height:1.6;margin:0}
 body.utl-una .utl-hero .utl-chips{margin-block-start:var(--f-e-5)}
 /* La herramienta, en su columna. Más baja para que quepa: */
 /* - la franja 1 → 2 → 3, en una fila: cada icono con su paso al lado
     (los mismos pasos siguen, con su texto, en «Cómo se usa»); */
 body.utl-una main#contenido>.utl-herramienta:not(.utl-herramienta~.utl-herramienta) .utl-flujo{--flujo-ico:32px;--flujo-hueco:var(--f-e-5);margin-block-end:var(--f-e-4);padding-block-end:var(--f-e-4)}
 body.utl-una main#contenido>.utl-herramienta:not(.utl-herramienta~.utl-herramienta) .utl-flujo li{flex-direction:row;align-items:center;gap:10px}
 body.utl-una main#contenido>.utl-herramienta:not(.utl-herramienta~.utl-herramienta) .utl-flujo li:not(:last-child)::after{content:none}
 body.utl-una main#contenido>.utl-herramienta:not(.utl-herramienta~.utl-herramienta) .utl-flujo-t{font-size:.8125rem;line-height:1.3}
 body.utl-una main#contenido>.utl-herramienta:not(.utl-herramienta~.utl-herramienta) .utl-flujo-ico .icono{width:16px;height:16px}
 /* - la zona de subir a la izquierda y las opciones a la derecha, a partes iguales; */
 body.utl-una main#contenido>.utl-herramienta:not(.utl-herramienta~.utl-herramienta) .uth-rejilla{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:stretch}
 body.utl-una main#contenido>.utl-herramienta:not(.utl-herramienta~.utl-herramienta) .uth-fuente{min-height:0;display:flex;flex-direction:column;justify-content:center}
 body.utl-una main#contenido>.utl-herramienta:not(.utl-herramienta~.utl-herramienta) .uth-drop:not(.is-compacta){min-height:150px}
 /* - el botón principal sube justo debajo de las opciones y las notas
     (letra pequeña) pasan detrás de él. Solo cambia el orden en pantalla:
     no son enfocables y el lector las sigue leyendo en su sitio. */
 body.utl-una main#contenido>.utl-herramienta:not(.utl-herramienta~.utl-herramienta) .uth-panel>.uth-campos:not([hidden]){display:contents}
 body.utl-una main#contenido>.utl-herramienta:not(.utl-herramienta~.utl-herramienta) .uth-panel>.uth-campos>.uth-nota{order:1}
 /* El aviso de estado vacío va al final (sin dejar hueco entre el botón y las
    notas); cuando dice algo («Procesando…»), sube justo debajo del botón. */
 body.utl-una main#contenido>.utl-herramienta:not(.utl-herramienta~.utl-herramienta) .uth-panel>.uth-estado:empty{order:2}
}

/* ---- Muestra real de antes y después (solo si el útil tiene sus imágenes:
   assets/media/utiles/<útil>-muestra-antes/despues.webp, resultado de la
   propia herramienta). Va en el héroe y es decorativa (aria-hidden). ---- */
body.utl-una{--utl-lima:var(--f-lima)}
.utl-demo{position:relative;width:100%;max-width:460px;aspect-ratio:16/9;margin:var(--f-e-6) 0 0;border-radius:16px;overflow:hidden;background:var(--f-sup-2);box-shadow:0 0 0 1px var(--f-linea)}
.utl-demo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.utl-demo .utl-demo__despues{background:repeating-conic-gradient(var(--f-sup-3) 0 25%,var(--f-sup-2) 0 50%) 0 0/18px 18px;clip-path:inset(0 0 0 50%);animation:utl-cruce 4.5s ease-in-out infinite}
.utl-demo__linea{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--utl-lima,var(--f-lima));animation:utl-linea 4.5s ease-in-out infinite}
.utl-demo__et{position:absolute;bottom:8px;padding:2px 8px;border-radius:999px;background:var(--f-vidrio);color:var(--f-texto);font-size:.6875rem;font-weight:600;letter-spacing:.02em}
.utl-demo__et--a{left:8px}
.utl-demo__et--d{right:8px;background:var(--utl-lima,var(--f-lima));color:var(--f-lima-tinta)}
@keyframes utl-cruce{0%,8%{clip-path:inset(0 0 0 92%)}46%,54%{clip-path:inset(0 0 0 8%)}92%,100%{clip-path:inset(0 0 0 92%)}}
@keyframes utl-linea{0%,8%{left:92%}46%,54%{left:8%}92%,100%{left:92%}}
@media (prefers-reduced-motion:reduce){.utl-demo .utl-demo__despues{animation:none;clip-path:inset(0 0 0 50%)}.utl-demo__linea{animation:none}}
/* En el teléfono la herramienta va primero: la muestra no se enseña. */
@media (max-width:1199px){.utl-demo{display:none}}

/* ---- Más vida en la herramienta (dueño, 8-oct-2026) ---- */
/* El botón de subir, de verdad un botón. */
body.utl-una .uth-fuente strong{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:999px;background:var(--utl-lima);color:var(--f-lima-tinta);font-size:1rem}
/* Fondo y borde (Quitar fondo y los demás de fondo): tarjetas con muestra. */
body.utl-una .uth-pastillas:has(input[value="transparente"],input[value="nitido"]) legend{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--f-texto-2);margin-bottom:8px}
body.utl-una .uth-pastillas:has(input[value="transparente"],input[value="nitido"]) .uth-pastillas-op{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
body.utl-una .uth-pastilla:has(input[value="transparente"],input[value="blanco"],input[value="color"],input[value="nitido"],input[value="suave"],input[value="muy-suave"]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:84px;padding:10px 6px!important;border-radius:14px!important;text-align:center;font-size:.75rem;line-height:1.2}
body.utl-una .uth-pastilla:has(input[value="transparente"],input[value="blanco"],input[value="color"],input[value="nitido"],input[value="suave"],input[value="muy-suave"])>span::before{content:"";display:block;width:30px;height:30px;margin:0 auto 6px;border-radius:9px;border:1px solid var(--f-linea-fuerte)}
body.utl-una .uth-pastilla:has(input[value="transparente"])>span::before{background:repeating-conic-gradient(var(--blanco-luz) 0 25%,var(--f-texto-2) 0 50%) 0 0/10px 10px}
body.utl-una .uth-pastilla:has(input[value="blanco"])>span::before{background:var(--blanco-luz)}
body.utl-una .uth-pastilla:has(input[value="color"])>span::before{background:conic-gradient(var(--f-lima),var(--blanco-luz),var(--f-texto-3),var(--f-lima))}
body.utl-una .uth-pastilla:has(input[value="nitido"])>span::before{background:var(--blanco-luz);border-radius:3px}
body.utl-una .uth-pastilla:has(input[value="suave"])>span::before{background:var(--blanco-luz);border-radius:9px;box-shadow:0 0 6px 2px var(--f-linea-fuerte)}
body.utl-una .uth-pastilla:has(input[value="muy-suave"])>span::before{background:var(--blanco-luz);border-radius:50%;box-shadow:0 0 12px 6px var(--f-linea-fuerte)}
body.utl-una .uth-pastilla.is-activa{box-shadow:inset 0 0 0 2px var(--utl-lima)!important}
/* Las casillas, como interruptores. */
body.utl-una .uth-casilla{display:flex;align-items:center;gap:10px;font-size:.875rem}
body.utl-una .uth-casilla input{appearance:none;-webkit-appearance:none;flex:none;width:40px;height:24px;margin:0;border-radius:999px;background:var(--f-sup-3);position:relative;cursor:pointer;transition:background .2s}
body.utl-una .uth-casilla input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--blanco-luz);transition:transform .2s}
body.utl-una .uth-casilla input:checked{background:var(--utl-lima)}
body.utl-una .uth-casilla input:checked::after{transform:translateX(16px);background:var(--negro-abismo)}
body.utl-una .uth-casilla input:focus-visible{outline:2px solid var(--utl-lima);outline-offset:2px}
[dir="rtl"] body.utl-una .uth-casilla input::after{left:auto;right:3px}
[dir="rtl"] body.utl-una .uth-casilla input:checked::after{transform:translateX(-16px)}
@media (prefers-reduced-motion:reduce){body.utl-una .uth-casilla input,body.utl-una .uth-casilla input::after{transition:none}}