/* ficha.css · «Los datos de tu negocio» (/tu-negocio/)
   Un formulario por pasos que prepara un mensaje con los datos de hoy del negocio; lo manda la persona
   (WhatsApp, correo o copiar el texto). Sin JavaScript se ve entero, como un formulario largo.
   Usa los tokens, los botones y el bisel de estilo.css: aquí solo va lo de esta página. */

/* Al saltar de campo en campo con el teclado, que la barra de pasos de abajo no tape el campo (WCAG 2.4.11) */
html { scroll-padding-bottom: 6.5rem; }

.pagina-ficha {
  --borde-campo: #78817c;   /* borde de los campos: 3,6:1 sobre el papel y 4:1 sobre el blanco (WCAG 1.4.11) */
  --verde-suave: #e1ece7;   /* fondo de una opción marcada */
  --verde-velo: #ebf3ef;    /* fondo al pasar el ratón */
}
/* Con JavaScript, la barra de pasos sustituye a la barra del móvil de la web (dos barras fijas serían demasiadas) */
.js .pagina-ficha .barra-movil { display: none; }
.js body.pagina-ficha { padding-bottom: 0; }

/* El bisel de la marca en las piezas de esta página */
.ficha-sin-js, .tipo, .opcion, .plan, .ficha-num, .ficha-paso-num, .nota-caja, .ficha-ticket, .ficha-despues, .ficha-largo {
  clip-path: polygon(var(--c, 10px) 0, 100% 0, 100% calc(100% - var(--c, 10px)), calc(100% - var(--c, 10px)) 100%, 0 100%, 0 var(--c, 10px));
}

/* ---------- Cabeza ---------- */
.ficha { padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.ficha-cabeza { padding-bottom: clamp(1.75rem, 4vw, 3rem); }
.ficha-cabeza h1 { max-width: 12em; }
.ficha-como { display: none; }
@media (min-width: 64rem) {
  .ficha-como { display: block; align-self: end; }
  .ficha-como ol { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.5rem; }
  .ficha-como li { padding-left: 0.25rem; }
  .ficha-como li::marker { color: var(--verde-claro); font-weight: 700; }
}

/* Sin JavaScript: el aviso de que así no se puede preparar el mensaje */
.ficha-sin-js { --c: 12px; max-width: 46rem; margin-bottom: 2rem; padding: 1rem 1.25rem; background: var(--blanco); font-weight: 550; }
.ficha-sin-js a { color: var(--verde-hondo); }
.ficha-paso .ficha-sin-js { margin: 2rem 0 0; }
.js .ficha-sin-js { display: none; }

/* ---------- Rejilla: pasos a un lado y el paso actual al otro (en el ordenador) ---------- */
.ficha-rejilla { display: grid; gap: 1.5rem; }
.ficha-cuerpo { min-width: 0; }
.ficha-ayuda { display: none; }
@media (min-width: 64rem) {
  .js .ficha-rejilla { grid-template-columns: 15rem minmax(0, 1fr); column-gap: clamp(2.5rem, 4.5vw, 5rem); align-items: start; }
  .ficha-lado { position: sticky; top: 2rem; }
  /* Debajo de los pasos, lo que conviene saber en cualquier paso */
  .ficha-ayuda { display: grid; gap: 0.75rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); font-size: 0.9375rem; line-height: 1.5; color: var(--gris); }
  .ficha-ayuda strong { color: var(--tinta); }
  .ficha-ayuda a { color: var(--verde-hondo); font-weight: 650; }
}

/* ---------- Los pasos: seis cuadros biselados unidos por una línea que se llena de verde ---------- */
.ficha-progreso { --tam: 2.75rem; }
.ficha-pasos { position: relative; display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.ficha-pasos::before, .ficha-pasos::after { content: ""; position: absolute; top: calc(var(--tam) / 2 - 1px); left: calc(var(--tam) / 2); right: calc(var(--tam) / 2); height: 2px; background: var(--linea); }
.ficha-pasos::after { background: var(--verde); transform-origin: 0 50%; transform: scaleX(var(--progreso, 0)); transition: transform 600ms var(--ease-out); }
.ficha-pasos li { position: relative; z-index: 1; }
.ficha-paso-boton { display: block; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ficha-paso-boton:disabled { cursor: default; }
.ficha-paso-boton:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.ficha-paso-num { --c: 9px; display: grid; place-items: center; width: var(--tam); height: var(--tam); background: var(--linea); color: var(--gris); font: 750 1.0625rem/1 var(--display); transition: background-color 250ms ease, color 250ms ease; }
.ficha-paso-nombre, .ficha-paso-dato { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ficha-pasos [data-estado="actual"] .ficha-paso-num { background: var(--tinta); color: var(--papel); }
.ficha-pasos [data-estado="hecho"] .ficha-paso-num { background: var(--verde); color: var(--papel); font-size: 0; }
/* Hecho: el número deja sitio a una marca */
.ficha-pasos [data-estado="hecho"] .ficha-paso-num::before { content: ""; width: 0.75rem; height: 0.4375rem; margin-top: -0.25rem; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); }
@media (hover: hover) and (pointer: fine) {
  .ficha-pasos [data-estado="hecho"] .ficha-paso-boton:hover .ficha-paso-num { background: var(--verde-hondo); }
  .ficha-pasos [data-estado="hecho"] .ficha-paso-boton:hover .ficha-paso-nombre { text-decoration: underline; text-underline-offset: 0.2em; }
}
@media (min-width: 64rem) {
  .ficha-pasos { flex-direction: column; justify-content: flex-start; gap: 0.875rem; }
  .ficha-pasos::before, .ficha-pasos::after { top: calc(var(--tam) / 2); bottom: calc(var(--tam) / 2); left: calc(var(--tam) / 2 - 1px); right: auto; width: 2px; height: auto; }
  .ficha-pasos::after { transform-origin: 50% 0; transform: scaleY(var(--progreso, 0)); }
  .ficha-paso-boton { display: grid; grid-template-columns: var(--tam) minmax(0, 1fr); column-gap: 0.875rem; align-items: center; width: 100%; min-height: var(--tam); }
  .ficha-paso-boton:has(.ficha-paso-dato:not(:empty)) .ficha-paso-num { grid-row: span 2; }
  .ficha-paso-nombre, .ficha-paso-dato { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .ficha-paso-nombre { grid-column: 2; font-weight: 600; line-height: 1.25; }
  .ficha-paso-dato { grid-column: 2; overflow: hidden; font-size: 0.875rem; line-height: 1.3; color: var(--gris); text-overflow: ellipsis; white-space: nowrap; }
  .ficha-paso-dato:empty { display: none; }
  .ficha-pasos [data-estado="actual"] .ficha-paso-nombre { font-weight: 750; }
  .ficha-pasos [data-estado="pendiente"] .ficha-paso-nombre { color: var(--gris); }
}

/* ---------- Cada paso ---------- */
.ficha-paso { min-width: 0; }
.ficha-paso + .ficha-paso { margin-top: 3.5rem; padding-top: 2.75rem; border-top: 1px solid var(--linea); }
.js .ficha-paso + .ficha-paso { margin-top: 0; padding-top: 0; border-top: 0; }
.ficha-paso-titulo { display: flex; align-items: center; gap: 0.875rem; font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.625rem); scroll-margin-top: 1.5rem; }
.ficha-paso-titulo:focus { outline: none; } /* recibe el foco al cambiar de paso, no con el tabulador */
.ficha-num { --c: 9px; display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; background: var(--tinta); color: var(--papel); font-size: 1.25rem; font-weight: 750; letter-spacing: 0; }
.js .ficha-num { display: none; } /* con JavaScript el número ya está en los pasos */
.ficha-paso-entrada { margin-top: 0.75rem; max-width: 40em; color: var(--gris); }

/* ---------- Campos ---------- */
.grupo, .pregunta, .tipos { min-width: 0; margin: 0; padding: 0; border: 0; }
.grupo { margin-top: 2.25rem; }
.grupo > legend { padding: 0; font-family: var(--display); font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.grupo > .campos { margin-top: 1rem; }
.campos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem 0.75rem; align-items: end; margin-top: 1.75rem; }
.campos > * { grid-column: 1 / -1; min-width: 0; }
.campos > .m-5 { grid-column: span 5; }
.campos > .m-7 { grid-column: span 7; }
.campos-arriba { align-items: start; }
@media (min-width: 48rem) {
  .campos { column-gap: 1.25rem; }
  .campos > .d-2 { grid-column: span 2; }
  .campos > .d-3 { grid-column: span 3; }
  .campos > .d-4 { grid-column: span 4; }
  .campos > .d-5 { grid-column: span 5; }
  .campos > .d-6 { grid-column: span 6; }
}
@media (min-width: 64rem) { .campos > .w-4 { grid-column: span 4; } } /* en pantallas anchas, un tercio */
.campo { position: relative; display: grid; gap: 0.375rem; align-content: end; }
.campo > label:first-child, .pregunta > legend, .ficha-buscar > label { font-weight: 650; line-height: 1.35; }
.pregunta > legend { padding: 0; margin-bottom: 0.625rem; }
.obligatorio { font-weight: 500; color: var(--gris); white-space: nowrap; }
.pista { font-size: 0.9375rem; line-height: 1.45; color: var(--gris); }
.pregunta > .pista { margin-top: 0.625rem; }
.pregunta > .pista-arriba { margin: -0.25rem 0 0.625rem; }
.error { color: var(--alerta); font-size: 0.9688rem; font-weight: 650; line-height: 1.4; }
.pregunta > .error, .tipos > .error { margin-bottom: 0.625rem; }

.ficha-form :is(input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], input[type="time"], select, textarea) {
  width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--borde-campo);
  border-radius: 0;
  background-color: var(--blanco);
  color: var(--tinta);
  font-size: 1.0625rem; /* 17 px: el móvil no hace zoom al escribir */
  line-height: 1.4;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.ficha-form textarea { min-height: 6.5rem; padding-bottom: 1.5rem; resize: vertical; }
.ficha-form ::placeholder { color: var(--gris); opacity: 1; }
.ficha-form :is(input, select, textarea):focus-visible { outline: 3px solid var(--verde); outline-offset: 1px; border-color: var(--verde); }
@media (hover: hover) and (pointer: fine) {
  .ficha-form :is(input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], input[type="time"], select, textarea):hover { border-color: var(--tinta); }
}
.ficha-form select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2318201d' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9375rem center;
  background-size: 0.875rem auto;
  cursor: pointer;
}
.ficha-form input[readonly] { background-color: var(--papel); color: var(--gris); }
.ficha-form input[type="time"] { width: 7.25rem; padding-inline: 0.625rem; font-variant-numeric: tabular-nums; }
.ficha-form input[type="number"] { font-variant-numeric: tabular-nums; }
.ficha-form [aria-invalid="true"] { border-color: var(--alerta); box-shadow: inset 0 0 0 1px var(--alerta); }
/* Cuenta de letras: solo aparece cuando queda poco sitio */
.contador { position: absolute; right: 0.5rem; bottom: 0.375rem; padding: 0 0.25rem; background: var(--blanco); color: var(--gris); font-size: 0.8125rem; font-variant-numeric: tabular-nums; pointer-events: none; }

/* Opciones (casillas y botones de radio) con su control a la vista */
.opciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.opcion { --c: 8px; position: relative; display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; padding: 0.5rem 1rem 0.5rem 0.75rem; background: var(--blanco); font-weight: 550; line-height: 1.3; cursor: pointer; transition: background-color 160ms ease; -webkit-tap-highlight-color: transparent; }
.opcion input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--verde); cursor: pointer; }
.opcion input:focus-visible { outline: none; }
.opcion:has(input:focus-visible) { outline: 3px solid var(--tinta); outline-offset: -5px; }
.opcion:has(input:checked) { background: var(--verde-suave); }
.opcion-mini { justify-self: start; font-size: 0.9375rem; }
.opcion-nota { color: var(--gris); font-weight: 500; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .opcion:hover { background: var(--verde-velo); }
  .opcion:has(input:checked):hover { background: var(--verde-suave); }
}

/* Una pregunta que aparece según la respuesta anterior */
.js .condicional:not([hidden]) { animation: ficha-aparece 280ms var(--ease-out) both; }
.seguimiento { display: grid; gap: 0.375rem; margin-top: 0.875rem; }
@keyframes ficha-aparece { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Paso 1: el tipo de negocio ---------- */
.ficha-buscar { display: grid; gap: 0.375rem; margin-top: 1.5rem; }
.ficha-buscar-caja { position: relative; }
.ficha-buscar-caja .icono { position: absolute; left: 0.9375rem; top: 50%; width: 1.125rem; height: 1.125rem; margin-top: -0.5625rem; color: var(--gris); pointer-events: none; }
.ficha-form .ficha-buscar input { padding-left: 2.75rem; }
.ficha-buscar-estado { font-size: 0.9375rem; color: var(--gris); }
.tipos { margin-top: 1.5rem; }
.tipos-leyenda { padding: 0; margin-bottom: 0.875rem; font-weight: 650; }
.bloque { min-width: 0; }
.bloque + .bloque { margin-top: 1.5rem; }
.bloque-titulo { margin: 0 0 0.625rem; font-family: var(--display); font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.bloque-opciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Cada tipo es una pieza grande que se toca entera; la marcada se pone verde y lleva su marca */
.tipo { --c: 9px; position: relative; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.875rem; padding: 0.5rem 1rem; background: var(--blanco); font-weight: 600; line-height: 1.25; text-align: center; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); -webkit-tap-highlight-color: transparent; }
.tipo input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tipo:active { transform: scale(0.97); }
.tipo:has(input:checked) { background: var(--verde); color: var(--papel); }
.tipo:has(input:checked)::before { content: ""; flex: none; width: 0.4375rem; height: 0.8125rem; margin: -0.1875rem 0.25rem 0 0; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); animation: ficha-marca 260ms var(--ease-out) both; }
.tipo:has(input:focus-visible) { outline: 3px solid var(--tinta); outline-offset: -5px; }
.tipo:has(input:checked:focus-visible) { outline-color: var(--papel); }
@keyframes ficha-marca { from { opacity: 0; transform: rotate(45deg) scale(0.3); } }
@media (hover: hover) and (pointer: fine) {
  .tipo:hover { background: var(--verde-velo); }
  .tipo:has(input:checked):hover { background: var(--verde-hondo); }
}
.tipo-otro { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; margin-top: 1.5rem; }
.tipo-otro-texto { display: flex; align-items: center; min-height: 2.875rem; font-weight: 650; }
.tipo-otro > .tipo { flex: 0 0 auto; min-width: 9rem; }
.tipo-otro > .campo { flex: 1 1 18rem; }
/* En pantallas anchas, todos los bloques a la vista en columnas equilibradas */
@media (min-width: 48rem) {
  .bloques { columns: 2; column-gap: 2.25rem; }
  .bloque { break-inside: avoid; padding-bottom: 1.5rem; }
  .bloque + .bloque { margin-top: 0; }
  .tipo-otro { margin-top: 0.5rem; }
}
@media (min-width: 75rem) { .bloques { columns: 3; } }
/* En el móvil (con JavaScript), cada bloque se abre y se cierra: así no hay que bajar sin fin */
.acordeon .bloques { columns: auto; border-bottom: 1px solid var(--linea); }
.acordeon .bloque { padding-bottom: 0; border-top: 1px solid var(--linea); }
.acordeon .bloque + .bloque { margin-top: 0; }
.acordeon .bloque-titulo { margin: 0; font-size: inherit; letter-spacing: 0; }
.acordeon .bloque-opciones { padding-bottom: 1.125rem; }
.bloque-boton { position: relative; display: grid; gap: 0.125rem; width: 100%; min-height: 3.75rem; padding: 0.75rem 2.75rem 0.75rem 0; border: 0; background: none; color: var(--tinta); text-align: left; cursor: pointer; }
.bloque-boton:focus-visible { outline-offset: -3px; }
.bloque-nombre { font-family: var(--display); font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.bloque-pista { font-size: 0.9375rem; font-weight: 450; line-height: 1.35; color: var(--gris); }
.bloque-elegido { font-size: 0.9375rem; font-weight: 700; line-height: 1.35; color: var(--verde-hondo); }
.bloque-elegido:empty { display: none; }
.bloque-boton:has(.bloque-elegido:not(:empty)) .bloque-pista { display: none; }
.bloque-boton::after { content: ""; position: absolute; right: 0.625rem; top: 50%; width: 0.75rem; height: 0.75rem; border-right: 2.5px solid var(--verde); border-bottom: 2.5px solid var(--verde); transform: translateY(-70%) rotate(45deg); transition: transform 250ms var(--ease-out); }
.bloque-boton[aria-expanded="true"]::after { transform: translateY(-30%) rotate(-135deg); }
.acordeon .bloque-opciones:not([hidden]) { animation: ficha-aparece 260ms var(--ease-out) both; }

/* ---------- Paso 3: el horario, un día por fila ---------- */
.partido { margin-top: 1.5rem; }
.dias { margin-top: 1.25rem; border-top: 1px solid var(--linea); }
.dia { min-width: 0; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--linea); }
.dia-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre cerrado" "horas horas"; align-items: center; gap: 0.375rem 1rem; padding: 0.625rem 0 0.875rem; }
.dia-nombre { grid-area: nombre; font-weight: 700; }
.dia-cerrado { grid-area: cerrado; }
.dia-horas { grid-area: horas; display: grid; gap: 0.5rem; }
.tramo { display: flex; align-items: center; gap: 0.5rem; }
.tramo-pre { min-width: 2.25rem; color: var(--gris); font-size: 0.9375rem; }
.tramo-a { color: var(--gris); font-size: 0.9375rem; }
.sin-partido .tramo-2 { display: none; }
.dia:has(.dia-cerrado input:checked) .dia-horas { display: none; }
.dia:has(.dia-cerrado input:checked) .dia-nombre { color: var(--gris); }
.dia.copiado { animation: ficha-copiado 1200ms var(--ease-out); }
@keyframes ficha-copiado { from { background-color: var(--verde-suave); } to { background-color: transparent; } }
.copiar-dias { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; padding: 0.125rem 0; border-bottom: 1px solid var(--linea); }
.copiar-hecho { font-size: 0.9375rem; color: var(--gris); }
.boton-texto { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--verde-hondo); font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; cursor: pointer; }
.boton-texto:hover { text-decoration-thickness: 2px; }
@media (min-width: 48rem) {
  /* Medidas justas para que mañana y tarde quepan en una línea desde unos 1250 px (portátiles de 1280) */
  .dia-fila { grid-template-columns: 6.5rem minmax(0, 1fr) auto; grid-template-areas: "nombre horas cerrado"; column-gap: 0.75rem; padding: 0.625rem 0; }
  .dia-horas { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
  .tramo-pre { min-width: 2rem; }
}

/* ---------- Paso 4: notas y respuestas en números ---------- */
.nota-caja { --c: 10px; padding: 0.875rem 1.125rem; background: var(--verde-suave); font-size: 0.9688rem; line-height: 1.5; }
.pregunta .nota-caja { margin-top: 0.75rem; }
.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; max-width: 26rem; }
.numeros label { font-size: 0.9375rem; }

/* ---------- Paso 5: la web que le interesa y los datos legales ---------- */
.planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 48rem) { .planes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan { --c: 10px; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 0.125rem 0.625rem; padding: 0.875rem 1rem 1rem; background: var(--blanco); cursor: pointer; transition: background-color 160ms ease; -webkit-tap-highlight-color: transparent; }
.plan input { grid-row: 1; width: 1.25rem; height: 1.25rem; margin: 0.125rem 0 0; accent-color: var(--verde); cursor: pointer; }
.plan input:focus-visible { outline: none; }
.plan-nombre { grid-column: 2; font-weight: 700; }
.plan-precio { grid-column: 2; font-family: var(--display); font-size: 1.375rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; }
.plan-desde { font-family: var(--texto); font-size: 0.875rem; font-weight: 650; letter-spacing: 0; }
.plan-texto { grid-column: 2; font-size: 0.875rem; line-height: 1.35; color: var(--gris); }
.plan:has(input:checked) { background: var(--verde-suave); }
.plan:has(input:focus-visible) { outline: 3px solid var(--tinta); outline-offset: -5px; }
@media (hover: hover) and (pointer: fine) { .plan:hover { background: var(--verde-velo); } .plan:has(input:checked):hover { background: var(--verde-suave); } }
.planes-pie a, .legales a { color: var(--verde-hondo); font-weight: 600; }
.legales { margin-top: 2.25rem; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.legales summary { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5rem; min-height: 3.5rem; padding: 0.9375rem 2.75rem 0.9375rem 0; font-weight: 650; line-height: 1.35; cursor: pointer; list-style: none; }
.legales summary::-webkit-details-marker { display: none; }
.legales summary::after { content: ""; position: absolute; right: 0.625rem; top: 50%; width: 0.75rem; height: 0.75rem; border-right: 2.5px solid var(--verde); border-bottom: 2.5px solid var(--verde); transform: translateY(-70%) rotate(45deg); transition: transform 250ms var(--ease-out); }
.legales[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.legales summary:focus-visible { outline-offset: -3px; }
.legales-pista { font-weight: 450; color: var(--gris); }
.legales > .pista { max-width: 44em; }
.legales > .campos { margin: 1rem 0 1.5rem; }

/* ---------- Paso 6: el mensaje, como el ticket de la calculadora ---------- */
.ficha-ticket { --c: 22px; --fondo: var(--tinta); margin-top: 2.25rem; padding: 1.75rem 1.375rem 2rem; background: var(--tinta); color: var(--papel); }
.ficha-ticket h3 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); }
.ficha-ticket-entrada { margin-top: 0.5rem; color: var(--sobre-tinta-suave); font-size: 0.9688rem; }
.ficha-ticket :focus-visible { outline-color: var(--verde-claro); }
.ficha-resumen { margin-top: 1.25rem; }
.resumen-seccion { break-inside: avoid; padding: 0.75rem 0 1rem; border-top: 1px dashed rgb(244 243 239 / 0.3); }
.resumen-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.resumen-seccion h4 { font-family: var(--texto); font-size: 1rem; font-weight: 750; letter-spacing: 0; line-height: 1.3; color: var(--verde-claro); }
.ficha-cambiar { flex: none; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.25rem; border: 0; background: none; color: var(--papel); font-size: 0.9375rem; font-weight: 650; text-decoration: underline; text-decoration-color: rgb(244 243 239 / 0.5); text-underline-offset: 0.25em; cursor: pointer; }
.ficha-cambiar:hover { text-decoration-color: currentColor; }
.resumen-filas { display: grid; gap: 0.375rem; margin: 0.125rem 0 0; }
.resumen-filas div { display: grid; grid-template-columns: minmax(0, 1fr); font-size: 0.9688rem; line-height: 1.45; }
.resumen-filas dt { color: var(--sobre-tinta-suave); font-size: 0.875rem; }
.resumen-filas dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.resumen-vacio { margin-top: 0.125rem; font-size: 0.9375rem; color: var(--sobre-tinta-suave); }
@media (min-width: 30rem) {
  .resumen-filas div { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 0.875rem; }
  .resumen-filas dt { font-size: inherit; }
}
@media (min-width: 64rem) { .ficha-resumen { columns: 2; column-gap: 3rem; } }

.ficha-privacidad { margin-top: 0.5rem; padding-top: 1.25rem; border-top: 1px solid rgb(244 243 239 / 0.3); font-size: 0.875rem; line-height: 1.5; color: var(--sobre-tinta-suave); }
.ficha-privacidad h4 { font-family: var(--texto); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0; color: var(--papel); }
.ficha-privacidad dl { display: grid; gap: 0.375rem; margin: 0.5rem 0 0; }
/* En el móvil, cada dato en su línea: «Responsable: Bisel Web.» */
.ficha-privacidad dt { display: inline; color: var(--papel); font-weight: 650; }
.ficha-privacidad dt::after { content: ": "; }
.ficha-privacidad dd { display: inline; margin: 0; }
.ficha-privacidad a { color: var(--papel); }
@media (min-width: 40rem) {
  .ficha-privacidad dl div { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: 0.75rem; }
  .ficha-privacidad dt::after { content: none; }
}
@media (min-width: 64rem) { .ficha-privacidad dl { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }

.ficha-envios { display: grid; gap: 0.625rem; margin-top: 1.5rem; }
.ficha-envios .boton { width: 100%; }
@media (min-width: 40rem) { .ficha-envios { display: flex; flex-wrap: wrap; } .ficha-envios .boton { width: auto; } }
.ficha-largo { --c: 8px; margin-top: 1rem; padding: 0.75rem 1rem; background: var(--tinta-2); font-size: 0.9375rem; }
.ficha-copiado { font-size: 0.9375rem; font-weight: 650; color: var(--verde-claro); }
.ficha-copiado:not(:empty) { margin-top: 0.875rem; }
.ficha-despues { --c: 16px; margin-top: 1.25rem; padding: 1.25rem 1.375rem 1.375rem; background: var(--verde); color: var(--papel); }
.ficha-despues:not([hidden]) { animation: ficha-aparece 420ms var(--ease-out) both; }
.ficha-despues h4 { font-family: var(--display); font-size: 1.375rem; font-weight: 750; letter-spacing: -0.015em; line-height: 1.2; }
.ficha-despues h4:focus { outline: none; }
.ficha-despues p { margin-top: 0.5rem; }
.ficha-despues .despues-paso { font-weight: 750; }
.ficha-despues p:empty { display: none; }
.ficha-despues a { color: var(--papel); }
.ficha-texto { margin-top: 1rem; }
.ficha-texto summary { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--papel); font-weight: 650; text-decoration: underline; text-decoration-color: rgb(244 243 239 / 0.5); text-underline-offset: 0.25em; cursor: pointer; }
.ficha-form .ficha-texto textarea { min-height: 15rem; margin-top: 0.375rem; padding: 0.875rem 1rem; border: 0; background: var(--tinta-2); color: var(--papel); font-size: 0.9375rem; line-height: 1.5; }
@media (min-width: 48rem) { .ficha-ticket { padding: 2.25rem 2.5rem 2.5rem; } }

/* ---------- La barra de abajo: Atrás y Siguiente siempre a mano ---------- */
.ficha-nav { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 0.75rem; margin: 2.5rem calc(-1 * var(--margen)) 0; padding: 0.75rem var(--margen) calc(0.75rem + env(safe-area-inset-bottom)); background: var(--papel); border-top: 1px solid var(--linea); }
.ficha-nav .boton { min-height: 3rem; padding: 0.625rem 1.25rem; }
.ficha-siguiente { margin-left: auto; }
.ficha-revisar { margin-left: auto; padding-inline: 0.25rem; }
.ficha-revisar:not([hidden]) + .ficha-siguiente { margin-left: 0; }
.ficha-nav-estado { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 0.9375rem; color: var(--gris); text-overflow: ellipsis; white-space: nowrap; }
.ficha-nav-estado strong { color: var(--tinta); }
.ficha-nav-estado:empty { display: none; }
.flecha { display: inline-block; flex: none; width: 0.5625rem; height: 0.5625rem; margin: 0 0.125rem 0 0.75rem; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); }
.flecha-atras { margin: 0 0.75rem 0 0.125rem; transform: rotate(135deg); }
@media (min-width: 64rem) { .ficha-nav { margin-inline: 0; padding-inline: 0; } }
/* Móviles estrechos: con «Atrás», «Revisar» y «Siguiente» a la vez, menos hueco entre ellos. Por debajo de 360 px no caben
   los tres y «Revisar» se va (el paso 6 sigue a un toque en la barra de pasos de arriba) */
@media (max-width: 23.99rem) { .ficha-nav { gap: 0.5rem; } }
@media (max-width: 22.49rem) {
  .ficha-revisar { display: none; }
  .ficha-revisar:not([hidden]) + .ficha-siguiente { margin-left: auto; }
}

/* ---------- Alto contraste de Windows: las piezas sin fondo necesitan su borde ---------- */
@media (forced-colors: active) {
  .tipo, .opcion, .plan, .ficha-paso-num, .ficha-num { border: 1px solid CanvasText; }
  .tipo:has(input:checked), .ficha-pasos [data-estado="actual"] .ficha-paso-num { outline: 3px solid Highlight; outline-offset: -4px; }
}